@lapismd/mira 0.0.1

package/dist/mode-position.js

@@ -0,0 +1,99 @@
+import { EditorSelection } from "@codemirror/state";
+function visibleAnchor(nodes, viewport) {
+    let best = null;
+    let distance = Number.POSITIVE_INFINITY;
+    for (const node of nodes) {
+        const rect = node.getBoundingClientRect();
+        if (rect.bottom <= viewport.top + 1 || rect.top >= viewport.bottom) {
+            continue;
+        }
+        const nextDistance = Math.abs(rect.top - viewport.top);
+        if (nextDistance < distance) {
+            best = node;
+            distance = nextDistance;
+        }
+    }
+    return best;
+}
+function previewLine(node) {
+    const line = Number.parseInt(node.dataset["line"] ?? "", 10);
+    return Number.isFinite(line) ? line : null;
+}
+export function capturePreviewPosition(scroller) {
+    const viewport = scroller.getBoundingClientRect();
+    const anchor = visibleAnchor(Array.from(scroller.querySelectorAll("[data-line]")), viewport);
+    return {
+        line: anchor ? previewLine(anchor) : null,
+        scrollTop: scroller.scrollTop,
+        target: "editor",
+        topDelta: anchor ? anchor.getBoundingClientRect().top - viewport.top : 0,
+    };
+}
+export function captureEditorPosition(view) {
+    const viewport = view.scrollDOM.getBoundingClientRect();
+    const anchor = visibleAnchor(Array.from(view.dom.querySelectorAll(".cm-lineNumbers .cm-gutterElement")), viewport);
+    const fallbackLine = view.state.doc.lineAt(view.state.selection.main.head).number;
+    const line = Number.parseInt(anchor?.textContent ?? "", 10);
+    const selection = view.state.selection.main;
+    return {
+        line: Number.isFinite(line) ? line : fallbackLine,
+        scrollTop: view.scrollDOM.scrollTop,
+        selection: {
+            anchor: selection.anchor,
+            head: selection.head,
+        },
+        target: "preview",
+        topDelta: anchor ? anchor.getBoundingClientRect().top - viewport.top : 0,
+    };
+}
+export function restorePreviewPosition(scroller, position) {
+    const nodes = Array.from(scroller.querySelectorAll("[data-line]"));
+    const anchor = nodes.find((node) => {
+        const line = previewLine(node);
+        return line !== null && line >= (position.line ?? 1);
+    }) ??
+        [...nodes].reverse().find((node) => previewLine(node) !== null) ??
+        null;
+    if (!anchor) {
+        scroller.scrollTo({ top: Math.max(0, position.scrollTop) });
+        return;
+    }
+    const viewport = scroller.getBoundingClientRect();
+    const rect = anchor.getBoundingClientRect();
+    const anchorTop = scroller.scrollTop + rect.top - viewport.top;
+    scroller.scrollTo({ top: Math.max(0, anchorTop - position.topDelta) });
+}
+export function restoreEditorPosition(view, position) {
+    const lineNumber = Math.min(Math.max(position.line ?? 1, 1), Math.max(view.state.doc.lines, 1));
+    const line = view.state.doc.line(lineNumber);
+    if (position.selection) {
+        view.dispatch({
+            selection: EditorSelection.single(Math.min(position.selection.anchor, view.state.doc.length), Math.min(position.selection.head, view.state.doc.length)),
+        });
+    }
+    const block = view.lineBlockAt(line.from);
+    view.scrollDOM.scrollTo({
+        top: Math.max(0, block.top - position.topDelta),
+    });
+}
+export function captureModeSwitchPosition(previous, next, view, previewScroller) {
+    if (previous === next) {
+        return null;
+    }
+    if (previous === "preview" && next !== "preview") {
+        return previewScroller ? capturePreviewPosition(previewScroller) : null;
+    }
+    if (next === "preview" && previous !== "preview") {
+        return view ? captureEditorPosition(view) : null;
+    }
+    if (next === "split" && previous !== "split") {
+        return previous === "preview"
+            ? previewScroller
+                ? capturePreviewPosition(previewScroller)
+                : null
+            : view
+                ? captureEditorPosition(view)
+                : null;
+    }
+    return null;
+}

package/dist/mode-position.test.d.ts

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

package/dist/mode-position.test.d.ts.map

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

package/dist/mode-position.test.js

@@ -0,0 +1,60 @@
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { captureModeSwitchPosition, capturePreviewPosition, restorePreviewPosition, } from "./mode-position";
+afterEach(() => {
+    document.body.replaceChildren();
+});
+describe("mode position continuity", () => {
+    it("captures the nearest visible preview source line and restores it", () => {
+        const scroller = document.createElement("div");
+        const first = appendAnchor(scroller, 5, -30);
+        const second = appendAnchor(scroller, 12, 20);
+        vi.spyOn(scroller, "getBoundingClientRect").mockReturnValue(rect(0, 100));
+        const scrollTo = vi.fn();
+        Object.defineProperty(scroller, "scrollTo", {
+            configurable: true,
+            value: scrollTo,
+        });
+        scroller.scrollTop = 50;
+        const position = capturePreviewPosition(scroller);
+        expect(position).toMatchObject({ line: 12, topDelta: 20 });
+        vi.mocked(first.getBoundingClientRect).mockReturnValue(rect(-20, 20));
+        vi.mocked(second.getBoundingClientRect).mockReturnValue(rect(40, 80));
+        restorePreviewPosition(scroller, position);
+        expect(scrollTo).toHaveBeenLastCalledWith({ top: 70 });
+    });
+    it("captures the surface that becomes hidden when entering preview or split", () => {
+        const host = document.createElement("div");
+        document.body.append(host);
+        const view = new EditorView({
+            parent: host,
+            state: EditorState.create({ doc: "one\ntwo\nthree" }),
+        });
+        const preview = document.createElement("div");
+        expect(captureModeSwitchPosition("source", "preview", view, preview)?.target).toBe("preview");
+        expect(captureModeSwitchPosition("preview", "split", view, preview)?.target).toBe("editor");
+        expect(captureModeSwitchPosition("live-preview", "source", view, preview)).toBeNull();
+        view.destroy();
+    });
+});
+function appendAnchor(root, line, top) {
+    const anchor = document.createElement("p");
+    anchor.dataset["line"] = `${line}`;
+    vi.spyOn(anchor, "getBoundingClientRect").mockReturnValue(rect(top, top + 20));
+    root.append(anchor);
+    return anchor;
+}
+function rect(top, bottom) {
+    return {
+        bottom,
+        height: bottom - top,
+        left: 0,
+        right: 100,
+        top,
+        width: 100,
+        x: 0,
+        y: top,
+        toJSON: () => ({}),
+    };
+}

package/dist/preview/adobe-gridtables.d.ts

@@ -0,0 +1,11 @@
+declare module "@adobe/remark-gridtables" {
+  import type { Plugin } from "unified";
+
+  const remarkGridTables: Plugin;
+  export default remarkGridTables;
+}
+
+declare module "@adobe/mdast-util-gridtables" {
+  export const TYPE_TABLE: string;
+  export function mdast2hastGridTablesHandler(): (...args: any[]) => any;
+}

package/dist/preview/code-language.d.ts

@@ -0,0 +1,2 @@
+export declare function codeLanguageLabel(className: string): string;
+//# sourceMappingURL=code-language.d.ts.map

package/dist/preview/code-language.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-language.d.ts","sourceRoot":"","sources":["../../src/preview/code-language.ts"],"names":[],"mappings":"AAiDA,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAS3D"}

package/dist/preview/code-language.js

@@ -0,0 +1,58 @@
+const languageLabels = {
+    bash: "Bash",
+    c: "C",
+    cmake: "CMake",
+    conf: "Config",
+    cpp: "C++",
+    cs: "C#",
+    csharp: "C#",
+    css: "CSS",
+    dockerfile: "Dockerfile",
+    go: "Go",
+    html: "HTML",
+    java: "Java",
+    javascript: "JavaScript",
+    js: "JavaScript",
+    json: "JSON",
+    jsx: "JavaScript (JSX)",
+    kotlin: "Kotlin",
+    kt: "Kotlin",
+    less: "Less",
+    markdown: "Markdown",
+    md: "Markdown",
+    php: "PHP",
+    postgres: "PostgreSQL",
+    powershell: "PowerShell",
+    ps1: "PowerShell",
+    py: "Python",
+    python: "Python",
+    rb: "Ruby",
+    rs: "Rust",
+    ruby: "Ruby",
+    rust: "Rust",
+    sass: "Sass",
+    scss: "SCSS",
+    sh: "Shell",
+    shell: "Shell",
+    sql: "SQL",
+    swift: "Swift",
+    text: "Plain Text",
+    toml: "TOML",
+    ts: "TypeScript",
+    tsx: "TypeScript (TSX)",
+    typescript: "TypeScript",
+    xml: "XML",
+    yaml: "YAML",
+    yml: "YAML",
+    zsh: "Zsh",
+};
+export function codeLanguageLabel(className) {
+    const language = /(?:^|\s)language-([^\s]+)/u
+        .exec(className)?.[1]
+        ?.trim()
+        .toLocaleLowerCase();
+    if (!language) {
+        return "";
+    }
+    return languageLabels[language] ?? language;
+}

package/dist/preview/code-language.test.d.ts

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

package/dist/preview/code-language.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-language.test.d.ts","sourceRoot":"","sources":["../../src/preview/code-language.test.ts"],"names":[],"mappings":""}

package/dist/preview/code-language.test.js

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { codeLanguageLabel } from "./code-language";
+describe("code language labels", () => {
+    it("uses readable labels for common fenced-code aliases", () => {
+        expect(codeLanguageLabel("hljs language-ts")).toBe("TypeScript");
+        expect(codeLanguageLabel("language-yml hljs")).toBe("YAML");
+    });
+    it("preserves unknown language ids and omits unlabelled blocks", () => {
+        expect(codeLanguageLabel("hljs language-gleam")).toBe("gleam");
+        expect(codeLanguageLabel("hljs")).toBe("");
+    });
+});

package/dist/preview/components/callout.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { useMarkdownContext } from "../renderer/context.svelte";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import Icon from "./icon.svelte";
+
+  type Props = {
+    type?: string;
+    title?: string;
+    children?: Snippet;
+    ref?: HTMLElement | null;
+    "data-callout"?: string;
+    "data-expand-offset"?: string | number;
+    "data-expandable"?: string;
+    "data-expanded"?: string;
+    "data-icon"?: string;
+    "data-type"?: string;
+  };
+
+  let {
+    type = "note",
+    title,
+    children,
+    ref = $bindable(null),
+    "data-callout": dataCallout,
+    "data-expand-offset": dataExpandOffset,
+    "data-expandable": dataExpandable = "false",
+    "data-expanded": dataExpanded = "false",
+    "data-icon": dataIcon,
+    "data-type": dataType,
+  }: Props = $props();
+
+  const markdown = useMarkdownContext();
+  const calloutType = $derived((dataType ?? dataCallout ?? type).toLowerCase());
+  const expandable = $derived(dataExpandable === "true");
+  const heading = $derived(title || defaultTitle(calloutType));
+  let open = $state(true);
+
+  $effect(() => {
+    open = !expandable || dataExpanded === "true";
+  });
+
+  function toggleOpen(): void {
+    if (!expandable) {
+      return;
+    }
+
+    open = !open;
+    const offset = toNumber(dataExpandOffset);
+    if (offset === null) {
+      return;
+    }
+    const currentMarker = markdown.markdown.slice(offset, offset + 1);
+    if (currentMarker !== "+" && currentMarker !== "-") {
+      return;
+    }
+
+    markdown.onChange?.(open ? "+" : "-", offset, offset + 1);
+  }
+
+  function toNumber(value: string | number | undefined): number | null {
+    if (typeof value === "number") {
+      return Number.isFinite(value) ? value : null;
+    }
+    if (typeof value === "string") {
+      const numberValue = Number(value);
+      return Number.isFinite(numberValue) ? numberValue : null;
+    }
+    return null;
+  }
+
+  function defaultTitle(value: string): string {
+    return `${value.slice(0, 1).toUpperCase()}${value.slice(1)}`;
+  }
+</script>
+
+<aside
+  bind:this={ref}
+  role="note"
+  aria-label={heading}
+  class={`callout mira-callout callout-${calloutType}`}
+  data-callout={calloutType}
+  data-expandable={dataExpandable}
+>
+  {#if expandable}
+    <button
+      type="button"
+      class="callout-title mira-callout__title"
+      aria-expanded={open}
+      data-editable-markdown-ignore-click
+      onclick={toggleOpen}
+    >
+      <span class="callout-icon mira-callout__icon">
+        <Icon name={[`callout-${calloutType}`, dataIcon ?? "info", "info"]} />
+      </span>
+      <span class="callout-title-inner mira-callout__title-inner">
+        {heading}
+      </span>
+      <span class="callout-fold mira-callout__fold">
+        <ChevronRight
+          class="mira-callout__fold-icon"
+          data-open={open}
+          aria-hidden="true"
+        />
+      </span>
+    </button>
+  {:else}
+    <div class="callout-title mira-callout__title">
+      <span class="callout-icon mira-callout__icon">
+        <Icon name={[`callout-${calloutType}`, dataIcon ?? "info", "info"]} />
+      </span>
+      <span class="callout-title-inner mira-callout__title-inner">
+        {heading}
+      </span>
+    </div>
+  {/if}
+
+  {#if open}
+    <div class="callout-content mira-callout__content">
+      {@render children?.()}
+    </div>
+  {/if}
+</aside>

package/dist/preview/components/callout.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+type Props = {
+    type?: string;
+    title?: string;
+    children?: Snippet;
+    ref?: HTMLElement | null;
+    "data-callout"?: string;
+    "data-expand-offset"?: string | number;
+    "data-expandable"?: string;
+    "data-expanded"?: string;
+    "data-icon"?: string;
+    "data-type"?: string;
+};
+declare const Callout: import("svelte").Component<Props, {}, "ref">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;
+//# sourceMappingURL=callout.svelte.d.ts.map

package/dist/preview/components/callout.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/callout.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMpC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAkGJ,QAAA,MAAM,OAAO,8CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/preview/components/checkbox.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import TaskCheckboxControl from "./task-checkbox-control.svelte";
+  import { useAstNode, useMarkdown } from "../renderer/context.svelte";
+  import type { HastNode } from "../renderer/types";
+
+  type PositionedNode = HastNode & {
+    properties?: Record<string, unknown>;
+    position?: {
+      start?: { offset?: number };
+      end?: { offset?: number };
+    };
+  };
+
+  type Props = {
+    class?: string;
+    checked?: boolean | string;
+    disabled?: boolean | string;
+    ref?: HTMLInputElement | null;
+    type?: string;
+    [key: string]: unknown;
+  };
+
+  let {
+    class: className = "",
+    checked: checkedProp = false,
+    disabled: _disabledProp,
+    ref = $bindable(null),
+    type: _type,
+    ...restProps
+  }: Props = $props();
+
+  const node = useAstNode();
+  const markdown = useMarkdown();
+  const parent = $derived(node.parent as PositionedNode | null);
+  const task = $derived((parent?.properties?.["data-task"] || " ") as string);
+  const disabled = $derived(!markdown.onChange);
+  let checked = $state(false);
+
+  const position = $derived({
+    from:
+      parent?.position?.start?.offset ??
+      numericProperty(parent?.properties?.["data-offset"]) ??
+      -1,
+    to:
+      parent?.position?.end?.offset ??
+      numericProperty(parent?.properties?.["data-offset-end"]) ??
+      -1,
+  });
+
+  const offset = $derived.by(() => {
+    let { from, to } = position;
+    let value = "";
+    let content = "";
+
+    if (from !== -1 && to !== -1) {
+      const marker = findTaskMarker(markdown.markdown, from, to);
+      if (marker) {
+        return marker;
+      }
+    }
+
+    return { from, to: from + 1, value, content };
+  });
+
+  $effect(() => {
+    checked = isChecked(checkedProp);
+  });
+
+  function isChecked(value: boolean | string | undefined): boolean {
+    return value === true || value === "" || value === "true";
+  }
+
+  function numericProperty(value: unknown): number | undefined {
+    if (typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string" && value.trim() !== "") {
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : undefined;
+    }
+    return undefined;
+  }
+
+  function findTaskMarker(
+    source: string,
+    from: number,
+    to: number,
+  ): { from: number; to: number; value: string; content: string } | null {
+    const lineStart = source.lastIndexOf("\n", Math.max(0, from - 1)) + 1;
+    const nextLine = source.indexOf("\n", from);
+    const lineEnd = nextLine === -1 ? source.length : nextLine;
+    const content = source.slice(lineStart, Math.max(lineEnd, to));
+    const match = content.match(/^(\s*(?:>\s*)*(?:[*+-]|\d+[.)])\s*\[)(.)\]/u);
+
+    if (!match) {
+      return null;
+    }
+
+    const markerFrom = lineStart + (match[1]?.length ?? 0);
+    return {
+      from: markerFrom,
+      to: markerFrom + 1,
+      value: (match[2] ?? " ").toLowerCase(),
+      content,
+    };
+  }
+
+  function applyTaskValue(value: string): void {
+    checked = value.trim().length > 0;
+    if (ref?.parentElement) {
+      ref.parentElement.dataset.task = value;
+    }
+    if (parent?.properties) {
+      parent.properties["data-task"] = value;
+    }
+    if (node.node.type === "element") {
+      node.node.properties ??= {};
+      node.node.properties.checked = checked;
+    }
+    markdown.onChange?.(value, offset.from, offset.to);
+  }
+
+  function onCheckedChange(value: boolean): void {
+    applyTaskValue(value ? "x" : " ");
+  }
+</script>
+
+{#if disabled}
+  <input
+    bind:this={ref}
+    {...restProps}
+    class={`task-list-item-checkbox ${className}`.trim()}
+    type="checkbox"
+    aria-label="Toggle task"
+    data-task={task}
+    {checked}
+    {disabled}
+  />
+{:else}
+  <span class="task-list-label" data-task={task}>
+    <TaskCheckboxControl
+      bind:ref
+      {...restProps}
+      checkboxClass={className}
+      {task}
+      {checked}
+      {onCheckedChange}
+      onTaskChange={applyTaskValue}
+    />
+  </span>
+{/if}

package/dist/preview/components/checkbox.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    class?: string;
+    checked?: boolean | string;
+    disabled?: boolean | string;
+    ref?: HTMLInputElement | null;
+    type?: string;
+    [key: string]: unknown;
+};
+declare const Checkbox: import("svelte").Component<Props, {}, "ref">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=checkbox.svelte.d.ts.map

package/dist/preview/components/checkbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/checkbox.svelte.ts"],"names":[],"mappings":"AAgBE,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AA2HJ,QAAA,MAAM,QAAQ,8CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}