@drawnagency/primitives 0.1.113 → 0.1.114

package/src/components/shared/SplitButton.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { Button } from "./Button";
 import { Popover } from "./Popover";
 import { PopoverItem } from "./PopoverItem";
 
@@ -37,38 +38,31 @@ export function SplitButton({
 
   return (
     <div className={cn("relative inline-flex", className)}>
-      <button
-        type="button"
+      <Button
+        variant="primary"
+        size="sm"
         onClick={onClick}
         disabled={resolvedDisabled}
-        className={cn(
-          "inline-flex items-center px-4 py-1.5 text-xs font-medium transition-colors",
-          "bg-base-contrast text-base-accent",
-          hasOptions ? "rounded-l" : "rounded",
-          resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-base-contrast/90",
-        )}
+        className={hasOptions ? "rounded-l rounded-r-none" : undefined}
         aria-label={displayLabel}
       >
         {displayLabel}
-      </button>
+      </Button>
       {hasOptions && (
         <>
-          <button
+          <Button
             ref={chevronRef}
-            type="button"
+            variant="primary"
+            size="sm"
             onClick={() => setOpen((v) => !v)}
             disabled={resolvedDisabled}
-            className={cn(
-              "inline-flex items-center border-l border-base-accent/20 px-2 py-1.5 transition-colors",
-              "bg-base-contrast text-base-accent rounded-r",
-              resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-base-contrast/90",
-            )}
+            className="rounded-l-none border-l border-base-accent/20 px-2"
             aria-label="More actions"
             aria-haspopup="true"
             aria-expanded={open}
           >
             <ChevronDown size={14} />
-          </button>
+          </Button>
           <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={chevronRef} className="w-full">
             <ul role="menu" className="py-1">
               {options.map((option) => (

package/src/components/shared/SummaryAnchorsContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import type { SummaryNavAnchor } from "../../lib/nav";
+
+/**
+ * TL;DR / Summary nav anchors for the page being edited, keyed by section id.
+ * EditorShell provides it from summaryNavAnchors over the whole page, so a plate
+ * nested in a container gets the same anchor its nav entry links to. The SSR
+ * viewer can't share context across sections and reads `navAnchor` stamped on
+ * the section instead (withNavAnchors).
+ */
+export const SummaryAnchorsContext = createContext<Record<string, SummaryNavAnchor>>({});

package/src/components/shared/Textarea.tsx

@@ -5,16 +5,24 @@ import { FormLabel } from "./FormLabel";
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
   label: string;
   onChange: (value: string) => void;
+  /** Helper text below the field, e.g. a format hint or character count. */
+  hint?: string;
+  /** See `Input`'s `hideLabel` — keeps a real associated `<label>` for a11y
+   *  without a visible caption, for compact fields that never showed one. */
+  hideLabel?: boolean;
+  /** Escape hatch for one-off sizing, matching `Select`'s `selectClassName`. */
+  textareaClassName?: string;
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
-  { label, value, onChange, rows = 3, className, disabled, ...rest },
+  { label, value, onChange, rows = 3, className, disabled, hint, hideLabel, textareaClassName, ...rest },
   ref,
 ) {
   const id = useId();
+  const hintId = `${id}-hint`;
   return (
     <div className={className}>
-      <FormLabel htmlFor={id}>{label}</FormLabel>
+      <FormLabel htmlFor={id} className={hideLabel ? "sr-only" : undefined}>{label}</FormLabel>
       <textarea
         ref={ref}
         id={id}
@@ -22,13 +30,20 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
         onChange={(e) => onChange(e.target.value)}
         rows={rows}
         disabled={disabled}
+        aria-describedby={hint ? hintId : undefined}
         className={cn(
           "w-full resize-none 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",
           disabled && "cursor-not-allowed opacity-50",
+          textareaClassName,
         )}
         {...rest}
       />
+      {hint && (
+        <p id={hintId} className="mt-1 text-xs text-base-contrast-light">
+          {hint}
+        </p>
+      )}
     </div>
   );
 });

package/src/components/shared/ToolbarFrame.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+interface ToolbarFrameProps {
+  left?: ReactNode;
+  center?: ReactNode;
+  right?: ReactNode;
+  /** Pins the bar to the viewport's top edge (`fixed top-0 inset-x-0`) — the
+   *  default, and what every toolbar in the shell (the two EditorShell bars,
+   *  HistoryToolbar) uses. `false` renders in-flow. */
+  fixed?: boolean;
+}
+
+/** The one h-16, 3-column toolbar shell shared by EditorShell's edit-mode
+ *  and view-mode bars and HistoryToolbar. Standardizing on h-16 here is what
+ *  fixed HistoryToolbar's `py-2` bar being shorter than the body's `pt-16` —
+ *  a gap under the bar, not an overlap. */
+export function ToolbarFrame({ left, center, right, fixed = true }: ToolbarFrameProps) {
+  return (
+    <div className={cn(fixed && "fixed top-0 right-0 left-0 z-50", "border-b border-base-200 bg-base")}>
+      <div className="mx-auto grid h-16 max-w-screen-xl grid-cols-3 items-center px-4">
+        <div className="flex items-center gap-2">{left}</div>
+        <div className="flex items-center justify-center gap-2">{center}</div>
+        <div className="flex items-center justify-end gap-2">{right}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/shared/VideoSourceField.tsx

@@ -140,7 +140,7 @@ export function VideoSourceField({ value, onChange }: Props) {
               {loading ? "Loading…" : "Use link"}
             </Button>
           </div>
-          {error ? <p className="text-xs text-red-600">{error}</p> : null}
+          {error ? <p className="text-xs text-danger">{error}</p> : null}
           {!error && fallback ? (
             <p className="text-xs text-base-contrast-light/70">
               Added — couldn't fetch exact dimensions, using 16:9.

package/src/components/shared/copy.ts

@@ -0,0 +1,18 @@
+// Single source for editor-facing copy touched by the D1/D2/D5 UI
+// consolidation pass (docs/superpowers/specs/2026-09-04-editor-ui-primitives-consolidation.md).
+// Only strings this pass touched move here — no repo-wide sweep.
+export const COPY = {
+  auth: {
+    // Both EditorLoginForm and ViewerLoginForm show the server's message when
+    // present ("Incorrect email or password." / "Incorrect username or
+    // password.") and fall back to this generic message otherwise.
+    signInFallback: "Couldn't sign in. Try again.",
+  },
+  bugReport: {
+    submitted: "Bug report submitted",
+  },
+  publish: {
+    saved: "Saved",
+    publishFailed: "Publish failed",
+  },
+};

package/src/components/shared/icons.tsx

@@ -3,26 +3,10 @@
  * Each returns a styled element ready to drop into any context.
  * Sizing and visibility are left to the consumer via className.
  */
-import { GripVertical, Plus, Trash2, X, Settings } from "lucide-react";
+import { GripVertical } from "lucide-react";
 
 export function DragHandle({ size = 16 }: { size?: number }) {
   return <GripVertical size={size} />;
 }
 
-export function AddIcon({ size = 14 }: { size?: number }) {
-  return <Plus size={size} />;
-}
-
-export function RemoveIcon({ size = 14 }: { size?: number }) {
-  return <X size={size} />;
-}
-
-export function DeleteIcon({ size = 14 }: { size?: number }) {
-  return <Trash2 size={size} />;
-}
-
-export function SettingsIcon({ size = 14 }: { size?: number }) {
-  return <Settings size={size} />;
-}
-
 export { GripVertical, Plus, Trash2, X, Settings } from "lucide-react";

package/src/components/shell/AudienceAddForm.tsx

@@ -59,7 +59,7 @@ export function AudienceAddForm({ onSubmit, onCancel }: Props) {
           </p>
         </div>
       </div>
-      {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
           type="button"
@@ -73,7 +73,7 @@ export function AudienceAddForm({ onSubmit, onCancel }: Props) {
           type="submit"
           variant="primary"
           isLoading={submitting}
-          loadingLabel="Adding..."
+          loadingLabel="Adding…"
         >
           Add
         </Button>

package/src/components/shell/AudienceDetailsPanel.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ChevronRight, Copy, Check, Eye } from "lucide-react";
+import { ChevronRight, Copy, Check, Eye, ScanEye } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Button } from "../shared/Button";
 import { SectionSummaryRow } from "../shared/SectionSummaryRow";
@@ -21,6 +21,12 @@ interface Props {
   audiences: AudienceDetail[];
   /** False when the auth provider cannot store a reversible password at all. */
   revealSupported: boolean;
+  /**
+   * Show "View as" on each audience (#61): to editors and the default audience,
+   * and only while password protection is on, since without it no visitor sees
+   * an audience-filtered site.
+   */
+  canImpersonate?: boolean;
 }
 
 const PLACEHOLDER_COLOR = "#94a3b8";
@@ -103,7 +109,7 @@ function PasswordCell({ username, revealSupported }: { username: string; revealS
   }
 
   return (
-    <Button variant="ghost" onClick={reveal} isLoading={state.kind === "loading"} loadingLabel="Loading...">
+    <Button variant="ghost" onClick={reveal} isLoading={state.kind === "loading"} loadingLabel="Loading…">
       <span className="inline-flex items-center gap-1.5">
         <Eye className="h-3.5 w-3.5" aria-hidden />
         Show password
@@ -168,7 +174,7 @@ function PageRow({ page }: { page: OverviewPage }) {
   );
 }
 
-function AudienceBlock({ audience, revealSupported }: { audience: AudienceDetail; revealSupported: boolean }) {
+function AudienceBlock({ audience, revealSupported, canImpersonate }: { audience: AudienceDetail; revealSupported: boolean; canImpersonate: boolean }) {
   const [open, setOpen] = useState(false);
   const { overview } = audience;
 
@@ -200,6 +206,18 @@ function AudienceBlock({ audience, revealSupported }: { audience: AudienceDetail
             </span>
           </span>
         </button>
+        {canImpersonate && (
+          // A plain form POST: the route sets the cookie and 303s to the viewer site.
+          <form method="post" action="/api/auth/impersonate" className="shrink-0">
+            <input type="hidden" name="audience" value={audience.name} />
+            <Button type="submit" variant="secondary" size="sm" aria-label={`View the site as ${audience.displayName}`}>
+              <span className="inline-flex items-center gap-1.5">
+                <ScanEye className="h-3.5 w-3.5" aria-hidden />
+                View as
+              </span>
+            </Button>
+          </form>
+        )}
       </div>
 
       <div className="border-t border-base-200 px-4 py-3">
@@ -242,7 +260,7 @@ function AudienceBlock({ audience, revealSupported }: { audience: AudienceDetail
  * Reachable by editors and the site's default audience (the client), so the
  * client can hand a new partner access without going through us.
  */
-export function AudienceDetailsPanel({ audiences, revealSupported }: Props) {
+export function AudienceDetailsPanel({ audiences, revealSupported, canImpersonate = false }: Props) {
   if (audiences.length === 0) {
     return (
       <p className="text-sm text-base-contrast-light">
@@ -254,7 +272,7 @@ export function AudienceDetailsPanel({ audiences, revealSupported }: Props) {
   return (
     <div className="flex flex-col gap-3">
       {audiences.map((a) => (
-        <AudienceBlock key={a.name} audience={a} revealSupported={revealSupported} />
+        <AudienceBlock key={a.name} audience={a} revealSupported={revealSupported} canImpersonate={canImpersonate} />
       ))}
     </div>
   );

package/src/components/shell/AudienceRow.tsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import type { Audience } from "../../auth/types";
 import { Input } from "../shared/Input";
 import { Button } from "../shared/Button";
 import { ColorPicker } from "../shared/ColorPicker";
+import { ConfirmInline } from "../shared/ConfirmInline";
 import { CredentialList } from "./CredentialList";
 import type { ViewerCredential } from "../../schemas/audience";
 
@@ -41,6 +42,7 @@ export function AudienceRow({
   const [error, setError] = useState<string | null>(null);
   const [confirmingRemove, setConfirmingRemove] = useState(false);
   const [saving, setSaving] = useState(false);
+  const removeButtonRef = useRef<HTMLButtonElement>(null);
 
   function startEdit() {
     setIsEditing(true);
@@ -109,7 +111,7 @@ export function AudienceRow({
             />
           </div>
         </div>
-        {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
             type="button"
@@ -124,7 +126,7 @@ export function AudienceRow({
             variant="primary"
             onClick={save}
             isLoading={saving}
-            loadingLabel="Saving..."
+            loadingLabel="Saving…"
           >
             Save
           </Button>
@@ -168,22 +170,27 @@ export function AudienceRow({
           <Button variant="ghost" onClick={startEdit}>Edit</Button>
         )}
         {canMutate && !isDefault && !confirmingRemove && (
-          <Button variant="ghost" tone="destructive" onClick={() => setConfirmingRemove(true)}>Remove</Button>
+          <Button ref={removeButtonRef} variant="ghost" tone="destructive" onClick={() => setConfirmingRemove(true)}>Remove</Button>
         )}
       </div>
 
       {confirmingRemove && (
-        <div role="alertdialog" aria-label={`Remove ${audience.displayName}`} className="mt-2 rounded border border-red-200 bg-red-50 px-3 py-2 dark:border-red-900/50 dark:bg-red-950/30">
-          <p className="text-sm text-red-800 dark:text-red-200">
-            Remove &ldquo;{audience.displayName}&rdquo;?
-            {audience.credentialCount > 0 && (
-              <> Its {audience.credentialCount === 1 ? "sign-in" : `${audience.credentialCount} sign-ins`} go with it, locking out anyone using them.</>
-            )}
-          </p>
-          <div className="mt-2 flex justify-end gap-2">
-            <Button variant="secondary" onClick={() => setConfirmingRemove(false)}>Cancel</Button>
-            <Button variant="destructive" onClick={remove}>Remove</Button>
-          </div>
+        <div className="mt-2">
+          <ConfirmInline
+            message={
+              <>
+                Remove &ldquo;{audience.displayName}&rdquo;?
+                {audience.credentialCount > 0 && (
+                  <> Its {audience.credentialCount === 1 ? "sign-in" : `${audience.credentialCount} sign-ins`} go with it, locking out anyone using them.</>
+                )}
+              </>
+            }
+            confirmLabel="Remove"
+            tone="destructive"
+            onConfirm={remove}
+            onCancel={() => setConfirmingRemove(false)}
+            returnFocusTo={removeButtonRef}
+          />
         </div>
       )}
 

package/src/components/shell/BugReportFAB.tsx

@@ -1,8 +1,15 @@
 import { useState, useCallback, useRef, useEffect } from "react";
+import { AlertTriangle, X } from "lucide-react";
 import { EditorModal } from "./EditorModal";
 import { useEditorContext } from "./EditorContext";
 import { cn } from "../../lib/cn";
 import Fab from "../shared/Fab";
+import { Notice } from "../shared/Notice";
+import { useNotice } from "../../hooks/useNotice";
+import { COPY } from "../shared/copy";
+import { Button } from "../shared/Button";
+import { IconButton } from "../shared/IconButton";
+import { Textarea } from "../shared/Textarea";
 
 type Category = "Visual" | "Unexpected Behavior" | "Media / Media Library" | "Save / Publish" | "Feature Request" | "Other";
 
@@ -30,7 +37,13 @@ interface ImagePreview {
   name: string;
 }
 
-export function BugReportFAB() {
+interface BugReportFABProps {
+  /** Renders as a `FabStack` member (relative, no bottom-* of its own)
+   *  instead of an independently fixed FAB — see FabStack. */
+  stacked?: boolean;
+}
+
+export function BugReportFAB({ stacked }: BugReportFABProps) {
   const { isEditMode, historyState } = useEditorContext();
   const [isOpen, setIsOpen] = useState(false);
   const [category, setCategory] = useState<Category>("Visual");
@@ -42,9 +55,7 @@ export function BugReportFAB() {
   const [submitError, setSubmitError] = useState<string | null>(null);
   const [imageNotice, setImageNotice] = useState<string | null>(null);
   const [descriptionError, setDescriptionError] = useState<string | null>(null);
-  const [toast, setToast] = useState<string | null>(null);
-  const toastTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => () => { if (toastTimerRef.current) clearTimeout(toastTimerRef.current); }, []);
+  const { notice: toast, show: showToast } = useNotice();
   const capturedContextRef = useRef<CapturedContext | null>(null);
   const dropZoneRef = useRef<HTMLDivElement>(null);
 
@@ -186,9 +197,7 @@ export function BugReportFAB() {
       }
 
       handleClose();
-      setToast("Bug report submitted");
-      if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
-      toastTimerRef.current = setTimeout(() => setToast(null), 3000);
+      showToast("success", COPY.bugReport.submitted, { ttlMs: 3000 });
     } catch (err) {
       setSubmitError(err instanceof Error ? err.message : "Submission failed");
     } finally {
@@ -204,11 +213,14 @@ export function BugReportFAB() {
     <>
       {/* FAB button */}
       {visible && (
-        <Fab label="Report a bug" column="editor" className="bottom-28" onClick={handleOpen}>
-          {/* Bug / beetle SVG icon */}
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <path d="M19 8h-1.26A6.003 6.003 0 0012 4a6.003 6.003 0 00-5.74 4H5a1 1 0 000 2h1.05A6.04 6.04 0 006 12H5a1 1 0 000 2h1c0 .34.03.67.08 1H5a1 1 0 000 2h1.26a6 6 0 0011.48 0H19a1 1 0 000-2h-1.08c.05-.33.08-.66.08-1h1a1 1 0 000-2h-1a6.04 6.04 0 00-.05-2H19a1 1 0 000-2zM12 6c1.7 0 3.16.88 4 2.19V8a1 1 0 10-2 0v.04A3.97 3.97 0 0012 8a3.97 3.97 0 00-2 .04V8a1 1 0 10-2 0v.19A4.69 4.69 0 018 6a4 4 0 014 0zm0 14a4 4 0 01-4-4v-4a4 4 0 018 0v4a4 4 0 01-4 4z"/>
-          </svg>
+        <Fab
+          label="Report a bug"
+          column="editor"
+          stacked={stacked}
+          className={stacked ? undefined : "bottom-28"}
+          onClick={handleOpen}
+        >
+          <AlertTriangle className="h-5 w-5" aria-hidden="true" />
         </Fab>
       )}
 
@@ -246,7 +258,7 @@ export function BugReportFAB() {
               className={cn(
                 "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
                 isCritical
-                  ? "bg-red-600 focus-visible:ring-red-600"
+                  ? "bg-danger focus-visible:ring-danger"
                   : "bg-base-200 focus-visible:ring-base-200",
               )}
             >
@@ -262,24 +274,20 @@ export function BugReportFAB() {
 
           {/* Description */}
           <div>
-            <label className="mb-1 block text-sm font-medium text-base-contrast" htmlFor="bug-description">
-              Description
-            </label>
-            <textarea
-              id="bug-description"
+            <Textarea
+              label="Description"
               rows={4}
               value={description}
-              onChange={(e) => {
-                setDescription(e.target.value);
-                if (descriptionError && e.target.value.trim()) {
+              onChange={(value) => {
+                setDescription(value);
+                if (descriptionError && value.trim()) {
                   setDescriptionError(null);
                 }
               }}
               placeholder="Describe the issue..."
-              className="w-full rounded-md border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast placeholder:text-base-contrast/50 resize-none"
             />
             {descriptionError && (
-              <p className="mt-1 text-xs text-red-600">{descriptionError}</p>
+              <p className="mt-1 text-xs text-danger">{descriptionError}</p>
             )}
           </div>
 
@@ -304,7 +312,7 @@ export function BugReportFAB() {
                 Drop images here or paste from clipboard
               </p>
             </div>
-            {imageNotice && <p className="mt-1 text-xs text-red-600">{imageNotice}</p>}
+            {imageNotice && <p className="mt-1 text-xs text-danger">{imageNotice}</p>}
 
             {/* Thumbnail previews */}
             {images.length > 0 && (
@@ -316,14 +324,13 @@ export function BugReportFAB() {
                       alt={img.name}
                       className="h-16 w-16 rounded object-cover border border-base-200"
                     />
-                    <button
-                      type="button"
+                    <IconButton
+                      icon={<X size={12} />}
                       onClick={() => handleRemoveImage(index)}
-                      aria-label={`Remove screenshot ${img.name}`}
-                      className="absolute -top-1.5 -right-1.5 hidden h-5 w-5 items-center justify-center rounded-full bg-red-600 text-white text-xs group-hover:flex"
-                    >
-                      ×
-                    </button>
+                      label={`Remove screenshot ${img.name}`}
+                      size="sm"
+                      className="absolute -top-1.5 -right-1.5 hidden rounded-full bg-danger text-white group-hover:flex"
+                    />
                   </div>
                 ))}
               </div>
@@ -332,26 +339,29 @@ export function BugReportFAB() {
 
           {/* Submit error */}
           {submitError && (
-            <p className="text-sm text-red-600">{submitError}</p>
+            <p className="text-sm text-danger">{submitError}</p>
           )}
 
           {/* Submit button */}
-          <button
+          <Button
             type="button"
+            variant="brand"
+            size="md"
+            fullWidth
             onClick={handleSubmit}
-            disabled={isSubmitting}
-            className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-contrast hover:opacity-90 transition-opacity disabled:opacity-60"
+            isLoading={isSubmitting}
+            loadingLabel="Submitting…"
           >
-            {isSubmitting ? "Submitting..." : "Submit"}
-          </button>
+            Submit
+          </Button>
         </div>
       </EditorModal>
 
       {/* Toast */}
       {toast && (
-        <div className="fixed bottom-4 left-1/2 z-[60] -translate-x-1/2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white shadow-lg">
-          {toast}
-        </div>
+        <Notice tone="success" placement="toast">
+          {toast.message}
+        </Notice>
       )}
     </>
   );