dsh-surface-bridge 0.1.0-alpha.1

package/lib/types/index.js

@@ -0,0 +1,132 @@
+/**
+ * Node half of dsh-surface-bridge.
+ *
+ * The bridge exists so a right-Sidebar business surface can hand a selection to
+ * the composer once, and have it arrive in the model step as real context. This
+ * half owns the two things that must be unique per process: the Session-keyed
+ * selection/operation state, and the `agent/pre-step` listener that turns a read
+ * selection into **two** durable messages — one visible row the person can see (a
+ * file chip for the drawing, plus a one-line summary) and one hidden row carrying
+ * the element table the model works from.
+ *
+ * Why a mounted bundle rather than a shared library: a library would be inlined
+ * into each consuming plugin's own bundle, giving every consumer its own service
+ * instance and its own composer chip. The uniqueness the seam needs — one chip,
+ * one injection point — can only be guaranteed by the Loader mounting one bundle.
+ *
+ * @module dsh-surface-bridge
+ */
+import { createUserMessage } from '@deepseek-ai/dsh-llm';
+import { renderSelectionChip, renderSelectionText } from "./host/render.js";
+import { registerSurfaceBridgeRoutes } from "./host/routes.js";
+import { SurfaceBridgeHost } from "./host/service.js";
+import { SurfaceBridgeStore } from "./host/store.js";
+/** Cordis plugin name used by loader diagnostics. */
+export const name = 'dsh-surface-bridge';
+/** Route registration and image admission are the only Host capabilities this half needs. */
+export const inject = ['connection', 'attachments'];
+/** Decode a raster into the bytes the attachment service admits. */
+function decodeRaster(data) {
+    return new Uint8Array(Buffer.from(data, 'base64'));
+}
+/**
+ * Build the two durable messages one selection travels in.
+ *
+ * **Two messages, one visible.** The person who sent a selection must be able to see what
+ * went out; the model needs the whole element table. Those are different appetites, and one
+ * message cannot satisfy both:
+ *
+ * · the **visible** row is a plain user message carrying one line — `画布选区 · main.excalidraw ·
+ *   3 个元素` — because the Chat view renders no row at all for a producer-tagged context node
+ *   (`isVisibleChatNode` excludes ordinary Context, keeping only tool changes). Before this,
+ *   the selection reached the model and appeared nowhere in the transcript.
+ * · the **detail** row is producer-tagged, and therefore hidden: it carries the element ids,
+ *   coordinates and sizes the model edits from, plus the file path the write-back must name.
+ *
+ * Images ride in the visible row, so a person sees the pictures they sent. Bytes never enter
+ * the text, and a surface with no image element pays for no image.
+ *
+ * @param ctx - Plugin context carrying the attachment service.
+ * @param selection - Selection to render.
+ * @returns the messages to append to the step, visible row first.
+ */
+export async function buildSelectionMessages(ctx, selection) {
+    const reference = `${selection.source}#${selection.revision}`;
+    const detail = createUserMessage({
+        content: [{ type: 'text', text: renderSelectionText(selection, reference) }],
+        // A producer kind, on purpose: this is the row the transcript hides.
+        source: { kind: 'surface-selection' },
+    });
+    // One line, and nothing above it. An earlier version put a `file` block first, which the
+    // shell renders as a 240x64 card — two stacked blocks for one selection, and the card was a
+    // *snapshot* of the drawing that the model had to be told not to edit. The line alone says
+    // which drawing and how many elements, which is what the reader needs.
+    const visible = [];
+    const images = selection.images ?? [];
+    if (images.length > 0) {
+        const refs = await ctx.attachments.saveImages(images.map((image, index) => ({
+            data: decodeRaster(image.data),
+            mediaType: image.mediaType,
+            name: image.name ?? `${selection.source}-${image.elementId ?? `image-${String(index + 1)}`}.png`,
+        })));
+        for (const ref of refs)
+            visible.push({ type: 'image', attachment: ref });
+    }
+    visible.push({ type: 'text', text: renderSelectionChip(selection) });
+    const shown = createUserMessage({
+        content: visible,
+        // `user`, so the transcript shows it. Any other kind makes the row a `context` node,
+        // and the Chat view renders no row for those.
+        source: { kind: 'user' },
+    });
+    return [shown, detail];
+}
+/**
+ * Plugin body: provide the Host face, serve the bridge routes, and arm the
+ * pre-step injection.
+ *
+ * @param ctx - Registrant context; every registration is disposed with it.
+ */
+/**
+ * Last turn that read each Session's surface.
+ *
+ * A turn has several steps (a model call, then the tool results, then another). The
+ * selection is a property of the message that opened the turn, so it is read once
+ * per turn; without this the context would be re-injected on every step and the
+ * model would see the same drawing three times.
+ */
+const lastReadTurn = new Map();
+export function apply(ctx) {
+    const store = new SurfaceBridgeStore();
+    const host = new SurfaceBridgeHost(store);
+    ctx.effect(() => ctx.reflect.provide('surfaceBridgeHost', host), 'dsh-surface-bridge: host face');
+    registerSurfaceBridgeRoutes(ctx, store);
+    ctx.on('agent/pre-step', async ({ agent, signal, turn, step }, next) => {
+        const decision = await next();
+        if (decision.kind === 'reject' || signal.aborted)
+            return decision;
+        // A selection belongs to the message that opened the turn, and that message is
+        // admitted at step 1. Gating on `step` rather than on the admitted message batch
+        // is deliberate: an empty batch at step 1 is a real case (a turn opened by
+        // something other than a typed prompt), and the batch is not a reliable signal
+        // for "the user just sent this". The whole point is also that the selection is
+        // read *here* — when the message is going out — not pushed while the user drew.
+        if (step !== 1)
+            return decision;
+        const sessionId = String(agent.id);
+        if (lastReadTurn.get(sessionId) === turn)
+            return decision;
+        // Consuming: this read exists to carry the selection into the message, so the
+        // surface drops it as it answers and the chip leaves the composer. A peek would
+        // leave it on screen and let the same drawing ride the next message too.
+        const selections = await host.consumeSelections(sessionId, signal);
+        if (selections === undefined || selections.length === 0)
+            return decision;
+        lastReadTurn.set(sessionId, turn);
+        const messages = [...decision.messages];
+        for (const selection of selections) {
+            messages.push(...await buildSelectionMessages(ctx, selection));
+        }
+        return { ...decision, messages };
+    }, { prepend: true });
+}

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "dsh-surface-bridge",
+  "description": "Shared seam between a right-Sidebar business surface and the DSH composer: one selection chip, one Host-context injection point, one write-back channel",
+  "version": "0.1.0-alpha.1",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/types/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/types/index.js"
+    },
+    "./contract": {
+      "types": "./lib/types/contract.d.ts",
+      "default": "./lib/types/contract.js"
+    },
+    "./transport": {
+      "types": "./lib/types/client/transport.d.ts",
+      "default": "./lib/types/client/transport.js"
+    },
+    "./client": "./lib/client.js",
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "src",
+    "cordis.patch.yml"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-primitives",
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-session",
+        "@deepseek-ai/dsh-client-ui-slots"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "~4.0.4",
+    "@deepseek-ai/dsh-agent": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-attachment": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-connection": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-locale": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-session": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.7-rc.1",
+    "@deepseek-ai/dsh-llm": "^0.1.7-rc.1"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "~4.0.4",
+    "@deepseek-ai/dsh-agent": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-attachment": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-connection": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-locale": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-session": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.7-rc.1",
+    "@deepseek-ai/dsh-llm": "0.1.7-rc.1",
+    "@types/node": "^26.0.0",
+    "@types/react": "~18.3.1",
+    "esbuild": "^0.25.0",
+    "lightningcss": "^1.28.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.9.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "rm -rf lib && tsc -p tsconfig.json && node build-client.mjs",
+    "test": "pnpm build && node --test tests/*.test.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/src/client/SurfaceSelectionDock.module.css

@@ -0,0 +1,186 @@
+/* The selection chip: a capsule on the composer's input line.
+ *
+ * The shell's own metrics decide every number here, all read from its InputBar CSS
+ * module:
+ *
+ *   .card            padding-top:8px, border-radius:22px, column flex, gap:12px
+ *   .input           padding:4px 8px 0 14px, min-height:36px, line-height:24px
+ *   .overlayAnchor   height:0; position:absolute; inset:0 0 auto
+ *   [data-input-scroll]  wraps the editable
+ *   [data-composer-placeholder]  inset:4px 8px auto 14px
+ *
+ * So the first line box is 12px..36px inside the card and the text starts at 14px.
+ * The capsule is 22px tall, which fits inside that 24px line — which is the whole
+ * point: it sits *on* the line rather than in a band reserved above it, so the
+ * composer's height does not change when a selection appears or disappears.
+ *
+ * Two consequences worth stating, because both are deliberate:
+ *
+ *  1. The text has to start after the capsule, and the only element that can move it
+ *     is the shell's own scroll container. `--surface-bridge-indent` is set on the
+ *     card from the capsule's measured width (see the component) — a measured value
+ *     rather than a constant, because the label and the count are both localized.
+ *  2. Nothing is pushed down and nothing is pushed sideways except that one indent:
+ *     the tool row below the editor is untouched, so the input box keeps its shape.
+ *     Pressing Enter starts a new block, whose first line indents too — the one case
+ *     where a hanging indent cannot imitate an inline token, and a fair trade for not
+ *     having to put the capsule inside the editor's own document.
+ */
+
+/* Push the line's first line right, out from under the capsule — `text-indent`, not
+ * `padding-left`. The difference is the whole point: padding would move every wrapped
+ * line, so the paragraph would look like a narrow column beside the chip. An indent
+ * applies to a block's FIRST line only, so the text starts after the capsule and then
+ * wraps back to the card's left margin, exactly like an inline token in the editor
+ * (DSH's own file mentions behave this way).
+ *
+ * `text-indent` is inherited, so one declaration on this container reaches both the
+ * editable and the placeholder, which the shell positions inside the same box. */
+[data-composer-card]:has([data-surface-chip]) [data-input-scroll] {
+  text-indent: var(--surface-bridge-indent, 0px);
+}
+
+.anchor {
+  position: absolute;
+  /* The editor is a later sibling and would otherwise paint over the capsule, so clicks on the
+   * clear button landed in the text. The chip is chrome over the input line, not under it. */
+  z-index: 2;
+  /* Line 1 spans 12px..36px; centre the 22px capsule in it. */
+  top: 13px;
+  left: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: max-content;
+  max-width: calc(100% - 26px);
+  /* The anchor overlays the editor's first line, so only the capsule itself may take
+   * input; otherwise it would swallow clicks and caret placement in the text. */
+  pointer-events: none;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  min-width: 0;
+  height: 22px;
+  padding: 0 8px 0 7px;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 16px;
+  white-space: nowrap;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.chip:hover {
+  border-color: var(--dsw-alias-border-l4);
+  color: var(--dsw-alias-label-primary);
+}
+
+.chip:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+.glyph {
+  display: inline-flex;
+  flex: none;
+  color: currentcolor;
+  opacity: 0.75;
+}
+
+.label {
+  flex: none;
+  font-weight: 500;
+}
+
+.dot {
+  flex: none;
+  color: var(--dsw-alias-label-caption);
+}
+
+.count {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-state-business-primary);
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+}
+
+.chevron {
+  display: inline-flex;
+  flex: none;
+  color: var(--dsw-alias-label-caption);
+}
+
+.clear {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-left: -3px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: none;
+  color: var(--dsw-alias-label-caption);
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.clear:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.clear:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 1px;
+}
+
+/* Summary rows inside the anchored menu. The shell's menu card draws the frame;
+ * these rules add only what an element row needs on top of it. */
+.row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.rowType {
+  flex: none;
+  color: var(--dsw-alias-label-caption);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.rowLabel {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rowGeom {
+  flex: none;
+  margin-left: auto;
+  color: var(--dsw-alias-label-caption);
+  font-family: var(--font-tita-mono);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.more {
+  color: var(--dsw-alias-label-caption);
+  font-size: 11px;
+  line-height: 16px;
+}

package/src/client/SurfaceSelectionDock.tsx

@@ -0,0 +1,245 @@
+/**
+ * The one composer chip for every surface selection.
+ *
+ * Exactly one entry is registered into `conversation.input.overlay`, and it renders
+ * one capsule per source that currently has a selection. That is the whole reason the
+ * bridge is a mounted bundle: with the registry inlined per consumer, two surfaces
+ * would each register their own entry and the composer would grow a second chip with
+ * a different shape.
+ *
+ * Why the overlay seat and not the dock seat it used to occupy: the dock renders
+ * *above* the composer card, in the same stack as the to-do dock — so anything there
+ * shares the task list's form and reflows the whole input every time it appears. The
+ * overlay seat is inside the card, on the shell's own top-edge anchor, which is where
+ * the stylesheet puts the capsule on the input line itself.
+ *
+ * The chip is a pure view of local state. Nothing here talks to the Host: the
+ * selection is read from this registry when a model step asks for it, which is why
+ * the chip has no syncing, pending, or failed states to twitch between.
+ *
+ * @module dsh-surface-bridge/client/SurfaceSelectionDock
+ */
+
+import type { ReactNode } from 'react'
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react'
+import {
+  IconChevronDownOutlineRegular,
+  IconCloseOutlineRegular,
+  IconEditOutlineRegular,
+  IconFullscreenOutlineRegular,
+  Menu,
+  type MenuEntry,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SurfaceSelection } from '../contract.ts'
+import type { SurfaceBridgeService, SurfaceSourceDescriptor } from './service.ts'
+import { NS } from './locales.ts'
+import styles from './SurfaceSelectionDock.module.css'
+
+/** Injected face of the chip entry. */
+export interface SurfaceDockInjected {
+  readonly bridge: SurfaceBridgeService
+}
+
+/**
+ * The translate seat this entry is registered with.
+ *
+ * Taken from the registration's own locale declaration rather than re-typed, so a key
+ * that does not exist in the dictionary is a compile error here.
+ */
+type ChipTranslate = PropsLocale<typeof NS>['t']
+
+/** Maximum element rows the summary menu lists. */
+const MAX_SUMMARY_ROWS = 24
+
+/** Menu row id prefixes, so one `onSelect` can tell element rows from actions. */
+const ELEMENT_PREFIX = 'element:'
+const ACTION_REVEAL = 'action:reveal'
+const ACTION_CLEAR = 'action:clear'
+
+/** One element's row label: kind, name, and size in a single scannable line. */
+function elementRowLabel(selection: SurfaceSelection, index: number): ReactNode {
+  const element = selection.elements[index]
+  if (element === undefined) return null
+  return (
+    <span className={styles.row}>
+      <span className={styles.rowType}>{element.type}</span>
+      <span className={styles.rowLabel}>{element.label.length > 0 ? element.label : element.id}</span>
+      <span className={styles.rowGeom}>{`${Math.round(element.width)}×${Math.round(element.height)}`}</span>
+    </span>
+  )
+}
+
+/** One capsule: a single source's selection and its summary menu. */
+function SurfaceChip({
+  bridge,
+  descriptor,
+  selection,
+  t,
+}: {
+  bridge: SurfaceBridgeService
+  descriptor: SurfaceSourceDescriptor
+  selection: SurfaceSelection
+  t: ChipTranslate
+}): ReactNode {
+  const [open, setOpen] = useState(false)
+  const Glyph = descriptor.icon ?? IconEditOutlineRegular
+
+  const shown = selection.elements.slice(0, MAX_SUMMARY_ROWS)
+  const rows: MenuEntry[] = [
+    { id: 'note:title', label: <span className={styles.more}>{String(t('menu.title', { count: selection.count }))}</span>, disabled: true },
+  ]
+  for (const [index] of shown.entries()) {
+    const element = selection.elements[index]
+    if (element === undefined) continue
+    rows.push({ id: `${ELEMENT_PREFIX}${element.id}`, label: elementRowLabel(selection, index) })
+  }
+  if (shown.length === 0) {
+    rows.push({ id: 'element:none', label: <span className={styles.more}>{String(t('menu.empty'))}</span>, disabled: true })
+  } else if (selection.elements.length > shown.length) {
+    rows.push({
+      id: 'element:more',
+      label: <span className={styles.more}>{String(t('menu.more', { count: selection.count - shown.length }))}</span>,
+      disabled: true,
+    })
+  }
+
+  const footer: MenuEntry[] = []
+  if (descriptor.reveal !== undefined) {
+    footer.push({ id: ACTION_REVEAL, label: String(t('action.reveal')), icon: <IconFullscreenOutlineRegular size={14} /> })
+  }
+  footer.push({ id: ACTION_CLEAR, label: String(t('action.clear')), danger: true })
+
+  const clear = (): void => {
+    // Local only: the surface keeps its own canvas selection, and the next change to
+    // it republishes. Clearing here means "do not carry this into the message".
+    bridge.publish(descriptor.id, null)
+    setOpen(false)
+  }
+
+  const onSelect = (id: string): void => {
+    if (id === ACTION_REVEAL) {
+      descriptor.reveal?.()
+      setOpen(false)
+      return
+    }
+    if (id === ACTION_CLEAR) {
+      clear()
+      return
+    }
+    if (!id.startsWith(ELEMENT_PREFIX)) return
+    const elementId = id.slice(ELEMENT_PREFIX.length)
+    if (elementId === 'more' || elementId === 'none') return
+    descriptor.reveal?.()
+    descriptor.focusElement?.(elementId)
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <Menu
+        open={open}
+        anchor={(
+          <button
+            type="button"
+            className={styles.chip}
+            data-surface-chip=""
+            aria-label={String(t('chip.aria', { count: selection.count }))}
+            aria-expanded={open}
+            onClick={() => { setOpen(value => !value) }}
+          >
+            <span className={styles.glyph} aria-hidden="true"><Glyph size={12} /></span>
+            <span className={styles.label}>{descriptor.label}</span>
+            <span className={styles.dot} aria-hidden="true">·</span>
+            <span className={styles.count}>{String(t('chip.count', { count: selection.count }))}</span>
+            <span className={styles.chevron} aria-hidden="true"><IconChevronDownOutlineRegular size={12} /></span>
+          </button>
+        )}
+        items={rows}
+        footer={footer}
+        onSelect={onSelect}
+        onClose={() => { setOpen(false) }}
+        side="bottom"
+        align="start"
+        portal
+      />
+      <button
+        type="button"
+        className={styles.clear}
+        aria-label={String(t('action.clear'))}
+        onClick={clear}
+      >
+        <IconCloseOutlineRegular size={12} />
+      </button>
+    </>
+  )
+}
+
+/**
+ * The chip entry: one capsule per surface that has a selection and is on screen.
+ *
+ * Hiding is not done here — a source that goes off screen (a tab switch, a Session
+ * switch, a collapsed column) drops out of the registry's `active`, which both hides
+ * the capsule and removes it from the answer a read gets.
+ */
+export function SurfaceSelectionChip({
+  bridge,
+  t,
+}: PropsRuntime<'conversation.input.overlay'> & InjectFace<SurfaceDockInjected> & PropsLocale<typeof NS>): ReactNode {
+  useSyncExternalStore(
+    listener => bridge.subscribe(listener),
+    () => bridge.version(),
+    () => bridge.version(),
+  )
+  const active = bridge.active()
+  const anchorRef = useRef<HTMLDivElement | null>(null)
+
+  /*
+   * Tell the card how far to move its input line, so the text starts after the
+   * capsule instead of under it.
+   *
+   * This is the one place the bridge writes to the shell's DOM, and it is deliberate:
+   * the composer's scroll container is the only element that can move its own text,
+   * and the distance depends on the capsule's rendered width — which depends on the
+   * locale and the digit count, so a constant in the stylesheet would be wrong in at
+   * least one language. One scoped custom property, set while a chip is mounted and
+   * removed when it is not.
+   */
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current
+    if (anchor === null) return
+    // `closest` is not generic over attribute selectors, so the cast is the element
+    // the shell documents with that attribute.
+    const card = anchor.closest('[data-composer-card]') as HTMLElement | null
+    if (card === null) return
+    const apply = (): void => {
+      const width = anchor.getBoundingClientRect().width
+      if (width <= 0) return
+      // 8px of air between the capsule and the first character.
+      card.style.setProperty('--surface-bridge-indent', `${Math.round(width) + 8}px`)
+    }
+    apply()
+    if (typeof ResizeObserver === 'undefined') return () => { card.style.removeProperty('--surface-bridge-indent') }
+    const observer = new ResizeObserver(apply)
+    observer.observe(anchor)
+    return () => {
+      observer.disconnect()
+      card.style.removeProperty('--surface-bridge-indent')
+    }
+  }, [active.length])
+
+  if (active.length === 0) return null
+  return (
+    <div className={styles.anchor} data-surface-bridge="" ref={anchorRef}>
+      {active.map(({ descriptor, selection }) => (
+        <SurfaceChip
+          key={descriptor.id}
+          bridge={bridge}
+          descriptor={descriptor}
+          selection={selection}
+          t={t}
+        />
+      ))}
+    </div>
+  )
+}