@devaccel-labs/comment-service 0.5.3 → 0.7.0

package/dist/react.js

@@ -206,11 +206,11 @@ function overlayFor(element) {
   return { role, name: labelFor(node) || "dialog" };
 }
 function fiberNames(element) {
-  const key = Object.keys(element).find((name) => name.startsWith("__reactFiber$") || name.startsWith("__reactInternalInstance$"));
-  if (!key)
+  const key2 = Object.keys(element).find((name) => name.startsWith("__reactFiber$") || name.startsWith("__reactInternalInstance$"));
+  if (!key2)
     return [];
   const names2 = [];
-  let fiber = element[key];
+  let fiber = element[key2];
   for (let guard = 0; fiber && guard < 40; guard++) {
     const type = fiber.type;
     if (typeof type === "function") {
@@ -267,7 +267,7 @@ function ownership(element) {
     owner: null
   };
 }
-function candidateFromElement(element, route, key) {
+function candidateFromElement(element, route, key2) {
   const owned = ownership(element);
   const label = labelFor(element);
   const explicit = EXPLICIT.flatMap((attr) => {
@@ -275,7 +275,7 @@ function candidateFromElement(element, route, key) {
     return value && usableExplicit(attr, value) ? [{ attr, value }] : [];
   });
   return {
-    key,
+    key: key2,
     route,
     visible: !obviouslyHidden(element),
     path: domPath(element),
@@ -354,8 +354,8 @@ function describeElement(element) {
 }
 
 // ../react/dist/toolbar.js
-import { jsx as _jsx4, jsxs as _jsxs4, Fragment as _Fragment2 } from "react/jsx-runtime";
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as _jsx6, jsxs as _jsxs6, Fragment as _Fragment3 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // ../react/dist/client.js
@@ -445,8 +445,14 @@ async function listMembers(session, memberToken) {
   return payload.members;
 }
 async function listThreads(session, memberToken) {
-  const payload = await request(`${session.apiUrl}/v1/threads`, memberToken);
-  return payload.threads;
+  return request(`${session.apiUrl}/v1/threads`, memberToken);
+}
+async function saveSettings(session, memberToken, settings) {
+  const payload = await request(`${session.apiUrl}/v1/settings`, memberToken, {
+    method: "PUT",
+    body: JSON.stringify({ settings })
+  });
+  return payload.settings;
 }
 async function createThread(session, memberToken, anchor, body, extras = {}) {
   return request(`${session.apiUrl}/v1/threads`, memberToken, {
@@ -467,6 +473,120 @@ async function updateThread(session, memberToken, threadId, patch) {
   });
 }
 
+// ../react/dist/details.js
+import { jsx as _jsx2, jsxs as _jsxs2, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+
+// ../react/dist/icons.js
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Icon({ children, size = 16 }) {
+  return _jsx("svg", { className: "cs-icon", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children });
+}
+var AddComment = () => _jsxs(Icon, { size: 17, children: [_jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }), _jsx("path", { d: "M12 7v6M9 10h6" })] });
+var Inbox = () => _jsxs(Icon, { size: 17, children: [_jsx("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }), _jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })] });
+var Eye = () => _jsxs(Icon, { size: 17, children: [_jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] });
+var EyeOff = () => _jsxs(Icon, { size: 17, children: [_jsx("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }), _jsx("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }), _jsx("path", { d: "M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }), _jsx("path", { d: "M2 2l20 20" })] });
+var Lock = ({ size = 15 }) => _jsxs(Icon, { size, children: [_jsx("rect", { width: "16", height: "10", x: "4", y: "11", rx: "2" }), _jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })] });
+var Close = () => _jsx(Icon, { size: 15, children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+var Send = () => _jsx(Icon, { size: 15, children: _jsx("path", { d: "m5 12 7-7 7 7M12 19V5" }) });
+var Check = () => _jsx(Icon, { size: 14, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) });
+var Target = () => _jsxs(Icon, { size: 14, children: [_jsx("circle", { cx: "12", cy: "12", r: "8" }), _jsx("circle", { cx: "12", cy: "12", r: "2.5" })] });
+var Relink = () => _jsx(Icon, { size: 14, children: _jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 1 1 0 10h-2M8 12h8" }) });
+var Undo = () => _jsxs(Icon, { size: 14, children: [_jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), _jsx("path", { d: "M3 3v5h5" })] });
+var Pencil = () => _jsx(Icon, { size: 13, children: _jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
+var Cursor = () => _jsx(Icon, { size: 14, children: _jsx("path", { d: "m4 4 7.07 17 2.51-7.39L21 11.07z" }) });
+var Paperclip = () => _jsx(Icon, { size: 15, children: _jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
+var Camera = () => _jsxs(Icon, { size: 15, children: [_jsx("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }), _jsx("circle", { cx: "12", cy: "13", r: "3" })] });
+var FileIcon = () => _jsxs(Icon, { size: 15, children: [_jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }), _jsx("polyline", { points: "14 2 14 8 20 8" })] });
+var Back = () => _jsx(Icon, { children: _jsx("path", { d: "m15 18-6-6 6-6" }) });
+var Table = () => _jsxs(Icon, { children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }), _jsx("path", { d: "M3 10h18M3 15h18M9 10v10" })] });
+var List = () => _jsx(Icon, { children: _jsx("path", { d: "M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01" }) });
+
+// ../react/dist/details.js
+var noDetails = { role: null, fields: {} };
+function detailsEnabled(settings) {
+  if (!settings)
+    return false;
+  return settings.roles.enabled && settings.roles.options.length > 0 || settings.fields.enabled && settings.fields.items.length > 0;
+}
+function hasFieldValues(details) {
+  return Object.values(details.fields).some((value) => value.trim());
+}
+function detailsPayload(settings, details) {
+  if (!settings)
+    return {};
+  const payload = {};
+  if (settings.roles.enabled && details.role)
+    payload.role = details.role;
+  if (settings.fields.enabled) {
+    const fields = Object.fromEntries(Object.entries(details.fields).filter(([, value]) => value.trim()));
+    if (Object.keys(fields).length)
+      payload.fields = fields;
+  }
+  return payload;
+}
+function fieldId(label, taken) {
+  const base = label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32) || "field";
+  let id = base;
+  for (let n = 2; taken.some((field) => field.id === id); n += 1)
+    id = `${base}-${n}`;
+  return id;
+}
+function DetailsInput({ settings, value, onChange, onKeyDown }) {
+  if (!settings || !detailsEnabled(settings))
+    return null;
+  const roles = settings.roles.enabled ? settings.roles.options : [];
+  const fields = settings.fields.enabled ? settings.fields.items : [];
+  return _jsxs2("div", { className: "cs-details-input", "data-cs-ui": "details-input", children: [fields.map((field) => _jsxs2("label", { className: "cs-detail-field", children: [_jsx2("span", { children: field.label }), _jsx2("textarea", { "data-cs-ui": `field-${field.id}`, rows: 1, maxLength: 4e3, value: value.fields[field.id] ?? "", onChange: (event) => onChange({ ...value, fields: { ...value.fields, [field.id]: event.target.value } }), onKeyDown })] }, field.id)), roles.length ? _jsxs2("div", { className: "cs-roles", role: "radiogroup", "aria-label": "Role", children: [_jsx2("span", { className: "cs-roles-label", children: "Role" }), roles.map((role) => _jsx2("button", { type: "button", role: "radio", "data-cs-ui": "role-option", "aria-checked": value.role === role, className: value.role === role ? "cs-chip is-on" : "cs-chip", onClick: () => onChange({ ...value, role: value.role === role ? null : role }), children: role }, role))] }) : null] });
+}
+function RoleBadge({ role }) {
+  return role ? _jsx2("span", { className: "cs-role", "data-cs-ui": "role", children: role }) : null;
+}
+function FieldValues({ fields, clamp = false }) {
+  if (!fields.length)
+    return null;
+  return _jsx2("dl", { className: clamp ? "cs-detail-list is-clamped" : "cs-detail-list", "data-cs-ui": "fields", children: fields.map((field) => _jsxs2("div", { children: [_jsx2("dt", { children: field.label }), _jsx2("dd", { children: field.value })] }, field.id)) });
+}
+function DetailsEditor({ settings, thread, onSave, onClose }) {
+  const [value, setValue] = useState(() => ({
+    role: thread.role,
+    fields: Object.fromEntries(thread.fields.map((field) => [field.id, field.value]))
+  }));
+  const [busy, setBusy] = useState(false);
+  return _jsxs2("form", { className: "cs-details-edit", "data-cs-ui": "details-editor", onSubmit: (event) => {
+    event.preventDefault();
+    const patch = {};
+    if (settings.roles.enabled && value.role !== thread.role)
+      patch.role = value.role;
+    if (settings.fields.enabled) {
+      patch.fields = Object.fromEntries(settings.fields.items.map((field) => [field.id, value.fields[field.id] ?? ""]));
+    }
+    setBusy(true);
+    onSave(patch).then(onClose).finally(() => setBusy(false));
+  }, children: [_jsx2(DetailsInput, { settings, value, onChange: setValue }), _jsxs2("div", { className: "cs-row-end", children: [_jsx2("button", { className: "cs-button", type: "button", onClick: onClose, children: "Cancel" }), _jsx2("button", { className: "cs-button is-primary", "data-cs-ui": "details-save", type: "submit", disabled: busy, children: "Save" })] })] });
+}
+function AddRow({ label, hook, onAdd }) {
+  const [text, setText] = useState("");
+  return _jsxs2("form", { className: "cs-add-row", onSubmit: (event) => {
+    event.preventDefault();
+    const next = text.trim().replace(/\s+/g, " ");
+    if (!next)
+      return;
+    onAdd(next);
+    setText("");
+  }, children: [_jsx2("input", { "data-cs-ui": hook, "aria-label": label, placeholder: label, value: text, maxLength: 60, onChange: (event) => setText(event.target.value) }), _jsx2("button", { className: "cs-icon-button", type: "submit", "aria-label": label, disabled: !text.trim(), children: _jsx2(Check, {}) })] });
+}
+function SettingsPanel({ settings, onChange, onBack, error }) {
+  return _jsxs2("section", { className: "cs-card cs-menu cs-settings cs-hit", "data-cs-ui": "settings", "aria-label": "Comment fields", children: [_jsxs2("header", { className: "cs-settings-head", children: [_jsx2("button", { className: "cs-icon-button", type: "button", "aria-label": "Back", onClick: onBack, children: _jsx2(Back, {}) }), _jsx2("h2", { children: "Comment fields" })] }), !settings ? _jsx2("p", { className: "cs-hint", children: "Loading\u2026" }) : _jsxs2(_Fragment, { children: [_jsxs2("button", { className: "cs-item", "data-cs-ui": "roles-toggle", type: "button", role: "switch", "aria-checked": settings.roles.enabled, onClick: () => onChange({ ...settings, roles: { ...settings.roles, enabled: !settings.roles.enabled } }), children: [_jsx2("span", { children: "Role" }), _jsx2("span", { className: settings.roles.enabled ? "cs-switch is-on" : "cs-switch" })] }), settings.roles.enabled ? _jsxs2("div", { className: "cs-settings-body", children: [settings.roles.options.length ? _jsx2("div", { className: "cs-chips", children: settings.roles.options.map((role) => _jsxs2("span", { className: "cs-chip is-static", "data-cs-ui": "role-chip", children: [role, _jsx2("button", { type: "button", "aria-label": `Remove ${role}`, onClick: () => onChange({ ...settings, roles: { ...settings.roles, options: settings.roles.options.filter((item) => item !== role) } }), children: _jsx2(Close, {}) })] }, role)) }) : null, _jsx2(AddRow, { label: "Add a role", hook: "role-add", onAdd: (role) => {
+    if (settings.roles.options.some((item) => item.toLowerCase() === role.toLowerCase()))
+      return;
+    onChange({ ...settings, roles: { ...settings.roles, options: [...settings.roles.options, role.slice(0, 40)] } });
+  } })] }) : null, _jsx2("div", { className: "cs-sep" }), _jsxs2("button", { className: "cs-item", "data-cs-ui": "fields-toggle", type: "button", role: "switch", "aria-checked": settings.fields.enabled, onClick: () => onChange({ ...settings, fields: { ...settings.fields, enabled: !settings.fields.enabled } }), children: [_jsx2("span", { children: "Custom fields" }), _jsx2("span", { className: settings.fields.enabled ? "cs-switch is-on" : "cs-switch" })] }), settings.fields.enabled ? _jsxs2("div", { className: "cs-settings-body", children: [settings.fields.items.map((field) => _jsxs2("div", { className: "cs-field-row", "data-cs-ui": "field-def", children: [_jsx2("span", { children: field.label }), _jsx2("button", { className: "cs-icon-button", type: "button", "aria-label": `Remove ${field.label}`, onClick: () => onChange({ ...settings, fields: { ...settings.fields, items: settings.fields.items.filter((item) => item.id !== field.id) } }), children: _jsx2(Close, {}) })] }, field.id)), _jsx2(AddRow, { label: "Add a field", hook: "field-add", onAdd: (label) => onChange({
+    ...settings,
+    fields: { ...settings.fields, items: [...settings.fields.items, { id: fieldId(label, settings.fields.items), label }] }
+  }) })] }) : null, error ? _jsx2("p", { className: "cs-error cs-pad", children: error }) : null, _jsx2("p", { className: "cs-hint", children: "Shared with everyone here. Turning off or removing only affects new comments." })] })] });
+}
+
 // ../react/dist/format.js
 var palette = ["#007aff", "#34c759", "#ff9500", "#af52de", "#ff2d55", "#5ac8fa", "#5856d6", "#a2845e"];
 function initials(name) {
@@ -537,31 +657,9 @@ function deliveryText(delivery) {
   return parts.length ? parts.join(" \xB7 ") : null;
 }
 
-// ../react/dist/icons.js
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Icon({ children, size = 16 }) {
-  return _jsx("svg", { className: "cs-icon", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children });
-}
-var AddComment = () => _jsxs(Icon, { size: 17, children: [_jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }), _jsx("path", { d: "M12 7v6M9 10h6" })] });
-var Inbox = () => _jsxs(Icon, { size: 17, children: [_jsx("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }), _jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })] });
-var Eye = () => _jsxs(Icon, { size: 17, children: [_jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] });
-var EyeOff = () => _jsxs(Icon, { size: 17, children: [_jsx("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }), _jsx("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }), _jsx("path", { d: "M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }), _jsx("path", { d: "M2 2l20 20" })] });
-var Lock = ({ size = 15 }) => _jsxs(Icon, { size, children: [_jsx("rect", { width: "16", height: "10", x: "4", y: "11", rx: "2" }), _jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })] });
-var Close = () => _jsx(Icon, { size: 15, children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
-var Send = () => _jsx(Icon, { size: 15, children: _jsx("path", { d: "m5 12 7-7 7 7M12 19V5" }) });
-var Check = () => _jsx(Icon, { size: 14, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) });
-var Target = () => _jsxs(Icon, { size: 14, children: [_jsx("circle", { cx: "12", cy: "12", r: "8" }), _jsx("circle", { cx: "12", cy: "12", r: "2.5" })] });
-var Relink = () => _jsx(Icon, { size: 14, children: _jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 1 1 0 10h-2M8 12h8" }) });
-var Undo = () => _jsxs(Icon, { size: 14, children: [_jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), _jsx("path", { d: "M3 3v5h5" })] });
-var Pencil = () => _jsx(Icon, { size: 13, children: _jsx("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
-var Cursor = () => _jsx(Icon, { size: 14, children: _jsx("path", { d: "m4 4 7.07 17 2.51-7.39L21 11.07z" }) });
-var Paperclip = () => _jsx(Icon, { size: 15, children: _jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
-var Camera = () => _jsxs(Icon, { size: 15, children: [_jsx("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }), _jsx("circle", { cx: "12", cy: "13", r: "3" })] });
-var FileIcon = () => _jsxs(Icon, { size: 15, children: [_jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }), _jsx("polyline", { points: "14 2 14 8 20 8" })] });
-
 // ../react/dist/attachments.js
-import { jsx as _jsx2, jsxs as _jsxs2 } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx as _jsx3, jsxs as _jsxs3 } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState as useState2 } from "react";
 var MAX_BYTES = 10 * 1024 * 1024;
 var MAX_FILES = 5;
 var ACCEPT = "image/png,image/jpeg,image/gif,image/webp,application/pdf,text/plain,text/csv,application/json,application/zip,video/mp4,video/webm,video/quicktime";
@@ -574,10 +672,10 @@ function formatSize(bytes) {
   return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
 }
 function useAttachments(session, memberToken, onError) {
-  const [items, setItems] = useState([]);
+  const [items, setItems] = useState2([]);
   const itemsRef = useRef(items);
   itemsRef.current = items;
-  const patch = (key, next) => setItems((current) => current.map((item) => item.key === key ? { ...item, ...next } : item));
+  const patch = (key2, next) => setItems((current) => current.map((item) => item.key === key2 ? { ...item, ...next } : item));
   const add = useCallback((files) => {
     if (!session || !memberToken)
       return;
@@ -593,22 +691,22 @@ function useAttachments(session, memberToken, onError) {
         onError(`${name} is over 10 MB.`);
         continue;
       }
-      const key = crypto.randomUUID();
+      const key2 = crypto.randomUUID();
       const preview = blob.type.startsWith("image/") ? URL.createObjectURL(blob) : null;
-      setItems((current) => [...current, { key, name, size: blob.size, contentType: blob.type, preview, status: "uploading" }]);
-      uploadAttachment(session, memberToken, blob, name).then((attachment) => patch(key, { status: "ready", id: attachment.id })).catch((caught) => {
+      setItems((current) => [...current, { key: key2, name, size: blob.size, contentType: blob.type, preview, status: "uploading" }]);
+      uploadAttachment(session, memberToken, blob, name).then((attachment) => patch(key2, { status: "ready", id: attachment.id })).catch((caught) => {
         const message = caught instanceof Error ? caught.message : "Upload failed.";
-        patch(key, { status: "failed", error: message });
+        patch(key2, { status: "failed", error: message });
         onError(`${name}: ${message}`);
       });
     }
   }, [memberToken, onError, session]);
-  const remove = useCallback((key) => {
+  const remove = useCallback((key2) => {
     setItems((current) => {
-      const item = current.find((candidate) => candidate.key === key);
+      const item = current.find((candidate) => candidate.key === key2);
       if (item?.preview)
         URL.revokeObjectURL(item.preview);
-      return current.filter((candidate) => candidate.key !== key);
+      return current.filter((candidate) => candidate.key !== key2);
     });
   }, []);
   const reset = useCallback(() => {
@@ -633,26 +731,26 @@ function filesFromClipboard(event) {
 function AttachmentTray({ items, onRemove }) {
   if (!items.length)
     return null;
-  return _jsx2("div", { className: "cs-tray", "data-cs-ui": "attachment-tray", children: items.map((item) => _jsxs2("div", { className: `cs-pending is-${item.status}`, "data-cs-ui": "pending-file", "data-status": item.status, title: item.error ?? item.name, children: [item.preview ? _jsx2("img", { src: item.preview, alt: "" }) : _jsx2(FileIcon, {}), _jsx2("span", { className: "cs-pending-name", children: item.name }), _jsx2("button", { type: "button", className: "cs-pending-remove", "aria-label": `Remove ${item.name}`, onClick: () => onRemove(item.key), children: _jsx2(Close, {}) })] }, item.key)) });
+  return _jsx3("div", { className: "cs-tray", "data-cs-ui": "attachment-tray", children: items.map((item) => _jsxs3("div", { className: `cs-pending is-${item.status}`, "data-cs-ui": "pending-file", "data-status": item.status, title: item.error ?? item.name, children: [item.preview ? _jsx3("img", { src: item.preview, alt: "" }) : _jsx3(FileIcon, {}), _jsx3("span", { className: "cs-pending-name", children: item.name }), _jsx3("button", { type: "button", className: "cs-pending-remove", "aria-label": `Remove ${item.name}`, onClick: () => onRemove(item.key), children: _jsx3(Close, {}) })] }, item.key)) });
 }
 function AttachButtons({ onFiles, onSnapshot, capturing }) {
   const input = useRef(null);
-  return _jsxs2("span", { className: "cs-attach", children: [_jsx2("input", { ref: input, type: "file", multiple: true, accept: ACCEPT, hidden: true, "data-cs-ui": "file-input", onChange: (event) => {
+  return _jsxs3("span", { className: "cs-attach", children: [_jsx3("input", { ref: input, type: "file", multiple: true, accept: ACCEPT, hidden: true, "data-cs-ui": "file-input", onChange: (event) => {
     onFiles([...event.target.files ?? []].map((file) => ({ blob: file, name: file.name })));
     event.target.value = "";
-  } }), _jsx2("button", { type: "button", className: "cs-icon-button", "data-cs-ui": "attach", "aria-label": "Attach files", onClick: () => input.current?.click(), children: _jsx2(Paperclip, {}) }), _jsx2("button", { type: "button", className: "cs-icon-button", "data-cs-ui": "snapshot", "aria-label": "Attach a screenshot of the page", disabled: capturing, onClick: onSnapshot, children: _jsx2(Camera, {}) })] });
+  } }), _jsx3("button", { type: "button", className: "cs-icon-button", "data-cs-ui": "attach", "aria-label": "Attach files", onClick: () => input.current?.click(), children: _jsx3(Paperclip, {}) }), _jsx3("button", { type: "button", className: "cs-icon-button", "data-cs-ui": "snapshot", "aria-label": "Attach a screenshot of the page", disabled: capturing, onClick: onSnapshot, children: _jsx3(Camera, {}) })] });
 }
 function MessageAttachments({ attachments }) {
   if (!attachments?.length)
     return null;
   const images = attachments.filter((file) => file.contentType.startsWith("image/"));
   const others = attachments.filter((file) => !file.contentType.startsWith("image/"));
-  return _jsxs2("div", { className: "cs-files", "data-cs-ui": "attachments", children: [images.length ? _jsx2("div", { className: "cs-thumbs", children: images.map((file) => _jsx2("a", { href: file.url, target: "_blank", rel: "noreferrer noopener", className: "cs-thumb", title: file.name, "data-cs-ui": "attachment", children: _jsx2("img", { src: file.url, alt: file.name, loading: "lazy" }) }, file.id)) }) : null, others.map((file) => _jsxs2("a", { href: file.url, target: "_blank", rel: "noreferrer noopener", className: "cs-file", "data-cs-ui": "attachment", children: [_jsx2(FileIcon, {}), _jsx2("span", { className: "cs-file-name", children: file.name }), _jsx2("span", { className: "cs-file-size", children: formatSize(file.size) })] }, file.id))] });
+  return _jsxs3("div", { className: "cs-files", "data-cs-ui": "attachments", children: [images.length ? _jsx3("div", { className: "cs-thumbs", children: images.map((file) => _jsx3("a", { href: file.url, target: "_blank", rel: "noreferrer noopener", className: "cs-thumb", title: file.name, "data-cs-ui": "attachment", children: _jsx3("img", { src: file.url, alt: file.name, loading: "lazy" }) }, file.id)) }) : null, others.map((file) => _jsxs3("a", { href: file.url, target: "_blank", rel: "noreferrer noopener", className: "cs-file", "data-cs-ui": "attachment", children: [_jsx3(FileIcon, {}), _jsx3("span", { className: "cs-file-name", children: file.name }), _jsx3("span", { className: "cs-file-size", children: formatSize(file.size) })] }, file.id))] });
 }
 
 // ../react/dist/mentions.js
-import { Fragment as _Fragment, jsx as _jsx3, jsxs as _jsxs3 } from "react/jsx-runtime";
-import { useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment as _Fragment2, jsx as _jsx4, jsxs as _jsxs4 } from "react/jsx-runtime";
+import { useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 function queryAt(text, caret) {
   const match = text.slice(0, caret).match(/(^|\s)@([^\s@]{0,30})$/);
@@ -666,16 +764,16 @@ function mentionsIn(text, picked) {
 }
 function MessageText({ body, mentions }) {
   if (!mentions?.length)
-    return _jsx3(_Fragment, { children: body });
+    return _jsx4(_Fragment2, { children: body });
   const pattern = new RegExp(`(@(?:${mentions.map((mention) => escapeRegex(mention.name)).join("|")}))`, "g");
-  const parts = body.split(pattern).map((part, index) => index % 2 === 1 ? _jsx3("span", { className: "cs-mention", children: part }, index) : part);
-  return _jsx3(_Fragment, { children: parts });
+  const parts = body.split(pattern).map((part, index) => index % 2 === 1 ? _jsx4("span", { className: "cs-mention", children: part }, index) : part);
+  return _jsx4(_Fragment2, { children: parts });
 }
 function MentionTextarea({ value, onValueChange, members, selfEmail, onMention, onKeyDown, ...rest }) {
   const ref = useRef2(null);
-  const [caret, setCaret] = useState2(0);
-  const [index, setIndex] = useState2(0);
-  const [dismissed, setDismissed] = useState2(null);
+  const [caret, setCaret] = useState3(0);
+  const [index, setIndex] = useState3(0);
+  const [dismissed, setDismissed] = useState3(null);
   const active = queryAt(value, caret);
   const query = active?.query.toLowerCase() ?? null;
   const matches = useMemo(() => {
@@ -702,7 +800,7 @@ function MentionTextarea({ value, onValueChange, members, selfEmail, onMention,
   const rect = open ? ref.current?.getBoundingClientRect() : null;
   const root = open ? ref.current?.closest("#cs-root") : null;
   const below = rect ? window.innerHeight - rect.bottom > 220 : true;
-  return _jsxs3(_Fragment, { children: [_jsx3("textarea", { ref, ...rest, value, "aria-autocomplete": "list", "aria-expanded": open, onChange: (event) => {
+  return _jsxs4(_Fragment2, { children: [_jsx4("textarea", { ref, ...rest, value, "aria-autocomplete": "list", "aria-expanded": open, onChange: (event) => {
     onValueChange(event.target.value);
     setCaret(event.target.selectionStart ?? event.target.value.length);
     setIndex(0);
@@ -728,13 +826,13 @@ function MentionTextarea({ value, onValueChange, members, selfEmail, onMention,
       }
     }
     onKeyDown?.(event);
-  } }), open && rect && root ? createPortal(_jsx3("div", { className: "cs-people cs-hit", role: "listbox", "data-cs-ui": "mention-list", style: {
+  } }), open && rect && root ? createPortal(_jsx4("div", { className: "cs-people cs-hit", role: "listbox", "data-cs-ui": "mention-list", style: {
     left: Math.min(rect.left, window.innerWidth - 272),
     ...below ? { top: rect.bottom + 6 } : { bottom: window.innerHeight - rect.top + 6 }
-  }, children: matches.map((member) => _jsxs3("div", { role: "option", "aria-selected": member === selected, "data-cs-ui": "mention-option", className: member === selected ? "cs-person is-on" : "cs-person", onMouseDown: (event) => {
+  }, children: matches.map((member) => _jsxs4("div", { role: "option", "aria-selected": member === selected, "data-cs-ui": "mention-option", className: member === selected ? "cs-person is-on" : "cs-person", onMouseDown: (event) => {
     event.preventDefault();
     insert(member);
-  }, onMouseEnter: () => setIndex(matches.indexOf(member)), children: [_jsx3("span", { className: "cs-avatar", style: { width: 24, height: 24, fontSize: 10, background: colorFor(member.name) }, children: initials(member.name) }), _jsxs3("span", { className: "cs-person-text", children: [_jsx3("strong", { children: member.name }), _jsx3("small", { children: member.email })] })] }, member.id)) }), root) : null] });
+  }, onMouseEnter: () => setIndex(matches.indexOf(member)), children: [_jsx4("span", { className: "cs-avatar", style: { width: 24, height: 24, fontSize: 10, background: colorFor(member.name) }, children: initials(member.name) }), _jsxs4("span", { className: "cs-person-text", children: [_jsx4("strong", { children: member.name }), _jsx4("small", { children: member.email })] })] }, member.id)) }), root) : null] });
 }
 
 // ../../node_modules/modern-screenshot/dist/index.mjs
@@ -1050,14 +1148,14 @@ async function createContext(node, options) {
     drawImageCount: 0,
     tasks: [],
     features,
-    isEnable: (key) => {
-      if (key === "restoreScrollPosition") {
-        return typeof features === "boolean" ? false : features[key] ?? false;
+    isEnable: (key2) => {
+      if (key2 === "restoreScrollPosition") {
+        return typeof features === "boolean" ? false : features[key2] ?? false;
       }
       if (typeof features === "boolean") {
         return features;
       }
-      return features[key] ?? true;
+      return features[key2] ?? true;
     },
     shadowRoots: []
   };
@@ -1298,14 +1396,14 @@ function getDefaultStyle(node, pseudoElement, context) {
   const nodeName = node.nodeName.toLowerCase();
   const isSvgNode = isSVGElementNode(node) && nodeName !== "svg";
   const attributes = isSvgNode ? includedAttributes.map((name) => [name, node.getAttribute(name)]).filter(([, value]) => value !== null) : [];
-  const key = [
+  const key2 = [
     isSvgNode && "svg",
     nodeName,
     attributes.map((name, value) => `${name}=${value}`).join(","),
     pseudoElement
   ].filter(Boolean).join(":");
-  if (defaultComputedStyles.has(key))
-    return defaultComputedStyles.get(key);
+  if (defaultComputedStyles.has(key2))
+    return defaultComputedStyles.get(key2);
   const sandbox = getSandBox(context);
   const sandboxWindow = sandbox?.contentWindow;
   if (!sandboxWindow)
@@ -1334,7 +1432,7 @@ function getDefaultStyle(node, pseudoElement, context) {
     styles.set(name, computedStyle.getPropertyValue(name));
   }
   sandboxDocument.body.removeChild(root);
-  defaultComputedStyles.set(key, styles);
+  defaultComputedStyles.set(key2, styles);
   return styles;
 }
 function getDiffStyle(style, defaultStyle, includeStyleProperties) {
@@ -1382,8 +1480,8 @@ function copyCssStyles(node, cloned, isRoot, context) {
   const clonedStyle = cloned.style;
   const computedStyle = ownerWindow.getComputedStyle(node);
   const defaultStyle = getDefaultStyle(node, null, context);
-  currentParentNodeStyle?.forEach((_, key) => {
-    defaultStyle.delete(key);
+  currentParentNodeStyle?.forEach((_, key2) => {
+    defaultStyle.delete(key2);
   });
   const style = getDiffStyle(computedStyle, defaultStyle, includeStyleProperties);
   style.delete("transition-property");
@@ -1454,8 +1552,8 @@ function copyPseudoClass(node, cloned, copyScrollbar, context, addWordToFontFami
     content = content.replace(/(')|(")|(counter\(.+\))/g, "");
     const klasses = [uuid()];
     const defaultStyle = getDefaultStyle(node, pseudoClass, context);
-    currentNodeStyle?.forEach((_, key) => {
-      defaultStyle.delete(key);
+    currentNodeStyle?.forEach((_, key2) => {
+      defaultStyle.delete(key2);
     });
     const style = getDiffStyle(computedStyle, defaultStyle, context.includeStyleProperties);
     style.delete("content");
@@ -2244,6 +2342,145 @@ async function captureAround(element) {
   return out.toDataURL("image/jpeg", 0.82);
 }
 
+// ../react/dist/table.js
+import { jsx as _jsx5, jsxs as _jsxs5 } from "react/jsx-runtime";
+import { useMemo as useMemo2, useState as useState4 } from "react";
+var columns = [
+  { key: "comment", label: "Comment" },
+  { key: "role", label: "Role" },
+  { key: "page", label: "Page" },
+  { key: "author", label: "Author" },
+  { key: "replies", label: "Replies" },
+  { key: "status", label: "Status" },
+  { key: "updated", label: "Updated" }
+];
+function sortValue(thread, key2) {
+  if (key2 === "comment")
+    return thread.messages[0]?.body ?? "";
+  if (key2 === "role")
+    return thread.role ?? "";
+  if (key2 === "page")
+    return thread.url || thread.route;
+  if (key2 === "author")
+    return thread.createdBy;
+  if (key2 === "replies")
+    return thread.messages.length;
+  if (key2 === "status")
+    return thread.status;
+  return thread.updatedAt;
+}
+function searchText(thread) {
+  return [
+    thread.createdBy,
+    thread.role ?? "",
+    thread.url || thread.route,
+    targetName(thread.anchor),
+    ...thread.messages.map((message) => message.body),
+    ...thread.fields.map((field) => `${field.label} ${field.value}`)
+  ].join("\n").toLowerCase();
+}
+function CommentTable({ rows, route, activeId, tabs, onSelect, onList, onClose }) {
+  const [query, setQuery] = useState4("");
+  const [sort, setSort] = useState4({ key: "updated", desc: true });
+  const showRole = rows.some((row) => row.thread.role);
+  const fieldLabels = useMemo2(() => {
+    const labels = [];
+    for (const { thread } of rows)
+      for (const field of thread.fields)
+        if (!labels.includes(field.label))
+          labels.push(field.label);
+    return labels;
+  }, [rows]);
+  const shown = useMemo2(() => {
+    const needle = query.trim().toLowerCase();
+    const matched = needle ? rows.filter((row) => searchText(row.thread).includes(needle)) : rows;
+    return [...matched].sort((a, b) => {
+      const left = sortValue(a.thread, sort.key);
+      const right = sortValue(b.thread, sort.key);
+      const order = typeof left === "number" && typeof right === "number" ? left - right : String(left).localeCompare(String(right));
+      return sort.desc ? -order : order;
+    });
+  }, [query, rows, sort]);
+  const visible = columns.filter((column) => column.key !== "role" || showRole);
+  const header = (column) => _jsx5("th", { "aria-sort": sort.key === column.key ? sort.desc ? "descending" : "ascending" : "none", children: _jsxs5("button", { type: "button", onClick: () => setSort((current) => ({ key: column.key, desc: current.key === column.key ? !current.desc : column.key === "updated" })), children: [column.label, sort.key === column.key ? _jsx5("span", { className: "cs-sort", children: sort.desc ? "\u2193" : "\u2191" }) : null] }) }, column.key);
+  return _jsxs5("section", { className: "cs-card cs-table-sheet cs-hit", "data-cs-ui": "panel", "aria-label": "Comments table", children: [_jsxs5("header", { className: "cs-sheet-head", children: [_jsx5("h2", { children: "Comments" }), _jsx5("input", { className: "cs-table-search", "data-cs-ui": "table-search", type: "search", "aria-label": "Search comments", placeholder: "Search", value: query, onChange: (event) => setQuery(event.target.value) }), _jsx5("button", { className: "cs-icon-button", "data-cs-ui": "list-view", type: "button", "aria-label": "List view", onClick: onList, children: _jsx5(List, {}) }), _jsx5("button", { className: "cs-icon-button", type: "button", "aria-label": "Close comments", onClick: onClose, children: _jsx5(Close, {}) })] }), tabs, _jsx5("div", { className: "cs-table-wrap", children: shown.length === 0 ? _jsx5("p", { className: "cs-empty", children: query ? "No comments match." : "No comments here." }) : _jsxs5("table", { className: "cs-table", "data-cs-ui": "table", children: [_jsx5("thead", { children: _jsxs5("tr", { children: [visible.slice(0, showRole ? 2 : 1).map(header), fieldLabels.map((label) => _jsx5("th", { children: _jsx5("span", { children: label }) }, `field:${label}`)), visible.slice(showRole ? 2 : 1).map(header)] }) }), _jsx5("tbody", { children: shown.map((row) => {
+    const { thread } = row;
+    const first = thread.messages[0];
+    const note = statusNote(row.status, thread.anchor, thread.route === route);
+    return _jsxs5("tr", { className: activeId === thread.id ? "is-active" : void 0, "data-cs-ui": "table-row", "data-thread-id": thread.id, tabIndex: 0, onClick: () => onSelect(row), onKeyDown: (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onSelect(row);
+      }
+    }, children: [_jsxs5("td", { className: "cs-cell-comment", children: [_jsx5("span", { className: "cs-cell-clamp", children: first?.body || "\u2014" }), _jsx5("small", { children: targetName(thread.anchor) })] }), showRole ? _jsx5("td", { children: thread.role ? _jsx5("span", { className: "cs-role", children: thread.role }) : null }) : null, fieldLabels.map((label) => _jsx5("td", { children: _jsx5("span", { className: "cs-cell-clamp", children: thread.fields.find((field) => field.label === label)?.value ?? "" }) }, `field:${label}`)), _jsx5("td", { className: "cs-cell-page", title: thread.url || thread.route, children: thread.url || thread.route }), _jsx5("td", { className: "cs-cell-nowrap", children: thread.createdBy }), _jsx5("td", { className: "cs-cell-num", children: thread.messages.length - 1 || "" }), _jsxs5("td", { className: "cs-cell-nowrap", children: [_jsx5("span", { className: thread.status === "resolved" ? "cs-state is-done" : "cs-state", children: thread.status === "resolved" ? "Resolved" : "Open" }), note && thread.status === "open" ? _jsx5("small", { className: `cs-note is-${note.tone}`, children: note.text }) : null] }), _jsx5("td", { className: "cs-cell-nowrap", children: _jsx5("time", { dateTime: thread.updatedAt, children: ago(thread.updatedAt) }) })] }, thread.id);
+  }) })] }) })] });
+}
+
+// ../react/dist/handoff.js
+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();
+}
+
 // ../react/dist/styles.js
 var toolbarCss = `
 #cs-root {
@@ -2497,6 +2734,7 @@ var toolbarCss = `
   display: flex; flex-direction: column; overflow: hidden;
 }
 #cs-root .cs-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 4px 16px; }
+#cs-root .cs-sheet-head .cs-push { margin-left: auto; }
 #cs-root .cs-sheet-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
 #cs-root .cs-tabs { display: flex; gap: 2px; margin: 4px 12px 6px; padding: 2px; border-radius: 9px; background: var(--cs-fill); }
 #cs-root .cs-tabs button {
@@ -2568,6 +2806,88 @@ var toolbarCss = `
 #cs-root .cs-composer-foot { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px 40px; }
 #cs-root .cs-composer-foot .cs-hint { margin-left: auto; }
 
+/* Roles and fields */
+#cs-root .cs-details-input { display: grid; gap: 8px; padding: 2px 12px 6px 46px; }
+#cs-root .cs-details-edit .cs-details-input { padding: 0; }
+#cs-root .cs-detail-field { display: grid; gap: 3px; }
+#cs-root .cs-detail-field span, #cs-root .cs-roles-label, #cs-root .cs-detail-list dt {
+  font-size: 11px; font-weight: 600; color: var(--cs-text-3); text-transform: uppercase; letter-spacing: 0.03em;
+}
+#cs-root .cs-detail-field textarea { padding: 6px 8px; min-height: 30px; max-height: 120px; field-sizing: content; }
+#cs-root .cs-thread.is-open .cs-detail-field textarea { background: var(--cs-card); }
+#cs-root .cs-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
+#cs-root .cs-roles-label { margin-right: 4px; }
+#cs-root .cs-chip {
+  display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 9px; border-radius: 999px;
+  background: var(--cs-fill); font-size: 12px; font-weight: 500; color: var(--cs-text-2);
+}
+#cs-root button.cs-chip:hover { background: var(--cs-fill-2); }
+#cs-root .cs-chip.is-on, #cs-root button.cs-chip.is-on:hover { background: var(--cs-accent); color: #fff; }
+#cs-root .cs-chip.is-static { padding-right: 3px; color: var(--cs-text); }
+#cs-root .cs-chip.is-static button {
+  width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cs-text-3);
+}
+#cs-root .cs-chip.is-static button:hover { background: var(--cs-fill-2); color: var(--cs-text); }
+#cs-root .cs-chip.is-static .cs-icon { width: 11px; height: 11px; }
+#cs-root .cs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
+#cs-root .cs-role {
+  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px;
+  background: var(--cs-accent-soft); color: var(--cs-accent); font-size: 11px; font-weight: 600;
+}
+#cs-root .cs-detail-list { display: grid; gap: 6px; margin: 6px 0 0; }
+#cs-root .cs-detail-list > div { padding: 6px 8px; border-radius: 8px; background: var(--cs-fill); }
+#cs-root .cs-thread.is-open .cs-detail-list > div { background: var(--cs-card); }
+#cs-root .cs-detail-list dd { margin: 1px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+#cs-root .cs-detail-list.is-clamped dd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+#cs-root .cs-details-edit { display: grid; gap: 8px; }
+#cs-root .cs-details-edit .cs-row-end { margin-top: 0; }
+#cs-root .cs-settings { width: 280px; }
+#cs-root .cs-settings-head { display: flex; align-items: center; gap: 4px; padding: 4px 4px 6px; }
+#cs-root .cs-settings-head h2 { font-size: 14px; font-weight: 600; }
+#cs-root .cs-settings-body { display: grid; gap: 6px; padding: 2px 8px 8px; }
+#cs-root .cs-field-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; padding-left: 2px; }
+#cs-root .cs-add-row { display: flex; align-items: center; gap: 4px; }
+#cs-root .cs-add-row input { padding: 5px 8px; }
+#cs-root .cs-settings .cs-hint { padding: 6px 8px 4px; }
+
+/* Table */
+#cs-root .cs-table-sheet {
+  top: 12px; right: 12px; width: min(1100px, calc(100vw - 24px)); max-height: calc(100% - 88px);
+  display: flex; flex-direction: column; overflow: hidden;
+}
+#cs-root .cs-table-sheet .cs-sheet-head { gap: 6px; }
+#cs-root .cs-table-sheet .cs-sheet-head h2 { margin-right: auto; }
+#cs-root .cs-table-search { width: 220px; padding: 5px 10px; }
+#cs-root .cs-table-sheet .cs-tabs { max-width: 420px; }
+#cs-root .cs-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: 1px solid var(--cs-line); overscroll-behavior: contain; }
+#cs-root .cs-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+#cs-root .cs-table th {
+  position: sticky; top: 0; z-index: 1; background: var(--cs-card); text-align: left; font-weight: 600;
+  font-size: 11px; color: var(--cs-text-3); text-transform: uppercase; letter-spacing: 0.03em;
+  padding: 0; border-bottom: 1px solid var(--cs-line); white-space: nowrap;
+}
+#cs-root .cs-table th > button, #cs-root .cs-table th > span {
+  display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
+}
+#cs-root .cs-table th > button:hover { color: var(--cs-text); }
+#cs-root .cs-sort { color: var(--cs-accent); }
+#cs-root .cs-table td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--cs-line); max-width: 260px; }
+#cs-root .cs-table tbody tr { cursor: pointer; }
+#cs-root .cs-table tbody tr:hover { background: var(--cs-fill); }
+#cs-root .cs-table tbody tr.is-active { background: var(--cs-accent-soft); }
+#cs-root .cs-table tbody tr:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
+#cs-root .cs-cell-comment { min-width: 220px; }
+#cs-root .cs-cell-comment small, #cs-root .cs-table td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--cs-text-3); }
+#cs-root .cs-cell-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
+#cs-root .cs-cell-page { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cs-text-2); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#cs-root .cs-cell-nowrap { white-space: nowrap; }
+#cs-root .cs-cell-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--cs-text-2); }
+#cs-root .cs-state { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
+#cs-root .cs-state::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #34c759; }
+#cs-root .cs-state.is-done { color: var(--cs-text-3); }
+#cs-root .cs-state.is-done::before { background: var(--cs-text-3); }
+#cs-root .cs-table .cs-note { display: flex; margin-top: 2px; font-size: 11px; }
+
 /* Attachments */
 #cs-root .cs-attach { display: inline-flex; gap: 0; flex: none; }
 #cs-root .cs-tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 2px 46px; }
@@ -2658,6 +2978,7 @@ var toolbarCss = `
 `;
 
 // ../react/dist/toolbar.js
+captureHandoff();
 var historyFlag = "__devaccelCommentHistory";
 var prefsKey = "devaccel.comment.prefs";
 var positions = [
@@ -2690,6 +3011,13 @@ function placeAgainst(element, host) {
     height: rect.height
   };
 }
+function pageHref() {
+  const url = new URL(window.location.href);
+  url.searchParams.delete("cs-thread");
+  url.searchParams.delete("cs-invite");
+  const hash = url.hash.includes("cs-thread=") || url.hash.includes("cs-invite=") ? "" : url.hash;
+  return `${url.pathname}${url.search}${hash}`;
+}
 function isTyping(target) {
   if (!(target instanceof HTMLElement))
     return false;
@@ -2712,44 +3040,48 @@ async function loadSession(sessionPath) {
   return { apiUrl: payload.apiUrl, project: payload.project, environment: payload.environment, hostToken: payload.hostToken };
 }
 function Avatar({ name, size = 24 }) {
-  return _jsx4("span", { className: "cs-avatar", style: { width: size, height: size, fontSize: size * 0.4, background: colorFor(name) }, children: initials(name) });
-}
-function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs = 4e3, position = "bottom-center", theme = "light" }) {
-  const [phase, setPhase] = useState3("boot");
-  const [session, setSession] = useState3(null);
-  const [member, setMember] = useState3(null);
-  const [threads, setThreads] = useState3([]);
-  const [route, setRoute] = useState3("/");
-  const [surface, setSurface] = useState3("none");
-  const [tab, setTab] = useState3("page");
-  const [mode, setMode] = useState3("browse");
-  const [reattachId, setReattachId] = useState3(null);
-  const [activeId, setActiveId] = useState3(null);
-  const [peekId, setPeekId] = useState3(null);
-  const [draft, setDraft] = useState3(null);
-  const [body, setBody] = useState3("");
-  const [reply, setReply] = useState3("");
-  const [name, setName] = useState3("");
-  const [passphrase, setPassphrase] = useState3("");
-  const [email, setEmail] = useState3("");
-  const [members, setMembers] = useState3([]);
-  const [profile, setProfile] = useState3(null);
-  const [deliveries, setDeliveries] = useState3({});
-  const [invite, setInvite] = useState3(null);
-  const [capturing, setCapturing] = useState3(false);
-  const [inviteLink, setInviteLink] = useState3(null);
-  const [renaming, setRenaming] = useState3(null);
-  const [confirmReset, setConfirmReset] = useState3(false);
-  const [error, setError] = useState3("");
-  const [toast, setToast] = useState3("");
-  const [busy, setBusy] = useState3(false);
-  const [prefs, setPrefs] = useState3({});
-  const [portal, setPortal] = useState3(null);
-  const [mounted, setMounted] = useState3(false);
-  const [highlight, setHighlight] = useState3(null);
-  const [flash, setFlash] = useState3(null);
-  const [placed, setPlaced] = useState3([]);
-  const [systemDark, setSystemDark] = useState3(false);
+  return _jsx6("span", { className: "cs-avatar", style: { width: size, height: size, fontSize: size * 0.4, background: colorFor(name) }, children: initials(name) });
+}
+function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs = 4e3, position = "bottom-center", theme = "light", navigate }) {
+  const [phase, setPhase] = useState5("boot");
+  const [session, setSession] = useState5(null);
+  const [member, setMember] = useState5(null);
+  const [threads, setThreads] = useState5([]);
+  const [route, setRoute] = useState5("/");
+  const [surface, setSurface] = useState5("none");
+  const [tab, setTab] = useState5("page");
+  const [mode, setMode] = useState5("browse");
+  const [reattachId, setReattachId] = useState5(null);
+  const [activeId, setActiveId] = useState5(null);
+  const [peekId, setPeekId] = useState5(null);
+  const [draft, setDraft] = useState5(null);
+  const [body, setBody] = useState5("");
+  const [reply, setReply] = useState5("");
+  const [name, setName] = useState5("");
+  const [passphrase, setPassphrase] = useState5("");
+  const [email, setEmail] = useState5("");
+  const [members, setMembers] = useState5([]);
+  const [profile, setProfile] = useState5(null);
+  const [deliveries, setDeliveries] = useState5({});
+  const [invite, setInvite] = useState5(null);
+  const [capturing, setCapturing] = useState5(false);
+  const [inviteLink, setInviteLink] = useState5(null);
+  const [renaming, setRenaming] = useState5(null);
+  const [confirmReset, setConfirmReset] = useState5(false);
+  const [error, setError] = useState5("");
+  const [toast, setToast] = useState5("");
+  const [busy, setBusy] = useState5(false);
+  const [prefs, setPrefs] = useState5({});
+  const [portal, setPortal] = useState5(null);
+  const [mounted, setMounted] = useState5(false);
+  const [highlight, setHighlight] = useState5(null);
+  const [flash, setFlash] = useState5(null);
+  const [placed, setPlaced] = useState5([]);
+  const [systemDark, setSystemDark] = useState5(false);
+  const [settings, setSettings] = useState5(null);
+  const [draftDetails, setDraftDetails] = useState5(noDetails);
+  const [editingId, setEditingId] = useState5(null);
+  const [view, setView] = useState5("list");
   const threadsRef = useRef3(threads);
   threadsRef.current = threads;
   const modeRef = useRef3(mode);
@@ -2759,6 +3091,7 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
   const draftShot = useRef3(null);
   const replyShot = useRef3(null);
   const pendingThread = useRef3(null);
+  const arrival = useRef3(null);
   const draftFiles = useAttachments(session, member, setError);
   const replyFiles = useAttachments(session, member, setError);
   const resetReplyFiles = replyFiles.reset;
@@ -2858,7 +3191,9 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
   const refresh = useCallback2(async () => {
     if (!session || !member)
       return;
-    setThreads(await listThreads(session, member));
+    const next = await listThreads(session, member);
+    setThreads(next.threads);
+    setSettings(next.settings);
   }, [member, session]);
   useEffect2(() => {
     if (!session || !member)
@@ -2866,8 +3201,10 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
     let stop = false;
     const tick = () => {
       listThreads(session, member).then((next) => {
-        if (!stop)
-          setThreads(next);
+        if (stop)
+          return;
+        setThreads(next.threads);
+        setSettings(next.settings);
       }).catch((caught) => {
         if (caught instanceof ApiError && caught.status === 401) {
           localStorage.removeItem(storageKey(session));
@@ -2900,22 +3237,23 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
     };
   }, [member, session]);
   useEffect2(() => {
-    const params = new URLSearchParams(window.location.search);
-    pendingThread.current = params.get("cs-thread");
-    const code = params.get("cs-invite");
-    if (code) {
-      setInvite(code);
-      const url = new URL(window.location.href);
-      url.searchParams.delete("cs-invite");
-      history.replaceState(history.state, "", url);
-    }
+    captureHandoff();
+    const handoff = readHandoff();
+    pendingThread.current = handoff?.thread ?? null;
+    if (handoff?.invite)
+      setInvite(handoff.invite);
+    stripHandoffFromUrl();
+  }, []);
+  const dropInvite = useCallback2(() => {
+    setInvite(null);
+    dropHandoff("invite");
   }, []);
   useEffect2(() => {
     if (phase === "ready" && !member && (pendingThread.current || invite))
       setSurface("unlock");
     if (member && invite)
-      setInvite(null);
-  }, [invite, member, phase]);
+      dropInvite();
+  }, [dropInvite, invite, member, phase]);
   useEffect2(() => {
     if (!mounted)
       return;
@@ -3003,12 +3341,13 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       }
       if (!member || event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target))
         return;
-      const key = event.key.toLowerCase();
-      if (key === "c")
+      const key2 = event.key.toLowerCase();
+      if (key2 === "c")
         startComment();
-      else if (key === "i")
+      else if (key2 === "i") {
+        setView(prefs.view ?? "list");
         setSurface((current) => current === "inbox" ? "none" : "inbox");
-      else if (key === "h")
+      } else if (key2 === "h")
         togglePins();
       else
         return;
@@ -3016,7 +3355,7 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [draft, member, mode, startComment, surface, togglePins]);
+  }, [draft, member, mode, prefs.view, startComment, surface, togglePins]);
   useEffect2(() => {
     if (mode === "browse") {
       setHighlight(null);
@@ -3048,7 +3387,7 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       const box = placeAgainst(element, target);
       if (modeRef.current === "reattach" && reattachId && member) {
         setBusy(true);
-        updateThread(session, member, reattachId, { anchor }).then(() => refresh()).then(() => {
+        updateThread(session, member, reattachId, { anchor, url: pageHref() }).then(() => refresh()).then(() => {
           setMode("browse");
           setReattachId(null);
           setSurface("inbox");
@@ -3069,6 +3408,7 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       draftShot.current = null;
       draftFiles.reset();
       setBody("");
+      setDraftDetails(noDetails);
       setMode("browse");
       setError("");
     };
@@ -3100,19 +3440,19 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
     all: open.length,
     resolved: placed.length - open.length
   };
-  const listed = useMemo2(() => {
+  const listed = useMemo3(() => {
     if (tab === "resolved")
       return placed.filter((item) => item.thread.status === "resolved");
     const openOnly = placed.filter((item) => item.thread.status === "open");
     return tab === "page" ? openOnly.filter((item) => item.thread.route === route) : openOnly;
   }, [placed, route, tab]);
-  const groups = useMemo2(() => {
+  const groups = useMemo3(() => {
     if (tab !== "all")
       return [{ route: null, items: listed }];
     const byRoute = /* @__PURE__ */ new Map();
     for (const item of listed)
       byRoute.set(item.thread.route, [...byRoute.get(item.thread.route) ?? [], item]);
-    return [...byRoute.entries()].sort(([a], [b]) => a === route ? -1 : b === route ? 1 : a.localeCompare(b)).map(([key, items]) => ({ route: key, items }));
+    return [...byRoute.entries()].sort(([a], [b]) => a === route ? -1 : b === route ? 1 : a.localeCompare(b)).map(([key2, items]) => ({ route: key2, items }));
   }, [listed, route, tab]);
   const showOnPage = useCallback2((thread) => {
     const { element } = resolveInDocument(thread.anchor, window.location.pathname);
@@ -3133,21 +3473,67 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
     if (!item)
       return;
     pendingThread.current = null;
-    const url = new URL(window.location.href);
-    url.searchParams.delete("cs-thread");
-    history.replaceState(history.state, "", url);
+    dropHandoff("thread");
     setTab(item.thread.status === "resolved" ? "resolved" : item.thread.route === route ? "page" : "all");
     setActiveId(id);
     setSurface("inbox");
     if (item.status === "pinned" || item.status === "drifted")
       showOnPage(item.thread);
+    else
+      arrival.current = { id, until: Date.now() + 6e3 };
   }, [member, placed, route, showOnPage]);
+  useEffect2(() => {
+    const pending = arrival.current;
+    if (!pending)
+      return;
+    if (Date.now() > pending.until) {
+      arrival.current = null;
+      return;
+    }
+    const item = placed.find((candidate) => candidate.thread.id === pending.id);
+    if (!item || item.status !== "pinned" && item.status !== "drifted")
+      return;
+    arrival.current = null;
+    showOnPage(item.thread);
+  }, [placed, showOnPage]);
+  const select = useCallback2((item, keepOpen = false) => {
+    const { thread } = item;
+    if (!keepOpen && activeId === thread.id) {
+      setActiveId(null);
+      return;
+    }
+    setActiveId(thread.id);
+    setEditingId(null);
+    const onPage = item.status === "pinned" || item.status === "drifted";
+    const target = thread.url || thread.route;
+    const legacyHere = thread.url === thread.route && thread.route === route;
+    if (target === pageHref() || onPage && legacyHere)
+      return;
+    if (navigate) {
+      arrival.current = { id: thread.id, until: Date.now() + 6e3 };
+      navigate(target);
+      return;
+    }
+    window.location.assign(linkWith(target, "cs-thread", thread.id));
+  }, [activeId, navigate, route]);
   if (!mounted || phase !== "ready" || !session)
     return null;
   const memberName = member ? readJwt(member)?.name ?? name : "";
   const host = portal ?? document.body;
   const inside = host !== document.body;
   const peek = peekId ? placed.find((item) => item.thread.id === peekId && item.top != null) : void 0;
+  const canPost = Boolean(body.trim() || draftFiles.ids.length || settings?.fields.enabled && hasFieldValues(draftDetails));
+  const changeSettings = (next) => {
+    if (!member)
+      return;
+    const previous = settings;
+    setSettings(next);
+    setError("");
+    saveSettings(session, member, next).then(setSettings).catch((caught) => {
+      setSettings(previous);
+      setError(caught instanceof Error ? caught.message : "Couldn\u2019t save.");
+    });
+  };
   const lock = () => {
     localStorage.removeItem(storageKey(session));
     setMember(null);
@@ -3173,22 +3559,23 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
     setDraft(null);
     setSurface("unlock");
   };
-  const bar = _jsx4("div", { className: "cs-bar cs-hit", "data-cs-ui": "bar", role: "toolbar", "aria-label": "Comments toolbar", children: !member ? _jsxs4("button", { className: "cs-bar-lock", "data-cs-ui": "launcher", type: "button", "aria-label": "Comments", onClick: () => {
+  const bar = _jsx6("div", { className: "cs-bar cs-hit", "data-cs-ui": "bar", role: "toolbar", "aria-label": "Comments toolbar", children: !member ? _jsxs6("button", { className: "cs-bar-lock", "data-cs-ui": "launcher", type: "button", "aria-label": "Comments", onClick: () => {
     setError("");
     setSurface(surface === "unlock" ? "none" : "unlock");
-  }, children: [_jsx4(Lock, {}), _jsx4("span", { children: "Comments" })] }) : _jsxs4(_Fragment2, { children: [_jsx4("button", { className: mode === "select" ? "cs-tool is-on is-accent" : "cs-tool", "data-cs-ui": "comment-mode", "data-tip": "Comment  C", type: "button", "aria-label": "Add comment", "aria-pressed": mode === "select", onClick: startComment, children: _jsx4(AddComment, {}) }), _jsxs4("button", { className: surface === "inbox" ? "cs-tool is-on" : "cs-tool", "data-cs-ui": "launcher", "data-tip": "Comments  I", type: "button", "aria-label": "Comments", "aria-expanded": surface === "inbox", onClick: () => {
+  }, children: [_jsx6(Lock, {}), _jsx6("span", { children: "Comments" })] }) : _jsxs6(_Fragment3, { children: [_jsx6("button", { className: mode === "select" ? "cs-tool is-on is-accent" : "cs-tool", "data-cs-ui": "comment-mode", "data-tip": "Comment  C", type: "button", "aria-label": "Add comment", "aria-pressed": mode === "select", onClick: startComment, children: _jsx6(AddComment, {}) }), _jsxs6("button", { className: surface === "inbox" ? "cs-tool is-on" : "cs-tool", "data-cs-ui": "launcher", "data-tip": "Comments  I", type: "button", "aria-label": "Comments", "aria-expanded": surface === "inbox", onClick: () => {
     setError("");
     setMode("browse");
+    setView(prefs.view ?? "list");
     setSurface(surface === "inbox" ? "none" : "inbox");
-  }, children: [_jsx4(Inbox, {}), counts.page > 0 ? _jsx4("span", { className: "cs-badge", children: counts.page }) : null] }), _jsx4("button", { className: pinsHidden ? "cs-tool is-on" : "cs-tool", "data-cs-ui": "pins-toggle", "data-tip": pinsHidden ? "Show pins  H" : "Hide pins  H", type: "button", "aria-label": pinsHidden ? "Show pins" : "Hide pins", "aria-pressed": pinsHidden, onClick: togglePins, children: pinsHidden ? _jsx4(EyeOff, {}) : _jsx4(Eye, {}) }), _jsx4("span", { className: "cs-divider" }), _jsx4("button", { className: surface === "menu" ? "cs-tool cs-me is-on" : "cs-tool cs-me", "data-cs-ui": "menu-button", "data-tip": memberName, type: "button", "aria-label": "You", "aria-expanded": surface === "menu", onClick: () => {
+  }, children: [_jsx6(Inbox, {}), counts.page > 0 ? _jsx6("span", { className: "cs-badge", children: counts.page }) : null] }), _jsx6("button", { className: pinsHidden ? "cs-tool is-on" : "cs-tool", "data-cs-ui": "pins-toggle", "data-tip": pinsHidden ? "Show pins  H" : "Hide pins  H", type: "button", "aria-label": pinsHidden ? "Show pins" : "Hide pins", "aria-pressed": pinsHidden, onClick: togglePins, children: pinsHidden ? _jsx6(EyeOff, {}) : _jsx6(Eye, {}) }), _jsx6("span", { className: "cs-divider" }), _jsx6("button", { className: surface === "menu" ? "cs-tool cs-me is-on" : "cs-tool cs-me", "data-cs-ui": "menu-button", "data-tip": memberName, type: "button", "aria-label": "You", "aria-expanded": surface === "menu", onClick: () => {
     setConfirmReset(false);
     setRenaming(null);
     if (surface !== "menu" && member) {
       getProfile(session, member).then(setProfile).catch(() => void 0);
     }
     setSurface(surface === "menu" ? "none" : "menu");
-  }, children: _jsx4(Avatar, { name: memberName, size: 24 }) })] }) });
-  const unlockCard = _jsxs4("section", { className: "cs-card cs-unlock cs-hit", "data-cs-ui": "panel", "aria-label": "Unlock comments", children: [_jsx4("div", { className: "cs-unlock-icon", children: _jsx4(Lock, { size: 18 }) }), _jsx4("h2", { children: "Comments" }), _jsx4("p", { className: "cs-sub", children: invite ? `${readJwt(invite)?.name ?? "A teammate"} invited you to comment. Add your name and email to join.` : "Enter the team passphrase to see and add comments." }), _jsxs4("form", { onSubmit: (event) => {
+  }, children: _jsx6(Avatar, { name: memberName, size: 24 }) })] }) });
+  const unlockCard = _jsxs6("section", { className: "cs-card cs-unlock cs-hit", "data-cs-ui": "panel", "aria-label": "Unlock comments", children: [_jsx6("div", { className: "cs-unlock-icon", children: _jsx6(Lock, { size: 18 }) }), _jsx6("h2", { children: "Comments" }), _jsx6("p", { className: "cs-sub", children: invite ? `${readJwt(invite)?.name ?? "A teammate"} invited you to comment. Add your name and email to join.` : "Enter the team passphrase to see and add comments." }), _jsxs6("form", { onSubmit: (event) => {
     event.preventDefault();
     setBusy(true);
     setError("");
@@ -3201,16 +3588,16 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       localStorage.setItem(storageKey(fresh), token);
       setMember(token);
       setPassphrase("");
-      setInvite(null);
+      dropInvite();
       setTab("page");
       setSurface("inbox");
     }).catch((caught) => {
       if (caught instanceof ApiError && caught.code === "invalid_invite")
-        setInvite(null);
+        dropInvite();
       setError(caught instanceof Error ? caught.message : "Couldn\u2019t unlock.");
     }).finally(() => setBusy(false));
-  }, children: [_jsxs4("label", { className: "cs-field", children: [_jsx4("span", { children: "Your name" }), _jsx4("input", { "data-cs-ui": "unlock-name", value: name, onChange: (event) => setName(event.target.value), autoComplete: "name", required: true })] }), invite ? null : _jsxs4("label", { className: "cs-field", children: [_jsx4("span", { children: "Passphrase" }), _jsx4("input", { "data-cs-ui": "unlock-passphrase", type: "password", value: passphrase, onChange: (event) => setPassphrase(event.target.value), autoComplete: "current-password", required: true })] }), _jsxs4("label", { className: "cs-field", children: [_jsx4("span", { children: "Email" }), _jsx4("input", { "data-cs-ui": "unlock-email", type: "email", value: email, onChange: (event) => setEmail(event.target.value), autoComplete: "email", required: true }), _jsx4("small", { children: "So teammates can @mention you." })] }), error ? _jsx4("p", { className: "cs-error", "data-cs-ui": "error", children: error }) : null, _jsx4("button", { className: "cs-button is-primary is-wide", "data-cs-ui": "unlock-submit", type: "submit", disabled: busy, children: busy ? "Unlocking\u2026" : invite ? "Join" : "Unlock" })] })] });
-  const menuCard = _jsx4("section", { className: "cs-card cs-menu cs-hit", "data-cs-ui": "menu", "aria-label": "Your comment settings", children: confirmReset ? _jsxs4("div", { className: "cs-confirm", "data-cs-ui": "reset-confirm", children: [_jsx4("h2", { children: "Reset on this device?" }), _jsx4("p", { className: "cs-sub", children: "You\u2019ll be signed out and your name and preferences are cleared. Comments aren\u2019t affected." }), _jsxs4("div", { className: "cs-row-end", children: [_jsx4("button", { className: "cs-button", type: "button", onClick: () => setConfirmReset(false), children: "Cancel" }), _jsx4("button", { className: "cs-button is-danger", "data-cs-ui": "reset-submit", type: "button", onClick: reset, children: "Reset" })] })] }) : _jsxs4(_Fragment2, { children: [_jsxs4("div", { className: "cs-me-row", children: [_jsx4(Avatar, { name: renaming ?? memberName, size: 36 }), renaming != null ? _jsxs4("form", { className: "cs-rename", onSubmit: (event) => {
+  }, children: [_jsxs6("label", { className: "cs-field", children: [_jsx6("span", { children: "Your name" }), _jsx6("input", { "data-cs-ui": "unlock-name", value: name, onChange: (event) => setName(event.target.value), autoComplete: "name", required: true })] }), invite ? null : _jsxs6("label", { className: "cs-field", children: [_jsx6("span", { children: "Passphrase" }), _jsx6("input", { "data-cs-ui": "unlock-passphrase", type: "password", value: passphrase, onChange: (event) => setPassphrase(event.target.value), autoComplete: "current-password", required: true })] }), _jsxs6("label", { className: "cs-field", children: [_jsx6("span", { children: "Email" }), _jsx6("input", { "data-cs-ui": "unlock-email", type: "email", value: email, onChange: (event) => setEmail(event.target.value), autoComplete: "email", required: true }), _jsx6("small", { children: "So teammates can @mention you." })] }), error ? _jsx6("p", { className: "cs-error", "data-cs-ui": "error", children: error }) : null, _jsx6("button", { className: "cs-button is-primary is-wide", "data-cs-ui": "unlock-submit", type: "submit", disabled: busy, children: busy ? "Unlocking\u2026" : invite ? "Join" : "Unlock" })] })] });
+  const menuCard = _jsx6("section", { className: "cs-card cs-menu cs-hit", "data-cs-ui": "menu", "aria-label": "Your comment settings", children: confirmReset ? _jsxs6("div", { className: "cs-confirm", "data-cs-ui": "reset-confirm", children: [_jsx6("h2", { children: "Reset on this device?" }), _jsx6("p", { className: "cs-sub", children: "You\u2019ll be signed out and your name and preferences are cleared. Comments aren\u2019t affected." }), _jsxs6("div", { className: "cs-row-end", children: [_jsx6("button", { className: "cs-button", type: "button", onClick: () => setConfirmReset(false), children: "Cancel" }), _jsx6("button", { className: "cs-button is-danger", "data-cs-ui": "reset-submit", type: "button", onClick: reset, children: "Reset" })] })] }) : _jsxs6(_Fragment3, { children: [_jsxs6("div", { className: "cs-me-row", children: [_jsx6(Avatar, { name: renaming ?? memberName, size: 36 }), renaming != null ? _jsxs6("form", { className: "cs-rename", onSubmit: (event) => {
     event.preventDefault();
     const next = renaming.trim();
     if (!next || next === memberName || !member) {
@@ -3226,15 +3613,15 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       setRenaming(null);
       say("Name updated");
     }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t rename.")).finally(() => setBusy(false));
-  }, children: [_jsx4("input", { "data-cs-ui": "rename-input", "aria-label": "Your name", value: renaming, maxLength: 40, autoFocus: true, onChange: (event) => setRenaming(event.target.value), onKeyDown: (event) => {
+  }, children: [_jsx6("input", { "data-cs-ui": "rename-input", "aria-label": "Your name", value: renaming, maxLength: 40, autoFocus: true, onChange: (event) => setRenaming(event.target.value), onKeyDown: (event) => {
     if (event.key === "Escape") {
       event.preventDefault();
       setRenaming(null);
     }
-  } }), _jsx4("button", { className: "cs-icon-button", type: "submit", "aria-label": "Save name", disabled: busy, children: _jsx4(Check, {}) })] }) : _jsxs4("div", { className: "cs-me-name", children: [_jsxs4("span", { className: "cs-me-lines", children: [_jsx4("strong", { children: memberName }), _jsx4("small", { children: profile?.email ?? readJwt(member ?? "")?.email ?? "" })] }), _jsx4("button", { className: "cs-icon-button", "data-cs-ui": "rename", type: "button", "aria-label": "Change name", onClick: () => {
+  } }), _jsx6("button", { className: "cs-icon-button", type: "submit", "aria-label": "Save name", disabled: busy, children: _jsx6(Check, {}) })] }) : _jsxs6("div", { className: "cs-me-name", children: [_jsxs6("span", { className: "cs-me-lines", children: [_jsx6("strong", { children: memberName }), _jsx6("small", { children: profile?.email ?? readJwt(member ?? "")?.email ?? "" })] }), _jsx6("button", { className: "cs-icon-button", "data-cs-ui": "rename", type: "button", "aria-label": "Change name", onClick: () => {
     setError("");
     setRenaming(memberName);
-  }, children: _jsx4(Pencil, {}) })] })] }), error ? _jsx4("p", { className: "cs-error", children: error }) : null, _jsx4("div", { className: "cs-sep" }), _jsxs4("button", { className: "cs-item", type: "button", role: "switch", "aria-checked": !pinsHidden, onClick: togglePins, children: [_jsx4("span", { children: "Show pins" }), _jsx4("span", { className: pinsHidden ? "cs-switch" : "cs-switch is-on" })] }), _jsxs4("button", { className: "cs-item", "data-cs-ui": "mention-emails", type: "button", role: "switch", "aria-checked": profile?.mentionEmails ?? true, disabled: !profile, onClick: () => {
+  }, children: _jsx6(Pencil, {}) })] })] }), error ? _jsx6("p", { className: "cs-error", children: error }) : null, _jsx6("div", { className: "cs-sep" }), _jsxs6("button", { className: "cs-item", type: "button", role: "switch", "aria-checked": !pinsHidden, onClick: togglePins, children: [_jsx6("span", { children: "Show pins" }), _jsx6("span", { className: pinsHidden ? "cs-switch" : "cs-switch is-on" })] }), _jsxs6("button", { className: "cs-item", "data-cs-ui": "mention-emails", type: "button", role: "switch", "aria-checked": profile?.mentionEmails ?? true, disabled: !profile, onClick: () => {
     if (!member || !profile)
       return;
     updateProfile(session, member, { mentionEmails: !profile.mentionEmails }).then((updated) => {
@@ -3243,36 +3630,46 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       setProfile(updated);
       say(updated.mentionEmails ? "Mention emails on" : "Mention emails off");
     }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t update."));
-  }, children: [_jsx4("span", { children: "Email me when mentioned" }), _jsx4("span", { className: profile?.mentionEmails ?? true ? "cs-switch is-on" : "cs-switch" })] }), _jsxs4("div", { className: "cs-item is-static", children: [_jsx4("span", { children: "Position" }), _jsx4("span", { className: "cs-segment", role: "radiogroup", "aria-label": "Toolbar position", children: positions.map((option) => _jsx4("button", { type: "button", role: "radio", "aria-checked": barPosition === option.value, className: barPosition === option.value ? "is-on" : "", onClick: () => savePrefs({ ...prefs, position: option.value }), children: option.label }, option.value)) })] }), _jsx4("div", { className: "cs-sep" }), _jsx4("button", { className: "cs-item", "data-cs-ui": "invite", type: "button", disabled: busy, onClick: () => {
+  }, children: [_jsx6("span", { children: "Email me when mentioned" }), _jsx6("span", { className: profile?.mentionEmails ?? true ? "cs-switch is-on" : "cs-switch" })] }), _jsxs6("div", { className: "cs-item is-static", children: [_jsx6("span", { children: "Position" }), _jsx6("span", { className: "cs-segment", role: "radiogroup", "aria-label": "Toolbar position", children: positions.map((option) => _jsx6("button", { type: "button", role: "radio", "aria-checked": barPosition === option.value, className: barPosition === option.value ? "is-on" : "", onClick: () => savePrefs({ ...prefs, position: option.value }), children: option.label }, option.value)) })] }), _jsxs6("button", { className: "cs-item", "data-cs-ui": "settings-open", type: "button", onClick: () => {
+    setError("");
+    setSurface("settings");
+  }, children: [_jsx6("span", { children: "Comment fields" }), _jsx6("span", { className: "cs-hint", children: detailsEnabled(settings) ? "On" : "Off" })] }), _jsx6("div", { className: "cs-sep" }), _jsx6("button", { className: "cs-item", "data-cs-ui": "invite", type: "button", disabled: busy, onClick: () => {
     if (!member)
       return;
     setBusy(true);
     createInvite(session, member).then(({ invite: code }) => {
-      const url = new URL(window.location.href);
-      url.search = "";
-      url.hash = "";
-      url.searchParams.set("cs-invite", code);
-      const link = url.toString();
+      const link = linkWith(pageHref(), "cs-invite", code);
       setInviteLink(link);
       return navigator.clipboard.writeText(link).then(() => say("Invite link copied")).catch(() => say("Invite link ready"));
     }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t create an invite.")).finally(() => setBusy(false));
-  }, children: _jsx4("span", { children: "Invite someone" }) }), inviteLink ? _jsxs4("div", { className: "cs-invite", children: [_jsx4("input", { "data-cs-ui": "invite-link", "aria-label": "Invite link", readOnly: true, value: inviteLink, onFocus: (event) => event.currentTarget.select() }), _jsx4("p", { className: "cs-hint", children: "Anyone with this link can join for 7 days. Changing the passphrase cancels it." })] }) : null, _jsx4("button", { className: "cs-item", "data-cs-ui": "lock", type: "button", onClick: lock, children: _jsx4("span", { children: "Lock" }) }), _jsx4("button", { className: "cs-item is-danger", "data-cs-ui": "reset", type: "button", onClick: () => setConfirmReset(true), children: _jsx4("span", { children: "Reset on this device\u2026" }) }), _jsx4("p", { className: "cs-hint", children: "C comment \xB7 I list \xB7 H pins" })] }) });
-  const inbox = _jsxs4("section", { className: "cs-card cs-sheet cs-hit", "data-cs-ui": "panel", "aria-label": "Comments", children: [_jsxs4("header", { className: "cs-sheet-head", children: [_jsx4("h2", { children: "Comments" }), _jsx4("button", { className: "cs-icon-button", type: "button", "aria-label": "Close comments", onClick: () => setSurface("none"), children: _jsx4(Close, {}) })] }), _jsx4("div", { className: "cs-tabs", role: "tablist", children: [
+  }, children: _jsx6("span", { children: "Invite someone" }) }), inviteLink ? _jsxs6("div", { className: "cs-invite", children: [_jsx6("input", { "data-cs-ui": "invite-link", "aria-label": "Invite link", readOnly: true, value: inviteLink, onFocus: (event) => event.currentTarget.select() }), _jsx6("p", { className: "cs-hint", children: "Anyone with this link can join for 7 days. Changing the passphrase cancels it." })] }) : null, _jsx6("button", { className: "cs-item", "data-cs-ui": "lock", type: "button", onClick: lock, children: _jsx6("span", { children: "Lock" }) }), _jsx6("button", { className: "cs-item is-danger", "data-cs-ui": "reset", type: "button", onClick: () => setConfirmReset(true), children: _jsx6("span", { children: "Reset on this device\u2026" }) }), _jsx6("p", { className: "cs-hint", children: "C comment \xB7 I list \xB7 H pins" })] }) });
+  const tabsBar = _jsx6("div", { className: "cs-tabs", role: "tablist", children: [
     ["page", "This page", counts.page, "scope-page"],
     ["all", "All pages", counts.all, "scope-all"],
     ["resolved", "Resolved", counts.resolved, "scope-resolved"]
-  ].map(([value, label, count, hook]) => _jsxs4("button", { type: "button", role: "tab", "aria-selected": tab === value, "data-cs-ui": hook, className: tab === value ? "is-on" : "", onClick: () => setTab(value), children: [label, count > 0 ? _jsx4("span", { className: "cs-count", children: count }) : null] }, value)) }), error ? _jsx4("p", { className: "cs-error cs-pad", "data-cs-ui": "error", children: error }) : null, _jsxs4("div", { className: "cs-list", children: [listed.length === 0 ? _jsxs4("div", { className: "cs-empty", children: [_jsx4("p", { children: tab === "resolved" ? "Nothing resolved yet." : tab === "page" ? "No comments on this page." : "No open comments." }), tab !== "resolved" ? _jsxs4("button", { className: "cs-button", type: "button", onClick: startComment, children: [_jsx4(AddComment, {}), " Add a comment"] }) : null] }) : null, groups.map((group) => _jsxs4("div", { children: [group.route ? _jsx4("div", { className: "cs-group", children: group.route === route ? "This page" : group.route }) : null, group.items.map((item) => {
+  ].map(([value, label, count, hook]) => _jsxs6("button", { type: "button", role: "tab", "aria-selected": tab === value, "data-cs-ui": hook, className: tab === value ? "is-on" : "", onClick: () => setTab(value), children: [label, count > 0 ? _jsx6("span", { className: "cs-count", children: count }) : null] }, value)) });
+  const setViewPref = (next) => {
+    setView(next);
+    savePrefs({ ...prefs, view: next });
+  };
+  const table = _jsx6(CommentTable, { rows: listed, route, activeId, tabs: tabsBar, onList: () => setViewPref("list"), onClose: () => setSurface("none"), onSelect: (row) => {
+    setView("list");
+    const item = placed.find((candidate) => candidate.thread.id === row.thread.id);
+    if (item)
+      select(item, true);
+  } });
+  const inbox = _jsxs6("section", { className: "cs-card cs-sheet cs-hit", "data-cs-ui": "panel", "aria-label": "Comments", children: [_jsxs6("header", { className: "cs-sheet-head", children: [_jsx6("h2", { children: "Comments" }), _jsx6("button", { className: "cs-icon-button cs-push", "data-cs-ui": "table-view", type: "button", "aria-label": "Table view", onClick: () => setViewPref("table"), children: _jsx6(Table, {}) }), _jsx6("button", { className: "cs-icon-button", type: "button", "aria-label": "Close comments", onClick: () => setSurface("none"), children: _jsx6(Close, {}) })] }), tabsBar, error ? _jsx6("p", { className: "cs-error cs-pad", "data-cs-ui": "error", children: error }) : null, _jsxs6("div", { className: "cs-list", children: [listed.length === 0 ? _jsxs6("div", { className: "cs-empty", children: [_jsx6("p", { children: tab === "resolved" ? "Nothing resolved yet." : tab === "page" ? "No comments on this page." : "No open comments." }), tab !== "resolved" ? _jsxs6("button", { className: "cs-button", type: "button", onClick: startComment, children: [_jsx6(AddComment, {}), " Add a comment"] }) : null] }) : null, groups.map((group) => _jsxs6("div", { children: [group.route ? _jsx6("div", { className: "cs-group", children: group.route === route ? "This page" : group.route }) : null, group.items.map((item) => {
     const { thread } = item;
     const expanded = activeId === thread.id;
     const first = thread.messages[0];
     const note = statusNote(item.status, thread.anchor, thread.route === route);
     const onPage = item.status === "pinned" || item.status === "drifted";
-    return _jsxs4("article", { className: expanded ? "cs-thread is-open" : "cs-thread", "data-cs-ui": "thread", "data-thread-id": thread.id, "data-cs-status": item.status, children: [_jsxs4("div", { className: "cs-thread-main", role: "button", tabIndex: 0, "aria-expanded": expanded, "aria-label": `${thread.createdBy}: ${first?.body ?? ""}`, onClick: () => setActiveId(expanded ? null : thread.id), onKeyDown: (event) => {
+    return _jsxs6("article", { className: expanded ? "cs-thread is-open" : "cs-thread", "data-cs-ui": "thread", "data-thread-id": thread.id, "data-cs-status": item.status, children: [_jsxs6("div", { className: "cs-thread-main", role: "button", tabIndex: 0, "aria-expanded": expanded, "aria-label": `${thread.createdBy}: ${first?.body ?? ""}`, onClick: () => select(item), onKeyDown: (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
-        setActiveId(expanded ? null : thread.id);
+        select(item);
       }
-    }, onMouseEnter: () => setPeekId(null), children: [_jsx4(Avatar, { name: thread.createdBy }), _jsxs4("div", { className: "cs-thread-body", children: [_jsxs4("div", { className: "cs-meta", children: [_jsx4("strong", { children: thread.createdBy }), _jsx4("time", { dateTime: thread.createdAt, children: ago(thread.createdAt) })] }), _jsx4("p", { className: "cs-text", children: _jsx4(MessageText, { body: first?.body ?? "", mentions: first?.mentions }) }), _jsx4(MessageAttachments, { attachments: first?.attachments }), first && deliveryText(deliveries[first.id]) ? _jsx4("div", { className: "cs-delivery", "data-cs-ui": "delivery", children: deliveryText(deliveries[first.id]) }) : null, _jsxs4("div", { className: "cs-target", children: [_jsx4("span", { title: thread.anchor.component?.file ?? void 0, children: targetName(thread.anchor) }), note ? _jsx4("span", { className: `cs-note is-${note.tone}`, children: note.text }) : null] }), !expanded && thread.messages.length > 1 ? _jsxs4("div", { className: "cs-replies", children: [thread.messages.length - 1, " ", thread.messages.length === 2 ? "reply" : "replies"] }) : null] })] }), expanded ? _jsxs4("div", { className: "cs-thread-more", children: [thread.messages.slice(1).map((message) => _jsxs4("div", { className: "cs-message", children: [_jsx4(Avatar, { name: message.author, size: 20 }), _jsxs4("div", { children: [_jsxs4("div", { className: "cs-meta", children: [_jsx4("strong", { children: message.author }), _jsx4("time", { dateTime: message.createdAt, children: ago(message.createdAt) })] }), _jsx4("p", { className: "cs-text", children: _jsx4(MessageText, { body: message.body, mentions: message.mentions }) }), _jsx4(MessageAttachments, { attachments: message.attachments }), deliveryText(deliveries[message.id]) ? _jsx4("div", { className: "cs-delivery", "data-cs-ui": "delivery", children: deliveryText(deliveries[message.id]) }) : null] })] }, message.id)), _jsxs4("form", { className: "cs-reply", onSubmit: async (event) => {
+    }, onMouseEnter: () => setPeekId(null), children: [_jsx6(Avatar, { name: thread.createdBy }), _jsxs6("div", { className: "cs-thread-body", children: [_jsxs6("div", { className: "cs-meta", children: [_jsx6("strong", { children: thread.createdBy }), _jsx6("time", { dateTime: thread.createdAt, children: ago(thread.createdAt) }), _jsx6(RoleBadge, { role: thread.role })] }), first?.body ? _jsx6("p", { className: "cs-text", children: _jsx6(MessageText, { body: first.body, mentions: first.mentions }) }) : null, _jsx6(FieldValues, { fields: thread.fields, clamp: !expanded }), _jsx6(MessageAttachments, { attachments: first?.attachments }), first && deliveryText(deliveries[first.id]) ? _jsx6("div", { className: "cs-delivery", "data-cs-ui": "delivery", children: deliveryText(deliveries[first.id]) }) : null, _jsxs6("div", { className: "cs-target", children: [_jsx6("span", { title: thread.anchor.component?.file ?? void 0, children: targetName(thread.anchor) }), note ? _jsx6("span", { className: `cs-note is-${note.tone}`, children: note.text }) : null] }), !expanded && thread.messages.length > 1 ? _jsxs6("div", { className: "cs-replies", children: [thread.messages.length - 1, " ", thread.messages.length === 2 ? "reply" : "replies"] }) : null] })] }), expanded ? _jsxs6("div", { className: "cs-thread-more", children: [editingId === thread.id && settings ? _jsx6(DetailsEditor, { settings, thread, onClose: () => setEditingId(null), onSave: (patch) => updateThread(session, member, thread.id, patch).then(() => refresh()).then(() => say("Details saved")).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t save.")) }) : null, thread.messages.slice(1).map((message) => _jsxs6("div", { className: "cs-message", children: [_jsx6(Avatar, { name: message.author, size: 20 }), _jsxs6("div", { children: [_jsxs6("div", { className: "cs-meta", children: [_jsx6("strong", { children: message.author }), _jsx6("time", { dateTime: message.createdAt, children: ago(message.createdAt) })] }), _jsx6("p", { className: "cs-text", children: _jsx6(MessageText, { body: message.body, mentions: message.mentions }) }), _jsx6(MessageAttachments, { attachments: message.attachments }), deliveryText(deliveries[message.id]) ? _jsx6("div", { className: "cs-delivery", "data-cs-ui": "delivery", children: deliveryText(deliveries[message.id]) }) : null] })] }, message.id)), _jsxs6("form", { className: "cs-reply", onSubmit: async (event) => {
       event.preventDefault();
       if (!member || !reply.trim() && !replyFiles.ids.length || replyFiles.uploading)
         return;
@@ -3298,7 +3695,7 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
         }
         await refresh();
       }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t reply.")).finally(() => setBusy(false));
-    }, children: [_jsx4(MentionTextarea, { "data-cs-ui": "reply-body", "aria-label": "Reply", placeholder: "Reply\u2026 (@ to mention)", rows: 1, value: reply, onValueChange: setReply, members, selfEmail: readJwt(member ?? "")?.email, onMention: (person) => {
+    }, children: [_jsx6(MentionTextarea, { "data-cs-ui": "reply-body", "aria-label": "Reply", placeholder: "Reply\u2026 (@ to mention)", rows: 1, value: reply, onValueChange: setReply, members, selfEmail: readJwt(member ?? "")?.email, onMention: (person) => {
       replyPicked.current.set(person.id, person);
       const element = thread.route === route ? resolveInDocument(thread.anchor, route).element : null;
       if (element && !replyShot.current)
@@ -3309,25 +3706,25 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
         event.preventDefault();
         replyFiles.add(files);
       }
-    } }), _jsx4(AttachButtons, { onFiles: replyFiles.add, capturing, onSnapshot: () => snapshot(thread.route === route ? resolveInDocument(thread.anchor, route).element : null, replyFiles.add) }), _jsx4("button", { className: "cs-send", "data-cs-ui": "reply-submit", type: "submit", "aria-label": "Post reply", disabled: busy || replyFiles.uploading || !reply.trim() && !replyFiles.ids.length, children: _jsx4(Send, {}) })] }), _jsx4(AttachmentTray, { items: replyFiles.items, onRemove: replyFiles.remove }), _jsxs4("div", { className: "cs-actions", children: [_jsxs4("button", { className: "cs-button", "data-cs-ui": "resolve", type: "button", onClick: () => {
+    } }), _jsx6(AttachButtons, { onFiles: replyFiles.add, capturing, onSnapshot: () => snapshot(thread.route === route ? resolveInDocument(thread.anchor, route).element : null, replyFiles.add) }), _jsx6("button", { className: "cs-send", "data-cs-ui": "reply-submit", type: "submit", "aria-label": "Post reply", disabled: busy || replyFiles.uploading || !reply.trim() && !replyFiles.ids.length, children: _jsx6(Send, {}) })] }), _jsx6(AttachmentTray, { items: replyFiles.items, onRemove: replyFiles.remove }), _jsxs6("div", { className: "cs-actions", children: [_jsxs6("button", { className: "cs-button", "data-cs-ui": "resolve", type: "button", onClick: () => {
       if (!member)
         return;
       const next = thread.status === "resolved" ? "open" : "resolved";
       updateThread(session, member, thread.id, { status: next }).then(() => refresh()).then(() => say(next === "resolved" ? "Resolved" : "Reopened")).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t update."));
-    }, children: [thread.status === "resolved" ? _jsx4(Undo, {}) : _jsx4(Check, {}), thread.status === "resolved" ? "Reopen" : "Resolve"] }), onPage && thread.status === "open" ? _jsxs4("button", { className: "cs-button", type: "button", onClick: () => showOnPage(thread), children: [_jsx4(Target, {}), " Show"] }) : null, !onPage && thread.status === "open" && thread.route === route ? _jsxs4("button", { className: "cs-button", "data-cs-ui": "reattach", type: "button", onClick: () => {
+    }, children: [thread.status === "resolved" ? _jsx6(Undo, {}) : _jsx6(Check, {}), thread.status === "resolved" ? "Reopen" : "Resolve"] }), onPage && thread.status === "open" ? _jsxs6("button", { className: "cs-button", type: "button", onClick: () => showOnPage(thread), children: [_jsx6(Target, {}), " Show"] }) : null, detailsEnabled(settings) && editingId !== thread.id ? _jsxs6("button", { className: "cs-button", "data-cs-ui": "details-edit", type: "button", onClick: () => setEditingId(thread.id), children: [_jsx6(Pencil, {}), " Details"] }) : null, !onPage && thread.status === "open" && thread.route === route ? _jsxs6("button", { className: "cs-button", "data-cs-ui": "reattach", type: "button", onClick: () => {
       setReattachId(thread.id);
       setMode("reattach");
       setSurface("none");
-    }, children: [_jsx4(Relink, {}), " Reattach"] }) : null] })] }) : null] }, thread.id);
+    }, children: [_jsx6(Relink, {}), " Reattach"] }) : null] })] }) : null] }, thread.id);
   })] }, group.route ?? "all"))] })] });
-  const ui = _jsxs4("div", { id: "cs-root", className: [
+  const ui = _jsxs6("div", { id: "cs-root", className: [
     inside ? "cs-inside" : "cs-fixed",
     `cs-at-${barPosition.replace("bottom-", "")}`,
     theme === "dark" || theme === "system" && systemDark ? "cs-dark" : ""
-  ].join(" "), children: [highlight ? _jsxs4(_Fragment2, { children: [_jsx4("div", { className: "cs-outline", style: { top: highlight.top, left: highlight.left, width: highlight.width, height: highlight.height } }), _jsx4("div", { className: "cs-outline-label", style: { top: Math.max(4, highlight.top - 26), left: highlight.left }, children: highlight.label })] }) : null, flash ? _jsx4("div", { className: "cs-outline is-flash", style: { top: flash.top, left: flash.left, width: flash.width, height: flash.height } }) : null, mode !== "browse" ? _jsxs4("div", { className: "cs-banner cs-hit", "data-cs-ui": "mode", children: [_jsx4(Cursor, {}), _jsx4("span", { children: mode === "reattach" ? "Click the element this comment belongs to" : "Click anything to comment" }), _jsx4("button", { type: "button", onClick: () => {
+  ].join(" "), children: [highlight ? _jsxs6(_Fragment3, { children: [_jsx6("div", { className: "cs-outline", style: { top: highlight.top, left: highlight.left, width: highlight.width, height: highlight.height } }), _jsx6("div", { className: "cs-outline-label", style: { top: Math.max(4, highlight.top - 26), left: highlight.left }, children: highlight.label })] }) : null, flash ? _jsx6("div", { className: "cs-outline is-flash", style: { top: flash.top, left: flash.left, width: flash.width, height: flash.height } }) : null, mode !== "browse" ? _jsxs6("div", { className: "cs-banner cs-hit", "data-cs-ui": "mode", children: [_jsx6(Cursor, {}), _jsx6("span", { children: mode === "reattach" ? "Click the element this comment belongs to" : "Click anything to comment" }), _jsx6("button", { type: "button", onClick: () => {
     setMode("browse");
     setReattachId(null);
-  }, children: "Cancel" })] }) : null, pinsHidden ? null : placed.map((item) => item.top == null || item.left == null || item.status !== "pinned" && item.status !== "drifted" ? null : _jsxs4("button", { type: "button", className: [
+  }, children: "Cancel" })] }) : null, pinsHidden ? null : placed.map((item) => item.top == null || item.left == null || item.status !== "pinned" && item.status !== "drifted" ? null : _jsxs6("button", { type: "button", className: [
     "cs-pin",
     item.status === "drifted" ? "is-drifted" : "",
     activeId === item.thread.id && surface === "inbox" ? "is-active" : ""
@@ -3336,9 +3733,9 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
     setTab("page");
     setActiveId(item.thread.id);
     setSurface("inbox");
-  }, children: [_jsx4(Avatar, { name: item.thread.createdBy, size: 22 }), item.thread.messages.length > 1 ? _jsx4("span", { className: "cs-pin-count", children: item.thread.messages.length }) : null] }, item.thread.id)), peek && !pinsHidden && peek.top != null && peek.left != null ? _jsxs4("div", { className: "cs-peek", style: { top: peek.top + 18, left: Math.max(8, peek.left - 12) }, children: [_jsxs4("div", { className: "cs-meta", children: [_jsx4(Avatar, { name: peek.thread.createdBy, size: 18 }), _jsx4("strong", { children: peek.thread.createdBy }), _jsx4("time", { children: ago(peek.thread.createdAt) })] }), _jsx4("p", { className: "cs-text", children: _jsx4(MessageText, { body: peek.thread.messages[0]?.body ?? "", mentions: peek.thread.messages[0]?.mentions }) }), peek.thread.messages.length > 1 ? _jsxs4("div", { className: "cs-replies", children: [peek.thread.messages.length - 1, " ", peek.thread.messages.length === 2 ? "reply" : "replies"] }) : null] }) : null, draft ? _jsxs4("form", { className: "cs-card cs-composer cs-hit", "data-cs-ui": "composer", style: { top: draft.top, left: draft.left }, onSubmit: async (event) => {
+  }, children: [_jsx6(Avatar, { name: item.thread.createdBy, size: 22 }), item.thread.messages.length > 1 ? _jsx6("span", { className: "cs-pin-count", children: item.thread.messages.length }) : null] }, item.thread.id)), peek && !pinsHidden && peek.top != null && peek.left != null ? _jsxs6("div", { className: "cs-peek", style: { top: peek.top + 18, left: Math.max(8, peek.left - 12) }, children: [_jsxs6("div", { className: "cs-meta", children: [_jsx6(Avatar, { name: peek.thread.createdBy, size: 18 }), _jsx6("strong", { children: peek.thread.createdBy }), _jsx6("time", { children: ago(peek.thread.createdAt) })] }), _jsx6("p", { className: "cs-text", children: _jsx6(MessageText, { body: peek.thread.messages[0]?.body ?? "", mentions: peek.thread.messages[0]?.mentions }) }), peek.thread.messages.length > 1 ? _jsxs6("div", { className: "cs-replies", children: [peek.thread.messages.length - 1, " ", peek.thread.messages.length === 2 ? "reply" : "replies"] }) : null] }) : null, draft ? _jsxs6("form", { className: "cs-card cs-composer cs-hit", "data-cs-ui": "composer", style: { top: draft.top, left: draft.left }, onSubmit: async (event) => {
     event.preventDefault();
-    if (!member || !body.trim() && !draftFiles.ids.length || draftFiles.uploading)
+    if (!member || !canPost || draftFiles.uploading)
       return;
     setBusy(true);
     const picked = mentionsIn(body, draftPicked.current);
@@ -3346,10 +3743,13 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
     createThread(session, member, draft.anchor, body, {
       mentions: picked.map((person) => person.id),
       screenshot,
-      attachments: draftFiles.ids
+      attachments: draftFiles.ids,
+      url: pageHref(),
+      ...detailsPayload(settings, draftDetails)
     }).then(async ({ thread, delivery }) => {
       setDraft(null);
       setBody("");
+      setDraftDetails(noDetails);
       draftFiles.reset();
       setError("");
       draftPicked.current = /* @__PURE__ */ new Map();
@@ -3367,7 +3767,7 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       setSurface("inbox");
       await refresh();
     }).catch((caught) => setError(caught instanceof Error ? caught.message : "Couldn\u2019t post.")).finally(() => setBusy(false));
-  }, children: [_jsxs4("div", { className: "cs-composer-target", children: [_jsx4(Target, {}), _jsx4("span", { className: "cs-composer-name", children: targetName(draft.anchor) }), draft.anchor.component?.file ? _jsx4("code", { children: draft.anchor.component.file }) : null, _jsx4("button", { className: "cs-icon-button", type: "button", "aria-label": "Discard", onClick: () => setDraft(null), children: _jsx4(Close, {}) })] }), _jsxs4("div", { className: "cs-composer-body", children: [_jsx4(Avatar, { name: memberName, size: 24 }), _jsx4(MentionTextarea, { "data-cs-ui": "composer-body", "aria-label": "Comment", placeholder: "Add a comment\u2026 (@ to mention)", value: body, autoFocus: true, onValueChange: setBody, members, selfEmail: readJwt(member ?? "")?.email, onMention: (person) => {
+  }, children: [_jsxs6("div", { className: "cs-composer-target", children: [_jsx6(Target, {}), _jsx6("span", { className: "cs-composer-name", children: targetName(draft.anchor) }), draft.anchor.component?.file ? _jsx6("code", { children: draft.anchor.component.file }) : null, _jsx6("button", { className: "cs-icon-button", type: "button", "aria-label": "Discard", onClick: () => setDraft(null), children: _jsx6(Close, {}) })] }), _jsxs6("div", { className: "cs-composer-body", children: [_jsx6(Avatar, { name: memberName, size: 24 }), _jsx6(MentionTextarea, { "data-cs-ui": "composer-body", "aria-label": "Comment", placeholder: "Add a comment\u2026 (@ to mention)", value: body, autoFocus: true, onValueChange: setBody, members, selfEmail: readJwt(member ?? "")?.email, onMention: (person) => {
     draftPicked.current.set(person.id, person);
     if (!draftShot.current)
       draftShot.current = captureAround(draft.element);
@@ -3377,7 +3777,7 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       event.preventDefault();
       draftFiles.add(files);
     }
-  } })] }), _jsx4(AttachmentTray, { items: draftFiles.items, onRemove: draftFiles.remove }), error ? _jsx4("p", { className: "cs-error cs-pad", children: error }) : null, _jsxs4("div", { className: "cs-composer-foot", children: [_jsx4(AttachButtons, { onFiles: draftFiles.add, capturing, onSnapshot: () => snapshot(draft.element, draftFiles.add) }), _jsx4("span", { className: "cs-hint", children: capturing ? "Capturing\u2026" : draftFiles.uploading ? "Uploading\u2026" : busy ? "Posting\u2026" : "\u2318\u21B5 to post" }), _jsx4("button", { className: "cs-send", "data-cs-ui": "composer-submit", type: "submit", "aria-label": "Post comment", disabled: busy || draftFiles.uploading || !body.trim() && !draftFiles.ids.length, children: _jsx4(Send, {}) })] })] }) : null, surface === "unlock" && !member ? unlockCard : null, surface === "menu" && member ? menuCard : null, surface === "inbox" && member ? inbox : null, toast ? _jsx4("div", { className: "cs-toast", role: "status", children: toast }) : null, bar] });
+  } })] }), _jsx6(DetailsInput, { settings, value: draftDetails, onChange: setDraftDetails, onKeyDown: submitOnCmdEnter }), _jsx6(AttachmentTray, { items: draftFiles.items, onRemove: draftFiles.remove }), error ? _jsx6("p", { className: "cs-error cs-pad", children: error }) : null, _jsxs6("div", { className: "cs-composer-foot", children: [_jsx6(AttachButtons, { onFiles: draftFiles.add, capturing, onSnapshot: () => snapshot(draft.element, draftFiles.add) }), _jsx6("span", { className: "cs-hint", children: capturing ? "Capturing\u2026" : draftFiles.uploading ? "Uploading\u2026" : busy ? "Posting\u2026" : "\u2318\u21B5 to post" }), _jsx6("button", { className: "cs-send", "data-cs-ui": "composer-submit", type: "submit", "aria-label": "Post comment", disabled: busy || draftFiles.uploading || !canPost, children: _jsx6(Send, {}) })] })] }) : null, surface === "unlock" && !member ? unlockCard : null, surface === "menu" && member ? menuCard : null, surface === "settings" && member ? _jsx6(SettingsPanel, { settings, onChange: changeSettings, onBack: () => setSurface("menu"), error }) : null, surface === "inbox" && member ? view === "table" ? table : inbox : null, toast ? _jsx6("div", { className: "cs-toast", role: "status", children: toast }) : null, bar] });
   return createPortal2(ui, host);
 }
 export {