admin-ui-starter-kit 0.1.4 → 0.4.2

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

@@ -15,6 +15,7 @@ imports:
   - @/components/base/cards
   - @/components/layout/containers
   - @/components/typography
+publicImport: admin-ui-starter-kit/layout/containers
 tags:
   - layout
   - building
@@ -30,8 +31,14 @@ tags:
 
 Container and Section primitives for page structure, width clamps, padding density, and semantic wrappers.
 
-**Layer:** `layout`  
+**Layer:** `layout`
 **Source:** `src/components/layout/containers`
+**Consumer import:** `admin-ui-starter-kit/layout/containers`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/layout/containers`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
 
 ## Examples
 
@@ -87,7 +94,12 @@ export function NarrowContainer() {
 export function WideContainer() {
 	return (
 		<DemoViewport>
-			<Container as="section" width="wide" padding="default" innerClassName="grid gap-3 md:grid-cols-3">
+			<Container
+				as="section"
+				width="wide"
+				padding="default"
+				innerClassName="grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3"
+			>
 				<SampleCard title="Card A" detail="Dashboard pages can keep cards aligned inside a max-width shell." />
 				<SampleCard title="Card B" detail="`innerClassName` controls the inner column without breaking the outer wrapper." />
 				<SampleCard title="Card C" detail="Use `as` to render the right semantic element for the surface." />
@@ -120,7 +132,7 @@ export function BareContainer() {
 
 export function SectionRhythm() {
 	return (
-		<div className="grid gap-5 md:grid-cols-3">
+		<div className="grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3">
 			{(['tight', 'default', 'loose'] as const).map((density) => (
 				<Section key={density} density={density} className="rounded-md border border-dashed border-border p-4">
 					<Text weight="semibold" className="capitalize">{density}</Text>

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

@@ -19,6 +19,7 @@ imports:
   - @/components/layout/page
   - @/components/layout/sidebar
   - @/components/typography
+publicImport: admin-ui-starter-kit/layout
 tags:
   - layout
   - shells
@@ -32,8 +33,14 @@ tags:
 
 Topbar, breadcrumbs, command search, notifications, and action slots in a realistic app-shell canvas.
 
-**Layer:** `layout`  
+**Layer:** `layout`
 **Source:** `src/components/layout`
+**Consumer import:** `admin-ui-starter-kit/layout`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/layout`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
 
 ## Examples
 

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

@@ -15,6 +15,7 @@ imports:
   - @/components/layout
   - @/components/layout/page
   - @/components/typography
+publicImport: admin-ui-starter-kit/layout/page
 tags:
   - layout
   - shells
@@ -29,8 +30,14 @@ tags:
 
 Page shell, header partials, actions, and content regions with framework-neutral links.
 
-**Layer:** `layout`  
+**Layer:** `layout`
 **Source:** `src/components/layout/page`
+**Consumer import:** `admin-ui-starter-kit/layout/page`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/layout/page`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
 
 ## Examples
 

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

@@ -19,6 +19,7 @@ imports:
   - @/components/layout/page
   - @/components/layout/sidebar
   - @/components/typography
+publicImport: admin-ui-starter-kit/layout
 tags:
   - layout
   - shells
@@ -32,8 +33,14 @@ tags:
 
 Full app sidebar assembly plus reusable navigation, workspace, and footer item partials.
 
-**Layer:** `layout`  
+**Layer:** `layout`
 **Source:** `src/components/layout`
+**Consumer import:** `admin-ui-starter-kit/layout`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/layout`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
 
 ## Examples
 
@@ -120,7 +127,7 @@ export function AppSidebarShell() {
 	return (
 		<>
 			<SidebarProvider defaultOpen className="min-h-0">
-								<div className="flex h-[42rem] w-full overflow-hidden rounded-lg border border-border bg-background p-3">
+								<div className="flex h-[42rem] w-full min-w-[56rem] overflow-hidden rounded-lg border border-border bg-background p-3">
 									<div className="flex min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background shadow-sm">
 										<AppSidebar
 											className="h-full p-0"

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

@@ -14,10 +14,12 @@ imports:
   - @/components/base/badge
   - @/components/base/buttons
   - @/components/base/display/avatar
+  - @/components/base/display/user-cell
   - @/components/layout
   - @/components/layout/header
   - @/components/layout/sidebar
   - @/components/typography
+publicImport: admin-ui-starter-kit/layout
 tags:
   - layout
   - building
@@ -32,8 +34,14 @@ tags:
 
 User identity surfaces used by layout headers, sidebars, menus, avatar groups, and status badges.
 
-**Layer:** `layout`  
+**Layer:** `layout`
 **Source:** `src/components/layout`
+**Consumer import:** `admin-ui-starter-kit/layout`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/layout`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
 
 ## Examples
 
@@ -41,6 +49,7 @@ User identity surfaces used by layout headers, sidebars, menus, avatar groups, a
 import { LogOut, Settings, User, UserPlus } from 'lucide-react';
 import { Button } from '@/components/base/buttons';
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '@/components/base/display/avatar';
+import { UserCell } from '@/components/base/display/user-cell';
 import { Text } from '@/components/typography';
 import { Badge } from '@/components/base/badge';
 import { HeaderUserMenu } from '@/components/layout/header';
@@ -100,11 +109,11 @@ export function HeaderUserMenuExample() {
 export function SidebarUserMenu() {
 	return (
 		<>
-			<SidebarProvider>
-								<div className="max-w-sm rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground">
-									<SidebarNavigationUser user={users[1]} onProfile={() => {}} onSettings={() => {}} onLogout={() => {}} />
-								</div>
-							</SidebarProvider>
+			<SidebarProvider className="min-h-0">
+				<div className="max-w-sm rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground">
+					<SidebarNavigationUser user={users[1]} onProfile={() => {}} onSettings={() => {}} onLogout={() => {}} />
+				</div>
+			</SidebarProvider>
 		</>
 	);
 }
@@ -112,32 +121,44 @@ export function SidebarUserMenu() {
 export function CustomTriggerCustomContent() {
 	return (
 		<>
-			<div className="grid gap-4 md:grid-cols-2">
-								<HeaderUserMenu
-									user={users[2]}
-									renderTrigger={(user) => (
-										<Button type="button" variant="secondary" buttonStyle="outline" className="h-auto gap-3 rounded-full px-3 py-2">
-											<Avatar size="sm">
-												<AvatarFallback>{initials(user.name)}</AvatarFallback>
-											</Avatar>
-											<Text tag="span" size="xs" weight="medium">{user.name}</Text>
-											<Badge variant="info">Admin</Badge>
-										</Button>
-									)}
-									customContent={(
-										<div className="space-y-1">
-											<Button variant="secondary" buttonStyle="ghost" icon={User} className="w-full justify-start">Profile</Button>
-											<Button variant="secondary" buttonStyle="ghost" icon={Settings} className="w-full justify-start">Preferences</Button>
-											<Button variant="secondary" buttonStyle="ghost" icon={LogOut} className="w-full justify-start">Sign out</Button>
-										</div>
-									)}
+			<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(14rem,0.85fr)] md:items-start">
+				<div className="rounded-lg border border-border bg-card p-3">
+					<HeaderUserMenu
+						user={users[2]}
+						renderTrigger={(user) => (
+							<Button
+								type="button"
+								variant="secondary"
+								buttonStyle="outline"
+								className="h-auto w-full justify-start rounded-md px-2.5 py-2"
+							>
+								<UserCell
+									size="sm"
+									name={user.name}
+									initials={initials(user.name)}
+									trailing={<Badge variant="info">Admin</Badge>}
 								/>
-
-								<div className="flex items-center gap-3 rounded-xl border border-border p-4">
-									<Button variant="primary" icon={UserPlus}>Invite user</Button>
-									<Text size="xs" type="secondary">Pair user menus with base buttons and badges for app-specific account controls.</Text>
-								</div>
+							</Button>
+						)}
+						customContent={(
+							<div className="space-y-1">
+								<Button variant="secondary" buttonStyle="ghost" icon={User} className="w-full justify-start">Profile</Button>
+								<Button variant="secondary" buttonStyle="ghost" icon={Settings} className="w-full justify-start">Preferences</Button>
+								<Button variant="secondary" buttonStyle="ghost" icon={LogOut} className="w-full justify-start">Sign out</Button>
 							</div>
+						)}
+					/>
+				</div>
+
+				<div className="rounded-lg border border-border bg-card p-3">
+					<div className="space-y-2">
+						<Button variant="primary" icon={UserPlus}>Invite user</Button>
+						<Text size="xs" type="secondary">
+							Pair user menus with base buttons and badges for app-specific account controls.
+						</Text>
+					</div>
+				</div>
+			</div>
 		</>
 	);
 }

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

@@ -0,0 +1,234 @@
+---
+id: layout/layout-workspace
+title: "Layout · Workspace"
+description: "Nested record workspace shell with header, workflow navigation, scroll-owned body, and optional right rail."
+layer: layout
+family: "Shells"
+sourcePath: src/components/layout/workspace
+examples:
+  - ProductRecordWorkspaceShell
+  - WorkspaceWithoutRail
+imports:
+  - @/components/base/badge
+  - @/components/base/buttons
+  - @/components/base/cards
+  - @/components/base/display
+  - @/components/layout
+  - @/components/layout/workspace
+  - @/components/typography
+publicImport: admin-ui-starter-kit/layout/workspace
+tags:
+  - layout
+  - shells
+  - workspace
+  - nested
+  - record
+  - shell
+  - header
+---
+
+# Layout · Workspace
+
+Nested record workspace shell with header, workflow navigation, scroll-owned body, and optional right rail.
+
+**Layer:** `layout`
+**Source:** `src/components/layout/workspace`
+**Consumer import:** `admin-ui-starter-kit/layout/workspace`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/layout/workspace`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Examples
+
+```tsx
+import type { ReactNode } from 'react';
+import { Box, ClipboardCheck, Globe2, Image, Languages, PackageCheck, ShieldCheck, SlidersHorizontal } from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { InlineStat } from '@/components/base/display';
+import {
+	WorkspaceLayout,
+	WorkspaceLocaleStrip,
+	WorkspaceNav,
+	WorkspaceRecordHeader,
+	type WorkspaceNavGroup,
+} from '@/components/layout/workspace';
+import { Text } from '@/components/typography';
+import type { LayoutLinkRenderProps } from '@/components/layout';
+
+function renderPreviewLink({ href, children, className, onClick, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} onClick={onClick} target={target} rel={rel}>{children}</a>;
+}
+
+function DemoViewport({ children, height = 640 }: { children: ReactNode; height?: number }) {
+	return (
+		<div
+			className="layout-demo-viewport relative w-full overflow-hidden rounded-md border border-dashed border-border bg-background"
+			style={{ height }}
+		>
+			{children}
+		</div>
+	);
+}
+
+const navGroups: WorkspaceNavGroup[] = [
+	{
+		id: 'content',
+		label: 'Content',
+		description: 'Public catalogue fields',
+		items: [
+			{ id: 'basics', label: 'Basics', description: 'Name, handle, summary', href: '#/products/1/basics', icon: Box, completion: 100 },
+			{ id: 'media', label: 'Media', description: 'Cover and gallery', href: '#/products/1/media', icon: Image, completion: 80 },
+			{ id: 'taxonomy', label: 'Taxonomy', description: 'Categories and tags', href: '#/products/1/taxonomy', icon: SlidersHorizontal, completion: 70 },
+		],
+	},
+	{
+		id: 'operations',
+		label: 'Operations',
+		description: 'Fulfilment controls',
+		items: [
+			{ id: 'availability', label: 'Availability', description: 'Calendar and capacity', href: '#/products/1/availability', icon: PackageCheck, completion: 55, warning: true },
+			{ id: 'policies', label: 'Policies', description: 'Booking and cancellation', href: '#/products/1/policies', icon: ShieldCheck, completion: 100 },
+			{ id: 'translations', label: 'Translations', description: 'Locale readiness', href: '#/products/1/translations', icon: Languages, completion: 42 },
+		],
+	},
+];
+
+function MainWorkspaceContent() {
+	return (
+		<div className="space-y-4">
+			<div className="grid gap-3 md:grid-cols-3">
+				<SmartCard padding="sm" className="border-border/80 shadow-sm">
+					<InlineStat label="Readiness" value="82%" layout="stacked" mono valueClassName="font-semibold" />
+				</SmartCard>
+				<SmartCard padding="sm" className="border-border/80 shadow-sm">
+					<InlineStat label="Variants" value="6" layout="stacked" mono valueClassName="font-semibold" />
+				</SmartCard>
+				<SmartCard padding="sm" className="border-border/80 shadow-sm">
+					<InlineStat label="Locales" value="2 / 4" layout="stacked" mono valueClassName="font-semibold" />
+				</SmartCard>
+			</div>
+
+			<SmartCard
+				title="Workspace body"
+				description="Consumers mount composed product cards, feature surfaces, or their own forms here."
+				padding="sm"
+				headerDivider
+			>
+				<div className="grid gap-3 md:grid-cols-2">
+					{['Identity', 'Media', 'Booking rules', 'Policies'].map((label) => (
+						<div key={label} className="rounded-md border border-border bg-background px-3 py-2.5">
+							<Text weight="semibold">{label}</Text>
+							<Text size="xs" type="secondary" className="mt-1">
+								Section content keeps a compact admin rhythm inside the scrollable main region.
+							</Text>
+						</div>
+					))}
+				</div>
+			</SmartCard>
+		</div>
+	);
+}
+
+function WorkspaceRail() {
+	return (
+		<div className="space-y-3">
+			<SmartCard
+				icon={<ClipboardCheck className="size-4" />}
+				title="Review"
+				description="Right rail stays fixed to the workspace column on wide screens."
+				padding="sm"
+			>
+				<div className="space-y-2">
+					<InlineStat label="Blocked checks" value="2" mono />
+					<InlineStat label="Last review" value="Today" />
+					<InlineStat label="Owner" value="Catalogue" />
+				</div>
+			</SmartCard>
+			<SmartCard title="Publishing" padding="sm">
+				<Text size="xs" type="secondary">Rail cards are consumer-owned content. The layout only controls the column and scroll.</Text>
+			</SmartCard>
+		</div>
+	);
+}
+
+export function ProductRecordWorkspaceShell() {
+	return (
+		<DemoViewport>
+			<WorkspaceLayout
+				header={(
+					<>
+						<WorkspaceRecordHeader
+							title="Balsamic tasting set"
+							description="Reusable record header with badges, metadata, actions, and media. Navigation remains framework-neutral through renderLink."
+							media={<Globe2 className="size-5 text-muted-foreground" />}
+							badges={<><Badge variant="success">Live</Badge><Badge variant="info">Catalogue</Badge></>}
+							metadata={[
+								{ label: 'SKU', value: 'BAL-TASTE-01' },
+								{ label: 'Owner', value: 'Catalogue' },
+								{ label: 'Updated', value: 'Today' },
+							]}
+							secondaryActions={<Button variant="secondary" buttonStyle="ghost">Preview</Button>}
+							actions={<Button>Save draft</Button>}
+						/>
+						<WorkspaceLocaleStrip
+							activeLocale="en"
+							locales={[
+								{ id: 'en', label: 'EN', completion: 100 },
+								{ id: 'el', label: 'EL', completion: 62 },
+								{ id: 'de', label: 'DE', completion: 20 },
+							]}
+							status={<Badge variant="warning">2 checks</Badge>}
+							actions={<Button variant="secondary" buttonStyle="ghost">Translate</Button>}
+						/>
+					</>
+				)}
+				sidebar={<WorkspaceNav activeId="basics" groups={navGroups} renderLink={renderPreviewLink} />}
+				rail={<WorkspaceRail />}
+			>
+				<MainWorkspaceContent />
+			</WorkspaceLayout>
+		</DemoViewport>
+	);
+}
+
+export function WorkspaceWithoutRail() {
+	return (
+		<DemoViewport height={520}>
+			<WorkspaceLayout
+				contentWidth="default"
+				header={(
+					<WorkspaceRecordHeader
+						title="Translation workspace"
+						description="The shell also works without a right rail. The main content keeps a readable width clamp."
+						badges={<Badge variant="secondary">Draft</Badge>}
+						actions={<Button>Publish</Button>}
+					/>
+				)}
+				sidebar={<WorkspaceNav activeId="translations" groups={navGroups.slice(1)} renderLink={renderPreviewLink} />}
+			>
+				<SmartCard title="Focused editor" description="A narrower workspace for dense forms or translation review." padding="sm">
+					<div className="space-y-3">
+						{['Headline', 'Summary', 'Customer instructions'].map((label) => (
+							<div key={label} className="rounded-md border border-border bg-background px-3 py-2.5">
+								<Text weight="semibold">{label}</Text>
+								<Text size="xs" type="secondary" className="mt-1">Consumer-owned content inside the workspace body.</Text>
+							</div>
+						))}
+					</div>
+				</SmartCard>
+			</WorkspaceLayout>
+		</DemoViewport>
+	);
+}
+```
+
+## Example exports
+
+- `ProductRecordWorkspaceShell`
+- `WorkspaceWithoutRail`
+

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

@@ -11,6 +11,7 @@ examples:
   - TitleOnly
 imports:
   - @/components/ui/alert
+  - @/components/ui/button
 tags:
   - ui
   - feedback
@@ -25,7 +26,7 @@ tags:
 
 shadcn alert primitive: variants, with title/description/action.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/alert`
 
 ## Examples
@@ -33,6 +34,7 @@ shadcn alert primitive: variants, with title/description/action.
 ```tsx
 import { Info, CheckCircle, AlertTriangle, XCircle } from 'lucide-react';
 import { Alert, AlertTitle, AlertDescription, AlertAction } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
 import { Col } from '../../PreviewLayout';
 
 export function Variants() {
@@ -72,7 +74,9 @@ export function WithAlertAction() {
 								<AlertTitle>New version available</AlertTitle>
 								<AlertDescription>Reload the page to update.</AlertDescription>
 								<AlertAction>
-									<button className="text-xs font-medium text-primary underline-offset-4 hover:underline">Reload</button>
+									<Button variant="link" size="xs" className="h-auto px-0">
+										Reload
+									</Button>
 								</AlertAction>
 							</Alert>
 		</>

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

@@ -27,7 +27,7 @@ tags:
 
 Avatar with fallback, image, sizes, group, badge.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/avatar`
 
 ## Examples
@@ -66,7 +66,7 @@ export function WithBadge() {
 			<Row>
 								<Avatar>
 									<AvatarFallback>EM</AvatarFallback>
-									<AvatarBadge className="bg-chart-2">{''}</AvatarBadge>
+									<AvatarBadge className="bg-info">{''}</AvatarBadge>
 								</Avatar>
 								<Avatar size="lg">
 									<AvatarFallback>SP</AvatarFallback>

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

@@ -24,7 +24,7 @@ tags:
 
 shadcn breadcrumb — list, items, separator (default & custom).
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/breadcrumb`
 
 ## Examples

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

@@ -26,7 +26,7 @@ tags:
 
 shadcn primitive button — variants, sizes, button group.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/button`
 
 ## Examples

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

@@ -23,7 +23,7 @@ tags:
 
 react-day-picker styled with shadcn primitives.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/calendar`
 
 ## Examples

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

@@ -24,7 +24,7 @@ tags:
 
 Headless show/hide region.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/collapsible`
 
 ## Examples

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

@@ -26,7 +26,7 @@ tags:
 
 Empty state and Item list-row primitives.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui`
 
 ## Examples

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

@@ -25,7 +25,7 @@ tags:
 
 Input with leading / trailing add-ons.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/input-group`
 
 ## Examples

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

@@ -26,7 +26,7 @@ tags:
 
 Input, Textarea, Select primitives.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui`
 
 ## Examples

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

@@ -27,7 +27,7 @@ tags:
 
 DropdownMenu, ContextMenu, Command palette.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui`
 
 ## Examples

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

@@ -31,7 +31,7 @@ tags:
 
 Dialog, Sheet, Popover, Tooltip, HoverCard.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui`
 
 ## Examples

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

@@ -22,7 +22,7 @@ tags:
 
 Manual composition of pagination controls.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/pagination`
 
 ## Examples

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

@@ -24,7 +24,7 @@ tags:
 
 Linear progress bar at varying values.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/progress`
 
 ## Examples

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

@@ -24,7 +24,7 @@ tags:
 
 Custom-styled scroll viewport.
 
-**Layer:** `ui`  
+**Layer:** `ui`
 **Source:** `src/components/ui/scroll-area`
 
 ## Examples