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

package/src/visual-tags.ts

@@ -1,90 +1,90 @@
-/*
- * Exact tags for the Visual Editor. In visual mode only, each Site Copy text the site reads carries an invisible tag
- * naming its value, so the page can say exactly which words are which value instead of matching words. The tag is
- * zero width characters: a start marker, the ref's UTF-8 bytes as base-4 digits, an end marker. The bridge removes
- * every tag from the page before anyone sees or copies it.
- */
-
-const DIGITS = ["​", "‌", "‍", "⁠"] as const;
-// Marker pairs no ordinary text contains: a word joiner and a zero width no-break space around the digits.
-const START = "⁠⁠";
-const END = "⁠";
-const MAX_REF = 200;
-
-const TAG = new RegExp(`${START}([${DIGITS.join("")}]+)${END}`, "g");
-const ANY_MARK = /[​‌‍⁠]/;
-
-export function encodeTag(ref: string): string {
-  const bytes = new TextEncoder().encode(ref);
-  let out = START;
-  for (const b of bytes) out += DIGITS[(b >> 6) & 3]! + DIGITS[(b >> 4) & 3]! + DIGITS[(b >> 2) & 3]! + DIGITS[b & 3]!;
-  return out + END;
-}
-
-function decode(digits: string): string | null {
-  if (digits.length % 4 !== 0) return null;
-  const bytes = new Uint8Array(digits.length / 4);
-  for (let i = 0; i < bytes.length; i++) {
-    let b = 0;
-    for (let j = 0; j < 4; j++) b = (b << 2) | DIGITS.indexOf(digits[i * 4 + j] as (typeof DIGITS)[number]);
-    bytes[i] = b;
-  }
-  try {
-    const ref = new TextDecoder("utf-8", { fatal: true }).decode(bytes);
-    return ref.length > 0 && ref.length <= MAX_REF ? ref : null;
-  } catch {
-    return null;
-  }
-}
-
-/** A tag found in a string: the ref it names and where it ends in the clean text. */
-export type FoundTag = { ref: string; at: number };
-
-/** The text with its tags removed, and the tags in order. A broken tag is removed but not reported. */
-export function readTags(text: string): { clean: string; tags: FoundTag[] } {
-  if (!ANY_MARK.test(text)) return { clean: text, tags: [] };
-  const tags: FoundTag[] = [];
-  let clean = "";
-  let last = 0;
-  for (const m of text.matchAll(TAG)) {
-    clean += text.slice(last, m.index);
-    const ref = decode(m[1]!);
-    if (ref) tags.push({ ref, at: clean.length });
-    last = m.index! + m[0].length;
-  }
-  clean += text.slice(last);
-  return { clean, tags };
-}
-
-/** The text alone, for attributes and anywhere else a tag must never show. */
-export function stripTags(text: string): string {
-  return ANY_MARK.test(text) ? text.replace(TAG, "") : text;
-}
-
-/** True when the text may hold a tag; a cheap test before the full read. */
-export const mayHaveTag = (text: string) => text.includes(START);
-
-/** Puts the tag inside rich HTML's last text, before its closing tags, so it lands in the element the words are in. */
-export function tagHtml(html: string, ref: string): string {
-  const m = /(?:<\/[a-zA-Z][a-zA-Z0-9]*>\s*)+$/.exec(html);
-  const at = m ? m.index : html.length;
-  return html.slice(0, at) + encodeTag(ref) + html.slice(at);
-}
-
-type CopyLike = { kind: string; text?: string | null; html?: string | null; image?: { alt: string } | null };
-
-/**
- * Site Copy with each non-empty text and rich value tagged as `copy/<key>`, and each photo tagged in its alt text (the
- * one thing about a photo the page always renders). Links and picks are untouched.
- */
-export function tagCopy<T extends CopyLike>(all: Record<string, T>): Record<string, T> {
-  const out: Record<string, T> = {};
-  for (const [key, v] of Object.entries(all)) {
-    const ref = `copy/${key}`;
-    if (v.kind === "text" && v.text) out[key] = { ...v, text: v.text + encodeTag(ref) } as T;
-    else if (v.kind === "rich" && v.html) out[key] = { ...v, html: tagHtml(v.html, ref) } as T;
-    else if (v.kind === "image" && v.image) out[key] = { ...v, image: { ...v.image, alt: (v.image.alt ?? "") + encodeTag(ref) } } as T;
-    else out[key] = v;
-  }
-  return out;
-}
+/*
+ * Exact tags for the Visual Editor. In visual mode only, each Site Copy text the site reads carries an invisible tag
+ * naming its value, so the page can say exactly which words are which value instead of matching words. The tag is
+ * zero width characters: a start marker, the ref's UTF-8 bytes as base-4 digits, an end marker. The bridge removes
+ * every tag from the page before anyone sees or copies it.
+ */
+
+const DIGITS = ["​", "‌", "‍", "⁠"] as const;
+// Marker pairs no ordinary text contains: a word joiner and a zero width no-break space around the digits.
+const START = "⁠⁠";
+const END = "⁠";
+const MAX_REF = 200;
+
+const TAG = new RegExp(`${START}([${DIGITS.join("")}]+)${END}`, "g");
+const ANY_MARK = /[​‌‍⁠]/;
+
+export function encodeTag(ref: string): string {
+  const bytes = new TextEncoder().encode(ref);
+  let out = START;
+  for (const b of bytes) out += DIGITS[(b >> 6) & 3]! + DIGITS[(b >> 4) & 3]! + DIGITS[(b >> 2) & 3]! + DIGITS[b & 3]!;
+  return out + END;
+}
+
+function decode(digits: string): string | null {
+  if (digits.length % 4 !== 0) return null;
+  const bytes = new Uint8Array(digits.length / 4);
+  for (let i = 0; i < bytes.length; i++) {
+    let b = 0;
+    for (let j = 0; j < 4; j++) b = (b << 2) | DIGITS.indexOf(digits[i * 4 + j] as (typeof DIGITS)[number]);
+    bytes[i] = b;
+  }
+  try {
+    const ref = new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+    return ref.length > 0 && ref.length <= MAX_REF ? ref : null;
+  } catch {
+    return null;
+  }
+}
+
+/** A tag found in a string: the ref it names and where it ends in the clean text. */
+export type FoundTag = { ref: string; at: number };
+
+/** The text with its tags removed, and the tags in order. A broken tag is removed but not reported. */
+export function readTags(text: string): { clean: string; tags: FoundTag[] } {
+  if (!ANY_MARK.test(text)) return { clean: text, tags: [] };
+  const tags: FoundTag[] = [];
+  let clean = "";
+  let last = 0;
+  for (const m of text.matchAll(TAG)) {
+    clean += text.slice(last, m.index);
+    const ref = decode(m[1]!);
+    if (ref) tags.push({ ref, at: clean.length });
+    last = m.index! + m[0].length;
+  }
+  clean += text.slice(last);
+  return { clean, tags };
+}
+
+/** The text alone, for attributes and anywhere else a tag must never show. */
+export function stripTags(text: string): string {
+  return ANY_MARK.test(text) ? text.replace(TAG, "") : text;
+}
+
+/** True when the text may hold a tag; a cheap test before the full read. */
+export const mayHaveTag = (text: string) => text.includes(START);
+
+/** Puts the tag inside rich HTML's last text, before its closing tags, so it lands in the element the words are in. */
+export function tagHtml(html: string, ref: string): string {
+  const m = /(?:<\/[a-zA-Z][a-zA-Z0-9]*>\s*)+$/.exec(html);
+  const at = m ? m.index : html.length;
+  return html.slice(0, at) + encodeTag(ref) + html.slice(at);
+}
+
+type CopyLike = { kind: string; text?: string | null; html?: string | null; image?: { alt: string } | null };
+
+/**
+ * Site Copy with each non-empty text and rich value tagged as `copy/<key>`, and each photo tagged in its alt text (the
+ * one thing about a photo the page always renders). Links and picks are untouched.
+ */
+export function tagCopy<T extends CopyLike>(all: Record<string, T>): Record<string, T> {
+  const out: Record<string, T> = {};
+  for (const [key, v] of Object.entries(all)) {
+    const ref = `copy/${key}`;
+    if (v.kind === "text" && v.text) out[key] = { ...v, text: v.text + encodeTag(ref) } as T;
+    else if (v.kind === "rich" && v.html) out[key] = { ...v, html: tagHtml(v.html, ref) } as T;
+    else if (v.kind === "image" && v.image) out[key] = { ...v, image: { ...v.image, alt: (v.image.alt ?? "") + encodeTag(ref) } } as T;
+    else out[key] = v;
+  }
+  return out;
+}

package/src/visual.ts

@@ -1,59 +1,59 @@
-import { draftMode } from "next/headers";
-import type { NextRequest, NextResponse } from "next/server";
-import { verifyVisualCookie, VISUAL_COOKIE } from "./preview";
-
-/*
- * Marking values for Site Manager's Visual Editor. A marked element is a value Site Manager already stores; the
- * Visual Editor only changes the value, never the page around it. Marks exist only in a preview, so visitors never
- * see them.
- */
-
-export const REF_PATTERN = /^[a-z_]+\/[A-Za-z0-9_\-./]{1,200}$/;
-
-type Mark = (ref: string) => Record<string, string>;
-
-const none: Mark = () => ({});
-
-/**
- * Attributes for marking a value, or nothing outside a preview:
- *
- *   const mark = await editMarks();
- *   <h1 {...mark("copy/hero_title")}>{title}</h1>
- *
- * A bad ref gives nothing rather than an error, so a typo can never break a visitor's page.
- */
-export async function editMarks(): Promise<Mark> {
-  try {
-    if (!(await draftMode()).isEnabled) return none;
-  } catch {
-    return none;
-  }
-  return (ref): Record<string, string> => (REF_PATTERN.test(ref) ? { "data-bp-edit": ref } : {});
-}
-
-function adminOrigin(request: NextRequest): string | null {
-  const id = process.env.BLUEPRINT_SITE_ID?.trim();
-  if (!id) return null;
-  return verifyVisualCookie(process.env.BLUEPRINT_REVALIDATE_SECRET, request.cookies.get(VISUAL_COOKIE)?.value, id)?.adminOrigin ?? null;
-}
-
-/** The frame-ancestors value for sites that build their own Content-Security-Policy: "'self'", plus the Visual Editor's address while it's open. */
-export function frameAncestors(request: NextRequest): string {
-  const origin = adminOrigin(request);
-  return origin ? `'self' ${origin}` : "'self'";
-}
-
-/**
- * For the site's `src/proxy.ts`. While the Visual Editor is open in this browser, lets its Site Manager address show
- * the page in a frame. Browsers ignore X-Frame-Options when frame-ancestors is sent, so every other response keeps
- * the site's usual SAMEORIGIN. Redirects are left alone: they have no page to show.
- */
-export function visualFrameHeaders(request: NextRequest, response: NextResponse): NextResponse {
-  if (response.headers.has("location")) return response;
-  const origin = adminOrigin(request);
-  if (!origin) return response;
-  const existing = response.headers.get("content-security-policy");
-  const value = `frame-ancestors 'self' ${origin}`;
-  response.headers.set("content-security-policy", existing ? `${existing}; ${value}` : value);
-  return response;
-}
+import { draftMode } from "next/headers";
+import type { NextRequest, NextResponse } from "next/server";
+import { verifyVisualCookie, VISUAL_COOKIE } from "./preview";
+
+/*
+ * Marking values for Site Manager's Visual Editor. A marked element is a value Site Manager already stores; the
+ * Visual Editor only changes the value, never the page around it. Marks exist only in a preview, so visitors never
+ * see them.
+ */
+
+export const REF_PATTERN = /^[a-z_]+\/[A-Za-z0-9_\-./]{1,200}$/;
+
+type Mark = (ref: string) => Record<string, string>;
+
+const none: Mark = () => ({});
+
+/**
+ * Attributes for marking a value, or nothing outside a preview:
+ *
+ *   const mark = await editMarks();
+ *   <h1 {...mark("copy/hero_title")}>{title}</h1>
+ *
+ * A bad ref gives nothing rather than an error, so a typo can never break a visitor's page.
+ */
+export async function editMarks(): Promise<Mark> {
+  try {
+    if (!(await draftMode()).isEnabled) return none;
+  } catch {
+    return none;
+  }
+  return (ref): Record<string, string> => (REF_PATTERN.test(ref) ? { "data-bp-edit": ref } : {});
+}
+
+function adminOrigin(request: NextRequest): string | null {
+  const id = process.env.BLUEPRINT_SITE_ID?.trim();
+  if (!id) return null;
+  return verifyVisualCookie(process.env.BLUEPRINT_REVALIDATE_SECRET, request.cookies.get(VISUAL_COOKIE)?.value, id)?.adminOrigin ?? null;
+}
+
+/** The frame-ancestors value for sites that build their own Content-Security-Policy: "'self'", plus the Visual Editor's address while it's open. */
+export function frameAncestors(request: NextRequest): string {
+  const origin = adminOrigin(request);
+  return origin ? `'self' ${origin}` : "'self'";
+}
+
+/**
+ * For the site's `src/proxy.ts`. While the Visual Editor is open in this browser, lets its Site Manager address show
+ * the page in a frame. Browsers ignore X-Frame-Options when frame-ancestors is sent, so every other response keeps
+ * the site's usual SAMEORIGIN. Redirects are left alone: they have no page to show.
+ */
+export function visualFrameHeaders(request: NextRequest, response: NextResponse): NextResponse {
+  if (response.headers.has("location")) return response;
+  const origin = adminOrigin(request);
+  if (!origin) return response;
+  const existing = response.headers.get("content-security-policy");
+  const value = `frame-ancestors 'self' ${origin}`;
+  response.headers.set("content-security-policy", existing ? `${existing}; ${value}` : value);
+  return response;
+}

package/src/waitlist-form.ts

@@ -1,39 +1,39 @@
-import type { WaitlistOptions } from "./types";
-
-// The waitlist form's pure parts, kept out of the "use server" file so they can be tested and shared.
-
-/** The fields a waitlist form sends. `choice` is "plan:<slug>" or "beds:<n>", for a form with one picker. */
-export const WAITLIST_FIELDS = ["choice", "floorPlan", "bedrooms", "email", "name", "phone", "moveIn"] as const;
-
-export type WaitlistInput = { floorPlan?: string; bedrooms?: number; email: string; name?: string; phone?: string; moveIn?: string };
-
-const text = (fd: FormData, k: string) => {
-  const v = fd.get(k);
-  return typeof v === "string" && v.trim() ? v.trim() : undefined;
-};
-
-/**
- * Reads a submitted waitlist form. A plan page usually sends a hidden `floorPlan`; a general form sends one `choice`
- * from waitlistChoices(). A choice wins over the separate fields.
- */
-export function readWaitlistForm(fd: FormData): WaitlistInput {
-  const choice = text(fd, "choice");
-  let floorPlan = text(fd, "floorPlan");
-  let bedrooms = text(fd, "bedrooms");
-  if (choice?.startsWith("plan:")) [floorPlan, bedrooms] = [choice.slice(5), undefined];
-  else if (choice?.startsWith("beds:")) [floorPlan, bedrooms] = [undefined, choice.slice(5)];
-  const beds = bedrooms !== undefined && /^\d{1,2}$/.test(bedrooms) ? Number(bedrooms) : undefined;
-  return { floorPlan, bedrooms: floorPlan ? undefined : beds, email: text(fd, "email") ?? "", name: text(fd, "name"), phone: text(fd, "phone"), moveIn: text(fd, "moveIn") };
-}
-
-/**
- * Options for one waitlist picker: each bedroom count ("Any 2 bedroom plan") and then each plan. Plans with a home
- * available now are left out unless asked for, since a visitor can apply for those today.
- */
-export function waitlistChoices(options: WaitlistOptions, opts: { includeAvailable?: boolean } = {}): { value: string; label: string }[] {
-  const plans = options.floorPlans.filter((p) => opts.includeAvailable || !p.available);
-  return [
-    ...options.bedrooms.map((b) => ({ value: `beds:${b.value}`, label: b.value === 0 ? "Any studio" : `Any ${b.label.replace(/s$/, "")} plan` })),
-    ...plans.map((p) => ({ value: `plan:${p.slug}`, label: p.name })),
-  ];
-}
+import type { WaitlistOptions } from "./types";
+
+// The waitlist form's pure parts, kept out of the "use server" file so they can be tested and shared.
+
+/** The fields a waitlist form sends. `choice` is "plan:<slug>" or "beds:<n>", for a form with one picker. */
+export const WAITLIST_FIELDS = ["choice", "floorPlan", "bedrooms", "email", "name", "phone", "moveIn"] as const;
+
+export type WaitlistInput = { floorPlan?: string; bedrooms?: number; email: string; name?: string; phone?: string; moveIn?: string };
+
+const text = (fd: FormData, k: string) => {
+  const v = fd.get(k);
+  return typeof v === "string" && v.trim() ? v.trim() : undefined;
+};
+
+/**
+ * Reads a submitted waitlist form. A plan page usually sends a hidden `floorPlan`; a general form sends one `choice`
+ * from waitlistChoices(). A choice wins over the separate fields.
+ */
+export function readWaitlistForm(fd: FormData): WaitlistInput {
+  const choice = text(fd, "choice");
+  let floorPlan = text(fd, "floorPlan");
+  let bedrooms = text(fd, "bedrooms");
+  if (choice?.startsWith("plan:")) [floorPlan, bedrooms] = [choice.slice(5), undefined];
+  else if (choice?.startsWith("beds:")) [floorPlan, bedrooms] = [undefined, choice.slice(5)];
+  const beds = bedrooms !== undefined && /^\d{1,2}$/.test(bedrooms) ? Number(bedrooms) : undefined;
+  return { floorPlan, bedrooms: floorPlan ? undefined : beds, email: text(fd, "email") ?? "", name: text(fd, "name"), phone: text(fd, "phone"), moveIn: text(fd, "moveIn") };
+}
+
+/**
+ * Options for one waitlist picker: each bedroom count ("Any 2 bedroom plan") and then each plan. Plans with a home
+ * available now are left out unless asked for, since a visitor can apply for those today.
+ */
+export function waitlistChoices(options: WaitlistOptions, opts: { includeAvailable?: boolean } = {}): { value: string; label: string }[] {
+  const plans = options.floorPlans.filter((p) => opts.includeAvailable || !p.available);
+  return [
+    ...options.bedrooms.map((b) => ({ value: `beds:${b.value}`, label: b.value === 0 ? "Any studio" : `Any ${b.label.replace(/s$/, "")} plan` })),
+    ...plans.map((p) => ({ value: `plan:${p.slug}`, label: p.name })),
+  ];
+}

package/src/waitlist.ts

@@ -1,48 +1,48 @@
-"use server";
-
-import { createHash } from "node:crypto";
-import { headers } from "next/headers";
-import { bpRaw } from "./client";
-import { checkFormToken } from "./form-token";
-import type { WaitlistResult } from "./types";
-import { readWaitlistForm } from "./waitlist-form";
-
-async function isBot(): Promise<boolean> {
-  try {
-    const { checkBotId } = await import("botid/server");
-    const r = await checkBotId();
-    return r.isBot && !r.isVerifiedBot;
-  } catch {
-    // BotID isn't set up on this site. The honeypot and time check still apply.
-    return false;
-  }
-}
-
-/**
- * Adds a visitor to a floor plan's waitlist, or a bedroom count's, from the site's server. The same spam checks as
- * forms (FormGuard's honeypot and render time, and BotID) run first; suspected spam gets the usual thank-you and is
- * dropped. The answer is the same whether or not the visitor was already waiting.
- */
-export async function joinWaitlist(formData: FormData): Promise<WaitlistResult> {
-  const token = checkFormToken(String(formData.get("bp_ts") ?? ""));
-  const spam = String(formData.get("bp_hp") ?? "").trim() !== "" ? "honeypot" : !token.ok ? (token.reason === "too_fast" ? "too_fast" : "bot") : (await isBot()) ? "bot" : null;
-  if (spam) return { ok: true, waitingFor: null };
-
-  const h = await headers();
-  const ip = h.get("x-real-ip") ?? h.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "";
-  const { status, json } = await bpRaw("/waitlist", {
-    ...readWaitlistForm(formData),
-    pageUrl: h.get("referer") ?? undefined,
-    ipHash: ip ? createHash("sha256").update(ip).digest("hex") : undefined,
-  });
-  const body = json as { data?: { waitingFor: string | null }; error?: { fields?: Record<string, string> } } | null;
-  if (status === 201 || status === 200) return { ok: true, waitingFor: body?.data?.waitingFor ?? null };
-  if (status === 422) return { ok: false, error: "invalid", fields: body?.error?.fields ?? {} };
-  if (status === 429) return { ok: false, error: "rate_limited" };
-  return { ok: false, error: "unavailable" };
-}
-
-/** The same, shaped for React's useActionState: `useActionState(waitlistAction, null)`. */
-export async function waitlistAction(_prev: WaitlistResult | null, formData: FormData): Promise<WaitlistResult> {
-  return joinWaitlist(formData);
-}
+"use server";
+
+import { createHash } from "node:crypto";
+import { headers } from "next/headers";
+import { bpRaw } from "./client";
+import { checkFormToken } from "./form-token";
+import type { WaitlistResult } from "./types";
+import { readWaitlistForm } from "./waitlist-form";
+
+async function isBot(): Promise<boolean> {
+  try {
+    const { checkBotId } = await import("botid/server");
+    const r = await checkBotId();
+    return r.isBot && !r.isVerifiedBot;
+  } catch {
+    // BotID isn't set up on this site. The honeypot and time check still apply.
+    return false;
+  }
+}
+
+/**
+ * Adds a visitor to a floor plan's waitlist, or a bedroom count's, from the site's server. The same spam checks as
+ * forms (FormGuard's honeypot and render time, and BotID) run first; suspected spam gets the usual thank-you and is
+ * dropped. The answer is the same whether or not the visitor was already waiting.
+ */
+export async function joinWaitlist(formData: FormData): Promise<WaitlistResult> {
+  const token = checkFormToken(String(formData.get("bp_ts") ?? ""));
+  const spam = String(formData.get("bp_hp") ?? "").trim() !== "" ? "honeypot" : !token.ok ? (token.reason === "too_fast" ? "too_fast" : "bot") : (await isBot()) ? "bot" : null;
+  if (spam) return { ok: true, waitingFor: null };
+
+  const h = await headers();
+  const ip = h.get("x-real-ip") ?? h.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "";
+  const { status, json } = await bpRaw("/waitlist", {
+    ...readWaitlistForm(formData),
+    pageUrl: h.get("referer") ?? undefined,
+    ipHash: ip ? createHash("sha256").update(ip).digest("hex") : undefined,
+  });
+  const body = json as { data?: { waitingFor: string | null }; error?: { fields?: Record<string, string> } } | null;
+  if (status === 201 || status === 200) return { ok: true, waitingFor: body?.data?.waitingFor ?? null };
+  if (status === 422) return { ok: false, error: "invalid", fields: body?.error?.fields ?? {} };
+  if (status === 429) return { ok: false, error: "rate_limited" };
+  return { ok: false, error: "unavailable" };
+}
+
+/** The same, shaped for React's useActionState: `useActionState(waitlistAction, null)`. */
+export async function waitlistAction(_prev: WaitlistResult | null, formData: FormData): Promise<WaitlistResult> {
+  return joinWaitlist(formData);
+}