@object-ui/layout 0.5.0 → 3.0.0

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 ae, { useEffect as se } from "react";
+import { cn as h, SidebarProvider as ne, SidebarInset as le, SidebarTrigger as ce, Sidebar as ie, SidebarContent as ue, SidebarGroup as de, SidebarGroupLabel as fe, SidebarGroupContent as me, SidebarMenu as pe, SidebarMenuItem as ge, SidebarMenuButton as xe } 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) {
-    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,
-      key: d,
-      ref: s !== void 0 ? s : null,
-      props: o
+import { useLocation as ye, NavLink as ve } from "react-router-dom";
+var j = { exports: {} }, y = {};
+var G;
+function he() {
+  if (G) return y;
+  G = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), l = /* @__PURE__ */ Symbol.for("react.fragment");
+  function t(a, n, s) {
+    var f = null;
+    if (s !== void 0 && (f = "" + s), n.key !== void 0 && (f = "" + n.key), "key" in n) {
+      s = {};
+      for (var m in n)
+        m !== "key" && (s[m] = n[m]);
+    } else s = n;
+    return n = s.ref, {
+      $$typeof: r,
+      type: a,
+      key: f,
+      ref: n !== void 0 ? n : null,
+      props: s
     };
   }
-  return x.Fragment = u, x.jsx = c, x.jsxs = c, x;
+  return y.Fragment = l, y.jsx = t, y.jsxs = t, y;
 }
 var v = {};
-var D;
+var W;
 function Ee() {
-  return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
-    function a(e) {
+  return W || (W = 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 S:
           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 o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case K:
+            return o = e.displayName || null, o !== null ? o : r(e.type) || "Memo";
+          case T:
+            o = e._payload, e = e._init;
             try {
-              return a(e(r));
+              return r(e(o));
             } catch {
             }
         }
       return null;
     }
-    function u(e) {
+    function l(e) {
       return "" + e;
     }
-    function c(e) {
+    function t(e) {
       try {
-        u(e);
-        var r = !1;
+        l(e);
+        var o = !1;
       } catch {
-        r = !0;
+        o = !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 (o) {
+        o = console;
+        var i = o.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return i.call(
+          o,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          l
-        ), u(e);
+          u
+        ), l(e);
       }
     }
-    function f(e) {
-      if (e === R) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === j)
+    function a(e) {
+      if (e === S) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
         return "<...>";
       try {
-        var r = a(e);
-        return r ? "<" + r + ">" : "<...>";
+        var o = r(e);
+        return o ? "<" + o + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function s() {
-      var e = T.A;
+    function n() {
+      var e = P.A;
       return e === null ? null : e.getOwner();
     }
-    function o() {
+    function s() {
       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;
+    function f(e) {
+      if ($.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function m(e, r) {
-      function n() {
-        Y || (Y = !0, console.error(
+    function m(e, o) {
+      function i() {
+        M || (M = !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
         ));
       }
-      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);
-      return L[e] || (L[e] = !0, console.error(
+    function g() {
+      var e = r(this.type);
+      return I[e] || (I[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 E(e, o, i, u, R, A) {
+      var d = i.ref;
       return e = {
-        $$typeof: w,
+        $$typeof: L,
         type: e,
-        key: r,
-        props: n,
-        _owner: l
-      }, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
+        key: o,
+        props: i,
+        _owner: u
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: U
+        get: g
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -161,69 +161,69 @@ function Ee() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: E
+        value: R
       }), 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, o, i, u, R, A) {
+      var d = o.children;
+      if (d !== void 0)
+        if (u)
+          if (te(d)) {
+            for (u = 0; u < d.length; u++)
+              O(d[u]);
+            Object.freeze && Object.freeze(d);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else P(i);
-      if (C.call(r, "key")) {
-        i = a(e);
-        var p = Object.keys(r).filter(function(te) {
-          return te !== "key";
+        else O(d);
+      if ($.call(o, "key")) {
+        d = r(e);
+        var x = Object.keys(o).filter(function(oe) {
+          return oe !== "key";
         });
-        l = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", F[i + l] || (p = 0 < p.length ? "{" + p.join(": ..., ") + ": ...}" : "{}", console.error(
+        u = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", D[d + u] || (x = 0 < x.length ? "{" + x.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,
+          d,
+          x,
+          d
+        ), D[d + 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 (d = null, i !== void 0 && (t(i), d = "" + i), f(o) && (t(o.key), d = "" + o.key), "key" in o) {
+        i = {};
+        for (var C in o)
+          C !== "key" && (i[C] = o[C]);
+      } else i = o;
+      return d && m(
+        i,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), G(
+      ), E(
         e,
+        d,
         i,
-        n,
-        s(),
-        E,
-        y
+        n(),
+        R,
+        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;
+      w(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? w(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function w(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === L;
     }
-    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 _ = ae, L = /* @__PURE__ */ Symbol.for("react.transitional.element"), J = /* @__PURE__ */ Symbol.for("react.portal"), S = /* @__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"), T = /* @__PURE__ */ Symbol.for("react.lazy"), ee = /* @__PURE__ */ Symbol.for("react.activity"), re = /* @__PURE__ */ Symbol.for("react.client.reference"), P = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, te = Array.isArray, k = console.createTask ? console.createTask : function() {
       return null;
     };
     _ = {
@@ -231,148 +231,242 @@ React keys must be passed directly to JSX without using spread:
         return e();
       }
     };
-    var Y, L = {}, I = _.react_stack_bottom_frame.bind(
+    var M, I = {}, Y = _.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(
+      s
+    )(), F = k(a(s)), D = {};
+    v.Fragment = S, v.jsx = function(e, o, i) {
+      var u = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return p(
         e,
-        r,
-        n,
+        o,
+        i,
         !1,
-        l ? Error("react-stack-top-frame") : I,
-        l ? S(f(e)) : $
+        u ? Error("react-stack-top-frame") : Y,
+        u ? k(a(e)) : F
       );
-    }, v.jsxs = function(e, r, n) {
-      var l = 1e4 > T.recentlyCreatedOwnerStacks++;
-      return N(
+    }, v.jsxs = function(e, o, i) {
+      var u = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return p(
         e,
-        r,
-        n,
+        o,
+        i,
         !0,
-        l ? Error("react-stack-top-frame") : I,
-        l ? S(f(e)) : $
+        u ? Error("react-stack-top-frame") : Y,
+        u ? k(a(e)) : F
       );
     };
   })()), v;
 }
-var W;
-function ge() {
-  return W || (W = 1, process.env.NODE_ENV === "production" ? g.exports = _e() : g.exports = Ee()), g.exports;
+var q;
+function _e() {
+  return q || (q = 1, process.env.NODE_ENV === "production" ? j.exports = he() : j.exports = Ee()), j.exports;
 }
-var t = ge();
-function A({
-  title: a,
-  description: u,
-  action: c,
-  className: f,
-  children: s,
-  ...o
+var c = _e();
+function N({
+  title: r,
+  description: l,
+  action: t,
+  className: a,
+  children: n,
+  ...s
 }) {
-  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__ */ c.jsx("div", { className: h("flex flex-col gap-4 pb-4 md:pb-8", a), ...s, children: /* @__PURE__ */ c.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ c.jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ c.jsx("h1", { className: "text-2xl font-bold tracking-tight md:text-3xl", children: r }),
+      l && /* @__PURE__ */ c.jsx("p", { className: "text-sm text-muted-foreground", children: l })
     ] }),
-    (c || s) && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-      c,
-      s
+    (t || n) && /* @__PURE__ */ c.jsxs("div", { className: "flex items-center gap-2", children: [
+      t,
+      n
     ] })
   ] }) });
 }
-function he({
-  sidebar: a,
-  navbar: u,
-  children: c,
-  className: f,
-  defaultOpen: s = !0
+function U(r) {
+  const l = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
+  if (!l) return null;
+  const t = parseInt(l[1], 16) / 255, a = parseInt(l[2], 16) / 255, n = parseInt(l[3], 16) / 255, s = Math.max(t, a, n), f = Math.min(t, a, n);
+  let m = 0, g = 0;
+  const E = (s + f) / 2;
+  if (s !== f) {
+    const p = s - f;
+    switch (g = E > 0.5 ? p / (2 - s - f) : p / (s + f), s) {
+      case t:
+        m = ((a - n) / p + (a < n ? 6 : 0)) / 6;
+        break;
+      case a:
+        m = ((n - t) / p + 2) / 6;
+        break;
+      case n:
+        m = ((t - a) / p + 4) / 6;
+        break;
+    }
+  }
+  return `${Math.round(m * 360)} ${Math.round(g * 100)}% ${Math.round(E * 100)}%`;
+}
+function Re(r, l) {
+  se(() => {
+    const t = document.documentElement;
+    if (r?.primaryColor) {
+      const a = U(r.primaryColor);
+      a && (t.style.setProperty("--brand-primary", r.primaryColor), t.style.setProperty("--brand-primary-hsl", a));
+    } else
+      t.style.removeProperty("--brand-primary"), t.style.removeProperty("--brand-primary-hsl");
+    if (r?.accentColor) {
+      const a = U(r.accentColor);
+      a && (t.style.setProperty("--brand-accent", r.accentColor), t.style.setProperty("--brand-accent-hsl", a));
+    } else
+      t.style.removeProperty("--brand-accent"), t.style.removeProperty("--brand-accent-hsl");
+    if (r?.favicon) {
+      const a = document.querySelector("#favicon") || document.querySelector('link[rel="icon"]');
+      a && (a.href = r.favicon);
+    }
+    return l && (document.title = l), () => {
+      t.style.removeProperty("--brand-primary"), t.style.removeProperty("--brand-primary-hsl"), t.style.removeProperty("--brand-accent"), t.style.removeProperty("--brand-accent-hsl");
+    };
+  }, [r?.primaryColor, r?.accentColor, r?.favicon, l]);
+}
+function je({
+  sidebar: r,
+  navbar: l,
+  children: t,
+  className: a,
+  defaultOpen: n = !0,
+  branding: s
 }) {
-  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 Re(s, s?.title), /* @__PURE__ */ c.jsxs(ne, { defaultOpen: n, children: [
+    r,
+    /* @__PURE__ */ c.jsxs(le, { children: [
+      /* @__PURE__ */ c.jsxs("header", { className: "flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: [
+        /* @__PURE__ */ c.jsx(ce, { className: "-ml-1" }),
+        /* @__PURE__ */ c.jsx("div", { className: "w-px h-4 bg-border mx-1 sm:mx-2" }),
+        l
       ] }),
-      /* @__PURE__ */ t.jsx("main", { className: h("flex-1 overflow-auto p-4 md:p-6", f), children: c })
+      /* @__PURE__ */ c.jsx("main", { className: h("flex-1 overflow-auto p-3 sm:p-4 md:p-6", a), children: t })
     ] })
   ] });
 }
-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 Se({ className: r, children: l, ...t }) {
+  return /* @__PURE__ */ c.jsx("div", { className: h("rounded-xl border bg-card text-card-foreground shadow", r), ...t, children: /* @__PURE__ */ c.jsx("div", { className: "p-6", children: l }) });
+}
+const Te = {
+  xs: { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4", 6: "grid-cols-6", 12: "grid-cols-12" },
+  sm: { 1: "sm:grid-cols-1", 2: "sm:grid-cols-2", 3: "sm:grid-cols-3", 4: "sm:grid-cols-4", 6: "sm:grid-cols-6", 12: "sm:grid-cols-12" },
+  md: { 1: "md:grid-cols-1", 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4", 6: "md:grid-cols-6", 12: "md:grid-cols-12" },
+  lg: { 1: "lg:grid-cols-1", 2: "lg:grid-cols-2", 3: "lg:grid-cols-3", 4: "lg:grid-cols-4", 6: "lg:grid-cols-6", 12: "lg:grid-cols-12" },
+  xl: { 1: "xl:grid-cols-1", 2: "xl:grid-cols-2", 3: "xl:grid-cols-3", 4: "xl:grid-cols-4", 6: "xl:grid-cols-6", 12: "xl:grid-cols-12" },
+  "2xl": { 1: "2xl:grid-cols-1", 2: "2xl:grid-cols-2", 3: "2xl:grid-cols-3", 4: "2xl:grid-cols-4", 6: "2xl:grid-cols-6", 12: "2xl:grid-cols-12" }
+};
+function Pe(r) {
+  if (!r) return "grid-cols-1";
+  const l = [];
+  for (const [t, a] of Object.entries(r)) {
+    const n = Te[t];
+    if (n && a) {
+      const f = Object.keys(n).map(Number).reduce(
+        (m, g) => Math.abs(g - a) < Math.abs(m - a) ? g : m
+      );
+      l.push(n[f]);
+    }
+  }
+  return l.join(" ") || "grid-cols-1";
+}
+const ke = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  8: "gap-8"
+}, Ae = ({
+  columns: r,
+  gap: l = 4,
+  className: t,
+  children: a
+}) => {
+  const n = Pe(r), s = typeof l == "number" ? ke[l] || `gap-${l}` : "";
+  return /* @__PURE__ */ c.jsx("div", { className: h("grid", n, s, t), children: a });
+}, Ce = (r) => r ? Array.isArray(r) ? r : [r] : [];
+function Ie({ schema: r, className: l, style: t, id: a, ...n }) {
+  const s = Ce(r.children);
+  return /* @__PURE__ */ c.jsxs(
     "div",
     {
-      id: f || a.id,
-      className: h("flex flex-col h-full space-y-4", u),
-      style: c,
+      id: a || r.id,
+      className: h("flex flex-col h-full space-y-4", l),
+      style: t,
       children: [
-        /* @__PURE__ */ t.jsx(
-          A,
+        /* @__PURE__ */ c.jsx(
+          N,
           {
-            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(
+        /* @__PURE__ */ c.jsx("div", { className: "flex-1 overflow-auto", children: s.map((f, m) => /* @__PURE__ */ c.jsx(
           be,
           {
-            schema: d,
-            ...s
+            schema: f,
+            ...n
           },
-          d?.id || m
+          f?.id || m
         )) })
       ]
     }
   );
 }
-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 Ye({ items: r, title: l = "Application", className: t, collapsible: a = "icon" }) {
+  const n = ye();
+  return /* @__PURE__ */ c.jsx(ie, { className: t, collapsible: a, children: /* @__PURE__ */ c.jsx(ue, { children: /* @__PURE__ */ c.jsxs(de, { children: [
+    /* @__PURE__ */ c.jsx(fe, { children: l }),
+    /* @__PURE__ */ c.jsx(me, { children: /* @__PURE__ */ c.jsx(pe, { children: r.map((s) => /* @__PURE__ */ c.jsx(ge, { children: /* @__PURE__ */ c.jsx(xe, { asChild: !0, isActive: n.pathname === s.href, children: /* @__PURE__ */ c.jsxs(ve, { to: s.href, children: [
+      s.icon && /* @__PURE__ */ c.jsx(s.icon, {}),
+      /* @__PURE__ */ c.jsx("span", { children: s.title })
+    ] }) }) }, s.href)) }) })
   ] }) }) });
 }
-function Se() {
-  b.register("page-header", A, {
+function Ne() {
+  b.register("page-header", N, {
+    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, {
+  }), b.register("page:header", N, { namespace: "layout" }), b.register("page:card", Se, {
+    namespace: "layout",
     label: "Page Card",
     category: "Layout",
     isContainer: !0
-  }), b.register("app-shell", he, {
+  }), b.register("app-shell", je, {
+    namespace: "layout",
     label: "App Shell",
     category: "Layout"
-  }), b.register("page", je, {
-    label: "Standard Page",
+  }), b.register("responsive-grid", Ae, {
+    namespace: "layout",
+    label: "Responsive Grid",
     category: "Layout",
-    isContainer: !0
+    isContainer: !0,
+    inputs: [
+      { name: "columns", type: "object" },
+      { name: "gap", type: "number" }
+    ]
   });
 }
 try {
-  Se();
+  Ne();
 } catch {
 }
 export {
-  he as AppShell,
-  je as Page,
-  Te as PageCard,
-  A as PageHeader,
-  Oe as SidebarNav,
-  Se as registerLayout
+  je as AppShell,
+  Ie as Page,
+  Se as PageCard,
+  N as PageHeader,
+  Ae as ResponsiveGrid,
+  Ye as SidebarNav,
+  Ne as registerLayout,
+  Re as useAppShellBranding
 };