@tangle-network/ui 11.39.0 → 11.40.1

package/dist/primitives/settings.d.ts

@@ -0,0 +1,125 @@
+import * as React from "react";
+//#region src/primitives/settings.d.ts
+export type SettingsRowLayout = "inline" | "compact" | "stacked";
+export interface SettingsRowProps {
+  /** The row's id, for a deep link such as `#timezone`. */
+  id?: string;
+  label: string;
+  /** One line that states a consequence the person needs to act. Most rows need none. */
+  description?: React.ReactNode;
+  /** Help that explains the setting, shown from an info button beside the label. */
+  info?: React.ReactNode;
+  /**
+   * The control's id. The label targets it, and the row's description, error
+   * or lock reason renders at {@link fieldMessageId}. When the row's only child
+   * carries this id, the row adds that message to its `aria-describedby` and
+   * marks it invalid on error; otherwise point the control there yourself.
+   */
+  htmlFor?: string;
+  /** A save state after the label, such as "Saving…" or "Saved". It is announced politely. */
+  status?: React.ReactNode;
+  /** Replaces the description in danger text and is announced. */
+  error?: React.ReactNode;
+  /** Shows a Retry action after the error. */
+  onRetry?: () => void;
+  /**
+   * `inline` (default): text left, control right, stacked below 34rem.
+   * `compact`: the control keeps its own width and stays on the line (switches, single buttons).
+   * `stacked`: the control spans the row under the text (textareas, lists).
+   */
+  layout?: SettingsRowLayout;
+  /** Why the control is unavailable, naming who can change it. Replaces the description after a lock glyph. */
+  disabledReason?: React.ReactNode;
+  children?: React.ReactNode;
+}
+/**
+ * One setting: its label, an optional consequence line and its control. The
+ * label carries the save status after it; an error or a lock reason replaces
+ * the description. Rows inside a {@link SettingsSection} are divided by a
+ * hairline and stack when the card is narrower than 34rem.
+ */
+export declare function SettingsRow({ id, label, description, info, htmlFor, status, error, onRetry, layout, disabledReason, children }: SettingsRowProps): React.JSX.Element;
+export interface SettingsSectionProps {
+  /** The section's anchor: `#id` scrolls to it. The title's id is `${id}-title`. */
+  id: string;
+  title: string;
+  /** One short line, at most about twelve words. Leave it out when the title says enough. */
+  description?: React.ReactNode;
+  /** Help that explains the section, shown from an info button beside the title. */
+  info?: React.ReactNode;
+  /** Section actions, top right, such as "Edit brief" or "Add source". */
+  actions?: React.ReactNode;
+  /** `danger` draws the card's edge and title in the danger tone. */
+  tone?: "default" | "danger";
+  /** The card's footer on the muted plane, such as the one save bar a section may have. */
+  footer?: React.ReactNode;
+  /** Rows, lists and any other blocks of the section. */
+  children?: React.ReactNode;
+}
+/**
+ * One settings card: a 16px title with optional description, info tip and
+ * actions, then its rows and lists, then an optional footer. The card is the
+ * width container its rows and lists respond to.
+ */
+export declare function SettingsSection({ id, title, description, info, actions, tone, footer, children }: SettingsSectionProps): React.JSX.Element;
+/** Track widths for a {@link SettingsList}. Every slot its items use needs a column, except status and menu, which have fallbacks. */
+export interface SettingsListColumns {
+  /** A logo or avatar column, such as `"36px"`. */
+  leading?: string;
+  /** The title column; `minmax(0,1fr)` by default. */
+  main?: string;
+  /** A fixed state column, such as `"8rem"`. Below 34rem the state moves under the title, full width. */
+  status?: string;
+  /** A fixed column for the at-rest action, such as `"9rem"`. Below 34rem it shrinks to its content. */
+  action?: string;
+  /** A column for the ⋯ menu, such as `"36px"`. Without it the menu ends the action cell. */
+  menu?: string;
+}
+export interface SettingsListProps {
+  columns: SettingsListColumns;
+  "aria-label"?: string;
+  children?: React.ReactNode;
+}
+/**
+ * Comparable rows whose status and action columns line up across items (CSS
+ * subgrid). Below 34rem each item becomes two lines: the title and meta with
+ * its action on the right, then the state under them at full width.
+ */
+export declare function SettingsList({ columns, children, "aria-label": ariaLabel }: SettingsListProps): React.JSX.Element;
+export interface SettingsListMenuItem {
+  label: string;
+  onSelect: () => void;
+  /** Destructive actions (delete, remove, revoke) belong here, in the danger tone. */
+  tone?: "danger";
+  /** Shown under the label; the item stays focusable so the reason is read, and selecting it does nothing. */
+  disabledReason?: React.ReactNode;
+}
+export interface SettingsListAction {
+  label: string;
+  onSelect: () => void;
+  /** Why the action is unavailable, naming who can take it. The button stays focusable, does nothing, and the reason shows under the meta. */
+  disabledReason?: React.ReactNode;
+}
+export interface SettingsListItemProps {
+  /** A logo or avatar, in the list's `leading` column. */
+  leading?: React.ReactNode;
+  /** The item's name. Make it the link to the item's detail. */
+  title: React.ReactNode;
+  /** One line under the title, such as an address or a schedule. */
+  meta?: React.ReactNode;
+  /** The item's state as plain text, or a control that sets it (a role select). */
+  status?: React.ReactNode;
+  /** Shown under the meta in danger text and announced. */
+  error?: React.ReactNode;
+  /** The one verb the item needs at rest. It is drawn as an outline button, so it never reads as the state beside it. */
+  action?: SettingsListAction;
+  /** Everything else, including destructive actions, behind a ⋯ button. */
+  menu?: SettingsListMenuItem[];
+}
+/**
+ * One item in a {@link SettingsList}; each slot goes to the list's column of
+ * that name. Without a status column the state follows the meta, and without
+ * a menu column the ⋯ menu ends the action cell.
+ */
+export declare function SettingsListItem({ leading, title, meta, status, error, action, menu }: SettingsListItemProps): React.JSX.Element;
+//#endregion

package/dist/primitives/settings.js

@@ -0,0 +1,316 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Card, CardFooter, CardTitle } from "./card.js";
+import { Label } from "./label.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { InfoTip } from "./info-tip.js";
+import { fieldMessageId } from "./field.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlert, Ellipsis, Lock } from "lucide-react";
+//#region src/primitives/settings.tsx
+const SCROLL_OFFSET = "scroll-mt-[calc(var(--shell-header-height)_+_1rem)]";
+const DIVIDED = "not-first:border-t not-first:border-[color:var(--border-subtle)]";
+const ERROR_TEXT = "text-[color:var(--surface-danger-text)]";
+function ErrorLine({ id, className, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "alert",
+		className: cn("flex items-start gap-1.5 text-sm leading-5 [overflow-wrap:anywhere]", ERROR_TEXT, className),
+		children: [/* @__PURE__ */ jsx(CircleAlert, {
+			"aria-hidden": "true",
+			className: "mt-0.5 size-4 shrink-0"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-w-0",
+			children
+		})]
+	});
+}
+function LockLine({ id, className, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cn("flex items-start gap-1.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]", className),
+		children: [/* @__PURE__ */ jsx(Lock, {
+			"aria-hidden": "true",
+			className: "mt-0.5 size-4 shrink-0"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-w-0",
+			children
+		})]
+	});
+}
+const ROW_COLUMNS = {
+	inline: "grid-cols-[minmax(0,1fr)_minmax(13rem,20rem)] @max-[34rem]/settings-section:grid-cols-1",
+	compact: "grid-cols-[minmax(0,1fr)_auto]",
+	stacked: "grid-cols-1"
+};
+const ROW_CONTROL = {
+	inline: "justify-end @max-[34rem]/settings-section:flex-col @max-[34rem]/settings-section:items-stretch",
+	compact: "justify-end",
+	stacked: "flex-col items-stretch"
+};
+/** Point the row's own control at the row's message without changing anything else about it. */
+function describeControl(children, htmlFor, messageId, invalid) {
+	if (!htmlFor || !messageId || !React.isValidElement(children) || children.props.id !== htmlFor) return children;
+	const ids = new Set([...(children.props["aria-describedby"] ?? "").split(/\s+/), messageId].filter(Boolean));
+	return React.cloneElement(children, {
+		"aria-describedby": [...ids].join(" "),
+		...invalid && children.props["aria-invalid"] === void 0 ? { "aria-invalid": true } : {}
+	});
+}
+/**
+* One setting: its label, an optional consequence line and its control. The
+* label carries the save status after it; an error or a lock reason replaces
+* the description. Rows inside a {@link SettingsSection} are divided by a
+* hairline and stack when the card is narrower than 34rem.
+*/
+function SettingsRow({ id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, children }) {
+	const messageId = htmlFor ? fieldMessageId(htmlFor) : void 0;
+	const control = describeControl(children, htmlFor, error != null || disabledReason != null || description != null ? messageId : void 0, error != null);
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		"data-layout": layout,
+		className: cn("grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4", SCROLL_OFFSET, DIVIDED, ROW_COLUMNS[layout]),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-5 flex-wrap items-center gap-x-2 gap-y-1",
+				children: [
+					htmlFor ? /* @__PURE__ */ jsx(Label, {
+						htmlFor,
+						className: "leading-5 text-foreground",
+						children: label
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "font-medium text-sm leading-5 text-foreground",
+						children: label
+					}),
+					info != null && /* @__PURE__ */ jsx(InfoTip, {
+						label,
+						children: info
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-live": "polite",
+						className: "inline-flex items-center gap-1 text-sm leading-5 text-muted-foreground",
+						children: status
+					})
+				]
+			}), error != null ? /* @__PURE__ */ jsxs(ErrorLine, {
+				id: messageId,
+				className: "mt-0.5",
+				children: [error, onRetry && /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "bare",
+					onClick: onRetry,
+					className: "rounded-sm font-medium text-[var(--accent-text)] underline-offset-4 hover:underline",
+					children: "Retry"
+				})] })]
+			}) : disabledReason != null ? /* @__PURE__ */ jsx(LockLine, {
+				id: messageId,
+				className: "mt-0.5",
+				children: disabledReason
+			}) : description != null && /* @__PURE__ */ jsx("div", {
+				id: messageId,
+				className: "mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
+				children: description
+			})]
+		}), control != null && control !== false && /* @__PURE__ */ jsx("div", {
+			className: cn("flex min-w-0 items-center gap-2", ROW_CONTROL[layout]),
+			children: control
+		})]
+	});
+}
+/**
+* One settings card: a 16px title with optional description, info tip and
+* actions, then its rows and lists, then an optional footer. The card is the
+* width container its rows and lists respond to.
+*/
+function SettingsSection({ id, title, description, info, actions, tone = "default", footer, children }) {
+	const titleId = `${id}-title`;
+	const danger = tone === "danger";
+	return /* @__PURE__ */ jsxs(Card, {
+		id,
+		role: "region",
+		"aria-labelledby": titleId,
+		"data-tone": tone,
+		className: cn("@container/settings-section min-w-0", SCROLL_OFFSET, danger && "border-[color:var(--surface-danger-border)]"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-4 px-5 py-4 @max-[34rem]/settings-section:flex-wrap @max-[34rem]/settings-section:px-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx(CardTitle, {
+							as: "h2",
+							id: titleId,
+							className: cn("leading-6 [overflow-wrap:anywhere]", danger && ERROR_TEXT),
+							children: title
+						}), info != null && /* @__PURE__ */ jsx(InfoTip, {
+							label: title,
+							children: info
+						})]
+					}), description != null && /* @__PURE__ */ jsx("div", {
+						className: "mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
+						children: description
+					})]
+				}), actions != null && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 flex-wrap items-center gap-2",
+					children: actions
+				})]
+			}),
+			children,
+			footer != null && /* @__PURE__ */ jsx(CardFooter, {
+				className: "justify-between gap-3 rounded-b-[inherit] border-t border-[color:var(--border-subtle)] bg-muted px-5 py-3 text-sm leading-5 [&:not(:first-child)]:pt-3 @max-[34rem]/settings-section:px-4",
+				children: footer
+			})
+		]
+	});
+}
+const LIST_SLOTS = [
+	"leading",
+	"main",
+	"status",
+	"action",
+	"menu"
+];
+const LENGTH = /^[\d.]+(?:px|rem|em|ch)$/;
+function listTracks(columns, narrow) {
+	const tracks = LIST_SLOTS.flatMap((slot) => {
+		if (slot === "main") return [[slot, columns.main ?? "minmax(0,1fr)"]];
+		const width = columns[slot];
+		if (!width || narrow && slot === "status") return [];
+		return [[slot, narrow && slot === "action" ? "auto" : width]];
+	});
+	const pad = narrow ? "1rem" : "1.25rem";
+	return tracks.map(([slot, width], index) => {
+		return `[${slot}] ${(index === 0 || index === tracks.length - 1) && LENGTH.test(width) ? `calc(${width} + ${pad})` : width}`;
+	}).join(" ");
+}
+const SettingsListContext = React.createContext({});
+/**
+* Comparable rows whose status and action columns line up across items (CSS
+* subgrid). Below 34rem each item becomes two lines: the title and meta with
+* its action on the right, then the state under them at full width.
+*/
+function SettingsList({ columns, children, "aria-label": ariaLabel }) {
+	const style = {
+		"--settings-list-columns": listTracks(columns, false),
+		"--settings-list-columns-narrow": listTracks(columns, true)
+	};
+	return /* @__PURE__ */ jsx(SettingsListContext.Provider, {
+		value: columns,
+		children: /* @__PURE__ */ jsx("ul", {
+			role: "list",
+			"aria-label": ariaLabel,
+			style,
+			className: cn("grid min-w-0 gap-x-4 [grid-template-columns:var(--settings-list-columns)] @max-[34rem]/settings-section:[grid-template-columns:var(--settings-list-columns-narrow)]", DIVIDED),
+			children
+		})
+	});
+}
+function ItemMenu({ items, titleId }) {
+	const triggerId = React.useId();
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			id: triggerId,
+			"aria-label": "More actions",
+			"aria-labelledby": `${triggerId} ${titleId}`,
+			children: /* @__PURE__ */ jsx(Ellipsis, { "aria-hidden": "true" })
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "min-w-44 max-w-72",
+		children: items.map((item) => {
+			const unavailable = item.disabledReason != null;
+			return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				"aria-disabled": unavailable || void 0,
+				onSelect: (event) => {
+					if (unavailable) event.preventDefault();
+					else item.onSelect();
+				},
+				className: cn("flex-col items-start gap-0.5 leading-5", item.tone === "danger" && !unavailable && cn(ERROR_TEXT, "focus:text-[color:var(--surface-danger-text)]"), unavailable && "cursor-not-allowed text-muted-foreground focus:text-muted-foreground"),
+				children: [/* @__PURE__ */ jsx("span", { children: item.label }), unavailable && /* @__PURE__ */ jsx(LockLine, { children: item.disabledReason })]
+			}, item.label);
+		})
+	})] });
+}
+const NARROW_STATUS = "@max-[34rem]/settings-section:col-start-[main] @max-[34rem]/settings-section:col-end-[-1] @max-[34rem]/settings-section:row-start-2 @max-[34rem]/settings-section:mt-2";
+/**
+* One item in a {@link SettingsList}; each slot goes to the list's column of
+* that name. Without a status column the state follows the meta, and without
+* a menu column the ⋯ menu ends the action cell.
+*/
+function SettingsListItem({ leading, title, meta, status, error, action, menu }) {
+	const columns = React.useContext(SettingsListContext);
+	const titleId = React.useId();
+	const reasonId = `${titleId}-reason`;
+	const locked = action?.disabledReason != null;
+	const menuNode = menu && menu.length > 0 ? /* @__PURE__ */ jsx(ItemMenu, {
+		items: menu,
+		titleId
+	}) : null;
+	const actionButton = action && /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		"aria-disabled": locked || void 0,
+		"aria-describedby": locked ? reasonId : void 0,
+		onClick: locked ? void 0 : action.onSelect,
+		children: action.label
+	});
+	const actionCell = (actionButton || menuNode && !columns.menu) && /* @__PURE__ */ jsxs(Fragment$1, { children: [actionButton, !columns.menu && menuNode] });
+	return /* @__PURE__ */ jsxs("li", {
+		className: cn("col-span-full grid grid-cols-subgrid items-center px-5 py-3 @max-[34rem]/settings-section:px-4", DIVIDED),
+		children: [
+			leading != null && /* @__PURE__ */ jsx("div", {
+				className: "col-start-[leading] row-start-1 flex",
+				children: leading
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "col-start-[main] row-start-1 min-w-0",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						id: titleId,
+						className: "font-medium text-sm leading-5 text-foreground [overflow-wrap:anywhere] [&_a]:rounded-sm [&_a]:text-foreground [&_a]:underline-offset-4 [&_a:hover]:underline [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[var(--focus-border)]",
+						children: title
+					}),
+					meta != null && /* @__PURE__ */ jsx("div", {
+						className: "text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
+						children: meta
+					}),
+					status != null && !columns.status && /* @__PURE__ */ jsx("div", {
+						className: "mt-1 text-sm leading-5 text-muted-foreground",
+						children: status
+					}),
+					locked && /* @__PURE__ */ jsx(LockLine, {
+						id: reasonId,
+						className: "mt-1",
+						children: action?.disabledReason
+					})
+				]
+			}),
+			error != null && /* @__PURE__ */ jsx(ErrorLine, {
+				className: "col-start-[main] row-start-2 mt-1 @max-[34rem]/settings-section:col-end-[-1] @max-[34rem]/settings-section:row-start-3",
+				children: error
+			}),
+			status != null && columns.status && /* @__PURE__ */ jsx("div", {
+				className: cn("col-start-[status] row-start-1 min-w-0 text-sm leading-5 text-muted-foreground", NARROW_STATUS),
+				children: status
+			}),
+			actionCell && /* @__PURE__ */ jsx("div", {
+				className: "col-start-[action] row-start-1 flex min-w-0 items-center justify-end gap-1",
+				children: actionCell
+			}),
+			menuNode && columns.menu && /* @__PURE__ */ jsx("div", {
+				className: "col-start-[menu] row-start-1 flex justify-end",
+				children: menuNode
+			})
+		]
+	});
+}
+//#endregion
+export { SettingsList, SettingsListItem, SettingsRow, SettingsSection };

package/dist/primitives/switch.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 //#region src/primitives/switch.tsx
 const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
-	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
+	className: cn("relative pointer-coarse:before:absolute pointer-coarse:before:-inset-x-1.5 pointer-coarse:before:-inset-y-3.5 pointer-coarse:before:content-['']", "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
 	...props,
 	ref,
 	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-card data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground") })

package/dist/primitives/upload-progress.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircle, CheckCircle2, FileText, Loader2, RefreshCw, X } from "lucide-react";
 //#region src/primitives/upload-progress.tsx
@@ -52,16 +53,20 @@ function UploadProgress({ files, onRemove, onRetry, className }) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex shrink-0 items-center gap-1",
-					children: [file.status === "error" && onRetry && /* @__PURE__ */ jsx("button", {
+					children: [file.status === "error" && onRetry && /* @__PURE__ */ jsx(Button, {
 						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
 						onClick: () => onRetry(file.id),
-						className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-						children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3.5 w-3.5" })
-					}), onRemove && /* @__PURE__ */ jsx("button", {
+						"aria-label": `Retry ${file.name}`,
+						children: /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" })
+					}), onRemove && /* @__PURE__ */ jsx(Button, {
 						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
 						onClick: () => onRemove(file.id),
-						className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-						children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+						"aria-label": `Remove ${file.name}`,
+						children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
 					})]
 				})
 			]

package/dist/primitives.d.ts

@@ -16,7 +16,7 @@ import { Calendar, CalendarDate, CalendarProps, formatCalendarDate, localToday,
 import { DatePicker, DatePickerProps } from "./primitives/date-picker.js";
 import { TimeSelect, TimeSelectProps } from "./primitives/time-select.js";
 import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
-import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
+import { Avatar, AvatarFallback, AvatarImage, AvatarProps } from "./primitives/avatar.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableProps, TableRow } from "./primitives/table.js";
@@ -44,6 +44,8 @@ import { InlineCode, InlineCodeProps } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
+import { Field, FieldProps, fieldMessageId } from "./primitives/field.js";
+import { SettingsList, SettingsListAction, SettingsListColumns, SettingsListItem, SettingsListItemProps, SettingsListMenuItem, SettingsListProps, SettingsRow, SettingsRowLayout, SettingsRowProps, SettingsSection, SettingsSectionProps } from "./primitives/settings.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
@@ -54,4 +56,4 @@ import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/w
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -42,6 +42,8 @@ import { CodeBlock, CopyButton } from "./markdown/code-block.js";
 import { InlineCode } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
+import { Field, fieldMessageId } from "./primitives/field.js";
+import { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./primitives/settings.js";
 import { PageHeader } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
 import { Pagination } from "./primitives/pagination.js";
@@ -54,4 +56,4 @@ import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, HelpText, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FilterField, Heading, HelpText, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.39.0",
+  "version": "11.40.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -165,7 +165,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.25.1",
+    "@tangle-network/brand": "^1.26.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/lib/control-presentation.ts

@@ -46,22 +46,24 @@ export const controlSquare = {
 export const fieldTouchText = "pointer-coarse:text-base";
 
 /**
- * A control that is shorter than 44px on a fine pointer still gets a 44px hit
- * height on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+ * A control smaller than 44px on a fine pointer still gets a 44px target
+ * in both dimensions on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+ * Follow the primary pointer, matching SegmentedControl; a secondary touch
+ * input alone does not inflate a fine-pointer desktop layout.
  */
-export const touchTarget = "pointer-coarse:min-h-11";
+export const touchTarget = "pointer-coarse:min-h-11 pointer-coarse:min-w-11";
 
 /** Field sizes: the control scale with field padding. */
 export const fieldSizes = {
-  sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, "px-2.5"),
-  md: cn(controlHeight.md, controlText.md, controlRadius.md, "px-3"),
-  lg: cn(controlHeight.lg, controlText.lg, controlRadius.lg, "px-4"),
+  sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, touchTarget, "px-2.5"),
+  md: cn(controlHeight.md, controlText.md, controlRadius.md, touchTarget, "px-3"),
+  lg: cn(controlHeight.lg, controlText.lg, controlRadius.lg, touchTarget, "px-4"),
 } as const satisfies Record<ControlSize, string>;
 
 // Explicit opt-in sizes kept for existing callers. Compact follows the
 // consumer's density token (md); touch is lg with a guaranteed 44px minimum.
 export const controlSizes = {
-  compact: "h-[var(--control-height)] px-3 py-1 text-sm",
+  compact: `h-[var(--control-height)] px-3 py-1 text-sm ${touchTarget}`,
   touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base",
 } as const;
 

package/src/presentation.ts

@@ -1,7 +1,7 @@
 /** React-free presentation. Consumers scan this published source with Tailwind. */
 import { surfaceMotion } from "./lib/motion";
 import { cva } from "class-variance-authority";
-import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "./lib/control-presentation";
+import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText, touchTarget } from "./lib/control-presentation";
 import { focusRing, focusFieldInvalid } from "./lib/focus";
 import { ixControl, ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction";
 import { cn } from "./lib/utils";
@@ -18,6 +18,8 @@ export const buttonVariants = cva(
           `bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] ${ixControl}`,
         outline:
           `border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground ${ixControl}`,
+        "destructive-outline":
+          `border border-[var(--surface-danger-border)] bg-card hover:bg-[var(--surface-danger-bg)] active:scale-[0.97] text-[var(--surface-danger-text)] ${ixControl}`,
         secondary:
           `bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] ${ixControl}`,
         ghost:
@@ -27,15 +29,15 @@ export const buttonVariants = cva(
           `bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] ${ixControl}`,
       },
       size: {
-        default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
-        md: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
-        sm: `${controlHeight.sm} ${controlText.sm} ${controlRadius.sm} px-3`,
-        lg: `${controlHeight.lg} ${controlText.lg} ${controlRadius.lg} px-7`,
+        default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} ${touchTarget} px-4 py-2`,
+        md: `${controlHeight.md} ${controlText.md} ${controlRadius.md} ${touchTarget} px-4 py-2`,
+        sm: `${controlHeight.sm} ${controlText.sm} ${controlRadius.sm} ${touchTarget} px-3`,
+        lg: `${controlHeight.lg} ${controlText.lg} ${controlRadius.lg} ${touchTarget} px-7`,
         display: "tangle-control-display",
         xl: "h-13 rounded-xl px-9 text-base",
-        icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md}`,
-        "icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm}`,
-        "icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg}`,
+        icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md} ${touchTarget}`,
+        "icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm} ${touchTarget}`,
+        "icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg} ${touchTarget}`,
         ...controlSizes,
       },
     },