@plures/design-dojo 0.5.2 → 0.7.1

package/dist/app/SemanticSearchInput.svelte

@@ -0,0 +1,630 @@
+<!--
+  SemanticSearchInput — IntelliSense-style autocomplete with local embeddings.
+
+  Features:
+  - Multi-mode search: default semantic, prefix # tag, @ entity, / command
+  - Ghost text for top suggestion (Tab to accept, like GitHub Copilot)
+  - Rich suggestion items: category badge, relative timestamp, similarity bar,
+    snippet preview on hover / keyboard focus
+  - Result grouping by category with section headers
+  - Full keyboard navigation: ↑↓ move selection, Tab accept ghost, Enter select,
+    Escape dismiss
+  - ARIA combobox pattern (role="combobox" + role="listbox")
+-->
+<script lang="ts">
+  import type { SearchMode, SemanticSearchResult } from "./SemanticSearchInput.types.js";
+
+  interface Props {
+    /** Called after debounce with the trimmed query and detected mode. */
+    onquery: (query: string, mode: SearchMode) => Promise<SemanticSearchResult[]>;
+    /** Called when the user selects a suggestion. */
+    onselect: (result: SemanticSearchResult) => void;
+    placeholder?: string;
+    /** Debounce delay in ms before firing onquery. Default: 100 */
+    debounceMs?: number;
+    /** Maximum suggestions to show. Default: 8 */
+    maxSuggestions?: number;
+    /** Show top suggestion as ghost text. Default: true */
+    showGhostText?: boolean;
+    /** Which modes to enable. Default: all */
+    modes?: SearchMode[];
+    class?: string;
+  }
+
+  let {
+    onquery,
+    onselect,
+    placeholder = "Search…",
+    debounceMs = 100,
+    maxSuggestions = 8,
+    showGhostText = true,
+    modes = ["semantic", "tag", "entity", "command"],
+    class: className = "",
+  }: Props = $props();
+
+  let inputEl: HTMLInputElement | undefined = $state();
+  let value = $state("");
+  let isFocused = $state(false);
+  let results: SemanticSearchResult[] = $state([]);
+  let selectedIndex = $state(-1);
+  let showDropdown = $state(false);
+  let activeSnippetId = $state<string | null>(null);
+
+  // Unique IDs for ARIA combobox → listbox relationship
+  function createListboxId() {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+      return `ssi-listbox-${crypto.randomUUID()}`;
+    }
+    if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+      const array = new Uint32Array(1);
+      crypto.getRandomValues(array);
+      return `ssi-listbox-${array[0].toString(36)}`;
+    }
+    return `ssi-listbox-${Date.now().toString(36)}`;
+  }
+
+  const listboxId = createListboxId();
+
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+  // ── Mode detection ───────────────────────────────────────────────────────────
+
+  const mode = $derived.by((): SearchMode => {
+    if (value.startsWith("#") && modes.includes("tag")) return "tag";
+    if (value.startsWith("@") && modes.includes("entity")) return "entity";
+    if (value.startsWith("/") && modes.includes("command")) return "command";
+    return "semantic";
+  });
+
+  // Strip the prefix before handing the query to the callback
+  const cleanQuery = $derived(mode === "semantic" ? value : value.slice(1));
+
+  // ── Ghost text ───────────────────────────────────────────────────────────────
+
+  const ghostSuffix = $derived.by(() => {
+    if (!showGhostText || !value || results.length === 0) return "";
+    const top = results[0].text;
+    // Compare against cleanQuery so the mode prefix (# @ /) is not included in
+    // the startsWith check, but the ghost suffix is appended after the full value.
+    if (top.toLowerCase().startsWith(cleanQuery.toLowerCase())) {
+      return top.slice(cleanQuery.length);
+    }
+    return "";
+  });
+
+  // ── Result grouping ──────────────────────────────────────────────────────────
+
+  const groupedResults = $derived.by(() => {
+    const groups = new Map<string, SemanticSearchResult[]>();
+    for (const r of results) {
+      const cat = r.category || "other";
+      if (!groups.has(cat)) groups.set(cat, []);
+      groups.get(cat)!.push(r);
+    }
+    return Array.from(groups.entries()).map(([cat, items]) => ({ cat, items }));
+  });
+
+  // ── Search & selection ───────────────────────────────────────────────────────
+
+  async function triggerSearch(query: string, searchMode: SearchMode) {
+    const trimmedQuery = query.trim();
+    if (!trimmedQuery) {
+      results = [];
+      showDropdown = false;
+      selectedIndex = -1;
+      return;
+    }
+    try {
+      const raw = await onquery(trimmedQuery, searchMode);
+      results = raw.slice(0, maxSuggestions);
+      selectedIndex = -1;
+      showDropdown = results.length > 0;
+    } catch {
+      results = [];
+      showDropdown = false;
+    }
+  }
+
+  function selectResult(item: SemanticSearchResult) {
+    value = item.text;
+    results = [];
+    showDropdown = false;
+    selectedIndex = -1;
+    activeSnippetId = null;
+    onselect(item);
+  }
+
+  // ── Event handlers ───────────────────────────────────────────────────────────
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    value = target.value;
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => triggerSearch(cleanQuery, mode), debounceMs);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (results.length > 0) selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (results.length > 0) selectedIndex = Math.max(selectedIndex - 1, -1);
+    } else if (e.key === "Tab") {
+      if (ghostSuffix) {
+        e.preventDefault();
+        value = value + ghostSuffix;
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => triggerSearch(cleanQuery, mode), debounceMs);
+      }
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (selectedIndex >= 0 && selectedIndex < results.length) {
+        selectResult(results[selectedIndex]);
+      }
+    } else if (e.key === "Escape") {
+      results = [];
+      showDropdown = false;
+      selectedIndex = -1;
+      activeSnippetId = null;
+    }
+  }
+
+  function handleFocus() {
+    isFocused = true;
+    if (value.trim() && results.length > 0) showDropdown = true;
+  }
+
+  function handleBlur() {
+    isFocused = false;
+    // Delay hiding so a mousedown on a dropdown item fires first
+    setTimeout(() => {
+      showDropdown = false;
+    }, 150);
+  }
+
+  // ── GUI helpers ──────────────────────────────────────────────────────────────
+
+  /** Split result text into matched / unmatched parts for highlight rendering. */
+  function getHighlightParts(text: string, query: string): Array<{ text: string; match: boolean }> {
+    if (!query.trim()) return [{ text, match: false }];
+    const lowerText = text.toLowerCase();
+    const lowerQuery = query.trim().toLowerCase();
+    const idx = lowerText.indexOf(lowerQuery);
+    if (idx < 0) return [{ text, match: false }];
+    return [
+      { text: text.slice(0, idx), match: false },
+      { text: text.slice(idx, idx + lowerQuery.length), match: true },
+      { text: text.slice(idx + lowerQuery.length), match: false },
+    ];
+  }
+
+  /** Format a Date as a human-readable relative time string. */
+  function relativeTime(date: Date): string {
+    const diff = Date.now() - date.getTime();
+    const secs = Math.floor(diff / 1000);
+    if (secs < 60) return "just now";
+    const mins = Math.floor(secs / 60);
+    if (mins < 60) return `${mins}m ago`;
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 30) return `${days}d ago`;
+    const months = Math.floor(days / 30);
+    if (months < 12) return `${months}mo ago`;
+    return `${Math.floor(months / 12)}y ago`;
+  }
+</script>
+
+<div class="ssi {className}">
+  <!-- ── Input field ──────────────────────────────────────────────────────── -->
+  <div class="ssi__field" class:ssi__field--focused={isFocused}>
+    <span class="ssi__icon" aria-hidden="true">⌕</span>
+
+    <div class="ssi__input-wrap">
+      <!-- Ghost text overlay: shows the typed value (transparent) + ghost suffix (dim) -->
+      {#if ghostSuffix}
+        <div class="ssi__ghost-layer" aria-hidden="true">
+          <span class="ssi__ghost-typed">{value}</span><span class="ssi__ghost-suffix">{ghostSuffix}</span>
+        </div>
+      {/if}
+      <input
+        bind:this={inputEl}
+        class="ssi__input"
+        class:ssi__input--has-ghost={!!ghostSuffix}
+        type="text"
+        {value}
+        {placeholder}
+        aria-label="Search"
+        role="combobox"
+        aria-controls={listboxId}
+        aria-expanded={showDropdown}
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        oninput={handleInput}
+        onkeydown={handleKeydown}
+        onfocus={handleFocus}
+        onblur={handleBlur}
+      />
+    </div>
+
+    {#if mode !== "semantic"}
+      <span class="ssi__mode-badge ssi__mode-badge--{mode}" aria-hidden="true">
+        {mode === "tag" ? "#" : mode === "entity" ? "@" : "/"}
+      </span>
+    {/if}
+  </div>
+
+  <!-- ── Dropdown ────────────────────────────────────────────────────────── -->
+  {#if showDropdown && results.length > 0}
+    <!-- svelte-ignore a11y_no_redundant_roles -->
+    <ul id={listboxId} class="ssi__dropdown" role="listbox" aria-label="Search suggestions">
+      {#each groupedResults as group}
+        <li class="ssi__group-header" role="presentation">
+          <span class="ssi__group-label">{group.cat}</span>
+          <span class="ssi__group-count">{group.items.length}</span>
+        </li>
+        {#each group.items as item}
+          {@const flatIndex = results.indexOf(item)}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            class="ssi__option"
+            class:ssi__option--selected={flatIndex === selectedIndex}
+            role="option"
+            aria-selected={flatIndex === selectedIndex}
+            tabindex="-1"
+            onmousedown={() => selectResult(item)}
+            onmouseenter={() => {
+              selectedIndex = flatIndex;
+              activeSnippetId = item.id;
+            }}
+            onmouseleave={() => {
+              if (activeSnippetId === item.id) activeSnippetId = null;
+            }}
+          >
+            <div class="ssi__option-body">
+              <div class="ssi__option-main">
+                {#if item.icon}
+                  <span class="ssi__option-icon" aria-hidden="true">{item.icon}</span>
+                {/if}
+                <span class="ssi__option-text">
+                  {#each getHighlightParts(item.text, cleanQuery) as part}
+                    {#if part.match}
+                      <mark class="ssi__highlight">{part.text}</mark>
+                    {:else}
+                      {part.text}
+                    {/if}
+                  {/each}
+                </span>
+              </div>
+              <div class="ssi__option-meta">
+                <span class="ssi__category-badge ssi__category-badge--{item.category}">
+                  {item.category}
+                </span>
+                <span class="ssi__time">{relativeTime(item.timestamp)}</span>
+                <div
+                  class="ssi__sim-bar"
+                  title="{(item.similarity * 100).toFixed(0)}% match"
+                  aria-label="{(item.similarity * 100).toFixed(0)}% similarity"
+                >
+                  <div class="ssi__sim-fill" style:width="{item.similarity * 100}%"></div>
+                </div>
+              </div>
+            </div>
+            {#if (flatIndex === selectedIndex || activeSnippetId === item.id) && item.snippet}
+              <div class="ssi__snippet">{item.snippet}</div>
+            {/if}
+          </li>
+        {/each}
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  /* ── Wrapper ─────────────────────────────────────────────────────────────── */
+
+  .ssi {
+    position: relative;
+    width: 100%;
+  }
+
+  /* ── Input field ─────────────────────────────────────────────────────────── */
+
+  .ssi__field {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--surface-2, #1e1e1e);
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    padding: 0 var(--space-3, 12px);
+    transition: border-color 0.15s ease;
+    gap: var(--space-2, 8px);
+  }
+
+  .ssi__field--focused {
+    border-color: var(--color-accent, #6366f1);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #6366f1) 20%, transparent);
+  }
+
+  .ssi__icon {
+    color: var(--color-text-muted, #888888);
+    font-size: var(--text-base, 16px);
+    flex-shrink: 0;
+    user-select: none;
+  }
+
+  /* ── Input wrap + ghost text ─────────────────────────────────────────────── */
+
+  .ssi__input-wrap {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  /* Ghost overlay: absolutely positioned behind the real input */
+  .ssi__ghost-layer {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    overflow: hidden;
+    white-space: pre;
+    font-family: inherit;
+    font-size: var(--text-base, 16px);
+    line-height: var(--leading-normal, 1.5);
+  }
+
+  /* The typed portion is invisible (matches input's real text) */
+  .ssi__ghost-typed {
+    visibility: hidden;
+    white-space: pre;
+  }
+
+  /* The ghost suffix is dim */
+  .ssi__ghost-suffix {
+    color: var(--color-text-subtle, #555);
+    white-space: pre;
+  }
+
+  .ssi__input {
+    flex: 1;
+    min-width: 0;
+    padding: var(--space-3, 12px) 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--color-text, #e8e8e8);
+    font-family: inherit;
+    font-size: var(--text-base, 16px);
+    line-height: var(--leading-normal, 1.5);
+    position: relative;
+    z-index: 1;
+  }
+
+  .ssi__input::placeholder {
+    color: var(--color-text-muted, #888888);
+  }
+
+  /* ── Mode badge ──────────────────────────────────────────────────────────── */
+
+  .ssi__mode-badge {
+    flex-shrink: 0;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    border-radius: var(--radius-full, 9999px);
+    padding: 2px 7px;
+    white-space: nowrap;
+    background: color-mix(in srgb, var(--color-accent, #6366f1) 18%, transparent);
+    color: var(--color-accent-hover, #818cf8);
+  }
+
+  .ssi__mode-badge--tag {
+    background: color-mix(in srgb, var(--color-success, #22c55e) 18%, transparent);
+    color: var(--color-success, #22c55e);
+  }
+
+  .ssi__mode-badge--entity {
+    background: color-mix(in srgb, var(--color-warning, #f59e0b) 18%, transparent);
+    color: var(--color-warning, #f59e0b);
+  }
+
+  .ssi__mode-badge--command {
+    background: color-mix(in srgb, var(--color-info, #3b82f6) 18%, transparent);
+    color: var(--color-info, #3b82f6);
+  }
+
+  /* ── Dropdown ────────────────────────────────────────────────────────────── */
+
+  .ssi__dropdown {
+    position: absolute;
+    top: calc(100% + var(--space-1, 4px));
+    left: 0;
+    right: 0;
+    z-index: 100;
+    margin: 0;
+    padding: var(--space-1, 4px) 0;
+    list-style: none;
+    background: var(--surface-2, #1e1e1e);
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.2));
+    overflow: hidden;
+  }
+
+  /* ── Group header ────────────────────────────────────────────────────────── */
+
+  .ssi__group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-1, 4px) var(--space-3, 12px);
+    margin-top: var(--space-1, 4px);
+    border-top: 1px solid var(--color-border, #2a2a2a);
+    pointer-events: none;
+  }
+
+  .ssi__group-header:first-child {
+    border-top: none;
+    margin-top: 0;
+  }
+
+  .ssi__group-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--color-text-subtle, #555);
+  }
+
+  .ssi__group-count {
+    font-size: 10px;
+    color: var(--color-text-subtle, #555);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ── Option ──────────────────────────────────────────────────────────────── */
+
+  .ssi__option {
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+    cursor: pointer;
+    font-size: var(--text-sm, 14px);
+    color: var(--color-text, #e8e8e8);
+    transition: background 0.1s ease;
+  }
+
+  .ssi__option:hover,
+  .ssi__option--selected {
+    background: color-mix(in srgb, var(--color-accent, #6366f1) 10%, transparent);
+  }
+
+  .ssi__option-body {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+  }
+
+  .ssi__option-main {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1, 4px);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .ssi__option-icon {
+    flex-shrink: 0;
+    font-size: var(--text-base, 16px);
+    line-height: 1;
+  }
+
+  .ssi__option-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ssi__highlight {
+    background: transparent;
+    color: var(--color-accent-hover, #818cf8);
+    font-weight: 700;
+  }
+
+  /* ── Option meta row ─────────────────────────────────────────────────────── */
+
+  .ssi__option-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    flex-shrink: 0;
+  }
+
+  .ssi__category-badge {
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    border-radius: var(--radius-full, 9999px);
+    padding: 1px 6px;
+    white-space: nowrap;
+    background: color-mix(in srgb, var(--color-text-muted, #888) 18%, transparent);
+    color: var(--color-text-muted, #888);
+  }
+
+  .ssi__category-badge--fact {
+    background: color-mix(in srgb, var(--color-info, #3b82f6) 18%, transparent);
+    color: var(--color-info, #3b82f6);
+  }
+
+  .ssi__category-badge--preference {
+    background: color-mix(in srgb, var(--color-success, #22c55e) 18%, transparent);
+    color: var(--color-success, #22c55e);
+  }
+
+  .ssi__category-badge--decision {
+    background: color-mix(in srgb, var(--color-accent, #6366f1) 18%, transparent);
+    color: var(--color-accent-hover, #818cf8);
+  }
+
+  .ssi__category-badge--conversation {
+    background: color-mix(in srgb, var(--color-warning, #f59e0b) 18%, transparent);
+    color: var(--color-warning, #f59e0b);
+  }
+
+  .ssi__category-badge--command {
+    background: color-mix(in srgb, var(--color-info, #3b82f6) 18%, transparent);
+    color: var(--color-info, #3b82f6);
+  }
+
+  .ssi__time {
+    font-size: 11px;
+    color: var(--color-text-subtle, #555);
+    font-family: var(--font-mono, monospace);
+    white-space: nowrap;
+  }
+
+  /* ── Similarity bar ──────────────────────────────────────────────────────── */
+
+  .ssi__sim-bar {
+    width: 40px;
+    height: 4px;
+    background: var(--color-border, #2a2a2a);
+    border-radius: var(--radius-full, 9999px);
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .ssi__sim-fill {
+    height: 100%;
+    background: var(--color-accent, #6366f1);
+    border-radius: var(--radius-full, 9999px);
+    transition: width 0.2s ease;
+  }
+
+  .ssi__option--selected .ssi__sim-fill {
+    background: var(--color-accent-hover, #818cf8);
+  }
+
+  /* ── Snippet preview ─────────────────────────────────────────────────────── */
+
+  .ssi__snippet {
+    margin-top: var(--space-1, 4px);
+    padding: var(--space-1, 4px) var(--space-2, 8px);
+    background: color-mix(in srgb, var(--color-text-subtle, #555) 8%, transparent);
+    border-left: 2px solid var(--color-accent, #6366f1);
+    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
+    font-size: var(--text-xs, 12px);
+    color: var(--color-text-muted, #888);
+    line-height: var(--leading-relaxed, 1.625);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+</style>

package/dist/app/SemanticSearchInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { SearchMode, SemanticSearchResult } from "./SemanticSearchInput.types.js";
+interface Props {
+    /** Called after debounce with the trimmed query and detected mode. */
+    onquery: (query: string, mode: SearchMode) => Promise<SemanticSearchResult[]>;
+    /** Called when the user selects a suggestion. */
+    onselect: (result: SemanticSearchResult) => void;
+    placeholder?: string;
+    /** Debounce delay in ms before firing onquery. Default: 100 */
+    debounceMs?: number;
+    /** Maximum suggestions to show. Default: 8 */
+    maxSuggestions?: number;
+    /** Show top suggestion as ghost text. Default: true */
+    showGhostText?: boolean;
+    /** Which modes to enable. Default: all */
+    modes?: SearchMode[];
+    class?: string;
+}
+declare const SemanticSearchInput: import("svelte").Component<Props, {}, "">;
+type SemanticSearchInput = ReturnType<typeof SemanticSearchInput>;
+export default SemanticSearchInput;

package/dist/app/SemanticSearchInput.types.js

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