@shamar/adonis 0.1.0

package/resources/views/shamar/partials/list-toolbar.edge

@@ -0,0 +1,269 @@
+<div
+  class="px-4 py-3 space-y-3"
+  x-data='shamarListToolbar({
+    search: {{ jsonAttr(query.search) }},
+    filters: {{ jsonAttr(query.filters) }},
+    filtersLockedEmpty: {{ jsonAttr(filtersLockedEmpty) }},
+    groupBy: {{ jsonAttr(query.groupBy) }},
+    groupLockedEmpty: {{ jsonAttr(groupLockedEmpty) }},
+    sort: {{ jsonAttr(query.sort) }},
+    direction: {{ jsonAttr(query.direction) }},
+    perPage: {{ jsonAttr(query.perPage) }},
+    trashed: {{ jsonAttr(query.trashed) }},
+    headers: {{ jsonAttr(listHeaders) }},
+    basePath: {{ jsonAttr(basePath) }},
+    slug: {{ jsonAttr(resource.slug) }},
+    view: {{ jsonAttr('table') }},
+    allPerPage: {{ jsonAttr(listAllPerPage) }}
+  })'
+>
+  <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+    <div
+      class="relative flex-1 min-w-0 bg-neutral-primary border border-default rounded-lg transition-shadow focus-within:ring-2 focus-within:ring-fg-brand focus-within:border-fg-brand"
+    >
+      <div class="flex items-center flex-wrap gap-1.5 px-2.5 py-1.5 min-h-[40px]">
+        <svg class="w-4 h-4 text-body-subtle shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803 7.5 7.5 0 0015.803 15.803z"/>
+        </svg>
+
+        <template x-for="(chip, i) in chips" :key="'c-' + i + '-' + chip.field">
+          <span class="shamar-chip">
+            <span x-text="chip.label || (chip.field + ': ' + chip.value)" class="max-w-[200px] truncate"></span>
+            <button type="button" @click="removeChip(i)" aria-label="Remove filter" class="shamar-chip__remove">
+              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+              </svg>
+            </button>
+          </span>
+        </template>
+
+        <template x-if="groupBy">
+          <span class="shamar-chip shamar-chip--group">
+            <span>Grouped by <span class="font-semibold" x-text="groupByLabel()"></span></span>
+            <button type="button" @click="clearGroupBy()" aria-label="Clear grouping" class="shamar-chip__remove">
+              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+              </svg>
+            </button>
+          </span>
+        </template>
+
+        <input
+          type="search"
+          x-ref="listSearchInput"
+          x-model="searchInput"
+          @input.debounce.350ms="onSearchChange()"
+          @keydown.escape="clearSearch()"
+          placeholder="Search…"
+          class="flex-1 min-w-[120px] bg-transparent border-0 px-1 py-1 text-sm text-body placeholder:text-body-subtle focus:outline-none focus:ring-0"
+        />
+
+        <button
+          x-show="chips.length || groupBy || searchInput"
+          x-cloak
+          type="button"
+          @click="clearAll()"
+          class="text-[10px] text-body-subtle hover:text-fg-brand underline shrink-0 px-1"
+        >Clear all</button>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 shrink-0 flex-wrap justify-end">
+      <div
+        class="shamar-toolbar-menu"
+        x-show="filterableHeaders().length"
+        x-cloak
+        @click.outside="panelOpen = false; openFilterField = null"
+        @keydown.escape.window="if (panelOpen) { panelOpen = false; openFilterField = null }"
+      >
+        <button
+          type="button"
+          class="shamar-toolbar-btn"
+          :class="{ 'is-active': panelOpen || chips.length }"
+          :aria-expanded="panelOpen.toString()"
+          aria-haspopup="menu"
+          @click="panelOpen = !panelOpen; if (!panelOpen) openFilterField = null"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"/>
+          </svg>
+          Filters
+          <span x-show="chips.length" x-cloak class="shamar-toolbar-btn__badge" x-text="chips.length"></span>
+        </button>
+
+        <div
+          x-show="panelOpen"
+          x-cloak
+          x-transition.opacity.duration.120ms
+          class="shamar-toolbar-panel"
+          role="menu"
+          aria-label="Filters"
+        >
+          <div class="shamar-toolbar-panel__head">
+            <p class="text-xs font-semibold uppercase tracking-wide text-body-subtle">Filter by</p>
+            <button
+              type="button"
+              class="text-xs text-body-subtle underline hover:text-fg-brand"
+              x-show="chips.length"
+              @click="chips = []; filtersLockedEmpty = true; applyFilters()"
+            >Clear filters</button>
+          </div>
+
+          <template x-if="!openFilterField">
+            <div class="shamar-toolbar-panel__list">
+              <template x-for="h in filterableHeaders()" :key="'f-' + h.name">
+                <button
+                  type="button"
+                  class="shamar-toolbar-panel__item"
+                  role="menuitem"
+                  @click="toggleFilterField(h.name); if (h.filter_kind === 'm2o') searchM2o(h)"
+                >
+                  <span x-text="h.label"></span>
+                  <svg class="w-3.5 h-3.5 text-body-subtle" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
+                </button>
+              </template>
+            </div>
+          </template>
+
+          <template x-if="openFilterField">
+            <div>
+              <button
+                type="button"
+                class="shamar-toolbar-panel__back"
+                @click="openFilterField = null"
+              >
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/></svg>
+                <span x-text="(headers.find(h => h.name === openFilterField) || {}).label || 'Back'"></span>
+              </button>
+
+              <template x-for="h in filterableHeaders().filter(item => item.name === openFilterField)" :key="'fv-' + h.name">
+                <div class="shamar-toolbar-panel__list">
+                  <template x-if="h.filter_kind === 'boolean'">
+                    <div>
+                      <button type="button" class="shamar-toolbar-panel__item" @click="addBooleanFilter(h, true)">Yes</button>
+                      <button type="button" class="shamar-toolbar-panel__item" @click="addBooleanFilter(h, false)">No</button>
+                    </div>
+                  </template>
+
+                  <template x-if="h.filter_kind === 'select'">
+                    <div>
+                      <template x-for="opt in (h.options || [])" :key="'so-' + opt.value">
+                        <button type="button" class="shamar-toolbar-panel__item" @click="addSelectFilter(h, opt)" x-text="opt.label"></button>
+                      </template>
+                    </div>
+                  </template>
+
+                  <template x-if="h.filter_kind === 'm2o'">
+                    <div class="p-2 space-y-2">
+                      <input
+                        type="search"
+                        class="shamar-select w-full"
+                        placeholder="Search…"
+                        x-model="m2oQuery[h.name]"
+                        @input.debounce.300ms="searchM2o(h)"
+                      />
+                      <div class="max-h-48 overflow-auto rounded-md border border-default">
+                        <template x-for="opt in (m2oResults[h.name] || [])" :key="'m2o-' + opt.id">
+                          <button
+                            type="button"
+                            class="shamar-toolbar-panel__item"
+                            @click="addM2oFilter(h, opt)"
+                            x-text="opt.label"
+                          ></button>
+                        </template>
+                        <p
+                          x-show="!(m2oResults[h.name] || []).length"
+                          class="px-3 py-2 text-xs text-body-subtle"
+                        >No matches</p>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <div
+        class="shamar-toolbar-menu"
+        x-show="groupableHeaders().length"
+        x-cloak
+        @click.outside="groupOpen = false"
+        @keydown.escape.window="if (groupOpen) groupOpen = false"
+      >
+        <button
+          type="button"
+          class="shamar-toolbar-btn"
+          :class="{ 'is-active': groupOpen || groupBy }"
+          :aria-expanded="groupOpen.toString()"
+          aria-haspopup="menu"
+          @click="groupOpen = !groupOpen"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/>
+          </svg>
+          Group
+        </button>
+
+        <div
+          x-show="groupOpen"
+          x-cloak
+          x-transition.opacity.duration.120ms
+          class="shamar-toolbar-panel"
+          role="menu"
+          aria-label="Group by"
+        >
+          <div class="shamar-toolbar-panel__head">
+            <p class="text-xs font-semibold uppercase tracking-wide text-body-subtle">Group by</p>
+            <button
+              type="button"
+              class="text-xs text-body-subtle underline hover:text-fg-brand"
+              x-show="groupBy"
+              @click="clearGroupBy()"
+            >Clear</button>
+          </div>
+          <div class="shamar-toolbar-panel__list">
+            <template x-for="h in groupableHeaders()" :key="'g-' + h.name">
+              <button
+                type="button"
+                class="shamar-toolbar-panel__item"
+                :class="{ 'is-selected': groupBy === h.name }"
+                role="menuitem"
+                @click="setGroupBy(h.name)"
+              >
+                <span x-text="h.label"></span>
+                <svg x-show="groupBy === h.name" class="w-3.5 h-3.5 text-fg-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
+              </button>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <label for="list-per-page" class="text-xs font-medium text-body-subtle whitespace-nowrap">Rows</label>
+      <select
+        id="list-per-page"
+        x-model="perPage"
+        @change="reload()"
+        class="shamar-select w-auto min-w-[5.5rem]"
+      >
+        <option value="10">10</option>
+        <option value="15">15</option>
+        <option value="20">20</option>
+        <option value="50">50</option>
+        <option value="all">All records</option>
+      </select>
+      <button
+        type="button"
+        class="shamar-list-refresh"
+        data-shamar-list-refresh
+        title="Refresh (double-click for auto-refresh every 10s)"
+        aria-label="Refresh list"
+      >
+        <svg class="shamar-list-refresh__icon h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>

package/resources/views/shamar/partials/nav-mobile.edge

@@ -0,0 +1,21 @@
+<nav class="flex-1 px-2 py-3 overflow-y-auto space-y-4" aria-label="Navigation">
+  @each(group in navGroups)
+    <div>
+      <p class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-body-subtle">{{ group.name }}</p>
+      <div class="space-y-0.5">
+        @each(item in group.items)
+          <a
+            href="{{ basePath }}/{{ item.slug }}"
+            class="nav-item flex items-center gap-2.5 px-3 py-2 rounded-md text-sm {{ resource && item.slug === resource.slug ? 'nav-active' : '' }}"
+            @click="sidebarOpen = false"
+          >
+            <span class="shrink-0 w-4 h-4">
+              @include('shamar::partials/icon')
+            </span>
+            <span class="truncate">{{ item.label }}</span>
+          </a>
+        @endeach
+      </div>
+    </div>
+  @endeach
+</nav>

package/resources/views/shamar/partials/nav.edge

@@ -0,0 +1,58 @@
+<aside
+  class="fixed md:relative inset-y-0 left-0 z-30 w-64 min-h-screen bg-shamar-shell flex flex-col flex-shrink-0 md:translate-x-0 transition-transform duration-200 ease-in-out"
+  :class="{ '-translate-x-full': !sidebarOpen }"
+>
+  <div class="relative px-4 shrink-0 flex items-center min-h-[60px]">
+    <a href="{{ basePath }}" class="flex min-w-0 items-center gap-2.5">
+      @if(branding.logoUrl)
+        <img
+          src="{{ branding.logoUrl }}"
+          alt="{{ branding.brandName }}"
+          class="h-8 w-auto max-w-[9rem] object-contain dark:hidden"
+        />
+        <img
+          src="{{ branding.logoDarkUrl ?? branding.logoUrl }}"
+          alt="{{ branding.brandName }}"
+          class="hidden h-8 w-auto max-w-[9rem] object-contain dark:block"
+        />
+      @endif
+      <span class="truncate text-base font-semibold text-heading">{{ panelTitle }}</span>
+    </a>
+    <button
+      type="button"
+      @click="sidebarOpen = false"
+      aria-label="Close sidebar"
+      class="absolute right-3 top-1/2 -translate-y-1/2 md:hidden p-1 rounded-md text-body-subtle hover:text-heading hover:bg-surface-hover"
+    >
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  </div>
+
+  <nav class="hidden md:block flex-1 px-2 py-3 space-y-0.5 overflow-y-auto" aria-label="Applications">
+    @each(root in menuRoots)
+      <a
+        href="{{ root.href }}"
+        class="nav-item flex items-center gap-2.5 px-3 py-2 rounded-md text-sm {{ root.active ? 'nav-active' : '' }}"
+        @click="sidebarOpen = false"
+      >
+        <span class="shrink-0 w-4 h-4">
+          @include('shamar::partials/icon')
+        </span>
+        <span class="truncate">{{ root.label }}</span>
+      </a>
+    @endeach
+  </nav>
+
+  <div class="md:hidden flex-1 min-h-0 flex flex-col overflow-hidden">
+    @include('shamar::partials/nav-mobile')
+  </div>
+
+  <div class="mt-auto px-4 py-3 text-xs text-body-subtle hidden md:block">
+    @if(branding.copyrightText)
+      <p class="mb-2 leading-relaxed">{{ branding.copyrightText }}</p>
+    @endif
+    <p class="truncate">Signed in as <span class="font-semibold text-heading">{{ user.name }}</span></p>
+  </div>
+</aside>

package/resources/views/shamar/partials/page-heading.edge

@@ -0,0 +1,130 @@
+<div class="pt-1 pb-2">
+  @if(breadcrumbs && breadcrumbs.length)
+    <nav aria-label="Breadcrumb" class="mb-2 flex items-center gap-1.5 text-xs text-body-subtle flex-wrap">
+      @each(crumb in breadcrumbs)
+        @if(!$last)
+          @if(crumb.href)
+            <a href="{{ crumb.href }}" class="hover:text-fg-brand hover:underline transition-colors truncate max-w-[140px]">{{ crumb.label }}</a>
+          @else
+            <span class="truncate max-w-[140px]">{{ crumb.label }}</span>
+          @endif
+          <svg class="w-3 h-3 flex-shrink-0 text-body-subtle/50" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
+          </svg>
+        @else
+          @if(crumb.href)
+            <a href="{{ crumb.href }}" class="text-body hover:text-fg-brand hover:underline transition-colors truncate max-w-[200px]">{{ crumb.label }}</a>
+          @else
+            <span class="text-body truncate max-w-[200px]">{{ crumb.label }}</span>
+          @endif
+        @endif
+      @endeach
+    </nav>
+  @endif
+
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+    <div class="min-w-0 flex items-center gap-3 flex-wrap">
+      <div class="min-w-0">
+        <h1 class="text-xl font-semibold text-heading truncate">{{ pageTitle }}</h1>
+        @if(pageSubtitle)
+          <p class="mt-1 text-sm text-body-subtle">{{ pageSubtitle }}</p>
+        @endif
+      </div>
+      @if(mode === 'edit' || mode === 'create' || mode === 'show')
+        <span class="inline-flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full
+          {{ mode === 'edit' ? 'bg-warning-soft text-warning-strong' : mode === 'create' ? 'bg-success-soft text-success-strong' : 'bg-badge-neutral text-body-subtle' }}">
+          {{ mode === 'show' ? 'detail' : mode }}
+        </span>
+      @endif
+    </div>
+
+    <div class="flex flex-wrap items-center gap-2 shrink-0">
+      @if(showCreateButton)
+        <a href="{{ basePath }}/{{ resource.slug }}/create" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white rounded-md bg-fg-brand hover:opacity-90 transition-opacity">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+          </svg>
+          New
+        </a>
+      @endif
+
+      @if(mode === 'edit' || mode === 'create')
+        <button
+          type="button"
+          data-shamar-form-save
+          title="Save (Ctrl+S)"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white rounded-md bg-fg-brand hover:opacity-90 transition"
+        >
+          {{ mode === 'create' ? 'Create' : 'Save' }}
+        </button>
+        @if(mode === 'edit')
+          <a
+            href="{{ basePath }}/{{ resource.slug }}/{{ record.id }}{{ recordPager ? recordPager.navQuery : '' }}"
+            title="View details"
+            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border border-default text-body rounded-md hover:bg-surface-hover transition"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+            View
+          </a>
+          <a
+            href="{{ basePath }}/{{ resource.slug }}"
+            data-shamar-list-href="{{ resource.slug }}"
+            data-shamar-skip-autosave
+            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border border-default text-body rounded-md hover:bg-surface-hover transition"
+          >Cancel</a>
+          @if(showDeleteButton)
+          <button
+            type="button"
+            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border border-default text-fg-danger rounded-md hover:bg-danger-soft transition"
+            @click="$dispatch('shamar-open-confirm', { variant: 'danger', mode: 'confirm', title: 'Delete {{ resource.singularLabel }}?', message: 'This action cannot be undone.', confirmLabel: 'Delete', action: '{{ basePath }}/{{ resource.slug }}/{{ record.id }}/delete' })"
+          >Delete</button>
+          @endif
+        @else
+          <a
+            href="{{ basePath }}/{{ resource.slug }}"
+            data-shamar-list-href="{{ resource.slug }}"
+            data-shamar-skip-autosave
+            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border border-default text-body rounded-md hover:bg-surface-hover transition"
+          >Cancel</a>
+        @endif
+      @elseif(mode === 'show')
+        @if(showEditButton !== false && showEditButton)
+        <a href="{{ basePath }}/{{ resource.slug }}/{{ record.id }}/edit{{ recordPager ? recordPager.navQuery : '' }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white rounded-md bg-fg-brand hover:opacity-90 transition">Edit</a>
+        @endif
+        @if(recordActions)
+          @each(action in recordActions)
+            @if(action.name !== 'view' && action.name !== 'edit' && action.name !== 'delete')
+              <button
+                type="button"
+                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border border-default rounded-md transition
+                  {{ action.color === 'danger' ? 'text-fg-danger hover:bg-danger-soft' : 'text-body hover:bg-surface-hover' }}"
+                @click="$dispatch('shamar-open-confirm', { variant: {{ jsonAttr(action.color === 'danger' ? 'danger' : 'primary') }}, mode: 'confirm', title: {{ jsonAttr(action.label) }}, message: {{ jsonAttr(action.confirm || 'Are you sure?') }}, confirmLabel: {{ jsonAttr(action.label) }}, action: '{{ basePath }}/{{ resource.slug }}/{{ record.id }}/action/{{ action.name }}' })"
+              >{{ action.label }}</button>
+            @endif
+          @endeach
+        @endif
+        <a href="{{ basePath }}/{{ resource.slug }}" data-shamar-list-href="{{ resource.slug }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border border-default text-body rounded-md hover:bg-surface-hover transition">Back to list</a>
+        @if(showDeleteButton)
+        <button
+          type="button"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border border-default text-fg-danger rounded-md hover:bg-danger-soft transition"
+          @click="$dispatch('shamar-open-confirm', { variant: 'danger', mode: 'confirm', title: 'Delete {{ resource.singularLabel }}?', message: 'This action cannot be undone.', confirmLabel: 'Delete', action: '{{ basePath }}/{{ resource.slug }}/{{ record.id }}/delete' })"
+        >Delete</button>
+        @endif
+      @else
+        @if(showEditButton)
+          <a href="{{ basePath }}/{{ resource.slug }}/{{ id }}/edit" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white rounded-md bg-fg-brand hover:opacity-90 transition-opacity">Edit</a>
+        @endif
+        @if(showBackToList)
+          <a href="{{ basePath }}/{{ resource.slug }}" data-shamar-list-href="{{ resource.slug }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border border-default text-body rounded-md hover:bg-surface-hover transition">Back to list</a>
+        @endif
+      @endif
+      @if(mode === 'edit' || mode === 'create' || mode === 'show')
+        @include('shamar::partials/record-pager')
+      @endif
+    </div>
+  </div>
+</div>

package/resources/views/shamar/partials/pagination.edge

@@ -0,0 +1,73 @@
+@if(pagination)
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between text-sm text-body-subtle">
+    <p>
+      Page {{ pagination.page }} of {{ pagination.pageCount }}
+      · {{ pagination.total }} records
+    </p>
+
+    @if(pagination.pageCount > 1)
+      <div class="flex flex-wrap items-center gap-1.5">
+        @if(pagination.prevHref)
+          <a
+            href="{{ pagination.prevHref }}"
+            class="rounded-md border border-default bg-neutral-primary px-3 py-1.5 text-sm text-body hover:bg-surface-hover"
+          >Previous</a>
+        @else
+          <span class="rounded-md border border-default bg-neutral-primary/50 px-3 py-1.5 text-sm text-body-subtle cursor-not-allowed">Previous</span>
+        @endif
+
+        @each(link in pagination.links)
+          @if(link.type === 'ellipsis')
+            <span class="px-1.5 text-body-subtle select-none">…</span>
+          @else
+            <a
+              href="{{ link.href }}"
+              class="min-w-[2.25rem] rounded-md border px-2.5 py-1.5 text-center text-sm transition-colors {{ link.active ? 'border-brand bg-surface-inset font-medium text-fg-brand' : 'border-default bg-neutral-primary text-body hover:bg-surface-hover' }}"
+              {{ link.active ? 'aria-current="page"' : '' }}
+            >{{ link.label }}</a>
+          @endif
+        @endeach
+
+        @if(pagination.nextHref)
+          <a
+            href="{{ pagination.nextHref }}"
+            class="rounded-md border border-default bg-neutral-primary px-3 py-1.5 text-sm text-body hover:bg-surface-hover"
+          >Next</a>
+        @else
+          <span class="rounded-md border border-default bg-neutral-primary/50 px-3 py-1.5 text-sm text-body-subtle cursor-not-allowed">Next</span>
+        @endif
+
+        <form
+          method="get"
+          action="{{ pagination.formAction }}"
+          class="ml-1 flex items-center gap-1.5"
+        >
+          @if(query.search)
+            <input type="hidden" name="search" value="{{ query.search }}" />
+          @endif
+          @if(query.sort)
+            <input type="hidden" name="sort" value="{{ query.sort }}" />
+            <input type="hidden" name="direction" value="{{ query.direction }}" />
+          @endif
+          @if(query.perPage !== '15' && query.perPage !== 15)
+            <input type="hidden" name="perPage" value="{{ query.perPage }}" />
+          @endif
+          <label for="pagination-jump-page" class="sr-only">Jump to page</label>
+          <input
+            id="pagination-jump-page"
+            type="number"
+            name="page"
+            min="1"
+            max="{{ pagination.pageCount }}"
+            value="{{ pagination.page }}"
+            class="shamar-input w-16 px-2 py-1.5 text-center text-sm"
+          />
+          <button
+            type="submit"
+            class="rounded-md border border-default bg-neutral-primary px-2.5 py-1.5 text-sm text-body hover:bg-surface-hover"
+          >Go</button>
+        </form>
+      </div>
+    @endif
+  </div>
+@endif

package/resources/views/shamar/partials/record-pager.edge

@@ -0,0 +1,37 @@
+{{-- Cyclic prev/next record pager (PyVELM-style). Expects `recordPager`. --}}
+@if(recordPager)
+  <div
+    class="inline-flex items-center gap-2 shrink-0"
+    data-shamar-record-pager
+    data-shamar-pager-prev="{{ recordPager.prevUrl }}"
+    data-shamar-pager-next="{{ recordPager.nextUrl }}"
+  >
+    <div class="inline-flex rounded-md border border-default overflow-hidden bg-neutral-primary">
+      <a
+        href="{{ recordPager.prevUrl }}"
+        class="inline-flex items-center justify-center w-8 h-8 text-body-subtle hover:bg-surface-hover hover:text-heading transition-colors"
+        title="Previous record (wraps at start)"
+        aria-label="Previous record"
+        data-shamar-pager-link
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
+        </svg>
+      </a>
+      <a
+        href="{{ recordPager.nextUrl }}"
+        class="inline-flex items-center justify-center w-8 h-8 text-body-subtle border-l border-default hover:bg-surface-hover hover:text-heading transition-colors"
+        title="Next record (wraps at end)"
+        aria-label="Next record"
+        data-shamar-pager-link
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
+        </svg>
+      </a>
+    </div>
+    <span class="text-xs text-body-subtle tabular-nums whitespace-nowrap" title="Position in the current list">
+      {{ recordPager.index }} / {{ recordPager.total }}
+    </span>
+  </div>
+@endif