@lapismd/mira 0.0.1

package/dist/preview/components/code.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import CopyIcon from "@lucide/svelte/icons/copy";
+  import type { Snippet } from "svelte";
+  import { codeLanguageLabel } from "../code-language";
+
+  type Props = {
+    children?: Snippet;
+    class?: string;
+    code?: string;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
+  };
+
+  let {
+    children,
+    ref = $bindable(null),
+    class: className = "",
+    code: content = "",
+    ...restProps
+  }: Props = $props();
+
+  const block = $derived(className.includes("hljs") || content.includes("\n"));
+  const textCodeBlock = $derived(
+    /(?:^|\s)language-text(?:\s|$)/u.test(className),
+  );
+  const language = $derived(codeLanguageLabel(className));
+  let copied = $state(false);
+  let copyTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function classNames(...values: Array<string | false | undefined>): string {
+    return values.filter(Boolean).join(" ");
+  }
+
+  function fitTextCodeBlockToLivePreviewViewport(
+    el: HTMLElement,
+    enabled: boolean,
+  ) {
+    let active = enabled;
+    let resizeObserver: ResizeObserver | null = null;
+
+    const update = () => {
+      if (!active) {
+        el.style.maxWidth = "";
+        return;
+      }
+
+      const editor = el.closest(".cm-editor.markdown-live-preview-view");
+      const scroller = editor?.querySelector(":scope > .cm-scroller");
+      if (!(scroller instanceof HTMLElement)) {
+        el.style.maxWidth = "";
+        return;
+      }
+
+      const scrollerRect = scroller.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      const maxWidth = Math.max(0, scrollerRect.right - elRect.left);
+      el.style.maxWidth = `${maxWidth}px`;
+    };
+
+    queueMicrotask(update);
+    resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(el);
+    const editor = el.closest(".cm-editor.markdown-live-preview-view");
+    const scroller = editor?.querySelector(":scope > .cm-scroller");
+    if (scroller instanceof HTMLElement) {
+      resizeObserver.observe(scroller);
+    }
+    window.addEventListener("resize", update);
+
+    return {
+      update(value: boolean) {
+        active = value;
+        update();
+      },
+      destroy() {
+        resizeObserver?.disconnect();
+        window.removeEventListener("resize", update);
+      },
+    };
+  }
+
+  async function copyCode(): Promise<void> {
+    await navigator.clipboard.writeText(content);
+    copied = true;
+    if (copyTimer) {
+      clearTimeout(copyTimer);
+    }
+    copyTimer = setTimeout(() => {
+      copied = false;
+    }, 1200);
+  }
+</script>
+
+{#if block}
+  <div
+    bind:this={ref}
+    use:fitTextCodeBlockToLivePreviewViewport={textCodeBlock}
+    class={classNames(
+      "mira-code-block",
+      "group relative flex rounded-sm px-4 py-4 font-mono whitespace-pre",
+      textCodeBlock
+        ? "markdown-text-code-block max-w-full items-start overflow-x-auto overflow-y-hidden"
+        : "items-center",
+    )}
+  >
+    <code
+      class={classNames(
+        "text-sm",
+        textCodeBlock && "min-w-max !whitespace-pre",
+        className,
+      )}
+      {...restProps}
+    >
+      {@render children?.()}
+    </code>
+    {#if content}
+      <div class="mira-code-block__copy absolute end-2 top-2">
+        <button
+          type="button"
+          class="mira-code-block__copy-button text-muted-foreground bg-secondary inline-flex items-center justify-center rounded-sm"
+          aria-label={copied ? "Copied" : "Copy code"}
+          title={copied ? "Copied" : "Copy code"}
+          onclick={() => void copyCode()}
+        >
+          {#if language}
+            <span class="mira-code-block__language">{language}</span>
+          {/if}
+          {#if copied}
+            <CheckIcon class="mira-code-block__copy-icon" aria-hidden="true" />
+          {:else}
+            <CopyIcon class="mira-code-block__copy-icon" aria-hidden="true" />
+          {/if}
+        </button>
+      </div>
+    {/if}
+  </div>
+{:else}
+  <code
+    bind:this={ref}
+    class={classNames("font-mono text-sm whitespace-pre", className)}
+    {...restProps}
+  >
+    {@render children?.()}
+  </code>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+type Props = {
+    children?: Snippet;
+    class?: string;
+    code?: string;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
+};
+declare const Code: import("svelte").Component<Props, {}, "ref">;
+type Code = ReturnType<typeof Code>;
+export default Code;
+//# sourceMappingURL=code.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/code.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AA8HJ,QAAA,MAAM,IAAI,8CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/preview/components/embed.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import {
+    parseMiraFileTarget,
+    type MiraFileRef,
+  } from "@lapismd/mira/extensions";
+  import { useMarkdownContext } from "../renderer/context.svelte";
+  import {
+    parseMiraImageDetails,
+    selectMarkdownEmbedFragment,
+  } from "../embed-target";
+  import EmbeddedMarkdownPreview from "./embedded-markdown-preview.svelte";
+
+  type Props = {
+    href?: string;
+    id?: string;
+    label?: string;
+    text?: string;
+    sourcePath?: string;
+    children?: Snippet;
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    href = "",
+    id,
+    label = href,
+    text,
+    sourcePath,
+    children,
+    ref = $bindable(null),
+  }: Props = $props();
+  const markdown = useMarkdownContext();
+
+  let embedHost: HTMLDivElement | null = $state(null);
+  let resolvedFile = $state<MiraFileRef | null>(null);
+  let previewMarkdown = $state<string | null>(null);
+  let previewAssetUrl = $state<string | null>(null);
+  let customRendered = $state(false);
+  let fragmentMissing = $state(false);
+  let targetRevision = $state(0);
+  let contentRevision = $state(0);
+
+  const target = $derived(id || href);
+  const activeSourcePath = $derived(sourcePath || markdown.sourcePath);
+  const parsedTarget = $derived(parseMiraFileTarget(target, activeSourcePath));
+  const imageDetails = $derived(
+    parseMiraImageDetails(
+      text || label,
+      resolvedFile?.name || parsedTarget.path || target,
+    ),
+  );
+  const displayText = $derived(
+    imageDetails.width
+      ? imageDetails.alt
+      : text || label || resolvedFile?.name || parsedTarget.path || target,
+  );
+
+  $effect(() => {
+    const adapter = markdown.fileAdapter;
+    const currentTarget = parsedTarget;
+    targetRevision;
+    if (!adapter || !currentTarget) {
+      resolvedFile = null;
+      return;
+    }
+
+    let cancelled = false;
+    Promise.resolve(
+      adapter.resolveLink({
+        ...currentTarget,
+      }),
+    ).then(
+      (file) => {
+        if (!cancelled) {
+          resolvedFile = file;
+        }
+      },
+      () => {
+        if (!cancelled) {
+          resolvedFile = null;
+        }
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  $effect(() => {
+    const adapter = markdown.fileAdapter;
+    const currentTarget = parsedTarget;
+    const file = resolvedFile;
+    if (!adapter?.watchTarget || !currentTarget.href) {
+      return;
+    }
+    return adapter.watchTarget({ ...currentTarget, file }, () => {
+      targetRevision += 1;
+    });
+  });
+
+  $effect(() => {
+    const adapter = markdown.fileAdapter;
+    const file = resolvedFile;
+    if (!adapter?.watchFile || !file) {
+      return;
+    }
+    return adapter.watchFile(file, () => {
+      contentRevision += 1;
+    });
+  });
+
+  $effect(() => {
+    const adapter = markdown.fileAdapter;
+    const file = resolvedFile;
+    const host = embedHost;
+    customRendered = false;
+
+    if (
+      !adapter ||
+      !file ||
+      !host ||
+      !adapter.renderEmbed ||
+      parsedTarget.fragment
+    ) {
+      return;
+    }
+
+    host.replaceChildren();
+    const cleanup = adapter.renderEmbed(
+      {
+        ...parsedTarget,
+        file,
+        label: displayText,
+        width: imageDetails.width,
+        height: imageDetails.height,
+      },
+      host,
+    );
+    if (cleanup === false) {
+      return;
+    }
+    customRendered = true;
+
+    return () => {
+      cleanup?.();
+      host.replaceChildren();
+    };
+  });
+
+  $effect(() => {
+    const adapter = markdown.fileAdapter;
+    const file = resolvedFile;
+    contentRevision;
+    previewMarkdown = null;
+    previewAssetUrl = null;
+    fragmentMissing = false;
+
+    if (!adapter || !file || customRendered) {
+      return;
+    }
+
+    let cancelled = false;
+    Promise.all([
+      adapter.readMarkdown ? Promise.resolve(adapter.readMarkdown(file)) : null,
+      adapter.readAssetUrl ? Promise.resolve(adapter.readAssetUrl(file)) : null,
+    ]).then(
+      ([nextMarkdown, nextAssetUrl]) => {
+        if (!cancelled) {
+          if (nextMarkdown !== null) {
+            const selection = selectMarkdownEmbedFragment(
+              nextMarkdown,
+              parsedTarget.fragment,
+            );
+            previewMarkdown = selection.found ? selection.markdown : null;
+            fragmentMissing = !selection.found;
+          }
+          previewAssetUrl = nextAssetUrl;
+        }
+      },
+      () => {
+        if (!cancelled) {
+          previewMarkdown = null;
+          previewAssetUrl = null;
+        }
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  });
+</script>
+
+<figure
+  bind:this={ref}
+  class="mira-embed internal-embed"
+  data-embed={target}
+  data-embed-state={resolvedFile ? "resolved" : "unresolved"}
+  data-embed-fragment={parsedTarget.fragment?.kind}
+>
+  <figcaption>{displayText}</figcaption>
+  <div class="mira-embed__content">
+    <div
+      bind:this={embedHost}
+      class="mira-embed__custom"
+      hidden={!customRendered}
+    ></div>
+    {#if !customRendered}
+      {#if previewAssetUrl}
+        <img
+          src={previewAssetUrl}
+          alt=""
+          width={imageDetails.width}
+          height={imageDetails.height}
+        />
+      {:else if previewMarkdown}
+        <EmbeddedMarkdownPreview
+          class="mira-embed__markdown"
+          value={previewMarkdown}
+          sourcePath={resolvedFile?.path}
+        />
+      {:else if children}
+        {@render children()}
+      {:else if !resolvedFile}
+        <span class="mira-embed__missing">{target}</span>
+      {:else if fragmentMissing}
+        <span class="mira-embed__missing">
+          Unable to find {parsedTarget.fragment?.kind} "{parsedTarget.fragment
+            ?.value}" in {resolvedFile.name || resolvedFile.path}.
+        </span>
+      {/if}
+    {/if}
+  </div>
+</figure>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+type Props = {
+    href?: string;
+    id?: string;
+    label?: string;
+    text?: string;
+    sourcePath?: string;
+    children?: Snippet;
+    ref?: HTMLElement | null;
+};
+declare const Embed: import("svelte").Component<Props, {}, "ref">;
+type Embed = ReturnType<typeof Embed>;
+export default Embed;
+//# sourceMappingURL=embed.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"embed.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/embed.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAapC,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC1B,CAAC;AA8MJ,QAAA,MAAM,KAAK,8CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/preview/components/embedded-markdown-preview.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import Markdown from "../renderer/markdown.svelte";
+  import { useMarkdownContext } from "../renderer/context.svelte";
+
+  type Props = {
+    value: string;
+    sourcePath?: string;
+    class?: string;
+    frontmatterOpen?: boolean;
+    ref?: HTMLElement | null;
+    onChange?: (replacement: string, from: number, to: number) => void;
+  };
+
+  let {
+    value,
+    sourcePath,
+    class: className = "",
+    frontmatterOpen = false,
+    ref = $bindable(null),
+    onChange,
+  }: Props = $props();
+  const markdown = useMarkdownContext();
+  const activeSourcePath = $derived(sourcePath || markdown.sourcePath);
+</script>
+
+<div
+  bind:this={ref}
+  class={`mira-embedded-markdown-preview mira-markdown-preview markdown-reading-view markdown-preview-surface markdown-preview-surface--embedded markdown-embed-surface markdown-rendered ${className}`.trim()}
+  data-markdown-embed="true"
+>
+  <div class="cm-sizer">
+    <div class="markdown-view__document markdown">
+      <Markdown
+        {value}
+        sourcePath={activeSourcePath}
+        extensions={markdown.extensions}
+        remarkPlugins={markdown.remarkPlugins}
+        rehypePlugins={markdown.rehypePlugins}
+        remarkRehypeOptions={markdown.remarkRehypeOptions}
+        components={markdown.components}
+        linkResolver={markdown.linkResolver}
+        assetResolver={markdown.assetResolver}
+        fileAdapter={markdown.fileAdapter}
+        listCallouts={markdown.listCallouts}
+        postProcess={markdown.postProcess}
+        {frontmatterOpen}
+        frontmatterConfig={markdown.frontmatterConfig}
+        dialog={markdown.dialog}
+        {onChange}
+      />
+    </div>
+  </div>
+</div>

package/dist/preview/components/embedded-markdown-preview.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    value: string;
+    sourcePath?: string;
+    class?: string;
+    frontmatterOpen?: boolean;
+    ref?: HTMLElement | null;
+    onChange?: (replacement: string, from: number, to: number) => void;
+};
+declare const EmbeddedMarkdownPreview: import("svelte").Component<Props, {}, "ref">;
+type EmbeddedMarkdownPreview = ReturnType<typeof EmbeddedMarkdownPreview>;
+export default EmbeddedMarkdownPreview;
+//# sourceMappingURL=embedded-markdown-preview.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"embedded-markdown-preview.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/embedded-markdown-preview.svelte.ts"],"names":[],"mappings":"AAOE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpE,CAAC;AA4BJ,QAAA,MAAM,uBAAuB,8CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/preview/components/frontmatter-property-name-input.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+  import { tick } from "svelte";
+  import Icon from "./icon.svelte";
+  import {
+    filterFrontmatterPropertySuggestions,
+    readFrontmatterPropertySuggestions,
+    type FrontmatterConfig,
+    type FrontmatterPropertySuggestion,
+  } from "./frontmatter-utils";
+
+  type Props = {
+    value: string;
+    config?: FrontmatterConfig;
+    excludedNames?: string[];
+    title?: string;
+    readonly?: boolean;
+    autofocus?: boolean;
+    onCommit: (value: string) => void;
+  };
+
+  let {
+    value,
+    config,
+    excludedNames = [],
+    title,
+    readonly = false,
+    autofocus = false,
+    onCommit,
+  }: Props = $props();
+
+  let inputEl: HTMLInputElement | null = $state(null);
+  let draft = $state("");
+  let focused = $state(false);
+  let open = $state(false);
+  let activeIndex = $state(0);
+  let suggestionVersion = 0;
+  let suggestions = $state<FrontmatterPropertySuggestion[]>([]);
+  let didAutofocus = false;
+
+  const filteredSuggestions = $derived(
+    filterFrontmatterPropertySuggestions(suggestions, draft, excludedNames),
+  );
+  const suggestionListId = $derived(
+    `mira-property-suggestions-${(title || value).replace(/[^a-z0-9_-]+/giu, "-")}`,
+  );
+
+  $effect(() => {
+    if (!focused) {
+      draft = value;
+    }
+  });
+
+  $effect(() => {
+    if (!autofocus || didAutofocus || readonly) {
+      return;
+    }
+    didAutofocus = true;
+    void tick().then(() => inputEl?.focus());
+  });
+
+  $effect(() => {
+    if (activeIndex >= filteredSuggestions.length) {
+      activeIndex = Math.max(0, filteredSuggestions.length - 1);
+    }
+  });
+
+  async function loadSuggestions(): Promise<void> {
+    const version = ++suggestionVersion;
+    try {
+      const next = await readFrontmatterPropertySuggestions(config);
+      if (version === suggestionVersion) {
+        suggestions = next;
+      }
+    } catch {
+      if (version === suggestionVersion) {
+        suggestions = [];
+      }
+    }
+  }
+
+  function commit(nextValue = draft): void {
+    const normalized = nextValue.trim();
+    draft = normalized || value;
+    open = false;
+    if (normalized && normalized !== value) {
+      onCommit(normalized);
+    }
+  }
+
+  function selectSuggestion(index: number): void {
+    const suggestion = filteredSuggestions[index];
+    if (suggestion) {
+      commit(suggestion.name);
+    }
+  }
+
+  function handleBlur(event: FocusEvent): void {
+    focused = false;
+    const nextFocus = event.relatedTarget as HTMLElement | null;
+    if (nextFocus?.dataset.propertySuggestion === "true") {
+      return;
+    }
+    queueMicrotask(() => {
+      if (document.activeElement !== inputEl) {
+        commit();
+      }
+    });
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === "ArrowDown" && filteredSuggestions.length) {
+      event.preventDefault();
+      open = true;
+      activeIndex = (activeIndex + 1) % filteredSuggestions.length;
+      return;
+    }
+    if (event.key === "ArrowUp" && filteredSuggestions.length) {
+      event.preventDefault();
+      open = true;
+      activeIndex =
+        (activeIndex - 1 + filteredSuggestions.length) %
+        filteredSuggestions.length;
+      return;
+    }
+    if (
+      (event.key === "Enter" || event.key === "Tab") &&
+      open &&
+      filteredSuggestions.length
+    ) {
+      event.preventDefault();
+      selectSuggestion(activeIndex);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commit();
+      inputEl?.blur();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      draft = value;
+      open = false;
+      inputEl?.blur();
+    }
+  }
+</script>
+
+<div
+  class="mira-property-name-input"
+  data-open={open && filteredSuggestions.length ? "true" : undefined}
+>
+  <input
+    bind:this={inputEl}
+    bind:value={draft}
+    class="metadata-property-key-input"
+    {title}
+    {readonly}
+    aria-label={title || `Property name: ${value}`}
+    role="combobox"
+    aria-autocomplete="list"
+    aria-controls={suggestionListId}
+    aria-expanded={open && filteredSuggestions.length > 0}
+    onfocus={() => {
+      focused = true;
+      open = true;
+      void loadSuggestions();
+    }}
+    oninput={() => {
+      open = true;
+      activeIndex = 0;
+    }}
+    onblur={handleBlur}
+    onkeydown={handleKeydown}
+  />
+
+  {#if open && filteredSuggestions.length}
+    <div
+      id={suggestionListId}
+      class="mira-property-name-suggestions"
+      role="listbox"
+      aria-label="Property name suggestions"
+    >
+      {#each filteredSuggestions as suggestion, index (suggestion.name)}
+        <button
+          type="button"
+          class="mira-property-name-suggestion"
+          data-active={index === activeIndex}
+          data-property-suggestion="true"
+          role="option"
+          aria-selected={index === activeIndex}
+          tabindex="-1"
+          onmousedown={(event) => event.preventDefault()}
+          onclick={() => selectSuggestion(index)}
+        >
+          {#if suggestion.icon}
+            <Icon
+              name={suggestion.icon}
+              class="mira-property-name-suggestion__icon"
+            />
+          {/if}
+          <span>{suggestion.name}</span>
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>