@heyramzi/ui 3.4.0 → 3.6.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/copy/clipboard.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
-import { copyRichText, copyText } from "./clipboard.js";
+import { copyRichText, copyText, htmlToPlainText } from "./clipboard.js";
 
 // Mock navigator.clipboard
 const mockClipboard = {
@@ -204,3 +204,19 @@ describe("htmlToPlainText (server-side)", () => {
     expect(mockWriteText).toHaveBeenCalledWith("Hello World & Friends <3>");
   });
 });
+
+describe("htmlToPlainText (browser)", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("parses into an inert document, so an onerror in the markup never runs", async () => {
+    const win = window as Window & { __fired?: boolean };
+    win.__fired = false;
+    const createElement = vi.spyOn(document, "createElement");
+    expect(htmlToPlainText('<img src="x" onerror="window.__fired=true">hi')).toBe("hi");
+    await new Promise((done) => setTimeout(done, 10));
+    expect(win.__fired).toBe(false);
+    // jsdom loads no images, so the onerror can't fire here either way: the live-document
+    // element the old code built is what a real browser runs the handler on.
+    expect(createElement).not.toHaveBeenCalled();
+  });
+});

package/src/components/copy/clipboard.ts

@@ -47,7 +47,7 @@ export function htmlToPlainText(html: string): string {
       .replace(/>/g, ">")
       .trim();
   }
-  const div = document.createElement("div");
-  div.innerHTML = html;
-  return div.textContent || div.innerText || "";
+  // A DOMParser document has no browsing context, so nothing in the markup loads or runs.
+  // An element from document.createElement belongs to the live page: an <img onerror> fires.
+  return new DOMParser().parseFromString(html, "text/html").body.textContent ?? "";
 }

package/src/components/flag/codes.test.ts

@@ -0,0 +1,30 @@
+import { readdirSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vite-plus/test";
+import { FLAG_CODES, flagCode } from "./codes.js";
+
+const dir = join(dirname(fileURLToPath(import.meta.url)), "flags");
+
+describe("flag codes", () => {
+  it("lists exactly the SVG files shipped", () => {
+    const files = readdirSync(dir)
+      .filter((name) => name.endsWith(".svg"))
+      .map((name) => name.slice(0, -4));
+    expect(FLAG_CODES.toSorted()).toEqual(files.toSorted());
+    expect(FLAG_CODES).toHaveLength(250);
+  });
+
+  it("knows Kosovo, which ISO 3166-1 leaves user-assigned", () => {
+    expect(flagCode("xk")).toBe("XK");
+  });
+
+  it("takes any case and refuses what it has no file for", () => {
+    expect(flagCode("jp")).toBe("JP");
+    expect(flagCode(" Pl ")).toBe("PL");
+    expect(flagCode("")).toBeNull();
+    expect(flagCode(undefined)).toBeNull();
+    expect(flagCode("ZZ")).toBeNull();
+    expect(flagCode("../FR")).toBeNull();
+  });
+});

package/src/components/flag/codes.ts

@@ -0,0 +1,25 @@
+/** Where the host serves the flag files. `flagAssets()` from `@heyramzi/ui/vite` serves them there. */
+export const FLAG_BASE = "/flags";
+
+/**
+ * The 249 ISO 3166-1 alpha-2 codes plus XK (Kosovo, user-assigned but in common use), each with
+ * a file in `./flags`, from country-flag-icons 1.6.20 (MIT).
+ */
+export const FLAG_CODES: readonly string[] = (
+  "AD AE AF AG AI AL AM AO AQ AR AS AT AU AW AX AZ BA BB BD BE BF BG BH BI BJ BL BM BN BO BQ BR " +
+  "BS BT BV BW BY BZ CA CC CD CF CG CH CI CK CL CM CN CO CR CU CV CW CX CY CZ DE DJ DK DM DO DZ " +
+  "EC EE EG EH ER ES ET FI FJ FK FM FO FR GA GB GD GE GF GG GH GI GL GM GN GP GQ GR GS GT GU GW " +
+  "GY HK HM HN HR HT HU ID IE IL IM IN IO IQ IR IS IT JE JM JO JP KE KG KH KI KM KN KP KR KW KY " +
+  "KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MF MG MH MK ML MM MN MO MP MQ MR MS MT MU MV " +
+  "MW MX MY MZ NA NC NE NF NG NI NL NO NP NR NU NZ OM PA PE PF PG PH PK PL PM PN PR PS PT PW PY " +
+  "QA RE RO RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SV SX SY SZ TC TD TF TG " +
+  "TH TJ TK TL TM TN TO TR TT TV TW TZ UA UG UM US UY UZ VA VC VE VG VI VN VU WF WS XK YE YT ZA ZM ZW"
+).split(" ");
+
+const KNOWN = new Set(FLAG_CODES);
+
+/** The code in capitals when a flag exists for it, else null. */
+export function flagCode(code: string | null | undefined): string | null {
+  const upper = code?.trim().toUpperCase() ?? "";
+  return KNOWN.has(upper) ? upper : null;
+}

package/src/components/flag/flag.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "../../lib/utils.js";
+	import { FLAG_BASE, flagCode } from "./codes.js";
+
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		/** ISO 3166-1 alpha-2 code, or XK for Kosovo, any case. Unknown or empty renders nothing. */
+		code: string | null | undefined;
+		/** Names the flag for a reader. Leave it out when the country name sits beside it. */
+		label?: string;
+		/** Where the host serves `<CODE>.svg`. */
+		base?: string;
+		class?: string;
+	}
+
+	let { code, label, base = FLAG_BASE, class: className }: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let file = $derived(flagCode(code));
+	// A file the host doesn't serve hides the flag instead of showing a broken image.
+	let failedFor = $state<string | null>(null);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if file && failedFor !== file}
+	<img
+		src="{base}/{file}.svg"
+		alt={label ?? ""}
+		aria-hidden={label ? undefined : "true"}
+		width="3"
+		height="2"
+		loading="lazy"
+		decoding="async"
+		draggable="false"
+		onerror={() => (failedFor = file)}
+		class={cn(
+			"inline-block aspect-[3/2] h-[1em] w-auto max-w-none shrink-0 object-cover align-[-0.125em]",
+			"rounded-[min(var(--radius-sm),0.15em)] outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/15",
+			className,
+		)}
+	/>
+{/if}

package/src/components/flag/flag.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    /** ISO 3166-1 alpha-2 code, or XK for Kosovo, any case. Unknown or empty renders nothing. */
+    code: string | null | undefined;
+    /** Names the flag for a reader. Leave it out when the country name sits beside it. */
+    label?: string;
+    /** Where the host serves `<CODE>.svg`. */
+    base?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/flag/flags/AD.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#fedd00" d="M0 0h513v342H0z"/><path fill="#10069f" d="M0 0h171v342H0z"/><path fill="#d50032" d="M342 0h171v342H342z"/><path fill="#D80027" d="M198.9 113.6H256v64.8h-57.1z"/><g stroke="#D80027" stroke-width="7"><path d="M267.6 113.6v64.7M284.2 113.6v64.7M300.8 113.6v64.7"/></g><g stroke="#D80027" stroke-width="5"><path d="M247.4 178.4v64.7M234.1 178.4v64.7M220.8 178.5v53.9M207.1 178.5v47.1"/></g><path fill="#FFDA44" d="m199.9 146 27.6-32.4 28.5 32.3-28.1 32.4z"/><path fill="#BC8B00" d="M182.2 95.9v92.2c0 34.3 27.3 54.2 48.6 64.5-.8 1.4 25.1 8.3 25.1 8.3s25.9-6.9 25.1-8.3c21.4-10.3 48.6-30.1 48.6-64.5V95.9H182.2zm129.9 92.2c0 16.9-10 29.4-32.8 43.9-8.6 5.5-17.5 9-23.3 11-5.8-2-14.7-5.5-23.3-11-22.8-14.5-32.8-28-32.8-43.9v-74.5h112.2v74.5z"/><path fill="#D80027" d="M264.4 188.9h29.5v8.6h-29.5zM264.4 206.5h29.5v8.6h-29.5z"/></svg>

package/src/components/flag/flags/AE.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#FFF" d="M0 0h513v342H0z"/><path fill="#00843d" d="M0 0h513v114H0z"/><path d="M0 228h513v114H0z"/><path fill="#c8102e" d="M0 0h171v342H0z"/></svg>

package/src/components/flag/flags/AF.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#D32011" d="M0 0h513v342H0z"/><path fill="#007A36" d="M342 0h171v342H342z"/><path d="M0 0h171v342H0z"/><path fill="#FFF" d="M256.5 131.3c-17.5 0-31.8 14.3-31.8 31.8v47.7h63.6v-47.7c0-17.7-14.3-31.8-31.8-31.8z"/><path fill="#FFF" d="M256.5 93c-43.1 0-78 34.9-78 78s34.9 77.9 78 77.9 78-34.9 78-78-34.9-77.9-78-77.9zm0 142.4c-35.6 0-64.5-28.9-64.5-64.5s28.9-64.5 64.5-64.5 64.5 29 64.5 64.6c0 35.6-28.9 64.4-64.5 64.4z"/></svg>

package/src/components/flag/flags/AG.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path d="M0 0h513v342H0z"/><path fill="#0072c6" d="M88.8 136.5c-2.2 12.9-3.4 26.2-3.4 39.8 0 13.6 1.2 27 3.4 39.8L256 228.3l167.2-12.1c2.2-12.9 3.4-26.2 3.4-39.8s-1.2-27-3.4-39.8"/><path fill="#FFF" d="M423.2 219H88.8c15.8 69.8 84.7 122.3 167.2 122.3S407.4 288.8 423.2 219z"/><path fill="#FFDA44" d="M365.9 136.5H146.1l44.9-21.1-23.9-43.5 48.8 9.4L222 32l34 36.2L290 32l6.1 49.3 48.8-9.4-23.9 43.5z"/><g fill="#ce1126"><path d="M256.5 342 0 0v342z"/><path d="M513 342V0L256 342z"/></g></svg>

package/src/components/flag/flags/AI.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342"><path fill="#012169" d="M0 0h513v342H0z"/><path fill="#FFF" d="M454.8 265.38c7.94-10.93 13.24-24.27 13.24-40.42V104.89a59.754 59.754 0 0 1-36.02 12.01c-19.64 0-37.07-9.43-48.03-24.01-10.95 14.58-28.39 24.01-48.03 24.01-13.52 0-25.99-4.47-36.02-12v120.06c0 16.16 5.3 29.5 13.24 40.42H454.8z"/><path fill="#9cf" d="M310.23 260.98C332.65 296.96 384 309 384 309s51.35-12.04 73.77-48.02H310.23z"/><g fill="#f90"><path d="M396.66 172.21c.32 1.42 8.72 10.17 17.56 20.15 1.39 1.57-8.74 12.63-6.91 12.59 4.75-.12 19.27-17.26 19.34 6.65.05 15.94-30 27.51-30 27.51h17.47l.65 14.96s4.97-13.34 7.59-16.57c8.1-9.97 20.18-30.07 34.59-27.1 14.41 2.97-13.66-13.92-13.66-13.92s-5.2-15.19-16.63-16.97c-10.06-1.57-14.29-2.51-26.64-7.3-1.68-.65-3.88-2.32-3.36 0z"/><path d="M359.69 198.69c1.07-.99 4.46-12.63 8.69-25.28.67-1.99 15.31 1.27 14.35-.3-2.47-4.06-24.58-8.08-3.9-20.08 13.79-8 38.82 12.27 38.82 12.27l-8.72-15.14 12.64-8.03s-14.05 2.35-18.14 1.69c-12.68-2.04-36.13-2.48-40.75-16.45-4.62-13.97-5.25 18.79-5.25 18.79s-10.56 12.08-6.4 22.88c3.66 9.5 4.96 13.64 6.97 26.73.29 1.79-.06 4.53 1.69 2.92z"/><path d="M395.67 219.87c-1.39-.43-13.16 2.49-26.22 5.18-2.06.42-6.59-13.88-7.47-12.26-2.27 4.17 5.36 25.31-15.41 13.45-13.84-7.91-8.89-39.73-8.89-39.73l-8.71 15.14-13.29-6.9s9.09 10.96 10.57 14.84c4.6 11.99 16 32.49 6.24 43.49-9.76 11.01 18.88-4.9 18.88-4.9s15.76 3.07 23-5.96c6.38-7.94 9.3-11.14 19.61-19.45 1.43-1.12 3.97-2.19 1.69-2.9z"/></g><path fill="#012169" d="M0 0h256.5v171H0z"/><g fill="#FFF"><path d="M256.5 0v30.6l-45.3 25.2h45.3v59.4h-59.2l59.2 32.9V171h-26.7l-73.7-40.9V171h-55.7v-48.7L12.8 171H0v-30.6l45.3-25.2H0V55.8h59.2L0 22.9V0h26.7l73.7 40.9V0h55.7v48.7L243.7 0z"/><path d="M156.1 115.2 256.5 171v-15.8l-72-40zM100.4 55.8 0 0v15.8l72 40z"/></g><g fill="#D80027"><path d="M144.3 0h-32.1v69.5H0v32h112.2V171h32.1v-69.5h112.2v-32H144.3z"/><path d="M156.1 115.2 256.5 171v-15.8l-72-40zM72 115.2l-72 40V171l100.4-55.8zM100.4 55.8 0 0v15.8l72 40zM184.5 55.8l72-40V0L156.1 55.8z"/></g></svg>