administratum 0.2.4

data/app/assets/javascripts/administratum.js

@@ -0,0 +1,250 @@
+// Administratum runtime: islands, offcanvas panels, dropdowns, confirmations,
+// flash messages and the light/dark toggle. Plain ES module, no dependencies.
+// Behaviour is attached with event delegation, so it survives Turbo page swaps.
+
+function install() {
+const ISLAND_SELECTOR = "[data-administratum-island]"
+const THEME_KEY = "administratum-theme"
+
+// ---------------------------------------------------------------- islands --
+
+const islands = new Map()
+const mounted = new Map()
+
+function readProps(el) {
+  const script = el.querySelector(':scope > script[type="application/json"]')
+  if (!script) return {}
+  try {
+    return JSON.parse(script.textContent || "{}")
+  } catch (error) {
+    console.error(`[administratum] invalid props for island "${el.dataset.administratumIsland}"`, error)
+    return {}
+  }
+}
+
+function mountIslands(root = document) {
+  root.querySelectorAll(ISLAND_SELECTOR).forEach((el) => {
+    if (mounted.has(el)) return
+    const mount = islands.get(el.dataset.administratumIsland)
+    if (!mount) return
+
+    const props = readProps(el)
+    const teardown = mount(el, props)
+    mounted.set(el, typeof teardown === "function" ? teardown : null)
+    el.dataset.administratumMounted = "true"
+  })
+}
+
+function unmountIslands() {
+  mounted.forEach((teardown, el) => {
+    try {
+      if (teardown) teardown()
+    } catch (error) {
+      console.error("[administratum] island teardown failed", error)
+    }
+    delete el.dataset.administratumMounted
+  })
+  mounted.clear()
+}
+
+// register("chapter-editor", (el, props) => { ...; return () => cleanup() })
+function register(name, mount) {
+  islands.set(name, mount)
+  if (document.readyState !== "loading") mountIslands()
+}
+
+// --------------------------------------------------------------- offcanvas --
+
+let lastTrigger = null
+
+function openPanel(name, trigger) {
+  const panel = document.querySelector(`[data-adm-offcanvas="${CSS.escape(name)}"]`)
+  if (!panel) return
+  lastTrigger = trigger || null
+  panel.hidden = false
+  document.documentElement.classList.add("adm-scroll-lock")
+  requestAnimationFrame(() => {
+    panel.classList.add("adm-offcanvas-open")
+    const focusable = panel.querySelector("input:not([type=hidden]), select, textarea, button:not([data-adm-offcanvas-close])")
+    if (focusable) focusable.focus()
+  })
+}
+
+function closePanels() {
+  document.querySelectorAll(".adm-offcanvas-open").forEach((panel) => {
+    panel.classList.remove("adm-offcanvas-open")
+    panel.hidden = true
+  })
+  document.documentElement.classList.remove("adm-scroll-lock")
+  if (lastTrigger) lastTrigger.focus()
+  lastTrigger = null
+}
+
+// --------------------------------------------------------------- dropdowns --
+
+function closeDropdowns(except) {
+  document.querySelectorAll("[data-adm-dropdown]").forEach((dropdown) => {
+    if (dropdown === except) return
+    const menu = dropdown.querySelector("[data-adm-dropdown-menu]")
+    const toggle = dropdown.querySelector("[data-adm-dropdown-toggle]")
+    if (menu) menu.hidden = true
+    if (toggle) toggle.setAttribute("aria-expanded", "false")
+  })
+}
+
+// ------------------------------------------------------------------- theme --
+
+const darkQuery = window.matchMedia("(prefers-color-scheme: dark)")
+
+function storedTheme() {
+  try {
+    const value = localStorage.getItem(THEME_KEY)
+    return value === "dark" || value === "light" ? value : null
+  } catch (_error) {
+    return null
+  }
+}
+
+function applyTheme(theme) {
+  const root = document.documentElement
+  root.classList.remove("dark", "light")
+  root.classList.add(theme)
+}
+
+function currentTheme() {
+  return document.documentElement.classList.contains("dark") ? "dark" : "light"
+}
+
+function toggleTheme() {
+  const next = currentTheme() === "dark" ? "light" : "dark"
+  applyTheme(next)
+  try {
+    localStorage.setItem(THEME_KEY, next)
+  } catch (_error) {
+    // Storage unavailable (private mode); the choice lasts for this page only.
+  }
+}
+
+// Follow the OS setting until the viewer picks a theme themselves.
+darkQuery.addEventListener("change", (event) => {
+  if (!storedTheme()) applyTheme(event.matches ? "dark" : "light")
+})
+
+// ------------------------------------------------------------------- flash --
+
+function scheduleFlashDismissal(root = document) {
+  root.querySelectorAll("[data-adm-flash]:not([data-adm-flash-scheduled])").forEach((el) => {
+    el.dataset.admFlashScheduled = "true"
+    setTimeout(() => el.remove(), 6000)
+  })
+}
+
+// ------------------------------------------------------------------ events --
+
+document.addEventListener("click", (event) => {
+  const target = event.target instanceof Element ? event.target : null
+  if (!target) return
+
+  const opener = target.closest("[data-adm-offcanvas-open]")
+  if (opener) {
+    event.preventDefault()
+    openPanel(opener.dataset.admOffcanvasOpen, opener)
+    return
+  }
+
+  if (target.closest("[data-adm-offcanvas-close]")) {
+    event.preventDefault()
+    closePanels()
+    return
+  }
+
+  const dropdownToggle = target.closest("[data-adm-dropdown-toggle]")
+  if (dropdownToggle) {
+    const dropdown = dropdownToggle.closest("[data-adm-dropdown]")
+    const menu = dropdown.querySelector("[data-adm-dropdown-menu]")
+    const willOpen = menu.hidden
+    closeDropdowns(dropdown)
+    menu.hidden = !willOpen
+    dropdownToggle.setAttribute("aria-expanded", String(willOpen))
+    return
+  }
+  if (!target.closest("[data-adm-dropdown]")) closeDropdowns()
+
+  const toggle = target.closest("[data-adm-toggle]")
+  if (toggle) {
+    const el = document.getElementById(toggle.dataset.admToggle)
+    if (el) {
+      const open = el.classList.toggle("adm-open")
+      toggle.setAttribute("aria-expanded", String(open))
+    }
+    return
+  }
+
+  if (target.closest("[data-adm-theme-toggle]")) {
+    toggleTheme()
+    return
+  }
+
+  const dismiss = target.closest("[data-adm-dismiss]")
+  if (dismiss) dismiss.parentElement.remove()
+})
+
+document.addEventListener("keydown", (event) => {
+  if (event.key !== "Escape") return
+  closePanels()
+  closeDropdowns()
+})
+
+// Forms with data-adm-confirm ask before submitting (button_to delete etc.).
+document.addEventListener("submit", (event) => {
+  const form = event.target
+  if (!(form instanceof HTMLFormElement)) return
+  const message = form.dataset.admConfirm
+  if (message && !window.confirm(message)) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+}, true)
+
+function boot() {
+  mountIslands()
+  scheduleFlashDismissal()
+}
+
+document.addEventListener("DOMContentLoaded", boot)
+document.addEventListener("turbo:load", boot)
+document.addEventListener("turbo:before-render", () => {
+  closePanels()
+  unmountIslands()
+})
+if (document.readyState !== "loading") boot()
+
+// ------------------------------------------------------------------ public --
+
+const Administratum = window.Administratum || {}
+Administratum.loaded = true
+const queued = (Administratum.islands && Administratum.islands.queue) || []
+
+Administratum.islands = {
+  register,
+  mount: mountIslands,
+  unmount: unmountIslands
+}
+Administratum.csrfToken = () => document.querySelector('meta[name="csrf-token"]')?.content
+Administratum.openPanel = openPanel
+Administratum.closePanels = closePanels
+
+window.Administratum = Administratum
+
+// Islands registered before this script ran:
+// (window.Administratum ||= { islands: { queue: [] } }).islands.queue.push([name, fn])
+queued.forEach(([name, mount]) => register(name, mount))
+
+return Administratum
+}
+
+// Loading this file twice (e.g. a host bundle that also imports it) would bind
+// every listener twice and replace the island registry, so only install once.
+const Administratum = window.Administratum && window.Administratum.loaded ? window.Administratum : install()
+
+export default Administratum

data/app/assets/tailwind/administratum/components.css

@@ -0,0 +1,199 @@
+/* Administratum components. Every colour comes from a --color-adm-* token. */
+
+@layer base {
+  .adm-body {
+    @apply min-h-screen bg-adm-bg font-adm text-sm text-adm-text antialiased;
+  }
+
+  .adm-scroll-lock {
+    @apply overflow-hidden;
+  }
+}
+
+@layer components {
+  /* Layout ---------------------------------------------------------------- */
+  .adm-container { @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8; }
+  .adm-main { @apply flex flex-col pb-12; }
+  .adm-page-body { @apply flex flex-col gap-6 pt-6; }
+  .adm-grid { @apply grid gap-4 sm:grid-cols-2 lg:grid-cols-4; }
+  .adm-sr-only { @apply sr-only; }
+  .adm-muted { @apply text-adm-muted; }
+
+  /* Top bar and navigation ------------------------------------------------ */
+  .adm-topbar { @apply border-b border-adm-border bg-adm-surface; }
+  .adm-topbar-inner { @apply flex h-14 items-center gap-3; }
+  .adm-brand { @apply flex items-center gap-2 font-semibold text-adm-text no-underline; }
+  .adm-brand-name { @apply text-base tracking-tight; }
+  .adm-logo { @apply h-7 w-auto; }
+  .adm-topbar-actions { @apply ml-auto flex items-center gap-1; }
+
+  .adm-nav { @apply hidden border-b border-adm-border bg-adm-surface md:block; }
+  .adm-nav.adm-open { @apply block; }
+  .adm-nav-list { @apply -mb-px flex flex-col gap-1 py-2 md:flex-row md:gap-6 md:py-0; }
+  .adm-nav-link {
+    @apply block border-b-2 border-transparent py-3 font-medium text-adm-muted no-underline transition-colors hover:text-adm-text;
+  }
+  .adm-nav-link-active { @apply border-adm-primary text-adm-text; }
+
+  .adm-dropdown { @apply relative; }
+  .adm-dropdown-menu {
+    @apply absolute right-0 z-30 mt-2 min-w-44 overflow-hidden rounded-adm border border-adm-border bg-adm-surface py-1 shadow-lg;
+  }
+  .adm-dropdown-item {
+    @apply block w-full cursor-pointer px-4 py-2 text-left text-adm-text hover:bg-adm-surface-muted;
+  }
+
+  /* Page header ----------------------------------------------------------- */
+  .adm-page-header { @apply border-b border-adm-border bg-adm-surface; }
+  .adm-page-header-inner { @apply flex flex-wrap items-end gap-4 py-5; }
+  .adm-page-heading { @apply min-w-0 flex-1; }
+  .adm-page-title { @apply truncate text-xl font-semibold tracking-tight text-adm-text; }
+  .adm-page-actions { @apply flex flex-wrap items-center gap-2; }
+  .adm-breadcrumb { @apply mb-1 flex flex-wrap items-center gap-1.5 text-xs text-adm-muted; }
+  .adm-breadcrumb-item a { @apply text-adm-muted no-underline hover:text-adm-text; }
+  .adm-breadcrumb-item + .adm-breadcrumb-item::before { content: "/"; @apply mr-1.5 text-adm-border; }
+
+  /* Cards ----------------------------------------------------------------- */
+  .adm-card { @apply overflow-hidden rounded-adm border border-adm-border bg-adm-surface shadow-xs; }
+  .adm-card-header { @apply flex items-center justify-between gap-4 border-b border-adm-border px-5 py-3.5; }
+  .adm-card-title { @apply text-base font-semibold text-adm-text; }
+  .adm-card-body { @apply p-5; }
+  .adm-card-footer { @apply border-t border-adm-border bg-adm-surface-muted px-5 py-3; }
+  .adm-tile { @apply flex flex-col gap-1 p-5 no-underline transition-shadow hover:shadow-md; }
+  .adm-tile-label { @apply text-adm-muted; }
+  .adm-tile-value { @apply text-2xl font-semibold text-adm-text tabular-nums; }
+
+  /* Buttons --------------------------------------------------------------- */
+  .adm-btn {
+    @apply inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-adm border px-3.5 py-2 text-sm font-medium whitespace-nowrap no-underline transition-colors focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-adm-ring disabled:cursor-not-allowed disabled:opacity-50;
+  }
+  .adm-btn-primary { @apply border-adm-primary bg-adm-primary text-adm-primary-fg hover:opacity-90; }
+  .adm-btn-secondary { @apply border-adm-border bg-adm-surface text-adm-text hover:bg-adm-surface-muted; }
+  .adm-btn-danger { @apply border-adm-border bg-adm-surface text-adm-danger hover:border-adm-danger hover:bg-adm-danger hover:text-adm-danger-fg; }
+  .adm-btn-ghost { @apply border-transparent bg-transparent text-adm-text hover:bg-adm-surface-muted; }
+  .adm-btn-sm { @apply px-2.5 py-1 text-xs; }
+  .adm-btn-block { @apply w-full; }
+  .adm-btn-group { @apply flex items-center justify-end gap-1; }
+  .adm-inline-form { @apply inline-flex; }
+  .adm-icon-btn {
+    @apply inline-flex size-9 cursor-pointer items-center justify-center rounded-adm text-lg text-adm-muted hover:bg-adm-surface-muted hover:text-adm-text focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-adm-ring;
+  }
+  .adm-icon { @apply size-5; }
+  .adm-link { @apply font-medium text-adm-primary no-underline hover:underline; }
+
+  /* Tables ---------------------------------------------------------------- */
+  .adm-table-wrap { @apply overflow-x-auto; }
+  .adm-table { @apply w-full border-collapse text-left; }
+  .adm-table th {
+    @apply border-b border-adm-border bg-adm-surface-muted px-4 py-2.5 text-xs font-semibold tracking-wide whitespace-nowrap text-adm-muted uppercase;
+  }
+  .adm-table th a { @apply text-adm-muted no-underline hover:text-adm-text; }
+  .adm-table td { @apply border-b border-adm-border px-4 py-3 align-middle; }
+  .adm-table tbody tr:last-child td { @apply border-b-0; }
+  .adm-table tbody tr:hover td { @apply bg-adm-surface-muted; }
+  .adm-table-actions { @apply w-px whitespace-nowrap text-right; }
+  .adm-table-footer { @apply flex flex-wrap items-center justify-between gap-3; }
+  .adm-empty { @apply py-10 text-center text-adm-muted; }
+
+  .adm-tabs { @apply -mb-2 flex flex-wrap gap-x-6 gap-y-1 border-b border-adm-border; }
+  .adm-tab {
+    @apply -mb-px inline-flex items-center gap-2 border-b-2 border-transparent py-2 font-medium text-adm-muted no-underline hover:text-adm-text;
+  }
+  .adm-tab-active { @apply border-adm-primary text-adm-text; }
+  .adm-tab-count { @apply rounded-full bg-adm-surface-muted px-2 py-0.5 text-xs text-adm-muted; }
+  .adm-pagy .pagy { @apply flex items-center gap-1; }
+  .adm-pagy .pagy a {
+    @apply rounded-adm px-2.5 py-1 text-adm-text no-underline hover:bg-adm-surface;
+  }
+  .adm-pagy .pagy a.current,
+  .adm-pagy .pagy a[aria-current="page"] { @apply bg-adm-primary text-adm-primary-fg; }
+  .adm-pagy .pagy a:not([href]) { @apply text-adm-muted; }
+
+  /* Attributes (show page) ------------------------------------------------ */
+  .adm-attributes { @apply divide-y divide-adm-border; }
+  .adm-attribute { @apply grid gap-1 px-5 py-3 sm:grid-cols-[12rem_1fr] sm:gap-6; }
+  .adm-attribute dt { @apply font-medium text-adm-muted; }
+  .adm-attribute dd { @apply min-w-0 break-words text-adm-text; }
+
+  /* Forms ----------------------------------------------------------------- */
+  .adm-form { @apply flex flex-col gap-5; }
+  .adm-form-flush { @apply gap-0; }
+  .adm-form .field_with_errors { display: contents; }
+  .adm-form-errors { @apply px-6 pt-6; }
+  .adm-form-body { @apply flex flex-col gap-6 p-6; }
+
+  /* Stacked field: label above control (custom forms, panels, sign in). */
+  .adm-field { @apply flex flex-col gap-2; }
+  /* Horizontal field: label column beside the control, one row per field. */
+  .adm-field-horizontal {
+    @apply gap-2 sm:grid sm:grid-cols-[minmax(0,13rem)_minmax(0,1fr)] sm:gap-x-8;
+  }
+  .adm-field-label { @apply flex flex-col sm:pt-2.5; }
+  .adm-field-control { @apply flex w-full max-w-3xl min-w-0 flex-col gap-2; }
+  .adm-field-row { @apply flex gap-2; }
+  .adm-label { @apply font-medium text-adm-text; }
+  .adm-required { @apply ml-0.5 text-adm-danger; }
+  .adm-hint { @apply text-xs leading-relaxed text-adm-muted; }
+  .adm-error { @apply text-xs font-medium text-adm-danger; }
+  .adm-input {
+    @apply block min-h-10 w-full rounded-adm border border-adm-border bg-adm-surface px-3.5 py-2 text-sm text-adm-text shadow-xs transition-colors placeholder:text-adm-muted/70 focus:border-adm-primary focus:outline-none focus:ring-3 focus:ring-adm-ring;
+  }
+  textarea.adm-input { @apply min-h-24 leading-relaxed; }
+  select[multiple].adm-input { @apply py-1.5; }
+  /* Safari ignores padding and height on natively styled selects, so draw
+     our own: no native appearance, and a chevron made of two token-coloured
+     gradients (a data-URI SVG would need a hard-coded colour). */
+  select.adm-input:not([multiple]) {
+    @apply appearance-none bg-no-repeat pr-9;
+    background-image:
+      linear-gradient(45deg, transparent 50%, var(--color-adm-muted) 50%),
+      linear-gradient(135deg, var(--color-adm-muted) 50%, transparent 50%);
+    background-position: calc(100% - 1.125rem) 52%, calc(100% - 0.8125rem) 52%;
+    background-size: 0.3125rem 0.3125rem;
+  }
+  .adm-field-invalid .adm-input { @apply border-adm-danger; }
+  .adm-checkbox { @apply size-4.5 rounded accent-adm-primary; }
+  .adm-field-horizontal .adm-field-control > .adm-checkbox { @apply sm:mt-3; }
+  /* Buttons line up with the control column of horizontal fields. */
+  .adm-form-actions {
+    @apply flex flex-wrap items-center gap-2 border-t border-adm-border bg-adm-surface-muted px-6 py-4 sm:pl-[16.5rem];
+  }
+  .adm-check { @apply flex items-center gap-2 text-adm-text; }
+  .adm-code { @apply font-adm-mono text-xs; }
+  .adm-form-footer { @apply flex flex-wrap items-center gap-2; }
+
+  .adm-alert { @apply rounded-adm border border-adm-danger/40 bg-adm-danger/10 px-4 py-3 text-adm-text; }
+  .adm-alert-title { @apply mb-1 font-semibold text-adm-danger; }
+  .adm-alert ul { @apply list-disc pl-5; }
+
+  .adm-badge { @apply inline-flex items-center rounded-full bg-adm-surface-muted px-2 py-0.5 text-xs font-medium text-adm-muted; }
+  .adm-badge-success { @apply bg-adm-success/15 text-adm-success; }
+
+  /* Offcanvas panels ------------------------------------------------------ */
+  .adm-offcanvas { @apply fixed inset-0 z-40; }
+  .adm-offcanvas-backdrop { @apply absolute inset-0 bg-adm-overlay opacity-0 transition-opacity duration-200; }
+  .adm-offcanvas-panel {
+    @apply absolute inset-y-0 right-0 flex w-full max-w-sm translate-x-full flex-col bg-adm-surface shadow-xl transition-transform duration-200;
+  }
+  .adm-offcanvas-open .adm-offcanvas-backdrop { @apply opacity-100; }
+  .adm-offcanvas-open .adm-offcanvas-panel { @apply translate-x-0; }
+  .adm-offcanvas-header { @apply flex items-center justify-between border-b border-adm-border px-5 py-3.5; }
+  .adm-offcanvas-body { @apply flex-1 overflow-y-auto p-5; }
+
+  /* Flash ----------------------------------------------------------------- */
+  .adm-flash-stack { @apply pointer-events-none fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-2 px-4; }
+  .adm-flash {
+    @apply pointer-events-auto flex max-w-lg items-center gap-3 rounded-adm border px-4 py-2.5 shadow-lg;
+  }
+  .adm-flash-notice { @apply border-adm-border bg-adm-text text-adm-surface; }
+  .adm-flash-alert { @apply border-adm-danger bg-adm-danger text-adm-danger-fg; }
+  .adm-flash-close { @apply cursor-pointer text-lg leading-none opacity-70 hover:opacity-100; }
+
+  /* Authentication -------------------------------------------------------- */
+  .adm-auth { @apply flex items-center justify-center px-4 py-16; }
+  .adm-auth-panel { @apply flex w-full max-w-sm flex-col gap-6; }
+  .adm-auth-brand { @apply text-center text-xl font-semibold text-adm-text; }
+  .adm-auth-title { @apply mb-4 text-lg font-semibold text-adm-text; }
+  .adm-auth-lead { @apply mb-4; }
+  .adm-auth-footer { @apply mt-4 text-center; }
+}

data/app/assets/tailwind/administratum/index.css

@@ -0,0 +1,8 @@
+/* Entry point for the bundled stylesheet (bin/build-css). */
+@import "tailwindcss" source(none);
+@import "./theme.css";
+@import "./components.css";
+
+@source "../../../views";
+@source "../../../helpers";
+@source "../../javascripts";

data/app/assets/tailwind/administratum/theme.css

@@ -0,0 +1,62 @@
+/*
+ * Administratum design tokens. Override any of them in your own @theme (host
+ * Tailwind mode), with config.theme in the initializer, or with plain CSS on
+ * :root. Components only ever reference these variables.
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-adm-bg: oklch(0.975 0.004 255);
+  --color-adm-surface: oklch(1 0 0);
+  --color-adm-surface-muted: oklch(0.965 0.006 255);
+  --color-adm-border: oklch(0.91 0.008 255);
+  --color-adm-text: oklch(0.24 0.02 260);
+  --color-adm-muted: oklch(0.52 0.02 260);
+  --color-adm-primary: oklch(0.52 0.18 262);
+  --color-adm-primary-fg: oklch(0.99 0 0);
+  --color-adm-danger: oklch(0.56 0.2 25);
+  --color-adm-danger-fg: oklch(0.99 0 0);
+  --color-adm-success: oklch(0.58 0.14 155);
+  --color-adm-warning: oklch(0.75 0.15 75);
+  --color-adm-ring: oklch(0.52 0.18 262 / 0.35);
+  --color-adm-overlay: oklch(0.2 0.02 260 / 0.45);
+
+  --radius-adm: 0.5rem;
+  --font-adm: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-adm-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+@layer theme {
+  /* Native controls (checkboxes, selects, date pickers) follow the theme. */
+  :root { color-scheme: light dark; }
+  :root.light { color-scheme: light; }
+
+  :root.dark {
+    color-scheme: dark;
+    --color-adm-bg: oklch(0.18 0.012 260);
+    --color-adm-surface: oklch(0.23 0.014 260);
+    --color-adm-surface-muted: oklch(0.27 0.014 260);
+    --color-adm-border: oklch(0.33 0.014 260);
+    --color-adm-text: oklch(0.93 0.008 260);
+    --color-adm-muted: oklch(0.7 0.015 260);
+    --color-adm-primary: oklch(0.68 0.15 262);
+    --color-adm-primary-fg: oklch(0.16 0.02 260);
+    --color-adm-ring: oklch(0.68 0.15 262 / 0.4);
+    --color-adm-overlay: oklch(0.05 0 0 / 0.6);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light) {
+      --color-adm-bg: oklch(0.18 0.012 260);
+      --color-adm-surface: oklch(0.23 0.014 260);
+      --color-adm-surface-muted: oklch(0.27 0.014 260);
+      --color-adm-border: oklch(0.33 0.014 260);
+      --color-adm-text: oklch(0.93 0.008 260);
+      --color-adm-muted: oklch(0.7 0.015 260);
+      --color-adm-primary: oklch(0.68 0.15 262);
+      --color-adm-primary-fg: oklch(0.16 0.02 260);
+      --color-adm-ring: oklch(0.68 0.15 262 / 0.4);
+      --color-adm-overlay: oklch(0.05 0 0 / 0.6);
+    }
+  }
+}

data/app/controllers/administratum/application_controller.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Administratum
+  class ApplicationController < Administratum.config.parent_controller.constantize
+    protect_from_forgery with: :exception
+
+    layout "administratum/application"
+
+    helper Administratum::ApplicationHelper
+    Administratum.config.helpers.each { |mod| helper mod }
+
+    before_action :authenticate_admin!
+
+    helper_method :current_admin
+
+    private
+
+    def current_admin
+      current_administratum_user
+    end
+
+    # Not Devise's authenticate_*! helper: that redirects through Devise's
+    # failure app, which assumes Devise's own routes and controllers.
+    def authenticate_admin!
+      return if warden.authenticate(scope: :administratum_user)
+
+      store_location_for(:administratum_user, request.fullpath) if request.get? && is_navigational_format?
+      redirect_to administratum.sign_in_path, alert: t("administratum.sessions.unauthenticated")
+    end
+  end
+end

data/app/controllers/administratum/dashboard_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Administratum
+  class DashboardController < ApplicationController
+    def index; end
+  end
+end

data/app/controllers/administratum/page.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Administratum
+  # Base class for custom pages declared in app/admin: a controller with a
+  # menu entry and its own route, for reports, tools and anything that isn't
+  # CRUD on one model. Templates are looked up in app/views/admin/<route_key>
+  # first; the default index renders the page header and a `_content` partial.
+  class Page < ApplicationController
+    extend Administratum::PageDSL
+    include Pagy::Backend
+
+    helper_method :definition, :page_class, :page_path, :action_path
+
+    def index; end
+
+    # Same as Resource: point host-defined pages at the engine's url helpers.
+    def self.inherited(subclass)
+      super
+      subclass.include(Administratum::Engine.routes.url_helpers)
+      subclass.include(Administratum::Engine.routes.mounted_helpers)
+    end
+
+    def self.controller_path
+      name.nil? || abstract_page? ? super : "administratum/pages/#{controller_id}"
+    end
+
+    private
+
+    def _prefixes
+      @_prefixes ||= ["#{Administratum.config.view_prefix}/#{page_class.route_key}", "administratum/pages"]
+    end
+
+    def page_class
+      self.class
+    end
+
+    def definition
+      page_class.definition
+    end
+
+    def page_path(**)
+      public_send(:"#{page_class.route_key}_page_path", **)
+    end
+
+    # Path for a page_action. The second argument keeps the signature buttons use for resources.
+    def action_path(name, _record = nil, **)
+      definition.custom_actions.fetch(name.to_sym)
+      public_send(:"#{name}_#{page_class.route_key}_page_path", **)
+    end
+  end
+end

data/app/controllers/administratum/password_resets_controller.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Administratum
+  class PasswordResetsController < ApplicationController
+    layout "administratum/authentication"
+
+    skip_before_action :authenticate_admin!
+
+    def new; end
+
+    # Responds the same whether or not the address exists, so the form can't
+    # be used to discover admin emails.
+    def create
+      user = Administratum::User.find_for_authentication(email: params[:email].to_s)
+      if user
+        token = user.send(:set_reset_password_token)
+        Administratum::UserMailer.with(user:, token:).reset_password.deliver_later
+      end
+      redirect_to administratum.sign_in_path, notice: t("administratum.password_resets.sent")
+    end
+
+    def edit
+      @token = params[:token]
+    end
+
+    def update
+      @token = params[:token]
+      user = Administratum::User.reset_password_by_token(
+        reset_password_token: @token,
+        password: params[:password],
+        password_confirmation: params[:password_confirmation]
+      )
+
+      if user.errors.empty?
+        redirect_to administratum.sign_in_path, notice: t("administratum.password_resets.updated")
+      else
+        @errors = user.errors.full_messages
+        render :edit, status: :unprocessable_content
+      end
+    end
+  end
+end