@drawnagency/primitives 0.1.0

package/src/media/videoPoster.ts

@@ -0,0 +1,53 @@
+export function generateVideoPoster(
+  blob: Blob,
+  quality: number,
+): Promise<{ posterBlob: Blob; width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    const url = URL.createObjectURL(blob);
+    video.muted = true;
+    video.preload = "auto";
+    video.src = url;
+
+    const cleanup = () => {
+      URL.revokeObjectURL(url);
+      video.removeAttribute("src");
+      video.load();
+    };
+
+    video.addEventListener("loadeddata", () => {
+      video.addEventListener("seeked", () => {
+        try {
+          const w = video.videoWidth;
+          const h = video.videoHeight;
+          const canvas = document.createElement("canvas");
+          canvas.width = w;
+          canvas.height = h;
+          const ctx = canvas.getContext("2d")!;
+          ctx.drawImage(video, 0, 0);
+          canvas.toBlob(
+            (posterBlob) => {
+              cleanup();
+              if (!posterBlob) {
+                reject(new Error("Failed to create poster blob"));
+                return;
+              }
+              resolve({ posterBlob, width: w, height: h });
+            },
+            "image/webp",
+            quality / 100,
+          );
+        } catch (err) {
+          cleanup();
+          reject(err);
+        }
+      }, { once: true });
+      video.currentTime = isFinite(video.duration) ? Math.min(0.1, video.duration / 2) : 0;
+    }, { once: true });
+
+    video.addEventListener("error", () => {
+      cleanup();
+      reject(new Error("Failed to load video for poster generation"));
+    }, { once: true });
+  });
+}

package/src/media/worker.ts

@@ -0,0 +1,122 @@
+interface ProcessMessage {
+  type: "process";
+  id: string;
+  buffer: ArrayBuffer;
+  originalName: string;
+  mimeType: string;
+  hash: string;
+  kind: "image" | "animated" | "video";
+  sizes: number[];
+  quality: number;
+}
+
+interface ProgressMessage {
+  type: "progress";
+  id: string;
+  percent: number;
+}
+
+interface CompleteMessage {
+  type: "complete";
+  id: string;
+  variants: { width: number; height: number; size: number; blob: Blob }[];
+  primaryBlob: Blob;
+  posterBlob?: Blob;
+  width: number;
+  height: number;
+}
+
+interface ErrorMessage {
+  type: "error";
+  id: string;
+  message: string;
+}
+
+self.onmessage = async (e: MessageEvent<ProcessMessage>) => {
+  const msg = e.data;
+  if (msg.type !== "process") return;
+
+  try {
+    const post = (data: ProgressMessage | CompleteMessage | ErrorMessage) =>
+      self.postMessage(data);
+
+    post({ type: "progress", id: msg.id, percent: 5 });
+
+    if (msg.kind === "animated" || msg.kind === "video") {
+      const primaryBlob = new Blob([msg.buffer], { type: msg.mimeType });
+      let posterBlob: Blob | undefined;
+      let width = 0;
+      let height = 0;
+
+      if (msg.kind === "animated") {
+        const bitmap = await createImageBitmap(primaryBlob);
+        width = bitmap.width;
+        height = bitmap.height;
+        const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+        const ctx = canvas.getContext("2d")!;
+        ctx.drawImage(bitmap, 0, 0);
+        posterBlob = await canvas.convertToBlob({ type: "image/webp", quality: msg.quality / 100 });
+        bitmap.close();
+      }
+
+      if (msg.kind === "video") {
+        width = 0;
+        height = 0;
+      }
+
+      post({ type: "progress", id: msg.id, percent: 100 });
+      post({ type: "complete", id: msg.id, variants: [], primaryBlob, posterBlob, width, height });
+      return;
+    }
+
+    // Static image processing
+    const originalBlob = new Blob([msg.buffer], { type: msg.mimeType });
+    const bitmap = await createImageBitmap(originalBlob);
+    const origWidth = bitmap.width;
+    const origHeight = bitmap.height;
+
+    post({ type: "progress", id: msg.id, percent: 25 });
+
+    const applicableSizes = msg.sizes
+      .filter((s) => s <= origWidth)
+      .sort((a, b) => b - a);
+
+    if (applicableSizes.length === 0) {
+      applicableSizes.push(origWidth);
+    }
+
+    const variants: { width: number; height: number; size: number; blob: Blob }[] = [];
+    const totalVariants = applicableSizes.length;
+
+    for (let i = 0; i < applicableSizes.length; i++) {
+      const targetWidth = applicableSizes[i];
+      const scale = targetWidth / origWidth;
+      const targetHeight = Math.round(origHeight * scale);
+
+      const canvas = new OffscreenCanvas(targetWidth, targetHeight);
+      const ctx = canvas.getContext("2d")!;
+      ctx.drawImage(bitmap, 0, 0, targetWidth, targetHeight);
+
+      const blob = await canvas.convertToBlob({ type: "image/webp", quality: msg.quality / 100 });
+      variants.push({ width: targetWidth, height: targetHeight, size: blob.size, blob });
+
+      const percent = 25 + Math.round(((i + 1) / totalVariants) * 75);
+      post({ type: "progress", id: msg.id, percent });
+    }
+
+    bitmap.close();
+
+    const primaryBlob = variants[0]?.blob ?? originalBlob;
+    post({
+      type: "complete",
+      id: msg.id,
+      variants,
+      primaryBlob,
+      width: origWidth,
+      height: origHeight,
+    });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Processing failed";
+    self.postMessage({ type: "error", id: msg.id, message });
+  }
+};

package/src/schemas/audience.ts

@@ -0,0 +1,28 @@
+import { z } from "zod";
+import { HexColorSchema } from "./shared";
+
+export const AudienceNameSchema = z
+  .string()
+  .min(1)
+  .max(32)
+  .regex(
+    /^[a-z0-9]([a-z0-9_-]*[a-z0-9])?$/,
+    "lowercase alphanumeric, dashes and underscores allowed",
+  );
+
+export const AudienceColorSchema = HexColorSchema.nullable();
+
+export type AudienceName = z.infer<typeof AudienceNameSchema>;
+export type AudienceColor = z.infer<typeof AudienceColorSchema>;
+
+/**
+ * Convert a friendly display string into an audience slug.
+ * Lowercases, replaces non-alphanumeric runs with single dashes,
+ * strips leading/trailing dashes. Result must pass AudienceNameSchema.
+ */
+export function slugifyAudienceName(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}

package/src/schemas/auth.ts

@@ -0,0 +1,31 @@
+import { z } from "zod";
+
+export const RoleSchema = z.enum(["owner", "editor"]);
+
+export const SessionSchema = z.object({
+  userId: z.string().nullable(),
+  email: z.string().nullable(),
+  role: RoleSchema,
+  siteId: z.string(),
+});
+
+export const SiteUserSchema = z.object({
+  id: z.string(),
+  email: z.string(),
+  role: RoleSchema,
+  createdAt: z.string(),
+});
+
+export const AudienceSchema = z.object({
+  name: z.string(),
+  displayName: z.string(),
+  color: z.string().nullable(),
+  readonly: z.boolean(),
+  hasPassword: z.boolean(),
+  isDefault: z.boolean(),
+});
+
+export type Session = z.infer<typeof SessionSchema>;
+export type SiteUser = z.infer<typeof SiteUserSchema>;
+export type Audience = z.infer<typeof AudienceSchema>;
+export type Role = z.infer<typeof RoleSchema>;

package/src/schemas/index.ts

@@ -0,0 +1,7 @@
+export * from "./shared";
+export * from "./sections";
+export * from "./site-config";
+export * from "./media";
+export * from "./audience";
+export * from "./media-grid-options";
+export * from "./auth";

package/src/schemas/media-grid-options.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const MediaGridOptionsSchema = z.object({
+  square: z.boolean().optional(),
+  border: z.boolean().optional(),
+  crop: z.boolean().optional(),
+  showCaptions: z.boolean().optional(),
+}).default({});

package/src/schemas/media.ts

@@ -0,0 +1,40 @@
+import { z } from "zod";
+
+export const VariantSchema = z.object({
+  width: z.number().int().positive(),
+  height: z.number().int().positive(),
+  size: z.number().int().nonnegative(),
+});
+
+export type Variant = z.infer<typeof VariantSchema>;
+
+export const 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(""),
+});
+
+export type MediaItem = z.infer<typeof MediaItemSchema>;
+
+export const ImageManifestSchema = z.object({
+  images: z.record(z.string(), MediaItemSchema),
+});
+
+export type MediaManifest = z.infer<typeof ImageManifestSchema>;
+
+export const MediaConfigSchema = z.object({
+  adapter: z.enum(["github"]).default("github"),
+  sizes: z.array(z.number()).default([640, 1080, 1920]),
+  maxFileSize: z.number().default(5242880),
+  quality: z.number().min(1).max(100).default(85),
+});
+
+export type MediaConfig = z.infer<typeof MediaConfigSchema>;

package/src/schemas/sections.ts

@@ -0,0 +1,24 @@
+import { z } from "zod";
+import { getAllSchemas } from "../lib/registry";
+
+export interface SectionContent<C = Record<string, unknown>> {
+  type: string;
+  content: C;
+  options?: Record<string, unknown>;
+}
+
+export interface Section<C = Record<string, unknown>> extends SectionContent<C> {
+  id: string;
+}
+
+export function getSectionContentSchema(): z.ZodType<SectionContent> {
+  const schemas = getAllSchemas() as [z.ZodTypeAny, z.ZodTypeAny, ...z.ZodTypeAny[]];
+  if (schemas.length < 2) {
+    throw new Error("At least 2 section schemas must be registered before validation");
+  }
+  return z.union(schemas) as z.ZodType<SectionContent>;
+}
+
+export function getSectionSchema(): z.ZodType<Section> {
+  return z.object({ id: z.string() }).and(getSectionContentSchema()) as z.ZodType<Section>;
+}

package/src/schemas/shared.ts

@@ -0,0 +1,96 @@
+import { z } from "zod";
+
+// --- Text ---
+const TextHeadingLine = z.object({
+  type: z.literal("heading"),
+  text: z.string(),
+});
+
+const TextParagraphLine = z.object({
+  type: z.enum(["paragraph", "paragraph_large"]),
+  text: z.string(),
+});
+
+const TextLabelValueLine = z.object({
+  type: z.literal("label_value"),
+  label: z.string(),
+  text: z.string(),
+});
+
+const TextListItemLine = z.object({
+  type: z.enum(["list_item_unordered", "list_item_ordered"]),
+  text: z.string(),
+});
+
+export const TextLineSchema = z.discriminatedUnion("type", [
+  TextHeadingLine,
+  TextParagraphLine,
+  TextLabelValueLine,
+  TextListItemLine,
+]);
+
+export type TextLine = z.infer<typeof TextLineSchema>;
+
+// --- Media References ---
+const BaseMediaRef = z.object({
+  imageId: z.string().default(""),
+  caption: z.union([z.string(), z.array(z.string())]).optional(),
+  background: z.string().optional(),
+  invertFrom: z.string().optional(),
+  border: z.boolean().optional(),
+  objectFit: z.enum(["cover", "contain"]).optional(),
+});
+
+const ImageRef = BaseMediaRef.extend({
+  type: z.literal("image"),
+});
+
+const VideoRef = BaseMediaRef.extend({
+  type: z.literal("video"),
+  poster: z.string().optional(),
+  autoplay: z.boolean().optional(),
+  loop: z.boolean().optional(),
+  muted: z.boolean().optional(),
+});
+
+const DoDontImageRef = BaseMediaRef.extend({
+  type: z.literal("doDontImage"),
+  doDont: z.enum(["do", "dont"]),
+});
+
+const LinkedImageRef = BaseMediaRef.extend({
+  type: z.literal("linkedImage"),
+  href: z.string(),
+  target: z.string().optional(),
+  linkText: z.string().optional(),
+});
+
+export const MediaReferenceSchema = z.discriminatedUnion("type", [
+  ImageRef, VideoRef, DoDontImageRef, LinkedImageRef,
+]);
+
+export type MediaReference = z.infer<typeof MediaReferenceSchema>;
+
+// --- Colors ---
+export const HexColorSchema = z
+  .string()
+  .regex(/^#[0-9a-fA-F]{6}$/, "must be a 6-digit hex color");
+
+export const ColorSpaceSchema = z.object({
+  hex: HexColorSchema.optional(),
+  rgb: z.string().optional(),
+  cmyk: z.string().optional(),
+  pantone: z.string().optional(),
+}).refine(
+  (data) => data.hex !== undefined || data.rgb !== undefined || data.cmyk !== undefined || data.pantone !== undefined,
+  { message: "At least one color space must be defined" },
+);
+
+export type ColorSpace = z.infer<typeof ColorSpaceSchema>;
+
+export const ColorItemSchema = z.object({
+  name: z.string().optional(),
+  spaces: z.array(ColorSpaceSchema).min(1),
+});
+
+export type ColorItem = z.infer<typeof ColorItemSchema>;

package/src/schemas/site-config.ts

@@ -0,0 +1,38 @@
+import { z } from "zod";
+import { MediaConfigSchema } from "./media";
+import { HexColorSchema } from "./shared";
+
+export const SectionMetaSchema = z.object({
+  type: z.string(),
+  status: z.enum(["draft", "published", "archived"]),
+  access: z.array(z.string()),
+});
+
+export type SectionMeta = z.infer<typeof SectionMetaSchema>;
+
+export const IndexSchema = z.object({
+  siteId: z.string(),
+  order: z.array(z.string()),
+  sections: z.record(z.string(), SectionMetaSchema),
+}).refine(
+  (data) => data.order.every((id) => id in data.sections),
+  { message: "All order entries must have a corresponding section in sections" }
+);
+
+export type SiteIndex = z.infer<typeof IndexSchema>;
+
+export const SiteConfigSchema = z.object({
+  siteName: z.string().default("Brand Portal"),
+  primaryColor: HexColorSchema.default("#009ca6"),
+  primaryContrast: HexColorSchema.default("#f0f0f0"),
+  darkMode: z.enum(["light", "dark", "optional"]).default("light"),
+  headingFont: z.string().default("system-ui"),
+  bodyFont: z.string().default("system-ui"),
+  googleFontsUrl: z.string()
+    .refine(url => url.startsWith("https://fonts.googleapis.com/"), "Must be a Google Fonts URL")
+    .nullable()
+    .default(null),
+  media: MediaConfigSchema.default(MediaConfigSchema.parse({})),
+});
+
+export type SiteConfig = z.infer<typeof SiteConfigSchema>;