polyadmin 0.1.0b1__py3-none-any.whl

polyadmin/templates/admin/components/ui/field.html

@@ -0,0 +1,110 @@
+{% from "admin/components/ui/combobox.html" import combobox %}
+{% from "admin/components/ui/switch.html" import switch_control %}
+{# Form/FormItem, ported from shadcn/ui: every branch below renders the
+   same label + control + description + error unit, with the wrapper
+   classes from ui('field', ...) so a custom field lines up with the
+   generated ones for free.
+
+   Controls that must survive a JS-free POST stay native elements styled
+   to match shadcn -- checkbox and <input type="date"> -- rather than
+   shadcn's Radix-backed versions. The Alpine-driven ports are the
+   relation combobox and the calendar popover.
+
+   `with context` so the combobox branch can read `base_path` for its
+   /lookup URL without every call site passing it through. #}
+{% from "admin/components/icons.html" import icon %}
+{% from "admin/components/ui/calendar.html" import date_picker %}
+{% from "admin/components/ui/select.html" import select %}
+{% from "admin/components/ui/multi-select.html" import multi_select %}
+{# `key` keeps a control's element ids unique when the same field renders
+   more than once on a page, as it does in every row of an inline. #}
+{% macro render_form_input(field, value, errors, relation=none, readonly_field=false, key="") %}
+{% set input_types = {
+  "integer": "number",
+  "decimal": "number",
+  "email": "email",
+  "url": "url",
+  "datetime": "datetime-local",
+  "password": "password",
+} %}
+{# A boolean renders as a switch on the same row as its name: a toggle
+   reads as a setting, and a setting's name belongs beside it. Every
+   other type keeps the label-above-control layout. #}
+{% set inline = field.field_type == "boolean" and not readonly_field %}
+<div class="{{ ui('field') }}{% if inline %} {{ ui('field', 'row') }}{% endif %}">
+  {# Inline: the control comes first in source order, so the switch sits
+     to the left of the name it belongs to. #}
+  {% if inline %}
+  <div class="shrink-0">{{ switch_control(field.name, "field-" ~ field.name, value, field.disabled) }}</div>
+  {% endif %}
+  <span class="{% if inline %}{{ ui('field', 'row-text') }}{% else %}contents{% endif %}">
+  <label for="field-{{ field.name }}" class="{{ ui('field', 'label') }}{% if inline %} {{ ui('field', 'row-label') }}{% endif %}">
+    {{ _(field.label) }}{% if field.required %}<span class="{{ ui('field', 'required') }}" aria-hidden="true">*</span>{% endif %}
+  </label>
+  {% if inline %}
+  {% if field.help_text %}<p class="{{ ui('field', 'description') }}">{{ _(field.help_text) }}</p>{% endif %}
+  {% for error in errors or [] %}<p class="{{ ui('field', 'message') }}">{{ error }}</p>{% endfor %}
+  {% endif %}
+  </span>
+  {% if not inline %}
+  <div class="{{ ui('field', 'control') }}">
+  {# Read-only wins over every type branch below: no control, and
+     nothing posted. The handler refuses the name too -- omitting the
+     input here is presentation, not protection. #}
+  {% if readonly_field %}
+  {% set shown = value|form_value(field.field_type) %}
+  <p class="{{ ui('field', 'readonly') }}">{{ shown if shown else "&mdash;" | safe }}</p>
+  {% elif field.field_type == "text" %}
+  <textarea id="field-{{ field.name }}" name="{{ field.name }}" placeholder="{{ _(field.placeholder) }}" autocomplete="off"
+            {% if field.required %}required{% endif %}
+            {% if field.readonly %}readonly{% endif %}
+            {% if field.disabled %}disabled{% endif %}
+            class="{{ ui('textarea') }}">{{ value or "" }}</textarea>
+
+  {% elif field.field_type == "date" %}
+  {# DatePicker: a native date input (which already posts YYYY-MM-DD
+     with no JS and gets the platform picker on mobile) plus the shadcn
+     Calendar port in a popover beside it. See components/ui/calendar.html. #}
+  {{ date_picker(field.name, value|form_value(field.field_type), field.required, field.disabled) }}
+  {% elif field.field_type == "enum" %}
+  {% set enum_options = namespace(pairs=[]) %}
+  {% for choice in field.choices %}{% set enum_options.pairs = enum_options.pairs + [(choice, choice)] %}{% endfor %}
+  {{ select(field.name, enum_options.pairs, selected=value, placeholder=_("Select…"), disabled=field.disabled) }}
+  {% elif field.field_type in ("foreignkey", "onetoone") and relation and relation.autocomplete %}
+  {{ combobox(name=field.name,
+              id="combobox-results-" ~ (key ~ "-" if key else "") ~ field.name,
+              selected_pk=relation.selected_pk,
+              selected_label=relation.selected_label,
+              lookup_url=base_path ~ "/" ~ relation.lookup_target ~ "/lookup",
+              placeholder=_('Search…'),
+              disabled=field.disabled) }}
+
+  {% elif field.field_type in ("foreignkey", "onetoone") %}
+  {{ select(field.name, relation.options if relation else [],
+            selected=(relation.selected_pk if relation else none), placeholder="—", disabled=field.disabled) }}
+  {% elif field.field_type == "manytomany" %}
+  {% set m2m_options = namespace(pairs=[]) %}
+  {% for pk, label in (relation.options if relation else []) %}
+  {% set m2m_options.pairs = m2m_options.pairs + [(pk, label, relation and pk in relation.selected_pks)] %}
+  {% endfor %}
+  {{ multi_select(field.name, m2m_options.pairs, placeholder=_("Select…"), disabled=field.disabled) }}
+  {% else %}
+  <input type="{{ input_types.get(field.field_type, 'text') }}" id="field-{{ field.name }}" name="{{ field.name }}"
+         value="{{ value|form_value(field.field_type) }}" placeholder="{{ _(field.placeholder) }}" autocomplete="off"
+         {% if field.required %}required{% endif %}
+         {% if field.readonly %}readonly{% endif %}
+         {% if field.disabled %}disabled{% endif %}
+         class="{{ ui('input') }}">
+  {% endif %}
+  </div>
+  {% endif %}
+  {% if not inline %}
+  {% if field.help_text %}
+  <p class="{{ ui('field', 'description') }}">{{ _(field.help_text) }}</p>
+  {% endif %}
+  {% for error in errors or [] %}
+  <p class="{{ ui('field', 'message') }}">{{ error }}</p>
+  {% endfor %}
+  {% endif %}
+</div>
+{% endmacro %}

polyadmin/templates/admin/components/ui/filter-panel.html

@@ -0,0 +1,155 @@
+{% from "admin/components/ui/combobox.html" import combobox %}
+{% from "admin/components/icons.html" import icon %}
+{# Filter drawer: one "Filters" trigger in the toolbar plus a sheet
+   that slides in from the right listing every declared filter. One
+   trigger stays one trigger however many filters a ModelAdmin
+   declares, and vertical space in a drawer is free in a way horizontal
+   space in a toolbar is not.
+
+   Each choice is a link, not a form control, so filtering works with JS
+   off and the URLs are the real navigation. The precomputed URLs keep
+   query-string assembly out of the template.
+
+   Reset lives in the footer rather than the toolbar: it clears search
+   *and* every filter, so it belongs with the things it clears.
+
+   The open flag is mirrored onto a window global so it survives htmx's
+   outerHTML swap of #resource-list -- applying a filter re-renders this
+   component, and the drawer would otherwise slam shut on every click.
+   It is read back at init, so a fresh page load still starts closed.
+
+   Included, not a macro, so it shares list_content.html's ambient
+   context (filter_controls, active_filter_count, has_active_filters,
+   reset_url). #}
+{% if filter_controls %}
+<div x-data="{ open: window.polyadminFiltersOpen === true }"
+     x-effect="window.polyadminFiltersOpen = open"
+     @keydown.escape.window="open = false"
+     class="{{ ui('toolbar', 'item') }}">
+  <button type="button" @click="open = !open"
+          :aria-expanded="open ? 'true' : 'false'" aria-haspopup="dialog"
+          class="{{ ui('button', 'outline', 'size-sm') }} {{ ui('toolbar', 'item') }}">
+    {{ icon("filter", "size-4 shrink-0 " ~ ui('toolbar', 'item-icon')) }}
+    <span class="{{ ui('toolbar', 'item-label') }}">{{ _("Filters") }}</span>
+    {% if active_filter_count %}
+    <span class="{{ ui('separator', 'vertical') }} mx-1 !h-4"></span>
+    <span class="{{ ui('badge', 'secondary') }} {{ ui('filter-panel', 'count') }}">{{ active_filter_count }}</span>
+    {% endif %}
+  </button>
+
+  <div x-show="open" x-cloak @click="open = false"
+       x-transition:enter="transition ease-out duration-200"
+       x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+       x-transition:leave="transition ease-in duration-150"
+       x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
+       class="{{ ui('sheet', 'overlay') }}"></div>
+
+  {# x-trap is what makes aria-modal="true" true: without it the drawer
+     claims to be modal while Tab walks straight out into the page
+     behind the overlay. It also moves focus into the panel on open and
+     back to the trigger on close. #}
+  <div x-show="open" x-cloak x-trap="open" role="dialog" aria-modal="true" aria-label="{{ _('Filters') }}"
+       x-transition:enter="transition ease-in-out duration-300"
+       x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
+       x-transition:leave="transition ease-in-out duration-300"
+       x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
+       class="{{ ui('sheet', 'content') }} {{ ui('sheet', 'side-right') }} {{ ui('sheet', 'panel') }}
+              {{ ui('sheet', 'width-panel') }} flex flex-col">
+    <div class="{{ ui('filter-panel', 'header') }}">
+      <h2 class="{{ ui('filter-panel', 'title') }}">{{ _("Filters") }}</h2>
+      <button type="button" @click="open = false" aria-label="{{ _('Close filters') }}"
+              class="{{ ui('button', 'ghost-muted', 'size-icon-sm') }}">
+        {{ icon("close", "size-4") }}
+      </button>
+    </div>
+
+    <div class="{{ ui('filter-panel', 'body') }}">
+      {% for control in filter_controls %}
+      <div>
+        <h3 class="{{ ui('filter-panel', 'group-label') }}">{{ _(control.label) }}</h3>
+        <ul>
+          {% for choice in control.choices %}
+          <li>
+            <a href="{{ choice.url }}"
+               hx-get="{{ choice.url }}" hx-target="#resource-list" hx-select="#resource-list"
+               hx-swap="outerHTML" hx-push-url="true"
+               class="{{ ui('filter-panel', 'choice') }}
+                      {% if choice.selected %}{{ ui('filter-panel', 'choice-active') }}{% else %}{{ ui('filter-panel', 'choice-inactive') }}{% endif %}">
+              <span class="flex size-4 shrink-0 items-center justify-center">
+                {% if choice.selected %}{{ icon("check", "size-4") }}{% endif %}</span>
+              <span class="truncate">{{ _(choice.label) }}</span>
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+        {% if control.uses_combobox %}
+        {# The same control the form uses, in the same GET form the range
+           uses: the combobox writes the chosen pk into its own hidden
+           input, and Apply submits the form, so the panel needs no
+           bespoke navigation. #}
+        {# hx-disinherit: the combobox inside carries its own complete htmx
+           wiring for /lookup, and without this it would inherit this
+           form's hx-select="#resource-list" -- htmx would then select that
+           id out of the lookup's option list, find nothing, and swap
+           nothing, leaving the panel's combobox permanently empty. #}
+        <form method="get" action="{{ control.form_action }}" class="{{ ui('filter-panel', 'form') }}"
+              hx-get="{{ control.form_action }}" hx-target="#resource-list" hx-select="#resource-list"
+              hx-swap="outerHTML" hx-push-url="true" hx-disinherit="*">
+          {% for field in control.hidden %}
+          <input type="hidden" name="{{ field.name }}" value="{{ field.value }}">
+          {% endfor %}
+          {{ combobox(name="filter[" ~ control.name ~ "]",
+                      id="filter-combobox-" ~ control.name,
+                      selected_pk=control.selected_pk,
+                      selected_label=control.selected_label,
+                      lookup_url=control.lookup_url,
+                      placeholder=_('Search…')) }}
+          <button type="submit" class="{{ ui('button', 'outline', 'size-xs') }} w-full">{{ _("Apply") }}</button>
+        </form>
+        {% endif %}
+        {% if control.kind == "daterange" %}
+        {# A GET form, not a JS-built URL: two date inputs cannot become
+           one parameter without either a form post or scripting, and the
+           form is the one that still works with scripting off. The route
+           folds _range_from/_range_to into the filter's own value
+           (fold_range_params). #}
+        <form method="get" action="{{ control.form_action }}" class="{{ ui('filter-panel', 'form') }}"
+              hx-get="{{ control.form_action }}" hx-target="#resource-list" hx-select="#resource-list"
+              hx-swap="outerHTML" hx-push-url="true">
+          {% for field in control.hidden %}
+          <input type="hidden" name="{{ field.name }}" value="{{ field.value }}">
+          {% endfor %}
+          <input type="hidden" name="{{ range_for_field }}" value="{{ control.name }}">
+          <p class="{{ ui('filter-panel', 'group-label') }}">{{ _("Custom range") }}</p>
+          <div class="{{ ui('filter-panel', 'form-row') }}">
+            <label for="range-from-{{ control.name }}" class="{{ ui('filter-panel', 'form-label') }}">{{ _("From") }}</label>
+            <input type="date" id="range-from-{{ control.name }}" name="{{ range_from_field }}"
+                   value="{{ control.range_from }}"
+                   class="{{ ui('input') }} {{ ui('filter-panel', 'form-input') }}">
+          </div>
+          <div class="{{ ui('filter-panel', 'form-row') }}">
+            <label for="range-to-{{ control.name }}" class="{{ ui('filter-panel', 'form-label') }}">{{ _("To") }}</label>
+            <input type="date" id="range-to-{{ control.name }}" name="{{ range_to_field }}"
+                   value="{{ control.range_to }}"
+                   class="{{ ui('input') }} {{ ui('filter-panel', 'form-input') }}">
+          </div>
+          <button type="submit" class="{{ ui('button', 'outline', 'size-xs') }} w-full">{{ _("Apply") }}</button>
+        </form>
+        {% endif %}
+      </div>
+      {% endfor %}
+    </div>
+
+    {% if has_active_filters %}
+    <div class="{{ ui('filter-panel', 'footer') }}">
+      <a href="{{ reset_url }}"
+         hx-get="{{ reset_url }}" hx-target="#resource-list" hx-select="#resource-list"
+         hx-swap="outerHTML" hx-push-url="true"
+         class="{{ ui('button', 'ghost-muted', 'size-sm') }} w-full">
+        {{ icon("close", "size-4") }} {{ _("Clear all") }}
+      </a>
+    </div>
+    {% endif %}
+  </div>
+</div>
+{% endif %}

polyadmin/templates/admin/components/ui/locale-switcher.html

@@ -0,0 +1,30 @@
+{# Language switcher. Trigger and panel follow ui/dropdown-menu, which
+   renders only links; each option here is a small form posting to the
+   switcher route, like the sidebar's sign-out.
+
+   Each language is named in itself and never translated, so someone who
+   lands on a page they cannot read can still find their own. The `lang`
+   attribute on each option says so to assistive tech. #}
+{% from "admin/components/csrf-field.html" import csrf_field %}
+{% from "admin/components/icons.html" import icon %}
+{% macro locale_switcher_menu(switcher, base_path, csrf_token) %}
+<div class="relative inline-flex" x-data="{ open: false }" @keydown.escape="open = false" @click.outside="open = false">
+  <button type="button" @click="open = !open" :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu"
+          class="{{ ui('button', 'ghost-muted', 'size-icon-sm') }}">
+    {{ icon("language", "w-4 h-4") }}<span class="sr-only">{{ _("Language") }}</span>
+  </button>
+  <div x-show="open" x-cloak x-transition role="menu" class="{{ ui('dropdown', 'content') }} absolute right-0 top-full mt-1">
+    {% for option in switcher.options %}
+    <form method="post" action="{{ base_path }}/locale">
+      {{ csrf_field(csrf_token) }}
+      <input type="hidden" name="locale" value="{{ option.code }}">
+      <button type="submit" role="menuitemradio" lang="{{ option.code }}"
+              aria-checked="{{ 'true' if option.code == switcher.current else 'false' }}"
+              class="{{ ui('dropdown', 'item') }}">
+        <span class="w-4">{% if option.code == switcher.current %}{{ icon("check", "w-4 h-4") }}{% endif %}</span>{{ option.name }}
+      </button>
+    </form>
+    {% endfor %}
+  </div>
+</div>
+{% endmacro %}

polyadmin/templates/admin/components/ui/multi-select.html

@@ -0,0 +1,253 @@
+{% from "admin/components/icons.html" import icon %}
+{# MultiSelect: a searchable Command-style list over a many-to-many
+   relation's options, with the current selection shown as removable
+   chips on the trigger.
+
+   Same job as Django admin's filter_horizontal permissions widget -- a
+   long option list is unusable until you can type at it -- built from
+   shadcn's Combobox/Command idiom rather than Django's two-pane layout,
+   which needs more width than a form column has.
+
+   Filtering is client-side, unlike the relation combobox: a
+   many-to-many's options are already in the page in full, so a
+   round-trip per keystroke would be pure latency.
+
+   It posts one hidden input per selection under the field's own name,
+   exactly what a <select multiple> posts, so the handler cannot tell
+   the difference. An empty selection posts nothing, again matching the
+   native control.
+
+   Values and labels ride in on data-value/data-label and are read back
+   via $el.dataset, never interpolated into an Alpine expression.
+
+   Args:
+     name         form field name
+     options      [(value, label, selected), ...]
+     placeholder  shown when nothing is chosen
+     disabled     bool #}
+{% macro multi_select(name, options, placeholder=_("Select…"), disabled=false, compact=false) %}
+{# Focus stays in the search box -- typing is the point of this control
+   -- and the arrow keys move a highlight the input reports through
+   aria-activedescendant. Moving real focus into the list would mean you
+   could not keep typing. #}
+{# hydrate on the next tick: the options live in a teleported template
+   (see the popover below), which Alpine mounts after x-init runs, so
+   reading $refs.options now would find nothing and the control would
+   open with no selection. #}
+<div class="{{ ui('combobox') }}" x-data="adminMultiSelect()" x-init="$nextTick(() => hydrate())"
+     x-id="['ms-option', 'ms-listbox']"
+     @keydown.escape="closeToTrigger()" @click.outside="close()">
+  {# Real inputs rather than one comma-joined value: the server already
+     speaks "repeated field name", and joining would mean inventing a
+     separator some primary key eventually contains. #}
+  <template x-for="item in selected" :key="item.value">
+    <input type="hidden" name="{{ name }}" :value="item.value">
+  </template>
+
+  <button type="button" x-ref="trigger" @click="toggleOpen()"
+          :aria-expanded="open ? 'true' : 'false'" aria-haspopup="listbox"
+          :aria-controls="$id('ms-listbox')"
+          @keydown.down.prevent="openList()" @keydown.enter.prevent="openList()"
+          {% if disabled %}disabled{% endif %}
+          class="{{ ui('select', 'cell-multi') if compact else ui('select') ~ ' ' ~ ui('select', 'size-auto') }} {{ ui('multi-select', 'trigger') }}">
+    <span class="{{ ui('multi-select', 'values') }}">
+      <template x-for="item in selected" :key="item.value">
+        <span class="{{ ui('badge', 'secondary') }} {{ ui('multi-select', 'chip') }}">
+          <span x-text="item.label"></span>
+          {# Formatted on the server, so a translation's own word order
+             places the {label} marker; Alpine only swaps it for the chip's
+             label, read off the element like every other. #}
+          <span role="button" tabindex="0" data-remove-label="{{ _('Remove %(label)s', label='{label}') }}"
+                :aria-label="$el.dataset.removeLabel.replace('{label}', () => item.label)"
+                @click.stop="remove(item.value)" @keydown.enter.stop.prevent="remove(item.value)"
+                @keydown.space.stop.prevent="remove(item.value)"
+                class="{{ ui('multi-select', 'chip-remove') }}">
+            {{ icon("close", "size-3") }}
+          </span>
+        </span>
+      </template>
+      <span x-show="!selected.length" class="{{ ui('text', 'placeholder') }}">{{ placeholder }}</span>
+    </span>
+    {{ icon("chevron-down", "size-4 shrink-0 text-muted-foreground") }}
+  </button>
+
+  {# Portalled to <body>, as Radix does -- see the relation combobox in
+     ui/field.html for why. #}
+  <template x-teleport="body">
+  <div x-show="open" x-cloak
+       x-anchor.bottom-start.offset.4="$refs.trigger"
+       {# A cell trigger is too narrow to size the popover by, so there it
+          only sets a floor and the options decide the width. On a form the
+          popover matches the field. #}
+       x-effect="if (open && $refs.trigger) {
+                   {% if compact %}$el.style.width = 'auto'; $el.style.minWidth = $refs.trigger.offsetWidth + 'px';
+                   {% else %}$el.style.width = $refs.trigger.offsetWidth + 'px';{% endif %}
+                 }"
+       x-transition:enter="transition ease-out duration-150"
+       x-transition:enter-start="opacity-0 scale-95"
+       x-transition:enter-end="opacity-100 scale-100"
+       class="{{ ui('combobox', 'content') }}">
+    <div class="{{ ui('multi-select', 'search') }}">
+      {{ icon("search", ui('combobox', 'icon')) }}
+      {# role=combobox on the input, not the wrapper: the input is what
+         holds focus, so it is what has to advertise the popup and name
+         the highlighted option. #}
+      <input type="text" x-ref="search" x-model="query" autocomplete="off" placeholder="{{ _('Search…') }}"
+             role="combobox" aria-autocomplete="list" :aria-expanded="open ? 'true' : 'false'"
+             :aria-controls="$id('ms-listbox')" :aria-activedescendant="activeId || null"
+             @keydown.escape.stop="closeToTrigger()"
+             @keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)"
+             @keydown.home.prevent="setActive(availableEls()[0])"
+             @keydown.end.prevent="setActive(availableEls().slice(-1)[0])"
+             @keydown.enter.prevent="chooseActive()"
+             class="{{ ui('input', 'bare') }}">
+    </div>
+    {# The list holds what you can still add: picking an option moves it
+       into a chip on the trigger. So nothing here is ever in a selected
+       state -- hence no check indicator and no aria-selected. The chips
+       are the record of what is chosen. #}
+    <div x-ref="options" role="listbox" :id="$id('ms-listbox')" class="{{ ui('multi-select', 'list') }}">
+      {% for value, label, selected in options %}
+      <div role="option" tabindex="-1" :id="$id('ms-option', {{ loop.index0 }})"
+           data-value="{{ value }}" data-label="{{ label }}" {% if selected %}data-selected="true"{% endif %}
+           @click="pick($el)"
+           x-show="available($el)"
+           class="{{ ui('combobox', 'item') }}">
+        <span class="truncate">{{ label }}</span>
+      </div>
+      {% endfor %}
+      {# Two different emptinesses, and saying "No matches" for the
+         second one would be a lie. #}
+      <div x-show="!availableCount()" x-cloak class="{{ ui('combobox', 'empty') }}"
+           x-text='query.trim() ? {{ _("No matches.")|tojson }} : {{ _("Everything is selected.")|tojson }}'></div>
+    </div>
+  </div>
+  </template>
+</div>
+{% endmacro %}
+
+{% macro multi_select_script() %}
+<script>
+  // Idempotent global, same pattern as window.adminCalendar
+  // (ui/calendar.html) -- a form may have several many-to-many fields,
+  // but only the first copy defines the factory.
+  window.adminMultiSelect = window.adminMultiSelect || function () {
+    // Single space-free class, toggled with classList rather than an
+    // x-bind: the options are server-rendered, not in an x-for.
+    var ACTIVE = "{{ ui('combobox', 'item-active') }}";
+    return {
+      open: false,
+      query: "",
+      // The highlighted (not chosen) option, named by the search
+      // input's aria-activedescendant while focus stays in the input.
+      activeEl: null,
+      activeId: "",
+      // [{value, label}], seeded from whichever options the server
+      // marked data-selected. The DOM is the source of truth at load for
+      // the same reason the relation combobox reads its initial value
+      // off the rendered input: no server state has to survive a trip
+      // through a JS literal.
+      selected: [],
+
+      hydrate() {
+        this.selected = Array.from(
+          this.$refs.options.querySelectorAll("[data-selected]")
+        ).map(function (el) {
+          return { value: el.dataset.value, label: el.dataset.label };
+        });
+      },
+
+      has(value) {
+        return this.selected.some(function (item) { return item.value === value; });
+      },
+
+      toggle(el) {
+        if (this.has(el.dataset.value)) {
+          this.remove(el.dataset.value);
+        } else {
+          this.selected.push({ value: el.dataset.value, label: el.dataset.label });
+        }
+      },
+
+      remove(value) {
+        this.selected = this.selected.filter(function (item) { return item.value !== value; });
+      },
+
+      // Substring match on the label, the same rule the server-side
+      // /lookup route applies for the autocomplete combobox.
+      matches(el) {
+        var q = this.query.trim().toLowerCase();
+        return q === "" || (el.dataset.label || "").toLowerCase().indexOf(q) !== -1;
+      },
+
+      // Still addable: matches the search *and* isn't already chosen.
+      available(el) {
+        return this.matches(el) && !this.has(el.dataset.value);
+      },
+
+      // The options you could still pick, in document order -- what the
+      // arrow keys walk. Recomputed per call rather than cached: the
+      // search query and the selection both change what is available,
+      // and both change while the list is open.
+      availableEls() {
+        var self = this;
+        return Array.from(this.$refs.options.children).filter(function (el) {
+          return el.dataset.value !== undefined && self.available(el);
+        });
+      },
+
+      availableCount() { return this.availableEls().length; },
+
+      setActive(el) {
+        Array.from(this.$refs.options.children).forEach(function (o) {
+          o.classList.remove(ACTIVE);
+        });
+        this.activeEl = el || null;
+        this.activeId = el ? el.id : "";
+        if (el) {
+          el.classList.add(ACTIVE);
+          el.scrollIntoView({ block: "nearest" });
+        }
+      },
+
+      clearActive() { this.setActive(null); },
+
+      move(delta) {
+        if (!this.open) { this.open = true; }
+        var opts = this.availableEls();
+        if (!opts.length) { this.clearActive(); return; }
+        var i = opts.indexOf(this.activeEl);
+        i = i < 0 ? (delta > 0 ? 0 : opts.length - 1) : (i + delta + opts.length) % opts.length;
+        this.setActive(opts[i]);
+      },
+
+      // Picking removes the option from the available list, so the
+      // highlight has to move rather than sit on a now-hidden row.
+      pick(el) {
+        var opts = this.availableEls();
+        var next = opts[opts.indexOf(el) + 1] || opts[opts.indexOf(el) - 1] || null;
+        this.toggle(el);
+        this.setActive(next);
+      },
+
+      chooseActive() { if (this.activeEl) this.pick(this.activeEl); },
+
+      openList() {
+        var self = this;
+        this.open = true;
+        this.$nextTick(function () {
+          if (self.$refs.search) self.$refs.search.focus();
+          self.setActive(self.availableEls()[0]);
+        });
+      },
+
+      close() { this.open = false; this.clearActive(); },
+
+      closeToTrigger() { var wasOpen = this.open; this.close(); if (wasOpen) this.$refs.trigger.focus(); },
+
+      // Distinct from toggle(el), which adds or removes one option.
+      toggleOpen() { if (this.open) { this.close(); } else { this.openList(); } },
+    };
+  };
+</script>
+{% endmacro %}

polyadmin/templates/admin/components/ui/pagination.html

@@ -0,0 +1,81 @@
+{# DataTablePagination, from shadcn's Tasks example: selection count
+   left, then rows-per-page, the page indicator and the four jump
+   buttons right.
+
+   It always renders, even for a single page: the row count and the
+   rows-per-page control are useful with nothing to page through, and a
+   footer that vanishes makes the table appear to jump as you filter.
+
+   Every URL is precomputed, so this template assembles no query
+   strings, and each is a real href as well as an hx-get, so paging
+   works with JS off.
+
+   Included, not a macro, so it shares list_content.html's context. #}
+{% from "admin/components/icons.html" import icon %}
+{% set swap = 'hx-target="#resource-list" hx-select="#resource-list" hx-swap="outerHTML" hx-push-url="true"' %}
+<nav class="{{ ui('pagination') }}">
+  {# The example shows "N of M row(s) selected". Selection is client
+     side, so the count is filled in by Alpine from the row checkboxes;
+     with no actions declared there are no checkboxes and it degrades to
+     a plain total.
+
+     The sentence is translated whole, its plural chosen by M, with {n}
+     left for Alpine to fill in. ngettext yields text rather than a JS
+     literal, so the sentence rides in on data-selected-text for x-text
+     to read, and the server renders the n = 0 sentence so the text is
+     right before Alpine runs. #}
+  <p class="{{ ui('pagination', 'selection') }}"
+     {% if actions %}
+     x-data="{ n: 0 }"
+     x-init="$el.closest('#resource-list').addEventListener('change', () => {
+               n = $el.closest('#resource-list').querySelectorAll('.row-checkbox:checked').length })"
+     data-selected-text="{{ ngettext('%(n)s of %(num)d row selected', '%(n)s of %(num)d rows selected', page.total_count, n='{n}') }}"
+     x-text="$el.dataset.selectedText.replace('{n}', () => n)"
+     {% endif %}>
+    {% if actions %}{{ ngettext("%(n)s of %(num)d row selected", "%(n)s of %(num)d rows selected", page.total_count, n=0) }}{% else %}{{ ngettext("%(num)d row", "%(num)d rows", page.total_count) }}{% endif %}
+  </p>
+
+  <div class="{{ ui('pagination', 'controls') }}">
+    <div class="{{ ui('pagination', 'rows-per-page') }}">
+      <span class="hidden sm:inline">{{ _("Rows per page") }}</span>
+      <div class="relative" x-data="{ open: false }" @keydown.escape="open = false" @click.outside="open = false">
+        <button type="button" x-ref="sizeTrigger" @click="open = !open"
+                :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu"
+                class="{{ ui('button', 'outline', 'size-xs') }} h-8 w-[70px] justify-between">
+          {{ page.page_size }}{{ icon("chevrons-up-down", "size-3.5 shrink-0 opacity-50") }}
+        </button>
+        <div x-show="open" x-cloak role="menu"
+             x-anchor.top-start.offset.6="$refs.sizeTrigger"
+             class="{{ ui('dropdown', 'content') }} min-w-[70px]">
+          {% for option in page_size_options %}
+          <a href="{{ option.url }}" role="menuitem" {{ swap | safe }} @click="open = false"
+             class="{{ ui('dropdown', 'item') }} {{ 'font-medium text-foreground' if option.selected else '' }}">
+            {{ option.size }}
+          </a>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+    <div class="{{ ui('pagination', 'page-indicator') }}">
+      {{ _("Page %(page)d of %(pages)d", page=page.number, pages=page.num_pages or 1) }}
+    </div>
+
+    <div class="{{ ui('pagination', 'jumps') }}">
+      {% for jump in [
+        {"url": page_urls.first,    "enabled": page.has_previous, "icon": "chevron-double-left",  "label": _("First page"),    "edge": true},
+        {"url": page_urls.previous, "enabled": page.has_previous, "icon": "chevron-left",         "label": _("Previous page"), "edge": false},
+        {"url": page_urls.next,     "enabled": page.has_next,     "icon": "chevron-right",        "label": _("Next page"),     "edge": false},
+        {"url": page_urls.last,     "enabled": page.has_next,     "icon": "chevron-double-right", "label": _("Last page"),     "edge": true},
+      ] %}
+      <a title="{{ jump.label }}" aria-disabled="{{ 'false' if jump.enabled else 'true' }}"
+         {% if jump.enabled %}href="{{ jump.url }}" hx-get="{{ jump.url }}" {{ swap | safe }}{% else %}tabindex="-1"{% endif %}
+         class="{{ ui('button', 'outline', 'size-xs') }}
+                {{ ui('pagination', 'jump-edge') if jump.edge else ui('pagination', 'jump') }}
+                {{ '' if jump.enabled else ui('pagination', 'disabled') }}">
+        {{ icon(jump.icon, "size-4") }}<span class="sr-only">{{ jump.label }}</span>
+      </a>
+      {% endfor %}
+    </div>
+  </div>
+</nav>