admin-ui-starter-kit 0.5.0 → 0.6.1

package/dist/showcase/assets/quote-Bc9eHVKi.js

@@ -0,0 +1 @@
+import{l as e}from"./index-QESvAJrb.js";var t=e(`quote`,[[`path`,{d:`M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z`,key:`rib7q0`}],[`path`,{d:`M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z`,key:`1ymkrd`}]]);export{t};

package/dist/showcase/assets/react-sKtkuLrH.js

@@ -0,0 +1 @@
+import{t as e}from"./chunk-QTnfLwEv.js";var t=e((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.portal`),r=Symbol.for(`react.fragment`),i=Symbol.for(`react.strict_mode`),a=Symbol.for(`react.profiler`),o=Symbol.for(`react.consumer`),s=Symbol.for(`react.context`),c=Symbol.for(`react.forward_ref`),l=Symbol.for(`react.suspense`),u=Symbol.for(`react.memo`),d=Symbol.for(`react.lazy`),f=Symbol.for(`react.activity`),p=Symbol.iterator;function m(e){return typeof e!=`object`||!e?null:(e=p&&e[p]||e[`@@iterator`],typeof e==`function`?e:null)}var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},g=Object.assign,_={};function v(e,t,n){this.props=e,this.context=t,this.refs=_,this.updater=n||h}v.prototype.isReactComponent={},v.prototype.setState=function(e,t){if(typeof e!=`object`&&typeof e!=`function`&&e!=null)throw Error(`takes an object of state variables to update or a function which returns an object of state variables.`);this.updater.enqueueSetState(this,e,t,`setState`)},v.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,`forceUpdate`)};function y(){}y.prototype=v.prototype;function b(e,t,n){this.props=e,this.context=t,this.refs=_,this.updater=n||h}var x=b.prototype=new y;x.constructor=b,g(x,v.prototype),x.isPureReactComponent=!0;var S=Array.isArray;function C(){}var w={H:null,A:null,T:null,S:null},T=Object.prototype.hasOwnProperty;function E(e,n,r){var i=r.ref;return{$$typeof:t,type:e,key:n,ref:i===void 0?null:i,props:r}}function D(e,t){return E(e.type,t,e.props)}function O(e){return typeof e==`object`&&!!e&&e.$$typeof===t}function k(e){var t={"=":`=0`,":":`=2`};return`$`+e.replace(/[=:]/g,function(e){return t[e]})}var A=/\/+/g;function j(e,t){return typeof e==`object`&&e&&e.key!=null?k(``+e.key):t.toString(36)}function M(e){switch(e.status){case`fulfilled`:return e.value;case`rejected`:throw e.reason;default:switch(typeof e.status==`string`?e.then(C,C):(e.status=`pending`,e.then(function(t){e.status===`pending`&&(e.status=`fulfilled`,e.value=t)},function(t){e.status===`pending`&&(e.status=`rejected`,e.reason=t)})),e.status){case`fulfilled`:return e.value;case`rejected`:throw e.reason}}throw e}function N(e,r,i,a,o){var s=typeof e;(s===`undefined`||s===`boolean`)&&(e=null);var c=!1;if(e===null)c=!0;else switch(s){case`bigint`:case`string`:case`number`:c=!0;break;case`object`:switch(e.$$typeof){case t:case n:c=!0;break;case d:return c=e._init,N(c(e._payload),r,i,a,o)}}if(c)return o=o(e),c=a===``?`.`+j(e,0):a,S(o)?(i=``,c!=null&&(i=c.replace(A,`$&/`)+`/`),N(o,r,i,``,function(e){return e})):o!=null&&(O(o)&&(o=D(o,i+(o.key==null||e&&e.key===o.key?``:(``+o.key).replace(A,`$&/`)+`/`)+c)),r.push(o)),1;c=0;var l=a===``?`.`:a+`:`;if(S(e))for(var u=0;u<e.length;u++)a=e[u],s=l+j(a,u),c+=N(a,r,i,s,o);else if(u=m(e),typeof u==`function`)for(e=u.call(e),u=0;!(a=e.next()).done;)a=a.value,s=l+j(a,u++),c+=N(a,r,i,s,o);else if(s===`object`){if(typeof e.then==`function`)return N(M(e),r,i,a,o);throw r=String(e),Error(`Objects are not valid as a React child (found: `+(r===`[object Object]`?`object with keys {`+Object.keys(e).join(`, `)+`}`:r)+`). If you meant to render a collection of children, use an array instead.`)}return c}function P(e,t,n){if(e==null)return e;var r=[],i=0;return N(e,r,``,``,function(e){return t.call(n,e,i++)}),r}function F(e){if(e._status===-1){var t=e._result;t=t(),t.then(function(t){(e._status===0||e._status===-1)&&(e._status=1,e._result=t)},function(t){(e._status===0||e._status===-1)&&(e._status=2,e._result=t)}),e._status===-1&&(e._status=0,e._result=t)}if(e._status===1)return e._result.default;throw e._result}var I=typeof reportError==`function`?reportError:function(e){if(typeof window==`object`&&typeof window.ErrorEvent==`function`){var t=new window.ErrorEvent(`error`,{bubbles:!0,cancelable:!0,message:typeof e==`object`&&e&&typeof e.message==`string`?String(e.message):String(e),error:e});if(!window.dispatchEvent(t))return}else if(typeof process==`object`&&typeof process.emit==`function`){process.emit(`uncaughtException`,e);return}console.error(e)},L={map:P,forEach:function(e,t,n){P(e,function(){t.apply(this,arguments)},n)},count:function(e){var t=0;return P(e,function(){t++}),t},toArray:function(e){return P(e,function(e){return e})||[]},only:function(e){if(!O(e))throw Error(`React.Children.only expected to receive a single React element child.`);return e}};e.Activity=f,e.Children=L,e.Component=v,e.Fragment=r,e.Profiler=a,e.PureComponent=b,e.StrictMode=i,e.Suspense=l,e.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=w,e.__COMPILER_RUNTIME={__proto__:null,c:function(e){return w.H.useMemoCache(e)}},e.cache=function(e){return function(){return e.apply(null,arguments)}},e.cacheSignal=function(){return null},e.cloneElement=function(e,t,n){if(e==null)throw Error(`The argument must be a React element, but you passed `+e+`.`);var r=g({},e.props),i=e.key;if(t!=null)for(a in t.key!==void 0&&(i=``+t.key),t)!T.call(t,a)||a===`key`||a===`__self`||a===`__source`||a===`ref`&&t.ref===void 0||(r[a]=t[a]);var a=arguments.length-2;if(a===1)r.children=n;else if(1<a){for(var o=Array(a),s=0;s<a;s++)o[s]=arguments[s+2];r.children=o}return E(e.type,i,r)},e.createContext=function(e){return e={$$typeof:s,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null},e.Provider=e,e.Consumer={$$typeof:o,_context:e},e},e.createElement=function(e,t,n){var r,i={},a=null;if(t!=null)for(r in t.key!==void 0&&(a=``+t.key),t)T.call(t,r)&&r!==`key`&&r!==`__self`&&r!==`__source`&&(i[r]=t[r]);var o=arguments.length-2;if(o===1)i.children=n;else if(1<o){for(var s=Array(o),c=0;c<o;c++)s[c]=arguments[c+2];i.children=s}if(e&&e.defaultProps)for(r in o=e.defaultProps,o)i[r]===void 0&&(i[r]=o[r]);return E(e,a,i)},e.createRef=function(){return{current:null}},e.forwardRef=function(e){return{$$typeof:c,render:e}},e.isValidElement=O,e.lazy=function(e){return{$$typeof:d,_payload:{_status:-1,_result:e},_init:F}},e.memo=function(e,t){return{$$typeof:u,type:e,compare:t===void 0?null:t}},e.startTransition=function(e){var t=w.T,n={};w.T=n;try{var r=e(),i=w.S;i!==null&&i(n,r),typeof r==`object`&&r&&typeof r.then==`function`&&r.then(C,I)}catch(e){I(e)}finally{t!==null&&n.types!==null&&(t.types=n.types),w.T=t}},e.unstable_useCacheRefresh=function(){return w.H.useCacheRefresh()},e.use=function(e){return w.H.use(e)},e.useActionState=function(e,t,n){return w.H.useActionState(e,t,n)},e.useCallback=function(e,t){return w.H.useCallback(e,t)},e.useContext=function(e){return w.H.useContext(e)},e.useDebugValue=function(){},e.useDeferredValue=function(e,t){return w.H.useDeferredValue(e,t)},e.useEffect=function(e,t){return w.H.useEffect(e,t)},e.useEffectEvent=function(e){return w.H.useEffectEvent(e)},e.useId=function(){return w.H.useId()},e.useImperativeHandle=function(e,t,n){return w.H.useImperativeHandle(e,t,n)},e.useInsertionEffect=function(e,t){return w.H.useInsertionEffect(e,t)},e.useLayoutEffect=function(e,t){return w.H.useLayoutEffect(e,t)},e.useMemo=function(e,t){return w.H.useMemo(e,t)},e.useOptimistic=function(e,t){return w.H.useOptimistic(e,t)},e.useReducer=function(e,t,n){return w.H.useReducer(e,t,n)},e.useRef=function(e){return w.H.useRef(e)},e.useState=function(e){return w.H.useState(e)},e.useSyncExternalStore=function(e,t,n){return w.H.useSyncExternalStore(e,t,n)},e.useTransition=function(){return w.H.useTransition()},e.version=`19.2.7`})),n=e(((e,n)=>{n.exports=t()}));export{n as t};

package/dist/showcase/assets/receipt-B77_VWtt.js

@@ -0,0 +1 @@
+import{l as e}from"./index-QESvAJrb.js";var t=e(`receipt`,[[`path`,{d:`M12 17V7`,key:`pyj7ub`}],[`path`,{d:`M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8`,key:`1elt7d`}],[`path`,{d:`M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z`,key:`ycz6yz`}]]);export{t};

package/dist/showcase/assets/receipt-text-BlL_TJsS.js

@@ -0,0 +1 @@
+import{l as e}from"./index-QESvAJrb.js";var t=e(`receipt-text`,[[`path`,{d:`M13 16H8`,key:`wsln4y`}],[`path`,{d:`M14 8H8`,key:`1l3xfs`}],[`path`,{d:`M16 12H8`,key:`1fr5h0`}],[`path`,{d:`M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z`,key:`ycz6yz`}]]);export{t};

package/dist/showcase/assets/refinement-guide-BpzOvT_R.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-D-N8Ze16.js";import{r as a,t as o}from"./example-PsbgbESI.js";import{t as s}from"./circle-check-BkFKejsY.js";import{t as c}from"./eye-YnIHbdKe.js";import{t as l}from"./file-text-BQeGXxPG.js";import{t as u}from"./list-checks-CXt8visd.js";import{d,i as f,l as p,s as m}from"./index-QESvAJrb.js";import{t as h}from"./icon-badge-ognVhKWR.js";import{t as g}from"./smart-card-C6-idFYI.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-CELG4taF.js

@@ -0,0 +1 @@
+import{l as e}from"./index-QESvAJrb.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-LRTUaJTb.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{d as n}from"./index-QESvAJrb.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-BT8_ck3n.js

@@ -0,0 +1 @@
+import{f as e,p as t}from"./section-D-N8Ze16.js";import{d as n,n as r}from"./index-QESvAJrb.js";import{t as i}from"./icon-badge-ognVhKWR.js";import{t as a}from"./smart-card-C6-idFYI.js";import{o,r as s,t as c}from"./avatar-D3kvVy00.js";import{t as l}from"./skeleton-DoWW5XZD.js";import{t as u}from"./metadata-list-BhlsEWYT.js";import{t as d}from"./overflow-tab-bar-B2Htn-Ft.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:`xxs`,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-C7J3yZp6.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-D-N8Ze16.js";import{t as a}from"./bell-CwRy7zpP.js";import{r as o,t as s}from"./example-PsbgbESI.js";import{t as c}from"./plus-BkhJjfUv.js";import{t as l}from"./shield-Cme7_JJR.js";import{t as u}from"./user-DLuRcjl0.js";import{d}from"./index-QESvAJrb.js";import{t as f}from"./props-table-CCcohuyT.js";import{t as p}from"./smart-card-C6-idFYI.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-BT8_ck3n.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-selector-card-Ay8ImvKg.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-D-N8Ze16.js";import{r as o,t as s}from"./example-PsbgbESI.js";import{t as c}from"./plus-BkhJjfUv.js";import{t as l}from"./x-idpnOHil.js";import{N as u,d,n as f}from"./index-QESvAJrb.js";import{t as p}from"./props-table-CCcohuyT.js";import{t as m}from"./smart-card-C6-idFYI.js";import{a as h}from"./cell-renderers-Cx8rAZln.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-xxs`})}):(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-xxs`,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};