@drawnagency/primitives 0.1.0

package/src/lib/registry.ts

@@ -0,0 +1,202 @@
+import type { ZodType, z } from "zod";
+import type { ComponentType, ReactNode } from "react";
+import type { Audience } from "../schemas/auth";
+
+// --- Settings field types ---
+
+export type SettingsFieldDef =
+  | {
+      type: "text";
+      label: string;
+      default: string;
+      target?: "content" | "options";
+      placeholder?: string;
+    }
+  | {
+      type: "number";
+      label: string;
+      default: number;
+      target?: "content" | "options";
+      min?: number;
+      max?: number;
+    }
+  | {
+      type: "checkbox";
+      label: string;
+      default: boolean;
+      target?: "content" | "options";
+    }
+  | {
+      type: "select";
+      label: string;
+      default: string;
+      target?: "content" | "options";
+      coerce?: "number";
+      options: { label: string; value: string }[];
+    }
+  | {
+      type: "range";
+      label: string;
+      default: number;
+      target?: "content" | "options";
+      min: number;
+      max: number;
+      step?: number;
+    };
+
+export type SettingsSchema = Record<string, SettingsFieldDef>;
+
+// --- Component prop types ---
+
+// Custom settings forms receive their fields as individual spread props plus onChange.
+// The actual prop type is defined by each custom form component.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type CustomSettingsFormProps = Record<string, any>;
+
+export interface SectionProps<T = unknown> {
+  content: T;
+  options?: Record<string, unknown>;
+  onChange?: (content: T) => void;
+  isEditMode: boolean;
+  openModal?: (title: string, content: ReactNode) => void;
+}
+
+export interface WrapperProps {
+  sectionId: string;
+  sectionType: string;
+  status: string;
+  dirty?: boolean;
+  index: number;
+  isLast: boolean;
+  definition: SectionDefinition;
+  options?: Record<string, unknown>;
+  audiences: Audience[];
+  access: string[];
+  onAccessChange?: (access: string[]) => void;
+  onStatusChange?: (status: "draft" | "published" | "archived") => void;
+  onSectionChange?: (options: Record<string, unknown>) => void;
+  onReorder?: (fromIndex: number, toIndex: number) => void;
+  onRequestInsert?: (index: number) => void;
+  onDelete?: () => void;
+  children: React.ReactNode;
+}
+
+// --- Section definition ---
+
+export interface SectionDefinition<T = unknown> {
+  type: string;
+  label: string;
+  icon?: string;
+  schema: ZodType<T>;
+  component: ComponentType<SectionProps<T>>;
+  defaults: () => T;
+  wrapper?: ComponentType<WrapperProps>;
+  settings?: SettingsSchema;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  settingsForm?: ComponentType<any>;
+}
+
+// --- defineSection ---
+
+type DefineSectionInput<S extends ZodType> = {
+  type: string;
+  label: string;
+  icon?: string;
+  schema: S;
+  component: ComponentType<SectionProps<z.infer<S>>>;
+  defaults: () => z.infer<S>;
+  wrapper?: ComponentType<WrapperProps>;
+  settings?: SettingsSchema;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  settingsForm?: ComponentType<any>;
+};
+
+export function defineSection<S extends ZodType>(
+  def: DefineSectionInput<S>,
+): SectionDefinition<z.infer<S>> {
+  return def as SectionDefinition<z.infer<S>>;
+}
+
+// --- Registry interface & factory ---
+
+export interface SectionRegistry {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  registerSection(def: SectionDefinition<any>): void;
+  registerSchema(type: string, schema: ZodType): void;
+  getSection(type: string): SectionDefinition | undefined;
+  getSchema(type: string): ZodType | undefined;
+  getAllSections(): SectionDefinition[];
+  getAllSchemas(): ZodType[];
+  clearRegistry(): void;
+}
+
+export function createRegistry(): SectionRegistry {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const sections = new Map<string, SectionDefinition<any>>();
+  const schemas = new Map<string, ZodType>();
+
+  return {
+    registerSection(def) {
+      if (sections.has(def.type)) {
+        throw new Error(`Section type "${def.type}" is already registered`);
+      }
+      sections.set(def.type, def);
+    },
+    registerSchema(type, schema) {
+      schemas.set(type, schema);
+    },
+    getSection(type) {
+      return sections.get(type);
+    },
+    getSchema(type) {
+      return schemas.get(type) ?? sections.get(type)?.schema;
+    },
+    getAllSections() {
+      return Array.from(sections.values());
+    },
+    getAllSchemas() {
+      const merged = new Map(schemas);
+      for (const [type, def] of sections) {
+        if (!merged.has(type)) merged.set(type, def.schema);
+      }
+      return Array.from(merged.values());
+    },
+    clearRegistry() {
+      sections.clear();
+      schemas.clear();
+    },
+  };
+}
+
+// --- Default instance & module-level convenience functions ---
+
+const defaultRegistry = createRegistry();
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function registerSection(def: SectionDefinition<any>): void {
+  defaultRegistry.registerSection(def);
+}
+
+export function registerSchema(type: string, schema: ZodType): void {
+  defaultRegistry.registerSchema(type, schema);
+}
+
+export function getSection(type: string): SectionDefinition | undefined {
+  return defaultRegistry.getSection(type);
+}
+
+export function getSchema(type: string): ZodType | undefined {
+  return defaultRegistry.getSchema(type);
+}
+
+export function getAllSections(): SectionDefinition[] {
+  return defaultRegistry.getAllSections();
+}
+
+export function getAllSchemas(): ZodType[] {
+  return defaultRegistry.getAllSchemas();
+}
+
+export function clearRegistry(): void {
+  defaultRegistry.clearRegistry();
+}

package/src/lib/safeRedirect.ts

@@ -0,0 +1,11 @@
+import { safeNextPath } from "../auth/security";
+
+/**
+ * Client-safe redirect validation (defense-in-depth).
+ * The server already validates via safeNextPath(), but this guards
+ * against open-redirect if a response is tampered with in transit.
+ */
+export function safeRedirect(url: string | undefined, fallback: string): string {
+  if (!url) return fallback;
+  return safeNextPath(url) ?? fallback;
+}

package/src/lib/sanitize.ts

@@ -0,0 +1,6 @@
+import DOMPurify from "isomorphic-dompurify";
+
+export function sanitizeHtml(html: string): string {
+  if (!html) return "";
+  return DOMPurify.sanitize(html);
+}

package/src/lib/timestamp.ts

@@ -0,0 +1,31 @@
+export function formatTimestamp(iso: string): string {
+  const date = new Date(iso);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / 60_000);
+  const diffHours = Math.floor(diffMs / 3_600_000);
+
+  const sameDay =
+    date.getUTCFullYear() === now.getUTCFullYear() &&
+    date.getUTCMonth() === now.getUTCMonth() &&
+    date.getUTCDate() === now.getUTCDate();
+
+  if (diffMinutes < 1) return "just now";
+  if (diffMinutes < 60) {
+    return `${diffMinutes} ${diffMinutes === 1 ? "minute" : "minutes"} ago`;
+  }
+  if (sameDay) {
+    return `${diffHours} ${diffHours === 1 ? "hour" : "hours"} ago`;
+  }
+
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    timeZone: "UTC",
+  }) + " at " + date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: "UTC",
+  });
+}

package/src/media/github.ts

@@ -0,0 +1,72 @@
+import type { MediaAdapter, MediaFile, MediaItem, MediaManifest, ResolvedMedia } from "./types";
+import { sanitizeMediaName, mimeToExt, hashFileBuffer } from "./utils";
+
+export function createGitHubMediaAdapter(manifest: MediaManifest): MediaAdapter {
+  return {
+    async hash(file: MediaFile): Promise<string> {
+      return hashFileBuffer(file.buffer);
+    },
+
+    async exists(hash: string): Promise<boolean> {
+      return hash in manifest.images;
+    },
+
+    async process(file: MediaFile, hash: string, _sizes: number[]): Promise<MediaItem> {
+      const name = sanitizeMediaName(file.originalName);
+      const folder = `${name}-${hash}`;
+      return {
+        id: hash, hash, kind: "image", originalName: name,
+        width: 0, height: 0, mimeType: "image/webp", size: 0, folder, variants: [], alt: "",
+      };
+    },
+
+    async delete(id: string): Promise<void> {
+      delete manifest.images[id];
+    },
+
+    resolve(id: string, sizes: number[]): ResolvedMedia | null {
+      const item = manifest.images[id];
+      if (!item) return null;
+
+      if (item.kind === "video") {
+        return {
+          tag: "video",
+          src: `/api/media/${id}/original.${mimeToExt(item.mimeType)}`,
+          poster: `/api/media/${id}/poster.webp`,
+          width: item.width, height: item.height,
+          autoplay: true, loop: true, muted: true,
+        };
+      }
+
+      if (item.kind === "animated") {
+        return {
+          tag: "img",
+          src: `/api/media/${id}/original.${mimeToExt(item.mimeType)}`,
+          width: item.width, height: item.height,
+        };
+      }
+
+      // Static image with srcset
+      const availableVariants = item.variants.filter((v) =>
+        sizes.length === 0 || sizes.includes(v.width),
+      );
+      const sorted = [...availableVariants].sort((a, b) => a.width - b.width);
+      const midIndex = Math.floor(sorted.length / 2);
+      const defaultVariant = sorted[midIndex] ?? sorted[0];
+      if (!defaultVariant) return null;
+
+      const srcSet = sorted.map((v) => `/api/media/${id}/${v.width}.webp ${v.width}w`).join(", ");
+
+      return {
+        tag: "img",
+        src: `/api/media/${id}/${defaultVariant.width}.webp`,
+        srcSet,
+        width: item.width, height: item.height,
+      };
+    },
+
+    async list(): Promise<MediaItem[]> {
+      return Object.values(manifest.images);
+    },
+  };
+}

package/src/media/index.ts

@@ -0,0 +1,12 @@
+import type { MediaAdapter, MediaManifest } from "./types";
+import { createGitHubMediaAdapter } from "./github";
+
+export * from "./types";
+export * from "./utils";
+export * from "./queue";
+export * from "./resolve";
+export { generateVideoPoster } from "./videoPoster";
+
+export function createMediaAdapter(manifest: MediaManifest): MediaAdapter {
+  return createGitHubMediaAdapter(manifest);
+}

package/src/media/queue.ts

@@ -0,0 +1,166 @@
+import type { MediaKind } from "./types";
+
+export interface QueueInput {
+  buffer: ArrayBuffer;
+  originalName: string;
+  mimeType: string;
+  hash: string;
+  kind: MediaKind;
+}
+
+export interface QueueItem {
+  id: string;
+  originalName: string;
+  mimeType: string;
+  hash: string;
+  kind: MediaKind;
+  percent: number;
+  state: "queued" | "active" | "complete" | "error";
+  error?: string;
+  result?: {
+    variants: { width: number; height: number; size: number; blob: Blob }[];
+    primaryBlob: Blob;
+    posterBlob?: Blob;
+    width: number;
+    height: number;
+  };
+}
+
+export type QueueEvent =
+  | { type: "queued"; item: QueueItem }
+  | { type: "started"; item: QueueItem }
+  | { type: "progress"; item: QueueItem }
+  | { type: "complete"; item: QueueItem }
+  | { type: "error"; item: QueueItem };
+
+interface QueueOptions {
+  sizes: number[];
+  quality: number;
+  maxConcurrent: number;
+  createWorker: () => Worker;
+  onEvent: (event: QueueEvent) => void;
+}
+
+export class ProcessingQueue {
+  private items = new Map<string, QueueItem>();
+  private pending: { input: QueueInput; id: string }[] = [];
+  private activeWorkers = new Map<string, Worker>();
+  private options: QueueOptions;
+  private nextId = 0;
+
+  constructor(options: QueueOptions) {
+    this.options = options;
+  }
+
+  add(input: QueueInput): string {
+    const id = `media-${this.nextId++}`;
+    const item: QueueItem = {
+      id,
+      originalName: input.originalName,
+      mimeType: input.mimeType,
+      hash: input.hash,
+      kind: input.kind,
+      percent: 0,
+      state: "queued",
+    };
+    this.items.set(id, item);
+    this.pending.push({ input, id });
+    this.options.onEvent({ type: "queued", item: { ...item } });
+    this.processNext();
+    return id;
+  }
+
+  getStatus(): { active: number; queued: number; total: number; items: QueueItem[] } {
+    let active = 0;
+    let queued = 0;
+    for (const item of this.items.values()) {
+      if (item.state === "active") active++;
+      if (item.state === "queued") queued++;
+    }
+    return {
+      active,
+      queued,
+      total: this.items.size,
+      items: Array.from(this.items.values()),
+    };
+  }
+
+  private processNext(): void {
+    while (this.activeWorkers.size < this.options.maxConcurrent && this.pending.length > 0) {
+      const next = this.pending.shift()!;
+      this.startProcessing(next.id, next.input);
+    }
+  }
+
+  private startProcessing(id: string, input: QueueInput): void {
+    const item = this.items.get(id)!;
+    item.state = "active";
+    this.options.onEvent({ type: "started", item: { ...item } });
+
+    const worker = this.options.createWorker();
+    this.activeWorkers.set(id, worker);
+
+    worker.onmessage = (e: MessageEvent) => {
+      const msg = e.data;
+      if (msg.id !== id) return;
+
+      if (msg.type === "progress") {
+        item.percent = msg.percent;
+        this.options.onEvent({ type: "progress", item: { ...item } });
+      } else if (msg.type === "complete") {
+        item.state = "complete";
+        item.percent = 100;
+        item.result = {
+          variants: msg.variants,
+          primaryBlob: msg.primaryBlob,
+          posterBlob: msg.posterBlob,
+          width: msg.width,
+          height: msg.height,
+        };
+        this.options.onEvent({ type: "complete", item: { ...item } });
+        this.cleanupWorker(id, worker);
+        this.processNext();
+      } else if (msg.type === "error") {
+        item.state = "error";
+        item.error = msg.message;
+        this.options.onEvent({ type: "error", item: { ...item } });
+        this.cleanupWorker(id, worker);
+        this.processNext();
+      }
+    };
+
+    worker.onerror = (e: ErrorEvent) => {
+      item.state = "error";
+      item.error = e.message || "Worker error";
+      this.options.onEvent({ type: "error", item: { ...item } });
+      this.cleanupWorker(id, worker);
+      this.processNext();
+    };
+
+    worker.postMessage({
+      type: "process",
+      id,
+      buffer: input.buffer,
+      originalName: input.originalName,
+      mimeType: input.mimeType,
+      hash: input.hash,
+      kind: input.kind,
+      sizes: this.options.sizes,
+      quality: this.options.quality,
+    });
+  }
+
+  private cleanupWorker(id: string, worker: Worker): void {
+    worker.terminate();
+    this.activeWorkers.delete(id);
+  }
+
+  destroy(): void {
+    for (const [id, worker] of this.activeWorkers) {
+      worker.terminate();
+      this.activeWorkers.delete(id);
+    }
+    this.pending = [];
+    this.items.clear();
+  }
+}

package/src/media/resolve.ts

@@ -0,0 +1,63 @@
+import type { MediaManifest, ResolvedMedia } from "./types";
+import { createMediaAdapter } from "./index";
+
+export function resolveMedia(
+  item: { imageId?: string; src?: string },
+  manifest: MediaManifest,
+  sizes: number[],
+): ResolvedMedia | null {
+  if (!item.imageId) return null;
+  const adapter = createMediaAdapter(manifest);
+  return adapter.resolve(item.imageId, sizes);
+}
+
+/**
+ * Deep-walk section content and resolve any { imageId } references to
+ * { src, srcset } values using the media manifest.
+ *
+ * This lets view-mode section components use `item.src` and `item.srcset`
+ * without needing to know about the manifest themselves.
+ */
+export function resolveManifestReferences(
+  content: unknown,
+  manifest: MediaManifest,
+  sizes: number[],
+): unknown {
+  if (Array.isArray(content)) {
+    return content.map((item) => resolveManifestReferences(item, manifest, sizes));
+  }
+
+  if (content !== null && typeof content === "object") {
+    const obj = content as Record<string, unknown>;
+
+    // If this object has an imageId, resolve it and merge resolved fields
+    if (typeof obj.imageId === "string") {
+      const manifestItem = manifest.images[obj.imageId];
+      const resolved = resolveMedia({ imageId: obj.imageId }, manifest, sizes);
+      const patch: Record<string, unknown> = {
+        alt: manifestItem?.alt ?? "",
+      };
+      if (resolved && resolved.tag === "img") {
+        patch.src = resolved.src;
+        if ("srcSet" in resolved && resolved.srcSet) {
+          patch.srcset = resolved.srcSet;
+        }
+      } else if (resolved && resolved.tag === "video") {
+        patch.src = resolved.src;
+        if (resolved.poster) {
+          patch.poster = resolved.poster;
+        }
+      }
+      return { ...obj, ...patch };
+    }
+
+    // Recurse into all values
+    const result: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = resolveManifestReferences(value, manifest, sizes);
+    }
+    return result;
+  }
+
+  return content;
+}

package/src/media/types.ts

@@ -0,0 +1,58 @@
+export {
+  VariantSchema,
+  MediaItemSchema,
+  ImageManifestSchema,
+  MediaConfigSchema,
+  type Variant,
+  type MediaItem,
+  type MediaManifest,
+  type MediaConfig,
+} from "../schemas/media";
+
+import type { MediaItem } from "../schemas/media";
+
+export type MediaKind = "image" | "animated" | "video";
+
+export interface MediaFile {
+  buffer: ArrayBuffer;
+  originalName: string;
+  mimeType: string;
+}
+
+export interface ResolvedImage {
+  tag: "img";
+  src: string;
+  srcSet?: string;
+  sizes?: string;
+  width: number;
+  height: number;
+}
+
+export interface ResolvedAnimated {
+  tag: "img";
+  src: string;
+  width: number;
+  height: number;
+}
+
+export interface ResolvedVideo {
+  tag: "video";
+  src: string;
+  poster?: string;
+  width: number;
+  height: number;
+  autoplay: boolean;
+  loop: boolean;
+  muted: boolean;
+}
+
+export type ResolvedMedia = ResolvedImage | ResolvedAnimated | ResolvedVideo;
+
+export interface MediaAdapter {
+  hash(file: MediaFile): Promise<string>;
+  exists(hash: string): Promise<boolean>;
+  process(file: MediaFile, hash: string, sizes: number[]): Promise<MediaItem>;
+  delete(id: string): Promise<void>;
+  resolve(id: string, sizes: number[]): ResolvedMedia | null;
+  list(): Promise<MediaItem[]>;
+}

package/src/media/utils.ts

@@ -0,0 +1,48 @@
+export async function hashFileBuffer(buffer: ArrayBuffer): Promise<string> {
+  if (typeof crypto !== "undefined" && crypto.subtle) {
+    const hashBuffer = await crypto.subtle.digest("SHA-256", buffer);
+    const hashArray = new Uint8Array(hashBuffer);
+    return Array.from(hashArray.slice(0, 8))
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
+  }
+  // FNV-1a fallback: two passes with different seeds, concatenated for 16 hex chars
+  const bytes = new Uint8Array(buffer);
+  const seeds = [0x811c9dc5, 0x050c5d1f];
+  let result = "";
+  for (const seed of seeds) {
+    let h = seed;
+    for (let i = 0; i < bytes.length; i++) {
+      h ^= bytes[i];
+      h = Math.imul(h, 0x01000193);
+    }
+    result += (h >>> 0).toString(16).padStart(8, "0");
+  }
+  return result;
+}
+
+export function sanitizeMediaName(name: string): string {
+  return name.replace(/\.[^.]+$/, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+
+export const MIME_TO_EXT: Record<string, string> = {
+  "image/gif": "gif", "image/apng": "apng", "image/png": "png",
+  "image/jpeg": "jpg", "image/webp": "webp", "image/svg+xml": "svg",
+  "video/mp4": "mp4", "video/webm": "webm",
+};
+
+export const EXT_TO_MIME: Record<string, string> = {
+  ...Object.fromEntries(
+    Object.entries(MIME_TO_EXT).map(([mime, ext]) => [`.${ext}`, mime]),
+  ),
+  ".jpeg": "image/jpeg",
+};
+
+export function mimeToExt(mime: string): string {
+  return MIME_TO_EXT[mime] ?? "bin";
+}
+
+export function displayFilenameExt(mime: string): string {
+  const ext = MIME_TO_EXT[mime];
+  return ext ? `.${ext}` : "";
+}