@plures/design-dojo 0.5.2 → 0.7.1

package/dist/layout/Box.svelte

@@ -0,0 +1,207 @@
+<!--
+  Box — Foundational container component.
+
+  Maps to ratatui::widgets::Block in TUI mode.
+  Surface panel (or glassmorphism) in GUI mode.
+
+  TUI mode:
+    Box-drawing borders with optional title. Supports single, double, bold,
+    dashed, rounded, and none border styles.
+
+  GUI mode:
+    Surface panel using --surface-1 background, --radius-md, --shadow-md.
+    If glass=true, uses GlassPanel (backdrop blur) internally.
+-->
+<script lang="ts">
+  import { useTui, provideTui } from "../useTui.js";
+  import GlassPanel from "../surfaces/GlassPanel.svelte";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    /** Enable TUI mode: box-drawing borders, terminal-safe colors. */
+    tui?: boolean;
+    /** Border style. Default: "rounded" (GUI), "single" (TUI). */
+    border?: "none" | "single" | "double" | "bold" | "dashed" | "rounded";
+    /** Title displayed in the top border (TUI) or as a header (GUI). */
+    title?: string;
+    /** Uniform padding. Multiples of 4px in GUI; character cells in TUI. */
+    padding?: number;
+    /** Width: CSS string in GUI mode, character columns as number in TUI mode (strings ignored in TUI). */
+    width?: string | number;
+    /** Height: CSS string in GUI mode. Ignored in TUI (content-driven). */
+    height?: string | number;
+    /** GUI only: use glassmorphism (GlassPanel) instead of flat surface. */
+    glass?: boolean;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    tui = false,
+    border,
+    title,
+    padding,
+    width,
+    height,
+    glass = false,
+    class: className = "",
+    children: renderChildren,
+  }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  // Propagate TUI mode to all descendant components.
+  provideTui(() => isTui);
+
+  const effectiveBorder = $derived(border ?? (isTui ? "single" : "rounded"));
+
+  // Border character sets: [h, v, top-left, top-right, bottom-left, bottom-right]
+  const BORDERS: Record<string, readonly [string, string, string, string, string, string]> = {
+    single:  ["─", "│", "┌", "┐", "└", "┘"],
+    rounded: ["─", "│", "╭", "╮", "╰", "╯"],
+    double:  ["═", "║", "╔", "╗", "╚", "╝"],
+    bold:    ["━", "┃", "┏", "┓", "┗", "┛"],
+    dashed:  ["╌", "╎", "┌", "┐", "└", "┘"],
+    none:    ["", "", "", "", "", ""],
+  };
+
+  // In TUI mode, width as number = inner character columns.
+  const tuiCols = $derived(typeof width === "number" ? width : 30);
+  const bchars = $derived(BORDERS[effectiveBorder] ?? BORDERS["single"]);
+
+  function buildTopBorder(
+    chars: readonly [string, string, string, string, string, string],
+    cols: number,
+    t: string | undefined,
+  ): string {
+    const [h, , tl, tr] = chars;
+    if (!tl) return ""; // "none" border
+    if (t) {
+      const titleStr = ` ${t} `;
+      const remaining = Math.max(0, cols - titleStr.length - 1);
+      return `${tl}${h}${titleStr}${h.repeat(remaining)}${tr}`;
+    }
+    return `${tl}${h.repeat(cols)}${tr}`;
+  }
+
+  function buildBottomBorder(
+    chars: readonly [string, string, string, string, string, string],
+    cols: number,
+  ): string {
+    const [h, , , , bl, br] = chars;
+    if (!bl) return ""; // "none" border
+    return `${bl}${h.repeat(cols)}${br}`;
+  }
+
+  // GUI mode styles
+  const guiWidth = $derived(
+    typeof width === "number" ? `${width}px` : (width ?? undefined),
+  );
+  const guiHeight = $derived(
+    typeof height === "number" ? `${height}px` : (height ?? undefined),
+  );
+  const guiPadding = $derived(
+    padding !== undefined ? `${padding * 4}px` : "var(--space-4, 16px)",
+  );
+
+  // Map border style to CSS border + border-radius for GUI mode
+  const guiBorderStyle = $derived(
+    ({
+      none:    { border: "none",                         radius: "0" },
+      single:  { border: "1px solid var(--color-border, #2a2a2a)",    radius: "0" },
+      rounded: { border: "1px solid var(--color-border, #2a2a2a)",    radius: "var(--radius-md, 10px)" },
+      double:  { border: "3px double var(--color-border, #2a2a2a)",   radius: "0" },
+      bold:    { border: "2px solid var(--color-border, #2a2a2a)",    radius: "0" },
+      dashed:  { border: "1px dashed var(--color-border, #2a2a2a)",   radius: "0" },
+    } as Record<string, { border: string; radius: string }>)[effectiveBorder] ??
+    { border: "1px solid var(--color-border, #2a2a2a)", radius: "var(--radius-md, 10px)" },
+  );
+
+  // TUI padding: horizontal = padding ch, vertical = padding * 0.5em
+  const tuiContentPadding = $derived(
+    padding !== undefined && padding > 0 ? `${padding * 0.5}em ${padding}ch` : "0",
+  );
+</script>
+
+{#if isTui}
+  <div
+    class="tui-box {className}"
+    style:width={typeof width === "number" ? `${width}ch` : undefined}
+  >
+    {#if effectiveBorder !== "none"}
+      <div class="tui-border" aria-hidden="true">{buildTopBorder(bchars, tuiCols, title)}</div>
+    {/if}
+    <div class="tui-body">
+      {#if effectiveBorder !== "none"}
+        <span class="tui-side" aria-hidden="true">{bchars[1]}</span>
+      {/if}
+      <div class="tui-content" style:padding={tuiContentPadding}>
+        {@render renderChildren()}
+      </div>
+      {#if effectiveBorder !== "none"}
+        <span class="tui-side" aria-hidden="true">{bchars[1]}</span>
+      {/if}
+    </div>
+    {#if effectiveBorder !== "none"}
+      <div class="tui-border" aria-hidden="true">{buildBottomBorder(bchars, tuiCols)}</div>
+    {/if}
+  </div>
+{:else if glass}
+  <div class="box {className}">
+    <GlassPanel padding={guiPadding}>
+      {#snippet children()}
+        {@render renderChildren()}
+      {/snippet}
+    </GlassPanel>
+  </div>
+{:else}
+  <div
+    class="box {className}"
+    style:width={guiWidth}
+    style:height={guiHeight}
+    style:padding={guiPadding}
+    style:border={guiBorderStyle.border}
+    style:border-radius={guiBorderStyle.radius}
+  >
+    {@render renderChildren()}
+  </div>
+{/if}
+
+<style>
+  /* ===== GUI mode ===== */
+  .box {
+    background: var(--surface-1, #141414);
+    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.1));
+  }
+
+  /* ===== TUI mode ===== */
+  .tui-box {
+    display: inline-block;
+    font-family: var(--font-mono, monospace);
+    color: var(--tui-text, #e0e0e0);
+    background: var(--tui-surface, #16213e);
+  }
+
+  .tui-border {
+    color: var(--tui-border, #0f3460);
+    white-space: pre;
+    line-height: 1;
+  }
+
+  .tui-body {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .tui-side {
+    color: var(--tui-border, #0f3460);
+    user-select: none;
+    line-height: 1;
+  }
+
+  .tui-content {
+    flex: 1;
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Enable TUI mode: box-drawing borders, terminal-safe colors. */
+    tui?: boolean;
+    /** Border style. Default: "rounded" (GUI), "single" (TUI). */
+    border?: "none" | "single" | "double" | "bold" | "dashed" | "rounded";
+    /** Title displayed in the top border (TUI) or as a header (GUI). */
+    title?: string;
+    /** Uniform padding. Multiples of 4px in GUI; character cells in TUI. */
+    padding?: number;
+    /** Width: CSS string in GUI mode, character columns as number in TUI mode (strings ignored in TUI). */
+    width?: string | number;
+    /** Height: CSS string in GUI mode. Ignored in TUI (content-driven). */
+    height?: string | number;
+    /** GUI only: use glassmorphism (GlassPanel) instead of flat surface. */
+    glass?: boolean;
+    class?: string;
+    children: Snippet;
+}
+declare const Box: import("svelte").Component<Props, {}, "">;
+type Box = ReturnType<typeof Box>;
+export default Box;

package/dist/layout/Sidebar.svelte

@@ -0,0 +1,210 @@
+<!--
+  Sidebar — Collapsible side panel for navigation or context.
+
+  GUI mode: slide-in/out with width transition, respects prefers-reduced-motion.
+  TUI mode: fixed-width column with box-drawing border on the open edge.
+-->
+<script lang="ts">
+  import { useTui } from "../useTui.js";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    /** Side the sidebar is attached to. Default: "left". */
+    side?: "left" | "right";
+    /** Width in px when expanded (GUI only). Default: 240. */
+    width?: number;
+    /** Width in character columns when expanded (TUI only). Default: 24. */
+    cols?: number;
+    /** Whether the sidebar is collapsed. */
+    collapsed?: boolean;
+    /** Called when the user toggles the sidebar. */
+    ontoggle?: (collapsed: boolean) => void;
+    /** Enable TUI mode. */
+    tui?: boolean;
+    /** Sidebar content. */
+    children: Snippet;
+    /** Main content area to the right/left of the sidebar. */
+    main?: Snippet;
+  }
+
+  let {
+    side = "left",
+    width = 240,
+    cols = 24,
+    collapsed = $bindable(false),
+    ontoggle,
+    tui = false,
+    children,
+    main,
+  }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  function toggle() {
+    collapsed = !collapsed;
+    ontoggle?.(collapsed);
+  }
+</script>
+
+<div class="sidebar-layout" class:sidebar-layout--tui={isTui} class:sidebar-layout--right={side === "right"}>
+  {#if isTui}
+    {#if !collapsed}
+      <div
+        class="tui-sidebar"
+        style:width="{cols}ch"
+        aria-label="Sidebar"
+        style:border-right={side === "left" ? "1px solid var(--tui-border, #0f3460)" : undefined}
+        style:border-left={side === "right" ? "1px solid var(--tui-border, #0f3460)" : undefined}
+      >
+        <button type="button" class="tui-toggle" aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"} onclick={toggle}>
+          {side === "left" ? "◀" : "▶"}
+        </button>
+        <div class="tui-sidebar-content">{@render children()}</div>
+      </div>
+    {:else}
+      <button type="button" class="tui-toggle tui-toggle--collapsed" aria-label="Expand sidebar" onclick={toggle}>
+        {side === "left" ? "▶" : "◀"}
+      </button>
+    {/if}
+  {:else}
+    <div
+      class="sidebar"
+      class:sidebar--collapsed={collapsed}
+      style:width={collapsed ? "0px" : `${width}px`}
+      aria-label="Sidebar"
+      aria-hidden={collapsed}
+    >
+      <div class="sidebar-inner">{@render children()}</div>
+    </div>
+    <button
+      type="button"
+      class="sidebar-toggle"
+      class:sidebar-toggle--right={side === "right"}
+      aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+      aria-expanded={!collapsed}
+      onclick={toggle}
+    >
+      {#if side === "left"}
+        {collapsed ? "›" : "‹"}
+      {:else}
+        {collapsed ? "‹" : "›"}
+      {/if}
+    </button>
+  {/if}
+
+  {#if main}
+    <div class="sidebar-main" class:sidebar-main--tui={isTui}>
+      {@render main()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sidebar-layout {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .sidebar-layout--right { flex-direction: row-reverse; }
+
+  /* ===== GUI mode ===== */
+  .sidebar {
+    flex-shrink: 0;
+    overflow: hidden;
+    transition: width 0.2s ease;
+    background: var(--surface-1, #141414);
+    border-right: 1px solid var(--color-border, #2a2a2a);
+  }
+
+  .sidebar-layout--right .sidebar {
+    border-right: none;
+    border-left: 1px solid var(--color-border, #2a2a2a);
+  }
+
+  .sidebar-inner {
+    width: 100%;
+    padding: var(--space-3, 12px);
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .sidebar--collapsed { pointer-events: none; }
+
+  .sidebar-toggle {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    z-index: 10;
+    background: var(--surface-2, #1e1e1e);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
+    color: var(--color-text-muted, #888);
+    cursor: pointer;
+    padding: var(--space-2, 8px) var(--space-1, 4px);
+    font-size: 12px;
+    line-height: 1;
+    outline: none;
+  }
+
+  .sidebar-toggle--right {
+    left: auto;
+    right: 0;
+    border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
+  }
+
+  .sidebar-toggle:hover { color: var(--color-text, #e8e8e8); }
+
+  .sidebar-toggle:focus-visible {
+    outline: var(--focus-ring-width, 3px) solid var(--color-focus-ring, #818cf8);
+    outline-offset: var(--focus-ring-offset, 2px);
+  }
+
+  .sidebar-main {
+    flex: 1;
+    min-width: 0;
+    overflow: auto;
+  }
+
+  /* ===== TUI mode ===== */
+  .tui-sidebar {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    background: var(--tui-surface, #16213e);
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+    color: var(--tui-text, #e0e0e0);
+  }
+
+  .tui-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--tui-border, #0f3460);
+    font-family: var(--font-mono, monospace);
+    padding: 2px var(--space-1, 4px);
+    text-align: right;
+    outline: none;
+  }
+
+  .tui-toggle:hover { color: var(--tui-accent, #00d4ff); }
+  .tui-toggle:focus-visible { outline: 1px solid var(--tui-accent, #00d4ff); }
+
+  .tui-toggle--collapsed {
+    display: block;
+    padding: 2px var(--space-1, 4px);
+  }
+
+  .tui-sidebar-content { flex: 1; overflow-y: auto; padding: var(--space-1, 4px); }
+
+  .sidebar-main--tui {
+    background: var(--tui-bg, #1a1a2e);
+    color: var(--tui-text, #e0e0e0);
+  }
+</style>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Side the sidebar is attached to. Default: "left". */
+    side?: "left" | "right";
+    /** Width in px when expanded (GUI only). Default: 240. */
+    width?: number;
+    /** Width in character columns when expanded (TUI only). Default: 24. */
+    cols?: number;
+    /** Whether the sidebar is collapsed. */
+    collapsed?: boolean;
+    /** Called when the user toggles the sidebar. */
+    ontoggle?: (collapsed: boolean) => void;
+    /** Enable TUI mode. */
+    tui?: boolean;
+    /** Sidebar content. */
+    children: Snippet;
+    /** Main content area to the right/left of the sidebar. */
+    main?: Snippet;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "collapsed">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/layout/SplitPane.svelte

@@ -0,0 +1,64 @@
+<!--
+  SplitPane — Divides the terminal/window into named Pane regions.
+
+  GUI mode: CSS flexbox container (flex-direction: row|column).
+            Child Panes use flex-grow for proportional sizing.
+  TUI mode: Same flexbox layout, styled with TUI tokens.
+            Maps to ratatui Layout::default().direction(…).constraints([…]).split(area)
+
+  Example — horizontal split:
+    <SplitPane direction="horizontal">
+      <Pane title="Sidebar" flex={3}>…</Pane>
+      <Pane title="Main"    flex={7}>…</Pane>
+    </SplitPane>
+-->
+<script lang="ts">
+  import { provideTui, useTui } from "../useTui.js";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    /** Enable TUI mode: terminal-safe colors, no decorative CSS. */
+    tui?: boolean;
+    /** Split direction. Default: "horizontal". */
+    direction?: "horizontal" | "vertical";
+    class?: string;
+    children: Snippet;
+  }
+
+  let { tui = false, direction = "horizontal", class: className = "", children }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  // Propagate TUI mode to all child Panes
+  provideTui(() => isTui);
+
+  const flexDir = $derived(direction === "vertical" ? "column" : "row");
+</script>
+
+<div
+  class="split-pane {className}"
+  class:split-pane--tui={isTui}
+  style:flex-direction={flexDir}
+>
+  {@render children()}
+</div>
+
+<style>
+  .split-pane {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  /* ===== TUI mode ===== */
+  .split-pane--tui {
+    background: var(--tui-bg, #1a1a2e);
+    font-family: var(--font-mono, monospace);
+    color: var(--tui-text, #e0e0e0);
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Enable TUI mode: terminal-safe colors, no decorative CSS. */
+    tui?: boolean;
+    /** Split direction. Default: "horizontal". */
+    direction?: "horizontal" | "vertical";
+    class?: string;
+    children: Snippet;
+}
+declare const SplitPane: import("svelte").Component<Props, {}, "">;
+type SplitPane = ReturnType<typeof SplitPane>;
+export default SplitPane;

package/dist/layout/StatusBar.svelte

@@ -0,0 +1,83 @@
+<!--
+  StatusBar — Fixed single-row bar for displaying status, labels, and indicators.
+
+  Maps to ratatui::widgets::Paragraph (styled row) or a row of Spans in TUI mode.
+
+  GUI mode: sticky position:fixed bar (top or bottom), flex row, --surface-1 background.
+  TUI mode: full-width row, --tui-bg background, │ separators between items.
+-->
+<script lang="ts">
+  import { provideTui, useTui } from "../useTui.js";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    /** Enable TUI mode: flat surface, terminal-safe colors, box-drawing separators. */
+    tui?: boolean;
+    /** Sticky position for GUI mode. Default: "bottom" */
+    position?: "top" | "bottom";
+    class?: string;
+    children: Snippet;
+  }
+
+  let { tui = false, position = "bottom", class: className = "", children }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  provideTui(() => isTui);
+</script>
+
+<div
+  class="statusbar {className}"
+  class:tui={isTui}
+  class:gui={!isTui}
+  class:top={!isTui && position === "top"}
+  class:bottom={!isTui && position === "bottom"}
+  role="status"
+  aria-label="Status bar"
+>
+  {@render children()}
+</div>
+
+<style>
+  .statusbar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  /* ===== GUI mode ===== */
+  .gui {
+    position: fixed;
+    left: 0;
+    right: 0;
+    height: 28px;
+    background: var(--surface-1, #141414);
+    z-index: 100;
+    padding: 0 var(--space-2, 8px);
+    gap: var(--space-1, 4px);
+  }
+
+  .gui.top {
+    top: 0;
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+  }
+
+  .gui.bottom {
+    bottom: 0;
+    border-top: 1px solid var(--color-border, #2a2a2a);
+  }
+
+  /* ===== TUI mode ===== */
+  .tui {
+    background: var(--tui-bg, #1a1a2e);
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+    color: var(--tui-text, #e0e0e0);
+    line-height: 1.5;
+    align-items: stretch;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Enable TUI mode: flat surface, terminal-safe colors, box-drawing separators. */
+    tui?: boolean;
+    /** Sticky position for GUI mode. Default: "bottom" */
+    position?: "top" | "bottom";
+    class?: string;
+    children: Snippet;
+}
+declare const StatusBar: import("svelte").Component<Props, {}, "">;
+type StatusBar = ReturnType<typeof StatusBar>;
+export default StatusBar;