@plures/design-dojo 0.5.2 → 0.7.1

package/dist/data/ListItem.svelte

@@ -0,0 +1,130 @@
+<!--
+  ListItem — A single item in a List.
+
+  TUI mode: monospace font, "› " prefix on highlighted items, dark-gray highlight.
+  GUI mode: bullet prefix, hover state, accent color highlight.
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    tui?: boolean;
+    highlighted?: boolean;
+    /** Bullet character. Defaults: "•" (GUI), highlight-aware "› "/"  " (TUI). */
+    prefix?: string;
+    onclick?: (e: MouseEvent) => void;
+    children: Snippet;
+  }
+
+  let { tui = false, highlighted = false, prefix, onclick, children }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+  const bulletText = $derived(
+    isTui ? (highlighted ? "› " : "  ") : (prefix ?? "•"),
+  );
+</script>
+
+<li
+  class="list-item"
+  class:tui={isTui}
+  class:highlighted
+  role="option"
+  aria-selected={highlighted}
+  tabindex={onclick ? 0 : undefined}
+  {onclick}
+  onkeydown={onclick
+    ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          (e.currentTarget as HTMLElement).click();
+        }
+      }
+    : undefined}
+>
+  <span class="prefix" aria-hidden="true">{bulletText}</span>
+  <span class="label">{@render children()}</span>
+</li>
+
+<style>
+  .list-item {
+    display: flex;
+    align-items: baseline;
+    padding: var(--space-1, 4px) var(--space-3, 12px);
+    border-radius: var(--radius-sm, 6px);
+    cursor: default;
+    list-style: none;
+    color: var(--color-text, #e8e8e8);
+    font-size: var(--text-sm, 14px);
+    line-height: var(--leading-normal, 1.5);
+    transition: background 0.15s ease;
+    user-select: none;
+  }
+
+  .list-item[tabindex] {
+    cursor: pointer;
+    outline: none;
+  }
+
+  .list-item[tabindex]:focus-visible {
+    box-shadow: 0 0 0 2px var(--color-accent, #6366f1);
+  }
+
+  .list-item:hover {
+    background: var(--alpha-10, rgba(255, 255, 255, 0.1));
+  }
+
+  .list-item.highlighted {
+    background: rgba(99, 102, 241, 0.15);
+    color: var(--color-accent-hover, #818cf8);
+  }
+
+  .prefix {
+    color: var(--color-text-muted, #888);
+    font-size: var(--text-xs, 12px);
+    flex-shrink: 0;
+    margin-right: var(--space-2, 8px);
+  }
+
+  .list-item.highlighted .prefix {
+    color: var(--color-accent, #6366f1);
+  }
+
+  .label {
+    flex: 1;
+  }
+
+  /* ===== TUI mode ===== */
+  .list-item.tui {
+    font-family: var(--font-mono, monospace);
+    border-radius: var(--tui-radius, 0px);
+    padding: 0 var(--space-1, 4px);
+    background: transparent;
+    color: var(--tui-text, #e0e0e0);
+    transition: none;
+    font-size: var(--text-sm, 14px);
+  }
+
+  .list-item.tui:hover {
+    background: transparent;
+  }
+
+  .list-item.tui.highlighted {
+    background: var(--tui-highlight, #533483);
+    color: var(--tui-accent, #00d4ff);
+  }
+
+  .list-item.tui[tabindex]:focus-visible {
+    outline: 1px solid var(--tui-accent, #00d4ff);
+    outline-offset: -1px;
+    box-shadow: none;
+  }
+
+  .list-item.tui .prefix {
+    color: inherit;
+    font-size: inherit;
+    white-space: pre;
+    margin-right: 0;
+  }
+</style>

package/dist/data/ListItem.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+interface Props {
+    tui?: boolean;
+    highlighted?: boolean;
+    /** Bullet character. Defaults: "•" (GUI), highlight-aware "› "/"  " (TUI). */
+    prefix?: string;
+    onclick?: (e: MouseEvent) => void;
+    children: Snippet;
+}
+declare const ListItem: import("svelte").Component<Props, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/data/Table.svelte

@@ -0,0 +1,241 @@
+<!--
+  Table — Data table with column headers and row selection.
+
+  Maps to ratatui::widgets::Table in TUI mode.
+
+  Usage:
+    <Table {columns} {rows} selected={rowIndex} onselect={handleSelect} />
+
+  TUI mode: box-drawing borders (╔╦╗╠╬╣╚╩╝), bold accent header,
+            reversed-color selection (white-on-dark → dark-on-white).
+  GUI mode: styled HTML table — sticky header, hover rows, border-collapse,
+            accent-tinted selection highlight.
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+
+  interface Column {
+    key: string;
+    label: string;
+    /** Column width in characters (TUI) or multiples of 8 px (GUI). */
+    width?: number;
+  }
+
+  interface Props {
+    tui?: boolean;
+    columns: Column[];
+    rows: Array<Record<string, string>>;
+    selected?: number;
+    class?: string;
+    onselect?: (index: number) => void;
+  }
+
+  let {
+    tui = false,
+    columns,
+    rows,
+    selected = -1,
+    class: className = "",
+    onselect,
+  }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  // Compute per-column character widths for TUI rendering.
+  const colWidths = $derived(
+    columns.map((col) => {
+      const maxData = rows.reduce(
+        (max, row) => Math.max(max, (row[col.key] ?? "").length),
+        0,
+      );
+      return col.width ?? Math.max(col.label.length, maxData, 3);
+    }),
+  );
+
+  /** One space of padding on each side of a cell value. */
+  const CELL_PADDING = 2;
+
+  function hLine(
+    widths: number[],
+    left: string,
+    cross: string,
+    right: string,
+  ): string {
+    return left + widths.map((w) => "═".repeat(w + CELL_PADDING)).join(cross) + right;
+  }
+
+  function cellRow(cells: string[], widths: number[]): string {
+    return (
+      "║" +
+      cells.map((cell, i) => " " + cell.padEnd(widths[i]) + " ").join("║") +
+      "║"
+    );
+  }
+
+  const topBorder = $derived(hLine(colWidths, "╔", "╦", "╗"));
+  const headerRow = $derived(cellRow(columns.map((c) => c.label), colWidths));
+  const sepBorder = $derived(hLine(colWidths, "╠", "╬", "╣"));
+  const bottomBorder = $derived(hLine(colWidths, "╚", "╩", "╝"));
+
+  function handleKeyDown(e: KeyboardEvent, index: number) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onselect?.(index);
+    }
+  }
+</script>
+
+{#if isTui}
+  <div class="tui-table {className}" role="grid" aria-label="table">
+    <div class="tui-border" aria-hidden="true">{topBorder}</div>
+    <div class="tui-header" role="row">{headerRow}</div>
+    <div class="tui-border" aria-hidden="true">{sepBorder}</div>
+    {#each rows as row, i}
+      {@const cells = columns.map((c) => row[c.key] ?? "")}
+      <div
+        class="tui-row"
+        class:selected={i === selected}
+        role="row"
+        aria-selected={i === selected}
+        tabindex="0"
+        onclick={() => onselect?.(i)}
+        onkeydown={(e) => handleKeyDown(e, i)}
+      >{cellRow(cells, colWidths)}</div>
+    {/each}
+    <div class="tui-border" aria-hidden="true">{bottomBorder}</div>
+  </div>
+{:else}
+  <div class="table-wrap {className}">
+    <table class="table" role="grid">
+      <thead>
+        <tr>
+          {#each columns as col}
+            <th style:width={col.width ? `${col.width * 8}px` : undefined}
+              >{col.label}</th
+            >
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row, i}
+          <tr
+            class:selected={i === selected}
+            aria-selected={i === selected}
+            tabindex="0"
+            onclick={() => onselect?.(i)}
+            onkeydown={(e) => handleKeyDown(e, i)}
+          >
+            {#each columns as col}
+              <td>{row[col.key] ?? ""}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}
+
+<style>
+  /* ===== GUI Table ===== */
+  .table-wrap {
+    overflow-x: auto;
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border, #2a2a2a) transparent;
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--text-sm, 14px);
+    color: var(--color-text, #e8e8e8);
+  }
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--surface-2, #1e1e1e);
+  }
+
+  th {
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+    text-align: left;
+    font-weight: 600;
+    font-size: var(--text-xs, 12px);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted, #888);
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+    white-space: nowrap;
+  }
+
+  td {
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+    vertical-align: middle;
+  }
+
+  tbody tr {
+    cursor: pointer;
+    outline: none;
+    transition: background 0.12s ease;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  tbody tr:hover {
+    background: var(--alpha-5, rgba(255, 255, 255, 0.05));
+  }
+
+  tbody tr.selected {
+    background: rgba(99, 102, 241, 0.12);
+  }
+
+  tbody tr.selected td {
+    color: var(--color-accent-hover, #818cf8);
+  }
+
+  tbody tr:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--color-accent, #6366f1);
+  }
+
+  /* ===== TUI Table ===== */
+  .tui-table {
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+    color: var(--tui-text, #e0e0e0);
+    background: var(--tui-surface, #16213e);
+    display: inline-block;
+    white-space: pre;
+    line-height: 1.4;
+  }
+
+  .tui-border {
+    color: var(--tui-border, #0f3460);
+  }
+
+  .tui-header {
+    color: var(--tui-accent, #00d4ff);
+    font-weight: bold;
+  }
+
+  .tui-row {
+    cursor: pointer;
+    outline: none;
+  }
+
+  .tui-row:focus-visible {
+    outline: 1px solid var(--tui-accent, #00d4ff);
+    outline-offset: -1px;
+  }
+
+  .tui-row.selected {
+    background: var(--tui-text, #e0e0e0);
+    color: var(--tui-bg, #1a1a2e);
+  }
+</style>

package/dist/data/Table.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Column {
+    key: string;
+    label: string;
+    /** Column width in characters (TUI) or multiples of 8 px (GUI). */
+    width?: number;
+}
+interface Props {
+    tui?: boolean;
+    columns: Column[];
+    rows: Array<Record<string, string>>;
+    selected?: number;
+    class?: string;
+    onselect?: (index: number) => void;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/data/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Table } from "./Table.svelte";
+export { default as List } from "./List.svelte";
+export { default as ListItem } from "./ListItem.svelte";

package/dist/data/index.js

@@ -0,0 +1,3 @@
+export { default as Table } from "./Table.svelte";
+export { default as List } from "./List.svelte";
+export { default as ListItem } from "./ListItem.svelte";

package/dist/disclosure/Accordion.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  export interface AccordionItem { id: string; title: string; content: string }
+  interface Props {
+    items: AccordionItem[];
+    single?: boolean;
+    openIds?: string[];
+    tui?: boolean;
+    className?: string;
+  }
+  let { items, single = false, openIds = [], tui = false, className = "" }: Props = $props();
+
+  function toggle(id: string) {
+    if (openIds.includes(id)) openIds = openIds.filter((x) => x !== id);
+    else if (single) openIds = [id];
+    else openIds = [...openIds, id];
+  }
+</script>
+
+<div class="accordion {className}" class:tui={tui}>
+  {#each items as item}
+    <section class="item">
+      <button class="trigger" onclick={() => toggle(item.id)} aria-expanded={openIds.includes(item.id)}>
+        <span>{item.title}</span>
+        <span class="chev" class:open={openIds.includes(item.id)}>▾</span>
+      </button>
+      {#if openIds.includes(item.id)}
+        <div class="panel">{item.content}</div>
+      {/if}
+    </section>
+  {/each}
+</div>
+
+<style>
+  .accordion { display: grid; gap: var(--space-2); }
+  .item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-1); }
+  .trigger {
+    width: 100%; border: 0; background: transparent; color: var(--color-text); padding: var(--space-3);
+    display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
+  }
+  .trigger:hover { background: var(--alpha-5); }
+  .trigger:focus-visible { outline: 1px solid var(--color-accent); outline-offset: -1px; }
+  .panel { padding: 0 var(--space-3) var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
+  .chev { transition: transform 150ms ease; }
+  .chev.open { transform: rotate(180deg); }
+
+  .accordion.tui .item { background: var(--tui-surface, #16213e); border-color: var(--tui-border, #0f3460); }
+  .accordion.tui .trigger, .accordion.tui .panel { color: var(--tui-text, #e0e0e0); font-family: var(--font-mono, monospace); }
+</style>

package/dist/disclosure/Accordion.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: string;
+}
+interface Props {
+    items: AccordionItem[];
+    single?: boolean;
+    openIds?: string[];
+    tui?: boolean;
+    className?: string;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/feedback/Badge.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { useTui } from "../useTui.js";
+
+  type Variant = "default" | "neutral" | "info" | "success" | "warning" | "danger" | "accent" | "muted" | "outline" | "ghost";
+  type Size = "sm" | "md" | "lg";
+
+  interface Props {
+    variant?: Variant;
+    size?: Size;
+    pill?: boolean;
+    tui?: boolean;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { variant = "default", size = "md", pill = true, tui = false, className = "", children }: Props = $props();
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+</script>
+
+<span class="badge v-{variant} s-{size} {className}" class:pill class:tui={isTui}>
+  {@render children?.()}
+</span>
+
+<style>
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    border-radius: var(--radius-md);
+    border: 1px solid transparent;
+    background: var(--surface-2);
+    color: var(--color-text);
+    font-weight: 600;
+    letter-spacing: .02em;
+  }
+  .s-sm { min-block-size: var(--space-4); padding: 0 var(--space-2); font-size: var(--text-xs); }
+  .s-md { min-block-size: calc(var(--space-4) + 2px); padding: 0 var(--space-2); font-size: var(--text-xs); }
+  .s-lg { min-block-size: var(--space-5); padding: 0 var(--space-3); font-size: var(--text-sm); }
+  .pill { border-radius: var(--radius-full); }
+
+  .v-default { background: var(--surface-2); color: var(--color-text); }
+  .v-neutral { background: var(--surface-1); color: var(--color-text-muted); border-color: var(--color-border); }
+  .v-info { background: color-mix(in oklab, var(--color-info) 18%, var(--surface-1)); color: var(--color-info); }
+  .v-success { background: color-mix(in oklab, var(--color-success) 18%, var(--surface-1)); color: var(--color-success); }
+  .v-warning { background: color-mix(in oklab, var(--color-warning) 18%, var(--surface-1)); color: var(--color-warning); }
+  .v-danger { background: color-mix(in oklab, var(--color-danger) 18%, var(--surface-1)); color: var(--color-danger); }
+  .v-accent { background: color-mix(in oklab, var(--color-accent) 20%, var(--surface-1)); color: var(--color-accent-hover); }
+  .v-muted { background: transparent; color: var(--color-text-subtle); border-color: var(--color-border); }
+  .v-outline { background: transparent; color: var(--color-text); border-color: var(--color-border); }
+  .v-ghost { background: transparent; color: var(--color-text-muted); }
+
+  .tui {
+    background: var(--tui-surface, #16213e);
+    color: var(--tui-text, #e0e0e0);
+    border-color: var(--tui-border, #0f3460);
+    font-family: var(--font-mono, monospace);
+  }
+</style>

package/dist/feedback/Badge.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+type Variant = "default" | "neutral" | "info" | "success" | "warning" | "danger" | "accent" | "muted" | "outline" | "ghost";
+type Size = "sm" | "md" | "lg";
+interface Props {
+    variant?: Variant;
+    size?: Size;
+    pill?: boolean;
+    tui?: boolean;
+    className?: string;
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/feedback/Callout.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { useTui } from "../useTui.js";
+
+  type Tone = "info" | "tip" | "warning" | "error";
+  interface Props {
+    tone?: Tone;
+    title?: string;
+    tui?: boolean;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { tone = "info", title = "", tui = false, className = "", children }: Props = $props();
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+  const icon = $derived(tone === "warning" ? "⚠" : tone === "error" ? "⛔" : tone === "tip" ? "💡" : "ℹ");
+</script>
+
+<aside class="callout tone-{tone} {className}" class:tui={isTui} role="status">
+  <span class="icon" aria-hidden="true">{icon}</span>
+  <div class="body">
+    {#if title}<div class="title">{title}</div>{/if}
+    <div class="content">{@render children?.()}</div>
+  </div>
+</aside>
+
+<style>
+  .callout {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--space-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--space-3);
+    background: var(--surface-1);
+  }
+  .icon { font-size: var(--text-base); line-height: 1; margin-top: 2px; }
+  .title { color: var(--color-text); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-1); }
+  .content { color: var(--color-text-muted); font-size: var(--text-sm); }
+  .tone-info { border-left: var(--space-1) solid var(--color-info); }
+  .tone-tip { border-left: var(--space-1) solid var(--color-accent); }
+  .tone-warning { border-left: var(--space-1) solid var(--color-warning); }
+  .tone-error { border-left: var(--space-1) solid var(--color-danger); }
+
+  .callout.tui {
+    background: var(--tui-surface, #16213e);
+    border-color: var(--tui-border, #0f3460);
+    color: var(--tui-text, #e0e0e0);
+    font-family: var(--font-mono, monospace);
+  }
+</style>

package/dist/feedback/Callout.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+type Tone = "info" | "tip" | "warning" | "error";
+interface Props {
+    tone?: Tone;
+    title?: string;
+    tui?: boolean;
+    className?: string;
+    children?: Snippet;
+}
+declare const Callout: import("svelte").Component<Props, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/feedback/EmptyState.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { useTui } from "../useTui.js";
+
+  interface Props {
+    title: string;
+    description?: string;
+    loading?: boolean;
+    tui?: boolean;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { title, description = "", loading = false, tui = false, className = "", children }: Props = $props();
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+</script>
+
+<div class="empty {className}" class:tui={isTui} role="status" aria-live="polite">
+  <div class="glyph" aria-hidden="true">{loading ? "◌" : "∅"}</div>
+  <div class="title">{loading ? "Loading…" : title}</div>
+  {#if description}<div class="desc">{description}</div>{/if}
+  {@render children?.()}
+</div>
+
+<style>
+  .empty {
+    border: 1px dashed var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: var(--space-6);
+    text-align: center;
+    display: grid;
+    gap: var(--space-2);
+    justify-items: center;
+    background: color-mix(in oklab, var(--surface-1) 90%, transparent);
+  }
+  .glyph { color: var(--color-text-subtle); font-size: var(--text-2xl); }
+  .title { color: var(--color-text); font-size: var(--text-base); font-weight: 600; }
+  .desc { color: var(--color-text-muted); font-size: var(--text-sm); max-inline-size: 44ch; }
+
+  .empty.tui {
+    background: var(--tui-surface, #16213e);
+    border-color: var(--tui-border, #0f3460);
+    color: var(--tui-text, #e0e0e0);
+    font-family: var(--font-mono, monospace);
+  }
+</style>

package/dist/feedback/EmptyState.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    description?: string;
+    loading?: boolean;
+    tui?: boolean;
+    className?: string;
+    children?: Snippet;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;