@tailor-platform/app-shell 0.27.1 → 0.27.3

package/README.md

@@ -0,0 +1,26 @@
+# @tailor-platform/app-shell
+
+[![npm version](https://img.shields.io/npm/v/@tailor-platform/app-shell)](https://www.npmjs.com/package/@tailor-platform/app-shell)
+[![npm downloads](https://img.shields.io/npm/dm/@tailor-platform/app-shell)](https://www.npmjs.com/package/@tailor-platform/app-shell)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/tailor-platform/app-shell/blob/main/LICENSE.md)
+
+An opinionated React application framework for creating applications on Tailor Platform.
+
+## Why AppShell?
+
+We've made sensible default choices so you can focus on what matters most — building business-level screens. The alternative is implementing authentication, routing, navigation, layouts, and theming all by yourself. AppShell handles all of that out of the box, designed primarily for Vite-based React applications that can be deployed to Tailor Platform's static hosting.
+
+- **Routing** — Declarative module/resource definitions or [file-based routing](https://www.npmjs.com/package/@tailor-platform/app-shell-vite-plugin) with automatic sidebar navigation and breadcrumbs
+- **Authentication** — Built-in OAuth2/OIDC integration with Tailor Platform
+- **Responsive layouts** — Sidebar, column layouts (1/2/3), and mobile support out of the box
+- **Command Palette** — Keyboard-driven quick navigation (`Cmd+K`)
+- **Route Guards** — Access control with `pass()`, `hidden()`, `redirectTo()`
+- **ERP components** — Badge, DescriptionCard, and more for common business UI patterns
+- **i18n** — Built-in internationalization with auto locale detection
+- **Theming** — Light/dark mode with Tailwind CSS
+- **Portable** — Built on react-router for full portability across React frameworks
+
+## Documentation
+
+- [Quick Start](https://github.com/tailor-platform/app-shell/blob/main/docs/quickstart.md) — Installation, setup, and first steps
+- [API Reference](https://github.com/tailor-platform/app-shell/blob/main/docs/api.md) — Complete reference for all components, hooks, and functions

package/dist/app-shell.d.ts

@@ -850,7 +850,7 @@ declare type LabelValue = string | ((props: any) => string);
  * </Layout>
  * ```
  */
-export declare function Layout({ columns, className, gap, title, actions, children, }: LayoutProps): JSX.Element;
+export declare function Layout({ columns, className, gap, title, actions, children }: LayoutProps): JSX.Element;
 
 export declare namespace Layout {
     var Column: React_2.ForwardRefExoticComponent<ColumnProps & React_2.RefAttributes<HTMLDivElement>>;

package/dist/app-shell.js

@@ -281,10 +281,7 @@ function $s(t) {
     throw new Error(
       `Module "${e}" has no component. Either provide a \`component\` or use \`guards\` with \`redirectTo()\` or \`hidden()\` to control access. A guard that only returns \`pass()\` without a component will result in a blank page.`
     );
-  const w = i && i.length > 0 ? Vt(i) : void 0, d = r ? Ht(
-    { metaTitle: l, fallbackTitle: u },
-    (h) => r({ title: h, resources: n })
-  ) : void 0;
+  const w = i && i.length > 0 ? Vt(i) : void 0, d = r ? Ht({ metaTitle: l, fallbackTitle: u }, (h) => r({ title: h, resources: n })) : void 0;
   return {
     path: e,
     type: "component",
@@ -374,9 +371,7 @@ const Oe = () => {
       children: [n]
     } : {}
   };
-}, Ue = (t) => t.map(
-  (e) => Gt(e, e.resources, e.errorBoundary)
-), Ke = ({
+}, Ue = (t) => t.map((e) => Gt(e, e.resources, e.errorBoundary)), Ke = ({
   modules: t,
   settingsResources: e,
   rootComponent: s
@@ -388,14 +383,7 @@ const Oe = () => {
     {
       path: "settings",
       index: !0,
-      Component: () => /* @__PURE__ */ a(
-        pe,
-        {
-          to: e[0].path,
-          relative: "path",
-          replace: !0
-        }
-      )
+      Component: () => /* @__PURE__ */ a(pe, { to: e[0].path, relative: "path", replace: !0 })
     },
     {
       path: "settings",
@@ -450,11 +438,7 @@ const Oe = () => {
 }, Yt = async (t, e, s) => (await Promise.all(
   t.map(async (n) => {
     if (n.path.startsWith(":") || (await ut(n.guards)).type !== "pass") return null;
-    const i = `${e}/${n.path}`, l = s(n.meta.title, n.path), u = n.subResources ? await Yt(
-      n.subResources,
-      i,
-      s
-    ) : void 0;
+    const i = `${e}/${n.path}`, l = s(n.meta.title, n.path), u = n.subResources ? await Yt(n.subResources, i, s) : void 0;
     return {
       title: l,
       url: i,
@@ -523,17 +507,12 @@ function Qe({
 }
 const Ye = () => {
   const t = L(Xt);
-  if (t === void 0)
-    throw new Error("useTheme must be used within a ThemeProvider");
+  if (t === void 0) throw new Error("useTheme must be used within a ThemeProvider");
   return t;
 }, Xe = () => () => {
 }, Ze = () => !0, Je = () => !1;
 function ta() {
-  return Wt(
-    Xe,
-    Ze,
-    Je
-  );
+  return Wt(Xe, Ze, Je);
 }
 function ea(t) {
   const e = {
@@ -631,13 +610,7 @@ const te = (t) => {
       errorBoundary: t.errorBoundary,
       locale: t.locale
     }) : null,
-    [
-      r,
-      t.settingsResources,
-      t.basePath,
-      t.errorBoundary,
-      t.locale
-    ]
+    [r, t.settingsResources, t.basePath, t.errorBoundary, t.locale]
   ), o = B(
     () => n ? { title: t.title, icon: t.icon, configurations: n } : null,
     [t.title, t.icon, n]
@@ -668,9 +641,7 @@ function sa(t) {
 te.WithPages = sa;
 const J = 768;
 function ra() {
-  const [t, e] = f.useState(
-    void 0
-  );
+  const [t, e] = f.useState(void 0);
   return f.useEffect(() => {
     const s = window.matchMedia(`(max-width: ${J - 1}px)`), r = () => {
       e(window.innerWidth < J);
@@ -680,9 +651,7 @@ function ra() {
 }
 const tt = 768, et = 1199;
 function na() {
-  const [t, e] = f.useState(
-    void 0
-  );
+  const [t, e] = f.useState(void 0);
   return f.useEffect(() => {
     const s = window.matchMedia(
       `(min-width: ${tt}px) and (max-width: ${et}px)`
@@ -737,15 +706,10 @@ function ia({
 function Ct({ ...t }) {
   return /* @__PURE__ */ a(v.Root, { "data-slot": "sheet", ...t });
 }
-function la({
-  ...t
-}) {
+function la({ ...t }) {
   return /* @__PURE__ */ a(v.Portal, { "data-slot": "sheet-portal", ...t });
 }
-function ca({
-  className: t,
-  ...e
-}) {
+function ca({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     v.Backdrop,
     {
@@ -800,10 +764,7 @@ function kt({ className: t, ...e }) {
     }
   );
 }
-function Rt({
-  className: t,
-  ...e
-}) {
+function Rt({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     v.Title,
     {
@@ -831,22 +792,12 @@ function mt({
   children: e,
   ...s
 }) {
-  return /* @__PURE__ */ a(
-    A.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delay: t,
-      ...s,
-      children: e
-    }
-  );
+  return /* @__PURE__ */ a(A.Provider, { "data-slot": "tooltip-provider", delay: t, ...s, children: e });
 }
 function ht({ children: t, ...e }) {
   return /* @__PURE__ */ a(mt, { children: /* @__PURE__ */ a(A.Root, { "data-slot": "tooltip", ...e, children: t }) });
 }
-function pt({
-  ...t
-}) {
+function pt({ ...t }) {
   return /* @__PURE__ */ a(A.Trigger, { "data-slot": "tooltip-trigger", ...t });
 }
 function ft({
@@ -954,15 +905,7 @@ function ha({
   children: n,
   ...o
 }) {
-  const {
-    isMobile: i,
-    state: l,
-    openMobile: u,
-    setOpenMobile: w,
-    isIconMode: d,
-    openIconMode: h,
-    setOpenIconMode: p
-  } = K();
+  const { isMobile: i, state: l, openMobile: u, setOpenMobile: w, isIconMode: d, openIconMode: h, setOpenIconMode: p } = K();
   return s === "none" ? /* @__PURE__ */ a(
     "div",
     {
@@ -1108,11 +1051,7 @@ function ha({
     }
   );
 }
-function se({
-  className: t,
-  onClick: e,
-  ...s
-}) {
+function se({ className: t, onClick: e, ...s }) {
   const { toggleSidebar: r } = K();
   return /* @__PURE__ */ c(
     O,
@@ -1154,18 +1093,12 @@ function fa({ className: t, ...e }) {
     {
       "data-slot": "sidebar-header",
       "data-sidebar": "header",
-      className: m(
-        "astw:flex astw:flex-row astw:items-center astw:gap-0.5 astw:p-2",
-        t
-      ),
+      className: m("astw:flex astw:flex-row astw:items-center astw:gap-0.5 astw:p-2", t),
       ...e
     }
   );
 }
-function ga({
-  className: t,
-  ...e
-}) {
+function ga({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     ia,
     {
@@ -1210,10 +1143,7 @@ function bt({ className: t, ...e }) {
     {
       "data-slot": "sidebar-menu",
       "data-sidebar": "menu",
-      className: m(
-        "astw:flex astw:w-full astw:min-w-0 astw:flex-col astw:gap-1",
-        t
-      ),
+      className: m("astw:flex astw:w-full astw:min-w-0 astw:flex-col astw:gap-1", t),
       ...e
     }
   );
@@ -1331,10 +1261,7 @@ function at({ className: t, ...e }) {
     }
   );
 }
-function va({
-  className: t,
-  ...e
-}) {
+function va({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "li",
     {
@@ -1386,12 +1313,7 @@ const Na = (t) => {
         title: r(o.meta.title, o.path),
         icon: o.meta.icon
       };
-    const l = ne(
-      n,
-      i,
-      o.resources,
-      r
-    );
+    const l = ne(n, i, o.resources, r);
     if (l)
       return l;
   }
@@ -1399,9 +1321,7 @@ const Na = (t) => {
 }, re = (t, e) => {
   if (t === e) return !0;
   const s = t.split("/"), r = e.split("/");
-  return s.length !== r.length ? !1 : r.every(
-    (n, o) => n.startsWith(":") || n === s[o]
-  );
+  return s.length !== r.length ? !1 : r.every((n, o) => n.startsWith(":") || n === s[o]);
 }, At = (t) => {
   let e = t;
   return e.startsWith("/") || (e = `/${e}`), e.length > 1 && e.endsWith("/") && (e = e.slice(0, -1)), e;
@@ -1414,12 +1334,7 @@ const Na = (t) => {
         icon: n.meta.icon
       };
     if (n.subResources) {
-      const i = ne(
-        t,
-        o,
-        n.subResources,
-        r
-      );
+      const i = ne(t, o, n.subResources, r);
       if (i)
         return i;
     }
@@ -1484,19 +1399,13 @@ const Na = (t) => {
   const e = t.split("/").filter(Boolean);
   return (e[e.length - 1] ?? t).split("-").map((r) => r.charAt(0).toUpperCase() + r.slice(1)).join(" ");
 };
-function st({
-  ...t
-}) {
+function st({ ...t }) {
   return /* @__PURE__ */ a(lt.Root, { "data-slot": "collapsible", ...t });
 }
-function Q({
-  ...t
-}) {
+function Q({ ...t }) {
   return /* @__PURE__ */ a(lt.Trigger, { "data-slot": "collapsible-trigger", ...t });
 }
-function rt({
-  ...t
-}) {
+function rt({ ...t }) {
   return /* @__PURE__ */ a(lt.Panel, { "data-slot": "collapsible-content", ...t });
 }
 const Os = (t) => {
@@ -1553,16 +1462,7 @@ const Os = (t) => {
 }, js = () => /* @__PURE__ */ a(ga, {}), ka = (t) => {
   const { title: e, icon: s } = C(), { pathname: r } = Y(), { isIconMode: n } = K(), o = /* @__PURE__ */ c(fa, { children: [
     s,
-    /* @__PURE__ */ a(
-      "h1",
-      {
-        className: m(
-          "astw:text-sm astw:mb-2 astw:mt-2 astw:px-2",
-          n && "astw:hidden"
-        ),
-        children: e
-      }
-    )
+    /* @__PURE__ */ a("h1", { className: m("astw:text-sm astw:mb-2 astw:mt-2 astw:px-2", n && "astw:hidden"), children: e })
   ] });
   return /* @__PURE__ */ c(ha, { variant: "inset", collapsible: n ? "icon" : "offcanvas", children: [
     !n && /* @__PURE__ */ c("div", { className: "astw:flex astw:justify-between astw:items-center", children: [
@@ -1583,81 +1483,66 @@ const Os = (t) => {
   return /* @__PURE__ */ a(zt, { resolve: e, children: (s) => /* @__PURE__ */ a(Pa, { items: s ?? [], currentPath: t }) });
 }, Pa = (t) => {
   const e = E();
-  return /* @__PURE__ */ a(gt, { children: /* @__PURE__ */ a(bt, { children: t.items.map((s) => /* @__PURE__ */ c(
-    st,
-    {
-      render: /* @__PURE__ */ a(I, {}),
-      defaultOpen: !0,
-      children: [
-        s.url ? /* @__PURE__ */ c(S, { children: [
-          /* @__PURE__ */ c(
-            z,
-            {
-              render: /* @__PURE__ */ a(
-                $,
-                {
-                  to: s.url,
-                  className: s.url === t.currentPath ? "astw:bg-sidebar-accent astw:font-medium" : void 0
-                }
-              ),
-              tooltip: s.title,
-              children: [
-                s.icon,
-                /* @__PURE__ */ a("span", { children: s.title })
-              ]
-            }
-          ),
-          !!s.items?.length && /* @__PURE__ */ c(
-            Q,
-            {
-              render: /* @__PURE__ */ a(q, { className: "astw:data-panel-open:rotate-90" }),
-              children: [
-                /* @__PURE__ */ a(W, {}),
-                /* @__PURE__ */ a("span", { className: "astw:sr-only", children: e("toggle") })
-              ]
-            }
-          )
-        ] }) : /* @__PURE__ */ a(S, { children: /* @__PURE__ */ c(Q, { className: "astw:flex astw:w-full astw:[&[data-panel-open]_.astw-rotate-target]:rotate-90", children: [
-          /* @__PURE__ */ c(
-            z,
+  return /* @__PURE__ */ a(gt, { children: /* @__PURE__ */ a(bt, { children: t.items.map((s) => /* @__PURE__ */ c(st, { render: /* @__PURE__ */ a(I, {}), defaultOpen: !0, children: [
+    s.url ? /* @__PURE__ */ c(S, { children: [
+      /* @__PURE__ */ c(
+        z,
+        {
+          render: /* @__PURE__ */ a(
+            $,
             {
-              render: /* @__PURE__ */ a("span", { className: "astw:flex astw:w-full" }),
-              tooltip: s.title,
-              children: [
-                s.icon,
-                /* @__PURE__ */ a("span", { children: s.title })
-              ]
+              to: s.url,
+              className: s.url === t.currentPath ? "astw:bg-sidebar-accent astw:font-medium" : void 0
             }
           ),
-          !!s.items?.length && /* @__PURE__ */ c(
-            q,
-            {
-              className: "astw-rotate-target",
-              render: /* @__PURE__ */ a("span", {}),
-              children: [
-                /* @__PURE__ */ a(W, {}),
-                /* @__PURE__ */ a("span", { className: "astw:sr-only", children: e("toggle") })
-              ]
-            }
-          )
-        ] }) }),
-        !!s.items?.length && /* @__PURE__ */ a(rt, { children: /* @__PURE__ */ a(at, { children: s.items?.map((r) => /* @__PURE__ */ a(va, { children: /* @__PURE__ */ a(
-          ya,
+          tooltip: s.title,
+          children: [
+            s.icon,
+            /* @__PURE__ */ a("span", { children: s.title })
+          ]
+        }
+      ),
+      !!s.items?.length && /* @__PURE__ */ c(
+        Q,
+        {
+          render: /* @__PURE__ */ a(q, { className: "astw:data-panel-open:rotate-90" }),
+          children: [
+            /* @__PURE__ */ a(W, {}),
+            /* @__PURE__ */ a("span", { className: "astw:sr-only", children: e("toggle") })
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ a(S, { children: /* @__PURE__ */ c(Q, { className: "astw:flex astw:w-full astw:[&[data-panel-open]_.astw-rotate-target]:rotate-90", children: [
+      /* @__PURE__ */ c(
+        z,
+        {
+          render: /* @__PURE__ */ a("span", { className: "astw:flex astw:w-full" }),
+          tooltip: s.title,
+          children: [
+            s.icon,
+            /* @__PURE__ */ a("span", { children: s.title })
+          ]
+        }
+      ),
+      !!s.items?.length && /* @__PURE__ */ c(q, { className: "astw-rotate-target", render: /* @__PURE__ */ a("span", {}), children: [
+        /* @__PURE__ */ a(W, {}),
+        /* @__PURE__ */ a("span", { className: "astw:sr-only", children: e("toggle") })
+      ] })
+    ] }) }),
+    !!s.items?.length && /* @__PURE__ */ a(rt, { children: /* @__PURE__ */ a(at, { children: s.items?.map((r) => /* @__PURE__ */ a(va, { children: /* @__PURE__ */ a(
+      ya,
+      {
+        render: /* @__PURE__ */ a(
+          $,
           {
-            render: /* @__PURE__ */ a(
-              $,
-              {
-                to: r.url,
-                className: r.url === t.currentPath ? "astw:bg-sidebar-accent astw:font-medium" : void 0
-              }
-            ),
-            children: /* @__PURE__ */ a("span", { children: r.title })
+            to: r.url,
+            className: r.url === t.currentPath ? "astw:bg-sidebar-accent astw:font-medium" : void 0
           }
-        ) }, r.title)) }) })
-      ]
-    },
-    s.title
-  )) }) });
+        ),
+        children: /* @__PURE__ */ a("span", { children: r.title })
+      }
+    ) }, r.title)) }) })
+  ] }, s.title)) }) });
 }, Aa = [104, 80, 112, 88, 96, 100, 84, 92], Ea = () => /* @__PURE__ */ a(gt, { children: /* @__PURE__ */ a(bt, { className: "astw:px-2", children: Aa.map((t, e) => /* @__PURE__ */ a(I, { children: /* @__PURE__ */ c("div", { className: "astw:flex astw:items-center astw:gap-2 astw:py-1.5", children: [
   /* @__PURE__ */ a("div", { className: "astw:h-4 astw:w-4 astw:rounded-md astw:bg-muted" }),
   /* @__PURE__ */ a(
@@ -1689,10 +1574,7 @@ function Bt({ className: t, ...e }) {
     "li",
     {
       "data-slot": "breadcrumb-item",
-      className: m(
-        "astw:inline-flex astw:items-center astw:gap-1.5",
-        t
-      ),
+      className: m("astw:inline-flex astw:items-center astw:gap-1.5", t),
       ...e
     }
   );
@@ -1704,10 +1586,7 @@ function Dt({
   to: r,
   ...n
 }) {
-  const o = m(
-    "astw:hover:text-foreground astw:transition-colors",
-    e
-  );
+  const o = m("astw:hover:text-foreground astw:transition-colors", e);
   return j({
     defaultTagName: "a",
     render: t ?? /* @__PURE__ */ a($, { to: r }),
@@ -1719,11 +1598,7 @@ function Dt({
     }
   });
 }
-function Ma({
-  children: t,
-  className: e,
-  ...s
-}) {
+function Ma({ children: t, className: e, ...s }) {
   return /* @__PURE__ */ a(
     "li",
     {
@@ -1755,18 +1630,12 @@ const Da = (t, e) => {
       };
       const i = (l, u) => {
         !l || l.length === 0 || l.forEach((w) => {
-          const d = `${u}/${w.path}`, h = s(
-            w.meta.title,
-            w.path
-          );
+          const d = `${u}/${w.path}`, h = s(w.meta.title, w.path);
           r[d] = {
             title: h,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any -- breadcrumbTitle exists at runtime but not in CommonPageResource type
             breadcrumbTitle: w.meta.breadcrumbTitle
-          }, w.subResources && w.subResources.length > 0 && i(
-            w.subResources,
-            d
-          );
+          }, w.subResources && w.subResources.length > 0 && i(w.subResources, d);
         });
       };
       return n.resources && n.resources.length > 0 && i(n.resources, n.path), r;
@@ -1779,12 +1648,10 @@ function La(t, e, s, r) {
     const d = o.slice(0, w + 1).join("/");
     let h = i[d];
     if (!h) {
-      const g = Object.entries(i).find(
-        ([x]) => {
-          const b = x.split("/").map((R) => R.startsWith(":") ? "[^/]+" : R).join("/");
-          return new RegExp(`^${b}$`).test(d);
-        }
-      )?.[1];
+      const g = Object.entries(i).find(([x]) => {
+        const b = x.split("/").map((R) => R.startsWith(":") ? "[^/]+" : R).join("/");
+        return new RegExp(`^${b}$`).test(d);
+      })?.[1];
       g && (h = g);
     }
     let p;
@@ -1841,20 +1708,13 @@ const Ia = () => {
     ] })
   ] }) });
 };
-function $a({
-  ...t
-}) {
+function $a({ ...t }) {
   return /* @__PURE__ */ a(v.Root, { "data-slot": "dialog", ...t });
 }
-function Wa({
-  ...t
-}) {
+function Wa({ ...t }) {
   return /* @__PURE__ */ a(v.Portal, { "data-slot": "dialog-portal", ...t });
 }
-function Fa({
-  className: t,
-  ...e
-}) {
+function Fa({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     v.Backdrop,
     {
@@ -1894,10 +1754,7 @@ function Oa({
     )
   ] });
 }
-function ja({
-  className: t,
-  ...e
-}) {
+function ja({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     v.Title,
     {
@@ -1928,13 +1785,8 @@ function Ua(t) {
     }), s(r.items, r.icon, [r.title]);
   }), e;
 }
-function Ka({
-  routes: t
-}) {
-  const e = ye(), s = Ft(null), [r, n] = H(!1), [o, i] = H(""), [l, u] = H(0), w = B(
-    () => Ba(t, o),
-    [t, o]
-  ), d = M((x) => {
+function Ka({ routes: t }) {
+  const e = ye(), s = Ft(null), [r, n] = H(!1), [o, i] = H(""), [l, u] = H(0), w = B(() => Ba(t, o), [t, o]), d = M((x) => {
     i(x), u(0);
   }, []);
   F(() => {
@@ -1959,9 +1811,7 @@ function Ka({
       if (!x.nativeEvent.isComposing)
         switch (x.key) {
           case "ArrowDown":
-            x.preventDefault(), u(
-              (b) => b < w.length - 1 ? b + 1 : b
-            );
+            x.preventDefault(), u((b) => b < w.length - 1 ? b + 1 : b);
             break;
           case "ArrowUp":
             x.preventDefault(), u((b) => b > 0 ? b - 1 : b);
@@ -1985,9 +1835,7 @@ function Ka({
     listRef: s
   };
 }
-function Va({
-  navItems: t
-}) {
+function Va({ navItems: t }) {
   const e = E(), s = B(() => Ua(t), [t]), {
     open: r,
     handleOpenChange: n,
@@ -2020,32 +1868,25 @@ function Va({
             }
           )
         ] }),
-        /* @__PURE__ */ a(
-          "div",
+        /* @__PURE__ */ a("div", { ref: h, className: "astw:max-h-75 astw:overflow-y-auto astw:overflow-x-hidden", children: u.length === 0 ? /* @__PURE__ */ a("div", { className: "astw:py-6 astw:text-center astw:text-sm astw:text-muted-foreground", children: e("commandPaletteNoResults") }) : /* @__PURE__ */ a("div", { className: "astw:p-1", children: u.map((p, g) => /* @__PURE__ */ c(
+          "button",
           {
-            ref: h,
-            className: "astw:max-h-75 astw:overflow-y-auto astw:overflow-x-hidden",
-            children: u.length === 0 ? /* @__PURE__ */ a("div", { className: "astw:py-6 astw:text-center astw:text-sm astw:text-muted-foreground", children: e("commandPaletteNoResults") }) : /* @__PURE__ */ a("div", { className: "astw:p-1", children: u.map((p, g) => /* @__PURE__ */ c(
-              "button",
-              {
-                "data-index": g,
-                onClick: () => w(p),
-                className: m(
-                  "astw:relative astw:flex astw:flex-col astw:w-full astw:cursor-pointer astw:select-none astw:items-start astw:rounded-sm astw:px-2 astw:py-2 astw:text-sm astw:outline-none astw:text-left",
-                  g === l ? "astw:bg-accent astw:text-accent-foreground" : "astw:hover:bg-accent astw:hover:text-accent-foreground"
-                ),
-                children: [
-                  /* @__PURE__ */ a("span", { className: "astw:truncate astw:w-full astw:text-left", children: p.breadcrumb.join(" > ") }),
-                  /* @__PURE__ */ c("span", { className: "astw:text-[11px] astw:text-muted-foreground astw:truncate astw:w-full astw:text-left", children: [
-                    "/",
-                    p.path
-                  ] })
-                ]
-              },
-              p.path
-            )) })
-          }
-        )
+            "data-index": g,
+            onClick: () => w(p),
+            className: m(
+              "astw:relative astw:flex astw:flex-col astw:w-full astw:cursor-pointer astw:select-none astw:items-start astw:rounded-sm astw:px-2 astw:py-2 astw:text-sm astw:outline-none astw:text-left",
+              g === l ? "astw:bg-accent astw:text-accent-foreground" : "astw:hover:bg-accent astw:hover:text-accent-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ a("span", { className: "astw:truncate astw:w-full astw:text-left", children: p.breadcrumb.join(" > ") }),
+              /* @__PURE__ */ c("span", { className: "astw:text-[11px] astw:text-muted-foreground astw:truncate astw:w-full astw:text-left", children: [
+                "/",
+                p.path
+              ] })
+            ]
+          },
+          p.path
+        )) }) })
       ]
     }
   ) });
@@ -2127,9 +1968,7 @@ const ie = X(null), Gs = (t) => {
       if (new URLSearchParams(window.location.search).has("code"))
         try {
           await e.handleCallback();
-          const w = Ya(
-            new URL(window.location.href)
-          );
+          const w = Ya(new URL(window.location.href));
           window.history.replaceState({}, "", w);
         } catch (w) {
           console.error("Failed to handle callback:", w);
@@ -2157,9 +1996,7 @@ const ie = X(null), Gs = (t) => {
 }, le = () => {
   const t = L(ie);
   if (!t)
-    throw new Error(
-      "useAuth/useAuthSuspense must be used within an AuthProvider"
-    );
+    throw new Error("useAuth/useAuthSuspense must be used within an AuthProvider");
   return t;
 }, qs = () => {
   const t = le(), { isAuthenticated: e, error: s, isReady: r } = t.authState;
@@ -2293,11 +2130,7 @@ function os(t) {
   if (typeof t == "object" && t !== null) {
     const e = t, s = [];
     e.line1 && s.push(String(e.line1)), e.line2 && s.push(String(e.line2));
-    const r = [
-      e.city,
-      e.state || e.province,
-      e.zip || e.postalCode
-    ].filter(Boolean).join(", ");
+    const r = [e.city, e.state || e.province, e.zip || e.postalCode].filter(Boolean).join(", ");
     return r && s.push(r), e.country && s.push(String(e.country)), s;
   }
   return [String(t)];
@@ -2423,14 +2256,7 @@ function ms({ field: t }) {
   if (!r || !s)
     return /* @__PURE__ */ a("span", { className: "astw:text-sm astw:font-medium astw:text-foreground", children: n });
   const o = s.replace("{id}", r);
-  return /* @__PURE__ */ a(
-    "a",
-    {
-      href: o,
-      className: "astw:text-sm astw:text-primary astw:hover:underline",
-      children: n
-    }
-  );
+  return /* @__PURE__ */ a("a", { href: o, className: "astw:text-sm astw:text-primary astw:hover:underline", children: n });
 }
 function Lt(t) {
   switch (t.type) {
@@ -2542,13 +2368,7 @@ function Xs({
           o && /* @__PURE__ */ a("div", { children: o })
         ] }),
         /* @__PURE__ */ a("div", { className: "astw:px-6 astw:pb-4", children: l ? /* @__PURE__ */ a("div", { className: "astw:space-y-4", children: i.map((d, h) => /* @__PURE__ */ c(f.Fragment, { children: [
-          h > 0 && /* @__PURE__ */ a(
-            "div",
-            {
-              className: "astw:h-px astw:bg-border",
-              role: "separator"
-            }
-          ),
+          h > 0 && /* @__PURE__ */ a("div", { className: "astw:h-px astw:bg-border", role: "separator" }),
           w(d)
         ] }, d.id)) }) : /* @__PURE__ */ a("p", { className: "astw:text-sm astw:text-muted-foreground", children: "No information available" }) })
       ]
@@ -2567,14 +2387,7 @@ const xt = f.forwardRef(
   )
 );
 xt.displayName = "Layout.Column";
-function bs({
-  columns: t,
-  className: e,
-  gap: s = 4,
-  title: r,
-  actions: n,
-  children: o
-}) {
+function bs({ columns: t, className: e, gap: s = 4, title: r, actions: n, children: o }) {
   if (process.env.NODE_ENV !== "production") {
     const h = f.Children.toArray(o).reduce((p, g) => f.isValidElement(g) && g.type === xt ? p + 1 : p, 0);
     if (h !== t)
@@ -2589,16 +2402,10 @@ function bs({
     t === 1 && "astw:flex-col",
     // 2 columns: Stack on mobile, side-by-side on desktop (lg: ≥1024px)
     // Main column flexible, side column fixed 360px
-    t === 2 && [
-      "astw:flex-col",
-      "astw:lg:flex-row"
-    ],
+    t === 2 && ["astw:flex-col", "astw:lg:flex-row"],
     // 3 columns: Stack on mobile, 3 columns side-by-side on desktop (xl: ≥1280px)
     // Outer columns fixed 360px, middle column flexible
-    t === 3 && [
-      "astw:flex-col",
-      "astw:xl:flex-row"
-    ],
+    t === 3 && ["astw:flex-col", "astw:xl:flex-row"],
     e
   ), u = f.useMemo(() => t === 1 ? f.Children.map(o, (d) => d) : t === 2 ? f.Children.map(o, (d, h) => f.isValidElement(d) ? f.cloneElement(d, {
     className: m(
@@ -2622,14 +2429,14 @@ function bs({
       "header",
       {
         className: "astw:w-full astw:flex astw:justify-between astw:items-center",
-        style: { padding: "1.5rem", paddingBottom: "1rem" },
+        style: { paddingTop: "1rem", paddingBottom: "1rem" },
         children: [
           r && /* @__PURE__ */ a("h1", { style: { fontSize: "1.5rem", fontWeight: "bold" }, children: r }),
           n && n.length > 0 && /* @__PURE__ */ a("div", { className: "astw:flex astw:gap-2 astw:items-center", children: n.map((d, h) => /* @__PURE__ */ a(f.Fragment, { children: d }, h)) })
         ]
       }
     ),
-    /* @__PURE__ */ a("div", { style: { padding: w ? "0 1.5rem 1.5rem 1.5rem" : "1.5rem" }, children: /* @__PURE__ */ a("div", { className: l, children: u }) })
+    /* @__PURE__ */ a("div", { style: { padding: w ? "0 0 1rem 0" : "1rem 0 1rem 0" }, children: /* @__PURE__ */ a("div", { className: l, children: u }) })
   ] });
 }
 bs.Column = xt;

package/package.json

@@ -1,20 +1,35 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "0.27.1",
-  "type": "module",
+  "version": "0.27.3",
+  "description": "An opinionated React application framework for building ERP applications on Tailor Platform",
+  "keywords": [
+    "app-shell",
+    "erp",
+    "react",
+    "routing",
+    "sidebar",
+    "tailor-platform",
+    "vite"
+  ],
+  "homepage": "https://github.com/tailor-platform/app-shell/tree/main/packages/core#readme",
+  "bugs": {
+    "url": "https://github.com/tailor-platform"
+  },
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/tailor-platform/app-shell",
     "directory": "packages/core"
   },
-  "publishConfig": {
-    "access": "public"
-  },
+  "files": [
+    "dist/**"
+  ],
+  "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
     "./theme.css": "./dist/theme.css",
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/app-shell.d.ts",
       "default": "./dist/app-shell.js"
     },
     "./vite-plugin": {
@@ -22,12 +37,8 @@
       "default": "./dist/vite-plugin.js"
     }
   },
-  "files": [
-    "dist/**"
-  ],
-  "peerDependencies": {
-    "react": ">= 19",
-    "react-dom": ">= 19"
+  "publishConfig": {
+    "access": "public"
   },
   "dependencies": {
     "@base-ui/react": "^1.2.0",
@@ -36,8 +47,8 @@
     "change-case": "^5.4.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "es-toolkit": "^1.44.0",
-    "graphql": "^16.12.0",
+    "es-toolkit": "^1.45.1",
+    "graphql": "^16.13.0",
     "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
     "oauth4webapi": "^3.8.5",
@@ -50,7 +61,6 @@
     "@tailor-platform/app-shell-vite-plugin": "0.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
     "@tailwindcss/postcss": "^4.2.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -58,25 +68,25 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.1.2",
-    "eslint": "^9.0.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
     "happy-dom": "^20.6.2",
     "postcss": "^8",
-    "prettier": "^3.8.1",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5",
-    "typescript-eslint": "^8.55.0",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-externalize-deps": "^0.10.0",
     "vite-tsconfig-paths": "^6.0.4",
     "vitest": "^4.0.18"
   },
+  "peerDependencies": {
+    "react": ">= 19",
+    "react-dom": ">= 19"
+  },
   "scripts": {
     "dev": "vite build --watch --mode development",
     "build": "vite build",
-    "lint": "eslint .",
+    "lint": "oxlint -c .oxlintrc.jsonc",
     "test": "vitest run",
     "type-check": "tsc --incremental"
   }