@pilotiq/tiptap 3.14.0 → 3.15.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @pilotiq/tiptap
 
+## 3.15.0
+
+### Minor Changes
+
+- c3816ae: In-block content-block controls now live behind a single **gear menu**.
+
+  Blocks with multiple variations used to scatter their controls (a width chip in one corner, a variant dropdown + color swatch + click-the-icon picker in another). They now share one consistent entry point — a gear button in the block's inline-end gutter that opens a **nested settings menu**, one submenu per setting.
+
+  - **New reusable `BlockSettingsMenu`** (replaces `BlockWidthControl`): a gear trigger + a Base UI `Menu` with a `SubmenuRoot` per setting. Two setting kinds — `select` (a radio submenu, e.g. Width / Type) and `custom` (caller-supplied submenu body, e.g. the icon grid / color swatches). The active value rides each row as a hint.
+  - **Alert** routes Width, Type, Icon (curated SVG library + Custom SVG paste), and Color (custom variant only) through the gear; the icon in column one is now static and changed from the menu.
+  - **Alert gains a `width` attr** (`contained` / `full`), mirroring the FAQ block — emitted read-side as `data-width`. To keep the gear from shifting when width changes, Alert now renders in **two layers** (same as FAQ): a full-width `.pilotiq-alert` anchor wrapping an inner `.pilotiq-alert-box` that carries the box chrome + width. Consumer CSS that targeted `.pilotiq-alert` for the box (border/background/padding/`pilotiq-alert-<type>`) should move to `.pilotiq-alert-box`; full-width is `.pilotiq-alert[data-width="full"] .pilotiq-alert-box`.
+  - **FAQ** moves its width toggle into the same gear menu.
+
+  Back-compat: node structures are unchanged; existing Alert/FAQ content loads as-is (alerts default to `contained`).
+
+- b6b28bd: The **FAQ** content block is now a collapsible **accordion**.
+
+  - **Editor:** each Q&A item is a collapsible row (a React NodeView) — the question is the always-visible trigger with a chevron, the answer folds below it. The question stays editable on click; only the chevron toggles. New `open` attr on `faqItem` (defaults open) stores per-item state.
+  - **Read-side** (`renderRichTextToHtml`): renders as native **`<details>`/`<summary>`** — a real, accessible, **zero-JS** accordion the browser collapses on its own. Each item's `open` attr drives the platform `open` attribute. Consumer owns the `.pilotiq-faq*` CSS.
+  - Dropped the old "Q"/"A" markers in favor of the accordion chrome.
+  - **Block width:** an in-block toggle (a reusable `BlockWidthControl`) switches the FAQ between **contained** (max-width, centered) and **full** width — a `width` attr on the `faq` node, emitted read-side as `data-width`. Generic enough to reuse on other blocks.
+
+  Back-compat: the node structure is unchanged (`faq > faqItem > faqQuestion faqAnswer`), so existing FAQ content loads as-is and gains the default-open state; old HTML question/answer wrappers still parse via fallback rules.
+
+- af935e7: The remaining inline content blocks (**Summary**, **Key takeaways**, **Pros & cons**) now use the React NodeView + gear-menu pattern, matching Alert and FAQ.
+
+  - Each gains an in-block **gear menu** with a **Width** setting (`contained` / `full`), surfaced read-side as `data-width`.
+  - **Summary** and **Key takeaways** share one new `LabeledBlockNodeView` (they're structurally identical — a label above a `block+` body), driven by the existing `labeledBlock()` factory, which now attaches the NodeView + `width` attr and carries the per-block `label` / `cssClass` on `addOptions()`.
+  - **Pros & cons** gets its own `ProsConsNodeView`; the gear lives on the container, the two columns keep their plain label markup.
+  - The `width` attr is consolidated into one shared `widthAttribute()` helper (FAQ, Alert, the labelled blocks, and Pros & cons all reuse it, so they can't drift).
+
+  **Read-side / consumer CSS:** each block now renders a full-width outer anchor wrapping an inner content layer (mirrors the FAQ outer/`-content` split, so the gear doesn't move on a width toggle):
+
+  - Summary / Key takeaways: the label + body now sit inside a `.pilotiq-block-content` wrapper; that wrapper carries the max-width / centering (full-width via `[data-width="full"] > .pilotiq-block-content`).
+  - Pros & cons: the two-column grid moves from `.pilotiq-pros-cons` onto a new inner `.pilotiq-pros-cons-content`; the outer becomes the full-width anchor.
+
+  Back-compat: node structures are unchanged and parsing is tolerant of the old (unwrapped) HTML, so existing stored content loads as-is and defaults to `contained`.
+
 ## 3.14.0
 
 ### Minor Changes

package/dist/extensions/contentBlocks.js

@@ -1,17 +1,61 @@
 import { Node, Extension, mergeAttributes } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
 import { AlertNodeView } from '../react/AlertNodeView.js';
+import { FaqNodeView } from '../react/FaqNodeView.js';
+import { FaqItemNodeView } from '../react/FaqItemNodeView.js';
+import { LabeledBlockNodeView } from '../react/LabeledBlockNodeView.js';
+import { ProsConsNodeView } from '../react/ProsConsNodeView.js';
 import { coerceAlertType } from './alertVariants.js';
 // Re-exported for back-compat — the canonical definitions live in
 // `alertVariants.ts` (shared with the React NodeView + the read-side renderer).
 export { ALERT_VARIANTS, ALERT_VARIANT_LABEL, coerceAlertType } from './alertVariants.js';
-/** A labelled region whose body is ordinary editable content (`block+`). */
+/**
+ * Inline content blocks — labelled, editable-in-place regions. No card, no
+ * popup, no border/background: each renders a small non-editable label above an
+ * editable body the author types straight into. This is the approved inline UX
+ * (it replaces the earlier card + side-panel schema blocks as the defaults).
+ *
+ * Mechanics mirror `GridExtension` (pure `renderHTML`, no React NodeView; the
+ * consumer owns the `pilotiq-*` CSS). The label is non-editable and parseHTML
+ * uses `contentElement` so it never re-parses back into the node's content on
+ * an HTML round-trip.
+ *
+ * Inserted via the slash menu (`SlashCommandExtension`, "Content" group) with
+ * `insertContent` — no custom commands needed.
+ */
+/**
+ * Shared `width` attr (`contained` default | `full` bleed) — surfaced through
+ * the in-block gear menu on every content block, mirrored to `data-width` for
+ * the consumer CSS (editor NodeView + read-side `render.ts`). One definition so
+ * the four blocks that carry it (FAQ / Alert / labelled blocks / Pros & cons)
+ * never drift.
+ */
+function widthAttribute() {
+    return {
+        default: 'contained',
+        parseHTML: (el) => (el.getAttribute('data-width') === 'full' ? 'full' : 'contained'),
+        renderHTML: (attrs) => (attrs['width'] === 'full' ? { 'data-width': 'full' } : {}),
+    };
+}
+/**
+ * A labelled region whose body is ordinary editable content (`block+`). The
+ * editor renders `LabeledBlockNodeView` (shared across every labelled block —
+ * label + gear menu + width); the `renderHTML` below is the serialized/read
+ * shape and mirrors it: outer anchor + inner `.pilotiq-block-content` wrapper.
+ * `label`/`cssClass` ride `addOptions()` so the shared NodeView can read them.
+ */
 function labeledBlock(spec) {
     return Node.create({
         name: spec.name,
         group: 'block',
         content: 'block+',
         defining: true,
+        addOptions() {
+            return { label: spec.label, cssClass: spec.cssClass };
+        },
+        addAttributes() {
+            return { width: widthAttribute() };
+        },
         parseHTML() {
             return [{ tag: `div[data-type="${spec.name}"]`, contentElement: '.pilotiq-block-body' }];
         },
@@ -19,10 +63,15 @@ function labeledBlock(spec) {
             return [
                 'div',
                 mergeAttributes(HTMLAttributes, { 'data-type': spec.name, class: spec.cssClass }),
-                ['div', { class: 'pilotiq-block-label', contenteditable: 'false' }, spec.label],
-                ['div', { class: 'pilotiq-block-body' }, 0],
+                ['div', { class: 'pilotiq-block-content' },
+                    ['div', { class: 'pilotiq-block-label', contenteditable: 'false' }, spec.label],
+                    ['div', { class: 'pilotiq-block-body' }, 0],
+                ],
             ];
         },
+        addNodeView() {
+            return ReactNodeViewRenderer(LabeledBlockNodeView);
+        },
     });
 }
 export const KeyTakeaways = labeledBlock({ name: 'keyTakeaways', label: 'Key takeaways', cssClass: 'pilotiq-key-takeaways' });
@@ -41,16 +90,19 @@ export const Faq = Node.create({
     group: 'block',
     content: 'faqItem+',
     defining: true,
+    // Block width — `contained` (max-width, centered) or `full` (full bleed).
+    // Generic block-layout attr; the in-block toggle lives in `FaqNodeView`.
+    addAttributes() {
+        return { width: widthAttribute() };
+    },
     parseHTML() {
-        return [{ tag: 'div[data-type="faq"]', contentElement: '.pilotiq-block-body' }];
+        return [{ tag: 'div[data-type="faq"]' }];
     },
     renderHTML({ HTMLAttributes }) {
-        return [
-            'div',
-            mergeAttributes(HTMLAttributes, { 'data-type': 'faq', class: 'pilotiq-faq' }),
-            ['div', { class: 'pilotiq-block-label', contenteditable: 'false' }, 'FAQ'],
-            ['div', { class: 'pilotiq-block-body' }, 0],
-        ];
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'faq', class: 'pilotiq-faq' }), 0];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(FaqNodeView);
     },
     addKeyboardShortcuts() {
         return {
@@ -125,44 +177,56 @@ export const FaqItem = Node.create({
     group: 'faqItem',
     content: 'faqQuestion faqAnswer',
     defining: true,
+    // Collapsed/expanded state — drives the editor accordion AND the read-side
+    // `<details open>`; defaults open so authored content is visible.
+    addAttributes() {
+        return {
+            open: {
+                default: true,
+                parseHTML: (el) => el.getAttribute('data-open') !== 'false',
+                renderHTML: (attrs) => ({ 'data-open': attrs['open'] === false ? 'false' : 'true' }),
+            },
+        };
+    },
     parseHTML() {
         return [{ tag: 'div[data-type="faqItem"]' }];
     },
     renderHTML({ HTMLAttributes }) {
         return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'faqItem', class: 'pilotiq-faq-item' }), 0];
     },
+    addNodeView() {
+        return ReactNodeViewRenderer(FaqItemNodeView);
+    },
 });
 export const FaqQuestion = Node.create({
     name: 'faqQuestion',
     content: 'inline*',
     defining: true,
     parseHTML() {
-        return [{ tag: 'div[data-type="faqQuestion"]', contentElement: '.pilotiq-faq-text' }];
-    },
-    renderHTML({ HTMLAttributes }) {
+        // Back-compat: the pre-accordion question wrapped its text in `.pilotiq-faq-text`.
         return [
-            'div',
-            mergeAttributes(HTMLAttributes, { 'data-type': 'faqQuestion', class: 'pilotiq-faq-question' }),
-            ['span', { class: 'pilotiq-faq-marker', contenteditable: 'false' }, 'Q'],
-            ['span', { class: 'pilotiq-faq-text' }, 0],
+            { tag: 'div[data-type="faqQuestion"]', contentElement: '.pilotiq-faq-text' },
+            { tag: 'div[data-type="faqQuestion"]' },
         ];
     },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'faqQuestion', class: 'pilotiq-faq-question' }), 0];
+    },
 });
 export const FaqAnswer = Node.create({
     name: 'faqAnswer',
     content: 'block+',
     defining: true,
     parseHTML() {
-        return [{ tag: 'div[data-type="faqAnswer"]', contentElement: '.pilotiq-faq-body' }];
-    },
-    renderHTML({ HTMLAttributes }) {
+        // Back-compat: the pre-accordion answer wrapped its body in `.pilotiq-faq-body`.
         return [
-            'div',
-            mergeAttributes(HTMLAttributes, { 'data-type': 'faqAnswer', class: 'pilotiq-faq-answer' }),
-            ['span', { class: 'pilotiq-faq-marker', contenteditable: 'false' }, 'A'],
-            ['div', { class: 'pilotiq-faq-body' }, 0],
+            { tag: 'div[data-type="faqAnswer"]', contentElement: '.pilotiq-faq-body' },
+            { tag: 'div[data-type="faqAnswer"]' },
         ];
     },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'faqAnswer', class: 'pilotiq-faq-answer' }), 0];
+    },
 });
 const DIRECTIVE_MARKER = 0x3a; // ':'
 const DIRECTIVE_MIN_MARKERS = 3;
@@ -337,6 +401,9 @@ export const Alert = Node.create({
                 parseHTML: (el) => coerceAlertType(el.getAttribute('data-alert-type')),
                 renderHTML: (attrs) => ({ 'data-alert-type': coerceAlertType(attrs['type']) }),
             },
+            // Block width — `contained` (default) or `full` (full bleed). Same generic
+            // layout attr as the FAQ block; surfaced through the in-block gear menu.
+            width: widthAttribute(),
             icon: {
                 default: '',
                 parseHTML: (el) => el.getAttribute('data-icon') ?? '',
@@ -406,11 +473,28 @@ export const ProsCons = Node.create({
     group: 'block',
     content: 'prosColumn consColumn',
     defining: true,
+    addAttributes() {
+        return { width: widthAttribute() };
+    },
     parseHTML() {
-        return [{ tag: 'div[data-type="prosCons"]' }];
+        return [
+            {
+                tag: 'div[data-type="prosCons"]',
+                // New shape nests the columns in `.pilotiq-pros-cons-content`; old
+                // stored content had them as direct children — fall back to the element.
+                contentElement: (el) => el.querySelector('.pilotiq-pros-cons-content') ?? el,
+            },
+        ];
     },
     renderHTML({ HTMLAttributes }) {
-        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'prosCons', class: 'pilotiq-pros-cons' }), 0];
+        return [
+            'div',
+            mergeAttributes(HTMLAttributes, { 'data-type': 'prosCons', class: 'pilotiq-pros-cons' }),
+            ['div', { class: 'pilotiq-pros-cons-content' }, 0],
+        ];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ProsConsNodeView);
     },
 });
 function prosConsColumn(name, label, cssClass) {

package/dist/react/AlertNodeView.js

@@ -1,21 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
-import { Popover } from '@base-ui/react/popover';
 import { ALERT_VARIANTS, ALERT_ICON_KEYS, buildAlertIconSvg, sanitizeIconSvg, coerceAlertType, } from '../extensions/alertVariants.js';
-import { Palette } from './Palette.js';
+import { BlockSettingsMenu } from './BlockSettingsMenu.js';
 /**
  * React NodeView for the `alert` content block — a shadcn-style callout on the
- * panel's theme tokens. Icon in column one, editable title + body in column
- * two. Editable mode adds in-block controls (top-right): a variant picker, an
- * icon picker (curated inline-SVG library + a "Custom SVG" paste field — no
- * `lucide-react`), and a color swatch for the `custom` variant.
+ * panel's theme tokens. Icon in column one, editable title + body in column two.
+ *
+ * Every editable control lives behind one in-block **gear menu** (top-end gutter)
+ * via `BlockSettingsMenu`: Width, Type, Icon (curated inline-SVG library + a
+ * "Custom SVG" paste field — no `lucide-react`), and Color (custom variant only).
  *
  * Editable regions are the child nodes (`alertTitle` / `alertBody`) rendered
- * through the single `<NodeViewContent>` hole; the wrapper styles them via
- * child selectors so the nodes' `renderHTML` stays semantic (consumer owns the
- * read-side CSS — see `render.ts`). Custom SVG is sanitized via
- * `sanitizeIconSvg` before it's stored AND when it renders.
+ * through the single `<NodeViewContent>` hole; the wrapper styles them via child
+ * selectors so the nodes' `renderHTML` stays semantic (consumer owns the
+ * read-side CSS — see `render.ts`). Custom SVG is sanitized via `sanitizeIconSvg`
+ * before it's stored AND when it renders.
  */
 const VARIANT_BOX = {
     info: 'border-blue-500/30 bg-blue-50/40 dark:bg-blue-950/20',
@@ -50,18 +50,15 @@ const COLOR_SWATCHES = [
 function IconSlot({ svg, className }) {
     return (_jsx("span", { className: 'inline-flex shrink-0 [&>svg]:size-full ' + (className ?? ''), dangerouslySetInnerHTML: { __html: svg } }));
 }
-const chevron = (_jsx("svg", { viewBox: "0 0 24 24", className: "h-3 w-3", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": true, children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
-const ctrlBtn = 'flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-opacity ' +
-    'hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 opacity-0 [.pilotiq-alert:hover_&]:opacity-100';
 export function AlertNodeView({ node, updateAttributes, editor }) {
     const variant = coerceAlertType(node.attrs['type']);
     const iconKey = String(node.attrs['icon'] ?? '');
     const iconSvg = String(node.attrs['iconSvg'] ?? '');
     const color = String(node.attrs['color'] ?? '');
+    const width = node.attrs['width'] === 'full' ? 'full' : 'contained';
     const editable = editor.isEditable;
     const iconFull = buildAlertIconSvg(iconKey, iconSvg, variant);
     const tinted = variant === 'custom' && color !== '';
-    const [iconOpen, setIconOpen] = useState(false);
     const [svgMode, setSvgMode] = useState(false);
     const [svgDraft, setSvgDraft] = useState('');
     const [svgError, setSvgError] = useState(false);
@@ -71,8 +68,8 @@ export function AlertNodeView({ node, updateAttributes, editor }) {
             backgroundColor: `color-mix(in srgb, ${color} 8%, transparent)`,
         }
         : undefined;
-    const closeIconPicker = () => { setIconOpen(false); setSvgMode(false); setSvgDraft(''); setSvgError(false); };
-    const pickIcon = (key) => { updateAttributes({ icon: key, iconSvg: '' }); closeIconPicker(); };
+    const resetSvg = () => { setSvgMode(false); setSvgDraft(''); setSvgError(false); };
+    const pickIcon = (key) => { updateAttributes({ icon: key, iconSvg: '' }); resetSvg(); };
     const applyCustomSvg = () => {
         const clean = sanitizeIconSvg(svgDraft);
         if (!clean) {
@@ -80,13 +77,61 @@ export function AlertNodeView({ node, updateAttributes, editor }) {
             return;
         }
         updateAttributes({ iconSvg: clean, icon: '' });
-        closeIconPicker();
+        resetSvg();
     };
-    return (_jsxs(NodeViewWrapper, { "data-type": "alert", "data-alert-type": variant, style: boxStyle, className: 'pilotiq-alert relative my-3 grid grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-lg border px-4 py-3 text-sm ' +
-            '[&_.pilotiq-alert-title]:font-medium [&_.pilotiq-alert-title]:leading-tight ' +
-            '[&_.pilotiq-alert-description]:text-muted-foreground [&_.pilotiq-alert-description_p]:my-0 ' +
-            VARIANT_BOX[variant], children: [editable ? (_jsxs(Popover.Root, { open: iconOpen, onOpenChange: (o) => (o ? setIconOpen(true) : closeIconPicker()), children: [_jsx(Popover.Trigger, { render: _jsx("button", { type: "button", contentEditable: false, "aria-label": "Alert icon", className: 'mt-0.5 rounded hover:bg-accent ' + (tinted ? '' : VARIANT_ICON_COLOR[variant]), style: tinted ? { color } : undefined, children: _jsx(IconSlot, { svg: iconFull, className: "h-4 w-4" }) }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { side: "bottom", align: "start", sideOffset: 6, className: "isolate z-50", children: _jsx(Popover.Popup, { className: "w-64 rounded-md border bg-popover p-2 text-popover-foreground shadow-md outline-hidden", children: !svgMode ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-6 gap-1", children: ALERT_ICON_KEYS.map((key) => (_jsx("button", { type: "button", title: key, "aria-label": key, onClick: () => pickIcon(key), className: 'flex size-8 items-center justify-center rounded hover:bg-accent hover:text-accent-foreground ' +
-                                                    (!iconSvg && key === iconKey ? 'bg-accent text-accent-foreground' : 'text-muted-foreground'), children: _jsx(IconSlot, { svg: buildAlertIconSvg(key, '', variant), className: "h-4 w-4" }) }, key))) }), _jsxs("div", { className: "mt-2 flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => { setSvgMode(true); setSvgDraft(iconSvg); setSvgError(false); }, className: "flex-1 rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Custom SVG\u2026" }), _jsx("button", { type: "button", onClick: () => { updateAttributes({ icon: '', iconSvg: '' }); closeIconPicker(); }, className: "flex-1 rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Default" })] })] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("textarea", { value: svgDraft, onChange: (e) => { setSvgDraft(e.target.value); setSvgError(false); }, rows: 5, spellCheck: false, placeholder: "<svg viewBox='0 0 24 24'>\u2026</svg>", className: 'w-full resize-y rounded border bg-background p-2 font-mono text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring ' +
-                                                (svgError ? 'border-destructive' : 'border-input') }), svgError && _jsx("p", { className: "text-xs text-destructive", children: "Not a valid SVG (must start with <svg>)." }), _jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx("button", { type: "button", onClick: () => setSvgMode(false), className: "rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Back" }), _jsx("button", { type: "button", onClick: applyCustomSvg, className: "rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:bg-primary/90", children: "Apply" })] })] })) }) }) })] })) : (_jsx("div", { contentEditable: false, className: 'mt-0.5 ' + (tinted ? '' : VARIANT_ICON_COLOR[variant]), style: tinted ? { color } : undefined, children: _jsx(IconSlot, { svg: iconFull, className: "h-4 w-4" }) })), editable && (_jsxs("div", { className: "absolute right-1.5 top-1.5 flex items-center gap-1", contentEditable: false, children: [variant === 'custom' && (_jsx(Palette, { trigger: _jsx("button", { type: "button", "aria-label": "Alert color", className: ctrlBtn, children: _jsx("span", { className: "size-3 rounded-full border border-border/60", style: { background: color || 'var(--color-muted-foreground)' } }) }), swatches: COLOR_SWATCHES, custom: true, activeColor: color || undefined, onPick: (value) => updateAttributes({ color: value }), onClear: () => updateAttributes({ color: '' }), clearLabel: "No color" })), _jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { render: _jsxs("button", { type: "button", "aria-label": "Alert variant", className: ctrlBtn, children: [VARIANT_LABEL[variant], chevron] }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Positioner, { side: "bottom", align: "end", sideOffset: 4, className: "isolate z-50", children: _jsx(Popover.Popup, { className: "min-w-32 rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden", children: ALERT_VARIANTS.map((v) => (_jsx(Popover.Close, { render: _jsxs("button", { type: "button", onClick: () => updateAttributes({ type: v }), className: 'flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm hover:bg-accent hover:text-accent-foreground ' +
-                                                    (v === variant ? 'bg-accent/50' : ''), children: [_jsx("span", { className: VARIANT_ICON_COLOR[v], children: _jsx(IconSlot, { svg: buildAlertIconSvg('', '', v), className: "h-3.5 w-3.5" }) }), VARIANT_LABEL[v]] }) }, v))) }) }) })] })] })), _jsx(NodeViewContent, { className: "col-start-2 min-w-0" })] }));
+    // ── Gear-menu settings (editable mode only) ──────────────────────────────
+    const iconContent = !svgMode ? (_jsxs("div", { className: "p-1", children: [_jsx("div", { className: "grid grid-cols-6 gap-1", children: ALERT_ICON_KEYS.map((key) => (_jsx("button", { type: "button", title: key, "aria-label": key, onClick: () => pickIcon(key), className: 'flex size-8 items-center justify-center rounded hover:bg-accent hover:text-accent-foreground ' +
+                        (!iconSvg && key === iconKey ? 'bg-accent text-accent-foreground' : 'text-muted-foreground'), children: _jsx(IconSlot, { svg: buildAlertIconSvg(key, '', variant), className: "size-4" }) }, key))) }), _jsxs("div", { className: "mt-2 flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => { setSvgMode(true); setSvgDraft(iconSvg); setSvgError(false); }, className: "flex-1 rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Custom SVG\u2026" }), _jsx("button", { type: "button", onClick: () => { updateAttributes({ icon: '', iconSvg: '' }); resetSvg(); }, className: "flex-1 rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Default" })] })] })) : (_jsxs("div", { className: "flex w-60 flex-col gap-2 p-1", children: [_jsx("textarea", { value: svgDraft, onChange: (e) => { setSvgDraft(e.target.value); setSvgError(false); }, rows: 5, spellCheck: false, placeholder: "<svg viewBox='0 0 24 24'>\u2026</svg>", className: 'w-full resize-y rounded border bg-background p-2 font-mono text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring ' +
+                    (svgError ? 'border-destructive' : 'border-input') }), svgError && _jsx("p", { className: "text-xs text-destructive", children: "Not a valid SVG (must start with <svg>)." }), _jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx("button", { type: "button", onClick: () => setSvgMode(false), className: "rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "Back" }), _jsx("button", { type: "button", onClick: applyCustomSvg, className: "rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:bg-primary/90", children: "Apply" })] })] }));
+    const colorContent = (_jsxs("div", { className: "flex w-44 flex-col gap-2 p-1", children: [_jsx("div", { className: "grid grid-cols-5 gap-1", children: COLOR_SWATCHES.map((sw) => (_jsx("button", { type: "button", title: sw.label, "aria-label": sw.label, onClick: () => updateAttributes({ color: sw.value }), className: 'size-6 rounded-full border border-border/60 transition-transform hover:scale-110 ' +
+                        (color === sw.value ? 'ring-2 ring-ring ring-offset-1 ring-offset-popover' : ''), style: { background: sw.value } }, sw.value))) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("label", { className: "flex flex-1 cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: [_jsx("input", { type: "color", value: /^#[0-9a-fA-F]{6}$/.test(color) ? color : '#3b82f6', onChange: (e) => updateAttributes({ color: e.target.value }), className: "size-4 cursor-pointer rounded border-0 bg-transparent p-0" }), "Custom\u2026"] }), _jsx("button", { type: "button", onClick: () => updateAttributes({ color: '' }), className: "rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: "No color" })] })] }));
+    const settings = [
+        {
+            kind: 'select',
+            key: 'width',
+            label: 'Width',
+            value: width,
+            options: [
+                { value: 'contained', label: 'Contained' },
+                { value: 'full', label: 'Full width' },
+            ],
+            onChange: (v) => updateAttributes({ width: v }),
+        },
+        {
+            kind: 'select',
+            key: 'type',
+            label: 'Type',
+            value: variant,
+            options: ALERT_VARIANTS.map((v) => ({
+                value: v,
+                label: VARIANT_LABEL[v],
+                icon: _jsx("span", { className: VARIANT_ICON_COLOR[v], children: _jsx(IconSlot, { svg: buildAlertIconSvg('', '', v), className: "size-4" }) }),
+            })),
+            onChange: (v) => updateAttributes({ type: v }),
+        },
+        {
+            kind: 'custom',
+            key: 'icon',
+            label: 'Icon',
+            hint: _jsx("span", { className: tinted ? '' : VARIANT_ICON_COLOR[variant], style: tinted ? { color } : undefined, children: _jsx(IconSlot, { svg: iconFull, className: "size-4" }) }),
+            content: iconContent,
+        },
+        ...(variant === 'custom'
+            ? [{
+                    kind: 'custom',
+                    key: 'color',
+                    label: 'Color',
+                    hint: _jsx("span", { className: "size-3.5 rounded-full border border-border/60", style: { background: color || 'var(--color-muted-foreground)' } }),
+                    content: colorContent,
+                }]
+            : []),
+    ];
+    // Two layers (mirrors the FAQ block): the outer `.pilotiq-alert` stays full
+    // width and is the stable anchor for the gear menu; the inner
+    // `.pilotiq-alert-box` carries the visual box + the contained/full width, so
+    // toggling width never shifts the gear.
+    return (_jsxs(NodeViewWrapper, { "data-type": "alert", "data-alert-type": variant, "data-width": width, className: "pilotiq-alert relative my-3", children: [editable && (_jsx(BlockSettingsMenu, { settings: settings, label: "Alert settings", hoverClass: "[.pilotiq-alert:hover_&]:opacity-100" })), _jsxs("div", { role: "note", style: boxStyle, className: 'pilotiq-alert-box grid grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-lg border px-4 py-3 text-sm ' +
+                    '[&_.pilotiq-alert-title]:font-medium [&_.pilotiq-alert-title]:leading-tight ' +
+                    '[&_.pilotiq-alert-description]:text-muted-foreground [&_.pilotiq-alert-description_p]:my-0 ' +
+                    VARIANT_BOX[variant], children: [_jsx("div", { contentEditable: false, className: 'mt-0.5 ' + (tinted ? '' : VARIANT_ICON_COLOR[variant]), style: tinted ? { color } : undefined, children: _jsx(IconSlot, { svg: iconFull, className: "h-4 w-4" }) }), _jsx(NodeViewContent, { className: "col-start-2 min-w-0" })] })] }));
 }

package/dist/react/BlockSettingsMenu.d.ts

@@ -0,0 +1,47 @@
+import { type ReactElement, type ReactNode } from 'react';
+/**
+ * Reusable in-block **settings** menu — a gear trigger outset in the inline-end
+ * gutter (mirroring the drag handle on the start side), opening a nested menu
+ * where each block setting is a submenu. Blocks with multiple variations (Alert
+ * = width + type + icon + color; FAQ = width) all surface their controls through
+ * one consistent entry point instead of a scattered control cluster.
+ *
+ * Two setting kinds:
+ *  - `select` — a radio submenu of mutually-exclusive options (Width, Type). The
+ *    active option's label rides the parent row as a hint; picking keeps the menu
+ *    open so the change previews live.
+ *  - `custom` — a submenu whose body is caller-supplied JSX (icon grid, color
+ *    swatches). The caller owns the interactions; plain buttons inside don't
+ *    auto-close the menu.
+ *
+ * The caller owns every attr write + the matching `data-*` / read-side CSS.
+ */
+export type BlockWidth = 'contained' | 'full';
+export type BlockSettingOption = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+};
+export type BlockSetting = {
+    kind: 'select';
+    key: string;
+    label: string;
+    value: string;
+    options: BlockSettingOption[];
+    onChange: (value: string) => void;
+} | {
+    kind: 'custom';
+    key: string;
+    label: string;
+    /** Short hint shown on the parent row (e.g. the current icon / color). */
+    hint?: ReactNode;
+    /** Submenu body — caller-supplied JSX. */
+    content: ReactNode;
+};
+export declare function BlockSettingsMenu({ settings, hoverClass, label, triggerClass, }: {
+    settings: BlockSetting[];
+    hoverClass?: string;
+    label?: string;
+    triggerClass?: string;
+}): ReactElement;
+//# sourceMappingURL=BlockSettingsMenu.d.ts.map

package/dist/react/BlockSettingsMenu.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from '@base-ui/react/menu';
+const gear = (_jsxs("svg", { viewBox: "0 0 24 24", className: "size-3.5", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })] }));
+const chevronRight = (_jsx("svg", { viewBox: "0 0 24 24", className: "ms-auto size-3.5 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": true, children: _jsx("path", { d: "m9 18 6-6-6-6" }) }));
+const check = (_jsx("svg", { viewBox: "0 0 24 24", className: "size-3.5", fill: "none", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": true, children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+const POPUP = 'min-w-44 rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden';
+const ROW = 'flex w-full cursor-default items-center gap-2 rounded px-2 py-1.5 text-sm outline-hidden ' +
+    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground';
+function activeLabel(s) {
+    return s.options.find((o) => o.value === s.value)?.label ?? '';
+}
+export function BlockSettingsMenu({ settings, hoverClass = '[.pilotiq-faq:hover_&]:opacity-100', label = 'Block settings', triggerClass = 'top-0 -end-[30px]', }) {
+    return (_jsxs(Menu.Root, { children: [_jsx(Menu.Trigger, { render: _jsx("button", { type: "button", contentEditable: false, "aria-label": label, className: 'absolute z-10 flex items-center justify-center rounded border bg-background p-1 text-muted-foreground shadow-sm ' +
+                        'opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 data-[popup-open]:opacity-100 ' +
+                        triggerClass + ' ' + hoverClass, children: gear }) }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, className: "isolate z-50", children: _jsx(Menu.Popup, { className: POPUP, children: settings.map((s) => (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: ROW, children: [_jsx("span", { children: s.label }), _jsx("span", { className: "ms-auto flex items-center gap-1 text-xs text-muted-foreground", children: s.kind === 'select' ? activeLabel(s) : s.hint }), chevronRight] }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { side: "inline-end", align: "start", sideOffset: 2, className: "isolate z-50", children: _jsx(Menu.Popup, { className: POPUP, children: s.kind === 'select' ? (_jsx(Menu.RadioGroup, { value: s.value, onValueChange: (v) => s.onChange(String(v)), children: s.options.map((o) => (_jsxs(Menu.RadioItem, { value: o.value, className: ROW, children: [o.icon && _jsx("span", { className: "flex size-4 items-center justify-center", children: o.icon }), _jsx("span", { children: o.label }), _jsx(Menu.RadioItemIndicator, { className: "ms-auto flex", children: check })] }, o.value))) })) : (s.content) }) }) })] }, s.key))) }) }) })] }));
+}

package/dist/react/FaqItemNodeView.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement } from 'react';
+import { type NodeViewProps } from '@tiptap/react';
+/**
+ * React NodeView for a `faqItem` — one row of the FAQ accordion. The question
+ * is the always-visible trigger; the answer collapses below it. The chevron (on
+ * the right, shadcn-style) toggles the item's `open` attr — the same attr the
+ * read-side `<details>` accordion reads, so the editor state is what publishes.
+ * The question stays editable on click; only the chevron toggles.
+ *
+ * One `<NodeViewContent>` holds both child nodes (`faqQuestion` + `faqAnswer`).
+ * Layout + the collapse (hiding `.pilotiq-faq-answer` when `data-open="false"`)
+ * live in the consumer's `.pilotiq-faq*` CSS — shared with the read-side — so
+ * the editable answer stays mounted (round-trips through FormData on save) and
+ * the editor matches the published look.
+ */
+export declare function FaqItemNodeView({ node, updateAttributes, editor }: NodeViewProps): ReactElement;
+//# sourceMappingURL=FaqItemNodeView.d.ts.map

package/dist/react/FaqItemNodeView.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
+/**
+ * React NodeView for a `faqItem` — one row of the FAQ accordion. The question
+ * is the always-visible trigger; the answer collapses below it. The chevron (on
+ * the right, shadcn-style) toggles the item's `open` attr — the same attr the
+ * read-side `<details>` accordion reads, so the editor state is what publishes.
+ * The question stays editable on click; only the chevron toggles.
+ *
+ * One `<NodeViewContent>` holds both child nodes (`faqQuestion` + `faqAnswer`).
+ * Layout + the collapse (hiding `.pilotiq-faq-answer` when `data-open="false"`)
+ * live in the consumer's `.pilotiq-faq*` CSS — shared with the read-side — so
+ * the editable answer stays mounted (round-trips through FormData on save) and
+ * the editor matches the published look.
+ */
+export function FaqItemNodeView({ node, updateAttributes, editor }) {
+    const open = node.attrs['open'] !== false;
+    const editable = editor.isEditable;
+    return (_jsxs(NodeViewWrapper, { "data-type": "faqItem", "data-open": open ? 'true' : 'false', className: "pilotiq-faq-item relative", children: [_jsx("button", { type: "button", contentEditable: false, "aria-label": open ? 'Collapse answer' : 'Expand answer', "aria-expanded": open, disabled: !editable, onClick: () => updateAttributes({ open: !open }), className: "absolute start-0 top-2.5 flex size-5 items-center justify-center text-muted-foreground/60 transition-transform hover:text-foreground", style: { transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }, children: _jsx("svg", { viewBox: "0 0 24 24", className: "size-4", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("path", { d: "m6 9 6 6 6-6" }) }) }), _jsx(NodeViewContent, {})] }));
+}

package/dist/react/FaqNodeView.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from 'react';
+import { type NodeViewProps } from '@tiptap/react';
+/**
+ * React NodeView for the `faq` container — hosts the in-block **gear menu** at
+ * the top-end corner (chevrons live at the start, so the end is free). For now
+ * its only setting is **Width** (contained vs full); the `width` attr drives
+ * `data-width`, which the consumer's `.pilotiq-faq[data-width="full"]` CSS reads
+ * (shared with the read-side). The faqItems render through `<NodeViewContent>`.
+ */
+export declare function FaqNodeView({ node, updateAttributes, editor }: NodeViewProps): ReactElement;
+//# sourceMappingURL=FaqNodeView.d.ts.map

package/dist/react/FaqNodeView.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
+import { BlockSettingsMenu } from './BlockSettingsMenu.js';
+/**
+ * React NodeView for the `faq` container — hosts the in-block **gear menu** at
+ * the top-end corner (chevrons live at the start, so the end is free). For now
+ * its only setting is **Width** (contained vs full); the `width` attr drives
+ * `data-width`, which the consumer's `.pilotiq-faq[data-width="full"]` CSS reads
+ * (shared with the read-side). The faqItems render through `<NodeViewContent>`.
+ */
+export function FaqNodeView({ node, updateAttributes, editor }) {
+    const width = node.attrs['width'] === 'full' ? 'full' : 'contained';
+    const settings = [
+        {
+            kind: 'select',
+            key: 'width',
+            label: 'Width',
+            value: width,
+            options: [
+                { value: 'contained', label: 'Contained' },
+                { value: 'full', label: 'Full width' },
+            ],
+            onChange: (w) => updateAttributes({ width: w }),
+        },
+    ];
+    return (_jsxs(NodeViewWrapper, { "data-type": "faq", "data-width": width, className: "pilotiq-faq relative", children: [editor.isEditable && _jsx(BlockSettingsMenu, { settings: settings, label: "FAQ settings" }), _jsx(NodeViewContent, { className: "pilotiq-faq-content" })] }));
+}

package/dist/react/LabeledBlockNodeView.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement } from 'react';
+import { type NodeViewProps } from '@tiptap/react';
+/**
+ * Shared React NodeView for the simple **labelled** content blocks — the ones
+ * that are just a non-editable label above a `block+` body (Key takeaways,
+ * Summary). They rhyme structurally, so they share ONE NodeView instead of a
+ * bespoke component each; the per-block `label` + `cssClass` ride the node's
+ * `addOptions()` (see `labeledBlock()` in `extensions/contentBlocks.ts`).
+ *
+ * Mirrors the FAQ/Alert layout: a full-width outer anchor (`cssClass`, stays
+ * put so the gear doesn't move on a width toggle) wrapping an inner
+ * `.pilotiq-block-content` that carries the max-width / centering. The only
+ * setting today is **Width** (contained vs full) via the in-block gear menu;
+ * the `width` attr drives `data-width`, which the consumer's CSS reads (shared
+ * with the read-side `render.ts`).
+ */
+export declare function LabeledBlockNodeView({ node, updateAttributes, editor, extension }: NodeViewProps): ReactElement;
+//# sourceMappingURL=LabeledBlockNodeView.d.ts.map

package/dist/react/LabeledBlockNodeView.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
+import { BlockSettingsMenu } from './BlockSettingsMenu.js';
+/**
+ * Shared React NodeView for the simple **labelled** content blocks — the ones
+ * that are just a non-editable label above a `block+` body (Key takeaways,
+ * Summary). They rhyme structurally, so they share ONE NodeView instead of a
+ * bespoke component each; the per-block `label` + `cssClass` ride the node's
+ * `addOptions()` (see `labeledBlock()` in `extensions/contentBlocks.ts`).
+ *
+ * Mirrors the FAQ/Alert layout: a full-width outer anchor (`cssClass`, stays
+ * put so the gear doesn't move on a width toggle) wrapping an inner
+ * `.pilotiq-block-content` that carries the max-width / centering. The only
+ * setting today is **Width** (contained vs full) via the in-block gear menu;
+ * the `width` attr drives `data-width`, which the consumer's CSS reads (shared
+ * with the read-side `render.ts`).
+ */
+export function LabeledBlockNodeView({ node, updateAttributes, editor, extension }) {
+    const { label, cssClass } = extension.options;
+    const width = node.attrs['width'] === 'full' ? 'full' : 'contained';
+    const settings = [
+        {
+            kind: 'select',
+            key: 'width',
+            label: 'Width',
+            value: width,
+            options: [
+                { value: 'contained', label: 'Contained' },
+                { value: 'full', label: 'Full width' },
+            ],
+            onChange: (w) => updateAttributes({ width: w }),
+        },
+    ];
+    return (_jsxs(NodeViewWrapper, { "data-type": node.type.name, "data-width": width, className: cssClass + ' relative', children: [editor.isEditable && (_jsx(BlockSettingsMenu, { settings: settings, label: label + ' settings', hoverClass: '[.' + cssClass + ':hover_&]:opacity-100' })), _jsxs("div", { className: "pilotiq-block-content", children: [_jsx("div", { className: "pilotiq-block-label", contentEditable: false, children: label }), _jsx(NodeViewContent, { className: "pilotiq-block-body" })] })] }));
+}

package/dist/react/ProsConsNodeView.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement } from 'react';
+import { type NodeViewProps } from '@tiptap/react';
+/**
+ * React NodeView for the `prosCons` container — hosts the in-block **gear menu**
+ * (Width) at the top-end corner. The two `prosColumn` / `consColumn` children
+ * keep their plain `renderHTML` (label + body); only the container needs React,
+ * for the gear. Two layers like FAQ/Alert: a full-width outer anchor
+ * (`.pilotiq-pros-cons`, stable so the gear doesn't move on a width toggle)
+ * wrapping the inner `.pilotiq-pros-cons-content`, which carries the two-column
+ * grid + max-width / centering. The `width` attr drives `data-width` (read by
+ * the consumer CSS, shared with the read-side renderer).
+ */
+export declare function ProsConsNodeView({ node, updateAttributes, editor }: NodeViewProps): ReactElement;
+//# sourceMappingURL=ProsConsNodeView.d.ts.map

package/dist/react/ProsConsNodeView.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
+import { BlockSettingsMenu } from './BlockSettingsMenu.js';
+/**
+ * React NodeView for the `prosCons` container — hosts the in-block **gear menu**
+ * (Width) at the top-end corner. The two `prosColumn` / `consColumn` children
+ * keep their plain `renderHTML` (label + body); only the container needs React,
+ * for the gear. Two layers like FAQ/Alert: a full-width outer anchor
+ * (`.pilotiq-pros-cons`, stable so the gear doesn't move on a width toggle)
+ * wrapping the inner `.pilotiq-pros-cons-content`, which carries the two-column
+ * grid + max-width / centering. The `width` attr drives `data-width` (read by
+ * the consumer CSS, shared with the read-side renderer).
+ */
+export function ProsConsNodeView({ node, updateAttributes, editor }) {
+    const width = node.attrs['width'] === 'full' ? 'full' : 'contained';
+    const settings = [
+        {
+            kind: 'select',
+            key: 'width',
+            label: 'Width',
+            value: width,
+            options: [
+                { value: 'contained', label: 'Contained' },
+                { value: 'full', label: 'Full width' },
+            ],
+            onChange: (w) => updateAttributes({ width: w }),
+        },
+    ];
+    return (_jsxs(NodeViewWrapper, { "data-type": "prosCons", "data-width": width, className: "pilotiq-pros-cons relative", children: [editor.isEditable && (_jsx(BlockSettingsMenu, { settings: settings, label: "Pros & cons settings", hoverClass: "[.pilotiq-pros-cons:hover_&]:opacity-100" })), _jsx(NodeViewContent, { className: "pilotiq-pros-cons-content" })] }));
+}

package/dist/render.js

@@ -145,14 +145,14 @@ function renderNode(node, opts) {
         case 'detailsContent': return renderChildren(n, opts);
         case 'grid': return renderGrid(n, opts);
         case 'gridColumn': return wrap('div', n, opts);
-        case 'keyTakeaways': return labeledBlockHtml('pilotiq-key-takeaways', 'Key takeaways', n, opts);
-        case 'summary': return labeledBlockHtml('pilotiq-summary', 'Summary', n, opts);
-        case 'faq': return labeledBlockHtml('pilotiq-faq', 'FAQ', n, opts);
-        case 'faqItem': return `<div class="pilotiq-faq-item">${renderChildren(n, opts)}</div>`;
-        case 'faqQuestion': return `<div class="pilotiq-faq-question"><span class="pilotiq-faq-marker">Q</span><span class="pilotiq-faq-text">${renderChildren(n, opts)}</span></div>`;
-        case 'faqAnswer': return `<div class="pilotiq-faq-answer"><span class="pilotiq-faq-marker">A</span><div class="pilotiq-faq-body">${renderChildren(n, opts)}</div></div>`;
+        case 'keyTakeaways': return labeledBlockHtml('pilotiq-key-takeaways', 'Key takeaways', n, opts, true);
+        case 'summary': return labeledBlockHtml('pilotiq-summary', 'Summary', n, opts, true);
+        case 'faq': return renderFaqNode(n, opts);
+        case 'faqItem': return renderFaqItem(n, opts);
+        case 'faqQuestion': return `<summary class="pilotiq-faq-question">${renderChildren(n, opts)}</summary>`;
+        case 'faqAnswer': return `<div class="pilotiq-faq-answer">${renderChildren(n, opts)}</div>`;
         case 'alert': return renderAlertNode(n, opts);
-        case 'prosCons': return `<div class="pilotiq-pros-cons">${renderChildren(n, opts)}</div>`;
+        case 'prosCons': return renderProsCons(n, opts);
         case 'prosColumn': return labeledBlockHtml('pilotiq-pros', 'Pros', n, opts);
         case 'consColumn': return labeledBlockHtml('pilotiq-cons', 'Cons', n, opts);
         case 'mergeTag': return renderMergeTag(n, opts);
@@ -362,11 +362,42 @@ function clampGridColumnsForRender(raw) {
 // Mirrors the editor's `renderHTML` (extensions/contentBlocks.ts): a small
 // label above an editable body. Consumer owns the `pilotiq-*` CSS. Covers
 // keyTakeaways / summary / faq / alert / prosCons (+ pros/cons columns).
-function labeledBlockHtml(cssClass, label, n, opts) {
-    return (`<div class="${cssClass}">` +
-        `<div class="pilotiq-block-label">${escapeHtml(label)}</div>` +
-        `<div class="pilotiq-block-body">${renderChildren(n, opts)}</div>` +
-        `</div>`);
+function labeledBlockHtml(cssClass, label, n, opts, wrap = false) {
+    const inner = `<div class="pilotiq-block-label">${escapeHtml(label)}</div>` +
+        `<div class="pilotiq-block-body">${renderChildren(n, opts)}</div>`;
+    // Top-level labelled blocks (summary / keyTakeaways) carry the gear menu, so
+    // they get the two-layer anchor: a full-width outer + an inner
+    // `.pilotiq-block-content` that holds the max-width / width toggle. Columns
+    // inside Pros & cons render flat (no width of their own).
+    if (!wrap)
+        return `<div class="${cssClass}">${inner}</div>`;
+    const width = n.attrs?.['width'] === 'full' ? ' data-width="full"' : '';
+    return `<div class="${cssClass}"${width}><div class="pilotiq-block-content">${inner}</div></div>`;
+}
+// Pros & cons — two labelled columns. Same two-layer anchor as the labelled
+// blocks: a full-width outer (`.pilotiq-pros-cons`) + an inner
+// `.pilotiq-pros-cons-content` that carries the grid + width toggle.
+function renderProsCons(n, opts) {
+    const width = n.attrs?.['width'] === 'full' ? ' data-width="full"' : '';
+    return `<div class="pilotiq-pros-cons"${width}><div class="pilotiq-pros-cons-content">${renderChildren(n, opts)}</div></div>`;
+}
+// FAQ accordion — native, zero-JS `<details>`/`<summary>` per item (mirrors the
+// editor's FaqItem NodeView). Each item's `open` attr drives the platform
+// `open` attribute. Consumer owns the `.pilotiq-faq*` CSS.
+function renderFaqNode(n, opts) {
+    const items = (Array.isArray(n.content) ? n.content : []).filter((k) => k?.type === 'faqItem');
+    const width = n.attrs?.['width'] === 'full' ? ' data-width="full"' : '';
+    return `<div class="pilotiq-faq"${width}><div class="pilotiq-faq-content">${items.map((it) => renderFaqItem(it, opts)).join('')}</div></div>`;
+}
+function renderFaqItem(n, opts) {
+    const kids = Array.isArray(n.content) ? n.content : [];
+    const q = kids.find((k) => k?.type === 'faqQuestion');
+    const a = kids.find((k) => k?.type === 'faqAnswer');
+    const open = n.attrs?.['open'] !== false;
+    return (`<details class="pilotiq-faq-item"${open ? ' open' : ''}>` +
+        `<summary class="pilotiq-faq-question">${q ? renderChildren(q, opts) : ''}</summary>` +
+        `<div class="pilotiq-faq-answer">${a ? renderChildren(a, opts) : ''}</div>` +
+        `</details>`);
 }
 // shadcn-style callout: icon + editable title + description. Mirrors the
 // editor NodeView (`AlertNodeView`); `coerceAlertType` / `ALERT_ICON_INNER` /
@@ -377,6 +408,7 @@ function renderAlertNode(n, opts) {
     const icon = typeof n.attrs?.['icon'] === 'string' ? n.attrs['icon'] : '';
     const iconSvg = typeof n.attrs?.['iconSvg'] === 'string' ? n.attrs['iconSvg'] : '';
     const color = typeof n.attrs?.['color'] === 'string' ? n.attrs['color'] : '';
+    const width = n.attrs?.['width'] === 'full' ? ' data-width="full"' : '';
     const kids = Array.isArray(n.content) ? n.content : [];
     const title = kids.find((k) => k?.type === 'alertTitle');
     const body = kids.find((k) => k?.type === 'alertBody');
@@ -390,10 +422,15 @@ function renderAlertNode(n, opts) {
         ? ` style="border-color:color-mix(in srgb,${color} 35%,transparent);background-color:color-mix(in srgb,${color} 8%,transparent)"`
         : '';
     const iconStyle = tinted ? ` style="color:${color}"` : '';
-    return (`<div class="pilotiq-alert pilotiq-alert-${type}" data-alert-type="${type}" role="note"${style}>` +
+    // Two layers (mirrors the FAQ block): a full-width `.pilotiq-alert` anchor
+    // and an inner `.pilotiq-alert-box` that carries the visual box + the
+    // contained/full width. Keeps in-block controls anchored to a stable edge.
+    return (`<div class="pilotiq-alert" data-alert-type="${type}"${width}>` +
+        `<div class="pilotiq-alert-box pilotiq-alert-${type}" role="note"${style}>` +
         `<span class="pilotiq-alert-icon" aria-hidden="true"${iconStyle}>${buildAlertIconSvg(icon, iconSvg, type)}</span>` +
         `<div class="pilotiq-alert-title">${titleHtml}</div>` +
         `<div class="pilotiq-alert-description">${bodyHtml}</div>` +
+        `</div>` +
         `</div>`);
 }
 // Only emit a color into inline CSS when it's a plain literal (hex / rgb(a) /

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pilotiq/tiptap",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "description": "Tiptap rich-text editor adapter for @pilotiq/pilotiq — slash menu, draggable blocks, custom-block API",
   "license": "MIT",
   "repository": {