@dr-ishaan/remake-blocks 1.3.0 → 1.4.1

package/dist/remark-remake-blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remark-remake-blocks.d.ts","sourceRoot":"","sources":["../src/remark-remake-blocks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAqC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC,OAAO,KAAK,EACV,mBAAmB,EACnB,aAAa,EAId,MAAM,YAAY,CAAC;AAMpB,QAAA,MAAM,gBAAgB,EAAE,aAAa,EAsKpC,CAAC;AA8JF,iBAAS,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE5C;AAUD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAW9D;AAuMD,iBAAS,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOvC;AAupBD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI,CA8FnE,CAAC;AAiFF,eAAO,MAAM,mBAAmB,oDAAqB,CAAC;AAItD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"remark-remake-blocks.d.ts","sourceRoot":"","sources":["../src/remark-remake-blocks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAqC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC,OAAO,KAAK,EACV,mBAAmB,EACnB,aAAa,EAId,MAAM,YAAY,CAAC;AAMpB,QAAA,MAAM,gBAAgB,EAAE,aAAa,EAsKpC,CAAC;AA+LF,iBAAS,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE5C;AAUD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAW9D;AAmPD,iBAAS,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOvC;AAmzBD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI,CAoGnE,CAAC;AAiFF,eAAO,MAAM,mBAAmB,oDAAqB,CAAC;AAItD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/remark-remake-blocks.js

@@ -218,6 +218,34 @@ const LUCIDE_ICONS = {
     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>`,
+    // ── v1.4.0: Extra Lucide icons for per-callout named icon ({icon="rocket"}) ──
+    rocket: `<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="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"/></svg>`,
+    heart: `<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="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"/></svg>`,
+    star: `<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="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`,
+    bell: `<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="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"/></svg>`,
+    flag: `<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="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"/></svg>`,
+    bookmark: `<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="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>`,
+    lightbulb: `<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="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"/></svg>`,
+    fire: `<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.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"/></svg>`,
+    zap: `<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="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`,
+    shield: `<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="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"/></svg>`,
+    code: `<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"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
+    book: `<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="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>`,
+    pencil: `<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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>`,
+    eye: `<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 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>`,
+    globe: `<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 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>`,
+    lock: `<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="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`,
+    key: `<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="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>`,
+    clock: `<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"/><polyline points="12 6 12 12 16 14"/></svg>`,
+    calendar: `<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="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>`,
+    package: `<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="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>`,
+    download: `<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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>`,
+    upload: `<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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>`,
+    link: `<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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71a5 5 0 0 0-.54 7.54"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71a5 5 0 0 0 .54-7.54"/></svg>`,
+    settings: `<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.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
+    terminal: `<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"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>`,
+    database: `<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"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>`,
+    cloud: `<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="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>`,
 };
 const EMOJI_ICONS = {
     note: "ℹ️",
@@ -301,6 +329,9 @@ const DEFAULT_OPTIONS = {
     tags: {},
     // v1.3.0 defaults
     enableDirectiveSyntax: false,
+    // v1.4.0 defaults
+    labels: {},
+    enableMkDocsSyntax: false,
 };
 // ---------------------------------------------------------------------------
 // Helper: Validate + normalize a single custom callout config.
@@ -446,6 +477,11 @@ function parseOverrides(overridesBlock) {
                 result.icon = false;
             else if (value === "true" || value === "1" || value === "yes")
                 result.icon = true;
+            else if (value.length > 0) {
+                // v1.4.0: per-callout named icon (e.g. {icon="rocket"} uses Lucide rocket icon)
+                result.iconName = value;
+                result.icon = true; // ensure icon is shown
+            }
         }
         else if (key === "appearance") {
             if (value === "default" || value === "minimal" || value === "simple" || value === "hidden") {
@@ -467,11 +503,52 @@ function parseOverrides(overridesBlock) {
         }
         // Unknown keys silently ignored
     }
-    if (result.icon === undefined && result.appearance === undefined && result.inline === undefined)
+    if (result.icon === undefined && result.appearance === undefined && result.inline === undefined && result.iconName === undefined)
         return undefined;
     return result;
 }
 // ---------------------------------------------------------------------------
+// v1.4.0: Parse directive attribute block `{#id .class key="value"}`
+// Supports the remark-directive attribute syntax:
+//   #id          — sets element id
+//   .class-name  — adds CSS class
+//   key="value"  — adds arbitrary HTML attribute
+//   key=value    — adds arbitrary HTML attribute (bareword)
+// ---------------------------------------------------------------------------
+function parseDirectiveAttrs(attrsBlock) {
+    if (!attrsBlock)
+        return undefined;
+    const inner = attrsBlock.trim().replace(/^\{|\}$/g, "").trim();
+    if (!inner)
+        return undefined;
+    const result = { classes: [], attrs: {} };
+    // Match #id, .class, key="value", key='value', key=value
+    const tokenRe = /(#)([\w-]+)|(\.)([\w-]+)|(\w[\w-]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s}]+))/g;
+    let m;
+    while ((m = tokenRe.exec(inner)) !== null) {
+        if (m[1] === "#" && m[2]) {
+            result.id = m[2];
+        }
+        else if (m[3] === "." && m[4]) {
+            result.classes.push(m[4]);
+        }
+        else if (m[5]) {
+            const key = m[5];
+            const value = (m[6] ?? m[7] ?? m[8] ?? "").trim();
+            // Block event handlers and style for security
+            if (key.toLowerCase().startsWith("on"))
+                continue;
+            if (key.toLowerCase() === "style")
+                continue;
+            result.attrs[key] = value;
+        }
+    }
+    if (!result.id && (!result.classes || result.classes.length === 0) && Object.keys(result.attrs || {}).length === 0) {
+        return undefined;
+    }
+    return result;
+}
+// ---------------------------------------------------------------------------
 // Helper: Parse the first paragraph of a blockquote to detect a callout
 // ---------------------------------------------------------------------------
 function parseCalloutDirective(blockquote, calloutPattern, configMap, enableDisclosures) {
@@ -646,8 +723,13 @@ function buildCalloutHtml(parsed, blockquote, calloutPattern, configMap, options
     }
     // ── Regular / Collapsible Callout ──────────────────────────────────
     const config = configMap.get(parsed.type);
-    const title = parsed.customTitle || config.defaultTitle;
+    // v1.4.0: i18n label customization — labels option overrides defaultTitle
+    // Use || instead of ?? so empty strings also fall back to default
+    const defaultTitle = options.labels?.[parsed.type] || config.defaultTitle;
+    const title = parsed.customTitle || defaultTitle;
     const dataAttr = options.dataCalloutType ? ` data-callout-type="${escapeAttribute(parsed.type)}"` : "";
+    // v1.4.0: data-collapsible attribute (for CSS targeting of collapsible vs non-collapsible)
+    const collapsibleDataAttr = ` data-collapsible="${parsed.collapsible ? "true" : "false"}"`;
     const bodyHtml = buildBodyHtml(blockquote, calloutPattern, options);
     // v1.2.0: resolve per-callout visuals (icon visibility + appearance)
     const { showIcon, appearance } = resolveVisuals(parsed, options);
@@ -666,9 +748,6 @@ function buildCalloutHtml(parsed, blockquote, calloutPattern, configMap, options
     // Sanitize colors before interpolating into style attribute
     const safeIconColor = sanitizeColor(config.iconColor || config.color, "#57606a");
     // 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);
@@ -680,14 +759,39 @@ function buildCalloutHtml(parsed, blockquote, calloutPattern, configMap, options
     // v1.2.0: resolve per-type props (dir, style, data-*, etc.)
     const extraProps = resolveProps(options.props, parsed.type, parsed);
     const extraAttrs = formatPropsAsAttrs(extraProps);
+    // v1.4.0: directive attributes (#id, .class, key="value")
+    let directiveId = "";
+    let directiveClasses = "";
+    let directiveAttrs = "";
+    if (parsed.directiveAttrs) {
+        if (parsed.directiveAttrs.id) {
+            directiveId = ` id="${escapeAttribute(parsed.directiveAttrs.id)}"`;
+        }
+        if (parsed.directiveAttrs.classes && parsed.directiveAttrs.classes.length > 0) {
+            directiveClasses = " " + parsed.directiveAttrs.classes.map(c => escapeAttribute(c)).join(" ");
+        }
+        if (parsed.directiveAttrs.attrs) {
+            directiveAttrs = formatPropsAsAttrs(parsed.directiveAttrs.attrs);
+        }
+    }
     // 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)
+    // v1.4.0: per-callout named icon override ({icon="rocket"})
     const renderIcon = showIcon && appearance !== "simple" && appearance !== "hidden";
-    const resolvedIcon = renderIcon ? resolveIcon(parsed.type, config, options.iconSet) : "";
+    let resolvedIcon = "";
+    if (renderIcon) {
+        if (parsed.overrides?.iconName) {
+            // v1.4.0: per-callout named icon (Lucide icon by name)
+            resolvedIcon = LUCIDE_ICONS[parsed.overrides.iconName] ?? resolveIcon(parsed.type, config, options.iconSet);
+        }
+        else {
+            resolvedIcon = 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>`
@@ -735,7 +839,7 @@ function buildCalloutHtml(parsed, blockquote, calloutPattern, configMap, options
     if (parsed.collapsible) {
         const openAttr = parsed.collapsibleOpen ? " open" : "";
         return html([
-            `<${containerTag} class="${safeCalloutClass} ${safeConfigClassName} collapsible${appearanceClass}${inlineClass}"${dataAttr} role="${ariaRole}"${labelledby}${dirAuto}${openAttr}${extraAttrs}>`,
+            `<${containerTag} class="${safeCalloutClass} ${safeConfigClassName} collapsible${appearanceClass}${inlineClass}${directiveClasses}"${dataAttr}${collapsibleDataAttr} role="${ariaRole}"${labelledby}${dirAuto}${openAttr}${directiveId}${extraAttrs}${directiveAttrs}>`,
             titleBlockWithDir,
             `  <${bodyTag} class="${safeCalloutBodyClass}">`,
             bodyHtml,
@@ -744,7 +848,7 @@ function buildCalloutHtml(parsed, blockquote, calloutPattern, configMap, options
         ].filter(Boolean).join("\n"));
     }
     return html([
-        `<${containerTag} class="${safeCalloutClass} ${safeConfigClassName}${appearanceClass}${inlineClass}"${dataAttr} role="${ariaRole}"${labelledby}${dirAuto}${extraAttrs}>`,
+        `<${containerTag} class="${safeCalloutClass} ${safeConfigClassName}${appearanceClass}${inlineClass}${directiveClasses}"${dataAttr}${collapsibleDataAttr} role="${ariaRole}"${labelledby}${dirAuto}${directiveId}${extraAttrs}${directiveAttrs}>`,
         titleBlockWithDir,
         `  <${bodyTag} class="${safeCalloutBodyClass}">`,
         bodyHtml,
@@ -995,6 +1099,8 @@ function transformDirectiveSyntax(tree, configMap, options) {
                                     const config = configMap.get(type);
                                     const customTitle = title?.trim() || undefined;
                                     const overrides = parseOverrides(overridesBlock);
+                                    // v1.4.0: parse directive attributes (#id, .class, key="value")
+                                    const directiveAttrs = parseDirectiveAttrs(overridesBlock);
                                     // Check for fold override
                                     let foldMarker = "";
                                     if (overridesBlock) {
@@ -1011,6 +1117,7 @@ function transformDirectiveSyntax(tree, configMap, options) {
                                         collapsibleOpen,
                                         isDisclosure: false,
                                         overrides,
+                                        directiveAttrs,
                                     };
                                     // Build body HTML from the bodyText
                                     const bodyLines = bodyText.split("\n");
@@ -1039,25 +1146,114 @@ function transformDirectiveSyntax(tree, configMap, options) {
     tree.children = newChildren;
 }
 // ---------------------------------------------------------------------------
+// v1.4.0: MkDocs admonition syntax transformer (!!! / ??? / ???+)
+// ---------------------------------------------------------------------------
+// Detects !!! type, ??? type, ???+ type paragraphs and converts them to
+// callouts. This enables content portability with MkDocs Material.
+//
+// Supported syntax:
+//   !!! note          — non-collapsible callout
+//   ??? note          — collapsed callout (same as > [!NOTE]-)
+//   ???+ note         — expanded collapsible callout (same as > [!NOTE]+)
+//   !!! note "Title"  — with custom title (quoted)
+//   !!! note ""       — no title (strips default)
+//
+// The body is indented 4 spaces under the directive.
+function transformMkDocsSyntax(tree, configMap, options) {
+    if (!tree.children)
+        return;
+    const newChildren = [];
+    let i = 0;
+    while (i < tree.children.length) {
+        const child = tree.children[i];
+        if (child.type === "paragraph") {
+            const text = extractTextContent(child);
+            // Check for !!! type, ??? type, or ???+ type
+            // Pattern: (!!!|???\+?) type ["Title"]\n    body (4-space indented)
+            if (text.startsWith("!!!") || text.startsWith("???")) {
+                // Determine the marker: !!!, ???, or ???+
+                let marker = "";
+                let markerEnd = 3;
+                if (text.startsWith("???+")) {
+                    marker = "???+";
+                    markerEnd = 4;
+                }
+                else if (text.startsWith("???")) {
+                    marker = "???";
+                    markerEnd = 3;
+                }
+                else if (text.startsWith("!!!")) {
+                    marker = "!!!";
+                    markerEnd = 3;
+                }
+                const afterMarker = text.slice(markerEnd);
+                // Parse type name
+                const typeMatch = afterMarker.match(/^\s+([a-zA-Z][\w-]*)/);
+                if (typeMatch) {
+                    const type = typeMatch[1].toLowerCase();
+                    let remaining = afterMarker.slice(typeMatch[0].length);
+                    // Parse optional "Title" (quoted)
+                    let title;
+                    const titleMatch = remaining.match(/^\s+"([^"]*)"/);
+                    if (titleMatch) {
+                        title = titleMatch[1];
+                        remaining = remaining.slice(titleMatch[0].length);
+                    }
+                    // Must be followed by \n
+                    if (remaining.startsWith("\n")) {
+                        remaining = remaining.slice(1);
+                        // Only convert if the type is a known callout type
+                        if (configMap.has(type)) {
+                            const config = configMap.get(type);
+                            const customTitle = title !== undefined ? (title.trim() || undefined) : undefined;
+                            // Determine collapsible state from marker
+                            const collapsible = marker === "???" || marker === "???+";
+                            const collapsibleOpen = marker === "???+";
+                            const parsed = {
+                                type: type,
+                                customTitle,
+                                collapsible,
+                                collapsibleOpen,
+                                isDisclosure: false,
+                            };
+                            // Build body HTML from the remaining text
+                            // Strip 4-space indentation from each line
+                            const bodyLines = remaining.split("\n").map((line) => {
+                                if (line.startsWith("    "))
+                                    return line.slice(4);
+                                return line;
+                            });
+                            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;
+    // v1.4.0: i18n label customization
+    const defaultTitle = options.labels?.[parsed.type] || config.defaultTitle;
+    const title = parsed.customTitle || defaultTitle;
     const dataAttr = options.dataCalloutType ? ` data-callout-type="${escapeAttribute(parsed.type)}"` : "";
+    const collapsibleDataAttr = ` data-collapsible="${parsed.collapsible ? "true" : "false"}"`;
     const safeIconColor = sanitizeColor(config.iconColor || config.color, "#57606a");
     const ariaRole = "note";
     const safeCalloutClass = escapeAttribute(options.calloutClass);
@@ -1065,10 +1261,32 @@ function buildCalloutFromParts(parsed, config, bodyHtml, options) {
     const safeCalloutTitleClass = escapeAttribute(options.calloutTitleClass);
     const safeCalloutBodyClass = escapeAttribute(options.calloutBodyClass);
     const titleId = generateCalloutId(parsed.type);
+    // v1.4.0: directive attributes
+    let directiveId = "";
+    let directiveClasses = "";
+    let directiveAttrs = "";
+    if (parsed.directiveAttrs) {
+        if (parsed.directiveAttrs.id) {
+            directiveId = ` id="${escapeAttribute(parsed.directiveAttrs.id)}"`;
+        }
+        if (parsed.directiveAttrs.classes && parsed.directiveAttrs.classes.length > 0) {
+            directiveClasses = " " + parsed.directiveAttrs.classes.map(c => escapeAttribute(c)).join(" ");
+        }
+        if (parsed.directiveAttrs.attrs) {
+            directiveAttrs = formatPropsAsAttrs(parsed.directiveAttrs.attrs);
+        }
+    }
     const { showIcon, appearance } = resolveVisuals(parsed, options);
-    const resolvedIcon = showIcon && appearance !== "simple" && appearance !== "hidden"
-        ? resolveIcon(parsed.type, config, options.iconSet)
-        : "";
+    // v1.4.0: per-callout named icon
+    let resolvedIcon = "";
+    if (showIcon && appearance !== "simple" && appearance !== "hidden") {
+        if (parsed.overrides?.iconName) {
+            resolvedIcon = LUCIDE_ICONS[parsed.overrides.iconName] ?? resolveIcon(parsed.type, config, options.iconSet);
+        }
+        else {
+            resolvedIcon = 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>`
@@ -1088,7 +1306,7 @@ function buildCalloutFromParts(parsed, config, bodyHtml, options) {
     if (parsed.collapsible) {
         const openAttr = parsed.collapsibleOpen ? " open" : "";
         return [
-            `<details class="${safeCalloutClass} ${safeConfigClassName} collapsible${appearanceClass}${inlineClass}"${dataAttr} role="${ariaRole}"${labelledby} dir="auto"${openAttr}>`,
+            `<details class="${safeCalloutClass} ${safeConfigClassName} collapsible${appearanceClass}${inlineClass}${directiveClasses}"${dataAttr}${collapsibleDataAttr} role="${ariaRole}"${labelledby} dir="auto"${openAttr}${directiveId}${directiveAttrs}>`,
             titleBlock.replace(/<div /, "<summary ").replace(/<\/div>$/, "</summary>"),
             `  <div class="${safeCalloutBodyClass}">`,
             bodyHtml,
@@ -1097,7 +1315,7 @@ function buildCalloutFromParts(parsed, config, bodyHtml, options) {
         ].filter(Boolean).join("\n");
     }
     return [
-        `<aside class="${safeCalloutClass} ${safeConfigClassName}${appearanceClass}${inlineClass}"${dataAttr} role="${ariaRole}"${labelledby} dir="auto">`,
+        `<aside class="${safeCalloutClass} ${safeConfigClassName}${appearanceClass}${inlineClass}${directiveClasses}"${dataAttr}${collapsibleDataAttr} role="${ariaRole}"${labelledby} dir="auto"${directiveId}${directiveAttrs}>`,
         titleBlock,
         `  <div class="${safeCalloutBodyClass}">`,
         bodyHtml,
@@ -1125,6 +1343,11 @@ export const remarkRemakeBlocks = (userOptions) => {
         if (options.enableDirectiveSyntax) {
             transformDirectiveSyntax(tree, configMap, options);
         }
+        // v1.4.0: Pass 0b — Transform !!! note / ??? note / ???+ note MkDocs admonition syntax
+        // into callouts (MkDocs Material content portability).
+        if (options.enableMkDocsSyntax) {
+            transformMkDocsSyntax(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.