@typecms/sdk 0.1.0

package/dist/preview/svelte.mjs

@@ -0,0 +1,437 @@
+// src/preview/svelte.ts
+import { writable, derived } from "svelte/store";
+
+// src/preview/client.ts
+var DEFAULT_ALLOWED_ORIGINS = [
+  "https://app.typecms.com",
+  "https://staging.typecms.com",
+  "http://localhost:3000",
+  "http://localhost:3001"
+];
+function createPreviewClient(config = {}) {
+  const {
+    allowedOrigins = DEFAULT_ALLOWED_ORIGINS,
+    onInit,
+    onUpdate,
+    onNavigate,
+    onFocus,
+    debug = false
+  } = config;
+  let state = {
+    enabled: false,
+    entryId: null,
+    projectId: null,
+    locale: null,
+    typeId: null,
+    values: {},
+    focusedPath: null
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  let isConnected = false;
+  let parentOrigin = null;
+  function log(...args) {
+    if (debug) {
+      console.log("[TypeCMS Preview]", ...args);
+    }
+  }
+  function setState(updates) {
+    state = { ...state, ...updates };
+    listeners.forEach((listener) => listener(state));
+  }
+  function isAllowedOrigin(origin) {
+    return allowedOrigins.some((allowed) => {
+      if (allowed === "*") return true;
+      const expected = allowed.endsWith("/*") ? allowed.slice(0, -2) : allowed;
+      return origin === expected;
+    });
+  }
+  function sendMessage(message) {
+    if (!parentOrigin) {
+      log("Cannot send message: no parent origin");
+      return;
+    }
+    if (typeof window === "undefined" || !window.parent) {
+      log("Cannot send message: not in iframe");
+      return;
+    }
+    log("Sending message:", message.type);
+    window.parent.postMessage(message, parentOrigin);
+  }
+  function handleMessage(event) {
+    if (!isAllowedOrigin(event.origin)) {
+      log("Ignored message from untrusted origin:", event.origin);
+      return;
+    }
+    const message = event.data;
+    if (!message?.type?.startsWith("typecms:preview:")) {
+      return;
+    }
+    log("Received message:", message.type, message);
+    parentOrigin = event.origin;
+    switch (message.type) {
+      case "typecms:preview:init": {
+        const initMsg = message;
+        setState({
+          enabled: true,
+          entryId: initMsg.payload.entryId,
+          projectId: initMsg.payload.projectId,
+          locale: initMsg.payload.locale,
+          typeId: initMsg.payload.typeId,
+          values: {},
+          focusedPath: null
+        });
+        onInit?.(initMsg.payload);
+        const readyMessage = {
+          type: "typecms:preview:ready",
+          timestamp: Date.now(),
+          payload: {
+            pathname: typeof window !== "undefined" ? window.location.pathname : "/"
+          }
+        };
+        sendMessage(readyMessage);
+        break;
+      }
+      case "typecms:preview:update": {
+        const updateMsg = message;
+        if (updateMsg.payload.values) {
+          setState({ values: updateMsg.payload.values });
+        } else {
+          const newValues = { ...state.values };
+          setNestedValue(newValues, updateMsg.payload.path, updateMsg.payload.value);
+          setState({ values: newValues });
+        }
+        onUpdate?.(updateMsg.payload);
+        break;
+      }
+      case "typecms:preview:navigate": {
+        onNavigate?.(message.payload.url);
+        break;
+      }
+      case "typecms:preview:focus": {
+        setState({ focusedPath: message.payload.path });
+        onFocus?.(message.payload.path);
+        break;
+      }
+    }
+  }
+  return {
+    /**
+     * Start listening for preview messages.
+     * Call this on mount.
+     */
+    connect() {
+      if (typeof window === "undefined") {
+        log("Cannot connect: not in browser");
+        return;
+      }
+      if (isConnected) {
+        log("Already connected");
+        return;
+      }
+      log("Connecting...");
+      window.addEventListener("message", handleMessage);
+      isConnected = true;
+      if (window.parent && window.parent !== window) {
+        const hello = {
+          type: "typecms:preview:ready",
+          timestamp: Date.now(),
+          payload: { pathname: window.location?.pathname ?? "/" }
+        };
+        for (const allowed of allowedOrigins) {
+          const target = allowed === "*" ? "*" : allowed.endsWith("/*") ? allowed.slice(0, -2) : allowed;
+          try {
+            window.parent.postMessage(hello, target);
+          } catch {
+          }
+        }
+      }
+    },
+    /**
+     * Stop listening for preview messages.
+     * Call this on unmount.
+     */
+    disconnect() {
+      if (typeof window === "undefined") return;
+      log("Disconnecting...");
+      window.removeEventListener("message", handleMessage);
+      isConnected = false;
+      parentOrigin = null;
+      setState({
+        enabled: false,
+        entryId: null,
+        projectId: null,
+        locale: null,
+        typeId: null,
+        values: {},
+        focusedPath: null
+      });
+    },
+    /**
+     * Get current preview state.
+     */
+    getState() {
+      return state;
+    },
+    /**
+     * Check if preview mode is active.
+     */
+    isEnabled() {
+      return state.enabled;
+    },
+    /**
+     * Get a preview value by path.
+     * Returns undefined if no preview value exists.
+     */
+    getValue(path) {
+      return getNestedValue(state.values, path);
+    },
+    /**
+     * Subscribe to state changes.
+     */
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    /**
+     * Notify the editor that the preview has navigated.
+     */
+    notifyNavigation(pathname) {
+      const message = {
+        type: "typecms:preview:ready",
+        timestamp: Date.now(),
+        payload: { pathname }
+      };
+      sendMessage(message);
+    },
+    /**
+     * Notify the editor that a field was clicked in the preview.
+     * The editor will scroll to the corresponding field.
+     *
+     * @example
+     * ```typescript
+     * // On click of an element with data-preview-field attribute:
+     * const path = el.closest('[data-preview-field]')?.dataset.previewField
+     * if (path) preview.notifyFieldFocus(path)
+     * ```
+     */
+    notifyFieldFocus(path) {
+      const message = {
+        type: "typecms:preview:focus",
+        timestamp: Date.now(),
+        payload: { path }
+      };
+      sendMessage(message);
+    }
+  };
+}
+var UNSAFE_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function setNestedValue(obj, path, value) {
+  const parts = path.split(".");
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    const arrayMatch2 = part.match(/^(\w+)\[(\d+)\]$/);
+    if (arrayMatch2) {
+      const [, name, indexStr] = arrayMatch2;
+      const index = parseInt(indexStr, 10);
+      if (UNSAFE_KEYS.has(name)) continue;
+      if (!current[name]) {
+        current[name] = [];
+      }
+      const arr = current[name];
+      if (!arr[index]) {
+        arr[index] = {};
+      }
+      current = arr[index];
+    } else {
+      if (UNSAFE_KEYS.has(part)) continue;
+      if (!current[part] || typeof current[part] !== "object") {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+  }
+  const lastPart = parts[parts.length - 1];
+  const arrayMatch = lastPart.match(/^(\w+)\[(\d+)\]$/);
+  if (arrayMatch) {
+    const [, name, indexStr] = arrayMatch;
+    const index = parseInt(indexStr, 10);
+    if (UNSAFE_KEYS.has(name)) return;
+    if (!current[name]) {
+      current[name] = [];
+    }
+    current[name][index] = value;
+  } else {
+    if (UNSAFE_KEYS.has(lastPart)) return;
+    current[lastPart] = value;
+  }
+}
+function getNestedValue(obj, path) {
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === void 0) {
+      return void 0;
+    }
+    const arrayMatch = part.match(/^(\w+)\[(\d+)\]$/);
+    if (arrayMatch) {
+      const [, name, indexStr] = arrayMatch;
+      const index = parseInt(indexStr, 10);
+      const arr = current[name];
+      if (!arr) return void 0;
+      current = arr[index];
+    } else {
+      current = current[part];
+    }
+  }
+  return current;
+}
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    const targetValue = result[key];
+    if (sourceValue && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue && typeof targetValue === "object" && !Array.isArray(targetValue)) {
+      result[key] = deepMerge(
+        targetValue,
+        sourceValue
+      );
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+
+// src/preview/overlay.ts
+var DEFAULT_OPTIONS = {
+  color: "#3b82f6",
+  zIndex: 9999,
+  scrollIntoView: true,
+  attribute: "data-preview-field"
+};
+function attachPreviewOverlay(client, options = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const { color, zIndex, scrollIntoView, attribute } = { ...DEFAULT_OPTIONS, ...options };
+  const box = document.createElement("div");
+  box.setAttribute("data-typecms-preview-overlay", "");
+  Object.assign(box.style, {
+    position: "fixed",
+    display: "none",
+    pointerEvents: "none",
+    boxSizing: "border-box",
+    border: `2px solid ${color}`,
+    borderRadius: "4px",
+    zIndex: String(zIndex),
+    transition: "top 120ms ease, left 120ms ease, width 120ms ease, height 120ms ease"
+  });
+  document.body.appendChild(box);
+  let target = null;
+  let lastPath = null;
+  function position() {
+    if (!target || !target.isConnected) {
+      box.style.display = "none";
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    Object.assign(box.style, {
+      display: "block",
+      top: `${rect.top - 2}px`,
+      left: `${rect.left - 2}px`,
+      width: `${rect.width + 4}px`,
+      height: `${rect.height + 4}px`
+    });
+  }
+  function update(state) {
+    const path = state.enabled ? state.focusedPath : null;
+    if (path === lastPath) return;
+    lastPath = path;
+    target = path ? document.querySelector(`[${attribute}="${CSS.escape(path)}"]`) : null;
+    if (target && scrollIntoView) {
+      target.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    position();
+  }
+  window.addEventListener("scroll", position, true);
+  window.addEventListener("resize", position);
+  const unsubscribe = client.subscribe(update);
+  update(client.getState());
+  return () => {
+    unsubscribe();
+    window.removeEventListener("scroll", position, true);
+    window.removeEventListener("resize", position);
+    box.remove();
+    target = null;
+  };
+}
+
+// src/preview/svelte.ts
+function createPreviewContext(options = {}) {
+  const { overlay, ...config } = options;
+  const client = createPreviewClient(config);
+  const state = writable(client.getState());
+  let unsubscribe = null;
+  let detachOverlay = null;
+  function connect() {
+    if (unsubscribe) return;
+    unsubscribe = client.subscribe((next) => {
+      state.set(next);
+    });
+    client.connect();
+    if (overlay) {
+      detachOverlay = attachPreviewOverlay(client, overlay === true ? {} : overlay);
+    }
+  }
+  function disconnect() {
+    unsubscribe?.();
+    unsubscribe = null;
+    detachOverlay?.();
+    detachOverlay = null;
+    client.disconnect();
+    state.set(client.getState());
+  }
+  const isPreview = derived(state, ($state) => $state.enabled);
+  const focusedField = derived(state, ($state) => $state.focusedPath);
+  function previewValue(path, fallback) {
+    return derived(state, ($state) => {
+      if (!$state.enabled) {
+        return fallback;
+      }
+      const value = getNestedValue($state.values, path);
+      return value !== void 0 ? value : fallback;
+    });
+  }
+  function previewContent(content) {
+    return derived(state, ($state) => {
+      if (!$state.enabled || Object.keys($state.values).length === 0) {
+        return content;
+      }
+      return deepMerge(content, $state.values);
+    });
+  }
+  return {
+    state,
+    isPreview,
+    focusedField,
+    getValue: (path) => client.getValue(path),
+    previewValue,
+    previewContent,
+    notifyNavigation: (pathname) => client.notifyNavigation(pathname),
+    notifyFieldFocus: (path) => client.notifyFieldFocus(path),
+    connect,
+    disconnect
+  };
+}
+function initPreview(options = {}) {
+  const context = createPreviewContext(options);
+  context.connect();
+  return context;
+}
+export {
+  createPreviewContext,
+  initPreview
+};
+//# sourceMappingURL=svelte.mjs.map

package/dist/preview/svelte.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/preview/svelte.ts","../../src/preview/client.ts","../../src/preview/overlay.ts"],"sourcesContent":["/**\n * Preview Svelte Stores\n *\n * Svelte integration for Type CMS live preview.\n * Mirrors the Vue layer (vue.ts) 1:1 on top of the\n * framework-agnostic preview client.\n *\n * Built on `svelte/store` only (no component runtime), so it works\n * in both Svelte 4 and Svelte 5, and in SvelteKit load/SSR contexts.\n *\n * @example\n * ```typescript\n * // src/routes/+layout.svelte\n * <script>\n *   import { onMount } from 'svelte'\n *   import { initPreview } from '@typecms/sdk/preview/svelte'\n *   import { setContext } from 'svelte'\n *\n *   onMount(() => {\n *     const preview = initPreview({ overlay: true })\n *     setContext('typecms-preview', preview)\n *     return () => preview.disconnect()\n *   })\n * </script>\n * ```\n *\n * ```svelte\n * <!-- src/routes/blog/[slug]/+page.svelte -->\n * <script>\n *   import { getContext } from 'svelte'\n *\n *   export let data\n *   const preview = getContext('typecms-preview')\n *   const content = preview.previewContent(data.post)\n *   const isPreview = preview.isPreview\n * </script>\n *\n * {#if $isPreview}<span>Preview mode</span>{/if}\n * <h1 data-preview-field=\"title\">{$content.title}</h1>\n * ```\n */\n\nimport { writable, derived, type Readable } from 'svelte/store'\nimport { createPreviewClient, deepMerge, getNestedValue } from './client'\nimport { attachPreviewOverlay, type PreviewOverlayOptions } from './overlay'\nimport type { PreviewConfig, PreviewState } from './types'\n\n// =============================================================================\n// Context\n// =============================================================================\n\nexport interface SveltePreviewContext {\n  /** Reactive preview state */\n  state: Readable<PreviewState>\n  /** Check if running in preview mode */\n  isPreview: Readable<boolean>\n  /** Currently focused field path (if any) */\n  focusedField: Readable<string | null>\n  /** Get preview value for a field path */\n  getValue: <T>(path: string) => T | undefined\n  /** Preview value for a field path, with fallback to the published value */\n  previewValue: <T>(path: string, fallback: T) => Readable<T>\n  /** Merge published content with preview overrides */\n  previewContent: <T extends Record<string, unknown>>(content: T) => Readable<T>\n  /** Notify editor of navigation */\n  notifyNavigation: (pathname: string) => void\n  /** Notify editor that a field was clicked in the preview */\n  notifyFieldFocus: (path: string) => void\n  /** Start listening for preview messages */\n  connect: () => void\n  /** Stop listening and reset state */\n  disconnect: () => void\n}\n\nexport interface SveltePreviewOptions extends PreviewConfig {\n  /**\n   * Draw an automatic highlight box over the `[data-preview-field]` element\n   * matching the field focused in the editor. Pass options to customize.\n   */\n  overlay?: boolean | PreviewOverlayOptions\n}\n\n/**\n * Create a preview context backed by Svelte stores.\n *\n * Call `connect()` to start listening for editor messages (typically in\n * onMount of a root +layout.svelte) and `disconnect()` on teardown.\n * For the common case, use {@link initPreview} instead.\n */\nexport function createPreviewContext(options: SveltePreviewOptions = {}): SveltePreviewContext {\n  const { overlay, ...config } = options\n  const client = createPreviewClient(config)\n  const state = writable<PreviewState>(client.getState())\n\n  let unsubscribe: (() => void) | null = null\n  let detachOverlay: (() => void) | null = null\n\n  function connect() {\n    if (unsubscribe) return\n    unsubscribe = client.subscribe((next) => {\n      state.set(next)\n    })\n    client.connect()\n    if (overlay) {\n      detachOverlay = attachPreviewOverlay(client, overlay === true ? {} : overlay)\n    }\n  }\n\n  function disconnect() {\n    unsubscribe?.()\n    unsubscribe = null\n    detachOverlay?.()\n    detachOverlay = null\n    client.disconnect()\n    state.set(client.getState())\n  }\n\n  const isPreview = derived(state, ($state) => $state.enabled)\n\n  const focusedField = derived(state, ($state) => $state.focusedPath)\n\n  function previewValue<T>(path: string, fallback: T): Readable<T> {\n    return derived(state, ($state) => {\n      if (!$state.enabled) {\n        return fallback\n      }\n      const value = getNestedValue($state.values, path) as T | undefined\n      return value !== undefined ? value : fallback\n    })\n  }\n\n  function previewContent<T extends Record<string, unknown>>(content: T): Readable<T> {\n    return derived(state, ($state) => {\n      if (!$state.enabled || Object.keys($state.values).length === 0) {\n        return content\n      }\n      return deepMerge(content, $state.values as Record<string, unknown>) as T\n    })\n  }\n\n  return {\n    state,\n    isPreview,\n    focusedField,\n    getValue: <T>(path: string) => client.getValue<T>(path),\n    previewValue,\n    previewContent,\n    notifyNavigation: (pathname: string) => client.notifyNavigation(pathname),\n    notifyFieldFocus: (path: string) => client.notifyFieldFocus(path),\n    connect,\n    disconnect,\n  }\n}\n\n// =============================================================================\n// Convenience\n// =============================================================================\n\n/**\n * Create a preview context and start listening for editor messages\n * immediately. The typical entry point in a SvelteKit app: call from\n * onMount in a root +layout.svelte and disconnect on teardown.\n *\n * @example\n * ```typescript\n * onMount(() => {\n *   const preview = initPreview({ overlay: true })\n *   return () => preview.disconnect()\n * })\n * ```\n */\nexport function initPreview(options: SveltePreviewOptions = {}): SveltePreviewContext {\n  const context = createPreviewContext(options)\n  context.connect()\n  return context\n}\n","/**\n * Preview Client\n *\n * Core client for handling live preview PostMessage communication.\n * This runs on the preview site (your frontend) inside an iframe.\n */\n\nimport type {\n  PreviewConfig,\n  PreviewState,\n  PreviewMessage,\n  PreviewUpdateMessage,\n  PreviewInitMessage,\n  PreviewReadyMessage,\n  PreviewFocusMessage,\n} from './types'\n\n// =============================================================================\n// Constants\n// =============================================================================\n\nconst DEFAULT_ALLOWED_ORIGINS = [\n  'https://app.typecms.com',\n  'https://staging.typecms.com',\n  'http://localhost:3000',\n  'http://localhost:3001',\n]\n\n// =============================================================================\n// Preview Client\n// =============================================================================\n\nexport type PreviewListener = (state: PreviewState) => void\n\n/**\n * Create a preview client instance.\n *\n * This handles PostMessage communication between the Type CMS editor\n * and your preview site. The client runs in the preview iframe.\n *\n * @example\n * ```typescript\n * import { createPreviewClient } from '@typecms/sdk/preview'\n *\n * const preview = createPreviewClient({\n *   debug: true,\n *   onUpdate: (data) => {\n *     console.log('Value changed:', data.path, data.value)\n *   },\n * })\n *\n * // Start listening for messages\n * preview.connect()\n *\n * // Get current preview state\n * const state = preview.getState()\n *\n * // Cleanup when done\n * preview.disconnect()\n * ```\n */\nexport function createPreviewClient(config: PreviewConfig = {}) {\n  const {\n    allowedOrigins = DEFAULT_ALLOWED_ORIGINS,\n    onInit,\n    onUpdate,\n    onNavigate,\n    onFocus,\n    debug = false,\n  } = config\n\n  // Internal state\n  let state: PreviewState = {\n    enabled: false,\n    entryId: null,\n    projectId: null,\n    locale: null,\n    typeId: null,\n    values: {},\n    focusedPath: null,\n  }\n\n  const listeners = new Set<PreviewListener>()\n  let isConnected = false\n  let parentOrigin: string | null = null\n\n  // ==========================================================================\n  // Internal Helpers\n  // ==========================================================================\n\n  function log(...args: unknown[]) {\n    if (debug) {\n      console.log('[TypeCMS Preview]', ...args)\n    }\n  }\n\n  function setState(updates: Partial<PreviewState>) {\n    state = { ...state, ...updates }\n    listeners.forEach((listener) => listener(state))\n  }\n\n  function isAllowedOrigin(origin: string): boolean {\n    return allowedOrigins.some((allowed) => {\n      if (allowed === '*') return true\n      // A trailing \"/*\" historically read as \"this origin\". Origins have no\n      // path, so a startsWith() prefix match is unsafe — \"https://app.x.com/*\"\n      // would also match the hostile origin \"https://app.x.com.evil.com\".\n      // Treat \"/*\" as the exact origin (strip it) and always compare for\n      // equality.\n      const expected = allowed.endsWith('/*') ? allowed.slice(0, -2) : allowed\n      return origin === expected\n    })\n  }\n\n  function sendMessage(message: PreviewMessage) {\n    if (!parentOrigin) {\n      log('Cannot send message: no parent origin')\n      return\n    }\n\n    if (typeof window === 'undefined' || !window.parent) {\n      log('Cannot send message: not in iframe')\n      return\n    }\n\n    log('Sending message:', message.type)\n    window.parent.postMessage(message, parentOrigin)\n  }\n\n  // ==========================================================================\n  // Message Handler\n  // ==========================================================================\n\n  function handleMessage(event: MessageEvent) {\n    // Validate origin\n    if (!isAllowedOrigin(event.origin)) {\n      log('Ignored message from untrusted origin:', event.origin)\n      return\n    }\n\n    // Validate message structure\n    const message = event.data as PreviewMessage\n    if (!message?.type?.startsWith('typecms:preview:')) {\n      return\n    }\n\n    log('Received message:', message.type, message)\n    parentOrigin = event.origin\n\n    switch (message.type) {\n      case 'typecms:preview:init': {\n        const initMsg = message as PreviewInitMessage\n        setState({\n          enabled: true,\n          entryId: initMsg.payload.entryId,\n          projectId: initMsg.payload.projectId,\n          locale: initMsg.payload.locale,\n          typeId: initMsg.payload.typeId,\n          values: {},\n          focusedPath: null,\n        })\n        onInit?.(initMsg.payload)\n\n        // Send ready response\n        const readyMessage: PreviewReadyMessage = {\n          type: 'typecms:preview:ready',\n          timestamp: Date.now(),\n          payload: {\n            pathname: typeof window !== 'undefined' ? window.location.pathname : '/',\n          },\n        }\n        sendMessage(readyMessage)\n        break\n      }\n\n      case 'typecms:preview:update': {\n        const updateMsg = message as PreviewUpdateMessage\n\n        // If full values provided, replace entirely\n        if (updateMsg.payload.values) {\n          setState({ values: updateMsg.payload.values })\n        } else {\n          // Otherwise, merge the single path update\n          const newValues = { ...state.values }\n          setNestedValue(newValues, updateMsg.payload.path, updateMsg.payload.value)\n          setState({ values: newValues })\n        }\n\n        onUpdate?.(updateMsg.payload)\n        break\n      }\n\n      case 'typecms:preview:navigate': {\n        onNavigate?.(message.payload.url)\n        break\n      }\n\n      case 'typecms:preview:focus': {\n        setState({ focusedPath: message.payload.path })\n        onFocus?.(message.payload.path)\n        break\n      }\n    }\n  }\n\n  // ==========================================================================\n  // Public API\n  // ==========================================================================\n\n  return {\n    /**\n     * Start listening for preview messages.\n     * Call this on mount.\n     */\n    connect() {\n      if (typeof window === 'undefined') {\n        log('Cannot connect: not in browser')\n        return\n      }\n\n      if (isConnected) {\n        log('Already connected')\n        return\n      }\n\n      log('Connecting...')\n      window.addEventListener('message', handleMessage)\n      isConnected = true\n\n      // Announce readiness to the embedding editor. The editor waits for a\n      // `ready` before sending `init`, and we don't yet know its origin\n      // (parentOrigin is only learned from an incoming message) — so without\n      // this hello the handshake would deadlock. The payload is just our\n      // pathname (non-sensitive), so it is safe to offer it to every\n      // configured candidate origin; the browser delivers it only to the one\n      // that actually matches the parent.\n      if (window.parent && window.parent !== (window as unknown as Window)) {\n        const hello: PreviewReadyMessage = {\n          type: 'typecms:preview:ready',\n          timestamp: Date.now(),\n          payload: { pathname: window.location?.pathname ?? '/' },\n        }\n        for (const allowed of allowedOrigins) {\n          const target = allowed === '*'\n            ? '*'\n            : allowed.endsWith('/*') ? allowed.slice(0, -2) : allowed\n          try {\n            window.parent.postMessage(hello, target)\n          } catch {\n            // Invalid target origin string — skip this candidate.\n          }\n        }\n      }\n    },\n\n    /**\n     * Stop listening for preview messages.\n     * Call this on unmount.\n     */\n    disconnect() {\n      if (typeof window === 'undefined') return\n\n      log('Disconnecting...')\n      window.removeEventListener('message', handleMessage)\n      isConnected = false\n      parentOrigin = null\n      setState({\n        enabled: false,\n        entryId: null,\n        projectId: null,\n        locale: null,\n        typeId: null,\n        values: {},\n        focusedPath: null,\n      })\n    },\n\n    /**\n     * Get current preview state.\n     */\n    getState(): PreviewState {\n      return state\n    },\n\n    /**\n     * Check if preview mode is active.\n     */\n    isEnabled(): boolean {\n      return state.enabled\n    },\n\n    /**\n     * Get a preview value by path.\n     * Returns undefined if no preview value exists.\n     */\n    getValue<T = unknown>(path: string): T | undefined {\n      return getNestedValue(state.values, path) as T | undefined\n    },\n\n    /**\n     * Subscribe to state changes.\n     */\n    subscribe(listener: PreviewListener): () => void {\n      listeners.add(listener)\n      return () => listeners.delete(listener)\n    },\n\n    /**\n     * Notify the editor that the preview has navigated.\n     */\n    notifyNavigation(pathname: string) {\n      const message: PreviewReadyMessage = {\n        type: 'typecms:preview:ready',\n        timestamp: Date.now(),\n        payload: { pathname },\n      }\n      sendMessage(message)\n    },\n\n    /**\n     * Notify the editor that a field was clicked in the preview.\n     * The editor will scroll to the corresponding field.\n     *\n     * @example\n     * ```typescript\n     * // On click of an element with data-preview-field attribute:\n     * const path = el.closest('[data-preview-field]')?.dataset.previewField\n     * if (path) preview.notifyFieldFocus(path)\n     * ```\n     */\n    notifyFieldFocus(path: string) {\n      const message: PreviewFocusMessage = {\n        type: 'typecms:preview:focus',\n        timestamp: Date.now(),\n        payload: { path },\n      }\n      sendMessage(message)\n    },\n  }\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Set a nested value by path (e.g., \"content.title\")\n */\nconst UNSAFE_KEYS = new Set(['__proto__', 'constructor', 'prototype'])\n\nfunction setNestedValue(obj: Record<string, unknown>, path: string, value: unknown): void {\n  const parts = path.split('.')\n  let current: Record<string, unknown> = obj\n\n  for (let i = 0; i < parts.length - 1; i++) {\n    const part = parts[i]\n    // Handle array notation like \"items[0]\"\n    const arrayMatch = part.match(/^(\\w+)\\[(\\d+)\\]$/)\n\n    if (arrayMatch) {\n      const [, name, indexStr] = arrayMatch\n      const index = parseInt(indexStr, 10)\n      if (UNSAFE_KEYS.has(name)) continue\n      if (!current[name]) {\n        current[name] = []\n      }\n      const arr = current[name] as unknown[]\n      if (!arr[index]) {\n        arr[index] = {}\n      }\n      current = arr[index] as Record<string, unknown>\n    } else {\n      if (UNSAFE_KEYS.has(part)) continue\n      if (!current[part] || typeof current[part] !== 'object') {\n        current[part] = {}\n      }\n      current = current[part] as Record<string, unknown>\n    }\n  }\n\n  const lastPart = parts[parts.length - 1]\n  const arrayMatch = lastPart.match(/^(\\w+)\\[(\\d+)\\]$/)\n\n  if (arrayMatch) {\n    const [, name, indexStr] = arrayMatch\n    const index = parseInt(indexStr, 10)\n    if (UNSAFE_KEYS.has(name)) return\n    if (!current[name]) {\n      current[name] = []\n    }\n    (current[name] as unknown[])[index] = value\n  } else {\n    if (UNSAFE_KEYS.has(lastPart)) return\n    current[lastPart] = value\n  }\n}\n\n/**\n * Get a nested value by path (supports \"items[0].name\" array notation)\n */\nexport function getNestedValue(obj: Record<string, unknown>, path: string): unknown {\n  const parts = path.split('.')\n  let current: unknown = obj\n\n  for (const part of parts) {\n    if (current === null || current === undefined) {\n      return undefined\n    }\n\n    // Handle array notation like \"items[0]\"\n    const arrayMatch = part.match(/^(\\w+)\\[(\\d+)\\]$/)\n\n    if (arrayMatch) {\n      const [, name, indexStr] = arrayMatch\n      const index = parseInt(indexStr, 10)\n      const arr = (current as Record<string, unknown>)[name] as unknown[] | undefined\n      if (!arr) return undefined\n      current = arr[index]\n    } else {\n      current = (current as Record<string, unknown>)[part]\n    }\n  }\n\n  return current\n}\n\n/**\n * Deep merge two objects\n */\nexport function deepMerge<T extends Record<string, unknown>>(\n  target: T,\n  source: Record<string, unknown>\n): T {\n  const result = { ...target }\n\n  for (const key of Object.keys(source)) {\n    const sourceValue = source[key]\n    const targetValue = result[key as keyof T]\n\n    if (\n      sourceValue &&\n      typeof sourceValue === 'object' &&\n      !Array.isArray(sourceValue) &&\n      targetValue &&\n      typeof targetValue === 'object' &&\n      !Array.isArray(targetValue)\n    ) {\n      result[key as keyof T] = deepMerge(\n        targetValue as Record<string, unknown>,\n        sourceValue as Record<string, unknown>\n      ) as T[keyof T]\n    } else {\n      result[key as keyof T] = sourceValue as T[keyof T]\n    }\n  }\n\n  return result\n}\n","/**\n * Preview Overlay\n *\n * Draws a highlight box over the element whose `data-preview-field`\n * matches the field currently focused in the Type CMS editor.\n * Zero-markup alternative to hand-rolling highlights with useFocusedField().\n */\n\nimport type { PreviewState } from './types'\n\nexport interface PreviewOverlayOptions {\n  /** Outline color of the highlight box */\n  color?: string\n  /** z-index of the highlight box */\n  zIndex?: number\n  /** Scroll the highlighted element into view when focus changes */\n  scrollIntoView?: boolean\n  /** Attribute used to locate field elements */\n  attribute?: string\n}\n\ninterface OverlayClient {\n  subscribe(listener: (state: PreviewState) => void): () => void\n  getState(): PreviewState\n}\n\nconst DEFAULT_OPTIONS: Required<PreviewOverlayOptions> = {\n  color: '#3b82f6',\n  zIndex: 9999,\n  scrollIntoView: true,\n  attribute: 'data-preview-field',\n}\n\n/**\n * Attach a focus-highlight overlay to the document.\n *\n * Subscribes to the preview client's state; whenever `focusedPath` changes,\n * positions a non-interactive highlight box over the matching\n * `[data-preview-field]` element. Returns a detach function.\n *\n * @example\n * ```typescript\n * const preview = createPreviewClient()\n * preview.connect()\n * const detach = attachPreviewOverlay(preview)\n * // ...on teardown\n * detach()\n * ```\n */\nexport function attachPreviewOverlay(\n  client: OverlayClient,\n  options: PreviewOverlayOptions = {},\n): () => void {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return () => {}\n  }\n\n  const { color, zIndex, scrollIntoView, attribute } = { ...DEFAULT_OPTIONS, ...options }\n\n  const box = document.createElement('div')\n  box.setAttribute('data-typecms-preview-overlay', '')\n  Object.assign(box.style, {\n    position: 'fixed',\n    display: 'none',\n    pointerEvents: 'none',\n    boxSizing: 'border-box',\n    border: `2px solid ${color}`,\n    borderRadius: '4px',\n    zIndex: String(zIndex),\n    transition: 'top 120ms ease, left 120ms ease, width 120ms ease, height 120ms ease',\n  })\n  document.body.appendChild(box)\n\n  let target: Element | null = null\n  let lastPath: string | null = null\n\n  function position() {\n    if (!target || !target.isConnected) {\n      box.style.display = 'none'\n      return\n    }\n    const rect = target.getBoundingClientRect()\n    Object.assign(box.style, {\n      display: 'block',\n      top: `${rect.top - 2}px`,\n      left: `${rect.left - 2}px`,\n      width: `${rect.width + 4}px`,\n      height: `${rect.height + 4}px`,\n    })\n  }\n\n  function update(state: PreviewState) {\n    const path = state.enabled ? state.focusedPath : null\n    if (path === lastPath) return\n    lastPath = path\n\n    target = path\n      ? document.querySelector(`[${attribute}=\"${CSS.escape(path)}\"]`)\n      : null\n\n    if (target && scrollIntoView) {\n      target.scrollIntoView({ behavior: 'smooth', block: 'center' })\n    }\n    position()\n  }\n\n  // Capture-phase scroll listener catches scrolling in nested containers\n  window.addEventListener('scroll', position, true)\n  window.addEventListener('resize', position)\n\n  const unsubscribe = client.subscribe(update)\n  update(client.getState())\n\n  return () => {\n    unsubscribe()\n    window.removeEventListener('scroll', position, true)\n    window.removeEventListener('resize', position)\n    box.remove()\n    target = null\n  }\n}\n"],"mappings":"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","names":["arrayMatch"]}

package/dist/preview/vue.d.mts

@@ -0,0 +1,113 @@
+import { InjectionKey, Ref, ComputedRef, Plugin, MaybeRefOrGetter } from 'vue';
+import { P as PreviewOverlayOptions } from '../overlay-CLYAeNwg.mjs';
+import { P as PreviewState, a as PreviewConfig } from '../types-BNHDdA2G.mjs';
+
+/**
+ * Preview Vue Composables
+ *
+ * Vue 3 integration for Type CMS live preview.
+ * Mirrors the React layer (react.tsx) 1:1 on top of the
+ * framework-agnostic preview client.
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { createApp } from 'vue'
+ * import { TypecmsPreview } from '@typecms/sdk/preview/vue'
+ *
+ * const app = createApp(App)
+ * app.use(TypecmsPreview, { overlay: true })
+ * ```
+ *
+ * ```vue
+ * <script setup>
+ * import { usePreviewContent, useIsPreview } from '@typecms/sdk/preview/vue'
+ *
+ * const props = defineProps(['post'])
+ * const isPreview = useIsPreview()
+ * const content = usePreviewContent(() => props.post)
+ * </script>
+ * ```
+ */
+
+interface VuePreviewContext {
+    /** Reactive preview state */
+    state: Ref<PreviewState>;
+    /** Check if running in preview mode */
+    isPreview: ComputedRef<boolean>;
+    /** Get preview value for a field path */
+    getValue: <T>(path: string) => T | undefined;
+    /** Merge published content with preview overrides */
+    mergeContent: <T extends Record<string, unknown>>(content: T) => T;
+    /** Notify editor of navigation */
+    notifyNavigation: (pathname: string) => void;
+    /** Notify editor that a field was clicked in the preview */
+    notifyFieldFocus: (path: string) => void;
+    /** Start listening for preview messages */
+    connect: () => void;
+    /** Stop listening and reset state */
+    disconnect: () => void;
+}
+declare const PREVIEW_INJECTION_KEY: InjectionKey<VuePreviewContext>;
+interface VuePreviewOptions extends PreviewConfig {
+    /**
+     * Draw an automatic highlight box over the `[data-preview-field]` element
+     * matching the field focused in the editor. Pass options to customize.
+     */
+    overlay?: boolean | PreviewOverlayOptions;
+}
+/**
+ * Create a preview context. Used by the TypecmsPreview plugin;
+ * exposed for advanced setups (e.g. Nuxt plugins, manual provide()).
+ */
+declare function createPreviewContext(options?: VuePreviewOptions): VuePreviewContext;
+/**
+ * Vue plugin for Type CMS live preview.
+ *
+ * Installs a preview context app-wide and starts listening for
+ * editor messages immediately.
+ */
+declare const TypecmsPreview: Plugin<[VuePreviewOptions?]>;
+/**
+ * Access the preview context.
+ *
+ * @throws Error if the TypecmsPreview plugin is not installed
+ */
+declare function usePreviewContext(): VuePreviewContext;
+/** Check if running in preview mode. */
+declare function useIsPreview(): ComputedRef<boolean>;
+/** Get current preview state (null when the plugin is not installed). */
+declare function usePreviewState(): ComputedRef<PreviewState | null>;
+/**
+ * Get a preview value by field path, with fallback to the published value.
+ */
+declare function usePreviewValue<T>(path: MaybeRefOrGetter<string>, fallback: MaybeRefOrGetter<T>): ComputedRef<T>;
+/**
+ * Merge published content with preview overrides.
+ *
+ * The primary composable for integrating preview data: pass fetched
+ * content and get back a reactive merged version.
+ */
+declare function usePreviewContent<T extends Record<string, unknown>>(content: MaybeRefOrGetter<T>): ComputedRef<T>;
+/** Get the currently focused field path (if any). */
+declare function useFocusedField(): ComputedRef<string | null>;
+/** Function to notify the editor of navigation. */
+declare function usePreviewNavigation(): (pathname: string) => void;
+/** Function to notify the editor when a preview field is clicked. */
+declare function usePreviewFieldFocus(): (path: string) => void;
+/**
+ * Get a rich-text preview value by field path with STRUCTURAL SHARING.
+ *
+ * Like `usePreviewValue`, but pipes the document through a persistent
+ * structural-sharing instance: subtrees that are deep-equal to the previous
+ * update keep their object references, so keyed/memoized node renderers only
+ * re-render nodes that actually changed — instead of re-rendering the whole
+ * rich-text tree on every keystroke.
+ *
+ * Works for both TipTap ('richtextv2') and Slate ('richtext') documents —
+ * or any JSON value. Returns the fallback (unshared) when preview is
+ * disabled. Sharing memory resets when the path value changes.
+ */
+declare function usePreviewRichText<T>(path: MaybeRefOrGetter<string>, fallback: MaybeRefOrGetter<T>): ComputedRef<T>;
+
+export { PREVIEW_INJECTION_KEY, TypecmsPreview, type VuePreviewContext, type VuePreviewOptions, createPreviewContext, useFocusedField, useIsPreview, usePreviewContent, usePreviewContext, usePreviewFieldFocus, usePreviewNavigation, usePreviewRichText, usePreviewState, usePreviewValue };