themelia-react-ui 0.0.0-stage → 1.0.0

package/dist/workspace-Cbqz4FzN.js.map

@@ -0,0 +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":";;;;;;;;;;;;;;;AAMA,IAAaoB,IAAoE;CAChF,eAAe;CACf,cAAc;CACd,uBAAuB;AACxB,GAQaC,IAAkD;CAC9D,WAAW;CACX,kBAAkB,MAAU,GAAGC,EAAM;CACrC,cAAc;AACf,GAQaC,IAAkE;CAC9E,WAAW;CACX,aAAa;CACb,kBAAkB,MAAU,GAAGD,EAAM;AACtC,GCUME,IAA6D;CAClE,SAAS;CACT,MAAM;CACN,MAAM;AACP,GAEMC,IAA0D;CAC/D,UAAUC;CACV,SAASC;CACT,WAAWC;CACX,UAAUD;CACV,MAAMA;AACP,GAEME,IAAuD;CAC5D,UAAU;CACV,SAAS;CACT,WAAW;CACX,UAAU;CACV,MAAM;AACP;AAEA,SAASC,EAAa,GAAuB;CAE5C,OADK,OAAO,SAASR,CAAK,IACnB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAMA,CAAK,CAAC,CAAC,IADf;AAErC;AAEA,SAASS,EAAqB,EAC7B,SACA,gBAKE;CAGF,OAFKC,IAEE,kBAAChC,GAAD;EAAiB;EAAW,eAAY;CAAQ,CAAA,IAFrC;AAGnB;AAEA,SAASiC,EAAU,GAAwB,GAAyC;CAMnF,OALIC,EAAK,WAAiB,aACtBA,EAAK,SAAeA,EAAK,SACzBA,EAAK,UAAgB,cACrBC,IAAe,YACfD,EAAK,eAAe,KAAA,KAAaJ,EAAaI,EAAK,UAAU,KAAK,MAAY,aAC3E;AACR;AAEA,IAAaE,IAAkBnC,EAAM,WAAiD,SAAyB,EAC9G,WACA,YACA,SACA,aACA,kBAAe,QACf,cACA,oBACA,kBACA,qBACA,kBACA,qBACA,kBACA,cACA,UACA,GAAGoC,KACD,GAAK;CACP,IAAMC,IAAa,CAAC,CAACC,GACfC,IAAU,CAAC,CAACC;CAElB,OACC,kBAAC,OAAD;EACM;EACL,cAAYC;EACZ,WAAWC,EACV,wJACA,oEACAnB,EAAoBoB,IACpBC,CACD;EACO;EACP,GAAIR;EAVL,UAAA,CAYE,CAAC,CAACS,KACF,kBAAC,UAAD;GAAQ,WAAWH,EAAG,0EAA0EI,CAAe;GAC7G,UAAAD;EACM,CAAA,GAET,kBAAC,OAAD;GACC,WAAWH,EACV,sEACAL,KAAc,CAACE,KAAW,wEAC1BF,KAAcE,KAAW,yKACzB,CAACF,KAAcE,KAAW,qEAC1BQ,CACD;GAPD,UAAA;IASE,CAAC,CAACV,KACF,kBAAC,SAAD;KACC,WAAWK,EACV,mGACAM,CACD;KAEA,UAAA,kBAAC,OAAD;MAAK,WAAU;MACb,UAAAV;KACG,CAAA;IACC,CAAA;IAER,kBAAC,QAAD;KACC,UAAU;KACV,WAAWI,EACV,iLACAO,CACD;KAEA,UAAA,kBAAC,OAAD;MACC,WAAWP,EACV,iJACAC,MAAiB,UAAU,cAC3BO,CACD;MAEC;KACG,CAAA;IACA,CAAA;IACL,CAAC,CAACX,KACF,kBAAC,SAAD;KACC,WAAWG,EACV,gGACAS,CACD;KAEA,UAAA,kBAAC,OAAD;MAAK,WAAU;MACb,UAAAX;KACG,CAAA;IACC,CAAA;GAEJ;EACD,CAAA,CAAA;;AAEP,CAAC;AAED,EAAgB,cAAc;AAE9B,IAAaY,IAAwBpD,EAAM,WAAuD,SAA+B,EAChI,UACA,gBACA,WACA,aACA,YACA,qBACA,WACA,UACA,cACA,cACA,cACA,SAASqD,GACT,GAAGjB,KACD,GAAK;CACP,IAAMkB,IAAUC,EAAWpC,GAAqCkC,CAAW,GACrEG,IAAc,CAAC,CAACC,GAAU;CAEhC,OACC,kBAACrD,GAAD;EACM;EACL,WAAW;GAAE,MAAM;GAAY,IAAI;EAAa;EAChD,KAAI;EACJ,OAAO,EAAE,IAAI,QAAQ;EACrB,SAAS,EAAE,IAAI,UAAU;EACzB,MAAM;GAAE,MAAM;GAAO,IAAI;EAAM;EAC/B,WAAWsC,EACV,wDACAE,CACD;EACA,GAAIR;EAXL,UAAA,CAaE,kBAAChC,GAAD;GAAO,WAAU;GAAa,KAAI;GAAK,OAAM;GAAQ,MAAM;GAAO,WAAU;GAA5E,UAAA,CACC,CAAC,CAACsD,KACF,kBAAC,OAAD;IAAK,WAAU;IACb,UAAAA;GACG,CAAA,GAEL,kBAACtD,GAAD;IAAO,KAAI;IAAK,WAAU;IAA1B,UAAA;KACC,kBAACA,GAAD;MAAO,WAAU;MAAa,KAAI;MAAK,WAAU;MAAjD,UAAA;OACCuD,KACA,kBAACC,GAAD;QAAS,KAAI;QAAK,WAAU;QAC1B,UAAAC;OACO,CAAA;OAER,CAAC,CAACC,KAAU,kBAAC1D,GAAD;QAAO,WAAU;QAAa,MAAA;QAAK,OAAM;QAAS,KAAI;QAAK,WAAU;QAAmC,UAAA0D;OAAc,CAAA;OAClI,CAAC,CAACC,KAAU,kBAAC,OAAD;QAAK,WAAU;QAAmC,UAAAA;OAAY,CAAA;MACrE;;KACP,CAAC,CAACC,KACF,kBAAC9D,GAAD;MAAM,MAAK;MAAY,WAAU;MAC/B,UAAA8D;KACI,CAAA;KAEN,CAAC,CAACR,KACF,kBAAC,OAAD;MACC,cAAYF,EAAQ;MACpB,WAAU;MAET,UAAAG,EAAS,KAAK,GAAM,MACpB,kBAAC,OAAD;OAA4B,WAAU;OAAtC,UAAA,CACC,kBAACtD,GAAD,EAAA,UACE8B,EAAK,MACO,CAAA,GACd,kBAAC3B,GAAD;QAAO,QAAO;QAAS,WAAU;QAC/B,UAAA2B,EAAK;OACA,CAAA,CACF;MAPI,GAAAA,EAAK,MAAMgC,CAOf,CACL;KACG,CAAA;IAEA;GACD,CAAA,CAAA;EACP,CAAA,GAAA,CAAC,EAAEC,KAAWC,KAAoBC,MAClC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,CAAC,CAACD,KACF,kBAAC/D,GAAD;KAAO,WAAU;KAAa,MAAA;KAAK,OAAM;KAAS,KAAI;KAAK,cAAYkD,EAAQ;KAC7E,UAAAa;IACK,CAAA;IAEP,CAAC,CAACD,KACF,kBAAC9D,GAAD;KAAO,WAAU;KAAa,MAAA;KAAK,OAAM;KAAS,KAAI;KAAK,cAAYkD,EAAQ;KAC7E,UAAAY;IACK,CAAA;IAEP,CAAC,CAACE,KAAa,kBAAC,OAAD;KAAK,WAAU;KAAgC,UAAAA;IAAe,CAAA;GAC1E;EAEA,CAAA,CAAA;;AAET,CAAC;AAED,EAAsB,cAAc;AAEpC,IAAaC,IAAerE,EAAM,WAA2C,SAAsB,EAClG,WACA,aACA,aACA,eACA,eACA,eACA,cACA,SAASqD,GACT,GAAGjB,KACD,GAAK;CACP,IAAMkB,IAAUC,EAAWnC,GAA4BiC,CAAW,GAC5DiB,IAAqBtD,EAAsB,EAAE,cAAW,CAAC;CAE/D,OACC,kBAACZ,GAAD;EACC,QACC,kBAAC,OAAD;GACM;GACL,cAAYgC,EAAM,iBAAiBkB,EAAQ;GAC3C,GAAIlB;EACJ,CAAA;EAEF,KAAI;EACJ,WAAWM,EAAG,mCAAmCE,CAAS;EAT3D,UAAA,CAWC,kBAACxC,GAAD;GAAO,KAAI;GAAK,WAAU;GACxB,UAAAmE,EAAO,KAAK,MACZ,kBAACnE,GAAD;IAAsB,KAAI;IAAK,WAAU;IAAzC,UAAA,CACE,CAAC,CAACoE,EAAM,SACR,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAACrE,GAAD,EAAA,UACEqE,EAAM,MACM,CAAA,GACb,CAAC,CAACA,EAAM,eACR,kBAACtE,GAAD;MAAM,MAAK;MAAK,MAAK;MAAY,WAAU;MACzC,UAAAsE,EAAM;KACF,CAAA,CAEH;IAEN,CAAA,GAAA,kBAAC5D,GAAD;KAAW,WAAU;KACnB,UAAA4D,EAAM,MAAM,KAAK,GAAM,MAAU;MACjC,IAAMtC,IAASD,EAAK,OAAOwC,GACrBV,IAAS/B,EAAUC,GAAMC,CAAM,GAC/BwC,IAAalD,EAAYuC,IACzBY,IAAa1C,EAAK,eAAe,KAAA,IAAY,KAAA,IAAYJ,EAAaI,EAAK,UAAU,GACrF2C,KAAgB,MAAyC;OAC9D,IAAI3C,EAAK,UAAU;QAClB,EAAM,eAAe;QACrB;OACD;OACA,IAAWA,CAAI;MAChB,GACM4C,IAAU;OAAE;OAAQ;OAAO;OAAO,UAAUD;MAAa;MAE/D,IAAIE,GACH,OAAO,kBAAC9E,EAAM,UAAP,EAAA,UAA+B8E,EAAW7C,GAAM4C,CAAO,EAAkB,GAApD5C,EAAK,EAA+C;MAGjF,IAAM8C,IACL,kBAAA9E,GAAA,EAAA,UAAA;OACC,kBAACQ,GAAD;QAAW,SAAQ;QAAO,WAAWiC,EAAGR,KAAU,mCAAmC;QACnF,UAAAD,EAAK,OACL,kBAACH,GAAD;SAAsB,MAAMG,EAAK;SAAM,WAAU;QAAa,CAAA,IAE9D,kBAACyC,GAAD;SAAY,WAAWhC,EAAG,gBAAgBd,EAAamC,EAAO;SAAG,eAAY;QAAQ,CAAA;OAE5E,CAAA;OACX,kBAAClD,GAAD,EAAA,UAAA;QACC,kBAAC,OAAD;SAAK,WAAU;SAAf,UAAA,CACC,kBAACE,GAAD,EAAA,UAAYkB,EAAK,MAAiB,CAAA,GACjCC,KACF,kBAAChC,GAAD;UAAM,KAAI;UAAO,MAAK;UAAU,WAAU;UAAW,UAAAoD,EAAQ;SAAmB,CAAA,CAE3E;;QACJ,CAAC,CAACrB,EAAK,eAAe,kBAACvB,GAAD;SAAiB,OAAO;SAAI,UAAAuB,EAAK;QAA6B,CAAA;QACpF0C,MAAe,KAAA,KACf,kBAAC,OAAD;SAAK,WAAU;SAAf,UAAA,CACD,kBAACtE,GAAD;UACC,OAAOsE;UACP,MAAK;UACL,cAAYrB,EAAQ,gBAAgBqB,CAAU;UAC9C,WAAU;SACV,CAAA,GACC,kBAACpE,GAAD;UAAgB,MAAK;UAAK,WAAU;UAClC,UAAA+C,EAAQ,gBAAgBqB,CAAU;SACpB,CAAA,CACZ;;OAEM,EAAA,CAAA;OACZ,CAAC,CAAC1C,EAAK,SAAS,kBAACtB,GAAD,EAAA,UAAcsB,EAAK,MAAmB,CAAA;MACtD,EAAA,CAAA,GAGG+C,IAAgBtC,EACrB,8FACAR,KAAU,kCACVD,EAAK,WAAW,CAACC,KAAU,kCAC3BD,EAAK,YAAY,gCAClB;MAEA,IAAIA,EAAK,MAAM;OACd,IAAMgD,IAAWX,EAAmB;QACnC,MAAMrC,EAAK;QACX,UAAU8C;QACV,WAAW;QACX;QACA,UAAU9C,EAAK;QACf,UAAUA,EAAK;QACf,QAAQA,EAAK;QACb,KAAKA,EAAK;QACV,SAAS2C;OACV,CAAC;OACD,OACC,kBAAC9D,GAAD;QAAoB,MAAK;QAAK,QAAQmE;QAAgC,WAAWD;QAC/E,UAAAD;OACI,GAFK9C,EAAK,EAEV;MAER;MAEA,OACC,kBAACnB,GAAD;OAEC,MAAK;OACL,QAAQ,kBAAC,UAAD;QAAQ,MAAK;QAAS,SAAS8D;QAAc,UAAU3C,EAAK;OAAW,CAAA;OAC/E,WAAW+C;OAEV,UAAAD;MACI,GANA9C,EAAK,EAML;KAER,CAAC;IACS,CAAA,CACL;GAzGK,GAAAuC,EAAM,EAyGX,CACP;EACK,CAAA,GACN,CAAC,CAACU,KAAc,kBAAC,OAAD;GAAK,WAAU;GAAqE,UAAAA;EAAgB,CAAA,CAC/G;;AAET,CAAC;AAED,EAAa,cAAc;AAE3B,IAAaC,IAAuBnF,EAAM,WAAsD,SAA8B,EAC7H,YACA,iBACA,mBACA,YACA,WACA,cACA,SAASqD,GACT,GAAGjB,KACD,GAAK;CACP,IAAMkB,IAAUC,EAAWjC,GAAoC+B,CAAW,GAEpE+B,KAAqB,MAAgC;EAC1D,AAAIC,EAAO,YACXC,IAAiBD,CAAM;CACxB;CAEA,OACC,kBAAC,OAAD;EACM;EACL,WAAW3C,EAAG,wMAAwME,CAAS;EAC/N,GAAIR;EAHL,UAAA,CAKC,kBAAChC,GAAD;GAAO,WAAU;GAAa,MAAA;GAAK,OAAM;GAAS,KAAI;GAAK,WAAU;GAA0C,MAAK;GAAQ,cAAYkD,EAAQ;GAC9I,UAAAiC,EAAQ,KAAK,MAAW;IACxB,IAAMrD,IAASmD,EAAO,OAAOG,GACvBb,IAAaU,EAAO,eAAe,KAAA,IAAY,KAAA,IAAYxD,EAAawD,EAAO,UAAU;IAC/F,OACC,kBAACI,GAAD;KAEC,MAAK;KACL,MAAMvD,IAAS,YAAY;KAC3B,aAAaA,IAAS,UAAU;KAChC,eAAekD,EAAkBC,CAAM;KACvC,UAAUA,EAAO;KACjB,gBAAcnD;KACd,WAAWQ,EAAG,wFAAwF;KAEtG,UAAA,kBAACtC,GAAD;MAAO,WAAU;MAAa,OAAM;MAAS,KAAI;MAAK,QAAQ,kBAAC,QAAD,CAAO,CAAA;MAAG,WAAU;MAAlF,UAAA;OACA,kBAACF,GAAD;QAAM,KAAI;QAAO,MAAK;QAAU,WAAU;QAAyB,UAAAmF,EAAO;OAAY,CAAA;OACrFnD,KAAU,kBAAChC,GAAD;QAAM,KAAI;QAAO,MAAK;QAAU,WAAU;QAAW,UAAAoD,EAAQ;OAAkB,CAAA;OACxFqB,MAAe,KAAA,KAKf,kBAACnE,GAAD;QACC,MAAMmE,KAAc,MAAM,YAAY;QACtC,WAAWjC,EACV,YACAR,KAAU,+EACX;QAEC,UAAAoB,EAAQ,gBAAgBqB,CAAU;OAC7B,CAAA;OAEP,CAAC,CAACU,EAAO,UAAU,kBAAC,QAAD;QAAM,WAAU;QAAY,UAAAA,EAAO;OAAa,CAAA;MAC9D;;IACA,GA7BFA,EAAO,EA6BL;GAEV,CAAC;EACK,CAAA,GACN,CAAC,EAAEtB,KAAUG,MACb,kBAAC9D,GAAD;GAAO,WAAU;GAAa,MAAA;GAAK,OAAM;GAAS,KAAI;GAAK,WAAU;GAArE,UAAA,CACE,CAAC,CAAC2D,KAAU,kBAAC,OAAD;IAAK,WAAU;IAAkC,UAAAA;GAAY,CAAA,GACzE,CAAC,CAACG,KAAW,kBAAC9D,GAAD;IAAO,WAAU;IAAa,MAAA;IAAK,OAAM;IAAS,KAAI;IAAK,WAAU;IAAI,UAAA8D;GAAe,CAAA,CAChG;EAEJ,CAAA,CAAA;;AAEP,CAAC;AAED,EAAqB,cAAc"}

package/docs/consumer-skill/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: themelia-react-ui-consumer
+description: Use when building, integrating, theming or migrating a React consuming app with themelia-react-ui, including admin pages, forms, layouts, blocks and workflows; not for library internals.
+---
+
+# 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.
+
+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.
+
+Read only the relevant reference:
+
+- [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.
+
+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.
+
+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.
+
+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.
+
+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.
+
+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.

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

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { Button } from 'themelia-react-ui/base/buttons';
+import { Card } from 'themelia-react-ui/base/cards';
+import { SidebarTrigger } from 'themelia-react-ui/base/sidebar';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { AppLayout, type AppLayoutVariant } from 'themelia-react-ui/layout/app-shell';
+import { Page } from 'themelia-react-ui/layout/page';
+import { LayoutSidebarProvider } from 'themelia-react-ui/layout/sidebar';
+import { Text } from 'themelia-react-ui/typography';
+
+/** Pass a public AppSidebar or app-owned navigation; routing remains app-owned. */
+export function WorkspaceLayout({ variant = 'inset', sidebar, onCreate }: {
+  variant?: AppLayoutVariant;
+  sidebar: ReactNode;
+  onCreate: () => void;
+}) {
+  const content = <Page maxWidth="full" gutter={variant === 'stacked' ? 'none' : 'md'} className="py-surface"
+    header={{ title: 'Workspace', description: 'Review activity and manage your records.',
+      actions: <Button onClick={onCreate}>Create record</Button> }}>
+    <Card title="Activity"><Text>Application content goes here.</Text></Card>
+  </Page>;
+  const brand = <Text weight="semibold">Admin</Text>;
+  const trigger = <SidebarTrigger />;
+  return <LayoutSidebarProvider adaptTo="container" className="min-h-0">
+    {variant === 'stacked' ? <AppLayout variant="stacked" className="h-svh min-h-0" logo={brand}
+      nav={<Stack direction="horizontal" gap="sm"><Button onClick={onCreate}>Create record</Button></Stack>}>{content}</AppLayout>
+      : variant === 'sidebar' || variant === 'inset' ? <AppLayout variant={variant} className="h-svh min-h-0"
+        sidebar={sidebar} sidebarTrigger={trigger} slots={{ toolbarStart: brand }}>{content}</AppLayout>
+      : <AppLayout variant={variant} className="h-svh min-h-0" logo={brand} sidebar={sidebar} sidebarTrigger={trigger}>{content}</AppLayout>}
+  </LayoutSidebarProvider>;
+}

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

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { Card } from 'themelia-react-ui/base/cards';
+import { Badge } from 'themelia-react-ui/base/badge';
+import { Button } from 'themelia-react-ui/base/buttons';
+import { Input } from 'themelia-react-ui/base/text-inputs';
+import { Item } from 'themelia-react-ui/base/item';
+import { Grid, Stack } from 'themelia-react-ui/base/structure';
+import { Text } from 'themelia-react-ui/typography';
+import { ThemeScope } from 'themelia-react-ui/ui-provider';
+import { ActionDialog, useOverlayVisibility } from 'themelia-react-ui/features/overlays';
+
+export function AccountComposition({ save }: { save: (name: string) => Promise<void> }) {
+  const [name, setName] = useState('Northwind');
+  const [savedName, setSavedName] = useState(name);
+  const [error, setError] = useState<string>();
+  const editor = useOverlayVisibility();
+  return <ThemeScope style={{ '--height-action': '2.5rem', '--height-control': '2.5rem' }}>
+    <Grid columns={{ base: 1, lg: 2 }} align="start" gap="xl">
+      <Card surface="card" title={savedName} titleSuffix={<Badge tone="neutral">Workspace</Badge>}
+        headerPlacement="frame" footerDivider
+        footerSlot={<Button tone="secondary" buttonStyle="outline" onClick={() => { setName(savedName); setError(undefined); editor.show(); }}>Edit workspace</Button>}>
+        <Stack gap="lg"><Text type="secondary">A framed header with one body and one footer.</Text></Stack>
+      </Card>
+      <Card surface="flat" padding="none" title="Ownership">
+        <Stack gap="md"><Text>The app owns data and save behavior.</Text>
+          <Item density="compact" title="Workspace owner" description="Assigned by the application" />
+        </Stack>
+      </Card>
+    </Grid>
+    <ActionDialog {...editor.overlayProps} title="Edit workspace" description="Update the workspace name."
+      onAsyncConfirm={async () => { setError(undefined); await save(name); setSavedName(name); }}
+      onError={() => setError('Saving failed. Please retry.')}>
+      <Stack gap="md"><Input aria-label="Workspace name" value={name} onChange={event => setName(event.target.value)} />
+        {error && <Text role="alert">{error}</Text>}</Stack>
+    </ActionDialog>
+  </ThemeScope>;
+}

package/docs/consumer-skill/examples/content-workflow.tsx

@@ -0,0 +1,13 @@
+import { Attachment } from 'themelia-react-ui/base/attachment';
+import { CodeBlock } from 'themelia-react-ui/base/code-block';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { Text } from 'themelia-react-ui/typography';
+import { Message } from 'themelia-react-ui/blocks/collaboration';
+
+export function ReviewMessage({ previewFile, downloadFile }: { previewFile: () => void; downloadFile: () => void }) {
+ return <Message author="Operations" timestamp="Just now" align="start"><Stack gap="sm">
+  <Text>The export is ready for review.</Text>
+  <Attachment name="orders.csv" bytes={24000} kind="document" onPreview={previewFile} onDownload={downloadFile} />
+  <CodeBlock language="json" code={'{ "status": "ready" }'} showLineNumbers />
+ </Stack></Message>;
+}

package/docs/consumer-skill/examples/destructive-confirm.tsx

@@ -0,0 +1,42 @@
+import { useRef, useState } from 'react';
+import { Button } from 'themelia-react-ui/base/buttons';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { ConfirmDialog } from 'themelia-react-ui/features/overlays';
+import { Text } from 'themelia-react-ui/typography';
+
+export interface DeleteAccountProps {
+  account: { id: string; name: string };
+  // Own persistence/data updates here. Reject on failure so the dialog stays open.
+  onDelete: (id: string) => Promise<void>;
+  onCancel?: () => void;
+}
+
+// Keep this owner mounted through closure so Base UI can restore trigger focus.
+export function DeleteAccount({ account, onDelete, onCancel }: DeleteAccountProps) {
+  const inFlight = useRef(false);
+  const [open, setOpen] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string>();
+  const [deleted, setDeleted] = useState(false);
+  return <Stack gap="md">
+    <ConfirmDialog open={open} onOpenChange={next => {
+      if (inFlight.current || (next && deleted)) return;
+      if (next) setError(undefined);
+      setOpen(next);
+    }} trigger={<Button tone="destructive" buttonStyle="outline" aria-disabled={deleted}>Delete account</Button>}
+      title={`Delete ${account.name}?`} description="This permanently removes the account."
+      destructive closeOnEscape={!pending} showCancel={!pending}
+      strings={{ confirm: 'Delete permanently', cancel: 'Keep account', loading: 'Deleting account…' }}
+      onCancel={onCancel}
+      onAsyncConfirm={async () => {
+        if (inFlight.current) return;
+        inFlight.current = true; setPending(true); setError(undefined);
+        try { await onDelete(account.id); setDeleted(true); }
+        // Do not catch: ConfirmDialog handles rejection via onError and keeps it open.
+        finally { inFlight.current = false; setPending(false); }
+      }} onError={() => setError('Deletion failed. The account is kept; retry or cancel.')}>
+      {error && <Text role="alert" type="error">{error}</Text>}
+    </ConfirmDialog>
+    {deleted && <Text role="status">Account deleted.</Text>}
+  </Stack>;
+}

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

@@ -0,0 +1,28 @@
+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 { 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;
+  createdAt: string | null; balanceMinor: number | null; currency: string;
+}
+export interface AccountDetailProps {
+  account: AccountDetailRecord;
+  onEdit: (id: string) => void;
+  onBack: () => void;
+}
+
+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>
+  </Card>;
+}

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

@@ -0,0 +1,61 @@
+import { useId, useRef, useState, type FormEvent } from 'react';
+import { Button } from 'themelia-react-ui/base/buttons';
+import { Card } from 'themelia-react-ui/base/cards';
+import { FormField } from 'themelia-react-ui/base/forms';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { Input } from 'themelia-react-ui/base/text-inputs';
+import { Text } from 'themelia-react-ui/typography';
+
+export interface AccountEditValue { id: string; name: string; }
+export interface AccountEditProps {
+  initial: AccountEditValue;
+  // Resolve with the authoritative saved value; reject if persistence failed.
+  onSave: (value: AccountEditValue) => Promise<AccountEditValue>;
+  onCancel: () => void;
+}
+
+// Mount with key={initial.id} when switching records. Draft state belongs to this mount.
+export function AccountEdit({ initial, onSave, onCancel }: AccountEditProps) {
+  const id = useId();
+  const input = useRef<HTMLInputElement>(null);
+  const inFlight = useRef(false);
+  const [name, setName] = useState(initial.name);
+  const [validation, setValidation] = useState<string>();
+  const [error, setError] = useState<string>();
+  const [pending, setPending] = useState(false);
+  const [saved, setSaved] = useState(false);
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (inFlight.current) return;
+    setError(undefined); setSaved(false);
+    const trimmed = name.trim();
+    if (trimmed.length < 2) {
+      setValidation('Enter at least two characters.'); input.current?.focus(); return;
+    }
+    setValidation(undefined); inFlight.current = true; setPending(true);
+    try {
+      const result = await onSave({ id: initial.id, name: trimmed });
+      setName(result.name); setSaved(true);
+    } catch {
+      setError('Saving failed. Your draft is kept; retry Save account.');
+    } finally { inFlight.current = false; setPending(false); }
+  }
+  return <Card title="Edit account" surface="card">
+    <form onSubmit={submit} noValidate aria-busy={pending}>
+      <Stack gap="lg">
+        <FormField label="Account name" htmlFor={id} required error={validation}
+          hint="At least two characters." supportingTextId={`${id}-help`}>
+          <Input ref={input} id={id} value={name} required disabled={pending}
+            aria-invalid={Boolean(validation)} aria-describedby={`${id}-help`}
+            onChange={event => { setName(event.target.value); setValidation(undefined); setError(undefined); setSaved(false); }} />
+        </FormField>
+        {error && <Text role="alert" type="error">{error}</Text>}
+        {saved && <Text role="status">Account saved.</Text>}
+        <Stack direction={{ base: 'vertical', sm: 'horizontal' }} gap="sm">
+          <Button type="submit" loading={pending} strings={{ loading: 'Saving account…' }}>Save account</Button>
+          <Button type="button" tone="secondary" buttonStyle="outline" disabled={pending} onClick={onCancel}>Cancel edit</Button>
+        </Stack>
+      </Stack>
+    </form>
+  </Card>;
+}

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

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { EmailComposer, type ComposerDraft, type EmailComposerProps, type PlaceholderSet, type PreparedEmail } from 'themelia-react-ui/features/email-composer';
+
+type Customer = { name: string };
+type Key = 'customer.name';
+const sets: PlaceholderSet<Customer, Key>[] = [{ id: 'customer', label: 'Customer', definitions: {
+	'customer.name': { label: 'Customer name', resolve: customer => customer.name, required: true, editable: true },
+} }];
+
+/** The app owns persistence and delivery; never place an endpoint inside a UI wrapper. */
+export function CustomerEmail({ customer, deliver }: { customer: Customer; deliver: (email: PreparedEmail<Key>) => Promise<void> }) {
+	const [draft, setDraft] = useState<ComposerDraft<Key>>({
+		to: [{ name: 'Ada', email: 'ada@example.com' }], cc: [], bcc: [],
+		subject: 'Hello {{customer.name}}', body: { kind: 'text', text: 'Hello {{customer.name}},\n\nHow can we help?' }, placeholderOverrides: {},
+	});
+	return <EmailComposer value={draft} onChange={setDraft} context={customer} placeholders={{ sets }} onSend={deliver} />;
+}
+
+/** The application's data client owns the registry, pending/error state, retry and cancellation. */
+export function TemplateEmail({ templates, deliver }: {
+	templates: NonNullable<EmailComposerProps['templates']>;
+	deliver: (email: PreparedEmail<string>) => Promise<void>;
+}) {
+	return <EmailComposer context={{}} templates={templates} onSend={deliver} />;
+}

package/docs/consumer-skill/examples/hierarchy-capture.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { Card } from 'themelia-react-ui/base/cards';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { Label } from 'themelia-react-ui/typography';
+import { Tree, type TreeNode } from 'themelia-react-ui/base/tree';
+import { Cascader } from 'themelia-react-ui/base/cascader';
+import { SignaturePad, type SignaturePadValue } from 'themelia-react-ui/base/signature-pad';
+import { Questionnaire, type QuestionnaireAnswers, type QuestionnaireQuestion } from 'themelia-react-ui/features/questionnaire';
+
+const departments: TreeNode[] = [{ value: 'operations', label: 'Operations', children: [{ value: 'support', label: 'Support' }, { value: 'logistics', label: 'Logistics' }] }];
+const questions: QuestionnaireQuestion[] = [{ id: 'purpose', type: 'textarea', title: 'What do you need help with?', required: true }];
+
+export function HierarchyCapture() {
+ const [department, setDepartment] = useState<string | string[] | null>(null);
+ const [signature, setSignature] = useState<SignaturePadValue>({ strokes: [] });
+ return <Card title="Assignment and acknowledgement"><Stack gap="lg">
+  <Stack gap="dense"><Label htmlFor="assignment-department">Department</Label><Cascader id="assignment-department" items={departments} value={department} onValueChange={setDepartment} aria-label="Department" /></Stack>
+  <Tree items={departments} aria-label="Department hierarchy" selectionMode="none" />
+  <SignaturePad value={signature} onValueChange={setSignature} name="acknowledgement" />
+ </Stack></Card>;
+}
+
+export function GuidedRequest({ submit }: { submit: (answers: QuestionnaireAnswers, signal: AbortSignal) => Promise<void> }) {
+ return <Card title="Request assistance"><Questionnaire questions={questions} onSubmit={(answers, { signal }) => submit(answers, signal)} /></Card>;
+}

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

@@ -0,0 +1,36 @@
+import { Button } from 'themelia-react-ui/base/buttons';
+import { Card } from 'themelia-react-ui/base/cards';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { DataTable, type DataTableProps } from 'themelia-react-ui/features/table';
+import { Email, Name } from 'themelia-react-ui/primitives';
+import { Text } from 'themelia-react-ui/typography';
+
+export interface AccountRow { id: string; name: string; email: string; }
+export type AccountIndexState =
+  | { status: 'loading' }
+  | { status: 'error'; message: string }
+  | { status: 'ready'; records: AccountRow[] };
+export interface AccountIndexProps {
+  state: AccountIndexState;
+  onRetry: () => void;
+  hrefFor: (account: AccountRow) => string;
+  onNavigate: (href: string) => void;
+}
+
+// The app loads records and drives state; table actions report navigation intent.
+export function AccountIndex({ state, onRetry, hrefFor, onNavigate }: AccountIndexProps) {
+  const columns: DataTableProps<AccountRow, unknown>['columns'] = [
+    { accessorKey: 'name', header: 'Name', cell: ({ row }) => <Name value={row.original.name} /> },
+    { accessorKey: 'email', header: 'Email', cell: ({ row }) => <Email value={row.original.email} /> },
+  ];
+  return <Card title="Accounts" surface="card">
+    {state.status === 'loading' ? <Text role="status">Loading accounts…</Text> :
+      state.status === 'error' ? <Stack gap="md">
+        <Text role="alert" type="error">{state.message}</Text>
+        <Button onClick={onRetry}>Retry loading</Button>
+      </Stack> : <DataTable columns={columns} data={state.records} surface="flat"
+        getRowId={account => account.id} enablePagination={false} showFullscreenToggle={false}
+        emptyStateMessage="No accounts yet." emptyStateAction={<Button onClick={onRetry}>Refresh accounts</Button>}
+        rowActions={[{ id: 'open', label: 'Open account', onClick: account => onNavigate(hrefFor(account)) }]} />}
+  </Card>;
+}

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

@@ -0,0 +1,94 @@
+{
+  "schemaVersion": 1,
+  "examples": [
+    {
+      "file": "composition.tsx",
+      "exports": [
+        "AccountComposition"
+      ],
+      "phase": "basic",
+      "optionalPeers": []
+    },
+    {
+      "file": "index-table.tsx",
+      "exports": [
+        "AccountIndex"
+      ],
+      "phase": "optional",
+      "optionalPeers": [
+        "@tanstack/react-table"
+      ]
+    },
+    {
+      "file": "detail.tsx",
+      "exports": [
+        "AccountDetail"
+      ],
+      "phase": "basic",
+      "optionalPeers": []
+    },
+    {
+      "file": "edit.tsx",
+      "exports": [
+        "AccountEdit"
+      ],
+      "phase": "optional",
+      "optionalPeers": [
+        "react-hook-form"
+      ]
+    },
+    {
+      "file": "destructive-confirm.tsx",
+      "exports": [
+        "DeleteAccount"
+      ],
+      "phase": "basic",
+      "optionalPeers": []
+    },
+    {
+      "file": "email-composer.tsx",
+      "exports": [
+        "CustomerEmail",
+        "TemplateEmail"
+      ],
+      "phase": "optional",
+      "optionalPeers": [
+        "@tiptap/react",
+        "@tiptap/starter-kit"
+      ]
+    },
+    {
+      "file": "receipt.tsx",
+      "exports": [
+        "PurchaseReceipt"
+      ],
+      "phase": "basic",
+      "optionalPeers": []
+    },
+    {
+      "file": "hierarchy-capture.tsx",
+      "exports": [
+        "HierarchyCapture",
+        "GuidedRequest"
+      ],
+      "phase": "basic",
+      "optionalPeers": []
+    },
+    {
+      "file": "content-workflow.tsx",
+      "exports": [
+        "ReviewMessage"
+      ],
+      "phase": "basic",
+      "optionalPeers": []
+    },
+    {
+      "file": "app-layout.tsx",
+      "exports": [
+        "WorkspaceLayout"
+      ],
+      "phase": "basic",
+      "optionalPeers": []
+    }
+  ]
+}

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

@@ -0,0 +1,19 @@
+import { Receipt, ReceiptItems, type ReceiptLineItem } from 'themelia-react-ui/blocks/commerce/receipt';
+import { MetadataList } from 'themelia-react-ui/blocks/data-display';
+import { Money } from 'themelia-react-ui/primitives';
+import { Separator } from 'themelia-react-ui/base/display';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { Heading, Text } from 'themelia-react-ui/typography';
+
+/** Business calculations, translated copy, actions and optional QR composition belong to the app. */
+export function PurchaseReceipt({ items, total, reference }: { items: readonly ReceiptLineItem[]; total: number; reference: string }) {
+	return <Receipt header={<Heading>Purchase receipt</Heading>} footer={<Text size="xs" type="secondary">Thank you for your purchase.</Text>}>
+		<Stack gap="lg">
+			<MetadataList layout="rows" items={[{ label: 'Reference', value: reference }]} />
+			<Separator dashed />
+			<ReceiptItems items={items} currency="EUR" unit="minor" />
+			<Separator dashed />
+			<MetadataList layout="rows" items={[{ label: 'Total', value: <Money tag="div" className="block" amount={total} currency="EUR" unit="minor" weight="semibold" /> }]} />
+		</Stack>
+	</Receipt>;
+}