@shamar/adonis 0.1.0

package/resources/views/shamar/partials/field-relation-checkbox.edge

@@ -0,0 +1,104 @@
+{{-- Checkbox list for manyToMany. Expects `relationConfig`. --}}
+<div
+  class="shamar-m2m-checkboxes relative w-full"
+  data-shamar-m2m-config="{{ jsonAttr(relationConfig) }}"
+  x-data="shamarM2mCheckboxFromEl($el)"
+>
+  <template x-if="!readonly">
+    <template x-for="item in selected" :key="'h-' + itemValue(item)">
+      <input type="hidden" name="{{ relationConfig.name }}[]" :value="itemValue(item)" />
+    </template>
+  </template>
+
+  <div class="shamar-m2m-checkboxes__toolbar mb-2 flex items-center gap-2" x-show="!readonly">
+    <input
+      type="search"
+      x-model="filter"
+      placeholder="Filter…"
+      class="shamar-input w-full max-w-xs text-sm"
+      autocomplete="off"
+    />
+    <span class="shrink-0 text-xs text-body-subtle" x-text="selected.length + ' selected'"></span>
+  </div>
+
+  <div
+    class="shamar-m2m-checkboxes__body"
+    :class="framed ? 'shamar-m2m-checkboxes__body--framed' : 'shamar-m2m-checkboxes__body--open'"
+  >
+    <template x-if="loading">
+      <div class="px-2 py-3 text-xs text-body-subtle">Loading…</div>
+    </template>
+    <template x-if="!loading && filteredGroups.length === 0">
+      <div class="px-2 py-3 text-xs text-body-subtle">No related records.</div>
+    </template>
+
+    <div
+      x-show="!loading && groupBy && filteredGroups.length > 0"
+      class="shamar-m2m-checkboxes__clusters"
+      :class="'shamar-m2m-checkboxes__clusters--cols-' + columns"
+      :style="'--shamar-checkbox-cols:' + columns"
+    >
+      <template x-for="group in filteredGroups" :key="group.key">
+        <section class="shamar-m2m-checkboxes__cluster">
+          <header class="shamar-m2m-checkboxes__cluster-header">
+            <div class="min-w-0">
+              <h4 class="truncate text-xs font-semibold text-heading" x-text="group.title"></h4>
+            </div>
+            <span
+              class="shamar-m2m-checkboxes__cluster-count shrink-0"
+              x-text="groupSelectedCount(group) + '/' + group.items.length"
+            ></span>
+          </header>
+          <div class="shamar-m2m-checkboxes__cluster-body">
+            <template x-for="item in group.items" :key="item.id">
+              <label
+                class="shamar-m2m-checkboxes__item flex items-center gap-2 rounded px-1.5 py-1 text-sm"
+                :class="{
+                  'opacity-50 cursor-not-allowed': isCovered(item) && !isSelected(item),
+                  'cursor-pointer hover:bg-neutral-secondary': !readonly && !(isCovered(item) && !isSelected(item)),
+                  'opacity-60': readonly
+                }"
+              >
+                <input
+                  type="checkbox"
+                  class="shamar-checkbox__input"
+                  :checked="isSelected(item)"
+                  :disabled="readonly || (isCovered(item) && !isSelected(item))"
+                  @change="toggle(item)"
+                />
+                <span class="min-w-0 truncate text-body" x-text="itemDisplay(item)"></span>
+              </label>
+            </template>
+          </div>
+        </section>
+      </template>
+    </div>
+
+    <div
+      x-show="!loading && !groupBy && filteredOptions.length > 0"
+      class="shamar-m2m-checkboxes__list"
+      :class="'shamar-m2m-checkboxes__list--cols-' + columns"
+      :style="'--shamar-checkbox-cols:' + columns"
+    >
+      <template x-for="item in filteredOptions" :key="item.id">
+        <label
+          class="shamar-m2m-checkboxes__item flex items-center gap-2 rounded px-2 py-1.5 text-sm"
+          :class="{
+            'opacity-50 cursor-not-allowed': isCovered(item) && !isSelected(item),
+            'cursor-pointer hover:bg-neutral-secondary': !readonly && !(isCovered(item) && !isSelected(item)),
+            'opacity-60': readonly
+          }"
+        >
+          <input
+            type="checkbox"
+            class="shamar-checkbox__input"
+            :checked="isSelected(item)"
+            :disabled="readonly || (isCovered(item) && !isSelected(item))"
+            @change="toggle(item)"
+          />
+          <span class="min-w-0 truncate text-body" x-text="itemDisplay(item)"></span>
+        </label>
+      </template>
+    </div>
+  </div>
+</div>

package/resources/views/shamar/partials/field-relation-m2m.edge

@@ -0,0 +1,110 @@
+{{-- ManyToMany / multi relation combobox. Expects `relationConfig`. --}}
+<div
+  class="shamar-m2m relative w-full"
+  data-shamar-m2m-config="{{ jsonAttr(relationConfig) }}"
+  x-data="shamarM2mFromEl($el)"
+  @click.outside="close()"
+  @focusout="onFocusOut($event)"
+  @keydown.escape.prevent.stop="close()"
+>
+  <template x-for="item in selected" :key="'h-' + item.id">
+    <input type="hidden" name="{{ relationConfig.name }}[]" :value="item.id" />
+  </template>
+
+  <div
+    class="shamar-m2m__box shamar-input flex min-h-[2.375rem] w-full flex-wrap items-center gap-1.5 py-1.5 pl-2 pr-2"
+    :class="{ 'is-readonly': readonly, 'is-open': open }"
+    @click="focusInput()"
+  >
+    <template x-for="item in selected" :key="item.id">
+      <span class="shamar-chip inline-flex max-w-full items-center gap-1 rounded-md bg-brand-softer px-1.5 py-0.5 text-xs text-fg-brand">
+        <button
+          type="button"
+          class="shamar-chip__label max-w-[12rem] truncate hover:underline"
+          @click.stop="openRecord(item)"
+          x-text="item.label"
+        ></button>
+        <button
+          type="button"
+          x-show="!readonly"
+          @click.stop="remove(item.id)"
+          aria-label="Remove"
+          class="shamar-chip__remove rounded p-0.5 text-fg-brand/70 hover:bg-danger-soft hover:text-fg-danger"
+        >
+          <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </span>
+    </template>
+
+    <input
+      type="text"
+      x-ref="input"
+      x-model="query"
+      x-show="!readonly"
+      @focus="onFocus()"
+      @input.debounce.250ms="onInput()"
+      @keydown.arrow-down.prevent="moveCursor(1)"
+      @keydown.arrow-up.prevent="moveCursor(-1)"
+      @keydown.enter.prevent="onEnter()"
+      @keydown.backspace="onBackspace()"
+      placeholder="{{ field.placeholder ?? 'Search…' }}"
+      autocomplete="off"
+      class="shamar-m2m__input min-w-[7rem] flex-1 border-0 bg-transparent p-0 text-sm outline-none focus:ring-0"
+    />
+  </div>
+
+  <div
+    x-show="open"
+    x-cloak
+    x-transition.opacity.duration.100ms
+    class="shamar-m2m__dropdown absolute left-0 right-0 top-full z-50 mt-1 max-h-72 overflow-auto rounded-md border border-default bg-neutral-primary text-sm shadow-lg"
+    role="listbox"
+  >
+    <template x-if="loading">
+      <div class="px-3 py-2 text-xs text-body-subtle">Searching…</div>
+    </template>
+    <template x-if="!loading && availableResults.length === 0 && !createCandidate">
+      <div class="px-3 py-2 text-xs text-body-subtle">No matches.</div>
+    </template>
+    <ul x-show="!loading && (availableResults.length > 0 || createCandidate || canCreateAndEdit)">
+      <template x-for="(item, i) in availableResults" :key="item.id">
+        <li
+          role="option"
+          @mousedown.prevent="pick(item)"
+          @mousemove="cursor = i"
+          :class="i === cursor ? 'bg-brand-softer text-fg-brand' : 'text-body hover:bg-neutral-secondary'"
+          class="cursor-pointer truncate px-3 py-1.5"
+          x-text="item.label"
+        ></li>
+      </template>
+      <template x-if="createCandidate">
+        <li
+          role="option"
+          @click="createFromQuery()"
+          @mousemove="cursor = availableResults.length"
+          :class="cursor === availableResults.length ? 'bg-success-soft text-success-strong' : 'text-fg-success hover:bg-neutral-secondary'"
+          class="flex cursor-pointer items-center gap-1.5 border-t border-default px-3 py-1.5"
+        >
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+          </svg>
+          <span>Create "<span x-text="query"></span>"</span>
+        </li>
+      </template>
+      <template x-if="canCreateAndEdit">
+        <li
+          role="option"
+          @click="createAndEdit()"
+          class="flex cursor-pointer items-center gap-1.5 border-t border-default px-3 py-1.5 text-body hover:bg-neutral-secondary"
+        >
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/>
+          </svg>
+          <span>Create and edit…</span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</div>

package/resources/views/shamar/partials/field-relation-m2o.edge

@@ -0,0 +1,116 @@
+{{-- BelongsTo async combobox (Create / Create & Edit). Expects `relationConfig`. --}}
+<div
+  class="shamar-m2o relative w-full"
+  data-shamar-m2o-config="{{ jsonAttr(relationConfig) }}"
+  x-data="shamarM2oFromEl($el)"
+  @click.outside="close()"
+  @focusout="onFocusOut($event)"
+  @keydown.escape.prevent.stop="close()"
+>
+  <input
+    type="hidden"
+    name="{{ relationConfig.name }}"
+    :value="value === null || value === '' ? '' : value"
+    @change="$dispatch('input')"
+  />
+
+  <div class="shamar-m2o__row flex w-full items-stretch gap-1">
+    <div class="relative min-w-0 flex-1">
+      <input
+        type="text"
+        x-ref="input"
+        x-model="query"
+        :readonly="readonly"
+        @focus="onFocus()"
+        @input.debounce.250ms="onInput()"
+        @keydown.arrow-down.prevent="moveCursor(1)"
+        @keydown.arrow-up.prevent="moveCursor(-1)"
+        @keydown.enter.prevent="onEnter()"
+        placeholder="{{ field.placeholder ?? 'Search…' }}"
+        autocomplete="off"
+        class="shamar-input shamar-m2o__input w-full pr-8"
+        :class="{ 'is-readonly': readonly }"
+      />
+
+      <button
+        type="button"
+        x-show="value !== null && value !== '' && !readonly"
+        @click.stop="clearSelection()"
+        aria-label="Clear"
+        class="shamar-m2o__clear absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-body-subtle hover:bg-danger-soft hover:text-fg-danger"
+      >
+        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+        </svg>
+      </button>
+    </div>
+
+    <button
+      type="button"
+      x-show="value !== null && value !== ''"
+      @click.stop="openRecord()"
+      title="Open record"
+      aria-label="Open record"
+      class="shamar-m2o__open inline-flex h-[2.375rem] w-9 shrink-0 items-center justify-center rounded-md border border-default bg-neutral-primary text-body-subtle hover:border-fg-brand hover:text-fg-brand"
+    >
+      <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
+      </svg>
+    </button>
+  </div>
+
+  <div
+    x-show="open"
+    x-cloak
+    x-transition.opacity.duration.100ms
+    class="shamar-m2o__dropdown absolute left-0 right-0 top-full z-50 mt-1 max-h-72 overflow-auto rounded-md border border-default bg-neutral-primary text-sm shadow-lg"
+    role="listbox"
+  >
+    <template x-if="loading">
+      <div class="px-3 py-2 text-xs text-body-subtle">Searching…</div>
+    </template>
+    <template x-if="!loading && results.length === 0 && !createCandidate">
+      <div class="px-3 py-2 text-xs text-body-subtle">No matches.</div>
+    </template>
+    <ul x-show="!loading && (results.length > 0 || createCandidate || canCreateAndEdit)">
+      <template x-for="(item, i) in results" :key="item.id">
+        <li
+          role="option"
+          @mousedown.prevent="pick(item)"
+          @mousemove="cursor = i"
+          :class="i === cursor ? 'bg-brand-softer text-fg-brand' : 'text-body hover:bg-neutral-secondary'"
+          class="flex cursor-pointer items-center justify-between px-3 py-1.5"
+        >
+          <span x-text="item.label" class="truncate"></span>
+          <span x-show="String(item.id) === String(value)" class="text-2xs font-medium text-fg-brand">selected</span>
+        </li>
+      </template>
+      <template x-if="createCandidate">
+        <li
+          role="option"
+          @mousedown.prevent="createFromQuery()"
+          @mousemove="cursor = results.length"
+          :class="cursor === results.length ? 'bg-success-soft text-success-strong' : 'text-fg-success hover:bg-neutral-secondary'"
+          class="flex cursor-pointer items-center gap-1.5 border-t border-default px-3 py-1.5"
+        >
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+          </svg>
+          <span>Create "<span x-text="query"></span>"</span>
+        </li>
+      </template>
+      <template x-if="canCreateAndEdit">
+        <li
+          role="option"
+          @mousedown.prevent="createAndEdit()"
+          class="flex cursor-pointer items-center gap-1.5 border-t border-default px-3 py-1.5 text-body hover:bg-neutral-secondary"
+        >
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/>
+          </svg>
+          <span>Create and edit…</span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</div>

package/resources/views/shamar/partials/field-relation-table.edge

@@ -0,0 +1,139 @@
+{{-- Relation table (HasMany / M2M). Expects `relationConfig`. --}}
+@if(relationConfig.requiresParent)
+  <div class="rounded-md border border-dashed border-default px-4 py-8 text-center text-sm text-body-subtle">
+    Save this record first to manage related {{ relationConfig.singularLabel }} records.
+  </div>
+@else
+<div
+  class="shamar-m2m-table relative w-full"
+  data-shamar-m2m-config="{{ jsonAttr(relationConfig) }}"
+  x-data="shamarM2mTableFromEl($el)"
+  @click.outside="closeAdd()"
+  @keydown.escape.prevent.stop="closeAdd()"
+>
+  @if(relationConfig.kind !== 'hasMany')
+    <template x-for="item in selected" :key="'h-' + item.id">
+      <input type="hidden" name="{{ relationConfig.name }}[]" :value="item.id" />
+    </template>
+  @endif
+
+  <div class="shamar-m2m-table__card rounded-md border border-default">
+    <div class="shamar-m2m-table__toolbar flex flex-wrap items-center justify-between gap-2 border-b border-default bg-surface-header px-3 py-2">
+      <p class="text-xs font-medium text-body-subtle">
+        <span x-text="selected.length"></span> linked
+        <span x-text="singularLabel.toLowerCase()"></span><span x-show="selected.length !== 1">s</span>
+      </p>
+      <div class="shamar-m2m-table__add relative" x-show="!readonly">
+        <button
+          type="button"
+          class="inline-flex items-center gap-1 rounded-md border border-default bg-neutral-primary px-2.5 py-1 text-xs font-medium text-body hover:border-fg-brand hover:text-fg-brand"
+          @click="toggleAdd()"
+        >
+          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+          </svg>
+          Add
+        </button>
+        <div
+          x-show="addOpen"
+          x-cloak
+          x-transition.opacity.duration.100ms
+          class="shamar-m2m-table__add-dropdown absolute right-0 z-50 mt-1 w-72 rounded-md border border-default bg-neutral-primary text-sm shadow-lg"
+        >
+          <div class="border-b border-default p-2">
+            <input
+              type="text"
+              x-ref="addInput"
+              x-model="query"
+              @input.debounce.250ms="fetchResults()"
+              @keydown.arrow-down.prevent="moveCursor(1)"
+              @keydown.arrow-up.prevent="moveCursor(-1)"
+              @keydown.enter.prevent="onEnter()"
+              placeholder="Search to add…"
+              autocomplete="off"
+              class="shamar-input w-full text-sm"
+            />
+          </div>
+          <div class="max-h-56 overflow-auto">
+            <template x-if="loading">
+              <div class="px-3 py-2 text-xs text-body-subtle">Searching…</div>
+            </template>
+            <template x-if="!loading && availableResults.length === 0 && !createCandidate">
+              <div class="px-3 py-2 text-xs text-body-subtle">No matches.</div>
+            </template>
+            <ul x-show="!loading && (availableResults.length > 0 || createCandidate || canCreateAndEdit)">
+              <template x-for="(item, i) in availableResults" :key="item.id">
+                <li
+                  class="cursor-pointer truncate px-3 py-1.5"
+                  :class="i === cursor ? 'bg-brand-softer text-fg-brand' : 'text-body hover:bg-neutral-secondary'"
+                  @mousedown.prevent="pick(item)"
+                  @mousemove="cursor = i"
+                  x-text="item.label"
+                ></li>
+              </template>
+              <template x-if="createCandidate">
+                <li
+                  class="flex cursor-pointer items-center gap-1.5 border-t border-default px-3 py-1.5 text-fg-success hover:bg-neutral-secondary"
+                  @click="createFromQuery()"
+                >
+                  <span>Create "<span x-text="query"></span>"</span>
+                </li>
+              </template>
+              <template x-if="canCreateAndEdit">
+                <li
+                  class="flex cursor-pointer items-center gap-1.5 border-t border-default px-3 py-1.5 text-body hover:bg-neutral-secondary"
+                  @click="createAndEdit()"
+                >
+                  Create and edit…
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="border-b border-default text-left text-xs uppercase tracking-wider text-body-subtle">
+          <th class="px-3 py-2 font-semibold">Record</th>
+          <th class="px-3 py-2 text-right font-semibold" x-show="!readonly">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template x-if="selected.length === 0">
+          <tr>
+            <td colspan="2" class="px-3 py-8 text-center text-xs text-body-subtle">No linked records yet.</td>
+          </tr>
+        </template>
+        <template x-for="item in selected" :key="item.id">
+          <tr class="border-b border-default last:border-0 hover:bg-surface-row-hover">
+            <td class="px-3 py-2">
+              <button
+                type="button"
+                class="text-left text-heading hover:text-fg-brand hover:underline"
+                @click="openRecord(item)"
+                x-text="item.label"
+              ></button>
+            </td>
+            <td class="px-3 py-2 text-right" x-show="!readonly">
+              <div class="inline-flex items-center gap-1 text-xs">
+                <button
+                  type="button"
+                  class="rounded-md px-2 py-1 text-body hover:bg-surface-hover"
+                  @click="openRecord(item)"
+                >Open</button>
+                <button
+                  type="button"
+                  class="rounded-md px-2 py-1 text-fg-danger hover:bg-danger-soft"
+                  @click="remove(item.id)"
+                >Unlink</button>
+              </div>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</div>
+@endif

package/resources/views/shamar/partials/form-container.edge

@@ -0,0 +1,82 @@
+{{--
+  Renders one form container: Section card, Fieldset legend, or plain grid.
+  Expects: section, mode
+--}}
+@if((section.kind ?? 'section') === 'plain')
+  <div class="shamar-form-plain">
+    <div class="shamar-form-grid" style="--shamar-form-cols: {{ section.columns ?? 2 }}">
+      @each(field in section.fields)
+        @if(!field.hiddenOnForm && !(field.createOnly && mode === 'edit'))
+          <div
+            class="shamar-field-cell"
+            style="{{ resolveGridItemStyle(field, section.columns ?? 2) }}"
+            x-show="isVisible('{{ field.name }}')"
+          >
+            @include('shamar::partials/field-input')
+          </div>
+        @endif
+      @endeach
+    </div>
+  </div>
+@elseif((section.kind ?? 'section') === 'fieldset')
+  <fieldset class="shamar-form-fieldset{{ section.card ? ' shamar-form-fieldset--card' : '' }}">
+    @if(section.title)
+      <legend class="shamar-form-fieldset__legend">{{ section.title }}</legend>
+    @endif
+    @if(section.description)
+      <p class="shamar-form-fieldset__description">{{ section.description }}</p>
+    @endif
+    <div class="shamar-form-grid" style="--shamar-form-cols: {{ section.columns ?? 2 }}">
+      @each(field in section.fields)
+        @if(!field.hiddenOnForm && !(field.createOnly && mode === 'edit'))
+          <div
+            class="shamar-field-cell"
+            style="{{ resolveGridItemStyle(field, section.columns ?? 2) }}"
+            x-show="isVisible('{{ field.name }}')"
+          >
+            @include('shamar::partials/field-input')
+          </div>
+        @endif
+      @endeach
+    </div>
+  </fieldset>
+@else
+  <section class="shamar-form-section rounded-xl overflow-hidden{{ section.card !== false ? ' shamar-card' : ' shamar-form-section--plain' }}">
+    @if(section.title || section.icon || section.description)
+      <header class="shamar-form-section__header{{ section.description ? '' : ' shamar-form-section__header--centered' }}">
+        @if(section.icon)
+          <span class="shamar-form-section__icon" aria-hidden="true" data-icon="{{ section.icon }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            </svg>
+          </span>
+        @endif
+        @if(section.title || section.description)
+          <div class="shamar-form-section__titles min-w-0">
+            @if(section.title)
+              <h3 class="shamar-form-section__title">{{ section.title }}</h3>
+            @endif
+            @if(section.description)
+              <p class="shamar-form-section__description">{{ section.description }}</p>
+            @endif
+          </div>
+        @endif
+      </header>
+    @endif
+    <div class="shamar-form-section__body">
+      <div class="shamar-form-grid" style="--shamar-form-cols: {{ section.columns ?? 2 }}">
+        @each(field in section.fields)
+          @if(!field.hiddenOnForm && !(field.createOnly && mode === 'edit'))
+            <div
+              class="shamar-field-cell"
+              style="{{ resolveGridItemStyle(field, section.columns ?? 2) }}"
+              x-show="isVisible('{{ field.name }}')"
+            >
+              @include('shamar::partials/field-input')
+            </div>
+          @endif
+        @endeach
+      </div>
+    </div>
+  </section>
+@endif

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

@@ -0,0 +1,14 @@
+<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
+  @if((root && root.icon === 'home') || (item && (item.icon ?? 'squares-2x2') === 'home'))
+    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
+  @elseif((root && root.icon === 'cog') || (item && (item.icon ?? 'squares-2x2') === 'cog'))
+    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z"/>
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+  @elseif((root && root.icon === 'building') || (item && (item.icon ?? 'squares-2x2') === 'building'))
+    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/>
+  @elseif((root && root.icon === 'users') || (item && (item.icon ?? 'squares-2x2') === 'users'))
+    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766C4.09 17.49 6 15.5 6 13.5V11.25m9 7.878V11.25M12 7.875a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0z"/>
+  @else
+    <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"/>
+  @endif
+</svg>

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

@@ -0,0 +1,73 @@
+<tr class="hover:bg-surface-row-hover transition-colors" data-shamar-record-id="{{ record.id }}">
+  <td class="px-3 py-3">
+    @if(bulkActions && bulkActions.length)
+      <input
+        type="checkbox"
+        class="rounded border-default"
+        :checked="selected.includes({{ jsonAttr(String(record.id)) }})"
+        @change="toggleId({{ jsonAttr(String(record.id)) }})"
+        aria-label="Select record"
+      />
+    @endif
+  </td>
+  @each(column in resource.columns)
+    <td class="px-4 py-3 text-body {{ resolveAlignmentClass(column) }}">
+      @if(column.type === 'boolean' || column.format === 'boolean' || column.format === 'toggle')
+        @!component('shamar::partials/boolean-value', {
+          checked: !!record[column.name],
+          label: cellValue(record, column),
+        })
+      @elseif(column.format === 'badge' || column.type === 'tags')
+        @let(badges = badgeValues(record, column))
+        @if(badges.length)
+          <div class="shamar-badges">
+            @each(badge in badges)
+              <span class="shamar-badge">{{ badge }}</span>
+            @endeach
+          </div>
+        @else
+          —
+        @endif
+      @else
+        <a href="{{ basePath }}/{{ resource.slug }}/{{ record.id }}{{ recordNavQuery(query) }}" class="text-heading hover:text-fg-brand hover:underline">{{ cellValue(record, column) }}</a>
+      @endif
+    </td>
+  @endeach
+  <td class="px-4 py-3 text-right">
+    <div class="inline-flex flex-wrap items-center justify-end gap-1 text-xs">
+      @if(rowActions)
+        @each(action in rowActions)
+          @if(action.name === 'view')
+            <a href="{{ basePath }}/{{ resource.slug }}/{{ record.id }}{{ recordNavQuery(query) }}" class="px-2 py-1 rounded-md text-body hover:bg-surface-hover">{{ action.label }}</a>
+          @elseif(action.name === 'edit' && showEditButton)
+            <a href="{{ basePath }}/{{ resource.slug }}/{{ record.id }}/edit{{ recordNavQuery(query) }}" class="px-2 py-1 rounded-md text-body hover:bg-surface-hover">{{ action.label }}</a>
+          @elseif(action.name === 'delete' && showDeleteButton)
+            <button
+              type="button"
+              class="px-2 py-1 rounded-md text-fg-danger hover:bg-danger-soft"
+              @click="$dispatch('shamar-open-confirm', { variant: 'danger', mode: 'confirm', title: {{ jsonAttr(action.label) }}, message: {{ jsonAttr(action.confirm || 'Are you sure?') }}, confirmLabel: 'Delete', action: '{{ basePath }}/{{ resource.slug }}/{{ record.id }}/delete' })"
+            >{{ action.label }}</button>
+          @elseif(action.name === 'revoke' && !record.revokedAt)
+            <button
+              type="button"
+              class="px-2 py-1 rounded-md text-fg-danger hover:bg-danger-soft"
+              @click="$dispatch('shamar-open-confirm', { variant: 'danger', 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>
+          @elseif(action.name === 'reactivate' && record.revokedAt)
+            <button
+              type="button"
+              class="px-2 py-1 rounded-md text-body hover:bg-surface-hover"
+              @click="$dispatch('shamar-open-confirm', { variant: '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>
+          @elseif(action.name !== 'view' && action.name !== 'edit' && action.name !== 'delete' && action.name !== 'revoke' && action.name !== 'reactivate')
+            <button
+              type="button"
+              class="px-2 py-1 rounded-md text-body hover:bg-surface-hover {{ action.color === 'danger' ? 'text-fg-danger hover:bg-danger-soft' : '' }}"
+              @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
+    </div>
+  </td>
+</tr>