code-card — the readonly code surface, on Shiki

add an engine — one item per engine

# code-card ships ONE engine by default: shiki (via @jixoai/highlight-shiki)
npx jixoai-ui add @jixoai/highlight-shiki          # already aboard with code-card
npx jixoai-ui add @jixoai/highlight-prismjs        # + prismjs
npx jixoai-ui add @jixoai/highlight-highlightjs    # + highlight.js
npx jixoai-ui add @jixoai/highlight-sugar-high     # + sugar-high
npx jixoai-ui add @jixoai/highlight-tree-sitter    # + web-tree-sitter + grammar wasm
npx jixoai-ui add @jixoai/highlight-microlighter   # + microlighter

Each item lands its factory in $lib/highlight/<engine> and declares only its own npm dependencies — sibling engines never ride along. microlighter + vite: its grammar loading is runtime-templated inside the package and misses fail silently, so hosts owe two lines — dev excludes it from the optimizer, builds emit its dist/grammars/*.js next to the engine chunk (this site's vite.config.ts is the reference implementation). Breaking (2026-09-06): code-card used to bundle prismjs and microlighter as hard npm dependencies — it does not anymore, and nothing is shimmed. If you consumed those factories, add the matching item above; the $lib/highlight/<engine> import path keeps working for every engine you install, and engines you never install simply never download. The full migration table lives in the registry docs.

two equivalent wirings — pick one

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

<!-- form ①: the wrapper item — a ~10-line children provider whose body
     IS the one line of form ②. Svelte context only spreads downward:
     cards OUTSIDE this wrapper are untouched; nested wrappers, nearest
     wins; the langDetector prop always outranks whatever is wired here -->
<HighlightDetectDefault>
  <CodeCard filename="main.ts" lang="auto" code={sample} />
</HighlightDetectDefault>

<script lang="ts">
  // highlight-detect-root.svelte — any subtree root, zero components
  import { setContext } from 'svelte';
  import { HIGHLIGHT_DETECT_KEY } from '$lib/highlight/context-key';
  import { defaultLangDetector } from '$lib/highlight/default-detector';

  setContext(HIGHLIGHT_DETECT_KEY, { detector: defaultLangDetector() });
</script>

<slot /> <!-- your subtree: every lang="auto" card below eats the DLD -->

# detection is an OPTIONAL capability — a bare code-card install carries
# ZERO detector bytes; lang="auto" without a ring rejects at runtime
npx jixoai-ui add @jixoai/highlight-lang-detector   # the DLD lib: four-layer waterfall, framework-free
npx jixoai-ui add @jixoai/highlight-detect-default  # + the children wrapper (form ① convenience)

the DLD waterfall — cheap layers first, every layer its own lazy module

'Four layers' counts the waterfall only — the card's detection rings stay three plus the reject tail. The on-demand law cuts both ways: a filename hit loads L2-L4 zero bytes (pick auto in the playground — its filename answers at L1), and a bare install loads the whole capability zero bytes — the DLD is never a hidden dependency of code-card. A detection whose language the active engine's curated set rejects is terminal by the same matrix law as any lang: the reject names the engines that cover it.

live — the filename-less lanes (structure and statistics)

{
  "lane": "L3",
  "why": "no filename, no shebang — but the whole body parses as JSON",
  "result": { "lang": "json", "source": "structure" }
}

set -euo pipefail
# no filename, no shebang, no structural shape — the wasm answers:
# betlang's calibrated top label is Shell, the authority table maps it
# to bash, and the card paints it with whatever engine is selected
npx jixoai-ui add @jixoai/highlight-lang-detector

<script lang="ts">
  import CodeCard from '@ui/code-card.svelte';
  import HighlightDetectDefault from '@ui/highlight-detect-default';
  import { AUTO_LANG } from '@lib/highlight/lang-detector';
</script>

<!-- no filename, no shebang — the body's shape answers at L3 -->
<HighlightDetectDefault>
  <CodeCard lang={AUTO_LANG} code={structureSample} copyable={false} />
</HighlightDetectDefault>

<!-- no shape either — the wasm answers at L4 -->
<HighlightDetectDefault>
  <CodeCard lang={AUTO_LANG} code={statisticalSample} copyable={false} />
</HighlightDetectDefault>

Both cards hydrate plain and upgrade after the detector resolves — prerendered output is always plain text (detection never runs server-side). The wasm rides the @jixoai/ui-betlang-wasm npm package (betlang = 0.1.1 pinned at the crate, checksum-gated build): vite emits it as a real asset through the ?url channel, fetched the first time a sample falls through L1-L3.

the detection lab — type anything, watch the waterfall answer

The traced DLD reports one row per executed layer — what it consulted, what it answered, and how long it took; the layers below a hit render as skipped (the short-circuit law made visible). The card at the bottom paints through the real consumer path: lang="auto" inside the wrapper, its own waterfall run, never a pre-computed verdict.

set -euo pipefail
# no filename, no shebang, no structural shape — the wasm answers:
# betlang's calibrated top label is Shell, the authority table maps it
# to bash, and the card paints it with whatever engine is selected
npx jixoai-ui add @jixoai/highlight-lang-detector