@tangle-network/ui 11.43.0 → 11.44.1

package/dist/primitives/input.js

@@ -7,7 +7,7 @@ import { HelpText } from "./help-text.js";
 import { Label } from "./label.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/primitives/input.tsx
+// src/primitives/input.tsx
 function descriptionIds(...ids) {
 	return [...new Set(ids.join(" ").split(/\s+/).filter(Boolean))].join(" ") || void 0;
 }
@@ -88,5 +88,4 @@ const Textarea = React.forwardRef(({ className, variant: _variant, size = "defau
 	});
 });
 Textarea.displayName = "Textarea";
-//#endregion
 export { Input, Textarea };

package/dist/primitives/label.d.ts

@@ -1,6 +1,4 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-//#region src/primitives/label.d.ts
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
-//#endregion
 export { Label };

package/dist/primitives/label.js

@@ -4,12 +4,11 @@ import { labelVariants } from "../presentation.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as LabelPrimitive from "@radix-ui/react-label";
-//#region src/primitives/label.tsx
+// src/primitives/label.tsx
 const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
 	ref,
 	className: cn(labelVariants(), className),
 	...props
 }));
 Label.displayName = LabelPrimitive.Root.displayName;
-//#endregion
 export { Label };

package/dist/primitives/metric-chart.d.ts

@@ -1,6 +1,5 @@
 import { SeriesPointInput } from "../lib/series.js";
 import * as React from "react";
-//#region src/primitives/metric-chart.d.ts
 export interface ChartReferenceLine {
   value: number;
   label?: string;
@@ -43,5 +42,4 @@ declare const MetricChart: React.ForwardRefExoticComponent<Omit<React.SVGAttribu
   formatValue?: (value: number) => string;
   formatTime?: (at: number) => string;
 } & React.RefAttributes<SVGSVGElement>>;
-//#endregion
 export { MetricChart };

package/dist/primitives/metric-chart.js

@@ -3,7 +3,7 @@ import { chartPresentation } from "../presentation.js";
 import { normalizeSeries, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale } from "../lib/series.js";
 import * as React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/primitives/metric-chart.tsx
+// src/primitives/metric-chart.tsx
 const defaultTimeLabel = (at) => new Date(at).toLocaleDateString(void 0, {
 	month: "short",
 	day: "numeric"
@@ -151,5 +151,4 @@ const MetricChart = React.forwardRef(({ points, title, unit, decimals, reference
 	});
 });
 MetricChart.displayName = "MetricChart";
-//#endregion
 export { MetricChart };

package/dist/primitives/metric-strip.d.ts

@@ -1,6 +1,5 @@
 import { StatusTone } from "./status-pill.js";
 import * as React from "react";
-//#region src/primitives/metric-strip.d.ts
 /** Headline readings on one plane, with native definition-list semantics. */
 export interface MetricStripProps extends React.HTMLAttributes<HTMLDListElement> {
   children: React.ReactNode;
@@ -25,5 +24,4 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /** A described term; the strip, not this item, decides where separators belong. */
 declare const Metric: React.ForwardRefExoticComponent<MetricProps & React.RefAttributes<HTMLDivElement>>;
-//#endregion
 export { Metric, MetricStrip };

package/dist/primitives/metric-strip.js

@@ -3,7 +3,7 @@ import { metricLayouts, metricPresentation } from "../presentation.js";
 import { StatusPill } from "./status-pill.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/primitives/metric-strip.tsx
+// src/primitives/metric-strip.tsx
 const MetricStrip = React.forwardRef(({ className, children, columns = 4, ...props }, ref) => /* @__PURE__ */ jsx("dl", {
 	ref,
 	className: cn(metricPresentation.strip, metricLayouts[columns], className),
@@ -48,5 +48,4 @@ const Metric = React.forwardRef(({ className, label, value, hint, attention, ico
 	]
 }));
 Metric.displayName = "Metric";
-//#endregion
 export { Metric, MetricStrip };

package/dist/primitives/page-header.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-//#region src/primitives/page-header.d.ts
 /**
  * A page masthead with separate title, prose, actions and qualifying metadata.
  * Brand's existing props and header ref are preserved. Sandbox's existing
@@ -22,5 +21,4 @@ export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>,
   titleAs?: React.ElementType;
 }
 declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
-//#endregion
 export { PageHeader };

package/dist/primitives/page-header.js

@@ -2,7 +2,7 @@ import { cn } from "../lib/utils.js";
 import { Heading } from "./heading.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/primitives/page-header.tsx
+// src/primitives/page-header.tsx
 const hasContent = (node) => Boolean(node) || node === 0;
 const PageHeader = React.forwardRef(({ className, presentation, title, description, actions, action, eyebrow, meta, titleId, titleAs, level = 1, ...props }, ref) => {
 	const resolvedActions = actions === void 0 ? action : actions;
@@ -44,5 +44,4 @@ const PageHeader = React.forwardRef(({ className, presentation, title, descripti
 	});
 });
 PageHeader.displayName = "PageHeader";
-//#endregion
 export { PageHeader };

package/dist/primitives/page-shell.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { ReactNode } from "react";
-//#region src/primitives/page-shell.d.ts
 export interface PageShellProps {
   children?: ReactNode;
   /** Optional reading layout. Content, routing and navigation interaction stay caller-owned. */
@@ -32,5 +31,4 @@ export interface PageShellProps {
  * `measure="settings"` it goes on the frame, the width the layout answers to,
  * so a `max-w-*` there bounds the measure and a narrow frame gets the strip.
  */
-export declare function PageShell({ children, className, navigation, article, outline, header, measure, navigationLabel, outlineLabel }: PageShellProps): React.JSX.Element;
-//#endregion
+export declare function PageShell({ children, className, navigation, article, outline, header, measure, navigationLabel, outlineLabel }: PageShellProps): React.JSX.Element;

package/dist/primitives/page-shell.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/primitives/page-shell.tsx
+// src/primitives/page-shell.tsx
 /**
 * Centre the current link of a horizontally scrolling nav, so the links on
 * both sides show that the strip scrolls. It moves the strip, never the page.
@@ -111,5 +111,4 @@ function PageShell({ children, className, navigation, article, outline, header,
 		children
 	});
 }
-//#endregion
 export { PageShell };

package/dist/primitives/pagination.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-//#region src/primitives/pagination.d.ts
 interface PaginationBaseProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange" | "children"> {
   /** The current page, zero-based. */
   page: number;
@@ -54,4 +53,4 @@ export interface PaginationLinkProps extends PaginationBaseProps {
  */
 export type PaginationProps = PaginationButtonProps | PaginationLinkProps;
 export declare function Pagination({ page, pageCount, onPageChange, hrefFor, linkComponent: LinkComponent, siblings, className, "aria-label": ariaLabel, ...rest }: PaginationProps): React.JSX.Element | null;
-//#endregion
+export {};

package/dist/primitives/pagination.js

@@ -3,7 +3,7 @@ import { buttonVariants } from "../presentation.js";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-//#region src/primitives/pagination.tsx
+// src/primitives/pagination.tsx
 /**
 * The visible slots for `page` of `pageCount`. The number of slots stays the
 * same as the current page moves, so the controls do not shift under the
@@ -107,5 +107,4 @@ function Pagination({ page, pageCount, onPageChange, hrefFor, linkComponent: Lin
 		})
 	});
 }
-//#endregion
 export { Pagination, pageSlots };

package/dist/primitives/popover.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-//#region src/primitives/popover.d.ts
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
@@ -11,5 +10,4 @@ declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.Pop
  * for wider content and keep long text wrapping inside it.
  */
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-//#endregion
 export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/primitives/popover.js

@@ -5,7 +5,7 @@ import { SurfaceMotion } from "../lib/surface-motion.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-//#region src/primitives/popover.tsx
+// src/primitives/popover.tsx
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
@@ -29,5 +29,4 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
 	})
 }) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-//#endregion
 export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/primitives/progress.d.ts

@@ -1,9 +1,7 @@
 import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-//#region src/primitives/progress.d.ts
 declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
   variant?: "default" | "sandbox";
   showValue?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-//#endregion
 export { Progress };

package/dist/primitives/progress.js

@@ -2,7 +2,7 @@ import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-//#region src/primitives/progress.tsx
+// src/primitives/progress.tsx
 const Progress = React.forwardRef(({ className, value, variant = "default", showValue = false, ...props }, ref) => {
 	const indicatorVariants = {
 		default: "bg-primary",
@@ -25,5 +25,4 @@ const Progress = React.forwardRef(({ className, value, variant = "default", show
 	});
 });
 Progress.displayName = ProgressPrimitive.Root.displayName;
-//#endregion
 export { Progress };

package/dist/primitives/radio-group.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-//#region src/primitives/radio-group.d.ts
 /**
  * One choice from a set. Arrow keys move between items; pair each item with a
  * `Label` through `id`/`htmlFor`. The item matches `Checkbox` (16px, the
@@ -9,5 +8,4 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
  */
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-//#endregion
 export { RadioGroup, RadioGroupItem };

package/dist/primitives/radio-group.js

@@ -4,7 +4,7 @@ import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-//#region src/primitives/radio-group.tsx
+// src/primitives/radio-group.tsx
 /**
 * One choice from a set. Arrow keys move between items; pair each item with a
 * `Label` through `id`/`htmlFor`. The item matches `Checkbox` (16px, the
@@ -24,5 +24,4 @@ const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => /* @__
 	children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "size-2 rounded-full bg-primary" })
 }));
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-//#endregion
 export { RadioGroup, RadioGroupItem };

package/dist/primitives/segmented-control.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-//#region src/primitives/segmented-control.d.ts
 /**
  * Visually lightweight segmented control for single-value selection.
  *
@@ -53,5 +52,4 @@ export interface SegmentedControlProps<T extends string = string> extends Pick<R
   /** Rendered as the group's `data-testid`. */
   "data-testid"?: string;
 }
-export declare function SegmentedControl<T extends string = string>({ value, onValueChange, options, variant, className, ...rest }: SegmentedControlProps<T>): React.JSX.Element;
-//#endregion
+export declare function SegmentedControl<T extends string = string>({ value, onValueChange, options, variant, className, ...rest }: SegmentedControlProps<T>): React.JSX.Element;

package/dist/primitives/segmented-control.js

@@ -1,12 +1,12 @@
 "use client";
 import "../lib/interaction.js";
-import { focusRing, focusRingInset } from "../lib/focus.js";
+import "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import "../lib/control-presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-//#region src/primitives/segmented-control.tsx
+// src/primitives/segmented-control.tsx
 /** Size of the edge chevron, in px. The selected option is kept this far
 *  (plus the strip's own padding) from an edge so the chevron never covers it. */
 const SCROLL_CUE_SIZE = 32;
@@ -147,13 +147,13 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 					},
 					className: cn("relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]", variant === "row" && [
 						"rounded-md border border-transparent px-3 py-1.5",
-						focusRing,
+						"focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0",
 						"hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)]",
 						"aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]"
 					], variant === "tabs" && [
 						"shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2",
 						"pointer-coarse:min-h-11 pointer-coarse:min-w-11",
-						focusRingInset,
+						"focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:-outline-offset-1 focus-visible:ring-inset",
 						"hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]"
 					], active ? "text-[var(--accent-text)]" : "text-muted-foreground hover:text-foreground"),
 					children: [/* @__PURE__ */ jsx("span", { children: option.label }), option.adornment && /* @__PURE__ */ jsx("span", {
@@ -169,5 +169,4 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		]
 	});
 }
-//#endregion
 export { SegmentedControl };

package/dist/primitives/select.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-//#region src/primitives/select.d.ts
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
@@ -14,5 +13,4 @@ declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitiv
 declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-//#endregion
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/primitives/select.js

@@ -6,7 +6,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-//#region src/primitives/select.tsx
+// src/primitives/select.tsx
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
@@ -71,5 +71,4 @@ const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @_
 	...props
 }));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-//#endregion
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/primitives/separator.d.ts

@@ -1,11 +1,9 @@
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-//#region src/primitives/separator.d.ts
 /**
  * A hairline rule on the border token. Decorative by default, so assistive
  * technology skips it; pass `decorative={false}` when it separates groups a
  * screen reader should announce.
  */
 declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-//#endregion
 export { Separator };

package/dist/primitives/separator.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-//#region src/primitives/separator.tsx
+// src/primitives/separator.tsx
 /**
 * A hairline rule on the border token. Decorative by default, so assistive
 * technology skips it; pass `decorative={false}` when it separates groups a
@@ -17,5 +17,4 @@ const Separator = React.forwardRef(({ className, orientation = "horizontal", dec
 	...props
 }));
 Separator.displayName = SeparatorPrimitive.Root.displayName;
-//#endregion
 export { Separator };

package/dist/primitives/series-sparkline.d.ts

@@ -1,6 +1,5 @@
 import { SeriesPointInput } from "../lib/series.js";
 import * as React from "react";
-//#region src/primitives/series-sparkline.d.ts
 export type SeriesSparklineProps = Omit<React.SVGAttributes<SVGSVGElement>, "points"> & {
   points: SeriesPointInput[];
   /** Accessible name; also rendered as the svg title. */
@@ -12,5 +11,4 @@ declare const SeriesSparkline: React.ForwardRefExoticComponent<Omit<React.SVGAtt
   /** Accessible name; also rendered as the svg title. */
   label: string;
 } & React.RefAttributes<SVGSVGElement>>;
-//#endregion
 export { SeriesSparkline };

package/dist/primitives/series-sparkline.js

@@ -3,7 +3,7 @@ import { chartPresentation } from "../presentation.js";
 import { normalizeSeries, seriesAreaPath, seriesExtent, seriesLinePath, seriesScale } from "../lib/series.js";
 import * as React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/primitives/series-sparkline.tsx
+// src/primitives/series-sparkline.tsx
 /** Inline trend glyph: viewBox-scaled, currentColor against `text-primary`. */
 const SeriesSparkline = React.forwardRef(({ points, label, className, ...props }, ref) => {
 	const series = normalizeSeries(points);
@@ -49,5 +49,4 @@ const SeriesSparkline = React.forwardRef(({ points, label, className, ...props }
 	});
 });
 SeriesSparkline.displayName = "SeriesSparkline";
-//#endregion
 export { SeriesSparkline };

package/dist/primitives/settings.d.ts

@@ -1,5 +1,4 @@
 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`. */
@@ -24,21 +23,25 @@ export interface SettingsRowProps {
   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).
+   * `compact`: the control keeps its own width and stays on the line (switches, single buttons); a row with a value uses `inline`.
    * `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;
+  /** A read-only value before any children; supplying even an empty value keeps its span. */
+  value?: React.ReactNode;
+  /** Use mono for the value, such as an identifier; children keep their own font. */
+  mono?: boolean;
   children?: React.ReactNode;
 }
 /**
- * One setting: its label, an optional consequence line and its control. The
+ * One setting: its label, an optional consequence line, read-only value and 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 declare function SettingsRow(props: SettingsRowProps): React.JSX.Element;
 export interface SettingsSectionProps {
   /** The section's anchor: `#id` scrolls to it. The title's id is `${id}-title`. */
   id: string;
@@ -121,5 +124,4 @@ export interface SettingsListItemProps {
  * 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
+export declare function SettingsListItem({ leading, title, meta, status, error, action, menu }: SettingsListItemProps): React.JSX.Element;

package/dist/primitives/settings.js

@@ -9,7 +9,7 @@ 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
+// 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)]";
@@ -60,18 +60,20 @@ function describeControl(children, htmlFor, messageId, invalid) {
 	});
 }
 /**
-* One setting: its label, an optional consequence line and its control. The
+* One setting: its label, an optional consequence line, read-only value and 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 }) {
+function SettingsRow(props) {
+	const { id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, value, mono, children } = props;
+	const hasValue = Object.hasOwn(props, "value");
 	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]),
+		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[hasValue && layout === "compact" ? "inline" : layout]),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -114,9 +116,13 @@ function SettingsRow({ id, label, description, info, htmlFor, status, error, onR
 				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
+		}), (hasValue || control != null && control !== false) && /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 items-center gap-2", ROW_CONTROL[hasValue && layout === "compact" ? "inline" : layout]),
+			children: [hasValue && /* @__PURE__ */ jsx("span", {
+				"data-slot": "settings-value",
+				className: cn("min-w-0 text-foreground text-sm [overflow-wrap:anywhere] @min-[34rem]/settings-section:text-right", mono && "font-mono"),
+				children: value
+			}), control]
 		})]
 	});
 }
@@ -312,5 +318,4 @@ function SettingsListItem({ leading, title, meta, status, error, action, menu })
 		]
 	});
 }
-//#endregion
 export { SettingsList, SettingsListItem, SettingsRow, SettingsSection };

package/dist/primitives/sheet.d.ts

@@ -1,7 +1,6 @@
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-//#region src/primitives/sheet.d.ts
 /** A dialog that slides in from an edge: a mobile nav drawer or a side panel. */
 declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
 declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -24,5 +23,4 @@ declare namespace SheetFooter {
 }
 declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-//#endregion
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };

package/dist/primitives/sheet.js

@@ -1,6 +1,6 @@
 "use client";
 import { surfaceMotion } from "../lib/motion.js";
-import { focusRing } from "../lib/focus.js";
+import "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { SurfaceMotion } from "../lib/surface-motion.js";
 import { cva } from "class-variance-authority";
@@ -8,7 +8,7 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-//#region src/primitives/sheet.tsx
+// src/primitives/sheet.tsx
 /** A dialog that slides in from an edge: a mobile nav drawer or a side panel. */
 const Sheet = SheetPrimitive.Root;
 const SheetTrigger = SheetPrimitive.Trigger;
@@ -45,7 +45,7 @@ const SheetContent = React.forwardRef(({ className, children, side = "right", hi
 		side: side ?? "right",
 		asChild,
 		children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
-			className: cn("absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none", "[transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none", focusRing),
+			className: cn("absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none", "[transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none", "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0"),
 			children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: "Close"
@@ -76,5 +76,4 @@ const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @
 	...props
 }));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
-//#endregion
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };

package/dist/primitives/sidebar-drop-zone.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-//#region src/primitives/sidebar-drop-zone.d.ts
 export interface SidebarDropZoneProps {
   /** Called with dropped files */
   onDrop: (files: File[]) => void;
@@ -17,5 +16,4 @@ export interface SidebarDropZoneProps {
   persistent?: boolean;
   className?: string;
 }
-export declare function SidebarDropZone({ onDrop, accept, disabled, title, description, icon, persistent, className }: SidebarDropZoneProps): import("react").JSX.Element;
-//#endregion
+export declare function SidebarDropZone({ onDrop, accept, disabled, title, description, icon, persistent, className }: SidebarDropZoneProps): import("react").JSX.Element;

package/dist/primitives/sidebar-drop-zone.js

@@ -2,7 +2,7 @@ import { cn } from "../lib/utils.js";
 import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Upload } from "lucide-react";
-//#region src/primitives/sidebar-drop-zone.tsx
+// src/primitives/sidebar-drop-zone.tsx
 /**
 * SidebarDropZone — compact scoped drop zone for sidebar panels and narrow containers.
 *
@@ -84,5 +84,4 @@ function SidebarDropZone({ onDrop, accept, disabled, title = "Drop files here",
 		})
 	});
 }
-//#endregion
 export { SidebarDropZone };

package/dist/primitives/skeleton.d.ts

@@ -1,4 +1,3 @@
-//#region src/primitives/skeleton.d.ts
 declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 declare function SkeletonCard({ className }: {
   className?: string;
@@ -6,5 +5,4 @@ declare function SkeletonCard({ className }: {
 declare function SkeletonTable({ rows }: {
   rows?: number;
 }): import("react").JSX.Element;
-//#endregion
 export { Skeleton, SkeletonCard, SkeletonTable };

package/dist/primitives/skeleton.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/primitives/skeleton.tsx
+// src/primitives/skeleton.tsx
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("animate-pulse motion-reduce:animate-none rounded-lg bg-muted/50", className),
@@ -46,5 +46,4 @@ function SkeletonTable({ rows = 5 }) {
 		}, i))]
 	});
 }
-//#endregion
 export { Skeleton, SkeletonCard, SkeletonTable };

package/dist/primitives/slider.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-//#region src/primitives/slider.d.ts
 /**
  * Range input with one thumb per value. A single value renders one thumb; an
  * array of two renders a range. The thumbs are what assistive technology
@@ -10,5 +9,4 @@ import * as SliderPrimitive from "@radix-ui/react-slider";
 declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
   thumbLabels?: string[];
 } & React.RefAttributes<HTMLSpanElement>>;
-//#endregion
 export { Slider };