@flanksource/clicky-ui 0.3.14 → 0.3.16

package/dist/layout/Section.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Section.cjs","sources":["../../src/layout/Section.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\n\nexport type SectionProps = {\n  /** Header title. */\n  title: ReactNode;\n  /**\n   * Optional right-aligned header summary. The summary is a sibling of the\n   * collapse toggle, never a descendant of it — so a summary containing\n   * interactive content (filter tabs, links) is valid DOM and its clicks do\n   * not toggle the section. When a summary is present, only the chevron + the\n   * title toggle; the summary region does not.\n   */\n  summary?: ReactNode;\n  /**\n   * Whether the section can collapse. Defaults to true. When false the body is\n   * always rendered, the header has no chevron and is not clickable — use for a\n   * fixed panel that should never hide its content.\n   */\n  collapsible?: boolean;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when the section is toggled. */\n  onToggle?: (open: boolean) => void;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Semantic border accent. */\n  tone?: \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n  /** Classes applied to the section root. */\n  className?: string;\n  /** Classes applied to the clickable header. */\n  headerClassName?: string;\n  /** Classes applied to the content body. */\n  bodyClassName?: string;\n  /** Collapsible content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<NonNullable<SectionProps[\"tone\"]>, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-red-500\",\n  warning: \"border-l-2 border-yellow-500\",\n  success: \"border-l-2 border-green-500\",\n  info: \"border-l-2 border-blue-500\",\n};\n\nexport function Section({\n  title,\n  summary,\n  collapsible = true,\n  defaultOpen = false,\n  open: openProp,\n  onToggle,\n  icon,\n  tone = \"default\",\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: SectionProps) {\n  const isControlled = openProp !== undefined;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  // A non-collapsible section is permanently open — there is no toggle to track.\n  const open = !collapsible || (isControlled ? openProp : innerOpen);\n\n  function toggle() {\n    const next = !open;\n    if (!isControlled) setInnerOpen(next);\n    onToggle?.(next);\n  }\n\n  const leading = (\n    <>\n      {collapsible && (\n        <Icon\n          icon={open ? UiChevronDown : UiChevronRight}\n          className=\"text-muted-foreground text-xs\"\n        />\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-base\" />\n      )}\n      <span className=\"font-medium text-sm flex-1 truncate\">{title}</span>\n    </>\n  );\n\n  return (\n    <div className={cn(\"rounded-md border border-border bg-background\", toneRing[tone], className)}>\n      {/* The header is always a plain row so the summary (which may hold its own\n          interactive content) is never nested inside the toggle button. Only the\n          chevron + title region toggles; the summary is a sibling of it. */}\n      <div\n        className={cn(\n          \"w-full flex items-center gap-2 px-density-3 py-density-2 text-left\",\n          headerClassName,\n        )}\n      >\n        {collapsible ? (\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={open}\n            className=\"flex flex-1 min-w-0 items-center gap-2 text-left rounded-sm hover:bg-accent/50 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          >\n            {leading}\n          </button>\n        ) : (\n          <div className=\"flex flex-1 min-w-0 items-center gap-2\">{leading}</div>\n        )}\n        {summary && <span className=\"text-xs text-muted-foreground shrink-0\">{summary}</span>}\n      </div>\n      {open && (\n        <div className={cn(\"px-density-3 py-density-2 border-t border-border\", bodyClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport type DetailEmptyStateProps = {\n  /** Optional icon shown above the label. */\n  icon?: string | StaticIconComponent;\n  /** Primary empty-state text. */\n  label: ReactNode;\n  /** Secondary empty-state text. */\n  description?: ReactNode;\n  /** Classes applied to the empty-state root. */\n  className?: string;\n};\n\nexport function DetailEmptyState({ icon, label, description, className }: DetailEmptyStateProps) {\n  return (\n    <div className={cn(\"p-density-6 text-center text-muted-foreground\", className)}>\n      {icon && (\n        <Icon\n          {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n          className=\"text-3xl mb-density-2\"\n        />\n      )}\n      <p className=\"text-sm\">{label}</p>\n      {description && <p className=\"text-xs mt-density-1 opacity-70\">{description}</p>}\n    </div>\n  );\n}\n"],"names":["useState","jsxs","Fragment","jsx","Icon","UiChevronDown","UiChevronRight","cn"],"mappings":";;;;;;;;AA0CA,MAAM,WAA8D;AAAA,EAClE,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,eAAe,aAAa;AAClC,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,WAAW;AAEtD,QAAM,OAAO,CAAC,gBAAgB,eAAe,WAAW;AAExD,WAAS,SAAS;AAChB,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,aAAc,cAAa,IAAI;AACpC,yCAAW;AAAA,EACb;AAEA,QAAM,UACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,IAAA,eACCC,2BAAAA;AAAAA,MAACC,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAM,OAAOC,cAAAA,gBAAgBC,eAAAA;AAAAA,QAC7B,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,QACCH,2BAAAA,IAACC,KAAAA,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,SAAS,EAAE,KAAA,GAAS,WAAU,YAAA,CAAY;AAAA,IAE1FD,2BAAAA,IAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,MAAA,CAAM;AAAA,EAAA,GAC/D;AAGF,SACEF,gCAAC,SAAI,WAAWM,MAAAA,GAAG,iDAAiD,SAAS,IAAI,GAAG,SAAS,GAI3F,UAAA;AAAA,IAAAN,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWM,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,cACCJ,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,iBAAe;AAAA,cACf,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA,IAGHA,2BAAAA,IAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,SAAQ;AAAA,UAElE,WAAWA,2BAAAA,IAAC,QAAA,EAAK,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE/E,uCACE,OAAA,EAAI,WAAWI,MAAAA,GAAG,oDAAoD,aAAa,GACjF,SAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAaO,SAAS,iBAAiB,EAAE,MAAM,OAAO,aAAa,aAAoC;AAC/F,yCACG,OAAA,EAAI,WAAWA,MAAAA,GAAG,iDAAiD,SAAS,GAC1E,UAAA;AAAA,IAAA,QACCJ,2BAAAA;AAAAA,MAACC,KAAAA;AAAAA,MAAA;AAAA,QACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,QACnD,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGdD,2BAAAA,IAAC,KAAA,EAAE,WAAU,WAAW,UAAA,OAAM;AAAA,IAC7B,eAAeA,2BAAAA,IAAC,KAAA,EAAE,WAAU,mCAAmC,UAAA,YAAA,CAAY;AAAA,EAAA,GAC9E;AAEJ;;;"}
+{"version":3,"file":"Section.cjs","sources":["../../src/layout/Section.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { PanelFrame, type PanelTone } from \"./PanelFrame\";\n\nexport type SectionProps = {\n  /** Header title. */\n  title: ReactNode;\n  /**\n   * Optional right-aligned header summary. The summary is a sibling of the\n   * collapse toggle, never a descendant of it — so a summary containing\n   * interactive content (filter tabs, links) is valid DOM and its clicks do\n   * not toggle the section. When a summary is present, only the chevron + the\n   * title toggle; the summary region does not.\n   */\n  summary?: ReactNode;\n  /**\n   * Whether the section can collapse. Defaults to true. When false the body is\n   * always rendered, the header has no chevron and is not clickable — use for a\n   * fixed panel that should never hide its content.\n   */\n  collapsible?: boolean;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when the section is toggled. */\n  onToggle?: (open: boolean) => void;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Semantic border accent. */\n  tone?: PanelTone;\n  /** Classes applied to the section root. */\n  className?: string;\n  /** Classes applied to the clickable header. */\n  headerClassName?: string;\n  /** Classes applied to the content body. */\n  bodyClassName?: string;\n  /** Collapsible content. */\n  children: ReactNode;\n};\n\nexport function Section({\n  title,\n  summary,\n  collapsible = true,\n  defaultOpen = false,\n  open: openProp,\n  onToggle,\n  icon,\n  tone = \"default\",\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: SectionProps) {\n  const isControlled = openProp !== undefined;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  // A non-collapsible section is permanently open — there is no toggle to track.\n  const open = !collapsible || (isControlled ? openProp : innerOpen);\n\n  function toggle() {\n    const next = !open;\n    if (!isControlled) setInnerOpen(next);\n    onToggle?.(next);\n  }\n\n  const leading = (\n    <>\n      {collapsible && (\n        <Icon\n          icon={open ? UiChevronDown : UiChevronRight}\n          className=\"text-muted-foreground text-xs\"\n        />\n      )}\n      {icon && (\n        <Icon\n          {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n          className=\"text-base\"\n        />\n      )}\n      <span className=\"font-medium text-sm flex-1 truncate\">{title}</span>\n    </>\n  );\n\n  return (\n    <PanelFrame\n      header={\n        <>\n          {collapsible ? (\n            <button\n              type=\"button\"\n              onClick={toggle}\n              aria-expanded={open}\n              className=\"flex min-w-0 flex-1 items-center gap-2 rounded-sm text-left transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            >\n              {leading}\n            </button>\n          ) : (\n            <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n              {leading}\n            </div>\n          )}\n          {summary && (\n            <span className=\"shrink-0 text-xs text-muted-foreground\">\n              {summary}\n            </span>\n          )}\n        </>\n      }\n      tone={tone}\n      bodyVisible={open}\n      className={cn(\"overflow-visible bg-background\", className)}\n      headerClassName={cn(\"w-full text-left\", headerClassName)}\n      {...(bodyClassName !== undefined ? { bodyClassName } : {})}\n    >\n      {children}\n    </PanelFrame>\n  );\n}\n\nexport type DetailEmptyStateProps = {\n  /** Optional icon shown above the label. */\n  icon?: string | StaticIconComponent;\n  /** Primary empty-state text. */\n  label: ReactNode;\n  /** Secondary empty-state text. */\n  description?: ReactNode;\n  /** Classes applied to the empty-state root. */\n  className?: string;\n};\n\nexport function DetailEmptyState({\n  icon,\n  label,\n  description,\n  className,\n}: DetailEmptyStateProps) {\n  return (\n    <div\n      className={cn(\"p-density-6 text-center text-muted-foreground\", className)}\n    >\n      {icon && (\n        <Icon\n          {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n          className=\"text-3xl mb-density-2\"\n        />\n      )}\n      <p className=\"text-sm\">{label}</p>\n      {description && (\n        <p className=\"text-xs mt-density-1 opacity-70\">{description}</p>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","jsxs","Fragment","jsx","Icon","UiChevronDown","UiChevronRight","PanelFrame","cn"],"mappings":";;;;;;;;;AA2CO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,eAAe,aAAa;AAClC,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,WAAW;AAEtD,QAAM,OAAO,CAAC,gBAAgB,eAAe,WAAW;AAExD,WAAS,SAAS;AAChB,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,aAAc,cAAa,IAAI;AACpC,yCAAW;AAAA,EACb;AAEA,QAAM,UACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,IAAA,eACCC,2BAAAA;AAAAA,MAACC,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAM,OAAOC,cAAAA,gBAAgBC,eAAAA;AAAAA,QAC7B,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,QACCH,2BAAAA;AAAAA,MAACC,KAAAA;AAAAA,MAAA;AAAA,QACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,QACnD,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGdD,2BAAAA,IAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,MAAA,CAAM;AAAA,EAAA,GAC/D;AAGF,SACEA,2BAAAA;AAAAA,IAACI,WAAAA;AAAAA,IAAA;AAAA,MACC,QACEN,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,QAAA,cACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,iBAAe;AAAA,YACf,WAAU;AAAA,YAET,UAAA;AAAA,UAAA;AAAA,QAAA,IAGHA,2BAAAA,IAAC,OAAA,EAAI,WAAU,0CACZ,UAAA,SACH;AAAA,QAED,WACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,0CACb,UAAA,QAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACA,aAAa;AAAA,MACb,WAAWK,MAAAA,GAAG,kCAAkC,SAAS;AAAA,MACzD,iBAAiBA,MAAAA,GAAG,oBAAoB,eAAe;AAAA,MACtD,GAAI,kBAAkB,SAAY,EAAE,cAAA,IAAkB,CAAA;AAAA,MAEtD;AAAA,IAAA;AAAA,EAAA;AAGP;AAaO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACEP,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWO,MAAAA,GAAG,iDAAiD,SAAS;AAAA,MAEvE,UAAA;AAAA,QAAA,QACCL,2BAAAA;AAAAA,UAACC,KAAAA;AAAAA,UAAA;AAAA,YACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,YACnD,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGdD,2BAAAA,IAAC,KAAA,EAAE,WAAU,WAAW,UAAA,OAAM;AAAA,QAC7B,eACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,mCAAmC,UAAA,YAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIpE;;;"}

package/dist/layout/Section.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { StaticIconComponent } from '../data/Icon';
+import { PanelTone } from './PanelFrame';
 export type SectionProps = {
     /** Header title. */
     title: ReactNode;
@@ -26,7 +27,7 @@ export type SectionProps = {
     /** Optional leading icon. */
     icon?: string | StaticIconComponent;
     /** Semantic border accent. */
-    tone?: "default" | "danger" | "warning" | "success" | "info";
+    tone?: PanelTone;
     /** Classes applied to the section root. */
     className?: string;
     /** Classes applied to the clickable header. */
@@ -47,5 +48,5 @@ export type DetailEmptyStateProps = {
     /** Classes applied to the empty-state root. */
     className?: string;
 };
-export declare function DetailEmptyState({ icon, label, description, className }: DetailEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailEmptyState({ icon, label, description, className, }: DetailEmptyStateProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Section.d.ts.map

package/dist/layout/Section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/layout/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,YAAY,GAAG;IACzB,oBAAoB;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC7D,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,OAAO,EACP,WAAkB,EAClB,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,IAAI,EACJ,IAAgB,EAChB,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,YAAY,2CA2Dd;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,gCAAgC;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAa9F"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/layout/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,MAAM,YAAY,GAAG;IACzB,oBAAoB;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,OAAO,EACP,WAAkB,EAClB,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,IAAI,EACJ,IAAgB,EAChB,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,YAAY,2CAgEd;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,gCAAgC;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,SAAS,GACV,EAAE,qBAAqB,2CAiBvB"}

package/dist/layout/Section.js

@@ -2,15 +2,9 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
+import { PanelFrame } from "./PanelFrame.js";
 import { UiChevronDown } from "../icons/components/UiChevronDown.js";
 import { UiChevronRight } from "../icons/components/UiChevronRight.js";
-const toneRing = {
-  default: "",
-  danger: "border-l-2 border-red-500",
-  warning: "border-l-2 border-yellow-500",
-  success: "border-l-2 border-green-500",
-  info: "border-l-2 border-blue-500"
-};
 function Section({
   title,
   summary,
@@ -41,47 +35,63 @@ function Section({
         className: "text-muted-foreground text-xs"
       }
     ),
-    icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-base" }),
-    /* @__PURE__ */ jsx("span", { className: "font-medium text-sm flex-1 truncate", children: title })
-  ] });
-  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-md border border-border bg-background", toneRing[tone], className), children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "w-full flex items-center gap-2 px-density-3 py-density-2 text-left",
-          headerClassName
-        ),
-        children: [
-          collapsible ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: toggle,
-              "aria-expanded": open,
-              className: "flex flex-1 min-w-0 items-center gap-2 text-left rounded-sm hover:bg-accent/50 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              children: leading
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 min-w-0 items-center gap-2", children: leading }),
-          summary && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground shrink-0", children: summary })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsx("div", { className: cn("px-density-3 py-density-2 border-t border-border", bodyClassName), children })
-  ] });
-}
-function DetailEmptyState({ icon, label, description, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("p-density-6 text-center text-muted-foreground", className), children: [
     icon && /* @__PURE__ */ jsx(
       Icon,
       {
         ...typeof icon === "string" ? { name: icon } : { icon },
-        className: "text-3xl mb-density-2"
+        className: "text-base"
       }
     ),
-    /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-xs mt-density-1 opacity-70", children: description })
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-sm flex-1 truncate", children: title })
   ] });
+  return /* @__PURE__ */ jsx(
+    PanelFrame,
+    {
+      header: /* @__PURE__ */ jsxs(Fragment, { children: [
+        collapsible ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            "aria-expanded": open,
+            className: "flex min-w-0 flex-1 items-center gap-2 rounded-sm text-left transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            children: leading
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: leading }),
+        summary && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: summary })
+      ] }),
+      tone,
+      bodyVisible: open,
+      className: cn("overflow-visible bg-background", className),
+      headerClassName: cn("w-full text-left", headerClassName),
+      ...bodyClassName !== void 0 ? { bodyClassName } : {},
+      children
+    }
+  );
+}
+function DetailEmptyState({
+  icon,
+  label,
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("p-density-6 text-center text-muted-foreground", className),
+      children: [
+        icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            ...typeof icon === "string" ? { name: icon } : { icon },
+            className: "text-3xl mb-density-2"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-xs mt-density-1 opacity-70", children: description })
+      ]
+    }
+  );
 }
 export {
   DetailEmptyState,

package/dist/layout/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../src/layout/Section.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\n\nexport type SectionProps = {\n  /** Header title. */\n  title: ReactNode;\n  /**\n   * Optional right-aligned header summary. The summary is a sibling of the\n   * collapse toggle, never a descendant of it — so a summary containing\n   * interactive content (filter tabs, links) is valid DOM and its clicks do\n   * not toggle the section. When a summary is present, only the chevron + the\n   * title toggle; the summary region does not.\n   */\n  summary?: ReactNode;\n  /**\n   * Whether the section can collapse. Defaults to true. When false the body is\n   * always rendered, the header has no chevron and is not clickable — use for a\n   * fixed panel that should never hide its content.\n   */\n  collapsible?: boolean;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when the section is toggled. */\n  onToggle?: (open: boolean) => void;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Semantic border accent. */\n  tone?: \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n  /** Classes applied to the section root. */\n  className?: string;\n  /** Classes applied to the clickable header. */\n  headerClassName?: string;\n  /** Classes applied to the content body. */\n  bodyClassName?: string;\n  /** Collapsible content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<NonNullable<SectionProps[\"tone\"]>, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-red-500\",\n  warning: \"border-l-2 border-yellow-500\",\n  success: \"border-l-2 border-green-500\",\n  info: \"border-l-2 border-blue-500\",\n};\n\nexport function Section({\n  title,\n  summary,\n  collapsible = true,\n  defaultOpen = false,\n  open: openProp,\n  onToggle,\n  icon,\n  tone = \"default\",\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: SectionProps) {\n  const isControlled = openProp !== undefined;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  // A non-collapsible section is permanently open — there is no toggle to track.\n  const open = !collapsible || (isControlled ? openProp : innerOpen);\n\n  function toggle() {\n    const next = !open;\n    if (!isControlled) setInnerOpen(next);\n    onToggle?.(next);\n  }\n\n  const leading = (\n    <>\n      {collapsible && (\n        <Icon\n          icon={open ? UiChevronDown : UiChevronRight}\n          className=\"text-muted-foreground text-xs\"\n        />\n      )}\n      {icon && (\n        <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-base\" />\n      )}\n      <span className=\"font-medium text-sm flex-1 truncate\">{title}</span>\n    </>\n  );\n\n  return (\n    <div className={cn(\"rounded-md border border-border bg-background\", toneRing[tone], className)}>\n      {/* The header is always a plain row so the summary (which may hold its own\n          interactive content) is never nested inside the toggle button. Only the\n          chevron + title region toggles; the summary is a sibling of it. */}\n      <div\n        className={cn(\n          \"w-full flex items-center gap-2 px-density-3 py-density-2 text-left\",\n          headerClassName,\n        )}\n      >\n        {collapsible ? (\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={open}\n            className=\"flex flex-1 min-w-0 items-center gap-2 text-left rounded-sm hover:bg-accent/50 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n          >\n            {leading}\n          </button>\n        ) : (\n          <div className=\"flex flex-1 min-w-0 items-center gap-2\">{leading}</div>\n        )}\n        {summary && <span className=\"text-xs text-muted-foreground shrink-0\">{summary}</span>}\n      </div>\n      {open && (\n        <div className={cn(\"px-density-3 py-density-2 border-t border-border\", bodyClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport type DetailEmptyStateProps = {\n  /** Optional icon shown above the label. */\n  icon?: string | StaticIconComponent;\n  /** Primary empty-state text. */\n  label: ReactNode;\n  /** Secondary empty-state text. */\n  description?: ReactNode;\n  /** Classes applied to the empty-state root. */\n  className?: string;\n};\n\nexport function DetailEmptyState({ icon, label, description, className }: DetailEmptyStateProps) {\n  return (\n    <div className={cn(\"p-density-6 text-center text-muted-foreground\", className)}>\n      {icon && (\n        <Icon\n          {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n          className=\"text-3xl mb-density-2\"\n        />\n      )}\n      <p className=\"text-sm\">{label}</p>\n      {description && <p className=\"text-xs mt-density-1 opacity-70\">{description}</p>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA0CA,MAAM,WAA8D;AAAA,EAClE,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,eAAe,aAAa;AAClC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,WAAW;AAEtD,QAAM,OAAO,CAAC,gBAAgB,eAAe,WAAW;AAExD,WAAS,SAAS;AAChB,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,aAAc,cAAa,IAAI;AACpC,yCAAW;AAAA,EACb;AAEA,QAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,OAAO,gBAAgB;AAAA,QAC7B,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,QACC,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,SAAS,EAAE,KAAA,GAAS,WAAU,YAAA,CAAY;AAAA,IAE1F,oBAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,MAAA,CAAM;AAAA,EAAA,GAC/D;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,iDAAiD,SAAS,IAAI,GAAG,SAAS,GAI3F,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,iBAAe;AAAA,cACf,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA,IAGH,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,SAAQ;AAAA,UAElE,WAAW,oBAAC,QAAA,EAAK,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE/E,4BACE,OAAA,EAAI,WAAW,GAAG,oDAAoD,aAAa,GACjF,SAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAaO,SAAS,iBAAiB,EAAE,MAAM,OAAO,aAAa,aAAoC;AAC/F,8BACG,OAAA,EAAI,WAAW,GAAG,iDAAiD,SAAS,GAC1E,UAAA;AAAA,IAAA,QACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,QACnD,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGd,oBAAC,KAAA,EAAE,WAAU,WAAW,UAAA,OAAM;AAAA,IAC7B,eAAe,oBAAC,KAAA,EAAE,WAAU,mCAAmC,UAAA,YAAA,CAAY;AAAA,EAAA,GAC9E;AAEJ;"}
+{"version":3,"file":"Section.js","sources":["../../src/layout/Section.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { PanelFrame, type PanelTone } from \"./PanelFrame\";\n\nexport type SectionProps = {\n  /** Header title. */\n  title: ReactNode;\n  /**\n   * Optional right-aligned header summary. The summary is a sibling of the\n   * collapse toggle, never a descendant of it — so a summary containing\n   * interactive content (filter tabs, links) is valid DOM and its clicks do\n   * not toggle the section. When a summary is present, only the chevron + the\n   * title toggle; the summary region does not.\n   */\n  summary?: ReactNode;\n  /**\n   * Whether the section can collapse. Defaults to true. When false the body is\n   * always rendered, the header has no chevron and is not clickable — use for a\n   * fixed panel that should never hide its content.\n   */\n  collapsible?: boolean;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when the section is toggled. */\n  onToggle?: (open: boolean) => void;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Semantic border accent. */\n  tone?: PanelTone;\n  /** Classes applied to the section root. */\n  className?: string;\n  /** Classes applied to the clickable header. */\n  headerClassName?: string;\n  /** Classes applied to the content body. */\n  bodyClassName?: string;\n  /** Collapsible content. */\n  children: ReactNode;\n};\n\nexport function Section({\n  title,\n  summary,\n  collapsible = true,\n  defaultOpen = false,\n  open: openProp,\n  onToggle,\n  icon,\n  tone = \"default\",\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: SectionProps) {\n  const isControlled = openProp !== undefined;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  // A non-collapsible section is permanently open — there is no toggle to track.\n  const open = !collapsible || (isControlled ? openProp : innerOpen);\n\n  function toggle() {\n    const next = !open;\n    if (!isControlled) setInnerOpen(next);\n    onToggle?.(next);\n  }\n\n  const leading = (\n    <>\n      {collapsible && (\n        <Icon\n          icon={open ? UiChevronDown : UiChevronRight}\n          className=\"text-muted-foreground text-xs\"\n        />\n      )}\n      {icon && (\n        <Icon\n          {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n          className=\"text-base\"\n        />\n      )}\n      <span className=\"font-medium text-sm flex-1 truncate\">{title}</span>\n    </>\n  );\n\n  return (\n    <PanelFrame\n      header={\n        <>\n          {collapsible ? (\n            <button\n              type=\"button\"\n              onClick={toggle}\n              aria-expanded={open}\n              className=\"flex min-w-0 flex-1 items-center gap-2 rounded-sm text-left transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            >\n              {leading}\n            </button>\n          ) : (\n            <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n              {leading}\n            </div>\n          )}\n          {summary && (\n            <span className=\"shrink-0 text-xs text-muted-foreground\">\n              {summary}\n            </span>\n          )}\n        </>\n      }\n      tone={tone}\n      bodyVisible={open}\n      className={cn(\"overflow-visible bg-background\", className)}\n      headerClassName={cn(\"w-full text-left\", headerClassName)}\n      {...(bodyClassName !== undefined ? { bodyClassName } : {})}\n    >\n      {children}\n    </PanelFrame>\n  );\n}\n\nexport type DetailEmptyStateProps = {\n  /** Optional icon shown above the label. */\n  icon?: string | StaticIconComponent;\n  /** Primary empty-state text. */\n  label: ReactNode;\n  /** Secondary empty-state text. */\n  description?: ReactNode;\n  /** Classes applied to the empty-state root. */\n  className?: string;\n};\n\nexport function DetailEmptyState({\n  icon,\n  label,\n  description,\n  className,\n}: DetailEmptyStateProps) {\n  return (\n    <div\n      className={cn(\"p-density-6 text-center text-muted-foreground\", className)}\n    >\n      {icon && (\n        <Icon\n          {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n          className=\"text-3xl mb-density-2\"\n        />\n      )}\n      <p className=\"text-sm\">{label}</p>\n      {description && (\n        <p className=\"text-xs mt-density-1 opacity-70\">{description}</p>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA2CO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,eAAe,aAAa;AAClC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,WAAW;AAEtD,QAAM,OAAO,CAAC,gBAAgB,eAAe,WAAW;AAExD,WAAS,SAAS;AAChB,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,aAAc,cAAa,IAAI;AACpC,yCAAW;AAAA,EACb;AAEA,QAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,OAAO,gBAAgB;AAAA,QAC7B,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGb,QACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,QACnD,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGd,oBAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,MAAA,CAAM;AAAA,EAAA,GAC/D;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QACE,qBAAA,UAAA,EACG,UAAA;AAAA,QAAA,cACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,iBAAe;AAAA,YACf,WAAU;AAAA,YAET,UAAA;AAAA,UAAA;AAAA,QAAA,IAGH,oBAAC,OAAA,EAAI,WAAU,0CACZ,UAAA,SACH;AAAA,QAED,WACC,oBAAC,QAAA,EAAK,WAAU,0CACb,UAAA,QAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAEF;AAAA,MACA,aAAa;AAAA,MACb,WAAW,GAAG,kCAAkC,SAAS;AAAA,MACzD,iBAAiB,GAAG,oBAAoB,eAAe;AAAA,MACtD,GAAI,kBAAkB,SAAY,EAAE,cAAA,IAAkB,CAAA;AAAA,MAEtD;AAAA,IAAA;AAAA,EAAA;AAGP;AAaO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,iDAAiD,SAAS;AAAA,MAEvE,UAAA;AAAA,QAAA,QACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,YACnD,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,oBAAC,KAAA,EAAE,WAAU,WAAW,UAAA,OAAM;AAAA,QAC7B,eACC,oBAAC,KAAA,EAAE,WAAU,mCAAmC,UAAA,YAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIpE;"}

package/dist/layout/content-width.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CONTAINED_CONTENT_CLASS = "mx-auto w-full max-w-7xl @8xl/app-content:max-w-8xl @9xl/app-content:max-w-9xl";
+function contentWidthClassName(contentWidth) {
+  return contentWidth === "full" ? "w-full" : CONTAINED_CONTENT_CLASS;
+}
+exports.contentWidthClassName = contentWidthClassName;
+//# sourceMappingURL=content-width.cjs.map

package/dist/layout/content-width.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-width.cjs","sources":["../../src/layout/content-width.ts"],"sourcesContent":["export type ContentWidth = \"contained\" | \"full\";\n\nconst CONTAINED_CONTENT_CLASS =\n  \"mx-auto w-full max-w-7xl @8xl/app-content:max-w-8xl @9xl/app-content:max-w-9xl\";\n\nexport function contentWidthClassName(contentWidth: ContentWidth) {\n  return contentWidth === \"full\" ? \"w-full\" : CONTAINED_CONTENT_CLASS;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,0BACJ;AAEK,SAAS,sBAAsB,cAA4B;AAChE,SAAO,iBAAiB,SAAS,WAAW;AAC9C;;"}

package/dist/layout/content-width.d.ts

@@ -0,0 +1,3 @@
+export type ContentWidth = "contained" | "full";
+export declare function contentWidthClassName(contentWidth: ContentWidth): "w-full" | "mx-auto w-full max-w-7xl @8xl/app-content:max-w-8xl @9xl/app-content:max-w-9xl";
+//# sourceMappingURL=content-width.d.ts.map

package/dist/layout/content-width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-width.d.ts","sourceRoot":"","sources":["../../src/layout/content-width.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,MAAM,CAAC;AAKhD,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,YAAY,+FAE/D"}

package/dist/layout/content-width.js

@@ -0,0 +1,8 @@
+const CONTAINED_CONTENT_CLASS = "mx-auto w-full max-w-7xl @8xl/app-content:max-w-8xl @9xl/app-content:max-w-9xl";
+function contentWidthClassName(contentWidth) {
+  return contentWidth === "full" ? "w-full" : CONTAINED_CONTENT_CLASS;
+}
+export {
+  contentWidthClassName
+};
+//# sourceMappingURL=content-width.js.map

package/dist/layout/content-width.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-width.js","sources":["../../src/layout/content-width.ts"],"sourcesContent":["export type ContentWidth = \"contained\" | \"full\";\n\nconst CONTAINED_CONTENT_CLASS =\n  \"mx-auto w-full max-w-7xl @8xl/app-content:max-w-8xl @9xl/app-content:max-w-9xl\";\n\nexport function contentWidthClassName(contentWidth: ContentWidth) {\n  return contentWidth === \"full\" ? \"w-full\" : CONTAINED_CONTENT_CLASS;\n}\n"],"names":[],"mappings":"AAEA,MAAM,0BACJ;AAEK,SAAS,sBAAsB,cAA4B;AAChE,SAAO,iBAAiB,SAAS,WAAW;AAC9C;"}

package/dist/overlay/CommandPalette.cjs

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactDom = require("react-dom");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const useHotkey = require("../hooks/use-hotkey.cjs");
+const modalStack = require("./modalStack.cjs");
+const zIndex = require("./zIndex.cjs");
+const CommandPaletteList = require("./CommandPaletteList.cjs");
+const CommandPalette_model = require("./CommandPalette.model.cjs");
+const UiSearch = require("../icons/components/UiSearch.cjs");
+const SIZE_CLASS = {
+  md: "max-w-[40rem]",
+  lg: "max-w-[48rem]"
+};
+function CommandPalette({
+  open,
+  onOpenChange,
+  groups,
+  query,
+  onQueryChange,
+  hotkey = "mod+k",
+  placeholder = "Type a command or search…",
+  loading,
+  emptyState,
+  footer,
+  filter = CommandPalette_model.defaultCommandFilter,
+  onSelect,
+  closeOnSelect = true,
+  resetQueryOnClose = true,
+  size = "md",
+  topOffset = "12vh",
+  listMaxHeight = "min(24rem, 50dvh)",
+  ariaLabel = "Command palette",
+  className
+}) {
+  const baseId = react.useId();
+  const [selfOpen, setSelfOpen] = react.useState(false);
+  const [selfQuery, setSelfQuery] = react.useState("");
+  const [activeIndex, setActiveIndex] = react.useState(0);
+  const inputRef = react.useRef(null);
+  const listRef = react.useRef(null);
+  const restoreFocusRef = react.useRef(null);
+  const isOpen = open ?? selfOpen;
+  const currentQuery = query ?? selfQuery;
+  const setOpen = react.useCallback(
+    (next) => {
+      if (open === void 0) setSelfOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [open, onOpenChange]
+  );
+  const setQuery = react.useCallback(
+    (next) => {
+      if (query === void 0) setSelfQuery(next);
+      onQueryChange == null ? void 0 : onQueryChange(next);
+    },
+    [query, onQueryChange]
+  );
+  const visibleGroups = react.useMemo(
+    () => CommandPalette_model.filterCommandGroups(groups, currentQuery, filter),
+    [groups, currentQuery, filter]
+  );
+  const items = react.useMemo(() => CommandPalette_model.flattenCommands(visibleGroups), [visibleGroups]);
+  useHotkey.useHotkey(hotkey, () => setOpen(!isOpen), { priority: 10 });
+  modalStack.useEscapeLayer(isOpen, () => setOpen(false));
+  const { depth } = modalStack.useModalStack(isOpen);
+  react.useEffect(() => {
+    setActiveIndex(CommandPalette_model.firstEnabledIndex(items));
+  }, [items]);
+  react.useEffect(() => {
+    var _a, _b, _c;
+    if (!isOpen) {
+      if (resetQueryOnClose && query === void 0) setSelfQuery("");
+      (_b = (_a = restoreFocusRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      restoreFocusRef.current = null;
+      return;
+    }
+    restoreFocusRef.current = document.activeElement;
+    (_c = inputRef.current) == null ? void 0 : _c.focus();
+  }, [isOpen, resetQueryOnClose, query]);
+  react.useEffect(() => {
+    var _a;
+    if (activeIndex < 0) return;
+    const option = (_a = listRef.current) == null ? void 0 : _a.querySelectorAll('[role="option"]')[activeIndex];
+    if (option instanceof HTMLElement && typeof option.scrollIntoView === "function") {
+      option.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+  const optionId = react.useCallback((item) => `${baseId}-option-${item.id}`, [baseId]);
+  const activate = react.useCallback(
+    (item) => {
+      if (item.disabled) return;
+      const close = () => setOpen(false);
+      const context = { item, query: currentQuery.trim(), close };
+      if (item.onSelect) item.onSelect(context);
+      else onSelect == null ? void 0 : onSelect(context);
+      if (closeOnSelect) close();
+    },
+    [currentQuery, onSelect, closeOnSelect, setOpen]
+  );
+  const onKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActiveIndex((current) => CommandPalette_model.nextEnabledIndex(items, current, 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActiveIndex((current) => CommandPalette_model.nextEnabledIndex(items, current, -1));
+        break;
+      case "Home":
+        event.preventDefault();
+        setActiveIndex(CommandPalette_model.firstEnabledIndex(items));
+        break;
+      case "End":
+        event.preventDefault();
+        setActiveIndex(CommandPalette_model.lastEnabledIndex(items));
+        break;
+      case "Enter": {
+        event.preventDefault();
+        const index = activeIndex >= 0 ? activeIndex : CommandPalette_model.firstEnabledIndex(items);
+        const item = index >= 0 ? items[index] : void 0;
+        if (item) activate(item);
+        break;
+      }
+      case "Tab":
+        if (!footer) event.preventDefault();
+        break;
+    }
+  };
+  if (!isOpen || typeof document === "undefined") return null;
+  const activeItem = activeIndex >= 0 ? items[activeIndex] : void 0;
+  const listId = `${baseId}-list`;
+  const overlay = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "fixed inset-0 flex justify-center p-density-4",
+        depth === 0 ? "bg-black/40" : "bg-black/20"
+      ),
+      style: { zIndex: zIndex.zIndex.modal + depth * zIndex.zIndex.modalStep },
+      role: "presentation",
+      onClick: () => setOpen(false),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": ariaLabel,
+          className: utils.cn(
+            "flex h-fit w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl",
+            SIZE_CLASS[size],
+            className
+          ),
+          style: { marginTop: topOffset },
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2 border-b border-border px-density-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  role: "combobox",
+                  "aria-expanded": true,
+                  "aria-controls": listId,
+                  "aria-autocomplete": "list",
+                  "aria-activedescendant": activeItem ? optionId(activeItem) : void 0,
+                  "aria-label": ariaLabel,
+                  value: currentQuery,
+                  placeholder,
+                  onChange: (event) => setQuery(event.target.value),
+                  onKeyDown,
+                  className: "h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CommandPaletteList.CommandPaletteList,
+              {
+                groups: visibleGroups,
+                items,
+                activeIndex,
+                listId,
+                optionId,
+                onActivate: activate,
+                onHover: setActiveIndex,
+                listRef,
+                loading,
+                emptyState,
+                listMaxHeight
+              }
+            ),
+            footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-density-3 py-density-2 text-xs text-muted-foreground", children: footer })
+          ]
+        }
+      )
+    }
+  );
+  return reactDom.createPortal(overlay, document.body);
+}
+exports.CommandPalette = CommandPalette;
+//# sourceMappingURL=CommandPalette.cjs.map

package/dist/overlay/CommandPalette.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.cjs","sources":["../../src/overlay/CommandPalette.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\nimport {\n  defaultCommandFilter,\n  filterCommandGroups,\n  firstEnabledIndex,\n  flattenCommands,\n  lastEnabledIndex,\n  nextEnabledIndex,\n  type CommandFilter,\n  type CommandGroup,\n  type CommandItem,\n} from \"./CommandPalette.model\";\n\nexport type {\n  CommandFilter,\n  CommandGroup,\n  CommandItem,\n  CommandSelectContext,\n} from \"./CommandPalette.model\";\n\nconst SIZE_CLASS = {\n  md: \"max-w-[40rem]\",\n  lg: \"max-w-[48rem]\",\n} as const;\n\nexport type CommandPaletteProps = {\n  /**\n   * Controls visibility. Omit to run uncontrolled — the palette then owns its\n   * open state and the built-in hotkey works with no wiring beyond mounting it.\n   */\n  open?: boolean;\n  /** Called with the next open state on hotkey, Escape, backdrop click, and selection. */\n  onOpenChange?: (open: boolean) => void;\n  /** Command groups, rendered top to bottom in array order. */\n  groups: CommandGroup[];\n  /** Controlled query. Omit to let the palette own the input. */\n  query?: string;\n  /** Called with the next query on every keystroke. Required for server-side search. */\n  onQueryChange?: (query: string) => void;\n  /**\n   * Global shortcut that opens (and, while open, closes) the palette, in\n   * `useHotkey` syntax — `\"mod+k\"` by default, where `mod` is ⌘ on macOS and\n   * Ctrl elsewhere. Pass `null` when an ancestor owns the binding.\n   */\n  hotkey?: string | null;\n  /** Ghost text in the search input. Defaults to \"Type a command or search…\". */\n  placeholder?: string;\n  /** Shows a loading row instead of the empty state while results are in flight. */\n  loading?: boolean;\n  /** Replaces the default \"No results\" body. */\n  emptyState?: ReactNode;\n  /** Non-interactive hint strip pinned below the list. */\n  footer?: ReactNode;\n  /**\n   * How rows are matched. Defaults to a case-insensitive substring match over\n   * label, description and keywords, ranked by hit position. Pass `false` when\n   * the caller already filtered `groups` server-side.\n   */\n  filter?: CommandFilter | false;\n  /** Fallback handler for items with no own `onSelect`. */\n  onSelect?: (context: { item: CommandItem; query: string; close: () => void }) => void;\n  /** Close after a successful activation. Defaults to true. */\n  closeOnSelect?: boolean;\n  /** Clear the query when the palette closes. Defaults to true. */\n  resetQueryOnClose?: boolean;\n  /** Panel width preset. Defaults to \"md\". */\n  size?: \"md\" | \"lg\";\n  /** Distance from the viewport top. Defaults to \"12vh\". Applied as an inline style. */\n  topOffset?: string | number;\n  /** Max height of the scrolling list. Defaults to \"min(24rem, 50dvh)\". Inline style. */\n  listMaxHeight?: string | number;\n  /** Accessible name for the dialog. Defaults to \"Command palette\". */\n  ariaLabel?: string;\n  /** Classes applied to the palette panel. */\n  className?: string;\n};\n\n/**\n * A ⌘K command palette: a top-anchored overlay with a search field over a\n * grouped, keyboard-navigable command list.\n *\n * It renders its own portal rather than building on `Modal`, which centres its\n * panel, focuses the dialog element instead of an input, forces body padding,\n * and pins an inline max-height — none of which a palette can override. The\n * stacking primitives are shared though (`useModalStack`, `useEscapeLayer`, the\n * `zIndex` scale), so a palette opened over a modal sits above it and Escape\n * still dismisses exactly one layer.\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  query,\n  onQueryChange,\n  hotkey = \"mod+k\",\n  placeholder = \"Type a command or search…\",\n  loading,\n  emptyState,\n  footer,\n  filter = defaultCommandFilter,\n  onSelect,\n  closeOnSelect = true,\n  resetQueryOnClose = true,\n  size = \"md\",\n  topOffset = \"12vh\",\n  listMaxHeight = \"min(24rem, 50dvh)\",\n  ariaLabel = \"Command palette\",\n  className,\n}: CommandPaletteProps) {\n  const baseId = useId();\n  const [selfOpen, setSelfOpen] = useState(false);\n  const [selfQuery, setSelfQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n  const isOpen = open ?? selfOpen;\n  const currentQuery = query ?? selfQuery;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (open === undefined) setSelfOpen(next);\n      onOpenChange?.(next);\n    },\n    [open, onOpenChange],\n  );\n\n  const setQuery = useCallback(\n    (next: string) => {\n      if (query === undefined) setSelfQuery(next);\n      onQueryChange?.(next);\n    },\n    [query, onQueryChange],\n  );\n\n  const visibleGroups = useMemo(\n    () => filterCommandGroups(groups, currentQuery, filter),\n    [groups, currentQuery, filter],\n  );\n  const items = useMemo(() => flattenCommands(visibleGroups), [visibleGroups]);\n\n  // Priority keeps the palette ahead of any page-level ⌘K search field, whose\n  // binding would otherwise win purely by mounting later.\n  useHotkey(hotkey, () => setOpen(!isOpen), { priority: 10 });\n  useEscapeLayer(isOpen, () => setOpen(false));\n\n  const { depth } = useModalStack(isOpen);\n\n  // Enter-runs-the-top-result is the point of a palette, so the active row\n  // resets to the first selectable one whenever the result set changes.\n  useEffect(() => {\n    setActiveIndex(firstEnabledIndex(items));\n  }, [items]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      if (resetQueryOnClose && query === undefined) setSelfQuery(\"\");\n      restoreFocusRef.current?.focus?.();\n      restoreFocusRef.current = null;\n      return;\n    }\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    inputRef.current?.focus();\n  }, [isOpen, resetQueryOnClose, query]);\n\n  // Keep the active row in view without stealing focus from the input.\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const option = listRef.current?.querySelectorAll('[role=\"option\"]')[activeIndex];\n    // jsdom does not implement scrollIntoView; scrolling is a progressive\n    // enhancement, so skip it rather than crash a consumer's test run.\n    if (option instanceof HTMLElement && typeof option.scrollIntoView === \"function\") {\n      option.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [activeIndex]);\n\n  const optionId = useCallback((item: CommandItem) => `${baseId}-option-${item.id}`, [baseId]);\n\n  const activate = useCallback(\n    (item: CommandItem) => {\n      if (item.disabled) return;\n      const close = () => setOpen(false);\n      const context = { item, query: currentQuery.trim(), close };\n      if (item.onSelect) item.onSelect(context);\n      else onSelect?.(context);\n      if (closeOnSelect) close();\n    },\n    [currentQuery, onSelect, closeOnSelect, setOpen],\n  );\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, 1));\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        setActiveIndex((current) => nextEnabledIndex(items, current, -1));\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setActiveIndex(firstEnabledIndex(items));\n        break;\n      case \"End\":\n        event.preventDefault();\n        setActiveIndex(lastEnabledIndex(items));\n        break;\n      case \"Enter\": {\n        event.preventDefault();\n        const index = activeIndex >= 0 ? activeIndex : firstEnabledIndex(items);\n        const item = index >= 0 ? items[index] : undefined;\n        if (item) activate(item);\n        break;\n      }\n      case \"Tab\":\n        // Nothing else in the panel is focusable, and letting Tab escape an\n        // aria-modal dialog would strand focus behind the backdrop.\n        if (!footer) event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  if (!isOpen || typeof document === \"undefined\") return null;\n\n  const activeItem = activeIndex >= 0 ? items[activeIndex] : undefined;\n  const listId = `${baseId}-list`;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex justify-center p-density-4\",\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      role=\"presentation\"\n      onClick={() => setOpen(false)}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel}\n        className={cn(\n          \"flex h-fit w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          SIZE_CLASS[size],\n          className,\n        )}\n        style={{ marginTop: topOffset }}\n        onClick={(event) => event.stopPropagation()}\n      >\n        <div className=\"flex items-center gap-density-2 border-b border-border px-density-3\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            ref={inputRef}\n            type=\"text\"\n            role=\"combobox\"\n            aria-expanded\n            aria-controls={listId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeItem ? optionId(activeItem) : undefined}\n            aria-label={ariaLabel}\n            value={currentQuery}\n            placeholder={placeholder}\n            onChange={(event) => setQuery(event.target.value)}\n            onKeyDown={onKeyDown}\n            className=\"h-12 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n          />\n        </div>\n\n        <CommandPaletteList\n          groups={visibleGroups}\n          items={items}\n          activeIndex={activeIndex}\n          listId={listId}\n          optionId={optionId}\n          onActivate={activate}\n          onHover={setActiveIndex}\n          listRef={listRef}\n          loading={loading}\n          emptyState={emptyState}\n          listMaxHeight={listMaxHeight}\n        />\n\n        {footer && (\n          <div className=\"border-t border-border px-density-3 py-density-2 text-xs text-muted-foreground\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return createPortal(overlay, document.body);\n}\n"],"names":["defaultCommandFilter","useId","useState","useRef","useCallback","useMemo","filterCommandGroups","flattenCommands","useHotkey","useEscapeLayer","useModalStack","useEffect","firstEnabledIndex","nextEnabledIndex","lastEnabledIndex","jsx","cn","zIndex","jsxs","Icon","UiSearch","CommandPaletteList","createPortal"],"mappings":"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"}

package/dist/overlay/CommandPalette.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+import { CommandFilter, CommandGroup, CommandItem } from './CommandPalette.model';
+export type { CommandFilter, CommandGroup, CommandItem, CommandSelectContext, } from './CommandPalette.model';
+export type CommandPaletteProps = {
+    /**
+     * Controls visibility. Omit to run uncontrolled — the palette then owns its
+     * open state and the built-in hotkey works with no wiring beyond mounting it.
+     */
+    open?: boolean;
+    /** Called with the next open state on hotkey, Escape, backdrop click, and selection. */
+    onOpenChange?: (open: boolean) => void;
+    /** Command groups, rendered top to bottom in array order. */
+    groups: CommandGroup[];
+    /** Controlled query. Omit to let the palette own the input. */
+    query?: string;
+    /** Called with the next query on every keystroke. Required for server-side search. */
+    onQueryChange?: (query: string) => void;
+    /**
+     * Global shortcut that opens (and, while open, closes) the palette, in
+     * `useHotkey` syntax — `"mod+k"` by default, where `mod` is ⌘ on macOS and
+     * Ctrl elsewhere. Pass `null` when an ancestor owns the binding.
+     */
+    hotkey?: string | null;
+    /** Ghost text in the search input. Defaults to "Type a command or search…". */
+    placeholder?: string;
+    /** Shows a loading row instead of the empty state while results are in flight. */
+    loading?: boolean;
+    /** Replaces the default "No results" body. */
+    emptyState?: ReactNode;
+    /** Non-interactive hint strip pinned below the list. */
+    footer?: ReactNode;
+    /**
+     * How rows are matched. Defaults to a case-insensitive substring match over
+     * label, description and keywords, ranked by hit position. Pass `false` when
+     * the caller already filtered `groups` server-side.
+     */
+    filter?: CommandFilter | false;
+    /** Fallback handler for items with no own `onSelect`. */
+    onSelect?: (context: {
+        item: CommandItem;
+        query: string;
+        close: () => void;
+    }) => void;
+    /** Close after a successful activation. Defaults to true. */
+    closeOnSelect?: boolean;
+    /** Clear the query when the palette closes. Defaults to true. */
+    resetQueryOnClose?: boolean;
+    /** Panel width preset. Defaults to "md". */
+    size?: "md" | "lg";
+    /** Distance from the viewport top. Defaults to "12vh". Applied as an inline style. */
+    topOffset?: string | number;
+    /** Max height of the scrolling list. Defaults to "min(24rem, 50dvh)". Inline style. */
+    listMaxHeight?: string | number;
+    /** Accessible name for the dialog. Defaults to "Command palette". */
+    ariaLabel?: string;
+    /** Classes applied to the palette panel. */
+    className?: string;
+};
+/**
+ * A ⌘K command palette: a top-anchored overlay with a search field over a
+ * grouped, keyboard-navigable command list.
+ *
+ * It renders its own portal rather than building on `Modal`, which centres its
+ * panel, focuses the dialog element instead of an input, forces body padding,
+ * and pins an inline max-height — none of which a palette can override. The
+ * stacking primitives are shared though (`useModalStack`, `useEscapeLayer`, the
+ * `zIndex` scale), so a palette opened over a modal sits above it and Escape
+ * still dismisses exactly one layer.
+ */
+export declare function CommandPalette({ open, onOpenChange, groups, query, onQueryChange, hotkey, placeholder, loading, emptyState, footer, filter, onSelect, closeOnSelect, resetQueryOnClose, size, topOffset, listMaxHeight, ariaLabel, className, }: CommandPaletteProps): import('react').ReactPortal | null;
+//# sourceMappingURL=CommandPalette.d.ts.map

package/dist/overlay/CommandPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/overlay/CommandPalette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASjG,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,WAAW,EACjB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,WAAW,EACX,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAOhC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wFAAwF;IACxF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,6DAA6D;IAC7D,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,wDAAwD;IACxD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC;IAC/B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACtF,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,sFAAsF;IACtF,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,aAAa,EACb,MAAgB,EAChB,WAAyC,EACzC,OAAO,EACP,UAAU,EACV,MAAM,EACN,MAA6B,EAC7B,QAAQ,EACR,aAAoB,EACpB,iBAAwB,EACxB,IAAW,EACX,SAAkB,EAClB,aAAmC,EACnC,SAA6B,EAC7B,SAAS,GACV,EAAE,mBAAmB,sCA6LrB"}