@dr-ishaan/remake-blocks 1.1.0 → 1.3.0

package/dist/remark-remake-blocks.js

@@ -185,6 +185,92 @@ const BUILTIN_CALLOUTS = [
     },
 ];
 // ---------------------------------------------------------------------------
+// v1.3.0: Alternative icon sets (Lucide + Emoji)
+// ---------------------------------------------------------------------------
+// These are keyed by callout type. When iconSet === "lucide" or "emoji",
+// the plugin uses these icons instead of the default Octicon SVGs.
+// Custom callouts always use their configured `icon` regardless of iconSet.
+const LUCIDE_ICONS = {
+    note: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
+    tip: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>`,
+    important: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg>`,
+    warning: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>`,
+    caution: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
+    abstract: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>`,
+    info: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
+    success: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>`,
+    question: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>`,
+    failure: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
+    danger: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m13 2-3 7h7l-3 7"/><path d="M12 22a10 10 0 1 1 0-20"/></svg>`,
+    quote: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z"/></svg>`,
+    bug: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/></svg>`,
+    example: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z"/><polyline points="14 2 14 8 20 8"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>`,
+    todo: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12 2 2 4-4"/></svg>`,
+    summary: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>`,
+    tldr: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m13 2-3 7h7l-3 7"/><path d="M12 22a10 10 0 1 1 0-20"/></svg>`,
+    hint: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>`,
+    check: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12 2 2 4-4"/></svg>`,
+    done: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>`,
+    help: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>`,
+    faq: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M10 7h.01"/><path d="M14 7h.01"/><path d="M8 11h.01"/><path d="M12 11h.01"/><path d="M16 11h.01"/></svg>`,
+    attention: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`,
+    fail: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
+    missing: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/><path d="M8 11h6"/></svg>`,
+    error: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>`,
+    cite: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/></svg>`,
+};
+const EMOJI_ICONS = {
+    note: "ℹ️",
+    tip: "💡",
+    important: "⚠️",
+    warning: "⚠️",
+    caution: "⛔",
+    abstract: "📋",
+    info: "ℹ️",
+    success: "✅",
+    question: "❓",
+    failure: "❌",
+    danger: "⚡",
+    quote: "💬",
+    bug: "🐛",
+    example: "📝",
+    todo: "☑️",
+    summary: "📋",
+    tldr: "⚡",
+    hint: "💡",
+    check: "✅",
+    done: "✅",
+    help: "❓",
+    faq: "❓",
+    attention: "⚠️",
+    fail: "❌",
+    missing: "🚫",
+    error: "❌",
+    cite: "📌",
+};
+/**
+ * Resolve the icon for a given callout type based on the iconSet option.
+ * Returns the icon string (SVG or emoji) or empty string if not found.
+ */
+function resolveIcon(type, config, iconSet) {
+    // Custom callouts always use their configured icon, regardless of iconSet.
+    // We detect this by checking if the type is NOT in BUILTIN_CALLOUTS.
+    // (config may be a normalized custom callout — its icon is the user's choice.)
+    const isBuiltin = BUILTIN_CALLOUTS.some((b) => b.type === type);
+    if (!isBuiltin) {
+        return config.icon;
+    }
+    // For builtins, swap icon based on iconSet option.
+    if (iconSet === "lucide")
+        return LUCIDE_ICONS[type] ?? config.icon;
+    if (iconSet === "emoji")
+        return EMOJI_ICONS[type] ?? config.icon;
+    if (iconSet === "none")
+        return "";
+    // Default: octicon (the builtin's own icon)
+    return config.icon;
+}
+// ---------------------------------------------------------------------------
 // Default plugin options
 // ---------------------------------------------------------------------------
 const DEFAULT_OPTIONS = {
@@ -205,6 +291,16 @@ const DEFAULT_OPTIONS = {
     accordionClass: "disclosure-accordion",
     enableTreeView: true,
     allowDangerousHtml: false,
+    // v1.2.0 defaults
+    aliases: {},
+    showIndicator: true,
+    iconSet: "octicon",
+    appearance: "default",
+    props: {},
+    build: undefined,
+    tags: {},
+    // v1.3.0 defaults
+    enableDirectiveSyntax: false,
 };
 // ---------------------------------------------------------------------------
 // Helper: Validate + normalize a single custom callout config.
@@ -257,7 +353,7 @@ function sanitizeColor(value, fallback) {
     return trimmed;
 }
 // ---------------------------------------------------------------------------
-// Helper: Build the callout configuration map
+// Helper: Build the callout configuration map (with alias resolution)
 // ---------------------------------------------------------------------------
 function buildCalloutConfigMap(options) {
     const map = new Map();
@@ -273,10 +369,28 @@ function buildCalloutConfigMap(options) {
             }
         }
     }
+    // Register aliases: each alias points to its canonical config.
+    // Aliases are case-insensitive (lowercased on registration AND lookup).
+    if (options.aliases) {
+        for (const [canonical, aliasList] of Object.entries(options.aliases)) {
+            const canonicalLower = canonical.toLowerCase();
+            const canonicalConfig = map.get(canonicalLower);
+            if (!canonicalConfig || !Array.isArray(aliasList))
+                continue;
+            for (const alias of aliasList) {
+                if (typeof alias !== "string" || alias.trim() === "")
+                    continue;
+                map.set(alias.toLowerCase(), canonicalConfig);
+            }
+        }
+    }
     return map;
 }
 // ---------------------------------------------------------------------------
-// Helper: Build the dynamic regex matching all directives
+// Helper: Build the dynamic regex matching all directives.
+// Captures: (1) type (or empty for disclosure), (2) fold marker + or -,
+// (3) optional inline title text (everything until end-of-line or `{`),
+// (4) optional `{key=value key=value}` overrides block.
 // ---------------------------------------------------------------------------
 function buildCalloutPattern(configMap, enableDisclosures) {
     const allDirectives = Array.from(configMap.keys())
@@ -286,7 +400,76 @@ function buildCalloutPattern(configMap, enableDisclosures) {
         allDirectives.unshift("");
     }
     const typePattern = allDirectives.join("|");
-    return new RegExp(`^\\[!(${typePattern})\\]([+-]?)(?:[^\\S\\n]+(.+))?`, "i");
+    // Group 3 (title) is non-greedy and stops at `{` (start of overrides) or end of line.
+    // Group 4 (overrides) captures `{...}` if present.
+    return new RegExp(`^\\[!(${typePattern})\\]([+-]?)(?:[^\\S\\n]+([^\\n{]*))?(\\s*\\{[^\\n]*\\})?`, "i");
+}
+// ---------------------------------------------------------------------------
+// Helper: Parse `{key=value key=value}` overrides block into an object.
+// Supported keys (v1.2.0):
+//   - icon: true|false     — override showIndicator per-callout
+//   - appearance: default|minimal|simple|hidden  — override appearance per-callout
+//   - inline: inline|inline-end  — v1.3.0+: float left/right (responsive)
+// Unknown keys are silently ignored.
+// ---------------------------------------------------------------------------
+function parseOverrides(overridesBlock) {
+    if (!overridesBlock)
+        return undefined;
+    const inner = overridesBlock.trim().replace(/^\{|\}$/g, "").trim();
+    if (!inner)
+        return undefined;
+    const result = {};
+    // First pass: handle bare keywords (no `=` sign).
+    // Supported bare keywords: `inline`, `inline-end`
+    // These set the inline override without needing `inline=true`.
+    // Note: `inline-end` must be matched BEFORE `inline` to avoid the prefix
+    // matching, so we use a single regex with `inline-end` first in the
+    // alternation and consume the entire match.
+    const bareKeywordRe = /\b(inline-end|inline)\b(?!\s*=)/gi;
+    let bareMatch;
+    while ((bareMatch = bareKeywordRe.exec(inner)) !== null) {
+        const kw = bareMatch[1].toLowerCase();
+        if (kw === "inline-end")
+            result.inline = "inline-end";
+        else if (kw === "inline")
+            result.inline = "inline";
+    }
+    // Second pass: handle key=value pairs.
+    // Values can be unquoted barewords or "quoted strings".
+    const pairRe = /(\w[\w-]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s}]+))/g;
+    let m;
+    while ((m = pairRe.exec(inner)) !== null) {
+        const key = m[1].toLowerCase();
+        const value = (m[2] ?? m[3] ?? m[4] ?? "").trim();
+        if (key === "icon") {
+            if (value === "false" || value === "0" || value === "no")
+                result.icon = false;
+            else if (value === "true" || value === "1" || value === "yes")
+                result.icon = true;
+        }
+        else if (key === "appearance") {
+            if (value === "default" || value === "minimal" || value === "simple" || value === "hidden") {
+                result.appearance = value;
+            }
+        }
+        else if (key === "inline") {
+            // v1.3.0+: inline floating callouts
+            if (value === "true" || value === "left" || value === "inline") {
+                result.inline = "inline";
+            }
+            else if (value === "right" || value === "inline-end" || value === "end") {
+                result.inline = "inline-end";
+            }
+            else if (value === "false" || value === "0" || value === "no") {
+                // explicitly disable inline (clear any bare-keyword setting)
+                result.inline = undefined;
+            }
+        }
+        // Unknown keys silently ignored
+    }
+    if (result.icon === undefined && result.appearance === undefined && result.inline === undefined)
+        return undefined;
+    return result;
 }
 // ---------------------------------------------------------------------------
 // Helper: Parse the first paragraph of a blockquote to detect a callout
@@ -328,7 +511,9 @@ function parseCalloutDirective(blockquote, calloutPattern, configMap, enableDisc
             remainingContent = afterNewline.trim() || undefined;
         }
     }
-    return { type, customTitle, remainingContent, collapsible: effectiveCollapsible, collapsibleOpen: effectiveCollapsibleOpen, isDisclosure };
+    // v1.2.0: parse per-callout overrides from `{key=value}` block (match[4])
+    const overrides = parseOverrides(match[4]);
+    return { type, customTitle, remainingContent, collapsible: effectiveCollapsible, collapsibleOpen: effectiveCollapsibleOpen, isDisclosure, overrides };
 }
 // ---------------------------------------------------------------------------
 // Helpers: extractTextContent, html, escapeHtml
@@ -377,6 +562,83 @@ function buildBodyHtml(blockquote, calloutPattern, options) {
 // ---------------------------------------------------------------------------
 // Helper: Build the callout HTML
 // ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+// v1.2.0 helpers: stable id generation, props formatting, override resolution
+// ---------------------------------------------------------------------------
+// Per-tree counter for callout ids. Reset at the start of each plugin run
+// (each `transform(tree)` invocation) so the same markdown always produces
+// the same output HTML (idempotency / determinism for snapshot tests).
+let __calloutIdCounter = 0;
+function resetCalloutIdCounter() {
+    __calloutIdCounter = 0;
+}
+function generateCalloutId(type) {
+    __calloutIdCounter += 1;
+    // Sanitize type for use in an HTML id (letters/digits/hyphen only).
+    const safeType = String(type).replace(/[^a-zA-Z0-9-]/g, "-") || "callout";
+    return `callout-${safeType}-${__calloutIdCounter.toString(36)}`;
+}
+function formatPropsAsAttrs(props) {
+    if (!props)
+        return "";
+    let out = "";
+    for (const [key, value] of Object.entries(props)) {
+        if (value === undefined || value === null)
+            continue;
+        // Sanitize the key: allow letters, digits, hyphens, colons (for namespaces like xml:lang)
+        const safeKey = key.replace(/[^a-zA-Z0-9:_-]/g, "");
+        if (!safeKey)
+            continue;
+        // Don't allow `style` or event handlers to be set via props (defense in depth)
+        if (safeKey.toLowerCase() === "style")
+            continue;
+        if (safeKey.toLowerCase().startsWith("on"))
+            continue;
+        out += ` ${safeKey}="${escapeAttribute(String(value))}"`;
+    }
+    return out;
+}
+function resolveProps(propsConfig, type, parsed) {
+    if (!propsConfig)
+        return {};
+    const entry = propsConfig[type] ?? propsConfig[type.toLowerCase()];
+    if (!entry)
+        return {};
+    if (typeof entry === "function") {
+        try {
+            return entry(parsed) || {};
+        }
+        catch {
+            return {};
+        }
+    }
+    if (typeof entry === "object")
+        return entry;
+    return {};
+}
+// ---------------------------------------------------------------------------
+// Helper: Resolve effective icon visibility + appearance, merging global
+// options with per-callout overrides.
+// ---------------------------------------------------------------------------
+function resolveVisuals(parsed, options) {
+    let showIcon = options.showIndicator !== false; // default true
+    let appearance = options.appearance ?? "default";
+    if (parsed.overrides) {
+        if (parsed.overrides.icon === false)
+            showIcon = false;
+        else if (parsed.overrides.icon === true)
+            showIcon = true;
+        if (parsed.overrides.appearance)
+            appearance = parsed.overrides.appearance;
+    }
+    // "hidden" appearance implies no icon
+    if (appearance === "hidden")
+        showIcon = false;
+    return { showIcon, appearance };
+}
+// ---------------------------------------------------------------------------
+// Helper: Build the callout HTML (v1.2.0 — with all community-inspired features)
+// ---------------------------------------------------------------------------
 function buildCalloutHtml(parsed, blockquote, calloutPattern, configMap, options, depth = 0) {
     // ── Disclosure Widget ──────────────────────────────────────────────
     if (parsed.isDisclosure) {
@@ -387,39 +649,108 @@ function buildCalloutHtml(parsed, blockquote, calloutPattern, configMap, options
     const title = parsed.customTitle || config.defaultTitle;
     const dataAttr = options.dataCalloutType ? ` data-callout-type="${escapeAttribute(parsed.type)}"` : "";
     const bodyHtml = buildBodyHtml(blockquote, calloutPattern, options);
+    // v1.2.0: resolve per-callout visuals (icon visibility + appearance)
+    const { showIcon, appearance } = resolveVisuals(parsed, options);
+    // v1.2.0: build custom render escape hatch
+    if (typeof options.build === "function") {
+        try {
+            const customHtml = options.build(parsed, config, bodyHtml, options);
+            if (typeof customHtml === "string" && customHtml.length > 0) {
+                return html(customHtml);
+            }
+        }
+        catch {
+            // Fall through to default renderer on error
+        }
+    }
     // Sanitize colors before interpolating into style attribute
     const safeIconColor = sanitizeColor(config.iconColor || config.color, "#57606a");
-    const ariaRole = getAriaRole(parsed.type);
+    // v1.2.0: WCAG fix — use role="note" for ALL callouts (was: role="alert" for warnings).
+    // role="alert" is for dynamically-inserted content and causes aggressive immediate
+    // announcement that disrupts screen reader users on static content.
+    // Use role="note" + aria-labelledby for proper title→container association.
+    const ariaRole = "note";
     // Escape className + calloutClass to prevent attribute breakout
     const safeCalloutClass = escapeAttribute(options.calloutClass);
     const safeConfigClassName = escapeAttribute(config.className);
     const safeCalloutTitleClass = escapeAttribute(options.calloutTitleClass);
     const safeCalloutBodyClass = escapeAttribute(options.calloutBodyClass);
+    // v1.2.0: stable title id for aria-labelledby
+    const titleId = generateCalloutId(parsed.type);
+    // v1.2.0: resolve per-type props (dir, style, data-*, etc.)
+    const extraProps = resolveProps(options.props, parsed.type, parsed);
+    const extraAttrs = formatPropsAsAttrs(extraProps);
+    // v1.2.0: appearance class
+    const appearanceClass = appearance !== "default" ? ` callout-${appearance}` : "";
+    // v1.3.0: inline floating class (responsive float left/right)
+    const inlineClass = parsed.overrides?.inline ? ` callout-${parsed.overrides.inline}` : "";
+    // v1.2.0: icon HTML — only render if showIcon AND appearance allows it
+    // v1.3.0: resolve icon based on iconSet option (octicon|lucide|emoji|none)
+    const renderIcon = showIcon && appearance !== "simple" && appearance !== "hidden";
+    const resolvedIcon = renderIcon ? resolveIcon(parsed.type, config, options.iconSet) : "";
+    const effectiveRenderIcon = renderIcon && resolvedIcon.length > 0;
+    const iconHtml = effectiveRenderIcon
+        ? `<span class="callout-icon" style="color:${safeIconColor}" aria-hidden="true">${resolvedIcon}</span>`
+        : "";
+    // v1.2.0: title-text always rendered (unless appearance="hidden")
+    const renderTitle = appearance !== "hidden";
+    const titleTextHtml = renderTitle
+        ? `<span class="callout-title-text">${escapeHtml(title)}</span>`
+        : "";
+    // v1.2.0: tags option (override element names)
+    const tags = options.tags ?? {};
+    const containerTag = tags.container || (parsed.collapsible ? "details" : "aside");
+    const titleTag = tags.title || (parsed.collapsible ? "summary" : "div");
+    const iconTag = tags.icon || "span";
+    const titleTextTag = tags.titleText || "span";
+    const bodyTag = tags.body || "div";
+    // Build icon span with custom tag if provided
+    const iconSpan = effectiveRenderIcon
+        ? `<${iconTag} class="callout-icon" style="color:${safeIconColor}" aria-hidden="true">${resolvedIcon}</${iconTag}>`
+        : "";
+    // Build the title block (or skip for "hidden" appearance)
+    const titleBlock = renderTitle
+        ? [
+            `  <${titleTag} class="${safeCalloutTitleClass}" style="color:${safeIconColor}" id="${titleId}">`,
+            iconSpan && `    ${iconSpan}`,
+            `    <${titleTextTag} class="callout-title-text">${escapeHtml(title)}</${titleTextTag}>`,
+            `  </${titleTag}>`,
+        ].filter(Boolean).join("\n")
+        : "";
+    // v1.2.0: aria-labelledby on container (only if title rendered)
+    const labelledby = renderTitle ? ` aria-labelledby="${titleId}"` : "";
+    // v1.2.0: dir="auto" on container + title for RTL/Unicode (community best practice)
+    const dirAuto = ` dir="auto"`;
+    const titleDirAuto = renderTitle ? ` dir="auto"` : "";
+    // Rebuild title block with dir="auto" (already in <title> opening tag below)
+    // For simplicity, we'll inline the title block here with all attributes:
+    const titleBlockWithDir = renderTitle
+        ? [
+            `  <${titleTag} class="${safeCalloutTitleClass}" style="color:${safeIconColor}" id="${titleId}"${titleDirAuto}>`,
+            iconSpan && `    ${iconSpan}`,
+            `    <${titleTextTag} class="callout-title-text">${escapeHtml(title)}</${titleTextTag}>`,
+            `  </${titleTag}>`,
+        ].filter(Boolean).join("\n")
+        : "";
     if (parsed.collapsible) {
         const openAttr = parsed.collapsibleOpen ? " open" : "";
         return html([
-            `<details class="${safeCalloutClass} ${safeConfigClassName} collapsible"${dataAttr} role="${ariaRole}"${openAttr}>`,
-            `  <summary class="${safeCalloutTitleClass}" style="color:${safeIconColor}">`,
-            `    <span class="callout-icon" style="color:${safeIconColor}">${config.icon}</span>`,
-            `    <span class="callout-title-text">${escapeHtml(title)}</span>`,
-            `  </summary>`,
-            `  <div class="${safeCalloutBodyClass}">`,
+            `<${containerTag} class="${safeCalloutClass} ${safeConfigClassName} collapsible${appearanceClass}${inlineClass}"${dataAttr} role="${ariaRole}"${labelledby}${dirAuto}${openAttr}${extraAttrs}>`,
+            titleBlockWithDir,
+            `  <${bodyTag} class="${safeCalloutBodyClass}">`,
             bodyHtml,
-            `  </div>`,
-            `</details>`,
-        ].join("\n"));
+            `  </${bodyTag}>`,
+            `</${containerTag}>`,
+        ].filter(Boolean).join("\n"));
     }
     return html([
-        `<aside class="${safeCalloutClass} ${safeConfigClassName}"${dataAttr} role="${ariaRole}">`,
-        `  <div class="${safeCalloutTitleClass}" style="color:${safeIconColor}">`,
-        `    <span class="callout-icon" style="color:${safeIconColor}">${config.icon}</span>`,
-        `    <span class="callout-title-text">${escapeHtml(title)}</span>`,
-        `  </div>`,
-        `  <div class="${safeCalloutBodyClass}">`,
+        `<${containerTag} class="${safeCalloutClass} ${safeConfigClassName}${appearanceClass}${inlineClass}"${dataAttr} role="${ariaRole}"${labelledby}${dirAuto}${extraAttrs}>`,
+        titleBlockWithDir,
+        `  <${bodyTag} class="${safeCalloutBodyClass}">`,
         bodyHtml,
-        `  </div>`,
-        `</aside>`,
-    ].join("\n"));
+        `  </${bodyTag}>`,
+        `</${containerTag}>`,
+    ].filter(Boolean).join("\n"));
 }
 // ---------------------------------------------------------------------------
 // Helper: Build disclosure widget HTML (with tree view support)
@@ -428,6 +759,18 @@ function buildDisclosureHtml(parsed, blockquote, calloutPattern, options, depth
     const title = parsed.customTitle || "Details";
     const openAttr = parsed.collapsibleOpen ? " open" : "";
     const bodyHtml = buildBodyHtml(blockquote, calloutPattern, options);
+    // v1.2.0: build custom render escape hatch
+    if (typeof options.build === "function") {
+        try {
+            const customHtml = options.build(parsed, undefined, bodyHtml, options);
+            if (typeof customHtml === "string" && customHtml.length > 0) {
+                return html(customHtml);
+            }
+        }
+        catch {
+            // Fall through to default renderer on error
+        }
+    }
     // Tree view: add depth class for nested disclosures
     const safeDisclosureClass = escapeAttribute(options.disclosureClass);
     const safeDisclosureTitleClass = escapeAttribute(options.disclosureTitleClass);
@@ -436,13 +779,20 @@ function buildDisclosureHtml(parsed, blockquote, calloutPattern, options, depth
     const treeAttr = options.enableTreeView && depth > 0
         ? ` class="${safeDisclosureClass} disclosure-tree" data-depth="${safeDepth}"`
         : ` class="${safeDisclosureClass}"`;
+    // v1.2.0: stable title id + aria-labelledby + dir="auto"
+    const titleId = generateCalloutId("disclosure");
+    // v1.2.0: tags option (override element names for disclosures too)
+    const tags = options.tags ?? {};
+    const containerTag = tags.container || "details";
+    const titleTag = tags.title || "summary";
+    const bodyTag = tags.body || "div";
     const disclosureHtml = [
-        `<details${treeAttr}${openAttr}>`,
-        `  <summary class="${safeDisclosureTitleClass}">${escapeHtml(title)}</summary>`,
-        `  <div class="${safeDisclosureBodyClass}">`,
+        `<${containerTag}${treeAttr} aria-labelledby="${titleId}" dir="auto"${openAttr}>`,
+        `  <${titleTag} class="${safeDisclosureTitleClass}" id="${titleId}" dir="auto">${escapeHtml(title)}</${titleTag}>`,
+        `  <${bodyTag} class="${safeDisclosureBodyClass}">`,
         bodyHtml,
-        `  </div>`,
-        `</details>`,
+        `  </${bodyTag}>`,
+        `</${containerTag}>`,
     ].join("\n");
     return html(disclosureHtml);
 }
@@ -570,6 +920,192 @@ function getBlockquoteDepth(node, parent, tree) {
     return depth;
 }
 // ---------------------------------------------------------------------------
+// v1.3.0: Directive syntax transformer (:::type[Title] ... :::)
+// ---------------------------------------------------------------------------
+// Detects :::type paragraphs and converts them to callouts. This is a
+// lightweight alternative to installing remark-directive — we detect the
+// pattern in raw paragraph text and synthesize a ParsedCallout + HTML node.
+//
+// Supported syntax:
+//   :::note                — basic callout (default title)
+//   :::note[Custom Title]  — with custom title
+//   :::note{fold=-}        — with overrides (icon, appearance, fold, inline)
+//   :::note[Title]{fold=-} — title + overrides
+//   ::::note ... ::::      — 4-colon variant (for nesting; same behavior)
+//
+// The closing ::: must be on its own line. Body content between the opening
+// and closing lines is rendered as the callout body.
+function transformDirectiveSyntax(tree, configMap, options) {
+    if (!tree.children)
+        return;
+    const newChildren = [];
+    let i = 0;
+    while (i < tree.children.length) {
+        const child = tree.children[i];
+        // Check if this is a paragraph containing a :::type ... ::: directive
+        if (child.type === "paragraph") {
+            const text = extractTextContent(child);
+            // Use string methods (more reliable than regex with ^ anchor in some Node versions)
+            // Pattern: :::type[Title]{overrides}\n<body>\n:::
+            // Note: We use startsWith() + manual parsing instead of /^.../ regex
+            // because the ^ anchor has issues in some Node.js environments.
+            if (text.startsWith(":::")) {
+                // Count the colons
+                let colonCount = 0;
+                while (colonCount < text.length && text[colonCount] === ":")
+                    colonCount++;
+                if (colonCount >= 3) {
+                    const afterColons = text.slice(colonCount);
+                    // Match type name (letters, digits, hyphens)
+                    const typeMatch = afterColons.match(/^([a-zA-Z][\w-]*)/);
+                    if (typeMatch) {
+                        const rawType = typeMatch[1];
+                        const type = rawType.toLowerCase();
+                        const afterType = afterColons.slice(typeMatch[0].length);
+                        // Parse optional [Title] and {overrides}
+                        let title;
+                        let overridesBlock;
+                        let remaining = afterType;
+                        // Optional [Title]
+                        if (remaining.startsWith("[")) {
+                            const closeIdx = remaining.indexOf("]");
+                            if (closeIdx !== -1) {
+                                title = remaining.slice(1, closeIdx);
+                                remaining = remaining.slice(closeIdx + 1);
+                            }
+                        }
+                        // Optional {overrides}
+                        if (remaining.startsWith("{")) {
+                            const closeIdx = remaining.indexOf("}");
+                            if (closeIdx !== -1) {
+                                overridesBlock = `{${remaining.slice(1, closeIdx)}}`;
+                                remaining = remaining.slice(closeIdx + 1);
+                            }
+                        }
+                        // Must be followed by \n
+                        if (remaining.startsWith("\n")) {
+                            remaining = remaining.slice(1);
+                            // Find the closing ::: (must be on its own line at the end)
+                            // Look for \n::: at the end
+                            const closingMatch = remaining.match(/\n(:{3,})$/);
+                            if (closingMatch) {
+                                const bodyText = remaining.slice(0, closingMatch.index);
+                                // Only convert if the type is a known callout type
+                                if (configMap.has(type)) {
+                                    const config = configMap.get(type);
+                                    const customTitle = title?.trim() || undefined;
+                                    const overrides = parseOverrides(overridesBlock);
+                                    // Check for fold override
+                                    let foldMarker = "";
+                                    if (overridesBlock) {
+                                        const foldMatch = overridesBlock.match(/fold\s*=\s*([+-])/);
+                                        if (foldMatch)
+                                            foldMarker = foldMatch[1];
+                                    }
+                                    const collapsible = foldMarker === "+" || foldMarker === "-";
+                                    const collapsibleOpen = foldMarker === "+";
+                                    const parsed = {
+                                        type: type,
+                                        customTitle,
+                                        collapsible,
+                                        collapsibleOpen,
+                                        isDisclosure: false,
+                                        overrides,
+                                    };
+                                    // Build body HTML from the bodyText
+                                    const bodyLines = bodyText.split("\n");
+                                    const bodyHtml = bodyLines
+                                        .map((line) => {
+                                        if (line.trim() === "")
+                                            return "";
+                                        const escaped = options.allowDangerousHtml ? line : escapeHtml(line);
+                                        return `<p>${escaped}</p>\n`;
+                                    })
+                                        .join("");
+                                    const calloutHtml = buildCalloutFromParts(parsed, config, bodyHtml, options);
+                                    newChildren.push(html(calloutHtml));
+                                    i++;
+                                    continue;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        newChildren.push(child);
+        i++;
+    }
+    tree.children = newChildren;
+}
+// ---------------------------------------------------------------------------
+// Helper: Build callout HTML from parsed parts (used by directive syntax)
+// ---------------------------------------------------------------------------
+function buildCalloutFromParts(parsed, config, bodyHtml, options) {
+    // Reuse the existing buildCalloutHtml by synthesizing a fake blockquote
+    // structure. We construct a minimal Blockquote-compatible object that
+    // buildBodyHtml can process.
+    const fakeBlockquote = {
+        type: "blockquote",
+        children: [
+            {
+                type: "paragraph",
+                children: [{ type: "text", value: "" }],
+            },
+        ],
+    };
+    // We need to call buildCalloutHtml which expects a real blockquote.
+    // Instead, inline the essential rendering logic here.
+    const title = parsed.customTitle || config.defaultTitle;
+    const dataAttr = options.dataCalloutType ? ` data-callout-type="${escapeAttribute(parsed.type)}"` : "";
+    const safeIconColor = sanitizeColor(config.iconColor || config.color, "#57606a");
+    const ariaRole = "note";
+    const safeCalloutClass = escapeAttribute(options.calloutClass);
+    const safeConfigClassName = escapeAttribute(config.className);
+    const safeCalloutTitleClass = escapeAttribute(options.calloutTitleClass);
+    const safeCalloutBodyClass = escapeAttribute(options.calloutBodyClass);
+    const titleId = generateCalloutId(parsed.type);
+    const { showIcon, appearance } = resolveVisuals(parsed, options);
+    const resolvedIcon = showIcon && appearance !== "simple" && appearance !== "hidden"
+        ? resolveIcon(parsed.type, config, options.iconSet)
+        : "";
+    const effectiveRenderIcon = showIcon && appearance !== "simple" && appearance !== "hidden" && resolvedIcon.length > 0;
+    const iconSpan = effectiveRenderIcon
+        ? `<span class="callout-icon" style="color:${safeIconColor}" aria-hidden="true">${resolvedIcon}</span>`
+        : "";
+    const renderTitle = appearance !== "hidden";
+    const labelledby = renderTitle ? ` aria-labelledby="${titleId}"` : "";
+    const appearanceClass = appearance !== "default" ? ` callout-${appearance}` : "";
+    const inlineClass = parsed.overrides?.inline ? ` callout-${parsed.overrides.inline}` : "";
+    const titleBlock = renderTitle
+        ? [
+            `  <div class="${safeCalloutTitleClass}" style="color:${safeIconColor}" id="${titleId}" dir="auto">`,
+            iconSpan && `    ${iconSpan}`,
+            `    <span class="callout-title-text">${escapeHtml(title)}</span>`,
+            `  </div>`,
+        ].filter(Boolean).join("\n")
+        : "";
+    if (parsed.collapsible) {
+        const openAttr = parsed.collapsibleOpen ? " open" : "";
+        return [
+            `<details class="${safeCalloutClass} ${safeConfigClassName} collapsible${appearanceClass}${inlineClass}"${dataAttr} role="${ariaRole}"${labelledby} dir="auto"${openAttr}>`,
+            titleBlock.replace(/<div /, "<summary ").replace(/<\/div>$/, "</summary>"),
+            `  <div class="${safeCalloutBodyClass}">`,
+            bodyHtml,
+            `  </div>`,
+            `</details>`,
+        ].filter(Boolean).join("\n");
+    }
+    return [
+        `<aside class="${safeCalloutClass} ${safeConfigClassName}${appearanceClass}${inlineClass}"${dataAttr} role="${ariaRole}"${labelledby} dir="auto">`,
+        titleBlock,
+        `  <div class="${safeCalloutBodyClass}">`,
+        bodyHtml,
+        `  </div>`,
+        `</aside>`,
+    ].filter(Boolean).join("\n");
+}
+// ---------------------------------------------------------------------------
 // Plugin implementation
 // ---------------------------------------------------------------------------
 export const remarkRemakeBlocks = (userOptions) => {
@@ -580,6 +1116,15 @@ export const remarkRemakeBlocks = (userOptions) => {
     const configMap = buildCalloutConfigMap(options);
     const calloutPattern = options.calloutPattern || buildCalloutPattern(configMap, options.enableDisclosures);
     return (tree) => {
+        // v1.2.0: reset per-tree counter for idempotent output (same markdown →
+        // same HTML, including same ids). This is important for snapshot tests
+        // and for SSR/deterministic rendering.
+        resetCalloutIdCounter();
+        // v1.3.0: Pass 0 — Transform :::type[Title]{overrides} ... ::: directive syntax
+        // into callouts (Starlight/Docusaurus/MkDocs content portability).
+        if (options.enableDirectiveSyntax) {
+            transformDirectiveSyntax(tree, configMap, options);
+        }
         // ── Pass 1: Transform blockquotes → callouts / disclosures ──────
         // We must process DEEPEST blockquotes first (inside-out) so that
         // nested [!] directives are converted before their parents read them.
@@ -720,5 +1265,8 @@ function isDisclosureHtml(htmlStr) {
 // Backward-compatible alias
 // ---------------------------------------------------------------------------
 export const remarkCalloutBlocks = remarkRemakeBlocks;
+// Export helpers for users who supply a custom `build` function.
+// These let `build` authors reuse the plugin's escaping logic.
+export { escapeHtml, escapeAttribute, sanitizeColor };
 export { BUILTIN_CALLOUTS };
 //# sourceMappingURL=remark-remake-blocks.js.map