elysia-rack 0.2.0 → 0.3.0

package/dist/{Panel-fbp3wrsw.js → Panel-1qkzh8t7.js}

@@ -1,5 +1,49 @@
+import {
+  Masthead,
+  Sidebar
+} from "./index-0dwhzk3j.js";
+import {
+  getRackTree
+} from "./index-4wxvmd8a.js";
+import {
+  resolveDonateProp
+} from "./index-b8sq8rbd.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-xs",
+    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-breadcrumb-foreground hover:text-foreground",
+              children: item.label
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
+              "aria-current": last ? "page" : undefined,
+              className: last ? "text-foreground font-medium" : "text-breadcrumb-foreground",
+              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/href.ts
 function href(params, over = {}) {
   const query = new URLSearchParams;
@@ -26,8 +70,8 @@ function pageWindow(page, total) {
 }
 
 // src/react/page/components/DataTable.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
-function statusBadge(value) {
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function statusTag(value) {
   if (typeof value !== "string")
     return null;
   const text = value.toLowerCase();
@@ -46,6 +90,11 @@ function cell(value) {
     return JSON.stringify(value);
   return String(value);
 }
+function isNumericColumn(rows, col) {
+  if (rows.length === 0)
+    return false;
+  return rows.every((r) => typeof r[col] === "number" || r[col] == null);
+}
 function DataTable({
   columns,
   rows,
@@ -59,18 +108,20 @@ function DataTable({
   const activeOrder = params.order === "desc" ? "desc" : "asc";
   const pk = primaryKey ?? "id";
   const extra = (selectable ? 1 : 0) + (editable ? 1 : 0);
+  const numeric = new Set(columns.filter((c) => isNumericColumn(rows, c)));
+  const cellClass = (col) => `border-table-border border-t px-3 py-2.5 ${numeric.has(col) ? "text-right tabular-nums" : ""}`;
   if (rows.length === 0)
-    return /* @__PURE__ */ jsxDEV("div", {
-      className: "border-table-border overflow-x-auto rounded-md border",
-      children: /* @__PURE__ */ jsxDEV("table", {
-        className: "bg-table w-full border-collapse text-left text-sm",
+    return /* @__PURE__ */ jsxDEV2("div", {
+      className: "border-border bg-table overflow-x-auto rounded-lg border",
+      children: /* @__PURE__ */ jsxDEV2("table", {
+        className: "w-full border-collapse text-left text-sm",
         "data-selectable": selectable ? true : undefined,
         "data-editable": editable ? true : undefined,
         "data-pk": primaryKey ?? "id",
-        children: /* @__PURE__ */ jsxDEV("tbody", {
+        children: /* @__PURE__ */ jsxDEV2("tbody", {
           "data-panel-rows": true,
-          children: /* @__PURE__ */ jsxDEV("tr", {
-            children: /* @__PURE__ */ jsxDEV("td", {
+          children: /* @__PURE__ */ jsxDEV2("tr", {
+            children: /* @__PURE__ */ jsxDEV2("td", {
               colSpan: columns.length + extra || 1,
               className: "text-text-muted px-4 py-10 text-center",
               children: "No records found."
@@ -79,31 +130,31 @@ function DataTable({
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "border-table-border overflow-x-auto rounded-md border",
-    children: /* @__PURE__ */ jsxDEV("table", {
-      className: "bg-table w-full border-collapse text-left text-sm",
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "border-border bg-table overflow-x-auto rounded-lg border",
+    children: /* @__PURE__ */ jsxDEV2("table", {
+      className: "w-full border-collapse text-left text-sm",
       "data-selectable": selectable ? true : undefined,
       "data-editable": editable ? true : undefined,
       "data-pk": primaryKey ?? "id",
       children: [
-        /* @__PURE__ */ jsxDEV("thead", {
-          children: /* @__PURE__ */ jsxDEV("tr", {
-            className: "bg-table-header",
+        /* @__PURE__ */ jsxDEV2("thead", {
+          children: /* @__PURE__ */ jsxDEV2("tr", {
             children: [
-              selectable ? /* @__PURE__ */ jsxDEV("th", {
-                className: "border-table-border border-b px-4 py-2",
-                children: /* @__PURE__ */ jsxDEV("input", {
+              selectable ? /* @__PURE__ */ jsxDEV2("th", {
+                className: "border-border w-10 border-b px-3 py-2",
+                children: /* @__PURE__ */ jsxDEV2("input", {
                   type: "checkbox",
                   "data-select-all": true,
-                  "aria-label": "Select all"
+                  "aria-label": "Select all",
+                  className: "accent-primary size-4"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this) : null,
-              columns.map((col) => /* @__PURE__ */ jsxDEV("th", {
+              columns.map((col) => /* @__PURE__ */ jsxDEV2("th", {
                 "data-col": col,
-                className: "border-table-border border-b px-4 py-2 text-xs font-bold tracking-wider uppercase",
-                children: sortable?.includes(col) ? /* @__PURE__ */ jsxDEV("a", {
-                  className: "text-link hover:text-link-hover",
+                className: `border-border text-text-muted border-b px-3 py-2 text-xs font-medium ${numeric.has(col) ? "text-right" : ""}`,
+                children: sortable?.includes(col) ? /* @__PURE__ */ jsxDEV2("a", {
+                  className: "hover:text-foreground text-link",
                   "data-qlink": true,
                   "data-sort-link": col,
                   href: href(params, {
@@ -112,61 +163,59 @@ function DataTable({
                   }),
                   children: [
                     col,
-                    /* @__PURE__ */ jsxDEV("span", {
+                    /* @__PURE__ */ jsxDEV2("span", {
                       "data-sort-ind": true,
                       children: activeSort === col ? activeOrder === "asc" ? " ▲" : " ▼" : ""
                     }, undefined, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this) : col
               }, col, false, undefined, this)),
-              editable ? /* @__PURE__ */ jsxDEV("th", {
-                className: "border-table-border border-b px-4 py-2 text-xs font-bold tracking-wider uppercase",
+              editable ? /* @__PURE__ */ jsxDEV2("th", {
+                className: "border-border text-text-muted border-b px-3 py-2 text-right text-xs font-medium",
                 children: "Actions"
               }, undefined, false, undefined, this) : null
             ]
           }, undefined, true, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV("tbody", {
+        /* @__PURE__ */ jsxDEV2("tbody", {
           "data-panel-rows": true,
-          children: rows.map((row, i) => /* @__PURE__ */ jsxDEV("tr", {
+          children: rows.map((row, i) => /* @__PURE__ */ jsxDEV2("tr", {
             className: "hover:bg-table-row-hover",
             children: [
-              selectable ? /* @__PURE__ */ jsxDEV("td", {
-                className: "border-table-border border-t px-4 py-2",
-                children: /* @__PURE__ */ jsxDEV("input", {
+              selectable ? /* @__PURE__ */ jsxDEV2("td", {
+                className: "border-table-border border-t px-3 py-2.5",
+                children: /* @__PURE__ */ jsxDEV2("input", {
                   type: "checkbox",
                   "data-select-row": true,
                   value: String(row[pk] ?? ""),
-                  "aria-label": `Select row ${String(row[pk] ?? i)}`
+                  "aria-label": `Select row ${String(row[pk] ?? i)}`,
+                  className: "accent-primary size-4"
                 }, undefined, false, undefined, this)
               }, undefined, false, undefined, this) : null,
-              columns.map((col) => /* @__PURE__ */ jsxDEV("td", {
-                className: "border-table-border border-t px-4 py-2",
-                children: col === "status" && statusBadge(row[col]) ? /* @__PURE__ */ jsxDEV("span", {
-                  className: `rounded-full px-2 py-0.5 text-xs font-semibold ${statusBadge(row[col]) ?? ""}`,
+              columns.map((col) => /* @__PURE__ */ jsxDEV2("td", {
+                className: cellClass(col),
+                children: col === "status" && statusTag(row[col]) ? /* @__PURE__ */ jsxDEV2("span", {
+                  className: `rounded-sm px-1.5 py-0.5 text-xs font-medium ${statusTag(row[col]) ?? ""}`,
                   children: cell(row[col])
                 }, undefined, false, undefined, this) : cell(row[col])
               }, col, false, undefined, this)),
-              editable ? /* @__PURE__ */ jsxDEV("td", {
-                className: "border-table-border border-t px-4 py-2 whitespace-nowrap",
-                children: /* @__PURE__ */ jsxDEV("div", {
-                  className: "border-table-border inline-flex overflow-hidden rounded-md border",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("button", {
-                      type: "button",
-                      "data-edit-id": String(row[pk] ?? ""),
-                      className: "text-link hover:bg-table-row-hover px-2 py-1 text-sm font-semibold",
-                      children: "Edit"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV("button", {
-                      type: "button",
-                      "data-delete-id": String(row[pk] ?? ""),
-                      className: "border-table-border text-destructive hover:bg-table-row-hover border-l px-2 py-1 text-sm font-semibold",
-                      children: "Delete"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this) : null
+              editable ? /* @__PURE__ */ jsxDEV2("td", {
+                className: "border-table-border whitespace-nowrap border-t px-3 py-2.5 text-right",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("button", {
+                    type: "button",
+                    "data-edit-id": String(row[pk] ?? ""),
+                    className: "text-link hover:text-link-hover px-1 text-sm font-medium hover:underline",
+                    children: "Edit"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("button", {
+                    type: "button",
+                    "data-delete-id": String(row[pk] ?? ""),
+                    className: "text-destructive ml-3 px-1 text-sm font-medium hover:underline",
+                    children: "Delete"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this) : null
             ]
           }, i, true, undefined, this))
         }, undefined, false, undefined, this)
@@ -175,101 +224,22 @@ function DataTable({
   }, undefined, false, undefined, this);
 }
 
-// src/react/page/components/Masthead.tsx
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-function Masthead({ title, group, resource, total }) {
-  const today = new Date().toLocaleDateString("en-US", {
-    weekday: "long",
-    day: "numeric",
-    month: "long",
-    year: "numeric"
-  });
-  return /* @__PURE__ */ jsxDEV2("header", {
-    className: "bg-header text-header-foreground",
-    children: [
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "flex items-center justify-between gap-4 py-2 text-xs tracking-widest text-text-muted uppercase",
-        children: [
-          /* @__PURE__ */ jsxDEV2("span", {
-            children: today
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2("span", {
-            className: "hidden sm:inline",
-            children: "Daily Edition"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2("button", {
-            id: "koran-theme-toggle",
-            type: "button",
-            className: "border-border hover:bg-navigation-hover rounded-full border px-3 py-1 tracking-widest uppercase",
-            children: "◐ Theme"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2("h1", {
-        className: "font-koran py-2 text-center text-5xl font-black tracking-tight",
-        children: title
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "flex items-center justify-center gap-2 pb-3 text-sm text-text-muted",
-        children: [
-          group ? /* @__PURE__ */ jsxDEV2("span", {
-            className: "uppercase",
-            children: group
-          }, undefined, false, undefined, this) : null,
-          group && (resource || total !== undefined) ? /* @__PURE__ */ jsxDEV2("span", {
-            "aria-hidden": "true",
-            children: "·"
-          }, undefined, false, undefined, this) : null,
-          resource ? /* @__PURE__ */ jsxDEV2("span", {
-            className: "font-mono text-xs",
-            children: [
-              "/",
-              resource
-            ]
-          }, undefined, true, undefined, this) : null,
-          total !== undefined ? /* @__PURE__ */ jsxDEV2("span", {
-            children: [
-              total,
-              " records"
-            ]
-          }, undefined, true, undefined, this) : null
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2("div", {
-        className: "koran-rule-double"
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
 // src/react/page/components/Pagination.tsx
 import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-var pageClass = "border-border rounded-md border px-3 py-1 text-sm hover:bg-navigation-hover";
-var currentClass = "bg-primary text-primary-foreground rounded-md px-3 py-1 text-sm font-bold";
-var disabledClass = "border-border text-text-disabled rounded-md border px-3 py-1 text-sm";
+var pageClass = "border-border rounded-md border px-2.5 py-1 text-xs hover:bg-navigation-hover";
+var currentClass = "bg-primary text-primary-foreground rounded-md px-2.5 py-1 text-xs font-medium";
+var disabledClass = "border-border text-text-disabled rounded-md border px-2.5 py-1 text-xs";
 function Pagination({ page, totalPages, total, limit, params }) {
   const from = total === 0 ? 0 : (page - 1) * limit + 1;
   const to = Math.min(page * limit, total);
   return /* @__PURE__ */ jsxDEV3("nav", {
-    className: "flex flex-wrap items-center justify-between gap-3 py-4 text-sm",
+    className: "flex flex-wrap items-center justify-between gap-3 py-3 text-sm",
     children: [
       /* @__PURE__ */ jsxDEV3("p", {
-        className: "text-text-muted",
+        className: "text-text-muted text-xs",
         "data-panel-count": true,
-        children: [
-          "Page ",
-          page,
-          " of ",
-          totalPages,
-          " — ",
-          from,
-          "–",
-          to,
-          " of ",
-          total,
-          " records"
-        ]
-      }, undefined, true, undefined, this),
+        children: total === 0 ? "0 records" : `${from}–${to} of ${total} records`
+      }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV3("div", {
         className: "flex items-center gap-1",
         "data-panel-pages": true,
@@ -278,10 +248,10 @@ function Pagination({ page, totalPages, total, limit, params }) {
             className: pageClass,
             "data-qlink": true,
             href: href(params, { page: page - 1 }),
-            children: "← Previous"
+            children: "Previous"
           }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("span", {
             className: disabledClass,
-            children: "← Previous"
+            children: "Previous"
           }, undefined, false, undefined, this),
           pageWindow(page, totalPages).map((p, i) => p === "…" ? /* @__PURE__ */ jsxDEV3("span", {
             className: "text-text-muted px-1",
@@ -299,10 +269,10 @@ function Pagination({ page, totalPages, total, limit, params }) {
             className: pageClass,
             "data-qlink": true,
             href: href(params, { page: page + 1 }),
-            children: "Next →"
+            children: "Next"
           }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("span", {
             className: disabledClass,
-            children: "Next →"
+            children: "Next"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
@@ -312,36 +282,44 @@ function Pagination({ page, totalPages, total, limit, params }) {
 
 // src/react/page/components/Toolbar.tsx
 import { jsxDEV as jsxDEV4, Fragment } from "react/jsx-dev-runtime";
-var inputClass = "bg-input-background border-input text-foreground placeholder:text-form-placeholder rounded-md border px-3 py-1.5 text-sm";
-var labelClass = "flex flex-col gap-1 text-xs font-semibold tracking-wider text-form-label uppercase";
+var inputClass = "border-input bg-input-background text-foreground placeholder:text-form-placeholder focus:border-ring h-8 rounded-md border px-2.5 text-sm";
+var labelClass = "flex flex-col gap-1";
 function Toolbar({ searchable, filterable, sortable, params }) {
   if (!searchable?.length && !filterable?.length && !sortable?.length)
     return null;
   return /* @__PURE__ */ jsxDEV4("form", {
     method: "get",
     action: "",
-    className: "flex flex-wrap items-end gap-3 py-4",
+    className: "flex flex-wrap items-end gap-3 pb-4",
     children: [
       searchable && searchable.length > 0 ? /* @__PURE__ */ jsxDEV4("label", {
         className: labelClass,
         children: [
-          "Search",
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "text-text-muted text-xs font-medium",
+            children: "Search"
+          }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV4("input", {
             name: "search",
+            "data-search-input": true,
             defaultValue: String(params.search ?? ""),
             placeholder: searchable.join(", "),
-            className: inputClass
+            autoComplete: "off",
+            className: `${inputClass} w-56 max-w-full`
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this) : null,
       (filterable ?? []).map((field) => /* @__PURE__ */ jsxDEV4("label", {
         className: labelClass,
         children: [
-          field,
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "text-text-muted text-xs font-medium",
+            children: field
+          }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV4("input", {
             name: field,
             defaultValue: String(params[field] ?? ""),
-            className: inputClass
+            className: `${inputClass} w-40 max-w-full`
           }, undefined, false, undefined, this)
         ]
       }, field, true, undefined, this)),
@@ -350,7 +328,10 @@ function Toolbar({ searchable, filterable, sortable, params }) {
           /* @__PURE__ */ jsxDEV4("label", {
             className: labelClass,
             children: [
-              "Sort",
+              /* @__PURE__ */ jsxDEV4("span", {
+                className: "text-text-muted text-xs font-medium",
+                children: "Sort"
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV4("select", {
                 name: "sort",
                 defaultValue: String(params.sort ?? ""),
@@ -371,7 +352,10 @@ function Toolbar({ searchable, filterable, sortable, params }) {
           /* @__PURE__ */ jsxDEV4("label", {
             className: labelClass,
             children: [
-              "Order",
+              /* @__PURE__ */ jsxDEV4("span", {
+                className: "text-text-muted text-xs font-medium",
+                children: "Order"
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV4("select", {
                 name: "order",
                 defaultValue: String(params.order ?? ""),
@@ -393,7 +377,7 @@ function Toolbar({ searchable, filterable, sortable, params }) {
       }, undefined, true, undefined, this) : null,
       /* @__PURE__ */ jsxDEV4("button", {
         type: "submit",
-        className: "bg-primary text-primary-foreground rounded-md px-4 py-1.5 text-sm font-semibold",
+        className: "border-border bg-background text-foreground hover:bg-navigation-hover h-8 rounded-md border px-3.5 text-sm font-medium",
         children: "Apply"
       }, undefined, false, undefined, this)
     ]
@@ -402,8 +386,10 @@ function Toolbar({ searchable, filterable, sortable, params }) {
 
 // src/react/page/Panel.tsx
 import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
-var inputClass2 = "bg-input-background border-input text-foreground rounded-md border px-3 py-1.5 text-sm font-normal normal-case";
-var fieldLabelClass = "flex flex-col gap-1 text-xs font-semibold tracking-wider text-form-label uppercase";
+var inputClass2 = "border-input bg-input-background text-foreground placeholder:text-form-placeholder h-9 rounded-md border px-2.5 text-sm";
+var fieldLabelClass = "flex flex-col gap-1.5 text-sm font-medium text-form-label";
+var secondaryButtonClass = "border-border bg-background text-foreground hover:bg-navigation-hover rounded-md border px-3.5 py-1.5 text-sm font-medium";
+var primaryButtonClass = "bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3.5 py-1.5 text-sm font-medium";
 function FieldInput({ field, required }) {
   switch (field.kind) {
     case "enum":
@@ -431,15 +417,15 @@ function FieldInput({ field, required }) {
       }, undefined, true, undefined, this);
     case "boolean":
       return /* @__PURE__ */ jsxDEV5("label", {
-        className: fieldLabelClass,
+        className: `${fieldLabelClass} flex-row items-center gap-2`,
         children: [
-          field.name,
           /* @__PURE__ */ jsxDEV5("input", {
             type: "checkbox",
             name: field.name,
             value: "true",
-            className: "h-4 w-4"
-          }, undefined, false, undefined, this)
+            className: "accent-primary size-4"
+          }, undefined, false, undefined, this),
+          field.name
         ]
       }, undefined, true, undefined, this);
     case "integer":
@@ -498,6 +484,37 @@ function FieldInput({ field, required }) {
       }, undefined, true, undefined, this);
   }
 }
+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 plural(count, word) {
+  return `${count} ${word}${count === 1 ? "" : "s"}`;
+}
 async function Panel(props) {
   const params = props.params ?? {};
   const page = Math.max(Number(params.page ?? 1) || 1, 1);
@@ -505,9 +522,11 @@ async function Panel(props) {
   let rows = [];
   let total = 0;
   if (props.load) {
-    const result = await props.load(params);
-    rows = result.data;
-    total = result.total;
+    try {
+      const result = await props.load(params);
+      rows = result.data;
+      total = result.total;
+    } catch {}
   }
   const columns = rows.length > 0 ? Object.keys(rows[0] ?? {}).filter((c) => c !== "deletedAt") : [];
   const title = props.metadata?.pluralLabel ?? props.metadata?.label ?? props.resource ?? "Panel";
@@ -531,42 +550,61 @@ async function Panel(props) {
   const canEdit = props.operations?.update !== false || props.operations?.replace !== false;
   const canDelete = props.operations?.delete !== false;
   const selectable = canEdit || canDelete;
+  const tree = getRackTree().filter((r) => !r.metadata.hidden);
+  const groups = buildGroupsFromTree(tree, props.resource);
+  const donate = resolveDonateProp(props.donate);
+  const trail = [
+    { label: "Dashboard", href: "/" },
+    ...props.metadata?.group ? [{ label: props.metadata.group }] : [],
+    { label: title }
+  ];
   return /* @__PURE__ */ jsxDEV5("div", {
-    className: "koran-paper font-koran-body text-foreground min-h-screen",
-    children: /* @__PURE__ */ jsxDEV5("div", {
-      className: "mx-auto max-w-5xl px-4 pb-10 sm:px-6",
-      children: [
-        /* @__PURE__ */ jsxDEV5(Masthead, {
-          title,
-          group: props.metadata?.group,
-          resource: props.resource,
-          total
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5("div", {
-          "data-query-url": props.queryUrl,
+    className: "text-foreground flex min-h-screen flex-col lg:flex-row",
+    children: [
+      /* @__PURE__ */ jsxDEV5(Sidebar, {
+        title: "Panel",
+        groups
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("main", {
+        className: "min-w-0 flex-1",
+        children: /* @__PURE__ */ jsxDEV5("div", {
+          className: "mx-auto w-full max-w-5xl px-4 py-4 sm:px-6",
           children: [
-            /* @__PURE__ */ jsxDEV5(Toolbar, {
-              searchable: props.query?.searchable,
-              filterable: props.query?.filterable,
-              sortable: props.query?.sortable,
-              params
+            /* @__PURE__ */ jsxDEV5(Breadcrumb, {
+              trail
             }, undefined, false, undefined, this),
             /* @__PURE__ */ jsxDEV5("div", {
-              className: "flex items-center justify-between gap-3 pb-3",
+              "data-query-url": props.queryUrl,
               children: [
+                /* @__PURE__ */ jsxDEV5(Masthead, {
+                  title,
+                  detail: plural(total, "record"),
+                  actions: canCreate ? /* @__PURE__ */ jsxDEV5("button", {
+                    type: "button",
+                    "data-open-create": true,
+                    className: primaryButtonClass,
+                    children: "New record"
+                  }, undefined, false, undefined, this) : undefined
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5(Toolbar, {
+                  searchable: props.query?.searchable,
+                  filterable: props.query?.filterable,
+                  sortable: props.query?.sortable,
+                  params
+                }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV5("div", {
                   "data-bulk-bar": true,
                   style: { display: "none" },
-                  className: "items-center gap-2",
+                  className: "flex flex-wrap items-center gap-2 pb-3",
                   children: [
                     /* @__PURE__ */ jsxDEV5("span", {
                       "data-bulk-count": true,
-                      className: "text-sm text-text-muted"
+                      className: "text-text-muted text-xs"
                     }, undefined, false, undefined, this),
                     canDelete ? /* @__PURE__ */ jsxDEV5("button", {
                       type: "button",
                       "data-bulk-delete": true,
-                      className: "bg-destructive text-destructive-foreground rounded-md px-3 py-1.5 text-sm font-semibold",
+                      className: "bg-destructive text-destructive-foreground rounded-md px-3 py-1.5 text-xs font-medium",
                       children: "Delete selected"
                     }, undefined, false, undefined, this) : null,
                     canEdit ? /* @__PURE__ */ jsxDEV5("span", {
@@ -575,7 +613,7 @@ async function Panel(props) {
                         /* @__PURE__ */ jsxDEV5("select", {
                           "data-bulk-field": true,
                           "aria-label": "Bulk field",
-                          className: "bg-input-background border-input rounded-md border px-2 py-1.5 text-sm",
+                          className: "border-input bg-input-background h-8 rounded-md border px-2 text-xs",
                           children: editFields.map((f) => /* @__PURE__ */ jsxDEV5("option", {
                             value: f.name,
                             children: f.name
@@ -585,12 +623,12 @@ async function Panel(props) {
                           "data-bulk-value": true,
                           placeholder: "New value",
                           "aria-label": "Bulk value",
-                          className: "bg-input-background border-input placeholder:text-form-placeholder rounded-md border px-2 py-1.5 text-sm"
+                          className: "border-input bg-input-background placeholder:text-form-placeholder h-8 rounded-md border px-2 text-xs"
                         }, undefined, false, undefined, this),
                         /* @__PURE__ */ jsxDEV5("button", {
                           type: "button",
                           "data-bulk-apply": true,
-                          className: "bg-secondary text-secondary-foreground rounded-md px-3 py-1.5 text-sm font-semibold",
+                          className: "bg-secondary text-secondary-foreground hover:bg-navigation-hover rounded-md px-3 py-1.5 text-xs font-medium",
                           children: "Apply"
                         }, undefined, false, undefined, this)
                       ]
@@ -598,140 +636,146 @@ async function Panel(props) {
                     /* @__PURE__ */ jsxDEV5("button", {
                       type: "button",
                       "data-bulk-clear": true,
-                      className: "text-text-muted text-sm underline",
+                      className: "text-text-muted hover:text-foreground text-xs underline",
                       children: "Clear"
                     }, undefined, false, undefined, this)
                   ]
                 }, undefined, true, undefined, this),
-                canCreate ? /* @__PURE__ */ jsxDEV5("button", {
-                  type: "button",
-                  "data-open-create": true,
-                  className: "bg-primary text-primary-foreground ml-auto rounded-md px-4 py-1.5 text-sm font-semibold",
-                  children: "+ New"
-                }, undefined, false, undefined, this) : null
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV5(DataTable, {
-              columns,
-              rows,
-              sortable: props.query?.sortable,
-              params,
-              selectable,
-              editable: canEdit || canDelete,
-              primaryKey: pk
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV5(Pagination, {
-              page,
-              totalPages,
-              total,
-              limit,
-              params
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV5("dialog", {
-              id: "rack-create",
-              className: "bg-card text-card-foreground rounded-lg border p-0",
-              children: /* @__PURE__ */ jsxDEV5("form", {
-                "data-create-form": true,
-                className: "flex min-w-80 flex-col gap-3 p-6",
-                children: [
-                  /* @__PURE__ */ jsxDEV5("h2", {
-                    className: "font-koran text-2xl font-bold",
-                    children: "New record"
-                  }, undefined, false, undefined, this),
-                  createFields.length > 0 ? createFields.map((f) => /* @__PURE__ */ jsxDEV5(FieldInput, {
-                    field: f,
-                    required: isRequired(f)
-                  }, f.name, false, undefined, this)) : /* @__PURE__ */ jsxDEV5("label", {
-                    className: "flex flex-col gap-1 text-xs font-semibold tracking-wider text-form-label uppercase",
-                    children: [
-                      "JSON body",
-                      /* @__PURE__ */ jsxDEV5("textarea", {
-                        "data-create-json": true,
-                        rows: 4,
-                        placeholder: '{"name": "..."}',
-                        className: "bg-input-background border-input text-foreground rounded-md border px-3 py-1.5 font-mono text-sm font-normal normal-case"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("p", {
-                    "data-form-error": true,
-                    className: "text-form-error text-sm"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("div", {
-                    className: "flex justify-end gap-2",
+                /* @__PURE__ */ jsxDEV5(DataTable, {
+                  columns,
+                  rows,
+                  sortable: props.query?.sortable,
+                  params,
+                  selectable,
+                  editable: canEdit || canDelete,
+                  primaryKey: pk
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5(Pagination, {
+                  page,
+                  totalPages,
+                  total,
+                  limit,
+                  params
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("dialog", {
+                  id: "rack-create",
+                  className: "bg-card text-card-foreground w-full max-w-md rounded-lg border p-0 shadow-lg",
+                  children: /* @__PURE__ */ jsxDEV5("form", {
+                    "data-create-form": true,
+                    className: "flex flex-col gap-4 p-5",
                     children: [
-                      /* @__PURE__ */ jsxDEV5("button", {
-                        type: "button",
-                        "data-close": true,
-                        className: "border-border rounded-md border px-4 py-1.5 text-sm",
-                        children: "Cancel"
+                      /* @__PURE__ */ jsxDEV5("h2", {
+                        className: "font-display text-xl leading-tight",
+                        children: "New record"
+                      }, undefined, false, undefined, this),
+                      createFields.length > 0 ? createFields.map((f) => /* @__PURE__ */ jsxDEV5(FieldInput, {
+                        field: f,
+                        required: isRequired(f)
+                      }, f.name, false, undefined, this)) : /* @__PURE__ */ jsxDEV5("label", {
+                        className: "flex flex-col gap-1.5 text-sm font-medium text-form-label",
+                        children: [
+                          "JSON body",
+                          /* @__PURE__ */ jsxDEV5("textarea", {
+                            "data-create-json": true,
+                            rows: 4,
+                            placeholder: '{"name": "..."}',
+                            className: `${inputClass2} h-auto font-mono`
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("p", {
+                        "data-form-error": true,
+                        className: "text-form-error text-sm"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("button", {
-                        type: "submit",
-                        className: "bg-primary text-primary-foreground rounded-md px-4 py-1.5 text-sm font-semibold",
-                        children: "Create"
-                      }, undefined, false, undefined, this)
+                      /* @__PURE__ */ jsxDEV5("div", {
+                        className: "border-border flex justify-end gap-2 border-t pt-4",
+                        children: [
+                          /* @__PURE__ */ jsxDEV5("button", {
+                            type: "button",
+                            "data-close": true,
+                            className: secondaryButtonClass,
+                            children: "Cancel"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV5("button", {
+                            type: "submit",
+                            className: primaryButtonClass,
+                            children: "Create"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV5("dialog", {
-              id: "rack-edit",
-              className: "bg-card text-card-foreground rounded-lg border p-0",
-              children: /* @__PURE__ */ jsxDEV5("form", {
-                "data-edit-form": true,
-                className: "flex min-w-80 flex-col gap-3 p-6",
-                children: [
-                  /* @__PURE__ */ jsxDEV5("h2", {
-                    className: "font-koran text-2xl font-bold",
-                    children: [
-                      "Edit record ",
-                      /* @__PURE__ */ jsxDEV5("span", {
-                        "data-edit-id-label": true,
-                        className: "text-text-muted text-lg"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  editFields.map((f) => /* @__PURE__ */ jsxDEV5(FieldInput, {
-                    field: f
-                  }, f.name, false, undefined, this)),
-                  /* @__PURE__ */ jsxDEV5("p", {
-                    "data-form-error": true,
-                    className: "text-form-error text-sm"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV5("div", {
-                    className: "flex justify-end gap-2",
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("dialog", {
+                  id: "rack-edit",
+                  className: "bg-card text-card-foreground w-full max-w-md rounded-lg border p-0 shadow-lg",
+                  children: /* @__PURE__ */ jsxDEV5("form", {
+                    "data-edit-form": true,
+                    className: "flex flex-col gap-4 p-5",
                     children: [
-                      /* @__PURE__ */ jsxDEV5("button", {
-                        type: "button",
-                        "data-close": true,
-                        className: "border-border rounded-md border px-4 py-1.5 text-sm",
-                        children: "Cancel"
+                      /* @__PURE__ */ jsxDEV5("h2", {
+                        className: "font-display text-xl leading-tight",
+                        children: [
+                          "Edit record",
+                          " ",
+                          /* @__PURE__ */ jsxDEV5("span", {
+                            "data-edit-id-label": true,
+                            className: "text-text-muted font-mono text-sm"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      editFields.map((f) => /* @__PURE__ */ jsxDEV5(FieldInput, {
+                        field: f
+                      }, f.name, false, undefined, this)),
+                      /* @__PURE__ */ jsxDEV5("p", {
+                        "data-form-error": true,
+                        className: "text-form-error text-sm"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV5("button", {
-                        type: "submit",
-                        className: "bg-primary text-primary-foreground rounded-md px-4 py-1.5 text-sm font-semibold",
-                        children: "Save"
-                      }, undefined, false, undefined, this)
+                      /* @__PURE__ */ jsxDEV5("div", {
+                        className: "border-border flex justify-end gap-2 border-t pt-4",
+                        children: [
+                          /* @__PURE__ */ jsxDEV5("button", {
+                            type: "button",
+                            "data-close": true,
+                            className: secondaryButtonClass,
+                            children: "Cancel"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV5("button", {
+                            type: "submit",
+                            className: primaryButtonClass,
+                            children: "Save"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV5("script", {
-              type: "module",
-              src: "/__rack/panel-app.js"
-            }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("script", {
+                  type: "module",
+                  src: "/__rack/panel-app.js"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV5("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__ */ jsxDEV5("span", {
+                  children: "elysia-rack"
+                }, undefined, false, undefined, this),
+                donate.enabled ? /* @__PURE__ */ jsxDEV5("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),
-        /* @__PURE__ */ jsxDEV5("footer", {
-          className: "border-border text-text-muted border-t pt-3 text-center text-xs tracking-widest uppercase",
-          children: "Printed by elysia-rack"
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
 export {
   Panel as default