@heyramzi/ui 2.24.0 → 3.0.0

package/src/effects/theme-toggle/ThemeToggle.css

@@ -1,183 +1,196 @@
-.theme-toggle:active {
-  transform: scale(0.97);
-}
-
-.theme-toggle--inverted {
-  border: 1px solid color-mix(in oklch, var(--color-background) 30%, transparent);
-  background: color-mix(in oklch, var(--color-background) 8%, transparent);
-  color: color-mix(in oklch, var(--color-background) 70%, transparent);
-}
+@layer theme, base, components, utilities;
 
-@media (hover: hover) and (pointer: fine) {
-  .theme-toggle--inverted:hover {
-    border-color: color-mix(in oklch, var(--color-background) 40%, transparent);
-    background: color-mix(in oklch, var(--color-background) 12%, transparent);
-    color: var(--color-background);
+@layer components {
+  .theme-toggle:active {
+    transform: scale(0.97);
   }
-}
 
-/* The slide variant, a pill track with a moving thumb; a caller sets brand
-   colours through the `--theme-toggle-*` custom properties on this class. */
-.theme-toggle-slide {
-  --tt-thumb: 1.5rem;
-  --tt-pad: 0.25rem;
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: content-box;
-  width: calc(var(--tt-thumb) * 2);
-  height: var(--tt-thumb);
-  padding: var(--tt-pad);
-  border: 0;
-  border-radius: 9999px;
-  cursor: pointer;
-  background: var(
-    --theme-toggle-track,
-    color-mix(in oklch, var(--color-foreground) 10%, transparent)
-  );
-  transition:
-    background-color 300ms,
-    box-shadow 300ms,
-    transform 300ms;
-}
+  .theme-toggle--inverted {
+    border: 1px solid color-mix(in oklch, var(--color-background) 30%, transparent);
+    background: color-mix(in oklch, var(--color-background) 8%, transparent);
+    color: color-mix(in oklch, var(--color-background) 70%, transparent);
+  }
 
-.theme-toggle-slide--lg {
-  --tt-thumb: 2rem;
-}
+  @media (hover: hover) and (pointer: fine) {
+    .theme-toggle--inverted:hover {
+      border-color: color-mix(in oklch, var(--color-background) 40%, transparent);
+      background: color-mix(in oklch, var(--color-background) 12%, transparent);
+      color: var(--color-background);
+    }
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .theme-toggle-slide:hover {
+  /* The slide variant, a pill track with a moving thumb; a caller sets brand
+     colours through the `--theme-toggle-*` custom properties on this class. */
+  .theme-toggle-slide {
+    --tt-thumb: 1.5rem;
+    --tt-pad: 0.25rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: content-box;
+    width: calc(var(--tt-thumb) * 2);
+    height: var(--tt-thumb);
+    padding: var(--tt-pad);
+    border: 0;
+    border-radius: 9999px;
+    cursor: pointer;
     background: var(
-      --theme-toggle-track-hover,
-      color-mix(in oklch, var(--color-foreground) 20%, transparent)
+      --theme-toggle-track,
+      color-mix(in oklch, var(--color-foreground) 10%, transparent)
     );
-    box-shadow: 0 0 15px color-mix(in oklch, var(--theme-toggle-glow, transparent) 30%, transparent);
+    transition:
+      background-color 300ms,
+      box-shadow 300ms,
+      transform 300ms;
   }
 
-  .theme-toggle-slide:hover .theme-toggle-slide__glow {
-    opacity: 1;
+  .theme-toggle-slide--lg {
+    --tt-thumb: 2rem;
   }
-}
 
-.theme-toggle-slide:active {
-  transform: scale(0.97);
-}
+  @media (hover: hover) and (pointer: fine) {
+    .theme-toggle-slide:hover {
+      background: var(
+        --theme-toggle-track-hover,
+        color-mix(in oklch, var(--color-foreground) 20%, transparent)
+      );
+      box-shadow: 0 0 15px
+        color-mix(in oklch, var(--theme-toggle-glow, transparent) 30%, transparent);
+    }
+
+    .theme-toggle-slide:hover .theme-toggle-slide__glow {
+      opacity: 1;
+    }
+  }
 
-.theme-toggle-slide:focus-visible {
-  outline: 2px solid var(--color-ring, var(--color-primary));
-  outline-offset: 2px;
-}
+  .theme-toggle-slide:active {
+    transform: scale(0.97);
+  }
 
-.theme-toggle-slide__glow {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  opacity: 0;
-  background: radial-gradient(
-    circle at var(--tt-glow-x, 25%) 50%,
-    color-mix(in oklch, var(--theme-toggle-glow, transparent) 20%, transparent),
-    transparent 70%
-  );
-  transition: opacity 500ms;
-}
+  .theme-toggle-slide:focus-visible {
+    outline: 2px solid var(--color-ring, var(--color-primary));
+    outline-offset: 2px;
+  }
 
-.theme-toggle-slide[data-state="dark"] {
-  --tt-glow-x: 75%;
-}
+  .theme-toggle-slide__glow {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    opacity: 0;
+    background: radial-gradient(
+      circle at var(--tt-glow-x, 25%) 50%,
+      color-mix(in oklch, var(--theme-toggle-glow, transparent) 20%, transparent),
+      transparent 70%
+    );
+    transition: opacity 500ms;
+  }
 
-.theme-toggle-slide__icon {
-  position: absolute;
-  display: flex;
-  opacity: 0.3;
-  transform: scale(0.75);
-  transition:
-    opacity 300ms,
-    transform 300ms;
-}
+  .theme-toggle-slide[data-state="dark"] {
+    --tt-glow-x: 75%;
+  }
 
-.theme-toggle-slide__icon--sun {
-  left: calc(var(--tt-pad) + (var(--tt-thumb) - 14px) / 2);
-  color: var(--theme-toggle-sun, var(--color-muted-foreground));
-}
+  .theme-toggle-slide__icon {
+    position: absolute;
+    display: flex;
+    opacity: 0.3;
+    transform: scale(0.75);
+    transition:
+      opacity 300ms,
+      transform 300ms;
+  }
 
-.theme-toggle-slide__icon--moon {
-  right: calc(var(--tt-pad) + (var(--tt-thumb) - 14px) / 2);
-  color: var(--theme-toggle-moon, var(--color-muted-foreground));
-}
+  .theme-toggle-slide__icon--sun {
+    left: calc(var(--tt-pad) + (var(--tt-thumb) - 14px) / 2);
+    color: var(--theme-toggle-sun, var(--color-muted-foreground));
+  }
 
-.theme-toggle-slide[data-state="light"] .theme-toggle-slide__icon--sun,
-.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__icon--moon {
-  opacity: 0.7;
-  transform: scale(1);
-}
+  .theme-toggle-slide__icon--moon {
+    right: calc(var(--tt-pad) + (var(--tt-thumb) - 14px) / 2);
+    color: var(--theme-toggle-moon, var(--color-muted-foreground));
+  }
 
-.theme-toggle-slide[data-state="light"] .theme-toggle-slide__icon--sun {
-  animation: theme-toggle-spin 8s linear infinite;
-}
+  .theme-toggle-slide[data-state="light"] .theme-toggle-slide__icon--sun,
+  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__icon--moon {
+    opacity: 0.7;
+    transform: scale(1);
+  }
 
-.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__icon--moon {
-  animation: theme-toggle-wiggle 2s ease-in-out infinite;
-}
+  .theme-toggle-slide[data-state="light"] .theme-toggle-slide__icon--sun {
+    animation: theme-toggle-spin 8s linear infinite;
+  }
 
-.theme-toggle-slide__thumb {
-  --tt-thumb-color: var(--theme-toggle-thumb-light, var(--color-primary));
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--tt-thumb);
-  height: var(--tt-thumb);
-  border-radius: 9999px;
-  background: var(--tt-thumb-color);
-  color: var(--theme-toggle-thumb-icon, var(--color-primary-foreground));
-  box-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
-  transition:
-    transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1),
-    background-color 500ms;
-}
+  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__icon--moon {
+    animation: theme-toggle-wiggle 2s ease-in-out infinite;
+  }
 
-.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__thumb {
-  --tt-thumb-color: var(--theme-toggle-thumb-dark, var(--color-primary));
-  transform: translateX(var(--tt-thumb));
-}
+  .theme-toggle-slide__thumb {
+    --tt-thumb-color: var(--theme-toggle-thumb-light, var(--color-primary));
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--tt-thumb);
+    height: var(--tt-thumb);
+    border-radius: 9999px;
+    background: var(--tt-thumb-color);
+    color: var(--theme-toggle-thumb-icon, var(--color-primary-foreground));
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    transition:
+      transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1),
+      background-color 500ms;
+  }
 
-.theme-toggle-slide__ring {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: color-mix(in oklch, var(--tt-thumb-color) 50%, transparent);
-  animation: theme-toggle-pulse 2s ease-in-out infinite;
-  pointer-events: none;
-}
+  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__thumb {
+    --tt-thumb-color: var(--theme-toggle-thumb-dark, var(--color-primary));
+    transform: translateX(var(--tt-thumb));
+  }
 
-.theme-toggle-slide__mark {
-  position: absolute;
-  transition:
-    opacity 300ms,
-    transform 300ms;
-}
+  .theme-toggle-slide__ring {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: color-mix(in oklch, var(--tt-thumb-color) 50%, transparent);
+    animation: theme-toggle-pulse 2s ease-in-out infinite;
+    pointer-events: none;
+  }
 
-.theme-toggle-slide__mark--sun {
-  opacity: 1;
-  transform: scale(1) rotate(0);
-}
+  .theme-toggle-slide__mark {
+    position: absolute;
+    transition:
+      opacity 300ms,
+      transform 300ms;
+  }
 
-.theme-toggle-slide__mark--moon {
-  opacity: 0;
-  transform: scale(0.9) rotate(-90deg);
-}
+  .theme-toggle-slide__mark--sun {
+    opacity: 1;
+    transform: scale(1) rotate(0);
+  }
 
-.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--sun {
-  opacity: 0;
-  transform: scale(0.9) rotate(90deg);
-}
+  .theme-toggle-slide__mark--moon {
+    opacity: 0;
+    transform: scale(0.9) rotate(-90deg);
+  }
+
+  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--sun {
+    opacity: 0;
+    transform: scale(0.9) rotate(90deg);
+  }
 
-.theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--moon {
-  opacity: 1;
-  transform: scale(1) rotate(0);
+  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--moon {
+    opacity: 1;
+    transform: scale(1) rotate(0);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .theme-toggle-slide,
+    .theme-toggle-slide * {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
 }
 
 @keyframes theme-toggle-spin {
@@ -207,11 +220,3 @@
     opacity: 0.4;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .theme-toggle-slide,
-  .theme-toggle-slide * {
-    animation: none !important;
-    transition: none !important;
-  }
-}

package/src/effects/theme-toggle/ThemeToggle.svelte

@@ -84,15 +84,21 @@
 	>
 		<span class="theme-toggle-slide__glow" aria-hidden="true"></span>
 		<span class="theme-toggle-slide__icon theme-toggle-slide__icon--sun" aria-hidden="true">
-			<Sun size={14} weight="fill" />
+			<Sun aria-hidden="true" size={14} weight="fill" />
 		</span>
 		<span class="theme-toggle-slide__icon theme-toggle-slide__icon--moon" aria-hidden="true">
-			<Moon size={14} weight="fill" />
+			<Moon aria-hidden="true" size={14} weight="fill" />
 		</span>
 		<span class="theme-toggle-slide__thumb" aria-hidden="true">
 			<span class="theme-toggle-slide__ring"></span>
-			<Sun size={14} weight="fill" class="theme-toggle-slide__mark theme-toggle-slide__mark--sun" />
+			<Sun
+				aria-hidden="true"
+				size={14}
+				weight="fill"
+				class="theme-toggle-slide__mark theme-toggle-slide__mark--sun"
+			/>
 			<Moon
+				aria-hidden="true"
 				size={14}
 				weight="fill"
 				class="theme-toggle-slide__mark theme-toggle-slide__mark--moon"
@@ -115,10 +121,10 @@
 			className,
 		)}
 	>
-		<Sun class={iconClass(active === "light", "rotate-90")} />
-		<Moon class={iconClass(active === "dark", "-rotate-90")} />
+		<Sun aria-hidden="true" class={iconClass(active === "light", "rotate-90")} />
+		<Moon aria-hidden="true" class={iconClass(active === "dark", "-rotate-90")} />
 		{#if mode}
-			<Monitor class={iconClass(active === "system", "rotate-90")} />
+			<Monitor aria-hidden="true" class={iconClass(active === "system", "rotate-90")} />
 		{/if}
 		<span class="sr-only">{text}</span>
 	</button>

package/src/effects/theme-toggle/ThemeToggle.svelte.d.ts

@@ -0,0 +1,24 @@
+import "./ThemeToggle.css";
+interface Props {
+    /** Used when `mode` is absent. */
+    isDark?: boolean;
+    /** The icon follows the mode: Sun, Moon or Monitor. The slide variant has no third state, so `system` reads as light. */
+    mode?: "light" | "dark" | "system";
+    /** Fires after the wipe has started. The caller flips the theme here. */
+    onToggle: (event: MouseEvent) => void;
+    /** `slide` is a pill track with a thumb that moves between a sun and a moon. */
+    variant?: "outline" | "ghost" | "inverted" | "slide";
+    /** Alias for `variant="inverted"`. */
+    inverted?: boolean;
+    /** `sm` is 32px tall, `default` is 40px, in every variant. */
+    size?: "default" | "sm";
+    /** Overrides the aria-label and the screen-reader text. */
+    label?: string;
+    title?: string;
+    /** Apply the change without the circular wipe. */
+    skipTransition?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/theme-toggle/index.ts

@@ -0,0 +1 @@
+export { default as ThemeToggle } from "./ThemeToggle.svelte";

package/src/icon-names.test.ts

@@ -0,0 +1,88 @@
+/*
+ * A Phosphor icon renders role="img", so one with no name is a nameless image to a screen reader (axe svg-img-alt, 527 hits on 10 Nov 2026).
+ */
+
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { parse } from "svelte/compiler";
+import { describe, expect, it } from "vite-plus/test";
+
+/** The runner's cwd is the workspace root or the package; find the workspace. */
+function workspaceRoot(): string {
+  let dir = process.cwd();
+  for (;;) {
+    if (existsSync(join(dir, "packages", "ui", "src"))) return dir;
+    const parent = dirname(dir);
+    if (parent === dir) throw new Error("workspace root not found");
+    dir = parent;
+  }
+}
+
+function svelteFiles(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) return svelteFiles(path);
+    return entry.name.endsWith(".svelte") ? [path] : [];
+  });
+}
+
+function phosphorNames(source: string): Set<string> {
+  const names = new Set<string>();
+  for (const match of source.matchAll(/import\s+\{([^}]*)\}\s+from\s+["']phosphor-svelte["']/g)) {
+    for (const part of match[1].split(",")) {
+      const [imported, local = imported] = part.trim().split(/\s+as\s+/);
+      if (imported && !imported.startsWith("type ")) names.add(local.trim());
+    }
+  }
+  for (const match of source.matchAll(
+    /import\s+(\w+)\s+from\s+["']phosphor-svelte\/lib\/\w+["']/g,
+  )) {
+    names.add(match[1]);
+  }
+  return names;
+}
+
+type Node = {
+  type?: string;
+  name?: string;
+  start?: number;
+  attributes?: { name?: string }[];
+  fragment?: { nodes: Node[] };
+};
+
+const NAMING = new Set(["aria-hidden", "aria-label", "aria-labelledby"]);
+
+function unnamedIcons(file: string, root: string): string[] {
+  const source = readFileSync(file, "utf8");
+  const names = phosphorNames(source);
+  if (names.size === 0) return [];
+  const found: string[] = [];
+  const visit = (value: unknown): void => {
+    if (!value || typeof value !== "object") return;
+    if (Array.isArray(value)) return value.forEach(visit);
+    const node = value as Node;
+    if (node.type === "Component" && node.name && names.has(node.name)) {
+      const named = node.attributes?.some((attr) => attr.name && NAMING.has(attr.name));
+      const titled = node.fragment?.nodes.some((child) => child.name === "title");
+      if (!named && !titled) {
+        const line = source.slice(0, node.start).split("\n").length;
+        found.push(`${relative(root, file)}:${line} <${node.name}>`);
+      }
+    }
+    for (const [key, child] of Object.entries(node)) {
+      if (key !== "metadata" && key !== "parent") visit(child);
+    }
+  };
+  visit(parse(source, { modern: true }).fragment);
+  return found;
+}
+
+describe("Phosphor icons", () => {
+  it("are hidden or named at every use", () => {
+    const root = workspaceRoot();
+    const files = [join(root, "packages", "ui", "src"), join(root, "site", "src")].flatMap(
+      svelteFiles,
+    );
+    expect(files.flatMap((file) => unnamedIcons(file, root))).toEqual([]);
+  });
+});

package/src/inbox/index.ts

@@ -26,6 +26,5 @@ export type {
   InboxThread,
 } from "./types.js";
 
-// The approval card a pinned proposal is drawn with, and the types its `proposal` field carries.
+// The approval card a pinned proposal is drawn with. Its `proposal` types come from `./work/inbox`.
 export { default as InboxCard } from "../work/inbox/inbox-card.svelte";
-export type { InboxItem, InboxVerdict } from "../work/inbox/inbox-types.js";

package/src/inbox/thread-inbox.svelte

@@ -510,7 +510,7 @@
 						bind:this={cards[entry.id]}
 						item={entry.proposal!}
 						selected={entry === pinned}
-						onverdict={(verdict) => onDecide?.(verdict, current)}
+						onVerdict={(verdict) => onDecide?.(verdict, current)}
 						{renderProposal}
 						when={(at) => when(at)}
 					/>

package/src/inbox/thread-inbox.svelte.d.ts

@@ -0,0 +1,52 @@
+import { type Snippet } from "svelte";
+import { type ThreadLabels } from "../thread/index.js";
+import type { InboxItem, InboxVerdict } from "../work/inbox/inbox-types.js";
+import { type InboxActor, type InboxEntry, type InboxLabels, type InboxSnooze, type InboxSubject, type InboxThread } from "./types.js";
+interface Props {
+    entries: InboxEntry[];
+    /** The key of the open thread. Without a match the first thread opens. */
+    selected?: string;
+    /** Threads with unread entries come first. */
+    unreadFirst?: boolean;
+    labels?: Partial<InboxLabels>;
+    /** Display names for subject types, such as `{ task: "Tasks" }`. A missing type shows as written. */
+    typeLabels?: Record<string, string>;
+    /** Replaces the default avatar for a person or an agent, drawn in a 24px slot. */
+    avatar?: Snippet<[InboxActor]>;
+    /** A badge for the subject's status, drawn by the host with its own status map. */
+    status?: Snippet<[InboxSubject]>;
+    /** Replaces a pinned proposal's summary lines. */
+    renderProposal?: Snippet<[InboxItem]>;
+    /** Content under an entry's text, such as links to what it mentions. */
+    attachments?: Snippet<[InboxEntry]>;
+    /** The words of the thread under the pinned card, such as its "Activity" heading. */
+    threadLabels?: Partial<ThreadLabels>;
+    /** How a timestamp reads. Defaults to a relative time. */
+    when?: (at: string) => string;
+    onSelect?: (thread: InboxThread) => void;
+    /** `read` is true when the thread had unread entries, so the host marks them all read. */
+    onRead?: (thread: InboxThread, read: boolean) => void;
+    /** Alt+U: mark every thread read. */
+    onReadAll?: () => void;
+    onSnooze?: (request: InboxSnooze) => void;
+    /** The host is passing snoozed threads too, each with `subject.snoozedUntil`. */
+    showSnoozed?: boolean;
+    /** Adds "Show snoozed" to the filter. The host passes the snoozed entries or stops. */
+    onShowSnoozed?: (show: boolean) => void;
+    /** `h` on a snoozed thread brings it back now. */
+    onUnsnooze?: (thread: InboxThread) => void;
+    /** Shift+S on a thread whose `subject.followed` is set. */
+    onUnfollow?: (thread: InboxThread) => void;
+    /**
+     * Backspace: take the thread out of the inbox. The host stops passing its entries, and new
+     * activity can bring it back. A thread holding a pending proposal can't be cleared.
+     */
+    onClear?: (thread: InboxThread) => void;
+    /** Shift+Backspace: clear every thread with nothing unread and no pending proposal. */
+    onClearRead?: (threads: InboxThread[]) => void;
+    onDecide?: (verdict: InboxVerdict, thread: InboxThread) => void;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "selected">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/lib/focus.ts

@@ -0,0 +1,19 @@
+import { tick } from "svelte";
+
+/**
+ * Focuses the first target that takes focus, a selector under root or an element, once Svelte
+ * has rendered. A moved keyed item or opened pane is a new node.
+ */
+export async function focusAfterRender(
+  root: ParentNode | null | undefined,
+  ...targets: (string | HTMLElement | null | undefined)[]
+): Promise<HTMLElement | undefined> {
+  await tick();
+  for (const target of targets) {
+    const el = typeof target === "string" ? root?.querySelector<HTMLElement>(target) : target;
+    if (!el?.isConnected) continue;
+    el.focus();
+    if (document.activeElement === el) return el;
+  }
+  return undefined;
+}

package/src/lib/live-region.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { tick } from "svelte";
+
+	let message = $state("");
+
+	/** Reads text out politely. Clearing first makes the same words read again. */
+	export async function announce(text: string): Promise<void> {
+		message = "";
+		await tick();
+		message = text;
+	}
+</script>
+
+<div class="sr-only" role="status" aria-live="polite">{message}</div>

package/src/lib/live-region.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const $$Component: import("svelte").Component<Record<string, never>, {
+    announce: (text: string) => Promise<void>;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/lib/panel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	/*
-	 * The one titled panel, exported as `DataPanel` from the dashboard and `DetailPanel`
-	 * from list-page. Both drew the same box from `panel.ts` with different props.
+	 * The one titled panel, exported as `DetailPanel` from list-page and used by the
+	 * dashboard too. It draws its box from `panel.ts`.
 	 */
 
 	// =========================