admin-ui-starter-kit 0.6.6 → 0.6.7

package/dist/showcase/assets/refinement-guide-Bri81J9N.js

@@ -0,0 +1,189 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,o as n,p as r,t as i}from"./section-DYfGx1Q5.js";import{r as a,t as o}from"./example-CzbL5xoH.js";import{t as s}from"./circle-check-DdjJpGc9.js";import{t as c}from"./eye-Dq0mLKrs.js";import{t as l}from"./file-text-JGaJQ8Wd.js";import{t as u}from"./list-checks-Dhr60VvL.js";import{d,i as f,l as p,s as m}from"./index-DN09-Vts.js";import{t as h}from"./icon-badge-G9Fp891n.js";import{t as g}from"./smart-card-CVwEPwfI.js";var _=p(`git-compare-arrows`,[[`circle`,{cx:`5`,cy:`6`,r:`3`,key:`1qnov2`}],[`path`,{d:`M12 6h5a2 2 0 0 1 2 2v7`,key:`1yj91y`}],[`path`,{d:`m15 9-3-3 3-3`,key:`1lwv8l`}],[`circle`,{cx:`19`,cy:`18`,r:`3`,key:`1qljk2`}],[`path`,{d:`M12 18H7a2 2 0 0 1-2-2V9`,key:`16sdep`}],[`path`,{d:`m9 15 3 3-3 3`,key:`1m3kbl`}]]),v=p(`search-check`,[[`path`,{d:`m8 11 2 2 4-4`,key:`1sed1v`}],[`circle`,{cx:`11`,cy:`11`,r:`8`,key:`4ej97u`}],[`path`,{d:`m21 21-4.3-4.3`,key:`1qie3q`}]]),y=e({AcceptanceChecklist:()=>O,NextPassTargets:()=>k,RefinementGoals:()=>E,RefinementOutcomes:()=>T,ReviewLoop:()=>D}),b=d(),x=[{icon:_,title:`One route map`,description:`Docs, CSS variables, base, layouts, composed surfaces, and features now live in one collapsible sidebar.`,tone:`primary`},{icon:f,title:`Token visibility`,description:`The CSS variables page exposes scale, density, display gap, padding, and component-specific knobs as searchable reference data.`,tone:`info`},{icon:v,title:`Searchable docs`,description:`The global preview search matches route ids, families, scopes, labels, notes, and token-focused routes.`,tone:`success`},{icon:m,title:`Repeatable gates`,description:`Docs sync, props checks, browser sweeps, a11y, visual baselines, package smoke, and release verification define the maintainer loop.`,tone:`warning`}],S=[[`Orient`,`Open the route, confirm the public import path, source path, and owning layer.`],[`Exercise`,`Use the live example like a consumer would: type, select, open overlays, submit, and trigger empty or error states.`],[`Inspect`,`Check desktop and mobile for spacing, hierarchy, active states, overflow, console errors, and blank renders.`],[`Record`,`Patch the owning component or docs page, rerun the focused gate, then update baselines only for intentional visual changes.`]],C=[`Sidebar labels are concise and do not repeat their parent layer.`,`Active navigation reads as selection, not a raised card or button.`,`Examples use shipped components and exact public package paths.`,`Text hierarchy stays in sm, xs, and xxs unless the page needs a hero value.`,`No horizontal overflow, runtime overlay, console error, or blank render.`,`New routes appear in the registry, docs sync output, and searchable sidebar.`],w=[[`Route taxonomy`,`Keep refining labels and families when the tree starts to feel repetitive.`],[`Examples density`,`Prefer fewer but richer examples that expose real state and callbacks.`],[`Mobile docs nav`,`Watch long route names and group descriptions inside the collapsed mobile browser.`],[`Token adoption`,`Move repeated one-off spacing into the shared CSS variable scale when it proves reusable.`]];function T(){return(0,b.jsx)(`div`,{className:`grid gap-3 md:grid-cols-2 xl:grid-cols-4`,children:x.map(e=>(0,b.jsx)(g,{surface:`framed`,padding:`default`,className:`h-full`,children:(0,b.jsxs)(`div`,{className:`space-y-3`,children:[(0,b.jsx)(h,{icon:e.icon,tone:e.tone,shape:`square`}),(0,b.jsxs)(`div`,{children:[(0,b.jsx)(r,{weight:`semibold`,children:e.title}),(0,b.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1`,children:e.description})]})]})},e.title))})}function E(){return(0,b.jsx)(g,{title:`Showcase refinement target`,description:`The preview should feel like the package cockpit: quiet navigation, accurate examples, searchable tokens, and repeatable release checks.`,icon:(0,b.jsx)(h,{icon:c,tone:`primary`,shape:`square`,size:`default`}),children:(0,b.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,b.jsx)(n,{variant:`secondary`,children:`Calm hierarchy`}),(0,b.jsx)(n,{variant:`secondary`,children:`Exact imports`}),(0,b.jsx)(n,{variant:`secondary`,children:`Searchable variables`}),(0,b.jsx)(n,{variant:`secondary`,children:`Browser verified`}),(0,b.jsx)(n,{variant:`secondary`,children:`Agent readable`})]})})}function D(){return(0,b.jsx)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:S.map(([e,t],n)=>(0,b.jsx)(g,{surface:`framed`,padding:`default`,children:(0,b.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,b.jsx)(`span`,{className:`inline-flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-foreground`,children:n+1}),(0,b.jsxs)(`div`,{children:[(0,b.jsx)(r,{weight:`semibold`,children:e}),(0,b.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1`,children:t})]})]})},e))})}function O(){return(0,b.jsx)(g,{title:`Visual acceptance checklist`,description:`Use these as blocking checks before calling a showcase refinement done.`,icon:(0,b.jsx)(h,{icon:u,tone:`success`,shape:`square`,size:`default`}),children:(0,b.jsx)(`div`,{className:`grid gap-2 md:grid-cols-2`,children:C.map(e=>(0,b.jsxs)(`div`,{className:`flex items-start gap-2 rounded-md bg-muted/35 px-3 py-2`,children:[(0,b.jsx)(s,{className:`mt-0.5 h-3.5 w-3.5 shrink-0 text-success`,"aria-hidden":`true`}),(0,b.jsx)(r,{size:`xs`,children:e})]},e))})})}function k(){return(0,b.jsx)(g,{title:`Known next refinements`,description:`These are not blockers for the current pass, but they are the first places to inspect when the docs tree starts feeling noisy again.`,icon:(0,b.jsx)(h,{icon:l,tone:`info`,shape:`square`,size:`default`}),footerSlot:(0,b.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,b.jsx)(a,{href:`#/base/css-variables`,size:`default`,buttonStyle:`outline`,children:`CSS variables`}),(0,b.jsx)(a,{href:`#/docs/showcase`,size:`default`,buttonStyle:`outline`,children:`Showcase workflow`})]}),children:(0,b.jsx)(`div`,{className:`space-y-2`,children:w.map(([e,t])=>(0,b.jsxs)(`div`,{className:`rounded-md border border-border px-3 py-2`,children:[(0,b.jsx)(r,{weight:`semibold`,children:e}),(0,b.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1`,children:t})]},e))})})}var A=`import {
+	CheckCircle2,
+	ClipboardCheck,
+	Eye,
+	FileText,
+	GitCompareArrows,
+	ListChecks,
+	SearchCheck,
+	SlidersHorizontal } from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { IconBadge,
+} from '@/components/base/display';
+import { Text } from '@/components/typography';
+
+const OUTCOMES = [
+	{
+		icon: GitCompareArrows,
+		title: 'One route map',
+		description: 'Docs, CSS variables, base, layouts, composed surfaces, and features now live in one collapsible sidebar.',
+		tone: 'primary',
+	},
+	{
+		icon: SlidersHorizontal,
+		title: 'Token visibility',
+		description: 'The CSS variables page exposes scale, density, display gap, padding, and component-specific knobs as searchable reference data.',
+		tone: 'info',
+	},
+	{
+		icon: SearchCheck,
+		title: 'Searchable docs',
+		description: 'The global preview search matches route ids, families, scopes, labels, notes, and token-focused routes.',
+		tone: 'success',
+	},
+	{
+		icon: ClipboardCheck,
+		title: 'Repeatable gates',
+		description: 'Docs sync, props checks, browser sweeps, a11y, visual baselines, package smoke, and release verification define the maintainer loop.',
+		tone: 'warning',
+	},
+] as const;
+
+const REVIEW_STEPS = [
+	['Orient', 'Open the route, confirm the public import path, source path, and owning layer.'],
+	['Exercise', 'Use the live example like a consumer would: type, select, open overlays, submit, and trigger empty or error states.'],
+	['Inspect', 'Check desktop and mobile for spacing, hierarchy, active states, overflow, console errors, and blank renders.'],
+	['Record', 'Patch the owning component or docs page, rerun the focused gate, then update baselines only for intentional visual changes.'],
+] as const;
+
+const CHECKS = [
+	'Sidebar labels are concise and do not repeat their parent layer.',
+	'Active navigation reads as selection, not a raised card or button.',
+	'Examples use shipped components and exact public package paths.',
+	'Text hierarchy stays in sm, xs, and xxs unless the page needs a hero value.',
+	'No horizontal overflow, runtime overlay, console error, or blank render.',
+	'New routes appear in the registry, docs sync output, and searchable sidebar.',
+] as const;
+
+const NEXT_TARGETS = [
+	['Route taxonomy', 'Keep refining labels and families when the tree starts to feel repetitive.'],
+	['Examples density', 'Prefer fewer but richer examples that expose real state and callbacks.'],
+	['Mobile docs nav', 'Watch long route names and group descriptions inside the collapsed mobile browser.'],
+	['Token adoption', 'Move repeated one-off spacing into the shared CSS variable scale when it proves reusable.'],
+] as const;
+
+export function RefinementOutcomes() {
+	return (
+		<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+			{OUTCOMES.map((item) => (
+				<SmartCard key={item.title} surface="framed" padding="default" className="h-full">
+					<div className="space-y-3">
+						<IconBadge icon={item.icon} tone={item.tone} shape="square" />
+						<div>
+							<Text weight="semibold">{item.title}</Text>
+							<Text size="xs" type="secondary" className="mt-1">
+								{item.description}
+							</Text>
+						</div>
+					</div>
+				</SmartCard>
+			))}
+		</div>
+	);
+}
+
+export function RefinementGoals() {
+	return (
+		<SmartCard
+			title="Showcase refinement target"
+			description="The preview should feel like the package cockpit: quiet navigation, accurate examples, searchable tokens, and repeatable release checks."
+			icon={<IconBadge icon={Eye} tone="primary" shape="square" size="default" />}
+		>
+			<div className="flex flex-wrap gap-2">
+				<Badge variant="secondary">Calm hierarchy</Badge>
+				<Badge variant="secondary">Exact imports</Badge>
+				<Badge variant="secondary">Searchable variables</Badge>
+				<Badge variant="secondary">Browser verified</Badge>
+				<Badge variant="secondary">Agent readable</Badge>
+			</div>
+		</SmartCard>
+	);
+}
+
+export function ReviewLoop() {
+	return (
+		<div className="grid gap-3 md:grid-cols-2">
+			{REVIEW_STEPS.map(([title, description], index) => (
+				<SmartCard key={title} surface="framed" padding="default">
+					<div className="flex items-start gap-3">
+						<span className="inline-flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-foreground">{index + 1}</span>
+						<div>
+							<Text weight="semibold">{title}</Text>
+							<Text size="xs" type="secondary" className="mt-1">
+								{description}
+							</Text>
+						</div>
+					</div>
+				</SmartCard>
+			))}
+		</div>
+	);
+}
+
+export function AcceptanceChecklist() {
+	return (
+		<SmartCard
+			title="Visual acceptance checklist"
+			description="Use these as blocking checks before calling a showcase refinement done."
+			icon={<IconBadge icon={ListChecks} tone="success" shape="square" size="default" />}
+		>
+			<div className="grid gap-2 md:grid-cols-2">
+				{CHECKS.map((item) => (
+					<div key={item} className="flex items-start gap-2 rounded-md bg-muted/35 px-3 py-2">
+						<CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-success" aria-hidden="true" />
+						<Text size="xs">{item}</Text>
+					</div>
+				))}
+			</div>
+		</SmartCard>
+	);
+}
+
+export function NextPassTargets() {
+	return (
+		<SmartCard
+			title="Known next refinements"
+			description="These are not blockers for the current pass, but they are the first places to inspect when the docs tree starts feeling noisy again."
+			icon={<IconBadge icon={FileText} tone="info" shape="square" size="default" />}
+			footerSlot={
+				<div className="flex flex-wrap gap-2">
+					<Button href="#/base/css-variables" size="default" buttonStyle="outline">
+						CSS variables
+					</Button>
+					<Button href="#/docs/showcase" size="default" buttonStyle="outline">
+						Showcase workflow
+					</Button>
+				</div>
+			}
+		>
+			<div className="space-y-2">
+				{NEXT_TARGETS.map(([title, description]) => (
+					<div key={title} className="rounded-md border border-border px-3 py-2">
+						<Text weight="semibold">{title}</Text>
+						<Text size="xs" type="secondary" className="mt-1">
+							{description}
+						</Text>
+					</div>
+				))}
+			</div>
+		</SmartCard>
+	);
+}
+`;function j(e){let n={a:`a`,p:`p`,...e.components};return y||N(`Examples`,!1),O||N(`Examples.AcceptanceChecklist`,!0),k||N(`Examples.NextPassTargets`,!0),E||N(`Examples.RefinementGoals`,!0),T||N(`Examples.RefinementOutcomes`,!0),D||N(`Examples.ReviewLoop`,!0),(0,b.jsxs)(t,{title:`Refinement guide`,description:`What changed in the showcase, why it matters, and how to keep polishing the package without losing the system contract.`,layer:`docs`,status:`ready`,sourcePath:`src/preview/PreviewApp.tsx + src/preview/registry.tsx`,children:[(0,b.jsxs)(i,{title:`What Changed`,id:`what-changed`,children:[(0,b.jsx)(n.p,{children:`The showcase now uses one sidebar as the package map. Installation, overview,
+CSS variables, showcase workflow, base, layouts, composed surfaces, and
+features are all discoverable from the same navigation model.`}),(0,b.jsx)(o,{name:`RefinementOutcomes`,source:A,layout:`flush`,children:(0,b.jsx)(T,{})})]}),(0,b.jsxs)(i,{title:`Goals`,id:`goals`,children:[(0,b.jsx)(n.p,{children:`The goal is not a decorative docs shell. The goal is a maintainer-grade preview
+that can answer three questions quickly: what does the package expose, how
+should a consumer import it, and does the rendered surface still meet the
+library voice.`}),(0,b.jsx)(o,{name:`RefinementGoals`,source:A,layout:`flush`,children:(0,b.jsx)(E,{})})]}),(0,b.jsxs)(i,{title:`Review Loop`,id:`review-loop`,children:[(0,b.jsx)(n.p,{children:`Use this loop for every future visual or documentation pass. If a route feels
+wrong, fix the owning package component or docs source instead of hiding the
+issue in the preview chrome.`}),(0,b.jsx)(o,{name:`ReviewLoop`,source:A,layout:`flush`,children:(0,b.jsx)(D,{})}),(0,b.jsxs)(n.p,{children:[`For the full operating manual, use
+`,(0,b.jsx)(n.a,{href:`#/docs/design-system-consistency`,children:`Design system consistency`}),`. It documents the
+goals, token model, drift checks, Playwright pass, Browser-plugin pass, and
+acceptance rubric for future package refinement.`]})]}),(0,b.jsxs)(i,{title:`Acceptance Checklist`,id:`acceptance-checklist`,children:[(0,b.jsx)(n.p,{children:`The sidebar and docs pages should stay calm, searchable, and dense without
+feeling cramped. These checks are intentionally concrete so another pass can
+continue from the same standard.`}),(0,b.jsx)(o,{name:`AcceptanceChecklist`,source:A,layout:`flush`,children:(0,b.jsx)(O,{})})]}),(0,b.jsxs)(i,{title:`Known Next Passes`,id:`known-next-passes`,children:[(0,b.jsx)(n.p,{children:`The package can keep improving without changing direction. Treat these as
+watchpoints when reviewing the next screenshot, route sweep, or consumer
+feedback report.`}),(0,b.jsx)(o,{name:`NextPassTargets`,source:A,layout:`flush`,children:(0,b.jsx)(k,{})})]})]})}function M(e={}){let{wrapper:t}=e.components||{};return t?(0,b.jsx)(t,{...e,children:(0,b.jsx)(j,{...e})}):j(e)}function N(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{M as default};

package/dist/showcase/assets/refresh-cw-tZzNDEGO.js

@@ -0,0 +1 @@
+import{l as e}from"./index-DN09-Vts.js";var t=e(`refresh-cw`,[[`path`,{d:`M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8`,key:`v9h5vc`}],[`path`,{d:`M21 3v5h-5`,key:`1q7to0`}],[`path`,{d:`M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16`,key:`3uifl3`}],[`path`,{d:`M8 16H3v5`,key:`1cv678`}]]);export{t};

package/dist/showcase/assets/resolveValueLabel-Cti97iX8.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{d as n}from"./index-DN09-Vts.js";import{t as r}from"./serializeValue-B_EucO5O.js";var i=(e,t)=>Object.is(e,t);function a(e,t,n){return e==null||t==null?Object.is(e,t):n(e,t)}function o(e,t,n){return!e||e.length===0?!1:e.some(e=>e===void 0?!1:a(t,e,n))}function s(e,t,n){return!e||e.length===0?-1:e.findIndex(e=>e===void 0?!1:a(e,t,n))}function c(e,t,n){return e.filter(e=>!a(t,e,n))}var l=e(t(),1),u=n();function d(e){return e!=null&&e.length>0&&typeof e[0]==`object`&&e[0]!=null&&`items`in e[0]}function f(e){if(!Array.isArray(e))return e!=null&&`null`in e;let t=e;if(d(t)){for(let e of t)for(let t of e.items)if(t&&t.value==null&&t.label!=null)return!0;return!1}for(let e of t)if(e&&e.value==null&&e.label!=null)return!0;return!1}function p(e,t){if(t&&e!=null)return t(e)??``;if(e&&typeof e==`object`){if(`label`in e&&e.label!=null)return String(e.label);if(`value`in e)return String(e.value)}return r(e)}function m(e,t){return t&&e!=null?t(e)??``:e&&typeof e==`object`&&`value`in e&&`label`in e?r(e.value):r(e)}function h(e,t,n){function r(){return p(e,n)}if(n&&e!=null)return n(e);if(e&&typeof e==`object`&&`label`in e&&e.label!=null)return e.label;if(t&&!Array.isArray(t))return t[e]??r();if(Array.isArray(t)){let n=t,i=d(n)?n.flatMap(e=>e.items):n;if(typeof e!=`object`||!e){let t=i.find(t=>t.value===e);return t&&t.label!=null?t.label:r()}if(`value`in e){let t=i.find(t=>t&&t.value===e.value);if(t&&t.label!=null)return t.label}}return r()}function g(e,t,n){return e.reduce((e,r,i)=>(i>0&&e.push(`, `),e.push((0,u.jsx)(l.Fragment,{children:h(r,t,n)},i)),e),[])}export{p as a,i as c,o as d,h as i,s as l,d as n,m as o,g as r,a as s,f as t,c as u};

package/dist/showcase/assets/resource-B727CTVi.js

@@ -0,0 +1,139 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,o as n,p as r,t as i}from"./section-DYfGx1Q5.js";import{t as a}from"./bell-DiXXE8YI.js";import{r as o,t as s}from"./example-CzbL5xoH.js";import{t as c}from"./plus-CKBaO4jG.js";import{t as l}from"./shield-xI2P9G5d.js";import{t as u}from"./user-ymdT26JK.js";import{d}from"./index-DN09-Vts.js";import{t as f}from"./props-table-izArO1Pv.js";import{t as p}from"./smart-card-CVwEPwfI.js";import{a as m,c as h,i as g,l as _,n as v,o as y,r as b,s as x,t as S}from"./resource-DytT_quB.js";var C=e({ResourceIndexShellExample:()=>E,ResourceShowShellExample:()=>D,TabbedResourceDetails:()=>O}),w=d(),T=[{label:`Open invoices`,value:`24`,detail:`8 need manual review`},{label:`Active customers`,value:`1,284`,detail:`+4.8% this month`},{label:`Draft contracts`,value:`16`,detail:`3 waiting on finance`}];function E(){return(0,w.jsx)(y,{title:`Bookings`,description:`Index shells keep header, toolbar, list content, and empty-state rhythm consistent.`,actions:(0,w.jsx)(o,{variant:`primary`,icon:c,children:`New booking`}),toolbar:(0,w.jsx)(S,{leading:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(n,{variant:`info`,children:`24 active`}),(0,w.jsx)(n,{variant:`warning`,children:`8 review`})]}),trailing:(0,w.jsx)(o,{variant:`secondary`,children:`Export`})}),children:(0,w.jsx)(`div`,{className:`grid gap-2`,children:T.map(e=>(0,w.jsx)(p,{padding:`default`,className:`shadow-sm`,children:(0,w.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,w.jsxs)(`div`,{children:[(0,w.jsx)(r,{weight:`medium`,children:e.label}),(0,w.jsx)(r,{size:`xs`,type:`secondary`,children:e.detail})]}),(0,w.jsx)(r,{weight:`semibold`,children:e.value})]})},e.label))})})}function D(){return(0,w.jsx)(h,{slots:{header:(0,w.jsx)(m,{title:`Sarah Smitha`,eyebrow:`Customer`,description:`Gold-tier account with active bookings and billing history.`,badges:(0,w.jsx)(n,{variant:`success`,children:`Active`}),actions:(0,w.jsx)(o,{variant:`secondary`,children:`Edit profile`})}),aside:(0,w.jsx)(x,{title:`Related records`,children:(0,w.jsxs)(`div`,{className:`grid gap-2`,children:[(0,w.jsx)(r,{size:`xs`,type:`secondary`,children:`4 bookings`}),(0,w.jsx)(r,{size:`xs`,type:`secondary`,children:`2 invoices`})]})})},children:(0,w.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:[(0,w.jsx)(b,{title:`Account details`,children:(0,w.jsx)(r,{size:`xs`,type:`secondary`,children:`Primary email, billing status, and customer metadata.`})}),(0,w.jsx)(v,{title:`Recent activity`,children:(0,w.jsx)(r,{size:`xs`,type:`secondary`,children:`Last booking updated 12 minutes ago.`})})]})})}function O(){return(0,w.jsx)(_,{title:`Sarah Smitha`,description:`Gold-tier account with active bookings and billing history.`,activeTab:`profile`,tabs:[{id:`profile`,label:`Profile`,icon:u},{id:`security`,label:`Security`,icon:l},{id:`notifications`,label:`Notifications`,icon:a,badge:`3`}],actions:(0,w.jsx)(o,{variant:`secondary`,children:`Edit profile`}),slots:{aside:(0,w.jsx)(x,{title:`Related records`,children:(0,w.jsxs)(`div`,{className:`grid gap-2`,children:[(0,w.jsx)(r,{size:`xs`,type:`secondary`,children:`4 bookings`}),(0,w.jsx)(r,{size:`xs`,type:`secondary`,children:`2 invoices`})]})})},children:(0,w.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:[(0,w.jsx)(g,{title:`Account details`,metadata:[{label:`Email`,value:`sarah@example.com`},{label:`Segment`,value:`Gold`},{label:`Created`,value:`May 14, 2026`},{label:`Owner`,value:`Emma Garcia`}],help:`Consumers own field visibility, permissions, and edit workflows.`}),(0,w.jsx)(v,{title:`Recent activity`,children:(0,w.jsx)(r,{size:`xs`,type:`secondary`,children:`Last booking updated 12 minutes ago.`})})]})})}var k=`import { Bell, Plus, Shield, User } from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import {
+	ResourceActionBar,
+	ResourceActivityCard,
+	ResourceDetailsCard,
+	ResourceDetailsSection,
+	ResourceHeader,
+	ResourceIndexShell,
+	ResourceRelatedCard,
+	ResourceShowShell,
+	TabbedResourceShell,
+} from '@/components/features/resource';
+import { Text } from '@/components/typography';
+
+const queue = [
+	{ label: 'Open invoices', value: '24', detail: '8 need manual review' },
+	{ label: 'Active customers', value: '1,284', detail: '+4.8% this month' },
+	{ label: 'Draft contracts', value: '16', detail: '3 waiting on finance' },
+];
+
+export function ResourceIndexShellExample() {
+	return (
+		<ResourceIndexShell
+			title="Bookings"
+			description="Index shells keep header, toolbar, list content, and empty-state rhythm consistent."
+			actions={<Button variant="primary" icon={Plus}>New booking</Button>}
+			toolbar={
+				<ResourceActionBar
+					leading={
+						<>
+							<Badge variant="info">24 active</Badge>
+							<Badge variant="warning">8 review</Badge>
+						</>
+					}
+					trailing={<Button variant="secondary">Export</Button>}
+				/>
+			}
+		>
+			<div className="grid gap-2">
+				{queue.map((item) => (
+					<SmartCard key={item.label} padding="default" className="shadow-sm">
+						<div className="flex items-center justify-between gap-3">
+							<div>
+								<Text weight="medium">{item.label}</Text>
+								<Text size="xs" type="secondary">{item.detail}</Text>
+							</div>
+							<Text weight="semibold">{item.value}</Text>
+						</div>
+					</SmartCard>
+				))}
+			</div>
+		</ResourceIndexShell>
+	);
+}
+
+export function ResourceShowShellExample() {
+	return (
+		<ResourceShowShell
+			slots={{
+				header: (
+					<ResourceHeader
+						title="Sarah Smitha"
+						eyebrow="Customer"
+						description="Gold-tier account with active bookings and billing history."
+						badges={<Badge variant="success">Active</Badge>}
+						actions={<Button variant="secondary">Edit profile</Button>}
+					/>
+				),
+				aside: (
+					<ResourceRelatedCard title="Related records">
+						<div className="grid gap-2">
+							<Text size="xs" type="secondary">4 bookings</Text>
+							<Text size="xs" type="secondary">2 invoices</Text>
+						</div>
+					</ResourceRelatedCard>
+				),
+			}}
+		>
+			<div className="grid gap-3 md:grid-cols-2">
+				<ResourceDetailsCard title="Account details">
+					<Text size="xs" type="secondary">Primary email, billing status, and customer metadata.</Text>
+				</ResourceDetailsCard>
+				<ResourceActivityCard title="Recent activity">
+					<Text size="xs" type="secondary">Last booking updated 12 minutes ago.</Text>
+				</ResourceActivityCard>
+			</div>
+		</ResourceShowShell>
+	);
+}
+
+export function TabbedResourceDetails() {
+	return (
+		<TabbedResourceShell
+			title="Sarah Smitha"
+			description="Gold-tier account with active bookings and billing history."
+			activeTab="profile"
+			tabs={[
+				{ id: 'profile', label: 'Profile', icon: User },
+				{ id: 'security', label: 'Security', icon: Shield },
+				{ id: 'notifications', label: 'Notifications', icon: Bell, badge: '3' },
+			]}
+			actions={<Button variant="secondary">Edit profile</Button>}
+			slots={{
+				aside: (
+					<ResourceRelatedCard title="Related records">
+						<div className="grid gap-2">
+							<Text size="xs" type="secondary">4 bookings</Text>
+							<Text size="xs" type="secondary">2 invoices</Text>
+						</div>
+					</ResourceRelatedCard>
+				),
+			}}
+		>
+			<div className="grid gap-3 md:grid-cols-2">
+				<ResourceDetailsSection
+					title="Account details"
+					metadata={[
+						{ label: 'Email', value: 'sarah@example.com' },
+						{ label: 'Segment', value: 'Gold' },
+						{ label: 'Created', value: 'May 14, 2026' },
+						{ label: 'Owner', value: 'Emma Garcia' },
+					]}
+					help="Consumers own field visibility, permissions, and edit workflows."
+				/>
+				<ResourceActivityCard title="Recent activity">
+					<Text size="xs" type="secondary">Last booking updated 12 minutes ago.</Text>
+				</ResourceActivityCard>
+			</div>
+		</TabbedResourceShell>
+	);
+}
+`;function A(e){let n={p:`p`,...e.components};return C||M(`Examples`,!1),E||M(`Examples.ResourceIndexShellExample`,!0),D||M(`Examples.ResourceShowShellExample`,!0),O||M(`Examples.TabbedResourceDetails`,!0),(0,w.jsxs)(t,{title:`Features · Resource shells`,description:`Resource index and show shells for app-owned data, actions, tabs, loading, empty, and related-record regions.`,layer:`features`,status:`ready`,sourcePath:`src/components/features/resource`,children:[(0,w.jsx)(i,{title:`Overview`,id:`overview`,children:(0,w.jsx)(n.p,{children:`Resource shells provide the reusable page workflow around an app-owned
+resource. The consuming app still owns routing, data fetching, permissions,
+forms, and mutations; the package owns the header, toolbar, empty/loading
+regions, tab strip, details cards, and metadata rhythm.`})}),(0,w.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,w.jsx)(s,{name:`ResourceIndexShellExample`,source:k,children:(0,w.jsx)(E,{})}),(0,w.jsx)(s,{name:`ResourceShowShellExample`,source:k,children:(0,w.jsx)(D,{})}),(0,w.jsx)(s,{name:`TabbedResourceDetails`,source:k,children:(0,w.jsx)(O,{})})]}),(0,w.jsxs)(i,{title:`API`,id:`api`,children:[(0,w.jsx)(f,{component:`ResourceIndexShell`}),(0,w.jsx)(f,{component:`ResourceShowShell`}),(0,w.jsx)(f,{component:`ResourceHeader`}),(0,w.jsx)(f,{component:`ResourceActionBar`}),(0,w.jsx)(f,{component:`ResourceEmptyState`}),(0,w.jsx)(f,{component:`ResourceDetailsCard`}),(0,w.jsx)(f,{component:`ResourceDetailsSection`}),(0,w.jsx)(f,{component:`TabbedResourceShell`})]})]})}function j(e={}){let{wrapper:t}=e.components||{};return t?(0,w.jsx)(t,{...e,children:(0,w.jsx)(A,{...e})}):A(e)}function M(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{j as default};

package/dist/showcase/assets/resource-DytT_quB.js

@@ -0,0 +1 @@
+import{f as e,p as t}from"./section-DYfGx1Q5.js";import{d as n,n as r}from"./index-DN09-Vts.js";import{t as i}from"./icon-badge-G9Fp891n.js";import{t as a}from"./smart-card-CVwEPwfI.js";import{o,r as s,t as c}from"./avatar-DsnH-Xmz.js";import{t as l}from"./skeleton-CY8ieqD-.js";import{t as u}from"./metadata-list-Drvz5mwy.js";import{t as d}from"./overflow-tab-bar-Dq-I4MUu.js";var f=n();function p(e){return e.split(/\s+/).filter(Boolean).slice(0,2).map(e=>e[0]?.toUpperCase()).join(``)}function m({title:n,description:a,eyebrow:l,media:u,avatarUrl:d,avatarAlt:m,avatarFallback:h,icon:g,iconTone:_=`muted`,badges:v,metadata:y,actions:b,className:x,contentClassName:S,mediaClassName:C}){let w=g,T=typeof n==`string`?n:``,E=u??(d||h?(0,f.jsxs)(c,{className:r(`resource-header--avatar size-avatar-lg`,C),children:[!!d&&(0,f.jsx)(o,{src:d,alt:m??T}),(0,f.jsx)(s,{children:h??p(T)})]}):w?(0,f.jsx)(i,{icon:w,shape:`square`,tone:_,className:r(`resource-header--icon size-avatar-lg [&>svg]:size-icon-lg`,C)}):null);return(0,f.jsxs)(`header`,{"data-component":`resource-header`,"data-slot":`resource-header`,className:r(`resource-header--component flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`,x),children:[(0,f.jsxs)(`div`,{"data-slot":`resource-header-main`,className:`resource-header--main flex min-w-0 flex-1 items-start gap-3`,children:[E,(0,f.jsxs)(`div`,{"data-slot":`resource-header-content`,className:r(`resource-header--content min-w-0 flex-1`,S),children:[!!l&&(0,f.jsx)(t,{size:`xs`,type:`secondary`,weight:`medium`,className:`resource-header--eyebrow mb-1 uppercase tracking-normal`,children:l}),(0,f.jsxs)(`div`,{"data-slot":`resource-header-title-row`,className:`resource-header--title-row flex min-w-0 flex-wrap items-center gap-2`,children:[(0,f.jsx)(e,{tag:`h2`,className:`resource-header--title truncate border-0 pb-0`,children:n}),!!v&&(0,f.jsx)(`div`,{"data-slot":`resource-header-badges`,className:`resource-header--badges flex shrink-0 flex-wrap items-center gap-1.5`,children:v})]}),!!a&&(0,f.jsx)(t,{type:`secondary`,className:`resource-header--description mt-1 max-w-3xl`,children:a}),!!y&&(0,f.jsx)(`div`,{"data-slot":`resource-header-metadata`,className:`resource-header--metadata mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground`,children:y})]})]}),!!b&&(0,f.jsx)(`div`,{"data-slot":`resource-header-actions`,className:`resource-header--actions flex shrink-0 flex-wrap items-center gap-2`,children:b})]})}function h({children:e,leading:t,trailing:n,sticky:i=!1,className:a}){return(0,f.jsxs)(`div`,{"data-component":`resource-action-bar`,"data-slot":`resource-action-bar`,className:r(`resource-action-bar--component flex min-w-0 flex-col gap-3 rounded-lg border border-border/70 bg-card px-3 py-2.5 shadow-sm sm:flex-row sm:items-center sm:justify-between`,i&&`sticky top-[calc(var(--topbar-height)_+_0.5rem)] z-30`,a),children:[(0,f.jsx)(`div`,{"data-slot":`resource-action-leading`,className:`resource-action-bar--leading flex min-w-0 flex-1 flex-wrap items-center gap-2`,children:t??e}),!!n&&(0,f.jsx)(`div`,{"data-slot":`resource-action-trailing`,className:`resource-action-bar--trailing flex shrink-0 flex-wrap items-center gap-2`,children:n})]})}function g({children:e,title:t,description:n,actions:i,toolbar:a,empty:o,isEmpty:s=!1,isLoading:c=!1,error:u,slots:d,className:p,headerClassName:h,contentClassName:g,asideClassName:_,variant:v}){let y=d?.header??(t?(0,f.jsx)(m,{title:t,description:n,actions:i,className:h}):null),b=d?.toolbar??a,x=c?d?.loading??(0,f.jsxs)(`div`,{className:`resource-shell--loading grid gap-3`,children:[(0,f.jsx)(l,{className:`h-10 w-full`}),(0,f.jsx)(l,{className:`h-28 w-full`})]}):u?d?.error??u:s?o:e;return(0,f.jsxs)(`section`,{"data-component":`resource-${v}-shell`,"data-slot":`resource-${v}-shell`,className:r(`resource-${v}-shell--component grid min-w-0 gap-4`,d?.aside&&`lg:grid-cols-[minmax(0,1fr)_var(--resource-aside-width,20rem)]`,p),children:[(0,f.jsxs)(`div`,{className:`min-w-0 space-y-4`,children:[!!y&&(0,f.jsx)(`div`,{"data-slot":`resource-${v}-header`,className:`resource-${v}-shell--header`,children:y}),!!b&&(0,f.jsx)(`div`,{"data-slot":`resource-${v}-toolbar`,className:`resource-${v}-shell--toolbar`,children:b}),(0,f.jsx)(`div`,{"data-slot":`resource-${v}-content`,className:r(`resource-${v}-shell--content min-w-0`,g),children:x}),!!d?.footer&&(0,f.jsx)(`div`,{"data-slot":`resource-${v}-footer`,className:`resource-${v}-shell--footer`,children:d.footer})]}),!!d?.aside&&(0,f.jsx)(`aside`,{"data-slot":`resource-${v}-aside`,className:r(`resource-${v}-shell--aside min-w-0`,_),children:d.aside})]})}function _(e){return(0,f.jsx)(g,{...e,variant:`index`})}function v(e){return(0,f.jsx)(g,{...e,variant:`show`})}function y({tabs:e,activeTab:t,onTabChange:n,tabsClassName:r,moreLabel:i,tabsAriaLabel:a,toolbar:o,slots:s,...c}){let l=(0,f.jsxs)(`div`,{"data-slot":`tabbed-resource-toolbar`,className:`tabbed-resource-shell--toolbar grid gap-3`,children:[(0,f.jsx)(d,{items:e,value:t,onChange:n,className:r,moreLabel:i,ariaLabel:a}),o]});return(0,f.jsx)(v,{...c,toolbar:l,slots:{...s,toolbar:s?.toolbar??l}})}function b({title:e,description:t,actions:n,headerAction:i,children:o,footer:s,padding:c=`default`,surface:l=`card`,className:u,contentClassName:d,name:p}){return(0,f.jsx)(a,{"data-component":p,"data-slot":p,title:e,description:t,actions:n,headerAction:i,footerSlot:s,padding:c,surface:l,className:r(`${p}--component`,u),contentClassName:d,children:o})}function x(e){return(0,f.jsx)(b,{...e,name:`resource-details-card`})}function S({metadata:e,metadataColumns:n=2,metadataDense:i=!1,body:a,help:o,children:s,contentClassName:c,...l}){return(0,f.jsxs)(b,{...l,name:`resource-details-section`,contentClassName:r(`resource-details-section--content grid gap-4`,c),children:[!!e?.length&&(0,f.jsx)(u,{items:e,columns:n,dense:i}),a,s,!!o&&(0,f.jsx)(t,{size:`xs`,type:`secondary`,className:`resource-details-section--help`,children:o})]})}function C(e){return(0,f.jsx)(b,{...e,name:`resource-related-card`})}function w(e){return(0,f.jsx)(b,{...e,name:`resource-activity-card`})}export{m as a,v as c,S as i,y as l,w as n,_ as o,x as r,C as s,h as t};

package/dist/showcase/assets/resource-selector-card-wNuW382N.js

@@ -0,0 +1,43 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,p as i,t as a}from"./section-DYfGx1Q5.js";import{r as o,t as s}from"./example-CzbL5xoH.js";import{t as c}from"./plus-CKBaO4jG.js";import{t as l}from"./x-iCqjAC2D.js";import{N as u,d,n as f}from"./index-DN09-Vts.js";import{t as p}from"./props-table-izArO1Pv.js";import{t as m}from"./smart-card-CVwEPwfI.js";import{a as h}from"./cell-renderers-qfJ-7alN.js";var g=d(),_={select:`Select resource`,remove:`Remove resource`,emptyTitle:`No resource selected`,emptyDescription:`Choose a resource to continue.`};function v({resource:e,getKey:t,getTitle:n,getSubtitle:r,getMetadata:a,getBadges:s,getImageUrl:d,getIcon:p,renderResource:v,onSelect:y,onRemove:b,title:x,description:S,emptyTitle:C,emptyDescription:w,selectLabel:T,removeLabel:E,actions:D,padding:O=`default`,surface:k=`card`,className:A,contentClassName:j,strings:M}){let N=u(_,M),P=T??N.select,F=E??N.remove;return(0,g.jsx)(m,{"data-component":`resource-selector-card`,"data-slot":`resource-selector-card`,title:x,description:S,headerAction:D??(0,g.jsxs)(`div`,{className:`flex flex-wrap items-center gap-space-md`,children:[!!e&&!!b&&(0,g.jsxs)(o,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:()=>b(e),children:[(0,g.jsx)(l,{className:`size-icon`}),F]}),!!y&&(0,g.jsxs)(o,{type:`button`,variant:`secondary`,size:`small`,onClick:y,children:[(0,g.jsx)(c,{className:`size-icon`}),P]})]}),padding:O,surface:k,className:f(`resource-selector-card--component`,A),contentClassName:f(`resource-selector-card--content`,j),children:e?(0,g.jsx)(`div`,{"data-resource-key":t(e),className:`resource-selector-card--selected min-w-0 rounded-md border border-border/60 bg-muted/20 px-row-x py-row-y`,children:v?v(e):(0,g.jsx)(h,{title:n(e),subtitle:r?.(e),metadata:a?.(e),badges:s?.(e),imageUrl:d?.(e),icon:p?.(e),mediaClassName:`size-avatar-sm`,contentClassName:`gap-space-2xs`,subtitleClassName:`text-xs`})}):(0,g.jsx)(`div`,{className:`resource-selector-card--empty min-w-0 rounded-md border border-dashed border-border/80 bg-muted/20 px-row-x py-row-y`,children:(0,g.jsxs)(`div`,{className:`min-w-0`,children:[(0,g.jsx)(i,{weight:`semibold`,children:C??N.emptyTitle}),(0,g.jsx)(i,{size:`inherit`,type:`secondary`,className:`mt-space-2xs text-xs`,children:w??N.emptyDescription})]})})})}v.displayName=`ResourceSelectorCard`;var y=e({EmptyResource:()=>C,SelectedResource:()=>S}),b=t(n(),1),x=[{id:`usr-1`,name:`Sarah Smith`,email:`sarah@example.com`,role:`Owner`},{id:`usr-2`,name:`Marcus Lee`,email:`marcus@example.com`,role:`Admin`}];function S(){let[e,t]=(0,b.useState)(x[0]);return(0,g.jsx)(`div`,{className:`w-full max-w-xl`,children:(0,g.jsx)(v,{title:`Account owner`,description:`Selected resources render through accessor props.`,resource:e,getKey:e=>e.id,getTitle:e=>e.name,getSubtitle:e=>e.email,getMetadata:e=>[{label:`Role`,value:e.role}],onSelect:()=>t(x[1]),onRemove:()=>t(null)})})}function C(){return(0,g.jsx)(`div`,{className:`w-full max-w-xl`,children:(0,g.jsx)(v,{title:`Approver`,description:`The consumer owns the picker dialog and passes callbacks.`,getKey:e=>e.id,getTitle:e=>e.name,getSubtitle:e=>e.email,onSelect:()=>{}})})}var w=`import { useState } from 'react';
+import { ResourceSelectorCard } from '@/components/composed/data-display';
+
+const resources = [
+	{ id: 'usr-1', name: 'Sarah Smith', email: 'sarah@example.com', role: 'Owner' },
+	{ id: 'usr-2', name: 'Marcus Lee', email: 'marcus@example.com', role: 'Admin' },
+];
+
+export function SelectedResource() {
+	const [resource, setResource] = useState<(typeof resources)[number] | null>(resources[0]);
+
+	return (
+		<div className="w-full max-w-xl">
+			<ResourceSelectorCard
+				title="Account owner"
+				description="Selected resources render through accessor props."
+				resource={resource}
+				getKey={(item) => item.id}
+				getTitle={(item) => item.name}
+				getSubtitle={(item) => item.email}
+				getMetadata={(item) => [{ label: 'Role', value: item.role }]}
+				onSelect={() => setResource(resources[1])}
+				onRemove={() => setResource(null)}
+			/>
+		</div>
+	);
+}
+
+export function EmptyResource() {
+	return (
+		<div className="w-full max-w-xl">
+			<ResourceSelectorCard<(typeof resources)[number]>
+				title="Approver"
+				description="The consumer owns the picker dialog and passes callbacks."
+				getKey={(item) => item.id}
+				getTitle={(item) => item.name}
+				getSubtitle={(item) => item.email}
+				onSelect={() => {}}
+			/>
+		</div>
+	);
+}
+`;function T(e){return y||D(`Examples`,!1),C||D(`Examples.EmptyResource`,!0),S||D(`Examples.SelectedResource`,!0),(0,g.jsxs)(r,{title:`Composed · Resource selector card`,description:`Selected-resource card for dialogs, forms, and show pages. The app owns picking, fetching, and routing.`,layer:`composed`,status:`ready`,sourcePath:`src/components/composed/data-display/resource-selector-card.tsx`,children:[(0,g.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,g.jsx)(s,{name:`SelectedResource`,source:w,children:(0,g.jsx)(S,{})}),(0,g.jsx)(s,{name:`EmptyResource`,source:w,children:(0,g.jsx)(C,{})})]}),(0,g.jsx)(a,{title:`API`,id:`api`,children:(0,g.jsx)(p,{component:`ResourceSelectorCard`})})]})}function E(e={}){let{wrapper:t}=e.components||{};return t?(0,g.jsx)(t,{...e,children:(0,g.jsx)(T,{...e})}):T(e)}function D(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{E as default};