@lapismd/mira 0.0.1

package/dist/preview/components/list-item.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { useAstNode } from "../renderer/context.svelte";
+
+  type Props = {
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLLIElement | null;
+    [key: string]: unknown;
+  };
+
+  let {
+    children,
+    class: className = "",
+    ref = $bindable(null),
+    ...props
+  }: Props = $props();
+
+  const astNode = useAstNode();
+  const showIndentGuides = true;
+  const showFold = true;
+  let collapsed = $state(false);
+  let collapseAnchorTop = $state<number | null>(null);
+
+  const listKind = $derived(
+    astNode.parent?.type === "element" && astNode.parent.tagName === "ol"
+      ? "ol"
+      : "ul",
+  );
+
+  const hasNestedList = $derived.by(
+    () =>
+      "children" in astNode.node &&
+      Array.isArray(astNode.node.children) &&
+      astNode.node.children.some(
+        (child: any) =>
+          child.type === "element" &&
+          (child.tagName === "ul" || child.tagName === "ol"),
+      ),
+  );
+
+  const isTask = $derived(className.split(/\s+/u).includes("task-list-item"));
+
+  const liClass = $derived(
+    [
+      className,
+      "rendered-list-item",
+      `rendered-list-item-${listKind}`,
+      hasNestedList ? "has-nested-list" : "",
+      collapsed ? "is-collapsed" : "",
+      showIndentGuides ? "show-guides" : "",
+    ]
+      .filter(Boolean)
+      .join(" "),
+  );
+
+  function toggleCollapsed(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    collapsed = !collapsed;
+  }
+
+  function isIgnoredAnchorElement(node: Element): boolean {
+    return (
+      node.classList.contains("list-collapse-indicator") ||
+      node.classList.contains("list-bullet") ||
+      node.tagName === "UL" ||
+      node.tagName === "OL"
+    );
+  }
+
+  function getAnchorRect(node: Node): DOMRect | null {
+    if (node.nodeType === Node.TEXT_NODE) {
+      if (!node.textContent?.trim()) {
+        return null;
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as Element;
+      if (isIgnoredAnchorElement(element) || !element.textContent?.trim()) {
+        return null;
+      }
+    } else {
+      return null;
+    }
+
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    const rect = range.getClientRects()[0] ?? range.getBoundingClientRect();
+    range.detach();
+    return rect.width || rect.height ? rect : null;
+  }
+
+  function updateCollapseAnchor(): void {
+    if (!ref || !showFold || !hasNestedList) {
+      collapseAnchorTop = null;
+      return;
+    }
+
+    const liRect = ref.getBoundingClientRect();
+
+    for (const child of ref.childNodes) {
+      const rect = getAnchorRect(child);
+      if (!rect) {
+        continue;
+      }
+
+      collapseAnchorTop = rect.top - liRect.top + rect.height / 2;
+      return;
+    }
+
+    collapseAnchorTop = null;
+  }
+
+  $effect(() => {
+    hasNestedList;
+    ref;
+
+    if (!showFold || !hasNestedList || !ref) {
+      collapseAnchorTop = null;
+      return;
+    }
+
+    const frame = requestAnimationFrame(updateCollapseAnchor);
+    return () => cancelAnimationFrame(frame);
+  });
+</script>
+
+<li bind:this={ref} {...props} class={liClass}>
+  {#if hasNestedList && showFold}
+    <button
+      type="button"
+      class="list-collapse-indicator"
+      aria-label={collapsed ? "Expand list" : "Collapse list"}
+      data-collapsed={collapsed ? "true" : "false"}
+      style:top={collapseAnchorTop !== null
+        ? `${collapseAnchorTop}px`
+        : undefined}
+      onclick={toggleCollapsed}
+    >
+      <span class="collapse-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="svg-icon"
+          style:transform={collapsed ? "rotate(-90deg)" : undefined}
+        >
+          <path d="M3 8L12 17L21 8"></path>
+        </svg>
+      </span>
+    </button>
+  {/if}
+  {#if listKind === "ul" && !isTask}
+    <span class="list-bullet" aria-hidden="true"></span>
+  {/if}
+  {@render children?.()}
+</li>

package/dist/preview/components/list-item.svelte.d.ts

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

package/dist/preview/components/list-item.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/list-item.svelte.ts"],"names":[],"mappings":"AAGA,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,GAAG,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AA8IJ,QAAA,MAAM,QAAQ,8CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/preview/components/tag.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  type Props = {
+    class?: string;
+    name?: string;
+    value?: string;
+    ref?: HTMLSpanElement | null;
+  };
+
+  let {
+    class: className = "",
+    name,
+    value = "",
+    ref = $bindable(null),
+  }: Props = $props();
+  const label = $derived(name ?? value);
+</script>
+
+<span bind:this={ref} class={`tag mira-tag ${className}`.trim()}>{label}</span>

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

@@ -0,0 +1,10 @@
+type Props = {
+    class?: string;
+    name?: string;
+    value?: string;
+    ref?: HTMLSpanElement | null;
+};
+declare const Tag: import("svelte").Component<Props, {}, "ref">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;
+//# sourceMappingURL=tag.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/tag.svelte.ts"],"names":[],"mappings":"AAGE,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;CAC9B,CAAC;AAiBJ,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/preview/components/task-checkbox-control.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import {
+    miraTaskStates,
+    normalizeMiraTaskMarker,
+  } from "../../internal/task-states.js";
+  import * as Popover from "../../ui/popover/index.js";
+
+  type Props = {
+    checkboxClass?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    ref?: HTMLInputElement | null;
+    task: string;
+    onCheckedChange?: (checked: boolean) => void;
+    onTaskChange?: (task: string) => void;
+    [key: string]: unknown;
+  };
+
+  let {
+    checkboxClass = "",
+    checked = false,
+    disabled = false,
+    ref = $bindable(null),
+    task,
+    onCheckedChange,
+    onTaskChange,
+    ...inputProps
+  }: Props = $props();
+
+  let open = $state(false);
+  const normalizedTask = $derived(normalizeMiraTaskMarker(task));
+
+  function chooseTask(marker: string): void {
+    const shouldChange = marker !== normalizedTask;
+    const changeTask = onTaskChange;
+    open = false;
+    if (shouldChange) {
+      queueMicrotask(() => changeTask?.(marker));
+    }
+  }
+</script>
+
+<input
+  bind:this={ref}
+  {...inputProps}
+  class={`task-list-item-checkbox ${checkboxClass}`.trim()}
+  type="checkbox"
+  aria-label="Toggle task"
+  data-task={task}
+  {checked}
+  {disabled}
+  onchange={(event) =>
+    onCheckedChange?.((event.currentTarget as HTMLInputElement).checked)}
+/>
+
+{#if !disabled && onTaskChange}
+  <Popover.Root bind:open>
+    <Popover.Trigger
+      class="mira-task-state-trigger"
+      aria-label="Change task type"
+      title="Change task type"
+      data-editable-markdown-ignore-click
+    >
+      <ChevronDownIcon aria-hidden="true" />
+    </Popover.Trigger>
+    <Popover.Content
+      class="mira-task-state-menu"
+      align="start"
+      side="bottom"
+      sideOffset={6}
+      aria-label="Task type"
+    >
+      <div
+        class="mira-task-state-menu__grid"
+        role="radiogroup"
+        aria-label="Task type"
+      >
+        {#each miraTaskStates as state (state.marker)}
+          <div
+            class="mira-task-state-option"
+            data-selected={state.marker === normalizedTask ? "true" : undefined}
+          >
+            <input
+              class="mira-task-state-option__checkbox"
+              type="checkbox"
+              tabindex="-1"
+              aria-hidden="true"
+              data-task={state.marker}
+              checked={state.marker.trim().length > 0}
+            />
+            <span class="mira-task-state-option__label">{state.label}</span>
+            {#if state.marker === normalizedTask}
+              <CheckIcon
+                class="mira-task-state-option__selected"
+                aria-hidden="true"
+              />
+            {/if}
+            <button
+              class="mira-task-state-option__action"
+              type="button"
+              role="radio"
+              aria-checked={state.marker === normalizedTask}
+              aria-label={state.label}
+              onclick={() => chooseTask(state.marker)}
+            ></button>
+          </div>
+        {/each}
+      </div>
+    </Popover.Content>
+  </Popover.Root>
+{/if}

package/dist/preview/components/task-checkbox-control.svelte.d.ts

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

package/dist/preview/components/task-checkbox-control.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-checkbox-control.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/task-checkbox-control.svelte.ts"],"names":[],"mappings":"AAYE,KAAK,KAAK,GAAG;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AA2DJ,QAAA,MAAM,mBAAmB,8CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/preview/editable-markdown-preview/behavior.d.ts

@@ -0,0 +1,6 @@
+export declare const EDITABLE_MARKDOWN_PREVIEW_INTERACTIVE_SELECTOR: string;
+export declare function isEditableMarkdownPreviewInteractiveTarget(target: EventTarget | null): boolean;
+export declare function shouldActivateEditableMarkdownPreview(event: MouseEvent, boundary?: Element): boolean;
+export declare function getEditableMarkdownPreviewOffset(event: MouseEvent): number | null;
+export declare function shouldReturnEditableMarkdownPreviewOnBlur(container: HTMLElement, relatedTarget: EventTarget | null, activeElement: Element | null): boolean;
+//# sourceMappingURL=behavior.d.ts.map

package/dist/preview/editable-markdown-preview/behavior.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"behavior.d.ts","sourceRoot":"","sources":["../../../src/preview/editable-markdown-preview/behavior.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,8CAA8C,QAe/C,CAAC;AAcb,wBAAgB,0CAA0C,CACxD,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,OAAO,CAIT;AAED,wBAAgB,qCAAqC,CACnD,KAAK,EAAE,UAAU,EACjB,QAAQ,CAAC,EAAE,OAAO,GACjB,OAAO,CAgBT;AAED,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,UAAU,GAChB,MAAM,GAAG,IAAI,CASf;AAED,wBAAgB,yCAAyC,CACvD,SAAS,EAAE,WAAW,EACtB,aAAa,EAAE,WAAW,GAAG,IAAI,EACjC,aAAa,EAAE,OAAO,GAAG,IAAI,GAC5B,OAAO,CAST"}

package/dist/preview/editable-markdown-preview/behavior.js

@@ -0,0 +1,57 @@
+export const EDITABLE_MARKDOWN_PREVIEW_INTERACTIVE_SELECTOR = [
+    "a",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "summary",
+    "details",
+    "audio",
+    "video",
+    "[contenteditable='true']",
+    "[role='button']",
+    "[role='checkbox']",
+    "[role='textbox']",
+    "[data-editable-markdown-ignore-click]",
+].join(", ");
+function toElement(target) {
+    if (target instanceof Element) {
+        return target;
+    }
+    if (target instanceof Node) {
+        return target.parentElement;
+    }
+    return null;
+}
+export function isEditableMarkdownPreviewInteractiveTarget(target) {
+    return Boolean(toElement(target)?.closest(EDITABLE_MARKDOWN_PREVIEW_INTERACTIVE_SELECTOR));
+}
+export function shouldActivateEditableMarkdownPreview(event, boundary) {
+    if (event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey) {
+        return false;
+    }
+    const interactive = toElement(event.target)?.closest(EDITABLE_MARKDOWN_PREVIEW_INTERACTIVE_SELECTOR);
+    return !interactive || interactive === boundary;
+}
+export function getEditableMarkdownPreviewOffset(event) {
+    const value = toElement(event.target)?.closest("[data-offset]")
+        ?.dataset.offset;
+    if (value === undefined) {
+        return null;
+    }
+    const offset = Number.parseInt(value, 10);
+    return Number.isFinite(offset) ? offset : null;
+}
+export function shouldReturnEditableMarkdownPreviewOnBlur(container, relatedTarget, activeElement) {
+    const nextFocus = relatedTarget instanceof Node
+        ? relatedTarget
+        : activeElement instanceof Node
+            ? activeElement
+            : null;
+    return !(nextFocus && container.contains(nextFocus));
+}

package/dist/preview/editable-markdown-preview/behavior.test.d.ts

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

package/dist/preview/editable-markdown-preview/behavior.test.d.ts.map

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

package/dist/preview/editable-markdown-preview/behavior.test.js

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { getEditableMarkdownPreviewOffset, isEditableMarkdownPreviewInteractiveTarget, shouldActivateEditableMarkdownPreview, shouldReturnEditableMarkdownPreviewOnBlur, } from "./behavior";
+describe("editable Markdown preview behavior", () => {
+    it("accepts a plain primary click and reads the nearest source offset", () => {
+        const block = document.createElement("p");
+        block.dataset.offset = "24";
+        const text = document.createElement("span");
+        block.append(text);
+        const event = new MouseEvent("click", { button: 0, bubbles: true });
+        text.dispatchEvent(event);
+        expect(shouldActivateEditableMarkdownPreview(event)).toBe(true);
+        expect(getEditableMarkdownPreviewOffset(event)).toBe(24);
+    });
+    it("ignores interactive descendants, modifiers, and non-primary clicks", () => {
+        const button = document.createElement("button");
+        const child = document.createElement("span");
+        button.append(child);
+        expect(isEditableMarkdownPreviewInteractiveTarget(child)).toBe(true);
+        expect(shouldActivateEditableMarkdownPreview(new MouseEvent("click", { button: 0, ctrlKey: true }))).toBe(false);
+        const interactiveEvent = new MouseEvent("click", {
+            button: 0,
+            bubbles: true,
+        });
+        child.dispatchEvent(interactiveEvent);
+        expect(shouldActivateEditableMarkdownPreview(interactiveEvent)).toBe(false);
+        expect(shouldActivateEditableMarkdownPreview(new MouseEvent("click", { button: 1 }))).toBe(false);
+    });
+    it("returns to preview only when focus leaves the editor", () => {
+        const container = document.createElement("div");
+        const inside = document.createElement("button");
+        const outside = document.createElement("button");
+        container.append(inside);
+        expect(shouldReturnEditableMarkdownPreviewOnBlur(container, inside, inside)).toBe(false);
+        expect(shouldReturnEditableMarkdownPreviewOnBlur(container, outside, outside)).toBe(true);
+    });
+});