@geekity/cms 0.20.0 → 0.22.0

package/README.md

@@ -1880,6 +1880,29 @@ flash messages. A message queued with `flash(c, 'notice', '…')` is kept on the
 session row, shown on the next page the browser asks for, and cleared as it is
 read, so it survives exactly one redirect.
 
+### The admin's look
+
+The admin is drawn in DaisyUI 5 on Tailwind v4 (decision-30). Its stylesheet,
+`admin/static/admin.css`, is compiled at build time from `admin/src/admin.css`
+and ships in the package like the default theme's. It carries every built-in
+DaisyUI theme, with `light` as the default and `dark` when the system prefers
+dark. A site cannot override it or add a theme of its own.
+
+The admin bar is the same component on the admin and across the top of every
+public page a signed-in user reads: a `<geekity-admin-bar>` element holding a
+declarative shadow root, so neither the site theme nor the admin's theme
+reaches inside it. It draws in a light or a dark palette of its own, following
+the user's admin theme. On a public page it pushes the page down by
+`--geekity-admin-bar-height` and adds the `geekity-admin-bar` class to
+`<html>` for a theme that needs to make room of its own.
+
+Each user picks the theme the admin is drawn in for themselves, on their own
+screen under Users: any built-in DaisyUI theme, or Follow the system. The
+choice is stored as `adminTheme` on the user in `data/users.json`, and every
+admin page drawn for that user carries it as `data-theme` on `<html>`. Following
+the system stores nothing and puts no `data-theme` on the page. The login,
+setup, forgot-password and reset screens never carry one.
+
 ### The menu
 
 The menu is WordPress classic: twelve sections — Dashboard, Posts, Pages,

package/admin/components/admin-bar.njk

@@ -1,13 +1,33 @@
-{# The admin bar, in the admin and across the top of the public site alike
-   (TASK-126, TASK-183). The site title leads to `siteHref` and `barLinks` are
-   the shortcuts beside it, both chosen by each place for itself: the admin's
-   title leads to the dashboard, the public site's home (TASK-257). The account
-   menu ends it.
+{# The admin bar (decision-30), on every signed-in admin screen and every
+   public page a signed-in user reads. The context it takes:
+   - `siteHref` and `barLinks`: the admin's title leads to the dashboard, the
+     public site's home (TASK-257).
+   - `me`, `logoutUrl` and `csrfToken`, for the account menu that ends it.
+   - `barScheme`, `adminColorScheme` of the user's admin theme; `auto` puts no
+     data-scheme on the host.
+   - `cspNonce`, on the admin only.
+   - `assetPrefix`, where static/admin-bar.js is served from.
 
    WordPress's "Howdy," menu, greeting the way this site's owner does. A
    popover rather than a script: the browser opens and closes it, shuts it on
    Escape or a click elsewhere, and tells a screen reader whether it is
-   expanded, all under the admin CSP's script-src 'self'. #}
+   expanded.
+
+   The offset stylesheet makes room for the fixed bar, and the bar's script
+   replaces the height with the one it measures. The margin is on <html>, as
+   under WordPress's bar, so a theme's own padding is left alone; `!important`
+   outlasts a reset such as `html, body { margin: 0 }`, and `:where()` lets a
+   theme with a sticky header of its own keep its scroll padding. #}
+{% set HOST_STYLE = "all: initial; display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 99999" -%}
+<style id="geekity-admin-bar-offset"{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>
+:root { --geekity-admin-bar-height: 40px; }
+@media (max-width: 600px) { :root { --geekity-admin-bar-height: 80px; } }
+html { margin-top: var(--geekity-admin-bar-height) !important; }
+:where(html) { scroll-padding-top: var(--geekity-admin-bar-height); }
+</style><geekity-admin-bar
+  {%- if barScheme == 'light' or barScheme == 'dark' %} data-scheme="{{ barScheme }}"{% endif %}
+  {%- if not cspNonce %} style="{{ HOST_STYLE }}"{% endif %}><template shadowrootmode="open"><style{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>:host { {{ HOST_STYLE }}; }
+{% include "static/admin-bar.css" %}</style>
 <nav class="admin-bar" aria-label="Admin bar">
   <a class="admin-bar-site" href="{{ siteHref }}">{{ site.title }}</a>
   {% for link in barLinks %}
@@ -25,3 +45,4 @@
     </div>
   {% endif %}
 </nav>
+<script src="{{ assetPrefix }}admin-bar.js" defer></script></template></geekity-admin-bar>

package/admin/components/alert.njk

@@ -0,0 +1,28 @@
+{# An alert: `{% call alert(…) %}body{% endcall %}` emits
+   `<div role="alert" class="alert">body</div>`. The body is markup.
+
+   Modifiers, each a name from a closed set that maps to DaisyUI classes:
+
+     color      info, success, warning, error
+     style      outline, dash, soft
+     direction  vertical, horizontal, or responsive (stacked on a phone,
+                in a row from `sm` up)
+
+   A value outside its set is a render error.
+
+   `labelledby` names the id of the heading inside the body. `focus` adds
+   `tabindex="-1"` and `autofocus`; only one element on a page may ask for it.
+   `polite` makes it `role="status"`, read out when the reader is next idle
+   rather than at once. #}
+
+{% set COLORS = { info: 'alert-info', success: 'alert-success', warning: 'alert-warning', error: 'alert-error' } %}
+{% set STYLES = { outline: 'alert-outline', dash: 'alert-dash', soft: 'alert-soft' } %}
+{% set DIRECTIONS = {
+  vertical: 'alert-vertical',
+  horizontal: 'alert-horizontal',
+  responsive: 'alert-vertical sm:alert-horizontal'
+} %}
+
+{% macro alert(color=none, style=none, direction=none, labelledby='', focus=false, polite=false) -%}
+<div role="{{ 'status' if polite else 'alert' }}"{% if labelledby %} aria-labelledby="{{ labelledby }}"{% endif %}{% if focus %} tabindex="-1" autofocus{% endif %} class="alert{{ COLORS | modifier(color) }}{{ STYLES | modifier(style) }}{{ DIRECTIONS | modifier(direction) }}">{{ caller() }}</div>
+{%- endmacro %}

package/admin/components/badge.njk

@@ -0,0 +1,58 @@
+{# A badge: `badge(label, …)` emits
+   `<span class="badge badge-outline badge-sm">label</span>`, outlined when it
+   is given no colour and no style. The label is escaped.
+
+   Modifiers, each a name from a closed set that maps to one DaisyUI class:
+
+     color  neutral, primary, secondary, accent, info, success, warning, error
+     style  outline, dash, soft, ghost
+     size   xs, sm (the default), md, lg, xl
+
+   A value outside its set is a render error.
+
+   `status(name, label)` is the badge for the state a row is in, coloured by
+   `STATUSES` below; the label is escaped. A name outside that set is a
+   render error. #}
+
+{% set COLORS = {
+  neutral: 'badge-neutral',
+  primary: 'badge-primary',
+  secondary: 'badge-secondary',
+  accent: 'badge-accent',
+  info: 'badge-info',
+  success: 'badge-success',
+  warning: 'badge-warning',
+  error: 'badge-error'
+} %}
+{% set STYLES = { outline: 'badge-outline', dash: 'badge-dash', soft: 'badge-soft', ghost: 'badge-ghost' } %}
+{% set SIZES = { xs: 'badge-xs', sm: 'badge-sm', md: 'badge-md', lg: 'badge-lg', xl: 'badge-xl' } %}
+
+{% macro badge(label, color=none, style=none, size='sm') -%}
+<span class="badge{% if not color and not style %} badge-outline{% endif %}{{ COLORS | modifier(color) }}{{ STYLES | modifier(style) }}{{ SIZES | modifier(size) }}">{{ label }}</span>
+{%- endmacro %}
+
+{% set STATUSES = {
+  published: 'badge-outline',
+  approved: 'badge-outline',
+  accepted: 'badge-outline',
+  described: 'badge-outline',
+  decorative: 'badge-outline',
+  active: 'badge-primary',
+  unread: 'badge-primary',
+  connected: 'badge-success',
+  scheduled: 'badge-info',
+  draft: 'badge-warning',
+  pending: 'badge-warning',
+  missing: 'badge-warning',
+  unreachable: 'badge-warning',
+  failed: 'badge-error',
+  rejected: 'badge-error',
+  spam: 'badge-error',
+  hidden: 'badge-ghost',
+  trashed: 'badge-ghost',
+  disconnected: 'badge-ghost'
+} %}
+
+{% macro status(name, label) -%}
+<span class="badge badge-sm{{ STATUSES | modifier(name) }}">{{ label }}</span>
+{%- endmacro %}

package/admin/components/button.njk

@@ -0,0 +1,56 @@
+{# A button, and a link drawn as one.
+
+   `button(label, …)` emits `<button type="button" class="btn btn-sm">`, and
+   `buttonLink(label, href, …)` emits `<a class="btn btn-sm" href>`.
+
+   Each takes the same modifiers:
+
+     color   neutral, primary, secondary, accent, info, success, warning, error
+     style   outline, dash, soft, ghost, link
+     size    xs, sm (the default), md, lg, xl
+     shape   wide, block, square, circle
+     active  true draws it pressed
+
+   A value outside its set is a render error.
+   `button` also takes `type` (button, unless it submits), `id`, `name`,
+   `value`, `formaction`, `formtarget`, `formnovalidate`, `popovertarget`,
+   `disabled` and `hidden`. The label is escaped. #}
+
+{% set COLORS = {
+  neutral: 'btn-neutral',
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  accent: 'btn-accent',
+  info: 'btn-info',
+  success: 'btn-success',
+  warning: 'btn-warning',
+  error: 'btn-error'
+} %}
+{% set STYLES = { outline: 'btn-outline', dash: 'btn-dash', soft: 'btn-soft', ghost: 'btn-ghost', link: 'btn-link' } %}
+{% set SIZES = { xs: 'btn-xs', sm: 'btn-sm', md: 'btn-md', lg: 'btn-lg', xl: 'btn-xl' } %}
+{% set SHAPES = { wide: 'btn-wide', block: 'btn-block', square: 'btn-square', circle: 'btn-circle' } %}
+
+{% macro button(
+  label,
+  type='button',
+  color=none,
+  style=none,
+  size='sm',
+  shape=none,
+  active=false,
+  id='',
+  name='',
+  value='',
+  formaction='',
+  formtarget='',
+  formnovalidate=false,
+  popovertarget='',
+  disabled=false,
+  hidden=false
+) -%}
+<button type="{{ type }}"{% if id %} id="{{ id }}"{% endif %} class="btn{{ COLORS | modifier(color) }}{{ STYLES | modifier(style) }}{{ SIZES | modifier(size) }}{{ SHAPES | modifier(shape) }}{% if active %} btn-active {%- endif %}"{% if name %} name="{{ name }}"{% endif %}{% if value %} value="{{ value }}"{% endif %}{% if formaction %} formaction="{{ formaction }}"{% endif %}{% if formtarget %} formtarget="{{ formtarget }}"{% endif %}{% if formnovalidate %} formnovalidate{% endif %}{% if popovertarget %} popovertarget="{{ popovertarget }}"{% endif %}{% if disabled %} disabled{% endif %}{% if hidden %} hidden{% endif %}>{{ label }}</button>
+{%- endmacro %}
+
+{% macro buttonLink(label, href, color=none, style=none, size='sm', shape=none, active=false) -%}
+<a class="btn{{ COLORS | modifier(color) }}{{ STYLES | modifier(style) }}{{ SIZES | modifier(size) }}{{ SHAPES | modifier(shape) }}{% if active %} btn-active {%- endif %}" href="{{ href }}">{{ label }}</a>
+{%- endmacro %}

package/admin/components/card.njk

@@ -0,0 +1,40 @@
+{# A card.
+
+   `{% call card(title=…) %}body{% endcall %}` emits
+
+     <div class="card bg-base-100 shadow-sm">
+       <div class="card-body">
+         <h2 class="card-title">title</h2>
+         body
+       </div>
+     </div>
+
+   The title is escaped and left out when there is none; the body is markup.
+
+   Modifiers, each a name from a closed set that maps to one DaisyUI class:
+
+     size   xs, sm, md, lg, xl
+     style  border, dash
+
+   A value outside its set is a render error.
+
+   `{% call cardActions() %}…{% endcall %}`, inside a card's body, is the row
+   of buttons at its foot: `<div class="card-actions justify-end">`. #}
+
+{% set SIZES = { xs: 'card-xs', sm: 'card-sm', md: 'card-md', lg: 'card-lg', xl: 'card-xl' } %}
+{% set STYLES = { border: 'card-border', dash: 'card-dash' } %}
+
+{% macro card(title='', size=none, style=none) -%}
+<div class="card bg-base-100 shadow-sm{{ SIZES | modifier(size) }}{{ STYLES | modifier(style) }}">
+  <div class="card-body">
+    {% if title %}
+    <h2 class="card-title">{{ title }}</h2>
+    {% endif %}
+    {{ caller() }}
+  </div>
+</div>
+{%- endmacro %}
+
+{% macro cardActions() -%}
+<div class="card-actions justify-end">{{ caller() }}</div>
+{%- endmacro %}

package/admin/components/collapse.njk

@@ -0,0 +1,36 @@
+{# A collapse: a heading that shows and hides what is under it.
+
+   `{% call collapse(title, …) %}body{% endcall %}` emits
+
+     <details class="collapse collapse-arrow border border-base-300 bg-base-100">
+       <summary class="collapse-title font-semibold">title</summary>
+       <div class="collapse-content">body</div>
+     </details>
+
+   `open` starts it open. The title is escaped; the body is markup.
+   `fields` wraps the body in a `<fieldset>` whose `sr-only` legend repeats
+   the title.
+
+   Modifiers:
+
+     icon  arrow (the default), plus
+
+   A value outside its set is a render error. #}
+
+{% set ICONS = { arrow: 'collapse-arrow', plus: 'collapse-plus' } %}
+
+{% macro collapse(title, open=false, fields=false, icon='arrow') -%}
+<details class="collapse{{ ICONS | modifier(icon) }} border border-base-300 bg-base-100"{% if open %} open{% endif %}>
+  <summary class="collapse-title font-semibold">{{ title }}</summary>
+  <div class="collapse-content">
+    {% if fields %}
+    <fieldset class="flex min-w-0 flex-col gap-1">
+      <legend class="sr-only">{{ title }}</legend>
+      {{ caller() }}
+    </fieldset>
+    {% else %}
+    {{ caller() }}
+    {% endif %}
+  </div>
+</details>
+{%- endmacro %}

package/admin/components/copy.njk

@@ -0,0 +1,20 @@
+{# A value to copy: a readonly box, and a button that copies what it holds.
+
+   `copyField(id, label, value)` emits
+
+     <label class="sr-only" for="id">label</label>
+     <div class="join w-full">
+       <input id="id" type="text" value="value" readonly class="input input-sm join-item w-full" />
+       <button type="button" class="btn btn-sm join-item" data-copy="id" hidden>Copy</button>
+     </div>
+
+   The button stays `hidden` until `static/copy.js` reveals it. Label and
+   value are escaped. #}
+
+{% macro copyField(id, label, value) -%}
+<label class="sr-only" for="{{ id }}">{{ label }}</label>
+<div class="join w-full">
+  <input id="{{ id }}" type="text" value="{{ value }}" readonly class="input input-sm join-item w-full min-w-48" />
+  <button type="button" class="btn btn-sm join-item" data-copy="{{ id }}" hidden>Copy</button>
+</div>
+{%- endmacro %}

package/admin/components/dropdown.njk

@@ -0,0 +1,32 @@
+{# A dropdown: a button that opens its body as a popover.
+
+   `{% call dropdown(id, label, …) %}body{% endcall %}` emits
+
+     <button type="button" class="btn btn-sm" popovertarget="id">label</button>
+     <div class="dropdown rounded-box bg-base-100 z-1 w-52 shadow-sm" popover id="id">
+       body
+     </div>
+
+   `id` must be unique on the page. The body is markup. The label is escaped.
+
+   The trigger is `button` from `components/button.njk` and takes its
+   `color`, `style` and `size` (sm by default). `placement` is start, center,
+   end, top, bottom, left or right, each mapping to its `dropdown-*` class. A
+   value outside its set is a render error. #}
+
+{% from "components/button.njk" import button %}
+
+{% set PLACEMENTS = {
+  start: 'dropdown-start',
+  center: 'dropdown-center',
+  end: 'dropdown-end',
+  top: 'dropdown-top',
+  bottom: 'dropdown-bottom',
+  left: 'dropdown-left',
+  right: 'dropdown-right'
+} %}
+
+{% macro dropdown(id, label, color=none, style=none, size='sm', placement=none) -%}
+{{ button(label, color=color, style=style, size=size, popovertarget=id) }}
+<div class="dropdown rounded-box bg-base-100 z-1 w-52 shadow-sm{{ PLACEMENTS | modifier(placement) }}" popover id="{{ id }}">{{ caller() }}</div>
+{%- endmacro %}

package/admin/components/fields.njk

@@ -1,4 +1,4 @@
-{# One labelled box, written once.
+{# One labelled box, written once, in DaisyUI's form components.
 
    Every admin form used to spell out its own `<label for>`, control, hint and
    error, roughly seventy-five times across sixteen templates, against a class
@@ -7,21 +7,34 @@
    forget the error line, leave a label unbound, or invent a class the
    stylesheet has never heard of, and nothing says it is wrong.
 
-   Each macro here emits the same four things in the same order:
+   Each macro here emits one `fieldset` holding the same four things in the
+   same order:
 
-     1. the `<label for>`, bound to the control by its id,
-     2. the control,
+     1. the `<label for>`, bound to the control by its id, drawn as the
+        field's `fieldset-legend`,
+     2. the control: `input`, `textarea`, `select` or `checkbox`, small, the
+        width of its column, and a `validator` when the form refused it,
      3. the field error, where the form has something to say about this box,
-     4. the hint, where the field needs explaining.
+        as the `validator-hint` that a refused control turns red,
+     4. the hint, where the field needs explaining, as a `label`.
+
+   DaisyUI's `fieldset` and `fieldset-legend` are classes on a `<div>` and a
+   `<label>` here, not a `<fieldset>` and `<legend>`, which name a group
+   rather than one control.
 
    Error before hint, because that is the order every screen already used: the
    sentence about what went wrong belongs next to the box it is about, and the
    standing explanation sits under both.
 
-   This file is under the packaged admin directory, which is the admin
-   environment's only search root (`src/admin/templates.ts`). A site's theme
-   can override any public template and cannot reach in here, so no theme can
-   shadow or break a field on the login form.
+   This file is under the admin directory, which is the admin environment's
+   only search root (`src/admin/templates.ts`). A site's theme can override
+   any public template and cannot reach in here, so no theme can shadow or
+   break a field on the login form.
+
+   `hintId` gives the hint an id and names it in the control's
+   `aria-describedby`, after the error where there is one, so a screen reader
+   reads the explanation with the box rather than leaving it to be found. A
+   textarea given no `name` only shows something and posts nothing.
 
    `label` and `hint` are written into the page as markup, because the admin's
    labels and hints carry `<code>`, `<em>` and links. They are template
@@ -30,19 +43,25 @@
    interpolates before this ever sees it. `error` is a message from the server
    and is escaped. #}
 
+{% from "components/alert.njk" import alert %}
+
 {# The field error, then the hint: the two paragraphs every macro below ends
-   with. `errorHtml` is the rare second thing a field has to say — the Reading
-   page's "that page is no longer published" — already written as its own
-   paragraph. #}
-{% macro _below(id, hint, error, errorHtml) %}
+   with. The error is a `validator-hint`, which DaisyUI shows through a
+   sibling combinator after a `.validator[aria-invalid]`, so it has to stay
+   that control's later sibling. `errorHtml` is the rare second thing a field
+   has to say — the Reading page's "that page is no longer published" —
+   already written as its own paragraph, and drawn in the error colour whether
+   or not the form was refused. The hint is a `label` made `block` and
+   `whitespace-normal`: DaisyUI's is `inline-flex` and `nowrap`. #}
+{% macro _below(id, hint, error, errorHtml, hintId='') %}
 {% if error %}
-  <p class="admin-field-error" id="{{ id }}-error">{{ error }}</p>
+  <p class="validator-hint" id="{{ id }}-error">{{ error }}</p>
 {% endif %}
 {% if errorHtml %}
-{{ errorHtml | safe }}
+  <div class="text-error">{{ errorHtml | safe }}</div>
 {% endif %}
 {% if hint %}
-  <p class="admin-hint">{{ hint | safe }}</p>
+  <p class="label block whitespace-normal"{% if hintId %} id="{{ hintId }}"{% endif %}>{{ hint | safe }}</p>
 {% endif %}
 {% endmacro %}
 
@@ -50,8 +69,8 @@
    invalid, and which paragraph says why, so a screen reader reads the message
    with the field rather than leaving it to be found. `errorHtml` is not named
    here: it is a standing note about the stored value, not a refusal. #}
-{% macro _invalid(id, error) -%}
-{% if error %} aria-invalid="true" aria-describedby="{{ id }}-error"{% endif %}
+{% macro _invalid(id, error, hintId='') -%}
+{% if error %} aria-invalid="true" aria-describedby="{{ id }}-error{% if hintId %} {{ hintId }}{% endif %}"{% elif hintId %} aria-describedby="{{ hintId }}"{% endif %}
 {%- endmacro %}
 
 {# A box somebody types into: text, email, number, or whatever `type` says.
@@ -67,20 +86,25 @@
   hint='',
   error='',
   errorHtml='',
+  hintId='',
   min='',
   step='',
   inputmode='',
   autocomplete='',
   placeholder='',
+  list='',
+  maxlength='',
   spellcheck='',
   required=false,
   autofocus=false,
   readonly=false,
   disabled=false
 ) %}
-  <label for="{{ id }}">{{ label | safe }}</label>
-  <input id="{{ id }}" name="{{ name }}" type="{{ type }}"{% if min %} min="{{ min }}"{% endif %}{% if step %} step="{{ step }}"{% endif %}{% if inputmode %} inputmode="{{ inputmode }}"{% endif %}{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %} value="{{ value }}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }} />
-{{ _below(id, hint, error, errorHtml) }}
+<div class="fieldset">
+  <label class="fieldset-legend" for="{{ id }}">{{ label | safe }}</label>
+  <input id="{{ id }}" name="{{ name }}" type="{{ type }}"{% if min %} min="{{ min }}"{% endif %}{% if step %} step="{{ step }}"{% endif %}{% if inputmode %} inputmode="{{ inputmode }}"{% endif %}{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %} value="{{ value }}"{% if list %} list="{{ list }}"{% endif %}{% if maxlength %} maxlength="{{ maxlength }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error, hintId) }} class="input input-sm w-full read-only:bg-base-200 read-only:border-dashed{% if error %} validator{% endif %}" />
+{{ _below(id, hint, error, errorHtml, hintId) }}
+</div>
 {%- endmacro %}
 
 {# A password box. It carries `value=""` and no way to set one: nothing typed
@@ -100,9 +124,11 @@
   required=false,
   autofocus=false
 ) %}
-  <label for="{{ id }}">{{ label | safe }}</label>
-  <input id="{{ id }}" name="{{ name }}" type="password" value=""{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{{ _invalid(id, error) }} />
+<div class="fieldset">
+  <label class="fieldset-legend" for="{{ id }}">{{ label | safe }}</label>
+  <input id="{{ id }}" name="{{ name }}" type="password" value=""{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{{ _invalid(id, error) }} class="input input-sm w-full{% if error %} validator{% endif %}" />
 {{ _below(id, hint, error, errorHtml) }}
+</div>
 {%- endmacro %}
 
 {# A box of several lines. #}
@@ -114,6 +140,7 @@
   hint='',
   error='',
   errorHtml='',
+  hintId='',
   rows='',
   spellcheck='',
   required=false,
@@ -121,9 +148,11 @@
   readonly=false,
   disabled=false
 ) %}
-  <label for="{{ id }}">{{ label | safe }}</label>
-  <textarea id="{{ id }}" name="{{ name }}"{% if rows %} rows="{{ rows }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }}>{{ value }}</textarea>
-{{ _below(id, hint, error, errorHtml) }}
+<div class="fieldset">
+  <label class="fieldset-legend" for="{{ id }}">{{ label | safe }}</label>
+  <textarea id="{{ id }}"{% if name %} name="{{ name }}"{% endif %}{% if rows %} rows="{{ rows }}"{% endif %}{% if spellcheck %} spellcheck="{{ spellcheck }}"{% endif %}{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if readonly %} readonly{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error, hintId) }} class="textarea textarea-sm w-full read-only:bg-base-200 read-only:border-dashed{% if error %} validator{% endif %}">{{ value }}</textarea>
+{{ _below(id, hint, error, errorHtml, hintId) }}
+</div>
 {%- endmacro %}
 
 {# A list to pick from. The options are the call's body, because which of them
@@ -140,20 +169,22 @@
   hint='',
   error='',
   errorHtml='',
+  hintId='',
   required=false,
   autofocus=false,
   disabled=false
 ) %}
-  <label for="{{ id }}">{{ label | safe }}</label>
-  <select id="{{ id }}" name="{{ name }}"{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }}>
+<div class="fieldset">
+  <label class="fieldset-legend" for="{{ id }}">{{ label | safe }}</label>
+  <select id="{{ id }}" name="{{ name }}"{% if required %} required{% endif %}{% if autofocus %} autofocus{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error, hintId) }} class="select select-sm w-full{% if error %} validator{% endif %}">
 {{ caller() }}
   </select>
-{{ _below(id, hint, error, errorHtml) }}
+{{ _below(id, hint, error, errorHtml, hintId) }}
+</div>
 {%- endmacro %}
 
-{# A switch. The label follows the box rather than heading it, which is what a
-   tick beside a sentence reads as, and `admin-check` is the class the
-   stylesheet lays that pair out with. #}
+{# A switch: the tick inside its label. A refused box puts `validator` on
+   the label, since the `validator-hint` must be its later sibling. #}
 {% macro checkbox(
   id,
   name,
@@ -163,20 +194,23 @@
   hint='',
   error='',
   errorHtml='',
+  hintId='',
   disabled=false
 ) %}
-  <p class="admin-check">
-    <input id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ value }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error) }} />
-    <label for="{{ id }}">{{ label | safe }}</label>
-  </p>
-{{ _below(id, hint, error, errorHtml) }}
+<div class="fieldset">
+  <label class="label whitespace-normal text-base-content{% if error %} validator{% endif %}" for="{{ id }}">
+    <input id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ value }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}{{ _invalid(id, error, hintId) }} class="checkbox checkbox-sm" />
+    {{ label | safe }}
+  </label>
+{{ _below(id, hint, error, errorHtml, hintId) }}
+</div>
 {%- endmacro %}
 
 {# The top of a refused form: what went wrong, and a link to every field that
-   needs putting right. It is an alert and takes focus when the page loads, so
-   a screen reader hears it at once and a keyboard starts from it, with no
-   script. It comes before the form, so its `autofocus` is the first on the
-   page and wins over any a field carries.
+   needs putting right. It is an error alert and takes focus when the page
+   loads, so a screen reader hears it at once and a keyboard starts from it,
+   with no script. It comes before the form, so its `autofocus` is the first
+   on the page and wins over any a field carries.
 
    A form with one thing to say calls it bare, with the message as the heading.
    A form with fields to fix calls it with a `problem` per field; one given no
@@ -190,19 +224,21 @@
    fixed. #}
 {% macro summary(heading) %}
 {% set problems = (caller() if caller else '') | trim %}
-  <div class="admin-error admin-error-summary" role="alert" tabindex="-1" autofocus aria-labelledby="admin-error-summary-heading">
-    <h2 id="admin-error-summary-heading">{{ heading }}</h2>
+{% call alert(color='error', labelledby='admin-error-summary-heading', focus=true) %}
+  <div>
+    <h2 id="admin-error-summary-heading" class="font-semibold">{{ heading }}</h2>
 {% if problems %}
-    <ul>
+    <ul class="list-disc ps-5">
 {{ problems | safe }}
     </ul>
 {% endif %}
   </div>
+{% endcall %}
 {%- endmacro %}
 
 {# One field's line in the summary: its message, linking to the field. #}
 {% macro problem(id, message) %}
 {% if message %}
-      <li><a href="#{{ id }}">{{ message }}</a></li>
+      <li><a class="link" href="#{{ id }}">{{ message }}</a></li>
 {% endif %}
 {%- endmacro %}

package/admin/components/flash.njk

@@ -1,5 +1,12 @@
-{# Messages queued by the request that redirected here. They were cleared as
-   they were read, so this is the only page that shows them. #}
-{% for entry in flash %}
-  <p class="admin-flash admin-flash-{{ entry.kind }}" role="status">{{ entry.message }}</p>
-{% endfor %}
+{# Messages queued by the request that redirected here, one alert each in the
+   colour of its kind. They were cleared as they were read, so this is the only
+   page that shows them. #}
+{% from "components/alert.njk" import alert %}
+{% set KINDS = { notice: 'success', warning: 'warning', error: 'error' } %}
+{% if flash and flash.length %}
+<div class="mb-6 flex flex-col gap-2">
+  {% for entry in flash %}
+    {% call alert(color=KINDS[entry.kind], polite=true) %}<span>{{ entry.message }}</span>{% endcall %}
+  {% endfor %}
+</div>
+{% endif %}