themelia-react-ui 2.0.1 → 2.0.2

package/dist/workspace-Cdrg7k9f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-Cdrg7k9f.js","names":["Icon","React","_Fragment","Text","DisplayLabel","Heading","focusRecipes","Stack","toneRecipes","Progress","interactionRecipes","Value","SecondaryValue","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","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 { 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-radius 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 gap-space-xl p-surface-lg',\n\t\t\t\t\t\t\tcontentWidth === 'full' && 'max-w-none',\n\t\t\t\t\t\t\tcontentClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</main>\n\t\t\t\t{!!hasRail && (\n\t\t\t\t\t<aside\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'workspace-layout--rail hidden min-h-0 border-l border-border bg-background @min-[96rem]/workspace-layout:block',\n\t\t\t\t\t\t\trailClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"h-full overflow-y-auto overscroll-contain p-space-lg\">\n\t\t\t\t\t\t\t{rail}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</aside>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nWorkspaceLayout.displayName = 'WorkspaceLayout';\n\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\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-inner 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\" className=\"[overflow-wrap:anywhere]\">\n\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{!!badges && <Stack direction=\"horizontal\" wrap align=\"center\" gap=\"sm\" className=\"workspace-record-header--badges\">{badges}</Stack>}\n\t\t\t\t\t\t\t{!!status && <div className=\"workspace-record-header--status\">{status}</div>}\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t\t{!!description && (\n\t\t\t\t\t\t<Text type=\"secondary\" 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=\"workspace-record-header--actions flex max-w-full shrink-0 flex-wrap items-center gap-space-md justify-end\">\n\t\t\t\t\t{!!secondaryNodes && (\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{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=\"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{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\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<Stack direction=\"horizontal\" wrap align=\"center\" gap=\"md\" className=\"workspace-locale-strip--locales min-w-0\" role=\"group\" aria-label={strings.ariaLabel}>\n\t\t\t\t{locales.map((locale) => {\n\t\t\t\t\tconst active = locale.id === activeLocale;\n\t\t\t\t\tconst completion = locale.completion === undefined ? undefined : clampPercent(locale.completion);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={locale.id}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\ttone={active ? 'primary' : 'secondary'}\n\t\t\t\t\t\t\tbuttonStyle={active ? 'solid' : 'ghost'}\n\t\t\t\t\t\t\tonClick={() => handleLocaleClick(locale)}\n\t\t\t\t\t\t\tdisabled={locale.disabled}\n\t\t\t\t\t\t\taria-pressed={active}\n\t\t\t\t\t\t\tclassName={cn('workspace-locale-strip--item justify-start')}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Stack direction=\"horizontal\" align=\"center\" gap=\"md\" render={<span />} className=\"min-w-0\">\n\t\t\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" className=\"truncate text-inherit\">{locale.label}</Text>\n\t\t\t\t\t\t\t{active && <Text tag=\"span\" size=\"inherit\" className=\"sr-only\">{strings.activeLabel}</Text>}\n\t\t\t\t\t\t\t\t{completion !== undefined && (\n\t\t\t\t\t\t\t\t\t/* On an active pill the button surface is solid, so the tonal\n\t\t\t\t\t\t\t\t\t    badge variants land coloured-on-coloured. Derive the nested\n\t\t\t\t\t\t\t\t\t    badge from the primary foreground pair so it remains legible\n\t\t\t\t\t\t\t\t\t    when dark themes intentionally lighten `--primary`. */\n\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\ttone={completion >= 100 ? 'success' : 'secondary'}\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'shrink-0',\n\t\t\t\t\t\t\t\t\t\t\tactive && 'border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground',\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{strings.completionLabel(completion)}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{!!locale.status && <span className=\"shrink-0\">{locale.status}</span>}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Stack>\n\t\t\t{!!(status || actions) && (\n\t\t\t\t<Stack direction=\"horizontal\" wrap align=\"center\" gap=\"md\" className=\"workspace-locale-strip--actions shrink-0\">\n\t\t\t\t\t{!!status && <div className=\"workspace-locale-strip--status\">{status}</div>}\n\t\t\t\t\t{!!actions && <Stack direction=\"horizontal\" wrap align=\"center\" gap=\"sm\" className=\"\">{actions}</Stack>}\n\t\t\t\t</Stack>\n\t\t\t)}\n\t\t</div>\n\t);\n});\n\nWorkspaceLocaleStrip.displayName = 'WorkspaceLocaleStrip';\n"],"mappings":"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"}

package/docs/consumer-skill/SKILL.md

@@ -18,8 +18,8 @@ Each rule has an owning prop or component, and the [composition checker](referen
 3. Give commands roles: one `header.primaryAction`, ordered `header.secondaryActions`, `destructive: true` plus `ConfirmDialog`; the header renders `[secondary…] [primary] [⋯]`. Record headers in `features/resource`, `layout/workspace` and `layout/settings` take the same props. A record's sections go in `header.tabs`. An untoned `Button` is the neutral outline; give only the main command `tone="primary"` (solid), one per page or surface.
 4. Space siblings with `Stack`/`Grid` and their semantic `gap` (`themelia-react-ui/base/structure`), not flex divs with gap or margin utilities.
 5. Write copy with `Heading`/`Text`, not raw `h1`–`h6`; show values with `Money`, `Date`, `Number` and `Percent`, and use `useMoneyFormatter()` inside strings.
-6. Color with semantic classes (`bg-muted`, `text-muted-foreground`, `border-border`, status tones); palette classes such as `bg-blue-500` bypass theming and dark mode.
-7. Badges stay neutral unless the status means `success`, `warning`, `destructive` or `info`. Titles, facts and rows get no decorative icons, and gaps, not dividers, separate a card's sections.
+6. Color with semantic classes (`bg-muted`, `text-muted-foreground`, `border-border`, status tones); palette classes such as `bg-blue-500` bypass theming and dark mode. Pair surfaces with their ink and use text roles instead of partial opacity.
+7. Badges stay neutral unless the status means `success`, `warning`, `destructive` or `info`. Titles, facts and rows get no decorative icons. A framed card rules its header and footer by default; gaps, not dividers, separate sections inside its body.
 8. In a Card, badges go in `titleSuffix`, one quick control in `headerAction`, a command list in `actions` and the commit action in `footerSlot`.
 9. Dialogs, confirmations, drawers and sheets come only from `themelia-react-ui/features/overlays` (`ActionDialog`, `ConfirmDialog`, `ActionDrawer` with `useOverlayVisibility`); never hand-roll a modal, import `Dialog`/`Sheet` primitives or add a modal library.
 

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

@@ -6,7 +6,7 @@ Claude Code read; in a project that has only `CLAUDE.md`, paste it there. It
 points agents at this installed skill and states when UI work is done.
 
 ```md
-<!-- themelia-react-ui:start 2.0.1 -->
+<!-- themelia-react-ui:start 2.0.2 -->
 ## UI built with themelia-react-ui
 Before writing UI, read node_modules/themelia-react-ui/docs/consumer-skill/SKILL.md and the
 installed declarations; prefer them over memory. Find the owner for a task with:

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

@@ -232,12 +232,14 @@ compact subject; it is not the default for forms, settings, metrics or resource
 pages. Component size and
 density do not choose Card padding. `lg` uses 1.8 times the inset (36px), while
 `none` removes it. All sizes follow the surface roots and space-scale.
-Dividers are off by default and
-should stay off: separate a card's sections with `contentGap` or a Stack gap
-clearly larger than the row gap (`2xl` between sections). UIProvider can configure
-`card.defaultHeaderDivider` and `card.defaultFooterDivider`; explicit per-card
-booleans win. Header/footer-only cards still render one shared divider.
-Overlays are the exception: `ActionDialog`, `ActionDrawer` and `ConfirmDialog`
+Card dividers are on by default: a framed card rules its header and footer apart,
+while flat, card-free structure and a `headerPlacement="frame"` header draw no
+rule unless asked. UIProvider's `card.defaultHeaderDivider` and
+`card.defaultFooterDivider` (both `true`) turn the framed rules off app-wide;
+explicit per-card booleans win. Header/footer-only cards render one shared divider.
+Inside the body, separate a card's sections with `contentGap` or a Stack gap
+clearly larger than the row gap (`2xl` between sections), not rules.
+Overlays rule their regions the same way: `ActionDialog`, `ActionDrawer` and `ConfirmDialog`
 draw one rule between header, body and footer (one rule when there is no body),
 owned by the overlay; do not add borders to their content.
 

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

@@ -18,9 +18,10 @@ Load intentional, scoped app overrides after the package stylesheet. Keep broad
 
 UIProvider supplies stable mount-time defaults: explicit prop, provider default, fallback. Per-mount requests/data/callbacks stay on components. ThemeScope from themelia-react-ui/ui-provider places descendant portals inside its CSS boundary. A styled div does not relocate body portals; explicit Base UI portal containers take precedence.
 
-For separated card regions, configure the single application provider with
-`card: { defaultSurface: 'card', defaultHeaderDivider: true, defaultFooterDivider: true }`.
-Explicit Card booleans, including false, override these defaults. Ordinary card
+Framed card regions are ruled apart by default. To separate them by spacing
+alone, configure the single application provider with
+`card: { defaultHeaderDivider: false, defaultFooterDivider: false }`.
+Explicit Card booleans override these defaults. Ordinary card
 padding remains md, independent of density. The typed [workspace recipe](../examples/app-layout.tsx)
 exports `workspaceUIDefaults` for that root configuration and composes the public
 workspace/user controls. It does not mount another UIProvider inside the app.

package/docs/consumer-skill/references/public-api.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "discoveryVersion": 1,
   "package": "themelia-react-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "stylesheets": [
     "themelia-react-ui/style.css",
     "themelia-react-ui/theme.css",
@@ -12,7 +12,7 @@
   "peers": [
     {
       "name": "@base-ui/react",
-      "range": "^1.8.0",
+      "range": "1.8.0-kpo.2",
       "optional": false
     },
     {
@@ -2450,15 +2450,19 @@
         "ComboboxArrow",
         "ComboboxBackdrop",
         "ComboboxChip",
+        "ComboboxChipProps",
         "ComboboxChips",
         "ComboboxChipsInput",
         "ComboboxClear",
+        "ComboboxClearProps",
         "ComboboxCollection",
+        "ComboboxControlStrings",
         "ComboboxEmpty",
         "ComboboxGroup",
         "ComboboxGroupLabel",
         "ComboboxInput",
         "ComboboxInputTrigger",
+        "ComboboxInputTriggerProps",
         "ComboboxItem",
         "ComboboxItemIndicator",
         "ComboboxList",
@@ -2470,6 +2474,7 @@
         "ComboboxStatus",
         "ComboboxTrigger",
         "ComboboxValue",
+        "defaultComboboxControlStrings",
         "useComboboxFilter"
       ],
       "optionalPeers": [],
@@ -13555,6 +13560,103 @@
       ],
       "recipes": []
     },
+    {
+      "import": "themelia-react-ui/features/appointment-calendar",
+      "declaration": "dist/components/features/appointment-calendar/index.d.ts",
+      "symbols": [
+        "Appointment",
+        "AppointmentCalendar",
+        "AppointmentCalendarProps",
+        "AppointmentCalendarStrings",
+        "AppointmentCalendarView",
+        "AppointmentCategory",
+        "AppointmentCategoryColor",
+        "AppointmentConflict",
+        "AppointmentDateRange",
+        "AppointmentPerson",
+        "AppointmentRenderContext",
+        "AppointmentStatus",
+        "appointmentsOn",
+        "defaultAppointmentCalendarStrings",
+        "filterAppointments",
+        "findConflicts"
+      ],
+      "optionalPeers": [],
+      "layer": "features",
+      "responsibility": "Features family: Appointment calendar.",
+      "jobs": [
+        "Bookings need a month beside a day or week agenda with category and staff filters and double-booking alerts."
+      ],
+      "tags": [
+        "appointment-calendar",
+        "features",
+        "navigation & data"
+      ],
+      "aliases": [
+        "appointments",
+        "booking calendar",
+        "salon bookings",
+        "scheduler"
+      ],
+      "sections": [
+        "Features"
+      ],
+      "guidance": [
+        {
+          "title": "Appointment calendar",
+          "description": "Bookings need a month beside a day or week agenda with category and staff filters and double-booking alerts.",
+          "chooseWhen": [
+            "Bookings need a month beside a day or week agenda with category and staff filters and double-booking alerts."
+          ],
+          "avoidWhen": [
+            "Events need month-grid browsing with in-cell event chips; use the event calendar."
+          ],
+          "appOwned": [],
+          "jobs": [
+            "Bookings need a month beside a day or week agenda with category and staff filters and double-booking alerts."
+          ],
+          "tags": [
+            "features",
+            "navigation & data",
+            "appointment-calendar"
+          ],
+          "aliases": [
+            "booking calendar",
+            "appointments",
+            "scheduler",
+            "salon bookings"
+          ],
+          "section": "Features",
+          "browse": {
+            "category": "workflows-features",
+            "group": "Appointment calendar",
+            "domain": "Planning & places",
+            "collection": ""
+          },
+          "sections": [
+            {
+              "title": "Overview",
+              "symbols": []
+            },
+            {
+              "title": "Examples",
+              "symbols": []
+            },
+            {
+              "title": "API",
+              "symbols": [
+                "AppointmentCalendar"
+              ]
+            }
+          ],
+          "alternatives": [
+            "themelia-react-ui/base/date-pickers",
+            "themelia-react-ui/features/event-calendar"
+          ]
+        }
+      ],
+      "recipes": []
+    },
     {
       "import": "themelia-react-ui/features/async-preview",
       "declaration": "dist/components/features/async-preview/index.d.ts",
@@ -16202,6 +16304,7 @@
         "FormRichTextEditorProps",
         "RichTextCaretContext",
         "RichTextEditor",
+        "RichTextEditorBodyHeight",
         "RichTextEditorHandle",
         "RichTextEditorImages",
         "RichTextEditorProps",

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

@@ -67,6 +67,13 @@ literal headings produce review warnings; warnings alone do not fail CI. Message
 identify the owner and remedy. Dialog-like UI outside the overlay owners warns
 too: native elements with `role="dialog"`/`"alertdialog"` or `aria-modal`, a
 `fixed inset-0` layer, and imports of another modal library.
+
+The checker also rejects faded semantic text colors and partial opacity on
+imported typography/value primitives, including aliases and namespace imports.
+Use the shared secondary/status role. Presence endpoints (0/100) and the shared
+disabled 50% treatment remain valid; component disabled props keep that dimming
+with its owner.
+
 Standalone compact Cards and Page gutter removal also produce review warnings.
 Buttons placed in a Page or PageHeader `actions` region warn as well: pass
 commands as `primaryAction` and ordered `secondaryActions` so the header owns

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

@@ -4,10 +4,20 @@ The [design contract](design-contract.md) records which geometry changes togethe
 and which variant choices remain independent. Retheme shared responsibilities;
 avoid overriding individual components to imitate another density or inset.
 
-Use shadcn semantic surfaces/foregrounds: background, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, charts and sidebar. Central success/info/warning foreground pairs express states; never overload primary or statuses as decoration. `--input` is the one control boundary: fields, select and date triggers, checkboxes, radios, switch tracks and outline buttons all draw it, so adjoining controls read as one family. It is deliberately soft and translucent, reading the same on every surface; focus and invalid edges carry the 3:1 contrast. `--border` is for dividers and surface edges. Keep that split when rebranding.
+Use shadcn semantic surfaces/foregrounds: background, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, charts and sidebar. Central success/info/warning foreground pairs express states; never overload primary or statuses as decoration. `--input` is the one resting control boundary: fields, select and date triggers, checkboxes, radios, switch tracks and outline buttons all draw it, so adjoining controls read as one family. It provides at least 3:1 contrast on the declared background, card, popover, muted, accent and secondary surfaces in both modes. Focus and invalid edges retain their separate 3:1 contract. `--border` is for quieter dividers and surface edges. When rebranding, check resting controls as well as focused controls, including the outside edge of fields with their own fill.
 
 tokens.json distinguishes 23 structural roots, advanced typography/status settings, and derived utility spellings. A utility is not another public variable. Keep overrides in one stylesheet at root or ThemeScope, without copying computed CSS into JavaScript.
 
+Pair each painted surface with its intended ink: `bg-card text-card-foreground`
+and `bg-popover text-popover-foreground` are matching pairs. Flat sections inherit
+the containing surface. For app-owned primary copy in a differently colored
+surface, use Text/Value `type="inherit"` and Label `className="text-inherit"`;
+standalone typography keeps its documented defaults. Keep secondary, link, status
+and inverse roles explicit, and use a secondary text role instead of fading text
+with opacity. Component disabled props own dimming; an extra faded wrapper can
+multiply it. Brand colors alone do not guarantee input/focus contrast: retain the
+central `--input`/`--ring` roles or verify their replacements on every host surface.
+
 The default `--radius` is 0.75rem (12px). One public root drives two shared
 roles; component owners choose the role, so ordinary callers add no radius class.
 
@@ -47,6 +57,14 @@ replacing individual components' owned corners.
 
 Action and editable-control heights are separate roles; keep roots equal for adjoining alignment. `--space-scale` multiplies structural gaps, inline insets and surface padding. `--density-scale` multiplies action/control height and collection block padding. Roots are unscaled measurements; do not pre-multiply and then apply the utility again.
 
+Control heights are nominal floors when custom typography needs more room.
+Native fields, Select and InputGroup frames fit their editable line plus the
+border, and cap vertical padding to the space remaining in the nominal height.
+The default 32/36/40px sizes and radius roles stay unchanged. Text actions grow
+under their intentionally tighter leading, so independently enlarged type can
+produce different fitted heights even with equal action/control roots. Check
+type size, leading and height roots together when exact custom pairing matters.
+
 Both surface roots default to 1.25rem. At a 16px root font and space-scale 1,
 ordinary surface insets are 20px, compact insets are 10px and large insets are
 36px. Page's default large gutters inherit that same recipe. Row insets,
@@ -65,11 +83,58 @@ Use discrete inset, density and size props for the component responsibility desc
 
 The default primary is near-black so success and other status colors never compete
 with it. `themelia-react-ui/themes/green.css`, imported after `style.css`, is the
-opt-in Themelia green brand (primary, its foreground, the dark accent and the first
-chart series). Rebrand by setting `--primary` and `--primary-foreground` in both
-`:root` and `.dark`; keep the brand hue clear of the status hues and check 4.5:1.
+opt-in Themelia green brand (primary, its foreground and the dark accent; the first
+chart series is already that green). Rebrand by setting `--primary` and
+`--primary-foreground` in both `:root` and `.dark`; the sidebar's primary follows
+them in both modes. Keep the brand hue clear of the status hues and check 4.5:1.
+
+Root overrides reach body portals. Scoped themes use ThemeScope from ui-provider.
+The nearest explicit `.light` or `.dark` boundary governs the palette and dark
+utilities, including repeated nesting and scoped portals. This uses inherited
+custom-property container style queries, supported in Chromium 111+, Safari 18.1+
+and Firefox 151+. The internal mode marker is state derived from those classes;
+it is not another customization setting.
+
+When ThemeScope's `style` supplies `--primary`, its default `--primary-accent`
+and `--sidebar-primary` references resolve at that scope. The same applies to
+`--primary-foreground` / `--sidebar-primary-foreground`, `--foreground` /
+`--popover-foreground`, and `--font-sans` / `--font-heading`. Explicit local role
+overrides in CSS or `style` win. A child scope with no new source override
+inherits independent roles unchanged. Mode-dependent roles such as the elevated
+dark `--popover` stay owned by the palette.
+
+Package defaults and these alias references live in the `theme` cascade layer.
+Explicit Tailwind utility overrides therefore win on plain scopes and scopes
+with a mode class, as do unlayered consumer CSS and inline overrides. Keep the
+standard `theme, base, components, utilities` layer order when composing your
+application stylesheet.
+
+CSS class themes declare their source roots and dependent aliases together:
+CSS resolves aliases at their declaration boundary, and a scope cannot infer
+which declarations an arbitrary consumer stylesheet supplied.
+
+```css
+.tenant-theme {
+  --primary: oklch(0.45 0.12 250);
+  --primary-accent: var(--primary);
+  --sidebar-primary: var(--primary);
+  --primary-foreground: oklch(0.99 0 0);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --font-sans: Georgia, serif;
+  --font-heading: var(--font-sans);
+}
+```
+
+Advanced editing uses the theme-tweaker public API, editing CSS rather than
+adding another JavaScript styling system.
 
-Root overrides reach body portals. Scoped themes use ThemeScope from ui-provider. Advanced editing uses the theme-tweaker public API, editing CSS rather than adding another JavaScript styling system.
+For tenant exports, pass the whole result of
+`createScopedAdminUIThemeSelectors(scopeSelector)` to `serializeAdminUITheme`.
+Its additive `modeScope` metadata selects light/dark values by the nearest mode
+boundary, including complex selector lists. The existing `shared`, `light` and
+`dark` strings remain available; manually supplied selectors without `modeScope`
+are emitted literally. Mode-specific ChartStyle series use the same boundary
+policy, while a fixed single-color series remains independent of mode.
 
 Explicit portal containers take precedence over the nearest ThemeScope. Place those containers inside the intended theme boundary; a portal deliberately moved outside it cannot inherit that boundary automatically. Test the opened popup, not only its trigger.
 
@@ -108,4 +173,4 @@ heights. `--icon` and `--avatar` set media dimensions independently. Component
 Test these choices separately and in combination. Tables follow row insets,
 Cards and code/message bodies follow surfaces, and image containment uses generic
 spacing. Foundation directional spacing utilities ship with style.css and use
-the same seven steps as gaps; generated spellings are not new theme roots.
+the same eight steps as gaps; generated spellings are not new theme roots.

package/docs/consumer-skill/references/tokens.json

@@ -1,6 +1,6 @@
 {
   "package": "themelia-react-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "structural": [
     {
       "name": "--space-scale",

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

@@ -18,6 +18,14 @@ and explicit maximums from your column definitions. The table owns its one named
 scroll region. Verify grouped widths, sticky header rows and first-column behavior
 with real overflow in both directions, rather than adding another focusable wrapper.
 
+## Media selection
+
+For a browsing `MediaLibrary` with `bulkActions`, localize the selected-assets
+region through `strings.batchActionsLabel` (English default: `Batch actions`).
+The visible selection summary and Clear action stay in
+`strings.footer.selectedCount` and `strings.footer.clear`. The native
+`BatchActionBar` owns the region and its dismissal/focus behavior.
+
 ## Comment attachments
 
 `Comments` and `CommentComposer` announce attachment validation/upload errors.
@@ -72,6 +80,23 @@ in pagination URLs. A criteria-driven business selector would be a different
 product contract. The recipe's English labels are example copy: adapt labels,
 criteria and component `strings` for app translation and permissions.
 
+DataTable accessibility copy also belongs to `strings`: use
+`accessibility.sortColumn(columnLabel)` and `accessibility.resizeColumn(columnLabel)`
+for column controls, `emptyState.ariaLabel` for the empty-result status and
+`selection.label` for the selected-row action region. Partial overrides preserve
+the other English defaults.
+
+For searchable selection, `Combobox` uses `strings.clear` and `strings.toggle`;
+both single and multiple recipes use `strings.dismiss` for the two screen-reader
+dismissal controls. `MultiCombobox` uses `strings.removeSelection(itemLabel)` for
+each removal button.
+Custom base anatomy exposes `ComboboxInputTrigger` strings `{ clear, toggle }`,
+`ComboboxClear` strings `{ clear }` and `ComboboxChip` strings `{ remove }`.
+`ComboboxRoot` preserves the supported upstream `dismissLabel` prop. This private
+build requires the companion Base UI `1.8.0-kpo.2` archive. It includes that public seam
+and preserves an existing focus target inside a parent popup during nested
+popup dismissal.
+
 Strict imported declarations require the manifest's optional peers. DataTable
 sorting is disabled because the app's server owns query order. Loading/error
 feedback occupies the empty result region while query context remains mounted;

package/docs/consumer-skill/scripts/composition-policy.mjs

@@ -1,4 +1,4 @@
-import { surfaceParts, surfaceForwarders, paddingClass, paddingProperty, utility, focusRingDrift, fadedText, sharedCornerParts, displayNames, nativeDisplayNames, marginProperty, radiusProperty, replacesSharedRadius, cornerRole, addsCopyMargin } from './surface-policy.mjs';
+import { surfaceParts, surfaceForwarders, paddingClass, paddingProperty, utility, focusRingDrift, fadedText, textOpacityDrift, textContentNames, sharedCornerParts, displayNames, nativeDisplayNames, marginProperty, radiusProperty, replacesSharedRadius, cornerRole, addsCopyMargin } from './surface-policy.mjs';
 
 const controlNames = /^(?:Base)?(?:Button|ButtonLink|IconButton)$|^(Input|InputGroup|InputGroupInput|InputGroupTextarea|Textarea|PasswordInput|Select|SelectTrigger|ComboboxInput|ComboboxInputTrigger|ComboboxTrigger)$/;
 const controlFamilies = new Set(['buttons', 'text-inputs', 'choice-inputs', 'combobox']);
@@ -365,6 +365,7 @@ export function analyzeComposition(text, { filename, index, ts }) {
     const control = controlFamilies.has(family) && controlNames.test(owner.symbol);
     const sharedCorners = sharedCornerParts[family]?.test(owner.symbol);
     const display = owner.import === `${index.package}/typography` && displayNames.test(owner.symbol);
+    const textContent = display || owner.import === `${index.package}/primitives` && textContentNames.test(owner.symbol);
     const fixedText = owner.import === `${index.package}/typography` && owner.symbol === 'DisplayLabel' || family === 'badge' && owner.symbol === 'Badge';
     const badge = family === 'badge' && owner.symbol === 'Badge';
     for (const name of ['className', 'headerClassName', 'contentClassName', 'footerClassName', 'subHeadingClassName']) {
@@ -376,7 +377,7 @@ export function analyzeComposition(text, { filename, index, ts }) {
       if (control && name === 'className' && classes.some(value => fixedControlClass.test(value))) add(node, 'control-anatomy', 'error', `${owner.symbol}: use its size/variant props; preserve shared control height, inset, corners and typography.`);
       if ((name === 'className' && (control || sharedCorners) || name === 'contentClassName' && forwarder) && classes.some(value=>replacesSharedRadius(value, control && name === 'className' ? 'inner' : cornerRole(family,owner.symbol)))) add(node,'shared-radius','error',`${owner.symbol}: outer shells use rounded-radius; controls and collection rows use bounded rounded-inner. Preserve the owning role and joined-edge resets.`);
       if (display && classes.some(addsCopyMargin)) add(node,'copy-margin','error',`${owner.symbol}: typography is margin-free; use textGap on the headed owner or gap on Stack/Grid.`);
-      if (display && name === 'className' && tokens.some(fadedText)) add(node,'faded-text','error',`${owner.symbol}: use its type prop (main, secondary) instead of ${[...new Set(tokens.filter(fadedText))].join(', ')}; an opacity-faded text role falls under 4.5:1.`);
+      if (textContent && name === 'className' && tokens.some(token=>fadedText(token)||textOpacityDrift(token))) add(node,'faded-text','error',`${owner.symbol}: use its semantic type instead of adding an opacity tier to the text. Presence endpoints and shared disabled state remain valid.`);
       if ((control || family === 'buttons' && owner.symbol === 'TextButton') && name === 'className' && focusDrift.length) add(node, 'focus-ring-recipe', 'error', `${owner.symbol}: keep the shared focus indicator (a ring-3 halo of ring-ring/50 around a full-strength ring edge); ${[...new Set(focusDrift)].join(', ')} redraws it.`);
       if (fixedText && name === 'className' && classes.some(value => fixedTextClass.test(value) || badge && /^rounded(?:-|$)/.test(value))) add(node, 'fixed-text-role', 'error', `${owner.symbol}: preserve its shared typography${badge ? ' and radius' : ''}; use its public variants and className for placement.`);
     }

package/docs/consumer-skill/scripts/surface-policy.mjs

@@ -25,6 +25,7 @@ export const sharedCornerParts = {
   sheet: /^SheetContent$/,
 };
 export const displayNames = /^(?:Text|Heading|DisplayLabel|Label|TextLink)$/;
+export const textContentNames = /^(?:Value|SecondaryValue|MutedValue|MonoValue|EmptyValue|Number|Percent|Money|Date|DateTime|Time|Duration|Name|Email|Phone|Link|FileSize|Dimensions|DateRange|RelativeTime|Url|Initials)$/;
 export const nativeDisplayNames = /^(?:p|h[1-6])$/;
 export const marginProperty = /^margin(?:Inline|Block)?(?:Start|End)?$|^margin(?:Top|Right|Bottom|Left)$|^margin-(?:(?:inline|block)(?:-(?:start|end))?|top|right|bottom|left)$/;
 export const radiusProperty = /^border(?:(?:Top|Bottom)(?:Left|Right)|(?:Start|End)(?:Start|End))?Radius$|^border-(?:(?:top|bottom)-(?:left|right)-|(?:start|end)-(?:start|end)-)?radius$/;
@@ -69,6 +70,16 @@ export function fadedText(token) {
   return value !== 'text-sidebar-foreground/70' && textRole.test(value);
 }
 
+/** Separate opacity on an owned text node changes its semantic ink as well. */
+export function textOpacityDrift(token) {
+  const value = utility(token);
+  const match = value.match(/^opacity-(?:(\d+(?:\.\d+)?)|\[(\d*\.?\d+)(%)?\])$/);
+  if (!match) return false;
+  const opacity = match[1] !== undefined ? Number(match[1]) : Number(match[2]) * (match[3] ? 1 : 100);
+  if (!(opacity > 0 && opacity < 100)) return false;
+  return !(opacity === 50 && variantSegments(variants(token)).some(segment => disabledSegment.test(segment)));
+}
+
 // Interaction fills come from one recipe owner: accent for rows, muted for toggle
 // hover, a lifted card segment and the table ladder. A neutral fill with opacity or
 // a primary tint under hover, highlight, selection, current or pressed state is a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "themelia-react-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A composable React UI library for modern admin applications, built on Base UI and Tailwind with shadcn-compatible themes, shared design tokens, reusable layouts, blocks and workflows.",
   "publishConfig": {
     "access": "public",
@@ -279,6 +279,10 @@
       "types": "./dist/components/features/event-calendar/index.d.ts",
       "import": "./dist/features/event-calendar.js"
     },
+    "./features/appointment-calendar": {
+      "types": "./dist/components/features/appointment-calendar/index.d.ts",
+      "import": "./dist/features/appointment-calendar.js"
+    },
     "./features/filters": {
       "types": "./dist/components/features/filters/index.d.ts",
       "import": "./dist/features/filters.js"
@@ -456,7 +460,7 @@
     "test:browser": "npm run build:preview && node scripts/run-browser.mjs",
     "check:package": "node scripts/check-package.mjs",
     "check": "npm run check:contract && npm run check:preview && npm run check:docs && npm run lint && npm run check:design-lint && npm run typecheck && npm test && npm run build && npm run check:skill && npm run check:maps && npm run check:package && npm run build:preview",
-    "check:contract": "node --test scripts/test-runtime-ownership.mjs scripts/test-primitive-geometry.mjs scripts/test-source-entrypoints.mjs scripts/test-utility-vocabulary.mjs scripts/test-theme-contrast.mjs && node scripts/check-contract.mjs",
+    "check:contract": "node --test scripts/test-runtime-ownership.mjs scripts/test-primitive-geometry.mjs scripts/test-source-entrypoints.mjs scripts/test-utility-vocabulary.mjs scripts/test-theme-contrast.mjs scripts/test-theme-modes.mjs && node scripts/check-contract.mjs",
     "lint": "node scripts/generate-utilities.mjs && oxlint src/components src/lib src/preview docs/consumer-skill/examples templates --deny-warnings",
     "check:design-lint": "node scripts/generate-utilities.mjs && node scripts/check-design-lint.mjs",
     "check:preview": "node scripts/check-preview.mjs",
@@ -477,7 +481,7 @@
     "check:release": "npm run check:all && npm run check:agent && npm run build:docs && npm run check:static-docs"
   },
   "peerDependencies": {
-    "@base-ui/react": "^1.8.0",
+    "@base-ui/react": "1.8.0-kpo.2",
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.0.0",
@@ -519,7 +523,7 @@
     "zustand": "^5.0.12"
   },
   "devDependencies": {
-    "@base-ui/react": "^1.8.0",
+    "@base-ui/react": "file:./base-ui-react-1.8.0-kpo.2.tgz",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",