@opengeni/react 3.3.2 → 3.4.1-canary.38960406141001

package/src/components/artifacts/published-html-artifact-frame.tsx

@@ -1,4 +1,21 @@
-import type { CSSProperties } from "react";
+import {
+  SiteBridgeHost,
+  injectSiteBridgeBootstrap,
+  type SiteBridgeToolHandlers,
+  type SiteBridgeViewerHandlers,
+} from "@opengeni/sdk/site-bridge-host";
+import type { OpenGeniSiteSignInResult, OpenGeniSiteViewer } from "@opengeni/sdk/site";
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+import { resolveSiteClientScript } from "@opengeni/sdk/site-document";
+
+export {
+  SiteBridgeDocumentLease,
+  SiteBridgeRequestRegistry,
+  handleSiteBridgeRequest,
+  openGeniSiteBridgePortFromBootstrap,
+  siteBridgeError,
+  siteBridgeReadyMessage,
+} from "@opengeni/sdk/site-bridge-host";
 
 export const PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX = [
   "allow-downloads",
@@ -14,25 +31,125 @@ export const PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX = [
 
 export type PublishedHtmlArtifactFrameProps = {
   html: string;
+  autoHeight?: boolean;
+  theme?: "light" | "dark";
   title: string;
   className?: string;
   style?: CSSProperties;
+  toolBridge?: PublishedHtmlArtifactToolBridge;
+  /**
+   * The signed-in member viewing the Site, answered to `site.viewer`. When
+   * omitted the frame does not advertise viewers and the SDK resolves `null`.
+   */
+  viewer?: OpenGeniSiteViewer;
+  /**
+   * Answer `site.auth.signIn()`. The console viewer is already signed in, so
+   * the default resolves `{ started: false }`.
+   */
+  onSignIn?: () => Promise<OpenGeniSiteSignInResult> | OpenGeniSiteSignInResult;
 };
 
+/** Host handlers for Site tools and the Site HTTP channel (see `@opengeni/sdk/site-bridge-host`). */
+export type PublishedHtmlArtifactToolBridge = SiteBridgeToolHandlers;
+
+export function publishedHtmlArtifactDocument(html: string, toolBridgeEnabled: boolean): string {
+  if (!toolBridgeEnabled) return html;
+  return injectSiteBridgeBootstrap(resolveSiteClientScript(html));
+}
+
 /**
  * Render exact published HTML in an opaque-origin iframe. Artifact scripts,
- * external resources, forms, popups, and downloads work without granting
- * parent-origin authority, shared cookies/storage, or top-level navigation.
+ * external resources, forms, popups, downloads, and the host-filtered tool
+ * bridge work without granting parent-origin authority, shared cookies/storage,
+ * or top-level navigation.
  */
 export function PublishedHtmlArtifactFrame(props: PublishedHtmlArtifactFrameProps) {
+  const frameRef = useRef<HTMLIFrameElement | null>(null);
+  const [height, setHeight] = useState<number>();
+  useEffect(() => {
+    if (!props.autoHeight) return;
+    const receive = (event: MessageEvent) => {
+      if (
+        event.source !== frameRef.current?.contentWindow ||
+        event.data?.type !== "opengeni.preview.height"
+      )
+        return;
+      const value = event.data.height;
+      if (typeof value === "number" && Number.isFinite(value))
+        setHeight(Math.min(1200, Math.max(80, value)));
+    };
+    window.addEventListener("message", receive);
+    return () => window.removeEventListener("message", receive);
+  }, [props.autoHeight]);
+  useEffect(() => {
+    frameRef.current?.contentWindow?.postMessage(
+      { type: "opengeni.preview.theme", theme: props.theme },
+      "*",
+    );
+  }, [props.theme]);
+  const bridgeRef = useRef(props.toolBridge);
+  const viewerRef = useRef(siteViewerHandlers(props.viewer, props.onSignIn));
+  const onFrameLoadRef = useRef<() => void>(() => undefined);
+  const frameLoadPendingRef = useRef(false);
+  // The bridge (and its bootstrap script) exists only when the host offers
+  // something over it: tools/Site HTTP, or the viewer.
+  const toolBridgeEnabled = props.toolBridge !== undefined || props.viewer !== undefined;
+  useEffect(() => {
+    bridgeRef.current = props.toolBridge;
+  }, [props.toolBridge]);
+  useEffect(() => {
+    viewerRef.current = siteViewerHandlers(props.viewer, props.onSignIn);
+  }, [props.viewer, props.onSignIn]);
+  useEffect(() => {
+    if (!toolBridgeEnabled || typeof window === "undefined") return;
+    const host = new SiteBridgeHost({
+      tools: () => bridgeRef.current,
+      viewer: () => viewerRef.current,
+    });
+    const onFrameLoad = () => {
+      frameLoadPendingRef.current = false;
+      const frameWindow = frameRef.current?.contentWindow ?? null;
+      if (!frameWindow) return;
+      host.load(frameWindow);
+    };
+    onFrameLoadRef.current = onFrameLoad;
+    if (frameLoadPendingRef.current) {
+      frameLoadPendingRef.current = false;
+      onFrameLoad();
+    }
+    return () => {
+      onFrameLoadRef.current = () => undefined;
+      host.close();
+    };
+  }, [props.html, toolBridgeEnabled]);
   return (
     <iframe
+      ref={frameRef}
       title={props.title}
       sandbox={PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX}
       referrerPolicy="no-referrer"
-      srcDoc={props.html}
+      srcDoc={publishedHtmlArtifactDocument(props.html, toolBridgeEnabled)}
+      onLoad={() => {
+        frameRef.current?.contentWindow?.postMessage(
+          { type: "opengeni.preview.theme", theme: props.theme },
+          "*",
+        );
+        frameLoadPendingRef.current = true;
+        onFrameLoadRef.current();
+      }}
       className={props.className}
-      style={props.style}
+      style={{ ...props.style, ...(props.autoHeight && height ? { height } : {}) }}
     />
   );
 }
+
+function siteViewerHandlers(
+  viewer: OpenGeniSiteViewer | undefined,
+  onSignIn: PublishedHtmlArtifactFrameProps["onSignIn"],
+): SiteBridgeViewerHandlers | undefined {
+  if (!viewer) return undefined;
+  return {
+    viewer: () => viewer,
+    signIn: async () => (onSignIn ? await onSignIn() : { started: false }),
+  };
+}

package/src/components/artifacts/session-artifact-viewer.tsx

@@ -0,0 +1,378 @@
+import { SESSION_SCOPE_HEADER, type ClientConfig, type OpenGeniClient } from "@opengeni/sdk";
+import { createEditableArtifactReplicaId } from "@opengeni/sdk/editable-artifacts";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { cn } from "../../lib/cn";
+import { useOpenGeni, type ClientOverride } from "../../session-context";
+import {
+  ArtifactLabelsProvider,
+  ArtifactLoading,
+  ArtifactProblem,
+  ArtifactViewerHeader,
+  artifactLoadErrorView,
+  useArtifactLabels,
+  type ArtifactKind,
+  type ArtifactLabels,
+} from "./artifact-chrome";
+import { EditableArtifactView, type EditableArtifactRuntimes } from "./editable-artifact-view";
+import type { SiteToolBridgeFactory } from "./chat-interactive-block";
+import { SiteView } from "./site-view";
+
+/** An artifact opened from a session: the targets agent links and Site previews name. */
+export type SessionArtifactTarget = Readonly<
+  | { kind: "editable-artifact"; artifactId: string; title?: string | undefined }
+  | { kind: "site"; artifactId: string; title?: string | undefined }
+>;
+
+/** Every string the viewer shows, including its Site frame and states. */
+export type SessionArtifactViewerLabels = Partial<ArtifactLabels>;
+
+export type SessionArtifactViewerProps = ClientOverride &
+  Readonly<{
+    /** The conversation the artifact belongs to; the proxy only serves its artifacts. */
+    sessionId: string;
+    target: SessionArtifactTarget;
+    onClose: () => void;
+    /** Show a Back control, for example to return to the conversation on phones. */
+    onBack?: (() => void) | undefined;
+    /** Browser kernels and Worker for documents, spreadsheets, and presentations. */
+    editableRuntimes?: EditableArtifactRuntimes | undefined;
+    theme?: "light" | "dark" | undefined;
+    /** Host-owned Site API access; omit it and Sites render without workspace tools. */
+    siteToolBridge?: SiteToolBridgeFactory | undefined;
+    labels?: SessionArtifactViewerLabels | undefined;
+    className?: string | undefined;
+  }>;
+
+type ViewerClient = Pick<
+  OpenGeniClient,
+  | "withHeaders"
+  | "apiUrl"
+  | "fetchApi"
+  | "getClientConfig"
+  | "getEditableArtifact"
+  | "getWorkspaceArtifact"
+  | "getWorkspaceArtifactHtml"
+>;
+
+const viewerClientKeys = new WeakMap<ViewerClient, string>();
+
+function viewerClientKey(client: ViewerClient): string {
+  let key = viewerClientKeys.get(client);
+  if (!key) {
+    key = crypto.randomUUID();
+    viewerClientKeys.set(client, key);
+  }
+  return key;
+}
+
+/**
+ * A host-mountable viewer for one editable artifact or Site from a session,
+ * with its own header (title, Back, Close). Mount it in any sized container
+ * (a side panel, a sheet); it fills it. Data flows through the provider's
+ * client and `createSessionProxyHandler({ artifacts: true })`, scoped to
+ * `sessionId`.
+ */
+export function SessionArtifactViewer({ labels, ...props }: SessionArtifactViewerProps) {
+  return (
+    <ArtifactLabelsProvider labels={labels}>
+      <Viewer {...props} />
+    </ArtifactLabelsProvider>
+  );
+}
+
+function Viewer({
+  client: clientOverride,
+  workspaceId: workspaceOverride,
+  sessionId,
+  target,
+  onClose,
+  onBack,
+  editableRuntimes,
+  theme,
+  siteToolBridge,
+  className,
+}: Omit<SessionArtifactViewerProps, "labels">) {
+  const labels = useArtifactLabels();
+  const context = useOpenGeni({ client: clientOverride, workspaceId: workspaceOverride });
+  const base = context.client as unknown as ViewerClient;
+  const workspaceId = context.workspaceId;
+  const client = useMemo(
+    () => base.withHeaders({ [SESSION_SCOPE_HEADER]: sessionId }),
+    [base, sessionId],
+  );
+  const [loaded, setLoaded] = useState<{
+    key: string;
+    client: ViewerClient;
+    workspaceId: string;
+    title: string;
+    kind: ArtifactKind | null;
+  } | null>(null);
+  const targetKey = `${target.kind}:${target.artifactId}`;
+  const current =
+    loaded?.key === targetKey && loaded.client === client && loaded.workspaceId === workspaceId
+      ? loaded
+      : null;
+  const kind: ArtifactKind | null = target.kind === "site" ? "site" : (current?.kind ?? null);
+  const [unavailable, setUnavailable] = useState<{
+    key: string;
+    client: ViewerClient;
+    workspaceId: string;
+  } | null>(null);
+  const markUnavailable = useCallback(
+    () => setUnavailable({ key: targetKey, client, workspaceId }),
+    [client, targetKey, workspaceId],
+  );
+  const title =
+    current?.title ??
+    target.title ??
+    (unavailable?.key === targetKey &&
+    unavailable.client === client &&
+    unavailable.workspaceId === workspaceId
+      ? labels.artifact
+      : labels.opening);
+  return (
+    <section
+      aria-label={title}
+      data-og-artifact-viewer={target.kind}
+      className={cn("og-root flex h-full min-h-0 w-full min-w-0 flex-col bg-bg text-fg", className)}
+    >
+      <ArtifactViewerHeader
+        kind={kind}
+        title={title}
+        onBack={onBack}
+        backLabel={labels.back}
+        onClose={onClose}
+        closeLabel={labels.close}
+      />
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+        {target.kind === "site" ? (
+          <SiteView
+            key={targetKey}
+            client={client}
+            workspaceId={workspaceId}
+            siteId={target.artifactId}
+            theme={theme}
+            toolBridge={siteToolBridge}
+            showTitle={false}
+            onTitle={(next) =>
+              setLoaded({ key: targetKey, client, workspaceId, title: next, kind: "site" })
+            }
+          />
+        ) : (
+          <EditableBody
+            key={targetKey}
+            client={client}
+            workspaceId={workspaceId}
+            sessionId={sessionId}
+            artifactId={target.artifactId}
+            runtimes={editableRuntimes}
+            onOpened={(next, modality) =>
+              setLoaded({ key: targetKey, client, workspaceId, title: next, kind: modality })
+            }
+            onUnavailable={markUnavailable}
+          />
+        )}
+      </div>
+    </section>
+  );
+}
+
+function EditableBody({
+  client,
+  workspaceId,
+  sessionId,
+  artifactId,
+  runtimes,
+  onOpened,
+  onUnavailable,
+}: {
+  client: ViewerClient;
+  workspaceId: string;
+  sessionId: string;
+  artifactId: string;
+  runtimes: EditableArtifactRuntimes | undefined;
+  onOpened: (title: string, modality: ArtifactKind) => void;
+  onUnavailable: () => void;
+}) {
+  const labels = useArtifactLabels();
+  const clientKey = viewerClientKey(client);
+  const [retryEpoch, setRetryEpoch] = useState(0);
+  const [configState, setConfigState] = useState<{
+    client: ViewerClient;
+    workspaceId: string;
+    sessionId: string;
+    result:
+      | { kind: "ready"; config: Exclude<NonNullable<ClientConfig["artifacts"]>, false> }
+      | { kind: "unavailable" }
+      | { kind: "error"; error: unknown };
+  } | null>(null);
+  const current =
+    configState?.client === client &&
+    configState.workspaceId === workspaceId &&
+    configState.sessionId === sessionId
+      ? configState.result
+      : null;
+  const config = current?.kind === "ready" ? current.config : null;
+  const scopeRef = useRef({ client, workspaceId, sessionId });
+  scopeRef.current = { client, workspaceId, sessionId };
+  useEffect(() => {
+    let live = true;
+    setConfigState(null);
+    client.getClientConfig().then(
+      (value) =>
+        live &&
+        setConfigState({
+          client,
+          workspaceId,
+          sessionId,
+          result: value.artifacts
+            ? { kind: "ready", config: value.artifacts }
+            : { kind: "unavailable" },
+        }),
+      (error: unknown) =>
+        live &&
+        setConfigState({ client, workspaceId, sessionId, result: { kind: "error", error } }),
+    );
+    return () => {
+      live = false;
+    };
+  }, [client, retryEpoch, sessionId, workspaceId]);
+  const baseUrl = useMemo(
+    () => new URL(client.apiUrl("/"), globalThis.location?.href ?? "http://localhost/"),
+    [client],
+  );
+  const transport = useMemo(() => {
+    if (!config) return undefined;
+    const socket = new URL(config.editableLiveUrl);
+    let scope = new AbortController();
+    const checkCurrent = (signal: AbortSignal) => {
+      signal.throwIfAborted();
+      if (
+        scopeRef.current.client !== client ||
+        scopeRef.current.workspaceId !== workspaceId ||
+        scopeRef.current.sessionId !== sessionId
+      ) {
+        throw new DOMException("Artifact viewer scope changed", "AbortError");
+      }
+    };
+    return {
+      activate: () => {
+        if (scope.signal.aborted) scope = new AbortController();
+      },
+      abort: () => scope.abort(),
+      fetch: (async (input: RequestInfo | URL, init?: RequestInit) => {
+        const signal = AbortSignal.any([scope.signal, ...(init?.signal ? [init.signal] : [])]);
+        checkCurrent(signal);
+        const url = new URL(input instanceof Request ? input.url : input, baseUrl);
+        if (
+          init?.method === "POST" &&
+          url.pathname ===
+            new URL(
+              `v1/workspaces/${encodeURIComponent(workspaceId)}/editable-artifacts/${encodeURIComponent(artifactId)}/live-ticket`,
+              baseUrl,
+            ).pathname
+        ) {
+          // A reconnect must revalidate the current host principal before
+          // minting a ticket for the editor's retained cache partition.
+          const next = (await client.getClientConfig({ signal })).artifacts;
+          checkCurrent(signal);
+          if (!next || artifactCapabilityKey(next) !== artifactCapabilityKey(config)) {
+            setConfigState({
+              client,
+              workspaceId,
+              sessionId,
+              result: next ? { kind: "ready", config: next } : { kind: "unavailable" },
+            });
+            scope.abort();
+            signal.throwIfAborted();
+          }
+          const { replicaId } = (await new Request(input, init).json()) as {
+            replicaId?: unknown;
+          };
+          if (typeof replicaId !== "string") throw new TypeError("Artifact replica is required");
+          await client.getEditableArtifact(workspaceId, artifactId, { replicaId, signal });
+          checkCurrent(signal);
+        }
+        return client.fetchApi(url, { ...init, signal });
+      }) as typeof fetch,
+      webSocketUrl: socket,
+      ...(isLoopback(baseUrl) && isLoopback(socket)
+        ? { allowInsecureDevelopmentTransport: true }
+        : {}),
+    };
+  }, [artifactId, baseUrl, client, config, sessionId, workspaceId]);
+  useEffect(() => {
+    transport?.activate();
+    return () => transport?.abort();
+  }, [transport]);
+  const blocked = current !== null && (current.kind !== "ready" || !runtimes);
+  useEffect(() => {
+    if (blocked) onUnavailable();
+  }, [blocked, onUnavailable]);
+  if (!current) return <ArtifactLoading label={labels.opening} />;
+  if (current.kind === "error") {
+    return (
+      <ArtifactProblem
+        view={artifactLoadErrorView(current.error, "editable", labels)}
+        onRetry={() => setRetryEpoch((value) => value + 1)}
+      />
+    );
+  }
+  if (!config || !transport) {
+    return <ArtifactProblem view={{ ...labels.viewingDisabled, retryable: false }} />;
+  }
+  if (!runtimes) {
+    return <ArtifactProblem view={{ ...labels.editorsMissing, retryable: false }} />;
+  }
+  return (
+    <EditableArtifactView
+      baseUrl={baseUrl}
+      workspaceId={workspaceId}
+      artifactId={artifactId}
+      authorityKey={JSON.stringify([clientKey, sessionId, artifactCapabilityKey(config)])}
+      runtimes={{
+        ...runtimes,
+        ...(isLoopback(baseUrl) ? { allowInsecureDevelopmentAssets: true } : {}),
+      }}
+      transport={transport}
+      showHeader={false}
+      open={async (signal) => {
+        const replicaId = createEditableArtifactReplicaId();
+        const artifact = await client.getEditableArtifact(workspaceId, artifactId, {
+          replicaId,
+          signal,
+        });
+        signal.throwIfAborted();
+        onOpened(artifact.title, artifact.modality);
+        return {
+          artifact,
+          replicaId,
+          authority: {
+            deploymentOrigin: baseUrl.origin,
+            workspaceId,
+            ...config.cachePartition,
+          },
+        };
+      }}
+    />
+  );
+}
+
+function artifactCapabilityKey(
+  config: Exclude<NonNullable<ClientConfig["artifacts"]>, false>,
+): string {
+  return JSON.stringify([
+    config.editableLiveUrl,
+    config.cachePartition.accountId,
+    config.cachePartition.principalId,
+    config.cachePartition.authorizationEpoch,
+  ]);
+}
+
+function isLoopback(url: URL): boolean {
+  return (
+    (url.protocol === "http:" || url.protocol === "ws:") &&
+    (url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "[::1]")
+  );
+}

package/src/components/artifacts/site-view.tsx

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { SiteViewer } from "@opengeni/sdk";
+
+import { loadSiteSnapshot } from "../../sites-ui";
+import {
+  ArtifactLoading,
+  ArtifactProblem,
+  artifactLoadErrorView,
+  useArtifactLabels,
+} from "./artifact-chrome";
+import { ArtifactSandbox } from "./artifact-sandbox";
+import type { SiteSnapshotClient, SiteToolBridgeFactory } from "./chat-interactive-block";
+
+type Snapshot = Awaited<ReturnType<typeof loadSiteSnapshot>>;
+
+export type SiteViewProps = {
+  client: SiteSnapshotClient;
+  workspaceId: string;
+  siteId: string;
+  /** Host-owned Site API access. Omit it and the Site renders without workspace tools. */
+  toolBridge?: SiteToolBridgeFactory | undefined;
+  /** Who is viewing, answered to the Site's `site.viewer`. */
+  viewer?: SiteViewer | undefined;
+  theme?: "light" | "dark" | undefined;
+  /** Shown instead of the archived notice; the console links to its full page. */
+  archivedMessage?: string | undefined;
+  /** Show the Site title in the frame bar; hide it under a host header that already does. */
+  showTitle?: boolean | undefined;
+  /** Loading copy; defaults to "Loading Site…". */
+  loadingLabel?: string | undefined;
+  /** Called with the loaded title, for a host header. */
+  onTitle?: ((title: string) => void) | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * A published Site filling its container: the console's session dock and an
+ * embedding host's artifact viewer render the same view.
+ */
+export function SiteView({
+  client,
+  workspaceId,
+  siteId,
+  toolBridge,
+  viewer,
+  theme,
+  archivedMessage,
+  showTitle = true,
+  loadingLabel,
+  onTitle,
+  className,
+}: SiteViewProps) {
+  const labels = useArtifactLabels();
+  const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
+  const [error, setError] = useState<unknown>(null);
+  const readAbort = useRef<AbortController | null>(null);
+  const onTitleRef = useRef(onTitle);
+  onTitleRef.current = onTitle;
+  const load = useCallback(async () => {
+    readAbort.current?.abort();
+    const abort = new AbortController();
+    readAbort.current = abort;
+    try {
+      setError(null);
+      const next = await loadSiteSnapshot(client, workspaceId, siteId, {
+        signal: abort.signal,
+        includeArchivedContent: true,
+      });
+      if (abort.signal.aborted) return;
+      setSnapshot(next);
+      onTitleRef.current?.(next.detail.artifact.title);
+    } catch (nextError) {
+      if (abort.signal.aborted) return;
+      setSnapshot(null);
+      setError(nextError);
+    }
+  }, [client, siteId, workspaceId]);
+  useEffect(() => {
+    setSnapshot(null);
+    void load();
+    return () => readAbort.current?.abort();
+  }, [load]);
+  const content = snapshot?.content;
+  const bridge = useMemo(
+    () =>
+      content
+        ? toolBridge?.({
+            artifactId: siteId,
+            siteVersionId: content.versionId,
+            requestedTools: content.requestedTools,
+          })
+        : undefined,
+    [content, siteId, toolBridge],
+  );
+  if (error)
+    return (
+      <ArtifactProblem
+        view={artifactLoadErrorView(error, "site", labels)}
+        onRetry={() => void load()}
+      />
+    );
+  if (!snapshot || !content) return <ArtifactLoading label={loadingLabel ?? labels.loadingSite} />;
+  if (snapshot.detail.artifact.status === "archived")
+    return (
+      <div className="p-4 text-sm text-fg-muted">{archivedMessage ?? labels.siteArchived}</div>
+    );
+  return (
+    <ArtifactSandbox
+      html={content.html}
+      title={snapshot.detail.artifact.title}
+      showTitle={showTitle}
+      versionLabel={`v${snapshot.detail.artifact.currentVersion?.revision}`}
+      toolBridge={bridge}
+      viewer={viewer}
+      connectedToolCount={content.requestedTools.length}
+      theme={theme}
+      fill
+      className={className ?? "h-full rounded-none border-0"}
+    />
+  );
+}

package/src/components/artifacts/spreadsheet-canvas.ts

@@ -1,3 +1,5 @@
+import { formatSpreadsheetGeneralDisplay } from "./spreadsheet-general-display";
+
 const TILE_SIZE = 256;
 const MAX_CACHE_PHYSICAL_PIXELS = 32_000_000;
 const MAX_CACHE_TILES = 96;
@@ -430,7 +432,7 @@ export class SpreadsheetCanvasRenderer {
 
     for (const cell of cells) {
       const value = input.projection.valueAt(cell);
-      const text = displayValue(value);
+      const text = formatSpreadsheetGeneralDisplay(value);
       if (!text) continue;
       paintCellText(context, input, cell, text, tileLeft, tileTop);
     }
@@ -550,7 +552,7 @@ function paintSelection(context: CanvasRenderingContext2D, input: SpreadsheetCan
   const bottom =
     input.columnHeaderHeight + input.rows.offsetAt(selection.bottom + 1) - input.logicalScrollTop;
   context.save();
-  setFill(context, input.theme.accent, "#3b82f6");
+  setFill(context, input.theme.accent, "#545454");
   context.globalAlpha = 0.1;
   context.fillRect(left, top, right - left, bottom - top);
   context.restore();
@@ -562,7 +564,7 @@ function paintSelection(context: CanvasRenderingContext2D, input: SpreadsheetCan
   const activeWidth = input.columns.sizeAt(selection.focusColumn);
   const activeHeight = input.rows.sizeAt(selection.focusRow);
   context.save();
-  setStroke(context, input.theme.accent, "#3b82f6");
+  setStroke(context, input.theme.accent, "#545454");
   context.lineWidth = 2;
   context.strokeRect(
     activeLeft + 1,
@@ -776,13 +778,6 @@ function finitePositive(value: number | undefined, fallback: number): number {
   return value !== undefined && Number.isFinite(value) && value > 0 ? value : fallback;
 }
 
-function displayValue(value: unknown): string {
-  if (value === null || value === undefined) return "";
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
-  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
-  return String(value);
-}
-
 function columnName(index: number): string {
   let value = index + 1;
   let result = "";