@mitcsutt/kiln-ui 0.8.0 → 0.9.0

package/dist/components/display/CodeBlock/CodeBlock.d.ts

@@ -40,14 +40,15 @@ export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLElement>, 'title
  * @remarks
  * `CodeBlock` shows code: a snippet in an article, a command, a config example. It's a plain
  * surface with an optional title bar, never fake window chrome. It's plain unless you pass
- * `tokens`: `highlight` from `@mitcsutt/kiln-ui/highlight` turns JavaScript, JSX, TypeScript and
- * TSX into tokens, coloured from the theme. Every code sample in these docs is a `CodeBlock`.
+ * `tokens`: `highlight` from `@mitcsutt/kiln-ui/highlight` turns JavaScript, JSX, TypeScript,
+ * TSX, shell, JSON, YAML and diffs into tokens, coloured from the theme. Every code sample in these docs is a `CodeBlock`.
  *
  * ## Highlighting
  *
  * `highlight(code, language)` resolves to the tokens for `code`, or to `undefined` for a language
- * other than `js`, `jsx`, `ts` or `tsx` (or `javascript` and `typescript`), which `CodeBlock`
- * shows as plain code. It runs [Shiki](https://shiki.style), an optional peer dependency, so
+ * it doesn't know, which `CodeBlock` shows as plain code. It knows `js`, `jsx`, `ts` and `tsx`
+ * (or `javascript` and `typescript`), `bash` (or `sh`, `shell`, `shellscript` and `zsh`), `json`,
+ * `yaml` (or `yml`) and `diff`, in any case. It runs [Shiki](https://shiki.style), an optional peer dependency, so
  * install `shiki` to use it. The main `@mitcsutt/kiln-ui` entry never loads it.
  *
  * Keywords and tags take the accent, strings, constants, functions and types take the theme's

package/dist/components/display/CodeBlock/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","names":["styles","CodeBlock_module_default","CodeBlock","forwardRef","rest","clipboard","useClipboard","copy","captionId","useId","source","trimTrailingNewlines","code","lines","lineTokens","tokens","line","token","i","highlighted","highlightLines","hasHeader","title","language","copyable","cx","className","wrap","showLineNumbers","Button","jsx","CheckIcon","CopyIcon","copyLabel","j"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { CheckIcon, CopyIcon } from '#icons'\nimport { Button } from '#components/actions/Button'\nimport { useClipboard } from '#components/actions/CopyButton'\nimport { cx } from '#utils/cx'\nimport { trimTrailingNewlines } from '#utils/newlines'\nimport styles from './CodeBlock.module.css'\n\n/**\n * What a piece of highlighted source is. Each kind is coloured from the theme's own tokens, so\n * highlighted code follows the theme and the colour mode.\n */\nexport type CodeTokenType =\n  | 'keyword'\n  | 'string'\n  | 'comment'\n  | 'constant'\n  | 'function'\n  | 'type'\n  | 'tag'\n  | 'attribute'\n  | 'punctuation'\n\n/** A run of source text and its kind. A token with no `type` is plain text. */\nexport interface CodeToken {\n  content: string\n  type?: CodeTokenType\n}\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** The source, verbatim. Trailing newlines are trimmed. */\n  code: string\n  /** Shown as a label (\"TypeScript\", \"bash\"). It doesn't turn on highlighting: `tokens` does. */\n  language?: string\n  /**\n   * Syntax highlighting for `code`: one array of tokens per line, as `highlight` from\n   * `@mitcsutt/kiln-ui/highlight` returns them. Without it, or when the tokens don't spell out\n   * `code` line for line (say, tokens from a previous `code`), the code is plain.\n   */\n  tokens?: CodeToken[][]\n  /** Filename or caption shown in the header: `src/queries/keys.ts`. */\n  title?: ReactNode\n  /** Number the lines in a gutter (not copied with a selection). */\n  showLineNumbers?: boolean\n  /** 1-based line numbers to mark with the theme's highlight colour. */\n  highlightLines?: number[]\n  /** Show a copy button. Default `true`. */\n  copyable?: boolean\n  /** Wrap long lines instead of scrolling sideways. */\n  wrap?: boolean\n  /** Accessible name of the copy button. Default \"Copy code\". */\n  copyLabel?: string\n}\n\n/**\n * A block of source with an optional filename bar, line numbers, highlighted lines and a copy\n * button.\n *\n * @remarks\n * `CodeBlock` shows code: a snippet in an article, a command, a config example. It's a plain\n * surface with an optional title bar, never fake window chrome. It's plain unless you pass\n * `tokens`: `highlight` from `@mitcsutt/kiln-ui/highlight` turns JavaScript, JSX, TypeScript and\n * TSX into tokens, coloured from the theme. Every code sample in these docs is a `CodeBlock`.\n *\n * ## Highlighting\n *\n * `highlight(code, language)` resolves to the tokens for `code`, or to `undefined` for a language\n * other than `js`, `jsx`, `ts` or `tsx` (or `javascript` and `typescript`), which `CodeBlock`\n * shows as plain code. It runs [Shiki](https://shiki.style), an optional peer dependency, so\n * install `shiki` to use it. The main `@mitcsutt/kiln-ui` entry never loads it.\n *\n * Keywords and tags take the accent, strings, constants, functions and types take the theme's\n * tones, and comments and punctuation are muted. A custom theme needs no code palette of its own.\n *\n * The tokens are plain data, so highlight wherever the code is ready. In a server component or\n * at build time, `await` it and pass the tokens to the client component that renders the\n * `CodeBlock`, and the browser downloads no highlighter. In the browser, call it in an effect, as\n * in the example above: Shiki and the grammar load on the first call.\n *\n * ```tsx\n * import { highlight } from '@mitcsutt/kiln-ui/highlight'\n *\n * export async function Snippet({ source }: { source: string }) {\n *   const tokens = await highlight(source, 'tsx')\n *   return <SnippetBlock code={source} tokens={tokens} />\n * }\n * ```\n *\n * @privateRemarks\n * A block of source: a snippet in a blog post, a command in a README, a config example.\n * A plain surface with an optional filename bar — no fake window chrome.\n *\n * <CodeBlock title=\"queries/keys.ts\" language=\"TypeScript\" code={source} highlightLines={[3, 4]} />\n */\nexport const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language,\n    tokens,\n    title,\n    showLineNumbers = false,\n    highlightLines,\n    copyable = true,\n    wrap = false,\n    copyLabel = 'Copy code',\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const clipboard = useClipboard({ timeout: 2000 })\n  const copy = clipboard.copied ? 'copied' : clipboard.error ? 'failed' : 'idle'\n  const captionId = useId()\n  const source = trimTrailingNewlines(code)\n  const lines = source.split('\\n')\n  const lineTokens =\n    tokens?.length === lines.length &&\n    tokens.every((line, i) => line.map((token) => token.content).join('') === lines[i])\n      ? tokens\n      : undefined\n  const highlighted = new Set(highlightLines)\n  const hasHeader = Boolean(title) || Boolean(language) || copyable\n\n  return (\n    <figure\n      ref={ref}\n      className={cx(styles.codeBlock, className)}\n      data-kiln-component=\"\"\n      data-wrap={wrap || undefined}\n      data-line-numbers={showLineNumbers || undefined}\n      aria-labelledby={title ? captionId : undefined}\n      {...rest}\n    >\n      {hasHeader ? (\n        <figcaption className={styles.header}>\n          {title ? (\n            <span id={captionId} className={styles.title}>\n              {title}\n            </span>\n          ) : null}\n          {language ? <span className={styles.language}>{language}</span> : null}\n          {copyable ? (\n            <Button\n              variant=\"ghost\"\n              tone=\"neutral\"\n              size=\"sm\"\n              className={styles.copy}\n              leadingIcon={copy === 'copied' ? <CheckIcon /> : <CopyIcon />}\n              aria-label={copyLabel}\n              onClick={() => {\n                void clipboard.copy(source)\n              }}\n              data-state={copy}\n            >\n              {copy === 'copied' ? 'Copied' : copy === 'failed' ? 'Copy failed' : 'Copy'}\n            </Button>\n          ) : null}\n        </figcaption>\n      ) : null}\n      {/* A scrollable region must be reachable by keyboard. */}\n      <pre className={styles.pre} tabIndex={0}>\n        <code className={styles.code}>\n          {lines.map((line, i) => (\n            <span\n              key={i}\n              className={styles.line}\n              data-line={showLineNumbers ? i + 1 : undefined}\n              data-highlighted={highlighted.has(i + 1) || undefined}\n            >\n              {lineTokens?.[i]\n                ? lineTokens[i].map((token, j) =>\n                    token.type ? (\n                      <span key={j} className={styles.token} data-token={token.type}>\n                        {token.content}\n                      </span>\n                    ) : (\n                      token.content\n                    ),\n                  )\n                : line}\n              {i < lines.length - 1 ? '\\n' : null}\n            </span>\n          ))}\n        </code>\n      </pre>\n      {copyable ? (\n        <span className={styles.visuallyHidden} role=\"status\" aria-live=\"polite\">\n          {copy === 'copied' ? 'Copied to clipboard' : copy === 'failed' ? 'Copy failed' : ''}\n        </span>\n      ) : null}\n    </figure>\n  )\n})\n"],"mappings":";;;;;;;;;AA8FA,IAAaE,IAAYC,EAAwC,SAC/D,EACE,SACA,aACA,WACA,UACA,qBAAkB,IAClB,mBACA,cAAW,IACX,UAAO,IACP,eAAY,aACZ,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAYC,EAAa,EAAE,SAAS,IAAK,CAAC,GAC1CC,IAAOF,EAAU,SAAS,WAAWA,EAAU,QAAQ,WAAW,QAClEG,IAAYC,EAAM,GAClBC,IAASC,EAAqBC,CAAI,GAClCC,IAAQH,EAAO,MAAM,IAAI,GACzBI,IACJC,GAAQ,WAAWF,EAAM,UACzBE,EAAO,OAAO,GAAM,MAAMC,EAAK,KAAK,MAAUC,EAAM,OAAO,CAAC,CAAC,KAAK,EAAE,MAAMJ,EAAMK,EAAE,IAC9EH,IACA,KAAA,GACAI,IAAc,IAAI,IAAIC,CAAc,GACpCC,IAAY,EAAQC,KAAU,EAAQC,KAAaC;CAEzD,OACE,kBAAC,UAAD;EACO;EACL,WAAWC,EAAGzB,EAAO,WAAW0B,CAAS;EACzC,uBAAoB;EACpB,aAAWC,KAAQ,KAAA;EACnB,qBAAmBC,KAAmB,KAAA;EACtC,mBAAiBN,IAAQd,IAAY,KAAA;EACrC,GAAIJ;EAPN,UAAA;GASGiB,IACC,kBAAC,cAAD;IAAY,WAAWrB,EAAO;IAA9B,UAAA;KACGsB,IACC,kBAAC,QAAD;MAAM,IAAId;MAAW,WAAWR,EAAO;MACpC,UAAAsB;KACG,CAAA,IACJ;KACHC,IAAW,kBAAC,QAAD;MAAM,WAAWvB,EAAO;MAAW,UAAAuB;KAAe,CAAA,IAAI;KACjEC,IACC,kBAACK,GAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAK;MACL,WAAW7B,EAAO;MAClB,aAAiC8B,EAApBvB,MAAS,WAAYwB,IAAgBC,GAAjB,CAAY,CAAe;MAC5D,cAAYC;MACZ,eAAe;OACb,EAAe,KAAKvB,CAAM;MAC5B;MACA,cAAYH;MAEX,UAAAA,MAAS,WAAW,WAAWA,MAAS,WAAW,gBAAgB;KAC9D,CAAA,IACN;IACM;GACV,CAAA,IAAA;GAEJ,kBAAC,OAAD;IAAK,WAAWP,EAAO;IAAK,UAAU;IACpC,UAAA,kBAAC,QAAD;KAAM,WAAWA,EAAO;KACrB,UAAAa,EAAM,KAAK,GAAM,MAChB,kBAAC,QAAD;MAEE,WAAWb,EAAO;MAClB,aAAW4B,IAAkBV,IAAI,IAAI,KAAA;MACrC,oBAAkBC,EAAY,IAAID,IAAI,CAAC,KAAK,KAAA;MAJ9C,UAAA,CAMGJ,IAAaI,KACVJ,EAAWI,EAAE,CAAC,KAAK,GAAO,MACxBD,EAAM,OACJ,kBAAC,QAAD;OAAc,WAAWjB,EAAO;OAAO,cAAYiB,EAAM;OACtD,UAAAA,EAAM;MACH,GAFKiB,CAEL,IAENjB,EAAM,OAEV,IACAD,GACHE,IAAIL,EAAM,SAAS,IAAI,OAAO,IAC3B;KAjBC,GAAAK,CAiBD,CACP;IACG,CAAA;GACH,CAAA;GACJM,IACC,kBAAC,QAAD;IAAM,WAAWxB,EAAO;IAAgB,MAAK;IAAS,aAAU;IAC7D,UAAAO,MAAS,WAAW,wBAAwBA,MAAS,WAAW,gBAAgB;GAC7E,CAAA,IACJ;EACE;;AAEZ,CAAC"}
+{"version":3,"file":"CodeBlock.js","names":["styles","CodeBlock_module_default","CodeBlock","forwardRef","rest","clipboard","useClipboard","copy","captionId","useId","source","trimTrailingNewlines","code","lines","lineTokens","tokens","line","token","i","highlighted","highlightLines","hasHeader","title","language","copyable","cx","className","wrap","showLineNumbers","Button","jsx","CheckIcon","CopyIcon","copyLabel","j"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { CheckIcon, CopyIcon } from '#icons'\nimport { Button } from '#components/actions/Button'\nimport { useClipboard } from '#components/actions/CopyButton'\nimport { cx } from '#utils/cx'\nimport { trimTrailingNewlines } from '#utils/newlines'\nimport styles from './CodeBlock.module.css'\n\n/**\n * What a piece of highlighted source is. Each kind is coloured from the theme's own tokens, so\n * highlighted code follows the theme and the colour mode.\n */\nexport type CodeTokenType =\n  | 'keyword'\n  | 'string'\n  | 'comment'\n  | 'constant'\n  | 'function'\n  | 'type'\n  | 'tag'\n  | 'attribute'\n  | 'punctuation'\n\n/** A run of source text and its kind. A token with no `type` is plain text. */\nexport interface CodeToken {\n  content: string\n  type?: CodeTokenType\n}\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** The source, verbatim. Trailing newlines are trimmed. */\n  code: string\n  /** Shown as a label (\"TypeScript\", \"bash\"). It doesn't turn on highlighting: `tokens` does. */\n  language?: string\n  /**\n   * Syntax highlighting for `code`: one array of tokens per line, as `highlight` from\n   * `@mitcsutt/kiln-ui/highlight` returns them. Without it, or when the tokens don't spell out\n   * `code` line for line (say, tokens from a previous `code`), the code is plain.\n   */\n  tokens?: CodeToken[][]\n  /** Filename or caption shown in the header: `src/queries/keys.ts`. */\n  title?: ReactNode\n  /** Number the lines in a gutter (not copied with a selection). */\n  showLineNumbers?: boolean\n  /** 1-based line numbers to mark with the theme's highlight colour. */\n  highlightLines?: number[]\n  /** Show a copy button. Default `true`. */\n  copyable?: boolean\n  /** Wrap long lines instead of scrolling sideways. */\n  wrap?: boolean\n  /** Accessible name of the copy button. Default \"Copy code\". */\n  copyLabel?: string\n}\n\n/**\n * A block of source with an optional filename bar, line numbers, highlighted lines and a copy\n * button.\n *\n * @remarks\n * `CodeBlock` shows code: a snippet in an article, a command, a config example. It's a plain\n * surface with an optional title bar, never fake window chrome. It's plain unless you pass\n * `tokens`: `highlight` from `@mitcsutt/kiln-ui/highlight` turns JavaScript, JSX, TypeScript,\n * TSX, shell, JSON, YAML and diffs into tokens, coloured from the theme. Every code sample in these docs is a `CodeBlock`.\n *\n * ## Highlighting\n *\n * `highlight(code, language)` resolves to the tokens for `code`, or to `undefined` for a language\n * it doesn't know, which `CodeBlock` shows as plain code. It knows `js`, `jsx`, `ts` and `tsx`\n * (or `javascript` and `typescript`), `bash` (or `sh`, `shell`, `shellscript` and `zsh`), `json`,\n * `yaml` (or `yml`) and `diff`, in any case. It runs [Shiki](https://shiki.style), an optional peer dependency, so\n * install `shiki` to use it. The main `@mitcsutt/kiln-ui` entry never loads it.\n *\n * Keywords and tags take the accent, strings, constants, functions and types take the theme's\n * tones, and comments and punctuation are muted. A custom theme needs no code palette of its own.\n *\n * The tokens are plain data, so highlight wherever the code is ready. In a server component or\n * at build time, `await` it and pass the tokens to the client component that renders the\n * `CodeBlock`, and the browser downloads no highlighter. In the browser, call it in an effect, as\n * in the example above: Shiki and the grammar load on the first call.\n *\n * ```tsx\n * import { highlight } from '@mitcsutt/kiln-ui/highlight'\n *\n * export async function Snippet({ source }: { source: string }) {\n *   const tokens = await highlight(source, 'tsx')\n *   return <SnippetBlock code={source} tokens={tokens} />\n * }\n * ```\n *\n * @privateRemarks\n * A block of source: a snippet in a blog post, a command in a README, a config example.\n * A plain surface with an optional filename bar — no fake window chrome.\n *\n * <CodeBlock title=\"queries/keys.ts\" language=\"TypeScript\" code={source} highlightLines={[3, 4]} />\n */\nexport const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language,\n    tokens,\n    title,\n    showLineNumbers = false,\n    highlightLines,\n    copyable = true,\n    wrap = false,\n    copyLabel = 'Copy code',\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const clipboard = useClipboard({ timeout: 2000 })\n  const copy = clipboard.copied ? 'copied' : clipboard.error ? 'failed' : 'idle'\n  const captionId = useId()\n  const source = trimTrailingNewlines(code)\n  const lines = source.split('\\n')\n  const lineTokens =\n    tokens?.length === lines.length &&\n    tokens.every((line, i) => line.map((token) => token.content).join('') === lines[i])\n      ? tokens\n      : undefined\n  const highlighted = new Set(highlightLines)\n  const hasHeader = Boolean(title) || Boolean(language) || copyable\n\n  return (\n    <figure\n      ref={ref}\n      className={cx(styles.codeBlock, className)}\n      data-kiln-component=\"\"\n      data-wrap={wrap || undefined}\n      data-line-numbers={showLineNumbers || undefined}\n      aria-labelledby={title ? captionId : undefined}\n      {...rest}\n    >\n      {hasHeader ? (\n        <figcaption className={styles.header}>\n          {title ? (\n            <span id={captionId} className={styles.title}>\n              {title}\n            </span>\n          ) : null}\n          {language ? <span className={styles.language}>{language}</span> : null}\n          {copyable ? (\n            <Button\n              variant=\"ghost\"\n              tone=\"neutral\"\n              size=\"sm\"\n              className={styles.copy}\n              leadingIcon={copy === 'copied' ? <CheckIcon /> : <CopyIcon />}\n              aria-label={copyLabel}\n              onClick={() => {\n                void clipboard.copy(source)\n              }}\n              data-state={copy}\n            >\n              {copy === 'copied' ? 'Copied' : copy === 'failed' ? 'Copy failed' : 'Copy'}\n            </Button>\n          ) : null}\n        </figcaption>\n      ) : null}\n      {/* A scrollable region must be reachable by keyboard. */}\n      <pre className={styles.pre} tabIndex={0}>\n        <code className={styles.code}>\n          {lines.map((line, i) => (\n            <span\n              key={i}\n              className={styles.line}\n              data-line={showLineNumbers ? i + 1 : undefined}\n              data-highlighted={highlighted.has(i + 1) || undefined}\n            >\n              {lineTokens?.[i]\n                ? lineTokens[i].map((token, j) =>\n                    token.type ? (\n                      <span key={j} className={styles.token} data-token={token.type}>\n                        {token.content}\n                      </span>\n                    ) : (\n                      token.content\n                    ),\n                  )\n                : line}\n              {i < lines.length - 1 ? '\\n' : null}\n            </span>\n          ))}\n        </code>\n      </pre>\n      {copyable ? (\n        <span className={styles.visuallyHidden} role=\"status\" aria-live=\"polite\">\n          {copy === 'copied' ? 'Copied to clipboard' : copy === 'failed' ? 'Copy failed' : ''}\n        </span>\n      ) : null}\n    </figure>\n  )\n})\n"],"mappings":";;;;;;;;;AA+FA,IAAaE,IAAYC,EAAwC,SAC/D,EACE,SACA,aACA,WACA,UACA,qBAAkB,IAClB,mBACA,cAAW,IACX,UAAO,IACP,eAAY,aACZ,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAYC,EAAa,EAAE,SAAS,IAAK,CAAC,GAC1CC,IAAOF,EAAU,SAAS,WAAWA,EAAU,QAAQ,WAAW,QAClEG,IAAYC,EAAM,GAClBC,IAASC,EAAqBC,CAAI,GAClCC,IAAQH,EAAO,MAAM,IAAI,GACzBI,IACJC,GAAQ,WAAWF,EAAM,UACzBE,EAAO,OAAO,GAAM,MAAMC,EAAK,KAAK,MAAUC,EAAM,OAAO,CAAC,CAAC,KAAK,EAAE,MAAMJ,EAAMK,EAAE,IAC9EH,IACA,KAAA,GACAI,IAAc,IAAI,IAAIC,CAAc,GACpCC,IAAY,EAAQC,KAAU,EAAQC,KAAaC;CAEzD,OACE,kBAAC,UAAD;EACO;EACL,WAAWC,EAAGzB,EAAO,WAAW0B,CAAS;EACzC,uBAAoB;EACpB,aAAWC,KAAQ,KAAA;EACnB,qBAAmBC,KAAmB,KAAA;EACtC,mBAAiBN,IAAQd,IAAY,KAAA;EACrC,GAAIJ;EAPN,UAAA;GASGiB,IACC,kBAAC,cAAD;IAAY,WAAWrB,EAAO;IAA9B,UAAA;KACGsB,IACC,kBAAC,QAAD;MAAM,IAAId;MAAW,WAAWR,EAAO;MACpC,UAAAsB;KACG,CAAA,IACJ;KACHC,IAAW,kBAAC,QAAD;MAAM,WAAWvB,EAAO;MAAW,UAAAuB;KAAe,CAAA,IAAI;KACjEC,IACC,kBAACK,GAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAK;MACL,WAAW7B,EAAO;MAClB,aAAiC8B,EAApBvB,MAAS,WAAYwB,IAAgBC,GAAjB,CAAY,CAAe;MAC5D,cAAYC;MACZ,eAAe;OACb,EAAe,KAAKvB,CAAM;MAC5B;MACA,cAAYH;MAEX,UAAAA,MAAS,WAAW,WAAWA,MAAS,WAAW,gBAAgB;KAC9D,CAAA,IACN;IACM;GACV,CAAA,IAAA;GAEJ,kBAAC,OAAD;IAAK,WAAWP,EAAO;IAAK,UAAU;IACpC,UAAA,kBAAC,QAAD;KAAM,WAAWA,EAAO;KACrB,UAAAa,EAAM,KAAK,GAAM,MAChB,kBAAC,QAAD;MAEE,WAAWb,EAAO;MAClB,aAAW4B,IAAkBV,IAAI,IAAI,KAAA;MACrC,oBAAkBC,EAAY,IAAID,IAAI,CAAC,KAAK,KAAA;MAJ9C,UAAA,CAMGJ,IAAaI,KACVJ,EAAWI,EAAE,CAAC,KAAK,GAAO,MACxBD,EAAM,OACJ,kBAAC,QAAD;OAAc,WAAWjB,EAAO;OAAO,cAAYiB,EAAM;OACtD,UAAAA,EAAM;MACH,GAFKiB,CAEL,IAENjB,EAAM,OAEV,IACAD,GACHE,IAAIL,EAAM,SAAS,IAAI,OAAO,IAC3B;KAjBC,GAAAK,CAiBD,CACP;IACG,CAAA;GACH,CAAA;GACJM,IACC,kBAAC,QAAD;IAAM,WAAWxB,EAAO;IAAgB,MAAK;IAAS,aAAU;IAC7D,UAAAO,MAAS,WAAW,wBAAwBA,MAAS,WAAW,gBAAgB;GAC7E,CAAA,IACJ;EACE;;AAEZ,CAAC"}

package/dist/components/display/CodeBlock/CodeBlock.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.module.js","names":["codeBlock","header","title","language","copy","pre","code","line","token","visuallyHidden","CodeBlock_module_default"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --codeblock-bg          default var(--color-surface-sunken)\n *   --codeblock-radius      default var(--radius-surface)\n *   --codeblock-size        default var(--text-xs)\n *   --codeblock-highlight   highlighted line fill, default var(--color-highlight)\n *\n * One edge: a hairline. The header is separated by the same rule, not a fill.\n */\n/* Zero-specificity reset, so a surrounding flow (Prose, Stack) or a className can space it. */\n:where(.codeBlock) {\n  margin: 0;\n}\n.codeBlock {\n  --_pad: var(--space-4);\n\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  overflow: hidden;\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--codeblock-radius, var(--radius-surface));\n  background: var(--codeblock-bg, var(--color-surface-sunken));\n  color: var(--color-ink);\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: calc(var(--control-sm) + var(--space-2));\n  padding-inline: var(--_pad) var(--space-2);\n  border-block-end: var(--border-width) solid var(--color-line);\n  font-family: var(--font-text);\n  font-size: var(--text-xs);\n  line-height: var(--leading-snug);\n}\n\n.title {\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--color-ink);\n  font-weight: var(--label-weight);\n}\n\n.language {\n  color: var(--color-ink-subtle);\n}\n.title + .language::before {\n  content: '·';\n  margin-inline-end: var(--space-3);\n}\n\n.copy {\n  margin-inline-start: auto;\n  color: var(--color-ink-muted);\n}\n.copy[data-state='copied'] {\n  color: var(--tone-positive-text);\n}\n.copy[data-state='failed'] {\n  color: var(--tone-critical-text);\n}\n\n.pre {\n  margin: 0;\n  padding-block: var(--space-3);\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-stretch: var(--mono-stretch);\n  font-size: var(--codeblock-size, var(--text-xs));\n  font-variant-ligatures: none;\n  line-height: 1.7;\n  tab-size: 2;\n  white-space: pre;\n  scrollbar-width: thin;\n}\n.pre:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n.code {\n  display: inline-block;\n  min-inline-size: 100%;\n  font: inherit;\n}\n\n.line {\n  display: block;\n  position: relative;\n  padding-inline: var(--_pad);\n}\n\n.codeBlock[data-line-numbers] .line {\n  padding-inline-start: calc(var(--_pad) + 4ch);\n}\n.codeBlock[data-line-numbers] .line::before {\n  content: attr(data-line);\n  position: absolute;\n  inset-inline-start: 0;\n  inline-size: calc(var(--_pad) + 2.5ch);\n  padding-inline-end: 1ch;\n  text-align: end;\n  color: var(--color-ink-subtle);\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n}\n\n/*\n * Highlighted tokens (the `tokens` prop) take the theme's own text colours, so a theme needs no\n * code palette of its own: keywords in the accent, strings, constants and names in the tones.\n */\n.token[data-token='keyword'],\n.token[data-token='tag'] {\n  color: var(--color-accent-text);\n}\n.token[data-token='string'] {\n  color: var(--tone-positive-text);\n}\n.token[data-token='constant'] {\n  color: var(--tone-caution-text);\n}\n.token[data-token='function'],\n.token[data-token='type'] {\n  color: var(--tone-info-text);\n}\n.token[data-token='attribute'],\n.token[data-token='punctuation'] {\n  color: var(--color-ink-muted);\n}\n.token[data-token='comment'] {\n  color: var(--color-ink-subtle);\n}\n\n.line[data-highlighted] {\n  background: var(--codeblock-highlight, var(--color-highlight));\n  color: var(--color-highlight-ink);\n}\n.line[data-highlighted]::before,\n.line[data-highlighted] .token {\n  color: inherit;\n}\n\n.codeBlock[data-wrap] .pre {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.codeBlock[data-wrap] .code {\n  display: block;\n}\n\n.visuallyHidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"CodeBlock.module.js","names":["codeBlock","header","title","language","copy","pre","code","line","token","visuallyHidden","CodeBlock_module_default"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --codeblock-bg          default var(--color-surface-sunken)\n *   --codeblock-radius      default var(--radius-surface)\n *   --codeblock-size        default var(--text-xs)\n *   --codeblock-highlight   highlighted line fill, default var(--color-highlight)\n *\n * One edge: a hairline. The header is separated by the same rule, not a fill.\n */\n/* Zero-specificity reset, so a surrounding flow (Prose, Stack) or a className can space it. */\n:where(.codeBlock) {\n  margin: 0;\n}\n.codeBlock {\n  --_pad: var(--space-4);\n\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  overflow: hidden;\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--codeblock-radius, var(--radius-surface));\n  background: var(--codeblock-bg, var(--color-surface-sunken));\n  color: var(--color-ink);\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: calc(var(--control-sm) + var(--space-2));\n  padding-inline: var(--_pad) var(--space-2);\n  border-block-end: var(--border-width) solid var(--color-line);\n  font-family: var(--font-text);\n  font-size: var(--text-xs);\n  line-height: var(--leading-snug);\n}\n\n.title {\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--color-ink);\n  font-weight: var(--label-weight);\n}\n\n.language {\n  color: var(--color-ink-subtle);\n}\n.title + .language::before {\n  content: '·';\n  margin-inline-end: var(--space-3);\n}\n\n/* Scoped under .header so it outranks Button's .button whatever order the CSS chunks load in. */\n.header .copy {\n  margin-inline-start: auto;\n  color: var(--color-ink-muted);\n}\n.header .copy[data-state='copied'] {\n  color: var(--tone-positive-text);\n}\n.header .copy[data-state='failed'] {\n  color: var(--tone-critical-text);\n}\n\n.pre {\n  margin: 0;\n  padding-block: var(--space-3);\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-stretch: var(--mono-stretch);\n  font-size: var(--codeblock-size, var(--text-xs));\n  font-variant-ligatures: none;\n  line-height: 1.7;\n  tab-size: 2;\n  white-space: pre;\n  scrollbar-width: thin;\n}\n.pre:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n.code {\n  display: inline-block;\n  min-inline-size: 100%;\n  font: inherit;\n}\n\n.line {\n  display: block;\n  position: relative;\n  padding-inline: var(--_pad);\n}\n\n.codeBlock[data-line-numbers] .line {\n  padding-inline-start: calc(var(--_pad) + 4ch);\n}\n.codeBlock[data-line-numbers] .line::before {\n  content: attr(data-line);\n  position: absolute;\n  inset-inline-start: 0;\n  inline-size: calc(var(--_pad) + 2.5ch);\n  padding-inline-end: 1ch;\n  text-align: end;\n  color: var(--color-ink-subtle);\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n}\n\n/*\n * Highlighted tokens (the `tokens` prop) take the theme's own text colours, so a theme needs no\n * code palette of its own: keywords in the accent, strings, constants and names in the tones.\n */\n.token[data-token='keyword'],\n.token[data-token='tag'] {\n  color: var(--color-accent-text);\n}\n.token[data-token='string'] {\n  color: var(--tone-positive-text);\n}\n.token[data-token='constant'] {\n  color: var(--tone-caution-text);\n}\n.token[data-token='function'],\n.token[data-token='type'] {\n  color: var(--tone-info-text);\n}\n.token[data-token='attribute'],\n.token[data-token='punctuation'] {\n  color: var(--color-ink-muted);\n}\n.token[data-token='comment'] {\n  color: var(--color-ink-subtle);\n}\n\n.line[data-highlighted] {\n  background: var(--codeblock-highlight, var(--color-highlight));\n  color: var(--color-highlight-ink);\n}\n.line[data-highlighted]::before,\n.line[data-highlighted] .token {\n  color: inherit;\n}\n\n.codeBlock[data-wrap] .pre {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.codeBlock[data-wrap] .code {\n  display: block;\n}\n\n.visuallyHidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/dist/components/display/TreeTable/TreeTable.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeTable.module.js","names":["treeTable","row","treeCellContent","toggle","chevron","TreeTable_module_default"],"sources":["../../../../src/components/display/TreeTable/TreeTable.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --tree-table-indent  default var(--space-5) — how far each level steps in\n *\n * The table itself is styled by Table; this file adds the indent, the toggle and the row focus.\n */\n.treeTable {\n  --_indent: var(--tree-table-indent, var(--space-5));\n}\n\n.row:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n.treeCellContent {\n  --_level: 0;\n  margin-inline-start: calc(var(--_level) * var(--_indent));\n  display: inline-flex;\n  align-items: baseline;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.toggle {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  inline-size: 1.25rem;\n  block-size: 1.25rem;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: var(--color-ink-muted);\n  cursor: pointer;\n  align-self: center;\n}\n\n.toggle[data-leaf] {\n  visibility: hidden;\n}\n\n.chevron {\n  inline-size: 1rem;\n  block-size: 1rem;\n  transition: transform var(--dur-3) var(--ease-out);\n}\n\n.row[aria-expanded='true'] .chevron {\n  transform: rotate(90deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TreeTable.module.js","names":["treeTable","row","treeCellContent","toggle","chevron","TreeTable_module_default"],"sources":["../../../../src/components/display/TreeTable/TreeTable.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --tree-table-indent  default var(--space-5) — how far each level steps in\n *\n * The table itself is styled by Table; this file adds the indent, the toggle and the row focus.\n */\n.treeTable {\n  --_indent: var(--tree-table-indent, var(--space-5));\n}\n\n.row:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n.treeCellContent {\n  --_level: 0;\n  margin-inline-start: calc(var(--_level) * var(--_indent));\n  display: inline-flex;\n  align-items: baseline;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.toggle {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  inline-size: 1.25rem;\n  block-size: 1.25rem;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: var(--color-ink-muted);\n  cursor: pointer;\n  align-self: center;\n}\n\n.toggle[data-leaf] {\n  visibility: hidden;\n}\n\n/* Scoped under .toggle so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.toggle .chevron {\n  inline-size: 1rem;\n  block-size: 1rem;\n  transition: transform var(--dur-3) var(--ease-out);\n}\n\n.row[aria-expanded='true'] .chevron {\n  transform: rotate(90deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toggle .chevron {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/inputs/Checkbox/Checkbox.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.module.js","names":["checkbox","indicator","check","dash","Checkbox_module_default"],"sources":["../../../../src/components/inputs/Checkbox/Checkbox.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --checkbox-radius          default calc(var(--radius-field) * 0.4)\n *   --control-checked-bg       default var(--color-accent)   (shared with Radio, Switch)\n *   --control-checked-border   default var(--color-accent)\n *   --control-checked-ink      default var(--color-accent-ink)\n *   --control-border           default var(--color-line-control) (unchecked edge, ≥ 3:1)\n *   --control-shadow           default var(--shadow-active) — the printed offset in Fiesta, none elsewhere\n */\n.checkbox {\n  --_s: calc(var(--control-sm) * 0.5625);\n  /* An unchecked box is identified only by its edge, so it needs 3:1 (WCAG 1.4.11):\n     line-strong alone is a ~2:1 hairline in the quieter themes. */\n  --_border: var(--control-border, var(--color-line-control));\n\n  all: unset;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--_s);\n  block-size: var(--_s);\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--checkbox-radius, calc(var(--radius-field) * 0.4));\n  background-color: var(--color-surface);\n  color: var(--control-checked-ink, var(--color-accent-ink));\n  box-shadow: var(--control-shadow, var(--shadow-active));\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n.checkbox[data-size='sm'] {\n  --_s: calc(var(--control-sm) * 0.5);\n}\n.checkbox[data-size='lg'] {\n  --_s: calc(var(--control-sm) * 0.6875);\n}\n\n/* Bigger hit area than the glyph, without changing layout. */\n.checkbox::before {\n  content: '';\n  position: absolute;\n  inset: calc(var(--space-2) * -1);\n}\n\n@media (hover: hover) {\n  .checkbox:hover:not([data-disabled], [data-state='checked'], [data-state='indeterminate']) {\n    --_border: color-mix(in oklch, var(--color-line-strong), var(--color-ink) 65%);\n  }\n}\n\n.checkbox[data-state='checked'],\n.checkbox[data-state='indeterminate'] {\n  --_border: var(--control-checked-border, var(--color-accent));\n  background-color: var(--control-checked-bg, var(--color-accent));\n}\n\n.checkbox[data-invalid]:not([data-state='checked']) {\n  --_border: var(--tone-critical);\n}\n\n.checkbox:active:not([data-disabled]) {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: none;\n}\n\n.checkbox:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.checkbox[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.indicator {\n  display: grid;\n  place-items: center;\n  inline-size: 100%;\n  block-size: 100%;\n  animation: tick-in var(--dur-2) var(--ease-spring);\n}\n\n.check,\n.dash {\n  grid-area: 1 / 1;\n  inline-size: 88%;\n  block-size: 88%;\n  stroke-width: calc(var(--icon-stroke) * 1.4);\n}\n.indicator[data-state='checked'] .dash,\n.indicator[data-state='indeterminate'] .check {\n  display: none;\n}\n\n@keyframes tick-in {\n  from {\n    opacity: 0;\n    scale: 0.5;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .indicator {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Checkbox.module.js","names":["checkbox","indicator","check","dash","Checkbox_module_default"],"sources":["../../../../src/components/inputs/Checkbox/Checkbox.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --checkbox-radius          default calc(var(--radius-field) * 0.4)\n *   --control-checked-bg       default var(--color-accent)   (shared with Radio, Switch)\n *   --control-checked-border   default var(--color-accent)\n *   --control-checked-ink      default var(--color-accent-ink)\n *   --control-border           default var(--color-line-control) (unchecked edge, ≥ 3:1)\n *   --control-shadow           default var(--shadow-active) — the printed offset in Fiesta, none elsewhere\n */\n.checkbox {\n  --_s: calc(var(--control-sm) * 0.5625);\n  /* An unchecked box is identified only by its edge, so it needs 3:1 (WCAG 1.4.11):\n     line-strong alone is a ~2:1 hairline in the quieter themes. */\n  --_border: var(--control-border, var(--color-line-control));\n\n  all: unset;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--_s);\n  block-size: var(--_s);\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--checkbox-radius, calc(var(--radius-field) * 0.4));\n  background-color: var(--color-surface);\n  color: var(--control-checked-ink, var(--color-accent-ink));\n  box-shadow: var(--control-shadow, var(--shadow-active));\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n.checkbox[data-size='sm'] {\n  --_s: calc(var(--control-sm) * 0.5);\n}\n.checkbox[data-size='lg'] {\n  --_s: calc(var(--control-sm) * 0.6875);\n}\n\n/* Bigger hit area than the glyph, without changing layout. */\n.checkbox::before {\n  content: '';\n  position: absolute;\n  inset: calc(var(--space-2) * -1);\n}\n\n@media (hover: hover) {\n  .checkbox:hover:not([data-disabled], [data-state='checked'], [data-state='indeterminate']) {\n    --_border: color-mix(in oklch, var(--color-line-strong), var(--color-ink) 65%);\n  }\n}\n\n.checkbox[data-state='checked'],\n.checkbox[data-state='indeterminate'] {\n  --_border: var(--control-checked-border, var(--color-accent));\n  background-color: var(--control-checked-bg, var(--color-accent));\n}\n\n.checkbox[data-invalid]:not([data-state='checked']) {\n  --_border: var(--tone-critical);\n}\n\n.checkbox:active:not([data-disabled]) {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: none;\n}\n\n.checkbox:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.checkbox[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.indicator {\n  display: grid;\n  place-items: center;\n  inline-size: 100%;\n  block-size: 100%;\n  animation: tick-in var(--dur-2) var(--ease-spring);\n}\n\n/* Scoped under .indicator so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.indicator .check,\n.indicator .dash {\n  grid-area: 1 / 1;\n  inline-size: 88%;\n  block-size: 88%;\n  stroke-width: calc(var(--icon-stroke) * 1.4);\n}\n.indicator[data-state='checked'] .dash,\n.indicator[data-state='indeterminate'] .check {\n  display: none;\n}\n\n@keyframes tick-in {\n  from {\n    opacity: 0;\n    scale: 0.5;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .indicator {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/components/inputs/Combobox/Combobox.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.module.js","names":["root","values","chips","chip","input","trailing","spinner","clear","chevron","popup","listbox","group","option","groupLabel","optionText","optionLabel","optionDescription","box","check","message","Combobox_module_default"],"sources":["../../../../src/components/inputs/Combobox/Combobox.module.css"],"sourcesContent":["/*\n * The box (border, radius, sizes, states) comes from inputs/internal/control.module.css;\n * this file lays out the chips, the input and the trailing controls inside it, and the\n * floating list.\n *\n * Component tokens (themes may set any of these on [data-theme]):\n *   --combobox-list-border       default var(--color-line-strong)\n *   --combobox-option-highlight  default var(--color-surface-sunken) — keyboard/hover row\n *   --combobox-option-check      default var(--color-accent-text)\n */\n\n/* ── Box ── */\n.root {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  inline-size: 100%;\n  padding-inline: var(--_px) calc(var(--_px) * 0.75);\n  cursor: text;\n}\n.root[data-multiple] {\n  padding-block: calc(var(--space-1) * 0.75);\n}\n.root:focus-within {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n.root[data-disabled] {\n  cursor: not-allowed;\n}\n\n.values {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.chips {\n  display: contents;\n}\n\n.chip {\n  max-inline-size: 100%;\n}\n\n.input {\n  flex: 1;\n  align-self: stretch;\n  min-inline-size: 6ch;\n  min-block-size: calc(var(--_h) - 2 * var(--border-width));\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-overflow: ellipsis;\n  outline: none;\n}\n.root[data-multiple] .input {\n  min-block-size: calc(var(--space-5) * 0.9);\n}\n.input:focus-visible {\n  outline: none;\n}\n.input:disabled {\n  cursor: not-allowed;\n}\n.input::placeholder {\n  color: var(--color-ink-subtle);\n  opacity: 1;\n}\n\n.trailing {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-1);\n  color: var(--color-ink-muted);\n}\n\n.spinner {\n  color: var(--color-ink-subtle);\n}\n\n.clear {\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  inline-size: 1.5em;\n  block-size: 1.5em;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-chip);\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  cursor: pointer;\n}\n.clear::after {\n  content: '';\n  position: absolute;\n  inset: -0.25em;\n}\n.clear > svg {\n  inline-size: 1.1em;\n  block-size: 1.1em;\n}\n@media (hover: hover) {\n  .clear:hover {\n    color: var(--color-ink);\n    background: var(--color-surface-sunken);\n  }\n}\n.clear:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 1px;\n}\n\n.chevron {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n  transition: rotate var(--dur-2) var(--ease-spring);\n}\n.root[data-state='open'] .chevron {\n  rotate: 180deg;\n}\n.root[data-disabled] .trailing {\n  color: var(--color-ink-subtle);\n}\n\n/* ── Floating list ── */\n.popup {\n  --_pad: var(--space-1);\n  --_radius: var(--radius-surface);\n\n  z-index: var(--z-popover);\n  box-sizing: border-box;\n  min-inline-size: var(--radix-popover-trigger-width);\n  max-inline-size: min(28rem, calc(100vw - 2 * var(--space-4)));\n  max-block-size: min(22rem, var(--radix-popover-content-available-height));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--_pad);\n  border: var(--border-width) solid var(--combobox-list-border, var(--color-line-strong));\n  border-radius: var(--_radius);\n  background-color: var(--color-surface-raised);\n  color: var(--color-ink);\n  box-shadow: var(--shadow-float);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\n  line-height: var(--leading-snug);\n  scroll-padding-block: var(--_pad);\n  transform-origin: var(--radix-popover-content-transform-origin);\n}\n.popup:focus {\n  outline: none;\n}\n.popup[data-state='open'] {\n  animation: combobox-in var(--dur-2) var(--ease-spring);\n}\n\n@keyframes combobox-in {\n  from {\n    opacity: 0;\n    scale: 0.97;\n    translate: 0 calc(var(--space-1) * -1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .popup[data-state='open'] {\n    animation: none;\n  }\n  .chevron {\n    transition: none;\n  }\n}\n\n.listbox:empty {\n  display: none;\n}\n\n.group {\n  display: block;\n}\n.group + .group,\n.option + .group {\n  margin-block-start: var(--_pad);\n  padding-block-start: var(--_pad);\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n\n.groupLabel {\n  padding: var(--space-2) var(--space-3) var(--space-1);\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n}\n\n/* Nested radius: the row sits inside the list's padding, so it's that much smaller. */\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: var(--control-sm);\n  padding-block: var(--space-1);\n  padding-inline: var(--space-3) var(--space-2);\n  border-radius: max(2px, calc(var(--_radius) - var(--_pad)));\n  cursor: default;\n  user-select: none;\n}\n.option[data-active] {\n  background-color: var(--combobox-option-highlight, var(--color-surface-sunken));\n}\n.option[data-selected] {\n  font-weight: var(--label-weight);\n}\n.option[data-disabled] {\n  color: var(--color-ink-subtle);\n  opacity: 0.6;\n}\n\n.optionText {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-inline-size: 0;\n}\n\n.optionLabel {\n  overflow-wrap: anywhere;\n}\n\n.optionDescription {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  font-weight: normal;\n}\n\n/* Multiple: a checkbox-like square, filled when chosen. */\n.box {\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: 1.1em;\n  block-size: 1.1em;\n  border: var(--border-width) solid var(--color-line-control);\n  border-radius: var(--radius-chip);\n  color: var(--color-accent-ink);\n}\n.option[data-selected] .box {\n  border-color: var(--color-accent);\n  background-color: var(--color-accent);\n}\n.box > svg {\n  inline-size: 0.9em;\n  block-size: 0.9em;\n}\n\n.check {\n  flex: none;\n  inline-size: 1.1em;\n  block-size: 1.1em;\n  color: var(--combobox-option-check, var(--color-accent-text));\n}\n\n.message {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n}\n"],"mappings":""}
+{"version":3,"file":"Combobox.module.js","names":["root","values","chips","chip","input","trailing","spinner","clear","chevron","popup","listbox","group","option","groupLabel","optionText","optionLabel","optionDescription","box","check","message","Combobox_module_default"],"sources":["../../../../src/components/inputs/Combobox/Combobox.module.css"],"sourcesContent":["/*\n * The box (border, radius, sizes, states) comes from inputs/internal/control.module.css;\n * this file lays out the chips, the input and the trailing controls inside it, and the\n * floating list.\n *\n * Component tokens (themes may set any of these on [data-theme]):\n *   --combobox-list-border       default var(--color-line-strong)\n *   --combobox-option-highlight  default var(--color-surface-sunken) — keyboard/hover row\n *   --combobox-option-check      default var(--color-accent-text)\n */\n\n/* ── Box ── */\n.root {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  inline-size: 100%;\n  padding-inline: var(--_px) calc(var(--_px) * 0.75);\n  cursor: text;\n}\n.root[data-multiple] {\n  padding-block: calc(var(--space-1) * 0.75);\n}\n.root:focus-within {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n.root[data-disabled] {\n  cursor: not-allowed;\n}\n\n.values {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n/* Scoped under .values so it outranks TagList's .list whatever order the CSS chunks load in. */\n.values .chips {\n  display: contents;\n}\n\n.chip {\n  max-inline-size: 100%;\n}\n\n.input {\n  flex: 1;\n  align-self: stretch;\n  min-inline-size: 6ch;\n  min-block-size: calc(var(--_h) - 2 * var(--border-width));\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-overflow: ellipsis;\n  outline: none;\n}\n.root[data-multiple] .input {\n  min-block-size: calc(var(--space-5) * 0.9);\n}\n.input:focus-visible {\n  outline: none;\n}\n.input:disabled {\n  cursor: not-allowed;\n}\n.input::placeholder {\n  color: var(--color-ink-subtle);\n  opacity: 1;\n}\n\n.trailing {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-1);\n  color: var(--color-ink-muted);\n}\n\n/* Scoped under .trailing so it outranks Spinner's .root whatever order the CSS chunks load in. */\n.trailing .spinner {\n  color: var(--color-ink-subtle);\n}\n\n.clear {\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  inline-size: 1.5em;\n  block-size: 1.5em;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-chip);\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  cursor: pointer;\n}\n.clear::after {\n  content: '';\n  position: absolute;\n  inset: -0.25em;\n}\n.clear > svg {\n  inline-size: 1.1em;\n  block-size: 1.1em;\n}\n@media (hover: hover) {\n  .clear:hover {\n    color: var(--color-ink);\n    background: var(--color-surface-sunken);\n  }\n}\n.clear:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 1px;\n}\n\n/* Scoped under .trailing so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.trailing .chevron {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n  transition: rotate var(--dur-2) var(--ease-spring);\n}\n.root[data-state='open'] .chevron {\n  rotate: 180deg;\n}\n.root[data-disabled] .trailing {\n  color: var(--color-ink-subtle);\n}\n\n/* ── Floating list ── */\n.popup {\n  --_pad: var(--space-1);\n  --_radius: var(--radius-surface);\n\n  z-index: var(--z-popover);\n  box-sizing: border-box;\n  min-inline-size: var(--radix-popover-trigger-width);\n  max-inline-size: min(28rem, calc(100vw - 2 * var(--space-4)));\n  max-block-size: min(22rem, var(--radix-popover-content-available-height));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--_pad);\n  border: var(--border-width) solid var(--combobox-list-border, var(--color-line-strong));\n  border-radius: var(--_radius);\n  background-color: var(--color-surface-raised);\n  color: var(--color-ink);\n  box-shadow: var(--shadow-float);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\n  line-height: var(--leading-snug);\n  scroll-padding-block: var(--_pad);\n  transform-origin: var(--radix-popover-content-transform-origin);\n}\n.popup:focus {\n  outline: none;\n}\n.popup[data-state='open'] {\n  animation: combobox-in var(--dur-2) var(--ease-spring);\n}\n\n@keyframes combobox-in {\n  from {\n    opacity: 0;\n    scale: 0.97;\n    translate: 0 calc(var(--space-1) * -1);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .popup[data-state='open'] {\n    animation: none;\n  }\n  .trailing .chevron {\n    transition: none;\n  }\n}\n\n.listbox:empty {\n  display: none;\n}\n\n.group {\n  display: block;\n}\n.group + .group,\n.option + .group {\n  margin-block-start: var(--_pad);\n  padding-block-start: var(--_pad);\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n\n.groupLabel {\n  padding: var(--space-2) var(--space-3) var(--space-1);\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n}\n\n/* Nested radius: the row sits inside the list's padding, so it's that much smaller. */\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: var(--control-sm);\n  padding-block: var(--space-1);\n  padding-inline: var(--space-3) var(--space-2);\n  border-radius: max(2px, calc(var(--_radius) - var(--_pad)));\n  cursor: default;\n  user-select: none;\n}\n.option[data-active] {\n  background-color: var(--combobox-option-highlight, var(--color-surface-sunken));\n}\n.option[data-selected] {\n  font-weight: var(--label-weight);\n}\n.option[data-disabled] {\n  color: var(--color-ink-subtle);\n  opacity: 0.6;\n}\n\n.optionText {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-inline-size: 0;\n}\n\n.optionLabel {\n  overflow-wrap: anywhere;\n}\n\n.optionDescription {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  font-weight: normal;\n}\n\n/* Multiple: a checkbox-like square, filled when chosen. */\n.box {\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: 1.1em;\n  block-size: 1.1em;\n  border: var(--border-width) solid var(--color-line-control);\n  border-radius: var(--radius-chip);\n  color: var(--color-accent-ink);\n}\n.option[data-selected] .box {\n  border-color: var(--color-accent);\n  background-color: var(--color-accent);\n}\n.box > svg {\n  inline-size: 0.9em;\n  block-size: 0.9em;\n}\n\n/* Scoped under .option so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.option .check {\n  flex: none;\n  inline-size: 1.1em;\n  block-size: 1.1em;\n  color: var(--combobox-option-check, var(--color-accent-text));\n}\n\n.message {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n}\n"],"mappings":""}

package/dist/components/inputs/DateRangeField/DateRangeField.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeField.module.js","names":["root","parts","part","trigger","panel","presets","preset","times","DateRangeField_module_default"],"sources":["../../../../src/components/inputs/DateRangeField/DateRangeField.module.css"],"sourcesContent":["/*\n * Start and end side by side, each at least --space-11 wide, wrapping to a stack when the\n * column is narrower than both.\n */\n.root {\n  min-inline-size: 0;\n}\n\n.parts {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n\n.part {\n  flex: 1 1 var(--space-11);\n  min-inline-size: 0;\n}\n\n/* Calendar picker: one calendar button after the two ends, level with their boxes. */\n.trigger {\n  flex: none;\n  align-self: flex-end;\n}\n\n.panel {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n\n.presets {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 9rem;\n  padding-inline-end: var(--space-4);\n  border-inline-end: var(--border-width) solid var(--color-line);\n}\n\n.preset {\n  justify-content: flex-start;\n}\n.preset[aria-pressed='true'] {\n  background-color: var(--color-accent-soft);\n}\n\n.times {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n"],"mappings":""}
+{"version":3,"file":"DateRangeField.module.js","names":["root","parts","part","trigger","panel","presets","preset","times","DateRangeField_module_default"],"sources":["../../../../src/components/inputs/DateRangeField/DateRangeField.module.css"],"sourcesContent":["/*\n * Start and end side by side, each at least --space-11 wide, wrapping to a stack when the\n * column is narrower than both.\n */\n.root {\n  min-inline-size: 0;\n}\n\n.parts {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n\n.part {\n  flex: 1 1 var(--space-11);\n  min-inline-size: 0;\n}\n\n/* Calendar picker: one calendar button after the two ends, level with their boxes. */\n.trigger {\n  flex: none;\n  align-self: flex-end;\n}\n\n.panel {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n}\n\n.presets {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-inline-size: 9rem;\n  padding-inline-end: var(--space-4);\n  border-inline-end: var(--border-width) solid var(--color-line);\n}\n\n/* Scoped under .presets so it outranks Button's .button whatever order the CSS chunks load in. */\n.presets .preset {\n  justify-content: flex-start;\n}\n.preset[aria-pressed='true'] {\n  background-color: var(--color-accent-soft);\n}\n\n.times {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n}\n"],"mappings":""}

package/dist/components/inputs/FileDrop/FileDrop.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.module.js","names":["root","zone","input","icon","browse","list","item","thumb","image","ext","meta","name","size","remove","FileDrop_module_default"],"sources":["../../../../src/components/inputs/FileDrop/FileDrop.module.css"],"sourcesContent":["/*\n * A dashed drop zone above the chosen files. The real control is the visually hidden\n * file input inside the zone; the zone draws its focus ring.\n *\n * Component tokens (themes may set any of these on [data-theme]):\n *   --file-drop-radius      default var(--field-radius, var(--radius-field))\n *   --file-drop-bg          default var(--field-bg, var(--color-surface))\n *   --file-drop-border      default var(--field-border, var(--color-line-control))\n *   --file-drop-active-bg   default var(--color-surface-sunken) — while dragging over\n */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  inline-size: 100%;\n  font-family: var(--font-text);\n}\n\n/* ── Zone ── */\n.zone {\n  --_border: var(--file-drop-border, var(--field-border, var(--color-line-control)));\n\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  box-sizing: border-box;\n  min-block-size: calc(var(--control-lg) * 2);\n  padding: var(--space-4);\n  border: var(--border-width) dashed var(--_border);\n  border-radius: var(--file-drop-radius, var(--field-radius, var(--radius-field)));\n  background-color: var(--file-drop-bg, var(--field-bg, var(--color-surface)));\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n  text-align: center;\n  cursor: pointer;\n  transition:\n    border-color var(--dur-1) var(--ease-out),\n    background-color var(--dur-1) var(--ease-out);\n}\n\n@media (hover: hover) {\n  .zone:hover:not([data-disabled], [data-readonly], [data-invalid]) {\n    --_border: color-mix(\n      in oklab,\n      var(--file-drop-border, var(--field-border, var(--color-line-control))),\n      var(--color-ink) 35%\n    );\n  }\n}\n\n/* Focus is on the hidden input; the zone shows the neutral ring. */\n.zone:has(.input:focus-visible) {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.zone[data-dragging] {\n  --_border: var(--color-ink);\n  border-style: solid;\n  background-color: var(--file-drop-active-bg, var(--color-surface-sunken));\n  color: var(--color-ink);\n}\n\n.zone[data-invalid] {\n  --_border: var(--tone-critical);\n}\n\n.zone[data-readonly] {\n  background-color: var(--color-surface-sunken);\n  cursor: default;\n}\n\n.zone[data-disabled] {\n  --_border: var(--color-line);\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink-subtle);\n  cursor: not-allowed;\n}\n\n.icon {\n  flex: none;\n  inline-size: 1.25em;\n  block-size: 1.25em;\n}\n\n.browse {\n  color: var(--color-ink);\n  font-weight: var(--label-weight);\n  text-decoration: underline;\n  text-decoration-thickness: var(--border-width);\n  text-underline-offset: 0.2em;\n}\n.zone[data-disabled] .browse {\n  color: inherit;\n}\n\n.input {\n  /* visually hidden comes from messages.module.css; this keeps it out of hit-testing. */\n  pointer-events: none;\n}\n\n/* ── Files ── */\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.list[data-preview='thumbnails'] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));\n  gap: var(--space-2);\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-block-size: var(--control-md);\n  padding-inline: var(--space-3) var(--space-1);\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--file-drop-radius, var(--field-radius, var(--radius-field)));\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n  font-size: var(--text-sm);\n}\n.list[data-preview='thumbnails'] .item {\n  position: relative;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-1) var(--space-2);\n}\n\n.thumb {\n  display: grid;\n  place-items: center;\n  aspect-ratio: 4 / 3;\n  overflow: hidden;\n  border-radius: max(2px, calc(var(--field-radius, var(--radius-field)) - var(--space-1)));\n  background-color: var(--color-surface-sunken);\n}\n\n.image {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n\n.ext {\n  color: var(--color-ink-subtle);\n  font-family: var(--font-numeric);\n  font-size: var(--text-xs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n}\n\n.meta {\n  display: flex;\n  flex: 1;\n  align-items: baseline;\n  gap: var(--space-2);\n  min-inline-size: 0;\n}\n.list[data-preview='thumbnails'] .meta {\n  flex-direction: column;\n  gap: 0;\n  padding-inline: var(--space-1);\n}\n\n.name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.list[data-preview='thumbnails'] .name {\n  max-inline-size: 100%;\n}\n\n.size {\n  flex: none;\n  color: var(--color-ink-subtle);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.remove {\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--control-sm);\n  block-size: var(--control-sm);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-chip);\n  background: transparent;\n  color: var(--color-ink-muted);\n  cursor: pointer;\n}\n.list[data-preview='thumbnails'] .remove {\n  position: absolute;\n  inset-block-start: var(--space-2);\n  inset-inline-end: var(--space-2);\n  background-color: var(--color-surface-raised);\n  box-shadow: var(--shadow-float);\n}\n.remove > svg {\n  inline-size: 1.1em;\n  block-size: 1.1em;\n}\n@media (hover: hover) {\n  .remove:hover {\n    color: var(--color-ink);\n    background-color: var(--color-surface-sunken);\n  }\n}\n.remove:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 1px;\n}\n"],"mappings":""}
+{"version":3,"file":"FileDrop.module.js","names":["root","zone","input","icon","browse","list","item","thumb","image","ext","meta","name","size","remove","FileDrop_module_default"],"sources":["../../../../src/components/inputs/FileDrop/FileDrop.module.css"],"sourcesContent":["/*\n * A dashed drop zone above the chosen files. The real control is the visually hidden\n * file input inside the zone; the zone draws its focus ring.\n *\n * Component tokens (themes may set any of these on [data-theme]):\n *   --file-drop-radius      default var(--field-radius, var(--radius-field))\n *   --file-drop-bg          default var(--field-bg, var(--color-surface))\n *   --file-drop-border      default var(--field-border, var(--color-line-control))\n *   --file-drop-active-bg   default var(--color-surface-sunken) — while dragging over\n */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  inline-size: 100%;\n  font-family: var(--font-text);\n}\n\n/* ── Zone ── */\n.zone {\n  --_border: var(--file-drop-border, var(--field-border, var(--color-line-control)));\n\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  box-sizing: border-box;\n  min-block-size: calc(var(--control-lg) * 2);\n  padding: var(--space-4);\n  border: var(--border-width) dashed var(--_border);\n  border-radius: var(--file-drop-radius, var(--field-radius, var(--radius-field)));\n  background-color: var(--file-drop-bg, var(--field-bg, var(--color-surface)));\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-snug);\n  text-align: center;\n  cursor: pointer;\n  transition:\n    border-color var(--dur-1) var(--ease-out),\n    background-color var(--dur-1) var(--ease-out);\n}\n\n@media (hover: hover) {\n  .zone:hover:not([data-disabled], [data-readonly], [data-invalid]) {\n    --_border: color-mix(\n      in oklab,\n      var(--file-drop-border, var(--field-border, var(--color-line-control))),\n      var(--color-ink) 35%\n    );\n  }\n}\n\n/* Focus is on the hidden input; the zone shows the neutral ring. */\n.zone:has(.input:focus-visible) {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.zone[data-dragging] {\n  --_border: var(--color-ink);\n  border-style: solid;\n  background-color: var(--file-drop-active-bg, var(--color-surface-sunken));\n  color: var(--color-ink);\n}\n\n.zone[data-invalid] {\n  --_border: var(--tone-critical);\n}\n\n.zone[data-readonly] {\n  background-color: var(--color-surface-sunken);\n  cursor: default;\n}\n\n.zone[data-disabled] {\n  --_border: var(--color-line);\n  background-color: var(--color-surface-sunken);\n  color: var(--color-ink-subtle);\n  cursor: not-allowed;\n}\n\n/* Scoped under .zone so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.zone .icon {\n  flex: none;\n  inline-size: 1.25em;\n  block-size: 1.25em;\n}\n\n.browse {\n  color: var(--color-ink);\n  font-weight: var(--label-weight);\n  text-decoration: underline;\n  text-decoration-thickness: var(--border-width);\n  text-underline-offset: 0.2em;\n}\n.zone[data-disabled] .browse {\n  color: inherit;\n}\n\n.input {\n  /* visually hidden comes from messages.module.css; this keeps it out of hit-testing. */\n  pointer-events: none;\n}\n\n/* ── Files ── */\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.list[data-preview='thumbnails'] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));\n  gap: var(--space-2);\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-block-size: var(--control-md);\n  padding-inline: var(--space-3) var(--space-1);\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--file-drop-radius, var(--field-radius, var(--radius-field)));\n  background-color: var(--color-surface);\n  color: var(--color-ink);\n  font-size: var(--text-sm);\n}\n.list[data-preview='thumbnails'] .item {\n  position: relative;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-1) var(--space-2);\n}\n\n.thumb {\n  display: grid;\n  place-items: center;\n  aspect-ratio: 4 / 3;\n  overflow: hidden;\n  border-radius: max(2px, calc(var(--field-radius, var(--radius-field)) - var(--space-1)));\n  background-color: var(--color-surface-sunken);\n}\n\n.image {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n\n.ext {\n  color: var(--color-ink-subtle);\n  font-family: var(--font-numeric);\n  font-size: var(--text-xs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n}\n\n.meta {\n  display: flex;\n  flex: 1;\n  align-items: baseline;\n  gap: var(--space-2);\n  min-inline-size: 0;\n}\n.list[data-preview='thumbnails'] .meta {\n  flex-direction: column;\n  gap: 0;\n  padding-inline: var(--space-1);\n}\n\n.name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.list[data-preview='thumbnails'] .name {\n  max-inline-size: 100%;\n}\n\n.size {\n  flex: none;\n  color: var(--color-ink-subtle);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.remove {\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: var(--control-sm);\n  block-size: var(--control-sm);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-chip);\n  background: transparent;\n  color: var(--color-ink-muted);\n  cursor: pointer;\n}\n.list[data-preview='thumbnails'] .remove {\n  position: absolute;\n  inset-block-start: var(--space-2);\n  inset-inline-end: var(--space-2);\n  background-color: var(--color-surface-raised);\n  box-shadow: var(--shadow-float);\n}\n.remove > svg {\n  inline-size: 1.1em;\n  block-size: 1.1em;\n}\n@media (hover: hover) {\n  .remove:hover {\n    color: var(--color-ink);\n    background-color: var(--color-surface-sunken);\n  }\n}\n.remove:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 1px;\n}\n"],"mappings":""}

package/dist/components/inputs/TagsInput/TagsInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.module.js","names":["root","values","chips","chip","input","adornment","TagsInput_module_default"],"sources":["../../../../src/components/inputs/TagsInput/TagsInput.module.css"],"sourcesContent":["/*\n * The box (border, radius, sizes, states) comes from inputs/internal/control.module.css;\n * this file lays out the chips and the text input inside it. Chips are `Tag`s, so they\n * follow `--tag-radius`.\n */\n.root {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  inline-size: 100%;\n  padding-block: calc(var(--space-1) * 0.75);\n  padding-inline: var(--_px);\n  cursor: text;\n}\n.root:focus-within {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n.root[data-disabled] {\n  cursor: not-allowed;\n}\n\n.values {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.chips {\n  display: contents;\n}\n\n.chip {\n  max-inline-size: 100%;\n}\n\n.input {\n  flex: 1;\n  min-inline-size: 8ch;\n  min-block-size: calc(var(--space-5) * 0.9);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  outline: none;\n}\n.input:focus-visible {\n  outline: none;\n}\n.input:disabled {\n  cursor: not-allowed;\n}\n.input::placeholder {\n  color: var(--color-ink-subtle);\n  opacity: 1;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-1);\n  color: var(--color-ink-subtle);\n  font-size: 0.875em;\n  white-space: nowrap;\n  user-select: none;\n}\n.adornment > svg {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n"],"mappings":""}
+{"version":3,"file":"TagsInput.module.js","names":["root","values","chips","chip","input","adornment","TagsInput_module_default"],"sources":["../../../../src/components/inputs/TagsInput/TagsInput.module.css"],"sourcesContent":["/*\n * The box (border, radius, sizes, states) comes from inputs/internal/control.module.css;\n * this file lays out the chips and the text input inside it. Chips are `Tag`s, so they\n * follow `--tag-radius`.\n */\n.root {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  inline-size: 100%;\n  padding-block: calc(var(--space-1) * 0.75);\n  padding-inline: var(--_px);\n  cursor: text;\n}\n.root:focus-within {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n.root[data-disabled] {\n  cursor: not-allowed;\n}\n\n.values {\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n/* Scoped under .values so it outranks TagList's .list whatever order the CSS chunks load in. */\n.values .chips {\n  display: contents;\n}\n\n.chip {\n  max-inline-size: 100%;\n}\n\n.input {\n  flex: 1;\n  min-inline-size: 8ch;\n  min-block-size: calc(var(--space-5) * 0.9);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  outline: none;\n}\n.input:focus-visible {\n  outline: none;\n}\n.input:disabled {\n  cursor: not-allowed;\n}\n.input::placeholder {\n  color: var(--color-ink-subtle);\n  opacity: 1;\n}\n\n.adornment {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-1);\n  color: var(--color-ink-subtle);\n  font-size: 0.875em;\n  white-space: nowrap;\n  user-select: none;\n}\n.adornment > svg {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n"],"mappings":""}

package/dist/components/inputs/internal/messages.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.module.js","names":["label","required","optional","description","error","errorIcon","warning","warningIcon","busy","count","visuallyHidden","messages_module_default"],"sources":["../../../../src/components/inputs/internal/messages.module.css"],"sourcesContent":["/*\n * Shared field text: label, description and error. Used by Field, Fieldset,\n * CheckboxField and RadioGroup items so every label in a form reads the same.\n *\n * Component tokens:\n *   --field-label-size        default var(--text-sm)\n *   --field-description-size  default var(--text-sm)\n */\n.label {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 0.35em;\n  padding: 0;\n  font-family: var(--font-text);\n  font-size: var(--field-label-size, var(--text-sm));\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n\n/* Visual only — the control carries aria-required. Muted ink: required isn't an error. */\n.required {\n  color: var(--color-ink-muted);\n  font-weight: var(--label-weight);\n}\n\n.optional {\n  color: var(--color-ink-subtle);\n  font-weight: normal;\n  letter-spacing: 0;\n  text-transform: none;\n}\n\n.description {\n  max-inline-size: 64ch;\n  font-size: var(--field-description-size, var(--text-sm));\n  line-height: var(--leading-snug);\n  color: var(--color-ink-muted);\n  text-wrap: pretty;\n}\n\n.error {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.4em;\n  max-inline-size: 64ch;\n  font-size: var(--field-description-size, var(--text-sm));\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  color: var(--tone-critical-text);\n  text-wrap: pretty;\n}\n\n/* Glyph sits on the first line's centre, not the block's. */\n.errorIcon {\n  flex: none;\n  block-size: 1lh;\n  inline-size: 1.1em;\n}\n\n/* Non-blocking advice — same shape as .error, caution tone instead of critical. */\n.warning {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.4em;\n  max-inline-size: 64ch;\n  font-size: var(--field-description-size, var(--text-sm));\n  line-height: var(--leading-snug);\n  color: var(--tone-caution-text);\n  text-wrap: pretty;\n}\n\n.warningIcon {\n  flex: none;\n  block-size: 1lh;\n  inline-size: 1.1em;\n}\n\n/* validating spinner after the label text */\n.busy {\n  flex: none;\n  color: var(--color-ink-subtle);\n}\n\n/* maxLength counter under the control */\n.count {\n  font-size: var(--field-description-size, var(--text-sm));\n  color: var(--color-ink-subtle);\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: end;\n}\n\n.visuallyHidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n[data-disabled] > .label,\n[data-disabled] > * > .label,\n.label[data-disabled] {\n  color: var(--color-ink-subtle);\n}\n"],"mappings":""}
+{"version":3,"file":"messages.module.js","names":["label","required","optional","description","error","errorIcon","warning","warningIcon","busy","count","visuallyHidden","messages_module_default"],"sources":["../../../../src/components/inputs/internal/messages.module.css"],"sourcesContent":["/*\n * Shared field text: label, description and error. Used by Field, Fieldset,\n * CheckboxField and RadioGroup items so every label in a form reads the same.\n *\n * Component tokens:\n *   --field-label-size        default var(--text-sm)\n *   --field-description-size  default var(--text-sm)\n */\n.label {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 0.35em;\n  padding: 0;\n  font-family: var(--font-text);\n  font-size: var(--field-label-size, var(--text-sm));\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n\n/* Visual only — the control carries aria-required. Muted ink: required isn't an error. */\n.required {\n  color: var(--color-ink-muted);\n  font-weight: var(--label-weight);\n}\n\n.optional {\n  color: var(--color-ink-subtle);\n  font-weight: normal;\n  letter-spacing: 0;\n  text-transform: none;\n}\n\n.description {\n  max-inline-size: 64ch;\n  font-size: var(--field-description-size, var(--text-sm));\n  line-height: var(--leading-snug);\n  color: var(--color-ink-muted);\n  text-wrap: pretty;\n}\n\n.error {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.4em;\n  max-inline-size: 64ch;\n  font-size: var(--field-description-size, var(--text-sm));\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  color: var(--tone-critical-text);\n  text-wrap: pretty;\n}\n\n/* Glyph sits on the first line's centre, not the block's. */\n/* Scoped under .error so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.error .errorIcon {\n  flex: none;\n  block-size: 1lh;\n  inline-size: 1.1em;\n}\n\n/* Non-blocking advice — same shape as .error, caution tone instead of critical. */\n.warning {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.4em;\n  max-inline-size: 64ch;\n  font-size: var(--field-description-size, var(--text-sm));\n  line-height: var(--leading-snug);\n  color: var(--tone-caution-text);\n  text-wrap: pretty;\n}\n\n/* Scoped under .warning so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.warning .warningIcon {\n  flex: none;\n  block-size: 1lh;\n  inline-size: 1.1em;\n}\n\n/* validating spinner after the label text */\n/* Doubled so it outranks Spinner's .root whatever order the CSS chunks load in: the label\n   around it belongs to whichever field renders it. */\n.busy.busy {\n  flex: none;\n  color: var(--color-ink-subtle);\n}\n\n/* maxLength counter under the control */\n.count {\n  font-size: var(--field-description-size, var(--text-sm));\n  color: var(--color-ink-subtle);\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: end;\n}\n\n.visuallyHidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n[data-disabled] > .label,\n[data-disabled] > * > .label,\n.label[data-disabled] {\n  color: var(--color-ink-subtle);\n}\n"],"mappings":""}

package/dist/components/overlays/CommandPalette/CommandPalette.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.module.js","names":["overlay","content","search","searchIcon","back","crumb","input","spinner","body","listbox","group","option","groupLabel","icon","text","label","match","description","shortcut","chevron","message","CommandPalette_module_default"],"sources":["../../../../src/components/overlays/CommandPalette/CommandPalette.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --command-palette-radius     default var(--radius-surface)\n *   --command-palette-shadow     default var(--shadow-overlay)\n *   --command-palette-border     default var(--color-line-strong)\n *   --command-palette-surface    default var(--color-surface-raised)\n *   --command-palette-highlight  default var(--color-surface-sunken) — keyboard/hover row\n *   --command-palette-match      default var(--color-accent) — underline under the matched text\n *\n * The panel hangs from the top third of the screen rather than the middle, so it stays put\n * while the results grow and shrink under the search box.\n */\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-overlay);\n  background: var(--color-scrim);\n}\n.overlay[data-state='open'] {\n  animation: fade-in var(--dur-2) var(--ease-out);\n}\n.overlay[data-state='closed'] {\n  animation: fade-out var(--dur-1) var(--ease-out);\n}\n\n.content {\n  --_radius: var(--command-palette-radius, var(--radius-surface));\n  --_pad: var(--space-1);\n\n  position: fixed;\n  inset-block-start: clamp(var(--space-4), 12vh, var(--space-9));\n  inset-inline: 0;\n  z-index: var(--z-overlay);\n  display: flex;\n  flex-direction: column;\n  inline-size: min(var(--width-text), calc(100% - 2 * var(--space-4)));\n  max-block-size: calc(100% - clamp(var(--space-4), 12vh, var(--space-9)) - var(--space-4));\n  margin-inline: auto;\n  overflow: hidden;\n  border: var(--border-width) solid var(--command-palette-border, var(--color-line-strong));\n  border-radius: var(--_radius);\n  background: var(--command-palette-surface, var(--color-surface-raised));\n  box-shadow: var(--command-palette-shadow, var(--shadow-overlay));\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\n  line-height: var(--leading-snug);\n  transform-origin: 50% 0;\n}\n.content:focus {\n  outline: none;\n}\n.content[data-state='open'] {\n  animation: palette-in var(--dur-2) var(--ease-spring);\n}\n.content[data-state='closed'] {\n  animation: fade-out var(--dur-1) var(--ease-out);\n}\n\n/* ── Search row ── */\n.search {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-2);\n  min-block-size: var(--control-lg);\n  padding-inline: var(--space-4);\n  border-block-end: var(--border-width) solid var(--color-line);\n  color: var(--color-ink-muted);\n}\n.search:focus-within {\n  color: var(--color-ink);\n}\n\n.searchIcon {\n  flex: none;\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n\n.back {\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: 1.75em;\n  block-size: 1.75em;\n  margin-inline-start: calc(var(--space-1) * -1);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-chip);\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  cursor: pointer;\n}\n.back > svg {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n@media (hover: hover) {\n  .back:hover {\n    background: var(--command-palette-highlight, var(--color-surface-sunken));\n    color: var(--color-ink);\n  }\n}\n.back:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 1px;\n}\n\n.crumb {\n  flex: none;\n  max-inline-size: 40%;\n  overflow: hidden;\n  padding-inline-end: var(--space-2);\n  border-inline-end: var(--border-width) solid var(--color-line);\n  color: var(--color-ink);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.input {\n  flex: 1;\n  align-self: stretch;\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-ink);\n  font: inherit;\n  font-size: var(--text-lg);\n  letter-spacing: inherit;\n  outline: none;\n}\n.input:focus-visible {\n  outline: none;\n}\n.input::placeholder {\n  color: var(--color-ink-subtle);\n  opacity: 1;\n}\n\n.spinner {\n  flex: none;\n  color: var(--color-ink-subtle);\n}\n\n/* ── Results ── */\n.body {\n  flex: 1 1 auto;\n  max-block-size: min(26rem, 60vh);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--_pad);\n  scroll-padding-block: var(--_pad);\n}\n\n.listbox:empty {\n  display: none;\n}\n\n.group {\n  display: block;\n}\n.group + .group,\n.option + .group,\n.group + .option {\n  margin-block-start: var(--_pad);\n  padding-block-start: var(--_pad);\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n\n.groupLabel {\n  padding: var(--space-2) var(--space-3) var(--space-1);\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n}\n\n/* Nested radius: the row sits inside the panel's padding, so it's that much smaller. */\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: var(--control-md);\n  padding-block: var(--space-1);\n  padding-inline: var(--space-3);\n  border-radius: max(2px, calc(var(--_radius) - var(--_pad)));\n  cursor: default;\n  user-select: none;\n}\n.option[data-active] {\n  background-color: var(--command-palette-highlight, var(--color-surface-sunken));\n}\n.option[data-disabled] {\n  color: var(--color-ink-subtle);\n  opacity: 0.6;\n}\n\n.icon {\n  display: inline-grid;\n  flex: none;\n  inline-size: 1.15em;\n  place-items: center;\n  color: var(--color-ink-muted);\n}\n.icon > svg {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n.option[data-active] .icon {\n  color: var(--color-ink);\n}\n\n.text {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-inline-size: 0;\n}\n\n.label {\n  overflow-wrap: anywhere;\n}\n\n.match {\n  background: transparent;\n  color: inherit;\n  font-weight: var(--label-weight);\n  text-decoration: underline;\n  text-decoration-color: var(--command-palette-match, var(--color-accent));\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.2em;\n}\n\n.description {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n}\n\n.shortcut {\n  display: inline-flex;\n  flex: none;\n  gap: var(--space-1);\n}\n\n.chevron {\n  flex: none;\n  inline-size: 1.1em;\n  block-size: 1.1em;\n  color: var(--color-ink-subtle);\n}\n\n.message {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-4) var(--space-3);\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n}\n\n@keyframes palette-in {\n  from {\n    opacity: 0;\n    scale: 0.98;\n    translate: 0 calc(var(--space-2) * -1);\n  }\n}\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n}\n@keyframes fade-out {\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .overlay[data-state],\n  .content[data-state] {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CommandPalette.module.js","names":["overlay","content","search","searchIcon","back","crumb","input","spinner","body","listbox","group","option","groupLabel","icon","text","label","match","description","shortcut","chevron","message","CommandPalette_module_default"],"sources":["../../../../src/components/overlays/CommandPalette/CommandPalette.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --command-palette-radius     default var(--radius-surface)\n *   --command-palette-shadow     default var(--shadow-overlay)\n *   --command-palette-border     default var(--color-line-strong)\n *   --command-palette-surface    default var(--color-surface-raised)\n *   --command-palette-highlight  default var(--color-surface-sunken) — keyboard/hover row\n *   --command-palette-match      default var(--color-accent) — underline under the matched text\n *\n * The panel hangs from the top third of the screen rather than the middle, so it stays put\n * while the results grow and shrink under the search box.\n */\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-overlay);\n  background: var(--color-scrim);\n}\n.overlay[data-state='open'] {\n  animation: fade-in var(--dur-2) var(--ease-out);\n}\n.overlay[data-state='closed'] {\n  animation: fade-out var(--dur-1) var(--ease-out);\n}\n\n.content {\n  --_radius: var(--command-palette-radius, var(--radius-surface));\n  --_pad: var(--space-1);\n\n  position: fixed;\n  inset-block-start: clamp(var(--space-4), 12vh, var(--space-9));\n  inset-inline: 0;\n  z-index: var(--z-overlay);\n  display: flex;\n  flex-direction: column;\n  inline-size: min(var(--width-text), calc(100% - 2 * var(--space-4)));\n  max-block-size: calc(100% - clamp(var(--space-4), 12vh, var(--space-9)) - var(--space-4));\n  margin-inline: auto;\n  overflow: hidden;\n  border: var(--border-width) solid var(--command-palette-border, var(--color-line-strong));\n  border-radius: var(--_radius);\n  background: var(--command-palette-surface, var(--color-surface-raised));\n  box-shadow: var(--command-palette-shadow, var(--shadow-overlay));\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\n  line-height: var(--leading-snug);\n  transform-origin: 50% 0;\n}\n.content:focus {\n  outline: none;\n}\n.content[data-state='open'] {\n  animation: palette-in var(--dur-2) var(--ease-spring);\n}\n.content[data-state='closed'] {\n  animation: fade-out var(--dur-1) var(--ease-out);\n}\n\n/* ── Search row ── */\n.search {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: var(--space-2);\n  min-block-size: var(--control-lg);\n  padding-inline: var(--space-4);\n  border-block-end: var(--border-width) solid var(--color-line);\n  color: var(--color-ink-muted);\n}\n.search:focus-within {\n  color: var(--color-ink);\n}\n\n/* Scoped under .search so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.search .searchIcon {\n  flex: none;\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n\n.back {\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  inline-size: 1.75em;\n  block-size: 1.75em;\n  margin-inline-start: calc(var(--space-1) * -1);\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-chip);\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  cursor: pointer;\n}\n.back > svg {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n@media (hover: hover) {\n  .back:hover {\n    background: var(--command-palette-highlight, var(--color-surface-sunken));\n    color: var(--color-ink);\n  }\n}\n.back:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 1px;\n}\n\n.crumb {\n  flex: none;\n  max-inline-size: 40%;\n  overflow: hidden;\n  padding-inline-end: var(--space-2);\n  border-inline-end: var(--border-width) solid var(--color-line);\n  color: var(--color-ink);\n  font-size: var(--text-sm);\n  font-weight: var(--label-weight);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.input {\n  flex: 1;\n  align-self: stretch;\n  min-inline-size: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-ink);\n  font: inherit;\n  font-size: var(--text-lg);\n  letter-spacing: inherit;\n  outline: none;\n}\n.input:focus-visible {\n  outline: none;\n}\n.input::placeholder {\n  color: var(--color-ink-subtle);\n  opacity: 1;\n}\n\n/* Scoped under .search so it outranks Spinner's .root whatever order the CSS chunks load in. */\n.search .spinner {\n  flex: none;\n  color: var(--color-ink-subtle);\n}\n\n/* ── Results ── */\n.body {\n  flex: 1 1 auto;\n  max-block-size: min(26rem, 60vh);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: var(--_pad);\n  scroll-padding-block: var(--_pad);\n}\n\n.listbox:empty {\n  display: none;\n}\n\n.group {\n  display: block;\n}\n.group + .group,\n.option + .group,\n.group + .option {\n  margin-block-start: var(--_pad);\n  padding-block-start: var(--_pad);\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n\n.groupLabel {\n  padding: var(--space-2) var(--space-3) var(--space-1);\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n}\n\n/* Nested radius: the row sits inside the panel's padding, so it's that much smaller. */\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: var(--control-md);\n  padding-block: var(--space-1);\n  padding-inline: var(--space-3);\n  border-radius: max(2px, calc(var(--_radius) - var(--_pad)));\n  cursor: default;\n  user-select: none;\n}\n.option[data-active] {\n  background-color: var(--command-palette-highlight, var(--color-surface-sunken));\n}\n.option[data-disabled] {\n  color: var(--color-ink-subtle);\n  opacity: 0.6;\n}\n\n.icon {\n  display: inline-grid;\n  flex: none;\n  inline-size: 1.15em;\n  place-items: center;\n  color: var(--color-ink-muted);\n}\n.icon > svg {\n  inline-size: 1.15em;\n  block-size: 1.15em;\n}\n.option[data-active] .icon {\n  color: var(--color-ink);\n}\n\n.text {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-inline-size: 0;\n}\n\n.label {\n  overflow-wrap: anywhere;\n}\n\n.match {\n  background: transparent;\n  color: inherit;\n  font-weight: var(--label-weight);\n  text-decoration: underline;\n  text-decoration-color: var(--command-palette-match, var(--color-accent));\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.2em;\n}\n\n.description {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n}\n\n.shortcut {\n  display: inline-flex;\n  flex: none;\n  gap: var(--space-1);\n}\n\n/* Scoped under .option so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.option .chevron {\n  flex: none;\n  inline-size: 1.1em;\n  block-size: 1.1em;\n  color: var(--color-ink-subtle);\n}\n\n.message {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-4) var(--space-3);\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n}\n\n@keyframes palette-in {\n  from {\n    opacity: 0;\n    scale: 0.98;\n    translate: 0 calc(var(--space-2) * -1);\n  }\n}\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n}\n@keyframes fade-out {\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .overlay[data-state],\n  .content[data-state] {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/components/typography/Link/Link.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.module.js","names":["link","iconWrap","icon","srOnly","Link_module_default"],"sources":["../../../../src/components/typography/Link/Link.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --link-thickness         resting underline, default max(0.75 × border, 0.065em)\n *   --link-thickness-hover   default max(border-width, 0.13em)\n *   --link-offset            default 0.22em\n */\n.link {\n  --_ink: var(--color-ink);\n  --_ink-hover: var(--_ink);\n  --_line: color-mix(in oklch, currentColor 42%, transparent);\n  --_line-hover: currentColor;\n\n  color: var(--_ink);\n  text-decoration-line: underline;\n  text-decoration-color: var(--_line);\n  text-decoration-thickness: var(--link-thickness, max(calc(var(--border-width) * 0.75), 0.065em));\n  text-underline-offset: var(--link-offset, 0.22em);\n  text-decoration-skip-ink: auto;\n  border-radius: 0.125em;\n  cursor: pointer;\n  transition:\n    color var(--dur-1) var(--ease-out),\n    text-decoration-color var(--dur-1) var(--ease-out),\n    text-decoration-thickness var(--dur-1) var(--ease-out),\n    text-underline-offset var(--dur-1) var(--ease-out);\n}\n\n.link[data-tone='accent'] {\n  --_ink: var(--color-accent-text);\n}\n.link[data-tone='muted'] {\n  --_ink: var(--color-ink-muted);\n  --_ink-hover: var(--color-ink);\n}\n\n.link[data-underline='hover'] {\n  text-decoration-color: transparent;\n}\n\n@media (hover: hover) {\n  .link:hover {\n    color: var(--_ink-hover);\n    text-decoration-color: var(--_line-hover);\n    text-decoration-thickness: var(--link-thickness-hover, max(var(--border-width), 0.13em));\n  }\n}\n\n.link:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  text-decoration-color: var(--_line-hover);\n}\n\n/* The arrow hugs the last word (no wrap point before it) and sits a touch high.\n   The glyph's own side-bearing is the gap, so no extra margin. */\n.iconWrap {\n  white-space: nowrap;\n}\n.icon {\n  display: inline-block;\n  inline-size: 0.85em;\n  block-size: 0.85em;\n  margin-inline: -0.04em -0.12em;\n  vertical-align: 0;\n  transition: translate var(--dur-1) var(--ease-spring);\n}\n@media (hover: hover) {\n  .link:hover .icon {\n    translate: 0.08em -0.08em;\n  }\n}\n\n.srOnly {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"Link.module.js","names":["link","iconWrap","icon","srOnly","Link_module_default"],"sources":["../../../../src/components/typography/Link/Link.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --link-thickness         resting underline, default max(0.75 × border, 0.065em)\n *   --link-thickness-hover   default max(border-width, 0.13em)\n *   --link-offset            default 0.22em\n */\n.link {\n  --_ink: var(--color-ink);\n  --_ink-hover: var(--_ink);\n  --_line: color-mix(in oklch, currentColor 42%, transparent);\n  --_line-hover: currentColor;\n\n  color: var(--_ink);\n  text-decoration-line: underline;\n  text-decoration-color: var(--_line);\n  text-decoration-thickness: var(--link-thickness, max(calc(var(--border-width) * 0.75), 0.065em));\n  text-underline-offset: var(--link-offset, 0.22em);\n  text-decoration-skip-ink: auto;\n  border-radius: 0.125em;\n  cursor: pointer;\n  transition:\n    color var(--dur-1) var(--ease-out),\n    text-decoration-color var(--dur-1) var(--ease-out),\n    text-decoration-thickness var(--dur-1) var(--ease-out),\n    text-underline-offset var(--dur-1) var(--ease-out);\n}\n\n.link[data-tone='accent'] {\n  --_ink: var(--color-accent-text);\n}\n.link[data-tone='muted'] {\n  --_ink: var(--color-ink-muted);\n  --_ink-hover: var(--color-ink);\n}\n\n.link[data-underline='hover'] {\n  text-decoration-color: transparent;\n}\n\n@media (hover: hover) {\n  .link:hover {\n    color: var(--_ink-hover);\n    text-decoration-color: var(--_line-hover);\n    text-decoration-thickness: var(--link-thickness-hover, max(var(--border-width), 0.13em));\n  }\n}\n\n.link:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n  text-decoration-color: var(--_line-hover);\n}\n\n/* The arrow hugs the last word (no wrap point before it) and sits a touch high.\n   The glyph's own side-bearing is the gap, so no extra margin. */\n.iconWrap {\n  white-space: nowrap;\n}\n/* Scoped under .iconWrap so it outranks Icon's .icon whatever order the CSS chunks load in. */\n.iconWrap .icon {\n  display: inline-block;\n  inline-size: 0.85em;\n  block-size: 0.85em;\n  margin-inline: -0.04em -0.12em;\n  vertical-align: 0;\n  transition: translate var(--dur-1) var(--ease-spring);\n}\n@media (hover: hover) {\n  .link:hover .icon {\n    translate: 0.08em -0.08em;\n  }\n}\n\n.srOnly {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/dist/highlight/index.d.ts

@@ -1,6 +1,6 @@
 import type { CodeToken } from '../components/display/CodeBlock/index.js';
 /** The languages `highlight` understands, with their usual aliases. */
-export type HighlightLanguage = 'js' | 'javascript' | 'jsx' | 'ts' | 'typescript' | 'tsx';
+export type HighlightLanguage = 'js' | 'javascript' | 'jsx' | 'ts' | 'typescript' | 'tsx' | 'bash' | 'sh' | 'shell' | 'shellscript' | 'zsh' | 'json' | 'yaml' | 'yml' | 'diff';
 /**
  * Tokens for `CodeBlock`'s `tokens` prop: one array per line of `code`, each token tagged with
  * what it is (keyword, string, comment…) so the theme colours it. Resolves to `undefined` for a

package/dist/highlight/index.js

@@ -6,12 +6,25 @@ var t = {
 	jsx: "jsx",
 	ts: "typescript",
 	typescript: "typescript",
-	tsx: "tsx"
+	tsx: "tsx",
+	bash: "shellscript",
+	sh: "shellscript",
+	shell: "shellscript",
+	shellscript: "shellscript",
+	zsh: "shellscript",
+	json: "json",
+	yaml: "yaml",
+	yml: "yaml",
+	diff: "diff"
 }, n = {
 	javascript: () => import("shiki/langs/javascript.mjs"),
 	jsx: () => import("shiki/langs/jsx.mjs"),
 	typescript: () => import("shiki/langs/typescript.mjs"),
-	tsx: () => import("shiki/langs/tsx.mjs")
+	tsx: () => import("shiki/langs/tsx.mjs"),
+	shellscript: () => import("shiki/langs/shellscript.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	yaml: () => import("shiki/langs/yaml.mjs"),
+	diff: () => import("shiki/langs/diff.mjs")
 }, r = [
 	"keyword",
 	"string",
@@ -35,6 +48,7 @@ var t = {
 			"constant.numeric",
 			"constant.language",
 			"constant.character",
+			"constant.other.option",
 			"variable.language"
 		], "constant"],
 		[[
@@ -59,7 +73,16 @@ var t = {
 			"keyword.operator"
 		], "punctuation"],
 		[["punctuation.definition.string.template.begin", "punctuation.definition.string.template.end"], "string"],
-		[["punctuation.definition.template-expression"], "punctuation"]
+		[["punctuation.definition.template-expression"], "punctuation"],
+		[["punctuation.support.type.property-name", "entity.name.tag.yaml"], "type"],
+		[[
+			"meta.diff.header",
+			"punctuation.definition.from-file",
+			"punctuation.definition.to-file"
+		], "keyword"],
+		[["meta.diff.range", "punctuation.definition.range"], "function"],
+		[["markup.inserted", "punctuation.definition.inserted"], "string"],
+		[["markup.deleted", "punctuation.definition.deleted"], "constant"]
 	].map(([e, t]) => ({
 		scope: e,
 		settings: { foreground: t ? i(t) : o }

package/dist/highlight/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["GRAMMARS","LOADERS","TYPES","colourOf","type","typeOf","PLAIN","THEME","scope","highlighter","loaded","load","createHighlighterCore","createJavaScriptRegexEngine","language","grammar","core","module","isHighlightLanguage","highlight","id","trimTrailingNewlines","code","tokens","line","color","previous","content"],"sources":["../../src/highlight/index.ts"],"sourcesContent":["/*\n * @mitcsutt/kiln-ui/highlight: syntax highlighting for CodeBlock, kept out of the main entry.\n * It runs Shiki (an optional peer dependency) with its JavaScript regex engine, and loads Shiki\n * and each grammar only when the first block in that language is highlighted.\n */\nimport type { CodeToken, CodeTokenType } from '#components/display/CodeBlock'\nimport { trimTrailingNewlines } from '#utils/newlines'\nimport type { HighlighterCore, LanguageRegistration, ThemeRegistration } from 'shiki/core'\n\n/** The languages `highlight` understands, with their usual aliases. */\nexport type HighlightLanguage = 'js' | 'javascript' | 'jsx' | 'ts' | 'typescript' | 'tsx'\n\ntype Grammar = 'javascript' | 'jsx' | 'typescript' | 'tsx'\n\nconst GRAMMARS: Record<HighlightLanguage, Grammar> = {\n  js: 'javascript',\n  javascript: 'javascript',\n  jsx: 'jsx',\n  ts: 'typescript',\n  typescript: 'typescript',\n  tsx: 'tsx',\n}\n\nconst LOADERS: Record<Grammar, () => Promise<{ default: LanguageRegistration[] }>> = {\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  jsx: () => import('shiki/langs/jsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n}\n\nconst TYPES: CodeTokenType[] = [\n  'keyword',\n  'string',\n  'comment',\n  'constant',\n  'function',\n  'type',\n  'tag',\n  'attribute',\n  'punctuation',\n]\n\n/** Each token type gets a stand-in colour, which `highlight` reads back as the type. */\nconst colourOf = (type: CodeTokenType) =>\n  `#0000${(TYPES.indexOf(type) + 1).toString(16).padStart(2, '0')}`\nconst typeOf = new Map(TYPES.map((type) => [colourOf(type), type]))\nconst PLAIN = '#000000'\n\n/** TextMate scopes → token types. A deeper or longer scope wins, so the exceptions follow. */\nconst RULES: [string[], CodeTokenType | null][] = [\n  [['comment', 'punctuation.definition.comment'], 'comment'],\n  [['string', 'punctuation.definition.string'], 'string'],\n  [['meta.template.expression'], null],\n  [\n    ['constant.numeric', 'constant.language', 'constant.character', 'variable.language'],\n    'constant',\n  ],\n  [['keyword', 'storage', 'keyword.operator.new', 'keyword.operator.expression'], 'keyword'],\n  [['entity.name.function', 'support.function'], 'function'],\n  [\n    [\n      'entity.name.type',\n      'entity.name.class',\n      'entity.other.inherited-class',\n      'support.type',\n      'support.class',\n    ],\n    'type',\n  ],\n  [['entity.name.tag'], 'tag'],\n  [['entity.other.attribute-name'], 'attribute'],\n  [['punctuation', 'meta.brace', 'keyword.operator'], 'punctuation'],\n  [\n    ['punctuation.definition.string.template.begin', 'punctuation.definition.string.template.end'],\n    'string',\n  ],\n  [['punctuation.definition.template-expression'], 'punctuation'],\n]\n\nconst THEME: ThemeRegistration = {\n  name: 'kiln',\n  type: 'light',\n  fg: PLAIN,\n  bg: '#ffffff',\n  settings: RULES.map(([scope, type]) => ({\n    scope,\n    settings: { foreground: type ? colourOf(type) : PLAIN },\n  })),\n}\n\nlet highlighter: Promise<HighlighterCore> | undefined\nconst loaded = new Map<Grammar, Promise<void>>()\n\nfunction load(grammar: Grammar): Promise<HighlighterCore> {\n  highlighter ??= Promise.all([import('shiki/core'), import('shiki/engine/javascript')]).then(\n    ([{ createHighlighterCore }, { createJavaScriptRegexEngine }]) =>\n      createHighlighterCore({ themes: [THEME], langs: [], engine: createJavaScriptRegexEngine() }),\n  )\n  return highlighter.then(async (core) => {\n    let language = loaded.get(grammar)\n    if (!language) {\n      language = LOADERS[grammar]().then((module) => core.loadLanguage(module.default))\n      loaded.set(grammar, language)\n    }\n    await language\n    return core\n  })\n}\n\nfunction isHighlightLanguage(language: string): language is HighlightLanguage {\n  return Object.hasOwn(GRAMMARS, language)\n}\n\n/**\n * Tokens for `CodeBlock`'s `tokens` prop: one array per line of `code`, each token tagged with\n * what it is (keyword, string, comment…) so the theme colours it. Resolves to `undefined` for a\n * language it doesn't know, which `CodeBlock` shows as plain code.\n *\n * @remarks\n * Install `shiki` alongside kiln-ui to use it. Call it wherever your code is ready: in a server\n * component or at build time, so the browser downloads no highlighter, or in the browser, where\n * Shiki and the grammar load on the first call.\n *\n * @example\n * const tokens = await highlight(source, 'tsx')\n * return <CodeBlock code={source} language=\"TSX\" tokens={tokens} />\n */\nexport async function highlight(\n  code: string,\n  language: string,\n): Promise<CodeToken[][] | undefined> {\n  const id = language.toLowerCase()\n  if (!isHighlightLanguage(id)) return undefined\n  const grammar = GRAMMARS[id]\n  const core = await load(grammar)\n  const lines = core.codeToTokensBase(trimTrailingNewlines(code), { lang: grammar, theme: 'kiln' })\n  return lines.map((line) => {\n    const tokens: CodeToken[] = []\n    for (const { content, color } of line) {\n      const type = color ? typeOf.get(color.toLowerCase()) : undefined\n      const previous = tokens.at(-1)\n      if (previous && previous.type === type) previous.content += content\n      else tokens.push(type ? { content, type } : { content })\n    }\n    return tokens\n  })\n}\n"],"mappings":";;AAcA,IAAMA,IAA+C;CACnD,IAAI;CACJ,YAAY;CACZ,KAAK;CACL,IAAI;CACJ,YAAY;CACZ,KAAK;AACP,GAEMC,IAA+E;CACnF,kBAAkB,OAAO;CACzB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,WAAW,OAAO;AACpB,GAEMC,IAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAGMC,KAAY,MAChB,SAASD,EAAM,QAAQE,CAAI,IAAI,EAAA,CAAG,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,KAC1DC,IAAS,IAAI,IAAIH,EAAM,KAAK,MAAS,CAACC,EAASC,CAAI,GAAGA,CAAI,CAAC,CAAC,GAC5DE,IAAQ,WAiCRC,IAA2B;CAC/B,MAAM;CACN,MAAM;CACN,IAAID;CACJ,IAAI;CACJ,UAAU;EAlCV,CAAC,CAAC,WAAW,gCAAgC,GAAG,SAAS;EACzD,CAAC,CAAC,UAAU,+BAA+B,GAAG,QAAQ;EACtD,CAAC,CAAC,0BAA0B,GAAG,IAAI;EACnC,CACE;GAAC;GAAoB;GAAqB;GAAsB;EAAmB,GACnF,UACF;EACA,CAAC;GAAC;GAAW;GAAW;GAAwB;EAA6B,GAAG,SAAS;EACzF,CAAC,CAAC,wBAAwB,kBAAkB,GAAG,UAAU;EACzD,CACE;GACE;GACA;GACA;GACA;GACA;EACF,GACA,MACF;EACA,CAAC,CAAC,iBAAiB,GAAG,KAAK;EAC3B,CAAC,CAAC,6BAA6B,GAAG,WAAW;EAC7C,CAAC;GAAC;GAAe;GAAc;EAAkB,GAAG,aAAa;EACjE,CACE,CAAC,gDAAgD,4CAA4C,GAC7F,QACF;EACA,CAAC,CAAC,4CAA4C,GAAG,aAAa;CAQpD,CAAA,CAAM,KAAK,CAACE,GAAOJ,QAAW;EACtC;EACA,UAAU,EAAE,YAAYA,IAAOD,EAASC,CAAI,IAAIE,EAAM;CACxD,EAAE;AACJ,GAEIG,GACEC,oBAAS,IAAI,IAA4B;AAE/C,SAASC,EAAK,GAA4C;CAKxD,OAJA,MAAgB,QAAQ,IAAI,CAAC,OAAO,eAAe,OAAO,0BAA0B,CAAC,CAAC,CAAC,MACpF,CAAC,EAAE,4BAAyB,EAAE,sCAC7BC,EAAsB;EAAE,QAAQ,CAACL,CAAK;EAAG,OAAO,CAAC;EAAG,QAAQM,EAA4B;CAAE,CAAC,CAC/F,GACOJ,EAAY,KAAK,OAAO,MAAS;EACtC,IAAIK,IAAWJ,EAAO,IAAIK,CAAO;EAMjC,OALKD,MACH,IAAWb,EAAQc,EAAQ,CAAC,CAAC,CAAC,MAAM,MAAWC,EAAK,aAAaC,EAAO,OAAO,CAAC,GAChFP,EAAO,IAAIK,GAASD,CAAQ,IAE9B,MAAMA,GACCE;CACT,CAAC;AACH;AAEA,SAASE,EAAoB,GAAiD;CAC5E,OAAO,OAAO,OAAOlB,GAAUc,CAAQ;AACzC;AAgBA,eAAsBK,EACpB,GACA,GACoC;CACpC,IAAMC,IAAKN,EAAS,YAAY;CAChC,IAAI,CAACI,EAAoBE,CAAE,GAAG;CAC9B,IAAML,IAAUf,EAASoB;CAGzB,QADc,MADKT,EAAKI,CAAO,EAAA,CACZ,iBAAiBM,EAAqBC,CAAI,GAAG;EAAE,MAAMP;EAAS,OAAO;CAAO,CACxF,CAAA,CAAM,KAAK,MAAS;EACzB,IAAMQ,IAAsB,CAAC;EAC7B,KAAK,IAAM,EAAE,YAAS,cAAWC,GAAM;GACrC,IAAMpB,IAAOqB,IAAQpB,EAAO,IAAIoB,EAAM,YAAY,CAAC,IAAI,KAAA,GACjDC,IAAWH,EAAO,GAAG,EAAE;GAC7B,AAAIG,KAAYA,EAAS,SAAStB,IAAM,EAAS,WAAWuB,IACvDJ,EAAO,KAAKnB,IAAO;IAAE;IAAS;GAAK,IAAI,EAAE,WAAQ,CAAC;EACzD;EACA,OAAOmB;CACT,CAAC;AACH"}
+{"version":3,"file":"index.js","names":["GRAMMARS","LOADERS","TYPES","colourOf","type","typeOf","PLAIN","THEME","scope","highlighter","loaded","load","createHighlighterCore","createJavaScriptRegexEngine","language","grammar","core","module","isHighlightLanguage","highlight","id","trimTrailingNewlines","code","tokens","line","color","previous","content"],"sources":["../../src/highlight/index.ts"],"sourcesContent":["/*\n * @mitcsutt/kiln-ui/highlight: syntax highlighting for CodeBlock, kept out of the main entry.\n * It runs Shiki (an optional peer dependency) with its JavaScript regex engine, and loads Shiki\n * and each grammar only when the first block in that language is highlighted.\n */\nimport type { CodeToken, CodeTokenType } from '#components/display/CodeBlock'\nimport { trimTrailingNewlines } from '#utils/newlines'\nimport type { HighlighterCore, LanguageRegistration, ThemeRegistration } from 'shiki/core'\n\n/** The languages `highlight` understands, with their usual aliases. */\nexport type HighlightLanguage =\n  | 'js'\n  | 'javascript'\n  | 'jsx'\n  | 'ts'\n  | 'typescript'\n  | 'tsx'\n  | 'bash'\n  | 'sh'\n  | 'shell'\n  | 'shellscript'\n  | 'zsh'\n  | 'json'\n  | 'yaml'\n  | 'yml'\n  | 'diff'\n\ntype Grammar =\n  'javascript' | 'jsx' | 'typescript' | 'tsx' | 'shellscript' | 'json' | 'yaml' | 'diff'\n\nconst GRAMMARS: Record<HighlightLanguage, Grammar> = {\n  js: 'javascript',\n  javascript: 'javascript',\n  jsx: 'jsx',\n  ts: 'typescript',\n  typescript: 'typescript',\n  tsx: 'tsx',\n  bash: 'shellscript',\n  sh: 'shellscript',\n  shell: 'shellscript',\n  shellscript: 'shellscript',\n  zsh: 'shellscript',\n  json: 'json',\n  yaml: 'yaml',\n  yml: 'yaml',\n  diff: 'diff',\n}\n\nconst LOADERS: Record<Grammar, () => Promise<{ default: LanguageRegistration[] }>> = {\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  jsx: () => import('shiki/langs/jsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n  shellscript: () => import('shiki/langs/shellscript.mjs'),\n  json: () => import('shiki/langs/json.mjs'),\n  yaml: () => import('shiki/langs/yaml.mjs'),\n  diff: () => import('shiki/langs/diff.mjs'),\n}\n\nconst TYPES: CodeTokenType[] = [\n  'keyword',\n  'string',\n  'comment',\n  'constant',\n  'function',\n  'type',\n  'tag',\n  'attribute',\n  'punctuation',\n]\n\n/** Each token type gets a stand-in colour, which `highlight` reads back as the type. */\nconst colourOf = (type: CodeTokenType) =>\n  `#0000${(TYPES.indexOf(type) + 1).toString(16).padStart(2, '0')}`\nconst typeOf = new Map(TYPES.map((type) => [colourOf(type), type]))\nconst PLAIN = '#000000'\n\n/** TextMate scopes → token types. A deeper or longer scope wins, so the exceptions follow. */\nconst RULES: [string[], CodeTokenType | null][] = [\n  [['comment', 'punctuation.definition.comment'], 'comment'],\n  [['string', 'punctuation.definition.string'], 'string'],\n  [['meta.template.expression'], null],\n  [\n    [\n      'constant.numeric',\n      'constant.language',\n      'constant.character',\n      'constant.other.option',\n      'variable.language',\n    ],\n    'constant',\n  ],\n  [['keyword', 'storage', 'keyword.operator.new', 'keyword.operator.expression'], 'keyword'],\n  [['entity.name.function', 'support.function'], 'function'],\n  [\n    [\n      'entity.name.type',\n      'entity.name.class',\n      'entity.other.inherited-class',\n      'support.type',\n      'support.class',\n    ],\n    'type',\n  ],\n  [['entity.name.tag'], 'tag'],\n  [['entity.other.attribute-name'], 'attribute'],\n  [['punctuation', 'meta.brace', 'keyword.operator'], 'punctuation'],\n  [\n    ['punctuation.definition.string.template.begin', 'punctuation.definition.string.template.end'],\n    'string',\n  ],\n  [['punctuation.definition.template-expression'], 'punctuation'],\n  // Keys are types in JSON and YAML alike, quotes included.\n  [['punctuation.support.type.property-name', 'entity.name.tag.yaml'], 'type'],\n  // A diff's headers, hunk ranges, and added and removed lines, each with its marker.\n  [\n    ['meta.diff.header', 'punctuation.definition.from-file', 'punctuation.definition.to-file'],\n    'keyword',\n  ],\n  [['meta.diff.range', 'punctuation.definition.range'], 'function'],\n  [['markup.inserted', 'punctuation.definition.inserted'], 'string'],\n  [['markup.deleted', 'punctuation.definition.deleted'], 'constant'],\n]\n\nconst THEME: ThemeRegistration = {\n  name: 'kiln',\n  type: 'light',\n  fg: PLAIN,\n  bg: '#ffffff',\n  settings: RULES.map(([scope, type]) => ({\n    scope,\n    settings: { foreground: type ? colourOf(type) : PLAIN },\n  })),\n}\n\nlet highlighter: Promise<HighlighterCore> | undefined\nconst loaded = new Map<Grammar, Promise<void>>()\n\nfunction load(grammar: Grammar): Promise<HighlighterCore> {\n  highlighter ??= Promise.all([import('shiki/core'), import('shiki/engine/javascript')]).then(\n    ([{ createHighlighterCore }, { createJavaScriptRegexEngine }]) =>\n      createHighlighterCore({ themes: [THEME], langs: [], engine: createJavaScriptRegexEngine() }),\n  )\n  return highlighter.then(async (core) => {\n    let language = loaded.get(grammar)\n    if (!language) {\n      language = LOADERS[grammar]().then((module) => core.loadLanguage(module.default))\n      loaded.set(grammar, language)\n    }\n    await language\n    return core\n  })\n}\n\nfunction isHighlightLanguage(language: string): language is HighlightLanguage {\n  return Object.hasOwn(GRAMMARS, language)\n}\n\n/**\n * Tokens for `CodeBlock`'s `tokens` prop: one array per line of `code`, each token tagged with\n * what it is (keyword, string, comment…) so the theme colours it. Resolves to `undefined` for a\n * language it doesn't know, which `CodeBlock` shows as plain code.\n *\n * @remarks\n * Install `shiki` alongside kiln-ui to use it. Call it wherever your code is ready: in a server\n * component or at build time, so the browser downloads no highlighter, or in the browser, where\n * Shiki and the grammar load on the first call.\n *\n * @example\n * const tokens = await highlight(source, 'tsx')\n * return <CodeBlock code={source} language=\"TSX\" tokens={tokens} />\n */\nexport async function highlight(\n  code: string,\n  language: string,\n): Promise<CodeToken[][] | undefined> {\n  const id = language.toLowerCase()\n  if (!isHighlightLanguage(id)) return undefined\n  const grammar = GRAMMARS[id]\n  const core = await load(grammar)\n  const lines = core.codeToTokensBase(trimTrailingNewlines(code), {\n    lang: grammar,\n    theme: 'kiln',\n  })\n  return lines.map((line) => {\n    const tokens: CodeToken[] = []\n    for (const { content, color } of line) {\n      const type = color ? typeOf.get(color.toLowerCase()) : undefined\n      const previous = tokens.at(-1)\n      if (previous && previous.type === type) previous.content += content\n      else tokens.push(type ? { content, type } : { content })\n    }\n    return tokens\n  })\n}\n"],"mappings":";;AA8BA,IAAMA,IAA+C;CACnD,IAAI;CACJ,YAAY;CACZ,KAAK;CACL,IAAI;CACJ,YAAY;CACZ,KAAK;CACL,MAAM;CACN,IAAI;CACJ,OAAO;CACP,aAAa;CACb,KAAK;CACL,MAAM;CACN,MAAM;CACN,KAAK;CACL,MAAM;AACR,GAEMC,IAA+E;CACnF,kBAAkB,OAAO;CACzB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,WAAW,OAAO;CAClB,mBAAmB,OAAO;CAC1B,YAAY,OAAO;CACnB,YAAY,OAAO;CACnB,YAAY,OAAO;AACrB,GAEMC,IAAyB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAGMC,KAAY,MAChB,SAASD,EAAM,QAAQE,CAAI,IAAI,EAAA,CAAG,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,KAC1DC,IAAS,IAAI,IAAIH,EAAM,KAAK,MAAS,CAACC,EAASC,CAAI,GAAGA,CAAI,CAAC,CAAC,GAC5DE,IAAQ,WAiDRC,IAA2B;CAC/B,MAAM;CACN,MAAM;CACN,IAAID;CACJ,IAAI;CACJ,UAAU;EAlDV,CAAC,CAAC,WAAW,gCAAgC,GAAG,SAAS;EACzD,CAAC,CAAC,UAAU,+BAA+B,GAAG,QAAQ;EACtD,CAAC,CAAC,0BAA0B,GAAG,IAAI;EACnC,CACE;GACE;GACA;GACA;GACA;GACA;EACF,GACA,UACF;EACA,CAAC;GAAC;GAAW;GAAW;GAAwB;EAA6B,GAAG,SAAS;EACzF,CAAC,CAAC,wBAAwB,kBAAkB,GAAG,UAAU;EACzD,CACE;GACE;GACA;GACA;GACA;GACA;EACF,GACA,MACF;EACA,CAAC,CAAC,iBAAiB,GAAG,KAAK;EAC3B,CAAC,CAAC,6BAA6B,GAAG,WAAW;EAC7C,CAAC;GAAC;GAAe;GAAc;EAAkB,GAAG,aAAa;EACjE,CACE,CAAC,gDAAgD,4CAA4C,GAC7F,QACF;EACA,CAAC,CAAC,4CAA4C,GAAG,aAAa;EAE9D,CAAC,CAAC,0CAA0C,sBAAsB,GAAG,MAAM;EAE3E,CACE;GAAC;GAAoB;GAAoC;EAAgC,GACzF,SACF;EACA,CAAC,CAAC,mBAAmB,8BAA8B,GAAG,UAAU;EAChE,CAAC,CAAC,mBAAmB,iCAAiC,GAAG,QAAQ;EACjE,CAAC,CAAC,kBAAkB,gCAAgC,GAAG,UAAU;CAQvD,CAAA,CAAM,KAAK,CAACE,GAAOJ,QAAW;EACtC;EACA,UAAU,EAAE,YAAYA,IAAOD,EAASC,CAAI,IAAIE,EAAM;CACxD,EAAE;AACJ,GAEIG,GACEC,oBAAS,IAAI,IAA4B;AAE/C,SAASC,EAAK,GAA4C;CAKxD,OAJA,MAAgB,QAAQ,IAAI,CAAC,OAAO,eAAe,OAAO,0BAA0B,CAAC,CAAC,CAAC,MACpF,CAAC,EAAE,4BAAyB,EAAE,sCAC7BC,EAAsB;EAAE,QAAQ,CAACL,CAAK;EAAG,OAAO,CAAC;EAAG,QAAQM,EAA4B;CAAE,CAAC,CAC/F,GACOJ,EAAY,KAAK,OAAO,MAAS;EACtC,IAAIK,IAAWJ,EAAO,IAAIK,CAAO;EAMjC,OALKD,MACH,IAAWb,EAAQc,EAAQ,CAAC,CAAC,CAAC,MAAM,MAAWC,EAAK,aAAaC,EAAO,OAAO,CAAC,GAChFP,EAAO,IAAIK,GAASD,CAAQ,IAE9B,MAAMA,GACCE;CACT,CAAC;AACH;AAEA,SAASE,EAAoB,GAAiD;CAC5E,OAAO,OAAO,OAAOlB,GAAUc,CAAQ;AACzC;AAgBA,eAAsBK,EACpB,GACA,GACoC;CACpC,IAAMC,IAAKN,EAAS,YAAY;CAChC,IAAI,CAACI,EAAoBE,CAAE,GAAG;CAC9B,IAAML,IAAUf,EAASoB;CAMzB,QAJc,MADKT,EAAKI,CAAO,EAAA,CACZ,iBAAiBM,EAAqBC,CAAI,GAAG;EAC9D,MAAMP;EACN,OAAO;CACT,CACO,CAAA,CAAM,KAAK,MAAS;EACzB,IAAMQ,IAAsB,CAAC;EAC7B,KAAK,IAAM,EAAE,YAAS,cAAWC,GAAM;GACrC,IAAMpB,IAAOqB,IAAQpB,EAAO,IAAIoB,EAAM,YAAY,CAAC,IAAI,KAAA,GACjDC,IAAWH,EAAO,GAAG,EAAE;GAC7B,AAAIG,KAAYA,EAAS,SAAStB,IAAM,EAAS,WAAWuB,IACvDJ,EAAO,KAAKnB,IAAO;IAAE;IAAS;GAAK,IAAI,EAAE,WAAQ,CAAC;EACzD;EACA,OAAOmB;CACT,CAAC;AACH"}