@plures/design-dojo 0.5.3 → 0.7.1

package/dist/primitives/Input.svelte

@@ -0,0 +1,468 @@
+<!--
+  Input — Text input widget.
+
+  Features:
+  - GUI mode: styled input with floating label spring animation, focus ring
+  - TUI mode: box-drawing borders, terminal-safe colors, blinking block cursor
+  - Value binding ($bindable), placeholder, floating label
+  - Disabled, password masking, maxLength
+  - Events: onchange, onsubmit (Enter key), onkeydown
+  - Reduced motion support
+-->
+<script lang="ts">
+  import { createSpring } from "../motion/spring.js";
+  import { useTui } from "../useTui.js";
+
+  interface Props {
+    tui?: boolean;
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    focused?: boolean;
+    disabled?: boolean;
+    /** Mask input characters */
+    password?: boolean;
+    maxLength?: number;
+    class?: string;
+    /** TUI mode: total character width including border columns. Default: 32 */
+    cols?: number;
+    onchange?: (value: string) => void;
+    /** Fired when Enter is pressed */
+    onsubmit?: (value: string) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+  }
+
+  let {
+    tui = false,
+    value = $bindable(""),
+    placeholder = "",
+    label = "",
+    focused: externalFocused = false,
+    disabled = false,
+    password = false,
+    maxLength = undefined,
+    class: className = "",
+    cols = 32,
+    onchange,
+    onsubmit,
+    onkeydown,
+  }: Props = $props();
+
+  const getTuiCtx = useTui();
+  const isTui = $derived(tui || getTuiCtx());
+
+  // Unique id to associate <label for="..."> with the <input id="...">
+  function createInputId() {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+      return `input-${crypto.randomUUID()}`;
+    }
+
+    if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+      const array = new Uint32Array(1);
+      crypto.getRandomValues(array);
+      return `input-${array[0].toString(36)}`;
+    }
+
+    // Fallback: timestamp-based ID if crypto is unavailable
+    return `input-${Date.now().toString(36)}`;
+  }
+
+  const inputId = createInputId();
+  let inputEl: HTMLInputElement | undefined = $state();
+  // Internal DOM focus state; externalFocused is handled via isVisuallyFocused
+  let isFocused = $state(false);
+  // TUI cursor position (character index in the actual value string)
+  let cursorPos = $state(0);
+
+  // Spring values for GUI mode animations
+  let labelFloat = $state(0);
+  let focusRing = $state(0);
+
+  const prefersReducedMotion =
+    typeof window !== "undefined"
+      ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      : false;
+
+  let labelSpring: ReturnType<typeof createSpring>;
+  let focusSpring: ReturnType<typeof createSpring>;
+
+  $effect(() => {
+    if (prefersReducedMotion || isTui) return;
+    labelSpring = createSpring(0, "gentle", (v) => (labelFloat = v));
+    focusSpring = createSpring(0, "gentle", (v) => (focusRing = v));
+    return () => {
+      labelSpring?.stop();
+      focusSpring?.stop();
+    };
+  });
+
+  // Label floats when focused or when there is content
+  const isActive = $derived(isFocused || externalFocused || !!(value));
+
+  $effect(() => {
+    const target = isActive ? 1 : 0;
+    if (prefersReducedMotion || isTui) {
+      labelFloat = target;
+    } else {
+      labelSpring?.set(target);
+    }
+  });
+
+  // Programmatically focus the native input when externalFocused is set
+  $effect(() => {
+    if (externalFocused && inputEl && !disabled) {
+      inputEl.focus();
+    }
+  });
+
+  // ── TUI helpers ──────────────────────────────────────────────────────────────
+
+  const isVisuallyFocused = $derived(isFocused || externalFocused);
+
+  // Ensure we always have room for a minimum viable box (1 char + 2 borders)
+  const safeCols = $derived(Math.max(3, cols));
+  // Inner content width (minus 2 side border chars)
+  const innerWidth = $derived(safeCols - 2);
+
+  // Password masking
+  const displayValue = $derived(
+    password ? "●".repeat((value ?? "").length) : (value ?? ""),
+  );
+
+  // Top border: ┌─ Label ──...──┐  or  ┌──...──┐
+  // Truncate label if it would overflow the border line
+  const tuiTopBorder = $derived(
+    label
+      ? (() => {
+          // "─ " + label + " " must fit inside innerWidth; ┌┐ corners are separate
+          const maxLabelLen = Math.max(0, innerWidth - 4);
+          const safeLabel = label.length > maxLabelLen ? label.substring(0, maxLabelLen) : label;
+          const section = `─ ${safeLabel} `;
+          const fill = Math.max(0, innerWidth - section.length);
+          return `┌${section}${"─".repeat(fill)}┐`;
+        })()
+      : `┌${"─".repeat(innerWidth)}┐`,
+  );
+
+  /**
+   * Compute what to render in the content row.
+   *
+   * When focused:   [before-cursor][█][after-cursor][padding]  = innerWidth chars
+   * When unfocused: [text or placeholder]                        = innerWidth chars
+   *
+   * For long text, a scroll window is used so the cursor stays visible.
+   */
+  const tuiContent = $derived.by(() => {
+    const text = displayValue;
+    const len = text.length;
+    const cp = Math.min(Math.max(0, cursorPos), len);
+
+    if (!isVisuallyFocused) {
+      if (!text) {
+        return {
+          kind: "placeholder" as const,
+          text: (placeholder || "").substring(0, innerWidth).padEnd(innerWidth, " "),
+        };
+      }
+      return {
+        kind: "text" as const,
+        text: text.substring(0, innerWidth).padEnd(innerWidth, " "),
+      };
+    }
+
+    // Focused: reserve 1 char for the cursor block █
+    const textSlots = innerWidth - 1;
+
+    // Compute scroll window so cursor is always visible
+    let windowStart: number;
+    if (len <= textSlots) {
+      windowStart = 0;
+    } else {
+      windowStart = Math.min(cp, len - textSlots);
+      windowStart = Math.max(0, windowStart);
+      if (cp < windowStart) windowStart = cp;
+    }
+
+    const before = text.substring(windowStart, cp);
+    const after = text.substring(cp, windowStart + textSlots);
+    const pad = " ".repeat(Math.max(0, textSlots - before.length - after.length));
+
+    return { kind: "cursor" as const, before, after, pad };
+  });
+
+  // Sync cursor position from the native input element.
+  // queueMicrotask lets the browser update selectionStart before we read it.
+  function syncCursor() {
+    const el = inputEl;
+    if (!el) return;
+    if (typeof queueMicrotask !== "undefined") {
+      queueMicrotask(() => {
+        cursorPos = el.selectionStart ?? (value ?? "").length;
+      });
+    } else {
+      cursorPos = el.selectionStart ?? (value ?? "").length;
+    }
+  }
+
+  // Bottom border: └──...──┘
+  const tuiBottomBorder = $derived(`└${"─".repeat(innerWidth)}┘`);
+
+  // ── Event handlers ───────────────────────────────────────────────────────────
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    value = target.value;
+    onchange?.(value);
+    syncCursor();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    onkeydown?.(e);
+    if (e.key === "Enter") {
+      onsubmit?.(value ?? "");
+    }
+    // Sync cursor after arrow keys, Home, End, Delete, Backspace, etc.
+    syncCursor();
+  }
+
+  function handleFocus() {
+    isFocused = true;
+    syncCursor();
+    if (prefersReducedMotion || isTui) {
+      focusRing = 1;
+    } else {
+      focusSpring?.set(1);
+    }
+  }
+
+  function handleBlur() {
+    isFocused = false;
+    if (prefersReducedMotion || isTui) {
+      focusRing = 0;
+    } else {
+      focusSpring?.set(0);
+    }
+  }
+</script>
+
+{#if isTui}
+  <!-- TUI mode: box-drawing characters, hidden real <input> for event capture -->
+  <!-- Wrapping in <label> means clicking the visual box focuses the hidden input -->
+  <label
+    class="tui-input {className}"
+    class:focused={isVisuallyFocused}
+    class:disabled
+  >
+    <div class="tui-top" class:focused={isVisuallyFocused}>{tuiTopBorder}</div>
+    <div class="tui-row">
+      <span class="tui-side" class:focused={isVisuallyFocused}>│</span>
+      <span class="tui-content" class:placeholder={tuiContent.kind === "placeholder"}>
+        {#if tuiContent.kind === "placeholder"}
+          {tuiContent.text}
+        {:else if tuiContent.kind === "text"}
+          {tuiContent.text}
+        {:else}
+          {tuiContent.before}<span class="tui-cursor">█</span>{tuiContent.after}{tuiContent.pad}
+        {/if}
+      </span>
+      <span class="tui-side" class:focused={isVisuallyFocused}>│</span>
+    </div>
+    <div class="tui-bottom" class:focused={isVisuallyFocused}>{tuiBottomBorder}</div>
+
+    <!-- Hidden real input: captures keyboard events and value -->
+    <input
+      bind:this={inputEl}
+      class="tui-hidden"
+      type={password ? "password" : "text"}
+      {value}
+      {disabled}
+      maxlength={maxLength}
+      aria-label={label || placeholder || undefined}
+      oninput={handleInput}
+      onkeydown={handleKeydown}
+      onfocus={handleFocus}
+      onblur={handleBlur}
+      onclick={syncCursor}
+      onselect={syncCursor}
+    />
+  </label>
+{:else}
+  <!-- GUI mode: floating label with spring animation + focus ring -->
+  <div
+    class="input-wrapper {className}"
+    class:focused={isVisuallyFocused}
+    class:filled={!!(value)}
+    class:disabled
+  >
+    <input
+      bind:this={inputEl}
+      id={inputId}
+      class="input-field"
+      type={password ? "password" : "text"}
+      {value}
+      placeholder={label ? "" : placeholder}
+      {disabled}
+      maxlength={maxLength}
+      style:--focus-ring={focusRing}
+      oninput={handleInput}
+      onkeydown={handleKeydown}
+      onfocus={handleFocus}
+      onblur={handleBlur}
+    />
+    {#if label}
+      <label
+        class="input-label"
+        class:active={isActive}
+        for={inputId}
+        style:transform="translateY(calc(-50% - {(labelFloat * 14).toFixed(2)}px)) scale({(1 - labelFloat * 0.2).toFixed(3)})"
+      >{label}</label>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  /* ===== GUI mode ===== */
+  .input-wrapper {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .input-field {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-4, 16px) var(--space-3, 12px) var(--space-2, 8px);
+    background: var(--surface-2, #1e1e1e);
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    color: var(--color-text, #e8e8e8);
+    font-family: inherit;
+    font-size: var(--text-base, 16px);
+    line-height: var(--leading-normal, 1.5);
+    outline: none;
+    transition: border-color 0.15s ease;
+    box-shadow: 0 0 0 calc(3px * var(--focus-ring, 0))
+      color-mix(in srgb, var(--color-accent, #6366f1) 40%, transparent);
+  }
+
+  .focused .input-field,
+  .input-field:focus {
+    border-color: var(--color-accent, #6366f1);
+  }
+
+  .input-label {
+    position: absolute;
+    left: var(--space-3, 12px);
+    top: 50%;
+    font-size: var(--text-base, 16px);
+    color: var(--color-text-muted, #888888);
+    cursor: text;
+    transform-origin: left center;
+    /* transform is driven by spring via inline style */
+    transition: color 0.15s ease;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .input-label.active {
+    color: var(--color-accent, #6366f1);
+  }
+
+  .disabled .input-field {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .disabled .input-label {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  /* ===== TUI mode ===== */
+  .tui-input {
+    position: relative;
+    display: inline-block;
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 14px);
+    line-height: 1.4;
+    color: var(--tui-text, #e0e0e0);
+    background: var(--tui-surface, #16213e);
+    cursor: text;
+  }
+
+  .tui-input.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .tui-top,
+  .tui-bottom {
+    color: var(--tui-border, #0f3460);
+    white-space: pre;
+    user-select: none;
+  }
+
+  .tui-top.focused,
+  .tui-bottom.focused {
+    color: var(--tui-accent, #00d4ff);
+  }
+
+  .tui-row {
+    display: flex;
+    white-space: pre;
+  }
+
+  .tui-side {
+    color: var(--tui-border, #0f3460);
+    user-select: none;
+  }
+
+  .tui-side.focused {
+    color: var(--tui-accent, #00d4ff);
+  }
+
+  .tui-content {
+    flex: 1;
+    color: var(--tui-text, #e0e0e0);
+    white-space: pre;
+    overflow: hidden;
+  }
+
+  .tui-content.placeholder {
+    color: var(--tui-text-dim, #888888);
+  }
+
+  .tui-cursor {
+    color: var(--tui-accent, #00d4ff);
+    animation: cursor-blink 1s step-end infinite;
+  }
+
+  @keyframes cursor-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tui-cursor {
+      animation: none;
+    }
+  }
+
+  /* Visually hidden but accessible to keyboard and screen readers */
+  .tui-hidden {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    pointer-events: none;
+  }
+</style>

package/dist/primitives/Input.svelte.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    tui?: boolean;
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    focused?: boolean;
+    disabled?: boolean;
+    /** Mask input characters */
+    password?: boolean;
+    maxLength?: number;
+    class?: string;
+    /** TUI mode: total character width including border columns. Default: 32 */
+    cols?: number;
+    onchange?: (value: string) => void;
+    /** Fired when Enter is pressed */
+    onsubmit?: (value: string) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;