@lovett/ui 0.0.9 → 0.0.10

package/src/theme-v2.css

@@ -1,46 +1,7 @@
 /*
  * @lovett/ui — v2 theme, SCOPED.
  *
- * ─────────────────────────────────────────────────────────────────────
- * SUPERSEDED FOR NEW WORK by `src/v2/theme.css`.
- *
- * That file is the OKLCH design layer: a namespaced `--lv-*` token set,
- * an explicit surface ladder, elevation as shadow + inner highlight, and
- * both appearances driven by `prefers-color-scheme` AND `data-theme`.
- * New surfaces should import it and use `@lovett/ui/v2`.
- *
- * ── THAT DIRECTIVE IS NO LONGER TRUE (2026-08-20) ─────────────────────────
- * `@lovett/ui/v2` is NOT EXPORTED any more. The `./v2`, `./v2/theme.css` and
- * `./v2/__demo__/showcase` entries were removed from `package.json` under
- * ADR-CE-0027 D6 step 5, on the owner's decision, after a search that reaches
- * gitignored trees confirmed **zero consumers family-wide**. It cleared four
- * name collisions (`EmptyState`, `EmptyStateProps`, `Panel`, `Toolbar`).
- *
- * NO SOURCE WAS DELETED. `src/v2/` is intact and the removal is three lines of
- * `exports` to restore, which is why it was done this way rather than by
- * deleting components.
- *
- * THIS FILE STAYS AND IS STILL LIVE — two ignite worktrees import it as
- * `@lovett/ui/theme-v2.css` in their `index.css`. Do not confuse it with
- * `src/v2/theme.css`, which is a different, larger file and is the one that
- * went unexported.
- *
- * Consequence to know about: the v2 BRIDGE below (section 3) maps `--lv-*` so
- * v2 primitives render in a `data-ds="v2"` subtree. With no public `./v2`
- * entry, nothing can import those primitives, so the bridge is inert. It is
- * left in place because it is harmless, because removing it is the source
- * surgery this change deliberately avoided, and because it becomes live again
- * the moment the exports are restored.
- *
- * This file stays because live consumers depend on it. Everything ABOVE
- * the "APPENDED" marker near the bottom is untouched and still generated
- * — every existing declaration resolves to exactly the value it always
- * did. The appended region is hand-authored and additive: it bridges
- * this scope onto the v2 token names and adds the automatic-dark support
- * this file never had. If you re-run the generator, re-apply that region.
- * ─────────────────────────────────────────────────────────────────────
- *
- * GENERATED (region above the marker). Regenerate with:
+ * GENERATED. Regenerate with:
  *   python3 scripts/figma/emit-theme.py <corpus> --out packages/ui/src/theme-v2.css
  *
  * Opt in by putting `data-ds="v2"` on any element. Everything inside it
@@ -193,8 +154,11 @@
   --card-shadow-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 2px 4px -1px oklch(0 0 0 / 0.08), 0 6px 14px -2px oklch(0 0 0 / 0.08), inset 0 1px 0 0 oklch(1 0 0 / 0.9);
   --inset-highlight: 255 255 255 / 0.9;
   --modal-overlay: 0 0 0 / 0.32;
-  --ring-focus: 0 0 0 3px rgb(221 40 34 / 0.22);
-  --ring-error: 0 0 0 3px rgb(151 93 1 / 0.22);
+  /* Solid, matching the base theme — a 3px translucent halo measures ~1.4:1
+     against its surface, under the 3:1 WCAG 2.2 SC 2.4.11 asks of a focus
+     indicator. See the note on --ring-focus in tokens.css. */
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
+  --ring-error: 0 0 0 2px rgb(var(--destructive));
 }
 
 /*
@@ -260,207 +224,5 @@
   --card-shadow-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
   --inset-highlight: 255 255 255 / 0.05;
   --modal-overlay: 0 0 0 / 0.7;
-  --ring-focus: 0 0 0 3px rgb(228 70 58 / 0.3);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   ═══════════════════════════ APPENDED ═══════════════════════════════
-   Hand-authored, additive. Nothing above this line was changed.
-   Three things this region adds:
-
-     1. AUTOMATIC DARK. The generated file only goes dark on an explicit
-        `data-theme="dark"`. A surface that wants to follow the OS opts
-        in with `data-theme="auto"`; the block below is a verbatim copy
-        of the explicit-dark map, because a media query and an attribute
-        selector cannot share a rule. Keep the two in sync.
-
-     2. THE SURFACE LADDER, as first-class names. The generated file
-        encodes the ladder implicitly across a dozen aliases
-        (--page-bg / --bg-surface / --bg-card / --tray-bg ...). These
-        five names say what the tier IS, which is what a component
-        should be reading.
-
-     3. A BRIDGE to the v2 `--lv-*` tokens, so `@lovett/ui/v2`
-        primitives render correctly inside an existing `data-ds="v2"`
-        subtree without also loading `src/v2/theme.css`. Migration can
-        then happen one component at a time.
-   ══════════════════════════════════════════════════════════════════════ */
-
-/* ── 1. Automatic dark (opt-in via data-theme="auto") ─────────────── */
-
-@media (prefers-color-scheme: dark) {
-  [data-ds='v2'][data-theme='auto'] {
-    color-scheme: dark;
-
-    --page-bg: 11 16 28;
-    --background: 11 16 28;
-    --main-content-bg: 11 16 28;
-    --bg-surface: 27 35 51;
-    --surface-frame: 27 35 51;
-    --card-frame-bg: 27 35 51;
-    --bg-card: 48 58 80;
-    --card: 48 58 80;
-    --tray-bg: 48 58 80;
-    --bg-elevated: 70 82 109;
-    --surface-raised: 70 82 109;
-    --popover: 70 82 109;
-    --bg-input: 27 35 51;
-    --bg-card-hover: 70 82 109;
-    --bg-input-hover: 48 58 80;
-    --muted: 48 58 80;
-    --canvas-placement-bg: 27 35 51;
-    --foreground: 250 251 252;
-    --card-foreground: 250 251 252;
-    --popover-foreground: 250 251 252;
-    --text-secondary: 192 193 195;
-    --muted-foreground: 192 193 195;
-    --text-tertiary: 162 163 165;
-    --text-muted: 133 134 136;
-    --secondary: 48 58 80;
-    --secondary-foreground: 250 251 252;
-    --border: 255 255 255 / 0.08;
-    --border-strong: 255 255 255 / 0.14;
-    --border-card: 255 255 255 / 0.08;
-    --border-input: 255 255 255 / 0.14;
-    --main-content-border: 255 255 255 / 0.08;
-    --accent: 228 70 58;
-    --accent-bright: 251 114 99;
-    --accent-hover: 251 114 99;
-    --primary: 228 70 58;
-    --primary-hover: 251 114 99;
-    --success: 80 188 126;
-    --warning: 190 160 64;
-    --destructive: 218 145 55;
-    --info: 181 134 254;
-    --success-bg: 6 160 93 / 0.16;
-    --warning-bg: 161 131 18 / 0.16;
-    --destructive-bg: 187 116 2 / 0.16;
-    --info-bg: 155 97 235 / 0.16;
-    --shadow-sm: 0 0 0 1px oklch(1 0 0 / 0.08);
-    --shadow-md: 0 0 0 1px oklch(1 0 0 / 0.08), 0 4px 12px oklch(0 0 0 / 0.4);
-    --shadow-lg: 0 0 0 1px oklch(1 0 0 / 0.08), 0 8px 24px oklch(0 0 0 / 0.5);
-    --shadow-xl: 0 0 0 1px oklch(1 0 0 / 0.1), 0 16px 40px oklch(0 0 0 / 0.55);
-    --shadow-2xl: 0 0 0 1px oklch(1 0 0 / 0.1), 0 24px 60px oklch(0 0 0 / 0.6);
-    --card-shadow-rest: 0 0 0 1px oklch(1 0 0 / 0.08);
-    --card-shadow-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
-    --inset-highlight: 255 255 255 / 0.05;
-    --modal-overlay: 0 0 0 / 0.7;
-    --ring-focus: 0 0 0 3px rgb(228 70 58 / 0.3);
-  }
-}
-
-/* `data-theme` must win in BOTH directions: forced light under a dark OS
-   is as much a requirement as forced dark under a light one. The two
-   explicit values are already unconditional rules, so they beat the
-   media query above by source order; this only declares the native
-   `color-scheme` so form controls and scrollbars agree. */
-[data-ds='v2'][data-theme='light'] {
-  color-scheme: light;
-}
-[data-ds='v2'][data-theme='dark'] {
-  color-scheme: dark;
-}
-
-/* ── 2. The surface ladder, named ─────────────────────────────────── */
-/* page → shell → section → card, each one notch brighter; `inset` goes
-   the other way, because a recessed panel inside a card is the system's
-   strongest single move and it only reads as recessed if it is darker.
-   Aliases, not new values — these resolve to what the tiers already are. */
-
-[data-ds='v2'] {
-  --surface-page: rgb(var(--page-bg));
-  --surface-shell: rgb(var(--bg-surface));
-  --surface-section: rgb(var(--muted));
-  --surface-card: rgb(var(--bg-card));
-  --surface-inset: rgb(var(--canvas-placement-bg));
-}
-
-@media (prefers-color-scheme: dark) {
-  [data-ds='v2'][data-theme='auto'] {
-    --surface-section: rgb(27 35 51);
-    --surface-inset: rgb(27 35 51);
-  }
-}
-
-[data-ds='v2'][data-theme='dark'] {
-  --surface-section: rgb(27 35 51);
-  --surface-inset: rgb(27 35 51);
-}
-
-/* ── 3. Bridge to the v2 `--lv-*` tokens ──────────────────────────── */
-/* Lets `@lovett/ui/v2` primitives render inside this scope. Only the
-   tokens v2 components actually read are mapped; the scales (space,
-   radius, type, motion) are appearance-independent and are defined
-   unconditionally in `src/v2/theme.css`, which must still be imported
-   for those. This block covers colour and depth only — the parts that
-   have to agree with whichever theme the subtree is on. */
-
-[data-ds='v2'] {
-  --lv-surface-page: var(--surface-page);
-  --lv-surface-shell: var(--surface-shell);
-  --lv-surface-section: var(--surface-section);
-  --lv-surface-card: var(--surface-card);
-  --lv-surface-inset: var(--surface-inset);
-  --lv-surface-raised: rgb(var(--surface-raised));
-  --lv-surface-overlay: rgb(var(--modal-overlay));
-  --lv-surface-hover: rgb(var(--bg-card-hover));
-  --lv-surface-active: rgb(var(--border-strong));
-  --lv-surface-selected: rgb(var(--accent-muted));
-
-  --lv-text-primary: rgb(var(--foreground));
-  --lv-text-secondary: rgb(var(--text-secondary));
-  --lv-text-tertiary: rgb(var(--text-tertiary));
-  --lv-text-faint: rgb(var(--text-muted));
-  --lv-text-disabled: rgb(var(--text-muted));
-  --lv-text-on-accent: rgb(var(--primary-foreground));
-
-  --lv-hairline: rgb(var(--border));
-  --lv-hairline-strong: rgb(var(--border-strong));
-  --lv-border-field: rgb(var(--border-input));
-
-  --lv-accent: rgb(var(--accent));
-  --lv-accent-hover: rgb(var(--accent-hover));
-  --lv-accent-active: rgb(var(--accent-hover));
-  --lv-accent-text: rgb(var(--accent));
-  --lv-accent-mark: rgb(var(--accent-bright));
-  --lv-accent-soft: rgb(var(--accent-muted));
-  --lv-accent-rule: rgb(var(--accent-glow));
-  --lv-focus: rgb(var(--ring));
-
-  /* The generated palette's semantic reassignment carries straight over:
-     success green, warning gold, destructive amber, info violet. v2's
-     own danger hue (48°) was chosen for the same reason this file moved
-     destructive off red — the brand is red, and two reds on one page
-     cannot be told apart. */
-  --lv-success-text: rgb(var(--success));
-  --lv-success-mark: rgb(var(--success));
-  --lv-success-soft: rgb(var(--success-bg));
-  --lv-success-rule: rgb(var(--success));
-
-  --lv-warning-text: rgb(var(--warning));
-  --lv-warning-mark: rgb(var(--warning));
-  --lv-warning-soft: rgb(var(--warning-bg));
-  --lv-warning-rule: rgb(var(--warning));
-
-  --lv-danger-text: rgb(var(--destructive));
-  --lv-danger-mark: rgb(var(--destructive));
-  --lv-danger-soft: rgb(var(--destructive-bg));
-  --lv-danger-rule: rgb(var(--destructive));
-
-  --lv-info-text: rgb(var(--info));
-  --lv-info-mark: rgb(var(--info));
-  --lv-info-soft: rgb(var(--info-bg));
-  --lv-info-rule: rgb(var(--info));
-
-  --lv-highlight: inset 0 1px 0 0 rgb(var(--inset-highlight));
-  --lv-elev-0: none;
-  --lv-elev-1: var(--shadow-sm);
-  --lv-elev-2: var(--shadow-md);
-  --lv-elev-3: var(--shadow-lg);
-  --lv-elev-4: var(--shadow-xl);
-  --lv-elev-inset: inset 0 1px 2px 0 oklch(0 0 0 / 0.07),
-    inset 0 0 0 1px rgb(var(--border));
-
-  --lv-skeleton-base: rgb(var(--border-strong));
-  --lv-skeleton-sheen: rgb(var(--border));
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
 }

package/src/tokens.css

@@ -49,6 +49,9 @@
  *                                      colored backgrounds — switches,
  *                                      sliders, badges-on-accent)
  *         --muted                     (muted fill for ghost UI)
+ *         --surface-subtle            (lightest structural tint — header bands
+ *                                      and zebra on an already-bordered
+ *                                      surface; 1.04:1, matched across themes)
  *         --header-height             (sticky AppHeader height — referenced
  *                                      by sticky chip bars; same value lives
  *                                      in src/lib/layout.ts for JS callsites)
@@ -92,6 +95,41 @@
   --accent-muted: 207 14 15 / 0.12;
   --accent-subtle: 207 14 15 / 0.06;
   --accent-glow: 207 14 15 / 0.25;
+  /* Ink ON an accent fill. PUBLIC, and theme-independent because --accent is:
+     the brand red does not change between light and dark, so its foreground
+     must not either. Measures 5.64:1 on --accent.
+     Added 2026-08-29 — needs a token ADR (CLAUDE.md §4). It closes a real gap:
+     app code had three different answers for "text on accent" (a `text-white`
+     literal, the INTERNAL --primary-foreground, and a reference to this very
+     name with an inline fallback), and one of them — `rgb(var(--foreground))`
+     — inverted to near-black on red at 3.34:1 in light mode. The public
+     --accent family had every value EXCEPT its foreground, so lens code had
+     nothing correct to reach for. */
+  --accent-foreground: 255 255 255;
+  /* Accent as TEXT on a normal surface — a different problem from
+     --accent-foreground (ink ON an accent fill). PUBLIC, and unlike --accent it
+     IS theme-tuned: the brand red measures 5.64:1 on a light card but only
+     3.05:1 on a dark one, so an accent-coloured LABEL is legible in light and
+     fails AA in dark. The dark value is the lifted red that clears it (4.57:1).
+     Use for selected-state labels, accent links, accent metric values — never
+     as a fill. */
+  --accent-ink: 239 68 68;
+
+  /* SEMANTIC INK — PUBLIC. Same problem as --accent-ink, same shape of answer.
+     `--success` / `--warning` are sized to work as FILLS and as icon strokes;
+     used as TEXT ON THEIR OWN 10-12% TINT they are only legible in one theme.
+     Measured over the card: success reads 5.64:1 dark but 3.33:1 light, and
+     warning 6.46:1 dark but 2.86:1 light — both fail AA for body text in light
+     mode, which is exactly where the generate lens's tip panels and word-count
+     chips live. Dark keeps the base colour; light gets a darkened ink that
+     clears 4.5:1 while still reading green and amber rather than near-black.
+     Text only — never a fill, and never a border. */
+  --success-ink: var(--success);
+  --warning-ink: var(--warning);
+  /* Destructive is the one that fails in BOTH themes as text on its own tint
+     (3.53:1 light, 3.67:1 dark), so unlike the other two the dark value is not
+     the base — it is lifted 18% toward white to clear 5.11:1 / 4.51:1. */
+  --destructive-ink: 242 102 102;
 
   /* ============================================================
      HIERARCHY MAP PALETTE — PUBLIC, theme-INDEPENDENT.
@@ -167,6 +205,17 @@
   --folder-slate: 148 163 184;
   --folder-ink: 203 213 225;
 
+  /* OPAQUE categorical tints — the chip/pill FILL for a --folder-* hue.
+     Pre-composited (hue at 0.12 over --surface-card) so a chip needs no
+     alpha and therefore does not change appearance when the surface
+     under it changes. Only the two hues with consumers are defined;
+     extend per hue as consumers land rather than all nine up front.
+     NOTE: the hue itself is a FILL/GRAPHIC value, not an ink — e.g.
+     --folder-amber on its own tint measures 2.86:1 in light. Chip TEXT
+     is --foreground; the tint + border carry the category. */
+  --folder-amber-tint: 53 43 28;
+  --folder-blue-tint: 31 39 56;
+
   /* ============================================================
      SIDEBAR — INTERNAL (only <Sidebar/> reads these)
      ============================================================ */
@@ -298,8 +347,18 @@
   --shadow-xl: 0 16px 40px rgb(0 0 0 / 0.55);
   --shadow-2xl: 0 24px 60px rgb(0 0 0 / 0.60);
 
-  --ring-focus: 0 0 0 3px rgb(207 14 15 / 0.25);
-  --ring-error: 0 0 0 3px rgb(239 68 68 / 0.25);
+  /* Thin and SOLID, not a soft halo — and this is a legibility fix as much as
+     a look. The old 3px @ 0.25/0.20 composited to rgb(245 207 207) on a light
+     card and rgb(63 24 27) on a dark one: 1.43:1 and 1.11:1 against the surface
+     it sits on, against the 3:1 that WCAG 2.2 SC 2.4.11 (Focus Appearance)
+     asks of a focus indicator. Alpha was measured across the range and NOTHING
+     below fully-opaque clears 3:1 in dark mode, so the ring is solid: 5.64:1
+     light, 3.05:1 dark. 2px keeps the >=2px perimeter the same SC requires
+     while reading crisper than the 3px glow it replaces.
+     Both resolve through the theme-aware tokens, so the light block needs no
+     override — var() resolves at use time. */
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
+  --ring-error: 0 0 0 2px rgb(var(--destructive));
 
   --radius-xs: 6px;
 
@@ -339,6 +398,18 @@
   --surface-card: 27 27 30;
   --surface-inset: 45 45 48;
   --surface-hover: 55 55 59;
+  /* THE LIGHTEST STRUCTURAL TINT — PUBLIC. A header band or zebra stripe on a
+     surface that ALREADY HAS A BORDER, where the fill only has to hint that a
+     row is chrome rather than content.
+     Measured: the border alone is 1.25:1 in dark and 1.32:1 in light, stronger
+     than any fill step in the neutral ramp — so the fill is decoration on top
+     of structure that already reads, and it can go very light indeed.
+     Sized by OKLCH lightness so the two themes are the SAME design: ΔL 0.017
+     dark, 0.014 light (1.045:1 / 1.042:1). That symmetry is the point. Using
+     --muted for this job gave ΔL 0.075 in dark against 0.038 in light — twice
+     the step in one theme, which is why a header that looked right in dark read
+     as a grey slab in light. */
+  --surface-subtle: 31 31 34;
   /* A control you can act on — input, select, option tile, chip-button.
      Sits at CARD level on purpose: in light that is white against the
      frame behind it, which reads "type here"; in dark it is raised above
@@ -389,6 +460,20 @@
 [data-theme="light"], [data-theme="combo"] {
   /* Brand accent — base stays, hover darkens, glow softens */
   --accent-hover: 178 8 9;
+  /* Brand red passes on a light card (5.64:1) — see the :root note. */
+  --accent-ink: var(--accent);
+  /* Solved against the DARKEST tint these inks land on, not the lightest.
+     The lens mixes success at both 10% (tip panels) and 20% (score chips); an
+     ink tuned only to the 10% tint cleared 4.61:1 there and still failed at
+     4.09:1 on the 20% chip. This value clears BOTH — 5.12:1 and 4.54:1 — and
+     at 77% of --success it is still unmistakably green. */
+  --success-ink: 4 116 81;
+  /* Same reasoning as --success-ink: solved against the 20% tint as well as
+     the 10% one (5.03:1 / 4.52:1, up from 2.86:1 / 4.05:1). 72% of --warning,
+     still unmistakably amber. */
+  --warning-ink: 156 86 4;
+  /* 5.28:1 / 4.51:1 on the 10% and 20% tints, up from 3.53:1. */
+  --destructive-ink: 189 33 33;
   --accent-muted: 207 14 15 / 0.10;
   --accent-subtle: 207 14 15 / 0.05;
   --accent-glow: 207 14 15 / 0.20;
@@ -406,9 +491,28 @@
   --card-foreground: 17 17 19;
   --popover-foreground: 17 17 19;
   --muted-foreground: 82 82 91;
-  --text-secondary: 82 82 91;
-  /* --text-tertiary stays from :root */
-  /* Lifted 161->137 — was 2.56:1 on a white card. */
+  /* Byte-identical to --muted-foreground in both themes since they were
+     introduced. Aliased rather than duplicated so the two names cannot
+     drift apart; prefer --muted-foreground in new code. */
+  --text-secondary: var(--muted-foreground);
+  /* Was "stays from :root" — but :root IS the dark theme, so light
+     inherited the dark-tuned 132 132 141, which measures 3.71:1 on a
+     255 card and fails AA for the 13px body text that consumes it.
+     Re-picked by measurement, not by eye: 110 110 119 is the first rung
+     with headroom on every light surface it can land on —
+     5.05:1 on --surface-card/page (255), 4.72:1 on --surface-frame (247),
+     4.52:1 on --surface-inset (242). Keeps the ramp's 286° cool cast.
+     Side effect: it also repairs the ink ramp's shape. The tiers were
+     L 0.442 / 0.616 / 0.633 — a wide gap then a collision, tertiary and
+     muted less than half a surface-step apart. They are now
+     0.442 / 0.541 / 0.633: three evenly-spread rungs. */
+  --text-tertiary: 110 110 119;
+  /* Lifted 161->137 — was 2.56:1 on a white card. Still only 3.47:1 on
+     255, i.e. it clears the 3:1 non-text floor and NOT the 4.5:1 text
+     floor. That is deliberate: --text-muted is the quietest rung and is
+     for NON-TEXT and DISABLED chrome only — quiet icons, chevrons,
+     disabled labels. Real text one tier up (--text-tertiary) or higher.
+     Lifting this to pass 4.5:1 would collapse it into --text-tertiary. */
   --text-muted: 137 137 146;
   --secondary-foreground: 17 17 19;
 
@@ -446,9 +550,6 @@
   --shadow-2xl: 0 24px 60px rgb(0 0 0 / 0.16);
   --shadow-glow: 0 0 20px rgb(207 14 15 / 0.20);
 
-  --ring-focus: 0 0 0 3px rgb(207 14 15 / 0.20);
-  --ring-error: 0 0 0 3px rgb(220 38 38 / 0.18);
-
   /* Match --page-bg (254/254/254). Was 241/245/249 (slate) — that's
    * what was actually painting "the steely background" the owner
    * flagged; --page-bg is the body, but MainLayout's content area
@@ -508,6 +609,8 @@
   --surface-frame: 247 247 249;
   --surface-inset: 242 242 244;
   --surface-hover: 238 238 240;
+  /* 1.042:1 against the card — a band, not a slab. See the :root note. */
+  --surface-subtle: 250 250 252;
   /* A control you can act on — input, select, option tile, chip-button.
      Sits at CARD level on purpose: in light that is white against the
      frame behind it, which reads "type here"; in dark it is raised above
@@ -606,6 +709,9 @@
   --folder-pink: 219 39 119;
   --folder-slate: 71 85 105;
   --folder-ink: 15 23 42;
+  /* Opaque categorical tints — hue at 0.10 over the 255 light card. */
+  --folder-amber-tint: 251 241 230;
+  --folder-blue-tint: 232 237 251;
 }
 
 /* ============================================================

package/src/react-syntax-highlighter-prism.d.ts

@@ -1,34 +0,0 @@
-// Bridges a conflict between two resolvers, neither of which is wrong.
-//
-// `@types/react-syntax-highlighter` declares the DIRECTORY module
-// `react-syntax-highlighter/dist/esm/styles/prism`. Node's ESM resolver refuses
-// a directory import and needs the explicit `.../prism/index.js`. So the
-// specifier TypeScript can type is the one Node rejects, and the specifier Node
-// accepts is the one TypeScript cannot find — see the note in `code-block.tsx`
-// for what that cost.
-//
-// This declares the file path by RE-EXPORTING the real types from the directory
-// module, so the values stay fully typed. The alternative — a `@ts-expect-error`
-// or an `any` import — would silence the error by discarding `oneLight` and
-// `vscDarkPlus`'s types, which is trading a build failure for a typing hole at
-// the one site that already proved it can ship broken.
-//
-// ── AND THE SAME APPLIES TO THE 13 LANGUAGE IMPORTS ─────────────────────────
-// Fixing only the styles directory shipped `0.0.8`, which failed on
-// `.../languages/prism/bash` — a FILE imported without its extension, which
-// Node's ESM resolver also refuses. The directory import was merely the FIRST
-// failure, not the defect. Caught by loading the published artifact under Node
-// rather than trusting the local build, which is the whole of PN-015.
-//
-// Removable when upstream's types declare the file paths directly.
-declare module 'react-syntax-highlighter/dist/esm/styles/prism/index.js' {
-  export * from 'react-syntax-highlighter/dist/esm/styles/prism';
-}
-
-declare module 'react-syntax-highlighter/dist/esm/languages/prism/*.js' {
-  // Upstream types these as `any`-shaped syntax definitions passed straight to
-  // `registerLanguage`; the wildcard keeps that contract rather than inventing
-  // a stricter one this package cannot verify.
-  const language: unknown;
-  export default language;
-}