@drawnagency/primitives 0.1.49 → 0.1.51

package/src/components/shell/SiteSettingsDisplay.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+import { Button } from "../shared/Button";
 import { Checkbox } from "../shared/Checkbox";
 import { ColorPicker } from "../shared/ColorPicker";
 import { FontPicker } from "../shared/FontPicker";
@@ -19,11 +21,32 @@ const darkModeOptions = [
   { label: "Optional (viewer toggle)", value: "optional" },
 ];
 
+const FAVICON_TYPES = ["image/svg+xml", "image/png"];
+const FAVICON_MAX_BYTES = 100 * 1024;
+
 export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
+  const [faviconError, setFaviconError] = useState<string | null>(null);
+
   function update(patch: Partial<SiteConfig>) {
     onChange({ ...siteConfig, ...patch });
   }
 
+  function handleFaviconFile(file: File | undefined) {
+    if (!file) return;
+    if (!FAVICON_TYPES.includes(file.type)) {
+      setFaviconError("Favicon must be an SVG or PNG.");
+      return;
+    }
+    if (file.size > FAVICON_MAX_BYTES) {
+      setFaviconError("Favicon must be 100KB or smaller.");
+      return;
+    }
+    setFaviconError(null);
+    const reader = new FileReader();
+    reader.onload = () => update({ favicon: reader.result as string });
+    reader.readAsDataURL(file);
+  }
+
   function handleColorChange(color: string) {
     const contrast = deriveContrast(color);
     onChange({ ...siteConfig, primaryColor: color, primaryContrast: contrast });
@@ -56,6 +79,48 @@ export function SiteSettingsDisplay({ siteConfig, onChange }: Props) {
         </div>
       </div>
 
+      <div>
+        <FormLabel>Favicon</FormLabel>
+        <div className="flex items-center gap-3">
+          {siteConfig.favicon && (
+            <img
+              src={siteConfig.favicon}
+              alt="Current favicon"
+              className="h-8 w-8 rounded border border-base-200 bg-base-accent object-contain p-1"
+            />
+          )}
+          <label className="inline-flex cursor-pointer items-center rounded border border-base-200 px-3 py-1.5 text-xs font-medium text-base-contrast transition-colors hover:bg-base-accent">
+            {siteConfig.favicon ? "Replace" : "Upload"}
+            <input
+              type="file"
+              accept="image/svg+xml,image/png,.svg,.png"
+              aria-label="Upload favicon"
+              className="sr-only"
+              onChange={(e) => {
+                handleFaviconFile(e.target.files?.[0]);
+                e.target.value = "";
+              }}
+            />
+          </label>
+          {siteConfig.favicon && (
+            <Button
+              variant="ghost"
+              tone="destructive"
+              size="sm"
+              aria-label="Remove favicon"
+              onClick={() => {
+                setFaviconError(null);
+                update({ favicon: null });
+              }}
+            >
+              Remove
+            </Button>
+          )}
+        </div>
+        <p className="mt-1 text-xs text-base-contrast/70">SVG or PNG, up to 100KB. Shown in browser tabs.</p>
+        {faviconError && <p className="mt-1 text-xs text-red-600">{faviconError}</p>}
+      </div>
+
       <Select
         label="Dark mode"
         value={siteConfig.darkMode}

package/src/hooks/useBuildStatus.ts

@@ -19,6 +19,10 @@ interface BuildStatusResult {
 const POLL_INTERVAL = 5000;
 const AUTO_CLEAR_DELAY = 10000;
 const FADE_DURATION = 1000;
+// A "building" row older than this on initial load is a leftover from a publish
+// whose deploy was never confirmed (e.g. superseded by a later build) — show
+// idle rather than a phantom in-progress publish.
+const STALE_BUILD_MS = 15 * 60 * 1000;
 
 export function useBuildStatus(): BuildStatusResult {
   const [state, setState] = useState<BuildState>("idle");
@@ -34,9 +38,9 @@ export function useBuildStatus(): BuildStatusResult {
     if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; }
   }, []);
 
-  const startTimer = useCallback(() => {
+  const startTimer = useCallback((initialSeconds = 0) => {
     stopTimer();
-    setElapsedSeconds(0);
+    setElapsedSeconds(initialSeconds);
     timerRef.current = setInterval(() => setElapsedSeconds((s) => s + 1), 1000);
   }, [stopTimer]);
 
@@ -114,11 +118,22 @@ export function useBuildStatus(): BuildStatusResult {
     async function check() {
       const data = await fetchStatus();
       if (cancelled) return;
-      handleStatusUpdate(data, true);
 
       if (data && data.state === "building") {
+        const ageMs = Date.now() - Date.parse(data.updatedAt);
+        if (Number.isFinite(ageMs) && ageMs > STALE_BUILD_MS) {
+          setState("idle");
+          return;
+        }
+        setState("building");
+        // Seed the timer from when the build actually started so the display
+        // counts real elapsed time instead of sitting frozen at 0:00.
+        startTimer(Number.isFinite(ageMs) ? Math.max(0, Math.floor(ageMs / 1000)) : 0);
         startPolling();
+        return;
       }
+
+      handleStatusUpdate(data, true);
     }
 
     check();
@@ -131,7 +146,7 @@ export function useBuildStatus(): BuildStatusResult {
       if (clearRef.current) clearTimeout(clearRef.current);
       if (fadeRef.current) clearTimeout(fadeRef.current);
     };
-  }, [fetchStatus, handleStatusUpdate, startPolling, stopPolling, stopTimer]);
+  }, [fetchStatus, handleStatusUpdate, startPolling, startTimer, stopPolling, stopTimer]);
 
   const startTracking = useCallback(() => {
     if (clearRef.current) { clearTimeout(clearRef.current); clearRef.current = null; }

package/src/hooks/useEditorPublish.ts

@@ -158,7 +158,7 @@ export function useEditorPublish({
       }
       siteIndex = {
         ...siteIndex,
-        order: siteIndex.order.filter((id) => !deleteSet.has(id)),
+        pages: siteIndex.pages.map((p) => ({ ...p, order: p.order.filter((id) => !deleteSet.has(id)) })),
         sections: filteredSections,
       };
     }

package/src/lib/dexie.ts

@@ -1,6 +1,6 @@
 import Dexie from "dexie";
 import type { SectionContent } from "../schemas/sections";
-import type { SiteIndex, SectionMeta, SiteConfig } from "../schemas/site-config";
+import type { SiteIndex, SectionMeta, SiteConfig, Page } from "../schemas/site-config";
 import type { LoadedSection } from "./loader";
 import type { MediaManifest, MediaItem } from "../media/types";
 
@@ -13,7 +13,7 @@ interface SectionRow {
 
 interface SiteIndexRow {
   key: string;
-  order: string[];
+  pages: Page[];
   sections: Record<string, SectionMeta>;
   deletedSections: string[];
   updatedAt: string;
@@ -123,6 +123,19 @@ class EditorDatabase extends Dexie {
     }).upgrade((tx) => {
       return tx.table("pendingMedia").clear();
     });
+    this.version(7).stores({
+      sections: "sectionId",
+      siteIndex: "key",
+      meta: "key",
+      siteConfig: "key",
+      contentCache: "key",
+      mediaManifest: "key",
+      pendingMedia: "id",
+      pendingMediaDeletions: "id",
+    }).upgrade(async (tx) => {
+      await tx.table("siteIndex").clear();
+      await tx.table("contentCache").clear();
+    });
   }
 }
 
@@ -173,7 +186,7 @@ export async function restoreLocalChanges(): Promise<{
     const siteId = metaRow?.siteId ?? "";
     return {
       sections,
-      siteIndex: { siteId, order: indexRow.order, sections: indexRow.sections },
+      siteIndex: { siteId, pages: indexRow.pages, sections: indexRow.sections },
       siteConfig: configRow?.config,
       deletedSections: indexRow.deletedSections ?? [],
     };
@@ -200,7 +213,7 @@ export async function persistSiteIndex(index: SiteIndex, deletedSections: string
   await database.transaction("rw", [database.siteIndex, database.meta], async () => {
     await database.siteIndex.put({
       key: "current",
-      order: index.order,
+      pages: index.pages,
       sections: index.sections,
       deletedSections,
       updatedAt: now,
@@ -323,7 +336,7 @@ export async function persistAll(
       if (siteIndex) {
         await database.siteIndex.put({
           key: "current",
-          order: siteIndex.order,
+          pages: siteIndex.pages,
           sections: siteIndex.sections,
           deletedSections: [],
           updatedAt: now,

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,108 @@
+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 };
+}
+
+/**
+ * Stable internal-link href stored inside rich text (TipTap link marks):
+ * `page://{pageId}` or `page://{pageId}#{anchorSectionId}`. Page ids survive
+ * slug renames; the SSR pass rewrites these to real routes for the viewer.
+ */
+export function internalHref(pageId: string, anchorSectionId?: string | null): string {
+  return `page://${pageId}${anchorSectionId ? `#${anchorSectionId}` : ""}`;
+}
+
+export function parseInternalHref(
+  href: string,
+): { pageId: string; anchorSectionId: string | null } | null {
+  const m = /^page:\/\/([^#]+)(?:#(.+))?$/.exec(href);
+  return m ? { pageId: m[1], anchorSectionId: m[2] ?? null } : null;
+}
+
+function resolveHtmlString(
+  html: string,
+  index: SiteIndex,
+  headingById: Record<string, string | undefined>,
+): string {
+  return html.replace(/href="page:\/\/([^"]*)"/g, (_match, ref: string) => {
+    const hash = ref.indexOf("#");
+    const pageId = hash === -1 ? ref : ref.slice(0, hash);
+    const anchorSectionId = hash === -1 ? null : ref.slice(hash + 1) || null;
+    const { href } = resolveLinkHref(
+      { kind: "internal", pageId, anchorSectionId, target: "_self" },
+      index,
+      headingById,
+    );
+    return `href="${href}"`;
+  });
+}
+
+function isInternalLinkValue(value: Record<string, unknown>): value is LinkValue & { kind: "internal" } {
+  return value.kind === "internal" && typeof value.pageId === "string";
+}
+
+/**
+ * Rewrite any internal link embedded in a section's content into a resolved
+ * plain href so the zero-JS viewer renders a normal <a>. Covers structured
+ * LinkValue fields (button) and `page://` hrefs inside rich text HTML (prose,
+ * list items — any string field).
+ */
+export function resolveInternalLinks(
+  section: Section,
+  index: SiteIndex,
+  headingById: Record<string, string | undefined>,
+): Section {
+  // Copy-on-write: untouched subtrees keep their original references so the
+  // per-request SSR pass allocates nothing for the common no-links case.
+  const walk = (value: unknown): unknown => {
+    if (typeof value === "string") {
+      return value.includes("page://") ? resolveHtmlString(value, index, headingById) : value;
+    }
+    if (Array.isArray(value)) {
+      let changed = false;
+      const next = value.map((v) => {
+        const w = walk(v);
+        if (w !== v) changed = true;
+        return w;
+      });
+      return changed ? next : value;
+    }
+    if (value !== null && typeof value === "object") {
+      const obj = value as Record<string, unknown>;
+      if (isInternalLinkValue(obj)) {
+        const resolved = resolveLinkHref(obj, index, headingById);
+        return { kind: "external", href: resolved.href, target: resolved.target };
+      }
+      let changed = false;
+      const result: Record<string, unknown> = {};
+      for (const [key, v] of Object.entries(obj)) {
+        const w = walk(v);
+        result[key] = w;
+        if (w !== v) changed = true;
+      }
+      return changed ? result : value;
+    }
+    return value;
+  };
+
+  const content = walk(section.content);
+  return content === section.content ? section : ({ ...section, content } as Section);
+}

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";