@upbound/monarch-blocks 0.5.0 → 0.7.0

package/dist/code-block.js

@@ -32,7 +32,7 @@ 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
@@ -78,6 +78,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 +148,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 +200,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"],"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","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","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

@@ -1,8 +1,10 @@
 import * as React$1 from 'react';
 import { ReactNode, Dispatch, SetStateAction, ComponentType } from 'react';
 import { RowData, ColumnFilter, Cell, Column, ColumnOrderState, Row, ColumnDef, CellContext, HeaderGroup, TableOptions, TableState, InitialTableState, SortingFn, FilterFn, ExpandedState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, ColumnPinningState, GroupingState, OnChangeFn, ColumnSizingState } from '@tanstack/react-table';
-import { DropdownMenuItem, IconName } from '@upbound/monarch-core';
+import { DropdownMenuItem } from '@upbound/monarch-core';
 import { f as CelFilterSchema, g as CelFilterTree, k as CompileResult, i as CelRestrictedOptionSelectPayload } from './types-BULiU2qC.js';
+import { T as TableDataState, a as DataTableEmptyView } from './empty-view-DO36LNvk.js';
+export { D as DataTableEmptyConfig, d as defaultEmptyConfig, b as defaultErrorConfig, c as defaultNoFilterFoundConfig } from './empty-view-DO36LNvk.js';
 
 /** A single entry (or nested submenu) in a cell's contextual right-click menu, alongside the built-in "Filter by this value" item. */
 type ContextualMenuAction<TData extends RowData = RowData, TValue = unknown> = {
@@ -86,180 +88,6 @@ declare function TimestampCell({ timestamp }: {
     timestamp?: Date | string | number;
 }): React$1.JSX.Element;
 
-/**
- * Non-CEL column filter definitions — the `meta.filter` vocabulary consumed by
- * contextual (right-click cell) filtering and by the plain filter bar.
- * Mirrors TableWrapper's `Filters/types.ts` shapes; `id` is omitted here since
- * it comes from the owning `ColumnDef.id`, not the filter definition itself.
- */
-type ColumnFilterType = 'checkbox' | 'radio' | 'dateRange' | 'text' | 'multiText';
-type ColumnFilterOption = {
-    label: string;
-    value: string;
-    disabled?: boolean;
-    children?: ColumnFilterOption[];
-};
-type FetchColumnFilterOptionsArgs = {
-    query: string;
-    page: number;
-    signal: AbortSignal;
-};
-type FetchColumnFilterOptionsResult = {
-    items: ColumnFilterOption[];
-    hasMore: boolean;
-};
-type FetchColumnFilterOptions = (args: FetchColumnFilterOptionsArgs) => Promise<FetchColumnFilterOptionsResult>;
-type ColumnFilterBase = {
-    title: string;
-    type: ColumnFilterType;
-    order?: number;
-};
-type StaticCheckboxColumnFilter = ColumnFilterBase & {
-    type: 'checkbox';
-    options: string[] | ColumnFilterOption[];
-    fetchFilterOptions?: never;
-    /** Whether the chip's value popup is a searchable Combobox. Defaults to `true`. */
-    searchable?: boolean;
-};
-type AsyncCheckboxColumnFilter = ColumnFilterBase & {
-    type: 'checkbox';
-    fetchFilterOptions: FetchColumnFilterOptions;
-    options?: never;
-    /** Whether the chip's value popup is a searchable Combobox. Defaults to `true`. */
-    searchable?: boolean;
-};
-type CheckboxColumnFilter = StaticCheckboxColumnFilter | AsyncCheckboxColumnFilter;
-type RadioColumnFilter = ColumnFilterBase & {
-    type: 'radio';
-    options: string[] | ColumnFilterOption[];
-    /** Whether the chip's value popup is a searchable Combobox. Defaults to `true`. */
-    searchable?: boolean;
-};
-type DateRangeColumnFilter = ColumnFilterBase & {
-    type: 'dateRange';
-    /** When true, always show time inputs. When false, never show them. When omitted, auto-detect from value. */
-    includeTime?: boolean;
-};
-type TextColumnFilter = ColumnFilterBase & {
-    type: 'text';
-    placeholder?: string;
-};
-type MultiTextColumnFilter = ColumnFilterBase & {
-    type: 'multiText';
-    /** Defaults to comma (`,`) when omitted. */
-    delimiter?: string;
-    description?: string;
-    placeholder?: string;
-};
-type ColumnFilterDefinition = CheckboxColumnFilter | DateRangeColumnFilter | RadioColumnFilter | TextColumnFilter | MultiTextColumnFilter;
-type CheckboxColumnFilterValue = string[] | undefined;
-type RadioColumnFilterValue = string | undefined;
-type DateRangeColumnFilterValue = {
-    startDate: Date | null;
-    endDate: Date | null;
-} | undefined;
-type TextColumnFilterValue = string | undefined;
-type MultiTextColumnFilterValue = string[] | undefined;
-type ColumnFilterValue = CheckboxColumnFilterValue | RadioColumnFilterValue | DateRangeColumnFilterValue | TextColumnFilterValue | MultiTextColumnFilterValue;
-
-/** Derives a contextual (right-click cell) column-filter value from a cell. */
-type ContextualFilterValueParser<TData extends RowData, TValue> = (cell: Cell<TData, TValue>) => ColumnFilterValue | undefined;
-/** Derives a contextual (right-click cell) global-search term from a cell. */
-type ContextualGlobalSearchValueParser<TData extends RowData, TValue> = (cell: Cell<TData, TValue>) => string | undefined;
-/** A fixed-width grid track: sizes to content or an explicit CSS length. */
-type GridColumnFixed = {
-    fixed: string;
-    flex?: never;
-};
-type GridColumnFlexContentMin = {
-    min: 'max-content' | 'min-content';
-    minCap?: string;
-};
-type GridColumnFlexFixedMin = {
-    min?: string;
-    minCap?: never;
-};
-/** A proportional grid track: shares space by weight, with optional min/max. */
-type GridColumnFlex = {
-    flex: number;
-    max?: string;
-    fixed?: never;
-} & (GridColumnFlexContentMin | GridColumnFlexFixedMin);
-/**
- * Column sizing for grid layout mode.
- *
- * Fixed column (sizes to content or explicit value):
- *   { fixed: 'max-content' }
- *   { fixed: '200px' }
- *
- * Proportional column (shares space by weight, with optional min/max):
- *   { flex: 2, min: '100px' }
- *   { flex: 0.5, min: 'max-content' }
- *   { flex: 0.5, min: 'max-content', minCap: '200px' }
- *   { flex: 1, min: '80px', max: '500px' }
- */
-type GridColumnSizing = GridColumnFixed | GridColumnFlex;
-/**
- * Column-def metadata `DataTable` reads — a straight port of TableWrapper's
- * `ColumnMeta` module augmentation. Import this file for its side effect
- * (`import '@/lib/data-table/table-meta'`) wherever a `ColumnDef` is authored
- * with any of these fields.
- */
-declare module '@tanstack/react-table' {
-    interface ColumnMeta<TData extends RowData, TValue> {
-        /** Pins the column left or right. Pinned columns are excluded from column reordering. */
-        pinning?: 'left' | 'right';
-        /** Marks an actions column — hides its header label and excludes it from contextual filtering. */
-        actions?: boolean;
-        /** The column's non-CEL filter definition, read by the plain filter bar and contextual filtering. */
-        filter?: ColumnFilterDefinition;
-        /** Parses a cell into a filter value for contextual (right-click) cell filtering. */
-        contextualFilterValue?: ContextualFilterValueParser<TData, TValue>;
-        /** Parses a cell into a search term for contextual (right-click) global search. */
-        contextualGlobalSearchValue?: ContextualGlobalSearchValueParser<TData, TValue>;
-        /** When true, the column is used only for filtering and is never rendered in the table. */
-        filterOnly?: boolean;
-        /** Column sizing for `layout="grid"` mode — see `GridColumnSizing`. */
-        grid?: GridColumnSizing;
-    }
-}
-
-type TableDataState = 'empty' | 'loading' | 'error' | 'success';
-
-/**
- * Monarch-native equivalent of TableWrapper's `EmptyConfig` — same four
- * states (error / empty / filtered-empty), rebuilt on Monarch's `Empty`
- * compound API instead of a single props-driven component. Two deliberate
- * adaptations: `icon` takes a Monarch `IconName` (no FontAwesome dependency),
- * and `action` is a rendered node rather than a `ComponentType` reference.
- * `details` has no native `Empty` slot — it composes `Alert` instead.
- */
-type DataTableEmptyConfig = {
-    icon?: IconName;
-    header?: React$1.ReactNode;
-    subheader?: React$1.ReactNode;
-    details?: React$1.ReactNode;
-    action?: React$1.ReactNode;
-    className?: string;
-    wrapperClassName?: string;
-};
-declare const defaultErrorConfig: DataTableEmptyConfig;
-declare const defaultEmptyConfig: DataTableEmptyConfig;
-declare const defaultNoFilterFoundConfig: DataTableEmptyConfig;
-type DataTableEmptyView = {
-    empty?: DataTableEmptyConfig;
-    error?: DataTableEmptyConfig;
-    filter?: DataTableEmptyConfig;
-};
-declare function DataTableEmptyView({ emptyView, tableState, filterCount, resetFilters, className, }: {
-    emptyView?: DataTableEmptyView;
-    /** `'success'`/`'loading'` render nothing here — the table body handles those. */
-    tableState: TableDataState;
-    filterCount: number;
-    resetFilters: () => void;
-    className?: string;
-}): React$1.JSX.Element;
-
 type RowCountRelation = 'eq' | 'gt';
 /** Pass `true` for defaults, `false` to disable the footer entirely (handled by the caller, not this component), or an object to toggle individual parts. */
 type DataTablePaginationConfig = boolean | {
@@ -533,4 +361,4 @@ type ViewFilterProps<TData extends RowData> = {
  */
 declare function ViewFilter<TData extends RowData>({ columns, columnFilters, onColumnFiltersChange, className, }: ViewFilterProps<TData>): React$1.JSX.Element;
 
-export { CellContextualFilter, type CellContextualFilterProps, ColumnOptions, type ColumnOptionsProps, type ContextualMenuAction, DataTable, DataTableBody, type DataTableCelFilterConfig, DataTableCell, type DataTableEmptyConfig, DataTableEmptyView, DataTableExpandedRow, type DataTableFilterVisibilityConfig, DataTableGroupRow, DataTableHeader, DataTablePagination, type DataTablePaginationConfig, type DataTablePaginationProps, type DataTableProps, DataTableRow, type DataTableRowProps, DataTableSkeletonBody, DataTableValueCell, type DataTableValueCellProps, ExpandButton, RowActionItem, RowActions, type RowCountRelation, type StickyHeaderConfig, type TableHookOptions, type TableLayout, TimestampCell, ViewFilter, type ViewFilterProps, defaultEmptyConfig, defaultErrorConfig, defaultNoFilterFoundConfig, getActionsColumnDefinition, getExpandColumnDefinition, normalizePageSizeOptions };
+export { CellContextualFilter, type CellContextualFilterProps, ColumnOptions, type ColumnOptionsProps, type ContextualMenuAction, DataTable, DataTableBody, type DataTableCelFilterConfig, DataTableCell, DataTableEmptyView, DataTableExpandedRow, type DataTableFilterVisibilityConfig, DataTableGroupRow, DataTableHeader, DataTablePagination, type DataTablePaginationConfig, type DataTablePaginationProps, type DataTableProps, DataTableRow, type DataTableRowProps, DataTableSkeletonBody, DataTableValueCell, type DataTableValueCellProps, ExpandButton, RowActionItem, RowActions, type RowCountRelation, type StickyHeaderConfig, type TableHookOptions, type TableLayout, TimestampCell, ViewFilter, type ViewFilterProps, getActionsColumnDefinition, getExpandColumnDefinition, normalizePageSizeOptions };

package/dist/data-table.js

@@ -99,7 +99,15 @@ function CellContextualFilter({
     );
   }
   return /* @__PURE__ */ jsxs(ContextMenuContent, { children: [
-    /* @__PURE__ */ jsx(ContextMenuItem, { disabled, onClick: (event) => event.stopPropagation(), onSelect: handleSelect, children: "Filter by this value" }),
+    /* @__PURE__ */ jsx(
+      ContextMenuItem,
+      {
+        disabled,
+        onClick: (event) => event.stopPropagation(),
+        onSelect: handleSelect,
+        children: "Filter by this value"
+      }
+    ),
     contextualMenuActions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ContextMenuSeparator, {}),
       contextualMenuActions.map(renderAction)
@@ -152,6 +160,9 @@ var twMerge = extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function sortBy(items, getKey) {
+  return [...items].sort((a, b) => getKey(a).localeCompare(getKey(b)));
+}
 
 // src/lib/data-table/utils.ts
 var TO_EACH_SIDE = 2;
@@ -601,8 +612,25 @@ function RowActions({
   contentClassName
 }) {
   return /* @__PURE__ */ jsxs3(DropdownMenu2, { children: [
-    /* @__PURE__ */ jsx4(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx4(Button2, { variant: "ghost", size: "icon-xs", "aria-label": "Row actions", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx4(Icon2, { name: "ellipsis-vertical", size: "sm" }) }) }),
-    /* @__PURE__ */ jsx4(DropdownMenuContent2, { align, className: contentClassName, onClick: (event) => event.stopPropagation(), children })
+    /* @__PURE__ */ jsx4(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx4(
+      Button2,
+      {
+        variant: "ghost",
+        size: "icon-xs",
+        "aria-label": "Row actions",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx4(Icon2, { name: "ellipsis-vertical", size: "sm" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(
+      DropdownMenuContent2,
+      {
+        align,
+        className: contentClassName,
+        onClick: (event) => event.stopPropagation(),
+        children
+      }
+    )
   ] });
 }
 function RowActionItem({
@@ -1787,7 +1815,10 @@ function CelAddFilterButton({
     list.push(column);
     groupMap.set(key, list);
   }
-  const groups = Array.from(groupMap.entries()).map(([value, items]) => ({ value, items }));
+  const groups = sortBy(
+    Array.from(groupMap.entries()).map(([value, items]) => ({ value, items: sortBy(items, (item) => item.title) })),
+    (group) => group.value
+  );
   return /* @__PURE__ */ jsxs4(
     Combobox,
     {
@@ -1798,7 +1829,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"
         ] }),
@@ -2015,7 +2046,7 @@ function CelCheckboxComboboxPill({
   container
 }) {
   var _a;
-  const options = (_a = columnDef.options) != null ? _a : [];
+  const options = sortBy((_a = columnDef.options) != null ? _a : [], (o) => o.label);
   const value = isCheckboxCelValue(condition.value) ? condition.value : [];
   const selected = options.filter((option) => value.includes(option.value));
   const allowedOperators = getAllowedOperators(columnDef);
@@ -2104,7 +2135,7 @@ function CelRadioComboboxPill({
   container
 }) {
   var _a, _b;
-  const options = (_a = columnDef.options) != null ? _a : [];
+  const options = sortBy((_a = columnDef.options) != null ? _a : [], (o) => o.label);
   const value = typeof condition.value === "string" ? condition.value : "";
   const selected = (_b = options.find((option) => option.value === value)) != null ? _b : null;
   const allowedOperators = getAllowedOperators(columnDef);
@@ -3153,6 +3184,7 @@ function DataTablePagination({
             PaginationLink,
             {
               href: "#",
+              size: "icon",
               isActive: page === currentPage,
               onClick: (e) => {
                 e.preventDefault();
@@ -3264,9 +3296,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"
     }
   );
 }
@@ -3358,7 +3390,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: [
@@ -3794,6 +3826,9 @@ function composeRefs(...refs) {
     }
   };
 }
+function hasOrder(filter) {
+  return typeof filter.order === "number";
+}
 function FilterBar(_a) {
   var _b = _a, {
     filters,
@@ -3815,7 +3850,8 @@ function FilterBar(_a) {
     "ref"
   ]);
   const usedKeys = new Set(activeFilters.map((f) => f.key));
-  const availableFilters = filters.filter((f) => !usedKeys.has(f.key));
+  const remainingFilters = filters.filter((f) => !usedKeys.has(f.key));
+  const availableFilters = filters.some(hasOrder) ? remainingFilters : sortBy(remainingFilters, (f) => f.label);
   const shouldShowFilters = availableFilters.length > 0 || activeFilters.length > 0;
   const [pendingOpenKey, setPendingOpenKey] = React7.useState(null);
   function handleAddFilter(key) {
@@ -3842,7 +3878,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"
               ] }),
@@ -3950,7 +3986,8 @@ function CheckboxFilterChip({
   onRemove
 }) {
   var _a, _b;
-  const { label, options, searchable = false } = definition;
+  const { label, searchable = false } = definition;
+  const options = sortBy(definition.options, (o) => o.label);
   const values = asCheckboxValue(value);
   const displayLabel = values.length === 0 ? "Any" : values.length === 1 ? (_b = (_a = options.find((o) => o.value === values[0])) == null ? void 0 : _a.label) != null ? _b : values[0] : `${values.length} selected`;
   function toggle(optionValue) {
@@ -4035,7 +4072,8 @@ function RadioFilterChip({
   onRemove
 }) {
   var _a, _b, _c;
-  const { label, options, searchable = false } = definition;
+  const { label, searchable = false } = definition;
+  const options = sortBy(definition.options, (o) => o.label);
   const selectedValue = asRadioValue(value);
   const displayLabel = selectedValue ? (_b = (_a = options.find((o) => o.value === selectedValue)) == null ? void 0 : _a.label) != null ? _b : selectedValue : "Any";
   const selected = (_c = options.find((o) => o.value === selectedValue)) != null ? _c : null;
@@ -4290,21 +4328,21 @@ function toFilterOption(opt) {
   return typeof opt === "string" ? { value: opt, label: opt } : { value: opt.value, label: opt.label };
 }
 function toFilterBarDefinition(key, filter) {
-  var _a, _b, _c;
-  const base = { key, label: filter.title, order: (_a = filter.order) != null ? _a : 0 };
+  var _a, _b;
+  const base = { key, label: filter.title, order: filter.order };
   if (isCheckboxColumnFilter(filter)) {
     const options = "options" in filter && filter.options ? filter.options : [];
     return __spreadProps(__spreadValues({}, base), {
       type: "checkbox",
       options: options.map(toFilterOption),
-      searchable: (_b = filter.searchable) != null ? _b : true
+      searchable: (_a = filter.searchable) != null ? _a : true
     });
   }
   if (isRadioColumnFilter(filter)) {
     return __spreadProps(__spreadValues({}, base), {
       type: "radio",
       options: filter.options.map(toFilterOption),
-      searchable: (_c = filter.searchable) != null ? _c : true
+      searchable: (_b = filter.searchable) != null ? _b : true
     });
   }
   if (isDateRangeColumnFilter(filter)) {
@@ -4337,7 +4375,12 @@ function ViewFilter({
     [columns]
   );
   const filterDefinitions = React8.useMemo(
-    () => filterableColumns.map(({ key, filter }) => toFilterBarDefinition(key, filter)).sort((a, b) => a.order - b.order),
+    () => filterableColumns.map(({ key, filter }) => toFilterBarDefinition(key, filter)).sort((a, b) => {
+      if (a.order == null && b.order == null) return 0;
+      if (a.order == null) return 1;
+      if (b.order == null) return -1;
+      return a.order - b.order;
+    }),
     [filterableColumns]
   );
   const emptyValueByKey = React8.useMemo(