@jini-ai/ui 0.3.13 → 0.4.0

package/dist/index.js

@@ -1,5 +1,423 @@
+/**
+ * Archived provenance rationale:
+ * ### Design decisions worth flagging
+ *
+ * - **`title`/`detail` are host-supplied, not computed from a status+kind
+ *   lookup table.** Both source cards hardcode branded, kind-specific copy
+ *   ("Open Design is rebuilding tokens", "Workspace update ready" — see the
+ *   purity-grep note below for why that exact text can't even appear in this
+ *   package's comments). Baking any "kind"-aware copy-selection logic into the
+ *   generic component would just re-embed OD's product vocabulary (job
+ *   "kind" — generation/revision/token-contract-rebuild — is OD-specific)
+ *   under a different name. The generic component instead takes optional
+ *   `title`/`detail` and falls back to a neutral, status-only default
+ *   (`Queued`/`Running`/`Complete`/`Needs attention`) when omitted. Computing
+ *   richer, kind-aware copy is left to the host.
+ * - **`progress: number | 'indeterminate'`** — neither source occurrence ever
+ *   actually produces an indeterminate state (both always compute a 0-100
+ *   percentage). It's included anyway because the task's own required test
+ *   matrix asked for indeterminate-vs-determinate coverage, and because it's
+ *   a natural, forward-looking capability for Jini's own Run/Agent/Tool
+ *   dashboards (an agent step with no known total duration) — this is a
+ *   deliberate generalization beyond what the two source cards themselves
+ *   needed, called out here rather than silently added.
+ * - **Per-item `label` values are not run through `useT()`.** `steps[]`/
+ *   `secondaryItems[]` mix genuinely dynamic content (a todo's own text, an
+ *   agent-touched file path) with the reference adapter's static fallback
+ *   step titles, indistinguishably once they're both just strings in the same
+ *   array — there's no way for the component to tell them apart. This matches
+ *   the precedent already set by `ConnectorCard` not wrapping `connector.name`/
+ *   `connector.category`. What *is* wrapped in `t()`, and covered by a real
+ *   `I18nProvider` test: the fallback title/detail, the progress-bar
+ *   `aria-label`, and the default "Files touched" secondary-items heading.
+ * - **Adapters take a `*Like` structural input, not real `@open-design/contracts`
+ *   types.** The task's own framing allowed shipping these as "documented
+ *   reference adapters" for OD-shaped input; going one step further, the
+ *   input types are locally declared minimal structural subsets rather than
+ *   actual imports of an external, unvendored package — this package has zero
+ *   dependency on `@open-design/contracts`, and a host whose real types are a
+ *   structural superset can pass them in directly (TypeScript structural
+ *   typing).
+ * - **Slicing (`maxSteps`/`maxSecondaryItems`) moved from the adapter to the
+ *   component.** The source cards slice at render time (`todos.slice(0, 6)`,
+ *   `fileOps.slice(0, 5)`) inside the component itself. The adapters here
+ *   return the *full* derived list; `ProgressCard` truncates for display via
+ *   props (defaulting to the same 6/5 caps). This keeps the adapter's output
+ *   data-complete and makes the truncation a generic, overridable view
+ *   concern rather than something baked into one specific adapter.
+ * - **No orchestrator hook was needed.** Unlike the connectors canary
+ *   (`useConnectorCatalog`/`useConnectorAuthorization`/`useConnectorDetail`),
+ *   this feature has no live data-fetching or async state of its own —
+ *   `ProgressCard` is purely presentational, and the adapters are synchronous
+ *   pure functions. There is deliberately no `ports.ts`/`dependencies.ts`
+ *   pair in this feature; a host wires its own data source directly into
+ *   `ProgressCardData` (via these adapters or its own mapping) rather than
+ *   this package owning any transport.
+ *
+ * ### Dropped, and why
+ *
+ * - **The Bash `rm`-command detection heuristic** from the source
+ *   `deriveFileOps` (`extractSimpleBashDeletes`/`shellWords`/
+ *   `isShellSeparator`/`isRedirectionOperator`/`looksUnsafeForFileList`, ~100
+ *   lines) — a self-contained shell-command tokenizer used only to detect
+ *   file deletions performed via a raw `Bash` tool call rather than a
+ *   dedicated `Delete`-family tool. This is a distinct, non-trivial parsing
+ *   concern in its own right, not core to "progress bar + status icon + step
+ *   list," and isn't mentioned anywhere in r6 §1.5 or the plan doc's item 2.
+ *   `deriveFileOpsFromAgentEvents` keeps the tool-name-based classification
+ *   (`Read`/`Write`/`Edit`/`MultiEdit`/`Delete`/etc., which covers the large
+ *   majority of real file-op tool calls) and drops only the Bash-string
+ *   heuristic. A future task adopting this as a real extraction target should
+ *   do so as its own item, not bundled here.
+ * - **`job.kind`** (`generation`/`revision`/`token-contract-rebuild`) was not
+ *   carried into `DesignSystemGenerationJobLike`/`ProgressCardData` at all —
+ *   it exists purely to drive the OD-branded, kind-specific copy the generic
+ *   title/detail design above already excludes. A host that wants
+ *   kind-specific text computes it itself before calling the adapter and
+ *   overrides `title`/`detail` on the result.
+ * - **`todo.activeForm`** (an alternate in-progress-tense label OD's todo
+ *   schema carries) — not used by either card's actual rendering, so not
+ *   carried into `TodoItemLike`.
+ * - **CSS class names were not ported verbatim** (`ds-workspace-activity-card`,
+ *   `ds-generation-review-card`, `ds-generation-review-progress`, etc.) — new,
+ *   neutral names were used (`progress-card`, `progress-card-bar`,
+ *   `progress-card-steps`, `progress-card-secondary-items`) since the
+ *   original classes are tied to OD's own stylesheet, not shipped here.
+ *
+ * ### Post-merge audit pass (2026-07-17): a real bug fix, a dead-code removal, and 100% coverage
+ *
+ * A follow-up audit re-diffed every in-scope piece above against the vendored
+ * original function-by-function and found the port faithful — every
+ * generification already listed in this section checked out against the
+ * original's actual behavior. The audit did surface two real issues once
+ * branch-coverage was wired up (`@vitest/coverage-v8`, run via a scoped CLI
+ * include/exclude filter — `--coverage.include='src/features/browser-chrome/**'`
+ * — rather than a shared `vitest.config.ts` change, so the rest of the package's
+ * test config is untouched):
+ *
+ * - **Real bug, fixed** — `rules.ts`'s `recordNavigation` hardcoded
+ *   `DEFAULT_HOME_NAVIGATION_ENTRY.title` ("New Tab") for a navigation to
+ *   `EMPTY_URL`, ignoring a caller-supplied `options.homeLabel`. Since
+ *   `useBrowserNavigationStack` passes `homeLabel: homeEntry.title` on every
+ *   call, a host configuring a custom `homeEntry` would see any navigation back
+ *   to the home url silently retitle itself to the generic default instead of
+ *   the host's own label — a regression relative to `initialNavigationState`/
+ *   `labelFromUrl`, which both already honored a custom home label correctly.
+ *   Fixed to `options.homeLabel ?? DEFAULT_HOME_NAVIGATION_ENTRY.title`; covered
+ *   by new `rules.test.ts`/`useBrowserNavigationStack.test.ts` cases.
+ * - **Dead code, removed** — `MergeHistoryEntryOptions.homeLabel` (threaded
+ *   through `mergeHistoryEntry` → `useBrowserHistory`'s `commitVisit`) could
+ *   never actually affect anything: `mergeHistoryEntry` only calls
+ *   `labelFromUrl` after its own `isHistoryUrl(url)` guard has already excluded
+ *   `EMPTY_URL`, and `homeLabel` only changes `labelFromUrl`'s output on the
+ *   `url === EMPTY_URL` branch. Removed the field from `MergeHistoryEntryOptions`
+ *   and `UseBrowserHistoryOptions` rather than leaving a permanently-uncovered,
+ *   inert option in the public API.
+ * - **One line excluded from coverage, not faked** —
+ *   `useBrowserNavigationStack.ts`'s `if (!currentEntry) return;` guard inside
+ *   the `onNavigate`-firing effect was unreachable through the hook's public
+ *   API: every state transition it performs (`initialNavigationState`/
+ *   `recordNavigation`/`resolveNavigationHistoryDelta`/
+ *   `updateCurrentNavigationTitle`, all in `rules.ts`) preserves
+ *   `0 <= navigationIndex < navigationStack.length`, so `currentEntry` is always
+ *   defined in practice — the guard existed only because
+ *   `noUncheckedIndexedAccess` types the array-index read as possibly-undefined.
+ *   **Correction (2026-07-17, per the vendored `fixing-open-design-web` SKILL.md's
+ *   Phase 9.5 classification #4 — "TS-required fallback with no real runtime
+ *   path"):** an initial pass marked this with `/* v8 ignore next * /`, which
+ *   that skill's rule explicitly forbids ("never a valid outcome... under any
+ *   classification"). Fixed to the classification's actual prescription: the
+ *   `if` branch is deleted and the index read is a non-null assertion
+ *   (`state.navigationStack[state.navigationIndex]!`) with a one-line comment
+ *   explaining the invariant — no suppression comment anywhere in this feature.
+ * - **`ports.ts`/`types.ts` excluded from coverage** — both are
+ *   `export interface`/`export type` only; verified via the package's own
+ *   esbuild transform that they compile to zero emitted statements, so
+ *   v8/istanbul has no executable line to measure (reports 0/0 as 0%, not N/A).
+ *   Excluded via `--coverage.exclude`, documented inline at the top of each
+ *   file. `index.ts` (the barrel) is NOT excluded — it has real re-export
+ *   statements that execute on import, and nothing else in the suite imported
+ *   the barrel directly, so a small `index.test.ts` smoke test was added instead
+ *   (also catches a typo'd/missing re-export a concrete-module test wouldn't).
+ *
+ * Also closed several genuine (non-dead) branch-coverage gaps with targeted
+ * tests rather than exclusions: `recordNavigation`'s adjacent-entry rejoin and
+ * `replacePendingTarget` branches (the back/forward state-machine logic
+ * faithfully ported from the origin, previously untested); `recordNavigation`/
+ * `updateCurrentNavigationTitle` given an out-of-bounds `navigationIndex` (both
+ * are exported pure functions, so a malformed `BrowserNavigationState` is a
+ * legitimately reachable input, not hook-internal dead code); `faviconUrl`'s
+ * catch branch (`https://` with no host); `labelFromUrl`'s empty-hostname
+ * fallback (`file://` urls); `cleanIconUrl`'s `data:image/` branch; the
+ * `onNavigate` dedup-by-content check (a re-recorded identical url+title still
+ * produces a new object reference via `updateEntry`, so the effect re-runs and
+ * must dedupe on content, not just skip via unchanged reference);
+ * `BrowserViewportControls`'s custom-`presets`-with-no-match and empty-`presets`
+ * branches; and `createDefaultBrowserChromeDependencies`'s `historyLimit`-only
+ * option combination.
+ *
+ * **Result**: feature-aggregate coverage on the executable-code portion (i.e.
+ * excluding `ports.ts`/`types.ts` per above) is **100% Lines, 100% Branches,
+ * 100% Functions, 100% Statements** — up from 99.15% / 87.77% / 97.56% / 99.15%
+ * before this pass. Full suite: 101 tests across 7 files for this feature (up
+ * from 78), 476 tests across 60 files package-wide (up from 453).
+ * `pnpm --filter @jini/ui run typecheck` and `pnpm guard` both remain clean.
+ *
+ * ### Second follow-up pass (2026-07-17): `useX`/`useWiredX` wiring pairs, toolbox merge
+ *
+ * Two retrofits landed on this branch after the audit pass above:
+ *
+ * **`useWiredX` wirers.** Per the now-required `useX(port)` / zero-arg
+ * `useWiredX()` pattern (see `apps/web/src/features/memory/hooks/
+ * useMemoryConfig.hooks.ts` on the OD repo's `refactor/web-memory-slice` for
+ * the reference shape), audited every hook in this feature against
+ * `ports.ts`/`dependencies.ts` to see which actually take an injected port:
+ *
+ * - `useBrowserHistory` (takes `{ historyStorage: BrowserHistoryStoragePort }`)
+ *   — got `useWiredBrowserHistory(scopeKey, options?)`, binding a module-level
+ *   `createBrowserHistoryStorage()` singleton (the real, SSR-guarded
+ *   `localStorage`-backed implementation — a meaningful production default).
+ * - `useBrowserBridgeRegistration` (takes `{ bridgeRegistration:
+ *   BrowserBridgeRegistrationPort }`) — got `useWiredBrowserBridgeRegistration
+ *   (scopeKey, handle)`, binding `createNoopBrowserBridgeRegistration()`.
+ *   Unlike the history port, there's no generic "real" default here by design
+ *   (see `ports.ts`'s doc comment) — registering a handle only means something
+ *   in the context of a host's own external bridge. A host that wants real
+ *   bridge registration keeps calling `useBrowserBridgeRegistration` directly
+ *   with its own port, same carve-out as a swappable test port, just for a
+ *   real host implementation instead of a fake.
+ * - `useBrowserNavigationStack` — **no wirer added.** Its `options` (`initialUrl`/
+ *   `initialTitle`/`homeEntry`/`onNavigate`) are all plain local config, not a
+ *   `ports.ts` port; the hook owns its state entirely via `rules.ts`'s pure
+ *   functions. Nothing to wire.
+ *
+ * Both wirers exported from `index.ts`; no internal call sites needed updating
+ * — this feature has no top-level assembling component (that lives in the
+ * consuming host, out of scope per this feature's own "OUT OF SCOPE" section
+ * above), so `useBrowserHistory`/`useBrowserBridgeRegistration` had zero
+ * in-package callers before or after.
+ *
+ * **Toolbox merge.** Merged local branch `feat/ui-browser-toolbox` (commit
+ * `c3e7f21`, not pushed to origin) — a clean merge, no conflicts (it branched
+ * off a commit before `features/browser-chrome/` existed, so it never touched
+ * this feature's files). It adds `packages/ui/src/browser/` (`useDismissOnOutsideOrEscape`,
+ * `useGlobalKeydown`) as a thin wrapper over `utils/dom-subscriptions.ts`'s
+ * `subscribeOutsideClickOrEscape`. `BrowserViewportControls.tsx`'s hand-rolled
+ * `document.addEventListener('pointerdown'/'keydown', ...)` pair (the one
+ * disclosed DOM-outside-`dependencies.ts` deviation noted earlier in this
+ * section) is now `useDismissOnOutsideOrEscape(() => setOpen(false), { enabled:
+ * open, containerRef: menuRef })` — same `pointerdown`-outside-or-Escape
+ * behavior, dead local listener code removed. All of `BrowserViewportControls.test.tsx`'s
+ * existing outside-click/Escape assertions pass unchanged against the shared
+ * hook, confirming no behavior change.
+ *
+ * **Result**: still 100% Lines/Branches/Functions/Statements on the
+ * executable-code portion after both retrofits (wirers came with their own
+ * tests; the toolbox swap needed none new since it's a drop-in behind the same
+ * public component API). 103 tests across 7 files for this feature; 494 tests
+ * across 62 files package-wide (the toolbox branch's own `useDismissOnOutsideOrEscape.test.ts`/
+ * `useGlobalKeydown.test.ts` account for the rest of the file-count jump).
+ * `pnpm --filter @jini/ui run typecheck` and `pnpm guard` both remain clean.
+ *
+ * ---
+ *
+ * ### What did NOT get ported (and why)
+ *
+ * - **No `ports.ts`/`dependencies.ts`.** Unlike every other feature in this
+ *   package, `ListDetailPanel` has zero transport/DOM surface of its own — the
+ *   host supplies items, the current selection, and both renderers as plain
+ *   props/render-callbacks. There is nothing here for a port to abstract; the
+ *   DI-seam ceremony would be empty ceremony for a purely presentational
+ *   primitive, so it was skipped rather than added for form's sake.
+ * - **No visual skeleton markup.** `DesignSystemsTab.tsx`'s loading state is a
+ *   richly detailed, OD-styled skeleton (specific row-variation patterns, a
+ *   multi-section detail skeleton with its own CSS module). Per this package's
+ *   established precedent (no `.module.css` ported anywhere in `@jini/ui` —
+ *   see the flat-group porting section above), the loading state is generified
+ *   to `loading` + `loadingSidebarContent`/`loadingDetailContent` slots; a host
+ *   supplies its own skeleton visuals. The panel's only built-in loading-state
+ *   contribution is the `role="status" aria-busy aria-label` wrapper.
+ * - **Analytics, i18n dictionary keys, scope/surface/category filtering,
+ *   `SystemRow`'s thumbnail-resolution logic, publish/delete/make-default
+ *   actions** — all OD-specific, stay in OD.
+ *
+ * ### The root-level "flattened tree" quirk — verified, not assumed, and preserved
+ *
+ * `deriveTreeChildren` preserves a genuinely surprising piece of the origin's own `dirsAtCurrentDir`/`filesAtCurrentDir` `useMemo` verbatim: at the tree root (`currentDir === ''`), **every** file is pushed into `filesAtCurrentDir` — both root-level files and files nested under a subdirectory (which *also* separately contribute their top segment to `dirsAtCurrentDir`) — so the root view is a flattened "everything" listing with folders offered only as a secondary drill-down. Once navigated into any non-root directory, only files strictly at that one level are included. This asymmetry looked enough like a bug to warrant re-reading the real source line-by-line before committing to it (per the task's own "don't trust it blindly" instruction) — but it's exactly what the code does, so it's preserved rather than "fixed," with a `rules.test.ts` case asserting it explicitly (`'at the root, flattens every file (including nested) and surfaces the top-level dir'`).
+ *
+ * ### Where it landed, and why (`packages/ui/src/features/memory/`, not `chat-react`)
+ *
+ * Per `ADS-memory/reports/jini-port/god-components-extraction-plan.md`'s Consolidation map and
+ * `packages/ui/README.md`'s scope boundary: Memory is a settings/data-management
+ * surface (saved facts/preferences, an editable index, connector-sourced
+ * suggestions) — the same shape as the already-shipped `features/connectors/` and
+ * `features/settings-dialog/`, not a conversation surface. It lands alongside them
+ * in `@jini/ui`, using the **new** `types.ts`/`constants.ts`/`rules.ts`/`ports.ts`/
+ * `dependencies.ts`/`formatters.ts`/`async-commit-guard.ts`/`index.ts` at the
+ * feature's top level, `hooks/`+`components/` under a `react/` subfolder — the
+ * layout decided 2026-07-17, matching `features/viewer-shell/`/`features/asset-grid/`/
+ * `features/sketch-editor/`, not `features/connectors/`'s older flat layout.
+ *
+ * ### The connector-reconciliation-reducer decision (the "third piece")
+ *
+ * The task brief's third sought piece — "connector-reconciliation reducers" — does
+ * **not** come from PR #5228. Its real origin is Open Design's `main`-branch
+ * `apps/web/src/components/connectors-state.ts` (confirmed by cloning
+ * `https://github.com/leonaburime-ucla/open-design.git` at its default `main`
+ * branch and reading `connectors-state.ts` directly, since `codex/connector-memory-settings`,
+ * the branch originally suspected to hold this, diffs empty against current `main`
+ * — i.e. that logic already lives on `main` by some other route). Its 4 functions
+ * — `connectorAuthSnapshotChanged`/`hasConnectorStatusChanges`/`mergeConnectorCatalog`/
+ * `applyConnectorStatuses` — are a **separate, shared/generic** connector-list
+ * reconciliation module OD's `MemorySection.tsx` monolith imports directly
+ * (`import { hasConnectorStatusChanges } from './connectors-state'`), distinct from
+ * PR #5228's own Memory-local `mergeMemoryConnector`/`upsertMemoryConnector`/
+ * `applyMemoryConnectorStatus(es)`/`connectorStatusesChanged` (which the PR's own
+ * `rules.ts` comment calls "convenience duplication" of the shared module, kept
+ * slice-local per the PR's own stated slice conventions).
+ *
+ * Direct line-by-line comparison found `@jini/ui`'s `features/connectors/rules.ts`
+ * **already ships the generified port of `connectors-state.ts`** — from the
+ * `ConnectorsBrowser.tsx` canary task (2026-07-17), see that section above —
+ * as `mergeConnectors`/`applyConnectorStatuses`/`hasConnectorStatusChanges`/
+ * `connectorAuthSnapshotChanged`, operating on the generic `Connector`/
+ * `ConnectorStatusMap` types instead of OD's `ConnectorDetail`. Their logic is
+ * identical to `connectors-state.ts`'s (verified field-by-field), and `mergeConnectors`
+ * already subsumes what PR #5228's `mergeMemoryConnector`+`upsertMemoryConnector`
+ * did (single-connector merge + array upsert in one pass). This is exactly the
+ * overlap `god-components-extraction-plan.md`'s Consolidation map flagged in
+ * advance: *"Memory slice's connector reducers... substantially overlap
+ * `features/connectors`'... check whether it can import these directly instead of
+ * re-deriving equivalents."*
+ *
+ * **Decision**: `features/memory/rules.ts` imports `mergeConnectors`/
+ * `applyConnectorStatuses`/`hasConnectorStatusChanges` from `../connectors` and
+ * re-exposes two thin, Memory-specific conveniences over them
+ * (`upsertMemoryConnector` = `mergeConnectors(current, next ? [next] : [])`;
+ * `applyMemoryConnectorStatus` = the 1-item form of `applyConnectorStatuses`, used
+ * by the synthetic not-yet-detailed catalogue row). Only `connectorWithPendingAuthorization`
+ * (no equivalent in `features/connectors`) is genuinely new Memory-local logic.
+ * Memory's own connector type is `Connector` from `features/connectors/types.ts`
+ * directly (not a third near-duplicate of `ConnectorDetail`) — its shape already
+ * matches (id/name/provider/category/status/accountLabel/lastError/tools/toolCount/
+ * toolsNextCursor/toolsHasMore/logoUrl).
+ *
+ * ### The consolidation decision: ONE primitive, with evidence
+ *
+ * Read both in full before designing anything, per the task brief. Verdict:
+ * **consolidate into one `FileDropzone` primitive** — not two components
+ * sharing a subdirectory, one component with configuration knobs. Evidence:
+ *
+ * 1. **Both are the exact same underlying interaction** — native drag/drop +
+ *    click-to-browse, resolving to a flat `File[]` the host stages. The only
+ *    real differences are *display* (thumbnail grid + lightbox vs. a plain
+ *    prompt/names line) and which capabilities are wired on (paste,
+ *    directory-select, the loading heuristic) — configuration, not a different
+ *    component shape.
+ * 2. **They already shared the same directory-walking algorithm at the OD
+ *    source level**, just wired at different layers: `DropZone`'s `readDrop`
+ *    calls `filesFromDataTransfer` (a `webkitGetAsEntry` recursive directory
+ *    walker) internally before calling `onFiles`; `DesignSystemAssetDropzone`'s
+ *    `onDrop` prop just hands the raw `DataTransfer` up to its parent
+ *    (`DesignSystemFlow.tsx`'s `handleAssetDrop`), which calls the **exact
+ *    same** `filesFromDataTransfer` function (same file, one module-level
+ *    definition) before staging. One algorithm, two wiring styles — a textbook
+ *    case for one primitive owning it internally always, which is what this
+ *    port does (both variants now get directory-aware drop resolution for
+ *    free, including the thumbnail-grid variant, which never had it before).
+ * 3. **A duplicate of that same algorithm already existed a third time in this
+ *    package** — `features/asset-tree-browser/rules.ts`'s `filesFromDataTransfer`
+ *    (ported earlier from `DesignFilesPanel.tsx`, already fully generic). This
+ *    is exactly the failure mode flagged by an independent audit the night
+ *    this task was dispatched ("an undetected duplicate primitive") — so
+ *    rather than writing a *fourth* copy for `file-dropzone`, this task
+ *    promotes the shared logic to `utils/file-transfer.ts` (see below) and
+ *    both features now import the one implementation.
+ *
+ * ### What's deferred, and why
+ *
+ * Per the `html-viewer` classification above: the sandboxed-iframe/postMessage-bridge core this feature's `resolvePreviewDocument` port is designed to eventually delegate to (`@jini/renderers-react`, currently a stub) does not exist yet. This feature does **not** wait on it — a host without a real sandbox core can implement `resolvePreviewDocument` as an identity function for a plain, unsandboxed preview, or delegate to whatever iframe-rendering mechanism it already has.
+ *
+ * **Update (2026-09-02):** this was accurate when written, but the same day
+ * (2026-07-18) a parallel task landed the real sandboxed-iframe/postMessage
+ * core (see `packages/ui/src/renderers/archived provenance ledger`'s "sandboxed-iframe
+ * rendering core" section) — it now exists (`sandbox-bridge.ts`,
+ * `sandboxed-document.ts`), and the package itself was later folded into
+ * `@jini/ui` as `src/renderers/` rather than staying a separate
+ * `@jini/renderers-react` package. The default fake dependency here
+ * (`features/version-manager/dependencies.ts`) still uses a plain identity
+ * stub for `resolvePreviewDocument` — that's an intentional default per the
+ * fake-double convention, not evidence the real core is missing — a host
+ * wanting the real sandbox behavior wires it to `src/renderers/` itself. `FileVersionViewportControls` was not re-ported; the orchestrator binds directly to `features/viewer-shell/`'s already-shipped `ViewportToggleGroup` (confirmed identical `role="group"`/`aria-pressed` shape by reading both source components side by side) rather than shipping a second, competing viewport-toggle primitive.
+ *
+ * ### A real cross-environment coverage-merge gap found and worked around
+ *
+ * Drafting `dependencies.ts`'s tests initially split them the way this
+ * package's own documented convention prescribes for an SSR guard: a jsdom
+ * test file for the "browser present" cases plus a separate
+ * `// @vitest-environment node` companion for the "no `document` at all"
+ * case. Coverage on the merged report showed that one guard's branch
+ * (`typeof document === 'undefined'` in `exitFullscreen`) as **uncovered**
+ * even though the node companion file, run alone, proved it covered — a real
+ * `@vitest/coverage-v8` limitation merging branch-hit counts for one source
+ * file instrumented under two different test environments in the same
+ * `vitest run`. Fixed by moving every `createBrowserFullscreenPort` test
+ * into a single `// @vitest-environment node` file, using a hand-built fake
+ * `document` (a real `EventTarget` plus the two Fullscreen-API members this
+ * port reads) for the "document present" cases instead of jsdom's real
+ * global — eliminating the environment split (and the merge gap with it)
+ * rather than leaving a genuinely-tested branch looking uncovered in the
+ * aggregate. Worth flagging for any future task in this package relying on
+ * the jsdom-file-plus-node-companion pattern for an SSR guard: verify the
+ * *merged* per-file coverage, not just the companion file's own isolated
+ * number, before trusting it clears the bar.
+
+ * Archived provenance rationale:
+ * ## Merge note (2026-07-18): reconciling with `port/renderers-react-and-annotation-canvas`
+ *
+ * This branch (`feature/jini-ui-html-viewer`) and `port/renderers-react-and-annotation-canvas`
+ * (merged to `main` first) both independently built a sandboxed-iframe HTML
+ * rendering core in this package, from the same OD origin file
+ * (`runtime/srcdoc.ts`), without either branch seeing the other's work. On
+ * merge, both cores are kept side by side rather than one replacing the
+ * other, since `@jini/ui`'s `features/html-viewer` (this branch) is a real,
+ * already-wired consumer of the `sandboxed-document.ts`/`sandbox-bridge.ts`/
+ * `new-tab-preview.ts` core (`useSandboxBridge`, `openSandboxedPreviewInNewTab`),
+ * while the `srcdoc/build.ts` core is the one wired into `buildSrcDoc`,
+ * `SrcDocBridge`, `ArtifactView`, and the annotation-canvas integration above.
+ *
+ * The two cores' public surfaces are disjoint by name **except** for three
+ * generic string-splice helpers both sides ported from the same origin
+ * function shape: `injectAfterHeadOpen`, `injectBeforeHeadEnd`,
+ * `injectBeforeBodyEnd`. They are not behaviorally identical — `srcdoc/
+ * build.ts`'s versions add a `DOMParser`-based fallback for documents with no
+ * matching `<head>`/`<body>` tag at all, which `html-utils.ts`'s versions
+ * (deliberately, per `sandboxed-document.ts`'s own already-tested contract)
+ * resolve via a plain string prepend/append instead. Both fallback behaviors
+ * are real, disclosed, and independently test-covered (`html-utils.test.ts`
+ * vs. `srcdoc/build.test.ts`'s "falls back to DOMParser" cases), so rather
+ * than pick a winner, `srcdoc/build.ts`'s versions keep their original names
+ * in the public barrel (`src/index.ts`) as the canonical/more broadly-used
+ * ones, and `html-utils.ts`'s versions are re-exported under an
+ * `injectAfterHeadOpenStringOnly`/`injectBeforeHeadEndStringOnly`/
+ * `injectBeforeBodyEndStringOnly` alias. Neither implementation changed;
+ * `sandboxed-document.ts` still imports its own `html-utils.ts` internally
+ * under the original names, unaffected by the barrel-level alias.
+ *
+ * No other real naming collisions were found between the two cores'
+ * `package.json`, `types.ts`, or barrel exports — `package.json`'s
+ * dependency/devDependency lists were a union merge (both sides' React
+ * version pins already matched); `types.ts`'s two additions
+ * (`SandboxedDocumentOptions`/`SandboxedDocumentResult`/`SandboxBridgeMessage`/
+ * `SandboxBridgeHandler` from this branch, `ArtifactFile` + the `@jini/
+ * chat-core` manifest-vocabulary re-exports from `port/renderers-react-and-
+ * annotation-canvas`) are simply concatenated, not merged shape-for-shape,
+ * since neither side redeclares anything the other already had.
+ *
+ * ---
+ */
 // @jini-ai/ui — generic, product-neutral UI primitives.
-// See packages/ui/README.md for scope and packages/ui/source-map.md for
+// See packages/ui/README.md for scope and packages/ui/archived provenance ledger for
 // provenance (multiple porting tasks land content here in parallel; see
 // that file's per-section breakdown).
 //
@@ -12,6 +430,8 @@
 // points instead, so a consumer wanting e.g. `WorkingDirPicker`/`AgentIcon` never drags either
 // in — import the specific subpath when you actually want that editor.
 export * from './features/i18n/index.js';
+export * from './features/admin-widgets/index.js';
+export * from './features/panel-kit/index.js';
 export * from './features/observability/index.js';
 export * from './features/connectors/index.js';
 export * from './features/progress-card/index.js';

package/dist/react/components/ComponentKitPreview.js

@@ -37,7 +37,7 @@ export function ComponentKitPreview({ tokens, theme, onThemeChange }) {
         '--jini-kit-preview-body-font': tokens.bodyFont,
         '--jini-kit-preview-font-size': `${tokens.fontSize}px`,
     };
-    const primaryText = readableTextColor(tokens.colorPrimary);
+    const primaryText = readableTextColor({ hex: tokens.colorPrimary });
     return (_jsxs("div", { className: "jini-component-kit-preview", style: style, "data-theme": theme, children: [_jsxs("div", { className: "jini-component-kit-preview__head", children: [_jsx("strong", { children: t('Preview') }), _jsx("span", { children: t('Component kit') })] }), _jsxs("div", { className: "jini-component-kit-preview__kit", children: [_jsxs("div", { className: "jini-component-kit-preview__tabs", children: [_jsx("button", { type: "button", className: theme === 'light' ? 'active' : '', "aria-pressed": theme === 'light', onClick: () => onThemeChange('light'), children: t('Light') }), _jsx("button", { type: "button", className: theme === 'dark' ? 'active' : '', "aria-pressed": theme === 'dark', onClick: () => onThemeChange('dark'), children: t('Dark') }), _jsx("span", { children: t('Component kit') })] }), _jsxs("div", { className: "jini-component-kit-preview__stage", children: [_jsxs("span", { className: "jini-component-kit-preview__badge", children: [tokens.name, " \u00B7 ", t('Default theme')] }), _jsx("h3", { children: t('Component kit for {name}', { name: tokens.name }) }), _jsx("p", { children: tokens.description || t('A generated component style guide.') }), _jsxs("div", { className: "jini-component-kit-preview__specimen", children: [_jsxs("section", { children: [_jsx("h4", { children: t('Buttons') }), _jsx("small", { children: t('Common button variants at this theme\'s tokens.') }), _jsxs("div", { className: "jini-component-kit-preview__button-row", children: [_jsx("button", { type: "button", className: "primary", style: { color: primaryText }, children: t('Primary') }), _jsx("button", { type: "button", children: t('Default') }), _jsx("button", { type: "button", className: "dashed", children: t('Dashed') }), _jsx("button", { type: "button", className: "text", children: t('Text') }), _jsx("button", { type: "button", className: "link", children: t('Link') })] }), _jsxs("div", { className: "jini-component-kit-preview__size-row", children: [_jsx("button", { type: "button", className: "primary small", style: { color: primaryText }, children: t('Small') }), _jsx("button", { type: "button", className: "primary", style: { color: primaryText }, children: t('Medium') }), _jsx("button", { type: "button", className: "primary large", style: { color: primaryText }, children: t('Large') })] })] }), _jsxs("section", { children: [_jsx("h4", { children: t('Type scale') }), _jsxs("small", { children: [tokens.displayFont, " \u00B7 ", tokens.bodyFont] }), _jsxs("div", { className: "jini-component-kit-preview__type-row", children: [_jsx("strong", { children: "Aa" }), _jsx("span", { children: "Aa" }), _jsx("small", { children: "Aa" })] })] })] })] })] }), _jsxs("div", { className: "jini-component-kit-preview__token-row", "aria-label": t('Extracted tokens'), children: [_jsx(TokenChip, { label: "colorPrimary", hex: tokens.colorPrimary }), _jsx(TokenChip, { label: "colorPrimaryBg", hex: tokens.colorPrimaryBg }), _jsx(TokenChip, { label: "colorPrimaryHover", hex: tokens.colorPrimaryHover }), _jsx(TokenChip, { label: "colorPrimaryActive", hex: tokens.colorPrimaryActive }), _jsx(ValueChip, { label: "fontSize", value: String(tokens.fontSize) }), _jsx(ValueChip, { label: "borderRadius", value: String(tokens.radius) })] })] }));
 }
 //# sourceMappingURL=ComponentKitPreview.js.map

package/dist/react/components/EditorIcon.d.ts

@@ -4,7 +4,7 @@ interface Props {
     size?: number;
 }
 /**
- * Renders a host-supplied editor/target's brand mark by string key, with a
+ * Renders an editor/target glyph by string key using the host's theme, with a
  * graceful neutral folder-tile fallback for unregistered ids. Same
  * lookup-table shape as `Icon`/`AgentIcon`/`RemixIcon`, but keyed on inline
  * SVG glyphs + a bg/fg color pair instead of an external asset or webfont

package/dist/react/components/EditorIcon.js

@@ -11,23 +11,23 @@ function vscodeLogo(size) {
 }
 function finderLogo(size) {
     const s = size * 0.78;
-    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("rect", { width: "24", height: "24", rx: "5.4", fill: "#2f9bff" }), _jsx("path", { d: "M12 0h6.6A5.4 5.4 0 0 1 24 5.4v13.2a5.4 5.4 0 0 1-5.4 5.4H12Z", fill: "#77c2ff" }), _jsx("path", { d: "M11.6 2.2c-1.4 2.4-2.1 5.5-2.1 9.8s.7 7.4 2.1 9.8", fill: "none", stroke: "#0b4f93", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("path", { d: "M7.4 9.1h.1M16.4 9.1h.1", stroke: "#0b4f93", strokeWidth: "1.8", strokeLinecap: "round" }), _jsx("path", { d: "M7.4 15.2c2.9 1.6 6.3 1.6 9.2 0", fill: "none", stroke: "#0b4f93", strokeWidth: "1.2", strokeLinecap: "round" })] }));
+    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("rect", { width: "24", height: "24", rx: "5.4", fill: "var(--jini-primary)" }), _jsx("path", { d: "M12 0h6.6A5.4 5.4 0 0 1 24 5.4v13.2a5.4 5.4 0 0 1-5.4 5.4H12Z", fill: "var(--jini-primary)" }), _jsx("path", { d: "M11.6 2.2c-1.4 2.4-2.1 5.5-2.1 9.8s.7 7.4 2.1 9.8", fill: "none", stroke: "var(--jini-text)", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("path", { d: "M7.4 9.1h.1M16.4 9.1h.1", stroke: "var(--jini-text)", strokeWidth: "1.8", strokeLinecap: "round" }), _jsx("path", { d: "M7.4 15.2c2.9 1.6 6.3 1.6 9.2 0", fill: "none", stroke: "var(--jini-text)", strokeWidth: "1.2", strokeLinecap: "round" })] }));
 }
 function terminalLogo(size) {
     const s = size * 0.76;
-    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "1.5", y: "3", width: "21", height: "18", rx: "3", fill: "#111" }), _jsx("path", { d: "m6.2 8 4 4-4 4", stroke: "#9be37a", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12.8 16h5", stroke: "#9be37a", strokeWidth: "2.2", strokeLinecap: "round" })] }));
+    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "1.5", y: "3", width: "21", height: "18", rx: "3", fill: "var(--jini-text)" }), _jsx("path", { d: "m6.2 8 4 4-4 4", stroke: "var(--jini-success)", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12.8 16h5", stroke: "var(--jini-success)", strokeWidth: "2.2", strokeLinecap: "round" })] }));
 }
 function folderLogo(size) {
     const s = size * 0.76;
-    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M2.75 5.75A2.75 2.75 0 0 1 5.5 3h4.32c.74 0 1.43.36 1.86.96l1.1 1.54h5.72a2.75 2.75 0 0 1 2.75 2.75v9.5a2.75 2.75 0 0 1-2.75 2.75h-13A2.75 2.75 0 0 1 2.75 17.75z", fill: "currentColor" }), _jsx("path", { d: "M3.7 8.1h16.6", stroke: "#ffffff", strokeWidth: "1.25", strokeLinecap: "round", opacity: ".7" })] }));
+    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M2.75 5.75A2.75 2.75 0 0 1 5.5 3h4.32c.74 0 1.43.36 1.86.96l1.1 1.54h5.72a2.75 2.75 0 0 1 2.75 2.75v9.5a2.75 2.75 0 0 1-2.75 2.75h-13A2.75 2.75 0 0 1 2.75 17.75z", fill: "currentColor" }), _jsx("path", { d: "M3.7 8.1h16.6", stroke: "var(--jini-bg)", strokeWidth: "1.25", strokeLinecap: "round", opacity: ".7" })] }));
 }
 function qoderLogo(size) {
     const s = size * 0.76;
-    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("rect", { width: "24", height: "24", rx: "5", fill: "#ffb15e" }), _jsx("path", { d: "M12 4 20 12l-8 8-8-8 8-8Z", fill: "#667085" }), _jsx("path", { d: "M12 8.2 15.8 12 12 15.8 8.2 12 12 8.2Z", fill: "#1f2937", opacity: ".2" })] }));
+    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("rect", { width: "24", height: "24", rx: "5", fill: "var(--jini-warning)" }), _jsx("path", { d: "M12 4 20 12l-8 8-8-8 8-8Z", fill: "var(--jini-muted)" }), _jsx("path", { d: "M12 8.2 15.8 12 12 15.8 8.2 12 12 8.2Z", fill: "var(--jini-text)", opacity: ".2" })] }));
 }
 function antigravityLogo(size) {
     const s = size * 0.78;
-    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { width: "24", height: "24", rx: "5", fill: "#f8fafd" }), _jsx("path", { d: "M6.5 15.4c1.5 2.4 5.1 3.2 8 1.8 2.9-1.4 4.2-4.5 2.7-6.9", stroke: "#4285f4", strokeWidth: "2.1", strokeLinecap: "round" }), _jsx("path", { d: "M17.5 8.6c-1.5-2.4-5.1-3.2-8-1.8-2.9 1.4-4.2 4.5-2.7 6.9", stroke: "#ea4335", strokeWidth: "2.1", strokeLinecap: "round" }), _jsx("path", { d: "M8.2 8.3 12 12l3.8 3.7", stroke: "#34a853", strokeWidth: "2.1", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "12", r: "2", fill: "#fbbc04" })] }));
+    return (_jsxs("svg", { width: s, height: s, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { width: "24", height: "24", rx: "5", fill: "var(--jini-bg)" }), _jsx("path", { d: "M6.5 15.4c1.5 2.4 5.1 3.2 8 1.8 2.9-1.4 4.2-4.5 2.7-6.9", stroke: "var(--jini-primary)", strokeWidth: "2.1", strokeLinecap: "round" }), _jsx("path", { d: "M17.5 8.6c-1.5-2.4-5.1-3.2-8-1.8-2.9 1.4-4.2 4.5-2.7 6.9", stroke: "var(--jini-danger)", strokeWidth: "2.1", strokeLinecap: "round" }), _jsx("path", { d: "M8.2 8.3 12 12l3.8 3.7", stroke: "var(--jini-success)", strokeWidth: "2.1", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "12", r: "2", fill: "var(--jini-warning)" })] }));
 }
 const cursorPath = 'M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23';
 const zedPath = 'M2.25 1.5a.75.75 0 0 0-.75.75v16.5H0V2.25A2.25 2.25 0 0 1 2.25 0h20.095c1.002 0 1.504 1.212.795 1.92L10.764 14.298h3.486V12.75h1.5v1.922a1.125 1.125 0 0 1-1.125 1.125H9.264l-2.578 2.578h11.689V9h1.5v9.375a1.5 1.5 0 0 1-1.5 1.5H5.185L2.562 22.5H21.75a.75.75 0 0 0 .75-.75V5.25H24v16.5A2.25 2.25 0 0 1 21.75 24H1.655C.653 24 .151 22.788.86 22.08L13.19 9.75H9.75v1.5h-1.5V9.375A1.125 1.125 0 0 1 9.375 8.25h5.314l2.625-2.625H5.625V15h-1.5V5.625a1.5 1.5 0 0 1 1.5-1.5h13.19L21.438 1.5z';
@@ -37,23 +37,23 @@ const webstormPath = 'M0 0v24h24V0H0zm17.889 2.889c1.444 0 2.667.444 3.667 1.278
 const ideaPath = 'M0 0v24h24V0zm3.723 3.111h5v1.834h-1.39v6.277h1.39v1.834h-5v-1.834h1.444V4.945H3.723zm11.055 0H17v6.5c0 .612-.055 1.111-.222 1.556-.167.444-.39.777-.723 1.11-.277.279-.666.557-1.11.668a3.933 3.933 0 0 1-1.445.278c-.778 0-1.444-.167-1.944-.445a4.81 4.81 0 0 1-1.279-1.056l1.39-1.555c.277.334.555.555.833.722.277.167.611.278.945.278.389 0 .721-.111 1-.389.221-.278.333-.667.333-1.278zM2.222 19.5h9V21h-9z';
 const warpPath = 'M12.035 2.723h9.253A2.712 2.712 0 0 1 24 5.435v10.529a2.712 2.712 0 0 1-2.712 2.713H8.047Zm-1.681 2.6L6.766 19.677h5.598l-.399 1.6H2.712A2.712 2.712 0 0 1 0 18.565V8.036a2.712 2.712 0 0 1 2.712-2.712Z';
 const EDITORS = {
-    vscode: { bg: '#007ACC', fg: '#ffffff', glyph: vscodeLogo },
-    cursor: { bg: '#0a0a0a', fg: '#ffffff', glyph: simplePath(cursorPath) },
-    windsurf: { bg: '#f7fffb', fg: '#0b100f', glyph: simplePath(windsurfPath) },
-    zed: { bg: '#1348DC', fg: '#ffffff', glyph: simplePath(zedPath) },
-    qoder: { bg: '#ffb15e', fg: '#1f2937', glyph: qoderLogo },
-    antigravity: { bg: '#ffffff', fg: '#1f2937', glyph: antigravityLogo },
-    webstorm: { bg: '#000000', fg: '#ffffff', glyph: simplePath(webstormPath) },
-    idea: { bg: '#000000', fg: '#ffffff', glyph: simplePath(ideaPath) },
-    xcode: { bg: '#147EFB', fg: '#ffffff', glyph: simplePath(xcodePath) },
-    finder: { bg: '#3097f6', fg: '#ffffff', glyph: finderLogo },
-    explorer: { bg: '#fbbf24', fg: '#1a1a1a', glyph: folderLogo },
-    'file-manager': { bg: '#6b7280', fg: '#ffffff', glyph: folderLogo },
-    terminal: { bg: '#111111', fg: '#9be37a', glyph: terminalLogo },
-    warp: { bg: '#01A4FF', fg: '#ffffff', glyph: simplePath(warpPath) },
+    vscode: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: vscodeLogo },
+    cursor: { bg: 'var(--jini-text)', fg: 'var(--jini-bg)', glyph: simplePath(cursorPath) },
+    windsurf: { bg: 'var(--jini-bg)', fg: 'var(--jini-text)', glyph: simplePath(windsurfPath) },
+    zed: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: simplePath(zedPath) },
+    qoder: { bg: 'var(--jini-warning)', fg: 'var(--jini-text)', glyph: qoderLogo },
+    antigravity: { bg: 'var(--jini-bg)', fg: 'var(--jini-text)', glyph: antigravityLogo },
+    webstorm: { bg: 'var(--jini-text)', fg: 'var(--jini-bg)', glyph: simplePath(webstormPath) },
+    idea: { bg: 'var(--jini-text)', fg: 'var(--jini-bg)', glyph: simplePath(ideaPath) },
+    xcode: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: simplePath(xcodePath) },
+    finder: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: finderLogo },
+    explorer: { bg: 'var(--jini-warning)', fg: 'var(--jini-text)', glyph: folderLogo },
+    'file-manager': { bg: 'var(--jini-muted)', fg: 'var(--jini-bg)', glyph: folderLogo },
+    terminal: { bg: 'var(--jini-text)', fg: 'var(--jini-success)', glyph: terminalLogo },
+    warp: { bg: 'var(--jini-primary)', fg: 'var(--jini-bg)', glyph: simplePath(warpPath) },
 };
 /**
- * Renders a host-supplied editor/target's brand mark by string key, with a
+ * Renders an editor/target glyph by string key using the host's theme, with a
  * graceful neutral folder-tile fallback for unregistered ids. Same
  * lookup-table shape as `Icon`/`AgentIcon`/`RemixIcon`, but keyed on inline
  * SVG glyphs + a bg/fg color pair instead of an external asset or webfont
@@ -66,8 +66,8 @@ export function EditorIcon({ editorId, size = 16 }) {
         return (_jsx("span", { className: "editor-icon", style: {
                 width: size,
                 height: size,
-                background: '#9ca3af',
-                color: '#ffffff',
+                background: 'var(--jini-muted)',
+                color: 'var(--jini-bg)',
             }, children: _jsx("svg", { width: size * 0.6, height: size * 0.6, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }) }) }));
     }
     return (_jsx("span", { className: "editor-icon", style: { width: size, height: size, background: visual.bg, color: visual.fg }, children: visual.glyph(size) }));

package/dist/react/components/ExportDiagnosticsButton.d.ts

@@ -44,7 +44,12 @@ export declare function fallbackFilename(prefix: string): string;
  * download via a transient anchor. Resolves with the saved filename; throws an
  * Error (carrying the server message when available) on a non-OK response.
  */
-export declare function exportViaHttp(exportPath: string, filenamePrefix: string): Promise<{
+export declare function exportViaHttp({ exportPath, filenamePrefix }: {
+    exportPath: string;
+    filenamePrefix: string;
+}, { fetch }?: {
+    fetch?: typeof globalThis.fetch;
+}): Promise<{
     filename: string;
 }>;
 export type ExportLabels = Partial<{
@@ -62,6 +67,8 @@ export interface ExportDiagnosticsButtonProps {
      *  present, used instead of the HTTP fallback. */
     desktopBridge?: DesktopExportBridge;
     labels?: ExportLabels;
+    /** Native fetch port used for the browser archive download. */
+    fetch?: typeof globalThis.fetch;
 }
 export declare const DEFAULT_EXPORT_LABELS: {
     button: string;

package/dist/react/components/ExportDiagnosticsButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { FETCH_TIMEOUT_MS, fetchWithTimeout } from '@jini-ai/platform/fetch-with-timeout';
+import { requestWithTimeout } from '../../utils/browser-request.js';
 import { Icon } from './Icon.js';
 export const STATUS_CLEAR_MS = 6000;
 /**
@@ -35,10 +35,10 @@ export function fallbackFilename(prefix) {
  * download via a transient anchor. Resolves with the saved filename; throws an
  * Error (carrying the server message when available) on a non-OK response.
  */
-export async function exportViaHttp(exportPath, filenamePrefix) {
+export async function exportViaHttp({ exportPath, filenamePrefix }, { fetch } = {}) {
     // UPLOAD, not QUICK: this downloads a diagnostics archive — a large-payload transfer, the same
     // risk profile as an asset upload, not a metadata read.
-    const res = await fetchWithTimeout(exportPath, { credentials: 'same-origin' }, { timeoutMs: FETCH_TIMEOUT_MS.UPLOAD });
+    const res = await requestWithTimeout({ url: exportPath, timeoutMs: 120_000 }, { ...(fetch === undefined ? {} : { fetch }), init: { credentials: 'same-origin' } });
     if (!res.ok) {
         let message = `${res.status} ${res.statusText}`;
         try {
@@ -105,7 +105,7 @@ export function useAutoClearStatus(clearMs = STATUS_CLEAR_MS) {
  * {@link ExportDiagnosticsButton} is the dumb consumer.
  */
 export function useExportDiagnostics(props) {
-    const { exportPath = '/api/diagnostics/export', filenamePrefix = 'diagnostics', desktopBridge, labels, } = props;
+    const { exportPath = '/api/diagnostics/export', filenamePrefix = 'diagnostics', desktopBridge, labels, fetch, } = props;
     const t = resolveExportLabels(labels);
     const { status, setStatus, scheduleClear } = useAutoClearStatus();
     const runExport = useCallback(async () => {
@@ -128,7 +128,7 @@ export function useExportDiagnostics(props) {
                 scheduleClear();
                 return;
             }
-            const { filename } = await exportViaHttp(exportPath, filenamePrefix);
+            const { filename } = await exportViaHttp({ exportPath, filenamePrefix }, fetch === undefined ? {} : { fetch });
             setStatus({ kind: 'success', message: t.success(filename) });
             scheduleClear();
         }
@@ -137,7 +137,7 @@ export function useExportDiagnostics(props) {
             setStatus({ kind: 'error', message: t.failed(message) });
             scheduleClear();
         }
-    }, [desktopBridge, exportPath, filenamePrefix, scheduleClear, setStatus, status.kind, t]);
+    }, [desktopBridge, exportPath, filenamePrefix, fetch, scheduleClear, setStatus, status.kind, t]);
     return { status, busy: status.kind === 'busy', labels: t, runExport };
 }
 /**