@drawnagency/primitives 0.1.59 → 0.1.60

package/src/hooks/useEditorPublish.ts

@@ -213,49 +213,84 @@ export function useEditorPublish({
     };
   }
 
-  const handleSave = useCallback(async () => {
-    if (!siteConfig || inFlightRef.current) return;
-    inFlightRef.current = true;
+  // --- Shared save orchestration ---
+  // handleSave and handleSaveAndPublish funnel through these so the guard,
+  // change-detection, the /api/save request, and the post-save cleanup stay in
+  // one place and can't drift between the two paths.
 
+  function tryBeginSave(): boolean {
+    if (!siteConfig || inFlightRef.current) return false;
+    inFlightRef.current = true;
     setPublishAction("saving");
     setPublishFeedback(null);
+    return true;
+  }
+
+  async function hasPendingEdits(): Promise<boolean> {
+    const hasChanges = await hasLocalChanges();
+    const hasMediaChanges = pendingMediaItems.length > 0 || pendingMediaDeletions.length > 0 || manifestDirty;
+    const hasDeletedSections = (deletedSectionIds?.length ?? 0) > 0;
+    return hasChanges || isConfigDirty() || hasMediaChanges || hasDeletedSections;
+  }
+
+  function runPerformSave() {
+    // siteConfig is guaranteed non-null by tryBeginSave, which every caller runs first.
+    return performSave({
+      siteConfig: siteConfig!,
+      siteIndexRef, deletedSectionIds, isConfigDirty,
+      pendingMediaItems, pendingMediaDeletions, mediaManifest, manifestDirty,
+    });
+  }
+
+  // Clear the Dexie rows + pending media for what was actually committed. In the
+  // publish path this MUST run before cacheContent: discardSavedChanges clears
+  // only the rows we sent (preserving edits typed during the request) AND
+  // invalidates the content cache, which Save & Publish then re-writes against
+  // the published sha. clearPendingMediaByIds promotes only media whose blobs
+  // were actually written, so items skipped by gatherMediaPayload stay pending
+  // (no manifest orphan).
+  async function commitSavedRows(
+    savedSections: { sectionId: string; updatedAt: string }[],
+    uploadedItems: MediaItem[],
+  ): Promise<void> {
+    await discardSavedChanges(savedSections);
+    await clearPendingMediaByIds(uploadedItems.map((i) => i.id), pendingMediaDeletions);
+  }
+
+  function finishSave(uploadedItems: MediaItem[]): void {
+    clearConfigDirty();
+    clearManifestDirty();
+    onSuccess();
+    onMediaPublished(uploadedItems, pendingMediaDeletions);
+  }
+
+  function reportSaveError(error: unknown, failLabel: string): void {
+    console.error(`${failLabel} failed:`, error);
+    const isConflict = (error as { status?: number })?.status === 409;
+    showFeedback(isConflict ? (error as Error).message : `${failLabel} failed`, isConflict ? 8000 : 5000);
+  }
+
+  const handleSave = useCallback(async () => {
+    if (!tryBeginSave()) return;
 
     try {
       cancelPendingFlush();
       await flushNow();
 
-      const hasChanges = await hasLocalChanges();
-      const hasMediaChanges = pendingMediaItems.length > 0 || pendingMediaDeletions.length > 0 || manifestDirty;
-      const hasDeletedSections = (deletedSectionIds?.length ?? 0) > 0;
-      if (!hasChanges && !isConfigDirty() && !hasMediaChanges && !hasDeletedSections) {
+      if (!(await hasPendingEdits())) {
         setPublishAction("idle");
         return;
       }
 
-      const { sha, savedSections, uploadedItems } = await performSave({
-        siteConfig, siteIndexRef, deletedSectionIds,
-        isConfigDirty, pendingMediaItems, pendingMediaDeletions, mediaManifest, manifestDirty,
-      });
+      const { sha, savedSections, uploadedItems } = await runPerformSave();
 
-      // Clears only the section rows we actually sent (preserving edits typed
-      // during the request) and invalidates contentCache so a reload reflects
-      // the just-saved content instead of showing the stale pre-save snapshot.
-      await discardSavedChanges(savedSections);
-      // Promote/clear only the media that was actually committed. Items skipped
-      // because their blobs weren't persisted stay pending and retry next save —
-      // promoting them here would create manifest orphans (no backing file).
-      await clearPendingMediaByIds(uploadedItems.map((i) => i.id), pendingMediaDeletions);
-      clearConfigDirty();
-      clearManifestDirty();
-      onSuccess();
-      onMediaPublished(uploadedItems, pendingMediaDeletions);
+      await commitSavedRows(savedSections, uploadedItems);
+      finishSave(uploadedItems);
       onShasUpdated(sha, null);
 
       showFeedback("Saved", 3000);
     } catch (error) {
-      console.error("Save failed:", error);
-      const isConflict = (error as { status?: number })?.status === 409;
-      showFeedback(isConflict ? (error as Error).message : "Save failed", isConflict ? 8000 : 5000);
+      reportSaveError(error, "Save");
     } finally {
       inFlightRef.current = false;
       setPublishAction("idle");
@@ -298,28 +333,18 @@ export function useEditorPublish({
   }, [onShasUpdated, showFeedback, onPublishComplete]);
 
   const handleSaveAndPublish = useCallback(async () => {
-    if (!siteConfig || inFlightRef.current) return;
-    inFlightRef.current = true;
-
-    setPublishAction("saving");
-    setPublishFeedback(null);
+    if (!tryBeginSave()) return;
 
     try {
       cancelPendingFlush();
       await flushNow();
 
-      const hasChanges = await hasLocalChanges();
-      const hasMediaChanges = pendingMediaItems.length > 0 || pendingMediaDeletions.length > 0 || manifestDirty;
-      const hasDeletedSections = (deletedSectionIds?.length ?? 0) > 0;
-      const hasLocalEdits = hasChanges || isConfigDirty() || hasMediaChanges || hasDeletedSections;
+      const hasLocalEdits = await hasPendingEdits();
 
       let savedSections: { sectionId: string; updatedAt: string }[] = [];
       let uploadedItems: MediaItem[] = [];
       if (hasLocalEdits) {
-        ({ savedSections, uploadedItems } = await performSave({
-          siteConfig, siteIndexRef, deletedSectionIds,
-          isConfigDirty, pendingMediaItems, pendingMediaDeletions, mediaManifest, manifestDirty,
-        }));
+        ({ savedSections, uploadedItems } = await runPerformSave());
       }
 
       setPublishAction("publishing");
@@ -341,21 +366,18 @@ export function useEditorPublish({
       const { sha } = publishData;
 
       if (hasLocalEdits) {
-        await discardSavedChanges(savedSections);
-        await clearPendingMediaByIds(uploadedItems.map((i) => i.id), pendingMediaDeletions);
-        await cacheContent(sha, sections, siteIndexRef.current, siteConfig);
-        clearConfigDirty();
-        clearManifestDirty();
-        onSuccess();
-        onMediaPublished(uploadedItems, pendingMediaDeletions);
+        await commitSavedRows(savedSections, uploadedItems);
+        // Re-cache against the PUBLISHED sha (commitSavedRows just invalidated the
+        // cache); the draft branch is gone after publish, so this is the snapshot a
+        // later cache hit restores.
+        await cacheContent(sha, sections, siteIndexRef.current, siteConfig!);
+        finishSave(uploadedItems);
       }
 
       onShasUpdated(null, sha);
       onPublishComplete?.();
     } catch (error) {
-      console.error("Publish failed:", error);
-      const isConflict = (error as { status?: number })?.status === 409;
-      showFeedback(isConflict ? (error as Error).message : "Publish failed", isConflict ? 8000 : 5000);
+      reportSaveError(error, "Publish");
     } finally {
       inFlightRef.current = false;
       setPublishAction("idle");

package/src/hooks/useMediaPipeline.ts

@@ -13,23 +13,7 @@ import {
   removePendingMediaDeletion,
 } 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;
-}
+import { tallyImageIds, collectImageIds, clearImageIds } from "../lib/image-refs";
 
 interface UseMediaPipelineInput {
   siteConfig: SiteConfig | null;
@@ -253,8 +237,8 @@ export function useMediaPipeline({
 
     setSections((prev) =>
       prev.map((loaded) => {
-        const json = JSON.stringify(loaded.section);
-        const hasRef = ids.some((id) => json.includes(`"${id}"`));
+        const referenced = collectImageIds(loaded.section);
+        const hasRef = ids.some((id) => referenced.has(id));
         if (!hasRef) return loaded;
 
         const cleared = clearImageIds(loaded.section, idSet);
@@ -282,22 +266,15 @@ export function useMediaPipeline({
     setLocalChangesExist(true);
   }, [setMediaManifest, setLocalChangesExist]);
 
+  // Count imageId references with a single structural pass per section (O(n)),
+  // instead of stringifying every section and regex-scanning it per known id.
+  // Counts every referenced imageId; the consumer (MediaLibraryModal) only looks
+  // up manifest/pending ids, so extra keys for any dangling references are inert.
   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]);
+    const counts = new Map<string, number>();
+    for (const { section } of sections) tallyImageIds(section, counts);
+    return Object.fromEntries(counts);
+  }, [sections]);
 
   // --- Unified enqueue ---
 

package/src/hooks/useSortableRow.ts

@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from "react";
+import { computeReorderTarget } from "../lib/reorder";
+
+interface UseSortableRowOptions {
+  index: number;
+  /** Drag-data tag isolating this list from others (e.g. "ordering-row"). */
+  dragType: string;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+  /** When false the row is inert (no drag/drop wiring). Defaults to true. */
+  enabled?: boolean;
+}
+
+/**
+ * Closest-edge drag-to-reorder wiring for a single list row, shared by the
+ * section- and page-ordering modals. Attach `rowRef` to the row element and
+ * `handleRef` to the drag handle, and render
+ * `<DropEdgeIndicator edge={closestEdge} />` for the insertion line. The
+ * pointer-position → target-index math lives in `computeReorderTarget`
+ * (unit-tested in lib/reorder); the atlaskit adapter is imported lazily so it
+ * stays out of the SSR/initial bundle.
+ */
+export function useSortableRow<R extends HTMLElement, H extends HTMLElement>({
+  index,
+  dragType,
+  onReorder,
+  enabled = true,
+}: UseSortableRowOptions) {
+  const rowRef = useRef<R>(null);
+  const handleRef = useRef<H>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<"top" | "bottom" | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) return;
+
+    let cleanup: (() => void) | undefined;
+    let cancelled = false;
+
+    Promise.all([
+      import("@atlaskit/pragmatic-drag-and-drop/element/adapter"),
+      import("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"),
+    ]).then(([{ draggable, dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
+      if (cancelled) return;
+
+      const cleanupDraggable = draggable({
+        element: row,
+        dragHandle: handle,
+        getInitialData: () => ({ dragType, index }),
+        onGenerateDragPreview: () => {
+          row.style.opacity = "0.4";
+          requestAnimationFrame(() => {
+            row.style.opacity = "";
+          });
+        },
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      });
+
+      const cleanupDropTarget = dropTargetForElements({
+        element: row,
+        canDrop: ({ source }) => source.data.dragType === dragType,
+        getData: ({ input, element }) =>
+          attachClosestEdge({ index }, { input, element, allowedEdges: ["top", "bottom"] }),
+        onDragEnter: ({ self }) => {
+          const edge = extractClosestEdge(self.data);
+          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
+        },
+        onDrag: ({ self }) => {
+          const edge = extractClosestEdge(self.data);
+          setClosestEdge(edge === "top" || edge === "bottom" ? edge : null);
+        },
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: ({ source, self }) => {
+          setClosestEdge(null);
+          const fromIndex = source.data.index as number;
+          const rawEdge = extractClosestEdge(self.data);
+          const edge = rawEdge === "top" || rawEdge === "bottom" ? rawEdge : null;
+          const toIndex = computeReorderTarget(fromIndex, index, edge);
+          if (toIndex !== null) onReorder(fromIndex, toIndex);
+        },
+      });
+
+      cleanup = () => {
+        cleanupDraggable();
+        cleanupDropTarget();
+      };
+    });
+
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [index, dragType, onReorder, enabled]);
+
+  return { rowRef, handleRef, isDragging, closestEdge };
+}

package/src/lib/image-refs.ts

@@ -0,0 +1,53 @@
+/**
+ * Structural walkers over section content for `imageId` references.
+ *
+ * These replace the previous JSON.stringify + per-id regex scanning in
+ * useMediaPipeline, which was O(sections × ids) and prone to substring
+ * false-matches (ids were interpolated into a `RegExp` unescaped, and the delete
+ * path's `json.includes('"id"')` matched the id anywhere in the serialized
+ * section, not only in an actual `imageId` field). A single structural pass is
+ * O(sections) and only ever inspects genuine `imageId` properties.
+ */
+
+/** Count every non-empty `imageId` string value reachable from `value`. */
+export function tallyImageIds(value: unknown, counts: Map<string, number> = new Map()): Map<string, number> {
+  if (Array.isArray(value)) {
+    for (const item of value) tallyImageIds(item, counts);
+  } else if (value !== null && typeof value === "object") {
+    for (const [key, v] of Object.entries(value as Record<string, unknown>)) {
+      if (key === "imageId" && typeof v === "string" && v !== "") {
+        counts.set(v, (counts.get(v) ?? 0) + 1);
+      } else {
+        tallyImageIds(v, counts);
+      }
+    }
+  }
+  return counts;
+}
+
+/** The set of distinct non-empty `imageId`s reachable from `value`. */
+export function collectImageIds(value: unknown): Set<string> {
+  return new Set(tallyImageIds(value).keys());
+}
+
+/**
+ * Return a deep copy of `value` with every `imageId` whose value is in `ids`
+ * reset to "" (used when the referenced media is deleted). All other content,
+ * including arrays and nesting, is preserved unchanged.
+ */
+export function clearImageIds(value: unknown, ids: Set<string>): unknown {
+  if (Array.isArray(value)) return value.map((item) => clearImageIds(item, ids));
+  if (value !== null && typeof value === "object") {
+    const record = value as Record<string, unknown>;
+    const result: Record<string, unknown> = {};
+    for (const [key, v] of Object.entries(record)) {
+      if (key === "imageId" && typeof v === "string" && ids.has(v)) {
+        result[key] = "";
+      } else {
+        result[key] = clearImageIds(v, ids);
+      }
+    }
+    return result;
+  }
+  return value;
+}

package/src/lib/platform-broker.ts

@@ -0,0 +1,72 @@
+import { env } from "./env";
+
+const ATTEMPTS = 3;
+const RETRY_BASE_MS = 150;
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/** True when this runtime should broker privileged ops through the platform. */
+export function isPlatformMode(): boolean {
+  return Boolean(env("PLATFORM_API_URL") && env("PLATFORM_API_KEY"));
+}
+
+/**
+ * Call a platform broker endpoint scoped to this site. The platform authorizes
+ * the op against the site that owns PLATFORM_API_KEY — the client never names
+ * another tenant. Retries network/5xx (transient); 4xx is a real auth/config
+ * error and is surfaced immediately. Mirrors fetchInstallationToken().
+ */
+export async function platformBroker<T = unknown>(
+  path: string,
+  opts: { method?: string; body?: unknown; query?: Record<string, string> } = {},
+): Promise<T> {
+  const apiUrl = env("PLATFORM_API_URL");
+  const apiKey = env("PLATFORM_API_KEY");
+  const siteId = env("PORTAL_SITE_ID");
+
+  const method = opts.method ?? (opts.body !== undefined ? "POST" : "GET");
+  const qs = opts.query ? "?" + new URLSearchParams(opts.query).toString() : "";
+  const url = `${apiUrl}${path}${qs}`;
+
+  const headers: Record<string, string> = { "x-api-key": apiKey, "x-site-id": siteId };
+  let serializedBody: string | undefined;
+  if (opts.body !== undefined) {
+    headers["Content-Type"] = "application/json";
+    serializedBody = JSON.stringify(opts.body);
+  }
+
+  let lastError: unknown;
+  for (let attempt = 0; attempt < ATTEMPTS; attempt++) {
+    const isLast = attempt === ATTEMPTS - 1;
+    let res: Response;
+    try {
+      res = await fetch(url, { method, headers, body: serializedBody });
+    } catch (err) {
+      lastError = err;
+      if (isLast) throw err;
+      await sleep(RETRY_BASE_MS * 2 ** attempt);
+      continue;
+    }
+
+    if (res.ok) {
+      if (res.status === 204) return undefined as T;
+      try {
+        return (await res.json()) as T;
+      } catch {
+        return undefined as T;
+      }
+    }
+
+    if (res.status >= 500 && !isLast) {
+      lastError = new Error(`Platform broker error (${res.status})`);
+      await sleep(RETRY_BASE_MS * 2 ** attempt);
+      continue;
+    }
+
+    throw new Error(`Platform broker error (${res.status}): ${await res.text()}`);
+  }
+
+  throw lastError instanceof Error ? lastError : new Error("Platform broker unreachable");
+}

package/src/lib/reorder.ts

@@ -0,0 +1,20 @@
+/**
+ * Compute the destination index for a closest-edge drag-to-reorder drop.
+ *
+ * `overIndex` is the index of the row the pointer is over; `edge` is which half
+ * of that row the pointer is nearest ("bottom" inserts after it, "top"/null
+ * before it). The `fromIndex < toIndex` decrement accounts for the dragged row
+ * being removed from its original slot before re-insertion.
+ *
+ * Returns the target index, or `null` when the drop would not move the row.
+ */
+export function computeReorderTarget(
+  fromIndex: number,
+  overIndex: number,
+  edge: "top" | "bottom" | null,
+): number | null {
+  let toIndex = overIndex;
+  if (edge === "bottom") toIndex = overIndex + 1;
+  if (fromIndex < toIndex) toIndex--;
+  return fromIndex === toIndex ? null : toIndex;
+}

package/src/lib/text.ts

@@ -10,3 +10,8 @@ export function truncate(text: string, maxLength: number): string {
   if (text.length <= maxLength) return text;
   return text.slice(0, maxLength) + "...";
 }
+
+/** "1 item" / "0 items" / "3 items" — the count plus a naive English plural of `word`. */
+export function pluralize(n: number, word: string): string {
+  return `${n} ${word}${n === 1 ? "" : "s"}`;
+}

package/src/media/utils.ts

@@ -1,3 +1,5 @@
+import { slugifyPageSlug } from "../lib/pages";
+
 export async function hashFileBuffer(buffer: ArrayBuffer): Promise<string> {
   if (typeof crypto !== "undefined" && crypto.subtle) {
     const hashBuffer = await crypto.subtle.digest("SHA-256", buffer);
@@ -21,8 +23,11 @@ export async function hashFileBuffer(buffer: ArrayBuffer): Promise<string> {
   return result;
 }
 
+// Strip the file extension, then apply the canonical slug transform. Equivalent
+// to the previous inline regex (verified by fuzz + the boundary tests in
+// tests/lib/media/utils.test.ts); shares one slugifier with page slugs.
 export function sanitizeMediaName(name: string): string {
-  return name.replace(/\.[^.]+$/, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  return slugifyPageSlug(name.replace(/\.[^.]+$/, ""));
 }
 
 export const MIME_TO_EXT: Record<string, string> = {

package/src/types/database.ts

@@ -419,6 +419,33 @@ export type Database = {
           },
         ]
       }
+      rate_limits: {
+        Row: {
+          site_id: string
+          limiter: string
+          key: string
+          window_start: string
+          count: number
+          updated_at: string
+        }
+        Insert: {
+          site_id: string
+          limiter: string
+          key: string
+          window_start?: string
+          count?: number
+          updated_at?: string
+        }
+        Update: {
+          site_id?: string
+          limiter?: string
+          key?: string
+          window_start?: string
+          count?: number
+          updated_at?: string
+        }
+        Relationships: []
+      }
     }
     Views: {
       [_ in never]: never
@@ -431,6 +458,20 @@ export type Database = {
         Args: { p_site_id: string; p_user_id: string }
         Returns: undefined
       }
+      rate_limit_hit: {
+        Args: {
+          p_site_id: string
+          p_limiter: string
+          p_key: string
+          p_window_ms: number
+          p_max: number
+        }
+        Returns: { allowed: boolean; retry_after_ms: number }[]
+      }
+      rate_limit_cleanup: {
+        Args: { p_max_age_ms: number }
+        Returns: undefined
+      }
     }
     Enums: {
       [_ in never]: never

package/dist/chunk-DKOUFIP6.js

@@ -1,35 +0,0 @@
-// src/schemas/media.ts
-import { z } from "zod";
-var VariantSchema = z.object({
-  width: z.number().int().positive(),
-  height: z.number().int().positive(),
-  size: z.number().int().nonnegative()
-});
-var MediaItemSchema = z.object({
-  id: z.string(),
-  hash: z.string(),
-  kind: z.enum(["image", "animated", "video"]),
-  originalName: z.string(),
-  width: z.number().int().positive(),
-  height: z.number().int().positive(),
-  mimeType: z.string(),
-  size: z.number().int().nonnegative(),
-  folder: z.string(),
-  variants: z.array(VariantSchema),
-  alt: z.string().default("")
-});
-var ImageManifestSchema = z.object({
-  images: z.record(z.string(), MediaItemSchema)
-});
-var MediaConfigSchema = z.object({
-  sizes: z.array(z.number()).default([640, 1080, 1920]),
-  maxFileSize: z.number().default(5242880),
-  quality: z.number().min(1).max(100).default(85)
-});
-
-export {
-  VariantSchema,
-  MediaItemSchema,
-  ImageManifestSchema,
-  MediaConfigSchema
-};