@heyramzi/ui 3.5.0 → 3.7.0

package/src/ai/chat-window/chat-window.test.ts

@@ -0,0 +1,80 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import ChatGptWindow from "./ChatGptWindow.svelte";
+import ClaudeWindow from "./ClaudeWindow.svelte";
+import { REVEAL_BEATS, revealSchedule } from "./reveal.svelte.js";
+import type { ChatMessage } from "./types.js";
+
+const messages: ChatMessage[] = [
+  { role: "user", text: "How many hours did the team log this week?" },
+  { role: "tool", name: "Timesheet", label: "Read week 45" },
+  { role: "assistant", text: "The team logged 132 hours." },
+];
+
+function render(Component: typeof ChatGptWindow | typeof ClaudeWindow, props: object) {
+  const target = document.createElement("div");
+  const app = mount(Component, { target, props: { title: "Hours", messages, ...props } });
+  flushSync();
+  const root = target.firstElementChild as HTMLElement;
+  return { root, done: () => void unmount(app) };
+}
+
+describe("revealSchedule", () => {
+  it("gives each role its beats in order and ends after the last", () => {
+    const { beats, end } = revealSchedule(["user", "tool", "assistant"]);
+    expect(beats.map((b) => `${b.index}:${b.phase}`)).toEqual([
+      "0:done",
+      "1:running",
+      "1:done",
+      "2:thinking",
+      "2:streaming",
+      "2:done",
+    ]);
+    expect(beats[0].at).toBe(REVEAL_BEATS.lead);
+    expect(end).toBeGreaterThan(beats.at(-1)?.at ?? 0);
+    expect(beats.every((b, i) => i === 0 || b.at > beats[i - 1].at)).toBe(true);
+  });
+
+  it("is empty for an empty conversation", () => {
+    expect(revealSchedule([])).toEqual({ beats: [], end: REVEAL_BEATS.lead });
+  });
+});
+
+describe.each([
+  ["ChatGptWindow", ChatGptWindow, "ChatGPT: Hours", "ChatGPT said:"],
+  ["ClaudeWindow", ClaudeWindow, "Claude: Hours", "Claude said:"],
+] as const)("%s", (_, Component, label, said) => {
+  it("is a labelled figure a reader gets as text, with no focusable part", () => {
+    const { root, done } = render(Component, {});
+    expect(root.tagName).toBe("FIGURE");
+    expect(root.getAttribute("aria-label")).toBe(label);
+    const thread = root.querySelector("ol")?.textContent ?? "";
+    expect(thread).toContain("You said:");
+    expect(thread).toContain(said);
+    expect(thread).toContain("The team logged 132 hours.");
+    expect(root.querySelectorAll("button, a, input, textarea, [tabindex]")).toHaveLength(0);
+    done();
+  });
+
+  it("names the connector call with its label, finished when nothing plays", () => {
+    const { root, done } = render(Component, {});
+    const call = root.querySelector(".call")?.textContent ?? "";
+    expect(call).toContain("Used Timesheet");
+    expect(call).toContain("Read week 45");
+    expect(root.querySelectorAll('[data-phase="done"]')).toHaveLength(3);
+    done();
+  });
+
+  it("prints a site's own strings and theme", () => {
+    const { root, done } = render(Component, {
+      theme: "dark",
+      placeholder: "Posez votre question",
+      labels: { done: "{name} utilisé", userSaid: "Vous avez dit :" },
+    });
+    expect(root.dataset.mode).toBe("dark");
+    expect(root.textContent).toContain("Posez votre question");
+    expect(root.querySelector(".call")?.textContent).toContain("Timesheet utilisé");
+    expect(root.querySelector("ol")?.textContent).toContain("Vous avez dit :");
+    done();
+  });
+});

package/src/ai/chat-window/icons/LICENSE

@@ -0,0 +1,24 @@
+Where these icons come from
+
+chatgpt-*.svg, except chatgpt-sidebar.svg: Lucide 0.460.0 (lucide-static), ISC licence below.
+Each file names the Lucide icon it is.
+chatgpt-sidebar.svg and claude-*.svg, except claude-spark.svg: drawn for this package.
+claude-spark.svg: Simple Icons "claude", CC0 1.0 (no rights reserved).
+
+Lucide licence, as shipped in lucide-static 0.460.0:
+
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/src/ai/chat-window/icons/chatgpt-chevron.svg

@@ -0,0 +1,2 @@
+<!-- @license lucide-static v0.460.0 - ISC (chevron-down) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>

package/src/ai/chat-window/icons/chatgpt-copy.svg

@@ -0,0 +1,2 @@
+<!-- @license lucide-static v0.460.0 - ISC (copy) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/src/ai/chat-window/icons/chatgpt-mic.svg

@@ -0,0 +1,2 @@
+<!-- @license lucide-static v0.460.0 - ISC (mic) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>

package/src/ai/chat-window/icons/chatgpt-more.svg

@@ -0,0 +1,2 @@
+<!-- @license lucide-static v0.460.0 - ISC (ellipsis) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>

package/src/ai/chat-window/icons/chatgpt-plus.svg

@@ -0,0 +1,2 @@
+<!-- @license lucide-static v0.460.0 - ISC (plus) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>

package/src/ai/chat-window/icons/chatgpt-regenerate.svg

@@ -0,0 +1,2 @@
+<!-- @license lucide-static v0.460.0 - ISC (refresh-cw) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>

package/src/ai/chat-window/icons/chatgpt-share.svg

@@ -0,0 +1,2 @@
+<!-- @license lucide-static v0.460.0 - ISC (share) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>

package/src/ai/chat-window/icons/chatgpt-sidebar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h16"/><path d="M4 16h10"/></svg>

package/src/ai/chat-window/icons/chatgpt-thumb.svg

@@ -0,0 +1,2 @@
+<!-- @license lucide-static v0.460.0 - ISC (thumbs-up) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>

package/src/ai/chat-window/icons/chatgpt-voice.svg

@@ -0,0 +1,2 @@
+<!-- @license lucide-static v0.460.0 - ISC (audio-lines) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>

package/src/ai/chat-window/icons/claude-chevron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 8 4 4 4-4"/></svg>

package/src/ai/chat-window/icons/claude-copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7V5.5A1.5 1.5 0 0 1 8.5 4h6A1.5 1.5 0 0 1 16 5.5v6a1.5 1.5 0 0 1-1.5 1.5H13M5.5 7h6A1.5 1.5 0 0 1 13 8.5v6a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 4 14.5v-6A1.5 1.5 0 0 1 5.5 7"/></svg>

package/src/ai/chat-window/icons/claude-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4.5v11M4.5 10h11"/></svg>

package/src/ai/chat-window/icons/claude-retry.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10a6 6 0 1 1-1.76-4.24M16 3.5V6.5h-3"/></svg>

package/src/ai/chat-window/icons/claude-send.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 15.5v-11M5.5 9 10 4.5 14.5 9"/></svg>

package/src/ai/chat-window/icons/claude-sidebar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5.5A2 2 0 0 1 5.5 3.5h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zM8 3.5v13"/></svg>

package/src/ai/chat-window/icons/claude-sliders.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6.5h6m4 0h2M4 13.5h2m4 0h6M12 4.5v4M8 11.5v4"/></svg>

package/src/ai/chat-window/icons/claude-spark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" fill="black"/></svg>

package/src/ai/chat-window/icons/claude-thumb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9v7.5h-2a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1zm0 0 3-6a2 2 0 0 1 2 2v2.5h3.6a1.5 1.5 0 0 1 1.47 1.8l-1.2 6A1.5 1.5 0 0 1 13.9 16.5H6.5"/></svg>

package/src/ai/chat-window/icons.ts

@@ -0,0 +1,46 @@
+// Each glyph is a file a CSS mask paints in the current colour. Sources and licences: icons/LICENSE.
+
+import gptChevron from "./icons/chatgpt-chevron.svg";
+import gptCopy from "./icons/chatgpt-copy.svg";
+import gptMic from "./icons/chatgpt-mic.svg";
+import gptMore from "./icons/chatgpt-more.svg";
+import gptPlus from "./icons/chatgpt-plus.svg";
+import gptRegenerate from "./icons/chatgpt-regenerate.svg";
+import gptShare from "./icons/chatgpt-share.svg";
+import gptSidebar from "./icons/chatgpt-sidebar.svg";
+import gptThumb from "./icons/chatgpt-thumb.svg";
+import gptVoice from "./icons/chatgpt-voice.svg";
+import claudeChevron from "./icons/claude-chevron.svg";
+import claudeCopy from "./icons/claude-copy.svg";
+import claudePlus from "./icons/claude-plus.svg";
+import claudeRetry from "./icons/claude-retry.svg";
+import claudeSend from "./icons/claude-send.svg";
+import claudeSidebar from "./icons/claude-sidebar.svg";
+import claudeSliders from "./icons/claude-sliders.svg";
+import claudeSpark from "./icons/claude-spark.svg";
+import claudeThumb from "./icons/claude-thumb.svg";
+
+export const CHATGPT_ICONS = {
+  chevron: gptChevron,
+  copy: gptCopy,
+  mic: gptMic,
+  more: gptMore,
+  plus: gptPlus,
+  regenerate: gptRegenerate,
+  share: gptShare,
+  sidebar: gptSidebar,
+  thumb: gptThumb,
+  voice: gptVoice,
+} as const;
+
+export const CLAUDE_ICONS = {
+  chevron: claudeChevron,
+  copy: claudeCopy,
+  plus: claudePlus,
+  retry: claudeRetry,
+  send: claudeSend,
+  sidebar: claudeSidebar,
+  sliders: claudeSliders,
+  spark: claudeSpark,
+  thumb: claudeThumb,
+} as const;

package/src/ai/chat-window/index.ts

@@ -0,0 +1,26 @@
+import ChatGptWindow from "./ChatGptWindow.svelte";
+import ClaudeWindow from "./ClaudeWindow.svelte";
+
+export type { ChatGptWindowProps } from "./ChatGptWindow.svelte";
+export type { ClaudeWindowProps } from "./ClaudeWindow.svelte";
+export {
+  CHATGPT_LABELS,
+  CLAUDE_LABELS,
+  type ChatGptLabels,
+  type ClaudeLabels,
+} from "./labels.js";
+export {
+  REVEAL_BEATS,
+  revealSchedule,
+  type RevealBeat,
+} from "./reveal.svelte.js";
+export type {
+  ChatAssistantMessage,
+  ChatMessage,
+  ChatPhase,
+  ChatRole,
+  ChatTheme,
+  ChatToolMessage,
+  ChatUserMessage,
+} from "./types.js";
+export { ChatGptWindow, ClaudeWindow };

package/src/ai/chat-window/labels.ts

@@ -0,0 +1,39 @@
+// The strings each window prints itself, in a .ts module: a tsc consumer reads .svelte as default-only.
+
+/** Every string the ChatGPT window prints itself. `{name}` is the connector's name. */
+export interface ChatGptLabels {
+  running: string;
+  done: string;
+  share: string;
+  disclaimer: string;
+  userSaid: string;
+  assistantSaid: string;
+}
+
+export const CHATGPT_LABELS: ChatGptLabels = {
+  running: "Calling {name}",
+  done: "Used {name}",
+  share: "Share",
+  disclaimer: "ChatGPT can make mistakes. Check important info.",
+  userSaid: "You said:",
+  assistantSaid: "ChatGPT said:",
+};
+
+/** Every string the Claude window prints itself. `{name}` is the connector's name. */
+export interface ClaudeLabels {
+  running: string;
+  done: string;
+  share: string;
+  disclaimer: string;
+  userSaid: string;
+  assistantSaid: string;
+}
+
+export const CLAUDE_LABELS: ClaudeLabels = {
+  running: "Using {name}",
+  done: "Used {name}",
+  share: "Share",
+  disclaimer: "Claude can make mistakes. Please double-check responses.",
+  userSaid: "You said:",
+  assistantSaid: "Claude said:",
+};

package/src/ai/chat-window/reveal.svelte.ts

@@ -0,0 +1,106 @@
+import { untrack } from "svelte";
+import type { ChatPhase, ChatRole } from "./types.js";
+
+/** Milliseconds each beat holds, read as one conversation's pacing, not a transition. */
+export const REVEAL_BEATS = {
+  lead: 400,
+  user: 900,
+  thinking: 900,
+  stream: 1500,
+  running: 1300,
+  after: 350,
+} as const;
+
+export interface RevealBeat {
+  at: number;
+  index: number;
+  phase: ChatPhase;
+}
+
+/** The timeline for a conversation: when each message enters and settles, and when it ends. */
+export function revealSchedule(
+  roles: readonly ChatRole[],
+  beats: typeof REVEAL_BEATS = REVEAL_BEATS,
+): { beats: RevealBeat[]; end: number } {
+  const out: RevealBeat[] = [];
+  let t = beats.lead;
+  roles.forEach((role, index) => {
+    if (role === "user") {
+      out.push({ at: t, index, phase: "done" });
+      t += beats.user;
+    } else if (role === "assistant") {
+      out.push({ at: t, index, phase: "thinking" });
+      t += beats.thinking;
+      out.push({ at: t, index, phase: "streaming" });
+      t += beats.stream;
+      out.push({ at: t, index, phase: "done" });
+      t += beats.after;
+    } else {
+      out.push({ at: t, index, phase: "running" });
+      t += beats.running;
+      out.push({ at: t, index, phase: "done" });
+      t += beats.after;
+    }
+  });
+  return { beats: out, end: t };
+}
+
+interface RevealOptions {
+  roles: readonly ChatRole[];
+  enabled: boolean;
+  active: boolean;
+  hold: number;
+  ondone?: () => void;
+}
+
+/**
+ * Plays a conversation once the window is on screen and `active`, again each time `active` turns on.
+ * Renders finished for SSR, no JavaScript and reduced motion.
+ */
+export function createReveal(options: () => RevealOptions) {
+  let phases = $state<ChatPhase[]>([]);
+  let node = $state<HTMLElement | null>(null);
+  let seen = $state(false);
+
+  $effect(() => {
+    const { enabled } = options();
+    if (!node || !enabled || seen) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          seen = true;
+          io.disconnect();
+        }
+      },
+      { threshold: 0.35 },
+    );
+    io.observe(node);
+    return () => io.disconnect();
+  });
+
+  $effect(() => {
+    const { enabled, active } = options();
+    if (!enabled || !active || !seen) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const { roles, hold, ondone } = untrack(options);
+    const { beats, end } = revealSchedule(roles);
+    phases = roles.map(() => "hidden");
+    const timers = beats.map((b) => setTimeout(() => (phases[b.index] = b.phase), b.at));
+    timers.push(setTimeout(() => ondone?.(), end + hold));
+    return () => {
+      timers.forEach(clearTimeout);
+      phases = [];
+    };
+  });
+
+  return {
+    /** A message's phase; `done` when nothing is playing. */
+    phase: (index: number): ChatPhase => phases[index] ?? "done",
+    /** Attach to the window's root, so the reveal waits until it scrolls into view. */
+    attach: (el: HTMLElement) => {
+      node = el;
+      return () => (node = null);
+    },
+    streamMs: REVEAL_BEATS.stream,
+  };
+}

package/src/ai/chat-window/types.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from "svelte";
+
+/** What the person typed. */
+export interface ChatUserMessage {
+  role: "user";
+  text: string;
+}
+
+/** The model's answer: plain text, or a snippet for a table, a figure or a list. */
+export interface ChatAssistantMessage {
+  role: "assistant";
+  text?: string;
+  content?: Snippet;
+}
+
+/** One call to a connector, drawn as the product draws it. */
+export interface ChatToolMessage {
+  role: "tool";
+  /** The connector or app, as the product names it ("Locameublé"). */
+  name: string;
+  /** What the call did, short ("Read the 2026 result"). */
+  label?: string;
+  /** The connector's mark, about 16 to 20px. */
+  icon?: Snippet;
+  /** Or a URL for it, drawn as a small rounded image. */
+  iconSrc?: string;
+}
+
+export type ChatMessage = ChatUserMessage | ChatAssistantMessage | ChatToolMessage;
+
+export type ChatRole = ChatMessage["role"];
+
+/** `auto` follows the page: a `.dark` or `data-theme` ancestor, else the system setting. */
+export type ChatTheme = "light" | "dark" | "auto";
+
+/** Where one message stands while the reveal plays. */
+export type ChatPhase = "hidden" | "thinking" | "streaming" | "running" | "done";
+
+/** Fills `{name}` in a label such as "Used {name}". */
+export function fillName(template: string, name: string): string {
+  return template.replaceAll("{name}", name);
+}

package/src/components/open-in/open-in.svelte

@@ -14,8 +14,8 @@
 	}
 
 	/** `chip` is the bordered inline tag, `button` sits in a header beside other
-	 *  buttons, `icon` is the bare mark for a dense row. */
-	export type OpenInVariant = "chip" | "button" | "icon";
+	 *  buttons. A bare-mark form was cut: at 20px it failed WCAG 2.5.8. */
+	export type OpenInVariant = "chip" | "button";
 	export type OpenInSize = "sm" | "default";
 </script>
 
@@ -86,22 +86,21 @@
 		class={cn(
 			variant === "button"
 				? buttonVariants({ variant: "outline", size: size === "sm" ? "sm" : "default" })
-				: variant === "icon"
-					? "inline-flex shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-					: cn(
-							"inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-							size === "sm" ? "px-1.5 py-0.5 text-2xs" : "px-2 py-1 text-xs",
-						),
-			variant === "icon" && (size === "sm" ? "size-5" : "size-6"),
+				: cn(
+						"inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+						// WHY the button heights: the sm chip was 19px, under the 24px target
+						// floor. Under a thumb it grows to 40 and 44, and the sm hit area to 44.
+						size === "sm"
+							? "relative h-7 px-2 text-2xs after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,1.5rem)] after:w-[max(100%,1.5rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:h-10 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)]"
+							: "h-8 px-2.5 text-xs any-pointer-coarse:h-11 any-pointer-coarse:px-3",
+					),
 			className,
 		)}
 	>
 		<Icon aria-hidden="true" size={iconSize} />
-		{#if variant !== "icon"}
-			{text}
-			<!-- The one thing the mark can't say: this leaves the app. It stays muted
-				     so the eye lands on the tool name first. -->
-			<ArrowSquareOut aria-hidden="true" size={iconSize} class="text-muted-foreground" />
-		{/if}
+		{text}
+		<!-- The one thing the mark can't say: this leaves the app. It stays muted
+		     so the eye lands on the tool name first. -->
+		<ArrowSquareOut aria-hidden="true" size={iconSize} class="text-muted-foreground" />
 	</a>
 </div>

package/src/components/open-in/open-in.svelte.d.ts

@@ -15,8 +15,8 @@ export interface OpenInTool {
     }>;
 }
 /** `chip` is the bordered inline tag, `button` sits in a header beside other
- *  buttons, `icon` is the bare mark for a dense row. */
-export type OpenInVariant = "chip" | "button" | "icon";
+ *  buttons. A bare-mark form was cut: at 20px it failed WCAG 2.5.8. */
+export type OpenInVariant = "chip" | "button";
 export type OpenInSize = "sm" | "default";
 interface Props {
     /** The tool to link to: its name, accessible sentence and mark. */

package/src/effects/interactive-hover-button/InteractiveHoverButton.svelte

@@ -12,7 +12,8 @@
 		/** `submit` posts the form the button sits in. */
 		type?: "button" | "submit";
 		disabled?: boolean;
-		size?: "default" | "md" | "sm";
+		/** `sm` is 40px for a condensed bar; under a thumb both are 44px. */
+		size?: "default" | "sm";
 		tone?: "ink" | "coral";
 		beam?: boolean;
 		dot?: boolean;
@@ -43,7 +44,6 @@
 	let classes = $derived(
 		[
 			"cta-hover",
-			size === "md" && "cta-hover--md",
 			size === "sm" && "cta-hover--sm",
 			tone === "coral" && "cta-hover--coral",
 			!beam && "cta-hover--no-beam",
@@ -168,28 +168,24 @@
 			pointer-events: none;
 		}
 
-		/* 40px, between 44px and 32px, for a CTA in a condensed bar. 32px is too
-		   small to read as the main action, so only the label shrinks, to 13px. */
-		.cta-hover--md {
+		/* 40px for a CTA in a condensed bar. The old 32px was too small to read as
+		   the main action, so only the label shrinks, to 13px. */
+		.cta-hover--sm {
 			height: 40px;
 			padding: 0 24px;
 			font-size: 13px;
 		}
 
-		.cta-hover--md .cta-hover__dot {
+		.cta-hover--sm .cta-hover__dot {
 			width: 7px;
 			height: 7px;
 		}
 
-		.cta-hover--sm {
-			height: 32px;
-			padding: 0 20px;
-			font-size: 13px;
-		}
-
-		.cta-hover--sm .cta-hover__dot {
-			width: 6px;
-			height: 6px;
+		/* Under a thumb both sizes clear the 44px touch target, as Button does. */
+		@media (any-pointer: coarse) {
+			.cta-hover--sm {
+				height: 44px;
+			}
 		}
 
 		.cta-hover--no-beam::before {
@@ -344,11 +340,39 @@
 			}
 		}
 
+		/* The beam stops, and hover swaps the fill and label in place: no dot
+		   growing out, no label sliding across. */
 		@media (prefers-reduced-motion: reduce) {
 			.cta-hover::before {
 				animation: none;
 				opacity: 0;
 			}
+
+			.cta-hover,
+			.cta-hover__resting,
+			.cta-hover__dot,
+			.cta-hover__label,
+			.cta-hover__reveal,
+			:global(.cta-hover__arrow--inline) {
+				transition-property: opacity, background-color, color;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
+			.cta-hover:hover .cta-hover__dot,
+			.cta-hover:not(.cta-hover--no-dot):hover .cta-hover__resting .cta-hover__label,
+			.cta-hover:not(.cta-hover--no-dot):hover .cta-hover__reveal,
+			.cta-hover--no-dot:hover :global(.cta-hover__arrow--inline) {
+				transform: none;
+			}
+
+			.cta-hover:not(.cta-hover--no-dot):hover::after {
+				background: var(--color-signal-600);
+			}
+
+			.cta-hover--coral:not(.cta-hover--no-dot):hover::after {
+				background: var(--color-ink);
+			}
 		}
 	}
 

package/src/effects/interactive-hover-button/InteractiveHoverButton.svelte.d.ts

@@ -3,7 +3,8 @@ interface Props {
     /** `submit` posts the form the button sits in. */
     type?: "button" | "submit";
     disabled?: boolean;
-    size?: "default" | "md" | "sm";
+    /** `sm` is 40px for a condensed bar; under a thumb both are 44px. */
+    size?: "default" | "sm";
     tone?: "ink" | "coral";
     beam?: boolean;
     dot?: boolean;