@tangle-network/ui 11.34.0 → 11.36.0

package/dist/primitives/button.js

@@ -1,40 +1,11 @@
 import { ixControl, ixControlSoft, ixSelected } from "../lib/interaction.js";
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
-import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText } from "../lib/control-presentation.js";
+import { buttonVariants } from "../presentation.js";
 import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/button.tsx
-const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
-	variants: {
-		variant: {
-			default: `bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] ${ixControl}`,
-			destructive: `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}`,
-			secondary: `bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] ${ixControl}`,
-			ghost: `hover:text-foreground text-muted-foreground border border-transparent ${ixControlSoft}`,
-			link: `text-[var(--accent-text)] underline-offset-4 hover:underline ${ixControlSoft}`,
-			sandbox: `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`,
-			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}`,
-			...controlSizes
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
 const bareButton = `${focusRing} ${ixControlSoft} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
 /** One Button render's classes: variant and size, the toggle states, then the caller's. */
 function buttonClassName(variant, size, pressed, className) {
@@ -72,6 +43,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
 		return /* @__PURE__ */ jsx(Slot, {
 			className: buttonClassName(variant, size, props["aria-pressed"], className),
 			ref,
+			"data-variant": size === "display" ? variant ?? "default" : void 0,
 			...props,
 			...isDisabled ? disabledHandlers(props) : {},
 			children: child ? React.cloneElement(child, {
@@ -91,6 +63,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
 	return /* @__PURE__ */ jsxs("button", {
 		className: buttonClassName(variant, size, props["aria-pressed"], className),
 		ref,
+		"data-variant": size === "display" ? variant ?? "default" : void 0,
 		...props,
 		disabled: disabled || loading,
 		"aria-busy": loading || props["aria-busy"],

package/dist/primitives/card.js

@@ -1,5 +1,6 @@
 import "../lib/interaction.js";
 import { cn } from "../lib/utils.js";
+import { cardPresentation } from "../presentation.js";
 import { Heading } from "./heading.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -15,12 +16,7 @@ import { jsx } from "react/jsx-runtime";
 const Card = React.forwardRef(({ className, variant = "default", hover = false, interactive = false, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: cn("rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow,background-color]", "duration-[var(--transition-default)]", {
-			default: "bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)]",
-			elevated: "bg-muted/50 border-border shadow-[var(--shadow-card)]",
-			glass: "bg-card/80 backdrop-blur-xl border-border shadow-[var(--shadow-card)]",
-			sandbox: "bg-muted/50 border-primary/20 shadow-[var(--shadow-accent)]"
-		}[variant], (hover || interactive) && "hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none", className),
+		className: cn(cardPresentation.root, cardPresentation.variants[variant], (hover || interactive) && "hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none", className),
 		"data-slot": "card",
 		...props
 	});
@@ -48,7 +44,7 @@ const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @_
 CardDescription.displayName = "CardDescription";
 const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
-	className: cn("p-4 [&:not(:first-child)]:pt-0", className),
+	className: cn(cardPresentation.padding, "[&:not(:first-child)]:pt-0", className),
 	...props
 }));
 CardContent.displayName = "CardContent";

package/dist/primitives/date-picker.d.ts

@@ -1,5 +1,5 @@
-import { CalendarDate, CalendarProps } from "./calendar.js";
 import { ControlSize } from "../lib/control-presentation.js";
+import { CalendarDate, CalendarProps } from "./calendar.js";
 import * as React from "react";
 //#region src/primitives/date-picker.d.ts
 export interface DatePickerProps extends Pick<CalendarProps, "min" | "max" | "isDateDisabled" | "today" | "weekStartsOn" | "locale" | "defaultMonth"> {

package/dist/primitives/dialog.js

@@ -1,5 +1,7 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { dialogPresentation } from "../presentation.js";
+import { SurfaceMotion } from "../lib/surface-motion.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -9,49 +11,60 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+const DialogOverlay = React.forwardRef(({ className, asChild, children, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
 	ref,
-	className: cn("fixed inset-0 z-50 bg-black/40", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
-	...props
+	className: cn(dialogPresentation.overlay, dialogPresentation.transition, className),
+	...props,
+	asChild: true,
+	children: /* @__PURE__ */ jsx(SurfaceMotion, {
+		kind: "overlay",
+		asChild,
+		children
+	})
 }));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, variant = "default", hideCloseButton = false, ...props }, ref) => {
-	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+const DialogContent = React.forwardRef(({ className, children, variant = "default", hideCloseButton = false, asChild, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
 		ref,
-		className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]", "gap-4 rounded-lg border bg-card p-6 shadow-lg duration-200", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]", "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", {
+		className: cn(dialogPresentation.position, dialogPresentation.surface, dialogPresentation.transition, {
 			default: "border-border",
 			sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
 		}[variant], className),
 		...props,
-		children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
-			className: cn("absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", focusRing),
-			children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Close"
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(SurfaceMotion, {
+			kind: "dialog",
+			asChild,
+			children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+				className: cn(dialogPresentation.close, focusRing),
+				children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
 			})]
-		})]
+		})
 	})] });
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+	className: cn(dialogPresentation.header, className),
 	...props
 });
 DialogHeader.displayName = "DialogHeader";
 const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+	className: cn(dialogPresentation.footer, className),
 	...props
 });
 DialogFooter.displayName = "DialogFooter";
 const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
 	ref,
-	className: cn("font-semibold text-lg leading-none tracking-tight", className),
+	className: cn(dialogPresentation.title, className),
 	...props
 }));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
 	ref,
-	className: cn("text-muted-foreground text-sm", className),
+	className: cn(dialogPresentation.description, className),
 	...props
 }));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;

package/dist/primitives/empty-state.js

@@ -1,27 +1,28 @@
 import { cn } from "../lib/utils.js";
+import { emptyStatePresentation } from "../presentation.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, titleAs: Title = "h3", ...props }, ref) => {
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cn("flex flex-col items-center justify-center px-4 py-16 text-center", className),
+		className: cn(emptyStatePresentation.root, className),
 		...props,
 		children: [
 			icon && /* @__PURE__ */ jsx("div", {
-				className: "mb-4 rounded-full bg-muted p-4 text-muted-foreground",
+				className: emptyStatePresentation.icon,
 				children: icon
 			}),
 			/* @__PURE__ */ jsx(Title, {
-				className: "font-semibold text-lg",
+				className: emptyStatePresentation.title,
 				children: title
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "mt-2 max-w-sm text-muted-foreground text-sm",
+				className: emptyStatePresentation.description,
 				children: description
 			}),
 			action && /* @__PURE__ */ jsx("div", {
-				className: "mt-6",
+				className: emptyStatePresentation.action,
 				children: action
 			})
 		]

package/dist/primitives/heading.d.ts

@@ -5,6 +5,7 @@ export type HeadingVariant = "display" | "hero" | "page" | "section" | "subsecti
 export interface HeadingProps extends Omit<React.HTMLAttributes<HTMLElement>, "role"> {
   /** Visual treatment, independent of the rendered element. Defaults to section. */
   variant?: HeadingVariant;
+  presentation?: "operational" | "expressive";
   /** Semantic element; changing it does not change the visual variant. */
   as?: React.ElementType;
   /**

package/dist/primitives/heading.js

@@ -22,13 +22,14 @@ const DEFAULT_TAG = {
 * 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 Heading = React.forwardRef(({ variant, role, as, className, presentation, ...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),
+		className: cn("[overflow-wrap:anywhere]", presentation ? presentation === "expressive" ? "tangle-display" : "tangle-heading" : VARIANT_CLASS[visualVariant], className),
+		"data-variant": presentation ? visualVariant : void 0,
 		role: legacyVariant ? void 0 : role,
 		...props
 	});

package/dist/primitives/help-text.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { helpPresentation } from "../presentation.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/help-text.tsx
@@ -10,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 const HelpText = React.forwardRef(({ className, tone = "hint", ...props }, ref) => /* @__PURE__ */ jsx("p", {
 	ref,
 	"data-tone": tone,
-	className: cn("text-[length:var(--font-size-help,0.75rem)] leading-4", tone === "error" ? "font-medium text-[var(--surface-danger-text)]" : "text-[var(--text-dim)]", className),
+	className: cn(helpPresentation.root, helpPresentation[tone], className),
 	...props
 }));
 HelpText.displayName = "HelpText";

package/dist/primitives/input.d.ts

@@ -1,10 +1,7 @@
+import { inputVariants } from "../presentation.js";
 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?: "compact" | "default" | "lg" | "md" | "sm" | "touch" | 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;

package/dist/primitives/input.js

@@ -1,34 +1,13 @@
 "use client";
-import { focusFieldInvalid } from "../lib/focus.js";
+import "../lib/focus.js";
 import { cn } from "../lib/utils.js";
-import { controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation.js";
+import { controlRadius, controlText, fieldPresentation, fieldTouchText } from "../lib/control-presentation.js";
+import { inputVariants } from "../presentation.js";
 import { HelpText } from "./help-text.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 border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium", fieldPresentation, fieldTouchText), {
-	variants: {
-		variant: {
-			default: "",
-			sandbox: "",
-			error: focusFieldInvalid
-		},
-		size: {
-			default: fieldSizes.md,
-			md: fieldSizes.md,
-			sm: fieldSizes.sm,
-			lg: fieldSizes.lg,
-			compact: cn(fieldSizes.md, controlSizes.compact),
-			touch: cn(fieldSizes.md, controlSizes.touch)
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
 function descriptionIds(...ids) {
 	return [...new Set(ids.join(" ").split(/\s+/).filter(Boolean))].join(" ") || void 0;
 }

package/dist/primitives/label.js

@@ -1,11 +1,10 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { cva } from "class-variance-authority";
+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
-const labelVariants = cva("font-medium text-[length:var(--font-size-label,0.875rem)] 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),

package/dist/primitives/metric-strip.js

@@ -1,17 +1,12 @@
 import { cn } from "../lib/utils.js";
+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
-const layouts = {
-	3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l",
-	4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l",
-	5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l",
-	6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(6n+1))]:border-l"
-};
 const MetricStrip = React.forwardRef(({ className, children, columns = 4, ...props }, ref) => /* @__PURE__ */ jsx("dl", {
 	ref,
-	className: cn("grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]", layouts[columns], className),
+	className: cn(metricPresentation.strip, metricLayouts[columns], className),
 	...props,
 	children
 }));
@@ -19,11 +14,11 @@ MetricStrip.displayName = "MetricStrip";
 /** A described term; the strip, not this item, decides where separators belong. */
 const Metric = React.forwardRef(({ className, label, value, hint, attention, icon, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	ref,
-	className: cn("min-w-0 border-border p-4 sm:p-5", className),
+	className: cn(metricPresentation.item, className),
 	...props,
 	children: [
 		/* @__PURE__ */ jsxs("dt", {
-			className: "flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm",
+			className: metricPresentation.label,
 			children: [
 				icon != null && icon !== false && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
@@ -31,7 +26,7 @@ const Metric = React.forwardRef(({ className, label, value, hint, attention, ico
 					children: icon
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+					className: metricPresentation.labelText,
 					children: label
 				}),
 				attention && /* @__PURE__ */ jsx(StatusPill, {
@@ -41,12 +36,12 @@ const Metric = React.forwardRef(({ className, label, value, hint, attention, ico
 			]
 		}),
 		/* @__PURE__ */ jsx("dd", {
-			className: cn("mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl", attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),
+			className: cn(metricPresentation.value, attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),
 			title: typeof value === "string" ? value : void 0,
 			children: value
 		}),
 		hint !== void 0 && hint !== null && hint !== false && hint !== "" && /* @__PURE__ */ jsx("dd", {
-			className: "mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs",
+			className: metricPresentation.hint,
 			title: typeof hint === "string" ? hint : void 0,
 			children: hint
 		})

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

@@ -7,6 +7,7 @@ import * as React from "react";
  */
 export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
   title: React.ReactNode;
+  presentation?: "operational" | "expressive";
   description?: React.ReactNode;
   /** Canonical action slot. If supplied (even null), takes precedence over action. */
   actions?: React.ReactNode;

package/dist/primitives/page-header.js

@@ -4,14 +4,14 @@ 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 PageHeader = React.forwardRef(({ className, presentation, 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),
+		className: cn(presentation === "expressive" ? "tangle-intro" : presentation === "operational" ? "tangle-page-header" : "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",
+			className: presentation ? "tangle-page-header-main" : "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: [
@@ -22,18 +22,19 @@ const PageHeader = React.forwardRef(({ className, title, description, actions, a
 					}),
 					/* @__PURE__ */ jsx(Heading, {
 						id: titleId,
-						variant: level === 1 ? "page" : "section",
+						variant: presentation === "expressive" ? "display" : level === 1 ? "page" : "section",
+						presentation,
 						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]",
+						className: presentation === "expressive" ? "tangle-intro-description" : presentation ? "tangle-page-description" : "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",
+				className: presentation === "expressive" ? "tangle-intro-actions" : "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", {

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

@@ -1,7 +1,13 @@
 import { ReactNode } from "react";
 //#region src/primitives/page-shell.d.ts
 export interface PageShellProps {
-  children: ReactNode;
+  children?: ReactNode;
+  /** Optional reading layout. Content, routing and navigation interaction stay caller-owned. */
+  navigation?: ReactNode;
+  article?: ReactNode;
+  outline?: ReactNode;
+  navigationLabel?: string;
+  outlineLabel?: string;
   className?: string;
 }
 /**
@@ -10,5 +16,5 @@ export interface PageShellProps {
  * 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;
+export declare function PageShell({ children, className, navigation, article, outline, navigationLabel, outlineLabel }: PageShellProps): import("react").JSX.Element;
 //#endregion

package/dist/primitives/page-shell.js

@@ -1,5 +1,5 @@
 import { cn } from "../lib/utils.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/page-shell.tsx
 /**
 * Ported from sandbox-ui/src/primitives/page-shell.tsx. An optional bounded
@@ -7,7 +7,26 @@ import { jsx } from "react/jsx-runtime";
 * 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 }) {
+function PageShell({ children, className, navigation, article, outline, navigationLabel = "Sections", outlineLabel = "On this page" }) {
+	if (navigation || article || outline) return /* @__PURE__ */ jsxs("div", {
+		className: cn("tangle-reading-shell", className),
+		children: [
+			navigation && /* @__PURE__ */ jsx("nav", {
+				"aria-label": navigationLabel,
+				className: "tangle-reading-nav",
+				children: navigation
+			}),
+			/* @__PURE__ */ jsx("article", {
+				className: "tangle-reading-article",
+				children: article ?? children
+			}),
+			outline && /* @__PURE__ */ jsx("aside", {
+				"aria-label": outlineLabel,
+				className: "tangle-reading-outline",
+				children: outline
+			})
+		]
+	});
 	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

package/dist/primitives/pagination.js

@@ -1,5 +1,5 @@
 import { cn } from "../lib/utils.js";
-import { buttonVariants } from "./button.js";
+import { buttonVariants } from "../presentation.js";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";

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

@@ -24,9 +24,12 @@ import * as React from "react";
  *   - Every label keeps one weight. Selection is colour plus surface or
  *     underline, so changing the value never reflows the row.
  *
- * The tabs variant scrolls sideways when its options outgrow the row: the
- * selected tab is kept in view, and a faded edge shows that more tabs sit
- * past it.
+ * When the options outgrow the row they scroll sideways (the tabs variant
+ * always can; the row variant can when a host gives it `flex-nowrap
+ * overflow-x-auto`). A chevron button pinned to each edge with options past it
+ * shows that the strip scrolls and pages it on click or tap; touch and
+ * trackpad scroll it natively, and arrow keys move the selection, which is
+ * kept fully in view clear of the chevrons.
  */
 export interface SegmentedControlOption<T extends string = string> {
   value: T;