@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,111 @@
+import { HelixHeadlessCarousel } from '@fusion.dev/helix-headless/carousel';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Shows one slide of several, with controls to move between them.
+ *
+ * @description
+ * The track scroll-snaps, so a drag and a trackpad swipe move it with the
+ * browser's own momentum and the controls only have to scroll.
+ *
+ * Slides take the full track by default. `per-view` fits more than one across,
+ * up to five, and is declared on the tier below because it decides how many
+ * positions the track has rather than only how wide a slide is,
+ * which is what a run of cards wants rather than a run of full-width panels.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category layout
+ * @aliases Slider, Gallery, Slideshow
+ * @documentation https://helix.fusion.dev/components/carousel
+ *
+ * @cssproperty --carousel-bleed - Room inside the scroller so a slide's own shadow, border or
+ * focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches
+ * 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more.
+ * @cssproperty --carousel-block-size - Height of a vertical track.
+ * @cssproperty --carousel-gap - Space between slides.
+ */
+export declare class HelixCarousel extends HelixHeadlessCarousel {
+    /**
+     * Which side of the slides the dots sit on.
+     *
+     * Unset is `block-end`, under them. `block-start` puts them above,
+     * `inline-start` and `inline-end` beside, where a run of dots becomes a
+     * column.
+     *
+     * **The sides of the content, not positions along a bar.** This was
+     * `start | center | end`, which answered "where along the row" when the
+     * question is "which edge", and could not say "above" at all. The logical
+     * names rather than `top`/`left`, because the component is already careful
+     * about writing direction everywhere else and an `inline-start` carousel
+     * should put its dots on the right in Arabic without being told.
+     *
+     * Independent of `controlsPlacement`. Both default to the block end, where
+     * they share the row and split it, dots to the start and arrows to the end.
+     * That is the arrangement the old shared bar gave, arrived at by two defaults
+     * rather than by a rule about the pair, so moving one leaves the other alone.
+     */
+    indicatorPlacement?: 'block-end' | 'block-start' | 'inline-end' | 'inline-start';
+    /**
+     * Where along that side the dots sit.
+     *
+     * The second half of the answer to "where do they go". `indicatorPlacement`
+     * says which edge and this says where along it, so the pair spells out the
+     * nine positions a consumer asks for in words: bottom left, bottom center,
+     * top right, and so on. One attribute with nine values was the alternative
+     * and it multiplies rather than composing, since every value has to name both
+     * facts and a consumer changing one has to rewrite the other.
+     *
+     * **One word for both axes, because the edge decides which axis it is.** On a
+     * block edge the run is a row and this is `justify-self`; on an inline edge it
+     * is a column and the same question is `align-self`. A consumer should not
+     * have to know which of those two words their edge wanted.
+     *
+     * Logical, like the placement: `start` is the left in English and the right in
+     * Arabic on a horizontal run, and the top on a vertical one.
+     *
+     * Unset splits the row, dots to the start and arrows to the end, which is
+     * what keeps two items in one grid cell from landing on each other. Beside the
+     * slides, and over them, both center instead, because a column there has
+     * nothing to split the edge with. Putting both groups on the same edge with
+     * the same alignment does overlap them, and always did: that is what the two
+     * different defaults exist to avoid.
+     */
+    indicatorAlign?: 'center' | 'end' | 'start';
+    /**
+     * Which side of the slides the arrows sit on.
+     *
+     * The same four sides as `indicatorPlacement` and the same default, so a
+     * carousel that moves only one of them keeps the other where it was.
+     * `inline-start` or `inline-end` stacks the arrows into a column, which is
+     * what a vertical track usually wants.
+     *
+     * `overlay` puts them on the slides, at the track's own edges, which is what a
+     * full-bleed carousel wants: the slide is the page and the controls are on it
+     * rather than in a bar beneath it. It carries its own treatment with it, a
+     * surface and a shadow under each arrow, because a glyph drawn straight onto a
+     * photograph is legible against about half of one.
+     *
+     * **That was `appearance="hero"` and did not need to be.** A third axis for
+     * something these two already describe: what `hero` meant was "the controls
+     * are over the content", and the surface, the edge-to-edge arrows and the bar
+     * that catches no presses all followed from it rather than being separate
+     * decisions. One fewer property, and the two axes are now the whole of where
+     * a carousel's chrome can go.
+     */
+    controlsPlacement?: 'block-end' | 'block-start' | 'inline-end' | 'inline-start' | 'overlay';
+    /**
+     * Where along that side the arrows sit. See `indicatorAlign`.
+     *
+     * `overlay` answers it too, and the edge there is the whole slide: the bar is
+     * stretched across the picture, so this moves the arrows up and down within
+     * it rather than moving the bar. Centered unless asked otherwise, which is
+     * where an arrow over a photograph belongs.
+     */
+    controlsAlign?: 'center' | 'end' | 'start';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-carousel': HelixCarousel;
+    }
+}

package/dist/carousel/root/carousel-root.js

@@ -0,0 +1,53 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessCarousel } from '@fusion.dev/helix-headless/carousel';
+import { property } from 'lit/decorators.js';
+import { styles } from './carousel-root.css.js';
+/**
+ * @summary Shows one slide of several, with controls to move between them.
+ *
+ * @description
+ * The track scroll-snaps, so a drag and a trackpad swipe move it with the
+ * browser's own momentum and the controls only have to scroll.
+ *
+ * Slides take the full track by default. `per-view` fits more than one across,
+ * up to five, and is declared on the tier below because it decides how many
+ * positions the track has rather than only how wide a slide is,
+ * which is what a run of cards wants rather than a run of full-width panels.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category layout
+ * @aliases Slider, Gallery, Slideshow
+ * @documentation https://helix.fusion.dev/components/carousel
+ *
+ * @cssproperty --carousel-bleed - Room inside the scroller so a slide's own shadow, border or
+ * focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches
+ * 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more.
+ * @cssproperty --carousel-block-size - Height of a vertical track.
+ * @cssproperty --carousel-gap - Space between slides.
+ */
+let HelixCarousel = class HelixCarousel extends HelixHeadlessCarousel {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ attribute: 'indicator-placement', reflect: true })
+], HelixCarousel.prototype, "indicatorPlacement", void 0);
+__decorate([
+    property({ attribute: 'indicator-align', reflect: true })
+], HelixCarousel.prototype, "indicatorAlign", void 0);
+__decorate([
+    property({ attribute: 'controls-placement', reflect: true })
+], HelixCarousel.prototype, "controlsPlacement", void 0);
+__decorate([
+    property({ attribute: 'controls-align', reflect: true })
+], HelixCarousel.prototype, "controlsAlign", void 0);
+HelixCarousel = __decorate([
+    customElement('helix-carousel')
+], HelixCarousel);
+export { HelixCarousel };

package/dist/chat/composer/chat-composer.css.d.ts

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

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

@@ -0,0 +1,103 @@
+// Generated from src/chat/composer/chat-composer.css by `bun run styles`. Do not edit.
+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: var(--helix-size-focus-offset);
+}
+
+[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: var(--helix-space-2xs);
+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-icon: var(--helix-size-icon-sm);
+
+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/composer/chat-composer.d.ts

@@ -0,0 +1,37 @@
+import { HelixHeadlessChatComposer } from '@fusion.dev/helix-headless/chat';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Where the reader writes their turn.
+ *
+ * @description
+ * One row, and the field takes the room. **It grows with the text and stops at a
+ * ceiling**, through `field-sizing: content` rather than a script measuring
+ * anything: where that is not supported the field keeps its rows and scrolls,
+ * which is the answer a textarea has always given. A composer that grows without
+ * a ceiling eats the transcript it belongs to.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @documentation https://helix.fusion.dev/components/chat
+ *
+ * @slot end - Under the field, beside the send control.
+ * @slot start - Under the field, at the leading edge: attachments, a model picker.
+ *
+ * @csspart field - The text field.
+ * @csspart send - The control that offers the turn.
+ * @csspart tools - The row under the field.
+ *
+ * @cssproperty --chat-composer-background-color - Fill behind the composer.
+ * @cssproperty --chat-composer-border-width - The composer's edge, so a theme can remove it.
+ * @cssproperty --chat-composer-max-block-size - How tall the field may grow.
+ */
+export declare class HelixChatComposer extends HelixHeadlessChatComposer {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-chat-composer': HelixChatComposer;
+    }
+}

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

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessChatComposer } from '@fusion.dev/helix-headless/chat';
+import { styles } from './chat-composer.css.js';
+/**
+ * @summary Where the reader writes their turn.
+ *
+ * @description
+ * One row, and the field takes the room. **It grows with the text and stops at a
+ * ceiling**, through `field-sizing: content` rather than a script measuring
+ * anything: where that is not supported the field keeps its rows and scrolls,
+ * which is the answer a textarea has always given. A composer that grows without
+ * a ceiling eats the transcript it belongs to.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @documentation https://helix.fusion.dev/components/chat
+ *
+ * @slot end - Under the field, beside the send control.
+ * @slot start - Under the field, at the leading edge: attachments, a model picker.
+ *
+ * @csspart field - The text field.
+ * @csspart send - The control that offers the turn.
+ * @csspart tools - The row under the field.
+ *
+ * @cssproperty --chat-composer-background-color - Fill behind the composer.
+ * @cssproperty --chat-composer-border-width - The composer's edge, so a theme can remove it.
+ * @cssproperty --chat-composer-max-block-size - How tall the field may grow.
+ */
+let HelixChatComposer = class HelixChatComposer extends HelixHeadlessChatComposer {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixChatComposer = __decorate([
+    customElement('helix-chat-composer')
+], HelixChatComposer);
+export { HelixChatComposer };

package/dist/chat/index.d.ts

@@ -0,0 +1,3 @@
+export { HelixChatComposer } from './composer/chat-composer.js';
+export { HelixChatMessage } from './message/chat-message.js';
+export { HelixChat } from './root/chat-root.js';

package/dist/chat/index.js

@@ -0,0 +1,3 @@
+export { HelixChatComposer } from './composer/chat-composer.js';
+export { HelixChatMessage } from './message/chat-message.js';
+export { HelixChat } from './root/chat-root.js';

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

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

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

@@ -0,0 +1,270 @@
+// Generated from src/chat/message/chat-message.css by `bun run styles`. Do not edit.
+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;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="actions"] {
+transition: none;
+}
+}
+
+[part="actions"] {
+
+--helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));
+--helix-size-icon: var(--helix-size-icon-sm);
+
+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);
+
+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([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%;
+}
+
+:host([state="streaming"]) [part="content"][data-empty]::after {
+animation: helix-chat-typing 1.2s 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;
+content: "";
+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) {
+:host([state="streaming"]) [part="content"][data-empty]::after {
+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);
+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;
+}
+
+:host([state="streaming"]) [part="content"][data-empty]::after {
+display: none;
+}
+}`);