@object-ui/layout 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,122 @@
+# @object-ui/layout
+
+Layout components for Object UI - provides application shell components for building structured layouts with React Router integration.
+
+## Features
+
+- **Application Shell** - Complete app layout structure with header, sidebar, and content areas
+- **Page Components** - Standard page layouts with headers and content sections
+- **Navigation** - Sidebar navigation with React Router integration
+- **Responsive** - Mobile-friendly layouts with collapsible sidebars
+- **Tailwind Native** - Built with Tailwind CSS for easy customization
+
+## Installation
+
+```bash
+pnpm add @object-ui/layout
+```
+
+**Peer Dependencies:**
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `react-router-dom` >= 6.0.0
+
+## Components
+
+### AppShell
+
+Complete application shell with header, sidebar, and main content area.
+
+```typescript
+import { AppShell } from '@object-ui/layout';
+
+<AppShell
+  header={<div>Header Content</div>}
+  sidebar={<div>Sidebar Content</div>}
+>
+  <div>Main Content</div>
+</AppShell>
+```
+
+### Page
+
+Standard page layout with optional header section.
+
+```typescript
+import { Page, PageHeader } from '@object-ui/layout';
+
+<Page>
+  <PageHeader title="Dashboard" description="View your metrics" />
+  <div>Page Content</div>
+</Page>
+```
+
+### SidebarNav
+
+Navigation sidebar component with React Router integration.
+
+```typescript
+import { SidebarNav } from '@object-ui/layout';
+
+const navItems = [
+  { label: 'Dashboard', path: '/dashboard', icon: 'home' },
+  { label: 'Users', path: '/users', icon: 'users' },
+  { label: 'Settings', path: '/settings', icon: 'settings' }
+];
+
+<SidebarNav items={navItems} />
+```
+
+## Usage with React Router
+
+The layout components are designed to work seamlessly with React Router:
+
+```typescript
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { AppShell, SidebarNav } from '@object-ui/layout';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <AppShell
+        header={<div className="p-4">My App</div>}
+        sidebar={
+          <SidebarNav
+            items={[
+              { label: 'Dashboard', path: '/', icon: 'home' },
+              { label: 'Users', path: '/users', icon: 'users' }
+            ]}
+          />
+        }
+      >
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/users" element={<Users />} />
+        </Routes>
+      </AppShell>
+    </BrowserRouter>
+  );
+}
+```
+
+## Customization
+
+All components accept `className` prop for Tailwind customization:
+
+```typescript
+<AppShell
+  className="bg-gray-50"
+  headerClassName="border-b"
+  sidebarClassName="bg-white shadow-lg"
+>
+  {children}
+</AppShell>
+```
+
+## API Reference
+
+For detailed API documentation, visit the [Object UI Documentation](https://www.objectui.org/docs/layout).
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './layout/src/index'
+export {}

package/dist/index.js

@@ -0,0 +1,362 @@
+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
+    };
+  }
+  return b.Fragment = u, b.jsx = i, b.jsxs = i, b;
+}
+var x = {};
+var M;
+function Ee() {
+  return M || (M = 1, process.env.NODE_ENV !== "production" && (function() {
+    function n(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === ee ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case R:
+          return "Fragment";
+        case V:
+          return "Profiler";
+        case J:
+          return "StrictMode";
+        case B:
+          return "Suspense";
+        case Z:
+          return "SuspenseList";
+        case K:
+          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:
+            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;
+            try {
+              return n(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function u(e) {
+      return "" + e;
+    }
+    function i(e) {
+      try {
+        u(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
+        ), u(e);
+      }
+    }
+    function c(e) {
+      if (e === R) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === g)
+        return "<...>";
+      try {
+        var r = n(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = j.A;
+      return e === null ? null : e.getOwner();
+    }
+    function f() {
+      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;
+      }
+      return e.key !== void 0;
+    }
+    function p(e, r) {
+      function o() {
+        C || (C = !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 U() {
+      var e = n(this.type);
+      return Y[e] || (Y[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;
+      return e = {
+        $$typeof: O,
+        type: e,
+        key: r,
+        props: o,
+        _owner: s
+      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: U
+      }) : 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: _
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: S
+      }), 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);
+          } 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";
+        });
+        s = 0 < d.length ? "{key: someKey, " + d.join(": ..., ") + ": ...}" : "{key: someKey}", $[l + s] || (d = 0 < d.length ? "{" + d.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);
+      }
+      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,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), G(
+        e,
+        l,
+        o,
+        a(),
+        _,
+        S
+      );
+    }
+    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 P(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === O;
+    }
+    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() {
+      return null;
+    };
+    v = {
+      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(
+        e,
+        r,
+        o,
+        !1,
+        s ? Error("react-stack-top-frame") : L,
+        s ? T(c(e)) : I
+      );
+    }, x.jsxs = function(e, r, o) {
+      var s = 1e4 > j.recentlyCreatedOwnerStacks++;
+      return A(
+        e,
+        r,
+        o,
+        !0,
+        s ? Error("react-stack-top-frame") : L,
+        s ? T(c(e)) : I
+      );
+    };
+  })()), x;
+}
+var D;
+function he() {
+  return D || (D = 1, process.env.NODE_ENV === "production" ? h.exports = _e() : h.exports = Ee()), h.exports;
+}
+var t = he();
+function k({
+  title: n,
+  description: u,
+  action: i,
+  className: c,
+  children: a,
+  ...f
+}) {
+  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 })
+    ] }),
+    (i || a) && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
+      i,
+      a
+    ] })
+  ] }) });
+}
+function Re({
+  sidebar: n,
+  navbar: u,
+  children: i,
+  className: c,
+  defaultOpen: a = !0
+}) {
+  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
+      ] }),
+      /* @__PURE__ */ t.jsx("main", { className: W("flex-1 overflow-auto p-4 md:p-6", c), children: i })
+    ] })
+  ] });
+}
+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 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 Te() {
+  E.register("page-header", k, {
+    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",
+    category: "Layout",
+    isContainer: !0
+  });
+}
+try {
+  Te();
+} catch {
+}
+export {
+  Re as AppShell,
+  je as Page,
+  k as PageHeader,
+  Pe as SidebarNav,
+  Te as registerLayout
+};

package/dist/index.umd.cjs

@@ -0,0 +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:
+  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"})}));

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface AppShellProps {
+    sidebar?: React.ReactNode;
+    navbar?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    defaultOpen?: boolean;
+}
+export declare function AppShell({ sidebar, navbar, children, className, defaultOpen, }: AppShellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { PageSchema } from '../../types/src';
+export declare function Page({ schema, ...props }: {
+    schema: PageSchema;
+} & any): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+export declare function PageHeader({ title, description, action, className, children, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface NavItem {
+    title: string;
+    href: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+}
+export interface SidebarNavProps {
+    items: NavItem[];
+    title?: string;
+    className?: string;
+}
+export declare function SidebarNav({ items, title, className }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+/**
+ * ObjectUI Layout
+ * Copyright (c) 2024-present ObjectStack Inc.
+ */
+export * from './PageHeader';
+export * from './AppShell';
+export * from './Page';
+export * from './SidebarNav';
+export declare function registerLayout(): void;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@object-ui/layout",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.563.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.1",
+    "@object-ui/components": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "react-router-dom": "^7.13.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint ."
+  }
+}

package/src/AppShell.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  SidebarProvider,
+  SidebarTrigger,
+  SidebarInset,
+  Sidebar
+} from '@object-ui/components';
+import { cn } from '@object-ui/components';
+
+export interface AppShellProps {
+  sidebar?: React.ReactNode;
+  navbar?: React.ReactNode; // Top navbar content
+  children: React.ReactNode;
+  className?: string;
+  defaultOpen?: boolean;
+}
+
+export function AppShell({
+  sidebar,
+  navbar,
+  children,
+  className,
+  defaultOpen = true,
+}: AppShellProps) {
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      {sidebar}
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <SidebarTrigger className="-ml-1" />
+          <div className="w-px h-4 bg-border mx-2" />
+          {navbar}
+        </header>
+        <main className={cn("flex-1 overflow-auto p-4 md:p-6", className)}>
+          {children}
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/src/Page.tsx

@@ -0,0 +1,34 @@
+// packages/layout/src/Page.tsx
+import React from 'react';
+import { SchemaRenderer } from '@object-ui/react';
+import { PageSchema, SchemaNode } from '@object-ui/types';
+import { PageHeader } from './PageHeader';
+
+// Helper to ensure children is always an array
+const getChildren = (children?: SchemaNode[] | SchemaNode): SchemaNode[] => {
+  if (!children) return [];
+  if (Array.isArray(children)) return children;
+  return [children];
+};
+
+export function Page({ schema, ...props }: { schema: PageSchema } & any) {
+  const children = getChildren(schema.children);
+
+  return (
+    <div className="flex flex-col h-full space-y-4">
+      <PageHeader 
+        title={schema.title} 
+        description={schema.description} 
+      />
+      <div className="flex-1 overflow-auto">
+        {children.map((child: any, index: number) => (
+           <SchemaRenderer 
+             key={child?.id || index} 
+             schema={child} 
+             {...props} 
+            />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/PageHeader.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { cn } from '@object-ui/components';
+
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+
+export function PageHeader({ 
+    title, 
+    description, 
+    action,
+    className, 
+    children, 
+    ...props 
+}: PageHeaderProps) {
+    return (
+        <div className={cn("flex flex-col gap-4 pb-4 md:pb-8", className)} {...props}>
+            <div className="flex items-center justify-between gap-4">
+                <div className="flex flex-col gap-1">
+                    <h1 className="text-2xl font-bold tracking-tight md:text-3xl">{title}</h1>
+                    {description && <p className="text-sm text-muted-foreground">{description}</p>}
+                </div>
+                {/* Render children (actions) in the top-right slot if available */}
+                {(action || children) && (
+                    <div className="flex items-center gap-2">
+                        {action}
+                        {children}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/SidebarNav.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { 
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+} from '@object-ui/components';
+
+export interface NavItem {
+  title: string;
+  href: string;
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
+export interface SidebarNavProps {
+    items: NavItem[];
+    title?: string;
+    className?: string;
+}
+
+export function SidebarNav({ items, title = "Application", className }: SidebarNavProps) {
+  const location = useLocation();
+
+  return (
+    <Sidebar className={className}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>{title}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.href}>
+                  <SidebarMenuButton asChild isActive={location.pathname === item.href}>
+                    <NavLink to={item.href}>
+                      {item.icon && <item.icon />}
+                      <span>{item.title}</span>
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}

package/src/index.ts

@@ -0,0 +1,48 @@
+/**
+ * ObjectUI Layout
+ * Copyright (c) 2024-present ObjectStack Inc.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import { PageHeader } from './PageHeader';
+import { AppShell } from './AppShell';
+import { Page } from './Page';
+import { SidebarNav } from './SidebarNav';
+
+export * from './PageHeader';
+export * from './AppShell';
+export * from './Page';
+export * from './SidebarNav';
+
+export function registerLayout() {
+  ComponentRegistry.register('page-header', PageHeader, {
+      label: 'Page Header',
+      category: 'Layout',
+      inputs: [
+          { name: 'title', type: 'string' },
+          { name: 'description', type: 'string' }
+      ]
+  });
+
+  // Alias for protocol compliance
+  ComponentRegistry.register('page:header', PageHeader);
+
+  ComponentRegistry.register('app-shell', AppShell, {
+      label: 'App Shell',
+      category: 'Layout',
+  });
+
+  // Core Page Renderer
+  ComponentRegistry.register('page', Page, {
+    label: 'Standard Page',
+    category: 'Layout',
+    isContainer: true
+  });
+}
+
+// Keep backward compatibility for now if called directly
+try {
+  registerLayout();
+} catch (e) {
+  // Ignore registration errors during build/test cycles
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'ObjectUILayout',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        '@object-ui/components',
+        '@object-ui/core',
+        '@object-ui/react',
+        '@object-ui/types',
+        'clsx',
+        'tailwind-merge',
+        'lucide-react',
+        'react-router-dom'
+      ],
+    },
+  },
+});