@distinctagency/cms-client 1.24.0 → 1.26.0

package/dist/visual-editing.js

@@ -0,0 +1,251 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visual-editing/react.tsx
+var react_exports = {};
+__export(react_exports, {
+  CmsVisualBridge: () => CmsVisualBridge
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
+
+// src/visual-editing/protocol.ts
+var CMS_VISUAL_SOURCE = "cms-visual";
+var DEFAULT_TRUSTED_ORIGINS = [
+  "https://cms.distinctstudio.co.nz",
+  "https://distinctcms.com"
+];
+function isTrustedOrigin(origin, allowlist) {
+  if (allowlist.includes(origin)) return true;
+  return /^https?:\/\/localhost(:\d+)?$/.test(origin);
+}
+var VALID_VISUAL_TYPES = /* @__PURE__ */ new Set(["ready", "edit", "pick-image", "init", "set"]);
+function parseVisualMessage(data) {
+  if (typeof data === "object" && data !== null && data.source === CMS_VISUAL_SOURCE && typeof data.type === "string" && VALID_VISUAL_TYPES.has(data.type)) {
+    return data;
+  }
+  return null;
+}
+
+// src/visual-editing/dom.ts
+function discoverFields(root) {
+  const nodes = root.querySelectorAll("[data-cms-field]");
+  const fields = [];
+  nodes.forEach((el) => {
+    const name = el.getAttribute("data-cms-field");
+    if (!name) return;
+    const type = el.getAttribute("data-cms-type") === "image" ? "image" : "text";
+    fields.push({ name, type });
+  });
+  return fields;
+}
+function enforceMaxLength(value, max) {
+  if (max == null) return value;
+  return value.length > max ? value.slice(0, Math.max(0, max)) : value;
+}
+function resolveFieldAddress(el, root) {
+  const field = el.getAttribute("data-cms-field") ?? "";
+  const item = el.closest("[data-cms-item]");
+  if (!item) return { field };
+  const list = item.getAttribute("data-cms-item") ?? "";
+  const siblings = Array.from(root.querySelectorAll(`[data-cms-item="${CSS.escape(list)}"]`));
+  const index = siblings.indexOf(item);
+  return { field, list, index };
+}
+
+// src/visual-editing/bridge.ts
+function createVisualBridge(options = {}) {
+  if (typeof window === "undefined" || window.parent === window) return () => {
+  };
+  const allow = options.trustedOrigins ?? DEFAULT_TRUSTED_ORIGINS;
+  let parentOrigin = null;
+  let schema = {};
+  let activeEl = null;
+  let activeAddr = null;
+  let hoverEnabled = false;
+  const counter = createCounterEl();
+  function post(msg) {
+    if (parentOrigin) window.parent.postMessage(msg, parentOrigin);
+  }
+  function elFor(name) {
+    return document.querySelector(`[data-cms-field="${CSS.escape(name)}"]`);
+  }
+  function elForAddress(field, list, index) {
+    if (list == null || index == null) return elFor(field);
+    const items = document.querySelectorAll(`[data-cms-item="${CSS.escape(list)}"]`);
+    const item = items[index];
+    return item ? item.querySelector(`[data-cms-field="${CSS.escape(field)}"]`) : null;
+  }
+  function applyValueEl(el, value) {
+    if (!el) return;
+    if (el.getAttribute("data-cms-type") === "image") {
+      if (el instanceof HTMLImageElement) el.src = value;
+    } else el.textContent = value;
+  }
+  function applyValue(name, value) {
+    applyValueEl(elFor(name), value);
+  }
+  function schemaKeyOf(a) {
+    return a.list ? `${a.list}.${a.field}` : a.field;
+  }
+  function onClick(e) {
+    const el = e.target?.closest("[data-cms-field]");
+    if (!el || !parentOrigin) return;
+    e.preventDefault();
+    const addr = resolveFieldAddress(el, document);
+    if (el.getAttribute("data-cms-type") === "image") {
+      post({ source: CMS_VISUAL_SOURCE, type: "pick-image", name: addr.field, list: addr.list, index: addr.index });
+      return;
+    }
+    activeEl = el;
+    activeAddr = addr;
+    el.setAttribute("contenteditable", "true");
+    el.focus();
+    positionCounter(el, schemaKeyOf(addr));
+  }
+  function onInput(e) {
+    const el = e.target;
+    if (!el.getAttribute?.("data-cms-field") || el !== activeEl) return;
+    const addr = activeAddr ?? { field: el.getAttribute("data-cms-field") ?? "" };
+    const key = schemaKeyOf(addr);
+    const max = schema[key]?.max_length;
+    const clamped = enforceMaxLength(el.textContent ?? "", max);
+    if (clamped !== el.textContent) {
+      el.textContent = clamped;
+      placeCaretAtEnd(el);
+    }
+    updateCounter(key, clamped.length);
+    post({ source: CMS_VISUAL_SOURCE, type: "edit", name: addr.field, value: clamped, length: clamped.length, list: addr.list, index: addr.index });
+  }
+  function onBlur(e) {
+    const el = e.target;
+    if (el === activeEl) {
+      el.removeAttribute("contenteditable");
+      activeEl = null;
+      activeAddr = null;
+      counter.style.display = "none";
+    }
+  }
+  function positionCounter(el, schemaKey) {
+    const r = el.getBoundingClientRect();
+    counter.style.top = `${window.scrollY + r.bottom + 4}px`;
+    counter.style.left = `${window.scrollX + r.left}px`;
+    counter.style.display = "block";
+    updateCounter(schemaKey, (el.textContent ?? "").length);
+  }
+  function updateCounter(schemaKey, len) {
+    const f = schema[schemaKey];
+    const rec = f?.recommended_length;
+    const max = f?.max_length;
+    counter.textContent = max ? `${len} / ${rec ?? max}${rec && max ? ` \xB7 max ${max}` : ""}` : `${len}`;
+    const over = max != null && len >= max;
+    const warn = !over && rec != null && len > rec;
+    counter.style.background = over ? "#ef4444" : warn ? "#f59e0b" : "#334155";
+  }
+  function onMessage(e) {
+    if (!isTrustedOrigin(e.origin, allow)) return;
+    const msg = parseVisualMessage(e.data);
+    if (!msg) return;
+    if (msg.type === "init") {
+      parentOrigin = e.origin;
+      schema = msg.schema;
+      for (const [name, value] of Object.entries(msg.values)) applyValue(name, value);
+      enableHover();
+    } else if (msg.type === "set") {
+      applyValueEl(elForAddress(msg.name, msg.list, msg.index), msg.value);
+    }
+  }
+  function enableHover() {
+    if (hoverEnabled) return;
+    hoverEnabled = true;
+    document.body.setAttribute("data-cms-editing", "true");
+    injectHoverStyles();
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("input", onInput, true);
+    document.addEventListener("blur", onBlur, true);
+  }
+  window.addEventListener("message", onMessage);
+  window.parent.postMessage(
+    { source: CMS_VISUAL_SOURCE, type: "ready", fields: discoverFields(document) },
+    "*"
+    // ready carries no data; parent validates origin on its side
+  );
+  return () => {
+    window.removeEventListener("message", onMessage);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("input", onInput, true);
+    document.removeEventListener("blur", onBlur, true);
+    document.body.removeAttribute("data-cms-editing");
+    counter.remove();
+  };
+}
+function createCounterEl() {
+  const el = document.createElement("div");
+  el.setAttribute("data-cms-counter", "");
+  Object.assign(el.style, {
+    position: "absolute",
+    display: "none",
+    zIndex: "2147483647",
+    padding: "2px 6px",
+    borderRadius: "4px",
+    color: "#fff",
+    font: "12px/1.4 system-ui, sans-serif",
+    pointerEvents: "none"
+  });
+  document.body.appendChild(el);
+  return el;
+}
+function injectHoverStyles() {
+  if (document.getElementById("cms-visual-styles")) return;
+  const s = document.createElement("style");
+  s.id = "cms-visual-styles";
+  s.textContent = `
+    [data-cms-editing] [data-cms-field]{outline:1px dashed rgba(99,102,241,.6);outline-offset:2px;cursor:text}
+    [data-cms-editing] [data-cms-field][data-cms-type="image"]{cursor:pointer}
+    [data-cms-editing] [data-cms-field]:hover{outline:2px solid #6366f1}
+  `;
+  document.head.appendChild(s);
+}
+function placeCaretAtEnd(el) {
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+}
+
+// src/visual-editing/react.tsx
+function CmsVisualBridge({ trustedOrigins, param = "cms_preview" }) {
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (!params.has(param)) return;
+    const cleanup = createVisualBridge({ trustedOrigins });
+    return cleanup;
+  }, [trustedOrigins, param]);
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CmsVisualBridge
+});
+//# sourceMappingURL=visual-editing.js.map

package/dist/visual-editing.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visual-editing/react.tsx","../src/visual-editing/protocol.ts","../src/visual-editing/dom.ts","../src/visual-editing/bridge.ts"],"sourcesContent":["// packages/client/src/visual-editing/react.tsx\n\"use client\"\nimport { useEffect } from \"react\"\nimport { createVisualBridge } from \"./bridge\"\n\nexport interface CmsVisualBridgeProps {\n  /** Override the CMS origins the bridge trusts (defaults to Distinct CMS origins + localhost). */\n  trustedOrigins?: string[]\n  /** Query param that activates preview mode. Defaults to \"cms_preview\". */\n  param?: string\n}\n\n/**\n * Mount once in your site (e.g. root layout). Renders nothing and stays inert\n * for normal visitors — it only activates when the page is loaded with the\n * preview param inside a trusted CMS frame.\n */\nexport function CmsVisualBridge({ trustedOrigins, param = \"cms_preview\" }: CmsVisualBridgeProps) {\n  useEffect(() => {\n    if (typeof window === \"undefined\") return\n    const params = new URLSearchParams(window.location.search)\n    if (!params.has(param)) return\n    const cleanup = createVisualBridge({ trustedOrigins })\n    return cleanup\n  }, [trustedOrigins, param])\n  return null\n}\n","/** Discriminator stamped on every visual-editing postMessage. */\nexport const CMS_VISUAL_SOURCE = \"cms-visual\" as const\n\n/** CMS origins the bridge will trust by default. */\nexport const DEFAULT_TRUSTED_ORIGINS: readonly string[] = [\n  \"https://cms.distinctstudio.co.nz\",\n  \"https://distinctcms.com\",\n]\n\nexport type VisualFieldType = \"text\" | \"image\"\n\n/** Compact wire type announced in `ready`; the schema adds length constraints. */\nexport interface VisualFieldMeta {\n  name: string\n  type: VisualFieldType\n}\n\nexport interface VisualFieldSchema {\n  name: string\n  type: VisualFieldType\n  max_length?: number\n  recommended_length?: number\n}\n\n// bridge -> parent\nexport interface ReadyMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"ready\"\n  fields: VisualFieldMeta[]\n}\nexport interface EditMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"edit\"\n  name: string\n  value: string\n  length: number\n  /** When the field is inside a repeating group item, the group field name. */\n  list?: string\n  /** Item index within the group (document order). */\n  index?: number\n}\nexport interface PickImageMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"pick-image\"\n  name: string\n  /** When the field is inside a repeating group item, the group field name. */\n  list?: string\n  /** Item index within the group (document order). */\n  index?: number\n}\n\n// parent -> bridge\nexport interface InitMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"init\"\n  values: Record<string, string>\n  schema: Record<string, VisualFieldSchema>\n}\nexport interface SetMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"set\"\n  name: string\n  value: string\n  /** When the field is inside a repeating group item, the group field name. */\n  list?: string\n  /** Item index within the group (document order). */\n  index?: number\n}\n\nexport type BridgeOutbound = ReadyMessage | EditMessage | PickImageMessage\nexport type BridgeInbound = InitMessage | SetMessage\nexport type VisualMessage = BridgeOutbound | BridgeInbound\n\n/** Exact-match origin allowlist, plus any localhost port for local dev. */\nexport function isTrustedOrigin(\n  origin: string,\n  allowlist: readonly string[]\n): boolean {\n  if (allowlist.includes(origin)) return true\n  return /^https?:\\/\\/localhost(:\\d+)?$/.test(origin)\n}\n\nconst VALID_VISUAL_TYPES = new Set([\"ready\", \"edit\", \"pick-image\", \"init\", \"set\"])\n\n/** Narrow an unknown postMessage payload to a visual message, or null. */\nexport function parseVisualMessage(data: unknown): VisualMessage | null {\n  if (\n    typeof data === \"object\" &&\n    data !== null &&\n    (data as Record<string, unknown>).source === CMS_VISUAL_SOURCE &&\n    typeof (data as Record<string, unknown>).type === \"string\" &&\n    VALID_VISUAL_TYPES.has((data as Record<string, unknown>).type as string)\n  ) {\n    return data as VisualMessage\n  }\n  return null\n}\n","import type { VisualFieldMeta } from \"./protocol\"\n\n/** Read every [data-cms-field] element in document order. */\nexport function discoverFields(root: Document | HTMLElement): VisualFieldMeta[] {\n  const nodes = root.querySelectorAll<HTMLElement>(\"[data-cms-field]\")\n  const fields: VisualFieldMeta[] = []\n  nodes.forEach((el) => {\n    const name = el.getAttribute(\"data-cms-field\")\n    if (!name) return\n    const type = el.getAttribute(\"data-cms-type\") === \"image\" ? \"image\" : \"text\"\n    fields.push({ name, type })\n  })\n  return fields\n}\n\n/** Truncate text to a hard max. Undefined max means no limit. */\nexport function enforceMaxLength(value: string, max: number | undefined): string {\n  if (max == null) return value\n  return value.length > max ? value.slice(0, Math.max(0, max)) : value\n}\n\nexport interface FieldAddress {\n  field: string\n  list?: string\n  index?: number\n}\n\n/** Resolve a [data-cms-field] element to a flat field or a repeating-item address. */\nexport function resolveFieldAddress(el: HTMLElement, root: Document | HTMLElement): FieldAddress {\n  const field = el.getAttribute(\"data-cms-field\") ?? \"\"\n  const item = el.closest<HTMLElement>(\"[data-cms-item]\")\n  if (!item) return { field }\n  const list = item.getAttribute(\"data-cms-item\") ?? \"\"\n  const siblings = Array.from(root.querySelectorAll<HTMLElement>(`[data-cms-item=\"${CSS.escape(list)}\"]`))\n  const index = siblings.indexOf(item)\n  return { field, list, index }\n}\n","// packages/client/src/visual-editing/bridge.ts\nimport {\n  CMS_VISUAL_SOURCE,\n  DEFAULT_TRUSTED_ORIGINS,\n  isTrustedOrigin,\n  parseVisualMessage,\n  type BridgeOutbound,\n  type VisualFieldSchema,\n} from \"./protocol\"\nimport { discoverFields, enforceMaxLength, resolveFieldAddress, type FieldAddress } from \"./dom\"\n\nexport interface VisualBridgeOptions {\n  trustedOrigins?: string[]\n}\n\n/**\n * Mounts the in-page editor bridge. Dormant until a trusted CMS parent sends\n * `init`. Returns a cleanup function. No-op when not running inside a frame.\n */\nexport function createVisualBridge(options: VisualBridgeOptions = {}): () => void {\n  if (typeof window === \"undefined\" || window.parent === window) return () => {}\n  const allow = options.trustedOrigins ?? DEFAULT_TRUSTED_ORIGINS\n\n  let parentOrigin: string | null = null\n  let schema: Record<string, VisualFieldSchema> = {}\n  let activeEl: HTMLElement | null = null\n  let activeAddr: FieldAddress | null = null\n  let hoverEnabled = false\n  const counter = createCounterEl()\n\n  function post(msg: BridgeOutbound) {\n    if (parentOrigin) window.parent.postMessage(msg, parentOrigin)\n  }\n\n  function elFor(name: string): HTMLElement | null {\n    return document.querySelector<HTMLElement>(`[data-cms-field=\"${CSS.escape(name)}\"]`)\n  }\n\n  function elForAddress(field: string, list?: string, index?: number): HTMLElement | null {\n    if (list == null || index == null) return elFor(field)\n    const items = document.querySelectorAll<HTMLElement>(`[data-cms-item=\"${CSS.escape(list)}\"]`)\n    const item = items[index]\n    return item ? item.querySelector<HTMLElement>(`[data-cms-field=\"${CSS.escape(field)}\"]`) : null\n  }\n\n  function applyValueEl(el: HTMLElement | null, value: string) {\n    if (!el) return\n    if (el.getAttribute(\"data-cms-type\") === \"image\") { if (el instanceof HTMLImageElement) el.src = value }\n    else el.textContent = value\n  }\n\n  function applyValue(name: string, value: string) { applyValueEl(elFor(name), value) }\n\n  function schemaKeyOf(a: FieldAddress): string { return a.list ? `${a.list}.${a.field}` : a.field }\n\n  function onClick(e: MouseEvent) {\n    const el = (e.target as HTMLElement)?.closest<HTMLElement>(\"[data-cms-field]\")\n    if (!el || !parentOrigin) return\n    e.preventDefault()\n    const addr = resolveFieldAddress(el, document)\n    if (el.getAttribute(\"data-cms-type\") === \"image\") {\n      post({ source: CMS_VISUAL_SOURCE, type: \"pick-image\", name: addr.field, list: addr.list, index: addr.index })\n      return\n    }\n    // text: edit in place\n    activeEl = el\n    activeAddr = addr\n    el.setAttribute(\"contenteditable\", \"true\")\n    el.focus()\n    positionCounter(el, schemaKeyOf(addr))\n  }\n\n  function onInput(e: Event) {\n    const el = e.target as HTMLElement\n    if (!el.getAttribute?.(\"data-cms-field\") || el !== activeEl) return\n    const addr = activeAddr ?? { field: el.getAttribute(\"data-cms-field\") ?? \"\" }\n    const key = schemaKeyOf(addr)\n    const max = schema[key]?.max_length\n    const clamped = enforceMaxLength(el.textContent ?? \"\", max)\n    if (clamped !== el.textContent) { el.textContent = clamped; placeCaretAtEnd(el) }\n    updateCounter(key, clamped.length)\n    post({ source: CMS_VISUAL_SOURCE, type: \"edit\", name: addr.field, value: clamped, length: clamped.length, list: addr.list, index: addr.index })\n  }\n\n  function onBlur(e: FocusEvent) {\n    const el = e.target as HTMLElement\n    if (el === activeEl) {\n      el.removeAttribute(\"contenteditable\")\n      activeEl = null\n      activeAddr = null\n      counter.style.display = \"none\"\n    }\n  }\n\n  function positionCounter(el: HTMLElement, schemaKey: string) {\n    const r = el.getBoundingClientRect()\n    counter.style.top = `${window.scrollY + r.bottom + 4}px`\n    counter.style.left = `${window.scrollX + r.left}px`\n    counter.style.display = \"block\"\n    updateCounter(schemaKey, (el.textContent ?? \"\").length)\n  }\n\n  function updateCounter(schemaKey: string, len: number) {\n    const f = schema[schemaKey]\n    const rec = f?.recommended_length\n    const max = f?.max_length\n    counter.textContent = max ? `${len} / ${rec ?? max}${rec && max ? ` · max ${max}` : \"\"}` : `${len}`\n    const over = max != null && len >= max\n    const warn = !over && rec != null && len > rec\n    counter.style.background = over ? \"#ef4444\" : warn ? \"#f59e0b\" : \"#334155\"\n  }\n\n  function onMessage(e: MessageEvent) {\n    if (!isTrustedOrigin(e.origin, allow)) return\n    const msg = parseVisualMessage(e.data)\n    if (!msg) return\n    if (msg.type === \"init\") {\n      parentOrigin = e.origin\n      schema = msg.schema\n      for (const [name, value] of Object.entries(msg.values)) applyValue(name, value)\n      enableHover()\n    } else if (msg.type === \"set\") {\n      applyValueEl(elForAddress(msg.name, msg.list, msg.index), msg.value)\n    }\n  }\n\n  function enableHover() {\n    if (hoverEnabled) return\n    hoverEnabled = true\n    document.body.setAttribute(\"data-cms-editing\", \"true\")\n    injectHoverStyles()\n    document.addEventListener(\"click\", onClick, true)\n    document.addEventListener(\"input\", onInput, true)\n    document.addEventListener(\"blur\", onBlur, true)\n  }\n\n  window.addEventListener(\"message\", onMessage)\n  // Announce readiness to whatever parent embedded us.\n  window.parent.postMessage(\n    { source: CMS_VISUAL_SOURCE, type: \"ready\", fields: discoverFields(document) },\n    \"*\" // ready carries no data; parent validates origin on its side\n  )\n\n  return () => {\n    window.removeEventListener(\"message\", onMessage)\n    document.removeEventListener(\"click\", onClick, true)\n    document.removeEventListener(\"input\", onInput, true)\n    document.removeEventListener(\"blur\", onBlur, true)\n    document.body.removeAttribute(\"data-cms-editing\")\n    counter.remove()\n  }\n}\n\nfunction createCounterEl(): HTMLElement {\n  const el = document.createElement(\"div\")\n  el.setAttribute(\"data-cms-counter\", \"\")\n  Object.assign(el.style, {\n    position: \"absolute\", display: \"none\", zIndex: \"2147483647\",\n    padding: \"2px 6px\", borderRadius: \"4px\", color: \"#fff\",\n    font: \"12px/1.4 system-ui, sans-serif\", pointerEvents: \"none\",\n  } as CSSStyleDeclaration)\n  document.body.appendChild(el)\n  return el\n}\n\nfunction injectHoverStyles() {\n  if (document.getElementById(\"cms-visual-styles\")) return\n  const s = document.createElement(\"style\")\n  s.id = \"cms-visual-styles\"\n  s.textContent = `\n    [data-cms-editing] [data-cms-field]{outline:1px dashed rgba(99,102,241,.6);outline-offset:2px;cursor:text}\n    [data-cms-editing] [data-cms-field][data-cms-type=\"image\"]{cursor:pointer}\n    [data-cms-editing] [data-cms-field]:hover{outline:2px solid #6366f1}\n  `\n  document.head.appendChild(s)\n}\n\nfunction placeCaretAtEnd(el: HTMLElement) {\n  const range = document.createRange()\n  range.selectNodeContents(el)\n  range.collapse(false)\n  const sel = window.getSelection()\n  sel?.removeAllRanges()\n  sel?.addRange(range)\n}\n"],"mappings":"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","names":[]}

package/dist/visual-editing.mjs

@@ -0,0 +1,227 @@
+"use client";
+"use client";
+
+// src/visual-editing/react.tsx
+import { useEffect } from "react";
+
+// src/visual-editing/protocol.ts
+var CMS_VISUAL_SOURCE = "cms-visual";
+var DEFAULT_TRUSTED_ORIGINS = [
+  "https://cms.distinctstudio.co.nz",
+  "https://distinctcms.com"
+];
+function isTrustedOrigin(origin, allowlist) {
+  if (allowlist.includes(origin)) return true;
+  return /^https?:\/\/localhost(:\d+)?$/.test(origin);
+}
+var VALID_VISUAL_TYPES = /* @__PURE__ */ new Set(["ready", "edit", "pick-image", "init", "set"]);
+function parseVisualMessage(data) {
+  if (typeof data === "object" && data !== null && data.source === CMS_VISUAL_SOURCE && typeof data.type === "string" && VALID_VISUAL_TYPES.has(data.type)) {
+    return data;
+  }
+  return null;
+}
+
+// src/visual-editing/dom.ts
+function discoverFields(root) {
+  const nodes = root.querySelectorAll("[data-cms-field]");
+  const fields = [];
+  nodes.forEach((el) => {
+    const name = el.getAttribute("data-cms-field");
+    if (!name) return;
+    const type = el.getAttribute("data-cms-type") === "image" ? "image" : "text";
+    fields.push({ name, type });
+  });
+  return fields;
+}
+function enforceMaxLength(value, max) {
+  if (max == null) return value;
+  return value.length > max ? value.slice(0, Math.max(0, max)) : value;
+}
+function resolveFieldAddress(el, root) {
+  const field = el.getAttribute("data-cms-field") ?? "";
+  const item = el.closest("[data-cms-item]");
+  if (!item) return { field };
+  const list = item.getAttribute("data-cms-item") ?? "";
+  const siblings = Array.from(root.querySelectorAll(`[data-cms-item="${CSS.escape(list)}"]`));
+  const index = siblings.indexOf(item);
+  return { field, list, index };
+}
+
+// src/visual-editing/bridge.ts
+function createVisualBridge(options = {}) {
+  if (typeof window === "undefined" || window.parent === window) return () => {
+  };
+  const allow = options.trustedOrigins ?? DEFAULT_TRUSTED_ORIGINS;
+  let parentOrigin = null;
+  let schema = {};
+  let activeEl = null;
+  let activeAddr = null;
+  let hoverEnabled = false;
+  const counter = createCounterEl();
+  function post(msg) {
+    if (parentOrigin) window.parent.postMessage(msg, parentOrigin);
+  }
+  function elFor(name) {
+    return document.querySelector(`[data-cms-field="${CSS.escape(name)}"]`);
+  }
+  function elForAddress(field, list, index) {
+    if (list == null || index == null) return elFor(field);
+    const items = document.querySelectorAll(`[data-cms-item="${CSS.escape(list)}"]`);
+    const item = items[index];
+    return item ? item.querySelector(`[data-cms-field="${CSS.escape(field)}"]`) : null;
+  }
+  function applyValueEl(el, value) {
+    if (!el) return;
+    if (el.getAttribute("data-cms-type") === "image") {
+      if (el instanceof HTMLImageElement) el.src = value;
+    } else el.textContent = value;
+  }
+  function applyValue(name, value) {
+    applyValueEl(elFor(name), value);
+  }
+  function schemaKeyOf(a) {
+    return a.list ? `${a.list}.${a.field}` : a.field;
+  }
+  function onClick(e) {
+    const el = e.target?.closest("[data-cms-field]");
+    if (!el || !parentOrigin) return;
+    e.preventDefault();
+    const addr = resolveFieldAddress(el, document);
+    if (el.getAttribute("data-cms-type") === "image") {
+      post({ source: CMS_VISUAL_SOURCE, type: "pick-image", name: addr.field, list: addr.list, index: addr.index });
+      return;
+    }
+    activeEl = el;
+    activeAddr = addr;
+    el.setAttribute("contenteditable", "true");
+    el.focus();
+    positionCounter(el, schemaKeyOf(addr));
+  }
+  function onInput(e) {
+    const el = e.target;
+    if (!el.getAttribute?.("data-cms-field") || el !== activeEl) return;
+    const addr = activeAddr ?? { field: el.getAttribute("data-cms-field") ?? "" };
+    const key = schemaKeyOf(addr);
+    const max = schema[key]?.max_length;
+    const clamped = enforceMaxLength(el.textContent ?? "", max);
+    if (clamped !== el.textContent) {
+      el.textContent = clamped;
+      placeCaretAtEnd(el);
+    }
+    updateCounter(key, clamped.length);
+    post({ source: CMS_VISUAL_SOURCE, type: "edit", name: addr.field, value: clamped, length: clamped.length, list: addr.list, index: addr.index });
+  }
+  function onBlur(e) {
+    const el = e.target;
+    if (el === activeEl) {
+      el.removeAttribute("contenteditable");
+      activeEl = null;
+      activeAddr = null;
+      counter.style.display = "none";
+    }
+  }
+  function positionCounter(el, schemaKey) {
+    const r = el.getBoundingClientRect();
+    counter.style.top = `${window.scrollY + r.bottom + 4}px`;
+    counter.style.left = `${window.scrollX + r.left}px`;
+    counter.style.display = "block";
+    updateCounter(schemaKey, (el.textContent ?? "").length);
+  }
+  function updateCounter(schemaKey, len) {
+    const f = schema[schemaKey];
+    const rec = f?.recommended_length;
+    const max = f?.max_length;
+    counter.textContent = max ? `${len} / ${rec ?? max}${rec && max ? ` \xB7 max ${max}` : ""}` : `${len}`;
+    const over = max != null && len >= max;
+    const warn = !over && rec != null && len > rec;
+    counter.style.background = over ? "#ef4444" : warn ? "#f59e0b" : "#334155";
+  }
+  function onMessage(e) {
+    if (!isTrustedOrigin(e.origin, allow)) return;
+    const msg = parseVisualMessage(e.data);
+    if (!msg) return;
+    if (msg.type === "init") {
+      parentOrigin = e.origin;
+      schema = msg.schema;
+      for (const [name, value] of Object.entries(msg.values)) applyValue(name, value);
+      enableHover();
+    } else if (msg.type === "set") {
+      applyValueEl(elForAddress(msg.name, msg.list, msg.index), msg.value);
+    }
+  }
+  function enableHover() {
+    if (hoverEnabled) return;
+    hoverEnabled = true;
+    document.body.setAttribute("data-cms-editing", "true");
+    injectHoverStyles();
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("input", onInput, true);
+    document.addEventListener("blur", onBlur, true);
+  }
+  window.addEventListener("message", onMessage);
+  window.parent.postMessage(
+    { source: CMS_VISUAL_SOURCE, type: "ready", fields: discoverFields(document) },
+    "*"
+    // ready carries no data; parent validates origin on its side
+  );
+  return () => {
+    window.removeEventListener("message", onMessage);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("input", onInput, true);
+    document.removeEventListener("blur", onBlur, true);
+    document.body.removeAttribute("data-cms-editing");
+    counter.remove();
+  };
+}
+function createCounterEl() {
+  const el = document.createElement("div");
+  el.setAttribute("data-cms-counter", "");
+  Object.assign(el.style, {
+    position: "absolute",
+    display: "none",
+    zIndex: "2147483647",
+    padding: "2px 6px",
+    borderRadius: "4px",
+    color: "#fff",
+    font: "12px/1.4 system-ui, sans-serif",
+    pointerEvents: "none"
+  });
+  document.body.appendChild(el);
+  return el;
+}
+function injectHoverStyles() {
+  if (document.getElementById("cms-visual-styles")) return;
+  const s = document.createElement("style");
+  s.id = "cms-visual-styles";
+  s.textContent = `
+    [data-cms-editing] [data-cms-field]{outline:1px dashed rgba(99,102,241,.6);outline-offset:2px;cursor:text}
+    [data-cms-editing] [data-cms-field][data-cms-type="image"]{cursor:pointer}
+    [data-cms-editing] [data-cms-field]:hover{outline:2px solid #6366f1}
+  `;
+  document.head.appendChild(s);
+}
+function placeCaretAtEnd(el) {
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+}
+
+// src/visual-editing/react.tsx
+function CmsVisualBridge({ trustedOrigins, param = "cms_preview" }) {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (!params.has(param)) return;
+    const cleanup = createVisualBridge({ trustedOrigins });
+    return cleanup;
+  }, [trustedOrigins, param]);
+  return null;
+}
+export {
+  CmsVisualBridge
+};
+//# sourceMappingURL=visual-editing.mjs.map

package/dist/visual-editing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visual-editing/react.tsx","../src/visual-editing/protocol.ts","../src/visual-editing/dom.ts","../src/visual-editing/bridge.ts"],"sourcesContent":["// packages/client/src/visual-editing/react.tsx\n\"use client\"\nimport { useEffect } from \"react\"\nimport { createVisualBridge } from \"./bridge\"\n\nexport interface CmsVisualBridgeProps {\n  /** Override the CMS origins the bridge trusts (defaults to Distinct CMS origins + localhost). */\n  trustedOrigins?: string[]\n  /** Query param that activates preview mode. Defaults to \"cms_preview\". */\n  param?: string\n}\n\n/**\n * Mount once in your site (e.g. root layout). Renders nothing and stays inert\n * for normal visitors — it only activates when the page is loaded with the\n * preview param inside a trusted CMS frame.\n */\nexport function CmsVisualBridge({ trustedOrigins, param = \"cms_preview\" }: CmsVisualBridgeProps) {\n  useEffect(() => {\n    if (typeof window === \"undefined\") return\n    const params = new URLSearchParams(window.location.search)\n    if (!params.has(param)) return\n    const cleanup = createVisualBridge({ trustedOrigins })\n    return cleanup\n  }, [trustedOrigins, param])\n  return null\n}\n","/** Discriminator stamped on every visual-editing postMessage. */\nexport const CMS_VISUAL_SOURCE = \"cms-visual\" as const\n\n/** CMS origins the bridge will trust by default. */\nexport const DEFAULT_TRUSTED_ORIGINS: readonly string[] = [\n  \"https://cms.distinctstudio.co.nz\",\n  \"https://distinctcms.com\",\n]\n\nexport type VisualFieldType = \"text\" | \"image\"\n\n/** Compact wire type announced in `ready`; the schema adds length constraints. */\nexport interface VisualFieldMeta {\n  name: string\n  type: VisualFieldType\n}\n\nexport interface VisualFieldSchema {\n  name: string\n  type: VisualFieldType\n  max_length?: number\n  recommended_length?: number\n}\n\n// bridge -> parent\nexport interface ReadyMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"ready\"\n  fields: VisualFieldMeta[]\n}\nexport interface EditMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"edit\"\n  name: string\n  value: string\n  length: number\n  /** When the field is inside a repeating group item, the group field name. */\n  list?: string\n  /** Item index within the group (document order). */\n  index?: number\n}\nexport interface PickImageMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"pick-image\"\n  name: string\n  /** When the field is inside a repeating group item, the group field name. */\n  list?: string\n  /** Item index within the group (document order). */\n  index?: number\n}\n\n// parent -> bridge\nexport interface InitMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"init\"\n  values: Record<string, string>\n  schema: Record<string, VisualFieldSchema>\n}\nexport interface SetMessage {\n  source: typeof CMS_VISUAL_SOURCE\n  type: \"set\"\n  name: string\n  value: string\n  /** When the field is inside a repeating group item, the group field name. */\n  list?: string\n  /** Item index within the group (document order). */\n  index?: number\n}\n\nexport type BridgeOutbound = ReadyMessage | EditMessage | PickImageMessage\nexport type BridgeInbound = InitMessage | SetMessage\nexport type VisualMessage = BridgeOutbound | BridgeInbound\n\n/** Exact-match origin allowlist, plus any localhost port for local dev. */\nexport function isTrustedOrigin(\n  origin: string,\n  allowlist: readonly string[]\n): boolean {\n  if (allowlist.includes(origin)) return true\n  return /^https?:\\/\\/localhost(:\\d+)?$/.test(origin)\n}\n\nconst VALID_VISUAL_TYPES = new Set([\"ready\", \"edit\", \"pick-image\", \"init\", \"set\"])\n\n/** Narrow an unknown postMessage payload to a visual message, or null. */\nexport function parseVisualMessage(data: unknown): VisualMessage | null {\n  if (\n    typeof data === \"object\" &&\n    data !== null &&\n    (data as Record<string, unknown>).source === CMS_VISUAL_SOURCE &&\n    typeof (data as Record<string, unknown>).type === \"string\" &&\n    VALID_VISUAL_TYPES.has((data as Record<string, unknown>).type as string)\n  ) {\n    return data as VisualMessage\n  }\n  return null\n}\n","import type { VisualFieldMeta } from \"./protocol\"\n\n/** Read every [data-cms-field] element in document order. */\nexport function discoverFields(root: Document | HTMLElement): VisualFieldMeta[] {\n  const nodes = root.querySelectorAll<HTMLElement>(\"[data-cms-field]\")\n  const fields: VisualFieldMeta[] = []\n  nodes.forEach((el) => {\n    const name = el.getAttribute(\"data-cms-field\")\n    if (!name) return\n    const type = el.getAttribute(\"data-cms-type\") === \"image\" ? \"image\" : \"text\"\n    fields.push({ name, type })\n  })\n  return fields\n}\n\n/** Truncate text to a hard max. Undefined max means no limit. */\nexport function enforceMaxLength(value: string, max: number | undefined): string {\n  if (max == null) return value\n  return value.length > max ? value.slice(0, Math.max(0, max)) : value\n}\n\nexport interface FieldAddress {\n  field: string\n  list?: string\n  index?: number\n}\n\n/** Resolve a [data-cms-field] element to a flat field or a repeating-item address. */\nexport function resolveFieldAddress(el: HTMLElement, root: Document | HTMLElement): FieldAddress {\n  const field = el.getAttribute(\"data-cms-field\") ?? \"\"\n  const item = el.closest<HTMLElement>(\"[data-cms-item]\")\n  if (!item) return { field }\n  const list = item.getAttribute(\"data-cms-item\") ?? \"\"\n  const siblings = Array.from(root.querySelectorAll<HTMLElement>(`[data-cms-item=\"${CSS.escape(list)}\"]`))\n  const index = siblings.indexOf(item)\n  return { field, list, index }\n}\n","// packages/client/src/visual-editing/bridge.ts\nimport {\n  CMS_VISUAL_SOURCE,\n  DEFAULT_TRUSTED_ORIGINS,\n  isTrustedOrigin,\n  parseVisualMessage,\n  type BridgeOutbound,\n  type VisualFieldSchema,\n} from \"./protocol\"\nimport { discoverFields, enforceMaxLength, resolveFieldAddress, type FieldAddress } from \"./dom\"\n\nexport interface VisualBridgeOptions {\n  trustedOrigins?: string[]\n}\n\n/**\n * Mounts the in-page editor bridge. Dormant until a trusted CMS parent sends\n * `init`. Returns a cleanup function. No-op when not running inside a frame.\n */\nexport function createVisualBridge(options: VisualBridgeOptions = {}): () => void {\n  if (typeof window === \"undefined\" || window.parent === window) return () => {}\n  const allow = options.trustedOrigins ?? DEFAULT_TRUSTED_ORIGINS\n\n  let parentOrigin: string | null = null\n  let schema: Record<string, VisualFieldSchema> = {}\n  let activeEl: HTMLElement | null = null\n  let activeAddr: FieldAddress | null = null\n  let hoverEnabled = false\n  const counter = createCounterEl()\n\n  function post(msg: BridgeOutbound) {\n    if (parentOrigin) window.parent.postMessage(msg, parentOrigin)\n  }\n\n  function elFor(name: string): HTMLElement | null {\n    return document.querySelector<HTMLElement>(`[data-cms-field=\"${CSS.escape(name)}\"]`)\n  }\n\n  function elForAddress(field: string, list?: string, index?: number): HTMLElement | null {\n    if (list == null || index == null) return elFor(field)\n    const items = document.querySelectorAll<HTMLElement>(`[data-cms-item=\"${CSS.escape(list)}\"]`)\n    const item = items[index]\n    return item ? item.querySelector<HTMLElement>(`[data-cms-field=\"${CSS.escape(field)}\"]`) : null\n  }\n\n  function applyValueEl(el: HTMLElement | null, value: string) {\n    if (!el) return\n    if (el.getAttribute(\"data-cms-type\") === \"image\") { if (el instanceof HTMLImageElement) el.src = value }\n    else el.textContent = value\n  }\n\n  function applyValue(name: string, value: string) { applyValueEl(elFor(name), value) }\n\n  function schemaKeyOf(a: FieldAddress): string { return a.list ? `${a.list}.${a.field}` : a.field }\n\n  function onClick(e: MouseEvent) {\n    const el = (e.target as HTMLElement)?.closest<HTMLElement>(\"[data-cms-field]\")\n    if (!el || !parentOrigin) return\n    e.preventDefault()\n    const addr = resolveFieldAddress(el, document)\n    if (el.getAttribute(\"data-cms-type\") === \"image\") {\n      post({ source: CMS_VISUAL_SOURCE, type: \"pick-image\", name: addr.field, list: addr.list, index: addr.index })\n      return\n    }\n    // text: edit in place\n    activeEl = el\n    activeAddr = addr\n    el.setAttribute(\"contenteditable\", \"true\")\n    el.focus()\n    positionCounter(el, schemaKeyOf(addr))\n  }\n\n  function onInput(e: Event) {\n    const el = e.target as HTMLElement\n    if (!el.getAttribute?.(\"data-cms-field\") || el !== activeEl) return\n    const addr = activeAddr ?? { field: el.getAttribute(\"data-cms-field\") ?? \"\" }\n    const key = schemaKeyOf(addr)\n    const max = schema[key]?.max_length\n    const clamped = enforceMaxLength(el.textContent ?? \"\", max)\n    if (clamped !== el.textContent) { el.textContent = clamped; placeCaretAtEnd(el) }\n    updateCounter(key, clamped.length)\n    post({ source: CMS_VISUAL_SOURCE, type: \"edit\", name: addr.field, value: clamped, length: clamped.length, list: addr.list, index: addr.index })\n  }\n\n  function onBlur(e: FocusEvent) {\n    const el = e.target as HTMLElement\n    if (el === activeEl) {\n      el.removeAttribute(\"contenteditable\")\n      activeEl = null\n      activeAddr = null\n      counter.style.display = \"none\"\n    }\n  }\n\n  function positionCounter(el: HTMLElement, schemaKey: string) {\n    const r = el.getBoundingClientRect()\n    counter.style.top = `${window.scrollY + r.bottom + 4}px`\n    counter.style.left = `${window.scrollX + r.left}px`\n    counter.style.display = \"block\"\n    updateCounter(schemaKey, (el.textContent ?? \"\").length)\n  }\n\n  function updateCounter(schemaKey: string, len: number) {\n    const f = schema[schemaKey]\n    const rec = f?.recommended_length\n    const max = f?.max_length\n    counter.textContent = max ? `${len} / ${rec ?? max}${rec && max ? ` · max ${max}` : \"\"}` : `${len}`\n    const over = max != null && len >= max\n    const warn = !over && rec != null && len > rec\n    counter.style.background = over ? \"#ef4444\" : warn ? \"#f59e0b\" : \"#334155\"\n  }\n\n  function onMessage(e: MessageEvent) {\n    if (!isTrustedOrigin(e.origin, allow)) return\n    const msg = parseVisualMessage(e.data)\n    if (!msg) return\n    if (msg.type === \"init\") {\n      parentOrigin = e.origin\n      schema = msg.schema\n      for (const [name, value] of Object.entries(msg.values)) applyValue(name, value)\n      enableHover()\n    } else if (msg.type === \"set\") {\n      applyValueEl(elForAddress(msg.name, msg.list, msg.index), msg.value)\n    }\n  }\n\n  function enableHover() {\n    if (hoverEnabled) return\n    hoverEnabled = true\n    document.body.setAttribute(\"data-cms-editing\", \"true\")\n    injectHoverStyles()\n    document.addEventListener(\"click\", onClick, true)\n    document.addEventListener(\"input\", onInput, true)\n    document.addEventListener(\"blur\", onBlur, true)\n  }\n\n  window.addEventListener(\"message\", onMessage)\n  // Announce readiness to whatever parent embedded us.\n  window.parent.postMessage(\n    { source: CMS_VISUAL_SOURCE, type: \"ready\", fields: discoverFields(document) },\n    \"*\" // ready carries no data; parent validates origin on its side\n  )\n\n  return () => {\n    window.removeEventListener(\"message\", onMessage)\n    document.removeEventListener(\"click\", onClick, true)\n    document.removeEventListener(\"input\", onInput, true)\n    document.removeEventListener(\"blur\", onBlur, true)\n    document.body.removeAttribute(\"data-cms-editing\")\n    counter.remove()\n  }\n}\n\nfunction createCounterEl(): HTMLElement {\n  const el = document.createElement(\"div\")\n  el.setAttribute(\"data-cms-counter\", \"\")\n  Object.assign(el.style, {\n    position: \"absolute\", display: \"none\", zIndex: \"2147483647\",\n    padding: \"2px 6px\", borderRadius: \"4px\", color: \"#fff\",\n    font: \"12px/1.4 system-ui, sans-serif\", pointerEvents: \"none\",\n  } as CSSStyleDeclaration)\n  document.body.appendChild(el)\n  return el\n}\n\nfunction injectHoverStyles() {\n  if (document.getElementById(\"cms-visual-styles\")) return\n  const s = document.createElement(\"style\")\n  s.id = \"cms-visual-styles\"\n  s.textContent = `\n    [data-cms-editing] [data-cms-field]{outline:1px dashed rgba(99,102,241,.6);outline-offset:2px;cursor:text}\n    [data-cms-editing] [data-cms-field][data-cms-type=\"image\"]{cursor:pointer}\n    [data-cms-editing] [data-cms-field]:hover{outline:2px solid #6366f1}\n  `\n  document.head.appendChild(s)\n}\n\nfunction placeCaretAtEnd(el: HTMLElement) {\n  const range = document.createRange()\n  range.selectNodeContents(el)\n  range.collapse(false)\n  const sel = window.getSelection()\n  sel?.removeAllRanges()\n  sel?.addRange(range)\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@distinctagency/cms-client",
-  "version": "1.24.0",
+  "version": "1.26.0",
   "description": "Client library for Distinct CMS — query content, products, and manage orders",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -24,6 +24,11 @@
       "types": "./dist/tracking-scripts.d.ts",
       "import": "./dist/tracking-scripts.mjs",
       "require": "./dist/tracking-scripts.js"
+    },
+    "./visual-editing": {
+      "types": "./dist/visual-editing.d.ts",
+      "import": "./dist/visual-editing.mjs",
+      "require": "./dist/visual-editing.js"
     }
   },
   "scripts": {