porting to the use of penguinui5

assets/views/macros/ui.html

@@ -129,3 +129,50 @@
 {% macro radio(name, value="", id="", checked=false, attrs="", extra="") -%}
 <input {% if id %}id="{{ id }}" {% endif %}name="{{ name }}" type="radio" value="{{ value }}"{% if checked %} checked{% endif %} class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-outline bg-surface before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-on-primary checked:border-primary checked:bg-primary checked:before:visible focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark dark:before:bg-on-primary-dark dark:checked:border-primary-dark dark:checked:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark {{ extra }}" {{ attrs | safe }}/>
 {%- endmacro radio %}
+
+{# ---- Table chrome. The same wrapper/thead/tbody/row/tfoot class strings were
+   copy-pasted across 5 admin/shop tables; centralized here so the styling has a
+   single source of truth. Tera has no slot/{% raw %}{% call %}{% endraw %} mechanism, so cells stay
+   inline (their content varies too much to macro-ize: images, htmx forms, Alpine
+   inputs, badges) and these macros expose just the shared CLASS STRINGS used as
+   `class="{{ ui::thead_cls() }}"`. Adopts Penguin default-table.html's
+   `w-full overflow-x-auto` wrapper so wide tables scroll on mobile.
+
+   Skeleton:
+     <div class="{{ ui::table_wrap_cls() }}">
+       <table class="{{ ui::table_cls() }}">
+         <thead class="{{ ui::thead_cls() }}"><tr>{{ ui::th(label="Name") }}{{ ui::th(label="Total", align="text-right") }}</tr></thead>
+         <tbody class="{{ ui::tbody_cls() }}">
+           <tr class="{{ ui::row_cls() }}"><td class="px-4 py-3">…</td></tr>   {# row_cls = hover; omit for non-interactive rows #}
+         </tbody>
+       </table>
+     </div>  #}
+{% macro table_wrap_cls() -%}
+overflow-hidden w-full overflow-x-auto rounded-radius border border-outline dark:border-outline-dark
+{%- endmacro table_wrap_cls %}
+
+{% macro table_cls() -%}
+w-full text-left text-sm
+{%- endmacro table_cls %}
+
+{% macro thead_cls() -%}
+border-b border-outline bg-surface-alt text-xs uppercase tracking-wide text-on-surface/70 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/70
+{%- endmacro thead_cls %}
+
+{% macro tbody_cls() -%}
+divide-y divide-outline dark:divide-outline-dark
+{%- endmacro tbody_cls %}
+
+{% macro row_cls() -%}
+hover:bg-surface-alt dark:hover:bg-surface-dark-alt
+{%- endmacro row_cls %}
+
+{% macro tfoot_cls() -%}
+border-t border-outline dark:border-outline-dark
+{%- endmacro tfoot_cls %}
+
+{# Header cell. align ∈ "" (left, default) | "text-right". Pass label="" for the
+   empty actions column. #}
+{% macro th(label, align="") -%}
+<th class="px-4 py-3 font-semibold{% if align %} {{ align }}{% endif %}">{{ label }}</th>
+{%- endmacro th %}