@pilotiq/tiptap 3.13.0 → 3.15.0

package/dist/extensions/contentBlocks.js

@@ -1,11 +1,61 @@
 import { Node, Extension, mergeAttributes } from '@tiptap/core';
-/** A labelled region whose body is ordinary editable content (`block+`). */
+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';
+/**
+ * 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' }];
         },
@@ -13,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' });
@@ -35,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 {
@@ -119,57 +177,223 @@ 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];
+    },
 });
-// ── Alert — a typed notice; the label IS the type (Info/Warning/Success/Tip) ──
-export const ALERT_TYPES = ['info', 'warning', 'success', 'tip'];
-const ALERT_LABEL = { info: 'Info', warning: 'Warning', success: 'Success', tip: 'Tip' };
-/** Exported so `render.ts` shares the same coercion at the server boundary. */
-export function coerceAlertType(value) {
-    return ALERT_TYPES.includes(String(value)) ? value : 'info';
+const DIRECTIVE_MARKER = 0x3a; // ':'
+const DIRECTIVE_MIN_MARKERS = 3;
+/** Parse a directive info string (`alert{type=warning}`) into an attrs map. */
+export function parseDirectiveAttrs(info) {
+    const out = {};
+    const m = /\{([^}]*)\}/.exec(info);
+    if (!m || !m[1])
+        return out;
+    for (const pair of m[1].split(/[\s,]+/)) {
+        const eq = pair.indexOf('=');
+        if (eq === -1)
+            continue;
+        out[pair.slice(0, eq).trim()] = pair.slice(eq + 1).trim().replace(/^["']|["']$/g, '');
+    }
+    return out;
 }
+/** The directive name — the token before the first `{` or whitespace. */
+function directiveName(info) {
+    return info.trim().split(/[\s{]/, 1)[0] ?? '';
+}
+/**
+ * The directive title — the free text after `{attrs}` on the opening fence
+ * line (Docusaurus-admonition style: `:::alert{type=warning} Heads up`).
+ * Empty when omitted.
+ */
+function directiveTitle(info) {
+    const close = info.lastIndexOf('}');
+    const rest = close === -1 ? info.replace(/^\S+/, '') : info.slice(close + 1);
+    return rest.trim();
+}
+/** Minimal HTML escape for text interpolated into the directive's HTML. */
+function escapeDirectiveHtml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+/**
+ * Register the `:::alert{…}` block rule + HTML renderers on a markdown-it
+ * instance. Idempotent per instance. Wired as `Alert`'s `markdown.parse.setup`.
+ */
+export function setupAlertDirective(md) {
+    if (md.__pilotiqAlertDirective)
+        return;
+    md.__pilotiqAlertDirective = true;
+    md.block.ruler.before('fence', 'pilotiqAlert', (state, startLine, endLine, silent) => {
+        let pos = state.bMarks[startLine] + state.tShift[startLine];
+        let max = state.eMarks[startLine];
+        if (state.src.charCodeAt(pos) !== DIRECTIVE_MARKER)
+            return false;
+        const memStart = pos;
+        while (pos <= max && state.src.charCodeAt(pos) === DIRECTIVE_MARKER)
+            pos++;
+        const markerCount = pos - memStart;
+        if (markerCount < DIRECTIVE_MIN_MARKERS)
+            return false;
+        const info = state.src.slice(pos, max).trim();
+        if (directiveName(info) !== 'alert')
+            return false;
+        if (silent)
+            return true;
+        // Scan for the closing fence (>= as many markers, nothing but space after).
+        let nextLine = startLine;
+        let autoClosed = false;
+        for (;;) {
+            nextLine++;
+            if (nextLine >= endLine)
+                break;
+            pos = state.bMarks[nextLine] + state.tShift[nextLine];
+            max = state.eMarks[nextLine];
+            if (state.src.charCodeAt(pos) !== DIRECTIVE_MARKER)
+                continue;
+            if (state.sCount[nextLine] - state.blkIndent >= 4)
+                continue;
+            let closePos = pos;
+            while (closePos <= max && state.src.charCodeAt(closePos) === DIRECTIVE_MARKER)
+                closePos++;
+            if (closePos - pos < markerCount)
+                continue;
+            if (state.src.slice(closePos, max).trim() !== '')
+                continue;
+            autoClosed = true;
+            break;
+        }
+        const oldParent = state.parentType;
+        const oldLineMax = state.lineMax;
+        state.parentType = 'pilotiqAlert';
+        state.lineMax = nextLine;
+        const attrs = parseDirectiveAttrs(info);
+        let token = state.push('pilotiq_alert_open', 'div', 1);
+        token.markup = ':'.repeat(markerCount);
+        token.block = true;
+        token.info = info;
+        token.meta = { type: attrs['type'], icon: attrs['icon'], color: attrs['color'], title: directiveTitle(info) };
+        token.map = [startLine, nextLine];
+        state.md.block.tokenize(state, startLine + 1, nextLine);
+        token = state.push('pilotiq_alert_close', 'div', -1);
+        token.markup = ':'.repeat(markerCount);
+        token.block = true;
+        state.parentType = oldParent;
+        state.lineMax = oldLineMax;
+        state.line = nextLine + (autoClosed ? 1 : 0);
+        return true;
+    }, { alt: ['paragraph', 'reference', 'blockquote', 'list'] });
+    // Open emits the alert wrapper + the (closed) title div + the OPEN body div;
+    // the tokenized content renders into the body; close shuts body + wrapper.
+    // The data-types match `Alert`/`AlertTitle`/`AlertBody`'s `parseHTML`, so the
+    // HTML-based tiptap-markdown parse path revives the full node structure.
+    md.renderer.rules['pilotiq_alert_open'] = (tokens, idx) => {
+        const meta = tokens[idx].meta ?? {};
+        const type = coerceAlertType(meta.type);
+        const title = escapeDirectiveHtml(String(meta.title ?? ''));
+        const icon = meta.icon ? ` data-icon="${escapeDirectiveHtml(String(meta.icon))}"` : '';
+        const color = meta.color ? ` data-color="${escapeDirectiveHtml(String(meta.color))}"` : '';
+        return (`<div data-type="alert" class="pilotiq-alert pilotiq-alert-${type}" data-alert-type="${type}"${icon}${color}>` +
+            `<div data-type="alertTitle" class="pilotiq-alert-title">${title}</div>` +
+            `<div data-type="alertBody" class="pilotiq-alert-description">\n`);
+    };
+    md.renderer.rules['pilotiq_alert_close'] = () => '</div></div>\n';
+}
+/**
+ * `tiptap-markdown` serializer for the Alert node → `:::alert{type=…} Title`.
+ * The title rides the opening fence line (admonition style); the body markdown
+ * sits between the fences.
+ */
+export function serializeAlertMarkdown(state, node) {
+    const type = coerceAlertType(node.attrs?.type);
+    const icon = String(node.attrs?.icon ?? '').trim();
+    const color = String(node.attrs?.color ?? '').trim();
+    const title = String(node.firstChild?.textContent ?? '').replace(/\s+/g, ' ').trim();
+    const body = node.childCount > 1 ? node.child(node.childCount - 1) : null;
+    // `icon` / `color` are space-free tokens (icon keys + hex), so they ride the
+    // whitespace-split directive attrs cleanly.
+    const attrs = [`type=${type}`];
+    if (icon)
+        attrs.push(`icon=${icon}`);
+    if (color)
+        attrs.push(`color=${color}`);
+    state.write(`:::alert{${attrs.join(' ')}}${title ? ' ' + title : ''}\n`);
+    if (body)
+        state.renderContent(body);
+    state.ensureNewLine();
+    state.write(':::');
+    state.closeBlock(node);
+}
+// ── Alert — shadcn-style callout: icon + editable title + editable body ───────
+//
+// `alert` wraps two editable children: `alertTitle` (the heading, defaults to
+// the variant label) and `alertBody` (the description). The in-editor chrome —
+// icon, variant picker, theme styling — lives in the React NodeView
+// (`AlertNodeView`); `renderHTML` here is the headless / clipboard / getHTML
+// fallback, and `render.ts` owns the published read-side HTML. Variant lives on
+// the `type` attr (info/warning/success/tip/custom); `icon` / `color` back the
+// Phase-2 per-block pickers.
 export const Alert = Node.create({
     name: 'alert',
     group: 'block',
-    content: 'block+',
+    content: 'alertTitle alertBody',
     defining: true,
+    // Markdown round-trip — `:::alert{type=…} Title` (only consulted when the
+    // `tiptap-markdown` extension is present, i.e. the Markdown editor).
+    addStorage() {
+        return {
+            markdown: {
+                serialize: serializeAlertMarkdown,
+                parse: { setup: setupAlertDirective },
+            },
+        };
+    },
     addAttributes() {
         return {
             type: {
@@ -177,20 +401,71 @@ 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') ?? '',
+                renderHTML: (attrs) => (attrs['icon'] ? { 'data-icon': String(attrs['icon']) } : {}),
+            },
+            // User-pasted custom SVG (sanitized). Wins over `icon` when set; not
+            // carried in markdown (would bloat the source) — rich-text only.
+            iconSvg: {
+                default: '',
+                parseHTML: (el) => el.getAttribute('data-icon-svg') ?? '',
+                renderHTML: (attrs) => (attrs['iconSvg'] ? { 'data-icon-svg': String(attrs['iconSvg']) } : {}),
+            },
+            color: {
+                default: '',
+                parseHTML: (el) => el.getAttribute('data-color') ?? '',
+                renderHTML: (attrs) => (attrs['color'] ? { 'data-color': String(attrs['color']) } : {}),
+            },
         };
     },
     parseHTML() {
-        return [{ tag: 'div[data-type="alert"]', contentElement: '.pilotiq-block-body' }];
+        return [{ tag: 'div[data-type="alert"]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'alert', class: 'pilotiq-alert' }), 0];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(AlertNodeView);
     },
-    renderHTML({ node, HTMLAttributes }) {
-        const type = coerceAlertType(node.attrs['type']);
+});
+/** The Alert heading — a single editable line, defaults to the variant label. */
+export const AlertTitle = Node.create({
+    name: 'alertTitle',
+    content: 'inline*',
+    defining: true,
+    parseHTML() {
         return [
-            'div',
-            mergeAttributes(HTMLAttributes, { 'data-type': 'alert', class: `pilotiq-alert pilotiq-alert-${type}` }),
-            ['div', { class: 'pilotiq-block-label', contenteditable: 'false' }, ALERT_LABEL[type]],
-            ['div', { class: 'pilotiq-block-body' }, 0],
+            { tag: 'div[data-type="alertTitle"]' },
+            { tag: '.pilotiq-alert-title' },
+            // Back-compat: the pre-redesign alert's non-editable label.
+            { tag: '[data-type="alert"] > .pilotiq-block-label' },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'alertTitle', class: 'pilotiq-alert-title' }), 0];
+    },
+});
+/** The Alert body — the editable description (`block+`). */
+export const AlertBody = Node.create({
+    name: 'alertBody',
+    content: 'block+',
+    defining: true,
+    parseHTML() {
+        return [
+            { tag: 'div[data-type="alertBody"]' },
+            { tag: '.pilotiq-alert-description' },
+            // Back-compat: the pre-redesign alert's body wrapper.
+            { tag: '[data-type="alert"] > .pilotiq-block-body' },
         ];
     },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'alertBody', class: 'pilotiq-alert-description' }), 0];
+    },
 });
 // ── Pros & cons — two labelled columns (each a `block+` body, list by default) ──
 export const ProsCons = Node.create({
@@ -198,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) {
@@ -274,6 +566,8 @@ export const contentBlockNodes = [
     FaqQuestion,
     FaqAnswer,
     Alert,
+    AlertTitle,
+    AlertBody,
     ProsCons,
     ProsColumn,
     ConsColumn,

package/dist/react/AlertNodeView.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import { type NodeViewProps } from '@tiptap/react';
+export declare function AlertNodeView({ node, updateAttributes, editor }: NodeViewProps): ReactElement;
+//# sourceMappingURL=AlertNodeView.d.ts.map

package/dist/react/AlertNodeView.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
+import { ALERT_VARIANTS, ALERT_ICON_KEYS, buildAlertIconSvg, sanitizeIconSvg, coerceAlertType, } from '../extensions/alertVariants.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.
+ *
+ * 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.
+ */
+const VARIANT_BOX = {
+    info: 'border-blue-500/30 bg-blue-50/40 dark:bg-blue-950/20',
+    warning: 'border-amber-500/30 bg-amber-50/40 dark:bg-amber-950/20',
+    success: 'border-emerald-500/30 bg-emerald-50/40 dark:bg-emerald-950/20',
+    tip: 'border-violet-500/30 bg-violet-50/40 dark:bg-violet-950/20',
+    custom: 'border-border bg-card',
+};
+const VARIANT_ICON_COLOR = {
+    info: 'text-blue-600 dark:text-blue-400',
+    warning: 'text-amber-600 dark:text-amber-400',
+    success: 'text-emerald-600 dark:text-emerald-400',
+    tip: 'text-violet-600 dark:text-violet-400',
+    custom: 'text-foreground',
+};
+const VARIANT_LABEL = {
+    info: 'Info', warning: 'Warning', success: 'Success', tip: 'Tip', custom: 'Custom',
+};
+const COLOR_SWATCHES = [
+    { value: '#ef4444', label: 'Red' },
+    { value: '#f97316', label: 'Orange' },
+    { value: '#eab308', label: 'Yellow' },
+    { value: '#22c55e', label: 'Green' },
+    { value: '#06b6d4', label: 'Cyan' },
+    { value: '#3b82f6', label: 'Blue' },
+    { value: '#8b5cf6', label: 'Violet' },
+    { value: '#ec4899', label: 'Pink' },
+    { value: '#64748b', label: 'Slate' },
+    { value: '#0f172a', label: 'Ink' },
+];
+// Renders a full <svg> string (library or sanitized custom) sized to fill.
+function IconSlot({ svg, className }) {
+    return (_jsx("span", { className: 'inline-flex shrink-0 [&>svg]:size-full ' + (className ?? ''), dangerouslySetInnerHTML: { __html: svg } }));
+}
+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 [svgMode, setSvgMode] = useState(false);
+    const [svgDraft, setSvgDraft] = useState('');
+    const [svgError, setSvgError] = useState(false);
+    const boxStyle = tinted
+        ? {
+            borderColor: `color-mix(in srgb, ${color} 35%, transparent)`,
+            backgroundColor: `color-mix(in srgb, ${color} 8%, transparent)`,
+        }
+        : undefined;
+    const resetSvg = () => { setSvgMode(false); setSvgDraft(''); setSvgError(false); };
+    const pickIcon = (key) => { updateAttributes({ icon: key, iconSvg: '' }); resetSvg(); };
+    const applyCustomSvg = () => {
+        const clean = sanitizeIconSvg(svgDraft);
+        if (!clean) {
+            setSvgError(true);
+            return;
+        }
+        updateAttributes({ iconSvg: clean, icon: '' });
+        resetSvg();
+    };
+    // ── 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" })] })] }));
+}