themelia-react-ui 2.0.0 → 2.0.2

package/dist/workspace-Cdrg7k9f.js

@@ -0,0 +1,408 @@
+"use client";
+import { useStrings as e } from "./lib/strings.js";
+import { t } from "./utils-BRhFDwuU.js";
+import { n } from "./buttons-DPZekJFu.js";
+import { c as r, o as i, s as a } from "./typography-UTnveOEy.js";
+import { t as o } from "./focus-recipes-B653VaLq.js";
+import { t as s } from "./structure-BmisBK-3.js";
+import { i as c } from "./tone-recipes-BPsRAvhu.js";
+import { t as l } from "./progress-B1VnCT0K.js";
+import { t as u } from "./interaction-recipes-XR9ZpVYL.js";
+import { _ as d, g as f } from "./primitives-BFK08r9M.js";
+import { t as p } from "./badge-HpFqoqSY.js";
+import { c as m, i as h, n as g, o as _, r as v, t as y, u as b } from "./item-K5_ghvze.js";
+import { n as x, t as S } from "./page-header-commands-DOb6WsfD.js";
+import { d as C } from "./hooks-Dkz0K2WT.js";
+import * as w from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { Check as O, Circle as k, CircleAlert as A } from "lucide-react";
+//#region src/components/layout/workspace/workspace.strings.ts
+var j = {
+	metadataLabel: "Record metadata",
+	actionsLabel: "Record actions",
+	secondaryActionsLabel: "Secondary actions"
+}, M = {
+	ariaLabel: "Workspace navigation",
+	completionLabel: (e) => `${e}% complete`,
+	currentLabel: "Current"
+}, N = {
+	ariaLabel: "Workspace locales",
+	activeLabel: "Active",
+	completionLabel: (e) => `${e}% complete`
+}, P = {
+	default: "[--workspace-content-max-width:58rem]",
+	wide: "[--workspace-content-max-width:86rem]",
+	full: "[--workspace-content-max-width:none]"
+}, F = {
+	complete: O,
+	current: k,
+	attention: A,
+	disabled: k,
+	idle: k
+}, I = {
+	complete: "text-success",
+	current: "text-primary-accent",
+	attention: "text-warning-accent",
+	disabled: "text-muted-foreground opacity-50",
+	idle: "text-muted-foreground"
+};
+function L(e) {
+	return Number.isFinite(e) ? Math.min(100, Math.max(0, Math.round(e))) : 0;
+}
+function R({ icon: e, className: t }) {
+	return e ? /* @__PURE__ */ E(e, {
+		className: t,
+		"aria-hidden": "true"
+	}) : null;
+}
+function z(e, t) {
+	return e.disabled ? "disabled" : e.status ? e.status : e.warning ? "attention" : t ? "current" : e.completion !== void 0 && L(e.completion) >= 100 ? "complete" : "idle";
+}
+var B = w.forwardRef(function({ header: e, sidebar: n, rail: r, children: i, contentWidth: a = "wide", className: s, headerClassName: c, bodyClassName: l, sidebarClassName: u, mainClassName: d, contentClassName: f, railClassName: p, ariaLabel: m, style: h, ...g }, _) {
+	let v = !!n, y = !!r;
+	return /* @__PURE__ */ D("div", {
+		ref: _,
+		"aria-label": m,
+		className: t("workspace-layout--component @container/workspace-layout box-border flex h-full min-h-0 w-full flex-col overflow-y-auto overscroll-contain rounded-radius border border-border bg-background text-foreground", "[--workspace-sidebar-width:var(--shell-sidebar-width)] [--workspace-rail-width:20rem]", P[a], s),
+		style: h,
+		...g,
+		children: [!!e && /* @__PURE__ */ E("header", {
+			className: t("workspace-layout--header shrink-0 border-b border-border bg-background", c),
+			children: e
+		}), /* @__PURE__ */ D("div", {
+			className: t("workspace-layout--body grid min-h-0 flex-none grid-cols-1 bg-muted/30 @min-[80rem]/workspace-layout:flex-1", v && !y && "@min-[80rem]/workspace-layout:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)]", v && y && "@min-[80rem]/workspace-layout:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)] @min-[96rem]/workspace-layout:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)_var(--workspace-rail-width)]", !v && y && "@min-[96rem]/workspace-layout:grid-cols-[minmax(0,1fr)_var(--workspace-rail-width)]", l),
+			children: [
+				!!v && /* @__PURE__ */ E("aside", {
+					className: t("workspace-layout--sidebar hidden min-h-0 border-r border-border bg-background @min-[80rem]/workspace-layout:block", u),
+					children: /* @__PURE__ */ E("div", {
+						className: "h-full overflow-y-auto overscroll-contain p-space-lg",
+						children: n
+					})
+				}),
+				/* @__PURE__ */ E("main", {
+					tabIndex: 0,
+					className: t(`workspace-layout--main min-h-0 min-w-0 overflow-visible @min-[80rem]/workspace-layout:overflow-y-auto overscroll-contain focus-visible:outline-none ${o.inset}`, d),
+					children: /* @__PURE__ */ E("div", {
+						className: t("workspace-layout--content box-border mx-auto flex min-h-full w-full max-w-[var(--workspace-content-max-width)] flex-col gap-space-xl p-surface-lg", a === "full" && "max-w-none", f),
+						children: i
+					})
+				}),
+				!!y && /* @__PURE__ */ E("aside", {
+					className: t("workspace-layout--rail hidden min-h-0 border-l border-border bg-background @min-[96rem]/workspace-layout:block", p),
+					children: /* @__PURE__ */ E("div", {
+						className: "h-full overflow-y-auto overscroll-contain p-space-lg",
+						children: r
+					})
+				})
+			]
+		})]
+	});
+});
+B.displayName = "WorkspaceLayout";
+function V(e) {
+	return Array.isArray(e) && e.every((e) => typeof e == "object" && !!e && !w.isValidElement(e) && "label" in e);
+}
+var H = w.forwardRef(function({ title: n, description: o, textGap: c = "dense", badges: l, metadata: u, actions: f, primaryAction: p, secondaryActions: m, moreActionsLabel: h = "More actions", renderLink: g, status: _, media: v, headerEnd: y, titleSlot: b, className: w, strings: T, ...O }, k) {
+	let A = e(j, T), M = C({ renderLink: g }), N = !!u?.length, P = V(m) ? m : void 0, F = P ? void 0 : m, I = x(p, P);
+	return /* @__PURE__ */ D(s, {
+		ref: k,
+		direction: "horizontal",
+		gap: "xl",
+		align: "start",
+		justify: "between",
+		wrap: !0,
+		className: t("workspace-record-header--component p-surface-lg", w),
+		...O,
+		children: [/* @__PURE__ */ D(s, {
+			gap: c,
+			className: "workspace-record-header--identity min-w-0 max-w-full flex-1 basis-64",
+			children: [
+				/* @__PURE__ */ D(s, {
+					direction: "horizontal",
+					gap: "lg",
+					align: "center",
+					wrap: !1,
+					children: [!!v && /* @__PURE__ */ E("div", {
+						className: "workspace-record-header--media flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-inner border border-border bg-muted/30",
+						children: v
+					}), /* @__PURE__ */ D(s, {
+						direction: "horizontal",
+						gap: "md",
+						className: "workspace-record-header--title-row min-w-0 flex-1",
+						children: [
+							b ?? /* @__PURE__ */ E(a, {
+								tag: "h4",
+								className: "[overflow-wrap:anywhere]",
+								children: n
+							}),
+							!!l && /* @__PURE__ */ E(s, {
+								direction: "horizontal",
+								wrap: !0,
+								align: "center",
+								gap: "sm",
+								className: "workspace-record-header--badges",
+								children: l
+							}),
+							!!_ && /* @__PURE__ */ E("div", {
+								className: "workspace-record-header--status",
+								children: _
+							})
+						]
+					})]
+				}),
+				!!o && /* @__PURE__ */ E(r, {
+					type: "secondary",
+					lineHeight: "relaxed",
+					className: "workspace-record-header--description max-w-4xl",
+					children: o
+				}),
+				!!N && /* @__PURE__ */ E("div", {
+					"aria-label": A.metadataLabel,
+					className: "workspace-record-header--metadata flex flex-wrap items-center gap-x-space-xl gap-y-space-xs",
+					children: u.map((e, t) => /* @__PURE__ */ D("div", {
+						className: "flex items-baseline gap-space-sm",
+						children: [/* @__PURE__ */ E(i, { children: e.label }), /* @__PURE__ */ E(d, {
+							className: "tabular-nums",
+							children: e.value
+						})]
+					}, e.id ?? t))
+				})
+			]
+		}), !!(f || F || I || y) && /* @__PURE__ */ D("div", {
+			className: "workspace-record-header--actions flex max-w-full shrink-0 flex-wrap items-center gap-space-md justify-end",
+			children: [
+				!!F && /* @__PURE__ */ E(s, {
+					direction: "horizontal",
+					wrap: !0,
+					align: "center",
+					gap: "sm",
+					"aria-label": A.secondaryActionsLabel,
+					children: F
+				}),
+				!!f && /* @__PURE__ */ E(s, {
+					direction: "horizontal",
+					wrap: !0,
+					align: "center",
+					gap: "sm",
+					"aria-label": A.actionsLabel,
+					children: f
+				}),
+				I && /* @__PURE__ */ E(S, {
+					primaryAction: p,
+					secondaryActions: P,
+					moreActionsLabel: h,
+					renderLink: M
+				}),
+				!!y && /* @__PURE__ */ E("div", {
+					className: "workspace-record-header--end",
+					children: y
+				})
+			]
+		})]
+	});
+});
+H.displayName = "WorkspaceRecordHeader";
+var U = w.forwardRef(function({ groups: n, activeId: a, onSelect: o, renderItem: d, footerSlot: p, renderLink: x, className: S, strings: O, ...k }, A) {
+	let j = e(M, O), N = C({ renderLink: x });
+	return /* @__PURE__ */ D(s, {
+		render: /* @__PURE__ */ E("nav", {
+			ref: A,
+			"aria-label": k["aria-label"] ?? j.ariaLabel,
+			...k
+		}),
+		gap: "xl",
+		className: t("workspace-nav--component h-full", S),
+		children: [/* @__PURE__ */ E(s, {
+			gap: "xl",
+			className: "workspace-nav--groups min-h-0 flex-1",
+			children: n.map((e) => /* @__PURE__ */ D(s, {
+				gap: "md",
+				className: "workspace-nav--group",
+				children: [!!e.label && /* @__PURE__ */ D(s, {
+					gap: "dense",
+					className: "workspace-nav--group-header px-space-xs",
+					children: [/* @__PURE__ */ E(i, { children: e.label }), !!e.description && /* @__PURE__ */ E(r, {
+						size: "xs",
+						type: "secondary",
+						children: e.description
+					})]
+				}), /* @__PURE__ */ E(_, {
+					className: "workspace-nav--items gap-space-xs",
+					children: e.items.map((n, i) => {
+						let s = n.id === a, p = z(n, s), _ = F[p], x = n.completion === void 0 ? void 0 : L(n.completion), S = (e) => {
+							if (n.disabled) {
+								e.preventDefault();
+								return;
+							}
+							o?.(n);
+						}, C = {
+							active: s,
+							group: e,
+							index: i,
+							onSelect: S
+						};
+						if (d) return /* @__PURE__ */ E(w.Fragment, { children: d(n, C) }, n.id);
+						let O = /* @__PURE__ */ D(T, { children: [
+							/* @__PURE__ */ E(m, {
+								variant: "icon",
+								className: t(s && "text-accent-foreground"),
+								children: n.icon ? /* @__PURE__ */ E(R, {
+									icon: n.icon,
+									className: "size-icon"
+								}) : /* @__PURE__ */ E(_, {
+									className: t("size-icon-md", I[p]),
+									"aria-hidden": "true"
+								})
+							}),
+							/* @__PURE__ */ D(v, { children: [
+								/* @__PURE__ */ D("div", {
+									className: "flex items-center gap-space-sm",
+									children: [/* @__PURE__ */ E(b, { children: n.label }), s && /* @__PURE__ */ E(r, {
+										tag: "span",
+										size: "inherit",
+										className: "sr-only",
+										children: j.currentLabel
+									})]
+								}),
+								!!n.description && /* @__PURE__ */ E(h, {
+									clamp: 2,
+									children: n.description
+								}),
+								x !== void 0 && /* @__PURE__ */ D("div", {
+									className: "mt-1.5 flex items-center gap-space-md",
+									children: [/* @__PURE__ */ E(l, {
+										value: x,
+										size: "sm",
+										"aria-label": j.completionLabel(x),
+										className: "flex-1"
+									}), /* @__PURE__ */ E(f, {
+										size: "xs",
+										className: "tabular-nums",
+										children: j.completionLabel(x)
+									})]
+								})
+							] }),
+							!!n.badge && /* @__PURE__ */ E(g, { children: n.badge })
+						] }), k = t("workspace-nav--item w-full border border-transparent px-row-x py-row-y text-left transition-colors", s && u.rowCurrent, n.warning && !s && t(c.warning.edge, c.warning.wash), n.disabled && "pointer-events-none opacity-50");
+						if (n.href) {
+							let e = N({
+								href: n.href,
+								children: O,
+								className: "block",
+								active: s,
+								disabled: n.disabled,
+								external: n.external,
+								target: n.target,
+								rel: n.rel,
+								onClick: S
+							});
+							return /* @__PURE__ */ E(y, {
+								size: "md",
+								render: e,
+								className: k,
+								children: O
+							}, n.id);
+						}
+						return /* @__PURE__ */ E(y, {
+							size: "md",
+							render: /* @__PURE__ */ E("button", {
+								type: "button",
+								onClick: S,
+								disabled: n.disabled
+							}),
+							className: k,
+							children: O
+						}, n.id);
+					})
+				})]
+			}, e.id))
+		}), !!p && /* @__PURE__ */ E("div", {
+			className: "workspace-nav--footer shrink-0 border-t border-border pt-space-lg",
+			children: p
+		})]
+	});
+});
+U.displayName = "WorkspaceNav";
+var W = w.forwardRef(function({ locales: i, activeLocale: a, onLocaleChange: o, actions: c, status: l, className: u, strings: d, ...f }, m) {
+	let h = e(N, d), g = (e) => {
+		e.disabled || o?.(e);
+	};
+	return /* @__PURE__ */ D("div", {
+		ref: m,
+		className: t("workspace-locale-strip--component flex flex-col gap-space-lg border-t border-border bg-muted/50 px-surface-lg py-surface min-[64rem]:flex-row min-[64rem]:items-center min-[64rem]:justify-between", u),
+		...f,
+		children: [/* @__PURE__ */ E(s, {
+			direction: "horizontal",
+			wrap: !0,
+			align: "center",
+			gap: "md",
+			className: "workspace-locale-strip--locales min-w-0",
+			role: "group",
+			"aria-label": h.ariaLabel,
+			children: i.map((e) => {
+				let i = e.id === a, o = e.completion === void 0 ? void 0 : L(e.completion);
+				return /* @__PURE__ */ E(n, {
+					type: "button",
+					tone: i ? "primary" : "secondary",
+					buttonStyle: i ? "solid" : "ghost",
+					onClick: () => g(e),
+					disabled: e.disabled,
+					"aria-pressed": i,
+					className: t("workspace-locale-strip--item justify-start"),
+					children: /* @__PURE__ */ D(s, {
+						direction: "horizontal",
+						align: "center",
+						gap: "md",
+						render: /* @__PURE__ */ E("span", {}),
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ E(r, {
+								tag: "span",
+								size: "inherit",
+								className: "truncate text-inherit",
+								children: e.label
+							}),
+							i && /* @__PURE__ */ E(r, {
+								tag: "span",
+								size: "inherit",
+								className: "sr-only",
+								children: h.activeLabel
+							}),
+							o !== void 0 && /* @__PURE__ */ E(p, {
+								tone: o >= 100 ? "success" : "secondary",
+								className: t("shrink-0", i && "border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground"),
+								children: h.completionLabel(o)
+							}),
+							!!e.status && /* @__PURE__ */ E("span", {
+								className: "shrink-0",
+								children: e.status
+							})
+						]
+					})
+				}, e.id);
+			})
+		}), !!(l || c) && /* @__PURE__ */ D(s, {
+			direction: "horizontal",
+			wrap: !0,
+			align: "center",
+			gap: "md",
+			className: "workspace-locale-strip--actions shrink-0",
+			children: [!!l && /* @__PURE__ */ E("div", {
+				className: "workspace-locale-strip--status",
+				children: l
+			}), !!c && /* @__PURE__ */ E(s, {
+				direction: "horizontal",
+				wrap: !0,
+				align: "center",
+				gap: "sm",
+				className: "",
+				children: c
+			})]
+		})]
+	});
+});
+W.displayName = "WorkspaceLocaleStrip";
+//#endregion
+export { N as a, H as i, W as n, M as o, U as r, j as s, B as t };
+
+//# sourceMappingURL=workspace-Cdrg7k9f.js.map

package/dist/workspace-Cdrg7k9f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-Cdrg7k9f.js","names":["Icon","React","_Fragment","Text","DisplayLabel","Heading","focusRecipes","Stack","toneRecipes","Progress","interactionRecipes","Value","SecondaryValue","Badge","ItemMedia","ItemDescription","ItemActions","ItemGroup","ItemContent","Item","ItemTitle","hasPageHeaderCommands","PageHeaderCommands","useLayoutLinkRenderer","React$1","Fragment$1","defaultWorkspaceRecordHeaderStrings","defaultWorkspaceNavStrings","value","defaultWorkspaceLocaleStripStrings","CONTENT_WIDTH_CLASS","STATUS_ICON","Check","Circle","CircleAlert","STATUS_CLASS","clampPercent","DynamicWorkspaceIcon","icon","getStatus","item","active","WorkspaceLayout","props","hasSidebar","sidebar","hasRail","rail","ariaLabel","cn","contentWidth","className","header","headerClassName","bodyClassName","sidebarClassName","mainClassName","contentClassName","railClassName","isCommandList","WorkspaceRecordHeader","stringsProp","strings","useStrings","resolvedRenderLink","hasMetadata","metadata","secondaryCommands","secondaryActions","secondaryNodes","hasCommands","primaryAction","textGap","media","titleSlot","title","badges","status","description","index","actions","headerEnd","WorkspaceNav","groups","group","activeId","StatusIcon","completion","handleSelect","context","renderItem","rowContent","itemClassName","linkNode","footerSlot","WorkspaceLocaleStrip","handleLocaleClick","locale","onLocaleChange","locales","activeLocale","Button"],"sources":["../src/components/layout/workspace/workspace.strings.ts","../src/components/layout/workspace/workspace.tsx"],"sourcesContent":["export interface WorkspaceRecordHeaderStrings {\n\tmetadataLabel: string;\n\tactionsLabel: string;\n\tsecondaryActionsLabel: string;\n}\n\nexport const defaultWorkspaceRecordHeaderStrings: WorkspaceRecordHeaderStrings = {\n\tmetadataLabel: 'Record metadata',\n\tactionsLabel: 'Record actions',\n\tsecondaryActionsLabel: 'Secondary actions',\n};\n\nexport interface WorkspaceNavStrings {\n\tariaLabel: string;\n\tcompletionLabel: (value: number) => string;\n\tcurrentLabel: string;\n}\n\nexport const defaultWorkspaceNavStrings: WorkspaceNavStrings = {\n\tariaLabel: 'Workspace navigation',\n\tcompletionLabel: (value) => `${value}% complete`,\n\tcurrentLabel: 'Current',\n};\n\nexport interface WorkspaceLocaleStripStrings {\n\tariaLabel: string;\n\tactiveLabel: string;\n\tcompletionLabel: (value: number) => string;\n}\n\nexport const defaultWorkspaceLocaleStripStrings: WorkspaceLocaleStripStrings = {\n\tariaLabel: 'Workspace locales',\n\tactiveLabel: 'Active',\n\tcompletionLabel: (value) => `${value}% complete`,\n};\n","import * as React from 'react';\nimport {\n\tCheck,\n\tCircle,\n\tCircleAlert,\n\ttype LucideIcon,\n\t} from 'lucide-react';\n\nimport { Badge } from '../../base/badge';\nimport { Button } from '../../base/buttons';\nimport { Progress } from '../../base/feedback';\nimport {\n\tItem,\n\tItemActions,\n\tItemContent,\n\tItemDescription,\n\tItemGroup,\n\tItemMedia,\n\tItemTitle,\n} from '../../base/item';\nimport { Stack } from '../../base/structure';\nimport { SecondaryValue, Value } from '../../primitives';\nimport { DisplayLabel, Heading, Text } from '../../typography';\nimport { useStrings } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nimport { hasPageHeaderCommands, PageHeaderCommands, type PageHeaderAction } from '../../base/navigation/page-header/page-header-commands';\nimport { useLayoutLinkRenderer } from '../hooks';\nimport type { LayoutIconComponent } from '../layout.types';\nimport {\n\tdefaultWorkspaceLocaleStripStrings,\n\tdefaultWorkspaceNavStrings,\n\tdefaultWorkspaceRecordHeaderStrings,\n} from './workspace.strings';\nimport type {\n\tWorkspaceContentWidth,\n\tWorkspaceLayoutProps,\n\tWorkspaceLocaleItem,\n\tWorkspaceLocaleStripProps,\n\tWorkspaceNavItem,\n\tWorkspaceNavItemStatus,\n\tWorkspaceNavProps,\n\tWorkspaceRecordHeaderProps,\n} from './workspace.types';\nimport { focusRecipes } from '../../../lib/focus-recipes';\nimport { interactionRecipes } from '../../../lib/interaction-recipes';\nimport { toneRecipes } from '../../../lib/tone-recipes';\n\nconst CONTENT_WIDTH_CLASS: Record<WorkspaceContentWidth, string> = {\n\tdefault: '[--workspace-content-max-width:58rem]',\n\twide: '[--workspace-content-max-width:86rem]',\n\tfull: '[--workspace-content-max-width:none]',\n};\n\nconst STATUS_ICON: Record<WorkspaceNavItemStatus, LucideIcon> = {\n\tcomplete: Check,\n\tcurrent: Circle,\n\tattention: CircleAlert,\n\tdisabled: Circle,\n\tidle: Circle,\n};\n\nconst STATUS_CLASS: Record<WorkspaceNavItemStatus, string> = {\n\tcomplete: 'text-success',\n\tcurrent: 'text-primary-accent',\n\tattention: 'text-warning-accent',\n\t// Disabled dims like every disabled control rather than adding a fainter text tier.\n\tdisabled: 'text-muted-foreground opacity-50',\n\tidle: 'text-muted-foreground',\n};\n\nfunction clampPercent(value: number): number {\n\tif (!Number.isFinite(value)) return 0;\n\treturn Math.min(100, Math.max(0, Math.round(value)));\n}\n\nfunction DynamicWorkspaceIcon({\n\ticon,\n\tclassName,\n}: {\n\t/** Leading glyph. */\n\ticon?: LayoutIconComponent;\n\tclassName?: string;\n}) {\n\tif (!icon) return null;\n\tconst Icon = icon;\n\treturn <Icon className={className} aria-hidden=\"true\" />;\n}\n\nfunction getStatus(item: WorkspaceNavItem, active: boolean): WorkspaceNavItemStatus {\n\tif (item.disabled) return 'disabled';\n\tif (item.status) return item.status;\n\tif (item.warning) return 'attention';\n\tif (active) return 'current';\n\tif (item.completion !== undefined && clampPercent(item.completion) >= 100) return 'complete';\n\treturn 'idle';\n}\n\nexport const WorkspaceLayout = React.forwardRef<HTMLDivElement, WorkspaceLayoutProps>(function WorkspaceLayout({\n\theader,\n\tsidebar,\n\trail,\n\tchildren,\n\tcontentWidth = 'wide',\n\tclassName,\n\theaderClassName,\n\tbodyClassName,\n\tsidebarClassName,\n\tmainClassName,\n\tcontentClassName,\n\trailClassName,\n\tariaLabel,\n\tstyle,\n\t...props\n}, ref) {\n\tconst hasSidebar = !!sidebar;\n\tconst hasRail = !!rail;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(\n\t\t\t\t'workspace-layout--component @container/workspace-layout box-border flex h-full min-h-0 w-full flex-col overflow-y-auto overscroll-contain rounded-radius border border-border bg-background text-foreground',\n\t\t\t\t'[--workspace-sidebar-width:var(--shell-sidebar-width)] [--workspace-rail-width:20rem]',\n\t\t\t\tCONTENT_WIDTH_CLASS[contentWidth],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={style}\n\t\t\t{...props}\n\t\t>\n\t\t\t{!!header && (\n\t\t\t\t<header className={cn('workspace-layout--header shrink-0 border-b border-border bg-background', headerClassName)}>\n\t\t\t\t\t{header}\n\t\t\t\t</header>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'workspace-layout--body grid min-h-0 flex-none grid-cols-1 bg-muted/30 @min-[80rem]/workspace-layout:flex-1',\n\t\t\t\t\thasSidebar && !hasRail && '@min-[80rem]/workspace-layout:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)]',\n\t\t\t\t\thasSidebar && hasRail && '@min-[80rem]/workspace-layout:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)] @min-[96rem]/workspace-layout:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)_var(--workspace-rail-width)]',\n\t\t\t\t\t!hasSidebar && hasRail && '@min-[96rem]/workspace-layout:grid-cols-[minmax(0,1fr)_var(--workspace-rail-width)]',\n\t\t\t\t\tbodyClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{!!hasSidebar && (\n\t\t\t\t\t<aside\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'workspace-layout--sidebar hidden min-h-0 border-r border-border bg-background @min-[80rem]/workspace-layout:block',\n\t\t\t\t\t\t\tsidebarClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"h-full overflow-y-auto overscroll-contain p-space-lg\">\n\t\t\t\t\t\t\t{sidebar}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</aside>\n\t\t\t\t)}\n\t\t\t\t<main\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t`workspace-layout--main min-h-0 min-w-0 overflow-visible @min-[80rem]/workspace-layout:overflow-y-auto overscroll-contain focus-visible:outline-none ${focusRecipes.inset}`,\n\t\t\t\t\t\tmainClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'workspace-layout--content box-border mx-auto flex min-h-full w-full max-w-[var(--workspace-content-max-width)] flex-col gap-space-xl p-surface-lg',\n\t\t\t\t\t\t\tcontentWidth === 'full' && 'max-w-none',\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</main>\n\t\t\t\t{!!hasRail && (\n\t\t\t\t\t<aside\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'workspace-layout--rail hidden min-h-0 border-l border-border bg-background @min-[96rem]/workspace-layout:block',\n\t\t\t\t\t\t\trailClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"h-full overflow-y-auto overscroll-contain p-space-lg\">\n\t\t\t\t\t\t\t{rail}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</aside>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nWorkspaceLayout.displayName = 'WorkspaceLayout';\n\n/** Role-based command objects rather than rendered elements. */\nfunction isCommandList(value: unknown): value is readonly PageHeaderAction[] {\n\treturn Array.isArray(value) && value.every((item) =>\n\t\titem !== null && typeof item === 'object' && !React.isValidElement(item) && 'label' in item);\n}\n\nexport const WorkspaceRecordHeader = React.forwardRef<HTMLDivElement, WorkspaceRecordHeaderProps>(function WorkspaceRecordHeader({\n\ttitle,\n\tdescription,\n\ttextGap = 'dense',\n\tbadges,\n\tmetadata,\n\tactions,\n\tprimaryAction,\n\tsecondaryActions,\n\tmoreActionsLabel = 'More actions',\n\trenderLink,\n\tstatus,\n\tmedia,\n\theaderEnd,\n\ttitleSlot,\n\tclassName,\n\tstrings: stringsProp,\n\t...props\n}, ref) {\n\tconst strings = useStrings(defaultWorkspaceRecordHeaderStrings, stringsProp);\n\tconst resolvedRenderLink = useLayoutLinkRenderer({ renderLink });\n\tconst hasMetadata = !!metadata?.length;\n\t// Command objects take the shared role-based row; elements keep the\n\t// previous free-form cluster.\n\tconst secondaryCommands = isCommandList(secondaryActions) ? secondaryActions : undefined;\n\tconst secondaryNodes = secondaryCommands ? undefined : (secondaryActions as React.ReactNode);\n\tconst hasCommands = hasPageHeaderCommands(primaryAction, secondaryCommands);\n\n\treturn (\n\t\t<Stack\n\t\t\tref={ref}\n\t\t\tdirection=\"horizontal\"\n\t\t\tgap=\"xl\"\n\t\t\talign=\"start\"\n\t\t\tjustify=\"between\"\n\t\t\twrap\n\t\t\tclassName={cn(\n\t\t\t\t'workspace-record-header--component p-surface-lg',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t\t<Stack gap={textGap} className=\"workspace-record-header--identity min-w-0 max-w-full flex-1 basis-64\">\n\t\t\t\t\t<Stack direction=\"horizontal\" gap=\"lg\" align=\"center\" wrap={false}>\n\t\t\t\t{!!media && (\n\t\t\t\t\t<div className=\"workspace-record-header--media flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-inner border border-border bg-muted/30\">\n\t\t\t\t\t\t{media}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t\t\t<Stack direction=\"horizontal\" gap=\"md\" className=\"workspace-record-header--title-row min-w-0 flex-1\">\n\t\t\t\t\t\t{titleSlot ?? (\n\t\t\t\t\t\t\t<Heading tag=\"h4\" className=\"[overflow-wrap:anywhere]\">\n\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{!!badges && <Stack direction=\"horizontal\" wrap align=\"center\" gap=\"sm\" className=\"workspace-record-header--badges\">{badges}</Stack>}\n\t\t\t\t\t\t\t{!!status && <div className=\"workspace-record-header--status\">{status}</div>}\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t\t{!!description && (\n\t\t\t\t\t\t<Text type=\"secondary\" lineHeight=\"relaxed\" className=\"workspace-record-header--description max-w-4xl\">\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!hasMetadata && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\taria-label={strings.metadataLabel}\n\t\t\t\t\t\t\tclassName=\"workspace-record-header--metadata flex flex-wrap items-center gap-x-space-xl gap-y-space-xs\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{metadata.map((item, index) => (\n\t\t\t\t\t\t\t\t<div key={item.id ?? index} className=\"flex items-baseline gap-space-sm\">\n\t\t\t\t\t\t\t\t\t<DisplayLabel>\n\t\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t\t</DisplayLabel>\n\t\t\t\t\t\t\t\t\t<Value className=\"tabular-nums\">\n\t\t\t\t\t\t\t\t\t\t{item.value}\n\t\t\t\t\t\t\t\t\t</Value>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</Stack>\n\t\t\t{!!(actions || secondaryNodes || hasCommands || headerEnd) && (\n\t\t\t\t<div className=\"workspace-record-header--actions flex max-w-full shrink-0 flex-wrap items-center gap-space-md justify-end\">\n\t\t\t\t\t{!!secondaryNodes && (\n\t\t\t\t\t\t<Stack direction=\"horizontal\" wrap align=\"center\" gap=\"sm\" aria-label={strings.secondaryActionsLabel}>\n\t\t\t\t\t\t\t{secondaryNodes}\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!actions && (\n\t\t\t\t\t\t<Stack direction=\"horizontal\" wrap align=\"center\" gap=\"sm\" aria-label={strings.actionsLabel}>\n\t\t\t\t\t\t\t{actions}\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t)}\n\t\t\t\t\t{hasCommands && (\n\t\t\t\t\t\t<PageHeaderCommands\n\t\t\t\t\t\t\tprimaryAction={primaryAction}\n\t\t\t\t\t\t\tsecondaryActions={secondaryCommands}\n\t\t\t\t\t\t\tmoreActionsLabel={moreActionsLabel}\n\t\t\t\t\t\t\trenderLink={resolvedRenderLink}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!headerEnd && <div className=\"workspace-record-header--end\">{headerEnd}</div>}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Stack>\n\t);\n});\n\nWorkspaceRecordHeader.displayName = 'WorkspaceRecordHeader';\n\nexport const WorkspaceNav = React.forwardRef<HTMLElement, WorkspaceNavProps>(function WorkspaceNav({\n\tgroups,\n\tactiveId,\n\tonSelect,\n\trenderItem,\n\tfooterSlot,\n\trenderLink,\n\tclassName,\n\tstrings: stringsProp,\n\t...props\n}, ref) {\n\tconst strings = useStrings(defaultWorkspaceNavStrings, stringsProp);\n\tconst resolvedRenderLink = useLayoutLinkRenderer({ renderLink });\n\n\treturn (\n\t\t<Stack\n\t\t\trender={(\n\t\t\t\t<nav\n\t\t\t\t\tref={ref}\n\t\t\t\t\taria-label={props['aria-label'] ?? strings.ariaLabel}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\tgap=\"xl\"\n\t\t\tclassName={cn('workspace-nav--component h-full', className)}\n\t\t>\n\t\t\t<Stack gap=\"xl\" className=\"workspace-nav--groups min-h-0 flex-1\">\n\t\t\t\t{groups.map((group) => (\n\t\t\t\t\t<Stack key={group.id} gap=\"md\" className=\"workspace-nav--group\">\n\t\t\t\t\t\t{!!group.label && (\n\t\t\t\t\t\t\t<Stack gap=\"dense\" className=\"workspace-nav--group-header px-space-xs\">\n\t\t\t\t\t\t\t\t<DisplayLabel>\n\t\t\t\t\t\t\t\t\t{group.label}\n\t\t\t\t\t\t\t\t</DisplayLabel>\n\t\t\t\t\t\t\t\t{!!group.description && (\n\t\t\t\t\t\t\t\t\t<Text size=\"xs\" type=\"secondary\">\n\t\t\t\t\t\t\t\t\t\t{group.description}\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<ItemGroup className=\"workspace-nav--items gap-space-xs\">\n\t\t\t\t\t\t\t{group.items.map((item, index) => {\n\t\t\t\t\t\t\t\tconst active = item.id === activeId;\n\t\t\t\t\t\t\t\tconst status = getStatus(item, active);\n\t\t\t\t\t\t\t\tconst StatusIcon = STATUS_ICON[status];\n\t\t\t\t\t\t\t\tconst completion = item.completion === undefined ? undefined : clampPercent(item.completion);\n\t\t\t\t\t\t\t\tconst handleSelect = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\t\t\t\t\t\t\tif (item.disabled) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect?.(item);\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tconst context = { active, group, index, onSelect: handleSelect };\n\n\t\t\t\t\t\t\t\tif (renderItem) {\n\t\t\t\t\t\t\t\t\treturn <React.Fragment key={item.id}>{renderItem(item, context)}</React.Fragment>;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tconst rowContent = (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<ItemMedia variant=\"icon\" className={cn(active && 'text-accent-foreground')}>\n\t\t\t\t\t\t\t\t\t\t\t{item.icon ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<DynamicWorkspaceIcon icon={item.icon} className=\"size-icon\" />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<StatusIcon className={cn('size-icon-md', STATUS_CLASS[status])} aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</ItemMedia>\n\t\t\t\t\t\t\t\t\t\t<ItemContent>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-space-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t<ItemTitle>{item.label}</ItemTitle>\n\t\t\t\t\t\t\t\t\t\t\t\t{active && (\n\t\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" className=\"sr-only\">{strings.currentLabel}</Text>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t{!!item.description && <ItemDescription clamp={2}>{item.description}</ItemDescription>}\n\t\t\t\t\t\t\t\t\t\t\t{completion !== undefined && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"mt-1.5 flex items-center gap-space-md\">\n\t\t\t\t\t\t\t\t\t\t\t<Progress\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={completion}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label={strings.completionLabel(completion)}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex-1\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<SecondaryValue size=\"xs\" className=\"tabular-nums\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{strings.completionLabel(completion)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</SecondaryValue>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</ItemContent>\n\t\t\t\t\t\t\t\t\t\t{!!item.badge && <ItemActions>{item.badge}</ItemActions>}\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tconst itemClassName = cn(\n\t\t\t\t\t\t\t\t\t'workspace-nav--item w-full border border-transparent px-row-x py-row-y text-left transition-colors',\n\t\t\t\t\t\t\t\t\tactive && interactionRecipes.rowCurrent,\n\t\t\t\t\t\t\t\t\titem.warning && !active && cn(toneRecipes.warning.edge, toneRecipes.warning.wash),\n\t\t\t\t\t\t\t\t\titem.disabled && 'pointer-events-none opacity-50',\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif (item.href) {\n\t\t\t\t\t\t\t\t\tconst linkNode = resolvedRenderLink({\n\t\t\t\t\t\t\t\t\t\thref: item.href,\n\t\t\t\t\t\t\t\t\t\tchildren: rowContent,\n\t\t\t\t\t\t\t\t\t\tclassName: 'block',\n\t\t\t\t\t\t\t\t\t\tactive,\n\t\t\t\t\t\t\t\t\t\tdisabled: item.disabled,\n\t\t\t\t\t\t\t\t\t\texternal: item.external,\n\t\t\t\t\t\t\t\t\t\ttarget: item.target,\n\t\t\t\t\t\t\t\t\t\trel: item.rel,\n\t\t\t\t\t\t\t\t\t\tonClick: handleSelect as React.MouseEventHandler<HTMLAnchorElement>,\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<Item key={item.id} size=\"md\" render={linkNode as React.ReactElement} className={itemClassName}>\n\t\t\t\t\t\t\t\t\t\t\t{rowContent}\n\t\t\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\t\t\trender={<button type=\"button\" onClick={handleSelect} disabled={item.disabled} />}\n\t\t\t\t\t\t\t\t\t\tclassName={itemClassName}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{rowContent}\n\t\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</Stack>\n\t\t\t\t))}\n\t\t\t</Stack>\n\t\t\t{!!footerSlot && <div className=\"workspace-nav--footer shrink-0 border-t border-border pt-space-lg\">{footerSlot}</div>}\n\t\t</Stack>\n\t);\n});\n\nWorkspaceNav.displayName = 'WorkspaceNav';\n\nexport const WorkspaceLocaleStrip = React.forwardRef<HTMLDivElement, WorkspaceLocaleStripProps>(function WorkspaceLocaleStrip({\n\tlocales,\n\tactiveLocale,\n\tonLocaleChange,\n\tactions,\n\tstatus,\n\tclassName,\n\tstrings: stringsProp,\n\t...props\n}, ref) {\n\tconst strings = useStrings(defaultWorkspaceLocaleStripStrings, stringsProp);\n\n\tconst handleLocaleClick = (locale: WorkspaceLocaleItem) => {\n\t\tif (locale.disabled) return;\n\t\tonLocaleChange?.(locale);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn('workspace-locale-strip--component flex flex-col gap-space-lg border-t border-border bg-muted/50 px-surface-lg py-surface min-[64rem]:flex-row min-[64rem]:items-center min-[64rem]:justify-between', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Stack direction=\"horizontal\" wrap align=\"center\" gap=\"md\" className=\"workspace-locale-strip--locales min-w-0\" role=\"group\" aria-label={strings.ariaLabel}>\n\t\t\t\t{locales.map((locale) => {\n\t\t\t\t\tconst active = locale.id === activeLocale;\n\t\t\t\t\tconst completion = locale.completion === undefined ? undefined : clampPercent(locale.completion);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={locale.id}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\ttone={active ? 'primary' : 'secondary'}\n\t\t\t\t\t\t\tbuttonStyle={active ? 'solid' : 'ghost'}\n\t\t\t\t\t\t\tonClick={() => handleLocaleClick(locale)}\n\t\t\t\t\t\t\tdisabled={locale.disabled}\n\t\t\t\t\t\t\taria-pressed={active}\n\t\t\t\t\t\t\tclassName={cn('workspace-locale-strip--item justify-start')}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Stack direction=\"horizontal\" align=\"center\" gap=\"md\" render={<span />} className=\"min-w-0\">\n\t\t\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" className=\"truncate text-inherit\">{locale.label}</Text>\n\t\t\t\t\t\t\t{active && <Text tag=\"span\" size=\"inherit\" className=\"sr-only\">{strings.activeLabel}</Text>}\n\t\t\t\t\t\t\t\t{completion !== undefined && (\n\t\t\t\t\t\t\t\t\t/* On an active pill the button surface is solid, so the tonal\n\t\t\t\t\t\t\t\t\t    badge variants land coloured-on-coloured. Derive the nested\n\t\t\t\t\t\t\t\t\t    badge from the primary foreground pair so it remains legible\n\t\t\t\t\t\t\t\t\t    when dark themes intentionally lighten `--primary`. */\n\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\ttone={completion >= 100 ? 'success' : 'secondary'}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'shrink-0',\n\t\t\t\t\t\t\t\t\t\t\tactive && 'border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground',\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{strings.completionLabel(completion)}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{!!locale.status && <span className=\"shrink-0\">{locale.status}</span>}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Stack>\n\t\t\t{!!(status || actions) && (\n\t\t\t\t<Stack direction=\"horizontal\" wrap align=\"center\" gap=\"md\" className=\"workspace-locale-strip--actions shrink-0\">\n\t\t\t\t\t{!!status && <div className=\"workspace-locale-strip--status\">{status}</div>}\n\t\t\t\t\t{!!actions && <Stack direction=\"horizontal\" wrap align=\"center\" gap=\"sm\" className=\"\">{actions}</Stack>}\n\t\t\t\t</Stack>\n\t\t\t)}\n\t\t</div>\n\t);\n});\n\nWorkspaceLocaleStrip.displayName = 'WorkspaceLocaleStrip';\n"],"mappings":"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"}

package/docs/consumer-skill/SKILL.md

@@ -11,15 +11,15 @@ recipe, then adapt the app's data and callbacks. Never infer props from names.
 
 ## House rules
 
-Each rule has an owning prop or component, and the [optional checker](references/review.md) warns on most; depart only for a nameable product reason.
+Each rule has an owning prop or component, and the [composition checker](references/review.md) reports most; depart only for a nameable product reason.
 
 1. Mount `UIProvider` (`themelia-react-ui/ui-provider`) once at the app root; calls inherit its currency, locale, date, density, button, badge and card defaults.
 2. Give every admin route a `Page` (`themelia-react-ui/layout/page`); its title is the route's `h1`, so do not repeat it in the body.
-3. Give commands roles: one `header.primaryAction`, ordered `header.secondaryActions`, `destructive: true` plus `ConfirmDialog`. An untoned `Button` is the neutral outline; give only the main command `tone="primary"` (solid), one per page or surface.
+3. Give commands roles: one `header.primaryAction`, ordered `header.secondaryActions`, `destructive: true` plus `ConfirmDialog`; the header renders `[secondary…] [primary] [⋯]`. Record headers in `features/resource`, `layout/workspace` and `layout/settings` take the same props. A record's sections go in `header.tabs`. An untoned `Button` is the neutral outline; give only the main command `tone="primary"` (solid), one per page or surface.
 4. Space siblings with `Stack`/`Grid` and their semantic `gap` (`themelia-react-ui/base/structure`), not flex divs with gap or margin utilities.
 5. Write copy with `Heading`/`Text`, not raw `h1`–`h6`; show values with `Money`, `Date`, `Number` and `Percent`, and use `useMoneyFormatter()` inside strings.
-6. Color with semantic classes (`bg-muted`, `text-muted-foreground`, `border-border`, status tones); palette classes such as `bg-blue-500` bypass theming and dark mode.
-7. Badges stay neutral unless the status means `success`, `warning`, `destructive` or `info`. Titles, facts and rows get no decorative icons, and gaps, not dividers, separate a card's sections.
+6. Color with semantic classes (`bg-muted`, `text-muted-foreground`, `border-border`, status tones); palette classes such as `bg-blue-500` bypass theming and dark mode. Pair surfaces with their ink and use text roles instead of partial opacity.
+7. Badges stay neutral unless the status means `success`, `warning`, `destructive` or `info`. Titles, facts and rows get no decorative icons. A framed card rules its header and footer by default; gaps, not dividers, separate sections inside its body.
 8. In a Card, badges go in `titleSuffix`, one quick control in `headerAction`, a command list in `actions` and the commit action in `footerSlot`.
 9. Dialogs, confirmations, drawers and sheets come only from `themelia-react-ui/features/overlays` (`ActionDialog`, `ConfirmDialog`, `ActionDrawer` with `useOverlayVisibility`); never hand-roll a modal, import `Dialog`/`Sheet` primitives or add a modal library.
 
@@ -29,7 +29,7 @@ Each rule has an owning prop or component, and the [optional checker](references
 | --- | --- |
 | KPI cards, revenue, trends, comparisons | `themelia-react-ui/blocks/analytics`: `Metric`, `MetricGrid`, `MetricBar`, `MetricComparison`, `MetricGradient`, `MetricMicroGrid`, `ChartCard`, `ActivityHeatmap` |
 | Used/limit quotas and period/retry states | `themelia-react-ui/blocks/analytics/usage-card`: `UsageCard` |
-| Record facts, one plain value, empty regions | `themelia-react-ui/blocks/data-display`: `MetadataList`, `InlineStat`, `EmptyState` |
+| Record facts, one plain value, empty regions | `themelia-react-ui/base/metadata-list`: `MetadataList`; `themelia-react-ui/blocks/data-display`: `InlineStat`, `EmptyState` |
 | Query-driven directory or tabular comparison | `themelia-react-ui/features/data-view`: `DataView`; `themelia-react-ui/features/table`: `DataTable`, `ResourceCell` |
 | Query criteria and facets | `themelia-react-ui/features/filters`: `FilterLayout`, `SelectFacet`, `SearchFacet`, `DateFacet` |
 | Modal action, confirmation, drawer | `themelia-react-ui/features/overlays`: `ActionDialog`, `ConfirmDialog`, `ActionDrawer`, `useOverlayVisibility` |
@@ -37,6 +37,7 @@ Each rule has an owning prop or component, and the [optional checker](references
 | Passive rows, stacks, tracks and spans | `themelia-react-ui/base/structure`: `Stack`, `Grid`, `GridCell`, `AdaptiveGrid`; a row is `Stack direction="horizontal"` |
 | Content measure, sections, main/aside split | `themelia-react-ui/layout/containers`: `Container`, `Section`, `TwoColumnLayout`, `PageViewport` |
 | Application shell, sidebar, route identity | `themelia-react-ui/layout/app-shell`: `AppLayout`; `themelia-react-ui/layout/sidebar`: `AppSidebar`; `themelia-react-ui/layout/page`: `Page` |
+| Record page: status badge, role-based commands, section tabs with counts | `themelia-react-ui/layout/page`: `Page`, `PageHeaderAction`, `PageHeaderTabs`; see the [detail recipe](examples/detail.tsx) |
 | Public website and content sections | `themelia-react-ui/layout/containers`: `Container`, `Section`, `PageViewport` |
 | Task summaries and conversation messages | `themelia-react-ui/blocks/planning`: `TaskCard`; `themelia-react-ui/blocks/collaboration`: `Message`, `MessageBubble` |
 | Timelines, activity, commerce workflows | `themelia-react-ui/blocks/timelines`: `Timeline`, `StepsCard`; `themelia-react-ui/features/activities`: `ActivityLog`; discover the commerce subject below |
@@ -47,7 +48,8 @@ For example, a KPI owns formatting, hierarchy and trend presentation:
 
 ```tsx
 import { Metric, MetricGrid, type MetricData } from 'themelia-react-ui/blocks/analytics';
-import { InlineStat, MetadataList } from 'themelia-react-ui/blocks/data-display';
+import { MetadataList } from 'themelia-react-ui/base/metadata-list';
+import { InlineStat } from 'themelia-react-ui/blocks/data-display';
 
 const revenue: MetricData = {
   id: 'revenue', label: 'Revenue', value: 42500,
@@ -57,9 +59,7 @@ const revenue: MetricData = {
 export const Revenue = () => <Metric variant="card" data={revenue} />;
 export const Dashboard = () => <MetricGrid metrics={[revenue]} columns={3} />;
 export const InvoiceCount = () => <InlineStat label="Invoices" value={18} />;
-export const AccountFacts = () => <MetadataList items={[
-  { id: 'email', label: 'Email', value: 'morgan@example.com' },
-]} />;
+export const AccountFacts = () => <MetadataList items={[{ id: 'email', label: 'Email', value: 'morgan@example.com' }]} />;
 ```
 
 `Metric variant="card"`, default `MetricGrid`, `UsageCard` and `TaskCard` already
@@ -70,10 +70,10 @@ barrel needs optional `recharts`; UsageCard's focused import does not. See [anal
 
 ## Resolve the installed contract
 
-Follow [installed setup](references/installation.md) to resolve the app's package
-and check copied guidance after upgrades. Import `themelia-react-ui/style.css`
-once; shipped components need no source scanning. Apps authoring semantic
-utilities process `theme.css` in their Tailwind v4 build.
+Follow [installed setup](references/installation.md) to resolve the package and check
+copied guidance after upgrades; paste the [project instructions block](references/agents-md.md)
+into the app's AGENTS.md. Import `themelia-react-ui/style.css` once; components need no
+source scanning. Apps authoring semantic utilities process `theme.css` with Tailwind v4.
 
 For another task or an unfamiliar prop, run the bundled [finder](references/discovery.md):
 
@@ -90,9 +90,8 @@ routes and source paths are not imports. RichText takes sanitized HTML, not Mark
 ## Compose and adapt the screen
 
 Use Page for routes and Container/Section for content-led sites. Header `actions`
-holds non-command controls such as a period select, never command button rows.
-Card frames one independent subject; `headerStart` holds pre-title context and
-`surface="flat" padding="none"` composes within an existing boundary.
+holds non-command controls such as a period select, never command rows. Card frames
+one subject; `surface="flat" padding="none"` composes within an existing boundary.
 For headed commerce/variants blocks, choose their `surface` prop instead of
 adding a second Card boundary; see [headed blocks](references/composition.md#headed-blocks-inside-surfaces).
 Use the table/query/selection/row-action seams when they fit the workflow.
@@ -130,10 +129,10 @@ For server-component apps, mount interactive families from a client wrapper.
 | Directory, detail, editing and confirmation | [Workflows](references/workflows.md), [directory](examples/scoped-directory.tsx), [detail](examples/detail.tsx), [edit](examples/edit.tsx), [confirmation](examples/destructive-confirm.tsx) |
 | KPI, facts, quota/task summaries | [Analytics](references/analytics.md), [analytics recipe](examples/analytics.tsx), [task/usage/inline edit](examples/planning-usage-edit.tsx) |
 | Email, receipts, files, messages and integrations | [Domain composition](references/composition.md#receipts), [recipe exports/peers](examples/manifest.json), [integration](references/integration.md) |
-| Shared anatomy and source review | [Design contract](references/design-contract.md), [optional read-only checker](references/review.md) |
+| Shared anatomy, checker and hand-back | [Design contract](references/design-contract.md), [composition checker](references/review.md#done-means) |
 
-Run the app's type/lint/behavior checks. Inspect long content and missing values
-at narrow/desktop parent widths in light/dark themes. Open menus/overlays and run
-keyboard selection, dismissal/focus return, callbacks, validation and retry. Keep
-source findings, inspected images and executed interactions separate; the checker
-reports errors, warnings and unresolved expressions. Recopy the skill on upgrade.
+Done means the [checker](references/review.md#done-means) reports no errors on the
+files you changed (fix and re-run, at most three rounds), then the app's typecheck,
+lint and tests pass. Inspect long content at narrow/desktop widths in light/dark;
+open menus/overlays and run keyboard, dismissal, validation and retry paths. Hand
+back each check as run or not run, and every kept warning with file:line.

package/docs/consumer-skill/examples/app-layout.tsx

@@ -11,7 +11,7 @@ import { Text } from 'themelia-react-ui/typography';
 /** Use at the application's single UIProvider mount; CSS owns palette/geometry. */
 export const workspaceUIDefaults: UIConfig = {
   density: { defaultScale: 'md' },
-  card: { defaultSurface: 'card', defaultHeaderDivider: true, defaultFooterDivider: true },
+  card: { defaultSurface: 'card' },
 };
 
 export interface WorkspaceLayoutProps {

package/docs/consumer-skill/examples/composition.tsx

@@ -17,9 +17,9 @@ export function AccountComposition({ save }: { save: (name: string) => Promise<v
   return <ThemeScope style={{ '--height-action': '2.5rem', '--height-control': '2.5rem' }}>
     <Grid columns={{ base: 1, lg: 2 }} align="start" gap="xl">
       <Card surface="card" title={savedName} titleSuffix={<Badge tone="neutral">Workspace</Badge>}
-        headerPlacement="frame" footerDivider
-        footerSlot={<Button tone="secondary" buttonStyle="outline" onClick={() => { setName(savedName); setError(undefined); editor.show(); }}>Edit workspace</Button>}>
-        <Stack gap="lg"><Text type="secondary">A framed header with one body and one footer.</Text></Stack>
+        headerPlacement="frame"
+        headerAction={<Button onClick={() => { setName(savedName); setError(undefined); editor.show(); }}>Edit workspace</Button>}>
+        <Stack gap="lg"><Text type="secondary">A framed header with one quick control and one body.</Text></Stack>
       </Card>
       <Card surface="flat" padding="none" title="Ownership">
         <Stack gap="md"><Text>The app owns data and save behavior.</Text>