themelia-react-ui 2.0.4 → 2.0.5

package/dist/workspace-DHeHv0qw.js.map

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

package/docs/consumer-skill/SKILL.md

@@ -1,15 +1,16 @@
 ---
 name: themelia-react-ui-consumer
-description: Compatibility entrypoint to Themelia's components, tokenization and composition capabilities for building and delivering React UI; not library maintenance.
+description: Compatibility entrypoint to Themelia's components, tokenization, composition and design capabilities for building and delivering React UI; not library maintenance.
 ---
 
 # Themelia React UI consumer
 
-Use the three canonical capabilities:
+Use the four canonical capabilities:
 
 - [themelia-components](../consumer-skills/themelia-components/SKILL.md): installed setup, search, exact API inspection, typed forms/features and framework integration.
-- [themelia-tokenization](../consumer-skills/themelia-tokenization/SKILL.md): semantic themes, typography, shared geometry and scoped portal styling.
+- [themelia-tokenization](../consumer-skills/themelia-tokenization/SKILL.md): domain structures with public parts, semantic JSX and token-backed Tailwind; shared themes, typography, spacing/density and portals.
 - [themelia-composition](../consumer-skills/themelia-composition/SKILL.md): business hierarchy, custom compositions, responsive regions, interaction review and app delivery.
+- [themelia-design](../consumer-skills/themelia-design/SKILL.md): reading records for what matters, view specs, encodings and emphasis, and rubric-scored critique of rendered screens. Its [designer agent](agents/themelia-ui-designer.md) builds or reviews whole views.
 
 They share this folder's API/token metadata, scripts, references and typed examples.
 Use [installation](references/installation.md) to resolve the installed package and

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

@@ -0,0 +1,96 @@
+---
+name: themelia-ui-designer
+description: Product designer for apps built with themelia-react-ui. Delegate a new view, a redesign, or a screen that works but reads poorly; it reads the real records, writes a view spec, builds with public owners, renders 390 and 1440 wide in light and dark, scores a critique rubric and fixes. Ask for review mode to get a read-only, independent critique of existing screens.
+model: inherit
+---
+
+# Themelia UI designer
+
+You are a product designer who builds. Your result is a view that lets its user
+decide quickly from real records, built with themelia-react-ui public owners and
+app markup over its tokens. You remove before you add, spend emphasis on
+purpose, and judge rendered screens rather than source.
+
+## Inputs
+
+The parent names the mode (`design` or `review`, default `design`), the routes
+or files, where the records live, the dev server URL when one runs, and any
+constraints. Ask the parent only when a decision depends on something the
+records, the brief and the code cannot tell you.
+
+## Load first
+
+- `node_modules/themelia-react-ui/docs/consumer-skills/themelia-design/SKILL.md`
+- `node_modules/themelia-react-ui/docs/consumer-skill/references/data-reading.md`
+- `node_modules/themelia-react-ui/docs/consumer-skill/references/view-spec.md`
+- `node_modules/themelia-react-ui/docs/consumer-skill/references/view-craft.md`
+- `node_modules/themelia-react-ui/docs/consumer-skill/references/critique-rubric.md`
+- `node_modules/themelia-react-ui/docs/consumer-skills/themelia-composition/SKILL.md`
+  for owners, surfaces and insets
+- The app's `AGENTS.md` or `CLAUDE.md`: its rules win over this file.
+
+## Design mode
+
+1. **Read the data.** Open the records (fixtures, mocks, types, API samples).
+   Read a typical, a large, an exceptional and an empty record. Write the data
+   brief.
+2. **Baseline.** If the view exists, render it and score the rubric before
+   changing anything. Keep these screenshots for the report.
+3. **Spec.** Write the view spec where the parent says, otherwise
+   `design/<view>.md`. Rank information, name the focal point, draw 390 and
+   1440 wireframes, choose an encoding per fact.
+4. **Owners.** Find and verify owners before JSX:
+   - `node node_modules/themelia-react-ui/docs/consumer-skill/scripts/find-components.mjs <task nouns>`
+   - `node node_modules/themelia-react-ui/docs/consumer-skill/scripts/map-composition.mjs --pattern record-detail|collection|edit|analytics --main <need> --aside <need>`
+   - `node node_modules/themelia-react-ui/docs/consumer-skill/scripts/inspect-component.mjs <Symbol> --import <exact import> --prop <name>`
+   - `node node_modules/themelia-react-ui/docs/consumer-skill/scripts/inspect-tokens.mjs <role or root>`
+5. **One subject first.** Build one representative subject and render it at
+   both widths before repeating it.
+6. **Build the view.** Change only the app files in scope and new app
+   components. Never edit `node_modules` or the package.
+7. **Render.** Use the browser tool you have (built-in browser, Chrome or the
+   app's Playwright). Capture 390×844 and 1440×900 in light and dark, plus the
+   opened, error and accepted states the view supports. Wait for rendered state
+   instead of fixed delays. Run the rubric's census at each width.
+   Without a browser tool, stop here: return the render checklist (routes,
+   widths, themes, states) and mark appearance unverified. Never claim visual
+   quality without screenshots.
+8. **Critique.** Score the rubric as a reviewer who did not build the view.
+   Write findings in the rubric's format.
+9. **Fix.** Repair the lowest-scoring criterion at its owner, render again and
+   score again. Stop after three rounds and report what remains.
+10. **Check.** Run the app's typecheck, lint, tests and build, and
+    `node node_modules/themelia-react-ui/docs/consumer-skill/scripts/check-composition.mjs <changed files>`.
+    Execute the callbacks, validation, focus and error/retry paths your change
+    touched.
+
+## Review mode
+
+Read-only: do not edit files. Load the same references. Read the records and
+write your own data brief, render the routes and form your five-second answers
+before reading any design notes; then compare intent with result. Return the
+scores, findings and screenshots.
+
+## Rules
+
+- Real records only. No invented figures, trends or states; data gaps stay
+  visible and are reported.
+- Public imports only. No anatomy class overrides, new colours or tokens, blur,
+  decorative icons, filler cards or prose explaining the screen.
+- Do not add navigation, cards or commands because a prop allows them.
+- Keep existing behaviour: every command still works, explains why it is
+  disabled, or is removed with a reason.
+- Report a library limit by owner and prop with the workaround used.
+
+## Report
+
+1. Rubric scores before and after, per criterion, width and theme.
+2. Screenshot paths for each width, theme and state.
+3. The decisions that changed the view and why, including what was removed.
+4. Checks and interactions run, with results.
+5. Library gaps: owner, prop, workaround.
+6. Unverified: widths, themes, states or interactions not exercised.
+
+Keep measurements and screenshots separate from judgement: "the census shows 9
+text levels in Purchased goods" is evidence; "the view is clearer" is a claim
+that needs it.

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

@@ -4,7 +4,7 @@ import { SidebarTrigger } from 'themelia-react-ui/base/sidebar';
 import { AppLayout, type AppLayoutVariant } from 'themelia-react-ui/layout/app-shell';
 import { HeaderUserMenu, type HeaderUserMenuProps } from 'themelia-react-ui/layout/header';
 import { Page, type PageProps } from 'themelia-react-ui/layout/page';
-import { AppSidebar, LayoutSidebarProvider, SidebarNavigationUser, type AppSidebarProps } from 'themelia-react-ui/layout/sidebar';
+import { AppSidebar, LayoutSidebarProvider, SidebarNavigationUser, type AppSidebarProps, type LayoutSidebarProviderProps } from 'themelia-react-ui/layout/sidebar';
 import type { UIConfig } from 'themelia-react-ui/ui-provider';
 import { Text } from 'themelia-react-ui/typography';
 
@@ -51,6 +51,57 @@ export function WorkspaceLayout({ variant = 'inset', sidebar, navigationGroups =
   </LayoutSidebarProvider>;
 }
 
+export interface WorkspaceRegionsLayoutProps {
+  /** Supply SidebarNavigationRail for a persistent area rail. */
+  primaryNavigation?: ReactNode;
+  sidebarPresentation?: 'panel' | 'rail';
+  navigationGroups?: AppSidebarProps['navigationGroups'];
+  contextualNavigationGroups?: AppSidebarProps['navigationGroups'];
+  /** Independent of shell/rail presentation: minimize to icons, hide, or stay expanded. */
+  contextualCollapsible?: AppSidebarProps['collapsible'];
+  /** A defined replacement wins over contextual groups; null removes the region. */
+  secondarySidebar?: ReactNode;
+  currentUrl?: string;
+  renderLink?: AppSidebarProps['renderLink'];
+  secondarySidebarWidth?: string;
+  openPanels?: LayoutSidebarProviderProps['openPanels'];
+  defaultOpenPanels?: LayoutSidebarProviderProps['defaultOpenPanels'];
+  onOpenPanelsChange?: LayoutSidebarProviderProps['onOpenPanelsChange'];
+  mobilePanel?: LayoutSidebarProviderProps['mobilePanel'];
+  onMobilePanelChange?: LayoutSidebarProviderProps['onMobilePanelChange'];
+  user?: HeaderUserMenuProps['user'];
+  onLogout?: () => void;
+  children?: ReactNode;
+}
+
+/** One provider coordinates the primary area and adjacent contextual navigation. */
+export function WorkspaceRegionsLayout({ primaryNavigation, sidebarPresentation = 'panel',
+  navigationGroups = {}, contextualNavigationGroups, contextualCollapsible = 'icon', secondarySidebar,
+  currentUrl, renderLink, secondarySidebarWidth,
+  openPanels, defaultOpenPanels = ['primary', 'secondary'], onOpenPanelsChange,
+  mobilePanel, onMobilePanelChange, user, onLogout, children }: WorkspaceRegionsLayoutProps) {
+  const hasContextualNavigation = secondarySidebar !== undefined
+    ? secondarySidebar != null && secondarySidebar !== false : contextualNavigationGroups !== undefined;
+  return <LayoutSidebarProvider adaptTo="container" className="min-h-0"
+    navigationPanel={hasContextualNavigation ? 'secondary' : 'primary'}
+    openPanels={openPanels} defaultOpenPanels={defaultOpenPanels} onOpenPanelsChange={onOpenPanelsChange}
+    mobilePanel={mobilePanel} onMobilePanelChange={onMobilePanelChange}>
+    <AppLayout variant="light-header" contentSurface="inset" className="h-svh min-h-0"
+      logo={<Text weight="semibold">Admin</Text>} sidebarTrigger={<SidebarTrigger />}
+      sidebarPresentation={sidebarPresentation}
+      mobileSidebarMode={sidebarPresentation === 'rail' ? 'inline' : 'drawer'}
+      secondarySidebarWidth={secondarySidebarWidth}
+      slots={{
+        headerEnd: user && <HeaderUserMenu user={user} onLogout={onLogout} />,
+        sidebar: primaryNavigation ?? <AppSidebar className="h-full" surface="transparent" menuDensity="comfortable"
+          navigationGroups={navigationGroups} currentUrl={currentUrl} renderLink={renderLink} />,
+        secondarySidebar: hasContextualNavigation ? secondarySidebar !== undefined ? secondarySidebar : <AppSidebar className="h-full" surface="transparent"
+          collapsible={contextualCollapsible} menuDensity="comfortable" searchable
+          navigationGroups={contextualNavigationGroups} currentUrl={currentUrl} renderLink={renderLink} /> : undefined,
+      }}>{children}</AppLayout>
+  </LayoutSidebarProvider>;
+}
+
 export interface WorkspaceExamplePageProps {
   onCreate: () => void;
   narrow?: boolean;

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

@@ -0,0 +1,271 @@
+import { CreditCard, FileText, Send } from 'lucide-react';
+import { Badge } from 'themelia-react-ui/base/badge';
+import { Card } from 'themelia-react-ui/base/cards';
+import { Alert, AlertDescription, AlertTitle } from 'themelia-react-ui/base/feedback';
+import { Stack } from 'themelia-react-ui/base/structure';
+import {
+	AddressCard,
+	AmountRow,
+	FulfillmentGroup,
+	InvoiceHeader,
+	InvoiceLineItems,
+	OrderCustomer,
+	OrderLineItem,
+	OrderSummary,
+	OrderTimeline,
+	OrderTransactions,
+	PaymentTimeline,
+	ShipmentTracking,
+	SummaryPanel,
+	type InvoiceColumn,
+	type InvoiceLineItem,
+} from 'themelia-react-ui/blocks/commerce';
+import { Page } from 'themelia-react-ui/layout/page';
+import { Money, Number as NumberValue } from 'themelia-react-ui/primitives';
+import { Text } from 'themelia-react-ui/typography';
+
+/** Mock accepted order values; the app owns tax, shipping and price calculations. */
+export function SoldProductWithSummary() {
+	return (
+		<Card title="Items and totals">
+			<Stack gap="xl">
+				<OrderLineItem
+					id="mug-sand-350"
+					title="Ceramic mug"
+					variantTitle="350 ml / Sand"
+					sku="MUG-350-SAND"
+					unitPrice="€18.00"
+					quantity={2}
+					total="€36.00"
+				/>
+				<SummaryPanel>
+					<AmountRow label="Subtotal" amount="€36.00" />
+					<AmountRow label="Shipping" amount="€6.50" />
+					<AmountRow label="Tax" note="20%" amount="€8.50" />
+					<AmountRow label="Grand total" amount="€51.00" total rollup />
+				</SummaryPanel>
+			</Stack>
+		</Card>
+	);
+}
+
+/** Custom JSX values keep their roles: quiet regular breakdown, bold financial total. */
+export function CustomServiceInvoice() {
+	// Custom columns replace the default four-column/mobile recipe with this two-column grid.
+	const serviceColumns: InvoiceColumn<InvoiceLineItem>[] = [
+		{
+			id: 'service',
+			header: 'Service',
+			width: 'minmax(0, 1fr)',
+			cell: (item) => (
+				<Stack gap="xs">
+					<Text type="inherit" className="wrap-anywhere">{item.description}</Text>
+					<Text tag="span" size="xs" type="secondary">
+						<NumberValue value={item.qty} /> × <Money amount={item.price} currency="EUR" />
+					</Text>
+				</Stack>
+			),
+		},
+		{
+			id: 'line-total',
+			header: 'Line total',
+			width: 'max-content',
+			align: 'right',
+			cell: (item) => <Money type="inherit" amount={item.total} currency="EUR" weight="regular" />,
+		},
+	];
+
+	return (
+		<InvoiceLineItems
+			items={[
+				{ description: 'Design services', qty: 1, price: 335, total: 335 },
+				{ description: 'Research workshop', qty: 2, price: 380, total: 760 },
+				{ description: 'Implementation support', qty: 3, price: 425, total: 1275 },
+			]}
+			columns={serviceColumns}
+			footerRows={[
+				{ label: 'Subtotal', value: <Money type="inherit" amount={2370} currency="EUR" weight="regular" /> },
+				{ label: 'VAT (20%)', value: <Money type="inherit" amount={474} currency="EUR" weight="regular" /> },
+				// emphasis controls the label/spacing; this React-node value owns its weight.
+				{ label: 'Invoice total', value: <Money type="inherit" amount={2844} currency="EUR" weight="bold" />, emphasis: 'total' },
+			]}
+		/>
+	);
+}
+
+export interface OrderFulfillmentDetailProps {
+	/** Requests fulfillment of the open group; the app accepts and reloads the order. */
+	onFulfill: () => void;
+	onPrintPackingSlip: () => void;
+	/** Opens the app's refund workflow, for example in an ActionDrawer. */
+	onRefund: () => void;
+}
+
+/**
+ * One order route: Page owns the heading and commands, each subject is framed
+ * once, and the buyer and payment ledger sit in the aside. Mock accepted values.
+ */
+export function OrderFulfillmentDetail({ onFulfill, onPrintPackingSlip, onRefund }: OrderFulfillmentDetailProps) {
+	return (
+		<Page
+			header={{
+				title: 'Order #1042',
+				slots: { titleSuffix: <><Badge tone="warning">Partially fulfilled</Badge><Badge tone="success">Paid</Badge></> },
+				primaryAction: { label: 'Fulfill items', onClick: onFulfill },
+				secondaryActions: [{ label: 'Print packing slip', onClick: onPrintPackingSlip }, { label: 'Refund', onClick: onRefund }],
+			}}
+			aside={(
+				<>
+					<OrderCustomer
+						surface="card"
+						name="Ava Chen"
+						email="ava.chen@example.com"
+						orderCount={4}
+						shippingAddress={{ name: 'Ava Chen', line1: '18 Ermou Street', city: 'Athens', postalCode: '105 63', country: 'Greece' }}
+						billingSameAsShipping
+					/>
+					<OrderSummary
+						surface="card"
+						goods={[{ label: 'Subtotal', amount: '€104.00' }, { label: 'Shipping', amount: '€6.50' }]}
+						total={{ label: 'Total', amount: '€110.50' }}
+						payments={[{ label: 'Paid by card', amount: '€110.50' }]}
+						paymentStatus="paid"
+					/>
+					<OrderTransactions
+						surface="card"
+						transactions={[
+							{ id: 'auth', kind: 'authorization', status: 'success', amount: '€110.50', processedAt: '12 Oct, 09:14', method: 'Visa •••• 4242' },
+							{ id: 'capture', kind: 'capture', status: 'success', amount: '€110.50', processedAt: '12 Oct, 09:15', reference: 'ch_3PqL2x' },
+						]}
+					/>
+				</>
+			)}
+		>
+			<Alert tone="warning">
+				<AlertTitle>Confirm the delivery address</AlertTitle>
+				<AlertDescription>The courier flagged the postal code; confirm it with the customer before the Athens parcel ships.</AlertDescription>
+			</Alert>
+			<FulfillmentGroup
+				status="unfulfilled"
+				location="Athens warehouse"
+				items={[{ id: 'shirt', title: 'Linen overshirt', variantTitle: 'Navy / M', sku: 'LIN-OVR-NVY-M', unitPrice: '€68.00', quantity: 1, total: '€68.00' }]}
+				actions={[{ id: 'fulfill', label: 'Fulfill items', onClick: onFulfill }, { id: 'slip', label: 'Print packing slip', onClick: onPrintPackingSlip }]}
+			/>
+			<FulfillmentGroup
+				status="fulfilled"
+				location="Thessaloniki store"
+				items={[{ id: 'mug', title: 'Stoneware mug', variantTitle: 'Salt', sku: 'MUG-STW-SALT', unitPrice: '€18.00', quantity: 2, total: '€36.00' }]}
+			/>
+			<ShipmentTracking
+				surface="card"
+				carrier="ACS Courier"
+				trackingNumber="7781 2290 114"
+				status="in_transit"
+				steps={[
+					{ label: 'Label created', done: true, timestamp: '12 Oct, 11:02' },
+					{ label: 'Picked up', done: true, timestamp: '12 Oct, 16:40' },
+					{ label: 'Out for delivery', done: false },
+					{ label: 'Delivered', done: false },
+				]}
+			/>
+			{/* OrderTimeline owns its title; the Card only frames it. */}
+			<Card>
+				<OrderTimeline
+					title="History"
+					events={[
+						{ id: 'placed', title: 'Order placed', timestamp: '12 Oct, 09:14', status: 'completed' },
+						{ id: 'shipped', title: 'Mugs shipped from Thessaloniki', timestamp: '12 Oct, 16:40', status: 'completed' },
+						{ id: 'athens', title: 'Overshirt awaiting fulfillment', timestamp: 'Now', status: 'current' },
+					]}
+				/>
+			</Card>
+		</Page>
+	);
+}
+
+export interface ReceivableInvoiceDetailProps {
+	onRecordPayment: () => void;
+	onSendReminder: () => void;
+	onApplyCredit: () => void;
+	onExportPdf: () => void;
+}
+
+/**
+ * One invoice route: the document Card is the only frame around its header,
+ * flat line items and ledger; settlement and history are separate subjects.
+ * Long secondary labels stay in the More actions menu beside the primary command.
+ */
+export function ReceivableInvoiceDetail({ onRecordPayment, onSendReminder, onApplyCredit, onExportPdf }: ReceivableInvoiceDetailProps) {
+	return (
+		<Page
+			header={{
+				title: 'INV-2026-118',
+				slots: { titleSuffix: <Badge tone="destructive">Overdue</Badge> },
+				primaryAction: { label: 'Record payment', onClick: onRecordPayment },
+				secondaryActions: [
+					{ label: 'Send reminder', onClick: onSendReminder },
+					{ label: 'Apply approved credit', onClick: onApplyCredit },
+					{ label: 'Export PDF', onClick: onExportPdf },
+				],
+				maxVisibleSecondaryActions: 1,
+			}}
+			aside={(
+				<>
+					<Card title="Settlement">
+						<SummaryPanel>
+							<AmountRow label="Invoice total" amount="€2,199.76" />
+							<AmountRow label="Bank transfer, 14 Oct" amount="€1,000.00" deduction />
+							<AmountRow label="Balance due" amount="€1,199.76" total rollup />
+						</SummaryPanel>
+					</Card>
+					<AddressCard
+						surface="card"
+						kind="billing"
+						name="Kalliope Studio IKE"
+						line1="42 Tsimiski Street"
+						city="Thessaloniki"
+						postalCode="546 23"
+						country="Greece"
+					/>
+				</>
+			)}
+		>
+			<Card>
+				<Stack gap="2xl">
+					<InvoiceHeader
+						invoiceNumber="INV-2026-118"
+						status="overdue"
+						from={{ name: 'Ledgerline Accounting', location: 'Athens' }}
+						to={{ name: 'Kalliope Studio IKE', location: 'Thessaloniki' }}
+						issuedDate="12 Oct 2026"
+						dueDate="26 Oct 2026"
+						amount="€1,199.76"
+					/>
+					<InvoiceLineItems
+						surface="flat"
+						currency="EUR"
+						items={[
+							{ description: 'Quarterly bookkeeping retainer, July to September 2026', qty: 1, price: 1275, total: 1275 },
+							{ description: 'Payroll processing (per employee)', qty: 14, price: 18.5, total: 259 },
+							{ description: 'VAT return preparation', qty: 1, price: 240, total: 240 },
+						]}
+						footerRows={[
+							{ label: 'Subtotal', value: <Money type="inherit" amount={1774} currency="EUR" weight="regular" /> },
+							{ label: 'VAT (24%)', value: <Money type="inherit" amount={425.76} currency="EUR" weight="regular" /> },
+							{ label: 'Invoice total', value: <Money type="inherit" amount={2199.76} currency="EUR" weight="bold" />, emphasis: 'total' },
+						]}
+					/>
+				</Stack>
+			</Card>
+			<Card title="Payment history">
+				<PaymentTimeline
+					events={[
+						{ label: 'Invoice issued', date: '12 Oct', icon: FileText, done: true },
+						{ label: 'Partial payment received', date: '14 Oct', amount: '€1,000.00', icon: CreditCard, done: true },
+						{ label: 'Reminder due', date: '28 Oct', icon: Send, done: false },
+					]}
+				/>
+			</Card>
+		</Page>
+	);
+}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { InlineStat } from 'themelia-react-ui/blocks/data-display';
+import { Money } from 'themelia-react-ui/primitives';
+
+/** Card-free app content: its parent owns the subject title and any surface. */
+export function AssessmentComparison({declared, assessed, currency, labels, actions}: {
+  declared: number;
+  assessed: number;
+  currency: string;
+  labels: {declared: string; assessed: string};
+  actions?: ReactNode;
+}) {
+  return <Stack gap="xl" className="@container min-w-0">
+    <div className="grid min-w-0 grid-cols-1 gap-space-xl @lg:grid-cols-2">
+      <InlineStat layout="stacked" label={labels.declared} value={<Money amount={declared} currency={currency} />} />
+      <InlineStat layout="stacked" label={labels.assessed} value={<Money amount={assessed} currency={currency} />} />
+    </div>
+    {actions && <Stack direction="horizontal" justify="end" gap="md">{actions}</Stack>}
+  </Stack>;
+}

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

@@ -1,4 +1,5 @@
 import { useState, type ReactNode } from 'react';
+import { Badge } from 'themelia-react-ui/base/badge';
 import { Button } from 'themelia-react-ui/base/buttons';
 import { Card } from 'themelia-react-ui/base/cards';
 import { MetadataList } from 'themelia-react-ui/base/metadata-list';
@@ -21,7 +22,7 @@ export interface AccountDetailProps {
 
 /** One framed subject for a drawer or dashboard: one quick control, no page chrome. */
 export function AccountDetail({ account, onEdit }: AccountDetailProps) {
-  return <Card title={account.name} headerPlacement="frame"
+  return <Card title={account.name}
     headerAction={<Button onClick={() => onEdit(account.id)}>Edit</Button>}>
     <AccountFacts account={account}/>
   </Card>;
@@ -52,9 +53,9 @@ export function AccountDetailPage({ account, onEdit, onBack, section, onSectionC
     { label: 'Send statement', onClick: () => onSendStatement(account.id) },
     { label: 'Delete account', destructive: true, onClick: () => { setError(undefined); deletion.show(); } },
   ];
-  return <Page header={{
+  return <Page narrow header={{
     title: account.name, onBack, backLabel: 'Back to accounts',
-    titleBadges: account.overdue ? [{ label: 'Overdue', tone: 'warning' }] : undefined,
+    slots: { titleSuffix: account.overdue ? <Badge tone="warning">Overdue</Badge> : null },
     primaryAction: { label: 'Edit account', onClick: () => onEdit(account.id) },
     secondaryActions: commands,
     tabs: {
@@ -68,7 +69,7 @@ export function AccountDetailPage({ account, onEdit, onBack, section, onSectionC
     },
   }}>
     {section === 'overview'
-      ? <Card title="Contact and billing" headerPlacement="frame"><AccountFacts account={account}/></Card>
+      ? <Card title="Contact and billing"><AccountFacts account={account}/></Card>
       : children}
     <ConfirmDialog {...deletion.overlayProps} destructive
       title={`Delete ${account.name}?`} description="This permanently removes the account."

package/docs/consumer-skill/examples/editable-sections.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'themelia-react-ui/base/accordion';
+import { Badge } from 'themelia-react-ui/base/badge';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { Heading, Text } from 'themelia-react-ui/typography';
+
+export interface EditableSection {
+  id: string;
+  title: string;
+  content: ReactNode;
+  /** App-localized validation status, e.g. "2 errors"; omit when valid. */
+  validationMessage?: string;
+}
+
+/** Place inside the app's one form. Closing a panel retains the same field DOM. */
+export function EditableSections({title, sections, openSections, onOpenSectionsChange}: {
+  title: string;
+  sections: EditableSection[];
+  openSections: string[];
+  onOpenSectionsChange: (values: string[]) => void;
+}) {
+  return <Stack gap="xl">
+    <Heading tag="h2" size="base">{title}</Heading>
+    <Accordion multiple value={openSections} onValueChange={onOpenSectionsChange} aria-label={title}>
+      {sections.map(section => <AccordionItem key={section.id} value={section.id}>
+        <AccordionTrigger>
+          <Stack render={<span />} direction="horizontal" gap="md" className="min-w-0">
+            <Text tag="span" size="inherit" type="inherit" weight="medium">{section.title}</Text>
+            {section.validationMessage && <>{' '}<Badge tone="destructive">{section.validationMessage}</Badge></>}
+          </Stack>
+        </AccordionTrigger>
+        <AccordionContent keepMounted>
+          <Stack gap="xl">{section.content}</Stack>
+        </AccordionContent>
+      </AccordionItem>)}
+    </Accordion>
+  </Stack>;
+}