@lyeve-labs/ui-kit 0.8.2

package/dist/components/Toaster.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { toast, type ToastTone } from '../stores/toast.svelte';
+
+  const styles: Record<ToastTone, { bar: string; icon: string; mark: string }> = {
+    info: { bar: 'bg-brand', icon: 'text-brand', mark: 'ℹ' },
+    success: { bar: 'bg-success', icon: 'text-success', mark: '✓' },
+    warn: { bar: 'bg-warn', icon: 'text-warn', mark: '!' },
+    danger: { bar: 'bg-danger', icon: 'text-danger', mark: '×' },
+  };
+</script>
+
+<div
+  class="pointer-events-none fixed bottom-4 right-4 z-[60] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2"
+>
+  {#each toast.items as t (t.id)}
+    <div
+      class="pointer-events-auto flex items-start gap-3 overflow-hidden rounded-lg border border-line
+             bg-surface pl-0 pr-3 py-3 shadow-xl animate-[toast-in_140ms_ease-out]"
+      role="status"
+    >
+      <span class="w-1 self-stretch shrink-0 {styles[t.tone].bar}"></span>
+      <span
+        class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-current text-xs font-bold {styles[
+          t.tone
+        ].icon}"
+        aria-hidden="true"
+      >
+        {styles[t.tone].mark}
+      </span>
+      <p class="flex-1 text-sm text-fg leading-snug">{t.message}</p>
+      <button
+        type="button"
+        class="text-faint hover:text-fg transition-colors text-lg leading-none -mt-0.5"
+        aria-label="Dismiss"
+        onclick={() => toast.dismiss(t.id)}
+      >
+        ×
+      </button>
+    </div>
+  {/each}
+</div>
+
+<style>
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translateX(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+</style>

package/dist/components/Toaster.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Toaster: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toaster = InstanceType<typeof Toaster>;
+export default Toaster;

package/dist/components/Toggle.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  let {
+    checked = $bindable(false),
+    label,
+    hint,
+    disabled = false,
+    size = 'md',
+    onchange,
+  }: {
+    checked?: boolean;
+    label?: string;
+    hint?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (checked: boolean) => void;
+  } = $props();
+
+  const track: Record<'sm' | 'md', string> = {
+    sm: 'w-8 h-4',
+    md: 'w-10 h-5',
+  };
+
+  const thumb: Record<'sm' | 'md', string> = {
+    sm: 'w-3 h-3 top-0.5 left-0.5',
+    md: 'w-4 h-4 top-0.5 left-0.5',
+  };
+
+  const thumbOn: Record<'sm' | 'md', string> = {
+    sm: 'translate-x-4',
+    md: 'translate-x-5',
+  };
+
+  function handleClick() {
+    if (disabled) return;
+    checked = !checked;
+    onchange?.(checked);
+  }
+</script>
+
+<label
+  class="inline-flex items-start gap-2.5 cursor-pointer select-none {disabled
+    ? 'opacity-50 cursor-not-allowed'
+    : ''}"
+>
+  <button
+    type="button"
+    role="switch"
+    aria-checked={checked}
+    aria-label={label ?? 'Toggle'}
+    {disabled}
+    onclick={handleClick}
+    class="relative shrink-0 rounded-full transition-colors focus:outline-none
+      focus-visible:ring-2 focus-visible:ring-brand/50 focus-visible:ring-offset-1
+      focus-visible:ring-offset-ink mt-0.5
+      {track[size]}
+      {checked ? 'bg-brand' : 'bg-surface-2'}"
+  >
+    <span
+      class="absolute rounded-full bg-fg shadow transition-transform
+        {thumb[size]}
+        {checked ? thumbOn[size] : 'translate-x-0'}"
+    ></span>
+  </button>
+  {#if label || hint}
+    <span class="flex flex-col gap-0.5">
+      {#if label}
+        <span class="text-sm text-fg">{label}</span>
+      {/if}
+      {#if hint}
+        <span class="text-xs text-faint">{hint}</span>
+      {/if}
+    </span>
+  {/if}
+</label>

package/dist/components/Toggle.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    checked?: boolean;
+    label?: string;
+    hint?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    onchange?: (checked: boolean) => void;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/Tooltip.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Position = 'top' | 'bottom' | 'left' | 'right';
+
+  interface Props {
+    text: string;
+    position?: Position;
+    class?: string;
+    children: Snippet;
+  }
+
+  let { text, position = 'top', class: cls = '', children }: Props = $props();
+
+  let visible = $state(false);
+
+  const pos: Record<Position, string> = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  };
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  class="relative inline-flex {cls}"
+  onmouseenter={() => (visible = true)}
+  onmouseleave={() => (visible = false)}
+  onfocus={() => (visible = true)}
+  onblur={() => (visible = false)}
+>
+  {@render children()}
+  {#if visible}
+    <span
+      role="tooltip"
+      class="pointer-events-none absolute {pos[position]} z-50
+        whitespace-nowrap rounded-lg border border-line bg-surface-2
+        px-2.5 py-1.5 text-xs text-fg shadow-xl"
+    >
+      {text}
+    </span>
+  {/if}
+</span>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Position = 'top' | 'bottom' | 'left' | 'right';
+interface Props {
+    text: string;
+    position?: Position;
+    class?: string;
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/dialog/ConfirmDialog.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  /**
+   * ConfirmDialog - confirm/cancel pattern with async loading state.
+   *
+   * Renders a warning icon + message + Cancel/Confirm buttons.
+   * The confirm button shows a loading spinner during async actions.
+   *
+   * Usage (from DialogContainer):
+   *   <Dialog {entry}>
+   *     <ConfirmDialog {entry} />
+   *   </Dialog>
+   *
+   * Programmatic usage:
+   *   import { confirm } from '@lyeve/ui-kit';
+   *   const ok = await confirm('Delete this item?', 'This action cannot be undone.');
+   *   if (ok) { await deleteItem(); }
+   */
+  import { TriangleAlert } from '@lucide/svelte';
+  import { closeDialog, dismissDialog } from './dialog-manager.svelte';
+  import Button from '../Button.svelte';
+  import type { DialogEntry } from './types.js';
+
+  let {
+    entry,
+    /** If provided, called on confirm. Return false/throw to prevent close. */
+    onConfirm,
+  }: {
+    entry: DialogEntry<boolean>;
+    onConfirm?: () => Promise<boolean | void> | boolean | void;
+  } = $props();
+
+  let loading = $state(false);
+  let title = $derived(
+    typeof entry.meta?.confirmTitle === 'string' ? entry.meta.confirmTitle : 'Confirm',
+  );
+  let message = $derived(
+    typeof entry.meta?.confirmMessage === 'string' ? entry.meta.confirmMessage : '',
+  );
+  let cancelLabel = $derived(
+    typeof entry.meta?.cancelLabel === 'string' ? entry.meta.cancelLabel : 'Cancel',
+  );
+  let confirmLabel = $derived(
+    typeof entry.meta?.confirmLabel === 'string' ? entry.meta.confirmLabel : 'Confirm',
+  );
+
+  async function handleConfirm() {
+    if (loading) return;
+
+    try {
+      loading = true;
+      if (onConfirm) {
+        const result = await onConfirm();
+        if (result === false) {
+          loading = false;
+          return;
+        }
+      }
+      loading = false;
+      closeDialog(true, entry.id);
+    } catch {
+      loading = false;
+    }
+  }
+
+  function handleCancel() {
+    dismissDialog(entry.id);
+  }
+</script>
+
+<div class="flex flex-col gap-4">
+  <!-- Warning icon + message -->
+  <div class="flex items-start gap-3">
+    <div
+      class="flex items-center justify-center w-10 h-10 rounded-full bg-warn/10 text-warn shrink-0"
+    >
+      <TriangleAlert class="w-5 h-5" />
+    </div>
+    <div class="flex-1 min-w-0">
+      <p class="text-sm text-fg font-medium">{title}</p>
+      {#if message}
+        <p class="text-sm text-muted mt-1">{message}</p>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="flex items-center justify-end gap-3 pt-2">
+    <Button variant="secondary" size="sm" onclick={handleCancel}>
+      {cancelLabel}
+    </Button>
+    <Button variant="danger" size="sm" onclick={handleConfirm} {loading}>
+      {confirmLabel}
+    </Button>
+  </div>
+</div>

package/dist/components/dialog/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DialogEntry } from './types.js';
+type $$ComponentProps = {
+    entry: DialogEntry<boolean>;
+    onConfirm?: () => Promise<boolean | void> | boolean | void;
+};
+declare const ConfirmDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/components/dialog/Dialog.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  /**
+   * Dialog - modal frame component.
+   *
+   * Handles: focus trap, ESC to close, click-outside to close,
+   * scale+fade animation, stacked z-indexing, portal to body.
+   *
+   * Rendered by DialogContainer for each entry in the dialog stack.
+   * Not meant to be used directly - use openDialog() from dialog-manager.
+   */
+  import { X } from '@lucide/svelte';
+  import { onMount, tick } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import type { DialogEntry } from './types.js';
+  import { sizeClass } from './types.js';
+  import {
+    closeDialog,
+    dismissDialog,
+    _lockBodyScroll,
+    _unlockBodyScroll,
+  } from './dialog-manager.svelte';
+  import ConfirmDialog from './ConfirmDialog.svelte';
+
+  let {
+    entry,
+    children,
+  }: {
+    entry: DialogEntry<any>;
+    children?: Snippet;
+  } = $props();
+
+  // ──────────────────────────────────────────────────────
+  // Animation state
+  // ──────────────────────────────────────────────────────
+
+  let visible = $state(false);
+  let exiting = $state(false);
+
+  // Stacked offset: each deeper dialog shrinks and shifts back
+  let offset = $derived(entry.depth);
+  let zIndex = $derived(50 + offset);
+
+  // ──────────────────────────────────────────────────────
+  // DOM refs
+  // ──────────────────────────────────────────────────────
+
+  let dialogEl = $state<HTMLDivElement>();
+  let previousFocus = $state<HTMLElement | null>(null);
+  let focusableSelector =
+    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  // ──────────────────────────────────────────────────────
+  // Lifecycle
+  // ──────────────────────────────────────────────────────
+
+  onMount(() => {
+    // Save previously focused element for restore on unmount
+    const el = document.activeElement;
+    previousFocus = el instanceof HTMLElement ? el : null;
+
+    // Trigger enter animation on next frame
+    requestAnimationFrame(() => {
+      visible = true;
+    });
+
+    // Focus trap: focus first focusable element, or the dialog itself
+    tick().then(() => {
+      if (dialogEl) {
+        const focusable = dialogEl.querySelectorAll(focusableSelector);
+        if (focusable.length > 0) {
+          (focusable[0] as HTMLElement).focus();
+        } else {
+          dialogEl.focus();
+        }
+      }
+    });
+
+    // Lock body scroll (counter-based: only unlock when no dialogs remain)
+    _lockBodyScroll();
+    const unlock = () => _unlockBodyScroll();
+
+    return () => {
+      unlock();
+      // Restore focus
+      previousFocus?.focus?.();
+    };
+  });
+
+  // ──────────────────────────────────────────────────────
+  // Handlers
+  // ──────────────────────────────────────────────────────
+
+  function handleBackdropClick(e: MouseEvent) {
+    // Only close if clicking the backdrop itself (not the dialog panel)
+    if (e.target === e.currentTarget && !entry.options.persistent) {
+      handleDismiss();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      if (!entry.options.persistent) {
+        handleDismiss();
+      }
+    }
+
+    // Focus trap
+    if (e.key === 'Tab' && dialogEl) {
+      const focusable = dialogEl.querySelectorAll(focusableSelector);
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+
+      const first = focusable[0] as HTMLElement;
+      const last = focusable[focusable.length - 1] as HTMLElement;
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+  }
+
+  async function handleDismiss(): Promise<void> {
+    exiting = true;
+    // Wait for exit animation
+    await new Promise((r) => setTimeout(r, 200));
+    dismissDialog(entry.id);
+  }
+
+  async function handleClose(value?: unknown): Promise<void> {
+    exiting = true;
+    await new Promise((r) => setTimeout(r, 200));
+    closeDialog(value, entry.id);
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="fixed inset-0 z-[{zIndex}] flex items-center justify-center" role="presentation">
+  <!-- Backdrop -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-200"
+    class:opacity-0={!visible || exiting}
+    class:opacity-100={visible && !exiting}
+    onclick={handleBackdropClick}
+    onkeydown={(e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !entry.options.persistent) handleDismiss();
+    }}
+    role="presentation"
+  ></div>
+
+  <!-- Dialog panel -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    bind:this={dialogEl}
+    class="relative w-full {sizeClass(entry.options.size ?? 'md')} mx-4
+			bg-surface border border-line rounded-xl shadow-2xl
+			transition-all duration-200 ease-out
+			focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
+    class:opacity-0={!visible || exiting}
+    class:opacity-100={visible && !exiting}
+    style="transform: scale({visible && !exiting ? 1 - offset * 0.03 : 0.95}) translateY({offset *
+      16}px);
+			transform-origin: center;"
+    role="dialog"
+    aria-modal="true"
+    aria-label={typeof entry.options.title === 'string' ? entry.options.title : 'Dialog'}
+    tabindex="-1"
+    onkeydown={handleKeydown}
+  >
+    <!-- Header -->
+    <div class="flex items-center justify-between px-6 pt-6 pb-2">
+      <div class="flex-1 min-w-0">
+        {#if entry.options.title && entry.meta?.confirmTitle === undefined}
+          {#if typeof entry.options.title === 'string'}
+            <h2 class="text-lg font-semibold text-fg truncate">
+              {entry.options.title}
+            </h2>
+          {:else}
+            {@render entry.options.title()}
+          {/if}
+        {/if}
+      </div>
+
+      {#if !entry.options.persistent}
+        <button
+          class="inline-flex items-center justify-center w-8 h-8 -mr-2 rounded-lg
+						text-muted hover:text-fg hover:bg-surface-2 transition-colors shrink-0"
+          onclick={() => handleClose()}
+          aria-label="Close"
+        >
+          <X class="w-4 h-4" />
+        </button>
+      {/if}
+    </div>
+
+    <!-- Body -->
+    <div class="px-6 py-2">
+      {#if entry.options.body}
+        {@render entry.options.body()}
+      {:else if entry.meta?.confirmTitle !== undefined}
+        <ConfirmDialog {entry} />
+      {:else if children}
+        {@render children()}
+      {/if}
+    </div>
+
+    <!-- Footer -->
+    {#if entry.options.footer}
+      <div class="flex items-center justify-end gap-3 px-6 pb-6 pt-2">
+        {@render entry.options.footer()}
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/components/dialog/Dialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { DialogEntry } from './types.js';
+type $$ComponentProps = {
+    entry: DialogEntry<any>;
+    children?: Snippet;
+};
+declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/dialog/DialogContainer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  /**
+   * DialogContainer - renders the dialog stack.
+   *
+   * Mount once near the app root (in +layout.svelte).
+   * Reads from the module-level $state store - no props needed.
+   *
+   * Dialogs stack bottom-to-top; newest renders on top.
+   * Each dialog gets its own focus trap, ESC handler, and backdrop.
+   */
+  import { getDialogStack } from './dialog-manager.svelte';
+  import Dialog from './Dialog.svelte';
+</script>
+
+{#each getDialogStack() as entry (entry.id)}
+  <Dialog {entry} />
+{/each}

package/dist/components/dialog/DialogContainer.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DialogContainer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DialogContainer = InstanceType<typeof DialogContainer>;
+export default DialogContainer;

package/dist/components/dialog/dialog-manager.svelte.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Dialog Manager - module-level Svelte 5 reactive state.
+ *
+ * Manages a stack of dialogs. Dialogs render in last-to-first order (newest on top).
+ * Each dialog returns a Promise that resolves/rejects when closed.
+ *
+ * Usage:
+ *   import { openDialog } from '@lyeve/ui-kit';
+ *   // Inside a .svelte.ts file or $effect:
+ *   const result = await openDialog({ title: 'Delete?', body: mySnippet, size: 'sm' });
+ *
+ * For confirm/cancel pattern:
+ *   import { confirm } from '@lyeve/ui-kit';
+ *   const ok = await confirm('Delete this item?', 'This action cannot be undone.');
+ *   if (ok) { /* ... *\/ }
+ */
+import type { DialogOptions, DialogEntry } from './types.js';
+export declare function _lockBodyScroll(): void;
+export declare function _unlockBodyScroll(): void;
+/** Readonly snapshot for components */
+export declare function getDialogStack(): readonly DialogEntry<any>[];
+/**
+ * Open a new dialog. Returns a promise that resolves when the dialog is closed
+ * (via closeDialog with a value) or rejects if dismissed without a value.
+ *
+ * The dialog is pushed onto the stack and becomes the topmost.
+ */
+export declare function openDialog<T = void>(options: DialogOptions<T>): Promise<T>;
+/**
+ * Close a dialog by id and resolve its promise with a value.
+ * If omitted, closes the topmost dialog.
+ */
+export declare function closeDialog<T = void>(value: T, id?: string): void;
+/**
+ * Dismiss (cancel) a dialog - rejects the promise.
+ * Called when user clicks backdrop or presses ESC on a non-persistent dialog.
+ */
+export declare function dismissDialog(id?: string): void;
+/**
+ * Close all open dialogs, rejecting their promises.
+ */
+export declare function dismissAllDialogs(): void;
+/**
+ * Convenience: confirm dialog.
+ * Returns `true` if user confirmed, `false` if cancelled.
+ *
+ *   const ok = await confirm('Delete item?', 'This cannot be undone.');
+ */
+export declare function confirm(title: string, message?: string): Promise<boolean>;
+/**
+ * Set metadata on a dialog entry after it's opened.
+ * Used by convenience wrappers to pass extra data without polluting DialogOptions.
+ */
+export declare function setDialogMeta(id: string, meta: Record<string, unknown>): void;