@saasicat/ui-vue 0.24.2 → 0.26.0

package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue

@@ -132,11 +132,9 @@
                             v-if="row.liveVersion"
                             type="button"
                             class="sa-marketing-expand-btn"
-                            :title="
-                                expandedKey === row.plan.planKey
-                                    ? common.close
-                                    : msg.admin.expandTitle
-                            "
+                            :title="msg.admin.expandTitle"
+                            :aria-expanded="expandedKey === row.plan.planKey"
+                            :aria-controls="panelId(row)"
                             @click="$emit('toggle-expand', row)"
                         >
                             <span
@@ -158,7 +156,11 @@
                     </div>
                 </div>
 
-                <div v-if="expandedKey === row.plan.planKey" class="sa-marketing-admin-expand">
+                <div
+                    v-if="expandedKey === row.plan.planKey"
+                    :id="panelId(row)"
+                    class="sa-marketing-admin-expand"
+                >
                     <div class="sa-marketing-expand-grid">
                         <div class="sa-marketing-expand-col">
                             <div class="sa-marketing-expand-sec">
@@ -457,6 +459,7 @@
 </template>
 
 <script setup lang="ts">
+import { useId } from 'vue';
 import type { MarketingTopFeature, PlanRow, PlanVersionRow } from '@saasicat/types';
 import { identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
@@ -495,6 +498,41 @@ defineEmits<{
 const msg = useSaMessages('marketing');
 const common = useSaMessages('common');
 
+// sa-disclosure-exempt(writes `aria-expanded`):
+// this row is six grid cells, not a header that opens a body
+//
+// Every other disclosure in the package is an `AdminAccordion`. This one cannot
+// be, and the obstacle is structural rather than a matter of taste.
+//
+// The rows here are `display: contents` inside a six-column grid, and the open
+// editor is a sibling at `grid-column: 1 / -1` (both declared in
+// `MarketingCatalogPage.vue`). A self-contained wrapper around either would put
+// a box between the grid and its cells, and the columns would stop lining up.
+// A wrapper-less `AdminAccordion` variant would not rescue it either: the
+// component's recipe is a trigger that FILLS the header, and this header is six
+// cells carrying two checkboxes and two text inputs — interactive content
+// nested in a `<button>` is not valid HTML. What would be left of the component
+// after removing its wrapper, its full-width trigger, its badge and its body
+// padding is a second component wearing the first one's name.
+//
+// So the disclosure stays here, and what it takes from the shared one is the
+// part that has nothing to do with layout: the WAI-ARIA disclosure pattern —
+// a `<button>` (it already was one) that says whether it is expanded and which
+// element it controls. Not the `role="region"` half of `AdminAccordion`'s body:
+// its trigger is named by the row it opens, whereas this one is a bare chevron,
+// and a screenful of regions all named "Edit teaser, trial & top features"
+// would be worse than none.
+//
+// The title no longer flips to "Close" when open. `aria-expanded` says that
+// now, and a control whose NAME changes with its state is announced as a
+// different control each time.
+const uid = useId();
+
+/** The panel a row's chevron controls — unique per row, and per instance of this list. */
+function panelId(row: MarketingRow): string {
+    return `${uid}-marketing-panel-${row.plan.id}`;
+}
+
 /** Hint below the trial toggle — shows the auto CTA text for the set trial days. */
 function trialCtaHint(row: MarketingRow): string {
     const cta = formatMessage(msg.value.cta.trial, { days: row.m.trialDays });

package/src/pages-standard/marketing-catalog/MarketingCatalogPreview.vue

@@ -64,12 +64,18 @@
 
                     <div class="sa-marketing-card-price">
                         <template v-if="row.m.priceTag">
-                            <span class="sa-marketing-card-price-big" style="font-size: 22px">
+                            <span
+                                class="sa-marketing-card-price-big"
+                                style="font-size: var(--sa-text-2xl)"
+                            >
                                 {{ row.m.priceTag }}
                             </span>
                         </template>
                         <template v-else-if="!row.liveVersion">
-                            <span class="sa-marketing-card-price-big" style="font-size: 22px">
+                            <span
+                                class="sa-marketing-card-price-big"
+                                style="font-size: var(--sa-text-2xl)"
+                            >
                                 {{ msg.preview.priceOnRequest }}
                             </span>
                         </template>

package/src/pages-tenant/PackageSnapshotPanel.vue

@@ -95,16 +95,20 @@
                     color="primary"
                     :label="showRaw ? i18n.packageSnapshotHideRaw : i18n.packageSnapshotShowRaw"
                     :icon="showRaw ? 'expand_less' : 'expand_more'"
+                    :aria-expanded="showRaw"
+                    :aria-controls="rawId"
                     @click="showRaw = !showRaw"
                 />
-                <pre v-if="showRaw" class="sp-package-snapshot__raw-body">{{ rawJson }}</pre>
+                <pre v-if="showRaw" :id="rawId" class="sp-package-snapshot__raw-body">{{
+                    rawJson
+                }}</pre>
             </div>
         </q-card-section>
     </q-card>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, useId } from 'vue';
 import type { PackageSnapshotShape } from '../vue/use-tenant-billing.js';
 import type { TenantPlanSectionI18n } from './default-i18n.js';
 
@@ -125,7 +129,32 @@ interface Props {
 
 const props = defineProps<Props>();
 
+// sa-disclosure-exempt(toggles `showRaw`, writes `aria-expanded`):
+// a tenant-facing raw payload toggle, in a directory that is leaving
+//
+// The package has one disclosure, `AdminAccordion`, and every surface inside
+// the admin uses it. This one is outside the admin twice over.
+//
+// It is outside by AUDIENCE: `pages-tenant/*` renders inside the customer's own
+// application, for the paying tenant rather than the operator, and is planned
+// to ship as its own package with its own translations. Reaching into the
+// admin's component layer from here adds a dependency that the split would
+// have to unpick, for a card that is already built from Quasar's own.
+//
+// It is outside by SHAPE: `AdminAccordion` is a row in a list whose header
+// opens its body — the design guide calls the pattern "rows that open". This is
+// a `q-card` with a `<pre>` of raw JSON behind a link-styled button at its foot,
+// and wrapping that in an accordion card would seat a bordered card inside a
+// bordered card to say "this opens".
+//
+// What it does take from the shared one is the half that is not layout. A
+// `q-btn` was already a real `<button>` with a label — the accessibility gap
+// here was never the keyboard, only that nothing said the button expands
+// something or what it expands. `role="region"` is deliberately not copied: the
+// accordion's body is named by a trigger that carries the row's title, and this
+// trigger's name is "Show raw JSON".
 const showRaw = ref(false);
+const rawId = useId();
 
 const capturedAtIso = computed(() => {
     if (!props.snapshot) return null;

package/src/quasar/confirm.ts

@@ -0,0 +1,83 @@
+// Quasar implementation of the UI confirm port.
+//
+// The port is wired but not yet consumed by this package's own pages.
+// `createSuperAdminApp()` provides it under `SUPER_ADMIN_CONFIRM_KEY` and
+// `useSuperAdminConfirm()` below resolves it — but nothing under `src/` calls
+// that hook. Its only call site in the repository is
+// `tests-component/ui-confirm-port.test.ts`.
+//
+// The pages that do ask a yes/no question ask it in one of three other ways:
+// Quasar's `q.dialog()`, `window.confirm()`, or a dialog the page mounts
+// itself. Which page uses which shape moves as pages are reworked, so the
+// pages are not listed here — grepping those three shapes under
+// `src/pages-standard/` and `src/pages-tenant/` finds every one of them.
+//
+// Passing `createSuperAdminApp({ confirm })` therefore registers an
+// implementation and nothing more. It reaches exactly those pages that ask
+// through the port — an app's own, once they call `useSuperAdminConfirm()` or
+// inject `SUPER_ADMIN_CONFIRM_KEY` themselves — and none of this package's. By
+// the call-site note above, no page in this repository does either, the example
+// app included, so an integrator who passes the option and changes nothing else
+// replaces no confirmation at all. Moving the pages onto the hook is the page
+// migration; the "Confirm port" section of this package's README carries the
+// same caveat for integrators.
+//
+// The injection default keeps a page working that is mounted without
+// `createSuperAdminApp()` — and it is only safe as a default because it still
+// asks the operator. A default that resolved `{ ok: true }` would silently
+// approve every delete, revoke and deactivation.
+
+import { inject } from 'vue';
+import { Dialog, type QDialogOptions } from 'quasar';
+
+import {
+    SUPER_ADMIN_CONFIRM_KEY,
+    type UiConfirm,
+    type UiConfirmRequest,
+    type UiConfirmResult,
+} from '../vue/ui-confirm.js';
+
+/**
+ * Translates a request into Quasar's dialog options.
+ *
+ * Exported because it is the whole of the mapping and the only part of this
+ * file that can be checked without driving a real dialog.
+ */
+export function quasarConfirmOptions(request: UiConfirmRequest): QDialogOptions {
+    return {
+        title: request.title,
+        message: request.message,
+        cancel: request.cancelLabel,
+        ok: { label: request.confirmLabel, color: request.tone ?? 'primary' },
+        ...(request.prompt
+            ? {
+                  prompt: {
+                      model: request.prompt.initial ?? '',
+                      type: request.prompt.type ?? 'text',
+                  },
+              }
+            : {}),
+    };
+}
+
+/**
+ * Quasar-backed confirm port.
+ *
+ * `onOk` and `onCancel` are mutually exclusive and one of them always runs —
+ * dismissing with Escape or a backdrop click reaches `onCancel` — so the
+ * promise cannot be left hanging.
+ */
+export const quasarConfirm: UiConfirm = (request) =>
+    new Promise<UiConfirmResult>((resolve) => {
+        Dialog.create(quasarConfirmOptions(request))
+            .onOk((value: unknown) => {
+                // Without a `prompt` Quasar calls back with no argument at all.
+                resolve({ ok: true, value: typeof value === 'string' ? value : undefined });
+            })
+            .onCancel(() => resolve({ ok: false }));
+    });
+
+/** Returns the app-provided confirm port, falling back to the Quasar default. */
+export function useSuperAdminConfirm(): UiConfirm {
+    return inject(SUPER_ADMIN_CONFIRM_KEY, quasarConfirm);
+}

package/src/quasar/create-super-admin-app.ts

@@ -44,6 +44,13 @@ import {
     type SuperAdminLoginAdapter,
 } from '../vue/super-admin-context.js';
 import { SUPER_ADMIN_NOTIFY_KEY, type UiNotify } from '../vue/ui-notify.js';
+import { SUPER_ADMIN_CONFIRM_KEY, type UiConfirm } from '../vue/ui-confirm.js';
+import {
+    SUPER_ADMIN_RESOURCES_KEY,
+    createResourceRegistry,
+    type ResourceOverrides,
+} from '../vue/resource-registry.js';
+import { platformResources } from '../client/resources/index.js';
 import {
     SA_THEME_KEY,
     createSaTheme,
@@ -57,7 +64,9 @@ import {
     type SuperAdminI18nOptions,
 } from '../vue/use-super-admin-i18n.js';
 import { bindSaThemeToDocument } from './dark-bridge.js';
+import { resolveSuperAdminEndpoints } from '../vue/platform-loaders.js';
 import { quasarNotify } from './notify.js';
+import { quasarConfirm } from './confirm.js';
 
 export interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
     /** App root component (`App.vue`). */
@@ -100,6 +109,22 @@ export interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
      * center replace it here without touching the pages.
      */
     notify?: UiNotify;
+    /**
+     * Optional: confirm port for the standard pages' "are you sure" step.
+     * Default is the Quasar `Dialog` implementation — apps with their own
+     * modal system replace it here without touching the pages.
+     *
+     * An implementation must actually ask. Resolving `{ ok: true }` outright
+     * turns every guarded action into an unguarded one.
+     */
+    confirm?: UiConfirm;
+    /**
+     * Optional: per-resource adjustments to the platform's own endpoint
+     * definitions — a different path for one resource, a different transport,
+     * or a single operation wrapped. Everything not named keeps the platform
+     * implementation.
+     */
+    resourceOverrides?: ResourceOverrides<typeof platformResources>;
     /**
      * Optional: additional Vue plugins (e.g. an app's own NotificationCenter)
      * that are installed after the platform setup, before the mount.
@@ -123,7 +148,9 @@ export interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
      * Optional: colour scheme. Default follows the operating system and
      * remembers an explicit pick. The context is returned on the handle
      * (`handle.theme`) — set `handle.theme.scheme.value = 'dark'` to switch at
-     * runtime, and read it anywhere via `useSaTheme()`.
+     * runtime, and read it anywhere via `useSaTheme()`. The shell chrome
+     * renders a three-way switcher for it; `theme: { switcher: false }` drops
+     * it, as `i18n: { switcher: false }` drops the language one.
      *
      * Whatever it resolves to is mirrored onto `<html data-sa-theme>` AND into
      * Quasar's `Dark`, so the platform's surfaces and Quasar's own components
@@ -166,6 +193,31 @@ const DEFAULT_QUASAR_OPTIONS: QuasarPluginOptions = {
     config: { notify: { position: 'top-right', timeout: 3000 } },
 };
 
+/**
+ * Merges an app's Quasar options over the platform's, keeping the plugins the
+ * shell's own ports depend on.
+ *
+ * The bootstrap provides `quasarConfirm`, which calls `Dialog.create`, and the
+ * notify port's fallback calls `Notify.create`. Taking the app's options whole
+ * — as this did — left those uninstalled for anything passing
+ * `{ plugins: {}, … }`, a shape this package's own tests use: the first
+ * confirmation threw instead of asking, turning a guarded action into a broken
+ * one rather than a stricter one.
+ *
+ * An app's own entry still wins on a key collision, so its build of a plugin
+ * replaces the platform's.
+ *
+ * Exported because it is the whole of the decision, and the only part of the
+ * bootstrap that can be checked without driving a real Quasar install.
+ */
+export function resolveQuasarOptions(own?: Partial<QuasarPluginOptions>): QuasarPluginOptions {
+    if (!own) return DEFAULT_QUASAR_OPTIONS;
+    return {
+        ...own,
+        plugins: { ...DEFAULT_QUASAR_OPTIONS.plugins, ...own.plugins },
+    } as QuasarPluginOptions;
+}
+
 /**
  * Universal bootstrap function for SuperAdmin apps. Replaces the `main.ts`
  * boilerplate duplicated per app today (Quasar + Pinia + Router + manifest
@@ -188,7 +240,7 @@ export function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperA
     // theme already repaints its cards via `.sa-page`. What the class buys is
     // that an app which never calls `createSuperAdminApp` stays untouched —
     // which a bare `.q-dialog .q-card` rule could not promise.
-    const quasarOptions = options.quasarOptions ?? DEFAULT_QUASAR_OPTIONS;
+    const quasarOptions = resolveQuasarOptions(options.quasarOptions);
     // `globalNodes` is a documented Quasar config option that its TypeScript
     // types do not declare (see quasar/src/utils/private.config/nodes.js, which
     // reads `globalConfig.globalNodes.class`). The cast is the exception this
@@ -220,13 +272,8 @@ export function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperA
 
     app.use(router);
 
-    const endpoints: Required<SuperAdminEndpoints> = {
-        apiBase: options.endpoints.apiBase,
-        publicBootEndpoint:
-            options.endpoints.publicBootEndpoint ?? `${options.endpoints.apiBase}/boot`,
-        manifestEndpoint:
-            options.endpoints.manifestEndpoint ?? `${options.endpoints.apiBase}/manifest`,
-    };
+    const endpoints = resolveSuperAdminEndpoints(options.endpoints);
+    const http = options.http ?? defaultHttpClient();
 
     const i18n = createSuperAdminI18n(options.i18n);
     // An app that configured Quasar's dark mode has STATED a preference; the
@@ -261,6 +308,33 @@ export function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperA
     app.provide(SUPER_ADMIN_EXTENSIONS_KEY, options.extensions ?? {});
     app.provide(SUPER_ADMIN_ACTIONS_KEY, options.actions ?? {});
     app.provide(SUPER_ADMIN_NOTIFY_KEY, options.notify ?? quasarNotify);
+    app.provide(SUPER_ADMIN_CONFIRM_KEY, options.confirm ?? quasarConfirm);
+    // Only when the app named its client. `createResourceRegistry` refuses to
+    // be built without one, because a bare `fetch` sends every request without
+    // the app's Authorization header and the failure is silent. Handing it the
+    // `defaultHttpClient()` fallback here would have defeated exactly that
+    // guarantee from inside the bootstrap: existing pages would keep working
+    // through their own `getAuthToken` options while anything reaching for
+    // `useResource()` collected 401s.
+    //
+    // Without a client the registry is simply absent, and `useResource` says
+    // so — a named failure at the first call beats a page that renders empty.
+    if (options.http) {
+        app.provide(
+            SUPER_ADMIN_RESOURCES_KEY,
+            createResourceRegistry({
+                http: options.http,
+                // Read per call: the locale changes while the app runs.
+                context: () => ({
+                    apiBase: endpoints.apiBase,
+                    projectKey: endpoints.projectKey,
+                    locale: i18n.locale.value,
+                }),
+                resources: platformResources,
+                overrides: options.resourceOverrides,
+            }),
+        );
+    }
     if (options.manifestGuard?.getManifest) {
         app.provide(SUPER_ADMIN_MANIFEST_KEY, options.manifestGuard.getManifest);
     }
@@ -270,7 +344,7 @@ export function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperA
     if (options.loginAdapter) {
         app.provide(SUPER_ADMIN_LOGIN_ADAPTER_KEY, options.loginAdapter);
     }
-    app.provide(SUPER_ADMIN_HTTP_KEY, options.http ?? defaultHttpClient());
+    app.provide(SUPER_ADMIN_HTTP_KEY, http);
 
     for (const plugin of options.installPlugins ?? []) {
         plugin(app);

package/src/quasar/dark-bridge.ts

@@ -14,7 +14,7 @@
 import { Dark } from 'quasar';
 import { watch, type WatchStopHandle } from 'vue';
 
-import type { SaTheme } from '../vue/use-sa-theme.js';
+import type { SaColorScheme, SaTheme } from '../vue/use-sa-theme.js';
 
 /**
  * Mirrors a theme context onto the document and Quasar. Returns the stop
@@ -28,16 +28,27 @@ import type { SaTheme } from '../vue/use-sa-theme.js';
  * says is written to Quasar, including `Dark.set(false)`. So a caller that
  * bootstraps with Quasar already dark has to say so when it builds the theme,
  * or its own choice is erased one line after it was applied.
- * `createSuperAdminApp` does exactly that, seeding from `Dark.isActive`.
+ * `createSuperAdminApp` does exactly that, seeding the scheme from the
+ * `quasarOptions.config.dark` it was handed.
  */
 export function bindSaThemeToDocument(theme: SaTheme): WatchStopHandle {
+    // Raised only while this bridge is inside `Dark.set()`. It is what the
+    // write-back below reads to tell the bridge's own echo apart from a
+    // decision the application made — see the comment on that watcher.
+    let mirroring = false;
+
     const toQuasar = watch(
         theme.resolved,
         (resolved) => {
             if (typeof document !== 'undefined') {
                 document.documentElement.setAttribute('data-sa-theme', resolved);
             }
-            Dark.set(resolved === 'dark');
+            mirroring = true;
+            try {
+                Dark.set(resolved === 'dark');
+            } finally {
+                mirroring = false;
+            }
         },
         { immediate: true },
     );
@@ -48,15 +59,41 @@ export function bindSaThemeToDocument(theme: SaTheme): WatchStopHandle {
     // the half-dark screen the bridge exists to prevent, arriving from the
     // other direction.
     //
-    // No loop: the write-back only fires when Quasar and the theme actually
-    // disagree, and setting the scheme drives `resolved` to the value Quasar
-    // already has, so the outbound watcher's `Dark.set` is a no-op.
+    // `Dark.mode` rather than `Dark.isActive`, because the mode has the three
+    // states the scheme has and the flag has two. `Dark.set('auto')` is
+    // Quasar's spelling of 'system', and read through the flag it arrives as
+    // whatever the machine happens to say at that moment — so an operator who
+    // picked 'system' had it silently frozen into a hard 'light' or 'dark' by
+    // an app doing nothing wrong, and the tab stopped following the OS. The
+    // seed in `createSuperAdminApp` reads the same option for the same reason.
+    //
+    // No loop, and the question that closes it is "who wrote this?", not "does
+    // it look different?". The outbound leg mirrors 'system' into Quasar as the
+    // colour it currently resolves to, so a colour comparison cannot tell that
+    // echo apart from an application naming the same colour on purpose: moving
+    // a control from `set('auto')` to `set(true)` on a dark machine changes
+    // `Dark.mode` while the resolved colour stays 'dark'. Dropping that write
+    // left the pick on 'system' with nothing visibly wrong — until the next OS
+    // change moved a theme somebody had just fixed.
+    //
+    // `Dark.set()` assigns `Dark.mode` synchronously and this watcher runs on
+    // the sync flush, so the flag is still raised when the bridge's own write
+    // arrives here, and is down for every write that came from anywhere else.
+    //
+    // One case stays unanswerable, because Quasar leaves no trace of it: a
+    // `set(true)` while the mode is already `true` — an operator on 'system'
+    // and a dark machine, whose application then pins dark. Nothing in `Dark`
+    // changes, so there is no event to read and the pick stays 'system'. An
+    // application that wants that pick to stick sets `theme.scheme` instead.
     const fromQuasar = watch(
-        () => Dark.isActive,
-        (isDark) => {
-            const asScheme = isDark ? 'dark' : 'light';
-            if (theme.resolved.value !== asScheme) theme.scheme.value = asScheme;
+        () => Dark.mode,
+        (mode) => {
+            if (mirroring) return;
+            const picked: SaColorScheme =
+                mode === 'auto' ? 'system' : mode === true ? 'dark' : 'light';
+            if (theme.scheme.value !== picked) theme.scheme.value = picked;
         },
+        { flush: 'sync' },
     );
 
     return () => {

package/src/quasar/index.ts

@@ -10,3 +10,4 @@
 export * from './create-super-admin-app.js';
 export * from './dark-bridge.js';
 export * from './notify.js';
+export * from './confirm.js';

package/src/ui/theme/components/accordion.css

@@ -0,0 +1,118 @@
+/* Accordion — a header that opens a body (see AdminAccordion).
+ *
+ * Every value here was one of several. The survey that led to this file found
+ * three header paddings across the package (0, 10/12, 12/14), three body
+ * paddings (12, 14, 18/20/22), two radii (8 and 10), two colours for the open
+ * border (`accent` and `scheduled-border`), two transition durations, and hover
+ * feedback on one of six surfaces that all set `cursor: pointer`.
+ *
+ * The values below are the scale's, not the average of the six: a rung exists
+ * for each, so a literal here would be a fourth opinion rather than a decision.
+ */
+
+.sa-accordion {
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-head);
+    overflow: hidden;
+}
+
+/* The open card names itself with the accent rather than with a tone: which
+ * row is open is a position, not a status, and a status colour here would
+ * compete with the chips the header carries. */
+.sa-accordion--open {
+    border-color: var(--sa-color-accent);
+}
+
+.sa-accordion__head {
+    display: flex;
+    align-items: stretch;
+}
+
+/* The trigger fills the head so the whole row is the target — the affordance
+ * the `<div @click>` versions had, without giving up the button. */
+.sa-accordion__trigger {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--sa-space-4);
+    padding: var(--sa-space-4) var(--sa-space-5);
+    background: none;
+    border: 0;
+    font: inherit;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
+/* Hover feedback, which five of the six surfaces promised with `cursor` and
+ * only one delivered. */
+.sa-accordion__trigger:hover:not(:disabled) {
+    background: var(--sa-color-bg-sunken);
+}
+.sa-accordion__trigger:disabled {
+    cursor: not-allowed;
+}
+
+/* The badge that identifies the row.
+ *
+ * Three surfaces drew this three ways — a 34px accent-tinted square, a bare
+ * 22px glyph, and a bare 20px glyph coloured through a Quasar palette prop — so
+ * the same kind of row did not look like the same kind of row from one page to
+ * the next. The frame is the component's; only the glyph is the page's.
+ *
+ * Square-ish rather than round: a circle here would read as an avatar, and none
+ * of these rows is about a person. */
+.sa-accordion__mark {
+    flex: 0 0 auto;
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--sa-radius-field);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent-strong);
+}
+
+/* Only for a row whose state the badge itself should report. The size, radius
+ * and position do not move with it — that is what keeps it the same badge. */
+.sa-accordion__mark--negative {
+    background: var(--sa-color-negative-surface-strong);
+    color: var(--sa-color-negative-fg);
+}
+
+.sa-accordion__label {
+    flex: 1;
+    min-width: 0;
+}
+
+/* Points right when closed, down when open. Not `transform: rotate(90deg)` on a
+ * `chevron_down`: the resting state is the one a reader sees most, and a glyph
+ * that means "there is more this way" is the honest one to rest on. */
+.sa-accordion__chev {
+    flex: 0 0 auto;
+    color: var(--sa-color-fg-subtle);
+    transition: transform 0.15s;
+}
+.sa-accordion--open .sa-accordion__chev {
+    transform: rotate(90deg);
+}
+
+/* Outside the trigger, so a control here does not toggle the row. Padded on
+ * its own rather than by the trigger, or the two would share a hover surface
+ * and the row would look pressed while the pointer is on a button that does
+ * something else. */
+.sa-accordion__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--sa-space-3);
+    padding-right: var(--sa-space-5);
+}
+
+.sa-accordion__body {
+    padding: var(--sa-space-5);
+    border-top: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-sunken);
+}

package/src/ui/theme/index.css

@@ -40,3 +40,4 @@
 @import './components/card.css';
 @import './components/paginator.css';
 @import './components/table.css';
+@import './components/accordion.css';

package/src/vue/create-admin-routes.ts

@@ -17,7 +17,15 @@ export interface CreateAdminRoutesOptions {
     /**
      * Loader for the shared login page. The app passes it through as a
      * package-path import (resolved by the app bundler):
-     * `() => import('@saasicat/ui-vue/pages-standard/SuperAdminLoginPage.vue')`.
+     * `() => import('@saasicat/ui-vue/pages/SuperAdminLoginPage.vue')`.
+     *
+     * That subpath has two spellings today: the export map maps both
+     * `./pages/*` and `./pages-standard/*` onto `src/pages-standard/`, so the
+     * two imports are the same file. The scaffolder template
+     * (`create-saasicat-admin`) and `examples/notesapp` spell it `/pages/*`,
+     * which is why the example above does; the package README lists the SFC
+     * entries under `/pages-standard/*`. Collapsing the pair is a breaking
+     * change to the export map and is deliberately not done here.
      */
     loginPage: RouteComponent;
     /** Layout component for `/admin` (e.g. `() => import('@/layouts/AdminLayout.vue')`). */

package/src/vue/platform-loaders.ts

@@ -36,11 +36,21 @@ export interface PlatformLoaders {
     manifestLoader: ManifestLoader;
 }
 
-function resolveEndpoints(endpoints: SuperAdminEndpoints): Required<SuperAdminEndpoints> {
+/**
+ * Fills in what an app left out.
+ *
+ * Exported because the bootstrap needs the same answer, and two copies of a
+ * default are two places for it to drift — which is how `projectKey` was
+ * added to one of them and not the other.
+ */
+export function resolveSuperAdminEndpoints(
+    endpoints: SuperAdminEndpoints,
+): Required<SuperAdminEndpoints> {
     return {
         apiBase: endpoints.apiBase,
         publicBootEndpoint: endpoints.publicBootEndpoint ?? `${endpoints.apiBase}/boot`,
         manifestEndpoint: endpoints.manifestEndpoint ?? `${endpoints.apiBase}/manifest`,
+        projectKey: endpoints.projectKey ?? '',
     };
 }
 
@@ -49,7 +59,7 @@ function resolveEndpoints(endpoints: SuperAdminEndpoints): Required<SuperAdminEn
  * Apps use the same constant for `createSuperAdminApp({ endpoints })`.
  */
 export function createPlatformLoaders(options: CreatePlatformLoadersOptions): PlatformLoaders {
-    const resolved = resolveEndpoints(options.endpoints);
+    const resolved = resolveSuperAdminEndpoints(options.endpoints);
 
     const bootLoader = new BootLoader({
         endpoint: resolved.publicBootEndpoint,