themelia-react-ui 1.0.0 → 1.0.2

package/dist/{workspace-Cbqz4FzN.js → workspace-CcR8r-Nt.js}

@@ -1,14 +1,14 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-C2EKeIw3.js";
-import { n } from "./buttons-Co6GavvM.js";
-import { a as r, i, r as a } from "./typography-Cv8MT-82.js";
-import { t as o } from "./structure-BvW4vG4H.js";
-import { r as s } from "./feedback-a9j9J-9A.js";
-import { _ as c, g as l } from "./primitives-DKPOGVpj.js";
-import { t as u } from "./badge-BZXZT9wd.js";
-import { c as d, i as f, n as p, o as m, r as h, t as g, u as _ } from "./item-pJ0GsOiJ.js";
-import { d as v } from "./hooks-D6UBVzf2.js";
+import { t } from "./utils-BvH9PSmq.js";
+import { a as n, i as r, r as i } from "./typography-BxQgiZyw.js";
+import { t as a } from "./button-BZDasD04.js";
+import { t as o } from "./structure-CRdqVawd.js";
+import { t as s } from "./progress-BroqrAyV.js";
+import { _ as c, g as l } from "./primitives-C7ff0QaI.js";
+import { t as u } from "./badge-CzId1Wlm.js";
+import { c as d, i as f, n as p, o as m, r as h, t as g, u as _ } from "./item-DE4YnuJx.js";
+import { d as v } from "./hooks-BrlnCwQd.js";
 import * as y from "react";
 import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 import { Check as C, Circle as w, CircleAlert as T } from "lucide-react";
@@ -38,7 +38,7 @@ var E = {
 }, j = {
 	complete: "text-success",
 	current: "text-primary-accent",
-	attention: "text-warning",
+	attention: "text-warning-accent",
 	disabled: "text-muted-foreground/40",
 	idle: "text-muted-foreground"
 };
@@ -59,17 +59,17 @@ var F = y.forwardRef(function({ header: e, sidebar: n, rail: r, children: i, con
 	return /* @__PURE__ */ S("div", {
 		ref: g,
 		"aria-label": p,
-		className: t("workspace-layout--component flex h-full min-h-0 w-full flex-col overflow-hidden rounded-radius-md border border-border bg-background text-foreground", "[--workspace-sidebar-width:16rem] [--workspace-rail-width:20rem]", k[a], o),
+		className: t("workspace-layout--component @container/workspace-layout 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:16rem] [--workspace-rail-width:20rem]", k[a], o),
 		style: m,
 		...h,
 		children: [!!e && /* @__PURE__ */ x("header", {
 			className: t("workspace-layout--header shrink-0 border-b border-border bg-background", s),
 			children: e
 		}), /* @__PURE__ */ S("div", {
-			className: t("workspace-layout--body grid min-h-0 flex-1 grid-cols-1 bg-muted/20", _ && !v && "min-[80rem]:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)]", _ && v && "min-[80rem]:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)] min-[96rem]:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)_var(--workspace-rail-width)]", !_ && v && "min-[96rem]:grid-cols-[minmax(0,1fr)_var(--workspace-rail-width)]", c),
+			className: t("workspace-layout--body grid min-h-0 flex-none grid-cols-1 bg-muted/20 @min-[80rem]/workspace-layout:flex-1", _ && !v && "@min-[80rem]/workspace-layout:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)]", _ && v && "@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 && "@min-[96rem]/workspace-layout:grid-cols-[minmax(0,1fr)_var(--workspace-rail-width)]", c),
 			children: [
 				!!_ && /* @__PURE__ */ x("aside", {
-					className: t("workspace-layout--sidebar hidden min-h-0 border-r border-border bg-background min-[80rem]:block", l),
+					className: t("workspace-layout--sidebar hidden min-h-0 border-r border-border bg-background @min-[80rem]/workspace-layout:block", l),
 					children: /* @__PURE__ */ x("div", {
 						className: "h-full overflow-y-auto overscroll-contain p-space-lg",
 						children: n
@@ -77,14 +77,14 @@ var F = y.forwardRef(function({ header: e, sidebar: n, rail: r, children: i, con
 				}),
 				/* @__PURE__ */ x("main", {
 					tabIndex: 0,
-					className: t("workspace-layout--main min-h-0 min-w-0 overflow-y-auto overscroll-contain focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-inset", u),
+					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 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", u),
 					children: /* @__PURE__ */ x("div", {
-						className: t("workspace-layout--content mx-auto flex min-h-full w-full max-w-[var(--workspace-content-max-width)] flex-col gap-space-xl p-4 min-[64rem]:p-5", a === "full" && "max-w-none", d),
+						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", d),
 						children: i
 					})
 				}),
 				!!v && /* @__PURE__ */ x("aside", {
-					className: t("workspace-layout--rail hidden min-h-0 border-l border-border bg-background min-[96rem]:block", f),
+					className: t("workspace-layout--rail hidden min-h-0 border-l border-border bg-background @min-[96rem]/workspace-layout:block", f),
 					children: /* @__PURE__ */ x("div", {
 						className: "h-full overflow-y-auto overscroll-contain p-space-lg",
 						children: r
@@ -95,108 +95,101 @@ var F = y.forwardRef(function({ header: e, sidebar: n, rail: r, children: i, con
 	});
 });
 F.displayName = "WorkspaceLayout";
-var I = y.forwardRef(function({ title: n, description: s, badges: l, metadata: u, actions: d, secondaryActions: f, status: p, media: m, headerEnd: h, titleSlot: g, className: _, strings: v, ...y }, b) {
-	let C = e(E, v), w = !!u?.length;
+var I = y.forwardRef(function({ title: a, description: s, textGap: l = "dense", badges: u, metadata: d, actions: f, secondaryActions: p, status: m, media: h, headerEnd: g, titleSlot: _, className: v, strings: y, ...b }, C) {
+	let w = e(E, y), T = !!d?.length;
 	return /* @__PURE__ */ S(o, {
-		ref: b,
-		direction: {
-			base: "vertical",
-			lg: "horizontal"
-		},
+		ref: C,
+		direction: "horizontal",
 		gap: "xl",
-		align: { lg: "start" },
-		justify: { lg: "between" },
-		wrap: {
-			base: !1,
-			lg: !1
-		},
-		className: t("workspace-record-header--component px-4 py-4 lg:px-5", _),
-		...y,
+		align: "start",
+		justify: "between",
+		wrap: !0,
+		className: t("workspace-record-header--component p-surface-lg", v),
+		...b,
 		children: [/* @__PURE__ */ S(o, {
-			direction: "horizontal",
-			gap: "lg",
-			align: "start",
-			wrap: !1,
-			className: "workspace-record-header--identity flex-1",
-			children: [!!m && /* @__PURE__ */ x("div", {
-				className: "workspace-record-header--media flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-radius-md border border-border bg-muted/40",
-				children: m
-			}), /* @__PURE__ */ S(o, {
-				gap: "md",
-				className: "min-w-0 flex-1",
-				children: [
-					/* @__PURE__ */ S(o, {
+			gap: l,
+			className: "workspace-record-header--identity min-w-0 max-w-full flex-1 basis-64",
+			children: [
+				/* @__PURE__ */ S(o, {
+					direction: "horizontal",
+					gap: "lg",
+					align: "center",
+					wrap: !1,
+					children: [!!h && /* @__PURE__ */ x("div", {
+						className: "workspace-record-header--media flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-inner border border-border bg-muted/40",
+						children: h
+					}), /* @__PURE__ */ S(o, {
 						direction: "horizontal",
 						gap: "md",
-						className: "workspace-record-header--title-row",
+						className: "workspace-record-header--title-row min-w-0 flex-1",
 						children: [
-							g ?? /* @__PURE__ */ x(i, {
+							_ ?? /* @__PURE__ */ x(r, {
 								tag: "h4",
-								className: "leading-tight",
-								children: n
+								className: "[overflow-wrap:anywhere]",
+								children: a
 							}),
-							!!l && /* @__PURE__ */ x(o, {
+							!!u && /* @__PURE__ */ x(o, {
 								direction: "horizontal",
 								wrap: !0,
 								align: "center",
 								gap: "sm",
 								className: "workspace-record-header--badges",
-								children: l
+								children: u
 							}),
-							!!p && /* @__PURE__ */ x("div", {
+							!!m && /* @__PURE__ */ x("div", {
 								className: "workspace-record-header--status",
-								children: p
+								children: m
 							})
 						]
-					}),
-					!!s && /* @__PURE__ */ x(r, {
-						type: "secondary",
-						className: "workspace-record-header--description max-w-4xl leading-relaxed",
-						children: s
-					}),
-					!!w && /* @__PURE__ */ x("div", {
-						"aria-label": C.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__ */ S("div", {
-							className: "flex items-baseline gap-space-sm",
-							children: [/* @__PURE__ */ x(a, { children: e.label }), /* @__PURE__ */ x(c, {
-								weight: "medium",
-								className: "tabular-nums",
-								children: e.value
-							})]
-						}, e.id ?? t))
-					})
-				]
-			})]
-		}), !!(d || f || h) && /* @__PURE__ */ S("div", {
-			className: "workspace-record-header--actions flex shrink-0 flex-wrap items-center gap-space-md min-[64rem]:justify-end",
+					})]
+				}),
+				!!s && /* @__PURE__ */ x(n, {
+					type: "secondary",
+					className: "workspace-record-header--description max-w-4xl leading-relaxed",
+					children: s
+				}),
+				!!T && /* @__PURE__ */ x("div", {
+					"aria-label": w.metadataLabel,
+					className: "workspace-record-header--metadata flex flex-wrap items-center gap-x-space-xl gap-y-space-xs",
+					children: d.map((e, t) => /* @__PURE__ */ S("div", {
+						className: "flex items-baseline gap-space-sm",
+						children: [/* @__PURE__ */ x(i, { children: e.label }), /* @__PURE__ */ x(c, {
+							weight: "medium",
+							className: "tabular-nums",
+							children: e.value
+						})]
+					}, e.id ?? t))
+				})
+			]
+		}), !!(f || p || g) && /* @__PURE__ */ S("div", {
+			className: "workspace-record-header--actions flex max-w-full shrink-0 flex-wrap items-center gap-space-md justify-end",
 			children: [
-				!!f && /* @__PURE__ */ x(o, {
+				!!p && /* @__PURE__ */ x(o, {
 					direction: "horizontal",
 					wrap: !0,
 					align: "center",
 					gap: "sm",
-					"aria-label": C.secondaryActionsLabel,
-					children: f
+					"aria-label": w.secondaryActionsLabel,
+					children: p
 				}),
-				!!d && /* @__PURE__ */ x(o, {
+				!!f && /* @__PURE__ */ x(o, {
 					direction: "horizontal",
 					wrap: !0,
 					align: "center",
 					gap: "sm",
-					"aria-label": C.actionsLabel,
-					children: d
+					"aria-label": w.actionsLabel,
+					children: f
 				}),
-				!!h && /* @__PURE__ */ x("div", {
+				!!g && /* @__PURE__ */ x("div", {
 					className: "workspace-record-header--end",
-					children: h
+					children: g
 				})
 			]
 		})]
 	});
 });
 I.displayName = "WorkspaceRecordHeader";
-var L = y.forwardRef(function({ groups: n, activeId: i, onSelect: c, renderItem: u, footerSlot: C, renderLink: w, className: T, strings: E, ...O }, k) {
+var L = y.forwardRef(function({ groups: r, activeId: a, onSelect: c, renderItem: u, footerSlot: C, renderLink: w, className: T, strings: E, ...O }, k) {
 	let F = e(D, E), I = v({ renderLink: w });
 	return /* @__PURE__ */ S(o, {
 		render: /* @__PURE__ */ x("nav", {
@@ -209,39 +202,39 @@ var L = y.forwardRef(function({ groups: n, activeId: i, onSelect: c, renderItem:
 		children: [/* @__PURE__ */ x(o, {
 			gap: "xl",
 			className: "workspace-nav--groups min-h-0 flex-1",
-			children: n.map((e) => /* @__PURE__ */ S(o, {
+			children: r.map((e) => /* @__PURE__ */ S(o, {
 				gap: "md",
 				className: "workspace-nav--group",
-				children: [!!e.label && /* @__PURE__ */ S("div", {
+				children: [!!e.label && /* @__PURE__ */ S(o, {
+					gap: "dense",
 					className: "workspace-nav--group-header px-space-xs",
-					children: [/* @__PURE__ */ x(a, { children: e.label }), !!e.description && /* @__PURE__ */ x(r, {
+					children: [/* @__PURE__ */ x(i, { children: e.label }), !!e.description && /* @__PURE__ */ x(n, {
 						size: "xs",
 						type: "secondary",
-						className: "mt-0.5 leading-snug",
 						children: e.description
 					})]
 				}), /* @__PURE__ */ x(m, {
 					className: "workspace-nav--items gap-space-xs",
-					children: e.items.map((n, a) => {
-						let o = n.id === i, m = P(n, o), v = A[m], C = n.completion === void 0 ? void 0 : M(n.completion), w = (e) => {
-							if (n.disabled) {
+					children: e.items.map((r, i) => {
+						let o = r.id === a, m = P(r, o), v = A[m], C = r.completion === void 0 ? void 0 : M(r.completion), w = (e) => {
+							if (r.disabled) {
 								e.preventDefault();
 								return;
 							}
-							c?.(n);
+							c?.(r);
 						}, T = {
 							active: o,
 							group: e,
-							index: a,
+							index: i,
 							onSelect: w
 						};
-						if (u) return /* @__PURE__ */ x(y.Fragment, { children: u(n, T) }, n.id);
+						if (u) return /* @__PURE__ */ x(y.Fragment, { children: u(r, T) }, r.id);
 						let E = /* @__PURE__ */ S(b, { children: [
 							/* @__PURE__ */ x(d, {
 								variant: "icon",
 								className: t(o && "bg-primary/10 text-primary-accent"),
-								children: n.icon ? /* @__PURE__ */ x(N, {
-									icon: n.icon,
+								children: r.icon ? /* @__PURE__ */ x(N, {
+									icon: r.icon,
 									className: "size-icon"
 								}) : /* @__PURE__ */ x(v, {
 									className: t("size-icon-md", j[m]),
@@ -251,16 +244,16 @@ var L = y.forwardRef(function({ groups: n, activeId: i, onSelect: c, renderItem:
 							/* @__PURE__ */ S(h, { children: [
 								/* @__PURE__ */ S("div", {
 									className: "flex items-center gap-space-sm",
-									children: [/* @__PURE__ */ x(_, { children: n.label }), o && /* @__PURE__ */ x(r, {
+									children: [/* @__PURE__ */ x(_, { children: r.label }), o && /* @__PURE__ */ x(n, {
 										tag: "span",
 										size: "inherit",
 										className: "sr-only",
 										children: F.currentLabel
 									})]
 								}),
-								!!n.description && /* @__PURE__ */ x(f, {
+								!!r.description && /* @__PURE__ */ x(f, {
 									clamp: 2,
-									children: n.description
+									children: r.description
 								}),
 								C !== void 0 && /* @__PURE__ */ S("div", {
 									className: "mt-1.5 flex items-center gap-space-md",
@@ -276,18 +269,18 @@ var L = y.forwardRef(function({ groups: n, activeId: i, onSelect: c, renderItem:
 									})]
 								})
 							] }),
-							!!n.badge && /* @__PURE__ */ x(p, { children: n.badge })
-						] }), D = t("workspace-nav--item w-full border border-transparent px-2 py-2 text-left transition-colors", o && "border-primary/20 bg-primary/5", n.warning && !o && "border-warning/30 bg-warning/5", n.disabled && "pointer-events-none opacity-50");
-						if (n.href) {
+							!!r.badge && /* @__PURE__ */ x(p, { children: r.badge })
+						] }), D = t("workspace-nav--item w-full border border-transparent px-row-x py-row-y text-left transition-colors", o && "border-primary/20 bg-primary/5", r.warning && !o && "border-warning/30 bg-warning/5", r.disabled && "pointer-events-none opacity-50");
+						if (r.href) {
 							let e = I({
-								href: n.href,
+								href: r.href,
 								children: E,
 								className: "block",
 								active: o,
-								disabled: n.disabled,
-								external: n.external,
-								target: n.target,
-								rel: n.rel,
+								disabled: r.disabled,
+								external: r.external,
+								target: r.target,
+								rel: r.rel,
 								onClick: w
 							});
 							return /* @__PURE__ */ x(g, {
@@ -295,18 +288,18 @@ var L = y.forwardRef(function({ groups: n, activeId: i, onSelect: c, renderItem:
 								render: e,
 								className: D,
 								children: E
-							}, n.id);
+							}, r.id);
 						}
 						return /* @__PURE__ */ x(g, {
 							size: "md",
 							render: /* @__PURE__ */ x("button", {
 								type: "button",
 								onClick: w,
-								disabled: n.disabled
+								disabled: r.disabled
 							}),
 							className: D,
 							children: E
-						}, n.id);
+						}, r.id);
 					})
 				})]
 			}, e.id))
@@ -317,13 +310,13 @@ var L = y.forwardRef(function({ groups: n, activeId: i, onSelect: c, renderItem:
 	});
 });
 L.displayName = "WorkspaceNav";
-var R = y.forwardRef(function({ locales: i, activeLocale: a, onLocaleChange: s, actions: c, status: l, className: d, strings: f, ...p }, m) {
+var R = y.forwardRef(function({ locales: r, activeLocale: i, onLocaleChange: s, actions: c, status: l, className: d, strings: f, ...p }, m) {
 	let h = e(O, f), g = (e) => {
 		e.disabled || s?.(e);
 	};
 	return /* @__PURE__ */ S("div", {
 		ref: m,
-		className: t("workspace-locale-strip--component flex flex-col gap-space-lg border-t border-border bg-muted/20 px-4 py-3 min-[64rem]:flex-row min-[64rem]:items-center min-[64rem]:justify-between min-[64rem]:px-5", d),
+		className: t("workspace-locale-strip--component flex flex-col gap-space-lg border-t border-border bg-muted/20 px-surface-lg py-surface min-[64rem]:flex-row min-[64rem]:items-center min-[64rem]:justify-between", d),
 		...p,
 		children: [/* @__PURE__ */ x(o, {
 			direction: "horizontal",
@@ -333,16 +326,16 @@ var R = y.forwardRef(function({ locales: i, activeLocale: a, onLocaleChange: s,
 			className: "workspace-locale-strip--locales min-w-0",
 			role: "group",
 			"aria-label": h.ariaLabel,
-			children: i.map((e) => {
-				let i = e.id === a, s = e.completion === void 0 ? void 0 : M(e.completion);
-				return /* @__PURE__ */ x(n, {
+			children: r.map((e) => {
+				let r = e.id === i, s = e.completion === void 0 ? void 0 : M(e.completion);
+				return /* @__PURE__ */ x(a, {
 					type: "button",
-					tone: i ? "primary" : "secondary",
-					buttonStyle: i ? "solid" : "ghost",
+					tone: r ? "primary" : "secondary",
+					buttonStyle: r ? "solid" : "ghost",
 					onClick: () => g(e),
 					disabled: e.disabled,
-					"aria-pressed": i,
-					className: t("workspace-locale-strip--item h-auto min-h-action-sm justify-start px-control-sm py-1.5"),
+					"aria-pressed": r,
+					className: t("workspace-locale-strip--item justify-start"),
 					children: /* @__PURE__ */ S(o, {
 						direction: "horizontal",
 						align: "center",
@@ -350,13 +343,13 @@ var R = y.forwardRef(function({ locales: i, activeLocale: a, onLocaleChange: s,
 						render: /* @__PURE__ */ x("span", {}),
 						className: "min-w-0",
 						children: [
-							/* @__PURE__ */ x(r, {
+							/* @__PURE__ */ x(n, {
 								tag: "span",
 								size: "inherit",
 								className: "truncate text-inherit",
 								children: e.label
 							}),
-							i && /* @__PURE__ */ x(r, {
+							r && /* @__PURE__ */ x(n, {
 								tag: "span",
 								size: "inherit",
 								className: "sr-only",
@@ -364,7 +357,7 @@ var R = y.forwardRef(function({ locales: i, activeLocale: a, onLocaleChange: s,
 							}),
 							s !== void 0 && /* @__PURE__ */ x(u, {
 								tone: s >= 100 ? "success" : "secondary",
-								className: t("shrink-0", i && "border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground"),
+								className: t("shrink-0", r && "border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground"),
 								children: h.completionLabel(s)
 							}),
 							!!e.status && /* @__PURE__ */ x("span", {
@@ -399,4 +392,4 @@ R.displayName = "WorkspaceLocaleStrip";
 //#endregion
 export { O as a, I as i, R as n, D as o, L as r, E as s, F as t };
 
-//# sourceMappingURL=workspace-Cbqz4FzN.js.map
+//# sourceMappingURL=workspace-CcR8r-Nt.js.map

package/dist/workspace-CcR8r-Nt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-CcR8r-Nt.js","names":["Icon","React","_Fragment","Text","Heading","DisplayLabel","Button","Stack","Progress","Value","SecondaryValue","Badge","ItemMedia","ItemDescription","ItemActions","ItemGroup","ItemContent","Item","ItemTitle","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","WorkspaceRecordHeader","stringsProp","strings","useStrings","hasMetadata","metadata","textGap","media","titleSlot","title","badges","status","description","index","actions","secondaryActions","headerEnd","WorkspaceNav","resolvedRenderLink","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\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 { 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';\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\tdisabled: 'text-muted-foreground/40',\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 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:16rem] [--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/20 @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 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-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\nexport const WorkspaceRecordHeader = React.forwardRef<HTMLDivElement, WorkspaceRecordHeaderProps>(function WorkspaceRecordHeader({\n\ttitle,\n\tdescription,\n\ttextGap = 'dense',\n\tbadges,\n\tmetadata,\n\tactions,\n\tsecondaryActions,\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 hasMetadata = !!metadata?.length;\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/40\">\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\" className=\"workspace-record-header--description max-w-4xl leading-relaxed\">\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 weight=\"medium\" 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 || secondaryActions || 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{!!secondaryActions && (\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{secondaryActions}\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{!!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 && 'bg-primary/10 text-primary-accent')}>\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 && 'border-primary/20 bg-primary/5',\n\t\t\t\t\t\t\t\t\titem.warning && !active && 'border-warning/30 bg-warning/5',\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/20 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":";;;;;;;;;;;;;;;AAMA,IAAasB,IAAoE;CAChF,eAAe;CACf,cAAc;CACd,uBAAuB;AACxB,GAQaC,IAAkD;CAC9D,WAAW;CACX,kBAAkB,MAAU,GAAGC,EAAM;CACrC,cAAc;AACf,GAQaC,IAAkE;CAC9E,WAAW;CACX,aAAa;CACb,kBAAkB,MAAU,GAAGD,EAAM;AACtC,GCUME,IAA6D;CAClE,SAAS;CACT,MAAM;CACN,MAAM;AACP,GAEMC,IAA0D;CAC/D,UAAUC;CACV,SAASC;CACT,WAAWC;CACX,UAAUD;CACV,MAAMA;AACP,GAEME,IAAuD;CAC5D,UAAU;CACV,SAAS;CACT,WAAW;CACX,UAAU;CACV,MAAM;AACP;AAEA,SAASC,EAAa,GAAuB;CAE5C,OADK,OAAO,SAASR,CAAK,IACnB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAMA,CAAK,CAAC,CAAC,IADf;AAErC;AAEA,SAASS,EAAqB,EAC7B,SACA,gBAKE;CAGF,OAFKC,IAEE,kBAAClC,GAAD;EAAiB;EAAW,eAAY;CAAQ,CAAA,IAFrC;AAGnB;AAEA,SAASmC,EAAU,GAAwB,GAAyC;CAMnF,OALIC,EAAK,WAAiB,aACtBA,EAAK,SAAeA,EAAK,SACzBA,EAAK,UAAgB,cACrBC,IAAe,YACfD,EAAK,eAAe,KAAA,KAAaJ,EAAaI,EAAK,UAAU,KAAK,MAAY,aAC3E;AACR;AAEA,IAAaE,IAAkBrC,EAAM,WAAiD,SAAyB,EAC9G,WACA,YACA,SACA,aACA,kBAAe,QACf,cACA,oBACA,kBACA,qBACA,kBACA,qBACA,kBACA,cACA,UACA,GAAGsC,KACD,GAAK;CACP,IAAMC,IAAa,CAAC,CAACC,GACfC,IAAU,CAAC,CAACC;CAElB,OACC,kBAAC,OAAD;EACM;EACL,cAAYC;EACZ,WAAWC,EACV,oMACA,oEACAnB,EAAoBoB,IACpBC,CACD;EACO;EACP,GAAIR;EAVL,UAAA,CAYE,CAAC,CAACS,KACF,kBAAC,UAAD;GAAQ,WAAWH,EAAG,0EAA0EI,CAAe;GAC7G,UAAAD;EACM,CAAA,GAET,kBAAC,OAAD;GACC,WAAWH,EACV,8GACAL,KAAc,CAACE,KAAW,0FAC1BF,KAAcE,KAAW,6MACzB,CAACF,KAAcE,KAAW,uFAC1BQ,CACD;GAPD,UAAA;IASE,CAAC,CAACV,KACF,kBAAC,SAAD;KACC,WAAWK,EACV,qHACAM,CACD;KAEA,UAAA,kBAAC,OAAD;MAAK,WAAU;MACb,UAAAV;KACG,CAAA;IACC,CAAA;IAER,kBAAC,QAAD;KACC,UAAU;KACV,WAAWI,EACT,6NACDO,CACD;KAEA,UAAA,kBAAC,OAAD;MACC,WAAWP,EACV,qJACAC,MAAiB,UAAU,cAC3BO,CACD;MAEC;KACG,CAAA;IACA,CAAA;IACL,CAAC,CAACX,KACF,kBAAC,SAAD;KACC,WAAWG,EACV,kHACAS,CACD;KAEA,UAAA,kBAAC,OAAD;MAAK,WAAU;MACb,UAAAX;KACG,CAAA;IACC,CAAA;GAEJ;EACD,CAAA,CAAA;;AAEP,CAAC;AAED,EAAgB,cAAc;AAE9B,IAAaY,IAAwBtD,EAAM,WAAuD,SAA+B,EAChI,UACA,gBACA,aAAU,SACV,WACA,aACA,YACA,qBACA,WACA,UACA,cACA,cACA,cACA,SAASuD,GACT,GAAGjB,KACD,GAAK;CACP,IAAMkB,IAAUC,EAAWpC,GAAqCkC,CAAW,GACrEG,IAAc,CAAC,CAACC,GAAU;CAEhC,OACC,kBAACrD,GAAD;EACM;EACL,WAAU;EACV,KAAI;EACJ,OAAM;EACN,SAAQ;EACR,MAAA;EACA,WAAWsC,EACV,mDACAE,CACD;EACA,GAAIR;EAXL,UAAA,CAaE,kBAAChC,GAAD;GAAO,KAAKsD;GAAS,WAAU;GAA/B,UAAA;IACC,kBAACtD,GAAD;KAAO,WAAU;KAAa,KAAI;KAAK,OAAM;KAAS,MAAM;KAA5D,UAAA,CACA,CAAC,CAACuD,KACF,kBAAC,OAAD;MAAK,WAAU;MACb,UAAAA;KACG,CAAA,GAEJ,kBAACvD,GAAD;MAAO,WAAU;MAAa,KAAI;MAAK,WAAU;MAAjD,UAAA;OACCwD,KACA,kBAAC3D,GAAD;QAAS,KAAI;QAAK,WAAU;QAC1B,UAAA4D;OACO,CAAA;OAER,CAAC,CAACC,KAAU,kBAAC1D,GAAD;QAAO,WAAU;QAAa,MAAA;QAAK,OAAM;QAAS,KAAI;QAAK,WAAU;QAAmC,UAAA0D;OAAc,CAAA;OAClI,CAAC,CAACC,KAAU,kBAAC,OAAD;QAAK,WAAU;QAAmC,UAAAA;OAAY,CAAA;MACrE;KACD,CAAA,CAAA;;IACN,CAAC,CAACC,KACF,kBAAChE,GAAD;KAAM,MAAK;KAAY,WAAU;KAC/B,UAAAgE;IACI,CAAA;IAEN,CAAC,CAACR,KACF,kBAAC,OAAD;KACC,cAAYF,EAAQ;KACpB,WAAU;KAET,UAAAG,EAAS,KAAK,GAAM,MACpB,kBAAC,OAAD;MAA4B,WAAU;MAAtC,UAAA,CACC,kBAACvD,GAAD,EAAA,UACE+B,EAAK,MACO,CAAA,GACd,kBAAC3B,GAAD;OAAO,QAAO;OAAS,WAAU;OAC/B,UAAA2B,EAAK;MACA,CAAA,CACF;KAPI,GAAAA,EAAK,MAAMgC,CAOf,CACL;IACG,CAAA;GAED;EACP,CAAA,GAAA,CAAC,EAAEC,KAAWC,KAAoBC,MAClC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,CAAC,CAACD,KACF,kBAAC/D,GAAD;KAAO,WAAU;KAAa,MAAA;KAAK,OAAM;KAAS,KAAI;KAAK,cAAYkD,EAAQ;KAC7E,UAAAa;IACK,CAAA;IAEP,CAAC,CAACD,KACF,kBAAC9D,GAAD;KAAO,WAAU;KAAa,MAAA;KAAK,OAAM;KAAS,KAAI;KAAK,cAAYkD,EAAQ;KAC7E,UAAAY;IACK,CAAA;IAEP,CAAC,CAACE,KAAa,kBAAC,OAAD;KAAK,WAAU;KAAgC,UAAAA;IAAe,CAAA;GAC1E;EAEA,CAAA,CAAA;;AAET,CAAC;AAED,EAAsB,cAAc;AAEpC,IAAaC,IAAevE,EAAM,WAA2C,SAAsB,EAClG,WACA,aACA,aACA,eACA,eACA,eACA,cACA,SAASuD,GACT,GAAGjB,KACD,GAAK;CACP,IAAMkB,IAAUC,EAAWnC,GAA4BiC,CAAW,GAC5DiB,IAAqBtD,EAAsB,EAAE,cAAW,CAAC;CAE/D,OACC,kBAACZ,GAAD;EACC,QACC,kBAAC,OAAD;GACM;GACL,cAAYgC,EAAM,iBAAiBkB,EAAQ;GAC3C,GAAIlB;EACJ,CAAA;EAEF,KAAI;EACJ,WAAWM,EAAG,mCAAmCE,CAAS;EAT3D,UAAA,CAWC,kBAACxC,GAAD;GAAO,KAAI;GAAK,WAAU;GACxB,UAAAmE,EAAO,KAAK,MACZ,kBAACnE,GAAD;IAAsB,KAAI;IAAK,WAAU;IAAzC,UAAA,CACE,CAAC,CAACoE,EAAM,SACR,kBAACpE,GAAD;KAAO,KAAI;KAAQ,WAAU;KAA7B,UAAA,CACC,kBAACF,GAAD,EAAA,UACEsE,EAAM,MACM,CAAA,GACb,CAAC,CAACA,EAAM,eACR,kBAACxE,GAAD;MAAM,MAAK;MAAK,MAAK;MACnB,UAAAwE,EAAM;KACF,CAAA,CAED;IAER,CAAA,GAAA,kBAAC5D,GAAD;KAAW,WAAU;KACnB,UAAA4D,EAAM,MAAM,KAAK,GAAM,MAAU;MACjC,IAAMtC,IAASD,EAAK,OAAOwC,GACrBV,IAAS/B,EAAUC,GAAMC,CAAM,GAC/BwC,IAAalD,EAAYuC,IACzBY,IAAa1C,EAAK,eAAe,KAAA,IAAY,KAAA,IAAYJ,EAAaI,EAAK,UAAU,GACrF2C,KAAgB,MAAyC;OAC9D,IAAI3C,EAAK,UAAU;QAClB,EAAM,eAAe;QACrB;OACD;OACA,IAAWA,CAAI;MAChB,GACM4C,IAAU;OAAE;OAAQ;OAAO;OAAO,UAAUD;MAAa;MAE/D,IAAIE,GACH,OAAO,kBAAChF,EAAM,UAAP,EAAA,UAA+BgF,EAAW7C,GAAM4C,CAAO,EAAkB,GAApD5C,EAAK,EAA+C;MAGjF,IAAM8C,IACL,kBAAAhF,GAAA,EAAA,UAAA;OACC,kBAACU,GAAD;QAAW,SAAQ;QAAO,WAAWiC,EAAGR,KAAU,mCAAmC;QACnF,UAAAD,EAAK,OACL,kBAACH,GAAD;SAAsB,MAAMG,EAAK;SAAM,WAAU;QAAa,CAAA,IAE9D,kBAACyC,GAAD;SAAY,WAAWhC,EAAG,gBAAgBd,EAAamC,EAAO;SAAG,eAAY;QAAQ,CAAA;OAE5E,CAAA;OACX,kBAAClD,GAAD,EAAA,UAAA;QACC,kBAAC,OAAD;SAAK,WAAU;SAAf,UAAA,CACC,kBAACE,GAAD,EAAA,UAAYkB,EAAK,MAAiB,CAAA,GACjCC,KACF,kBAAClC,GAAD;UAAM,KAAI;UAAO,MAAK;UAAU,WAAU;UAAW,UAAAsD,EAAQ;SAAmB,CAAA,CAE3E;;QACJ,CAAC,CAACrB,EAAK,eAAe,kBAACvB,GAAD;SAAiB,OAAO;SAAI,UAAAuB,EAAK;QAA6B,CAAA;QACpF0C,MAAe,KAAA,KACf,kBAAC,OAAD;SAAK,WAAU;SAAf,UAAA,CACD,kBAACtE,GAAD;UACC,OAAOsE;UACP,MAAK;UACL,cAAYrB,EAAQ,gBAAgBqB,CAAU;UAC9C,WAAU;SACV,CAAA,GACC,kBAACpE,GAAD;UAAgB,MAAK;UAAK,WAAU;UAClC,UAAA+C,EAAQ,gBAAgBqB,CAAU;SACpB,CAAA,CACZ;;OAEM,EAAA,CAAA;OACZ,CAAC,CAAC1C,EAAK,SAAS,kBAACtB,GAAD,EAAA,UAAcsB,EAAK,MAAmB,CAAA;MACtD,EAAA,CAAA,GAGG+C,IAAgBtC,EACrB,sGACAR,KAAU,kCACVD,EAAK,WAAW,CAACC,KAAU,kCAC3BD,EAAK,YAAY,gCAClB;MAEA,IAAIA,EAAK,MAAM;OACd,IAAMgD,IAAWX,EAAmB;QACnC,MAAMrC,EAAK;QACX,UAAU8C;QACV,WAAW;QACX;QACA,UAAU9C,EAAK;QACf,UAAUA,EAAK;QACf,QAAQA,EAAK;QACb,KAAKA,EAAK;QACV,SAAS2C;OACV,CAAC;OACD,OACC,kBAAC9D,GAAD;QAAoB,MAAK;QAAK,QAAQmE;QAAgC,WAAWD;QAC/E,UAAAD;OACI,GAFK9C,EAAK,EAEV;MAER;MAEA,OACC,kBAACnB,GAAD;OAEC,MAAK;OACL,QAAQ,kBAAC,UAAD;QAAQ,MAAK;QAAS,SAAS8D;QAAc,UAAU3C,EAAK;OAAW,CAAA;OAC/E,WAAW+C;OAEV,UAAAD;MACI,GANA9C,EAAK,EAML;KAER,CAAC;IACS,CAAA,CACL;GAzGK,GAAAuC,EAAM,EAyGX,CACP;EACK,CAAA,GACN,CAAC,CAACU,KAAc,kBAAC,OAAD;GAAK,WAAU;GAAqE,UAAAA;EAAgB,CAAA,CAC/G;;AAET,CAAC;AAED,EAAa,cAAc;AAE3B,IAAaC,IAAuBrF,EAAM,WAAsD,SAA8B,EAC7H,YACA,iBACA,mBACA,YACA,WACA,cACA,SAASuD,GACT,GAAGjB,KACD,GAAK;CACP,IAAMkB,IAAUC,EAAWjC,GAAoC+B,CAAW,GAEpE+B,KAAqB,MAAgC;EAC1D,AAAIC,EAAO,YACXC,IAAiBD,CAAM;CACxB;CAEA,OACC,kBAAC,OAAD;EACM;EACL,WAAW3C,EAAG,sMAAsME,CAAS;EAC7N,GAAIR;EAHL,UAAA,CAKC,kBAAChC,GAAD;GAAO,WAAU;GAAa,MAAA;GAAK,OAAM;GAAS,KAAI;GAAK,WAAU;GAA0C,MAAK;GAAQ,cAAYkD,EAAQ;GAC9I,UAAAiC,EAAQ,KAAK,MAAW;IACxB,IAAMrD,IAASmD,EAAO,OAAOG,GACvBb,IAAaU,EAAO,eAAe,KAAA,IAAY,KAAA,IAAYxD,EAAawD,EAAO,UAAU;IAC/F,OACC,kBAAClF,GAAD;KAEC,MAAK;KACL,MAAM+B,IAAS,YAAY;KAC3B,aAAaA,IAAS,UAAU;KAChC,eAAekD,EAAkBC,CAAM;KACvC,UAAUA,EAAO;KACjB,gBAAcnD;KACd,WAAWQ,EAAG,4CAA4C;KAE1D,UAAA,kBAACtC,GAAD;MAAO,WAAU;MAAa,OAAM;MAAS,KAAI;MAAK,QAAQ,kBAAC,QAAD,CAAO,CAAA;MAAG,WAAU;MAAlF,UAAA;OACA,kBAACJ,GAAD;QAAM,KAAI;QAAO,MAAK;QAAU,WAAU;QAAyB,UAAAqF,EAAO;OAAY,CAAA;OACrFnD,KAAU,kBAAClC,GAAD;QAAM,KAAI;QAAO,MAAK;QAAU,WAAU;QAAW,UAAAsD,EAAQ;OAAkB,CAAA;OACxFqB,MAAe,KAAA,KAKf,kBAACnE,GAAD;QACC,MAAMmE,KAAc,MAAM,YAAY;QACtC,WAAWjC,EACV,YACAR,KAAU,+EACX;QAEC,UAAAoB,EAAQ,gBAAgBqB,CAAU;OAC7B,CAAA;OAEP,CAAC,CAACU,EAAO,UAAU,kBAAC,QAAD;QAAM,WAAU;QAAY,UAAAA,EAAO;OAAa,CAAA;MAC9D;;IACA,GA7BFA,EAAO,EA6BL;GAEV,CAAC;EACK,CAAA,GACN,CAAC,EAAEtB,KAAUG,MACb,kBAAC9D,GAAD;GAAO,WAAU;GAAa,MAAA;GAAK,OAAM;GAAS,KAAI;GAAK,WAAU;GAArE,UAAA,CACE,CAAC,CAAC2D,KAAU,kBAAC,OAAD;IAAK,WAAU;IAAkC,UAAAA;GAAY,CAAA,GACzE,CAAC,CAACG,KAAW,kBAAC9D,GAAD;IAAO,WAAU;IAAa,MAAA;IAAK,OAAM;IAAS,KAAI;IAAK,WAAU;IAAI,UAAA8D;GAAe,CAAA,CAChG;EAEJ,CAAA,CAAA;;AAEP,CAAC;AAED,EAAqB,cAAc"}