@devaccel-labs/comment-service 0.5.1

package/dist/server.d.ts

@@ -0,0 +1,2 @@
+export { handleSessionRequest, readCommentServiceConfig } from "./types/server/index.js"
+export type { CommentServiceConfig } from "./types/server/index.js"

package/dist/server.js

@@ -0,0 +1,62 @@
+// ../server/dist/index.js
+function readCommentServiceConfig(env = process.env) {
+  const url = env.COMMENT_SERVICE_URL?.replace(/\/$/, "");
+  const project = env.COMMENT_SERVICE_PROJECT;
+  const environment = env.COMMENT_SERVICE_ENVIRONMENT;
+  const secret = env.COMMENT_SERVICE_SECRET;
+  if (!url || !project || !environment || !secret)
+    return null;
+  return { url, project, environment, secret };
+}
+function requestOrigin(request) {
+  const url = new URL(request.url);
+  const host = request.headers.get("x-forwarded-host") ?? request.headers.get("host");
+  if (!host || host.includes("/"))
+    return url.origin;
+  const proto = (request.headers.get("x-forwarded-proto") ?? url.protocol.replace(":", "")).split(",")[0].trim();
+  return `${proto}://${host}`;
+}
+async function handleSessionRequest(request, config = readCommentServiceConfig()) {
+  const headers = { "cache-control": "no-store" };
+  if (!config)
+    return Response.json({ enabled: false }, { headers });
+  const origin = requestOrigin(request);
+  let response;
+  try {
+    response = await fetch(`${config.url}/v1/host/session`, {
+      method: "POST",
+      headers: {
+        authorization: `Bearer ${config.secret}`,
+        "content-type": "application/json"
+      },
+      body: JSON.stringify({
+        project: config.project,
+        environment: config.environment,
+        origin
+      })
+    });
+  } catch {
+    return Response.json({ enabled: false, error: "Comment service is unreachable." }, { status: 502, headers });
+  }
+  if (!response.ok) {
+    const payload2 = await response.json().catch(() => null);
+    return Response.json({
+      enabled: false,
+      error: payload2?.error?.message ?? "Comment service rejected this environment.",
+      origin,
+      status: response.status
+    }, { status: 502, headers });
+  }
+  const payload = await response.json();
+  return Response.json({
+    enabled: true,
+    apiUrl: config.url,
+    project: config.project,
+    environment: config.environment,
+    hostToken: payload.token
+  }, { headers });
+}
+export {
+  handleSessionRequest,
+  readCommentServiceConfig
+};

package/dist/types/compiler/annotate.d.ts

@@ -0,0 +1,7 @@
+export declare function toProjectPath(filename: string, root: string): string;
+/**
+ * Stamp the root DOM node of each component with a stable file + component name.
+ * Line numbers are intentionally not included: moving the component in the file
+ * or on the page must not change the stamp.
+ */
+export declare function annotateSource(code: string, filename: string, root: string): string;

package/dist/types/compiler/index.d.ts

@@ -0,0 +1 @@
+export { annotateSource, toProjectPath } from "./annotate.js";

package/dist/types/core/index.d.ts

@@ -0,0 +1,2 @@
+export { describeAnchor, dropAncestors, resolveAnchor, validateAnchor } from "./resolve.js";
+export type { Anchor, Candidate, Resolution, ResolutionStatus } from "./types.js";

package/dist/types/core/resolve.d.ts

@@ -0,0 +1,19 @@
+import type { Anchor, Candidate, Resolution } from "./types.js";
+/** Drop elements that contain another match, so a wrapping div doesn't steal the button. */
+export declare function dropAncestors(candidates: Candidate[]): Candidate[];
+/**
+ * Resolve a stored anchor against the elements currently on the route.
+ *
+ * Order is deliberate:
+ * 1. An explicit id (`data-cs-anchor`, `data-testid`, stable `id`) wins.
+ * 2. Otherwise the match is component file + component name + role + label.
+ * 3. Sibling index and pixel position are ignored, so inserting, reordering,
+ *    or moving the element (including out of a sheet) does not retarget the comment.
+ * 4. A tie is ambiguous. We do not fall back to "the first one" or the old index.
+ * 5. A unique component whose label changed is "drifted": still shown, marked uncertain.
+ * 6. A match that exists but is inside a closed dialog is "hidden", not deleted.
+ * 7. No match is "unavailable". The thread stays in the inbox.
+ */
+export declare function resolveAnchor(anchor: Anchor, candidates: Candidate[]): Resolution;
+export declare function describeAnchor(anchor: Anchor): string;
+export declare function validateAnchor(input: unknown): Anchor | null;

package/dist/types/core/types.d.ts

@@ -0,0 +1,65 @@
+/** Stable identity for a commented element. Pixel and DOM-index position are not part of the match. */
+export type Anchor = {
+    v: 1;
+    /** Pathname only, no query or hash. */
+    route: string;
+    /**
+     * Dialog or sheet the element lived in when the comment was written.
+     * Used to explain a hidden thread. Not required to match after the element moves out of the overlay.
+     */
+    overlay: {
+        role: string;
+        name: string;
+    } | null;
+    /** Opt-in stable ids: data-cs-anchor, data-testid, or a human id. Highest priority. */
+    explicit: Array<{
+        attr: string;
+        value: string;
+    }>;
+    /** React component that owns the element. File path is relative and has no line number. */
+    component: {
+        name: string;
+        file: string | null;
+    } | null;
+    /** Component names from the tree, outer to inner. Diagnostic. */
+    stack: string[];
+    role: string | null;
+    accName: string | null;
+    text: string | null;
+    tag: string;
+    /** Sibling path inside the component. Stored for agents, never used to choose a match. */
+    intra: string | null;
+};
+export type Candidate = {
+    key: string;
+    route: string;
+    visible: boolean;
+    /** Index path from the document body. Used only to tell ancestors from descendants. */
+    path: string;
+    componentRoot: boolean;
+    overlay: {
+        role: string;
+        name: string;
+    } | null;
+    explicit: Array<{
+        attr: string;
+        value: string;
+    }>;
+    component: {
+        name: string;
+        file: string | null;
+    } | null;
+    stack: string[];
+    role: string | null;
+    accName: string | null;
+    text: string | null;
+    tag: string;
+    intra: string | null;
+};
+export type ResolutionStatus = "pinned" | "drifted" | "hidden" | "ambiguous" | "unavailable";
+export type Resolution = {
+    status: ResolutionStatus;
+    key: string | null;
+    score: number;
+    reason: string;
+};

package/dist/types/react/attachments.d.ts

@@ -0,0 +1,44 @@
+import { type ClipboardEvent } from "react";
+import { type Attachment, type Session } from "./client.js";
+export type Pending = {
+    key: string;
+    name: string;
+    size: number;
+    contentType: string;
+    preview: string | null;
+    status: "uploading" | "ready" | "failed";
+    id?: string;
+    error?: string;
+};
+export declare function formatSize(bytes: number): string;
+/** Files attached to one draft. Each upload starts immediately so posting doesn't wait on the network. */
+export declare function useAttachments(session: Session | null, memberToken: string | null, onError: (message: string) => void): {
+    items: Pending[];
+    add: (files: Array<{
+        blob: Blob;
+        name: string;
+    }>) => void;
+    remove: (key: string) => void;
+    reset: () => void;
+    ids: string[];
+    uploading: boolean;
+};
+export declare function filesFromClipboard(event: ClipboardEvent): {
+    blob: Blob;
+    name: string;
+}[];
+export declare function AttachmentTray({ items, onRemove }: {
+    items: Pending[];
+    onRemove: (key: string) => void;
+}): import("react").JSX.Element | null;
+export declare function AttachButtons({ onFiles, onSnapshot, capturing, }: {
+    onFiles: (files: Array<{
+        blob: Blob;
+        name: string;
+    }>) => void;
+    onSnapshot: () => void;
+    capturing: boolean;
+}): import("react").JSX.Element;
+export declare function MessageAttachments({ attachments }: {
+    attachments?: Attachment[];
+}): import("react").JSX.Element | null;

package/dist/types/react/capture.d.ts

@@ -0,0 +1,13 @@
+import type { Anchor, Candidate } from "../core/index.js";
+export declare function candidateFromElement(element: Element, route: string, key: string): Candidate;
+export declare function captureAnchor(element: Element, route?: string): Anchor;
+export declare function collectCandidates(route?: string): {
+    element: Element;
+    candidate: Candidate;
+}[];
+export declare function resolveInDocument(anchor: Anchor, route?: string): {
+    resolution: import("../core/index.js").Resolution;
+    element: Element | null;
+};
+export declare function elementAt(x: number, y: number): Element | null;
+export declare function describeElement(element: Element): string;

package/dist/types/react/client.d.ts

@@ -0,0 +1,114 @@
+import type { Anchor } from "../core/index.js";
+export type SessionPayload = {
+    enabled: boolean;
+    apiUrl?: string;
+    project?: string;
+    environment?: string;
+    hostToken?: string;
+    error?: string;
+};
+export type Mentioned = {
+    id: string;
+    name: string;
+};
+export type Attachment = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    url: string;
+};
+export type CommentMessage = {
+    id: string;
+    body: string;
+    author: string;
+    createdAt: string;
+    mentions?: Mentioned[];
+    attachments?: Attachment[];
+};
+export type Member = {
+    id: string;
+    name: string;
+    email: string;
+};
+export type Delivery = {
+    emailed: Mentioned[];
+    skipped: Array<Mentioned & {
+        reason: "rate_limited" | "muted" | "disabled" | string;
+    }>;
+};
+export type Profile = {
+    name: string;
+    email: string | null;
+    mentionEmails: boolean;
+};
+export type PostExtras = {
+    mentions?: string[];
+    screenshot?: string | null;
+    attachments?: string[];
+};
+export type Thread = {
+    id: string;
+    route: string;
+    anchor: Anchor;
+    status: "open" | "resolved";
+    createdBy: string;
+    createdAt: string;
+    updatedAt: string;
+    messages: CommentMessage[];
+};
+export type Session = {
+    apiUrl: string;
+    project: string;
+    environment: string;
+    hostToken: string;
+};
+export declare class ApiError extends Error {
+    readonly status: number;
+    readonly code: string;
+    constructor(status: number, code: string, message: string);
+}
+export declare function storageKey(session: Pick<Session, "apiUrl" | "project" | "environment">): string;
+export declare function readJwt(token: string): {
+    exp?: number;
+    typ?: string;
+    name?: string;
+    email?: string;
+} | null;
+export declare function memberIsCurrent(token: string): boolean;
+/** Sign in with the team passphrase, or with an invite link token instead. */
+export declare function unlock(session: Session, displayName: string, email: string, secret: {
+    passphrase: string;
+} | {
+    invite: string;
+}): Promise<string>;
+export declare function createInvite(session: Session, memberToken: string): Promise<{
+    invite: string;
+    invitedBy: string;
+    expiresAt: string;
+}>;
+export declare function getProfile(session: Session, memberToken: string): Promise<Profile>;
+export declare function updateProfile(session: Session, memberToken: string, patch: {
+    displayName?: string;
+    email?: string;
+    mentionEmails?: boolean;
+}): Promise<Profile & {
+    token: string;
+}>;
+export declare function uploadAttachment(session: Session, memberToken: string, file: Blob, name: string): Promise<Attachment>;
+export declare function listMembers(session: Session, memberToken: string): Promise<Member[]>;
+export declare function listThreads(session: Session, memberToken: string): Promise<Thread[]>;
+export declare function createThread(session: Session, memberToken: string, anchor: Anchor, body: string, extras?: PostExtras): Promise<{
+    thread: Thread;
+    delivery?: Delivery;
+}>;
+export declare function replyToThread(session: Session, memberToken: string, threadId: string, body: string, extras?: PostExtras): Promise<{
+    message: CommentMessage;
+    delivery?: Delivery;
+}>;
+export declare function updateThread(session: Session, memberToken: string, threadId: string, patch: {
+    status?: "open" | "resolved";
+    anchor?: Anchor;
+}): Promise<{
+    id: string;
+}>;

package/dist/types/react/format.d.ts

@@ -0,0 +1,14 @@
+import type { Anchor } from "../core/index.js";
+import type { Delivery } from "./client.js";
+export declare function initials(name: string): string;
+export declare function colorFor(name: string): string;
+export declare function ago(iso: string): string;
+export declare function targetName(anchor: Anchor): string;
+export type PlacedStatus = "pinned" | "drifted" | "hidden" | "ambiguous" | "unavailable" | "resolved";
+/** Plain-language reason a thread isn't pinned, or null when there's nothing to explain. */
+export declare function statusNote(status: PlacedStatus, anchor: Anchor, onThisRoute: boolean): {
+    text: string;
+    tone: string;
+} | null;
+/** One quiet line about who was emailed for a message, or null when nobody was mentioned. */
+export declare function deliveryText(delivery: Delivery | undefined): string | null;

package/dist/types/react/icons.d.ts

@@ -0,0 +1,18 @@
+export declare const AddComment: () => import("react").JSX.Element;
+export declare const Inbox: () => import("react").JSX.Element;
+export declare const Eye: () => import("react").JSX.Element;
+export declare const EyeOff: () => import("react").JSX.Element;
+export declare const Lock: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const Close: () => import("react").JSX.Element;
+export declare const Send: () => import("react").JSX.Element;
+export declare const Check: () => import("react").JSX.Element;
+export declare const Target: () => import("react").JSX.Element;
+export declare const Relink: () => import("react").JSX.Element;
+export declare const Undo: () => import("react").JSX.Element;
+export declare const Pencil: () => import("react").JSX.Element;
+export declare const Cursor: () => import("react").JSX.Element;
+export declare const Paperclip: () => import("react").JSX.Element;
+export declare const Camera: () => import("react").JSX.Element;
+export declare const FileIcon: () => import("react").JSX.Element;

package/dist/types/react/index.d.ts

@@ -0,0 +1,2 @@
+export { captureAnchor, resolveInDocument } from "./capture.js";
+export { CommentToolbar, type ToolbarPosition, type ToolbarTheme } from "./toolbar.js";

package/dist/types/react/mentions.d.ts

@@ -0,0 +1,17 @@
+import { type TextareaHTMLAttributes } from "react";
+import type { Member, Mentioned } from "./client.js";
+type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+    value: string;
+    onValueChange: (next: string) => void;
+    members: Member[];
+    selfEmail?: string;
+    onMention: (member: Member) => void;
+};
+/** Members picked while writing whose `@Name` is still in the text. */
+export declare function mentionsIn(text: string, picked: Map<string, Member>): Member[];
+export declare function MessageText({ body, mentions }: {
+    body: string;
+    mentions?: Mentioned[];
+}): import("react").JSX.Element;
+export declare function MentionTextarea({ value, onValueChange, members, selfEmail, onMention, onKeyDown, ...rest }: Props): import("react").JSX.Element;
+export {};

package/dist/types/react/screenshot.d.ts

@@ -0,0 +1,7 @@
+/** The whole visible page as a JPEG, toolbar left out. If `highlight` is on screen it's outlined. */
+export declare function capturePage(highlight?: Element | null): Promise<Blob | null>;
+/**
+ * Capture what the person sees around `element`, with the toolbar left out, the rest dimmed,
+ * and the element outlined. Returns a JPEG data URL, or null if the element isn't on screen or capture fails.
+ */
+export declare function captureAround(element: Element): Promise<string | null>;

package/dist/types/react/styles.d.ts

@@ -0,0 +1 @@
+export declare const toolbarCss = "\n#cs-root {\n  --cs-text: #1d1d1f;\n  --cs-text-2: #6e6e73;\n  --cs-text-3: #a1a1a6;\n  --cs-glass: rgba(251, 251, 253, 0.8);\n  --cs-card: rgba(255, 255, 255, 0.94);\n  --cs-fill: rgba(0, 0, 0, 0.05);\n  --cs-fill-2: rgba(0, 0, 0, 0.08);\n  --cs-line: rgba(0, 0, 0, 0.08);\n  --cs-edge: rgba(0, 0, 0, 0.1);\n  --cs-accent: #007aff;\n  --cs-accent-soft: rgba(0, 122, 255, 0.12);\n  --cs-danger: #ff3b30;\n  --cs-warn: #ff9500;\n  --cs-shadow: 0 0 0 0.5px var(--cs-edge), 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  pointer-events: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--cs-text);\n  font: 13px/1.4 -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Inter, system-ui, sans-serif;\n  letter-spacing: -0.005em;\n  -webkit-font-smoothing: antialiased;\n  text-align: left;\n}\n#cs-root.cs-dark {\n  --cs-text: #f5f5f7;\n  --cs-text-2: #a1a1a6;\n  --cs-text-3: #6e6e73;\n  --cs-glass: rgba(40, 40, 44, 0.78);\n  --cs-card: rgba(36, 36, 40, 0.96);\n  --cs-fill: rgba(255, 255, 255, 0.07);\n  --cs-fill-2: rgba(255, 255, 255, 0.12);\n  --cs-line: rgba(255, 255, 255, 0.08);\n  --cs-edge: rgba(255, 255, 255, 0.12);\n  --cs-accent: #0a84ff;\n  --cs-accent-soft: rgba(10, 132, 255, 0.2);\n  --cs-shadow: 0 0 0 0.5px var(--cs-edge), 0 10px 30px rgba(0, 0, 0, 0.45);\n}\n#cs-root.cs-inside { position: absolute; }\n#cs-root, #cs-root * { box-sizing: border-box; }\n#cs-root h2, #cs-root p { margin: 0; }\n#cs-root button, #cs-root input, #cs-root textarea {\n  font: inherit; color: inherit; letter-spacing: inherit; margin: 0;\n}\n#cs-root button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }\n#cs-root button:disabled { cursor: default; opacity: 0.45; }\n#cs-root button:focus-visible, #cs-root [role=button]:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }\n#cs-root .cs-hit { pointer-events: auto; }\n#cs-root .cs-icon { display: block; flex: none; }\n\n/* Bar */\n#cs-root .cs-bar {\n  position: absolute;\n  bottom: 16px;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 4px;\n  border-radius: 999px;\n  background: var(--cs-glass);\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  backdrop-filter: saturate(180%) blur(20px);\n  box-shadow: var(--cs-shadow);\n}\n#cs-root.cs-at-center .cs-bar { left: 50%; transform: translateX(-50%); }\n#cs-root.cs-at-left .cs-bar { left: 16px; }\n#cs-root.cs-at-right .cs-bar { right: 16px; }\n#cs-root .cs-tool {\n  position: relative;\n  width: 34px;\n  height: 34px;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--cs-text);\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n#cs-root .cs-tool:hover { background: var(--cs-fill); }\n#cs-root .cs-tool.is-on { background: var(--cs-fill-2); }\n#cs-root .cs-tool.is-accent { background: var(--cs-accent); color: #fff; }\n#cs-root .cs-tool[data-tip]::after {\n  content: attr(data-tip);\n  position: absolute;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  transform: translate(-50%, 2px);\n  white-space: pre;\n  padding: 4px 8px;\n  border-radius: 7px;\n  background: rgba(29, 29, 31, 0.92);\n  color: #fff;\n  font-size: 11.5px;\n  font-weight: 500;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.12s ease, transform 0.12s ease;\n}\n#cs-root .cs-tool[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.35s; }\n#cs-root .cs-me { width: 34px; }\n#cs-root .cs-divider { width: 1px; height: 18px; background: var(--cs-line); margin: 0 3px; }\n#cs-root .cs-badge {\n  position: absolute;\n  top: 3px;\n  right: 2px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 999px;\n  background: var(--cs-accent);\n  color: #fff;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  box-shadow: 0 0 0 2px var(--cs-glass);\n}\n#cs-root .cs-bar-lock {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  height: 34px;\n  padding: 0 14px 0 12px;\n  border-radius: 999px;\n  font-weight: 500;\n}\n#cs-root .cs-bar-lock:hover { background: var(--cs-fill); }\n#cs-root .cs-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  border-radius: 999px;\n  color: #fff;\n  font-weight: 600;\n  letter-spacing: 0;\n  line-height: 1;\n  user-select: none;\n}\n\n/* Cards */\n#cs-root .cs-card {\n  position: absolute;\n  background: var(--cs-card);\n  -webkit-backdrop-filter: saturate(180%) blur(24px);\n  backdrop-filter: saturate(180%) blur(24px);\n  border-radius: 14px;\n  box-shadow: var(--cs-shadow);\n}\n#cs-root .cs-unlock, #cs-root .cs-menu { bottom: 64px; }\n#cs-root.cs-at-center .cs-unlock, #cs-root.cs-at-center .cs-menu { left: 50%; transform: translateX(-50%); }\n#cs-root.cs-at-left .cs-unlock, #cs-root.cs-at-left .cs-menu { left: 16px; }\n#cs-root.cs-at-right .cs-unlock, #cs-root.cs-at-right .cs-menu { right: 16px; }\n#cs-root .cs-unlock { width: 280px; padding: 20px; text-align: center; }\n#cs-root .cs-unlock-icon {\n  width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 12px;\n  display: flex; align-items: center; justify-content: center; background: var(--cs-fill); color: var(--cs-text-2);\n}\n#cs-root .cs-unlock h2 { font-size: 15px; font-weight: 600; }\n#cs-root .cs-sub { color: var(--cs-text-2); margin-top: 4px; }\n#cs-root .cs-unlock form { margin-top: 14px; display: grid; gap: 8px; text-align: left; }\n#cs-root .cs-field { display: grid; gap: 4px; }\n#cs-root .cs-field span { font-size: 12px; color: var(--cs-text-2); padding-left: 2px; }\n#cs-root input, #cs-root textarea {\n  width: 100%;\n  border: 0;\n  border-radius: 9px;\n  background: var(--cs-fill);\n  padding: 8px 10px;\n  outline: none;\n  transition: box-shadow 0.15s ease, background-color 0.15s ease;\n}\n#cs-root input:focus, #cs-root textarea:focus { background: transparent; box-shadow: 0 0 0 1px var(--cs-accent), 0 0 0 4px var(--cs-accent-soft); }\n#cs-root textarea { resize: none; }\n#cs-root .cs-error { color: var(--cs-danger); font-size: 12px; }\n#cs-root .cs-pad { padding: 6px 14px 0; }\n#cs-root .cs-hint { color: var(--cs-text-3); font-size: 11.5px; }\n\n/* Buttons */\n#cs-root .cs-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  height: 28px;\n  padding: 0 11px;\n  border-radius: 8px;\n  background: var(--cs-fill);\n  font-size: 12.5px;\n  font-weight: 500;\n  transition: background-color 0.15s ease;\n}\n#cs-root .cs-button:hover { background: var(--cs-fill-2); }\n#cs-root .cs-button.is-primary { background: var(--cs-accent); color: #fff; }\n#cs-root .cs-button.is-primary:hover { filter: brightness(1.06); }\n#cs-root .cs-button.is-danger { background: var(--cs-danger); color: #fff; }\n#cs-root .cs-button.is-wide { width: 100%; height: 32px; margin-top: 4px; }\n#cs-root .cs-icon-button {\n  width: 26px; height: 26px; border-radius: 999px; flex: none;\n  display: inline-flex; align-items: center; justify-content: center; color: var(--cs-text-2);\n}\n#cs-root .cs-icon-button:hover { background: var(--cs-fill); color: var(--cs-text); }\n#cs-root .cs-send {\n  width: 26px; height: 26px; border-radius: 999px; flex: none;\n  display: inline-flex; align-items: center; justify-content: center; background: var(--cs-accent); color: #fff;\n}\n#cs-root .cs-send:disabled { background: var(--cs-fill-2); color: var(--cs-text-3); opacity: 1; }\n\n/* Menu */\n#cs-root .cs-menu { width: 264px; padding: 6px; }\n#cs-root .cs-me-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }\n#cs-root .cs-me-name { display: flex; align-items: center; gap: 4px; min-width: 0; }\n#cs-root .cs-me-name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n#cs-root .cs-rename { display: flex; align-items: center; gap: 4px; flex: 1; }\n#cs-root .cs-rename input { padding: 5px 8px; }\n#cs-root .cs-sep { height: 1px; background: var(--cs-line); margin: 4px 8px; }\n#cs-root .cs-item {\n  display: flex; align-items: center; justify-content: space-between; gap: 10px;\n  width: 100%; min-height: 32px; padding: 0 8px; border-radius: 8px; text-align: left;\n}\n#cs-root button.cs-item:hover { background: var(--cs-fill); }\n#cs-root .cs-item.is-danger { color: var(--cs-danger); }\n#cs-root .cs-switch { position: relative; width: 32px; height: 20px; border-radius: 999px; background: var(--cs-fill-2); transition: background-color 0.2s ease; flex: none; }\n#cs-root .cs-switch::after {\n  content: \"\"; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px;\n  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease;\n}\n#cs-root .cs-switch.is-on { background: #34c759; }\n#cs-root .cs-switch.is-on::after { transform: translateX(12px); }\n#cs-root .cs-segment { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--cs-fill); }\n#cs-root .cs-segment button { padding: 2px 8px; border-radius: 6px; font-size: 12px; color: var(--cs-text-2); }\n#cs-root .cs-segment button.is-on { background: var(--cs-card); color: var(--cs-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); font-weight: 500; }\n#cs-root .cs-menu .cs-hint { padding: 6px 8px 4px; }\n#cs-root .cs-invite { padding: 2px 8px 6px; }\n#cs-root .cs-invite input { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 6px 8px; }\n#cs-root .cs-invite .cs-hint { padding: 4px 0 0; }\n#cs-root .cs-confirm { padding: 10px; }\n#cs-root .cs-confirm h2 { font-size: 14px; font-weight: 600; }\n#cs-root .cs-row-end { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }\n\n/* Sheet */\n#cs-root .cs-sheet {\n  top: 12px; right: 12px; max-height: calc(100% - 88px); width: min(360px, calc(100vw - 24px));\n  display: flex; flex-direction: column; overflow: hidden;\n}\n#cs-root .cs-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 4px 16px; }\n#cs-root .cs-sheet-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }\n#cs-root .cs-tabs { display: flex; gap: 2px; margin: 4px 12px 6px; padding: 2px; border-radius: 9px; background: var(--cs-fill); }\n#cs-root .cs-tabs button {\n  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;\n  height: 26px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--cs-text-2);\n}\n#cs-root .cs-tabs button.is-on { background: var(--cs-card); color: var(--cs-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }\n#cs-root .cs-count { font-size: 11px; color: var(--cs-text-3); font-variant-numeric: tabular-nums; }\n#cs-root .cs-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px 6px 8px; overscroll-behavior: contain; }\n#cs-root .cs-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; color: var(--cs-text-3); text-transform: uppercase; letter-spacing: 0.04em; }\n#cs-root .cs-empty { padding: 36px 16px; text-align: center; color: var(--cs-text-2); display: grid; gap: 12px; justify-items: center; }\n#cs-root .cs-thread { border-radius: 10px; }\n#cs-root .cs-thread + .cs-thread { margin-top: 1px; }\n#cs-root .cs-thread.is-open { background: var(--cs-fill); }\n#cs-root .cs-thread-main { display: flex; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; }\n#cs-root .cs-thread:not(.is-open) .cs-thread-main:hover { background: var(--cs-fill); }\n#cs-root .cs-thread-body { min-width: 0; flex: 1; }\n#cs-root .cs-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }\n#cs-root .cs-meta strong { font-weight: 600; }\n#cs-root .cs-meta time { color: var(--cs-text-3); font-size: 12px; }\n#cs-root .cs-text { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }\n#cs-root .cs-target { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 11.5px; color: var(--cs-text-3); }\n#cs-root .cs-note { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }\n#cs-root .cs-note::before { content: \"\"; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }\n#cs-root .cs-note.is-quiet { color: var(--cs-text-2); }\n#cs-root .cs-note.is-warn { color: var(--cs-warn); }\n#cs-root .cs-note.is-bad { color: var(--cs-danger); }\n#cs-root .cs-replies { margin-top: 4px; font-size: 12px; color: var(--cs-accent); font-weight: 500; }\n#cs-root .cs-thread-more { padding: 0 10px 10px 44px; display: grid; gap: 10px; }\n#cs-root .cs-message { display: flex; gap: 8px; }\n#cs-root .cs-reply { display: flex; align-items: flex-end; gap: 6px; padding: 4px 4px 4px 0; border-radius: 10px; }\n#cs-root .cs-reply textarea { min-height: 32px; max-height: 120px; field-sizing: content; }\n#cs-root .cs-thread.is-open .cs-reply textarea { background: var(--cs-card); }\n#cs-root .cs-actions { display: flex; flex-wrap: wrap; gap: 6px; }\n#cs-root .cs-thread.is-open .cs-button { background: var(--cs-card); box-shadow: 0 0 0 0.5px var(--cs-edge); }\n#cs-root .cs-thread.is-open .cs-button:hover { background: var(--cs-fill-2); }\n\n/* Mentions */\n#cs-root .cs-mention { color: var(--cs-accent); background: var(--cs-accent-soft); border-radius: 4px; padding: 0 3px; font-weight: 500; }\n#cs-root .cs-delivery { margin-top: 4px; font-size: 11.5px; color: var(--cs-text-3); display: flex; align-items: center; gap: 5px; }\n#cs-root .cs-delivery::before { content: \"\"; width: 6px; height: 6px; border-radius: 999px; background: #34c759; }\n#cs-root .cs-people {\n  position: fixed; z-index: 1; width: 264px; padding: 5px; border-radius: 12px;\n  background: var(--cs-card); box-shadow: var(--cs-shadow); pointer-events: auto;\n}\n#cs-root .cs-person { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }\n#cs-root .cs-person.is-on { background: var(--cs-accent); color: #fff; }\n#cs-root .cs-person-text { display: grid; line-height: 1.25; min-width: 0; }\n#cs-root .cs-person-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n#cs-root .cs-person-text small { font-size: 11.5px; color: var(--cs-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n#cs-root .cs-person.is-on small { color: rgba(255, 255, 255, 0.8); }\n#cs-root .cs-field small { font-size: 11.5px; color: var(--cs-text-3); padding-left: 2px; }\n#cs-root .cs-me-lines { display: grid; line-height: 1.25; min-width: 0; }\n#cs-root .cs-me-lines small { font-size: 11.5px; color: var(--cs-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n/* Composer */\n#cs-root .cs-composer { width: min(320px, calc(100% - 16px)); }\n#cs-root .cs-composer-target {\n  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px;\n  border-bottom: 1px solid var(--cs-line); font-size: 12px; color: var(--cs-text-2);\n}\n#cs-root .cs-composer-name { font-weight: 500; color: var(--cs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n#cs-root .cs-composer-target code {\n  margin-left: auto; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cs-text-3);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; min-width: 0; max-width: 45%;\n}\n#cs-root .cs-composer-body { display: flex; gap: 10px; padding: 12px 12px 4px; }\n#cs-root .cs-composer-body textarea { background: transparent; padding: 3px 0; min-height: 56px; box-shadow: none; border-radius: 0; }\n#cs-root .cs-composer-foot { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px 40px; }\n#cs-root .cs-composer-foot .cs-hint { margin-left: auto; }\n\n/* Attachments */\n#cs-root .cs-attach { display: inline-flex; gap: 0; flex: none; }\n#cs-root .cs-tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 2px 46px; }\n#cs-root .cs-thread-more .cs-tray { padding: 0; }\n#cs-root .cs-pending {\n  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 170px; height: 34px;\n  padding: 0 24px 0 4px; border-radius: 8px; background: var(--cs-fill); font-size: 11.5px; color: var(--cs-text-2);\n}\n#cs-root .cs-pending img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; flex: none; }\n#cs-root .cs-pending .cs-icon { margin-left: 4px; }\n#cs-root .cs-pending-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n#cs-root .cs-pending.is-uploading { opacity: 0.6; }\n#cs-root .cs-pending.is-failed { box-shadow: inset 0 0 0 1px var(--cs-danger); }\n#cs-root .cs-pending-remove {\n  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 999px;\n  display: inline-flex; align-items: center; justify-content: center; color: var(--cs-text-3);\n}\n#cs-root .cs-pending-remove:hover { background: var(--cs-fill-2); color: var(--cs-text); }\n#cs-root .cs-pending-remove .cs-icon { width: 11px; height: 11px; margin: 0; }\n#cs-root .cs-files { display: grid; gap: 6px; margin-top: 6px; }\n#cs-root .cs-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }\n#cs-root .cs-thumb { display: block; width: 112px; height: 72px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 0.5px var(--cs-edge); background: var(--cs-fill); }\n#cs-root .cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }\n#cs-root .cs-file {\n  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 8px;\n  background: var(--cs-fill); color: var(--cs-text); text-decoration: none; font-size: 12px; justify-self: start;\n}\n#cs-root .cs-file:hover { background: var(--cs-fill-2); }\n#cs-root .cs-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n#cs-root .cs-file-size { color: var(--cs-text-3); flex: none; }\n\n/* Page overlays */\n#cs-root .cs-pin {\n  position: absolute;\n  transform: translate(-50%, -50%);\n  padding: 2px;\n  border-radius: 999px;\n  background: var(--cs-card);\n  box-shadow: 0 0 0 0.5px var(--cs-edge), 0 3px 10px rgba(0, 0, 0, 0.18);\n  pointer-events: auto;\n  transition: transform 0.15s ease;\n}\n#cs-root .cs-pin:hover { transform: translate(-50%, -50%) scale(1.08); }\n#cs-root .cs-pin.is-active { box-shadow: 0 0 0 2px var(--cs-accent), 0 3px 10px rgba(0, 0, 0, 0.18); }\n#cs-root .cs-pin.is-drifted { box-shadow: 0 0 0 1.5px var(--cs-warn), 0 3px 10px rgba(0, 0, 0, 0.18); }\n#cs-root .cs-pin-count {\n  position: absolute; top: -5px; right: -6px; min-width: 15px; height: 15px; padding: 0 4px;\n  border-radius: 999px; background: var(--cs-text); color: var(--cs-card);\n  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;\n}\n#cs-root .cs-peek {\n  position: absolute; width: 240px; padding: 10px 12px; border-radius: 12px;\n  background: var(--cs-card); box-shadow: var(--cs-shadow); pointer-events: none;\n}\n#cs-root .cs-peek .cs-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }\n#cs-root .cs-outline {\n  position: absolute; border-radius: 8px; pointer-events: none;\n  box-shadow: 0 0 0 2px var(--cs-accent); background: var(--cs-accent-soft);\n}\n#cs-root .cs-outline.is-flash { animation: cs-flash 1.4s ease forwards; }\n@keyframes cs-flash { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }\n#cs-root .cs-outline-label {\n  position: absolute; max-width: 360px; padding: 3px 8px; border-radius: 6px; pointer-events: none;\n  background: var(--cs-accent); color: #fff; font-size: 11.5px; font-weight: 500;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n#cs-root .cs-banner {\n  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);\n  display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 999px;\n  background: var(--cs-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);\n  box-shadow: var(--cs-shadow); font-weight: 500; white-space: nowrap;\n}\n#cs-root .cs-banner button { padding: 3px 10px; border-radius: 999px; background: var(--cs-fill); font-size: 12px; }\n#cs-root .cs-banner button:hover { background: var(--cs-fill-2); }\n#cs-root .cs-toast {\n  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px;\n  background: rgba(29, 29, 31, 0.9); color: #fff; font-size: 12px; font-weight: 500;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); pointer-events: none; white-space: nowrap;\n}\n\n/* Docked inside an open <dialog> */\n#cs-root.cs-inside .cs-bar { bottom: 8px; }\n#cs-root.cs-inside.cs-at-left .cs-bar { left: 8px; }\n#cs-root.cs-inside.cs-at-right .cs-bar { right: 8px; }\n#cs-root.cs-inside .cs-sheet { top: 8px; right: 8px; bottom: auto; max-height: 46%; width: min(300px, calc(100% - 16px)); }\n#cs-root.cs-inside .cs-unlock, #cs-root.cs-inside .cs-menu { bottom: 52px; }\n#cs-root.cs-inside .cs-toast { top: 8px; }\n";

package/dist/types/react/toolbar.d.ts

@@ -0,0 +1,10 @@
+export type ToolbarPosition = "bottom-left" | "bottom-center" | "bottom-right";
+export type ToolbarTheme = "light" | "dark" | "system";
+export declare function CommentToolbar({ sessionPath, pollMs, position, theme, }: {
+    sessionPath?: string;
+    pollMs?: number;
+    /** Default bar position. Each person can override it from their menu. */
+    position?: ToolbarPosition;
+    /** "system" follows the OS appearance. Light by default so it matches most host pages. */
+    theme?: ToolbarTheme;
+}): import("react").ReactPortal | null;

package/dist/types/server/index.d.ts

@@ -0,0 +1,8 @@
+export type CommentServiceConfig = {
+    url: string;
+    project: string;
+    environment: string;
+    secret: string;
+};
+export declare function readCommentServiceConfig(env?: Record<string, string | undefined>): CommentServiceConfig | null;
+export declare function handleSessionRequest(request: Request, config?: CommentServiceConfig | null): Promise<Response>;

package/dist/types/start/index.d.ts

@@ -0,0 +1,3 @@
+export { commentService } from "./plugin.js";
+export { handleSessionRequest, readCommentServiceConfig } from "../server/index.js";
+export type { CommentServiceConfig } from "../server/index.js";

package/dist/types/start/plugin.d.ts

@@ -0,0 +1,11 @@
+export declare function commentService(options?: {
+    enabled?: boolean;
+    root?: string;
+}): {
+    name: string;
+    enforce: "pre";
+    transform(code: string, id: string): {
+        code: string;
+        map: null;
+    } | null;
+};

package/dist/vite.d.ts

@@ -0,0 +1 @@
+export { commentService } from "./types/start/index.js"

package/dist/vite.js

@@ -0,0 +1,128 @@
+// ../compiler/dist/annotate.js
+import generateModule from "@babel/generator";
+import { parse } from "@babel/parser";
+import traverseModule from "@babel/traverse";
+import * as t from "@babel/types";
+function generate() {
+  const mod = generateModule;
+  return mod.default ?? mod;
+}
+function traverse() {
+  const mod = traverseModule;
+  return mod.default ?? mod;
+}
+function toProjectPath(filename, root) {
+  const clean = filename.split("?")[0].replaceAll("\\", "/");
+  const rootClean = root.replaceAll("\\", "/").replace(/\/$/, "");
+  let relative = clean.startsWith(`${rootClean}/`) ? clean.slice(rootClean.length + 1) : clean;
+  if (relative.startsWith("/"))
+    relative = relative.slice(1);
+  return relative;
+}
+function componentName(path, fallback) {
+  let current = path;
+  while (current) {
+    if (current.isFunctionDeclaration() && current.node.id)
+      return current.node.id.name;
+    if (current.isClassDeclaration() && current.node.id)
+      return current.node.id.name;
+    if (current.isFunctionExpression() || current.isArrowFunctionExpression()) {
+      const parent = current.parentPath;
+      if (parent?.isVariableDeclarator() && parent.node.id.type === "Identifier")
+        return parent.node.id.name;
+      if ((parent?.isObjectProperty() || parent?.isClassProperty()) && parent.node.key.type === "Identifier") {
+        return parent.node.key.name;
+      }
+    }
+    current = current.parentPath;
+  }
+  return fallback;
+}
+function isRootJsx(path) {
+  const fn = path.getFunctionParent();
+  if (!fn)
+    return false;
+  let current = path.parentPath;
+  while (current && current !== fn) {
+    if (current.isJSXElement())
+      return false;
+    current = current.parentPath;
+  }
+  return true;
+}
+function hasAttr(path, name) {
+  return path.node.openingElement.attributes.some((attr) => attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === name);
+}
+function setAttr(path, name, value) {
+  if (hasAttr(path, name))
+    return;
+  path.node.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier(name), t.stringLiteral(value)));
+}
+function annotateSource(code, filename, root) {
+  if (!filename.match(/\.[jt]sx$/))
+    return code;
+  if (filename.includes("node_modules"))
+    return code;
+  let ast;
+  try {
+    ast = parse(code, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"]
+    });
+  } catch {
+    return code;
+  }
+  const file = toProjectPath(filename, root);
+  const fallback = file.split("/").pop()?.replace(/\.[jt]sx$/, "") || "component";
+  let changed = false;
+  traverse()(ast, {
+    JSXElement(path) {
+      const opening = path.node.openingElement.name;
+      if (!t.isJSXIdentifier(opening))
+        return;
+      if (opening.name[0] !== opening.name[0].toLowerCase())
+        return;
+      if (!isRootJsx(path))
+        return;
+      const name = componentName(path, fallback);
+      const before = path.node.openingElement.attributes.length;
+      setAttr(path, "data-cs-cmp", name);
+      setAttr(path, "data-cs-file", file);
+      if (path.node.openingElement.attributes.length !== before)
+        changed = true;
+    }
+  });
+  if (!changed)
+    return code;
+  const printed = generate()(ast, { retainLines: true, comments: true }, code);
+  return printed.code;
+}
+
+// ../start/dist/plugin.js
+function commentService(options) {
+  const enabled = options?.enabled ?? process.env.COMMENT_SERVICE_ENABLED !== "0";
+  const root = (options?.root ?? process.cwd()).replace(/\/$/, "");
+  return {
+    name: "devaccel-comment-service",
+    enforce: "pre",
+    transform(code, id) {
+      if (!enabled)
+        return null;
+      const file = id.split("?")[0];
+      if (!/\.[jt]sx$/.test(file) || file.includes("/node_modules/"))
+        return null;
+      if (!file.startsWith(`${root}/`))
+        return null;
+      try {
+        const next = annotateSource(code, file, root);
+        return next === code ? null : { code: next, map: null };
+      } catch (error) {
+        console.warn("[comment-service] annotation skipped", file, error);
+        return null;
+      }
+    }
+  };
+}
+export {
+  commentService
+};