@nocoo/basalt 2.1.8 → 3.0.0

package/dist/components/collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","names":[],"sources":["../../src/components/collapsible.tsx"],"sourcesContent":["import * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\nimport { ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { FOCUS_INSET, OVERLAY_MOTION } from \"./overlay\";\n\ntype RadixCollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;\ntype RadixCollapsibleTriggerProps = React.ComponentPropsWithoutRef<\n\ttypeof CollapsiblePrimitive.CollapsibleTrigger\n>;\ntype RadixCollapsibleContentProps = React.ComponentPropsWithoutRef<\n\ttypeof CollapsiblePrimitive.CollapsibleContent\n>;\n\nexport interface CollapsibleProps\n\textends Omit<\n\t\tRadixCollapsibleProps,\n\t\t\"open\" | \"defaultOpen\" | \"onOpenChange\" | \"disabled\" | \"asChild\" | \"children\"\n\t> {\n\t/**\n\t * Collapsible structure elements, typically CollapsibleTrigger and CollapsibleContent.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * The controlled open state of the collapsible.\n\t */\n\topen?: RadixCollapsibleProps[\"open\"];\n\t/**\n\t * The uncontrolled initial open state of the collapsible.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixCollapsibleProps[\"defaultOpen\"];\n\t/**\n\t * Called when the open state changes.\n\t */\n\tonOpenChange?: RadixCollapsibleProps[\"onOpenChange\"];\n\t/**\n\t * When true, prevents the user from interacting with the collapsible.\n\t * @default false\n\t */\n\tdisabled?: RadixCollapsibleProps[\"disabled\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Note: Collapsible root is typed as React.FC and does not declare ref in its public Props;\n\t * forwards rest props and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCollapsibleProps[\"asChild\"];\n}\n\nexport const Collapsible: React.FC<CollapsibleProps> = CollapsiblePrimitive.Root;\n\nexport interface CollapsibleTriggerProps\n\textends Omit<RadixCollapsibleTriggerProps, \"asChild\" | \"children\"> {\n\t/**\n\t * Content of the trigger button. When asChild is false, automatically renders\n\t * a text container span alongside an animated ChevronDown icon.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * When true, bypasses the default text span and ChevronDown icon wrapping.\n\t * CollapsibleTrigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCollapsibleTriggerProps[\"asChild\"];\n}\n\nexport const CollapsibleTrigger = React.forwardRef<\n\tReact.ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,\n\tCollapsibleTriggerProps\n>(({ className, children, asChild = false, ...props }, ref) => {\n\tif (asChild) {\n\t\treturn (\n\t\t\t<CollapsiblePrimitive.CollapsibleTrigger ref={ref} asChild className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</CollapsiblePrimitive.CollapsibleTrigger>\n\t\t);\n\t}\n\treturn (\n\t\t<CollapsiblePrimitive.CollapsibleTrigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"m-0 inline-flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-sm font-medium text-basalt-foreground shadow-none select-none\",\n\t\t\t\tFOCUS_INSET,\n\t\t\t\t\"[&_svg]:size-3 [&_svg]:shrink-0 [&_svg]:origin-center [&_svg]:transition-transform [&_svg]:duration-100 [&_svg]:ease-out\",\n\t\t\t\t\"data-[state=open]:[&_svg]:rotate-180\",\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span>{children}</span>\n\t\t\t<ChevronDown aria-hidden=\"true\" className={OVERLAY_MOTION} />\n\t\t</CollapsiblePrimitive.CollapsibleTrigger>\n\t);\n});\nCollapsibleTrigger.displayName = CollapsiblePrimitive.CollapsibleTrigger.displayName;\n\nexport interface CollapsibleContentProps\n\textends Omit<RadixCollapsibleContentProps, \"unstyled\" | \"forceMount\" | \"asChild\"> {\n\t/**\n\t * Render children without the default inset border container.\n\t * Note: When unstyled is false (default), children are wrapped in an inner inset border div.\n\t * When combined with asChild, asChild slots onto that inner div unless unstyled={true} is set.\n\t * @default false\n\t */\n\tunstyled?: boolean;\n\t/**\n\t * Used to force mounting when more control is needed. Useful when\n\t * controlling animation with React animation libraries.\n\t */\n\tforceMount?: RadixCollapsibleContentProps[\"forceMount\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Note: When unstyled is false, asChild operates within the inner inset div wrapper;\n\t * set unstyled={true} to slot directly onto the child element as the content/ref target.\n\t * CollapsibleContent forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCollapsibleContentProps[\"asChild\"];\n}\n\nexport const CollapsibleContent = React.forwardRef<\n\tReact.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,\n\tCollapsibleContentProps\n>(({ className, children, unstyled = false, ...props }, ref) => (\n\t<CollapsiblePrimitive.CollapsibleContent\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden data-[state=closed]:animate-basalt-collapsible-up data-[state=open]:animate-basalt-collapsible-down\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{unstyled ? (\n\t\t\tchildren\n\t\t) : (\n\t\t\t<div className=\"my-2 border-l-2 border-basalt-border py-1 pr-1 pl-4 text-sm text-basalt-foreground\">\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t)}\n\t</CollapsiblePrimitive.CollapsibleContent>\n));\nCollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;\n"],"mappings":";;;;;;;;AAkDA,IAAa,IAA0C,EAAqB,MAkB/D,IAAqB,EAAM,YAGrC,EAAE,cAAW,aAAU,aAAU,IAAO,GAAG,KAAS,MAClD,IAEF,kBAAC,EAAqB,oBAAtB;CAA8C;CAAK,SAAA;CAAmB;CAAW,GAAI;CACnF;AACuC,CAAA,IAI1C,kBAAC,EAAqB,oBAAtB;CACM;CACL,WAAW,EACV,uJACA,GACA,4HACA,wCACA,GACA,CACD;CACA,GAAI;CAVL,UAAA,CAYC,kBAAC,QAAD,EAAO,YAAe,CAAA,GACtB,kBAAC,GAAD;EAAa,eAAY;EAAO,WAAW;CAAiB,CAAA,CACpB;EAE1C;AACD,EAAmB,cAAc,EAAqB,mBAAmB;AA0BzE,IAAa,IAAqB,EAAM,YAGrC,EAAE,cAAW,aAAU,cAAW,IAAO,GAAG,KAAS,MACvD,kBAAC,EAAqB,oBAAtB;CACM;CACL,WAAW,EACV,uHACA,GACA,CACD;CACA,GAAI;CAEH,UAAA,IACA,IAEA,kBAAC,OAAD;EAAK,WAAU;EACb;CACG,CAAA;AAEkC,CAAA,CACzC;AACD,EAAmB,cAAc,EAAqB,mBAAmB"}
+{"version":3,"file":"collapsible.js","names":["React","CollapsiblePrimitive","Collapsible","CollapsibleTrigger","props","asChild","cn","FOCUS_INSET","OVERLAY_MOTION","className","ChevronDown","CollapsibleContent","unstyled","children"],"sources":["../../src/components/collapsible.tsx"],"sourcesContent":["import * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\nimport { ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { FOCUS_INSET, OVERLAY_MOTION } from \"./overlay\";\n\ntype RadixCollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;\ntype RadixCollapsibleTriggerProps = React.ComponentPropsWithoutRef<\n\ttypeof CollapsiblePrimitive.CollapsibleTrigger\n>;\ntype RadixCollapsibleContentProps = React.ComponentPropsWithoutRef<\n\ttypeof CollapsiblePrimitive.CollapsibleContent\n>;\n\nexport interface CollapsibleProps\n\textends Omit<\n\t\tRadixCollapsibleProps,\n\t\t\"open\" | \"defaultOpen\" | \"onOpenChange\" | \"disabled\" | \"asChild\" | \"children\"\n\t> {\n\t/**\n\t * Collapsible structure elements, typically CollapsibleTrigger and CollapsibleContent.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * The controlled open state of the collapsible.\n\t */\n\topen?: RadixCollapsibleProps[\"open\"];\n\t/**\n\t * The uncontrolled initial open state of the collapsible.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixCollapsibleProps[\"defaultOpen\"];\n\t/**\n\t * Called when the open state changes.\n\t */\n\tonOpenChange?: RadixCollapsibleProps[\"onOpenChange\"];\n\t/**\n\t * When true, prevents the user from interacting with the collapsible.\n\t * @default false\n\t */\n\tdisabled?: RadixCollapsibleProps[\"disabled\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Note: Collapsible root is typed as React.FC and does not declare ref in its public Props;\n\t * forwards rest props and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCollapsibleProps[\"asChild\"];\n}\n\nexport const Collapsible: React.FC<CollapsibleProps> = CollapsiblePrimitive.Root;\n\nexport interface CollapsibleTriggerProps\n\textends Omit<RadixCollapsibleTriggerProps, \"asChild\" | \"children\"> {\n\t/**\n\t * Content of the trigger button. When asChild is false, automatically renders\n\t * a text container span alongside an animated ChevronDown icon.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * When true, bypasses the default text span and ChevronDown icon wrapping.\n\t * CollapsibleTrigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCollapsibleTriggerProps[\"asChild\"];\n}\n\nexport const CollapsibleTrigger = React.forwardRef<\n\tReact.ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,\n\tCollapsibleTriggerProps\n>(({ className, children, asChild = false, ...props }, ref) => {\n\tif (asChild) {\n\t\treturn (\n\t\t\t<CollapsiblePrimitive.CollapsibleTrigger ref={ref} asChild className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</CollapsiblePrimitive.CollapsibleTrigger>\n\t\t);\n\t}\n\treturn (\n\t\t<CollapsiblePrimitive.CollapsibleTrigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-ui group/collapsible m-0 inline-flex min-w-0 cursor-pointer items-center gap-basalt-control-gap border-none bg-transparent p-0 text-left text-basalt-base font-medium leading-[var(--basalt-line-body)] text-basalt-foreground shadow-none select-none\",\n\t\t\t\tFOCUS_INSET,\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"flex min-w-0 items-center gap-basalt-control-gap\">{children}</span>\n\t\t\t<ChevronDown\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-slot=\"collapsible-chevron\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"size-basalt-icon-sm shrink-0 transition-transform basalt-motion duration-basalt-normal ease-basalt group-data-[state=open]/collapsible:rotate-180\",\n\t\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t)}\n\t\t\t/>\n\t\t</CollapsiblePrimitive.CollapsibleTrigger>\n\t);\n});\nCollapsibleTrigger.displayName = CollapsiblePrimitive.CollapsibleTrigger.displayName;\n\nexport interface CollapsibleContentProps\n\textends Omit<RadixCollapsibleContentProps, \"unstyled\" | \"forceMount\" | \"asChild\"> {\n\t/**\n\t * Render children without the default inset border container.\n\t * Note: When unstyled is false (default), children are wrapped in an inner inset border div.\n\t * When combined with asChild, asChild slots onto that inner div unless unstyled={true} is set.\n\t * @default false\n\t */\n\tunstyled?: boolean;\n\t/**\n\t * Used to force mounting when more control is needed. Useful when\n\t * controlling animation with React animation libraries.\n\t */\n\tforceMount?: RadixCollapsibleContentProps[\"forceMount\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Note: When unstyled is false, asChild operates within the inner inset div wrapper;\n\t * set unstyled={true} to slot directly onto the child element as the content/ref target.\n\t * CollapsibleContent forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCollapsibleContentProps[\"asChild\"];\n}\n\nexport const CollapsibleContent = React.forwardRef<\n\tReact.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,\n\tCollapsibleContentProps\n>(({ className, children, unstyled = false, ...props }, ref) => (\n\t<CollapsiblePrimitive.CollapsibleContent\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden data-[state=closed]:animate-basalt-collapsible-up data-[state=open]:animate-basalt-collapsible-down\",\n\t\t\tOVERLAY_MOTION,\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{unstyled ? (\n\t\t\tchildren\n\t\t) : (\n\t\t\t<div className=\"my-basalt-layout-sm border-l-2 border-basalt-border px-basalt-card py-basalt-card-sm text-basalt-base text-basalt-foreground\">\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t)}\n\t</CollapsiblePrimitive.CollapsibleContent>\n));\nCollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;\n"],"mappings":";;;;;;;;AAkDA,IAAaE,IAA0CD,EAAqB,MAkB/DE,IAAqBH,EAAM,YAGrC,EAAE,cAAW,aAAU,aAAU,IAAO,GAAGI,KAAS,MAClDC,IAEF,kBAACJ,EAAqB,oBAAtB;CAA8C;CAAK,SAAA;CAAmB;CAAW,GAAIG;CACnF;AACuC,CAAA,IAI1C,kBAACH,EAAqB,oBAAtB;CACM;CACL,WAAWK,EACV,iQACAC,GACAC,GACAC,CACD;CACA,GAAIL;CARL,UAAA,CAUC,kBAAC,QAAD;EAAM,WAAU;EAAoD;CAAe,CAAA,GACnF,kBAACM,GAAD;EACC,eAAY;EACZ,aAAU;EACV,WAAWJ,EACV,qJACAE,CACD;CACA,CAAA,CACuC;EAE1C;AACD,EAAmB,cAAcP,EAAqB,mBAAmB;AA0BzE,IAAaU,IAAqBX,EAAM,YAGrC,EAAE,cAAW,aAAU,cAAW,IAAO,GAAGI,KAAS,MACvD,kBAACH,EAAqB,oBAAtB;CACM;CACL,WAAWK,EACV,uHACAE,GACAC,CACD;CACA,GAAIL;CAEH,UAAAQ,IACAC,IAEA,kBAAC,OAAD;EAAK,WAAU;EACb;CACG,CAAA;AAEkC,CAAA,CACzC;AACD,EAAmB,cAAcZ,EAAqB,mBAAmB"}

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport type { InputSize } from \"./input\";\nimport { TypeaheadField, type TypeaheadItem } from \"./typeahead-field\";\n\nexport type ComboboxItem = TypeaheadItem;\n\nexport type ComboboxProps = Omit<\n\tComponentPropsWithoutRef<\"div\">,\n\t\"children\" | \"defaultValue\" | \"onChange\"\n> & {\n\t/**\n\t * Options shown in the list. Selection must match one of these values.\n\t */\n\titems: ComboboxItem[];\n\t/**\n\t * The controlled selected value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected value changes.\n\t */\n\tonValueChange?: (value: string) => void;\n\t/**\n\t * Native form field name.\n\t */\n\tname?: string;\n\t/**\n\t * Placeholder shown when the field is empty.\n\t * @default Select…\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Disable the field.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Disable the field and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n};\n\nexport function Combobox({ placeholder = \"Select…\", ...rest }: ComboboxProps) {\n\treturn <TypeaheadField placeholder={placeholder} allowFreeform={false} {...rest} />;\n}\n"],"mappings":";;;;AAoDA,SAAgB,EAAS,EAAE,iBAAc,WAAW,GAAG,KAAuB;CAC7E,OAAO,kBAAC,GAAD;EAA6B;EAAa,eAAe;EAAO,GAAI;CAAO,CAAA;AACnF"}
+{"version":3,"file":"combobox.js","names":["Combobox","rest","TypeaheadField"],"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport type { InputSize } from \"./input\";\nimport { TypeaheadField, type TypeaheadItem } from \"./typeahead-field\";\n\nexport type ComboboxItem = TypeaheadItem;\n\nexport type ComboboxProps = Omit<\n\tComponentPropsWithoutRef<\"div\">,\n\t\"children\" | \"defaultValue\" | \"onChange\"\n> & {\n\t/**\n\t * Options shown in the list. Selection must match one of these values.\n\t */\n\titems: ComboboxItem[];\n\t/**\n\t * The controlled selected value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected value changes.\n\t */\n\tonValueChange?: (value: string) => void;\n\t/**\n\t * Native form field name.\n\t */\n\tname?: string;\n\t/**\n\t * Placeholder shown when the field is empty.\n\t * @default Select…\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Disable the field.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Disable the field and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n};\n\nexport function Combobox({ placeholder = \"Select…\", ...rest }: ComboboxProps) {\n\treturn <TypeaheadField placeholder={placeholder} allowFreeform={false} {...rest} />;\n}\n"],"mappings":";;;;AAoDA,SAAgBA,EAAS,EAAE,iBAAc,WAAW,GAAGC,KAAuB;CAC7E,OAAO,kBAACC,GAAD;EAA6B;EAAa,eAAe;EAAO,GAAID;CAAO,CAAA;AACnF"}

package/dist/components/command-palette.js

@@ -1,90 +1,116 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { Dialog as t, DialogContent as n, DialogTitle as r, DialogTrigger as i } from "./dialog.js";
-import * as a from "react";
-import { Search as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Command as l } from "cmdk";
+import { useSelectionIndicator as a } from "../utils/selection-indicator.js";
+import * as o from "react";
+import { Search as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Command as u } from "cmdk";
 //#region src/components/command-palette.tsx
-var u = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(l, {
+var d = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c(u, {
 	ref: r,
-	className: e("flex h-full w-full flex-col overflow-hidden rounded-basalt-md bg-basalt-popover text-basalt-popover-foreground", t),
+	className: e("flex min-h-0 w-full flex-col overflow-hidden rounded-basalt-md bg-basalt-popover text-basalt-popover-foreground", t),
 	...n
 }));
-u.displayName = l.displayName;
-var d = i;
-function f({ children: e, shouldFilter: i, ...o }) {
-	let l = a.Children.toArray(e), f = l.filter((e) => a.isValidElement(e) && e.type === d), p = l.filter((e) => !(a.isValidElement(e) && e.type === d));
-	return /* @__PURE__ */ c(t, {
-		...o,
-		children: [f, /* @__PURE__ */ c(n, {
+d.displayName = u.displayName;
+var f = i;
+function p({ children: e, shouldFilter: i, ...a }) {
+	let s = o.Children.toArray(e), u = s.filter((e) => o.isValidElement(e) && e.type === f), p = s.filter((e) => !(o.isValidElement(e) && e.type === f));
+	return /* @__PURE__ */ l(t, {
+		...a,
+		children: [u, /* @__PURE__ */ l(n, {
 			size: "lg",
 			"aria-describedby": void 0,
-			className: "overflow-hidden bg-basalt-popover p-0 shadow-lg",
-			children: [/* @__PURE__ */ s(r, {
+			className: "flex flex-col overflow-hidden bg-basalt-popover p-0 shadow-lg",
+			children: [/* @__PURE__ */ c(r, {
 				className: "sr-only",
 				children: "Command Palette"
-			}), /* @__PURE__ */ s(u, {
+			}), /* @__PURE__ */ c(d, {
 				label: "Command Palette",
 				...i !== void 0 && { shouldFilter: i },
-				className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+				className: "[&_[cmdk-group-heading]]:px-basalt-space-lg [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-basalt-5 [&_[cmdk-input-wrapper]_svg]:w-basalt-5 [&_[cmdk-input]]:min-h-basalt-control [&_[cmdk-item]]:px-basalt-space-lg [&_[cmdk-item]]:py-basalt-space-md [&_[cmdk-item]_svg]:h-basalt-4 [&_[cmdk-item]_svg]:w-basalt-4",
 				children: p
 			})]
 		})]
 	});
 }
-var p = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c("div", {
-	className: "flex items-center border-b border-basalt-border px-3",
+var m = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
+	className: "flex shrink-0 items-center border-b border-basalt-border px-basalt-space-lg",
 	"cmdk-input-wrapper": "",
-	children: [/* @__PURE__ */ s(o, {
-		className: "mr-2 size-4 shrink-0 opacity-50",
+	children: [/* @__PURE__ */ c(s, {
+		className: "mr-basalt-space-lg size-basalt-icon-lg shrink-0 opacity-50",
 		"aria-hidden": "true"
-	}), /* @__PURE__ */ s(l.Input, {
+	}), /* @__PURE__ */ c(u.Input, {
 		ref: r,
-		className: e("flex h-11 w-full rounded-basalt-md bg-transparent py-3 text-sm outline-hidden ring-0 shadow-none placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", t),
+		className: e("basalt-action flex min-w-0 w-full rounded-basalt-md bg-transparent outline-hidden ring-0 shadow-none placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", t),
 		...n,
 		"aria-label": n["aria-label"] ?? (typeof n.placeholder == "string" ? n.placeholder : "Command Palette")
 	})]
 }));
-p.displayName = l.Input.displayName;
-var m = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(l.List, {
-	ref: r,
-	className: e("max-h-[300px] overflow-y-auto overflow-x-hidden", t),
-	...n
-}));
-m.displayName = l.List.displayName;
-var h = a.forwardRef((e, t) => /* @__PURE__ */ s(l.Empty, {
+m.displayName = u.Input.displayName;
+function h(e, t) {
+	let n = 0, r = 0;
+	for (let i = e; i && i !== t; i = i.offsetParent) n += i.offsetLeft, r += i.offsetTop;
+	return {
+		left: n,
+		top: r,
+		width: e.offsetWidth,
+		height: e.offsetHeight
+	};
+}
+var g = o.forwardRef(({ className: t, style: n, ...r }, i) => {
+	let { ref: o, state: s } = a({
+		itemSelector: "[cmdk-item][data-selected=\"true\"]:not([data-disabled=\"true\"])",
+		mapGeometry: h,
+		ref: i
+	});
+	return /* @__PURE__ */ c(u.List, {
+		ref: o,
+		className: e("basalt-command-list relative isolate min-h-0 max-h-[18.75rem] overflow-y-auto overflow-x-hidden p-basalt-menu-inset", t),
+		...r,
+		"data-basalt-command-animated": s.animated,
+		style: {
+			"--basalt-command-left": `${s.left}px`,
+			"--basalt-command-top": `${s.top}px`,
+			"--basalt-command-width": `${s.visible ? s.width : 0}px`,
+			"--basalt-command-height": `${s.visible ? s.height : 0}px`,
+			...n
+		}
+	});
+});
+g.displayName = u.List.displayName;
+var _ = o.forwardRef((e, t) => /* @__PURE__ */ c(u.Empty, {
 	ref: t,
-	className: "py-6 text-center text-sm text-basalt-muted-foreground",
+	className: "py-basalt-space-lg text-center text-basalt-base text-basalt-muted-foreground",
 	...e
 }));
-h.displayName = l.Empty.displayName;
-var g = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(l.Group, {
+_.displayName = u.Empty.displayName;
+var v = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Group, {
 	ref: r,
-	className: e("overflow-hidden p-1 text-basalt-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground", t),
+	className: e("overflow-hidden py-basalt-space-sm text-basalt-foreground [&_[cmdk-group-heading]]:px-basalt-space-lg [&_[cmdk-group-heading]]:py-basalt-space-md [&_[cmdk-group-heading]]:text-basalt-sm [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground", t),
 	...n
 }));
-g.displayName = l.Group.displayName;
-var _ = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(l.Separator, {
+v.displayName = u.Group.displayName;
+var y = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Separator, {
 	ref: r,
-	className: e("-mx-1 h-px bg-basalt-border", t),
+	className: e("-mx-basalt-space-sm h-px bg-basalt-border", t),
 	...n
 }));
-_.displayName = l.Separator.displayName;
-var v = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ s(l.Item, {
+y.displayName = u.Separator.displayName;
+var b = o.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Item, {
 	ref: r,
-	className: e("relative flex cursor-default items-center rounded-basalt-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-basalt-accent data-[selected=true]:text-basalt-accent-foreground data-[disabled=true]:opacity-50", t),
+	className: e("relative z-10 flex cursor-default items-center rounded-basalt-sm px-basalt-menu-x py-basalt-menu-y text-basalt-base leading-basalt-row outline-hidden select-none data-[disabled=true]:pointer-events-none data-[selected=true]:text-basalt-accent-foreground data-[disabled=true]:opacity-50", t),
 	...n
 }));
-v.displayName = l.Item.displayName;
-function y({ className: t, ...n }) {
-	return /* @__PURE__ */ s("span", {
-		className: e("ml-auto text-xs tracking-widest text-basalt-muted-foreground", t),
+b.displayName = u.Item.displayName;
+function x({ className: t, ...n }) {
+	return /* @__PURE__ */ c("span", {
+		className: e("ml-auto text-basalt-sm tracking-widest text-basalt-muted-foreground", t),
 		...n
 	});
 }
-y.displayName = "CommandShortcut";
+x.displayName = "CommandShortcut";
 //#endregion
-export { h as CommandEmpty, g as CommandGroup, p as CommandInput, v as CommandItem, m as CommandList, f as CommandPalette, d as CommandPaletteTrigger, _ as CommandSeparator, y as CommandShortcut };
+export { _ as CommandEmpty, v as CommandGroup, m as CommandInput, b as CommandItem, g as CommandList, p as CommandPalette, f as CommandPaletteTrigger, y as CommandSeparator, x as CommandShortcut };
 
 //# sourceMappingURL=command-palette.js.map

package/dist/components/command-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.js","names":[],"sources":["../../src/components/command-palette.tsx"],"sourcesContent":["import type * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport type { DialogProps } from \"@radix-ui/react-dialog\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Search } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Dialog, DialogContent, DialogTitle, DialogTrigger } from \"./dialog\";\n\nconst Command = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full flex-col overflow-hidden rounded-basalt-md bg-basalt-popover text-basalt-popover-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nexport interface CommandPaletteProps\n\textends Omit<DialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"children\" | \"modal\"> {\n\t/**\n\t * Command palette structure elements, including CommandPaletteTrigger and inner command items.\n\t * Note: Triggers must be direct children of CommandPalette (child.type === CommandPaletteTrigger)\n\t * to be separated from modal dialog content. Wrapping triggers in Fragments or HOCs will cause\n\t * them to be treated as modal content.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * The controlled open state of the command palette dialog.\n\t */\n\topen?: boolean;\n\t/**\n\t * The uncontrolled initial open state of the command palette dialog.\n\t * @default false\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * Called when the open state changes.\n\t */\n\tonOpenChange?: (open: boolean) => void;\n\t/**\n\t * Filter items as the query changes.\n\t * @default true\n\t */\n\tshouldFilter?: boolean;\n\t/**\n\t * The modality of the dialog. When set to true, interaction with outside elements\n\t * will be disabled and only dialog content will be visible to screen readers.\n\t * @default true\n\t */\n\tmodal?: boolean;\n}\n\ntype RadixDialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\nexport interface CommandPaletteTriggerProps extends Omit<RadixDialogTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * CommandPaletteTrigger is an alias for DialogTrigger; forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogTriggerProps[\"asChild\"];\n}\n\nexport const CommandPaletteTrigger = DialogTrigger;\n\nexport function CommandPalette({ children, shouldFilter, ...props }: CommandPaletteProps) {\n\tconst kids = React.Children.toArray(children);\n\tconst triggers = kids.filter(\n\t\t(child) => React.isValidElement(child) && child.type === CommandPaletteTrigger,\n\t);\n\tconst content = kids.filter(\n\t\t(child) => !(React.isValidElement(child) && child.type === CommandPaletteTrigger),\n\t);\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t{triggers}\n\t\t\t<DialogContent\n\t\t\t\tsize=\"lg\"\n\t\t\t\taria-describedby={undefined}\n\t\t\t\tclassName=\"overflow-hidden bg-basalt-popover p-0 shadow-lg\"\n\t\t\t>\n\t\t\t\t<DialogTitle className=\"sr-only\">Command Palette</DialogTitle>\n\t\t\t\t<Command\n\t\t\t\t\tlabel=\"Command Palette\"\n\t\t\t\t\t{...(shouldFilter !== undefined && { shouldFilter })}\n\t\t\t\t\tclassName=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\"\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\ntype RadixCommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>;\n\nexport interface CommandInputProps\n\textends Omit<RadixCommandInputProps, \"value\" | \"onValueChange\" | \"asChild\"> {\n\t/**\n\t * Optional controlled state for the search input value.\n\t * Note: Underlying cmdk input excludes standard onChange/type props in favor of value/onValueChange.\n\t */\n\tvalue?: RadixCommandInputProps[\"value\"];\n\t/**\n\t * Event handler called when the search value changes.\n\t */\n\tonValueChange?: RadixCommandInputProps[\"onValueChange\"];\n\t/**\n\t * Change the default rendered input element to the child element, merging props and behavior.\n\t * CommandInput forwards ref to HTMLInputElement and inherits native input attributes (excluding onChange/type).\n\t * Note: When aria-label is omitted, defaults to placeholder if string, or \"Command Palette\".\n\t * @default false\n\t */\n\tasChild?: RadixCommandInputProps[\"asChild\"];\n}\n\nexport const CommandInput = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Input>,\n\tCommandInputProps\n>(({ className, ...props }, ref) => (\n\t<div className=\"flex items-center border-b border-basalt-border px-3\" cmdk-input-wrapper=\"\">\n\t\t<Search className=\"mr-2 size-4 shrink-0 opacity-50\" aria-hidden=\"true\" />\n\t\t<CommandPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-11 w-full rounded-basalt-md bg-transparent py-3 text-sm outline-hidden ring-0 shadow-none placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\taria-label={\n\t\t\t\tprops[\"aria-label\"] ??\n\t\t\t\t(typeof props.placeholder === \"string\" ? props.placeholder : \"Command Palette\")\n\t\t\t}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype RadixCommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;\n\nexport interface CommandListProps extends Omit<RadixCommandListProps, \"label\" | \"asChild\"> {\n\t/**\n\t * Accessible label for this list of suggestions. Not shown visibly.\n\t * @default \"Suggestions\"\n\t */\n\tlabel?: RadixCommandListProps[\"label\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandList forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandListProps[\"asChild\"];\n}\n\nexport const CommandList = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.List>,\n\tCommandListProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tclassName={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = CommandPrimitive.List.displayName;\n\ntype RadixCommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;\n\nexport interface CommandEmptyProps extends Omit<RadixCommandEmptyProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandEmpty forwards ref to HTMLDivElement and inherits native div attributes.\n\t * Note: cmdk Empty does not support forceMount.\n\t * @default false\n\t */\n\tasChild?: RadixCommandEmptyProps[\"asChild\"];\n}\n\nexport const CommandEmpty = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Empty>,\n\tCommandEmptyProps\n>((props, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tclassName=\"py-6 text-center text-sm text-basalt-muted-foreground\"\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\ntype RadixCommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;\n\nexport interface CommandGroupProps\n\textends Omit<RadixCommandGroupProps, \"heading\" | \"value\" | \"forceMount\" | \"asChild\"> {\n\t/**\n\t * Heading to render for this group of command items.\n\t */\n\theading?: RadixCommandGroupProps[\"heading\"];\n\t/**\n\t * Unique value identifying this group. If no heading is provided, value must be specified.\n\t */\n\tvalue?: RadixCommandGroupProps[\"value\"];\n\t/**\n\t * Whether this group is forcibly rendered regardless of filtering state.\n\t */\n\tforceMount?: RadixCommandGroupProps[\"forceMount\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandGroup forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandGroupProps[\"asChild\"];\n}\n\nexport const CommandGroup = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Group>,\n\tCommandGroupProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden p-1 text-basalt-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\ntype RadixCommandSeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>;\n\nexport interface CommandSeparatorProps\n\textends Omit<RadixCommandSeparatorProps, \"alwaysRender\" | \"asChild\"> {\n\t/**\n\t * Whether this separator should always be rendered. Useful when automatic filtering is disabled.\n\t * When false (default), visible only when the search query is empty.\n\t */\n\talwaysRender?: RadixCommandSeparatorProps[\"alwaysRender\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandSeparator forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandSeparatorProps[\"asChild\"];\n}\n\nexport const CommandSeparator = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Separator>,\n\tCommandSeparatorProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator\n\t\tref={ref}\n\t\tclassName={cn(\"-mx-1 h-px bg-basalt-border\", className)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\ntype RadixCommandItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>;\n\nexport interface CommandItemProps\n\textends Omit<\n\t\tRadixCommandItemProps,\n\t\t\"disabled\" | \"onSelect\" | \"value\" | \"keywords\" | \"forceMount\" | \"asChild\"\n\t> {\n\t/**\n\t * Whether this item is currently disabled from selection.\n\t * @default false\n\t */\n\tdisabled?: RadixCommandItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when this item is selected via click or keyboard.\n\t * Note: cmdk passes the item's resolved value string `(value: string) => void`,\n\t * not a standard DOM SelectEvent.\n\t */\n\tonSelect?: RadixCommandItemProps[\"onSelect\"];\n\t/**\n\t * Unique value identifying this item during filtering and selection.\n\t * Inferred from children/textContent if omitted.\n\t */\n\tvalue?: RadixCommandItemProps[\"value\"];\n\t/**\n\t * Optional additional keywords matched during filtering.\n\t */\n\tkeywords?: RadixCommandItemProps[\"keywords\"];\n\t/**\n\t * Whether this item is forcibly rendered regardless of query filtering.\n\t * Inherits forceMount from parent CommandGroup when omitted.\n\t */\n\tforceMount?: RadixCommandItemProps[\"forceMount\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandItem forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandItemProps[\"asChild\"];\n}\n\nexport const CommandItem = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Item>,\n\tCommandItemProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default items-center rounded-basalt-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-basalt-accent data-[selected=true]:text-basalt-accent-foreground data-[disabled=true]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nexport interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport function CommandShortcut({ className, ...props }: CommandShortcutProps) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"ml-auto text-xs tracking-widest text-basalt-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCommandShortcut.displayName = \"CommandShortcut\";\n"],"mappings":";;;;;;;;AAQA,IAAM,IAAU,EAAM,YAGnB,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,GAAD;CACM;CACL,WAAW,EACV,kHACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAQ,cAAc,EAAiB;AAgDvC,IAAa,IAAwB;AAErC,SAAgB,EAAe,EAAE,aAAU,iBAAc,GAAG,KAA8B;CACzF,IAAM,IAAO,EAAM,SAAS,QAAQ,CAAQ,GACtC,IAAW,EAAK,QACpB,MAAU,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,CAC1D,GACM,IAAU,EAAK,QACnB,MAAU,EAAE,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,EAC5D;CACA,OACC,kBAAC,GAAD;EAAQ,GAAI;EAAZ,UAAA,CACE,GACD,kBAAC,GAAD;GACC,MAAK;GACL,oBAAkB,KAAA;GAClB,WAAU;GAHX,UAAA,CAKC,kBAAC,GAAD;IAAa,WAAU;IAAU,UAAA;GAA4B,CAAA,GAC7D,kBAAC,GAAD;IACC,OAAM;IACN,GAAK,MAAiB,KAAA,KAAa,EAAE,gBAAa;IAClD,WAAU;IAET,UAAA;GACO,CAAA,CACK;EACR,CAAA,CAAA;;AAEV;AAwBA,IAAa,IAAe,EAAM,YAG/B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,OAAD;CAAK,WAAU;CAAuD,sBAAmB;CAAzF,UAAA,CACC,kBAAC,GAAD;EAAQ,WAAU;EAAkC,eAAY;CAAQ,CAAA,GACxE,kBAAC,EAAiB,OAAlB;EACM;EACL,WAAW,EACV,6LACA,CACD;EACA,GAAI;EACJ,cACC,EAAM,kBACL,OAAO,EAAM,eAAgB,WAAW,EAAM,cAAc;CAE9D,CAAA,CACG;AACL,CAAA,CAAA;AACD,EAAa,cAAc,EAAiB,MAAM;AAkBlD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,MAAlB;CACM;CACL,WAAW,EAAG,mDAAmD,CAAS;CAC1E,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAiB,KAAK;AAchD,IAAa,IAAe,EAAM,YAG/B,GAAO,MACT,kBAAC,EAAiB,OAAlB;CACM;CACL,WAAU;CACV,GAAI;AACJ,CAAA,CACD;AACD,EAAa,cAAc,EAAiB,MAAM;AA0BlD,IAAa,IAAe,EAAM,YAG/B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,OAAlB;CACM;CACL,WAAW,EACV,wOACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAa,cAAc,EAAiB,MAAM;AAmBlD,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,WAAlB;CACM;CACL,WAAW,EAAG,+BAA+B,CAAS;CACtD,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAiB,UAAU;AA0C1D,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,MAAlB;CACM;CACL,WAAW,EACV,gRACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAiB,KAAK;AAIhD,SAAgB,EAAgB,EAAE,cAAW,GAAG,KAA+B;CAC9E,OACC,kBAAC,QAAD;EACC,WAAW,EAAG,gEAAgE,CAAS;EACvF,GAAI;CACJ,CAAA;AAEH;AACA,EAAgB,cAAc"}
+{"version":3,"file":"command-palette.js","names":["Command","CommandPrimitive","React","Command$1","props","Command","cn","className","CommandPaletteTrigger","DialogTrigger","CommandPalette","kids","children","triggers","child","content","Dialog","DialogContent","DialogTitle","shouldFilter","CommandInput","Search","measureCommandItem","left","top","node","item","root","CommandList","listRef","useSelectionIndicator","state","style","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut"],"sources":["../../src/components/command-palette.tsx"],"sourcesContent":["import type * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport type { DialogProps } from \"@radix-ui/react-dialog\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Search } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { Dialog, DialogContent, DialogTitle, DialogTrigger } from \"./dialog\";\n\nconst Command = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex min-h-0 w-full flex-col overflow-hidden rounded-basalt-md bg-basalt-popover text-basalt-popover-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nexport interface CommandPaletteProps\n\textends Omit<DialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"children\" | \"modal\"> {\n\t/**\n\t * Command palette structure elements, including CommandPaletteTrigger and inner command items.\n\t * Note: Triggers must be direct children of CommandPalette (child.type === CommandPaletteTrigger)\n\t * to be separated from modal dialog content. Wrapping triggers in Fragments or HOCs will cause\n\t * them to be treated as modal content.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * The controlled open state of the command palette dialog.\n\t */\n\topen?: boolean;\n\t/**\n\t * The uncontrolled initial open state of the command palette dialog.\n\t * @default false\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * Called when the open state changes.\n\t */\n\tonOpenChange?: (open: boolean) => void;\n\t/**\n\t * Filter items as the query changes.\n\t * @default true\n\t */\n\tshouldFilter?: boolean;\n\t/**\n\t * The modality of the dialog. When set to true, interaction with outside elements\n\t * will be disabled and only dialog content will be visible to screen readers.\n\t * @default true\n\t */\n\tmodal?: boolean;\n}\n\ntype RadixDialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\nexport interface CommandPaletteTriggerProps extends Omit<RadixDialogTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * CommandPaletteTrigger is an alias for DialogTrigger; forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogTriggerProps[\"asChild\"];\n}\n\nexport const CommandPaletteTrigger = DialogTrigger;\n\nexport function CommandPalette({ children, shouldFilter, ...props }: CommandPaletteProps) {\n\tconst kids = React.Children.toArray(children);\n\tconst triggers = kids.filter(\n\t\t(child) => React.isValidElement(child) && child.type === CommandPaletteTrigger,\n\t);\n\tconst content = kids.filter(\n\t\t(child) => !(React.isValidElement(child) && child.type === CommandPaletteTrigger),\n\t);\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t{triggers}\n\t\t\t<DialogContent\n\t\t\t\tsize=\"lg\"\n\t\t\t\taria-describedby={undefined}\n\t\t\t\tclassName=\"flex flex-col overflow-hidden bg-basalt-popover p-0 shadow-lg\"\n\t\t\t>\n\t\t\t\t<DialogTitle className=\"sr-only\">Command Palette</DialogTitle>\n\t\t\t\t<Command\n\t\t\t\t\tlabel=\"Command Palette\"\n\t\t\t\t\t{...(shouldFilter !== undefined && { shouldFilter })}\n\t\t\t\t\tclassName=\"[&_[cmdk-group-heading]]:px-basalt-space-lg [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-basalt-5 [&_[cmdk-input-wrapper]_svg]:w-basalt-5 [&_[cmdk-input]]:min-h-basalt-control [&_[cmdk-item]]:px-basalt-space-lg [&_[cmdk-item]]:py-basalt-space-md [&_[cmdk-item]_svg]:h-basalt-4 [&_[cmdk-item]_svg]:w-basalt-4\"\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\ntype RadixCommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>;\n\nexport interface CommandInputProps\n\textends Omit<RadixCommandInputProps, \"value\" | \"onValueChange\" | \"asChild\"> {\n\t/**\n\t * Optional controlled state for the search input value.\n\t * Note: Underlying cmdk input excludes standard onChange/type props in favor of value/onValueChange.\n\t */\n\tvalue?: RadixCommandInputProps[\"value\"];\n\t/**\n\t * Event handler called when the search value changes.\n\t */\n\tonValueChange?: RadixCommandInputProps[\"onValueChange\"];\n\t/**\n\t * Change the default rendered input element to the child element, merging props and behavior.\n\t * CommandInput forwards ref to HTMLInputElement and inherits native input attributes (excluding onChange/type).\n\t * Note: When aria-label is omitted, defaults to placeholder if string, or \"Command Palette\".\n\t * @default false\n\t */\n\tasChild?: RadixCommandInputProps[\"asChild\"];\n}\n\nexport const CommandInput = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Input>,\n\tCommandInputProps\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tclassName=\"flex shrink-0 items-center border-b border-basalt-border px-basalt-space-lg\"\n\t\tcmdk-input-wrapper=\"\"\n\t>\n\t\t<Search\n\t\t\tclassName=\"mr-basalt-space-lg size-basalt-icon-lg shrink-0 opacity-50\"\n\t\t\taria-hidden=\"true\"\n\t\t/>\n\t\t<CommandPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-action flex min-w-0 w-full rounded-basalt-md bg-transparent outline-hidden ring-0 shadow-none placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\taria-label={\n\t\t\t\tprops[\"aria-label\"] ??\n\t\t\t\t(typeof props.placeholder === \"string\" ? props.placeholder : \"Command Palette\")\n\t\t\t}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype RadixCommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;\n\nexport interface CommandListProps extends Omit<RadixCommandListProps, \"label\" | \"asChild\"> {\n\t/**\n\t * Accessible label for this list of suggestions. Not shown visibly.\n\t * @default \"Suggestions\"\n\t */\n\tlabel?: RadixCommandListProps[\"label\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandList forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandListProps[\"asChild\"];\n}\n\nfunction measureCommandItem(item: HTMLElement, root: HTMLElement) {\n\tlet left = 0;\n\tlet top = 0;\n\tfor (\n\t\tlet node: HTMLElement | null = item;\n\t\tnode && node !== root;\n\t\tnode = node.offsetParent as HTMLElement | null\n\t) {\n\t\tleft += node.offsetLeft;\n\t\ttop += node.offsetTop;\n\t}\n\treturn { left, top, width: item.offsetWidth, height: item.offsetHeight };\n}\n\nexport const CommandList = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.List>,\n\tCommandListProps\n>(({ className, style, ...props }, ref) => {\n\tconst { ref: listRef, state } = useSelectionIndicator({\n\t\titemSelector: '[cmdk-item][data-selected=\"true\"]:not([data-disabled=\"true\"])',\n\t\tmapGeometry: measureCommandItem,\n\t\tref,\n\t});\n\treturn (\n\t\t<CommandPrimitive.List\n\t\t\tref={listRef}\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-command-list relative isolate min-h-0 max-h-[18.75rem] overflow-y-auto overflow-x-hidden p-basalt-menu-inset\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tdata-basalt-command-animated={state.animated}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t\"--basalt-command-left\": `${state.left}px`,\n\t\t\t\t\t\"--basalt-command-top\": `${state.top}px`,\n\t\t\t\t\t\"--basalt-command-width\": `${state.visible ? state.width : 0}px`,\n\t\t\t\t\t\"--basalt-command-height\": `${state.visible ? state.height : 0}px`,\n\t\t\t\t\t...style,\n\t\t\t\t} as React.CSSProperties\n\t\t\t}\n\t\t/>\n\t);\n});\nCommandList.displayName = CommandPrimitive.List.displayName;\n\ntype RadixCommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;\n\nexport interface CommandEmptyProps extends Omit<RadixCommandEmptyProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandEmpty forwards ref to HTMLDivElement and inherits native div attributes.\n\t * Note: cmdk Empty does not support forceMount.\n\t * @default false\n\t */\n\tasChild?: RadixCommandEmptyProps[\"asChild\"];\n}\n\nexport const CommandEmpty = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Empty>,\n\tCommandEmptyProps\n>((props, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tclassName=\"py-basalt-space-lg text-center text-basalt-base text-basalt-muted-foreground\"\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\ntype RadixCommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;\n\nexport interface CommandGroupProps\n\textends Omit<RadixCommandGroupProps, \"heading\" | \"value\" | \"forceMount\" | \"asChild\"> {\n\t/**\n\t * Heading to render for this group of command items.\n\t */\n\theading?: RadixCommandGroupProps[\"heading\"];\n\t/**\n\t * Unique value identifying this group. If no heading is provided, value must be specified.\n\t */\n\tvalue?: RadixCommandGroupProps[\"value\"];\n\t/**\n\t * Whether this group is forcibly rendered regardless of filtering state.\n\t */\n\tforceMount?: RadixCommandGroupProps[\"forceMount\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandGroup forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandGroupProps[\"asChild\"];\n}\n\nexport const CommandGroup = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Group>,\n\tCommandGroupProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden py-basalt-space-sm text-basalt-foreground [&_[cmdk-group-heading]]:px-basalt-space-lg [&_[cmdk-group-heading]]:py-basalt-space-md [&_[cmdk-group-heading]]:text-basalt-sm [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\ntype RadixCommandSeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>;\n\nexport interface CommandSeparatorProps\n\textends Omit<RadixCommandSeparatorProps, \"alwaysRender\" | \"asChild\"> {\n\t/**\n\t * Whether this separator should always be rendered. Useful when automatic filtering is disabled.\n\t * When false (default), visible only when the search query is empty.\n\t */\n\talwaysRender?: RadixCommandSeparatorProps[\"alwaysRender\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandSeparator forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandSeparatorProps[\"asChild\"];\n}\n\nexport const CommandSeparator = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Separator>,\n\tCommandSeparatorProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator\n\t\tref={ref}\n\t\tclassName={cn(\"-mx-basalt-space-sm h-px bg-basalt-border\", className)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\ntype RadixCommandItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>;\n\nexport interface CommandItemProps\n\textends Omit<\n\t\tRadixCommandItemProps,\n\t\t\"disabled\" | \"onSelect\" | \"value\" | \"keywords\" | \"forceMount\" | \"asChild\"\n\t> {\n\t/**\n\t * Whether this item is currently disabled from selection.\n\t * @default false\n\t */\n\tdisabled?: RadixCommandItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when this item is selected via click or keyboard.\n\t * Note: cmdk passes the item's resolved value string `(value: string) => void`,\n\t * not a standard DOM SelectEvent.\n\t */\n\tonSelect?: RadixCommandItemProps[\"onSelect\"];\n\t/**\n\t * Unique value identifying this item during filtering and selection.\n\t * Inferred from children/textContent if omitted.\n\t */\n\tvalue?: RadixCommandItemProps[\"value\"];\n\t/**\n\t * Optional additional keywords matched during filtering.\n\t */\n\tkeywords?: RadixCommandItemProps[\"keywords\"];\n\t/**\n\t * Whether this item is forcibly rendered regardless of query filtering.\n\t * Inherits forceMount from parent CommandGroup when omitted.\n\t */\n\tforceMount?: RadixCommandItemProps[\"forceMount\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandItem forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandItemProps[\"asChild\"];\n}\n\nexport const CommandItem = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Item>,\n\tCommandItemProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative z-10 flex cursor-default items-center rounded-basalt-sm px-basalt-menu-x py-basalt-menu-y text-basalt-base leading-basalt-row outline-hidden select-none data-[disabled=true]:pointer-events-none data-[selected=true]:text-basalt-accent-foreground data-[disabled=true]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nexport interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport function CommandShortcut({ className, ...props }: CommandShortcutProps) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"ml-auto text-basalt-sm tracking-widest text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCommandShortcut.displayName = \"CommandShortcut\";\n"],"mappings":"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"}

package/dist/components/confirm-dialog.d.ts

@@ -1,10 +1,13 @@
 import * as React from "react";
+import { type AlertDialogContentProps } from "./alert-dialog.js";
 export type ConfirmDialogVariant = "default" | "destructive";
 export interface ConfirmDialogProps {
     /** Whether the confirmation dialog is shown. */
     open: boolean;
     /** Called when the dialog requests to open or close. */
     onOpenChange: (open: boolean) => void;
+    /** Runs after the close focus trap releases. Prevent default to focus a replacement control. */
+    onCloseAutoFocus?: AlertDialogContentProps["onCloseAutoFocus"];
     /** Called once when the user confirms. The dialog does not close itself; caller manages loading and asynchronous errors. */
     onConfirm: () => void | Promise<void>;
     /** The dialog title. */
@@ -52,5 +55,5 @@ export interface UseConfirmResult {
     confirm: (options: UseConfirmOptions) => Promise<boolean>;
     dialogProps: ConfirmDialogProps;
 }
-export declare function ConfirmDialog({ cancelLabel, confirmLabel, description, loading, onConfirm, onOpenChange, open, title, trigger, variant, }: ConfirmDialogProps): React.JSX.Element;
+export declare function ConfirmDialog({ cancelLabel, confirmLabel, description, loading, onConfirm, onCloseAutoFocus, onOpenChange, open, title, trigger, variant, }: ConfirmDialogProps): React.JSX.Element;
 export declare function useConfirm(): UseConfirmResult;

package/dist/components/confirm-dialog.js

@@ -5,37 +5,39 @@ import * as c from "@radix-ui/react-alert-dialog";
 import * as l from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/confirm-dialog.tsx
-function f({ cancelLabel: f = "Cancel", confirmLabel: p = "Confirm", description: m, loading: h = !1, onConfirm: g, onOpenChange: _, open: v, title: y, trigger: b, variant: x = "default" }) {
-	let S = l.useRef(null), C = l.useRef(null), w = l.useRef(null), T = l.useRef(v), E = l.useRef(null), D = l.useCallback(() => {
-		S.current?.isConnected ? S.current.focus() : E.current?.isConnected && E.current.focus(), E.current = null;
+function f({ cancelLabel: f = "Cancel", confirmLabel: p = "Confirm", description: m, loading: h = !1, onConfirm: g, onCloseAutoFocus: _, onOpenChange: v, open: y, title: b, trigger: x, variant: S = "default" }) {
+	let C = l.useRef(null), w = l.useRef(null), T = l.useRef(null), E = l.useRef(null), D = l.useCallback(() => {
+		C.current?.isConnected ? C.current.focus() : E.current?.isConnected && E.current.focus(), E.current = null;
 	}, []);
-	return l.useEffect(() => {
-		T.current && !v && S.current?.isConnected && S.current.focus(), T.current = v;
-	}, [v]), /* @__PURE__ */ d(t, {
-		open: v,
+	return /* @__PURE__ */ d(t, {
+		open: y,
 		onOpenChange: (e) => {
-			(!h || e) && _(e);
+			(!h || e) && v(e);
 		},
-		children: [l.isValidElement(b) ? /* @__PURE__ */ u(s, {
-			ref: S,
+		children: [l.isValidElement(x) ? /* @__PURE__ */ u(s, {
+			ref: C,
 			asChild: !0,
-			children: b
+			children: x
 		}) : null, /* @__PURE__ */ d(n, {
-			ref: C,
+			ref: w,
 			onOpenAutoFocus: (e) => {
-				if (e.preventDefault(), !E.current?.isConnected && document.activeElement instanceof HTMLElement && !C.current?.contains(document.activeElement) && (E.current = document.activeElement), w.current && !w.current.disabled) {
-					w.current.focus();
+				if (e.preventDefault(), !E.current?.isConnected && document.activeElement instanceof HTMLElement && !w.current?.contains(document.activeElement) && (E.current = document.activeElement), T.current && !T.current.disabled) {
+					T.current.focus();
 					return;
 				}
-				C.current?.focus();
+				w.current?.focus();
 			},
 			onCloseAutoFocus: (e) => {
+				if (_?.(e), e.defaultPrevented) {
+					E.current = null;
+					return;
+				}
 				e.preventDefault(), D();
 			},
-			children: [/* @__PURE__ */ d(a, { children: [/* @__PURE__ */ u(o, { children: y }), /* @__PURE__ */ u(r, { children: m })] }), /* @__PURE__ */ d(i, { children: [/* @__PURE__ */ u(c.Cancel, {
+			children: [/* @__PURE__ */ d(a, { children: [/* @__PURE__ */ u(o, { children: b }), /* @__PURE__ */ u(r, { children: m })] }), /* @__PURE__ */ d(i, { children: [/* @__PURE__ */ u(c.Cancel, {
 				asChild: !0,
 				children: /* @__PURE__ */ u(e, {
-					ref: w,
+					ref: T,
 					disabled: h,
 					variant: "outline",
 					children: f
@@ -44,7 +46,7 @@ function f({ cancelLabel: f = "Cancel", confirmLabel: p = "Confirm", description
 				asChild: !0,
 				children: /* @__PURE__ */ u(e, {
 					loading: h,
-					variant: x,
+					variant: S,
 					onClick: (e) => {
 						e.preventDefault(), h || g();
 					},

package/dist/components/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport {\n\tAlertDialog,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"./alert-dialog\";\nimport { Button } from \"./button\";\n\nexport type ConfirmDialogVariant = \"default\" | \"destructive\";\n\nexport interface ConfirmDialogProps {\n\t/** Whether the confirmation dialog is shown. */\n\topen: boolean;\n\t/** Called when the dialog requests to open or close. */\n\tonOpenChange: (open: boolean) => void;\n\t/** Called once when the user confirms. The dialog does not close itself; caller manages loading and asynchronous errors. */\n\tonConfirm: () => void | Promise<void>;\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/**\n\t * Label for the confirm button.\n\t * @default \"Confirm\"\n\t */\n\tconfirmLabel?: React.ReactNode;\n\t/**\n\t * Label for the cancel button.\n\t * @default \"Cancel\"\n\t */\n\tcancelLabel?: React.ReactNode;\n\t/**\n\t * Appearance of the confirm button.\n\t * @default \"default\"\n\t */\n\tvariant?: ConfirmDialogVariant;\n\t/**\n\t * Disable both actions and ignore close requests while work is pending.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Control that opens the dialog. When set, closing restores focus to it.\n\t */\n\ttrigger?: React.ReactElement;\n}\n\nexport interface UseConfirmOptions {\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/** Label for the confirm button. */\n\tconfirmLabel?: React.ReactNode;\n\t/** Label for the cancel button. */\n\tcancelLabel?: React.ReactNode;\n\t/** Appearance of the confirm button. */\n\tvariant?: ConfirmDialogVariant;\n}\n\nexport interface UseConfirmResult {\n\tconfirm: (options: UseConfirmOptions) => Promise<boolean>;\n\tdialogProps: ConfirmDialogProps;\n}\n\nexport function ConfirmDialog({\n\tcancelLabel = \"Cancel\",\n\tconfirmLabel = \"Confirm\",\n\tdescription,\n\tloading = false,\n\tonConfirm,\n\tonOpenChange,\n\topen,\n\ttitle,\n\ttrigger,\n\tvariant = \"default\",\n}: ConfirmDialogProps) {\n\tconst triggerRef = React.useRef<HTMLButtonElement>(null);\n\tconst panelRef = React.useRef<HTMLDivElement>(null);\n\tconst cancelRef = React.useRef<HTMLButtonElement>(null);\n\tconst wasOpenRef = React.useRef(open);\n\tconst openerRef = React.useRef<HTMLElement | null>(null);\n\n\tconst restoreFocus = React.useCallback(() => {\n\t\tif (triggerRef.current?.isConnected) {\n\t\t\ttriggerRef.current.focus();\n\t\t} else if (openerRef.current?.isConnected) {\n\t\t\topenerRef.current.focus();\n\t\t}\n\t\topenerRef.current = null;\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\tif (wasOpenRef.current && !open) {\n\t\t\tif (triggerRef.current?.isConnected) {\n\t\t\t\ttriggerRef.current.focus();\n\t\t\t}\n\t\t}\n\t\twasOpenRef.current = open;\n\t}, [open]);\n\n\treturn (\n\t\t<AlertDialog\n\t\t\topen={open}\n\t\t\tonOpenChange={(next) => {\n\t\t\t\tif (loading && !next) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonOpenChange(next);\n\t\t\t}}\n\t\t>\n\t\t\t{React.isValidElement(trigger) ? (\n\t\t\t\t<AlertDialogTrigger ref={triggerRef} asChild>\n\t\t\t\t\t{trigger}\n\t\t\t\t</AlertDialogTrigger>\n\t\t\t) : null}\n\t\t\t<AlertDialogContent\n\t\t\t\tref={panelRef}\n\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (\n\t\t\t\t\t\t!openerRef.current?.isConnected &&\n\t\t\t\t\t\tdocument.activeElement instanceof HTMLElement &&\n\t\t\t\t\t\t!panelRef.current?.contains(document.activeElement)\n\t\t\t\t\t) {\n\t\t\t\t\t\topenerRef.current = document.activeElement;\n\t\t\t\t\t}\n\t\t\t\t\tif (cancelRef.current && !cancelRef.current.disabled) {\n\t\t\t\t\t\tcancelRef.current.focus();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tpanelRef.current?.focus();\n\t\t\t\t}}\n\t\t\t\tonCloseAutoFocus={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\trestoreFocus();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t<AlertDialogTitle>{title}</AlertDialogTitle>\n\t\t\t\t\t<AlertDialogDescription>{description}</AlertDialogDescription>\n\t\t\t\t</AlertDialogHeader>\n\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t<AlertDialogPrimitive.Cancel asChild>\n\t\t\t\t\t\t<Button ref={cancelRef} disabled={loading} variant=\"outline\">\n\t\t\t\t\t\t\t{cancelLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Cancel>\n\t\t\t\t\t<AlertDialogPrimitive.Action asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tloading={loading}\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tif (!loading) {\n\t\t\t\t\t\t\t\t\tvoid onConfirm();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{confirmLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Action>\n\t\t\t\t</AlertDialogFooter>\n\t\t\t</AlertDialogContent>\n\t\t</AlertDialog>\n\t);\n}\n\nexport function useConfirm(): UseConfirmResult {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [options, setOptions] = React.useState<UseConfirmOptions>({\n\t\ttitle: \"\",\n\t\tdescription: \"\",\n\t});\n\tconst resolverRef = React.useRef<((value: boolean) => void) | null>(null);\n\n\tconst settle = React.useCallback((value: boolean) => {\n\t\tconst resolve = resolverRef.current;\n\t\tresolverRef.current = null;\n\t\tresolve?.(value);\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\treturn () => {\n\t\t\tsettle(false);\n\t\t};\n\t}, [settle]);\n\n\tconst confirm = React.useCallback(\n\t\t(next: UseConfirmOptions) => {\n\t\t\tsettle(false);\n\t\t\tsetOptions(next);\n\t\t\tsetOpen(true);\n\t\t\treturn new Promise<boolean>((resolve) => {\n\t\t\t\tresolverRef.current = resolve;\n\t\t\t});\n\t\t},\n\t\t[settle],\n\t);\n\n\treturn {\n\t\tconfirm,\n\t\tdialogProps: {\n\t\t\topen,\n\t\t\ttitle: options.title,\n\t\t\tdescription: options.description,\n\t\t\tconfirmLabel: options.confirmLabel,\n\t\t\tcancelLabel: options.cancelLabel,\n\t\t\tvariant: options.variant,\n\t\t\tonOpenChange: (next) => {\n\t\t\t\tsetOpen(next);\n\t\t\t\tif (!next) {\n\t\t\t\t\tsettle(false);\n\t\t\t\t}\n\t\t\t},\n\t\t\tonConfirm: () => {\n\t\t\t\tsettle(true);\n\t\t\t\tsetOpen(false);\n\t\t\t},\n\t\t},\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"file":"confirm-dialog.js","names":["AlertDialogPrimitive","React","ConfirmDialog","triggerRef","panelRef","cancelRef","openerRef","restoreFocus","AlertDialog","next","onOpenChange","trigger","AlertDialogTrigger","AlertDialogContent","event","onCloseAutoFocus","AlertDialogHeader","AlertDialogTitle","title","AlertDialogDescription","description","AlertDialogFooter","Button","loading","cancelLabel","onConfirm","confirmLabel","useConfirm","open","setOpen","options","setOptions","resolverRef","settle","resolve","value"],"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport {\n\tAlertDialog,\n\tAlertDialogContent,\n\ttype AlertDialogContentProps,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"./alert-dialog\";\nimport { Button } from \"./button\";\n\nexport type ConfirmDialogVariant = \"default\" | \"destructive\";\n\nexport interface ConfirmDialogProps {\n\t/** Whether the confirmation dialog is shown. */\n\topen: boolean;\n\t/** Called when the dialog requests to open or close. */\n\tonOpenChange: (open: boolean) => void;\n\t/** Runs after the close focus trap releases. Prevent default to focus a replacement control. */\n\tonCloseAutoFocus?: AlertDialogContentProps[\"onCloseAutoFocus\"];\n\t/** Called once when the user confirms. The dialog does not close itself; caller manages loading and asynchronous errors. */\n\tonConfirm: () => void | Promise<void>;\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/**\n\t * Label for the confirm button.\n\t * @default \"Confirm\"\n\t */\n\tconfirmLabel?: React.ReactNode;\n\t/**\n\t * Label for the cancel button.\n\t * @default \"Cancel\"\n\t */\n\tcancelLabel?: React.ReactNode;\n\t/**\n\t * Appearance of the confirm button.\n\t * @default \"default\"\n\t */\n\tvariant?: ConfirmDialogVariant;\n\t/**\n\t * Disable both actions and ignore close requests while work is pending.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Control that opens the dialog. When set, closing restores focus to it.\n\t */\n\ttrigger?: React.ReactElement;\n}\n\nexport interface UseConfirmOptions {\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/** Label for the confirm button. */\n\tconfirmLabel?: React.ReactNode;\n\t/** Label for the cancel button. */\n\tcancelLabel?: React.ReactNode;\n\t/** Appearance of the confirm button. */\n\tvariant?: ConfirmDialogVariant;\n}\n\nexport interface UseConfirmResult {\n\tconfirm: (options: UseConfirmOptions) => Promise<boolean>;\n\tdialogProps: ConfirmDialogProps;\n}\n\nexport function ConfirmDialog({\n\tcancelLabel = \"Cancel\",\n\tconfirmLabel = \"Confirm\",\n\tdescription,\n\tloading = false,\n\tonConfirm,\n\tonCloseAutoFocus,\n\tonOpenChange,\n\topen,\n\ttitle,\n\ttrigger,\n\tvariant = \"default\",\n}: ConfirmDialogProps) {\n\tconst triggerRef = React.useRef<HTMLButtonElement>(null);\n\tconst panelRef = React.useRef<HTMLDivElement>(null);\n\tconst cancelRef = React.useRef<HTMLButtonElement>(null);\n\tconst openerRef = React.useRef<HTMLElement | null>(null);\n\n\tconst restoreFocus = React.useCallback(() => {\n\t\tif (triggerRef.current?.isConnected) {\n\t\t\ttriggerRef.current.focus();\n\t\t} else if (openerRef.current?.isConnected) {\n\t\t\topenerRef.current.focus();\n\t\t}\n\t\topenerRef.current = null;\n\t}, []);\n\n\treturn (\n\t\t<AlertDialog\n\t\t\topen={open}\n\t\t\tonOpenChange={(next) => {\n\t\t\t\tif (loading && !next) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonOpenChange(next);\n\t\t\t}}\n\t\t>\n\t\t\t{React.isValidElement(trigger) ? (\n\t\t\t\t<AlertDialogTrigger ref={triggerRef} asChild>\n\t\t\t\t\t{trigger}\n\t\t\t\t</AlertDialogTrigger>\n\t\t\t) : null}\n\t\t\t<AlertDialogContent\n\t\t\t\tref={panelRef}\n\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (\n\t\t\t\t\t\t!openerRef.current?.isConnected &&\n\t\t\t\t\t\tdocument.activeElement instanceof HTMLElement &&\n\t\t\t\t\t\t!panelRef.current?.contains(document.activeElement)\n\t\t\t\t\t) {\n\t\t\t\t\t\topenerRef.current = document.activeElement;\n\t\t\t\t\t}\n\t\t\t\t\tif (cancelRef.current && !cancelRef.current.disabled) {\n\t\t\t\t\t\tcancelRef.current.focus();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tpanelRef.current?.focus();\n\t\t\t\t}}\n\t\t\t\tonCloseAutoFocus={(event) => {\n\t\t\t\t\tonCloseAutoFocus?.(event);\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\topenerRef.current = null;\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\trestoreFocus();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t<AlertDialogTitle>{title}</AlertDialogTitle>\n\t\t\t\t\t<AlertDialogDescription>{description}</AlertDialogDescription>\n\t\t\t\t</AlertDialogHeader>\n\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t<AlertDialogPrimitive.Cancel asChild>\n\t\t\t\t\t\t<Button ref={cancelRef} disabled={loading} variant=\"outline\">\n\t\t\t\t\t\t\t{cancelLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Cancel>\n\t\t\t\t\t<AlertDialogPrimitive.Action asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tloading={loading}\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tif (!loading) {\n\t\t\t\t\t\t\t\t\tvoid onConfirm();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{confirmLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Action>\n\t\t\t\t</AlertDialogFooter>\n\t\t\t</AlertDialogContent>\n\t\t</AlertDialog>\n\t);\n}\n\nexport function useConfirm(): UseConfirmResult {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [options, setOptions] = React.useState<UseConfirmOptions>({\n\t\ttitle: \"\",\n\t\tdescription: \"\",\n\t});\n\tconst resolverRef = React.useRef<((value: boolean) => void) | null>(null);\n\n\tconst settle = React.useCallback((value: boolean) => {\n\t\tconst resolve = resolverRef.current;\n\t\tresolverRef.current = null;\n\t\tresolve?.(value);\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\treturn () => {\n\t\t\tsettle(false);\n\t\t};\n\t}, [settle]);\n\n\tconst confirm = React.useCallback(\n\t\t(next: UseConfirmOptions) => {\n\t\t\tsettle(false);\n\t\t\tsetOptions(next);\n\t\t\tsetOpen(true);\n\t\t\treturn new Promise<boolean>((resolve) => {\n\t\t\t\tresolverRef.current = resolve;\n\t\t\t});\n\t\t},\n\t\t[settle],\n\t);\n\n\treturn {\n\t\tconfirm,\n\t\tdialogProps: {\n\t\t\topen,\n\t\t\ttitle: options.title,\n\t\t\tdescription: options.description,\n\t\t\tconfirmLabel: options.confirmLabel,\n\t\t\tcancelLabel: options.cancelLabel,\n\t\t\tvariant: options.variant,\n\t\t\tonOpenChange: (next) => {\n\t\t\t\tsetOpen(next);\n\t\t\t\tif (!next) {\n\t\t\t\t\tsettle(false);\n\t\t\t\t}\n\t\t\t},\n\t\t\tonConfirm: () => {\n\t\t\t\tsettle(true);\n\t\t\t\tsetOpen(false);\n\t\t\t},\n\t\t},\n\t};\n}\n"],"mappings":"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"}

package/dist/components/context-cards.d.ts

@@ -0,0 +1,15 @@
+import type { ContextChunk } from "../models/context-cards.js";
+export type { ContextChunk } from "../models/context-cards.js";
+export interface ContextCardsProps {
+    /** Retrieved chunks with stable IDs and caller-owned source metadata. */
+    chunks: readonly ContextChunk[];
+    /** Heading for the chunk list. @default "All chunks" */
+    title?: string;
+    /** Total available chunks, when displaying a subset. Never smaller than the visible count. */
+    totalCount?: number;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    className?: string;
+}
+export declare function ContextCards({ chunks, title, totalCount, loading, error, onRetry, className, }: ContextCardsProps): import("react").JSX.Element;

package/dist/components/context-cards.js

@@ -0,0 +1,148 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "./button.js";
+import { Badge as n } from "./badge.js";
+import { SkeletonLine as r } from "./skeleton-line.js";
+import { LayerCard as i } from "./layer-card.js";
+import { useContextCardsViewModel as a } from "../viewmodels/use-context-cards.js";
+import { useId as o } from "react";
+import { ExternalLink as s, FileText as c, TextAlignStart as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/context-cards.tsx
+function f({ chunks: f, title: p = "All chunks", totalCount: m, loading: h = !1, error: g, onRetry: _, className: v }) {
+	let y = a(f, m), b = o();
+	return /* @__PURE__ */ d("section", {
+		"aria-labelledby": b,
+		"aria-busy": h || void 0,
+		className: e("basalt-ui min-w-0 space-y-basalt-content-gap leading-[var(--basalt-line-body)]", v),
+		children: [/* @__PURE__ */ d("header", {
+			className: "flex items-center gap-basalt-content-gap",
+			children: [/* @__PURE__ */ u("h3", {
+				id: b,
+				className: "text-basalt-code font-medium",
+				children: p
+			}), /* @__PURE__ */ u(n, {
+				variant: "secondary",
+				className: "tabular-nums leading-[var(--basalt-line-compact)]",
+				children: y.count
+			})]
+		}), h ? /* @__PURE__ */ u(i, {
+			padding: "sm",
+			children: /* @__PURE__ */ d("div", {
+				role: "status",
+				"aria-label": "Loading context",
+				className: "space-y-basalt-space-lg",
+				children: [
+					/* @__PURE__ */ u(r, {}),
+					/* @__PURE__ */ u(r, {}),
+					/* @__PURE__ */ u(r, {})
+				]
+			})
+		}) : g ? /* @__PURE__ */ d(i, {
+			padding: "sm",
+			children: [/* @__PURE__ */ u("p", {
+				role: "alert",
+				className: "text-basalt-base text-basalt-danger",
+				children: g
+			}), _ && /* @__PURE__ */ u(t, {
+				size: "sm",
+				variant: "outline",
+				className: "mt-basalt-space-lg",
+				onClick: _,
+				children: "Try again"
+			})]
+		}) : y.chunks.length === 0 ? /* @__PURE__ */ u("p", {
+			role: "status",
+			className: "py-basalt-space-lg text-basalt-base text-basalt-muted-foreground",
+			children: "No context retrieved"
+		}) : /* @__PURE__ */ u("ul", {
+			className: "space-y-basalt-content-gap",
+			children: y.chunks.map((e) => /* @__PURE__ */ u("li", {
+				className: "basalt-agent-reveal",
+				style: {
+					animationDelay: `${e.delay}ms`,
+					animationFillMode: "both"
+				},
+				children: /* @__PURE__ */ d(i, {
+					padding: "none",
+					className: "min-w-0 overflow-hidden",
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "flex flex-wrap items-center justify-between gap-basalt-control-gap border-b border-basalt-border px-basalt-panel-x py-basalt-panel-y",
+							children: [/* @__PURE__ */ d("h4", {
+								className: "inline-flex min-w-0 items-center gap-basalt-row-gap text-basalt-code leading-[var(--basalt-line-body)] font-medium",
+								children: [/* @__PURE__ */ u(l, {
+									"aria-hidden": "true",
+									className: "size-basalt-icon shrink-0",
+									strokeWidth: 1.5
+								}), /* @__PURE__ */ u("span", {
+									className: "break-words",
+									children: e.title
+								})]
+							}), /* @__PURE__ */ d("span", {
+								className: "shrink-0 text-basalt-sm tabular-nums text-basalt-muted-foreground",
+								children: [e.characters.toLocaleString("en-US"), " characters"]
+							})]
+						}),
+						/* @__PURE__ */ u("p", {
+							className: "whitespace-pre-wrap break-words px-basalt-panel-x py-basalt-panel-y text-basalt-code leading-[var(--basalt-line-body)] text-basalt-muted-foreground",
+							children: e.body
+						}),
+						/* @__PURE__ */ u("div", {
+							className: "flex min-w-0 px-basalt-panel-x pb-basalt-panel-y",
+							children: e.href ? /* @__PURE__ */ d("a", {
+								href: e.href,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "inline-flex max-w-full items-center gap-basalt-control-gap py-basalt-space-xs text-basalt-sm text-basalt-foreground outline-hidden hover:bg-basalt-hover focus-visible:ring-2 focus-visible:ring-basalt-ring",
+								children: [
+									/* @__PURE__ */ u(c, {
+										"aria-hidden": "true",
+										className: "size-basalt-icon shrink-0",
+										strokeWidth: 1.5
+									}),
+									/* @__PURE__ */ u("span", {
+										className: "shrink-0 font-mono text-basalt-xs text-basalt-muted-foreground",
+										children: e.source.type
+									}),
+									/* @__PURE__ */ u("span", {
+										className: "truncate",
+										title: e.source.name,
+										children: e.source.name
+									}),
+									/* @__PURE__ */ u(s, {
+										"aria-hidden": "true",
+										className: "size-basalt-icon shrink-0",
+										strokeWidth: 1.5
+									})
+								]
+							}) : /* @__PURE__ */ d("span", {
+								className: "inline-flex max-w-full items-center gap-basalt-control-gap py-basalt-space-xs text-basalt-sm",
+								children: [
+									/* @__PURE__ */ u(c, {
+										"aria-hidden": "true",
+										className: "size-basalt-icon shrink-0",
+										strokeWidth: 1.5
+									}),
+									/* @__PURE__ */ u("span", {
+										className: "shrink-0 font-mono text-basalt-xs text-basalt-muted-foreground",
+										children: e.source.type
+									}),
+									/* @__PURE__ */ u("span", {
+										className: "truncate",
+										title: e.source.name,
+										children: e.source.name
+									})
+								]
+							})
+						})
+					]
+				})
+			}, e.id))
+		})]
+	});
+}
+//#endregion
+export { f as ContextCards };
+
+//# sourceMappingURL=context-cards.js.map