@upbound/monarch-blocks 0.6.0 → 0.7.1

package/dist/code-block.js

@@ -32,41 +32,11 @@ var __objRest = (source, exclude) => {
 };
 
 // src/code-block.tsx
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Icon } from "@upbound/monarch-core";
 
 // src/lib/utils.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "display-hero",
-            "display-kpi-sm",
-            "display-kpi",
-            "display-kpi-lg",
-            "display-feature",
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "body-lg",
-            "body",
-            "body-sm",
-            "caption",
-            "eyebrow"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+import { cn } from "@upbound/monarch-core/utils";
 
 // src/code-block.tsx
 import {
@@ -78,6 +48,36 @@ import {
   TooltipContent,
   TooltipTrigger
 } from "@upbound/monarch-core";
+
+// src/lib/highlight.ts
+import { createHighlighter } from "shiki";
+var CODE_BLOCK_LANGUAGES = ["tsx", "typescript", "bash", "shell", "json", "css", "yaml"];
+var HIGHLIGHTER_KEY = "__monarch_shiki_highlighter__";
+function getHighlighter() {
+  const g = globalThis;
+  if (!g[HIGHLIGHTER_KEY]) {
+    g[HIGHLIGHTER_KEY] = createHighlighter({
+      themes: ["github-light-high-contrast", "github-dark-dimmed"],
+      langs: [...CODE_BLOCK_LANGUAGES]
+    }).catch((error) => {
+      delete g[HIGHLIGHTER_KEY];
+      throw error;
+    });
+  }
+  return g[HIGHLIGHTER_KEY];
+}
+async function highlightCode(code, lang) {
+  const hl = await getHighlighter();
+  return hl.codeToHtml(code, {
+    lang,
+    themes: {
+      light: "github-light-high-contrast",
+      dark: "github-dark-dimmed"
+    }
+  });
+}
+
+// src/code-block.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function CodeBlock(_a) {
   var _b = _a, {
@@ -118,24 +118,48 @@ function CodeBlockHeader(_a) {
     }, props)
   );
 }
+var LINE_NUMBER_GUTTER = cn(
+  "[&_code]:[counter-reset:line]",
+  "[&_.line]:before:[counter-increment:line]",
+  "[&_.line]:before:content-[counter(line)]",
+  "[&_.line]:before:inline-block",
+  "[&_.line]:before:w-6",
+  "[&_.line]:before:mr-3",
+  "[&_.line]:before:text-right",
+  "[&_.line]:before:text-muted-foreground",
+  "[&_.line]:before:text-[0.75rem]",
+  "[&_.line]:before:select-none"
+);
 function CodeBlockBody(_a) {
   var _b = _a, {
     className,
     code,
-    html,
-    lineNumbers,
     maxHeight,
     copyButton,
     downloadButton
   } = _b, props = __objRest(_b, [
     "className",
     "code",
-    "html",
-    "lineNumbers",
     "maxHeight",
     "copyButton",
     "downloadButton"
   ]);
+  const { content, lineNumbers } = code;
+  const [html, setHtml] = useState(null);
+  const language = code.type === "parsed" ? code.language : null;
+  useEffect(() => {
+    if (!language) {
+      setHtml(null);
+      return;
+    }
+    let cancelled = false;
+    highlightCode(content, language).then((result) => {
+      if (!cancelled) setHtml(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [content, language]);
   return /* @__PURE__ */ jsxs(CardContent, __spreadProps(__spreadValues({ "data-line-numbers": lineNumbers || void 0, className: cn("relative p-0!", className) }, props), { children: [
     (copyButton || downloadButton) && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover/code-block:opacity-100", children: [
       copyButton,
@@ -146,16 +170,20 @@ function CodeBlockBody(_a) {
       {
         className: cn("overflow-x-auto", maxHeight && "overflow-y-auto"),
         style: maxHeight ? { maxHeight } : void 0,
-        children: html ? /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "[&_code]:font-mono [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3",
-            dangerouslySetInnerHTML: { __html: html }
+            className: cn(
+              "[&_code]:font-mono [&_pre]:m-0 [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3",
+              html && "[&_pre]:bg-transparent!",
+              lineNumbers && LINE_NUMBER_GUTTER
+            ),
+            children: html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { className: lineNumbers ? void 0 : "whitespace-pre", children: lineNumbers ? content.split("\n").map((line, i) => /* @__PURE__ */ jsxs("span", { className: "line", children: [
+              line,
+              "\n"
+            ] }, i)) : content }) })
           }
-        ) : lineNumbers ? /* @__PURE__ */ jsx("pre", { className: "p-4 group-data-[size=sm]/code-block:p-3", children: /* @__PURE__ */ jsx("code", { className: "font-mono", children: code.split("\n").map((line, i) => /* @__PURE__ */ jsxs("span", { className: "line", children: [
-          line,
-          "\n"
-        ] }, i)) }) }) : /* @__PURE__ */ jsx("pre", { className: "p-4 group-data-[size=sm]/code-block:p-3", children: /* @__PURE__ */ jsx("code", { className: "font-mono whitespace-pre", children: code }) })
+        )
       }
     )
   ] }));

package/dist/code-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/code-block.tsx","../src/lib/utils.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { Icon } from '@upbound/monarch-core';\n\nimport { cn } from '@/lib/utils';\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@upbound/monarch-core';\n\nfunction CodeBlock({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: React.ComponentProps<'div'> & {\n  variant?: 'default' | 'terminal';\n  size?: 'default' | 'sm';\n}) {\n  return (\n    <Card\n      data-slot=\"code-block\"\n      data-variant={variant}\n      data-size={size}\n      role=\"region\"\n      className={cn(\n        'group/code-block gap-0 overflow-hidden py-0',\n        size === 'default' && 'text-[13px]',\n        size === 'sm' && 'text-body-sm',\n        variant === 'terminal' && 'border-terminal-border bg-terminal-bg text-terminal-fg ring-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <CardHeader\n      className={cn(\n        'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted flex flex-row items-center gap-2 border-b bg-[color-mix(in_oklch,var(--muted)_50%,var(--card))] py-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockBody({\n  className,\n  code,\n  html,\n  lineNumbers,\n  maxHeight,\n  copyButton,\n  downloadButton,\n  ...props\n}: React.ComponentProps<'div'> & {\n  code: string;\n  html?: string;\n  lineNumbers?: boolean;\n  maxHeight?: string;\n  copyButton?: React.ReactNode;\n  downloadButton?: React.ReactNode;\n}) {\n  // Layout note: the copy/download buttons must stay anchored to the\n  // top-right of the visible code area when the content scrolls\n  // horizontally. To make that work the relative containing block\n  // (CardContent) must NOT be the scrollable element — otherwise\n  // `right`-positioning is computed against the scrolled content edge and\n  // the buttons move with the scroll. So the overflow lives on an inner\n  // wrapper and the absolute button group is its sibling under CardContent.\n  return (\n    <CardContent data-line-numbers={lineNumbers || undefined} className={cn('relative p-0!', className)} {...props}>\n      {(copyButton || downloadButton) && (\n        <div className=\"absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover/code-block:opacity-100\">\n          {copyButton}\n          {downloadButton}\n        </div>\n      )}\n      <div\n        className={cn('overflow-x-auto', maxHeight && 'overflow-y-auto')}\n        style={maxHeight ? { maxHeight } : undefined}\n      >\n        {html ? (\n          <div\n            className=\"[&_code]:font-mono [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3\"\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        ) : lineNumbers ? (\n          <pre className=\"p-4 group-data-[size=sm]/code-block:p-3\">\n            <code className=\"font-mono\">\n              {code.split('\\n').map((line, i) => (\n                <span key={i} className=\"line\">\n                  {line}\n                  {'\\n'}\n                </span>\n              ))}\n            </code>\n          </pre>\n        ) : (\n          <pre className=\"p-4 group-data-[size=sm]/code-block:p-3\">\n            <code className=\"font-mono whitespace-pre\">{code}</code>\n          </pre>\n        )}\n      </div>\n    </CardContent>\n  );\n}\n\nfunction CodeBlockFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <CardFooter\n      className={cn(\n        'text-body-sm group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-footer-bg group-data-[variant=terminal]/code-block:text-terminal-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockCopyButton({\n  code,\n  className,\n  ...props\n}: Omit<React.ComponentProps<'button'>, 'children'> & {\n  code: string;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          data-slot=\"code-block-copy-button\"\n          onClick={handleCopy}\n          className={cn(\n            'border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors',\n            'text-muted-foreground hover:bg-accent hover:text-foreground',\n            'focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none',\n            'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg',\n            className,\n          )}\n          aria-label={copied ? 'Copied' : 'Copy code'}\n          {...props}\n        >\n          {copied ? <Icon name=\"check\" size=\"sm\" className=\"text-green-500\" /> : <Icon name=\"copy\" size=\"sm\" />}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent>{copied ? 'Copied' : 'Copy'}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nfunction CodeBlockDownloadButton({\n  code,\n  fileName,\n  mimeType = 'text/plain',\n  className,\n  ...props\n}: Omit<React.ComponentProps<'button'>, 'children'> & {\n  code: string;\n  fileName: string;\n  mimeType?: string;\n}) {\n  const [downloaded, setDownloaded] = useState(false);\n\n  const handleDownload = () => {\n    const blob = new Blob([code], { type: mimeType });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement('a');\n    link.href = url;\n    link.download = fileName;\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    URL.revokeObjectURL(url);\n    setDownloaded(true);\n    setTimeout(() => setDownloaded(false), 2000);\n  };\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          data-slot=\"code-block-download-button\"\n          onClick={handleDownload}\n          className={cn(\n            'border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors',\n            'text-muted-foreground hover:bg-accent hover:text-foreground',\n            'focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none',\n            'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg',\n            className,\n          )}\n          aria-label={downloaded ? 'Downloaded' : 'Download code'}\n          {...props}\n        >\n          {downloaded ? <Icon name=\"check\" size=\"sm\" className=\"text-green-500\" /> : <Icon name=\"download\" size=\"sm\" />}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent>{downloaded ? 'Downloaded' : 'Download'}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nexport { CodeBlock, CodeBlockHeader, CodeBlockBody, CodeBlockFooter, CodeBlockCopyButton, CodeBlockDownloadButton };\n","import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        {\n          text: [\n            'display-hero',\n            'display-kpi-sm',\n            'display-kpi',\n            'display-kpi-lg',\n            'display-feature',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'body-lg',\n            'body',\n            'body-sm',\n            'caption',\n            'eyebrow',\n          ],\n        },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport function sortBy<T>(items: T[], getKey: (item: T) => string): T[] {\n  return [...items].sort((a, b) => getKey(a).localeCompare(getKey(b)));\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/code-block.tsx","../src/lib/utils.ts","../src/lib/highlight.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Icon } from '@upbound/monarch-core';\n\nimport { cn } from '@/lib/utils';\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@upbound/monarch-core';\nimport { highlightCode, type CodeBlockLanguage } from './lib/highlight';\n\nexport type { CodeBlockLanguage } from './lib/highlight';\n\ntype CodeBlockCodeBase = {\n  /** Raw code string — used for clipboard copy, download, and as the rendered text. */\n  content: string;\n  /** Numbers each line in the gutter. */\n  lineNumbers?: boolean;\n};\n\nexport type CodeBlockCode =\n  | (CodeBlockCodeBase & {\n      /** Syntax-highlighted with Shiki inside CodeBlockBody — no highlighting step needed on your end. */\n      type: 'parsed';\n      language: CodeBlockLanguage;\n    })\n  | (CodeBlockCodeBase & {\n      /** Rendered as plain, unhighlighted text. */\n      type: 'raw';\n    });\n\nfunction CodeBlock({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: React.ComponentProps<'div'> & {\n  variant?: 'default' | 'terminal';\n  size?: 'default' | 'sm';\n}) {\n  return (\n    <Card\n      data-slot=\"code-block\"\n      data-variant={variant}\n      data-size={size}\n      role=\"region\"\n      className={cn(\n        'group/code-block gap-0 overflow-hidden py-0',\n        size === 'default' && 'text-[13px]',\n        size === 'sm' && 'text-body-sm',\n        variant === 'terminal' && 'border-terminal-border bg-terminal-bg text-terminal-fg ring-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <CardHeader\n      className={cn(\n        'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted flex flex-row items-center gap-2 border-b bg-[color-mix(in_oklch,var(--muted)_50%,var(--card))] py-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst LINE_NUMBER_GUTTER = cn(\n  '[&_code]:[counter-reset:line]',\n  '[&_.line]:before:[counter-increment:line]',\n  '[&_.line]:before:content-[counter(line)]',\n  '[&_.line]:before:inline-block',\n  '[&_.line]:before:w-6',\n  '[&_.line]:before:mr-3',\n  '[&_.line]:before:text-right',\n  '[&_.line]:before:text-muted-foreground',\n  '[&_.line]:before:text-[0.75rem]',\n  '[&_.line]:before:select-none',\n);\n\nfunction CodeBlockBody({\n  className,\n  code,\n  maxHeight,\n  copyButton,\n  downloadButton,\n  ...props\n}: Omit<React.ComponentProps<'div'>, 'children'> & {\n  code: CodeBlockCode;\n  maxHeight?: string;\n  copyButton?: React.ReactNode;\n  downloadButton?: React.ReactNode;\n}) {\n  const { content, lineNumbers } = code;\n  const [html, setHtml] = useState<string | null>(null);\n  const language = code.type === 'parsed' ? code.language : null;\n\n  useEffect(() => {\n    if (!language) {\n      setHtml(null);\n      return;\n    }\n\n    let cancelled = false;\n    highlightCode(content, language).then(result => {\n      if (!cancelled) setHtml(result);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [content, language]);\n\n  // Layout note: the copy/download buttons must stay anchored to the\n  // top-right of the visible code area when the content scrolls\n  // horizontally. To make that work the relative containing block\n  // (CardContent) must NOT be the scrollable element — otherwise\n  // `right`-positioning is computed against the scrolled content edge and\n  // the buttons move with the scroll. So the overflow lives on an inner\n  // wrapper and the absolute button group is its sibling under CardContent.\n  return (\n    <CardContent data-line-numbers={lineNumbers || undefined} className={cn('relative p-0!', className)} {...props}>\n      {(copyButton || downloadButton) && (\n        <div className=\"absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover/code-block:opacity-100\">\n          {copyButton}\n          {downloadButton}\n        </div>\n      )}\n      <div\n        className={cn('overflow-x-auto', maxHeight && 'overflow-y-auto')}\n        style={maxHeight ? { maxHeight } : undefined}\n      >\n        <div\n          className={cn(\n            '[&_code]:font-mono [&_pre]:m-0 [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3',\n            html && '[&_pre]:bg-transparent!',\n            lineNumbers && LINE_NUMBER_GUTTER,\n          )}\n        >\n          {html ? (\n            <div dangerouslySetInnerHTML={{ __html: html }} />\n          ) : (\n            <pre>\n              <code className={lineNumbers ? undefined : 'whitespace-pre'}>\n                {lineNumbers\n                  ? content.split('\\n').map((line, i) => (\n                      <span key={i} className=\"line\">\n                        {line}\n                        {'\\n'}\n                      </span>\n                    ))\n                  : content}\n              </code>\n            </pre>\n          )}\n        </div>\n      </div>\n    </CardContent>\n  );\n}\n\nfunction CodeBlockFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <CardFooter\n      className={cn(\n        'text-body-sm group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-footer-bg group-data-[variant=terminal]/code-block:text-terminal-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockCopyButton({\n  code,\n  className,\n  ...props\n}: Omit<React.ComponentProps<'button'>, 'children'> & {\n  code: string;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          data-slot=\"code-block-copy-button\"\n          onClick={handleCopy}\n          className={cn(\n            'border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors',\n            'text-muted-foreground hover:bg-accent hover:text-foreground',\n            'focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none',\n            'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg',\n            className,\n          )}\n          aria-label={copied ? 'Copied' : 'Copy code'}\n          {...props}\n        >\n          {copied ? <Icon name=\"check\" size=\"sm\" className=\"text-green-500\" /> : <Icon name=\"copy\" size=\"sm\" />}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent>{copied ? 'Copied' : 'Copy'}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nfunction CodeBlockDownloadButton({\n  code,\n  fileName,\n  mimeType = 'text/plain',\n  className,\n  ...props\n}: Omit<React.ComponentProps<'button'>, 'children'> & {\n  code: string;\n  fileName: string;\n  mimeType?: string;\n}) {\n  const [downloaded, setDownloaded] = useState(false);\n\n  const handleDownload = () => {\n    const blob = new Blob([code], { type: mimeType });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement('a');\n    link.href = url;\n    link.download = fileName;\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    URL.revokeObjectURL(url);\n    setDownloaded(true);\n    setTimeout(() => setDownloaded(false), 2000);\n  };\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          data-slot=\"code-block-download-button\"\n          onClick={handleDownload}\n          className={cn(\n            'border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors',\n            'text-muted-foreground hover:bg-accent hover:text-foreground',\n            'focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none',\n            'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg',\n            className,\n          )}\n          aria-label={downloaded ? 'Downloaded' : 'Download code'}\n          {...props}\n        >\n          {downloaded ? <Icon name=\"check\" size=\"sm\" className=\"text-green-500\" /> : <Icon name=\"download\" size=\"sm\" />}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent>{downloaded ? 'Downloaded' : 'Download'}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nexport { CodeBlock, CodeBlockHeader, CodeBlockBody, CodeBlockFooter, CodeBlockCopyButton, CodeBlockDownloadButton };\n","export { cn } from '@upbound/monarch-core/utils';\n\nexport function sortBy<T>(items: T[], getKey: (item: T) => string): T[] {\n  return [...items].sort((a, b) => getKey(a).localeCompare(getKey(b)));\n}\n","import { createHighlighter, type Highlighter } from 'shiki';\n\nexport const CODE_BLOCK_LANGUAGES = ['tsx', 'typescript', 'bash', 'shell', 'json', 'css', 'yaml'] as const;\n\nexport type CodeBlockLanguage = (typeof CODE_BLOCK_LANGUAGES)[number];\n\nconst HIGHLIGHTER_KEY = '__monarch_shiki_highlighter__';\n\ntype HighlighterGlobal = typeof globalThis & {\n  [HIGHLIGHTER_KEY]?: Promise<Highlighter>;\n};\n\n/**\n * Cache the in-flight Promise, not the resolved instance. `createHighlighter`\n * is async — storing only after `await` lets every concurrent CodeBlockBody\n * start a new highlighter (Shiki warns at 10/20/30 instances). `globalThis`\n * keeps the same promise across HMR module re-evals in the same realm.\n */\nfunction getHighlighter(): Promise<Highlighter> {\n  const g = globalThis as HighlighterGlobal;\n  if (!g[HIGHLIGHTER_KEY]) {\n    g[HIGHLIGHTER_KEY] = createHighlighter({\n      themes: ['github-light-high-contrast', 'github-dark-dimmed'],\n      langs: [...CODE_BLOCK_LANGUAGES],\n    }).catch(error => {\n      delete g[HIGHLIGHTER_KEY];\n      throw error;\n    });\n  }\n  return g[HIGHLIGHTER_KEY];\n}\n\n/**\n * Highlight a code string with Shiki dual themes. Returns raw HTML safe to\n * render via dangerouslySetInnerHTML.\n *\n * Light theme renders as inline `color:` / `background-color:`.\n * Dark theme renders as CSS variables `--shiki-dark` / `--shiki-dark-bg`.\n */\nexport async function highlightCode(code: string, lang: CodeBlockLanguage): Promise<string> {\n  const hl = await getHighlighter();\n  return hl.codeToHtml(code, {\n    lang,\n    themes: {\n      light: 'github-light-high-contrast',\n      dark: 'github-dark-dimmed',\n    },\n  });\n}\n"],"mappings":"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","names":[]}

package/dist/data-table.d.ts

@@ -256,7 +256,12 @@ interface DataTableProps<TData extends RowData> {
     className?: string;
     /** Table layout mode. 'auto' uses native HTML table layout, 'grid' uses CSS Grid with div elements. @default 'auto' */
     layout?: TableLayout;
-    /** When true, table height fits content instead of using viewport-based height constraints. @default false */
+    /**
+     * When true, table height fits content instead of using viewport-based height constraints.
+     * The row scroll area then grows with the rows, so `stickyHeader` has no effect — a sticky
+     * header needs a scroll area that is shorter than its content to stick against.
+     * @default false
+     */
     fitContent?: boolean;
     serverSidePagination?: boolean;
     onRowRender?(row: TData): DataTableRowProps;
@@ -312,6 +317,10 @@ interface DataTableProps<TData extends RowData> {
     /**
      * Enable sticky column headers within the table scroll area.
      * Pass `true` for defaults, or an object to customise offset / row height.
+     *
+     * This caps the scroll area at a viewport-relative height so the rows scroll under the
+     * header. `fitContent` removes that cap, so the two props do not work together: with
+     * `fitContent` the table grows to its content and the header does not stick.
      */
     stickyHeader?: StickyHeaderConfig;
     /** When set, renders the CEL filter builder in the filter row instead of column filters. */

package/dist/data-table.js

@@ -129,37 +129,7 @@ import {
 import { Icon } from "@upbound/monarch-core";
 
 // src/lib/utils.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "display-hero",
-            "display-kpi-sm",
-            "display-kpi",
-            "display-kpi-lg",
-            "display-feature",
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "body-lg",
-            "body",
-            "body-sm",
-            "caption",
-            "eyebrow"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+import { cn } from "@upbound/monarch-core/utils";
 function sortBy(items, getKey) {
   return [...items].sort((a, b) => getKey(a).localeCompare(getKey(b)));
 }
@@ -167,10 +137,9 @@ function sortBy(items, getKey) {
 // src/lib/data-table/utils.ts
 var TO_EACH_SIDE = 2;
 function normalizeColumnOrdering(columnOrdering, allColumnIds) {
-  const validIds = new Set(allColumnIds);
   const seenIds = /* @__PURE__ */ new Set();
   const trackedColumnIds = columnOrdering.filter((columnId) => {
-    if (!validIds.has(columnId) || seenIds.has(columnId)) return false;
+    if (seenIds.has(columnId)) return false;
     seenIds.add(columnId);
     return true;
   });
@@ -1829,7 +1798,7 @@ function CelAddFilterButton({
         if (column) onSelect(column.id);
       },
       children: [
-        /* @__PURE__ */ jsxs4(ComboboxTrigger, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx5(Button3, { variant: "outline" }), children: [
+        /* @__PURE__ */ jsxs4(ComboboxTrigger, { "aria-label": "Add filter", showIndicator: false, render: /* @__PURE__ */ jsx5(Button3, { variant: "outline" }), children: [
           /* @__PURE__ */ jsx5(Icon3, { name: "plus", "data-icon": "inline-start" }),
           "Add filter"
         ] }),
@@ -3296,9 +3265,9 @@ function DataTableSortIcon({ sortOrder }) {
   return /* @__PURE__ */ jsx9(
     Icon7,
     {
-      name: sortOrder === "asc" ? "arrow-up" : "arrow-down",
       size: "xs",
-      className: "text-primary group-hover/col-actions:text-foreground group-data-[state=open]/col-actions:text-foreground mr-0.5 shrink-0"
+      name: sortOrder === "asc" ? "arrow-up" : "arrow-down",
+      className: "text-foreground group-hover/col-actions:text-foreground group-data-[state=open]/col-actions:text-foreground mr-0.5 shrink-0"
     }
   );
 }
@@ -3390,7 +3359,7 @@ function HeaderCellContent({
       "aria-label": shouldShowActionsMenu ? headerTitle ? `${headerTitle} column actions` : "Column actions" : void 0,
       className: cn(
         "group/col-actions text-muted-foreground -mx-2 -my-1 flex min-w-0 items-center gap-1 truncate rounded-md px-2 py-1 text-left font-medium motion-safe:transition-colors",
-        sorted && "text-primary",
+        sorted && "text-foreground",
         shouldShowActionsMenu ? "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 cursor-pointer" : "cursor-default"
       ),
       children: [
@@ -3878,7 +3847,7 @@ function FilterBar(_a) {
               if (filter) handleAddFilter(filter.key);
             },
             children: [
-              /* @__PURE__ */ jsxs9(ComboboxTrigger2, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx10(Button6, { variant: "outline" }), children: [
+              /* @__PURE__ */ jsxs9(ComboboxTrigger2, { "aria-label": "Add filter", showIndicator: false, render: /* @__PURE__ */ jsx10(Button6, { variant: "outline" }), children: [
                 /* @__PURE__ */ jsx10(Icon8, { name: "plus", "data-icon": "inline-start" }),
                 "Add filter"
               ] }),
@@ -4434,6 +4403,7 @@ function SectionHeaderDescription(_a) {
 // src/data-table/data-table.tsx
 import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_PAGE_SIZE = 20;
+var STICKY_HEADER_MAX_HEIGHT_CLASS = "max-h-[calc(100svh-250px)]";
 function DataTable({
   id,
   config,
@@ -4771,9 +4741,10 @@ function DataTable({
             "div",
             {
               ref: tableBodyScrollRef,
+              "data-testid": "table-scroll-container",
               className: cn(
                 "min-h-0 flex-1 overflow-auto rounded-lg border **:data-[slot=table-container]:overflow-visible",
-                !!stickyHeader && "max-h-[calc(100svh-250px)]"
+                !!stickyHeader && !fitContent && STICKY_HEADER_MAX_HEIGHT_CLASS
               ),
               children: /* @__PURE__ */ jsxs10(
                 DataTableRoot,