@crosery/dsh-viewer 0.0.0-stage → 0.3.1

package/lib/client.js

@@ -0,0 +1,1136 @@
+window.__ModuleLoader__.load({ id: "@crosery/dsh-viewer", factory: (require) => {
+var module = { exports: {} }; var exports = module.exports;
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client/index.ts
+var index_exports = {};
+__export(index_exports, {
+  READ_IMAGE_PRIORITY: () => READ_IMAGE_PRIORITY,
+  TURN_TAIL_SLOT: () => TURN_TAIL_SLOT,
+  VIEWER_INPUT: () => VIEWER_INPUT,
+  VIEWER_NESTED: () => VIEWER_NESTED,
+  VIEWER_NS: () => VIEWER_NS,
+  VIEWER_TURN_DATA: () => VIEWER_TURN_DATA,
+  VIEWER_TURN_END: () => VIEWER_TURN_END,
+  apply: () => apply,
+  argumentPathOf: () => argumentPathOf,
+  cardModel: () => cardModel,
+  contentImageOf: () => contentImageOf,
+  contribute: () => contribute,
+  displayedValueOf: () => displayedValueOf,
+  foldSourceOf: () => foldSourceOf,
+  foldsCompletedTurns: () => foldsCompletedTurns,
+  hasInterleavedInput: () => hasInterleavedInput,
+  humanInputDefinition: () => humanInputDefinition,
+  imageLoaderFor: () => imageLoaderFor,
+  inject: () => inject,
+  isDesktopShell: () => isDesktopShell,
+  mediaSourceFor: () => mediaSourceFor,
+  name: () => name,
+  nestedDisplayDefinition: () => nestedDisplayDefinition,
+  tailDisplays: () => tailDisplays,
+  turnEndDefinition: () => turnEndDefinition,
+  turnStaysOpen: () => turnStaysOpen,
+  turnTailJoinable: () => turnTailJoinable,
+  viewerTurnDefinition: () => viewerTurnDefinition,
+  viewerTurnDefinitions: () => viewerTurnDefinitions
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/contract.ts
+var DISPLAY_TOOL = "display_file";
+var READ_IMAGE_TOOL = "read_image";
+var ASSET_ROUTE = "/crosery/dsh-viewer/asset";
+var MODEL_IMAGE_MEDIA_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/gif"
+];
+var MEDIA_TABLE = {
+  // Rasters and vectors an <img> renders. The first four are also the exact
+  // set the durable attachment service admits, which is what lets them reach
+  // model context; the rest are display-only.
+  ".png": { kind: "image", mediaType: "image/png" },
+  ".jpg": { kind: "image", mediaType: "image/jpeg" },
+  ".jpeg": { kind: "image", mediaType: "image/jpeg" },
+  ".webp": { kind: "image", mediaType: "image/webp" },
+  ".gif": { kind: "image", mediaType: "image/gif" },
+  ".svg": { kind: "image", mediaType: "image/svg+xml" },
+  ".avif": { kind: "image", mediaType: "image/avif" },
+  ".bmp": { kind: "image", mediaType: "image/bmp" },
+  ".ico": { kind: "image", mediaType: "image/x-icon" },
+  ".apng": { kind: "image", mediaType: "image/apng" },
+  ".mp4": { kind: "video", mediaType: "video/mp4" },
+  ".m4v": { kind: "video", mediaType: "video/x-m4v" },
+  ".webm": { kind: "video", mediaType: "video/webm" },
+  ".ogv": { kind: "video", mediaType: "video/ogg" },
+  ".mov": { kind: "video", mediaType: "video/quicktime" },
+  ".mp3": { kind: "audio", mediaType: "audio/mpeg" },
+  ".m4a": { kind: "audio", mediaType: "audio/mp4" },
+  ".aac": { kind: "audio", mediaType: "audio/aac" },
+  ".wav": { kind: "audio", mediaType: "audio/wav" },
+  ".flac": { kind: "audio", mediaType: "audio/flac" },
+  ".ogg": { kind: "audio", mediaType: "audio/ogg" },
+  ".oga": { kind: "audio", mediaType: "audio/ogg" },
+  ".opus": { kind: "audio", mediaType: "audio/ogg" },
+  ".pdf": { kind: "pdf", mediaType: "application/pdf" },
+  // Office and OpenDocument. No browser renders any of these, so the Host
+  // converts them before the card ever sees them — `mediaType` here is the
+  // SOURCE type, and the served artifact's type replaces it in the outcome.
+  ".docx": { kind: "document", mediaType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" },
+  ".doc": { kind: "document", mediaType: "application/msword" },
+  ".rtf": { kind: "document", mediaType: "application/rtf" },
+  ".odt": { kind: "document", mediaType: "application/vnd.oasis.opendocument.text" },
+  ".xlsx": { kind: "document", mediaType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" },
+  ".xls": { kind: "document", mediaType: "application/vnd.ms-excel" },
+  ".ods": { kind: "document", mediaType: "application/vnd.oasis.opendocument.spreadsheet" },
+  ".pptx": { kind: "document", mediaType: "application/vnd.openxmlformats-officedocument.presentationml.presentation" },
+  ".ppt": { kind: "document", mediaType: "application/vnd.ms-powerpoint" },
+  ".odp": { kind: "document", mediaType: "application/vnd.oasis.opendocument.presentation" },
+  ".html": { kind: "html", mediaType: "text/html" },
+  ".htm": { kind: "html", mediaType: "text/html" }
+};
+var UNKNOWN_MEDIA = { kind: "file", mediaType: "application/octet-stream" };
+function extensionOf(filePath) {
+  const base = filePath.slice(Math.max(filePath.lastIndexOf("/"), filePath.lastIndexOf("\\")) + 1);
+  const dot = base.lastIndexOf(".");
+  if (dot <= 0) return void 0;
+  return base.slice(dot).toLowerCase();
+}
+function classifyPath(filePath) {
+  const extension = extensionOf(filePath);
+  if (extension === void 0) return UNKNOWN_MEDIA;
+  return Object.hasOwn(MEDIA_TABLE, extension) ? MEDIA_TABLE[extension] : UNKNOWN_MEDIA;
+}
+function modelImageFrom(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return void 0;
+  const { attachmentId, mediaType, bytes, width, height, name: name2 } = value;
+  if (typeof attachmentId !== "string" || attachmentId.length === 0) return void 0;
+  if (typeof mediaType !== "string" || !MODEL_IMAGE_MEDIA_TYPES.includes(mediaType)) return void 0;
+  if (!isPositiveInteger(bytes) || !isPositiveInteger(width) || !isPositiveInteger(height)) return void 0;
+  if (name2 !== void 0 && typeof name2 !== "string") return void 0;
+  return {
+    attachmentId,
+    mediaType,
+    bytes,
+    width,
+    height,
+    ...name2 === void 0 ? {} : { name: name2 }
+  };
+}
+var VIEWER_KINDS = ["image", "video", "audio", "pdf", "document", "html", "file"];
+function displayValueFrom(meta) {
+  if (typeof meta !== "object" || meta === null || Array.isArray(meta)) return void 0;
+  const { path, kind, mediaType, bytes, assetUrl, image, inContext, unavailable } = meta;
+  if (typeof path !== "string" || path.length === 0) return void 0;
+  if (typeof kind !== "string" || !VIEWER_KINDS.includes(kind)) return void 0;
+  if (typeof mediaType !== "string" || mediaType.length === 0) return void 0;
+  if (typeof bytes !== "number" || !Number.isInteger(bytes) || bytes < 0) return void 0;
+  if (typeof inContext !== "boolean") return void 0;
+  if (assetUrl !== void 0 && (typeof assetUrl !== "string" || !assetUrl.startsWith(`${ASSET_ROUTE}?`))) return void 0;
+  if (unavailable !== void 0 && typeof unavailable !== "string") return void 0;
+  const narrowedImage = image === void 0 ? void 0 : modelImageFrom(image);
+  if (image !== void 0 && narrowedImage === void 0) return void 0;
+  return {
+    path,
+    kind,
+    mediaType,
+    bytes,
+    inContext,
+    ...assetUrl === void 0 ? {} : { assetUrl },
+    ...narrowedImage === void 0 ? {} : { image: narrowedImage },
+    ...unavailable === void 0 ? {} : { unavailable }
+  };
+}
+function isPositiveInteger(value) {
+  return typeof value === "number" && Number.isInteger(value) && value > 0;
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${unit === 0 ? value : value.toFixed(value < 10 ? 1 : 0)} ${units[unit]}`;
+}
+
+// src/client/ViewerCard.tsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+
+// src/client/card-model.ts
+function isSettled(block) {
+  return "kind" in block && block.kind === "tool-result";
+}
+function argumentPathOf(block) {
+  const raw = isSettled(block) ? block.call?.argsRaw : block.argsRaw;
+  if (typeof raw !== "string" || raw.length === 0) return void 0;
+  try {
+    const parsed = JSON.parse(raw);
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) return void 0;
+    const { file_path: filePath } = parsed;
+    return typeof filePath === "string" && filePath.length > 0 ? filePath : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function textOf(content) {
+  const parts = [];
+  for (const block of content) {
+    if (typeof block !== "object" || block === null) continue;
+    const { type, text } = block;
+    if (type === "text" && typeof text === "string") parts.push(text);
+  }
+  return parts.join("\n").trim();
+}
+function contentImageOf(content) {
+  for (const block of content) {
+    if (typeof block !== "object" || block === null) continue;
+    const { type, attachment } = block;
+    if (type !== "image") continue;
+    const image = modelImageFrom(attachment);
+    if (image !== void 0) return image;
+  }
+  return void 0;
+}
+function element(text, tag) {
+  const match = new RegExp(`<${tag}>([\\s\\S]*?)</${tag}>`).exec(text);
+  const value = match?.[1]?.trim();
+  return value !== void 0 && value.length > 0 ? value : void 0;
+}
+function envelopePathOf(content) {
+  return element(textOf(content), "path");
+}
+function envelopeValueOf(content, inContext) {
+  const text = textOf(content);
+  const path = element(text, "path");
+  const kind = element(text, "type");
+  const mediaType = element(text, "media");
+  const bytes = Number(element(text, "bytes") ?? Number.NaN);
+  if (path === void 0 || kind === void 0 || mediaType === void 0 || !Number.isInteger(bytes)) return void 0;
+  const assetUrl = element(text, "asset");
+  return displayValueFrom({
+    path,
+    kind,
+    mediaType,
+    bytes,
+    inContext,
+    ...assetUrl === void 0 ? {} : { assetUrl }
+  });
+}
+function cardModel(block, toolName) {
+  const path = argumentPathOf(block);
+  if (!isSettled(block)) return { phase: "running", path };
+  if (block.isError) {
+    const message = textOf(block.content);
+    return { phase: "failed", path, message: message.length > 0 ? message : block.error?.code ?? "failed" };
+  }
+  const image = contentImageOf(block.content);
+  if (toolName === DISPLAY_TOOL) {
+    const value = displayValueFrom(block.meta);
+    if (value !== void 0) return { phase: "ready", value };
+    const recovered = envelopeValueOf(block.content, image !== void 0);
+    if (recovered !== void 0) {
+      return { phase: "ready", value: { ...recovered, ...image === void 0 ? {} : { image } } };
+    }
+  }
+  if (image !== void 0) {
+    const displayPath = path ?? envelopePathOf(block.content) ?? image.name ?? "";
+    return {
+      phase: "ready",
+      value: {
+        path: displayPath,
+        kind: "image",
+        mediaType: image.mediaType,
+        bytes: image.bytes,
+        // No asset URL: this result was not minted by this plugin, so the bytes
+        // come over the session attachment channel instead.
+        image,
+        inContext: true
+      }
+    };
+  }
+  return {
+    phase: "bare",
+    path,
+    message: path === void 0 ? "" : classifyPath(path).mediaType
+  };
+}
+
+// src/client/host.ts
+function isDesktopShell(globals = globalThis) {
+  return globals.__DSH_HOST_PATHS__ !== void 0 || globals.location?.protocol === "dsh-app:";
+}
+var LOOPBACK = /* @__PURE__ */ new Set(["127.0.0.1", "localhost", "[::1]"]);
+function mediaSourceFor(assetUrl, globals = globalThis) {
+  if (!assetUrl.startsWith("/") || !isDesktopShell(globals)) return assetUrl;
+  const base = globals.__DSH_TRANSPORT__?.streamBaseUrl;
+  if (typeof base !== "string") return assetUrl;
+  try {
+    const url = new URL(base);
+    if (url.protocol !== "http:" && url.protocol !== "https:" || !LOOPBACK.has(url.hostname)) return assetUrl;
+    return new URL(assetUrl, url).href;
+  } catch {
+    return assetUrl;
+  }
+}
+
+// src/client/sources.ts
+function imageLoaderFor(owner, fallback) {
+  if (typeof owner !== "function") return (image) => fallback(image.attachmentId);
+  return (image) => owner({ ...image });
+}
+
+// src/client/ViewerCard.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CSS = "dshview";
+var KIND_TITLE = {
+  image: "title.image",
+  video: "title.video",
+  audio: "title.audio",
+  pdf: "title.pdf",
+  document: "title.document",
+  html: "title.html",
+  file: "title.file"
+};
+function PathLabel({ path }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `${CSS}-path`, title: path, children: [
+    "\u2068",
+    path,
+    "\u2069"
+  ] });
+}
+function KindIcon({ kind }) {
+  const paths = {
+    image: "M3 4.5h10v7H3zM3 10l2.5-2.5 2 2L10.5 6l2.5 3v2.5H3z",
+    video: "M2.5 4h7.5v8H2.5zM10.5 6.8l3-1.8v6l-3-1.8z",
+    audio: "M6 3.5v6.2a2 2 0 1 0 1.2 1.8V6h4V3.5z",
+    pdf: "M4 2h5l3 3v9H4zM9 2v3h3",
+    document: "M4 2h5l3 3v9H4zM9 2v3h3M5.5 8h5M5.5 10.5h5",
+    html: "M2.5 8 6 4.6l.9.9L4.3 8l2.6 2.5-.9.9zM13.5 8 10 11.4l-.9-.9L11.7 8 9.1 5.5l.9-.9z",
+    file: "M4 2h5l3 3v9H4zM9 2v3h3"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${CSS}-icon`, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: paths[kind] }) }) });
+}
+function useMediaSource(value, load) {
+  const [resolved, setResolved] = (0, import_react.useState)(void 0);
+  const [failed, setFailed] = (0, import_react.useState)(false);
+  const [attempt, setAttempt] = (0, import_react.useState)(0);
+  const retry = (0, import_react.useCallback)(() => {
+    setAttempt((a) => a + 1);
+  }, []);
+  const loader = (0, import_react.useRef)(load);
+  loader.current = load;
+  const image = value.image;
+  const attachmentId = image?.attachmentId;
+  const direct = value.assetUrl;
+  (0, import_react.useEffect)(() => {
+    if (direct !== void 0 || image === void 0) {
+      setResolved(void 0);
+      setFailed(false);
+      return;
+    }
+    let live = true;
+    setResolved(void 0);
+    setFailed(false);
+    void loader.current(image).then(
+      (url) => {
+        if (live) setResolved(url);
+      },
+      () => {
+        if (live) setFailed(true);
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [direct, attachmentId, attempt]);
+  if (direct !== void 0) return { src: direct, failed: false, pending: false, retry };
+  if (attachmentId === void 0) return { src: void 0, failed: false, pending: false, retry };
+  return { src: resolved, failed, pending: resolved === void 0 && !failed, retry };
+}
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Lightbox({ src, alt, onClose, closeLabel }) {
+  const panel = (0, import_react.useRef)(null);
+  const close = (0, import_react.useRef)(null);
+  const origin = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    origin.current = document.activeElement;
+    close.current?.focus();
+    return () => {
+      const back = origin.current;
+      if (back?.isConnected) back.focus();
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const items = panel.current?.querySelectorAll(FOCUSABLE);
+      if (items === void 0 || items.length === 0) return;
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (first === void 0 || last === void 0) return;
+      const active = document.activeElement;
+      const outside = active === null || panel.current?.contains(active) !== true;
+      const atEdge = event.shiftKey ? active === first : active === last;
+      if (!outside && !atEdge) return;
+      event.preventDefault();
+      if (event.shiftKey) last.focus();
+      else first.focus();
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => {
+      window.removeEventListener("keydown", onKey, true);
+    };
+  }, [onClose]);
+  if (typeof document === "undefined") return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: panel, className: `${CSS}-lightbox`, role: "dialog", "aria-modal": "true", "aria-label": alt, onClick: onClose, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          className: `${CSS}-lightboxImage`,
+          src,
+          alt,
+          onClick: (event) => event.stopPropagation()
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          ref: close,
+          type: "button",
+          className: `${CSS}-lightboxClose`,
+          "aria-label": closeLabel,
+          title: closeLabel,
+          onClick: (event) => {
+            event.stopPropagation();
+            onClose();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z" }) })
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function OpenAction({ src, path, openFile, t }) {
+  if (isDesktopShell()) {
+    if (openFile === void 0) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: `${CSS}-action`, onClick: () => {
+      openFile(path);
+    }, children: t("action.openSidebar") });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: `${CSS}-link`, href: src, target: "_blank", rel: "noreferrer", children: t("action.openNew") });
+}
+function Viewer({ value, sources, t }) {
+  const { src, failed, pending, retry } = useMediaSource(value, sources.loadImage);
+  const [zoomed, setZoomed] = (0, import_react.useState)(false);
+  const closeZoom = (0, import_react.useCallback)(() => {
+    setZoomed(false);
+  }, []);
+  const label = value.image?.name ?? value.path;
+  if (failed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: `${CSS}-retry`, onClick: retry, children: t("state.loadFailed") });
+  }
+  if (pending) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${CSS}-note`, children: t("state.loading") });
+  if (src === void 0) {
+    if (value.unavailable !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${CSS}-note`, children: value.unavailable });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${CSS}-note`, children: t(value.kind === "image" ? "state.unsupported" : "state.unavailable") });
+  }
+  switch (value.kind) {
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: `${CSS}-imageButton`, title: t("action.open"), "aria-label": t("action.open"), onClick: () => {
+          setZoomed(true);
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: `${CSS}-image`, src, alt: label, loading: "lazy" }) }),
+        zoomed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lightbox, { src, alt: label, onClose: closeZoom, closeLabel: t("action.close") })
+      ] });
+    case "video":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("video", { className: `${CSS}-video`, src: mediaSourceFor(src), controls: true, preload: "metadata", children: t("media.noVideo") });
+    case "audio":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("audio", { className: `${CSS}-audio`, src: mediaSourceFor(src), controls: true, preload: "metadata", children: t("media.noAudio") });
+    case "pdf":
+    case "document":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", { className: `${CSS}-frame`, src, title: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OpenAction, { src, path: value.path, openFile: sources.openFile, t })
+      ] });
+    case "html":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "iframe",
+          {
+            className: `${CSS}-frame`,
+            src,
+            title: label,
+            sandbox: "allow-scripts allow-forms allow-popups"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OpenAction, { src, path: value.path, openFile: sources.openFile, t })
+      ] });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OpenAction, { src, path: value.path, openFile: sources.openFile, t });
+  }
+}
+function Head({ kind, label, path, detail, badge, onToggle, expanded, t }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: `${CSS}-head`,
+      onClick: onToggle,
+      "aria-expanded": onToggle === void 0 ? void 0 : expanded,
+      title: onToggle === void 0 ? void 0 : t(expanded ? "action.collapse" : "action.expand"),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KindIcon, { kind }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${CSS}-kind`, children: t(label) }),
+        path.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PathLabel, { path }),
+        detail.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${CSS}-meta`, children: detail }),
+        badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${CSS}-badge`, children: badge })
+      ]
+    }
+  );
+}
+function detailOf(value) {
+  const size = formatBytes(value.bytes);
+  const dimensions = value.image === void 0 ? "" : `${value.image.width}\xD7${value.image.height}`;
+  return [dimensions, size].filter((part) => part.length > 0).join(" \xB7 ");
+}
+function DisplayedFile({ value, toolName, sources, t }) {
+  const [open, setOpen] = (0, import_react.useState)(true);
+  const toggle = (0, import_react.useCallback)(() => {
+    setOpen((previous) => !previous);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${CSS}-card`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Head,
+      {
+        kind: value.kind,
+        label: headLabel(toolName, value.kind),
+        path: value.path,
+        detail: detailOf(value),
+        badge: t(value.inContext ? "badge.inContext" : "badge.screenOnly"),
+        expanded: open,
+        onToggle: toggle,
+        t
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${CSS}-body`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Viewer, { value, sources, t }) })
+  ] });
+}
+function ViewerCard({ toolName, block, t, openFile, loadImage, loadAttachment }) {
+  const state = cardModel(block, toolName);
+  if (state.phase === "ready") {
+    const sources = { loadImage: imageLoaderFor(loadImage, loadAttachment), openFile };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DisplayedFile, { value: state.value, toolName, sources, t });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnsettledCard, { state, toolName, t });
+}
+function UnsettledCard({ state, toolName, t }) {
+  const [open, setOpen] = (0, import_react.useState)(true);
+  const toggle = (0, import_react.useCallback)(() => {
+    setOpen((previous) => !previous);
+  }, []);
+  const kind = classifyKind(state.path);
+  const label = headLabel(toolName, kind);
+  const path = state.path ?? "";
+  if (state.phase === "running") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${CSS}-card`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Head, { kind, label, path, detail: t("state.running"), expanded: false, t }) });
+  }
+  if (state.phase === "failed") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${CSS}-card`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Head, { kind, label, path, detail: "", expanded: open, onToggle: toggle, t }),
+      open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${CSS}-body`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${CSS}-note ${CSS}-error`, children: state.message }) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${CSS}-card`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Head, { kind, label, path, detail: state.message, expanded: false, t }) });
+}
+function headLabel(toolName, kind) {
+  return toolName === READ_IMAGE_TOOL ? "title.readImage" : KIND_TITLE[kind];
+}
+function classifyKind(path) {
+  return path === void 0 ? "file" : classifyPath(path).kind;
+}
+
+// src/client/ViewerTail.tsx
+var import_react2 = require("react");
+
+// src/client/turn-tail.ts
+var VIEWER_TURN_DATA = "crosery-viewer";
+var VIEWER_NESTED = "crosery-viewer-nested";
+var VIEWER_INPUT = "crosery-viewer-input";
+var VIEWER_TURN_END = "crosery-viewer-turn-end";
+var CHAT_TURN_PROCESS = "turn-process";
+function field(value, key) {
+  return typeof value === "object" && value !== null ? value[key] : void 0;
+}
+function turnOf(event) {
+  const turn = field(event.data, "turn");
+  return typeof turn === "number" && Number.isFinite(turn) ? turn : void 0;
+}
+function isTranscriptResult(event) {
+  return event.surfaceOp === void 0 || event.surfaceOp === "append";
+}
+function locationTurn(location) {
+  const kind = field(location, "kind");
+  if (kind !== "turn" && kind !== "step") return void 0;
+  const turn = field(field(location, "turn"), "turn");
+  return typeof turn === "number" && Number.isFinite(turn) ? turn : void 0;
+}
+function resultCallId(event) {
+  const id = field(field(field(event.data, "message"), "source"), "callId");
+  return typeof id === "string" || typeof id === "number" ? String(id) : void 0;
+}
+function displayedValueOf(data) {
+  const message = field(data, "message");
+  if (field(message, "isError") === true) return void 0;
+  const fromMeta = displayValueFrom(field(data, "meta"));
+  if (fromMeta !== void 0) return fromMeta;
+  const content = field(message, "content");
+  if (!Array.isArray(content)) return void 0;
+  const image = contentImageOf(content);
+  const recovered = envelopeValueOf(content, image !== void 0);
+  return recovered === void 0 ? void 0 : { ...recovered, ...image === void 0 ? {} : { image } };
+}
+var viewerTurnDefinition = {
+  kind: VIEWER_TURN_DATA,
+  match(event) {
+    const turn = turnOf(event);
+    if (turn === void 0) return null;
+    if (event.type === "turn/start") return { id: String(turn), role: "start" };
+    if (event.type === "tool/call") return field(event.data, "name") === DISPLAY_TOOL ? { id: String(turn), role: "update" } : null;
+    if (event.type === "tool/result") return isTranscriptResult(event) ? { id: String(turn), role: "update" } : null;
+    return null;
+  },
+  start(_context, match) {
+    const turn = turnOf(match.event);
+    if (match.event.type !== "turn/start" || turn === void 0) throw new Error("dsh-viewer: a turn context starts at turn/start");
+    return { turn, calls: /* @__PURE__ */ new Set(), displayed: [] };
+  },
+  update(context, match) {
+    const { event } = match;
+    const state = context.state;
+    if (event.type === "tool/call") {
+      const id = field(event.data, "callId");
+      if (typeof id !== "string" && typeof id !== "number") return state;
+      const calls = new Set(state.calls);
+      calls.add(String(id));
+      return { ...state, calls };
+    }
+    if (event.type !== "tool/result") return state;
+    const callId = resultCallId(event);
+    if (callId === void 0 || !state.calls.has(callId)) return state;
+    const value = displayedValueOf(event.data);
+    if (value === void 0 || typeof event.seq !== "number") return state;
+    return { ...state, displayed: [...state.displayed, { seq: event.seq, callId, value }] };
+  },
+  buildLocationData(context, scope, previous) {
+    const state = context.state;
+    if (scope !== "turn" || state === void 0 || state.displayed.length === 0) return null;
+    if (previous?.kind === "turn" && previous.turn === state.turn && previous.key === VIEWER_TURN_DATA && previous.value?.displayed === state.displayed) {
+      return previous;
+    }
+    return { kind: "turn", turn: state.turn, key: VIEWER_TURN_DATA, value: { displayed: state.displayed } };
+  }
+};
+var nestedDisplayDefinition = {
+  kind: VIEWER_NESTED,
+  match(event) {
+    if (event.type !== "tool/ptc-dispatch" || field(event.data, "name") !== DISPLAY_TOOL) return null;
+    const id = field(event.data, "subCallId");
+    return typeof id === "string" || typeof id === "number" ? { id: String(id), role: "start" } : null;
+  },
+  start(_context, match, reader) {
+    const { event } = match;
+    const previous = reader?.previous?.(VIEWER_NESTED)?.state;
+    const value = displayedValueOf({ message: { isError: field(event.data, "isError"), content: field(event.data, "content") } });
+    return {
+      turn: locationTurn(match.location),
+      display: value === void 0 || typeof event.seq !== "number" ? void 0 : { seq: event.seq, callId: String(field(event.data, "subCallId")), value },
+      previous
+    };
+  },
+  update(context) {
+    return context.state;
+  },
+  publication() {
+    return "none";
+  }
+};
+var humanInputDefinition = {
+  kind: VIEWER_INPUT,
+  match(event) {
+    if (event.type !== "user/message" || event.surfaceOp !== "append") return null;
+    if (field(field(event.data, "source"), "kind") !== "user") return null;
+    const id = field(event.data, "id");
+    return typeof id === "string" || typeof id === "number" ? { id: String(id), role: "start" } : null;
+  },
+  start(_context, match) {
+    return { turn: locationTurn(match.location), seq: typeof match.event.seq === "number" ? match.event.seq : -1 };
+  },
+  update(context) {
+    return context.state;
+  },
+  publication() {
+    return "none";
+  }
+};
+var turnEndDefinition = {
+  kind: VIEWER_TURN_END,
+  match(event) {
+    if (event.type !== "turn/end") return null;
+    const turn = turnOf(event);
+    return turn === void 0 ? null : { id: String(turn), role: "start" };
+  },
+  start(_context, match, reader) {
+    const turn = turnOf(match.event);
+    if (match.event.type !== "turn/end" || turn === void 0) throw new Error("dsh-viewer: a turn-end context starts at turn/end");
+    const nested = [];
+    let node = reader?.previous?.(VIEWER_NESTED)?.state;
+    for (; node !== void 0 && node.turn === turn; node = node.previous) {
+      if (node.display !== void 0) nested.push(node.display);
+    }
+    const input = reader?.previous?.(VIEWER_INPUT)?.state;
+    return { turn, nested: nested.reverse(), lastInputSeq: input?.turn === turn ? input.seq : void 0 };
+  },
+  update(context) {
+    return context.state;
+  },
+  buildLocationData(context, scope, previous) {
+    const state = context.state;
+    if (scope !== "turn" || state === void 0) return null;
+    if (state.nested.length === 0 && state.lastInputSeq === void 0) return null;
+    if (previous?.kind === "turn" && previous.turn === state.turn && previous.key === VIEWER_TURN_END && previous.value?.nested === state.nested && previous.value.lastInputSeq === state.lastInputSeq) {
+      return previous;
+    }
+    return {
+      kind: "turn",
+      turn: state.turn,
+      key: VIEWER_TURN_END,
+      value: { nested: state.nested, ...state.lastInputSeq === void 0 ? {} : { lastInputSeq: state.lastInputSeq } }
+    };
+  }
+};
+var viewerTurnDefinitions = [viewerTurnDefinition, nestedDisplayDefinition, humanInputDefinition, turnEndDefinition];
+function hasInterleavedInput(turn) {
+  const input = field(turn.data?.get?.(VIEWER_TURN_END), "lastInputSeq");
+  const anchor = field(turn.data?.get?.(CHAT_TURN_PROCESS), "controlAnchorSeq");
+  if (typeof input !== "number" || typeof anchor !== "number") return false;
+  if (anchor === field(turn.start, "seq")) return false;
+  return input > anchor;
+}
+function turnStaysOpen(turn, steeredStaysOpen = false) {
+  if (turn.status === "open") return true;
+  const reason = field(field(field(turn.end, "data"), "reason"), "kind");
+  if (reason === "aborted" || reason === "error") return true;
+  return steeredStaysOpen && hasInterleavedInput(turn);
+}
+function tailDisplays(turn, closingSeq, steeredStaysOpen = false) {
+  if (turnStaysOpen(turn, steeredStaysOpen)) return [];
+  const data = turn.data?.get?.(VIEWER_TURN_DATA);
+  const end = turn.data?.get?.(VIEWER_TURN_END);
+  const displayed = [
+    ...Array.isArray(data?.displayed) ? data.displayed : [],
+    ...Array.isArray(end?.nested) ? end.nested : []
+  ].sort((a, b) => a.seq - b.seq);
+  const byPath = /* @__PURE__ */ new Map();
+  for (const entry of displayed) {
+    if (entry.seq >= closingSeq) continue;
+    byPath.delete(entry.value.path);
+    byPath.set(entry.value.path, entry);
+  }
+  return [...byPath.values()];
+}
+function foldsCompletedTurns(mode) {
+  return mode !== "verbose";
+}
+function foldSourceOf(forms) {
+  const form = () => {
+    const service = forms();
+    if (typeof service?.get !== "function") return void 0;
+    try {
+      const found = service.get("ui-chat");
+      return typeof found?.getSnapshot === "function" && typeof found.subscribe === "function" ? found : void 0;
+    } catch {
+      return void 0;
+    }
+  };
+  return {
+    getSnapshot: () => foldsCompletedTurns(form()?.getSnapshot()?.value?.transcriptView),
+    subscribe: (listener) => form()?.subscribe(listener) ?? (() => {
+    }),
+    keepsSteeredTurnsOpen: () => form() !== void 0
+  };
+}
+
+// src/client/ViewerTail.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var never = () => () => {
+};
+function ViewerTail({ turn, seq, openFile, folds, loadAttachment, t }) {
+  const folding = (0, import_react2.useSyncExternalStore)(folds?.subscribe ?? never, folds?.getSnapshot ?? (() => true));
+  if (!folding) return null;
+  const displays = tailDisplays(turn, seq, folds?.keepsSteeredTurnsOpen?.() ?? false);
+  if (displays.length === 0) return null;
+  const sources = { loadImage: imageLoaderFor(void 0, loadAttachment), openFile };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("section", { className: "dshview-tail", "aria-label": t("tail.label"), children: displays.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DisplayedFile, { value: entry.value, toolName: DISPLAY_TOOL, sources, t }, entry.callId)) });
+}
+
+// src/client/locales.ts
+var zh = {
+  "title.image": "\u56FE\u7247",
+  "title.video": "\u89C6\u9891",
+  "title.audio": "\u97F3\u9891",
+  "title.pdf": "PDF",
+  "title.document": "\u6587\u6863",
+  "title.html": "\u7F51\u9875",
+  "title.file": "\u6587\u4EF6",
+  "title.readImage": "\u8BFB\u5165\u56FE\u7247",
+  "state.running": "\u8BFB\u53D6\u4E2D",
+  "state.loading": "\u52A0\u8F7D\u4E2D",
+  "state.loadFailed": "\u52A0\u8F7D\u5931\u8D25\uFF0C\u70B9\u51FB\u91CD\u8BD5",
+  "state.retry": "\u91CD\u8BD5",
+  "state.unavailable": "\u6B64\u6587\u4EF6\u7CFB\u7EDF\u540E\u7AEF\u4E0D\u63D0\u4F9B\u53EF\u9884\u89C8\u7684\u672C\u5730\u8DEF\u5F84",
+  "state.unsupported": "\u6CA1\u6709\u53EF\u7528\u7684\u9884\u89C8\u5185\u5BB9",
+  "badge.inContext": "\u5DF2\u8FDB\u5165\u6A21\u578B\u4E0A\u4E0B\u6587",
+  "badge.screenOnly": "\u4EC5\u5728\u9875\u9762\u663E\u793A",
+  "action.open": "\u67E5\u770B\u539F\u56FE",
+  "action.openNew": "\u5728\u65B0\u6807\u7B7E\u6253\u5F00",
+  "action.openSidebar": "\u5728\u4FA7\u8FB9\u680F\u9884\u89C8",
+  "action.close": "\u5173\u95ED",
+  "action.expand": "\u5C55\u5F00",
+  "action.collapse": "\u6536\u8D77",
+  "media.noVideo": "\u5F53\u524D\u6D4F\u89C8\u5668\u65E0\u6CD5\u64AD\u653E\u8BE5\u89C6\u9891\u683C\u5F0F",
+  "media.noAudio": "\u5F53\u524D\u6D4F\u89C8\u5668\u65E0\u6CD5\u64AD\u653E\u8BE5\u97F3\u9891\u683C\u5F0F",
+  "tail.label": "\u672C\u8F6E\u5C55\u793A\u7684\u6587\u4EF6"
+};
+var en = {
+  "title.image": "Image",
+  "title.video": "Video",
+  "title.audio": "Audio",
+  "title.pdf": "PDF",
+  "title.document": "Document",
+  "title.html": "Page",
+  "title.file": "File",
+  "title.readImage": "Image read",
+  "state.running": "Reading",
+  "state.loading": "Loading",
+  "state.loadFailed": "Failed to load \u2014 click to retry",
+  "state.retry": "Retry",
+  "state.unavailable": "This filesystem backend exposes no previewable local path",
+  "state.unsupported": "Nothing to preview",
+  "badge.inContext": "in model context",
+  "badge.screenOnly": "shown to you only",
+  "action.open": "View full size",
+  "action.openNew": "Open in a new tab",
+  "action.openSidebar": "Preview in sidebar",
+  "action.close": "Close",
+  "action.expand": "Expand",
+  "action.collapse": "Collapse",
+  "media.noVideo": "This browser cannot play that video format",
+  "media.noAudio": "This browser cannot play that audio format",
+  "tail.label": "Files shown in this turn"
+};
+
+// src/client/styles.ts
+var PLUGIN_ID = "@crosery/dsh-viewer";
+var SHEET = `
+.dshview-card { display: flex; flex-direction: column; gap: 6px; margin: 2px 0; min-width: 0; }
+
+.dshview-head {
+  display: flex; align-items: center; gap: 6px; min-width: 0;
+  padding: 2px 0; border: 0; background: transparent; text-align: left;
+  color: var(--dsw-alias-label-secondary); font: inherit; font-size: 12px; line-height: 20px;
+  cursor: pointer;
+}
+.dshview-head:hover { color: var(--dsw-alias-label-primary); }
+.dshview-icon { flex: none; display: inline-flex; color: var(--dsw-alias-label-secondary); }
+.dshview-kind { flex: none; color: var(--dsw-alias-label-primary); font-weight: 500; }
+.dshview-path {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  direction: rtl; text-align: left;
+}
+.dshview-meta { flex: none; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dshview-badge {
+  flex: none; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 16px;
+  background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-secondary);
+}
+
+.dshview-body {
+  display: flex; flex-direction: column; gap: 6px;
+  padding: 8px; border-radius: 10px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: var(--dsw-alias-bg-layer-1);
+  min-width: 0; overflow: hidden;
+}
+
+.dshview-imageButton {
+  display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in;
+  line-height: 0; max-width: 100%;
+}
+/* A transparent PNG on a themed panel is unreadable without a backdrop; the
+   checkerboard is the conventional one and reads in both palettes. Shared by
+   the card thumbnail and the zoomed preview so the two cannot drift apart. */
+.dshview-image,
+.dshview-lightboxImage {
+  background-color: var(--dsw-alias-bg-layer-2);
+  background-image:
+    linear-gradient(45deg, rgb(128 128 128 / .16) 25%, transparent 25%),
+    linear-gradient(-45deg, rgb(128 128 128 / .16) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgb(128 128 128 / .16) 75%),
+    linear-gradient(-45deg, transparent 75%, rgb(128 128 128 / .16) 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+.dshview-image {
+  display: block; max-width: 100%; max-height: 420px; width: auto; height: auto;
+  border-radius: 6px; object-fit: contain;
+}
+.dshview-video { display: block; max-width: 100%; max-height: 420px; border-radius: 6px; background: #000; }
+.dshview-audio { display: block; width: 100%; }
+.dshview-frame {
+  display: block; width: 100%; height: 460px; border: 0; border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.dshview-note { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+.dshview-error { color: var(--dsw-alias-state-error-primary); }
+.dshview-retry {
+  align-self: flex-start; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 12px;
+  border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px;
+  background: transparent; color: var(--dsw-alias-state-error-primary);
+}
+.dshview-link {
+  align-self: flex-start; font-size: 12px; color: var(--dsw-alias-brand-primary);
+  text-decoration: none;
+}
+.dshview-link:hover { text-decoration: underline; }
+.dshview-action {
+  align-self: flex-start; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 12px;
+  border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px;
+  background: transparent; color: var(--dsw-alias-brand-primary);
+}
+.dshview-action:hover { background: var(--dsw-alias-bg-layer-2); }
+.dshview-head:focus-visible,
+.dshview-imageButton:focus-visible,
+.dshview-action:focus-visible,
+.dshview-retry:focus-visible,
+.dshview-lightboxClose:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 2px;
+}
+
+/* A completed turn's displays, below its closing reply (see turn-tail.ts). */
+.dshview-tail { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; min-width: 0; }
+
+.dshview-lightbox {
+  position: fixed; inset: 0; z-index: 2000; display: flex;
+  align-items: center; justify-content: center;
+  padding: 32px; background: rgb(0 0 0 / .72);
+  backdrop-filter: blur(4px);
+  cursor: zoom-out;
+}
+.dshview-lightboxImage {
+  position: relative;
+  max-width: min(100%, 1600px); max-height: calc(100vh - 64px);
+  object-fit: contain; border-radius: 8px;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
+  cursor: default;
+}
+.dshview-lightboxClose {
+  position: fixed; top: 20px; right: 20px; z-index: 2001;
+  display: flex; align-items: center; justify-content: center;
+  width: 36px; height: 36px; border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin, rgba(255, 255, 255, 0.2));
+  background: var(--dsw-specific-input-major, rgba(0, 0, 0, 0.5));
+  color: var(--dsw-alias-label-primary, #fff);
+  cursor: pointer;
+  transition: background 0.15s ease, transform 0.15s ease;
+}
+/* Hover inverts the button using the alias pair that exists for exactly this:
+   --dsw-alias-label-primary-foreground is by definition the readable colour on
+   --dsw-alias-label-primary, and the two swap between palettes. A literal black
+   here put a near-black glyph on black in the light theme. */
+.dshview-lightboxClose:hover {
+  background: var(--dsw-alias-label-primary, #fff);
+  color: var(--dsw-alias-label-primary-foreground, #0f1115);
+  transform: scale(1.05);
+}
+`;
+function installViewerStyles(ctx) {
+  if (typeof document === "undefined") return;
+  ctx.effect(() => {
+    const tag = document.createElement("style");
+    tag.dataset.plugin = PLUGIN_ID;
+    tag.dataset.pluginCss = `${PLUGIN_ID}/viewer-card.css`;
+    tag.textContent = SHEET;
+    document.head.appendChild(tag);
+    return () => {
+      tag.remove();
+    };
+  }, "@crosery/dsh-viewer: card stylesheet");
+}
+
+// src/client/registration.ts
+var VIEWER_NS = "tool.viewer";
+var READ_IMAGE_PRIORITY = 1;
+var TURN_TAIL_SLOT = "conversation.chat.turnTail";
+function contribute(slots, key, register, warn = console.warn) {
+  slots.inject(key, () => {
+    try {
+      return register();
+    } catch (error) {
+      warn(`[dsh-viewer] could not register into "${key}"; the rest of the viewer is unaffected`, error);
+      return () => {
+      };
+    }
+  });
+}
+function turnTailJoinable(spec) {
+  return spec?.kind === void 0 || spec.kind === "list";
+}
+
+// src/client/index.ts
+var AttachmentUrls = class {
+  /** @param ctx - client context used to reach the sessions service. */
+  constructor(ctx) {
+    this.ctx = ctx;
+  }
+  ctx;
+  pending = /* @__PURE__ */ new Map();
+  created = /* @__PURE__ */ new Set();
+  disposed = false;
+  /**
+   * Resolve one attachment to a URL this page can load.
+   * @param sessionId - the session authorizing the read.
+   * @param attachmentId - the opaque durable id.
+   * @returns a URL valid until this plugin unloads.
+   */
+  resolve(sessionId, attachmentId) {
+    if (this.disposed) return Promise.reject(new Error("dsh-viewer: the plugin was unloaded"));
+    const key = `${sessionId}:${attachmentId}`;
+    const cached = this.pending.get(key);
+    if (cached !== void 0) return cached;
+    const sessions = this.ctx.get("sessions");
+    const session = sessions?.binding(sessionId)?.session;
+    if (session === void 0) return Promise.reject(new Error(`dsh-viewer: unknown session "${sessionId}"`));
+    const request = session.readAttachment(attachmentId).then((result) => {
+      if (!result.ok) throw new Error(`${result.error.code}: ${result.error.message}`);
+      if (this.disposed) throw new Error("dsh-viewer: the plugin unloaded before the image arrived");
+      const { data, attachment } = result.value;
+      if (typeof URL.createObjectURL !== "function") {
+        return `data:${attachment.mediaType};base64,${base64Of(data)}`;
+      }
+      const bytes = Uint8Array.from(data);
+      const url = URL.createObjectURL(new Blob([bytes.buffer], { type: attachment.mediaType }));
+      this.created.add(url);
+      return url;
+    }).catch((error) => {
+      this.pending.delete(key);
+      throw error;
+    });
+    this.pending.set(key, request);
+    return request;
+  }
+  /** Revoke every URL this cache minted. */
+  dispose() {
+    this.disposed = true;
+    this.pending.clear();
+    for (const url of this.created) URL.revokeObjectURL(url);
+    this.created.clear();
+  }
+};
+function base64Of(data) {
+  let binary = "";
+  const chunk = 32768;
+  for (let offset = 0; offset < data.length; offset += chunk) {
+    binary += String.fromCharCode(...data.subarray(offset, offset + chunk));
+  }
+  return btoa(binary);
+}
+var inject = ["slots", "locale"];
+var name = "@crosery/dsh-viewer";
+function apply(ctx) {
+  installViewerStyles(ctx);
+  const urls = new AttachmentUrls(ctx);
+  ctx.effect(() => () => {
+    urls.dispose();
+  }, "@crosery/dsh-viewer: attachment URLs");
+  ctx.effect(() => ctx.locale.register(VIEWER_NS, { zh, en }), "@crosery/dsh-viewer: card dictionaries");
+  const injected = (sessionId) => ({
+    loadAttachment: (attachmentId) => urls.resolve(sessionId, attachmentId)
+  });
+  const slots = ctx.slots;
+  contribute(slots, "tool.call.toolview", () => ctx.slots.register({
+    name: "tool.call.toolview",
+    key: DISPLAY_TOOL,
+    locale: VIEWER_NS,
+    inject: injected
+  }, ViewerCard));
+  contribute(slots, "tool.call.toolview", () => ctx.slots.register({
+    name: "tool.call.toolview",
+    key: READ_IMAGE_TOOL,
+    priority: READ_IMAGE_PRIORITY,
+    locale: VIEWER_NS,
+    inject: injected
+  }, ViewerCard));
+  const folds = foldSourceOf(() => ctx.get("configForms"));
+  ctx.inject(["uiConversation"], (scoped) => {
+    const conversation = scoped.uiConversation;
+    const register = conversation?.events?.register;
+    if (typeof register !== "function") return;
+    const [own, ...supplementary] = viewerTurnDefinitions;
+    try {
+      register.call(conversation?.events, own);
+    } catch (error) {
+      console.warn("[dsh-viewer] could not register the turn-tail data; completed turns keep their displays folded", error);
+      return;
+    }
+    for (const definition of supplementary) {
+      try {
+        register.call(conversation?.events, definition);
+      } catch (error) {
+        console.warn(`[dsh-viewer] could not register ${definition.kind}; the turn tail may miss some displays`, error);
+      }
+    }
+    const scopedSlots = scoped.slots;
+    contribute(scopedSlots, TURN_TAIL_SLOT, () => {
+      if (!turnTailJoinable(scopedSlots.spec?.(TURN_TAIL_SLOT))) return () => {
+      };
+      return scopedSlots.register({
+        name: TURN_TAIL_SLOT,
+        id: name,
+        locale: VIEWER_NS,
+        inject: (sessionId) => ({ ...injected(sessionId), folds })
+      }, ViewerTail);
+    });
+  });
+}
+return module.exports; } });