@drawnagency/primitives 0.1.0

package/src/env.d.ts

@@ -0,0 +1,3 @@
+interface ImportMeta {
+  readonly env: Record<string, string | undefined>;
+}

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export { useActiveHeadings } from "./useActiveHeadings";
+export { useEditorPersistence } from "./useEditorPersistence";
+export { useEditorPublish } from "./useEditorPublish";
+export { useFocusTrap } from "./useFocusTrap";
+export { useMediaPipeline } from "./useMediaPipeline";
+export { useResolvedMedia } from "./useResolvedMedia";

package/src/hooks/useActiveHeadings.ts

@@ -0,0 +1,120 @@
+import { useEffect, useMemo, useRef, useState, useCallback } from "react";
+
+export function useActiveHeadings(
+  parentIds: string[],
+  childIdsByParent: Record<string, string[]>,
+  grandchildIdsByChild: Record<string, string[]>,
+  headerOffset: number = 80,
+) {
+  const [activeParentId, setActiveParentId] = useState<string>("");
+  const [activeChildId, setActiveChildId] = useState<string>("");
+  const [activeGrandchildId, setActiveGrandchildId] = useState<string>("");
+
+  const childKey = useMemo(
+    () => Object.entries(childIdsByParent).map(([k, v]) => `${k}:${v.join(",")}`).join("|"),
+    [childIdsByParent],
+  );
+  const grandchildKey = useMemo(
+    () => Object.entries(grandchildIdsByChild).map(([k, v]) => `${k}:${v.join(",")}`).join("|"),
+    [grandchildIdsByChild],
+  );
+
+  // Use refs for comparison inside the effect to avoid re-render loops
+  const activeParentRef = useRef("");
+  const activeChildRef = useRef("");
+  const activeGrandchildRef = useRef("");
+  const ticking = useRef(false);
+  const transitionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (parentIds.length === 0) return;
+
+    let parentEls: { id: string; el: HTMLElement }[] = [];
+
+    const collect = () => {
+      parentEls = parentIds
+        .map((id) => ({ id, el: document.getElementById(id) as HTMLElement }))
+        .filter((x) => !!x.el);
+    };
+    collect();
+
+    const findActive = (ids: string[]): string => {
+      let active = "";
+      for (const id of ids) {
+        const el = document.getElementById(id);
+        if (!el) continue;
+        if (el.getBoundingClientRect().top - headerOffset <= 0) active = id;
+        else break;
+      }
+      return active;
+    };
+
+    const computeActive = () => {
+      const parent = findActive(parentIds) || parentEls[0]?.id || "";
+      if (!parent) return;
+
+      if (activeParentRef.current !== parent) {
+        if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+        if (activeParentRef.current) {
+          // Delay parent transitions to prevent flashing
+          transitionTimeoutRef.current = setTimeout(() => {
+            activeParentRef.current = parent;
+            setActiveParentId(parent);
+          }, 250);
+        } else {
+          activeParentRef.current = parent;
+          setActiveParentId(parent);
+        }
+      }
+
+      const child = findActive(childIdsByParent[parent] || []);
+      if (activeChildRef.current !== child) {
+        activeChildRef.current = child;
+        setActiveChildId(child);
+      }
+
+      const grandchild = findActive(grandchildIdsByChild[child] || []);
+      if (activeGrandchildRef.current !== grandchild) {
+        activeGrandchildRef.current = grandchild;
+        setActiveGrandchildId(grandchild);
+      }
+    };
+
+    const onScroll = () => {
+      if (!ticking.current) {
+        ticking.current = true;
+        requestAnimationFrame(() => {
+          computeActive();
+          ticking.current = false;
+        });
+      }
+    };
+
+    const onResize = () => {
+      collect();
+      computeActive();
+    };
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+
+    // Initial compute
+    computeActive();
+
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+      if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+    };
+    // Only stable values in dep array — NO state variables
+  }, [parentIds.join("|"), childKey, grandchildKey, headerOffset]);
+
+  const setActiveSection = useCallback((id: string) => {
+    const newHash = `#${id}`;
+    if (window.location.hash !== newHash) {
+      window.history.replaceState(null, "", newHash);
+    }
+  }, []);
+
+  return { activeParentId, activeChildId, activeGrandchildId, setActiveSection };
+}

package/src/hooks/useEditorPersistence.ts

@@ -0,0 +1,103 @@
+import { useCallback, useRef, useEffect } from "react";
+import type { SectionContent } from "../schemas/sections";
+import type { SiteIndex } from "../schemas/site-config";
+import { persistAll, persistSiteConfig } from "../lib/dexie";
+
+interface PersistenceState {
+  pendingSections: Map<string, SectionContent>;
+  pendingDeletes: Set<string>;
+  indexDirty: boolean;
+  configDirty: boolean;
+}
+
+export function useEditorPersistence(siteIndexRef: React.RefObject<SiteIndex>) {
+  const state = useRef<PersistenceState>({
+    pendingSections: new Map(),
+    pendingDeletes: new Set(),
+    indexDirty: false,
+    configDirty: false,
+  });
+  const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const flushToDexie = useCallback(async () => {
+    const s = state.current;
+    if (s.pendingSections.size === 0 && !s.indexDirty && s.pendingDeletes.size === 0) return;
+
+    const entries = Array.from(s.pendingSections.entries()).map(([sectionId, content]) => ({
+      sectionId,
+      content,
+    }));
+    const deletedIds = Array.from(s.pendingDeletes);
+
+    s.pendingSections = new Map();
+    s.pendingDeletes = new Set();
+    const wasIndexDirty = s.indexDirty;
+    s.indexDirty = false;
+
+    await persistAll(
+      entries,
+      wasIndexDirty ? siteIndexRef.current : undefined,
+      deletedIds.length > 0 ? deletedIds : undefined,
+    );
+  }, [siteIndexRef]);
+
+  const scheduleFlush = useCallback(() => {
+    if (flushTimerRef.current) clearTimeout(flushTimerRef.current);
+    flushTimerRef.current = setTimeout(flushToDexie, 500);
+  }, [flushToDexie]);
+
+  useEffect(() => {
+    return () => {
+      if (flushTimerRef.current) clearTimeout(flushTimerRef.current);
+    };
+  }, []);
+
+  const markSectionDirty = useCallback(
+    (sectionId: string, content: SectionContent) => {
+      state.current.pendingSections.set(sectionId, content);
+      scheduleFlush();
+    },
+    [scheduleFlush],
+  );
+
+  const markSectionDeleted = useCallback(
+    (sectionId: string) => {
+      state.current.pendingSections.delete(sectionId);
+      state.current.pendingDeletes.add(sectionId);
+      state.current.indexDirty = true;
+      scheduleFlush();
+    },
+    [scheduleFlush],
+  );
+
+  const markIndexDirty = useCallback(() => {
+    state.current.indexDirty = true;
+    scheduleFlush();
+  }, [scheduleFlush]);
+
+  const persistConfig = useCallback(async (config: Record<string, unknown>) => {
+    state.current.configDirty = true;
+    await persistSiteConfig(config);
+  }, []);
+
+  const cancelPendingFlush = useCallback(() => {
+    if (flushTimerRef.current) {
+      clearTimeout(flushTimerRef.current);
+      flushTimerRef.current = null;
+    }
+  }, []);
+
+  const isConfigDirty = useCallback(() => state.current.configDirty, []);
+  const clearConfigDirty = useCallback(() => { state.current.configDirty = false; }, []);
+
+  return {
+    markSectionDirty,
+    markSectionDeleted,
+    markIndexDirty,
+    persistConfig,
+    flushNow: flushToDexie,
+    cancelPendingFlush,
+    isConfigDirty,
+    clearConfigDirty,
+  };
+}

package/src/hooks/useEditorPublish.ts

@@ -0,0 +1,187 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import type { SiteIndex, SiteConfig } from "../schemas/site-config";
+import type { LoadedSection } from "../lib/loader";
+import type { MediaManifest, MediaItem } from "../media/types";
+import { getDirtySections, hasLocalChanges, discardLocalChanges, cacheContent, getPendingMediaLocalUrls, clearPendingMedia } from "../lib/dexie";
+
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataUrl = reader.result as string;
+      resolve(dataUrl.split(",")[1]);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+interface PublishDeps {
+  flushNow: () => Promise<void>;
+  cancelPendingFlush: () => void;
+  isConfigDirty: () => boolean;
+  clearConfigDirty: () => void;
+  siteIndexRef: React.RefObject<SiteIndex>;
+  siteConfig: SiteConfig | null;
+  sections: LoadedSection[];
+  onSuccess: () => void;
+  mediaManifest: MediaManifest;
+  pendingMediaItems: MediaItem[];
+  pendingMediaDeletions: string[];
+  onMediaPublished: (publishedItems: MediaItem[], publishedDeletions: string[]) => void;
+}
+
+export function useEditorPublish({
+  flushNow,
+  cancelPendingFlush,
+  isConfigDirty,
+  clearConfigDirty,
+  siteIndexRef,
+  siteConfig,
+  sections,
+  onSuccess,
+  mediaManifest,
+  pendingMediaItems,
+  pendingMediaDeletions,
+  onMediaPublished,
+}: PublishDeps) {
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [publishFeedback, setPublishFeedback] = useState<string | null>(null);
+  const feedbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
+    };
+  }, []);
+
+  const handlePublish = useCallback(async () => {
+    if (!siteConfig) return;
+
+    setIsPublishing(true);
+    setPublishFeedback(null);
+
+    try {
+      cancelPendingFlush();
+      await flushNow();
+
+      const hasChanges = await hasLocalChanges();
+      const hasMediaChanges = pendingMediaItems.length > 0 || pendingMediaDeletions.length > 0;
+      if (!hasChanges && !isConfigDirty() && !hasMediaChanges) {
+        setIsPublishing(false);
+        return;
+      }
+
+      const dirty = await getDirtySections();
+
+      // Gather pending media for the commit
+      const mediaUploads: { item: MediaItem; blobs: { path: string; base64: string }[] }[] = [];
+      const blobUrlsToRevoke: string[] = [];
+
+      for (const item of pendingMediaItems) {
+        const localUrls = await getPendingMediaLocalUrls(item.id);
+        if (!localUrls) continue;
+
+        for (const url of Object.values(localUrls)) {
+          blobUrlsToRevoke.push(url);
+        }
+
+        const blobs: { path: string; base64: string }[] = [];
+        const failedBlobFetches: string[] = [];
+        const mimeExt: Record<string, string> = {
+          "image/gif": "gif", "image/apng": "apng", "video/mp4": "mp4", "video/webm": "webm",
+        };
+        for (const [key, url] of Object.entries(localUrls)) {
+          if (key === "primary" && item.kind === "image") continue;
+          try {
+            const resp = await fetch(url);
+            const blob = await resp.blob();
+            const base64 = await blobToBase64(blob);
+            if (key === "primary") {
+              const ext = mimeExt[item.mimeType] ?? "bin";
+              blobs.push({ path: `assets/images/${item.folder}/original.${ext}`, base64 });
+            } else {
+              blobs.push({ path: `assets/images/${item.folder}/${key}.webp`, base64 });
+            }
+          } catch {
+            failedBlobFetches.push(`${item.id}/${key}`);
+          }
+        }
+
+        if (failedBlobFetches.length > 0) {
+          throw new Error(`Media upload failed: could not read blob data for ${failedBlobFetches.join(", ")}`);
+        }
+
+        if (blobs.length > 0) {
+          mediaUploads.push({ item, blobs });
+        }
+      }
+
+      // Build updated manifest
+      let updatedManifest: MediaManifest | undefined;
+      if (hasMediaChanges) {
+        const images = { ...mediaManifest.images };
+        for (const upload of mediaUploads) {
+          images[upload.item.id] = upload.item;
+        }
+        for (const id of pendingMediaDeletions) {
+          delete images[id];
+        }
+        updatedManifest = { images };
+      }
+
+      const response = await fetch("/api/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sections: dirty.map(({ sectionId, content }) => ({
+            id: sectionId,
+            content,
+          })),
+          siteIndex: siteIndexRef.current,
+          ...(isConfigDirty() ? { siteConfig } : {}),
+          ...(hasMediaChanges ? {
+            media: {
+              uploads: mediaUploads.map(({ item, blobs }) => ({ item, blobs })),
+              deletions: pendingMediaDeletions.map((id) => ({
+                id,
+                folder: mediaManifest.images[id]?.folder,
+              })).filter((d) => d.folder),
+              manifest: updatedManifest,
+            },
+          } : {}),
+        }),
+      });
+
+      if (!response.ok) {
+        const errorBody = await response.json().catch(() => ({}));
+        throw new Error(errorBody.error || "Publish failed");
+      }
+
+      const { sha } = await response.json();
+
+      await discardLocalChanges();
+      await clearPendingMedia();
+      await cacheContent(sha, sections, siteIndexRef.current, siteConfig);
+      clearConfigDirty();
+      onSuccess();
+      onMediaPublished(pendingMediaItems, pendingMediaDeletions);
+      for (const url of blobUrlsToRevoke) {
+        URL.revokeObjectURL(url);
+      }
+
+      setPublishFeedback("Published");
+      if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
+      feedbackTimerRef.current = setTimeout(() => setPublishFeedback(null), 3000);
+    } catch (error) {
+      console.error("Publish failed:", error);
+      setPublishFeedback("Publish failed");
+      if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
+      feedbackTimerRef.current = setTimeout(() => setPublishFeedback(null), 5000);
+    } finally {
+      setIsPublishing(false);
+    }
+  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, onSuccess, mediaManifest, pendingMediaItems, pendingMediaDeletions, onMediaPublished]);
+
+  return { isPublishing, publishFeedback, handlePublish };
+}

package/src/hooks/useFocusTrap.ts

@@ -0,0 +1,57 @@
+import { useEffect, type RefObject } from "react";
+
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+
+export function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean) {
+  useEffect(() => {
+    if (!active || !ref.current) return;
+
+    const container = ref.current;
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    const getFocusable = () =>
+      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+
+    // Focus first element on activation
+    const focusable = getFocusable();
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+
+      const elements = getFocusable();
+      if (elements.length === 0) return;
+
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    container.addEventListener("keydown", handleKeyDown);
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+      if (previouslyFocused && document.body.contains(previouslyFocused)) {
+        previouslyFocused.focus();
+      }
+    };
+  }, [active, ref]);
+}