@startsimpli/ui 0.4.115 → 0.4.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.115",
+  "version": "0.4.117",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -47,9 +47,9 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/api": "^0.5.58",
     "@startsimpli/auth": "^0.4.35",
-    "@startsimpli/i18n": "^0.1.3"
+    "@startsimpli/i18n": "^0.1.3",
+    "@startsimpli/api": "^0.5.58"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {
@@ -123,8 +123,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/i18n": "0.1.3",
-    "@startsimpli/realtime": "0.0.2"
+    "@startsimpli/realtime": "0.0.2",
+    "@startsimpli/i18n": "0.1.3"
   },
   "keywords": [
     "ui",

package/src/components/blog/MarkdownRenderer.tsx

@@ -7,6 +7,7 @@ import remarkGfm from 'remark-gfm'
 import React, { useState } from 'react'
 import { Copy, Check } from 'lucide-react'
 import { cn } from '../../utils/cn'
+import { SCROLLER_CLASS, useScrollAffordance } from '../../lib/scroll-affordance'
 
 /**
  * Themed markdown renderer for blog/article content.
@@ -31,6 +32,9 @@ function slugify(text: string): string {
 }
 
 export function MarkdownRenderer({ content, theme = 'light', className }: MarkdownRendererProps) {
+  // Wide GFM tables and long code lines both scroll sideways, and on macOS
+  // neither said so (startsim-5pq7h.1).
+  useScrollAffordance()
   const [copiedCode, setCopiedCode] = useState<string | null>(null)
 
   const copyToClipboard = async (code: string) => {
@@ -98,6 +102,9 @@ export function MarkdownRenderer({ content, theme = 'light', className }: Markdo
                     style={syntaxStyle as Record<string, React.CSSProperties>}
                     language={language}
                     PreTag="div"
+                    // Lands on the PreTag element — the box the theme puts
+                    // `overflow: auto` on, and the one that actually scrolls.
+                    className={SCROLLER_CLASS}
                     customStyle={{ margin: 0, padding: '1rem', background: 'transparent', fontSize: '0.875rem', lineHeight: '1.5' }}
                     codeTagProps={{
                       style: {
@@ -120,7 +127,7 @@ export function MarkdownRenderer({ content, theme = 'light', className }: Markdo
             )
           },
           table: ({ children, ...props }) => (
-            <div className="overflow-x-auto my-8">
+            <div className={cn('overflow-x-auto my-8', SCROLLER_CLASS)}>
               <table className="w-full border-collapse bg-card rounded-lg border border-border shadow-sm" {...props}>
                 {children}
               </table>

package/src/components/collection/DraftReviewWorkspace.tsx

@@ -27,6 +27,7 @@ import {
   isChosen,
   gradeWords,
   wordTargets,
+  draftWordCount,
   sourceOverlapCheck,
   pickChanges,
   isRejectedTopicGroup,
@@ -332,8 +333,7 @@ function CandidateCard({
   const chosen = isChosen(record);
   const status = field(record, 'status');
   const preview = field(record, 'blog').slice(0, 150);
-  const checks = obj(readData(record.data, 'auto_checks'));
-  const blogWords = Number(get(checks, 'blogWords', 'blog_words')) || 0;
+  const blogWords = draftWordCount(record, 'blog');
   const target = wordTargets(contentType).blog;
   return (
     <div className={`flex flex-col rounded-md border p-3 ${chosen ? 'border-emerald-400 bg-emerald-50/40' : 'border-border bg-white'}`}>
@@ -407,8 +407,8 @@ function ContentReview({
   })();
 
   const targets = wordTargets(contentType);
-  const blogWords = Number(get(checks, 'blogWords', 'blog_words')) || 0;
-  const liWords = Number(get(checks, 'linkedinWords', 'linkedin_words')) || 0;
+  const blogWords = draftWordCount(record, 'blog');
+  const liWords = draftWordCount(record, 'linkedin');
   const hype = get(checks, 'hypeFlags', 'hype_flags');
   const approvedSources = get(checks, 'approvedSources', 'approved_sources');
 

package/src/components/collection/__tests__/drafts.test.ts

@@ -1,4 +1,5 @@
-import { parseSources, normUrl, groupKeyOf, groupDrafts, candidateTitle, gradeWords, wordTargets, sourceOverlapCheck, pickChanges, isRejectedTopicGroup } from '../drafts';
+import { parseSources, normUrl, groupKeyOf, groupDrafts, candidateTitle, gradeWords, wordTargets, sourceOverlapCheck, pickChanges, isRejectedTopicGroup, draftWordCount } from '../drafts';
+import { wordCount } from '../../validation';
 import type { EntityRecord } from '../types';
 
 function rec(id: string, name: string, data: Record<string, unknown>): EntityRecord {
@@ -151,3 +152,100 @@ describe('isRejectedTopicGroup (startsim-ay9l — collapse drafts of rejected to
     expect(isRejectedTopicGroup(g, new Set(['']))).toBe(false);
   });
 });
+
+/**
+ * A draft with no stored auto-checks still has a LENGTH (bd startsim-8hgmq.15).
+ *
+ * OBSERVED on the live tenant, 2026-09-07, at /drafts: a Chinese candidate card
+ * read "blog 0w … unjudged". The draft was 1027 characters, 855 of them CJK.
+ * The workspace was reading the count out of the stored `auto_checks` blob with
+ * `Number(get(checks, 'blogWords', 'blog_words')) || 0`, and the blob is null on
+ * every translated draft — `auto_checks` is written by the generator, while a
+ * translation is made by the tenant's own translate-draft, which deliberately
+ * does not inherit checks that measured text the checker never saw. So
+ * `Number(undefined) || 0` announced every translation as empty.
+ *
+ * The three live rows, all `auto_checks: null` and `judge_verdict: null`:
+ *   f6a2d629 zh  1027 chars (855 CJK)
+ *   147d0eb8 zh  1109 chars (972 CJK)
+ *   d0ca457a ar  2998 chars
+ *
+ * "unjudged" was honest — no judge ran. "0w" was not: nothing measured this
+ * draft, and an absent check must never render as a zero measurement.
+ */
+describe('draftWordCount (startsim-8hgmq.15 — a missing check is not a zero)', () => {
+  // The opening of the live zh draft f6a2d629, not invented text — the same
+  // fixture the counter's own tests use (validation/__tests__/word-count-scripts).
+  const ZH_BLOG =
+    '来自《Arabian Business》的报道显示，海湾—亚洲技术走廊正进入新阶段，' +
+    '中国企业正从单纯投资转向在GCC范围内更深度嵌入的运营模式。';
+  const EN_BLOG =
+    'The Gulf-Asia technology corridor is entering a new phase, with Chinese firms ' +
+    'moving from investment into deeper operational embedding across the GCC.';
+
+  it('counts the draft itself when the translation carries no auto_checks', () => {
+    // The reported card. Whitespace counting scores this text 2 and the old
+    // stored-only read scored it 0; either way the reviewer was told the draft
+    // was empty.
+    const zh = rec('f6a2d629', '中国—海湾科技扩张引发入局者对执行的疑问', {
+      candidate_index: 1,
+      lang: 'zh',
+      blog: ZH_BLOG,
+      auto_checks: null,
+      judge_verdict: null,
+    });
+    expect(draftWordCount(zh, 'blog')).toBeGreaterThan(20);
+  });
+
+  it('falls back for linkedin the same way', () => {
+    const zh = rec('f6a2d629', 'zh', { lang: 'zh', linkedin: ZH_BLOG, auto_checks: null });
+    expect(draftWordCount(zh, 'linkedin')).toBeGreaterThan(20);
+    expect(draftWordCount(zh, 'blog')).toBe(0); // no blog field at all IS zero
+  });
+
+  it('is a FALLBACK, not a replacement — a stored count wins', () => {
+    // Without this, "always recompute" passes the test above while quietly
+    // dropping the pipeline's own measurement, which is the number the judge and
+    // the writer agreed on.
+    const en = rec('d1', 'EN', { blog: EN_BLOG, auto_checks: { blog_words: 431, linkedin_words: 118 } });
+    expect(draftWordCount(en, 'blog')).toBe(431);
+    expect(draftWordCount(en, 'linkedin')).toBe(118);
+  });
+
+  it('reads the camelCased blob the API client returns', () => {
+    // The tenant client camelCases response keys, data blob included, so the
+    // same record arrives as autoChecks.blogWords over the wire.
+    const en = rec('d1', 'EN', { blog: EN_BLOG, autoChecks: { blogWords: 431 } });
+    expect(draftWordCount(en, 'blog')).toBe(431);
+  });
+
+  it('keeps a stored zero, which is a measurement rather than an absence', () => {
+    const empty = rec('d2', 'EN', { blog: '', auto_checks: { blog_words: 0 } });
+    expect(draftWordCount(empty, 'blog')).toBe(0);
+  });
+
+  it('recomputes when the blob exists but lacks this field', () => {
+    // A checker that ran on the blog only must not make the LinkedIn post read 0.
+    const partial = rec('d3', 'EN', { blog: EN_BLOG, linkedin: EN_BLOG, auto_checks: { blog_words: 431 } });
+    expect(draftWordCount(partial, 'blog')).toBe(431);
+    expect(draftWordCount(partial, 'linkedin')).toBe(23);
+  });
+
+  it('recomputes rather than trusting an unparseable stored value', () => {
+    const junk = rec('d4', 'EN', { blog: EN_BLOG, auto_checks: { blog_words: 'n/a' } });
+    expect(draftWordCount(junk, 'blog')).toBe(23);
+  });
+
+  it('agrees with the shared counter, so the chip and the rail cannot contradict', () => {
+    // startsim-wn2p.28: the count was wrong in four places because it was
+    // written in four places, and the screen ended up saying "524 words" and
+    // "16w" about one draft. This must stay a call to that one function.
+    const en = rec('d5', 'EN', { blog: EN_BLOG, auto_checks: null });
+    expect(draftWordCount(en, 'blog')).toBe(wordCount(EN_BLOG));
+  });
+
+  it('is 0 for a draft that really is empty', () => {
+    expect(draftWordCount(rec('d6', 'EN', { blog: '', auto_checks: null }), 'blog')).toBe(0);
+    expect(draftWordCount(rec('d7', 'EN', {}), 'blog')).toBe(0);
+  });
+});

package/src/components/collection/__tests__/translated-draft-word-chip.test.tsx

@@ -0,0 +1,129 @@
+/**
+ * The compare workspace must not tell a reviewer that a full draft is empty
+ * (bd startsim-8hgmq.15).
+ *
+ * OBSERVED on the live tenant, 2026-09-07, at /drafts. A Chinese candidate card
+ * in the "How Chinese Firms Are Anchoring Into the Gulf Tech Corridor" set read
+ *
+ *   blog 0w   unjudged
+ *
+ * and the draft behind it was 1027 characters, 855 of them CJK. Half of that
+ * card was honest: no judge ran on a translation, so "unjudged" is true. The
+ * other half was a MISSING measurement rendered as a real zero — the card read
+ * the count out of the stored `auto_checks` blob, which a translation never
+ * gets, and `Number(undefined) || 0` is 0.
+ *
+ * `drafts.test.ts` pins the counting rule. This pins the SCREEN, at the level
+ * the defect was reported at: mount the workspace over a stubbed tenant client
+ * holding the three real drafts and read the chips.
+ */
+import * as React from 'react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// react-markdown is ESM and this suite is not; the workspace pulls it in only
+// to render an OPEN draft's body, which no assertion here reads.
+jest.mock('../../blog/MarkdownRenderer', () => ({
+  MarkdownRenderer: ({ content }: { content: string }) => <div>{content}</div>,
+}));
+
+import { DraftReviewWorkspace } from '../DraftReviewWorkspace';
+import type { CollectionClient, EntityRecord, EntityTypeDef, Paginated } from '../types';
+
+const DRAFT_TYPE: EntityTypeDef = { id: 1, key: 'draft', label: 'Draft', attributes: [] };
+
+function page<T>(results: T[]): Paginated<T> {
+  return { count: results.length, next: null, previous: null, results };
+}
+
+function draft(id: number, name: string, data: Record<string, unknown>): EntityRecord {
+  return {
+    id,
+    entityType: 'draft',
+    externalId: null,
+    name,
+    data: { content_type: 'weekly_brief', topic_ref: 'topic-1', topic_title: 'Gulf tech corridor', ...data },
+    createdAt: '2026-09-01T00:00:00Z',
+  };
+}
+
+// The opening of the live zh draft f6a2d629 — real text, not a repeat()ed glyph.
+const ZH_BLOG =
+  '来自《Arabian Business》的报道显示，海湾—亚洲技术走廊正进入新阶段，' +
+  '中国企业正从单纯投资转向在GCC范围内更深度嵌入的运营模式。';
+const EN_BLOG =
+  'The Gulf-Asia technology corridor is entering a new phase, with Chinese firms ' +
+  'moving from investment into deeper operational embedding across the GCC.';
+
+/** The English original, which the writer checked, and its zh translation, which nothing checked. */
+const DRAFTS: EntityRecord[] = [
+  draft(1, 'Candidate 1 — Gulf tech corridor', {
+    candidate_index: 1,
+    story_title: 'China-Gulf Tech Expansion Raises Execution Questions for Entrants',
+    lang: 'en',
+    blog: EN_BLOG,
+    auto_checks: { blog_words: 431, linkedin_words: 180 },
+    judge_verdict: { verdict: 'accept' },
+  }),
+  draft(2, 'Candidate 2 — Gulf tech corridor', {
+    candidate_index: 2,
+    story_title: '中国—海湾科技扩张引发入局者对执行的疑问',
+    lang: 'zh',
+    blog: ZH_BLOG,
+    // Exactly how the live translations are stored: the generator's checks and
+    // verdict are NOT inherited, because they measured text neither one saw.
+    auto_checks: null,
+    judge_verdict: null,
+  }),
+];
+
+function stubClient(): CollectionClient {
+  return {
+    listTypes: jest.fn(async () => page([DRAFT_TYPE])),
+    listAllEntities: jest.fn(async (type: string) => (type === 'draft' ? DRAFTS : [])),
+    updateEntity: jest.fn(async () => DRAFTS[0]),
+  };
+}
+
+function renderWorkspace() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <DraftReviewWorkspace client={stubClient()} />
+    </QueryClientProvider>,
+  );
+}
+
+/** The card for one candidate, found by the title the reviewer reads. */
+async function card(title: string): Promise<HTMLElement> {
+  const heading = await screen.findByText(title);
+  const el = heading.closest('div.flex.flex-col');
+  if (!el) throw new Error(`no candidate card around "${title}"`);
+  return el as HTMLElement;
+}
+
+describe('a translated candidate card (startsim-8hgmq.15)', () => {
+  it('shows the draft’s real length instead of “blog 0w”', async () => {
+    renderWorkspace();
+    const zh = await card('中国—海湾科技扩张引发入局者对执行的疑问');
+
+    expect(within(zh).queryByText(/^blog 0w/)).toBeNull();
+    const chip = within(zh).getByText(/^blog \d+w/);
+    const words = Number(chip.textContent!.match(/blog (\d+)w/)![1]);
+    expect(words).toBeGreaterThan(20);
+  });
+
+  it('still says “unjudged”, which was the honest half of that card', async () => {
+    // No judge ran on the translation. The fix is to stop faking the count, not
+    // to fake a verdict alongside it.
+    renderWorkspace();
+    const zh = await card('中国—海湾科技扩张引发入局者对执行的疑问');
+    expect(within(zh).getByText('unjudged')).toBeTruthy();
+  });
+
+  it('leaves a checked candidate showing the count the pipeline stored', async () => {
+    renderWorkspace();
+    const en = await card('China-Gulf Tech Expansion Raises Execution Questions for Entrants');
+    await waitFor(() => expect(within(en).getByText(/^blog 431w/)).toBeTruthy());
+  });
+});

package/src/components/collection/drafts.ts

@@ -9,7 +9,7 @@
  */
 import type { EntityRecord } from './types';
 import { readData } from './data';
-import { runContentChecks, type ContentCheck } from '../validation';
+import { runContentChecks, wordCount, type ContentCheck } from '../validation';
 
 export interface DraftSource {
   url: string;
@@ -160,6 +160,49 @@ export function wordTargets(contentType: string): { blog: [number, number]; link
   }
 }
 
+/**
+ * The word count to SHOW for one field of one draft (bd startsim-8hgmq.15).
+ *
+ * WHY THIS EXISTS. The workspace used to read the count straight out of the
+ * stored blob — `Number(get(checks, 'blogWords', 'blog_words')) || 0` — and on
+ * 2026-09-07 a live Chinese candidate at /drafts advertised itself as
+ * "blog 0w … unjudged". The draft was 1027 characters, 855 of them CJK.
+ *
+ * `auto_checks` is written by the pipeline that GENERATES a candidate. A
+ * TRANSLATION is created by the tenant's own translate-draft, which copies the
+ * prose and deliberately does not inherit the generator's checks or verdict —
+ * they measured text neither one ever saw. So `auto_checks` is null on every
+ * translation, `Number(undefined) || 0` is 0, and every translated draft in the
+ * compare workspace announced itself as empty. Structural, not a bad row: the
+ * three live translations (zh, zh, ar) all read 0w, and so would every future
+ * one. "unjudged" beside it was honest — no judge ran — but an ABSENT check must
+ * never render as a zero MEASUREMENT.
+ *
+ * ABSENCE FALLS BACK, FALSINESS DOES NOT. A stored `0` is a measurement the
+ * pipeline actually took and it survives; only a missing or unparseable value is
+ * recomputed. That is the whole bug: the old code tested truthiness where it
+ * meant presence.
+ *
+ * IT RECOUNTS RATHER THAN BLANKING because the reviewer's job here is comparing
+ * candidates, and "—" tells them nothing about whether this one runs long.
+ *
+ * IT CALLS THE SHARED `wordCount` WITH NO LOCALE, exactly as `runContentChecks`
+ * does, so the chip and the validation rail on the same screen cannot disagree
+ * about one draft. This is a FALLBACK TO that function, never a second
+ * implementation of it — bd startsim-wn2p.28 was one line of arithmetic that
+ * took four PRs because the count had been written in four places, and the
+ * half-fixed screen read "524 words" in the rail and "16w" on the tab above it.
+ */
+export function draftWordCount(r: EntityRecord, field: 'blog' | 'linkedin'): number {
+  const checks = readData(r.data, 'auto_checks');
+  const bag = checks && typeof checks === 'object' && !Array.isArray(checks) ? (checks as Record<string, unknown>) : null;
+  // Both spellings, because the tenant API client camelCases the data blob.
+  const stored = bag ? bag[`${field}Words`] ?? bag[`${field}_words`] : undefined;
+  const n = Number(stored);
+  if (stored != null && stored !== '' && Number.isFinite(n)) return n;
+  return wordCount(str(readData(r.data, field)));
+}
+
 export type CheckStatus = 'ok' | 'low' | 'high' | 'none';
 
 /** Grade a word count against a [lo, hi] target. hi===0 means "no target". */

package/src/components/collection/index.ts

@@ -61,6 +61,7 @@ export {
   groupDrafts,
   wordTargets,
   gradeWords,
+  draftWordCount,
   type DraftSource,
   type DraftGroup,
   type CheckStatus,

package/src/components/diff/DiffViewer.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { FileText, GitBranch, Loader2, RefreshCw } from 'lucide-react'
 import { cn } from '../../lib/utils'
+import { SCROLLER_CLASS, useScrollAffordance } from '../../lib/scroll-affordance'
 
 export interface DiffSummary {
   totalFiles: number
@@ -202,7 +203,7 @@ export function DiffViewer({
             <summary className="select-none text-sm text-muted-foreground transition-colors hover:text-foreground">
               Working tree status
             </summary>
-            <pre className="mt-2 overflow-x-auto font-mono text-xs text-muted-foreground">{status}</pre>
+            <pre className={cn('mt-2 overflow-x-auto font-mono text-xs text-muted-foreground', SCROLLER_CLASS)}>{status}</pre>
           </details>
         </div>
       )}
@@ -218,7 +219,7 @@ export function DiffViewer({
               <FileText className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
               <span className="font-mono text-sm text-foreground">{file.filePath}</span>
             </div>
-            <pre className="overflow-x-auto p-4 font-mono text-sm">
+            <pre className={cn('overflow-x-auto p-4 font-mono text-sm', SCROLLER_CLASS)}>
               {file.lines.map((line, index) =>
                 isMetadataLine(line) ? null : (
                   <div key={index} className={diffLineClass(line)}>

package/src/components/record-detail/RecordDetail.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { cn } from '../../lib/utils'
+import { SCROLLER_CLASS, useScrollAffordance } from '../../lib/scroll-affordance'
 
 export type RecordFieldKind = 'text' | 'longtext' | 'url' | 'boolean' | 'json'
 
@@ -39,6 +40,9 @@ function hasValue(f: RecordField): boolean {
  * the same without duplicating the view.
  */
 export function RecordDetail({ fields, emptyMessage = 'No details.', className, showEmpty = false }: RecordDetailProps) {
+  // A json field is a code block that overflows sideways; on macOS it did so
+  // behind an invisible overlay bar (startsim-5pq7h.1).
+  useScrollAffordance()
   const visible = showEmpty ? fields : fields.filter(hasValue)
   const shorts = visible.filter((f) => f.kind !== 'longtext' && f.kind !== 'json')
   const longs = visible.filter((f) => f.kind === 'longtext')
@@ -101,7 +105,7 @@ export function RecordDetail({ fields, emptyMessage = 'No details.', className,
             {f.label}
           </h4>
           {hasValue(f) ? (
-            <pre className="overflow-x-auto rounded-md bg-muted p-3 text-xs leading-relaxed">
+            <pre className={cn('overflow-x-auto rounded-md bg-muted p-3 text-xs leading-relaxed', SCROLLER_CLASS)}>
               {f.value}
             </pre>
           ) : (

package/src/components/team/MembersTable.tsx

@@ -20,6 +20,8 @@
  */
 
 import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { SCROLLER_CLASS, useScrollAffordance } from '../../lib/scroll-affordance'
 import { RoleSelector } from './RoleSelector'
 import {
   userDisplayName,
@@ -160,6 +162,13 @@ export function MembersTable({
   availableRoles,
   currentUserId,
 }: MembersTableProps) {
+  // The root is the element that scrolls (`overflow-x-auto`), and on macOS its
+  // bar is a zero-height overlay — the same defect the shadcn Table had
+  // (startsim-5pq7h.1). The class goes on beside `cls.root` rather than inside
+  // MEMBERS_TABLE_DEFAULTS so a consumer overriding `classNames.root` cannot
+  // drop it, and the sheet is injected here because a class name in a
+  // constants file emits no rules on its own.
+  useScrollAffordance()
   const cls = { ...MEMBERS_TABLE_DEFAULTS, ...(classNames ?? {}) }
   const withStatus = showStatus ?? members.some((m) => rowStatus(m) !== null)
   const withLastActive = showLastActive ?? members.some((m) => m.lastLoginAt !== undefined)
@@ -184,7 +193,7 @@ export function MembersTable({
   const tight = (base: string, extra: string) => `${base} ${extra}`.trim()
 
   return (
-    <div className={cls.root}>
+    <div className={cn(cls.root, SCROLLER_CLASS)}>
       <table className={cls.table}>
         <thead className={cls.thead}>
           <tr className={cls.headerRow}>

package/src/components/ui/table-scroll.ts

@@ -2,90 +2,26 @@
 
 import { useEffect, useState, type RefObject } from 'react'
 
-export const TABLE_SCROLL_STYLE_ID = 'ss-table-scroll-affordance'
-
-/** The element that actually scrolls: the wrapper `Table` puts around `<table>`. */
-export const TABLE_SCROLLER_CLASS = 'ss-table-scroller'
-/** A non-scrolling box around the scroller, so the edge hints can be pinned to it. */
-export const TABLE_SHELL_CLASS = 'ss-table-shell'
-export const TABLE_EDGE_CLASS = 'ss-table-edge'
-export const TABLE_EDGE_LEFT_CLASS = 'ss-table-edge-left'
-export const TABLE_EDGE_RIGHT_CLASS = 'ss-table-edge-right'
-
 /**
- * Wide tables scroll, but on macOS nothing says so (startsim-5pq7h).
- *
- * A reviewer reported "there is no sliding bar so it makes it difficult to see
- * all the columns". The container did scroll the whole time; macOS renders an
- * OVERLAY scrollbar that occupies no layout height and is invisible at rest, so
- * the affordance was missing, not the scrolling.
- *
- * MEASURED 2026-09-07, headed Google Chrome and headed WebKit on macOS, on a
- * 400px box holding 900px of content (`offsetHeight - clientHeight`, borders
- * subtracted):
- *
- *   no scrollbar CSS                                       0px   (overlay)
- *   scrollbar-width: thin                                  0px
- *   scrollbar-color: <thumb> <track>                       0px
- *   ::-webkit-scrollbar { height: 10px }                  10px   <-- this one
- *   ::-webkit-scrollbar + scrollbar-width/-color           0px   <-- see below
- *   ::-webkit-scrollbar, content NARROWER than the box      0px   (no regression)
- *
- * TWO RESULTS THAT ARE EASY TO UNDO BY ACCIDENT:
- *
- * 1. DO NOT ADD `scrollbar-width` OR `scrollbar-color` HERE. Every snippet on
- *    the web pairs them with the -webkit- rules "for Firefox". Measured: when
- *    the standard properties are set at the same specificity, Chromium honours
- *    them INSTEAD of the custom scrollbar and reverts the element to a
- *    zero-height overlay bar — i.e. adding them silently deletes this fix.
- *    Firefox on macOS gains nothing from them anyway (measured 0px with
- *    `scrollbar-width: thin` applied and confirmed in the computed style), so
- *    there is no Firefox branch to lose. Firefox users are served by the edge
- *    hint below instead.
- *
- * 2. The bar costs layout height ONLY while the element overflows — that is
- *    `overflow: auto`, not something this stylesheet decides — so it never
- *    appears under a table that fits. Keep the scroller on `auto`, never
- *    `scroll`, or every narrow table in the fleet grows a dead bar.
+ * The table's share of the scroll affordance (startsim-5pq7h).
  *
- * On Windows/Linux this REPLACES the ~15px classic bar with a 10px one; it does
- * not reserve a second gutter, so no platform guard is needed. Nothing here
- * animates or transitions, so `prefers-reduced-motion` has nothing to honour.
+ * The CSS and the class names moved to `lib/scroll-affordance.ts` when the same
+ * fix was applied to the package's other scrollers (startsim-5pq7h.1) — one
+ * stylesheet, one id, one string, so no two call sites can overwrite each
+ * other's rules. The measurements and the two rules that silently delete the
+ * fix are documented there. What stays here is the part that is genuinely about
+ * tables: the edge hint.
  */
-export const TABLE_SCROLL_CSS = `
-.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
-}
-.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-track {
-  background: transparent;
-}
-.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-thumb {
-  border-radius: 9999px;
-  background-color: color-mix(in srgb, currentColor 22%, transparent);
-}
-.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-thumb:hover {
-  background-color: color-mix(in srgb, currentColor 45%, transparent);
-}
-.${TABLE_SHELL_CLASS} {
-  position: relative;
-}
-.${TABLE_EDGE_CLASS} {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 24px;
-  pointer-events: none;
-}
-.${TABLE_EDGE_RIGHT_CLASS} {
-  right: 0;
-  background-image: linear-gradient(to left, hsl(var(--background)), hsl(var(--background) / 0));
-}
-.${TABLE_EDGE_LEFT_CLASS} {
-  left: 0;
-  background-image: linear-gradient(to right, hsl(var(--background)), hsl(var(--background) / 0));
-}
-`.trim()
+export {
+  SCROLL_AFFORDANCE_STYLE_ID as TABLE_SCROLL_STYLE_ID,
+  SCROLL_AFFORDANCE_CSS as TABLE_SCROLL_CSS,
+  TABLE_SCROLLER_CLASS,
+  TABLE_SHELL_CLASS,
+  TABLE_EDGE_CLASS,
+  TABLE_EDGE_LEFT_CLASS,
+  TABLE_EDGE_RIGHT_CLASS,
+  useScrollAffordance,
+} from '../../lib/scroll-affordance'
 
 export interface ScrollEdges {
   /** There is content scrolled off to the left. */
@@ -97,11 +33,11 @@ export interface ScrollEdges {
 /**
  * Which horizontal edges of a table's scroller still hide content.
  *
- * The persistent scrollbar above sits at the bottom of the scroller, and the
- * scroller is the FULL HEIGHT of the table — measured 3061-5698px below the
- * fold on every content view of the marketing-agents tenant at 900px tall. So a
- * reader looking at the header row never sees it, and needs a hint that travels
- * with them. This drives that hint.
+ * The persistent scrollbar sits at the bottom of the scroller, and the scroller
+ * is the FULL HEIGHT of the table — measured 3061-5698px below the fold on
+ * every content view of the marketing-agents tenant at 900px tall. So a reader
+ * looking at the header row never sees it, and needs a hint that travels with
+ * them. This drives that hint.
  *
  * Pass a ref to the `<table>`, not to the scroller: `Table` forwards its ref to
  * the table element, and the scroller is its parent.

package/src/components/ui/table.tsx

@@ -3,12 +3,7 @@
 import * as React from "react"
 
 import { cn } from "../../lib/utils"
-import { useInjectedStyle } from "../../lib/injected-style"
-import {
-  TABLE_SCROLLER_CLASS,
-  TABLE_SCROLL_CSS,
-  TABLE_SCROLL_STYLE_ID,
-} from "./table-scroll"
+import { TABLE_SCROLLER_CLASS, useScrollAffordance } from "./table-scroll"
 
 export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   /**
@@ -23,9 +18,9 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
 const Table = React.forwardRef<HTMLTableElement, TableProps>(
   ({ className, containerClassName, ...props }, ref) => {
     // Gives the scroller a scrollbar that is actually visible while it
-    // overflows. See table-scroll.ts for the measurements — in particular why
-    // `scrollbar-width` must NOT be added alongside it.
-    useInjectedStyle(TABLE_SCROLL_STYLE_ID, TABLE_SCROLL_CSS)
+    // overflows. See lib/scroll-affordance.ts for the measurements — in
+    // particular why `scrollbar-width` must NOT be added alongside it.
+    useScrollAffordance()
 
     return (
       <div

package/src/components/workflows/ExecNodeDetails.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { cn } from '../../lib/utils';
+import { SCROLLER_CLASS, useScrollAffordance } from '../../lib/scroll-affordance';
 import { StatusBadge } from '../badge/StatusBadge';
 import { EmptyState } from '../states/EmptyState';
 import type { NodeExecView } from './types';
@@ -20,6 +21,12 @@ function JsonBlock({
   label: string;
   value: Record<string, unknown> | null | undefined;
 }) {
+  // Pretty-printed JSON runs past the right edge of a narrow inspector rail,
+  // and on macOS said so with a zero-height overlay bar (startsim-5pq7h.1).
+  // This block also caps its height, so it takes a 10px vertical gutter too —
+  // there is no CSS route to a custom bar on one axis only (measured; see
+  // lib/scroll-affordance.ts).
+  useScrollAffordance();
   const isEmpty = value == null || Object.keys(value).length === 0;
   return (
     <div className="flex min-h-0 flex-col">
@@ -29,7 +36,7 @@ function JsonBlock({
       {isEmpty ? (
         <p className="text-xs italic text-muted-foreground">No {label.toLowerCase()}.</p>
       ) : (
-        <pre className="overflow-auto rounded-md border border-border bg-muted/40 p-2 text-xs leading-relaxed">
+        <pre className={cn('overflow-auto rounded-md border border-border bg-muted/40 p-2 text-xs leading-relaxed', SCROLLER_CLASS)}>
           {JSON.stringify(value, null, 2)}
         </pre>
       )}

package/src/components/workflows/NodeInspector.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { cn } from '../../lib/utils';
+import { SCROLLER_CLASS, useScrollAffordance } from '../../lib/scroll-affordance';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
 import { StatusBadge } from '../badge/StatusBadge';
 import { EmptyState } from '../states/EmptyState';
@@ -139,12 +140,15 @@ function SchemaField({
 }
 
 function JsonBlock({ value }: { value: Record<string, unknown> | null | undefined }) {
+  // Pretty-printed JSON runs past the right edge of a narrow inspector rail,
+  // and on macOS said so with a zero-height overlay bar (startsim-5pq7h.1).
+  useScrollAffordance();
   const isEmpty = value == null || Object.keys(value).length === 0;
   if (isEmpty) {
     return <p className="text-xs italic text-muted-foreground">No data.</p>;
   }
   return (
-    <pre className="overflow-auto rounded-md border border-border bg-muted/40 p-2 text-xs leading-relaxed">
+    <pre className={cn('overflow-auto rounded-md border border-border bg-muted/40 p-2 text-xs leading-relaxed', SCROLLER_CLASS)}>
       {JSON.stringify(value, null, 2)}
     </pre>
   );

package/src/lib/__tests__/scroll-affordance.test.tsx

@@ -0,0 +1,200 @@
+/**
+ * Guards for the package-wide scroll affordance (startsim-5pq7h.1).
+ *
+ * The defect is PURELY VISUAL — content continues past an edge and macOS draws
+ * a zero-height overlay bar that says so to nobody — and jsdom has no layout, so
+ * NOTHING here proves a scrollbar is visible on screen. That claim is carried by
+ * browser measurement (headless Chromium with `--hide-scrollbars` REMOVED, real
+ * components rendered in examples/workflow-studio/src/app/scrollers, borders
+ * subtracted): every surface below went from 0px of scrollbar to 10px, and the
+ * negative controls stayed at 0px.
+ *
+ * What these DO guard is what a later edit can silently break:
+ *  - the two CSS properties that measurably DELETE the bar,
+ *  - the `width` declaration, whose absence measurably makes the vertical bar
+ *    WORSE (16px) rather than leaving it alone,
+ *  - the "one sheet, one id, one string" rule — two different strings under one
+ *    id overwrite each other on every mount,
+ *  - and that each surface still marks the element that actually scrolls.
+ *
+ * SEVEN of the eight changed elements are covered below. MarkdownRenderer's two
+ * — its GFM table wrapper and its fenced code block — are NOT, and cannot be
+ * under this jest config: react-markdown@10 ships ESM, `transformIgnorePatterns`
+ * does not cover node_modules here, and the suite dies with
+ * `SyntaxError: Unexpected token 'export'` before the component renders. That is
+ * why this package has no blog tests at all. Those two are carried by the browser
+ * run only, and the code-block one is the most fragile thing in this change:
+ * `className={SCROLLER_CLASS}` is handed to react-syntax-highlighter, which
+ * forwards it to its PreTag element — an upgrade could stop doing that, and
+ * nothing here would notice.
+ */
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  SCROLL_AFFORDANCE_CSS,
+  SCROLL_AFFORDANCE_STYLE_ID,
+  SCROLLER_CLASS,
+  TABLE_SCROLLER_CLASS,
+} from '../scroll-affordance'
+import { DiffViewer } from '../../components/diff/DiffViewer'
+import { RecordDetail } from '../../components/record-detail/RecordDetail'
+import { MembersTable } from '../../components/team/MembersTable'
+import { ExecNodeDetails } from '../../components/workflows/ExecNodeDetails'
+import { NodeInspector } from '../../components/workflows/NodeInspector'
+import { Table, TableBody, TableCell, TableRow } from '../../components/ui/table'
+import type { MemberRow } from '../../components/team/types'
+
+describe('SCROLL_AFFORDANCE_CSS', () => {
+  it('styles the webkit scrollbar for both the table scroller and the general one', () => {
+    expect(SCROLL_AFFORDANCE_CSS).toContain(`.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar`)
+    expect(SCROLL_AFFORDANCE_CSS).toContain(`.${SCROLLER_CLASS}::-webkit-scrollbar`)
+    expect(SCROLL_AFFORDANCE_CSS).toMatch(/height:\s*10px/)
+  })
+
+  /**
+   * MEASURED 2026-09-07, headless Chromium with --hide-scrollbars removed, on a
+   * box that overflows VERTICALLY (borders subtracted):
+   *
+   *   height: 10px; width: 10px                     -> 10px vertical bar
+   *   height: 10px  (no width)                      -> 16px vertical bar
+   *   ::-webkit-scrollbar:horizontal { height:10px } ->  0px on BOTH axes
+   *
+   * Declaring any ::-webkit-scrollbar rule opts the element out of overlay
+   * scrollbars on both axes, so dropping `width` as a "we only care about
+   * horizontal" tidy-up does not leave the vertical axis alone — it makes it
+   * fatter than the platform default this replaces.
+   */
+  it('declares width alongside height, because a height-only rule leaves a 16px vertical bar', () => {
+    expect(SCROLL_AFFORDANCE_CSS).toMatch(/width:\s*10px/)
+  })
+
+  /**
+   * The finding this test exists for. MEASURED in headed Chrome on macOS:
+   *
+   *   ::-webkit-scrollbar { height: 10px }                 -> 10px of layout height
+   *   the same rule PLUS scrollbar-width / scrollbar-color ->  0px (overlay again)
+   *
+   * Chromium honours the standard properties instead of the custom scrollbar
+   * and reverts to a zero-height overlay bar. Every "cross-browser scrollbar"
+   * snippet on the web tells you to add them, and doing so here would silently
+   * undo the fix with no visible error anywhere. Firefox on macOS gains nothing
+   * from them either (measured 0px with the property confirmed applied), so
+   * there is no browser to trade away.
+   */
+  it('does NOT set scrollbar-width or scrollbar-color, which would revert Chromium to an overlay bar', () => {
+    expect(SCROLL_AFFORDANCE_CSS).not.toMatch(/scrollbar-width/)
+    expect(SCROLL_AFFORDANCE_CSS).not.toMatch(/scrollbar-color/)
+  })
+
+  /**
+   * `overflow: auto` is what makes the bar conditional on real overflow. Under
+   * `overflow: scroll` every narrow table and every short code block in the
+   * fleet would grow a dead 10px bar — a regression, not a fix.
+   */
+  it('leaves scrollers on overflow:auto so the bar is conditional on real overflow', () => {
+    expect(SCROLL_AFFORDANCE_CSS).not.toMatch(/overflow\s*:\s*scroll/)
+  })
+})
+
+describe('the surfaces that opted in', () => {
+  const diff = [
+    'diff --git a/a.ts b/a.ts',
+    'index 1111111..2222222 100644',
+    '@@ -1 +1 @@',
+    '-const a = 1',
+    '+const a = 2',
+  ].join('\n')
+
+  const member: MemberRow = {
+    id: '1',
+    userId: 'u1',
+    teamId: 't1',
+    role: 'owner',
+    joinedAt: '2026-01-04T00:00:00Z',
+    user: { id: 'u1', email: 'someone@example.com' },
+  } as MemberRow
+
+  it("marks DiffViewer's per-file block and its working-tree status block", () => {
+    const { container } = render(<DiffViewer diff={diff} status="On branch main" />)
+    const pres = container.querySelectorAll('pre')
+    expect(pres.length).toBeGreaterThan(0)
+    pres.forEach((pre) => expect(pre).toHaveClass(SCROLLER_CLASS))
+  })
+
+  it("marks RecordDetail's json block", () => {
+    const { container } = render(
+      <RecordDetail fields={[{ label: 'payload', value: '{ "a": 1 }', kind: 'json' }]} />
+    )
+    expect(container.querySelector('pre')).toHaveClass(SCROLLER_CLASS)
+  })
+
+  /**
+   * The class goes on beside `cls.root` rather than inside MEMBERS_TABLE_DEFAULTS
+   * so that a consumer passing its own `classNames.root` — which replaces the
+   * default outright — cannot silently drop the affordance.
+   */
+  it("marks MembersTable's scrolling root even when the consumer overrides its class", () => {
+    const { container } = render(
+      <MembersTable members={[member]} classNames={{ root: 'my-own-root' }} />
+    )
+    const root = container.querySelector('.my-own-root')
+    expect(root).toHaveClass(SCROLLER_CLASS)
+  })
+
+  it("marks ExecNodeDetails' json blocks", () => {
+    const { container } = render(
+      <ExecNodeDetails
+        node={{ nodeId: 'n1', status: 'success', name: 'n', inputData: { a: 1 }, outputData: { b: 2 } }}
+      />
+    )
+    const pres = container.querySelectorAll('pre')
+    expect(pres).toHaveLength(2)
+    pres.forEach((pre) => expect(pre).toHaveClass(SCROLLER_CLASS))
+  })
+
+  it("marks NodeInspector's json block, which only exists once an exec tab is open", async () => {
+    const user = userEvent.setup()
+    render(
+      <NodeInspector
+        node={{ id: 'n1', name: 'n', type: 'llm.classify', position: { x: 0, y: 0 }, parameters: {} } as never}
+        execution={{ nodeId: 'n1', status: 'success', inputData: { a: 1 } } as never}
+      />
+    )
+    await user.click(screen.getByRole('tab', { name: /input/i }))
+    const pre = document.querySelector('pre')
+    expect(pre).not.toBeNull()
+    expect(pre).toHaveClass(SCROLLER_CLASS)
+  })
+
+  it('leaves the table primitive on its own class, so the table fix is not renamed out from under it', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    )
+    expect(screen.getByRole('table').parentElement).toHaveClass(TABLE_SCROLLER_CLASS)
+  })
+
+  /**
+   * One sheet, one id, one string. `ensureInjectedStyle` REWRITES an existing
+   * sheet whose text differs, so two surfaces shipping different CSS under this
+   * id would overwrite each other on every mount, last effect wins.
+   */
+  it('injects exactly one stylesheet however many different surfaces are on the page', () => {
+    render(
+      <>
+        <Table />
+        <DiffViewer diff={diff} />
+        <RecordDetail fields={[{ label: 'p', value: '{}', kind: 'json' }]} />
+        <MembersTable members={[member]} />
+      </>
+    )
+    const sheets = document.querySelectorAll(`#${SCROLL_AFFORDANCE_STYLE_ID}`)
+    expect(sheets).toHaveLength(1)
+    expect(sheets[0].textContent).toBe(SCROLL_AFFORDANCE_CSS)
+  })
+})

package/src/lib/scroll-affordance.ts

@@ -0,0 +1,135 @@
+'use client'
+
+import { useInjectedStyle } from './injected-style'
+
+export const SCROLL_AFFORDANCE_STYLE_ID = 'ss-scroll-affordance'
+
+/**
+ * A scroller that should show a bar while it overflows.
+ *
+ * Put this on the element that ACTUALLY scrolls — the one carrying
+ * `overflow-auto` / `overflow-x-auto` — and call {@link useScrollAffordance}
+ * from the component that renders it, or the rules never reach the page.
+ */
+export const SCROLLER_CLASS = 'ss-scroller'
+
+/** The element that actually scrolls: the wrapper `Table` puts around `<table>`. */
+export const TABLE_SCROLLER_CLASS = 'ss-table-scroller'
+/** A non-scrolling box around the scroller, so the edge hints can be pinned to it. */
+export const TABLE_SHELL_CLASS = 'ss-table-shell'
+export const TABLE_EDGE_CLASS = 'ss-table-edge'
+export const TABLE_EDGE_LEFT_CLASS = 'ss-table-edge-left'
+export const TABLE_EDGE_RIGHT_CLASS = 'ss-table-edge-right'
+
+/**
+ * Content scrolls, but on macOS nothing says so (startsim-5pq7h, 5pq7h.1).
+ *
+ * A reviewer reported "there is no sliding bar so it makes it difficult to see
+ * all the columns". The container did scroll the whole time; macOS renders an
+ * OVERLAY scrollbar that occupies no layout height and is invisible at rest, so
+ * the affordance was missing, not the scrolling. The same is true of every
+ * other scroller in this package.
+ *
+ * MEASURED 2026-09-07, headed Google Chrome and headed WebKit on macOS, on a
+ * 400px box holding 900px of content (`offsetHeight - clientHeight`, borders
+ * subtracted):
+ *
+ *   no scrollbar CSS                                       0px   (overlay)
+ *   scrollbar-width: thin                                  0px
+ *   scrollbar-color: <thumb> <track>                       0px
+ *   ::-webkit-scrollbar { height: 10px }                  10px   <-- this one
+ *   ::-webkit-scrollbar + scrollbar-width/-color           0px   <-- see below
+ *   ::-webkit-scrollbar, content NARROWER than the box      0px   (no regression)
+ *
+ * THREE RESULTS THAT ARE EASY TO UNDO BY ACCIDENT:
+ *
+ * 1. DO NOT ADD `scrollbar-width` OR `scrollbar-color` HERE. Every snippet on
+ *    the web pairs them with the -webkit- rules "for Firefox". Measured: when
+ *    the standard properties are set at the same specificity, Chromium honours
+ *    them INSTEAD of the custom scrollbar and reverts the element to a
+ *    zero-height overlay bar — i.e. adding them silently deletes this fix.
+ *    Firefox on macOS gains nothing from them anyway (measured 0px with
+ *    `scrollbar-width: thin` applied and confirmed in the computed style), so
+ *    there is no Firefox branch to lose. Firefox users are served by the edge
+ *    hint below instead.
+ *
+ * 2. `width` IS LOAD-BEARING even though the defect that started this is
+ *    horizontal. Declaring any `::-webkit-scrollbar` rule opts the element out
+ *    of overlay scrollbars on BOTH axes, so a height-only rule leaves the
+ *    vertical bar at the platform default. Measured 2026-09-07 on a box that
+ *    overflows vertically, borders subtracted:
+ *
+ *      height: 10px; width: 10px   ->  10px vertical bar
+ *      height: 10px  (no width)    ->  16px vertical bar   <-- worse than before
+ *      ::-webkit-scrollbar:horizontal { height: 10px }  ->  0px on BOTH axes
+ *
+ *    The last one is the tempting "only touch the horizontal axis" spelling and
+ *    it does nothing at all in Chromium. There is no CSS route to a custom
+ *    horizontal bar that leaves the vertical axis as an overlay — so an element
+ *    given {@link SCROLLER_CLASS} that also overflows vertically gains a 10px
+ *    vertical gutter, and that has to be an acceptable trade for that surface.
+ *
+ * 3. The bar costs layout height ONLY while the element overflows — that is
+ *    `overflow: auto`, not something this stylesheet decides — so it never
+ *    appears under content that fits. Keep scrollers on `auto`, never `scroll`,
+ *    or every narrow table in the fleet grows a dead bar.
+ *
+ * On Windows/Linux this REPLACES the ~15px classic bar with a 10px one; it does
+ * not reserve a second gutter, so no platform guard is needed. Nothing here
+ * animates or transitions, so `prefers-reduced-motion` has nothing to honour.
+ *
+ * ONE stylesheet, ONE id, ONE string: `ensureInjectedStyle` rewrites the sheet
+ * when an existing id carries different text, so two call sites shipping
+ * different CSS under this id would overwrite each other on every mount. Add
+ * selectors to the lists below rather than injecting a second sheet.
+ */
+export const SCROLL_AFFORDANCE_CSS = `
+.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar,
+.${SCROLLER_CLASS}::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-track,
+.${SCROLLER_CLASS}::-webkit-scrollbar-track {
+  background: transparent;
+}
+.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-thumb,
+.${SCROLLER_CLASS}::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: color-mix(in srgb, currentColor 22%, transparent);
+}
+.${TABLE_SCROLLER_CLASS}::-webkit-scrollbar-thumb:hover,
+.${SCROLLER_CLASS}::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, currentColor 45%, transparent);
+}
+.${TABLE_SHELL_CLASS} {
+  position: relative;
+}
+.${TABLE_EDGE_CLASS} {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 24px;
+  pointer-events: none;
+}
+.${TABLE_EDGE_RIGHT_CLASS} {
+  right: 0;
+  background-image: linear-gradient(to left, hsl(var(--background)), hsl(var(--background) / 0));
+}
+.${TABLE_EDGE_LEFT_CLASS} {
+  left: 0;
+  background-image: linear-gradient(to right, hsl(var(--background)), hsl(var(--background) / 0));
+}
+`.trim()
+
+/**
+ * Put {@link SCROLL_AFFORDANCE_CSS} on the page, once per document.
+ *
+ * A stylesheet rather than a Tailwind class because four of the eleven apps
+ * have no `@source` line for this package, so a class written here emits no
+ * rule over there — see `injected-style.ts`. Safe to call from every component
+ * that marks a scroller; the sheet is keyed by id.
+ */
+export function useScrollAffordance(): void {
+  useInjectedStyle(SCROLL_AFFORDANCE_STYLE_ID, SCROLL_AFFORDANCE_CSS)
+}