polyadmin 0.1.0b1__py3-none-any.whl

polyadmin/templates/admin/theme.html

@@ -0,0 +1,372 @@
+{# Design tokens + frontend runtime.
+
+   The variables below are shadcn/ui's stock Zinc theme, and every class
+   string in polyadmin/ui.py resolves to them rather than to a literal
+   Tailwind palette -- so restyling the admin, or flipping it to dark, is
+   a change to these variables and nothing else.
+
+   Script order is load-order-critical, top to bottom:
+
+     1. the dark-class script must run synchronously before paint, or a
+        dark-mode reload flashes the light palette for a frame;
+     2. the Tailwind CDN script must load *before* `tailwind.config` is
+        assigned -- backwards from what you would guess. That script is
+        what defines the global `tailwind`, so assigning to it first
+        throws a ReferenceError the browser swallows, and every
+        token-based utility then resolves to nothing;
+     3. Alpine plugins must load before Alpine core, which initializes
+        on load and only sees directives registered by then.
+
+   Everything is CDN-loaded: there is no frontend build step. #}
+<script>
+  // (1) Pre-paint theme resolution -- see the note above.
+  (function () {
+    try {
+      var stored = localStorage.getItem("polyadmin-theme");
+      var dark = stored
+        ? stored === "dark"
+        : window.matchMedia("(prefers-color-scheme: dark)").matches;
+      document.documentElement.classList.toggle("dark", dark);
+    } catch (e) {
+      /* localStorage unavailable (private mode, file://) -- stay light. */
+    }
+  })();
+</script>
+
+<script src="https://cdn.tailwindcss.com"></script>
+<script>
+  // (2) Tailwind Play CDN configuration -- the CDN script above must
+  // load first, since it's what defines the `tailwind` global this
+  // assigns onto (see the note above). `<alpha-value>` is what lets the
+  // opacity modifiers the shadcn class lists rely on -- bg-primary/90,
+  // bg-muted/50, border-destructive/50 -- resolve against a CSS
+  // variable holding a bare HSL triplet.
+  tailwind.config = {
+    darkMode: "class",
+    theme: {
+      extend: {
+        fontFamily: {
+          sans: [
+            "ui-sans-serif", "system-ui", "-apple-system", "Segoe UI",
+            "Roboto", "Helvetica Neue", "Arial", "sans-serif",
+          ],
+        },
+        borderRadius: {
+          lg: "var(--radius)",
+          md: "calc(var(--radius) - 2px)",
+          sm: "calc(var(--radius) - 4px)",
+        },
+        colors: {
+          border: "hsl(var(--border) / <alpha-value>)",
+          input: "hsl(var(--input) / <alpha-value>)",
+          ring: "hsl(var(--ring) / <alpha-value>)",
+          background: "hsl(var(--background) / <alpha-value>)",
+          foreground: "hsl(var(--foreground) / <alpha-value>)",
+          primary: {
+            DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+            foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+          },
+          secondary: {
+            DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+            foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
+          },
+          destructive: {
+            DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+            foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+          },
+          muted: {
+            DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+            foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
+          },
+          accent: {
+            DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+            foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
+          },
+          popover: {
+            DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+            foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
+          },
+          card: {
+            DEFAULT: "hsl(var(--card) / <alpha-value>)",
+            foreground: "hsl(var(--card-foreground) / <alpha-value>)",
+          },
+          chart: {
+            1: "hsl(var(--chart-1) / <alpha-value>)",
+            2: "hsl(var(--chart-2) / <alpha-value>)",
+            3: "hsl(var(--chart-3) / <alpha-value>)",
+            4: "hsl(var(--chart-4) / <alpha-value>)",
+            5: "hsl(var(--chart-5) / <alpha-value>)",
+            6: "hsl(var(--chart-6) / <alpha-value>)",
+          },
+        },
+      },
+    },
+  };
+</script>
+
+{# (3) Alpine plugins, then Alpine core, then HTMX. SortableJS is
+   deferred so it is ready before any x-init calling Sortable.create,
+   and is the one non-Alpine dependency: drag-and-drop has no small
+   CSS-only equivalent. #}
+<script defer src="https://unpkg.com/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
+<script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
+<script defer src="https://unpkg.com/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+<script src="https://unpkg.com/htmx.org@1.9.10"></script>
+<script>
+  // One listener covers every mutating hx-* attribute in the admin --
+  // including the bodyless hx-deletes, which have no form field to
+  // carry a token -- and any added later.
+  //
+  // On `document`, not `document.body`: this file is included from
+  // base.html's <head>, where document.body is still null. htmx's
+  // events bubble, so the document catches them all either way.
+  document.addEventListener("htmx:configRequest", function (evt) {
+    if (/^(GET|HEAD|OPTIONS|TRACE)$/i.test(evt.detail.verb)) return;
+    var meta = document.querySelector('meta[name="csrf-token"]');
+    if (meta) evt.detail.headers["X-CSRF-Token"] = meta.content;
+  });
+
+  // Dates and decimals are rendered as ISO values and formatted here, in
+  // the page's locale, so both implementations display them identically.
+  // A date-only value is built from its parts: new Date("YYYY-MM-DD")
+  // parses as UTC midnight, the previous day west of Greenwich. The
+  // Date constructor maps years 0-99 onto 1900-1999, so the year is set
+  // again with setFullYear, which does not.
+  //
+  // One Intl formatter per format, built on first use. Each value is
+  // formatted on its own: an unknown lang or an option out of range
+  // throws, and that leaves the one value in its ISO form rather than
+  // aborting the page. A decimal goes to NumberFormat as its string, which
+  // engines that support it format exactly (a Number would round past 15
+  // or so digits); older ones convert it to a Number themselves.
+  window.polyadminFormat = function (root) {
+    var lang = document.documentElement.lang || undefined, cache = {};
+    function formatter(key, make) {
+      if (!Object.prototype.hasOwnProperty.call(cache, key)) cache[key] = make();
+      return cache[key];
+    }
+    root.querySelectorAll("time[data-format]").forEach(function (el) {
+      try {
+        var iso = el.getAttribute("datetime"), d, m;
+        if (el.dataset.format === "date") {
+          m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+          if (!m) return;
+          d = new Date(+m[1], +m[2] - 1, +m[3]);
+          d.setFullYear(+m[1], +m[2] - 1, +m[3]);
+          el.textContent = formatter("date", function () {
+            return new Intl.DateTimeFormat(lang, { dateStyle: "medium" });
+          }).format(d);
+        } else {
+          m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?/.exec(iso);
+          if (!m) return;
+          if (/(Z|[+-]\d{2}:\d{2})$/.test(iso)) {
+            d = new Date(iso);
+          } else {
+            d = new Date(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +(m[6] || 0));
+            d.setFullYear(+m[1], +m[2] - 1, +m[3]);
+          }
+          el.textContent = formatter("datetime", function () {
+            return new Intl.DateTimeFormat(lang, { dateStyle: "medium", timeStyle: "short" });
+          }).format(d);
+        }
+      } catch (err) {
+        // Keep the ISO text.
+      }
+    });
+    root.querySelectorAll('[data-format="decimal"]').forEach(function (el) {
+      try {
+        var raw = el.dataset.value;
+        if (raw === "" || !isFinite(Number(raw))) return;
+        // NumberFormat accepts at most 20 fraction digits.
+        var digits = Math.min((raw.split(".")[1] || "").length, 20);
+        el.textContent = formatter("decimal" + digits, function () {
+          return new Intl.NumberFormat(lang, { minimumFractionDigits: digits, maximumFractionDigits: digits });
+        }).format(raw);
+      } catch (err) {
+        // Keep the raw text.
+      }
+    });
+  };
+
+  // prepopulated_fields (docs/model-admin.md): fill a field from others as
+  // they are typed. Create forms only -- the server omits the attribute on
+  // an edit form, because an existing record's slug is a real identifier.
+  //
+  // The slug rule mirrors the server's Slugify: transliterate, lowercase,
+  // collapse the rest into single hyphens. The Cyrillic table is the same
+  // data, kept here so the browser needs no round trip.
+  var CYRILLIC = {
+    "а":"a","б":"b","в":"v","г":"g","д":"d","е":"e","ё":"yo","ж":"zh","з":"z",
+    "и":"i","й":"y","к":"k","л":"l","м":"m","н":"n","о":"o","п":"p","р":"r",
+    "с":"s","т":"t","у":"u","ф":"f","х":"kh","ц":"ts","ч":"ch","ш":"sh",
+    "щ":"shch","ъ":"","ы":"y","ь":"","э":"e","ю":"yu","я":"ya"
+  };
+  function polyadminSlugify(value, keepUnicode) {
+    var mapped = "";
+    for (var i = 0; i < value.length; i++) {
+      var ch = value[i], lower = ch.toLowerCase();
+      mapped += (!keepUnicode && CYRILLIC.hasOwnProperty(lower)) ? CYRILLIC[lower] : ch;
+    }
+    mapped = mapped.toLowerCase();
+    if (!keepUnicode) {
+      // Decompose, drop the combining marks an accent decomposed into, then
+      // drop whatever is still not ASCII.
+      mapped = mapped.normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^\x00-\x7F]/g, "");
+    }
+    var pattern = keepUnicode ? /[^\p{L}\p{N}]+/gu : /[^a-z0-9]+/g;
+    return mapped.replace(pattern, "-").replace(/^-+|-+$/g, "");
+  }
+  window.polyadminPrepopulate = function (root) {
+    root.querySelectorAll("form[data-prepopulated]").forEach(function (form) {
+      var spec;
+      try {
+        spec = JSON.parse(form.dataset.prepopulated);
+      } catch (err) {
+        return;
+      }
+      Object.keys(spec).forEach(function (name) {
+        var target = form.querySelector('[name="' + name + '"]');
+        if (!target || target.dataset.prepopulateBound) return;
+        target.dataset.prepopulateBound = "1";
+        // Typing in the target detaches it for the rest of the form's life,
+        // and a value already there is never overwritten.
+        var detached = target.value !== "";
+        target.addEventListener("input", function () { detached = true; });
+        var sources = (spec[name].from || []).map(function (from) {
+          return form.querySelector('[name="' + from + '"]');
+        }).filter(Boolean);
+        var fill = function () {
+          if (detached) return;
+          var parts = sources.map(function (el) { return el.value; }).filter(Boolean);
+          target.value = polyadminSlugify(parts.join(" "), !!spec[name].unicode);
+        };
+        sources.forEach(function (el) { el.addEventListener("input", fill); });
+      });
+    });
+  };
+  document.addEventListener("DOMContentLoaded", function () { window.polyadminFormat(document); window.polyadminPrepopulate(document); });
+  document.addEventListener("htmx:load", function (evt) { window.polyadminFormat(evt.detail.elt); window.polyadminPrepopulate(evt.detail.elt); });
+</script>
+
+<style>
+  /* shadcn/ui's stock "Zinc" palette, as bare HSL triplets. */
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 44%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --chart-6: 262 60% 62%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 5.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 5.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 45%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --chart-6: 190 70% 45%;
+  }
+
+  [x-cloak] { display: none !important; }
+
+  /* Alpine's x-collapse animates height; without this the accordion
+     content jumps its scrollbar in during the transition. */
+  [x-collapse] { overflow: hidden; }
+
+  /* Checkbox check glyph (lucide Check, the icon shadcn/ui's Checkbox
+     uses). It lives here rather than in ui("checkbox") for two reasons:
+     a native <input> cannot carry a ::before/::after reliably, so the
+     mark has to be a background image; and its colour is
+     --primary-foreground, which flips with the theme and cannot be
+     interpolated into a Tailwind arbitrary value. Hence one rule per
+     theme, matching the two token values in this file. */
+  .ui-checkbox:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+    background-size: 0.7rem;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  /* ScrollArea (ui("scroll-area")). Radix draws a custom scrollbar over
+     a hidden native one; this restyles the native one instead, which
+     needs real CSS -- Tailwind has no scrollbar utilities without a
+     plugin. Thin, token-coloured, and only visible where it is needed. */
+  .ui-scroll-area {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
+  }
+  .ui-scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
+  .ui-scroll-area::-webkit-scrollbar-track { background: transparent; }
+  .ui-scroll-area::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--border));
+    border-radius: 9999px;
+  }
+  .ui-scroll-area:hover::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.5);
+  }
+
+  .dark .ui-checkbox:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+  }
+</style>
+
+<script>
+  // The theme store backing the header's toggle (ui/theme-toggle).
+  // Registered on alpine:init so it exists before any component that
+  // reads $store.theme is initialized.
+  document.addEventListener("alpine:init", function () {
+    Alpine.store("theme", {
+      dark: document.documentElement.classList.contains("dark"),
+      toggle() {
+        this.dark = !this.dark;
+        document.documentElement.classList.toggle("dark", this.dark);
+        try {
+          localStorage.setItem("polyadmin-theme", this.dark ? "dark" : "light");
+        } catch (e) {
+          /* Preference just doesn't persist; the toggle still works. */
+        }
+      },
+    });
+  });
+</script>

polyadmin/templates/admin/widgets/activity.html

@@ -0,0 +1,8 @@
+<ul class="space-y-2 text-sm text-foreground">
+  {% for entry in widget_data.entries %}
+  <li>{{ entry }}</li>
+  {% endfor %}
+</ul>
+{% if not widget_data.entries %}
+<p class="text-sm text-muted-foreground">{{ _("No recent activity.") }}</p>
+{% endif %}

polyadmin/templates/admin/widgets/chart.html

@@ -0,0 +1,15 @@
+<div class="space-y-2">
+  {% for label, value, percent in widget_data.series %}
+  <div>
+    <div class="mb-0.5 flex justify-between text-xs text-muted-foreground">
+      <span>{{ label }}</span><span>{{ value }}</span>
+    </div>
+    <div class="{{ ui('widget', 'bar-track') }}">
+      <div class="{{ ui('widget', 'bar-fill') }}" style="width: {{ percent }}%"></div>
+    </div>
+  </div>
+  {% endfor %}
+  {% if not widget_data.series %}
+  <p class="text-sm text-muted-foreground">{{ _("No data.") }}</p>
+  {% endif %}
+</div>

polyadmin/templates/admin/widgets/donut.html

@@ -0,0 +1,59 @@
+{# Share-of-total breakdown as a dependency-free SVG ring -- stacked
+   <circle> arcs plus a legend, the same no-charting-library stance as
+   widgets/chart.html.
+
+   Hovering a slice or its legend row highlights both and swaps the
+   ring's centre label. `active` is compared against a plain loop index,
+   never a label, so nothing dynamic is interpolated into the Alpine
+   expression.
+
+   The legend row's highlight stops at the card's content edge rather
+   than bleeding into its padding: the card body is a bounded scroll box
+   (dashboard.html), so that bleed was 8px of horizontal overflow. #}
+<div x-data="{ active: null }" class="flex flex-col items-center gap-6 sm:flex-row">
+  <div class="relative h-36 w-36 shrink-0">
+    <svg viewBox="0 0 36 36" class="h-36 w-36">
+      <circle cx="18" cy="18" r="15.9155" fill="none" stroke="currentColor" stroke-width="3" class="text-muted"></circle>
+      {% for slice in widget_data.slices %}
+      <circle cx="18" cy="18" r="15.9155" fill="none" stroke="currentColor" stroke-width="3"
+              stroke-dasharray="{{ slice.percent }} {{ 100 - slice.percent }}"
+              stroke-dashoffset="{{ slice.dash_offset }}"
+              class="text-{{ slice.color }} transition-opacity duration-150"
+              :class="active !== null && active !== {{ loop.index0 }} ? 'opacity-30' : ''"
+              @mouseenter="active = {{ loop.index0 }}" @mouseleave="active = null"></circle>
+      {% endfor %}
+    </svg>
+    <div class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
+      <template x-if="active === null">
+        <div>
+          <p class="text-lg font-semibold text-foreground">{{ widget_data.total }}</p>
+          <p class="text-[11px] text-muted-foreground">{{ _("Total") }}</p>
+        </div>
+      </template>
+      {% for slice in widget_data.slices %}
+      <template x-if="active === {{ loop.index0 }}">
+        <div>
+          <p class="text-lg font-semibold text-foreground">{{ slice.percent }}%</p>
+          <p class="text-[11px] text-muted-foreground">{{ slice.label }}</p>
+        </div>
+      </template>
+      {% endfor %}
+    </div>
+  </div>
+  <ul class="w-full space-y-1 text-sm">
+    {% for slice in widget_data.slices %}
+    <li class="flex items-center justify-between gap-2 rounded-md px-2 py-1 transition-colors"
+        :class="active === {{ loop.index0 }} ? 'bg-muted/50' : ''"
+        @mouseenter="active = {{ loop.index0 }}" @mouseleave="active = null">
+      <span class="flex items-center gap-2 text-foreground">
+        <span class="h-2.5 w-2.5 shrink-0 rounded-full bg-{{ slice.color }}"></span>
+        {{ slice.label }}
+      </span>
+      <span class="text-muted-foreground">{{ slice.value }} <span class="text-muted-foreground">&middot; {{ slice.percent }}%</span></span>
+    </li>
+    {% endfor %}
+    {% if not widget_data.slices %}
+    <li class="text-sm text-muted-foreground">{{ _("No data.") }}</li>
+    {% endif %}
+  </ul>
+</div>

polyadmin/templates/admin/widgets/metric.html

@@ -0,0 +1 @@
+<p class="{{ ui('text', 'metric') }}">{{ widget_data.value }}</p>

polyadmin/templates/admin/widgets/progress.html

@@ -0,0 +1,7 @@
+<div class="mb-1 flex justify-between text-sm text-muted-foreground">
+  <span>{{ widget_data.value }} / {{ widget_data.target }}</span>
+  <span>{{ widget_data.percent }}%</span>
+</div>
+<div class="{{ ui('widget', 'bar-track') }}">
+  <div class="{{ ui('widget', 'bar-fill') }}" style="width: {{ widget_data.percent }}%"></div>
+</div>

polyadmin/templates/admin/widgets/stat.html

@@ -0,0 +1,22 @@
+{# Headline number plus period-over-period change.
+
+   Green/red here are deliberate, unlike in widgets/donut.html which
+   avoids them: a delta really is a good/bad signal, so it reads in the
+   same colours as a success/danger toast. The arrow carries the
+   direction too, so the meaning survives for anyone who cannot separate
+   the two hues. #}
+{% from "admin/components/icons.html" import icon %}
+<div class="flex items-end justify-between gap-3">
+  <p class="{{ ui('text', 'metric') }}">{{ widget_data.value }}</p>
+  {% if widget_data.direction == "up" %}
+  <span class="inline-flex shrink-0 items-center gap-0.5 text-sm font-medium text-emerald-600 dark:text-emerald-400">
+    {{ icon("arrow-up", "h-4 w-4") }}{{ widget_data.delta }}%
+  </span>
+  {% elif widget_data.direction == "down" %}
+  <span class="inline-flex shrink-0 items-center gap-0.5 text-sm font-medium text-destructive">
+    {{ icon("arrow-down", "h-4 w-4") }}{{ widget_data.delta }}%
+  </span>
+  {% else %}
+  <span class="shrink-0 text-sm font-medium text-muted-foreground">{{ _("no change") }}</span>
+  {% endif %}
+</div>

polyadmin/templates/admin/widgets/table.html

@@ -0,0 +1,29 @@
+{# The card's own body (dashboard.html) is the scroll box, so this
+   template adds no overflow container of its own -- a nested one would
+   put a second scrollbar inside the card. The header sticks to the top of
+   that box, so the columns stay readable while a long widget scrolls.
+
+   That box scrolls vertically only, so the cells wrap (and break a long
+   unbroken value, such as an address) instead of holding their line and
+   pushing the card sideways. #}
+<table class="min-w-full text-sm">
+  <thead class="sticky top-0 z-10 bg-card">
+    <tr class="border-b border-border">
+      {% for column in widget_data.columns %}
+      <th class="{{ ui('table', 'th-compact') }}">{{ _(column) }}</th>
+      {% endfor %}
+    </tr>
+  </thead>
+  <tbody class="divide-y divide-border">
+    {% for row in widget_data.rows %}
+    <tr class="hover:bg-muted/50">
+      {% for column in widget_data.columns %}
+      <td class="px-2 py-1.5 text-foreground break-words">{{ row[column] }}</td>
+      {% endfor %}
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+{% if not widget_data.rows %}
+<p class="text-sm text-muted-foreground">{{ _("No data.") }}</p>
+{% endif %}

polyadmin/templates/admin/widgets/tabs.html

@@ -0,0 +1,34 @@
+{# Container widget: several widgets in one card, one visible at a
+   time.
+
+   Each panel is rendered through the same `{% include widget.template %}`
+   the dashboard uses for a top-level widget. The `{% with %}` scope is
+   what makes that safe to nest: it rebinds `widget_data` for the
+   included template only, so the outer widget's own data is still
+   intact for the next panel (and for a Tabs inside a Tabs).
+
+   Only panels after the first carry x-cloak, so with Alpine still
+   loading the first stays visible and the rest hidden: the card
+   degrades to its default tab rather than to everything at once.
+
+   `active` is compared against a loop index, never a label, so nothing
+   dynamic reaches an Alpine expression. #}
+<div x-data="{ active: 0 }">
+  {% if widget_data.panels %}
+  <div class="{{ ui('tabs', 'underline-list') }}" role="tablist">
+    {% for panel in widget_data.panels %}
+    <button type="button" role="tab" @click="active = {{ loop.index0 }}"
+            :aria-selected="active === {{ loop.index0 }}"
+            :class="active === {{ loop.index0 }} ? '{{ ui('tabs', 'underline-trigger-on') }}' : '{{ ui('tabs', 'underline-trigger-off') }}'"
+            class="{{ ui('tabs', 'underline-trigger') }}">{{ _(panel.label) }}</button>
+    {% endfor %}
+  </div>
+  {% for panel in widget_data.panels %}
+  <div role="tabpanel" x-show="active === {{ loop.index0 }}"{% if not loop.first %} x-cloak{% endif %}>
+    {% with widget_data = panel.widget.get_data() %}{% include panel.widget.template %}{% endwith %}
+  </div>
+  {% endfor %}
+  {% else %}
+  <p class="text-sm text-muted-foreground">{{ _("No panels configured.") }}</p>
+  {% endif %}
+</div>

polyadmin/templates/admin/widgets/timeline.html

@@ -0,0 +1,21 @@
+{# Dated-event feed drawn as a rail of dots.
+
+   The dots are absolutely positioned against the <ol>, which owns the
+   rail (border-l); -left-[4.5px] centers a 2-unit (8px) dot over that
+   1px border. #}
+{% if widget_data.entries %}
+<ol class="relative ml-1 space-y-4 border-l border-border">
+  {% for entry in widget_data.entries %}
+  <li class="ml-4">
+    <span class="absolute -left-[4.5px] mt-1.5 h-2 w-2 rounded-full bg-border ring-2 ring-background"></span>
+    {% if entry.time %}<time class="text-xs text-muted-foreground">{{ entry.time }}</time>{% endif %}
+    <p class="text-sm font-medium text-foreground">{{ entry.title }}</p>
+    {% if entry.description %}
+    <p class="mt-0.5 text-sm text-muted-foreground">{{ entry.description }}</p>
+    {% endif %}
+  </li>
+  {% endfor %}
+</ol>
+{% else %}
+<p class="text-sm text-muted-foreground">{{ _("No recent activity.") }}</p>
+{% endif %}