@object-ui/layout 0.1.1 → 2.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+
+> @object-ui/layout@2.0.0 build /home/runner/work/objectui/objectui/packages/layout
+> vite build
+
+vite v7.3.1 building client environment for production...
+transforming...
+✓ 15 modules transformed.
+rendering chunks...
+
+[vite:dts] Start generate declaration files...
+computing gzip size...
+dist/index.js  14.99 kB │ gzip: 4.61 kB
+[vite:dts] Declaration files built in 21839ms.
+
+No name was provided for external module "@object-ui/core" in "output.globals" – guessing "core".
+No name was provided for external module "react" in "output.globals" – guessing "require$$0".
+No name was provided for external module "@object-ui/components" in "output.globals" – guessing "components".
+No name was provided for external module "@object-ui/react" in "output.globals" – guessing "react".
+No name was provided for external module "react-router-dom" in "output.globals" – guessing "reactRouterDom".
+dist/index.umd.cjs  10.67 kB │ gzip: 4.12 kB
+✓ built in 23.26s

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @object-ui/layout
 
+## 2.0.0
+
+### Major Changes
+
+- b859617: Release v1.0.0 — unify all package versions to 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [b859617]
+  - @object-ui/types@2.0.0
+  - @object-ui/core@2.0.0
+  - @object-ui/react@2.0.0
+  - @object-ui/components@2.0.0
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/index.js

@@ -1,152 +1,152 @@
-import { ComponentRegistry as E } from "@object-ui/core";
-import ae from "react";
-import { cn as W, SidebarProvider as ne, SidebarInset as oe, SidebarTrigger as se, Sidebar as le, SidebarContent as ie, SidebarGroup as ce, SidebarGroupLabel as ue, SidebarGroupContent as fe, SidebarMenu as de, SidebarMenuItem as me, SidebarMenuButton as pe } from "@object-ui/components";
-import { SchemaRenderer as be } from "@object-ui/react";
-import { useLocation as xe, NavLink as ve } from "react-router-dom";
-var h = { exports: {} }, b = {};
-var F;
-function _e() {
-  if (F) return b;
-  F = 1;
-  var n = /* @__PURE__ */ Symbol.for("react.transitional.element"), u = /* @__PURE__ */ Symbol.for("react.fragment");
-  function i(c, a, f) {
-    var m = null;
-    if (f !== void 0 && (m = "" + f), a.key !== void 0 && (m = "" + a.key), "key" in a) {
-      f = {};
-      for (var p in a)
-        p !== "key" && (f[p] = a[p]);
-    } else f = a;
-    return a = f.ref, {
-      $$typeof: n,
-      type: c,
-      key: m,
-      ref: a !== void 0 ? a : null,
-      props: f
+import { ComponentRegistry as R } from "@object-ui/core";
+import ne, { useEffect as oe } from "react";
+import { cn as T, SidebarProvider as se, SidebarInset as le, SidebarTrigger as ce, Sidebar as ie, SidebarContent as ue, SidebarGroup as fe, SidebarGroupLabel as de, SidebarGroupContent as me, SidebarMenu as pe, SidebarMenuItem as be, SidebarMenuButton as xe } from "@object-ui/components";
+import { SchemaRenderer as ye } from "@object-ui/react";
+import { useLocation as ve, NavLink as he } from "react-router-dom";
+var j = { exports: {} }, x = {};
+var W;
+function Ee() {
+  if (W) return x;
+  W = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), c = /* @__PURE__ */ Symbol.for("react.fragment");
+  function a(o, l, n) {
+    var d = null;
+    if (n !== void 0 && (d = "" + n), l.key !== void 0 && (d = "" + l.key), "key" in l) {
+      n = {};
+      for (var m in l)
+        m !== "key" && (n[m] = l[m]);
+    } else n = l;
+    return l = n.ref, {
+      $$typeof: r,
+      type: o,
+      key: d,
+      ref: l !== void 0 ? l : null,
+      props: n
     };
   }
-  return b.Fragment = u, b.jsx = i, b.jsxs = i, b;
+  return x.Fragment = c, x.jsx = a, x.jsxs = a, x;
 }
-var x = {};
-var M;
-function Ee() {
-  return M || (M = 1, process.env.NODE_ENV !== "production" && (function() {
-    function n(e) {
+var y = {};
+var q;
+function _e() {
+  return q || (q = 1, process.env.NODE_ENV !== "production" && (function() {
+    function r(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === ee ? null : e.displayName || e.name || null;
+        return e.$$typeof === re ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case R:
+        case g:
           return "Fragment";
-        case V:
+        case z:
           return "Profiler";
-        case J:
+        case V:
           return "StrictMode";
-        case B:
-          return "Suspense";
         case Z:
+          return "Suspense";
+        case Q:
           return "SuspenseList";
-        case K:
+        case ee:
           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 q:
+          case J:
             return "Portal";
           case X:
             return e.displayName || "Context";
-          case z:
-            return (e._context.displayName || "Context") + ".Consumer";
           case H:
-            var r = e.render;
-            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case Q:
-            return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
-          case g:
-            r = e._payload, e = e._init;
+            return (e._context.displayName || "Context") + ".Consumer";
+          case B:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case K:
+            return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo";
+          case S:
+            t = e._payload, e = e._init;
             try {
-              return n(e(r));
+              return r(e(t));
             } catch {
             }
         }
       return null;
     }
-    function u(e) {
+    function c(e) {
       return "" + e;
     }
-    function i(e) {
+    function a(e) {
       try {
-        u(e);
-        var r = !1;
+        c(e);
+        var t = !1;
       } catch {
-        r = !0;
+        t = !0;
       }
-      if (r) {
-        r = console;
-        var o = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return o.call(
-          r,
+      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.",
-          s
-        ), u(e);
+          u
+        ), c(e);
       }
     }
-    function c(e) {
-      if (e === R) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === g)
+    function o(e) {
+      if (e === g) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === S)
         return "<...>";
       try {
-        var r = n(e);
-        return r ? "<" + r + ">" : "<...>";
+        var t = r(e);
+        return t ? "<" + t + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function a() {
-      var e = j.A;
+    function l() {
+      var e = P.A;
       return e === null ? null : e.getOwner();
     }
-    function f() {
+    function n() {
       return Error("react-stack-top-frame");
     }
-    function m(e) {
-      if (w.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
+    function d(e) {
+      if (I.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function p(e, r) {
-      function o() {
-        C || (C = !0, console.error(
+    function m(e, t) {
+      function i() {
+        Y || (Y = !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
+          t
         ));
       }
-      o.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: o,
+      i.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: i,
         configurable: !0
       });
     }
-    function U() {
-      var e = n(this.type);
-      return Y[e] || (Y[e] = !0, console.error(
+    function v() {
+      var e = r(this.type);
+      return L[e] || (L[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, r, o, s, _, S) {
-      var l = o.ref;
+    function h(e, t, i, u, _, A) {
+      var f = i.ref;
       return e = {
-        $$typeof: O,
+        $$typeof: $,
         type: e,
-        key: r,
-        props: o,
-        _owner: s
-      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
+        key: t,
+        props: i,
+        _owner: u
+      }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: U
+        get: v
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -166,197 +166,258 @@ function Ee() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: S
+        value: A
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function A(e, r, o, s, _, S) {
-      var l = r.children;
-      if (l !== void 0)
-        if (s)
-          if (re(l)) {
-            for (s = 0; s < l.length; s++)
-              N(l[s]);
-            Object.freeze && Object.freeze(l);
+    function p(e, t, i, u, _, A) {
+      var f = t.children;
+      if (f !== void 0)
+        if (u)
+          if (te(f)) {
+            for (u = 0; u < f.length; u++)
+              O(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 N(l);
-      if (w.call(r, "key")) {
-        l = n(e);
-        var d = Object.keys(r).filter(function(te) {
-          return te !== "key";
+        else O(f);
+      if (I.call(t, "key")) {
+        f = r(e);
+        var b = Object.keys(t).filter(function(ae) {
+          return ae !== "key";
         });
-        s = 0 < d.length ? "{key: someKey, " + d.join(": ..., ") + ": ...}" : "{key: someKey}", $[l + s] || (d = 0 < d.length ? "{" + d.join(": ..., ") + ": ...}" : "{}", console.error(
+        u = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", D[f + u] || (b = 0 < b.length ? "{" + b.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} />`,
-          s,
-          l,
-          d,
-          l
-        ), $[l + s] = !0);
+          u,
+          f,
+          b,
+          f
+        ), D[f + u] = !0);
       }
-      if (l = null, o !== void 0 && (i(o), l = "" + o), m(r) && (i(r.key), l = "" + r.key), "key" in r) {
-        o = {};
-        for (var y in r)
-          y !== "key" && (o[y] = r[y]);
-      } else o = r;
-      return l && p(
-        o,
+      if (f = null, i !== void 0 && (a(i), f = "" + i), d(t) && (a(t.key), f = "" + t.key), "key" in t) {
+        i = {};
+        for (var N in t)
+          N !== "key" && (i[N] = t[N]);
+      } else i = t;
+      return f && m(
+        i,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), G(
+      ), h(
         e,
-        l,
-        o,
-        a(),
+        f,
+        i,
+        l(),
         _,
-        S
+        A
       );
     }
-    function N(e) {
-      P(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === g && (e._payload.status === "fulfilled" ? P(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function O(e) {
+      C(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === S && (e._payload.status === "fulfilled" ? C(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function P(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === O;
+    function C(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === $;
     }
-    var v = ae, O = /* @__PURE__ */ Symbol.for("react.transitional.element"), q = /* @__PURE__ */ Symbol.for("react.portal"), R = /* @__PURE__ */ Symbol.for("react.fragment"), J = /* @__PURE__ */ Symbol.for("react.strict_mode"), V = /* @__PURE__ */ Symbol.for("react.profiler"), z = /* @__PURE__ */ Symbol.for("react.consumer"), X = /* @__PURE__ */ Symbol.for("react.context"), H = /* @__PURE__ */ Symbol.for("react.forward_ref"), B = /* @__PURE__ */ Symbol.for("react.suspense"), Z = /* @__PURE__ */ Symbol.for("react.suspense_list"), Q = /* @__PURE__ */ Symbol.for("react.memo"), g = /* @__PURE__ */ Symbol.for("react.lazy"), K = /* @__PURE__ */ Symbol.for("react.activity"), ee = /* @__PURE__ */ Symbol.for("react.client.reference"), j = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, w = Object.prototype.hasOwnProperty, re = Array.isArray, T = console.createTask ? console.createTask : function() {
+    var E = ne, $ = /* @__PURE__ */ Symbol.for("react.transitional.element"), J = /* @__PURE__ */ Symbol.for("react.portal"), g = /* @__PURE__ */ Symbol.for("react.fragment"), V = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), H = /* @__PURE__ */ Symbol.for("react.consumer"), X = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), Z = /* @__PURE__ */ Symbol.for("react.suspense"), Q = /* @__PURE__ */ Symbol.for("react.suspense_list"), K = /* @__PURE__ */ Symbol.for("react.memo"), S = /* @__PURE__ */ Symbol.for("react.lazy"), ee = /* @__PURE__ */ Symbol.for("react.activity"), re = /* @__PURE__ */ Symbol.for("react.client.reference"), P = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, te = Array.isArray, k = console.createTask ? console.createTask : function() {
       return null;
     };
-    v = {
+    E = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var C, Y = {}, L = v.react_stack_bottom_frame.bind(
-      v,
-      f
-    )(), I = T(c(f)), $ = {};
-    x.Fragment = R, x.jsx = function(e, r, o) {
-      var s = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return A(
+    var Y, L = {}, M = E.react_stack_bottom_frame.bind(
+      E,
+      n
+    )(), F = k(o(n)), D = {};
+    y.Fragment = g, y.jsx = function(e, t, i) {
+      var u = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return p(
         e,
-        r,
-        o,
+        t,
+        i,
         !1,
-        s ? Error("react-stack-top-frame") : L,
-        s ? T(c(e)) : I
+        u ? Error("react-stack-top-frame") : M,
+        u ? k(o(e)) : F
       );
-    }, x.jsxs = function(e, r, o) {
-      var s = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return A(
+    }, y.jsxs = function(e, t, i) {
+      var u = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return p(
         e,
-        r,
-        o,
+        t,
+        i,
         !0,
-        s ? Error("react-stack-top-frame") : L,
-        s ? T(c(e)) : I
+        u ? Error("react-stack-top-frame") : M,
+        u ? k(o(e)) : F
       );
     };
-  })()), x;
+  })()), y;
 }
-var D;
-function he() {
-  return D || (D = 1, process.env.NODE_ENV === "production" ? h.exports = _e() : h.exports = Ee()), h.exports;
+var U;
+function Re() {
+  return U || (U = 1, process.env.NODE_ENV === "production" ? j.exports = Ee() : j.exports = _e()), j.exports;
 }
-var t = he();
-function k({
-  title: n,
-  description: u,
-  action: i,
-  className: c,
-  children: a,
-  ...f
+var s = Re();
+function w({
+  title: r,
+  description: c,
+  action: a,
+  className: o,
+  children: l,
+  ...n
 }) {
-  return /* @__PURE__ */ t.jsx("div", { className: W("flex flex-col gap-4 pb-4 md:pb-8", c), ...f, children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-    /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ t.jsx("h1", { className: "text-2xl font-bold tracking-tight md:text-3xl", children: n }),
-      u && /* @__PURE__ */ t.jsx("p", { className: "text-sm text-muted-foreground", children: u })
+  return /* @__PURE__ */ s.jsx("div", { className: T("flex flex-col gap-4 pb-4 md:pb-8", o), ...n, children: /* @__PURE__ */ s.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ s.jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ s.jsx("h1", { className: "text-2xl font-bold tracking-tight md:text-3xl", children: r }),
+      c && /* @__PURE__ */ s.jsx("p", { className: "text-sm text-muted-foreground", children: c })
     ] }),
-    (i || a) && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-      i,
-      a
+    (a || l) && /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
+      a,
+      l
     ] })
   ] }) });
 }
-function Re({
-  sidebar: n,
-  navbar: u,
-  children: i,
-  className: c,
-  defaultOpen: a = !0
+function G(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, o = parseInt(c[2], 16) / 255, l = parseInt(c[3], 16) / 255, n = Math.max(a, o, l), d = Math.min(a, o, l);
+  let m = 0, v = 0;
+  const h = (n + d) / 2;
+  if (n !== d) {
+    const p = n - d;
+    switch (v = h > 0.5 ? p / (2 - n - d) : p / (n + d), n) {
+      case a:
+        m = ((o - l) / p + (o < l ? 6 : 0)) / 6;
+        break;
+      case o:
+        m = ((l - a) / p + 2) / 6;
+        break;
+      case l:
+        m = ((a - o) / p + 4) / 6;
+        break;
+    }
+  }
+  return `${Math.round(m * 360)} ${Math.round(v * 100)}% ${Math.round(h * 100)}%`;
+}
+function je(r, c) {
+  oe(() => {
+    const a = document.documentElement;
+    if (r?.primaryColor) {
+      const o = G(r.primaryColor);
+      o && (a.style.setProperty("--brand-primary", r.primaryColor), a.style.setProperty("--brand-primary-hsl", o));
+    } else
+      a.style.removeProperty("--brand-primary"), a.style.removeProperty("--brand-primary-hsl");
+    if (r?.accentColor) {
+      const o = G(r.accentColor);
+      o && (a.style.setProperty("--brand-accent", r.accentColor), a.style.setProperty("--brand-accent-hsl", o));
+    } else
+      a.style.removeProperty("--brand-accent"), a.style.removeProperty("--brand-accent-hsl");
+    if (r?.favicon) {
+      const o = document.querySelector("#favicon") || document.querySelector('link[rel="icon"]');
+      o && (o.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 Te({
+  sidebar: r,
+  navbar: c,
+  children: a,
+  className: o,
+  defaultOpen: l = !0,
+  branding: n
 }) {
-  return /* @__PURE__ */ t.jsxs(ne, { defaultOpen: a, children: [
-    n,
-    /* @__PURE__ */ t.jsxs(oe, { children: [
-      /* @__PURE__ */ t.jsxs("header", { className: "flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4", children: [
-        /* @__PURE__ */ t.jsx(se, { className: "-ml-1" }),
-        /* @__PURE__ */ t.jsx("div", { className: "w-px h-4 bg-border mx-2" }),
-        u
+  return je(n, n?.title), /* @__PURE__ */ s.jsxs(se, { defaultOpen: l, children: [
+    r,
+    /* @__PURE__ */ s.jsxs(le, { children: [
+      /* @__PURE__ */ s.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: [
+        /* @__PURE__ */ s.jsx(ce, { className: "-ml-1" }),
+        /* @__PURE__ */ s.jsx("div", { className: "w-px h-4 bg-border mx-1 sm:mx-2" }),
+        c
       ] }),
-      /* @__PURE__ */ t.jsx("main", { className: W("flex-1 overflow-auto p-4 md:p-6", c), children: i })
+      /* @__PURE__ */ s.jsx("main", { className: T("flex-1 overflow-auto p-3 sm:p-4 md:p-6", o), children: a })
     ] })
   ] });
 }
-const ge = (n) => n ? Array.isArray(n) ? n : [n] : [];
-function je({ schema: n, ...u }) {
-  const i = ge(n.children);
-  return /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col h-full space-y-4", children: [
-    /* @__PURE__ */ t.jsx(
-      k,
-      {
-        title: n.title,
-        description: n.description
-      }
-    ),
-    /* @__PURE__ */ t.jsx("div", { className: "flex-1 overflow-auto", children: i.map((c, a) => /* @__PURE__ */ t.jsx(
-      be,
-      {
-        schema: c,
-        ...u
-      },
-      c?.id || a
-    )) })
-  ] });
+function ge({ className: r, children: c, ...a }) {
+  return /* @__PURE__ */ s.jsx("div", { className: T("rounded-xl border bg-card text-card-foreground shadow", r), ...a, children: /* @__PURE__ */ s.jsx("div", { className: "p-6", children: c }) });
+}
+const Se = (r) => r ? Array.isArray(r) ? r : [r] : [];
+function Ce({ schema: r, className: c, style: a, id: o, ...l }) {
+  const n = Se(r.children);
+  return /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      id: o || r.id,
+      className: T("flex flex-col h-full space-y-4", c),
+      style: a,
+      children: [
+        /* @__PURE__ */ s.jsx(
+          w,
+          {
+            title: r.title,
+            description: r.description
+          }
+        ),
+        /* @__PURE__ */ s.jsx("div", { className: "flex-1 overflow-auto", children: n.map((d, m) => /* @__PURE__ */ s.jsx(
+          ye,
+          {
+            schema: d,
+            ...l
+          },
+          d?.id || m
+        )) })
+      ]
+    }
+  );
 }
-function Pe({ items: n, title: u = "Application", className: i }) {
-  const c = xe();
-  return /* @__PURE__ */ t.jsx(le, { className: i, children: /* @__PURE__ */ t.jsx(ie, { children: /* @__PURE__ */ t.jsxs(ce, { children: [
-    /* @__PURE__ */ t.jsx(ue, { children: u }),
-    /* @__PURE__ */ t.jsx(fe, { children: /* @__PURE__ */ t.jsx(de, { children: n.map((a) => /* @__PURE__ */ t.jsx(me, { children: /* @__PURE__ */ t.jsx(pe, { asChild: !0, isActive: c.pathname === a.href, children: /* @__PURE__ */ t.jsxs(ve, { to: a.href, children: [
-      a.icon && /* @__PURE__ */ t.jsx(a.icon, {}),
-      /* @__PURE__ */ t.jsx("span", { children: a.title })
-    ] }) }) }, a.href)) }) })
+function $e({ items: r, title: c = "Application", className: a, collapsible: o = "icon" }) {
+  const l = ve();
+  return /* @__PURE__ */ s.jsx(ie, { className: a, collapsible: o, children: /* @__PURE__ */ s.jsx(ue, { children: /* @__PURE__ */ s.jsxs(fe, { children: [
+    /* @__PURE__ */ s.jsx(de, { children: c }),
+    /* @__PURE__ */ s.jsx(me, { children: /* @__PURE__ */ s.jsx(pe, { children: r.map((n) => /* @__PURE__ */ s.jsx(be, { children: /* @__PURE__ */ s.jsx(xe, { asChild: !0, isActive: l.pathname === n.href, children: /* @__PURE__ */ s.jsxs(he, { to: n.href, children: [
+      n.icon && /* @__PURE__ */ s.jsx(n.icon, {}),
+      /* @__PURE__ */ s.jsx("span", { children: n.title })
+    ] }) }) }, n.href)) }) })
   ] }) }) });
 }
-function Te() {
-  E.register("page-header", k, {
+function Pe() {
+  R.register("page-header", w, {
+    namespace: "layout",
     label: "Page Header",
     category: "Layout",
     inputs: [
       { name: "title", type: "string" },
       { name: "description", type: "string" }
     ]
-  }), E.register("page:header", k), E.register("app-shell", Re, {
-    label: "App Shell",
-    category: "Layout"
-  }), E.register("page", je, {
-    label: "Standard Page",
+  }), R.register("page:header", w, { namespace: "layout" }), R.register("page:card", ge, {
+    namespace: "layout",
+    label: "Page Card",
     category: "Layout",
     isContainer: !0
+  }), R.register("app-shell", Te, {
+    namespace: "layout",
+    label: "App Shell",
+    category: "Layout"
   });
 }
 try {
-  Te();
+  Pe();
 } catch {
 }
 export {
-  Re as AppShell,
-  je as Page,
-  k as PageHeader,
-  Pe as SidebarNav,
-  Te as registerLayout
+  Te as AppShell,
+  Ce as Page,
+  ge as PageCard,
+  w as PageHeader,
+  $e as SidebarNav,
+  Pe as registerLayout,
+  je as useAppShellBranding
 };

package/dist/index.umd.cjs

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

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/Page.d.ts

@@ -1,4 +1,8 @@
+import { default as React } from 'react';
 import { PageSchema } from '../../types/src';
-export declare function Page({ schema, ...props }: {
+export declare function Page({ schema, className, style, id, ...props }: {
     schema: PageSchema;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
 } & any): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function PageCard({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

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

@@ -10,5 +10,6 @@ export interface SidebarNavProps {
     items: NavItem[];
     title?: string;
     className?: string;
+    collapsible?: "offcanvas" | "icon" | "none";
 }
-export declare function SidebarNav({ items, title, className }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarNav({ items, title, className, collapsible }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;

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

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

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@object-ui/layout",
-  "version": "0.1.1",
+  "version": "2.0.0",
   "type": "module",
+  "sideEffects": false,
   "main": "dist/index.umd.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,13 +16,13 @@
   "dependencies": {
     "clsx": "^2.1.0",
     "lucide-react": "^0.563.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tailwind-merge": "^2.2.1",
-    "@object-ui/components": "0.3.1",
-    "@object-ui/core": "0.3.1",
-    "@object-ui/react": "0.3.1",
-    "@object-ui/types": "0.3.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"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -30,7 +31,7 @@
   },
   "devDependencies": {
     "react-router-dom": "^7.13.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@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/Page.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { SchemaRenderer } from '@object-ui/react';
 import { PageSchema, SchemaNode } from '@object-ui/types';
 import { PageHeader } from './PageHeader';
+import { cn } from '@object-ui/components';
 
 // Helper to ensure children is always an array
 const getChildren = (children?: SchemaNode[] | SchemaNode): SchemaNode[] => {
@@ -11,11 +12,15 @@ const getChildren = (children?: SchemaNode[] | SchemaNode): SchemaNode[] => {
   return [children];
 };
 
-export function Page({ schema, ...props }: { schema: PageSchema } & any) {
+export function Page({ schema, className, style, id, ...props }: { schema: PageSchema; className?: string; style?: React.CSSProperties; id?: string } & any) {
   const children = getChildren(schema.children);
 
   return (
-    <div className="flex flex-col h-full space-y-4">
+    <div 
+      id={id || schema.id}
+      className={cn("flex flex-col h-full space-y-4", className)} 
+      style={style}
+    >
       <PageHeader 
         title={schema.title} 
         description={schema.description} 

package/src/PageCard.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { cn } from '@object-ui/components';
+
+export function PageCard({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props}>
+      <div className="p-6">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/SidebarNav.tsx

@@ -21,13 +21,14 @@ export interface SidebarNavProps {
     items: NavItem[];
     title?: string;
     className?: string;
+    collapsible?: "offcanvas" | "icon" | "none";
 }
 
-export function SidebarNav({ items, title = "Application", className }: SidebarNavProps) {
+export function SidebarNav({ items, title = "Application", className, collapsible = "icon" }: SidebarNavProps) {
   const location = useLocation();
 
   return (
-    <Sidebar className={className}>
+    <Sidebar className={className} collapsible={collapsible}>
       <SidebarContent>
         <SidebarGroup>
           <SidebarGroupLabel>{title}</SidebarGroupLabel>

package/src/index.ts

@@ -7,15 +7,18 @@ import { ComponentRegistry } from '@object-ui/core';
 import { PageHeader } from './PageHeader';
 import { AppShell } from './AppShell';
 import { Page } from './Page';
+import { PageCard } from './PageCard';
 import { SidebarNav } from './SidebarNav';
 
 export * from './PageHeader';
 export * from './AppShell';
 export * from './Page';
+export * from './PageCard';
 export * from './SidebarNav';
 
 export function registerLayout() {
   ComponentRegistry.register('page-header', PageHeader, {
+      namespace: 'layout',
       label: 'Page Header',
       category: 'Layout',
       inputs: [
@@ -25,19 +28,25 @@ export function registerLayout() {
   });
 
   // Alias for protocol compliance
-  ComponentRegistry.register('page:header', PageHeader);
+  ComponentRegistry.register('page:header', PageHeader, { namespace: 'layout' });
 
-  ComponentRegistry.register('app-shell', AppShell, {
-      label: 'App Shell',
-      category: 'Layout',
+  // Page Card
+  ComponentRegistry.register('page:card', PageCard, {
+    namespace: 'layout',
+    label: 'Page Card',
+    category: 'Layout',
+    isContainer: true
   });
 
-  // Core Page Renderer
-  ComponentRegistry.register('page', Page, {
-    label: 'Standard Page',
+  ComponentRegistry.register('app-shell', AppShell, {
+    namespace: 'layout',
+    label: 'App Shell',
     category: 'Layout',
-    isContainer: true
   });
+
+  // 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

package/vite.config.ts

@@ -32,4 +32,7 @@ export default defineConfig({
       ],
     },
   },
+  test: {
+    passWithNoTests: true,
+  },
 });