admin-ui-starter-kit 0.1.4 → 0.4.2

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

@@ -12,6 +12,7 @@ imports:
   - @/components/base/cards
   - @/components/features/kanban
   - @/components/typography
+publicImport: admin-ui-starter-kit/features/kanban
 tags:
   - features
   - boards
@@ -26,13 +27,19 @@ tags:
 
 Drag-and-drop board, generic in T. Pass `itemActions` (static array or per-item factory) for the ⋮ menu, `onItemClick` for whole-card click. Headless via `useKanban`; slots: KanbanBoard / KanbanColumn / KanbanColumnContent / KanbanItem / KanbanItemHandle / KanbanItemActions / KanbanOverlay.
 
-**Layer:** `features`  
+**Layer:** `features`
 **Source:** `src/components/features/kanban`
+**Consumer import:** `admin-ui-starter-kit/features/kanban`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/features/kanban`.
+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 { ArrowUp, Copy, Edit3, Eye, Trash2 } from 'lucide-react';
+import { ArrowUp, Copy, Edit3, Eye, GripVertical, Trash2 } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { Badge } from '@/components/base/badge';
 import { SmartCard } from '@/components/base/cards';
@@ -43,13 +50,13 @@ import {
 	KanbanColumnContent,
 	KanbanItem,
 	KanbanItemActions,
+	KanbanItemHandle,
 	KanbanOverlay,
 	type KanbanItemAction,
 	type KanbanValue,
 } from '@/components/features/kanban';
-import { Heading, Text } from '@/components/typography';
+import { Text } from '@/components/typography';
 import { cn } from '@/lib/utils';
-import { Col } from '../../PreviewLayout';
 
 interface Feature {
 	id: string;
@@ -86,24 +93,32 @@ const INITIAL: KanbanValue<Feature> = {
 
 function FeatureCard({ feature }: { feature: Feature }) {
 	return (
-		<SmartCard padding="sm" className="gap-2">
-			<div className="flex items-start gap-2">
-				<Text weight="semibold" tag="div" className="text-sm flex-1 min-w-0">
+		<SmartCard
+			padding="sm"
+			className="rounded-md"
+			contentClassName="space-y-2.5 px-3.5 py-2.5"
+		>
+			<div className="flex items-start gap-2.5">
+				<KanbanItemHandle className="-ml-1 shrink-0">
+					<GripVertical className="size-3.5" aria-hidden="true" />
+					<span className="sr-only">Drag {feature.title}</span>
+				</KanbanItemHandle>
+				<Text weight="semibold" tag="div" lineHeight="snug" className="min-w-0 flex-1 line-clamp-2">
 					{feature.title}
 				</Text>
 				<KanbanItemActions />
 			</div>
-			<Text size="xs" type="secondary" className="line-clamp-2">
+			<Text size="xs" type="secondary" lineHeight="snug" className="line-clamp-2">
 				{feature.description}
 			</Text>
-			<div className="mt-1 h-1.5 overflow-hidden rounded-full bg-muted">
+			<div className="h-1.5 overflow-hidden rounded-full bg-muted">
 				<div
 					className="h-full bg-primary transition-[width] duration-150"
 					style={{ width: `${feature.progress}%` }}
 				/>
 			</div>
 			<div className="flex items-center justify-between">
-				<Text size="xxs" type="secondary" className="tabular-nums">
+				<Text size="xs" type="secondary" className="tabular-nums">
 					{feature.progress}% complete
 				</Text>
 				<div className="inline-flex items-center gap-1 text-muted-foreground">
@@ -131,79 +146,82 @@ export function RoadmapBoardWithActionsOnItemClick() {
 		setLastEvent(`Deleted "${target.title}"`);
 	}, []);
 	const itemActions = useCallback(
-			(_feature: Feature): KanbanItemAction<Feature>[] => [
-				{
-					id: 'view',
-					label: 'View details',
-					icon: <Eye className="size-3.5" />,
-					onSelect: (f) => setLastEvent(`Viewed "${f.title}"`),
-				},
-				{
-					id: 'edit',
-					label: 'Edit',
-					icon: <Edit3 className="size-3.5" />,
-					onSelect: (f) => setLastEvent(`Edited "${f.title}"`),
-				},
-				{
-					id: 'duplicate',
-					label: 'Duplicate',
-					icon: <Copy className="size-3.5" />,
-					isDisabled: (f) => f.progress === 100,
-					onSelect: (f) => setLastEvent(`Duplicated "${f.title}"`),
-				},
-				{
-					id: 'delete',
-					label: 'Delete',
-					icon: <Trash2 className="size-3.5" />,
-					variant: 'destructive',
-					isVisible: (f) => f.progress < 100,
-					onSelect: removeFeature,
-				},
-			],
-			[removeFeature],
-		);
+		(_feature: Feature): KanbanItemAction<Feature>[] => [
+			{
+				id: 'view',
+				label: 'View details',
+				icon: <Eye className="size-3.5" />,
+				onSelect: (f) => setLastEvent(`Viewed "${f.title}"`),
+			},
+			{
+				id: 'edit',
+				label: 'Edit',
+				icon: <Edit3 className="size-3.5" />,
+				onSelect: (f) => setLastEvent(`Edited "${f.title}"`),
+			},
+			{
+				id: 'duplicate',
+				label: 'Duplicate',
+				icon: <Copy className="size-3.5" />,
+				isDisabled: (f) => f.progress === 100,
+				onSelect: (f) => setLastEvent(`Duplicated "${f.title}"`),
+			},
+			{
+				id: 'delete',
+				label: 'Delete',
+				icon: <Trash2 className="size-3.5" />,
+				variant: 'destructive',
+				isVisible: (f) => f.progress < 100,
+				onSelect: removeFeature,
+			},
+		],
+		[removeFeature],
+	);
 	return (
-		<>
-			<Col>
-								<div className="rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
-									Last event: <span className="font-medium text-foreground">{lastEvent}</span>
+		<div className="flex w-full flex-col gap-3">
+			<div className="rounded-md border border-dashed border-border bg-muted/30 px-3 py-2">
+				<Text size="xs" type="secondary" tag="span">
+					Last event:{' '}
+					<Text size="xs" weight="medium" tag="span">
+						{lastEvent}
+					</Text>
+				</Text>
+			</div>
+			<Kanban<Feature>
+				value={columns}
+				onValueChange={setColumns}
+				getItemValue={(f) => f.id}
+				onItemClick={(f) => setLastEvent(`Clicked "${f.title}"`)}
+				itemActions={itemActions}
+			>
+				<KanbanBoard className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
+					{Object.entries(columns).map(([colId, features]) => {
+						const meta = COLUMN_META[colId];
+						return (
+							<KanbanColumn key={colId} value={colId} className="rounded-md border border-border bg-muted/20 p-2.5">
+								<div className="mb-2 flex items-center gap-2 px-0.5">
+									<span className={cn('size-2 rounded-full', meta.tone)} aria-hidden />
+									<Text weight="semibold" tag="div" lineHeight="tight" className="min-w-0 flex-1 truncate">
+										{meta.title}
+									</Text>
+									<Badge variant="secondary" size="xs" className="ml-auto">
+										{features.length}
+									</Badge>
 								</div>
-								<Kanban<Feature>
-									value={columns}
-									onValueChange={setColumns}
-									getItemValue={(f) => f.id}
-									onItemClick={(f) => setLastEvent(`Clicked "${f.title}"`)}
-									itemActions={itemActions}
-								>
-									<KanbanBoard className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
-										{Object.entries(columns).map(([colId, features]) => {
-											const meta = COLUMN_META[colId];
-											return (
-												<KanbanColumn key={colId} value={colId} className="rounded-md border border-border bg-muted/20 p-2">
-													<div className="mb-2 flex items-center gap-2 px-1">
-														<span className={cn('size-2 rounded-full', meta.tone)} aria-hidden />
-														<Heading tag="h4" className="border-0 pb-0 text-sm font-semibold">
-															{meta.title}
-														</Heading>
-														<Badge variant="secondary" className="ml-auto">
-															{features.length}
-														</Badge>
-													</div>
-													<KanbanColumnContent value={colId} className="min-h-[40px]">
-														{features.map((feature) => (
-															<KanbanItem key={feature.id} value={feature.id}>
-																<FeatureCard feature={feature} />
-															</KanbanItem>
-														))}
-													</KanbanColumnContent>
-												</KanbanColumn>
-											);
-										})}
-									</KanbanBoard>
-									<KanbanOverlay />
-								</Kanban>
-							</Col>
-		</>
+								<KanbanColumnContent value={colId} className="min-h-24 gap-2.5">
+									{features.map((feature) => (
+										<KanbanItem key={feature.id} value={feature.id}>
+											<FeatureCard feature={feature} />
+										</KanbanItem>
+									))}
+								</KanbanColumnContent>
+							</KanbanColumn>
+						);
+					})}
+				</KanbanBoard>
+				<KanbanOverlay />
+			</Kanban>
+		</div>
 	);
 }
 ```