polyadmin 0.1.0b1__py3-none-any.whl

polyadmin/templates/admin/components/toasts.html

@@ -0,0 +1,151 @@
+{# Toast notifications: Sonner, the toaster shadcn/ui ships.
+
+   Sonner's anatomy is kept -- a column of cards in the bottom-right
+   corner, each led by the icon for its level, with the title and
+   description stacked beside it and a close button parked half outside
+   the top-left corner that only appears on hover. So is the timer
+   pausing while the pointer rests on a toast, which is what makes a
+   four-second message readable.
+
+   What is not ported is Sonner's collapsed peek-stack: three toasts
+   visible, the ones behind scaled down and offset, expanding on hover.
+   That choreography is for an app raising toasts continuously; this
+   admin only ever shows the handful of flash messages a redirect
+   leaves, so they stack plainly.
+
+   Flash messages arrive as plain data rather than a JS call, and are
+   relayed into `toast()` through a hidden data-* element, so a message
+   containing quotes can never break out of an interpolated JS
+   string. #}
+{% from "admin/components/icons.html" import icon %}
+{% if messages %}
+<div id="flash-messages" class="hidden" aria-hidden="true">
+  {% for message in messages %}
+  <span data-level="{{ message.level }}" data-text="{{ message.text }}"></span>
+  {% endfor %}
+</div>
+{% endif %}
+
+<template x-teleport="body">
+  <ol x-data="adminToaster()" @toast-show.window="push($event.detail)"
+      tabindex="-1" aria-label="{{ _('Notifications') }}"
+      class="{{ ui('toast', 'list') }}" x-cloak>
+    <template x-for="toast in toasts" :key="toast.id">
+      {# role=status rather than alert: a flash message is a report of
+         something that already happened, so it should not interrupt a
+         screen reader mid-sentence. #}
+      <li role="status" aria-live="polite" aria-atomic="true" :data-type="toast.type"
+          @mouseenter="pause(toast)" @mouseleave="resume(toast)"
+          x-show="toast.visible"
+          {# Sonner's own curves: it rises from below the viewport edge
+             and leaves the same way, quickly. #}
+          x-transition:enter="transition duration-[400ms] ease-[cubic-bezier(0.21,1.02,0.73,1)]"
+          x-transition:enter-start="translate-y-full opacity-0"
+          x-transition:enter-end="translate-y-0 opacity-100"
+          x-transition:leave="transition duration-200 ease-[cubic-bezier(0.06,0.71,0.55,1)]"
+          x-transition:leave-start="translate-y-0 opacity-100"
+          x-transition:leave-end="translate-y-full opacity-0"
+          class="{{ ui('toast', 'root') }}">
+        {# A plain toast carries no icon, exactly as Sonner's does. #}
+        <span x-show="toast.type !== 'default'" class="{{ ui('toast', 'icon') }}"
+              :class="{ 'text-emerald-600 dark:text-emerald-400': toast.type === 'success',
+                        'text-amber-600 dark:text-amber-400': toast.type === 'warning',
+                        'text-destructive': toast.type === 'danger' }">
+          <span x-show="toast.type === 'success'">{{ icon("check-circle", "size-4") }}</span>
+          <span x-show="toast.type === 'warning'">{{ icon("alert-triangle", "size-4") }}</span>
+          <span x-show="toast.type === 'danger'">{{ icon("x-circle", "size-4") }}</span>
+        </span>
+        <div class="min-w-0 flex-1">
+          <p class="{{ ui('toast', 'title') }}" x-text="toast.message"></p>
+          <p x-show="toast.description" class="{{ ui('toast', 'description') }}" x-text="toast.description"></p>
+        </div>
+        <button type="button" @click="dismiss(toast)" aria-label="{{ _('Close') }}"
+                class="{{ ui('toast', 'close') }}">
+          {{ icon("close", "size-3") }}
+        </button>
+      </li>
+    </template>
+  </ol>
+</template>
+
+<script>
+  // The toaster's queue. Each toast owns its own timer so that hovering
+  // one holds only that one open.
+  window.adminToaster = window.adminToaster || function () {
+    return {
+      toasts: [],
+      // Sonner's defaults: four seconds on screen, and 200ms for the
+      // leave transition to play before the node is dropped.
+      duration: 4000,
+      leaveMs: 200,
+
+      push: function (detail) {
+        this.toasts.push({
+          id: "toast-" + Math.random().toString(16).slice(2),
+          message: detail.message,
+          description: detail.description || "",
+          type: detail.type || "default",
+          visible: false,
+          timer: null,
+          remaining: this.duration,
+          startedAt: 0,
+        });
+        // Alpine's reactivity only tracks writes made through the proxy,
+        // so everything past this point works on the array's element,
+        // never on the object literal above.
+        var toast = this.toasts[this.toasts.length - 1];
+        var self = this;
+        // x-show needs to render the element hidden once before it has
+        // an "off" state to animate away from; without the gap the toast
+        // simply appears.
+        setTimeout(function () { toast.visible = true; self.resume(toast); }, 10);
+      },
+
+      pause: function (toast) {
+        if (!toast.timer) return;
+        clearTimeout(toast.timer);
+        toast.timer = null;
+        toast.remaining -= Date.now() - toast.startedAt;
+      },
+
+      resume: function (toast) {
+        if (toast.timer || !toast.visible) return;
+        var self = this;
+        toast.startedAt = Date.now();
+        toast.timer = setTimeout(function () { self.dismiss(toast); }, toast.remaining);
+      },
+
+      dismiss: function (toast) {
+        this.pause(toast);
+        toast.visible = false;
+        var self = this;
+        setTimeout(function () {
+          var i = self.toasts.indexOf(toast);
+          if (i > -1) self.toasts.splice(i, 1);
+        }, this.leaveMs);
+      },
+    };
+  };
+
+  window.toast = window.toast || function (message, options) {
+    options = options || {};
+    window.dispatchEvent(new CustomEvent("toast-show", {
+      detail: { type: options.type || "default", message: message, description: options.description || "" },
+    }));
+  };
+  // Deferred to DOMContentLoaded: Alpine loads via `defer` (base.html),
+  // so it only walks the DOM -- and attaches the teleported toast
+  // container's @toast-show.window listener -- once the document has
+  // finished parsing. This script is a plain inline <script>, which
+  // (unlike `defer`d ones) runs immediately at its position in the
+  // document; dispatching straight away fired the event before that
+  // listener existed, so the toast silently never appeared. Deferred
+  // scripts always finish before DOMContentLoaded fires, so waiting
+  // for it guarantees Alpine has already initialized.
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll("#flash-messages [data-text]").forEach(function (el) {
+      var type = { error: "danger", warning: "warning", success: "success" }[el.dataset.level] || "default";
+      window.toast(el.dataset.text, { type: type });
+    });
+  });
+</script>

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

@@ -0,0 +1,30 @@
+{# Breadcrumb, ported from shadcn/ui: a home crumb linking to the
+   dashboard, then the page's own trail, with the current page a plain
+   item carrying aria-current. It doubles as the page header, since
+   base.html has no separate <h1> -- the active crumb is weighted like a
+   title so it reads as one. #}
+{% from "admin/components/icons.html" import icon %}
+{% macro render_breadcrumbs(breadcrumbs, base_path) %}
+<nav aria-label="{{ _('Breadcrumb') }}">
+  <ol class="{{ ui('breadcrumb') }}">
+    <li class="flex items-center">
+      <a href="{{ base_path }}" class="{{ ui('breadcrumb', 'link') }} p-0.5">
+        {{ icon("home", "w-4 h-4") }}
+        <span class="sr-only">{{ _("Dashboard") }}</span>
+      </a>
+    </li>
+    {% for crumb in breadcrumbs %}
+    <li class="{{ ui('breadcrumb', 'item') }}">
+      <span class="{{ ui('breadcrumb', 'separator') }}">{{ icon("chevron-right", "w-3.5 h-3.5") }}</span>
+      {% if crumb.url %}
+      <a href="{{ crumb.url }}" class="{{ ui('breadcrumb', 'link') }}">{{ crumb.label }}</a>
+      {% elif crumb.active %}
+      <span class="{{ ui('breadcrumb', 'page') }}" aria-current="page">{{ crumb.label }}</span>
+      {% else %}
+      <span class="{{ ui('breadcrumb', 'plain') }}">{{ crumb.label }}</span>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ol>
+</nav>
+{% endmacro %}

polyadmin/templates/admin/components/ui/bulk-actions.html

@@ -0,0 +1,69 @@
+{% from "admin/components/csrf-field.html" import csrf_field %}
+{% from "admin/components/icons.html" import icon %}
+{# Bulk-actions listbox, rendered separately from ui/table.html so
+   components/list_content.html can put it beside the search bar
+   instead of stacked above the table -- row checkboxes still reference
+   the form it renders via the HTML `form=` attribute (see
+   ui/table.html), so the form itself never has to wrap the table.
+
+   Picking an action submits immediately, with no separate "Apply"
+   step: it writes the chosen route onto the form's `action` and calls
+   requestSubmit(), not .submit(), which would skip the onsubmit
+   handler running the confirm decision below.
+
+   The route and confirmation text ride in as data-url/data-confirm on
+   the clicked item and are read back through $el.dataset, so neither
+   has to survive being embedded in a JS string.
+
+   Included, not a macro, so it shares list_content.html's ambient
+   context (actions, base_path, model_admin). #}
+{% if actions %}
+<form id="bulk-actions-form" method="post" action="{{ base_path }}/{{ model_admin.get_slug() }}/actions/"
+      onsubmit="return window.adminConfirmSubmit(event, this, this.dataset.confirm)"
+      class="{{ ui('toolbar', 'item') }}">
+  {{ csrf_field(csrf_token) }}
+  {# The query the list is showing, carried on the form so that "select
+     all matching" can be resolved server-side. A checkbox only ever
+     reaches the rows on this page, so without these the filtered set
+     would be unreachable from a 25-row window. #}
+  <input type="hidden" name="search" value="{{ search or '' }}">
+  <input type="hidden" name="sort" value="{{ ordering or '' }}">
+  {% for name, value in (filters or {}).items() %}
+  <input type="hidden" name="filter[{{ name }}]" value="{{ value }}">
+  {% endfor %}
+  <input type="hidden" name="_select_all" value="">
+  {# w-full on both the positioning wrapper and the trigger: a button
+     can only fill a box that is itself full width, and the <form>
+     above is what the stacked toolbar actually stretches. #}
+  <div class="relative flex w-full lg:inline-flex lg:w-auto" x-data='{ open: false, label: {{ _("Action…")|tojson }} }'
+       @keydown.escape="open = false" @click.outside="open = false">
+    <button type="button" x-ref="trigger" @click="open = !open"
+            :aria-expanded="open ? 'true' : 'false'" aria-haspopup="listbox"
+            class="{{ ui('button', 'outline', 'size-sm') }} {{ ui('toolbar', 'item') }}">
+      <span x-text="label" class="{{ ui('toolbar', 'item-label') }}"></span>
+      {{ icon("chevron-down", "w-3.5 h-3.5") }}
+    </button>
+    <div x-show="open" x-cloak role="listbox"
+         x-anchor.bottom-start.offset.6="$refs.trigger"
+         x-transition:enter="transition ease-out duration-150"
+         x-transition:enter-start="opacity-0 scale-95"
+         x-transition:enter-end="opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-100"
+         x-transition:leave-start="opacity-100 scale-100"
+         x-transition:leave-end="opacity-0 scale-95"
+         class="{{ ui('combobox', 'content') }} w-48">
+      {% for action in actions %}
+      <div role="option" tabindex="0"
+           data-url="{{ base_path }}/{{ model_admin.get_slug() }}/actions/{{ action.name }}"
+           {% if action.confirm %}data-confirm="{{ _(action.confirm) }}"{% endif %} {% if action.preview %}data-preview{% endif %}
+           @click="label = $el.textContent.trim(); open = false;
+                   let form = $el.closest('form');
+                   form.action = $el.dataset.url;
+                   form.dataset.confirm = $el.dataset.confirm || '';
+                   form.requestSubmit()"
+           class="{{ ui('combobox', 'item') }}">{{ _(action.label) }}</div>
+      {% endfor %}
+    </div>
+  </div>
+</form>
+{% endif %}

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

@@ -0,0 +1,175 @@
+{# Calendar + DatePicker, ported from shadcn/ui.
+
+   There is no react-day-picker here, so the month grid is computed by
+   the `adminCalendar` factory -- always six weeks, so the popover never
+   changes height as you page through months.
+
+   Three macros:
+
+     calendar()          the month grid alone. Must be called inside an
+                         element whose x-data is adminCalendar(), and
+                         expects an x-ref="dateInput" in the same scope:
+                         the grid never holds the value, it only writes
+                         to that input, which stays the single source of
+                         truth.
+
+     date_picker(...)    the whole control -- a native
+                         <input type="date"> with a button that opens
+                         the grid in a popover.
+
+     calendar_script()   the shared Alpine factory, included once by
+                         admin/base.html.
+
+   The native input stays underneath because it already posts
+   YYYY-MM-DD with no JS and gets the platform picker on mobile. The
+   popover is an enhancement over it, not a replacement, so a date field
+   works identically with Alpine absent and the server never has to care
+   which one was used. #}
+{% from "admin/components/icons.html" import icon %}
+
+{% macro calendar() %}
+<div class="{{ ui('calendar') }}">
+  <div class="{{ ui('calendar', 'header') }}">
+    <button type="button" @click="shift(-1)" class="{{ ui('calendar', 'nav') }}" aria-label="{{ _('Previous month') }}">
+      {{ icon("chevron-left", "w-4 h-4") }}
+    </button>
+    <span class="{{ ui('calendar', 'caption') }}" x-text="monthLabel" aria-live="polite"></span>
+    <button type="button" @click="shift(1)" class="{{ ui('calendar', 'nav') }}" aria-label="{{ _('Next month') }}">
+      {{ icon("chevron-right", "w-4 h-4") }}
+    </button>
+  </div>
+  <div class="grid grid-cols-7 gap-0.5" role="grid">
+    <template x-for="weekday in weekdays" :key="weekday">
+      <div class="{{ ui('calendar', 'weekday') }}" role="columnheader" x-text="weekday"></div>
+    </template>
+    <template x-for="day in days" :key="day.iso">
+      <button type="button" role="gridcell" @click="pick(day.iso)"
+              :aria-selected="day.iso === selectedISO ? 'true' : 'false'"
+              :class="[
+                day.iso === selectedISO ? '{{ ui('calendar', 'day-selected') }}' : '',
+                day.outside ? '{{ ui('calendar', 'day-outside') }}' : '',
+                (day.iso === todayISO && day.iso !== selectedISO) ? '{{ ui('calendar', 'day-today') }}' : ''
+              ]"
+              class="{{ ui('calendar', 'day') }}" x-text="day.label"></button>
+    </template>
+  </div>
+</div>
+{% endmacro %}
+
+{% macro date_picker(name, value="", required=false, disabled=false) %}
+<div class="relative" x-data="adminCalendar()" @keydown.escape="open = false">
+  <div class="flex items-center gap-1">
+    <input x-ref="dateInput" type="date" id="field-{{ name }}" name="{{ name }}"
+           value="{{ value }}" autocomplete="off"
+           {% if required %}required{% endif %}{% if disabled %} disabled{% endif %}
+           class="{{ ui('input') }}">
+    <button type="button" @click="toggle()" x-ref="trigger"
+            :aria-expanded="open ? 'true' : 'false'"
+            aria-label="{{ _('Open calendar') }}"
+            {% if disabled %}disabled{% endif %}
+            class="{{ ui('button', 'outline', 'size-icon') }}">
+      {{ icon("calendar", "w-4 h-4") }}
+    </button>
+  </div>
+  <div x-show="open" x-cloak @click.outside="open = false"
+       x-anchor.bottom-end.offset.6="$refs.trigger"
+       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('popover', 'content') }} w-auto p-0">
+    {{ calendar() }}
+  </div>
+</div>
+{% endmacro %}
+
+{% macro calendar_script() %}
+<script>
+  // Idempotent global, same pattern as window.toast (toasts.html) and
+  // window.adminConfirmSubmit (action_confirm_modal.html) -- the
+  // component may be included many times per page, but only the first
+  // copy defines the factory.
+  window.adminCalendar = window.adminCalendar || function () {
+    return {
+      open: false,
+      // The month on screen. Never the selection -- that lives in the
+      // date input (see this file's header comment).
+      view: new Date(),
+
+      // Monday-first short weekday names in the page's language.
+      // 2024-01-01 was a Monday.
+      get weekdays() {
+        var format = new Intl.DateTimeFormat(document.documentElement.lang || undefined, { weekday: "short" });
+        var out = [];
+        for (var i = 0; i < 7; i++) out.push(format.format(new Date(2024, 0, 1 + i)));
+        return out;
+      },
+
+      init() {
+        this.view = this.parsed() || new Date();
+      },
+
+      // Local-time construction on purpose: `new Date("2024-03-01")`
+      // parses as UTC and can land on the previous day west of
+      // Greenwich, which would render the wrong month.
+      parsed() {
+        var match = /^(\d{4})-(\d{2})-(\d{2})/.exec(this.$refs.dateInput.value || "");
+        return match ? new Date(+match[1], +match[2] - 1, +match[3]) : null;
+      },
+
+      iso(date) {
+        return date.getFullYear() + "-" +
+          String(date.getMonth() + 1).padStart(2, "0") + "-" +
+          String(date.getDate()).padStart(2, "0");
+      },
+
+      get monthLabel() {
+        return this.view.toLocaleDateString(document.documentElement.lang || undefined, { month: "long", year: "numeric" });
+      },
+
+      get todayISO() { return this.iso(new Date()); },
+
+      get selectedISO() {
+        var date = this.parsed();
+        return date ? this.iso(date) : null;
+      },
+
+      get days() {
+        var first = new Date(this.view.getFullYear(), this.view.getMonth(), 1);
+        // Back up to the Monday of the week the 1st falls in.
+        // getDay() is 0=Sunday, so (day + 6) % 7 is 0=Monday.
+        var start = new Date(first);
+        start.setDate(1 - ((first.getDay() + 6) % 7));
+        var out = [];
+        for (var i = 0; i < 42; i++) {
+          var day = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
+          out.push({
+            iso: this.iso(day),
+            label: day.getDate(),
+            outside: day.getMonth() !== this.view.getMonth(),
+          });
+        }
+        return out;
+      },
+
+      shift(months) {
+        this.view = new Date(this.view.getFullYear(), this.view.getMonth() + months, 1);
+      },
+
+      pick(iso) {
+        this.$refs.dateInput.value = iso;
+        // So anything listening on the input (htmx hx-trigger="change",
+        // a validation handler) reacts as if a person had typed it.
+        this.$refs.dateInput.dispatchEvent(new Event("change", { bubbles: true }));
+        this.open = false;
+      },
+
+      toggle() {
+        // Re-sync on open: the input may have been typed into directly
+        // since the last time the grid was shown.
+        if (!this.open) this.view = this.parsed() || new Date();
+        this.open = !this.open;
+      },
+    };
+  };
+</script>
+{% endmacro %}

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

@@ -0,0 +1,82 @@
+{% from "admin/components/icons.html" import icon %}
+{# Combobox, from shadcn's Popover + cmdk. cmdk filters a client-side
+   array, but the point of autocomplete_fields is never loading the
+   target's full dataset into the page, so filtering stays server-side on
+   /lookup: htmx owns the round-trip, Alpine only open/close and arrow
+   keys.
+
+   A result's pk and label ride in on data-pk/data-label and are read
+   back through `$el.dataset`; the initial selection is the inputs' own
+   server-rendered `value`. selectItem writes the pk imperatively rather
+   than through a reactive `:value`, because x-bind runs before x-init
+   and would blank the server-rendered value on every load. Neither route
+   puts a label inside a JS expression.
+
+   Its own partial rather than a branch of ui/field, because two callers
+   need it: the record form's autocomplete relation, and the filter
+   panel's relation filter. #}
+{% macro combobox(name, id, selected_pk=None, selected_label=None, lookup_url="", placeholder="", disabled=False) %}
+<div class="{{ ui('combobox') }}"
+     x-data="{
+       open: false, query: '', activeEl: null, activeId: '',
+       selectItem(pk, label) { this.$refs.hiddenInput.value = pk; this.query = label; this.open = false; this.clearActive(); },
+       clearActive() { this.activeEl = null; this.activeId = ''; },
+       moveActive(delta) {
+         const items = Array.from(this.$refs.results.children).filter(el => el.dataset.pk !== undefined);
+         if (!items.length) return;
+         let idx = items.indexOf(this.activeEl);
+         idx = (idx + delta + items.length) % items.length;
+         items.forEach(el => el.classList.remove('{{ ui('combobox', 'item-active') }}'));
+         this.activeEl = items[idx];
+         this.activeEl.classList.add('{{ ui('combobox', 'item-active') }}');
+         this.activeEl.scrollIntoView({ block: 'nearest' });
+         // The results are server-rendered by /lookup and re-swapped on
+         // every keystroke, so they carry no ids of their own --
+         // aria-activedescendant needs one, minted here against the
+         // panel's own (unique) id.
+         if (!this.activeEl.id) this.activeEl.id = this.$refs.results.id + '-opt-' + idx;
+         this.activeId = this.activeEl.id;
+       },
+       selectActive() { if (this.activeEl) this.activeEl.click(); }
+     }"
+     x-init="query = $refs.textInput.value;"
+     @click.outside="open = false">
+  <input x-ref="hiddenInput" type="hidden" name="{{ name }}"
+         value="{{ selected_pk if selected_pk is not none else '' }}">
+  <div x-ref="trigger" class="{{ ui('combobox', 'trigger') }}">
+    {{ 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. Mirrors ui/multi-select. #}
+    <input x-ref="textInput" type="text" autocomplete="off" placeholder="{{ placeholder }}"
+           value="{{ selected_label if selected_label is not none else '' }}"
+           x-model="query" @focus="open = true"
+           role="combobox" aria-autocomplete="list"
+           :aria-expanded="open ? 'true' : 'false'"
+           aria-controls="{{ id }}"
+           :aria-activedescendant="activeId || null"
+           @keydown.escape="open = false" @keydown.down.prevent="open = true; moveActive(1)"
+           @keydown.up.prevent="moveActive(-1)" @keydown.enter.prevent="selectActive()"
+           {% if disabled %}disabled{% endif %}
+           hx-get="{{ lookup_url }}"
+           hx-trigger="keyup changed delay:300ms, focus"
+           hx-target="#{{ id }}" hx-swap="innerHTML"
+           class="{{ ui('input', 'bare') }}">
+  </div>
+  {# htmx replaces these children on every keystroke, so the
+     remembered highlight is stale the moment a swap lands. #}
+  {# Portalled to <body>, as Radix does: the popover is taller than the
+     row it opens from, and any clipping ancestor -- a collapsible
+     fieldset, a table's scroll area, the filter drawer -- would slice it
+     off. x-anchor then positions it against the trigger, and x-effect
+     matches its width, which "w-full" can no longer do from the body. #}
+  <template x-teleport="body">
+    <div x-ref="results" id="{{ id }}" role="listbox"
+         x-anchor.bottom-start.offset.4="$refs.trigger"
+         x-effect="if (open && $refs.trigger) $el.style.width = $refs.trigger.offsetWidth + 'px'"
+         @htmx:after-swap="clearActive()"
+         class="{{ ui('combobox', 'content') }}"
+         x-show="open" x-cloak></div>
+  </template>
+</div>
+{% endmacro %}

polyadmin/templates/admin/components/ui/delete-preview.html

@@ -0,0 +1,37 @@
+{# The delete preview (docs/deletes.md): what else a delete takes out, and
+   why it may be refused. The delete page and the delete_selected
+   confirmation page call delete_preview(); an inline section whose Remove
+   was refused calls delete_refusal() on its own. #}
+{% macro delete_group(group) %}
+<section class="{{ ui('panel') }}">
+  <h3 class="{{ ui('text', 'heading') }}">{{ group.heading }}</h3>
+  <ul class="mt-2 flex flex-col gap-1 text-sm">
+    {% for item in group["items"] %}
+    <li>{% if item.url %}<a href="{{ item.url }}" class="{{ ui('text', 'link') }}">{{ item.label }}</a>{% else %}{{ item.label }}{% endif %}</li>
+    {% endfor %}
+    {% if group.more %}<li class="{{ ui('text', 'muted') }}">{{ ngettext("…and %(num)d more", "…and %(num)d more", group.more) }}</li>{% endif %}
+    {% if group.hidden %}<li class="{{ ui('text', 'muted') }}">{{ ngettext("%(num)d you can't view", "%(num)d you can't view", group.hidden) }}</li>{% endif %}
+  </ul>
+</section>
+{% endmacro %}
+
+{% macro delete_refusal(preview) %}
+<div role="alert" class="{{ ui('alert', 'destructive') }}">
+  <p class="{{ ui('alert', 'title') }}">{{ _("This can't be deleted") }}</p>
+  {% if preview.denied %}<p class="{{ ui('alert', 'description') }}">{{ _("Your account doesn't have permission to delete: %(types)s", types=preview.denied) }}</p>{% endif %}
+  {% if preview.protected %}
+  <p class="{{ ui('alert', 'description') }} mt-2">{{ _("These records must be removed first:") }}</p>
+  <div class="mt-2 flex flex-col gap-2">{% for group in preview.protected %}{{ delete_group(group) }}{% endfor %}</div>
+  {% endif %}
+</div>
+{% endmacro %}
+
+{% macro delete_preview(preview) %}
+{% if preview.cascades %}
+<div class="mt-4">
+  <h2 class="{{ ui('text', 'heading') }}">{{ _("This will also delete") }}</h2>
+  <div class="mt-2 flex flex-col gap-2">{% for group in preview.cascades %}{{ delete_group(group) }}{% endfor %}</div>
+</div>
+{% endif %}
+{% if preview.blocked %}<div class="mt-4">{{ delete_refusal(preview) }}</div>{% endif %}
+{% endmacro %}

polyadmin/templates/admin/components/ui/dropdown-menu.html

@@ -0,0 +1,71 @@
+{# DropdownMenu, ported from shadcn/ui. Radix's Portal is not needed
+   (the panel is absolutely positioned inside a `relative` wrapper, so
+   it shares its trigger's stacking context), Floating UI becomes
+   x-anchor, and no roving tabindex is needed because the items are real
+   <button>/<a> elements Tab already walks.
+
+   `items` is a list of dicts -- data, not markup -- so nothing here has
+   to trust an application-supplied HTML string:
+     {"label": ..., "icon": ..., "url": ...}   a link
+     {"separator": True}                        a divider
+     {"label": ...}                             a section label
+
+   The panel always anchors bottom-end; a start-aligned variant belongs
+   in its own macro rather than a flag here. #}
+{% from "admin/components/icons.html" import icon %}
+{% macro dropdown_menu(label, icon_name="dots", text=none, variant=none, items=(), full_width=false) %}
+{# full_width makes the trigger fill its line while the toolbar is
+   stacked, then shrink to its content at lg. The wrapper needs it too:
+   a button can only fill a box that is itself full width. #}
+<div class="relative {% if full_width %}flex w-full lg:inline-flex lg:w-auto{% else %}inline-flex{% endif %}"
+     x-data="{ open: false }"
+     @keydown.escape="open = false; $refs.trigger.focus()"
+     @click.outside="open = false">
+  {% if text %}
+  {# Under full_width the label goes hard left and both icons hard
+     right, so a stacked trigger reads like the rest of the toolbar
+     instead of floating its content mid-line. The shared order-last
+     keeps icon-then-chevron order; the label's flex-1 pushes them. #}
+  <button type="button" x-ref="trigger" @click="open = !open"
+          :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu"
+          class="{{ ui('button', variant or 'outline', 'size-default') }}{% if full_width %} w-full lg:w-auto{% endif %}">
+    {% if icon_name %}
+    {{ icon(icon_name, "w-4 h-4" ~ (" " ~ ui('toolbar', 'item-icon') if full_width else "")) }}
+    {% endif %}
+    <span {% if full_width %}class="{{ ui('toolbar', 'item-label') }}"{% endif %}>{{ text }}</span>
+    <span :class="open ? 'rotate-180' : ''"
+          class="transition-transform duration-200{% if full_width %} {{ ui('toolbar', 'item-icon') }}{% endif %}">
+      {{ icon("chevron-down", "w-3.5 h-3.5") }}
+    </span>
+  </button>
+  {% else %}
+  <button type="button" x-ref="trigger" @click="open = !open"
+          :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu"
+          aria-label="{{ label }}"
+          class="{{ ui('button', variant or 'ghost-muted', 'size-icon-sm') }}">
+    {{ icon(icon_name, "w-4 h-4") }}
+  </button>
+  {% endif %}
+  <div x-show="open" x-cloak role="menu"
+       x-anchor.bottom-end.offset.6="$refs.trigger"
+       x-transition:enter="transition ease-out duration-150"
+       x-transition:enter-start="opacity-0 scale-95"
+       x-transition:enter-end="opacity-100 scale-100"
+       x-transition:leave="transition ease-in duration-100"
+       x-transition:leave-start="opacity-100 scale-100"
+       x-transition:leave-end="opacity-0 scale-95"
+       class="{{ ui('dropdown', 'content') }}">
+    {% for item in items %}
+    {% if item.get("separator") %}
+    <div role="separator" class="{{ ui('dropdown', 'separator') }}"></div>
+    {% elif item.get("url") %}
+    <a href="{{ item.url }}" role="menuitem" class="{{ ui('dropdown', 'item') }}">
+      {% if item.get("icon") %}{{ icon(item.icon, "w-4 h-4 shrink-0") }}{% endif %}<span class="truncate">{{ item.label }}</span>
+    </a>
+    {% else %}
+    <div role="presentation" class="{{ ui('dropdown', 'label') }}">{{ item.label }}</div>
+    {% endif %}
+    {% endfor %}
+  </div>
+</div>
+{% endmacro %}