@burtson-labs/ui 0.8.1 → 0.9.0

package/dist/components/menubar.js

@@ -0,0 +1,140 @@
+import { cn } from "../lib/utils.js";
+import { menuItemClasses, surfaceClasses } from "./popover.js";
+import { Menubar } from "radix-ui";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ChevronRight from "@burtson-labs/icons/react/chevron-right";
+import Check from "@burtson-labs/icons/react/check";
+//#region src/components/menubar.tsx
+/**
+* An application menu bar (File, Edit, View). Left/Right move between menus,
+* Down opens one, and an open menu follows the pointer across triggers. Rows
+* match DropdownMenu and ContextMenu.
+*/
+function Menubar$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Root, {
+		"data-slot": "menubar",
+		className: cn("flex h-8 items-center gap-0.5 rounded-md border bg-surface p-0.5", className),
+		...props
+	});
+}
+function MenubarMenu(props) {
+	return /* @__PURE__ */ jsx(Menubar.Menu, {
+		"data-slot": "menubar-menu",
+		...props
+	});
+}
+function MenubarTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Trigger, {
+		"data-slot": "menubar-trigger",
+		className: cn("flex h-7 items-center rounded-sm px-2.5 text-[13px] font-medium outline-none select-none hover:bg-muted focus-visible:shadow-[inset_0_0_0_1px_var(--ring)] data-[state=open]:bg-muted", className),
+		...props
+	});
+}
+function MenubarGroup(props) {
+	return /* @__PURE__ */ jsx(Menubar.Group, {
+		"data-slot": "menubar-group",
+		...props
+	});
+}
+function MenubarContent({ className, align = "start", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Portal, { children: /* @__PURE__ */ jsx(Menubar.Content, {
+		"data-slot": "menubar-content",
+		align,
+		sideOffset,
+		className: cn(surfaceClasses, "max-h-(--radix-menubar-content-available-height) min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-x-hidden overflow-y-auto p-1", className),
+		...props
+	}) });
+}
+function MenubarItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Item, {
+		"data-slot": "menubar-item",
+		"data-inset": inset || void 0,
+		"data-variant": variant,
+		className: cn(menuItemClasses, "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive", className),
+		...props
+	});
+}
+function MenubarCheckboxItem({ className, children, checked, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar.CheckboxItem, {
+		"data-slot": "menubar-checkbox-item",
+		className: cn(menuItemClasses, "pl-8", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, {
+				className: "size-4 text-foreground",
+				"aria-hidden": true
+			}) })
+		}), children]
+	});
+}
+function MenubarRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menubar.RadioGroup, {
+		"data-slot": "menubar-radio-group",
+		...props
+	});
+}
+function MenubarRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar.RadioItem, {
+		"data-slot": "menubar-radio-item",
+		className: cn(menuItemClasses, "pl-8", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "block size-2 rounded-full bg-foreground" }) })
+		}), children]
+	});
+}
+function MenubarLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Label, {
+		"data-slot": "menubar-label",
+		"data-inset": inset || void 0,
+		className: cn("px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8", className),
+		...props
+	});
+}
+function MenubarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Separator, {
+		"data-slot": "menubar-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function MenubarShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "menubar-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+}
+function MenubarSub(props) {
+	return /* @__PURE__ */ jsx(Menubar.Sub, {
+		"data-slot": "menubar-sub",
+		...props
+	});
+}
+function MenubarSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menubar.SubTrigger, {
+		"data-slot": "menubar-sub-trigger",
+		"data-inset": inset || void 0,
+		className: cn(menuItemClasses, "data-[state=open]:bg-muted", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, {
+			className: "ml-auto size-4",
+			"aria-hidden": true
+		})]
+	});
+}
+function MenubarSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar.Portal, { children: /* @__PURE__ */ jsx(Menubar.SubContent, {
+		"data-slot": "menubar-sub-content",
+		className: cn(surfaceClasses, "min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden p-1", className),
+		...props
+	}) });
+}
+//#endregion
+export { Menubar$1 as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };
+
+//# sourceMappingURL=menubar.js.map

package/dist/components/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":["Menubar","MenubarPrimitive","itemClasses"],"sources":["../../src/components/menubar.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport { Menubar as MenubarPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { menuItemClasses as itemClasses, surfaceClasses } from './popover';\n\n/**\n * An application menu bar (File, Edit, View). Left/Right move between menus,\n * Down opens one, and an open menu follows the pointer across triggers. Rows\n * match DropdownMenu and ContextMenu.\n */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn('flex h-8 items-center gap-0.5 rounded-md border bg-surface p-0.5', className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        'flex h-7 items-center rounded-sm px-2.5 text-[13px] font-medium outline-none select-none hover:bg-muted focus-visible:shadow-[inset_0_0_0_1px_var(--ring)] data-[state=open]:bg-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\nfunction MenubarContent({\n  className,\n  align = 'start',\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'max-h-(--radix-menubar-content-available-height) min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset || undefined}\n      data-variant={variant}\n      className={cn(\n        itemClasses,\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Check className=\"size-4 text-foreground\" aria-hidden />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\nfunction MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(itemClasses, 'pl-8', className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <span className=\"block size-2 rounded-full bg-foreground\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & { inset?: boolean }) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset || undefined}\n      className={cn(\n        'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn('-mx-1 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset || undefined}\n      className={cn(itemClasses, 'data-[state=open]:bg-muted', className)}\n      {...props}\n    >\n      {children}\n      <ChevronRight className=\"ml-auto size-4\" aria-hidden />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.SubContent\n        data-slot=\"menubar-sub-content\"\n        className={cn(\n          surfaceClasses,\n          'min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden p-1',\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  );\n}\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n};\n"],"mappings":"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"}

package/dist/components/onboarding-checklist.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface ChecklistItem {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Set from real app events (a repo opened, a provider tested), never from a click on the list. */
+    done: boolean;
+    /** A button or link that starts the task. Hidden once done. */
+    action?: React.ReactNode;
+}
+export interface OnboardingChecklistProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    items: ChecklistItem[];
+    /** Shows a close button. Persist the dismissal yourself. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    /** Replaces the list once every item is done. */
+    complete?: React.ReactNode;
+}
+/**
+ * A short list of first tasks with progress. The app decides when each task
+ * is done and whether the list shows at all; this renders it.
+ */
+declare function OnboardingChecklist({ title, description, items, onDismiss, dismissLabel, complete, className, ...props }: OnboardingChecklistProps): React.JSX.Element;
+export { OnboardingChecklist };

package/dist/components/onboarding-checklist.js

@@ -0,0 +1,106 @@
+import { cn } from "../lib/utils.js";
+import { Progress } from "./progress.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import X from "@burtson-labs/icons/react/x";
+import CheckCircle from "@burtson-labs/icons/react/check-circle";
+import CircleDashed from "@burtson-labs/icons/react/circle-dashed";
+//#region src/components/onboarding-checklist.tsx
+/**
+* A short list of first tasks with progress. The app decides when each task
+* is done and whether the list shows at all; this renders it.
+*/
+function OnboardingChecklist({ title, description, items, onDismiss, dismissLabel = "Dismiss checklist", complete, className, ...props }) {
+	const titleId = React.useId();
+	const done = items.filter((i) => i.done).length;
+	const allDone = items.length > 0 && done === items.length;
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "onboarding-checklist",
+		"aria-labelledby": titleId,
+		className: cn("rounded-lg border bg-card p-4 text-[13px] text-card-foreground", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: "text-sm font-semibold",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "mt-0.5 text-muted-foreground",
+						children: description
+					})]
+				}), onDismiss && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": dismissLabel,
+					onClick: onDismiss,
+					className: "-me-1 -mt-1 flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:shadow-[inset_0_0_0_1px_var(--ring)]",
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": true,
+						className: "size-4"
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx(Progress, {
+					value: done,
+					max: Math.max(items.length, 1),
+					"aria-label": `${done} of ${items.length} done`,
+					className: "flex-1"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "shrink-0 text-xs text-muted-foreground tabular-nums",
+					"aria-hidden": true,
+					children: [
+						done,
+						"/",
+						items.length
+					]
+				})]
+			}),
+			allDone && complete ? /* @__PURE__ */ jsx("div", {
+				className: "mt-3",
+				children: complete
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: "mt-3 flex flex-col gap-1",
+				children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+					"data-slot": "onboarding-checklist-item",
+					"data-state": item.done ? "done" : "todo",
+					className: "flex items-start gap-2.5 rounded-md px-1 py-1.5",
+					children: [
+						item.done ? /* @__PURE__ */ jsx(CheckCircle, {
+							"aria-hidden": true,
+							className: "mt-px size-4 shrink-0 text-success"
+						}) : /* @__PURE__ */ jsx(CircleDashed, {
+							"aria-hidden": true,
+							className: "mt-px size-4 shrink-0 text-muted-foreground"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: cn("font-medium", item.done && "text-muted-foreground line-through"),
+								children: [item.title, /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: item.done ? ", done" : ", not done"
+								})]
+							}), item.description && !item.done && /* @__PURE__ */ jsx("p", {
+								className: "mt-0.5 text-muted-foreground",
+								children: item.description
+							})]
+						}),
+						item.action && !item.done && /* @__PURE__ */ jsx("div", {
+							className: "shrink-0",
+							children: item.action
+						})
+					]
+				}, item.id))
+			})
+		]
+	});
+}
+//#endregion
+export { OnboardingChecklist };
+
+//# sourceMappingURL=onboarding-checklist.js.map

package/dist/components/onboarding-checklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-checklist.js","names":[],"sources":["../../src/components/onboarding-checklist.tsx"],"sourcesContent":["import CheckCircle from '@burtson-labs/icons/react/check-circle';\nimport CircleDashed from '@burtson-labs/icons/react/circle-dashed';\nimport X from '@burtson-labs/icons/react/x';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Progress } from './progress';\n\nexport interface ChecklistItem {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Set from real app events (a repo opened, a provider tested), never from a click on the list. */\n  done: boolean;\n  /** A button or link that starts the task. Hidden once done. */\n  action?: React.ReactNode;\n}\n\nexport interface OnboardingChecklistProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  items: ChecklistItem[];\n  /** Shows a close button. Persist the dismissal yourself. */\n  onDismiss?: () => void;\n  dismissLabel?: string;\n  /** Replaces the list once every item is done. */\n  complete?: React.ReactNode;\n}\n\n/**\n * A short list of first tasks with progress. The app decides when each task\n * is done and whether the list shows at all; this renders it.\n */\nfunction OnboardingChecklist({\n  title,\n  description,\n  items,\n  onDismiss,\n  dismissLabel = 'Dismiss checklist',\n  complete,\n  className,\n  ...props\n}: OnboardingChecklistProps) {\n  const titleId = React.useId();\n  const done = items.filter((i) => i.done).length;\n  const allDone = items.length > 0 && done === items.length;\n  return (\n    <section\n      data-slot=\"onboarding-checklist\"\n      aria-labelledby={titleId}\n      className={cn('rounded-lg border bg-card p-4 text-[13px] text-card-foreground', className)}\n      {...props}\n    >\n      <div className=\"flex items-start gap-3\">\n        <div className=\"min-w-0 flex-1\">\n          <h2 id={titleId} className=\"text-sm font-semibold\">\n            {title}\n          </h2>\n          {description && <p className=\"mt-0.5 text-muted-foreground\">{description}</p>}\n        </div>\n        {onDismiss && (\n          <button\n            type=\"button\"\n            aria-label={dismissLabel}\n            onClick={onDismiss}\n            className=\"-me-1 -mt-1 flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:shadow-[inset_0_0_0_1px_var(--ring)]\"\n          >\n            <X aria-hidden className=\"size-4\" />\n          </button>\n        )}\n      </div>\n      <div className=\"mt-3 flex items-center gap-3\">\n        <Progress\n          value={done}\n          max={Math.max(items.length, 1)}\n          aria-label={`${done} of ${items.length} done`}\n          className=\"flex-1\"\n        />\n        <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\" aria-hidden>\n          {done}/{items.length}\n        </span>\n      </div>\n      {allDone && complete ? (\n        <div className=\"mt-3\">{complete}</div>\n      ) : (\n        <ul className=\"mt-3 flex flex-col gap-1\">\n          {items.map((item) => (\n            <li\n              key={item.id}\n              data-slot=\"onboarding-checklist-item\"\n              data-state={item.done ? 'done' : 'todo'}\n              className=\"flex items-start gap-2.5 rounded-md px-1 py-1.5\"\n            >\n              {item.done ? (\n                <CheckCircle aria-hidden className=\"mt-px size-4 shrink-0 text-success\" />\n              ) : (\n                <CircleDashed aria-hidden className=\"mt-px size-4 shrink-0 text-muted-foreground\" />\n              )}\n              <div className=\"min-w-0 flex-1\">\n                <p className={cn('font-medium', item.done && 'text-muted-foreground line-through')}>\n                  {item.title}\n                  <span className=\"sr-only\">{item.done ? ', done' : ', not done'}</span>\n                </p>\n                {item.description && !item.done && (\n                  <p className=\"mt-0.5 text-muted-foreground\">{item.description}</p>\n                )}\n              </div>\n              {item.action && !item.done && <div className=\"shrink-0\">{item.action}</div>}\n            </li>\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n}\n\nexport { OnboardingChecklist };\n"],"mappings":";;;;;;;;;;;;AAkCA,SAAS,oBAAoB,EAC3B,OACA,aACA,OACA,WACA,eAAe,qBACf,UACA,WACA,GAAG,SACwB;CAC3B,MAAM,UAAU,MAAM,MAAM;CAC5B,MAAM,OAAO,MAAM,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC;CACzC,MAAM,UAAU,MAAM,SAAS,KAAK,SAAS,MAAM;CACnD,OACE,qBAAC,WAAD;EACE,aAAU;EACV,mBAAiB;EACjB,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;EAJN,UAAA;GAME,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;MACxB,UAAA;KACC,CAAA,GACH,eAAe,oBAAC,KAAD;MAAG,WAAU;MAAgC,UAAA;KAAe,CAAA,CACzE;IACJ,CAAA,GAAA,aACC,oBAAC,UAAD;KACE,MAAK;KACL,cAAY;KACZ,SAAS;KACT,WAAU;KAEV,UAAA,oBAAC,GAAD;MAAG,eAAA;MAAY,WAAU;KAAU,CAAA;IAC7B,CAAA,CAEP;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,UAAD;KACE,OAAO;KACP,KAAK,KAAK,IAAI,MAAM,QAAQ,CAAC;KAC7B,cAAY,GAAG,KAAK,MAAM,MAAM,OAAO;KACvC,WAAU;IACX,CAAA,GACD,qBAAC,QAAD;KAAM,WAAU;KAAsD,eAAA;KAAtE,UAAA;MACG;MAAK;MAAE,MAAM;KACV;IACH,CAAA,CAAA;;GACJ,WAAW,WACV,oBAAC,OAAD;IAAK,WAAU;IAAQ,UAAA;GAAc,CAAA,IAErC,oBAAC,MAAD;IAAI,WAAU;IACX,UAAA,MAAM,KAAK,SACV,qBAAC,MAAD;KAEE,aAAU;KACV,cAAY,KAAK,OAAO,SAAS;KACjC,WAAU;KAJZ,UAAA;MAMG,KAAK,OACJ,oBAAC,aAAD;OAAa,eAAA;OAAY,WAAU;MAAsC,CAAA,IAEzE,oBAAC,cAAD;OAAc,eAAA;OAAY,WAAU;MAA+C,CAAA;MAErF,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,qBAAC,KAAD;QAAG,WAAW,GAAG,eAAe,KAAK,QAAQ,oCAAoC;QAAjF,UAAA,CACG,KAAK,OACN,oBAAC,QAAD;SAAM,WAAU;SAAW,UAAA,KAAK,OAAO,WAAW;QAAmB,CAAA,CACpE;OACF,CAAA,GAAA,KAAK,eAAe,CAAC,KAAK,QACzB,oBAAC,KAAD;QAAG,WAAU;QAAgC,UAAA,KAAK;OAAe,CAAA,CAEhE;;MACJ,KAAK,UAAU,CAAC,KAAK,QAAQ,oBAAC,OAAD;OAAK,WAAU;OAAY,UAAA,KAAK;MAAY,CAAA;KACxE;IApBG,GAAA,KAAK,EAoBR,CACL;GACC,CAAA;EAEC;;AAEb"}

package/dist/components/popover.d.ts

@@ -5,6 +5,8 @@ import * as React from 'react';
  * with a strong border, and the one place a heavy shadow is allowed.
  */
 export declare const surfaceClasses = "z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]";
+/** A menu row: 32px, 8px radius; the focused row is a quiet fill, like an active tab. */
+export declare const menuItemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
 declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
 declare function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;

package/dist/components/popover.js

@@ -8,6 +8,8 @@ import { jsx } from "react/jsx-runtime";
 * with a strong border, and the one place a heavy shadow is allowed.
 */
 var surfaceClasses = "z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]";
+/** A menu row: 32px, 8px radius; the focused row is a quiet fill, like an active tab. */
+var menuItemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
 function Popover$1(props) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		"data-slot": "popover",
@@ -36,6 +38,6 @@ function PopoverContent({ className, align = "center", sideOffset = 6, ...props
 	}) });
 }
 //#endregion
-export { Popover$1 as Popover, PopoverAnchor, PopoverContent, PopoverTrigger, surfaceClasses };
+export { Popover$1 as Popover, PopoverAnchor, PopoverContent, PopoverTrigger, menuItemClasses, surfaceClasses };
 
 //# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["Popover","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/**\n * The floating surface shared by popovers, menus and select lists: raised,\n * with a strong border, and the one place a heavy shadow is allowed.\n */\nexport const surfaceClasses =\n  'z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]';\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 6,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'w-72 max-w-[calc(100vw-2rem)] max-h-(--radix-popover-content-available-height) overflow-y-auto origin-(--radix-popover-content-transform-origin) p-4 outline-hidden',\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;;;;;AASA,IAAa,iBACX;AAEF,SAASA,UAAQ,OAA2D;CAC1E,OAAO,oBAACC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,cAAc,OAA6D;CAClF,OAAO,oBAACA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,GAAG,SACqD;CACxD,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACH;EACK;EACZ,WAAW,GACT,gBACA,uKACA,SACF;EACA,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}
+{"version":3,"file":"popover.js","names":["Popover","PopoverPrimitive"],"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/**\n * The floating surface shared by popovers, menus and select lists: raised,\n * with a strong border, and the one place a heavy shadow is allowed.\n */\nexport const surfaceClasses =\n  'z-50 animate-in rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[side=bottom]:[--bl-ty:-6px] data-[side=top]:[--bl-ty:6px] data-[side=left]:[--bl-tx:6px] data-[side=right]:[--bl-tx:-6px]';\n\n/** A menu row: 32px, 8px radius; the focused row is a quiet fill, like an active tab. */\nexport const menuItemClasses =\n  \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\";\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 6,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          surfaceClasses,\n          'w-72 max-w-[calc(100vw-2rem)] max-h-(--radix-popover-content-available-height) overflow-y-auto origin-(--radix-popover-content-transform-origin) p-4 outline-hidden',\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;;;;;AASA,IAAa,iBACX;;AAGF,IAAa,kBACX;AAEF,SAASA,UAAQ,OAA2D;CAC1E,OAAO,oBAACC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,cAAc,OAA6D;CAClF,OAAO,oBAACA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,GAAG,SACqD;CACxD,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACH;EACK;EACZ,WAAW,GACT,gBACA,uKACA,SACF;EACA,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}

package/dist/components/resizable.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Group, Panel, Separator, type Layout, type LayoutChangedMeta } from 'react-resizable-panels';
+export type ResizableLayout = Layout;
+export interface ResizablePanelGroupProps extends Omit<React.ComponentProps<typeof Group>, 'defaultLayout' | 'onLayoutChange' | 'onLayoutChanged'> {
+    /**
+     * Controlled sizes: panel id → percentage (0..100). Pass it with
+     * onLayoutChange, or onLayoutChanged if you only need the settled value.
+     * The group re-applies it whenever it differs from what is on screen.
+     */
+    layout?: ResizableLayout;
+    /** Initial sizes when uncontrolled, e.g. restored from storage. */
+    defaultLayout?: ResizableLayout;
+    /** Every change, including each pointer move while dragging. */
+    onLayoutChange?: (layout: ResizableLayout) => void;
+    /** After a drag ends or a key resizes; the one to persist. */
+    onLayoutChanged?: (layout: ResizableLayout, meta: LayoutChangedMeta) => void;
+}
+declare function ResizablePanelGroup({ className, layout, defaultLayout, groupRef: groupRefProp, orientation, ...props }: ResizablePanelGroupProps): React.JSX.Element;
+declare function ResizablePanel({ className, ...props }: React.ComponentProps<typeof Panel>): React.JSX.Element;
+export interface ResizeHandleProps extends React.ComponentProps<typeof Separator> {
+    /** Show a small grip in the middle of the line. */
+    withHandle?: boolean;
+    /** What the handle resizes, e.g. "Resize explorer". Required for screen readers. */
+    'aria-label': string;
+}
+/**
+ * The separator between two panels. It is a 1px line with an 8px hit area;
+ * hover and drag tint it, keyboard focus draws it in the brand colour.
+ */
+declare function ResizeHandle({ className, withHandle, ...props }: ResizeHandleProps): React.JSX.Element;
+export { usePanelRef, useGroupRef } from 'react-resizable-panels';
+export type { GroupImperativeHandle as ResizablePanelGroupHandle, PanelImperativeHandle as ResizablePanelHandle, } from 'react-resizable-panels';
+export { ResizablePanelGroup, ResizablePanel, ResizeHandle };

package/dist/components/resizable.js

@@ -0,0 +1,54 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Group, Panel, Separator, useGroupRef, usePanelRef } from "react-resizable-panels";
+//#region src/components/resizable.tsx
+var sameLayout = (a, b) => {
+	const keys = Object.keys(a);
+	return keys.length === Object.keys(b).length && keys.every((k) => b[k] !== void 0 && Math.abs((a[k] ?? 0) - (b[k] ?? 0)) < .01);
+};
+function ResizablePanelGroup({ className, layout, defaultLayout, groupRef: groupRefProp, orientation = "horizontal", ...props }) {
+	const groupRef = React.useRef(null);
+	React.useImperativeHandle(groupRefProp, () => groupRef.current, []);
+	React.useEffect(() => {
+		const group = groupRef.current;
+		if (!layout || !group) return;
+		if (!sameLayout(group.getLayout(), layout)) group.setLayout(layout);
+	}, [layout]);
+	return /* @__PURE__ */ jsx(Group, {
+		"data-slot": "resizable-panel-group",
+		"data-orientation": orientation,
+		orientation,
+		groupRef,
+		defaultLayout: layout ?? defaultLayout,
+		className: cn("flex h-full w-full data-[orientation=vertical]:flex-col", className),
+		...props
+	});
+}
+function ResizablePanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Panel, {
+		"data-slot": "resizable-panel",
+		className: cn("min-h-0 min-w-0", className),
+		...props
+	});
+}
+/**
+* The separator between two panels. It is a 1px line with an 8px hit area;
+* hover and drag tint it, keyboard focus draws it in the brand colour.
+*/
+function ResizeHandle({ className, withHandle, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "resize-handle",
+		className: cn("group/handle relative flex shrink-0 items-center justify-center bg-border outline-none", "after:absolute after:content-[\"\"]", "aria-[orientation=vertical]:w-px aria-[orientation=vertical]:after:inset-y-0 aria-[orientation=vertical]:after:-inset-x-1", "aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:-inset-y-1", "transition-colors data-[separator=hover]:bg-border-strong data-[separator=active]:bg-brand", "focus-visible:outline-none data-[separator=focus]:bg-ring data-[separator=focus]:shadow-[0_0_0_1px_var(--ring)]", "data-[separator=disabled]:opacity-50", className),
+		...props,
+		children: withHandle && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "z-10 flex items-center justify-center rounded-xs border bg-surface group-aria-[orientation=vertical]/handle:h-6 group-aria-[orientation=vertical]/handle:w-2 group-aria-[orientation=horizontal]/handle:h-2 group-aria-[orientation=horizontal]/handle:w-6",
+			children: /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted-foreground/60 group-aria-[orientation=vertical]/handle:h-3 group-aria-[orientation=vertical]/handle:w-px group-aria-[orientation=horizontal]/handle:h-px group-aria-[orientation=horizontal]/handle:w-3" })
+		})
+	});
+}
+//#endregion
+export { ResizablePanel, ResizablePanelGroup, ResizeHandle, useGroupRef, usePanelRef };
+
+//# sourceMappingURL=resizable.js.map

package/dist/components/resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.js","names":[],"sources":["../../src/components/resizable.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Group,\n  Panel,\n  Separator,\n  type GroupImperativeHandle,\n  type Layout,\n  type LayoutChangedMeta,\n} from 'react-resizable-panels';\n\nimport { cn } from '../lib/utils';\n\n// Resizing is react-resizable-panels: it implements the WAI-ARIA window\n// splitter (arrow keys, Home/End, Enter to collapse), captures the pointer so\n// a drag over an iframe or terminal keeps tracking, and enforces min/max and\n// collapse. This file adds the Burtson look and a controlled `layout` prop.\n\nexport type ResizableLayout = Layout;\n\nexport interface ResizablePanelGroupProps extends Omit<\n  React.ComponentProps<typeof Group>,\n  'defaultLayout' | 'onLayoutChange' | 'onLayoutChanged'\n> {\n  /**\n   * Controlled sizes: panel id → percentage (0..100). Pass it with\n   * onLayoutChange, or onLayoutChanged if you only need the settled value.\n   * The group re-applies it whenever it differs from what is on screen.\n   */\n  layout?: ResizableLayout;\n  /** Initial sizes when uncontrolled, e.g. restored from storage. */\n  defaultLayout?: ResizableLayout;\n  /** Every change, including each pointer move while dragging. */\n  onLayoutChange?: (layout: ResizableLayout) => void;\n  /** After a drag ends or a key resizes; the one to persist. */\n  onLayoutChanged?: (layout: ResizableLayout, meta: LayoutChangedMeta) => void;\n}\n\nconst sameLayout = (a: ResizableLayout, b: ResizableLayout) => {\n  const keys = Object.keys(a);\n  return (\n    keys.length === Object.keys(b).length &&\n    keys.every((k) => b[k] !== undefined && Math.abs((a[k] ?? 0) - (b[k] ?? 0)) < 0.01)\n  );\n};\n\nfunction ResizablePanelGroup({\n  className,\n  layout,\n  defaultLayout,\n  groupRef: groupRefProp,\n  orientation = 'horizontal',\n  ...props\n}: ResizablePanelGroupProps) {\n  const groupRef = React.useRef<GroupImperativeHandle | null>(null);\n  React.useImperativeHandle(groupRefProp, () => groupRef.current as GroupImperativeHandle, []);\n\n  React.useEffect(() => {\n    const group = groupRef.current;\n    if (!layout || !group) return;\n    if (!sameLayout(group.getLayout(), layout)) group.setLayout(layout);\n  }, [layout]);\n\n  return (\n    <Group\n      data-slot=\"resizable-panel-group\"\n      data-orientation={orientation}\n      orientation={orientation}\n      groupRef={groupRef}\n      defaultLayout={layout ?? defaultLayout}\n      className={cn('flex h-full w-full data-[orientation=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ResizablePanel({ className, ...props }: React.ComponentProps<typeof Panel>) {\n  return (\n    <Panel data-slot=\"resizable-panel\" className={cn('min-h-0 min-w-0', className)} {...props} />\n  );\n}\n\nexport interface ResizeHandleProps extends React.ComponentProps<typeof Separator> {\n  /** Show a small grip in the middle of the line. */\n  withHandle?: boolean;\n  /** What the handle resizes, e.g. \"Resize explorer\". Required for screen readers. */\n  'aria-label': string;\n}\n\n/**\n * The separator between two panels. It is a 1px line with an 8px hit area;\n * hover and drag tint it, keyboard focus draws it in the brand colour.\n */\nfunction ResizeHandle({ className, withHandle, ...props }: ResizeHandleProps) {\n  return (\n    <Separator\n      data-slot=\"resize-handle\"\n      className={cn(\n        'group/handle relative flex shrink-0 items-center justify-center bg-border outline-none',\n        // Hit area wider than the line, on the axis being dragged.\n        'after:absolute after:content-[\"\"]',\n        // The library sets aria-orientation on the line itself: a horizontal\n        // group has vertical separators. Nested groups stay independent.\n        'aria-[orientation=vertical]:w-px aria-[orientation=vertical]:after:inset-y-0 aria-[orientation=vertical]:after:-inset-x-1',\n        'aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:-inset-y-1',\n        'transition-colors data-[separator=hover]:bg-border-strong data-[separator=active]:bg-brand',\n        'focus-visible:outline-none data-[separator=focus]:bg-ring data-[separator=focus]:shadow-[0_0_0_1px_var(--ring)]',\n        'data-[separator=disabled]:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <span\n          aria-hidden\n          className=\"z-10 flex items-center justify-center rounded-xs border bg-surface group-aria-[orientation=vertical]/handle:h-6 group-aria-[orientation=vertical]/handle:w-2 group-aria-[orientation=horizontal]/handle:h-2 group-aria-[orientation=horizontal]/handle:w-6\"\n        >\n          <span className=\"rounded-full bg-muted-foreground/60 group-aria-[orientation=vertical]/handle:h-3 group-aria-[orientation=vertical]/handle:w-px group-aria-[orientation=horizontal]/handle:h-px group-aria-[orientation=horizontal]/handle:w-3\" />\n        </span>\n      )}\n    </Separator>\n  );\n}\n\nexport { usePanelRef, useGroupRef } from 'react-resizable-panels';\nexport type {\n  GroupImperativeHandle as ResizablePanelGroupHandle,\n  PanelImperativeHandle as ResizablePanelHandle,\n} from 'react-resizable-panels';\nexport { ResizablePanelGroup, ResizablePanel, ResizeHandle };\n"],"mappings":";;;;;AAqCA,IAAM,cAAc,GAAoB,MAAuB;CAC7D,MAAM,OAAO,OAAO,KAAK,CAAC;CAC1B,OACE,KAAK,WAAW,OAAO,KAAK,CAAC,CAAC,CAAC,UAC/B,KAAK,OAAO,MAAM,EAAE,OAAO,KAAA,KAAa,KAAK,KAAK,EAAE,MAAM,MAAM,EAAE,MAAM,EAAE,IAAI,GAAI;AAEtF;AAEA,SAAS,oBAAoB,EAC3B,WACA,QACA,eACA,UAAU,cACV,cAAc,cACd,GAAG,SACwB;CAC3B,MAAM,WAAW,MAAM,OAAqC,IAAI;CAChE,MAAM,oBAAoB,oBAAoB,SAAS,SAAkC,CAAC,CAAC;CAE3F,MAAM,gBAAgB;EACpB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,UAAU,CAAC,OAAO;EACvB,IAAI,CAAC,WAAW,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,UAAU,MAAM;CACpE,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,OAAD;EACE,aAAU;EACV,oBAAkB;EACL;EACH;EACV,eAAe,UAAU;EACzB,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA6C;CACnF,OACE,oBAAC,OAAD;EAAO,aAAU;EAAkB,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEhG;;;;;AAaA,SAAS,aAAa,EAAE,WAAW,YAAY,GAAG,SAA4B;CAC5E,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,0FAEA,uCAGA,6HACA,mIACA,8FACA,mHACA,wCACA,SACF;EACA,GAAI;EAEH,UAAA,cACC,oBAAC,QAAD;GACE,eAAA;GACA,WAAU;GAEV,UAAA,oBAAC,QAAD,EAAM,WAAU,gOAAiO,CAAA;EAC7O,CAAA;CAEC,CAAA;AAEf"}

package/dist/components/tour.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+/**
+ * A registered target id (see TourAnchor), or a function returning the
+ * element. Ids are stable; never target generated class names or nth-child.
+ */
+export type TourTarget = string | (() => Element | null);
+/** Marks an element as a tour target. Merges onto its one child. */
+declare function TourAnchor({ id, children }: {
+    id: string;
+    children: React.ReactElement;
+}): React.JSX.Element;
+/** The same marker as TourAnchor, for elements you render yourself. */
+export declare const tourTarget: (id: string) => {
+    'data-tour-target': string;
+};
+export declare function findTourTarget(target: TourTarget | undefined): Element | null;
+/**
+ * Resolves when the target is mounted and visible, or with null after
+ * `timeoutMs` or when `signal` aborts. Handles targets that render late
+ * (lazy panels, async data) without polling forever.
+ */
+export declare function waitForTourTarget(target: TourTarget | undefined, timeoutMs: number, signal: AbortSignal): Promise<Element | null>;
+export interface TourStep {
+    id: string;
+    /** Omit for a centred step with no anchor. */
+    target?: TourTarget;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Reveal what the step points at (open a panel, switch a route) before it
+     * shows. Aborted if the person leaves the step first; a rejection shows the
+     * step centred rather than stranding the tour.
+     */
+    prepare?: (signal: AbortSignal) => void | Promise<void>;
+}
+export type TourEndReason = 'complete' | 'skip' | 'close' | 'escape';
+export interface TourLabels {
+    next: string;
+    back: string;
+    skip: string;
+    done: string;
+    close: string;
+    progress: (step: number, total: number) => string;
+}
+export interface TourProps {
+    steps: TourStep[];
+    open: boolean;
+    /** Controlled, zero-based. */
+    step: number;
+    onStepChange: (step: number) => void;
+    /** The tour is over. Store dismissal or completion yourself, keyed by tour id and revision. */
+    onEnd: (reason: TourEndReason, step: number) => void;
+    /** `center` (default) shows a step whose target never appears in the middle; `skip` moves past it. */
+    missingTarget?: 'center' | 'skip';
+    /** How long to wait for a late target. Default 2000ms. */
+    waitMs?: number;
+    /** Dim the page outside the target. Default true. */
+    dim?: boolean;
+    labels?: Partial<TourLabels>;
+    /** Where focus goes if the element that started the tour is gone. */
+    fallbackFocus?: () => HTMLElement | null;
+}
+/**
+ * A guided sequence of anchored steps. It is non-modal: the page stays
+ * usable and outside clicks do not end it. Focus moves into each step,
+ * Escape ends the tour (unless the person is typing in a field or editor
+ * outside it), and focus returns to where it was when the tour started.
+ * The app owns the copy, the eligibility rules and what it persists.
+ */
+declare function Tour({ steps, open, step, onStepChange, onEnd, missingTarget, waitMs, dim, labels: labelOverrides, fallbackFocus, }: TourProps): React.JSX.Element | null;
+export interface SpotlightProps {
+    target: TourTarget;
+    open: boolean;
+    onDismiss: (reason: 'dismiss' | 'escape') => void;
+    title: React.ReactNode;
+    children: React.ReactNode;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    /** Default "Got it". */
+    dismissLabel?: string;
+    /** An extra button, e.g. "Add a provider". */
+    action?: React.ReactNode;
+    /** Ring the target. Default true. */
+    highlight?: boolean;
+    className?: string;
+}
+/**
+ * One contextual hint beside a target: a new feature, a setup nudge. It is
+ * informational, so it does not take focus or block the page. Escape (unless
+ * the person is typing elsewhere) or the dismiss button closes it. If the target is
+ * not on screen, nothing renders.
+ */
+declare function Spotlight({ target, open, onDismiss, title, children, side, align, dismissLabel, action, highlight, className, }: SpotlightProps): React.JSX.Element | null;
+export { Spotlight, Tour, TourAnchor };