@lapis-notes/api 0.1.0

package/dist/components/configuration/configuration.css

@@ -0,0 +1,199 @@
+/* Configuration settings chrome — lists, object array/map/grid, combobox */
+
+[data-ui-component="configuration"] {
+  --ui-configuration-control-height: var(--input-height, var(--ui-control-height, 2rem));
+  --ui-configuration-gap: 0.5rem;
+  --ui-configuration-icon-size: 1rem;
+  --ui-configuration-grip-width: 2.5rem;
+  --ui-configuration-actions-width: 4rem;
+  --ui-configuration-pattern-width: 45%;
+  --ui-configuration-property-width: 40%;
+  --ui-configuration-combobox-max-height: 12rem;
+  --ui-configuration-combobox-z: 50;
+}
+
+[data-ui-component="configuration"][data-ui-part="list"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-configuration-gap);
+  width: 100%;
+}
+
+[data-ui-component="configuration"][data-ui-part="list-row"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-configuration-gap);
+}
+
+[data-ui-component="configuration"][data-ui-part="control"],
+[data-ui-component="configuration"] .configuration-control {
+  height: var(--ui-configuration-control-height);
+  border: none;
+}
+
+[data-ui-component="configuration"][data-ui-part="control-grow"],
+[data-ui-component="configuration"] .configuration-control-grow {
+  flex: 1 1 0%;
+  height: var(--ui-configuration-control-height);
+  border: none;
+}
+
+[data-ui-component="configuration"][data-ui-part="icon-button"],
+[data-ui-component="configuration"] .configuration-icon-button {
+  width: var(--ui-configuration-control-height);
+  height: var(--ui-configuration-control-height);
+  flex-shrink: 0;
+}
+
+[data-ui-component="configuration"][data-ui-part="add-button"],
+[data-ui-component="configuration"] .configuration-add-button {
+  width: fit-content;
+}
+
+[data-ui-component="configuration"][data-ui-part="stack"],
+[data-ui-component="configuration"] .configuration-stack,
+.config-array-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-configuration-gap);
+}
+
+[data-ui-component="configuration"][data-ui-part="table"],
+[data-ui-component="configuration"] .configuration-table {
+  width: 100%;
+  font-size: 0.875rem;
+}
+
+[data-ui-component="configuration"][data-ui-part="grip-head"],
+[data-ui-component="configuration"] .configuration-grip-head {
+  width: var(--ui-configuration-grip-width);
+}
+
+[data-ui-component="configuration"][data-ui-part="actions-head"],
+[data-ui-component="configuration"] .configuration-actions-head {
+  width: var(--ui-configuration-actions-width);
+  text-align: right;
+}
+
+[data-ui-component="configuration"][data-ui-part="pattern-head"],
+[data-ui-component="configuration"] .configuration-pattern-head {
+  width: var(--ui-configuration-pattern-width);
+}
+
+[data-ui-component="configuration"][data-ui-part="property-head"],
+[data-ui-component="configuration"] .configuration-property-head {
+  width: var(--ui-configuration-property-width);
+}
+
+[data-ui-component="configuration"][data-ui-part="cell"],
+[data-ui-component="configuration"] .configuration-cell {
+  vertical-align: middle;
+}
+
+[data-ui-component="configuration"][data-ui-part="cell-label"],
+[data-ui-component="configuration"] .configuration-cell-label {
+  vertical-align: middle;
+  font-weight: 500;
+}
+
+[data-ui-component="configuration"][data-ui-part="cell-actions"],
+[data-ui-component="configuration"] .configuration-cell-actions {
+  vertical-align: middle;
+  text-align: right;
+}
+
+[data-ui-component="configuration"][data-ui-part="grip"],
+.config-array-table__grip {
+  width: var(--ui-configuration-grip-width);
+  vertical-align: middle;
+}
+
+[data-ui-component="configuration"][data-ui-part="grip-button"],
+[data-ui-component="configuration"] .configuration-grip-button {
+  width: var(--ui-configuration-control-height);
+  height: var(--ui-configuration-control-height);
+  flex-shrink: 0;
+  cursor: grab;
+}
+
+[data-ui-component="configuration"][data-ui-part="icon"],
+[data-ui-component="configuration"] .configuration-icon {
+  width: var(--ui-configuration-icon-size);
+  height: var(--ui-configuration-icon-size);
+}
+
+[data-ui-component="configuration"][data-ui-part="grip-icon"],
+[data-ui-component="configuration"] .configuration-grip-icon {
+  width: var(--ui-configuration-icon-size);
+  height: var(--ui-configuration-icon-size);
+  opacity: 0.6;
+}
+
+[data-ui-component="configuration"][data-ui-part="combobox"],
+[data-ui-component="configuration"] .configuration-combobox {
+  position: relative;
+  width: 100%;
+}
+
+[data-ui-component="configuration"][data-ui-part="combobox-input"],
+[data-ui-component="configuration"] .configuration-combobox-input {
+  width: 100%;
+  height: var(--ui-configuration-control-height);
+  border: none;
+}
+
+[data-ui-component="configuration"][data-ui-part="combobox-list"] {
+  position: absolute;
+  z-index: var(--ui-configuration-combobox-z);
+  margin-block-start: 0.25rem;
+  max-height: var(--ui-configuration-combobox-max-height);
+  width: 100%;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius, 0.375rem);
+  background: var(--popover);
+  color: var(--popover-foreground);
+  padding: 0.25rem;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+[data-ui-component="configuration"][data-ui-part="combobox-option"] {
+  display: flex;
+  width: 100%;
+  border-radius: calc(var(--radius, 0.375rem) - 2px);
+  padding: 0.375rem 0.5rem;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+[data-ui-component="configuration"][data-ui-part="combobox-option"]:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+[data-ui-component="configuration"][data-ui-part="combobox-option"]:disabled {
+  opacity: 0.5;
+}
+
+.config-array-table.is-table-chrome-dragging {
+  user-select: none;
+}
+
+.config-array-table__row.is-row-drag-source {
+  opacity: 0.55;
+}
+
+.config-array-table__grip.is-dragging-top {
+  box-shadow: inset 0 2px 0 0 var(--primary, var(--ring));
+}
+
+.config-array-table__grip.is-dragging-bottom {
+  box-shadow: inset 0 -2px 0 0 var(--primary, var(--ring));
+}
+
+.config-array-table__grip.is-drag-source {
+  opacity: 0.7;
+}

package/dist/components/configuration/date-setting.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { DatePicker, TimePicker } from "@lapismd/design-core/forms";
+
+  let {
+    value = $bindable(""),
+    format = "date",
+    onValueChange,
+  }: {
+    value?: string;
+    format?: "date" | "time";
+    onValueChange?: (value: string) => void;
+  } = $props();
+
+  /**
+   * Normalize stored settings strings for the pickers.
+   * Legacy `datetime-local` values look like `YYYY-MM-DDTHH:mm` (optional seconds).
+   */
+  function normalizeInbound(
+    raw: string | undefined,
+    fmt: "date" | "time",
+  ): string | undefined {
+    const trimmed = (raw ?? "").trim();
+    if (!trimmed) return undefined;
+
+    if (trimmed.includes("T")) {
+      const [datePart, timePart = ""] = trimmed.split("T");
+      if (fmt === "date") {
+        return datePart || undefined;
+      }
+      const match = /^(\d{2}):(\d{2})/.exec(timePart);
+      return match ? `${match[1]}:${match[2]}` : timePart || undefined;
+    }
+
+    if (fmt === "date") {
+      // Accept bare `YYYY-MM-DD` (or longer ISO prefixes).
+      const match = /^(\d{4}-\d{2}-\d{2})/.exec(trimmed);
+      return match?.[1] ?? trimmed;
+    }
+
+    const match = /^(\d{2}):(\d{2})/.exec(trimmed);
+    return match ? `${match[1]}:${match[2]}` : trimmed;
+  }
+
+  function emit(next: string | undefined): void {
+    const out = next ?? "";
+    value = out;
+    onValueChange?.(out);
+  }
+</script>
+
+{#if format === "time"}
+  <TimePicker
+    bind:value={
+      () => normalizeInbound(value, "time"),
+      (next) => emit(next)
+    }
+    clearable
+    ariaLabel="Choose time"
+    placeholder="Pick time"
+  />
+{:else}
+  <DatePicker
+    bind:value={
+      () => normalizeInbound(value, "date"),
+      (next) => emit(next)
+    }
+    clearable
+    ariaLabel="Choose date"
+    placeholder="Pick date"
+  />
+{/if}

package/dist/components/configuration/date-setting.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    value?: string;
+    format?: "date" | "time";
+    onValueChange?: (value: string) => void;
+};
+declare const DateSetting: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateSetting = ReturnType<typeof DateSetting>;
+export default DateSetting;

package/dist/components/configuration/list-setting.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { Switch } from "@lapismd/design-core/shadcn/switch";
+  import { Select } from "../select";
+  import type { ObjectMapOption } from "./object-map-setting.svelte";
+  import { buildSelectOptionsForValue } from "./object-array-utils";
+  import "./configuration.css";
+
+  type ItemType = "string" | "number" | "integer" | "boolean";
+
+  let {
+    itemType,
+    value = $bindable<unknown[]>([]),
+    valueOptions = [],
+    allowUnknownOptions = false,
+    onValueChange,
+  }: {
+    itemType: ItemType;
+    value?: unknown[];
+    valueOptions?: ObjectMapOption[];
+    allowUnknownOptions?: boolean;
+    onValueChange?: (value: unknown[]) => void;
+  } = $props();
+
+  function emit(next: unknown[]): void {
+    value = next;
+    onValueChange?.(next);
+  }
+
+  function addItem(): void {
+    const next = [...value];
+    if (itemType === "boolean") {
+      next.push(false);
+    } else if (itemType === "number" || itemType === "integer") {
+      next.push(0);
+    } else if (valueOptions.length > 0) {
+      next.push(valueOptions[0]?.value ?? "");
+    } else {
+      next.push("");
+    }
+    emit(next);
+  }
+
+  function removeItem(index: number): void {
+    emit(value.filter((_, i) => i !== index));
+  }
+
+  function updateItem(index: number, nextValue: unknown): void {
+    const next = [...value];
+    next[index] = nextValue;
+    emit(next);
+  }
+</script>
+
+<div data-ui-component="configuration" data-ui-part="list">
+  {#each value as item, index (index)}
+    <div data-ui-component="configuration" data-ui-part="list-row">
+      {#if itemType === "boolean"}
+        <Switch
+          checked={Boolean(item)}
+          onCheckedChange={(checked) => updateItem(index, checked)}
+        />
+      {:else if itemType === "number" || itemType === "integer"}
+        <Input
+          type="number"
+          class="configuration-control-grow"
+          value={String(item ?? 0)}
+          oninput={(event) => {
+            const target = event.currentTarget as HTMLInputElement;
+            const parsed = Number(target.value);
+            updateItem(index, Number.isFinite(parsed) ? parsed : 0);
+          }}
+        />
+      {:else if valueOptions.length > 0 && !allowUnknownOptions}
+        <Select
+          type="single"
+          value={String(item ?? "")}
+          items={buildSelectOptionsForValue(valueOptions, item, allowUnknownOptions)}
+          placeholder="Select"
+          onValueChange={(nextValue) => updateItem(index, nextValue)}
+        />
+      {:else if valueOptions.length > 0}
+        <Select
+          type="single"
+          value={String(item ?? "")}
+          items={buildSelectOptionsForValue(valueOptions, item, allowUnknownOptions)}
+          placeholder="Select"
+          onValueChange={(nextValue) => updateItem(index, nextValue)}
+        />
+        <Input
+          type="text"
+          class="configuration-control-grow"
+          value={String(item ?? "")}
+          oninput={(event) => {
+            const target = event.currentTarget as HTMLInputElement;
+            updateItem(index, target.value);
+          }}
+        />
+      {:else}
+        <Input
+          type="text"
+          class="configuration-control-grow"
+          value={String(item ?? "")}
+          oninput={(event) => {
+            const target = event.currentTarget as HTMLInputElement;
+            updateItem(index, target.value);
+          }}
+        />
+      {/if}
+      <Button
+        variant="ghost"
+        size="icon"
+        class="configuration-icon-button"
+        onclick={() => removeItem(index)}
+        aria-label="Remove item"
+      >
+        ×
+      </Button>
+    </div>
+  {/each}
+  <Button
+    variant="ghost"
+    size="sm"
+    class="configuration-add-button"
+    onclick={addItem}>Add item</Button
+  >
+</div>

package/dist/components/configuration/list-setting.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ObjectMapOption } from "./object-map-setting.svelte";
+import "./configuration.css";
+type ItemType = "string" | "number" | "integer" | "boolean";
+type $$ComponentProps = {
+    itemType: ItemType;
+    value?: unknown[];
+    valueOptions?: ObjectMapOption[];
+    allowUnknownOptions?: boolean;
+    onValueChange?: (value: unknown[]) => void;
+};
+declare const ListSetting: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ListSetting = ReturnType<typeof ListSetting>;
+export default ListSetting;

package/dist/components/configuration/object-array-row-grip.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { createDraggable, createDroppable } from "@dnd-kit/svelte";
+  import GripVertical from "@lucide/svelte/icons/grip-vertical";
+  import { cn } from "@lapis-notes/ui";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import {
+    dropIndicatorClasses,
+    isRowDragSource,
+    SETTINGS_TABLE_ROW_TYPE,
+    type SettingsTableDragSource,
+  } from "./object-array-table-dnd";
+
+  let {
+    rowIndex,
+    dragSource,
+    dragOverIndex,
+  }: {
+    rowIndex: number;
+    dragSource: SettingsTableDragSource | null;
+    dragOverIndex: number | null;
+  } = $props();
+
+  let cellRef = $state<HTMLElement | null>(null);
+
+  const rowDraggable = createDraggable({
+    get id() {
+      return `settings-table-row:${rowIndex}`;
+    },
+    type: SETTINGS_TABLE_ROW_TYPE,
+    get data() {
+      return { type: SETTINGS_TABLE_ROW_TYPE, index: rowIndex };
+    },
+  });
+
+  const rowDroppable = createDroppable({
+    get id() {
+      return `settings-table-row-drop:${rowIndex}:grip`;
+    },
+    accept: SETTINGS_TABLE_ROW_TYPE,
+    get data() {
+      return { type: SETTINGS_TABLE_ROW_TYPE, index: rowIndex };
+    },
+  });
+
+  $effect(() => {
+    if (!cellRef) {
+      return;
+    }
+    const cleanupDraggable = rowDraggable.attach(cellRef);
+    const cleanupDroppable = rowDroppable.attach(cellRef);
+    return () => {
+      cleanupDraggable();
+      cleanupDroppable();
+    };
+  });
+</script>
+
+<Table.Cell
+  bind:ref={cellRef}
+  class={cn(
+    "config-array-table__grip",
+    dropIndicatorClasses(dragSource, dragOverIndex, rowIndex),
+    isRowDragSource(dragSource, rowIndex) && "is-drag-source is-row-drag-source",
+  )}
+>
+  <Button
+    variant="ghost"
+    size="icon"
+    class="configuration-grip-button"
+    data-grab-handle=""
+    data-testid="object-array-row-grip"
+    aria-label="Drag row"
+    {@attach rowDraggable.attachHandle}
+  >
+    <GripVertical class="configuration-grip-icon" />
+  </Button>
+</Table.Cell>

package/dist/components/configuration/object-array-row-grip.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type SettingsTableDragSource } from "./object-array-table-dnd";
+type $$ComponentProps = {
+    rowIndex: number;
+    dragSource: SettingsTableDragSource | null;
+    dragOverIndex: number | null;
+};
+declare const ObjectArrayRowGrip: import("svelte").Component<$$ComponentProps, {}, "">;
+type ObjectArrayRowGrip = ReturnType<typeof ObjectArrayRowGrip>;
+export default ObjectArrayRowGrip;

package/dist/components/configuration/object-array-row.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import Trash2 from "@lucide/svelte/icons/trash-2";
+  import { cn } from "@lapis-notes/ui";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { Switch } from "@lapismd/design-core/shadcn/switch";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import { Select } from "../select";
+  import type { SchemaType } from "../../configuration.svelte";
+  import type { ObjectMapOption } from "./object-map-setting.svelte";
+  import OptionsComboboxSetting from "./options-combobox-setting.svelte";
+  import {
+    buildSelectOptionsForValue,
+    isOptionsSourceComboboxField,
+  } from "./object-array-utils";
+  import ObjectArrayRowGrip from "./object-array-row-grip.svelte";
+  import {
+    isRowDragSource,
+    type SettingsTableDragSource,
+  } from "./object-array-table-dnd";
+
+  let {
+    row,
+    index,
+    columns,
+    columnOptions = {},
+    columnOnQueryChange = {},
+    dragSource = null,
+    dragOverIndex = null,
+    showGrip = false,
+    removeDisabled = false,
+    onFieldChange,
+    onRemove,
+  }: {
+    row: Record<string, unknown>;
+    index: number;
+    columns: Array<[string, SchemaType]>;
+    columnOptions?: Record<string, ObjectMapOption[]>;
+    columnOnQueryChange?: Record<string, (query: string) => void>;
+    dragSource?: SettingsTableDragSource | null;
+    dragOverIndex?: number | null;
+    showGrip?: boolean;
+    removeDisabled?: boolean;
+    onFieldChange: (key: string, value: unknown) => void;
+    onRemove: () => void;
+  } = $props();
+
+  let draftValues = $state<Record<string, string>>({});
+
+  $effect(() => {
+    const next: Record<string, string> = {};
+    for (const [key] of columns) {
+      next[key] = String(row[key] ?? "");
+    }
+    draftValues = next;
+  });
+
+  function commitStringField(key: string): void {
+    const trimmed = draftValues[key]?.trim() ?? "";
+    if (trimmed !== String(row[key] ?? "")) {
+      onFieldChange(key, trimmed);
+    }
+    draftValues = { ...draftValues, [key]: trimmed };
+  }
+
+  function handleStringKeydown(event: KeyboardEvent, key: string): void {
+    if (event.key === "Enter") {
+      event.currentTarget instanceof HTMLInputElement &&
+        event.currentTarget.blur();
+    }
+  }
+
+  function inputTypeForString(field: SchemaType): HTMLInputElement["type"] {
+    if (field.type !== "string" || !("format" in field) || !field.format) {
+      return "text";
+    }
+    if (field.format === "email") {
+      return "email";
+    }
+    if (field.format === "uri") {
+      return "url";
+    }
+    return "text";
+  }
+</script>
+
+<Table.Row
+  class={cn(
+    "config-array-table__row",
+    isRowDragSource(dragSource, index) && "is-row-drag-source",
+  )}
+>
+  {#if showGrip}
+    <ObjectArrayRowGrip
+      rowIndex={index}
+      {dragSource}
+      dragOverIndex={dragOverIndex ?? null}
+    />
+  {/if}
+  {#each columns as [key, field] (key)}
+    <Table.Cell class="configuration-cell">
+      {#if field.type === "boolean"}
+        <Switch
+          checked={Boolean(row[key])}
+          onCheckedChange={(checked) => onFieldChange(key, checked)}
+        />
+      {:else if field.type === "number" || field.type === "integer"}
+        <Input
+          type="number"
+          class="configuration-control"
+          value={String(row[key] ?? 0)}
+          oninput={(event) => {
+            const target = event.currentTarget as HTMLInputElement;
+            const parsed = Number(target.value);
+            onFieldChange(key, Number.isFinite(parsed) ? parsed : 0);
+          }}
+        />
+      {:else if isOptionsSourceComboboxField(field)}
+        <OptionsComboboxSetting
+          value={String(row[key] ?? "")}
+          options={columnOptions[key] ?? []}
+          placeholder="Enter or select"
+          onValueChange={(nextValue) => onFieldChange(key, nextValue)}
+          onQueryChange={columnOnQueryChange[key]}
+        />
+      {:else if field.type === "string" && (columnOptions[key]?.length ?? 0) > 0}
+        <Select
+          type="single"
+          value={String(row[key] ?? "")}
+          items={buildSelectOptionsForValue(
+            columnOptions[key] ?? [],
+            row[key],
+            "allowUnknownOptions" in field && field.allowUnknownOptions === true,
+          )}
+          placeholder="Select"
+          onValueChange={(nextValue) => onFieldChange(key, nextValue)}
+        />
+      {:else if field.type === "string"}
+        <Input
+          type={inputTypeForString(field)}
+          class="configuration-control"
+          data-testid={`object-array-cell-${key}`}
+          bind:value={draftValues[key]}
+          onblur={() => commitStringField(key)}
+          onkeydown={(event) => handleStringKeydown(event, key)}
+        />
+      {/if}
+    </Table.Cell>
+  {/each}
+  <Table.Cell class="configuration-cell-actions">
+    <Button
+      variant="ghost"
+      size="icon"
+      class="configuration-icon-button"
+      data-testid="object-array-remove-button"
+      aria-label="Remove row"
+      disabled={removeDisabled}
+      onclick={onRemove}
+    >
+      <Trash2 class="configuration-icon" />
+    </Button>
+  </Table.Cell>
+</Table.Row>

package/dist/components/configuration/object-array-row.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { SchemaType } from "../../configuration.svelte";
+import type { ObjectMapOption } from "./object-map-setting.svelte";
+import { type SettingsTableDragSource } from "./object-array-table-dnd";
+type $$ComponentProps = {
+    row: Record<string, unknown>;
+    index: number;
+    columns: Array<[string, SchemaType]>;
+    columnOptions?: Record<string, ObjectMapOption[]>;
+    columnOnQueryChange?: Record<string, (query: string) => void>;
+    dragSource?: SettingsTableDragSource | null;
+    dragOverIndex?: number | null;
+    showGrip?: boolean;
+    removeDisabled?: boolean;
+    onFieldChange: (key: string, value: unknown) => void;
+    onRemove: () => void;
+};
+declare const ObjectArrayRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type ObjectArrayRow = ReturnType<typeof ObjectArrayRow>;
+export default ObjectArrayRow;