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

package/src/visual-bridge.tsx

@@ -1,30 +1,30 @@
-import { getCopyUntagged } from "./data";
-import { KIT_VERSION } from "./version";
-import { VisualBridge } from "./visual-bridge-client";
-import { copyTexts, type CopyText } from "./visual-match";
-import { visualMode } from "./visual-mode";
-
-/**
- * Put once inside <body> in app/layout.tsx, inside a Suspense boundary:
- *
- *   <Suspense fallback={null}><VisualEditing /></Suspense>
- *
- * Renders nothing unless this browser opened the page from Site Manager's Visual Editor. Then it outlines the values
- * Site Manager stores and passes clicks and edits to Site Manager, which saves them as drafts.
- *
- * Site Copy read through getCopy() carries exact tags in visual mode, so a site needs no marks of its own. Values a
- * site reads some other way are found by their words; `autoMark={false}` turns that off for a site that marks every
- * value itself with editMarks().
- */
-export async function VisualEditing({ autoMark = true }: { autoMark?: boolean } = {}) {
-  try {
-    const ok = await visualMode();
-    if (!ok) return null;
-    // Untagged words for matching values a site reads some other way; values read through getCopy() carry exact tags.
-    let copy: CopyText[] = [];
-    if (autoMark) copy = copyTexts(await getCopyUntagged().catch(() => ({})));
-    return <VisualBridge adminOrigin={ok.adminOrigin} kit={KIT_VERSION} copy={copy} />;
-  } catch {
-    return null;
-  }
-}
+import { getCopyUntagged } from "./data";
+import { KIT_VERSION } from "./version";
+import { VisualBridge } from "./visual-bridge-client";
+import { copyTexts, type CopyText } from "./visual-match";
+import { visualMode } from "./visual-mode";
+
+/**
+ * Put once inside <body> in app/layout.tsx, inside a Suspense boundary:
+ *
+ *   <Suspense fallback={null}><VisualEditing /></Suspense>
+ *
+ * Renders nothing unless this browser opened the page from Site Manager's Visual Editor. Then it outlines the values
+ * Site Manager stores and passes clicks and edits to Site Manager, which saves them as drafts.
+ *
+ * Site Copy read through getCopy() carries exact tags in visual mode, so a site needs no marks of its own. Values a
+ * site reads some other way are found by their words; `autoMark={false}` turns that off for a site that marks every
+ * value itself with editMarks().
+ */
+export async function VisualEditing({ autoMark = true }: { autoMark?: boolean } = {}) {
+  try {
+    const ok = await visualMode();
+    if (!ok) return null;
+    // Untagged words for matching values a site reads some other way; values read through getCopy() carry exact tags.
+    let copy: CopyText[] = [];
+    if (autoMark) copy = copyTexts(await getCopyUntagged().catch(() => ({})));
+    return <VisualBridge adminOrigin={ok.adminOrigin} kit={KIT_VERSION} copy={copy} />;
+  } catch {
+    return null;
+  }
+}

package/src/visual-clicks.ts

@@ -1,13 +1,13 @@
-/*
- * In Edit mode the page's links, buttons and forms don't act: a click selects the words, it never follows a link or
- * submits a form. Browse mode lets them act. Pure, so it's checked without a browser.
- */
-
-export const ACTIVATES =
-  'a[href], button, input[type="submit"], input[type="image"], input[type="reset"], input[type="button"], [role="link"], [role="button"], summary';
-
-/** True when a click, Enter or Space on this target would follow a link, press a button or submit a form. */
-export function blocksActivation(target: unknown): boolean {
-  const el = target as { closest?: (selector: string) => unknown } | null;
-  return !!el && typeof el.closest === "function" && !!el.closest(ACTIVATES);
-}
+/*
+ * In Edit mode the page's links, buttons and forms don't act: a click selects the words, it never follows a link or
+ * submits a form. Browse mode lets them act. Pure, so it's checked without a browser.
+ */
+
+export const ACTIVATES =
+  'a[href], button, input[type="submit"], input[type="image"], input[type="reset"], input[type="button"], [role="link"], [role="button"], summary';
+
+/** True when a click, Enter or Space on this target would follow a link, press a button or submit a form. */
+export function blocksActivation(target: unknown): boolean {
+  const el = target as { closest?: (selector: string) => unknown } | null;
+  return !!el && typeof el.closest === "function" && !!el.closest(ACTIVATES);
+}

package/src/visual-lists.ts

@@ -1,37 +1,37 @@
-/*
- * List controls in the Visual Editor: small Move Up, Move Down, Remove and Add buttons on an item of a list the site
- * lets Site Manager reorder or resize (copy list rules, kit 1.26.0). Site Manager says which lists are on the page and
- * which values each item holds; the page only finds where each item is and shows the buttons. Every change is made
- * and saved by Site Manager.
- */
-
-export type ListAction = "up" | "down" | "remove" | "add";
-export type PageListItem = { refs: string[] };
-export type PageList = { path: string; reorder: boolean; addRemove: boolean; shown: number; items: PageListItem[] };
-
-/** The buttons an item gets: by the list's rules, its place, and whether the list has room for another item. */
-export function actionsFor(list: PageList, index: number): ListAction[] {
-  const out: ListAction[] = [];
-  const count = Math.min(list.shown, list.items.length);
-  if (index >= count) return out;
-  if (list.reorder && index > 0) out.push("up");
-  if (list.reorder && index < count - 1) out.push("down");
-  if (list.addRemove && count > 1) out.push("remove");
-  if (list.addRemove && count < list.items.length) out.push("add");
-  return out;
-}
-
-type Containing = { contains(other: Containing | null): boolean; parentElement: Containing | null };
-
-/**
- * The element that is an item: the nearest one holding every place its values show and none of another item's.
- * Null when no such element exists (the values are spread among other items' elements).
- */
-export function itemElement<E extends Containing>(mine: E[], others: E[]): E | null {
-  if (!mine.length) return null;
-  for (let el: E | null = mine[0]!; el; el = el.parentElement as E | null) {
-    if (!mine.every((m) => el!.contains(m))) continue;
-    return others.some((o) => el!.contains(o)) ? null : el;
-  }
-  return null;
-}
+/*
+ * List controls in the Visual Editor: small Move Up, Move Down, Remove and Add buttons on an item of a list the site
+ * lets Site Manager reorder or resize (copy list rules, kit 1.26.0). Site Manager says which lists are on the page and
+ * which values each item holds; the page only finds where each item is and shows the buttons. Every change is made
+ * and saved by Site Manager.
+ */
+
+export type ListAction = "up" | "down" | "remove" | "add";
+export type PageListItem = { refs: string[] };
+export type PageList = { path: string; reorder: boolean; addRemove: boolean; shown: number; items: PageListItem[] };
+
+/** The buttons an item gets: by the list's rules, its place, and whether the list has room for another item. */
+export function actionsFor(list: PageList, index: number): ListAction[] {
+  const out: ListAction[] = [];
+  const count = Math.min(list.shown, list.items.length);
+  if (index >= count) return out;
+  if (list.reorder && index > 0) out.push("up");
+  if (list.reorder && index < count - 1) out.push("down");
+  if (list.addRemove && count > 1) out.push("remove");
+  if (list.addRemove && count < list.items.length) out.push("add");
+  return out;
+}
+
+type Containing = { contains(other: Containing | null): boolean; parentElement: Containing | null };
+
+/**
+ * The element that is an item: the nearest one holding every place its values show and none of another item's.
+ * Null when no such element exists (the values are spread among other items' elements).
+ */
+export function itemElement<E extends Containing>(mine: E[], others: E[]): E | null {
+  if (!mine.length) return null;
+  for (let el: E | null = mine[0]!; el; el = el.parentElement as E | null) {
+    if (!mine.every((m) => el!.contains(m))) continue;
+    return others.some((o) => el!.contains(o)) ? null : el;
+  }
+  return null;
+}

package/src/visual-match.ts

@@ -1,77 +1,77 @@
-/*
- * Automatic marks for the Visual Editor. In visual mode the bridge gets the site's Site Copy text (drafts included,
- * so it matches what the page shows) and marks the elements and text nodes on the page whose words are exactly one
- * value. Sites then need no marks of their own; marks a site does add with editMarks() always win.
- *
- * Pure functions here, so they can be tested without a browser; the bridge walks the page with them.
- */
-
-import type { CopyValue } from "./types";
-
-/** One Site Copy value the bridge can look for: its key, its words as plain text, and the page it belongs to. */
-export type CopyText = { k: string; t: string; p: string | null };
-
-// Shorter values ("Yes", "OK") are too likely to match words that aren't that value.
-const MIN_CHARS = 3;
-
-const ENTITIES: Record<string, string> = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: " " };
-
-function decode(s: string): string {
-  return s.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (whole, e: string) => {
-    if (e[0] === "#") {
-      const n = e[1] === "x" || e[1] === "X" ? parseInt(e.slice(2), 16) : parseInt(e.slice(1), 10);
-      return Number.isFinite(n) && n > 0 && n <= 0x10ffff ? String.fromCodePoint(n) : whole;
-    }
-    return ENTITIES[e.toLowerCase()] ?? whole;
-  });
-}
-
-/** Rich text's words as the page shows them: tags dropped, entities read. */
-export function htmlText(html: string): string {
-  return decode(html.replace(/<(script|style)[\s\S]*?<\/\1>/gi, "").replace(/<[^>]*>/g, " "));
-}
-
-/**
- * The form words are compared in. All whitespace is dropped, since the page and the stored value break lines and
- * space blocks differently (rich text's paragraphs have no space between them in the page's text).
- */
-export const comparable = (s: string): string => s.replace(/[\s ​]+/g, "");
-
-/** The text and rich values of getCopy(), ready to send to the bridge. Photos, links and record picks aren't words on the page. */
-export function copyTexts(all: Record<string, CopyValue>): CopyText[] {
-  const out: CopyText[] = [];
-  for (const [k, v] of Object.entries(all)) {
-    const t = v.kind === "text" ? v.text : v.kind === "rich" ? (v.html ? htmlText(v.html) : null) : null;
-    if (t && comparable(t).length >= MIN_CHARS) out.push({ k, t, p: v.pagePath ?? null });
-  }
-  return out;
-}
-
-const trimPath = (p: string) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
-
-/**
- * Words to ref, for one page. Only values that belong to this page or to no page (header, footer, site-wide wording)
- * count: another page's value with the same words (a nav label that matches a page's eyebrow) is a different value.
- * Where the same words are more than one value, this page's wins over a site-wide one; still more than one at that
- * level, the words are left unmarked, since there is no telling which one this is.
- */
-export function matchIndex(values: CopyText[], path: string): Map<string, string> {
-  const here = trimPath(path);
-  const best = new Map<string, { tier: number; ref: string | null }>();
-  for (const v of values) {
-    const words = comparable(v.t);
-    if (words.length < MIN_CHARS) continue;
-    const tier = v.p === null ? 1 : trimPath(v.p) === here ? 0 : -1;
-    if (tier < 0) continue;
-    const ref = `copy/${v.k}`;
-    const seen = best.get(words);
-    if (!seen || tier < seen.tier) best.set(words, { tier, ref });
-    else if (tier === seen.tier && seen.ref !== ref) seen.ref = null;
-  }
-  const out = new Map<string, string>();
-  for (const [words, { ref }] of best) if (ref) out.set(words, ref);
-  return out;
-}
-
-/** The longest words in the index, so the walk can skip comparing anything longer. */
-export const longest = (index: Map<string, string>): number => Math.max(0, ...Array.from(index.keys(), (k) => k.length));
+/*
+ * Automatic marks for the Visual Editor. In visual mode the bridge gets the site's Site Copy text (drafts included,
+ * so it matches what the page shows) and marks the elements and text nodes on the page whose words are exactly one
+ * value. Sites then need no marks of their own; marks a site does add with editMarks() always win.
+ *
+ * Pure functions here, so they can be tested without a browser; the bridge walks the page with them.
+ */
+
+import type { CopyValue } from "./types";
+
+/** One Site Copy value the bridge can look for: its key, its words as plain text, and the page it belongs to. */
+export type CopyText = { k: string; t: string; p: string | null };
+
+// Shorter values ("Yes", "OK") are too likely to match words that aren't that value.
+const MIN_CHARS = 3;
+
+const ENTITIES: Record<string, string> = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: " " };
+
+function decode(s: string): string {
+  return s.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (whole, e: string) => {
+    if (e[0] === "#") {
+      const n = e[1] === "x" || e[1] === "X" ? parseInt(e.slice(2), 16) : parseInt(e.slice(1), 10);
+      return Number.isFinite(n) && n > 0 && n <= 0x10ffff ? String.fromCodePoint(n) : whole;
+    }
+    return ENTITIES[e.toLowerCase()] ?? whole;
+  });
+}
+
+/** Rich text's words as the page shows them: tags dropped, entities read. */
+export function htmlText(html: string): string {
+  return decode(html.replace(/<(script|style)[\s\S]*?<\/\1>/gi, "").replace(/<[^>]*>/g, " "));
+}
+
+/**
+ * The form words are compared in. All whitespace is dropped, since the page and the stored value break lines and
+ * space blocks differently (rich text's paragraphs have no space between them in the page's text).
+ */
+export const comparable = (s: string): string => s.replace(/[\s ​]+/g, "");
+
+/** The text and rich values of getCopy(), ready to send to the bridge. Photos, links and record picks aren't words on the page. */
+export function copyTexts(all: Record<string, CopyValue>): CopyText[] {
+  const out: CopyText[] = [];
+  for (const [k, v] of Object.entries(all)) {
+    const t = v.kind === "text" ? v.text : v.kind === "rich" ? (v.html ? htmlText(v.html) : null) : null;
+    if (t && comparable(t).length >= MIN_CHARS) out.push({ k, t, p: v.pagePath ?? null });
+  }
+  return out;
+}
+
+const trimPath = (p: string) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
+
+/**
+ * Words to ref, for one page. Only values that belong to this page or to no page (header, footer, site-wide wording)
+ * count: another page's value with the same words (a nav label that matches a page's eyebrow) is a different value.
+ * Where the same words are more than one value, this page's wins over a site-wide one; still more than one at that
+ * level, the words are left unmarked, since there is no telling which one this is.
+ */
+export function matchIndex(values: CopyText[], path: string): Map<string, string> {
+  const here = trimPath(path);
+  const best = new Map<string, { tier: number; ref: string | null }>();
+  for (const v of values) {
+    const words = comparable(v.t);
+    if (words.length < MIN_CHARS) continue;
+    const tier = v.p === null ? 1 : trimPath(v.p) === here ? 0 : -1;
+    if (tier < 0) continue;
+    const ref = `copy/${v.k}`;
+    const seen = best.get(words);
+    if (!seen || tier < seen.tier) best.set(words, { tier, ref });
+    else if (tier === seen.tier && seen.ref !== ref) seen.ref = null;
+  }
+  const out = new Map<string, string>();
+  for (const [words, { ref }] of best) if (ref) out.set(words, ref);
+  return out;
+}
+
+/** The longest words in the index, so the walk can skip comparing anything longer. */
+export const longest = (index: Map<string, string>): number => Math.max(0, ...Array.from(index.keys(), (k) => k.length));