@heyramzi/ui 2.17.0 → 2.19.0

package/README.md

@@ -95,6 +95,34 @@ Many components take their content through snippets, so you keep full control:
 <Button variant="outline" size="sm" onclick={save}>Save</Button>
 ```
 
+## Sound
+
+`@heyramzi/ui/lib/sound` gives the kit's controls interaction sounds from
+[cuelume](https://cuelume.dev). They're off until the person turns them on, and the choice is
+saved in their browser. Start it once in the root layout:
+
+```svelte
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { startSound } from "@heyramzi/ui/lib/sound";
+
+  onMount(() => startSound());
+</script>
+```
+
+It reads each control's `data-slot`, so buttons tap, switches toggle, dialog triggers open and
+menu items select without a prop. `SLOT_CUES` in `src/lib/sound.ts` is the full map. The rest:
+
+- **The setting.** Call `setSound(on)` from the click that flips your Sound toggle. It resolves
+  `false` when the browser still blocks audio. `soundOn()` reads the saved choice.
+- **Outcomes.** `cue("success")` after a save, `cue("error")` on a failure, `cue("ready")` when a
+  long job lands. It plays nothing while sound is off.
+- **Recording.** `const resume = silence()` before the mic opens and `resume()` after, or the
+  sounds end up in the take.
+- **Opting out.** `data-sound="off"` on an element quiets it and everything inside. A control
+  that sets its own `data-cuelume-*` attribute keeps it. Text fields are quiet unless you add
+  `data-cuelume-type`.
+
 ## shadcn-svelte
 
 The primitives in `src/shadcn` are copies of

package/dist/lib/sound.js

@@ -0,0 +1,167 @@
+/**
+* Interface sounds from cuelume, off until the person turns them on. Call `startSound()` once in
+* the root layout: it marks the kit's controls by their `data-slot` and binds them, so no
+* component carries a sound attribute of its own. Outcomes (saved, failed, ready) are `cue()`
+* calls in the app. The cue for each job follows https://cuelume.dev/agents.md, "Which cue?".
+*/
+import { bind, play, setEnabled, unlock } from "cuelume";
+/**
+* Which kit slots sound, and how. Text fields are left out on purpose: a keystroke sound in every
+* input is too much for tools people type in all day, so an app opts a field in with
+* `data-cuelume-type`.
+*/
+export const SLOT_CUES = {
+	button: { binding: "tap" },
+	"code-block-copy-button": {
+		binding: "tap",
+		cue: "success",
+		subtle: true
+	},
+	switch: { binding: "toggle" },
+	checkbox: { binding: "toggle" },
+	toggle: { binding: "toggle" },
+	"sidebar-trigger": {
+		binding: "toggle",
+		subtle: true
+	},
+	"dialog-trigger": { binding: "open" },
+	"sheet-trigger": { binding: "open" },
+	"alert-dialog-trigger": { binding: "open" },
+	"popover-trigger": {
+		binding: "open",
+		subtle: true
+	},
+	"dropdown-menu-trigger": {
+		binding: "open",
+		subtle: true
+	},
+	"select-trigger": {
+		binding: "open",
+		subtle: true
+	},
+	"dialog-close": { binding: "close" },
+	"sheet-close": { binding: "close" },
+	"popover-close": {
+		binding: "close",
+		subtle: true
+	},
+	"select-item": { binding: "select" },
+	"dropdown-menu-item": { binding: "select" },
+	"dropdown-menu-checkbox-item": { binding: "select" },
+	"dropdown-menu-radio-item": { binding: "select" },
+	"context-menu-item": { binding: "select" },
+	"command-item": { binding: "select" },
+	"tabs-trigger": { binding: "select" },
+	"radio-group-item": { binding: "select" },
+	"toggle-group-item": { binding: "select" }
+};
+const BINDING_ATTRS = [
+	"tap",
+	"type",
+	"select",
+	"toggle",
+	"open",
+	"close",
+	"navigate"
+].map((b) => `data-cuelume-${b}`);
+const STORAGE_KEY = "heyramzi:sound";
+/** The saved setting, read on first use so a server render never touches storage. */
+let wanted;
+/** Open `silence()` holds. Any one of them mutes everything, whatever the setting says. */
+let holds = 0;
+function readSaved() {
+	try {
+		return localStorage.getItem(STORAGE_KEY) === "on";
+	} catch {
+		return false;
+	}
+}
+function audible() {
+	wanted ??= typeof window === "undefined" ? false : readSaved();
+	return wanted && holds === 0;
+}
+function apply() {
+	setEnabled(audible());
+}
+/** Whether the person turned sound on. A `silence()` hold doesn't change it. */
+export function soundOn() {
+	audible();
+	return wanted === true;
+}
+/**
+* Turns sound on or off and saves it. Call it from the click that flips the setting: turning on
+* unlocks audio inside that gesture, and the result says whether the browser lets it play.
+*/
+export function setSound(on) {
+	wanted = on;
+	try {
+		localStorage.setItem(STORAGE_KEY, on ? "on" : "off");
+	} catch {}
+	apply();
+	return on ? unlock() : Promise.resolve(false);
+}
+/**
+* Mutes every cue until the returned function runs, such as while the mic records, so no sound
+* lands in the take. Holds stack; each release counts once.
+*/
+export function silence() {
+	holds++;
+	apply();
+	let released = false;
+	return () => {
+		if (released) return;
+		released = true;
+		holds--;
+		apply();
+	};
+}
+/** Plays a cue for an outcome the app knows about, only while sound is on and nothing silences it. */
+export function cue(name, options) {
+	if (audible()) play(name, options);
+}
+function mark(el) {
+	const slot = SLOT_CUES[el.getAttribute("data-slot") ?? ""];
+	if (!slot || el.closest("[data-sound=\"off\"]")) return;
+	// A control that names its own cue keeps it.
+	if (BINDING_ATTRS.some((attr) => el.hasAttribute(attr))) return;
+	el.setAttribute(`data-cuelume-${slot.binding}`, slot.cue ?? "");
+	if (slot.subtle && !el.hasAttribute("data-cuelume-emphasis")) {
+		el.setAttribute("data-cuelume-emphasis", "subtle");
+	}
+}
+/** Stamps the cuelume attribute on every kit control under `root`, `root` included. */
+export function markSlots(root) {
+	if (root instanceof Element && root.hasAttribute("data-slot")) mark(root);
+	for (const el of root.querySelectorAll("[data-slot]")) mark(el);
+}
+/**
+* Binds the kit's controls under `root` and keeps marking the ones that mount later. Safe on the
+* server, where it does nothing. Returns the function that stops it.
+*/
+export function startSound(root = globalThis.document) {
+	if (typeof window === "undefined" || !root) return () => {};
+	apply();
+	markSlots(root);
+	const observer = new MutationObserver((records) => {
+		for (const record of records) {
+			if (record.type === "attributes") {
+				if (record.target instanceof Element) mark(record.target);
+				continue;
+			}
+			for (const node of record.addedNodes) {
+				if (node instanceof Element) markSlots(node);
+			}
+		}
+	});
+	observer.observe(root, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ["data-slot"]
+	});
+	const unbind = bind(root);
+	return () => {
+		observer.disconnect();
+		unbind();
+	};
+}

package/dist/thread/logic.js

@@ -57,28 +57,17 @@ export function resolveThreadLabels(overrides) {
 export function fillCount(label, count) {
 	return label.replaceAll("{count}", String(count));
 }
-/**
-* Conversations, events and the host's entries in time order, each run of events between two
-* other items as one item.
-*/
-export function interleave(nodes, events, entries = []) {
-	const timed = [
-		...nodes.map((node, index) => ({
-			at: at(node.comment.createdAt),
-			index,
-			node
-		})),
-		...events.map((event, index) => ({
-			at: at(event.at),
-			index: nodes.length + index,
-			event
-		})),
-		...entries.map((entry, index) => ({
-			at: at(entry.at),
-			index: nodes.length + events.length + index,
-			entry
-		}))
-	].toSorted((a, b) => a.at - b.at || a.index - b.index);
+/** Conversations and events in time order, each run of events between two conversations as one item. */
+export function interleave(nodes, events) {
+	const timed = [...nodes.map((node, index) => ({
+		at: at(node.comment.createdAt),
+		index,
+		node
+	})), ...events.map((event, index) => ({
+		at: at(event.at),
+		index: nodes.length + index,
+		event
+	}))].toSorted((a, b) => a.at - b.at || a.index - b.index);
 	const items = [];
 	for (const row of timed) {
 		if ("node" in row) {
@@ -89,14 +78,6 @@ export function interleave(nodes, events, entries = []) {
 			});
 			continue;
 		}
-		if ("entry" in row) {
-			items.push({
-				type: "entry",
-				key: `entry-${row.entry.id}`,
-				entry: row.entry
-			});
-			continue;
-		}
 		const last = items.at(-1);
 		if (last?.type === "events") last.events.push(row.event);
 		else items.push({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.17.0",
+  "version": "2.19.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
@@ -398,6 +398,7 @@
     "@zag-js/svelte": "^1.46.0",
     "@zag-js/tour": "^1.46.0",
     "clsx": "^2.1.1",
+    "cuelume": "^0.2.8",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "layerchart": "^2.9.1",

package/src/components/segmented/segmented-filter.svelte

@@ -13,6 +13,8 @@
 		splitSegments,
 	} from "./collapse.js";
 	import { segmentedTriggerClass } from "./segmented.js";
+	import { Icon } from "../icon/index.js";
+	import { Mark } from "../mark/index.js";
 
 	// =========================
 	// TYPES
@@ -42,6 +44,10 @@
 		max?: number | "none";
 		/** What the menu segment says. Translate at the call site. */
 		moreLabel?: string;
+		/** An option with an `image` or `icon` draws the mark alone, and its label
+		 *  moves to `aria-label` and the hover title. For a toolbar with no room
+		 *  for words, where every mark is a brand people know. */
+		iconOnly?: boolean;
 		class?: string;
 	}
 
@@ -57,6 +63,7 @@
 		block = true,
 		max = SEGMENT_MAX,
 		moreLabel,
+		iconOnly = false,
 		class: className,
 	}: Props = $props();
 
@@ -99,21 +106,39 @@
 	<SegmentedTrack fill={block}>
 		{#each split.visible as option (option.value)}
 			{@const active = value === option.value}
+			{@const markOnly = iconOnly && Boolean(option.image || option.icon)}
 			<button
 				type="button"
 				class={segmentedTriggerClass({ fill: block, active })}
 				onclick={() => pick(option.value)}
 				aria-pressed={active}
+				aria-label={markOnly ? option.label : undefined}
+				title={markOnly ? option.label : undefined}
 			>
-				<Segment
-					label={option.label}
-					count={option.count}
-					icon={option.icon}
-					image={option.image}
-					done={option.done}
-					badge={option.badge}
-					{active}
-				/>
+				<!-- WHY the mark is drawn here, not by `Segment`: `Segment` always
+				     writes the label, and a count or dot beside a bare mark reads as noise. -->
+				{#if markOnly && option.image}
+					<Mark
+						src={option.image}
+						label={option.label}
+						class={cn(
+							"opacity-75 transition-opacity duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-hover/segment:opacity-100",
+							active && "opacity-100",
+						)}
+					/>
+				{:else if markOnly && option.icon}
+					<Icon icon={option.icon} size={16} class="shrink-0" />
+				{:else}
+					<Segment
+						label={option.label}
+						count={option.count}
+						icon={option.icon}
+						image={option.image}
+						done={option.done}
+						badge={option.badge}
+						{active}
+					/>
+				{/if}
 			</button>
 		{/each}
 		{#snippet after()}

package/src/lib/sound.test.ts

@@ -0,0 +1,123 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+
+const cuelume = vi.hoisted(() => ({
+  bind: vi.fn(() => () => {}),
+  play: vi.fn(),
+  setEnabled: vi.fn(),
+  unlock: vi.fn(() => Promise.resolve(true)),
+}));
+vi.mock("cuelume", () => cuelume);
+
+// The module holds the setting and the silence count, so each test loads a fresh copy.
+async function load() {
+  vi.resetModules();
+  return import("./sound.js");
+}
+
+function lastEnabled(): unknown {
+  return cuelume.setEnabled.mock.calls.at(-1)?.[0];
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  document.body.innerHTML = "";
+  for (const fn of Object.values(cuelume)) fn.mockClear();
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("markSlots", () => {
+  it("gives each kit control the binding for its job", async () => {
+    const { markSlots } = await load();
+    document.body.innerHTML = `
+      <button data-slot="button">Save</button>
+      <button data-slot="switch"></button>
+      <button data-slot="dropdown-menu-trigger"></button>
+      <button data-slot="code-block-copy-button"></button>
+      <input data-slot="input" />`;
+    markSlots(document);
+    const [button, sw, menu, copy, input] = document.body.children;
+    expect(button.getAttribute("data-cuelume-tap")).toBe("");
+    expect(sw.hasAttribute("data-cuelume-toggle")).toBe(true);
+    expect(menu.hasAttribute("data-cuelume-open")).toBe(true);
+    expect(menu.getAttribute("data-cuelume-emphasis")).toBe("subtle");
+    expect(copy.getAttribute("data-cuelume-tap")).toBe("success");
+    // Text fields stay quiet unless the app opts one in.
+    expect(input.getAttributeNames().some((n) => n.startsWith("data-cuelume-"))).toBe(false);
+  });
+
+  it("leaves a control alone that names its own cue or sits under data-sound=off", async () => {
+    const { markSlots } = await load();
+    document.body.innerHTML = `
+      <button data-slot="button" data-cuelume-close="">Delete</button>
+      <div data-sound="off"><button data-slot="button">Quiet</button></div>`;
+    markSlots(document);
+    const [own, quiet] = document.querySelectorAll("button");
+    expect(own.hasAttribute("data-cuelume-tap")).toBe(false);
+    expect(quiet.hasAttribute("data-cuelume-tap")).toBe(false);
+  });
+});
+
+describe("startSound", () => {
+  it("binds the root and marks controls that mount later", async () => {
+    const { startSound } = await load();
+    const stop = startSound(document);
+    expect(cuelume.bind).toHaveBeenCalledWith(document);
+    const later = document.createElement("button");
+    later.setAttribute("data-slot", "tabs-trigger");
+    document.body.append(later);
+    await Promise.resolve();
+    expect(later.hasAttribute("data-cuelume-select")).toBe(true);
+    stop();
+  });
+
+  it("starts muted when nothing was saved", async () => {
+    const { startSound, soundOn } = await load();
+    startSound(document)();
+    expect(soundOn()).toBe(false);
+    expect(lastEnabled()).toBe(false);
+  });
+
+  it("starts audible when the person turned sound on before", async () => {
+    localStorage.setItem("heyramzi:sound", "on");
+    const { startSound } = await load();
+    startSound(document)();
+    expect(lastEnabled()).toBe(true);
+  });
+});
+
+describe("setSound, silence and cue", () => {
+  it("saves the choice and unlocks audio only when turning on", async () => {
+    const { setSound } = await load();
+    await expect(setSound(true)).resolves.toBe(true);
+    expect(localStorage.getItem("heyramzi:sound")).toBe("on");
+    expect(cuelume.unlock).toHaveBeenCalledOnce();
+    await expect(setSound(false)).resolves.toBe(false);
+    expect(localStorage.getItem("heyramzi:sound")).toBe("off");
+    expect(cuelume.unlock).toHaveBeenCalledOnce();
+  });
+
+  it("mutes while any hold is open, and a second release changes nothing", async () => {
+    const { setSound, silence, cue } = await load();
+    await setSound(true);
+    const first = silence();
+    const second = silence();
+    cue("success");
+    expect(cuelume.play).not.toHaveBeenCalled();
+    first();
+    first();
+    expect(lastEnabled()).toBe(false);
+    second();
+    expect(lastEnabled()).toBe(true);
+    cue("success", { emphasis: "strong" });
+    expect(cuelume.play).toHaveBeenCalledWith("success", { emphasis: "strong" });
+  });
+
+  it("plays nothing while sound is off", async () => {
+    const { cue } = await load();
+    cue("error");
+    expect(cuelume.play).not.toHaveBeenCalled();
+  });
+});

package/src/lib/sound.ts

@@ -0,0 +1,166 @@
+/**
+ * Interface sounds from cuelume, off until the person turns them on. Call `startSound()` once in
+ * the root layout: it marks the kit's controls by their `data-slot` and binds them, so no
+ * component carries a sound attribute of its own. Outcomes (saved, failed, ready) are `cue()`
+ * calls in the app. The cue for each job follows https://cuelume.dev/agents.md, "Which cue?".
+ */
+import { bind, play, setEnabled, unlock, type PlayOptions, type SoundName } from "cuelume";
+
+type Binding = "tap" | "select" | "toggle" | "open" | "close" | "navigate";
+
+interface SlotCue {
+  binding: Binding;
+  /** Another cue than the binding's own, as `data-cuelume-tap="success"` plays `success`. */
+  cue?: SoundName;
+  subtle?: true;
+}
+
+/**
+ * Which kit slots sound, and how. Text fields are left out on purpose: a keystroke sound in every
+ * input is too much for tools people type in all day, so an app opts a field in with
+ * `data-cuelume-type`.
+ */
+export const SLOT_CUES: Readonly<Record<string, SlotCue>> = {
+  button: { binding: "tap" },
+  "code-block-copy-button": { binding: "tap", cue: "success", subtle: true },
+  switch: { binding: "toggle" },
+  checkbox: { binding: "toggle" },
+  toggle: { binding: "toggle" },
+  "sidebar-trigger": { binding: "toggle", subtle: true },
+  "dialog-trigger": { binding: "open" },
+  "sheet-trigger": { binding: "open" },
+  "alert-dialog-trigger": { binding: "open" },
+  "popover-trigger": { binding: "open", subtle: true },
+  "dropdown-menu-trigger": { binding: "open", subtle: true },
+  "select-trigger": { binding: "open", subtle: true },
+  "dialog-close": { binding: "close" },
+  "sheet-close": { binding: "close" },
+  "popover-close": { binding: "close", subtle: true },
+  "select-item": { binding: "select" },
+  "dropdown-menu-item": { binding: "select" },
+  "dropdown-menu-checkbox-item": { binding: "select" },
+  "dropdown-menu-radio-item": { binding: "select" },
+  "context-menu-item": { binding: "select" },
+  "command-item": { binding: "select" },
+  "tabs-trigger": { binding: "select" },
+  "radio-group-item": { binding: "select" },
+  "toggle-group-item": { binding: "select" },
+};
+
+const BINDING_ATTRS = ["tap", "type", "select", "toggle", "open", "close", "navigate"].map(
+  (b) => `data-cuelume-${b}`,
+);
+const STORAGE_KEY = "heyramzi:sound";
+
+/** The saved setting, read on first use so a server render never touches storage. */
+let wanted: boolean | undefined;
+/** Open `silence()` holds. Any one of them mutes everything, whatever the setting says. */
+let holds = 0;
+
+function readSaved(): boolean {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === "on";
+  } catch {
+    return false;
+  }
+}
+
+function audible(): boolean {
+  wanted ??= typeof window === "undefined" ? false : readSaved();
+  return wanted && holds === 0;
+}
+
+function apply(): void {
+  setEnabled(audible());
+}
+
+/** Whether the person turned sound on. A `silence()` hold doesn't change it. */
+export function soundOn(): boolean {
+  audible();
+  return wanted === true;
+}
+
+/**
+ * Turns sound on or off and saves it. Call it from the click that flips the setting: turning on
+ * unlocks audio inside that gesture, and the result says whether the browser lets it play.
+ */
+export function setSound(on: boolean): Promise<boolean> {
+  wanted = on;
+  try {
+    localStorage.setItem(STORAGE_KEY, on ? "on" : "off");
+  } catch {
+    // Private windows and blocked storage keep the choice for this page only.
+  }
+  apply();
+  return on ? unlock() : Promise.resolve(false);
+}
+
+/**
+ * Mutes every cue until the returned function runs, such as while the mic records, so no sound
+ * lands in the take. Holds stack; each release counts once.
+ */
+export function silence(): () => void {
+  holds++;
+  apply();
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    holds--;
+    apply();
+  };
+}
+
+/** Plays a cue for an outcome the app knows about, only while sound is on and nothing silences it. */
+export function cue(name: SoundName, options?: PlayOptions): void {
+  if (audible()) play(name, options);
+}
+
+function mark(el: Element): void {
+  const slot = SLOT_CUES[el.getAttribute("data-slot") ?? ""];
+  if (!slot || el.closest('[data-sound="off"]')) return;
+  // A control that names its own cue keeps it.
+  if (BINDING_ATTRS.some((attr) => el.hasAttribute(attr))) return;
+  el.setAttribute(`data-cuelume-${slot.binding}`, slot.cue ?? "");
+  if (slot.subtle && !el.hasAttribute("data-cuelume-emphasis")) {
+    el.setAttribute("data-cuelume-emphasis", "subtle");
+  }
+}
+
+/** Stamps the cuelume attribute on every kit control under `root`, `root` included. */
+export function markSlots(root: ParentNode): void {
+  if (root instanceof Element && root.hasAttribute("data-slot")) mark(root);
+  for (const el of root.querySelectorAll("[data-slot]")) mark(el);
+}
+
+/**
+ * Binds the kit's controls under `root` and keeps marking the ones that mount later. Safe on the
+ * server, where it does nothing. Returns the function that stops it.
+ */
+export function startSound(root: ParentNode = globalThis.document): () => void {
+  if (typeof window === "undefined" || !root) return () => {};
+  apply();
+  markSlots(root);
+  const observer = new MutationObserver((records) => {
+    for (const record of records) {
+      if (record.type === "attributes") {
+        if (record.target instanceof Element) mark(record.target);
+        continue;
+      }
+      for (const node of record.addedNodes) {
+        if (node instanceof Element) markSlots(node);
+      }
+    }
+  });
+  observer.observe(root as Node, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-slot"],
+  });
+  const unbind = bind(root);
+  return () => {
+    observer.disconnect();
+    unbind();
+  };
+}

package/src/thread/README.md

@@ -24,8 +24,8 @@ One comment thread for any subject: a task, a project, a doc or a diagram. The t
 - **Resolve.** Pass `onResolve` and each root gets a check. Resolved roots fold away behind a "Show N resolved" button.
 - **Anchor.** `anchor` carries `{ nodeId, dx, dy, x, y }` for a canvas pin. A pinned comment shows a chip, and `onAnchor` fires on a click so the canvas can move to the node. `anchorChip` replaces the chip.
 - **Attachments.** The `attachments` snippet draws under a comment's body.
-- **Events.** `events` takes `ThreadEvent`s (a whole sentence, a time, an optional Phosphor icon) and draws each as one `Trace` line between the conversations, in time order. `whenEvent(event)` formats its time. `interleave(nodes, events, entries)` gives the same order without the component.
-- **Entries.** `entries` takes `{ id, at }` rows that the `entry` snippet draws, such as an agent's run or a message to it, so a comment thread and an agent conversation read as one back-and-forth. `footer` draws above the composer, for a question waiting on an answer. `onPost` decides where a root post goes.
+- **Events.** `events` takes `ThreadEvent`s (a whole sentence, a time, an optional Phosphor icon) and draws each as one `Trace` line between the conversations, in time order. `whenEvent(event)` formats its time. `interleave(nodes, events)` gives the same order without the component.
+- **Footer.** `footer` draws above the composer, such as an agent's question waiting on an answer. `onPost` decides where a root post goes.
 - **Heading.** `heading={false}` keeps the title for screen readers only, for a thread its tab already names.
 - **Long bodies.** A body over 6 lines folds behind `showMore` and `showLess`.
 - **Labels.** Every string comes from `labels`, a partial of `ThreadLabels`. `showResolved` holds a `{count}` slot. `when(comment)` formats the time.

package/src/thread/index.ts

@@ -12,7 +12,6 @@ export type {
   ThreadAuthor,
   ThreadAuthorKind,
   ThreadComment,
-  ThreadEntry,
   ThreadEvent,
   ThreadItem,
   ThreadLabels,

package/src/thread/logic.ts

@@ -1,6 +1,5 @@
 import type {
   ThreadComment,
-  ThreadEntry,
   ThreadEvent,
   ThreadItem,
   ThreadLabels,
@@ -72,23 +71,11 @@ export function fillCount(label: string, count: number): string {
   return label.replaceAll("{count}", String(count));
 }
 
-/**
- * Conversations, events and the host's entries in time order, each run of events between two
- * other items as one item.
- */
-export function interleave(
-  nodes: ThreadNode[],
-  events: ThreadEvent[],
-  entries: ThreadEntry[] = [],
-): ThreadItem[] {
+/** Conversations and events in time order, each run of events between two conversations as one item. */
+export function interleave(nodes: ThreadNode[], events: ThreadEvent[]): ThreadItem[] {
   const timed = [
     ...nodes.map((node, index) => ({ at: at(node.comment.createdAt), index, node })),
     ...events.map((event, index) => ({ at: at(event.at), index: nodes.length + index, event })),
-    ...entries.map((entry, index) => ({
-      at: at(entry.at),
-      index: nodes.length + events.length + index,
-      entry,
-    })),
   ].toSorted((a, b) => a.at - b.at || a.index - b.index);
   const items: ThreadItem[] = [];
   for (const row of timed) {
@@ -96,10 +83,6 @@ export function interleave(
       items.push({ type: "node", key: row.node.comment.id, node: row.node });
       continue;
     }
-    if ("entry" in row) {
-      items.push({ type: "entry", key: `entry-${row.entry.id}`, entry: row.entry });
-      continue;
-    }
     const last = items.at(-1);
     if (last?.type === "events") last.events.push(row.event);
     else items.push({ type: "events", key: row.event.id, events: [row.event] });

package/src/thread/thread.svelte

@@ -15,13 +15,7 @@
 		resolveThreadLabels,
 		resolvedCount,
 	} from "./logic.js";
-	import type {
-		ThreadComment,
-		ThreadEntry,
-		ThreadEvent,
-		ThreadLabels,
-		ThreadPost,
-	} from "./types.js";
+	import type { ThreadComment, ThreadEvent, ThreadLabels, ThreadPost } from "./types.js";
 
 	interface Props {
 		comments: ThreadComment[];
@@ -54,9 +48,6 @@
 		canEdit?: (comment: ThreadComment) => boolean;
 		/** False hides the visible title, for a thread already named by its tab. Screen readers still get it. */
 		heading?: boolean;
-		/** Rows the host draws through `entry`, placed in time among the comments. */
-		entries?: ThreadEntry[];
-		entry?: Snippet<[ThreadEntry]>;
 		/** Drawn above the composer, such as a question waiting on an answer. */
 		footer?: Snippet;
 		class?: string;
@@ -80,8 +71,6 @@
 		onAnchor,
 		canEdit = () => false,
 		heading = true,
-		entries = [],
-		entry,
 		footer,
 		class: className,
 	}: Props = $props();
@@ -91,7 +80,7 @@
 	let resolved = $derived(resolvedCount(nodes));
 	let showResolved = $state(false);
 	let shown = $derived(showResolved ? nodes : nodes.filter((node) => !node.comment.resolved));
-	let items = $derived(interleave(shown, events, entry ? entries : []));
+	let items = $derived(interleave(shown, events));
 
 	function shortDate(at: string): string {
 		return new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(new Date(at));
@@ -321,8 +310,6 @@
 			{#each items as item (item.key)}
 				{#if item.type === "events"}
 					<li><ThreadEvents events={item.events} when={whenEvent} /></li>
-				{:else if item.type === "entry"}
-					<li class="min-w-0">{@render entry?.(item.entry)}</li>
 				{:else}
 					{@const node = item.node}
 					<li

package/src/thread/types.ts

@@ -59,18 +59,10 @@ export type ThreadEvent = {
   icon?: PhosphorIcon;
 };
 
-/** A row the host draws itself, placed in time among the comments, such as an agent's run or a message to it. */
-export type ThreadEntry = {
-  id: string;
-  /** ISO timestamp. */
-  at: string;
-};
-
-/** The thread in time order: a conversation, a run of events between two of them, or a host's entry. */
+/** The thread in time order: a conversation, or a run of events between two of them. */
 export type ThreadItem =
   | { type: "node"; key: string; node: ThreadNode }
-  | { type: "events"; key: string; events: ThreadEvent[] }
-  | { type: "entry"; key: string; entry: ThreadEntry };
+  | { type: "events"; key: string; events: ThreadEvent[] };
 
 export type ThreadLabels = {
   title: string;