@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/chat/message/message-content.svelte

@@ -0,0 +1,132 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../../utilities/class-names.ts';
+import MarkdownPreview from './markdown-preview.svelte';
+let { content, expanded = true, threshold = 500, streaming = false, overrideContent, class: className, ...rest } = $props();
+/**
+ * Find a truncation boundary by scanning backward from the threshold
+ * for a paragraph break (\n\n). Falls back to the last single newline,
+ * then to the threshold itself. This newline-based heuristic helps reduce
+ * the chance of truncating in the middle of Markdown structures (like
+ * code fences, tables, or links), but does not guarantee well-formed HTML.
+ */
+function findSafeBoundary(text, limit) {
+    // Look for the last paragraph break before the limit
+    const paragraphBreak = text.lastIndexOf('\n\n', limit);
+    if (paragraphBreak > 0)
+        return paragraphBreak;
+    // Fall back to the last line break
+    const lineBreak = text.lastIndexOf('\n', limit);
+    if (lineBreak > 0)
+        return lineBreak;
+    // Last resort: use the limit directly
+    return limit;
+}
+function splitStreamingContent(text) {
+    const codeFenceCount = (text.match(/```/g) ?? []).length;
+    if (codeFenceCount % 2 !== 0) {
+        const lastFenceIndex = text.lastIndexOf('```');
+        return {
+            rendered: text.slice(0, lastFenceIndex),
+            tail: text.slice(lastFenceIndex),
+        };
+    }
+    const boundary = findSafeBoundary(text, text.length);
+    return {
+        rendered: text.slice(0, boundary),
+        tail: text.slice(boundary),
+    };
+}
+// The effective content: use override when streaming, otherwise the message content
+const effectiveContent = $derived(overrideContent ?? content);
+// Streaming mode: split content into rendered markdown and raw tail
+const streamingSplit = $derived.by(() => {
+    if (!streaming)
+        return null;
+    return splitStreamingContent(effectiveContent);
+});
+// Compute display content based on expanded state (non-streaming only)
+const displayContent = $derived.by(() => {
+    if (streaming) {
+        return streamingSplit?.rendered ?? '';
+    }
+    if (expanded || effectiveContent.length <= threshold) {
+        return effectiveContent;
+    }
+    const boundary = findSafeBoundary(effectiveContent, threshold);
+    return effectiveContent.slice(0, boundary);
+});
+// The raw tail text during streaming (displayed with pre-wrap + cursor)
+const streamingTail = $derived(streaming ? (streamingSplit?.tail ?? '') : '');
+// Whether truncation is active (used by parent to show ellipsis indicator)
+const isTruncated = $derived(!streaming && !expanded && effectiveContent.length > threshold);
+</script>
+
+<div
+  class={classNames('message-content', streaming && 'message-content-streaming', className)}
+  {...rest}
+>
+  {#if displayContent}
+    <MarkdownPreview content={displayContent} />
+  {/if}
+  {#if streaming && streamingTail}
+    <span class="message-content-tail">{streamingTail}</span>
+  {/if}
+  {#if streaming}
+    <span class="message-content-cursor" aria-hidden="true"></span>
+  {/if}
+  {#if isTruncated}
+    <span class="message-content-ellipsis" aria-hidden="true">...</span>
+  {/if}
+</div>
+
+<style>
+  .message-content {
+    /* Typography inherited from MarkdownPreview component */
+    display: block;
+  }
+
+  .message-content-ellipsis {
+    display: block;
+    margin-top: var(--cinder-space-1);
+    color: var(--cinder-text-muted);
+    font-size: var(--cinder-text-sm);
+  }
+
+  /* Streaming tail: raw text that hasn't been through markdown rendering yet */
+  .message-content-tail {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  /* Blinking cursor during streaming */
+  .message-content-cursor {
+    display: inline-block;
+    width: 2px;
+    height: 1.1em;
+    background: var(--cinder-text);
+    vertical-align: text-bottom;
+    margin-inline-start: 1px;
+    animation: cursor-blink 1s step-end infinite;
+  }
+
+  @keyframes cursor-blink {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .message-content-cursor {
+      animation: none;
+      opacity: 1;
+    }
+  }
+</style>

package/src/components/chat/message/parts/image-part.svelte

@@ -0,0 +1,11 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import MessageAttachments from '../message-attachments.svelte';
+let { parts } = $props();
+const images = $derived(parts.map((part) => part.image));
+</script>
+
+<MessageAttachments {images} />

package/src/components/chat/message/parts/markdown-part.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import MessageContent from '../message-content.svelte';
+let { part } = $props();
+</script>
+
+<!--
+  The body text of a message, rendered through the markdown pipeline. `content`
+  is already the effective text (streaming override resolved in by
+  `deriveMessageParts`), so this part forwards it straight to MessageContent —
+  no `overrideContent` plumbing leaks into the part layer. Streaming and
+  expanded are presentation hints carried on the part.
+-->
+<MessageContent content={part.content} streaming={part.streaming} expanded={part.expanded} />

package/src/components/chat/message/parts/reasoning-part.svelte

@@ -0,0 +1,274 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+let { part, expanded = false, ontoggle } = $props();
+const labelId = $derived(`reasoning-label-${part.key.replace(/[^a-z0-9-]/gi, '-')}`);
+const contentId = $derived(`reasoning-content-${part.key.replace(/[^a-z0-9-]/gi, '-')}`);
+// Approximate token count — 1 token ≈ 4 characters (rough heuristic for display).
+const approximateTokenCount = $derived(Math.round(part.content.length / 4));
+const tokenDisplay = $derived(approximateTokenCount > 0 ? ` (${approximateTokenCount.toLocaleString()} tokens)` : '');
+// The polite "Reasoning complete." announcement fires ONLY on a streaming
+// true→false transition — not on a reasoning block that was never streaming
+// (a static historical block must stay silent). We observe the transition edge
+// here: this effect's sole job is to record that a stream just ended, which is
+// observing an external lifecycle ("a stream finished"), not deriving state
+// from state. `announced` flips to true on the edge and back to false when a
+// new stream starts, so the live region fires once per streaming session.
+let wasStreaming = false;
+let announced = $state(false);
+$effect(() => {
+    const streaming = part.streaming;
+    if (streaming) {
+        announced = false;
+    }
+    else if (wasStreaming) {
+        announced = true;
+    }
+    wasStreaming = streaming;
+});
+const announcementText = $derived(announced ? 'Reasoning complete.' : '');
+function handleToggle() {
+    if (!part.streaming) {
+        ontoggle?.();
+    }
+}
+</script>
+
+<!--
+  Reasoning disclosure. Collapsed by default; the toggle button is disabled
+  while streaming to prevent mid-stream layout jank. The expanded region uses
+  aria-live="off" during streaming (token-by-token updates must not interrupt
+  the screen reader) — one polite "Reasoning complete." fires when streaming ends.
+  The grid-template-rows 0fr→1fr transition avoids max-height clamping artifacts.
+-->
+<div
+  class="chat-reasoning"
+  data-cinder-reasoning
+  data-cinder-streaming={part.streaming ? '' : undefined}
+  data-cinder-expanded={expanded ? '' : undefined}
+>
+  <button
+    type="button"
+    class="chat-reasoning-toggle"
+    id={labelId}
+    aria-expanded={expanded}
+    aria-controls={contentId}
+    disabled={part.streaming}
+    onclick={handleToggle}
+  >
+    <span class="chat-reasoning-label" aria-hidden="true">
+      {#if part.streaming}
+        <span class="chat-reasoning-dot" aria-hidden="true"></span>
+      {/if}
+      Reasoning{tokenDisplay}
+    </span>
+    <span class="sr-only">
+      {#if part.streaming}
+        Reasoning in progress
+      {:else if expanded}
+        Collapse reasoning
+      {:else}
+        Expand reasoning
+      {/if}
+    </span>
+    <span class="chat-reasoning-chevron" aria-hidden="true">
+      {expanded ? '▲' : '▼'}
+    </span>
+  </button>
+
+  <!-- The controlled region carries `id`/`aria-hidden` on the SAME element the
+       toggle's aria-controls points at, so the relationship is never to an
+       element buried inside an aria-hidden subtree. When collapsed it is hidden
+       from AT and removed from the tab order. -->
+  <div class="chat-reasoning-body">
+    <div
+      id={contentId}
+      class="chat-reasoning-content"
+      aria-hidden={!expanded}
+      aria-live={part.streaming ? 'off' : undefined}
+      aria-busy={part.streaming ? true : undefined}
+    >
+      {part.content}
+    </div>
+  </div>
+
+  <!-- Always-present polite live region. Fires "Reasoning complete." once when
+       streaming ends (part.streaming: true→false). Clearing on resume ensures it
+       fires again on subsequent streams. The element must be in the DOM before
+       content is set so screen readers have already registered it as a live region. -->
+  <div class="sr-only" aria-live="polite" aria-atomic="true">{announcementText}</div>
+</div>
+
+<style>
+  .chat-reasoning {
+    --cinder-chat-reasoning-bg: var(--cinder-surface-inset);
+    --cinder-chat-reasoning-border: var(--cinder-border);
+    --cinder-chat-reasoning-text: var(--cinder-text-muted);
+
+    display: flex;
+    flex-direction: column;
+    border-inline-start: 2px solid var(--cinder-chat-reasoning-border);
+    background: var(--cinder-chat-reasoning-bg);
+    border-radius: 0 var(--cinder-radius-md) var(--cinder-radius-md) 0;
+    overflow: hidden;
+  }
+
+  .chat-reasoning-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cinder-space-2);
+    padding-block: var(--cinder-space-2);
+    padding-inline: var(--cinder-space-3);
+    min-block-size: var(--cinder-touch-target-min, 44px);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    text-align: start;
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--cinder-chat-reasoning-text);
+    font-style: italic;
+    width: 100%;
+
+    &:disabled {
+      cursor: default;
+    }
+
+    @media (hover: hover) {
+      &:not(:disabled):hover {
+        color: var(--cinder-text);
+        background: color-mix(in oklch, var(--cinder-chat-reasoning-bg), transparent 20%);
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--cinder-ring-width) solid transparent;
+      outline-offset: -2px;
+      box-shadow: var(--_cinder-focus-ring-shadow);
+    }
+
+    @media (forced-colors: active) {
+      &:focus-visible {
+        outline: var(--cinder-ring-width) solid ButtonText;
+        outline-offset: 2px;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .chat-reasoning-label {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+    flex: 1;
+  }
+
+  .chat-reasoning-chevron {
+    flex-shrink: 0;
+    font-size: 0.625rem;
+    opacity: 0.6;
+  }
+
+  /* Pulsing dot during streaming — opacity-only, respects prefers-reduced-motion */
+  .chat-reasoning-dot {
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: var(--cinder-chat-reasoning-border);
+    animation: chat-reasoning-pulse 1.2s ease-in-out infinite;
+    flex-shrink: 0;
+  }
+
+  @keyframes chat-reasoning-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.25;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chat-reasoning-dot {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+
+  /* Expand/collapse via grid-template-rows (avoids max-height clamping) */
+  .chat-reasoning-body {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--cinder-duration) var(--cinder-ease-standard);
+  }
+
+  [data-cinder-expanded] .chat-reasoning-body {
+    grid-template-rows: 1fr;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chat-reasoning-body {
+      transition: none;
+    }
+  }
+
+  .chat-reasoning-content {
+    max-block-size: 16rem;
+    overflow-y: auto;
+    /* Hidden + non-focusable while collapsed. A scrollable region with
+       overflow-y:auto is keyboard-focusable in some browsers even at zero
+       height; visibility:hidden removes it from the tab order (and from AT),
+       complementing aria-hidden. The parent grid (0fr) clips it visually. */
+    visibility: hidden;
+    padding-block: var(--cinder-space-2);
+    padding-inline: var(--cinder-space-3);
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-chat-reasoning-text);
+    line-height: var(--cinder-leading-relaxed, 1.625);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  [data-cinder-expanded] .chat-reasoning-content {
+    visibility: visible;
+  }
+
+  /* Forced-colors: the decorative pulse dot and the accent rail use background/
+     border colors the system overrides, so pin them to a system color. The
+     box-shadow focus ring also disappears, so fall back to a system outline. */
+  @media (forced-colors: active) {
+    .chat-reasoning {
+      border-inline-start-color: ButtonText;
+    }
+
+    .chat-reasoning-dot {
+      background: ButtonText;
+      forced-color-adjust: none;
+    }
+
+    .chat-reasoning-toggle:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: -2px;
+    }
+  }
+
+  /* Screen reader only */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/src/components/chat/message/parts/step-part.svelte

@@ -0,0 +1,127 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+let { part } = $props();
+// Map status to icon shape — shape carries meaning independently of color.
+// Aria-hidden icons; status is also communicated as visually-hidden text.
+const statusIcon = {
+    pending: '○',
+    running: '◉',
+    done: '●',
+    error: '✕',
+};
+const statusLabel = {
+    pending: 'pending',
+    running: 'in progress',
+    done: 'complete',
+    error: 'failed',
+};
+</script>
+
+<!--
+  A single step in an ordered stepper. `aria-current="step"` marks the active
+  (running) step. Status is communicated via an aria-hidden icon whose SHAPE
+  (not just color) carries meaning, plus a visually-hidden status suffix.
+-->
+<li
+  class="chat-step"
+  data-cinder-step-status={part.status}
+  aria-current={part.status === 'running' ? 'step' : undefined}
+>
+  <span class="chat-step-indicator" aria-hidden="true">
+    {statusIcon[part.status]}
+  </span>
+  <span class="chat-step-body">
+    <span class="chat-step-title">
+      {part.title}
+      <span class="sr-only"> — {statusLabel[part.status]}</span>
+    </span>
+    {#if part.content}
+      <span class="chat-step-content">{part.content}</span>
+    {/if}
+  </span>
+</li>
+
+<style>
+  .chat-step {
+    --cinder-chat-step-indicator-color: var(--cinder-text-muted);
+    --cinder-chat-step-indicator-color-running: var(--cinder-color-info-fg, var(--cinder-text));
+    --cinder-chat-step-indicator-color-done: var(
+      --cinder-color-success-fg,
+      var(--cinder-text-muted)
+    );
+    --cinder-chat-step-indicator-color-error: var(
+      --cinder-color-danger-fg,
+      var(--cinder-text-muted)
+    );
+
+    display: flex;
+    align-items: flex-start;
+    gap: var(--cinder-space-2);
+    padding-block: var(--cinder-space-1);
+    list-style: none;
+  }
+
+  .chat-step-indicator {
+    flex-shrink: 0;
+    font-size: var(--cinder-text-sm);
+    line-height: 1.5;
+    color: var(--cinder-chat-step-indicator-color);
+  }
+
+  [data-cinder-step-status='running'] .chat-step-indicator {
+    color: var(--cinder-chat-step-indicator-color-running);
+  }
+
+  [data-cinder-step-status='done'] .chat-step-indicator {
+    color: var(--cinder-chat-step-indicator-color-done);
+  }
+
+  [data-cinder-step-status='error'] .chat-step-indicator {
+    color: var(--cinder-chat-step-indicator-color-error);
+  }
+
+  .chat-step-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .chat-step-title {
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+    line-height: 1.5;
+  }
+
+  [data-cinder-step-status='done'] .chat-step-title {
+    color: var(--cinder-text-muted);
+  }
+
+  [data-cinder-step-status='error'] .chat-step-title {
+    color: var(--cinder-color-danger-fg, var(--cinder-text));
+  }
+
+  .chat-step-content {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    line-height: var(--cinder-leading-normal, 1.5);
+  }
+
+  /* Screen reader only */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/src/components/chat/message/parts/suggestion-part.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+let { part, onsuggestionselect, tabindex = 0 } = $props();
+function handleClick() {
+    onsuggestionselect?.(part.label);
+}
+</script>
+
+<!--
+  A single suggested-reply chip. Rendered as a <button type="button"> so it
+  activates on both Enter and Space (native button behaviour). The chip is
+  part of a `role="toolbar"` container rendered by the parent — individual
+  chips do not carry their own toolbar role. The `tabindex` prop enables APG
+  toolbar roving-tabindex: the parent sets 0 on the active chip and -1 on the
+  rest so Tab enters at the active chip, arrow keys move within the toolbar.
+-->
+<button
+  type="button"
+  class="chat-suggestion-chip"
+  data-cinder-suggestion
+  {tabindex}
+  onclick={handleClick}
+>
+  {part.label}
+</button>
+
+<style>
+  .chat-suggestion-chip {
+    --cinder-chat-suggestion-bg: var(--cinder-surface-raised);
+    --cinder-chat-suggestion-border: var(--cinder-border);
+    --cinder-chat-suggestion-text: var(--cinder-text);
+    --cinder-chat-suggestion-bg-hover: var(--cinder-surface-hover);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--cinder-touch-target-min, 2.75rem);
+    /* WCAG 2.5.5 applies to both axes — a single-character suggestion would
+       otherwise produce a chip narrower than the 44px target. */
+    min-inline-size: var(--cinder-touch-target-min, 2.75rem);
+    padding-block: var(--cinder-space-2);
+    padding-inline: var(--cinder-space-4);
+    background: var(--cinder-chat-suggestion-bg);
+    border: 1px solid var(--cinder-chat-suggestion-border);
+    border-radius: var(--cinder-radius-full, 9999px);
+    color: var(--cinder-chat-suggestion-text);
+    font-size: var(--cinder-text-sm);
+    line-height: 1.25;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-inline-size: 24rem;
+    transition: background-color var(--cinder-duration-fast) var(--cinder-ease-standard);
+
+    /* Focus-visible ring — not just :focus so mouse users don't see the ring. */
+    &:focus-visible {
+      outline: var(--cinder-ring-width) solid transparent;
+      outline-offset: 2px;
+      box-shadow: var(--_cinder-focus-ring-shadow);
+    }
+
+    /* box-shadow is forced to none in forced-colors mode, so the focus ring
+       would vanish — fall back to a system-color outline. */
+    @media (forced-colors: active) {
+      &:focus-visible {
+        outline: var(--cinder-ring-width) solid ButtonText;
+        outline-offset: 2px;
+      }
+    }
+
+    /* Hover only on pointer devices to avoid sticky hover on touch. */
+    @media (hover: hover) {
+      &:hover {
+        background: var(--cinder-chat-suggestion-bg-hover);
+        border-color: var(--cinder-accent, var(--cinder-chat-suggestion-border));
+      }
+    }
+  }
+</style>