@drawnagency/primitives 0.1.0

package/src/components/shared/Button.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export type ButtonVariant = "primary" | "brand" | "secondary" | "destructive" | "ghost";
+export type ButtonSize = "sm" | "md";
+export type ButtonTone = "neutral" | "destructive";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  tone?: ButtonTone;
+  fullWidth?: boolean;
+  isLoading?: boolean;
+  loadingLabel?: string;
+  children?: ReactNode;
+}
+
+const boxSize: Record<ButtonSize, string> = {
+  sm: "rounded px-3 py-1.5 text-xs font-medium",
+  md: "rounded px-4 py-2 text-sm font-medium",
+};
+
+const ghostSize: Record<ButtonSize, string> = {
+  sm: "text-xs font-medium",
+  md: "text-sm font-medium",
+};
+
+const variantClasses: Record<Exclude<ButtonVariant, "ghost">, string> = {
+  primary: "bg-base-contrast text-base-accent hover:bg-base-contrast/90",
+  brand: "bg-primary text-primary-contrast hover:opacity-90",
+  secondary: "border border-base-200 text-base-contrast hover:bg-base-accent",
+  destructive:
+    "border border-red-600 text-red-600 hover:bg-red-600 hover:text-white",
+};
+
+const ghostToneClasses: Record<ButtonTone, string> = {
+  neutral: "text-base-contrast-light hover:text-base-contrast",
+  destructive: "text-red-600 hover:text-red-800",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = "primary",
+    size = "sm",
+    tone = "neutral",
+    fullWidth = false,
+    isLoading = false,
+    loadingLabel,
+    disabled,
+    className,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const isGhost = variant === "ghost";
+  const resolvedDisabled = disabled || isLoading;
+  const label = isLoading && loadingLabel ? loadingLabel : children;
+
+  return (
+    <button
+      ref={ref}
+      disabled={resolvedDisabled}
+      className={cn(
+        "inline-flex items-center justify-center transition-colors",
+        isGhost ? ghostSize[size] : boxSize[size],
+        isGhost ? ghostToneClasses[tone] : variantClasses[variant],
+        fullWidth && "w-full",
+        resolvedDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        className,
+      )}
+      {...rest}
+    >
+      {label}
+    </button>
+  );
+});

package/src/components/shared/Checkbox.tsx

@@ -0,0 +1,73 @@
+import { useId, type ReactNode } from "react";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+interface CheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  className?: string;
+  startAdornment?: ReactNode;
+  align?: "start" | "center";
+}
+
+export function Checkbox({
+  checked,
+  onChange,
+  label,
+  description,
+  disabled,
+  className,
+  startAdornment,
+  align = "start",
+}: CheckboxProps) {
+  const id = useId();
+  return (
+    <label
+      htmlFor={id}
+      className={cn(
+        "flex cursor-pointer gap-3 select-none hover:opacity-80",
+        align === "start" ? "items-start" : "items-center",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "relative flex h-5 w-5 shrink-0 items-center justify-center",
+          align === "start" && "mt-0.5",
+        )}
+      >
+        <input
+          id={id}
+          type="checkbox"
+          checked={checked}
+          disabled={disabled}
+          onChange={(e) => onChange(e.target.checked)}
+          className="sr-only"
+        />
+        <span
+          aria-hidden="true"
+          className={cn(
+            "flex h-5 w-5 items-center justify-center rounded border transition-colors",
+            checked
+              ? "border-primary bg-primary text-primary-contrast"
+              : "border-base-300 bg-base hover:border-primary",
+            disabled && "pointer-events-none",
+          )}
+        >
+          {checked && <Check size={14} strokeWidth={3} />}
+        </span>
+      </span>
+      {startAdornment}
+      <div className="text-sm">
+        <span className="font-medium text-base-contrast">{label}</span>
+        {description && (
+          <span className="block text-base-contrast-light">{description}</span>
+        )}
+      </div>
+    </label>
+  );
+}

package/src/components/shared/ColorPicker.tsx

@@ -0,0 +1,28 @@
+import { cn } from "../../lib/cn";
+
+interface ColorPickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  className?: string;
+}
+
+export function ColorPicker({ value, onChange, label = "Color", className }: ColorPickerProps) {
+  return (
+    <label
+      className={cn(
+        "inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-base-200 focus-within:outline focus-within:outline-2 focus-within:outline-base-contrast",
+        className,
+      )}
+      style={{ backgroundColor: value }}
+    >
+      <input
+        type="color"
+        aria-label={label}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="sr-only"
+      />
+    </label>
+  );
+}

package/src/components/shared/ErrorBoundary.tsx

@@ -0,0 +1,92 @@
+import { Component, type ReactNode, type ErrorInfo } from "react";
+import { cn } from "../../lib/cn";
+import { Button } from "./Button";
+
+interface ErrorBoundaryProps {
+  /** Shown in the fallback UI to help identify which section failed */
+  label?: string;
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Catches render errors in children and shows a recoverable fallback UI.
+ * Designed to wrap individual section components so a single broken section
+ * doesn't take down the entire editor.
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error(
+      `[ErrorBoundary${this.props.label ? `: ${this.props.label}` : ""}] Render error:`,
+      error,
+      info.componentStack,
+    );
+  }
+
+  private handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          role="alert"
+          className={cn(
+            "flex flex-col items-center justify-center gap-3 rounded border border-red-200 bg-red-50 px-6 py-10 text-center",
+            "dark:border-red-900/40 dark:bg-red-950/20",
+          )}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            className="h-6 w-6 text-red-500"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+              clipRule="evenodd"
+            />
+          </svg>
+
+          <p className="text-sm font-medium text-red-700 dark:text-red-400">
+            This section couldn&apos;t be rendered
+          </p>
+
+          {this.props.label && (
+            <p className="text-xs text-red-500 dark:text-red-500/80">
+              Section: {this.props.label}
+            </p>
+          )}
+
+          {this.state.error && (
+            <p className="max-w-md text-xs text-red-400 dark:text-red-500/60">
+              {this.state.error.message}
+            </p>
+          )}
+
+          <Button variant="secondary" size="sm" onClick={this.handleRetry} className="mt-1">
+            Try again
+          </Button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/shared/FontPicker.tsx

@@ -0,0 +1,300 @@
+import { useState, useRef, useEffect, useId, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { FormLabel } from "./FormLabel";
+import fontCatalog from "../../data/google-fonts.json";
+
+interface FontEntry {
+  family: string;
+  category: string;
+}
+
+interface FontPickerProps {
+  label: string;
+  value: string;
+  onChange: (family: string) => void;
+}
+
+const fonts = fontCatalog as FontEntry[];
+
+function displayValue(value: string): string {
+  return value === "system-ui" ? "System Default" : value;
+}
+
+function loadFontPreview(families: string[]) {
+  if (families.length === 0) return;
+  const params = families.map((f) => `family=${f.replace(/ /g, "+")}:wght@400;700`).join("&");
+  const href = `https://fonts.googleapis.com/css2?${params}&display=swap`;
+
+  if (document.querySelector(`link[href="${href}"]`)) return;
+
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = href;
+  document.head.appendChild(link);
+}
+
+export function FontPicker({ label, value, onChange }: FontPickerProps) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [highlightIndex, setHighlightIndex] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputWrapRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const loadedRef = useRef(new Set<string>());
+  const batchRef = useRef<string[]>([]);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number; width: number }>({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+
+  useEffect(() => {
+    clearTimeout(debounceRef.current);
+    if (!query) {
+      setDebouncedQuery("");
+      return;
+    }
+    debounceRef.current = setTimeout(() => setDebouncedQuery(query), 150);
+    return () => clearTimeout(debounceRef.current);
+  }, [query]);
+
+  const filtered = useMemo(
+    () =>
+      debouncedQuery
+        ? fonts.filter((f) => f.family.toLowerCase().includes(debouncedQuery.toLowerCase()))
+        : [],
+    [debouncedQuery],
+  );
+
+  const options: { family: string; display: string }[] = [
+    { family: "system-ui", display: "System Default" },
+    ...filtered.map((f) => ({ family: f.family, display: f.family })),
+  ];
+
+  const scheduleLoad = useCallback((family: string) => {
+    if (family === "system-ui" || loadedRef.current.has(family)) return;
+    loadedRef.current.add(family);
+    batchRef.current.push(family);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      const batch = batchRef.current.splice(0);
+      if (batch.length > 0) loadFontPreview(batch);
+    }, 100);
+  }, []);
+
+  const observerRef = useRef<IntersectionObserver | undefined>(undefined);
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timerRef.current);
+      clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!open || typeof IntersectionObserver === "undefined") return;
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const family = (entry.target as HTMLElement).dataset.family;
+            if (family) scheduleLoad(family);
+          }
+        }
+      },
+      { root: listRef.current, threshold: 0 },
+    );
+
+    const items = listRef.current?.querySelectorAll("[data-family]");
+    items?.forEach((el) => observerRef.current!.observe(el));
+
+    return () => observerRef.current?.disconnect();
+  }, [open, debouncedQuery, scheduleLoad]);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open || !inputWrapRef.current) return;
+    function updatePosition() {
+      const rect = inputWrapRef.current!.getBoundingClientRect();
+      setDropdownPos({
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+      });
+    }
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: MouseEvent) {
+      const target = e.target as Node;
+      if (
+        containerRef.current && !containerRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+
+  useEffect(() => {
+    setHighlightIndex(0);
+  }, [debouncedQuery]);
+
+  function handleSelect(family: string) {
+    onChange(family);
+    setOpen(false);
+    setQuery("");
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "Enter") {
+        setOpen(true);
+        e.preventDefault();
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setHighlightIndex((i) => Math.min(i + 1, options.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (options[highlightIndex]) handleSelect(options[highlightIndex].family);
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        setQuery("");
+        break;
+    }
+  }
+
+  useEffect(() => {
+    if (!open || !listRef.current) return;
+    const el = listRef.current.children[highlightIndex] as HTMLElement | undefined;
+    el?.scrollIntoView?.({ block: "nearest" });
+  }, [highlightIndex, open]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <FormLabel htmlFor={id}>{label}</FormLabel>
+      <div ref={inputWrapRef} className="relative">
+        <input
+          id={id}
+          type="text"
+          role="combobox"
+          autoComplete="off"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-autocomplete="list"
+          aria-controls={`${id}-listbox`}
+          aria-activedescendant={open ? `${id}-option-${highlightIndex}` : undefined}
+          value={open ? query : displayValue(value)}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            if (!open) setOpen(true);
+          }}
+          onFocus={() => {
+            setOpen(true);
+            setQuery("");
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="Search fonts..."
+          className={cn(
+            "w-full 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",
+          )}
+          style={
+            !open && value !== "system-ui" ? { fontFamily: `"${value}", system-ui, sans-serif` } : undefined
+          }
+        />
+        <ChevronDown
+          size={14}
+          className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-base-contrast-light"
+        />
+      </div>
+      {open &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            className="rounded border border-base-200 bg-base shadow-lg"
+            style={{
+              position: "fixed",
+              top: dropdownPos.top,
+              left: dropdownPos.left,
+              width: dropdownPos.width,
+              zIndex: 9999,
+            }}
+          >
+            <ul
+              ref={listRef}
+              id={`${id}-listbox`}
+              role="listbox"
+              className="max-h-64 overflow-y-auto py-1"
+            >
+              {options.map((opt, i) => (
+                <li
+                  key={opt.family}
+                  id={`${id}-option-${i}`}
+                  role="option"
+                  aria-selected={opt.family === value}
+                  data-family={opt.family}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    handleSelect(opt.family);
+                  }}
+                  onMouseEnter={() => setHighlightIndex(i)}
+                  className={cn(
+                    "cursor-pointer px-3 py-1.5 text-sm",
+                    i === highlightIndex && "bg-base-100",
+                    opt.family === value && "font-medium text-base-contrast",
+                  )}
+                  style={
+                    opt.family !== "system-ui"
+                      ? { fontFamily: `"${opt.family}", system-ui, sans-serif` }
+                      : undefined
+                  }
+                >
+                  {opt.display}
+                </li>
+              ))}
+              {debouncedQuery && filtered.length === 0 && (
+                <li className="px-3 py-1.5 text-sm text-base-contrast-light">No fonts found</li>
+              )}
+              {!debouncedQuery && (
+                <li className="px-3 py-1.5 text-sm text-base-contrast-light">
+                  Type to search fonts...
+                </li>
+              )}
+            </ul>
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+}

package/src/components/shared/FormLabel.tsx

@@ -0,0 +1,18 @@
+import { cn } from "../../lib/cn";
+
+interface FormLabelProps {
+  htmlFor?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function FormLabel({ htmlFor, children, className }: FormLabelProps) {
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={cn("mb-1.5 block text-sm font-medium text-base-contrast", className)}
+    >
+      {children}
+    </label>
+  );
+}

package/src/components/shared/IconButton.tsx

@@ -0,0 +1,45 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+type Size = "sm" | "md" | "lg";
+type Intent = "default" | "destructive" | "primary";
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: ReactNode;
+  label: string;
+  size?: Size;
+  intent?: Intent;
+}
+
+const sizeClasses: Record<Size, string> = {
+  sm: "h-chrome-sm w-chrome-sm",
+  md: "h-chrome-md w-chrome-md",
+  lg: "h-chrome-lg w-chrome-lg",
+};
+
+const intentClasses: Record<Intent, string> = {
+  default: "text-base-contrast-light hover:text-base-contrast",
+  destructive: "text-destructive hover:text-destructive-hover",
+  primary: "text-primary/60 hover:text-primary",
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton({ icon, label, size = "md", intent = "default", className, ...rest }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          "cursor-pointer flex items-center justify-center rounded transition-colors",
+          sizeClasses[size],
+          intentClasses[intent],
+          className,
+        )}
+        aria-label={label}
+        {...rest}
+      >
+        {icon}
+      </button>
+    );
+  },
+);

package/src/components/shared/Input.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useId, type InputHTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+import { FormLabel } from "./FormLabel";
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  label: string;
+  onChange: (value: string) => void;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { label, value, onChange, type = "text", className, disabled, ...rest },
+  ref,
+) {
+  const id = useId();
+  return (
+    <div className={className}>
+      <FormLabel htmlFor={id}>{label}</FormLabel>
+      <input
+        ref={ref}
+        id={id}
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        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",
+          disabled && "cursor-not-allowed opacity-50",
+        )}
+        {...rest}
+      />
+    </div>
+  );
+});