@particle-academy/react-fancy 6.4.0 → 6.6.0

package/dist/code-block.d.ts

@@ -1,48 +1,6 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
-
-/** 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. Only `"html"` (and its aliases `"htm"`, `"xml"`, `"xhtml"`)
-     * is highlighted today: it is the one grammar `fancy-file-commons` ships.
-     * Every other value, known or not, renders as plain text. Reflected as
-     * `data-language` either way.
-     * @default "plaintext"
-     */
-    language?: "html" | "xml" | "plaintext" | (string & {});
-    /** 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;
-}
+import { b as CodeBlockProps } from './CodeBlock.types-BFMFB4X2.js';
+export { C as CodeBlockCopyEvent, a as CodeBlockCopyLabels, c as CodeLanguage } from './CodeBlock.types-BFMFB4X2.js';
 
 /**
  * A display-only code block: `<pre><code>`, syntax-highlighted where a grammar
@@ -52,4 +10,4 @@ interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"
  */
 declare const CodeBlock: react.ForwardRefExoticComponent<CodeBlockProps & react.RefAttributes<HTMLDivElement>>;
 
-export { CodeBlock, type CodeBlockCopyEvent, type CodeBlockCopyLabels, type CodeBlockProps };
+export { CodeBlock, CodeBlockProps };

package/dist/code-block.js

@@ -1,7 +1,7 @@
-export { CodeBlock } from './chunk-AHZIT3CM.js';
+export { CodeBlock } from './chunk-MI57NAKF.js';
 import './chunk-J2BWXCES.js';
 import './chunk-I3LAFKJU.js';
-import './chunk-6BB32POL.js';
+import './chunk-2X54BVXG.js';
 import './chunk-4GPH7HOR.js';
 import './chunk-45BBNJQD.js';
 import './chunk-J3A4Z2P7.js';

package/dist/code-view.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-var chunkNIAG6OF6_cjs = require('./chunk-NIAG6OF6.cjs');
-require('./chunk-HZUKPYR3.cjs');
+var chunkYQZB5Z7C_cjs = require('./chunk-YQZB5Z7C.cjs');
+require('./chunk-5WXY3Q6X.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "CodeView", {
   enumerable: true,
-  get: function () { return chunkNIAG6OF6_cjs.CodeView; }
+  get: function () { return chunkYQZB5Z7C_cjs.CodeView; }
 });
 //# sourceMappingURL=code-view.cjs.map
 //# sourceMappingURL=code-view.cjs.map

package/dist/code-view.d.cts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { c as CodeLanguage } from './CodeBlock.types-BFMFB4X2.cjs';
 
 interface CodeViewProps {
     /** Source text to display / edit. Controlled. */
@@ -10,13 +11,14 @@ interface CodeViewProps {
      */
     onChange?: (value: string) => void;
     /**
-     * Language id for syntax highlighting. Only `"html"` is highlighted (the one
-     * grammar shipped by `fancy-file-commons`); everything else — including
-     * `"markdown"` and `"plaintext"` — renders un-highlighted. For richer language
-     * highlighting use `@particle-academy/fancy-code`'s `CodeEditor`.
+     * Language id or alias for syntax highlighting, case-insensitive — the same
+     * set as `CodeBlock`: TypeScript, JavaScript, JSON, PHP, Python, Go,
+     * Markdown, shell, dotenv and HTML/XML, via `fancy-file-commons`'
+     * `tokenize`. Anything else, including `"plaintext"`, renders un-highlighted.
+     * For a full editor use `@particle-academy/fancy-code`'s `CodeEditor`.
      * @default "plaintext"
      */
-    language?: "html" | "markdown" | "plaintext" | (string & {});
+    language?: CodeLanguage;
     /** Read-only mode (no editing even if `onChange` is passed). @default false */
     readOnly?: boolean;
     /** Placeholder shown when empty. */
@@ -34,7 +36,8 @@ interface CodeViewProps {
  * primitives in `@particle-academy/fancy-file-commons` — a highlight overlay
  * with a transparent, auto-growing textarea on top; the container scrolls both
  * together. Fills its parent's height (`h-full`) and grows with content down to
- * `minHeight`. Only HTML is highlighted; other languages render as plain text.
+ * `minHeight`. Highlights every language fancy-file-commons ships (see
+ * `CodeViewProps.language`); anything else renders as plain text.
  */
 declare function CodeView({ value, onChange, language, readOnly, placeholder, minHeight, maxHeight, className, }: CodeViewProps): react.JSX.Element;
 declare namespace CodeView {

package/dist/code-view.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { c as CodeLanguage } from './CodeBlock.types-BFMFB4X2.js';
 
 interface CodeViewProps {
     /** Source text to display / edit. Controlled. */
@@ -10,13 +11,14 @@ interface CodeViewProps {
      */
     onChange?: (value: string) => void;
     /**
-     * Language id for syntax highlighting. Only `"html"` is highlighted (the one
-     * grammar shipped by `fancy-file-commons`); everything else — including
-     * `"markdown"` and `"plaintext"` — renders un-highlighted. For richer language
-     * highlighting use `@particle-academy/fancy-code`'s `CodeEditor`.
+     * Language id or alias for syntax highlighting, case-insensitive — the same
+     * set as `CodeBlock`: TypeScript, JavaScript, JSON, PHP, Python, Go,
+     * Markdown, shell, dotenv and HTML/XML, via `fancy-file-commons`'
+     * `tokenize`. Anything else, including `"plaintext"`, renders un-highlighted.
+     * For a full editor use `@particle-academy/fancy-code`'s `CodeEditor`.
      * @default "plaintext"
      */
-    language?: "html" | "markdown" | "plaintext" | (string & {});
+    language?: CodeLanguage;
     /** Read-only mode (no editing even if `onChange` is passed). @default false */
     readOnly?: boolean;
     /** Placeholder shown when empty. */
@@ -34,7 +36,8 @@ interface CodeViewProps {
  * primitives in `@particle-academy/fancy-file-commons` — a highlight overlay
  * with a transparent, auto-growing textarea on top; the container scrolls both
  * together. Fills its parent's height (`h-full`) and grows with content down to
- * `minHeight`. Only HTML is highlighted; other languages render as plain text.
+ * `minHeight`. Highlights every language fancy-file-commons ships (see
+ * `CodeViewProps.language`); anything else renders as plain text.
  */
 declare function CodeView({ value, onChange, language, readOnly, placeholder, minHeight, maxHeight, className, }: CodeViewProps): react.JSX.Element;
 declare namespace CodeView {

package/dist/code-view.js

@@ -1,5 +1,5 @@
-export { CodeView } from './chunk-P24A2BIR.js';
-import './chunk-6BB32POL.js';
+export { CodeView } from './chunk-TFX4LL7V.js';
+import './chunk-2X54BVXG.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=code-view.js.map
 //# sourceMappingURL=code-view.js.map

package/dist/editor.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkVQLPAYQF_cjs = require('./chunk-VQLPAYQF.cjs');
+var chunkTHMFLRDW_cjs = require('./chunk-THMFLRDW.cjs');
 require('./chunk-A2JUTNE6.cjs');
 require('./chunk-T6YELZPJ.cjs');
 require('./chunk-VQJ5LJJH.cjs');
@@ -11,8 +11,8 @@ require('./chunk-AIA5UNQ5.cjs');
 require('./chunk-MPCZUZ4O.cjs');
 require('./chunk-7ZCNZUZK.cjs');
 require('./chunk-2C64OVOZ.cjs');
-require('./chunk-NIAG6OF6.cjs');
-require('./chunk-HZUKPYR3.cjs');
+require('./chunk-YQZB5Z7C.cjs');
+require('./chunk-5WXY3Q6X.cjs');
 require('./chunk-J2DI6RMR.cjs');
 require('./chunk-TI7D4QDM.cjs');
 require('./chunk-L3V3BYVS.cjs');
@@ -28,11 +28,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Editor", {
   enumerable: true,
-  get: function () { return chunkVQLPAYQF_cjs.Editor; }
+  get: function () { return chunkTHMFLRDW_cjs.Editor; }
 });
 Object.defineProperty(exports, "useEditor", {
   enumerable: true,
-  get: function () { return chunkVQLPAYQF_cjs.useEditor; }
+  get: function () { return chunkTHMFLRDW_cjs.useEditor; }
 });
 //# sourceMappingURL=editor.cjs.map
 //# sourceMappingURL=editor.cjs.map

package/dist/editor.js

@@ -1,4 +1,4 @@
-export { Editor, useEditor } from './chunk-UMDOSJUH.js';
+export { Editor, useEditor } from './chunk-VSTUGU7W.js';
 import './chunk-2BXMMVQS.js';
 import './chunk-CPY7NHXM.js';
 import './chunk-RP43ZFZP.js';
@@ -9,8 +9,8 @@ import './chunk-TJ66S5K6.js';
 import './chunk-QF2FODTG.js';
 import './chunk-J2BWXCES.js';
 import './chunk-I3LAFKJU.js';
-import './chunk-P24A2BIR.js';
-import './chunk-6BB32POL.js';
+import './chunk-TFX4LL7V.js';
+import './chunk-2X54BVXG.js';
 import './chunk-MQ6VGG62.js';
 import './chunk-RBCMKPBX.js';
 import './chunk-NRXK42LO.js';

package/dist/index.cjs

@@ -85,7 +85,7 @@ var chunkFQSSVOVQ_cjs = require('./chunk-FQSSVOVQ.cjs');
 var chunkZ7SQMQTF_cjs = require('./chunk-Z7SQMQTF.cjs');
 var chunkAJPYGRLA_cjs = require('./chunk-AJPYGRLA.cjs');
 var chunkXZOBGKZL_cjs = require('./chunk-XZOBGKZL.cjs');
-var chunkVQLPAYQF_cjs = require('./chunk-VQLPAYQF.cjs');
+var chunkTHMFLRDW_cjs = require('./chunk-THMFLRDW.cjs');
 var chunkA2JUTNE6_cjs = require('./chunk-A2JUTNE6.cjs');
 var chunkT6YELZPJ_cjs = require('./chunk-T6YELZPJ.cjs');
 var chunkVQJ5LJJH_cjs = require('./chunk-VQJ5LJJH.cjs');
@@ -102,11 +102,11 @@ require('./chunk-AIA5UNQ5.cjs');
 var chunk2G6TIX5Q_cjs = require('./chunk-2G6TIX5Q.cjs');
 require('./chunk-S3TRSECD.cjs');
 var chunkMPCZUZ4O_cjs = require('./chunk-MPCZUZ4O.cjs');
-var chunkVAVS6WRZ_cjs = require('./chunk-VAVS6WRZ.cjs');
+var chunkPM5I5ZHK_cjs = require('./chunk-PM5I5ZHK.cjs');
 require('./chunk-7ZCNZUZK.cjs');
 require('./chunk-2C64OVOZ.cjs');
-var chunkNIAG6OF6_cjs = require('./chunk-NIAG6OF6.cjs');
-require('./chunk-HZUKPYR3.cjs');
+var chunkYQZB5Z7C_cjs = require('./chunk-YQZB5Z7C.cjs');
+require('./chunk-5WXY3Q6X.cjs');
 require('./chunk-XFBLUPKF.cjs');
 var chunkGKLETY7D_cjs = require('./chunk-GKLETY7D.cjs');
 var chunkBYO5RUDE_cjs = require('./chunk-BYO5RUDE.cjs');
@@ -713,11 +713,11 @@ Object.defineProperty(exports, "useDropdown", {
 });
 Object.defineProperty(exports, "Editor", {
   enumerable: true,
-  get: function () { return chunkVQLPAYQF_cjs.Editor; }
+  get: function () { return chunkTHMFLRDW_cjs.Editor; }
 });
 Object.defineProperty(exports, "useEditor", {
   enumerable: true,
-  get: function () { return chunkVQLPAYQF_cjs.useEditor; }
+  get: function () { return chunkTHMFLRDW_cjs.useEditor; }
 });
 Object.defineProperty(exports, "THEME_STORAGE_KEY", {
   enumerable: true,
@@ -841,11 +841,11 @@ Object.defineProperty(exports, "renderMarkdown", {
 });
 Object.defineProperty(exports, "CodeBlock", {
   enumerable: true,
-  get: function () { return chunkVAVS6WRZ_cjs.CodeBlock; }
+  get: function () { return chunkPM5I5ZHK_cjs.CodeBlock; }
 });
 Object.defineProperty(exports, "CodeView", {
   enumerable: true,
-  get: function () { return chunkNIAG6OF6_cjs.CodeView; }
+  get: function () { return chunkYQZB5Z7C_cjs.CodeView; }
 });
 Object.defineProperty(exports, "ColorPicker", {
   enumerable: true,

package/dist/index.d.cts

@@ -79,7 +79,8 @@ export { I as InlinePasteEditor, a as InlinePasteEditorHandle, P as PastedFilesI
 export { Chart, ChartAreaProps, ChartBarData, ChartBarProps, ChartCommonProps, ChartDonutData, ChartDonutProps, ChartHorizontalBarProps, ChartLineProps, ChartPieData, ChartPieProps, ChartSeries, ChartSparklineProps, ChartStackedBarProps } from './chart.cjs';
 export { Editor, EditorAction, EditorContentProps, EditorContextValue, EditorFullScreenToggleProps, EditorProps, EditorSourceToggleProps, EditorToolbarProps, useEditor } from './editor.cjs';
 export { CodeView, CodeViewProps } from './code-view.cjs';
-export { CodeBlock, CodeBlockCopyEvent, CodeBlockCopyLabels, CodeBlockProps } from './code-block.cjs';
+export { CodeBlock } from './code-block.cjs';
+export { C as CodeBlockCopyEvent, a as CodeBlockCopyLabels, b as CodeBlockProps, c as CodeLanguage } from './CodeBlock.types-BFMFB4X2.cjs';
 export { ContentRenderer } from './content-renderer.cjs';
 export { C as ContentClipboardPayload, a as ContentClipboardWriter, b as ContentCopyEvent, c as ContentCopyKind, d as ContentRendererProps, R as RenderExtension, e as RenderExtensionProps, r as registerExtension, f as registerExtensions } from './ContentRenderer.types-RO_l7_6N.cjs';
 export { Menu, MenuContextValue, MenuGroupProps, MenuItemProps, MenuOrientation, MenuProps, MenuSubmenuProps, useMenu } from './menu.cjs';

package/dist/index.d.ts

@@ -79,7 +79,8 @@ export { I as InlinePasteEditor, a as InlinePasteEditorHandle, P as PastedFilesI
 export { Chart, ChartAreaProps, ChartBarData, ChartBarProps, ChartCommonProps, ChartDonutData, ChartDonutProps, ChartHorizontalBarProps, ChartLineProps, ChartPieData, ChartPieProps, ChartSeries, ChartSparklineProps, ChartStackedBarProps } from './chart.js';
 export { Editor, EditorAction, EditorContentProps, EditorContextValue, EditorFullScreenToggleProps, EditorProps, EditorSourceToggleProps, EditorToolbarProps, useEditor } from './editor.js';
 export { CodeView, CodeViewProps } from './code-view.js';
-export { CodeBlock, CodeBlockCopyEvent, CodeBlockCopyLabels, CodeBlockProps } from './code-block.js';
+export { CodeBlock } from './code-block.js';
+export { C as CodeBlockCopyEvent, a as CodeBlockCopyLabels, b as CodeBlockProps, c as CodeLanguage } from './CodeBlock.types-BFMFB4X2.js';
 export { ContentRenderer } from './content-renderer.js';
 export { C as ContentClipboardPayload, a as ContentClipboardWriter, b as ContentCopyEvent, c as ContentCopyKind, d as ContentRendererProps, R as RenderExtension, e as RenderExtensionProps, r as registerExtension, f as registerExtensions } from './ContentRenderer.types-RO_l7_6N.js';
 export { Menu, MenuContextValue, MenuGroupProps, MenuItemProps, MenuOrientation, MenuProps, MenuSubmenuProps, useMenu } from './menu.js';

package/dist/index.js

@@ -83,7 +83,7 @@ export { Container } from './chunk-VKMPVFQK.js';
 export { ContextMenu, useContextMenu } from './chunk-NSJBVV7R.js';
 export { Drawer, useDrawer } from './chunk-PXZRYL5I.js';
 export { Dropdown, useDropdown } from './chunk-BXPLERIJ.js';
-export { Editor, useEditor } from './chunk-UMDOSJUH.js';
+export { Editor, useEditor } from './chunk-VSTUGU7W.js';
 export { THEME_STORAGE_KEY, getThemePreference, initTheme, resolveTheme, setThemePreference, subscribeTheme, useId, useNodeRegistry, useTheme } from './chunk-2BXMMVQS.js';
 export { usePanZoom } from './chunk-CPY7NHXM.js';
 export { FullScreenContext, FullScreenProvider, FullScreenToggle, useFullScreenContext } from './chunk-RP43ZFZP.js';
@@ -100,11 +100,11 @@ import './chunk-TJ66S5K6.js';
 export { ChatMessage, ChatThread } from './chunk-UUEAFG6V.js';
 import './chunk-AUTW5O4W.js';
 export { ContentRenderer, registerExtension, registerExtensions, renderMarkdown } from './chunk-QF2FODTG.js';
-export { CodeBlock } from './chunk-AHZIT3CM.js';
+export { CodeBlock } from './chunk-MI57NAKF.js';
 import './chunk-J2BWXCES.js';
 import './chunk-I3LAFKJU.js';
-export { CodeView } from './chunk-P24A2BIR.js';
-import './chunk-6BB32POL.js';
+export { CodeView } from './chunk-TFX4LL7V.js';
+import './chunk-2X54BVXG.js';
 import './chunk-J324MF75.js';
 export { ColorPicker } from './chunk-SVSQXKFL.js';
 export { Autocomplete } from './chunk-RWU2MFUL.js';

package/dist/styles.css

@@ -35,6 +35,26 @@
     --color-secondary-900: var(--color-zinc-100);
     --color-secondary-950: var(--color-zinc-50);
   }
+  :where(.dark [data-react-fancy-code-palette], [data-theme=dark] [data-react-fancy-code-palette], .dark[data-react-fancy-code-palette], [data-theme=dark][data-react-fancy-code-palette]) {
+    --fc-background: var(--fc-background-d);
+    --fc-foreground: var(--fc-foreground-d);
+    --fc-gutterBackground: var(--fc-gutterBackground-d);
+    --fc-gutterForeground: var(--fc-gutterForeground-d);
+    --fc-gutterBorder: var(--fc-gutterBorder-d);
+    --fc-cursorColor: var(--fc-cursorColor-d);
+    --fc-keyword: var(--fc-keyword-d);
+    --fc-string: var(--fc-string-d);
+    --fc-comment: var(--fc-comment-d);
+    --fc-number: var(--fc-number-d);
+    --fc-operator: var(--fc-operator-d);
+    --fc-function: var(--fc-function-d);
+    --fc-type: var(--fc-type-d);
+    --fc-tag: var(--fc-tag-d);
+    --fc-attribute: var(--fc-attribute-d);
+    --fc-attributeValue: var(--fc-attributeValue-d);
+    --fc-punctuation: var(--fc-punctuation-d);
+    --fc-variable: var(--fc-variable-d);
+  }
   [data-react-fancy-input] input,
   [data-react-fancy-textarea],
   [data-react-fancy-select],

package/dist/styles.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* @particle-academy/react-fancy — base styles + animations */\n\n/* ─── Brand colour scheme ────────────────────────────────────────────────────\n   Three token families every Fancy package can rely on, so a component never\n   has to invent a palette or hardcode a literal:\n\n     brand         one accent — the thing a consumer rebrands first\n     primary-*     the accent as a full 50→950 scale\n     secondary-*   the NEUTRAL scale for surfaces, borders and body text\n\n   Why this exists: packages were already writing `bg-brand`, `text-primary-600`\n   and `border-secondary-200` against tokens nothing defined. Tailwind generated\n   no such utility, the class silently resolved to nothing, and the component\n   rendered unstyled — correct markup, no colour, no error. Defining them here\n   turns those classes into a contract instead of a hope.\n\n   SECONDARY INVERTS WITH THE THEME. `text-secondary-900` means \"strongest\n   foreground\", not \"nearly black\" — so it stays readable on a dark surface.\n   That distinction is the whole point: mixing a literal background (`bg-white`)\n   with a semantic foreground (`text-secondary-900`) is what produced\n   white-on-white in a dark host.\n\n   OVERRIDE IT. Redefine any of these in your own `@theme` (or on `:root`) and\n   yours wins — nothing here is `!important`, and the utilities read the variable\n   rather than baking a value in:\n\n     @theme { --color-brand: var(--color-emerald-600); }\n   ──────────────────────────────────────────────────────────────────────────── */\n@theme {\n  /* THE HOST'S OWN COLOUR. `color=\"brand\"` on any component resolves to these.\n     Three variables, not one: a generated hover assumes \"same hue, darker\",\n     and a brand palette need not work that way — a navy whose hover is gold\n     cannot be derived from navy. So the host states the hover instead of the\n     kit guessing it.\n\n       :root {\n         --color-brand: #003057;\n         --color-brand-contrast: #ffffff;   text/icon ON the brand colour\n         --color-brand-hover: #D4A017;      need not be a shade of brand\n       }\n\n     PER MODE, SWAP THE PAIR. `--color-brand` and `--color-brand-contrast` only\n     mean anything together. Repointing one alone fails QUIETLY -- the button\n     still renders, it is just unreadable (a pale surface still carrying white\n     text; or, on ghost/outline where brand is the LABEL, dark text on a dark\n     background):\n\n       .dark { --color-brand: #BFD7EA; --color-brand-contrast: #003057; }\n\n     `--color-brand-hover` usually needs no per-mode value: an accent chosen to\n     stand against the brand tends to stand against it in both modes.\n\n     NOTE: this comment does not survive the build -- `@theme` is emitted\n     without it. The consumer-facing copy is in README.md, and that is the one\n     to keep correct.\n\n     Defaults keep the kit's violet so nothing changes for a host that never\n     sets them. Soft/outline/ghost variants derive their tints with opacity\n     modifiers (`bg-brand/10`), which is what lets three variables cover four\n     variants without asking for a whole scale. */\n  --color-brand: var(--color-violet-600);\n  --color-brand-contrast: var(--color-white);\n  --color-brand-hover: var(--color-violet-700);\n\n  --color-primary-50: var(--color-violet-50);\n  --color-primary-100: var(--color-violet-100);\n  --color-primary-200: var(--color-violet-200);\n  --color-primary-300: var(--color-violet-300);\n  --color-primary-400: var(--color-violet-400);\n  --color-primary-500: var(--color-violet-500);\n  --color-primary-600: var(--color-violet-600);\n  --color-primary-700: var(--color-violet-700);\n  --color-primary-800: var(--color-violet-800);\n  --color-primary-900: var(--color-violet-900);\n  --color-primary-950: var(--color-violet-950);\n\n  /* Light-theme defaults: 50 = faintest surface, 900/950 = strongest text. */\n  --color-secondary-50: var(--color-zinc-50);\n  --color-secondary-100: var(--color-zinc-100);\n  --color-secondary-200: var(--color-zinc-200);\n  --color-secondary-300: var(--color-zinc-300);\n  --color-secondary-400: var(--color-zinc-400);\n  --color-secondary-500: var(--color-zinc-500);\n  --color-secondary-600: var(--color-zinc-600);\n  --color-secondary-700: var(--color-zinc-700);\n  --color-secondary-800: var(--color-zinc-800);\n  --color-secondary-900: var(--color-zinc-900);\n  --color-secondary-950: var(--color-zinc-950);\n}\n\n/* ─── Full screen in the top layer — neutralise the UA popover box ───────────\n   An overlay-mode FullScreen is promoted with popover=\"manual\" so ancestor\n   transforms / filters cannot trap it, and the UA sheet then styles it as a\n   popover: padding .25em, a solid border, Canvas / CanvasText colours,\n   overflow:auto. Any author rule outranks the UA origin, so this zero-\n   specificity rule in the base layer puts those back to what a plain box has,\n   while every utility a consumer passes through className still wins. Inline\n   styles could not do that: they would beat the consumer's own classes. The\n   box geometry (inset, width, height, margin) is set inline by the hook. */\n@layer base {\n  :where([data-fullscreen-layer=\"top\"]) {\n    padding: 0;\n    border: 0 solid;\n    background-color: transparent;\n    color: inherit;\n    overflow: visible;\n  }\n}\n\n@layer base {\n\n/* ─── Progress (circular) — named diameters ──────────────────────────────────\n   These ship as real CSS rather than Tailwind classes on the element, because a\n   consumer who has not @sourced this package gets no generated utilities and\n   the ring would render with NO SIZE at all. They were inline styles before,\n   which always worked but could not be overridden by className (issue #17).\n\n   Being inside @layer base, a className utility now beats them — which is the\n   whole point, and the reason #20 had to land first. */\n[data-react-fancy-progress][data-size=\"sm\"] { width: 2rem; height: 2rem; }\n[data-react-fancy-progress][data-size=\"md\"] { width: 3rem; height: 3rem; }\n[data-react-fancy-progress][data-size=\"lg\"] { width: 4rem; height: 4rem; }\n\n\n\n/* Dark: the neutral scale flips, so \"900\" still means strongest foreground and\n   \"50\" still means faintest surface. Wrapped in :where() for zero specificity,\n   matching the rest of this file — any consumer override beats it.\n\n   EVERY dark selector in this file names `[data-theme=\"dark\"]` beside `.dark`\n   (5.53.0). A consumer's `@custom-variant dark` cannot reach these: it rewrites\n   `dark:` utilities, never a selector with `.dark` written into it.\n   tests/data-theme.test.ts fails on any `.dark` selector without its twin. */\n:where(.dark, [data-theme=\"dark\"]) {\n  --color-secondary-50: var(--color-zinc-950);\n  --color-secondary-100: var(--color-zinc-900);\n  --color-secondary-200: var(--color-zinc-800);\n  --color-secondary-300: var(--color-zinc-700);\n  --color-secondary-400: var(--color-zinc-600);\n  --color-secondary-500: var(--color-zinc-500);\n  --color-secondary-600: var(--color-zinc-400);\n  --color-secondary-700: var(--color-zinc-300);\n  --color-secondary-800: var(--color-zinc-200);\n  --color-secondary-900: var(--color-zinc-100);\n  --color-secondary-950: var(--color-zinc-50);\n}\n\n/* ─── Input & Field defaults ─────────────────────────────────────────────────\n   Better UX out of the box: spacing between stacked fields, smooth transitions,\n   and polished dark-mode defaults. All overridable via data-attribute selectors.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Field spacing is the CONTAINER's job, not the field's.\n   ────────────────────────────────────────────────────────────────────────────\n   This used to be:\n\n     [data-react-fancy-field] + [data-react-fancy-field] { margin-top: 1rem; }\n\n   An adjacent-sibling selector cannot know which way its parent lays children\n   out. Stacked vertically it read as spacing; inside a `grid-cols-2` row it\n   pushed the right-hand cell 16px down, and `items-start` could not fix it\n   because a margin is not alignment. The only escape was wrapping every field\n   in a plain <div> so each became an only-child.\n\n   Space fields with the container instead — `space-y-4`, or `gap-4` on a flex\n   or grid parent. A container knows its own axis; a sibling selector never\n   can. See CHANGELOG 5.17.0 for the migration.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Smooth transitions on all text inputs, selects, and textareas */\n[data-react-fancy-input] input,\n[data-react-fancy-textarea],\n[data-react-fancy-select],\n[data-react-fancy-date-picker],\n[data-react-fancy-autocomplete] input,\n[data-react-fancy-pillbox],\n[data-react-fancy-otp-input] input,\n[data-react-fancy-time-picker] input,\n[data-react-fancy-color-picker] input {\n  transition: border-color 0.15s ease, box-shadow 0.15s ease,\n    background-color 0.15s ease;\n}\n\n/* Dark-mode input refinements — slightly darker bg for contrast against page */\n/* ─── Inherent dark-mode defaults ────────────────────────────────────────────\n   Every rule below is wrapped in :where() so it carries ZERO specificity, which\n   buys two properties at once:\n     1. Inherent — a sensible dark appearance ships out of the box, even when the\n        consumer's Tailwind build doesn't generate react-fancy's `dark:` utility\n        classes (e.g. they didn't @source the package). This is what lets the\n        overlays (Dropdown, Menu, Popover, …) go dark on their own.\n     2. Override-friendly — because specificity is 0, ANY consumer override wins:\n        a plain `dark:bg-…` utility, a custom class, or the component's own\n        `dark:` class (when it IS generated) all take precedence — no !important,\n        no need to target the data-attribute.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Every colour below reads a semantic token (`--fancy-<role>-dark`, see\n   THEME_TOKENS / README \"Semantic tokens\") with today's value as the fallback,\n   so a host that sets nothing sees exactly what it saw before. */\n\n/* Inputs / selects / textareas — darker bg for contrast against the page */\n:where(.dark [data-react-fancy-input] input, [data-theme=\"dark\"] [data-react-fancy-input] input),\n:where(.dark [data-react-fancy-textarea], [data-theme=\"dark\"] [data-react-fancy-textarea]),\n:where(.dark [data-react-fancy-select], [data-theme=\"dark\"] [data-react-fancy-select]),\n:where(.dark [data-react-fancy-date-picker], [data-theme=\"dark\"] [data-react-fancy-date-picker]),\n:where(.dark [data-react-fancy-autocomplete] input, [data-theme=\"dark\"] [data-react-fancy-autocomplete] input),\n:where(.dark [data-react-fancy-pillbox], [data-theme=\"dark\"] [data-react-fancy-pillbox]),\n:where(.dark [data-react-fancy-otp-input] input, [data-theme=\"dark\"] [data-react-fancy-otp-input] input),\n:where(.dark [data-react-fancy-time-picker] input, [data-theme=\"dark\"] [data-react-fancy-time-picker] input) {\n  background-color: var(--fancy-input-dark, #1e1e24);\n  border-color: var(--fancy-border-strong-dark, #3f3f46);\n}\n\n/* Focus ring — brighter border + subtle glow */\n:where(.dark [data-react-fancy-input] input:focus, [data-theme=\"dark\"] [data-react-fancy-input] input:focus),\n:where(.dark [data-react-fancy-textarea]:focus, [data-theme=\"dark\"] [data-react-fancy-textarea]:focus),\n:where(.dark [data-react-fancy-select]:focus, [data-theme=\"dark\"] [data-react-fancy-select]:focus),\n:where(.dark [data-react-fancy-date-picker]:focus, [data-theme=\"dark\"] [data-react-fancy-date-picker]:focus),\n:where(.dark [data-react-fancy-autocomplete] input:focus, [data-theme=\"dark\"] [data-react-fancy-autocomplete] input:focus),\n:where(.dark [data-react-fancy-otp-input] input:focus, [data-theme=\"dark\"] [data-react-fancy-otp-input] input:focus),\n:where(.dark [data-react-fancy-time-picker] input:focus, [data-theme=\"dark\"] [data-react-fancy-time-picker] input:focus) {\n  border-color: var(--fancy-focus-dark, #60a5fa);\n  /* = rgba(96, 165, 250, 0.15) when the token is unset */\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fancy-focus-dark, #60a5fa) 15%, transparent);\n}\n\n/* Field labels — brighter for readability */\n:where(.dark [data-react-fancy-field] > label:first-child, [data-theme=\"dark\"] [data-react-fancy-field] > label:first-child) {\n  color: var(--fancy-text-dark, #f4f4f5);\n}\n\n/* Checkbox & radio */\n:where(.dark [data-react-fancy-checkbox] input, [data-theme=\"dark\"] [data-react-fancy-checkbox] input),\n:where(.dark [data-react-fancy-radio-group] input, [data-theme=\"dark\"] [data-react-fancy-radio-group] input) {\n  background-color: var(--fancy-input-dark, #1e1e24);\n  border-color: var(--fancy-border-strong-dark, #3f3f46);\n}\n\n/* Switch unchecked track */\n:where(.dark [data-react-fancy-switch] button[aria-checked=\"false\"], [data-theme=\"dark\"] [data-react-fancy-switch] button[aria-checked=\"false\"]) {\n  background-color: var(--fancy-border-dark, #3f3f46);\n}\n\n/* Input wrapper affixes */\n:where(.dark [data-react-fancy-input-wrapper] > span:first-child, [data-theme=\"dark\"] [data-react-fancy-input-wrapper] > span:first-child),\n:where(.dark [data-react-fancy-input-wrapper] > span:last-child, [data-theme=\"dark\"] [data-react-fancy-input-wrapper] > span:last-child) {\n  border-color: var(--fancy-border-strong-dark, #3f3f46);\n  background-color: var(--fancy-surface-muted-dark, #27272a);\n}\n\n/* Date picker icon (calendar, clock) */\n:where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator, [data-theme=\"dark\"] [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {\n  filter: invert(0.8);\n}\n\n/* ─── Overlays — inherent dark surfaces ──────────────────────────────────────\n   Dropdown / Menu / Popover / ContextMenu / MobileMenu flyout / Modal / Toast.\n   Mirrors the components' own `dark:` utilities (zinc-900 surface, zinc-700\n   border, zinc-300 text) so overlays render correctly in dark mode WITHOUT the\n   consumer @sourcing react-fancy. When those utilities ARE generated they win\n   (specificity 0 here), so there's no drift or double-styling. */\n:where(.dark [data-react-fancy-dropdown], [data-theme=\"dark\"] [data-react-fancy-dropdown]),\n:where(.dark [data-react-fancy-menu], [data-theme=\"dark\"] [data-react-fancy-menu]),\n:where(.dark [data-react-fancy-popover], [data-theme=\"dark\"] [data-react-fancy-popover]),\n:where(.dark [data-react-fancy-context-menu], [data-theme=\"dark\"] [data-react-fancy-context-menu]),\n:where(.dark [data-react-fancy-context-menu-sub-content], [data-theme=\"dark\"] [data-react-fancy-context-menu-sub-content]),\n:where(.dark [data-react-fancy-mobile-menu-flyout], [data-theme=\"dark\"] [data-react-fancy-mobile-menu-flyout]),\n:where(.dark [data-react-fancy-modal], [data-theme=\"dark\"] [data-react-fancy-modal]),\n:where(.dark [data-react-fancy-toast-item], [data-theme=\"dark\"] [data-react-fancy-toast-item]) {\n  background-color: var(--fancy-surface-dark, #18181b); /* zinc-900 */\n  border-color: var(--fancy-border-dark, #3f3f46); /* zinc-700 */\n  color: var(--fancy-text-soft-dark, #d4d4d8); /* zinc-300 */\n}\n\n/* Overlay item hover states */\n:where(.dark [data-react-fancy-dropdown-item]:hover, [data-theme=\"dark\"] [data-react-fancy-dropdown-item]:hover),\n:where(.dark [data-react-fancy-menu-item]:hover, [data-theme=\"dark\"] [data-react-fancy-menu-item]:hover),\n:where(.dark [data-react-fancy-context-menu-item]:hover, [data-theme=\"dark\"] [data-react-fancy-context-menu-item]:hover) {\n  background-color: var(--fancy-surface-muted-dark, #27272a); /* zinc-800 */\n}\n\n/* Overlay separators */\n:where(.dark [data-react-fancy-dropdown-separator], [data-theme=\"dark\"] [data-react-fancy-dropdown-separator]),\n:where(.dark [data-react-fancy-context-menu-separator], [data-theme=\"dark\"] [data-react-fancy-context-menu-separator]) {\n  background-color: var(--fancy-border-dark, #3f3f46); /* zinc-700 */\n}\n\n/* ─── Media viewer — transparency checkerboard ───────────────────────────────\n   Backdrop for <ImageViewer> / <MediaViewer> so transparent images read clearly.\n   Light + dark variants; the dark rule is wrapped in :where() (zero specificity)\n   so it ships out of the box without the consumer @sourcing react-fancy. */\n.fancy-checkerboard {\n  background-color: #ffffff;\n  background-image:\n    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),\n    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),\n    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);\n  background-size: 16px 16px;\n  background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n}\n\n:where(.dark, [data-theme=\"dark\"]) .fancy-checkerboard {\n  background-color: #18181b; /* zinc-900 */\n  background-image:\n    linear-gradient(45deg, #27272a 25%, transparent 25%),\n    linear-gradient(-45deg, #27272a 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #27272a 75%),\n    linear-gradient(-45deg, transparent 75%, #27272a 75%);\n}\n}\n\n\n@keyframes fancy-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-left {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-slide-right {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@layer base {\n\n\n.fancy-fade-in {\n  animation: fancy-fade-in 0.2s ease-out;\n}\n\n.fancy-slide-left {\n  animation: fancy-slide-left 0.3s ease-out;\n}\n\n.fancy-slide-right {\n  animation: fancy-slide-right 0.3s ease-out;\n}\n}\n\n\n/* Overlay / floating animations */\n\n@keyframes fancy-scale-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fancy-slide-up {\n  from {\n    opacity: 0;\n    transform: translateY(16px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes fancy-toast-in {\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-collapse-open {\n  from {\n    grid-template-rows: 0fr;\n  }\n  to {\n    grid-template-rows: 1fr;\n  }\n}\n\n@keyframes fancy-collapse-close {\n  from {\n    grid-template-rows: 1fr;\n  }\n  to {\n    grid-template-rows: 0fr;\n  }\n}\n\n@layer base {\n\n\n.fancy-scale-in {\n  animation: fancy-scale-in 0.15s ease-out;\n}\n\n.fancy-slide-up {\n  animation: fancy-slide-up 0.2s ease-out;\n}\n\n.fancy-fade-out {\n  animation: fancy-fade-out 0.15s ease-in forwards;\n}\n\n.fancy-toast-in {\n  animation: fancy-toast-in 0.3s ease-out;\n}\n\n.fancy-collapse-open {\n  animation: fancy-collapse-open 0.2s ease-out forwards;\n}\n\n.fancy-collapse-close {\n  animation: fancy-collapse-close 0.15s ease-in forwards;\n}\n}\n\n\n/* Mobile flyout slide animations */\n\n@keyframes fancy-slide-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-slide-out-left {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes fancy-slide-in-right {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n/* Avatar glow — a looping halo ring (box-shadow only, no reflow). Color comes\n   from the --fancy-glow custom property set on the element. */\n@keyframes fancy-avatar-glow {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 55%, transparent);\n    opacity: 0.9;\n  }\n  70% {\n    box-shadow: 0 0 0 6px color-mix(in srgb, var(--fancy-glow, #a855f7) 0%, transparent);\n    opacity: 0.5;\n  }\n  100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 0%, transparent);\n    opacity: 0.9;\n  }\n}\n\n@layer base {\n\n\n.fancy-avatar-glow {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  pointer-events: none;\n  box-shadow:\n    0 0 0 2px color-mix(in srgb, var(--fancy-glow, #a855f7) 70%, transparent),\n    0 0 10px 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 45%, transparent);\n  animation: fancy-avatar-glow 1.6s ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fancy-avatar-glow {\n    animation: none;\n  }\n}\n}\n\n\n@keyframes fancy-slide-out-right {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n\n@layer base {\n\n\n.fancy-slide-in-left {\n  animation: fancy-slide-in-left 0.25s ease-out;\n}\n\n.fancy-slide-out-left {\n  animation: fancy-slide-out-left 0.2s ease-in forwards;\n}\n\n.fancy-slide-in-right {\n  animation: fancy-slide-in-right 0.25s ease-out;\n}\n\n.fancy-slide-out-right {\n  animation: fancy-slide-out-right 0.2s ease-in forwards;\n}\n}\n\n\n/* Vertical drawer edges. The horizontal pair above predates Drawer (it was\n   built for MobileMenu.Flyout, which only ever opened left/right); these\n   complete the set so `side=\"top\"`/`side=\"bottom\"` animate rather than pop. */\n\n@keyframes fancy-slide-in-top {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-out-top {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes fancy-slide-in-bottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-out-bottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@layer base {\n\n\n.fancy-slide-in-top {\n  animation: fancy-slide-in-top 0.25s ease-out;\n}\n\n.fancy-slide-out-top {\n  animation: fancy-slide-out-top 0.2s ease-in forwards;\n}\n\n.fancy-slide-in-bottom {\n  animation: fancy-slide-in-bottom 0.25s ease-out;\n}\n\n.fancy-slide-out-bottom {\n  animation: fancy-slide-out-bottom 0.2s ease-in forwards;\n}\n\n/* Reduced motion collapses the travel to a ~0 duration. Since 5.51.0\n   `useAnimation` also unmounts when no animation runs at all, so this is no\n   longer what keeps a closed drawer from staying in the DOM — but a ~0 duration\n   keeps the exit on the same path as every other close. */\n@media (prefers-reduced-motion: reduce) {\n  .fancy-slide-in-left,\n  .fancy-slide-out-left,\n  .fancy-slide-in-right,\n  .fancy-slide-out-right,\n  .fancy-slide-in-top,\n  .fancy-slide-out-top,\n  .fancy-slide-in-bottom,\n  .fancy-slide-out-bottom {\n    animation-duration: 0.01ms;\n  }\n}\n\n/* ─── Marquee ────────────────────────────────────────────────────────────────\n   Edge-to-edge auto-scrolling strip. The track holds two identical copies of\n   the content; translateX(-50%) over one loop shifts exactly one copy, so the\n   wrap is seamless. Duration/gap/fade arrive as custom properties set by the\n   component. No animation under prefers-reduced-motion.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n[data-react-fancy-marquee] {\n  overflow: hidden;\n  width: 100%;\n}\n\n.fancy-marquee--fade {\n  -webkit-mask-image: linear-gradient(\n    to right,\n    transparent,\n    black var(--fancy-marquee-fade, 48px),\n    black calc(100% - var(--fancy-marquee-fade, 48px)),\n    transparent\n  );\n  mask-image: linear-gradient(\n    to right,\n    transparent,\n    black var(--fancy-marquee-fade, 48px),\n    black calc(100% - var(--fancy-marquee-fade, 48px)),\n    transparent\n  );\n}\n\n.fancy-marquee__track {\n  display: flex;\n  width: max-content;\n  animation: fancy-marquee var(--fancy-marquee-duration, 40s) linear infinite;\n  will-change: transform;\n}\n\n[data-react-fancy-marquee][data-direction=\"right\"] .fancy-marquee__track {\n  animation-direction: reverse;\n}\n\n.fancy-marquee--pause-hover:hover .fancy-marquee__track,\n[data-react-fancy-marquee][data-paused] .fancy-marquee__track {\n  animation-play-state: paused;\n}\n\n.fancy-marquee__group {\n  display: flex;\n  flex: none;\n}\n\n.fancy-marquee__unit {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--fancy-marquee-gap, 40px);\n  padding-inline-end: var(--fancy-marquee-gap, 40px);\n  white-space: nowrap;\n}\n\n.fancy-marquee__item,\n.fancy-marquee__separator {\n  flex: none;\n}\n}\n\n\n@keyframes fancy-marquee {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-50%);\n  }\n}\n\n@layer base {\n\n\n@media (prefers-reduced-motion: reduce) {\n  .fancy-marquee__track {\n    animation: none;\n  }\n}\n}\n\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* @particle-academy/react-fancy — base styles + animations */\n\n/* ─── Brand colour scheme ────────────────────────────────────────────────────\n   Three token families every Fancy package can rely on, so a component never\n   has to invent a palette or hardcode a literal:\n\n     brand         one accent — the thing a consumer rebrands first\n     primary-*     the accent as a full 50→950 scale\n     secondary-*   the NEUTRAL scale for surfaces, borders and body text\n\n   Why this exists: packages were already writing `bg-brand`, `text-primary-600`\n   and `border-secondary-200` against tokens nothing defined. Tailwind generated\n   no such utility, the class silently resolved to nothing, and the component\n   rendered unstyled — correct markup, no colour, no error. Defining them here\n   turns those classes into a contract instead of a hope.\n\n   SECONDARY INVERTS WITH THE THEME. `text-secondary-900` means \"strongest\n   foreground\", not \"nearly black\" — so it stays readable on a dark surface.\n   That distinction is the whole point: mixing a literal background (`bg-white`)\n   with a semantic foreground (`text-secondary-900`) is what produced\n   white-on-white in a dark host.\n\n   OVERRIDE IT. Redefine any of these in your own `@theme` (or on `:root`) and\n   yours wins — nothing here is `!important`, and the utilities read the variable\n   rather than baking a value in:\n\n     @theme { --color-brand: var(--color-emerald-600); }\n   ──────────────────────────────────────────────────────────────────────────── */\n@theme {\n  /* THE HOST'S OWN COLOUR. `color=\"brand\"` on any component resolves to these.\n     Three variables, not one: a generated hover assumes \"same hue, darker\",\n     and a brand palette need not work that way — a navy whose hover is gold\n     cannot be derived from navy. So the host states the hover instead of the\n     kit guessing it.\n\n       :root {\n         --color-brand: #003057;\n         --color-brand-contrast: #ffffff;   text/icon ON the brand colour\n         --color-brand-hover: #D4A017;      need not be a shade of brand\n       }\n\n     PER MODE, SWAP THE PAIR. `--color-brand` and `--color-brand-contrast` only\n     mean anything together. Repointing one alone fails QUIETLY -- the button\n     still renders, it is just unreadable (a pale surface still carrying white\n     text; or, on ghost/outline where brand is the LABEL, dark text on a dark\n     background):\n\n       .dark { --color-brand: #BFD7EA; --color-brand-contrast: #003057; }\n\n     `--color-brand-hover` usually needs no per-mode value: an accent chosen to\n     stand against the brand tends to stand against it in both modes.\n\n     NOTE: this comment does not survive the build -- `@theme` is emitted\n     without it. The consumer-facing copy is in README.md, and that is the one\n     to keep correct.\n\n     Defaults keep the kit's violet so nothing changes for a host that never\n     sets them. Soft/outline/ghost variants derive their tints with opacity\n     modifiers (`bg-brand/10`), which is what lets three variables cover four\n     variants without asking for a whole scale. */\n  --color-brand: var(--color-violet-600);\n  --color-brand-contrast: var(--color-white);\n  --color-brand-hover: var(--color-violet-700);\n\n  --color-primary-50: var(--color-violet-50);\n  --color-primary-100: var(--color-violet-100);\n  --color-primary-200: var(--color-violet-200);\n  --color-primary-300: var(--color-violet-300);\n  --color-primary-400: var(--color-violet-400);\n  --color-primary-500: var(--color-violet-500);\n  --color-primary-600: var(--color-violet-600);\n  --color-primary-700: var(--color-violet-700);\n  --color-primary-800: var(--color-violet-800);\n  --color-primary-900: var(--color-violet-900);\n  --color-primary-950: var(--color-violet-950);\n\n  /* Light-theme defaults: 50 = faintest surface, 900/950 = strongest text. */\n  --color-secondary-50: var(--color-zinc-50);\n  --color-secondary-100: var(--color-zinc-100);\n  --color-secondary-200: var(--color-zinc-200);\n  --color-secondary-300: var(--color-zinc-300);\n  --color-secondary-400: var(--color-zinc-400);\n  --color-secondary-500: var(--color-zinc-500);\n  --color-secondary-600: var(--color-zinc-600);\n  --color-secondary-700: var(--color-zinc-700);\n  --color-secondary-800: var(--color-zinc-800);\n  --color-secondary-900: var(--color-zinc-900);\n  --color-secondary-950: var(--color-zinc-950);\n}\n\n/* ─── Full screen in the top layer — neutralise the UA popover box ───────────\n   An overlay-mode FullScreen is promoted with popover=\"manual\" so ancestor\n   transforms / filters cannot trap it, and the UA sheet then styles it as a\n   popover: padding .25em, a solid border, Canvas / CanvasText colours,\n   overflow:auto. Any author rule outranks the UA origin, so this zero-\n   specificity rule in the base layer puts those back to what a plain box has,\n   while every utility a consumer passes through className still wins. Inline\n   styles could not do that: they would beat the consumer's own classes. The\n   box geometry (inset, width, height, margin) is set inline by the hook. */\n@layer base {\n  :where([data-fullscreen-layer=\"top\"]) {\n    padding: 0;\n    border: 0 solid;\n    background-color: transparent;\n    color: inherit;\n    overflow: visible;\n  }\n}\n\n@layer base {\n\n/* ─── Progress (circular) — named diameters ──────────────────────────────────\n   These ship as real CSS rather than Tailwind classes on the element, because a\n   consumer who has not @sourced this package gets no generated utilities and\n   the ring would render with NO SIZE at all. They were inline styles before,\n   which always worked but could not be overridden by className (issue #17).\n\n   Being inside @layer base, a className utility now beats them — which is the\n   whole point, and the reason #20 had to land first. */\n[data-react-fancy-progress][data-size=\"sm\"] { width: 2rem; height: 2rem; }\n[data-react-fancy-progress][data-size=\"md\"] { width: 3rem; height: 3rem; }\n[data-react-fancy-progress][data-size=\"lg\"] { width: 4rem; height: 4rem; }\n\n\n\n/* Dark: the neutral scale flips, so \"900\" still means strongest foreground and\n   \"50\" still means faintest surface. Wrapped in :where() for zero specificity,\n   matching the rest of this file — any consumer override beats it.\n\n   EVERY dark selector in this file names `[data-theme=\"dark\"]` beside `.dark`\n   (5.53.0). A consumer's `@custom-variant dark` cannot reach these: it rewrites\n   `dark:` utilities, never a selector with `.dark` written into it.\n   tests/data-theme.test.ts fails on any `.dark` selector without its twin. */\n:where(.dark, [data-theme=\"dark\"]) {\n  --color-secondary-50: var(--color-zinc-950);\n  --color-secondary-100: var(--color-zinc-900);\n  --color-secondary-200: var(--color-zinc-800);\n  --color-secondary-300: var(--color-zinc-700);\n  --color-secondary-400: var(--color-zinc-600);\n  --color-secondary-500: var(--color-zinc-500);\n  --color-secondary-600: var(--color-zinc-400);\n  --color-secondary-700: var(--color-zinc-300);\n  --color-secondary-800: var(--color-zinc-200);\n  --color-secondary-900: var(--color-zinc-100);\n  --color-secondary-950: var(--color-zinc-50);\n}\n\n/* ─── CodeBlock / CodeView palette ───────────────────────────────────────────\n   Both components declare the light AND dark syntax palette on their root\n   (`--fc-<key>-l` / `--fc-<key>-d`) and paint with\n   `var(--fc-<key>, var(--fc-<key>-l))`, so server-rendered HTML is right in\n   either theme. Their `dark:[--fc-<key>:…]` classes switch it under the\n   consumer's Tailwind `dark` variant; this rule does the same under `.dark` /\n   `[data-theme=\"dark\"]` for a host whose Tailwind does not scan the package.\n   Keep the key list in step with CODE_PALETTE_KEYS (a test checks). */\n:where(\n  .dark [data-react-fancy-code-palette],\n  [data-theme=\"dark\"] [data-react-fancy-code-palette],\n  .dark[data-react-fancy-code-palette],\n  [data-theme=\"dark\"][data-react-fancy-code-palette]\n) {\n  --fc-background: var(--fc-background-d);\n  --fc-foreground: var(--fc-foreground-d);\n  --fc-gutterBackground: var(--fc-gutterBackground-d);\n  --fc-gutterForeground: var(--fc-gutterForeground-d);\n  --fc-gutterBorder: var(--fc-gutterBorder-d);\n  --fc-cursorColor: var(--fc-cursorColor-d);\n  --fc-keyword: var(--fc-keyword-d);\n  --fc-string: var(--fc-string-d);\n  --fc-comment: var(--fc-comment-d);\n  --fc-number: var(--fc-number-d);\n  --fc-operator: var(--fc-operator-d);\n  --fc-function: var(--fc-function-d);\n  --fc-type: var(--fc-type-d);\n  --fc-tag: var(--fc-tag-d);\n  --fc-attribute: var(--fc-attribute-d);\n  --fc-attributeValue: var(--fc-attributeValue-d);\n  --fc-punctuation: var(--fc-punctuation-d);\n  --fc-variable: var(--fc-variable-d);\n}\n\n/* ─── Input & Field defaults ─────────────────────────────────────────────────\n   Better UX out of the box: spacing between stacked fields, smooth transitions,\n   and polished dark-mode defaults. All overridable via data-attribute selectors.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Field spacing is the CONTAINER's job, not the field's.\n   ────────────────────────────────────────────────────────────────────────────\n   This used to be:\n\n     [data-react-fancy-field] + [data-react-fancy-field] { margin-top: 1rem; }\n\n   An adjacent-sibling selector cannot know which way its parent lays children\n   out. Stacked vertically it read as spacing; inside a `grid-cols-2` row it\n   pushed the right-hand cell 16px down, and `items-start` could not fix it\n   because a margin is not alignment. The only escape was wrapping every field\n   in a plain <div> so each became an only-child.\n\n   Space fields with the container instead — `space-y-4`, or `gap-4` on a flex\n   or grid parent. A container knows its own axis; a sibling selector never\n   can. See CHANGELOG 5.17.0 for the migration.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Smooth transitions on all text inputs, selects, and textareas */\n[data-react-fancy-input] input,\n[data-react-fancy-textarea],\n[data-react-fancy-select],\n[data-react-fancy-date-picker],\n[data-react-fancy-autocomplete] input,\n[data-react-fancy-pillbox],\n[data-react-fancy-otp-input] input,\n[data-react-fancy-time-picker] input,\n[data-react-fancy-color-picker] input {\n  transition: border-color 0.15s ease, box-shadow 0.15s ease,\n    background-color 0.15s ease;\n}\n\n/* Dark-mode input refinements — slightly darker bg for contrast against page */\n/* ─── Inherent dark-mode defaults ────────────────────────────────────────────\n   Every rule below is wrapped in :where() so it carries ZERO specificity, which\n   buys two properties at once:\n     1. Inherent — a sensible dark appearance ships out of the box, even when the\n        consumer's Tailwind build doesn't generate react-fancy's `dark:` utility\n        classes (e.g. they didn't @source the package). This is what lets the\n        overlays (Dropdown, Menu, Popover, …) go dark on their own.\n     2. Override-friendly — because specificity is 0, ANY consumer override wins:\n        a plain `dark:bg-…` utility, a custom class, or the component's own\n        `dark:` class (when it IS generated) all take precedence — no !important,\n        no need to target the data-attribute.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/* Every colour below reads a semantic token (`--fancy-<role>-dark`, see\n   THEME_TOKENS / README \"Semantic tokens\") with today's value as the fallback,\n   so a host that sets nothing sees exactly what it saw before. */\n\n/* Inputs / selects / textareas — darker bg for contrast against the page */\n:where(.dark [data-react-fancy-input] input, [data-theme=\"dark\"] [data-react-fancy-input] input),\n:where(.dark [data-react-fancy-textarea], [data-theme=\"dark\"] [data-react-fancy-textarea]),\n:where(.dark [data-react-fancy-select], [data-theme=\"dark\"] [data-react-fancy-select]),\n:where(.dark [data-react-fancy-date-picker], [data-theme=\"dark\"] [data-react-fancy-date-picker]),\n:where(.dark [data-react-fancy-autocomplete] input, [data-theme=\"dark\"] [data-react-fancy-autocomplete] input),\n:where(.dark [data-react-fancy-pillbox], [data-theme=\"dark\"] [data-react-fancy-pillbox]),\n:where(.dark [data-react-fancy-otp-input] input, [data-theme=\"dark\"] [data-react-fancy-otp-input] input),\n:where(.dark [data-react-fancy-time-picker] input, [data-theme=\"dark\"] [data-react-fancy-time-picker] input) {\n  background-color: var(--fancy-input-dark, #1e1e24);\n  border-color: var(--fancy-border-strong-dark, #3f3f46);\n}\n\n/* Focus ring — brighter border + subtle glow */\n:where(.dark [data-react-fancy-input] input:focus, [data-theme=\"dark\"] [data-react-fancy-input] input:focus),\n:where(.dark [data-react-fancy-textarea]:focus, [data-theme=\"dark\"] [data-react-fancy-textarea]:focus),\n:where(.dark [data-react-fancy-select]:focus, [data-theme=\"dark\"] [data-react-fancy-select]:focus),\n:where(.dark [data-react-fancy-date-picker]:focus, [data-theme=\"dark\"] [data-react-fancy-date-picker]:focus),\n:where(.dark [data-react-fancy-autocomplete] input:focus, [data-theme=\"dark\"] [data-react-fancy-autocomplete] input:focus),\n:where(.dark [data-react-fancy-otp-input] input:focus, [data-theme=\"dark\"] [data-react-fancy-otp-input] input:focus),\n:where(.dark [data-react-fancy-time-picker] input:focus, [data-theme=\"dark\"] [data-react-fancy-time-picker] input:focus) {\n  border-color: var(--fancy-focus-dark, #60a5fa);\n  /* = rgba(96, 165, 250, 0.15) when the token is unset */\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fancy-focus-dark, #60a5fa) 15%, transparent);\n}\n\n/* Field labels — brighter for readability */\n:where(.dark [data-react-fancy-field] > label:first-child, [data-theme=\"dark\"] [data-react-fancy-field] > label:first-child) {\n  color: var(--fancy-text-dark, #f4f4f5);\n}\n\n/* Checkbox & radio */\n:where(.dark [data-react-fancy-checkbox] input, [data-theme=\"dark\"] [data-react-fancy-checkbox] input),\n:where(.dark [data-react-fancy-radio-group] input, [data-theme=\"dark\"] [data-react-fancy-radio-group] input) {\n  background-color: var(--fancy-input-dark, #1e1e24);\n  border-color: var(--fancy-border-strong-dark, #3f3f46);\n}\n\n/* Switch unchecked track */\n:where(.dark [data-react-fancy-switch] button[aria-checked=\"false\"], [data-theme=\"dark\"] [data-react-fancy-switch] button[aria-checked=\"false\"]) {\n  background-color: var(--fancy-border-dark, #3f3f46);\n}\n\n/* Input wrapper affixes */\n:where(.dark [data-react-fancy-input-wrapper] > span:first-child, [data-theme=\"dark\"] [data-react-fancy-input-wrapper] > span:first-child),\n:where(.dark [data-react-fancy-input-wrapper] > span:last-child, [data-theme=\"dark\"] [data-react-fancy-input-wrapper] > span:last-child) {\n  border-color: var(--fancy-border-strong-dark, #3f3f46);\n  background-color: var(--fancy-surface-muted-dark, #27272a);\n}\n\n/* Date picker icon (calendar, clock) */\n:where(.dark [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator, [data-theme=\"dark\"] [data-react-fancy-date-picker]::-webkit-calendar-picker-indicator) {\n  filter: invert(0.8);\n}\n\n/* ─── Overlays — inherent dark surfaces ──────────────────────────────────────\n   Dropdown / Menu / Popover / ContextMenu / MobileMenu flyout / Modal / Toast.\n   Mirrors the components' own `dark:` utilities (zinc-900 surface, zinc-700\n   border, zinc-300 text) so overlays render correctly in dark mode WITHOUT the\n   consumer @sourcing react-fancy. When those utilities ARE generated they win\n   (specificity 0 here), so there's no drift or double-styling. */\n:where(.dark [data-react-fancy-dropdown], [data-theme=\"dark\"] [data-react-fancy-dropdown]),\n:where(.dark [data-react-fancy-menu], [data-theme=\"dark\"] [data-react-fancy-menu]),\n:where(.dark [data-react-fancy-popover], [data-theme=\"dark\"] [data-react-fancy-popover]),\n:where(.dark [data-react-fancy-context-menu], [data-theme=\"dark\"] [data-react-fancy-context-menu]),\n:where(.dark [data-react-fancy-context-menu-sub-content], [data-theme=\"dark\"] [data-react-fancy-context-menu-sub-content]),\n:where(.dark [data-react-fancy-mobile-menu-flyout], [data-theme=\"dark\"] [data-react-fancy-mobile-menu-flyout]),\n:where(.dark [data-react-fancy-modal], [data-theme=\"dark\"] [data-react-fancy-modal]),\n:where(.dark [data-react-fancy-toast-item], [data-theme=\"dark\"] [data-react-fancy-toast-item]) {\n  background-color: var(--fancy-surface-dark, #18181b); /* zinc-900 */\n  border-color: var(--fancy-border-dark, #3f3f46); /* zinc-700 */\n  color: var(--fancy-text-soft-dark, #d4d4d8); /* zinc-300 */\n}\n\n/* Overlay item hover states */\n:where(.dark [data-react-fancy-dropdown-item]:hover, [data-theme=\"dark\"] [data-react-fancy-dropdown-item]:hover),\n:where(.dark [data-react-fancy-menu-item]:hover, [data-theme=\"dark\"] [data-react-fancy-menu-item]:hover),\n:where(.dark [data-react-fancy-context-menu-item]:hover, [data-theme=\"dark\"] [data-react-fancy-context-menu-item]:hover) {\n  background-color: var(--fancy-surface-muted-dark, #27272a); /* zinc-800 */\n}\n\n/* Overlay separators */\n:where(.dark [data-react-fancy-dropdown-separator], [data-theme=\"dark\"] [data-react-fancy-dropdown-separator]),\n:where(.dark [data-react-fancy-context-menu-separator], [data-theme=\"dark\"] [data-react-fancy-context-menu-separator]) {\n  background-color: var(--fancy-border-dark, #3f3f46); /* zinc-700 */\n}\n\n/* ─── Media viewer — transparency checkerboard ───────────────────────────────\n   Backdrop for <ImageViewer> / <MediaViewer> so transparent images read clearly.\n   Light + dark variants; the dark rule is wrapped in :where() (zero specificity)\n   so it ships out of the box without the consumer @sourcing react-fancy. */\n.fancy-checkerboard {\n  background-color: #ffffff;\n  background-image:\n    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),\n    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),\n    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);\n  background-size: 16px 16px;\n  background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n}\n\n:where(.dark, [data-theme=\"dark\"]) .fancy-checkerboard {\n  background-color: #18181b; /* zinc-900 */\n  background-image:\n    linear-gradient(45deg, #27272a 25%, transparent 25%),\n    linear-gradient(-45deg, #27272a 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #27272a 75%),\n    linear-gradient(-45deg, transparent 75%, #27272a 75%);\n}\n}\n\n\n@keyframes fancy-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-left {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-slide-right {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@layer base {\n\n\n.fancy-fade-in {\n  animation: fancy-fade-in 0.2s ease-out;\n}\n\n.fancy-slide-left {\n  animation: fancy-slide-left 0.3s ease-out;\n}\n\n.fancy-slide-right {\n  animation: fancy-slide-right 0.3s ease-out;\n}\n}\n\n\n/* Overlay / floating animations */\n\n@keyframes fancy-scale-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fancy-slide-up {\n  from {\n    opacity: 0;\n    transform: translateY(16px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-fade-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes fancy-toast-in {\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-collapse-open {\n  from {\n    grid-template-rows: 0fr;\n  }\n  to {\n    grid-template-rows: 1fr;\n  }\n}\n\n@keyframes fancy-collapse-close {\n  from {\n    grid-template-rows: 1fr;\n  }\n  to {\n    grid-template-rows: 0fr;\n  }\n}\n\n@layer base {\n\n\n.fancy-scale-in {\n  animation: fancy-scale-in 0.15s ease-out;\n}\n\n.fancy-slide-up {\n  animation: fancy-slide-up 0.2s ease-out;\n}\n\n.fancy-fade-out {\n  animation: fancy-fade-out 0.15s ease-in forwards;\n}\n\n.fancy-toast-in {\n  animation: fancy-toast-in 0.3s ease-out;\n}\n\n.fancy-collapse-open {\n  animation: fancy-collapse-open 0.2s ease-out forwards;\n}\n\n.fancy-collapse-close {\n  animation: fancy-collapse-close 0.15s ease-in forwards;\n}\n}\n\n\n/* Mobile flyout slide animations */\n\n@keyframes fancy-slide-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fancy-slide-out-left {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes fancy-slide-in-right {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n/* Avatar glow — a looping halo ring (box-shadow only, no reflow). Color comes\n   from the --fancy-glow custom property set on the element. */\n@keyframes fancy-avatar-glow {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 55%, transparent);\n    opacity: 0.9;\n  }\n  70% {\n    box-shadow: 0 0 0 6px color-mix(in srgb, var(--fancy-glow, #a855f7) 0%, transparent);\n    opacity: 0.5;\n  }\n  100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 0%, transparent);\n    opacity: 0.9;\n  }\n}\n\n@layer base {\n\n\n.fancy-avatar-glow {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  pointer-events: none;\n  box-shadow:\n    0 0 0 2px color-mix(in srgb, var(--fancy-glow, #a855f7) 70%, transparent),\n    0 0 10px 0 color-mix(in srgb, var(--fancy-glow, #a855f7) 45%, transparent);\n  animation: fancy-avatar-glow 1.6s ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fancy-avatar-glow {\n    animation: none;\n  }\n}\n}\n\n\n@keyframes fancy-slide-out-right {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n\n@layer base {\n\n\n.fancy-slide-in-left {\n  animation: fancy-slide-in-left 0.25s ease-out;\n}\n\n.fancy-slide-out-left {\n  animation: fancy-slide-out-left 0.2s ease-in forwards;\n}\n\n.fancy-slide-in-right {\n  animation: fancy-slide-in-right 0.25s ease-out;\n}\n\n.fancy-slide-out-right {\n  animation: fancy-slide-out-right 0.2s ease-in forwards;\n}\n}\n\n\n/* Vertical drawer edges. The horizontal pair above predates Drawer (it was\n   built for MobileMenu.Flyout, which only ever opened left/right); these\n   complete the set so `side=\"top\"`/`side=\"bottom\"` animate rather than pop. */\n\n@keyframes fancy-slide-in-top {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-out-top {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@keyframes fancy-slide-in-bottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes fancy-slide-out-bottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n\n@layer base {\n\n\n.fancy-slide-in-top {\n  animation: fancy-slide-in-top 0.25s ease-out;\n}\n\n.fancy-slide-out-top {\n  animation: fancy-slide-out-top 0.2s ease-in forwards;\n}\n\n.fancy-slide-in-bottom {\n  animation: fancy-slide-in-bottom 0.25s ease-out;\n}\n\n.fancy-slide-out-bottom {\n  animation: fancy-slide-out-bottom 0.2s ease-in forwards;\n}\n\n/* Reduced motion collapses the travel to a ~0 duration. Since 5.51.0\n   `useAnimation` also unmounts when no animation runs at all, so this is no\n   longer what keeps a closed drawer from staying in the DOM — but a ~0 duration\n   keeps the exit on the same path as every other close. */\n@media (prefers-reduced-motion: reduce) {\n  .fancy-slide-in-left,\n  .fancy-slide-out-left,\n  .fancy-slide-in-right,\n  .fancy-slide-out-right,\n  .fancy-slide-in-top,\n  .fancy-slide-out-top,\n  .fancy-slide-in-bottom,\n  .fancy-slide-out-bottom {\n    animation-duration: 0.01ms;\n  }\n}\n\n/* ─── Marquee ────────────────────────────────────────────────────────────────\n   Edge-to-edge auto-scrolling strip. The track holds two identical copies of\n   the content; translateX(-50%) over one loop shifts exactly one copy, so the\n   wrap is seamless. Duration/gap/fade arrive as custom properties set by the\n   component. No animation under prefers-reduced-motion.\n   ──────────────────────────────────────────────────────────────────────────── */\n\n[data-react-fancy-marquee] {\n  overflow: hidden;\n  width: 100%;\n}\n\n.fancy-marquee--fade {\n  -webkit-mask-image: linear-gradient(\n    to right,\n    transparent,\n    black var(--fancy-marquee-fade, 48px),\n    black calc(100% - var(--fancy-marquee-fade, 48px)),\n    transparent\n  );\n  mask-image: linear-gradient(\n    to right,\n    transparent,\n    black var(--fancy-marquee-fade, 48px),\n    black calc(100% - var(--fancy-marquee-fade, 48px)),\n    transparent\n  );\n}\n\n.fancy-marquee__track {\n  display: flex;\n  width: max-content;\n  animation: fancy-marquee var(--fancy-marquee-duration, 40s) linear infinite;\n  will-change: transform;\n}\n\n[data-react-fancy-marquee][data-direction=\"right\"] .fancy-marquee__track {\n  animation-direction: reverse;\n}\n\n.fancy-marquee--pause-hover:hover .fancy-marquee__track,\n[data-react-fancy-marquee][data-paused] .fancy-marquee__track {\n  animation-play-state: paused;\n}\n\n.fancy-marquee__group {\n  display: flex;\n  flex: none;\n}\n\n.fancy-marquee__unit {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--fancy-marquee-gap, 40px);\n  padding-inline-end: var(--fancy-marquee-gap, 40px);\n  white-space: nowrap;\n}\n\n.fancy-marquee__item,\n.fancy-marquee__separator {\n  flex: none;\n}\n}\n\n\n@keyframes fancy-marquee {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-50%);\n  }\n}\n\n@layer base {\n\n\n@media (prefers-reduced-motion: reduce) {\n  .fancy-marquee__track {\n    animation: none;\n  }\n}\n}\n\n"],"mappings":"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","names":[]}

package/docs/CodeBlock.md

@@ -35,7 +35,24 @@ With `title`, the copy button sits in the header with a visible "Copy" label. Wi
 
 ## Highlighting
 
-Only **HTML** is highlighted (`language` of `"html"`, `"htm"`, `"xml"` or `"xhtml"`). It is the one grammar `@particle-academy/fancy-file-commons` ships. **Every other language, including `bash`, `json`, `env`, `php`, `typescript` and `python`, renders as plain, un-highlighted text** in the same font, size and palette. Unknown languages fall back the same way, and nothing throws. `language` is still reflected as `data-language`, so a page can style or target blocks by language today.
+Every grammar `@particle-academy/fancy-file-commons` ships is highlighted, through its `tokenize(code, language)` lookup. `language` is case-insensitive:
+
+| Language | `language` values |
+|---|---|
+| TypeScript | `typescript`, `ts`, `tsx` |
+| JavaScript | `javascript`, `js`, `jsx` |
+| JSON | `json` (highlighted by the JavaScript grammar) |
+| PHP | `php` |
+| Python | `python`, `py` |
+| Go | `go` |
+| Markdown | `markdown`, `md` |
+| Shell | `shell`, `sh`, `bash`, `zsh` |
+| dotenv | `dotenv`, `env` |
+| HTML / XML | `html`, `htm`, `xml`, `xhtml` |
+
+**Any other language renders as plain, un-highlighted text** in the same font, size and palette, and nothing throws. `language` is reflected as `data-language` either way.
+
+The colours are `CodeView`'s palette; the shell and dotenv grammars reuse its existing slots rather than adding new ones: shell flags (`-x`, `--flag`) and dotenv keys use the `attribute` colour, the command word uses `function`, and `$VAR` / `${VAR}` use `variable`.
 
 ## Props
 
@@ -44,7 +61,7 @@ Also accepts every `<div>` attribute (`id`, `aria-label`, `style`, `data-*`, ...
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | code | `string` | - | The source to show. Rendered as text, never parsed as HTML |
-| language | `string` | `"plaintext"` | Language id. Only HTML aliases are highlighted; everything else is plain text |
+| language | `CodeLanguage` (any string) | `"plaintext"` | Language id or alias, case-insensitive (see Highlighting). Unknown values are plain text |
 | copyable | `boolean` | `true` | Show the copy button |
 | title | `ReactNode` | - | Header above the code (a filename, or a label like "Terminal") |
 | showLineNumbers | `boolean` | `false` | Number each line in a gutter that is not part of the code text |
@@ -59,15 +76,23 @@ The button copies **exactly the `code` prop**: no highlight markup, no line numb
 
 ## Theming
 
-The same palette as `CodeView` (`LIGHT_COLORS` / `DARK_COLORS` from `fancy-file-commons`), so the two sit together. Dark is chosen when `<html>` has the `dark` class or the OS prefers dark. On the server, and during hydration, the light palette is used, then the real theme.
+The same palette as `CodeView` (`LIGHT_COLORS` / `DARK_COLORS` from `fancy-file-commons`), so the two sit together. **The markup carries both palettes and CSS picks one**, so server-rendered HTML is right in either theme and a dark site does not flash light on hydration:
+
+- the root declares `--fc-<slot>-l` and `--fc-<slot>-d` (for example `--fc-keyword-l`, `--fc-keyword-d`), and everything coloured reads `var(--fc-<slot>, var(--fc-<slot>-l))`;
+- the dark value applies under **your Tailwind `dark` variant** (the root's `dark:[--fc-<slot>:...]` classes, compiled from the `@source`d dist: class strategy, `dark-variant.css`, or Tailwind's default media query), **or** under a `.dark` / `[data-theme="dark"]` ancestor through `styles.css`, for a host that does not scan the package;
+- with neither, it renders the light palette.
+
+To change a colour, override its variable on the block: `style={{ "--fc-keyword-l": "#7c3aed", "--fc-keyword-d": "#a78bfa" }}`.
+
+PHP is read as a **snippet**: code with no `<?php` open tag (`use Foo\Bar;`) is highlighted as PHP, and a `?>` switches to HTML. Code that opens with `<?php` highlights exactly as a file does.
 
 ## Security
 
-Code is escaped before it reaches `dangerouslySetInnerHTML`: `highlightCode` escapes `&`, `<` and `>` in every slice it emits, highlighted or plain, and token colours pass an allow-list. `<script>` in `code` renders as the text `<script>`.
+Code is escaped before it reaches `dangerouslySetInnerHTML`: `highlightCodeWithVariables` escapes `&`, `<` and `>` in every slice it emits, highlighted or plain, and writes no colour value into the token markup; the palette values on the root pass `fancy-file-commons`' colour allow-list. `<script>` in `code` renders as the text `<script>`.
 
 ## Server rendering
 
-No `window`, `document` or `navigator` access during render. Tested with `renderToString` with all three undefined.
+No `window`, `document` or `navigator` access during render. Tested with `renderToString` with all three undefined. The server output is identical to the client's in both themes.
 
 ## Agent handles