admin-ui-starter-kit 0.6.6 → 0.6.8

package/.agents/skills/component-library-rules/SKILL.md

@@ -715,8 +715,8 @@ There is exactly **one** library provider: `<UIProvider>` from `@/lib/ui-provide
 - `typography.defaultTextSize`
 - `item.defaultSize`, `item.defaultVariant`
 - `button.defaultButtonStyle`
-- `card.defaultPadding`
-- `toast.duration`, `toast.position`
+- `card.defaultPadding`, `card.defaultSurface`, `card.defaultHeaderDivider`
+- `toast.duration`, `toast.position`, `toast.theme`, `toast.closeButton`, `toast.richColors`, `toast.visibleToasts`
 - `spinner.defaultVariant`
 - `media.resolveUrl`, `media.resolveName`
 

package/.agents/skills/component-library-rules/references/components/INDEX.json

@@ -3,27 +3,41 @@
   {"id":"base/alert","title":"Alert","description":"Semantic notice primitive with icon, title, description, and responsive action regions.","layer":"base","family":"Display","tags":["base","display","alert","semantic","notice","primitive","icon"],"sourcePath":"src/components/base/display/alert","publicImport":"admin-ui-starter-kit/base/display","examples":["AlertVariants","AlertWithActions","InverseAlert","StatusRoleAlert"],"doc":"./base__alert.md"},
   {"id":"base/avatar","title":"Avatar","description":"Avatar, fallback initials, and stacked avatars for compact identity surfaces.","layer":"base","family":"Display","tags":["base","display","avatar","fallback","initials","stacked","avatars"],"sourcePath":"src/components/base/display/avatar","publicImport":"admin-ui-starter-kit/base/display","examples":["AvatarSizes","StackedAvatarsExample","RealisticUserCard"],"doc":"./base__avatar.md"},
   {"id":"base/badge","title":"Badge","description":"Status pills and chips for tags, counts, and inline state.","layer":"base","family":"Foundations","tags":["base","foundations","badge","status","pills","chips","tags"],"sourcePath":"src/components/base/badge","publicImport":"admin-ui-starter-kit/base/badge","examples":["Default","Variants","WithDot"],"doc":"./base__badge.md"},
+  {"id":"base/boolean-indicator","title":"Boolean indicator","description":"Compact yes/no status treatment for boolean fields in admin surfaces.","layer":"base","family":"Display","tags":["base","display","boolean-indicator","boolean","indicator","compact","yes"],"sourcePath":"src/components/base/display/boolean-indicator","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__boolean-indicator.md"},
   {"id":"base/buttons","title":"Buttons","description":"The base button family — BaseButton (semantic variants, style, package scale), the higher-level Button (loader / tooltip / link wrapper), and specialty buttons (Google, Shopify, Text, PageAction).","layer":"base","family":"Foundations","tags":["base","foundations","buttons","button","family","basebutton","semantic"],"sourcePath":"src/components/base/buttons","publicImport":"admin-ui-starter-kit/base/buttons","examples":["Default","AllVariantsSolid","AllVariantsOutline","AllVariantsGhost","VariantStyleMatrix","Sizes","IconOnlySizes","WithIconLeft","WithIconRight","StateDisabled","StateFullWidth","ButtonComboFeatures","LoaderButtonStates","LoaderButtonInteractive","TooltipButtonExample","GoogleButtonExample","ShopifyButtonExample","TextButtonSizes","PageActionButtonVariants","PageActionButtonSizes","RealisticToolbar"],"doc":"./base__buttons.md"},
   {"id":"base/cards","title":"Cards (SmartCard)","description":"The composed card primitive — header (icon, title, suffix, slots), optional alert, expandable body, footer text or slot, and calibrated card spacing.","layer":"base","family":"Foundations","tags":["base","foundations","cards","smartcard","composed","card","primitive"],"sourcePath":"src/components/base/cards","publicImport":"admin-ui-starter-kit/base/cards","examples":["Default","WithIconTooltipFooter","WithActions","AlertVariants","PaddingSizes","SurfaceVariants","FrameMode","HeaderSlots","HeaderAndFooterDividers","ExpandableUncontrolled","ExpandableCustomLabels","Skeleton","MetricKPICard","NotificationCard","PrimitiveComposition","StatRowClickable"],"doc":"./base__cards.md"},
   {"id":"base/carousel","title":"Carousel","description":"Embla-backed carousel with keyboard navigation, orientation support, plugins, and base Button controls.","layer":"base","family":"Navigation & data","tags":["base","navigation","data","carousel","embla","backed","keyboard","orientation"],"sourcePath":"src/components/base/carousel","publicImport":"admin-ui-starter-kit/base/carousel","examples":["ProductCarousel","InsideControlsCarousel","GalleryCarousel","ProductGridGallery","TopNavigationCarousel","ResponsiveCarousel","VerticalCarousel","LocalizedControls"],"doc":"./base__carousel.md"},
   {"id":"base/chart","title":"Chart","description":"Token-aware Recharts helpers plus a composed ChartCard for admin analytics surfaces.","layer":"base","family":"Display","tags":["base","display","chart","token","aware","recharts","helpers"],"sourcePath":"src/components/base/display/chart","publicImport":"admin-ui-starter-kit/base/display/chart","examples":["BarChartCard","AreaChartCard","LineChartCard","DonutChartCard","RadialChartCard","MixedSeriesChartCard"],"doc":"./base__chart.md"},
+  {"id":"base/collapsible","title":"Collapsible","description":"Base wrapper for inline disclosure and expand/collapse content.","layer":"base","family":"Display","tags":["base","display","collapsible","wrapper","inline","disclosure","expand"],"sourcePath":"src/components/base/display/collapsible","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__collapsible.md"},
   {"id":"base/combobox","title":"Combobox","description":"EnhancedCombobox and EnhancedComboboxMultiple — searchable, optionally grouped, with apply / close-on-select behaviours, async fetchers, custom rendering, and form integration.","layer":"base","family":"Forms & inputs","tags":["base","forms","inputs","combobox","enhancedcombobox","enhancedcomboboxmultiple","searchable","optionally"],"sourcePath":"src/components/base/combobox","publicImport":"admin-ui-starter-kit/base/combobox","examples":["Default","SingleSelect","SingleHighlightMatch","SingleCreatable","MultipleSelect","MultipleApplyButton","MultipleCloseOnSelect","MultipleGrouped","GroupedTeamByRole","AsyncCustomers","AsyncResourceCustomerPicker","AsyncDebouncedSearch","AsyncWithLoadMore","CustomItemRendering","CustomGroupLabels","CssVariableScale","Disabled","Invalid","MinSearchLength","RealisticCustomerPicker","FormFieldIntegration"],"doc":"./base__combobox.md"},
+  {"id":"base/conditional-rendering","title":"Conditional rendering","description":"Small display helper for conditional content with an explicit fallback.","layer":"base","family":"Display","tags":["base","display","show-if","conditional","rendering","small","helper"],"sourcePath":"src/components/base/display/show-if","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__conditional-rendering.md"},
   {"id":"base/copyable","title":"Copyable","description":"Click-to-copy inline span with hover affordance and toast feedback.","layer":"base","family":"Display","tags":["base","display","copyable","click","copy","inline","span"],"sourcePath":"src/components/base/copyable","publicImport":"admin-ui-starter-kit/base/copyable","examples":["Default","Mono","MonoTruncate","CustomDisplayValue","CustomToastMessage","RealisticOrderRow","CustomerListWithCopyableEmails"],"doc":"./base__copyable.md"},
   {"id":"base/css-variables","title":"CSS Variables","description":"Token reference for the compact structural contract that controls typography, spacing, density, controls, rows, surfaces, media, and shell dimensions.","layer":"base","family":"Foundations","tags":["base","foundations","*","css","variables","token","reference"],"sourcePath":"src/css/themes/shadcn.default.css + src/css/tokens/*","publicImport":"","examples":["ScalePreview","RuntimeOverrideDemo","VariableExplorer"],"doc":"./base__css-variables.md"},
   {"id":"base/currency","title":"Currency","description":"MoneyDisplay and CurrencyPairPreview — locale-aware, dual-pricing-aware money rendering driven by useCurrency() / UIProvider config.","layer":"base","family":"Display","tags":["base","display","currency","moneydisplay","currencypairpreview","locale","aware"],"sourcePath":"src/components/base/currency","publicImport":"admin-ui-starter-kit/base/currency","examples":["Default","Sizes","MultipleCurrencies","EmptyState","PairStackedEmphasisVariants","PairInlineEmphasisVariants","PairMinimalVariant","CurrencyPairPreviewExample","ProviderConfigDualPricing","RealisticOrdersList"],"doc":"./base__currency.md"},
+  {"id":"base/date-block","title":"Date block","description":"Compact date display block for event, schedule, and timeline summaries.","layer":"base","family":"Display","tags":["base","display","date-block","date","block","compact","event"],"sourcePath":"src/components/base/display/date-block","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__date-block.md"},
   {"id":"base/date-pickers","title":"Date pickers","description":"DatePicker (single / range / multiple) and MonthYearPicker — popover-based, locale-aware, with optional year dropdown and time input.","layer":"base","family":"Forms & inputs","tags":["base","forms","inputs","date-pickers","date","pickers","datepicker","single"],"sourcePath":"src/components/base/date-pickers","publicImport":"admin-ui-starter-kit/base/date-pickers","examples":["Default","ModeSingle","ModeRange","ModeMultiple","WithYearDropdown","ButtonStyles","MonthYearPickerExample","DateRangePickerLegacy","WithTimeInput","RealisticDateFilter"],"doc":"./base__date-pickers.md"},
-  {"id":"base/display-utilities","title":"Display utilities","description":"Narrow display helpers only: separator, banners, boolean indicators, conditionals, progress, skeleton, and utility wrappers.","layer":"base","family":"Display","tags":["base","display","utilities","narrow","helpers","only"],"sourcePath":"src/components/base/display","publicImport":"admin-ui-starter-kit/base/display","examples":["NotificationBannerVariants","SeparatorExample","BooleanIndicatorExample","ShowIfExample","ThrottleAlertExample","VisuallyHiddenExample","PlaceholderPatternExample","AlertExample","ProgressExample","SkeletonExample","CollapsibleExample","DialogExample","DateBlockExample","MoneyDisplayExample","QRCodeExample"],"doc":"./base__display-utilities.md"},
+  {"id":"base/dialog","title":"Dialog","description":"Base dialog wrapper for simple modal content and confirmations.","layer":"base","family":"Display","tags":["base","display","dialog","wrapper","simple","modal","content"],"sourcePath":"src/components/base/display/dialog","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__dialog.md"},
+  {"id":"base/display-utilities","title":"Display utilities","description":"Index for small display primitives. Each utility now has its own page so it is searchable from the preview sidebar.","layer":"base","family":"Display","tags":["base","display","utilities","index","small","primitives"],"sourcePath":"src/components/base/display","publicImport":"admin-ui-starter-kit/base/display","examples":["NotificationBannerVariants","SeparatorExample","BooleanIndicatorExample","ShowIfExample","ThrottleAlertExample","VisuallyHiddenExample","PlaceholderPatternExample","AlertExample","ProgressExample","SkeletonExample","PageSkeletonExample","TwoColumnPageSkeletonExample","TableSkeletonExample","CollapsibleExample","DialogExample","DateBlockExample","MoneyDisplayExample","QRCodeExample"],"doc":"./base__display-utilities.md"},
   {"id":"base/event-calendar","title":"Event calendar","description":"Month view with categories, filtering, navigation rules, custom event rendering, and three day-heading variants.","layer":"base","family":"Navigation & data","tags":["base","navigation","data","event-calendar","event","calendar","month","view"],"sourcePath":"src/components/base/event-calendar","publicImport":"admin-ui-starter-kit/base/event-calendar","examples":["Default","RangeModeMonthYearCompactMonthYearJump","NavigationLimitsDisabledDates","FilterEventRenderEventCustomEventRendering","DayHeadingVariantTinted","DayHeadingVariantBordered","DayHeadingVariantAccent","WithCustomStringsBG"],"doc":"./base__event-calendar.md"},
   {"id":"base/forms","title":"Forms","description":"The full form scope — FormField wrapper plus every field component exported from base/forms/fields: text inputs, numeric, selects, toggles, choice groups, date/time, repeaters, localized fields, and uploads.","layer":"base","family":"Forms & inputs","tags":["base","forms","inputs","full","form","scope","formfield"],"sourcePath":"src/components/base/forms","publicImport":"admin-ui-starter-kit/base/forms","examples":["BasicField","WithError","WithHelperText","WorkflowChrome","InputBasic","InputWithIcons","PasswordInputExample","SlugFieldExample","InputWithAddons","InputClearableLoading","InputCharacterCount","TextareaExample","DecimalInputExample","PercentageInputExample","CurrencyInputExample","MoneyInputExample","WeightInputExample","DimensionsInputExample","SelectExample","RichSelectExample","RoundingModeSelectExample","SwitchExample","CheckboxExample","ToggleFieldExample","SwitchCardExample","PillRadioGroupExample","ListRadioGroupExample","CardRadioGroupExample","CardCheckboxGroupExample","DateTimeInputExample","TimePickerExample","SliderExample","TagsInputExample","PhoneInputExample","CoordinatesInputExample","StringRepeaterExample","ObjectRepeaterExample","KeyValueEditorExample","ListExample","LocalizedStringFieldExample","LocalizedObjectFieldExample","LocalizedStringRepeaterExample","AvatarUploadExample","DropzoneExample","WholeForm"],"doc":"./base__forms.md"},
   {"id":"base/icon-badge","title":"Icon badge","description":"Tokenized icon container for status, resource, and row media affordances.","layer":"base","family":"Display","tags":["base","display","icon-badge","icon","badge","tokenized","container"],"sourcePath":"src/components/base/display/icon-badge","publicImport":"admin-ui-starter-kit/base/display","examples":["IconBadgeTones","IconBadgeShapes","IconBadgeSmallDefault"],"doc":"./base__icon-badge.md"},
   {"id":"base/item","title":"Item","description":"Canonical row primitive — icon/avatar/image media, title + description content, optional actions. Use ItemGroup to compose lists.","layer":"base","family":"Foundations","tags":["base","foundations","item","canonical","row","primitive","icon"],"sourcePath":"src/components/base/item","publicImport":"admin-ui-starter-kit/base/item","examples":["Basic","Variants","PolymorphicLink"],"doc":"./base__item.md"},
   {"id":"base/map","title":"Map","description":"Leaflet-backed map primitives — Map shell, MapTileLayer, MapMarker, MapPopup. Always wrap in a fixed-height container.","layer":"base","family":"Navigation & data","tags":["base","navigation","data","map","leaflet","backed","primitives","shell"],"sourcePath":"src/components/base/map","publicImport":"admin-ui-starter-kit/base/map","examples":["Default","MultipleMarkers","TighterZoom","CompactSize"],"doc":"./base__map.md"},
+  {"id":"base/money-display","title":"Money display","description":"Formatted monetary value display that follows the UIProvider money defaults.","layer":"base","family":"Display","tags":["base","display","money-display","money","formatted","monetary","value"],"sourcePath":"src/components/base/display/money-display","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__money-display.md"},
   {"id":"base/navigation","title":"Navigation","description":"The navigation primitives — PageHeader, Breadcrumbs, ActionMenu, LanguageSwitcher, SectionNav, SideNav, AsideNavigationMenu, TabNavigationMenu, NavigationTabs, OverflowTabBar.","layer":"base","family":"Navigation & data","tags":["base","navigation","data","primitives","pageheader","breadcrumbs","actionmenu"],"sourcePath":"src/components/base/navigation","publicImport":"admin-ui-starter-kit/base/navigation","examples":["PageHeaderExample","SectionNavSticky","BreadcrumbsSizes","ActionMenuExample","LanguageSwitcherButtons","LanguageSwitcherInline","AsideNavigationMenuExample","TabNavigationMenuExample","NavigationTabsRound","SideNavCollapsibleGroups","OverflowTabBarResponsiveWithMoreMenu"],"doc":"./base__navigation.md"},
+  {"id":"base/notification-banner","title":"Notification banner","description":"Inline status banner for low-friction information, success, warning, and error states.","layer":"base","family":"Display","tags":["base","display","notification-banner","notification","banner","inline","status"],"sourcePath":"src/components/base/display/notification-banner","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__notification-banner.md"},
+  {"id":"base/placeholder-pattern","title":"Placeholder pattern","description":"Subtle diagonal SVG placeholder fill for empty media, maps, and generated previews.","layer":"base","family":"Display","tags":["base","display","placeholder-pattern","placeholder","pattern","subtle","diagonal"],"sourcePath":"src/components/base/display/placeholder-pattern","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__placeholder-pattern.md"},
+  {"id":"base/progress","title":"Progress","description":"Base progress wrapper for completion, quota, and loading indicators.","layer":"base","family":"Display","tags":["base","display","progress","wrapper","completion","quota","loading"],"sourcePath":"src/components/base/display/progress","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__progress.md"},
+  {"id":"base/qr-code","title":"QR code","description":"QR code display wrapper for share links, check-in codes, and payment references.","layer":"base","family":"Display","tags":["base","display","qr-code","code","wrapper","share","links"],"sourcePath":"src/components/base/display/qr-code","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__qr-code.md"},
+  {"id":"base/separator","title":"Separator","description":"Horizontal and vertical separator wrapper for grouping dense admin content.","layer":"base","family":"Display","tags":["base","display","separator","horizontal","vertical","wrapper","grouping"],"sourcePath":"src/components/base/display/separator","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__separator.md"},
+  {"id":"base/skeleton","title":"Skeleton","description":"Reusable loading skeletons for content rows, pages, two-column detail views, and tables.","layer":"base","family":"Display","tags":["base","display","skeleton","reusable","loading","skeletons","content"],"sourcePath":"src/components/base/display/skeleton","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__skeleton.md"},
   {"id":"base/spinner","title":"Spinner","description":"Loading indicator with three visual variants. Pairs with content placeholders, route transitions, and Suspense fallbacks.","layer":"base","family":"Feedback","tags":["base","feedback","spinner","loading","indicator","visual","variants"],"sourcePath":"src/components/base/spinner","publicImport":"admin-ui-starter-kit/base/spinner","examples":["Default","Variants","WithLabel","CustomColour","SectionPlaceholder"],"doc":"./base__spinner.md"},
   {"id":"base/table","title":"Table","description":"DataTable + Pagination — TanStack-React-Table-backed, with sorting, row actions, sticky header, calibrated table rhythm, and three surface chromes.","layer":"base","family":"Navigation & data","tags":["base","navigation","data","table","datatable","pagination","tanstack","react"],"sourcePath":"src/components/base/table","publicImport":"admin-ui-starter-kit/base/table","examples":["BasicDefault","ComfortableTable","SurfaceGlassHeaderTransparentCleanOutlineNoMutedHeader","SurfaceFlatInsideSmartCardTableRendersNoChrome","WithSortingRowActions","PaginationExample","RealisticOrdersTable","FilteredTabbedOrdersTable","CellRenderers","IndexTableCells","WithRowSelection","WithColumnVisibility","WithCustomToolbar","DataViewChrome","StickyHeaderAndFirstColumn","EmptyState"],"doc":"./base__table.md"},
+  {"id":"base/throttle-alert","title":"Throttle alert","description":"Compact warning surface for rate limits, lockouts, and retry windows.","layer":"base","family":"Display","tags":["base","display","throttle-alert","throttle","alert","compact","warning"],"sourcePath":"src/components/base/display/throttle-alert","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__throttle-alert.md"},
   {"id":"base/tooltip","title":"Tooltip","description":"Tooltip provider, trigger, and content wrappers for short contextual help.","layer":"base","family":"Display","tags":["base","display","tooltip","provider","trigger","content","wrappers"],"sourcePath":"src/components/base/display/tooltip","publicImport":"admin-ui-starter-kit/base/display","examples":["TooltipExample"],"doc":"./base__tooltip.md"},
   {"id":"base/typography","title":"Typography","description":"Heading, Text, Label, and TextLink — the four typography primitives every higher layer composes from.","layer":"base","family":"Foundations","tags":["base","foundations","typography","heading","text","label","textlink"],"sourcePath":"src/components/typography","publicImport":"admin-ui-starter-kit/typography","examples":["HeadingTags","HeadingWithSubHeading","TextSizes","TextTypes","TextWeights","TextLineHeights","TextAlignment","TextContentAndHTML","TextTags","LabelExample","TextLinkVariants","TextLinkSizes","HighLightExample","UnderlineExample","DangerousHTMLExample","RealisticArticle"],"doc":"./base__typography.md"},
   {"id":"base/upload-tray","title":"Upload tray","description":"Drag-drop area + per-file progress rows + summary toolbar. Composes Dropzone and UploadProgressList. Framework-agnostic — the consumer drives the actual transfer.","layer":"base","family":"Forms & inputs","tags":["base","forms","inputs","fields","upload","tray","drag","drop"],"sourcePath":"src/components/base/forms/fields","publicImport":"admin-ui-starter-kit/base/forms","examples":["Default","EmptyDropzoneOnly","MixedItemStates","LiveSimulatedUpload","LocalisedFrench"],"doc":"./base__upload-tray.md"},
+  {"id":"base/visually-hidden","title":"Visually hidden","description":"Accessible hidden text helper for icon-only controls and nonvisual labels.","layer":"base","family":"Display","tags":["base","display","visually-hidden","visually","hidden","accessible","text"],"sourcePath":"src/components/base/display/visually-hidden","publicImport":"admin-ui-starter-kit/base/display","examples":[],"doc":"./base__visually-hidden.md"},
   {"id":"common/brand","title":"Common · Brand","description":"Inline Logo + AppLogo variants used by the preview shell.","layer":"common","family":"Branding","tags":["common","branding","_brand","brand","inline","logo","applogo"],"sourcePath":"src/preview/_brand","publicImport":"","examples":["LogoExample","AppLogoSizes","AppLogoVariants"],"doc":"./common__brand.md"},
   {"id":"composed/admin","title":"Composed · Admin","description":"Team list, permissions, conversations, settings, inventory.","layer":"composed","family":"Admin","tags":["composed","admin","team","list","permissions","conversations"],"sourcePath":"src/components/composed/admin","publicImport":"admin-ui-starter-kit/composed/admin","examples":["TeamMembers","RolePermissions","RecentConversations","SettingsToggles","InventoryLevel","ActionSurfaces","TokenManager"],"doc":"./composed__admin.md"},
   {"id":"composed/ai","title":"Composed · AI","description":"Summary block, classification panel, confidence card, prompt suggestions, usage card, message bubble, tool call, citation, and feedback.","layer":"composed","family":"AI","tags":["composed","ai","summary","block","classification","panel"],"sourcePath":"src/components/composed/ai","publicImport":"admin-ui-starter-kit/composed/ai","examples":["AISummary","AIClassification"],"doc":"./composed__ai.md"},

package/.agents/skills/component-library-rules/references/components/INDEX.md

@@ -10,27 +10,41 @@ Agents: prefer `INDEX.json` (structured) for discovery; this file is for humans.
 - [Alert](./base__alert.md) — Semantic notice primitive with icon, title, description, and responsive action regions.
 - [Avatar](./base__avatar.md) — Avatar, fallback initials, and stacked avatars for compact identity surfaces.
 - [Badge](./base__badge.md) — Status pills and chips for tags, counts, and inline state.
+- [Boolean indicator](./base__boolean-indicator.md) — Compact yes/no status treatment for boolean fields in admin surfaces.
 - [Buttons](./base__buttons.md) — The base button family — BaseButton (semantic variants, style, package scale), the higher-level Button (loader / tooltip / link wrapper), and specialty buttons (Google, Shopify, Text, PageAction).
 - [Cards (SmartCard)](./base__cards.md) — The composed card primitive — header (icon, title, suffix, slots), optional alert, expandable body, footer text or slot, and calibrated card spacing.
 - [Carousel](./base__carousel.md) — Embla-backed carousel with keyboard navigation, orientation support, plugins, and base Button controls.
 - [Chart](./base__chart.md) — Token-aware Recharts helpers plus a composed ChartCard for admin analytics surfaces.
+- [Collapsible](./base__collapsible.md) — Base wrapper for inline disclosure and expand/collapse content.
 - [Combobox](./base__combobox.md) — EnhancedCombobox and EnhancedComboboxMultiple — searchable, optionally grouped, with apply / close-on-select behaviours, async fetchers, custom rendering, and form integration.
+- [Conditional rendering](./base__conditional-rendering.md) — Small display helper for conditional content with an explicit fallback.
 - [Copyable](./base__copyable.md) — Click-to-copy inline span with hover affordance and toast feedback.
 - [CSS Variables](./base__css-variables.md) — Token reference for the compact structural contract that controls typography, spacing, density, controls, rows, surfaces, media, and shell dimensions.
 - [Currency](./base__currency.md) — MoneyDisplay and CurrencyPairPreview — locale-aware, dual-pricing-aware money rendering driven by useCurrency() / UIProvider config.
+- [Date block](./base__date-block.md) — Compact date display block for event, schedule, and timeline summaries.
 - [Date pickers](./base__date-pickers.md) — DatePicker (single / range / multiple) and MonthYearPicker — popover-based, locale-aware, with optional year dropdown and time input.
-- [Display utilities](./base__display-utilities.md) — Narrow display helpers only: separator, banners, boolean indicators, conditionals, progress, skeleton, and utility wrappers.
+- [Dialog](./base__dialog.md) — Base dialog wrapper for simple modal content and confirmations.
+- [Display utilities](./base__display-utilities.md) — Index for small display primitives. Each utility now has its own page so it is searchable from the preview sidebar.
 - [Event calendar](./base__event-calendar.md) — Month view with categories, filtering, navigation rules, custom event rendering, and three day-heading variants.
 - [Forms](./base__forms.md) — The full form scope — FormField wrapper plus every field component exported from base/forms/fields: text inputs, numeric, selects, toggles, choice groups, date/time, repeaters, localized fields, and uploads.
 - [Icon badge](./base__icon-badge.md) — Tokenized icon container for status, resource, and row media affordances.
 - [Item](./base__item.md) — Canonical row primitive — icon/avatar/image media, title + description content, optional actions. Use ItemGroup to compose lists.
 - [Map](./base__map.md) — Leaflet-backed map primitives — Map shell, MapTileLayer, MapMarker, MapPopup. Always wrap in a fixed-height container.
+- [Money display](./base__money-display.md) — Formatted monetary value display that follows the UIProvider money defaults.
 - [Navigation](./base__navigation.md) — The navigation primitives — PageHeader, Breadcrumbs, ActionMenu, LanguageSwitcher, SectionNav, SideNav, AsideNavigationMenu, TabNavigationMenu, NavigationTabs, OverflowTabBar.
+- [Notification banner](./base__notification-banner.md) — Inline status banner for low-friction information, success, warning, and error states.
+- [Placeholder pattern](./base__placeholder-pattern.md) — Subtle diagonal SVG placeholder fill for empty media, maps, and generated previews.
+- [Progress](./base__progress.md) — Base progress wrapper for completion, quota, and loading indicators.
+- [QR code](./base__qr-code.md) — QR code display wrapper for share links, check-in codes, and payment references.
+- [Separator](./base__separator.md) — Horizontal and vertical separator wrapper for grouping dense admin content.
+- [Skeleton](./base__skeleton.md) — Reusable loading skeletons for content rows, pages, two-column detail views, and tables.
 - [Spinner](./base__spinner.md) — Loading indicator with three visual variants. Pairs with content placeholders, route transitions, and Suspense fallbacks.
 - [Table](./base__table.md) — DataTable + Pagination — TanStack-React-Table-backed, with sorting, row actions, sticky header, calibrated table rhythm, and three surface chromes.
+- [Throttle alert](./base__throttle-alert.md) — Compact warning surface for rate limits, lockouts, and retry windows.
 - [Tooltip](./base__tooltip.md) — Tooltip provider, trigger, and content wrappers for short contextual help.
 - [Typography](./base__typography.md) — Heading, Text, Label, and TextLink — the four typography primitives every higher layer composes from.
 - [Upload tray](./base__upload-tray.md) — Drag-drop area + per-file progress rows + summary toolbar. Composes Dropzone and UploadProgressList. Framework-agnostic — the consumer drives the actual transfer.
+- [Visually hidden](./base__visually-hidden.md) — Accessible hidden text helper for icon-only controls and nonvisual labels.
 
 ## common
 

package/.agents/skills/component-library-rules/references/components/base__boolean-indicator.md

@@ -0,0 +1,33 @@
+---
+id: base/boolean-indicator
+title: "Boolean indicator"
+description: "Compact yes/no status treatment for boolean fields in admin surfaces."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/boolean-indicator
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - boolean-indicator
+  - boolean
+  - indicator
+  - compact
+  - yes
+---
+
+# Boolean indicator
+
+Compact yes/no status treatment for boolean fields in admin surfaces.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/boolean-indicator`
+**Consumer import:** `admin-ui-starter-kit/base/display`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/base/display`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+

package/.agents/skills/component-library-rules/references/components/base__cards.md

@@ -66,8 +66,9 @@ headers, alerts, actions, and footer slots behave identically.
 
 Card padding props are intentionally limited to `default` and `small`; the
 measurements resolve through `--surface-*` and the shared `--space-*` scale. Use
-`UIProvider.card.defaultPadding` or CSS variables when changing the default
-card rhythm across an app.
+`UIProvider.card.defaultPadding`, `UIProvider.card.defaultSurface`, and
+`UIProvider.card.defaultHeaderDivider` when changing app-wide card chrome.
+CSS variables still own the underlying spacing rhythm.
 
 ## Default
 
@@ -413,7 +414,7 @@ export function MetricKPICard() {
 			footerText="Updated 5 minutes ago"
 		>
 			<div className="space-y-1">
-				<Text size="xl" weight="semibold" lineHeight="none" className="text-3xl tabular-nums">
+				<Text size="base" weight="semibold" lineHeight="none" className="tabular-nums">
 					$48,290
 				</Text>
 				<Text size="xs" type="secondary">vs. $42,950 last month</Text>
@@ -478,7 +479,7 @@ export function StatRowClickable() {
 				headerEnd={<ArrowUpRight className="size-4 text-muted-foreground" />}
 				className="cursor-pointer transition-colors hover:bg-muted/40"
 			>
-				<Text size="xl" weight="semibold" className="tabular-nums">2,194</Text>
+				<Text size="base" weight="semibold" className="tabular-nums">2,194</Text>
 			</SmartCard>
 			<SmartCard
 				icon={<CreditCard className="size-4" />}
@@ -486,7 +487,7 @@ export function StatRowClickable() {
 				headerEnd={<ArrowUpRight className="size-4 text-muted-foreground" />}
 				className="cursor-pointer transition-colors hover:bg-muted/40"
 			>
-				<Text size="xl" weight="semibold" className="tabular-nums">$12,840</Text>
+				<Text size="base" weight="semibold" className="tabular-nums">$12,840</Text>
 			</SmartCard>
 			<SmartCard
 				icon={<Sparkles className="size-4" />}
@@ -494,7 +495,7 @@ export function StatRowClickable() {
 				headerEnd={<ArrowUpRight className="size-4 text-muted-foreground" />}
 				className="cursor-pointer transition-colors hover:bg-muted/40"
 			>
-				<Text size="xl" weight="semibold" className="tabular-nums">87</Text>
+				<Text size="base" weight="semibold" className="tabular-nums">87</Text>
 			</SmartCard>
 		</div>
 	);

package/.agents/skills/component-library-rules/references/components/base__carousel.md

@@ -335,11 +335,11 @@ export function GalleryCarousel() {
 										</div>
 										<div className="grid grid-cols-2 gap-2">
 											<div>
-												<Text size="xxs" type="secondary">Revenue</Text>
+												<Text size="xs" type="secondary">Revenue</Text>
 												<Text weight="semibold">{product.revenue}</Text>
 											</div>
 											<div>
-												<Text size="xxs" type="secondary">Units</Text>
+												<Text size="xs" type="secondary">Units</Text>
 												<Text weight="semibold">{product.units}</Text>
 											</div>
 										</div>
@@ -385,11 +385,11 @@ export function ProductGridGallery() {
 									<ProductVisual product={product} className="aspect-[4/3] w-full" />
 									<div className="mt-3 grid grid-cols-2 gap-2">
 										<div>
-											<Text size="xxs" type="secondary">Revenue</Text>
+											<Text size="xs" type="secondary">Revenue</Text>
 											<Text weight="semibold">{product.revenue}</Text>
 										</div>
 										<div>
-											<Text size="xxs" type="secondary">Units</Text>
+											<Text size="xs" type="secondary">Units</Text>
 											<Text weight="semibold">{product.units}</Text>
 										</div>
 									</div>

package/.agents/skills/component-library-rules/references/components/base__collapsible.md

@@ -0,0 +1,39 @@
+---
+id: base/collapsible
+title: "Collapsible"
+description: "Base wrapper for inline disclosure and expand/collapse content."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/collapsible
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - collapsible
+  - wrapper
+  - inline
+  - disclosure
+  - expand
+---
+
+# Collapsible
+
+Base wrapper for inline disclosure and expand/collapse content.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/collapsible`
+**Consumer import:** `admin-ui-starter-kit/base/display`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/base/display`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Example
+
+<Example name="CollapsibleExample" source={examplesSource}>
+	<Examples.CollapsibleExample />
+</Example>
+

package/.agents/skills/component-library-rules/references/components/base__combobox.md

@@ -664,7 +664,7 @@ export function CustomGroupLabels() {
 				getItemGroup={(o) => o.status}
 				renderGroupLabel={(group) => (
 					<div className="flex items-center gap-space-sm">
-						<Text size="xxs" type="secondary" weight="semibold" className="uppercase tracking-wide">
+						<Text size="xs" type="secondary" weight="semibold" className="uppercase tracking-wide">
 							{group}
 						</Text>
 					</div>

package/.agents/skills/component-library-rules/references/components/base__conditional-rendering.md

@@ -0,0 +1,39 @@
+---
+id: base/conditional-rendering
+title: "Conditional rendering"
+description: "Small display helper for conditional content with an explicit fallback."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/show-if
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - show-if
+  - conditional
+  - rendering
+  - small
+  - helper
+---
+
+# Conditional rendering
+
+Small display helper for conditional content with an explicit fallback.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/show-if`
+**Consumer import:** `admin-ui-starter-kit/base/display`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/base/display`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## ShowIf
+
+<Example name="ShowIfExample" source={examplesSource}>
+	<Examples.ShowIfExample />
+</Example>
+

package/.agents/skills/component-library-rules/references/components/base__css-variables.md

@@ -431,7 +431,7 @@ function VariableGroupButton({
 			<span className="min-w-0 flex-1">
 				<span className="block truncate text-sm font-medium leading-5">{label}</span>
 			</span>
-			<span className="text-xxs tabular-nums text-muted-foreground">{count}</span>
+			<span className="text-xs tabular-nums text-muted-foreground">{count}</span>
 		</Button>
 	);
 }
@@ -704,6 +704,7 @@ const PUBLIC_ROOT_VARIABLES = new Set([
 const PUBLIC_THEME_VARIABLES = new Set([
 	'--font-heading',
 	'--font-sans',
+	'--font-serif',
 	'--font-mono',
 	'--text-xxs',
 	'--text-xs',

package/.agents/skills/component-library-rules/references/components/base__date-block.md

@@ -0,0 +1,39 @@
+---
+id: base/date-block
+title: "Date block"
+description: "Compact date display block for event, schedule, and timeline summaries."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/date-block
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - date-block
+  - date
+  - block
+  - compact
+  - event
+---
+
+# Date block
+
+Compact date display block for event, schedule, and timeline summaries.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/date-block`
+**Consumer import:** `admin-ui-starter-kit/base/display`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/base/display`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Example
+
+<Example name="DateBlockExample" source={examplesSource}>
+	<Examples.DateBlockExample />
+</Example>
+

package/.agents/skills/component-library-rules/references/components/base__dialog.md

@@ -0,0 +1,39 @@
+---
+id: base/dialog
+title: "Dialog"
+description: "Base dialog wrapper for simple modal content and confirmations."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/dialog
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - dialog
+  - wrapper
+  - simple
+  - modal
+  - content
+---
+
+# Dialog
+
+Base dialog wrapper for simple modal content and confirmations.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/dialog`
+**Consumer import:** `admin-ui-starter-kit/base/display`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/base/display`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Example
+
+<Example name="DialogExample" source={examplesSource}>
+	<Examples.DialogExample />
+</Example>
+