@particle-academy/react-fancy 6.4.0 → 6.6.0

package/CHANGELOG.md

@@ -11,6 +11,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [6.6.0] - 2026-11-02
+
+### Fixed
+
+- **`CodeBlock` and `CodeView` no longer flash light on a dark site.** They picked one palette with a client-only hook, so server-rendered HTML always carried the light colours until hydration. Now the root carries BOTH palettes as CSS variables (`--fc-<slot>-l` / `--fc-<slot>-d`), every colour reads `var(--fc-<slot>, var(--fc-<slot>-l))`, and CSS switches to dark: the root's `dark:[--fc-<slot>:var(--fc-<slot>-d)]` classes (compiled by your Tailwind from the `@source`d dist, so they follow your `dark` variant, class or media) and a zero-specificity `styles.css` rule under `.dark` / `[data-theme="dark"]` for hosts that do not scan the package. Server and client markup are now identical in both themes. Verified in a real browser: dark under `.dark`, under `[data-theme="dark"]`, with only the Tailwind CSS, and with only `styles.css`; light with no CSS at all.
+- **PHP snippets without `<?php` are highlighted.** `<CodeBlock language="php" code={'use Prism\\Prism\\Facades\\Prism;'} />` rendered as one plain span, because PHP files are inline HTML until their open tag. Both components now tokenize with `fancy-file-commons`' snippet mode: no open tag means PHP, and a `?>` switches to HTML. Code that starts with `<?php` highlights exactly as before. Reported by Prism.
+
+### Changed
+
+- **Token spans read CSS variables instead of carrying hex colours** (`style="color:var(--fc-keyword,var(--fc-keyword-l))"`), and the root's `background-color` / `color` / `border-color` are `var()` references too. **Consumer action:** none for rendering. If a test asserted a literal colour on a `CodeBlock` / `CodeView` element (e.g. `style.backgroundColor === "rgb(24, 24, 27)"` under `.dark`), assert the `--fc-*` variables instead; jsdom does not resolve `var()`. To recolour a slot, set its variables on the component: `style={{ "--fc-keyword-l": "...", "--fc-keyword-d": "..." }}`.
+- **The internal `useIsDark` hook is removed.** It was never exported. Nothing in either component reads `matchMedia` or the document's class any more.
+- **Requires `@particle-academy/fancy-file-commons` `>=0.5`** (still `<2.0`), the first release with `highlightCodeWithVariables`, `themeVariables` and `tokenize`'s `snippet` option. npm installs it for you. **Consumer action:** none. *(Release step, not yet applied: raise the `dependencies` range from `>=0.4` together with the lockfile once 0.5.0 is on the registry.)*
+
+## [6.5.0] - 2026-11-02
+
+### Added
+
+- **`CodeBlock` and `CodeView` highlight ten languages, not just HTML.** TypeScript (`ts`, `tsx`), JavaScript (`js`, `jsx`), JSON (`json`), PHP (`php`), Python (`py`), Go (`go`), Markdown (`md`), shell (`sh`, `bash`, `zsh`, `shell`), dotenv (`env`, `dotenv`) and HTML (`html`, `htm`, `xml`, `xhtml`), case-insensitively, through `@particle-academy/fancy-file-commons`' new `tokenize(code, language)` lookup. The grammars are the ones `fancy-code`'s `CodeEditor` uses, now shared from commons, so a snippet highlights the same way in both. Unknown languages still render as plain text. A new `CodeLanguage` type lists the known ids and still accepts any string.
+- **No new colours.** Both components keep the existing light/dark palette; shell flags and dotenv keys use the `attribute` colour, shell command words `function`, and `$VAR` / `${VAR}` `variable`.
+
+### Changed
+
+- **A `CodeBlock` or `CodeView` whose `language` is now recognised gains colour spans** where it used to render plain text: `bash`, `json`, `env`, `typescript`, `markdown` and the rest above. The text, its escaping and the copy behaviour are unchanged; only `<span style="color:...">` wrappers are added. **Consumer action:** none, unless a test asserted that such a block had no spans. The `Editor`'s Source view is unchanged: it passes `"html"` or `"plaintext"`.
+- **The `@particle-academy/fancy-file-commons` range floor rose from `>=0.2` to `>=0.4`** (still `<2.0`): 0.4 is the first release with these grammars and `tokenize`. npm installs it for you. **Consumer action:** none.
+
+### Security
+
+- **The escaping guarantee is now tested in every language.** The `<script>` / `<img onerror>` payload test runs across all ten grammars plus plain text, in `CodeBlock` with and without line numbers and in `CodeView`; the code always renders as text and nothing executes.
+
 ## [6.4.0] - 2026-11-01
 
 ### Added

package/dist/CodeBlock.types-BFMFB4X2.d.cts

@@ -0,0 +1,53 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Language ids `CodeBlock` and `CodeView` highlight (aliases included). Any
+ * other string is accepted and renders as plain text.
+ */
+type CodeLanguage = "typescript" | "ts" | "tsx" | "javascript" | "js" | "jsx" | "json" | "php" | "python" | "py" | "go" | "markdown" | "md" | "shell" | "sh" | "bash" | "zsh" | "dotenv" | "env" | "html" | "htm" | "xml" | "xhtml" | "plaintext" | (string & {});
+/** Words on the copy button, for translation. */
+interface CodeBlockCopyLabels {
+    /** Idle label (aria-label and tooltip). @default "Copy code" */
+    copy?: string;
+    /** Shown, visibly and to screen readers, after a successful copy. @default "Copied" */
+    copied?: string;
+    /** Shown after a copy that could not be written. @default "Copy failed" */
+    failed?: string;
+}
+/** Reported through `onCopyCode` after every copy attempt. */
+interface CodeBlockCopyEvent {
+    /** Exactly the `code` prop: the raw source, never the highlighted HTML. */
+    text: string;
+    /** Whether the clipboard accepted it. */
+    ok: boolean;
+}
+interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    /** The source to show. Rendered as text; never parsed as HTML. */
+    code: string;
+    /**
+     * Language id or alias, case-insensitive. Highlighted: TypeScript (`ts`,
+     * `tsx`), JavaScript (`js`, `jsx`), JSON (`json`), PHP (`php`), Python
+     * (`py`), Go (`go`), Markdown (`md`), shell (`sh`, `bash`, `zsh`, `shell`),
+     * dotenv (`env`, `dotenv`) and HTML (`html`, `htm`, `xml`, `xhtml`), via
+     * `fancy-file-commons`' `tokenize`. Any other value renders as plain text.
+     * Reflected as `data-language` either way.
+     * @default "plaintext"
+     */
+    language?: CodeLanguage;
+    /** Show a copy button. It copies `code` exactly. @default true */
+    copyable?: boolean;
+    /** Header above the code: a filename, or a short label like "Terminal". */
+    title?: ReactNode;
+    /** Number each line in a gutter that is not part of the code text. @default false */
+    showLineNumbers?: boolean;
+    /** Wrap long lines instead of scrolling horizontally. @default false */
+    wrap?: boolean;
+    /** Words on the copy button. */
+    copyLabels?: CodeBlockCopyLabels;
+    /** Called after every copy attempt, successful or not. */
+    onCopyCode?: (event: CodeBlockCopyEvent) => void;
+    /** Additional classes on the root element. */
+    className?: string;
+}
+
+export type { CodeBlockCopyEvent as C, CodeBlockCopyLabels as a, CodeBlockProps as b, CodeLanguage as c };

package/dist/CodeBlock.types-BFMFB4X2.d.ts

@@ -0,0 +1,53 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Language ids `CodeBlock` and `CodeView` highlight (aliases included). Any
+ * other string is accepted and renders as plain text.
+ */
+type CodeLanguage = "typescript" | "ts" | "tsx" | "javascript" | "js" | "jsx" | "json" | "php" | "python" | "py" | "go" | "markdown" | "md" | "shell" | "sh" | "bash" | "zsh" | "dotenv" | "env" | "html" | "htm" | "xml" | "xhtml" | "plaintext" | (string & {});
+/** Words on the copy button, for translation. */
+interface CodeBlockCopyLabels {
+    /** Idle label (aria-label and tooltip). @default "Copy code" */
+    copy?: string;
+    /** Shown, visibly and to screen readers, after a successful copy. @default "Copied" */
+    copied?: string;
+    /** Shown after a copy that could not be written. @default "Copy failed" */
+    failed?: string;
+}
+/** Reported through `onCopyCode` after every copy attempt. */
+interface CodeBlockCopyEvent {
+    /** Exactly the `code` prop: the raw source, never the highlighted HTML. */
+    text: string;
+    /** Whether the clipboard accepted it. */
+    ok: boolean;
+}
+interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    /** The source to show. Rendered as text; never parsed as HTML. */
+    code: string;
+    /**
+     * Language id or alias, case-insensitive. Highlighted: TypeScript (`ts`,
+     * `tsx`), JavaScript (`js`, `jsx`), JSON (`json`), PHP (`php`), Python
+     * (`py`), Go (`go`), Markdown (`md`), shell (`sh`, `bash`, `zsh`, `shell`),
+     * dotenv (`env`, `dotenv`) and HTML (`html`, `htm`, `xml`, `xhtml`), via
+     * `fancy-file-commons`' `tokenize`. Any other value renders as plain text.
+     * Reflected as `data-language` either way.
+     * @default "plaintext"
+     */
+    language?: CodeLanguage;
+    /** Show a copy button. It copies `code` exactly. @default true */
+    copyable?: boolean;
+    /** Header above the code: a filename, or a short label like "Terminal". */
+    title?: ReactNode;
+    /** Number each line in a gutter that is not part of the code text. @default false */
+    showLineNumbers?: boolean;
+    /** Wrap long lines instead of scrolling horizontally. @default false */
+    wrap?: boolean;
+    /** Words on the copy button. */
+    copyLabels?: CodeBlockCopyLabels;
+    /** Called after every copy attempt, successful or not. */
+    onCopyCode?: (event: CodeBlockCopyEvent) => void;
+    /** Additional classes on the root element. */
+    className?: string;
+}
+
+export type { CodeBlockCopyEvent as C, CodeBlockCopyLabels as a, CodeBlockProps as b, CodeLanguage as c };

package/dist/chunk-2X54BVXG.js

@@ -0,0 +1,58 @@
+import { themeVariables, LIGHT_COLORS, DARK_COLORS, themeColorVar } from '@particle-academy/fancy-file-commons';
+
+// src/components/CodeView/code-palette.ts
+var CODE_PALETTE_KEYS = [
+  "background",
+  "foreground",
+  "gutterBackground",
+  "gutterForeground",
+  "gutterBorder",
+  "cursorColor",
+  "keyword",
+  "string",
+  "comment",
+  "number",
+  "operator",
+  "function",
+  "type",
+  "tag",
+  "attribute",
+  "attributeValue",
+  "punctuation",
+  "variable"
+];
+var CODE_PALETTE_DARK_CLASS = [
+  "dark:[--fc-background:var(--fc-background-d)]",
+  "dark:[--fc-foreground:var(--fc-foreground-d)]",
+  "dark:[--fc-gutterBackground:var(--fc-gutterBackground-d)]",
+  "dark:[--fc-gutterForeground:var(--fc-gutterForeground-d)]",
+  "dark:[--fc-gutterBorder:var(--fc-gutterBorder-d)]",
+  "dark:[--fc-cursorColor:var(--fc-cursorColor-d)]",
+  "dark:[--fc-keyword:var(--fc-keyword-d)]",
+  "dark:[--fc-string:var(--fc-string-d)]",
+  "dark:[--fc-comment:var(--fc-comment-d)]",
+  "dark:[--fc-number:var(--fc-number-d)]",
+  "dark:[--fc-operator:var(--fc-operator-d)]",
+  "dark:[--fc-function:var(--fc-function-d)]",
+  "dark:[--fc-type:var(--fc-type-d)]",
+  "dark:[--fc-tag:var(--fc-tag-d)]",
+  "dark:[--fc-attribute:var(--fc-attribute-d)]",
+  "dark:[--fc-attributeValue:var(--fc-attributeValue-d)]",
+  "dark:[--fc-punctuation:var(--fc-punctuation-d)]",
+  "dark:[--fc-variable:var(--fc-variable-d)]"
+].join(" ");
+var CODE_PALETTE_ATTR = "data-react-fancy-code-palette";
+var ALL_VARIABLES = themeVariables(LIGHT_COLORS, DARK_COLORS);
+var CODE_PALETTE_STYLE = Object.fromEntries(
+  CODE_PALETTE_KEYS.flatMap((key) => [
+    [`--fc-${key}-l`, ALL_VARIABLES[`--fc-${key}-l`]],
+    [`--fc-${key}-d`, ALL_VARIABLES[`--fc-${key}-d`]]
+  ])
+);
+function paletteColor(key) {
+  return themeColorVar(key);
+}
+
+export { CODE_PALETTE_ATTR, CODE_PALETTE_DARK_CLASS, CODE_PALETTE_STYLE, paletteColor };
+//# sourceMappingURL=chunk-2X54BVXG.js.map
+//# sourceMappingURL=chunk-2X54BVXG.js.map

package/dist/chunk-2X54BVXG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CodeView/code-palette.ts"],"names":[],"mappings":";;;AA+BO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,YAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA;AAKO,IAAM,uBAAA,GAA0B;AAAA,EACrC,+CAAA;AAAA,EACA,+CAAA;AAAA,EACA,2DAAA;AAAA,EACA,2DAAA;AAAA,EACA,mDAAA;AAAA,EACA,iDAAA;AAAA,EACA,yCAAA;AAAA,EACA,uCAAA;AAAA,EACA,yCAAA;AAAA,EACA,uCAAA;AAAA,EACA,2CAAA;AAAA,EACA,2CAAA;AAAA,EACA,mCAAA;AAAA,EACA,iCAAA;AAAA,EACA,6CAAA;AAAA,EACA,uDAAA;AAAA,EACA,iDAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG;AAGH,IAAM,iBAAA,GAAoB;AAEjC,IAAM,aAAA,GAAgB,cAAA,CAAe,YAAA,EAAc,WAAW,CAAA;AAGvD,IAAM,qBAAoC,MAAA,CAAO,WAAA;AAAA,EACtD,iBAAA,CAAkB,OAAA,CAAQ,CAAC,GAAA,KAAQ;AAAA,IACjC,CAAC,QAAQ,GAAG,CAAA,EAAA,CAAA,EAAM,cAAc,CAAA,KAAA,EAAQ,GAAG,IAAI,CAAC,CAAA;AAAA,IAChD,CAAC,QAAQ,GAAG,CAAA,EAAA,CAAA,EAAM,cAAc,CAAA,KAAA,EAAQ,GAAG,IAAI,CAAC;AAAA,GACjD;AACH;AAGO,SAAS,aAAa,GAAA,EAA6B;AACxD,EAAA,OAAO,cAAc,GAAG,CAAA;AAC1B","file":"chunk-2X54BVXG.js","sourcesContent":["import type { CSSProperties } from \"react\";\nimport {\n  themeColorVar,\n  themeVariables,\n  LIGHT_COLORS,\n  DARK_COLORS,\n  type ThemeColorKey,\n} from \"@particle-academy/fancy-file-commons\";\n\n// ── Both palettes, switched by CSS ──────────────────────────────────────────\n// CodeBlock and CodeView used to pick ONE palette with a client-only hook, so\n// server-rendered HTML always carried the light colours and a dark site flashed\n// light until hydration. Now the markup is the same in either theme:\n//\n//  1. the root declares `--fc-<key>-l` and `--fc-<key>-d` (both palettes, via\n//     fancy-file-commons' `themeVariables`, which allow-lists every value);\n//  2. everything coloured reads `var(--fc-<key>,var(--fc-<key>-l))`, so it is\n//     light unless `--fc-<key>` is set;\n//  3. `--fc-<key>` is set to the dark value by EITHER\n//     - the `dark:` classes below, compiled by the consumer's Tailwind from\n//       react-fancy's dist, so they follow the consumer's own `dark` variant\n//       (class strategy, `dark-variant.css`, or the default media query), or\n//     - the zero-specificity rule in `styles.css` keyed on\n//       `[data-react-fancy-code-palette]` under `.dark` / `[data-theme=\"dark\"]`,\n//       for a host whose Tailwind does not scan this package.\n//     Together they cover what the old hook followed: `.dark` OR the media\n//     query (the latter through Tailwind's default `dark` variant).\n//\n// The class strings MUST stay literal: Tailwind finds them by scanning dist.\n\n/** The palette slots CodeBlock and CodeView paint. */\nexport const CODE_PALETTE_KEYS = [\n  \"background\",\n  \"foreground\",\n  \"gutterBackground\",\n  \"gutterForeground\",\n  \"gutterBorder\",\n  \"cursorColor\",\n  \"keyword\",\n  \"string\",\n  \"comment\",\n  \"number\",\n  \"operator\",\n  \"function\",\n  \"type\",\n  \"tag\",\n  \"attribute\",\n  \"attributeValue\",\n  \"punctuation\",\n  \"variable\",\n] as const satisfies readonly ThemeColorKey[];\n\nexport type CodePaletteKey = (typeof CODE_PALETTE_KEYS)[number];\n\n/** One `dark:` class per key in `CODE_PALETTE_KEYS`; a test keeps them in step. */\nexport const CODE_PALETTE_DARK_CLASS = [\n  \"dark:[--fc-background:var(--fc-background-d)]\",\n  \"dark:[--fc-foreground:var(--fc-foreground-d)]\",\n  \"dark:[--fc-gutterBackground:var(--fc-gutterBackground-d)]\",\n  \"dark:[--fc-gutterForeground:var(--fc-gutterForeground-d)]\",\n  \"dark:[--fc-gutterBorder:var(--fc-gutterBorder-d)]\",\n  \"dark:[--fc-cursorColor:var(--fc-cursorColor-d)]\",\n  \"dark:[--fc-keyword:var(--fc-keyword-d)]\",\n  \"dark:[--fc-string:var(--fc-string-d)]\",\n  \"dark:[--fc-comment:var(--fc-comment-d)]\",\n  \"dark:[--fc-number:var(--fc-number-d)]\",\n  \"dark:[--fc-operator:var(--fc-operator-d)]\",\n  \"dark:[--fc-function:var(--fc-function-d)]\",\n  \"dark:[--fc-type:var(--fc-type-d)]\",\n  \"dark:[--fc-tag:var(--fc-tag-d)]\",\n  \"dark:[--fc-attribute:var(--fc-attribute-d)]\",\n  \"dark:[--fc-attributeValue:var(--fc-attributeValue-d)]\",\n  \"dark:[--fc-punctuation:var(--fc-punctuation-d)]\",\n  \"dark:[--fc-variable:var(--fc-variable-d)]\",\n].join(\" \");\n\n/** Marks the element that declares the palette; styles.css keys its dark rule on it. */\nexport const CODE_PALETTE_ATTR = \"data-react-fancy-code-palette\";\n\nconst ALL_VARIABLES = themeVariables(LIGHT_COLORS, DARK_COLORS);\n\n/** Both palettes as custom properties, for the root's `style`. */\nexport const CODE_PALETTE_STYLE: CSSProperties = Object.fromEntries(\n  CODE_PALETTE_KEYS.flatMap((key) => [\n    [`--fc-${key}-l`, ALL_VARIABLES[`--fc-${key}-l`]],\n    [`--fc-${key}-d`, ALL_VARIABLES[`--fc-${key}-d`]],\n  ]),\n) as CSSProperties;\n\n/** The CSS value for palette slot `key`: dark under the dark switch, light otherwise. */\nexport function paletteColor(key: CodePaletteKey): string {\n  return themeColorVar(key);\n}\n"]}

package/dist/chunk-5WXY3Q6X.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+var fancyFileCommons = require('@particle-academy/fancy-file-commons');
+
+// src/components/CodeView/code-palette.ts
+var CODE_PALETTE_KEYS = [
+  "background",
+  "foreground",
+  "gutterBackground",
+  "gutterForeground",
+  "gutterBorder",
+  "cursorColor",
+  "keyword",
+  "string",
+  "comment",
+  "number",
+  "operator",
+  "function",
+  "type",
+  "tag",
+  "attribute",
+  "attributeValue",
+  "punctuation",
+  "variable"
+];
+var CODE_PALETTE_DARK_CLASS = [
+  "dark:[--fc-background:var(--fc-background-d)]",
+  "dark:[--fc-foreground:var(--fc-foreground-d)]",
+  "dark:[--fc-gutterBackground:var(--fc-gutterBackground-d)]",
+  "dark:[--fc-gutterForeground:var(--fc-gutterForeground-d)]",
+  "dark:[--fc-gutterBorder:var(--fc-gutterBorder-d)]",
+  "dark:[--fc-cursorColor:var(--fc-cursorColor-d)]",
+  "dark:[--fc-keyword:var(--fc-keyword-d)]",
+  "dark:[--fc-string:var(--fc-string-d)]",
+  "dark:[--fc-comment:var(--fc-comment-d)]",
+  "dark:[--fc-number:var(--fc-number-d)]",
+  "dark:[--fc-operator:var(--fc-operator-d)]",
+  "dark:[--fc-function:var(--fc-function-d)]",
+  "dark:[--fc-type:var(--fc-type-d)]",
+  "dark:[--fc-tag:var(--fc-tag-d)]",
+  "dark:[--fc-attribute:var(--fc-attribute-d)]",
+  "dark:[--fc-attributeValue:var(--fc-attributeValue-d)]",
+  "dark:[--fc-punctuation:var(--fc-punctuation-d)]",
+  "dark:[--fc-variable:var(--fc-variable-d)]"
+].join(" ");
+var CODE_PALETTE_ATTR = "data-react-fancy-code-palette";
+var ALL_VARIABLES = fancyFileCommons.themeVariables(fancyFileCommons.LIGHT_COLORS, fancyFileCommons.DARK_COLORS);
+var CODE_PALETTE_STYLE = Object.fromEntries(
+  CODE_PALETTE_KEYS.flatMap((key) => [
+    [`--fc-${key}-l`, ALL_VARIABLES[`--fc-${key}-l`]],
+    [`--fc-${key}-d`, ALL_VARIABLES[`--fc-${key}-d`]]
+  ])
+);
+function paletteColor(key) {
+  return fancyFileCommons.themeColorVar(key);
+}
+
+exports.CODE_PALETTE_ATTR = CODE_PALETTE_ATTR;
+exports.CODE_PALETTE_DARK_CLASS = CODE_PALETTE_DARK_CLASS;
+exports.CODE_PALETTE_STYLE = CODE_PALETTE_STYLE;
+exports.paletteColor = paletteColor;
+//# sourceMappingURL=chunk-5WXY3Q6X.cjs.map
+//# sourceMappingURL=chunk-5WXY3Q6X.cjs.map

package/dist/chunk-5WXY3Q6X.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CodeView/code-palette.ts"],"names":["themeVariables","LIGHT_COLORS","DARK_COLORS","themeColorVar"],"mappings":";;;;;AA+BO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,YAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA;AAKO,IAAM,uBAAA,GAA0B;AAAA,EACrC,+CAAA;AAAA,EACA,+CAAA;AAAA,EACA,2DAAA;AAAA,EACA,2DAAA;AAAA,EACA,mDAAA;AAAA,EACA,iDAAA;AAAA,EACA,yCAAA;AAAA,EACA,uCAAA;AAAA,EACA,yCAAA;AAAA,EACA,uCAAA;AAAA,EACA,2CAAA;AAAA,EACA,2CAAA;AAAA,EACA,mCAAA;AAAA,EACA,iCAAA;AAAA,EACA,6CAAA;AAAA,EACA,uDAAA;AAAA,EACA,iDAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG;AAGH,IAAM,iBAAA,GAAoB;AAEjC,IAAM,aAAA,GAAgBA,+BAAA,CAAeC,6BAAA,EAAcC,4BAAW,CAAA;AAGvD,IAAM,qBAAoC,MAAA,CAAO,WAAA;AAAA,EACtD,iBAAA,CAAkB,OAAA,CAAQ,CAAC,GAAA,KAAQ;AAAA,IACjC,CAAC,QAAQ,GAAG,CAAA,EAAA,CAAA,EAAM,cAAc,CAAA,KAAA,EAAQ,GAAG,IAAI,CAAC,CAAA;AAAA,IAChD,CAAC,QAAQ,GAAG,CAAA,EAAA,CAAA,EAAM,cAAc,CAAA,KAAA,EAAQ,GAAG,IAAI,CAAC;AAAA,GACjD;AACH;AAGO,SAAS,aAAa,GAAA,EAA6B;AACxD,EAAA,OAAOC,+BAAc,GAAG,CAAA;AAC1B","file":"chunk-5WXY3Q6X.cjs","sourcesContent":["import type { CSSProperties } from \"react\";\nimport {\n  themeColorVar,\n  themeVariables,\n  LIGHT_COLORS,\n  DARK_COLORS,\n  type ThemeColorKey,\n} from \"@particle-academy/fancy-file-commons\";\n\n// ── Both palettes, switched by CSS ──────────────────────────────────────────\n// CodeBlock and CodeView used to pick ONE palette with a client-only hook, so\n// server-rendered HTML always carried the light colours and a dark site flashed\n// light until hydration. Now the markup is the same in either theme:\n//\n//  1. the root declares `--fc-<key>-l` and `--fc-<key>-d` (both palettes, via\n//     fancy-file-commons' `themeVariables`, which allow-lists every value);\n//  2. everything coloured reads `var(--fc-<key>,var(--fc-<key>-l))`, so it is\n//     light unless `--fc-<key>` is set;\n//  3. `--fc-<key>` is set to the dark value by EITHER\n//     - the `dark:` classes below, compiled by the consumer's Tailwind from\n//       react-fancy's dist, so they follow the consumer's own `dark` variant\n//       (class strategy, `dark-variant.css`, or the default media query), or\n//     - the zero-specificity rule in `styles.css` keyed on\n//       `[data-react-fancy-code-palette]` under `.dark` / `[data-theme=\"dark\"]`,\n//       for a host whose Tailwind does not scan this package.\n//     Together they cover what the old hook followed: `.dark` OR the media\n//     query (the latter through Tailwind's default `dark` variant).\n//\n// The class strings MUST stay literal: Tailwind finds them by scanning dist.\n\n/** The palette slots CodeBlock and CodeView paint. */\nexport const CODE_PALETTE_KEYS = [\n  \"background\",\n  \"foreground\",\n  \"gutterBackground\",\n  \"gutterForeground\",\n  \"gutterBorder\",\n  \"cursorColor\",\n  \"keyword\",\n  \"string\",\n  \"comment\",\n  \"number\",\n  \"operator\",\n  \"function\",\n  \"type\",\n  \"tag\",\n  \"attribute\",\n  \"attributeValue\",\n  \"punctuation\",\n  \"variable\",\n] as const satisfies readonly ThemeColorKey[];\n\nexport type CodePaletteKey = (typeof CODE_PALETTE_KEYS)[number];\n\n/** One `dark:` class per key in `CODE_PALETTE_KEYS`; a test keeps them in step. */\nexport const CODE_PALETTE_DARK_CLASS = [\n  \"dark:[--fc-background:var(--fc-background-d)]\",\n  \"dark:[--fc-foreground:var(--fc-foreground-d)]\",\n  \"dark:[--fc-gutterBackground:var(--fc-gutterBackground-d)]\",\n  \"dark:[--fc-gutterForeground:var(--fc-gutterForeground-d)]\",\n  \"dark:[--fc-gutterBorder:var(--fc-gutterBorder-d)]\",\n  \"dark:[--fc-cursorColor:var(--fc-cursorColor-d)]\",\n  \"dark:[--fc-keyword:var(--fc-keyword-d)]\",\n  \"dark:[--fc-string:var(--fc-string-d)]\",\n  \"dark:[--fc-comment:var(--fc-comment-d)]\",\n  \"dark:[--fc-number:var(--fc-number-d)]\",\n  \"dark:[--fc-operator:var(--fc-operator-d)]\",\n  \"dark:[--fc-function:var(--fc-function-d)]\",\n  \"dark:[--fc-type:var(--fc-type-d)]\",\n  \"dark:[--fc-tag:var(--fc-tag-d)]\",\n  \"dark:[--fc-attribute:var(--fc-attribute-d)]\",\n  \"dark:[--fc-attributeValue:var(--fc-attributeValue-d)]\",\n  \"dark:[--fc-punctuation:var(--fc-punctuation-d)]\",\n  \"dark:[--fc-variable:var(--fc-variable-d)]\",\n].join(\" \");\n\n/** Marks the element that declares the palette; styles.css keys its dark rule on it. */\nexport const CODE_PALETTE_ATTR = \"data-react-fancy-code-palette\";\n\nconst ALL_VARIABLES = themeVariables(LIGHT_COLORS, DARK_COLORS);\n\n/** Both palettes as custom properties, for the root's `style`. */\nexport const CODE_PALETTE_STYLE: CSSProperties = Object.fromEntries(\n  CODE_PALETTE_KEYS.flatMap((key) => [\n    [`--fc-${key}-l`, ALL_VARIABLES[`--fc-${key}-l`]],\n    [`--fc-${key}-d`, ALL_VARIABLES[`--fc-${key}-d`]],\n  ]),\n) as CSSProperties;\n\n/** The CSS value for palette slot `key`: dark under the dark switch, light otherwise. */\nexport function paletteColor(key: CodePaletteKey): string {\n  return themeColorVar(key);\n}\n"]}

package/dist/{chunk-AHZIT3CM.js → chunk-MI57NAKF.js}

@@ -1,18 +1,17 @@
 import { runWriter, defaultClipboardWriter } from './chunk-J2BWXCES.js';
 import { visuallyHidden } from './chunk-I3LAFKJU.js';
-import { useIsDark } from './chunk-6BB32POL.js';
+import { paletteColor, CODE_PALETTE_STYLE, CODE_PALETTE_DARK_CLASS, CODE_PALETTE_ATTR } from './chunk-2X54BVXG.js';
 import { Button } from './chunk-4GPH7HOR.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { forwardRef, useMemo, useState, useRef, useEffect, useCallback } from 'react';
-import { highlightCode, DARK_COLORS, LIGHT_COLORS, tokenizeHtml } from '@particle-academy/fancy-file-commons';
+import { highlightCodeWithVariables, tokenize } from '@particle-academy/fancy-file-commons';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var FEEDBACK_MS = 2e3;
-var HTML_ALIASES = /* @__PURE__ */ new Set(["html", "htm", "xml", "xhtml"]);
 function tokensFor(code, language) {
-  return HTML_ALIASES.has(language.toLowerCase()) ? tokenizeHtml(code) : [];
+  return tokenize(code, language, { snippet: true }) ?? [];
 }
-function highlightLines(code, tokens, colors) {
+function highlightLines(code, tokens) {
   const out = [];
   let start = 0;
   let ti = 0;
@@ -25,7 +24,7 @@ function highlightLines(code, tokens, colors) {
       const e = Math.min(tokens[j].end, end) - start;
       if (e > s) clipped.push({ type: tokens[j].type, start: s, end: e });
     }
-    out.push(highlightCode(line, clipped, colors));
+    out.push(highlightCodeWithVariables(line, clipped));
     start = end + 1;
   }
   return out;
@@ -44,19 +43,17 @@ var CodeBlock = forwardRef(function CodeBlock2({
   style,
   ...rest
 }, ref) {
-  const isDark = useIsDark();
-  const colors = isDark ? DARK_COLORS : LIGHT_COLORS;
   const tokens = useMemo(() => tokensFor(code, language), [code, language]);
   const html = useMemo(
-    () => showLineNumbers ? null : highlightCode(code, tokens, colors),
-    [code, tokens, colors, showLineNumbers]
+    () => showLineNumbers ? null : highlightCodeWithVariables(code, tokens),
+    [code, tokens, showLineNumbers]
   );
   const lines = useMemo(() => {
     if (!showLineNumbers) return null;
-    const all = highlightLines(code, tokens, colors);
+    const all = highlightLines(code, tokens);
     if (all.length > 1 && code.endsWith("\n")) all.pop();
     return all;
-  }, [code, tokens, colors, showLineNumbers]);
+  }, [code, tokens, showLineNumbers]);
   const [copyState, setCopyState] = useState("idle");
   const timer = useRef(void 0);
   useEffect(() => () => clearTimeout(timer.current), []);
@@ -93,7 +90,7 @@ var CodeBlock = forwardRef(function CodeBlock2({
       className: cn(
         floating && "opacity-80 group-hover:opacity-100 focus-visible:opacity-100"
       ),
-      style: floating ? { backgroundColor: colors.background } : void 0,
+      style: floating ? { backgroundColor: paletteColor("background") } : void 0,
       children: copyState !== "idle" ? label : hasHeader ? "Copy" : void 0
     }
   ) : null;
@@ -105,14 +102,19 @@ var CodeBlock = forwardRef(function CodeBlock2({
       "data-react-fancy-code-block": "",
       "data-language": language,
       "data-wrap": wrap ? "true" : "false",
+      ...{ [CODE_PALETTE_ATTR]: "" },
       className: cn(
         "group relative overflow-hidden rounded-lg border",
+        CODE_PALETTE_DARK_CLASS,
         className
       ),
       style: {
-        backgroundColor: colors.background,
-        color: colors.foreground,
-        borderColor: colors.gutterBorder,
+        // Both palettes; the dark one applies under the consumer's `dark`
+        // variant or a `.dark` / `[data-theme="dark"]` ancestor (code-palette).
+        ...CODE_PALETTE_STYLE,
+        backgroundColor: paletteColor("background"),
+        color: paletteColor("foreground"),
+        borderColor: paletteColor("gutterBorder"),
         // `relative` inline too: the floating button and the live region are
         // absolute, and must not escape a host whose Tailwind lacks the class.
         position: "relative",
@@ -126,9 +128,9 @@ var CodeBlock = forwardRef(function CodeBlock2({
             "data-react-fancy-code-block-header": "",
             className: "flex items-center justify-between gap-2 border-b py-1 pl-3 pr-1 text-xs",
             style: {
-              backgroundColor: colors.gutterBackground,
-              color: colors.gutterForeground,
-              borderColor: colors.gutterBorder
+              backgroundColor: paletteColor("gutterBackground"),
+              color: paletteColor("gutterForeground"),
+              borderColor: paletteColor("gutterBorder")
             },
             children: [
               /* @__PURE__ */ jsx("span", { "data-react-fancy-code-block-title": "", className: "min-w-0 truncate font-mono", children: title }),
@@ -164,7 +166,7 @@ var CodeBlock = forwardRef(function CodeBlock2({
                         width: gutterWidth,
                         marginRight: "1.5ch",
                         textAlign: "right",
-                        color: colors.gutterForeground,
+                        color: paletteColor("gutterForeground"),
                         userSelect: "none"
                       },
                       children: i + 1
@@ -200,5 +202,5 @@ var CodeBlock = forwardRef(function CodeBlock2({
 CodeBlock.displayName = "CodeBlock";
 
 export { CodeBlock };
-//# sourceMappingURL=chunk-AHZIT3CM.js.map
-//# sourceMappingURL=chunk-AHZIT3CM.js.map
+//# sourceMappingURL=chunk-MI57NAKF.js.map
+//# sourceMappingURL=chunk-MI57NAKF.js.map

package/dist/chunk-MI57NAKF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CodeBlock/CodeBlock.tsx"],"names":["CodeBlock"],"mappings":"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","file":"chunk-MI57NAKF.js","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  highlightCodeWithVariables,\n  tokenize,\n  type Token,\n} from \"@particle-academy/fancy-file-commons\";\nimport { cn } from \"../../utils/cn\";\nimport { visuallyHidden } from \"../../utils/visually-hidden\";\nimport { Button } from \"../Button/Button\";\nimport { defaultClipboardWriter, runWriter } from \"../ContentRenderer/copy\";\nimport {\n  CODE_PALETTE_ATTR,\n  CODE_PALETTE_DARK_CLASS,\n  CODE_PALETTE_STYLE,\n  paletteColor,\n} from \"../CodeView/code-palette\";\nimport type { CodeBlockProps } from \"./CodeBlock.types\";\n\n/** How long \"Copied\" / \"Copy failed\" stays before the button resets. */\nconst FEEDBACK_MS = 2000;\n\n/**\n * Tokens for any language fancy-file-commons can highlight (aliases included,\n * case-insensitive); none for anything else, which renders as plain text.\n * `snippet: true` because a code block shows documentation snippets: PHP\n * without an opening `<?php` is read as PHP, not inline HTML. `tokenize`\n * returns sorted, non-overlapping, in-bounds tokens, which `highlightLines`\n * relies on.\n */\nfunction tokensFor(code: string, language: string): Token[] {\n  return tokenize(code, language, { snippet: true }) ?? [];\n}\n\n/**\n * Highlight one line at a time, clipping each token to the line it falls on, so\n * a token that spans lines (an HTML comment) keeps its colour on every line.\n * `highlightCodeWithVariables` escapes every slice it emits, highlighted or not,\n * and writes no colour value: spans read the palette variables on the root.\n */\nfunction highlightLines(code: string, tokens: Token[]): string[] {\n  const out: string[] = [];\n  let start = 0;\n  let ti = 0;\n  for (const line of code.split(\"\\n\")) {\n    const end = start + line.length;\n    while (ti < tokens.length && tokens[ti].end <= start) ti++;\n    const clipped: Token[] = [];\n    for (let j = ti; j < tokens.length && tokens[j].start < end; j++) {\n      const s = Math.max(tokens[j].start, start) - start;\n      const e = Math.min(tokens[j].end, end) - start;\n      if (e > s) clipped.push({ type: tokens[j].type, start: s, end: e });\n    }\n    out.push(highlightCodeWithVariables(line, clipped));\n    start = end + 1;\n  }\n  return out;\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\n// Matches CodeView's text metrics so the two sit together.\nconst TEXT_METRICS = \"m-0 p-3 font-mono text-xs leading-relaxed\";\n\n/**\n * A display-only code block: `<pre><code>`, syntax-highlighted where a grammar\n * exists, with an optional copy button. It contains no textarea, input, select\n * or contenteditable element, so it is safe on pages that must not accept\n * input. For an editable or selectable source surface, use `CodeView`.\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language = \"plaintext\",\n    copyable = true,\n    title,\n    showLineNumbers = false,\n    wrap = false,\n    copyLabels,\n    onCopyCode,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const tokens = useMemo(() => tokensFor(code, language), [code, language]);\n  const html = useMemo(\n    () => (showLineNumbers ? null : highlightCodeWithVariables(code, tokens)),\n    [code, tokens, showLineNumbers],\n  );\n  const lines = useMemo(() => {\n    if (!showLineNumbers) return null;\n    const all = highlightLines(code, tokens);\n    // A trailing newline ends the last line; it does not start a new one.\n    if (all.length > 1 && code.endsWith(\"\\n\")) all.pop();\n    return all;\n  }, [code, tokens, showLineNumbers]);\n\n  const [copyState, setCopyState] = useState<CopyState>(\"idle\");\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  // Latest props at click time, without re-creating the handler.\n  const latest = useRef({ code, onCopyCode });\n  latest.current = { code, onCopyCode };\n\n  const onCopyClick = useCallback(async () => {\n    const { code: text, onCopyCode: report } = latest.current;\n    // Raw `code`, never the highlighted HTML. `defaultClipboardWriter` throws\n    // when `navigator.clipboard` is absent (SSR, insecure context), and\n    // `runWriter` turns a throw, rejection or hang into `false`.\n    const ok = await runWriter(defaultClipboardWriter, { kind: \"code\", text, html: \"\" });\n    setCopyState(ok ? \"copied\" : \"failed\");\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setCopyState(\"idle\"), FEEDBACK_MS);\n    report?.({ text, ok });\n  }, []);\n\n  const labels = {\n    copy: copyLabels?.copy ?? \"Copy code\",\n    copied: copyLabels?.copied ?? \"Copied\",\n    failed: copyLabels?.failed ?? \"Copy failed\",\n  };\n  const label = copyState === \"copied\" ? labels.copied : copyState === \"failed\" ? labels.failed : labels.copy;\n  const hasHeader = title != null && title !== false;\n  const floating = copyable && !hasHeader;\n\n  const copyButton = copyable ? (\n    <Button\n      type=\"button\"\n      size=\"xs\"\n      variant=\"ghost\"\n      icon={copyState === \"copied\" ? \"check\" : copyState === \"failed\" ? \"x\" : \"copy\"}\n      aria-label={label}\n      title={label}\n      data-react-fancy-code-block-copy=\"\"\n      data-copy-state={copyState}\n      onClick={onCopyClick}\n      className={cn(\n        floating && \"opacity-80 group-hover:opacity-100 focus-visible:opacity-100\",\n      )}\n      style={floating ? { backgroundColor: paletteColor(\"background\") } : undefined}\n    >\n      {/* Visible feedback; idle is icon-only when floating over the code. */}\n      {copyState !== \"idle\" ? label : hasHeader ? \"Copy\" : undefined}\n    </Button>\n  ) : null;\n\n  const gutterWidth = lines ? `${String(lines.length).length}ch` : undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-react-fancy-code-block=\"\"\n      data-language={language}\n      data-wrap={wrap ? \"true\" : \"false\"}\n      {...{ [CODE_PALETTE_ATTR]: \"\" }}\n      className={cn(\n        \"group relative overflow-hidden rounded-lg border\",\n        CODE_PALETTE_DARK_CLASS,\n        className,\n      )}\n      style={{\n        // Both palettes; the dark one applies under the consumer's `dark`\n        // variant or a `.dark` / `[data-theme=\"dark\"]` ancestor (code-palette).\n        ...CODE_PALETTE_STYLE,\n        backgroundColor: paletteColor(\"background\"),\n        color: paletteColor(\"foreground\"),\n        borderColor: paletteColor(\"gutterBorder\"),\n        // `relative` inline too: the floating button and the live region are\n        // absolute, and must not escape a host whose Tailwind lacks the class.\n        position: \"relative\",\n        ...style,\n      }}\n      {...rest}\n    >\n      {hasHeader && (\n        <div\n          data-react-fancy-code-block-header=\"\"\n          className=\"flex items-center justify-between gap-2 border-b py-1 pl-3 pr-1 text-xs\"\n          style={{\n            backgroundColor: paletteColor(\"gutterBackground\"),\n            color: paletteColor(\"gutterForeground\"),\n            borderColor: paletteColor(\"gutterBorder\"),\n          }}\n        >\n          <span data-react-fancy-code-block-title=\"\" className=\"min-w-0 truncate font-mono\">\n            {title}\n          </span>\n          {copyButton}\n        </div>\n      )}\n\n      <pre\n        data-react-fancy-code-block-pre=\"\"\n        className={cn(TEXT_METRICS, \"border-none\", wrap ? \"overflow-x-hidden\" : \"overflow-x-auto\", floating && \"pr-12\")}\n        style={{\n          whiteSpace: wrap ? \"pre-wrap\" : \"pre\",\n          overflowWrap: wrap ? \"break-word\" : \"normal\",\n          backgroundColor: \"transparent\",\n          color: \"inherit\",\n        }}\n      >\n        {lines ? (\n          <code\n            data-react-fancy-code-block-code=\"\"\n            style={{ display: wrap ? \"block\" : \"inline-block\", minWidth: \"100%\" }}\n          >\n            {lines.map((lineHtml, i) => (\n              <span key={i} data-react-fancy-code-block-line={i + 1} style={{ display: \"flex\" }}>\n                <span\n                  data-react-fancy-code-block-line-number=\"\"\n                  aria-hidden=\"true\"\n                  className=\"select-none\"\n                  style={{\n                    flex: \"none\",\n                    width: gutterWidth,\n                    marginRight: \"1.5ch\",\n                    textAlign: \"right\",\n                    color: paletteColor(\"gutterForeground\"),\n                    userSelect: \"none\",\n                  }}\n                >\n                  {i + 1}\n                </span>\n                <span\n                  data-react-fancy-code-block-line-content=\"\"\n                  style={{ flex: \"1 1 auto\", minWidth: 0 }}\n                  dangerouslySetInnerHTML={{ __html: lineHtml }}\n                />\n              </span>\n            ))}\n          </code>\n        ) : (\n          <code data-react-fancy-code-block-code=\"\" dangerouslySetInnerHTML={{ __html: html ?? \"\" }} />\n        )}\n      </pre>\n\n      {floating && (\n        <div\n          data-react-fancy-code-block-actions=\"\"\n          className=\"absolute right-2 top-2\"\n          style={{ position: \"absolute\", right: \"0.5rem\", top: \"0.5rem\" }}\n        >\n          {copyButton}\n        </div>\n      )}\n\n      {copyable && (\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\" style={visuallyHidden}>\n          {copyState === \"idle\" ? \"\" : label}\n        </span>\n      )}\n    </div>\n  );\n});\n\nCodeBlock.displayName = \"CodeBlock\";\n"]}

package/dist/{chunk-VAVS6WRZ.cjs → chunk-PM5I5ZHK.cjs}

@@ -2,7 +2,7 @@
 
 var chunk7ZCNZUZK_cjs = require('./chunk-7ZCNZUZK.cjs');
 var chunk2C64OVOZ_cjs = require('./chunk-2C64OVOZ.cjs');
-var chunkHZUKPYR3_cjs = require('./chunk-HZUKPYR3.cjs');
+var chunk5WXY3Q6X_cjs = require('./chunk-5WXY3Q6X.cjs');
 var chunkNZHVDWOM_cjs = require('./chunk-NZHVDWOM.cjs');
 var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
@@ -10,11 +10,10 @@ var fancyFileCommons = require('@particle-academy/fancy-file-commons');
 var jsxRuntime = require('react/jsx-runtime');
 
 var FEEDBACK_MS = 2e3;
-var HTML_ALIASES = /* @__PURE__ */ new Set(["html", "htm", "xml", "xhtml"]);
 function tokensFor(code, language) {
-  return HTML_ALIASES.has(language.toLowerCase()) ? fancyFileCommons.tokenizeHtml(code) : [];
+  return fancyFileCommons.tokenize(code, language, { snippet: true }) ?? [];
 }
-function highlightLines(code, tokens, colors) {
+function highlightLines(code, tokens) {
   const out = [];
   let start = 0;
   let ti = 0;
@@ -27,7 +26,7 @@ function highlightLines(code, tokens, colors) {
       const e = Math.min(tokens[j].end, end) - start;
       if (e > s) clipped.push({ type: tokens[j].type, start: s, end: e });
     }
-    out.push(fancyFileCommons.highlightCode(line, clipped, colors));
+    out.push(fancyFileCommons.highlightCodeWithVariables(line, clipped));
     start = end + 1;
   }
   return out;
@@ -46,19 +45,17 @@ var CodeBlock = react.forwardRef(function CodeBlock2({
   style,
   ...rest
 }, ref) {
-  const isDark = chunkHZUKPYR3_cjs.useIsDark();
-  const colors = isDark ? fancyFileCommons.DARK_COLORS : fancyFileCommons.LIGHT_COLORS;
   const tokens = react.useMemo(() => tokensFor(code, language), [code, language]);
   const html = react.useMemo(
-    () => showLineNumbers ? null : fancyFileCommons.highlightCode(code, tokens, colors),
-    [code, tokens, colors, showLineNumbers]
+    () => showLineNumbers ? null : fancyFileCommons.highlightCodeWithVariables(code, tokens),
+    [code, tokens, showLineNumbers]
   );
   const lines = react.useMemo(() => {
     if (!showLineNumbers) return null;
-    const all = highlightLines(code, tokens, colors);
+    const all = highlightLines(code, tokens);
     if (all.length > 1 && code.endsWith("\n")) all.pop();
     return all;
-  }, [code, tokens, colors, showLineNumbers]);
+  }, [code, tokens, showLineNumbers]);
   const [copyState, setCopyState] = react.useState("idle");
   const timer = react.useRef(void 0);
   react.useEffect(() => () => clearTimeout(timer.current), []);
@@ -95,7 +92,7 @@ var CodeBlock = react.forwardRef(function CodeBlock2({
       className: chunkZU5Q77OT_cjs.cn(
         floating && "opacity-80 group-hover:opacity-100 focus-visible:opacity-100"
       ),
-      style: floating ? { backgroundColor: colors.background } : void 0,
+      style: floating ? { backgroundColor: chunk5WXY3Q6X_cjs.paletteColor("background") } : void 0,
       children: copyState !== "idle" ? label : hasHeader ? "Copy" : void 0
     }
   ) : null;
@@ -107,14 +104,19 @@ var CodeBlock = react.forwardRef(function CodeBlock2({
       "data-react-fancy-code-block": "",
       "data-language": language,
       "data-wrap": wrap ? "true" : "false",
+      ...{ [chunk5WXY3Q6X_cjs.CODE_PALETTE_ATTR]: "" },
       className: chunkZU5Q77OT_cjs.cn(
         "group relative overflow-hidden rounded-lg border",
+        chunk5WXY3Q6X_cjs.CODE_PALETTE_DARK_CLASS,
         className
       ),
       style: {
-        backgroundColor: colors.background,
-        color: colors.foreground,
-        borderColor: colors.gutterBorder,
+        // Both palettes; the dark one applies under the consumer's `dark`
+        // variant or a `.dark` / `[data-theme="dark"]` ancestor (code-palette).
+        ...chunk5WXY3Q6X_cjs.CODE_PALETTE_STYLE,
+        backgroundColor: chunk5WXY3Q6X_cjs.paletteColor("background"),
+        color: chunk5WXY3Q6X_cjs.paletteColor("foreground"),
+        borderColor: chunk5WXY3Q6X_cjs.paletteColor("gutterBorder"),
         // `relative` inline too: the floating button and the live region are
         // absolute, and must not escape a host whose Tailwind lacks the class.
         position: "relative",
@@ -128,9 +130,9 @@ var CodeBlock = react.forwardRef(function CodeBlock2({
             "data-react-fancy-code-block-header": "",
             className: "flex items-center justify-between gap-2 border-b py-1 pl-3 pr-1 text-xs",
             style: {
-              backgroundColor: colors.gutterBackground,
-              color: colors.gutterForeground,
-              borderColor: colors.gutterBorder
+              backgroundColor: chunk5WXY3Q6X_cjs.paletteColor("gutterBackground"),
+              color: chunk5WXY3Q6X_cjs.paletteColor("gutterForeground"),
+              borderColor: chunk5WXY3Q6X_cjs.paletteColor("gutterBorder")
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-code-block-title": "", className: "min-w-0 truncate font-mono", children: title }),
@@ -166,7 +168,7 @@ var CodeBlock = react.forwardRef(function CodeBlock2({
                         width: gutterWidth,
                         marginRight: "1.5ch",
                         textAlign: "right",
-                        color: colors.gutterForeground,
+                        color: chunk5WXY3Q6X_cjs.paletteColor("gutterForeground"),
                         userSelect: "none"
                       },
                       children: i + 1
@@ -202,5 +204,5 @@ var CodeBlock = react.forwardRef(function CodeBlock2({
 CodeBlock.displayName = "CodeBlock";
 
 exports.CodeBlock = CodeBlock;
-//# sourceMappingURL=chunk-VAVS6WRZ.cjs.map
-//# sourceMappingURL=chunk-VAVS6WRZ.cjs.map
+//# sourceMappingURL=chunk-PM5I5ZHK.cjs.map
+//# sourceMappingURL=chunk-PM5I5ZHK.cjs.map

package/dist/chunk-PM5I5ZHK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CodeBlock/CodeBlock.tsx"],"names":["tokenize","highlightCodeWithVariables","forwardRef","CodeBlock","useMemo","useState","useRef","useEffect","useCallback","runWriter","defaultClipboardWriter","jsx","Button","cn","paletteColor","jsxs","CODE_PALETTE_ATTR","CODE_PALETTE_DARK_CLASS","CODE_PALETTE_STYLE","visuallyHidden"],"mappings":"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","file":"chunk-PM5I5ZHK.cjs","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  highlightCodeWithVariables,\n  tokenize,\n  type Token,\n} from \"@particle-academy/fancy-file-commons\";\nimport { cn } from \"../../utils/cn\";\nimport { visuallyHidden } from \"../../utils/visually-hidden\";\nimport { Button } from \"../Button/Button\";\nimport { defaultClipboardWriter, runWriter } from \"../ContentRenderer/copy\";\nimport {\n  CODE_PALETTE_ATTR,\n  CODE_PALETTE_DARK_CLASS,\n  CODE_PALETTE_STYLE,\n  paletteColor,\n} from \"../CodeView/code-palette\";\nimport type { CodeBlockProps } from \"./CodeBlock.types\";\n\n/** How long \"Copied\" / \"Copy failed\" stays before the button resets. */\nconst FEEDBACK_MS = 2000;\n\n/**\n * Tokens for any language fancy-file-commons can highlight (aliases included,\n * case-insensitive); none for anything else, which renders as plain text.\n * `snippet: true` because a code block shows documentation snippets: PHP\n * without an opening `<?php` is read as PHP, not inline HTML. `tokenize`\n * returns sorted, non-overlapping, in-bounds tokens, which `highlightLines`\n * relies on.\n */\nfunction tokensFor(code: string, language: string): Token[] {\n  return tokenize(code, language, { snippet: true }) ?? [];\n}\n\n/**\n * Highlight one line at a time, clipping each token to the line it falls on, so\n * a token that spans lines (an HTML comment) keeps its colour on every line.\n * `highlightCodeWithVariables` escapes every slice it emits, highlighted or not,\n * and writes no colour value: spans read the palette variables on the root.\n */\nfunction highlightLines(code: string, tokens: Token[]): string[] {\n  const out: string[] = [];\n  let start = 0;\n  let ti = 0;\n  for (const line of code.split(\"\\n\")) {\n    const end = start + line.length;\n    while (ti < tokens.length && tokens[ti].end <= start) ti++;\n    const clipped: Token[] = [];\n    for (let j = ti; j < tokens.length && tokens[j].start < end; j++) {\n      const s = Math.max(tokens[j].start, start) - start;\n      const e = Math.min(tokens[j].end, end) - start;\n      if (e > s) clipped.push({ type: tokens[j].type, start: s, end: e });\n    }\n    out.push(highlightCodeWithVariables(line, clipped));\n    start = end + 1;\n  }\n  return out;\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\n// Matches CodeView's text metrics so the two sit together.\nconst TEXT_METRICS = \"m-0 p-3 font-mono text-xs leading-relaxed\";\n\n/**\n * A display-only code block: `<pre><code>`, syntax-highlighted where a grammar\n * exists, with an optional copy button. It contains no textarea, input, select\n * or contenteditable element, so it is safe on pages that must not accept\n * input. For an editable or selectable source surface, use `CodeView`.\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language = \"plaintext\",\n    copyable = true,\n    title,\n    showLineNumbers = false,\n    wrap = false,\n    copyLabels,\n    onCopyCode,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const tokens = useMemo(() => tokensFor(code, language), [code, language]);\n  const html = useMemo(\n    () => (showLineNumbers ? null : highlightCodeWithVariables(code, tokens)),\n    [code, tokens, showLineNumbers],\n  );\n  const lines = useMemo(() => {\n    if (!showLineNumbers) return null;\n    const all = highlightLines(code, tokens);\n    // A trailing newline ends the last line; it does not start a new one.\n    if (all.length > 1 && code.endsWith(\"\\n\")) all.pop();\n    return all;\n  }, [code, tokens, showLineNumbers]);\n\n  const [copyState, setCopyState] = useState<CopyState>(\"idle\");\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  // Latest props at click time, without re-creating the handler.\n  const latest = useRef({ code, onCopyCode });\n  latest.current = { code, onCopyCode };\n\n  const onCopyClick = useCallback(async () => {\n    const { code: text, onCopyCode: report } = latest.current;\n    // Raw `code`, never the highlighted HTML. `defaultClipboardWriter` throws\n    // when `navigator.clipboard` is absent (SSR, insecure context), and\n    // `runWriter` turns a throw, rejection or hang into `false`.\n    const ok = await runWriter(defaultClipboardWriter, { kind: \"code\", text, html: \"\" });\n    setCopyState(ok ? \"copied\" : \"failed\");\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setCopyState(\"idle\"), FEEDBACK_MS);\n    report?.({ text, ok });\n  }, []);\n\n  const labels = {\n    copy: copyLabels?.copy ?? \"Copy code\",\n    copied: copyLabels?.copied ?? \"Copied\",\n    failed: copyLabels?.failed ?? \"Copy failed\",\n  };\n  const label = copyState === \"copied\" ? labels.copied : copyState === \"failed\" ? labels.failed : labels.copy;\n  const hasHeader = title != null && title !== false;\n  const floating = copyable && !hasHeader;\n\n  const copyButton = copyable ? (\n    <Button\n      type=\"button\"\n      size=\"xs\"\n      variant=\"ghost\"\n      icon={copyState === \"copied\" ? \"check\" : copyState === \"failed\" ? \"x\" : \"copy\"}\n      aria-label={label}\n      title={label}\n      data-react-fancy-code-block-copy=\"\"\n      data-copy-state={copyState}\n      onClick={onCopyClick}\n      className={cn(\n        floating && \"opacity-80 group-hover:opacity-100 focus-visible:opacity-100\",\n      )}\n      style={floating ? { backgroundColor: paletteColor(\"background\") } : undefined}\n    >\n      {/* Visible feedback; idle is icon-only when floating over the code. */}\n      {copyState !== \"idle\" ? label : hasHeader ? \"Copy\" : undefined}\n    </Button>\n  ) : null;\n\n  const gutterWidth = lines ? `${String(lines.length).length}ch` : undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-react-fancy-code-block=\"\"\n      data-language={language}\n      data-wrap={wrap ? \"true\" : \"false\"}\n      {...{ [CODE_PALETTE_ATTR]: \"\" }}\n      className={cn(\n        \"group relative overflow-hidden rounded-lg border\",\n        CODE_PALETTE_DARK_CLASS,\n        className,\n      )}\n      style={{\n        // Both palettes; the dark one applies under the consumer's `dark`\n        // variant or a `.dark` / `[data-theme=\"dark\"]` ancestor (code-palette).\n        ...CODE_PALETTE_STYLE,\n        backgroundColor: paletteColor(\"background\"),\n        color: paletteColor(\"foreground\"),\n        borderColor: paletteColor(\"gutterBorder\"),\n        // `relative` inline too: the floating button and the live region are\n        // absolute, and must not escape a host whose Tailwind lacks the class.\n        position: \"relative\",\n        ...style,\n      }}\n      {...rest}\n    >\n      {hasHeader && (\n        <div\n          data-react-fancy-code-block-header=\"\"\n          className=\"flex items-center justify-between gap-2 border-b py-1 pl-3 pr-1 text-xs\"\n          style={{\n            backgroundColor: paletteColor(\"gutterBackground\"),\n            color: paletteColor(\"gutterForeground\"),\n            borderColor: paletteColor(\"gutterBorder\"),\n          }}\n        >\n          <span data-react-fancy-code-block-title=\"\" className=\"min-w-0 truncate font-mono\">\n            {title}\n          </span>\n          {copyButton}\n        </div>\n      )}\n\n      <pre\n        data-react-fancy-code-block-pre=\"\"\n        className={cn(TEXT_METRICS, \"border-none\", wrap ? \"overflow-x-hidden\" : \"overflow-x-auto\", floating && \"pr-12\")}\n        style={{\n          whiteSpace: wrap ? \"pre-wrap\" : \"pre\",\n          overflowWrap: wrap ? \"break-word\" : \"normal\",\n          backgroundColor: \"transparent\",\n          color: \"inherit\",\n        }}\n      >\n        {lines ? (\n          <code\n            data-react-fancy-code-block-code=\"\"\n            style={{ display: wrap ? \"block\" : \"inline-block\", minWidth: \"100%\" }}\n          >\n            {lines.map((lineHtml, i) => (\n              <span key={i} data-react-fancy-code-block-line={i + 1} style={{ display: \"flex\" }}>\n                <span\n                  data-react-fancy-code-block-line-number=\"\"\n                  aria-hidden=\"true\"\n                  className=\"select-none\"\n                  style={{\n                    flex: \"none\",\n                    width: gutterWidth,\n                    marginRight: \"1.5ch\",\n                    textAlign: \"right\",\n                    color: paletteColor(\"gutterForeground\"),\n                    userSelect: \"none\",\n                  }}\n                >\n                  {i + 1}\n                </span>\n                <span\n                  data-react-fancy-code-block-line-content=\"\"\n                  style={{ flex: \"1 1 auto\", minWidth: 0 }}\n                  dangerouslySetInnerHTML={{ __html: lineHtml }}\n                />\n              </span>\n            ))}\n          </code>\n        ) : (\n          <code data-react-fancy-code-block-code=\"\" dangerouslySetInnerHTML={{ __html: html ?? \"\" }} />\n        )}\n      </pre>\n\n      {floating && (\n        <div\n          data-react-fancy-code-block-actions=\"\"\n          className=\"absolute right-2 top-2\"\n          style={{ position: \"absolute\", right: \"0.5rem\", top: \"0.5rem\" }}\n        >\n          {copyButton}\n        </div>\n      )}\n\n      {copyable && (\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\" style={visuallyHidden}>\n          {copyState === \"idle\" ? \"\" : label}\n        </span>\n      )}\n    </div>\n  );\n});\n\nCodeBlock.displayName = \"CodeBlock\";\n"]}