@tangle-network/ui 11.12.0 → 11.13.0

package/dist/primitives/drop-zone.js

@@ -0,0 +1,104 @@
+import { cn } from "../lib/utils.js";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/drop-zone.tsx
+/**
+* DropZone — full-window drag-and-drop file upload overlay.
+*
+* Detects when files are dragged over the browser window and shows a
+* customizable overlay. Products provide the onDrop handler and optional
+* custom overlay content.
+*
+* Usage:
+*   <DropZone onDrop={files => uploadToR2(files)} accept=".pdf,.csv">
+*     <YourApp />
+*   </DropZone>
+*/
+function DropZone({ onDrop, accept, disabled, overlay, title = "Drop files to upload", description = "Your files will be securely stored in the workspace.", icon = "cloud_upload", children, className }) {
+	const [dragOver, setDragOver] = useState(false);
+	const counter = useRef(0);
+	const isAccepted = useCallback((file) => {
+		if (!accept) return true;
+		const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
+		const fileName = file.name.toLowerCase();
+		return extensions.some((ext) => fileName.endsWith(ext));
+	}, [accept]);
+	const handleDragEnter = useCallback((e) => {
+		e.preventDefault();
+		if (disabled) return;
+		counter.current++;
+		if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
+	}, [disabled]);
+	const handleDragLeave = useCallback((e) => {
+		e.preventDefault();
+		counter.current--;
+		if (counter.current === 0) setDragOver(false);
+	}, []);
+	const handleDragOver = useCallback((e) => {
+		e.preventDefault();
+		if (!disabled) e.dataTransfer.dropEffect = "copy";
+	}, [disabled]);
+	const handleDrop = useCallback((e) => {
+		e.preventDefault();
+		counter.current = 0;
+		setDragOver(false);
+		if (disabled) return;
+		const allFiles = Array.from(e.dataTransfer?.files || []);
+		const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
+		if (accepted.length > 0) onDrop(accepted);
+	}, [
+		disabled,
+		accept,
+		isAccepted,
+		onDrop
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		onDragEnter: handleDragEnter,
+		onDragLeave: handleDragLeave,
+		onDragOver: handleDragOver,
+		onDrop: handleDrop,
+		className: cn("relative", className),
+		children: [dragOver && (overlay || /* @__PURE__ */ jsx("div", {
+			className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-background",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "rounded-2xl border-2 border-dashed border-border bg-card p-16 text-center shadow-[var(--shadow-dropdown)] max-w-lg mx-auto",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-border bg-[var(--accent-surface-soft)]",
+						children: typeof icon === "string" ? /* @__PURE__ */ jsxs("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							className: "h-10 w-10 text-[var(--accent-text)]",
+							children: [
+								/* @__PURE__ */ jsx("title", { children: "Upload" }),
+								/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+								/* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+								/* @__PURE__ */ jsx("line", {
+									x1: "12",
+									x2: "12",
+									y1: "3",
+									y2: "15"
+								})
+							]
+						}) : icon
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-bold text-foreground",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-2 text-sm text-muted-foreground",
+						children: description
+					})
+				]
+			})
+		})), children]
+	});
+}
+//#endregion
+export { DropZone };

package/dist/primitives/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+//#region src/primitives/dropdown-menu.d.ts
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+declare namespace DropdownMenuShortcut {
+  var displayName: string;
+}
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/{dropdown-menu-BpcLa5vF.js → primitives/dropdown-menu.js}

@@ -1,29 +1,8 @@
-import { t as cn } from "./utils-C_uf36nf.js";
+import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRight, Circle } from "lucide-react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-//#region src/primitives/avatar.tsx
-const Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
-	ref,
-	className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
-	...props
-}));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
-	ref,
-	className: cn("aspect-square h-full w-full", className),
-	...props
-}));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
-	ref,
-	className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted font-medium text-sm", className),
-	...props
-}));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-//#endregion
 //#region src/primitives/dropdown-menu.tsx
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -98,4 +77,4 @@ const DropdownMenuShortcut = ({ className, ...props }) => {
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 //#endregion
-export { AvatarFallback as _, DropdownMenuItem as a, DropdownMenuRadioGroup as c, DropdownMenuShortcut as d, DropdownMenuSub as f, Avatar as g, DropdownMenuTrigger as h, DropdownMenuGroup as i, DropdownMenuRadioItem as l, DropdownMenuSubTrigger as m, DropdownMenuCheckboxItem as n, DropdownMenuLabel as o, DropdownMenuSubContent as p, DropdownMenuContent as r, DropdownMenuPortal as s, DropdownMenu as t, DropdownMenuSeparator as u, AvatarImage as v };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/primitives/empty-state.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+//#region src/primitives/empty-state.d.ts
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { EmptyState };

package/dist/primitives/empty-state.js

@@ -0,0 +1,32 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/empty-state.tsx
+const EmptyState = React.forwardRef(({ className, icon, title, description, action, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex flex-col items-center justify-center px-4 py-16 text-center", className),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: "mb-4 rounded-full bg-muted p-4 text-muted-foreground",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				className: "font-semibold text-lg",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "mt-2 max-w-sm text-muted-foreground text-sm",
+				children: description
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "mt-6",
+				children: action
+			})
+		]
+	});
+});
+EmptyState.displayName = "EmptyState";
+//#endregion
+export { EmptyState };

package/dist/primitives/heading.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/primitives/heading.d.ts
+/** Visual roles ported from sandbox-ui/src/primitives/heading.tsx. */
+export type HeadingVariant = "display" | "hero" | "page" | "section" | "subsection" | "eyebrow";
+export interface HeadingProps extends Omit<React.HTMLAttributes<HTMLElement>, "role"> {
+  /** Visual treatment, independent of the rendered element. Defaults to section. */
+  variant?: HeadingVariant;
+  /** Semantic element; changing it does not change the visual variant. */
+  as?: React.ElementType;
+  /**
+   * Native ARIA role, or Sandbox's existing visual-role input. Only the six
+   * legacy visual values are consumed; they are never emitted as ARIA roles.
+   * Prefer variant for new code. An explicit variant wins over a legacy role.
+   */
+  role?: React.AriaRole | HeadingVariant;
+}
+/**
+ * One renderer for page, section and card titles. Use at most one default
+ * display/page h1 per page; choose `as` according to the document hierarchy.
+ */
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Heading };

package/dist/primitives/heading.js

@@ -0,0 +1,38 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/heading.tsx
+const VARIANT_CLASS = {
+	display: "font-display font-bold text-foreground text-[length:var(--font-size-display,3rem)] leading-[var(--line-height-display,1.05)] tracking-[var(--tracking-tight,-0.02em)]",
+	hero: "font-display font-bold text-foreground text-[length:var(--font-size-hero,2.5rem)] leading-[1.1] tracking-[var(--tracking-tight,-0.02em)]",
+	page: "font-display font-semibold text-foreground text-[length:var(--font-size-3xl,1.875rem)] leading-[var(--line-height-heading,1.15)] tracking-[var(--tracking-tight,-0.02em)]",
+	section: "font-display font-semibold text-foreground text-[length:var(--font-size-xl,1.25rem)] leading-[1.3] tracking-[var(--tracking-snug,-0.01em)]",
+	subsection: "font-semibold text-foreground text-[length:var(--font-size-lg,1rem)] leading-[1.4]",
+	eyebrow: "font-semibold uppercase text-muted-foreground text-[length:var(--font-size-sm,0.75rem)] leading-none tracking-[var(--tracking-wide,0.08em)]"
+};
+const DEFAULT_TAG = {
+	display: "h1",
+	hero: "h2",
+	page: "h1",
+	section: "h2",
+	subsection: "h3",
+	eyebrow: "p"
+};
+/**
+* One renderer for page, section and card titles. Use at most one default
+* display/page h1 per page; choose `as` according to the document hierarchy.
+*/
+const Heading = React.forwardRef(({ variant, role, as, className, ...props }, ref) => {
+	const legacyVariant = role && Object.prototype.hasOwnProperty.call(VARIANT_CLASS, role) ? role : void 0;
+	const visualVariant = variant ?? legacyVariant ?? "section";
+	const Tag = as ?? DEFAULT_TAG[visualVariant];
+	return /* @__PURE__ */ jsx(Tag, {
+		ref,
+		className: cn("[overflow-wrap:anywhere]", VARIANT_CLASS[visualVariant], className),
+		role: legacyVariant ? void 0 : role,
+		...props
+	});
+});
+Heading.displayName = "Heading";
+//#endregion
+export { Heading };

package/dist/primitives/input.d.ts

@@ -0,0 +1,23 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/primitives/input.d.ts
+declare const inputVariants: (props?: ({
+  variant?: "default" | "error" | "sandbox" | null | undefined;
+  size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+  label?: string;
+  error?: string;
+  hint?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Both values render the same field. */
+  variant?: "default" | "sandbox";
+  label?: string;
+  error?: string;
+  hint?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { Input, Textarea };

package/dist/primitives/input.js

@@ -0,0 +1,110 @@
+"use client";
+import { focusField, focusFieldInvalid } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { Label } from "./label.js";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/input.tsx
+const inputVariants = cva(cn("flex w-full rounded-lg border bg-card px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", focusField), {
+	variants: {
+		variant: {
+			default: "",
+			sandbox: "",
+			error: focusFieldInvalid
+		},
+		size: {
+			default: "h-11",
+			sm: "h-9 px-3",
+			lg: "h-12 px-5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function descriptionIds(...ids) {
+	return [...new Set(ids.join(" ").split(/\s+/).filter(Boolean))].join(" ") || void 0;
+}
+const Input = React.forwardRef(({ className, type, variant, size, label, error, hint, id, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) => {
+	const generatedId = React.useId();
+	const inputId = id ?? generatedId;
+	const hintId = hint ? `${inputId}-hint` : void 0;
+	const errorId = error ? `${inputId}-error` : void 0;
+	const input = /* @__PURE__ */ jsx("input", {
+		type,
+		id: inputId,
+		className: cn(inputVariants({
+			variant: error ? "error" : variant,
+			size,
+			className
+		})),
+		ref,
+		...props,
+		"aria-describedby": descriptionIds(describedBy, hintId, errorId),
+		"aria-invalid": error || variant === "error" ? true : invalid
+	});
+	if (!label && !error && !hint) return input;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full space-y-1.5",
+		children: [
+			label && /* @__PURE__ */ jsx(Label, {
+				htmlFor: inputId,
+				className: "block",
+				children: label
+			}),
+			input,
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				className: "text-[var(--surface-danger-text)] text-sm font-medium",
+				children: error
+			}),
+			hint && /* @__PURE__ */ jsx("p", {
+				id: hintId,
+				className: "text-[var(--text-dim)] text-sm",
+				children: hint
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+const Textarea = React.forwardRef(({ className, variant: _variant, label, error, hint, id, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) => {
+	const generatedId = React.useId();
+	const textareaId = id ?? generatedId;
+	const hintId = hint ? `${textareaId}-hint` : void 0;
+	const errorId = error ? `${textareaId}-error` : void 0;
+	const textarea = /* @__PURE__ */ jsx("textarea", {
+		id: textareaId,
+		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", focusField, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", className),
+		ref,
+		...props,
+		"aria-describedby": descriptionIds(describedBy, hintId, errorId),
+		"aria-invalid": error ? true : invalid
+	});
+	if (!label && !error && !hint) return textarea;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full space-y-1.5",
+		children: [
+			label && /* @__PURE__ */ jsx(Label, {
+				htmlFor: textareaId,
+				className: "block",
+				children: label
+			}),
+			textarea,
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				className: "text-[var(--surface-danger-text)] text-sm",
+				children: error
+			}),
+			hint && /* @__PURE__ */ jsx("p", {
+				id: hintId,
+				className: "text-[var(--text-dim)] text-sm",
+				children: hint
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Input, Textarea };

package/dist/primitives/label.d.ts

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,16 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+//#region src/primitives/label.tsx
+const labelVariants = cva("font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+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-strip.d.ts

@@ -0,0 +1,48 @@
+import { StatusTone } from "./status-pill.js";
+import * as React from "react";
+//#region src/primitives/metric-strip.d.ts
+/**
+ * The headline figures for a console page, as ONE statement rather than four.
+ *
+ * A row of separate stat cards is the default and it is usually wrong here.
+ * Each card is a box that must be tall enough for its longest member, so a row
+ * mixing "$248.55 / Personal wallet" against a bare "0" leaves the short ones
+ * mostly empty; and four bordered boxes read as four unrelated facts when they
+ * are four readings of one account. `MetricStrip` puts them on one plane
+ * divided by hairlines: same information, one object, no holes.
+ *
+ * The divider is a border on the item rather than a `divide-*` utility on the
+ * parent, because these wrap. `divide-x` draws from DOM order and leaves a
+ * stray rule at the start of every wrapped line; a per-item leading border
+ * suppressed at each row start does not.
+ */
+export interface MetricStripProps extends React.HTMLAttributes<HTMLDListElement> {
+  children: React.ReactNode;
+}
+declare const MetricStrip: React.ForwardRefExoticComponent<MetricStripProps & React.RefAttributes<HTMLDListElement>>;
+export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  /** The qualifying line: which wallet, which window, what the limit is. */
+  hint?: React.ReactNode;
+  /** Raises the value's tone and shows a pill beside the label. A metric is
+   *  `attention` only when a person has to DO something — not merely when a
+   *  number is zero. */
+  attention?: {
+    tone: StatusTone;
+    label: string;
+  };
+}
+/**
+ * One reading inside a `MetricStrip`.
+ *
+ * `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
+ * described term rather than as two loose strings — the semantic that makes a
+ * figure legible without the visual grouping.
+ *
+ * The value is `tabular-nums`: these sit in a row and change on a timer, and
+ * proportional digits make the column jitter every time a 1 becomes an 8.
+ */
+declare const Metric: React.ForwardRefExoticComponent<MetricProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Metric, MetricStrip };

package/dist/primitives/metric-strip.js

@@ -0,0 +1,52 @@
+import { cn } from "../lib/utils.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
+const MetricStrip = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("dl", {
+	ref,
+	className: cn("grid grid-cols-2 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)] sm:grid-cols-4", className),
+	...props,
+	children
+}));
+MetricStrip.displayName = "MetricStrip";
+/**
+* One reading inside a `MetricStrip`.
+*
+* `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
+* described term rather than as two loose strings — the semantic that makes a
+* figure legible without the visual grouping.
+*
+* The value is `tabular-nums`: these sit in a row and change on a timer, and
+* proportional digits make the column jitter every time a 1 becomes an 8.
+*/
+const Metric = React.forwardRef(({ className, label, value, hint, attention, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	className: cn("border-border p-4 sm:p-5", "max-sm:[&:not(:nth-child(2n+1))]:border-l", "sm:[&:not(:nth-child(4n+1))]:border-l", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsxs("dt", {
+			className: "flex items-center gap-2 text-muted-foreground text-sm",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: label
+			}), attention && /* @__PURE__ */ jsx(StatusPill, {
+				tone: attention.tone,
+				children: attention.label
+			})]
+		}),
+		/* @__PURE__ */ jsx("dd", {
+			className: cn("mt-1 truncate font-semibold text-xl tabular-nums tracking-tight lg:text-2xl", attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),
+			title: typeof value === "string" ? value : void 0,
+			children: value
+		}),
+		hint && /* @__PURE__ */ jsx("dd", {
+			className: "mt-0.5 truncate text-[var(--text-dim)] text-xs",
+			title: typeof hint === "string" ? hint : void 0,
+			children: hint
+		})
+	]
+}));
+Metric.displayName = "Metric";
+//#endregion
+export { Metric, MetricStrip };

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

@@ -0,0 +1,25 @@
+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
+ * action/eyebrow/titleAs inputs map into the same renderer, not a second header.
+ */
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Canonical action slot. If supplied (even null), takes precedence over action. */
+  actions?: React.ReactNode;
+  meta?: React.ReactNode;
+  titleId?: string;
+  /** Existing nested-surface treatment: h2 and section typography. */
+  level?: 1 | 2;
+  /** Existing Sandbox action slot; used only when actions is undefined. */
+  action?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  /** Existing Sandbox semantic override; takes precedence over level's tag only. */
+  titleAs?: React.ElementType;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { PageHeader };

package/dist/primitives/page-header.js

@@ -0,0 +1,47 @@
+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
+const hasContent = (node) => Boolean(node) || node === 0;
+const PageHeader = React.forwardRef(({ className, title, description, actions, action, eyebrow, meta, titleId, titleAs, level = 1, ...props }, ref) => {
+	const resolvedActions = actions === void 0 ? action : actions;
+	return /* @__PURE__ */ jsxs("header", {
+		ref,
+		className: cn("mb-6 min-w-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-wrap items-start justify-between gap-x-6 gap-y-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-[1_1_16rem]",
+				children: [
+					hasContent(eyebrow) && /* @__PURE__ */ jsx(Heading, {
+						variant: "eyebrow",
+						className: "mb-1.5",
+						children: eyebrow
+					}),
+					/* @__PURE__ */ jsx(Heading, {
+						id: titleId,
+						variant: level === 1 ? "page" : "section",
+						as: titleAs ?? (level === 1 ? "h1" : "h2"),
+						className: "text-balance",
+						children: title
+					}),
+					hasContent(description) && /* @__PURE__ */ jsx("p", {
+						className: "mt-1 max-w-prose text-muted-foreground text-sm [overflow-wrap:anywhere]",
+						children: description
+					})
+				]
+			}), hasContent(resolvedActions) && /* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 max-w-full flex-wrap items-center gap-2 [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
+				children: resolvedActions
+			})]
+		}), hasContent(meta) && /* @__PURE__ */ jsx("div", {
+			className: "mt-3 flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2 text-[var(--text-dim)] text-xs [overflow-wrap:anywhere]",
+			children: meta
+		})]
+	});
+});
+PageHeader.displayName = "PageHeader";
+//#endregion
+export { PageHeader };

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

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+//#region src/primitives/page-shell.d.ts
+export interface PageShellProps {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * Ported from sandbox-ui/src/primitives/page-shell.tsx. An optional bounded
+ * width, gutter and vertical rhythm, not an application shell or a card grid.
+ * The caller owns landmarks, routing, auth, navigation and data state. Use
+ * className to override the bound/gutters, or omit it for a workbench layout.
+ */
+export declare function PageShell({ children, className }: PageShellProps): import("react").JSX.Element;
+//#endregion

package/dist/primitives/page-shell.js

@@ -0,0 +1,17 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/page-shell.tsx
+/**
+* Ported from sandbox-ui/src/primitives/page-shell.tsx. An optional bounded
+* width, gutter and vertical rhythm, not an application shell or a card grid.
+* The caller owns landmarks, routing, auth, navigation and data state. Use
+* className to override the bound/gutters, or omit it for a workbench layout.
+*/
+function PageShell({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mx-auto min-w-0 w-full max-w-6xl space-y-8 px-6 py-8 lg:px-8", className),
+		children
+	});
+}
+//#endregion
+export { PageShell };