@drawnagency/primitives 0.1.0

package/src/components/shared/Navigation.tsx

@@ -0,0 +1,196 @@
+import { useState, useCallback, useEffect } from "react";
+import { cn } from "../../lib/cn";
+import { Toggle } from "./Toggle";
+import type { NavItem } from "../../lib/nav";
+import { editModeEvent, navChangeEvent, darkModeEvent } from "../../lib/events";
+import { useActiveHeadings } from "../../hooks/useActiveHeadings";
+
+interface Props {
+  navLinks: NavItem[];
+  siteName: string;
+  darkMode: "light" | "dark" | "optional";
+}
+
+export default function Navigation({ navLinks: initialNavLinks, siteName, darkMode }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
+  const [isDark, setIsDark] = useState(false);
+  const [navLinks, setNavLinks] = useState<NavItem[]>(initialNavLinks);
+
+  useEffect(() => {
+    const unlistenEdit = editModeEvent.listen(({ isEditMode }) => setIsEditMode(isEditMode));
+    const unlistenNav = navChangeEvent.listen((links) => setNavLinks(links));
+    const unlistenDark = darkModeEvent.listen((mode) => setCurrentDarkMode(mode as typeof darkMode));
+    return () => { unlistenEdit(); unlistenNav(); unlistenDark(); };
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    setIsDark(root.classList.contains("dark"));
+    const observer = new MutationObserver(() => {
+      setIsDark(root.classList.contains("dark"));
+    });
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  const handleThemeToggle = useCallback((next: boolean) => {
+    const root = document.documentElement;
+    root.classList.add("theme-changing");
+    root.classList.toggle("dark", next);
+    localStorage.setItem("theme", next ? "dark" : "light");
+    setTimeout(() => root.classList.remove("theme-changing"), 200);
+  }, []);
+
+  // Build ID maps for scroll tracking
+  const parentIds = navLinks.map((item) => item.href.replace("#", ""));
+  const childIdsByParent: Record<string, string[]> = {};
+  const grandchildIdsByChild: Record<string, string[]> = {};
+
+  for (const parent of navLinks) {
+    const pid = parent.href.replace("#", "");
+    childIdsByParent[pid] = parent.children.map((c) => c.href.replace("#", ""));
+    for (const child of parent.children) {
+      const cid = child.href.replace("#", "");
+      grandchildIdsByChild[cid] = child.children.map((gc) => gc.href.replace("#", ""));
+    }
+  }
+
+  const { activeParentId, activeChildId, activeGrandchildId, setActiveSection } =
+    useActiveHeadings(parentIds, childIdsByParent, grandchildIdsByChild);
+
+  const handleNav = useCallback((href: string) => {
+    const id = href.replace("#", "");
+    const el = document.getElementById(id);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth" });
+      setActiveSection(id);
+    }
+    setIsOpen(false);
+  }, [setActiveSection]);
+
+  return (
+    <>
+      {/* Mobile header bar */}
+      <header className="fixed top-0 left-0 right-0 z-50 flex h-16 items-center justify-between bg-base px-4 lg:hidden">
+        <span className="text-lg font-bold text-primary">{siteName}</span>
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="cursor-pointer p-2 text-base-contrast"
+          aria-label="Toggle navigation"
+        >
+          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            {isOpen
+              ? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            }
+          </svg>
+        </button>
+      </header>
+
+      {/* Backdrop */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setIsOpen(false)}
+        />
+      )}
+
+      {/* Sidebar nav */}
+      <nav
+        className={cn(
+          "fixed top-0 left-0 z-40 h-full w-64 overflow-y-auto bg-base pt-16 transition-transform lg:translate-x-0",
+          isOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        {/* Desktop header */}
+        <div className="hidden px-4 py-4 lg:block">
+          <span className="text-lg font-bold text-primary">{siteName}</span>
+        </div>
+
+        <ul className="space-y-1 px-4 py-2">
+          {navLinks.map((parent) => {
+            const pid = parent.href.replace("#", "");
+            const isActiveParent = activeParentId === pid;
+
+            return (
+              <li key={pid}>
+                <button
+                  onClick={() => handleNav(parent.href)}
+                  className={cn(
+                    "cursor-pointer w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
+                    isActiveParent ? "text-primary" : "text-base-contrast hover:text-primary",
+                    !isEditMode && parent.status && parent.status !== "published" && "opacity-50",
+                  )}
+                >
+                  {parent.label}
+                </button>
+
+                {isActiveParent && parent.children.length > 0 && (
+                  <ul className="ml-3 mt-1 space-y-1 border-l border-base-200 pl-3">
+                    {parent.children.map((child) => {
+                      const cid = child.href.replace("#", "");
+                      const isActiveChild = activeChildId === cid;
+
+                      return (
+                        <li key={cid}>
+                          <button
+                            onClick={() => handleNav(child.href)}
+                            className={cn(
+                              "cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
+                              isActiveChild ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
+                              !isEditMode && child.status && child.status !== "published" && "opacity-50",
+                            )}
+                          >
+                            {child.label}
+                          </button>
+
+                          {isActiveChild && child.children.length > 0 && (
+                            <ul className="ml-3 mt-1 space-y-1">
+                              {child.children.map((gc) => {
+                                const gid = gc.href.replace("#", "");
+                                return (
+                                  <li key={gid}>
+                                    <button
+                                      onClick={() => handleNav(gc.href)}
+                                      className={cn(
+                                        "cursor-pointer block w-full px-2 py-1 text-left text-xs transition-colors",
+                                        activeGrandchildId === gid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
+                                        !isEditMode && gc.status && gc.status !== "published" && "opacity-50",
+                                      )}
+                                    >
+                                      {gc.label}
+                                    </button>
+                                  </li>
+                                );
+                              })}
+                            </ul>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+
+        {currentDarkMode === "optional" && (
+          <div className="mt-auto border-t border-base-200 px-4 py-4">
+            <div className="flex items-center gap-2 text-sm text-base-contrast-light">
+              <span className={cn(!isDark && "text-base-contrast")}>Light</span>
+              <Toggle
+                checked={isDark}
+                onChange={handleThemeToggle}
+                label="Toggle dark mode"
+              />
+              <span className={cn(isDark && "text-base-contrast")}>Dark</span>
+            </div>
+          </div>
+        )}
+      </nav>
+    </>
+  );
+}

package/src/components/shared/PasswordInput.tsx

@@ -0,0 +1,64 @@
+import { useId, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { IconButton } from "./IconButton";
+import { FormLabel } from "./FormLabel";
+
+interface PasswordInputProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  autoComplete: "current-password" | "new-password";
+  placeholder?: string;
+  disabled?: boolean;
+  showToggle?: boolean;
+  className?: string;
+}
+
+export function PasswordInput({
+  label,
+  value,
+  onChange,
+  autoComplete,
+  placeholder,
+  disabled,
+  showToggle = false,
+  className,
+}: PasswordInputProps) {
+  const id = useId();
+  const [revealed, setRevealed] = useState(false);
+
+  return (
+    <div className={className}>
+      <FormLabel htmlFor={id}>{label}</FormLabel>
+      <div className="relative">
+        <input
+          id={id}
+          type={revealed ? "text" : "password"}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          autoComplete={autoComplete}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={cn(
+            "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",
+            showToggle && "pr-9",
+            disabled && "cursor-not-allowed opacity-50",
+          )}
+        />
+        {showToggle && (
+          <IconButton
+            icon={revealed ? <EyeOff size={16} /> : <Eye size={16} />}
+            label={revealed ? "Hide password" : "Show password"}
+            size="sm"
+            aria-pressed={revealed}
+            disabled={disabled}
+            onClick={() => setRevealed((v) => !v)}
+            className="absolute inset-y-0 right-0 my-auto px-2 disabled:cursor-not-allowed disabled:opacity-50"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/shared/Popover.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef, type ReactNode, type RefObject } from "react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import { cn } from "../../lib/cn";
+
+interface PopoverProps {
+  isOpen: boolean;
+  onClose: () => void;
+  anchorRef: RefObject<HTMLElement | null>;
+  children: ReactNode;
+  align?: "start" | "end";
+  className?: string;
+}
+
+export function Popover({
+  isOpen,
+  onClose,
+  anchorRef,
+  children,
+  align = "start",
+  className,
+}: PopoverProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useFocusTrap(panelRef, isOpen);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    function onMouseDown(e: MouseEvent) {
+      const target = e.target as Node;
+      if (panelRef.current?.contains(target)) return;
+      if (anchorRef.current?.contains(target)) return;
+      onClose();
+    }
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("mousedown", onMouseDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("mousedown", onMouseDown);
+    };
+  }, [isOpen, onClose, anchorRef]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={panelRef}
+      role="dialog"
+      aria-modal="false"
+      className={cn(
+        "absolute top-full z-50 mt-1 rounded-md border border-base-200 bg-base shadow-lg",
+        align === "end" ? "right-0" : "left-0",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/shared/PopoverItem.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+interface PopoverItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+export const PopoverItem = forwardRef<HTMLButtonElement, PopoverItemProps>(
+  function PopoverItem({ className, children, ...rest }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          "flex w-full cursor-pointer items-center gap-3 px-3 py-1.5 text-left hover:bg-base-accent",
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+);

package/src/components/shared/Select.tsx

@@ -0,0 +1,60 @@
+import { useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { FormLabel } from "./FormLabel";
+
+interface SelectOption {
+  value: string;
+  label: string;
+}
+
+interface SelectProps {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+  disabled?: boolean;
+  className?: string;
+  selectClassName?: string;
+}
+
+export function Select({
+  label,
+  value,
+  onChange,
+  options,
+  disabled,
+  className,
+  selectClassName,
+}: SelectProps) {
+  const id = useId();
+  return (
+    <div className={className}>
+      {label && <FormLabel htmlFor={id}>{label}</FormLabel>}
+      <div className="relative">
+        <select
+          id={id}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          className={cn(
+            "w-full appearance-none rounded border border-base-200 bg-base py-2 pr-8 pl-3 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",
+            selectClassName,
+          )}
+        >
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        <ChevronDown
+          size={14}
+          className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-base-contrast-light"
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/shared/Textarea.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useId, type TextareaHTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+import { FormLabel } from "./FormLabel";
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+  label: string;
+  onChange: (value: string) => void;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { label, value, onChange, rows = 3, className, disabled, ...rest },
+  ref,
+) {
+  const id = useId();
+  return (
+    <div className={className}>
+      <FormLabel htmlFor={id}>{label}</FormLabel>
+      <textarea
+        ref={ref}
+        id={id}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        rows={rows}
+        disabled={disabled}
+        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",
+        )}
+        {...rest}
+      />
+    </div>
+  );
+});

package/src/components/shared/Toggle.tsx

@@ -0,0 +1,35 @@
+import { cn } from "../../lib/cn";
+
+interface Props {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Toggle({ checked, onChange, label, disabled, className }: Props) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors",
+        checked ? "bg-primary" : "bg-base-200",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "inline-block h-4 w-4 transform rounded-full bg-base shadow transition",
+          checked ? "translate-x-[18px]" : "translate-x-0.5",
+        )}
+      />
+    </button>
+  );
+}

package/src/components/shared/Tooltip.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+interface TooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Tooltip({ content, children, className }: TooltipProps) {
+  return (
+    <div className={cn("group/tooltip relative inline-flex", className)}>
+      {children}
+      <span
+        className="pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 opacity-0 transition-opacity delay-300 group-hover/tooltip:opacity-100"
+        role="tooltip"
+      >
+        <span className="block whitespace-nowrap rounded bg-tooltip px-2 py-1 text-center text-xs leading-relaxed text-tooltip-muted">
+          {content}
+        </span>
+      </span>
+    </div>
+  );
+}
+
+export function Kbd({ children }: { children: ReactNode }) {
+  return <strong className="text-tooltip-contrast">{children}</strong>;
+}

package/src/components/shared/icons.tsx

@@ -0,0 +1,28 @@
+/**
+ * Shared icon button presets used across editor chrome.
+ * 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";
+
+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

@@ -0,0 +1,94 @@
+import { useState, type FormEvent } from "react";
+import { AudienceColorSchema } from "../../schemas/audience";
+import { Input } from "../shared/Input";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import { ColorPicker } from "../shared/ColorPicker";
+
+interface Props {
+  onSubmit: (data: { displayName: string; color: string | null; password: string }) => Promise<void>;
+  onCancel: () => void;
+}
+
+const DEFAULT_COLOR = "#3b82f6";
+
+export function AudienceAddForm({ onSubmit, onCancel }: Props) {
+  const [name, setName] = useState("");
+  const [color, setColor] = useState(DEFAULT_COLOR);
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    if (name.trim().length === 0) {
+      setError("Name is required");
+      return;
+    }
+    const colorResult = AudienceColorSchema.safeParse(color);
+    if (!colorResult.success) {
+      setError("Invalid color");
+      return;
+    }
+    if (password.length === 0) {
+      setError("Password is required");
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await onSubmit({ displayName: name, color, password });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Add failed");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      autoComplete="off"
+      className="space-y-3 rounded border border-base-200 px-3 py-3"
+    >
+      <div className="flex items-start gap-3">
+        <ColorPicker value={color} onChange={setColor} className="mt-[1.625rem]" />
+        <div className="flex-1 space-y-2">
+          <Input
+            label="Name"
+            value={name}
+            onChange={setName}
+          />
+          <PasswordInput
+            label="Password"
+            value={password}
+            onChange={setPassword}
+            autoComplete="new-password"
+            showToggle
+          />
+        </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={onCancel}
+          disabled={submitting}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          variant="primary"
+          isLoading={submitting}
+          loadingLabel="Adding..."
+        >
+          Add
+        </Button>
+      </div>
+    </form>
+  );
+}