admin-ui-starter-kit 0.6.6 → 0.6.8

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';
@@ -310,16 +240,47 @@ 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>
+	);
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Collapsible
 // ─────────────────────────────────────────────────────────────────────────────
@@ -419,6 +380,9 @@ export function QRCodeExample() {
 - `AlertExample`
 - `ProgressExample`
 - `SkeletonExample`
+- `PageSkeletonExample`
+- `TwoColumnPageSkeletonExample`
+- `TableSkeletonExample`
 - `CollapsibleExample`
 - `DialogExample`
 - `DateBlockExample`

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

@@ -172,7 +172,7 @@ export function FilterEventRenderEventCustomEventRendering() {
 								categories={categories}
 								filterEvent={(e) => e.category !== 'wine'}
 								renderEvent={(event, category) => (
-									<div className="truncate rounded-sm bg-foreground/8 px-1.5 py-0.5 text-xxs text-foreground">
+									<div className="truncate rounded-sm bg-foreground/8 px-1.5 py-0.5 text-xs text-foreground">
 										{category?.label?.split(' ')[0] ?? ''} · {event.title}
 									</div>
 								)}

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
 

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

@@ -0,0 +1,39 @@
+---
+id: base/money-display
+title: "Money display"
+description: "Formatted monetary value display that follows the UIProvider money defaults."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/money-display
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - money-display
+  - money
+  - formatted
+  - monetary
+  - value
+---
+
+# Money display
+
+Formatted monetary value display that follows the UIProvider money defaults.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/money-display`
+**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="MoneyDisplayExample" source={examplesSource}>
+	<Examples.MoneyDisplayExample />
+</Example>
+

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

@@ -0,0 +1,39 @@
+---
+id: base/notification-banner
+title: "Notification banner"
+description: "Inline status banner for low-friction information, success, warning, and error states."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/notification-banner
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - notification-banner
+  - notification
+  - banner
+  - inline
+  - status
+---
+
+# Notification banner
+
+Inline status banner for low-friction information, success, warning, and error states.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/notification-banner`
+**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.
+
+## Variants
+
+<Example name="NotificationBannerVariants" source={examplesSource}>
+	<Examples.NotificationBannerVariants />
+</Example>
+

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

@@ -0,0 +1,39 @@
+---
+id: base/placeholder-pattern
+title: "Placeholder pattern"
+description: "Subtle diagonal SVG placeholder fill for empty media, maps, and generated previews."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/placeholder-pattern
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - placeholder-pattern
+  - placeholder
+  - pattern
+  - subtle
+  - diagonal
+---
+
+# Placeholder pattern
+
+Subtle diagonal SVG placeholder fill for empty media, maps, and generated previews.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/placeholder-pattern`
+**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="PlaceholderPatternExample" source={examplesSource}>
+	<Examples.PlaceholderPatternExample />
+</Example>
+

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

@@ -0,0 +1,33 @@
+---
+id: base/progress
+title: "Progress"
+description: "Base progress wrapper for completion, quota, and loading indicators."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/progress
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - progress
+  - wrapper
+  - completion
+  - quota
+  - loading
+---
+
+# Progress
+
+Base progress wrapper for completion, quota, and loading indicators.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/progress`
+**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__qr-code.md

@@ -0,0 +1,39 @@
+---
+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"
+sourcePath: src/components/base/display/qr-code
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - qr-code
+  - code
+  - wrapper
+  - share
+  - links
+---
+
+# QR code
+
+QR code display wrapper for share links, check-in codes, and payment references.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/qr-code`
+**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="QRCodeExample" source={examplesSource}>
+	<Examples.QRCodeExample />
+</Example>
+

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

@@ -0,0 +1,33 @@
+---
+id: base/separator
+title: "Separator"
+description: "Horizontal and vertical separator wrapper for grouping dense admin content."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/separator
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - separator
+  - horizontal
+  - vertical
+  - wrapper
+  - grouping
+---
+
+# Separator
+
+Horizontal and vertical separator wrapper for grouping dense admin content.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/separator`
+**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__skeleton.md

@@ -0,0 +1,55 @@
+---
+id: base/skeleton
+title: "Skeleton"
+description: "Reusable loading skeletons for content rows, pages, two-column detail views, and tables."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/skeleton
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - skeleton
+  - reusable
+  - loading
+  - skeletons
+  - content
+---
+
+# Skeleton
+
+Reusable loading skeletons for content rows, pages, two-column detail views, and tables.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/skeleton`
+**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.
+
+## Inline content
+
+<Example name="SkeletonExample" source={examplesSource}>
+	<Examples.SkeletonExample />
+</Example>
+
+## Page layouts
+
+<Example name="PageSkeletonExample" source={examplesSource}>
+	<Examples.PageSkeletonExample />
+</Example>
+
+<Example name="TwoColumnPageSkeletonExample" source={examplesSource}>
+	<Examples.TwoColumnPageSkeletonExample />
+</Example>
+
+## Tables
+
+<Example name="TableSkeletonExample" source={examplesSource}>
+	<Examples.TableSkeletonExample />
+</Example>
+

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

@@ -0,0 +1,39 @@
+---
+id: base/throttle-alert
+title: "Throttle alert"
+description: "Compact warning surface for rate limits, lockouts, and retry windows."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/throttle-alert
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - throttle-alert
+  - throttle
+  - alert
+  - compact
+  - warning
+---
+
+# Throttle alert
+
+Compact warning surface for rate limits, lockouts, and retry windows.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/throttle-alert`
+**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="ThrottleAlertExample" source={examplesSource}>
+	<Examples.ThrottleAlertExample />
+</Example>
+

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

@@ -72,7 +72,7 @@ import { Heading, Label, Text, TextLink } from 'admin-ui-starter-kit/typography'
 Use `Text` for ordinary body, labels, metadata, helper copy, and inline
 messages. Omit `size` for normal body text so the `UIProvider` typography
 default can flow through; reach for `size="xs" type="secondary"` for secondary
-details and `size="xxs" type="secondary"` for dense micro labels. Use
+details and `size="xs" type="secondary"` for dense micro labels. Use
 `weight="semibold"` instead of local font-weight classes.
 
 Use `Heading` for page or section headings, `Label` for form captions, and

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

@@ -0,0 +1,39 @@
+---
+id: base/visually-hidden
+title: "Visually hidden"
+description: "Accessible hidden text helper for icon-only controls and nonvisual labels."
+layer: base
+family: "Display"
+sourcePath: src/components/base/display/visually-hidden
+examples:
+imports:
+publicImport: admin-ui-starter-kit/base/display
+tags:
+  - base
+  - display
+  - visually-hidden
+  - visually
+  - hidden
+  - accessible
+  - text
+---
+
+# Visually hidden
+
+Accessible hidden text helper for icon-only controls and nonvisual labels.
+
+**Layer:** `base`
+**Source:** `src/components/base/display/visually-hidden`
+**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="VisuallyHiddenExample" source={examplesSource}>
+	<Examples.VisuallyHiddenExample />
+</Example>
+

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

@@ -200,7 +200,7 @@ function PersonValue({ initials, name, sub }: { initials: string; name: string;
 	return (
 		<span className="inline-flex items-center gap-space-md">
 			<Avatar size="small">
-				<AvatarFallback className="text-xxs font-semibold">{initials}</AvatarFallback>
+				<AvatarFallback className="text-xs font-semibold">{initials}</AvatarFallback>
 			</Avatar>
 			<span className="inline-flex flex-col leading-tight">
 				<Text tag="span" size="inherit" weight="medium" className="text-sm">{name}</Text>
@@ -287,8 +287,8 @@ const SHORT_PROFILE: MetadataListItem[] = [
 export function APISurface() {
 	return (
 		<Text type="secondary" className="max-w-2xl">
-			Each item is <code className="rounded bg-muted px-1 py-0.5 text-xxs">{'{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }'}</code>.
-			List-level props choose <code className="rounded bg-muted px-1 py-0.5 text-xxs">layout</code>, <code className="rounded bg-muted px-1 py-0.5 text-xxs">columns</code>, <code className="rounded bg-muted px-1 py-0.5 text-xxs">dense</code>, <code className="rounded bg-muted px-1 py-0.5 text-xxs">title</code>, <code className="rounded bg-muted px-1 py-0.5 text-xxs">titleSeparator</code>, and <code className="rounded bg-muted px-1 py-0.5 text-xxs">separator</code>. Per-item <code className="rounded bg-muted px-1 py-0.5 text-xxs">render</code> is for status pills, copyable IDs, links, and inline edit affordances.
+			Each item is <code className="rounded bg-muted px-1 py-0.5 text-xs">{'{ id, label, value, icon?, tooltip?, description?, render?, emptyLabel? }'}</code>.
+			List-level props choose <code className="rounded bg-muted px-1 py-0.5 text-xs">layout</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">columns</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">dense</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">title</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">titleSeparator</code>, and <code className="rounded bg-muted px-1 py-0.5 text-xs">separator</code>. Per-item <code className="rounded bg-muted px-1 py-0.5 text-xs">render</code> is for status pills, copyable IDs, links, and inline edit affordances.
 		</Text>
 	);
 }

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

@@ -302,7 +302,7 @@ export function DefaultFeed() {
 			                        recordEvent(`Activity click → ${a.event} · ${a.id}`)
 			                    }
 			                    titleSuffix={
-			                        <Text size="xxs" type="secondary" className="tabular-nums">
+			                        <Text size="xs" type="secondary" className="tabular-nums">
 			                            {DEFAULT_ACTIVITIES.length}
 			                        </Text>
 			                    }

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

@@ -332,13 +332,13 @@ const INITIAL_ACTIVITIES: ActivityItem<CommentActivityData>[] = [
 export function APISurface() {
 	return (
 		<Text type="secondary" className="max-w-2xl">
-			Pass <code className="rounded bg-muted px-1 py-0.5 text-xxs">resources</code> and{' '}
-			<code className="rounded bg-muted px-1 py-0.5 text-xxs">onResourceSearch</code> as props on{' '}
-			<code className="rounded bg-muted px-1 py-0.5 text-xxs">{'<CommentComposer>'}</code>; render{' '}
-			<code className="rounded bg-muted px-1 py-0.5 text-xxs">{'<ActivityFeedCard activities={...} />'}</code>{' '}
+			Pass <code className="rounded bg-muted px-1 py-0.5 text-xs">resources</code> and{' '}
+			<code className="rounded bg-muted px-1 py-0.5 text-xs">onResourceSearch</code> as props on{' '}
+			<code className="rounded bg-muted px-1 py-0.5 text-xs">{'<CommentComposer>'}</code>; render{' '}
+			<code className="rounded bg-muted px-1 py-0.5 text-xs">{'<ActivityFeedCard activities={...} />'}</code>{' '}
 			for the feed. Comments are activities with{' '}
-			<code className="rounded bg-muted px-1 py-0.5 text-xxs">event=&quot;note&quot;</code> and a description ReactNode rendered via{' '}
-			<code className="rounded bg-muted px-1 py-0.5 text-xxs">{'<MentionContent>'}</code>.
+			<code className="rounded bg-muted px-1 py-0.5 text-xs">event=&quot;note&quot;</code> and a description ReactNode rendered via{' '}
+			<code className="rounded bg-muted px-1 py-0.5 text-xs">{'<MentionContent>'}</code>.
 		</Text>
 	);
 }