themelia-react-ui 2.0.5 → 3.0.0

package/dist/workspace-DIryPqBt.js

@@ -0,0 +1,400 @@
+"use client";
+import { useStrings as e } from "./lib/strings.js";
+import { t } from "./utils-BVbAG2J6.js";
+import { c as n, o as r, s as i } from "./typography-C0dELqYV.js";
+import { n as a, t as o } from "./text.styles-B64My8RZ.js";
+import { t as s } from "./focus-recipes-DSkiUvUp.js";
+import { n as c } from "./buttons-pZVgPTZn.js";
+import { t as l } from "./structure-DElaQwwN.js";
+import { i as u } from "./tone-recipes-BPsRAvhu.js";
+import { a as d, c as f, o as p } from "./surface-recipes-DV6rrOFq.js";
+import { t as m } from "./progress-RARK8AjB.js";
+import { n as h, t as g } from "./composition.recipes-COdiFhxB.js";
+import { t as _ } from "./interaction-recipes-DmuS1ase.js";
+import { _ as v, g as y } from "./primitives-BlC1lXBr.js";
+import { t as b } from "./badge-oGiXblW7.js";
+import { c as x, i as S, n as C, o as w, r as T, t as E, u as D } from "./item-GJ9mvCcg.js";
+import { n as O, t as k } from "./page-header-commands-elelNOfd.js";
+import { m as A } from "./hooks-DHfeSMAO.js";
+import { n as j } from "./main-landmark-context-BAsyqp2I.js";
+import * as M from "react";
+import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
+import { Check as I, Circle as L, CircleAlert as R } from "lucide-react";
+//#region src/components/layout/workspace/workspace.strings.ts
+var z = {
+	metadataLabel: "Record metadata",
+	actionsLabel: "Record actions",
+	moreActionsLabel: "More actions"
+}, B = {
+	ariaLabel: "Workspace navigation",
+	completionLabel: (e) => `${e}% complete`
+}, V = {
+	ariaLabel: "Workspace locales",
+	activeLabel: "Active",
+	completionLabel: (e) => `${e}% complete`
+}, H = {
+	default: "[--workspace-content-max-width:58rem]",
+	wide: "[--workspace-content-max-width:86rem]",
+	full: "[--workspace-content-max-width:none]"
+}, U = {
+	complete: I,
+	current: L,
+	attention: R,
+	disabled: L,
+	idle: L
+}, W = {
+	complete: "text-success",
+	current: "text-primary-accent",
+	attention: "text-warning-accent",
+	disabled: "text-muted-foreground opacity-50",
+	idle: "text-muted-foreground"
+};
+function G(e) {
+	return Number.isFinite(e) ? Math.min(100, Math.max(0, Math.round(e))) : 0;
+}
+function K({ icon: e, className: t }) {
+	return e ? /* @__PURE__ */ P(e, {
+		className: t,
+		"aria-hidden": "true"
+	}) : null;
+}
+function q(e, t) {
+	return e.disabled ? "disabled" : e.status ? e.status : e.warning ? "attention" : t ? "current" : e.completion !== void 0 && G(e.completion) >= 100 ? "complete" : "idle";
+}
+var J = M.forwardRef(function({ header: e, sidebar: n, rail: r, children: i, contentWidth: a = "wide", className: o, headerClassName: c, bodyClassName: l, sidebarClassName: u, mainClassName: m, contentClassName: h, railClassName: _, "aria-label": v, mainAs: y, style: b, ...x }, S) {
+	let C = !!n, w = !!r, T = j(), E = y ?? (T ? "div" : "main"), D = E === "section";
+	return /* @__PURE__ */ F("div", {
+		ref: S,
+		role: v && !D ? "group" : void 0,
+		"aria-label": D ? void 0 : v,
+		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", f.frame, "[--workspace-sidebar-width:var(--shell-sidebar-width)] [--workspace-rail-width:20rem]", H[a], o),
+		style: b,
+		...x,
+		children: [!!e && /* @__PURE__ */ P("header", {
+			className: t("workspace-layout--header shrink-0", p.header, c),
+			children: e
+		}), /* @__PURE__ */ F("div", {
+			className: t("workspace-layout--body grid min-h-0 flex-none grid-cols-1 bg-background @min-[80rem]/workspace-layout:flex-1", C && !w && "@min-[80rem]/workspace-layout:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)]", C && w && "@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)]", !C && w && "@min-[96rem]/workspace-layout:grid-cols-[minmax(0,1fr)_var(--workspace-rail-width)]", l),
+			children: [
+				!!C && /* @__PURE__ */ P("aside", {
+					className: t("workspace-layout--sidebar hidden min-h-0 border-r border-border/60 bg-card @min-[80rem]/workspace-layout:block", u),
+					children: /* @__PURE__ */ P("div", {
+						className: "h-full overflow-y-auto overscroll-contain p-space-lg",
+						children: n
+					})
+				}),
+				/* @__PURE__ */ P(E, {
+					tabIndex: 0,
+					"aria-label": D ? v : void 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 ${s.inset}`, d.wash, m),
+					children: /* @__PURE__ */ P("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 p-surface-lg", g.subjects, a === "full" && "max-w-none", h),
+						children: i
+					})
+				}),
+				!!w && /* @__PURE__ */ P("aside", {
+					className: t("workspace-layout--rail hidden min-h-0 border-l border-border/60 bg-card @min-[96rem]/workspace-layout:block", _),
+					children: /* @__PURE__ */ P("div", {
+						className: "h-full overflow-y-auto overscroll-contain p-space-lg",
+						children: r
+					})
+				})
+			]
+		})]
+	});
+});
+J.displayName = "WorkspaceLayout";
+var Y = M.forwardRef(function({ title: s, description: c, textGap: u = "dense", badges: d, metadata: f, actions: p, primaryAction: m, secondaryActions: _, maxVisibleSecondaryActions: y, renderLink: b, status: x, media: S, headerEnd: C, titleSlot: w, headingTag: T = "h4", className: E, strings: D, ...j }, M) {
+	let N = e(z, D), I = A({ renderLink: b }), L = !!f?.length, R = O(m, _);
+	return /* @__PURE__ */ F(l, {
+		ref: M,
+		direction: "horizontal",
+		gap: "xl",
+		align: "start",
+		justify: "between",
+		wrap: !0,
+		className: t("workspace-record-header--component p-surface-lg", E),
+		...j,
+		children: [/* @__PURE__ */ F(l, {
+			gap: u,
+			className: "workspace-record-header--identity min-w-0 max-w-full flex-1 basis-64",
+			children: [
+				/* @__PURE__ */ F(l, {
+					direction: "horizontal",
+					gap: "lg",
+					align: "center",
+					wrap: !1,
+					children: [!!S && /* @__PURE__ */ P("div", {
+						className: "workspace-record-header--media flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-radius border border-border bg-muted/30",
+						children: S
+					}), /* @__PURE__ */ F(l, {
+						direction: "horizontal",
+						gap: "md",
+						className: "workspace-record-header--title-row min-w-0 flex-1",
+						children: [
+							w ?? /* @__PURE__ */ P(i, {
+								tag: T,
+								size: a.subject,
+								className: "[overflow-wrap:anywhere]",
+								children: s
+							}),
+							!!d && /* @__PURE__ */ P(l, {
+								direction: "horizontal",
+								wrap: !0,
+								align: "center",
+								gap: "sm",
+								className: "workspace-record-header--badges",
+								children: d
+							}),
+							!!x && /* @__PURE__ */ P("div", {
+								className: "workspace-record-header--status",
+								children: x
+							})
+						]
+					})]
+				}),
+				!!c && /* @__PURE__ */ P(n, {
+					...o.structuralDescription,
+					lineHeight: "relaxed",
+					className: "workspace-record-header--description max-w-4xl",
+					children: c
+				}),
+				!!L && /* @__PURE__ */ P("div", {
+					role: "group",
+					"aria-label": N.metadataLabel,
+					className: "workspace-record-header--metadata flex flex-wrap items-center gap-x-space-xl gap-y-space-xs",
+					children: f.map((e, t) => /* @__PURE__ */ F("div", {
+						className: "flex items-baseline gap-space-sm",
+						children: [/* @__PURE__ */ P(r, { children: e.label }), /* @__PURE__ */ P(v, {
+							className: "tabular-nums",
+							children: e.value
+						})]
+					}, e.id ?? t))
+				})
+			]
+		}), !!(p || R || C) && /* @__PURE__ */ F("div", {
+			className: t("workspace-record-header--actions flex max-w-full shrink-0 flex-wrap items-center justify-end", g.commands),
+			children: [
+				!!p && /* @__PURE__ */ P(l, {
+					direction: "horizontal",
+					wrap: !0,
+					align: "center",
+					gap: h.commands,
+					role: "group",
+					"aria-label": N.actionsLabel,
+					children: p
+				}),
+				R && /* @__PURE__ */ P(k, {
+					primaryAction: m,
+					secondaryActions: _,
+					maxVisibleSecondaryActions: y,
+					moreActionsLabel: N.moreActionsLabel,
+					renderLink: I
+				}),
+				!!C && /* @__PURE__ */ P("div", {
+					className: "workspace-record-header--end",
+					children: C
+				})
+			]
+		})]
+	});
+});
+Y.displayName = "WorkspaceRecordHeader";
+var X = M.forwardRef(function({ groups: i, activeId: a, onSelect: o, renderItem: s, footerSlot: c, renderLink: d, className: f, strings: h, ...g }, v) {
+	let b = e(B, h), O = A({ renderLink: d });
+	return /* @__PURE__ */ F(l, {
+		render: /* @__PURE__ */ P("nav", {
+			ref: v,
+			"aria-label": g["aria-label"] ?? b.ariaLabel,
+			...g
+		}),
+		gap: "xl",
+		className: t("workspace-nav--component h-full", f),
+		children: [/* @__PURE__ */ P(l, {
+			gap: "xl",
+			className: "workspace-nav--groups min-h-0 flex-1",
+			children: i.map((e) => /* @__PURE__ */ F(l, {
+				gap: "md",
+				className: "workspace-nav--group",
+				children: [!!e.label && /* @__PURE__ */ F(l, {
+					gap: "dense",
+					className: "workspace-nav--group-header px-space-xs",
+					children: [/* @__PURE__ */ P(r, { children: e.label }), !!e.description && /* @__PURE__ */ P(n, {
+						size: "xs",
+						type: "secondary",
+						children: e.description
+					})]
+				}), /* @__PURE__ */ P(w, {
+					className: "workspace-nav--items gap-space-xs",
+					children: e.items.map((n, r) => {
+						let i = n.id === a, c = q(n, i), l = U[c], d = n.completion === void 0 ? void 0 : G(n.completion), f = (e) => {
+							if (n.disabled) {
+								e.preventDefault();
+								return;
+							}
+							o?.(n);
+						}, p = {
+							active: i,
+							group: e,
+							index: r,
+							onSelect: f
+						};
+						if (s) return /* @__PURE__ */ P(M.Fragment, { children: s(n, p) }, n.id);
+						let h = /* @__PURE__ */ F(N, { children: [
+							/* @__PURE__ */ P(x, {
+								variant: "icon",
+								className: t(i && "text-accent-foreground"),
+								children: n.icon ? /* @__PURE__ */ P(K, {
+									icon: n.icon,
+									className: "size-icon"
+								}) : /* @__PURE__ */ P(l, {
+									className: t("size-icon-md", W[c]),
+									"aria-hidden": "true"
+								})
+							}),
+							/* @__PURE__ */ F(T, { children: [
+								/* @__PURE__ */ P(D, { children: n.label }),
+								!!n.description && /* @__PURE__ */ P(S, {
+									clamp: 2,
+									children: n.description
+								}),
+								d !== void 0 && /* @__PURE__ */ F("div", {
+									className: "mt-1.5 flex items-center gap-space-md",
+									children: [/* @__PURE__ */ P(m, {
+										value: d,
+										size: "sm",
+										"aria-label": b.completionLabel(d),
+										className: "flex-1"
+									}), /* @__PURE__ */ P(y, {
+										size: "xs",
+										className: "tabular-nums",
+										children: b.completionLabel(d)
+									})]
+								})
+							] }),
+							!!n.badge && /* @__PURE__ */ P(C, { children: n.badge })
+						] }), g = t("workspace-nav--item w-full border border-transparent px-row-x py-row-y text-left transition-colors", i && _.rowCurrent, n.warning && !i && t(u.warning.edge, u.warning.wash), n.disabled && "pointer-events-none opacity-50");
+						if (n.href) {
+							let e = O({
+								href: n.href,
+								children: h,
+								className: "block",
+								active: i,
+								"aria-current": i ? "page" : void 0,
+								disabled: n.disabled,
+								external: n.external,
+								target: n.target,
+								rel: n.rel,
+								onClick: f
+							});
+							return /* @__PURE__ */ P(E, {
+								size: "md",
+								render: e,
+								"aria-current": i ? "page" : void 0,
+								className: g,
+								children: h
+							}, n.id);
+						}
+						return /* @__PURE__ */ P(E, {
+							size: "md",
+							render: /* @__PURE__ */ P("button", {
+								type: "button",
+								onClick: f,
+								disabled: n.disabled
+							}),
+							"aria-current": i ? "true" : void 0,
+							className: g,
+							children: h
+						}, n.id);
+					})
+				})]
+			}, e.id))
+		}), !!c && /* @__PURE__ */ P("div", {
+			className: t("workspace-nav--footer shrink-0 pt-space-lg", p.footer),
+			children: c
+		})]
+	});
+});
+X.displayName = "WorkspaceNav";
+var Z = M.forwardRef(function({ locales: r, activeLocale: i, onLocaleChange: a, actions: o, status: s, className: u, strings: d, ...f }, m) {
+	let g = e(V, d), v = (e) => {
+		e.disabled || a?.(e);
+	};
+	return /* @__PURE__ */ F("div", {
+		ref: m,
+		className: t("workspace-locale-strip--component flex flex-wrap items-center justify-between gap-space-lg px-surface-lg py-surface", p.footer, p.band, u),
+		...f,
+		children: [/* @__PURE__ */ P(l, {
+			direction: "horizontal",
+			wrap: !0,
+			align: "center",
+			gap: "2xs",
+			className: "workspace-locale-strip--locales w-fit min-w-0 max-w-full rounded-radius bg-muted p-space-2xs",
+			role: "group",
+			"aria-label": g.ariaLabel,
+			children: r.map((e) => {
+				let r = e.id === i, a = e.completion === void 0 ? void 0 : G(e.completion);
+				return /* @__PURE__ */ P(c, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					onClick: () => v(e),
+					disabled: e.disabled,
+					"aria-pressed": r,
+					className: t("workspace-locale-strip--item justify-start", r ? _.segmentActiveButton : _.segmentInactiveButton),
+					children: /* @__PURE__ */ F(l, {
+						direction: "horizontal",
+						align: "center",
+						gap: "md",
+						render: /* @__PURE__ */ P("span", {}),
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ P(n, {
+								tag: "span",
+								size: "inherit",
+								className: "truncate text-inherit",
+								children: e.label
+							}),
+							r && /* @__PURE__ */ P(n, {
+								tag: "span",
+								size: "inherit",
+								className: "sr-only",
+								children: g.activeLabel
+							}),
+							a !== void 0 && /* @__PURE__ */ P(b, {
+								tone: a >= 100 ? "success" : "secondary",
+								className: "shrink-0",
+								children: g.completionLabel(a)
+							}),
+							!!e.status && /* @__PURE__ */ P("span", {
+								className: "shrink-0",
+								children: e.status
+							})
+						]
+					})
+				}, e.id);
+			})
+		}), !!(s || o) && /* @__PURE__ */ F(l, {
+			direction: "horizontal",
+			wrap: !0,
+			align: "center",
+			gap: h.commands,
+			className: "workspace-locale-strip--actions shrink-0",
+			children: [!!s && /* @__PURE__ */ P("div", {
+				className: "workspace-locale-strip--status",
+				children: s
+			}), !!o && /* @__PURE__ */ P(l, {
+				direction: "horizontal",
+				wrap: !0,
+				align: "center",
+				gap: h.commands,
+				children: o
+			})]
+		})]
+	});
+});
+Z.displayName = "WorkspaceLocaleStrip";
+//#endregion
+export { V as a, Y as i, Z as n, B as o, X as r, z as s, J as t };
+
+//# sourceMappingURL=workspace-DIryPqBt.js.map

package/dist/workspace-DIryPqBt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-DIryPqBt.js","names":["Icon","React","_Fragment","Text","DisplayLabel","Heading","headingRoleSizes","copyRoleProps","focusRecipes","Button","Stack","toneRecipes","neutralFillRecipes","surfaceRecipes","regionRecipes","Progress","compositionRhythm","compositionClasses","interactionRecipes","Value","SecondaryValue","Badge","ItemMedia","ItemDescription","ItemActions","ItemGroup","ItemContent","Item","ItemTitle","hasPageHeaderCommands","PageHeaderCommands","useLayoutLinkRenderer","useInsideMainLandmark","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","ariaLabel","props","hasSidebar","sidebar","hasRail","rail","insideMain","MainRegion","mainAs","namesMain","cn","contentWidth","className","header","headerClassName","bodyClassName","sidebarClassName","mainClassName","contentClassName","railClassName","WorkspaceRecordHeader","stringsProp","strings","useStrings","resolvedRenderLink","hasMetadata","metadata","hasCommands","primaryAction","secondaryActions","textGap","media","titleSlot","headingTag","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"],"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\t/** Accessible name of the More actions menu trigger. */\n\tmoreActionsLabel: string;\n}\n\nexport const defaultWorkspaceRecordHeaderStrings: WorkspaceRecordHeaderStrings = {\n\tmetadataLabel: 'Record metadata',\n\tactionsLabel: 'Record actions',\n\tmoreActionsLabel: 'More actions',\n};\n\nexport interface WorkspaceNavStrings {\n\tariaLabel: string;\n\tcompletionLabel: (value: number) => string;\n}\n\nexport const defaultWorkspaceNavStrings: WorkspaceNavStrings = {\n\tariaLabel: 'Workspace navigation',\n\tcompletionLabel: (value) => `${value}% complete`,\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 {compositionClasses, compositionRhythm} from '../../base/structure/composition.recipes';\nimport { SecondaryValue, Value } from '../../primitives';\nimport { DisplayLabel, Heading, Text } from '../../typography';\nimport {copyRoleProps, headingRoleSizes} from '../../typography/text.styles';\nimport { useStrings } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nimport { hasPageHeaderCommands, PageHeaderCommands } from '../../base/navigation/page-header/page-header-commands';\nimport { useInsideMainLandmark } from '../containers/main-landmark-context';\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 { neutralFillRecipes, regionRecipes, surfaceRecipes } from '../../../lib/surface-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\t'aria-label': ariaLabel,\n\tmainAs,\n\tstyle,\n\t...props\n}, ref) {\n\tconst hasSidebar = !!sidebar;\n\tconst hasRail = !!rail;\n\t// One main landmark per page: inside an app shell or PageViewport main, the\n\t// record's scroll region is a plain element unless the consumer says otherwise.\n\tconst insideMain = useInsideMainLandmark();\n\tconst MainRegion = mainAs ?? (insideMain ? 'div' : 'main');\n\t// A section is a region landmark only when named, so the name goes there;\n\t// otherwise it names the whole workspace as a group.\n\tconst namesMain = MainRegion === 'section';\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\trole={ariaLabel && !namesMain ? 'group' : undefined}\n\t\t\taria-label={namesMain ? undefined : ariaLabel}\n\t\t\tclassName={cn(\n\t\t\t\t// The shared frame: its card fill shows through the header, sidebar and rail.\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',\n\t\t\t\tsurfaceRecipes.frame,\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', regionRecipes.header, 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// The body is the page canvas inside the frame; the main region washes it,\n\t\t\t\t\t// so Cards placed there keep their contrast in both themes.\n\t\t\t\t\t'workspace-layout--body grid min-h-0 flex-none grid-cols-1 bg-background @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/60 bg-card @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<MainRegion\n\t\t\t\t\t// oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- the scroll region must be reachable by keyboard\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\taria-label={namesMain ? ariaLabel : undefined}\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\t\tneutralFillRecipes.wash,\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 p-surface-lg', compositionClasses.subjects,\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</MainRegion>\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/60 bg-card @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\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\tmaxVisibleSecondaryActions,\n\trenderLink,\n\tstatus,\n\tmedia,\n\theaderEnd,\n\ttitleSlot,\n\theadingTag = 'h4',\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\tconst hasCommands = hasPageHeaderCommands(primaryAction, secondaryActions);\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-radius 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={headingTag} size={headingRoleSizes.subject} 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 {...copyRoleProps.structuralDescription} 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\trole=\"group\"\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 || hasCommands || headerEnd) && (\n\t\t\t\t<div className={cn('workspace-record-header--actions flex max-w-full shrink-0 flex-wrap items-center justify-end', compositionClasses.commands)}>\n\t\t\t\t\t{!!actions && (\n\t\t\t\t\t\t<Stack direction=\"horizontal\" wrap align=\"center\" gap={compositionRhythm.commands} role=\"group\" 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={secondaryActions}\n\t\t\t\t\t\t\tmaxVisibleSecondaryActions={maxVisibleSecondaryActions}\n\t\t\t\t\t\t\tmoreActionsLabel={strings.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<ItemTitle>{item.label}</ItemTitle>\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\t'aria-current': active ? 'page' : undefined,\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} aria-current={active ? 'page' : undefined} 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\taria-current={active ? 'true' : undefined}\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={cn('workspace-nav--footer shrink-0 pt-space-lg', regionRecipes.footer)}>{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\t// The locales and the commands share a row while both fit the strip's own\n\t\t\t// width and wrap otherwise; no viewport breakpoint decides it.\n\t\t\tclassName={cn('workspace-locale-strip--component flex flex-wrap items-center justify-between gap-space-lg px-surface-lg py-surface', regionRecipes.footer, regionRecipes.band, className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{/* The active locale is a selection, not a command: it lifts on the shared\n\t\t\t    segmented track, so the strip's own primary action stays the only solid one. */}\n\t\t\t<Stack direction=\"horizontal\" wrap align=\"center\" gap=\"2xs\" className=\"workspace-locale-strip--locales w-fit min-w-0 max-w-full rounded-radius bg-muted p-space-2xs\" 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=\"secondary\"\n\t\t\t\t\t\t\tbuttonStyle=\"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(\n\t\t\t\t\t\t\t\t'workspace-locale-strip--item justify-start',\n\t\t\t\t\t\t\t\tactive ? interactionRecipes.segmentActiveButton : interactionRecipes.segmentInactiveButton,\n\t\t\t\t\t\t\t)}\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<Badge tone={completion >= 100 ? 'success' : 'secondary'} className=\"shrink-0\">\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={compositionRhythm.commands} 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={compositionRhythm.commands}>{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

@@ -5,6 +5,13 @@ description: Compatibility entrypoint to Themelia's components, tokenization, co
 
 # Themelia React UI consumer
 
+Themelia ships the whole of a simple view and about 70% of a domain view; the
+rest is app-owned subjects made from its parts and tokens. Before any screen,
+read [building views](references/building-views.md) for the reach order and the
+need → owner map, and the [catalogue](references/catalogue.md) for every
+component. Do not hand-roll a panel, table, pill, heading, modal or formatted
+value that an owner provides.
+
 Use the four canonical capabilities:
 
 - [themelia-components](../consumer-skills/themelia-components/SKILL.md): installed setup, search, exact API inspection, typed forms/features and framework integration.

package/docs/consumer-skill/agents/themelia-ui-designer.md

@@ -21,6 +21,8 @@ records, the brief and the code cannot tell you.
 ## Load first
 
 - `node_modules/themelia-react-ui/docs/consumer-skills/themelia-design/SKILL.md`
+- `node_modules/themelia-react-ui/docs/consumer-skill/references/building-views.md`
+  and the Features and Blocks sections of `references/catalogue.md`
 - `node_modules/themelia-react-ui/docs/consumer-skill/references/data-reading.md`
 - `node_modules/themelia-react-ui/docs/consumer-skill/references/view-spec.md`
 - `node_modules/themelia-react-ui/docs/consumer-skill/references/view-craft.md`
@@ -39,7 +41,10 @@ records, the brief and the code cannot tell you.
 3. **Spec.** Write the view spec where the parent says, otherwise
    `design/<view>.md`. Rank information, name the focal point, draw 390 and
    1440 wireframes, choose an encoding per fact.
-4. **Owners.** Find and verify owners before JSX:
+4. **Owners.** Write the coverage plan in the spec: one owner per region,
+   reaching for a feature, then a block, then base and layout owners; mark
+   only the product-specific subject `CUSTOM` and list the parts it is made
+   from. Find and verify owners before JSX:
    - `node node_modules/themelia-react-ui/docs/consumer-skill/scripts/find-components.mjs <task nouns>`
    - `node node_modules/themelia-react-ui/docs/consumer-skill/scripts/map-composition.mjs --pattern record-detail|collection|edit|analytics --main <need> --aside <need>`
    - `node node_modules/themelia-react-ui/docs/consumer-skill/scripts/inspect-component.mjs <Symbol> --import <exact import> --prop <name>`
@@ -75,6 +80,9 @@ scores, findings and screenshots.
 
 - Real records only. No invented figures, trends or states; data gaps stay
   visible and are reported.
+- Owners first. No hand-written panel, table, pill, heading, modal or
+  formatted value where a Themelia owner exists; custom subjects are made of
+  Themelia parts and shared roles.
 - Public imports only. No anatomy class overrides, new colours or tokens, blur,
   decorative icons, filler cards or prose explaining the screen.
 - Do not add navigation, cards or commands because a prop allows them.
@@ -88,7 +96,8 @@ scores, findings and screenshots.
 2. Screenshot paths for each width, theme and state.
 3. The decisions that changed the view and why, including what was removed.
 4. Checks and interactions run, with results.
-5. Library gaps: owner, prop, workaround.
+5. Coverage: the plan as built, and each custom subject with its parts.
+   Library gaps: owner, prop, workaround.
 6. Unverified: widths, themes, states or interactions not exercised.
 
 Keep measurements and screenshots separate from judgement: "the census shows 9

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

@@ -1,5 +1,5 @@
 import { ErrorState, LoadingState } from 'themelia-react-ui/base/feedback';
-import { Metric, MetricGrid, type MetricData } from 'themelia-react-ui/blocks/analytics';
+import { Metric, MetricGrid, type MetricData } from 'themelia-react-ui/blocks/analytics/charts';
 import { EmptyState, InlineStat } from 'themelia-react-ui/blocks/data-display';
 
 export type RevenueOverviewState =

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

@@ -91,10 +91,10 @@ export function WorkspaceRegionsLayout({ primaryNavigation, sidebarPresentation
       sidebarPresentation={sidebarPresentation}
       mobileSidebarMode={sidebarPresentation === 'rail' ? 'inline' : 'drawer'}
       secondarySidebarWidth={secondarySidebarWidth}
+      sidebar={primaryNavigation ?? <AppSidebar className="h-full" surface="transparent" menuDensity="comfortable"
+        navigationGroups={navigationGroups} currentUrl={currentUrl} renderLink={renderLink} />}
       slots={{
         headerEnd: user && <HeaderUserMenu user={user} onLogout={onLogout} />,
-        sidebar: primaryNavigation ?? <AppSidebar className="h-full" surface="transparent" menuDensity="comfortable"
-          navigationGroups={navigationGroups} currentUrl={currentUrl} renderLink={renderLink} />,
         secondarySidebar: hasContextualNavigation ? secondarySidebar !== undefined ? secondarySidebar : <AppSidebar className="h-full" surface="transparent"
           collapsible={contextualCollapsible} menuDensity="comfortable" searchable
           navigationGroups={contextualNavigationGroups} currentUrl={currentUrl} renderLink={renderLink} /> : undefined,
@@ -115,6 +115,6 @@ export function WorkspaceExamplePage({ onCreate, narrow, gutter, children }: Wor
   return <Page narrow={narrow} gutter={gutter}
     header={{ title: 'Workspace', description: 'Review activity and manage your records.',
       primaryAction: { label: 'Create record', onClick: onCreate } }}>
-    {children ?? <Card title="Activity" footerText="Latest workspace activity"><Text>Application content goes here.</Text></Card>}
+    {children ?? <Card title="Activity" footerSlot="Latest workspace activity"><Text>Application content goes here.</Text></Card>}
   </Page>;
 }

package/docs/consumer-skill/examples/commerce-lines.tsx

@@ -221,11 +221,13 @@ export function ReceivableInvoiceDetail({ onRecordPayment, onSendReminder, onApp
 					<AddressCard
 						surface="card"
 						kind="billing"
-						name="Kalliope Studio IKE"
-						line1="42 Tsimiski Street"
-						city="Thessaloniki"
-						postalCode="546 23"
-						country="Greece"
+						address={{
+							name: 'Kalliope Studio IKE',
+							line1: '42 Tsimiski Street',
+							city: 'Thessaloniki',
+							postalCode: '546 23',
+							country: 'Greece',
+						}}
 					/>
 				</>
 			)}

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

@@ -54,12 +54,13 @@ export function AccountDetailPage({ account, onEdit, onBack, section, onSectionC
     { label: 'Delete account', destructive: true, onClick: () => { setError(undefined); deletion.show(); } },
   ];
   return <Page narrow header={{
-    title: account.name, onBack, backLabel: 'Back to accounts',
+    title: account.name, onBack,
+    strings: { back: 'Back to accounts', sections: 'Account sections' },
     slots: { titleSuffix: account.overdue ? <Badge tone="warning">Overdue</Badge> : null },
     primaryAction: { label: 'Edit account', onClick: () => onEdit(account.id) },
     secondaryActions: commands,
     tabs: {
-      label: 'Account sections', value: section,
+      value: section,
       onValueChange: id => onSectionChange(id as AccountSection),
       items: [
         { id: 'overview', label: 'Overview' },

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

@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button } from 'themelia-react-ui/base/buttons';
 import { Card } from 'themelia-react-ui/base/cards';
-import { ControlledFormField, DirtyStateBanner, ErrorSummary, FormActionsBar, SubmitStateButton } from 'themelia-react-ui/base/forms';
+import { ControlledFormField, DirtyStateBanner, ErrorSummary, SubmitStateButton } from 'themelia-react-ui/base/forms';
 import { Stack } from 'themelia-react-ui/base/structure';
 import { Input } from 'themelia-react-ui/base/text-inputs';
 import { Text } from 'themelia-react-ui/typography';
@@ -43,10 +43,10 @@ export function AccountEdit({ initial, onSave, onCancel }: AccountEditProps) {
             onValueChange={value => field.onChange(value)} onBlur={field.onBlur} invalid={invalid} disabled={isSubmitting} />}
         </ControlledFormField>
         {saved && !isDirty && <Text role="status">Account saved.</Text>}
-        <FormActionsBar>
+        <Stack direction="horizontal" wrap justify="end" gap="md">
           <Button type="button" disabled={isSubmitting} onClick={onCancel}>Cancel edit</Button>
           <SubmitStateButton dirty={isDirty} disableWhenPristine submitting={isSubmitting}>Save account</SubmitStateButton>
-        </FormActionsBar>
+        </Stack>
       </Stack>
     </form>
   </Card>;

package/docs/consumer-skill/examples/email-composer.tsx

@@ -13,7 +13,7 @@ export function CustomerEmail({ customer, deliver }: { customer: Customer; deliv
 		to: [{ name: 'Ada', email: 'ada@example.com' }], cc: [], bcc: [],
 		subject: 'Hello {{customer.name}}', body: { kind: 'text', text: 'Hello {{customer.name}},\n\nHow can we help?' }, placeholderOverrides: {},
 	});
-	return <EmailComposer value={draft} onChange={setDraft} context={customer} placeholders={{ sets }} onSend={deliver} />;
+	return <EmailComposer value={draft} onValueChange={setDraft} context={customer} placeholders={{ sets }} onSend={deliver} />;
 }
 
 /** The application's data client owns the registry, pending/error state, retry and cancellation. */

package/docs/consumer-skill/examples/index-table.tsx

@@ -29,8 +29,8 @@ export function AccountIndex({ state, onRetry, hrefFor, onNavigate }: AccountInd
         <Text role="alert" type="error">{state.message}</Text>
         <Button onClick={onRetry}>Retry loading</Button>
       </Stack> : <DataTable columns={columns} data={state.records}
-        getRowId={account => account.id} enablePagination={false} showFullscreenToggle={false}
-        emptyStateMessage="No accounts yet." emptyStateAction={<Button onClick={onRetry}>Refresh accounts</Button>}
+        getRowId={account => account.id} showFullscreenToggle={false}
+        strings={{ emptyState: { message: "No accounts yet." } }} emptyStateAction={<Button onClick={onRetry}>Refresh accounts</Button>}
         rowActions={[{ id: 'open', label: 'Open account', onClick: account => onNavigate(hrefFor(account)) }]} />}
   </Page>;
 }