@stack-mode/site-manager-kit 1.44.0 → 1.44.1

package/src/visual-messages.ts

@@ -1,160 +1,160 @@
-/*
- * Messages between a page in visual mode and Site Manager's Visual Editor. Every message is { bp: 1, type, ...fields };
- * anything else is dropped. Site Manager checks the same shapes in src/lib/visual/messages.ts; change both together.
- */
-
-export const LIMITS = { ref: 200, path: 2000, text: 10000, html: 50000, refs: 500, label: 120 } as const;
-
-import type { ListAction, PageList } from "./visual-lists";
-
-export type EditMode = "inline" | "panel" | "link";
-// label: what the value is, in the words people see in Site Manager. Older Site Managers leave it out.
-export type Editable = { ref: string; mode: EditMode; maxLength?: number; label?: string };
-export type Rect = { x: number; y: number; w: number; h: number };
-
-export type KitMessage =
-  | { bp: 1; type: "ready"; kit: string; path: string; refs: string[] }
-  | { bp: 1; type: "navigated"; path: string; refs: string[] }
-  // plain: the element holds only text, so it can be edited in place.
-  | { bp: 1; type: "select"; ref: string; rect: Rect; plain: boolean }
-  // html: a formatted value edited in place; Site Manager sanitizes it before saving.
-  | { bp: 1; type: "commit"; ref: string; text: string; html?: string; accents?: [number, number][]; strong?: [number, number][]; em?: [number, number][] }
-  | { bp: 1; type: "cancel"; ref: string }
-  // The words of an edit in place so far, so Site Manager can check them while they're typed.
-  | { bp: 1; type: "typing"; ref: string; text: string }
-  // Ctrl+Z or Ctrl+Shift+Z (Ctrl+Y) pressed in the page while nothing is being typed.
-  | { bp: 1; type: "key"; key: "undo" | "redo" }
-  // The person asked to edit this value in Site Manager's side panel instead (the expand button on the editing bar).
-  | { bp: 1; type: "expand"; ref: string }
-  // A list button on an item was pressed. Site Manager makes and saves the change.
-  | { bp: 1; type: "listAction"; path: string; index: number; action: ListAction };
-
-export type AdminMessage =
-  | { bp: 1; type: "hello"; editable: Editable[] }
-  | { bp: 1; type: "mode"; editing: boolean }
-  | { bp: 1; type: "inline"; ref: string; maxLength: number }
-  // Edit a formatted value (rich text) in place, with a small Bold, Italic and Link bar.
-  | { bp: 1; type: "inlineRich"; ref: string }
-  // Edit a heading in place with an Accent button for its gold words: its words and ranges as stored.
-  // strong and marks (1.37.0): the words marked Bold, and which of Accent and Bold the value offers (both when left out).
-  // em (1.40.0): the words marked Italic.
-  | { bp: 1; type: "inlineHeading"; ref: string; maxLength: number; text: string; accents: [number, number][]; strong?: [number, number][]; em?: [number, number][]; marks?: ("accent" | "strong" | "em")[] }
-  | { bp: 1; type: "refresh" }
-  | { bp: 1; type: "navigate"; path: string }
-  | { bp: 1; type: "focus"; ref: string }
-  // The words typed so far in the side panel, shown on the page unsaved; null puts the original words back.
-  | { bp: 1; type: "preview"; ref: string; text: string | null }
-  // A value was saved as a draft with these words, which the page already shows: keep them, no refresh needed.
-  | { bp: 1; type: "saved"; ref: string; text: string }
-  // The values on this page with unsaved drafts, marked with a small dot.
-  | { bp: 1; type: "drafts"; refs: string[] }
-  // The lists on this page that can be reordered or resized, and the values each item holds.
-  | { bp: 1; type: "lists"; lists: PageList[] }
-  // A photo chosen in the side panel, shown in place of the value's photo, unsaved; null puts the photo back.
-  | { bp: 1; type: "previewImage"; ref: string; url: string | null };
-
-const str = (v: unknown, max: number): v is string => typeof v === "string" && v.length > 0 && v.length <= max;
-const count = (v: unknown): v is number => typeof v === "number" && Number.isInteger(v) && v > 0 && v <= LIMITS.text;
-const MODES: readonly unknown[] = ["inline", "panel", "link"];
-
-function isEditable(v: unknown): v is Editable {
-  if (!v || typeof v !== "object") return false;
-  const e = v as Record<string, unknown>;
-  return (
-    str(e.ref, LIMITS.ref) &&
-    MODES.includes(e.mode) &&
-    (e.maxLength === undefined || count(e.maxLength)) &&
-    (e.label === undefined || str(e.label, LIMITS.label))
-  );
-}
-
-function isPageList(v: unknown): v is PageList {
-  if (!v || typeof v !== "object") return false;
-  const l = v as Record<string, unknown>;
-  return (
-    str(l.path, LIMITS.ref) &&
-    typeof l.reorder === "boolean" &&
-    typeof l.addRemove === "boolean" &&
-    typeof l.shown === "number" &&
-    Number.isInteger(l.shown) &&
-    l.shown >= 0 &&
-    Array.isArray(l.items) &&
-    l.items.length <= 50 &&
-    l.items.every((i) => {
-      const refs = (i as { refs?: unknown } | null)?.refs;
-      return Array.isArray(refs) && refs.length <= 50 && refs.every((r) => str(r, LIMITS.ref));
-    })
-  );
-}
-
-const ranges = (v: unknown) =>
-  Array.isArray(v) && v.length <= 50 && v.every((a) => Array.isArray(a) && a.length === 2 && a.every((n) => Number.isInteger(n) && n >= 0 && n <= LIMITS.text));
-
-/** True only for a well formed message from Site Manager. */
-export function isAdminMessage(data: unknown): data is AdminMessage {
-  if (!data || typeof data !== "object") return false;
-  const m = data as Record<string, unknown>;
-  if (m.bp !== 1) return false;
-  switch (m.type) {
-    case "hello":
-      return Array.isArray(m.editable) && m.editable.length <= LIMITS.refs && m.editable.every(isEditable);
-    case "mode":
-      return typeof m.editing === "boolean";
-    case "inline":
-      return str(m.ref, LIMITS.ref) && count(m.maxLength);
-    case "inlineRich":
-      return str(m.ref, LIMITS.ref);
-    case "inlineHeading":
-      return (
-        str(m.ref, LIMITS.ref) &&
-        count(m.maxLength) &&
-        typeof m.text === "string" &&
-        m.text.length <= LIMITS.text &&
-        Array.isArray(m.accents) &&
-        m.accents.length <= 50 &&
-        ranges(m.accents) &&
-        (m.strong === undefined || ranges(m.strong)) &&
-        (m.em === undefined || ranges(m.em)) &&
-        (m.marks === undefined || (Array.isArray(m.marks) && m.marks.length <= 3 && m.marks.every((k) => k === "accent" || k === "strong" || k === "em")))
-      );
-    case "refresh":
-      return true;
-    case "navigate":
-      return str(m.path, LIMITS.path) && m.path.startsWith("/") && !m.path.startsWith("//") && !m.path.includes("\\");
-    case "focus":
-      return str(m.ref, LIMITS.ref);
-    case "saved":
-      return str(m.ref, LIMITS.ref) && typeof m.text === "string" && m.text.length <= LIMITS.text;
-    case "drafts":
-      return Array.isArray(m.refs) && m.refs.length <= LIMITS.refs && m.refs.every((r) => str(r, LIMITS.ref));
-    case "previewImage":
-      // Only an address a page can load: https, or a path on the site.
-      return str(m.ref, LIMITS.ref) && (m.url === null || (str(m.url, LIMITS.path) && /^(https:\/\/|\/(?!\/))/.test(m.url)));
-    case "lists":
-      return Array.isArray(m.lists) && m.lists.length <= 50 && m.lists.every(isPageList);
-    case "preview":
-      // An empty string is allowed: someone cleared the box.
-      return str(m.ref, LIMITS.ref) && (m.text === null || (typeof m.text === "string" && m.text.length <= LIMITS.text));
-    default:
-      return false;
-  }
-}
-
-/**
- * The one check every message from Site Manager goes through: from the window that showed the page, at the signed
- * admin origin, well formed. Anything else (another frame, another origin, a forged shape) is null.
- */
-export function adminMessageFrom(e: { source: unknown; origin: string; data: unknown }, from: unknown, adminOrigin: string): AdminMessage | null {
-  if (!from || e.source !== from || e.origin !== adminOrigin) return null;
-  return isAdminMessage(e.data) ? e.data : null;
-}
-
-/** The marked refs on the page: unique, in page order, at most 500. */
-export function collectRefs(values: Iterable<string | null>): string[] {
-  const out = new Set<string>();
-  for (const v of values) {
-    if (out.size >= LIMITS.refs) break;
-    if (v && v.length <= LIMITS.ref) out.add(v);
-  }
-  return [...out];
-}
+/*
+ * Messages between a page in visual mode and Site Manager's Visual Editor. Every message is { bp: 1, type, ...fields };
+ * anything else is dropped. Site Manager checks the same shapes in src/lib/visual/messages.ts; change both together.
+ */
+
+export const LIMITS = { ref: 200, path: 2000, text: 10000, html: 50000, refs: 500, label: 120 } as const;
+
+import type { ListAction, PageList } from "./visual-lists";
+
+export type EditMode = "inline" | "panel" | "link";
+// label: what the value is, in the words people see in Site Manager. Older Site Managers leave it out.
+export type Editable = { ref: string; mode: EditMode; maxLength?: number; label?: string };
+export type Rect = { x: number; y: number; w: number; h: number };
+
+export type KitMessage =
+  | { bp: 1; type: "ready"; kit: string; path: string; refs: string[] }
+  | { bp: 1; type: "navigated"; path: string; refs: string[] }
+  // plain: the element holds only text, so it can be edited in place.
+  | { bp: 1; type: "select"; ref: string; rect: Rect; plain: boolean }
+  // html: a formatted value edited in place; Site Manager sanitizes it before saving.
+  | { bp: 1; type: "commit"; ref: string; text: string; html?: string; accents?: [number, number][]; strong?: [number, number][]; em?: [number, number][] }
+  | { bp: 1; type: "cancel"; ref: string }
+  // The words of an edit in place so far, so Site Manager can check them while they're typed.
+  | { bp: 1; type: "typing"; ref: string; text: string }
+  // Ctrl+Z or Ctrl+Shift+Z (Ctrl+Y) pressed in the page while nothing is being typed.
+  | { bp: 1; type: "key"; key: "undo" | "redo" }
+  // The person asked to edit this value in Site Manager's side panel instead (the expand button on the editing bar).
+  | { bp: 1; type: "expand"; ref: string }
+  // A list button on an item was pressed. Site Manager makes and saves the change.
+  | { bp: 1; type: "listAction"; path: string; index: number; action: ListAction };
+
+export type AdminMessage =
+  | { bp: 1; type: "hello"; editable: Editable[] }
+  | { bp: 1; type: "mode"; editing: boolean }
+  | { bp: 1; type: "inline"; ref: string; maxLength: number }
+  // Edit a formatted value (rich text) in place, with a small Bold, Italic and Link bar.
+  | { bp: 1; type: "inlineRich"; ref: string }
+  // Edit a heading in place with an Accent button for its gold words: its words and ranges as stored.
+  // strong and marks (1.37.0): the words marked Bold, and which of Accent and Bold the value offers (both when left out).
+  // em (1.40.0): the words marked Italic.
+  | { bp: 1; type: "inlineHeading"; ref: string; maxLength: number; text: string; accents: [number, number][]; strong?: [number, number][]; em?: [number, number][]; marks?: ("accent" | "strong" | "em")[] }
+  | { bp: 1; type: "refresh" }
+  | { bp: 1; type: "navigate"; path: string }
+  | { bp: 1; type: "focus"; ref: string }
+  // The words typed so far in the side panel, shown on the page unsaved; null puts the original words back.
+  | { bp: 1; type: "preview"; ref: string; text: string | null }
+  // A value was saved as a draft with these words, which the page already shows: keep them, no refresh needed.
+  | { bp: 1; type: "saved"; ref: string; text: string }
+  // The values on this page with unsaved drafts, marked with a small dot.
+  | { bp: 1; type: "drafts"; refs: string[] }
+  // The lists on this page that can be reordered or resized, and the values each item holds.
+  | { bp: 1; type: "lists"; lists: PageList[] }
+  // A photo chosen in the side panel, shown in place of the value's photo, unsaved; null puts the photo back.
+  | { bp: 1; type: "previewImage"; ref: string; url: string | null };
+
+const str = (v: unknown, max: number): v is string => typeof v === "string" && v.length > 0 && v.length <= max;
+const count = (v: unknown): v is number => typeof v === "number" && Number.isInteger(v) && v > 0 && v <= LIMITS.text;
+const MODES: readonly unknown[] = ["inline", "panel", "link"];
+
+function isEditable(v: unknown): v is Editable {
+  if (!v || typeof v !== "object") return false;
+  const e = v as Record<string, unknown>;
+  return (
+    str(e.ref, LIMITS.ref) &&
+    MODES.includes(e.mode) &&
+    (e.maxLength === undefined || count(e.maxLength)) &&
+    (e.label === undefined || str(e.label, LIMITS.label))
+  );
+}
+
+function isPageList(v: unknown): v is PageList {
+  if (!v || typeof v !== "object") return false;
+  const l = v as Record<string, unknown>;
+  return (
+    str(l.path, LIMITS.ref) &&
+    typeof l.reorder === "boolean" &&
+    typeof l.addRemove === "boolean" &&
+    typeof l.shown === "number" &&
+    Number.isInteger(l.shown) &&
+    l.shown >= 0 &&
+    Array.isArray(l.items) &&
+    l.items.length <= 50 &&
+    l.items.every((i) => {
+      const refs = (i as { refs?: unknown } | null)?.refs;
+      return Array.isArray(refs) && refs.length <= 50 && refs.every((r) => str(r, LIMITS.ref));
+    })
+  );
+}
+
+const ranges = (v: unknown) =>
+  Array.isArray(v) && v.length <= 50 && v.every((a) => Array.isArray(a) && a.length === 2 && a.every((n) => Number.isInteger(n) && n >= 0 && n <= LIMITS.text));
+
+/** True only for a well formed message from Site Manager. */
+export function isAdminMessage(data: unknown): data is AdminMessage {
+  if (!data || typeof data !== "object") return false;
+  const m = data as Record<string, unknown>;
+  if (m.bp !== 1) return false;
+  switch (m.type) {
+    case "hello":
+      return Array.isArray(m.editable) && m.editable.length <= LIMITS.refs && m.editable.every(isEditable);
+    case "mode":
+      return typeof m.editing === "boolean";
+    case "inline":
+      return str(m.ref, LIMITS.ref) && count(m.maxLength);
+    case "inlineRich":
+      return str(m.ref, LIMITS.ref);
+    case "inlineHeading":
+      return (
+        str(m.ref, LIMITS.ref) &&
+        count(m.maxLength) &&
+        typeof m.text === "string" &&
+        m.text.length <= LIMITS.text &&
+        Array.isArray(m.accents) &&
+        m.accents.length <= 50 &&
+        ranges(m.accents) &&
+        (m.strong === undefined || ranges(m.strong)) &&
+        (m.em === undefined || ranges(m.em)) &&
+        (m.marks === undefined || (Array.isArray(m.marks) && m.marks.length <= 3 && m.marks.every((k) => k === "accent" || k === "strong" || k === "em")))
+      );
+    case "refresh":
+      return true;
+    case "navigate":
+      return str(m.path, LIMITS.path) && m.path.startsWith("/") && !m.path.startsWith("//") && !m.path.includes("\\");
+    case "focus":
+      return str(m.ref, LIMITS.ref);
+    case "saved":
+      return str(m.ref, LIMITS.ref) && typeof m.text === "string" && m.text.length <= LIMITS.text;
+    case "drafts":
+      return Array.isArray(m.refs) && m.refs.length <= LIMITS.refs && m.refs.every((r) => str(r, LIMITS.ref));
+    case "previewImage":
+      // Only an address a page can load: https, or a path on the site.
+      return str(m.ref, LIMITS.ref) && (m.url === null || (str(m.url, LIMITS.path) && /^(https:\/\/|\/(?!\/))/.test(m.url)));
+    case "lists":
+      return Array.isArray(m.lists) && m.lists.length <= 50 && m.lists.every(isPageList);
+    case "preview":
+      // An empty string is allowed: someone cleared the box.
+      return str(m.ref, LIMITS.ref) && (m.text === null || (typeof m.text === "string" && m.text.length <= LIMITS.text));
+    default:
+      return false;
+  }
+}
+
+/**
+ * The one check every message from Site Manager goes through: from the window that showed the page, at the signed
+ * admin origin, well formed. Anything else (another frame, another origin, a forged shape) is null.
+ */
+export function adminMessageFrom(e: { source: unknown; origin: string; data: unknown }, from: unknown, adminOrigin: string): AdminMessage | null {
+  if (!from || e.source !== from || e.origin !== adminOrigin) return null;
+  return isAdminMessage(e.data) ? e.data : null;
+}
+
+/** The marked refs on the page: unique, in page order, at most 500. */
+export function collectRefs(values: Iterable<string | null>): string[] {
+  const out = new Set<string>();
+  for (const v of values) {
+    if (out.size >= LIMITS.refs) break;
+    if (v && v.length <= LIMITS.ref) out.add(v);
+  }
+  return [...out];
+}

package/src/visual-mode.ts

@@ -1,18 +1,18 @@
-import { cookies, draftMode } from "next/headers";
-import { verifyVisualCookie, VISUAL_COOKIE } from "./preview";
-
-/**
- * The signed admin origin when this request comes from Site Manager's Visual Editor, else null. Cookies are read only
- * once draft mode is on, so a visitor's page never becomes dynamic because of this check.
- */
-export async function visualMode(): Promise<{ adminOrigin: string } | null> {
-  try {
-    if (!(await draftMode()).isEnabled) return null;
-    const id = process.env.BLUEPRINT_SITE_ID?.trim();
-    if (!id) return null;
-    const ok = verifyVisualCookie(process.env.BLUEPRINT_REVALIDATE_SECRET, (await cookies()).get(VISUAL_COOKIE)?.value, id);
-    return ok ? { adminOrigin: ok.adminOrigin } : null;
-  } catch {
-    return null;
-  }
-}
+import { cookies, draftMode } from "next/headers";
+import { verifyVisualCookie, VISUAL_COOKIE } from "./preview";
+
+/**
+ * The signed admin origin when this request comes from Site Manager's Visual Editor, else null. Cookies are read only
+ * once draft mode is on, so a visitor's page never becomes dynamic because of this check.
+ */
+export async function visualMode(): Promise<{ adminOrigin: string } | null> {
+  try {
+    if (!(await draftMode()).isEnabled) return null;
+    const id = process.env.BLUEPRINT_SITE_ID?.trim();
+    if (!id) return null;
+    const ok = verifyVisualCookie(process.env.BLUEPRINT_REVALIDATE_SECRET, (await cookies()).get(VISUAL_COOKIE)?.value, id);
+    return ok ? { adminOrigin: ok.adminOrigin } : null;
+  } catch {
+    return null;
+  }
+}

package/src/visual-preview.ts

@@ -1,69 +1,69 @@
-/*
- * Live preview in the Visual Editor: while someone types a value in Site Manager's side panel, the page shows the
- * words in place, unsaved, so they see line breaks and overflow as they type. Only text nodes are changed, through
- * nodeValue, so the words are never read as HTML and the elements around them (an accent span, a link) keep their
- * styling. React keeps owning the same nodes, so a refresh after Save Draft updates them as usual.
- */
-
-/** The part of a DOM Text node this needs, so the logic can be checked without a browser. */
-export type TextLike = { nodeValue: string | null };
-
-type Slot = { node: TextLike; before: string };
-
-const lead = (s: string) => /^\s*/.exec(s)![0];
-const trail = (s: string) => /\s*$/.exec(s)![0];
-
-export class LivePreview {
-  // Per ref, each place the value shows on the page, as the text nodes it was made of and what they said.
-  private shown = new Map<string, Slot[][]>();
-
-  /** True while any value shows unsaved words. Marking the page again waits: the words no longer match the value. */
-  get active(): boolean {
-    return this.shown.size > 0;
-  }
-
-  /**
-   * Shows text where ref is. find runs only the first time, so every keystroke changes the same nodes and the
-   * original words are kept from before the first one. False when the value has no plain text place on the page.
-   */
-  show(ref: string, text: string, find: () => TextLike[][]): boolean {
-    let places = this.shown.get(ref);
-    if (!places) {
-      places = find()
-        .map((nodes) => nodes.map((node) => ({ node, before: node.nodeValue ?? "" })))
-        .filter((slots) => slots.length > 0);
-      if (!places.length) return false;
-      this.shown.set(ref, places);
-    }
-    for (const slots of places) {
-      // The words go in the first node that had any, keeping the spaces that separated it from what's beside it.
-      let first = slots.findIndex((s) => s.before.trim() !== "");
-      if (first < 0) first = 0;
-      slots.forEach((s, i) => {
-        if (i === first) s.node.nodeValue = lead(s.before) + text.trim() + trail(s.before);
-        else if (s.before.trim() !== "") s.node.nodeValue = "";
-      });
-    }
-    return true;
-  }
-
-  /** Puts the original words back (Cancel, or the panel closed without saving). */
-  restore(ref: string): void {
-    for (const slots of this.shown.get(ref) ?? []) for (const s of slots) s.node.nodeValue = s.before;
-    this.shown.delete(ref);
-  }
-
-  restoreAll(): void {
-    for (const ref of [...this.shown.keys()]) this.restore(ref);
-  }
-
-  /** Lets go without restoring: the page is being refreshed with the saved words, or has moved on. */
-  forget(): void {
-    this.shown.clear();
-  }
-
-  /** Lets go of one value without restoring: its words were saved and stay on the page. */
-  keep(ref: string): void {
-    this.shown.delete(ref);
-  }
-}
+/*
+ * Live preview in the Visual Editor: while someone types a value in Site Manager's side panel, the page shows the
+ * words in place, unsaved, so they see line breaks and overflow as they type. Only text nodes are changed, through
+ * nodeValue, so the words are never read as HTML and the elements around them (an accent span, a link) keep their
+ * styling. React keeps owning the same nodes, so a refresh after Save Draft updates them as usual.
+ */
+
+/** The part of a DOM Text node this needs, so the logic can be checked without a browser. */
+export type TextLike = { nodeValue: string | null };
+
+type Slot = { node: TextLike; before: string };
+
+const lead = (s: string) => /^\s*/.exec(s)![0];
+const trail = (s: string) => /\s*$/.exec(s)![0];
+
+export class LivePreview {
+  // Per ref, each place the value shows on the page, as the text nodes it was made of and what they said.
+  private shown = new Map<string, Slot[][]>();
+
+  /** True while any value shows unsaved words. Marking the page again waits: the words no longer match the value. */
+  get active(): boolean {
+    return this.shown.size > 0;
+  }
+
+  /**
+   * Shows text where ref is. find runs only the first time, so every keystroke changes the same nodes and the
+   * original words are kept from before the first one. False when the value has no plain text place on the page.
+   */
+  show(ref: string, text: string, find: () => TextLike[][]): boolean {
+    let places = this.shown.get(ref);
+    if (!places) {
+      places = find()
+        .map((nodes) => nodes.map((node) => ({ node, before: node.nodeValue ?? "" })))
+        .filter((slots) => slots.length > 0);
+      if (!places.length) return false;
+      this.shown.set(ref, places);
+    }
+    for (const slots of places) {
+      // The words go in the first node that had any, keeping the spaces that separated it from what's beside it.
+      let first = slots.findIndex((s) => s.before.trim() !== "");
+      if (first < 0) first = 0;
+      slots.forEach((s, i) => {
+        if (i === first) s.node.nodeValue = lead(s.before) + text.trim() + trail(s.before);
+        else if (s.before.trim() !== "") s.node.nodeValue = "";
+      });
+    }
+    return true;
+  }
+
+  /** Puts the original words back (Cancel, or the panel closed without saving). */
+  restore(ref: string): void {
+    for (const slots of this.shown.get(ref) ?? []) for (const s of slots) s.node.nodeValue = s.before;
+    this.shown.delete(ref);
+  }
+
+  restoreAll(): void {
+    for (const ref of [...this.shown.keys()]) this.restore(ref);
+  }
+
+  /** Lets go without restoring: the page is being refreshed with the saved words, or has moved on. */
+  forget(): void {
+    this.shown.clear();
+  }
+
+  /** Lets go of one value without restoring: its words were saved and stay on the page. */
+  keep(ref: string): void {
+    this.shown.delete(ref);
+  }
+}