@nakobase/nakobase-md-html 2.3.0 → 2.4.0

package/README.md

@@ -38,7 +38,7 @@ This is a test of the markdown to html converter.
 console.log(html);
 ```
 
-Add `.nbcontents` to the container of the markdown.
+Add `.nbcontent` to the container of the markdown.
 
 ```html
 <div class="nbcontent">
@@ -48,23 +48,51 @@ Add `.nbcontents` to the container of the markdown.
 
 ### Styles
 
-We have some default styles that are applied to the HTML.
+We have some default styles that are applied to the HTML. All CSS variables use the `--nb-` prefix so they do not conflict with your app's design tokens (e.g. `--background`, `--primary`).
 
-#### Basic Usage (Performance Focused)
-For simple markdown content, use only the base styles:
+#### Import
+
+**Basic** (markdown only):
 
 ```ts
 import '@nakobase/nakobase-md-html/styles/base.css';
 ```
 
-#### Rich Features
-For content with custom blocks, containers, and rich features:
+**Rich** (custom blocks, containers, etc.):
 
 ```ts
 import '@nakobase/nakobase-md-html/styles/base.css';
 import '@nakobase/nakobase-md-html/styles/rich.css';
 ```
 
+#### Changing colors
+
+You can customize colors in two ways:
+
+1. **Content area (the `.nbcontent` block itself)**
+   The library does not set `background-color` or `color` on `.nbcontent`, so it inherits from its parent (e.g. your page background and text color). To give it its own look, set them directly:
+
+   ```css
+   .nbcontent {
+     background-color: #f8f8f8;
+     color: #333;
+   }
+   ```
+
+2. **Inner elements (code blocks, containers, links, etc.)**
+   Override CSS variables on `.nbcontent`. Variables are prefixed with `--nb-` (e.g. `--nb-primary`, `--nb-link`, `--nb-background` for inner boxes). See [base styles](src/styles/base.scss) for the full list.
+
+   ```css
+   .nbcontent {
+     --nb-primary: #2563eb;
+     --nb-link: #0ea5e9;
+   }
+   ```
+
+   If your overrides (e.g. in `globals.css`) don't take effect because the library CSS loads later, either **load your override CSS after the library** (e.g. import it after `base.css` / `rich.css` in the page that renders the content), or use **`!important`** (e.g. `--nb-link: #000 !important;`).
+
+You can use both: e.g. set `.nbcontent { background-color; color; }` for the content area and `--nb-*` for code blocks and containers.
+
 ### Code Highlighting
 If you want code highlighting, also import a Prism theme:
 

package/dist/cjs/constants.d.ts

@@ -3,7 +3,7 @@ export declare const CONTAINER_TYPES: {
     readonly TOC: "toc";
     readonly BOX: "box";
     readonly BUBBLE: "bubble";
-    readonly BUBBLE_IMAGE: "bubbleImage";
+    readonly BUBBLE_IMAGE: "bubble-image";
     readonly DETAILS: "details";
     readonly HEADING: "heading";
 };

package/dist/cjs/constants.js

@@ -9,7 +9,7 @@ const CONTAINER_TYPES = exports.CONTAINER_TYPES = {
   TOC: 'toc',
   BOX: 'box',
   BUBBLE: 'bubble',
-  BUBBLE_IMAGE: 'bubbleImage',
+  BUBBLE_IMAGE: 'bubble-image',
   DETAILS: 'details',
   HEADING: 'heading'
 };

package/dist/cjs/sanitizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanitizer.d.ts","sourceRoot":"","sources":["../../src/sanitizer.ts"],"names":[],"mappings":"AAsCA,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,KAAG,MAuBpC,CAAC"}
+{"version":3,"file":"sanitizer.d.ts","sourceRoot":"","sources":["../../src/sanitizer.ts"],"names":[],"mappings":"AA+CA,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,KAAG,MAuBpC,CAAC"}

package/dist/cjs/sanitizer.js

@@ -10,17 +10,19 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 const extendedTags = ['iframe', 'code', 'details', 'summary', 'circle', 'img', 'input', 'pre', 'span', 'picture', 'source'];
 const extendedAttributes = {
-  a: [...(_sanitizeHtml.defaults.allowedAttributes.a || []), 'id', 'class', 'data-line'],
+  a: [...(_sanitizeHtml.defaults.allowedAttributes.a || []), 'id', 'class', 'data-line', 'rel', 'target'],
   iframe: ['src', 'width', 'height', 'allow', 'sandbox', 'frameborder'],
   input: ['type', 'checked', 'disabled', 'readonly', 'value', 'class'],
   source: ['srcset', 'type'],
+  picture: ['class'],
   img: ['src', 'alt', 'width', 'height'],
+  em: ['class'],
   ul: ['class'],
   ol: ['class'],
   li: ['class'],
   div: ['class'],
   pre: ['class'],
-  code: [...(_sanitizeHtml.defaults.allowedAttributes.code || []), 'class'],
+  code: [...(_sanitizeHtml.defaults.allowedAttributes.code || []), 'class', 'data-line'],
   span: ['class'],
   h1: ['id'],
   h2: ['id'],

package/dist/cjs/utils/md-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"md-container.d.ts","sourceRoot":"","sources":["../../../src/utils/md-container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,uBAAuB,CAAC;AAK/C,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AAMF,eAAO,MAAM,aAAa;uBACI,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CA2C/C,CAAC;AAMF,eAAO,MAAM,kBAAkB;uBACD,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAwD/C,CAAC;AAOF,eAAO,MAAM,UAAU;uBACO,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AA0BF,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAa/C,CAAC"}
+{"version":3,"file":"md-container.d.ts","sourceRoot":"","sources":["../../../src/utils/md-container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,uBAAuB,CAAC;AAK/C,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AAMF,eAAO,MAAM,aAAa;uBACI,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CA+C/C,CAAC;AAMF,eAAO,MAAM,kBAAkB;uBACD,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAwD/C,CAAC;AAOF,eAAO,MAAM,UAAU;uBACO,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AA4BF,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAa/C,CAAC"}

package/dist/cjs/utils/md-container.js

@@ -25,7 +25,7 @@ const detailsOptions = exports.detailsOptions = {
 };
 
 // Bubble
-// ::: bubble alt="alt" src="src" webp="src.webp" width="100" height="100" pos="left"
+// ::: bubble alt="alt" src="src" webp="src.webp" width="100" height="100" pos="left" name="name"
 // markdown
 // :::
 const bubbleOptions = exports.bubbleOptions = {
@@ -48,7 +48,8 @@ const bubbleOptions = exports.bubbleOptions = {
         width = '80',
         height = '80',
         pos = 'left',
-        webp = ''
+        webp = '',
+        name = ''
       } = attrs;
       const imgHtml = `<img src="${(0, _utils.escapeHtml)(src)}" alt="${(0, _utils.escapeHtml)(alt)}" ` + `width="${(0, _utils.escapeHtml)(width)}" height="${(0, _utils.escapeHtml)(height)}">`;
       let imageElement;
@@ -57,7 +58,7 @@ const bubbleOptions = exports.bubbleOptions = {
       } else {
         imageElement = imgHtml;
       }
-      return `<div class="bubble ${pos}">` + imageElement + `<div class="bubble-content">`;
+      return `<div class="bubble ${pos}">` + `<div class="bubble-avatar">` + imageElement + `${name ? `<span class="bubble-name">${(0, _utils.escapeHtml)(name)}</span>` : ''}` + `</div>` + `<div class="bubble-content">`;
     } else {
       return `</div></div>\n`;
     }
@@ -120,12 +121,12 @@ const bubbleImageOptions = exports.bubbleImageOptions = {
 //
 const boxOptions = exports.boxOptions = {
   validate: function (params) {
-    return /^(box[1-6])(?:\s+(.*))?$/.test(params.trim());
+    return /^(box[1-7])(?:\s+(.*))?$/.test(params.trim());
   },
   render: function (tokens, idx) {
     const isOpeningTag = tokens[idx].nesting === 1;
     if (isOpeningTag) {
-      const m = tokens[idx].info.trim().match(/^(box[1-6])(?:\s+(.*))?$/);
+      const m = tokens[idx].info.trim().match(/^(box[1-7])(?:\s+(.*))?$/);
       if (!m) return '';
       const boxType = m[1]; // box1, box2, etc.
       const boxTitle = m[2] || ''; // title (optional)
@@ -148,6 +149,8 @@ const boxHtml = (boxType, boxTitle) => {
     case 'box5':
     case 'box6':
       return `<div class="box ${boxType}"><div class="msg-container"><span class="icon"></span>${boxTitle ? `<span>${boxTitle}</span>` : ''}</div>`;
+    case 'box7':
+      return `<div class="box ${boxType}">${boxTitle ? `<div class="box-title">${boxTitle}</div>` : ''}`;
     default:
       return `<div class="box ${boxType}">${boxTitle ? `<span>${boxTitle}</span>` : ''}`;
   }

package/dist/cjs/utils/md-custom-blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"md-custom-blocks.d.ts","sourceRoot":"","sources":["../../../src/utils/md-custom-blocks.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAsDrC,wBAAgB,cAAc,CAAC,EAAE,EAAE,UAAU,QAkC5C"}
+{"version":3,"file":"md-custom-blocks.d.ts","sourceRoot":"","sources":["../../../src/utils/md-custom-blocks.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAmHrC,wBAAgB,cAAc,CAAC,EAAE,EAAE,UAAU,QAiC5C"}

package/dist/cjs/utils/md-custom-blocks.js

@@ -5,28 +5,50 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mdCustomBlocks = mdCustomBlocks;
 var _utils = require("markdown-it/lib/common/utils");
+const attrRe = /([a-zA-Z0-9-_]+)="([^"]*)"/g;
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
+function parseAttrs(rawAttrs) {
+  const attrs = {};
+  let mat;
+  attrRe.lastIndex = 0;
+  while (mat = attrRe.exec(rawAttrs)) {
+    attrs[mat[1]] = mat[2];
+  }
+  return attrs;
+}
+function hasRequiredAttrs(attrs, requiredKeys) {
+  return requiredKeys.every(key => attrs[key]);
+}
+function renderLinkExternal({
+  url,
+  text,
+  target = '_blank',
+  rel,
+  icon = 'true'
+}) {
+  const label = text || url;
+  const relValues = new Set((rel || '').split(/\s+/).filter(Boolean));
+  if (target === '_blank') {
+    relValues.add('noopener');
+    relValues.add('noreferrer');
+  }
+  const linkRel = [...relValues].join(' ');
+  const className = icon === 'false' ? 'external-link external-link-no-icon' : 'external-link';
+  const relAttr = linkRel ? ` rel="${(0, _utils.escapeHtml)(linkRel)}"` : '';
+  return `<a href="${(0, _utils.escapeHtml)(url)}" target="${(0, _utils.escapeHtml)(target)}"${relAttr} class="${className}">${(0, _utils.escapeHtml)(label)}</a>`;
+}
 function registerKVBlock(md, block) {
   const escapedMarker = escapeRegExp(block.marker);
   const blockRe = new RegExp(`^@\\[${escapedMarker}\\]\\(([^)]*)\\)$`);
-  const attrRe = /([a-zA-Z0-9-_]+)="([^"]*)"/g;
   md.block.ruler.before('paragraph', block.name, (state, start, _end, silent) => {
     const line = state.src.slice(state.bMarks[start] + state.tShift[start], state.eMarks[start]).trim();
     const m = line.match(blockRe);
     if (!m) return false;
     if (silent) return true;
-    const attrs = {};
-    let mat;
-    while (mat = attrRe.exec(m[1])) {
-      attrs[mat[1]] = mat[2];
-    }
-    for (const key of block.requiredKeys) {
-      if (!attrs[key]) {
-        return false;
-      }
-    }
+    const attrs = parseAttrs(m[1]);
+    if (!hasRequiredAttrs(attrs, block.requiredKeys)) return false;
     const token = state.push(block.name, '', 0);
     token.meta = attrs;
     state.line = start + 1;
@@ -36,6 +58,28 @@ function registerKVBlock(md, block) {
     return block.renderer(tokens[idx].meta);
   };
 }
+function registerKVInline(md, block) {
+  const marker = `@[${block.marker}](`;
+  md.inline.ruler.before('link', block.name, (state, silent) => {
+    const start = state.pos;
+    if (state.src.slice(start, start + marker.length) !== marker) {
+      return false;
+    }
+    const end = state.src.indexOf(')', start + marker.length);
+    if (end < 0) return false;
+    const attrs = parseAttrs(state.src.slice(start + marker.length, end));
+    if (!hasRequiredAttrs(attrs, block.requiredKeys)) return false;
+    if (!silent) {
+      const token = state.push(block.name, '', 0);
+      token.meta = attrs;
+    }
+    state.pos = end + 1;
+    return true;
+  });
+  md.renderer.rules[block.name] = (tokens, idx) => {
+    return block.renderer(tokens[idx].meta);
+  };
+}
 function mdCustomBlocks(md) {
   // @[img](src="", alt="", webp="", width="", height="")
   registerKVBlock(md, {
@@ -54,8 +98,8 @@ function mdCustomBlocks(md) {
       const altText = alt ? `alt="${(0, _utils.escapeHtml)(alt)}"` : '';
       const widthAttr = width ? ` width="${(0, _utils.escapeHtml)(width)}"` : '';
       const heightAttr = height ? ` height="${(0, _utils.escapeHtml)(height)}"` : '';
-      const captionText = caption ? `<em>${(0, _utils.escapeHtml)(caption)}</em>` : '';
-      return `<picture>
+      const captionText = caption ? `<em class="custom-image-caption">${(0, _utils.escapeHtml)(caption)}</em>` : '';
+      return `<picture class="custom-image">
         ${webpSource}
         <img src="${(0, _utils.escapeHtml)(src)}" ${altText}${widthAttr}${heightAttr}>
         ${captionText}
@@ -64,18 +108,12 @@ function mdCustomBlocks(md) {
   });
 
   // @[link-external](url="", text="")
-  registerKVBlock(md, {
+  const linkExternal = {
     name: 'link_external',
     marker: 'link-external',
     requiredKeys: ['url'],
-    renderer: ({
-      url,
-      text
-    }) => {
-      const label = text || url;
-      return `<a href="${(0, _utils.escapeHtml)(url)}" target="_blank" rel="noopener noreferrer" class="external-link">
-        ${(0, _utils.escapeHtml)(label)}
-      </a>`;
-    }
-  });
+    renderer: renderLinkExternal
+  };
+  registerKVBlock(md, linkExternal);
+  registerKVInline(md, linkExternal);
 }

package/dist/cjs/utils/md-custom-inlines.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"md-custom-inlines.d.ts","sourceRoot":"","sources":["../../../src/utils/md-custom-inlines.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAoDrC,wBAAgB,eAAe,CAAC,EAAE,EAAE,UAAU,QAc7C"}
+{"version":3,"file":"md-custom-inlines.d.ts","sourceRoot":"","sources":["../../../src/utils/md-custom-inlines.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAiErC,wBAAgB,eAAe,CAAC,EAAE,EAAE,UAAU,QAqB7C"}

package/dist/cjs/utils/md-custom-inlines.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mdCustomInlines = mdCustomInlines;
-var _utils = require("markdown-it/lib/common/utils");
+const HIGHLIGHT_COLORS = new Set(['red', 'green', 'blue']);
 function registerInline(md, inline) {
   const inlineRule = (state, silent) => {
     const start = state.pos;
@@ -12,7 +12,6 @@ function registerInline(md, inline) {
     if (start + inline.marker.length > max || state.src.slice(start, start + inline.marker.length) !== inline.marker) {
       return false;
     }
-    if (silent) return true;
     let end = start + inline.marker.length;
     while (end < max) {
       if (state.src.slice(end, end + inline.marker.length) === inline.marker) {
@@ -24,28 +23,39 @@ function registerInline(md, inline) {
       return false;
     }
     const content = state.src.slice(start + inline.marker.length, end);
-    const token = state.push(inline.name, '', 0);
-    token.content = content;
-    token.markup = inline.marker;
+    const parsed = inline.parseContent ? inline.parseContent(content) : {
+      className: inline.name,
+      textStartOffset: 0
+    };
+    if (silent) return true;
+    const oldPosMax = state.posMax;
+    const tokenOpen = state.push(`${inline.name}_open`, 'span', 1);
+    tokenOpen.markup = inline.marker;
+    tokenOpen.attrSet('class', parsed.className);
+    state.pos = start + inline.marker.length + parsed.textStartOffset;
+    state.posMax = end;
+    state.md.inline.tokenize(state);
+    const tokenClose = state.push(`${inline.name}_close`, 'span', -1);
+    tokenClose.markup = inline.marker;
     state.pos = end + inline.marker.length;
+    state.posMax = oldPosMax;
     return true;
   };
   md.inline.ruler.before('emphasis', inline.name, inlineRule);
-  md.renderer.rules[inline.name] = (tokens, idx) => {
-    return inline.renderer(tokens[idx].content, tokens[idx].meta);
-  };
 }
 function mdCustomInlines(md) {
   // ==highlight==
   registerInline(md, {
     name: 'highlight',
     marker: '==',
-    renderer: content => {
+    parseContent: content => {
       const colorMatch = content.match(/^([a-zA-Z]+):(.+)$/);
-      const color = colorMatch ? colorMatch[1] : 'default';
-      const text = colorMatch ? colorMatch[2] : content;
-      const className = color === 'default' ? 'highlight' : `highlight highlight-${color}`;
-      return `<span class="${className}">${(0, _utils.escapeHtml)(text)}</span>`;
+      const color = colorMatch && HIGHLIGHT_COLORS.has(colorMatch[1]) ? colorMatch[1] : 'default';
+      const hasValidColor = color !== 'default';
+      return {
+        className: hasValidColor ? `highlight highlight-${color}` : 'highlight',
+        textStartOffset: hasValidColor ? colorMatch[1].length + 1 : 0
+      };
     }
   });
 }

package/dist/styles/base.css

@@ -1 +1 @@
-@media screen and (max-width: 576px){pre>code{padding:1rem .8rem;font-size:.85em}}.nbcontent{--background: oklch(100% 0 0deg);--foreground: oklch(14.1% 0.005 285.823deg);--primary: oklch(21% 0.006 285.885deg);--primary-foreground: oklch(98.5% 0 0deg);--secondary: oklch(96.7% 0.001 286.375deg);--secondary-foreground: oklch(21% 0.006 285.885deg);--muted: oklch(96.7% 0.001 286.375deg);--muted-foreground: oklch(55.2% 0.016 285.938deg);--accent: oklch(96.7% 0.001 286.375deg);--accent-foreground: oklch(21% 0.006 285.885deg);--destructive: oklch(57.7% 0.245 27.325deg);--border: oklch(92% 0.004 286.32deg);--input: oklch(92% 0.004 286.32deg);--ring: oklch(70.5% 0.015 286.067deg);--link: oklch(62.3% 0.214 259.815deg);--warning: oklch(97.54% 0.025552 84.593deg);--warning-foreground: oklch(83.04% 0.1459 74.36deg);--danger: oklch(96.56% 0.0177 4.51deg);--danger-foreground: oklch(72.71% 0.1684 24.66deg);--rounded-xs: 4px;--rounded-sm: 7px;--rounded-md: 10px;--rounded-lg: 14px;--rounded-full: 99rem}.nbcontent>*:first-child{margin-top:0}.nbcontent{line-height:1.8;background-color:var(--background);color:var(--foreground)}.nbcontent i,.nbcontent cite,.nbcontent em,.nbcontent var{font-style:italic}.nbcontent strong{font-weight:bold}.nbcontent a{color:var(--link)}.nbcontent a:hover{text-decoration:underline}.nbcontent p+p{margin-top:1.2em}.nbcontent h1,.nbcontent h2,.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{font-weight:bold}.nbcontent h1+p,.nbcontent h2+p,.nbcontent h3+p,.nbcontent h4+p,.nbcontent h5+p,.nbcontent h6+p{margin-top:.2em}.nbcontent h1,.nbcontent h2{margin-top:1.9em;margin-bottom:1.5rem;padding-bottom:.1em;border-bottom:solid 1px var(--border)}.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{margin-top:1.8em;margin-bottom:.4em}.nbcontent h1{font-size:1.7em}.nbcontent h2{font-size:1.5em}.nbcontent h3{font-size:1.3em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.9em}@media screen and (max-width: 576px){.nbcontent h1{font-size:1.6em}.nbcontent h2{font-size:1.4em}.nbcontent h3{font-size:1.2em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.85em}}.nbcontent ul,.nbcontent ol{margin:1.4rem 0;line-height:1.6}.nbcontent ul>li,.nbcontent ol>li{margin:.4rem 0}.nbcontent ul ul,.nbcontent ul ol,.nbcontent ol ul,.nbcontent ol ol{margin:.2em 0}.nbcontent ul p,.nbcontent ol p{margin:0}.nbcontent ul{padding-left:1.8em}.nbcontent ul>li{list-style:disc}.nbcontent ul>li::marker{font-size:1.1em}.nbcontent ol{padding-left:1.7em}.nbcontent ol>li{list-style:decimal;padding-left:.2em}.nbcontent ol>li::marker{font-weight:600;letter-spacing:-0.05em}.nbcontent .contains-task-list .task-list-item{list-style:none}.nbcontent .task-list-item-checkbox{margin-left:-1.5em;font-size:1em;pointer-events:none}.nbcontent code{padding:.2em .4em;background:var(--secondary);font-size:.85em;border-radius:var(--rounded-xs);vertical-align:.08em;color:var(--foreground)}.nbcontent code,.nbcontent .code-filename{font-family:"JetBrains Mono","Fira Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Cascadia Code","Source Code Pro",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-font-smoothing:antialiased}.nbcontent .code-container{position:relative;margin:1.3rem 0}.nbcontent .code-filename{display:table;max-width:100%;background:var(--primary);color:var(--primary-foreground);font-size:12px;line-height:1.3;border-radius:var(--rounded-xs) var(--rounded-xs) 0 0;padding:6px 12px 20px;margin-bottom:-24px}.nbcontent .code-filename-container+pre{border-top-left-radius:0}.nbcontent pre{margin:1.3rem 0;background:var(--primary);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--rounded-md);word-break:normal;word-wrap:normal;display:flex}.nbcontent pre:after{content:"";width:8px;flex-shrink:0}.nbcontent pre code{margin:0;padding:0;background:rgba(0,0,0,0);font-size:.9em}.nbcontent pre>code{display:block;padding:1.1rem}.nbcontent table{margin:1.2rem auto;width:auto;border-collapse:collapse;font-size:.95em;line-height:1.5;word-break:normal;display:block;overflow:auto;-webkit-overflow-scrolling:touch}.nbcontent th,.nbcontent td{padding:.6rem;border:solid 1px var(--border);background:var(--background)}.nbcontent th{font-weight:700;background:var(--secondary)}.nbcontent img:not(.emoji){margin:1.5rem auto;display:table;max-width:100%;height:auto}.nbcontent img+br{display:none}.nbcontent img~em{display:block;margin:-1rem auto 0;line-height:1.3;text-align:center;color:var(--muted-foreground);font-size:.92em}.nbcontent a:has(img){display:table;margin:0 auto}.nbcontent hr{border-top:2px solid var(--border);margin:2.5rem 0}.nbcontent blockquote{font-size:.97em;margin:1.4rem 0;border-left:solid 3px var(--border);padding:2px 0 2px .7em;color:var(--muted-foreground)}.nbcontent blockquote p{margin:1rem 0}.nbcontent blockquote>:first-child{margin-top:0}.nbcontent blockquote>:last-child{margin-bottom:0}.nbcontent blockquote.twitter-tweet{display:none}.dark .nbcontent{--background: oklch(14.1% 0.005 285.823deg);--foreground: oklch(98.5% 0 0deg);--primary: oklch(92% 0.004 286.32deg);--primary-foreground: oklch(21% 0.006 285.885deg);--secondary: oklch(27.4% 0.006 286.033deg);--secondary-foreground: oklch(98.5% 0 0deg);--muted: oklch(27.4% 0.006 286.033deg);--muted-foreground: oklch(70.5% 0.015 286.067deg);--accent: oklch(27.4% 0.006 286.033deg);--accent-foreground: oklch(98.5% 0 0deg);--destructive: oklch(70.4% 0.191 22.216deg);--border: oklch(100% 0 0deg / 0.1);--input: oklch(100% 0 0deg / 0.15);--ring: oklch(55.2% 0.016 285.938deg);--link: oklch(62.3% 0.214 259.815deg);--warning: oklch(97.54% 0.025552 84.593deg);--warning-foreground: oklch(83.04% 0.1459 74.36deg);--danger: oklch(96.56% 0.0177 4.51deg);--danger-foreground: oklch(72.71% 0.1684 24.66deg);--rounded-xs: 4px;--rounded-sm: 7px;--rounded-md: 10px;--rounded-lg: 14px;--rounded-full: 99rem}
+@media screen and (max-width: 576px){pre>code{padding:1rem .8rem;font-size:.85em}}.nbcontent{--nb-background: oklch(100% 0 0deg);--nb-foreground: oklch(14.1% 0.005 285.823deg);--nb-primary: oklch(21% 0.006 285.885deg);--nb-primary-foreground: oklch(98.5% 0 0deg);--nb-secondary: oklch(96.7% 0.001 286.375deg);--nb-secondary-foreground: oklch(21% 0.006 285.885deg);--nb-code: oklch(93.88% 0.01 247.91deg);--nb-muted: oklch(96.7% 0.001 286.375deg);--nb-muted-foreground: oklch(55.2% 0.016 285.938deg);--nb-accent: oklch(96.7% 0.001 286.375deg);--nb-accent-foreground: oklch(21% 0.006 285.885deg);--nb-destructive: oklch(57.7% 0.245 27.325deg);--nb-border: oklch(92% 0.004 286.32deg);--nb-input: oklch(92% 0.004 286.32deg);--nb-ring: oklch(70.5% 0.015 286.067deg);--nb-link: oklch(62.3% 0.214 259.815deg);--nb-info: oklch(97.2% 0.012 244deg);--nb-info-foreground: oklch(71.56% 0.1161 221.975deg);--nb-warning: oklch(97.54% 0.025552 84.593deg);--nb-warning-foreground: oklch(83.04% 0.1459 74.36deg);--nb-danger: oklch(96.56% 0.0177 4.51deg);--nb-danger-foreground: oklch(72.71% 0.1684 24.66deg);--nb-rounded-xs: 4px;--nb-rounded-sm: 7px;--nb-rounded-md: 10px;--nb-rounded-lg: 14px;--nb-rounded-full: 99rem}.nbcontent>*:first-child{margin-top:0}.nbcontent{line-height:1.8}.nbcontent i,.nbcontent cite,.nbcontent em,.nbcontent var{font-style:italic}.nbcontent strong{font-weight:bold}.nbcontent a{color:var(--nb-link)}.nbcontent a:hover{text-decoration:underline}.nbcontent p+p{margin-top:1.2em}.nbcontent h1,.nbcontent h2,.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{font-weight:bold}.nbcontent h1+p,.nbcontent h2+p,.nbcontent h3+p,.nbcontent h4+p,.nbcontent h5+p,.nbcontent h6+p{margin-top:.2em}.nbcontent h1,.nbcontent h2{margin-top:1.9em;margin-bottom:1.5rem;padding-bottom:.1em;border-bottom:solid 1px var(--nb-border)}.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{margin-top:1.8em;margin-bottom:.4em}.nbcontent h1{font-size:1.7em}.nbcontent h2{font-size:1.5em}.nbcontent h3{font-size:1.3em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.9em}@media screen and (max-width: 576px){.nbcontent h1{font-size:1.6em}.nbcontent h2{font-size:1.4em}.nbcontent h3{font-size:1.2em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.85em}}.nbcontent ul,.nbcontent ol{margin:1.4rem 0;line-height:1.6}.nbcontent ul>li,.nbcontent ol>li{margin:.4rem 0}.nbcontent ul ul,.nbcontent ul ol,.nbcontent ol ul,.nbcontent ol ol{margin:.2em 0}.nbcontent ul p,.nbcontent ol p{margin:0}.nbcontent ul{padding-left:1.8em}.nbcontent ul>li{list-style:disc}.nbcontent ul>li::marker{font-size:1.1em}.nbcontent ol{padding-left:1.7em}.nbcontent ol>li{list-style:decimal;padding-left:.2em}.nbcontent ol>li::marker{font-weight:600;letter-spacing:-0.05em}.nbcontent .contains-task-list .task-list-item{list-style:none}.nbcontent .task-list-item-checkbox{margin-left:-1.5em;font-size:1em;pointer-events:none}.nbcontent code{padding:.2em .4em;background:var(--nb-code);font-size:.85em;border-radius:var(--nb-rounded-xs);vertical-align:.08em;color:var(--nb-foreground)}.nbcontent code,.nbcontent .code-filename{font-family:"JetBrains Mono","Fira Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Cascadia Code","Source Code Pro",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-font-smoothing:antialiased}.nbcontent .code-container{position:relative;margin:1.5rem 0}.nbcontent .code-filename{display:table;max-width:100%;background:var(--nb-primary);color:var(--nb-primary-foreground);font-size:12px;line-height:1.3;border-radius:var(--nb-rounded-xs) var(--nb-rounded-xs) 0 0;padding:6px 12px 20px;margin-bottom:-24px}.nbcontent .code-filename-container+pre{border-top-left-radius:0}.nbcontent pre{margin:1.5rem 0;background:var(--nb-primary);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--nb-rounded-md);word-break:normal;word-wrap:normal;display:flex}.nbcontent pre:after{content:"";width:8px;flex-shrink:0}.nbcontent pre code{margin:0;padding:0;background:rgba(0,0,0,0);font-size:.9em}.nbcontent pre>code{display:block;padding:1.1rem}.nbcontent table{margin:1.5rem auto;width:auto;border-collapse:collapse;font-size:.95em;line-height:1.5;word-break:normal;display:block;overflow:auto;-webkit-overflow-scrolling:touch}.nbcontent th,.nbcontent td{padding:.6rem;border:solid 1px var(--nb-border);background:var(--nb-background)}.nbcontent th{font-weight:700;background:var(--nb-secondary)}.nbcontent img:not(.emoji){margin:1.5rem auto;display:table;max-width:100%;height:auto}.nbcontent img+br{display:none}.nbcontent img~em{display:block;margin:-1rem auto 0;line-height:1.3;text-align:center;color:var(--nb-muted-foreground);font-size:.92em}.nbcontent a:has(img){display:table;margin:0 auto}.nbcontent hr{border-top:2px solid var(--nb-border);margin:2.5rem 0}.nbcontent blockquote{font-size:.97em;margin:1.5rem 0;border-left:solid 3px var(--nb-border);padding:2px 0 2px .7em;color:var(--nb-muted-foreground)}.nbcontent blockquote p{margin:1rem 0}.nbcontent blockquote>:first-child{margin-top:0}.nbcontent blockquote>:last-child{margin-bottom:0}.nbcontent blockquote.twitter-tweet{display:none}.dark .nbcontent{--nb-background: oklch(14.1% 0.005 285.823deg);--nb-foreground: oklch(98.5% 0 0deg);--nb-primary: oklch(92% 0.004 286.32deg);--nb-primary-foreground: oklch(21% 0.006 285.885deg);--nb-secondary: oklch(27.4% 0.006 286.033deg);--nb-secondary-foreground: oklch(98.5% 0 0deg);--nb-code: oklch(34% 0.006 286.033deg);--nb-muted: oklch(27.4% 0.006 286.033deg);--nb-muted-foreground: oklch(70.5% 0.015 286.067deg);--nb-accent: oklch(27.4% 0.006 286.033deg);--nb-accent-foreground: oklch(98.5% 0 0deg);--nb-destructive: oklch(70.4% 0.191 22.216deg);--nb-border: oklch(100% 0 0deg / 0.1);--nb-input: oklch(100% 0 0deg / 0.15);--nb-ring: oklch(55.2% 0.016 285.938deg);--nb-link: oklch(62.3% 0.214 259.815deg);--nb-info: oklch(97.2% 0.012 244deg);--nb-info-foreground: oklch(71.56% 0.1161 221.975deg);--nb-warning: oklch(97.54% 0.025552 84.593deg);--nb-warning-foreground: oklch(83.04% 0.1459 74.36deg);--nb-danger: oklch(96.56% 0.0177 4.51deg);--nb-danger-foreground: oklch(72.71% 0.1684 24.66deg);--nb-rounded-xs: 4px;--nb-rounded-sm: 7px;--nb-rounded-md: 10px;--nb-rounded-lg: 14px;--nb-rounded-full: 99rem}

package/dist/styles/rich.css

@@ -1 +1 @@
-.nbcontent details{font-size:.95em;margin:1rem 0;line-height:1.7}.nbcontent summary{cursor:pointer;outline:0;padding:.7em .7em .7em .9em;border:solid 1px var(--border);color:var(--primary);font-size:.9em;border-radius:var(--rounded-sm);background:var(--background)}.nbcontent summary::-webkit-details-marker{color:var(--muted-foreground)}.nbcontent details[open]>summary{border-radius:var(--rounded-sm) var(--rounded-sm) 0 0;box-shadow:none;background:var(--background);border-bottom:none}.nbcontent .details-content{padding:.5em .9em;border:solid 1px var(--border);border-radius:0 0 var(--rounded-lg) var(--rounded-lg);background:var(--background)}.nbcontent .details-content>*{margin:.5em 0}.nbcontent .bubble{display:flex;align-items:center;gap:1rem;margin:1rem 0}.nbcontent .bubble img{width:80px;height:80px;border-radius:50%;border:2px solid var(--border);padding:.2rem}.nbcontent .bubble .bubble-content{position:relative;width:100%;padding:.5rem .8rem;color:var(--foreground);background-color:var(--secondary);border-radius:5px}.nbcontent .bubble .bubble-content p+p{margin-top:.4em}.nbcontent .bubble .bubble-content::before,.nbcontent .bubble .bubble-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%)}.nbcontent .bubble .bubble-content::before{background-color:var(--secondary)}.nbcontent .bubble .bubble-content::after{left:-9px;background-color:var(--secondary)}.nbcontent .bubble.right{flex-direction:row-reverse}.nbcontent .bubble.right .bubble-content::before,.nbcontent .bubble.right .bubble-content::after{left:auto;right:-12px;clip-path:polygon(0 0, 100% 50%, 0 100%)}.nbcontent .bubble.right .bubble-content::after{left:auto;right:-9px}.nbcontent .bubble-image{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}.nbcontent .bubble-image .bubble-image-wrapper{overflow:hidden;flex-basis:40%;display:flex;align-items:center;justify-content:center;flex-direction:column;max-width:100%;border:2px solid var(--border);border-radius:5px}.nbcontent .bubble-image .bubble-image-wrapper .browser-header{display:flex;align-items:center;padding:.6rem 1rem;background-color:var(--secondary);width:100%}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls{display:flex;gap:.5rem}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn{width:8px;height:8px;border-radius:50%}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn.close{background-color:#ef4444}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn.minimize{background-color:#eab308}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn.maximize{background-color:#22c55e}.nbcontent .bubble-image .bubble-image-wrapper img{width:100%;height:auto;margin:0}.nbcontent .bubble-image .bubble-image-content{flex-basis:60%;position:relative;width:100%;padding:.5rem .8rem;color:var(--foreground);background-color:var(--secondary);border-radius:5px}.nbcontent .bubble-image .bubble-image-content p+p{margin-top:.4em}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%);background-color:var(--secondary)}.nbcontent .bubble-image .bubble-image-content::after{left:-9px}@media screen and (max-width: 768px){.nbcontent .bubble-image{flex-direction:column}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{top:-12px;left:50%;width:28px;height:12px;clip-path:polygon(50% 0, 0 100%, 100% 100%);transform:translateX(-50%)}.nbcontent .bubble-image .bubble-image-content::after{top:-9px}}.nbcontent .box{margin:1.5rem 0}.nbcontent .box p+p{margin-top:.4em}.nbcontent .box.box1{position:relative;border:1px solid var(--border);border-radius:var(--rounded-sm);padding:1rem}.nbcontent .box.box1 span{position:absolute;top:0;left:1rem;font-size:1.2em;color:var(--foreground);background-color:var(--background);padding:0 .5em;transform:translateY(-50%)}.nbcontent .box.box2{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--secondary)}.nbcontent .box.box3{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--warning-foreground)}.nbcontent .box.box3 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--warning-foreground);font-weight:bold}.nbcontent .box.box3 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--warning-foreground);background-color:var(--warning-foreground);border-radius:50%}.nbcontent .box.box3 .icon::before,.nbcontent .box.box3 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box3 .icon::before{top:2px;height:2px}.nbcontent .box.box3 .icon::after{height:8px;bottom:2px}.nbcontent .box.box4{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--danger-foreground)}.nbcontent .box.box4 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--danger-foreground);font-weight:bold}.nbcontent .box.box4 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--danger-foreground);background-color:var(--danger-foreground);border-radius:50%}.nbcontent .box.box4 .icon::before,.nbcontent .box.box4 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box4 .icon::before{top:2px;height:2px}.nbcontent .box.box4 .icon::after{height:8px;bottom:2px}.nbcontent .box.box5{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--warning)}.dark .nbcontent .box.box5{color:var(--background)}.nbcontent .box.box5 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--warning-foreground);font-weight:bold;margin-bottom:.5rem}.nbcontent .box.box5 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--warning-foreground);background-color:var(--warning-foreground);border-radius:50%}.nbcontent .box.box5 .icon::before,.nbcontent .box.box5 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box5 .icon::before{top:2px;height:2px}.nbcontent .box.box5 .icon::after{height:8px;bottom:2px}.nbcontent .box.box6{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--danger)}.dark .nbcontent .box.box6{color:var(--background)}.nbcontent .box.box6 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--danger-foreground);font-weight:bold;margin-bottom:.5rem}.nbcontent .box.box6 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--danger-foreground);background-color:var(--danger-foreground);border-radius:50%}.nbcontent .box.box6 .icon::before,.nbcontent .box.box6 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box6 .icon::before{top:2px;height:2px}.nbcontent .box.box6 .icon::after{height:8px;bottom:2px}.nbcontent .heading{margin:1.5rem 0}.nbcontent .heading h1,.nbcontent .heading h2,.nbcontent .heading h3,.nbcontent .heading h4,.nbcontent .heading h5,.nbcontent .heading h6{margin:0;font-size:1em}.nbcontent .heading.heading1{display:inline-block;position:relative;padding-left:1.5rem;font-weight:bold}.nbcontent .heading.heading1::before{position:absolute;top:0;left:0;width:17px;height:28px;color:var(--primary);background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221.25em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cstyle%3Esvg%7Bfill%3A%235ab9ff%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M438.6%20105.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-256%20256c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20338.7%20393.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200z%22%2F%3E%3C%2Fsvg%3E);background-position:50%;background-repeat:no-repeat;content:""}.nbcontent .external-link{display:inline-flex;align-items:center;gap:.3em;color:var(--link)}.nbcontent .external-link::after{content:"";display:inline-block;width:.9em;height:.9em;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center/contain;background-color:var(--link);vertical-align:-0.125em;position:relative;top:-0.05em}.nbcontent .highlight{background:linear-gradient(transparent 60%, #fef08a 40%);padding:0 2px;border-radius:2px}.dark .nbcontent .highlight{background:linear-gradient(transparent 60%, #ca8a04 40%)}.nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #fecaca 40%)}.dark .nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #dc2626 40%)}.nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #bbf7d0 40%)}.dark .nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #16a34a 40%)}.nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #bfdbfe 40%)}.dark .nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #2563eb 40%)}
+.nbcontent details{font-size:.95em;margin:1.5rem 0;line-height:1.7}.nbcontent summary{cursor:pointer;outline:0;padding:.7em .7em .7em .9em;border:solid 1px var(--nb-border);color:var(--nb-primary);font-size:.9em;border-radius:var(--nb-rounded-sm);background:var(--nb-background)}.nbcontent summary::-webkit-details-marker{color:var(--nb-muted-foreground)}.nbcontent details[open]>summary{border-radius:var(--nb-rounded-sm) var(--nb-rounded-sm) 0 0;box-shadow:none;background:var(--nb-background);border-bottom:none}.nbcontent .details-content{padding:.5em .9em;border:solid 1px var(--nb-border);border-radius:0 0 var(--nb-rounded-lg) var(--nb-rounded-lg);background:var(--nb-background)}.nbcontent .details-content>*{margin:.5em 0}.nbcontent .bubble{display:flex;align-items:flex-start;gap:1rem;margin:1.5rem 0}.nbcontent .bubble .bubble-avatar{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:.125rem;width:5rem}.nbcontent .bubble picture{display:block;width:5rem;height:5rem}.nbcontent .bubble img{box-sizing:border-box;display:block;width:5rem;height:5rem;max-width:none;margin:0;border-radius:50%;border:2px solid var(--nb-border);padding:.2rem}.nbcontent .bubble .bubble-name{max-width:6rem;color:var(--nb-muted-foreground);font-size:.85em;line-height:1.4;text-align:center;overflow-wrap:anywhere}.nbcontent .bubble .bubble-content{box-sizing:border-box;position:relative;width:100%;min-height:5rem;display:flex;flex-direction:column;justify-content:center;padding:.5rem .8rem;color:var(--nb-foreground);background-color:var(--nb-secondary);border-radius:5px}.nbcontent .bubble .bubble-content>:first-child{margin-top:0}.nbcontent .bubble .bubble-content>:last-child{margin-bottom:0}.nbcontent .bubble .bubble-content p+p{margin-top:.4em}.nbcontent .bubble .bubble-content::before,.nbcontent .bubble .bubble-content::after{position:absolute;top:2.5rem;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%)}.nbcontent .bubble .bubble-content::before{background-color:var(--nb-secondary)}.nbcontent .bubble .bubble-content::after{left:-9px;background-color:var(--nb-secondary)}.nbcontent .bubble.right{flex-direction:row-reverse}.nbcontent .bubble.right .bubble-content::before,.nbcontent .bubble.right .bubble-content::after{left:auto;right:-12px;clip-path:polygon(0 0, 100% 50%, 0 100%)}.nbcontent .bubble.right .bubble-content::after{left:auto;right:-9px}.nbcontent .bubble-image{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}.nbcontent .bubble-image .bubble-image-wrapper{overflow:hidden;flex-basis:40%;display:flex;align-items:center;justify-content:center;flex-direction:column;max-width:100%;border:2px solid var(--nb-border);border-radius:5px}.nbcontent .bubble-image .bubble-image-wrapper .browser-header{display:flex;align-items:center;padding:.6rem 1rem;background-color:var(--nb-secondary);width:100%}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls{display:flex;gap:.5rem}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn{width:8px;height:8px;border-radius:50%}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn.close{background-color:#ef4444}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn.minimize{background-color:#eab308}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn.maximize{background-color:#22c55e}.nbcontent .bubble-image .bubble-image-wrapper img{width:100%;height:auto;margin:0}.nbcontent .bubble-image .bubble-image-content{flex-basis:60%;position:relative;width:100%;padding:.5rem .8rem;color:var(--nb-foreground);background-color:var(--nb-secondary);border-radius:5px}.nbcontent .bubble-image .bubble-image-content p+p{margin-top:.4em}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%);background-color:var(--nb-secondary)}.nbcontent .bubble-image .bubble-image-content::after{left:-9px}@media screen and (max-width: 768px){.nbcontent .bubble-image{flex-direction:column}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{top:-12px;left:50%;width:28px;height:12px;clip-path:polygon(50% 0, 0 100%, 100% 100%);transform:translateX(-50%)}.nbcontent .bubble-image .bubble-image-content::after{top:-9px}}.nbcontent .box{margin:1.5rem 0}.nbcontent .box p+p{margin-top:.4em}.nbcontent .box.box1{position:relative;border:1px solid var(--nb-border);border-radius:var(--nb-rounded-sm);padding:1rem}.nbcontent .box.box1 span{position:absolute;top:0;left:1rem;font-size:1.2em;color:var(--nb-foreground);background-color:var(--nb-background);padding:0 .5em;transform:translateY(-50%)}.nbcontent .box.box2{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-secondary)}.nbcontent .box.box3{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-background);border:2px solid var(--nb-warning-foreground)}.nbcontent .box.box3 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--nb-background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--nb-warning-foreground);font-weight:bold}.nbcontent .box.box3 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--nb-warning-foreground);background-color:var(--nb-warning-foreground);border-radius:50%}.nbcontent .box.box3 .icon::before,.nbcontent .box.box3 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box3 .icon::before{top:2px;height:2px}.nbcontent .box.box3 .icon::after{height:8px;bottom:2px}.nbcontent .box.box4{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-background);border:2px solid var(--nb-danger-foreground)}.nbcontent .box.box4 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--nb-background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--nb-danger-foreground);font-weight:bold}.nbcontent .box.box4 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--nb-danger-foreground);background-color:var(--nb-danger-foreground);border-radius:50%}.nbcontent .box.box4 .icon::before,.nbcontent .box.box4 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box4 .icon::before{top:2px;height:2px}.nbcontent .box.box4 .icon::after{height:8px;bottom:2px}.nbcontent .box.box5{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-warning)}.dark .nbcontent .box.box5{color:var(--nb-background)}.nbcontent .box.box5 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--nb-warning-foreground);font-weight:bold;margin-bottom:.5rem}.nbcontent .box.box5 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--nb-warning-foreground);background-color:var(--nb-warning-foreground);border-radius:50%}.nbcontent .box.box5 .icon::before,.nbcontent .box.box5 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box5 .icon::before{top:2px;height:2px}.nbcontent .box.box5 .icon::after{height:8px;bottom:2px}.nbcontent .box.box6{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-danger)}.dark .nbcontent .box.box6{color:var(--nb-background)}.nbcontent .box.box6 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--nb-danger-foreground);font-weight:bold;margin-bottom:.5rem}.nbcontent .box.box6 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--nb-danger-foreground);background-color:var(--nb-danger-foreground);border-radius:50%}.nbcontent .box.box6 .icon::before,.nbcontent .box.box6 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box6 .icon::before{top:2px;height:2px}.nbcontent .box.box6 .icon::after{height:8px;bottom:2px}.nbcontent .box.box7{background:var(--nb-info)}.dark .nbcontent .box.box7{color:var(--nb-background)}.nbcontent .box.box7 .box-title{font-size:1.2em;background:var(--nb-info-foreground);padding:.25rem;text-align:center;color:var(--nb-primary-foreground);font-weight:bold;letter-spacing:.05em}.nbcontent .box.box7>:not(.box-title){padding-right:1.25rem;padding-left:1.25rem}.nbcontent .box.box7>p{margin:0}.nbcontent .box.box7>p+p{margin-top:.4em}.nbcontent .box.box7>:first-child:not(.box-title),.nbcontent .box.box7>.box-title+*{padding-top:.9375rem}.nbcontent .box.box7>:last-child{padding-bottom:.9375rem}.nbcontent .heading{margin:1.5rem 0}.nbcontent .heading h1,.nbcontent .heading h2,.nbcontent .heading h3,.nbcontent .heading h4,.nbcontent .heading h5,.nbcontent .heading h6{margin:0;font-size:1em}.nbcontent .heading.heading1{display:inline-block;position:relative;padding-left:1.5rem;font-weight:bold}.nbcontent .heading.heading1::before{position:absolute;top:0;left:0;width:17px;height:28px;color:var(--nb-primary);background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221.25em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cstyle%3Esvg%7Bfill%3A%235ab9ff%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M438.6%20105.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-256%20256c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20338.7%20393.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200z%22%2F%3E%3C%2Fsvg%3E);background-position:50%;background-repeat:no-repeat;content:""}.nbcontent .custom-image-caption{display:block;margin:-1rem auto 1.5rem;line-height:1.3;text-align:center;color:var(--nb-muted-foreground);font-size:.92em}.nbcontent .external-link{display:inline-flex;align-items:center;gap:.3em;color:var(--nb-link)}.nbcontent .external-link::after{content:"";display:inline-block;width:.75em;height:.75em;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center/contain;background-color:var(--nb-link);vertical-align:-0.125em;position:relative;top:-0.05em}.nbcontent .external-link.external-link-no-icon::after{content:none}.nbcontent .highlight{background:linear-gradient(transparent 60%, #fef08a 40%);padding:0 2px;border-radius:2px}.dark .nbcontent .highlight{background:linear-gradient(transparent 60%, #ca8a04 40%)}.nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #fecaca 40%)}.dark .nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #dc2626 40%)}.nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #bbf7d0 40%)}.dark .nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #16a34a 40%)}.nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #bfdbfe 40%)}.dark .nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #2563eb 40%)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nakobase/nakobase-md-html",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Convert Markdown to **sanitized HTML** and apply consistent styles – simple, secure, and styled.",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",