admin-ui-starter-kit 0.6.7 → 0.6.9

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
 

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__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__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>
+

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

@@ -1,7 +1,7 @@
 ---
 id: base/display-utilities
 title: "Display utilities"
-description: "Narrow display helpers only: separator, banners, boolean indicators, conditionals, progress, skeleton, and utility wrappers."
+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"
 sourcePath: src/components/base/display
@@ -16,6 +16,9 @@ examples:
   - AlertExample
   - ProgressExample
   - SkeletonExample
+  - PageSkeletonExample
+  - TwoColumnPageSkeletonExample
+  - TableSkeletonExample
   - CollapsibleExample
   - DialogExample
   - DateBlockExample
@@ -44,14 +47,14 @@ tags:
   - base
   - display
   - utilities
-  - narrow
-  - helpers
-  - only
+  - index
+  - small
+  - primitives
 ---
 
 # Display utilities
 
-Narrow display helpers only: separator, banners, boolean indicators, conditionals, progress, skeleton, and utility wrappers.
+Index for small display primitives. Each utility now has its own page so it is searchable from the preview sidebar.
 
 **Layer:** `base`
 **Source:** `src/components/base/display`
@@ -62,91 +65,12 @@ Narrow display helpers only: separator, banners, boolean indicators, conditional
 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.
 
-## Overview
+## Standalone pages
 
-This route is for narrow display helpers. Identity and contextual primitives now
-have standalone pages in the Base menu: Avatar, Icon badge, Inline stat,
-Metadata list, and Tooltip.
-
-## Separator
-
-<Example name="SeparatorExample" source={examplesSource}>
-	<Examples.SeparatorExample />
-</Example>
-
-## NotificationBanner
-
-<Example name="NotificationBannerVariants" source={examplesSource}>
-	<Examples.NotificationBannerVariants />
-</Example>
-
-## Boolean & conditionals
-
-<Example name="BooleanIndicatorExample" source={examplesSource}>
-	<Examples.BooleanIndicatorExample />
-</Example>
-
-<Example name="ShowIfExample" source={examplesSource}>
-	<Examples.ShowIfExample />
-</Example>
-
-## Misc
-
-<Example name="ThrottleAlertExample" source={examplesSource}>
-	<Examples.ThrottleAlertExample />
-</Example>
-
-<Example name="VisuallyHiddenExample" source={examplesSource}>
-	<Examples.VisuallyHiddenExample />
-</Example>
-
-<Example name="PlaceholderPatternExample" source={examplesSource}>
-	<Examples.PlaceholderPatternExample />
-</Example>
-
-## Alert
-
-<Example name="AlertExample" source={examplesSource}>
-	<Examples.AlertExample />
-</Example>
-
-## Progress & Skeleton
-
-<Example name="ProgressExample" source={examplesSource}>
-	<Examples.ProgressExample />
-</Example>
-
-<Example name="SkeletonExample" source={examplesSource}>
-	<Examples.SkeletonExample />
-</Example>
-
-## Collapsible & Dialog
-
-<Example name="CollapsibleExample" source={examplesSource}>
-	<Examples.CollapsibleExample />
-</Example>
-
-<Example name="DialogExample" source={examplesSource}>
-	<Examples.DialogExample />
-</Example>
-
-## DateBlock
-
-<Example name="DateBlockExample" source={examplesSource}>
-	<Examples.DateBlockExample />
-</Example>
-
-## MoneyDisplay
-
-<Example name="MoneyDisplayExample" source={examplesSource}>
-	<Examples.MoneyDisplayExample />
-</Example>
-
-## QRCode
-
-<Example name="QRCodeExample" source={examplesSource}>
-	<Examples.QRCodeExample />
-</Example>
+Use the Base → Display section for the individual pages:
+Separator, notification banner, boolean indicator, conditional rendering,
+throttle alert, visually hidden, placeholder pattern, progress, skeleton,
+collapsible, dialog, date block, money display, and QR code.
 
 ## Examples
 
@@ -162,7 +86,13 @@ import { ThrottleAlert } from '@/components/base/display/throttle-alert';
 import { VisuallyHidden } from '@/components/base/display/visually-hidden';
 import { Alert, AlertTitle, AlertDescription } from '@/components/base/display/alert';
 import { Progress } from '@/components/base/display/progress';
-import { Skeleton } from '@/components/base/display/skeleton';
+import {
+	ContentSkeleton,
+	PageSkeleton,
+	Skeleton,
+	TableSkeleton,
+	TwoColumnPageSkeleton,
+} from '@/components/base/display/skeleton';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/base/display/collapsible';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/base/display/dialog';
 import { DateBlock } from '@/components/base/display/date-block';
@@ -190,16 +120,23 @@ export function NotificationBannerVariants() {
 
 export function SeparatorExample() {
 	return (
-		<div className="w-full max-w-md">
-			<Text>Section above</Text>
-			<Separator className="my-3" />
-			<Text>Section below</Text>
-			<div className="mt-4 flex h-6 items-center gap-2">
+		<div className="grid w-full max-w-md gap-space-lg">
+			<div>
+				<Text>Section above</Text>
+				<Separator className="my-3" />
+				<Text>Section below</Text>
+			</div>
+			<div>
+				<Text>Dashed section above</Text>
+				<Separator dashed className="my-3" />
+				<Text>Dashed section below</Text>
+			</div>
+			<div className="flex h-6 items-center gap-2">
 				<Text tag="span">Inline</Text>
 				<Separator orientation="vertical" />
-				<Text tag="span">Items</Text>
-				<Separator orientation="vertical" />
-				<Text tag="span">Here</Text>
+				<Text tag="span">Solid</Text>
+				<Separator dashed orientation="vertical" />
+				<Text tag="span">Dashed</Text>
 			</div>
 		</div>
 	);
@@ -310,12 +247,43 @@ export function ProgressExample() {
 
 export function SkeletonExample() {
 	return (
-		<div className="flex w-full max-w-md items-center gap-4">
-			<Skeleton className="size-12 rounded-full" />
-			<div className="flex flex-1 flex-col gap-2">
-				<Skeleton className="h-4 w-3/4" />
-				<Skeleton className="h-3 w-1/2" />
+		<div className="grid w-full gap-4 lg:grid-cols-2">
+			<div className="rounded-lg border border-border bg-card p-surface">
+				<div className="flex w-full items-center gap-4">
+					<Skeleton className="size-12 rounded-full" />
+					<div className="flex flex-1 flex-col gap-2">
+						<Skeleton className="h-4 w-3/4" />
+						<Skeleton className="h-3 w-1/2" />
+					</div>
+				</div>
 			</div>
+			<div className="rounded-lg border border-border bg-card p-surface">
+				<ContentSkeleton avatar action lines={3} />
+			</div>
+		</div>
+	);
+}
+
+export function PageSkeletonExample() {
+	return (
+		<div className="w-full">
+			<PageSkeleton stats={3} sections={2} sectionLines={4} />
+		</div>
+	);
+}
+
+export function TwoColumnPageSkeletonExample() {
+	return (
+		<div className="w-full">
+			<TwoColumnPageSkeleton mainSections={2} sidebarSections={3} />
+		</div>
+	);
+}
+
+export function TableSkeletonExample() {
+	return (
+		<div className="w-full">
+			<TableSkeleton rows={6} columns={5} />
 		</div>
 	);
 }
@@ -419,6 +387,9 @@ export function QRCodeExample() {
 - `AlertExample`
 - `ProgressExample`
 - `SkeletonExample`
+- `PageSkeletonExample`
+- `TwoColumnPageSkeletonExample`
+- `TableSkeletonExample`
 - `CollapsibleExample`
 - `DialogExample`
 - `DateBlockExample`

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

@@ -54,9 +54,10 @@ Default row sizing comes from `UIProvider.item.defaultSize` and the shared
 `size` for ordinary rows; use CSS variables or the provider default when
 tightening item density across a surface.
 
-Do not use local `px-0` or one-off vertical padding to align rows with a card
-edge. Keep the item padding balanced and adjust the surrounding section or card
-spacing instead.
+Horizontal padding is collapsed by default so rows align cleanly inside
+SmartCard bodies, menus, and other framed sections. Use `padding="default"` for
+standalone lists that need their own `px-row-x` inset. Avoid local padding
+overrides unless a specific composition demands it.
 
 ## Consumer usage