@lapis-notes/lapis-plugin-docs 0.0.0-stage → 0.1.0

package/dist/docs/candidates/SearchableChoicePicker.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	/**
+	 * DESIGN_CORE_CANDIDATE: SearchableChoicePicker — ported for Docs; promote to design-core/forms later.
+	 */
+  import "./SearchableChoicePicker.css";
+  import { Command as CommandPrimitive } from "bits-ui";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import SearchIcon from "@lucide/svelte/icons/search";
+  import type { SearchableChoiceOption } from "@lapismd/design-core/forms";
+
+  let {
+    value = "",
+    options,
+    placeholder = "Select option",
+    searchPlaceholder = "Search...",
+    emptyLabel = "No options found.",
+    ariaLabel = "Select option",
+    allowCustom = true,
+    normalize = (next: string) => next.trim().toLowerCase(),
+    onChange = () => {},
+  }: {
+    value?: string;
+    options: SearchableChoiceOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    ariaLabel?: string;
+    allowCustom?: boolean;
+    normalize?: (value: string) => string;
+    onChange?: (value: string) => void;
+  } = $props();
+
+  let open = $state(false);
+  let query = $state("");
+  let root = $state<HTMLElement | null>(null);
+
+  const currentOption = $derived(
+    options.find((option) => option.value === value),
+  );
+  const triggerLabel = $derived(
+    currentOption?.label ?? (value.trim() || placeholder),
+  );
+  const showPlaceholder = $derived(!value.trim());
+
+  const filteredOptions = $derived.by(() => {
+    const needle = query.trim().toLowerCase();
+    return options.filter((option) => {
+      if (!needle) return true;
+      const haystack = [
+        option.value,
+        option.label,
+        ...(option.keywords ?? []),
+      ]
+        .join(" ")
+        .toLowerCase();
+      return haystack.includes(needle);
+    });
+  });
+
+  const trimmedQuery = $derived(query.trim());
+  const exactMatch = $derived(
+    trimmedQuery.length > 0 &&
+      options.some(
+        (option) =>
+          option.value.toLowerCase() === trimmedQuery.toLowerCase() ||
+          option.label.toLowerCase() === trimmedQuery.toLowerCase(),
+      ),
+  );
+  const canCreateCustom = $derived(
+    allowCustom && trimmedQuery.length > 0 && !exactMatch,
+  );
+
+  $effect(() => {
+    if (!open) return;
+
+    let armed = false;
+    const armTimer = setTimeout(() => {
+      armed = true;
+    }, 0);
+
+    function handlePointerDown(event: PointerEvent) {
+      if (!armed) return;
+      if (!(event.target instanceof Node)) return;
+      if (root?.contains(event.target)) return;
+      open = false;
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => {
+      clearTimeout(armTimer);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  });
+
+  $effect(() => {
+    if (!open) query = "";
+  });
+
+  function select(nextValue: string) {
+    onChange(normalize(nextValue));
+    open = false;
+  }
+
+  function toggleOpen() {
+    open = !open;
+  }
+
+  function handleCustomSelect() {
+    if (!trimmedQuery) return;
+    select(trimmedQuery);
+  }
+</script>
+
+<div bind:this={root} class="cv-searchable-choice-picker" data-open={open}>
+  <button
+    type="button"
+    class="cv-searchable-choice-trigger"
+    class:is-placeholder={showPlaceholder}
+    aria-label={ariaLabel}
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    onclick={toggleOpen}
+  >
+    <span class="cv-searchable-choice-trigger-label">{triggerLabel}</span>
+    <ChevronDownIcon aria-hidden="true" />
+  </button>
+
+  {#if open}
+    <div class="cv-searchable-choice-popover">
+      <CommandPrimitive.Root
+        class="cv-searchable-choice-command"
+        label={ariaLabel}
+        shouldFilter={false}
+        loop
+      >
+        <div class="cv-searchable-choice-command-input-row">
+          <SearchIcon aria-hidden="true" />
+          <CommandPrimitive.Input
+            bind:value={query}
+            class="cv-searchable-choice-command-input"
+            placeholder={searchPlaceholder}
+          />
+        </div>
+        <CommandPrimitive.List class="cv-searchable-choice-command-list">
+          {#if filteredOptions.length > 0}
+            <CommandPrimitive.Group
+              class="cv-searchable-choice-command-group"
+              value="options"
+              forceMount
+            >
+              <CommandPrimitive.GroupItems>
+                {#each filteredOptions as option (option.value)}
+                  <CommandPrimitive.Item
+                    class={[
+                      "cv-searchable-choice-command-item",
+                      option.value === value && "is-active",
+                    ]
+                      .filter(Boolean)
+                      .join(" ")}
+                    value={option.value}
+                    keywords={[option.label, ...(option.keywords ?? [])]}
+                    onSelect={() => select(option.value)}
+                  >
+                    <span class="cv-searchable-choice-option-label">
+                      {option.label}
+                    </span>
+                    {#if option.label.toLowerCase() !== option.value.toLowerCase()}
+                      <span class="cv-searchable-choice-option-value">
+                        {option.value}
+                      </span>
+                    {/if}
+                  </CommandPrimitive.Item>
+                {/each}
+              </CommandPrimitive.GroupItems>
+            </CommandPrimitive.Group>
+          {/if}
+
+          {#if canCreateCustom}
+            <CommandPrimitive.Group
+              class="cv-searchable-choice-command-group"
+              value="create"
+              forceMount
+            >
+              <CommandPrimitive.GroupItems>
+                <CommandPrimitive.Item
+                  class="cv-searchable-choice-command-item"
+                  value={`__create__:${trimmedQuery}`}
+                  onSelect={handleCustomSelect}
+                >
+                  <span class="cv-searchable-choice-create-label">
+                    Use "{trimmedQuery}"
+                  </span>
+                </CommandPrimitive.Item>
+              </CommandPrimitive.GroupItems>
+            </CommandPrimitive.Group>
+          {:else if filteredOptions.length === 0}
+            <CommandPrimitive.Empty
+              class="cv-searchable-choice-empty"
+              forceMount
+            >
+              {emptyLabel}
+            </CommandPrimitive.Empty>
+          {/if}
+        </CommandPrimitive.List>
+      </CommandPrimitive.Root>
+    </div>
+  {/if}
+</div>

package/dist/docs/candidates/SearchableChoicePicker.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+     * DESIGN_CORE_CANDIDATE: SearchableChoicePicker — ported for Docs; promote to design-core/forms later.
+     */
+import "./SearchableChoicePicker.css";
+import type { SearchableChoiceOption } from "@lapismd/design-core/forms";
+type $$ComponentProps = {
+    value?: string;
+    options: SearchableChoiceOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    ariaLabel?: string;
+    allowCustom?: boolean;
+    normalize?: (value: string) => string;
+    onChange?: (value: string) => void;
+};
+declare const SearchableChoicePicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchableChoicePicker = ReturnType<typeof SearchableChoicePicker>;
+export default SearchableChoicePicker;

package/dist/docs/candidates/StructuredTable.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	/**
+	 * DESIGN_CORE_CANDIDATE: StructuredTable — ported for Docs; promote to design-core/forms later.
+	 */
+	let {
+		columns = [],
+		rows = [],
+		empty = ''
+	}: {
+		columns?: string[];
+		rows?: string[][];
+		empty?: string;
+	} = $props();
+
+	const visibleColumns = $derived(columns.filter((column) => column.trim()));
+</script>
+
+{#if visibleColumns.length}
+	<div class="cv-structured-table-wrap">
+		<table class="cv-structured-table">
+			<thead>
+				<tr>
+					{#each visibleColumns as column, columnIndex (`${column}-${columnIndex}`)}
+						<th>{column}</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#each rows as row, rowIndex (rowIndex)}
+					<tr>
+						{#each visibleColumns as _, cellIndex (cellIndex)}
+							<td>{row[cellIndex] ?? ''}</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+{:else if empty}
+	<p class="cv-structured-table-empty">{empty}</p>
+{/if}
+
+<style>
+	.cv-structured-table-wrap {
+		overflow-x: auto;
+		width: 100%;
+	}
+
+	.cv-structured-table {
+		width: 100%;
+		border: 1px solid var(--kanban-border, rgb(226 232 240));
+		border-collapse: separate;
+		border-radius: 0.6rem;
+		border-spacing: 0;
+		background: var(--kanban-card, rgb(255 255 255));
+		font-size: 0.92rem;
+		overflow: hidden;
+	}
+
+	.cv-structured-table th,
+	.cv-structured-table td {
+		border-bottom: 1px solid color-mix(in srgb, var(--kanban-border, rgb(226 232 240)) 84%, transparent);
+		padding: 0.55rem 0.7rem;
+		text-align: left;
+		vertical-align: top;
+	}
+
+	.cv-structured-table th {
+		background: color-mix(in srgb, var(--card-color, var(--column-color, var(--kanban-accent, rgb(14 165 233)))) 10%, var(--kanban-card, rgb(255 255 255)));
+		font-size: 0.78rem;
+		font-weight: 900;
+		white-space: nowrap;
+	}
+
+	.cv-structured-table th + th,
+	.cv-structured-table td + td {
+		border-left: 1px solid color-mix(in srgb, var(--kanban-border, rgb(226 232 240)) 74%, transparent);
+	}
+
+	.cv-structured-table tbody tr:nth-child(even) td {
+		background: color-mix(in srgb, var(--kanban-card-foreground, rgb(15 23 42)) 3%, transparent);
+	}
+
+	.cv-structured-table tbody tr:last-child td {
+		border-bottom: 0;
+	}
+
+	.cv-structured-table td {
+		overflow-wrap: anywhere;
+	}
+
+	.cv-structured-table-empty {
+		margin: 0;
+		color: var(--kanban-muted);
+		font-size: 0.85rem;
+		font-weight: 700;
+	}
+</style>

package/dist/docs/candidates/StructuredTable.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    columns?: string[];
+    rows?: string[][];
+    empty?: string;
+};
+declare const StructuredTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type StructuredTable = ReturnType<typeof StructuredTable>;
+export default StructuredTable;

package/dist/docs/candidates/StructuredTableEditor.svelte

@@ -0,0 +1,374 @@
+<script lang="ts">
+	/**
+	 * DESIGN_CORE_CANDIDATE: StructuredTableEditor — ported for Docs; promote to design-core/forms later.
+	 */
+	import ArrowDownIcon from '@lucide/svelte/icons/arrow-down';
+	import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
+	import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
+	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	import Trash2Icon from '@lucide/svelte/icons/trash-2';
+	import { autosizeTextarea } from '@lapismd/design-core/forms';
+
+	type TablePatch = {
+		columns: string[];
+		rows: string[][];
+	};
+
+	let {
+		columns = [],
+		rows = [],
+		onChange = () => {}
+	}: {
+		columns?: string[];
+		rows?: string[][];
+		onChange?: (table: TablePatch) => void;
+	} = $props();
+
+	const normalizedColumns = $derived(columns.length ? columns : ['Column']);
+	const normalizedRows = $derived(rows.length ? normalizeRows(rows, normalizedColumns.length) : [[]]);
+
+	function emit(nextColumns: string[], nextRows: string[][]) {
+		onChange({
+			columns: nextColumns,
+			rows: normalizeRows(nextRows, nextColumns.length)
+		});
+	}
+
+	function updateColumn(index: number, value: string) {
+		const nextColumns = [...normalizedColumns];
+		nextColumns[index] = value;
+		emit(nextColumns, normalizedRows);
+	}
+
+	function addColumn() {
+		const nextColumns = [...normalizedColumns, `Column ${normalizedColumns.length + 1}`];
+		emit(
+			nextColumns,
+			normalizedRows.map((row) => [...row, ''])
+		);
+	}
+
+	function removeColumn(index: number) {
+		const nextColumns = normalizedColumns.filter((_, columnIndex) => columnIndex !== index);
+		const safeColumns = nextColumns.length ? nextColumns : ['Column'];
+		emit(
+			safeColumns,
+			normalizedRows.map((row) => row.filter((_, cellIndex) => cellIndex !== index))
+		);
+	}
+
+	function moveColumn(index: number, direction: -1 | 1) {
+		const targetIndex = index + direction;
+		if (targetIndex < 0 || targetIndex >= normalizedColumns.length) return;
+
+		const nextColumns = [...normalizedColumns];
+		[nextColumns[index], nextColumns[targetIndex]] = [nextColumns[targetIndex], nextColumns[index]];
+
+		const nextRows = normalizedRows.map((row) => {
+			const nextRow = [...row];
+			[nextRow[index], nextRow[targetIndex]] = [nextRow[targetIndex], nextRow[index]];
+			return nextRow;
+		});
+
+		emit(nextColumns, nextRows);
+	}
+
+	function updateCell(rowIndex: number, columnIndex: number, value: string) {
+		const nextRows = normalizedRows.map((row, index) => (index === rowIndex ? [...row] : row));
+		nextRows[rowIndex][columnIndex] = value;
+		emit(normalizedColumns, nextRows);
+	}
+
+	function addRow() {
+		emit(normalizedColumns, [...normalizedRows, Array.from({ length: normalizedColumns.length }, () => '')]);
+	}
+
+	function removeRow(index: number) {
+		const nextRows = normalizedRows.filter((_, rowIndex) => rowIndex !== index);
+		emit(normalizedColumns, nextRows.length ? nextRows : [[]]);
+	}
+
+	function moveRow(index: number, direction: -1 | 1) {
+		const targetIndex = index + direction;
+		if (targetIndex < 0 || targetIndex >= normalizedRows.length) return;
+
+		const nextRows = normalizedRows.map((row) => [...row]);
+		[nextRows[index], nextRows[targetIndex]] = [nextRows[targetIndex], nextRows[index]];
+		emit(normalizedColumns, nextRows);
+	}
+
+	function normalizeRows(value: string[][], width: number) {
+		return value.map((row) => Array.from({ length: width }, (_, index) => row[index] ?? ''));
+	}
+</script>
+
+<div class="cv-structured-table-editor">
+	<div class="cv-structured-table-editor__scroll">
+		<table>
+			<thead>
+				<tr>
+					{#each normalizedColumns as column, columnIndex (columnIndex)}
+						<th>
+							<div class="cv-structured-table-editor__header-cell">
+								<input
+									aria-label={`Column ${columnIndex + 1}`}
+									value={column}
+									placeholder={`Column ${columnIndex + 1}`}
+									oninput={(event) => updateColumn(columnIndex, event.currentTarget.value)}
+								/>
+								<div class="cv-structured-table-editor__cell-actions">
+									<button
+										type="button"
+										aria-label={`Move column ${columnIndex + 1} left`}
+										disabled={columnIndex === 0}
+										onclick={() => moveColumn(columnIndex, -1)}
+									>
+										<ArrowLeftIcon aria-hidden="true" />
+									</button>
+									<button
+										type="button"
+										aria-label={`Move column ${columnIndex + 1} right`}
+										disabled={columnIndex === normalizedColumns.length - 1}
+										onclick={() => moveColumn(columnIndex, 1)}
+									>
+										<ArrowRightIcon aria-hidden="true" />
+									</button>
+									<button
+										type="button"
+										aria-label={`Remove column ${columnIndex + 1}`}
+										onclick={() => removeColumn(columnIndex)}
+									>
+										<Trash2Icon aria-hidden="true" />
+									</button>
+								</div>
+							</div>
+						</th>
+					{/each}
+					<th class="cv-structured-table-editor__action-column">
+						<button type="button" aria-label="Add column" onclick={addColumn}>
+							<PlusIcon aria-hidden="true" />
+						</button>
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each normalizedRows as row, rowIndex (rowIndex)}
+					<tr>
+						{#each normalizedColumns as _, columnIndex (columnIndex)}
+							<td>
+								<textarea
+									rows="1"
+									aria-label={`Row ${rowIndex + 1} column ${columnIndex + 1}`}
+									value={row[columnIndex] ?? ''}
+									placeholder="Add value"
+									use:autosizeTextarea={row[columnIndex] ?? ''}
+									oninput={(event) =>
+										updateCell(rowIndex, columnIndex, event.currentTarget.value)}
+								></textarea>
+							</td>
+						{/each}
+						<td class="cv-structured-table-editor__action-column">
+							<div class="cv-structured-table-editor__row-actions">
+								<div class="cv-structured-table-editor__row-move">
+									<button
+										type="button"
+										aria-label={`Move row ${rowIndex + 1} up`}
+										disabled={rowIndex === 0}
+										onclick={() => moveRow(rowIndex, -1)}
+									>
+										<ArrowUpIcon aria-hidden="true" />
+									</button>
+									<button
+										type="button"
+										aria-label={`Move row ${rowIndex + 1} down`}
+										disabled={rowIndex === normalizedRows.length - 1}
+										onclick={() => moveRow(rowIndex, 1)}
+									>
+										<ArrowDownIcon aria-hidden="true" />
+									</button>
+								</div>
+								<button type="button" aria-label={`Remove row ${rowIndex + 1}`} onclick={() => removeRow(rowIndex)}>
+									<Trash2Icon aria-hidden="true" />
+								</button>
+							</div>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+	<button type="button" class="cv-structured-table-editor__add-row" onclick={addRow}>
+		<PlusIcon aria-hidden="true" />
+		Add row
+	</button>
+</div>
+
+<style>
+	.cv-structured-table-editor {
+		display: grid;
+		gap: 0.55rem;
+		width: 100%;
+		padding-top: 0.35rem;
+	}
+
+	.cv-structured-table-editor__scroll {
+		overflow-x: auto;
+		border: 1px solid var(--kanban-border, rgb(226 232 240));
+		border-radius: 0.6rem;
+		background: var(--kanban-card, rgb(255 255 255));
+	}
+
+	.cv-structured-table-editor table {
+		width: 100%;
+		min-width: 28rem;
+		border-collapse: separate;
+		border-spacing: 0;
+	}
+
+	.cv-structured-table-editor th,
+	.cv-structured-table-editor td {
+		border-bottom: 1px solid color-mix(in srgb, var(--kanban-border, rgb(226 232 240)) 82%, transparent);
+		padding: 0;
+		vertical-align: top;
+	}
+
+	.cv-structured-table-editor thead th {
+		background: color-mix(in srgb, var(--card-color, var(--column-color, var(--kanban-accent, rgb(14 165 233)))) 9%, transparent);
+	}
+
+	.cv-structured-table-editor th + th,
+	.cv-structured-table-editor td + td {
+		border-left: 1px solid color-mix(in srgb, var(--kanban-border, rgb(226 232 240)) 72%, transparent);
+	}
+
+	.cv-structured-table-editor tbody tr:last-child td {
+		border-bottom: 0;
+	}
+
+	.cv-structured-table-editor__header-cell {
+		display: grid;
+		grid-template-columns: minmax(8rem, 1fr) auto;
+		align-items: center;
+		min-height: 2.35rem;
+	}
+
+	.cv-structured-table-editor input,
+	.cv-structured-table-editor textarea {
+		width: 100%;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		outline: 0;
+		padding: 0.48rem 0.58rem;
+	}
+
+	.cv-structured-table-editor input {
+		font-size: 0.8rem;
+		font-weight: 900;
+	}
+
+	.cv-structured-table-editor textarea {
+		min-height: 2.25rem;
+		resize: none;
+	}
+
+	.cv-structured-table-editor button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background: transparent;
+		color: var(--kanban-muted);
+		cursor: pointer;
+		font: inherit;
+		font-size: 0.82rem;
+		font-weight: 800;
+	}
+
+	.cv-structured-table-editor button:hover,
+	.cv-structured-table-editor button:focus-visible {
+		background: color-mix(in srgb, var(--kanban-card-foreground, rgb(15 23 42)) 6%, transparent);
+		color: var(--kanban-card-foreground, rgb(15 23 42));
+		outline: 0;
+	}
+
+	.cv-structured-table-editor button:disabled {
+		cursor: default;
+		opacity: 0.35;
+	}
+
+	.cv-structured-table-editor button:disabled:hover,
+	.cv-structured-table-editor button:disabled:focus-visible {
+		background: transparent;
+		color: var(--kanban-muted);
+	}
+
+	.cv-structured-table-editor button :global(svg) {
+		width: 0.95rem;
+		height: 0.95rem;
+	}
+
+	.cv-structured-table-editor__action-column {
+		width: 5.75rem;
+		min-width: 5.75rem;
+		text-align: center;
+	}
+
+	.cv-structured-table-editor tbody .cv-structured-table-editor__action-column {
+		vertical-align: middle;
+	}
+
+	.cv-structured-table-editor__action-column button {
+		width: 1.62rem;
+		min-height: 1.62rem;
+		border-radius: 0.28rem;
+		padding: 0;
+	}
+
+	.cv-structured-table-editor thead .cv-structured-table-editor__action-column button {
+		width: 100%;
+		min-height: 2.35rem;
+		border-radius: 0;
+	}
+
+	.cv-structured-table-editor__cell-actions,
+	.cv-structured-table-editor__row-actions {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.12rem;
+		padding-inline: 0 0.25rem;
+	}
+
+	.cv-structured-table-editor__row-actions {
+		min-height: 2.25rem;
+	}
+
+	.cv-structured-table-editor__row-move {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0;
+	}
+
+	.cv-structured-table-editor__row-actions button {
+		width: 1rem;
+		min-height: 1rem;
+		border-radius: 0.25rem;
+	}
+
+	.cv-structured-table-editor__row-actions button :global(svg) {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+
+	.cv-structured-table-editor__add-row {
+		justify-self: start;
+		gap: 0.4rem;
+		border: 1px dashed var(--kanban-border, rgb(226 232 240)) !important;
+		border-radius: 999px;
+		padding: 0.38rem 0.75rem;
+	}
+</style>