harebear-ui 0.9.0 → 0.10.0

package/dist/components/admin/app-nav.d.ts

@@ -12,6 +12,10 @@ export interface AppNavPlace extends Omit<AppNavItem, "badge"> {
 export interface AppNavGroup {
   /** Group heading, e.g. "Lists". */
   label: string;
+  /** Makes the heading a link, e.g. "/lists"; the chevron next to it still collapses the group. */
+  href?: string;
+  /** The heading link is the current page: aria-current and the active text style. */
+  active?: boolean;
   items: AppNavPlace[];
   /** Expanded at first. Default true. */
   defaultOpen?: boolean;
@@ -47,6 +51,12 @@ export interface AppNavProps {
   defaultOpen?: boolean;
   /** Sidebar width. Default "15.75rem". */
   width?: string;
+  /**
+   * Main column exactly fills the screen (minus the tab bar on phones, and the round action button's space when
+   * `action` is set) and does not scroll, for a chat or map. The
+   * child takes the height with `flex-1 min-h-0` (ChatPanel does) and scrolls inside itself.
+   */
+  fill?: boolean;
   /** Classes for the main column. */
   className?: string;
   children?: React.ReactNode;
@@ -57,5 +67,5 @@ export interface AppNavProps {
  * and an optional round action button. The main column gets bottom padding and sets `--hb-bottom-inset` (and
  * `--hb-fab-inset`) so an AssistantDock rendered inside sits above the tab bar and the action button.
  */
-declare function AppNav({ brand, places, group, footer, action, label, linkComponent, collapsible, storageKey, defaultOpen, width, className, children }: AppNavProps): React.JSX.Element;
+declare function AppNav({ brand, places, group, footer, action, label, linkComponent, collapsible, storageKey, defaultOpen, width, fill, className, children }: AppNavProps): React.JSX.Element;
 export { AppNav };

package/dist/components/admin/app-nav.js

@@ -4,7 +4,7 @@ import { Badge } from "../ui/badge.js";
 import { Button } from "../ui/button.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar.js";
-import { useToastClearance } from "../../lib/toast-clearance.js";
+import { useToastClearance } from "../../lib/internal/toast-clearance.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -17,7 +17,7 @@ const TAB_LIMIT = 5;
 * and an optional round action button. The main column gets bottom padding and sets `--hb-bottom-inset` (and
 * `--hb-fab-inset`) so an AssistantDock rendered inside sits above the tab bar and the action button.
 */
-function AppNav({ brand, places, group, footer, action, label = "Main", linkComponent = "a", collapsible, storageKey, defaultOpen, width = "15.75rem", className, children }) {
+function AppNav({ brand, places, group, footer, action, label = "Main", linkComponent = "a", collapsible, storageKey, defaultOpen, width = "15.75rem", fill, className, children }) {
 	const tabs = places.filter((p) => p.tab !== false).slice(0, TAB_LIMIT);
 	useToastClearance("--hb-toast-nav", "calc(4.5rem + env(safe-area-inset-bottom))", tabs.length > 0);
 	useToastClearance("--hb-toast-fab", "4.5rem", Boolean(action));
@@ -53,7 +53,7 @@ function AppNav({ brand, places, group, footer, action, label = "Main", linkComp
 				Link: linkComponent
 			})]
 		}),
-		className: cn("max-md:pb-[calc(4.5rem+env(safe-area-inset-bottom))] max-md:[--hb-bottom-inset:calc(4.5rem+env(safe-area-inset-bottom))]", action && "max-md:[--hb-fab-inset:4.5rem]", className),
+		className: cn("max-md:pb-[calc(4.5rem+env(safe-area-inset-bottom))] max-md:[--hb-bottom-inset:calc(4.5rem+env(safe-area-inset-bottom))]", action && "max-md:pb-[calc(9rem+env(safe-area-inset-bottom))] max-md:[--hb-fab-inset:4.5rem]", fill && "h-dvh overflow-hidden", className),
 		children: [
 			children,
 			tabs.length > 0 && /* @__PURE__ */ jsx(TabBar, {
@@ -101,6 +101,10 @@ function PlaceItem({ place, Link }) {
 }
 function NavGroup({ group, Link }) {
 	const [open, setOpen] = React.useState(group.defaultOpen ?? true);
+	const chevron = /* @__PURE__ */ jsx(ChevronDownIcon, {
+		"aria-hidden": "true",
+		className: cn("size-3.5 transition-transform motion-reduce:transition-none", !open && "-rotate-90")
+	});
 	return /* @__PURE__ */ jsxs(Collapsible, {
 		open,
 		onOpenChange: setOpen,
@@ -108,15 +112,28 @@ function NavGroup({ group, Link }) {
 		className: "flex flex-col gap-1 group-data-[collapsible=icon]:hidden",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1 pr-1",
-			children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
-				className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md px-3 text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40",
+			children: [group.href ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Link, {
+					href: group.href,
+					"aria-current": group.active ? "page" : void 0,
+					className: cn("flex h-8 min-w-0 items-center rounded-md px-3 text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-11", group.active && "text-foreground"),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: group.label
+					})
+				}),
+				/* @__PURE__ */ jsx(CollapsibleTrigger, {
+					"aria-label": `${open ? "Collapse" : "Expand"} ${group.label}`,
+					className: "-ml-1 grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:size-11",
+					children: chevron
+				}),
+				/* @__PURE__ */ jsx("span", { className: "flex-1" })
+			] }) : /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+				className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md px-3 text-xs font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "truncate",
 					children: group.label
-				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
-					"aria-hidden": "true",
-					className: cn("size-3.5 transition-transform motion-reduce:transition-none", !open && "-rotate-90")
-				})]
+				}), chevron]
 			}), group.onAdd && /* @__PURE__ */ jsx(Button, {
 				type: "button",
 				variant: "ghost",

package/dist/components/admin/checklist-editor.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface ChecklistItem {
+  id: string;
+  text: string;
+  done: boolean;
+}
+export interface ChecklistEditorProps extends Omit<React.ComponentProps<"div">, "children" | "onToggle"> {
+  items: ChecklistItem[];
+  onToggle: (id: string, done: boolean) => void;
+  onRemove: (id: string) => void;
+  /** Called with the trimmed text when the add field is submitted with Enter. The field then clears. */
+  onAdd: (text: string) => void;
+  /** Placeholder and accessible name of the add field. Default "Add an item". */
+  addPlaceholder?: string;
+  /** Progress line above the items, shown when there are any. Default "2 of 5 done". */
+  progressLabel?: (done: number, total: number) => React.ReactNode;
+}
+/** Steps inside a record (a to-do's checklist): tick, remove, add with Enter, and an "x of y done" line. */
+declare function ChecklistEditor({ items, onToggle, onRemove, onAdd, addPlaceholder, progressLabel, className, ...props }: ChecklistEditorProps): React.JSX.Element;
+export { ChecklistEditor };

package/dist/components/admin/checklist-editor.js

@@ -0,0 +1,69 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { CheckCircle } from "../ui/check-circle.js";
+import { Input } from "../ui/input.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+// src/components/admin/checklist-editor.tsx
+const defaultProgress = (done, total) => `${done} of ${total} done`;
+/** Steps inside a record (a to-do's checklist): tick, remove, add with Enter, and an "x of y done" line. */
+function ChecklistEditor({ items, onToggle, onRemove, onAdd, addPlaceholder = "Add an item", progressLabel = defaultProgress, className, ...props }) {
+	const [text, setText] = React.useState("");
+	const id = React.useId();
+	const done = items.filter((i) => i.done).length;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"data-slot": "checklist-editor",
+		className: cn("flex flex-col gap-2", className),
+		...props,
+		children: [items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+			className: "text-xs text-muted-foreground",
+			children: progressLabel(done, items.length)
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col",
+			children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+				className: "flex min-w-0 items-start gap-3 py-1.5 ps-2",
+				children: [
+					/* @__PURE__ */ jsx(CheckCircle, {
+						id: `${id}-${item.id}`,
+						className: "mt-2",
+						checked: item.done,
+						onCheckedChange: (v) => onToggle(item.id, v === true)
+					}),
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: `${id}-${item.id}`,
+						className: cn("min-w-0 flex-1 py-2 text-[15px] leading-6 wrap-anywhere", item.done && "text-muted-foreground line-through decoration-muted-foreground/60"),
+						children: item.text
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						className: "pointer-coarse:size-11",
+						"aria-label": `Remove ${item.text}`,
+						onClick: () => onRemove(item.id),
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})
+				]
+			}, item.id))
+		})] }), /* @__PURE__ */ jsx("form", {
+			onSubmit: (e) => {
+				e.preventDefault();
+				const value = text.trim();
+				if (!value) return;
+				onAdd(value);
+				setText("");
+			},
+			children: /* @__PURE__ */ jsx(Input, {
+				value: text,
+				onChange: (e) => setText(e.target.value),
+				placeholder: addPlaceholder,
+				"aria-label": addPlaceholder,
+				enterKeyHint: "done"
+			})
+		})]
+	});
+}
+export { ChecklistEditor };

package/dist/components/admin/comment-thread.d.ts

@@ -0,0 +1,26 @@
+import { CategoryColor } from "./category.js";
+import * as React from "react";
+export interface CommentThreadComment {
+  id: string;
+  author: {
+    name: string;
+    color?: CategoryColor;
+    avatarUrl?: string;
+  };
+  /** Muted text after the name, e.g. "2 h ago" or "via HomeBot · 2 h ago". */
+  meta?: React.ReactNode;
+  /** Markdown, rendered with `Markdown`. */
+  body: string;
+}
+export interface CommentThreadProps extends Omit<React.ComponentProps<"div">, "children" | "onSubmit"> {
+  comments: CommentThreadComment[];
+  /** Called with the trimmed text. The box then clears. */
+  onSubmit: (text: string) => void;
+  /** Placeholder and accessible name of the box. Default "Add a comment". */
+  placeholder?: string;
+  /** Default "Comment". */
+  submitLabel?: string;
+}
+/** Comments on a record, oldest first, with a box to add one. Bodies are Markdown. */
+declare function CommentThread({ comments, onSubmit, placeholder, submitLabel, className, ...props }: CommentThreadProps): React.JSX.Element;
+export { CommentThread };

package/dist/components/admin/comment-thread.js

@@ -0,0 +1,68 @@
+"use client";
+import { MemberAvatar } from "./user-chip.js";
+import { Markdown } from "../ai/markdown.js";
+import { Button } from "../ui/button.js";
+import { Textarea } from "../ui/textarea.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/comment-thread.tsx
+/** Comments on a record, oldest first, with a box to add one. Bodies are Markdown. */
+function CommentThread({ comments, onSubmit, placeholder = "Add a comment", submitLabel = "Comment", className, ...props }) {
+	const [text, setText] = React.useState("");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "comment-thread",
+		className: cn("flex flex-col gap-4", className),
+		...props,
+		children: [comments.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-4",
+			children: comments.map((c) => /* @__PURE__ */ jsxs("li", {
+				className: "flex min-w-0 items-start gap-3",
+				children: [/* @__PURE__ */ jsx(MemberAvatar, {
+					size: "sm",
+					name: c.author.name,
+					avatarUrl: c.author.avatarUrl,
+					color: c.author.color,
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: "text-sm",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: c.author.name
+						}), c.meta && /* @__PURE__ */ jsxs("span", {
+							className: "text-xs text-muted-foreground",
+							children: [" · ", c.meta]
+						})]
+					}), /* @__PURE__ */ jsx(Markdown, {
+						className: "gap-2 text-sm leading-6",
+						children: c.body
+					})]
+				})]
+			}, c.id))
+		}), /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-2",
+			onSubmit: (e) => {
+				e.preventDefault();
+				const value = text.trim();
+				if (!value) return;
+				onSubmit(value);
+				setText("");
+			},
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				value: text,
+				onChange: (e) => setText(e.target.value),
+				placeholder,
+				"aria-label": placeholder
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				variant: "outline",
+				className: "self-end pointer-coarse:h-11",
+				disabled: !text.trim(),
+				children: submitLabel
+			})]
+		})]
+	});
+}
+export { CommentThread };

package/dist/components/admin/copy-field.d.ts

@@ -11,7 +11,9 @@ export interface CopyFieldProps extends Omit<React.ComponentProps<typeof InputGr
   "aria-label"?: string;
   /** Monospace text. Default true. */
   mono?: boolean;
+  /** Shown next to the button, and its accessible name, for a moment after copying. Default "Copied". */
+  copiedLabel?: string;
 }
 /** Read-only value with a copy button: IDs, paths, tokens' public parts, URLs. */
-declare function CopyField({ value, display, label, mono, "aria-label": name, className, ...props }: CopyFieldProps): React.JSX.Element;
+declare function CopyField({ value, display, label, mono, copiedLabel, "aria-label": name, className, ...props }: CopyFieldProps): React.JSX.Element;
 export { CopyField };

package/dist/components/admin/copy-field.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, CopyIcon } from "lucide-react";
 // src/components/admin/copy-field.tsx
 /** Read-only value with a copy button: IDs, paths, tokens' public parts, URLs. */
-function CopyField({ value, display, label, mono = true, "aria-label": name = "Value", className, ...props }) {
+function CopyField({ value, display, label, mono = true, copiedLabel = "Copied", "aria-label": name = "Value", className, ...props }) {
 	const { copied, copy } = useCopyToClipboard();
 	return /* @__PURE__ */ jsxs(InputGroup, {
 		"data-slot": "copy-field",
@@ -22,14 +22,19 @@ function CopyField({ value, display, label, mono = true, "aria-label": name = "V
 				className: cn(mono && "font-mono"),
 				onFocus: (e) => e.currentTarget.select()
 			}),
-			/* @__PURE__ */ jsx(InputGroupAddon, {
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
 				align: "inline-end",
-				children: /* @__PURE__ */ jsx(InputGroupButton, {
+				children: [/* @__PURE__ */ jsx(InputGroupText, {
+					"data-slot": "copy-field-status",
+					"aria-hidden": "true",
+					className: "text-xs empty:hidden",
+					children: copied ? copiedLabel : null
+				}), /* @__PURE__ */ jsx(InputGroupButton, {
 					size: "icon-xs",
-					"aria-label": `Copy ${name.toLowerCase()}`,
+					"aria-label": copied ? copiedLabel : `Copy ${name.toLowerCase()}`,
 					onClick: () => copy(value),
 					children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
-				})
+				})]
 			})
 		]
 	});

package/dist/components/admin/date-time-picker.js

@@ -4,7 +4,7 @@ import { Calendar } from "../ui/calendar.js";
 import { Input } from "../ui/input.js";
 import { Label } from "../ui/label.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
-import { parseLocalDate } from "../../lib/date.js";
+import { parseLocalDate } from "../../lib/internal/date.js";
 import { cn } from "../../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/admin/markdown-editor.d.ts

@@ -2,11 +2,8 @@ import * as React from "react";
 export interface MarkdownEditorProps extends Omit<React.ComponentProps<"textarea">, "value" | "defaultValue" | "onChange"> {
   value: string;
   onValueChange: (value: string) => void;
-  /**
-   * Turns the Markdown into elements for the Preview tab; the result is wrapped in Prose.
-   * With react-markdown: `(md) => <Markdown components={{ blockquote: ProseBlockquote }}>{md}</Markdown>`.
-   */
-  renderPreview: (markdown: string) => React.ReactNode;
+  /** Custom Preview renderer; the result is wrapped in Prose. Default: the library's `Markdown`. */
+  renderPreview?: (markdown: string) => React.ReactNode;
   /** Classes for the wrapping Tabs. `className` goes to the textarea. */
   wrapperClassName?: string;
 }

package/dist/components/admin/markdown-editor.js

@@ -1,5 +1,6 @@
 "use client";
 import { Prose } from "../ai/code-block.js";
+import { Markdown } from "../ai/markdown.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
 import { Textarea } from "../ui/textarea.js";
 import { cn } from "../../lib/utils.js";
@@ -12,13 +13,16 @@ function MarkdownEditor({ value, onValueChange, renderPreview, className, wrappe
 		defaultValue: "write",
 		className: cn("gap-3", wrapperClassName),
 		children: [
-			/* @__PURE__ */ jsxs(TabsList, { children: [/* @__PURE__ */ jsx(TabsTrigger, {
-				value: "write",
-				children: "Write"
-			}), /* @__PURE__ */ jsx(TabsTrigger, {
-				value: "preview",
-				children: "Preview"
-			})] }),
+			/* @__PURE__ */ jsxs(TabsList, {
+				className: "pointer-coarse:group-data-horizontal/tabs:h-13",
+				children: [/* @__PURE__ */ jsx(TabsTrigger, {
+					value: "write",
+					children: "Write"
+				}), /* @__PURE__ */ jsx(TabsTrigger, {
+					value: "preview",
+					children: "Preview"
+				})]
+			}),
 			/* @__PURE__ */ jsx(TabsContent, {
 				value: "write",
 				children: /* @__PURE__ */ jsx(Textarea, {
@@ -31,10 +35,10 @@ function MarkdownEditor({ value, onValueChange, renderPreview, className, wrappe
 			/* @__PURE__ */ jsx(TabsContent, {
 				value: "preview",
 				className: "min-h-48 rounded-md border px-3.5 py-3",
-				children: value.trim() ? /* @__PURE__ */ jsx(Prose, { children: renderPreview(value) }) : /* @__PURE__ */ jsx("p", {
+				children: !value.trim() ? /* @__PURE__ */ jsx("p", {
 					className: "text-sm text-muted-foreground",
 					children: "Nothing to preview."
-				})
+				}) : renderPreview ? /* @__PURE__ */ jsx(Prose, { children: renderPreview(value) }) : /* @__PURE__ */ jsx(Markdown, { children: value })
 			})
 		]
 	});

package/dist/components/admin/page-header.d.ts

@@ -8,7 +8,9 @@ export interface PageHeaderProps extends Omit<React.ComponentProps<"section">, "
   actions?: React.ReactNode;
   /** Text above the title, e.g. a date. */
   eyebrow?: React.ReactNode;
+  /** Leading mark before the title, e.g. a CategoryDot, an icon tile or a MemberAvatar. */
+  icon?: React.ReactNode;
 }
 /** Page title row with description and actions. Wraps on narrow screens. */
-declare function PageHeader({ title, description, count, actions, eyebrow, className, ...props }: PageHeaderProps): React.JSX.Element;
+declare function PageHeader({ title, description, count, actions, eyebrow, icon, className, ...props }: PageHeaderProps): React.JSX.Element;
 export { PageHeader };

package/dist/components/admin/page-header.js

@@ -4,7 +4,7 @@ import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/admin/page-header.tsx
 /** Page title row with description and actions. Wraps on narrow screens. */
-function PageHeader({ title, description, count, actions, eyebrow, className, ...props }) {
+function PageHeader({ title, description, count, actions, eyebrow, icon, className, ...props }) {
 	return /* @__PURE__ */ jsxs("section", {
 		"data-slot": "page-header",
 		className: cn("flex flex-wrap items-end justify-between gap-4", className),
@@ -18,14 +18,22 @@ function PageHeader({ title, description, count, actions, eyebrow, className, ..
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ jsx("h1", {
-						className: "text-[28px] leading-tight font-semibold tracking-[-0.02em]",
-						children: title
-					}), count !== void 0 && /* @__PURE__ */ jsx(Badge, {
-						variant: "secondary",
-						className: "tabular-nums",
-						children: count
-					})]
+					children: [
+						icon && /* @__PURE__ */ jsx("span", {
+							"data-slot": "page-header-icon",
+							className: "flex shrink-0 items-center [&_svg:not([class*='size-'])]:size-6",
+							children: icon
+						}),
+						/* @__PURE__ */ jsx("h1", {
+							className: "text-[28px] leading-tight font-semibold tracking-[-0.02em]",
+							children: title
+						}),
+						count !== void 0 && /* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							className: "tabular-nums",
+							children: count
+						})
+					]
 				}),
 				description && /* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",

package/dist/components/admin/page.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface PageProps extends React.ComponentProps<"div"> {
+  /** Column width. Default "md" (42rem), like FocusLayout. */
+  width?: "sm" | "md" | "lg";
+}
+/** The page column inside AppNav or SidebarLayout: centred, 16px gutters on phones, children spaced like sections. */
+declare function Page({ width, className, ...props }: PageProps): React.JSX.Element;
+export interface PageSectionProps extends Omit<React.ComponentProps<"section">, "title"> {
+  /** The section's h2, which also names the region. */
+  title: React.ReactNode;
+  /** At the right of the heading, e.g. a small ghost Button "See all". */
+  action?: React.ReactNode;
+}
+/** A titled part of a page: a region named by its h2 (under the PageHeader h1), an optional action, then children. */
+declare function PageSection({ title, action, className, children, ...props }: PageSectionProps): React.JSX.Element;
+export { Page, PageSection };

package/dist/components/admin/page.js

@@ -0,0 +1,42 @@
+"use client";
+import { Heading } from "../layout/text.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/page.tsx
+const widthClass = {
+	sm: "max-w-xl",
+	md: "max-w-2xl",
+	lg: "max-w-4xl"
+};
+/** The page column inside AppNav or SidebarLayout: centred, 16px gutters on phones, children spaced like sections. */
+function Page({ width = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "page",
+		className: cn("mx-auto flex w-full flex-col gap-7 px-4 py-6 md:px-8 md:py-10", widthClass[width], className),
+		...props
+	});
+}
+/** A titled part of a page: a region named by its h2 (under the PageHeader h1), an optional action, then children. */
+function PageSection({ title, action, className, children, ...props }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "page-section",
+		"aria-labelledby": id,
+		className: cn("flex min-w-0 flex-col gap-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Heading, {
+				level: 2,
+				id,
+				className: "min-w-0 flex-1",
+				children: title
+			}), action && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center pointer-coarse:[&>*]:min-h-11",
+				children: action
+			})]
+		}), children]
+	});
+}
+export { Page, PageSection };

package/dist/components/admin/prompt-dialog.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface PromptDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Label of the text field. */
+  label: React.ReactNode;
+  /** Starting text, e.g. the current name when renaming. */
+  defaultValue?: string;
+  submitLabel?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  maxLength?: number;
+  /** Gets the trimmed text. The dialog closes when it returns or resolves; a thrown error's message shows under the field. */
+  onSubmit: (value: string) => void | Promise<void>;
+}
+/** Controlled dialog that asks for one line of text: New list, Rename, Add section. Sibling of ConfirmDialog. */
+declare function PromptDialog({ open, onOpenChange, ...props }: PromptDialogProps): React.JSX.Element;
+export { PromptDialog };

package/dist/components/admin/prompt-dialog.js

@@ -0,0 +1,83 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog.js";
+import { Field, FieldError, FieldLabel } from "../ui/field.js";
+import { Input } from "../ui/input.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/admin/prompt-dialog.tsx
+/** Controlled dialog that asks for one line of text: New list, Rename, Add section. Sibling of ConfirmDialog. */
+function PromptDialog({ open, onOpenChange, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			"data-slot": "prompt-dialog",
+			children: /* @__PURE__ */ jsx(PromptForm, {
+				onDone: () => onOpenChange(false),
+				...props
+			})
+		})
+	});
+}
+function PromptForm({ title, description, label, defaultValue = "", submitLabel = "Save", cancelLabel = "Cancel", maxLength, onSubmit, onDone }) {
+	const id = React.useId();
+	const [value, setValue] = React.useState(defaultValue);
+	const [error, setError] = React.useState(null);
+	const [busy, setBusy] = React.useState(false);
+	return /* @__PURE__ */ jsxs("form", {
+		className: "grid gap-4",
+		onSubmit: async (e) => {
+			e.preventDefault();
+			setBusy(true);
+			setError(null);
+			try {
+				await onSubmit(value.trim());
+				onDone();
+			} catch (err) {
+				setError(err instanceof Error ? err.message : String(err));
+				setBusy(false);
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+			/* @__PURE__ */ jsxs(Field, {
+				"data-invalid": error ? true : void 0,
+				children: [
+					/* @__PURE__ */ jsx(FieldLabel, {
+						htmlFor: id,
+						children: label
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						id,
+						value,
+						onChange: (e) => setValue(e.target.value),
+						maxLength,
+						autoComplete: "off",
+						required: true,
+						"aria-invalid": error ? true : void 0,
+						"aria-describedby": error ? `${id}-error` : void 0
+					}),
+					error && /* @__PURE__ */ jsx(FieldError, {
+						id: `${id}-error`,
+						children: error
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					children: cancelLabel
+				})
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				loading: busy,
+				disabled: !value.trim(),
+				children: submitLabel
+			})] })
+		]
+	});
+}
+export { PromptDialog };

package/dist/components/admin/settings.d.ts

@@ -15,6 +15,8 @@ export interface SettingsRowProps extends Omit<React.ComponentProps<"div">, "con
   htmlFor?: string;
   /** The control at the right: Switch, Select, ToggleGroup, Button. */
   control?: React.ReactNode;
+  /** Always shown under the label, full width, with no toggle (a list of connections, a hint, a short form). */
+  body?: React.ReactNode;
   /**
    * Inline content that expands under the row (change password, add a connection). Without a `control`, the row
    * gets a toggle button (`expandLabel` / "Cancel").
@@ -26,6 +28,6 @@ export interface SettingsRowProps extends Omit<React.ComponentProps<"div">, "con
   /** Label of the default toggle button. Default "Change". */
   expandLabel?: React.ReactNode;
 }
-/** One setting: label and description at the left, a control at the right, optional expandable content. */
-declare function SettingsRow({ label, description, htmlFor, control, content, open: openProp, defaultOpen, onOpenChange, expandLabel, className, ...props }: SettingsRowProps): React.JSX.Element;
+/** One setting: label and description at the left, a control at the right, optional body and expandable content. */
+declare function SettingsRow({ label, description, htmlFor, control, body, content, open: openProp, defaultOpen, onOpenChange, expandLabel, className, ...props }: SettingsRowProps): React.JSX.Element;
 export { SettingsRow, SettingsSection };