@lapismd/mira 0.0.1

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

@@ -0,0 +1,18 @@
+import { FrontmatterController, type FrontmatterPropertyManager } from "./frontmatter-utils";
+import type { MiraFileAdapter } from "@lapismd/mira/extensions";
+type Props = {
+    controller?: FrontmatterController;
+    propertyManager?: FrontmatterPropertyManager;
+    frontmatter?: string;
+    value?: string;
+    open?: boolean;
+    showChrome?: boolean;
+    fileAdapter?: MiraFileAdapter;
+    ref?: HTMLElement | null;
+    "data-offset"?: string | number;
+    "data-offset-end"?: string | number;
+};
+declare const Frontmatter: import("svelte").Component<Props, {}, "ref">;
+type Frontmatter = ReturnType<typeof Frontmatter>;
+export default Frontmatter;
+//# sourceMappingURL=frontmatter.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frontmatter.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/frontmatter.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EASH,qBAAqB,EAIrB,KAAK,0BAA0B,EAChC,MAAM,qBAAqB,CAAC;AAQ/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAO9D,KAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrC,CAAC;AAgpBJ,QAAA,MAAM,WAAW,8CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/preview/components/icon.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  type Props = {
+    name?: string | string[] | null;
+    class?: string;
+    ref?: SVGSVGElement | null;
+  };
+
+  const iconNames = new Set([
+    "at-sign",
+    "binary",
+    "bookmark",
+    "book-open",
+    "braces",
+    "brackets",
+    "bug",
+    "calendar",
+    "check",
+    "check-square",
+    "chevron-right",
+    "circle-check",
+    "circle-help",
+    "clipboard-paste",
+    "clipboard-list",
+    "clock",
+    "copy",
+    "file-question",
+    "flame",
+    "hash",
+    "info",
+    "list",
+    "list-tree",
+    "pencil",
+    "plus",
+    "quote",
+    "scissors",
+    "tags",
+    "text",
+    "triangle-alert",
+    "trash-2",
+    "x",
+    "zap",
+  ]);
+
+  let { name, class: className = "", ref = $bindable(null) }: Props = $props();
+
+  const normalizedName = $derived(
+    Array.isArray(name)
+      ? (name.find((item) => iconNames.has(normalizeIconName(item))) ?? "info")
+      : (name ?? "info"),
+  );
+  const icon = $derived(normalizeIconName(normalizedName));
+
+  function normalizeIconName(value: string): string {
+    return value.replace(/^lucide-/, "").replace(/^callout-/, "");
+  }
+</script>
+
+<svg
+  bind:this={ref}
+  class={`mira-icon ${className}`.trim()}
+  aria-hidden="true"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  {#if icon === "tags"}
+    <path
+      d="M13 5h6v6l-7.5 7.5a2 2 0 0 1-2.8 0L5.5 15.3a2 2 0 0 1 0-2.8L13 5Z"
+    />
+    <path d="M16 8h.01" />
+    <path d="M6 6l-4 4 6 6" />
+  {:else if icon === "hash"}
+    <path d="M4 9h16" />
+    <path d="M4 15h16" />
+    <path d="M10 3 8 21" />
+    <path d="m16 3-2 18" />
+  {:else if icon === "at-sign"}
+    <circle cx="12" cy="12" r="4" />
+    <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" />
+  {:else if icon === "list"}
+    <path d="M8 6h13" />
+    <path d="M8 12h13" />
+    <path d="M8 18h13" />
+    <path d="M3 6h.01" />
+    <path d="M3 12h.01" />
+    <path d="M3 18h.01" />
+  {:else if icon === "list-tree"}
+    <path d="M21 12h-8" />
+    <path d="M21 6H8" />
+    <path d="M21 18h-8" />
+    <path d="M3 6v4a2 2 0 0 0 2 2h3" />
+    <path d="M3 10v6a2 2 0 0 0 2 2h3" />
+  {:else if icon === "brackets"}
+    <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+    <path d="M16 3h3a2 2 0 0 1 2 2v3" />
+    <path d="M8 21H5a2 2 0 0 1-2-2v-3" />
+    <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+  {:else if icon === "braces"}
+    <path
+      d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1"
+    />
+    <path
+      d="M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1"
+    />
+  {:else if icon === "text"}
+    <path d="M17 6.1H3" />
+    <path d="M21 12.1H3" />
+    <path d="M15.1 18H3" />
+  {:else if icon === "binary"}
+    <rect x="14" y="14" width="4" height="6" rx="2" />
+    <rect x="6" y="4" width="4" height="6" rx="2" />
+    <path d="M6 20h4" />
+    <path d="M8 20v-6" />
+    <path d="M14 10h4" />
+    <path d="M16 10V4" />
+  {:else if icon === "check-square"}
+    <path d="M9 11l3 3L22 4" />
+    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
+  {:else if icon === "calendar"}
+    <path d="M8 2v4" />
+    <path d="M16 2v4" />
+    <rect x="3" y="4" width="18" height="18" rx="2" />
+    <path d="M3 10h18" />
+  {:else if icon === "clock"}
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 6v6l4 2" />
+  {:else if icon === "file-question"}
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+    <path d="M14 2v6h6" />
+    <path d="M10 13a2 2 0 1 1 4 0c0 2-2 1.75-2 4" />
+    <path d="M12 20h.01" />
+  {:else if icon === "pencil"}
+    <path d="M12 20h9" />
+    <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
+  {:else if icon === "plus"}
+    <path d="M5 12h14" />
+    <path d="M12 5v14" />
+  {:else if icon === "clipboard-list"}
+    <rect x="8" y="2" width="8" height="4" rx="1" />
+    <path
+      d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+    />
+    <path d="M8 11h8" />
+    <path d="M8 16h8" />
+  {:else if icon === "clipboard-paste"}
+    <path d="M15 2H9a1 1 0 0 0-1 1v2h8V3a1 1 0 0 0-1-1Z" />
+    <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6" />
+    <path d="M16 4h2a2 2 0 0 1 2 2v7" />
+    <path d="m13 18 3 3 5-5" />
+  {:else if icon === "copy"}
+    <rect x="9" y="9" width="13" height="13" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  {:else if icon === "scissors"}
+    <circle cx="6" cy="7" r="3" />
+    <path d="m8.7 8.3 10.6 6.4" />
+    <circle cx="6" cy="17" r="3" />
+    <path d="m8.7 15.7 10.6-6.4" />
+  {:else if icon === "trash-2"}
+    <path d="M3 6h18" />
+    <path d="M8 6V4h8v2" />
+    <path d="m19 6-1 14H6L5 6" />
+    <path d="M10 11v5" />
+    <path d="M14 11v5" />
+  {:else if icon === "circle-check"}
+    <circle cx="12" cy="12" r="10" />
+    <path d="m9 12 2 2 4-4" />
+  {:else if icon === "flame"}
+    <path
+      d="M8.5 14.5A4 4 0 0 0 12 21a4 4 0 0 0 4-4c0-3-2-4-2-7 0-2 1-4 1-4s-5 2-6 6c-1-2-2-3-2-3s-.5 2 .5 5.5Z"
+    />
+  {:else if icon === "check"}
+    <path d="M20 6 9 17l-5-5" />
+  {:else if icon === "chevron-right"}
+    <path d="m9 18 6-6-6-6" />
+  {:else if icon === "circle-help"}
+    <circle cx="12" cy="12" r="10" />
+    <path d="M9.1 9a3 3 0 1 1 5.8 1c-.7 1.2-2.1 1.4-2.7 2.7" />
+    <path d="M12 17h.01" />
+  {:else if icon === "triangle-alert"}
+    <path
+      d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z"
+    />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  {:else if icon === "x"}
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  {:else if icon === "zap"}
+    <path d="M13 2 3 14h9l-1 8 10-12h-9Z" />
+  {:else if icon === "bug"}
+    <path d="M8 2l1.9 1.9" />
+    <path d="M14.1 3.9 16 2" />
+    <path d="M9 7h6" />
+    <path d="M12 7v14" />
+    <path d="M8 12H2" />
+    <path d="M22 12h-6" />
+    <path d="M7 17H3" />
+    <path d="M21 17h-4" />
+    <path d="M8 7a4 4 0 0 0-4 4v3a8 8 0 0 0 16 0v-3a4 4 0 0 0-4-4Z" />
+  {:else if icon === "quote"}
+    <path
+      d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2c0 4-1 6-3 8Z"
+    />
+    <path
+      d="M15 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2c0 4-1 6-3 8Z"
+    />
+  {:else if icon === "bookmark"}
+    <path d="M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" />
+  {:else if icon === "book-open"}
+    <path d="M12 7v14" />
+    <path
+      d="M3 18a1 1 0 0 1-1-1V5a2 2 0 0 1 2-2h5a3 3 0 0 1 3 3v15a3 3 0 0 0-3-3Z"
+    />
+    <path
+      d="M21 18a1 1 0 0 0 1-1V5a2 2 0 0 0-2-2h-5a3 3 0 0 0-3 3v15a3 3 0 0 1 3-3Z"
+    />
+  {:else}
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4" />
+    <path d="M12 8h.01" />
+  {/if}
+</svg>

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

@@ -0,0 +1,9 @@
+type Props = {
+    name?: string | string[] | null;
+    class?: string;
+    ref?: SVGSVGElement | null;
+};
+declare const Icon: import("svelte").Component<Props, {}, "ref">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;
+//# sourceMappingURL=icon.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/icon.svelte.ts"],"names":[],"mappings":"AAGE,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CAC5B,CAAC;AAmMJ,QAAA,MAAM,IAAI,8CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/preview/components/icon.test.d.ts

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

package/dist/preview/components/icon.test.d.ts.map

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

package/dist/preview/components/icon.test.js

@@ -0,0 +1,20 @@
+import { mount, tick, unmount } from "svelte";
+import { describe, expect, it } from "vitest";
+import Icon from "./icon.svelte";
+describe("portable preview icon", () => {
+    it("renders canonical Lucide hash geometry", async () => {
+        const target = document.createElement("div");
+        document.body.append(target);
+        const component = mount(Icon, {
+            target,
+            props: { name: "lucide-hash" },
+        });
+        await tick();
+        expect(target.querySelector('path[d="M4 9h16"]')).not.toBeNull();
+        expect(target.querySelector('path[d="M4 15h16"]')).not.toBeNull();
+        expect(target.querySelector('path[d="M10 3 8 21"]')).not.toBeNull();
+        expect(target.querySelector('path[d="m16 3-2 18"]')).not.toBeNull();
+        await unmount(component);
+        target.remove();
+    });
+});

package/dist/preview/components/image.svelte

@@ -0,0 +1,266 @@
+<script lang="ts">
+  import {
+    parseMiraFileTarget,
+    type MiraFileRef,
+  } from "@lapismd/mira/extensions";
+  import XIcon from "@lucide/svelte/icons/x";
+  import { useMarkdownContext } from "../renderer/context.svelte";
+  import { isImageDataUri } from "../remark";
+  import { parseMiraImageDetails } from "../embed-target";
+
+  type Props = {
+    src?: string;
+    alt?: string;
+    title?: string;
+    ref?: HTMLImageElement | null;
+  };
+
+  let { src = "", alt = "", title, ref = $bindable(null) }: Props = $props();
+  const markdown = useMarkdownContext();
+  let adapterSrc = $state<string | null>(null);
+  let resolvedFile = $state<MiraFileRef | null>(null);
+  let dialogEl = $state<HTMLDialogElement | null>(null);
+  let failed = $state(false);
+  let targetRevision = $state(0);
+  let contentRevision = $state(0);
+
+  const target = $derived(parseMiraFileTarget(src, markdown.sourcePath));
+  const imageDetails = $derived(parseMiraImageDetails(alt));
+  const resolvedAlt = $derived(imageDetails.alt);
+
+  const resolvedSrc = $derived(
+    adapterSrc ??
+      (isImageDataUri(src)
+        ? src
+        : (markdown.assetResolver?.({
+            src,
+            alt: resolvedAlt,
+            sourcePath: markdown.sourcePath,
+          }) ?? src)),
+  );
+
+  const trimmedAlt = $derived(resolvedAlt.trim());
+  const expandLabel = $derived(
+    trimmedAlt ? `Expand image: ${trimmedAlt}` : "Expand image",
+  );
+  const dialogLabel = $derived(
+    trimmedAlt ? `Image preview: ${trimmedAlt}` : "Image preview",
+  );
+
+  $effect(() => {
+    const adapter = markdown.fileAdapter;
+    targetRevision;
+    if (!adapter || !src || isExternalSrc(src)) {
+      adapterSrc = null;
+      resolvedFile = null;
+      return;
+    }
+
+    let cancelled = false;
+    adapterSrc = null;
+    resolvedFile = null;
+    Promise.resolve(
+      adapter.resolveLink({
+        ...target,
+      }),
+    ).then(
+      (file: MiraFileRef | null) => {
+        if (!cancelled) {
+          resolvedFile = file;
+        }
+      },
+      () => {
+        if (!cancelled) {
+          resolvedFile = null;
+          adapterSrc = null;
+        }
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  $effect(() => {
+    const adapter = markdown.fileAdapter;
+    const file = resolvedFile;
+    if (!adapter?.watchTarget || !src || isExternalSrc(src)) {
+      return;
+    }
+    return adapter.watchTarget({ ...target, file }, () => {
+      targetRevision += 1;
+    });
+  });
+
+  $effect(() => {
+    const adapter = markdown.fileAdapter;
+    const file = resolvedFile;
+    if (!adapter?.watchFile || !file) {
+      return;
+    }
+    return adapter.watchFile(file, () => {
+      contentRevision += 1;
+    });
+  });
+
+  $effect(() => {
+    contentRevision;
+    if (resolvedFile && markdown.fileAdapter?.readAssetUrl) {
+      let cancelled = false;
+      Promise.resolve(markdown.fileAdapter.readAssetUrl(resolvedFile)).then(
+        (url) => {
+          if (!cancelled) {
+            adapterSrc = url ?? null;
+          }
+        },
+        () => {
+          if (!cancelled) {
+            adapterSrc = null;
+          }
+        },
+      );
+      return () => {
+        cancelled = true;
+      };
+    }
+  });
+
+  $effect(() => {
+    resolvedSrc;
+    failed = false;
+  });
+
+  function isExternalSrc(value: string): boolean {
+    return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(value.trim());
+  }
+
+  // Native <dialog> renders in the browser's top layer, so its DOM position
+  // doesn't affect stacking or visibility. Portalling to <body> keeps it out
+  // of inline markdown content (images can render inside a <p>), where a
+  // <dialog> element would otherwise be an invalid child.
+  function portalToBody(node: HTMLElement) {
+    if (typeof document === "undefined") {
+      return {};
+    }
+    document.body.appendChild(node);
+    return {
+      destroy() {
+        node.remove();
+      },
+    };
+  }
+
+  function openLightbox(): void {
+    if (!resolvedSrc) {
+      return;
+    }
+    dialogEl?.showModal();
+  }
+
+  function closeLightbox(): void {
+    dialogEl?.close();
+  }
+
+  function handleDialogClick(event: MouseEvent): void {
+    if (event.target === dialogEl) {
+      closeLightbox();
+    }
+  }
+</script>
+
+<span
+  class="mira-markdown-image-root"
+  data-image-state={failed ? "broken" : "ready"}
+>
+  {#if failed}
+    <span
+      class="mira-markdown-image__placeholder"
+      data-image-placeholder="broken"
+      role="img"
+      aria-label={trimmedAlt || "Image unavailable"}
+      title={src}
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 64 48"
+        class="mira-markdown-image__placeholder-icon"
+        fill="none"
+      >
+        <rect x="2" y="2" width="60" height="44" rx="8" />
+        <path d="M14 34 24 24l8 7 8-9 10 12" />
+        <circle cx="23" cy="17" r="4" />
+        <path d="M39 14h11M44.5 9.5v10" />
+      </svg>
+      <span class="mira-markdown-image__placeholder-copy">
+        <span class="mira-markdown-image__placeholder-label">
+          {trimmedAlt || "Image unavailable"}
+        </span>
+        <span class="mira-markdown-image__placeholder-source">{src}</span>
+      </span>
+    </span>
+  {:else}
+    <button
+      type="button"
+      class="mira-markdown-image__trigger"
+      onclick={openLightbox}
+      aria-label={expandLabel}
+      aria-haspopup="dialog"
+      title={expandLabel}
+    >
+      <img
+        bind:this={ref}
+        class="mira-markdown-image"
+        src={resolvedSrc}
+        alt={resolvedAlt}
+        {title}
+        width={imageDetails.width}
+        height={imageDetails.height}
+        loading="lazy"
+        onerror={() => {
+          failed = true;
+        }}
+      />
+    </button>
+  {/if}
+
+  <dialog
+    bind:this={dialogEl}
+    class="mira-markdown-image__dialog"
+    aria-label={dialogLabel}
+    use:portalToBody
+    onclick={handleDialogClick}
+  >
+    <div class="mira-markdown-image__dialog-inner">
+      <div class="mira-markdown-image__dialog-header">
+        <button
+          type="button"
+          class="mira-markdown-image__dialog-close"
+          onclick={closeLightbox}
+          aria-label="Close image preview"
+          title="Close image preview"
+        >
+          <XIcon
+            class="mira-markdown-image__dialog-close-icon"
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+      <figure class="mira-markdown-image__dialog-figure">
+        <img
+          class="mira-markdown-image__dialog-img"
+          src={resolvedSrc}
+          alt={resolvedAlt}
+          {title}
+          width={imageDetails.width}
+          height={imageDetails.height}
+        />
+        {#if trimmedAlt}
+          <figcaption class="mira-markdown-image__dialog-caption">
+            {resolvedAlt}
+          </figcaption>
+        {/if}
+      </figure>
+    </div>
+  </dialog>
+</span>

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

@@ -0,0 +1,10 @@
+type Props = {
+    src?: string;
+    alt?: string;
+    title?: string;
+    ref?: HTMLImageElement | null;
+};
+declare const Image: import("svelte").Component<Props, {}, "ref">;
+type Image = ReturnType<typeof Image>;
+export default Image;
+//# sourceMappingURL=image.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/image.svelte.ts"],"names":[],"mappings":"AAaE,KAAK,KAAK,GAAG;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC/B,CAAC;AAgNJ,QAAA,MAAM,KAAK,8CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}