@drawnagency/primitives 0.1.0

package/src/hooks/useMediaPipeline.ts

@@ -0,0 +1,309 @@
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { hashFileBuffer, sanitizeMediaName } from "../media/utils";
+import { ProcessingQueue, type QueueItem, type QueueEvent } from "../media/queue";
+import type { MediaManifest, MediaItem as LibraryMediaItem } from "../media/types";
+import type { SiteConfig } from "../schemas/site-config";
+import type { SectionContent } from "../schemas/sections";
+import type { LoadedSection } from "../lib/loader";
+import type { MediaLibraryContextValue } from "../components/shell/MediaLibraryContext";
+import {
+  addPendingMediaItem,
+  markPendingMediaDeleted,
+} from "../lib/dexie";
+import { generateVideoPoster } from "../media/videoPoster";
+
+function clearImageIds(obj: unknown, ids: Set<string>): unknown {
+  if (Array.isArray(obj)) return obj.map((item) => clearImageIds(item, ids));
+  if (obj !== null && typeof obj === "object") {
+    const record = obj as Record<string, unknown>;
+    const result: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(record)) {
+      if (key === "imageId" && typeof value === "string" && ids.has(value)) {
+        result[key] = "";
+      } else {
+        result[key] = clearImageIds(value, ids);
+      }
+    }
+    return result;
+  }
+  return obj;
+}
+
+interface UseMediaPipelineInput {
+  siteConfig: SiteConfig | null;
+  mediaManifest: MediaManifest;
+  setMediaManifest: React.Dispatch<React.SetStateAction<MediaManifest>>;
+  sections: LoadedSection[];
+  setSections: React.Dispatch<React.SetStateAction<LoadedSection[]>>;
+  setLocalChangesExist: React.Dispatch<React.SetStateAction<boolean>>;
+  setDirtySectionIds: React.Dispatch<React.SetStateAction<Set<string>>>;
+  markSectionDirty: (sectionId: string, content: SectionContent) => void;
+}
+
+export function useMediaPipeline({
+  siteConfig,
+  mediaManifest,
+  setMediaManifest,
+  sections,
+  setSections,
+  setLocalChangesExist,
+  setDirtySectionIds,
+  markSectionDirty,
+}: UseMediaPipelineInput) {
+  const [processingItems, setProcessingItems] = useState<QueueItem[]>([]);
+  const [pendingMediaItems, setPendingMediaItems] = useState<LibraryMediaItem[]>([]);
+  const [pendingLocalUrls, setPendingLocalUrls] = useState<Record<string, string>>({});
+  const [pendingDeletions, setPendingDeletions] = useState<string[]>([]);
+
+  const queueRef = useRef<ProcessingQueue | null>(null);
+  const uploadCallbacksRef = useRef<Map<string, (imageId: string) => void>>(new Map());
+
+  // --- Processing queue ---
+
+  const mediaConfigKey = siteConfig
+    ? `${siteConfig.media.sizes.join(",")}_${siteConfig.media.quality}_${siteConfig.media.maxFileSize}`
+    : "";
+
+  useEffect(() => {
+    if (!siteConfig) return;
+    const mediaConfig = siteConfig.media;
+    const queue = new ProcessingQueue({
+      sizes: mediaConfig.sizes,
+      quality: mediaConfig.quality,
+      maxConcurrent: 3,
+      createWorker: () =>
+        new Worker(new URL("../media/worker.ts", import.meta.url), { type: "module" }),
+      onEvent: (event: QueueEvent) => {
+        setProcessingItems((prev) => {
+          const next = prev.filter((i) => i.id !== event.item.id);
+          if (event.item.state !== "complete") next.push(event.item);
+          return next;
+        });
+
+        if (event.type === "complete" && event.item.result) {
+          const result = event.item.result;
+          const kind = event.item.kind;
+          const sanitizedName = sanitizeMediaName(event.item.originalName);
+
+          const finalize = (
+            localUrls: Record<string, string>,
+            width: number,
+            height: number,
+          ) => {
+            const item: LibraryMediaItem = {
+              id: event.item.hash,
+              hash: event.item.hash,
+              kind,
+              originalName: sanitizedName,
+              width,
+              height,
+              mimeType: kind === "image" ? "image/webp" : event.item.mimeType,
+              size: result.primaryBlob.size,
+              folder: `${sanitizedName}-${event.item.hash}`,
+              variants: result.variants.map((v) => ({
+                width: v.width,
+                height: v.height,
+                size: v.size,
+              })),
+              alt: "",
+            };
+
+            addPendingMediaItem(item, localUrls);
+            setPendingMediaItems((prev) => [...prev, item]);
+            const displayKey = kind === "video"
+              ? "primary"
+              : Object.keys(localUrls).find((k) => k !== "primary" && k !== "poster") ?? "primary";
+            if (localUrls[displayKey]) {
+              setPendingLocalUrls((prev) => ({ ...prev, [item.id]: localUrls[displayKey] }));
+            }
+            setLocalChangesExist(true);
+
+            const callback = uploadCallbacksRef.current.get(event.item.hash);
+            if (callback) {
+              callback(event.item.hash);
+              uploadCallbacksRef.current.delete(event.item.hash);
+            }
+          };
+
+          const localUrls: Record<string, string> = {};
+          for (const v of result.variants) {
+            localUrls[String(v.width)] = URL.createObjectURL(v.blob);
+          }
+          if (result.primaryBlob) {
+            localUrls["primary"] = URL.createObjectURL(result.primaryBlob);
+          }
+
+          if (kind === "video") {
+            generateVideoPoster(result.primaryBlob, mediaConfig.quality).then(
+              ({ posterBlob, width, height }) => {
+                localUrls["poster"] = URL.createObjectURL(posterBlob);
+                finalize(localUrls, width, height);
+              },
+              () => {
+                finalize(localUrls, result.width, result.height);
+              },
+            );
+          } else {
+            if (result.posterBlob) {
+              localUrls["poster"] = URL.createObjectURL(result.posterBlob);
+            }
+            finalize(localUrls, result.width, result.height);
+          }
+        }
+      },
+    });
+    queueRef.current = queue;
+    return () => queue.destroy();
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- rebuild only when processing params change, not on every siteConfig reference change
+  }, [mediaConfigKey, setLocalChangesExist]);
+
+  // --- Media handlers ---
+
+  const handleMediaUpload = useCallback(async (files: File[]) => {
+    if (!siteConfig) return;
+    const mediaConfig = siteConfig.media;
+    const queue = queueRef.current;
+    if (!queue) return;
+
+    for (const file of files) {
+      if (file.size > mediaConfig.maxFileSize) continue;
+
+      const buffer = await file.arrayBuffer();
+      const hash = await hashFileBuffer(buffer);
+
+      const existsInManifest = hash in mediaManifest.images;
+      const existsInPending = pendingMediaItems.some((i) => i.hash === hash);
+      if (existsInManifest || existsInPending) continue;
+
+      let kind: "image" | "animated" | "video" = "image";
+      if (file.type === "image/gif" || file.type === "image/apng") kind = "animated";
+      if (file.type.startsWith("video/")) kind = "video";
+
+      queue.add({ buffer, originalName: file.name, mimeType: file.type, hash, kind });
+    }
+  }, [siteConfig, mediaManifest, pendingMediaItems]);
+
+  const handleMediaDelete = useCallback(async (ids: string[]) => {
+    for (const id of ids) {
+      await markPendingMediaDeleted(id);
+    }
+    setPendingDeletions((prev) => [...prev, ...ids]);
+
+    const idSet = new Set(ids);
+    setSections((prev) =>
+      prev.map((loaded) => {
+        const json = JSON.stringify(loaded.section);
+        const hasRef = ids.some((id) => json.includes(`"${id}"`));
+        if (!hasRef) return loaded;
+
+        const cleared = clearImageIds(loaded.section, idSet);
+        markSectionDirty(loaded.section.id, cleared as SectionContent);
+        setDirtySectionIds((prev) => new Set(prev).add(loaded.section.id));
+        return { ...loaded, section: { id: loaded.section.id, ...(cleared as Record<string, unknown>) } as typeof loaded.section };
+      }),
+    );
+
+    setLocalChangesExist(true);
+  }, [markSectionDirty, setSections, setDirtySectionIds, setLocalChangesExist]);
+
+  const handleMediaAltChange = useCallback((id: string, alt: string) => {
+    setMediaManifest((prev) => {
+      const item = prev.images[id];
+      if (!item) return prev;
+      return { images: { ...prev.images, [id]: { ...item, alt } } };
+    });
+    setPendingMediaItems((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, alt } : item)),
+    );
+    setLocalChangesExist(true);
+  }, [setMediaManifest, setLocalChangesExist]);
+
+  const referenceCountMap = useMemo((): Record<string, number> => {
+    const counts: Record<string, number> = {};
+    const allIds = [
+      ...Object.keys(mediaManifest.images),
+      ...pendingMediaItems.map((i) => i.id),
+    ];
+    for (const { section } of sections) {
+      const json = JSON.stringify(section);
+      for (const id of allIds) {
+        const regex = new RegExp(`"imageId"\\s*:\\s*"${id}"`, "g");
+        const matches = json.match(regex);
+        if (matches) counts[id] = (counts[id] ?? 0) + matches.length;
+      }
+    }
+    return counts;
+  }, [sections, mediaManifest, pendingMediaItems]);
+
+  // --- Unified enqueue ---
+
+  const enqueueFile = useCallback((file: File, onComplete?: (imageId: string) => void) => {
+    if (!siteConfig) return;
+    const mediaConfig = siteConfig.media;
+    if (file.size > mediaConfig.maxFileSize) return;
+
+    (async () => {
+      try {
+        const buffer = await file.arrayBuffer();
+        const hash = await hashFileBuffer(buffer);
+
+        const existsInManifest = hash in mediaManifest.images;
+        const existsInPending = pendingMediaItems.some((i) => i.hash === hash);
+
+        if (existsInManifest || existsInPending) {
+          if (onComplete) onComplete(hash);
+          return;
+        }
+
+        if (onComplete) {
+          uploadCallbacksRef.current.set(hash, onComplete);
+        }
+
+        let kind: "image" | "animated" | "video" = "image";
+        if (file.type === "image/gif" || file.type === "image/apng") kind = "animated";
+        if (file.type.startsWith("video/")) kind = "video";
+
+        queueRef.current?.add({ buffer, originalName: file.name, mimeType: file.type, hash, kind });
+      } catch (err) {
+        console.error(`[useMediaPipeline] Failed to enqueue file "${file.name}":`, err);
+      }
+    })();
+  }, [siteConfig, mediaManifest, pendingMediaItems]);
+
+  // --- Context value ---
+
+  const contextValue = useMemo((): MediaLibraryContextValue => ({
+    openSelectModal: () => {
+      // Placeholder — EditorShell overrides this
+    },
+    uploadFile: (file: File) => handleMediaUpload([file]),
+    uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void) => {
+      const blobUrl = URL.createObjectURL(file);
+      enqueueFile(file, (imageId) => {
+        URL.revokeObjectURL(blobUrl);
+        onComplete(imageId);
+      });
+      return blobUrl;
+    },
+    manifest: mediaManifest,
+    pendingItems: pendingMediaItems,
+    pendingLocalUrls: pendingLocalUrls,
+    siteConfig,
+  }), [handleMediaUpload, enqueueFile, mediaManifest, pendingMediaItems, pendingLocalUrls, siteConfig]);
+
+  return {
+    processingItems,
+    pendingMediaItems,
+    setPendingMediaItems,
+    pendingLocalUrls,
+    setPendingLocalUrls,
+    pendingDeletions,
+    setPendingDeletions,
+    handleMediaUpload,
+    handleMediaDelete,
+    handleMediaAltChange,
+    referenceCountMap,
+    contextValue,
+    enqueueFile,
+  };
+}

package/src/hooks/useResolvedMedia.ts

@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+import { useMediaLibrary } from "../components/shell/MediaLibraryContext";
+import { createMediaAdapter } from "../media";
+
+export interface ResolvedMediaResult {
+  src: string | undefined;
+  srcset: string | undefined;
+  poster: string | undefined;
+  alt: string;
+  kind: "image" | "animated" | "video";
+}
+
+export function useResolvedMedia(imageId: string | undefined): ResolvedMediaResult {
+  const ctx = useMediaLibrary();
+
+  return useMemo(() => {
+    if (!imageId || !ctx) {
+      return { src: undefined, srcset: undefined, poster: undefined, alt: "", kind: "image" };
+    }
+
+    const { manifest, pendingItems, pendingLocalUrls, siteConfig } = ctx;
+    const sizes = siteConfig?.media?.sizes ?? [640, 1080, 1920];
+
+    const manifestItem = manifest.images[imageId];
+    const pendingItem = pendingItems.find((i) => i.id === imageId);
+    const item = manifestItem ?? pendingItem;
+    const alt = item?.alt ?? "";
+    const kind = item?.kind ?? "image";
+
+    const localUrl = pendingLocalUrls[imageId];
+    if (localUrl) {
+      return { src: localUrl, srcset: undefined, poster: undefined, alt, kind };
+    }
+
+    if (manifestItem) {
+      const adapter = createMediaAdapter(manifest);
+      const resolved = adapter.resolve(imageId, sizes);
+      if (resolved && resolved.tag === "img") {
+        return {
+          src: resolved.src,
+          srcset: "srcSet" in resolved ? resolved.srcSet : undefined,
+          poster: undefined,
+          alt,
+          kind,
+        };
+      }
+      if (resolved && resolved.tag === "video") {
+        return { src: resolved.src, srcset: undefined, poster: resolved.poster, alt, kind };
+      }
+    }
+
+    return { src: undefined, srcset: undefined, poster: undefined, alt, kind };
+  }, [imageId, ctx]);
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./schemas";
+export * from "./lib";
+export * from "./auth";
+export * from "./media";

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/contrast.ts

@@ -0,0 +1,11 @@
+export function deriveContrast(hex: string): string {
+  const h = hex.replace("#", "");
+  const expanded = h.length === 3
+    ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2]
+    : h;
+  const r = parseInt(expanded.substring(0, 2), 16);
+  const g = parseInt(expanded.substring(2, 4), 16);
+  const b = parseInt(expanded.substring(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance >= 0.5 ? "#1a1a1a" : "#f0f0f0";
+}