highlight-detect-default — the detection wrapper

The convenience form of the DLD wiring: install @jixoai/highlight-detect-default and wrap a subtree — every <CodeCard lang="auto"> below eats defaultLangDetector() as its context ring, while the langDetector prop and the backend's own detector keep their priority. The component is ~10 lines of pure wiring (its body IS the hand-written form ②); the detector itself, its four-layer waterfall and the betlang wasm live in the @jixoai/highlight-lang-detector lib item this one depends on. The deep story — the three rings, the null cascade, the layer table — lives on the code-card page's lang="auto" section.

children wrapper · form ① context spreads downward only zero styling · zero behavior beyond wiring

highlight-detect-default

The wrapped card enters lang=auto with nothing but a filename — L1's extension table answers typescript after hydration (prerendered output stays plain by law). The sibling outside the wrapper is untouched: an ordinary lang=ts card that never consults a detector.

main.ts auto

// nobody named the language — the filename did it (L1), and the
// wasm never loads for this card
const proof = 'detection is optional, by item';
export { proof };

plain.ts ts

// outside the wrapper — the ordinary path
export const untouched = true;

highlight-detect-default-usage.svelte svelte

<script lang="ts">
  import CodeCard from '$lib/ui/code-card';
  import HighlightDetectDefault from '$lib/ui/highlight-detect-default';
</script>

<!-- every lang="auto" card below eats the DLD default; siblings
     outside stay untouched; nested wrappers take the nearest -->
<HighlightDetectDefault>
  <CodeCard filename="main.ts" lang="auto" code={sample} />
</HighlightDetectDefault>

<!-- the zero-component twin (form ②) — the wrapper's body, hand-written
     at any subtree root instead:
     setContext(HIGHLIGHT_DETECT_KEY, { detector: defaultLangDetector() }) -->

usage

Usage

Two equivalent wirings — the wrapper (form ①) or one hand-written setContext line at any subtree root (form ②, zero components). The card's reader cannot tell them apart: both store the same { detector } adapter under HIGHLIGHT_DETECT_KEY.

usage

<script lang="ts">
  import CodeCard from '$lib/ui/code-card';
  import HighlightDetectDefault from '$lib/ui/highlight-detect-default';
</script>

<!-- every lang="auto" card below eats the DLD default; siblings
     outside stay untouched; nested wrappers take the nearest -->
<HighlightDetectDefault>
  <CodeCard filename="main.ts" lang="auto" code={sample} />
</HighlightDetectDefault>

<!-- the zero-component twin (form ②) — the wrapper's body, hand-written
     at any subtree root instead:
     setContext(HIGHLIGHT_DETECT_KEY, { detector: defaultLangDetector() }) -->

Install pulls the lib item with it: npx jixoai-ui add @jixoai/highlight-detect-default. The rings, the null-cascade law and the waterfall live in code-card's lang="auto" section.

axes

Universal props

The eight-axis surface (explicit-props), the NO-ROOT dialect: the wrapper renders children with NO element of its own, so the lanes are SUPPLIED through context only — every component inside the wrapped subtree resolves them as ambient and stamps its own roots. The demo wraps a code surface at size 18; the HIGHLIGHT_DETECT_KEY detection default is family state, untouched by the axes.

highlight-detect-default · universal props

const axes = 8

const named = 'steps'

universal-props-demo.svelte svelte

<HighlightDetectDefault size={18}>
  <CodeCard lang="auto" code={source} />
</HighlightDetectDefault>

api

HighlightDetectDefault props

Properties

Property	Type	Default	Description
children *	Snippet	—	The subtree to wire — rendered verbatim in place ({@render children()}); the wrapper adds no element to the DOM. The eight axes arrive through context (HighlightContext) — the wrapper stamps nothing itself; the universal fold below serves the axis rows.

Universal props

Property	Type	Default	Description
size	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	the base scale — root font-size; parts size in em
shape	'round' \| 'scoop' \| 'bevel' \| 'notch' \| 'square' \| 'squircle' \| 'auto'	'auto' · ambient scope	corner geometry (CSS corner-shape; §14 degrade table)
radius	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	corner size; auto = the concentric broadcast (§3)
density	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	spacing/leading scale over the kernel channels (§4)
color	'primary' \| 'secondary' \| 'error' \| 'warn' \| 'success' \| 'info' \| 'auto' \| number \| string	'auto' · ambient scope	the hue axis of the fixed oklch primary system (§5)
theme	'light' \| 'dark' \| 'system' \| 'auto'	'auto' · ambient scope	light/dark profile; system = the JS-mutable global (§6)
elevation	'level-1' \| 'level0' \| 'level1' \| 'level2' \| 'level3' \| 'level4' \| 'level5' \| 'auto' \| number	'auto' · ambient scope	official M3 levels over the surface ladder (§7)
motion	'reduced' \| 'subtle' \| 'normal' \| 'expressive' \| 'auto' \| number	'auto' · ambient scope	intensity across the motion kernels (§8)