@lostgradient/cinder 0.4.0 → 0.5.0

package/src/components/chat/index.ts

@@ -9,6 +9,7 @@
 // Top-level Chat wrapper — the public component consumers import as
 // `@lostgradient/cinder/chat`. It composes the inner implementation in container/ with a
 // custom class-merge layer.
+import './chat.css';
 import Chat from './chat.svelte';
 
 export default Chat;
@@ -33,10 +34,12 @@ export {
   createConversation,
 } from './builders.ts';
 
-// Conversation data model — the vendored shapes Chat renders. Public so consumers
-// can type the `conversation` prop and construct messages without depending on a
-// conversation-state library. Structurally compatible with `conversationalist`.
+// Conversation data model — published Conversationalist shapes Chat renders.
+// Public so consumers can type the `conversation` prop and construct messages
+// without Cinder maintaining a stale local mirror.
 export type {
+  AssistantMessage,
+  ContainerUploadContent,
   ConversationHistory,
   ConversationStatus,
   ExportOptions,
@@ -49,7 +52,12 @@ export type {
   MessageInput,
   MessageRole,
   MultiModalContent,
+  RedactedThinkingContent,
+  ServerToolResultContent,
+  ServerToolResultType,
+  ServerToolUseContent,
   TextContent,
+  ThinkingContent,
   ToMarkdownOptions,
   TokenUsage,
   ToolAction,
@@ -58,6 +66,7 @@ export type {
   ToolError,
   ToolErrorCategory,
   ToolResult,
+  WebSearchToolResultContent,
 } from './conversation-model.ts';
 
 // Utilities

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

@@ -144,9 +144,10 @@
   }
 
   .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);
-    padding-block-start: var(--cinder-space-2);
   }
 </style>

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

@@ -74,6 +74,18 @@
     reasoningExpanded?: boolean | undefined;
     /** Called when the reasoning disclosure toggle is activated. */
     onreasoning?: (() => void) | undefined;
+    /**
+     * Whether the tool-call card disclosure is expanded. Collapsed by default —
+     * kept separate from `expanded` (which drives markdown "Show more/less"),
+     * since a tool-call message never carries a markdown body. Bindable, like
+     * `expanded`: the `Chat` container drives it from its own per-message
+     * disclosure state (one-way, via `ontoolcalltoggle`), but a standalone
+     * `ChatMessage` used outside `Chat` still gets working, self-contained
+     * disclosure with no wiring required.
+     */
+    toolCallExpanded?: boolean | undefined;
+    /** Called when the tool-call card disclosure toggle is activated. */
+    ontoolcalltoggle?: (() => void) | undefined;
     /**
      * Suggestion labels to surface as clickable chips after the body.
      * Each entry maps to one `suggestion` part in the derived parts.
@@ -116,6 +128,8 @@
     suggestions,
     reasoningExpanded = false,
     onreasoning,
+    toolCallExpanded = $bindable(false),
+    ontoolcalltoggle,
     onsuggestionselect,
     tabindex,
     ...rest
@@ -224,6 +238,21 @@
     expanded = !expanded;
     onexpandedchange?.(expanded);
   }
+
+  // Local fallback so a standalone <ChatMessage> (used outside <Chat>, with no
+  // ontoolcalltoggle wired up) still has a working disclosure — mirrors
+  // toggleExpanded above. When Chat DOES own this message's disclosure, it
+  // passes toolCallExpanded down one-way (not bind:) and reads/writes its own
+  // state via ontoolcalltoggle; this local flip is then a harmless echo that
+  // gets overwritten by the container's next render. onexpandedchange also
+  // fires here (not just ontoolcalltoggle) to preserve the pre-split contract,
+  // where a single expanded/onexpandedchange pair covered every disclosure on
+  // the message, including tool-call cards.
+  function toggleToolCallExpanded() {
+    toolCallExpanded = !toolCallExpanded;
+    ontoolcalltoggle?.();
+    onexpandedchange?.(toolCallExpanded);
+  }
 </script>
 
 <div
@@ -285,8 +314,8 @@
         <ChatMessagePartsRenderer
           parts={bodyParts}
           {messagePart}
-          {expanded}
-          ontoggle={toggleExpanded}
+          expanded={toolCallExpanded}
+          ontoggle={toggleToolCallExpanded}
           {onapprove}
           {ondeny}
           {reasoningExpanded}
@@ -383,6 +412,17 @@
     contain-intrinsic-size: auto 180px;
   }
 
+  /* Escape hatch for a deliberate programmatic scroll-to-bottom
+     (use-chat-scroll-state.svelte.ts): while `.chat-timeline` carries
+     `data-cinder-force-visible`, every row lays out at its real height up
+     front instead of the 180px estimate above. Without this, off-screen rows
+     resize as they cross into view DURING an animated scrollTo(), which
+     shifts content under a fixed pixel target and reads as a jerk right as
+     the scroll finishes. */
+  :global(.chat-timeline[data-cinder-force-visible]) .chat-message {
+    content-visibility: visible;
+  }
+
   /* Focus visible style for keyboard navigation */
   .chat-message:focus {
     outline: none;
@@ -574,7 +614,15 @@
   }
 
   /* Body */
+  /* Flex column so stacked body parts (e.g. a tool-call card followed by a
+     tool-approval prompt, or a step list + reasoning block + final markdown
+     answer) get visible breathing room between them via `gap`. Without this,
+     parts are plain block children with zero margin and sit flush against
+     each other. */
   .chat-message-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-3);
     font-size: var(--cinder-text-base);
     line-height: 1.6;
   }
@@ -583,10 +631,13 @@
      markup (the parts spine now owns that body shape). */
 
   .chat-message-expand {
+    /* .chat-message-body is a flex column now (for inter-part gap); without
+       this, the default flex align-items:stretch would balloon this button to
+       the container's full width instead of shrinking to its label. */
+    align-self: flex-start;
     display: inline-flex;
     align-items: center;
     gap: var(--cinder-space-0-5);
-    margin-top: var(--cinder-space-1);
     padding: var(--cinder-space-0-5) var(--cinder-space-1);
     min-height: var(--cinder-touch-target-min);
     font-size: var(--cinder-text-xs);

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

@@ -4,7 +4,7 @@
   export type ReasoningPartProps = {
     /** The reasoning render part to display. */
     part: ReasoningMessagePart;
-    /** Whether this reasoning block is expanded. Controlled by the parent (use-chat-reasoning-state). */
+    /** Whether this reasoning block is expanded. Controlled by the parent (use-chat-disclosure-state). */
     expanded?: boolean;
     /** Called when the disclosure toggle is activated. */
     ontoggle?: (() => void) | undefined;

package/src/components/chat/message/parts/tool-approval-part.svelte

@@ -228,9 +228,12 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-block-size: var(--cinder-touch-target-min, 44px);
-    padding-block: var(--cinder-space-2);
-    padding-inline: var(--cinder-space-4);
+    /* Match the cinder Button component's default (md) size scale, rather
+       than the AAA 44px touch target — the latter made these buttons look
+       like oversized outliers next to every other control in the system. */
+    min-block-size: var(--cinder-button-height-md);
+    padding-block: var(--cinder-button-padding-y-md);
+    padding-inline: var(--cinder-button-padding-x-md);
     border: 1px solid transparent;
     border-radius: var(--cinder-radius-md);
     font-size: var(--cinder-text-sm);

package/src/components/chat/message/tool-payload-code.svelte

@@ -63,4 +63,14 @@
   .tool-payload-code :global(.cinder-code-block) {
     inline-size: 100%;
   }
+
+  /* Cap tall payloads so a large arguments/result blob scrolls in place instead
+   * of dominating the transcript. The viewport already owns overflow-x and is
+   * focusable (tabindex=0), so adding a block-axis cap here keeps it keyboard-
+   * scrollable on both axes without nesting scroll containers. Matches the
+   * reasoning block's scroll region cap. */
+  .tool-payload-code :global(.cinder-code-block__viewport) {
+    max-block-size: 16rem;
+    overflow-y: auto;
+  }
 </style>

package/src/components/chat/utilities/conversation.ts

@@ -1,75 +1,26 @@
 /**
- * Cinder-owned conversation-reading helpers.
+ * Conversation-reading helpers for Chat.
  *
- * These reimplement the small slice of conversation-reading behavior Chat needs
- * (message ordering and tool-call pairing) so Chat depends only on the vendored
- * {@link ConversationHistory}/{@link Message} shapes, not on a runtime library.
- * Behavior is transcribed from `conversationalist`'s `getOrderedMessages`/`getMessages`
- * and `pairToolCallsWithResults`; tests pin the contract so any divergence is visible.
+ * These delegate to `conversationalist` so message ordering stays aligned with
+ * the published conversation package. Tool pairing keeps Chat's role gate so an
+ * incidental tool-shaped field on a non-tool message never renders as a pair.
  */
 
-import type {
-  ConversationHistory,
-  Message,
-  ToolCallPair,
-  ToolResult,
-} from '../conversation-model.ts';
+import { getMessages } from 'conversationalist';
+import { pairToolCallsWithResults as pairConversationalistToolCallsWithResults } from 'conversationalist/utilities';
 
-/**
- * Returns a conversation's messages in canonical order.
- *
- * Walks `conversation.ids` in order, resolving each id from the `messages`
- * record. Ids with no matching record are skipped (no throw); records not
- * referenced by `ids` are excluded. Hidden messages are filtered out unless
- * `includeHidden` is true.
- *
- * @param conversation - The conversation snapshot to read
- * @param options - `includeHidden` keeps hidden messages in the result
- * @returns Ordered messages
- */
-export function getMessages(
-  conversation: ConversationHistory,
-  options?: { includeHidden?: boolean },
-): Message[] {
-  const includeHidden = options?.includeHidden ?? false;
-  const ordered: Message[] = [];
-  for (const id of conversation.ids) {
-    const message = conversation.messages[id];
-    if (message && (includeHidden || !message.hidden)) {
-      ordered.push(message);
-    }
-  }
-  return ordered;
+import type { Message, ToolCallPair } from '../conversation-model.ts';
+
+function hasPairableToolField(message: Message): boolean {
+  return (
+    (message.role === 'tool-call' && message.toolCall !== undefined) ||
+    (message.role === 'tool-result' && message.toolResult !== undefined)
+  );
 }
 
-/**
- * Pairs tool calls with their results from an already-ordered message array.
- *
- * Consumes an ordered array only — pass {@link getMessages} output — so pairing
- * can never disagree with render ordering or surface a stale message that
- * `getMessages` would have excluded. Two passes: collect results by their
- * `callId`, then emit one pair per message bearing a `toolCall`, attaching the
- * matching result if one exists. When two results share a `callId`, the later
- * one wins (last write to the map).
- *
- * @param messages - Messages in canonical order
- * @returns One pair per tool call, in call order
- */
+/** Pairs tool calls with role-valid tool results from an already-ordered message array. */
 export function pairToolCallsWithResults(messages: ReadonlyArray<Message>): ToolCallPair[] {
-  const resultsByCallId = new Map<string, ToolResult>();
-  for (const message of messages) {
-    // Role-gate (not just `toolResult` presence) so a non-tool message carrying
-    // an incidental tool-shaped field never contributes a phantom result.
-    if (message.role === 'tool-result' && message.toolResult) {
-      resultsByCallId.set(message.toolResult.callId, message.toolResult);
-    }
-  }
-
-  const pairs: ToolCallPair[] = [];
-  for (const message of messages) {
-    if (message.role === 'tool-call' && message.toolCall) {
-      pairs.push({ call: message.toolCall, result: resultsByCallId.get(message.toolCall.id) });
-    }
-  }
-  return pairs;
+  return pairConversationalistToolCallsWithResults(messages.filter(hasPairableToolField));
 }
+
+export { getMessages };

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

@@ -2,7 +2,7 @@
  * Chat data model helpers.
  *
  * Conversation-reading helpers ({@link getMessages}, {@link pairToolCallsWithResults})
- * and content/markdown utilities, all built on the vendored conversation model.
+ * and content/markdown utilities, all built on the Conversationalist model.
  */
 
 export { getMessages, pairToolCallsWithResults } from './conversation';

package/src/components/chat/utilities/types.ts

@@ -1,5 +1,5 @@
 /**
- * Chat data model types built on top of the vendored conversation model.
+ * Chat data model types built on top of the published Conversationalist model.
  *
  * Core types live in `../conversation-model.ts`; this module provides only
  * project-specific extensions, including the cinder-OWNED render-part layer
@@ -24,7 +24,7 @@ import type {
 export type DeliveryStatus = 'draft' | 'sending' | 'sent' | 'failed';
 
 /**
- * Options for exporting a chat transcript. Equivalent to the vendored
+ * Options for exporting a chat transcript. Equivalent to the published
  * {@link ToMarkdownOptions} (which already carries `includeHidden`,
  * `redactHiddenContent`, and the redaction controls); exposed under a
  * chat-specific name for the public `@lostgradient/cinder/chat` surface.
@@ -246,7 +246,9 @@ export type MessagePartDerivationContext = {
   deniedToolCallIds?: ReadonlySet<string> | undefined;
   /**
    * Pre-body extended thinking block. When present and non-empty, a
-   * `reasoning` part is emitted before the markdown body part.
+   * `reasoning` part is emitted before the markdown body part. An empty string
+   * is an explicit suppression sentinel and also blocks transcript-native
+   * `thinking` content from rendering as reasoning.
    *
    * Source: `message.metadata['cinder:reasoning']` (a JSONValue string) or the
    * explicit `messageReasoning` per-message prop on Chat. Never a required

package/src/components/chat/utilities/utilities.ts

@@ -1,7 +1,7 @@
 /**
  * Utility functions for chat message operations.
  *
- * These helpers work with the vendored {@link Message} type to extract
+ * These helpers work with the published {@link Message} type to extract
  * content for copy/export operations.
  */
 
@@ -69,14 +69,16 @@ function runOverlayCallback<T>(
  * Resolves the reasoning overlay for a message. An explicit per-message callback
  * is consulted first; when it returns `undefined` (or throws) the resolution
  * falls back to `cinder:reasoning` namespaced metadata. An empty string from the
- * callback is authoritative and suppresses the overlay. Returns `undefined` when
- * no reasoning applies — a plain transcript renders the feature absent.
+ * callback is authoritative and suppresses the overlay. That suppression is
+ * returned as `''` so downstream part derivation can also skip transcript-native
+ * `thinking` content. Returns `undefined` when no reasoning source applies.
  */
 export function resolveMessageReasoning(
   message: Message,
   fromProp?: (message: Message) => string | undefined,
 ): string | undefined {
   const fromCallback = runOverlayCallback(message, fromProp);
+  if (fromCallback.handled && fromCallback.value === '') return '';
   const candidate: unknown = fromCallback.handled
     ? fromCallback.value
     : message.metadata[CINDER_REASONING_METADATA_KEY];
@@ -143,14 +145,29 @@ export function toMultiModalArray(
   return 'type' in input ? [input] : input;
 }
 
-/**
- * Type predicate for text content parts.
- */
-function isTextPart(part: MultiModalContent): part is TextPart {
-  return part.type === 'text';
+function formatJSONValue(value: unknown): string {
+  return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
 }
 
-type TextPart = MultiModalContent & { type: 'text'; text: string };
+function getServerContentText(part: MultiModalContent): string | undefined {
+  switch (part.type) {
+    case 'text':
+      return part.text;
+    case 'server_tool_use':
+      return [`Server tool use: ${part.name}`, formatJSONValue(part.input)].join('\n');
+    case 'web_search_tool_result':
+      return [`Web search result: ${part.tool_use_id}`, formatJSONValue(part.content)].join('\n');
+    case 'code_execution_tool_result':
+    case 'bash_code_execution_tool_result':
+    case 'text_editor_code_execution_tool_result':
+    case 'web_fetch_tool_result':
+      return [`Server tool result: ${part.tool_use_id}`, formatJSONValue(part.content)].join('\n');
+    case 'container_upload':
+      return `Container upload: ${part.file_id}`;
+    default:
+      return undefined;
+  }
+}
 
 /**
  * Extracts all content parts from a message as a multi-modal array.
@@ -185,8 +202,8 @@ export function getMessageParts(message: Message): ReadonlyArray<MultiModalConte
  */
 export function getMessageText(message: Message): string {
   return getMessageParts(message)
-    .filter(isTextPart)
-    .map((part) => part.text)
+    .map(getServerContentText)
+    .filter((text): text is string => typeof text === 'string' && text.length > 0)
     .join('\n');
 }
 
@@ -213,6 +230,33 @@ function deriveImageParts(message: Message): ImageMessagePart[] {
   return parts;
 }
 
+function deriveReasoningContent(
+  message: Message,
+  explicitReasoning: string | undefined,
+): string | undefined {
+  if (explicitReasoning === '') return undefined;
+  const reasoningSegments =
+    explicitReasoning && explicitReasoning.length > 0 ? [explicitReasoning] : [];
+  if (typeof message.content !== 'string') {
+    let hasRedactedThinking = false;
+    for (const segment of message.content) {
+      if (segment.type === 'thinking' && segment.thinking.length > 0) {
+        reasoningSegments.push(segment.thinking);
+      }
+      if (segment.type === 'redacted_thinking') {
+        hasRedactedThinking = true;
+      }
+    }
+    if (hasRedactedThinking) {
+      reasoningSegments.push(
+        'Redacted reasoning is preserved in this transcript but cannot be displayed.',
+      );
+    }
+  }
+
+  return reasoningSegments.length > 0 ? reasoningSegments.join('\n\n') : undefined;
+}
+
 /**
  * Builds a {@link ToolApprovalMessagePart} from an `action_required` tool result.
  *
@@ -363,11 +407,12 @@ export function deriveMessageParts(
   }
 
   // C4: Reasoning part — emitted before the markdown body when present.
-  if (context.reasoning && context.reasoning.length > 0) {
+  const reasoningContent = deriveReasoningContent(message, context.reasoning);
+  if (reasoningContent) {
     bodyParts.push({
       type: 'reasoning',
       key: `${message.id}:reasoning`,
-      content: context.reasoning,
+      content: reasoningContent,
       streaming: context.streaming ?? false,
     });
   }

package/src/components/collapsible/collapsible-open-prop-harness.svelte

@@ -0,0 +1,19 @@
+<!--
+  Test-only harness pinning the unbound `open` contract: `open={...}` seeds the
+  initial state. Parent writes can update it, but trigger clicks remain local
+  unless `bind:open` is used. Not a public component.
+-->
+<script lang="ts">
+  import Collapsible from './collapsible.svelte';
+
+  let open = $state(false);
+</script>
+
+<button type="button" data-testid="parent-open" onclick={() => (open = true)}> parent open </button>
+<button type="button" data-testid="parent-close" onclick={() => (open = false)}>
+  parent close
+</button>
+
+<Collapsible {open} trigger="Harness panel">
+  <p>panel body</p>
+</Collapsible>

package/src/components/collapsible/collapsible.svelte

@@ -29,6 +29,7 @@
     open = $bindable(false),
     ontoggle,
     disabled = false,
+    triggerAriaLabel,
     idBase,
     class: className,
     ...rest
@@ -43,7 +44,18 @@
   const autoId = $props.id();
   const baseId = $derived(idBase ?? autoId);
   const headerId = $derived(`${baseId}-header`);
+  const labelId = $derived(`${baseId}-label`);
   const panelId = $derived(`${baseId}-panel`);
+  const computedTriggerAriaLabelRaw = $derived.by(() =>
+    typeof triggerAriaLabel === 'function'
+      ? triggerAriaLabel({ open, disabled })
+      : triggerAriaLabel,
+  );
+  const computedTriggerAriaLabel = $derived(
+    typeof computedTriggerAriaLabelRaw === 'string' && computedTriggerAriaLabelRaw.trim().length > 0
+      ? computedTriggerAriaLabelRaw
+      : undefined,
+  );
 
   function handleClick(): void {
     if (disabled) return;
@@ -63,6 +75,7 @@
     type="button"
     id={headerId}
     class="cinder-collapsible__trigger"
+    aria-label={computedTriggerAriaLabel}
     aria-expanded={open}
     aria-controls={open ? panelId : undefined}
     {disabled}
@@ -70,9 +83,11 @@
   >
     <span class="cinder-collapsible__label">
       {#if typeof trigger === 'string'}
-        {trigger}
+        <span id={labelId}>{trigger}</span>
       {:else}
-        {@render trigger({ open, disabled })}
+        <span id={labelId}>
+          {@render trigger({ open, disabled })}
+        </span>
       {/if}
     </span>
     <svg
@@ -96,7 +111,7 @@
       transition:slide={{ duration: slideMs }}
       id={panelId}
       role="region"
-      aria-labelledby={headerId}
+      aria-labelledby={labelId}
       class="cinder-collapsible__panel"
     >
       <div class="cinder-collapsible__panel-inner">

package/src/components/collapsible/collapsible.types.ts

@@ -13,8 +13,9 @@ export type CollapsibleProps = Omit<
   /** Panel content shown when open. */
   children: Snippet;
   /**
-   * Bindable open state. Without `bind:open`, this is the initial value and the
-   * component manages subsequent toggles. With `bind:open`, the parent owns it.
+   * Bindable open state. Without `bind:open`, this seeds local state and can be
+   * updated by parent prop changes, while trigger clicks update local state.
+   * Use `bind:open` for full parent/trigger synchronization.
    * @default false
    */
   open?: boolean;
@@ -25,9 +26,16 @@ export type CollapsibleProps = Omit<
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Accessible name override for the internal trigger button. Accepts either a
+   * fixed string or a function receiving `{ open, disabled }` so labels can
+   * react without requiring `bind:open`.
+   */
+  triggerAriaLabel?: string | ((state: CollapsibleTriggerState) => string);
   /**
    * Base used to derive the trigger and panel ARIA ids (`<base>-header`,
-   * `<base>-panel`). NOT the root element id. Auto-generated when omitted.
+   * `<base>-label`, `<base>-panel`). NOT the root element id. Auto-generated
+   * when omitted.
    */
   idBase?: string;
   /** Additional classes merged onto the root element. */
@@ -43,8 +51,9 @@ export interface CollapsibleSchemaProps {
   /** Trigger label text. (The snippet form is template-only; see the type above.) */
   trigger: string;
   /**
-   * Bindable open state. Without binding, the initial value the component then
-   * manages.
+   * Bindable open state. Without `bind:open`, this seeds local state and can be
+   * updated by parent prop changes. Use `bind:open` for full parent/trigger
+   * synchronization.
    * @default false
    */
   open?: boolean;
@@ -53,7 +62,13 @@ export interface CollapsibleSchemaProps {
    * @default false
    */
   disabled?: boolean;
-  /** Base used to derive the trigger and panel ARIA ids. Auto-generated when omitted. */
+  /**
+   * Accessible name override for the trigger button. The runtime prop also
+   * accepts a state-aware function (`{ open, disabled } => string`), but JSON
+   * Schema can only model the string variant.
+   */
+  triggerAriaLabel?: string;
+  /** Base used to derive the trigger, label, and panel ARIA ids. Auto-generated when omitted. */
   idBase?: string;
   /** Additional classes merged onto the root element. */
   class?: string;