elysia-rack 0.3.0 → 0.5.1

package/README.md

@@ -4,8 +4,6 @@
 
 Model-driven CRUD rack for [Elysia](https://elysiajs.com): declare a resource once, get REST + `QUERY` routes, validation, authorization, query engine, OpenAPI metadata, and a React panel — running on [Bun](https://bun.com) or Node.js 20+.
 
-Full usage guide: [docs/USAGE.md](docs/USAGE.md).
-
 ## Documentation
 
 End-user documentation covers installation, configuration, daily usage, and troubleshooting: [docs/index.md](docs/index.md).
@@ -100,11 +98,41 @@ The panel ships create / edit / delete UI driven by the same API:
 - Row `Delete` confirms natively, then `DELETE /:id`.
 - Checkbox selection enables the bulk bar: `Delete selected` loops
   `DELETE /:id`, and the field applier loops `PATCH /:id` with the
-  chosen field/value. `Clear` resets the selection.
+  chosen field/value (coerced to the field kind). `Clear` resets the selection.
+- Row `View` loads the record through `QUERY /data/:id` into a read-only dialog.
+- With `settings.softDelete`, the toolbar adds `Show deleted`. Deleted rows
+  show a `Restore` button that clears `deletedAt` via `PATCH /:id`.
+
+Mutations report success and failures with toast messages and disable the
+submit button while a request is in flight.
 
 Action UI follows `operations`: disable `create`/`update`/`delete` and
 the corresponding buttons, dialogs and bulk controls disappear.
 
+### Custom actions
+
+Add extra buttons with the `actions` option. `:id` in `href` is replaced
+with the row primary key. Row actions (default) sit next to
+Edit/Delete; `scope: "toolbar"` actions sit in the page header.
+
+```ts
+rack("/catalog/products", {
+  model,
+  actions: [
+    { label: "Duplicate", href: "/catalog/products/:id/duplicate", method: "POST" },
+    { label: "Export CSV", href: "/catalog/products/export", scope: "toolbar", icon: "download" }
+  ]
+});
+```
+
+Without `method`, the button is a plain link. With `method`, the panel
+runs it via `fetch` and refreshes the table; `confirm` shows a native
+confirmation first.
+
+Custom action endpoints are yours to protect. The panel does not apply the
+rack's `authorization` rules to them, so call `authorize()` (or your own
+guard) inside the route that handles the action URL.
+
 ## Idempotency (POST)
 
 `POST /` requires an idempotency key by default. Send a client-generated
@@ -235,11 +263,23 @@ rack("/catalog/products", {
     order: 1,                 // smaller = higher
     icon: "package",           // Lucide icon name (kebab-case or PascalCase)
     parent: "catalog-root",   // nest under another id
-    hidden: false
+    hidden: false,
+    hiddenFields: ["cost"],   // fields hidden from table columns and forms
+    fields: {
+      name: { label: "Product name", order: 1 },
+      price: { format: "currency", currency: "USD" },
+      cost: { hideInTable: true },              // editable in forms, not listed
+      categoryId: {                              // relation select in forms
+        label: "Category",
+        relation: { load: async () => loadCategories() }
+      }
+    }
   }
 });
 ```
 
+`metadata.icon` also becomes the page favicon (an inline SVG in `<head>`). Per-field config supports `label`, `format` (`text`, `number`, `currency`, `date`, `datetime`, `boolean`, `badge`, `json`), `readOnly`, `hideInTable`, `hideInForm`, `order`, and `relation`. A relation renders a `<select>`; provide static `options` or a `load` function, and the label is used for table/detail display.
+
 **Decide what users can do.** Turn operations on/off. If you disable `create`, the “New record” button disappears automatically.
 
 ```ts
@@ -335,17 +375,28 @@ Helpers to inspect the tree yourself: `listRacks()`, `getRack(id)`, `getRackTree
 `reactPlugin` is the bridge between Elysia and React. `pages` is now optional and mergeable — defaults already include `"/dashboard"` and `"/panel"`, and any custom pages you pass are merged in. You can pass a single registry or an array.
 
 ```ts
-import { pages, reactPlugin, page } from "elysia-rack/react";
+import { lazyPage, pages, reactPlugin, page } from "elysia-rack/react";
 
 // Option A: just use defaults
 new Elysia().use(reactPlugin());
 
 // Option B: extend defaults with your own page
-const myPages = { "/hello": () => import("./Hello") };
+const myPages = { "/hello": lazyPage(() => import("./Hello")) };
 new Elysia().use(reactPlugin({ pages: myPages })); // merged with defaults
 
-// Option C: merge multiple registries — array will be merged
-const extra = { "/admin": () => import("./Admin") };
+// Option C: pass a component directly (no import wrapper)
+import Hello from "./Hello";
+new Elysia().use(reactPlugin({ pages: { "/hello": Hello } }));
+
+// Option D: auto-mount a view — no page() call needed
+new Elysia().use(
+  reactPlugin({
+    views: [{ path: "/hello", component: Hello, props: { name: "Ada" } }],
+  }),
+);
+
+// Option E: merge multiple registries — array will be merged
+const extra = { "/admin": lazyPage(() => import("./Admin")) };
 new Elysia().use(reactPlugin({ pages: [pages, myPages, extra] }));
 
 // With a style override
@@ -360,7 +411,8 @@ new Elysia().use(reactPlugin({
 
 What each option does:
 
-- `pages` *(optional, `PageRegistry | PageRegistry[]`)* — registry of lazy page components. If omitted, defaults are used. If you pass one or an array, they are merged with defaults so `"/dashboard"` + `"/panel"` stay available. Later entries win on key collision.
+- `pages` *(optional, `PageRegistry | PageRegistry[]`)* — registry of page components or loaders wrapped with `lazyPage(() => import(...))`. If omitted, defaults are used. If you pass one or an array, they are merged with defaults so `"/dashboard"` + `"/panel"` stay available. Later entries win on key collision.
+- `views` *(optional, `ReactView[]`)* — components auto-mounted at their `path` with fixed `props`. Equivalent to registering a page and returning `page(path, props)` yourself.
 - `css` / `panelCss` — replace `dist/panel.css` served at `/__rack/panel.css`. If the string points to an existing file it’s used, otherwise it’s treated as raw CSS. Useful for quick theming without forking.
 
 Under the hood `reactPlugin` also serves `/__rack/panel-theme.js` and `/__rack/panel-app.js` and turns any `page()` return value into streamed HTML using `src/react/app.html` (`{{title}}` + `<!--app-->`).

package/dist/Dashboard-2raba6xf.js

@@ -0,0 +1,212 @@
+import {
+  Masthead,
+  Sidebar
+} from "./index-9k12apt9.js";
+import {
+  getRackTree
+} from "./index-4wxvmd8a.js";
+import {
+  RackIcon,
+  resolveDonateProp
+} from "./index-vq4gh509.js";
+import"./index-37x76zdn.js";
+
+// src/react/page/Dashboard.tsx
+import { Fragment } from "react";
+import { jsxDEV, Fragment as Fragment2 } 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));
+}
+function countNodes(nodes) {
+  return nodes.reduce((sum, n) => sum + 1 + countNodes(n.children), 0);
+}
+function operationsLabel(node) {
+  const op = node.operations;
+  const write = [op.create, op.update, op.replace, op.delete];
+  if (!write.some(Boolean))
+    return "Read only";
+  if (write.every(Boolean))
+    return "Full";
+  const labels = [];
+  if (op.create)
+    labels.push("Create");
+  if (op.update)
+    labels.push("Update");
+  if (op.replace)
+    labels.push("Replace");
+  if (op.delete)
+    labels.push("Delete");
+  return labels.join(", ");
+}
+function plural(count, word) {
+  return `${count} ${word}${count === 1 ? "" : "s"}`;
+}
+function ResourceRow({ node, depth = 0 }) {
+  return /* @__PURE__ */ jsxDEV(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxDEV("tr", {
+        className: "hover:bg-table-row-hover",
+        children: [
+          /* @__PURE__ */ jsxDEV("td", {
+            className: "border-table-border border-t px-3 py-2.5",
+            children: /* @__PURE__ */ jsxDEV("a", {
+              href: node.path,
+              className: "text-link hover:text-link-hover font-medium hover:underline",
+              style: depth > 0 ? { paddingLeft: depth * 16 } : undefined,
+              children: [
+                node.metadata.icon ? /* @__PURE__ */ jsxDEV(RackIcon, {
+                  name: node.metadata.icon,
+                  size: 16,
+                  className: "mr-1.5 inline size-4 align-text-bottom"
+                }, undefined, false, undefined, this) : null,
+                node.metadata.label ?? node.metadata.id
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("td", {
+            className: "border-table-border text-text-muted border-t px-3 py-2.5 font-mono text-xs",
+            children: node.path
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("td", {
+            className: "border-table-border text-text-muted border-t px-3 py-2.5 text-xs",
+            children: operationsLabel(node)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      node.children.filter((c) => !c.metadata.hidden).map((child) => /* @__PURE__ */ jsxDEV(ResourceRow, {
+        node: child,
+        depth: depth + 1
+      }, child.metadata.id, false, undefined, this))
+    ]
+  }, undefined, true, undefined, this);
+}
+async function Dashboard(props) {
+  const tree = getRackTree().filter((r) => !r.metadata.hidden);
+  const groups = buildGroupsFromTree(tree, props.resource);
+  const totalResources = countNodes(tree);
+  const totalGroups = groups.length;
+  const donate = resolveDonateProp(props.donate);
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "text-foreground flex min-h-screen flex-col lg:flex-row",
+    children: [
+      /* @__PURE__ */ jsxDEV(Sidebar, {
+        title: props.name ?? "Panel",
+        groups
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("main", {
+        className: "min-w-0 flex-1",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          className: "mx-auto w-full max-w-5xl px-4 py-4 sm:px-6",
+          children: [
+            /* @__PURE__ */ jsxDEV(Masthead, {
+              title: props.name ?? "Panel",
+              detail: `${plural(totalResources, "resource")} in ${plural(totalGroups, "group")}`
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "bg-table border-border overflow-x-auto rounded-lg border",
+              children: /* @__PURE__ */ jsxDEV("table", {
+                className: "w-full border-collapse text-left text-sm",
+                children: [
+                  /* @__PURE__ */ jsxDEV("thead", {
+                    children: /* @__PURE__ */ jsxDEV("tr", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("th", {
+                          className: "border-border text-text-muted border-b px-3 py-2 text-xs font-medium",
+                          children: "Resource"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("th", {
+                          className: "border-border text-text-muted border-b px-3 py-2 text-xs font-medium",
+                          children: "Path"
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV("th", {
+                          className: "border-border text-text-muted border-b px-3 py-2 text-xs font-medium",
+                          children: "Operations"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this)
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("tbody", {
+                    children: groups.length === 0 ? /* @__PURE__ */ jsxDEV("tr", {
+                      children: /* @__PURE__ */ jsxDEV("td", {
+                        colSpan: 3,
+                        className: "text-text-muted px-4 py-10 text-center",
+                        children: "No resources registered. Call rack() before rendering this page."
+                      }, undefined, false, undefined, this)
+                    }, undefined, false, undefined, this) : groups.map((group) => {
+                      const nodes = tree.filter((r) => (r.metadata.group ?? "General") === group.name);
+                      return /* @__PURE__ */ jsxDEV(Fragment, {
+                        children: [
+                          /* @__PURE__ */ jsxDEV("tr", {
+                            className: "bg-surface-muted",
+                            children: /* @__PURE__ */ jsxDEV("th", {
+                              colSpan: 3,
+                              className: "border-border text-text-muted border-b px-3 py-1.5 text-left text-xs font-medium",
+                              children: [
+                                group.name,
+                                " ",
+                                /* @__PURE__ */ jsxDEV("span", {
+                                  className: "text-text-subtle font-normal",
+                                  children: plural(countNodes(nodes), "resource")
+                                }, undefined, false, undefined, this)
+                              ]
+                            }, undefined, true, undefined, this)
+                          }, undefined, false, undefined, this),
+                          nodes.map((node) => /* @__PURE__ */ jsxDEV(ResourceRow, {
+                            node
+                          }, node.metadata.id, false, undefined, this))
+                        ]
+                      }, group.name, true, undefined, this);
+                    })
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("footer", {
+              className: "border-border text-text-muted mt-6 flex flex-wrap items-center justify-between gap-2 border-t pt-3 text-xs",
+              children: [
+                /* @__PURE__ */ jsxDEV("span", {
+                  children: "elysia-rack"
+                }, undefined, false, undefined, this),
+                donate.enabled ? /* @__PURE__ */ jsxDEV("a", {
+                  href: donate.url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "hover:text-foreground underline-offset-4 hover:underline",
+                  children: donate.label
+                }, undefined, false, undefined, this) : null
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  Dashboard as default
+};