@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Models/ModelRecordsDashboard.stx

@@ -0,0 +1,641 @@
+<script client>
+// The page every model gets for free (stacksjs/stacks#1838): a browsable,
+// sortable, filterable table over any model the app defines, with no
+// per-model code.
+//
+// All querying is server-side (`GET /api/dashboard/models/{slug}`), so this
+// works the same on a table with 10 rows and one with a million. Rows and
+// writes go through the model, so scopes, casts and observers apply.
+import { useNavigation } from '~/storage/framework/defaults/views/dashboard/composables/useNavigation'
+import { dashboardApi } from '~/storage/framework/defaults/functions/dashboard-api'
+import { pushToast } from '~/storage/framework/defaults/functions/toasts'
+
+interface ColumnMeta {
+  name: string
+  label: string
+  type: 'number' | 'boolean' | 'date' | 'json' | 'text'
+}
+
+interface CreateField {
+  name: string
+  label: string
+  type: 'boolean' | 'date' | 'datetime' | 'email' | 'enum' | 'number' | 'text'
+  required: boolean
+  defaultValue: unknown
+  options: string[]
+}
+
+interface WriteCapabilities {
+  create: boolean
+  update: boolean
+  destroy: boolean
+}
+
+interface ResponseShape {
+  modelName: string
+  tableName: string
+  rows: Array<Record<string, unknown>>
+  displayColumns: string[]
+  columnMeta: ColumnMeta[]
+  totalCount: number
+  page: number
+  perPage: number
+  lastPage: number
+  sort: string
+  dir: 'asc' | 'desc'
+  writable: boolean
+  writeCapabilities: WriteCapabilities
+  createFields: CreateField[]
+  source: 'orm' | 'sqlite-fallback'
+  error: string | null
+}
+
+const PER_PAGE_OPTIONS = [25, 50, 100, 200]
+const navigation = useNavigation()
+
+const modelName = state('')
+const tableName = state('')
+const rows = state<Array<Record<string, unknown>>>([])
+const columnMeta = state<ColumnMeta[]>([])
+const totalCount = state(0)
+const page = state(1)
+const perPage = state(25)
+const lastPage = state(1)
+const sort = state('')
+const dir = state<'asc' | 'desc'>('desc')
+const search = state(navigation.urlQuery('q') || '')
+const filters = state<Record<string, string>>({})
+const writeCapabilities = state<WriteCapabilities>({ create: false, update: false, destroy: false })
+const createFields = state<CreateField[]>([])
+const source = state<'orm' | 'sqlite-fallback'>('orm')
+const error = state<string | null>(null)
+const loading = state(true)
+const showFilters = state(false)
+
+// Row being edited, plus the working copy of its values. `null` closes the
+// editor; the copy is kept separate so cancelling leaves the table row as
+// it was and a failed save does not desync the two.
+const editing = state<Record<string, unknown> | null>(null)
+const editValues = state<Record<string, string>>({})
+const saving = state(false)
+const confirmingDelete = state<Record<string, unknown> | null>(null)
+const showCreate = state(false)
+const creating = state(false)
+const createError = state('')
+const createErrors = state<Record<string, string[]>>({})
+
+const slug = derived(() => navigation.urlSegment(-1) || '')
+
+const sourceLabel = derived(() => {
+  if (source() === 'orm')
+    return 'via Stacks ORM'
+  return Object.values(writeCapabilities()).some(Boolean)
+    ? 'SQLite query, ORM writes'
+    : 'raw SQLite, read-only'
+})
+
+const recordLabel = derived(() => {
+  const n = totalCount()
+  return `${n.toLocaleString()} ${n === 1 ? 'record' : 'records'}`
+})
+
+const rangeLabel = derived(() => {
+  if (totalCount() === 0) return 'No records'
+  const from = (page() - 1) * perPage() + 1
+  const to = Math.min(page() * perPage(), totalCount())
+  return `${from.toLocaleString()} to ${to.toLocaleString()} of ${totalCount().toLocaleString()}`
+})
+
+const activeFilterCount = derived(() => Object.values(filters()).filter(v => v !== '').length)
+
+const filterLabel = derived(() => {
+  const n = activeFilterCount()
+  return n === 0 ? 'Filter' : `Filter (${n})`
+})
+
+const isEmpty = derived(() => !loading() && !error() && rows().length === 0)
+const canManageRows = derived(() => writeCapabilities().update || writeCapabilities().destroy)
+
+const deleteDescription = derived(() => {
+  const row = confirmingDelete()
+  if (!row)
+    return ''
+  return `Row ${row.id} will be removed through the model, so soft deletes and observers apply.`
+})
+
+// Fields for the edit sheet, carrying their starting value. Derived from the
+// row being edited rather than from `editValues`, so the list changes exactly
+// once per open: deriving it from the working copy instead would rebuild
+// every input on each keystroke and steal focus mid-word.
+const editFields = derived(() => {
+  const row = editing()
+  if (!row) return []
+  return columnMeta().map(column => ({
+    name: column.name,
+    label: column.label,
+    value: row[column.name] === null || row[column.name] === undefined ? '' : String(row[column.name]),
+    // The primary key, the uuid and the timestamps are shown for context but
+    // the API refuses to write them, so the input says so rather than
+    // accepting an edit that will be silently dropped.
+    readonly: column.name === 'id' || column.name === 'uuid' || column.name.endsWith('_at'),
+  }))
+})
+
+// Skeleton rows while a query is in flight. Matching the real row count
+// keeps the table from collapsing and jumping back on every keystroke.
+const skeletonRows = derived(() => Array.from({ length: Math.min(8, Math.max(3, rows().length || 6)) }, (_, i) => i))
+
+function formatDate(value: unknown): string {
+  const date = new Date(value as string | number)
+  if (Number.isNaN(date.getTime())) return String(value)
+  return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+function formatCell(value: unknown, type: ColumnMeta['type']): string {
+  if (value === null || value === undefined || value === '') return '-'
+  if (type === 'date') return formatDate(value)
+  if (type === 'boolean') return (value === true || value === 1 || value === '1') ? 'Yes' : 'No'
+  if (type === 'number' && typeof value === 'number') return value.toLocaleString()
+  if (typeof value === 'object') {
+    try { return JSON.stringify(value).slice(0, 90) }
+    catch { return '[object]' }
+  }
+  const text = String(value)
+  return text.length > 120 ? `${text.slice(0, 120)}…` : text
+}
+
+function cellValue(row: Record<string, unknown>, column: ColumnMeta): string {
+  return formatCell(row[column.name], column.type)
+}
+
+// Returned as COMPLETE class strings and applied with `:class`, because a
+// `{{ }}` placeholder inside a class attribute is not reactively bound.
+function cellClass(column: ColumnMeta): string {
+  const align = column.type === 'number' ? 'text-right tabular-nums' : 'text-left'
+  const mono = column.type === 'json' ? ' font-mono text-[12px]' : ''
+  return `px-3 py-2 max-w-xs truncate whitespace-nowrap text-[13px] text-neutral-800 dark:text-neutral-200 ${align}${mono}`
+}
+
+function headerClass(column: ColumnMeta): string {
+  const align = column.type === 'number' ? 'justify-end' : 'justify-start'
+  return `flex items-center gap-1 w-full ${align} font-medium text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors`
+}
+
+function sortIconClass(column: ColumnMeta): string {
+  if (sort() !== column.name) return 'h-3 w-3 opacity-0 group-hover:opacity-40 i-hugeicons-arrow-up-down'
+  return dir() === 'asc' ? 'h-3 w-3 i-hugeicons-arrow-up-01' : 'h-3 w-3 i-hugeicons-arrow-down-01'
+}
+
+async function load() {
+  if (!slug()) {
+    error.set('Missing model slug in the URL.')
+    loading.set(false)
+    return
+  }
+  loading.set(true)
+  error.set(null)
+  try {
+    const params = new URLSearchParams({
+      page: String(page()),
+      per_page: String(perPage()),
+      dir: dir(),
+    })
+    if (sort()) params.set('sort', sort())
+    if (search()) params.set('q', search())
+    const active = Object.fromEntries(Object.entries(filters()).filter(([, v]) => v !== ''))
+    if (Object.keys(active).length > 0) params.set('filters', JSON.stringify(active))
+
+    const data = await dashboardApi<ResponseShape>(`/api/dashboard/models/${encodeURIComponent(slug())}?${params}`)
+
+    modelName.set(data.modelName ?? '')
+    tableName.set(data.tableName ?? '')
+    rows.set(data.rows ?? [])
+    // Only reassign when the column set actually changes. It is the same for
+    // every page and every sort of a given model, and re-rendering the
+    // header `:for` on each query both wastes work and trips a reconciler
+    // bug that leaves the columns rotated out of order.
+    const nextColumns = data.columnMeta ?? []
+    const sameColumns = nextColumns.length === columnMeta().length
+      && nextColumns.every((c, i) => c.name === columnMeta()[i]?.name)
+    if (!sameColumns) columnMeta.set(nextColumns)
+    totalCount.set(data.totalCount ?? 0)
+    lastPage.set(data.lastPage ?? 1)
+    sort.set(data.sort ?? '')
+    writeCapabilities.set(data.writeCapabilities ?? { create: false, update: false, destroy: false })
+    createFields.set(data.createFields ?? [])
+    source.set(data.source ?? 'orm')
+    error.set(data.error ?? null)
+  }
+  catch (e) {
+    error.set(e instanceof Error ? e.message : String(e))
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+function toggleSort(column: ColumnMeta) {
+  if (sort() === column.name) dir.set(dir() === 'asc' ? 'desc' : 'asc')
+  else { sort.set(column.name); dir.set('asc') }
+  page.set(1)
+  void load()
+}
+
+// Debounced so a query is not fired per keystroke. The timer id is module
+// scope rather than signal state: it is bookkeeping, not something the
+// template renders.
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+
+function onSearchInput() {
+  clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    page.set(1)
+    void load()
+  }, 250)
+}
+
+function onFilterInput(column: string, event: Event) {
+  filters.set({ ...filters(), [column]: (event.target as HTMLInputElement).value })
+  clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    page.set(1)
+    void load()
+  }, 250)
+}
+
+function clearFilters() {
+  filters.set({})
+  search.set('')
+  page.set(1)
+  void load()
+}
+
+function goToPage(next: number) {
+  const target = Math.min(Math.max(1, next), lastPage())
+  if (target === page()) return
+  page.set(target)
+  void load()
+}
+
+function onPerPageChange() {
+  page.set(1)
+  void load()
+}
+
+function startEdit(row: Record<string, unknown>) {
+  const values: Record<string, string> = {}
+  for (const column of columnMeta()) {
+    const raw = row[column.name]
+    values[column.name] = raw === null || raw === undefined ? '' : String(raw)
+  }
+  editValues.set(values)
+  editing.set(row)
+}
+
+function openCreate(): void {
+  createError.set('')
+  createErrors.set({})
+  showCreate.set(true)
+}
+
+async function createRecord(fields: Record<string, unknown>): Promise<void> {
+  creating.set(true)
+  createError.set('')
+  createErrors.set({})
+  try {
+    const result = await dashboardApi<{ ok: boolean, id?: number | string | null, error?: string, errors?: Record<string, string[]> }>(
+      `/api/dashboard/models/${encodeURIComponent(slug())}`,
+      { method: 'POST', body: { fields } },
+    )
+    if (!result?.ok) {
+      createError.set(result?.error || 'The record was rejected.')
+      createErrors.set(result?.errors ?? {})
+      return
+    }
+    pushToast('success', `${modelName()} created`, { detail: result.id ? `Record ${result.id}` : undefined })
+    showCreate.set(false)
+    page.set(1)
+    await load()
+  }
+  catch (reason) {
+    createError.set(reason instanceof Error ? reason.message : String(reason))
+  }
+  finally {
+    creating.set(false)
+  }
+}
+
+function onEditInput(column: string, event: Event) {
+  editValues.set({ ...editValues(), [column]: (event.target as HTMLInputElement).value })
+}
+
+async function saveEdit() {
+  const row = editing()
+  if (!row) return
+  // Send only what actually changed, so a save never rewrites columns the
+  // editor merely displayed.
+  const fields: Record<string, unknown> = {}
+  for (const [column, value] of Object.entries(editValues())) {
+    const original = row[column]
+    const originalText = original === null || original === undefined ? '' : String(original)
+    if (value !== originalText) fields[column] = value === '' ? null : value
+  }
+  if (Object.keys(fields).length === 0) {
+    editing.set(null)
+    return
+  }
+
+  saving.set(true)
+  try {
+    const result = await dashboardApi<{ ok: boolean, error?: string }>(
+      `/api/dashboard/models/${encodeURIComponent(slug())}/${row.id}`,
+      { method: 'PATCH', body: { fields } },
+    )
+    if (!result?.ok) throw new Error(result?.error || 'The update was rejected.')
+    pushToast('success', `${modelName()} ${row.id} updated`)
+    editing.set(null)
+    await load()
+  }
+  catch (e) {
+    pushToast('error', 'Could not save', { detail: e instanceof Error ? e.message : String(e) })
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+async function confirmDelete() {
+  const row = confirmingDelete()
+  if (!row) return
+  saving.set(true)
+  try {
+    const result = await dashboardApi<{ ok: boolean, error?: string }>(
+      `/api/dashboard/models/${encodeURIComponent(slug())}/${row.id}`,
+      { method: 'DELETE' },
+    )
+    if (!result?.ok) throw new Error(result?.error || 'The delete was rejected.')
+    pushToast('success', `${modelName()} ${row.id} deleted`)
+    confirmingDelete.set(null)
+    // Deleting the last row of the final page would strand the viewer on an
+    // empty page, so step back one.
+    if (rows().length === 1 && page() > 1) page.set(page() - 1)
+    await load()
+  }
+  catch (e) {
+    pushToast('error', 'Could not delete', { detail: e instanceof Error ? e.message : String(e) })
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+void load()
+</script>
+
+<template>
+<div class="p-6 space-y-4">
+
+  <!-- Written out rather than using <PageHeader>: that component renders on
+      the server, so a `{{ }}` placeholder in it is baked at render time and
+      would stay empty for a title that only exists once the fetch resolves.
+      `:text` bindings here stay reactive. -->
+  <div class="flex flex-wrap gap-4 items-start justify-between">
+    <div class="min-w-0">
+      <h1 class="font-semibold text-2xl text-neutral-900 truncate dark:text-white" :text="modelName()"></h1>
+      <p class="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400" :text="recordLabel() + ' · ' + tableName() + ' · ' + sourceLabel()"></p>
+    </div>
+    <div class="flex gap-2 items-center">
+      <Button
+        :if="writeCapabilities().create"
+        @click="openCreate"
+      >
+        <span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>
+        Create
+      </Button>
+      <Button
+        variant="secondary"
+        size="sm"
+        interaction="toggle"
+        :pressed="showFilters()"
+        @click="showFilters.set(!showFilters())"
+      >
+        <span class="h-4 w-4 i-hugeicons-filter"></span>
+        <span :text="filterLabel()"></span>
+      </Button>
+    </div>
+  </div>
+
+  <!-- Search + page size -->
+  <div class="flex flex-wrap gap-3 items-center">
+    <div class="relative flex-1 max-w-sm">
+      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <div class="h-4 w-4 text-neutral-400 dark:text-neutral-500 i-hugeicons-search-01"></div>
+      </div>
+      <input
+        type="search"
+        x-model="search"
+        @input="onSearchInput"
+        :placeholder="'Search ' + (modelName() || 'records')"
+        class="block pl-9 pr-3 py-1.5 w-full text-[13px] text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 bg-white dark:bg-white/10 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 transition-all"
+      >
+    </div>
+
+    <div :if="activeFilterCount() > 0 || search()" class="flex items-center">
+      <Button variant="ghost" size="sm" @click="clearFilters()">
+        Clear
+      </Button>
+    </div>
+
+    <div class="flex gap-2 items-center ml-auto text-[12px] text-neutral-500 dark:text-neutral-400">
+      <span>Show</span>
+      <select
+        x-model.number="perPage"
+        @change="onPerPageChange"
+        class="px-2 h-8 text-[12px] text-neutral-700 dark:text-neutral-200 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 focus:border-blue-500/50"
+      >
+        <template :for="option in PER_PAGE_OPTIONS">
+          <option :value="option" :selected="option === perPage()">{{ option }}</option>
+        </template>
+      </select>
+    </div>
+  </div>
+
+  <div :if="error()" class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-xl dark:border-red-800">
+    <div class="flex gap-3 items-start">
+      <span class="flex-shrink-0 mt-0.5 h-5 w-5 text-red-500 i-hugeicons-alert-02"></span>
+      <div>
+        <h3 class="font-medium text-[13px] text-red-800 dark:text-red-200">Couldn't load <span :text="modelName()"></span></h3>
+        <p class="mt-1 text-[13px] text-red-600 dark:text-red-300" :text="error()"></p>
+        <p class="mt-2 text-[12px] text-red-500 dark:text-red-400">
+          Looked for an ORM model named <code :text="modelName()"></code> and a table named <code :text="tableName()"></code>.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div :if="isEmpty()" class="p-12 text-center bg-white dark:bg-neutral-900 border border-black/8 rounded-xl dark:border-white/10">
+    <span class="mx-auto h-10 w-10 text-neutral-300 dark:text-neutral-600 i-hugeicons-database-01"></span>
+    <h3 class="mt-3 font-medium text-[15px] text-neutral-900 dark:text-white">
+      <span :if="activeFilterCount() > 0 || search()">Nothing matches those filters</span>
+      <span :if="activeFilterCount() === 0 && !search()">No <span :text="modelName()"></span> records yet</span>
+    </h3>
+    <p class="mt-1.5 text-[13px] text-neutral-500 dark:text-neutral-400">
+      <span :if="activeFilterCount() > 0 || search()">Try a broader search, or clear the filters.</span>
+      <span :if="activeFilterCount() === 0 && !search()">Seed some with <code>./buddy seed</code>.</span>
+    </p>
+  </div>
+
+  <div :if="!error() && (rows().length > 0 || loading())" class="overflow-hidden bg-white dark:bg-neutral-900 border border-black/8 rounded-xl dark:border-white/10">
+    <div class="overflow-x-auto">
+      <table class="min-w-full">
+        <thead class="bg-neutral-50 dark:bg-white/5">
+          <tr>
+            <template :for="column in columnMeta()">
+              <th scope="col" class="px-3 py-2 whitespace-nowrap group">
+                <button type="button" @click="toggleSort(column)" :class="headerClass(column)">
+                  <span>{{ column.label }}</span>
+                  <span :class="sortIconClass(column)"></span>
+                </button>
+              </th>
+            </template>
+            <th :if="canManageRows()" scope="col" class="px-3 py-2 w-24 font-medium text-[11px] text-neutral-500 text-right tracking-wide uppercase dark:text-neutral-400">Actions</th>
+          </tr>
+
+          <!-- Per-column filter row -->
+          <tr :if="showFilters()" class="bg-white dark:bg-neutral-900">
+            <template :for="column in columnMeta()">
+              <th scope="col" class="pb-2 px-2">
+                <input
+                  type="text"
+                  :value="filters()[column.name] || ''"
+                  @input="onFilterInput(column.name, $event)"
+                  :placeholder="column.label"
+                  class="block px-2 py-1 w-full font-normal text-[12px] text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 focus:border-blue-400 focus:outline-none"
+                >
+              </th>
+            </template>
+            <th :if="canManageRows()"></th>
+          </tr>
+        </thead>
+
+        <!-- Loading skeleton, shaped like the real rows so the table does not
+            collapse and jump back on every keystroke. Two <tbody> elements
+            rather than one: `:if` and `:for` on the same <template> do not
+            compose, and a table may legally carry several bodies. -->
+        <tbody :if="loading()" class="divide-black/5 divide-y dark:divide-white/8">
+          <template :for="i in skeletonRows()">
+            <tr>
+              <template :for="column in columnMeta()">
+                <td class="px-3 py-2">
+                  <div class="h-3 bg-neutral-200 dark:bg-white/10 rounded animate-pulse"></div>
+                </td>
+              </template>
+              <td :if="canManageRows()" class="px-3 py-2">
+                <div class="ml-auto h-3 w-16 bg-neutral-200 dark:bg-white/10 rounded animate-pulse"></div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+
+        <tbody :if="!loading()" class="divide-black/5 divide-y dark:divide-white/8">
+          <template :for="row in rows()">
+            <tr class="hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors">
+              <template :for="column in columnMeta()">
+                <td :class="cellClass(column)" :title="cellValue(row, column)">{{ cellValue(row, column) }}</td>
+              </template>
+              <td :if="canManageRows()" class="px-3 py-2 text-right">
+                <div class="flex gap-1 items-center justify-end">
+                  <Button :if="writeCapabilities().update" variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + modelName() + ' ' + row.id" @click="startEdit(row)">
+                    <span class="h-4 w-4 i-hugeicons-edit-02"></span>
+                  </Button>
+                  <Button :if="writeCapabilities().destroy" variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + modelName() + ' ' + row.id" @click="confirmingDelete.set(row)">
+                    <span class="h-4 w-4 text-red-500 i-hugeicons-delete-02"></span>
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="flex flex-wrap gap-3 items-center justify-between px-3 py-2 bg-neutral-50 dark:bg-white/5 border-black/5 border-t dark:border-white/10">
+      <p class="text-[12px] text-neutral-500 dark:text-neutral-400" :text="rangeLabel()"></p>
+      <div class="flex gap-1 items-center">
+        <Button variant="secondary" size="xs" :disabled="page() === 1" @click="goToPage(1)">First</Button>
+        <Button variant="secondary" size="xs" :disabled="page() === 1" @click="goToPage(page() - 1)">Previous</Button>
+        <span class="px-2 tabular-nums text-[12px] text-neutral-500 dark:text-neutral-400">{{ page() }} / {{ lastPage() }}</span>
+        <Button variant="secondary" size="xs" :disabled="page() >= lastPage()" @click="goToPage(page() + 1)">Next</Button>
+        <Button variant="secondary" size="xs" :disabled="page() >= lastPage()" @click="goToPage(lastPage())">Last</Button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Edit sheet -->
+<div :if="editing()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/30 dashboard-modal-layer" @click="editing.set(null)">
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="model-edit-title"
+      class="flex overflow-hidden flex-col max-h-[85vh] max-w-lg w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl"
+      @click.stop
+    >
+      <div class="flex items-center justify-between px-4 py-3 border-b border-black/5 dark:border-white/10">
+        <h2 id="model-edit-title" class="font-semibold text-[14px] text-neutral-900 dark:text-white">Edit <span :text="modelName()"></span></h2>
+        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close record editor" @click="editing.set(null)">
+          <span class="h-4 w-4 i-hugeicons-cancel-01"></span>
+        </Button>
+      </div>
+
+      <div class="overflow-y-auto flex-1 p-4 space-y-3">
+        <template :for="field in editFields()">
+          <div class="flex flex-col gap-1.5">
+            <label :for="'model-edit-' + field.name" class="font-medium text-[12px] text-neutral-600 dark:text-neutral-300">{{ field.label }}</label>
+            <input
+              :id="'model-edit-' + field.name"
+              type="text"
+              :value="field.value"
+              @input="onEditInput(field.name, $event)"
+              :readonly="field.readonly"
+              class="px-2.5 py-1.5 text-[13px] text-neutral-900 dark:text-neutral-100 read-only:text-neutral-500 dark:read-only:text-neutral-400 bg-white dark:bg-white/10 read-only:bg-neutral-50 dark:read-only:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+            >
+          </div>
+        </template>
+      </div>
+
+      <div class="flex gap-2 items-center justify-end px-4 py-3 bg-neutral-50 dark:bg-white/5 border-black/5 border-t dark:border-white/10">
+        <Button :disabled="saving()" variant="secondary" @click="editing.set(null)">Cancel</Button>
+        <Button :loading="saving()" @click="saveEdit()">
+          <span :if="!saving()">Save changes</span>
+          <span :if="saving()">Saving</span>
+        </Button>
+      </div>
+    </div>
+  </div>
+
+  <ConfirmDialog
+    :isOpen="Boolean(confirmingDelete())"
+    :title="'Delete this ' + modelName() + '?'"
+    :description="deleteDescription()"
+    :busy="saving()"
+    :confirmLabel="saving() ? 'Deleting' : 'Delete'"
+    @close="confirmingDelete.set(null)"
+    @confirm="confirmDelete"
+  />
+
+  <CreateRecordModal
+    :open="showCreate()"
+    :modelName="modelName()"
+    :fields="createFields()"
+    :busy="creating()"
+    :error="createError()"
+    :errors="createErrors()"
+    @close="showCreate.set(false)"
+    @submit="createRecord($event)"
+  />
+</div>
+</template>
+
+<style>
+.overflow-x-auto { -webkit-overflow-scrolling: touch; }
+</style>