@drawnagency/primitives 0.1.0

package/src/components/shell/AudienceRow.tsx

@@ -0,0 +1,171 @@
+import { useState } from "react";
+import type { Audience } from "../../auth/types";
+import { Input } from "../shared/Input";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import { ColorPicker } from "../shared/ColorPicker";
+
+interface Props {
+  audience: Audience;
+  isDefault: boolean;
+  canMutate: boolean;
+  onSave: (patch: { displayName?: string; color?: string | null; password?: string }) => Promise<void>;
+  onDelete: () => Promise<void>;
+}
+
+const PLACEHOLDER_COLOR = "#94a3b8";
+
+export function AudienceRow({
+  audience,
+  isDefault,
+  canMutate,
+  onSave,
+  onDelete,
+}: Props) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftDisplayName, setDraftDisplayName] = useState(audience.displayName);
+  const [draftColor, setDraftColor] = useState(audience.color ?? PLACEHOLDER_COLOR);
+  const [draftPassword, setDraftPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  function startEdit() {
+    setIsEditing(true);
+    setDraftColor(audience.color ?? PLACEHOLDER_COLOR);
+    setDraftDisplayName(audience.displayName);
+    setDraftPassword("");
+    setError(null);
+  }
+
+  function cancelEdit() {
+    setIsEditing(false);
+    setError(null);
+  }
+
+  async function save() {
+    setError(null);
+    setSaving(true);
+    const patch: { displayName?: string; color?: string | null; password?: string } = {};
+    if (draftDisplayName.trim().length === 0) {
+      setError("Name is required");
+      setSaving(false);
+      return;
+    }
+    if (draftDisplayName !== audience.displayName) {
+      patch.displayName = draftDisplayName;
+    }
+    if (draftColor !== (audience.color ?? PLACEHOLDER_COLOR)) {
+      patch.color = draftColor;
+    }
+    if (draftPassword.length > 0) {
+      patch.password = draftPassword;
+    }
+    if (Object.keys(patch).length === 0) {
+      setIsEditing(false);
+      setSaving(false);
+      return;
+    }
+    try {
+      await onSave(patch);
+      setIsEditing(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function remove() {
+    if (!confirm(`Remove audience "${audience.displayName}"?`)) return;
+    try {
+      await onDelete();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Delete failed");
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <div className="space-y-3 rounded border border-base-200 px-3 py-3">
+        <div className="flex items-start gap-3">
+          <ColorPicker value={draftColor} onChange={setDraftColor} className="mt-[1.625rem]" />
+          <div className="flex-1 space-y-2">
+            <Input
+              label="Display name"
+              value={draftDisplayName}
+              onChange={setDraftDisplayName}
+            />
+            <PasswordInput
+              label="New password"
+              value={draftPassword}
+              onChange={setDraftPassword}
+              autoComplete="new-password"
+              placeholder={audience.hasPassword ? "Leave blank to keep current" : "Required"}
+              showToggle
+            />
+            <span className="block text-[11px] text-base-contrast-light">
+              Passwords are hashed — the existing one can't be recovered, only replaced.
+            </span>
+          </div>
+        </div>
+        {error && <p className="text-xs text-red-600">{error}</p>}
+        <div className="flex justify-end gap-2">
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={cancelEdit}
+            disabled={saving}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant="primary"
+            onClick={save}
+            isLoading={saving}
+            loadingLabel="Saving..."
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded border border-base-200 px-3 py-2">
+      <div className="flex items-center gap-3">
+        <span
+          aria-hidden
+          className="inline-block h-4 w-4 rounded-full border border-base-200"
+          style={{ backgroundColor: audience.color ?? PLACEHOLDER_COLOR }}
+        />
+        <span className="flex flex-1 items-center gap-2 text-sm text-base-contrast">
+          {audience.displayName}
+          {isDefault && (
+            <span className="rounded bg-base-accent px-1.5 py-0.5 text-xs text-base-contrast-light">
+              Default
+            </span>
+          )}
+        </span>
+        {audience.hasPassword ? (
+          <span
+            aria-label="Password is set"
+            title="Passwords are hashed and can't be shown. Edit to set a new one."
+            className="text-xs tracking-widest text-base-contrast-light"
+          >
+            ••••
+          </span>
+        ) : canMutate ? (
+          <Button variant="ghost" onClick={startEdit}>Set password</Button>
+        ) : null}
+        {canMutate && (
+          <Button variant="ghost" onClick={startEdit}>Edit</Button>
+        )}
+        {canMutate && !isDefault && (
+          <Button variant="ghost" tone="destructive" onClick={remove}>Remove</Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/shell/EditorContext.tsx

@@ -0,0 +1,44 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+import { editModeEvent } from "../../lib/events";
+
+interface EditorContextValue {
+  isEditMode: boolean;
+  showAllChrome: boolean;
+  toggleEditMode: () => void;
+  toggleShowAllChrome: () => void;
+}
+
+const EditorContext = createContext<EditorContextValue | null>(null);
+
+interface EditorProviderProps {
+  children: ReactNode;
+}
+
+export function EditorProvider({ children }: EditorProviderProps) {
+  const [isEditMode, setIsEditMode] = useState(true);
+  const [showAllChrome, setShowAllChrome] = useState(false);
+
+  const toggleEditMode = useCallback(() => {
+    setIsEditMode((prev) => {
+      const next = !prev;
+      editModeEvent.dispatch({ isEditMode: next });
+      return next;
+    });
+  }, []);
+
+  const toggleShowAllChrome = useCallback(() => setShowAllChrome((prev) => !prev), []);
+
+  return (
+    <EditorContext.Provider value={{ isEditMode, showAllChrome, toggleEditMode, toggleShowAllChrome }}>
+      {children}
+    </EditorContext.Provider>
+  );
+}
+
+export function useEditorContext(): EditorContextValue {
+  const context = useContext(EditorContext);
+  if (!context) {
+    throw new Error("useEditorContext must be used within an EditorProvider");
+  }
+  return context;
+}

package/src/components/shell/EditorLoginForm.tsx

@@ -0,0 +1,130 @@
+import { useState, type FormEvent } from "react";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import { safeRedirect } from "../../lib/safeRedirect";
+
+interface Props {
+  capabilities: {
+    oauth: boolean;
+    emailPassword: boolean;
+    passwordOnly: boolean;
+    userManagement: boolean;
+  };
+  oauthProviders?: ("google" | "github")[];
+  next?: string | null;
+}
+
+export function EditorLoginForm({ capabilities, oauthProviders = [], next }: Props) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handlePasswordSubmit(e: FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const base = capabilities.passwordOnly
+      ? { type: "password", password }
+      : { type: "email", email, password };
+    const body = next ? { ...base, next } : base;
+
+    try {
+      const response = await fetch("/api/auth/sign-in", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        setError(data.error || "Sign-in failed");
+        return;
+      }
+
+      const data = await response.json().catch(() => ({}));
+      window.location.assign(safeRedirect(data.redirectTo, "/edit"));
+    } catch {
+      setError("Network error");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleOAuth(provider: "google" | "github") {
+    // OAuth is handled client-side via Supabase SDK
+    // Implementation depends on Supabase adapter (Task 11)
+    // For now, this is a placeholder that will be wired up later
+  }
+
+  return (
+    <div className="mx-auto max-w-sm space-y-6">
+      {capabilities.oauth && oauthProviders.length > 0 && (
+        <div className="space-y-2">
+          {oauthProviders.map((provider) => (
+            <Button
+              key={provider}
+              type="button"
+              variant="secondary"
+              size="md"
+              onClick={() => handleOAuth(provider)}
+              className="w-full"
+            >
+              Continue with {provider.charAt(0).toUpperCase() + provider.slice(1)}
+            </Button>
+          ))}
+          <div className="relative py-2">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-base-200" />
+            </div>
+            <div className="relative flex justify-center text-xs">
+              <span className="bg-base px-2 text-base-contrast-light">or</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <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>
+        )}
+
+        <PasswordInput
+          label="Password"
+          value={password}
+          onChange={setPassword}
+          autoComplete="current-password"
+        />
+
+        {error && (
+          <p className="text-sm text-red-600">{error}</p>
+        )}
+
+        <Button
+          type="submit"
+          variant="primary"
+          size="md"
+          isLoading={loading}
+          loadingLabel="Signing in..."
+          className="w-full"
+        >
+          Sign In
+        </Button>
+      </form>
+    </div>
+  );
+}

package/src/components/shell/EditorModal.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useId, useRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { RemoveIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import { cn } from "../../lib/cn";
+
+interface EditorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  blocking?: boolean;
+  size?: "standard" | "large" | "settings";
+  noPadding?: boolean;
+  children: ReactNode;
+}
+
+export function EditorModal({ isOpen, onClose, title, blocking = false, size = "standard", noPadding = false, children }: EditorModalProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+
+  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]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div
+      data-testid="modal-backdrop"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onMouseDown={
+        blocking
+          ? undefined
+          : (e) => {
+              if (e.target === e.currentTarget) onClose();
+            }
+      }
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        className={cn(
+          "mx-4 w-full rounded-lg bg-base shadow-lg",
+          size === "large"
+            ? "max-w-[1400px] max-h-[900px] h-[90vh] flex flex-col"
+            : size === "settings"
+              ? "max-w-lg flex flex-col min-h-[32rem] max-h-[calc(100vh-4rem)]"
+              : "max-w-md",
+        )}
+      >
+        <div className="flex items-center justify-between border-b border-base-200 px-6 py-4">
+          <h3 id={titleId} className="text-lg font-semibold text-base-contrast">{title}</h3>
+          {!blocking && (
+            <IconButton
+              icon={<RemoveIcon size={18} />}
+              label="Close modal"
+              size="lg"
+              onClick={onClose}
+              className="rounded-md hover:bg-base-accent"
+            />
+          )}
+        </div>
+        <div className={cn(
+          !noPadding && "px-6 py-4",
+          size === "large" && "flex-1 overflow-y-auto",
+          size === "settings" && "flex-1 flex flex-col overflow-hidden",
+        )}>
+          {children}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/components/shell/EditorModalContext.tsx

@@ -0,0 +1,40 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+
+interface ModalState {
+  title: string;
+  content: ReactNode;
+}
+
+interface EditorModalContextValue {
+  modalState: ModalState | null;
+  openModal: (title: string, content: ReactNode) => void;
+  closeModal: () => void;
+}
+
+const EditorModalContext = createContext<EditorModalContextValue | null>(null);
+
+export function EditorModalProvider({ children }: { children: ReactNode }) {
+  const [modalState, setModalState] = useState<ModalState | null>(null);
+
+  const openModal = useCallback((title: string, content: ReactNode) => {
+    setModalState({ title, content });
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setModalState(null);
+  }, []);
+
+  return (
+    <EditorModalContext.Provider value={{ modalState, openModal, closeModal }}>
+      {children}
+    </EditorModalContext.Provider>
+  );
+}
+
+export function useEditorModal(): EditorModalContextValue {
+  const context = useContext(EditorModalContext);
+  if (!context) {
+    throw new Error("useEditorModal must be used within an EditorModalProvider");
+  }
+  return context;
+}