@lapis-notes/api 0.1.0

package/dist/components/configuration/object-map-setting.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" module>
+  export type { ObjectMapOption } from "./object-map-types";
+</script>
+
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import type { ObjectType, SchemaType } from "../../configuration.svelte";
+  import type { ObjectMapOption } from "./object-map-types";
+  import ObjectMapRow from "./object-map-row.svelte";
+  import "./configuration.css";
+
+  let {
+    schema,
+    value = $bindable<Record<string, unknown>>({}),
+    valueOptions = [],
+    onValueQueryChange,
+    onValueChange,
+  }: {
+    schema: ObjectType;
+    value?: Record<string, unknown>;
+    valueOptions?: ObjectMapOption[];
+    onValueQueryChange?: (query: string) => void;
+    onValueChange?: (value: Record<string, unknown>) => void;
+  } = $props();
+
+  const valueSchema = $derived(
+    typeof schema.additionalProperties === "object"
+      ? schema.additionalProperties
+      : ({ type: "string" } satisfies SchemaType),
+  );
+  const entries = $derived(Object.entries(value));
+  const optionValues = $derived(
+    new Set(valueOptions.map((item) => item.value)),
+  );
+  const allowUnknownOptions = $derived(
+    "allowUnknownOptions" in valueSchema &&
+      valueSchema.allowUnknownOptions === true,
+  );
+  const selectOptions = $derived([
+    ...valueOptions,
+    ...entries
+      .map(([, entryValue]) => String(entryValue ?? ""))
+      .filter((entryValue) => entryValue && !optionValues.has(entryValue))
+      .map((entryValue) => ({
+        value: entryValue,
+        label: allowUnknownOptions
+          ? `${entryValue} (custom)`
+          : `${entryValue} (missing)`,
+        disabled: !allowUnknownOptions,
+      })),
+  ]);
+
+  function emit(next: Record<string, unknown>): void {
+    value = next;
+    onValueChange?.(next);
+  }
+
+  function nextEntryKey(): string {
+    const candidates = ["*.md", "*.txt", "**/*"];
+    const existing = new Set(Object.keys(value));
+    const candidate = candidates.find((entry) => !existing.has(entry));
+    if (candidate) {
+      return candidate;
+    }
+
+    let index = 1;
+    while (existing.has(`pattern-${index}`)) {
+      index += 1;
+    }
+    return `pattern-${index}`;
+  }
+
+  function updateKey(oldKey: string, nextKey: string): boolean {
+    if (oldKey === nextKey) {
+      return true;
+    }
+
+    if (nextKey in value && nextKey !== oldKey) {
+      return false;
+    }
+
+    const next: Record<string, unknown> = {};
+    for (const [key, entryValue] of Object.entries(value)) {
+      if (key === oldKey) {
+        next[nextKey] = entryValue;
+      } else {
+        next[key] = entryValue;
+      }
+    }
+    emit(next);
+    return true;
+  }
+
+  function updateEntryValue(key: string, entryValue: unknown): void {
+    emit({ ...value, [key]: entryValue });
+  }
+
+  function addEntry(): void {
+    const fallbackValue = selectOptions[0]?.value ?? "";
+    emit({ ...value, [nextEntryKey()]: fallbackValue });
+  }
+
+  function removeEntry(key: string): void {
+    const next = { ...value };
+    delete next[key];
+    emit(next);
+  }
+</script>
+
+<div data-ui-component="configuration" data-ui-part="stack">
+  <Table.Root class="configuration-table">
+    <Table.Header>
+      <Table.Row>
+        <Table.Head class="configuration-pattern-head">Pattern</Table.Head>
+        <Table.Head>Editor</Table.Head>
+        <Table.Head class="configuration-actions-head">Actions</Table.Head>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {#each entries as [key, entryValue], index (index)}
+        <ObjectMapRow
+          pattern={key}
+          {entryValue}
+          {valueSchema}
+          {selectOptions}
+          {onValueQueryChange}
+          onPatternChange={(nextPattern) => updateKey(key, nextPattern)}
+          onValueChange={(nextValue) => updateEntryValue(key, nextValue)}
+          onRemove={() => removeEntry(key)}
+        />
+      {/each}
+    </Table.Body>
+  </Table.Root>
+  <Button variant="outline" size="sm" onclick={addEntry}>Add association</Button
+  >
+</div>

package/dist/components/configuration/object-map-setting.svelte.d.ts

@@ -0,0 +1,14 @@
+export type { ObjectMapOption } from "./object-map-types";
+import type { ObjectType } from "../../configuration.svelte";
+import type { ObjectMapOption } from "./object-map-types";
+import "./configuration.css";
+type $$ComponentProps = {
+    schema: ObjectType;
+    value?: Record<string, unknown>;
+    valueOptions?: ObjectMapOption[];
+    onValueQueryChange?: (query: string) => void;
+    onValueChange?: (value: Record<string, unknown>) => void;
+};
+declare const ObjectMapSetting: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ObjectMapSetting = ReturnType<typeof ObjectMapSetting>;
+export default ObjectMapSetting;

package/dist/components/configuration/object-map-types.d.ts

@@ -0,0 +1,5 @@
+export type ObjectMapOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};

package/dist/components/configuration/object-map-types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/configuration/options-combobox-setting.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import type { ObjectMapOption } from "./object-map-setting.svelte";
+  import { filterComboboxOptions } from "./object-array-utils";
+  import "./configuration.css";
+
+  let {
+    value = $bindable(""),
+    options = [],
+    placeholder = "Enter or select a value",
+    onValueChange,
+    onQueryChange,
+  }: {
+    value?: string;
+    options?: ObjectMapOption[];
+    placeholder?: string;
+    onValueChange?: (value: string) => void;
+    onQueryChange?: (query: string) => void;
+  } = $props();
+
+  let draft = $state("");
+  let filterQuery = $state("");
+  let open = $state(false);
+  let queryTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    draft = value;
+    if (!open) {
+      filterQuery = "";
+    }
+  });
+
+  const visibleOptions = $derived.by(() =>
+    filterComboboxOptions(options, draft, filterQuery),
+  );
+
+  function emit(next: string): void {
+    value = next;
+    draft = next;
+    filterQuery = "";
+    onValueChange?.(next);
+  }
+
+  function scheduleQueryChange(nextQuery: string): void {
+    if (queryTimer) {
+      clearTimeout(queryTimer);
+    }
+    queryTimer = setTimeout(() => {
+      onQueryChange?.(nextQuery);
+    }, 200);
+  }
+
+  function handleInput(event: Event): void {
+    const target = event.currentTarget as HTMLInputElement;
+    draft = target.value;
+    filterQuery = draft;
+    open = true;
+    scheduleQueryChange(filterQuery);
+  }
+
+  function handleFocus(): void {
+    open = true;
+    filterQuery = "";
+    scheduleQueryChange("");
+  }
+
+  function handleBlur(): void {
+    setTimeout(() => {
+      open = false;
+      filterQuery = "";
+      if (draft !== value) {
+        emit(draft.trim());
+      }
+    }, 150);
+  }
+
+  function selectOption(optionValue: string): void {
+    emit(optionValue);
+    open = false;
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === "Enter") {
+      event.currentTarget instanceof HTMLInputElement &&
+        event.currentTarget.blur();
+    }
+    if (event.key === "Escape") {
+      open = false;
+      filterQuery = "";
+    }
+  }
+</script>
+
+<div data-ui-component="configuration" data-ui-part="combobox">
+  <Input
+    type="text"
+    class="configuration-combobox-input"
+    {placeholder}
+    value={draft}
+    oninput={handleInput}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    onkeydown={handleKeydown}
+    role="combobox"
+    aria-expanded={open}
+    aria-autocomplete="list"
+  />
+  {#if open && visibleOptions.length > 0}
+    <ul
+      data-ui-component="configuration"
+      data-ui-part="combobox-list"
+      role="listbox"
+    >
+      {#each visibleOptions as option (option.value)}
+        <li role="presentation">
+          <button
+            type="button"
+            data-ui-component="configuration"
+            data-ui-part="combobox-option"
+            disabled={option.disabled}
+            onclick={() => selectOption(option.value)}
+          >
+            {option.label}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>

package/dist/components/configuration/options-combobox-setting.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ObjectMapOption } from "./object-map-setting.svelte";
+import "./configuration.css";
+type $$ComponentProps = {
+    value?: string;
+    options?: ObjectMapOption[];
+    placeholder?: string;
+    onValueChange?: (value: string) => void;
+    onQueryChange?: (query: string) => void;
+};
+declare const OptionsComboboxSetting: import("svelte").Component<$$ComponentProps, {}, "value">;
+type OptionsComboboxSetting = ReturnType<typeof OptionsComboboxSetting>;
+export default OptionsComboboxSetting;

package/dist/components/copy-button/button.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import {
+    Button,
+    type ButtonProps,
+  } from "@lapismd/design-core/shadcn/button";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import { cn } from "../../utils";
+  import { Notice } from "../../workspace.svelte";
+  import ClipboardCheck from "@lucide/svelte/icons/clipboard-check";
+  import { Icon } from "@lapis-notes/api/icon";
+  import type { Snippet } from "svelte";
+
+  type Side = "top" | "right" | "bottom" | "left";
+
+  type Props = ButtonProps & {
+    content: string;
+    icon?: string;
+    tooltip?: string;
+    side?: Side;
+    children?: Snippet;
+  };
+
+  let copied = $state(false);
+  let timer: number = -1;
+
+  let {
+    content,
+    icon = "copy",
+    side,
+    children,
+    variant,
+    size,
+    tooltip,
+    class: className,
+    ...props
+  }: Props = $props();
+
+  function copyText(_evt: MouseEvent) {
+    navigator.clipboard.writeText(content).then(
+      () => {
+        /* clipboard successfully set */
+        copied = true;
+        window.clearTimeout(timer);
+        timer = window.setTimeout(() => (copied = false), 1000);
+      },
+      () => {
+        new Notice(`Failed to copy text`);
+      },
+    );
+  }
+</script>
+
+{#if tooltip}
+  <Tooltip.Provider>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props: triggerProps })}
+          <Button
+            {...triggerProps}
+            {...props}
+            class={cn(className)}
+            {size}
+            {variant}
+            onclick={(evt) => copyText(evt)}
+          >
+            {@render children?.()}
+            {#if copied}
+              <ClipboardCheck />
+            {:else}
+              <Icon name={icon} />
+            {/if}
+          </Button>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content {side}>{tooltip}</Tooltip.Content>
+    </Tooltip.Root>
+  </Tooltip.Provider>
+{:else}
+  <Button
+    class={cn(className)}
+    {size}
+    {variant}
+    {...props}
+    onclick={(evt) => copyText(evt)}
+  >
+    {@render children?.()}
+    {#if copied}
+      <ClipboardCheck />
+    {:else}
+      <Icon name={icon} />
+    {/if}
+  </Button>
+{/if}

package/dist/components/copy-button/button.svelte.d.ts

@@ -0,0 +1,13 @@
+import { Button, type ButtonProps } from "@lapismd/design-core/shadcn/button";
+import type { Snippet } from "svelte";
+type Side = "top" | "right" | "bottom" | "left";
+type Props = ButtonProps & {
+    content: string;
+    icon?: string;
+    tooltip?: string;
+    side?: Side;
+    children?: Snippet;
+};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/copy-button/index.d.ts

@@ -0,0 +1,2 @@
+import CopyButton from "./button.svelte";
+export { CopyButton, CopyButton as Root };

package/dist/components/copy-button/index.js

@@ -0,0 +1,2 @@
+import CopyButton from "./button.svelte";
+export { CopyButton, CopyButton as Root };