@object-ui/layout 0.5.0 → 3.0.0

package/dist/index.umd.cjs

@@ -1,6 +1,6 @@
-(function(u,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):(u=typeof globalThis<"u"?globalThis:u||self,b(u.ObjectUILayout={},u.core,u.require$$0,u.components,u.react,u.reactRouterDom))})(this,(function(u,b,H,f,X,N){"use strict";var E={exports:{}},g={};var O;function B(){if(O)return g;O=1;var a=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function c(m,s,o){var p=null;if(o!==void 0&&(p=""+o),s.key!==void 0&&(p=""+s.key),"key"in s){o={};for(var x in s)x!=="key"&&(o[x]=s[x])}else o=s;return s=o.ref,{$$typeof:a,type:m,key:p,ref:s!==void 0?s:null,props:o}}return g.Fragment=d,g.jsx=c,g.jsxs=c,g}var _={};var w;function Z(){return w||(w=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===me?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case y:return"Fragment";case oe:return"Profiler";case ne:return"StrictMode";case ue:return"Suspense";case ce:return"SuspenseList";case de: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 ae:return"Portal";case ie:return e.displayName||"Context";case se:return(e._context.displayName||"Context")+".Consumer";case le:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case fe:return r=e.displayName||null,r!==null?r:a(e.type)||"Memo";case T:r=e._payload,e=e._init;try{return a(e(r))}catch{}}return null}function d(e){return""+e}function c(e){try{d(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,i=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",i),d(e)}}function m(e){if(e===y)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===T)return"<...>";try{var r=a(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function s(){var e=S.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function p(e){if(U.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function x(e,r){function n(){W||(W=!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)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function re(){var e=a(this.type);return G[e]||(G[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 te(e,r,n,i,R,P){var l=n.ref;return e={$$typeof:D,type:e,key:r,props:n,_owner:i},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:re}):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:R}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function M(e,r,n,i,R,P){var l=r.children;if(l!==void 0)if(i)if(be(l)){for(i=0;i<l.length;i++)F(l[i]);Object.freeze&&Object.freeze(l)}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 F(l);if(U.call(r,"key")){l=a(e);var v=Object.keys(r).filter(function(pe){return pe!=="key"});i=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",z[l+i]||(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} />`,i,l,v,l),z[l+i]=!0)}if(l=null,n!==void 0&&(c(n),l=""+n),p(r)&&(c(r.key),l=""+r.key),"key"in r){n={};for(var A in r)A!=="key"&&(n[A]=r[A])}else n=r;return l&&x(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),te(e,l,n,s(),R,P)}function F(e){q(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===T&&(e._payload.status==="fulfilled"?q(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function q(e){return typeof e=="object"&&e!==null&&e.$$typeof===D}var j=H,D=Symbol.for("react.transitional.element"),ae=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),ne=Symbol.for("react.strict_mode"),oe=Symbol.for("react.profiler"),se=Symbol.for("react.consumer"),ie=Symbol.for("react.context"),le=Symbol.for("react.forward_ref"),ue=Symbol.for("react.suspense"),ce=Symbol.for("react.suspense_list"),fe=Symbol.for("react.memo"),T=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),me=Symbol.for("react.client.reference"),S=j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U=Object.prototype.hasOwnProperty,be=Array.isArray,k=console.createTask?console.createTask:function(){return null};j={react_stack_bottom_frame:function(e){return e()}};var W,G={},J=j.react_stack_bottom_frame.bind(j,o)(),V=k(m(o)),z={};_.Fragment=y,_.jsx=function(e,r,n){var i=1e4>S.recentlyCreatedOwnerStacks++;return M(e,r,n,!1,i?Error("react-stack-top-frame"):J,i?k(m(e)):V)},_.jsxs=function(e,r,n){var i=1e4>S.recentlyCreatedOwnerStacks++;return M(e,r,n,!0,i?Error("react-stack-top-frame"):J,i?k(m(e)):V)}})()),_}var C;function Q(){return C||(C=1,process.env.NODE_ENV==="production"?E.exports=B():E.exports=Z()),E.exports}var t=Q();function h({title:a,description:d,action:c,className:m,children:s,...o}){return t.jsx("div",{className:f.cn("flex flex-col gap-4 pb-4 md:pb-8",m),...o,children:t.jsxs("div",{className:"flex items-center justify-between gap-4",children:[t.jsxs("div",{className:"flex flex-col gap-1",children:[t.jsx("h1",{className:"text-2xl font-bold tracking-tight md:text-3xl",children:a}),d&&t.jsx("p",{className:"text-sm text-muted-foreground",children:d})]}),(c||s)&&t.jsxs("div",{className:"flex items-center gap-2",children:[c,s]})]})})}function L({sidebar:a,navbar:d,children:c,className:m,defaultOpen:s=!0}){return t.jsxs(f.SidebarProvider,{defaultOpen:s,children:[a,t.jsxs(f.SidebarInset,{children:[t.jsxs("header",{className:"flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4",children:[t.jsx(f.SidebarTrigger,{className:"-ml-1"}),t.jsx("div",{className:"w-px h-4 bg-border mx-2"}),d]}),t.jsx("main",{className:f.cn("flex-1 overflow-auto p-4 md:p-6",m),children:c})]})]})}const K=a=>a?Array.isArray(a)?a:[a]:[];function Y({schema:a,className:d,style:c,id:m,...s}){const o=K(a.children);return t.jsxs("div",{id:m||a.id,className:f.cn("flex flex-col h-full space-y-4",d),style:c,children:[t.jsx(h,{title:a.title,description:a.description}),t.jsx("div",{className:"flex-1 overflow-auto",children:o.map((p,x)=>t.jsx(X.SchemaRenderer,{schema:p,...s},p?.id||x))})]})}function I({className:a,children:d,...c}){return t.jsx("div",{className:f.cn("rounded-xl border bg-card text-card-foreground shadow",a),...c,children:t.jsx("div",{className:"p-6",children:d})})}function ee({items:a,title:d="Application",className:c,collapsible:m="icon"}){const s=N.useLocation();return t.jsx(f.Sidebar,{className:c,collapsible:m,children:t.jsx(f.SidebarContent,{children:t.jsxs(f.SidebarGroup,{children:[t.jsx(f.SidebarGroupLabel,{children:d}),t.jsx(f.SidebarGroupContent,{children:t.jsx(f.SidebarMenu,{children:a.map(o=>t.jsx(f.SidebarMenuItem,{children:t.jsx(f.SidebarMenuButton,{asChild:!0,isActive:s.pathname===o.href,children:t.jsxs(N.NavLink,{to:o.href,children:[o.icon&&t.jsx(o.icon,{}),t.jsx("span",{children:o.title})]})})},o.href))})})]})})})}function $(){b.ComponentRegistry.register("page-header",h,{label:"Page Header",category:"Layout",inputs:[{name:"title",type:"string"},{name:"description",type:"string"}]}),b.ComponentRegistry.register("page:header",h),b.ComponentRegistry.register("page:card",I,{label:"Page Card",category:"Layout",isContainer:!0}),b.ComponentRegistry.register("app-shell",L,{label:"App Shell",category:"Layout"}),b.ComponentRegistry.register("page",Y,{label:"Standard Page",category:"Layout",isContainer:!0})}try{$()}catch{}u.AppShell=L,u.Page=Y,u.PageCard=I,u.PageHeader=h,u.SidebarNav=ee,u.registerLayout=$,Object.defineProperty(u,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/AppShell.d.ts

@@ -1,9 +1,32 @@
 import { default as React } from 'react';
+/**
+ * Branding configuration for the AppShell.
+ * Applies CSS custom properties to the document root for theme customization.
+ */
+export interface AppShellBranding {
+    /** Primary brand color (hex, e.g. "#3B82F6") */
+    primaryColor?: string;
+    /** Accent brand color (hex, e.g. "#10B981") */
+    accentColor?: string;
+    /** Favicon URL — replaces the <link rel="icon"> href */
+    favicon?: string;
+    /** Logo URL — passed to sidebar/navbar via context */
+    logo?: string;
+    /** Page title suffix (sets document.title) */
+    title?: string;
+}
 export interface AppShellProps {
     sidebar?: React.ReactNode;
     navbar?: React.ReactNode;
     children: React.ReactNode;
     className?: string;
     defaultOpen?: boolean;
+    /** App branding — applies CSS custom properties for theming */
+    branding?: AppShellBranding;
 }
-export declare function AppShell({ sidebar, navbar, children, className, defaultOpen, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Apply branding CSS custom properties to the document root.
+ * This is extracted as a standalone hook so it can be re-used independently.
+ */
+export declare function useAppShellBranding(branding?: AppShellBranding, title?: string): void;
+export declare function AppShell({ sidebar, navbar, children, className, defaultOpen, branding, }: AppShellProps): import("react/jsx-runtime").JSX.Element;

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,7 +1,8 @@
 {
   "name": "@object-ui/layout",
-  "version": "0.5.0",
+  "version": "3.0.0",
   "type": "module",
+  "sideEffects": false,
   "main": "dist/index.umd.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,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": "0.5.0",
-    "@object-ui/core": "0.5.0",
-    "@object-ui/react": "0.5.0",
-    "@object-ui/types": "0.5.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",
@@ -29,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/AppShell.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   SidebarProvider,
   SidebarTrigger,
@@ -7,12 +7,117 @@ import {
 } from '@object-ui/components';
 import { cn } from '@object-ui/components';
 
+/**
+ * Branding configuration for the AppShell.
+ * Applies CSS custom properties to the document root for theme customization.
+ */
+export interface AppShellBranding {
+  /** Primary brand color (hex, e.g. "#3B82F6") */
+  primaryColor?: string;
+  /** Accent brand color (hex, e.g. "#10B981") */
+  accentColor?: string;
+  /** Favicon URL — replaces the <link rel="icon"> href */
+  favicon?: string;
+  /** Logo URL — passed to sidebar/navbar via context */
+  logo?: string;
+  /** Page title suffix (sets document.title) */
+  title?: string;
+}
+
 export interface AppShellProps {
   sidebar?: React.ReactNode;
   navbar?: React.ReactNode; // Top navbar content
   children: React.ReactNode;
   className?: string;
   defaultOpen?: boolean;
+  /** App branding — applies CSS custom properties for theming */
+  branding?: AppShellBranding;
+}
+
+/**
+ * Convert a hex color (#RRGGBB) to HSL string "H S% L%"
+ * for use in Tailwind CSS custom properties.
+ */
+function hexToHSL(hex: string): string | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return null;
+
+  const r = parseInt(result[1], 16) / 255;
+  const g = parseInt(result[2], 16) / 255;
+  const b = parseInt(result[3], 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+
+/**
+ * Apply branding CSS custom properties to the document root.
+ * This is extracted as a standalone hook so it can be re-used independently.
+ */
+export function useAppShellBranding(branding?: AppShellBranding, title?: string) {
+  useEffect(() => {
+    const root = document.documentElement;
+
+    // Primary color
+    if (branding?.primaryColor) {
+      const hsl = hexToHSL(branding.primaryColor);
+      if (hsl) {
+        root.style.setProperty('--brand-primary', branding.primaryColor);
+        root.style.setProperty('--brand-primary-hsl', hsl);
+      }
+    } else {
+      root.style.removeProperty('--brand-primary');
+      root.style.removeProperty('--brand-primary-hsl');
+    }
+
+    // Accent color
+    if (branding?.accentColor) {
+      const hsl = hexToHSL(branding.accentColor);
+      if (hsl) {
+        root.style.setProperty('--brand-accent', branding.accentColor);
+        root.style.setProperty('--brand-accent-hsl', hsl);
+      }
+    } else {
+      root.style.removeProperty('--brand-accent');
+      root.style.removeProperty('--brand-accent-hsl');
+    }
+
+    // Favicon
+    if (branding?.favicon) {
+      const link = document.querySelector<HTMLLinkElement>('#favicon')
+        || document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+      if (link) {
+        link.href = branding.favicon;
+      }
+    }
+
+    // Page title
+    if (title) {
+      document.title = title;
+    }
+
+    return () => {
+      root.style.removeProperty('--brand-primary');
+      root.style.removeProperty('--brand-primary-hsl');
+      root.style.removeProperty('--brand-accent');
+      root.style.removeProperty('--brand-accent-hsl');
+    };
+  }, [branding?.primaryColor, branding?.accentColor, branding?.favicon, title]);
 }
 
 export function AppShell({
@@ -21,17 +126,21 @@ export function AppShell({
   children,
   className,
   defaultOpen = true,
+  branding,
 }: AppShellProps) {
+  // Apply branding CSS custom properties
+  useAppShellBranding(branding, branding?.title);
+
   return (
     <SidebarProvider defaultOpen={defaultOpen}>
       {sidebar}
       <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+        <header className="flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4">
           <SidebarTrigger className="-ml-1" />
-          <div className="w-px h-4 bg-border mx-2" />
+          <div className="w-px h-4 bg-border mx-1 sm:mx-2" />
           {navbar}
         </header>
-        <main className={cn("flex-1 overflow-auto p-4 md:p-6", className)}>
+        <main className={cn("flex-1 overflow-auto p-3 sm:p-4 md:p-6", className)}>
           {children}
         </main>
       </SidebarInset>

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,15 +9,18 @@ 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, {
+      namespace: 'layout',
       label: 'Page Header',
       category: 'Layout',
       inputs: [
@@ -27,26 +30,36 @@ export function registerLayout() {
   });
 
   // Alias for protocol compliance
-  ComponentRegistry.register('page:header', PageHeader);
+  ComponentRegistry.register('page:header', PageHeader, { namespace: 'layout' });
 
   // Page Card
   ComponentRegistry.register('page:card', PageCard, {
+    namespace: 'layout',
     label: 'Page Card',
     category: 'Layout',
     isContainer: true
   });
 
   ComponentRegistry.register('app-shell', AppShell, {
-      label: 'App Shell',
-      category: 'Layout',
+    namespace: 'layout',
+    label: 'App Shell',
+    category: 'Layout',
   });
 
-  // Core Page Renderer
-  ComponentRegistry.register('page', Page, {
-    label: 'Standard Page',
+  ComponentRegistry.register('responsive-grid', ResponsiveGrid, {
+    namespace: 'layout',
+    label: 'Responsive Grid',
     category: 'Layout',
-    isContainer: true
+    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.
 }
 
 // Keep backward compatibility for now if called directly