inline-chat-kit 0.60.0 → 0.61.1

package/CHANGELOG.md

@@ -8,6 +8,84 @@ The versions before 1.0 follow the pre-release convention: **a breaking change
 or new public API bumps the minor**, and the patch is for fixes. Anything that would break an
 existing install is called out under **Breaking**, with what to do about it.
 
+## 0.61.1 — 2026-10-15
+
+### Fixed
+
+The opening of a conversation, measured in the playground at 1280×800.
+
+- **The openers stay while somebody types.** They went at the first letter —
+  title, description and seven openers in one frame — and inline the
+  composer jumped with them, from the middle of the page to its top-right
+  corner, 560px wide to 320. They stay now until a message is sent, and the
+  composer stays in their column.
+- **Then they step out of the way.** On a send — typed, or an opener pressed
+  — the openers leave to the left, blurred, one after another: 160ms each,
+  25ms apart, ease-out. They leave the layout at once, so the message goes
+  straight to where it belongs instead of waiting for them.
+- **Pinning the composer to the bottom moves the openers with it.** They
+  jumped 93px in a frame while the composer travelled; they ride its spring
+  now. And the composer arrives without going past: it overshot the bottom
+  edge by 12px and came back. A box that is still a box moves on its spring
+  critically damped; a sent message keeps the spring it had.
+- **Inline too, an answer starts once its question has landed.** The first
+  one was drawn under openers that were still leaving. 0.60.0 did this
+  docked only.
+
+
+A host's own button, which 0.60.0 turned down. The reason it was turned down
+still holds for one button, and only that one is kept back. Nothing changes for
+a host that passes nothing: every story screenshotted against 0.60.0 in both
+themes, 138 stories, identical but for the one that sets its own
+`--ick-btn-radius` — its composer is concentric now, which is the point — and,
+on a touch screen, the composer's "+" and microphone, below.
+
+### Added
+
+- **`components={{ Button }}` on `ChatExperience`**, and `ComponentsProvider`
+  for pieces assembled by hand, in the way of `LabelsProvider`. The host's
+  button is drawn for every role in theming.md's table but one: the
+  composer's send / stop / save, whose glyph morphs between the three inside
+  the button. That one stays the kit's and is themed by the tokens, as before.
+  - The kit keeps the layout and the behaviour, the host's button paints. It
+    is drawn inside a box the kit sizes from `--ick-control-*` (square when
+    it is only an icon), places, animates, and gives the 44px touch area —
+    the ring past the button's edge is the box's, and a press there is handed
+    to the button. The box sets the button's height over the host's own.
+  - `KitButtonProps` is the contract: `kitRole`, `variant`, `size`, `shape`
+    (`square`, `pill`, `default`), `icon`, `iconRight`, `children`,
+    `disabled`, `loading`, `pressed`, `type="button"`, the handlers, the
+    `aria-*` and `data-ick-*` attributes, and the ref. `kitRole` rather than
+    `role`, because a button that spread a `role` of `"send"` onto itself
+    would be an ARIA error — the ARIA `role` still arrives where there is one,
+    `menuitem` in the header's menu.
+  - The header's menu items go through it too. Its back control and an
+    action with an `href` are links and stay `<a>`.
+  - In development, a host's button that does not forward its ref, is not a
+    `<button>`, drops the `aria-*` or `data-ick-*` it was given, or looks no
+    different with keyboard focus is named in the console, once per role.
+    `process.env.NODE_ENV === "production"` returns before any of it.
+- **`--ick-composer-control`**: the composer's send glyph, "+" and
+  microphone, which were 28px written into the component — four widths
+  Motion springs open, and an overlay offset by 36 and 44 — are
+  `--ick-control-s` now, and a host can move them on their own.
+- **The composer's corner is concentric with its buttons**: `--ick-input-radius`
+  is `--ick-btn-radius` plus the surface's 8px padding, up to
+  `--ick-radius-xl`. A pill button leaves it at the 24 it was; a host's 6px
+  button gets a 14px composer instead of a 6px button in a 24px pill.
+- **`BringYourOwnButton` stories** — the chat and the hand-assembled pieces
+  with a shadcn-style button (a 6px corner, 36px tall, its own focus ring),
+  and the same pieces with nothing provided — and "Bring your own button" in
+  theming.md: tokens, then per-role CSS, then the component.
+
+### Fixed
+
+- **On a touch screen the "+" and the microphone are round.** Their boxes
+  were 28 written in and their buttons as wide as `size="s"`, which the touch
+  block raises to 32: a 32 × 28 oval beside a 32 × 32 send, overflowing its
+  slot by 4px. All three are 32 × 32 there now, in 32px slots. On a pointer
+  nothing moves.
+
 ## 0.60.0 — 2026-10-15
 
 Reported from a host running the kit in production, each one worked around

package/README.md

@@ -1472,6 +1472,18 @@ existing call sites keep working. Its `s` / `m` / `l` map to `m` / `l` / `xl`.
 Neither takes a dark-mode prop: the theme is a token swap on an ancestor. See
 [theming.md](./theming.md).
 
+**Your own button.** `components={{ Button }}` on `ChatExperience` — or
+`ComponentsProvider` around pieces assembled by hand — draws your button
+wherever the kit draws one, except the composer's send / stop / save glyph,
+which morphs inside its button and stays the kit's. The kit keeps the layout
+(the box, its size from `--ick-control-*`, motion, the 44px touch area) and
+your button paints. It must forward its `ref`, render a `<button>` and spread
+the `aria-*` and `data-*` it is given; the props it receives are
+`KitButtonProps`, and `kitRole` says what each one is for. Set
+`--ick-btn-radius` to your corner too: the kit's glyph and the composer around
+it follow it. Tokens first, per-role CSS second, the component third — see
+"Bring your own button" in [theming.md](./theming.md#bring-your-own-button).
+
 ## Labels: every word the kit says
 
 Every component takes a `labels` prop, and `ChatExperience` and `ChatTurnRow`

package/dist/Button/KitButton.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+import { ButtonProps } from './Button';
+import { KitButtonProps, KitButtonRole, KitButtonShape } from '../components/components';
+export interface KitButtonUse extends Omit<ButtonProps, "type"> {
+    /** What it is for. Written to `data-ick-role`, and handed to a host's button. */
+    kitRole: Exclude<KitButtonRole, "send" | "stop" | "save">;
+    /** Worked out from the content when not given: an icon alone is `square`. */
+    shape?: KitButtonShape;
+    /** The layout box a host's button sits in. The kit's own button ignores it. */
+    boxClassName?: string;
+    boxStyle?: CSSProperties;
+    /** Given to a host's button instead of what the kit's own is given. */
+    hostProps?: Partial<Pick<KitButtonProps, "icon" | "iconRight" | "children">>;
+}
+/**
+ * Every button the kit draws but the composer's morphing glyph.
+ *
+ * With no host button in `ComponentsProvider` this is the kit's `Button`,
+ * given exactly what it was given before the slot existed — the same element,
+ * the same attributes, so nothing about the default changes.
+ *
+ * With one, the host's button is drawn inside a box the kit lays out: the box
+ * has the size, takes the place in the row, and carries the 44px hit area on
+ * a touch screen; the host's button fills it and paints it. `className` and
+ * `style` here are the kit's paint and stay with the kit's button; where they
+ * also place it, the call site says so again as `boxClassName` / `boxStyle`.
+ */
+export declare const KitButton: import('react').ForwardRefExoticComponent<KitButtonUse & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Button/hostButtonChecks.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+/** For tests: forget which roles have been warned about. */
+export declare function resetHostButtonWarnings(): void;
+/**
+ * In development, checks a host's button against the contract in
+ * `KitButtonProps`, and says so once per role when it falls short:
+ *
+ * - its ref is not forwarded (`forwardRef`), so the kit cannot focus it;
+ * - what it renders is not a `<button>`;
+ * - it drops the `aria-*` or `data-ick-*` the kit gave it;
+ * - keyboard focus changes nothing about how it looks.
+ *
+ * `role` is `undefined` for the kit's own button, which is not checked.
+ */
+export declare function useHostButtonChecks(role: string | undefined, box: RefObject<HTMLElement | null>, element: RefObject<HTMLElement | null>, forwarded: RefObject<boolean>, given: Record<string, unknown>): void;

package/dist/ChatExperience/ChatExperience.d.ts

@@ -8,6 +8,7 @@ import { TranscribeHandler } from '../voice/useVoiceInput';
 import { CustomPart, CustomPartContext, TurnPartUpdate } from '../turnParts/turnParts';
 import { ComposerMenuItem } from '../ChatInput/AddCardsOverlay';
 import { ChatLabels } from '../labels/labels';
+import { ChatComponents } from '../components/components';
 import { Answer } from '../QuestionCard/types';
 import { Decision } from '../Approval/Approval';
 /**
@@ -91,6 +92,15 @@ export interface ChatExperienceProps {
      * an inline object costs nothing — it is compared by content.
      */
     labels?: ChatLabels;
+    /**
+     * The host's own components, drawn in place of the kit's. `Button` is used
+     * for every button the chat draws except the composer's send / stop / save
+     * glyph, whose animation lives in the button. The kit keeps the layout —
+     * size, place, motion, hit area — and your button paints. It must forward
+     * its ref and render a `<button>`; see `KitButtonProps`. Keep it stable:
+     * declared outside a render, not inside one.
+     */
+    components?: ChatComponents;
     /**
      * The header's built-in actions. `true` (the default) is the theme toggle
      * and Share; `false` is neither; a list keeps only those named. The saved
@@ -235,4 +245,4 @@ export interface ChatExperienceProps {
     onDecideApproval?: (write: PartWriter, turnId: string, partId: string, decision: Decision) => void;
     className?: string;
 }
-export declare function ChatExperience({ onSend, chat: hostChat, renderPart, labels, headerActions: builtInActions, composerMenu, onTranscribe, onThreadReply, title: titleProp, backHref, backLabel, actions, placeholder, empty, contextTotal, contextBase, artifact, openArtifactId: openArtifactProp, onOpenArtifactChange, pane: paneMode, surface, composer, fill: fillMode, theme: themeProp, onThemeChange, cursor, selectionToggle, highlights: marking, bookmarks, anchorOffset, endOffset, animationConfig, foldMotion, feedDelay, onAnswerQuestion, onEditQuestion, onDecideApproval, className, }: ChatExperienceProps): import("react").JSX.Element;
+export declare function ChatExperience({ onSend, chat: hostChat, renderPart, labels, components, headerActions: builtInActions, composerMenu, onTranscribe, onThreadReply, title: titleProp, backHref, backLabel, actions, placeholder, empty, contextTotal, contextBase, artifact, openArtifactId: openArtifactProp, onOpenArtifactChange, pane: paneMode, surface, composer, fill: fillMode, theme: themeProp, onThemeChange, cursor, selectionToggle, highlights: marking, bookmarks, anchorOffset, endOffset, animationConfig, foldMotion, feedDelay, onAnswerQuestion, onEditQuestion, onDecideApproval, className, }: ChatExperienceProps): import("react").JSX.Element;