admin-ui-starter-kit 0.1.2 → 0.1.4

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

@@ -52,166 +52,160 @@ import {
 
 export function CartSummaryCardExample() {
 	return (
-		<>
+		<div className="w-full max-w-md">
 			<CartSummaryCard
-								items={[
-									{ id: '1', name: 'Wine Tasting Tour', qty: 2, price: '370 USD' },
-									{ id: '2', name: 'Spa Day Voucher', qty: 1, price: '180 USD' },
-									{ id: '3', name: 'Gift Wrap', qty: 1, price: '15 USD' },
-								]}
-								subtotal="565 USD"
-								tax="113 USD"
-								shipping="0 USD"
-								discount="50 USD"
-								total="628 USD"
-								onCheckout={() => {}}
-							/>
-		</>
+				items={[
+					{ id: '1', name: 'Wine Tasting Tour', qty: 2, price: '370 USD' },
+					{ id: '2', name: 'Spa Day Voucher', qty: 1, price: '180 USD' },
+					{ id: '3', name: 'Gift Wrap', qty: 1, price: '15 USD' },
+				]}
+				subtotal="565 USD"
+				tax="113 USD"
+				shipping="0 USD"
+				discount="50 USD"
+				total="628 USD"
+				onCheckout={() => {}}
+			/>
+		</div>
 	);
 }
 
 export function CouponInputCardEmptyApplied() {
 	return (
-		<>
-			<div className="grid gap-4 md:grid-cols-2">
-								<CouponInputCard onApply={() => {}} />
-								<CouponInputCard appliedCode="SPRING2026" appliedDiscount="88.40 USD" onRemove={() => {}} />
-							</div>
-		</>
+		<div className="grid w-full max-w-4xl gap-4 md:grid-cols-2">
+			<CouponInputCard onApply={() => {}} />
+			<CouponInputCard appliedCode="SPRING2026" appliedDiscount="88.40 USD" onRemove={() => {}} />
+		</div>
 	);
 }
 
 export function OrderStatusCardExample() {
 	return (
-		<>
+		<div className="w-full max-w-xl">
 			<OrderStatusCard
-								orderNumber="ORD-2026-0412"
-								status="shipped"
-								currentEta="Mar 29, 2026"
-								events={[
-									{ label: 'Placed', timestamp: 'Mar 24', complete: true },
-									{ label: 'Paid', timestamp: 'Mar 24', complete: true },
-									{ label: 'Fulfilled', timestamp: 'Mar 25', complete: true },
-									{ label: 'Shipped', timestamp: 'Mar 26', complete: true },
-									{ label: 'Delivered', complete: false },
-								]}
-							/>
-		</>
+				orderNumber="ORD-2026-0412"
+				status="shipped"
+				currentEta="Mar 29, 2026"
+				events={[
+					{ label: 'Placed', timestamp: 'Mar 24', complete: true },
+					{ label: 'Paid', timestamp: 'Mar 24', complete: true },
+					{ label: 'Fulfilled', timestamp: 'Mar 25', complete: true },
+					{ label: 'Shipped', timestamp: 'Mar 26', complete: true },
+					{ label: 'Delivered', complete: false },
+				]}
+			/>
+		</div>
 	);
 }
 
 export function PaymentMethodCardExample() {
 	return (
-		<>
+		<div className="w-full max-w-lg">
 			<PaymentMethodCard brand="visa" last4="4242" expiry="04/27" holderName="Sarah Smitha" isDefault onChange={() => {}} />
-		</>
+		</div>
 	);
 }
 
 export function TaxBreakdownCardExample() {
 	return (
-		<>
+		<div className="w-full max-w-md">
 			<TaxBreakdownCard
-								subtotal="565.00 USD"
-								taxes={[
-									{ label: 'VAT (standard)', rate: '20%', amount: '94.20 USD' },
-									{ label: 'Tourist tax', rate: '€1.50/night', amount: '4.50 USD' },
-									{ label: 'Service charge', rate: '5%', amount: '14.30 USD' },
-								]}
-								totalTax="113.00 USD"
-								total="678.00 USD"
-							/>
-		</>
+				subtotal="565.00 USD"
+				taxes={[
+					{ label: 'VAT (standard)', rate: '20%', amount: '94.20 USD' },
+					{ label: 'Tourist tax', rate: '€1.50/night', amount: '4.50 USD' },
+					{ label: 'Service charge', rate: '5%', amount: '14.30 USD' },
+				]}
+				totalTax="113.00 USD"
+				total="678.00 USD"
+			/>
+		</div>
 	);
 }
 
 export function SubscriptionSummaryCardExample() {
 	return (
-		<>
+		<div className="w-full max-w-lg">
 			<SubscriptionSummaryCard
-								planName="Pro Annual"
-								priceLabel="€29"
-								cycleLabel="/ month"
-								nextBillingDate="May 12, 2026"
-								statusLabel="Active"
-								perks={[
-									{ icon: Sparkles, label: 'AI assist included' },
-									{ icon: Star, label: 'Priority support' },
-									{ icon: Zap, label: 'Unlimited bookings' },
-								]}
-								onManage={() => {}}
-								onUpgrade={() => {}}
-							/>
-		</>
+				planName="Pro Annual"
+				priceLabel="€29"
+				cycleLabel="/ month"
+				nextBillingDate="May 12, 2026"
+				statusLabel="Active"
+				perks={[
+					{ icon: Sparkles, label: 'AI assist included' },
+					{ icon: Star, label: 'Priority support' },
+					{ icon: Zap, label: 'Unlimited bookings' },
+				]}
+				onManage={() => {}}
+				onUpgrade={() => {}}
+			/>
+		</div>
 	);
 }
 
 export function RefundStatusCardExample() {
 	return (
-		<>
+		<div className="w-full max-w-md">
 			<RefundStatusCard
-								stage="processing"
-								amount="180.00 USD"
-								reason="Customer cancelled within 48h window"
-								method="Visa ending 4242"
-								eta="Apr 14, 2026"
-								requestedAt="Apr 8, 2026"
-							/>
-		</>
+				stage="processing"
+				amount="180.00 USD"
+				reason="Customer cancelled within 48h window"
+				method="Visa ending 4242"
+				eta="Apr 14, 2026"
+				requestedAt="Apr 8, 2026"
+			/>
+		</div>
 	);
 }
 
 export function AddressCardExample() {
 	return (
-		<>
-			<div className="grid gap-3 md:grid-cols-2">
-								<AddressCard
-									kind="shipping"
-									name="Sarah Smitha"
-									line1="ul. Vitosha 24, ap. 5"
-									city="New York"
-									postalCode="1000"
-									country="USA"
-									phone="+1 888 123 456"
-									isDefault
-									onEdit={() => {}}
-									onRemove={() => {}}
-								/>
-								<AddressCard
-									kind="billing"
-									name="Daniel Smith"
-									line1="ul. Slavyanska 9"
-									line2="floor 3"
-									city="Los Angeles"
-									postalCode="4000"
-									country="USA"
-									onEdit={() => {}}
-									onRemove={() => {}}
-									onMakeDefault={() => {}}
-								/>
-							</div>
-		</>
+		<div className="grid w-full max-w-3xl gap-3 md:grid-cols-2">
+			<AddressCard
+				kind="shipping"
+				name="Sarah Smitha"
+				line1="ul. Vitosha 24, ap. 5"
+				city="New York"
+				postalCode="1000"
+				country="USA"
+				phone="+1 888 123 456"
+				isDefault
+				onEdit={() => {}}
+				onRemove={() => {}}
+			/>
+			<AddressCard
+				kind="billing"
+				name="Daniel Smith"
+				line1="ul. Slavyanska 9"
+				line2="floor 3"
+				city="Los Angeles"
+				postalCode="4000"
+				country="USA"
+				onEdit={() => {}}
+				onRemove={() => {}}
+				onMakeDefault={() => {}}
+			/>
+		</div>
 	);
 }
 
 export function VoucherEntryCardExample() {
 	const [voucherApplied, setVoucherApplied] = useState(false);
 	return (
-		<>
-			<div className="grid gap-3 md:grid-cols-2">
-								<VoucherEntryCard
-									onCheck={() => setVoucherApplied(true)}
-									{...(voucherApplied
-										? { appliedCode: 'GCT-2026-PETROV', balance: '120.00 USD', onRemove: () => setVoucherApplied(false) }
-										: {})}
-								/>
-								<VoucherEntryCard
-									appliedCode="GCT-A4B7-C9E2"
-									balance="250.00 USD"
-									onRemove={() => {}}
-								/>
-							</div>
-		</>
+		<div className="grid w-full max-w-4xl gap-3 md:grid-cols-2">
+			<VoucherEntryCard
+				onCheck={() => setVoucherApplied(true)}
+				{...(voucherApplied
+					? { appliedCode: 'GCT-2026-PETROV', balance: '120.00 USD', onRemove: () => setVoucherApplied(false) }
+					: {})}
+			/>
+			<VoucherEntryCard
+				appliedCode="GCT-A4B7-C9E2"
+				balance="250.00 USD"
+				onRemove={() => {}}
+			/>
+		</div>
 	);
 }
 ```

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

@@ -33,80 +33,81 @@ Bookings, loyalty, discount stacks, shipment tracking.
 
 ```tsx
 import {
-	UpcomingBookingRow,
-	LoyaltyPointsCard,
 	DiscountStackPreview,
+	LoyaltyPointsCard,
 	ShipmentTrackingCard,
+	UpcomingBookingRow,
 } from '@/components/composed/commerce';
 import { SmartCard } from '@/components/base/cards';
 
 export function UpcomingBookings() {
 	return (
-		<>
+		<div className="w-full max-w-xl">
 			<SmartCard>
-								<UpcomingBookingRow
-									bookings={[
-										{ id: '1', date: new Date(2026, 2, 28), service: 'Wine Tasting Tour', customer: 'Daniel Smith', time: '14:00', amount: '370 USD' },
-										{ id: '2', date: new Date(2026, 3, 3), service: 'Luxury Spa Day', customer: 'Emma Garcia', time: '10:00', amount: '320 USD' },
-										{ id: '3', date: new Date(2026, 3, 7), service: 'Hot Air Balloon', customer: 'David Williams', time: '06:30', amount: '580 USD' },
-									]}
-								/>
-							</SmartCard>
-		</>
+				<UpcomingBookingRow
+					timePlacement="inline-trailing"
+					bookings={[
+						{ id: '1', date: new Date(2026, 2, 28), service: 'Wine Tasting Tour', customer: 'Daniel Smith', time: '14:00', amount: '370 USD' },
+						{ id: '2', date: new Date(2026, 3, 3), service: 'Luxury Spa Day', customer: 'Emma Garcia', time: '10:00', amount: '320 USD' },
+						{ id: '3', date: new Date(2026, 3, 7), service: 'Hot Air Balloon', customer: 'David Williams', time: '06:30', amount: '580 USD' },
+					]}
+				/>
+			</SmartCard>
+		</div>
 	);
 }
 
 export function LoyaltyPoints() {
 	return (
-		<>
+		<div className="w-full max-w-md">
 			<LoyaltyPointsCard
-								balance="4,830"
-								tier="Gold Tier"
-								history={[
-									{ label: 'Spa booking', points: '+250', date: 'Mar 24', positive: true },
-									{ label: 'Redeemed coupon', points: '-500', date: 'Mar 18', positive: false },
-									{ label: 'Wine tasting order', points: '+180', date: 'Mar 12', positive: true },
-								]}
-								onRedeem={() => {}}
-							/>
-		</>
+				balance="4,830"
+				tier="Gold Tier"
+				history={[
+					{ label: 'Spa booking', points: '+250', date: 'Mar 24', positive: true },
+					{ label: 'Redeemed coupon', points: '-500', date: 'Mar 18', positive: false },
+					{ label: 'Wine tasting order', points: '+180', date: 'Mar 12', positive: true },
+				]}
+				onRedeem={() => {}}
+			/>
+		</div>
 	);
 }
 
 export function DiscountStack() {
 	return (
-		<>
+		<div className="w-full max-w-lg">
 			<DiscountStackPreview
-								discounts={[
-									{ type: 'Coupon', label: 'SPRING2026 — 25% off', amount: '-88.40 USD', badge: 'info' },
-									{ type: 'Loyalty', label: 'Gold tier — 5% extra', amount: '-17.68 USD', badge: 'warning' },
-									{ type: 'Promo', label: 'Free shipping over 500 USD', amount: '-12.00 USD', badge: 'success' },
-								]}
-								totalSavings="-118.08 USD"
-							/>
-		</>
+				discounts={[
+					{ type: 'Coupon', label: 'SPRING2026 — 25% off', amount: '-88.40 USD', badge: 'info' },
+					{ type: 'Loyalty', label: 'Gold tier — 5% extra', amount: '-17.68 USD', badge: 'warning' },
+					{ type: 'Promo', label: 'Free shipping over 500 USD', amount: '-12.00 USD', badge: 'success' },
+				]}
+				totalSavings="-118.08 USD"
+			/>
+		</div>
 	);
 }
 
 export function ShipmentTracking() {
 	return (
-		<>
+		<div className="w-full max-w-xl">
 			<ShipmentTrackingCard
-								trackingNumber="TRK-9847261035"
-								carrier="Speedy"
-								status="In Transit"
-								steps={[
-									{ label: 'Picked up', done: true },
-									{ label: 'In transit', done: true },
-									{ label: 'Out for delivery', done: false },
-									{ label: 'Delivered', done: false },
-								]}
-								details={[
-									{ label: 'Est. Delivery', value: 'Mar 29, 2026' },
-									{ label: 'Recipient', value: 'Daniel Smith' },
-								]}
-							/>
-		</>
+				trackingNumber="TRK-9847261035"
+				carrier="Speedy"
+				status="In Transit"
+				steps={[
+					{ label: 'Picked up', done: true },
+					{ label: 'In transit', done: true },
+					{ label: 'Out for delivery', done: false },
+					{ label: 'Delivered', done: false },
+				]}
+				details={[
+					{ label: 'Est. Delivery', value: 'Mar 29, 2026' },
+					{ label: 'Recipient', value: 'Daniel Smith' },
+				]}
+			/>
+		</div>
 	);
 }
 ```

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

@@ -46,7 +46,8 @@ import { SmartCard } from '@/components/base/cards';
 export function KanbanMicroBoardExample() {
 	return (
 		<>
-			<KanbanMicroBoard
+			<div className="w-full max-w-4xl">
+				<KanbanMicroBoard
 								columns={[
 									{ title: 'Draft', items: [{ title: 'Spa Package v2', color: 'chart-4' }, { title: 'Wine Tour', color: 'chart-3' }] },
 									{ title: 'Active', items: [{ title: 'Cooking Class', color: 'chart-1' }, { title: 'Paragliding', color: 'chart-1' }] },
@@ -54,6 +55,7 @@ export function KanbanMicroBoardExample() {
 									{ title: 'Done', items: [{ title: 'Balloon Ride', color: 'chart-1' }, { title: 'Photo Tour', color: 'chart-1' }] },
 								]}
 							/>
+			</div>
 		</>
 	);
 }
@@ -106,7 +108,8 @@ export function VendorPerformance() {
 export function ExperienceActivity() {
 	return (
 		<>
-			<ExperienceActivityCard
+			<div className="w-full max-w-2xl">
+				<ExperienceActivityCard
 								completed={2}
 								total={5}
 								activities={[
@@ -115,6 +118,7 @@ export function ExperienceActivity() {
 								]}
 								onAdd={() => {}}
 							/>
+			</div>
 		</>
 	);
 }

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

@@ -65,7 +65,9 @@ const steps = [
 export function StepsVertical() {
 	return (
 		<>
-			<StepsCard title="Order Processing" description="Order #ORD-2026-0412" steps={steps} />
+			<div className="w-full max-w-2xl">
+				<StepsCard title="Order Processing" description="Order #ORD-2026-0412" steps={steps} />
+			</div>
 		</>
 	);
 }
@@ -73,7 +75,9 @@ export function StepsVertical() {
 export function StepsHorizontalExample() {
 	return (
 		<>
-			<StepsHorizontal title="Delivery Pipeline" steps={steps} />
+			<div className="w-full max-w-3xl">
+				<StepsHorizontal title="Delivery Pipeline" steps={steps} />
+			</div>
 		</>
 	);
 }
@@ -81,7 +85,8 @@ export function StepsHorizontalExample() {
 export function OrderTimeline() {
 	return (
 		<>
-			<OrderTimelineCard
+			<div className="w-full max-w-2xl">
+				<OrderTimelineCard
 								title="Order #ORD-2026-0415"
 								description="Sarah Smitha — 2,450 USD"
 								events={[
@@ -93,6 +98,7 @@ export function OrderTimeline() {
 								]}
 								footerText="Last updated 2 minutes ago"
 							/>
+			</div>
 		</>
 	);
 }
@@ -100,7 +106,8 @@ export function OrderTimeline() {
 export function PaymentTimeline() {
 	return (
 		<>
-			<PaymentTimelineCard
+			<div className="w-full max-w-2xl">
+				<PaymentTimelineCard
 								events={[
 									{ label: 'Invoice sent', date: 'Mar 20', amount: '2,480 USD', done: true, icon: FileText },
 									{ label: 'Reminder sent', date: 'Apr 5', done: true, icon: Mail },
@@ -108,6 +115,7 @@ export function PaymentTimeline() {
 									{ label: 'Receipt generated', date: 'Apr 12', done: false, icon: Receipt },
 								]}
 							/>
+			</div>
 		</>
 	);
 }
@@ -115,7 +123,8 @@ export function PaymentTimeline() {
 export function ActivityStreamReadOnlyTracking() {
 	return (
 		<>
-			<ActivityStreamCard
+			<div className="w-full max-w-2xl">
+				<ActivityStreamCard
 								items={[
 									{ id: '1', icon: CheckCircle, iconVariant: 'success', actor: 'Sarah Smitha', action: 'paid invoice', target: '#INV-2026-0392', timestamp: '2 minutes ago' },
 									{ id: '2', icon: ShoppingBag, iconVariant: 'primary', actor: 'Daniel Smith', action: 'placed order', target: '#ORD-2026-0413', timestamp: '15 minutes ago', metadata: [{ label: 'Items', value: '3' }, { label: 'Total', value: '370 USD' }] },
@@ -123,6 +132,7 @@ export function ActivityStreamReadOnlyTracking() {
 									{ id: '4', icon: AlertTriangle, iconVariant: 'error', action: 'Webhook failure on', target: 'shopify.payments.captured', timestamp: '3 hours ago' },
 								]}
 							/>
+			</div>
 		</>
 	);
 }
@@ -130,7 +140,8 @@ export function ActivityStreamReadOnlyTracking() {
 export function Changelog() {
 	return (
 		<>
-			<ChangelogTimelineCard
+			<div className="w-full max-w-2xl">
+				<ChangelogTimelineCard
 								entries={[
 									{
 										id: 'c1',
@@ -169,6 +180,7 @@ export function Changelog() {
 									},
 								]}
 							/>
+			</div>
 		</>
 	);
 }
@@ -176,7 +188,8 @@ export function Changelog() {
 export function Milestones() {
 	return (
 		<>
-			<MilestonesTimelineCard
+			<div className="w-full max-w-2xl">
+				<MilestonesTimelineCard
 								milestones={[
 									{
 										id: 'm1',
@@ -216,6 +229,7 @@ export function Milestones() {
 									},
 								]}
 							/>
+			</div>
 		</>
 	);
 }

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

@@ -303,13 +303,15 @@ export function CommentsExample() {
 	    >(INITIAL_COMMENTS);
 	return (
 		<>
-			<Comments
+			<div className="w-full max-w-3xl">
+				<Comments
 			                    {...commonProps}
 			                    context={CONTEXT}
 			                    comments={comments}
 			                    canComment
 			                    canModerate
 			                />
+			</div>
 		</>
 	);
 }
@@ -324,12 +326,14 @@ export function ReadOnly() {
 	    >(INITIAL_COMMENTS);
 	return (
 		<>
-			<Comments
+			<div className="w-full max-w-3xl">
+				<Comments
 			                    {...commonProps}
 			                    context={CONTEXT}
 			                    comments={comments}
 			                    canComment={false}
 			                />
+			</div>
 		</>
 	);
 }
@@ -337,7 +341,8 @@ export function ReadOnly() {
 export function EmptyStateCustomStrings() {
 	return (
 		<>
-			<Comments
+			<div className="w-full max-w-3xl">
+				<Comments
 			                    {...commonProps}
 			                    context={CONTEXT}
 			                    comments={[]}
@@ -350,6 +355,7 @@ export function EmptyStateCustomStrings() {
 			                        composerSubmit: 'Save note',
 			                    }}
 			                />
+			</div>
 		</>
 	);
 }
@@ -364,7 +370,8 @@ export function CustomReferenceRendering() {
 	    >(INITIAL_COMMENTS);
 	return (
 		<>
-			<Comments
+			<div className="w-full max-w-3xl">
+				<Comments
 			                    {...commonProps}
 			                    context={CONTEXT}
 			                    comments={comments.slice(0, 2)}
@@ -379,6 +386,7 @@ export function CustomReferenceRendering() {
 			                        </span>
 			                    )}
 			                />
+			</div>
 		</>
 	);
 }

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

@@ -347,7 +347,7 @@ export function ActivityTimelineComposer() {
 	    };
 	return (
 		<>
-			<div className="space-y-4">
+			<div className="w-full max-w-3xl space-y-4">
 			                    <CommentComposer
 			                        context={{ id: 'INV-2026-0398', type: 'order' }}
 			                        canComment
@@ -375,12 +375,14 @@ export function CompactDensity() {
 	    );
 	return (
 		<>
-			<ActivityFeedCard
+			<div className="w-full max-w-3xl">
+				<ActivityFeedCard
 			                    title="Recent"
 			                    activities={activities.slice(0, 4)}
 			                    density="compact"
 			                    resources={ACTIVITY_RESOURCES}
 			                />
+			</div>
 		</>
 	);
 }