@plures/design-dojo 0.5.2 → 0.7.1

package/dist/overlays/Menu.svelte

@@ -0,0 +1,274 @@
+<!--
+  Menu — Dropdown list of labeled actions, opened by a trigger.
+
+  GUI mode: floating panel with keyboard navigation.
+  TUI mode: box-drawing bordered list rendered inline.
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+  import type { Snippet } from "svelte";
+  import type { MenuItem } from "./Menu.types.js";
+
+  export type { MenuItem };
+
+  interface Props {
+    /** Menu items. */
+    items: MenuItem[];
+    /** Control open state externally. */
+    open?: boolean;
+    /** Called when an item is selected. */
+    onselect?: (key: string) => void;
+    /** Called when the menu requests to close. */
+    onclose?: () => void;
+    /** Preferred opening position. Default: "bottom-start". */
+    position?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    /** Enable TUI mode. */
+    tui?: boolean;
+    /** Trigger element. */
+    trigger: Snippet<[{ toggle: () => void; isOpen: boolean }]>;
+  }
+
+  let {
+    items,
+    open = $bindable(false),
+    onselect,
+    onclose,
+    position = "bottom-start",
+    tui = false,
+    trigger,
+  }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  function createId(prefix: string) {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+      return `${prefix}-${crypto.randomUUID()}`;
+    }
+    if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+      const array = new Uint32Array(1);
+      crypto.getRandomValues(array);
+      return `${prefix}-${array[0].toString(36)}`;
+    }
+    return `${prefix}-${Date.now().toString(36)}`;
+  }
+
+  const menuId = createId("menu");
+
+  // Navigable items: exclude both disabled and separator entries
+  const navigable = $derived(items.filter((i) => !i.disabled && !i.separator));
+
+  // Track the focused item by key
+  let focusedKey = $state<string>("");
+
+  function toggle() {
+    open = !open;
+    if (open) focusedKey = navigable[0]?.key ?? "";
+  }
+  function close() { open = false; onclose?.(); }
+
+  function select(key: string) {
+    onselect?.(key);
+    close();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!open) return;
+    const cur = navigable.findIndex((i) => i.key === focusedKey);
+    if (e.key === "Escape") { e.preventDefault(); close(); }
+    else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = navigable[Math.min(cur + 1, navigable.length - 1)];
+      if (next) focusedKey = next.key;
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prev = navigable[Math.max(cur - 1, 0)];
+      if (prev) focusedKey = prev.key;
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      const item = navigable[cur];
+      if (item) select(item.key);
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="menu-host" class:tui={isTui} onkeydown={handleKeydown}>
+  {@render trigger({ toggle, isOpen: open })}
+
+  {#if open}
+    {#if isTui}
+      <ul class="tui-menu" role="menu" id={menuId}>
+        {#each items as item}
+          {#if item.separator}
+            <li class="tui-separator" role="separator">├{'─'.repeat(12)}┤</li>
+          {:else}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <li
+              class="tui-item"
+              class:focused={item.key === focusedKey}
+              class:disabled={item.disabled}
+              role="menuitem"
+              aria-disabled={item.disabled}
+              tabindex={item.disabled ? -1 : 0}
+              onclick={() => !item.disabled && select(item.key)}
+              onkeydown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  if (!item.disabled) select(item.key);
+                }
+              }}
+            >
+              {#if item.icon}<span class="tui-icon" aria-hidden="true">{item.icon}</span>{/if}
+              <span class="tui-label">{item.label}</span>
+              {#if item.shortcut}<span class="tui-shortcut">{item.shortcut}</span>{/if}
+            </li>
+          {/if}
+        {/each}
+      </ul>
+    {:else}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="menu-backdrop" onclick={close} aria-hidden="true"></div>
+      <ul class="menu menu--{position}" role="menu" id={menuId}>
+        {#each items as item}
+          {#if item.separator}
+            <li class="menu-separator" role="separator"></li>
+          {:else}
+            <li
+              class="menu-item"
+              class:focused={item.key === focusedKey}
+              class:disabled={item.disabled}
+              role="menuitem"
+              aria-disabled={item.disabled}
+              tabindex={item.disabled ? -1 : 0}
+              onclick={() => !item.disabled && select(item.key)}
+              onkeydown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  if (!item.disabled) select(item.key);
+                }
+              }}
+            >
+              {#if item.icon}<span class="menu-icon" aria-hidden="true">{item.icon}</span>{/if}
+              <span class="menu-label">{item.label}</span>
+              {#if item.shortcut}<span class="menu-shortcut">{item.shortcut}</span>{/if}
+            </li>
+          {/if}
+        {/each}
+      </ul>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .menu-host {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  /* ===== GUI mode ===== */
+  .menu {
+    position: absolute;
+    z-index: var(--z-menu, 800);
+    background: var(--surface-1, #141414);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    box-shadow: var(--elevation-2, var(--shadow-md));
+    padding: var(--space-1, 4px);
+    min-width: 160px;
+    list-style: none;
+    margin: 0;
+  }
+
+  .menu--bottom-start { top:    calc(100% + 4px); left: 0; }
+  .menu--bottom-end   { top:    calc(100% + 4px); right: 0; }
+  .menu--top-start    { bottom: calc(100% + 4px); left: 0; }
+  .menu--top-end      { bottom: calc(100% + 4px); right: 0; }
+
+  .menu-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--z-menu, 800) - 1);
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+    border-radius: var(--radius-sm, 6px);
+    font-size: var(--text-sm, 14px);
+    color: var(--color-text, #e8e8e8);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+  }
+
+  .menu-item:hover:not(.disabled),
+  .menu-item.focused:not(.disabled) {
+    background: var(--alpha-10, rgba(255,255,255,0.1));
+  }
+
+  .menu-item:focus-visible {
+    outline: var(--focus-ring-width, 3px) solid var(--color-focus-ring, #818cf8);
+    outline-offset: -1px;
+  }
+
+  .menu-item.disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .menu-icon    { width: 16px; text-align: center; font-size: 14px; }
+  .menu-label   { flex: 1; }
+  .menu-shortcut { font-size: var(--text-xs, 12px); color: var(--color-text-muted, #888); }
+
+  .menu-separator {
+    height: 1px;
+    background: var(--color-border, #2a2a2a);
+    margin: var(--space-1, 4px) 0;
+    list-style: none;
+  }
+
+  /* ===== TUI mode ===== */
+  .tui-menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    background: var(--tui-surface, #16213e);
+    border: 1px solid var(--tui-border, #0f3460);
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+    color: var(--tui-text, #e0e0e0);
+  }
+
+  .tui-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: 2px var(--space-2, 8px);
+    cursor: pointer;
+    outline: none;
+  }
+
+  .tui-item:hover:not(.disabled),
+  .tui-item.focused:not(.disabled),
+  .tui-item:focus-visible:not(.disabled) {
+    background: var(--tui-highlight, #533483);
+    color: var(--tui-accent, #00d4ff);
+  }
+
+  .tui-item:focus-visible { outline: 1px solid var(--tui-accent, #00d4ff); }
+
+  .tui-item.disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .tui-icon     { width: 2ch; text-align: center; }
+  .tui-label    { flex: 1; }
+  .tui-shortcut { color: var(--tui-text-dim, #888888); font-size: var(--text-xs, 12px); }
+
+  .tui-separator {
+    list-style: none;
+    color: var(--tui-border, #0f3460);
+    font-size: var(--text-xs, 12px);
+    user-select: none;
+  }
+</style>

package/dist/overlays/Menu.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from "svelte";
+import type { MenuItem } from "./Menu.types.js";
+interface Props {
+    /** Menu items. */
+    items: MenuItem[];
+    /** Control open state externally. */
+    open?: boolean;
+    /** Called when an item is selected. */
+    onselect?: (key: string) => void;
+    /** Called when the menu requests to close. */
+    onclose?: () => void;
+    /** Preferred opening position. Default: "bottom-start". */
+    position?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    /** Enable TUI mode. */
+    tui?: boolean;
+    /** Trigger element. */
+    trigger: Snippet<[{
+        toggle: () => void;
+        isOpen: boolean;
+    }]>;
+}
+declare const Menu: import("svelte").Component<Props, {
+    MenuItem: typeof MenuItem;
+}, "open">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/overlays/Menu.types.js

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

package/dist/overlays/Popover.svelte

@@ -0,0 +1,158 @@
+<!--
+  Popover — Floating panel triggered by clicking an anchor element.
+
+  GUI mode: floating card with optional arrow, closes on outside click or Escape.
+  TUI mode: block-rendered panel with box-drawing border below/above the trigger.
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    /** Preferred side to open on. Default: "bottom". */
+    position?: "top" | "bottom" | "left" | "right";
+    /** Control open state externally. */
+    open?: boolean;
+    /** Called when the popover requests to close. */
+    onclose?: () => void;
+    /** Enable TUI mode. */
+    tui?: boolean;
+    /** Trigger element — receives { toggle, isOpen }. Consumers must wire ARIA attributes (aria-expanded, aria-controls) to the trigger element. */
+    trigger: Snippet<[{ toggle: () => void; isOpen: boolean }]>;
+    /** Popover content. */
+    children: Snippet;
+  }
+
+  let {
+    position = "bottom",
+    open = $bindable(false),
+    onclose,
+    tui = false,
+    trigger,
+    children,
+  }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  function createId(prefix: string) {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+      return `${prefix}-${crypto.randomUUID()}`;
+    }
+    if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+      const array = new Uint32Array(1);
+      crypto.getRandomValues(array);
+      return `${prefix}-${array[0].toString(36)}`;
+    }
+    return `${prefix}-${Date.now().toString(36)}`;
+  }
+
+  const panelId = createId("popover");
+
+  function toggle() { open = !open; }
+  function close() { open = false; onclose?.(); }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") close();
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="popover-host" class:tui={isTui} onkeydown={handleKeydown}>
+  {@render trigger({ toggle, isOpen: open })}
+
+  {#if open}
+    {#if isTui}
+      <div class="tui-popover" role="dialog" id={panelId}>
+        <div class="tui-popover-header">
+          <span class="tui-border-tl">╭</span>
+          <span class="tui-border-tr">╮</span>
+        </div>
+        <div class="tui-popover-body">
+          <span class="tui-border-l">│</span>
+          <div class="tui-popover-content">{@render children()}</div>
+          <span class="tui-border-r">│</span>
+        </div>
+        <div class="tui-popover-footer">
+          <span class="tui-border-bl">╰</span>
+          <span class="tui-border-br">╯</span>
+        </div>
+      </div>
+    {:else}
+      <div class="popover popover--{position}" role="dialog" id={panelId} aria-modal="false">
+        {@render children()}
+      </div>
+      <!-- Outside-click backdrop (lightweight) -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <div class="popover-backdrop" onclick={close} aria-hidden="true"></div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .popover-host {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  /* ===== GUI mode ===== */
+  .popover {
+    position: absolute;
+    z-index: var(--z-popover, 800);
+    background: var(--surface-1, #141414);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    box-shadow: var(--elevation-2, var(--shadow-md));
+    padding: var(--space-2, 8px);
+    min-width: 160px;
+  }
+
+  .popover--top    { bottom: calc(100% + var(--space-1, 4px)); left: 0; }
+  .popover--bottom { top:    calc(100% + var(--space-1, 4px)); left: 0; }
+  .popover--left   { right:  calc(100% + var(--space-1, 4px)); top: 0; }
+  .popover--right  { left:   calc(100% + var(--space-1, 4px)); top: 0; }
+
+  .popover-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--z-popover, 800) - 1);
+  }
+
+  /* ===== TUI mode ===== */
+  .tui-popover {
+    background: var(--tui-surface, #16213e);
+    border: none;
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+    color: var(--tui-text, #e0e0e0);
+  }
+
+  .tui-popover-header,
+  .tui-popover-footer {
+    display: flex;
+    justify-content: space-between;
+    color: var(--tui-border, #0f3460);
+  }
+
+  .tui-popover-body {
+    display: flex;
+    gap: var(--space-1, 4px);
+  }
+
+  .tui-border-l,
+  .tui-border-r,
+  .tui-border-tl,
+  .tui-border-tr,
+  .tui-border-bl,
+  .tui-border-br {
+    color: var(--tui-border, #0f3460);
+    user-select: none;
+  }
+
+  .tui-popover-content {
+    flex: 1;
+    padding: var(--space-1, 4px) 0;
+  }
+</style>

package/dist/overlays/Popover.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Preferred side to open on. Default: "bottom". */
+    position?: "top" | "bottom" | "left" | "right";
+    /** Control open state externally. */
+    open?: boolean;
+    /** Called when the popover requests to close. */
+    onclose?: () => void;
+    /** Enable TUI mode. */
+    tui?: boolean;
+    /** Trigger element — receives { toggle, isOpen }. Consumers must wire ARIA attributes (aria-expanded, aria-controls) to the trigger element. */
+    trigger: Snippet<[{
+        toggle: () => void;
+        isOpen: boolean;
+    }]>;
+    /** Popover content. */
+    children: Snippet;
+}
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/overlays/Toast.svelte

@@ -0,0 +1,179 @@
+<!--
+  Toast — Non-blocking notification that auto-dismisses.
+
+  GUI mode: slides in from the corner, auto-dismisses after `duration` ms.
+  TUI mode: single-line status message at the bottom of the nearest positioned ancestor.
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+
+  interface Props {
+    /** Notification message. */
+    message: string;
+    /** Visual variant. Default: "info". */
+    variant?: "info" | "success" | "warning" | "error";
+    /** Auto-dismiss delay in ms (0 = persistent). Default: 4000. */
+    duration?: number;
+    /** Position corner (GUI only). Default: "bottom-right". */
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    /** Whether the toast is visible. */
+    open?: boolean;
+    /** Called when the toast auto-closes or the user dismisses it. */
+    onclose?: () => void;
+    /** Enable TUI mode. */
+    tui?: boolean;
+  }
+
+  let {
+    message,
+    variant = "info",
+    duration = 4000,
+    position = "bottom-right",
+    open = $bindable(false),
+    onclose,
+    tui = false,
+  }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  const variantIcon: Record<string, string> = {
+    info:    "ℹ",
+    success: "✔",
+    warning: "⚠",
+    error:   "✖",
+  };
+
+  function dismiss() {
+    open = false;
+    onclose?.();
+  }
+
+  $effect(() => {
+    if (!open || duration === 0) return;
+    const timer = setTimeout(dismiss, duration);
+    return () => clearTimeout(timer);
+  });
+</script>
+
+{#if open}
+  {#if isTui}
+    <div
+      class="tui-toast tui-toast--{variant}"
+      role={variant === "error" || variant === "warning" ? "alert" : "status"}
+      aria-live={variant === "error" || variant === "warning" ? "assertive" : "polite"}
+    >
+      <span class="tui-icon" aria-hidden="true">{variantIcon[variant]}</span>
+      <span class="tui-message">{message}</span>
+      <button type="button" class="tui-dismiss" aria-label="Dismiss" onclick={dismiss}>✕</button>
+    </div>
+  {:else}
+    <div
+      class="toast toast--{variant} toast--{position}"
+      role={variant === "error" || variant === "warning" ? "alert" : "status"}
+      aria-live={variant === "error" || variant === "warning" ? "assertive" : "polite"}
+    >
+      <span class="toast-icon" aria-hidden="true">{variantIcon[variant]}</span>
+      <span class="toast-message">{message}</span>
+      <button type="button" class="toast-dismiss" aria-label="Dismiss" onclick={dismiss}>✕</button>
+    </div>
+  {/if}
+{/if}
+
+<style>
+  /* ===== GUI mode ===== */
+  .toast {
+    position: fixed;
+    z-index: var(--z-toast, 1100);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: var(--space-3, 12px) var(--space-4, 16px);
+    background: var(--surface-2, #1e1e1e);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    box-shadow: var(--elevation-2, var(--shadow-md));
+    font-size: var(--text-sm, 14px);
+    color: var(--color-text, #e8e8e8);
+    max-width: 360px;
+    animation: toast-in 0.2s ease;
+  }
+
+  @keyframes toast-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  .toast--top-right    { top: var(--space-4, 16px);    right:  var(--space-4, 16px); }
+  .toast--top-left     { top: var(--space-4, 16px);    left:   var(--space-4, 16px); }
+  .toast--bottom-right { bottom: var(--space-4, 16px); right:  var(--space-4, 16px); }
+  .toast--bottom-left  { bottom: var(--space-4, 16px); left:   var(--space-4, 16px); }
+
+  .toast--info    { border-left: 3px solid var(--color-info,    #3b82f6); }
+  .toast--success { border-left: 3px solid var(--color-success, #22c55e); }
+  .toast--warning { border-left: 3px solid var(--color-warning, #f59e0b); }
+  .toast--error   { border-left: 3px solid var(--color-danger,  #ef4444); }
+
+  .toast-icon {
+    font-size: var(--text-base, 16px);
+    flex-shrink: 0;
+  }
+
+  .toast--info    .toast-icon { color: var(--color-info,    #3b82f6); }
+  .toast--success .toast-icon { color: var(--color-success, #22c55e); }
+  .toast--warning .toast-icon { color: var(--color-warning, #f59e0b); }
+  .toast--error   .toast-icon { color: var(--color-danger,  #ef4444); }
+
+  .toast-message { flex: 1; }
+
+  .toast-dismiss {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-text-muted, #888);
+    font-size: 12px;
+    padding: 0;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  .toast-dismiss:hover { color: var(--color-text, #e8e8e8); }
+  .toast-dismiss:focus-visible {
+    outline: var(--focus-ring-width, 3px) solid var(--color-focus-ring, #818cf8);
+    outline-offset: var(--focus-ring-offset, 2px);
+  }
+
+  /* ===== TUI mode ===== */
+  .tui-toast {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: 0 var(--space-2, 8px);
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+    color: var(--tui-text, #e0e0e0);
+    background: var(--tui-surface, #16213e);
+    border-top: 1px solid var(--tui-border, #0f3460);
+  }
+
+  .tui-toast--info    .tui-icon { color: var(--color-info,    #3b82f6); }
+  .tui-toast--success .tui-icon { color: var(--tui-success,   #00ff88); }
+  .tui-toast--warning .tui-icon { color: var(--tui-warning,   #ffaa00); }
+  .tui-toast--error   .tui-icon { color: var(--tui-error,     #ff4444); }
+
+  .tui-message { flex: 1; }
+
+  .tui-dismiss {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--tui-text-dim, #888888);
+    font-family: inherit;
+    font-size: 12px;
+    padding: 0;
+  }
+
+  .tui-dismiss:focus-visible {
+    outline: 1px solid var(--tui-accent, #00d4ff);
+  }
+</style>

package/dist/overlays/Toast.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    /** Notification message. */
+    message: string;
+    /** Visual variant. Default: "info". */
+    variant?: "info" | "success" | "warning" | "error";
+    /** Auto-dismiss delay in ms (0 = persistent). Default: 4000. */
+    duration?: number;
+    /** Position corner (GUI only). Default: "bottom-right". */
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    /** Whether the toast is visible. */
+    open?: boolean;
+    /** Called when the toast auto-closes or the user dismisses it. */
+    onclose?: () => void;
+    /** Enable TUI mode. */
+    tui?: boolean;
+}
+declare const Toast: import("svelte").Component<Props, {}, "open">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;