@lapismd/mira 0.0.1

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

@@ -0,0 +1,14 @@
+import { type FrontmatterConfig } from "./frontmatter-utils";
+type Props = {
+    value: string;
+    config?: FrontmatterConfig;
+    excludedNames?: string[];
+    title?: string;
+    readonly?: boolean;
+    autofocus?: boolean;
+    onCommit: (value: string) => void;
+};
+declare const FrontmatterPropertyNameInput: import("svelte").Component<Props, {}, "">;
+type FrontmatterPropertyNameInput = ReturnType<typeof FrontmatterPropertyNameInput>;
+export default FrontmatterPropertyNameInput;
+//# sourceMappingURL=frontmatter-property-name-input.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"frontmatter-property-name-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/frontmatter-property-name-input.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAGH,KAAK,iBAAiB,EAEvB,MAAM,qBAAqB,CAAC;AAG7B,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAiKJ,QAAA,MAAM,4BAA4B,2CAAwC,CAAC;AAC3E,KAAK,4BAA4B,GAAG,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAC;AACpF,eAAe,4BAA4B,CAAC"}

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

@@ -0,0 +1,228 @@
+<script lang="ts">
+  import {
+    filterFrontmatterValueSuggestions,
+    readFrontmatterValueSuggestions,
+    type FrontmatterConfig,
+  } from "./frontmatter-utils";
+  import * as Popover from "../../ui/popover/index.js";
+
+  type Props = {
+    value: string;
+    propertyKey: string;
+    config?: FrontmatterConfig;
+    ariaLabel: string;
+    class?: string;
+    onCommit: (value: string) => void;
+  };
+
+  let {
+    value,
+    propertyKey,
+    config,
+    ariaLabel,
+    class: className = "",
+    onCommit,
+  }: Props = $props();
+
+  let editorEl: HTMLDivElement | null = $state(null);
+  let query = $state("");
+  let open = $state(false);
+  let activeIndex = $state(-1);
+  let suggestionVersion = 0;
+  let suggestions = $state<string[]>([]);
+  let committedSuggestion: string | null = null;
+
+  const filteredSuggestions = $derived(
+    filterFrontmatterValueSuggestions(suggestions, query),
+  );
+  const suggestionListId = $derived(
+    `mira-property-value-suggestions-${propertyKey.replace(/[^a-z0-9_-]+/giu, "-")}`,
+  );
+
+  $effect(() => {
+    if (activeIndex >= filteredSuggestions.length) {
+      activeIndex = -1;
+    }
+  });
+
+  $effect(() => {
+    if (editorEl?.ownerDocument.activeElement !== editorEl) {
+      query = value;
+    }
+  });
+
+  async function loadSuggestions(nextQuery = currentValue()): Promise<void> {
+    const version = ++suggestionVersion;
+    try {
+      const next = await readFrontmatterValueSuggestions(
+        config,
+        propertyKey,
+        nextQuery,
+      );
+      if (version === suggestionVersion) {
+        suggestions = next;
+      }
+    } catch {
+      if (version === suggestionVersion) {
+        suggestions = [];
+      }
+    }
+  }
+
+  function currentValue(): string {
+    return editorEl?.textContent ?? query;
+  }
+
+  function selectSuggestion(index: number): void {
+    const suggestion = filteredSuggestions[index];
+    if (!suggestion) {
+      return;
+    }
+    query = suggestion;
+    if (editorEl) {
+      editorEl.textContent = suggestion;
+    }
+    committedSuggestion = suggestion;
+    open = false;
+    onCommit(suggestion);
+  }
+
+  function handleBlur(event: FocusEvent): void {
+    const nextFocus = event.relatedTarget as HTMLElement | null;
+    if (nextFocus?.dataset.propertyValueSuggestion === "true") {
+      return;
+    }
+    queueMicrotask(() => {
+      if (editorEl?.ownerDocument.activeElement !== editorEl) {
+        open = false;
+        const nextValue = currentValue();
+        if (nextValue === committedSuggestion) {
+          committedSuggestion = null;
+          return;
+        }
+        committedSuggestion = null;
+        onCommit(nextValue);
+      }
+    });
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === "ArrowDown" && filteredSuggestions.length) {
+      event.preventDefault();
+      open = true;
+      activeIndex =
+        activeIndex < 0 ? 0 : (activeIndex + 1) % filteredSuggestions.length;
+      return;
+    }
+    if (event.key === "ArrowUp" && filteredSuggestions.length) {
+      event.preventDefault();
+      open = true;
+      activeIndex =
+        activeIndex < 0
+          ? filteredSuggestions.length - 1
+          : (activeIndex - 1 + filteredSuggestions.length) %
+            filteredSuggestions.length;
+      return;
+    }
+    if (
+      (event.key === "Enter" || event.key === "Tab") &&
+      open &&
+      activeIndex >= 0 &&
+      activeIndex < filteredSuggestions.length
+    ) {
+      event.preventDefault();
+      selectSuggestion(activeIndex);
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      editorEl?.blur();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      open = false;
+    }
+  }
+
+  function textControlProps<T extends { type?: unknown }>(props: T) {
+    const { type: _triggerType, ...controlProps } = props;
+    return controlProps;
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <div
+        {...textControlProps(props)}
+        bind:this={editorEl}
+        class={className}
+        role="combobox"
+        aria-label={ariaLabel}
+        aria-autocomplete="list"
+        aria-controls={suggestionListId}
+        aria-haspopup="listbox"
+        contenteditable="true"
+        spellcheck="true"
+        tabindex="0"
+        data-placeholder="Empty"
+        data-open={open && filteredSuggestions.length ? "true" : undefined}
+        onclick={() => {
+          query = currentValue();
+          open = true;
+          activeIndex = -1;
+          void loadSuggestions(query);
+        }}
+        onfocus={() => {
+          query = currentValue();
+          open = true;
+          activeIndex = -1;
+          void loadSuggestions(query);
+        }}
+        oninput={() => {
+          committedSuggestion = null;
+          query = currentValue();
+          open = true;
+          activeIndex = -1;
+          void loadSuggestions(query);
+        }}
+        onblur={handleBlur}
+        onkeydown={handleKeydown}
+      >
+        {value}
+      </div>
+    {/snippet}
+  </Popover.Trigger>
+
+  {#if open && filteredSuggestions.length}
+    <Popover.Content
+      id={suggestionListId}
+      class="mira-property-value-suggestions"
+      role="listbox"
+      aria-label="Property value suggestions"
+      align="start"
+      side="bottom"
+      sideOffset={4}
+      collisionPadding={8}
+      onOpenAutoFocus={(event) => event.preventDefault()}
+      onCloseAutoFocus={(event) => event.preventDefault()}
+    >
+      {#each filteredSuggestions as suggestion, index (suggestion)}
+        <button
+          type="button"
+          class="mira-property-value-suggestion"
+          data-active={index === activeIndex ? "true" : undefined}
+          data-property-value-suggestion="true"
+          role="option"
+          aria-selected={index === activeIndex}
+          tabindex="-1"
+          onmousedown={(event) => event.preventDefault()}
+          onclick={() => selectSuggestion(index)}
+        >
+          <span>{suggestion}</span>
+        </button>
+      {/each}
+    </Popover.Content>
+  {/if}
+</Popover.Root>

package/dist/preview/components/frontmatter-property-text-input.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type FrontmatterConfig } from "./frontmatter-utils";
+type Props = {
+    value: string;
+    propertyKey: string;
+    config?: FrontmatterConfig;
+    ariaLabel: string;
+    class?: string;
+    onCommit: (value: string) => void;
+};
+declare const FrontmatterPropertyTextInput: import("svelte").Component<Props, {}, "">;
+type FrontmatterPropertyTextInput = ReturnType<typeof FrontmatterPropertyTextInput>;
+export default FrontmatterPropertyTextInput;
+//# sourceMappingURL=frontmatter-property-text-input.svelte.d.ts.map

package/dist/preview/components/frontmatter-property-text-input.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frontmatter-property-text-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/frontmatter-property-text-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAoLJ,QAAA,MAAM,4BAA4B,2CAAwC,CAAC;AAC3E,KAAK,4BAA4B,GAAG,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAC;AACpF,eAAe,4BAA4B,CAAC"}

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

@@ -0,0 +1,232 @@
+<script lang="ts">
+  import {
+    filterFrontmatterValueSuggestions,
+    readFrontmatterValueSuggestions,
+    type FrontmatterConfig,
+  } from "./frontmatter-utils";
+  import * as Popover from "../../ui/popover/index.js";
+
+  type Props = {
+    propertyKey: string;
+    config?: FrontmatterConfig;
+    excludedValues?: string[];
+    ariaLabel: string;
+    onCommit: (value: string) => void;
+    onBackspaceEmpty: () => void;
+  };
+
+  let {
+    propertyKey,
+    config,
+    excludedValues = [],
+    ariaLabel,
+    onCommit,
+    onBackspaceEmpty,
+  }: Props = $props();
+
+  let inputEl: HTMLInputElement | null = $state(null);
+  let draft = $state("");
+  let open = $state(false);
+  let activeIndex = $state(-1);
+  let suggestionVersion = 0;
+  let suggestions = $state<string[]>([]);
+
+  const filteredSuggestions = $derived(
+    filterFrontmatterValueSuggestions(suggestions, draft, excludedValues),
+  );
+  const suggestionListId = $derived(
+    `mira-property-value-suggestions-${propertyKey.replace(/[^a-z0-9_-]+/giu, "-")}`,
+  );
+
+  $effect(() => {
+    if (activeIndex >= filteredSuggestions.length) {
+      activeIndex = -1;
+    }
+  });
+
+  async function loadSuggestions(nextQuery = draft): Promise<void> {
+    const version = ++suggestionVersion;
+    try {
+      const next = await readFrontmatterValueSuggestions(
+        config,
+        propertyKey,
+        nextQuery,
+      );
+      if (version === suggestionVersion) {
+        suggestions = next;
+      }
+    } catch {
+      if (version === suggestionVersion) {
+        suggestions = [];
+      }
+    }
+  }
+
+  function selectSuggestion(index: number): void {
+    const suggestion = filteredSuggestions[index];
+    if (suggestion) {
+      commitDraft(suggestion);
+    }
+  }
+
+  function commitDraft(nextValue = draft): void {
+    const committedValue = nextValue.trim();
+    if (!committedValue) {
+      return;
+    }
+    draft = "";
+    open = false;
+    activeIndex = -1;
+    onCommit(committedValue);
+  }
+
+  function handleBlur(event: FocusEvent): void {
+    const nextFocus = event.relatedTarget as HTMLElement | null;
+    if (nextFocus?.dataset.propertyValueSuggestion === "true") {
+      return;
+    }
+    queueMicrotask(() => {
+      if (inputEl?.ownerDocument.activeElement !== inputEl) {
+        open = false;
+        if (draft.trim()) {
+          commitDraft();
+        }
+      }
+    });
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === "ArrowDown" && filteredSuggestions.length) {
+      event.preventDefault();
+      open = true;
+      activeIndex =
+        activeIndex < 0 ? 0 : (activeIndex + 1) % filteredSuggestions.length;
+      return;
+    }
+    if (event.key === "ArrowUp" && filteredSuggestions.length) {
+      event.preventDefault();
+      open = true;
+      activeIndex =
+        activeIndex < 0
+          ? filteredSuggestions.length - 1
+          : (activeIndex - 1 + filteredSuggestions.length) %
+            filteredSuggestions.length;
+      return;
+    }
+    if (
+      (event.key === "Enter" || event.key === "Tab") &&
+      open &&
+      activeIndex >= 0 &&
+      activeIndex < filteredSuggestions.length
+    ) {
+      event.preventDefault();
+      selectSuggestion(activeIndex);
+      return;
+    }
+    if (
+      event.key === "Enter" ||
+      event.key === "Tab" ||
+      event.key === "," ||
+      event.key === ";"
+    ) {
+      if (draft.trim()) {
+        event.preventDefault();
+        commitDraft();
+      }
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      open = false;
+      activeIndex = -1;
+      draft = "";
+      inputEl?.blur();
+      return;
+    }
+    if (event.key === "Backspace" && !draft) {
+      event.preventDefault();
+      onBackspaceEmpty();
+    }
+  }
+
+  function textControlProps<T extends { type?: unknown }>(props: T) {
+    const { type: _triggerType, ...inputProps } = props;
+    return inputProps;
+  }
+</script>
+
+<div
+  class="mira-property-value-input"
+  data-open={open && filteredSuggestions.length ? "true" : undefined}
+>
+  <Popover.Root bind:open>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <input
+          {...textControlProps(props)}
+          bind:this={inputEl}
+          type="text"
+          class="metadata-input metadata-input-list min-w-[8ch] flex-1 bg-transparent px-1 py-0 text-xs outline-none"
+          aria-label={ariaLabel}
+          value={draft}
+          spellcheck="false"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-controls={suggestionListId}
+          aria-haspopup="listbox"
+          aria-expanded={open && filteredSuggestions.length > 0}
+          onclick={() => {
+            open = true;
+            activeIndex = -1;
+            void loadSuggestions();
+          }}
+          onfocus={() => {
+            open = true;
+            activeIndex = -1;
+            void loadSuggestions();
+          }}
+          oninput={(event) => {
+            const nextValue = (event.currentTarget as HTMLInputElement).value;
+            draft = nextValue;
+            open = true;
+            activeIndex = -1;
+            void loadSuggestions(nextValue);
+          }}
+          onblur={handleBlur}
+          onkeydown={handleKeydown}
+        />
+      {/snippet}
+    </Popover.Trigger>
+
+    {#if open && filteredSuggestions.length}
+      <Popover.Content
+        id={suggestionListId}
+        class="mira-property-value-suggestions"
+        role="listbox"
+        aria-label="Property value suggestions"
+        align="start"
+        side="bottom"
+        sideOffset={4}
+        collisionPadding={8}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        onCloseAutoFocus={(event) => event.preventDefault()}
+      >
+        {#each filteredSuggestions as suggestion, index (suggestion)}
+          <button
+            type="button"
+            class="mira-property-value-suggestion"
+            data-active={index === activeIndex ? "true" : undefined}
+            data-property-value-suggestion="true"
+            role="option"
+            aria-selected={index === activeIndex}
+            tabindex="-1"
+            onmousedown={(event) => event.preventDefault()}
+            onclick={() => selectSuggestion(index)}
+          >
+            <span>{suggestion}</span>
+          </button>
+        {/each}
+      </Popover.Content>
+    {/if}
+  </Popover.Root>
+</div>

package/dist/preview/components/frontmatter-property-value-input.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type FrontmatterConfig } from "./frontmatter-utils";
+type Props = {
+    propertyKey: string;
+    config?: FrontmatterConfig;
+    excludedValues?: string[];
+    ariaLabel: string;
+    onCommit: (value: string) => void;
+    onBackspaceEmpty: () => void;
+};
+declare const FrontmatterPropertyValueInput: import("svelte").Component<Props, {}, "">;
+type FrontmatterPropertyValueInput = ReturnType<typeof FrontmatterPropertyValueInput>;
+export default FrontmatterPropertyValueInput;
+//# sourceMappingURL=frontmatter-property-value-input.svelte.d.ts.map

package/dist/preview/components/frontmatter-property-value-input.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frontmatter-property-value-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/frontmatter-property-value-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,KAAK,GAAG;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAsLJ,QAAA,MAAM,6BAA6B,2CAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}

package/dist/preview/components/frontmatter-utils.d.ts

@@ -0,0 +1,2 @@
+export * from "../frontmatter";
+//# sourceMappingURL=frontmatter-utils.d.ts.map

package/dist/preview/components/frontmatter-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frontmatter-utils.d.ts","sourceRoot":"","sources":["../../../src/preview/components/frontmatter-utils.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/preview/components/frontmatter-utils.js

@@ -0,0 +1 @@
+export * from "../frontmatter";