themelia-react-ui 1.0.0 → 1.0.1

package/dist/{workspace-Cbqz4FzN.js.map → workspace-C1PZmk8L.js.map}

@@ -1 +1 @@
-{"version":3,"file":"workspace-Cbqz4FzN.js","names":["Icon","React","_Fragment","Text","DisplayLabel","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","media","titleSlot","Heading","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","Button"],"sources":["../src/components/layout/workspace/workspace.strings.ts","../src/components/layout/workspace/workspace.tsx"],"sourcesContent":["export interface WorkspaceRecordHeaderStrings {\n\tmetadataLabel: string;\n\tactionsLabel: string;\n\tsecondaryActionsLabel: string;\n}\n\nexport const defaultWorkspaceRecordHeaderStrings: WorkspaceRecordHeaderStrings = {\n\tmetadataLabel: 'Record metadata',\n\tactionsLabel: 'Record actions',\n\tsecondaryActionsLabel: 'Secondary actions',\n};\n\nexport interface WorkspaceNavStrings {\n\tariaLabel: string;\n\tcompletionLabel: (value: number) => string;\n\tcurrentLabel: string;\n}\n\nexport const defaultWorkspaceNavStrings: WorkspaceNavStrings = {\n\tariaLabel: 'Workspace navigation',\n\tcompletionLabel: (value) => `${value}% complete`,\n\tcurrentLabel: 'Current',\n};\n\nexport interface WorkspaceLocaleStripStrings {\n\tariaLabel: string;\n\tactiveLabel: string;\n\tcompletionLabel: (value: number) => string;\n}\n\nexport const defaultWorkspaceLocaleStripStrings: WorkspaceLocaleStripStrings = {\n\tariaLabel: 'Workspace locales',\n\tactiveLabel: 'Active',\n\tcompletionLabel: (value) => `${value}% complete`,\n};\n","import * as React from 'react';\nimport {\n\tCheck,\n\tCircle,\n\tCircleAlert,\n\ttype LucideIcon,\n\t} from 'lucide-react';\n\nimport { Badge } from '../../base/badge';\nimport { Button } from '../../base/buttons';\nimport { Progress } from '../../base/feedback';\nimport {\n\tItem,\n\tItemActions,\n\tItemContent,\n\tItemDescription,\n\tItemGroup,\n\tItemMedia,\n\tItemTitle,\n} from '../../base/item';\nimport { Stack } from '../../base/structure';\nimport { SecondaryValue, Value } from '../../primitives';\nimport { DisplayLabel, Heading, Text } from '../../typography';\nimport { useStrings } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nimport { 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',\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 flex h-full min-h-0 w-full flex-col overflow-hidden rounded-radius-md 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-1 grid-cols-1 bg-muted/20',\n\t\t\t\t\thasSidebar && !hasRail && 'min-[80rem]:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)]',\n\t\t\t\t\thasSidebar && hasRail && '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)]',\n\t\t\t\t\t!hasSidebar && hasRail && 'min-[96rem]: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]: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'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',\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 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',\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]: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\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={{ base: 'vertical', lg: 'horizontal' }}\n\t\t\tgap=\"xl\"\n\t\t\talign={{ lg: 'start' }}\n\t\t\tjustify={{ lg: 'between' }}\n\t\t\twrap={{ base: false, lg: false }}\n\t\t\tclassName={cn(\n\t\t\t\t'workspace-record-header--component px-4 py-4 lg:px-5',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t\t<Stack direction=\"horizontal\" gap=\"lg\" align=\"start\" wrap={false} className=\"workspace-record-header--identity flex-1\">\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-md 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<Stack gap=\"md\" className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t<Stack direction=\"horizontal\" gap=\"md\" className=\"workspace-record-header--title-row\">\n\t\t\t\t\t\t{titleSlot ?? (\n\t\t\t\t\t\t\t<Heading tag=\"h4\" className=\"leading-tight\">\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{!!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\t</Stack>\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 shrink-0 flex-wrap items-center gap-space-md min-[64rem]: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<div 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\" className=\"mt-0.5 leading-snug\">\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</div>\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-2 py-2 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-4 py-3 min-[64rem]:flex-row min-[64rem]:items-center min-[64rem]:justify-between min-[64rem]:px-5', 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 h-auto min-h-action-sm justify-start px-control-sm py-1.5')}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Stack direction=\"horizontal\" align=\"center\" gap=\"md\" render={<span />} className=\"min-w-0\">\n\t\t\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" className=\"truncate text-inherit\">{locale.label}</Text>\n\t\t\t\t\t\t\t{active && <Text tag=\"span\" size=\"inherit\" className=\"sr-only\">{strings.activeLabel}</Text>}\n\t\t\t\t\t\t\t\t{completion !== undefined && (\n\t\t\t\t\t\t\t\t\t/* On an active pill the button surface is solid, so the tonal\n\t\t\t\t\t\t\t\t\t    badge variants land coloured-on-coloured. Derive the nested\n\t\t\t\t\t\t\t\t\t    badge from the primary foreground pair so it remains legible\n\t\t\t\t\t\t\t\t\t    when dark themes intentionally lighten `--primary`. */\n\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\ttone={completion >= 100 ? 'success' : 'secondary'}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'shrink-0',\n\t\t\t\t\t\t\t\t\t\t\tactive && 'border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground',\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{strings.completionLabel(completion)}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{!!locale.status && <span className=\"shrink-0\">{locale.status}</span>}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Stack>\n\t\t\t{!!(status || actions) && (\n\t\t\t\t<Stack direction=\"horizontal\" wrap align=\"center\" gap=\"md\" className=\"workspace-locale-strip--actions shrink-0\">\n\t\t\t\t\t{!!status && <div className=\"workspace-locale-strip--status\">{status}</div>}\n\t\t\t\t\t{!!actions && <Stack direction=\"horizontal\" wrap align=\"center\" gap=\"sm\" className=\"\">{actions}</Stack>}\n\t\t\t\t</Stack>\n\t\t\t)}\n\t\t</div>\n\t);\n});\n\nWorkspaceLocaleStrip.displayName = 'WorkspaceLocaleStrip';\n"],"mappings":"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"}
+{"version":3,"file":"workspace-C1PZmk8L.js","names":["Icon","React","_Fragment","Text","DisplayLabel","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","media","titleSlot","Heading","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","Button"],"sources":["../src/components/layout/workspace/workspace.strings.ts","../src/components/layout/workspace/workspace.tsx"],"sourcesContent":["export interface WorkspaceRecordHeaderStrings {\n\tmetadataLabel: string;\n\tactionsLabel: string;\n\tsecondaryActionsLabel: string;\n}\n\nexport const defaultWorkspaceRecordHeaderStrings: WorkspaceRecordHeaderStrings = {\n\tmetadataLabel: 'Record metadata',\n\tactionsLabel: 'Record actions',\n\tsecondaryActionsLabel: 'Secondary actions',\n};\n\nexport interface WorkspaceNavStrings {\n\tariaLabel: string;\n\tcompletionLabel: (value: number) => string;\n\tcurrentLabel: string;\n}\n\nexport const defaultWorkspaceNavStrings: WorkspaceNavStrings = {\n\tariaLabel: 'Workspace navigation',\n\tcompletionLabel: (value) => `${value}% complete`,\n\tcurrentLabel: 'Current',\n};\n\nexport interface WorkspaceLocaleStripStrings {\n\tariaLabel: string;\n\tactiveLabel: string;\n\tcompletionLabel: (value: number) => string;\n}\n\nexport const defaultWorkspaceLocaleStripStrings: WorkspaceLocaleStripStrings = {\n\tariaLabel: 'Workspace locales',\n\tactiveLabel: 'Active',\n\tcompletionLabel: (value) => `${value}% complete`,\n};\n","import * as React from 'react';\nimport {\n\tCheck,\n\tCircle,\n\tCircleAlert,\n\ttype LucideIcon,\n\t} from 'lucide-react';\n\nimport { Badge } from '../../base/badge';\nimport { Button } from '../../base/buttons';\nimport { Progress } from '../../base/feedback';\nimport {\n\tItem,\n\tItemActions,\n\tItemContent,\n\tItemDescription,\n\tItemGroup,\n\tItemMedia,\n\tItemTitle,\n} from '../../base/item';\nimport { Stack } from '../../base/structure';\nimport { SecondaryValue, Value } from '../../primitives';\nimport { DisplayLabel, Heading, Text } from '../../typography';\nimport { useStrings } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nimport { 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',\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 flex h-full min-h-0 w-full flex-col overflow-hidden rounded-radius-md 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-1 grid-cols-1 bg-muted/20',\n\t\t\t\t\thasSidebar && !hasRail && 'min-[80rem]:grid-cols-[var(--workspace-sidebar-width)_minmax(0,1fr)]',\n\t\t\t\t\thasSidebar && hasRail && '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)]',\n\t\t\t\t\t!hasSidebar && hasRail && 'min-[96rem]: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]: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'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',\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 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',\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]: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\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={{ base: 'vertical', lg: 'horizontal' }}\n\t\t\tgap=\"xl\"\n\t\t\talign={{ lg: 'start' }}\n\t\t\tjustify={{ lg: 'between' }}\n\t\t\twrap={{ base: false, lg: false }}\n\t\t\tclassName={cn(\n\t\t\t\t'workspace-record-header--component px-4 py-4 lg:px-5',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t\t<Stack direction=\"horizontal\" gap=\"lg\" align=\"start\" wrap={false} className=\"workspace-record-header--identity flex-1\">\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-md 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<Stack gap=\"md\" className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t<Stack direction=\"horizontal\" gap=\"md\" className=\"workspace-record-header--title-row\">\n\t\t\t\t\t\t{titleSlot ?? (\n\t\t\t\t\t\t\t<Heading tag=\"h4\" className=\"leading-tight\">\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{!!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\t</Stack>\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 shrink-0 flex-wrap items-center gap-space-md min-[64rem]: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<div 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\" className=\"mt-0.5 leading-snug\">\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</div>\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-2 py-2 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-4 py-3 min-[64rem]:flex-row min-[64rem]:items-center min-[64rem]:justify-between min-[64rem]:px-5', 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 h-auto min-h-action-sm justify-start px-control-sm py-1.5')}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Stack direction=\"horizontal\" align=\"center\" gap=\"md\" render={<span />} className=\"min-w-0\">\n\t\t\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" className=\"truncate text-inherit\">{locale.label}</Text>\n\t\t\t\t\t\t\t{active && <Text tag=\"span\" size=\"inherit\" className=\"sr-only\">{strings.activeLabel}</Text>}\n\t\t\t\t\t\t\t\t{completion !== undefined && (\n\t\t\t\t\t\t\t\t\t/* On an active pill the button surface is solid, so the tonal\n\t\t\t\t\t\t\t\t\t    badge variants land coloured-on-coloured. Derive the nested\n\t\t\t\t\t\t\t\t\t    badge from the primary foreground pair so it remains legible\n\t\t\t\t\t\t\t\t\t    when dark themes intentionally lighten `--primary`. */\n\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\ttone={completion >= 100 ? 'success' : 'secondary'}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'shrink-0',\n\t\t\t\t\t\t\t\t\t\t\tactive && 'border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground',\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{strings.completionLabel(completion)}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{!!locale.status && <span className=\"shrink-0\">{locale.status}</span>}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Stack>\n\t\t\t{!!(status || actions) && (\n\t\t\t\t<Stack direction=\"horizontal\" wrap align=\"center\" gap=\"md\" className=\"workspace-locale-strip--actions shrink-0\">\n\t\t\t\t\t{!!status && <div className=\"workspace-locale-strip--status\">{status}</div>}\n\t\t\t\t\t{!!actions && <Stack direction=\"horizontal\" wrap align=\"center\" gap=\"sm\" className=\"\">{actions}</Stack>}\n\t\t\t\t</Stack>\n\t\t\t)}\n\t\t</div>\n\t);\n});\n\nWorkspaceLocaleStrip.displayName = 'WorkspaceLocaleStrip';\n"],"mappings":"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"}

package/docs/consumer-skill/SKILL.md

@@ -5,28 +5,131 @@ description: Use when building, integrating, theming or migrating a React consum
 
 # Themelia React UI consumer
 
-Start with [installed setup](references/installation.md): resolve the package from the app, check installed or copied guidance identity, and read version-matched declarations. Use [discovery](references/discovery.md) to find exact imports, symbols and responsibilities. The [public index](references/public-api.json) derives from actual exports and catalogue owners.
+Build application-specific screens from supported public owners. This skill
+routes the shipped references, indexes, recipes and read-only helpers; it is
+not an API replacement or a requirement to imitate one example layout.
 
-Choose the smallest owner: typography for display roles, primitives for formatted values, base for controls/surfaces, layout for page regions, blocks for reusable presentation, features for interaction lifecycles. Routing, data, permissions, translation, storage and backend effects belong to the app.
+## Resolve the installed contract
 
-Read only the relevant reference:
+Start with [installed setup](references/installation.md). Resolve the package
+from the app, check installed/copied guidance identity, and read matching
+declarations. Refresh the complete skill after upgrades, including prose.
+Read current sibling pages and app adapters; keep local product policy separate.
 
-- [Discovery](references/discovery.md): portable Node finder, selection metadata, optional peers and version-matched declarations.
-- [Installed setup](references/installation.md): package resolution, copied-skill freshness and manual installation.
-- [Composition](references/composition.md): card anatomy, responsive structures, spacing and menu/display ownership.
-- [Design contract](references/design-contract.md): application freedom, library-owned geometry, independent variants and enforcement limits.
-- [Integration](references/integration.md): installation, CSS, state, routing, overlays and verification.
-- [Theme extension](references/theming.md): compact tokens, scoped portals, radius and drift prevention.
-- [Generated tokens](references/tokens.json): current structural roots/defaults, advanced settings and utility vocabulary.
-- [Workflows](references/workflows.md): collection/navigation, detail, validated edit and destructive confirmation; callback ownership, optional peers and verification.
-- [Typed example](examples/composition.tsx): public-import composition verified against the packed package.
+Use [discovery](references/discovery.md) and the [public index](references/public-api.json)
+for exact imports, symbols, responsibilities, alternatives and optional peers.
+Search the task or exact symbol; shorten an empty query instead of guessing APIs.
+For conventional node_modules layouts, run from the app:
 
-Prefer public props/slots and structures. Typography owns no margins; every gap/inset has one owner. rounded-radius is the default everywhere; rounded-inner is only for intentional nested bodies/items. Do not locally restyle control typography, height, corners or menu padding to hide a shared mismatch.
+```sh
+node node_modules/themelia-react-ui/docs/consumer-skill/scripts/find-components.mjs record directory --limit 5
+```
 
-Use Card for headed content, including flat/no-padding composition inside an existing boundary. Choose PopoverMenu for routine searchable selection; type/inset belong to PopoverContent when custom anatomy is needed. Keep row density, control size, surface inset and title/description textGap independent; inspect the exact declaration before assigning a variant.
+Inspect the chosen declaration and its re-exports before assigning props.
+Prefer the focused published family; inspect optional peers for its whole-family
+types as well as runtime use. Catalogue URLs and private source are not imports.
 
-Import themelia-react-ui/style.css once. Compiled component CSS requires no source scanning. Apps using semantic Tailwind classes also process theme.css with their own Tailwind v4 build. CSS owns appearance, UIProvider stable defaults, callbacks app state.
+## Compose from the task
 
-Async integrations must show real pending/failure/success and update data; a toast alone is not persistence. Use library overlays for modal workflows. Verify consuming-app types/tests/build and opened popovers, menus and tooltips in narrow/light/dark states.
+Before JSX, identify fixed context, editable criteria, the user's next decision,
+leading information, command scope and required states. Keep this proportional
+to the task; ordinary edits do not need an approval ceremony or planning report.
 
-This skill ships with the package but is not installed automatically. No theme-publish/skill-install CLI exists. It grants no authorization to publish, deploy, message users or change other repositories.
+Choose the most complete existing owner whose lifecycle fits. Typography owns
+display roles; primitives own formatted values; base owns controls and surfaces;
+layout owns page regions; blocks own reusable subjects; features own workflows.
+Compose lower owners when a feature's coordination does not fit the product.
+
+Use Page for route identity and commands, Card for an independently framed subject,
+ResourceCell for table identity, Item for independent entries and MetadataList for
+facts about one subject. Compare DataView, DataTable and base Table by their actual
+query/selection/paging contracts. Keep fixed parent scope through query clearing.
+Use native table query, utility, bulk-action and row-action seams where they fit.
+
+Give commands explicit tone and page/collection/record scope. Card status/count
+badges use titleSuffix; headerStart is context, and actions use action slots.
+Prioritize identity and decision facts; preserve access to other facts through
+detail/disclosure rather than appending every hidden column to compact rows.
+Product-specific columns, form arrangements and richer rows remain app decisions.
+
+## Preserve structure, typography and appearance
+
+Assign each gap/inset once: shell/container owns gutters, surface owns padding,
+section owns rhythm, Stack/Grid owns sibling gaps, and typography owns no margins.
+Use public props/slots before adding local appearance overrides. A nested framed
+table or Card needs a distinct subject; use supported flat composition otherwise.
+
+Use shared Heading/Text/DisplayLabel/Label/TextLink roles and value primitives such
+as Money, Date and Email. Semantic element choice is separate from visual size.
+Primary row text stays at the shared default; compact supporting metadata uses
+the smaller secondary role. Density alone does not shrink primary content.
+Native editable text keeps its responsive control recipe. For rich HTML display
+use RichText; editing belongs to RichTextEditor. Preserve sanitization and scoped
+content rhythm; structural UI labels do not inherit prose margins.
+
+Keep copy textGap normal/dense, row density, control size and surface inset
+independent. Use gap-normal/gap-dense through the headed owner or Stack/Grid;
+avoid adding description margins. rounded-radius is the default, rounded-inner
+is for intentional nested regions. Do not replace control geometry/typography
+or anchored-region padding through classes, contentClassName or inline styles.
+PopoverMenu owns routine searchable selection; custom popups use public regions.
+
+## Integrate themes, layouts and workflows
+
+Import themelia-react-ui/style.css once; shipped components need no source scanning.
+Apps authoring semantic utilities process theme.css in their Tailwind v4 build.
+Keep broad resets in the lower-priority base layer. Retheme existing semantic
+surface/foreground pairs and structural roots; derived utilities are not new knobs.
+CSS owns appearance, UIProvider stable defaults, callbacks per-mount app state.
+Use ThemeScope for scoped portals, and native dir plus DirectionProvider for RTL.
+
+Reuse public shells/sidebars/headers. Constrain app-shell height and preserve one
+scroll owner, useful gutters, DOM/focus order and action wrapping. Check usable
+parent width as well as viewport width; embedded layouts may need container
+adaptation. Placement, alignment and overflow remain valid app-owned mechanics.
+
+Keep controlled values authoritative and accept callback proposals in the parent.
+Keep state mode fixed while mounted; choose explicit reset/remount behavior when
+the subject changes. Stabilize lifecycle-sensitive loader/schema/column inputs
+when their meaning is unchanged. The app owns routing, permissions, translation,
+transport, cancellation and persistence; use href/callback/render integration.
+
+Show relevant loading, empty, missing, error/retry, disabled, validation and success
+states. Preserve rejected drafts and ignore superseded results. A toast alone is
+not persistence; UI cancellation does not prove a server operation stopped.
+Use library overlays for modal workflows and their pending/dismissal contracts.
+Keep labels, field associations, icon-action names and translated strings meaningful.
+In server-component apps, mount interactive families from a client wrapper;
+use a family's published pure helpers where provided, without assuming SSR support.
+
+## Read the relevant detail and recipe
+
+| Task | Reference and example |
+| --- | --- |
+| Owner selection, Card, menu anatomy | [Composition](references/composition.md), [basic composition](examples/composition.tsx) |
+| Display roles, formatted values and rich HTML | [Typography and rich content](references/composition.md#typography-and-rich-content) |
+| Geometry ownership and independent variants | [Design contract](references/design-contract.md) |
+| CSS, providers, RTL, routers, async/editor integration | [Integration](references/integration.md) |
+| Theme roots, density, radius and portal inheritance | [Theming](references/theming.md), [generated tokens](references/tokens.json) |
+| Collection, fixed context, detail, edit and delete | [Workflows](references/workflows.md), [directory](examples/scoped-directory.tsx), [detail](examples/detail.tsx), [edit](examples/edit.tsx), [confirmation](examples/destructive-confirm.tsx) |
+| Application shells, navigation and parent adaptation | [Layout composition](references/composition.md#application-layouts), [workspace](examples/app-layout.tsx) |
+| TaskCard, UsageCard, InlineEdit and persistence | [Workflow contracts](references/workflows.md#task-summaries-usage-and-inline-editing), [summary](examples/planning-usage-edit.tsx) |
+| Email/templates, receipts, hierarchy/capture, files/messages | [Domain composition](references/composition.md#receipts), [all recipe exports and peers](examples/manifest.json) |
+| Whole-screen review and optional source checker | [Review and checks](references/review.md) |
+
+The manifest lists every runnable recipe, including ordinary/template emails,
+receipt, hierarchy/guided forms, message/files and the index table. Copy only the
+relevant recipe, adapt product labels/callbacks, and read its actual declarations.
+
+## Verify the integrated result
+
+Run the app's types/lint/tests/build. The optional check-composition.mjs script
+uses app TypeScript and checks direct imports/static anatomy; errors, warnings
+and unresolved expressions are distinct. It is not a full visual/accessibility audit.
+Separately inspect long copy, missing values, narrow/desktop and light/dark/RTL
+states. Open menus/overlays, execute callbacks and failure/retry, check keyboard
+selection/dismissal/focus return and reduced motion, and report unverified limits.
+
+This skill ships with the package and requires separate manual installation.
+No theme-publish/skill-install CLI exists. It grants no authorization to publish,
+deploy, message users or change other repositories.

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

@@ -1,8 +1,7 @@
 import { Button } from 'themelia-react-ui/base/buttons';
 import { Card } from 'themelia-react-ui/base/cards';
-import { Grid, Stack } from 'themelia-react-ui/base/structure';
+import { MetadataList } from 'themelia-react-ui/blocks/data-display';
 import { Date, Email, Money, Value } from 'themelia-react-ui/primitives';
-import { Text } from 'themelia-react-ui/typography';
 
 export interface AccountDetailRecord {
   id: string; name: string; email: string | null;
@@ -18,11 +17,11 @@ export function AccountDetail({ account, onEdit, onBack }: AccountDetailProps) {
   return <Card title={account.name} surface="card" headerPlacement="frame"
     headerAction={<Button onClick={() => onEdit(account.id)}>Edit account</Button>}
     footerSlot={<Button tone="secondary" buttonStyle="outline" onClick={onBack}>Back to accounts</Button>}>
-    <Grid columns={{ base: 1, md: 2 }} gap="lg">
-      <Stack gap="xs"><Text type="secondary">Account ID</Text><Value>{account.id}</Value></Stack>
-      <Stack gap="xs"><Text type="secondary">Email</Text><Email value={account.email} /></Stack>
-      <Stack gap="xs"><Text type="secondary">Created</Text><Date value={account.createdAt} /></Stack>
-      <Stack gap="xs"><Text type="secondary">Balance</Text><Money amount={account.balanceMinor} currency={account.currency} unit="minor" /></Stack>
-    </Grid>
+    <MetadataList columns={{ base: 1, md: 2 }} items={[
+      { id: 'id', label: 'Account ID', value: <Value>{account.id}</Value> },
+      { id: 'email', label: 'Email', value: <Email value={account.email} /> },
+      { id: 'created', label: 'Created', value: <Date value={account.createdAt} /> },
+      { id: 'balance', label: 'Balance', value: <Money amount={account.balanceMinor} currency={account.currency} unit="minor" /> },
+    ]} />
   </Card>;
 }

package/docs/consumer-skill/examples/manifest.json

@@ -19,6 +19,12 @@
         "@tanstack/react-table"
       ]
     },
+    {
+      "file": "scoped-directory.tsx",
+      "exports": ["ScopedDirectory"],
+      "phase": "optional",
+      "optionalPeers": ["@tanstack/react-table", "react-day-picker"]
+    },
     {
       "file": "detail.tsx",
       "exports": [
@@ -89,6 +95,14 @@
       ],
       "phase": "basic",
       "optionalPeers": []
+    },
+    {
+      "file": "planning-usage-edit.tsx",
+      "exports": [
+        "WorkspaceSummary"
+      ],
+      "phase": "basic",
+      "optionalPeers": []
     }
   ]
 }

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

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { InlineEdit } from 'themelia-react-ui/base/inline-edit';
+import { Card } from 'themelia-react-ui/base/cards';
+import { AdaptiveGrid, Stack } from 'themelia-react-ui/base/structure';
+import { TaskCard, type TaskCardItem } from 'themelia-react-ui/blocks/planning';
+import { UsageCard, type UsageCardData } from 'themelia-react-ui/blocks/analytics/usage-card';
+
+/** The application supplies persistence, authoritative tasks and usage. */
+export function WorkspaceSummary({
+ initialName, tasks, usage, saveName, completeTask,
+}: {
+ initialName: string;
+ tasks: readonly TaskCardItem[];
+ usage: UsageCardData;
+ saveName: (name: string, signal: AbortSignal) => Promise<void>;
+ completeTask: (id: string, completed: boolean) => void;
+}) {
+ const [name, setName] = useState(initialName);
+ return <Stack gap="xl">
+  <Card title="Workspace">
+   <InlineEdit label="Project name" value={name} onValueChange={setName} required
+    onSave={(draft, {signal}) => saveName(draft, signal)} />
+  </Card>
+  <AdaptiveGrid minColumnWidth="md" gap="xl">
+   <TaskCard title="Release checklist" items={tasks} defaultExpanded onItemCompletedChange={completeTask} />
+   <UsageCard title="Workspace usage" data={usage} />
+  </AdaptiveGrid>
+ </Stack>;
+}

package/docs/consumer-skill/examples/scoped-directory.tsx

@@ -0,0 +1,77 @@
+import { useMemo, type ReactNode } from 'react';
+import { Button } from 'themelia-react-ui/base/buttons';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { FilterLayout, FilterProvider, FilterType, type ActiveFilter, type FilterConfig } from 'themelia-react-ui/features/filters';
+import { DataTable, ResourceCell, type DataTableProps } from 'themelia-react-ui/features/table';
+import { Page } from 'themelia-react-ui/layout/page';
+import { Email } from 'themelia-react-ui/primitives';
+import { Text } from 'themelia-react-ui/typography';
+
+export interface DirectoryContact { id: string; name: string; role: string; email: string | null; }
+export type DirectoryState =
+  | { status: 'loading' }
+  | { status: 'error'; message: string }
+  | { status: 'ready'; records: DirectoryContact[] };
+export interface ScopedDirectoryProps {
+  scope: { id: string; label: string };
+  state: DirectoryState;
+  filters: ActiveFilter[];
+  onQueryChange: (query: { scopeId: string; filters: ActiveFilter[] }) => void;
+  onRetry: () => void;
+  onBack: () => void;
+  onCreate?: () => void;
+  onOpen: (id: string) => void;
+  exportAction?: ReactNode;
+  /** App chooses from available parent width; compact identity retains contact reach. */
+  compact?: boolean;
+  // Authoritative server pagination; the app preserves scope/query in its URLs.
+  pagination?: DataTableProps<DirectoryContact, unknown>['pagination'];
+  onPageChange?: DataTableProps<DirectoryContact, unknown>['onPageChange'];
+}
+const criteria: FilterConfig[] = [{
+  key: 'q', label: 'Search contacts', placeholder: 'Name, email or role',
+  type: FilterType.SEARCH, icon: null, operator: 'contains', delay: 0,
+  displayConfig: { display: 'always' },
+}];
+const columns: DataTableProps<DirectoryContact, unknown>['columns'] = [
+  { id: 'identity', header: 'Contact', cell: ({ row }) => <ResourceCell title={row.original.name}
+    subtitle={<Text size="xs" type="secondary">{row.original.role}</Text>} /> },
+  { accessorKey: 'email', header: 'Email', cell: ({ row }) => <Email value={row.original.email} /> },
+];
+const compactColumns: DataTableProps<DirectoryContact, unknown>['columns'] = [
+  { id: 'identity', header: 'Contact', cell: ({ row }) => <ResourceCell title={row.original.name}
+    subtitle={<Text size="xs" type="secondary">{row.original.role}</Text>}
+    metadata={<Email value={row.original.email} />} /> },
+];
+
+// Parent scope is navigation context, never a removable filter. The app loads
+// matching records. Its detail view keeps other operational facts available.
+export function ScopedDirectory(props: ScopedDirectoryProps) {
+  const rowActions = useMemo<DataTableProps<DirectoryContact, unknown>['rowActions']>(() => [
+    { id: 'open', label: 'Open contact', onClick: contact => props.onOpen(contact.id) },
+  ], [props.onOpen]);
+  return <Page header={{ title: 'Contacts', headingTag: 'h1',
+    description: 'People responsible for bookings, billing and operations.',
+    onBack: props.onBack, backLabel: 'All businesses',
+    slots: { beforeTitle: <Text type="secondary">Business: {props.scope.label}</Text> },
+    actions: props.onCreate ? <Button tone="primary" onClick={props.onCreate}>New contact</Button> : undefined,
+  }}>
+    <FilterProvider filters={criteria} activeFilters={props.filters}
+      navigating={props.state.status === 'loading'}
+      onFilterChange={filters => props.onQueryChange({ scopeId: props.scope.id,
+        // A cleared search can emit ['']; it is not an applied criterion here.
+        filters: filters.filter(filter => filter.key !== 'q' || filter.value.some(value => value.trim() !== '')),
+      })}>
+      <DataTable columns={props.compact ? compactColumns : columns} data={props.state.status === 'ready' ? props.state.records : []}
+        getRowId={contact => contact.id} enableSorting={false} enableColumnVisibility={false}
+        showFullscreenToggle={false} manualPagination pagination={props.state.status === 'ready' ? props.pagination : undefined} onPageChange={props.onPageChange}
+        topbarContent={<FilterLayout variant="compact" showClearFilters />} topbarEnd={props.exportAction}
+        emptyStateMessage={props.state.status === 'loading' ? 'Loading contacts…' :
+          props.state.status === 'error' ? 'Contacts could not be loaded.' :
+          props.filters.length ? 'No contacts match these criteria.' : 'No contacts in this business yet.'}
+        emptyStateAction={props.state.status === 'error' ? <Stack gap="dense"><Text role="alert" type="error">{props.state.message}</Text>
+          <Button tone="secondary" buttonStyle="outline" onClick={props.onRetry}>Retry contacts</Button></Stack> : undefined}
+        rowActions={rowActions} />
+    </FilterProvider>
+  </Page>;
+}

package/docs/consumer-skill/references/composition.md

@@ -16,12 +16,100 @@ keep placement, width, wrapping and overflow with the surrounding composition.
 | Reusable subject presentation | Blocks |
 | Editing/selection/async lifecycle | Features with app callbacks |
 
+## Compose from the task
+
+Identify the user's next decision before selecting components. Establish fixed
+context (account, parent entity, workspace), editable query criteria, leading
+information, page/collection/record commands, and loading/empty/error/edit states.
+Then assign owners. A task may require a comparison table, a compact directory,
+a detail workspace or a form; they need different information hierarchies.
+
+| Decision | Use when | Alternative / boundary |
+| --- | --- | --- |
+| DataView | Its coordinated query, view and collection lifecycle fits | DataTable with app-owned query transport and native toolbar slots when coordination differs; base Table for presentation without TanStack behavior |
+| ResourceCell | Identity inside a table cell | Item for independent list entries; MetadataList for label/value facts about one subject |
+| Page / application shell | Route identity, navigation, content bounds and page commands | Card for an independent subject within that route; do not repeat the same heading merely to frame a table |
+| Card | One subject needs a frame and headed regions | `surface="flat" padding="none"` inside an existing boundary; nested DataTable uses its own `surface="flat"` |
+| FormField / InlineEdit | A field needs label/hint/error, or isolated save/cancel | Complete feature/overlay for a workflow; app form owns whole-record submission |
+
+For a DataTable composition, put queries in `topbarContent`, exports or collection
+tools in `topbarEnd`, selection commands in `bulkActions`, and record commands
+in `rowActions`. Other arrangements are valid when the product has a distinct
+query region; choose one owner deliberately and keep queries close to their
+results. DataView already owns coordinated filtering; do not add a second filter
+store around it without inspecting its contract.
+
+Fixed scope and mutable criteria are different states. A collection reached
+inside one business can show that business as context/navigation; query controls
+then narrow that scope. If business is an editable filter, clearing it may widen
+the collection. The app owns this meaning and transport. Do not accidentally
+present fixed scope as a removable criterion or repeat it in every region.
+
+Use primary identity plus task-critical supporting facts in compact rows.
+When columns disappear, preserve access to other facts through detail/disclosure
+or supported comparison controls. Avoid automatically appending every hidden
+column to identity metadata. There is no universal row-line limit: long names,
+accessibility needs and the task can justify richer rows. Explain the priority.
+Custom ResourceCell metadata is caller content; use shared supporting typography
+and CellStack where its smaller secondary-value contract fits.
+
+Commands need explicit importance as well as scope. PageActions does not infer
+primary tone from a label such as “New contact”; choose `tone="primary"` when
+that is the route's main command. Permissions and destructive intent remain
+application decisions. A back link, export and destructive command should not
+all inherit the same visual emphasis by accident.
+
+| Drift | Better decision |
+| --- | --- |
+| Same parent named in header, context strip and fixed filter | One contextual lead; repeat only where it clarifies a separate task |
+| Every hidden column becomes identity metadata | Prioritize visible facts and retain access to the rest |
+| Repeated route title on an otherwise untitled table Card | Route header plus native collection surface |
+| Child and parent both add the same gutter/inset | Assign visible space once at its owner |
+| New local controls to imitate an existing workflow | Inspect the public feature/parts/callback seams first |
+
+See the [scoped directory recipe](../examples/scoped-directory.tsx) and
+[workflow explanation](workflows.md#scoped-directory). Review decisions using
+[review and checks](review.md); valid alternatives should preserve task semantics
+and public anatomy, not imitate one screenshot.
+
 Use the exact family declarations from public-api.json. Catalogue URLs and source folders are not import contracts.
 
+## Typography and rich content
+
+Choose Heading, Text, DisplayLabel, Label and TextLink from the published
+typography family by role. Set semantic tags independently of visual variants;
+heading order describes the document, not a desired font size. Labels associate
+controls with stable IDs. Money, Date, Email and other value primitives own
+formatting, locale/unit handling and empty-value fallbacks; zero is real data.
+The app owns accounting, timezone policy and the meaning of unavailable values.
+
+Primary row values and labels use the shared default text size. Compact metadata,
+form hints and row descriptions use smaller secondary copy; structural panel
+descriptions use default-sized secondary text. Typography adds no outer margins.
+Native editable text retains its responsive field recipe. Do not resize it to
+imitate a display label or use density to make all text smaller.
+
+RichText from `themelia-react-ui/typography/rich-text` displays sanitized HTML,
+with a scoped reading rhythm inherited from typography and theme roots. Use
+`tag="div"` for HTML containing paragraphs/headings/lists; its default `p` tag
+is appropriate only for inline content. The allowlist strips arbitrary styling,
+embedded media and unsafe links; it is not a Markdown parser or email-layout
+renderer. Keep outer width/padding on the surrounding structure. RichTextEditor
+owns editing; EmailComposer owns structured email/variable/delivery contracts.
+Read the relevant declarations and [integration](integration.md) before choosing
+the content owner. Embedded React UI can opt out of reading rhythm through
+`not-typeset` or `data-not-typeset` on its subtree; those opt-outs do not bypass
+HTML sanitization or establish a separate typography system.
+
 ## Card anatomy
 
 Card surface="card" is the ordinary bordered surface; surface="framed" retains its ring recipe; surface="flat" padding="none" composes within an existing boundary. headerPlacement="frame" places title/icon/actions above an inset body, retaining default corners and using rounded-inner on that body.
 
+Card `gap` owns spacing between regions; `contentGap` owns direct body-child
+spacing; `textGap` owns title/supporting-copy rhythm. Region spacing defaults to
+`xl` (`md` for `padding="none"`). Use a semantic region gap for compact cards
+instead of resetting padding or adding local margins.
+
 Use titleSuffix for status/count/version badges. Long titles/suffixes wrap through the shared owner; no literal spaces/local margins to manufacture gaps. headerAction/actions are trailing controls, headerStart pre-title context. footerSlot/footer definitions own card-level actions; footerDivider owns the rule and inset. Do not simulate a footer inside children. SmartCard and ContentBlock are deprecated migration names; use Card in new code.
 
 Reusable blocks/features stay card-free unless their explicit purpose is a card. Frame them at the composition boundary.
@@ -168,3 +256,18 @@ adaptTo="container" inside Container/PageViewport to adapt at 48rem of usable
 parent width while preserving main-before-aside DOM/focus order.
 
 See the installed [workspace recipe](../examples/app-layout.tsx).
+
+## Task and usage summaries, editable fields
+
+| Intent | Public owner | Composition boundary |
+| --- | --- | --- |
+| Task summary and expandable checklist | `TaskCard` from `themelia-react-ui/blocks/planning` | Owns one Card and its header/body/footer; supply authoritative items and callbacks. |
+| Quotas, category/daily analytics and period selection | `UsageCard` from `themelia-react-ui/blocks/analytics/usage-card` | Owns one Card; supply data/request state and optional app footer action. |
+| Edit one saved field in place | `InlineEdit` from `themelia-react-ui/base/inline-edit` | Owns FormField and native control/action anatomy; place it inside the app's chosen surface. |
+
+Use Card's `gap` for region rhythm and `textGap` for title/supporting-copy rhythm;
+neither changes Card insets. These blocks use the canonical surface, typography,
+formatted-value and structure owners. Drawn rings and mini charts retain private
+geometry and semantic chart/status colors. Read the
+[workflow contracts](workflows.md#task-summaries-usage-and-inline-editing) and
+[typed workspace recipe](../examples/planning-usage-edit.tsx) for integration.

package/docs/consumer-skill/references/design-contract.md

@@ -133,9 +133,10 @@ overrides, semantic borders, and new raw spacing/control drift. The shipped
 typed examples go through the same design checks as library compositions.
 
 Those repository checks do not run automatically in a consuming application.
-Adopt equivalent component-import-aware lint rules in the application's CI, and
-run its types, build and interaction tests. The package does not strip arbitrary
-CSS at runtime or advertise a consumer audit/install CLI.
+The opt-in source checker in [review and checks](review.md) covers a smaller,
+documented set of direct-import/static-anatomy rules. Run the app's lint, types,
+build and interaction tests for broader coverage. The package does not strip
+arbitrary CSS at runtime or install audit/skill tooling globally.
 
 Static lint cannot prove alignment, readable wrapping, CSS authored elsewhere,
 unknown dynamic styles, focus restoration or callback behavior. Verify long