elysia-rack 0.1.1 → 0.1.2

package/README.md

@@ -151,14 +151,36 @@ Conventions:
   reads skip soft-deleted rows.
 - `settings.returning: false` omits `data` from mutation responses.
 
-## Dashboard (sidebar, breadcrumb, iframe)
+## Dashboard
 
-Every `rack()` call registers its path, metadata and operations in a
-registry (`listRacks()` / `clearRacks()` from `elysia-rack`). The default
-`/dashboard` page builds a sidebar (grouped by `metadata.group`, ordered
-by `metadata.order`, skipping `hidden`), a breadcrumb
-(Dashboard / Group / Label), and shows the selected resource's `GET`
-panel inside an `<iframe>`:
+Recommended setup uses `react()`, `dashboard()`, and `rack()`. Each `rack()`
+stores its metadata tree in memory (registry) and `dashboard()` loads it at
+render time via `getRackTree()`.
+
+```ts
+import { dashboard, rack } from "elysia-rack";
+import { pages, reactPlugin } from "elysia-rack/react";
+
+const app = new Elysia()
+  .use(reactPlugin({ pages }))
+  .use(dashboard({ title: "My Panel", path: "/" }))
+  .use(rack("/catalog/products", { model, metadata: { id: "products", group: "Catalog", order: 1 } }))
+  .use(rack("/catalog/variants", { model, metadata: { id: "variants", group: "Catalog", order: 2, parent: "products" } }));
+```
+
+### Tree metadata
+
+`metadata.parent` builds a hierarchy. Children are rendered nested under their
+parent in the sidebar and kept ordered by `order` then label.
+
+```ts
+rack("/catalog/products", { metadata: { id: "products", group: "Catalog", order: 1 } });
+rack("/catalog/variants", { metadata: { id: "variants", parent: "products", group: "Catalog", order: 2 } });
+```
+
+Helpers: `listRacks()`, `getRack(id)`, `getRackTree()`, `flatRackTree()`, `buildRackTree(racks)`, `clearRacks()` from `elysia-rack`.
+
+The dashboard page itself can also be used manually:
 
 ```ts
 import { page, pages, reactPlugin } from "elysia-rack/react";
@@ -174,32 +196,60 @@ const app = new Elysia()
   );
 ```
 
-Sidebar links navigate with `?resource=<id>` (full reload, no JavaScript
-needed). Without a selection the first registered resource is shown.
+The sidebar groups by `metadata.group`, sorts by `order`, skips `hidden`,
+and shows the selected resource's panel inside an `<iframe>`. Links use
+`?resource=<id>` (no JavaScript required).
+
+## HTML template
+
+SSR uses `src/react/app.html` as the shell. It is read at runtime, cached,
+and streamed with the React output.
+
+```html
+<!doctype html>
+<html><head>
+  <title>{{title}}</title>
+  <link rel="stylesheet" href="/__rack/panel.css" />
+  <!--app-head-->
+</head><body>
+  <!--app-->
+</body></html>
+```
+
+- `{{title}}` is replaced (escaped) per page.
+- `<!--app-->` (also `{{body}}`, `<!--app-html-->`) marks where the React stream is injected.
+- Fallback shell is used if the file is missing. `dist/app.html` is a static copy of `src/react/app.html` included in the package.
 
-React panel rendering via the `./react` subpath:
+Override the template by editing `src/react/app.html` (and `dist/app.html` for the published package).
+
+## Panel CSS override
+
+Override `panel.css` at `react()` config without forking:
 
 ```ts
-import { page, pages, reactPlugin } from "elysia-rack/react";
+import { pages, reactPlugin } from "elysia-rack/react";
 
-const app = new Elysia()
-  .use(reactPlugin({ pages }))
-  .get("/", () => page("/dashboard", { name: "Ada" }));
+// file path (resolved from cwd/dist), raw string, or object
+reactPlugin({ pages, css: "./my-panel.css" });
+reactPlugin({ pages, css: { path: "./my-panel.css" } });
+reactPlugin({ pages, css: { content: ":root{--color-primary:red}" } });
+reactPlugin({ pages, panelCss: "body{...}" }); // alias
 ```
 
-## Panel assets (Vite)
+If a file path exists it is served; otherwise a raw CSS string is served.
+Fallback is `dist/panel.css`.
+
+## Panel assets
 
-CSS, Tailwind and browser JavaScript go through Vite (`vite.config.ts`,
-`bun run build:assets`):
+Static assets are served under `/__rack/*`:
 
-- `src/react/page/panel.css` — stylesheet entry (Tailwind v4) → `dist/panel.css`
-- `src/react/page/client/theme.ts` — dark/light toggle → `dist/panel-theme.js`
-- `src/react/page/client/panel.ts` — live query + actions → `dist/panel-app.js`
-  (imports shared `components/href.ts` and `components/panelForm.ts`)
+- `dist/panel.css` — panel stylesheet (prebuilt)
+- `dist/panel-theme.js` — dark/light toggle
+- `dist/panel-app.js` — live query + actions (imports `components/href.ts`, `components/panelForm.ts`)
 
 Pages reference `/__rack/panel.css`, `/__rack/panel-theme.js` and
-`/__rack/panel-app.js`, served by `reactPlugin` from `dist/` (run the
-build before `dev`; CI and `prepublishOnly` already chain it).
+`/__rack/panel-app.js` via `reactPlugin`. No build step required — assets are
+static and included in the published package.
 
 ## Panel theme
 
@@ -224,7 +274,7 @@ touching React code.
 1. One-time setup: npmjs.com → package → Settings → Trusted Publisher → GitHub Actions (`notoofly/elysia-rack`, workflow `publish.yml`).
 2. Bump `version` in `package.json`.
 3. Create a GitHub Release with tag `v<version>` (e.g. `v0.1.0`).
-4. The `publish` workflow runs automatically: install, typecheck, asset build, test, build, tag-vs-version check, `npm publish --provenance`.
+4. The `publish` workflow runs automatically: install, typecheck, test, build, tag-vs-version check, `npm publish --provenance`.
 
 ## Scripts
 

package/dist/Dashboard-2j561p7c.js

@@ -0,0 +1,225 @@
+import {
+  buildRackTree,
+  flatRackTree,
+  getRackTree
+} from "./index-4wxvmd8a.js";
+import"./index-37x76zdn.js";
+
+// src/react/page/components/Breadcrumb.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function Breadcrumb({ trail }) {
+  return /* @__PURE__ */ jsxDEV("nav", {
+    "aria-label": "Breadcrumb",
+    className: "pb-3 text-sm",
+    children: /* @__PURE__ */ jsxDEV("ol", {
+      className: "flex flex-wrap items-center gap-1.5",
+      children: trail.map((item, i) => {
+        const last = i === trail.length - 1;
+        return /* @__PURE__ */ jsxDEV("li", {
+          className: "flex items-center gap-1.5",
+          children: [
+            i > 0 ? /* @__PURE__ */ jsxDEV("span", {
+              "aria-hidden": "true",
+              className: "text-text-muted",
+              children: "/"
+            }, undefined, false, undefined, this) : null,
+            item.href && !last ? /* @__PURE__ */ jsxDEV("a", {
+              href: item.href,
+              className: "text-text-muted hover:text-foreground",
+              children: item.label
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
+              "aria-current": last ? "page" : undefined,
+              className: last ? "text-foreground font-semibold" : "text-text-muted",
+              children: item.label
+            }, undefined, false, undefined, this)
+          ]
+        }, `${item.label}-${i}`, true, undefined, this);
+      })
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/react/page/components/Sidebar.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function SidebarItemView({ item, depth = 0 }) {
+  const hasChildren = item.children && item.children.length > 0;
+  return /* @__PURE__ */ jsxDEV2("li", {
+    children: [
+      /* @__PURE__ */ jsxDEV2("a", {
+        href: item.href,
+        "aria-current": item.active ? "page" : undefined,
+        className: item.active ? "bg-sidebar-primary text-sidebar-primary-foreground flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-semibold" : "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        style: depth > 0 ? { paddingLeft: `${8 + depth * 12}px` } : undefined,
+        children: [
+          item.icon ? /* @__PURE__ */ jsxDEV2("span", {
+            "aria-hidden": "true",
+            children: item.icon
+          }, undefined, false, undefined, this) : null,
+          /* @__PURE__ */ jsxDEV2("span", {
+            children: item.label
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasChildren ? /* @__PURE__ */ jsxDEV2("ul", {
+        className: "border-sidebar-border mt-0.5 ml-2 flex flex-col gap-0.5 border-l py-1 pl-2",
+        children: item.children.map((child) => /* @__PURE__ */ jsxDEV2(SidebarItemView, {
+          item: child,
+          depth: depth + 1
+        }, child.id, false, undefined, this))
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+function hasActive(items) {
+  for (const it of items) {
+    if (it.active)
+      return true;
+    if (it.children && hasActive(it.children))
+      return true;
+  }
+  return false;
+}
+function Sidebar({ title, groups }) {
+  return /* @__PURE__ */ jsxDEV2("aside", {
+    className: "bg-sidebar text-sidebar-foreground border-sidebar-border min-h-0 w-64 shrink-0 overflow-y-auto rounded-lg border",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "border-sidebar-border border-b px-4 py-3",
+        children: /* @__PURE__ */ jsxDEV2("p", {
+          className: "font-koran text-xl font-black tracking-tight",
+          children: title
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("nav", {
+        className: "flex flex-col gap-4 p-3",
+        children: groups.map((group) => /* @__PURE__ */ jsxDEV2("section", {
+          children: /* @__PURE__ */ jsxDEV2("details", {
+            className: "group",
+            open: hasActive(group.items) || undefined,
+            children: [
+              /* @__PURE__ */ jsxDEV2("summary", {
+                className: "font-koran border-sidebar-border flex cursor-pointer list-none items-center justify-between border-b px-2 pb-1 text-base font-bold tracking-tight [&::-webkit-details-marker]:hidden",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: group.name
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    "aria-hidden": "true",
+                    className: "text-text-muted text-xs transition group-open:rotate-180",
+                    children: "▾"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("ul", {
+                className: "border-sidebar-border mt-1 ml-2 flex flex-col gap-0.5 border-l py-1 pl-2",
+                children: group.items.map((item) => /* @__PURE__ */ jsxDEV2(SidebarItemView, {
+                  item
+                }, item.id, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, group.name, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/react/page/Dashboard.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function itemLabel(r) {
+  return r.metadata.pluralLabel ?? r.metadata.label ?? r.metadata.id;
+}
+function buildGroups(racks, selectedId) {
+  const byGroup = new Map;
+  for (const r of racks) {
+    if (r.metadata.hidden)
+      continue;
+    const name = r.metadata.group ?? "General";
+    let group = byGroup.get(name);
+    if (!group) {
+      group = { name, items: [] };
+      byGroup.set(name, group);
+    }
+    group.items.push({
+      id: r.metadata.id,
+      label: itemLabel(r),
+      icon: r.metadata.icon,
+      href: `?resource=${encodeURIComponent(r.metadata.id)}`,
+      active: r.metadata.id === selectedId
+    });
+  }
+  const groups = [...byGroup.values()].sort((a, b) => a.name.localeCompare(b.name));
+  for (const group of groups) {
+    const orderOf = (id) => racks.find((r) => r.metadata.id === id)?.metadata.order ?? 0;
+    group.items.sort((a, b) => orderOf(a.id) - orderOf(b.id) || a.label.localeCompare(b.label));
+  }
+  return groups;
+}
+function toSidebarItem(node, selectedId) {
+  return {
+    id: node.metadata.id,
+    label: itemLabel(node),
+    icon: node.metadata.icon,
+    href: `?resource=${encodeURIComponent(node.metadata.id)}`,
+    active: node.metadata.id === selectedId,
+    children: node.children.filter((c) => !c.metadata.hidden).map((c) => toSidebarItem(c, selectedId))
+  };
+}
+function buildGroupsFromTree(tree, selectedId) {
+  const byGroup = new Map;
+  for (const root of tree) {
+    if (root.metadata.hidden)
+      continue;
+    const name = root.metadata.group ?? "General";
+    let group = byGroup.get(name);
+    if (!group) {
+      group = { name, items: [] };
+      byGroup.set(name, group);
+    }
+    group.items.push(toSidebarItem(root, selectedId));
+  }
+  return [...byGroup.values()].sort((a, b) => a.name.localeCompare(b.name));
+}
+async function Dashboard(props) {
+  const tree = props.racks !== undefined ? buildRackTree(props.racks.filter((r) => !r.metadata.hidden)) : getRackTree().filter((r) => !r.metadata.hidden);
+  const flat = props.racks !== undefined ? props.racks.filter((r) => !r.metadata.hidden) : flatRackTree(tree).filter((r) => !r.metadata.hidden);
+  const selected = flat.find((r) => r.metadata.id === props.resource) ?? flat[0];
+  const groups = tree.length ? buildGroupsFromTree(tree, selected?.metadata.id) : buildGroups(flat, selected?.metadata.id);
+  const trail = [
+    { label: "Dashboard", href: "?" },
+    ...selected?.metadata.group ? [{ label: selected.metadata.group }] : [],
+    ...selected ? [{ label: itemLabel(selected) }] : []
+  ];
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "koran-paper font-koran-body text-foreground flex flex-col min-h-screen",
+    children: /* @__PURE__ */ jsxDEV3("div", {
+      className: "flex min-h-0 flex-1 gap-6 p-4 sm:p-6 h-full",
+      children: [
+        /* @__PURE__ */ jsxDEV3(Sidebar, {
+          title: props.name ?? "Panel",
+          groups
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV3("main", {
+          className: "flex min-w-0 flex-1 flex-col",
+          children: [
+            /* @__PURE__ */ jsxDEV3(Breadcrumb, {
+              trail
+            }, undefined, false, undefined, this),
+            selected ? /* @__PURE__ */ jsxDEV3("iframe", {
+              src: selected.path,
+              title: itemLabel(selected),
+              sandbox: "allow-scripts allow-same-origin allow-forms",
+              className: "bg-card min-h-0 w-full flex-1 rounded-lg"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("p", {
+              className: "text-text-muted border-border rounded-lg border px-4 py-10 text-center",
+              children: "No resources registered. Mount a resource with rack() first."
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  Dashboard as default
+};

package/dist/Dashboard-5mt9hnbw.js

@@ -0,0 +1,252 @@
+import {
+  flatRackTree,
+  getRackTree
+} from "./index-tgk4jt4d.js";
+import"./index-37x76zdn.js";
+
+// src/react/page/components/Breadcrumb.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function Breadcrumb({ trail }) {
+  return /* @__PURE__ */ jsxDEV("nav", {
+    "aria-label": "Breadcrumb",
+    className: "pb-3 text-sm",
+    children: /* @__PURE__ */ jsxDEV("ol", {
+      className: "flex flex-wrap items-center gap-1.5",
+      children: trail.map((item, i) => {
+        const last = i === trail.length - 1;
+        return /* @__PURE__ */ jsxDEV("li", {
+          className: "flex items-center gap-1.5",
+          children: [
+            i > 0 ? /* @__PURE__ */ jsxDEV("span", {
+              "aria-hidden": "true",
+              className: "text-text-muted",
+              children: "/"
+            }, undefined, false, undefined, this) : null,
+            item.href && !last ? /* @__PURE__ */ jsxDEV("a", {
+              href: item.href,
+              className: "text-text-muted hover:text-foreground",
+              children: item.label
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
+              "aria-current": last ? "page" : undefined,
+              className: last ? "text-foreground font-semibold" : "text-text-muted",
+              children: item.label
+            }, undefined, false, undefined, this)
+          ]
+        }, `${item.label}-${i}`, true, undefined, this);
+      })
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/react/page/components/Sidebar.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function SidebarItemView({ item, depth = 0 }) {
+  const hasChildren = item.children && item.children.length > 0;
+  return /* @__PURE__ */ jsxDEV2("li", {
+    children: [
+      /* @__PURE__ */ jsxDEV2("a", {
+        href: item.href,
+        "aria-current": item.active ? "page" : undefined,
+        className: item.active ? "bg-sidebar-primary text-sidebar-primary-foreground flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-semibold" : "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        style: depth > 0 ? { paddingLeft: `${8 + depth * 12}px` } : undefined,
+        children: [
+          item.icon ? /* @__PURE__ */ jsxDEV2("span", {
+            "aria-hidden": "true",
+            children: item.icon
+          }, undefined, false, undefined, this) : null,
+          /* @__PURE__ */ jsxDEV2("span", {
+            children: item.label
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasChildren ? /* @__PURE__ */ jsxDEV2("ul", {
+        className: "border-sidebar-border mt-0.5 ml-2 flex flex-col gap-0.5 border-l py-1 pl-2",
+        children: item.children.map((child) => /* @__PURE__ */ jsxDEV2(SidebarItemView, {
+          item: child,
+          depth: depth + 1
+        }, child.id, false, undefined, this))
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+function hasActive(items) {
+  for (const it of items) {
+    if (it.active)
+      return true;
+    if (it.children && hasActive(it.children))
+      return true;
+  }
+  return false;
+}
+function Sidebar({ title, groups }) {
+  return /* @__PURE__ */ jsxDEV2("aside", {
+    className: "bg-sidebar text-sidebar-foreground border-sidebar-border min-h-0 w-64 shrink-0 overflow-y-auto rounded-lg border",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "border-sidebar-border border-b px-4 py-3",
+        children: /* @__PURE__ */ jsxDEV2("p", {
+          className: "font-koran text-xl font-black tracking-tight",
+          children: title
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("nav", {
+        className: "flex flex-col gap-4 p-3",
+        children: groups.map((group) => /* @__PURE__ */ jsxDEV2("section", {
+          children: /* @__PURE__ */ jsxDEV2("details", {
+            className: "group",
+            open: hasActive(group.items) || undefined,
+            children: [
+              /* @__PURE__ */ jsxDEV2("summary", {
+                className: "font-koran border-sidebar-border flex cursor-pointer list-none items-center justify-between border-b px-2 pb-1 text-base font-bold tracking-tight [&::-webkit-details-marker]:hidden",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: group.name
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    "aria-hidden": "true",
+                    className: "text-text-muted text-xs transition group-open:rotate-180",
+                    children: "▾"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("ul", {
+                className: "border-sidebar-border mt-1 ml-2 flex flex-col gap-0.5 border-l py-1 pl-2",
+                children: group.items.map((item) => /* @__PURE__ */ jsxDEV2(SidebarItemView, {
+                  item
+                }, item.id, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, group.name, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/react/page/Dashboard.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function itemLabel(r) {
+  return r.metadata.pluralLabel ?? r.metadata.label ?? r.metadata.id;
+}
+function buildGroups(racks, selectedId) {
+  const byGroup = new Map;
+  for (const r of racks) {
+    if (r.metadata.hidden)
+      continue;
+    const name = r.metadata.group ?? "General";
+    let group = byGroup.get(name);
+    if (!group) {
+      group = { name, items: [] };
+      byGroup.set(name, group);
+    }
+    group.items.push({
+      id: r.metadata.id,
+      label: itemLabel(r),
+      icon: r.metadata.icon,
+      href: `?resource=${encodeURIComponent(r.metadata.id)}`,
+      active: r.metadata.id === selectedId
+    });
+  }
+  const groups = [...byGroup.values()].sort((a, b) => a.name.localeCompare(b.name));
+  for (const group of groups) {
+    const orderOf = (id) => racks.find((r) => r.metadata.id === id)?.metadata.order ?? 0;
+    group.items.sort((a, b) => orderOf(a.id) - orderOf(b.id) || a.label.localeCompare(b.label));
+  }
+  return groups;
+}
+function toSidebarItem(node, selectedId) {
+  return {
+    id: node.metadata.id,
+    label: itemLabel(node),
+    icon: node.metadata.icon,
+    href: `?resource=${encodeURIComponent(node.metadata.id)}`,
+    active: node.metadata.id === selectedId,
+    children: node.children.filter((c) => !c.metadata.hidden).map((c) => toSidebarItem(c, selectedId))
+  };
+}
+function buildGroupsFromTree(tree, selectedId) {
+  const byGroup = new Map;
+  for (const root of tree) {
+    if (root.metadata.hidden)
+      continue;
+    const name = root.metadata.group ?? "General";
+    let group = byGroup.get(name);
+    if (!group) {
+      group = { name, items: [] };
+      byGroup.set(name, group);
+    }
+    group.items.push(toSidebarItem(root, selectedId));
+  }
+  return [...byGroup.values()].sort((a, b) => a.name.localeCompare(b.name));
+}
+function treeFromRacks(racks) {
+  const nodes = new Map;
+  for (const r of racks)
+    nodes.set(r.metadata.id, { ...r, children: [] });
+  const roots = [];
+  for (const node of nodes.values()) {
+    const parentId = node.metadata.parent;
+    if (parentId && nodes.has(parentId) && parentId !== node.metadata.id) {
+      nodes.get(parentId).children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  const sort = (list) => {
+    list.sort((a, b) => {
+      const oa = a.metadata.order ?? 0;
+      const ob = b.metadata.order ?? 0;
+      if (oa !== ob)
+        return oa - ob;
+      return itemLabel(a).localeCompare(itemLabel(b));
+    });
+    for (const n of list)
+      if (n.children.length)
+        sort(n.children);
+  };
+  sort(roots);
+  return roots;
+}
+async function Dashboard(props) {
+  const tree = props.racks !== undefined ? treeFromRacks(props.racks.filter((r) => !r.metadata.hidden)) : getRackTree().filter((r) => !r.metadata.hidden);
+  const flat = props.racks !== undefined ? props.racks.filter((r) => !r.metadata.hidden) : flatRackTree(tree).filter((r) => !r.metadata.hidden);
+  const selected = flat.find((r) => r.metadata.id === props.resource) ?? flat[0];
+  const groups = tree.length ? buildGroupsFromTree(tree, selected?.metadata.id) : buildGroups(flat, selected?.metadata.id);
+  const trail = [
+    { label: "Dashboard", href: "?" },
+    ...selected?.metadata.group ? [{ label: selected.metadata.group }] : [],
+    ...selected ? [{ label: itemLabel(selected) }] : []
+  ];
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "koran-paper font-koran-body text-foreground flex flex-col min-h-screen",
+    children: /* @__PURE__ */ jsxDEV3("div", {
+      className: "flex min-h-0 flex-1 gap-6 p-4 sm:p-6 h-full",
+      children: [
+        /* @__PURE__ */ jsxDEV3(Sidebar, {
+          title: props.name ?? "Panel",
+          groups
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV3("main", {
+          className: "flex min-w-0 flex-1 flex-col",
+          children: [
+            /* @__PURE__ */ jsxDEV3(Breadcrumb, {
+              trail
+            }, undefined, false, undefined, this),
+            selected ? /* @__PURE__ */ jsxDEV3("iframe", {
+              src: selected.path,
+              title: itemLabel(selected),
+              sandbox: "allow-scripts allow-same-origin allow-forms",
+              className: "bg-card min-h-0 w-full flex-1 rounded-lg"
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("p", {
+              className: "text-text-muted border-border rounded-lg border px-4 py-10 text-center",
+              children: "No resources registered. Mount a resource with rack() first."
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  Dashboard as default
+};

package/dist/app.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{title}}</title>
+    <link rel="stylesheet" href="/__rack/panel.css" />
+    <script type="module" src="/__rack/panel-theme.js"></script>
+    <!--app-head-->
+  </head>
+  <body>
+    <!--app-->
+  </body>
+</html>