elysia-rack 0.2.2 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elysia-rack",
-  "version": "0.2.2",
+  "version": "0.3.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
-};