@pilotiq/tiptap 3.13.0 → 3.15.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/MarkdownEditor.js

@@ -15,6 +15,7 @@ import { useCollabRoom, getCollabExtensions, useToast, } from '@pilotiq/pilotiq/
 import { useCollabSeed } from '@rudderjs/sync/react';
 import { AiSuggestionExtension } from '../extensions/AiSuggestionExtension.js';
 import { AiInlineDiffExtension } from '../extensions/AiInlineDiffExtension.js';
+import { Alert, AlertTitle, AlertBody, ContentBlockKeymap } from '../extensions/contentBlocks.js';
 import { useAiSuggestionBridge } from './useAiSuggestionBridge.js';
 import { useAiInlineDiff, useIsAiInlineDiffActive, readAiDiffViewMarker } from './useAiInlineDiff.js';
 import { AiSuggestionBanner } from './AiSuggestionBanner.js';
@@ -39,6 +40,7 @@ const SvgIcons = {
     orderedList: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("line", { x1: "10", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "10", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "10", y1: "18", x2: "21", y2: "18" }), _jsx("path", { d: "M4 6h1v4" }), _jsx("path", { d: "M4 10h2" }), _jsx("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })] })),
     blockquote: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("path", { d: "M3 21c3 0 7-1 7-8V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3" }), _jsx("path", { d: "M15 21c3 0 7-1 7-8V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3" })] })),
     codeBlock: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("polyline", { points: "16 18 22 12 16 6" }), _jsx("polyline", { points: "8 6 2 12 8 18" })] })),
+    alert: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }), _jsx("path", { d: "M12 9v4" }), _jsx("path", { d: "M12 17h.01" })] })),
     attachFiles: (_jsx("svg", { ...ICON_PROPS, children: _jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) })),
     pencil: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("path", { d: "M12 20h9" }), _jsx("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" })] })),
     source: (_jsxs("svg", { ...ICON_PROPS, children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" }), _jsx("line", { x1: "9", y1: "13", x2: "15", y2: "13" }), _jsx("line", { x1: "9", y1: "17", x2: "15", y2: "17" })] })),
@@ -140,6 +142,12 @@ export function MarkdownEditor({ name, fragmentKey, defaultValue, placeholder, d
             // for deleted text. Host's `<AiSuggestionBanner>` drives Accept /
             // Reject via the extension's commands.
             AiInlineDiffExtension,
+            // Alert content block — round-trips to `:::alert{type=…} Title` via the
+            // node's `markdown` storage spec; renders the same shadcn NodeView.
+            Alert,
+            AlertTitle,
+            AlertBody,
+            ContentBlockKeymap,
             ...collabExtensions,
         ],
         // Collab takes ownership of the document — passing `content` would
@@ -366,6 +374,16 @@ export function MarkdownEditor({ name, fragmentKey, defaultValue, placeholder, d
             case 'codeBlock':
                 c.toggleCodeBlock().run();
                 break;
+            case 'alert':
+                c.insertContent({
+                    type: 'alert',
+                    attrs: { type: 'info' },
+                    content: [
+                        { type: 'alertTitle', content: [{ type: 'text', text: 'Info' }] },
+                        { type: 'alertBody', content: [{ type: 'paragraph' }] },
+                    ],
+                }).run();
+                break;
             case 'attachFiles':
                 onAttachClick();
                 break;
@@ -398,6 +416,7 @@ export function MarkdownEditor({ name, fragmentKey, defaultValue, placeholder, d
         orderedList: 'Numbered list',
         blockquote: 'Quote',
         codeBlock: 'Code block',
+        alert: 'Alert',
         attachFiles: 'Attach file',
     };
     const wrapperStyle = {};

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

@@ -32,6 +32,9 @@
  *   custom blocks — any other type renders to `<div data-type="..."
  *           data-attrs="...">` so consumers can replay or style by data-type.
  */
+// Pure variant primitives (no Tiptap runtime) — keeps render.ts server-safe
+// while sharing the alert icon/label source of truth with the editor NodeView.
+import { coerceAlertType, ALERT_VARIANT_LABEL, buildAlertIconSvg } from './extensions/alertVariants.js';
 /**
  * Render Tiptap content to HTML.
  *
@@ -142,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);
@@ -359,23 +362,85 @@ 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>`);
-}
-const ALERT_NODE_TYPES = new Set(['info', 'warning', 'success', 'tip']);
-const ALERT_NODE_LABEL = { info: 'Info', warning: 'Warning', success: 'Success', tip: 'Tip' };
+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` /
+// labels are shared from `alertVariants` so the two never drift. Consumer owns
+// the `.pilotiq-alert*` CSS.
 function renderAlertNode(n, opts) {
-    let type = String(n.attrs?.['type'] ?? '').trim().toLowerCase();
-    if (!ALERT_NODE_TYPES.has(type))
-        type = 'info';
-    return (`<div class="pilotiq-alert pilotiq-alert-${type}" role="note">` +
-        `<div class="pilotiq-block-label">${ALERT_NODE_LABEL[type]}</div>` +
-        `<div class="pilotiq-block-body">${renderChildren(n, opts)}</div>` +
+    const type = coerceAlertType(n.attrs?.['type']);
+    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');
+    const titleHtml = title ? renderChildren(title, opts) : escapeHtml(ALERT_VARIANT_LABEL[type]);
+    const bodyHtml = body ? renderChildren(body, opts) : '';
+    // Custom variant paints from the chosen color (mirrors the editor's
+    // `color-mix` tint); CSS-injection-safe because the value is the parsed
+    // attr, only emitted when it matches a strict color literal.
+    const tinted = type === 'custom' && isSafeColor(color);
+    const style = tinted
+        ? ` 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}"` : '';
+    // 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) /
+// hsl(a) / a CSS keyword) — defends the `style="…"` interpolation against
+// injection via a tampered `color` attr.
+function isSafeColor(value) {
+    return /^#[0-9a-fA-F]{3,8}$/.test(value)
+        || /^(rgb|hsl)a?\([0-9.,%\s/]+\)$/.test(value)
+        || /^[a-zA-Z]+$/.test(value);
+}
 // ─── Merge tags + mentions ───────────────────────────────────────────
 /**
  * Render a `mergeTag` atom — either substitute the value from

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pilotiq/tiptap",
-  "version": "3.13.0",
+  "version": "3.15.0",
   "description": "Tiptap rich-text editor adapter for @pilotiq/pilotiq — slash menu, draggable blocks, custom-block API",
   "license": "MIT",
   "repository": {
@@ -87,11 +87,13 @@
     "@types/react-dom": "^19",
     "esbuild": "^0.27",
     "jsdom": "^29.1.1",
+    "markdown-it": "^14",
+    "@types/markdown-it": "^14",
     "react": "^19",
     "react-dom": "^19",
     "tiptap-markdown": "^0.9",
     "typescript": "^5",
-    "@pilotiq/pilotiq": "^0.37.0"
+    "@pilotiq/pilotiq": "^0.40.0"
   },
   "author": "Suleiman Shahbari",
   "scripts": {