@lapismd/mira 0.0.1

package/dist/tables/table-node.test.js

@@ -0,0 +1,167 @@
+import { describe, expect, it } from "vitest";
+import { TableNode } from "./table-node";
+function parseTable(markdown) {
+    const node = TableNode.fromMarkdown(markdown);
+    expect(node).not.toBeNull();
+    return node;
+}
+function reparseTable(node) {
+    return parseTable(node.toMarkdown());
+}
+function cellText(node, rowIndex, colIndex) {
+    const cell = node.getMdastNode().children[rowIndex]?.children[colIndex];
+    return (cell?.children
+        .map((child) => ("value" in child ? child.value : ""))
+        .join("") ?? "");
+}
+const sampleTable = [
+    "| Package | Role | Status |",
+    "| --- | --- | --- |",
+    "| @lapismd/mira/core | editor controller | ready |",
+    "| @lapismd/mira/preview | rendered markdown | ready |",
+].join("\n");
+describe("TableNode", () => {
+    it("uses the Lapis table model", () => {
+        const node = TableNode.fromMarkdown("| A |\n| --- |\n| B |");
+        expect(node?.getRowCount()).toBe(2);
+        expect(node?.getColCount()).toBe(1);
+    });
+    it("preserves table shape after inserting rows and columns", () => {
+        const node = parseTable(sampleTable);
+        node.insertRowAt(node.getRowCount());
+        node.insertColumnAt(node.getColCount());
+        expect(node.toMarkdown()).not.toContain("| :- |");
+        expect(node.toMarkdown()).not.toContain("| - |");
+        expect(node.toMarkdown()).toContain("| --- |");
+        const reparsed = reparseTable(node);
+        expect(reparsed.getRowCount()).toBe(4);
+        expect(reparsed.getColCount()).toBe(4);
+        for (const row of reparsed.getMdastNode().children) {
+            expect(row.children).toHaveLength(4);
+        }
+        expect(cellText(reparsed, 0, 0)).toBe("Package");
+        expect(cellText(reparsed, 1, 1)).toBe("editor controller");
+    });
+    it("preserves table shape after moving rows and columns", () => {
+        const node = parseTable(sampleTable);
+        node.moveRow(2, 1);
+        node.moveColumn(2, 0);
+        const reparsed = reparseTable(node);
+        expect(reparsed.getRowCount()).toBe(3);
+        expect(reparsed.getColCount()).toBe(3);
+        for (const row of reparsed.getMdastNode().children) {
+            expect(row.children).toHaveLength(3);
+        }
+        expect(cellText(reparsed, 0, 0)).toBe("Status");
+        expect(cellText(reparsed, 1, 1)).toBe("@lapismd/mira/preview");
+    });
+    it("exposes MultiMarkdown spans for live-preview display without changing source", () => {
+        const markdown = [
+            "| MultiMarkdown | Span | Status |",
+            "| :--- | :--- | ---: |",
+            "| Combined cell | | ready |",
+            "| Persistent row | rendered markdown | ready |",
+            "| ^ | source-compatible spans | ready |",
+        ].join("\n");
+        const node = parseTable(markdown);
+        const displayRows = node.getDisplayMdastNode().children;
+        expect(node.hasSpans()).toBe(true);
+        expect(displayRows[1]?.children).toHaveLength(2);
+        expect(displayRows[1]?.children[0]?.data?.hProperties?.colSpan).toBe(2);
+        expect(displayRows[1]?.children[0]?.data?.hProperties).toMatchObject({
+            sourceRowIndex: 1,
+            sourceColIndex: 0,
+            displayColIndex: 0,
+        });
+        expect(displayRows[2]?.children).toHaveLength(3);
+        expect(displayRows[2]?.children[0]?.data?.hProperties?.rowSpan).toBe(2);
+        expect(displayRows[2]?.children[0]?.data?.hProperties).toMatchObject({
+            sourceRowIndex: 2,
+            sourceColIndex: 0,
+            displayColIndex: 0,
+        });
+        expect(displayRows[3]?.children).toHaveLength(2);
+        expect(displayRows[3]?.children[0]?.data?.hProperties).toMatchObject({
+            sourceRowIndex: 3,
+            sourceColIndex: 1,
+            displayColIndex: 1,
+        });
+        expect(displayRows[3]?.children[1]?.data?.hProperties).toMatchObject({
+            sourceRowIndex: 3,
+            sourceColIndex: 2,
+            displayColIndex: 2,
+        });
+        expect(cellText(node, 3, 0)).toBe("^");
+        expect(node.toMarkdown()).toContain("| ^");
+        const displayCell = displayRows[3].children[0];
+        const coords = displayCell.data.hProperties;
+        node.updateCellContents(coords.sourceColIndex, coords.sourceRowIndex, [
+            { type: "text", value: "edited span cell" },
+        ]);
+        expect(cellText(node, 3, 0)).toBe("^");
+        expect(cellText(node, 3, 1)).toBe("edited span cell");
+    });
+    it("keeps trailing empty columns separate from MultiMarkdown colspans", () => {
+        const node = parseTable(sampleTable);
+        node.insertColumnAt(node.getColCount());
+        node.rerender();
+        const headerRow = node.getDisplayMdastNode().children[0];
+        const bodyRow = node.getDisplayMdastNode().children[1];
+        expect(node.hasSpans()).toBe(false);
+        expect(node.getColCount()).toBe(4);
+        expect(headerRow?.children).toHaveLength(4);
+        expect(bodyRow?.children).toHaveLength(4);
+        expect(headerRow?.children[2]?.data?.hProperties?.colSpan).toBeUndefined();
+    });
+    it("keeps MultiMarkdown display spans after clone and rerender", () => {
+        const node = parseTable([
+            "| MultiMarkdown | Span | Status |",
+            "| :--- | :--- | ---: |",
+            "| Combined cell | | ready |",
+            "| Persistent row | rendered markdown | ready |",
+            "| ^ | source-compatible spans | ready |",
+        ].join("\n"));
+        const clone = TableNode.clone(node);
+        clone.rerender();
+        expect(clone.hasSpans()).toBe(true);
+        expect(clone.getDisplayMdastNode().children[1]?.children[0]?.data?.hProperties
+            ?.colSpan).toBe(2);
+        expect(clone.getDisplayMdastNode().children[2]?.children[0]?.data?.hProperties
+            ?.rowSpan).toBe(2);
+        expect(clone.toMarkdown()).toContain("| ^");
+    });
+    it("selects display rows and columns across MultiMarkdown spans", () => {
+        const node = parseTable([
+            "| MultiMarkdown | Span | Status |",
+            "| :--- | :--- | ---: |",
+            "| Combined cell | | ready |",
+            "| Persistent row | rendered markdown | ready |",
+            "| ^ | source-compatible spans | ready |",
+        ].join("\n"));
+        expect(node.getCellsInDisplayColumn(0)).toEqual([
+            [0, 0],
+            [1, 0],
+            [2, 0],
+        ]);
+        expect(node.getCellsInDisplayColumn(1)).toEqual([
+            [0, 1],
+            [1, 0],
+            [2, 1],
+            [3, 1],
+        ]);
+        expect(node.getCellsInDisplayRow(1)).toEqual([
+            [1, 0],
+            [1, 2],
+        ]);
+        expect(node.getCellsInDisplayRow(3)).toEqual([
+            [2, 0],
+            [3, 1],
+            [3, 2],
+        ]);
+        expect(node.getCellsInDisplayRange([1, 1], [3, 1])).toEqual([
+            [1, 0],
+            [2, 1],
+            [3, 1],
+        ]);
+    });
+});

package/dist/tables/types.d.ts

@@ -0,0 +1,25 @@
+export declare const TYPE_TABLE = "gridTable";
+export declare const TYPE_HEADER = "gtHeader";
+export declare const TYPE_BODY = "gtBody";
+export declare const TYPE_FOOTER = "gtFooter";
+export declare const TYPE_ROW = "gtRow";
+export declare const TYPE_CELL = "gtCell";
+export declare const TYPE_ROW_LINE = "gtRowLine";
+export declare const TYPE_GRID_DIVIDER = "gtGridDivider";
+export type MarkdownTable = {
+    header: string[];
+    align: Array<"left" | "center" | "right" | null>;
+    rows: string[][];
+};
+export type MarkdownTableWidgetOptions = {
+    markdown: string;
+    onChange: (nextMarkdown: string) => void;
+    onDelete?: () => void;
+    onSource?: () => void;
+};
+export type MarkdownGridTableWidgetOptions = MarkdownTableWidgetOptions;
+export type TableExtensionProps = {
+    bindEnter: boolean;
+    bindTab: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tables/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,cAAc,CAAC;AACtC,eAAO,MAAM,WAAW,aAAa,CAAC;AACtC,eAAO,MAAM,SAAS,WAAW,CAAC;AAClC,eAAO,MAAM,WAAW,aAAa,CAAC;AACtC,eAAO,MAAM,QAAQ,UAAU,CAAC;AAChC,eAAO,MAAM,SAAS,WAAW,CAAC;AAClC,eAAO,MAAM,aAAa,cAAc,CAAC;AACzC,eAAO,MAAM,iBAAiB,kBAAkB,CAAC;AAEjD,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC;IACjD,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,0BAA0B,CAAC;AAExE,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC"}

package/dist/tables/types.js

@@ -0,0 +1,8 @@
+export const TYPE_TABLE = "gridTable";
+export const TYPE_HEADER = "gtHeader";
+export const TYPE_BODY = "gtBody";
+export const TYPE_FOOTER = "gtFooter";
+export const TYPE_ROW = "gtRow";
+export const TYPE_CELL = "gtCell";
+export const TYPE_ROW_LINE = "gtRowLine";
+export const TYPE_GRID_DIVIDER = "gtGridDivider";

package/dist/tables/utils.d.ts

@@ -0,0 +1,4 @@
+import { cn } from "@lapismd/mira/ui";
+export { cn };
+export declare function toHtml(markdown: string): Promise<string>;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/tables/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAOtC,OAAO,EAAE,EAAE,EAAE,CAAC;AAEd,wBAAsB,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAQ9D"}

package/dist/tables/utils.js

@@ -0,0 +1,16 @@
+import { cn } from "@lapismd/mira/ui";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+export { cn };
+export async function toHtml(markdown) {
+    const file = await unified()
+        .use(remarkParse)
+        .use(remarkGfm)
+        .use(remarkRehype)
+        .use(rehypeStringify)
+        .process(markdown);
+    return String(file);
+}

package/dist/tables/widgets/grid-table-widget.d.ts

@@ -0,0 +1,3 @@
+import type { MarkdownGridTableWidgetOptions } from "../types";
+export declare function createMarkdownGridTableWidget({ markdown, onChange, onDelete, onSource, }: MarkdownGridTableWidgetOptions): HTMLElement;
+//# sourceMappingURL=grid-table-widget.d.ts.map

package/dist/tables/widgets/grid-table-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-table-widget.d.ts","sourceRoot":"","sources":["../../../src/tables/widgets/grid-table-widget.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,UAAU,CAAC;AAG/D,wBAAgB,6BAA6B,CAAC,EAC5C,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,8BAA8B,GAAG,WAAW,CAyB9C"}

package/dist/tables/widgets/grid-table-widget.js

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import { mount } from "svelte";
+import GridEditorTable from "../grid-editor-table.svelte";
+import { GridTableNode } from "../grid-table";
+import { createSourceButton } from "./source-button";
+export function createMarkdownGridTableWidget({ markdown, onChange, onDelete, onSource, }) {
+    const root = document.createElement("div");
+    root.className =
+        "mira-table-widget-shell mira-grid-table-widget-shell relative";
+    root.contentEditable = "false";
+    if (onSource) {
+        root.append(createSourceButton(onSource));
+    }
+    const node = GridTableNode.fromMarkdown(markdown) ??
+        GridTableNode.fromMarkdown("+---+\n|   |\n+---+") ??
+        new GridTableNode();
+    mount(GridEditorTable, {
+        target: root,
+        props: {
+            node,
+            onChange: (nextMarkdown) => onChange(nextMarkdown.trimEnd()),
+            onDelete: () => onDelete?.(),
+        },
+    });
+    return root;
+}

package/dist/tables/widgets/pipe-table-widget.d.ts

@@ -0,0 +1,3 @@
+import type { MarkdownTableWidgetOptions } from "../types";
+export declare function createMarkdownTableWidget({ markdown, onChange, onDelete, onSource, }: MarkdownTableWidgetOptions): HTMLElement;
+//# sourceMappingURL=pipe-table-widget.d.ts.map

package/dist/tables/widgets/pipe-table-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipe-table-widget.d.ts","sourceRoot":"","sources":["../../../src/tables/widgets/pipe-table-widget.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAG3D,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,0BAA0B,GAAG,WAAW,CAwB1C"}

package/dist/tables/widgets/pipe-table-widget.js

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import { mount } from "svelte";
+import EditorTable from "../editor-table.svelte";
+import { TableNode } from "../table-node";
+import { createSourceButton } from "./source-button";
+export function createMarkdownTableWidget({ markdown, onChange, onDelete, onSource, }) {
+    const root = document.createElement("div");
+    root.className = "mira-table-widget-shell relative";
+    root.contentEditable = "false";
+    if (onSource) {
+        root.append(createSourceButton(onSource));
+    }
+    const node = TableNode.fromMarkdown(markdown) ??
+        TableNode.fromMarkdown("|  |\n| --- |\n|  |") ??
+        new TableNode();
+    mount(EditorTable, {
+        target: root,
+        props: {
+            node,
+            onChange: (nextMarkdown) => onChange(nextMarkdown.trimEnd()),
+            onDelete: () => onDelete?.(),
+        },
+    });
+    return root;
+}

package/dist/tables/widgets/source-button.d.ts

@@ -0,0 +1,2 @@
+export declare function createSourceButton(onSource: () => void): HTMLButtonElement;
+//# sourceMappingURL=source-button.d.ts.map

package/dist/tables/widgets/source-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-button.d.ts","sourceRoot":"","sources":["../../../src/tables/widgets/source-button.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,iBAAiB,CAmB1E"}

package/dist/tables/widgets/source-button.js

@@ -0,0 +1,20 @@
+export function createSourceButton(onSource) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className =
+        "markdown-widget-select-control mira-table-widget__source-toggle";
+    button.title = "Edit table source";
+    button.setAttribute("aria-label", "Edit table source");
+    button.innerHTML =
+        '<svg class="svg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>';
+    button.addEventListener("mousedown", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    });
+    button.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onSource();
+    });
+    return button;
+}

package/dist/tables/widgets/source-button.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=source-button.test.d.ts.map

package/dist/tables/widgets/source-button.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-button.test.d.ts","sourceRoot":"","sources":["../../../src/tables/widgets/source-button.test.ts"],"names":[],"mappings":""}

package/dist/tables/widgets/source-button.test.js

@@ -0,0 +1,11 @@
+import { describe, expect, it, vi } from "vitest";
+import { createSourceButton } from "./source-button";
+describe("table source button", () => {
+    it("calls the source callback from the widget affordance", () => {
+        const onSource = vi.fn();
+        const button = createSourceButton(onSource);
+        button.click();
+        expect(button.className).toContain("mira-table-widget__source-toggle");
+        expect(onSource).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/test-setup.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAmCA,OAAO,EAAE,CAAC"}

package/dist/test-setup.js

@@ -0,0 +1,31 @@
+class TestResizeObserver {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+}
+globalThis.ResizeObserver ??= TestResizeObserver;
+function emptyDomRect() {
+    return {
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        width: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+    };
+}
+function emptyDomRectList() {
+    return {
+        length: 0,
+        item: () => null,
+        [Symbol.iterator]: function* iterator() { },
+    };
+}
+if (typeof Range !== "undefined") {
+    Range.prototype.getClientRects ??= emptyDomRectList;
+    Range.prototype.getBoundingClientRect ??= emptyDomRect;
+}
+export {};

package/dist/themes/_contract.css

@@ -0,0 +1,88 @@
+@import "@fontsource/source-code-pro/400.css";
+@import "@fontsource/source-code-pro/600.css";
+
+:root {
+  color-scheme: light dark;
+  --mira-font-sans:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  --mira-font-mono:
+    "Source Code Pro", ui-monospace, SFMono-Regular, Consolas, monospace;
+  --mira-font-size: 14px;
+  --mira-line-height: 1.6;
+  --mira-indent-size: 4;
+  --mira-indent-unit: 0.5625em;
+  --mira-list-indent: calc(var(--mira-indent-unit) * var(--mira-indent-size));
+  --mira-heading-color: var(--mira-foreground);
+  --mira-h1-color: var(--mira-heading-color);
+  --mira-h2-color: var(--mira-heading-color);
+  --mira-h3-color: var(--mira-heading-color);
+  --mira-h4-color: var(--mira-heading-color);
+  --mira-h5-color: var(--mira-heading-color);
+  --mira-h6-color: var(--mira-heading-color);
+  --mira-h1-font: var(--mira-font-sans);
+  --mira-h2-font: var(--mira-font-sans);
+  --mira-h3-font: var(--mira-font-sans);
+  --mira-h4-font: var(--mira-font-sans);
+  --mira-h5-font: var(--mira-font-sans);
+  --mira-h6-font: var(--mira-font-sans);
+  --mira-h1-line-height: 1.2;
+  --mira-h2-line-height: 1.2;
+  --mira-h3-line-height: 1.3;
+  --mira-h4-line-height: 1.4;
+  --mira-h5-line-height: 1.5;
+  --mira-h6-line-height: 1.5;
+  --mira-h1-size: 1.802em;
+  --mira-h2-size: 1.602em;
+  --mira-h3-size: 1.424em;
+  --mira-h4-size: 1.266em;
+  --mira-h5-size: 1.125em;
+  --mira-h6-size: 1em;
+  --mira-h1-style: normal;
+  --mira-h2-style: normal;
+  --mira-h3-style: normal;
+  --mira-h4-style: normal;
+  --mira-h5-style: normal;
+  --mira-h6-style: normal;
+  --mira-h1-variant: normal;
+  --mira-h2-variant: normal;
+  --mira-h3-variant: normal;
+  --mira-h4-variant: normal;
+  --mira-h5-variant: normal;
+  --mira-h6-variant: normal;
+  --mira-h1-weight: 700;
+  --mira-h2-weight: 600;
+  --mira-h3-weight: 600;
+  --mira-h4-weight: 600;
+  --mira-h5-weight: 600;
+  --mira-h6-weight: 600;
+  --mira-checkbox-radius: 4px;
+  --mira-checkbox-size: var(--mira-font-size);
+  --mira-checkbox-marker: var(--mira-accent-foreground);
+  --mira-checkbox-color: var(--mira-accent);
+  --mira-checkbox-border: var(--mira-border-strong);
+  --mira-checkbox-border-hover: var(--mira-muted-foreground);
+  --mira-editor-padding: 2rem;
+  --mira-preview-padding: 2rem;
+  --mira-radius: 6px;
+}
+
+:is(.dark, .theme-dark) {
+  color-scheme: dark;
+}
+
+:is(.light, .theme-light) {
+  color-scheme: light;
+}
+
+[data-mira-color-mode="system"] {
+  color-scheme: light dark;
+}
+
+[data-mira-color-mode="dark"] {
+  color-scheme: dark;
+}
+
+[data-mira-color-mode="light"] {
+  color-scheme: light;
+}

package/dist/themes/_mira-palette.css

@@ -0,0 +1,187 @@
+:root,
+[data-mira-theme~="mira"] {
+  --mira-background: light-dark(#fbfbfc, #17181c);
+  --mira-foreground: light-dark(#1d1d20, #f1f3f7);
+  --mira-muted: light-dark(#f0f1f3, #24262c);
+  --mira-muted-foreground: light-dark(#63656f, #a7adba);
+  --mira-border: light-dark(#d8dbe1, #353944);
+  --mira-border-strong: light-dark(#aeb4bf, #555d6d);
+  --mira-accent: light-dark(#0f766e, #2dd4bf);
+  --mira-accent-foreground: light-dark(#ffffff, #042f2e);
+  --mira-accent-soft: light-dark(
+    color-mix(in oklab, #0f766e 11%, transparent),
+    color-mix(in oklab, #2dd4bf 13%, transparent)
+  );
+  --mira-focus-ring: var(--mira-accent);
+  --mira-danger: light-dark(#dc2626, #f87171);
+  --mira-active-line-background: transparent;
+  --mira-selection: light-dark(
+    color-mix(in oklab, #0f766e 25%, transparent),
+    color-mix(in oklab, #2dd4bf 30%, transparent)
+  );
+  --mira-popover: light-dark(#ffffff, #202228);
+  --mira-popover-foreground: var(--mira-foreground);
+  --mira-editor-background: light-dark(#ffffff, #1b1d22);
+  --mira-preview-background: light-dark(#ffffff, #1b1d22);
+  --mira-code-background: light-dark(#f4f5f7, #111318);
+  --mira-code-foreground: light-dark(#24262d, #edf0f5);
+  --mira-syntax-heading: light-dark(#0f766e, #5eead4);
+  --mira-syntax-link: light-dark(#0b6fcb, #7cc4ff);
+  --mira-syntax-comment: light-dark(#697386, #8b95a7);
+  --mira-syntax-keyword: light-dark(#7c3aed, #c4b5fd);
+  --mira-syntax-string: light-dark(#0f766e, #5eead4);
+  --mira-syntax-number: light-dark(#b45309, #fbbf24);
+  --mira-syntax-variable: light-dark(#0b6fcb, #93c5fd);
+  --mira-syntax-property: light-dark(#9a3412, #fca5a5);
+  --mira-syntax-type: light-dark(#8b3a94, #f0abfc);
+  --mira-syntax-operator: light-dark(#475569, #cbd5e1);
+  --mira-syntax-invalid: light-dark(#dc2626, #f87171);
+  --mira-syntax-invalid-background: light-dark(#fee2e2, #4a1d24);
+  --mira-callout-background: light-dark(#f7faf9, #162522);
+  --_mira-callout-bug-light: 220, 38, 38;
+  --_mira-callout-bug-dark: 248, 113, 113;
+  --_mira-callout-default-light: 8, 109, 221;
+  --_mira-callout-default-dark: 125, 188, 255;
+  --_mira-callout-example-light: 124, 58, 237;
+  --_mira-callout-example-dark: 196, 181, 253;
+  --_mira-callout-question-light: 213, 138, 0;
+  --_mira-callout-question-dark: 251, 191, 36;
+  --_mira-callout-quote-light: 107, 114, 128;
+  --_mira-callout-quote-dark: 156, 163, 175;
+  --_mira-callout-success-light: 0, 153, 102;
+  --_mira-callout-success-dark: 94, 234, 212;
+  --_mira-callout-summary-light: 0, 114, 178;
+  --_mira-callout-summary-dark: 103, 232, 249;
+  --_mira-widget-shadow-light: 0 8px 28px rgb(15 23 42 / 8%);
+  --_mira-widget-shadow-dark: 0 10px 34px rgb(0 0 0 / 32%);
+  --mira-callout-bug: var(--_mira-callout-bug-light);
+  --mira-callout-default: var(--_mira-callout-default-light);
+  --mira-callout-error: var(--mira-callout-bug);
+  --mira-callout-example: var(--_mira-callout-example-light);
+  --mira-callout-info: var(--mira-callout-default);
+  --mira-callout-question: var(--_mira-callout-question-light);
+  --mira-callout-quote: var(--_mira-callout-quote-light);
+  --mira-callout-success: var(--_mira-callout-success-light);
+  --mira-callout-summary: var(--_mira-callout-summary-light);
+  --mira-callout-tip: var(--mira-callout-success);
+  --mira-callout-warning: var(--mira-callout-question);
+  --mira-tag-background: light-dark(#e6f4f1, #163a36);
+  --mira-tag-foreground: light-dark(#0f5f59, #8ee9dd);
+  --mira-link: light-dark(#0b6fcb, #7cc4ff);
+  --mira-frontmatter-background: light-dark(#f7f8fa, #202228);
+  --mira-frontmatter-label: light-dark(#4b5563, #c2c8d2);
+  --mira-widget-background: light-dark(#ffffff, #1f2229);
+  --mira-widget-shadow: var(--_mira-widget-shadow-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root,
+  [data-mira-theme~="mira"] {
+    --mira-callout-bug: var(--_mira-callout-bug-dark);
+    --mira-callout-default: var(--_mira-callout-default-dark);
+    --mira-callout-error: var(--mira-callout-bug);
+    --mira-callout-example: var(--_mira-callout-example-dark);
+    --mira-callout-info: var(--mira-callout-default);
+    --mira-callout-question: var(--_mira-callout-question-dark);
+    --mira-callout-quote: var(--_mira-callout-quote-dark);
+    --mira-callout-success: var(--_mira-callout-success-dark);
+    --mira-callout-summary: var(--_mira-callout-summary-dark);
+    --mira-callout-tip: var(--mira-callout-success);
+    --mira-callout-warning: var(--mira-callout-question);
+    --mira-widget-shadow: var(--_mira-widget-shadow-dark);
+  }
+}
+
+:where(.dark, .theme-dark),
+:where(.dark, .theme-dark) [data-mira-theme~="mira"] {
+  --mira-callout-bug: var(--_mira-callout-bug-dark);
+  --mira-callout-default: var(--_mira-callout-default-dark);
+  --mira-callout-error: var(--mira-callout-bug);
+  --mira-callout-example: var(--_mira-callout-example-dark);
+  --mira-callout-info: var(--mira-callout-default);
+  --mira-callout-question: var(--_mira-callout-question-dark);
+  --mira-callout-quote: var(--_mira-callout-quote-dark);
+  --mira-callout-success: var(--_mira-callout-success-dark);
+  --mira-callout-summary: var(--_mira-callout-summary-dark);
+  --mira-callout-tip: var(--mira-callout-success);
+  --mira-callout-warning: var(--mira-callout-question);
+  --mira-widget-shadow: var(--_mira-widget-shadow-dark);
+}
+
+:where(.light, .theme-light),
+:where(.light, .theme-light) [data-mira-theme~="mira"] {
+  --mira-callout-bug: var(--_mira-callout-bug-light);
+  --mira-callout-default: var(--_mira-callout-default-light);
+  --mira-callout-error: var(--mira-callout-bug);
+  --mira-callout-example: var(--_mira-callout-example-light);
+  --mira-callout-info: var(--mira-callout-default);
+  --mira-callout-question: var(--_mira-callout-question-light);
+  --mira-callout-quote: var(--_mira-callout-quote-light);
+  --mira-callout-success: var(--_mira-callout-success-light);
+  --mira-callout-summary: var(--_mira-callout-summary-light);
+  --mira-callout-tip: var(--mira-callout-success);
+  --mira-callout-warning: var(--mira-callout-question);
+  --mira-widget-shadow: var(--_mira-widget-shadow-light);
+}
+
+[data-mira-color-mode="system"] {
+  --mira-callout-bug: var(--_mira-callout-bug-light);
+  --mira-callout-default: var(--_mira-callout-default-light);
+  --mira-callout-error: var(--mira-callout-bug);
+  --mira-callout-example: var(--_mira-callout-example-light);
+  --mira-callout-info: var(--mira-callout-default);
+  --mira-callout-question: var(--_mira-callout-question-light);
+  --mira-callout-quote: var(--_mira-callout-quote-light);
+  --mira-callout-success: var(--_mira-callout-success-light);
+  --mira-callout-summary: var(--_mira-callout-summary-light);
+  --mira-callout-tip: var(--mira-callout-success);
+  --mira-callout-warning: var(--mira-callout-question);
+  --mira-widget-shadow: var(--_mira-widget-shadow-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-mira-color-mode="system"] {
+    --mira-callout-bug: var(--_mira-callout-bug-dark);
+    --mira-callout-default: var(--_mira-callout-default-dark);
+    --mira-callout-error: var(--mira-callout-bug);
+    --mira-callout-example: var(--_mira-callout-example-dark);
+    --mira-callout-info: var(--mira-callout-default);
+    --mira-callout-question: var(--_mira-callout-question-dark);
+    --mira-callout-quote: var(--_mira-callout-quote-dark);
+    --mira-callout-success: var(--_mira-callout-success-dark);
+    --mira-callout-summary: var(--_mira-callout-summary-dark);
+    --mira-callout-tip: var(--mira-callout-success);
+    --mira-callout-warning: var(--mira-callout-question);
+    --mira-widget-shadow: var(--_mira-widget-shadow-dark);
+  }
+}
+
+[data-mira-color-mode="dark"] {
+  --mira-callout-bug: var(--_mira-callout-bug-dark);
+  --mira-callout-default: var(--_mira-callout-default-dark);
+  --mira-callout-error: var(--mira-callout-bug);
+  --mira-callout-example: var(--_mira-callout-example-dark);
+  --mira-callout-info: var(--mira-callout-default);
+  --mira-callout-question: var(--_mira-callout-question-dark);
+  --mira-callout-quote: var(--_mira-callout-quote-dark);
+  --mira-callout-success: var(--_mira-callout-success-dark);
+  --mira-callout-summary: var(--_mira-callout-summary-dark);
+  --mira-callout-tip: var(--mira-callout-success);
+  --mira-callout-warning: var(--mira-callout-question);
+  --mira-widget-shadow: var(--_mira-widget-shadow-dark);
+}
+
+[data-mira-color-mode="light"] {
+  --mira-callout-bug: var(--_mira-callout-bug-light);
+  --mira-callout-default: var(--_mira-callout-default-light);
+  --mira-callout-error: var(--mira-callout-bug);
+  --mira-callout-example: var(--_mira-callout-example-light);
+  --mira-callout-info: var(--mira-callout-default);
+  --mira-callout-question: var(--_mira-callout-question-light);
+  --mira-callout-quote: var(--_mira-callout-quote-light);
+  --mira-callout-success: var(--_mira-callout-success-light);
+  --mira-callout-summary: var(--_mira-callout-summary-light);
+  --mira-callout-tip: var(--mira-callout-success);
+  --mira-callout-warning: var(--mira-callout-question);
+  --mira-widget-shadow: var(--_mira-widget-shadow-light);
+}