portal-mojo 0.2.7 → 0.2.9

package/src/styles/index.css

@@ -0,0 +1,69 @@
+@layer theme, base, components, utilities, portal-mojo;
+/* portal-mojo/styles.css: every component style the package's markup needs.
+
+   - Import it from the app's Tailwind CSS entry, after `@import "tailwindcss"`,
+     and without a layer() of your own. The package layers itself.
+   - The `portal-mojo` layer sits after Tailwind's `utilities`, so package rules
+     still beat utilities, and any unlayered app rule beats the package.
+   - The `@source` below makes Tailwind scan the package's own markup, so the
+     app needs no `@source` line for portal-mojo.
+   - Colour tokens are the app's to declare; ./required-tokens.json lists them.
+   - Order matters: component files first, ./core.css last. */
+@source "../";
+@import "./components/popover.css" layer(portal-mojo);
+@import "./components/taginput.css" layer(portal-mojo);
+@import "./components/drawer.css" layer(portal-mojo);
+@import "./components/combobox.css" layer(portal-mojo);
+@import "./components/location-address.css" layer(portal-mojo);
+@import "./components/collection-multiselect.css" layer(portal-mojo);
+@import "./components/detail-primitives.css" layer(portal-mojo);
+@import "./components/calendar.css" layer(portal-mojo);
+@import "./components/markdown.css" layer(portal-mojo);
+@import "./components/record-feed.css" layer(portal-mojo);
+@import "./components/right-panel.css" layer(portal-mojo);
+@import "./components/admin-assistant.css" layer(portal-mojo);
+@import "./components/admin-security.css" layer(portal-mojo);
+@import "./components/admin-dashboard.css" layer(portal-mojo);
+@import "./components/admin-cloudwatch.css" layer(portal-mojo);
+@import "./components/admin-monitoring.css" layer(portal-mojo);
+@import "./components/admin-bouncer.css" layer(portal-mojo);
+@import "./components/admin-incidents.css" layer(portal-mojo);
+@import "./components/admin-rules.css" layer(portal-mojo);
+@import "./components/admin-devices.css" layer(portal-mojo);
+@import "./components/admin-jobs.css" layer(portal-mojo);
+@import "./components/admin-network.css" layer(portal-mojo);
+@import "./components/admin-dns.css" layer(portal-mojo);
+@import "./components/admin-dns-certificates.css" layer(portal-mojo);
+@import "./components/admin-dns-registrar.css" layer(portal-mojo);
+@import "./components/admin-storage.css" layer(portal-mojo);
+@import "./components/admin-media-rendering.css" layer(portal-mojo);
+@import "./components/admin-edge.css" layer(portal-mojo);
+@import "./components/admin-shortlinks.css" layer(portal-mojo);
+@import "./components/admin-messaging.css" layer(portal-mojo);
+@import "./components/admin-phonehub.css" layer(portal-mojo);
+@import "./components/admin-push.css" layer(portal-mojo);
+@import "./components/admin-signin.css" layer(portal-mojo);
+@import "./components/multiselect-dropdown.css" layer(portal-mojo);
+@import "./components/datepicker.css" layer(portal-mojo);
+@import "./components/formview.css" layer(portal-mojo);
+@import "./components/tabs.css" layer(portal-mojo);
+@import "./components/form-wizard.css" layer(portal-mojo);
+@import "./components/dataview.css" layer(portal-mojo);
+@import "./components/detailview.css" layer(portal-mojo);
+@import "./components/timepicker.css" layer(portal-mojo);
+@import "./components/collection-select.css" layer(portal-mojo);
+@import "./components/daterange.css" layer(portal-mojo);
+@import "./components/datetimepicker.css" layer(portal-mojo);
+@import "./components/auth.css" layer(portal-mojo);
+@import "./components/idioms.css" layer(portal-mojo);
+@import "./components/guardrail.css" layer(portal-mojo);
+@import "./components/file-upload.css" layer(portal-mojo);
+@import "./components/image-editor.css" layer(portal-mojo);
+@import "./components/charts-c2.css" layer(portal-mojo);
+@import "./components/group-admin.css" layer(portal-mojo);
+@import "./components/user-admin.css" layer(portal-mojo);
+@import "./components/loading.css" layer(portal-mojo);
+@import "./components/worldmap.css" layer(portal-mojo);
+@import "./components/user-menu.css" layer(portal-mojo);
+@import "./components/account.css" layer(portal-mojo);
+@import "./core.css" layer(portal-mojo);

package/src/styles/required-tokens.json

@@ -0,0 +1,32 @@
+{
+    "description": "Tokens a consuming app must declare for portal-mojo/styles.css: every custom property the package styles read with var() and no fallback, and do not declare themselves. Declare each one for light and for dark. Checked by scripts/style-contract.mjs, on the source and on the installed tarball.",
+    "required": [
+        "--accent",
+        "--accent-soft",
+        "--bad",
+        "--bad-soft",
+        "--bg",
+        "--field-bg",
+        "--field-line",
+        "--field-line-hover",
+        "--info",
+        "--info-soft",
+        "--ink",
+        "--ink-strong",
+        "--line",
+        "--line-soft",
+        "--mute",
+        "--ok",
+        "--ok-soft",
+        "--shadow",
+        "--shadow-pop",
+        "--sidebar-bg",
+        "--surface",
+        "--surface2",
+        "--warn",
+        "--warn-soft"
+    ],
+    "knownUndeclared": {
+        "--good": "Read by components/admin-push.css and declared by no app, so that rule's left border is dropped. Tracked as board item 6518; remove this entry with the fix."
+    }
+}

package/src/ui/FileField.tsx

@@ -99,13 +99,18 @@ export function FileField(props: FileFieldProps) {
         }
     }, [queue]);
 
-    useEffect(() => () => {
-        mounted.current = false;
-        generation.current += 1;
-        editController.current?.abort();
-        revokeLocal();
-        if (desired.current !== undefined && candidate.current != null) reportOrphan(candidate.current);
-        queue.cancelAll();
+    useEffect(() => {
+        // Re-arm on (re)mount: StrictMode's probe unmount runs the cleanup
+        // below, and without this the remount stays "unmounted" forever.
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            generation.current += 1;
+            editController.current?.abort();
+            revokeLocal();
+            if (desired.current !== undefined && candidate.current != null) reportOrphan(candidate.current);
+            queue.cancelAll();
+        };
     }, [queue, reportOrphan, revokeLocal]);
 
     const active = queue.snapshot.activeCount > 0 || queue.snapshot.queuedCount > 0;

package/src/ui/FormWizard.tsx

@@ -145,9 +145,15 @@ export function FormWizard(props: FormWizardProps) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [resetKey]);
 
-    useEffect(() => () => {
-        mounted.current = false;
-        generation.current += 1;
+    useEffect(() => {
+        // StrictMode replays this effect in development; without re-arming,
+        // the replayed cleanup leaves the flag false for the real mount and
+        // every onNext/onFinish result is discarded with the wizard still busy.
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            generation.current += 1;
+        };
     }, []);
 
     useEffect(() => {

package/src/ui/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 // ThemeManager port: the preference/resolved two-value model. Preference is
 // 'light' | 'dark' | 'system' (persisted); resolved is what's on screen.
-// Stamps data-theme on <html>; all tokens key off it (see theme.css).
+// Stamps data-theme on <html>; all tokens key off it (the app's theme.css).
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 
 export type ThemePref = 'light' | 'dark' | 'system';

package/src/ui/UserMenu.tsx

@@ -96,8 +96,12 @@ function Avatar({ src, name, className, onError }: {
     );
 }
 
-/** Stored avatar capability for `avatarId`, fetched while mounted only. */
-function useAvatarUrl(avatarId: number | null): [string | null, () => void] {
+/**
+ * Stored avatar capability for `avatarId`, fetched while mounted only and
+ * kept in component state (never a Query cache). Returns `[src, onError]`;
+ * wire `onError` to the <img> so a dead capability falls back to initials.
+ */
+export function useAvatarUrl(avatarId: number | null): [string | null, () => void] {
     const [fetched, setFetched] = useState<{ id: number; src: string | null } | null>(null);
     const [failedSrc, setFailedSrc] = useState<string | null>(null);
 

package/src/ui/detail/index.ts

@@ -1,7 +1,7 @@
 // portal-mojo/ui — detail primitives: the small building blocks admin record
 // pages are composed from. Ported from web-mojo's src/core/views/data/*
-// primitives + the admin metadata section. Styles live in the consuming app
-// (apps/portal/src/theme/detail-primitives.css); docs in
+// primitives + the admin metadata section. Styles ship with the package
+// (src/styles/components/detail-primitives.css); docs in
 // packages/portal-mojo/docs/detail-primitives.md.
 export * from './StatusPanel';
 export * from './FlowStrip';

package/src/ui/index.ts

@@ -1,7 +1,8 @@
 // portal-mojo/ui — mission-control UI: server tables, filters, schema forms,
 // detail views, native-<dialog> modals, toasts, theming. Components render
-// semantic classes (panel, chip, tbl, …) styled by the consuming app's
-// theme.css tokens — light AND dark (reference set: apps/portal/src/theme.css).
+// semantic classes (panel, chip, tbl, …) styled by portal-mojo/styles.css
+// from the consuming app's tokens — light AND dark (reference set:
+// apps/portal/src/theme.css).
 export * from './ThemeProvider';
 export * from './Guarded';
 export * from './GroupSwitcher';
@@ -30,6 +31,7 @@ export * from './MultiSelectDropdown';
 export * as dateFns from './date/fns';
 export * from './detail';
 export * from './modal';
+export * from './secret-dialog';
 export * from './safe-node';
 export * from './RouteError';
 export * from './route-error';

package/src/ui/loading.tsx

@@ -22,7 +22,7 @@
 //          the same reasoning Popover.tsx uses, and the native inertness of a
 //          modal dialog is what makes this actually block input
 //   FIXED  hardcoded #fff/#0d6efd/#e9ecef (light-theme only, unreadable in
-//          dark) → tokens in apps/portal/src/theme/loading.css, both themes
+//          dark) → tokens in src/styles/components/loading.css, both themes
 //   NEW    the anti-flash `delay` + `minVisible` hold. web-mojo showed the
 //          overlay on the same tick as the call, so every sub-100ms action
 //          strobed. A spinner that appears for 80ms is worse than none.

package/src/ui/modal.tsx

@@ -3,6 +3,7 @@
 // event handler; no JSX modal state to hoist. The z-index/backdrop stack
 // manager web-mojo needed does not exist here: <dialog> stacks natively.
 import { useLayoutEffect, useRef, useSyncExternalStore, type CSSProperties, type ReactNode } from 'react';
+import { getAuthSnapshot, onAuth, subscribeAuth } from '../client/auth';
 
 export type ModalSize = 'sm' | 'md' | 'lg';
 
@@ -63,6 +64,50 @@ function emit() {
     listeners.forEach((fn) => fn());
 }
 
+/**
+ * Close EVERY open modal/drawer, resolving each await with null. Bypasses
+ * canDismiss — this is the session ending, not the user dismissing.
+ */
+function closeAll(): void {
+    if (stack.length === 0) return;
+    const open = stack;
+    stack = [];
+    emit();
+    // resolve() is each item's settled-guarded close; the item is already
+    // gone, so a drawer's exit animation has nothing left to play.
+    for (const item of open) item.resolve(null);
+}
+
+// The stack is module state, so it outlives the host that renders it: an
+// app that mounts <ModalHost> under its auth guard unmounts it on sign-out
+// and REMOUNTS it on the next sign-in — every dialog body would come back,
+// re-run its mount effects, for whoever signed in. A session ending (this
+// tab's logout / unauthorized) or a change of identity seen through storage
+// (another tab signing out or in as someone else) therefore empties it.
+// Wired on the first open (never at import: no storage reads in non-DOM
+// consumers of the package).
+let authWired = false;
+function wireAuth(): void {
+    if (authWired || typeof window === 'undefined') return;
+    authWired = true;
+    // Best-effort: a harness or host that stubs the auth module (or has no
+    // storage) must never stop a modal from opening.
+    try {
+        onAuth('logout', closeAll);
+        onAuth('unauthorized', closeAll);
+        let seenUid: string | null = null;
+        const observe = () => {
+            try {
+                const snap = getAuthSnapshot();
+                if (seenUid != null && (!snap.authenticated || snap.uid !== seenUid)) closeAll();
+                seenUid = snap.authenticated ? snap.uid : null;
+            } catch { /* auth unavailable: nothing to observe */ }
+        };
+        observe();
+        subscribeAuth(observe);
+    } catch { /* auth module stubbed or unavailable: modals still open */ }
+}
+
 export interface ModalOptions {
     size?: ModalSize;
     flush?: boolean;
@@ -71,6 +116,7 @@ export interface ModalOptions {
 }
 
 function open<T>(render: (close: (value: T) => void) => ReactNode, opts: ModalOptions = {}): Promise<T | null> {
+    wireAuth();
     return new Promise<T | null>((resolve) => {
         const id = nextId++;
         let settled = false;
@@ -120,6 +166,7 @@ function drawerWidthPx(width: DrawerWidth | undefined): number {
 }
 
 function drawer<T = unknown>(opts: DrawerOptions<T>): Promise<T | null> {
+    wireAuth();
     const body = opts.render ?? (() => opts.content ?? null);
     let dismissable = opts.dismissable ?? true;
     if (!dismissable && !opts.render) {
@@ -169,6 +216,9 @@ function drawer<T = unknown>(opts: DrawerOptions<T>): Promise<T | null> {
 export const modal = {
     open,
 
+    /** Close every open modal and drawer; each await resolves null. */
+    closeAll,
+
     /** Detail modal: large, flush body — the Modal.detail() envelope. */
     detail(render: (close: (value: unknown) => void) => ReactNode): Promise<unknown> {
         return open(render, { size: 'lg', flush: true });
@@ -212,11 +262,29 @@ function ModalDialog({ item }: { item: ModalItem }) {
         item.resolve(null);
     };
 
+    // The native dialog can close WITHOUT a cancelable cancel: Chromium's
+    // second Escape with no click in between (close-watcher anti-abuse) and
+    // Android back fire a non-cancelable cancel, then close. A locked item
+    // reopens; an unlocked one settles like any other dismiss.
+    const onNativeClose = () => {
+        const dialog = ref.current;
+        if (!dialog || dialog.open || !stack.some((m) => m.id === item.id)) return; // unmount / already settled
+        if (item.canDismiss?.() === false) {
+            dialog.showModal();
+            if (!dialog.contains(document.activeElement)) {
+                (dialog.querySelector<HTMLElement>('[autofocus], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])') ?? dialog).focus();
+            }
+            return;
+        }
+        item.resolve(null);
+    };
+
     return (
         <dialog
             ref={ref}
             className={`mojo-modal mojo-modal-${item.size}${item.flush ? ' mojo-modal-flush' : ''}`}
             onCancel={(e) => { e.preventDefault(); dismiss(); }}
+            onClose={onNativeClose}
             onMouseDown={(e) => { if (e.target === ref.current) dismiss(); }}
         >
             {item.flush && <button type="button" className="btn-icon modal-fallback-close" aria-label="Close" onClick={dismiss}><i className="bi bi-x-lg" /></button>}
@@ -238,6 +306,13 @@ function DrawerDialog({ item }: { item: DrawerItem }) {
     }, []);
 
     const dismiss = () => { if (item.dismissable) item.resolve(null); };
+    // Same non-cancelable close path as ModalDialog: a non-dismissable drawer reopens.
+    const onNativeClose = () => {
+        const el = ref.current;
+        if (!el || el.open || !stack.some((m) => m.id === item.id && m.variant === 'drawer' && !m.closing)) return;
+        if (!item.dismissable) { el.showModal(); return; }
+        item.resolve(null);
+    };
     const hasHead = item.dismissable || item.eyebrow != null || item.title != null || (item.meta?.length ?? 0) > 0;
 
     return (
@@ -247,6 +322,7 @@ function DrawerDialog({ item }: { item: DrawerItem }) {
             // React's CSSProperties has no index signature for custom props.
             style={{ '--drawer-w': `${item.width}px` } as CSSProperties}
             onCancel={(e) => { e.preventDefault(); dismiss(); }}
+            onClose={onNativeClose}
             onMouseDown={(e) => { if (e.target === ref.current) dismiss(); }}
         >
             {/* The panel fills the dialog, so the dialog element is only ever

package/src/ui/secret-dialog.tsx

@@ -0,0 +1,83 @@
+// showSecretDialog / SecretBox — the show-once secret reveal (API tokens,
+// webhook secrets). Moved down from admin/credentials so non-admin surfaces
+// (portal-mojo/account) can reveal a freshly minted token without importing
+// an admin domain; admin/credentials re-exports it unchanged. Styled by the
+// app's group-admin.css (.ga-secret-*).
+import { useState, type ReactNode } from 'react';
+import { modal } from './modal';
+
+/** Clipboard write with the execCommand fallback for insecure contexts. */
+export async function copyText(value: string): Promise<boolean> {
+    try {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(value);
+            return true;
+        }
+    } catch {
+        // Fall through for insecure contexts.
+    }
+    try {
+        const input = document.createElement('textarea');
+        input.value = value;
+        input.style.position = 'fixed';
+        input.style.opacity = '0';
+        document.body.appendChild(input);
+        input.select();
+        const copied = document.execCommand('copy');
+        input.remove();
+        return copied;
+    } catch {
+        return false;
+    }
+}
+
+export function SecretBox({ secret, ariaLabel }: { secret: string; ariaLabel: string }) {
+    const [copied, setCopied] = useState(false);
+    return (
+        <div className="ga-secret-box">
+            <code className="ga-secret-value" aria-label={ariaLabel}>{secret}</code>
+            <button
+                type="button"
+                className="btn btn-compact"
+                title="Copy to clipboard"
+                aria-label="Copy to clipboard"
+                onClick={() => {
+                    void copyText(secret).then((ok) => {
+                        if (!ok) return;
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 1600);
+                    });
+                }}
+            >
+                <i className={`bi ${copied ? 'bi-check-lg' : 'bi-clipboard'}`} /> {copied ? 'Copied' : 'Copy'}
+            </button>
+        </div>
+    );
+}
+
+export interface SecretDialogOptions {
+    title: string;
+    warning: ReactNode;
+    intro?: ReactNode;
+    secret: string;
+    ariaLabel: string;
+    footer?: ReactNode;
+}
+
+export function showSecretDialog(options: SecretDialogOptions): Promise<unknown> {
+    return modal.open((close) => (
+        <div className="modal-pad">
+            <h2 className="modal-title">{options.title}</h2>
+            {options.intro && <div className="ga-secret-intro">{options.intro}</div>}
+            <div className="ga-secret-warning" role="alert">
+                <i className="bi bi-exclamation-triangle-fill" />
+                <span>{options.warning}</span>
+            </div>
+            <SecretBox secret={options.secret} ariaLabel={options.ariaLabel} />
+            {options.footer}
+            <div className="modal-actions">
+                <button className="btn" onClick={() => close(null)}>Close</button>
+            </div>
+        </div>
+    ), { size: 'lg' });
+}

package/src/ui/toast.tsx

@@ -16,7 +16,7 @@
 // in-flight operation's only indicator.
 //
 // Visual spec from web-mojo's toast.css (left accent bar, compact card,
-// bottom-right); idiom styles live in the app's theme/idioms.css — tokens
+// bottom-right); idiom styles live in src/styles/components/idioms.css — tokens
 // only, both themes.
 import { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
@@ -24,7 +24,8 @@ import { createPortal } from 'react-dom';
 type Level = 'success' | 'error' | 'info' | 'warning';
 
 interface BasicToast { id: number; kind: 'basic'; level: Level; message: string }
-interface UndoToastItem { id: number; kind: 'undo'; message: string; onUndo?: () => void }
+/** The undo card; `label` renames its button (toast.action — a follow-up offer). */
+interface UndoToastItem { id: number; kind: 'undo'; message: string; onUndo?: () => void; label?: string }
 interface ProgressToastItem {
     id: number;
     kind: 'progress';
@@ -129,6 +130,21 @@ export function progressToast(label: string, opts: { onCancel?: () => void } = {
     };
 }
 
+/**
+ * A follow-up OFFER on the undo card's grammar: the message, one action
+ * button named `label` (click dismisses at once and runs `onAction`), and an
+ * auto-dismiss after `timeout` ms (default 10000) that leaves things as they are.
+ */
+export function actionToast(message: string, label: string, onAction: () => void, opts: { timeout?: number } = {}): UndoToastHandle {
+    const id = nextId++;
+    toasts = [...toasts, { id, kind: 'undo', message, onUndo: onAction, label }];
+    emit();
+    const timer = setTimeout(() => remove(id), opts.timeout ?? 10_000);
+    return {
+        dismiss: () => { clearTimeout(timer); remove(id); },
+    };
+}
+
 export const toast = {
     success: (m: string) => push('success', m),
     error: (m: string) => push('error', m),
@@ -139,6 +155,8 @@ export const toast = {
     undo: undoToast,
     /** Persistent progress card with a bar. See progressToast(). */
     progress: progressToast,
+    /** A message with one follow-up action button. See actionToast(). */
+    action: actionToast,
 };
 
 const ICONS: Record<Level, string> = {
@@ -250,7 +268,7 @@ export function ToastHost() {
                                 className="undo-btn"
                                 onClick={() => { remove(t.id); t.onUndo?.(); }}
                             >
-                                Undo
+                                {t.label ?? 'Undo'}
                             </button>
                         </div>
                     );