elysia-rack 0.4.0 → 0.5.2

package/dist/Panel-5wx7qpqt.js

@@ -0,0 +1,1159 @@
+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/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;
+  for (const [key, value] of Object.entries({ ...params, ...over })) {
+    if (value === undefined || value === null || value === "")
+      continue;
+    query.set(key, Array.isArray(value) ? value.join(",") : String(value));
+  }
+  const str = query.toString();
+  return str ? `?${str}` : "?";
+}
+function pageWindow(page, total) {
+  const keep = new Set([1, total, page - 1, page, page + 1]);
+  const sorted = [...keep].filter((p) => p >= 1 && p <= total).sort((a, b) => a - b);
+  const out = [];
+  let prev = 0;
+  for (const p of sorted) {
+    if (p - prev > 1)
+      out.push("…");
+    out.push(p);
+    prev = p;
+  }
+  return out;
+}
+
+// src/react/page/components/panelFields.ts
+function defaultFormat(kind) {
+  switch (kind) {
+    case "integer":
+    case "number":
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "date":
+      return "datetime";
+    case "json":
+      return "json";
+    default:
+      return "text";
+  }
+}
+function toDescriptor(name, primaryKey) {
+  return {
+    name,
+    kind: "text",
+    primary: name === primaryKey,
+    autoIncrement: false,
+    nullable: true
+  };
+}
+async function buildPanelFields(input) {
+  const config = input.config ?? {};
+  const hidden = new Set(input.hiddenFields ?? []);
+  const base = input.fields?.length ? input.fields : input.columns.map((name) => toDescriptor(name, input.primaryKey));
+  const out = [];
+  base.forEach((field, index) => {
+    if (field.name === input.deletedAtField)
+      return;
+    const cfg = config[field.name] ?? {};
+    const hide = hidden.has(field.name) || cfg.hideInTable === true;
+    const hideInForm = hidden.has(field.name) || cfg.hideInForm === true || cfg.readOnly === true;
+    out.push({
+      name: field.name,
+      label: cfg.label ?? field.name,
+      kind: field.kind,
+      format: cfg.format ?? defaultFormat(field.kind),
+      ...cfg.currency !== undefined ? { currency: cfg.currency } : {},
+      nullable: field.nullable,
+      primary: field.primary,
+      autoIncrement: field.autoIncrement,
+      readOnly: cfg.readOnly === true,
+      hideInTable: hide,
+      hideInForm,
+      ...field.enumValues !== undefined ? { enumValues: field.enumValues } : {},
+      order: cfg.order ?? index
+    });
+  });
+  for (const field of out) {
+    const relation = config[field.name]?.relation;
+    if (!relation)
+      continue;
+    const options = relation.options ?? (relation.load ? await relation.load() : undefined) ?? [];
+    field.relation = [...options];
+  }
+  return out.map((field, index) => ({ field, index })).sort((a, b) => a.field.order === b.field.order ? a.index - b.index : a.field.order - b.field.order).map(({ field }) => field);
+}
+function isNumericField(field) {
+  return field.format === "number" || field.format === "currency" || field.kind === "integer" || field.kind === "number";
+}
+function formatDate(value, withTime) {
+  const date = new Date(String(value));
+  if (Number.isNaN(date.getTime()))
+    return String(value);
+  return withTime ? date.toLocaleString("en-US") : date.toLocaleDateString("en-US");
+}
+function displayValue(field, value) {
+  if (value === null || value === undefined)
+    return "";
+  if (field?.relation) {
+    const match = field.relation.find((o) => String(o.value) === String(value));
+    if (match)
+      return match.label;
+  }
+  switch (field?.format) {
+    case "boolean":
+      return value === true || value === "true" || value === 1 ? "Yes" : "No";
+    case "date":
+      return formatDate(value, false);
+    case "datetime":
+      return formatDate(value, true);
+    case "currency": {
+      const amount = Number(value);
+      if (Number.isNaN(amount))
+        return String(value);
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: field.currency ?? "USD"
+      }).format(amount);
+    }
+    case "number":
+      return Number.isNaN(Number(value)) ? String(value) : Number(value).toLocaleString("en-US");
+    case "json":
+      return typeof value === "object" ? JSON.stringify(value) : String(value);
+    default:
+      return typeof value === "object" ? JSON.stringify(value) : String(value);
+  }
+}
+
+// src/react/page/components/DataTable.tsx
+import { jsxDEV as jsxDEV2, Fragment } from "react/jsx-dev-runtime";
+function actionHref(action, id) {
+  return action.href.replaceAll(":id", encodeURIComponent(id));
+}
+function badgeClass(value) {
+  if (typeof value !== "string")
+    return "bg-badge-background text-badge-foreground";
+  const text = value.toLowerCase();
+  if (text === "active")
+    return "bg-success-muted text-success-muted-foreground";
+  if (text === "archived")
+    return "bg-warning-muted text-warning-muted-foreground";
+  return "bg-badge-background text-badge-foreground";
+}
+function RowAction({ action, id }) {
+  const className = "text-link hover:text-link-hover ml-3 px-1 text-sm font-medium hover:underline";
+  if (action.method) {
+    return /* @__PURE__ */ jsxDEV2("button", {
+      type: "button",
+      "data-rack-href": actionHref(action, id),
+      "data-rack-method": action.method,
+      "data-rack-confirm": action.confirm,
+      className,
+      children: action.label
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2("a", {
+    href: actionHref(action, id),
+    className,
+    children: action.label
+  }, undefined, false, undefined, this);
+}
+function DataTable({
+  fields,
+  rows,
+  sortable,
+  params,
+  selectable,
+  editable,
+  viewable,
+  actions,
+  primaryKey,
+  softDelete,
+  restorable,
+  deletedAtField
+}) {
+  const activeSort = typeof params.sort === "string" ? params.sort : "";
+  const activeOrder = params.order === "desc" ? "desc" : "asc";
+  const pk = primaryKey ?? "id";
+  const deletedAt = deletedAtField ?? "deletedAt";
+  const rowActions = actions ?? [];
+  const columns = fields.filter((f) => !f.hideInTable);
+  const showActions = Boolean(editable) || Boolean(viewable) || Boolean(softDelete) || rowActions.length > 0;
+  const extra = (selectable ? 1 : 0) + (showActions ? 1 : 0);
+  const cellClass = (field) => `border-table-border border-t px-3 py-2.5 ${isNumericField(field) ? "text-right tabular-nums" : ""}`;
+  const tableAttrs = {
+    "data-selectable": selectable ? true : undefined,
+    "data-editable": editable ? true : undefined,
+    "data-viewable": viewable ? true : undefined,
+    "data-soft-delete": softDelete ? true : undefined,
+    "data-restorable": restorable ? true : undefined,
+    "data-deleted-at": deletedAt,
+    "data-rack-fields": JSON.stringify(fields),
+    "data-rack-actions": rowActions.length > 0 ? JSON.stringify(rowActions) : undefined,
+    "data-pk": pk
+  };
+  if (rows.length === 0)
+    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",
+        ...tableAttrs,
+        children: /* @__PURE__ */ jsxDEV2("tbody", {
+          "data-panel-rows": true,
+          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."
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  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",
+      ...tableAttrs,
+      children: [
+        /* @__PURE__ */ jsxDEV2("thead", {
+          children: /* @__PURE__ */ jsxDEV2("tr", {
+            children: [
+              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",
+                  className: "accent-primary size-4"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this) : null,
+              columns.map((field) => /* @__PURE__ */ jsxDEV2("th", {
+                "data-col": field.name,
+                className: `border-border text-text-muted border-b px-3 py-2 text-xs font-medium ${isNumericField(field) ? "text-right" : ""}`,
+                children: sortable?.includes(field.name) ? /* @__PURE__ */ jsxDEV2("a", {
+                  className: "hover:text-foreground text-link",
+                  "data-qlink": true,
+                  "data-sort-link": field.name,
+                  href: href(params, {
+                    sort: field.name,
+                    order: activeSort === field.name && activeOrder === "asc" ? "desc" : "asc"
+                  }),
+                  children: [
+                    field.label,
+                    /* @__PURE__ */ jsxDEV2("span", {
+                      "data-sort-ind": true,
+                      children: activeSort === field.name ? activeOrder === "asc" ? " ▲" : " ▼" : ""
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this) : field.label
+              }, field.name, false, undefined, this)),
+              showActions ? /* @__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__ */ jsxDEV2("tbody", {
+          "data-panel-rows": true,
+          children: rows.map((row, i) => {
+            const id = String(row[pk] ?? "");
+            const deleted = Boolean(softDelete && row[deletedAt] != null);
+            return /* @__PURE__ */ jsxDEV2("tr", {
+              className: "hover:bg-table-row-hover",
+              children: [
+                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: id,
+                    "aria-label": `Select row ${id || i}`,
+                    className: "accent-primary size-4"
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this) : null,
+                columns.map((field) => {
+                  const value = row[field.name];
+                  const badge = field.format === "badge" || field.name === "status";
+                  return /* @__PURE__ */ jsxDEV2("td", {
+                    className: cellClass(field),
+                    children: badge ? value === null || value === undefined ? "" : /* @__PURE__ */ jsxDEV2("span", {
+                      className: `rounded-sm px-1.5 py-0.5 text-xs font-medium ${badgeClass(value)}`,
+                      children: displayValue(field, value)
+                    }, undefined, false, undefined, this) : displayValue(field, value)
+                  }, field.name, false, undefined, this);
+                }),
+                showActions ? /* @__PURE__ */ jsxDEV2("td", {
+                  className: "border-table-border whitespace-nowrap border-t px-3 py-2.5 text-right",
+                  children: deleted ? restorable ? /* @__PURE__ */ jsxDEV2("button", {
+                    type: "button",
+                    "data-restore-id": id,
+                    className: "text-link hover:text-link-hover px-1 text-sm font-medium hover:underline",
+                    children: "Restore"
+                  }, undefined, false, undefined, this) : null : /* @__PURE__ */ jsxDEV2(Fragment, {
+                    children: [
+                      viewable ? /* @__PURE__ */ jsxDEV2("button", {
+                        type: "button",
+                        "data-view-id": id,
+                        className: "text-link hover:text-link-hover px-1 text-sm font-medium hover:underline",
+                        children: "View"
+                      }, undefined, false, undefined, this) : null,
+                      editable ? /* @__PURE__ */ jsxDEV2(Fragment, {
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("button", {
+                            type: "button",
+                            "data-edit-id": id,
+                            className: "text-link hover:text-link-hover ml-3 px-1 text-sm font-medium hover:underline",
+                            children: "Edit"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("button", {
+                            type: "button",
+                            "data-delete-id": id,
+                            className: "text-destructive ml-3 px-1 text-sm font-medium hover:underline",
+                            children: "Delete"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this) : null,
+                      rowActions.map((action, a) => /* @__PURE__ */ jsxDEV2(RowAction, {
+                        action,
+                        id
+                      }, a, false, undefined, this))
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this) : null
+              ]
+            }, i, true, undefined, this);
+          })
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, 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-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-3 text-sm",
+    children: [
+      /* @__PURE__ */ jsxDEV3("p", {
+        className: "text-text-muted text-xs",
+        "data-panel-count": true,
+        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,
+        children: [
+          page > 1 ? /* @__PURE__ */ jsxDEV3("a", {
+            className: pageClass,
+            "data-qlink": true,
+            href: href(params, { page: page - 1 }),
+            children: "Previous"
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("span", {
+            className: disabledClass,
+            children: "Previous"
+          }, undefined, false, undefined, this),
+          pageWindow(page, totalPages).map((p, i) => p === "…" ? /* @__PURE__ */ jsxDEV3("span", {
+            className: "text-text-muted px-1",
+            children: "…"
+          }, `e${i}`, false, undefined, this) : p === page ? /* @__PURE__ */ jsxDEV3("span", {
+            className: currentClass,
+            children: p
+          }, p, false, undefined, this) : /* @__PURE__ */ jsxDEV3("a", {
+            className: pageClass,
+            "data-qlink": true,
+            href: href(params, { page: p }),
+            children: p
+          }, p, false, undefined, this)),
+          page < totalPages ? /* @__PURE__ */ jsxDEV3("a", {
+            className: pageClass,
+            "data-qlink": true,
+            href: href(params, { page: page + 1 }),
+            children: "Next"
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("span", {
+            className: disabledClass,
+            children: "Next"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/react/page/components/Toolbar.tsx
+import { jsxDEV as jsxDEV4, Fragment as Fragment2 } from "react/jsx-dev-runtime";
+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 FilterInput({ field, value }) {
+  const current = value === undefined || value === null ? "" : String(value);
+  if (field?.relation) {
+    return /* @__PURE__ */ jsxDEV4("select", {
+      name: field.name,
+      defaultValue: current,
+      className: `${inputClass} w-40`,
+      children: [
+        /* @__PURE__ */ jsxDEV4("option", {
+          value: "",
+          children: "All"
+        }, undefined, false, undefined, this),
+        field.relation.map((option) => /* @__PURE__ */ jsxDEV4("option", {
+          value: String(option.value),
+          children: option.label
+        }, String(option.value), false, undefined, this))
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (field?.kind === "enum") {
+    return /* @__PURE__ */ jsxDEV4("select", {
+      name: field.name,
+      defaultValue: current,
+      className: `${inputClass} w-40`,
+      children: [
+        /* @__PURE__ */ jsxDEV4("option", {
+          value: "",
+          children: "All"
+        }, undefined, false, undefined, this),
+        (field.enumValues ?? []).map((v) => /* @__PURE__ */ jsxDEV4("option", {
+          value: v,
+          children: v
+        }, v, false, undefined, this))
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (field?.kind === "boolean") {
+    return /* @__PURE__ */ jsxDEV4("select", {
+      name: field.name,
+      defaultValue: current,
+      className: `${inputClass} w-40`,
+      children: [
+        /* @__PURE__ */ jsxDEV4("option", {
+          value: "",
+          children: "All"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4("option", {
+          value: "true",
+          children: "Yes"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4("option", {
+          value: "false",
+          children: "No"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (field?.kind === "date") {
+    return /* @__PURE__ */ jsxDEV4("input", {
+      type: "date",
+      name: field.name,
+      defaultValue: current,
+      className: `${inputClass} w-40`
+    }, undefined, false, undefined, this);
+  }
+  if (field?.kind === "integer" || field?.kind === "number") {
+    return /* @__PURE__ */ jsxDEV4("input", {
+      type: "number",
+      name: field.name,
+      defaultValue: current,
+      className: `${inputClass} w-40`
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV4("input", {
+    name: field?.name ?? "",
+    defaultValue: current,
+    className: `${inputClass} w-40`
+  }, undefined, false, undefined, this);
+}
+function Toolbar({
+  fields,
+  searchable,
+  filterable,
+  sortable,
+  params,
+  softDelete,
+  includeDeleted
+}) {
+  const hasFilters = Boolean(searchable?.length) || Boolean(filterable?.length) || Boolean(sortable?.length) || Boolean(softDelete);
+  if (!hasFilters)
+    return null;
+  const byName = new Map((fields ?? []).map((f) => [f.name, f]));
+  const label = (name) => byName.get(name)?.label ?? name;
+  const searchLabel = (searchable ?? []).map(label).join(", ");
+  return /* @__PURE__ */ jsxDEV4("form", {
+    method: "get",
+    action: "",
+    className: "flex flex-wrap items-end gap-3 pb-4",
+    children: [
+      includeDeleted ? /* @__PURE__ */ jsxDEV4("input", {
+        type: "hidden",
+        name: "includeDeleted",
+        value: "true"
+      }, undefined, false, undefined, this) : null,
+      searchable && searchable.length > 0 ? /* @__PURE__ */ jsxDEV4("label", {
+        className: labelClass,
+        children: [
+          /* @__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: searchLabel,
+            autoComplete: "off",
+            className: `${inputClass} w-56 max-w-full`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : null,
+      (filterable ?? []).map((name) => /* @__PURE__ */ jsxDEV4("label", {
+        className: labelClass,
+        children: [
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "text-text-muted text-xs font-medium",
+            children: label(name)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(FilterInput, {
+            field: byName.get(name),
+            value: params[name]
+          }, undefined, false, undefined, this)
+        ]
+      }, name, true, undefined, this)),
+      sortable && sortable.length > 0 ? /* @__PURE__ */ jsxDEV4(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsxDEV4("label", {
+            className: labelClass,
+            children: [
+              /* @__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 ?? ""),
+                className: inputClass,
+                children: [
+                  /* @__PURE__ */ jsxDEV4("option", {
+                    value: "",
+                    children: "Default"
+                  }, undefined, false, undefined, this),
+                  sortable.map((name) => /* @__PURE__ */ jsxDEV4("option", {
+                    value: name,
+                    children: label(name)
+                  }, name, false, undefined, this))
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4("label", {
+            className: labelClass,
+            children: [
+              /* @__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 ?? ""),
+                className: inputClass,
+                children: [
+                  /* @__PURE__ */ jsxDEV4("option", {
+                    value: "",
+                    children: "Default"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("option", {
+                    value: "asc",
+                    children: "Ascending"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV4("option", {
+                    value: "desc",
+                    children: "Descending"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV4("button", {
+        type: "submit",
+        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),
+      softDelete ? /* @__PURE__ */ jsxDEV4("a", {
+        "data-qlink": true,
+        href: href(params, {
+          includeDeleted: includeDeleted ? undefined : "true",
+          page: 1
+        }),
+        className: "text-text-muted hover:text-foreground h-8 self-end text-sm underline underline-offset-4",
+        children: includeDeleted ? "Hide deleted" : "Show deleted"
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/react/page/Panel.tsx
+import { jsxDEV as jsxDEV5, Fragment as Fragment3 } from "react/jsx-dev-runtime";
+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 }) {
+  if (field.relation) {
+    return /* @__PURE__ */ jsxDEV5("label", {
+      className: fieldLabelClass,
+      children: [
+        field.label,
+        /* @__PURE__ */ jsxDEV5("select", {
+          name: field.name,
+          required,
+          defaultValue: "",
+          className: inputClass2,
+          children: [
+            /* @__PURE__ */ jsxDEV5("option", {
+              value: "",
+              children: "Select"
+            }, undefined, false, undefined, this),
+            field.relation.map((option) => /* @__PURE__ */ jsxDEV5("option", {
+              value: String(option.value),
+              children: option.label
+            }, String(option.value), false, undefined, this))
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  switch (field.kind) {
+    case "enum":
+      return /* @__PURE__ */ jsxDEV5("label", {
+        className: fieldLabelClass,
+        children: [
+          field.label,
+          /* @__PURE__ */ jsxDEV5("select", {
+            name: field.name,
+            required,
+            defaultValue: "",
+            className: inputClass2,
+            children: [
+              /* @__PURE__ */ jsxDEV5("option", {
+                value: "",
+                children: "Select"
+              }, undefined, false, undefined, this),
+              (field.enumValues ?? []).map((v) => /* @__PURE__ */ jsxDEV5("option", {
+                value: v,
+                children: v
+              }, v, false, undefined, this))
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "boolean":
+      return /* @__PURE__ */ jsxDEV5("label", {
+        className: `${fieldLabelClass} flex-row items-center gap-2`,
+        children: [
+          /* @__PURE__ */ jsxDEV5("input", {
+            type: "checkbox",
+            name: field.name,
+            value: "true",
+            className: "accent-primary size-4"
+          }, undefined, false, undefined, this),
+          field.label
+        ]
+      }, undefined, true, undefined, this);
+    case "integer":
+    case "number":
+      return /* @__PURE__ */ jsxDEV5("label", {
+        className: fieldLabelClass,
+        children: [
+          field.label,
+          /* @__PURE__ */ jsxDEV5("input", {
+            type: "number",
+            step: field.kind === "number" ? "any" : "1",
+            name: field.name,
+            required,
+            className: inputClass2
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "date":
+      return /* @__PURE__ */ jsxDEV5("label", {
+        className: fieldLabelClass,
+        children: [
+          field.label,
+          /* @__PURE__ */ jsxDEV5("input", {
+            type: "datetime-local",
+            name: field.name,
+            required,
+            className: inputClass2
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    case "json":
+      return /* @__PURE__ */ jsxDEV5("label", {
+        className: fieldLabelClass,
+        children: [
+          field.label,
+          /* @__PURE__ */ jsxDEV5("textarea", {
+            name: field.name,
+            "data-json": true,
+            rows: 3,
+            placeholder: "{}",
+            className: `${inputClass2} font-mono`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    default:
+      return /* @__PURE__ */ jsxDEV5("label", {
+        className: fieldLabelClass,
+        children: [
+          field.label,
+          /* @__PURE__ */ jsxDEV5("input", {
+            name: field.name,
+            required,
+            className: inputClass2
+          }, undefined, false, undefined, this)
+        ]
+      }, 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"}`;
+}
+function CustomActionButton({ action }) {
+  const content = /* @__PURE__ */ jsxDEV5(Fragment3, {
+    children: [
+      action.icon ? /* @__PURE__ */ jsxDEV5(RackIcon, {
+        name: action.icon,
+        size: 14,
+        className: "size-3.5"
+      }, undefined, false, undefined, this) : null,
+      action.label
+    ]
+  }, undefined, true, undefined, this);
+  if (action.method) {
+    return /* @__PURE__ */ jsxDEV5("button", {
+      type: "button",
+      "data-rack-href": action.href,
+      "data-rack-method": action.method,
+      "data-rack-confirm": action.confirm,
+      className: `${secondaryButtonClass} inline-flex items-center gap-1.5`,
+      children: content
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV5("a", {
+    href: action.href,
+    className: `${secondaryButtonClass} inline-flex items-center gap-1.5`,
+    children: content
+  }, undefined, false, undefined, this);
+}
+async function Panel(props) {
+  const params = props.params ?? {};
+  const page = Math.max(Number(params.page ?? 1) || 1, 1);
+  const limit = Math.max(Number(params.limit ?? props.query?.pagination?.default ?? 20) || 1, 1);
+  let rows = [];
+  let total = 0;
+  if (props.load) {
+    try {
+      const result = await props.load(params);
+      rows = result.data;
+      total = result.total;
+    } catch {}
+  }
+  const title = props.metadata?.pluralLabel ?? props.metadata?.label ?? props.resource ?? "Panel";
+  const totalPages = Math.max(1, Math.ceil(total / limit));
+  const pk = props.primaryKey ?? "id";
+  const deletedAt = props.deletedAtField ?? "deletedAt";
+  const rawColumns = rows.length > 0 ? Object.keys(rows[0] ?? {}) : [];
+  const fields = await buildPanelFields({
+    fields: props.fields,
+    columns: rawColumns,
+    config: props.metadata?.fields,
+    hiddenFields: props.metadata?.hiddenFields,
+    primaryKey: pk,
+    deletedAtField: deletedAt
+  });
+  const tableFields = fields.filter((f) => !f.hideInTable);
+  const formFields = fields.filter((f) => !f.hideInForm && !f.autoIncrement);
+  const createFields = formFields;
+  const editFields = formFields.filter((f) => f.name !== pk);
+  const isRequired = (f) => !f.nullable && f.kind !== "boolean";
+  const canCreate = props.operations?.create !== false;
+  const canEdit = props.operations?.update !== false || props.operations?.replace !== false;
+  const canDelete = props.operations?.delete !== false;
+  const canView = props.operations?.detail !== false;
+  const softDelete = props.softDelete === true;
+  const selectable = canEdit || canDelete;
+  const allActions = props.actions ?? [];
+  const rowActions = allActions.filter((a) => (a.scope ?? "row") === "row");
+  const toolbarActions = allActions.filter((a) => a.scope === "toolbar");
+  const includeDeleted = params.includeDeleted === "true" || params.includeDeleted === true;
+  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: "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(Breadcrumb, {
+              trail
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5("div", {
+              "data-query-url": props.queryUrl,
+              children: [
+                /* @__PURE__ */ jsxDEV5(Masthead, {
+                  title,
+                  icon: props.metadata?.icon,
+                  detail: /* @__PURE__ */ jsxDEV5("span", {
+                    "data-panel-total": true,
+                    children: plural(total, "record")
+                  }, undefined, false, undefined, this),
+                  actions: toolbarActions.length > 0 || canCreate ? /* @__PURE__ */ jsxDEV5(Fragment3, {
+                    children: [
+                      toolbarActions.map((action, i) => /* @__PURE__ */ jsxDEV5(CustomActionButton, {
+                        action
+                      }, i, false, undefined, this)),
+                      canCreate ? /* @__PURE__ */ jsxDEV5("button", {
+                        type: "button",
+                        "data-open-create": true,
+                        className: primaryButtonClass,
+                        children: "New record"
+                      }, undefined, false, undefined, this) : null
+                    ]
+                  }, undefined, true, undefined, this) : undefined
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5(Toolbar, {
+                  fields,
+                  searchable: props.query?.searchable,
+                  filterable: props.query?.filterable,
+                  sortable: props.query?.sortable,
+                  params,
+                  softDelete,
+                  includeDeleted
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("div", {
+                  "data-bulk-bar": true,
+                  style: { display: "none" },
+                  className: "flex flex-wrap items-center gap-2 pb-3",
+                  children: [
+                    /* @__PURE__ */ jsxDEV5("span", {
+                      "data-bulk-count": true,
+                      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-xs font-medium",
+                      children: "Delete selected"
+                    }, undefined, false, undefined, this) : null,
+                    canEdit ? /* @__PURE__ */ jsxDEV5("span", {
+                      className: "inline-flex items-center gap-2",
+                      children: [
+                        /* @__PURE__ */ jsxDEV5("select", {
+                          "data-bulk-field": true,
+                          "aria-label": "Bulk field",
+                          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.label
+                          }, f.name, false, undefined, this))
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV5("input", {
+                          "data-bulk-value": true,
+                          placeholder: "New value",
+                          "aria-label": "Bulk value",
+                          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 hover:bg-navigation-hover rounded-md px-3 py-1.5 text-xs font-medium",
+                          children: "Apply"
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, undefined, true, undefined, this) : null,
+                    /* @__PURE__ */ jsxDEV5("button", {
+                      type: "button",
+                      "data-bulk-clear": true,
+                      className: "text-text-muted hover:text-foreground text-xs underline",
+                      children: "Clear"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV5(DataTable, {
+                  fields,
+                  rows,
+                  sortable: props.query?.sortable,
+                  params,
+                  selectable,
+                  editable: canEdit || canDelete,
+                  viewable: canView,
+                  actions: rowActions,
+                  primaryKey: pk,
+                  softDelete,
+                  restorable: canEdit,
+                  deletedAtField: deletedAt
+                }, 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("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("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, 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("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("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, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("dialog", {
+                  id: "rack-detail",
+                  className: "bg-card text-card-foreground w-full max-w-md rounded-lg border p-0 shadow-lg",
+                  children: /* @__PURE__ */ jsxDEV5("div", {
+                    className: "flex flex-col gap-4 p-5",
+                    children: [
+                      /* @__PURE__ */ jsxDEV5("h2", {
+                        className: "font-display text-xl leading-tight",
+                        children: [
+                          "Record",
+                          " ",
+                          /* @__PURE__ */ jsxDEV5("span", {
+                            "data-detail-id-label": true,
+                            className: "text-text-muted font-mono text-sm"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("dl", {
+                        "data-detail-body": true,
+                        className: "flex flex-col gap-3 text-sm"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV5("div", {
+                        className: "border-border flex justify-end border-t pt-4",
+                        children: /* @__PURE__ */ jsxDEV5("button", {
+                          type: "button",
+                          "data-close": true,
+                          className: secondaryButtonClass,
+                          children: "Close"
+                        }, undefined, false, undefined, this)
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("div", {
+                  "data-rack-toasts": true,
+                  "aria-live": "polite",
+                  className: "pointer-events-none fixed right-4 bottom-4 z-50 flex flex-col gap-2"
+                }, 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)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  Panel as default
+};