@object-ui/layout 2.0.0 → 3.0.0

package/dist/index.umd.cjs

@@ -1,6 +1,6 @@
-(function(d,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("@object-ui/core"),require("react"),require("@object-ui/components"),require("@object-ui/react"),require("react-router-dom")):typeof define=="function"&&define.amd?define(["exports","@object-ui/core","react","@object-ui/components","@object-ui/react","react-router-dom"],y):(d=typeof globalThis<"u"?globalThis:d||self,y(d.ObjectUILayout={},d.core,d.require$$0,d.components,d.react,d.reactRouterDom))})(this,(function(d,y,w,m,Q,I){"use strict";var _={exports:{}},x={};var L;function K(){if(L)return x;L=1;var r=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function a(s,l,n){var p=null;if(n!==void 0&&(p=""+n),l.key!==void 0&&(p=""+l.key),"key"in l){n={};for(var b in l)b!=="key"&&(n[b]=l[b])}else n=l;return l=n.ref,{$$typeof:r,type:s,key:p,ref:l!==void 0?l:null,props:n}}return x.Fragment=c,x.jsx=a,x.jsxs=a,x}var E={};var M;function ee(){return M||(M=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===be?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case le:return"Profiler";case se:return"StrictMode";case fe:return"Suspense";case de:return"SuspenseList";case pe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case oe:return"Portal";case ie:return e.displayName||"Context";case ce:return(e._context.displayName||"Context")+".Consumer";case ue:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case me:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case k:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function c(e){return""+e}function a(e){try{c(e);var t=!1}catch{t=!0}if(t){t=console;var i=t.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),c(e)}}function s(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function l(){var e=A.A;return e===null?null:e.getOwner()}function n(){return Error("react-stack-top-frame")}function p(e){if(V.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function b(e,t){function i(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function R(){var e=r(this.type);return H[e]||(H[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function g(e,t,i,u,T,O){var f=i.ref;return e={$$typeof:J,type:e,key:t,props:i,_owner:u},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,t,i,u,T,O){var f=t.children;if(f!==void 0)if(u)if(ye(f)){for(u=0;u<f.length;u++)W(f[u]);Object.freeze&&Object.freeze(f)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else W(f);if(V.call(t,"key")){f=r(e);var v=Object.keys(t).filter(function(he){return he!=="key"});u=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",Z[f+u]||(v=0<v.length?"{"+v.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(f,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("@object-ui/core"),require("react"),require("@object-ui/components"),require("@object-ui/react"),require("react-router-dom")):typeof define=="function"&&define.amd?define(["exports","@object-ui/core","react","@object-ui/components","@object-ui/react","react-router-dom"],b):(f=typeof globalThis<"u"?globalThis:f||self,b(f.ObjectUILayout={},f.core,f.require$$0,f.components,f.react,f.reactRouterDom))})(this,(function(f,b,w,m,K,L){"use strict";var j={exports:{}},v={};var M;function ee(){if(M)return v;M=1;var r=Symbol.for("react.transitional.element"),l=Symbol.for("react.fragment");function t(s,n,o){var p=null;if(o!==void 0&&(p=""+o),n.key!==void 0&&(p=""+n.key),"key"in n){o={};for(var g in n)g!=="key"&&(o[g]=n[g])}else o=n;return n=o.ref,{$$typeof:r,type:s,key:p,ref:n!==void 0?n:null,props:o}}return v.Fragment=l,v.jsx=t,v.jsxs=t,v}var E={};var I;function re(){return I||(I=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===he?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case de:return"Profiler";case ue:return"StrictMode";case ge:return"Suspense";case be:return"SuspenseList";case xe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ie:return"Portal";case me:return e.displayName||"Context";case fe:return(e._context.displayName||"Context")+".Consumer";case pe:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ye:return a=e.displayName||null,a!==null?a:r(e.type)||"Memo";case k:a=e._payload,e=e._init;try{return r(e(a))}catch{}}return null}function l(e){return""+e}function t(e){try{l(e);var a=!1}catch{a=!0}if(a){a=console;var i=a.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),l(e)}}function s(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var a=r(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function n(){var e=C.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function p(e){if(z.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function g(e,a){function i(){H||(H=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function x(){var e=r(this.type);return B[e]||(B[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function R(e,a,i,u,T,N){var d=i.ref;return e={$$typeof:V,type:e,key:a,props:i,_owner:u},(d!==void 0?d:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function y(e,a,i,u,T,N){var d=a.children;if(d!==void 0)if(u)if(ve(d)){for(u=0;u<d.length;u++)W(d[u]);Object.freeze&&Object.freeze(d)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else W(d);if(z.call(a,"key")){d=r(e);var h=Object.keys(a).filter(function(Ee){return Ee!=="key"});u=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",Q[d+u]||(h=0<h.length?"{"+h.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,u,f,v,f),Z[f+u]=!0)}if(f=null,i!==void 0&&(a(i),f=""+i),p(t)&&(a(t.key),f=""+t.key),"key"in t){i={};for(var C in t)C!=="key"&&(i[C]=t[C])}else i=t;return f&&b(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),g(e,f,i,l(),T,O)}function W(e){G(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===k&&(e._payload.status==="fulfilled"?G(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function G(e){return typeof e=="object"&&e!==null&&e.$$typeof===J}var S=w,J=Symbol.for("react.transitional.element"),oe=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),se=Symbol.for("react.strict_mode"),le=Symbol.for("react.profiler"),ce=Symbol.for("react.consumer"),ie=Symbol.for("react.context"),ue=Symbol.for("react.forward_ref"),fe=Symbol.for("react.suspense"),de=Symbol.for("react.suspense_list"),me=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),pe=Symbol.for("react.activity"),be=Symbol.for("react.client.reference"),A=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V=Object.prototype.hasOwnProperty,ye=Array.isArray,N=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(e){return e()}};var z,H={},B=S.react_stack_bottom_frame.bind(S,n)(),X=N(s(n)),Z={};E.Fragment=P,E.jsx=function(e,t,i){var u=1e4>A.recentlyCreatedOwnerStacks++;return h(e,t,i,!1,u?Error("react-stack-top-frame"):B,u?N(s(e)):X)},E.jsxs=function(e,t,i){var u=1e4>A.recentlyCreatedOwnerStacks++;return h(e,t,i,!0,u?Error("react-stack-top-frame"):B,u?N(s(e)):X)}})()),E}var Y;function re(){return Y||(Y=1,process.env.NODE_ENV==="production"?_.exports=K():_.exports=ee()),_.exports}var o=re();function j({title:r,description:c,action:a,className:s,children:l,...n}){return o.jsx("div",{className:m.cn("flex flex-col gap-4 pb-4 md:pb-8",s),...n,children:o.jsxs("div",{className:"flex items-center justify-between gap-4",children:[o.jsxs("div",{className:"flex flex-col gap-1",children:[o.jsx("h1",{className:"text-2xl font-bold tracking-tight md:text-3xl",children:r}),c&&o.jsx("p",{className:"text-sm text-muted-foreground",children:c})]}),(a||l)&&o.jsxs("div",{className:"flex items-center gap-2",children:[a,l]})]})})}function $(r){const c=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);if(!c)return null;const a=parseInt(c[1],16)/255,s=parseInt(c[2],16)/255,l=parseInt(c[3],16)/255,n=Math.max(a,s,l),p=Math.min(a,s,l);let b=0,R=0;const g=(n+p)/2;if(n!==p){const h=n-p;switch(R=g>.5?h/(2-n-p):h/(n+p),n){case a:b=((s-l)/h+(s<l?6:0))/6;break;case s:b=((l-a)/h+2)/6;break;case l:b=((a-s)/h+4)/6;break}}return`${Math.round(b*360)} ${Math.round(R*100)}% ${Math.round(g*100)}%`}function q(r,c){w.useEffect(()=>{const a=document.documentElement;if(r?.primaryColor){const s=$(r.primaryColor);s&&(a.style.setProperty("--brand-primary",r.primaryColor),a.style.setProperty("--brand-primary-hsl",s))}else a.style.removeProperty("--brand-primary"),a.style.removeProperty("--brand-primary-hsl");if(r?.accentColor){const s=$(r.accentColor);s&&(a.style.setProperty("--brand-accent",r.accentColor),a.style.setProperty("--brand-accent-hsl",s))}else a.style.removeProperty("--brand-accent"),a.style.removeProperty("--brand-accent-hsl");if(r?.favicon){const s=document.querySelector("#favicon")||document.querySelector('link[rel="icon"]');s&&(s.href=r.favicon)}return c&&(document.title=c),()=>{a.style.removeProperty("--brand-primary"),a.style.removeProperty("--brand-primary-hsl"),a.style.removeProperty("--brand-accent"),a.style.removeProperty("--brand-accent-hsl")}},[r?.primaryColor,r?.accentColor,r?.favicon,c])}function F({sidebar:r,navbar:c,children:a,className:s,defaultOpen:l=!0,branding:n}){return q(n,n?.title),o.jsxs(m.SidebarProvider,{defaultOpen:l,children:[r,o.jsxs(m.SidebarInset,{children:[o.jsxs("header",{className:"flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4",children:[o.jsx(m.SidebarTrigger,{className:"-ml-1"}),o.jsx("div",{className:"w-px h-4 bg-border mx-1 sm:mx-2"}),c]}),o.jsx("main",{className:m.cn("flex-1 overflow-auto p-3 sm:p-4 md:p-6",s),children:a})]})]})}function D({className:r,children:c,...a}){return o.jsx("div",{className:m.cn("rounded-xl border bg-card text-card-foreground shadow",r),...a,children:o.jsx("div",{className:"p-6",children:c})})}const te=r=>r?Array.isArray(r)?r:[r]:[];function ae({schema:r,className:c,style:a,id:s,...l}){const n=te(r.children);return o.jsxs("div",{id:s||r.id,className:m.cn("flex flex-col h-full space-y-4",c),style:a,children:[o.jsx(j,{title:r.title,description:r.description}),o.jsx("div",{className:"flex-1 overflow-auto",children:n.map((p,b)=>o.jsx(Q.SchemaRenderer,{schema:p,...l},p?.id||b))})]})}function ne({items:r,title:c="Application",className:a,collapsible:s="icon"}){const l=I.useLocation();return o.jsx(m.Sidebar,{className:a,collapsible:s,children:o.jsx(m.SidebarContent,{children:o.jsxs(m.SidebarGroup,{children:[o.jsx(m.SidebarGroupLabel,{children:c}),o.jsx(m.SidebarGroupContent,{children:o.jsx(m.SidebarMenu,{children:r.map(n=>o.jsx(m.SidebarMenuItem,{children:o.jsx(m.SidebarMenuButton,{asChild:!0,isActive:l.pathname===n.href,children:o.jsxs(I.NavLink,{to:n.href,children:[n.icon&&o.jsx(n.icon,{}),o.jsx("span",{children:n.title})]})})},n.href))})})]})})})}function U(){y.ComponentRegistry.register("page-header",j,{namespace:"layout",label:"Page Header",category:"Layout",inputs:[{name:"title",type:"string"},{name:"description",type:"string"}]}),y.ComponentRegistry.register("page:header",j,{namespace:"layout"}),y.ComponentRegistry.register("page:card",D,{namespace:"layout",label:"Page Card",category:"Layout",isContainer:!0}),y.ComponentRegistry.register("app-shell",F,{namespace:"layout",label:"App Shell",category:"Layout"})}try{U()}catch{}d.AppShell=F,d.Page=ae,d.PageCard=D,d.PageHeader=j,d.SidebarNav=ne,d.registerLayout=U,d.useAppShellBranding=q,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,u,d,h,d),Q[d+u]=!0)}if(d=null,i!==void 0&&(t(i),d=""+i),p(a)&&(t(a.key),d=""+a.key),"key"in a){i={};for(var O in a)O!=="key"&&(i[O]=a[O])}else i=a;return d&&g(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,d,i,n(),T,N)}function W(e){J(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===k&&(e._payload.status==="fulfilled"?J(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function J(e){return typeof e=="object"&&e!==null&&e.$$typeof===V}var S=w,V=Symbol.for("react.transitional.element"),ie=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),ue=Symbol.for("react.strict_mode"),de=Symbol.for("react.profiler"),fe=Symbol.for("react.consumer"),me=Symbol.for("react.context"),pe=Symbol.for("react.forward_ref"),ge=Symbol.for("react.suspense"),be=Symbol.for("react.suspense_list"),ye=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),xe=Symbol.for("react.activity"),he=Symbol.for("react.client.reference"),C=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,ve=Array.isArray,A=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(e){return e()}};var H,B={},X=S.react_stack_bottom_frame.bind(S,o)(),Z=A(s(o)),Q={};E.Fragment=P,E.jsx=function(e,a,i){var u=1e4>C.recentlyCreatedOwnerStacks++;return y(e,a,i,!1,u?Error("react-stack-top-frame"):X,u?A(s(e)):Z)},E.jsxs=function(e,a,i){var u=1e4>C.recentlyCreatedOwnerStacks++;return y(e,a,i,!0,u?Error("react-stack-top-frame"):X,u?A(s(e)):Z)}})()),E}var Y;function te(){return Y||(Y=1,process.env.NODE_ENV==="production"?j.exports=ee():j.exports=re()),j.exports}var c=te();function _({title:r,description:l,action:t,className:s,children:n,...o}){return c.jsx("div",{className:m.cn("flex flex-col gap-4 pb-4 md:pb-8",s),...o,children:c.jsxs("div",{className:"flex items-center justify-between gap-4",children:[c.jsxs("div",{className:"flex flex-col gap-1",children:[c.jsx("h1",{className:"text-2xl font-bold tracking-tight md:text-3xl",children:r}),l&&c.jsx("p",{className:"text-sm text-muted-foreground",children:l})]}),(t||n)&&c.jsxs("div",{className:"flex items-center gap-2",children:[t,n]})]})})}function $(r){const l=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);if(!l)return null;const t=parseInt(l[1],16)/255,s=parseInt(l[2],16)/255,n=parseInt(l[3],16)/255,o=Math.max(t,s,n),p=Math.min(t,s,n);let g=0,x=0;const R=(o+p)/2;if(o!==p){const y=o-p;switch(x=R>.5?y/(2-o-p):y/(o+p),o){case t:g=((s-n)/y+(s<n?6:0))/6;break;case s:g=((n-t)/y+2)/6;break;case n:g=((t-s)/y+4)/6;break}}return`${Math.round(g*360)} ${Math.round(x*100)}% ${Math.round(R*100)}%`}function q(r,l){w.useEffect(()=>{const t=document.documentElement;if(r?.primaryColor){const s=$(r.primaryColor);s&&(t.style.setProperty("--brand-primary",r.primaryColor),t.style.setProperty("--brand-primary-hsl",s))}else t.style.removeProperty("--brand-primary"),t.style.removeProperty("--brand-primary-hsl");if(r?.accentColor){const s=$(r.accentColor);s&&(t.style.setProperty("--brand-accent",r.accentColor),t.style.setProperty("--brand-accent-hsl",s))}else t.style.removeProperty("--brand-accent"),t.style.removeProperty("--brand-accent-hsl");if(r?.favicon){const s=document.querySelector("#favicon")||document.querySelector('link[rel="icon"]');s&&(s.href=r.favicon)}return l&&(document.title=l),()=>{t.style.removeProperty("--brand-primary"),t.style.removeProperty("--brand-primary-hsl"),t.style.removeProperty("--brand-accent"),t.style.removeProperty("--brand-accent-hsl")}},[r?.primaryColor,r?.accentColor,r?.favicon,l])}function F({sidebar:r,navbar:l,children:t,className:s,defaultOpen:n=!0,branding:o}){return q(o,o?.title),c.jsxs(m.SidebarProvider,{defaultOpen:n,children:[r,c.jsxs(m.SidebarInset,{children:[c.jsxs("header",{className:"flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4",children:[c.jsx(m.SidebarTrigger,{className:"-ml-1"}),c.jsx("div",{className:"w-px h-4 bg-border mx-1 sm:mx-2"}),l]}),c.jsx("main",{className:m.cn("flex-1 overflow-auto p-3 sm:p-4 md:p-6",s),children:t})]})]})}function D({className:r,children:l,...t}){return c.jsx("div",{className:m.cn("rounded-xl border bg-card text-card-foreground shadow",r),...t,children:c.jsx("div",{className:"p-6",children:l})})}const ae={xs:{1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",6:"grid-cols-6",12:"grid-cols-12"},sm:{1:"sm:grid-cols-1",2:"sm:grid-cols-2",3:"sm:grid-cols-3",4:"sm:grid-cols-4",6:"sm:grid-cols-6",12:"sm:grid-cols-12"},md:{1:"md:grid-cols-1",2:"md:grid-cols-2",3:"md:grid-cols-3",4:"md:grid-cols-4",6:"md:grid-cols-6",12:"md:grid-cols-12"},lg:{1:"lg:grid-cols-1",2:"lg:grid-cols-2",3:"lg:grid-cols-3",4:"lg:grid-cols-4",6:"lg:grid-cols-6",12:"lg:grid-cols-12"},xl:{1:"xl:grid-cols-1",2:"xl:grid-cols-2",3:"xl:grid-cols-3",4:"xl:grid-cols-4",6:"xl:grid-cols-6",12:"xl:grid-cols-12"},"2xl":{1:"2xl:grid-cols-1",2:"2xl:grid-cols-2",3:"2xl:grid-cols-3",4:"2xl:grid-cols-4",6:"2xl:grid-cols-6",12:"2xl:grid-cols-12"}};function se(r){if(!r)return"grid-cols-1";const l=[];for(const[t,s]of Object.entries(r)){const n=ae[t];if(n&&s){const p=Object.keys(n).map(Number).reduce((g,x)=>Math.abs(x-s)<Math.abs(g-s)?x:g);l.push(n[p])}}return l.join(" ")||"grid-cols-1"}const oe={0:"gap-0",1:"gap-1",2:"gap-2",3:"gap-3",4:"gap-4",5:"gap-5",6:"gap-6",8:"gap-8"},G=({columns:r,gap:l=4,className:t,children:s})=>{const n=se(r),o=typeof l=="number"?oe[l]||`gap-${l}`:"";return c.jsx("div",{className:m.cn("grid",n,o,t),children:s})},ne=r=>r?Array.isArray(r)?r:[r]:[];function le({schema:r,className:l,style:t,id:s,...n}){const o=ne(r.children);return c.jsxs("div",{id:s||r.id,className:m.cn("flex flex-col h-full space-y-4",l),style:t,children:[c.jsx(_,{title:r.title,description:r.description}),c.jsx("div",{className:"flex-1 overflow-auto",children:o.map((p,g)=>c.jsx(K.SchemaRenderer,{schema:p,...n},p?.id||g))})]})}function ce({items:r,title:l="Application",className:t,collapsible:s="icon"}){const n=L.useLocation();return c.jsx(m.Sidebar,{className:t,collapsible:s,children:c.jsx(m.SidebarContent,{children:c.jsxs(m.SidebarGroup,{children:[c.jsx(m.SidebarGroupLabel,{children:l}),c.jsx(m.SidebarGroupContent,{children:c.jsx(m.SidebarMenu,{children:r.map(o=>c.jsx(m.SidebarMenuItem,{children:c.jsx(m.SidebarMenuButton,{asChild:!0,isActive:n.pathname===o.href,children:c.jsxs(L.NavLink,{to:o.href,children:[o.icon&&c.jsx(o.icon,{}),c.jsx("span",{children:o.title})]})})},o.href))})})]})})})}function U(){b.ComponentRegistry.register("page-header",_,{namespace:"layout",label:"Page Header",category:"Layout",inputs:[{name:"title",type:"string"},{name:"description",type:"string"}]}),b.ComponentRegistry.register("page:header",_,{namespace:"layout"}),b.ComponentRegistry.register("page:card",D,{namespace:"layout",label:"Page Card",category:"Layout",isContainer:!0}),b.ComponentRegistry.register("app-shell",F,{namespace:"layout",label:"App Shell",category:"Layout"}),b.ComponentRegistry.register("responsive-grid",G,{namespace:"layout",label:"Responsive Grid",category:"Layout",isContainer:!0,inputs:[{name:"columns",type:"object"},{name:"gap",type:"number"}]})}try{U()}catch{}f.AppShell=F,f.Page=le,f.PageCard=D,f.PageHeader=_,f.ResponsiveGrid=G,f.SidebarNav=ce,f.registerLayout=U,f.useAppShellBranding=q,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/dist/layout/src/ResponsiveGrid.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+/**
+ * Spec-aligned breakpoint column map (mirrors @objectstack/spec BreakpointColumnMapSchema).
+ * Maps breakpoint names to grid column counts (1-12).
+ */
+export interface BreakpointColumnMap {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    '2xl'?: number;
+}
+/**
+ * Spec-aligned breakpoint order map (mirrors @objectstack/spec BreakpointOrderMapSchema).
+ * Maps breakpoint names to display order numbers.
+ */
+export interface BreakpointOrderMap {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    '2xl'?: number;
+}
+export interface ResponsiveGridProps {
+    /** Grid column map per breakpoint */
+    columns?: BreakpointColumnMap;
+    /** Gap between grid items */
+    gap?: number | string;
+    /** Additional class names */
+    className?: string;
+    /** Children */
+    children: React.ReactNode;
+}
+/**
+ * ResponsiveGrid — A layout component that consumes @objectstack/spec
+ * BreakpointColumnMapSchema for responsive grid layouts.
+ *
+ * Uses pure Tailwind CSS classes for responsive behavior (no JS resize listeners).
+ *
+ * @example
+ * ```tsx
+ * <ResponsiveGrid columns={{ xs: 1, sm: 2, lg: 3 }} gap={4}>
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </ResponsiveGrid>
+ * ```
+ */
+export declare const ResponsiveGrid: React.FC<ResponsiveGridProps>;

package/dist/layout/src/index.d.ts

@@ -7,4 +7,5 @@ export * from './AppShell';
 export * from './Page';
 export * from './PageCard';
 export * from './SidebarNav';
+export * from './ResponsiveGrid';
 export declare function registerLayout(): void;

package/dist/layout/src/stories/AppShell.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+/**
+ * AppShell responsive layout stories.
+ * Demonstrates the shell + responsive grid working together.
+ *
+ * Part of Q1 2026 roadmap §1.3 — Responsive layout stories in Storybook.
+ */
+declare const meta: {
+    title: string;
+    component: any;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ResponsiveDashboard: Story;
+export declare const MinimalShell: Story;

package/dist/layout/src/stories/ResponsiveGrid.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react';
+/**
+ * ResponsiveGrid stories demonstrating spec-aligned responsive layouts.
+ * Uses BreakpointColumnMapSchema to configure columns per breakpoint.
+ *
+ * Part of Q1 2026 roadmap §1.3 — Responsive layout stories in Storybook.
+ */
+declare const meta: {
+    title: string;
+    component: any;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleColumn: Story;
+export declare const TwoColumns: Story;
+export declare const FourColumnGrid: Story;
+export declare const DashboardLayout: Story;
+export declare const CompactGap: Story;
+export declare const WideGap: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/layout",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "sideEffects": false,
   "main": "dist/index.umd.cjs",
@@ -14,15 +14,15 @@
     }
   },
   "dependencies": {
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "tailwind-merge": "^2.2.1",
-    "@object-ui/components": "2.0.0",
-    "@object-ui/core": "2.0.0",
-    "@object-ui/react": "2.0.0",
-    "@object-ui/types": "2.0.0"
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwind-merge": "^2.6.1",
+    "@object-ui/components": "3.0.0",
+    "@object-ui/core": "3.0.0",
+    "@object-ui/react": "3.0.0",
+    "@object-ui/types": "3.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -30,8 +30,8 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.4",
     "react-router-dom": "^7.13.0",
-    "@vitejs/plugin-react": "^5.1.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   },

package/src/ResponsiveGrid.tsx

@@ -0,0 +1,118 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { cn } from '@object-ui/components';
+
+/**
+ * Spec-aligned breakpoint column map (mirrors @objectstack/spec BreakpointColumnMapSchema).
+ * Maps breakpoint names to grid column counts (1-12).
+ */
+export interface BreakpointColumnMap {
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  '2xl'?: number;
+}
+
+/**
+ * Spec-aligned breakpoint order map (mirrors @objectstack/spec BreakpointOrderMapSchema).
+ * Maps breakpoint names to display order numbers.
+ */
+export interface BreakpointOrderMap {
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  '2xl'?: number;
+}
+
+export interface ResponsiveGridProps {
+  /** Grid column map per breakpoint */
+  columns?: BreakpointColumnMap;
+  /** Gap between grid items */
+  gap?: number | string;
+  /** Additional class names */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+/**
+ * Tailwind class mapping for grid columns at each breakpoint.
+ * Uses standard Tailwind grid-cols utilities for CSS-only responsiveness.
+ */
+const COLS_CLASSES: Record<string, Record<number, string>> = {
+  xs: { 1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4', 6: 'grid-cols-6', 12: 'grid-cols-12' },
+  sm: { 1: 'sm:grid-cols-1', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-4', 6: 'sm:grid-cols-6', 12: 'sm:grid-cols-12' },
+  md: { 1: 'md:grid-cols-1', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4', 6: 'md:grid-cols-6', 12: 'md:grid-cols-12' },
+  lg: { 1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4', 6: 'lg:grid-cols-6', 12: 'lg:grid-cols-12' },
+  xl: { 1: 'xl:grid-cols-1', 2: 'xl:grid-cols-2', 3: 'xl:grid-cols-3', 4: 'xl:grid-cols-4', 6: 'xl:grid-cols-6', 12: 'xl:grid-cols-12' },
+  '2xl': { 1: '2xl:grid-cols-1', 2: '2xl:grid-cols-2', 3: '2xl:grid-cols-3', 4: '2xl:grid-cols-4', 6: '2xl:grid-cols-6', 12: '2xl:grid-cols-12' },
+};
+
+/**
+ * Resolve a BreakpointColumnMap into Tailwind CSS grid classes.
+ */
+function resolveColumnClasses(columns?: BreakpointColumnMap): string {
+  if (!columns) return 'grid-cols-1';
+
+  const classes: string[] = [];
+  for (const [bp, cols] of Object.entries(columns)) {
+    const bpClasses = COLS_CLASSES[bp];
+    if (bpClasses && cols) {
+      // Use closest supported column count
+      const supported = Object.keys(bpClasses).map(Number);
+      const closest = supported.reduce((prev, curr) =>
+        Math.abs(curr - cols) < Math.abs(prev - cols) ? curr : prev
+      );
+      classes.push(bpClasses[closest]);
+    }
+  }
+
+  return classes.join(' ') || 'grid-cols-1';
+}
+
+const GAP_CLASSES: Record<number, string> = {
+  0: 'gap-0', 1: 'gap-1', 2: 'gap-2', 3: 'gap-3', 4: 'gap-4',
+  5: 'gap-5', 6: 'gap-6', 8: 'gap-8',
+};
+
+/**
+ * ResponsiveGrid — A layout component that consumes @objectstack/spec
+ * BreakpointColumnMapSchema for responsive grid layouts.
+ *
+ * Uses pure Tailwind CSS classes for responsive behavior (no JS resize listeners).
+ *
+ * @example
+ * ```tsx
+ * <ResponsiveGrid columns={{ xs: 1, sm: 2, lg: 3 }} gap={4}>
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </ResponsiveGrid>
+ * ```
+ */
+export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
+  columns,
+  gap = 4,
+  className,
+  children,
+}) => {
+  const colClasses = resolveColumnClasses(columns);
+  const gapClass = typeof gap === 'number' ? (GAP_CLASSES[gap] || `gap-${gap}`) : '';
+
+  return (
+    <div className={cn('grid', colClasses, gapClass, className)}>
+      {children}
+    </div>
+  );
+};

package/src/index.ts

@@ -9,12 +9,14 @@ import { AppShell } from './AppShell';
 import { Page } from './Page';
 import { PageCard } from './PageCard';
 import { SidebarNav } from './SidebarNav';
+import { ResponsiveGrid } from './ResponsiveGrid';
 
 export * from './PageHeader';
 export * from './AppShell';
 export * from './Page';
 export * from './PageCard';
 export * from './SidebarNav';
+export * from './ResponsiveGrid';
 
 export function registerLayout() {
   ComponentRegistry.register('page-header', PageHeader, {
@@ -44,6 +46,17 @@ export function registerLayout() {
     category: 'Layout',
   });
 
+  ComponentRegistry.register('responsive-grid', ResponsiveGrid, {
+    namespace: 'layout',
+    label: 'Responsive Grid',
+    category: 'Layout',
+    isContainer: true,
+    inputs: [
+      { name: 'columns', type: 'object' },
+      { name: 'gap', type: 'number' },
+    ],
+  });
+
   // NOTE: 'page' registration is handled by @object-ui/components PageRenderer.
   // That renderer supports page types (record/home/app/utility), named regions,
   // and PageVariablesProvider. Do NOT re-register 'page' here to avoid conflicts.

package/src/stories/AppShell.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { AppShell, PageHeader, ResponsiveGrid } from '@object-ui/layout';
+import { Card, CardContent, CardHeader, CardTitle, Button } from '@object-ui/components';
+
+/**
+ * AppShell responsive layout stories.
+ * Demonstrates the shell + responsive grid working together.
+ *
+ * Part of Q1 2026 roadmap §1.3 — Responsive layout stories in Storybook.
+ */
+const meta = {
+  title: 'Layout/AppShell',
+  component: AppShell,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'The application shell provides a sidebar + main content area. ' +
+          'Combine with ResponsiveGrid for fully responsive page layouts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AppShell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SampleSidebar() {
+  return (
+    <nav className="p-4 space-y-2" aria-label="Main navigation">
+      {['Dashboard', 'Contacts', 'Tasks', 'Reports', 'Settings'].map((item) => (
+        <div
+          key={item}
+          className="px-3 py-2 rounded-md text-sm hover:bg-accent cursor-pointer"
+        >
+          {item}
+        </div>
+      ))}
+    </nav>
+  );
+}
+
+function MetricCard({ title, value }: { title: string; value: string }) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export const ResponsiveDashboard: Story = {
+  name: 'Responsive Dashboard',
+  args: {
+    sidebar: <SampleSidebar />,
+    children: (
+      <div className="p-6 space-y-6">
+        <PageHeader
+          title="Dashboard"
+          description="Key metrics overview"
+          action={<Button size="sm">Export</Button>}
+        />
+        <ResponsiveGrid columns={{ xs: 1, sm: 2, xl: 4 }} gap={4}>
+          <MetricCard title="Revenue" value="$45,231" />
+          <MetricCard title="Users" value="2,350" />
+          <MetricCard title="Orders" value="1,247" />
+          <MetricCard title="Growth" value="+12.5%" />
+        </ResponsiveGrid>
+        <ResponsiveGrid columns={{ xs: 1, lg: 2 }} gap={4}>
+          <Card>
+            <CardHeader><CardTitle>Recent Activity</CardTitle></CardHeader>
+            <CardContent><div className="h-48 bg-muted rounded" /></CardContent>
+          </Card>
+          <Card>
+            <CardHeader><CardTitle>Analytics</CardTitle></CardHeader>
+            <CardContent><div className="h-48 bg-muted rounded" /></CardContent>
+          </Card>
+        </ResponsiveGrid>
+      </div>
+    ),
+  },
+};
+
+export const MinimalShell: Story = {
+  name: 'Minimal (No Sidebar)',
+  args: {
+    children: (
+      <div className="p-6">
+        <PageHeader title="Settings" description="Manage your preferences" />
+        <ResponsiveGrid columns={{ xs: 1, md: 2 }} gap={4}>
+          <Card>
+            <CardHeader><CardTitle>Profile</CardTitle></CardHeader>
+            <CardContent><div className="h-32 bg-muted rounded" /></CardContent>
+          </Card>
+          <Card>
+            <CardHeader><CardTitle>Security</CardTitle></CardHeader>
+            <CardContent><div className="h-32 bg-muted rounded" /></CardContent>
+          </Card>
+        </ResponsiveGrid>
+      </div>
+    ),
+  },
+};

package/src/stories/ResponsiveGrid.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ResponsiveGrid } from '@object-ui/layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@object-ui/components';
+
+/**
+ * ResponsiveGrid stories demonstrating spec-aligned responsive layouts.
+ * Uses BreakpointColumnMapSchema to configure columns per breakpoint.
+ *
+ * Part of Q1 2026 roadmap §1.3 — Responsive layout stories in Storybook.
+ */
+const meta = {
+  title: 'Layout/ResponsiveGrid',
+  component: ResponsiveGrid,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A responsive grid layout that consumes @objectstack/spec BreakpointColumnMapSchema. ' +
+          'Columns adjust automatically at each breakpoint using pure Tailwind CSS.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ResponsiveGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Placeholder card for demos */
+function DemoCard({ label }: { label: string }) {
+  return (
+    <Card>
+      <CardHeader className="p-4">
+        <CardTitle className="text-sm">{label}</CardTitle>
+      </CardHeader>
+      <CardContent className="p-4 pt-0">
+        <div className="h-16 rounded bg-muted" />
+      </CardContent>
+    </Card>
+  );
+}
+
+const items = Array.from({ length: 6 }, (_, i) => (
+  <DemoCard key={i} label={`Card ${i + 1}`} />
+));
+
+// --- Stories ---
+
+export const Default: Story = {
+  args: {
+    columns: { xs: 1, sm: 2, lg: 3 },
+    gap: 4,
+    children: items,
+  },
+};
+
+export const SingleColumn: Story = {
+  args: {
+    columns: { xs: 1 },
+    gap: 4,
+    children: items.slice(0, 3),
+  },
+};
+
+export const TwoColumns: Story = {
+  args: {
+    columns: { xs: 1, sm: 2 },
+    gap: 4,
+    children: items.slice(0, 4),
+  },
+};
+
+export const FourColumnGrid: Story = {
+  args: {
+    columns: { xs: 1, sm: 2, md: 3, lg: 4 },
+    gap: 4,
+    children: items,
+  },
+};
+
+export const DashboardLayout: Story = {
+  name: 'Dashboard Layout (1 → 2 → 4)',
+  args: {
+    columns: { xs: 1, sm: 2, xl: 4 },
+    gap: 6,
+    children: Array.from({ length: 8 }, (_, i) => (
+      <DemoCard key={i} label={`Metric ${i + 1}`} />
+    )),
+  },
+};
+
+export const CompactGap: Story = {
+  name: 'Compact Gap (gap-2)',
+  args: {
+    columns: { xs: 2, md: 3 },
+    gap: 2,
+    children: items,
+  },
+};
+
+export const WideGap: Story = {
+  name: 'Wide Gap (gap-8)',
+  args: {
+    columns: { xs: 1, md: 2 },
+    gap: 8,
+    children: items.slice(0, 4),
+  },
+};