@pilotiq/tiptap 3.12.0 → 3.14.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @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
+
+- ded54a8: Ship five built-in **inline content blocks** in every `RichTextField` (free + pro): **FAQ**, **Alert** (info/warning/success/tip), **Summary**, **Key takeaways**, and **Pros & cons**.
+
+  They are **inline editable nodes** — a small label on top, content typed straight into the block in place (no card, no popup, no border/background). Inserted from the slash menu's **Content** group. Each renders read-side to semantic `pilotiq-*` HTML via `renderRichTextToHtml` (consumer owns the CSS). Quote and Table remain the native `blockquote` / table extensions.
+
+  - Nodes live in `extensions/contentBlocks.ts`; registered by default in the editor.
+  - Alert's type is the label (Info/Warning/Success/Tip), chosen from the slash menu.
+  - Pros & cons is two labelled list columns.
+
+  The `Block.make().schema([...])` API (card + side-panel form) stays for **custom** blocks via `RichTextField.blocks([...])`, but no schema block ships as a default. `Block.toMeta()` / `RichTextField.toMeta()` are now `async` so option-fields (Select/Radio/ToggleButtons) resolve correctly inside custom schema blocks.
+
 ## 3.12.0
 
 ### Minor Changes

package/dist/Block.d.ts

@@ -41,7 +41,13 @@ export declare class Block {
     getLabel(): string;
     getIcon(): string | undefined;
     getSchema(): readonly Field[];
-    /** @internal */
-    toMeta(): BlockMeta;
+    /**
+     * @internal
+     * Async because schema fields can be async — `SelectField` / `RadioField` /
+     * `ToggleButtonsField` resolve their options at meta-build time and return a
+     * `Promise<FieldMeta>`. We await every field so the serialized schema never
+     * contains an unresolved Promise (which would JSON-stringify to `{}`).
+     */
+    toMeta(): Promise<BlockMeta>;
 }
 //# sourceMappingURL=Block.d.ts.map

package/dist/Block.js

@@ -43,13 +43,19 @@ export class Block {
     getLabel() { return this._label ?? this._name; }
     getIcon() { return this._icon; }
     getSchema() { return this._schema; }
-    /** @internal */
-    toMeta() {
+    /**
+     * @internal
+     * Async because schema fields can be async — `SelectField` / `RadioField` /
+     * `ToggleButtonsField` resolve their options at meta-build time and return a
+     * `Promise<FieldMeta>`. We await every field so the serialized schema never
+     * contains an unresolved Promise (which would JSON-stringify to `{}`).
+     */
+    async toMeta() {
         return {
             name: this._name,
             label: this._label ?? this._name,
             icon: this._icon,
-            schema: this._schema.map((f) => f.toMeta()),
+            schema: (await Promise.all(this._schema.map((f) => f.toMeta()))),
         };
     }
 }

package/dist/RichTextField.d.ts

@@ -107,6 +107,7 @@ export interface RichTextFieldMeta extends FieldMeta {
  */
 export declare class RichTextField extends Field {
     private _blocks;
+    private _includeDefaultBlocks;
     private _slashCommand;
     /** `undefined` = use default, `null` = hidden, array = explicit override. */
     private _toolbarOverride;
@@ -127,8 +128,22 @@ export declare class RichTextField extends Field {
     private _mentionsUrl?;
     private constructor();
     static make(name: string): RichTextField;
-    /** Custom blocks available via the slash menu. */
+    /** Custom blocks available via the slash menu (merged on top of the defaults). */
     blocks(blocks: Block[]): this;
+    /**
+     * Toggle the built-in default blocks (FAQ, Alert, Summary, Key takeaways,
+     * Pros & cons) for this field. On by default — every field gets them in the
+     * slash menu and the agent block catalog. Pass `false` to ship only the
+     * blocks declared via `.blocks([...])`.
+     */
+    withDefaultBlocks(enabled?: boolean): this;
+    /**
+     * The blocks this field actually exposes — the default set (unless opted
+     * out) merged with the field's own `.blocks([...])`. A field block with the
+     * same name overrides the default. This is what the editor slash menu, the
+     * side panel, and the agent block catalog all consume.
+     */
+    private resolveBlocks;
     /** Toggle the slash menu (`/`) on/off. Defaults to `true`. */
     slashCommand(enabled: boolean): this;
     /**
@@ -281,6 +296,6 @@ export declare class RichTextField extends Field {
      */
     getToolbarGroups(): ToolbarGroups | null;
     isFloatingToolbarEnabled(): boolean;
-    toMeta(ctx?: RenderContext): RichTextFieldMeta;
+    toMeta(ctx?: RenderContext): Promise<RichTextFieldMeta>;
 }
 //# sourceMappingURL=RichTextField.d.ts.map

package/dist/RichTextField.js

@@ -1,4 +1,5 @@
 import { Field } from '@pilotiq/pilotiq';
+import { defaultBlocks } from './blocks/index.js';
 /** Default top-level toolbar groups — mirrors the reference admin's layout. */
 export const DEFAULT_TOOLBAR_GROUPS = [
     ['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', 'link'],
@@ -59,6 +60,7 @@ export const DEFAULT_HIGHLIGHT_COLORS = [
  */
 export class RichTextField extends Field {
     _blocks = [];
+    _includeDefaultBlocks = true;
     _slashCommand = true;
     /** `undefined` = use default, `null` = hidden, array = explicit override. */
     _toolbarOverride = undefined;
@@ -83,11 +85,37 @@ export class RichTextField extends Field {
     static make(name) {
         return new RichTextField(name);
     }
-    /** Custom blocks available via the slash menu. */
+    /** Custom blocks available via the slash menu (merged on top of the defaults). */
     blocks(blocks) {
         this._blocks = blocks;
         return this;
     }
+    /**
+     * Toggle the built-in default blocks (FAQ, Alert, Summary, Key takeaways,
+     * Pros & cons) for this field. On by default — every field gets them in the
+     * slash menu and the agent block catalog. Pass `false` to ship only the
+     * blocks declared via `.blocks([...])`.
+     */
+    withDefaultBlocks(enabled = true) {
+        this._includeDefaultBlocks = enabled;
+        return this;
+    }
+    /**
+     * The blocks this field actually exposes — the default set (unless opted
+     * out) merged with the field's own `.blocks([...])`. A field block with the
+     * same name overrides the default. This is what the editor slash menu, the
+     * side panel, and the agent block catalog all consume.
+     */
+    resolveBlocks() {
+        const byName = new Map();
+        if (this._includeDefaultBlocks) {
+            for (const b of defaultBlocks)
+                byName.set(b.getName(), b);
+        }
+        for (const b of this._blocks)
+            byName.set(b.getName(), b);
+        return [...byName.values()];
+    }
     /** Toggle the slash menu (`/`) on/off. Defaults to `true`. */
     slashCommand(enabled) {
         this._slashCommand = enabled;
@@ -256,7 +284,7 @@ export class RichTextField extends Field {
         this._mentions = providers;
         return this;
     }
-    getBlocks() { return this._blocks; }
+    getBlocks() { return this.resolveBlocks(); }
     getMergeTags() { return this._mergeTags; }
     getMentionProviders() { return this._mentions; }
     /**
@@ -326,10 +354,13 @@ export class RichTextField extends Field {
     isFloatingToolbarEnabled() {
         return this._floatingToolbar;
     }
-    toMeta(ctx) {
-        // RichTextField has no async resolvers, so the parent always returns
-        // the sync FieldMeta branch — cast away the union for the spread.
-        const base = super.toMeta(ctx);
+    async toMeta(ctx) {
+        // Block fields can be async — Select / Radio / ToggleButtons resolve their
+        // options at meta-build time and return `Promise<FieldMeta>`. So block
+        // metas, and therefore this method, are async. The core resolves every
+        // field via `await field.toMeta(ctx)` (`resolveField`), so returning a
+        // Promise is the supported path.
+        const base = (await Promise.resolve(super.toMeta(ctx)));
         // Strip `attachFiles` server-side when the panel hasn't registered an
         // upload adapter — same posture as `MarkdownField` and the editor
         // chrome stays clean. `uploadUrl` is the wire-side URL for the picker
@@ -342,7 +373,7 @@ export class RichTextField extends Field {
                 .filter(g => g.length > 0) ?? null;
         return {
             ...base,
-            blocks: this._blocks.map((b) => b.toMeta()),
+            blocks: await Promise.all(this.resolveBlocks().map((b) => b.toMeta())),
             slashCommand: this._slashCommand,
             toolbarGroups: filteredGroups,
             floatingToolbar: this._floatingToolbar,

package/dist/blocks/alert.d.ts

@@ -0,0 +1,10 @@
+import { Block } from '../Block.js';
+/**
+ * Default **Alert** (callout) block — a typed notice.
+ *
+ * Wire shape: `{ type: 'info' | 'warning' | 'success' | 'tip'; content: string }`.
+ * Renders read-side as `<div class="pilotiq-alert pilotiq-alert-<type>">`. An
+ * empty / unknown `type` falls back to `info` at render time.
+ */
+export declare const alertBlock: Block;
+//# sourceMappingURL=alert.d.ts.map

package/dist/blocks/alert.js

@@ -0,0 +1,23 @@
+import { SelectField, TextareaField } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **Alert** (callout) block — a typed notice.
+ *
+ * Wire shape: `{ type: 'info' | 'warning' | 'success' | 'tip'; content: string }`.
+ * Renders read-side as `<div class="pilotiq-alert pilotiq-alert-<type>">`. An
+ * empty / unknown `type` falls back to `info` at render time.
+ */
+export const alertBlock = Block.make('alert')
+    .label('Alert')
+    .icon('⚠️')
+    .schema([
+    SelectField.make('type')
+        .label('Type')
+        .options([
+        { value: 'info', label: 'Info' },
+        { value: 'warning', label: 'Warning' },
+        { value: 'success', label: 'Success' },
+        { value: 'tip', label: 'Tip' },
+    ]),
+    TextareaField.make('content').label('Content').placeholder('Alert message…'),
+]);

package/dist/blocks/faq.d.ts

@@ -0,0 +1,9 @@
+import { Block } from '../Block.js';
+/**
+ * Default **FAQ** block — a list of question / answer pairs.
+ *
+ * Wire shape: `{ items: Array<{ question: string; answer: string }> }`.
+ * Renders read-side as a `<div class="pilotiq-faq">` of `<details>` items.
+ */
+export declare const faqBlock: Block;
+//# sourceMappingURL=faq.d.ts.map

package/dist/blocks/faq.js

@@ -0,0 +1,21 @@
+import { Repeater, TextField, TextareaField } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **FAQ** block — a list of question / answer pairs.
+ *
+ * Wire shape: `{ items: Array<{ question: string; answer: string }> }`.
+ * Renders read-side as a `<div class="pilotiq-faq">` of `<details>` items.
+ */
+export const faqBlock = Block.make('faq')
+    .label('FAQ')
+    .icon('❓')
+    .schema([
+    Repeater.make('items')
+        .label('Questions')
+        .schema([
+        TextField.make('question').label('Question').placeholder('What is …?'),
+        TextareaField.make('answer').label('Answer').placeholder('A short, direct answer.'),
+    ])
+        .reorderable()
+        .addActionLabel('Add question'),
+]);

package/dist/blocks/index.d.ts

@@ -0,0 +1,22 @@
+import type { Block } from '../Block.js';
+/**
+ * Schema-form block factories — `Block.make().schema([...])` style, edited via
+ * the right-docked side panel. Kept for **custom / legacy** use via
+ * `RichTextField.blocks([...])`. They are NO LONGER defaults.
+ *
+ * The built-in content blocks — FAQ, Alert, Summary, Key takeaways, Pros & cons
+ * — are now **inline editable nodes** (`extensions/contentBlocks.ts`):
+ * labelled, edited in place, registered directly in the editor + slash menu.
+ */
+export { faqBlock } from './faq.js';
+export { alertBlock } from './alert.js';
+export { summaryBlock } from './summary.js';
+export { keyTakeawaysBlock } from './keyTakeaways.js';
+export { prosConsBlock } from './prosCons.js';
+/**
+ * Schema blocks shipped by default in every `RichTextField`. Empty — the
+ * default content blocks are inline nodes now, not schema-form blocks. A
+ * field's own `.blocks([...])` still merge in via `RichTextField`.
+ */
+export declare const defaultBlocks: readonly Block[];
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/index.js

@@ -0,0 +1,20 @@
+/**
+ * Schema-form block factories — `Block.make().schema([...])` style, edited via
+ * the right-docked side panel. Kept for **custom / legacy** use via
+ * `RichTextField.blocks([...])`. They are NO LONGER defaults.
+ *
+ * The built-in content blocks — FAQ, Alert, Summary, Key takeaways, Pros & cons
+ * — are now **inline editable nodes** (`extensions/contentBlocks.ts`):
+ * labelled, edited in place, registered directly in the editor + slash menu.
+ */
+export { faqBlock } from './faq.js';
+export { alertBlock } from './alert.js';
+export { summaryBlock } from './summary.js';
+export { keyTakeawaysBlock } from './keyTakeaways.js';
+export { prosConsBlock } from './prosCons.js';
+/**
+ * Schema blocks shipped by default in every `RichTextField`. Empty — the
+ * default content blocks are inline nodes now, not schema-form blocks. A
+ * field's own `.blocks([...])` still merge in via `RichTextField`.
+ */
+export const defaultBlocks = [];

package/dist/blocks/keyTakeaways.d.ts

@@ -0,0 +1,10 @@
+import { Block } from '../Block.js';
+/**
+ * Default **Key takeaways** block — a short bulleted list of the article's
+ * main points.
+ *
+ * Wire shape: `{ points: string[] }`. Renders read-side as
+ * `<div class="pilotiq-key-takeaways">` with a label and a `<ul>`.
+ */
+export declare const keyTakeawaysBlock: Block;
+//# sourceMappingURL=keyTakeaways.d.ts.map

package/dist/blocks/keyTakeaways.js

@@ -0,0 +1,15 @@
+import { TagsInput } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **Key takeaways** block — a short bulleted list of the article's
+ * main points.
+ *
+ * Wire shape: `{ points: string[] }`. Renders read-side as
+ * `<div class="pilotiq-key-takeaways">` with a label and a `<ul>`.
+ */
+export const keyTakeawaysBlock = Block.make('key-takeaways')
+    .label('Key takeaways')
+    .icon('🔑')
+    .schema([
+    TagsInput.make('points').label('Key takeaways'),
+]);

package/dist/blocks/prosCons.d.ts

@@ -0,0 +1,9 @@
+import { Block } from '../Block.js';
+/**
+ * Default **Pros & cons** block — two lists, side by side.
+ *
+ * Wire shape: `{ pros: string[]; cons: string[] }`. Renders read-side as
+ * `<div class="pilotiq-pros-cons">` with a `pros` and a `cons` column.
+ */
+export declare const prosConsBlock: Block;
+//# sourceMappingURL=prosCons.d.ts.map

package/dist/blocks/prosCons.js

@@ -0,0 +1,15 @@
+import { TagsInput } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **Pros & cons** block — two lists, side by side.
+ *
+ * Wire shape: `{ pros: string[]; cons: string[] }`. Renders read-side as
+ * `<div class="pilotiq-pros-cons">` with a `pros` and a `cons` column.
+ */
+export const prosConsBlock = Block.make('pros-cons')
+    .label('Pros & cons')
+    .icon('⚖️')
+    .schema([
+    TagsInput.make('pros').label('Pros'),
+    TagsInput.make('cons').label('Cons'),
+]);

package/dist/blocks/summary.d.ts

@@ -0,0 +1,9 @@
+import { Block } from '../Block.js';
+/**
+ * Default **Summary** block — a short, labelled summary of the article.
+ *
+ * Wire shape: `{ content: string }`. Renders read-side as
+ * `<div class="pilotiq-summary">` with a label and the body.
+ */
+export declare const summaryBlock: Block;
+//# sourceMappingURL=summary.d.ts.map

package/dist/blocks/summary.js

@@ -0,0 +1,14 @@
+import { TextareaField } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **Summary** block — a short, labelled summary of the article.
+ *
+ * Wire shape: `{ content: string }`. Renders read-side as
+ * `<div class="pilotiq-summary">` with a label and the body.
+ */
+export const summaryBlock = Block.make('summary')
+    .label('Summary')
+    .icon('📝')
+    .schema([
+    TextareaField.make('content').label('Summary').placeholder('A short summary of the article…'),
+]);

package/dist/extensions/DragHandleExtension.js

@@ -34,11 +34,14 @@ export const DragHandleExtension = Extension.create({
     },
 });
 function createDragHandleView(view) {
-    const handle = document.createElement('button');
-    handle.type = 'button';
+    // A <div> (not <button>): a button grabs DOM focus on click, which yanks
+    // focus out of the editor so a follow-up Backspace/Delete on the selected
+    // block goes nowhere. A div doesn't steal focus, so click-to-select works.
+    const handle = document.createElement('div');
+    handle.setAttribute('role', 'button');
     handle.setAttribute('data-pilotiq-drag-handle', '');
     handle.setAttribute('contenteditable', 'false');
-    handle.setAttribute('aria-label', 'Drag block');
+    handle.setAttribute('aria-label', 'Drag or select block');
     handle.setAttribute('draggable', 'true');
     handle.style.cssText = [
         'position: absolute',
@@ -149,16 +152,30 @@ function createDragHandleView(view) {
     const onDragEnd = () => {
         handle.style.cursor = 'grab';
     };
+    // A plain click (no drag) selects the hovered block as a NodeSelection, so
+    // the whole block can be deleted (Backspace / Delete) or replaced — the only
+    // affordance for removing atom-ish custom blocks (FAQ, callout, grid, …).
+    const onClick = (event) => {
+        event.preventDefault();
+        if (activePos === null)
+            return;
+        if (!view.state.doc.nodeAt(activePos))
+            return;
+        view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, activePos)));
+        view.focus();
+    };
     view.dom.addEventListener('mousemove', onMouseMove);
     view.dom.addEventListener('mouseleave', onMouseLeave);
     handle.addEventListener('dragstart', onDragStart);
     handle.addEventListener('dragend', onDragEnd);
+    handle.addEventListener('click', onClick);
     return {
         destroy: () => {
             view.dom.removeEventListener('mousemove', onMouseMove);
             view.dom.removeEventListener('mouseleave', onMouseLeave);
             handle.removeEventListener('dragstart', onDragStart);
             handle.removeEventListener('dragend', onDragEnd);
+            handle.removeEventListener('click', onClick);
             handle.remove();
         },
     };

package/dist/extensions/SlashCommandExtension.js

@@ -137,6 +137,72 @@ export function buildSlashItems(blocks, mergeTags, query, insert) {
             searchKey: 'grid columns layout 3 three split',
             command: ({ editor, range }) => editor.chain().focus().deleteRange(range).setGrid({ columns: 3 }).run(),
         },
+        // Inline content blocks — labelled, editable-in-place regions (nodes in
+        // contentBlocks.ts). Inserted via insertContent; no custom commands.
+        {
+            key: 'key-takeaways', label: 'Key takeaways', icon: '🔑', group: 'Content',
+            searchKey: 'key takeaways points highlights tldr',
+            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).insertContent({
+                type: 'keyTakeaways',
+                content: [{ type: 'bulletList', content: [{ type: 'listItem', content: [{ type: 'paragraph' }] }] }],
+            }).run(),
+        },
+        {
+            key: 'summary', label: 'Summary', icon: '📝', group: 'Content',
+            searchKey: 'summary tldr abstract overview',
+            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).insertContent({ type: 'summary', content: [{ type: 'paragraph' }] }).run(),
+        },
+        {
+            key: 'faq', label: 'FAQ', icon: '❓', group: 'Content',
+            searchKey: 'faq questions answers frequently asked',
+            command: ({ editor, range }) => {
+                editor.chain().focus().deleteRange(range).insertContent({
+                    type: 'faq',
+                    content: [
+                        {
+                            type: 'faqItem',
+                            content: [{ type: 'faqQuestion' }, { type: 'faqAnswer', content: [{ type: 'paragraph' }] }],
+                        },
+                    ],
+                }).run();
+                // insertContent leaves the cursor in the answer — move it into the first
+                // question. Resolve the enclosing faqItem and select its question start
+                // (before(faqItem) +1 into the item +1 into the question = +2).
+                const { $from } = editor.state.selection;
+                for (let d = $from.depth; d > 0; d--) {
+                    if ($from.node(d).type.name === 'faqItem') {
+                        editor.chain().setTextSelection($from.before(d) + 2).focus().run();
+                        break;
+                    }
+                }
+            },
+        },
+        {
+            key: 'pros-cons', label: 'Pros & cons', icon: '⚖️', group: 'Content',
+            searchKey: 'pros cons advantages disadvantages comparison',
+            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).insertContent({
+                type: 'prosCons',
+                content: [
+                    { type: 'prosColumn', content: [{ type: 'bulletList', content: [{ type: 'listItem', content: [{ type: 'paragraph' }] }] }] },
+                    { type: 'consColumn', content: [{ type: 'bulletList', content: [{ type: 'listItem', 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
         // would post to a missing endpoint — the slash item degrades the same

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