@object-ui/layout 0.5.0 → 2.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @object-ui/layout@0.5.0 build /home/runner/work/objectui/objectui/packages/layout
+> @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...
@@ -9,13 +9,13 @@ rendering chunks...
 
 [vite:dts] Start generate declaration files...
 computing gzip size...
-dist/index.js  13.10 kB │ gzip: 4.03 kB
-[vite:dts] Declaration files built in 17748ms.
+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  9.21 kB │ gzip: 3.62 kB
-✓ built in 18.30s
+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 b } from "@object-ui/core";
-import ae from "react";
-import { cn as h, 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 g = { exports: {} }, x = {};
-var M;
-function _e() {
-  if (M) return x;
-  M = 1;
-  var a = /* @__PURE__ */ Symbol.for("react.transitional.element"), u = /* @__PURE__ */ Symbol.for("react.fragment");
-  function c(f, s, o) {
+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 (o !== void 0 && (d = "" + o), s.key !== void 0 && (d = "" + s.key), "key" in s) {
-      o = {};
-      for (var m in s)
-        m !== "key" && (o[m] = s[m]);
-    } else o = s;
-    return s = o.ref, {
-      $$typeof: a,
-      type: f,
+    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: s !== void 0 ? s : null,
-      props: o
+      ref: l !== void 0 ? l : null,
+      props: n
     };
   }
-  return x.Fragment = u, x.jsx = c, x.jsxs = c, x;
+  return x.Fragment = c, x.jsx = a, x.jsxs = a, x;
 }
-var v = {};
-var D;
-function Ee() {
-  return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
-    function a(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 : a(e.type) || "Memo";
-          case j:
-            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 a(e(r));
+              return r(e(t));
             } catch {
             }
         }
       return null;
     }
-    function u(e) {
+    function c(e) {
       return "" + e;
     }
-    function c(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 n = r.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return n.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.",
-          l
-        ), u(e);
+          u
+        ), c(e);
       }
     }
-    function f(e) {
-      if (e === R) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === j)
+    function o(e) {
+      if (e === g) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === S)
         return "<...>";
       try {
-        var r = a(e);
-        return r ? "<" + r + ">" : "<...>";
+        var t = r(e);
+        return t ? "<" + t + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function s() {
-      var e = T.A;
+    function l() {
+      var e = P.A;
       return e === null ? null : e.getOwner();
     }
-    function o() {
+    function n() {
       return Error("react-stack-top-frame");
     }
     function d(e) {
-      if (C.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
+      if (I.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function m(e, r) {
-      function n() {
+    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
         ));
       }
-      n.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: n,
+      i.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: i,
         configurable: !0
       });
     }
-    function U() {
-      var e = a(this.type);
+    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, n, l, E, y) {
-      var i = n.ref;
+    function h(e, t, i, u, _, A) {
+      var f = i.ref;
       return e = {
-        $$typeof: w,
+        $$typeof: $,
         type: e,
-        key: r,
-        props: n,
-        _owner: l
-      }, (i !== void 0 ? i : 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,
@@ -161,168 +161,216 @@ function Ee() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: E
+        value: _
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: y
+        value: A
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function N(e, r, n, l, E, y) {
-      var i = r.children;
-      if (i !== void 0)
-        if (l)
-          if (re(i)) {
-            for (l = 0; l < i.length; l++)
-              P(i[l]);
-            Object.freeze && Object.freeze(i);
+    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 P(i);
-      if (C.call(r, "key")) {
-        i = a(e);
-        var p = 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";
         });
-        l = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", F[i + l] || (p = 0 < p.length ? "{" + p.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} />`,
-          l,
-          i,
-          p,
-          i
-        ), F[i + l] = !0);
+          u,
+          f,
+          b,
+          f
+        ), D[f + u] = !0);
       }
-      if (i = null, n !== void 0 && (c(n), i = "" + n), d(r) && (c(r.key), i = "" + r.key), "key" in r) {
-        n = {};
-        for (var k in r)
-          k !== "key" && (n[k] = r[k]);
-      } else n = r;
-      return i && m(
-        n,
+      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,
+        f,
         i,
-        n,
-        s(),
-        E,
-        y
+        l(),
+        _,
+        A
       );
     }
-    function P(e) {
-      O(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === j && (e._payload.status === "fulfilled" ? O(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
     function O(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === w;
+      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 C(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === $;
     }
-    var _ = ae, w = /* @__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"), j = /* @__PURE__ */ Symbol.for("react.lazy"), K = /* @__PURE__ */ Symbol.for("react.activity"), ee = /* @__PURE__ */ Symbol.for("react.client.reference"), T = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, re = Array.isArray, S = 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;
     };
-    _ = {
+    E = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var Y, L = {}, I = _.react_stack_bottom_frame.bind(
-      _,
-      o
-    )(), $ = S(f(o)), F = {};
-    v.Fragment = R, v.jsx = function(e, r, n) {
-      var l = 1e4 > T.recentlyCreatedOwnerStacks++;
-      return N(
+    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,
-        n,
+        t,
+        i,
         !1,
-        l ? Error("react-stack-top-frame") : I,
-        l ? S(f(e)) : $
+        u ? Error("react-stack-top-frame") : M,
+        u ? k(o(e)) : F
       );
-    }, v.jsxs = function(e, r, n) {
-      var l = 1e4 > T.recentlyCreatedOwnerStacks++;
-      return N(
+    }, y.jsxs = function(e, t, i) {
+      var u = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return p(
         e,
-        r,
-        n,
+        t,
+        i,
         !0,
-        l ? Error("react-stack-top-frame") : I,
-        l ? S(f(e)) : $
+        u ? Error("react-stack-top-frame") : M,
+        u ? k(o(e)) : F
       );
     };
-  })()), v;
+  })()), y;
 }
-var W;
-function ge() {
-  return W || (W = 1, process.env.NODE_ENV === "production" ? g.exports = _e() : g.exports = Ee()), g.exports;
+var U;
+function Re() {
+  return U || (U = 1, process.env.NODE_ENV === "production" ? j.exports = Ee() : j.exports = _e()), j.exports;
 }
-var t = ge();
-function A({
-  title: a,
-  description: u,
-  action: c,
-  className: f,
-  children: s,
-  ...o
+var s = Re();
+function w({
+  title: r,
+  description: c,
+  action: a,
+  className: o,
+  children: l,
+  ...n
 }) {
-  return /* @__PURE__ */ t.jsx("div", { className: h("flex flex-col gap-4 pb-4 md:pb-8", f), ...o, 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: a }),
-      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 })
     ] }),
-    (c || s) && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-      c,
-      s
+    (a || l) && /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
+      a,
+      l
     ] })
   ] }) });
 }
-function he({
-  sidebar: a,
-  navbar: u,
-  children: c,
-  className: f,
-  defaultOpen: s = !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: s, children: [
-    a,
-    /* @__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: h("flex-1 overflow-auto p-4 md:p-6", f), children: c })
+      /* @__PURE__ */ s.jsx("main", { className: T("flex-1 overflow-auto p-3 sm:p-4 md:p-6", o), children: a })
     ] })
   ] });
 }
-const Re = (a) => a ? Array.isArray(a) ? a : [a] : [];
-function je({ schema: a, className: u, style: c, id: f, ...s }) {
-  const o = Re(a.children);
-  return /* @__PURE__ */ t.jsxs(
+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: f || a.id,
-      className: h("flex flex-col h-full space-y-4", u),
-      style: c,
+      id: o || r.id,
+      className: T("flex flex-col h-full space-y-4", c),
+      style: a,
       children: [
-        /* @__PURE__ */ t.jsx(
-          A,
+        /* @__PURE__ */ s.jsx(
+          w,
           {
-            title: a.title,
-            description: a.description
+            title: r.title,
+            description: r.description
           }
         ),
-        /* @__PURE__ */ t.jsx("div", { className: "flex-1 overflow-auto", children: o.map((d, m) => /* @__PURE__ */ t.jsx(
-          be,
+        /* @__PURE__ */ s.jsx("div", { className: "flex-1 overflow-auto", children: n.map((d, m) => /* @__PURE__ */ s.jsx(
+          ye,
           {
             schema: d,
-            ...s
+            ...l
           },
           d?.id || m
         )) })
@@ -330,49 +378,46 @@ function je({ schema: a, className: u, style: c, id: f, ...s }) {
     }
   );
 }
-function Te({ className: a, children: u, ...c }) {
-  return /* @__PURE__ */ t.jsx("div", { className: h("rounded-xl border bg-card text-card-foreground shadow", a), ...c, children: /* @__PURE__ */ t.jsx("div", { className: "p-6", children: u }) });
-}
-function Oe({ items: a, title: u = "Application", className: c, collapsible: f = "icon" }) {
-  const s = xe();
-  return /* @__PURE__ */ t.jsx(le, { className: c, collapsible: f, 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: a.map((o) => /* @__PURE__ */ t.jsx(me, { children: /* @__PURE__ */ t.jsx(pe, { asChild: !0, isActive: s.pathname === o.href, children: /* @__PURE__ */ t.jsxs(ve, { to: o.href, children: [
-      o.icon && /* @__PURE__ */ t.jsx(o.icon, {}),
-      /* @__PURE__ */ t.jsx("span", { children: o.title })
-    ] }) }) }, o.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 Se() {
-  b.register("page-header", A, {
+function Pe() {
+  R.register("page-header", w, {
+    namespace: "layout",
     label: "Page Header",
     category: "Layout",
     inputs: [
       { name: "title", type: "string" },
       { name: "description", type: "string" }
     ]
-  }), b.register("page:header", A), b.register("page:card", Te, {
+  }), R.register("page:header", w, { namespace: "layout" }), R.register("page:card", ge, {
+    namespace: "layout",
     label: "Page Card",
     category: "Layout",
     isContainer: !0
-  }), b.register("app-shell", he, {
+  }), R.register("app-shell", Te, {
+    namespace: "layout",
     label: "App Shell",
     category: "Layout"
-  }), b.register("page", je, {
-    label: "Standard Page",
-    category: "Layout",
-    isContainer: !0
   });
 }
 try {
-  Se();
+  Pe();
 } catch {
 }
 export {
-  he as AppShell,
-  je as Page,
-  Te as PageCard,
-  A as PageHeader,
-  Oe as SidebarNav,
-  Se 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(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(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} />`,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,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/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@object-ui/layout",
-  "version": "0.5.0",
+  "version": "2.0.0",
   "type": "module",
+  "sideEffects": false,
   "main": "dist/index.umd.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,10 +19,10 @@
     "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"
+    "@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",

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/index.ts

@@ -18,6 +18,7 @@ export * from './SidebarNav';
 
 export function registerLayout() {
   ComponentRegistry.register('page-header', PageHeader, {
+      namespace: 'layout',
       label: 'Page Header',
       category: 'Layout',
       inputs: [
@@ -27,26 +28,25 @@ 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',
-  });
-
-  // Core Page Renderer
-  ComponentRegistry.register('page', Page, {
-    label: 'Standard Page',
+    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