add svelte UI

ui/components/display/ListItem.svelte

@@ -0,0 +1,104 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  export let primary = "";
+  export let secondary = "";
+  export let active = false;
+  export let clickable = true;
+
+  const dispatch = createEventDispatcher();
+
+  function onClick() {
+    if (clickable) {
+      dispatch("click");
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="list-item" class:active class:clickable on:click={onClick}>
+  {#if $$slots.icon}
+    <div class="item-icon">
+      <slot name="icon" />
+    </div>
+  {/if}
+
+  <div class="item-content">
+    {#if $$slots.default}
+      <slot />
+    {:else}
+      <span class="item-primary">{primary}</span>
+      {#if secondary}
+        <span class="item-secondary">{secondary}</span>
+      {/if}
+    {/if}
+  </div>
+
+  {#if $$slots.action}
+    <div class="item-action">
+      <slot name="action" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .list-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 0.4rem 0.5rem 1rem;
+    margin: 0 0.2rem;
+    background: var(--background-primary);
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+    transition:
+      background 0.1s,
+      border-color 0.1s;
+  }
+
+  .list-item.clickable {
+    cursor: pointer;
+  }
+
+  .list-item.clickable:hover {
+    background: var(--background-modifier-hover);
+    border-color: var(--background-modifier-border);
+  }
+
+  .item-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--text-muted);
+    opacity: 0.6;
+  }
+
+  .item-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .item-primary {
+    font-weight: 600;
+    font-size: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .item-secondary {
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .item-action {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+</style>

ui/components/input/Button.svelte

@@ -0,0 +1,94 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  export let variant = "primary";
+  export let disabled = false;
+  export let title = "";
+  export let type = "button";
+
+  const dispatch = createEventDispatcher();
+
+  function onClick(e) {
+    if (!disabled) {
+      dispatch("click", e);
+    }
+  }
+</script>
+
+<button class="btn {variant}" {type} {disabled} {title} on:click={onClick}>
+  {#if $$slots.icon}
+    <span class="btn-icon">
+      <slot name="icon" />
+    </span>
+  {/if}
+  <slot />
+</button>
+
+<style>
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 0.375rem;
+    box-shadow: none;
+    transition: background 0.1s;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .primary {
+    padding: 0.375rem 1rem;
+    border: none;
+    background: var(--interactive-accent);
+    color: var(--text-on-accent);
+  }
+
+  .primary:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+
+  .secondary {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--background-modifier-border);
+    background: none;
+    color: var(--text-muted);
+  }
+
+  .secondary:hover:not(:disabled) {
+    color: var(--text-normal);
+    background: var(--background-modifier-hover);
+  }
+
+  .ghost {
+    padding: 0.375rem 0.5rem;
+    border: none;
+    background: none;
+    color: var(--interactive-accent);
+  }
+
+  .ghost:hover:not(:disabled) {
+    background: var(--background-modifier-hover);
+  }
+
+  .danger {
+    padding: 0.375rem 1rem;
+    border: none;
+    background: var(--text-error, #e93147);
+    color: #fff;
+  }
+
+  .danger:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+</style>

ui/components/input/SearchInput.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { Search } from "lucide-svelte";
+
+  export let value = "";
+  export let placeholder = "Search";
+
+  const dispatch = createEventDispatcher();
+
+  function onInput(e) {
+    dispatch("input", e.target.value);
+  }
+</script>
+
+<div class="search-input">
+  <span class="search-icon">
+    <Search size="0.875rem" />
+  </span>
+  <input type="text" {placeholder} {value} on:input={onInput} />
+</div>
+
+<style>
+  .search-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 0.625rem;
+    color: var(--text-muted);
+    pointer-events: none;
+    margin-top: 0.2rem;
+  }
+
+  input {
+    width: 100%;
+    padding: 0.375rem 0.625rem 0.375rem 1.875rem;
+    border-radius: 0.375rem;
+    border: 1px solid var(--background-primary);
+    background: var(--background-primary);
+    color: var(--text-normal);
+    font-size: 0.8125rem;
+    outline: none;
+    box-shadow: none;
+  }
+
+  input:hover {
+    background: var(--background-modifier-form-field);
+  }
+
+  input::placeholder {
+    color: var(--text-muted);
+  }
+
+  input:focus {
+    border-color: var(--interactive-accent);
+  }
+
+  input:focus:hover {
+    background: var(--background-primary);
+  }
+</style>

ui/components/layout/ConfirmDialog.svelte

@@ -0,0 +1,85 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Modal from "./Modal.svelte";
+  import Button from "../input/Button.svelte";
+
+  export let title = "";
+  export let message = "";
+  export let description = "";
+  export let confirmText = "Confirm";
+  export let confirmVariant = "primary";
+  export let width = "500px";
+
+  const dispatch = createEventDispatcher();
+
+  let modalRef;
+
+  function onConfirm() {
+    dispatch("confirm");
+  }
+
+  function onCancel() {
+    modalRef.dismiss();
+    dispatch("cancel");
+  }
+
+  function onEscape() {
+    onCancel();
+  }
+
+  export function dismiss() {
+    modalRef.dismiss();
+  }
+</script>
+
+<Modal {title} {width} bind:this={modalRef} on:escape={onEscape} closeOnOverlayClick={false}>
+  <svelte:fragment slot="icon">
+    <slot name="icon" />
+  </svelte:fragment>
+
+  <div class="confirm-body">
+    <p class="confirm-message">{message}</p>
+    {#if description}
+      <p class="confirm-description">{description}</p>
+    {/if}
+  </div>
+
+  <svelte:fragment slot="footer">
+    <div class="confirm-footer">
+      <Button variant="secondary" on:click={onCancel}>Cancel</Button>
+      <Button variant={confirmVariant} on:click={onConfirm}>
+        <svelte:fragment slot="icon">
+          <slot name="confirmIcon" />
+        </svelte:fragment>
+        {confirmText}
+      </Button>
+    </div>
+  </svelte:fragment>
+</Modal>
+
+<style>
+  .confirm-body {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--background-modifier-border);
+  }
+
+  .confirm-message {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-normal);
+  }
+
+  .confirm-description {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+  }
+
+  .confirm-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+</style>

ui/components/layout/Modal.svelte

@@ -0,0 +1,130 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { X } from "lucide-svelte";
+
+  export let title = "";
+  export let width = "600px";
+  export let closeOnOverlayClick = true;
+
+  const dispatch = createEventDispatcher();
+
+  let overlayEl;
+
+  function close() {
+    if (overlayEl) {
+      overlayEl.remove();
+    }
+    dispatch("close");
+  }
+
+  function onOverlayClick(e) {
+    if (e.target === overlayEl && closeOnOverlayClick) {
+      close();
+    }
+  }
+
+  function onKeydown(e) {
+    if (e.key === "Escape") {
+      dispatch("escape");
+    }
+  }
+
+  export function dismiss() {
+    close();
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="modal-overlay"
+  bind:this={overlayEl}
+  on:click={onOverlayClick}
+  on:keydown={onKeydown}
+>
+  <div class="modal-shell" style="width: min({width}, 90vw);">
+    <div class="modal-header">
+      <div class="header-left">
+        <slot name="icon" />
+        <span class="header-title">{title}</span>
+      </div>
+      <button class="close-btn" on:click={close} title="Close">
+        <X size="1.125rem" />
+      </button>
+    </div>
+
+    <slot />
+
+    {#if $$slots.footer}
+      <div class="modal-footer">
+        <slot name="footer" />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-interface);
+  }
+
+  .modal-shell {
+    background: var(--background-secondary);
+    color: var(--text-normal);
+    border-radius: 0.75rem;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem 0.5rem 1.5rem;
+    background: var(--background-primary);
+    flex-shrink: 0;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    color: var(--text-muted);
+  }
+
+  .header-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-normal);
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .close-btn:hover {
+    color: var(--text-normal);
+  }
+
+  .modal-footer {
+    padding: 0.8rem 1.5rem 0.8rem;
+    flex-shrink: 0;
+  }
+</style>

ui/components/layout/PromptDialog.svelte

@@ -0,0 +1,115 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import Modal from "./Modal.svelte";
+  import Button from "../input/Button.svelte";
+
+  export let title = "";
+  export let label = "";
+  export let value = "";
+  export let placeholder = "";
+  export let confirmText = "Confirm";
+  export let width = "500px";
+
+  const dispatch = createEventDispatcher();
+
+  let modalRef;
+
+  function onConfirm() {
+    dispatch("confirm", value);
+  }
+
+  function onCancel() {
+    modalRef.dismiss();
+    dispatch("cancel");
+  }
+
+  function onEscape() {
+    onCancel();
+  }
+
+  function onKeydown(e) {
+    if (e.key === "Enter") {
+      onConfirm();
+    }
+  }
+
+  export function dismiss() {
+    modalRef.dismiss();
+  }
+</script>
+
+<Modal
+  {title}
+  {width}
+  bind:this={modalRef}
+  on:escape={onEscape}
+  closeOnOverlayClick={false}
+>
+  <svelte:fragment slot="icon">
+    <slot name="icon" />
+  </svelte:fragment>
+
+  <div class="prompt-body">
+    <label class="prompt-label" for="prompt-input">{label}</label>
+    <!-- svelte-ignore a11y-autofocus -->
+    <input
+      id="prompt-input"
+      class="prompt-input"
+      type="text"
+      {placeholder}
+      bind:value
+      on:keydown={onKeydown}
+      autofocus
+    />
+  </div>
+
+  <svelte:fragment slot="footer">
+    <div class="prompt-footer">
+      <Button variant="secondary" on:click={onCancel}>Cancel</Button>
+      <Button variant="primary" on:click={onConfirm}>
+        <svelte:fragment slot="icon">
+          <slot name="confirmIcon" />
+        </svelte:fragment>
+        {confirmText}
+      </Button>
+    </div>
+  </svelte:fragment>
+</Modal>
+
+<style>
+  .prompt-body {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--background-modifier-border);
+  }
+
+  .prompt-label {
+    display: block;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-normal);
+    margin-bottom: 0.75rem;
+  }
+
+  .prompt-input {
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    border-radius: 0.375rem;
+    border: 1px solid var(--background-modifier-border);
+    background: var(--background-primary);
+    color: var(--text-normal);
+    font-size: 1rem;
+    outline: none;
+    box-shadow: none;
+    box-sizing: border-box;
+  }
+
+  .prompt-input:focus {
+    border-color: var(--interactive-accent);
+  }
+
+  .prompt-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+</style>

ui/components/menu/PopoverMenu.svelte

@@ -0,0 +1,101 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { EllipsisVertical } from "lucide-svelte";
+
+  export let open = false;
+  export let items = [];
+
+  const dispatch = createEventDispatcher();
+
+  function onTriggerClick(e) {
+    e.stopPropagation();
+    dispatch("toggle");
+  }
+
+  function onItemClick(e, item) {
+    e.stopPropagation();
+    dispatch("select", item);
+  }
+</script>
+
+<div class="popover-wrapper">
+  <button class="popover-trigger" on:click={onTriggerClick} title="Options">
+    <EllipsisVertical size="1rem" />
+  </button>
+
+  {#if open}
+    <div class="popover-panel">
+      {#each items as item}
+        <button
+          class="popover-item"
+          class:danger={item.danger}
+          on:click={(e) => onItemClick(e, item)}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .popover-wrapper {
+    position: relative;
+  }
+
+  .popover-trigger {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.375rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .popover-trigger:hover {
+    color: var(--text-normal);
+  }
+
+  .popover-panel {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    z-index: 10;
+    background: var(--background-primary);
+    border: 1px solid var(--background-modifier-border);
+    border-radius: 0.375rem;
+    padding: 0.25rem;
+    min-width: 7.5rem;
+    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
+  }
+
+  .popover-item {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    border: none;
+    background: none;
+    box-shadow: none;
+    color: var(--text-normal);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    text-align: left;
+  }
+
+  .popover-item:hover {
+    background: var(--background-modifier-hover);
+  }
+
+  .popover-item.danger {
+    color: var(--text-error, #e93147);
+  }
+
+  .popover-item.danger:hover {
+    background: rgba(233, 49, 71, 0.1);
+  }
+</style>