@plures/design-dojo 0.5.3 → 0.7.1

package/dist/layout/StatusBarItem.svelte

@@ -0,0 +1,146 @@
+<!--
+  StatusBarItem — A single item in a StatusBar.
+
+  Shows an optional label and a value with color coding.
+  In TUI mode, renders with terminal-safe colors and │ separators between items.
+  The separator is added via CSS ::before — hidden on :first-child automatically.
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+
+  interface Props {
+    /** Optional label shown before the value */
+    label?: string;
+    /** The value to display */
+    value: string;
+    /** Color theme for the value */
+    color?: "default" | "accent" | "success" | "warning" | "error";
+    /** Inverse colors for vim-style mode indicator */
+    highlight?: boolean;
+    /** Show a visual separator after this item (GUI mode) */
+    separator?: boolean;
+  }
+
+  let { label, value, color = "default", highlight = false, separator = false }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(getTuiCtx());
+</script>
+
+<span
+  class="status-item"
+  class:tui={isTui}
+  class:highlight
+  class:has-separator={!isTui && separator}
+  data-color={color}
+>
+  {#if isTui}
+    <span class="tui-content" class:reversed={highlight}>
+      {#if label}<span class="tui-label">{label}: </span>{/if}<span class="tui-value">{value}</span>
+    </span>
+  {:else}
+    {#if label}<span class="gui-label">{label}</span>{/if}
+    <span class="gui-value">{value}</span>
+  {/if}
+</span>
+
+<style>
+  /* ===== Shared ===== */
+  .status-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1, 4px);
+    padding: 0 var(--space-2, 8px);
+    font-size: var(--text-xs, 12px);
+    height: 100%;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  /* ===== GUI mode ===== */
+  .gui-label {
+    color: var(--color-text-muted, #888888);
+    font-size: var(--text-xs, 12px);
+  }
+
+  .gui-label::after {
+    content: ":";
+    margin-right: var(--space-1, 4px);
+  }
+
+  /* GUI value colors */
+  .status-item[data-color="default"] .gui-value { color: var(--color-text, #e8e8e8); }
+  .status-item[data-color="accent"]  .gui-value { color: var(--color-accent, #6366f1); }
+  .status-item[data-color="success"] .gui-value { color: var(--color-success, #22c55e); }
+  .status-item[data-color="warning"] .gui-value { color: var(--color-warning, #f59e0b); }
+  .status-item[data-color="error"]   .gui-value { color: var(--color-danger, #ef4444); }
+
+  /* GUI highlight: inverse colors */
+  .status-item.highlight:not(.tui) {
+    background: var(--color-accent, #6366f1);
+    color: white;
+    border-radius: var(--radius-sm, 6px);
+  }
+
+  /* GUI separator: vertical rule after the item */
+  .status-item.has-separator:not(.tui)::after {
+    content: "";
+    display: inline-block;
+    width: 1px;
+    height: 16px;
+    background: var(--color-border, #2a2a2a);
+    margin-left: var(--space-2, 8px);
+  }
+
+  /* ===== TUI mode ===== */
+  .status-item.tui {
+    padding: 0;
+    gap: 0;
+    font-family: var(--font-mono, monospace);
+    font-size: inherit;
+    height: auto;
+    align-items: stretch;
+  }
+
+  /* Separator: │ before each TUI item, hidden on first child */
+  .status-item.tui::before {
+    content: "│";
+    color: var(--tui-border, #0f3460);
+    user-select: none;
+    align-self: center;
+  }
+
+  .status-item.tui:first-child::before {
+    content: "";
+  }
+
+  .tui-content {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--space-1, 4px);
+    align-self: center;
+  }
+
+  .tui-label {
+    color: var(--tui-text-dim, #888888);
+  }
+
+  /* TUI value colors */
+  .status-item.tui[data-color="default"] .tui-value { color: var(--tui-text, #e0e0e0); }
+  .status-item.tui[data-color="accent"]  .tui-value { color: var(--tui-accent, #00d4ff); }
+  .status-item.tui[data-color="success"] .tui-value { color: var(--tui-success, #00ff88); }
+  .status-item.tui[data-color="warning"] .tui-value { color: var(--tui-warning, #ffaa00); }
+  .status-item.tui[data-color="error"]   .tui-value { color: var(--tui-error, #ff4444); }
+
+  /* TUI highlight: reversed colors (vim-style mode indicator) */
+  .tui-content.reversed {
+    background: var(--tui-text, #e0e0e0);
+    color: var(--tui-bg, #1a1a2e);
+  }
+
+  /* Override data-color value rules with higher specificity for the reversed state */
+  .status-item.tui.highlight[data-color] .tui-value,
+  .status-item.tui.highlight[data-color] .tui-label {
+    color: var(--tui-bg, #1a1a2e);
+  }
+</style>

package/dist/layout/StatusBarItem.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    /** Optional label shown before the value */
+    label?: string;
+    /** The value to display */
+    value: string;
+    /** Color theme for the value */
+    color?: "default" | "accent" | "success" | "warning" | "error";
+    /** Inverse colors for vim-style mode indicator */
+    highlight?: boolean;
+    /** Show a visual separator after this item (GUI mode) */
+    separator?: boolean;
+}
+declare const StatusBarItem: import("svelte").Component<Props, {}, "">;
+type StatusBarItem = ReturnType<typeof StatusBarItem>;
+export default StatusBarItem;

package/dist/layout/StatusBarSpacer.svelte

@@ -0,0 +1,38 @@
+<!--
+  StatusBarSpacer — Fills remaining horizontal space in a StatusBar.
+
+  GUI mode: flex: 1 (greedy fill).
+  TUI mode: flex: 1 fill with │ separator before it (hidden if first child).
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(getTuiCtx());
+</script>
+
+<span class="status-spacer" class:tui={isTui} aria-hidden="true"></span>
+
+<style>
+  .status-spacer {
+    flex: 1;
+  }
+
+  /* ===== TUI mode ===== */
+  .status-spacer.tui {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  /* Separator: │ before the spacer, hidden if it is the first child */
+  .status-spacer.tui::before {
+    content: "│";
+    color: var(--tui-border, #0f3460);
+    user-select: none;
+    align-self: center;
+  }
+
+  .status-spacer.tui:first-child::before {
+    content: "";
+  }
+</style>

package/dist/layout/StatusBarSpacer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const StatusBarSpacer: import("svelte").Component<Record<string, never>, {}, "">;
+type StatusBarSpacer = ReturnType<typeof StatusBarSpacer>;
+export default StatusBarSpacer;

package/dist/layout/Tabs.svelte

@@ -0,0 +1,254 @@
+<!--
+  Tabs — Horizontal tab bar with panel switching.
+
+  GUI mode: styled tab strip with indicator underline.
+  TUI mode: box-drawing tab headers, active tab highlighted with accent color.
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+  import type { Snippet } from "svelte";
+  import type { Tab } from "./Tabs.types.js";
+
+  export type { Tab };
+
+  interface Props {
+    /** Tab definitions. */
+    tabs: Tab[];
+    /** Currently active tab key. */
+    activeTab?: string;
+    /** Called when the user selects a tab. */
+    ontabchange?: (key: string) => void;
+    /** Enable TUI mode. */
+    tui?: boolean;
+    /** Tab panel content — receives the active tab key. */
+    children?: Snippet<[{ activeTab: string }]>;
+  }
+
+  let {
+    tabs,
+    activeTab = $bindable(tabs[0]?.key ?? ""),
+    ontabchange,
+    tui = false,
+    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 tablistId = createId("tabs");
+
+  // Refs to each tab button for programmatic focus (roving tabindex)
+  let tabEls: Array<HTMLButtonElement | undefined> = $state([]);
+
+  function select(key: string) {
+    activeTab = key;
+    ontabchange?.(key);
+  }
+
+  function focusTabByKey(key: string) {
+    const idx = tabs.findIndex((t) => t.key === key);
+    tabEls[idx]?.focus();
+  }
+
+  function handleKeydown(e: KeyboardEvent, index: number) {
+    const enabled = tabs.filter((t) => !t.disabled);
+    const cur = enabled.findIndex((t) => t.key === tabs[index].key);
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const next = enabled[(cur + 1) % enabled.length];
+      if (next) { select(next.key); focusTabByKey(next.key); }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const prev = enabled[(cur - 1 + enabled.length) % enabled.length];
+      if (prev) { select(prev.key); focusTabByKey(prev.key); }
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      if (enabled[0]) { select(enabled[0].key); focusTabByKey(enabled[0].key); }
+    } else if (e.key === "End") {
+      e.preventDefault();
+      const last = enabled[enabled.length - 1];
+      if (last) { select(last.key); focusTabByKey(last.key); }
+    }
+  }
+</script>
+
+<div class="tabs" class:tabs--tui={isTui}>
+  <!-- Tab strip -->
+  <div class="tablist" role="tablist" id={tablistId}>
+    {#if isTui}
+      {#each tabs as tab, i}
+        <button
+          type="button"
+          class="tui-tab"
+          class:active={tab.key === activeTab}
+          class:disabled={tab.disabled}
+          role="tab"
+          aria-selected={tab.key === activeTab}
+          aria-disabled={tab.disabled}
+          tabindex={tab.key === activeTab ? 0 : -1}
+          id={`${tablistId}-${tab.key}`}
+          aria-controls={`${tablistId}-panel-${tab.key}`}
+          bind:this={tabEls[i]}
+          onclick={() => !tab.disabled && select(tab.key)}
+          onkeydown={(e) => handleKeydown(e, i)}
+        >
+          {#if tab.icon}<span aria-hidden="true">{tab.icon}</span>{/if}
+          {tab.label}
+        </button>
+      {/each}
+    {:else}
+      {#each tabs as tab, i}
+        <button
+          type="button"
+          class="tab"
+          class:tab--active={tab.key === activeTab}
+          class:tab--disabled={tab.disabled}
+          role="tab"
+          aria-selected={tab.key === activeTab}
+          aria-disabled={tab.disabled}
+          tabindex={tab.key === activeTab ? 0 : -1}
+          id={`${tablistId}-${tab.key}`}
+          aria-controls={`${tablistId}-panel-${tab.key}`}
+          bind:this={tabEls[i]}
+          onclick={() => !tab.disabled && select(tab.key)}
+          onkeydown={(e) => handleKeydown(e, i)}
+        >
+          {#if tab.icon}<span class="tab-icon" aria-hidden="true">{tab.icon}</span>{/if}
+          {tab.label}
+        </button>
+      {/each}
+    {/if}
+  </div>
+
+  <!-- Tab panel -->
+  {#if children}
+    <div
+      class="tabpanel"
+      class:tabpanel--tui={isTui}
+      role="tabpanel"
+      id={`${tablistId}-panel-${activeTab}`}
+      aria-labelledby={`${tablistId}-${activeTab}`}
+    >
+      {@render children({ activeTab })}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tabs {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  /* ===== GUI mode ===== */
+  .tablist {
+    display: flex;
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+    gap: var(--space-1, 4px);
+  }
+
+  .tab {
+    position: relative;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--space-2, 8px) var(--space-4, 16px);
+    font-size: var(--text-sm, 14px);
+    font-family: inherit;
+    color: var(--color-text-muted, #888);
+    border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
+    outline: none;
+    transition: color 0.15s ease;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1, 4px);
+  }
+
+  .tab:hover:not(.tab--disabled) { color: var(--color-text, #e8e8e8); }
+
+  .tab--active {
+    color: var(--color-accent, #6366f1);
+    font-weight: 500;
+  }
+
+  .tab--active::after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--color-accent, #6366f1);
+    border-radius: 2px 2px 0 0;
+  }
+
+  .tab--disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .tab:focus-visible {
+    outline: var(--focus-ring-width, 3px) solid var(--color-focus-ring, #818cf8);
+    outline-offset: var(--focus-ring-offset, 2px);
+  }
+
+  .tab-icon { font-size: 14px; }
+
+  .tabpanel {
+    padding: var(--space-4, 16px);
+    flex: 1;
+    overflow: auto;
+  }
+
+  /* ===== TUI mode ===== */
+  .tabs--tui .tablist {
+    border-bottom: 1px solid var(--tui-border, #0f3460);
+    gap: 0;
+  }
+
+  .tui-tab {
+    background: none;
+    border: 1px solid var(--tui-border, #0f3460);
+    border-bottom: none;
+    color: var(--tui-text-dim, #888888);
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+    cursor: pointer;
+    padding: 2px var(--space-3, 12px);
+    outline: none;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1, 4px);
+    white-space: nowrap;
+  }
+
+  .tui-tab.active {
+    background: var(--tui-surface, #16213e);
+    color: var(--tui-accent, #00d4ff);
+    border-color: var(--tui-accent, #00d4ff);
+  }
+
+  .tui-tab.disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .tui-tab:focus-visible { outline: 1px solid var(--tui-accent, #00d4ff); }
+
+  .tabpanel--tui {
+    background: var(--tui-surface, #16213e);
+    color: var(--tui-text, #e0e0e0);
+    font-family: var(--font-mono, monospace);
+    border: 1px solid var(--tui-border, #0f3460);
+    border-top: none;
+    padding: var(--space-3, 12px);
+  }
+</style>

package/dist/layout/Tabs.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { Tab } from "./Tabs.types.js";
+interface Props {
+    /** Tab definitions. */
+    tabs: Tab[];
+    /** Currently active tab key. */
+    activeTab?: string;
+    /** Called when the user selects a tab. */
+    ontabchange?: (key: string) => void;
+    /** Enable TUI mode. */
+    tui?: boolean;
+    /** Tab panel content — receives the active tab key. */
+    children?: Snippet<[{
+        activeTab: string;
+    }]>;
+}
+declare const Tabs: import("svelte").Component<Props, {
+    Tab: typeof Tab;
+}, "activeTab">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/layout/Tabs.types.js

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