elysia-rack 0.2.2 → 0.4.0

package/dist/react/index.js

@@ -1,6 +1,6 @@
 import {
   setGlobalDonate
-} from "../index-6v0ns1xn.js";
+} from "../index-b8sq8rbd.js";
 import {
   __require
 } from "../index-37x76zdn.js";
@@ -18,6 +18,24 @@ import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { renderToReadableStream } from "react-dom/server";
+
+// src/react/types.ts
+var ReactRack;
+((ReactRack) => {
+  ReactRack.PAGE = Symbol.for("@elysia-panel/react");
+  const lazyPages = new WeakSet;
+  function lazyPage(loader) {
+    lazyPages.add(loader);
+    return loader;
+  }
+  ReactRack.lazyPage = lazyPage;
+  function isLazyPage(entry) {
+    return typeof entry === "function" && lazyPages.has(entry);
+  }
+  ReactRack.isLazyPage = isLazyPage;
+})(ReactRack ||= {});
+
+// src/react/render.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
 function pageTitle(path, props) {
   const metadata = props?.metadata;
@@ -67,16 +85,18 @@ function buildShell(template, title) {
     return { head: html.slice(0, bodyClose), tail: html.slice(bodyClose) };
   return { head: html, tail: "" };
 }
+function isLazyPage(entry) {
+  return ReactRack.isLazyPage(entry);
+}
 function createRenderer(pages) {
   return async function render(path, props) {
-    const loader = pages[path];
-    if (!loader) {
+    const entry = pages[path];
+    if (!entry) {
       return new Response("Page Not Found", {
         status: 404
       });
     }
-    const module = await loader();
-    const Component = module.default;
+    const Component = isLazyPage(entry) ? (await entry()).default : entry;
     const stream = await renderToReadableStream(/* @__PURE__ */ jsxDEV(Component, {
       ...props
     }, undefined, false, undefined, this));
@@ -109,12 +129,6 @@ function createRenderer(pages) {
   };
 }
 
-// src/react/types.ts
-var ReactRack;
-((ReactRack) => {
-  ReactRack.PAGE = Symbol.for("@elysia-panel/react");
-})(ReactRack ||= {});
-
 // src/react/index.ts
 var PANEL_ASSETS = {
   "panel.css": "text/css; charset=utf-8",
@@ -155,8 +169,8 @@ function page(path, props) {
   };
 }
 var pages = {
-  "/dashboard": () => import("../Dashboard-7gmx8c9y.js"),
-  "/panel": () => import("../Panel-wjxjtbmr.js")
+  "/dashboard": ReactRack.lazyPage(() => import("../Dashboard-4wv82gwx.js")),
+  "/panel": ReactRack.lazyPage(() => import("../Panel-9mmh3tbh.js"))
 };
 var defaultPages = pages;
 function mergeRegistries(base, extra) {
@@ -167,7 +181,14 @@ function mergeRegistries(base, extra) {
 }
 function reactPlugin(options = {}) {
   setGlobalDonate(options.donate);
-  const registry = mergeRegistries(defaultPages, options.pages);
+  const views = options.views ?? [];
+  const viewPages = {};
+  for (const view of views)
+    viewPages[view.path] = view.component;
+  const registry = mergeRegistries(defaultPages, [
+    ...options.pages ? Array.isArray(options.pages) ? options.pages : [options.pages] : [],
+    viewPages
+  ]);
   const render = createRenderer(registry);
   const panelCssOverride = pickPanelCssOption(options);
   let cachedCustomCss = null;
@@ -214,7 +235,7 @@ function reactPlugin(options = {}) {
     cachedCustomCssLoaded = true;
     return cachedCustomCss = null;
   }
-  return new Elysia({ name: "@elysia-rack/react" }).decorate("react", { render }).get("/__rack/:name", async ({ params, status }) => {
+  let app = new Elysia({ name: "@elysia-rack/react" }).decorate("react", { render }).get("/__rack/:name", async ({ params, status }) => {
     const type = PANEL_ASSETS[params.name];
     if (!type)
       return status(404, "Panel asset not found");
@@ -250,6 +271,10 @@ function reactPlugin(options = {}) {
     const descriptor = responseValue;
     return render(descriptor.path, descriptor.props);
   });
+  for (const view of views) {
+    app = app.get(view.path, () => render(view.path, view.props));
+  }
+  return app;
 }
 export {
   reactPlugin,

package/dist/react/page/Panel.d.ts

@@ -6,6 +6,7 @@ export interface PanelProps {
         label?: string;
         pluralLabel?: string;
         group?: string;
+        icon?: string;
     };
     operations?: {
         list?: boolean;

package/dist/react/page/components/Icon.d.ts

@@ -0,0 +1,10 @@
+import { type LucideProps } from "lucide-react";
+export interface RackIconProps extends Omit<LucideProps, "name"> {
+    /** Lucide icon name (kebab-case or PascalCase). Falls back to the raw value. */
+    name?: string;
+}
+/**
+ * Render a Lucide icon from metadata.
+ * Unknown names fall back to the raw string so existing emoji icons keep working.
+ */
+export declare function RackIcon({ name, ...props }: RackIconProps): import("react").JSX.Element | null;

package/dist/react/page/components/Masthead.d.ts

@@ -1,7 +1,8 @@
+import type { ReactNode } from "react";
 export interface MastheadProps {
     title: string;
-    group?: string;
-    resource?: string;
-    total?: number;
+    icon?: string;
+    detail?: ReactNode;
+    actions?: ReactNode;
 }
-export declare function Masthead({ title, group, resource, total }: MastheadProps): import("react").JSX.Element;
+export declare function Masthead({ title, icon, detail, actions }: MastheadProps): import("react").JSX.Element;

package/dist/react/render.d.ts

@@ -1,2 +1,2 @@
-import type { ReactRack } from "./types";
+import { ReactRack } from "./types";
 export declare function createRenderer(pages: ReactRack.PageRegistry): (path: string, props: unknown) => Promise<Response>;

package/dist/react/types.d.ts

@@ -7,9 +7,23 @@ export declare namespace ReactRack {
         props?: Props;
     }
     type PageComponent<Props = any> = ComponentType<Props>;
-    type PageRegistry = Record<string, () => Promise<{
+    type PageLoader = () => Promise<{
         default: PageComponent;
-    }>>;
+    }>;
+    /** A page is either a component or a loader wrapped with `lazyPage()`. */
+    type PageEntry = PageComponent | PageLoader;
+    type PageRegistry = Record<string, PageEntry>;
+    /** Mark a `() => import(...)` loader so it is not mistaken for a component. */
+    function lazyPage(loader: PageLoader): PageLoader;
+    /** @internal */
+    function isLazyPage(entry: PageEntry): entry is PageLoader;
+    /** A page registered directly with its URL — no `page()` call needed. */
+    interface ReactView<Props = any> {
+        /** URL path the route is mounted at. */
+        path: string;
+        component: PageEntry;
+        props?: Props;
+    }
     /** Override source for panel.css */
     type PanelCssOverride = string | {
         path?: string;
@@ -17,6 +31,8 @@ export declare namespace ReactRack {
     };
     interface ReactPluginOptions {
         pages?: PageRegistry | PageRegistry[];
+        /** Pages auto-mounted at their `path`; `page()` is not needed for these. */
+        views?: ReactView[];
         /**
          * Override `panel.css` served at `/__rack/panel.css`.
          * - `string`: file path if the file exists, otherwise raw CSS string.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elysia-rack",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "Model-driven CRUD rack for Elysia: REST + QUERY routes, validation, authorization, OpenAPI metadata, and React panel rendering.",
   "type": "module",
   "license": "MIT",
@@ -54,8 +54,9 @@
     "dev": "bun run src/playground.ts",
     "test": "bun test --coverage",
     "typecheck": "tsc --noEmit",
-    "build": "bun run build:js && bun run build:dts && bun run build:client",
-    "build:js": "bun build ./src/rack/index.ts ./src/react/index.ts --outdir ./dist --target node --format esm --splitting --external elysia --external react --external react-dom",
+    "build": "bun run build:css && bun run build:js && bun run build:dts && bun run build:client",
+    "build:css": "tailwindcss -i src/react/page/panel.css -o dist/panel.css --minify",
+    "build:js": "bun build ./src/rack/index.ts ./src/react/index.ts --outdir ./dist --target node --format esm --splitting --external elysia --external react --external react-dom --external lucide-react",
     "build:client": "bun build src/react/page/client/panel.ts --outfile dist/panel-app.js --target browser --format esm && bun build src/react/page/client/theme.ts --outfile dist/panel-theme.js --target browser --format esm && mkdir -p dist && cp src/react/app.html dist/app.html 2>/dev/null || true",
     "build:dts": "tsc -p tsconfig.build.json",
     "prepublishOnly": "bun run typecheck && bun run build"
@@ -73,6 +74,7 @@
   },
   "devDependencies": {
     "@electric-sql/pglite": "^0.5.8",
+    "@tailwindcss/cli": "4.3.3",
     "@types/bun": "latest",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.5",
@@ -85,5 +87,8 @@
   "funding": {
     "type": "ko-fi",
     "url": "https://ko-fi.com/notoofly_manu"
+  },
+  "dependencies": {
+    "lucide-react": "^1.72.0"
   }
 }

package/dist/Dashboard-0da8dvbv.js

@@ -1,225 +0,0 @@
-import {
-  Breadcrumb,
-  Masthead,
-  Sidebar
-} from "./index-xsfqad54.js";
-import {
-  getRackTree
-} from "./index-4wxvmd8a.js";
-import"./index-37x76zdn.js";
-
-// src/react/page/Dashboard.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
-function itemLabel(r) {
-  return r.metadata.pluralLabel ?? r.metadata.label ?? r.metadata.id;
-}
-function toSidebarItem(node, activeId) {
-  return {
-    id: node.metadata.id,
-    label: itemLabel(node),
-    icon: node.metadata.icon,
-    href: node.path,
-    active: node.metadata.id === activeId,
-    children: node.children.filter((c) => !c.metadata.hidden).map((c) => toSidebarItem(c, activeId))
-  };
-}
-function buildGroupsFromTree(tree, activeId) {
-  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, activeId));
-  }
-  return [...byGroup.values()].sort((a, b) => a.name.localeCompare(b.name));
-}
-async function Dashboard(props) {
-  const tree = getRackTree().filter((r) => !r.metadata.hidden);
-  const groups = buildGroupsFromTree(tree, props.resource);
-  const totalResources = tree.length + tree.reduce((a, n) => a + n.children.length, 0);
-  const totalGroups = groups.length;
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "koran-paper font-koran-body text-foreground flex min-h-screen flex-col",
-    children: /* @__PURE__ */ jsxDEV("div", {
-      className: "flex flex-1 gap-6 p-4 sm:p-6",
-      children: [
-        /* @__PURE__ */ jsxDEV(Sidebar, {
-          title: props.name ?? "Panel",
-          groups
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV("main", {
-          className: "flex min-w-0 flex-1 flex-col",
-          children: [
-            /* @__PURE__ */ jsxDEV(Breadcrumb, {
-              trail: [{ label: "Dashboard" }]
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("div", {
-              className: "mx-auto w-full max-w-5xl px-4 pb-10 sm:px-6",
-              children: [
-                /* @__PURE__ */ jsxDEV(Masthead, {
-                  title: props.name ?? "ERP Demo",
-                  group: "Dashboard",
-                  resource: "dashboard",
-                  total: totalResources
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("div", {
-                  className: "grid grid-cols-2 gap-3 pb-6 lg:grid-cols-4",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "bg-card border-border rounded-lg border px-4 py-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "text-text-muted text-xs font-semibold tracking-widest uppercase",
-                          children: "Resources"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "font-koran text-2xl font-black",
-                          children: totalResources
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "text-text-muted text-xs",
-                          children: [
-                            totalGroups,
-                            " groups"
-                          ]
-                        }, undefined, true, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "bg-card border-border rounded-lg border px-4 py-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "text-text-muted text-xs font-semibold tracking-widest uppercase",
-                          children: "Modules"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "font-koran text-2xl font-black",
-                          children: totalGroups
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "text-text-muted text-xs",
-                          children: "Core → Governance"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "bg-card border-border rounded-lg border px-4 py-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "text-text-muted text-xs font-semibold tracking-widest uppercase",
-                          children: "Status"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "font-koran text-2xl font-black",
-                          children: "Ready"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "text-text-muted text-xs",
-                          children: "PGlite in-memory"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "bg-card border-border rounded-lg border px-4 py-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "text-text-muted text-xs font-semibold tracking-widest uppercase",
-                          children: "Tree"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "font-koran text-2xl font-black",
-                          children: tree.length
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("p", {
-                          className: "text-text-muted text-xs",
-                          children: "root nodes"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV("div", {
-                  className: "border-border bg-card rounded-lg border",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "border-border flex items-center justify-between border-b px-4 py-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV("h2", {
-                          className: "text-sm font-semibold tracking-widest uppercase",
-                          children: "Resource Tree"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("span", {
-                          className: "text-text-muted text-xs",
-                          children: [
-                            totalResources,
-                            " resources"
-                          ]
-                        }, undefined, true, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "divide-border divide-y",
-                      children: [
-                        groups.map((g) => /* @__PURE__ */ jsxDEV("div", {
-                          className: "px-4 py-3",
-                          children: [
-                            /* @__PURE__ */ jsxDEV("p", {
-                              className: "text-xs font-semibold tracking-widest uppercase text-form-label",
-                              children: g.name
-                            }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV("ul", {
-                              className: "mt-2 flex flex-wrap gap-2",
-                              children: g.items.map((it) => /* @__PURE__ */ jsxDEV("li", {
-                                children: [
-                                  /* @__PURE__ */ jsxDEV("a", {
-                                    href: it.href,
-                                    className: "bg-secondary text-secondary-foreground inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium hover:underline",
-                                    children: [
-                                      /* @__PURE__ */ jsxDEV("span", {
-                                        children: it.icon ?? "•"
-                                      }, undefined, false, undefined, this),
-                                      " ",
-                                      it.label
-                                    ]
-                                  }, undefined, true, undefined, this),
-                                  (it.children?.length ?? 0) > 0 && /* @__PURE__ */ jsxDEV("span", {
-                                    className: "text-text-muted ml-1 text-xs",
-                                    children: [
-                                      "+",
-                                      it.children?.length ?? 0,
-                                      " child"
-                                    ]
-                                  }, undefined, true, undefined, this)
-                                ]
-                              }, it.id, true, undefined, this))
-                            }, undefined, false, undefined, this)
-                          ]
-                        }, g.name, true, undefined, this)),
-                        groups.length === 0 && /* @__PURE__ */ jsxDEV("p", {
-                          className: "text-text-muted px-4 py-6 text-center text-sm",
-                          children: "Belum ada resource terdaftar — pastikan rack() sudah dipanggil sebelum dashboard render."
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV("footer", {
-                  className: "border-border text-text-muted mt-6 border-t pt-3 text-center text-xs tracking-widest uppercase",
-                  children: "Printed by elysia-rack — ERP blueprint"
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-export {
-  Dashboard as default
-};

package/dist/Dashboard-2j561p7c.js

@@ -1,225 +0,0 @@
-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
-};