@drawnagency/primitives 0.1.113 → 0.1.114

package/src/components/shell/CredentialList.tsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Eye, Copy, Check } from "lucide-react";
 import { Input } from "../shared/Input";
 import { PasswordInput } from "../shared/PasswordInput";
 import { Button } from "../shared/Button";
+import { ConfirmInline } from "../shared/ConfirmInline";
 import {
   ViewerUsernameSchema,
   VIEWER_PASSWORD_MIN_LENGTH,
@@ -60,6 +61,9 @@ function CredentialRow({
   const [revealed, setRevealed] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [confirmingRemove, setConfirmingRemove] = useState(false);
+  const [removing, setRemoving] = useState(false);
+  const removeButtonRef = useRef<HTMLButtonElement>(null);
 
   async function reveal() {
     setError(null);
@@ -107,16 +111,15 @@ function CredentialRow({
   }
 
   async function remove() {
-    if (!confirm(
-      `Remove the sign-in "${credential.username}"?\n\n` +
-      "Anyone using it will be locked out — though a browser already signed in " +
-      "may keep access for up to 24 hours, until its session expires.",
-    )) return;
     setError(null);
+    setRemoving(true);
     try {
       await onDelete(credential.username);
+      setConfirmingRemove(false);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Remove failed");
+    } finally {
+      setRemoving(false);
     }
   }
 
@@ -133,7 +136,7 @@ function CredentialRow({
         {revealed ? (
           <CopyableSecret value={revealed} />
         ) : (
-          <Button variant="ghost" onClick={reveal} isLoading={busy && !editing} loadingLabel="...">
+          <Button variant="ghost" onClick={reveal} isLoading={busy && !editing} loadingLabel="…">
             <span className="inline-flex items-center gap-1.5">
               <Eye className="h-3.5 w-3.5" aria-hidden />
               Show
@@ -143,11 +146,28 @@ function CredentialRow({
         {revealed && <Button variant="ghost" onClick={() => setRevealed(null)}>Hide</Button>}
 
         {canMutate && !editing && <Button variant="ghost" onClick={() => setEditing(true)}>Edit</Button>}
-        {canMutate && !editing && (
-          <Button variant="ghost" tone="destructive" onClick={remove}>Remove</Button>
+        {canMutate && !editing && !confirmingRemove && (
+          <Button ref={removeButtonRef} variant="ghost" tone="destructive" onClick={() => setConfirmingRemove(true)}>Remove</Button>
         )}
       </div>
 
+      {confirmingRemove && (
+        <div className="mt-2">
+          <ConfirmInline
+            message={
+              `Remove the sign-in "${credential.username}"? Anyone using it will be locked out — ` +
+              "though a browser already signed in may keep access for up to 24 hours, until its session expires."
+            }
+            confirmLabel="Remove"
+            tone="destructive"
+            busy={removing}
+            onConfirm={remove}
+            onCancel={() => setConfirmingRemove(false)}
+            returnFocusTo={removeButtonRef}
+          />
+        </div>
+      )}
+
       {editing && (
         <div className="mt-2 space-y-2">
           <Input label="Label" value={label} onChange={setLabel} placeholder="Login Name" />
@@ -163,12 +183,12 @@ function CredentialRow({
             <Button variant="secondary" onClick={() => { setEditing(false); setPassword(""); setLabel(credential.label ?? ""); setError(null); }} disabled={busy}>
               Cancel
             </Button>
-            <Button variant="primary" onClick={save} isLoading={busy} loadingLabel="Saving...">Save</Button>
+            <Button variant="primary" onClick={save} isLoading={busy} loadingLabel="Saving…">Save</Button>
           </div>
         </div>
       )}
 
-      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+      {error && <p className="mt-1 text-xs text-danger">{error}</p>}
     </li>
   );
 }
@@ -241,10 +261,10 @@ function AddForm({ audienceName, onCreate, onCancel }: {
         Signs in to <span className="font-medium">{audienceName}</span> and sees exactly what that audience sees.
         You can look this password up again later.
       </p>
-      {error && <p className="text-xs text-red-600">{error}</p>}
+      {error && <p className="text-xs text-danger">{error}</p>}
       <div className="flex justify-end gap-2">
         <Button variant="secondary" onClick={onCancel} disabled={busy}>Cancel</Button>
-        <Button variant="primary" onClick={submit} isLoading={busy} loadingLabel="Adding...">Add</Button>
+        <Button variant="primary" onClick={submit} isLoading={busy} loadingLabel="Adding…">Add</Button>
       </div>
     </li>
   );

package/src/components/shell/DocInspector.tsx

@@ -7,17 +7,8 @@ import { ColorPicker } from "../shared/ColorPicker";
 import { FormLabel } from "../shared/FormLabel";
 import { useMediaLibrary } from "./MediaLibraryContext";
 import { Button } from "../shared/Button";
-import type { MediaItem } from "../../media/types";
+import { imageThumbnailUrl } from "../../media/utils";
 
-// Smallest generated variant for the inspector thumbnail (same file naming as
-// docImagesFrom in lib/document-input.ts); null when the item can't render.
-function thumbSrc(imageId: string, item: MediaItem | undefined): string | null {
-  if (!item || item.kind !== "image") return null;
-  if (item.mimeType === "image/svg+xml") return `/api/media/${imageId}/original.svg`;
-  const widths = item.variants.map((v) => v.width).sort((a, b) => a - b);
-  if (widths.length === 0) return null;
-  return `/api/media/${imageId}/${widths[0]}.webp`;
-}
 
 export interface DocInspectorProps {
   document: DocumentOptions;
@@ -117,7 +108,7 @@ function CoverPanel({
           <FormLabel>Cover image</FormLabel>
           {cover.imageId ? (
             (() => {
-              const src = thumbSrc(cover.imageId, media.manifest.images[cover.imageId]);
+              const src = imageThumbnailUrl(media.manifest.images[cover.imageId]);
               return src ? (
                 <img src={src} alt="Cover image preview" className="mb-2 max-h-24 rounded border border-base-200" />
               ) : null;
@@ -312,7 +303,7 @@ function ChunkPanel({
       {warnings.length > 0 ? (
         <div className="mt-2">
           {warnings.map((w, i) => (
-            <p key={i} className="mb-1 rounded border border-amber-300 bg-amber-50 px-2 py-1 text-xs text-amber-800">
+            <p key={i} className="mb-1 rounded border border-warning bg-warning-bg px-2 py-1 text-xs text-warning">
               {w}
             </p>
           ))}

package/src/components/shell/DocumentEditorOverlay.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import type { Page } from "../../schemas/site-config";
 import type { MediaManifest } from "../../media/types";
 import type { LoadedSection } from "../../lib/loader";
@@ -14,6 +14,8 @@ import {
 import { DocInspector, type DocInspectorProps } from "./DocInspector";
 import { buildDraftDocumentInput } from "../../lib/document-input";
 import { Button } from "../shared/Button";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import { useStackedEscape } from "../../hooks/useStackedEscape";
 // The sealed document stylesheet ships with its editor consumer (Task 6 decided
 // the present route imports it from its island; this is the editor's island).
 // Vitest stubs CSS imports, so it stays out of the jsdom test graph regardless.
@@ -85,27 +87,35 @@ export function DocumentEditorOverlay({
     [],
   );
 
-  // Escape closes (the close button is the other exit). DocViewer owns arrow
-  // paging on its own window listener; Escape doesn't collide with it. An
-  // Escape aimed at an inspector control is the cancel-the-field gesture, not
-  // "leave the editor": text fields blur (so the next Escape closes), and a
-  // select is left alone entirely — the browser uses Escape to dismiss its
-  // popup and there's no way to tell whether one is open.
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== "Escape") return;
-      const t = e.target as HTMLElement | null;
-      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) {
-        t.blur();
-        return;
-      }
-      if (t && t.tagName === "SELECT") return;
-      e.preventDefault();
-      onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
+  const panelRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(panelRef, true);
+
+  // Escape closes (the close button is the other exit), but a modal opened on
+  // top — the Media Library, from the cover-image picker — owns Escape first
+  // (useStackedEscape's layer check). DocViewer owns arrow paging on its own
+  // window listener; Escape doesn't collide with it. An Escape aimed at an
+  // inspector control is the cancel-the-field gesture, not "leave the
+  // editor": text fields blur (so the next Escape closes), and a select is
+  // left alone entirely (swallowed, not blurred) — the browser uses Escape to
+  // dismiss its popup and there's no way to tell whether one is open.
+  // Stable identity: useStackedEscape's effect deps include `before`, so a
+  // fresh arrow every render (this closes over nothing render-specific) would
+  // tear down and re-add the document listener on every render instead of
+  // just mount/unmount.
+  const blurFieldFirst = useCallback((e: KeyboardEvent) => {
+    const t = e.target as HTMLElement | null;
+    if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) {
+      t.blur();
+      return true;
+    }
+    if (t && t.tagName === "SELECT") return true;
+    return false;
+  }, []);
+
+  useStackedEscape(onClose, {
+    enabled: true,
+    before: blurFieldFirst,
+  });
 
   const selection: DocInspectorProps["selection"] = useMemo(() => {
     if (selectedChunkId === null) return { kind: "cover" };
@@ -138,7 +148,7 @@ export function DocumentEditorOverlay({
   );
 
   return (
-    <div className="fixed inset-0 z-50 flex flex-col bg-base" role="dialog" aria-modal="true" aria-label="Document editor">
+    <div ref={panelRef} className="fixed inset-0 z-50 flex flex-col bg-base" role="dialog" aria-modal="true" aria-label="Document editor">
       <div className="flex items-center justify-between border-b border-base-200 bg-base px-4 py-2">
         <span className="text-sm font-medium text-base-contrast">Document · {page.title}</span>
         <Button variant="secondary" size="sm" aria-label="Close document editor" onClick={onClose}>

package/src/components/shell/EditorContext.tsx

@@ -71,3 +71,10 @@ export function useEditorContext(): EditorContextValue {
   }
   return context;
 }
+
+/** For editor components rendered outside an EditorProvider (tests, isolated
+ *  rendering): null instead of throwing. Not a licence for viewer reuse —
+ *  editor code must never reach a viewer path. */
+export function useOptionalEditorContext(): EditorContextValue | null {
+  return useContext(EditorContext);
+}

package/src/components/shell/EditorLoginForm.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect, type FormEvent } from "react";
 import { PasswordInput } from "../shared/PasswordInput";
+import { Input } from "../shared/Input";
 import { Button } from "../shared/Button";
-import { safeRedirect } from "../../lib/safeRedirect";
+import { COPY } from "../shared/copy";
+import { safeRedirect } from "../../lib/safe-redirect";
 
 const HASH_ERROR_MESSAGES: Record<string, string> = {
   otp_expired: "This link has expired. Please request a new one.",
@@ -126,7 +128,7 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
 
       if (!response.ok) {
         const data = await response.json().catch(() => ({}));
-        setError(data.error || "Sign-in failed");
+        setError(data.error || COPY.auth.signInFallback);
         return;
       }
 
@@ -154,7 +156,7 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
 
       if (!response.ok) {
         const data = await response.json().catch(() => ({}));
-        setError(data.error || "Failed to send reset link");
+        setError(data.error || "Couldn't send reset link");
         return;
       }
 
@@ -186,7 +188,7 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
   if (exchangingTokens) {
     return (
       <div className="mx-auto max-w-sm py-8 text-center">
-        <p className="text-sm text-base-contrast-light">Signing in...</p>
+        <p className="text-sm text-base-contrast-light">Signing in…</p>
       </div>
     );
   }
@@ -219,29 +221,23 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
           </div>
         ) : (
           <form onSubmit={handleResetSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="reset-email" className="mb-1.5 block text-sm font-medium text-base-contrast">
-                Email
-              </label>
-              <input
-                id="reset-email"
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-                autoComplete="email"
-                className="w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast"
-              />
-            </div>
+            <Input
+              label="Email"
+              type="email"
+              value={email}
+              onChange={setEmail}
+              required
+              autoComplete="email"
+            />
 
-            {error && <p className="text-sm text-red-600">{error}</p>}
+            {error && <p className="text-sm text-danger">{error}</p>}
 
             <Button
               type="submit"
               variant="primary"
               size="md"
               isLoading={loading}
-              loadingLabel="Sending..."
+              loadingLabel="Sending…"
               className="w-full"
             >
               Send reset link
@@ -289,20 +285,14 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
 
       <form onSubmit={handlePasswordSubmit} className="space-y-4">
         {capabilities.emailPassword && (
-          <div>
-            <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-base-contrast">
-              Email
-            </label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              autoComplete="email"
-              className="w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast"
-            />
-          </div>
+          <Input
+            label="Email"
+            type="email"
+            value={email}
+            onChange={setEmail}
+            required
+            autoComplete="email"
+          />
         )}
 
         <PasswordInput
@@ -325,7 +315,7 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
         )}
 
         {error && (
-          <p className="text-sm text-red-600">{error}</p>
+          <p className="text-sm text-danger">{error}</p>
         )}
 
         <Button
@@ -333,7 +323,7 @@ export function EditorLoginForm({ capabilities, oauthProviders = [], next, serve
           variant="primary"
           size="md"
           isLoading={loading}
-          loadingLabel="Signing in..."
+          loadingLabel="Signing in…"
           className="w-full"
         >
           Sign In

package/src/components/shell/EditorModal.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useId, useRef, type ReactNode } from "react";
 import { createPortal } from "react-dom";
-import { RemoveIcon } from "../shared/icons";
+import { X } from "lucide-react";
 import { IconButton } from "../shared/IconButton";
 import { useFocusTrap } from "../../hooks/useFocusTrap";
+import { useStackedEscape } from "../../hooks/useStackedEscape";
 import { cn } from "../../lib/cn";
 import { lockBodyScroll } from "../../lib/scroll-lock";
 
@@ -27,14 +28,10 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
 
   useFocusTrap(panelRef, isOpen);
 
-  useEffect(() => {
-    if (!isOpen || blocking) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, blocking, onClose]);
+  // Another EditorModal opened on top of this one (a ConfirmDialog, say) owns
+  // Escape — attaching layerRef to our own data-modal-layer element below is
+  // what lets the hook tell "another layer" from "just me".
+  const layerRef = useStackedEscape<HTMLDivElement>(onClose, { enabled: isOpen && !blocking });
 
   useEffect(() => {
     if (!isOpen) return;
@@ -45,6 +42,7 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
 
   return createPortal(
     <div
+      ref={layerRef}
       data-testid="modal-backdrop"
       // Marks the whole modal layer (backdrop + panel) so surfaces underneath —
       // notably Popover's outside-click handler — can tell "a dialog above me is
@@ -87,7 +85,7 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
           <h3 id={titleId} className="text-lg font-semibold text-base-contrast">{title}</h3>
           {!blocking && (
             <IconButton
-              icon={<RemoveIcon size={18} />}
+              icon={<X size={18} />}
               label="Close modal"
               size="lg"
               onClick={onClose}