cms-renderer 0.6.13 → 0.8.0

package/README.md

@@ -31,6 +31,7 @@ Main entry points:
 - `cms-renderer/lib/custom-schemas` for fetching custom component metadata and generating Zod code
 - `cms-renderer/lib/docs-markdown` and `cms-renderer/styles/docs-markdown.css` for docs markdown rendering
 - `cms-renderer/lib/refresher` for client-side refresh on CMS updates
+- `cms-renderer/lib/ai-preview` for headless AI preview rendering
 
 Additional utility exports:
 
@@ -232,6 +233,36 @@ Also exported:
 - `fetchCustomSchemaFields(options, schemaName)`
 - `buildZodSchemas(schemas)`
 
+## Headless AI Preview
+
+`renderParametricRoute` supports an `ai_preview=<n>` query param that pulls AI-generated block variants from the CMS API. When you want to render preview content **headlessly** — you already have the block content in hand (from a generation webhook, an agent, your own preview endpoint) and don't want a CMS round-trip, query params, or edit-mode overlays — use `aiPreview` from `cms-renderer/lib/ai-preview`.
+
+It dispatches through the same component registry as the catch-all route, so previews match production exactly.
+
+```tsx
+import { aiPreview } from 'cms-renderer/lib/ai-preview';
+import type { BlockComponentRegistry } from 'cms-renderer/lib/types';
+import HeroBlock from '@/components/HeroBlock';
+
+const registry: Partial<BlockComponentRegistry> = {
+  'hero-block': HeroBlock,
+};
+
+// `blocks` is content you already have — e.g. the JSON an agent generated.
+export default function AiPreviewPage({ blocks }) {
+  return aiPreview(blocks, { registry });
+}
+```
+
+`aiPreview(content, options)`:
+
+- `content` — a single block or an array of blocks, each shaped as `{ id?, type, content }`. `type` selects the component from the registry; `content` is passed straight to it. `id` defaults to the block's index.
+- `options.registry` — your `BlockComponentRegistry` (required).
+- `options.routeParams` — optional resolved route params, exposed to components as `routeParams`.
+- `options.path` — optional current path, enabling path-namespaced registry keys like `"/{lang}/blog ArticleBlock"`.
+
+Edit overlays are always disabled and nothing is fetched, so the output is plain, public-shaped markup. Unknown block types are skipped (with a development-only warning).
+
 ## Docs Markdown
 
 `cms-renderer` includes a docs-oriented markdown boundary for starter apps and docs sites.

package/dist/lib/ai-preview.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { BlockComponentRegistry, ResolvedRouteParams } from './types.js';
+import '@repo/cms-schema/blocks';
+
+/**
+ * Headless AI preview rendering for Profound CMS.
+ *
+ * `aiPreview` renders CMS block content to a React tree using your component
+ * registry, without any CMS fetch, query params, or edit-mode overlays. Use it
+ * when you already have AI-generated (or otherwise resolved) block content in
+ * hand — for example from a generation webhook, an agent, or your own preview
+ * endpoint — and want to render a headless preview of it.
+ *
+ * This is the programmatic counterpart to the `ai_preview` query param handled
+ * by `renderParametricRoute`: same registry-based dispatch, but you supply the
+ * content instead of the CMS API.
+ */
+
+/**
+ * A single block of preview content. `type` selects the component from the
+ * registry; `content` is passed straight to that component.
+ */
+type AiPreviewBlock = {
+    /** Stable id used as the React key. Defaults to the block's index. */
+    id?: string;
+    /** Block type / schema name. Maps to a component in the registry. */
+    type: string;
+    /** Block content passed to the resolved component. */
+    content: Record<string, unknown>;
+};
+type AiPreviewOptions = {
+    /** Component registry mapping block types to React components. */
+    registry: Partial<BlockComponentRegistry>;
+    /** Resolved route parameters, exposed to components as `routeParams`. */
+    routeParams?: ResolvedRouteParams;
+    /**
+     * Current path. Enables path-namespaced component lookup, where registry
+     * keys like `"/{lang}/blog ArticleBlock"` are matched against this path.
+     */
+    path?: string;
+};
+/**
+ * Renders one or more AI-preview blocks headlessly.
+ *
+ * Components are resolved from `registry` exactly as in the catch-all route,
+ * but nothing is fetched and edit overlays are always disabled — the output is
+ * plain, public-shaped markup. Unknown block types are skipped (a warning is
+ * logged in development).
+ *
+ * @example
+ * ```tsx
+ * import { aiPreview } from 'cms-renderer/lib/ai-preview';
+ * import HeroBlock from '@/components/HeroBlock';
+ *
+ * export default function PreviewPage({ blocks }) {
+ *   return aiPreview(blocks, { registry: { 'hero-block': HeroBlock } });
+ * }
+ * ```
+ */
+declare function aiPreview(content: AiPreviewBlock | AiPreviewBlock[], { registry, routeParams, path }: AiPreviewOptions): ReactNode;
+
+export { type AiPreviewBlock, type AiPreviewOptions, aiPreview };

package/dist/lib/ai-preview.js

@@ -0,0 +1,114 @@
+// lib/block-renderer.tsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function extractContentValues(content, basePath = []) {
+  const map = /* @__PURE__ */ new Map();
+  function walk(obj, path) {
+    if (typeof obj === "string" && obj.trim() !== "") {
+      const contentPath = path.join(".");
+      const existing = map.get(obj) || [];
+      existing.push({ contentPath, value: obj });
+      map.set(obj, existing);
+    } else if (Array.isArray(obj)) {
+      for (let index = 0; index < obj.length; index++) {
+        walk(obj[index], [...path, String(index)]);
+      }
+    } else if (obj && typeof obj === "object") {
+      for (const [key, value] of Object.entries(obj)) {
+        walk(value, [...path, key]);
+      }
+    }
+  }
+  walk(content, basePath);
+  return map;
+}
+function pathMatchesPattern(path, pattern) {
+  const pathSegs = path.split("/").filter(Boolean);
+  const patternSegs = pattern.split("/").filter(Boolean);
+  if (pathSegs.length !== patternSegs.length) return false;
+  for (let i = 0; i < patternSegs.length; i++) {
+    const seg = patternSegs[i];
+    if (!seg) return false;
+    if (seg.startsWith("{") && seg.endsWith("}") || seg.startsWith("(") && seg.endsWith(")")) {
+      continue;
+    }
+    if (seg !== pathSegs[i]) return false;
+  }
+  return true;
+}
+function resolveComponent(registry, blockType, path) {
+  if (path) {
+    for (const key of Object.keys(registry)) {
+      if (!key.startsWith("/")) continue;
+      const spaceIdx = key.indexOf(" ");
+      if (spaceIdx === -1) continue;
+      const pathPattern = key.slice(0, spaceIdx);
+      const registeredType = key.slice(spaceIdx + 1);
+      if (registeredType !== blockType) continue;
+      if (pathMatchesPattern(path, pathPattern)) {
+        return registry[key];
+      }
+    }
+  }
+  return registry[blockType];
+}
+function BlockRenderer({
+  block,
+  registry,
+  disableEditable,
+  enableContentEditable,
+  routeParams,
+  path
+}) {
+  const Component = resolveComponent(registry, block.type, path);
+  if (!Component) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(`[BlockRenderer] Unknown block type: ${block.type}`);
+    }
+    return null;
+  }
+  const language = routeParams ? Object.values(routeParams).find((p) => p.schemaName === "language")?.value : void 0;
+  const component = /* @__PURE__ */ jsx(Component, { content: block.content, routeParams, language, path });
+  if (disableEditable) {
+    return component;
+  }
+  const contentEntries = enableContentEditable ? [...extractContentValues(block.content).values()].flat().map(({ value, contentPath }) => ({ v: value, p: contentPath })) : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-cms-sentinel": "",
+        "data-block-id": block.id,
+        "data-block-type": block.type,
+        "data-content-entries": contentEntries ? JSON.stringify(contentEntries) : void 0,
+        style: { display: "none" },
+        "aria-hidden": "true"
+      }
+    ),
+    component
+  ] });
+}
+
+// lib/ai-preview.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+function aiPreview(content, { registry, routeParams, path }) {
+  const blocks = Array.isArray(content) ? content : [content];
+  return /* @__PURE__ */ jsx2(Fragment2, { children: blocks.map((block, index) => {
+    const id = block.id ?? String(index);
+    return /* @__PURE__ */ jsx2(
+      BlockRenderer,
+      {
+        block: { id, type: block.type, content: block.content },
+        registry,
+        disableEditable: true,
+        routeParams,
+        path
+      },
+      id
+    );
+  }) });
+}
+export {
+  aiPreview
+};
+//# sourceMappingURL=ai-preview.js.map

package/dist/lib/ai-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../lib/block-renderer.tsx","../../lib/ai-preview.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 { generateCmsOverlayScript } from './cms-overlay-script';\nimport { getCmsParentTargetOrigin } from './cms-post-message';\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  inSvg?: boolean;\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    inSvg?: boolean;\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, inSvg: ctx.inSvg })\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        inSvg: ctx.inSvg,\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    // Track SVG context so we never inject <span> inside SVG subtrees\n    const nextInSvg = ctx.inSvg || el.type === 'svg';\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            inSvg: nextInSvg,\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 */\nexport function 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// CmsEditableInit — render once per page in edit mode\n// -----------------------------------------------------------------------------\n\n/**\n * Renders the shared CMS edit-mode styles and click-routing script.\n * Place this once at the top of your page when edit_mode is active.\n */\nexport function CmsEditableInit({\n  cmsUrl,\n  cmsParentOrigin,\n}: {\n  cmsUrl?: string;\n  /** Admin window origin when proxied (from ?cms_parent_origin=). */\n  cmsParentOrigin?: string;\n}) {\n  const targetOrigin = getCmsParentTargetOrigin(cmsUrl, cmsParentOrigin) ?? '';\n\n  return (\n    <script\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: Inline script for CMS overlay functionality\n      dangerouslySetInnerHTML={{\n        __html: generateCmsOverlayScript(targetOrigin),\n      }}\n    />\n  );\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   * If true, wraps matched text nodes in contentEditable CMS spans.\n   */\n  enableContentEditable?: 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 */\nexport function 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 */\nexport function 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 * 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 * In editable mode, renders a hidden sentinel before the component. The shared\n * CMS overlay script uses that sentinel to stamp attributes on the component's\n * root element without adding a layout-affecting wrapper.\n */\nexport function BlockRenderer({\n  block,\n  registry,\n  disableEditable,\n  enableContentEditable,\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  // Extract language code from route params if any param is bound to the language schema.\n  const language = routeParams\n    ? Object.values(routeParams).find((p) => p.schemaName === 'language')?.value\n    : undefined;\n\n  const component = (\n    <Component content={block.content} routeParams={routeParams} language={language} path={path} />\n  );\n\n  if (disableEditable) {\n    return component;\n  }\n\n  const contentEntries = enableContentEditable\n    ? [...extractContentValues(block.content as Record<string, unknown>).values()]\n        .flat()\n        .map(({ value, contentPath }) => ({ v: value, p: contentPath }))\n    : undefined;\n\n  return (\n    <>\n      <span\n        data-cms-sentinel=\"\"\n        data-block-id={block.id}\n        data-block-type={block.type}\n        data-content-entries={contentEntries ? JSON.stringify(contentEntries) : undefined}\n        style={{ display: 'none' }}\n        aria-hidden=\"true\"\n      />\n      {component}\n    </>\n  );\n}\n","/**\n * Headless AI preview rendering for Profound CMS.\n *\n * `aiPreview` renders CMS block content to a React tree using your component\n * registry, without any CMS fetch, query params, or edit-mode overlays. Use it\n * when you already have AI-generated (or otherwise resolved) block content in\n * hand — for example from a generation webhook, an agent, or your own preview\n * endpoint — and want to render a headless preview of it.\n *\n * This is the programmatic counterpart to the `ai_preview` query param handled\n * by `renderParametricRoute`: same registry-based dispatch, but you supply the\n * content instead of the CMS API.\n */\n\nimport type { ReactNode } from 'react';\nimport { BlockRenderer } from './block-renderer';\nimport type { BlockComponentRegistry, BlockData, ResolvedRouteParams } from './types';\n\n/**\n * A single block of preview content. `type` selects the component from the\n * registry; `content` is passed straight to that component.\n */\nexport type AiPreviewBlock = {\n  /** Stable id used as the React key. Defaults to the block's index. */\n  id?: string;\n  /** Block type / schema name. Maps to a component in the registry. */\n  type: string;\n  /** Block content passed to the resolved component. */\n  content: Record<string, unknown>;\n};\n\nexport type AiPreviewOptions = {\n  /** Component registry mapping block types to React components. */\n  registry: Partial<BlockComponentRegistry>;\n  /** Resolved route parameters, exposed to components as `routeParams`. */\n  routeParams?: ResolvedRouteParams;\n  /**\n   * Current path. Enables path-namespaced component lookup, where registry\n   * keys like `\"/{lang}/blog ArticleBlock\"` are matched against this path.\n   */\n  path?: string;\n};\n\n/**\n * Renders one or more AI-preview blocks headlessly.\n *\n * Components are resolved from `registry` exactly as in the catch-all route,\n * but nothing is fetched and edit overlays are always disabled — the output is\n * plain, public-shaped markup. Unknown block types are skipped (a warning is\n * logged in development).\n *\n * @example\n * ```tsx\n * import { aiPreview } from 'cms-renderer/lib/ai-preview';\n * import HeroBlock from '@/components/HeroBlock';\n *\n * export default function PreviewPage({ blocks }) {\n *   return aiPreview(blocks, { registry: { 'hero-block': HeroBlock } });\n * }\n * ```\n */\nexport function aiPreview(\n  content: AiPreviewBlock | AiPreviewBlock[],\n  { registry, routeParams, path }: AiPreviewOptions\n): ReactNode {\n  const blocks = Array.isArray(content) ? content : [content];\n\n  return (\n    <>\n      {blocks.map((block, index) => {\n        const id = block.id ?? String(index);\n        return (\n          <BlockRenderer\n            key={id}\n            block={{ id, type: block.type, content: block.content } as BlockData}\n            registry={registry}\n            disableEditable\n            routeParams={routeParams}\n            path={path}\n          />\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":"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","names":["Fragment","jsx"]}

package/dist/lib/block-renderer.js

@@ -21,7 +21,7 @@ function generateCmsOverlayScript(cmsParentOrigin) {
       border-radius: 2px;
     }
     [data-cms-editable]:not([data-cms-block]):hover {
-      outline: 2px solid #3b82f6;
+      outline: 2px solid var(--component-accent, #A78BFA);
       outline-offset: 2px;
     }
     #cms-overlay-root {
@@ -38,15 +38,38 @@ function generateCmsOverlayScript(cmsParentOrigin) {
     }
     .cms-block-outline {
       position: fixed;
-      border: 2px solid #3b82f6;
+      box-sizing: border-box;
+      border: 4px solid var(--component-accent, #A78BFA);
       border-radius: 4px;
       pointer-events: none;
       z-index: 99997;
       transition: all 0.15s ease;
     }
     .cms-block-outline.cms-outline-selected {
-      border-color: #2563eb;
-      border-width: 3px;
+      border-color: var(--component-accent, #A78BFA);
+      border-width: 4px;
+    }
+    .cms-block-label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: none;
+      max-width: 240px;
+      padding: 2px 8px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.4;
+      color: #fff;
+      background: var(--component-accent, #A78BFA);
+      border-radius: 4px 4px 4px 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      pointer-events: none;
+    }
+    .cms-block-label.cms-label-visible {
+      display: block;
     }
     .cms-block-cursor {
       position: fixed;
@@ -211,15 +234,19 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   cursor.className = 'cms-block-cursor';
   overlayRoot.appendChild(cursor);
 
-  var outline = document.createElement('div');
-  outline.className = 'cms-block-outline';
-  outline.style.display = 'none';
-  overlayRoot.appendChild(outline);
+  function createOutline(extraClass) {
+    var el = document.createElement('div');
+    el.className = 'cms-block-outline' + (extraClass ? ' ' + extraClass : '');
+    el.style.display = 'none';
+    var label = document.createElement('span');
+    label.className = 'cms-block-label';
+    el.appendChild(label);
+    overlayRoot.appendChild(el);
+    return el;
+  }
 
-  var selectedOutline = document.createElement('div');
-  selectedOutline.className = 'cms-block-outline cms-outline-selected';
-  selectedOutline.style.display = 'none';
-  overlayRoot.appendChild(selectedOutline);
+  var outline = createOutline();
+  var selectedOutline = createOutline('cms-outline-selected');
 
   var toolbar = document.createElement('div');
   toolbar.className = 'cms-block-toolbar';
@@ -247,35 +274,19 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   var toolbarVisible = false;
   var selectedBlockId = null;
 
-  function decoratePreviewUrl(rawHref) {
-    if (!rawHref) return rawHref;
-    try {
-      var url = new URL(rawHref, window.location.href);
-      if (url.origin !== window.location.origin) return rawHref;
-      url.searchParams.set('edit_mode', 'true');
-      if (CMS_PARENT_ORIGIN) {
-        url.searchParams.set('cms_parent_origin', CMS_PARENT_ORIGIN);
-      }
-      return url.toString();
-    } catch (_) {
-      return rawHref;
-    }
-  }
-
-  function preserveEditParamsOnNavigation(e) {
-    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-      return;
-    }
-
-    var anchor = e.target.closest('a[href]');
-    if (!anchor || (anchor.target && anchor.target !== '_self') || anchor.hasAttribute('download')) {
-      return;
-    }
-
-    var href = anchor.getAttribute('href');
-    var decorated = decoratePreviewUrl(href);
-    if (decorated && decorated !== href) {
-      anchor.setAttribute('href', decorated);
+  // In edit mode we hijack every link/button activation. Following a link or
+  // firing a button's own handler makes inline editing on that element
+  // impossible (the click navigates away or triggers an action instead of
+  // placing the caret). We block the default action and stop the event from
+  // reaching the element's own listeners, while still letting our selection /
+  // edit routing run below.
+  function blockInteractiveActivation(e) {
+    var interactive = e.target.closest(
+      'a[href], button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"]'
+    );
+    if (interactive) {
+      e.preventDefault();
+      e.stopPropagation();
     }
   }
 
@@ -295,7 +306,11 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   setTimeout(sendReadySignal, 1500);
 
   function getBlockElement(blockId) {
-    return document.querySelector('[data-block-id="' + blockId + '"]');
+    // Match the real block element, not the hidden sentinel <span> that shares
+    // the same data-block-id and precedes it in the DOM. The sentinel is
+    // display:none (a 0x0 rect), so selecting it would paint the outline at the
+    // top-left corner. Only the stamped block carries data-cms-block.
+    return document.querySelector('[data-cms-block][data-block-id="' + blockId + '"]');
   }
 
   function getAllBlocks() {
@@ -310,17 +325,38 @@ function generateCmsOverlayScript(cmsParentOrigin) {
     return -1;
   }
 
+  function formatBlockType(type) {
+    if (!type) return 'Block';
+    return type
+      .replace(/[-_]+/g, ' ')
+      .replace(/\\b\\w/g, function(c) { return c.toUpperCase(); });
+  }
+
   function updateOutline(el, outlineEl) {
+    var label = outlineEl.querySelector('.cms-block-label');
     if (!el) {
       outlineEl.style.display = 'none';
+      if (label) label.classList.remove('cms-label-visible');
       return;
     }
     var rect = el.getBoundingClientRect();
+    // A 0x0 rect means the element isn't laid out yet (or is hidden). Hide the
+    // outline instead of drawing a zero-size box with a floating label at the
+    // top-left corner.
+    if (rect.width === 0 && rect.height === 0) {
+      outlineEl.style.display = 'none';
+      if (label) label.classList.remove('cms-label-visible');
+      return;
+    }
     outlineEl.style.display = 'block';
     outlineEl.style.top = rect.top + 'px';
     outlineEl.style.left = rect.left + 'px';
     outlineEl.style.width = rect.width + 'px';
     outlineEl.style.height = rect.height + 'px';
+    if (label) {
+      label.textContent = formatBlockType(el.getAttribute('data-block-type'));
+      label.classList.add('cms-label-visible');
+    }
   }
 
   function positionToolbar(x, y) {
@@ -397,17 +433,19 @@ function generateCmsOverlayScript(cmsParentOrigin) {
   });
 
   document.addEventListener('click', function(e) {
-    preserveEditParamsOnNavigation(e);
+    // The floating toolbar is interactive (and its buttons are real <button>s);
+    // bail out before any blocking so its own handlers run.
+    if (e.target.closest('[data-cms-toolbar]')) return;
 
-    if (toolbarVisible && !e.target.closest('[data-cms-toolbar]')) {
-      var block = e.target.closest('[data-cms-block]');
-      if (!block || block.getAttribute('data-block-id') !== currentBlockId) {
+    blockInteractiveActivation(e);
+
+    if (toolbarVisible) {
+      var activeBlock = e.target.closest('[data-cms-block]');
+      if (!activeBlock || activeBlock.getAttribute('data-block-id') !== currentBlockId) {
         hideToolbar();
       }
     }
 
-    if (e.target.closest('[data-cms-toolbar]')) return;
-
     var editable = e.target.closest('[data-cms-editable]');
     if (editable) {
       postToParent({
@@ -664,7 +702,7 @@ function BlockRenderer({
     return null;
   }
   const language = routeParams ? Object.values(routeParams).find((p) => p.schemaName === "language")?.value : void 0;
-  const component = /* @__PURE__ */ jsx(Component, { content: block.content, routeParams, language });
+  const component = /* @__PURE__ */ jsx(Component, { content: block.content, routeParams, language, path });
   if (disableEditable) {
     return component;
   }