@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/chat/input/index.ts

@@ -1,4 +0,0 @@
-export { deriveAttachmentKind, type AttachmentKind } from './attachment-kind.js';
-export { default as ChatAttachmentPreview } from './chat-attachment-preview.svelte';
-export type { ChatAttachment } from './chat-attachment.ts';
-export { default as ChatInput } from './chat-input.svelte';

package/src/components/chat/message/chat-date-separator.svelte

@@ -1,106 +0,0 @@
-<script lang="ts" module>
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  export type ChatDateSeparatorProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-    /** The date to display */
-    date: Date | string;
-    /** Custom date formatter for testing/localization */
-    dateFormatter?: (date: Date) => string;
-    /** Additional CSS class */
-    class?: string;
-  };
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../../utilities/class-names.ts';
-
-  let { date, dateFormatter, class: className, ...rest }: ChatDateSeparatorProps = $props();
-
-  // Normalize date to Date object
-  const dateObj = $derived(typeof date === 'string' ? new Date(date) : date);
-
-  // Check if the date is valid
-  const isValidDate = $derived(!isNaN(dateObj.getTime()));
-
-  // Format the date for display
-  const formattedDate = $derived.by(() => {
-    if (!isValidDate) {
-      return 'Invalid date';
-    }
-
-    if (dateFormatter) {
-      return dateFormatter(dateObj);
-    }
-
-    const now = new Date();
-    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    // Use date arithmetic instead of ms subtraction to handle DST transitions correctly
-    const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
-    const dateOnly = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate());
-
-    if (dateOnly.getTime() === today.getTime()) {
-      return 'Today';
-    }
-
-    if (dateOnly.getTime() === yesterday.getTime()) {
-      return 'Yesterday';
-    }
-
-    // Use Intl for other dates
-    return new Intl.DateTimeFormat(undefined, {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-    }).format(dateObj);
-  });
-
-  // ISO date for machine readability (fallback to empty string for invalid dates)
-  const isoDate = $derived(isValidDate ? dateObj.toISOString().split('T')[0] : '');
-</script>
-
-<div
-  class={classNames('chat-date-separator', className)}
-  role="separator"
-  aria-label={`Messages from ${formattedDate}`}
-  {...rest}
->
-  <span class="chat-date-separator-line" aria-hidden="true"></span>
-  {#if isValidDate}
-    <time class="chat-date-separator-text" datetime={isoDate}>
-      {formattedDate}
-    </time>
-  {:else}
-    <span class="chat-date-separator-text">
-      {formattedDate}
-    </span>
-  {/if}
-  <span class="chat-date-separator-line" aria-hidden="true"></span>
-</div>
-
-<style>
-  .chat-date-separator {
-    display: flex;
-    align-items: center;
-    gap: var(--cinder-space-3);
-    padding: var(--cinder-space-4) 0;
-
-    /* Performance: Skip rendering for off-screen separators in long conversations */
-    content-visibility: auto;
-    contain-intrinsic-size: auto 48px;
-  }
-
-  .chat-date-separator-line {
-    flex: 1;
-    height: 1px;
-    background: var(--cinder-border-muted);
-  }
-
-  .chat-date-separator-text {
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-    color: var(--cinder-text-subtle);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    white-space: nowrap;
-  }
-</style>

package/src/components/chat/message/chat-message-parts-renderer.svelte

@@ -1,153 +0,0 @@
-<script lang="ts">
-  import {
-    toRenderUnits,
-    type BodyMessagePart,
-    type ChatMessagePartsRendererProps,
-  } from './chat-message-parts.ts';
-  import MarkdownPart from './parts/markdown-part.svelte';
-  import ToolCallPart from './parts/tool-call-part.svelte';
-  import ToolResultPart from './parts/tool-result-part.svelte';
-  import ToolApprovalPart from './parts/tool-approval-part.svelte';
-  import ReasoningPart from './parts/reasoning-part.svelte';
-  import StepPart from './parts/step-part.svelte';
-  import SuggestionPart from './parts/suggestion-part.svelte';
-  import ImagePart from './parts/image-part.svelte';
-
-  let {
-    parts,
-    messagePart,
-    expanded = false,
-    ontoggle,
-    onapprove,
-    ondeny,
-    reasoningExpanded = false,
-    onreasoning,
-    onsuggestionselect,
-  }: ChatMessagePartsRendererProps = $props();
-
-  const units = $derived(toRenderUnits(parts));
-
-  // APG toolbar roving-tabindex for suggestion chips. `activeIndex` tracks the
-  // chip that holds tabindex=0. ArrowRight/ArrowLeft move focus (wrapping);
-  // Home/End jump to first/last. Tab and all other keys pass through.
-  let activeIndex = $state(0);
-
-  // The chip count can shrink between renders (a new assistant turn with fewer
-  // suggestions, or streaming). A raw `activeIndex` left beyond a toolbar's range
-  // would leave NO chip with tabindex=0, making that toolbar unreachable by Tab.
-  // Clamp against EACH toolbar's own length (not the total across units) so every
-  // rendered toolbar always has exactly one tabindex=0 entry point — floored at 0
-  // for the empty case.
-  function activeChipIndex(count: number): number {
-    return count === 0 ? 0 : Math.min(activeIndex, count - 1);
-  }
-
-  function handleToolbarKeydown(event: KeyboardEvent, toolbar: HTMLElement, count: number): void {
-    if (count === 0) return;
-    const current = Math.min(activeIndex, count - 1);
-    let next = current;
-    if (event.key === 'ArrowRight') {
-      next = (current + 1) % count;
-    } else if (event.key === 'ArrowLeft') {
-      next = (current - 1 + count) % count;
-    } else if (event.key === 'Home') {
-      next = 0;
-    } else if (event.key === 'End') {
-      next = count - 1;
-    } else {
-      return;
-    }
-    event.preventDefault();
-    activeIndex = next;
-    const chips = toolbar.querySelectorAll<HTMLElement>('[data-cinder-suggestion]');
-    chips[next]?.focus();
-  }
-</script>
-
-<!--
-  Built-in renderer for a single body part. A static `{#if part.type === ...}`
-  switch (not a dynamic component map) so the bundler can tree-shake unused part
-  components and TypeScript narrows each branch. Image parts and step parts never
-  reach here — they render through the grouped `{#each}` path below. The trailing
-  `{:else}` is the exhaustiveness sentinel: `part.type` narrows to `never` there,
-  so a later Chat task that widens ChatMessagePart without adding a branch surfaces
-  a visible dev marker in the DOM rather than silently rendering nothing.
--->
-{#snippet renderDefault(part: BodyMessagePart)}
-  {#if part.type === 'markdown'}
-    <MarkdownPart {part} />
-  {:else if part.type === 'tool-call'}
-    <ToolCallPart {part} {expanded} {ontoggle} />
-  {:else if part.type === 'tool-result'}
-    <ToolResultPart {part} />
-  {:else if part.type === 'tool-approval'}
-    <ToolApprovalPart {part} {onapprove} {ondeny} />
-  {:else if part.type === 'reasoning'}
-    <ReasoningPart {part} expanded={reasoningExpanded} ontoggle={onreasoning} />
-  {:else}
-    <!-- Unhandled part type — a new ChatMessagePart variant was added without a
-         renderer branch. `part` narrows to `never` here, so svelte-check flags
-         the unreachable branch when the union widens, and this sentinel makes
-         the omission visible in the DOM. -->
-    <span data-cinder-unhandled-part aria-hidden="true"></span>
-  {/if}
-{/snippet}
-
-{#each units as unit (unit.key)}
-  {#if unit.kind === 'images'}
-    <ImagePart parts={unit.images} />
-  {:else if unit.kind === 'steps'}
-    <!-- Step parts are grouped and wrapped in a single <ol> stepper. -->
-    <ol class="chat-step-list" aria-label="Steps">
-      {#each unit.steps as step (step.key)}
-        <StepPart part={step} />
-      {/each}
-    </ol>
-  {:else if unit.kind === 'suggestions'}
-    <!-- Suggestion chips are grouped into a single toolbar. APG toolbar pattern:
-         Tab enters → active chip (tabindex=0); Left/Right arrows move focus
-         within (roving tabindex); Tab exits. Home/End jump to first/last.
-         [data-cinder-suggested-replies] is the selector used by useChatKeyboardNav
-         to suppress message ArrowUp/ArrowDown while focus is inside here. -->
-    <div
-      class="chat-suggestions"
-      role="toolbar"
-      aria-label="Suggested replies"
-      data-cinder-suggested-replies
-      onkeydown={(event) => {
-        handleToolbarKeydown(event, event.currentTarget as HTMLElement, unit.suggestions.length);
-      }}
-    >
-      {#each unit.suggestions as suggestion, index (suggestion.key)}
-        <SuggestionPart
-          part={suggestion}
-          {onsuggestionselect}
-          tabindex={index === activeChipIndex(unit.suggestions.length) ? 0 : -1}
-        />
-      {/each}
-    </div>
-  {:else if messagePart}
-    {@render messagePart(unit.part, renderDefault)}
-  {:else}
-    {@render renderDefault(unit.part)}
-  {/if}
-{/each}
-
-<style>
-  .chat-step-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  .chat-suggestions {
-    /* No padding-block-start: the parent .chat-message-body flex column now
-       supplies inter-part gap, so an own top padding here would double it. */
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--cinder-space-2);
-  }
-</style>

package/src/components/chat/message/chat-message-parts.ts

@@ -1,163 +0,0 @@
-/**
- * Plain-TS support module for the message parts renderer.
- *
- * Types and the pure `toRenderUnits` grouping live here (not in the `.svelte`
- * file) so they are importable under plain `tsc`/`svelte-check` — symbols
- * exported from a `.svelte` `<script module>` are not reliably resolvable
- * outside the Svelte language service.
- */
-
-import type { Snippet } from 'svelte';
-
-import type {
-  ChatMessagePart,
-  ImageMessagePart,
-  StepMessagePart,
-  SuggestionMessagePart,
-} from '../utilities/types.ts';
-
-/**
- * A body part — every renderable part EXCEPT image, step, and suggestion.
- * Image parts render through the grouped attachment path (the grid lays out
- * by total count). Step parts are grouped into the stepper render unit and
- * bypass the per-part override entirely — they never reach `messagePart` or
- * `renderDefault`. Suggestion parts render through the grouped `suggestions`
- * toolbar path so all chips appear inside a single `role="toolbar"` wrapper.
- * None of these flow through the per-part override; the override's type
- * excludes them so a consumer can't write dead branches for them.
- */
-export type BodyMessagePart = Exclude<
-  ChatMessagePart,
-  ImageMessagePart | StepMessagePart | SuggestionMessagePart
->;
-
-/**
- * Per-part override snippet. Inversion of control: the consumer receives the
- * part AND a `renderDefault` snippet, and decides whether to render its own
- * markup or delegate to the built-in renderer by calling
- * `{@render renderDefault(part)}`. There is no "render empty to fall through"
- * magic — Svelte snippets render DOM and have no inspectable return value, so
- * the fallback is always explicit and SSR-safe.
- *
- * The part is a {@link BodyMessagePart} (image parts are excluded — see above),
- * so the type matches what the override can actually intercept.
- */
-export type MessagePartOverride = Snippet<
-  [part: BodyMessagePart, renderDefault: Snippet<[BodyMessagePart]>]
->;
-
-/** Props for {@link ChatMessagePartsRenderer}. */
-export type ChatMessagePartsRendererProps = {
-  /** The ordered render parts for one message. */
-  parts: ChatMessagePart[];
-  /**
-   * Optional per-part override. Applies to body parts (markdown, tool-call,
-   * tool-result, tool-approval, reasoning). Image parts, step parts, and
-   * suggestion parts always render through the grouped default paths; they are
-   * excluded from this override's type and never flow through it. In
-   * particular, step parts are accumulated into the stepper render unit and
-   * bypass this override entirely — a consumer cannot intercept individual
-   * step parts via `messagePart`.
-   */
-  messagePart?: MessagePartOverride | undefined;
-  /** Disclosure state for tool-call parts. Owned by the message. */
-  expanded?: boolean;
-  /** Called when a tool-call part's disclosure toggle is activated. */
-  ontoggle?: (() => void) | undefined;
-  /** Called when the user approves an action-required tool call. */
-  onapprove?: ((toolCallId: string) => void) | undefined;
-  /** Called when the user denies an action-required tool call. */
-  ondeny?: ((toolCallId: string) => void) | undefined;
-  /** Whether the reasoning block for this message is expanded. */
-  reasoningExpanded?: boolean | undefined;
-  /** Called when the reasoning disclosure toggle is activated. */
-  onreasoning?: (() => void) | undefined;
-  /** Called when the user selects a suggestion chip. */
-  onsuggestionselect?: ((label: string) => void) | undefined;
-};
-
-/** A renderable unit: a single body part, a contiguous run of image parts, a group of step parts, or a group of suggestion chips. */
-export type RenderUnit =
-  | {
-      kind: 'part';
-      part: Exclude<ChatMessagePart, ImageMessagePart | StepMessagePart | SuggestionMessagePart>;
-      key: string;
-    }
-  | { kind: 'images'; images: ImageMessagePart[]; key: string }
-  | { kind: 'steps'; steps: StepMessagePart[]; key: string }
-  | { kind: 'suggestions'; suggestions: SuggestionMessagePart[]; key: string };
-
-/**
- * Collapses a parts array into render units, grouping each maximal run of
- * adjacent image parts into one unit, each maximal run of adjacent step parts
- * into one stepper unit, and each maximal run of adjacent suggestion parts into
- * one toolbar unit. Keeps non-image, non-step, non-suggestion parts individual
- * so the per-part override applies to them; groups images so the attachment
- * grid lays out by total count; groups steps so they render inside a single
- * `<ol>`; groups suggestions so they render inside a single `role="toolbar"`.
- *
- * @param parts - The ordered render parts for one message
- * @returns Render units in order, with image, step, and suggestion runs collapsed
- */
-export function toRenderUnits(parts: ChatMessagePart[]): RenderUnit[] {
-  const units: RenderUnit[] = [];
-  let imageRun: ImageMessagePart[] = [];
-  let stepRun: StepMessagePart[] = [];
-  let suggestionRun: SuggestionMessagePart[] = [];
-
-  const flushImages = (): void => {
-    if (imageRun.length > 0) {
-      // The run's key is its first image key — stable as long as the run's
-      // leading image keeps identity, which it does (index-based keys).
-      units.push({ kind: 'images', images: imageRun, key: `images:${imageRun[0]!.key}` });
-      imageRun = [];
-    }
-  };
-
-  const flushSteps = (): void => {
-    if (stepRun.length > 0) {
-      units.push({ kind: 'steps', steps: stepRun, key: `steps:${stepRun[0]!.key}` });
-      stepRun = [];
-    }
-  };
-
-  const flushSuggestions = (): void => {
-    if (suggestionRun.length > 0) {
-      units.push({
-        kind: 'suggestions',
-        suggestions: suggestionRun,
-        key: `suggestions:${suggestionRun[0]!.key}`,
-      });
-      suggestionRun = [];
-    }
-  };
-
-  for (const part of parts) {
-    if (part.type === 'image') {
-      flushSteps();
-      flushSuggestions();
-      imageRun.push(part);
-      continue;
-    }
-    if (part.type === 'step') {
-      flushImages();
-      flushSuggestions();
-      stepRun.push(part);
-      continue;
-    }
-    if (part.type === 'suggestion') {
-      flushImages();
-      flushSteps();
-      suggestionRun.push(part);
-      continue;
-    }
-    flushImages();
-    flushSteps();
-    flushSuggestions();
-    units.push({ kind: 'part', part, key: part.key });
-  }
-  flushImages();
-  flushSteps();
-  flushSuggestions();
-  return units;
-}