markstream-react 0.0.1

package/README.md

@@ -0,0 +1,60 @@
+# markstream-react
+
+React renderer that consumes the structured AST output from `stream-markdown-parser` and renders it with lightweight semantic HTML components. This is the React counter-part to the Vue renderer that powers `markstream-vue`.
+
+## Development
+
+```bash
+pnpm --filter markstream-react dev
+```
+
+## Build
+
+```bash
+pnpm --filter markstream-react build
+```
+
+## Usage
+
+```tsx
+import { NodeRenderer } from 'markstream-react'
+import 'markstream-react/index.css'
+
+export default function Article({ markdown }: { markdown: string }) {
+  return (
+    <NodeRenderer content={markdown} />
+  )
+}
+```
+
+You can also pass a pre-parsed `nodes` array if you already have AST data.
+
+## Custom components (e.g. `<thinking>`)
+
+Custom tag-like blocks are exposed as nodes with `type: '<tag>'` (for example `type: 'thinking'`) when you register the tag in `customHtmlTags` or register a custom component mapping for it.
+
+```tsx
+import type { NodeComponentProps } from 'markstream-react'
+import { NodeRenderer, setCustomComponents } from 'markstream-react'
+
+function ThinkingNode(props: NodeComponentProps<{ type: 'thinking', content: string }>) {
+  const { node, ctx } = props
+  return (
+    <div className="thinking-node">
+      <div className="thinking-title">Thinking</div>
+      <NodeRenderer
+        content={node.content}
+        customId={ctx?.customId}
+        isDark={ctx?.isDark}
+        typewriter={false}
+        batchRendering={false}
+        deferNodesUntilVisible={false}
+        viewportPriority={false}
+        maxLiveNodes={0}
+      />
+    </div>
+  )
+}
+
+setCustomComponents('chat', { thinking: ThinkingNode })
+```

package/dist/index.css

@@ -0,0 +1 @@
+.\!container{width:100%!important}.container{width:100%}@media(min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media(min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media(min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media(min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media(min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.markstream-vue .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.markstream-vue .pointer-events-none{pointer-events:none}.markstream-vue .visible{visibility:visible}.markstream-vue .collapse{visibility:collapse}.markstream-vue .fixed{position:fixed}.markstream-vue .absolute{position:absolute}.markstream-vue .relative{position:relative}.markstream-vue .inset-0{top:0;right:0;bottom:0;left:0}.markstream-vue .right-2{right:.5rem}.markstream-vue .top-2{top:.5rem}.markstream-vue .z-10{z-index:10}.markstream-vue .z-\[9999\]{z-index:9999}.markstream-vue .m-0{margin:0}.markstream-vue .mx-0\.5{margin-left:.125rem;margin-right:.125rem}.markstream-vue .my-2{margin-top:.5rem;margin-bottom:.5rem}.markstream-vue .my-4{margin-top:1rem;margin-bottom:1rem}.markstream-vue .my-5{margin-top:1.25rem;margin-bottom:1.25rem}.markstream-vue .my-8{margin-top:2rem;margin-bottom:2rem}.markstream-vue .mb-2{margin-bottom:.5rem}.markstream-vue .mb-4{margin-bottom:1rem}.markstream-vue .ml-4{margin-left:1rem}.markstream-vue .mt-2{margin-top:.5rem}.markstream-vue .block{display:block}.markstream-vue .inline-block{display:inline-block}.markstream-vue .inline{display:inline}.markstream-vue .flex{display:flex}.markstream-vue .inline-flex{display:inline-flex}.markstream-vue .table{display:table}.markstream-vue .contents{display:contents}.markstream-vue .list-item{display:list-item}.markstream-vue .hidden{display:none}.markstream-vue .h-3{height:.75rem}.markstream-vue .h-4{height:1rem}.markstream-vue .min-h-\[360px\]{min-height:360px}.markstream-vue .min-h-\[40px\]{min-height:40px}.markstream-vue .min-h-full{min-height:100%}.markstream-vue .w-2\/3{width:66.666667%}.markstream-vue .w-3{width:.75rem}.markstream-vue .w-4{width:1rem}.markstream-vue .w-4\/5{width:80%}.markstream-vue .w-full{width:100%}.markstream-vue .max-w-full{max-width:100%}.markstream-vue .flex-1{flex:1 1 0%}.markstream-vue .flex-shrink-0{flex-shrink:0}.markstream-vue .border-collapse{border-collapse:collapse}.markstream-vue .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.markstream-vue .cursor-grab{cursor:grab}.markstream-vue .cursor-grabbing{cursor:grabbing}.markstream-vue .cursor-not-allowed{cursor:not-allowed}.markstream-vue .cursor-pointer{cursor:pointer}.markstream-vue .list-decimal{list-style-type:decimal}.markstream-vue .list-disc{list-style-type:disc}.markstream-vue .items-center{align-items:center}.markstream-vue .items-baseline{align-items:baseline}.markstream-vue .justify-center{justify-content:center}.markstream-vue .justify-between{justify-content:space-between}.markstream-vue .gap-1\.5{gap:.375rem}.markstream-vue .gap-2{gap:.5rem}.markstream-vue :is(.space-x-1>:not([hidden])~:not([hidden])){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.markstream-vue :is(.space-x-2>:not([hidden])~:not([hidden])){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.markstream-vue .overflow-hidden{overflow:hidden}.markstream-vue .overflow-x-auto{overflow-x:auto}.markstream-vue .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.markstream-vue .whitespace-normal{white-space:normal}.markstream-vue .whitespace-nowrap{white-space:nowrap}.markstream-vue .whitespace-pre-wrap{white-space:pre-wrap}.markstream-vue .break-words{overflow-wrap:break-word}.markstream-vue .rounded{border-radius:.25rem}.markstream-vue .rounded-lg{border-radius:.5rem}.markstream-vue .rounded-md{border-radius:.375rem}.markstream-vue .border{border-width:1px}.markstream-vue .border-b{border-bottom-width:1px}.markstream-vue .border-t{border-top-width:1px}.markstream-vue .border-\[\#eaecef\]{--tw-border-opacity: 1;border-color:rgb(234 236 239 / var(--tw-border-opacity, 1))}.markstream-vue .border-\[var\(--table-border\,\#cbd5e1\)\]{border-color:var(--table-border,#cbd5e1)}.markstream-vue .border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.markstream-vue .border-gray-400\/5{border-color:#9ca3af0d}.markstream-vue .border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.markstream-vue .border-gray-700\/30{border-color:#3741514d}.markstream-vue .bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.markstream-vue .bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.markstream-vue .bg-gray-600{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.markstream-vue .bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.markstream-vue .bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.markstream-vue .bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.markstream-vue .bg-secondary{background-color:hsl(var(--secondary),214.3 21.44% 93.4%)}.markstream-vue .bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.markstream-vue .p-0\.5{padding:.125rem}.markstream-vue .p-2{padding:.5rem}.markstream-vue .p-4{padding:1rem}.markstream-vue .p-\[calc\(4\/7\*1em\)\]{padding:calc(4 / 7 * 1em)}.markstream-vue .px-1{padding-left:.25rem;padding-right:.25rem}.markstream-vue .px-1\.5{padding-left:.375rem;padding-right:.375rem}.markstream-vue .px-2\.5{padding-left:.625rem;padding-right:.625rem}.markstream-vue .px-3{padding-left:.75rem;padding-right:.75rem}.markstream-vue .px-4{padding-left:1rem;padding-right:1rem}.markstream-vue .py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.markstream-vue .py-1{padding-top:.25rem;padding-bottom:.25rem}.markstream-vue .py-2{padding-top:.5rem;padding-bottom:.5rem}.markstream-vue .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.markstream-vue .pl-1\.5{padding-left:.375rem}.markstream-vue .pl-\[calc\(13\/8\*1em\)\]{padding-left:1.625em}.markstream-vue .pt-2{padding-top:.5rem}.markstream-vue .text-left{text-align:left}.markstream-vue .text-center{text-align:center}.markstream-vue .text-right{text-align:right}.markstream-vue .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.markstream-vue .text-\[85\%\]{font-size:85%}.markstream-vue .text-base{font-size:1rem;line-height:1.5rem}.markstream-vue .text-sm{font-size:.875rem;line-height:1.25rem}.markstream-vue .text-xs{font-size:.75rem;line-height:1rem}.markstream-vue .font-medium{font-weight:500}.markstream-vue .font-semibold{font-weight:600}.markstream-vue .uppercase{text-transform:uppercase}.markstream-vue .italic{font-style:italic}.markstream-vue .leading-\[normal\]{line-height:normal}.markstream-vue .leading-relaxed{line-height:1.625}.markstream-vue .text-\[\#0366d6\]{--tw-text-opacity: 1;color:rgb(3 102 214 / var(--tw-text-opacity, 1))}.markstream-vue .text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.markstream-vue .text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.markstream-vue .text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.markstream-vue .text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.markstream-vue .text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.markstream-vue .text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.markstream-vue .text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.markstream-vue .text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.markstream-vue .underline{text-decoration-line:underline}.markstream-vue .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.markstream-vue .opacity-50{opacity:.5}.markstream-vue .shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.markstream-vue .shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.markstream-vue .outline{outline-style:solid}.markstream-vue .blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.markstream-vue .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.markstream-vue .backdrop-blur{--tw-backdrop-blur: blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.markstream-vue .backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.markstream-vue .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.markstream-vue .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.markstream-vue .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.markstream-vue .duration-100{transition-duration:.1s}.markstream-vue .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.markstream-vue .ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}:root{--border: 214.3 31.8% 91.4%;--background: 0 0% 100%;--foreground: 222.2 84% 4.9%;--secondary: 210 40% 96%;--muted: 210 40% 96%;--muted-foreground: 215.4 16.3% 46.9%}.markstream-vue{--border: 214.3 31.8% 91.4%;--background: 0 0% 100%;--foreground: 222.2 84% 4.9%;--secondary: 210 40% 96%;--muted: 210 40% 96%;--muted-foreground: 215.4 16.3% 46.9%}.markstream-vue button{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;border:0;font:inherit;color:inherit}.dark,.dark .markstream-vue,.markstream-vue.dark{--border: 217.2 32.6% 17.5%;--background: 222.2 84% 4.9%;--foreground: 210 40% 98%;--secondary: 217.2 32.6% 17.5%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 215 20.2% 65.1%}.markdown-renderer{position:relative;contain:layout;content-visibility:auto;contain-intrinsic-size:800px 600px}.markdown-renderer.virtualized{content-visibility:visible;contain-intrinsic-size:auto}.node-slot,.node-content{width:100%}.node-placeholder{width:100%;min-height:1rem;margin:.25rem 0;border-radius:.5rem;background-image:linear-gradient(90deg,#94a3b82e,#94a3b80d,#94a3b82e);background-size:200% 100%;animation:node-placeholder-shimmer 1.1s ease-in-out infinite}.node-placeholder:first-child{margin-top:0}.node-spacer{width:100%}.typewriter-node{opacity:0;animation:typewriter-fade .9s ease-out forwards}.unknown-node{color:#6a737d;font-style:italic;margin:1rem 0}.text-node{display:inline;font-weight:inherit;vertical-align:baseline;white-space:pre-wrap;word-break:break-word}.text-node.text-node-center{display:inline-flex;justify-content:center;width:100%}.paragraph-node{margin:1.25em 0;line-height:1.625}li .paragraph-node{margin:0}.blockquote-node{font-weight:500;font-style:italic;border-left:.25rem solid var(--blockquote-border-color,#e2e8f0);quotes:"“" "”" "‘" "’";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.blockquote-node .markdown-renderer{content-visibility:visible;contain:content;contain-intrinsic-size:0px 0px}.heading-node{font-weight:600}.heading-1{margin-top:0;margin-bottom:calc(8 / 9 * 1em);font-size:2.25rem;line-height:calc(10 / 9 * 1);font-weight:800}.heading-2{margin-top:2rem;margin-bottom:1rem;font-size:1.5rem;line-height:calc(4 / 3 * 1)}.heading-3{margin-top:1.6em;margin-bottom:calc(3 / 5 * 1em);font-size:1.25rem;line-height:calc(5 / 3 * 1)}.heading-4,.heading-5,.heading-6{margin-top:1.5rem;margin-bottom:.5rem;font-size:1rem}.heading-5,.heading-6{margin-top:0;margin-bottom:0}.link-node{color:var(--link-color, #0366d6);text-decoration:none}.link-node:hover{text-decoration:underline;text-underline-offset:.2rem}.link-loading .link-text-wrapper{position:relative}.link-loading .link-text{position:relative;z-index:2}.underline-anim{position:absolute;left:0;right:0;height:var(--underline-height, 2px);bottom:var(--underline-bottom, -3px);background:currentColor;transform-origin:center center;will-change:transform,opacity;opacity:var(--underline-opacity, .9);transform:scaleX(0);animation:underlineLoop var(--underline-duration, .8s) var(--underline-timing, linear) var(--underline-iteration, infinite)}@keyframes underlineLoop{0%{transform:scaleX(0);opacity:var(--underline-opacity, .9)}75%{transform:scaleX(1);opacity:var(--underline-opacity, .9)}99%{transform:scaleX(1);opacity:var(--underline-opacity, .9)}to{transform:scaleX(0);opacity:0}}.inline-code{padding:.125rem .375rem;border-radius:.375rem;background:#f3f4f6;font-size:.875rem}.image-node{margin:2rem auto;text-align:center}.image-node__inner{position:relative;display:inline-block;max-width:24rem}.image-node__img{display:inline-block;max-width:24rem;width:100%;border-radius:.75rem;height:auto;opacity:0;transition:opacity .2s ease;box-shadow:0 15px 35px #0f172a14}.image-node__img.is-loaded{opacity:1}.image-node__caption{margin-top:.5rem;font-size:.875rem;color:#6b7280;font-style:italic}.image-node__placeholder,.image-node__error{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1.5rem;border-radius:.75rem}.image-node__placeholder{background:linear-gradient(120deg,#94a3b833,#e2e8f059);color:#475569;box-shadow:inset 0 0 0 1px #94a3b833}.image-node__error{color:#dc2626;background:#f8717114}.image-node__spinner{width:1rem;height:1rem;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;animation:spin 1s linear infinite}.image-node__placeholder-text{font-size:.875rem;color:currentColor}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.footnote-node{border-left:.25rem solid #e2e8f0;padding-left:1rem;margin:1.5rem 0;font-size:.875rem;color:#475569}.admonition-node{border-left:4px solid #e5e7eb;border-radius:.5rem;padding:.75rem 1rem;margin:1.5rem 0;background:#f9fafbe6}.admonition-node__title{font-weight:600;margin-bottom:.5rem}.table-node-wrapper{position:relative;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.table-node{table-layout:auto;width:-moz-max-content;width:max-content;min-width:100%;border-collapse:collapse}.table-node th,.table-node td{white-space:nowrap}.table-node .text-node,.table-node code{white-space:nowrap;overflow-wrap:normal;word-break:normal;max-width:none}.table-node--loading tbody td{position:relative;overflow:hidden}.table-node--loading tbody td>*{visibility:hidden}.table-node--loading tbody td:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:.25rem;background:linear-gradient(90deg,#94a3b829 25%,#94a3b847,#94a3b829 75%);background-size:200% 100%;animation:table-node-shimmer 1.2s linear infinite;will-change:background-position}.table-node__loading{position:relative;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.table-node__spinner{width:2.5rem;height:2.5rem;border-radius:999px;border:2px solid rgba(94,104,121,.25);border-top-color:#5e6879cc;animation:spin 1s linear infinite;will-change:transform}.table-node .markdown-renderer{display:contents;content-visibility:visible;contain:content;contain-intrinsic-size:0px 0px}.table-node .markdown-renderer .node-slot,.table-node .markdown-renderer .node-content,.table-node .markdown-renderer .node-space{display:contents}.markdown-renderer .markdown-renderer{content-visibility:visible;contain-intrinsic-size:auto}@keyframes table-node-shimmer{0%{background-position:0% 0%}50%{background-position:100% 0%}to{background-position:200% 0%}}.hr+.table-node-wrapper{margin-top:0}.hr+.table-node-wrapper .table-node{margin-top:0}.code-block-node{background:#0f172a;color:#fff;border-radius:.75rem;padding:1rem;margin:1.25rem 0;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.code-block{border-radius:.75rem;background:#0f172a;color:#e2e8f0;margin:1.25rem 0;overflow:hidden;position:relative}.code-block--expanded{max-height:none}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:.65rem .9rem;background:#0f172ad9;border-bottom:1px solid rgba(148,163,184,.2)}.code-block-meta{display:flex;align-items:center;gap:.5rem}.code-block-language{font-size:.825rem;letter-spacing:.08em;text-transform:uppercase;color:#e2e8f0d9}.code-block-badge{font-size:.7rem;padding:.1rem .4rem;border-radius:9999px;background:#3b82f633;color:#bfdbfe}.code-block-actions{display:flex;gap:.35rem}.code-block-btn{border:1px solid rgba(148,163,184,.4);background:#0f172a99;color:#f8fafc;font-size:.75rem;padding:.25rem .65rem;border-radius:.35rem;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}.code-block-btn:hover{background:#3b82f6cc;border-color:#3b82f699}.code-block-body{position:relative;min-height:120px}.code-block-body--expanded{max-height:none}.code-block-monaco{min-height:120px}.code-block-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0f172a99;backdrop-filter:blur(2px)}.code-block-spinner{width:2rem;height:2rem;border:2px solid rgba(255,255,255,.3);border-top-color:#ffffffe6;border-radius:9999px;animation:spin 1s linear infinite}.code-block-footer{padding:.35rem .9rem .7rem;border-top:1px solid rgba(148,163,184,.2);font-size:.75rem;color:#e2e8f0cc}.mermaid-block{border:1px solid rgba(148,163,184,.3);border-radius:1rem;background:#fff;color:#0f172a;margin:1.25rem 0;overflow:hidden}.dark .mermaid-block{background:#0f172a;color:#e2e8f0;border-color:#94a3b866}.mermaid-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;background:#0009}.mermaid-modal-panel{position:relative;width:min(64rem,calc(100% - 2rem));margin:2rem auto;border-radius:.75rem;overflow:hidden;background:#fff;color:#0f172a;box-shadow:0 24px 60px #00000038}.mermaid-modal-panel.is-dark{background:#0f172a;color:#e2e8f0}.mermaid-modal-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-bottom:1px solid rgba(148,163,184,.25)}.mermaid-modal-panel.is-dark .mermaid-modal-header{border-bottom-color:#94a3b840}.mermaid-modal-title{font-size:.875rem;font-weight:600}.mermaid-modal-close{font-size:.875rem;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer;opacity:.9}.mermaid-modal-close:hover{opacity:1;background:#94a3b829}.mermaid-modal-body{padding:1rem;max-height:80vh;overflow:auto}.mermaid-modal-content{width:100%;height:100%;display:flex;justify-content:center}.fullscreen{width:100%;max-height:100%!important;height:100%!important}.mermaid-header{display:flex;align-items:center;justify-content:space-between;padding:.65rem .9rem;border-bottom:1px solid rgba(148,163,184,.3);background:#f8fafcd9}.dark .mermaid-header{background:#0f172ad9;border-color:#47556999}.mermaid-title__text{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:inherit}.mermaid-actions{display:flex;align-items:center;gap:.35rem}.mermaid-btn{border:1px solid rgba(148,163,184,.4);background:transparent;color:inherit;font-size:.75rem;padding:.2rem .65rem;border-radius:.35rem;cursor:pointer;transition:background .2s ease,color .2s ease}.mermaid-btn:hover{background:#3b82f626;color:#1d4ed8}.dark .mermaid-btn:hover{background:#3b82f64d;color:#bfdbfe}.mermaid-toggle{display:inline-flex;border-radius:9999px;border:1px solid rgba(148,163,184,.3);overflow:hidden}.mermaid-toggle-btn{border:none;background:transparent;color:inherit;font-size:.75rem;padding:.2rem .65rem;cursor:pointer;transition:background .2s ease}.mermaid-toggle-btn--active{background:#3b82f62e;color:#1d4ed8}.dark .mermaid-toggle-btn--active{background:#3b82f64d;color:#bfdbfe}.mermaid-body{position:relative;padding:1rem}.mermaid-preview{width:100%;min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center}.mermaid-preview svg{width:100%;height:auto}.mermaid-source{background:#0f172af2;color:#e2e8f0;border-radius:.5rem;padding:1rem;overflow-x:auto}.mermaid-error{padding:.85rem 1rem;color:#b91c1c;background:#f8717126;border-top:1px solid rgba(248,113,113,.25)}.mermaid-loading{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem 1rem;font-size:.85rem;color:#0f172a99}.dark .mermaid-loading{color:#e2e8f0b3}.mermaid-spinner{width:1.2rem;height:1.2rem;border:2px solid rgba(59,130,246,.4);border-top-color:#3b82f6e6;border-radius:9999px;animation:spin .9s linear infinite}.math-block-node{margin:1rem 0}.math-inline-wrapper{position:relative;display:inline-block}.math-inline{display:inline-block;vertical-align:middle}.math-inline--hidden{visibility:hidden}.math-inline__loading{display:inline-flex;align-items:center;justify-content:center;pointer-events:none}.math-inline__spinner{width:1rem;height:1rem;border-radius:9999px;border:2px solid rgba(94,104,121,.25);border-top-color:#5e6879cc;animation:spin 1s linear infinite}.math-block{position:relative;text-align:center;overflow-x:auto;min-height:40px;padding:.5rem}.math-rendering{opacity:.3;transition:opacity .2s ease}.thematic-break{margin:3rem 0;border-top:1px solid #e2e8f0}.hr-node{margin:3rem 0;border-top:1px solid var(--hr-border-color, #e2e8f0)}.hard-break{display:block}.checkbox-node{margin-right:.5rem;vertical-align:middle}.checkbox-input{margin:0;cursor:default}.html-inline-node{display:inline}.html-inline-node--loading{opacity:.85}.html-block-node__placeholder{display:flex;flex-direction:column;gap:.35rem;padding:.5rem 0}.html-block-node__placeholder-bar{display:block;height:.8rem;border-radius:9999px;background-image:linear-gradient(90deg,#94a3b859,#94a3b81a,#94a3b859);background-size:200% 100%;animation:html-block-node-shimmer 1.2s ease infinite}@keyframes html-block-node-shimmer{0%{background-position:0% 0%}to{background-position:200% 0%}}.vmr-container{border-radius:.5rem;border:1px solid rgba(148,163,184,.35);padding:1rem;margin:1rem 0;border-left-width:4px}.admonition{--admonition-bg: #f8f8f8;--admonition-border: #eaecef;--admonition-header-bg: rgba(0, 0, 0, .03);--admonition-text: #111827;--admonition-muted: #374151;--admonition-note-color: #448aff;--admonition-tip-color: #00bfa5;--admonition-warning-color: #ff9100;--admonition-danger-color: #ff5252;margin:1rem 0;padding:0;border-radius:4px;border-left:4px solid var(--admonition-border);background-color:var(--admonition-bg);color:var(--admonition-text);overflow:hidden}.admonition-header{padding:.5rem 1rem;font-weight:600;display:flex;align-items:center;background-color:var(--admonition-header-bg);color:var(--admonition-muted)}.admonition-icon{margin-right:.5rem;color:inherit}.admonition-content{padding:.5rem 1rem 1rem;color:var(--admonition-text)}.admonition-note{border-left-color:var(--admonition-note-color)}.admonition-note .admonition-header{background-color:#448aff0f;color:var(--admonition-note-color)}.admonition-info{border-left-color:var(--admonition-note-color)}.admonition-info .admonition-header{background-color:#448aff0f;color:var(--admonition-note-color)}.admonition-tip{border-left-color:var(--admonition-tip-color)}.admonition-tip .admonition-header{background-color:#00bfa50f;color:var(--admonition-tip-color)}.admonition-warning{border-left-color:var(--admonition-warning-color)}.admonition-warning .admonition-header{background-color:#ff91000f;color:var(--admonition-warning-color)}.admonition-danger{border-left-color:var(--admonition-danger-color)}.admonition-danger .admonition-header{background-color:#ff52520f;color:var(--admonition-danger-color)}.admonition-error{border-left-color:var(--admonition-danger-color)}.admonition-error .admonition-header{background-color:#ff52520f;color:var(--admonition-danger-color)}.admonition-caution{border-left-color:var(--admonition-warning-color)}.admonition-caution .admonition-header{background-color:#ff91000f;color:var(--admonition-warning-color)}.admonition-toggle{margin-left:auto;background:transparent;border:none;color:inherit;cursor:pointer;padding:.25rem .5rem;border-radius:4px;font-size:.9rem}.admonition-toggle:focus{outline:2px solid rgba(0,0,0,.08);outline-offset:2px}.admonition.is-dark{--admonition-bg: #0b1220;--admonition-border: rgba(255, 255, 255, .06);--admonition-header-bg: rgba(255, 255, 255, .03);--admonition-text: #e6eef8;--admonition-muted: #cbd5e1}.code-block-container{contain:content;content-visibility:auto;contain-intrinsic-size:320px 180px}.code-editor-container,.code-height-placeholder{min-height:120px}.code-action-btn{cursor:pointer;opacity:.7;transition:opacity .2s}.code-action-btn:hover{opacity:1}.code-action-btn:disabled{opacity:.5;cursor:not-allowed}.code-action-btn:disabled:hover{background-color:transparent}.icon-slot{display:inline-flex;align-items:center;justify-content:center}.icon-slot svg,.icon-slot img{display:block;width:100%;height:100%}.code-block-container .monaco-diff-editor .diffOverview{background-color:var(--vscode-editor-background, #111827)}.code-block-content{max-height:min(70vh,500px);overflow:auto;transition:max-height .3s ease;font-family:var(--vscode-editor-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);line-height:var(--vscode-editor-line-height, 1.5)}.code-block-render{min-height:1px}.code-fallback-plain{white-space:pre;overflow:auto;background:transparent;color:inherit;font-size:var(--vscode-editor-font-size, 12px);line-height:var(--vscode-editor-line-height, 18px);font-family:var(--vscode-editor-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-weight:var(--vscode-editor-font-weight, 400)}.code-fallback-plain>code{font-size:inherit;line-height:inherit;font-family:inherit;font-weight:inherit}.code-loading-placeholder{padding:1rem;min-height:120px}.loading-skeleton{display:flex;flex-direction:column;gap:.75rem}.skeleton-line{height:1rem;background:linear-gradient(90deg,#0000000f 25%,#0000001f 37%,#0000000f 63%);background-size:400% 100%;animation:code-skeleton-shimmer 1.2s ease-in-out infinite;border-radius:.25rem}.code-block-container.is-dark .skeleton-line{background:linear-gradient(90deg,#ffffff0f 25%,#ffffff1f 37%,#ffffff0f 63%);background-size:400% 100%}.skeleton-line.short{width:60%}@keyframes code-skeleton-shimmer{0%{background-position:100% 0}to{background-position:0 0}}.markstream-vue pre[class^=language-],.markstream-vue pre[class*=" language-"]{white-space:pre;overflow:auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;font-variant-ligatures:none;contain:content;backface-visibility:hidden;transform:translateZ(0);-webkit-font-smoothing:antialiased}.markstream-vue pre[class^=language-]>code,.markstream-vue pre[class*=" language-"]>code{display:block}.markstream-vue pre[class^=language-]:focus,.markstream-vue pre[class*=" language-"]:focus{outline:2px solid var(--vmdr-focus, #3b82f6);outline-offset:2px}.html-preview-frame__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.html-preview-frame__backdrop--dark{background-color:#0f172acc}.html-preview-frame{width:80vw;max-width:960px;height:70vh;background-color:#fff;border-radius:.5rem;overflow:hidden;box-shadow:0 10px 40px #00000040;display:flex;flex-direction:column}.html-preview-frame--dark{background-color:#020617;color:#e5e7eb;box-shadow:0 10px 40px #0009}.html-preview-frame__header{display:flex;justify-content:space-between;align-items:center;padding:.4rem .75rem;border-bottom:1px solid rgba(0,0,0,.06)}.html-preview-frame--dark .html-preview-frame__header{border-bottom-color:#94a3b859}.html-preview-frame__title{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase;opacity:.85}.html-preview-frame__dot{width:.5rem;height:.5rem;border-radius:999px;background-color:#22c55e}.html-preview-frame--dark .html-preview-frame__dot{background-color:#4ade80}.html-preview-frame__label{white-space:nowrap}.html-preview-frame__close{border:none;background:transparent;font-size:1.25rem;line-height:1;cursor:pointer}.html-preview-frame__close--dark{color:#e5e7eb}.html-preview-frame__iframe{width:100%;height:100%;border:none;display:block}@media(max-width:640px){.html-preview-frame{width:100vw;height:80vh;border-radius:0}}.ms-tooltip{position:fixed;padding:.4rem .65rem;font-size:.875rem;border-radius:.375rem;border-width:1px;border-style:solid;box-shadow:0 10px 15px #00000014;pointer-events:none;z-index:9999;opacity:0;transition:opacity .12s linear,transform .22s cubic-bezier(.16,1,.3,1)}.ms-tooltip[data-visible=true]{opacity:1}.ms-tooltip[data-dark=true]{background-color:#111827;color:#f9fafb;border-color:#374151}.ms-tooltip[data-dark=false],.ms-tooltip:not([data-dark=true]){background-color:#fff;color:#111827;border-color:#e5e7eb}@keyframes node-placeholder-shimmer{0%{background-position:200% 0%}to{background-position:-200% 0%}}@keyframes typewriter-fade{0%{opacity:0}to{opacity:1}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes spin{to{transform:rotate(360deg)}}.markstream-vue .hover\:bg-\[var\(--vscode-editor-selectionBackground\)\]:hover{background-color:var(--vscode-editor-selectionBackground)}.markstream-vue .hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.markstream-vue .hover\:bg-gray-700:hover{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.markstream-vue .hover\:bg-secondary:hover{background-color:hsl(var(--secondary),214.3 21.44% 93.4%)}.markstream-vue .hover\:text-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.markstream-vue .hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.markstream-vue .hover\:underline:hover{text-decoration-line:underline}@media not all and (min-width:1024px){.markstream-vue .max-lg\:my-\[calc\(4\/3\*1em\)\]{margin-top:calc(4 / 3 * 1em);margin-bottom:calc(4 / 3 * 1em)}.markstream-vue .max-lg\:pl-\[calc\(14\/9\*1em\)\]{padding-left:calc(14 / 9 * 1em)}}