markstream-react 0.0.20 → 0.0.21
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 +2 -0
- package/dist/index.px.css +1 -0
- package/dist/tailwind.ts +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -29,6 +29,8 @@ export default function Article({ markdown }: { markdown: string }) {
|
|
|
29
29
|
}
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
+
If your app scales root font size on mobile (`html` / `body`), use `markstream-react/index.px.css` to prevent `rem`-based global scaling side effects.
|
|
33
|
+
|
|
32
34
|
You can also pass a pre-parsed `nodes` array if you already have AST data.
|
|
33
35
|
|
|
34
36
|
## Bundle size notes
|
|
@@ -0,0 +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:8px}.markstream-react .right-6{right:24px}.markstream-react .top-2{top:8px}.markstream-react .top-6{top:24px}.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:2px;margin-right:2px}.markstream-react .my-2{margin-top:8px;margin-bottom:8px}.markstream-react .my-4{margin-top:16px;margin-bottom:16px}.markstream-react .my-5{margin-top:20px;margin-bottom:20px}.markstream-react .my-8{margin-top:32px;margin-bottom:32px}.markstream-react .mb-2{margin-bottom:8px}.markstream-react .mb-4{margin-bottom:16px}.markstream-react .ml-4{margin-left:16px}.markstream-react .mt-2{margin-top:8px}.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:12px}.markstream-react .h-4{height:16px}.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:12px}.markstream-react .w-4{width:16px}.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:6px}.markstream-react .gap-2{gap:8px}.markstream-react .gap-x-1{-moz-column-gap:4px;column-gap:4px}.markstream-react .gap-x-2{-moz-column-gap:8px;column-gap:8px}.markstream-react :is(.space-x-1>:not([hidden])~:not([hidden])){--tw-space-x-reverse: 0;margin-right:calc(4px * var(--tw-space-x-reverse));margin-left:calc(4px * 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(8px * var(--tw-space-x-reverse));margin-left:calc(8px * 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:4px}.markstream-react .rounded-lg{border-radius:8px}.markstream-react .rounded-md{border-radius:6px}.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:2px}.markstream-react .p-2{padding:8px}.markstream-react .p-4{padding:16px}.markstream-react .p-\[calc\(4\/7\*1em\)\]{padding:calc(4 / 7 * 1em)}.markstream-react .px-1{padding-left:4px;padding-right:4px}.markstream-react .px-1\.5{padding-left:6px;padding-right:6px}.markstream-react .px-2{padding-left:8px;padding-right:8px}.markstream-react .px-2\.5{padding-left:10px;padding-right:10px}.markstream-react .px-3{padding-left:12px;padding-right:12px}.markstream-react .px-4{padding-left:16px;padding-right:16px}.markstream-react .py-0\.5{padding-top:2px;padding-bottom:2px}.markstream-react .py-1{padding-top:4px;padding-bottom:4px}.markstream-react .py-2{padding-top:8px;padding-bottom:8px}.markstream-react .py-2\.5{padding-top:10px;padding-bottom:10px}.markstream-react .py-4{padding-top:16px;padding-bottom:16px}.markstream-react .pb-3{padding-bottom:12px}.markstream-react .pl-1\.5{padding-left:6px}.markstream-react .pl-\[calc\(13\/8\*1em\)\]{padding-left:1.625em}.markstream-react .pt-2{padding-top:8px}.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:16px;line-height:24px}.markstream-react .text-sm{font-size:14px;line-height:20px}.markstream-react .text-xs{font-size:12px;line-height:16px}.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:16px;margin:4px 0;border-radius:8px;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:16px 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:4px 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:36px;line-height:calc(10 / 9 * 1);font-weight:800}.heading-2{margin-top:32px;margin-bottom:16px;font-size:24px;line-height:calc(4 / 3 * 1)}.heading-3{margin-top:1.6em;margin-bottom:calc(3 / 5 * 1em);font-size:20px;line-height:calc(5 / 3 * 1)}.heading-4,.heading-5,.heading-6{margin-top:24px;margin-bottom:8px;font-size:16px}.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:3.2px}.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:2px 6px;border-radius:6px;background:#f3f4f6;font-size:14px}.image-node{margin:32px auto;text-align:center}.image-node__inner{position:relative;display:inline-block;max-width:384px}.image-node__img{display:inline-block;max-width:384px;width:100%;border-radius:12px;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:8px;font-size:14px;color:#6b7280;font-style:italic}.image-node__placeholder,.image-node__error{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:24px;border-radius:12px}.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:16px;height:16px;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;animation:spin 1s linear infinite}.image-node__placeholder-text{font-size:14px;color:currentColor}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.footnote-node{border-left:4px solid #e2e8f0;padding-left:16px;margin:24px 0;font-size:14px;color:#475569}.admonition-node{border-left:4px solid #e5e7eb;border-radius:8px;padding:12px 16px;margin:24px 0;background:#f9fafbe6}.admonition-node__title{font-weight:600;margin-bottom:8px}.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:4px;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:40px;height:40px;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:12px;padding:16px;margin:20px 0;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.code-block{border-radius:12px;background:#0f172a;color:#e2e8f0;margin:20px 0;overflow:hidden;position:relative}.code-block--expanded{max-height:none}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:10.4px 14.4px;background:#0f172ad9;border-bottom:1px solid rgba(148,163,184,.2)}.code-block-meta{display:flex;align-items:center;gap:8px}.code-block-language{font-size:13.2px;letter-spacing:.08em;text-transform:uppercase;color:#e2e8f0d9}.code-block-badge{font-size:11.2px;padding:1.6px 6.4px;border-radius:9999px;background:#3b82f633;color:#bfdbfe}.code-block-actions{display:flex;gap:5.6px}.code-block-btn{border:1px solid rgba(148,163,184,.4);background:#0f172a99;color:#f8fafc;font-size:12px;padding:4px 10.4px;border-radius:5.6px;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:32px;height:32px;border:2px solid rgba(255,255,255,.3);border-top-color:#ffffffe6;border-radius:9999px;animation:spin 1s linear infinite}.code-block-footer{padding:5.6px 14.4px 11.2px;border-top:1px solid rgba(148,163,184,.2);font-size:12px;color:#e2e8f0cc}.mermaid-block{border:1px solid rgba(148,163,184,.3);border-radius:16px;background:#fff;color:#0f172a;margin:20px 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(1024px,calc(100% - 32px));margin:32px auto;border-radius:12px;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:8px 16px;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:14px;font-weight:600}.mermaid-modal-close{font-size:14px;padding:4px 8px;border-radius:6px;cursor:pointer;opacity:.9}.mermaid-modal-close:hover{opacity:1;background:#94a3b829}.mermaid-modal-body{padding:16px;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:10.4px 14.4px;border-bottom:1px solid rgba(148,163,184,.3);background:#f8fafcd9}.dark .mermaid-header{background:#0f172ad9;border-color:#47556999}.mermaid-title__text{font-size:13.6px;letter-spacing:.08em;text-transform:uppercase;color:inherit}.mermaid-actions{display:flex;align-items:center;gap:5.6px}.mermaid-btn{border:1px solid rgba(148,163,184,.4);background:transparent;color:inherit;font-size:12px;padding:3.2px 10.4px;border-radius:5.6px;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:12px;padding:3.2px 10.4px;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:16px}.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:8px;padding:16px;overflow-x:auto}.mermaid-error{padding:13.6px 16px;color:#b91c1c;background:#f8717126;border-top:1px solid rgba(248,113,113,.25)}.mermaid-loading{display:flex;align-items:center;gap:8px;padding:12px 16px 16px;font-size:13.6px;color:#0f172a99}.dark .mermaid-loading{color:#e2e8f0b3}.mermaid-spinner{width:19.2px;height:19.2px;border:2px solid rgba(59,130,246,.4);border-top-color:#3b82f6e6;border-radius:9999px;animation:spin .9s linear infinite}.math-block-node{margin:16px 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:16px;height:16px;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:8px}.math-rendering{opacity:.3;transition:opacity .2s ease}.thematic-break{margin:48px 0;border-top:1px solid #e2e8f0}.hr-node{margin:48px 0;border-top:1px solid var(--hr-border-color, #e2e8f0)}.hard-break{display:block}.checkbox-node{margin-right:8px;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:5.6px;padding:8px 0}.html-block-node__placeholder-bar{display:block;height:12.8px;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:8px;border:1px solid rgba(148,163,184,.35);padding:16px;margin:16px 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:16px 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:8px 16px;font-weight:600;display:flex;align-items:center;background-color:var(--admonition-header-bg);color:var(--admonition-muted)}.admonition-icon{margin-right:8px;color:inherit}.admonition-content{padding:8px 16px 16px;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:4px 8px;border-radius:4px;font-size:14.4px}.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:16px;min-height:120px}.loading-skeleton{display:flex;flex-direction:column;gap:12px}.skeleton-line{height:16px;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:4px}.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:8px;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:6.4px 12px;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:6.4px;font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;opacity:.85}.html-preview-frame__dot{width:8px;height:8px;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:20px;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:6.4px 10.4px;font-size:14px;border-radius:6px;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:14px;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)}}
|
package/dist/tailwind.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export const safeList = `string cannot delete global call clearGlobalCustomComponents
|
|
1
|
+
export const safeList = `string cannot delete global call clearGlobalCustomComponents react note is-dark data-index-key headerId admonition-header admonition-icon admonition-title admonition-toggle aria-expanded aria-controls collapsed admonition-content aria-labelledby checkbox-node checkbox checkbox-input stream-markdown-parser typeof window.requestIdleCallback [data-node-index] node-spacer dark virtualized data-custom-id code_block node-slot data-node-index data-node-type typewriter-node node-placeholder performance [markstream-react][perf] mermaid theme object name markdown-renderer boolean react-dom en utf-8 viewport content="width=device-width initial-scale=1 event.key keydown html-preview-frame__backdrop--dark html-preview-frame--dark html-preview-frame__header html-preview-frame__title html-preview-frame__dot html-preview-frame__label html-preview-frame__close--dark html-preview-frame__iframe allow-scripts allow-same-origin blockquote-node auto emoji-node dl definition-list indexKey mb-4 dt definition-term font-semibold ctx renderNode ?? definition dd definition-desc ml-4 dependency is not install it to enable plaintext number diff none visible view.getModifiedEditor on same helpers.cleanupEditor canonicalLanguage single window.requestAnimationFrame window.cancelAnimationFrame clientX top navigator.clipboard navigator.clipboard.writeText code-block-container my-4 rounded-lg border overflow-hidden shadow-sm border-gray-700/30 bg-gray-900 border-gray-200 bg-white is-rendering code-block-header flex justify-between items-center px-4 py-2.5 border-b border-gray-400/5 space-x-2 flex-1 icon-slot h-4 w-4 flex-shrink-0 text-sm font-medium font-mono truncate code-action-btn p-2 text-xs rounded-md transition-colors hover:bg-[var(--vscode-editor-selectionBackground)] aria-pressed w-3 h-3 currentColor round m9 copied m14 evenodd code-block-body--collapsed code-block-body--expanded code-height-placeholder hidden aria-hidden absolute code-fallback-plain m-0 aria-busy aria-label no code-loading-placeholder loading-skeleton skeleton-line short sr-only polite status clsx href xlink:href instance.render instance missing render returned empty d2-block text-gray-100 text-gray-900 d2-block-header gap-x-2 gap-x-1 p-0.5 bg-gray-700 bg-gray-100 mode-btn px-2 py-1 rounded !showSource is-active showSource d2-action-btn copying bodyRef d2-block-body bodyStyle !hasPreview d2-source py-4 d2-code d2-error mt-2 d2-render d2-svg pb-3 smooth footnote-reference handleScroll footnote footnote-link cursor-pointer emphasis-node footnote-node mb-2 leading-relaxed border-t border-[#eaecef] pt-2 footnote-anchor text-[#0366d6] hover:underline ↩︎ heading-node hard-break mark highlight-node setFigureEl image-node image-node__inner is-loaded contain lazy eager async image image-node__placeholder image-node__spinner image-node__placeholder-text image… placeholder image-node__error failed load image-node__caption list-item pl-1.5 my-2 valueAttr children insert-node list-node my-5 pl-[calc(13/8*1em)] list-decimal list-disc max-lg:my-[calc(4/3*1em)] max-lg:pl-[calc(14/9*1em)] list inline-code inline text-[85%] px-1 py-0.5 bg-[hsl(var(--secondary))] whitespace-normal break-words max-w-full library text-red-500 p-4">Failed instanceof error.message error transform ease center fullscreen touches text-gray-400 hover:bg-gray-700 hover:text-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-700 bg-gray-800 bg-gray-50 px-2.5 bg-gray-600 text-gray-200 text-gray-700 text-gray-500 m16 isCollapsed opacity-50 cursor-not-allowed m7 whitespace-pre-wrap text-gray-300 baseCode relative top-2 right-2 z-10 gap-2 backdrop-blur min-h-[360px] transition-all duration-100 block inset-0 cursor-grab isDragging containerRef w-full text-center justify-center min-h-full fixed z-50 bg-black/70 p-4 closeModal dialog h-full max-h-full shadow-lg top-6 right-6 !isDragging cursor-grabbing reference-node bg-[hsl(var(--muted))] px-1.5 mx-0.5 hover:bg-[hsl(var(--secondary))] strikethrough-node paragraph-node paragraph onclick onerror onload onmouseover onmouseout onmousedown onmouseup onkeydown onkeyup onfocus onblur onsubmit onreset onchange onselect ondblclick src srcset formaction abbr address area article aside bdi bdo caption cite col colgroup data datalist details dfn embed fieldset footer header hgroup kbd legend main map menu meter nav optgroup output param picture progress rp rt ruby samp section small source summary template tfoot time track var wbr class text tag_close self_closing tag_open setHostEl html-block-node shouldRender useDynamic reactNodes renderContent html-block-node__placeholder html-block-node__placeholder-bar w-4/5 w-2/3 unknown-node italic node strong-node linear infinite link-loading inline-flex items-baseline gap-1.5 link-text-wrapper leading-[normal] link-text node.text underline-anim link-node noopener noreferrer vitesse-dark vitesse-light shiki shiki-fallback stream-markdown code-block-content rendererTargetRef code-block-render subscript-node hr-node thematic-break text-node text-node-center superscript-node right text-right text-left table-node-wrapper my-8 table-node table-node--loading border-[var(--table-border,#cbd5e1)] p-[calc(4/7*1em)] table-node__loading table-node__spinner afterbegin light loose strict viewBox open-modal [data-mermaid-wrapper] mermaid-action-btn toggle-mode preview common.zoomIn common.zoomOut common.resetZoom data-mermaid-wrapper mermaid-loading mermaid-spinner diagram… mermaid-block-header space-x-1 common.preview common.source common.export mermaid-error mermaid-block modeContainerRef mermaid-modal-overlay mermaid-modal-panel mermaid-modal-header mermaid-modal-title mermaid-modal-close mermaid-modal-body modalContentRef mermaid-modal-content available default abort timed out containerClass vmr-container window.matchMedia ms-tooltip z-[9999] inline-block text-base py-2 px-3 shadow-md whitespace-nowrap pointer-events-none tooltip-element text-white border-gray-700 tooltip in zoom infographic d2 language d2lang html_block node.type html_inline text_special node.content heading list_item definition_list footnote_reference footnote_anchor admonition hardbreak inline_code emphasis strikethrough highlight insert subscript superscript checkbox_input emoji thematic_break math_inline math_block reference vmr_container label_open label_close javascript typescript python shell plain cpp markdown thinking htmlFor className [mermaidWorkerClient] messageerror cleared worker inject via busy canParse findPrefix stream-monaco document data-language role aria-describedby ontouchstart ontouchend ontouchmove ontouchcancel onwheel onscroll oncopy oncut onpaste oninput oninvalid onsearch checked disabled readonly required autofocus multiple value min max step width height size maxlength parse dynamic html-inline-node html-inline-node--loading $$ math-inline-wrapper mathRef math-inline--hidden math-inline__loading math-inline__spinner math-block overflow-x-auto min-h-[40px] rendering math-rendering globalThis.requestAnimationFrame globalThis.cancelAnimationFrame module did expected [markstream-react] [katexWorkerClient] init cache-hit timeout waiting slot existingEnv.getWorkerUrl katex`
|
|
2
2
|
module.exports = safeList;
|
|
3
3
|
export default safeList;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "markstream-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.21",
|
|
5
5
|
"description": "React Markdown renderer optimized for large documents with progressive Mermaid rendering, streaming diff code blocks, and fast real-time preview. Built on stream-markdown AST for consistent rendering across frameworks. Perfect for documentation sites, AI chat interfaces, and content management systems.",
|
|
6
6
|
"author": "Simon He",
|
|
7
7
|
"license": "MIT",
|
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
"import": "./dist/index.js"
|
|
64
64
|
},
|
|
65
65
|
"./index.css": "./dist/index.css",
|
|
66
|
+
"./index.px.css": "./dist/index.px.css",
|
|
66
67
|
"./index.tailwind.css": "./dist/index.tailwind.css",
|
|
67
68
|
"./tailwind": "./dist/tailwind.ts",
|
|
68
69
|
"./workers/katexRenderer.worker": "./dist/workers/katexRenderer.worker.js",
|
|
@@ -124,7 +125,7 @@
|
|
|
124
125
|
},
|
|
125
126
|
"scripts": {
|
|
126
127
|
"dev": "vite dev",
|
|
127
|
-
"build": "vite build --mode npm && vite build -c vite.config.tailwind.ts --mode npm && node ./scripts/copy-tailwind-css.mjs && pnpm run build:dts",
|
|
128
|
+
"build": "vite build --mode npm && vite build -c vite.config.tailwind.ts --mode npm && node ./scripts/copy-tailwind-css.mjs && node ../../scripts/generate-px-css.mjs && pnpm run build:dts",
|
|
128
129
|
"build:analyze": "ANALYZE=true pnpm build",
|
|
129
130
|
"build:dts": "rollup -c ./scripts/rollup.dts.config.mjs && node ./scripts/clean-dts.cjs",
|
|
130
131
|
"preview": "vite preview",
|