PrismEvidenceTableMicroUI

Platform Prism evidence-table micro-UI. Component id: evidence-table. Published to npm as @zephytiju/prism-evidence-table.

Dossier embedded block (design decision D10): a preview of the evidence view of its source file — the SAME file the Geovision Embed references. The card chrome is retained — outlined border, kind tag pill (EVIDENCE TABLE), header with the SRC FILE · {file} chip — the source-file variant dropdown on top (VIEW · {saved view} ▾ opening SAVED VIEWS · {file}), and the ↗ open arrow at the block's top-right BESIDE the dropdown (the agreed embedded-block chrome shared with the geovision-embed block: the rows are NOT click-to-open — the arrow emits the open intent { sourceFileRef, viewId } for the host to turn into navigation). Picking a saved view re-previews that variant's IEvidenceSource-style rows: the four-column table (SOURCE / OBSERVATION / CONF. / AUDIT ID) with row separators and per-row audit drill links over IAuditRef locators; a list layout renders the same rows as cards. Being a table does NOT make dossier-native tables embedded — only file-preview blocks are embedded (D10). Sub-component library per D5 — rendered inside a host axiom component (the dossier Block Stack) through configuration, not a Prism composition member. Makes NO Lattice calls; rows are interface-typed and generic over evidence models.

Configuration keys

| Prop | Meaning | | --- | --- | | sourceFileRef | Source file the table previews (the SRC FILE chip) — the SAME file the Geovision Embed references, e.g. "REDWATER-CORRIDOR.WV" | | savedViews | Saved views (variants) of the source file — the dropdown list; each carries its evidence rows | | selectedViewId | Currently previewed variant id (controlled; defaults to the channel value, then the first view) | | layout | "table" four columns (default) or "list" row cards | | columns | Columns rendered, in order — source / observation / confidence / audit (default: all four) | | locale | UI locale for the component-fixed strings: "en" \| "zh-CN" (default "en") — see i18n | | onOpenView | Receives the ↗ arrow's open intent { sourceFileRef, viewId }; the fallback is a console no-op |

Channel contract

| Direction | Kind | Id | Payload | | --- | --- | --- | --- | | publishes | state | evidence-table.selected-view | { sourceFileRef, viewId } when the dropdown switches the previewed saved view | | consumes | state | evidence-table.selected-view | derives the previewed variant when selectedViewId is not set (values addressing a different source file are ignored) | | emits | event | evidence-table.audit-drill | { sourceFileRef, viewId, rowId, auditId } — ephemeral notification when an analyst drills into a row's audit chain |

The ↗ open arrow additionally emits an open intent (onOpenView callback + console.info) carrying { sourceFileRef, viewId } of the previewed saved view — a demo no-op until the host wires navigation.

Channel ids are string literals at every call-site so the build-time channel-graph scanner can derive the graph. The state publication is setter-only; the derived selection is what renders. The payload carries the source file reference because both embedded blocks of a dossier preview the SAME file — the host (Main Editor) re-previews the picked saved view on every block of that file, the D10 semantic.

Audit rule

Previewing evidence and drilling into an audit chain are routine reads. This component emits NO audit event and appends nothing to any audit chain (IAuditRef.append is never invoked). The only event it ever emits is the internal evidence-table.audit-drill (an ephemeral drill notification the host turns into audit-chain navigation, not an observable domain action).

Internationalization (i18n)

The component ships en and zh-CN locale bundles — src/locales/en.json / src/locales/zh-CN.json — and every component-fixed UI string is resolved from them (kind tag, SRC FILE chip, VIEW · {view} pill, SAVED VIEWS · {file} menu title, the four column headers, and the audit link tooltip). The component renders no hardcoded copy.

{
  "evidence-table": {
    "kindTag": "EVIDENCE TABLE",
    "srcFile": "SRC FILE · {file}",
    "viewPrefix": "VIEW · {view}",
    "savedViewsTitle": "SAVED VIEWS · {file}",
    "colSource": "SOURCE",
    "colObservation": "OBSERVATION",
    "colConfidence": "CONF.",
    "colAuditId": "AUDIT ID",
    "auditLinkTitle": "OPEN AUDIT CHAIN · {auditId}"
  }
}

• locale?: "en" | "zh-CN" prop (default "en") selects the string table per instance.
• srcFile / viewPrefix / savedViewsTitle / auditLinkTitle use simple {placeholder} interpolation (plain substitution, no regexes — formatMessage is exported from the package entry).
• Composition-authored strings are localized by the composer; component-fixed strings live in the locale JSONs. Saved-view labels, evidence-row observations and audit ids are data/configuration: a host with localized row copy passes its own strings per locale.
• Locale bundles are namespaced under the component id ("evidence-table") so a composer can deep-merge every component's bundle into ONE UI language bundle without collisions:

import { locales as evidenceTableLocales } from "@zephytiju/prism-evidence-table";
// evidenceTableLocales["zh-CN"] -> { "evidence-table": { … } }
const uiBundle = deepMerge(hostStrings, evidenceTableLocales["zh-CN"]);

The parsed bundles are exported from the package entry (locales, en, zhCN, stringsForLocale), and the raw JSONs are also served by the ./locales/* exports subpath (e.g. @zephytiju/prism-evidence-table/locales/zh-CN.json); files ships both dist and locales.

Theme

No palette is hardcoded. Every color resolves to SEMANTIC theme tokens (ok, accent, threat, warn, signal, card, card-dark, border, line, muted, text, input, deep, panel) consumed as CSS variables, plus --mantine-font-family-monospace for the mono typography — the palette is supplied entirely by the host's MantineProvider. The local demo ships TWO themes, both defined in src/demo.tsx: geovisionTheme (dark), mapping each semantic token onto the exact :root variables of the CONFIRMED v9 design (deep bg, panel black, card, card-dark, mint, blue, amber, red, purple, muted, border, grid2), and the contrasting latticeLightTheme (light), mapping the SAME semantic token keys onto a different palette — the component is skinned purely through the surrounding MantineProvider.

Source layout

src/ is strictly two parts:

• Component source (what the package compiles): EvidenceTable.tsx (the embedded block: card chrome + variant dropdown + the evidence table / list), VariantDropdown.tsx (the source-file variant dropdown chrome shared by the dossier embedded blocks), index.ts (public entry), and src/locales/ (en.json, zh-CN.json, index.ts — the i18n string bundles, their resolver, and the {placeholder} interpolation helper).
• Demo: exactly ONE file, src/demo.tsx — the two host themes (GeoVision v9 + Lattice Light), all demo test data (the shared source file REDWATER-CORRIDOR.WV with its three saved views CORRIDOR OVERVIEW / CONVOY TIMING / PORT DISRUPTION, each carrying its evidence rows with confidence and audit ids), the channel seeding (seedDemoChannels) and the channel + audit drill event monitors, and the demo page rendering TWO EvidenceTable instances side by side behind a global EN | 中文 language switcher (plus per-instance switches).

The npm package ships dist (compiled component + type declarations + locale JSONs) and the top-level locales/ directory (the raw JSON bundles, served by the ./locales/* exports subpath); no demo code is published. scripts/copy-locales.mjs copies the JSON bundles into both locations during npm run build.

Local development

npm install
npm run typecheck
npm test
npm run dev
npm run shot-demo

npm install pulls the platform peers (@zephytiju/prism-react, @zephytiju/lattice-common-interfaces) from the npm registry, along with the host-side peer dependencies (react, react-dom, @mantine/core). When consuming the published package, install it directly (npm install @zephytiju/prism-evidence-table) and provide those peer dependencies in the host application.

The demo (npm run dev, entry src/demo.tsx) plays the host: on load it seeds the file-level selected view (CONVOY TIMING) the way a host that just materialized the table from a dropped evidence pack would (the component itself makes no Lattice calls, so no mock executor is needed) and renders TWO EvidenceTable instances side by side, each inside its own MantineProvider with a different theme (GeoVision v9 dark left, Lattice Light right) — both reference the SAME source file, so the VIEW ▾ dropdown on EITHER instance switches the previewed saved view on BOTH. A global EN | 中文 segmented control switches the locale prop of BOTH instances at once, and each instance carries its own per-instance control so the two hosts can render DIFFERING locales simultaneously; the monitors show the published file-level selection and the last evidence-table.audit-drill event (click an audit id), and RESEED resets the view to CONVOY TIMING. npm run shot-demo boots the vite dev server, drives the demo in headless Chrome and captures to /tmp/guanlan-review/: evidence-dark-en_dropdown-open.png (dark theme, EN, dropdown open listing the shared saved views; light host renders zh-CN beside it), evidence-zh_dropdown-open-light.png (both hosts zh-CN, dropdown open on the light host), and evidence-variant-switched.png (PORT DISRUPTION picked on the dark host — both pills and rows switch through the shared channel — plus the audit-drill event monitor showing AUD-4471).

Design record

Component doc: https://qcnwge0wy4s0.feishu.cn/wiki/UuRjwAa4EiZ1cUkS22RcGqAon68 — UX, Lattice binding (IEvidenceSource[] with IAuditRef locators), variants and configuration. Parent design: https://qcnwge0wy4s0.feishu.cn/wiki/B87YwS2PriaGvlkAcOtctKm8nsd — D5 (sub-component libraries), D10 (dossier block surface taxonomy). Visual reference: the authoritative v9 interactive HTML prototype attached to the parent design doc (.block / .btag / .srcref / .vsel / .vmenu chrome and the four-column evidence rows).