@fusion.dev/helix 0.145.0 → 0.147.0

package/dist/chat/composer/chat-composer.css.js

@@ -1,106 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="composer"] {
-background-color: var(--chat-composer-background-color, var(--helix-color-surface));
-border: var(--chat-composer-border-width, var(--helix-border-thin)) solid
-var(--helix-color-border);
-border-radius: var(--helix-radii-md);
-display: grid;
-gap: var(--helix-space-2xs);
-padding: var(--helix-space-xs);
-}
-
-[part="composer"]:focus-within {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
-[part="field"] {
-background-color: transparent;
-border: 0;
-color: var(--helix-color-foreground);
-
-field-sizing: content;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-line-height: var(--helix-leading-normal);
-max-block-size: var(--chat-composer-max-block-size, 12rem);
-padding-block: var(--helix-space-2xs);
-padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));
-resize: none;
-}
-
-[part="field"]:focus-visible {
-outline: none;
-}
-
-[part="tools"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-2xs);
-justify-content: flex-end;
-}
-
-[part="start"],
-[part="end"] {
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-
-align-items: center;
-display: flex;
-gap: var(--helix-space-2xs);
-}
-
-[part="start"] {
-margin-inline-end: auto;
-}
-
-[part="end"] {
-margin-inline-end: var(--helix-space-2xs);
-}
-
-[part="start"][data-empty],
-[part="end"][data-empty] {
-display: none;
-}
-
-[part="send"] {
-align-items: center;
-background-color: transparent;
-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));
-border: 0;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));
-justify-content: center;
-padding: var(--helix-space-none);
-}
-
-[part="mark"] {
-block-size: var(--helix-size-icon-tight);
-inline-size: var(--helix-size-icon-tight);
-}
-
-[part="send"]:hover:not(:disabled) {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part="send"]:disabled {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-[part="send"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}`);
+export const styles = createSheet(`:host {display: block;}[part="composer"] {background-color: var(--chat-composer-background-color, var(--helix-color-surface));border: var(--chat-composer-border-width, var(--helix-border-thin)) solid
+var(--helix-color-border);border-radius: var(--helix-radii-md);display: grid;gap: var(--helix-space-2xs);padding: var(--helix-space-xs);}[part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none;}[part="field"]:focus-visible {outline: none;}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end;}[part="start"],
+[part="end"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: flex;gap: var(--helix-space-2xs);}[part="start"] {margin-inline-end: auto;}[part="end"] {margin-inline-end: var(--helix-space-2xs);}[part="start"][data-empty],
+[part="end"][data-empty] {display: none;}[part="send"] {align-items: center;background-color: transparent;block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));justify-content: center;padding: var(--helix-space-none);}[part="mark"] {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="send"]:hover:not(:disabled) {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="send"]:disabled {cursor: not-allowed;opacity: 0.5;}[part="send"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}`);

package/dist/chat/message/chat-message.css.js

@@ -1,308 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="message"] {
-align-items: start;
-display: grid;
-grid-template-columns: auto minmax(0, 1fr);
-}
-
-[part="avatar"] > slot::slotted(*) {
-margin-inline-end: var(--helix-space-sm);
-}
-
-[part="avatar"] {
-align-items: center;
-display: flex;
-font-size: var(--helix-text-sm);
-grid-column: 1;
-line-height: var(--helix-leading-normal);
-min-block-size: calc(1lh + var(--helix-space-xs) * 2);
-}
-
-[part="body"] {
-grid-column: 2;
-}
-
-:host([author="me"]) [part="avatar"] {
-display: none;
-}
-
-[part="body"] {
-display: grid;
-gap: var(--helix-space-2xs);
-
-justify-items: start;
-
-max-inline-size: min(var(--chat-message-measure, 42rem), 80%);
-}
-
-:host([author="me"]) [part="body"] {
-justify-items: end;
-justify-self: end;
-}
-
-[part="actions"] {
-opacity: 0;
-pointer-events: none;
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:hover) [part="actions"],
-:host(:focus-within) [part="actions"] {
-opacity: 1;
-pointer-events: auto;
-}
-
-@media (hover: none) {
-[part="actions"] {
-opacity: 1;
-pointer-events: auto;
-}
-}
-
-[part="actions"] {
-
---helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-
-align-items: center;
-display: inline-flex;
-gap: var(--helix-space-2xs);
-}
-
-[part="actions"][hidden] {
-display: none;
-}
-
-[part="sources"] {
---helix-size-avatar: var(--helix-size-avatar-sm);
---helix-size-tag: var(--helix-size-tag-sm);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-
-align-items: center;
-color: var(--helix-color-foreground-muted);
-display: flex;
-flex-wrap: wrap;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-gap: var(--helix-space-2xs);
-line-height: var(--helix-leading-normal);
-}
-
-[part="sources"][hidden] {
-display: none;
-}
-
-[part="content"] {
-background-color: var(
+export const styles = createSheet(`:host {display: block;}[part="message"] {align-items: start;display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="avatar"] > slot::slotted(*) {margin-inline-end: var(--helix-space-sm);}[part="avatar"] {align-items: center;display: flex;font-size: var(--helix-text-sm);grid-column: 1;line-height: var(--helix-leading-normal);min-block-size: calc(1lh + var(--helix-space-xs) * 2);}[part="body"] {grid-column: 2;}:host([author="me"]) [part="avatar"] {display: none;}[part="body"] {display: grid;gap: var(--helix-space-2xs);justify-items: start;max-inline-size: min(var(--chat-message-measure, 42rem), 80%);}:host([author="me"]) [part="body"] {justify-items: end;justify-self: end;}[part="actions"] {opacity: 0;pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);}:host(:hover) [part="actions"],
+:host(:focus-within) [part="actions"] {opacity: 1;pointer-events: auto;}@media (hover: none) {[part="actions"] {opacity: 1;pointer-events: auto;}}[part="actions"] {--helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: inline-flex;gap: var(--helix-space-2xs);}[part="actions"][hidden] {display: none;}[part="sources"] {--helix-size-avatar: var(--helix-size-avatar-sm);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);line-height: var(--helix-leading-normal);}[part="sources"][hidden] {display: none;}[part="content"] {background-color: var(
 --chat-message-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
-);
-border-radius: var(--helix-radii-md);
-color: var(--chat-message-color, var(--helix-color-foreground));
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-line-height: var(--helix-leading-normal);
-padding-block: var(--helix-space-xs);
-padding-inline: var(--helix-space-sm);
-}
-
-:host([separation="plain"]) [part="content"] {
-background-color: transparent;
-padding-inline: var(--helix-space-none);
-}
-
-:host([separation="plain"]) [part="body"] {
-justify-items: stretch;
-max-inline-size: 100%;
-}
-
-:host([separation="plain"]) [part="content"] {
-inline-size: auto;
-}
-
-:host([author="me"]) [part="content"] {
-background-color: var(
+);border-radius: var(--chat-message-radius, var(--helix-radii-md));color: var(--chat-message-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);padding-block: var(--chat-message-padding-block, var(--helix-space-xs));padding-inline: var(--chat-message-padding-inline, var(--helix-space-sm));}:host([separation="plain"]) [part="content"] {background-color: transparent;padding-inline: var(--helix-space-none);}:host([separation="plain"]) [part="body"] {justify-items: stretch;max-inline-size: 100%;}:host([separation="plain"]) [part="content"] {inline-size: auto;}:host([author="me"]) [part="content"] {background-color: var(
 --chat-message-background-color-me,
 color-mix(in oklab, var(--helix-color-primary) 28%, transparent)
-);
-}
-
-[part="meta"] {
-align-items: center;
-color: var(--helix-color-foreground-muted);
-display: flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-gap: var(--helix-space-2xs);
-}
-
-:host([author="me"]) [part="meta"] {
-justify-content: flex-end;
-}
-
-[part="content"] {
-inline-size: fit-content;
-max-inline-size: 100%;
-min-inline-size: 0;
-overflow-x: auto;
-}
-
-[part="content"] slot[name="indicator"] {
-display: none;
-}
-
-:host([state="streaming"]) [part="content"][data-empty] slot[name="indicator"] {
-display: block;
-}
-
-slot[name="indicator"]::slotted(*) {
-background-color: var(--chat-indicator-background-color, var(--helix-color-surface-sunken));
-border-radius: var(--helix-radii-full);
-
-font-size: var(--helix-text-xs);
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
-
---orb-size: var(--helix-size-icon-sm);
-}
-
-slot[name="indicator"]::slotted(helix-orb) {
-background-color: transparent;
-padding: var(--helix-space-none);
-}
-
-[part="indicator"] {
-
---_chat-typing-cycle: 1.2s;
-
-animation: helix-chat-typing var(--_chat-typing-cycle) infinite ease-in-out;
-background-image:
-radial-gradient(circle closest-side, currentColor 90%, transparent),
-radial-gradient(circle closest-side, currentColor 90%, transparent),
-radial-gradient(circle closest-side, currentColor 90%, transparent);
-background-position:
-0% 50%,
-50% 50%,
-100% 50%;
-background-repeat: no-repeat;
-background-size:
-20% 30%,
-20% 30%,
-20% 30%;
-block-size: 1lh;
-display: block;
-inline-size: 1.75em;
-opacity: 0.7;
-}
-
-@keyframes helix-chat-typing {
-0%,
-60%,
-100% {
-background-position:
-0% 50%,
-50% 50%,
-100% 50%;
-}
-
-20% {
-background-position:
-0% 10%,
-50% 50%,
-100% 50%;
-}
-
-33% {
-background-position:
-0% 50%,
-50% 10%,
-100% 50%;
-}
-
-46% {
-background-position:
-0% 50%,
-50% 50%,
-100% 10%;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="indicator"] {
-animation: none;
-}
-}
-
-:host([state="failed"]) [part="meta"] {
-color: var(--helix-color-danger);
-}
-
-[part="state"] {
-align-items: center;
-display: inline-flex;
-font-weight: var(--helix-weight-medium);
-gap: var(--helix-space-2xs);
-}
-
-[part="mark"] {
-block-size: var(--helix-size-icon-tight);
-flex: 0 0 auto;
-inline-size: var(--helix-size-icon-tight);
-}
-
-:host([state="sending"]) [part="content"] {
-opacity: 0.6;
-}
-
-[part="retry"] {
-background: none;
-border: 0;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground);
-cursor: pointer;
-font: inherit;
-font-weight: var(--helix-weight-medium);
-
-margin-inline-end: calc(var(--helix-space-2xs) * -1);
-min-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-2xs);
-text-decoration: underline;
-text-underline-offset: 0.2em;
-}
-
-[part="retry"]:hover {
-background-color: light-dark(
+);color: var(--chat-message-color-me, var(--chat-message-color, var(--helix-color-foreground)));}[part="meta"] {align-items: center;color: var(--chat-message-meta-color, var(--helix-color-foreground-muted));display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);}:host([author="me"]) [part="meta"] {justify-content: flex-end;}[part="content"] {inline-size: fit-content;max-inline-size: 100%;min-inline-size: 0;overflow-x: auto;}[part="content"] slot[name="indicator"] {display: none;}:host([state="streaming"]) [part="content"][data-empty] slot[name="indicator"] {display: block;}slot[name="indicator"]::slotted(*) {background-color: var(--chat-indicator-background-color, var(--helix-color-surface-sunken));border-radius: var(--helix-radii-full);font-size: var(--helix-text-xs);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);--orb-size: var(--helix-size-icon-sm);}slot[name="indicator"]::slotted(helix-orb) {background-color: transparent;padding: var(--helix-space-none);}:host([state="failed"]) [part="meta"] {color: var(--helix-color-danger);}[part="state"] {align-items: center;display: inline-flex;font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);}[part="mark"] {block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);}:host([state="sending"]) [part="content"] {opacity: 0.6;}[part="retry"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;font: inherit;font-weight: var(--helix-weight-medium);margin-inline-end: calc(var(--helix-space-2xs) * -1);min-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);text-decoration: underline;text-underline-offset: 0.2em;}[part="retry"]:hover {background-color: light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
-);
-}
-
-[part="retry"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-@media print {
-[part="retry"] {
-display: none;
-}
-
-[part="actions"] {
-display: none;
-}
-
-[part="content"] slot[name="indicator"] {
-display: none;
-}
-}`);
+);}[part="retry"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {[part="retry"] {display: none;}[part="actions"] {display: none;}[part="content"] slot[name="indicator"] {display: none;}}`);

package/dist/chat/message/chat-message.d.ts

@@ -29,7 +29,12 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --chat-message-background-color - Fill behind a turn.
  * @cssproperty --chat-message-background-color-me - Fill behind turns by `me`.
  * @cssproperty --chat-message-color - Text color in a turn.
+ * @cssproperty --chat-message-color-me - Text color in turns by `me`.
  * @cssproperty --chat-message-measure - Maximum width of a turn before its text wraps.
+ * @cssproperty --chat-message-meta-color - Color of the line under a turn, with its time and state.
+ * @cssproperty --chat-message-padding-block - Space above and below a turn's content inside its bubble.
+ * @cssproperty --chat-message-padding-inline - Space either side of a turn's content inside its bubble.
+ * @cssproperty --chat-message-radius - Corner radius of a turn's bubble.
  */
 export declare class HelixChatMessage extends HelixHeadlessChatMessage {
     static tier: string;

package/dist/chat/message/chat-message.js

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessChatMessage } from '@fusion.dev/helix-headless/chat';
 import { property } from 'lit/decorators.js';
+import { styles as typingStyles } from '../typing.css.js';
 import { styles } from './chat-message.css.js';
 let HelixChatMessage = class HelixChatMessage extends HelixHeadlessChatMessage {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [typingStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/chat/root/chat-root.css.js

@@ -1,157 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: grid;
-grid-template-rows: auto minmax(0, 1fr) auto auto auto;
-max-block-size: var(--chat-max-block-size, none);
-min-block-size: 0;
-}
-
-[part="header"] {
-grid-row: 1;
-}
-
-[part="log"] {
-grid-row: 2;
-}
-
-[part="resume"] {
-grid-row: 3;
-}
-
-[part="status"] {
-grid-row: 4;
-}
-
-[part="composer"] {
-grid-row: 5;
-}
-
-[part="log"] {
-display: flex;
-flex-direction: column;
-scrollbar-color: var(--helix-color-border) transparent;
-scrollbar-width: thin;
-gap: var(--chat-gap, var(--helix-space-md));
-overflow-y: auto;
-padding-block: var(--helix-space-md);
-padding-inline: var(--chat-padding-inline, var(--helix-space-md));
-
-justify-content: safe flex-end;
-}
-
-[part="header"][hidden],
+export const styles = createSheet(`:host {display: grid;grid-template-rows: auto minmax(0, 1fr) auto auto auto;max-block-size: var(--chat-max-block-size, none);min-block-size: 0;}[part="header"] {grid-row: 1;}[part="log"] {grid-row: 2;}[part="resume"] {grid-row: 3;}[part="status"] {grid-row: 4;}[part="composer"] {grid-row: 5;}[part="log"] {display: flex;flex-direction: column;scrollbar-color: var(--helix-color-border) transparent;scrollbar-width: thin;gap: var(--chat-gap, var(--helix-space-md));overflow-y: auto;padding-block: var(--helix-space-md);padding-inline: var(--chat-padding-inline, var(--helix-space-md));justify-content: safe flex-end;}[part="header"][hidden],
 [part="resume"][hidden],
-[part="composer"][hidden] {
-display: none;
-}
-
-[part="status"][data-empty] {
-padding-block: 0;
-}
-
-[part="header"] {
-
---helix-size-tag: var(--helix-size-tag-sm);
-
-align-items: center;
-border-block-end: var(--helix-border-thin) solid var(--chat-rule, var(--helix-color-border));
-display: flex;
-gap: var(--helix-space-sm);
-justify-content: space-between;
-min-block-size: var(--helix-size-control);
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--chat-padding-inline, var(--helix-space-md));
-}
-
-[part="header"] > [part="actions"] {
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-
-align-items: center;
-display: flex;
-flex: 0 0 auto;
-gap: var(--helix-space-2xs);
-}
-
-[part="header"] > [part="actions"][hidden] {
-display: none;
-}
-
-[part="resume"] {
-display: grid;
-justify-items: center;
-margin-block-start: calc(var(--helix-space-xl) * -1);
-pointer-events: none;
-position: relative;
-}
-
-[part="resume"] > * {
-pointer-events: auto;
-}
-
-[part="resume"] slot::slotted(*) {
-
-border: var(--chat-resume-border-width, var(--helix-border-floating)) solid
-var(--chat-resume-border-color, var(--helix-color-border));
-box-shadow: var(--chat-resume-shadow, var(--helix-shadow-floating));
-}
-
-[part="status"] {
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-padding-block-end: var(--helix-space-2xs);
-padding-block-start: var(--helix-space-xs);
-padding-inline: var(--chat-padding-inline, var(--helix-space-md));
-}
-
-[part="composer"] {
-padding-block: var(--helix-space-sm);
-padding-inline: var(--chat-padding-inline, var(--helix-space-md));
-}
-
-[part="empty"],
-[part="loading"] {
---_collection-inset-block: var(--helix-space-lg);
---_collection-inset-inline: var(--helix-space-none);
-}
-
-[part="history"] {
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-margin: var(--helix-space-none);
-padding-block: var(--helix-space-lg);
-text-align: center;
-}
-
-[part="log"][data-windowed] {
-gap: var(--helix-space-none);
-}
-
-[part="turn"] {
-flex: none;
-}
-
-[part="turn"]:not([data-index="0"]) {
-padding-block-start: var(--chat-gap, var(--helix-space-md));
-}
-
-@media print {
-:host {
-max-block-size: none;
-}
-
-[part="log"] {
-overflow-y: visible;
-}
-
-[part="composer"],
-[part="resume"] {
-display: none;
-}
-}`);
+[part="composer"][hidden] {display: none;}[part="status"][data-empty] {padding-block: 0;}[part="header"] {--helix-size-tag: var(--helix-size-tag-sm);align-items: center;border-block-end: var(--helix-border-thin) solid var(--chat-rule, var(--helix-color-border));display: flex;gap: var(--helix-space-sm);justify-content: space-between;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="header"] > [part="actions"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs);}[part="header"] > [part="actions"][hidden] {display: none;}[part="resume"] {display: grid;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1);pointer-events: none;position: relative;}[part="resume"] > * {pointer-events: auto;}[part="resume"] slot::slotted(*) {border: var(--chat-resume-border-width, var(--helix-border-floating)) solid
+var(--chat-resume-border-color, var(--helix-color-border));box-shadow: var(--chat-resume-shadow, var(--helix-shadow-floating));}[part="status"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-block-end: var(--helix-space-2xs);padding-block-start: var(--helix-space-xs);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="typing"] {align-items: center;color: var(--chat-typing-color, var(--helix-color-foreground-muted));display: inline-flex;gap: var(--chat-typing-gap, var(--helix-space-xs));}[part="composer"] {padding-block: var(--helix-space-sm);padding-inline: var(--chat-padding-inline, var(--helix-space-md));}[part="empty"],
+[part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-none);}[part="history"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-lg);text-align: center;}[part="log"][data-windowed] {gap: var(--helix-space-none);}[part="turn"] {flex: none;}[part="turn"]:not([data-index="0"]) {padding-block-start: var(--chat-gap, var(--helix-space-md));}@media print {:host {max-block-size: none;}[part="log"] {overflow-y: visible;}[part="composer"],
+[part="resume"] {display: none;}}`);

package/dist/chat/root/chat-root.d.ts

@@ -36,6 +36,8 @@ import '../message/chat-message.js';
  * @cssproperty --chat-resume-border-width - Width of the edge around the resume control, which sits over content.
  * @cssproperty --chat-resume-shadow - Shadow under the resume control, which floats over the transcript.
  * @cssproperty --chat-rule - The hairline under the header.
+ * @cssproperty --chat-typing-color - The color of the dots and the words that say who is typing.
+ * @cssproperty --chat-typing-gap - The space between the dots and the words that say who is typing.
  */
 export declare class HelixChat extends HelixHeadlessChat {
     static tier: string;

package/dist/chat/root/chat-root.js

@@ -8,12 +8,13 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessChat } from '@fusion.dev/helix-headless/chat';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
+import { styles as typingStyles } from '../typing.css.js';
 import { styles } from './chat-root.css.js';
 import '../composer/chat-composer.js';
 import '../message/chat-message.js';
 let HelixChat = class HelixChat extends HelixHeadlessChat {
     static { this.tier = 'helix-'; }
-    static { this.styles = [liveStyles, collectionStateStyles, styles]; }
+    static { this.styles = [liveStyles, collectionStateStyles, typingStyles, styles]; }
 };
 HelixChat = __decorate([
     customElement('helix-chat')

package/dist/chat/typing.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/chat/typing.css.js

@@ -0,0 +1,25 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="indicator"] {--_chat-typing-cycle: 1.2s;animation: helix-chat-typing var(--_chat-typing-cycle) infinite ease-in-out;background-image:
+radial-gradient(circle closest-side, currentColor 90%, transparent),
+radial-gradient(circle closest-side, currentColor 90%, transparent),
+radial-gradient(circle closest-side, currentColor 90%, transparent);background-position:
+0% 50%,
+50% 50%,
+100% 50%;background-repeat: no-repeat;background-size:
+20% 30%,
+20% 30%,
+20% 30%;block-size: 1lh;display: block;inline-size: 1.75em;opacity: 0.7;}@keyframes helix-chat-typing {0%,
+60%,
+100% {background-position:
+0% 50%,
+50% 50%,
+100% 50%;}20% {background-position:
+0% 10%,
+50% 50%,
+100% 50%;}33% {background-position:
+0% 50%,
+50% 10%,
+100% 50%;}46% {background-position:
+0% 50%,
+50% 50%,
+100% 10%;}}@media (prefers-reduced-motion: reduce) {[part="indicator"] {animation: none;}}`);