@drawnagency/primitives 0.1.0

package/src/lib/dexie.ts

@@ -0,0 +1,347 @@
+import Dexie from "dexie";
+import type { SectionContent } from "../schemas/sections";
+import type { SiteIndex, SectionMeta } from "../schemas/site-config";
+import type { LoadedSection } from "./loader";
+import type { MediaManifest, MediaItem } from "../media/types";
+
+interface SectionRow {
+  sectionId: string;
+  content: SectionContent;
+  dirty: boolean;
+  updatedAt: string;
+}
+
+interface SiteIndexRow {
+  key: string;
+  order: string[];
+  sections: Record<string, SectionMeta>;
+  updatedAt: string;
+}
+
+interface MetaRow {
+  key: string;
+  lastSavedSha: string | null;
+  lastSavedAt: string | null;
+  siteId: string;
+}
+
+interface SiteConfigRow {
+  key: string;
+  config: Record<string, unknown>;
+  updatedAt: string;
+}
+
+interface ContentCacheRow {
+  key: string;
+  sha: string;
+  sections: LoadedSection[];
+  index: SiteIndex;
+  siteConfig: Record<string, unknown>;
+  updatedAt: string;
+}
+
+interface MediaManifestRow {
+  key: string;
+  manifest: MediaManifest;
+  updatedAt: string;
+}
+
+interface PendingMediaRow {
+  id: string;
+  item: MediaItem;
+  localUrls: Record<string, string>;
+  updatedAt: string;
+}
+
+interface PendingMediaDeletionRow {
+  id: string;
+  deletedAt: string;
+}
+
+class EditorDatabase extends Dexie {
+  sections!: Dexie.Table<SectionRow, string>;
+  siteIndex!: Dexie.Table<SiteIndexRow, string>;
+  meta!: Dexie.Table<MetaRow, string>;
+  siteConfig!: Dexie.Table<SiteConfigRow, string>;
+  contentCache!: Dexie.Table<ContentCacheRow, string>;
+  mediaManifest!: Dexie.Table<MediaManifestRow, string>;
+  pendingMedia!: Dexie.Table<PendingMediaRow, string>;
+  pendingMediaDeletions!: Dexie.Table<PendingMediaDeletionRow, string>;
+
+  constructor(siteId: string) {
+    super(`brand-portal-${siteId}`);
+    this.version(1).stores({
+      sections: "sectionId",
+      siteIndex: "key",
+      meta: "key",
+    });
+    this.version(2).stores({
+      sections: "sectionId",
+      siteIndex: "key",
+      meta: "key",
+      siteConfig: "key",
+    });
+    this.version(3).stores({
+      sections: "sectionId",
+      siteIndex: "key",
+      meta: "key",
+      siteConfig: "key",
+      contentCache: "key",
+    });
+    this.version(4).stores({
+      sections: "sectionId",
+      siteIndex: "key",
+      meta: "key",
+      siteConfig: "key",
+      contentCache: "key",
+      mediaManifest: "key",
+      pendingMedia: "id",
+      pendingMediaDeletions: "id",
+    });
+  }
+}
+
+let db: EditorDatabase | null = null;
+
+function getDb(): EditorDatabase {
+  if (!db) throw new Error("Editor store not initialized. Call initEditorStore first.");
+  return db;
+}
+
+export function initEditorStore(siteId: string): void {
+  db = new EditorDatabase(siteId);
+}
+
+export async function checkForLocalChanges(): Promise<{ latestTimestamp: string } | null> {
+  const database = getDb();
+  const dirtyRows = await database.sections.filter((row) => row.dirty).toArray();
+  const indexRow = await database.siteIndex.get("current");
+  const configRow = await database.siteConfig.get("current");
+  if (dirtyRows.length === 0 && !indexRow && !configRow) return null;
+
+  const timestamps: string[] = [];
+  for (const row of dirtyRows) timestamps.push(row.updatedAt);
+  if (indexRow) timestamps.push(indexRow.updatedAt);
+  if (configRow) timestamps.push(configRow.updatedAt);
+
+  timestamps.sort();
+  return { latestTimestamp: timestamps[timestamps.length - 1] };
+}
+
+export async function restoreLocalChanges(): Promise<{
+  sections: Record<string, SectionContent>;
+  siteIndex?: SiteIndex;
+  siteConfig?: Record<string, unknown>;
+}> {
+  const sectionRows = await getDb().sections.toArray();
+  const sections: Record<string, SectionContent> = {};
+  for (const row of sectionRows) {
+    sections[row.sectionId] = row.content;
+  }
+
+  const indexRow = await getDb().siteIndex.get("current");
+  const configRow = await getDb().siteConfig.get("current");
+
+  if (indexRow) {
+    const metaRow = await getDb().meta.get("current");
+    const siteId = metaRow?.siteId ?? "";
+    return {
+      sections,
+      siteIndex: { siteId, order: indexRow.order, sections: indexRow.sections },
+      siteConfig: configRow?.config,
+    };
+  }
+
+  return { sections, siteIndex: undefined, siteConfig: configRow?.config };
+}
+
+export async function discardLocalChanges(): Promise<void> {
+  const database = getDb();
+  await database.transaction("rw", [database.sections, database.siteIndex, database.meta, database.siteConfig, database.pendingMedia, database.pendingMediaDeletions, database.mediaManifest], async () => {
+    await database.sections.clear();
+    await database.siteIndex.clear();
+    await database.meta.clear();
+    await database.siteConfig.clear();
+    await database.pendingMedia.clear();
+    await database.pendingMediaDeletions.clear();
+    await database.mediaManifest.clear();
+  });
+}
+
+export async function persistSiteIndex(index: SiteIndex): Promise<void> {
+  const now = new Date().toISOString();
+  const database = getDb();
+  await database.transaction("rw", [database.siteIndex, database.meta], async () => {
+    await database.siteIndex.put({
+      key: "current",
+      order: index.order,
+      sections: index.sections,
+      updatedAt: now,
+    });
+    await database.meta.put({
+      key: "current",
+      lastSavedSha: null,
+      lastSavedAt: null,
+      siteId: index.siteId,
+    });
+  });
+}
+
+export async function persistSiteConfig(config: Record<string, unknown>): Promise<void> {
+  const now = new Date().toISOString();
+  const database = getDb();
+  await database.siteConfig.put({
+    key: "current",
+    config,
+    updatedAt: now,
+  });
+}
+
+export async function hasLocalChanges(): Promise<boolean> {
+  const database = getDb();
+  const dirtyCount = await database.sections.filter((row) => row.dirty).count();
+  if (dirtyCount > 0) return true;
+  const indexRow = await database.siteIndex.get("current");
+  if (indexRow != null) return true;
+  const configRow = await database.siteConfig.get("current");
+  return configRow != null;
+}
+
+export async function getDirtySections(): Promise<
+  { sectionId: string; content: SectionContent }[]
+> {
+  const rows = await getDb().sections.filter((row) => row.dirty).toArray();
+  return rows.map((row) => ({ sectionId: row.sectionId, content: row.content }));
+}
+
+export async function persistAll(
+  sections: { sectionId: string; content: SectionContent }[],
+  siteIndex?: SiteIndex,
+  deletedSectionIds?: string[],
+  siteConfig?: Record<string, unknown>,
+): Promise<void> {
+  const now = new Date().toISOString();
+  const database = getDb();
+  await database.transaction(
+    "rw",
+    [database.sections, database.siteIndex, database.meta, database.siteConfig],
+    async () => {
+      if (sections.length > 0) {
+        await database.sections.bulkPut(
+          sections.map((e) => ({
+            sectionId: e.sectionId,
+            content: e.content,
+            dirty: true,
+            updatedAt: now,
+          })),
+        );
+      }
+
+      if (deletedSectionIds && deletedSectionIds.length > 0) {
+        await database.sections.bulkDelete(deletedSectionIds);
+      }
+
+      if (siteIndex) {
+        await database.siteIndex.put({
+          key: "current",
+          order: siteIndex.order,
+          sections: siteIndex.sections,
+          updatedAt: now,
+        });
+        await database.meta.put({
+          key: "current",
+          lastSavedSha: null,
+          lastSavedAt: null,
+          siteId: siteIndex.siteId,
+        });
+      }
+
+      if (siteConfig) {
+        await database.siteConfig.put({
+          key: "current",
+          config: siteConfig,
+          updatedAt: now,
+        });
+      }
+    },
+  );
+}
+
+export async function cacheContent(
+  sha: string,
+  sections: LoadedSection[],
+  index: SiteIndex,
+  siteConfig: Record<string, unknown>,
+): Promise<void> {
+  const now = new Date().toISOString();
+  await getDb().contentCache.put({
+    key: "current",
+    sha,
+    sections,
+    index,
+    siteConfig,
+    updatedAt: now,
+  });
+}
+
+export async function getCachedContent(): Promise<{
+  sha: string;
+  sections: LoadedSection[];
+  index: SiteIndex;
+  siteConfig: Record<string, unknown>;
+} | null> {
+  const row = await getDb().contentCache.get("current");
+  if (!row) return null;
+  return {
+    sha: row.sha,
+    sections: row.sections,
+    index: row.index,
+    siteConfig: row.siteConfig,
+  };
+}
+
+export async function persistMediaManifest(manifest: MediaManifest): Promise<void> {
+  const now = new Date().toISOString();
+  await getDb().mediaManifest.put({ key: "current", manifest, updatedAt: now });
+}
+
+export async function getMediaManifest(): Promise<MediaManifest | null> {
+  const row = await getDb().mediaManifest.get("current");
+  return row?.manifest ?? null;
+}
+
+export async function addPendingMediaItem(
+  item: MediaItem,
+  localUrls: Record<string, string> = {},
+): Promise<void> {
+  const now = new Date().toISOString();
+  await getDb().pendingMedia.put({ id: item.id, item, localUrls, updatedAt: now });
+}
+
+export async function getPendingMediaItems(): Promise<MediaItem[]> {
+  const rows = await getDb().pendingMedia.toArray();
+  return rows.map((r) => r.item);
+}
+
+export async function getPendingMediaLocalUrls(id: string): Promise<Record<string, string> | null> {
+  const row = await getDb().pendingMedia.get(id);
+  return row?.localUrls ?? null;
+}
+
+export async function markPendingMediaDeleted(id: string): Promise<void> {
+  const now = new Date().toISOString();
+  await getDb().pendingMediaDeletions.put({ id, deletedAt: now });
+}
+
+export async function getPendingMediaDeletions(): Promise<string[]> {
+  const rows = await getDb().pendingMediaDeletions.toArray();
+  return rows.map((r) => r.id);
+}
+
+export async function clearPendingMedia(): Promise<void> {
+  const database = getDb();
+  await database.transaction("rw", [database.pendingMedia, database.pendingMediaDeletions], async () => {
+    await database.pendingMedia.clear();
+    await database.pendingMediaDeletions.clear();
+  });
+}

package/src/lib/events.ts

@@ -0,0 +1,23 @@
+import type { NavItem } from "./nav";
+
+export interface TypedEvent<T> {
+  dispatch(detail: T): void;
+  listen(callback: (detail: T) => void): () => void;
+}
+
+export function createEvent<T>(name: string): TypedEvent<T> {
+  return {
+    dispatch(detail: T) {
+      window.dispatchEvent(new CustomEvent(name, { detail }));
+    },
+    listen(callback: (detail: T) => void): () => void {
+      const handler = (e: Event) => callback((e as CustomEvent<T>).detail);
+      window.addEventListener(name, handler);
+      return () => window.removeEventListener(name, handler);
+    },
+  };
+}
+
+export const editModeEvent = createEvent<{ isEditMode: boolean }>("editmodechange");
+export const navChangeEvent = createEvent<NavItem[]>("sitenavchange");
+export const darkModeEvent = createEvent<string>("sitedarkmode");

package/src/lib/google-fonts.ts

@@ -0,0 +1,10 @@
+export function buildGoogleFontsUrl(headingFont: string, bodyFont: string): string | null {
+  const fonts = new Set<string>();
+  if (headingFont !== "system-ui") fonts.add(headingFont);
+  if (bodyFont !== "system-ui") fonts.add(bodyFont);
+
+  if (fonts.size === 0) return null;
+
+  const params = [...fonts].map((f) => `family=${f.replace(/ /g, "+")}:wght@400;700`).join("&");
+  return `https://fonts.googleapis.com/css2?${params}&display=swap`;
+}

package/src/lib/grid.ts

@@ -0,0 +1,7 @@
+export const gridColsClass: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 min-sm:grid-cols-2",
+  3: "grid-cols-1 min-sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-2 min-sm:grid-cols-3 lg:grid-cols-5",
+};

package/src/lib/icons.ts

@@ -0,0 +1,58 @@
+import {
+  Check,
+  X,
+  ArrowRight,
+  Star,
+  Info,
+  AlertTriangle,
+  Heart,
+  Lightbulb,
+  Flag,
+  Shield,
+  Zap,
+  Eye,
+  Lock,
+  Globe,
+  Users,
+  Target,
+  Bookmark,
+  Clock,
+  ThumbsUp,
+  ThumbsDown,
+  type LucideIcon,
+} from "lucide-react";
+
+export interface IconEntry {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+export const curatedIcons: IconEntry[] = [
+  { id: "check", label: "Check", icon: Check },
+  { id: "x", label: "X", icon: X },
+  { id: "arrow-right", label: "Arrow Right", icon: ArrowRight },
+  { id: "star", label: "Star", icon: Star },
+  { id: "info", label: "Info", icon: Info },
+  { id: "alert-triangle", label: "Warning", icon: AlertTriangle },
+  { id: "heart", label: "Heart", icon: Heart },
+  { id: "lightbulb", label: "Lightbulb", icon: Lightbulb },
+  { id: "flag", label: "Flag", icon: Flag },
+  { id: "shield", label: "Shield", icon: Shield },
+  { id: "zap", label: "Zap", icon: Zap },
+  { id: "eye", label: "Eye", icon: Eye },
+  { id: "lock", label: "Lock", icon: Lock },
+  { id: "globe", label: "Globe", icon: Globe },
+  { id: "users", label: "Users", icon: Users },
+  { id: "target", label: "Target", icon: Target },
+  { id: "bookmark", label: "Bookmark", icon: Bookmark },
+  { id: "clock", label: "Clock", icon: Clock },
+  { id: "thumbs-up", label: "Thumbs Up", icon: ThumbsUp },
+  { id: "thumbs-down", label: "Thumbs Down", icon: ThumbsDown },
+];
+
+const iconMap = new Map(curatedIcons.map((e) => [e.id, e]));
+
+export function getIcon(id: string): IconEntry | undefined {
+  return iconMap.get(id);
+}

package/src/lib/index.ts

@@ -0,0 +1,35 @@
+export { cn } from "./cn";
+export { generateNavLinks, toSectionId, type NavItem } from "./nav";
+export { deriveContrast } from "./contrast";
+export { sanitizeHtml } from "./sanitize";
+export { gridColsClass } from "./grid";
+export { getIcon, curatedIcons, type IconEntry } from "./icons";
+export { buildGoogleFontsUrl } from "./google-fonts";
+export { formatTimestamp } from "./timestamp";
+export { safeRedirect } from "./safeRedirect";
+export { createEvent, editModeEvent, navChangeEvent, darkModeEvent, type TypedEvent } from "./events";
+export {
+  createRegistry,
+  defineSection,
+  registerSection,
+  registerSchema,
+  getSection,
+  getSchema,
+  getAllSections,
+  getAllSchemas,
+  clearRegistry,
+  type SectionRegistry,
+  type SectionDefinition,
+  type SectionProps,
+  type WrapperProps,
+  type SettingsFieldDef,
+  type SettingsSchema,
+  type CustomSettingsFormProps,
+} from "./registry";
+export {
+  mergeSiteContent,
+  loadStaticSiteContent,
+  loadSiteContent,
+  type LoadedSection,
+  type SiteContent,
+} from "./loader";

package/src/lib/loader.ts

@@ -0,0 +1,81 @@
+import { getSectionSchema, type Section } from "../schemas/sections";
+import { IndexSchema, type SiteIndex, type SectionMeta } from "../schemas/site-config";
+
+export interface LoadedSection {
+  section: Section;
+  meta: SectionMeta;
+}
+
+export interface SiteContent {
+  sections: LoadedSection[];
+  index: SiteIndex;
+}
+
+/**
+ * Merge a validated index with raw section file contents.
+ * Validates each section file against its Zod schema.
+ * Returns sections in the order specified by index.order.
+ */
+export function mergeSiteContent(
+  index: SiteIndex,
+  sectionFiles: Record<string, unknown>
+): SiteContent {
+  const sections: LoadedSection[] = [];
+
+  for (const id of index.order) {
+    const raw = sectionFiles[id];
+    if (!raw) {
+      console.warn(`Section file missing for id: ${id}, skipping`);
+      continue;
+    }
+    const result = getSectionSchema().safeParse(raw);
+    if (!result.success) {
+      const type = (raw as Record<string, unknown>).type ?? "unknown";
+      console.warn(`Skipping section "${id}" (type: ${type}): invalid schema`);
+      continue;
+    }
+    const meta = index.sections[id];
+    sections.push({ section: result.data, meta });
+  }
+
+  return { sections, index };
+}
+
+/**
+ * Build a SiteContent from a Vite `import.meta.glob` result.
+ * Callers glob the section JSON files at build time, pass the parsed index, and
+ * receive sections merged in index.order.
+ */
+export function loadStaticSiteContent(
+  index: SiteIndex,
+  sectionGlob: Record<string, unknown>,
+): SiteContent {
+  const sectionFiles: Record<string, unknown> = {};
+  for (const [path, data] of Object.entries(sectionGlob)) {
+    const filename = path.split("/").pop()!;
+    const id = filename.replace(".json", "");
+    sectionFiles[id] = data;
+  }
+  return mergeSiteContent(index, sectionFiles);
+}
+
+/**
+ * Load site content from the filesystem.
+ * For use in scripts and tests — Astro pages should use import.meta.glob instead.
+ */
+export async function loadSiteContent(contentDir: string): Promise<SiteContent> {
+  const fs = await import("node:fs/promises");
+  const path = await import("node:path");
+
+  const indexPath = path.join(contentDir, "index.json");
+  const indexRaw = JSON.parse(await fs.readFile(indexPath, "utf-8"));
+  const index = IndexSchema.parse(indexRaw);
+
+  const sectionFiles: Record<string, unknown> = {};
+  for (const id of index.order) {
+    const sectionPath = path.join(contentDir, "sections", `${id}.json`);
+    sectionFiles[id] = JSON.parse(await fs.readFile(sectionPath, "utf-8"));
+  }
+
+  return mergeSiteContent(index, sectionFiles);
+}

package/src/lib/nav.ts

@@ -0,0 +1,64 @@
+import type { LoadedSection } from "./loader";
+
+export interface NavItem {
+  href: string;
+  label: string;
+  status?: string;
+  children: NavItem[];
+}
+
+export function toSectionId(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, "")
+    .trim()
+    .replace(/\s+/g, "-");
+}
+
+/**
+ * Generate a three-tier navigation structure from sections.
+ * link_heading → top-level, sub_heading → second-level, sub_sub_heading → third-level.
+ * Non-heading sections are skipped.
+ */
+export function generateNavLinks(sections: LoadedSection[]): NavItem[] {
+  const nav: NavItem[] = [];
+  let currentParent: NavItem | null = null;
+  let currentChild: NavItem | null = null;
+
+  for (const { section, meta } of sections) {
+    const content = section.content as { heading?: string; excludeFromNav?: boolean };
+    if (!content.heading) continue;
+
+    if (section.type === "link_heading") {
+      currentParent = {
+        href: `#${toSectionId(content.heading)}`,
+        label: content.heading,
+        status: meta.status,
+        children: [],
+      };
+      currentChild = null;
+      nav.push(currentParent);
+    } else if (section.type === "sub_heading") {
+      if (content.excludeFromNav) continue;
+      if (!currentParent) continue;
+      currentChild = {
+        href: `#${toSectionId(content.heading)}`,
+        label: content.heading,
+        status: meta.status,
+        children: [],
+      };
+      currentParent.children.push(currentChild);
+    } else if (section.type === "sub_sub_heading") {
+      if (content.excludeFromNav) continue;
+      if (!currentChild) continue;
+      currentChild.children.push({
+        href: `#${toSectionId(content.heading)}`,
+        label: content.heading,
+        status: meta.status,
+        children: [],
+      });
+    }
+  }
+
+  return nav;
+}