proto-comments 0.2.0 → 0.2.1

package/README.md

@@ -4,7 +4,7 @@ Figma-style review comments on a running React prototype.
 
 - **Comments are split by screen, not only by URL.** Prototypes often show every screen on one URL. Tell the plugin what a "screen" is, and a comment left in Settings won't show up on the deal page.
 - **Pinned to elements.** A pin follows its element when the window is resized or scrolled. Each comment records the block it's in, for example "Review before I send these invites › Emails".
-- **History.** All comments, grouped by screen. Click one to reopen its screen in the saved state, scroll to the element and open the thread.
+- **History.** All comments in one list, by number, each with the screen it was left on. Click one to reopen its screen in the saved state, scroll to the element and open the thread.
 - **Made for a coding agent.** Comments live in one JSON file in your project. Mark the ones you want, tell the agent "apply the comments", and it resolves each with a reply saying what changed.
 
 ## Install
@@ -71,7 +71,7 @@ Either way, comments are saved to `comments/comments.json`, relative to the fold
 
 The shortcuts use physical keys, so they work in any keyboard layout. In text fields C types a letter.
 
-In a comment you can reply, resolve, mark it for the agent, or delete it. In History you can filter (All, Open, For Agent, Resolved). Only open comments are numbered, and they come first in History. A resolved comment shows a check and who resolved it, so the next new comment can be #1 again. Each row has the same actions as an open comment, and you can select several comments to resolve, mark for the agent or delete them at once.
+In a comment you can reply, resolve, mark it for the agent, or delete it. In History you can filter (All, Open, For Agent, Resolved). Only open comments are numbered. In History they come first, in order of their numbers, then the resolved ones; each row shows the screen it's on. A resolved comment shows a check and who resolved it, so the next new comment can be #1 again. Each row has the same actions as an open comment, and you can select several comments to resolve, mark for the agent or delete them at once.
 
 ## Screens in single-URL prototypes
 
@@ -105,7 +105,7 @@ export default function Review() {
 | --- | --- | --- |
 | `endpoint` | `'/api/comments'` | Where comments are stored |
 | `author` | `'Reviewer'` | Name on new comments and replies |
-| `getScreen` | URL | `() => ({ key, label })`. Comments show only on a screen with the same `key`; `label` groups History |
+| `getScreen` | URL | `() => ({ key, label })`. Comments show only on a screen with the same `key`; `label` is the screen's name in History |
 | `getSnapshot` | `{ url }` | JSON saved with each comment |
 | `restoreSnapshot` | go to `url` | `(snapshot, comment) => void \| Promise`. Called from History when the comment is on another screen |
 | `getContext` | none | `() => string` shown in History, e.g. `"new client · admin"` |

package/dist/index.js

@@ -205,6 +205,14 @@ var when = (iso) => {
   return d.toLocaleString("en-US", { year, month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
 };
 var byline = (author, iso) => [author, when(iso)].filter(Boolean).join(" \xB7 ");
+function Clip({ as: Tag = "span", tip, children }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    el.classList.toggle("pc-cut", el.scrollWidth > el.clientWidth);
+  });
+  return /* @__PURE__ */ jsx2(Tag, { ref, className: "pc-clip", "data-tip": tip, children });
+}
 function usePop(x, y, lost) {
   const ref = useRef(null);
   const [h, setH] = useState(0);
@@ -263,7 +271,7 @@ function Field({ placeholder, submit, onCancel, label, bare }) {
 function Draft({ draft }) {
   const pop = usePop(draft.x, draft.y);
   return /* @__PURE__ */ jsxs2("div", { className: "pc-pop", ref: pop.ref, style: pop.style, children: [
-    /* @__PURE__ */ jsx2("div", { className: "pc-head", children: /* @__PURE__ */ jsx2("b", { "data-tip": placeOf(draft.anchor), children: nameOf(draft.anchor) }) }),
+    /* @__PURE__ */ jsx2("div", { className: "pc-head", children: /* @__PURE__ */ jsx2(Clip, { as: "b", tip: placeOf(draft.anchor), children: nameOf(draft.anchor) }) }),
     /* @__PURE__ */ jsx2("div", { className: "pc-pane", children: /* @__PURE__ */ jsx2(Field, { placeholder: "Leave a comment", label: "Comment", submit: (text) => addComment(draft.anchor, text), onCancel: () => setC({ draft: null }) }) })
   ] });
 }
@@ -279,7 +287,7 @@ function Thread({ c, x, y, lost }) {
   }, [c.replies.length]);
   return /* @__PURE__ */ jsxs2("div", { className: "pc-pop", ref: pop.ref, style: pop.style, children: [
     /* @__PURE__ */ jsxs2("div", { className: "pc-head", children: [
-      /* @__PURE__ */ jsx2("b", { "data-tip": placeOf(c.anchor), children: nameOf(c.anchor) }),
+      /* @__PURE__ */ jsx2(Clip, { as: "b", tip: placeOf(c.anchor), children: nameOf(c.anchor) }),
       c.queued && /* @__PURE__ */ jsx2("i", { className: "pc-tag", children: "For Agent" }),
       /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: () => deleteComment(c.id), "aria-label": "Delete comment", "data-tip": "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) }),
       /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => setC({ openId: null }), "aria-label": "Close", "data-tip": "Close", children: /* @__PURE__ */ jsx2(Icon, { name: "x" }) })
@@ -320,17 +328,13 @@ function Pin({ c, x, y }) {
 }
 var FILTERS = [["all", "All"], ["open", "Open"], ["queued", "For Agent"], ["resolved", "Resolved"]];
 var matches = (c, f) => f === "all" || (f === "queued" ? c.queued && c.status === "open" : c.status === f);
-var groupBy = (items, key) => items.reduce((m, it) => {
-  var _a;
-  (m[_a = key(it)] || (m[_a] = [])).push(it);
-  return m;
-}, {});
+var metaOf = (c, place2) => [c.screenLabel, place2, c.context, when(c.createdAt), c.replies.length && `${c.replies.length + 1} comments`].filter(Boolean).join(" \xB7 ");
 function History() {
   const isOpen = useC((s) => s.historyOpen);
   const list = useC((s) => s.list);
   const filter = useC((s) => s.filter);
-  const shown = list.filter((c) => matches(c, filter)).sort((a, b) => (a.status === "resolved") - (b.status === "resolved"));
-  const groups = Object.entries(groupBy(shown, (c) => c.screenLabel));
+  const rank = (c) => c.status === "resolved" ? Infinity : c.n;
+  const shown = list.filter((c) => matches(c, filter)).sort((a, b) => rank(a) - rank(b) || 0);
   const count = (f) => list.filter((c) => matches(c, f)).length;
   const [picked, setPicked] = useState([]);
   const selectable = shown.map((c) => c.id);
@@ -387,17 +391,17 @@ function History() {
         /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: remove, "aria-label": "Delete selected", "data-tip": "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "pc-groups", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "pc-list", children: [
       !shown.length && /* @__PURE__ */ jsx2("p", { className: "pc-empty", children: "No comments here. Press C and click an element to leave one." }),
-      groups.map(([label, items]) => /* @__PURE__ */ jsx2("section", { children: items.map((c) => /* @__PURE__ */ jsxs2("div", { className: `pc-row${c.status === "resolved" ? " done" : ""}${leaving.includes(c.id) ? " leaving" : ""}`, children: [
+      shown.map((c) => /* @__PURE__ */ jsxs2("div", { className: `pc-row${c.status === "resolved" ? " done" : ""}${leaving.includes(c.id) ? " leaving" : ""}`, children: [
         /* @__PURE__ */ jsx2("input", { type: "checkbox", className: "pc-pick", checked: sel.includes(c.id), onChange: () => toggle(c.id), "aria-label": `Select comment ${c.n}` }),
         /* @__PURE__ */ jsxs2("button", { className: "pc-item", onClick: () => goToComment(c), children: [
           /* @__PURE__ */ jsx2("span", { className: `pc-n${c.queued ? " queued" : ""}`, children: c.status === "resolved" ? /* @__PURE__ */ jsx2(Icon, { name: "check" }) : c.n }),
           /* @__PURE__ */ jsxs2("span", { className: "pc-body", children: [
             /* @__PURE__ */ jsx2("span", { className: "pc-text", children: c.text }),
-            /* @__PURE__ */ jsxs2("span", { className: "pc-meta", "data-tip": placeOf(c.anchor), children: [
+            /* @__PURE__ */ jsxs2("span", { className: "pc-meta", children: [
               c.queued && /* @__PURE__ */ jsx2("i", { className: "pc-tag", children: "For Agent" }),
-              /* @__PURE__ */ jsx2("span", { children: [nameOf(c.anchor), c.context, when(c.createdAt), c.replies.length && `${c.replies.length + 1} comments`].filter(Boolean).join(" \xB7 ") })
+              /* @__PURE__ */ jsx2(Clip, { tip: metaOf(c, placeOf(c.anchor)), children: metaOf(c, nameOf(c.anchor)) })
             ] }),
             c.status === "resolved" && c.resolvedBy && /* @__PURE__ */ jsxs2("span", { className: "pc-meta", children: [
               "Resolved by ",
@@ -410,7 +414,7 @@ function History() {
           c.status === "open" && /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-agent", "aria-pressed": !!c.queued, onClick: () => leave([c], (x) => ({ queued: !x.queued }), () => toggleQueued(c)), "aria-label": c.queued ? "Unmark" : "Mark for Agent", "data-tip": c.queued ? "Unmark" : "Mark for Agent", children: /* @__PURE__ */ jsx2(Icon, { name: "agent" }) }),
           /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: () => leave([c], null, () => deleteComment(c.id)), "aria-label": "Delete comment", "data-tip": "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) })
         ] })
-      ] }, c.id)) }, label))
+      ] }, c.id))
     ] })
   ] });
 }
@@ -627,20 +631,21 @@ html.pc-mode .pc-grip{ cursor:grab !important; }
 
 /* toolbar: standout surface, dark like the Tooltip */
 .pc-bar{ position:fixed; z-index:calc(var(--pc-z) + 4); left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:2px; padding:4px; border-radius:10px; background:var(--pc-dark); color:#ffffffaf; box-shadow:0 0 0 .5px #ffffff12 inset, 0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026; user-select:none; }
-.pc-bar button{ position:relative; display:inline-grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; transition:background-color .15s, color .15s, transform .15s cubic-bezier(0,0,.2,1); }
-@media (hover:hover){ .pc-bar button:hover{ background:#ffffff1b; color:#ffffffed; } }
+.pc-bar button{ --pc-tint:transparent; position:relative; display:inline-grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; transition:background-color .15s, color .15s, transform .15s cubic-bezier(0,0,.2,1); }
+@media (hover:hover){ .pc-bar button:hover{ --pc-tint:#ffffff1b; background:var(--pc-tint); color:#ffffffed; } }
 .pc-bar button:active{ transform:scale(.97); }
-.pc-bar button[aria-pressed="true"]{ background:#ffffff22; color:#ffffffed; box-shadow:0 0 0 .5px #ffffff12 inset; }
+.pc-bar button[aria-pressed="true"]{ --pc-tint:#ffffff22; background:var(--pc-tint); color:#ffffffed; box-shadow:0 0 0 .5px #ffffff12 inset; }
 .pc-bar kbd{ border-color:#ffffff12; background:#ffffff12; color:#ffffffaf; }
-/* open comments: a dot on the History icon */
-.pc-dot{ position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--pc-primary); box-shadow:0 0 0 1.5px var(--pc-dark); }
+/* open comments: a dot on the History icon. Its ring is the button's own color: the bar, plus the button's tint when hovered or pressed. */
+.pc-dot{ position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--pc-primary); box-shadow:0 0 0 1.5px var(--pc-tint), 0 0 0 1.5px var(--pc-dark); transition:box-shadow .15s; }
 /* Tooltip (DS): standout surface, 8px radius, 12px medium; shows after a short delay, hides at once */
 .pc-tip{ position:absolute; left:50%; bottom:calc(100% + 10px); display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:var(--pc-dark); color:#ffffffed; box-shadow:0 0 0 .5px #ffffff12 inset; font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; pointer-events:none; opacity:0; transform:translate(-50%, 4px) scale(.95); transform-origin:50% 100%; transition:opacity .15s, transform .15s cubic-bezier(.23,1,.32,1); }
 .pc-bar[data-tips="below"] .pc-tip{ bottom:auto; top:calc(100% + 10px); transform:translate(-50%, -4px) scale(.95); transform-origin:50% 0; }
 .pc-bar button:hover .pc-tip, .pc-bar button:focus-visible .pc-tip{ opacity:1; transform:translate(-50%, 0) scale(1); transition-duration:.2s; transition-delay:.3s; }
 @media (hover:none){ .pc-tip{ display:none; } }
 /* The same Tooltip for [data-tip] controls: <Tooltip> places it by the control, so a scrolling panel can't clip it */
-.pc-tip.float{ position:fixed; z-index:calc(var(--pc-z) + 5); bottom:auto; }
+/* max-content: near the right edge, shrink-to-fit would wrap it narrower than it needs */
+.pc-tip.float{ position:fixed; z-index:calc(var(--pc-z) + 5); bottom:auto; width:max-content; max-width:min(320px, calc(100vw - 16px)); white-space:normal; overflow-wrap:anywhere; }
 .pc-tip.float[data-side="below"]{ transform:translate(-50%, -4px) scale(.95); transform-origin:50% 0; }
 .pc-tip.float[data-open]{ opacity:1; transform:translate(-50%, 0) scale(1); transition-duration:.2s; }
 .pc-grip{ display:grid; place-items:center; width:20px; height:28px; opacity:.5; cursor:grab; touch-action:none; transition:opacity .15s; }
@@ -670,7 +675,7 @@ html.pc-mode .pc-grip{ cursor:grab !important; }
 /* transform-origin is set inline, at the pin or click point */
 @keyframes pc-pop-in{ from{ opacity:0; transform:scale(.97) } }
 .pc-head{ flex:none; display:flex; align-items:center; gap:2px; min-height:40px; padding:8px 8px 8px 12px; border-bottom:.5px solid var(--pc-border); }
-.pc-head b{ flex:1; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pc-head b{ flex:1; font-weight:500; }
 .pc-head .pc-tag{ margin:0 6px; }
 /* header, reply field and actions stay put; only the messages scroll */
 .pc-pane{ flex:none; display:flex; flex-direction:column; gap:10px; padding:12px; }
@@ -693,12 +698,13 @@ html.pc-mode .pc-grip{ cursor:grab !important; }
 /* narrow drawer or 4-digit counts: tabs shrink instead of overflowing */
 .pc-history > .pc-tabs .pc-tab{ flex:1 1 auto; min-width:0; justify-content:center; gap:4px; padding:0 6px; overflow:hidden; }
 .pc-selbar{ display:flex; align-items:center; gap:6px; min-height:40px; padding:6px 16px 6px 20px; border-top:.5px solid var(--pc-border); border-bottom:.5px solid var(--pc-border); }
-.pc-check{ flex:1; display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--pc-text); font-weight:500; user-select:none; }
+/* only the box and its text toggle; margin:0 against the page's own label styles */
+.pc-check{ flex:none; display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer; color:var(--pc-text); font-weight:500; user-select:none; }
 .pc-check:has(:checked){ color:var(--pc-text-strong); }
-.pc-bulk{ display:flex; gap:2px; margin-right:-4px; }
+.pc-bulk{ display:flex; gap:2px; margin:0 -4px 0 auto; }
 /* Command list: 6px-radius items */
 /* the bottom padding keeps the last row clear of the toolbar when the drawer is full width */
-.pc-groups{ flex:1; overflow:auto; padding:8px 12px 72px; }
+.pc-list{ flex:1; overflow:auto; padding:8px 12px 72px; }
 /* row: checkbox, pin and the first text line share one 20px line */
 .pc-row{ position:relative; display:flex; align-items:flex-start; gap:10px; padding:8px; border-radius:6px; transition:background-color .15s, opacity .15s cubic-bezier(.4,0,1,1); }
 /* fades before it leaves the filtered list */
@@ -719,7 +725,8 @@ html.pc-mode .pc-grip{ cursor:grab !important; }
 .pc-text{ font-weight:450; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
 .pc-row.done .pc-text{ color:var(--pc-faint); }
 .pc-body .pc-meta{ display:flex; align-items:center; gap:6px; min-width:0; margin:0; }
-.pc-body .pc-meta > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pc-clip{ min-width:0; overflow:hidden; white-space:nowrap; }
+.pc-clip.pc-cut{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent); }
 .pc-body .pc-tag{ margin:0; }
 .pc-empty{ margin:8px; color:var(--pc-faint); }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proto-comments",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Figma-style review comments on a running React prototype, split by screen even in single-URL apps, stored in a JSON file a coding agent can apply.",
   "type": "module",
   "license": "MIT",