@devaccel-labs/comment-service 0.5.2 → 0.6.0

package/dist/react.js

@@ -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 _jsx5, jsxs as _jsxs5, Fragment as _Fragment3 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState4 } 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,118 @@ 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" }) });
+
+// ../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 +655,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,7 +670,7 @@ 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));
@@ -633,26 +729,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 +762,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 +798,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 +824,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
@@ -2568,6 +2664,50 @@ 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; }
+
 /* 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; }
@@ -2690,6 +2830,12 @@ 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");
+  return `${url.pathname}${url.search}${url.hash}`;
+}
 function isTyping(target) {
   if (!(target instanceof HTMLElement))
     return false;
@@ -2702,51 +2848,57 @@ function submitOnCmdEnter(event) {
   }
 }
 async function loadSession(sessionPath) {
-  const response = await fetch(sessionPath, { headers: { accept: "application/json" }, cache: "no-store" });
+  const response = await fetch(sessionPath, {
+    headers: { accept: "application/json", "x-comment-service-origin": window.location.origin },
+    cache: "no-store"
+  });
   const payload = await response.json();
   if (!payload.enabled || !payload.apiUrl || !payload.project || !payload.environment || !payload.hostToken)
     return null;
   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 _jsx5("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] = useState4("boot");
+  const [session, setSession] = useState4(null);
+  const [member, setMember] = useState4(null);
+  const [threads, setThreads] = useState4([]);
+  const [route, setRoute] = useState4("/");
+  const [surface, setSurface] = useState4("none");
+  const [tab, setTab] = useState4("page");
+  const [mode, setMode] = useState4("browse");
+  const [reattachId, setReattachId] = useState4(null);
+  const [activeId, setActiveId] = useState4(null);
+  const [peekId, setPeekId] = useState4(null);
+  const [draft, setDraft] = useState4(null);
+  const [body, setBody] = useState4("");
+  const [reply, setReply] = useState4("");
+  const [name, setName] = useState4("");
+  const [passphrase, setPassphrase] = useState4("");
+  const [email, setEmail] = useState4("");
+  const [members, setMembers] = useState4([]);
+  const [profile, setProfile] = useState4(null);
+  const [deliveries, setDeliveries] = useState4({});
+  const [invite, setInvite] = useState4(null);
+  const [capturing, setCapturing] = useState4(false);
+  const [inviteLink, setInviteLink] = useState4(null);
+  const [renaming, setRenaming] = useState4(null);
+  const [confirmReset, setConfirmReset] = useState4(false);
+  const [error, setError] = useState4("");
+  const [toast, setToast] = useState4("");
+  const [busy, setBusy] = useState4(false);
+  const [prefs, setPrefs] = useState4({});
+  const [portal, setPortal] = useState4(null);
+  const [mounted, setMounted] = useState4(false);
+  const [highlight, setHighlight] = useState4(null);
+  const [flash, setFlash] = useState4(null);
+  const [placed, setPlaced] = useState4([]);
+  const [systemDark, setSystemDark] = useState4(false);
+  const [settings, setSettings] = useState4(null);
+  const [draftDetails, setDraftDetails] = useState4(noDetails);
+  const [editingId, setEditingId] = useState4(null);
   const threadsRef = useRef3(threads);
   threadsRef.current = threads;
   const modeRef = useRef3(mode);
@@ -2756,6 +2908,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;
@@ -2855,7 +3008,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)
@@ -2863,8 +3018,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));
@@ -3045,7 +3202,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");
@@ -3066,6 +3223,7 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       draftShot.current = null;
       draftFiles.reset();
       setBody("");
+      setDraftDetails(noDetails);
       setMode("browse");
       setError("");
     };
@@ -3138,13 +3296,63 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
     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) => {
+    const { thread } = item;
+    if (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;
+    }
+    const url = new URL(target, window.location.origin);
+    url.searchParams.set("cs-thread", thread.id);
+    window.location.assign(url.toString());
+  }, [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);
@@ -3170,22 +3378,22 @@ 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 = _jsx5("div", { className: "cs-bar cs-hit", "data-cs-ui": "bar", role: "toolbar", "aria-label": "Comments toolbar", children: !member ? _jsxs5("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: [_jsx5(Lock, {}), _jsx5("span", { children: "Comments" })] }) : _jsxs5(_Fragment3, { children: [_jsx5("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: _jsx5(AddComment, {}) }), _jsxs5("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");
     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: [_jsx5(Inbox, {}), counts.page > 0 ? _jsx5("span", { className: "cs-badge", children: counts.page }) : null] }), _jsx5("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 ? _jsx5(EyeOff, {}) : _jsx5(Eye, {}) }), _jsx5("span", { className: "cs-divider" }), _jsx5("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: _jsx5(Avatar, { name: memberName, size: 24 }) })] }) });
+  const unlockCard = _jsxs5("section", { className: "cs-card cs-unlock cs-hit", "data-cs-ui": "panel", "aria-label": "Unlock comments", children: [_jsx5("div", { className: "cs-unlock-icon", children: _jsx5(Lock, { size: 18 }) }), _jsx5("h2", { children: "Comments" }), _jsx5("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." }), _jsxs5("form", { onSubmit: (event) => {
     event.preventDefault();
     setBusy(true);
     setError("");
@@ -3206,8 +3414,8 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
         setInvite(null);
       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: [_jsxs5("label", { className: "cs-field", children: [_jsx5("span", { children: "Your name" }), _jsx5("input", { "data-cs-ui": "unlock-name", value: name, onChange: (event) => setName(event.target.value), autoComplete: "name", required: true })] }), invite ? null : _jsxs5("label", { className: "cs-field", children: [_jsx5("span", { children: "Passphrase" }), _jsx5("input", { "data-cs-ui": "unlock-passphrase", type: "password", value: passphrase, onChange: (event) => setPassphrase(event.target.value), autoComplete: "current-password", required: true })] }), _jsxs5("label", { className: "cs-field", children: [_jsx5("span", { children: "Email" }), _jsx5("input", { "data-cs-ui": "unlock-email", type: "email", value: email, onChange: (event) => setEmail(event.target.value), autoComplete: "email", required: true }), _jsx5("small", { children: "So teammates can @mention you." })] }), error ? _jsx5("p", { className: "cs-error", "data-cs-ui": "error", children: error }) : null, _jsx5("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 = _jsx5("section", { className: "cs-card cs-menu cs-hit", "data-cs-ui": "menu", "aria-label": "Your comment settings", children: confirmReset ? _jsxs5("div", { className: "cs-confirm", "data-cs-ui": "reset-confirm", children: [_jsx5("h2", { children: "Reset on this device?" }), _jsx5("p", { className: "cs-sub", children: "You\u2019ll be signed out and your name and preferences are cleared. Comments aren\u2019t affected." }), _jsxs5("div", { className: "cs-row-end", children: [_jsx5("button", { className: "cs-button", type: "button", onClick: () => setConfirmReset(false), children: "Cancel" }), _jsx5("button", { className: "cs-button is-danger", "data-cs-ui": "reset-submit", type: "button", onClick: reset, children: "Reset" })] })] }) : _jsxs5(_Fragment3, { children: [_jsxs5("div", { className: "cs-me-row", children: [_jsx5(Avatar, { name: renaming ?? memberName, size: 36 }), renaming != null ? _jsxs5("form", { className: "cs-rename", onSubmit: (event) => {
     event.preventDefault();
     const next = renaming.trim();
     if (!next || next === memberName || !member) {
@@ -3223,15 +3431,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: [_jsx5("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: () => {
+  } }), _jsx5("button", { className: "cs-icon-button", type: "submit", "aria-label": "Save name", disabled: busy, children: _jsx5(Check, {}) })] }) : _jsxs5("div", { className: "cs-me-name", children: [_jsxs5("span", { className: "cs-me-lines", children: [_jsx5("strong", { children: memberName }), _jsx5("small", { children: profile?.email ?? readJwt(member ?? "")?.email ?? "" })] }), _jsx5("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: _jsx5(Pencil, {}) })] })] }), error ? _jsx5("p", { className: "cs-error", children: error }) : null, _jsx5("div", { className: "cs-sep" }), _jsxs5("button", { className: "cs-item", type: "button", role: "switch", "aria-checked": !pinsHidden, onClick: togglePins, children: [_jsx5("span", { children: "Show pins" }), _jsx5("span", { className: pinsHidden ? "cs-switch" : "cs-switch is-on" })] }), _jsxs5("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) => {
@@ -3240,7 +3448,10 @@ 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: [_jsx5("span", { children: "Email me when mentioned" }), _jsx5("span", { className: profile?.mentionEmails ?? true ? "cs-switch is-on" : "cs-switch" })] }), _jsxs5("div", { className: "cs-item is-static", children: [_jsx5("span", { children: "Position" }), _jsx5("span", { className: "cs-segment", role: "radiogroup", "aria-label": "Toolbar position", children: positions.map((option) => _jsx5("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)) })] }), _jsxs5("button", { className: "cs-item", "data-cs-ui": "settings-open", type: "button", onClick: () => {
+    setError("");
+    setSurface("settings");
+  }, children: [_jsx5("span", { children: "Comment fields" }), _jsx5("span", { className: "cs-hint", children: detailsEnabled(settings) ? "On" : "Off" })] }), _jsx5("div", { className: "cs-sep" }), _jsx5("button", { className: "cs-item", "data-cs-ui": "invite", type: "button", disabled: busy, onClick: () => {
     if (!member)
       return;
     setBusy(true);
@@ -3253,23 +3464,23 @@ function CommentToolbar({ sessionPath = "/api/comment-service/session", pollMs =
       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: _jsx5("span", { children: "Invite someone" }) }), inviteLink ? _jsxs5("div", { className: "cs-invite", children: [_jsx5("input", { "data-cs-ui": "invite-link", "aria-label": "Invite link", readOnly: true, value: inviteLink, onFocus: (event) => event.currentTarget.select() }), _jsx5("p", { className: "cs-hint", children: "Anyone with this link can join for 7 days. Changing the passphrase cancels it." })] }) : null, _jsx5("button", { className: "cs-item", "data-cs-ui": "lock", type: "button", onClick: lock, children: _jsx5("span", { children: "Lock" }) }), _jsx5("button", { className: "cs-item is-danger", "data-cs-ui": "reset", type: "button", onClick: () => setConfirmReset(true), children: _jsx5("span", { children: "Reset on this device\u2026" }) }), _jsx5("p", { className: "cs-hint", children: "C comment \xB7 I list \xB7 H pins" })] }) });
+  const inbox = _jsxs5("section", { className: "cs-card cs-sheet cs-hit", "data-cs-ui": "panel", "aria-label": "Comments", children: [_jsxs5("header", { className: "cs-sheet-head", children: [_jsx5("h2", { children: "Comments" }), _jsx5("button", { className: "cs-icon-button", type: "button", "aria-label": "Close comments", onClick: () => setSurface("none"), children: _jsx5(Close, {}) })] }), _jsx5("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]) => _jsxs5("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 ? _jsx5("span", { className: "cs-count", children: count }) : null] }, value)) }), error ? _jsx5("p", { className: "cs-error cs-pad", "data-cs-ui": "error", children: error }) : null, _jsxs5("div", { className: "cs-list", children: [listed.length === 0 ? _jsxs5("div", { className: "cs-empty", children: [_jsx5("p", { children: tab === "resolved" ? "Nothing resolved yet." : tab === "page" ? "No comments on this page." : "No open comments." }), tab !== "resolved" ? _jsxs5("button", { className: "cs-button", type: "button", onClick: startComment, children: [_jsx5(AddComment, {}), " Add a comment"] }) : null] }) : null, groups.map((group) => _jsxs5("div", { children: [group.route ? _jsx5("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 _jsxs5("article", { className: expanded ? "cs-thread is-open" : "cs-thread", "data-cs-ui": "thread", "data-thread-id": thread.id, "data-cs-status": item.status, children: [_jsxs5("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: [_jsx5(Avatar, { name: thread.createdBy }), _jsxs5("div", { className: "cs-thread-body", children: [_jsxs5("div", { className: "cs-meta", children: [_jsx5("strong", { children: thread.createdBy }), _jsx5("time", { dateTime: thread.createdAt, children: ago(thread.createdAt) }), _jsx5(RoleBadge, { role: thread.role })] }), first?.body ? _jsx5("p", { className: "cs-text", children: _jsx5(MessageText, { body: first.body, mentions: first.mentions }) }) : null, _jsx5(FieldValues, { fields: thread.fields, clamp: !expanded }), _jsx5(MessageAttachments, { attachments: first?.attachments }), first && deliveryText(deliveries[first.id]) ? _jsx5("div", { className: "cs-delivery", "data-cs-ui": "delivery", children: deliveryText(deliveries[first.id]) }) : null, _jsxs5("div", { className: "cs-target", children: [_jsx5("span", { title: thread.anchor.component?.file ?? void 0, children: targetName(thread.anchor) }), note ? _jsx5("span", { className: `cs-note is-${note.tone}`, children: note.text }) : null] }), !expanded && thread.messages.length > 1 ? _jsxs5("div", { className: "cs-replies", children: [thread.messages.length - 1, " ", thread.messages.length === 2 ? "reply" : "replies"] }) : null] })] }), expanded ? _jsxs5("div", { className: "cs-thread-more", children: [editingId === thread.id && settings ? _jsx5(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) => _jsxs5("div", { className: "cs-message", children: [_jsx5(Avatar, { name: message.author, size: 20 }), _jsxs5("div", { children: [_jsxs5("div", { className: "cs-meta", children: [_jsx5("strong", { children: message.author }), _jsx5("time", { dateTime: message.createdAt, children: ago(message.createdAt) })] }), _jsx5("p", { className: "cs-text", children: _jsx5(MessageText, { body: message.body, mentions: message.mentions }) }), _jsx5(MessageAttachments, { attachments: message.attachments }), deliveryText(deliveries[message.id]) ? _jsx5("div", { className: "cs-delivery", "data-cs-ui": "delivery", children: deliveryText(deliveries[message.id]) }) : null] })] }, message.id)), _jsxs5("form", { className: "cs-reply", onSubmit: async (event) => {
       event.preventDefault();
       if (!member || !reply.trim() && !replyFiles.ids.length || replyFiles.uploading)
         return;
@@ -3295,7 +3506,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: [_jsx5(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)
@@ -3306,25 +3517,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: () => {
+    } }), _jsx5(AttachButtons, { onFiles: replyFiles.add, capturing, onSnapshot: () => snapshot(thread.route === route ? resolveInDocument(thread.anchor, route).element : null, replyFiles.add) }), _jsx5("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: _jsx5(Send, {}) })] }), _jsx5(AttachmentTray, { items: replyFiles.items, onRemove: replyFiles.remove }), _jsxs5("div", { className: "cs-actions", children: [_jsxs5("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" ? _jsx5(Undo, {}) : _jsx5(Check, {}), thread.status === "resolved" ? "Reopen" : "Resolve"] }), onPage && thread.status === "open" ? _jsxs5("button", { className: "cs-button", type: "button", onClick: () => showOnPage(thread), children: [_jsx5(Target, {}), " Show"] }) : null, detailsEnabled(settings) && editingId !== thread.id ? _jsxs5("button", { className: "cs-button", "data-cs-ui": "details-edit", type: "button", onClick: () => setEditingId(thread.id), children: [_jsx5(Pencil, {}), " Details"] }) : null, !onPage && thread.status === "open" && thread.route === route ? _jsxs5("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: [_jsx5(Relink, {}), " Reattach"] }) : null] })] }) : null] }, thread.id);
   })] }, group.route ?? "all"))] })] });
-  const ui = _jsxs4("div", { id: "cs-root", className: [
+  const ui = _jsxs5("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 ? _jsxs5(_Fragment3, { children: [_jsx5("div", { className: "cs-outline", style: { top: highlight.top, left: highlight.left, width: highlight.width, height: highlight.height } }), _jsx5("div", { className: "cs-outline-label", style: { top: Math.max(4, highlight.top - 26), left: highlight.left }, children: highlight.label })] }) : null, flash ? _jsx5("div", { className: "cs-outline is-flash", style: { top: flash.top, left: flash.left, width: flash.width, height: flash.height } }) : null, mode !== "browse" ? _jsxs5("div", { className: "cs-banner cs-hit", "data-cs-ui": "mode", children: [_jsx5(Cursor, {}), _jsx5("span", { children: mode === "reattach" ? "Click the element this comment belongs to" : "Click anything to comment" }), _jsx5("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 : _jsxs5("button", { type: "button", className: [
     "cs-pin",
     item.status === "drifted" ? "is-drifted" : "",
     activeId === item.thread.id && surface === "inbox" ? "is-active" : ""
@@ -3333,9 +3544,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: [_jsx5(Avatar, { name: item.thread.createdBy, size: 22 }), item.thread.messages.length > 1 ? _jsx5("span", { className: "cs-pin-count", children: item.thread.messages.length }) : null] }, item.thread.id)), peek && !pinsHidden && peek.top != null && peek.left != null ? _jsxs5("div", { className: "cs-peek", style: { top: peek.top + 18, left: Math.max(8, peek.left - 12) }, children: [_jsxs5("div", { className: "cs-meta", children: [_jsx5(Avatar, { name: peek.thread.createdBy, size: 18 }), _jsx5("strong", { children: peek.thread.createdBy }), _jsx5("time", { children: ago(peek.thread.createdAt) })] }), _jsx5("p", { className: "cs-text", children: _jsx5(MessageText, { body: peek.thread.messages[0]?.body ?? "", mentions: peek.thread.messages[0]?.mentions }) }), peek.thread.messages.length > 1 ? _jsxs5("div", { className: "cs-replies", children: [peek.thread.messages.length - 1, " ", peek.thread.messages.length === 2 ? "reply" : "replies"] }) : null] }) : null, draft ? _jsxs5("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);
@@ -3343,10 +3554,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();
@@ -3364,7 +3578,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: [_jsxs5("div", { className: "cs-composer-target", children: [_jsx5(Target, {}), _jsx5("span", { className: "cs-composer-name", children: targetName(draft.anchor) }), draft.anchor.component?.file ? _jsx5("code", { children: draft.anchor.component.file }) : null, _jsx5("button", { className: "cs-icon-button", type: "button", "aria-label": "Discard", onClick: () => setDraft(null), children: _jsx5(Close, {}) })] }), _jsxs5("div", { className: "cs-composer-body", children: [_jsx5(Avatar, { name: memberName, size: 24 }), _jsx5(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);
@@ -3374,7 +3588,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] });
+  } })] }), _jsx5(DetailsInput, { settings, value: draftDetails, onChange: setDraftDetails, onKeyDown: submitOnCmdEnter }), _jsx5(AttachmentTray, { items: draftFiles.items, onRemove: draftFiles.remove }), error ? _jsx5("p", { className: "cs-error cs-pad", children: error }) : null, _jsxs5("div", { className: "cs-composer-foot", children: [_jsx5(AttachButtons, { onFiles: draftFiles.add, capturing, onSnapshot: () => snapshot(draft.element, draftFiles.add) }), _jsx5("span", { className: "cs-hint", children: capturing ? "Capturing\u2026" : draftFiles.uploading ? "Uploading\u2026" : busy ? "Posting\u2026" : "\u2318\u21B5 to post" }), _jsx5("button", { className: "cs-send", "data-cs-ui": "composer-submit", type: "submit", "aria-label": "Post comment", disabled: busy || draftFiles.uploading || !canPost, children: _jsx5(Send, {}) })] })] }) : null, surface === "unlock" && !member ? unlockCard : null, surface === "menu" && member ? menuCard : null, surface === "settings" && member ? _jsx5(SettingsPanel, { settings, onChange: changeSettings, onBack: () => setSurface("menu"), error }) : null, surface === "inbox" && member ? inbox : null, toast ? _jsx5("div", { className: "cs-toast", role: "status", children: toast }) : null, bar] });
   return createPortal2(ui, host);
 }
 export {

package/dist/server.js

@@ -8,7 +8,21 @@ function readCommentServiceConfig(env = process.env) {
     return null;
   return { url, project, environment, secret };
 }
+function declaredOrigin(request) {
+  const value = request.headers.get("origin") ?? request.headers.get("x-comment-service-origin");
+  if (!value)
+    return null;
+  try {
+    const origin = new URL(value).origin;
+    return origin === "null" ? null : origin;
+  } catch {
+    return null;
+  }
+}
 function requestOrigin(request) {
+  const declared = declaredOrigin(request);
+  if (declared)
+    return declared;
   const url = new URL(request.url);
   const host = request.headers.get("x-forwarded-host") ?? request.headers.get("host");
   if (!host || host.includes("/"))

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

@@ -47,9 +47,35 @@ export type PostExtras = {
     screenshot?: string | null;
     attachments?: string[];
 };
+export type FieldDef = {
+    id: string;
+    label: string;
+};
+export type FieldValue = FieldDef & {
+    value: string;
+};
+export type Settings = {
+    roles: {
+        enabled: boolean;
+        options: string[];
+    };
+    fields: {
+        enabled: boolean;
+        items: FieldDef[];
+    };
+};
+/** Role and custom field values for a new or edited comment, keyed by field id. */
+export type Details = {
+    role: string | null;
+    fields: Record<string, string>;
+};
 export type Thread = {
     id: string;
     route: string;
+    /** The page the comment was left on, including query and hash. */
+    url: string;
+    role: string | null;
+    fields: FieldValue[];
     anchor: Anchor;
     status: "open" | "resolved";
     createdBy: string;
@@ -97,8 +123,14 @@ export declare function updateProfile(session: Session, memberToken: string, pat
 }>;
 export declare function uploadAttachment(session: Session, memberToken: string, file: Blob, name: string): Promise<Attachment>;
 export declare function listMembers(session: Session, memberToken: string): Promise<Member[]>;
-export declare function listThreads(session: Session, memberToken: string): Promise<Thread[]>;
-export declare function createThread(session: Session, memberToken: string, anchor: Anchor, body: string, extras?: PostExtras): Promise<{
+export declare function listThreads(session: Session, memberToken: string): Promise<{
+    threads: Thread[];
+    settings: Settings;
+}>;
+export declare function saveSettings(session: Session, memberToken: string, settings: Settings): Promise<Settings>;
+export declare function createThread(session: Session, memberToken: string, anchor: Anchor, body: string, extras?: PostExtras & Partial<Details> & {
+    url?: string;
+}): Promise<{
     thread: Thread;
     delivery?: Delivery;
 }>;
@@ -109,6 +141,7 @@ export declare function replyToThread(session: Session, memberToken: string, thr
 export declare function updateThread(session: Session, memberToken: string, threadId: string, patch: {
     status?: "open" | "resolved";
     anchor?: Anchor;
-}): Promise<{
+    url?: string;
+} & Partial<Details>): Promise<{
     id: string;
 }>;

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

@@ -0,0 +1,34 @@
+import { type KeyboardEvent as ReactKeyboardEvent } from "react";
+import type { Details, FieldValue, Settings, Thread } from "./client.js";
+export declare const noDetails: Details;
+export declare function detailsEnabled(settings: Settings | null): boolean;
+export declare function hasFieldValues(details: Details): boolean;
+/** Only sends what is turned on, so a disabled feature never rejects a post. */
+export declare function detailsPayload(settings: Settings | null, details: Details): Partial<Details>;
+export declare function DetailsInput({ settings, value, onChange, onKeyDown, }: {
+    settings: Settings | null;
+    value: Details;
+    onChange: (next: Details) => void;
+    onKeyDown?: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void;
+}): import("react").JSX.Element | null;
+export declare function RoleBadge({ role }: {
+    role: string | null;
+}): import("react").JSX.Element | null;
+export declare function FieldValues({ fields, clamp }: {
+    fields: FieldValue[];
+    clamp?: boolean;
+}): import("react").JSX.Element | null;
+/** Inline editor for a posted comment's role and fields. Values for fields that were since removed are kept by the server. */
+export declare function DetailsEditor({ settings, thread, onSave, onClose, }: {
+    settings: Settings;
+    thread: Thread;
+    onSave: (patch: Partial<Details>) => Promise<void>;
+    onClose: () => void;
+}): import("react").JSX.Element;
+/** Shared per environment: anyone signed in can change it, and existing comments keep their values. */
+export declare function SettingsPanel({ settings, onChange, onBack, error, }: {
+    settings: Settings | null;
+    onChange: (next: Settings) => void;
+    onBack: () => void;
+    error: string;
+}): import("react").JSX.Element;

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

@@ -16,3 +16,4 @@ export declare const Cursor: () => import("react").JSX.Element;
 export declare const Paperclip: () => import("react").JSX.Element;
 export declare const Camera: () => import("react").JSX.Element;
 export declare const FileIcon: () => import("react").JSX.Element;
+export declare const Back: () => import("react").JSX.Element;

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

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

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

@@ -1,10 +1,15 @@
 export type ToolbarPosition = "bottom-left" | "bottom-center" | "bottom-right";
 export type ToolbarTheme = "light" | "dark" | "system";
-export declare function CommentToolbar({ sessionPath, pollMs, position, theme, }: {
+export declare function CommentToolbar({ sessionPath, pollMs, position, theme, navigate, }: {
     sessionPath?: string;
     pollMs?: number;
     /** Default bar position. Each person can override it from their menu. */
     position?: ToolbarPosition;
     /** "system" follows the OS appearance. Light by default so it matches most host pages. */
     theme?: ToolbarTheme;
+    /**
+     * Opens another page of the app, for example `(href) => router.navigate({ href })`.
+     * Without it, selecting a comment from another page does a full page load.
+     */
+    navigate?: (href: string) => void;
 }): import("react").ReactPortal | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devaccel-labs/comment-service",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "In-UI component comments for TanStack Start on Cloudflare. Anchors survive redeploys.",
   "type": "module",
   "license": "UNLICENSED",
@@ -43,11 +43,11 @@
   },
   "devDependencies": {
     "esbuild": "^0.28.1",
-    "@devaccel/comment-compiler": "0.1.0",
-    "@devaccel/comment-react": "0.1.0",
     "@devaccel/comment-core": "0.1.0",
-    "@devaccel/comment-server": "0.1.0",
-    "@devaccel/comment-start": "0.1.0"
+    "@devaccel/comment-react": "0.1.0",
+    "@devaccel/comment-compiler": "0.1.0",
+    "@devaccel/comment-start": "0.1.0",
+    "@devaccel/comment-server": "0.1.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",