@lapismd/mira 0.0.5 → 0.1.0

package/dist/preview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAClD,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAC5C,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAC1C,OAAO,iBAAiB,MAAM,iCAAiC,CAAC;AAChE,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,eAAe,EACf,eAAe,EACf,QAAQ,GACT,CAAC;AACF,YAAY,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,cAAc,iBAAiB,CAAC;AAChC,mBAAmB,kBAAkB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,qBAAqB,EACrB,gCAAgC,EAChC,KAAK,2BAA2B,EAChC,KAAK,4BAA4B,EACjC,KAAK,0BAA0B,EAC/B,KAAK,uCAAuC,EAC5C,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,eAAe,CAAC;AACvB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAClD,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAC5C,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAC1C,OAAO,iBAAiB,MAAM,iCAAiC,CAAC;AAChE,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,eAAe,EACf,eAAe,EACf,QAAQ,GACT,CAAC;AACF,YAAY,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,cAAc,iBAAiB,CAAC;AAChC,mBAAmB,kBAAkB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,qBAAqB,EACrB,gCAAgC,EAChC,KAAK,2BAA2B,EAChC,KAAK,4BAA4B,EACjC,KAAK,0BAA0B,EAC/B,KAAK,uCAAuC,EAC5C,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,eAAe,CAAC;AACvB,eAAe,eAAe,CAAC"}

package/dist/preview/index.js

@@ -1,4 +1,6 @@
 import MarkdownPreview from "./markdown-preview.svelte";
+export { default as InlineLink } from "./components/inline-link.svelte";
+export { default as LinkSiteIcon } from "./components/link-site-icon.svelte";
 import MarkdownOutline from "./markdown-outline.svelte";
 import Markdown from "./renderer/markdown.svelte";
 import FileEmbed from "./file-embed.svelte";

package/dist/preview/markdown-preview.svelte

@@ -215,6 +215,17 @@
         "data-sourcepos",
       ],
       img: [...(defaultSchema.attributes?.img ?? []), "src", "alt", "title"],
+      code: [
+        ...(defaultSchema.attributes?.code ?? []).filter(
+          (attribute) =>
+            !Array.isArray(attribute) || attribute[0] !== "className",
+        ),
+        ["className", /^language-/, "hljs"],
+      ],
+      span: [
+        ...(defaultSchema.attributes?.span ?? []),
+        ["className", /^hljs-/, "code-line", "highlighted-code-line"],
+      ],
       a: [
         ...(defaultSchema.attributes?.a ?? []),
         "href",

package/dist/preview/markdown-preview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-preview.svelte.d.ts","sourceRoot":"","sources":["../../src/preview/markdown-preview.svelte.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACR,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,yBAAyB,EACzB,sBAAsB,EACvB,MAAM,0BAA0B,CAAC;AAqCpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGtE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE,CAAC;AA6ZJ,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"markdown-preview.svelte.d.ts","sourceRoot":"","sources":["../../src/preview/markdown-preview.svelte.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACR,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,yBAAyB,EACzB,sBAAsB,EACvB,MAAM,0BAA0B,CAAC;AAqCpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGtE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE,yBAAyB,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE,CAAC;AAwaJ,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/preview/renderer/utils.js

@@ -114,7 +114,6 @@ const svgCamelCaseAttributes = new Set([
     "markerEnd",
     "markerMid",
     "markerStart",
-    "preserveAspectRatio",
     "strokeDasharray",
     "strokeDashoffset",
     "strokeLinecap",
@@ -123,7 +122,6 @@ const svgCamelCaseAttributes = new Set([
     "strokeOpacity",
     "strokeWidth",
     "textAnchor",
-    "viewBox",
     "xlinkHref",
 ]);
 const htmlCamelCaseAttributes = {

package/dist/preview/styles/inline-links.css

@@ -0,0 +1,38 @@
+.mira-link-site-icon {
+  display: inline-block;
+  width: 0.95em;
+  height: 0.95em;
+  margin-inline-end: 0.25em;
+  vertical-align: -0.12em;
+  color: inherit;
+}
+
+.mira-inline-link,
+.markdown-rendered a.mira-inline-link,
+.markdown-preview-surface .markdown a.mira-inline-link {
+  color: var(
+    --markdown-link-external-color,
+    var(--mira-link, var(--mira-accent))
+  );
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  overflow-wrap: anywhere;
+  background-image: none;
+  padding-inline-end: 0;
+  filter: none;
+}
+
+.mira-inline-link:hover,
+.markdown-rendered a.mira-inline-link:hover {
+  color: var(--markdown-link-color-hover, var(--mira-link, var(--mira-accent)));
+}
+
+.mira-inline-link:focus-visible {
+  outline: 2px solid var(--mira-focus-ring);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.mira-inline-link__destination {
+  overflow-wrap: anywhere;
+}

package/dist/preview/styles/links-embeds-tags.css

@@ -31,7 +31,8 @@
   text-decoration-line: var(--markdown-link-external-decoration);
 }
 
-.markdown-live-preview-mode .cm-external-link .cm-link,
+.markdown-live-preview-mode .cm-external-link .cm-link-text,
+.markdown-live-preview-mode .cm-link-text > .cm-external-link > .cm-url,
 .markdown-live-preview-mode .cm-url.cm-external-link {
   background-image:
     linear-gradient(transparent, transparent),
@@ -43,7 +44,6 @@
   color: var(--markdown-link-external-color);
   filter: var(--markdown-link-external-filter);
   padding-inline-end: 0.9em;
-  text-decoration-line: var(--markdown-link-external-decoration);
 }
 
 .mira-link-preview {

package/dist/preview/styles/mermaid-highlight.css

@@ -87,9 +87,10 @@
   color: var(--mira-syntax-keyword);
 }
 
-.markdown-preview-surface :is(.hljs-title, .hljs-title.function_),
-.markdown-rendered :is(.hljs-title, .hljs-title.function_),
-.markdown-widget-shell :is(.hljs-title, .hljs-title.function_) {
+.markdown-preview-surface
+  :is(.hljs-title, .hljs-title.function_, .hljs-section),
+.markdown-rendered :is(.hljs-title, .hljs-title.function_, .hljs-section),
+.markdown-widget-shell :is(.hljs-title, .hljs-title.function_, .hljs-section) {
   color: var(--mira-syntax-heading);
 }
 

package/dist/preview/styles/references.css

@@ -0,0 +1,72 @@
+.mira-reference-definition.mira-reference--link {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5em;
+  min-width: 0;
+  padding-block: 0.25em;
+}
+
+.mira-reference--link .mira-reference__label {
+  color: var(--mira-muted-foreground);
+  flex: none;
+  font-size: 0.75em;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  max-inline-size: 40%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mira-reference--link > p {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.mira-reference--image {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  max-width: 100%;
+  border: 1px solid var(--mira-border);
+  border-radius: var(--mira-radius, 8px);
+  padding: 0.75rem;
+  background: var(--mira-background);
+}
+
+/* Give percentage-constrained SVGs a definite containing width in block frames. */
+.mira-rich-widget--block.mira-reference--image .mira-markdown-image-root,
+.mira-rich-widget--block.mira-reference--image .mira-markdown-image__trigger {
+  display: block;
+}
+
+.mira-rich-widget--block.mira-reference--image .mira-markdown-image__trigger {
+  width: 100%;
+}
+
+.mira-reference--image > .mira-reference__label {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  border-end-start-radius: var(--mira-radius, 8px);
+  border-start-end-radius: calc(var(--mira-radius, 8px) - 1px);
+  background: var(--mira-accent);
+  color: var(--mira-accent-foreground);
+  font-size: 0.75em;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  padding: 0.35em 0.65em;
+  box-sizing: border-box;
+  max-inline-size: 75%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.mira-reference--image .mira-rich-widget__source-toggle {
+  inset-inline-start: 0.25rem;
+  inset-inline-end: auto;
+}

package/dist/preview/styles.css

@@ -10,6 +10,8 @@
 @import "./styles/blockquotes-footnotes.css";
 @import "./styles/code-katex.css";
 @import "./styles/links-embeds-tags.css";
+@import "./styles/inline-links.css";
+@import "./styles/references.css";
 @import "./styles/callouts.css";
 @import "./styles/images.css";
 @import "./styles/tables.css";

package/dist/tables/editor-column.svelte

@@ -5,8 +5,10 @@
   import { EditorView } from "@codemirror/view";
   import { EditorState } from "@codemirror/state";
   import { cn } from "./utils";
-  import { tick } from "svelte";
+  import { tick, onDestroy } from "svelte";
   import { toHtml } from "./utils";
+  import { MarkdownPreview } from "@lapismd/mira/preview";
+  import type { MiraExtension } from "../extensions";
   import { createInlineTableMarkdownExtensions } from "./inline-editor-extensions";
 
   let {
@@ -14,6 +16,7 @@
     onContentChange,
     onEdit = () => {},
     readonly = false,
+    extensions = [],
     class: className,
   }: {
     node: Mdast.Nodes;
@@ -21,6 +24,7 @@
     onContentChange: (value: string) => void;
     onEdit?: (evt: MouseEvent) => void;
     readonly?: boolean;
+    extensions?: MiraExtension[];
   } = $props();
   let content = $derived(TableNode.toMarkdown(node).trim());
   let view: EditorView = new EditorView({
@@ -42,6 +46,7 @@
     }),
   });
 
+  onDestroy(() => view.destroy());
   let editing: boolean = $state(false);
 
   const codeMirror = (node: HTMLDivElement, content: string) => {
@@ -97,9 +102,13 @@
         <div class="cm-scroller">
           <div class="cm-content">
             {#if content}
-              {#await toHtml(content) then markup}
-                {@html markup}
-              {/await}
+              {#if extensions.length}<MarkdownPreview
+                  inline
+                  value={content}
+                  {extensions}
+                />{:else}{#await toHtml(content) then markup}
+                  {@html markup}
+                {/await}{/if}
             {:else}
               &NonBreakingSpace;
             {/if}
@@ -115,9 +124,13 @@
         <div class="cm-scroller">
           <div class="cm-content">
             {#if content}
-              {#await toHtml(content) then markup}
-                {@html markup}
-              {/await}
+              {#if extensions.length}<MarkdownPreview
+                  inline
+                  value={content}
+                  {extensions}
+                />{:else}{#await toHtml(content) then markup}
+                  {@html markup}
+                {/await}{/if}
             {:else}
               &NonBreakingSpace;
             {/if}

package/dist/tables/editor-column.svelte.d.ts

@@ -1,10 +1,12 @@
 import type * as Mdast from "mdast";
+import type { MiraExtension } from "../extensions";
 type $$ComponentProps = {
     node: Mdast.Nodes;
     class?: string;
     onContentChange: (value: string) => void;
     onEdit?: (evt: MouseEvent) => void;
     readonly?: boolean;
+    extensions?: MiraExtension[];
 };
 declare const EditorColumn: import("svelte").Component<$$ComponentProps, {}, "">;
 type EditorColumn = ReturnType<typeof EditorColumn>;

package/dist/tables/editor-column.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-column.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/editor-column.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AASnC,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA4HJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"editor-column.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/editor-column.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAQpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGlD,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;CAC9B,CAAC;AAgIJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/tables/editor-table.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   // @ts-nocheck
   import { TableNode } from "./table-node";
+  import type { MiraExtension } from "../extensions";
   import * as Table from "@lapismd/mira/ui/table";
   import { cn } from "./utils";
   import ColumnEditor from "./editor-column.svelte";
@@ -45,12 +46,14 @@
     onDelete = () => {},
     onMouseUp = () => {},
     selectedCells = [],
+    extensions = [],
   }: {
     node: TableNode;
     onChange?: (data: string, props?: Record<string, any>) => void;
     onDelete?: (evt: Event) => void;
     onMouseUp?: (evt: MouseEvent) => void;
     selectedCells?: Array<[number, number]>;
+    extensions?: MiraExtension[];
   } = $props();
   let tableVersion = $state(0);
   let mdastNode = $derived.by(() => {
@@ -765,6 +768,7 @@
                     hProperties.displayColIndex ?? index}
                   {@const id = [sourceRowIndex, sourceColIndex].join(",")}
                   <MarkdownTableDataCell
+                    {extensions}
                     node={col}
                     {rowIndex}
                     colIndex={displayColIndex}

package/dist/tables/editor-table.svelte.d.ts

@@ -1,10 +1,12 @@
 import { TableNode } from "./table-node";
+import type { MiraExtension } from "../extensions";
 type $$ComponentProps = {
     node: TableNode;
     onChange?: (data: string, props?: Record<string, any>) => void;
     onDelete?: (evt: Event) => void;
     onMouseUp?: (evt: MouseEvent) => void;
     selectedCells?: Array<[number, number]>;
+    extensions?: MiraExtension[];
 };
 declare const EditorTable: import("svelte").Component<$$ComponentProps, {}, "">;
 type EditorTable = ReturnType<typeof EditorTable>;

package/dist/tables/editor-table.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-table.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/editor-table.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAuCxC,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACzC,CAAC;AA2wBJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"editor-table.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/editor-table.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAuClD,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;CAC9B,CAAC;AA6wBJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/tables/grid-editor-column.svelte

@@ -3,17 +3,20 @@
   import { EditorView, keymap } from "@codemirror/view";
   import { EditorState } from "@codemirror/state";
   import { cn } from "./utils";
-  import { tick } from "svelte";
+  import { tick, onDestroy } from "svelte";
   import { MarkdownPreview } from "@lapismd/mira/preview";
+  import type { MiraExtension } from "../extensions";
   import { createInlineTableMarkdownExtensions } from "./inline-editor-extensions";
 
   let {
     content,
+    extensions = [],
     onContentChange,
     onEdit = () => true,
     class: className,
   }: {
     content: string;
+    extensions?: MiraExtension[];
     class?: string;
     onContentChange: (value: string) => void;
     onEdit?: (evt: MouseEvent) => boolean;
@@ -50,6 +53,7 @@
     }),
   });
 
+  onDestroy(() => view.destroy());
   let editing: boolean = $state(false);
 
   const codeMirror = (node: HTMLDivElement, content: string) => {
@@ -108,7 +112,7 @@
         <div class="cm-scroller">
           <div class="cm-content">
             {#if content}
-              <MarkdownPreview inline value={content} />
+              <MarkdownPreview inline value={content} {extensions} />
             {:else}
               &NonBreakingSpace;
             {/if}

package/dist/tables/grid-editor-column.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { MiraExtension } from "../extensions";
 type $$ComponentProps = {
     content: string;
+    extensions?: MiraExtension[];
     class?: string;
     onContentChange: (value: string) => void;
     onEdit?: (evt: MouseEvent) => boolean;

package/dist/tables/grid-editor-column.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid-editor-column.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/grid-editor-column.svelte.ts"],"names":[],"mappings":"AAWC,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;CACvC,CAAC;AAmHJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"grid-editor-column.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/grid-editor-column.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGlD,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;CACvC,CAAC;AAsHJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/tables/grid-editor-table.svelte

@@ -4,6 +4,7 @@
   import * as Table from "@lapismd/mira/ui/table";
   import { cn } from "./utils";
   import ColumnEditor from "./grid-editor-column.svelte";
+  import type { MiraExtension } from "../extensions";
   import * as Tooltip from "@lapismd/mira/ui/tooltip";
   import Delete from "@lucide/svelte/icons/trash";
   import Elipsis from "@lucide/svelte/icons/ellipsis";
@@ -30,12 +31,14 @@
     onDelete = () => {},
     onMouseUp = () => {},
     selectedCells = [],
+    extensions = [],
   }: {
     node: GridTableNode;
     onChange?: (data: string, props?: Record<string, any>) => void;
     onDelete?: (evt: Event) => void;
     onMouseUp?: (evt: MouseEvent) => void;
     selectedCells?: Array<[number, number]>;
+    extensions?: MiraExtension[];
   } = $props();
   let tableVersion = $state(0);
   let columnCount = $derived.by(() => {
@@ -1107,6 +1110,7 @@
           })}
         >
           <ColumnEditor
+            {extensions}
             content={cell.cell.content}
             class={cn({
               "text-left": cell.cell.align === "left",

package/dist/tables/grid-editor-table.svelte.d.ts

@@ -1,10 +1,12 @@
 import { GridTableNode } from "./grid-table";
+import type { MiraExtension } from "../extensions";
 type $$ComponentProps = {
     node: GridTableNode;
     onChange?: (data: string, props?: Record<string, any>) => void;
     onDelete?: (evt: Event) => void;
     onMouseUp?: (evt: MouseEvent) => void;
     selectedCells?: Array<[number, number]>;
+    extensions?: MiraExtension[];
 };
 declare const GridEditorTable: import("svelte").Component<$$ComponentProps, {}, "">;
 type GridEditorTable = ReturnType<typeof GridEditorTable>;

package/dist/tables/grid-editor-table.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid-editor-table.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/grid-editor-table.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAgB,MAAM,cAAc,CAAC;AAwB1D,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACzC,CAAC;AAugCJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"grid-editor-table.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/grid-editor-table.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAgB,MAAM,cAAc,CAAC;AAI3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAqBlD,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;CAC9B,CAAC;AAygCJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/tables/index.d.ts

@@ -7,6 +7,7 @@ export { GridTableNode, type ColType, type GridType, type RowType, } from "./gri
 export { $convertTableElement, TableNode } from "./table-node";
 import EditorColumn from "./editor-column.svelte";
 import EditorTable from "./editor-table.svelte";
+export { default as TableReader } from "./table-reader.svelte";
 import GridEditorColumn from "./grid-editor-column.svelte";
 import GridEditorTable from "./grid-editor-table.svelte";
 export { EditorColumn, EditorColumn as column, EditorTable, EditorTable as Table, GridEditorColumn, GridEditorColumn as GridColumn, GridEditorTable, GridEditorTable as GridTable, };

package/dist/tables/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tables/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EACL,aAAa,EACb,KAAK,OAAO,EACZ,KAAK,QAAQ,EACb,KAAK,OAAO,GACb,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,eAAe,MAAM,4BAA4B,CAAC;AAEzD,OAAO,EACL,YAAY,EACZ,YAAY,IAAI,MAAM,EACtB,WAAW,EACX,WAAW,IAAI,KAAK,EACpB,gBAAgB,EAChB,gBAAgB,IAAI,UAAU,EAC9B,eAAe,EACf,eAAe,IAAI,SAAS,GAC7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tables/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EACL,aAAa,EACb,KAAK,OAAO,EACZ,KAAK,QAAQ,EACb,KAAK,OAAO,GACb,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,eAAe,MAAM,4BAA4B,CAAC;AAEzD,OAAO,EACL,YAAY,EACZ,YAAY,IAAI,MAAM,EACtB,WAAW,EACX,WAAW,IAAI,KAAK,EACpB,gBAAgB,EAChB,gBAAgB,IAAI,UAAU,EAC9B,eAAe,EACf,eAAe,IAAI,SAAS,GAC7B,CAAC"}

package/dist/tables/index.js

@@ -7,6 +7,7 @@ export { GridTableNode, } from "./grid-table";
 export { $convertTableElement, TableNode } from "./table-node";
 import EditorColumn from "./editor-column.svelte";
 import EditorTable from "./editor-table.svelte";
+export { default as TableReader } from "./table-reader.svelte";
 import GridEditorColumn from "./grid-editor-column.svelte";
 import GridEditorTable from "./grid-editor-table.svelte";
 export { EditorColumn, EditorColumn as column, EditorTable, EditorTable as Table, GridEditorColumn, GridEditorColumn as GridColumn, GridEditorTable, GridEditorTable as GridTable, };

package/dist/tables/markdown-table-data-cell.svelte

@@ -5,6 +5,7 @@
   import { cn } from "./utils";
   import type * as Mdast from "mdast";
   import ColumnEditor from "./editor-column.svelte";
+  import type { MiraExtension } from "../extensions";
   import type { MarkdownTableDragSource } from "./markdown-table-dnd";
   import {
     dropIndicatorClasses,
@@ -14,6 +15,7 @@
 
   type Props = {
     node: Mdast.Nodes;
+    extensions?: MiraExtension[];
     rowIndex: number;
     colIndex: number;
     sourceRowIndex?: number;
@@ -33,6 +35,7 @@
 
   let {
     node,
+    extensions = [],
     rowIndex,
     colIndex,
     sourceRowIndex = rowIndex,
@@ -109,6 +112,7 @@
   )}
 >
   <ColumnEditor
+    {extensions}
     {node}
     {onContentChange}
     {readonly}

package/dist/tables/markdown-table-data-cell.svelte.d.ts

@@ -1,7 +1,9 @@
 import type * as Mdast from "mdast";
+import type { MiraExtension } from "../extensions";
 import type { MarkdownTableDragSource } from "./markdown-table-dnd";
 type Props = {
     node: Mdast.Nodes;
+    extensions?: MiraExtension[];
     rowIndex: number;
     colIndex: number;
     sourceRowIndex?: number;

package/dist/tables/markdown-table-data-cell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-table-data-cell.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/markdown-table-data-cell.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAQlE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAwFJ,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"markdown-table-data-cell.svelte.d.ts","sourceRoot":"","sources":["../../src/tables/markdown-table-data-cell.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAQlE,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AA0FJ,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/tables/table-reader.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { TableNode } from "./table-node";
+  import { MarkdownPreview } from "@lapismd/mira/preview";
+  import type { MiraExtension } from "../extensions";
+  import * as Table from "@lapismd/mira/ui/table";
+
+  let {
+    markdown,
+    cell,
+    breakAfterRows = [],
+    afterRow,
+    extensions = [],
+    label = "Markdown table",
+    showHeader = true,
+  }: {
+    markdown: string;
+    /** Render original source-aware cells without enabling table mutations. */
+    cell?: Snippet<[{ row: number; column: number; text: string }]>;
+    /** Zero-based source rows, including the header at row zero. */
+    breakAfterRows?: readonly number[];
+    afterRow?: Snippet<[number]>;
+    extensions?: MiraExtension[];
+    label?: string;
+    showHeader?: boolean;
+  } = $props();
+  const table = $derived(TableNode.fromMarkdown(markdown)?.getMdastNode());
+  const rows = $derived(table?.children ?? []);
+  const segments = $derived.by(() => {
+    const ends = [...new Set([...breakAfterRows, rows.length - 1])]
+      .filter((row) => Number.isInteger(row) && row >= 0 && row < rows.length)
+      .sort((a, b) => a - b);
+    let start = 0;
+    return ends.map((end) => {
+      const segment = { start, end };
+      start = end + 1;
+      return segment;
+    });
+  });
+</script>
+
+<div class="mira-table-reader">
+  {#each segments as segment (segment.start)}
+    <div class="mira-table-reader__scroll">
+      <Table.Root aria-label={label} class="mira-table-reader__table">
+        <Table.Body>
+          {#each rows.slice(segment.start, segment.end + 1) as row, index (segment.start + index)}
+            {@const rowIndex = segment.start + index}
+            {#if showHeader || rowIndex > 0}
+              <Table.Row>
+                {#each row.children as value, column (column)}
+                  {@const text = TableNode.toMarkdown(value).trim()}
+                  <svelte:element
+                    this={rowIndex === 0 ? "th" : "td"}
+                    scope={rowIndex === 0 ? "col" : undefined}
+                    style:text-align={table?.align?.[column] ?? "left"}
+                  >
+                    {#if cell}{@render cell({ row: rowIndex, column, text })}
+                    {:else}<MarkdownPreview
+                        value={text}
+                        inline
+                        htmlPolicy="safe"
+                        {extensions}
+                      />{/if}
+                  </svelte:element>
+                {/each}
+              </Table.Row>
+            {/if}
+          {/each}
+        </Table.Body>
+      </Table.Root>
+    </div>
+    {#if breakAfterRows.includes(segment.end)}{@render afterRow?.(
+        segment.end,
+      )}{/if}
+  {/each}
+</div>
+
+<style>
+  .mira-table-reader {
+    min-width: 0;
+  }
+  .mira-table-reader__scroll {
+    overflow-x: auto;
+  }
+  .mira-table-reader :global(.mira-table-reader__table) {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+  }
+  .mira-table-reader
+    :global(.mira-table-reader__table > tbody > tr > :is(td, th)) {
+    border: 1px solid var(--mira-border, var(--border));
+    padding: var(--mira-table-reader-cell-padding, 0.375rem 0.625rem);
+    vertical-align: top;
+  }
+  .mira-table-reader :global(.mira-table-reader__table > tbody > tr > th) {
+    background: var(--mira-muted, var(--muted));
+    font-weight: 600;
+  }
+</style>