cms-renderer 0.4.0 → 0.5.0

package/dist/lib/block-renderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/block-renderer.tsx"],"sourcesContent":["/**\n * Block Renderer Component\n *\n * Dispatches block data to the appropriate component using the ComponentMap pattern.\n * This is the main entry point for rendering blocks from the CMS.\n */\n\nimport React from 'react';\nimport { BlockToolbar } from './block-toolbar';\nimport { ClientEditableBlock } from './client-editable-block';\nimport type { BlockComponentRegistry, BlockData, ResolvedRouteParams } from './types';\n\ntype TextInfo = {\n  value: string;\n  path: Array<string | number>;\n  parentType?: React.ElementType;\n  key?: React.Key | null;\n};\n\ntype ElementInfo = {\n  element: React.ReactElement;\n  path: Array<string | number>;\n};\n\ntype WalkVisitors = {\n  /**\n   * Called for every string/number child encountered.\n   * Return:\n   * - same string (or modified)\n   * - a ReactNode (e.g. wrap in <span/>)\n   */\n  onText?: (info: TextInfo) => React.ReactNode;\n\n  /**\n   * Called for every ReactElement encountered (after children are processed).\n   * Return:\n   * - same element\n   * - a cloned/modified element\n   */\n  onElement?: (info: ElementInfo) => React.ReactElement;\n};\n\n/**\n * Recursively maps a ReactNode tree, allowing transformations of text nodes and/or elements.\n * SSR-safe: does not touch DOM APIs.\n */\nexport function walkReactNode(\n  node: React.ReactNode,\n  visitors: WalkVisitors,\n  ctx: {\n    path?: Array<string | number>;\n    parentType?: React.ElementType;\n    key?: React.Key | null;\n  } = {}\n): React.ReactNode {\n  const path = ctx.path ?? [];\n\n  // Fast-path primitives\n  if (node == null || typeof node === 'boolean') return node;\n\n  if (typeof node === 'string' || typeof node === 'number') {\n    const value = String(node);\n    return visitors.onText\n      ? visitors.onText({ value, path, parentType: ctx.parentType, key: ctx.key })\n      : node;\n  }\n\n  // Arrays\n  if (Array.isArray(node)) {\n    return node.map((child, i) => {\n      // biome-ignore lint/suspicious/noExplicitAny: React child key access\n      const childKey = (child as any)?.key ?? null;\n      const result = walkReactNode(child, visitors, {\n        path: [...path, i],\n        parentType: ctx.parentType,\n        key: childKey,\n      });\n      // Ensure array children have keys\n      if (React.isValidElement(result) && result.key == null) {\n        return React.cloneElement(result, { key: childKey ?? `arr-${path.join('-')}-${i}` });\n      }\n      return result;\n    });\n  }\n\n  // ReactElement (including Fragment)\n  if (React.isValidElement(node)) {\n    // biome-ignore lint/suspicious/noExplicitAny: React element props access\n    const el = node as React.ReactElement<any>;\n    const elProps = el.props as Record<string, unknown> | null;\n\n    // Recurse into children (if any)\n    const hasChildren = elProps && 'children' in elProps;\n    const nextChildren = hasChildren\n      ? React.Children.map(elProps.children as React.ReactNode, (child, i) => {\n          // biome-ignore lint/suspicious/noExplicitAny: React child key access\n          const childKey = (child as any)?.key ?? null;\n          const result = walkReactNode(child, visitors, {\n            path: [...path, 'children', i],\n            parentType: el.type as React.ElementType,\n            key: childKey,\n          });\n          // Ensure children have keys\n          if (React.isValidElement(result) && result.key == null) {\n            return React.cloneElement(result, { key: childKey ?? `child-${path.join('-')}-${i}` });\n          }\n          return result;\n        })\n      : (elProps?.children as React.ReactNode);\n\n    // Only clone if children changed (or if you want to force a clone)\n    const cloned = hasChildren\n      ? React.cloneElement(el, undefined, nextChildren as React.ReactNode)\n      : el;\n\n    return visitors.onElement ? visitors.onElement({ element: cloned, path }) : cloned;\n  }\n\n  // Functions, symbols, portals, etc. are rare here; return as-is\n  return node;\n}\n\n// -----------------------------------------------------------------------------\n// Content Value Extraction\n// -----------------------------------------------------------------------------\n\ntype ContentMatch = {\n  contentPath: string;\n  value: string;\n};\n\n/**\n * Extracts all string values from a content object with their paths.\n * Returns a Map where keys are string values and values are arrays of content paths.\n */\nfunction extractContentValues(\n  content: Record<string, unknown>,\n  basePath: string[] = []\n): Map<string, ContentMatch[]> {\n  const map = new Map<string, ContentMatch[]>();\n\n  function walk(obj: unknown, path: string[]) {\n    if (typeof obj === 'string' && obj.trim() !== '') {\n      const contentPath = path.join('.');\n      const existing = map.get(obj) || [];\n      existing.push({ contentPath, value: obj });\n      map.set(obj, existing);\n    } else if (Array.isArray(obj)) {\n      for (let index = 0; index < obj.length; index++) {\n        walk(obj[index], [...path, String(index)]);\n      }\n    } else if (obj && typeof obj === 'object') {\n      for (const [key, value] of Object.entries(obj)) {\n        walk(value, [...path, key]);\n      }\n    }\n  }\n\n  walk(content, basePath);\n  return map;\n}\n\n// -----------------------------------------------------------------------------\n// Props\n// -----------------------------------------------------------------------------\n\ninterface BlockRendererProps {\n  /**\n   * The block data to render.\n   * Must have a `type` field that maps to a registered component.\n   */\n  block: BlockData;\n  registry: Partial<BlockComponentRegistry>;\n  /**\n   * If true, renders the component without any tree walking or editable wrappers.\n   */\n  disableEditable?: boolean;\n  /**\n   * Resolved route parameters from parametric routes.\n   * Each key is a param name (e.g., \"country\") with its value, schema name, and full document.\n   */\n  routeParams?: ResolvedRouteParams;\n  /**\n   * The current URL path (e.g. \"/en/test\").\n   * When provided, enables path-namespaced component lookup.\n   * Registry keys like \"/{lang}/test Article\" will be matched against this path,\n   * where `{x}` and `(x)` are treated as single-segment wildcards.\n   */\n  path?: string;\n}\n\n// -----------------------------------------------------------------------------\n// Path-namespaced component resolution\n// -----------------------------------------------------------------------------\n\n/**\n * Returns true if each segment of `path` matches the corresponding segment in\n * `pattern`, where a pattern segment wrapped in `{…}` or `(…)` is a wildcard.\n */\nfunction pathMatchesPattern(path: string, pattern: string): boolean {\n  const pathSegs = path.split('/').filter(Boolean);\n  const patternSegs = pattern.split('/').filter(Boolean);\n  if (pathSegs.length !== patternSegs.length) return false;\n  for (let i = 0; i < patternSegs.length; i++) {\n    const seg = patternSegs[i];\n    if (!seg) return false;\n    if ((seg.startsWith('{') && seg.endsWith('}')) || (seg.startsWith('(') && seg.endsWith(')'))) {\n      continue;\n    }\n    if (seg !== pathSegs[i]) return false;\n  }\n  return true;\n}\n\n/**\n * Resolves the component for `blockType` from the registry.\n *\n * When `path` is provided, keys of the form `\"/{pattern} BlockType\"` are\n * checked first. The first key whose path pattern matches the current path\n * and whose block-type suffix matches `blockType` wins. Falls back to a\n * direct `registry[blockType]` lookup.\n */\nfunction resolveComponent(\n  registry: Partial<BlockComponentRegistry>,\n  blockType: string,\n  path?: string\n): BlockComponentRegistry[string] | undefined {\n  if (path) {\n    for (const key of Object.keys(registry)) {\n      if (!key.startsWith('/')) continue;\n      const spaceIdx = key.indexOf(' ');\n      if (spaceIdx === -1) continue;\n      const pathPattern = key.slice(0, spaceIdx);\n      const registeredType = key.slice(spaceIdx + 1);\n      if (registeredType !== blockType) continue;\n      if (pathMatchesPattern(path, pathPattern)) {\n        return registry[key];\n      }\n    }\n  }\n  return registry[blockType];\n}\n\n// -----------------------------------------------------------------------------\n// Component\n// -----------------------------------------------------------------------------\n\n/**\n * Recursively renders a React node, invoking function components to get their output.\n * This allows us to walk the full rendered tree, not just the element wrappers.\n */\nfunction renderToWalkableTree(node: React.ReactNode, keyPrefix = ''): React.ReactNode {\n  if (node == null || typeof node === 'boolean') return node;\n  if (typeof node === 'string' || typeof node === 'number') return node;\n\n  if (Array.isArray(node)) {\n    return node.map((child, i) => {\n      const result = renderToWalkableTree(child, `${keyPrefix}${i}-`);\n      // Ensure array children have keys\n      if (React.isValidElement(result) && result.key == null) {\n        // biome-ignore lint/suspicious/noExplicitAny: Adding key to element\n        const existingKey = (child as any)?.key;\n        return React.cloneElement(result, { key: existingKey ?? `${keyPrefix}${i}` });\n      }\n      return result;\n    });\n  }\n\n  if (React.isValidElement(node)) {\n    // biome-ignore lint/suspicious/noExplicitAny: React element props access\n    const el = node as React.ReactElement<any>;\n    const elProps = el.props as Record<string, unknown> | null;\n\n    // If it's a function component, invoke it to get the rendered output\n    if (typeof el.type === 'function') {\n      try {\n        // biome-ignore lint/complexity/noBannedTypes: Need to invoke React function component\n        const rendered = (el.type as Function)(el.props);\n        return renderToWalkableTree(rendered, keyPrefix);\n      } catch {\n        // If component throws (e.g., uses hooks), return as-is\n        return node;\n      }\n    }\n\n    // For host elements (div, span, etc.), recurse into children\n    if (elProps && 'children' in elProps) {\n      const newChildren = renderToWalkableTree(elProps.children as React.ReactNode, keyPrefix);\n      return React.cloneElement(el, undefined, newChildren);\n    }\n\n    return node;\n  }\n\n  return node;\n}\n\n/**\n * Renders a single block by dispatching to the appropriate component.\n *\n * Uses the ComponentMap pattern: the block's `type` field determines which\n * component renders the block's `content`.\n *\n * Internally, it:\n * 1. Renders the component tree by invoking function components\n * 2. Extracts all string values from block.content\n * 3. Walks the rendered tree and wraps matching text nodes with spans\n */\nexport function BlockRenderer({\n  block,\n  registry,\n  disableEditable,\n  routeParams,\n  path,\n}: BlockRendererProps) {\n  const Component = resolveComponent(registry, block.type, path);\n\n  if (!Component) {\n    // Log warning in development, render nothing in production\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(`[BlockRenderer] Unknown block type: ${block.type}`);\n    }\n    return null;\n  }\n\n  // biome-ignore lint/suspicious/noExplicitAny: Type safety ensured by BlockData discriminated union\n  const component = <Component content={block.content as any} routeParams={routeParams} />;\n\n  if (disableEditable) {\n    return component;\n  }\n\n  // Extract all string values from content with their paths\n  const contentValueMap = extractContentValues(block.content as Record<string, unknown>);\n\n  // Try server-side tree walking for text span injection (best-effort).\n  // This works for sync server components but fails for client components,\n  // async components, and components using hooks.\n  let renderedComponent: React.ReactNode = component;\n  let needsClientSideSpans = true;\n\n  try {\n    const renderedTree = renderToWalkableTree(component);\n\n    // Check if tree walking produced host elements (div, section, etc.)\n    // vs the original component reference (function type = couldn't be invoked)\n    const isWalkable =\n      React.isValidElement(renderedTree) &&\n      typeof (renderedTree as React.ReactElement<Record<string, unknown>>).type === 'string';\n\n    if (isWalkable) {\n      const usedPaths = new Set<string>();\n\n      renderedComponent = walkReactNode(renderedTree, {\n        onText: ({ value, key, path }) => {\n          const matches = contentValueMap.get(value);\n          if (!matches || matches.length === 0) return value;\n\n          const match = matches.find((m) => !usedPaths.has(m.contentPath)) ?? matches[0];\n          if (!match) return value;\n\n          usedPaths.add(match.contentPath);\n          const spanKey = key ?? `${block.id}-${match.contentPath}-${path.join('-')}`;\n\n          return (\n            <span\n              key={spanKey}\n              data-cms-editable\n              data-block-id={block.id}\n              data-block-type={block.type}\n              data-content-path={match.contentPath}\n            >\n              {value}\n            </span>\n          );\n        },\n      });\n\n      needsClientSideSpans = false;\n    }\n  } catch {\n    // Tree walking failed entirely, fall back to client-side injection\n  }\n\n  // Build content entries for client-side text matching when server-side fails\n  const contentEntries = needsClientSideSpans\n    ? Array.from(contentValueMap.entries())\n        .map(([value, matches]) => ({ v: value, p: matches[0]?.contentPath }))\n        .filter((e): e is { v: string; p: string } => !!e.p)\n    : [];\n\n  return (\n    <div\n      key={block.id}\n      data-cms-block\n      data-block-id={block.id}\n      data-block-type={block.type}\n      style={{ position: 'relative' }}\n    >\n      <style>{`\n        [data-cms-block] {\n          position: relative;\n        }\n        [data-cms-block]:hover {\n          outline: 2px solid #3b82f6;\n          outline-offset: 4px;\n        }\n        [data-cms-editable] {\n          cursor: pointer;\n          border-radius: 2px;\n        }\n        [data-cms-editable]:hover {\n          outline: 2px solid #3b82f6;\n          outline-offset: 2px;\n        }\n        .cms-block-toolbar {\n          position: absolute;\n          bottom: 8px;\n          left: 50%;\n          transform: translateX(-50%);\n          display: flex;\n          gap: 4px;\n          background: #1f2937;\n          border-radius: 6px;\n          padding: 4px;\n          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n          opacity: 0;\n          pointer-events: none;\n          transition: opacity 0.15s ease;\n          z-index: 1000;\n        }\n        [data-cms-block]:hover .cms-block-toolbar {\n          opacity: 1;\n          pointer-events: auto;\n        }\n        .cms-block-toolbar button {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 28px;\n          height: 28px;\n          border: none;\n          background: transparent;\n          color: #9ca3af;\n          border-radius: 4px;\n          cursor: pointer;\n          transition: background 0.15s ease, color 0.15s ease;\n        }\n        .cms-block-toolbar button:hover {\n          background: #374151;\n          color: #fff;\n        }\n        .cms-block-toolbar button.delete:hover {\n          background: #dc2626;\n          color: #fff;\n        }\n        .cms-block-toolbar button:disabled {\n          opacity: 0.4;\n          cursor: not-allowed;\n        }\n        .cms-block-toolbar button:disabled:hover {\n          background: transparent;\n          color: #9ca3af;\n        }\n        .cms-block-toolbar svg {\n          width: 16px;\n          height: 16px;\n        }\n      `}</style>\n      <script\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Inline script for iframe postMessage click routing\n        dangerouslySetInnerHTML={{\n          __html: `\n            (function() {\n              if (!window.__cmsEditableInitialized) {\n                window.__cmsEditableInitialized = true;\n\n                document.addEventListener('click', function(e) {\n                  if (e.target.closest('.cms-block-toolbar')) return;\n\n                  var editableTarget = e.target.closest('[data-cms-editable]');\n                  if (editableTarget) {\n                    var message = {\n                      type: 'cms-editable-click',\n                      blockId: editableTarget.getAttribute('data-block-id'),\n                      blockType: editableTarget.getAttribute('data-block-type'),\n                      contentPath: editableTarget.getAttribute('data-content-path')\n                    };\n                    if (window.parent && window.parent !== window) {\n                      window.parent.postMessage(message, '*');\n                    }\n                    return;\n                  }\n\n                  var blockTarget = e.target.closest('[data-cms-block]');\n                  if (blockTarget) {\n                    var message = {\n                      type: 'cms-editable-click',\n                      blockId: blockTarget.getAttribute('data-block-id'),\n                      blockType: blockTarget.getAttribute('data-block-type'),\n                      contentPath: null\n                    };\n                    if (window.parent && window.parent !== window) {\n                      window.parent.postMessage(message, '*');\n                    }\n                  }\n                });\n              }\n            })();\n          `,\n        }}\n      />\n      {needsClientSideSpans && contentEntries.length > 0 ? (\n        <ClientEditableBlock\n          blockId={block.id}\n          blockType={block.type}\n          contentEntries={contentEntries}\n        >\n          {renderedComponent}\n        </ClientEditableBlock>\n      ) : (\n        renderedComponent\n      )}\n      <BlockToolbar key=\"cms-toolbar\" blockId={block.id} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["path"]}
+{"version":3,"sources":["../../lib/block-renderer.tsx"],"sourcesContent":["/**\n * Block Renderer Component\n *\n * Dispatches block data to the appropriate component using the ComponentMap pattern.\n * This is the main entry point for rendering blocks from the CMS.\n */\n\nimport React from 'react';\nimport { BlockToolbar } from './block-toolbar';\nimport { ClientEditableBlock } from './client-editable-block';\nimport type { BlockComponentRegistry, BlockData, ResolvedRouteParams } from './types';\n\ntype TextInfo = {\n  value: string;\n  path: Array<string | number>;\n  parentType?: React.ElementType;\n  key?: React.Key | null;\n};\n\ntype ElementInfo = {\n  element: React.ReactElement;\n  path: Array<string | number>;\n};\n\ntype WalkVisitors = {\n  /**\n   * Called for every string/number child encountered.\n   * Return:\n   * - same string (or modified)\n   * - a ReactNode (e.g. wrap in <span/>)\n   */\n  onText?: (info: TextInfo) => React.ReactNode;\n\n  /**\n   * Called for every ReactElement encountered (after children are processed).\n   * Return:\n   * - same element\n   * - a cloned/modified element\n   */\n  onElement?: (info: ElementInfo) => React.ReactElement;\n};\n\n/**\n * Recursively maps a ReactNode tree, allowing transformations of text nodes and/or elements.\n * SSR-safe: does not touch DOM APIs.\n */\nexport function walkReactNode(\n  node: React.ReactNode,\n  visitors: WalkVisitors,\n  ctx: {\n    path?: Array<string | number>;\n    parentType?: React.ElementType;\n    key?: React.Key | null;\n  } = {}\n): React.ReactNode {\n  const path = ctx.path ?? [];\n\n  // Fast-path primitives\n  if (node == null || typeof node === 'boolean') return node;\n\n  if (typeof node === 'string' || typeof node === 'number') {\n    const value = String(node);\n    return visitors.onText\n      ? visitors.onText({ value, path, parentType: ctx.parentType, key: ctx.key })\n      : node;\n  }\n\n  // Arrays\n  if (Array.isArray(node)) {\n    return node.map((child, i) => {\n      // biome-ignore lint/suspicious/noExplicitAny: React child key access\n      const childKey = (child as any)?.key ?? null;\n      const result = walkReactNode(child, visitors, {\n        path: [...path, i],\n        parentType: ctx.parentType,\n        key: childKey,\n      });\n      // Ensure array children have keys\n      if (React.isValidElement(result) && result.key == null) {\n        return React.cloneElement(result, { key: childKey ?? `arr-${path.join('-')}-${i}` });\n      }\n      return result;\n    });\n  }\n\n  // ReactElement (including Fragment)\n  if (React.isValidElement(node)) {\n    // biome-ignore lint/suspicious/noExplicitAny: React element props access\n    const el = node as React.ReactElement<any>;\n    const elProps = el.props as Record<string, unknown> | null;\n\n    // Recurse into children (if any)\n    const hasChildren = elProps && 'children' in elProps;\n    const nextChildren = hasChildren\n      ? React.Children.map(elProps.children as React.ReactNode, (child, i) => {\n          // biome-ignore lint/suspicious/noExplicitAny: React child key access\n          const childKey = (child as any)?.key ?? null;\n          const result = walkReactNode(child, visitors, {\n            path: [...path, 'children', i],\n            parentType: el.type as React.ElementType,\n            key: childKey,\n          });\n          // Ensure children have keys\n          if (React.isValidElement(result) && result.key == null) {\n            return React.cloneElement(result, { key: childKey ?? `child-${path.join('-')}-${i}` });\n          }\n          return result;\n        })\n      : (elProps?.children as React.ReactNode);\n\n    // Only clone if children changed (or if you want to force a clone)\n    const cloned = hasChildren\n      ? React.cloneElement(el, undefined, nextChildren as React.ReactNode)\n      : el;\n\n    return visitors.onElement ? visitors.onElement({ element: cloned, path }) : cloned;\n  }\n\n  // Functions, symbols, portals, etc. are rare here; return as-is\n  return node;\n}\n\n// -----------------------------------------------------------------------------\n// Content Value Extraction\n// -----------------------------------------------------------------------------\n\ntype ContentMatch = {\n  contentPath: string;\n  value: string;\n};\n\n/**\n * Extracts all string values from a content object with their paths.\n * Returns a Map where keys are string values and values are arrays of content paths.\n */\nfunction extractContentValues(\n  content: Record<string, unknown>,\n  basePath: string[] = []\n): Map<string, ContentMatch[]> {\n  const map = new Map<string, ContentMatch[]>();\n\n  function walk(obj: unknown, path: string[]) {\n    if (typeof obj === 'string' && obj.trim() !== '') {\n      const contentPath = path.join('.');\n      const existing = map.get(obj) || [];\n      existing.push({ contentPath, value: obj });\n      map.set(obj, existing);\n    } else if (Array.isArray(obj)) {\n      for (let index = 0; index < obj.length; index++) {\n        walk(obj[index], [...path, String(index)]);\n      }\n    } else if (obj && typeof obj === 'object') {\n      for (const [key, value] of Object.entries(obj)) {\n        walk(value, [...path, key]);\n      }\n    }\n  }\n\n  walk(content, basePath);\n  return map;\n}\n\n// -----------------------------------------------------------------------------\n// Props\n// -----------------------------------------------------------------------------\n\ninterface BlockRendererProps {\n  /**\n   * The block data to render.\n   * Must have a `type` field that maps to a registered component.\n   */\n  block: BlockData;\n  registry: Partial<BlockComponentRegistry>;\n  /**\n   * If true, renders the component without any tree walking or editable wrappers.\n   */\n  disableEditable?: boolean;\n  /**\n   * Resolved route parameters from parametric routes.\n   * Each key is a param name (e.g., \"country\") with its value, schema name, and full document.\n   */\n  routeParams?: ResolvedRouteParams;\n  /**\n   * The current URL path (e.g. \"/en/test\").\n   * When provided, enables path-namespaced component lookup.\n   * Registry keys like \"/{lang}/test Article\" will be matched against this path,\n   * where `{x}` and `(x)` are treated as single-segment wildcards.\n   */\n  path?: string;\n}\n\n// -----------------------------------------------------------------------------\n// Path-namespaced component resolution\n// -----------------------------------------------------------------------------\n\n/**\n * Returns true if each segment of `path` matches the corresponding segment in\n * `pattern`, where a pattern segment wrapped in `{…}` or `(…)` is a wildcard.\n */\nfunction pathMatchesPattern(path: string, pattern: string): boolean {\n  const pathSegs = path.split('/').filter(Boolean);\n  const patternSegs = pattern.split('/').filter(Boolean);\n  if (pathSegs.length !== patternSegs.length) return false;\n  for (let i = 0; i < patternSegs.length; i++) {\n    const seg = patternSegs[i];\n    if (!seg) return false;\n    if ((seg.startsWith('{') && seg.endsWith('}')) || (seg.startsWith('(') && seg.endsWith(')'))) {\n      continue;\n    }\n    if (seg !== pathSegs[i]) return false;\n  }\n  return true;\n}\n\n/**\n * Resolves the component for `blockType` from the registry.\n *\n * When `path` is provided, keys of the form `\"/{pattern} BlockType\"` are\n * checked first. The first key whose path pattern matches the current path\n * and whose block-type suffix matches `blockType` wins. Falls back to a\n * direct `registry[blockType]` lookup.\n */\nfunction resolveComponent(\n  registry: Partial<BlockComponentRegistry>,\n  blockType: string,\n  path?: string\n): BlockComponentRegistry[string] | undefined {\n  if (path) {\n    for (const key of Object.keys(registry)) {\n      if (!key.startsWith('/')) continue;\n      const spaceIdx = key.indexOf(' ');\n      if (spaceIdx === -1) continue;\n      const pathPattern = key.slice(0, spaceIdx);\n      const registeredType = key.slice(spaceIdx + 1);\n      if (registeredType !== blockType) continue;\n      if (pathMatchesPattern(path, pathPattern)) {\n        return registry[key];\n      }\n    }\n  }\n  return registry[blockType];\n}\n\n// -----------------------------------------------------------------------------\n// Component\n// -----------------------------------------------------------------------------\n\n/**\n * Recursively renders a React node, invoking function components to get their output.\n * This allows us to walk the full rendered tree, not just the element wrappers.\n */\nfunction renderToWalkableTree(node: React.ReactNode, keyPrefix = ''): React.ReactNode {\n  if (node == null || typeof node === 'boolean') return node;\n  if (typeof node === 'string' || typeof node === 'number') return node;\n\n  if (Array.isArray(node)) {\n    return node.map((child, i) => {\n      const result = renderToWalkableTree(child, `${keyPrefix}${i}-`);\n      // Ensure array children have keys\n      if (React.isValidElement(result) && result.key == null) {\n        // biome-ignore lint/suspicious/noExplicitAny: Adding key to element\n        const existingKey = (child as any)?.key;\n        return React.cloneElement(result, { key: existingKey ?? `${keyPrefix}${i}` });\n      }\n      return result;\n    });\n  }\n\n  if (React.isValidElement(node)) {\n    // biome-ignore lint/suspicious/noExplicitAny: React element props access\n    const el = node as React.ReactElement<any>;\n    const elProps = el.props as Record<string, unknown> | null;\n\n    // If it's a function component, invoke it to get the rendered output\n    if (typeof el.type === 'function') {\n      try {\n        // biome-ignore lint/complexity/noBannedTypes: Need to invoke React function component\n        const rendered = (el.type as Function)(el.props);\n        return renderToWalkableTree(rendered, keyPrefix);\n      } catch {\n        // If component throws (e.g., uses hooks), return as-is\n        return node;\n      }\n    }\n\n    // For host elements (div, span, etc.), recurse into children\n    if (elProps && 'children' in elProps) {\n      const newChildren = renderToWalkableTree(elProps.children as React.ReactNode, keyPrefix);\n      return React.cloneElement(el, undefined, newChildren);\n    }\n\n    return node;\n  }\n\n  return node;\n}\n\n/**\n * Renders a single block by dispatching to the appropriate component.\n *\n * Uses the ComponentMap pattern: the block's `type` field determines which\n * component renders the block's `content`.\n *\n * Internally, it:\n * 1. Renders the component tree by invoking function components\n * 2. Extracts all string values from block.content\n * 3. Walks the rendered tree and wraps matching text nodes with spans\n */\nexport function BlockRenderer({\n  block,\n  registry,\n  disableEditable,\n  routeParams,\n  path,\n}: BlockRendererProps) {\n  const Component = resolveComponent(registry, block.type, path);\n\n  if (!Component) {\n    // Log warning in development, render nothing in production\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(`[BlockRenderer] Unknown block type: ${block.type}`);\n    }\n    return null;\n  }\n\n  // biome-ignore lint/suspicious/noExplicitAny: Type safety ensured by BlockData discriminated union\n  const component = <Component content={block.content as any} routeParams={routeParams} />;\n\n  if (disableEditable) {\n    return component;\n  }\n\n  // Extract all string values from content with their paths\n  const contentValueMap = extractContentValues(block.content as Record<string, unknown>);\n\n  // Try server-side tree walking for text span injection (best-effort).\n  // This works for sync server components but fails for client components,\n  // async components, and components using hooks.\n  let renderedComponent: React.ReactNode = component;\n  let needsClientSideSpans = true;\n\n  try {\n    const renderedTree = renderToWalkableTree(component);\n\n    // Check if tree walking produced host elements (div, section, etc.)\n    // vs the original component reference (function type = couldn't be invoked)\n    const isWalkable =\n      React.isValidElement(renderedTree) &&\n      typeof (renderedTree as React.ReactElement<Record<string, unknown>>).type === 'string';\n\n    if (isWalkable) {\n      const usedPaths = new Set<string>();\n\n      renderedComponent = walkReactNode(renderedTree, {\n        onText: ({ value, key, path }) => {\n          const matches = contentValueMap.get(value);\n          if (!matches || matches.length === 0) return value;\n\n          const match = matches.find((m) => !usedPaths.has(m.contentPath)) ?? matches[0];\n          if (!match) return value;\n\n          usedPaths.add(match.contentPath);\n          const spanKey = key ?? `${block.id}-${match.contentPath}-${path.join('-')}`;\n\n          return (\n            <span\n              key={spanKey}\n              data-cms-editable\n              data-block-id={block.id}\n              data-block-type={block.type}\n              data-content-path={match.contentPath}\n            >\n              {value}\n            </span>\n          );\n        },\n      });\n\n      needsClientSideSpans = false;\n    }\n  } catch {\n    // Tree walking failed entirely, fall back to client-side injection\n  }\n\n  // Build content entries for client-side text matching when server-side fails\n  const contentEntries = needsClientSideSpans\n    ? Array.from(contentValueMap.entries())\n        .map(([value, matches]) => ({ v: value, p: matches[0]?.contentPath }))\n        .filter((e): e is { v: string; p: string } => !!e.p)\n    : [];\n\n  return (\n    <div\n      key={block.id}\n      data-cms-block\n      data-block-id={block.id}\n      data-block-type={block.type}\n      style={{ display: 'contents' }}\n    >\n      <style>{`\n        [data-cms-block] {\n          display: contents;\n        }\n        [data-cms-editable] {\n          display: contents;\n          cursor: pointer;\n        }\n        .cms-block-toolbar {\n          position: fixed;\n          transform: translateX(-50%);\n          display: flex;\n          gap: 4px;\n          background: #1f2937;\n          border-radius: 6px;\n          padding: 4px;\n          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n          opacity: 0;\n          pointer-events: none;\n          transition: opacity 0.15s ease;\n          z-index: 9999;\n        }\n        .cms-block-toolbar button {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 28px;\n          height: 28px;\n          border: none;\n          background: transparent;\n          color: #9ca3af;\n          border-radius: 4px;\n          cursor: pointer;\n          transition: background 0.15s ease, color 0.15s ease;\n        }\n        .cms-block-toolbar button:hover {\n          background: #374151;\n          color: #fff;\n        }\n        .cms-block-toolbar button.delete:hover {\n          background: #dc2626;\n          color: #fff;\n        }\n        .cms-block-toolbar button:disabled {\n          opacity: 0.4;\n          cursor: not-allowed;\n        }\n        .cms-block-toolbar button:disabled:hover {\n          background: transparent;\n          color: #9ca3af;\n        }\n        .cms-block-toolbar svg {\n          width: 16px;\n          height: 16px;\n        }\n      `}</style>\n      <script\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: Inline script for iframe postMessage click routing\n        dangerouslySetInnerHTML={{\n          __html: `\n            (function() {\n              if (!window.__cmsEditableInitialized) {\n                window.__cmsEditableInitialized = true;\n                var _ab = null;\n\n                function _tb(bid) {\n                  return document.querySelector('.cms-block-toolbar[data-block-id=\"' + bid + '\"]');\n                }\n\n                function _show(bid, target) {\n                  var tb = _tb(bid);\n                  if (tb && target) {\n                    var r = target.getBoundingClientRect();\n                    tb.style.left = Math.round(r.left + r.width / 2) + 'px';\n                    tb.style.top = Math.round(r.bottom + 8) + 'px';\n                    tb.style.opacity = '1';\n                    tb.style.pointerEvents = 'auto';\n                  }\n                }\n\n                function _hide(bid) {\n                  var tb = _tb(bid);\n                  if (tb) { tb.style.opacity = '0'; tb.style.pointerEvents = 'none'; }\n                }\n\n                document.addEventListener('mouseover', function(e) {\n                  if (e.target.closest('.cms-block-toolbar')) return;\n                  var bel = e.target.closest('[data-cms-block]');\n                  var bid = bel ? bel.getAttribute('data-block-id') : null;\n                  if (bid === _ab) return;\n                  if (_ab) _hide(_ab);\n                  _ab = bid;\n                  if (bid) _show(bid, e.target);\n                });\n\n                document.addEventListener('click', function(e) {\n                  if (e.target.closest('.cms-block-toolbar')) return;\n\n                  var path = e.composedPath ? e.composedPath() : [e.target];\n                  var et = null;\n                  for (var i = 0; i < path.length; i++) {\n                    var n = path[i];\n                    if (n.nodeType === 1 && n.hasAttribute && n.hasAttribute('data-cms-editable')) { et = n; break; }\n                  }\n                  if (!et) et = e.target.closest && e.target.closest('[data-cms-editable]');\n\n                  if (et) {\n                    if (window.parent && window.parent !== window) {\n                      window.parent.postMessage({\n                        type: 'cms-editable-click',\n                        blockId: et.getAttribute('data-block-id'),\n                        blockType: et.getAttribute('data-block-type'),\n                        contentPath: et.getAttribute('data-content-path')\n                      }, '*');\n                    }\n                    return;\n                  }\n\n                  var bt = e.target.closest && e.target.closest('[data-cms-block]');\n                  if (bt) {\n                    if (window.parent && window.parent !== window) {\n                      window.parent.postMessage({\n                        type: 'cms-editable-click',\n                        blockId: bt.getAttribute('data-block-id'),\n                        blockType: bt.getAttribute('data-block-type'),\n                        contentPath: null\n                      }, '*');\n                    }\n                  }\n                });\n              }\n            })();\n          `,\n        }}\n      />\n      {needsClientSideSpans && contentEntries.length > 0 ? (\n        <ClientEditableBlock\n          blockId={block.id}\n          blockType={block.type}\n          contentEntries={contentEntries}\n        >\n          {renderedComponent}\n        </ClientEditableBlock>\n      ) : (\n        renderedComponent\n      )}\n      <BlockToolbar key=\"cms-toolbar\" blockId={block.id} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["path"]}

package/dist/lib/block-toolbar.d.ts

@@ -4,10 +4,11 @@ import * as react from 'react';
  * Block Toolbar Component
  *
  * Provides move up/down and delete controls for blocks in edit mode.
- * This is a Client Component because it requires onClick handlers.
+ * Portals to document.body so it never participates in the page layout.
+ * Shown/positioned by the inline CMS script via data-block-id lookup.
  */
 declare function BlockToolbar({ blockId }: {
     blockId: string;
-}): react.JSX.Element;
+}): react.ReactPortal | null;
 
 export { BlockToolbar };

package/dist/lib/block-toolbar.js

@@ -3,79 +3,81 @@
 
 // lib/block-toolbar.tsx
 import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 function BlockToolbar({ blockId }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   const handleAction = (action) => {
-    if (typeof window !== "undefined" && window.parent && window.parent !== window) {
+    if (window.parent && window.parent !== window) {
       window.parent.postMessage({ type: "cms-block-action", action, blockId }, "*");
     }
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "cms-block-toolbar",
-      "data-cms-toolbar": "true",
-      style: { position: "absolute", zIndex: 9999 },
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            title: "Move up",
-            "aria-label": "Move up",
-            "data-action": "move-up",
-            onClick: (e) => {
-              e.stopPropagation();
-              handleAction("move-up");
-            },
-            children: /* @__PURE__ */ jsx(ChevronUp, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            title: "Move down",
-            "aria-label": "Move down",
-            "data-action": "move-down",
-            onClick: (e) => {
-              e.stopPropagation();
-              handleAction("move-down");
-            },
-            children: /* @__PURE__ */ jsx(ChevronDown, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            title: "Add block",
-            "aria-label": "Add block",
-            "data-action": "add-block",
-            onClick: (e) => {
-              e.stopPropagation();
-              handleAction("add-block");
-            },
-            children: /* @__PURE__ */ jsx(Plus, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "delete",
-            title: "Delete block",
-            "aria-label": "Delete block",
-            "data-action": "delete",
-            onClick: (e) => {
-              e.stopPropagation();
-              handleAction("delete");
-            },
-            children: /* @__PURE__ */ jsx(Trash2, {})
-          }
-        )
-      ]
-    }
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "cms-block-toolbar", "data-cms-toolbar": "true", "data-block-id": blockId, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: "Move up",
+          "aria-label": "Move up",
+          "data-action": "move-up",
+          onClick: (e) => {
+            e.stopPropagation();
+            handleAction("move-up");
+          },
+          children: /* @__PURE__ */ jsx(ChevronUp, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: "Move down",
+          "aria-label": "Move down",
+          "data-action": "move-down",
+          onClick: (e) => {
+            e.stopPropagation();
+            handleAction("move-down");
+          },
+          children: /* @__PURE__ */ jsx(ChevronDown, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: "Add block",
+          "aria-label": "Add block",
+          "data-action": "add-block",
+          onClick: (e) => {
+            e.stopPropagation();
+            handleAction("add-block");
+          },
+          children: /* @__PURE__ */ jsx(Plus, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "delete",
+          title: "Delete block",
+          "aria-label": "Delete block",
+          "data-action": "delete",
+          onClick: (e) => {
+            e.stopPropagation();
+            handleAction("delete");
+          },
+          children: /* @__PURE__ */ jsx(Trash2, {})
+        }
+      )
+    ] }),
+    document.body
   );
 }
 export {

package/dist/lib/block-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/block-toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, ChevronUp, Plus, Trash2 } from 'lucide-react';\n\n/**\n * Block Toolbar Component\n *\n * Provides move up/down and delete controls for blocks in edit mode.\n * This is a Client Component because it requires onClick handlers.\n */\n\nexport function BlockToolbar({ blockId }: { blockId: string }) {\n  const handleAction = (action: string) => {\n    if (typeof window !== 'undefined' && window.parent && window.parent !== window) {\n      window.parent.postMessage({ type: 'cms-block-action', action, blockId }, '*');\n    }\n  };\n\n  return (\n    <div\n      className=\"cms-block-toolbar\"\n      data-cms-toolbar=\"true\"\n      style={{ position: 'absolute', zIndex: 9999 }}\n    >\n      <button\n        type=\"button\"\n        title=\"Move up\"\n        aria-label=\"Move up\"\n        data-action=\"move-up\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-up');\n        }}\n      >\n        <ChevronUp />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Move down\"\n        aria-label=\"Move down\"\n        data-action=\"move-down\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-down');\n        }}\n      >\n        <ChevronDown />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Add block\"\n        aria-label=\"Add block\"\n        data-action=\"add-block\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('add-block');\n        }}\n      >\n        <Plus />\n      </button>\n      <button\n        type=\"button\"\n        className=\"delete\"\n        title=\"Delete block\"\n        aria-label=\"Delete block\"\n        data-action=\"delete\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('delete');\n        }}\n      >\n        <Trash2 />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;AAEA,SAAS,aAAa,WAAW,MAAM,cAAc;AAiBjD,SAeI,KAfJ;AARG,SAAS,aAAa,EAAE,QAAQ,GAAwB;AAC7D,QAAM,eAAe,CAAC,WAAmB;AACvC,QAAI,OAAO,WAAW,eAAe,OAAO,UAAU,OAAO,WAAW,QAAQ;AAC9E,aAAO,OAAO,YAAY,EAAE,MAAM,oBAAoB,QAAQ,QAAQ,GAAG,GAAG;AAAA,IAC9E;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,oBAAiB;AAAA,MACjB,OAAO,EAAE,UAAU,YAAY,QAAQ,KAAK;AAAA,MAE5C;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAM;AAAA,YACN,cAAW;AAAA,YACX,eAAY;AAAA,YACZ,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAgB;AAClB,2BAAa,SAAS;AAAA,YACxB;AAAA,YAEA,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAM;AAAA,YACN,cAAW;AAAA,YACX,eAAY;AAAA,YACZ,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAgB;AAClB,2BAAa,WAAW;AAAA,YAC1B;AAAA,YAEA,8BAAC,eAAY;AAAA;AAAA,QACf;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAM;AAAA,YACN,cAAW;AAAA,YACX,eAAY;AAAA,YACZ,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAgB;AAClB,2BAAa,WAAW;AAAA,YAC1B;AAAA,YAEA,8BAAC,QAAK;AAAA;AAAA,QACR;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OAAM;AAAA,YACN,cAAW;AAAA,YACX,eAAY;AAAA,YACZ,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAgB;AAClB,2BAAa,QAAQ;AAAA,YACvB;AAAA,YAEA,8BAAC,UAAO;AAAA;AAAA,QACV;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../lib/block-toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, ChevronUp, Plus, Trash2 } from 'lucide-react';\nimport { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\n/**\n * Block Toolbar Component\n *\n * Provides move up/down and delete controls for blocks in edit mode.\n * Portals to document.body so it never participates in the page layout.\n * Shown/positioned by the inline CMS script via data-block-id lookup.\n */\n\nexport function BlockToolbar({ blockId }: { blockId: string }) {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const handleAction = (action: string) => {\n    if (window.parent && window.parent !== window) {\n      window.parent.postMessage({ type: 'cms-block-action', action, blockId }, '*');\n    }\n  };\n\n  if (!mounted) return null;\n\n  return createPortal(\n    <div className=\"cms-block-toolbar\" data-cms-toolbar=\"true\" data-block-id={blockId}>\n      <button\n        type=\"button\"\n        title=\"Move up\"\n        aria-label=\"Move up\"\n        data-action=\"move-up\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-up');\n        }}\n      >\n        <ChevronUp />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Move down\"\n        aria-label=\"Move down\"\n        data-action=\"move-down\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('move-down');\n        }}\n      >\n        <ChevronDown />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Add block\"\n        aria-label=\"Add block\"\n        data-action=\"add-block\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('add-block');\n        }}\n      >\n        <Plus />\n      </button>\n      <button\n        type=\"button\"\n        className=\"delete\"\n        title=\"Delete block\"\n        aria-label=\"Delete block\"\n        data-action=\"delete\"\n        onClick={(e) => {\n          e.stopPropagation();\n          handleAction('delete');\n        }}\n      >\n        <Trash2 />\n      </button>\n    </div>,\n    document.body\n  );\n}\n"],"mappings":";;;;AAEA,SAAS,aAAa,WAAW,MAAM,cAAc;AACrD,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AA0BzB,SAWI,KAXJ;AAhBG,SAAS,aAAa,EAAE,QAAQ,GAAwB;AAC7D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,CAAC,WAAmB;AACvC,QAAI,OAAO,UAAU,OAAO,WAAW,QAAQ;AAC7C,aAAO,OAAO,YAAY,EAAE,MAAM,oBAAoB,QAAQ,QAAQ,GAAG,GAAG;AAAA,IAC9E;AAAA,EACF;AAEA,MAAI,CAAC,QAAS,QAAO;AAErB,SAAO;AAAA,IACL,qBAAC,SAAI,WAAU,qBAAoB,oBAAiB,QAAO,iBAAe,SACxE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,cAAW;AAAA,UACX,eAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,SAAS;AAAA,UACxB;AAAA,UAEA,8BAAC,aAAU;AAAA;AAAA,MACb;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,cAAW;AAAA,UACX,eAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,WAAW;AAAA,UAC1B;AAAA,UAEA,8BAAC,eAAY;AAAA;AAAA,MACf;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,cAAW;AAAA,UACX,eAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,WAAW;AAAA,UAC1B;AAAA,UAEA,8BAAC,QAAK;AAAA;AAAA,MACR;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAM;AAAA,UACN,cAAW;AAAA,UACX,eAAY;AAAA,UACZ,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,yBAAa,QAAQ;AAAA,UACvB;AAAA,UAEA,8BAAC,UAAO;AAAA;AAAA,MACV;AAAA,OACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/lib/client-editable-block.js

@@ -86,7 +86,7 @@ function ClientEditableBlock({
       observerRef.current = null;
     };
   }, [injectSpans]);
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, children });
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { display: "contents" }, children });
 }
 export {
   ClientEditableBlock

package/dist/lib/client-editable-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../lib/client-editable-block.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useLayoutEffect, useRef } from 'react';\n\ninterface ContentEntry {\n  v: string;\n  p: string;\n}\n\ninterface ClientEditableBlockProps {\n  blockId: string;\n  blockType: string;\n  contentEntries: ContentEntry[];\n  children: React.ReactNode;\n}\n\n/**\n * Client-side span injector for blocks whose components use React hooks\n * and therefore can't be walked server-side.\n *\n * Uses a MutationObserver to re-inject [data-cms-editable] spans after every\n * React commit (including state-driven re-renders like animations), so the\n * overlays survive React's reconciliation.\n */\nexport function ClientEditableBlock({\n  blockId,\n  blockType,\n  contentEntries,\n  children,\n}: ClientEditableBlockProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const observerRef = useRef<MutationObserver | null>(null);\n  const isInjectingRef = useRef(false);\n\n  const injectSpans = useCallback(() => {\n    if (isInjectingRef.current) return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    isInjectingRef.current = true;\n    // Disconnect observer while we mutate the DOM to avoid re-entrant calls.\n    observerRef.current?.disconnect();\n\n    try {\n      // Remove previously injected text-level spans, restoring the original text nodes.\n      const existing = Array.from(\n        container.querySelectorAll<HTMLElement>('span[data-cms-editable][data-content-path]')\n      );\n      for (const span of existing) {\n        const parent = span.parentNode;\n        if (!parent) continue;\n        while (span.firstChild) parent.insertBefore(span.firstChild, span);\n        parent.removeChild(span);\n      }\n\n      // Walk all visible text nodes and wrap the ones that match content values.\n      const used = new Set<string>();\n      const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);\n      const textNodes: Text[] = [];\n      let n = walker.nextNode();\n      while (n !== null) {\n        const textNode = n as Text;\n        if (\n          textNode.parentElement?.closest('.cms-block-toolbar') == null &&\n          textNode.nodeValue?.trim()\n        ) {\n          textNodes.push(textNode);\n        }\n        n = walker.nextNode();\n      }\n\n      for (const textNode of textNodes) {\n        const text = textNode.nodeValue;\n        if (!text) continue;\n        for (const entry of contentEntries) {\n          if (used.has(entry.p)) continue;\n          if (text.indexOf(entry.v) !== -1 && text.trim() === entry.v.trim()) {\n            used.add(entry.p);\n            const span = document.createElement('span');\n            span.setAttribute('data-cms-editable', '');\n            span.setAttribute('data-block-id', blockId);\n            span.setAttribute('data-block-type', blockType);\n            span.setAttribute('data-content-path', entry.p);\n            textNode.parentNode?.insertBefore(span, textNode);\n            span.appendChild(textNode);\n            break;\n          }\n        }\n      }\n    } finally {\n      isInjectingRef.current = false;\n      // Reconnect after our mutations are done.\n      const current = containerRef.current;\n      if (current && observerRef.current) {\n        observerRef.current.observe(current, {\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n      }\n    }\n  }, [blockId, blockType, contentEntries]);\n\n  useLayoutEffect(() => {\n    // Initial injection after React's first commit.\n    injectSpans();\n\n    // Re-inject whenever the child component mutates the DOM\n    // (e.g. animated state changes that swap visible elements).\n    const observer = new MutationObserver(injectSpans);\n    observerRef.current = observer;\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n\n    return () => {\n      observer.disconnect();\n      observerRef.current = null;\n    };\n  }, [injectSpans]);\n\n  return <div ref={containerRef}>{children}</div>;\n}\n"],"mappings":";;;;AAEA,SAAS,aAAa,iBAAiB,cAAc;AA4H5C;AAtGF,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,cAAc,OAAgC,IAAI;AACxD,QAAM,iBAAiB,OAAO,KAAK;AAEnC,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,eAAe,QAAS;AAC5B,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,mBAAe,UAAU;AAEzB,gBAAY,SAAS,WAAW;AAEhC,QAAI;AAEF,YAAM,WAAW,MAAM;AAAA,QACrB,UAAU,iBAA8B,4CAA4C;AAAA,MACtF;AACA,iBAAW,QAAQ,UAAU;AAC3B,cAAM,SAAS,KAAK;AACpB,YAAI,CAAC,OAAQ;AACb,eAAO,KAAK,WAAY,QAAO,aAAa,KAAK,YAAY,IAAI;AACjE,eAAO,YAAY,IAAI;AAAA,MACzB;AAGA,YAAM,OAAO,oBAAI,IAAY;AAC7B,YAAM,SAAS,SAAS,iBAAiB,WAAW,WAAW,WAAW,IAAI;AAC9E,YAAM,YAAoB,CAAC;AAC3B,UAAI,IAAI,OAAO,SAAS;AACxB,aAAO,MAAM,MAAM;AACjB,cAAM,WAAW;AACjB,YACE,SAAS,eAAe,QAAQ,oBAAoB,KAAK,QACzD,SAAS,WAAW,KAAK,GACzB;AACA,oBAAU,KAAK,QAAQ;AAAA,QACzB;AACA,YAAI,OAAO,SAAS;AAAA,MACtB;AAEA,iBAAW,YAAY,WAAW;AAChC,cAAM,OAAO,SAAS;AACtB,YAAI,CAAC,KAAM;AACX,mBAAW,SAAS,gBAAgB;AAClC,cAAI,KAAK,IAAI,MAAM,CAAC,EAAG;AACvB,cAAI,KAAK,QAAQ,MAAM,CAAC,MAAM,MAAM,KAAK,KAAK,MAAM,MAAM,EAAE,KAAK,GAAG;AAClE,iBAAK,IAAI,MAAM,CAAC;AAChB,kBAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,iBAAK,aAAa,qBAAqB,EAAE;AACzC,iBAAK,aAAa,iBAAiB,OAAO;AAC1C,iBAAK,aAAa,mBAAmB,SAAS;AAC9C,iBAAK,aAAa,qBAAqB,MAAM,CAAC;AAC9C,qBAAS,YAAY,aAAa,MAAM,QAAQ;AAChD,iBAAK,YAAY,QAAQ;AACzB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,UAAE;AACA,qBAAe,UAAU;AAEzB,YAAM,UAAU,aAAa;AAC7B,UAAI,WAAW,YAAY,SAAS;AAClC,oBAAY,QAAQ,QAAQ,SAAS;AAAA,UACnC,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,WAAW,cAAc,CAAC;AAEvC,kBAAgB,MAAM;AAEpB,gBAAY;AAIZ,UAAM,WAAW,IAAI,iBAAiB,WAAW;AACjD,gBAAY,UAAU;AAEtB,QAAI,aAAa,SAAS;AACxB,eAAS,QAAQ,aAAa,SAAS;AAAA,QACrC,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAe;AAAA,MACjB,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO,oBAAC,SAAI,KAAK,cAAe,UAAS;AAC3C;","names":[]}
+{"version":3,"sources":["../../lib/client-editable-block.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useLayoutEffect, useRef } from 'react';\n\ninterface ContentEntry {\n  v: string;\n  p: string;\n}\n\ninterface ClientEditableBlockProps {\n  blockId: string;\n  blockType: string;\n  contentEntries: ContentEntry[];\n  children: React.ReactNode;\n}\n\n/**\n * Client-side span injector for blocks whose components use React hooks\n * and therefore can't be walked server-side.\n *\n * Uses a MutationObserver to re-inject [data-cms-editable] spans after every\n * React commit (including state-driven re-renders like animations), so the\n * overlays survive React's reconciliation.\n */\nexport function ClientEditableBlock({\n  blockId,\n  blockType,\n  contentEntries,\n  children,\n}: ClientEditableBlockProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const observerRef = useRef<MutationObserver | null>(null);\n  const isInjectingRef = useRef(false);\n\n  const injectSpans = useCallback(() => {\n    if (isInjectingRef.current) return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    isInjectingRef.current = true;\n    // Disconnect observer while we mutate the DOM to avoid re-entrant calls.\n    observerRef.current?.disconnect();\n\n    try {\n      // Remove previously injected text-level spans, restoring the original text nodes.\n      const existing = Array.from(\n        container.querySelectorAll<HTMLElement>('span[data-cms-editable][data-content-path]')\n      );\n      for (const span of existing) {\n        const parent = span.parentNode;\n        if (!parent) continue;\n        while (span.firstChild) parent.insertBefore(span.firstChild, span);\n        parent.removeChild(span);\n      }\n\n      // Walk all visible text nodes and wrap the ones that match content values.\n      const used = new Set<string>();\n      const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);\n      const textNodes: Text[] = [];\n      let n = walker.nextNode();\n      while (n !== null) {\n        const textNode = n as Text;\n        if (\n          textNode.parentElement?.closest('.cms-block-toolbar') == null &&\n          textNode.nodeValue?.trim()\n        ) {\n          textNodes.push(textNode);\n        }\n        n = walker.nextNode();\n      }\n\n      for (const textNode of textNodes) {\n        const text = textNode.nodeValue;\n        if (!text) continue;\n        for (const entry of contentEntries) {\n          if (used.has(entry.p)) continue;\n          if (text.indexOf(entry.v) !== -1 && text.trim() === entry.v.trim()) {\n            used.add(entry.p);\n            const span = document.createElement('span');\n            span.setAttribute('data-cms-editable', '');\n            span.setAttribute('data-block-id', blockId);\n            span.setAttribute('data-block-type', blockType);\n            span.setAttribute('data-content-path', entry.p);\n            textNode.parentNode?.insertBefore(span, textNode);\n            span.appendChild(textNode);\n            break;\n          }\n        }\n      }\n    } finally {\n      isInjectingRef.current = false;\n      // Reconnect after our mutations are done.\n      const current = containerRef.current;\n      if (current && observerRef.current) {\n        observerRef.current.observe(current, {\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n      }\n    }\n  }, [blockId, blockType, contentEntries]);\n\n  useLayoutEffect(() => {\n    // Initial injection after React's first commit.\n    injectSpans();\n\n    // Re-inject whenever the child component mutates the DOM\n    // (e.g. animated state changes that swap visible elements).\n    const observer = new MutationObserver(injectSpans);\n    observerRef.current = observer;\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n\n    return () => {\n      observer.disconnect();\n      observerRef.current = null;\n    };\n  }, [injectSpans]);\n\n  return (\n    <div ref={containerRef} style={{ display: 'contents' }}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAEA,SAAS,aAAa,iBAAiB,cAAc;AA6HjD;AAvGG,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,cAAc,OAAgC,IAAI;AACxD,QAAM,iBAAiB,OAAO,KAAK;AAEnC,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,eAAe,QAAS;AAC5B,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,mBAAe,UAAU;AAEzB,gBAAY,SAAS,WAAW;AAEhC,QAAI;AAEF,YAAM,WAAW,MAAM;AAAA,QACrB,UAAU,iBAA8B,4CAA4C;AAAA,MACtF;AACA,iBAAW,QAAQ,UAAU;AAC3B,cAAM,SAAS,KAAK;AACpB,YAAI,CAAC,OAAQ;AACb,eAAO,KAAK,WAAY,QAAO,aAAa,KAAK,YAAY,IAAI;AACjE,eAAO,YAAY,IAAI;AAAA,MACzB;AAGA,YAAM,OAAO,oBAAI,IAAY;AAC7B,YAAM,SAAS,SAAS,iBAAiB,WAAW,WAAW,WAAW,IAAI;AAC9E,YAAM,YAAoB,CAAC;AAC3B,UAAI,IAAI,OAAO,SAAS;AACxB,aAAO,MAAM,MAAM;AACjB,cAAM,WAAW;AACjB,YACE,SAAS,eAAe,QAAQ,oBAAoB,KAAK,QACzD,SAAS,WAAW,KAAK,GACzB;AACA,oBAAU,KAAK,QAAQ;AAAA,QACzB;AACA,YAAI,OAAO,SAAS;AAAA,MACtB;AAEA,iBAAW,YAAY,WAAW;AAChC,cAAM,OAAO,SAAS;AACtB,YAAI,CAAC,KAAM;AACX,mBAAW,SAAS,gBAAgB;AAClC,cAAI,KAAK,IAAI,MAAM,CAAC,EAAG;AACvB,cAAI,KAAK,QAAQ,MAAM,CAAC,MAAM,MAAM,KAAK,KAAK,MAAM,MAAM,EAAE,KAAK,GAAG;AAClE,iBAAK,IAAI,MAAM,CAAC;AAChB,kBAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,iBAAK,aAAa,qBAAqB,EAAE;AACzC,iBAAK,aAAa,iBAAiB,OAAO;AAC1C,iBAAK,aAAa,mBAAmB,SAAS;AAC9C,iBAAK,aAAa,qBAAqB,MAAM,CAAC;AAC9C,qBAAS,YAAY,aAAa,MAAM,QAAQ;AAChD,iBAAK,YAAY,QAAQ;AACzB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,UAAE;AACA,qBAAe,UAAU;AAEzB,YAAM,UAAU,aAAa;AAC7B,UAAI,WAAW,YAAY,SAAS;AAClC,oBAAY,QAAQ,QAAQ,SAAS;AAAA,UACnC,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,WAAW,cAAc,CAAC;AAEvC,kBAAgB,MAAM;AAEpB,gBAAY;AAIZ,UAAM,WAAW,IAAI,iBAAiB,WAAW;AACjD,gBAAY,UAAU;AAEtB,QAAI,aAAa,SAAS;AACxB,eAAS,QAAQ,aAAa,SAAS;AAAA,QACrC,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAe;AAAA,MACjB,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,eAAS,WAAW;AACpB,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,oBAAC,SAAI,KAAK,cAAc,OAAO,EAAE,SAAS,WAAW,GAClD,UACH;AAEJ;","names":[]}

package/dist/lib/renderer.js

@@ -429,28 +429,18 @@ function BlockRenderer({
       "data-cms-block": true,
       "data-block-id": block.id,
       "data-block-type": block.type,
-      style: { position: "relative" },
+      style: { display: "contents" },
       children: [
         /* @__PURE__ */ jsx("style", { children: `
         [data-cms-block] {
-          position: relative;
-        }
-        [data-cms-block]:hover {
-          outline: 2px solid #3b82f6;
-          outline-offset: 4px;
+          display: contents;
         }
         [data-cms-editable] {
+          display: contents;
           cursor: pointer;
-          border-radius: 2px;
-        }
-        [data-cms-editable]:hover {
-          outline: 2px solid #3b82f6;
-          outline-offset: 2px;
         }
         .cms-block-toolbar {
-          position: absolute;
-          bottom: 8px;
-          left: 50%;
+          position: fixed;
           transform: translateX(-50%);
           display: flex;
           gap: 4px;
@@ -461,11 +451,7 @@ function BlockRenderer({
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.15s ease;
-          z-index: 1000;
-        }
-        [data-cms-block]:hover .cms-block-toolbar {
-          opacity: 1;
-          pointer-events: auto;
+          z-index: 9999;
         }
         .cms-block-toolbar button {
           display: flex;
@@ -509,34 +495,70 @@ function BlockRenderer({
             (function() {
               if (!window.__cmsEditableInitialized) {
                 window.__cmsEditableInitialized = true;
+                var _ab = null;
+
+                function _tb(bid) {
+                  return document.querySelector('.cms-block-toolbar[data-block-id="' + bid + '"]');
+                }
+
+                function _show(bid, target) {
+                  var tb = _tb(bid);
+                  if (tb && target) {
+                    var r = target.getBoundingClientRect();
+                    tb.style.left = Math.round(r.left + r.width / 2) + 'px';
+                    tb.style.top = Math.round(r.bottom + 8) + 'px';
+                    tb.style.opacity = '1';
+                    tb.style.pointerEvents = 'auto';
+                  }
+                }
+
+                function _hide(bid) {
+                  var tb = _tb(bid);
+                  if (tb) { tb.style.opacity = '0'; tb.style.pointerEvents = 'none'; }
+                }
+
+                document.addEventListener('mouseover', function(e) {
+                  if (e.target.closest('.cms-block-toolbar')) return;
+                  var bel = e.target.closest('[data-cms-block]');
+                  var bid = bel ? bel.getAttribute('data-block-id') : null;
+                  if (bid === _ab) return;
+                  if (_ab) _hide(_ab);
+                  _ab = bid;
+                  if (bid) _show(bid, e.target);
+                });
 
                 document.addEventListener('click', function(e) {
                   if (e.target.closest('.cms-block-toolbar')) return;
 
-                  var editableTarget = e.target.closest('[data-cms-editable]');
-                  if (editableTarget) {
-                    var message = {
-                      type: 'cms-editable-click',
-                      blockId: editableTarget.getAttribute('data-block-id'),
-                      blockType: editableTarget.getAttribute('data-block-type'),
-                      contentPath: editableTarget.getAttribute('data-content-path')
-                    };
+                  var path = e.composedPath ? e.composedPath() : [e.target];
+                  var et = null;
+                  for (var i = 0; i < path.length; i++) {
+                    var n = path[i];
+                    if (n.nodeType === 1 && n.hasAttribute && n.hasAttribute('data-cms-editable')) { et = n; break; }
+                  }
+                  if (!et) et = e.target.closest && e.target.closest('[data-cms-editable]');
+
+                  if (et) {
                     if (window.parent && window.parent !== window) {
-                      window.parent.postMessage(message, '*');
+                      window.parent.postMessage({
+                        type: 'cms-editable-click',
+                        blockId: et.getAttribute('data-block-id'),
+                        blockType: et.getAttribute('data-block-type'),
+                        contentPath: et.getAttribute('data-content-path')
+                      }, '*');
                     }
                     return;
                   }
 
-                  var blockTarget = e.target.closest('[data-cms-block]');
-                  if (blockTarget) {
-                    var message = {
-                      type: 'cms-editable-click',
-                      blockId: blockTarget.getAttribute('data-block-id'),
-                      blockType: blockTarget.getAttribute('data-block-type'),
-                      contentPath: null
-                    };
+                  var bt = e.target.closest && e.target.closest('[data-cms-block]');
+                  if (bt) {
                     if (window.parent && window.parent !== window) {
-                      window.parent.postMessage(message, '*');
+                      window.parent.postMessage({
+                        type: 'cms-editable-click',
+                        blockId: bt.getAttribute('data-block-id'),
+                        blockType: bt.getAttribute('data-block-type'),
+                        contentPath: null
+                      }, '*');
                     }
                   }
                 });