@drawnagency/primitives 0.1.0

package/src/components/shell/MediaLibraryContext.tsx

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import type { MediaManifest, MediaItem } from "../../media/types";
+import type { SiteConfig } from "../../schemas/site-config";
+
+export interface MediaLibraryContextValue {
+  openSelectModal: (onSelect: (imageId: string) => void) => void;
+  uploadFile: (file: File) => void;
+  uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void) => string;
+  manifest: MediaManifest;
+  pendingItems: MediaItem[];
+  pendingLocalUrls: Record<string, string>;
+  siteConfig: SiteConfig | null;
+}
+
+export const MediaLibraryContext = createContext<MediaLibraryContextValue | null>(null);
+
+export function useMediaLibrary(): MediaLibraryContextValue | null {
+  return useContext(MediaLibraryContext);
+}

package/src/components/shell/MediaLibraryModal.tsx

@@ -0,0 +1,371 @@
+import { useState, useRef, useCallback } from "react";
+import { Search, Upload, Trash2 } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Button } from "../shared/Button";
+import { Select } from "../shared/Select";
+import type { MediaItem, MediaKind } from "../../media/types";
+import { displayFilenameExt, mimeToExt } from "../../media/utils";
+
+export interface MediaLibraryModalProps {
+  mode: "select" | "manage";
+  items: MediaItem[];
+  onSelect: (id: string) => void;
+  onUpload: (files: File[]) => void;
+  onDelete: (ids: string[]) => void;
+  onAltChange?: (id: string, alt: string) => void;
+  referenceCountMap: Record<string, number>;
+  localUrlMap?: Record<string, string>;
+  maxFileSize?: number;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes >= 1048576) return `${Math.round(bytes / 1048576)}MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)}KB`;
+  return `${bytes}B`;
+}
+
+type KindFilter = "all" | MediaKind;
+
+function thumbnailSrc(item: MediaItem, localUrls: Record<string, string>): string {
+  const localUrl = localUrls[item.id];
+  if (localUrl) return localUrl;
+  if (item.kind === "video") {
+    return `/api/media/${item.id}/original.${mimeToExt(item.mimeType)}`;
+  }
+  if (item.kind === "image" && item.variants.length > 0) {
+    const smallest = item.variants.reduce((a, b) => (a.width < b.width ? a : b));
+    return `/api/media/${item.id}/${smallest.width}.webp`;
+  }
+  return `/api/media/${item.id}/poster.webp`;
+}
+
+function displayFilename(item: MediaItem): string {
+  return `${item.originalName}${displayFilenameExt(item.mimeType)}`;
+}
+
+function UploadZone({ onUpload }: { onUpload: (files: File[]) => void }) {
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleFiles = useCallback(
+    (files: FileList | null) => {
+      if (!files || files.length === 0) return;
+      onUpload(Array.from(files));
+    },
+    [onUpload],
+  );
+
+  return (
+    <button
+      type="button"
+      onClick={() => inputRef.current?.click()}
+      onDragOver={(e) => {
+        e.preventDefault();
+        setDragging(true);
+      }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setDragging(false);
+        handleFiles(e.dataTransfer.files);
+      }}
+      className={cn(
+        "flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors",
+        dragging
+          ? "border-primary bg-primary/5"
+          : "border-base-200 hover:border-base-300",
+      )}
+    >
+      <Upload size={24} className="text-base-contrast-light" />
+      <span className="text-sm text-base-contrast-light">
+        Drag &amp; drop files or click to browse
+      </span>
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        accept="image/*,video/*"
+        className="hidden"
+        onChange={(e) => {
+          handleFiles(e.target.files);
+          e.target.value = "";
+        }}
+      />
+    </button>
+  );
+}
+
+export function MediaLibraryModal({
+  mode,
+  items,
+  onSelect,
+  onUpload,
+  onDelete,
+  onAltChange,
+  referenceCountMap,
+  localUrlMap = {},
+  maxFileSize,
+}: MediaLibraryModalProps) {
+  const [search, setSearch] = useState("");
+  const [kindFilter, setKindFilter] = useState<KindFilter>("all");
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [rejectedFiles, setRejectedFiles] = useState<string[]>([]);
+
+  const handleUpload = useCallback((files: File[]) => {
+    if (!maxFileSize) {
+      onUpload(files);
+      return;
+    }
+    const valid: File[] = [];
+    const rejected: string[] = [];
+    for (const file of files) {
+      if (file.size > maxFileSize) {
+        rejected.push(file.name);
+      } else {
+        valid.push(file);
+      }
+    }
+    if (rejected.length > 0) setRejectedFiles(rejected);
+    if (valid.length > 0) onUpload(valid);
+  }, [maxFileSize, onUpload]);
+
+  const filtered = items.filter((item) => {
+    const matchesSearch = item.originalName
+      .toLowerCase()
+      .includes(search.toLowerCase());
+    const matchesKind = kindFilter === "all" || item.kind === kindFilter;
+    return matchesSearch && matchesKind;
+  });
+
+  function toggleSelect(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }
+
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const selectedIds = Array.from(selected);
+  const totalUsage = selectedIds.reduce((sum, id) => sum + (referenceCountMap[id] ?? 0), 0);
+
+  function handleBatchDelete() {
+    if (totalUsage > 0) {
+      setConfirmDelete(true);
+      return;
+    }
+    onDelete(selectedIds);
+    setSelected(new Set());
+  }
+
+  function handleConfirmDelete() {
+    onDelete(selectedIds);
+    setSelected(new Set());
+    setConfirmDelete(false);
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <UploadZone onUpload={handleUpload} />
+
+      {/* Sticky toolbar + confirmation */}
+      <div className="sticky top-[-16px] z-10 -mx-6 space-y-3 bg-base px-6 pb-3 pt-4">
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Search
+              size={14}
+              className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-base-contrast-light"
+            />
+            <input
+              type="text"
+              placeholder="Search media..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full rounded border border-base-200 bg-base py-1.5 pl-8 pr-3 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+          </div>
+
+          <Select
+            value={kindFilter}
+            onChange={(v) => setKindFilter(v as KindFilter)}
+            options={[
+              { value: "all", label: "All types" },
+              { value: "image", label: "Images" },
+              { value: "animated", label: "Animated" },
+              { value: "video", label: "Video" },
+            ]}
+            selectClassName="py-1.5 pr-7 pl-2.5"
+          />
+
+          {mode === "manage" && selected.size > 0 && (
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={handleBatchDelete}
+              className="flex items-center gap-1.5"
+            >
+              <Trash2 size={13} />
+              Delete {selected.size}
+            </Button>
+          )}
+        </div>
+
+        {/* Delete confirmation */}
+        {confirmDelete && (
+          <div className="flex flex-col items-center rounded-lg border border-red-200 bg-red-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-red-900/50 dark:bg-red-950/30">
+            <p className="mb-2 text-center text-sm text-red-800 lg:mb-0 lg:text-left dark:text-red-200">
+              Some of these images are being used. Deleting these will remove them from these references.
+            </p>
+            <div className="flex shrink-0 items-center gap-2">
+              <Button variant="secondary" size="sm" onClick={() => setConfirmDelete(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" size="sm" onClick={handleConfirmDelete}>
+                Confirm Delete
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* File size rejection alert */}
+        {rejectedFiles.length > 0 && maxFileSize && (
+          <div className="flex flex-col items-center rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-amber-900/50 dark:bg-amber-950/30">
+            <p className="mb-2 text-center text-sm text-amber-800 lg:mb-0 lg:text-left dark:text-amber-200">
+              {rejectedFiles.length === 1
+                ? `"${rejectedFiles[0]}" exceeds`
+                : `${rejectedFiles.length} files exceed`} the {formatFileSize(maxFileSize)} file size limit.
+            </p>
+            <div className="flex shrink-0 items-center">
+              <Button variant="secondary" size="sm" onClick={() => setRejectedFiles([])}>
+                Dismiss
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Grid */}
+      {filtered.length === 0 ? (
+        <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
+          <p className="text-sm font-medium text-base-contrast">
+            {items.length === 0 ? "No media uploaded yet" : "No results found"}
+          </p>
+          <p className="text-xs text-base-contrast-light">
+            {items.length === 0
+              ? "Upload files using the drop zone above."
+              : "Try a different search or filter."}
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+          {filtered.map((item) => {
+            const isSelected = selected.has(item.id);
+            const refCount = referenceCountMap[item.id] ?? 0;
+            const usageLabel = refCount === 0 ? "Not used" : `Used ${refCount}x`;
+
+            return (
+              <div
+                key={item.id}
+                className="group flex flex-col gap-1.5"
+                onClick={() => {
+                  if (mode === "select") {
+                    onSelect(item.id);
+                  } else {
+                    toggleSelect(item.id);
+                  }
+                }}
+              >
+                {/* Thumbnail */}
+                <div
+                  className={cn(
+                    "relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 transition-colors",
+                    mode === "select"
+                      ? "border-transparent hover:border-primary"
+                      : isSelected
+                        ? "border-primary"
+                        : "border-transparent hover:border-base-300",
+                  )}
+                >
+                  <div className="h-full w-full bg-base-accent">
+                    {item.kind === "video" ? (
+                      <video
+                        src={thumbnailSrc(item, localUrlMap)}
+                        muted
+                        playsInline
+                        className="h-full w-full object-cover"
+                        onMouseEnter={(e) => e.currentTarget.play().catch(() => {})}
+                        onMouseLeave={(e) => { e.currentTarget.pause(); e.currentTarget.currentTime = 0; }}
+                      />
+                    ) : (
+                      <img
+                        src={thumbnailSrc(item, localUrlMap)}
+                        alt={item.originalName}
+                        className="h-full w-full object-cover"
+                      />
+                    )}
+                  </div>
+
+                  {/* Selection radio — top-left */}
+                  {mode === "manage" && (
+                    <div className={cn(
+                      "absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors",
+                      isSelected
+                        ? "border-primary bg-primary"
+                        : "border-white/80 bg-white/40 opacity-0 group-hover:opacity-100",
+                    )}>
+                      {isSelected && (
+                        <div className="h-2 w-2 rounded-full bg-white" />
+                      )}
+                    </div>
+                  )}
+
+                  {/* Usage pill — top-right, visible on hover or when selected */}
+                  {mode === "manage" && (
+                    <div className={cn(
+                      "absolute top-1.5 right-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium transition-opacity",
+                      isSelected
+                        ? "opacity-100"
+                        : "opacity-0 group-hover:opacity-100",
+                      refCount > 0
+                        ? "bg-black/50 text-white"
+                        : "bg-black/50 text-white/70",
+                    )}>
+                      {usageLabel}
+                    </div>
+                  )}
+
+                  {/* Filename overlay — bottom, visible on hover */}
+                  <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent px-2 pb-1.5 pt-4 opacity-0 transition-opacity group-hover:opacity-100">
+                    <p className="truncate text-[11px] text-white">
+                      {displayFilename(item)}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Alt text below image */}
+                <div className="px-0.5">
+                  <label className="text-[10px] font-medium uppercase leading-none tracking-wide text-base-contrast-light/50">
+                    Alt text
+                  </label>
+                  <textarea
+                    value={item.alt}
+                    placeholder="Describe this image for accessibility"
+                    rows={2}
+                    onClick={(e) => e.stopPropagation()}
+                    onChange={(e) => onAltChange?.(item.id, e.target.value)}
+                    className="w-full resize-none border-0 bg-transparent p-0 text-xs leading-snug text-base-contrast placeholder:text-base-contrast-light/40 focus:outline-none focus:ring-0"
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shell/ProcessingIndicator.tsx

@@ -0,0 +1,84 @@
+import { useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { cn } from "../../lib/cn";
+import type { QueueItem } from "../../media/queue";
+
+interface ProcessingIndicatorProps {
+  items: QueueItem[];
+}
+
+export function ProcessingIndicator({ items }: ProcessingIndicatorProps) {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const activeItems = items.filter((i) => i.state === "active");
+  const queuedItems = items.filter((i) => i.state === "queued");
+  const errorItems = items.filter((i) => i.state === "error");
+  const visibleCount = activeItems.length + queuedItems.length + errorItems.length;
+
+  if (visibleCount === 0) return null;
+
+  return (
+    <div className="relative inline-flex">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className={cn(
+          "relative inline-flex items-center gap-1.5 rounded-md border border-base-200 bg-base px-3 py-1.5 text-sm font-medium text-base-contrast transition-colors hover:bg-base-accent",
+        )}
+        aria-label="Processing status"
+      >
+        <Loader2 size={14} className="animate-spin text-primary" />
+        <span className="text-xs font-semibold tabular-nums">{visibleCount}</span>
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 z-50 mb-2 w-64 rounded-lg border border-base-200 bg-base shadow-lg">
+          <div className="flex flex-col divide-y divide-base-200">
+            {/* Active items */}
+            {activeItems.map((item) => (
+              <div key={item.id} className="flex flex-col gap-1.5 px-3 py-2">
+                <div className="flex items-center justify-between">
+                  <span className="truncate text-xs font-medium text-base-contrast">
+                    {item.originalName}
+                  </span>
+                  <span className="ml-2 shrink-0 text-xs text-base-contrast-light">
+                    {item.percent}%
+                  </span>
+                </div>
+                <div className="h-1 overflow-hidden rounded-full bg-base-accent">
+                  <div
+                    className="h-full rounded-full bg-primary transition-all"
+                    style={{ width: `${item.percent}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+
+            {/* Error items */}
+            {errorItems.map((item) => (
+              <div key={item.id} className="flex flex-col gap-0.5 px-3 py-2">
+                <span className="truncate text-xs font-medium text-red-600">
+                  {item.originalName}
+                </span>
+                {item.error && (
+                  <span className="text-xs text-red-500">{item.error}</span>
+                )}
+              </div>
+            ))}
+
+            {/* Queued footer */}
+            {queuedItems.length > 0 && (
+              <div className="px-3 py-2">
+                <span className="text-xs text-base-contrast-light">
+                  +{queuedItems.length} queued
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shell/SectionSkeleton.tsx

@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+import { SectionTypePicker, type TypeOption } from "./SectionTypePicker";
+import { SectionLayout } from "../sections/SectionLayout";
+import { cn } from "../../lib/cn";
+
+interface SectionSkeletonProps {
+  types: TypeOption[];
+  onSelect: (type: string) => void;
+  onDismiss: () => void;
+}
+
+export function SectionSkeleton({ types, onSelect, onDismiss }: SectionSkeletonProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Trigger animation on next frame
+    requestAnimationFrame(() => setIsVisible(true));
+  }, []);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        onDismiss();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onDismiss]);
+
+  return (
+    <SectionLayout type="skeleton" status="draft">
+      <div
+        className={cn(
+          "relative transition-all duration-200",
+          isVisible ? "opacity-100" : "opacity-0 -translate-y-2",
+        )}
+      >
+        {/* Placeholder block */}
+        <div className="flex h-20 items-center justify-center rounded-lg bg-base-accent">
+          <span className="text-sm text-base-contrast-light/50">New section</span>
+        </div>
+
+        {/* Type picker — centered below skeleton */}
+        <div className="relative flex justify-center">
+          <SectionTypePicker
+            types={types}
+            onSelect={onSelect}
+            onClose={onDismiss}
+          />
+        </div>
+      </div>
+    </SectionLayout>
+  );
+}

package/src/components/shell/SectionTypePicker.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, type ComponentType } from "react";
+
+export interface TypeOption {
+  type: string;
+  label: string;
+  icon: ComponentType;
+}
+
+interface SectionTypePickerProps {
+  types: TypeOption[];
+  onSelect: (type: string) => void;
+  onClose: () => void;
+}
+
+export function SectionTypePicker({ types, onSelect, onClose }: SectionTypePickerProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleMouseDown(e: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [onClose]);
+
+  return (
+    <div
+      ref={panelRef}
+      className="absolute z-50 mt-1 w-64 rounded-lg border border-base-200 bg-base p-2 shadow-lg"
+    >
+      {types.map(({ type, label, icon: Icon }) => (
+        <button
+          key={type}
+          className="cursor-pointer flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm text-base-contrast-light hover:bg-base-accent hover:text-base-contrast"
+          onClick={() => onSelect(type)}
+        >
+          <span className="flex h-6 w-6 items-center justify-center text-base">
+            <Icon />
+          </span>
+          <span>{label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -0,0 +1,78 @@
+import { ColorPicker } from "../shared/ColorPicker";
+import { FontPicker } from "../shared/FontPicker";
+import { Input } from "../shared/Input";
+import { Select } from "../shared/Select";
+import { FormLabel } from "../shared/FormLabel";
+import { deriveContrast } from "../../lib/contrast";
+import { buildGoogleFontsUrl } from "../../lib/google-fonts";
+import type { SiteConfig } from "../../schemas/site-config";
+
+interface Props {
+  siteConfig: SiteConfig;
+  onChange: (config: SiteConfig) => void;
+}
+
+const darkModeOptions = [
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" },
+  { label: "Optional (viewer toggle)", value: "optional" },
+];
+
+export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
+  function update(patch: Partial<SiteConfig>) {
+    onChange({ ...siteConfig, ...patch });
+  }
+
+  function handleColorChange(color: string) {
+    const contrast = deriveContrast(color);
+    onChange({ ...siteConfig, primaryColor: color, primaryContrast: contrast });
+  }
+
+  function handleFontChange(field: "headingFont" | "bodyFont", family: string) {
+    const next = { ...siteConfig, [field]: family };
+    next.googleFontsUrl = buildGoogleFontsUrl(next.headingFont, next.bodyFont);
+    onChange(next);
+  }
+
+  return (
+    <div className="space-y-5">
+      <Input
+        label="Site name"
+        value={siteConfig.siteName}
+        onChange={(value) => update({ siteName: value })}
+        placeholder="Brand Portal"
+      />
+
+      <div>
+        <FormLabel>Primary color</FormLabel>
+        <div className="flex items-center gap-3">
+          <ColorPicker
+            value={siteConfig.primaryColor}
+            onChange={handleColorChange}
+            label="Primary color"
+          />
+          <span className="text-sm text-base-contrast-light">{siteConfig.primaryColor}</span>
+        </div>
+      </div>
+
+      <Select
+        label="Dark mode"
+        value={siteConfig.darkMode}
+        onChange={(value) => update({ darkMode: value as SiteConfig["darkMode"] })}
+        options={darkModeOptions}
+      />
+
+      <FontPicker
+        label="Heading font"
+        value={siteConfig.headingFont}
+        onChange={(family) => handleFontChange("headingFont", family)}
+      />
+
+      <FontPicker
+        label="Body font"
+        value={siteConfig.bodyFont}
+        onChange={(family) => handleFontChange("bodyFont", family)}
+      />
+    </div>
+  );
+}