@drawnagency/primitives 0.1.49 → 0.1.50

package/src/lib/events.ts

@@ -1,4 +1,4 @@
-import type { NavItem } from "./nav";
+import type { NavItem, SiteNav } from "./nav";
 
 export interface TypedEvent<T> {
   dispatch(detail: T): void;
@@ -22,3 +22,5 @@ export const editModeEvent = createEvent<{ isEditMode: boolean }>("editmodechang
 export const navChangeEvent = createEvent<NavItem[]>("sitenavchange");
 export const darkModeEvent = createEvent<string>("sitedarkmode");
 export const historySelectEvent = createEvent<{ sha: string; date: string }>("history-select");
+export const siteNavChangeEvent = createEvent<SiteNav>("sitenavchange-v2");
+export const pageSelectEvent = createEvent<string>("pageselect");

package/src/lib/links.ts

@@ -0,0 +1,41 @@
+import type { SiteIndex } from "../schemas/site-config";
+import type { Section } from "../schemas/sections";
+import type { LinkValue } from "../schemas/link";
+import { pageById } from "./pages";
+import { toSectionId } from "./nav";
+
+export function resolveLinkHref(
+  link: LinkValue,
+  index: SiteIndex,
+  headingById: Record<string, string | undefined>,
+): { href: string; target: string } {
+  if (link.kind === "external") return { href: link.href, target: link.target };
+
+  const page = pageById(index, link.pageId);
+  if (!page) return { href: "", target: link.target };
+  let href = page.slug === "" ? "/" : `/${page.slug}`;
+  if (link.anchorSectionId) {
+    const heading = headingById[link.anchorSectionId];
+    if (heading) href += `#${toSectionId(heading)}`;
+  }
+  return { href, target: link.target };
+}
+
+/**
+ * Rewrite any internal LinkValue embedded in a section's content into a
+ * resolved external link so the zero-JS viewer renders a plain <a>. Currently
+ * the only link-bearing field is the button section's `content.link`.
+ */
+export function resolveInternalLinks(
+  section: Section,
+  index: SiteIndex,
+  headingById: Record<string, string | undefined>,
+): Section {
+  const content = section.content as { link?: LinkValue } | undefined;
+  if (!content?.link || content.link.kind !== "internal") return section;
+  const resolved = resolveLinkHref(content.link, index, headingById);
+  return {
+    ...section,
+    content: { ...content, link: { kind: "external", href: resolved.href, target: resolved.target } },
+  };
+}

package/src/lib/loader.ts

@@ -15,7 +15,7 @@ export interface SiteContent {
 /**
  * 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.
+ * Returns sections in the concatenated order of every page's order.
  */
 export function mergeSiteContent(
   index: SiteIndex,
@@ -26,7 +26,8 @@ export function mergeSiteContent(
   const canValidate = getAllSchemas().length >= 2;
   const schema = canValidate ? getSectionSchema() : null;
 
-  for (const id of index.order) {
+  const orderedIds = index.pages.flatMap((p) => p.order);
+  for (const id of orderedIds) {
     const raw = sectionFiles[id];
     if (!raw) {
       console.warn(`Section file missing for id: ${id}, skipping`);
@@ -53,7 +54,7 @@ export function mergeSiteContent(
 /**
  * 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.
+ * receive sections merged across every page's order.
  */
 export function loadStaticSiteContent(
   index: SiteIndex,
@@ -81,7 +82,7 @@ export async function loadSiteContent(contentDir: string): Promise<SiteContent>
   const index = IndexSchema.parse(indexRaw);
 
   const sectionFiles: Record<string, unknown> = {};
-  for (const id of index.order) {
+  for (const id of index.pages.flatMap((p: SiteIndex["pages"][number]) => p.order)) {
     const sectionPath = path.join(contentDir, "sections", `${id}.json`);
     sectionFiles[id] = JSON.parse(await fs.readFile(sectionPath, "utf-8"));
   }

package/src/lib/nav.ts

@@ -1,5 +1,7 @@
 import type { LoadedSection } from "./loader";
 import { getSection, type SectionRegistry } from "./registry";
+import { audiencePasses, homePage, pageDisplayTitle } from "./pages";
+import type { SiteIndex } from "../schemas/site-config";
 
 export interface NavItem {
   href: string;
@@ -81,3 +83,60 @@ export function generateNavLinks(
 
   return nav;
 }
+
+export interface PageNavItem {
+  id: string;
+  title: string;
+  href: string;
+  slug: string;
+  isActive: boolean;
+  headings: NavItem[];
+}
+
+export interface SiteNav {
+  pages: PageNavItem[];
+  /** Live pages with showInNav off — editor-only group, like the archive. */
+  hidden: PageNavItem[];
+  archive: PageNavItem[];
+}
+
+function pageHref(slug: string): string {
+  return slug === "" ? "/" : `/${slug}`;
+}
+
+export function generateSiteNav(opts: {
+  index: SiteIndex;
+  activeSections: LoadedSection[];
+  activePageId: string | null;
+  mode: "viewer" | "editor";
+  audience: string | null;
+  registry?: SectionRegistry;
+}): SiteNav {
+  const { index, activeSections, activePageId, mode, audience, registry } = opts;
+  const active = activePageId ?? homePage(index).id;
+
+  const toNavItem = (p: (typeof index.pages)[number]): PageNavItem => ({
+    id: p.id,
+    title: pageDisplayTitle(p.title),
+    href: pageHref(p.slug),
+    slug: p.slug,
+    isActive: p.id === active,
+    headings: p.id === active ? generateNavLinks(activeSections, registry) : [],
+  });
+
+  if (mode === "editor") {
+    return {
+      pages: index.pages.filter((p) => p.status === "live" && p.showInNav).map(toNavItem),
+      hidden: index.pages.filter((p) => p.status === "live" && !p.showInNav).map(toNavItem),
+      archive: index.pages.filter((p) => p.status === "archived").map(toNavItem),
+    };
+  }
+
+  return {
+    pages: index.pages
+      .filter((p) => p.status === "live" && p.showInNav && audiencePasses(p.access, audience))
+      .map(toNavItem),
+    hidden: [],
+    archive: [],
+  };
+}

package/src/lib/pages.ts

@@ -0,0 +1,209 @@
+import type { Page, SiteIndex, SectionMeta } from "../schemas/site-config";
+import { RESERVED_SLUGS } from "../schemas/site-config";
+
+/**
+ * Display fallback for blank page titles. addPage creates pages with an empty
+ * title (the editor prompts for one), and closing the modal can leave it blank
+ * — every UI that renders a page title must go through this.
+ */
+export function pageDisplayTitle(title: string): string {
+  return title || "Untitled";
+}
+
+export function slugifyPageSlug(input: string): string {
+  return input.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+
+export function uniquePageSlug(base: string, existing: string[]): string {
+  const taken = new Set(existing);
+  const reserved = new Set<string>(RESERVED_SLUGS);
+  let candidate = base || "page";
+  if (!taken.has(candidate) && !reserved.has(candidate)) return candidate;
+  let n = 2;
+  while (taken.has(`${candidate}-${n}`) || reserved.has(`${candidate}-${n}`)) n++;
+  return `${candidate}-${n}`;
+}
+
+export function pageById(index: SiteIndex, id: string): Page | undefined {
+  return index.pages.find((p) => p.id === id);
+}
+
+export function homePage(index: SiteIndex): Page {
+  return index.pages.find((p) => p.isHome) ?? index.pages[0];
+}
+
+export function pageBySlug(index: SiteIndex, slug: string): Page | undefined {
+  const normalized = slug.replace(/^\/+|\/+$/g, "");
+  if (normalized === "") return homePage(index);
+  return index.pages.find((p) => p.slug === normalized);
+}
+
+export function audiencePasses(access: string[], audience: string | null): boolean {
+  if (access.length === 0) return true;
+  if (!audience) return true;
+  return access.includes(audience);
+}
+
+function mapPages(index: SiteIndex, fn: (p: Page) => Page): SiteIndex {
+  return { ...index, pages: index.pages.map(fn) };
+}
+
+export function addPage(index: SiteIndex, id: string): SiteIndex {
+  // Title starts blank (the editor prompts for it); the slug must stay valid and
+  // unique in the stored index, so it gets a placeholder until the title is typed.
+  const slug = uniquePageSlug("new-page", index.pages.map((p) => p.slug));
+  const page: Page = {
+    id, title: "", slug, isHome: false, showInNav: true, status: "live", access: [], order: [],
+  };
+  return { ...index, pages: [...index.pages, page] };
+}
+
+export function reorderPages(index: SiteIndex, fromIndex: number, toIndex: number): SiteIndex {
+  const len = index.pages.length;
+  if (fromIndex < 0 || fromIndex >= len || toIndex < 0 || toIndex >= len) return index;
+  const pages = [...index.pages];
+  const [moved] = pages.splice(fromIndex, 1);
+  pages.splice(toIndex, 0, moved);
+  return { ...index, pages };
+}
+
+export function setHomePage(index: SiteIndex, pageId: string): SiteIndex {
+  const current = homePage(index);
+  if (current.id === pageId) return index;
+  if (!pageById(index, pageId)) return index;
+  const existingSlugs = index.pages.map((p) => p.slug);
+  const demotedSlug = uniquePageSlug(slugifyPageSlug(current.title) || "home", existingSlugs.filter((s) => s !== ""));
+  return mapPages(index, (p) => {
+    if (p.id === pageId) return { ...p, isHome: true, slug: "" };
+    if (p.id === current.id) return { ...p, isHome: false, slug: demotedSlug };
+    return { ...p, isHome: false };
+  });
+}
+
+export function setPageArchived(index: SiteIndex, pageId: string, archived: boolean): SiteIndex {
+  return mapPages(index, (p) => {
+    if (p.id !== pageId) return p;
+    if (p.isHome && archived) return p;
+    return { ...p, status: archived ? "archived" : "live" };
+  });
+}
+
+export function setPageFields(
+  index: SiteIndex,
+  pageId: string,
+  patch: Partial<Pick<Page, "title" | "slug" | "showInNav">>,
+): SiteIndex {
+  return mapPages(index, (p) => (p.id === pageId ? { ...p, ...patch } : p));
+}
+
+export function setPageAudience(
+  index: SiteIndex,
+  pageId: string,
+  access: string[],
+): { index: SiteIndex; resetSectionIds: string[] } {
+  const page = pageById(index, pageId);
+  if (!page) return { index, resetSectionIds: [] };
+  const removed = page.access.filter((a) => !access.includes(a));
+  const nextPages = index.pages.map((p) => (p.id === pageId ? { ...p, access } : p));
+
+  const resetSectionIds: string[] = [];
+  const nextSections: Record<string, SectionMeta> = { ...index.sections };
+  if (removed.length > 0) {
+    for (const sectionId of page.order) {
+      const meta = nextSections[sectionId];
+      if (meta && meta.access.some((a) => removed.includes(a))) {
+        nextSections[sectionId] = { ...meta, access: [] };
+        resetSectionIds.push(sectionId);
+      }
+    }
+  }
+  return { index: { ...index, pages: nextPages, sections: nextSections }, resetSectionIds };
+}
+
+export function deletePage(
+  index: SiteIndex,
+  pageId: string,
+): { index: SiteIndex; removedSectionIds: string[] } {
+  const page = pageById(index, pageId);
+  if (!page || page.isHome) return { index, removedSectionIds: [] };
+  const removedSectionIds = [...page.order];
+  const nextSections: Record<string, SectionMeta> = { ...index.sections };
+  for (const id of removedSectionIds) delete nextSections[id];
+  return {
+    index: { ...index, pages: index.pages.filter((p) => p.id !== pageId), sections: nextSections },
+    removedSectionIds,
+  };
+}
+
+export function addSectionToPage(
+  index: SiteIndex,
+  pageId: string,
+  sectionId: string,
+  meta: SectionMeta,
+  insertIndex: number,
+): SiteIndex {
+  const pages = index.pages.map((p) => {
+    if (p.id !== pageId) return p;
+    const order = [...p.order];
+    order.splice(insertIndex, 0, sectionId);
+    return { ...p, order };
+  });
+  return { ...index, pages, sections: { ...index.sections, [sectionId]: meta } };
+}
+
+export function removeSectionFromPages(index: SiteIndex, sectionId: string): SiteIndex {
+  const pages = index.pages.map((p) =>
+    p.order.includes(sectionId) ? { ...p, order: p.order.filter((id) => id !== sectionId) } : p,
+  );
+  const sections = { ...index.sections };
+  delete sections[sectionId];
+  return { ...index, pages, sections };
+}
+
+export function reorderSectionInPage(
+  index: SiteIndex,
+  pageId: string,
+  fromIndex: number,
+  toIndex: number,
+): SiteIndex {
+  const pages = index.pages.map((p) => {
+    if (p.id !== pageId) return p;
+    const len = p.order.length;
+    if (fromIndex < 0 || fromIndex >= len || toIndex < 0 || toIndex >= len) return p;
+    const order = [...p.order];
+    const [moved] = order.splice(fromIndex, 1);
+    order.splice(toIndex, 0, moved);
+    return { ...p, order };
+  });
+  return { ...index, pages };
+}
+
+export function moveSection(
+  index: SiteIndex,
+  sectionId: string,
+  destPageId: string,
+  position: "top" | "bottom",
+): SiteIndex {
+  const dest = pageById(index, destPageId);
+  if (!dest) return index;
+  if (!index.sections[sectionId]) return index;
+  const pages = index.pages.map((p) => {
+    if (p.order.includes(sectionId)) p = { ...p, order: p.order.filter((id) => id !== sectionId) };
+    if (p.id === destPageId) {
+      const order = [...p.order];
+      if (position === "top") order.unshift(sectionId);
+      else order.push(sectionId);
+      p = { ...p, order };
+    }
+    return p;
+  });
+
+  // Cascade: if the destination declares audiences and the section carries any
+  // audience not allowed there, reset it to "No Audience".
+  let sections = index.sections;
+  const meta = index.sections[sectionId];
+  if (meta && dest.access.length > 0 && meta.access.some((a) => !dest.access.includes(a))) {
+    sections = { ...index.sections, [sectionId]: { ...meta, access: [] } };
+  }
+  return { ...index, pages, sections };
+}

package/src/lib/registry.ts

@@ -1,6 +1,7 @@
 import type { ZodType, z } from "zod";
 import type { ComponentType, ReactNode } from "react";
 import type { Audience } from "../schemas/auth";
+import type { LinkValue } from "../schemas/link";
 
 // --- Settings field types ---
 
@@ -42,6 +43,12 @@ export type SettingsFieldDef =
       min: number;
       max: number;
       step?: number;
+    }
+  | {
+      type: "link";
+      label: string;
+      default: LinkValue;
+      target?: "content" | "options";
     };
 
 export type SettingsSchema = Record<string, SettingsFieldDef>;
@@ -82,6 +89,7 @@ export interface WrapperProps {
   onReorder?: (fromIndex: number, toIndex: number) => void;
   onRequestInsert?: (index: number) => void;
   onDelete?: () => void;
+  onMoveSection?: () => void;
   mainStatus?: string | null;
   contentDiffersFromMain?: boolean;
   isLocalOnly?: boolean;

package/src/schemas/index.ts

@@ -5,3 +5,4 @@ export * from "./media";
 export * from "./audience";
 export * from "./media-grid-options";
 export * from "./auth";
+export * from "./link";

package/src/schemas/link.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+export const LinkTargetSchema = z.enum(["_self", "_blank"]);
+
+export const LinkValueSchema = z.discriminatedUnion("kind", [
+  z.object({ kind: z.literal("external"), href: z.string(), target: LinkTargetSchema }),
+  z.object({
+    kind: z.literal("internal"),
+    pageId: z.string(),
+    anchorSectionId: z.string().nullable().optional(),
+    target: LinkTargetSchema,
+  }),
+]);
+
+export type LinkValue = z.infer<typeof LinkValueSchema>;
+
+export const DEFAULT_LINK: LinkValue = { kind: "external", href: "", target: "_self" };

package/src/schemas/site-config.ts

@@ -14,21 +14,123 @@ export const SectionMetaSchema = z.object({
 
 export type SectionMeta = z.infer<typeof SectionMetaSchema>;
 
-export const IndexSchema = z.object({
-  siteId: z.string(),
+// Page slugs that would shadow a platform route. KEEP IN SYNC with the root and
+// /edit/* route patterns injected in packages/core/src/integration.ts — if a new
+// root-level route is added there, add its first segment here (the test in Step 1
+// guards the known set). This is the single source of truth for reserved slugs;
+// the schema, uniquePageSlug, and /api/save all import it.
+export const RESERVED_SLUGS = ["edit", "api", "login", "set-password", "404"] as const;
+
+export const PageStatusSchema = z.enum(["live", "archived"]);
+
+export const PageSchema = z.object({
+  id: z.string().min(1),
+  title: z.string(),
+  slug: z.string(),
+  isHome: z.boolean(),
+  showInNav: z.boolean(),
+  status: PageStatusSchema,
+  access: z.array(z.string()),
   order: z.array(z.string()),
+});
+
+export type Page = z.infer<typeof PageSchema>;
+
+const SLUG_RE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+// Raw input: accepts legacy (order[]) OR canonical (pages[]).
+const RawIndexSchema = z.object({
+  siteId: z.string(),
+  order: z.array(z.string()).optional(),
+  pages: z.array(PageSchema).optional(),
   sections: z.record(z.string(), SectionMetaSchema),
   lastModified: z.string().nullable().optional(),
-}).refine(
-  (data) => {
-    const orderSet = new Set(data.order);
-    return data.order.every((id) => id in data.sections) &&
-      Object.keys(data.sections).every((key) => orderSet.has(key));
-  },
-  { message: "Every id in order must have a sections entry and vice versa" }
-);
+});
+
+function normalizeRawIndex(data: z.infer<typeof RawIndexSchema>): z.input<typeof CanonicalIndexSchema> {
+  if (data.pages && data.pages.length > 0) {
+    return {
+      siteId: data.siteId,
+      pages: data.pages,
+      sections: data.sections,
+      lastModified: data.lastModified ?? null,
+    };
+  }
+  const order = data.order ?? Object.keys(data.sections);
+  return {
+    siteId: data.siteId,
+    pages: [
+      {
+        id: "home",
+        title: "Home",
+        slug: "",
+        isHome: true,
+        showInNav: true,
+        status: "live" as const,
+        access: [],
+        order,
+      },
+    ],
+    sections: data.sections,
+    lastModified: data.lastModified ?? null,
+  };
+}
+
+const CanonicalIndexSchema = z
+  .object({
+    siteId: z.string(),
+    pages: z.array(PageSchema),
+    sections: z.record(z.string(), SectionMetaSchema),
+    lastModified: z.string().nullable().optional(),
+  })
+  .superRefine((data, ctx) => {
+    const homes = data.pages.filter((p) => p.isHome);
+    if (homes.length !== 1) {
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Exactly one page must be the home page" });
+    }
+    if (homes[0]?.status === "archived") {
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "The home page cannot be archived" });
+    }
+    if (homes[0] && homes[0].slug !== "") {
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "The home page slug must be empty" });
+    }
+
+    const seenSlugs = new Set<string>();
+    for (const p of data.pages) {
+      if (!p.isHome) {
+        if (!SLUG_RE.test(p.slug)) {
+          ctx.addIssue({ code: z.ZodIssueCode.custom, message: `Invalid slug "${p.slug}"` });
+        }
+        if ((RESERVED_SLUGS as readonly string[]).includes(p.slug)) {
+          ctx.addIssue({ code: z.ZodIssueCode.custom, message: `Slug "${p.slug}" is reserved` });
+        }
+      }
+      if (seenSlugs.has(p.slug)) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: `Duplicate slug "${p.slug}"` });
+      }
+      seenSlugs.add(p.slug);
+    }
+
+    const fromPages: string[] = [];
+    for (const p of data.pages) fromPages.push(...p.order);
+    const fromPagesSet = new Set(fromPages);
+    if (fromPages.length !== fromPagesSet.size) {
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "A section id appears in more than one page" });
+    }
+    const sectionKeys = Object.keys(data.sections);
+    if (fromPagesSet.size !== sectionKeys.length || !sectionKeys.every((k) => fromPagesSet.has(k))) {
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "Page section orders must partition sections{} exactly" });
+    }
+  });
+
+export const IndexSchema = RawIndexSchema.transform(normalizeRawIndex).pipe(CanonicalIndexSchema);
+
+export type SiteIndex = z.infer<typeof CanonicalIndexSchema>;
 
-export type SiteIndex = z.infer<typeof IndexSchema>;
+/** Parse + normalize any raw index (legacy or canonical) to the canonical shape. */
+export function normalizeSiteIndex(raw: unknown): SiteIndex {
+  return IndexSchema.parse(raw);
+}
 
 export const SiteConfigSchema = z.object({
   siteName: z.string().default("Brand Portal"),