markstream-react 0.0.24 → 0.0.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +116 -103
- package/dist/index.js +96 -98
- package/dist/index.px.css +1 -1
- package/dist/index.tailwind.css +1 -1
- package/dist/tailwind.ts +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -33,6 +33,57 @@ If your app scales root font size on mobile (`html` / `body`), use `markstream-r
|
|
|
33
33
|
|
|
34
34
|
You can also pass a pre-parsed `nodes` array if you already have AST data.
|
|
35
35
|
|
|
36
|
+
## Streaming best practices
|
|
37
|
+
|
|
38
|
+
- For high-frequency SSE / token streaming, prefer parsing outside the component and pass `nodes` instead of reparsing the full `content` string every chunk.
|
|
39
|
+
- Keep `viewportPriority` enabled unless you explicitly want eager rendering. Mermaid / Monaco / D2 blocks now stay idle while offscreen and resume when they approach the viewport.
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import NodeRenderer from 'markstream-react'
|
|
43
|
+
|
|
44
|
+
export default function StreamView({ nodes, final }: { nodes: any[], final: boolean }) {
|
|
45
|
+
return (
|
|
46
|
+
<NodeRenderer
|
|
47
|
+
nodes={nodes}
|
|
48
|
+
final={final}
|
|
49
|
+
viewportPriority
|
|
50
|
+
deferNodesUntilVisible
|
|
51
|
+
/>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Heavy-node prop forwarding
|
|
57
|
+
|
|
58
|
+
`NodeRenderer` can forward renderer-level props directly into Mermaid / D2 / Infographic blocks:
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
<NodeRenderer
|
|
62
|
+
content={markdown}
|
|
63
|
+
mermaidProps={{
|
|
64
|
+
showHeader: false,
|
|
65
|
+
renderDebounceMs: 180,
|
|
66
|
+
previewPollDelayMs: 500,
|
|
67
|
+
}}
|
|
68
|
+
d2Props={{ progressiveIntervalMs: 500 }}
|
|
69
|
+
infographicProps={{ showHeader: false }}
|
|
70
|
+
/>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Notes:
|
|
74
|
+
- These props are forwarded to the built-in Mermaid / D2 / Infographic blocks and to custom `mermaid` / `d2` / `infographic` overrides registered with `setCustomComponents(...)`.
|
|
75
|
+
- `viewportPriority` applies to those heavy nodes too, so offscreen graphs will not keep doing background work while the text stream is still updating.
|
|
76
|
+
|
|
77
|
+
## Mermaid tuning
|
|
78
|
+
|
|
79
|
+
Common `mermaidProps` keys for streaming scenarios:
|
|
80
|
+
|
|
81
|
+
- `renderDebounceMs`: delay progressive work during rapid token bursts.
|
|
82
|
+
- `contentStableDelayMs`: how long source mode waits before auto-switching back to preview when content stabilizes.
|
|
83
|
+
- `previewPollDelayMs`: initial delay before preview polling tries to upgrade a partial preview into a full render.
|
|
84
|
+
- `previewPollMaxDelayMs`: cap for preview polling backoff.
|
|
85
|
+
- `previewPollMaxAttempts`: maximum retry count while the Mermaid source is still incomplete.
|
|
86
|
+
|
|
36
87
|
## Bundle size notes
|
|
37
88
|
|
|
38
89
|
- Optional peers are not bundled; install only what you use (`stream-monaco`, `stream-markdown`, `mermaid`, `katex`, etc.).
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(.markstream-react) button{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:0;font:inherit;color:inherit}.markstream-react .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-react .pointer-events-none{pointer-events:none}.markstream-react .visible{visibility:visible}.markstream-react .collapse{visibility:collapse}.markstream-react .fixed{position:fixed}.markstream-react .absolute{position:absolute}.markstream-react .relative{position:relative}.markstream-react .inset-0{top:0;right:0;bottom:0;left:0}.markstream-react .right-2{right:.5rem}.markstream-react .right-6{right:1.5rem}.markstream-react .top-2{top:.5rem}.markstream-react .top-6{top:1.5rem}.markstream-react .z-10{z-index:10}.markstream-react .z-50{z-index:50}.markstream-react .z-\[9999\]{z-index:9999}.markstream-react .m-0{margin:0}.markstream-react .mx-0\.5{margin-left:.125rem;margin-right:.125rem}.markstream-react .my-2{margin-top:.5rem;margin-bottom:.5rem}.markstream-react .my-4{margin-top:1rem;margin-bottom:1rem}.markstream-react .my-5{margin-top:1.25rem;margin-bottom:1.25rem}.markstream-react .my-8{margin-top:2rem;margin-bottom:2rem}.markstream-react .mb-2{margin-bottom:.5rem}.markstream-react .mb-4{margin-bottom:1rem}.markstream-react .ml-4{margin-left:1rem}.markstream-react .mt-2{margin-top:.5rem}.markstream-react .block{display:block}.markstream-react .inline-block{display:inline-block}.markstream-react .inline{display:inline}.markstream-react .flex{display:flex}.markstream-react .inline-flex{display:inline-flex}.markstream-react .table{display:table}.markstream-react .contents{display:contents}.markstream-react .list-item{display:list-item}.markstream-react .hidden{display:none}.markstream-react .h-3{height:.75rem}.markstream-react .h-4{height:1rem}.markstream-react .h-full{height:100%}.markstream-react .max-h-full{max-height:100%}.markstream-react .min-h-\[360px\]{min-height:360px}.markstream-react .min-h-\[40px\]{min-height:40px}.markstream-react .min-h-full{min-height:100%}.markstream-react .w-2\/3{width:66.666667%}.markstream-react .w-3{width:.75rem}.markstream-react .w-4{width:1rem}.markstream-react .w-4\/5{width:80%}.markstream-react .w-full{width:100%}.markstream-react .max-w-full{max-width:100%}.markstream-react .flex-1{flex:1 1 0%}.markstream-react .flex-shrink-0{flex-shrink:0}.markstream-react .border-collapse{border-collapse:collapse}.markstream-react .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-react .cursor-grab{cursor:grab}.markstream-react .cursor-grabbing{cursor:grabbing}.markstream-react .cursor-not-allowed{cursor:not-allowed}.markstream-react .cursor-pointer{cursor:pointer}.markstream-react .list-decimal{list-style-type:decimal}.markstream-react .list-disc{list-style-type:disc}.markstream-react .items-center{align-items:center}.markstream-react .items-baseline{align-items:baseline}.markstream-react .justify-center{justify-content:center}.markstream-react .justify-between{justify-content:space-between}.markstream-react .gap-1\.5{gap:.375rem}.markstream-react .gap-2{gap:.5rem}.markstream-react .gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.markstream-react .gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.markstream-react :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-react :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-react .overflow-hidden{overflow:hidden}.markstream-react .overflow-x-auto{overflow-x:auto}.markstream-react .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.markstream-react .whitespace-normal{white-space:normal}.markstream-react .whitespace-nowrap{white-space:nowrap}.markstream-react .whitespace-pre-wrap{white-space:pre-wrap}.markstream-react .break-words{overflow-wrap:break-word}.markstream-react .rounded{border-radius:.25rem}.markstream-react .rounded-lg{border-radius:.5rem}.markstream-react .rounded-md{border-radius:.375rem}.markstream-react .border{border-width:1px}.markstream-react .border-b{border-bottom-width:1px}.markstream-react .border-t{border-top-width:1px}.markstream-react .border-\[\#eaecef\]{--tw-border-opacity: 1;border-color:rgb(234 236 239 / var(--tw-border-opacity, 1))}.markstream-react .border-\[var\(--table-border\,\#cbd5e1\)\]{border-color:var(--table-border,#cbd5e1)}.markstream-react .border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.markstream-react .border-gray-400\/5{border-color:#9ca3af0d}.markstream-react .border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.markstream-react .border-gray-700\/30{border-color:#3741514d}.markstream-react .bg-\[hsl\(var\(--muted\)\)\]{background-color:hsl(var(--muted))}.markstream-react .bg-\[hsl\(var\(--secondary\)\)\]{background-color:hsl(var(--secondary))}.markstream-react .bg-black\/70{background-color:#000000b3}.markstream-react .bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-600{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.markstream-react .bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.markstream-react .p-0\.5{padding:.125rem}.markstream-react .p-2{padding:.5rem}.markstream-react .p-4{padding:1rem}.markstream-react .p-\[calc\(4\/7\*1em\)\]{padding:calc(4 / 7 * 1em)}.markstream-react .px-1{padding-left:.25rem;padding-right:.25rem}.markstream-react .px-1\.5{padding-left:.375rem;padding-right:.375rem}.markstream-react .px-2{padding-left:.5rem;padding-right:.5rem}.markstream-react .px-2\.5{padding-left:.625rem;padding-right:.625rem}.markstream-react .px-3{padding-left:.75rem;padding-right:.75rem}.markstream-react .px-4{padding-left:1rem;padding-right:1rem}.markstream-react .py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.markstream-react .py-1{padding-top:.25rem;padding-bottom:.25rem}.markstream-react .py-2{padding-top:.5rem;padding-bottom:.5rem}.markstream-react .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.markstream-react .py-4{padding-top:1rem;padding-bottom:1rem}.markstream-react .pb-3{padding-bottom:.75rem}.markstream-react .pl-1\.5{padding-left:.375rem}.markstream-react .pl-\[calc\(13\/8\*1em\)\]{padding-left:1.625em}.markstream-react .pt-2{padding-top:.5rem}.markstream-react .text-left{text-align:left}.markstream-react .text-center{text-align:center}.markstream-react .text-right{text-align:right}.markstream-react .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.markstream-react .text-\[85\%\]{font-size:85%}.markstream-react .text-base{font-size:1rem;line-height:1.5rem}.markstream-react .text-sm{font-size:.875rem;line-height:1.25rem}.markstream-react .text-xs{font-size:.75rem;line-height:1rem}.markstream-react .font-medium{font-weight:500}.markstream-react .font-semibold{font-weight:600}.markstream-react .uppercase{text-transform:uppercase}.markstream-react .italic{font-style:italic}.markstream-react .leading-\[normal\]{line-height:normal}.markstream-react .leading-relaxed{line-height:1.625}.markstream-react .text-\[\#0366d6\]{--tw-text-opacity: 1;color:rgb(3 102 214 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.markstream-react .text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.markstream-react .text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.markstream-react .underline{text-decoration-line:underline}.markstream-react .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.markstream-react .opacity-50{opacity:.5}.markstream-react .shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-react .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-react .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-react .outline{outline-style:solid}.markstream-react .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-react .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-react .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-react .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-react .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-react .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.markstream-react .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-react .duration-100{transition-duration:.1s}.markstream-react .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.markstream-react .ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.markstream-react{--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%}.dark .markstream-react,.markstream-react.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-x:contain;overscroll-behavior-y:auto;scrollbar-gutter:stable}.table-node{table-layout:fixed;width:100%;border-collapse:collapse}.table-node th,.table-node td{white-space:normal;overflow-wrap:break-word;word-break:normal}.table-node .text-node,.table-node code{white-space:inherit;overflow-wrap:inherit;word-break:inherit;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:absolute;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-body--collapsed{min-height:0;height:0;overflow:hidden}.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-react pre[class^=language-],.markstream-react 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-react pre[class^=language-]>code,.markstream-react pre[class*=" language-"]>code{display:block}.markstream-react pre[class^=language-]:focus,.markstream-react 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}}.markstream-react .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)}}.d2-block-body{position:relative}.d2-source{font-family:var(--vscode-editor-font-family, "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)}.d2-code{white-space:pre;font-size:.875rem;line-height:1.5}.d2-render{overflow:auto}.d2-svg svg{max-width:100%;height:auto;display:block}.mode-btn{opacity:.7;transition:opacity .2s}.mode-btn.is-active{opacity:1;font-weight:600}.d2-action-btn{opacity:.7;transition:opacity .2s}.d2-action-btn:hover{opacity:1}.d2-action-btn:disabled{opacity:.3;cursor:not-allowed}.d2-error{color:#dc2626}.markstream-react .hover\:bg-\[hsl\(var\(--secondary\)\)\]:hover{background-color:hsl(var(--secondary))}.markstream-react .hover\:bg-\[var\(--vscode-editor-selectionBackground\)\]:hover{background-color:var(--vscode-editor-selectionBackground)}.markstream-react .hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.markstream-react .hover\:bg-gray-700:hover{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.markstream-react .hover\:text-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.markstream-react .hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.markstream-react .hover\:underline:hover{text-decoration-line:underline}@media not all and (min-width:1024px){.markstream-react .max-lg\:my-\[calc\(4\/3\*1em\)\]{margin-top:calc(4 / 3 * 1em);margin-bottom:calc(4 / 3 * 1em)}.markstream-react .max-lg\:pl-\[calc\(14\/9\*1em\)\]{padding-left:calc(14 / 9 * 1em)}}
|
|
1
|
+
:where(.markstream-react) button{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:0;font:inherit;color:inherit}.markstream-react .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-react .pointer-events-none{pointer-events:none}.markstream-react .visible{visibility:visible}.markstream-react .collapse{visibility:collapse}.markstream-react .fixed{position:fixed}.markstream-react .absolute{position:absolute}.markstream-react .relative{position:relative}.markstream-react .inset-0{top:0;right:0;bottom:0;left:0}.markstream-react .right-2{right:.5rem}.markstream-react .right-6{right:1.5rem}.markstream-react .top-2{top:.5rem}.markstream-react .top-6{top:1.5rem}.markstream-react .z-10{z-index:10}.markstream-react .z-50{z-index:50}.markstream-react .z-\[9999\]{z-index:9999}.markstream-react .m-0{margin:0}.markstream-react .mx-0\.5{margin-left:.125rem;margin-right:.125rem}.markstream-react .my-2{margin-top:.5rem;margin-bottom:.5rem}.markstream-react .my-4{margin-top:1rem;margin-bottom:1rem}.markstream-react .my-5{margin-top:1.25rem;margin-bottom:1.25rem}.markstream-react .my-8{margin-top:2rem;margin-bottom:2rem}.markstream-react .mb-2{margin-bottom:.5rem}.markstream-react .mb-4{margin-bottom:1rem}.markstream-react .ml-4{margin-left:1rem}.markstream-react .mt-2{margin-top:.5rem}.markstream-react .block{display:block}.markstream-react .inline-block{display:inline-block}.markstream-react .inline{display:inline}.markstream-react .flex{display:flex}.markstream-react .inline-flex{display:inline-flex}.markstream-react .table{display:table}.markstream-react .contents{display:contents}.markstream-react .list-item{display:list-item}.markstream-react .hidden{display:none}.markstream-react .h-3{height:.75rem}.markstream-react .h-4{height:1rem}.markstream-react .h-full{height:100%}.markstream-react .max-h-full{max-height:100%}.markstream-react .min-h-\[360px\]{min-height:360px}.markstream-react .min-h-\[40px\]{min-height:40px}.markstream-react .min-h-full{min-height:100%}.markstream-react .w-2\/3{width:66.666667%}.markstream-react .w-3{width:.75rem}.markstream-react .w-4{width:1rem}.markstream-react .w-4\/5{width:80%}.markstream-react .w-full{width:100%}.markstream-react .max-w-full{max-width:100%}.markstream-react .flex-1{flex:1 1 0%}.markstream-react .flex-shrink-0{flex-shrink:0}.markstream-react .border-collapse{border-collapse:collapse}.markstream-react .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-react .cursor-grab{cursor:grab}.markstream-react .cursor-grabbing{cursor:grabbing}.markstream-react .cursor-not-allowed{cursor:not-allowed}.markstream-react .cursor-pointer{cursor:pointer}.markstream-react .list-decimal{list-style-type:decimal}.markstream-react .list-disc{list-style-type:disc}.markstream-react .items-center{align-items:center}.markstream-react .items-baseline{align-items:baseline}.markstream-react .justify-center{justify-content:center}.markstream-react .justify-between{justify-content:space-between}.markstream-react .gap-1\.5{gap:.375rem}.markstream-react .gap-2{gap:.5rem}.markstream-react .gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.markstream-react .gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.markstream-react :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-react :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-react .overflow-hidden{overflow:hidden}.markstream-react .overflow-x-auto{overflow-x:auto}.markstream-react .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.markstream-react .whitespace-normal{white-space:normal}.markstream-react .whitespace-nowrap{white-space:nowrap}.markstream-react .whitespace-pre-wrap{white-space:pre-wrap}.markstream-react .break-words{overflow-wrap:break-word}.markstream-react .rounded{border-radius:.25rem}.markstream-react .rounded-lg{border-radius:.5rem}.markstream-react .rounded-md{border-radius:.375rem}.markstream-react .border{border-width:1px}.markstream-react .border-b{border-bottom-width:1px}.markstream-react .border-t{border-top-width:1px}.markstream-react .border-\[\#eaecef\]{--tw-border-opacity: 1;border-color:rgb(234 236 239 / var(--tw-border-opacity, 1))}.markstream-react .border-\[var\(--table-border\,\#cbd5e1\)\]{border-color:var(--table-border,#cbd5e1)}.markstream-react .border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.markstream-react .border-gray-400\/5{border-color:#9ca3af0d}.markstream-react .border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.markstream-react .border-gray-700\/30{border-color:#3741514d}.markstream-react .bg-\[hsl\(var\(--muted\)\)\]{background-color:hsl(var(--muted))}.markstream-react .bg-\[hsl\(var\(--secondary\)\)\]{background-color:hsl(var(--secondary))}.markstream-react .bg-black\/70{background-color:#000000b3}.markstream-react .bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-600{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.markstream-react .bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.markstream-react .bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.markstream-react .p-0\.5{padding:.125rem}.markstream-react .p-2{padding:.5rem}.markstream-react .p-4{padding:1rem}.markstream-react .p-\[calc\(4\/7\*1em\)\]{padding:calc(4 / 7 * 1em)}.markstream-react .px-1{padding-left:.25rem;padding-right:.25rem}.markstream-react .px-1\.5{padding-left:.375rem;padding-right:.375rem}.markstream-react .px-2{padding-left:.5rem;padding-right:.5rem}.markstream-react .px-2\.5{padding-left:.625rem;padding-right:.625rem}.markstream-react .px-3{padding-left:.75rem;padding-right:.75rem}.markstream-react .px-4{padding-left:1rem;padding-right:1rem}.markstream-react .py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.markstream-react .py-1{padding-top:.25rem;padding-bottom:.25rem}.markstream-react .py-2{padding-top:.5rem;padding-bottom:.5rem}.markstream-react .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.markstream-react .py-4{padding-top:1rem;padding-bottom:1rem}.markstream-react .pb-3{padding-bottom:.75rem}.markstream-react .pl-1\.5{padding-left:.375rem}.markstream-react .pl-\[calc\(13\/8\*1em\)\]{padding-left:1.625em}.markstream-react .pt-2{padding-top:.5rem}.markstream-react .text-left{text-align:left}.markstream-react .text-center{text-align:center}.markstream-react .text-right{text-align:right}.markstream-react .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.markstream-react .text-\[85\%\]{font-size:85%}.markstream-react .text-base{font-size:1rem;line-height:1.5rem}.markstream-react .text-sm{font-size:.875rem;line-height:1.25rem}.markstream-react .text-xs{font-size:.75rem;line-height:1rem}.markstream-react .font-medium{font-weight:500}.markstream-react .font-semibold{font-weight:600}.markstream-react .uppercase{text-transform:uppercase}.markstream-react .italic{font-style:italic}.markstream-react .leading-\[normal\]{line-height:normal}.markstream-react .leading-relaxed{line-height:1.625}.markstream-react .text-\[\#0366d6\]{--tw-text-opacity: 1;color:rgb(3 102 214 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.markstream-react .text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.markstream-react .text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.markstream-react .text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.markstream-react .underline{text-decoration-line:underline}.markstream-react .antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.markstream-react .opacity-50{opacity:.5}.markstream-react .shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-react .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-react .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-react .outline{outline-style:solid}.markstream-react .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-react .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-react .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-react .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-react .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-react .transition-\[height\]{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.markstream-react .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.markstream-react .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-react .duration-100{transition-duration:.1s}.markstream-react .duration-150{transition-duration:.15s}.markstream-react .ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.markstream-react .ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.markstream-react{--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%}.dark .markstream-react,.markstream-react.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-x:contain;overscroll-behavior-y:auto;scrollbar-gutter:stable}.table-node{table-layout:fixed;width:100%;border-collapse:collapse}.table-node th,.table-node td{white-space:normal;overflow-wrap:break-word;word-break:normal}.table-node .text-node,.table-node code{white-space:inherit;overflow-wrap:inherit;word-break:inherit;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:absolute;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-body--collapsed{min-height:0;height:0;overflow:hidden}.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-react pre[class^=language-],.markstream-react 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-react pre[class^=language-]>code,.markstream-react pre[class*=" language-"]>code{display:block}.markstream-react pre[class^=language-]:focus,.markstream-react 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}}.markstream-react .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)}}.d2-block-body{position:relative}.d2-source{font-family:var(--vscode-editor-font-family, "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)}.d2-code{white-space:pre;font-size:.875rem;line-height:1.5}.d2-render{overflow:auto}.d2-svg svg{max-width:100%;height:auto;display:block}.mode-btn{opacity:.7;transition:opacity .2s}.mode-btn.is-active{opacity:1;font-weight:600}.d2-action-btn{opacity:.7;transition:opacity .2s}.d2-action-btn:hover{opacity:1}.d2-action-btn:disabled{opacity:.3;cursor:not-allowed}.d2-error{color:#dc2626}body>div[id^=dmermaid-]{position:fixed;top:0;left:0;width:0;height:0;overflow:hidden;pointer-events:none}.markstream-react .hover\:bg-\[hsl\(var\(--secondary\)\)\]:hover{background-color:hsl(var(--secondary))}.markstream-react .hover\:bg-\[var\(--vscode-editor-selectionBackground\)\]:hover{background-color:var(--vscode-editor-selectionBackground)}.markstream-react .hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.markstream-react .hover\:bg-gray-700:hover{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.markstream-react .hover\:text-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.markstream-react .hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.markstream-react .hover\:underline:hover{text-decoration-line:underline}@media not all and (min-width:1024px){.markstream-react .max-lg\:my-\[calc\(4\/3\*1em\)\]{margin-top:calc(4 / 3 * 1em);margin-bottom:calc(4 / 3 * 1em)}.markstream-react .max-lg\:pl-\[calc\(14\/9\*1em\)\]{padding-left:calc(14 / 9 * 1em)}}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,109 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { BaseNode, ParseOptions, MarkdownIt, ParsedNode
|
|
2
|
+
import { CodeBlockNode as CodeBlockNode$1, BaseNode, ParseOptions, MarkdownIt, ParsedNode } from 'stream-markdown-parser';
|
|
3
3
|
import React, { ComponentType } from 'react';
|
|
4
4
|
|
|
5
|
-
interface NodeRendererProps {
|
|
6
|
-
content?: string;
|
|
7
|
-
nodes?: BaseNode[];
|
|
8
|
-
/**
|
|
9
|
-
* Whether the input stream is complete (end-of-stream). When true, the parser
|
|
10
|
-
* can stop emitting streaming "loading" nodes for unfinished constructs.
|
|
11
|
-
*/
|
|
12
|
-
final?: boolean;
|
|
13
|
-
parseOptions?: ParseOptions;
|
|
14
|
-
customMarkdownIt?: (md: MarkdownIt) => MarkdownIt;
|
|
15
|
-
/** Log parse/render timing stats (dev only). */
|
|
16
|
-
debugPerformance?: boolean;
|
|
17
|
-
/**
|
|
18
|
-
* Custom HTML-like tags that should be emitted as custom nodes (e.g. ['thinking']).
|
|
19
|
-
* Forwarded to `getMarkdown()` and merged into parseOptions.
|
|
20
|
-
*/
|
|
21
|
-
customHtmlTags?: readonly string[];
|
|
22
|
-
viewportPriority?: boolean;
|
|
23
|
-
codeBlockStream?: boolean;
|
|
24
|
-
codeBlockDarkTheme?: any;
|
|
25
|
-
codeBlockLightTheme?: any;
|
|
26
|
-
codeBlockMonacoOptions?: Record<string, any>;
|
|
27
|
-
renderCodeBlocksAsPre?: boolean;
|
|
28
|
-
codeBlockMinWidth?: string | number;
|
|
29
|
-
codeBlockMaxWidth?: string | number;
|
|
30
|
-
codeBlockProps?: Record<string, any>;
|
|
31
|
-
showTooltips?: boolean;
|
|
32
|
-
themes?: string[];
|
|
33
|
-
isDark?: boolean;
|
|
34
|
-
customId?: string;
|
|
35
|
-
indexKey?: number | string;
|
|
36
|
-
typewriter?: boolean;
|
|
37
|
-
batchRendering?: boolean;
|
|
38
|
-
initialRenderBatchSize?: number;
|
|
39
|
-
renderBatchSize?: number;
|
|
40
|
-
renderBatchDelay?: number;
|
|
41
|
-
renderBatchBudgetMs?: number;
|
|
42
|
-
renderBatchIdleTimeoutMs?: number;
|
|
43
|
-
deferNodesUntilVisible?: boolean;
|
|
44
|
-
maxLiveNodes?: number;
|
|
45
|
-
liveNodeBuffer?: number;
|
|
46
|
-
onCopy?: (code: string) => void;
|
|
47
|
-
onHandleArtifactClick?: (payload: any) => void;
|
|
48
|
-
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
49
|
-
onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
50
|
-
onMouseOut?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
51
|
-
}
|
|
52
|
-
interface RenderContext {
|
|
53
|
-
customId?: string;
|
|
54
|
-
isDark?: boolean;
|
|
55
|
-
indexKey?: string;
|
|
56
|
-
typewriter?: boolean;
|
|
57
|
-
customComponents?: Record<string, React.ComponentType<any>>;
|
|
58
|
-
codeBlockProps?: Record<string, any>;
|
|
59
|
-
showTooltips?: boolean;
|
|
60
|
-
codeBlockStream?: boolean;
|
|
61
|
-
renderCodeBlocksAsPre?: boolean;
|
|
62
|
-
codeBlockThemes?: {
|
|
63
|
-
themes?: string[];
|
|
64
|
-
darkTheme?: any;
|
|
65
|
-
lightTheme?: any;
|
|
66
|
-
monacoOptions?: Record<string, any>;
|
|
67
|
-
minWidth?: string | number;
|
|
68
|
-
maxWidth?: string | number;
|
|
69
|
-
};
|
|
70
|
-
events: {
|
|
71
|
-
onCopy?: (code: string) => void;
|
|
72
|
-
onHandleArtifactClick?: (payload: any) => void;
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
type RenderNodeFn = (node: ParsedNode, key: React.Key, ctx: RenderContext) => React.ReactNode;
|
|
76
|
-
|
|
77
|
-
interface NodeComponentProps<TNode = unknown> {
|
|
78
|
-
node: TNode;
|
|
79
|
-
ctx?: RenderContext;
|
|
80
|
-
renderNode?: RenderNodeFn;
|
|
81
|
-
indexKey?: React.Key;
|
|
82
|
-
customId?: string;
|
|
83
|
-
isDark?: boolean;
|
|
84
|
-
typewriter?: boolean;
|
|
85
|
-
children?: React.ReactNode;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
declare function AdmonitionNode(props: NodeComponentProps<{
|
|
89
|
-
type: 'admonition';
|
|
90
|
-
kind?: string;
|
|
91
|
-
title?: string;
|
|
92
|
-
children?: ParsedNode[];
|
|
93
|
-
collapsible?: boolean;
|
|
94
|
-
open?: boolean;
|
|
95
|
-
}>): react_jsx_runtime.JSX.Element;
|
|
96
|
-
|
|
97
|
-
declare function BlockquoteNode(props: NodeComponentProps<{
|
|
98
|
-
type: 'blockquote';
|
|
99
|
-
children?: ParsedNode[];
|
|
100
|
-
}>): react_jsx_runtime.JSX.Element;
|
|
101
|
-
|
|
102
|
-
declare function CheckboxNode(props: NodeComponentProps<{
|
|
103
|
-
type: 'checkbox' | 'checkbox_input';
|
|
104
|
-
checked?: boolean;
|
|
105
|
-
}>): react_jsx_runtime.JSX.Element;
|
|
106
|
-
|
|
107
5
|
interface CodeBlockNodeProps {
|
|
108
6
|
node: CodeBlockNode$1;
|
|
109
7
|
isDark?: boolean;
|
|
@@ -123,6 +21,7 @@ interface CodeBlockNodeProps {
|
|
|
123
21
|
showCopyButton?: boolean;
|
|
124
22
|
showExpandButton?: boolean;
|
|
125
23
|
showPreviewButton?: boolean;
|
|
24
|
+
showCollapseButton?: boolean;
|
|
126
25
|
showFontSizeButtons?: boolean;
|
|
127
26
|
showTooltips?: boolean;
|
|
128
27
|
customId?: string;
|
|
@@ -178,6 +77,11 @@ interface MermaidBlockNodeProps {
|
|
|
178
77
|
parseTimeoutMs?: number;
|
|
179
78
|
renderTimeoutMs?: number;
|
|
180
79
|
fullRenderTimeoutMs?: number;
|
|
80
|
+
renderDebounceMs?: number;
|
|
81
|
+
contentStableDelayMs?: number;
|
|
82
|
+
previewPollDelayMs?: number;
|
|
83
|
+
previewPollMaxDelayMs?: number;
|
|
84
|
+
previewPollMaxAttempts?: number;
|
|
181
85
|
showHeader?: boolean;
|
|
182
86
|
showModeToggle?: boolean;
|
|
183
87
|
showCopyButton?: boolean;
|
|
@@ -241,6 +145,114 @@ interface InfographicBlockNodeProps {
|
|
|
241
145
|
showZoomControls?: boolean;
|
|
242
146
|
}
|
|
243
147
|
|
|
148
|
+
interface NodeRendererProps {
|
|
149
|
+
content?: string;
|
|
150
|
+
nodes?: BaseNode[];
|
|
151
|
+
/**
|
|
152
|
+
* Whether the input stream is complete (end-of-stream). When true, the parser
|
|
153
|
+
* can stop emitting streaming "loading" nodes for unfinished constructs.
|
|
154
|
+
*/
|
|
155
|
+
final?: boolean;
|
|
156
|
+
parseOptions?: ParseOptions;
|
|
157
|
+
customMarkdownIt?: (md: MarkdownIt) => MarkdownIt;
|
|
158
|
+
/** Log parse/render timing stats (dev only). */
|
|
159
|
+
debugPerformance?: boolean;
|
|
160
|
+
/**
|
|
161
|
+
* Custom HTML-like tags that should be emitted as custom nodes (e.g. ['thinking']).
|
|
162
|
+
* Forwarded to `getMarkdown()` and merged into parseOptions.
|
|
163
|
+
*/
|
|
164
|
+
customHtmlTags?: readonly string[];
|
|
165
|
+
viewportPriority?: boolean;
|
|
166
|
+
codeBlockStream?: boolean;
|
|
167
|
+
codeBlockDarkTheme?: any;
|
|
168
|
+
codeBlockLightTheme?: any;
|
|
169
|
+
codeBlockMonacoOptions?: Record<string, any>;
|
|
170
|
+
renderCodeBlocksAsPre?: boolean;
|
|
171
|
+
codeBlockMinWidth?: string | number;
|
|
172
|
+
codeBlockMaxWidth?: string | number;
|
|
173
|
+
codeBlockProps?: Record<string, any>;
|
|
174
|
+
mermaidProps?: Partial<Omit<MermaidBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
|
|
175
|
+
d2Props?: Partial<Omit<D2BlockNodeProps, 'node' | 'loading' | 'isDark'>>;
|
|
176
|
+
infographicProps?: Partial<Omit<InfographicBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
|
|
177
|
+
showTooltips?: boolean;
|
|
178
|
+
themes?: string[];
|
|
179
|
+
isDark?: boolean;
|
|
180
|
+
customId?: string;
|
|
181
|
+
indexKey?: number | string;
|
|
182
|
+
typewriter?: boolean;
|
|
183
|
+
batchRendering?: boolean;
|
|
184
|
+
initialRenderBatchSize?: number;
|
|
185
|
+
renderBatchSize?: number;
|
|
186
|
+
renderBatchDelay?: number;
|
|
187
|
+
renderBatchBudgetMs?: number;
|
|
188
|
+
renderBatchIdleTimeoutMs?: number;
|
|
189
|
+
deferNodesUntilVisible?: boolean;
|
|
190
|
+
maxLiveNodes?: number;
|
|
191
|
+
liveNodeBuffer?: number;
|
|
192
|
+
onCopy?: (code: string) => void;
|
|
193
|
+
onHandleArtifactClick?: (payload: any) => void;
|
|
194
|
+
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
195
|
+
onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
196
|
+
onMouseOut?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
197
|
+
}
|
|
198
|
+
interface RenderContext {
|
|
199
|
+
customId?: string;
|
|
200
|
+
isDark?: boolean;
|
|
201
|
+
indexKey?: string;
|
|
202
|
+
typewriter?: boolean;
|
|
203
|
+
customComponents?: Record<string, React.ComponentType<any>>;
|
|
204
|
+
codeBlockProps?: Record<string, any>;
|
|
205
|
+
mermaidProps?: Partial<Omit<MermaidBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
|
|
206
|
+
d2Props?: Partial<Omit<D2BlockNodeProps, 'node' | 'loading' | 'isDark'>>;
|
|
207
|
+
infographicProps?: Partial<Omit<InfographicBlockNodeProps, 'node' | 'loading' | 'isDark'>>;
|
|
208
|
+
showTooltips?: boolean;
|
|
209
|
+
codeBlockStream?: boolean;
|
|
210
|
+
renderCodeBlocksAsPre?: boolean;
|
|
211
|
+
codeBlockThemes?: {
|
|
212
|
+
themes?: string[];
|
|
213
|
+
darkTheme?: any;
|
|
214
|
+
lightTheme?: any;
|
|
215
|
+
monacoOptions?: Record<string, any>;
|
|
216
|
+
minWidth?: string | number;
|
|
217
|
+
maxWidth?: string | number;
|
|
218
|
+
};
|
|
219
|
+
events: {
|
|
220
|
+
onCopy?: (code: string) => void;
|
|
221
|
+
onHandleArtifactClick?: (payload: any) => void;
|
|
222
|
+
};
|
|
223
|
+
}
|
|
224
|
+
type RenderNodeFn = (node: ParsedNode, key: React.Key, ctx: RenderContext) => React.ReactNode;
|
|
225
|
+
|
|
226
|
+
interface NodeComponentProps<TNode = unknown> {
|
|
227
|
+
node: TNode;
|
|
228
|
+
ctx?: RenderContext;
|
|
229
|
+
renderNode?: RenderNodeFn;
|
|
230
|
+
indexKey?: React.Key;
|
|
231
|
+
customId?: string;
|
|
232
|
+
isDark?: boolean;
|
|
233
|
+
typewriter?: boolean;
|
|
234
|
+
children?: React.ReactNode;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
declare function AdmonitionNode(props: NodeComponentProps<{
|
|
238
|
+
type: 'admonition';
|
|
239
|
+
kind?: string;
|
|
240
|
+
title?: string;
|
|
241
|
+
children?: ParsedNode[];
|
|
242
|
+
collapsible?: boolean;
|
|
243
|
+
open?: boolean;
|
|
244
|
+
}>): react_jsx_runtime.JSX.Element;
|
|
245
|
+
|
|
246
|
+
declare function BlockquoteNode(props: NodeComponentProps<{
|
|
247
|
+
type: 'blockquote';
|
|
248
|
+
children?: ParsedNode[];
|
|
249
|
+
}>): react_jsx_runtime.JSX.Element;
|
|
250
|
+
|
|
251
|
+
declare function CheckboxNode(props: NodeComponentProps<{
|
|
252
|
+
type: 'checkbox' | 'checkbox_input';
|
|
253
|
+
checked?: boolean;
|
|
254
|
+
}>): react_jsx_runtime.JSX.Element;
|
|
255
|
+
|
|
244
256
|
interface CodeBlockPreviewPayload {
|
|
245
257
|
node: CodeBlockNodeProps['node'];
|
|
246
258
|
artifactType: 'text/html' | 'image/svg+xml';
|
|
@@ -423,6 +435,7 @@ interface MarkdownCodeBlockNodeProps {
|
|
|
423
435
|
showCopyButton?: boolean;
|
|
424
436
|
showExpandButton?: boolean;
|
|
425
437
|
showPreviewButton?: boolean;
|
|
438
|
+
showCollapseButton?: boolean;
|
|
426
439
|
showFontSizeButtons?: boolean;
|
|
427
440
|
showTooltips?: boolean;
|
|
428
441
|
onCopy?: (code: string) => void;
|