@devaccel-labs/app-comments-toolbar 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,20 @@
-# Temporary Holding Version
+# @devaccel-labs/app-comments-toolbar
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The in-app comment toolbar that host apps (Officers Assist, JebelAI) load at runtime from the App comments
+worker as `/v1/toolbar/1.js`. Ported from the comment-service repo (`packages/core` and `packages/react`) on
+2026-10-12; this is now the source of record for the runtime.
+
+- `src/core`: anchor model and resolution (`resolveAnchor`), DOM-free.
+- `src/runtime`: the React runtime (`runtime.tsx` is the bundle entry), element capture and placement, sync,
+  attachments, screenshots, styles. `loader.tsx` is the host-side `<CommentToolbar>`.
+- `src/compiler`, `src/vite`, `src/server`: the Vite plugin that stamps components with `data-cs-cmp` /
+  `data-cs-file`, and the same-origin session route. Entry points `src/react.ts`, `src/vite.ts`, `src/server.ts`.
+- Worker bundle: `bun scripts/app-comments/build-toolbar.mjs` writes `workers/app-comments/toolbar-dist/v1/toolbar/`
+  (checked in; see `docs/policies/generated-files-policy.md`). `bun scripts/dev/dev-app-comments.mjs` builds it too.
+- npm package: `bun run build` here writes `dist/` (vite, react with the runtime bundled as fallback, server, and
+  declarations); publish with `npm publish` from this directory. Host apps install it and use
+  `@devaccel-labs/app-comments-toolbar/vite`, `/react` and `/server`; the `COMMENT_SERVICE_*` env names are unchanged.
+- Tests: `tests/unit/app-comments-toolbar-*.spec.ts`.
+
+The bundle has no version negotiation with host apps: `/v1` responses and the runtime's storage keys must stay
+compatible with whatever package version the hosts have installed.

package/dist/chunks/chunk-CSKXLF33.js

@@ -0,0 +1,153 @@
+// src/runtime/runtime-version.ts
+var runtimeVersion = 1;
+
+// src/runtime/handoff.ts
+var key = "devaccel.comment.handoff";
+var ttl = 30 * 60 * 1e3;
+function readHandoff() {
+  try {
+    const value = JSON.parse(sessionStorage.getItem(key) ?? "null");
+    return value && Date.now() - value.at < ttl ? value : null;
+  } catch {
+    return null;
+  }
+}
+function write(value) {
+  try {
+    if (value.invite || value.thread) sessionStorage.setItem(key, JSON.stringify(value));
+    else sessionStorage.removeItem(key);
+  } catch {
+  }
+}
+function linkParams() {
+  const url = new URL(window.location.href);
+  const hash = new URLSearchParams(url.hash.slice(1));
+  return {
+    url,
+    hash,
+    invite: url.searchParams.get("cs-invite") ?? hash.get("cs-invite"),
+    thread: url.searchParams.get("cs-thread") ?? hash.get("cs-thread")
+  };
+}
+function captureHandoff() {
+  if (typeof window === "undefined") return;
+  const { invite, thread } = linkParams();
+  if (!invite && !thread) return;
+  write({
+    ...readHandoff(),
+    ...invite ? { invite } : {},
+    ...thread ? { thread } : {},
+    at: Date.now()
+  });
+}
+function dropHandoff(part) {
+  const current = readHandoff();
+  if (!current) return;
+  const { [part]: _dropped, ...rest } = current;
+  write(rest);
+}
+function stripHandoffFromUrl() {
+  const { url, hash } = linkParams();
+  const inQuery = url.searchParams.has("cs-invite") || url.searchParams.has("cs-thread");
+  const inHash = hash.has("cs-invite") || hash.has("cs-thread");
+  if (!inQuery && !inHash) return;
+  url.searchParams.delete("cs-invite");
+  url.searchParams.delete("cs-thread");
+  if (inHash) url.hash = "";
+  history.replaceState(history.state, "", url);
+}
+function linkWith(href, name, value) {
+  const url = new URL(href, window.location.origin);
+  url.searchParams.delete("cs-invite");
+  url.searchParams.delete("cs-thread");
+  url.hash = `${name}=${encodeURIComponent(value)}`;
+  return url.toString();
+}
+
+// src/runtime/idle.ts
+var FALLBACK_SLICE_MS = 8;
+function whenIdle(task, timeout) {
+  if (typeof requestIdleCallback === "function") {
+    const id2 = requestIdleCallback(task, { timeout });
+    return () => cancelIdleCallback(id2);
+  }
+  const id = setTimeout(
+    () => {
+      const end = performance.now() + FALLBACK_SLICE_MS;
+      task({ didTimeout: false, timeRemaining: () => Math.max(0, end - performance.now()) });
+    },
+    Math.min(timeout, 200)
+  );
+  return () => clearTimeout(id);
+}
+
+// src/runtime/session.ts
+var EXPIRY_MARGIN_MS = 6e4;
+var UNKNOWN_EXPIRY_MS = 5 * 6e4;
+function readJwt(token) {
+  try {
+    const part = token.split(".")[1];
+    if (!part) return null;
+    const pad = part.length % 4 === 0 ? "" : "=".repeat(4 - part.length % 4);
+    return JSON.parse(atob(part.replaceAll("-", "+").replaceAll("_", "/") + pad));
+  } catch {
+    return null;
+  }
+}
+function sessionFrom(payload) {
+  const value = payload;
+  if (!value?.enabled || !value.apiUrl || !value.project || !value.environment || !value.hostToken)
+    return null;
+  return {
+    apiUrl: value.apiUrl,
+    project: value.project,
+    environment: value.environment,
+    hostToken: value.hostToken
+  };
+}
+async function fetchSession(path) {
+  const response = await fetch(path, {
+    headers: { accept: "application/json", "x-comment-service-origin": window.location.origin },
+    cache: "no-store"
+  });
+  return response.json();
+}
+function sessionSource(path, load = fetchSession, now = Date.now) {
+  let kept = null;
+  let pending = null;
+  return ({ refresh = false } = {}) => {
+    if (!refresh && kept && now() < kept.until) return Promise.resolve(kept.session);
+    if (pending) return pending;
+    pending = load(path).then((payload) => {
+      const session = sessionFrom(payload);
+      const expires = session ? readJwt(session.hostToken)?.exp : void 0;
+      const until = !session ? Infinity : expires ? expires * 1e3 - EXPIRY_MARGIN_MS : now() + UNKNOWN_EXPIRY_MS;
+      kept = { session, until };
+      return session;
+    }).finally(() => {
+      pending = null;
+    });
+    return pending;
+  };
+}
+var sources = /* @__PURE__ */ new Map();
+function sessionFor(path) {
+  let source = sources.get(path);
+  if (!source) {
+    source = sessionSource(path);
+    sources.set(path, source);
+  }
+  return source;
+}
+
+export {
+  readHandoff,
+  captureHandoff,
+  dropHandoff,
+  stripHandoffFromUrl,
+  linkWith,
+  whenIdle,
+  runtimeVersion,
+  readJwt,
+  sessionFor
+};

package/dist/chunks/chunk-HUM5FQII.js

@@ -0,0 +1,160 @@
+// src/runtime/screenshot.ts
+var MAX_WIDTH = 1200;
+var BROWSERS = [
+  ["Edge", /Edg\/(\d+)/],
+  ["Firefox", /Firefox\/(\d+)/],
+  ["Chrome", /Chrome\/(\d+)/],
+  ["Safari", /Version\/(\d+)[\d.]* .*Safari/]
+];
+var SYSTEMS = [
+  ["iOS", /iPhone|iPad/],
+  ["Android", /Android/],
+  ["macOS", /Mac OS X/],
+  ["Windows", /Windows/],
+  ["Linux", /Linux/]
+];
+function browserLabel(agent) {
+  let browser;
+  for (const [name, pattern] of BROWSERS) {
+    const version = agent.match(pattern)?.[1];
+    if (version) {
+      browser = `${name} ${version}`;
+      break;
+    }
+  }
+  const system = SYSTEMS.find(([, pattern]) => pattern.test(agent))?.[0];
+  return [browser, system].filter(Boolean).join(" \xB7 ") || void 0;
+}
+function describeCapture(url) {
+  return {
+    url,
+    viewport: { width: document.documentElement.clientWidth, height: window.innerHeight },
+    browser: browserLabel(navigator.userAgent)
+  };
+}
+function roundedRect(ctx, x, y, w, h, r) {
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
+async function renderViewport(scale, timeout = 6e3) {
+  const { domToCanvas } = await import("./render-page-76MLIT6M.js");
+  return domToCanvas(document.documentElement, {
+    width: document.documentElement.clientWidth,
+    height: window.innerHeight,
+    scale,
+    timeout,
+    backgroundColor: getComputedStyle(document.body).backgroundColor || "#ffffff",
+    filter: (node) => !(node instanceof Element && node.id === "cs-root"),
+    style: {
+      transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)`,
+      transformOrigin: "0 0"
+    }
+  });
+}
+function outline(ctx, width, height, ring, scale) {
+  const radius = Math.min(12 * scale, ring.w / 2, ring.h / 2);
+  ctx.beginPath();
+  ctx.rect(0, 0, width, height);
+  roundedRect(ctx, ring.x, ring.y, ring.w, ring.h, radius);
+  ctx.fillStyle = "rgba(15, 15, 20, 0.22)";
+  ctx.fill("evenodd");
+  ctx.beginPath();
+  roundedRect(ctx, ring.x, ring.y, ring.w, ring.h, radius);
+  ctx.lineWidth = 3 * scale;
+  ctx.strokeStyle = "#007aff";
+  ctx.stroke();
+}
+async function capturePage(highlight) {
+  const scale = Math.min(window.devicePixelRatio || 1, 2);
+  let page;
+  try {
+    page = await renderViewport(scale);
+  } catch {
+    return null;
+  }
+  const width = document.documentElement.clientWidth;
+  const outScale = Math.min(scale, 1600 / width);
+  const out = document.createElement("canvas");
+  out.width = Math.round(width * outScale);
+  out.height = Math.round(window.innerHeight * outScale);
+  const ctx = out.getContext("2d");
+  if (!ctx) return null;
+  ctx.drawImage(page, 0, 0, out.width, out.height);
+  const rect = highlight?.getBoundingClientRect();
+  if (rect && rect.width > 0 && rect.bottom > 0 && rect.top < window.innerHeight) {
+    const pad = 6;
+    outline(
+      ctx,
+      out.width,
+      out.height,
+      {
+        x: (rect.left - pad) * outScale,
+        y: (rect.top - pad) * outScale,
+        w: (rect.width + pad * 2) * outScale,
+        h: (rect.height + pad * 2) * outScale
+      },
+      outScale
+    );
+  }
+  return new Promise((resolve) => out.toBlob((blob) => resolve(blob), "image/jpeg", 0.85));
+}
+async function captureAround(element) {
+  const rect = element.getBoundingClientRect();
+  const viewportWidth = document.documentElement.clientWidth;
+  const viewportHeight = window.innerHeight;
+  if (rect.width < 1 || rect.bottom <= 0 || rect.top >= viewportHeight || rect.right <= 0 || rect.left >= viewportWidth)
+    return null;
+  const scale = Math.min(window.devicePixelRatio || 1, 2);
+  let page;
+  try {
+    page = await renderViewport(scale);
+  } catch {
+    return null;
+  }
+  const width = Math.min(viewportWidth, Math.max(rect.width + 200, 760));
+  const height = Math.min(viewportHeight, Math.max(rect.height + 200, 420));
+  const x = Math.max(0, Math.min(rect.left + rect.width / 2 - width / 2, viewportWidth - width));
+  const y = Math.max(0, Math.min(rect.top + rect.height / 2 - height / 2, viewportHeight - height));
+  const out = document.createElement("canvas");
+  const outScale = Math.min(scale, MAX_WIDTH / width);
+  out.width = Math.round(width * outScale);
+  out.height = Math.round(height * outScale);
+  const ctx = out.getContext("2d");
+  if (!ctx) return null;
+  ctx.drawImage(
+    page,
+    x * scale,
+    y * scale,
+    width * scale,
+    height * scale,
+    0,
+    0,
+    out.width,
+    out.height
+  );
+  const pad = 6;
+  outline(
+    ctx,
+    out.width,
+    out.height,
+    {
+      x: (rect.left - x - pad) * outScale,
+      y: (rect.top - y - pad) * outScale,
+      w: (rect.width + pad * 2) * outScale,
+      h: (rect.height + pad * 2) * outScale
+    },
+    outScale
+  );
+  return out.toDataURL("image/jpeg", 0.82);
+}
+
+export {
+  describeCapture,
+  renderViewport,
+  capturePage,
+  captureAround
+};