@plures/design-dojo 0.5.2 → 0.7.1

package/dist/app/CanvasBreadcrumb.svelte

@@ -0,0 +1,146 @@
+<!--
+  CanvasBreadcrumb — Path / depth indicator for nested canvas navigation.
+
+  Shows the current canvas path as clickable breadcrumb segments.
+  Clicking a segment navigates back to that depth.
+
+  Features:
+  - Root segment always shown (first entry)
+  - Separator chevrons between segments
+  - Click / Enter / Space to navigate to a segment
+  - Keyboard accessible: role="navigation" with role="list"
+  - Current (last) segment is non-interactive and aria-current="page"
+-->
+<script lang="ts">
+  import type { CanvasPathSegment } from "./CanvasBreadcrumb.types.js";
+
+  interface Props {
+    /**
+     * Full navigation path from root to current canvas.
+     * The last entry is the currently visible canvas.
+     * The first entry is the root canvas.
+     */
+    path: CanvasPathSegment[];
+    /**
+     * Fired when the user clicks on a segment (by index).
+     * Index 0 = root. The last index is the current canvas and is non-clickable.
+     */
+    onnavigate?: (index: number) => void;
+    /** Custom CSS class. */
+    class?: string;
+  }
+
+  let { path, onnavigate, class: className = "" }: Props = $props();
+
+  function navigate(index: number) {
+    // Don't navigate to the current (last) segment
+    if (index >= path.length - 1) return;
+    onnavigate?.(index);
+  }
+
+  function handleKeydown(e: KeyboardEvent, index: number) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      navigate(index);
+    }
+  }
+</script>
+
+<nav
+  class="canvas-breadcrumb {className}"
+  aria-label="Canvas navigation path"
+>
+  <ol class="canvas-breadcrumb__list" role="list">
+    {#each path as segment, i}
+      {@const isCurrent = i === path.length - 1}
+      {@const isClickable = !isCurrent}
+      {#if i > 0}
+        <li class="canvas-breadcrumb__sep" aria-hidden="true">›</li>
+      {/if}
+      <li class="canvas-breadcrumb__item">
+        {#if isClickable}
+          <span
+            class="canvas-breadcrumb__seg canvas-breadcrumb__seg--link"
+            role="button"
+            tabindex="0"
+            onclick={() => navigate(i)}
+            onkeydown={(e) => handleKeydown(e, i)}
+            aria-label="Navigate to {segment.label}"
+          >{segment.label}</span>
+        {:else}
+          <span
+            class="canvas-breadcrumb__seg canvas-breadcrumb__seg--current"
+            aria-current="page"
+          >{segment.label}</span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .canvas-breadcrumb {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-3, 12px);
+    height: 32px;
+    background: var(--surface-2, #1e1e1e);
+    border-bottom: 1px solid var(--color-border, #2a2a2a);
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .canvas-breadcrumb__list {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .canvas-breadcrumb__item {
+    display: flex;
+    align-items: center;
+  }
+
+  .canvas-breadcrumb__sep {
+    color: var(--color-text-subtle, #555);
+    font-size: 14px;
+    padding: 0 2px;
+    user-select: none;
+    line-height: 1;
+  }
+
+  .canvas-breadcrumb__seg {
+    padding: 2px 6px;
+    border-radius: var(--radius-sm, 6px);
+    line-height: 1.4;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .canvas-breadcrumb__seg--link {
+    color: var(--color-text-muted, #888);
+    cursor: pointer;
+    outline: none;
+    transition: color 0.1s, background 0.1s;
+  }
+
+  .canvas-breadcrumb__seg--link:hover,
+  .canvas-breadcrumb__seg--link:focus-visible {
+    color: var(--color-text, #e8e8e8);
+    background: var(--alpha-10, rgba(255, 255, 255, 0.1));
+  }
+
+  .canvas-breadcrumb__seg--current {
+    color: var(--color-text, #e8e8e8);
+    font-weight: 600;
+  }
+</style>

package/dist/app/CanvasBreadcrumb.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { CanvasPathSegment } from "./CanvasBreadcrumb.types.js";
+interface Props {
+    /**
+     * Full navigation path from root to current canvas.
+     * The last entry is the currently visible canvas.
+     * The first entry is the root canvas.
+     */
+    path: CanvasPathSegment[];
+    /**
+     * Fired when the user clicks on a segment (by index).
+     * Index 0 = root. The last index is the current canvas and is non-clickable.
+     */
+    onnavigate?: (index: number) => void;
+    /** Custom CSS class. */
+    class?: string;
+}
+declare const CanvasBreadcrumb: import("svelte").Component<Props, {}, "">;
+type CanvasBreadcrumb = ReturnType<typeof CanvasBreadcrumb>;
+export default CanvasBreadcrumb;

package/dist/app/CanvasBreadcrumb.types.js

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

package/dist/app/ChatInput.svelte

@@ -0,0 +1,296 @@
+<!--
+  ChatInput — Multiline chat input with send button and optional file attachment.
+
+  Features:
+  - Auto-growing textarea (up to maxRows)
+  - Send on Enter (Shift+Enter inserts newline)
+  - File attachment button triggers hidden <input type="file">
+  - Shows attached filename; clears on send
+  - Disabled state
+  - onsend(value, attachment?) callback
+-->
+<script lang="ts">
+  interface Props {
+    /** Current text value (two-way bindable). */
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Maximum visible rows before scrolling. Default: 5 */
+    maxRows?: number;
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired when the user sends the message. */
+    onsend?: (value: string, attachment?: File) => void;
+  }
+
+  let {
+    value = $bindable(""),
+    placeholder = "Type a message…",
+    disabled = false,
+    maxRows = 5,
+    class: className = "",
+    onsend,
+  }: Props = $props();
+
+  let textareaEl: HTMLTextAreaElement | undefined = $state();
+  let fileInputEl: HTMLInputElement | undefined = $state();
+  let attachment: File | undefined = $state();
+
+  // Auto-grow logic
+  function resize() {
+    const el = textareaEl;
+    if (!el) return;
+    el.style.height = "auto";
+    const lineH = parseInt(getComputedStyle(el).lineHeight || "20", 10);
+    const max = lineH * maxRows + parseInt(getComputedStyle(el).paddingTop || "0", 10) * 2;
+    el.style.height = Math.min(el.scrollHeight, max) + "px";
+  }
+
+  function handleInput(e: Event) {
+    value = (e.target as HTMLTextAreaElement).value;
+    resize();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  }
+
+  function send() {
+    const trimmed = (value ?? "").trim();
+    if (!trimmed && !attachment) return;
+    onsend?.(trimmed, attachment);
+    value = "";
+    attachment = undefined;
+    if (textareaEl) {
+      textareaEl.style.height = "auto";
+    }
+  }
+
+  function openFilePicker() {
+    fileInputEl?.click();
+  }
+
+  function handleFileChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    attachment = input.files?.[0];
+    // Reset so the same file can be re-selected if removed
+    input.value = "";
+  }
+
+  function removeAttachment() {
+    attachment = undefined;
+  }
+</script>
+
+<div class="chat-input {className}" class:chat-input--disabled={disabled}>
+  {#if attachment}
+    <div class="chat-input__attachment">
+      <span class="chat-input__attachment-name">📎 {attachment.name}</span>
+      <button
+        class="chat-input__attachment-remove"
+        onclick={removeAttachment}
+        aria-label="Remove attachment"
+        type="button"
+      >✕</button>
+    </div>
+  {/if}
+
+  <div class="chat-input__row">
+    <button
+      class="chat-input__attach-btn"
+      onclick={openFilePicker}
+      {disabled}
+      type="button"
+      aria-label="Attach file"
+      title="Attach file"
+    >📎</button>
+
+    <textarea
+      bind:this={textareaEl}
+      class="chat-input__textarea"
+      {placeholder}
+      {disabled}
+      rows="1"
+      value={value}
+      oninput={handleInput}
+      onkeydown={handleKeydown}
+      aria-label="Message input"
+      aria-multiline="true"
+    ></textarea>
+
+    <button
+      class="chat-input__send-btn"
+      onclick={send}
+      disabled={disabled || (!(value ?? "").trim() && !attachment)}
+      type="button"
+      aria-label="Send message"
+    >
+      <svg class="chat-input__send-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+        <path d="M3 10L17 3L10 17L9 11L3 10Z" fill="currentColor" stroke="currentColor" stroke-width="0.5" stroke-linejoin="round"/>
+      </svg>
+    </button>
+  </div>
+
+  <!-- Hidden file input -->
+  <input
+    bind:this={fileInputEl}
+    class="chat-input__file-hidden"
+    type="file"
+    onchange={handleFileChange}
+    aria-hidden="true"
+    tabindex="-1"
+  />
+</div>
+
+<style>
+  .chat-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2, 8px);
+    padding: var(--space-3, 12px);
+    background: var(--surface-1, #141414);
+    border-top: 1px solid var(--color-border, #2a2a2a);
+  }
+
+  /* ── Attachment pill ── */
+  .chat-input__attachment {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    background: color-mix(in srgb, var(--color-accent, #6366f1) 12%, var(--surface-2, #1e1e1e));
+    border: 1px solid color-mix(in srgb, var(--color-accent, #6366f1) 30%, transparent);
+    border-radius: var(--radius-full, 9999px);
+    padding: 4px var(--space-3, 12px);
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  .chat-input__attachment-name {
+    font-size: var(--text-xs, 12px);
+    color: var(--color-text, #e8e8e8);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 260px;
+  }
+
+  .chat-input__attachment-remove {
+    background: none;
+    border: none;
+    color: var(--color-text-muted, #888);
+    cursor: pointer;
+    font-size: var(--text-xs, 12px);
+    padding: 0;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  .chat-input__attachment-remove:hover { color: var(--color-danger, #ef4444); }
+
+  /* ── Input row ── */
+  .chat-input__row {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-2, 8px);
+    background: var(--surface-2, #1e1e1e);
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-lg, 16px);
+    padding: var(--space-2, 8px) var(--space-2, 8px) var(--space-2, 8px) var(--space-1, 4px);
+    transition: border-color 0.15s ease;
+  }
+
+  .chat-input__row:focus-within {
+    border-color: var(--color-accent, #6366f1);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #6366f1) 15%, transparent);
+  }
+
+  /* ── Textarea ── */
+  .chat-input__textarea {
+    flex: 1;
+    min-width: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+    color: var(--color-text, #e8e8e8);
+    font-family: inherit;
+    font-size: var(--text-base, 16px);
+    line-height: 1.5;
+    padding: 4px var(--space-2, 8px);
+    overflow-y: auto;
+    max-height: 160px;
+  }
+
+  .chat-input__textarea::placeholder {
+    color: var(--color-text-muted, #888);
+  }
+
+  /* ── Attach button ── */
+  .chat-input__attach-btn {
+    background: none;
+    border: none;
+    color: var(--color-text-muted, #888);
+    cursor: pointer;
+    font-size: 18px;
+    padding: 4px;
+    border-radius: var(--radius-sm, 6px);
+    line-height: 1;
+    transition: color 0.1s, background 0.1s;
+    flex-shrink: 0;
+  }
+
+  .chat-input__attach-btn:hover:not(:disabled) {
+    color: var(--color-accent, #6366f1);
+    background: color-mix(in srgb, var(--color-accent, #6366f1) 10%, transparent);
+  }
+
+  /* ── Send button ── */
+  .chat-input__send-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: var(--color-accent, #6366f1);
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: background 0.15s, opacity 0.15s;
+  }
+
+  .chat-input__send-btn:hover:not(:disabled) {
+    background: var(--color-accent-hover, #818cf8);
+  }
+
+  .chat-input__send-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  .chat-input__send-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  /* ── Disabled state ── */
+  .chat-input--disabled .chat-input__row {
+    opacity: 0.45;
+    pointer-events: none;
+  }
+
+  /* ── Hidden file input ── */
+  .chat-input__file-hidden {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    pointer-events: none;
+  }
+</style>

package/dist/app/ChatInput.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    /** Current text value (two-way bindable). */
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Maximum visible rows before scrolling. Default: 5 */
+    maxRows?: number;
+    /** Custom CSS class. */
+    class?: string;
+    /** Fired when the user sends the message. */
+    onsend?: (value: string, attachment?: File) => void;
+}
+declare const ChatInput: import("svelte").Component<Props, {}, "value">;
+type ChatInput = ReturnType<typeof ChatInput>;
+export default ChatInput;