@arqel-dev/ui 0.8.0

package/dist/pages.js

@@ -0,0 +1,1648 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useRef, useMemo, useCallback, useId, useState } from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { isFieldEntry, isLayoutEntry } from '@arqel-dev/types/forms';
+import { useArqelForm } from '@arqel-dev/hooks';
+import { usePage, router } from '@inertiajs/react';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var init_cn = __esm({
+  "src/utils/cn.ts"() {
+  }
+});
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var buttonVariants;
+var init_button = __esm({
+  "src/shadcn/ui/button.tsx"() {
+    init_cn();
+    buttonVariants = cva(
+      "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      {
+        variants: {
+          variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline"
+          },
+          size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+            "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-8",
+            "icon-lg": "size-10"
+          }
+        },
+        defaultVariants: {
+          variant: "default",
+          size: "default"
+        }
+      }
+    );
+  }
+});
+
+// src/action/Button.tsx
+var init_Button = __esm({
+  "src/action/Button.tsx"() {
+    init_button();
+  }
+});
+function FormActions({
+  submitLabel = "Save",
+  cancelLabel = "Cancel",
+  onCancel,
+  processing = false,
+  disabled = false,
+  extra,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-end gap-2 border-t border-border pt-4",
+        className
+      ),
+      children: [
+        extra && /* @__PURE__ */ jsx("div", { className: "mr-auto", children: extra }),
+        onCancel && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: processing, children: cancelLabel }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: processing || disabled, children: processing ? "Saving\u2026" : submitLabel })
+      ]
+    }
+  );
+}
+var init_FormActions = __esm({
+  "src/form/FormActions.tsx"() {
+    init_Button();
+    init_cn();
+  }
+});
+
+// src/form/FieldRegistry.tsx
+function getFieldComponent(name) {
+  return registry.get(name);
+}
+var registry;
+var init_FieldRegistry = __esm({
+  "src/form/FieldRegistry.tsx"() {
+    registry = /* @__PURE__ */ new Map();
+  }
+});
+function NativeFieldInput(props) {
+  const { field } = props;
+  switch (field.type) {
+    case "text":
+    case "email":
+    case "url":
+    case "password":
+    case "slug":
+      return /* @__PURE__ */ jsx(TextLike, { ...props, field });
+    case "textarea":
+      return /* @__PURE__ */ jsx(Textarea, { ...props, field });
+    case "number":
+    case "currency":
+      return /* @__PURE__ */ jsx(NumericInput, { ...props, field });
+    case "boolean":
+    case "toggle":
+      return /* @__PURE__ */ jsx(Checkbox, { ...props, field });
+    case "select":
+      return /* @__PURE__ */ jsx(SelectInput, { ...props, field });
+    case "multiSelect":
+    case "hasMany":
+      return /* @__PURE__ */ jsx(MultiSelectInput, { ...props, field });
+    case "radio":
+      return /* @__PURE__ */ jsx(RadioGroup, { ...props, field });
+    case "belongsTo":
+      return /* @__PURE__ */ jsx(BelongsToInput, { ...props, field });
+    case "date":
+    case "dateTime":
+      return /* @__PURE__ */ jsx(DateInput, { ...props, field });
+    case "file":
+    case "image":
+      return /* @__PURE__ */ jsx(FileInput, { ...props });
+    default:
+      return null;
+  }
+}
+function TextLike({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const htmlType = field.type === "email" ? "email" : field.type === "password" ? "password" : field.type === "url" ? "url" : "text";
+  const isDisabled = disabled || field.disabled || field.readonly;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: htmlType,
+      className: inputClasses,
+      value: typeof value === "string" ? value : (value ?? "")?.toString() ?? "",
+      placeholder: field.placeholder ?? void 0,
+      disabled: isDisabled,
+      readOnly: field.readonly === true,
+      required: field.required === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+function Textarea({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      id: inputId,
+      className: cn(inputClasses, "h-auto min-h-[5rem] py-2"),
+      value: typeof value === "string" ? value : "",
+      placeholder: field.placeholder ?? void 0,
+      disabled: disabled || field.disabled || field.readonly,
+      readOnly: field.readonly === true,
+      required: field.required === true,
+      rows: 4,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+function NumericInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "number",
+      className: inputClasses,
+      value: value === null || value === void 0 ? "" : String(value),
+      placeholder: field.placeholder ?? void 0,
+      disabled: disabled || field.disabled || field.readonly,
+      readOnly: field.readonly === true,
+      required: field.required === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => {
+        const raw = e.target.value;
+        if (raw === "") {
+          onChange(null);
+          return;
+        }
+        const num = Number(raw);
+        onChange(Number.isNaN(num) ? null : num);
+      }
+    }
+  );
+}
+function Checkbox({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "checkbox",
+      className: "h-4 w-4 rounded border-[var(--input)]",
+      checked: value === true,
+      disabled: disabled || field.disabled || field.readonly,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.checked)
+    }
+  );
+}
+function normaliseOptions(options) {
+  if (!options) return [];
+  if (Array.isArray(options)) return options;
+  return Object.entries(options).map(([value, label]) => ({ value, label }));
+}
+function SelectInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const options = normaliseOptions(field.props.options);
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      id: inputId,
+      className: inputClasses,
+      value: value === null || value === void 0 ? "" : String(value),
+      disabled: disabled || field.disabled || field.readonly,
+      required: field.required === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
+      children: [
+        field.placeholder && /* @__PURE__ */ jsx("option", { value: "", children: field.placeholder }),
+        options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      ]
+    }
+  );
+}
+function MultiSelectInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const arr = Array.isArray(value) ? value : [];
+  const options = field.type === "multiSelect" ? normaliseOptions(field.props.options) : [];
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      id: inputId,
+      multiple: true,
+      className: cn(inputClasses, "h-auto min-h-[6rem] py-1"),
+      value: arr.map(String),
+      disabled: disabled || field.disabled || field.readonly,
+      "aria-describedby": describedBy,
+      onChange: (e) => {
+        const next = Array.from(e.target.selectedOptions, (o) => o.value);
+        onChange(next);
+      },
+      children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+    }
+  );
+}
+function RadioGroup({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: inputId,
+      className: "flex flex-col gap-1",
+      "aria-describedby": describedBy,
+      role: "radiogroup",
+      children: (field.props.options ?? []).map((opt) => /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name: field.name,
+            value: String(opt.value),
+            checked: String(value ?? "") === String(opt.value),
+            disabled: disabled || field.disabled || field.readonly,
+            onChange: () => onChange(opt.value)
+          }
+        ),
+        opt.label
+      ] }, opt.value))
+    }
+  );
+}
+function BelongsToInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "text",
+      className: inputClasses,
+      value: value === null || value === void 0 ? "" : String(value),
+      placeholder: field.placeholder ?? `Search ${field.props.relatedResource}\u2026`,
+      disabled: disabled || field.disabled || field.readonly,
+      readOnly: field.readonly === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+    }
+  );
+}
+function DateInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: field.type === "dateTime" ? "datetime-local" : "date",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      disabled: disabled || field.disabled || field.readonly,
+      readOnly: field.readonly === true,
+      required: field.required === true,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+    }
+  );
+}
+function FileInput({
+  field,
+  onChange,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "file",
+      className: "text-sm",
+      disabled: disabled || field.disabled || field.readonly,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.files?.[0] ?? null)
+    }
+  );
+}
+var inputClasses;
+var init_nativeFields = __esm({
+  "src/form/nativeFields.tsx"() {
+    init_cn();
+    inputClasses = cn(
+      "h-9 rounded-sm border border-[var(--input)]",
+      "bg-background px-3 text-sm",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "disabled:cursor-not-allowed disabled:opacity-50"
+    );
+  }
+});
+function FieldRenderer(props) {
+  const { field, errors, className } = props;
+  const id = useId();
+  const errorId = `${id}-error`;
+  const helperId = `${id}-helper`;
+  const hasError = errors && errors.length > 0;
+  const Custom = field.component ? getFieldComponent(field.component) : void 0;
+  const Input = Custom ?? NativeFieldInput;
+  const describedBy = [field.helperText ? helperId : null, hasError ? errorId : null].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-arqel-field": field.name,
+      "data-field-type": field.type,
+      className: cn("flex flex-col gap-1", className),
+      children: [
+        field.label !== null && field.label !== "" && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "text-sm font-medium", children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx(Input, { ...props, inputId: id, describedBy: describedBy || void 0 }),
+        field.helperText && !hasError && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-xs text-muted-foreground", children: field.helperText }),
+        hasError && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-xs text-destructive", children: errors[0] })
+      ]
+    }
+  );
+}
+var init_FieldRenderer = __esm({
+  "src/form/FieldRenderer.tsx"() {
+    init_cn();
+    init_FieldRegistry();
+    init_nativeFields();
+  }
+});
+function FormFieldset({ config, children, className }) {
+  return /* @__PURE__ */ jsxs("fieldset", { className: cn("rounded-md border border-border p-4", className), children: [
+    /* @__PURE__ */ jsx("legend", { className: "px-1 text-sm font-medium", children: config.legend }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid gap-4",
+        style: { gridTemplateColumns: `repeat(${config.columns ?? 1}, minmax(0, 1fr))` },
+        children
+      }
+    )
+  ] });
+}
+var init_FormFieldset = __esm({
+  "src/form/FormFieldset.tsx"() {
+    init_cn();
+  }
+});
+function FormGrid({ config, children, className }) {
+  const columns = typeof config.columns === "number" ? config.columns : config.columns["md"] ?? 1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid", className),
+      style: {
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        gap: config.gap ?? "1rem"
+      },
+      children
+    }
+  );
+}
+var init_FormGrid = __esm({
+  "src/form/FormGrid.tsx"() {
+    init_cn();
+  }
+});
+function FormSection({ config, children, className }) {
+  const [open, setOpen] = useState(!config.collapsed);
+  const collapsible = config.collapsible === true;
+  const heading = /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: config.heading }),
+      config.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: config.description })
+    ] }),
+    collapsible && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        className: "text-sm text-muted-foreground hover:underline",
+        children: open ? "Hide" : "Show"
+      }
+    )
+  ] });
+  const body = open && /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "grid gap-4",
+      style: { gridTemplateColumns: `repeat(${config.columns ?? 1}, minmax(0, 1fr))` },
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "data-arqel-section": "",
+      className: cn(
+        "rounded-md border border-border bg-background",
+        config.compact ? "p-3" : "p-4",
+        className
+      ),
+      children: config.aside ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-[16rem_1fr]", children: [
+        /* @__PURE__ */ jsx("div", { children: heading }),
+        /* @__PURE__ */ jsx("div", { children: body })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-3", children: heading }),
+        body
+      ] })
+    }
+  );
+}
+var init_FormSection = __esm({
+  "src/form/FormSection.tsx"() {
+    init_cn();
+  }
+});
+function FormTabs({ config, tabs, className }) {
+  const [active, setActive] = useState(config.defaultTab ?? tabs[0]?.id ?? null);
+  const baseId = useId();
+  const refs = useRef([]);
+  if (tabs.length === 0 || active === null) return null;
+  const activeIndex = Math.max(
+    0,
+    tabs.findIndex((t) => t.id === active)
+  );
+  const activeTab = tabs[activeIndex];
+  if (!activeTab) return null;
+  const focus = (i) => {
+    const target = tabs[i];
+    if (!target) return;
+    setActive(target.id);
+    refs.current[i]?.focus();
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focus((activeIndex + 1) % tabs.length);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focus((activeIndex - 1 + tabs.length) % tabs.length);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focus(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focus(tabs.length - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        "aria-orientation": config.orientation,
+        className: "flex gap-1 border-b border-border",
+        children: tabs.map((tab, i) => {
+          const selected = tab.id === active;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                refs.current[i] = el;
+              },
+              type: "button",
+              role: "tab",
+              id: `${baseId}-tab-${tab.id}`,
+              "aria-controls": `${baseId}-panel-${tab.id}`,
+              "aria-selected": selected,
+              tabIndex: selected ? 0 : -1,
+              onClick: () => setActive(tab.id),
+              onKeyDown,
+              className: cn(
+                "-mb-px border-b-2 px-3 py-2 text-sm transition-colors",
+                selected ? "border-primary font-medium text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+              ),
+              children: [
+                tab.label,
+                tab.badge !== void 0 && tab.badge !== null && /* @__PURE__ */ jsx("span", { className: "ml-1 rounded-full bg-muted px-1.5 text-xs", children: tab.badge })
+              ]
+            },
+            tab.id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${baseId}-panel-${activeTab.id}`,
+        "aria-labelledby": `${baseId}-tab-${activeTab.id}`,
+        className: "pt-4",
+        children: activeTab.content
+      }
+    )
+  ] });
+}
+var init_FormTabs = __esm({
+  "src/form/FormTabs.tsx"() {
+    init_cn();
+  }
+});
+function FormRenderer({
+  schema,
+  fields,
+  values,
+  errors = {},
+  onChange,
+  disabled = false,
+  className
+}) {
+  const fieldsByName = new Map(fields.map((f) => [f.name, f]));
+  const renderEntry = (entry, key) => {
+    if (isFieldEntry(entry)) {
+      return renderFieldEntry(entry, key);
+    }
+    if (isLayoutEntry(entry)) {
+      return renderLayoutEntry(entry, key);
+    }
+    return null;
+  };
+  const renderFieldEntry = (entry, key) => {
+    const field = fieldsByName.get(entry.name);
+    if (!field) return null;
+    return /* @__PURE__ */ jsx(
+      FieldRenderer,
+      {
+        field,
+        value: values[entry.name],
+        errors: errors[entry.name],
+        disabled: disabled || schema.disabled === true,
+        onChange: (value) => onChange(entry.name, value)
+      },
+      key
+    );
+  };
+  const renderChildren = (entries) => {
+    if (!entries) return null;
+    return entries.map((child, i) => renderEntry(child, `${i}`));
+  };
+  const renderLayoutEntry = (entry, key) => {
+    switch (entry.type) {
+      case "section":
+        return /* @__PURE__ */ jsx(FormSection, { config: entry.props, children: renderChildren(entry.schema) }, key);
+      case "fieldset":
+        return /* @__PURE__ */ jsx(FormFieldset, { config: entry.props, children: renderChildren(entry.schema) }, key);
+      case "grid":
+      case "columns":
+        return /* @__PURE__ */ jsx(
+          FormGrid,
+          {
+            config: entry.type === "columns" ? { columns: entry.props.columns } : entry.props,
+            children: renderChildren(entry.schema)
+          },
+          key
+        );
+      case "group":
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex gap-4",
+              entry.props.orientation === "vertical" ? "flex-col" : "flex-row"
+            ),
+            children: renderChildren(entry.schema)
+          },
+          key
+        );
+      case "tabs": {
+        const tabs = (entry.schema ?? []).filter((c) => isLayoutEntry(c) && c.type === "tab").map((tab) => ({
+          id: tab.props.id,
+          label: tab.props.label,
+          badge: tab.props.badge,
+          content: renderChildren(tab.schema) ?? /* @__PURE__ */ jsx("span", {}, `tab-${tab.props.id}-empty`)
+        }));
+        return /* @__PURE__ */ jsx(FormTabs, { config: entry.props, tabs }, key);
+      }
+      case "tab":
+        return null;
+    }
+  };
+  const columns = schema.columns ?? 1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-arqel-form": "",
+      className: cn("grid gap-4", className),
+      style: columns > 1 ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : void 0,
+      children: schema.schema.map((entry, i) => renderEntry(entry, `${i}`))
+    }
+  );
+}
+var init_FormRenderer = __esm({
+  "src/form/FormRenderer.tsx"() {
+    init_cn();
+    init_FieldRenderer();
+    init_FormFieldset();
+    init_FormGrid();
+    init_FormSection();
+    init_FormTabs();
+  }
+});
+function PageHeader({ title, description, actions, className }) {
+  return /* @__PURE__ */ jsxs("header", { className: cn("flex flex-wrap items-start gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions })
+  ] });
+}
+var init_PageHeader = __esm({
+  "src/utility/PageHeader.tsx"() {
+    init_cn();
+  }
+});
+
+// src/pages/ArqelCreatePage.tsx
+var ArqelCreatePage_exports = {};
+__export(ArqelCreatePage_exports, {
+  default: () => ArqelCreatePage
+});
+function ArqelCreatePage() {
+  const page = usePage();
+  const props = page.props;
+  const fields = props.fields ?? [];
+  const schema = props.form ?? FALLBACK_SCHEMA;
+  const form = useArqelForm({ fields });
+  const submit = (e) => {
+    e.preventDefault();
+    const slug = props.resource?.slug ?? "";
+    router.post(`/${slug}`, form.data, {
+      preserveScroll: true
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(PageHeader, { title: `Create ${props.resource?.label ?? "record"}`, description: null }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(
+        FormRenderer,
+        {
+          schema,
+          fields,
+          values: form.data,
+          onChange: (name, value) => form.setData(name, value),
+          errors: form.errors
+        }
+      ),
+      /* @__PURE__ */ jsx(FormActions, { processing: form.processing, onCancel: () => window.history.back() })
+    ] })
+  ] });
+}
+var FALLBACK_SCHEMA;
+var init_ArqelCreatePage = __esm({
+  "src/pages/ArqelCreatePage.tsx"() {
+    init_FormActions();
+    init_FormRenderer();
+    init_PageHeader();
+    FALLBACK_SCHEMA = {
+      schema: [],
+      columns: 1,
+      model: null,
+      inline: false,
+      disabled: false
+    };
+  }
+});
+
+// src/pages/ArqelEditPage.tsx
+var ArqelEditPage_exports = {};
+__export(ArqelEditPage_exports, {
+  default: () => ArqelEditPage
+});
+function ArqelEditPage() {
+  const page = usePage();
+  const props = page.props;
+  const fields = props.fields ?? [];
+  const record = props.record;
+  const schema = props.form ?? FALLBACK_SCHEMA2;
+  const form = useArqelForm({ fields, record });
+  const submit = (e) => {
+    e.preventDefault();
+    const id = String(record?.id ?? "");
+    const slug = props.resource?.slug ?? "";
+    router.put(`/${slug}/${id}`, form.data, {
+      preserveScroll: true
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: props.recordTitle ?? `Edit ${props.resource?.label ?? "record"}`,
+        description: props.recordSubtitle ?? null
+      }
+    ),
+    /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(
+        FormRenderer,
+        {
+          schema,
+          fields,
+          values: form.data,
+          onChange: (name, value) => form.setData(name, value),
+          errors: form.errors
+        }
+      ),
+      /* @__PURE__ */ jsx(FormActions, { processing: form.processing, onCancel: () => window.history.back() })
+    ] })
+  ] });
+}
+var FALLBACK_SCHEMA2;
+var init_ArqelEditPage = __esm({
+  "src/pages/ArqelEditPage.tsx"() {
+    init_FormActions();
+    init_FormRenderer();
+    init_PageHeader();
+    FALLBACK_SCHEMA2 = {
+      schema: [],
+      columns: 1,
+      model: null,
+      inline: false,
+      disabled: false
+    };
+  }
+});
+function TableCell({ column, value }) {
+  switch (column.type) {
+    case "text":
+      return /* @__PURE__ */ jsx(TextCell, { column, value });
+    case "badge":
+      return /* @__PURE__ */ jsx(BadgeCell, { column, value });
+    case "boolean":
+      return /* @__PURE__ */ jsx(BooleanCell, { column, value });
+    case "date":
+      return /* @__PURE__ */ jsx(DateCell, { column, value });
+    case "number":
+      return /* @__PURE__ */ jsx(NumberCell, { column, value });
+    case "icon":
+      return /* @__PURE__ */ jsx(IconCell, { column });
+    case "image":
+      return /* @__PURE__ */ jsx(ImageCell, { column, value });
+    case "relationship":
+      return /* @__PURE__ */ jsx(RelationshipCell, { column, value });
+    case "computed":
+      return /* @__PURE__ */ jsx(ComputedCell, { column, value });
+  }
+}
+function asString(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return JSON.stringify(value);
+}
+function TextCell({ column, value }) {
+  const str = asString(value);
+  const truncated = column.props.truncate && str.length > column.props.truncate ? `${str.slice(0, column.props.truncate)}\u2026` : str;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        column.props.weight === "bold" && "font-bold",
+        column.props.weight === "medium" && "font-medium"
+      ),
+      children: truncated
+    }
+  );
+}
+function BadgeCell({ column, value }) {
+  const option = column.props.options?.find((o) => o.value === value);
+  const label = option?.label ?? asString(value);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center px-2 py-0.5 text-xs",
+        column.props.pill ? "rounded-full" : "rounded-sm",
+        "bg-muted text-foreground"
+      ),
+      children: label
+    }
+  );
+}
+function BooleanCell({ column, value }) {
+  const truthy = Boolean(value);
+  return /* @__PURE__ */ jsx("span", { role: "img", "aria-label": truthy ? "true" : "false", children: truthy ? column.props.trueIcon ?? "\u2713" : column.props.falseIcon ?? "\u2014" });
+}
+function DateCell({ column, value }) {
+  if (!value) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+  const raw = String(value);
+  const date = new Date(raw);
+  if (Number.isNaN(date.getTime())) return /* @__PURE__ */ jsx("span", { children: raw });
+  if (column.props.mode === "since") {
+    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: formatRelative(date) });
+  }
+  if (column.props.mode === "datetime") {
+    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: date.toLocaleString() });
+  }
+  return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), children: date.toLocaleDateString() });
+}
+function formatRelative(date) {
+  const seconds = Math.round((Date.now() - date.getTime()) / 1e3);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  return `${days}d ago`;
+}
+function NumberCell({ column, value }) {
+  if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", { children: "\u2014" });
+  const num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) return /* @__PURE__ */ jsx("span", { children: asString(value) });
+  const formatted = num.toFixed(column.props.decimals ?? 0);
+  const [whole, dec] = formatted.split(".");
+  const safeWhole = whole ?? "0";
+  const ts = column.props.thousandsSeparator;
+  const finalWhole = ts ? safeWhole.replace(/\B(?=(\d{3})+(?!\d))/g, ts) : safeWhole;
+  const ds = column.props.decimalSeparator ?? ".";
+  return /* @__PURE__ */ jsxs("span", { children: [
+    column.props.prefix ?? "",
+    finalWhole,
+    dec ? `${ds}${dec}` : "",
+    column.props.suffix ?? ""
+  ] });
+}
+function IconCell({ column }) {
+  return /* @__PURE__ */ jsx("span", { role: "img", "aria-label": column.props.icon, title: column.props.icon, children: column.props.icon });
+}
+function ImageCell({ column, value }) {
+  const src = asString(value);
+  if (!src) return null;
+  const size = column.props.size ?? 32;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: "",
+      style: { width: size, height: size },
+      className: cn(column.props.shape === "circular" ? "rounded-full" : "rounded")
+    }
+  );
+}
+function RelationshipCell({ column, value }) {
+  if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", { children: "\u2014" });
+  if (typeof value === "object") {
+    const attr = value[column.props.attribute];
+    return /* @__PURE__ */ jsx("span", { children: asString(attr) });
+  }
+  return /* @__PURE__ */ jsx("span", { children: asString(value) });
+}
+function ComputedCell({ column, value }) {
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: column.props.placeholder ?? "\u2014" });
+  }
+  return /* @__PURE__ */ jsx("span", { children: asString(value) });
+}
+var init_cells = __esm({
+  "src/table/cells.tsx"() {
+    init_cn();
+  }
+});
+function DataTable({
+  columns,
+  records,
+  enableSelection = false,
+  selectedIds = [],
+  onSelectionChange,
+  sort = null,
+  onSortChange,
+  rowActions,
+  loading = false,
+  emptyState,
+  className
+}) {
+  const lastClickedIndexRef = useRef(null);
+  const visibleColumns = useMemo(() => columns.filter((col) => !col.hidden), [columns]);
+  const tableColumns = useMemo(
+    () => visibleColumns.map((col) => ({
+      id: col.name,
+      accessorFn: (row) => row[col.name],
+      header: () => col.label ?? col.name,
+      cell: (info) => /* @__PURE__ */ jsx(TableCell, { column: col, value: info.getValue() }),
+      enableSorting: col.sortable
+    })),
+    [visibleColumns]
+  );
+  const table = useReactTable({
+    data: records,
+    columns: tableColumns,
+    getCoreRowModel: getCoreRowModel()
+  });
+  const allSelected = enableSelection && records.length > 0 && selectedIds.length === records.length;
+  const someSelected = enableSelection && selectedIds.length > 0 && selectedIds.length < records.length;
+  const toggleAll = useCallback(() => {
+    if (!onSelectionChange) return;
+    if (allSelected) onSelectionChange([]);
+    else onSelectionChange(records.map((r) => r.id));
+  }, [allSelected, records, onSelectionChange]);
+  const toggleRow = useCallback(
+    (id, index, shiftKey) => {
+      if (!onSelectionChange) return;
+      const set = new Set(selectedIds);
+      const lastIndex = lastClickedIndexRef.current;
+      if (shiftKey && lastIndex !== null) {
+        const [from, to] = lastIndex < index ? [lastIndex, index] : [index, lastIndex];
+        const shouldSelect = !set.has(id);
+        for (let i = from; i <= to; i++) {
+          const rowId = records[i]?.id;
+          if (rowId === void 0) continue;
+          if (shouldSelect) set.add(rowId);
+          else set.delete(rowId);
+        }
+      } else if (set.has(id)) {
+        set.delete(id);
+      } else {
+        set.add(id);
+      }
+      lastClickedIndexRef.current = index;
+      onSelectionChange(Array.from(set));
+    },
+    [records, selectedIds, onSelectionChange]
+  );
+  const headerSortDirection = (columnName) => {
+    if (!sort || sort.column !== columnName) return null;
+    return sort.direction === "desc" ? "desc" : "asc";
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
+    /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-background", children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border", children: [
+      enableSelection && /* @__PURE__ */ jsx("th", { scope: "col", className: "w-10 px-3 py-2 text-left", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          "aria-label": "Select all rows",
+          checked: allSelected,
+          ref: (el) => {
+            if (el) el.indeterminate = someSelected;
+          },
+          onChange: toggleAll
+        }
+      ) }),
+      group.headers.map((header) => {
+        const col = visibleColumns.find((c) => c.name === header.column.id);
+        const sortable = col?.sortable && onSortChange;
+        const direction = headerSortDirection(header.column.id);
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "col",
+            className: cn(
+              "px-3 py-2 text-left font-medium text-muted-foreground",
+              col?.align === "center" && "text-center",
+              col?.align === "end" && "text-right"
+            ),
+            "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
+            children: sortable ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex items-center gap-1 hover:text-foreground",
+                onClick: () => onSortChange(header.column.id, direction === "asc" ? "desc" : "asc"),
+                children: [
+                  flexRender(header.column.columnDef.header, header.getContext()),
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: direction === "asc" ? "\u25B2" : direction === "desc" ? "\u25BC" : "\u2195" })
+                ]
+              }
+            ) : flexRender(header.column.columnDef.header, header.getContext())
+          },
+          header.id
+        );
+      }),
+      rowActions && /* @__PURE__ */ jsx("th", { scope: "col", className: "w-24 px-3 py-2 text-right", "aria-label": "Actions" })
+    ] }, group.id)) }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      loading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: visibleColumns.length + (enableSelection ? 1 : 0) + (rowActions ? 1 : 0),
+          className: "px-3 py-4 text-center text-muted-foreground",
+          children: "Loading\u2026"
+        }
+      ) }),
+      !loading && records.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: visibleColumns.length + (enableSelection ? 1 : 0) + (rowActions ? 1 : 0),
+          className: "px-3 py-8 text-center text-muted-foreground",
+          children: emptyState ?? "No records found."
+        }
+      ) }),
+      !loading && table.getRowModel().rows.map((row, index) => {
+        const record = row.original;
+        const checked = selectedIds.includes(record.id);
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            "data-selected": checked || void 0,
+            className: cn("border-b border-border", checked && "bg-muted"),
+            children: [
+              enableSelection && /* @__PURE__ */ jsx("td", { className: "w-10 px-3 py-2", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  "aria-label": `Select row ${record.id}`,
+                  checked,
+                  onChange: (event) => {
+                    const native = event.nativeEvent;
+                    toggleRow(record.id, index, native.shiftKey === true);
+                  }
+                }
+              ) }),
+              row.getVisibleCells().map((cell) => {
+                const col = visibleColumns.find((c) => c.name === cell.column.id);
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: cn(
+                      "px-3 py-2",
+                      col?.align === "center" && "text-center",
+                      col?.align === "end" && "text-right",
+                      col?.hiddenOnMobile && "hidden md:table-cell"
+                    ),
+                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                  },
+                  cell.id
+                );
+              }),
+              rowActions && /* @__PURE__ */ jsx("td", { className: "w-24 px-3 py-2 text-right", children: rowActions(record) })
+            ]
+          },
+          row.id
+        );
+      })
+    ] })
+  ] }) });
+}
+var init_DataTable = __esm({
+  "src/table/DataTable.tsx"() {
+    init_cn();
+    init_cells();
+  }
+});
+function TableFilters({
+  filters,
+  values,
+  onChange,
+  onClearAll,
+  className
+}) {
+  if (filters.length === 0) return null;
+  const activeCount = filters.reduce((acc, f) => {
+    const v = values[f.name];
+    return v !== void 0 && v !== null && v !== "" ? acc + 1 : acc;
+  }, 0);
+  return /* @__PURE__ */ jsxs("fieldset", { className: cn("flex flex-wrap items-end gap-2 border-0 p-0", className), children: [
+    /* @__PURE__ */ jsx("legend", { className: "sr-only", children: "Filters" }),
+    filters.map((filter) => /* @__PURE__ */ jsx(
+      FilterControl,
+      {
+        filter,
+        value: values[filter.name],
+        onChange: (v) => onChange(filter.name, v)
+      },
+      filter.name
+    )),
+    activeCount > 0 && onClearAll && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: [
+      "Clear filters (",
+      activeCount,
+      ")"
+    ] })
+  ] });
+}
+function FilterControl({
+  filter,
+  value,
+  onChange
+}) {
+  switch (filter.type) {
+    case "select":
+      return /* @__PURE__ */ jsx(SelectFilter, { filter, value, onChange });
+    case "multiSelect":
+      return /* @__PURE__ */ jsx(MultiSelectFilter, { filter, value, onChange });
+    case "text":
+      return /* @__PURE__ */ jsx(TextFilter, { filter, value, onChange });
+    case "ternary":
+      return /* @__PURE__ */ jsx(TernaryFilter, { filter, value, onChange });
+    case "dateRange":
+    case "scope":
+      return null;
+  }
+}
+function controlClasses() {
+  return cn(
+    "h-9 rounded-sm border border-[var(--input)]",
+    "bg-background px-3 text-sm",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  );
+}
+function SelectFilter({
+  filter,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    filter.label ?? filter.name,
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: controlClasses(),
+        value: value === void 0 || value === null ? "" : String(value),
+        onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
+          filter.props.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        ]
+      }
+    )
+  ] });
+}
+function MultiSelectFilter({
+  filter,
+  value,
+  onChange
+}) {
+  const arr = Array.isArray(value) ? value : [];
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    filter.label ?? filter.name,
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        multiple: true,
+        className: cn(controlClasses(), "h-auto min-h-[2.25rem] py-1"),
+        value: arr.map(String),
+        onChange: (e) => {
+          const next = Array.from(e.target.selectedOptions, (o) => o.value);
+          onChange(next.length === 0 ? null : next);
+        },
+        children: filter.props.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      }
+    )
+  ] });
+}
+function TextFilter({
+  filter,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    filter.label ?? filter.name,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: controlClasses(),
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+      }
+    )
+  ] });
+}
+function TernaryFilter({
+  filter,
+  value,
+  onChange
+}) {
+  const current = value === void 0 || value === null ? "all" : String(value);
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    filter.label ?? filter.name,
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: controlClasses(),
+        value: current,
+        onChange: (e) => {
+          const v = e.target.value;
+          onChange(v === "all" ? null : v);
+        },
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "all", children: filter.props.allLabel ?? "All" }),
+          /* @__PURE__ */ jsx("option", { value: "true", children: filter.props.trueLabel ?? "Yes" }),
+          /* @__PURE__ */ jsx("option", { value: "false", children: filter.props.falseLabel ?? "No" })
+        ]
+      }
+    )
+  ] });
+}
+var init_TableFilters = __esm({
+  "src/table/TableFilters.tsx"() {
+    init_Button();
+    init_cn();
+  }
+});
+function TablePagination({
+  meta,
+  onPageChange,
+  onPerPageChange,
+  perPageOptions = [10, 25, 50, 100],
+  className
+}) {
+  const from = (meta.currentPage - 1) * meta.perPage + 1;
+  const to = Math.min(meta.currentPage * meta.perPage, meta.total);
+  const isFirst = meta.currentPage <= 1;
+  const isLast = meta.currentPage >= meta.lastPage;
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2 text-sm",
+        className
+      ),
+      "aria-label": "Pagination",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: meta.total === 0 ? "No results" : `${from}\u2013${to} of ${meta.total}` }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          onPerPageChange && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+            "Per page",
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "h-8 rounded-sm border border-[var(--input)] bg-background px-2",
+                value: meta.perPage,
+                onChange: (e) => onPerPageChange(Number(e.target.value)),
+                children: perPageOptions.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              disabled: isFirst,
+              onClick: () => onPageChange(meta.currentPage - 1),
+              "aria-label": "Previous page",
+              children: "Prev"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            meta.currentPage,
+            " / ",
+            meta.lastPage
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              disabled: isLast,
+              onClick: () => onPageChange(meta.currentPage + 1),
+              "aria-label": "Next page",
+              children: "Next"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var init_TablePagination = __esm({
+  "src/table/TablePagination.tsx"() {
+    init_Button();
+    init_cn();
+  }
+});
+function TableToolbar({
+  search,
+  filters,
+  selectedCount = 0,
+  bulkActions,
+  onClearSelection,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 px-3 py-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [
+      search,
+      filters
+    ] }),
+    selectedCount > 0 && /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: "flex flex-wrap items-center gap-2 rounded-sm border border-border bg-muted px-3 py-2",
+        "aria-label": "Bulk actions",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
+            selectedCount,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [
+            bulkActions,
+            onClearSelection && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "text-sm text-muted-foreground hover:underline",
+                onClick: onClearSelection,
+                children: "Clear"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var init_TableToolbar = __esm({
+  "src/table/TableToolbar.tsx"() {
+    init_cn();
+  }
+});
+function ResourceIndex({
+  resource,
+  records,
+  pagination,
+  columns,
+  filters,
+  search,
+  sort,
+  selectedIds = [],
+  filterValues = {},
+  onSelectionChange,
+  onSortChange,
+  onPageChange,
+  onPerPageChange,
+  onSearchChange,
+  onFilterChange,
+  onClearFilters,
+  searchSlot,
+  toolbarActions,
+  rowActions,
+  bulkActions,
+  emptyState,
+  loading = false,
+  className
+}) {
+  const enableSelection = Boolean(onSelectionChange);
+  const renderSearch = () => {
+    if (searchSlot) return searchSlot;
+    if (!onSearchChange) return null;
+    return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+      "Search",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "search",
+          placeholder: `Search ${resource.pluralLabel.toLowerCase()}\u2026`,
+          className: "h-9 w-64 rounded-sm border border-[var(--input)] bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          value: search ?? "",
+          onChange: (e) => onSearchChange(e.target.value)
+        }
+      )
+    ] });
+  };
+  const normalisedSort = sort?.column ? {
+    column: sort.column,
+    direction: sort.direction === "desc" ? "desc" : "asc"
+  } : null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("flex flex-col rounded-md border border-border bg-background", className),
+      "aria-label": resource.pluralLabel,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center gap-3 border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", children: resource.pluralLabel }),
+          /* @__PURE__ */ jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: toolbarActions })
+        ] }),
+        /* @__PURE__ */ jsx(
+          TableToolbar,
+          {
+            search: renderSearch(),
+            filters: filters.length > 0 ? /* @__PURE__ */ jsx(
+              TableFilters,
+              {
+                filters,
+                values: filterValues,
+                onChange: (name, value) => onFilterChange?.(name, value),
+                onClearAll: onClearFilters
+              }
+            ) : null,
+            selectedCount: selectedIds.length,
+            bulkActions,
+            onClearSelection: onSelectionChange ? () => onSelectionChange([]) : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            columns,
+            records,
+            enableSelection,
+            selectedIds,
+            onSelectionChange,
+            sort: normalisedSort,
+            onSortChange,
+            rowActions: rowActions ? (record) => rowActions(record) : void 0,
+            loading,
+            emptyState
+          }
+        ),
+        pagination && /* @__PURE__ */ jsx(
+          TablePagination,
+          {
+            meta: pagination,
+            onPageChange: (page) => onPageChange?.(page),
+            onPerPageChange
+          }
+        )
+      ]
+    }
+  );
+}
+var init_ResourceIndex = __esm({
+  "src/resource/ResourceIndex.tsx"() {
+    init_DataTable();
+    init_TableFilters();
+    init_TablePagination();
+    init_TableToolbar();
+    init_cn();
+  }
+});
+
+// src/pages/ArqelIndexPage.tsx
+var ArqelIndexPage_exports = {};
+__export(ArqelIndexPage_exports, {
+  default: () => ArqelIndexPage
+});
+function ArqelIndexPage() {
+  const page = usePage();
+  const props = page.props;
+  return /* @__PURE__ */ jsx(ResourceIndex, { ...props });
+}
+var init_ArqelIndexPage = __esm({
+  "src/pages/ArqelIndexPage.tsx"() {
+    init_ResourceIndex();
+  }
+});
+
+// src/pages/ArqelShowPage.tsx
+var ArqelShowPage_exports = {};
+__export(ArqelShowPage_exports, {
+  default: () => ArqelShowPage
+});
+function ArqelShowPage() {
+  const page = usePage();
+  const props = page.props;
+  const fields = props.fields ?? [];
+  const values = {};
+  for (const field of fields) {
+    const name = field.name;
+    if (typeof name === "string" && props.record !== null && typeof props.record === "object") {
+      values[name] = props.record[name];
+    }
+  }
+  const declaredForm = props.form;
+  const schema = declaredForm ? { ...declaredForm, disabled: true } : FALLBACK_SCHEMA3;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: props.recordTitle ?? props.resource?.label ?? "Record",
+        description: props.recordSubtitle ?? null
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormRenderer,
+      {
+        schema,
+        fields,
+        values,
+        onChange: () => {
+        },
+        errors: {}
+      }
+    )
+  ] });
+}
+var FALLBACK_SCHEMA3;
+var init_ArqelShowPage = __esm({
+  "src/pages/ArqelShowPage.tsx"() {
+    init_FormRenderer();
+    init_PageHeader();
+    FALLBACK_SCHEMA3 = {
+      schema: [],
+      columns: 1,
+      model: null,
+      inline: false,
+      disabled: true
+    };
+  }
+});
+
+// src/pages/index.ts
+init_ArqelCreatePage();
+init_ArqelEditPage();
+init_ArqelIndexPage();
+init_ArqelShowPage();
+var arqelPages = {
+  "arqel::index": () => Promise.resolve().then(() => (init_ArqelIndexPage(), ArqelIndexPage_exports)),
+  "arqel::create": () => Promise.resolve().then(() => (init_ArqelCreatePage(), ArqelCreatePage_exports)),
+  "arqel::edit": () => Promise.resolve().then(() => (init_ArqelEditPage(), ArqelEditPage_exports)),
+  "arqel::show": () => Promise.resolve().then(() => (init_ArqelShowPage(), ArqelShowPage_exports))
+};
+
+export { ArqelCreatePage, ArqelEditPage, ArqelIndexPage, ArqelShowPage, arqelPages };
+//# sourceMappingURL=pages.js.map
+//# sourceMappingURL=pages.js.map