@pilotiq/tiptap 3.13.0 → 3.15.0

package/CHANGELOG.md

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