@pilotiq/tiptap 3.13.0 → 3.14.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @pilotiq/tiptap
 
+## 3.14.0
+
+### Minor Changes
+
+- b2fc753: Redesigned the **Alert** content block into an interactive, themeable callout — and made it round-trip through the Markdown editor.
+
+  **Rich-text + markdown editor:**
+
+  - shadcn-style card on the panel's theme tokens (icon column + editable **title** and **body** — previously the label was the fixed variant name).
+  - In-block **variant picker** — `info` / `warning` / `success` / `tip` / **`custom`** (the four slash-menu alert entries collapse into one "Alert").
+  - In-block **icon picker** — a curated inline-SVG library (~18 icons, ~1-2KB, no `lucide-react`) plus a **"Custom SVG"** paste field. Custom SVG is sanitized via a pure allowlist (`sanitizeIconSvg`) on input and on render — scripts, event handlers, external refs (`use`/`image`/`a`/`href`), `<style>`, `<foreignObject>` are all stripped.
+  - The **custom** variant gets an in-block **color** swatch; the box + icon tint via `color-mix` (the value is validated before it reaches inline CSS).
+  - **Markdown round-trip** — `:::alert{type=warning icon=rocket} Title` admonition syntax (title rides the opening fence line). `MarkdownField` gains an **Alert** toolbar button (added to the default toolbar).
+
+  **Read-side** (`renderRichTextToHtml`) emits the new `<div class="pilotiq-alert"><span class="pilotiq-alert-icon">…</span><div class="pilotiq-alert-title">…</div><div class="pilotiq-alert-description">…</div></div>` structure; icon SVGs are shared with the editor so the two never drift. Consumer owns the CSS.
+
+  **Back-compat:** the node's content model changed (`block+` → `alertTitle alertBody`). HTML from the previous alert (label + body divs) is parsed into the new shape; JSON-stored alerts from the prior release may lose their body and should be re-inserted.
+
 ## 3.13.0
 
 ### Minor Changes

package/dist/extensions/SlashCommandExtension.js

@@ -189,24 +189,19 @@ export function buildSlashItems(blocks, mergeTags, query, insert) {
             }).run(),
         },
         {
-            key: 'alert-info', label: 'Alert: Info', icon: 'ⓘ', group: 'Content',
-            searchKey: 'alert callout notice info note',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).insertContent({ type: 'alert', attrs: { type: 'info' }, content: [{ type: 'paragraph' }] }).run(),
-        },
-        {
-            key: 'alert-warning', label: 'Alert: Warning', icon: '⚠️', group: 'Content',
-            searchKey: 'alert callout notice warning caution danger',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).insertContent({ type: 'alert', attrs: { type: 'warning' }, content: [{ type: 'paragraph' }] }).run(),
-        },
-        {
-            key: 'alert-success', label: 'Alert: Success', icon: '✅', group: 'Content',
-            searchKey: 'alert callout notice success ok done',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).insertContent({ type: 'alert', attrs: { type: 'success' }, content: [{ type: 'paragraph' }] }).run(),
-        },
-        {
-            key: 'alert-tip', label: 'Alert: Tip', icon: '💡', group: 'Content',
-            searchKey: 'alert callout notice tip hint',
-            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).insertContent({ type: 'alert', attrs: { type: 'tip' }, content: [{ type: 'paragraph' }] }).run(),
+            // One Alert block — the variant (info/warning/success/tip/custom) is
+            // switched in-block via the NodeView's picker. Defaults to Info with the
+            // label pre-filled as the editable title.
+            key: 'alert', label: 'Alert', icon: '⚠️', group: 'Content',
+            searchKey: 'alert callout notice info warning success tip note custom caution danger hint',
+            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).insertContent({
+                type: 'alert',
+                attrs: { type: 'info' },
+                content: [
+                    { type: 'alertTitle', content: [{ type: 'text', text: 'Info' }] },
+                    { type: 'alertBody', content: [{ type: 'paragraph' }] },
+                ],
+            }).run(),
         },
         // Image entry shares the toolbar's attach-files dialog; only surfaced
         // when the panel has wired an `UploadAdapter`. Without one, the dialog

package/dist/extensions/alertVariants.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Alert variant primitives — shared by the node (`contentBlocks.ts`), its
+ * React NodeView (`AlertNodeView.tsx`), and the read-side serializer
+ * (`render.ts`). Kept dependency-free (no `@tiptap/*`) so the server
+ * renderer can import it without pulling a Tiptap runtime.
+ *
+ * `info` / `warning` / `success` / `tip` are presets (default icon + accent);
+ * `custom` is the user-driven variant (own icon + color, Phase 2).
+ */
+export declare const ALERT_VARIANTS: readonly ["info", "warning", "success", "tip", "custom"];
+export type AlertType = (typeof ALERT_VARIANTS)[number];
+export declare const ALERT_VARIANT_LABEL: Record<AlertType, string>;
+/** Coerce an unknown value to a known variant, defaulting to `info`. */
+export declare function coerceAlertType(value: unknown): AlertType;
+/**
+ * Curated icon library — inner SVG markup (lucide paths) keyed by name. Shared
+ * by the NodeView picker (`AlertNodeView`) and the read-side renderer
+ * (`render.ts`) so the editor and published output never drift. Hand-picked
+ * (no `lucide-react` dep, no icon font) so the whole set is ~1-2KB gzipped.
+ * Wrap in `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+ * stroke-width="2" stroke-linecap="round" stroke-linejoin="round">…</svg>`.
+ */
+export declare const ALERT_ICONS: Record<string, string>;
+/** Icon keys, in picker display order. */
+export declare const ALERT_ICON_KEYS: string[];
+/** The default icon key per variant (used when the block sets no `icon`). */
+export declare const VARIANT_DEFAULT_ICON: Record<AlertType, string>;
+/**
+ * Resolve the inner SVG for a block: the explicit `icon` override when set +
+ * known, else the variant's default. Shared by the editor + read-side render.
+ */
+export declare function resolveAlertIconInner(iconKey: string | undefined, variant: AlertType): string;
+/**
+ * Sanitize a user-pasted SVG string to a safe subset. Returns '' for anything
+ * that isn't an `<svg>` element or that sanitizes to nothing.
+ */
+export declare function sanitizeIconSvg(raw: unknown): string;
+/**
+ * Build the FULL `<svg>` string for a block: a sanitized user `iconSvg` when
+ * present, else the (library or variant-default) icon wrapped in the standard
+ * stroke svg. Shared by the editor NodeView and the read-side renderer.
+ */
+export declare function buildAlertIconSvg(iconKey: string | undefined, iconSvg: string | undefined, variant: AlertType): string;
+//# sourceMappingURL=alertVariants.d.ts.map

package/dist/extensions/alertVariants.js

@@ -0,0 +1,132 @@
+/**
+ * Alert variant primitives — shared by the node (`contentBlocks.ts`), its
+ * React NodeView (`AlertNodeView.tsx`), and the read-side serializer
+ * (`render.ts`). Kept dependency-free (no `@tiptap/*`) so the server
+ * renderer can import it without pulling a Tiptap runtime.
+ *
+ * `info` / `warning` / `success` / `tip` are presets (default icon + accent);
+ * `custom` is the user-driven variant (own icon + color, Phase 2).
+ */
+export const ALERT_VARIANTS = ['info', 'warning', 'success', 'tip', 'custom'];
+export const ALERT_VARIANT_LABEL = {
+    info: 'Info', warning: 'Warning', success: 'Success', tip: 'Tip', custom: 'Custom',
+};
+/** Coerce an unknown value to a known variant, defaulting to `info`. */
+export function coerceAlertType(value) {
+    return ALERT_VARIANTS.includes(String(value)) ? value : 'info';
+}
+/**
+ * Curated icon library — inner SVG markup (lucide paths) keyed by name. Shared
+ * by the NodeView picker (`AlertNodeView`) and the read-side renderer
+ * (`render.ts`) so the editor and published output never drift. Hand-picked
+ * (no `lucide-react` dep, no icon font) so the whole set is ~1-2KB gzipped.
+ * Wrap in `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+ * stroke-width="2" stroke-linecap="round" stroke-linejoin="round">…</svg>`.
+ */
+export const ALERT_ICONS = {
+    info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+    warning: '<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"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+    check: '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+    lightbulb: '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
+    sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/>',
+    bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+    megaphone: '<path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>',
+    flame: '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
+    star: '<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>',
+    heart: '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>',
+    shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
+    zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
+    flag: '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/>',
+    bookmark: '<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>',
+    rocket: '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>',
+    help: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
+    error: '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
+    pin: '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',
+};
+/** Icon keys, in picker display order. */
+export const ALERT_ICON_KEYS = Object.keys(ALERT_ICONS);
+/** The default icon key per variant (used when the block sets no `icon`). */
+export const VARIANT_DEFAULT_ICON = {
+    info: 'info', warning: 'warning', success: 'check', tip: 'lightbulb', custom: 'sparkles',
+};
+/**
+ * Resolve the inner SVG for a block: the explicit `icon` override when set +
+ * known, else the variant's default. Shared by the editor + read-side render.
+ */
+export function resolveAlertIconInner(iconKey, variant) {
+    if (iconKey && ALERT_ICONS[iconKey])
+        return ALERT_ICONS[iconKey];
+    return ALERT_ICONS[VARIANT_DEFAULT_ICON[variant]];
+}
+// ── Custom SVG (user-pasted) — sanitized allowlist ───────────────────────────
+//
+// Custom SVG is raw user markup that renders on PUBLIC pages, so it's an XSS
+// surface. We sanitize with a conservative pure-string allowlist (no DOMPurify
+// — keeps the bundle lean and works server-side in render.ts): only known
+// presentational SVG tags + geometry/paint attributes survive; scripts, event
+// handlers, external refs (`use`/`image`/`a`/`href`), `<style>`, `<animate>`,
+// `<foreignObject>` and unknown attributes are dropped. Applied on input AND on
+// every render (defence in depth — a tampered stored attr stays safe).
+const SVG_ALLOWED_TAGS = new Set([
+    'svg', 'g', 'path', 'circle', 'ellipse', 'rect', 'line', 'polyline', 'polygon',
+    'defs', 'lineargradient', 'radialgradient', 'stop', 'title', 'desc', 'clippath',
+]);
+const SVG_ALLOWED_ATTRS = new Set([
+    'viewbox', 'xmlns', 'width', 'height', 'preserveaspectratio',
+    'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin',
+    'stroke-dasharray', 'stroke-dashoffset', 'stroke-opacity', 'stroke-miterlimit',
+    'fill-opacity', 'fill-rule', 'clip-rule', 'clip-path', 'opacity', 'transform',
+    'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'x1', 'y1', 'x2', 'y2',
+    'points', 'class', 'gradientunits', 'gradienttransform', 'offset',
+    'stop-color', 'stop-opacity', 'id',
+]);
+/**
+ * Sanitize a user-pasted SVG string to a safe subset. Returns '' for anything
+ * that isn't an `<svg>` element or that sanitizes to nothing.
+ */
+export function sanitizeIconSvg(raw) {
+    if (typeof raw !== 'string')
+        return '';
+    let s = raw.trim();
+    if (!/^<svg[\s>]/i.test(s))
+        return '';
+    // Drop comments / CDATA / PIs / doctype, then dangerous element blocks whole.
+    s = s.replace(/<!--[\s\S]*?-->/g, '').replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, '')
+        .replace(/<\?[\s\S]*?\?>/g, '').replace(/<!DOCTYPE[^>]*>/gi, '');
+    s = s.replace(/<(script|style|foreignObject)\b[\s\S]*?<\/\1\s*>/gi, '');
+    // Allowlist every remaining tag + its attributes.
+    s = s.replace(/<\/?([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)\s*(\/?)>/g, (_m, tag, attrs, slash) => {
+        const name = String(tag).toLowerCase();
+        if (!SVG_ALLOWED_TAGS.has(name))
+            return '';
+        if (_m.startsWith('</'))
+            return `</${name}>`;
+        const kept = [];
+        const attrRe = /([a-zA-Z_:][\w:.-]*)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/g;
+        let am;
+        while ((am = attrRe.exec(attrs)) !== null) {
+            const an = (am[1] ?? '').toLowerCase();
+            if (!SVG_ALLOWED_ATTRS.has(an))
+                continue;
+            const av = (am[2] ?? '').replace(/^["']|["']$/g, '');
+            if (/javascript:|expression\(|[<>]/i.test(av))
+                continue;
+            kept.push(`${an}="${av.replace(/"/g, '&quot;')}"`);
+        }
+        return `<${name}${kept.length ? ' ' + kept.join(' ') : ''}${slash ? ' /' : ''}>`;
+    });
+    s = s.trim();
+    return /^<svg[\s>]/i.test(s) ? s : '';
+}
+const ICON_SVG_WRAP_OPEN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">';
+/**
+ * Build the FULL `<svg>` string for a block: a sanitized user `iconSvg` when
+ * present, else the (library or variant-default) icon wrapped in the standard
+ * stroke svg. Shared by the editor NodeView and the read-side renderer.
+ */
+export function buildAlertIconSvg(iconKey, iconSvg, variant) {
+    const custom = sanitizeIconSvg(iconSvg);
+    if (custom)
+        return custom;
+    return `${ICON_SVG_WRAP_OPEN}${resolveAlertIconInner(iconKey, variant)}</svg>`;
+}

package/dist/extensions/contentBlocks.d.ts

@@ -1,15 +1,30 @@
 import { Node, Extension } from '@tiptap/core';
+export { ALERT_VARIANTS, ALERT_VARIANT_LABEL, coerceAlertType, type AlertType } from './alertVariants.js';
 export declare const KeyTakeaways: Node<any, any>;
 export declare const Summary: Node<any, any>;
 export declare const Faq: Node<any, any>;
 export declare const FaqItem: Node<any, any>;
 export declare const FaqQuestion: Node<any, any>;
 export declare const FaqAnswer: Node<any, any>;
-export declare const ALERT_TYPES: readonly ["info", "warning", "success", "tip"];
-export type AlertType = (typeof ALERT_TYPES)[number];
-/** Exported so `render.ts` shares the same coercion at the server boundary. */
-export declare function coerceAlertType(value: unknown): AlertType;
+type AnyMd = any;
+/** Parse a directive info string (`alert{type=warning}`) into an attrs map. */
+export declare function parseDirectiveAttrs(info: string): Record<string, string>;
+/**
+ * Register the `:::alert{…}` block rule + HTML renderers on a markdown-it
+ * instance. Idempotent per instance. Wired as `Alert`'s `markdown.parse.setup`.
+ */
+export declare function setupAlertDirective(md: AnyMd): void;
+/**
+ * `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 declare function serializeAlertMarkdown(state: AnyMd, node: AnyMd): void;
 export declare const Alert: Node<any, any>;
+/** The Alert heading — a single editable line, defaults to the variant label. */
+export declare const AlertTitle: Node<any, any>;
+/** The Alert body — the editable description (`block+`). */
+export declare const AlertBody: Node<any, any>;
 export declare const ProsCons: Node<any, any>;
 export declare const ProsColumn: Node<any, any>;
 export declare const ConsColumn: Node<any, any>;

package/dist/extensions/contentBlocks.js

@@ -1,4 +1,10 @@
 import { Node, Extension, mergeAttributes } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { AlertNodeView } from '../react/AlertNodeView.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+`). */
 function labeledBlock(spec) {
     return Node.create({
@@ -158,18 +164,172 @@ export const FaqAnswer = Node.create({
         ];
     },
 });
-// ── 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 +337,68 @@ export const Alert = Node.create({
                 parseHTML: (el) => coerceAlertType(el.getAttribute('data-alert-type')),
                 renderHTML: (attrs) => ({ 'data-alert-type': coerceAlertType(attrs['type']) }),
             },
+            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);
+    },
+});
+/** 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 [
+            { 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];
     },
-    renderHTML({ node, HTMLAttributes }) {
-        const type = coerceAlertType(node.attrs['type']);
+});
+/** The Alert body — the editable description (`block+`). */
+export const AlertBody = Node.create({
+    name: 'alertBody',
+    content: 'block+',
+    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="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({
@@ -274,6 +482,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,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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';
+/**
+ * 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.
+ *
+ * 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 } }));
+}
+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 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);
+    const boxStyle = tinted
+        ? {
+            borderColor: `color-mix(in srgb, ${color} 35%, transparent)`,
+            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 applyCustomSvg = () => {
+        const clean = sanitizeIconSvg(svgDraft);
+        if (!clean) {
+            setSvgError(true);
+            return;
+        }
+        updateAttributes({ iconSvg: clean, icon: '' });
+        closeIconPicker();
+    };
+    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" })] }));
+}

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/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.
  *
@@ -365,17 +368,42 @@ function labeledBlockHtml(cssClass, label, n, opts) {
         `<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' };
+// 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 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}"` : '';
+    return (`<div class="pilotiq-alert pilotiq-alert-${type}" data-alert-type="${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>`);
 }
+// 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.14.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": {