@inkandswitch/patchwork-pkg-base 0.0.131 → 0.0.132

package/packages/comments-view/dist/assets/{main-DXYeEDFB.js → main-EQKeEvzx.js}

@@ -3,14 +3,14 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("@layer package {\n:root,\n:host,\n[theme] {\n  --comments-fg: var(--text-editor-line, var(--studio-line, black));\n  --comments-muted-fg: var(--studio-line-offset-50, #999);\n  --comments-bg: var(--text-editor-fill, var(--studio-fill, white));\n  --comments-border: var(--studio-fill-offset-20, #ccc);\n  --comments-hover-bg: var(--studio-fill-offset-10, #f5f5f5);\n  --comments-font: var(--studio-family-sans, system-ui, sans-serif);\n  --comments-accent: var(--studio-secondary, #33ccf8);\n}\n}\n\n/* The width:100% boxes below (panel, textarea) also carry padding and a\n   border, so without border-box they extend past their container and overflow\n   it. Scoped to the panel and the thread card so the injected stylesheet never\n   touches the host page (it may be injected into document.head, not a shadow\n   root). The card is covered on its own because a single thread renders\n   standalone too — e.g. in the editor's comment popover, with no panel around\n   it — and its draft textarea would otherwise spill out of the card. */\n.comments-panel,\n.comments-panel *,\n.comments-panel *::before,\n.comments-panel *::after,\n.comments-thread-card,\n.comments-thread-card *,\n.comments-thread-card *::before,\n.comments-thread-card *::after {\n  box-sizing: border-box;\n}\n\n.comments-panel {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem;\n  gap: 0.5rem;\n  font-family: var(--comments-font);\n  color: var(--comments-fg);\n}\n\n.comments-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.75rem;\n  color: var(--comments-muted-fg);\n}\n\n.comments-panel-header-title {\n  font-weight: 500;\n}\n\n.comments-empty {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1.5rem 0.5rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--comments-muted-fg);\n}\n\n.comments-thread {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* A thread that arrived while the doc was open (see SETTLE_MS in\n   CommentsView.tsx). Its card and actions mount whenever the `comment-thread`\n   tool finishes loading, so they animate on mount rather than the wrapper,\n   which could otherwise lift in while still empty. */\n.comments-thread[data-new] > patchwork-view > * {\n  transition:\n    opacity max(1ms, calc(200ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) var(--studio-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),\n    transform max(1ms, calc(200ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) var(--studio-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n}\n@starting-style {\n  .comments-thread[data-new] > patchwork-view > * {\n    opacity: 0;\n    transform: translateY(-4px) scale(0.98);\n  }\n}\n\n/* The thread's card + actions are rendered by the `comment-thread` tool into\n   its <patchwork-view> host, so that host is the flex column that lays them\n   out (a custom element is `display: inline` by default). */\n.comments-thread > patchwork-view {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comments-thread-card {\n  background: var(--comments-bg);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--comments-border);\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  cursor: var(--studio-cursor-pointer, pointer);\n  border-radius: 6px;\n  transition:\n    border-color var(--studio-transition, 0.15s ease),\n    background var(--studio-transition, 0.15s ease),\n    box-shadow var(--studio-transition, 0.15s ease);\n}\n\n.comments-thread-card--primary {\n  box-shadow:\n    0 10px 15px -3px rgb(0 0 0 / 0.1),\n    0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n.comments-thread-card--secondary {\n  box-shadow:\n    0 4px 6px -1px rgb(0 0 0 / 0.1),\n    0 2px 4px -2px rgb(0 0 0 / 0.1);\n}\n\n.comments-thread-card--inactive {\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n/* In the sidebar, where threads sit side by side, the selected one needs to\n   stand out from the rest: an accent border and ring, faintly tinted. A thread\n   embedded on its own defaults to primary, so this is scoped to the panel. */\n.comments-panel .comments-thread-card--primary {\n  border-color: var(--comments-accent);\n  background: color-mix(in srgb, var(--comments-accent) 6%, var(--comments-bg));\n  box-shadow:\n    0 0 0 1px var(--comments-accent),\n    0 6px 14px -4px rgb(0 0 0 / 0.15);\n}\n\n/* Threads that also overlap the selection: a softer accent border. */\n.comments-panel .comments-thread-card--secondary {\n  border-color: color-mix(\n    in srgb,\n    var(--comments-accent) 50%,\n    var(--comments-border)\n  );\n  box-shadow: 0 2px 4px -2px rgb(0 0 0 / 0.1);\n}\n\n.comments-panel .comments-thread-card--inactive {\n  box-shadow: none;\n}\n\n/* Hovering a thread highlights its target, so hint that it's live. */\n.comments-panel .comments-thread:hover .comments-thread-card--inactive {\n  border-color: color-mix(\n    in srgb,\n    var(--comments-accent) 40%,\n    var(--comments-border)\n  );\n  background: var(--comments-hover-bg);\n}\n\n/* Resolved threads are hidden in the sidebar but shown when embedded. Keep\n   them clearly readable, just visibly \"settled\": muted fill, dashed border,\n   and slightly dimmed so they read as archived rather than active. */\n.comments-thread-card--resolved {\n  background: var(--comments-hover-bg);\n  border-style: dashed;\n  opacity: 0.75;\n}\n\n.comments-thread-resolved-label {\n  align-self: flex-start;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: var(--studio-chrome-letter-spacing, 0.03em);\n  padding: 0.0625rem 0.375rem;\n  border-radius: 0.625rem;\n  color: var(--comments-muted-fg);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--comments-border);\n}\n\n.comments-thread-card-body {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comments-thread-doc-level {\n  font-size: 0.6875rem;\n  text-transform: uppercase;\n  letter-spacing: var(--studio-chrome-letter-spacing, 0.03em);\n  color: var(--comments-muted-fg);\n}\n\n.comments-thread-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.comments-thread-actions {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.comment-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comment-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.comment-author {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n.comment-author-name {\n  font-size: 0.875rem;\n  font-weight: 500;\n  white-space: nowrap;\n  color: var(--comments-fg);\n}\n\n.comment-timestamp {\n  font-size: 0.75rem;\n  color: var(--comments-muted-fg);\n}\n\n.comment-content {\n  font-size: 1rem;\n  color: var(--comments-fg);\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n\n/* The draft editor is a cute.txt (CodeMirror) instance. Its inner\n   padding/font come from the injected cute.txt styles. */\n.comment-draft-editor {\n  height: 6rem;\n  min-height: 6rem;\n  min-width: 0;\n  width: 100%;\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--comments-border);\n  border-radius: 0.5rem;\n  color: var(--comments-fg);\n  background: var(--comments-bg);\n  overflow: hidden;\n}\n\n.comment-draft-editor .cm-content {\n  box-sizing: border-box;\n  min-height: 0;\n  min-width: 0;\n  margin: 0;\n  padding: 0.5rem;\n}\n\n.comment-draft-editor .cm-line {\n  margin: 0;\n  padding: 0;\n}\n\n.comment-draft-editor .cm-scroller {\n  height: 100%;\n  min-width: 0;\n}\n\n.comment-draft-editor:focus-within {\n  outline: var(--studio-focus-ring, 2px solid var(--comments-accent));\n  outline-offset: var(--studio-focus-ring-offset, 1px);\n}\n\n.comment-btn {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  font-family: inherit;\n  font-size: 0.875rem;\n  cursor: var(--studio-cursor-pointer, pointer);\n  border: none;\n  background: transparent;\n  color: var(--comments-fg);\n}\n\n.comment-btn:hover {\n  background: var(--studio-hover-fill, var(--comments-hover-bg));\n}"));
+      elementStyle.appendChild(document.createTextNode("@layer package {\n:root,\n:host,\n[theme] {\n  --comments-fg: var(--text-editor-line, var(--studio-line, black));\n  --comments-muted-fg: var(--studio-line-offset-50, #999);\n  --comments-bg: var(--text-editor-fill, var(--studio-fill, white));\n  --comments-border: var(--studio-fill-offset-20, #ccc);\n  --comments-hover-bg: var(--studio-fill-offset-10, #f5f5f5);\n  --comments-font: var(--studio-family-sans, system-ui, sans-serif);\n  --comments-accent: var(--studio-secondary, #33ccf8);\n}\n}\n\n/* The width:100% boxes below (panel, textarea) also carry padding and a\n   border, so without border-box they extend past their container and overflow\n   it. Scoped to the panel and the thread card so the injected stylesheet never\n   touches the host page (it may be injected into document.head, not a shadow\n   root). The card is covered on its own because a single thread renders\n   standalone too — e.g. in the editor's comment popover, with no panel around\n   it — and its draft textarea would otherwise spill out of the card. */\n.comments-panel,\n.comments-panel *,\n.comments-panel *::before,\n.comments-panel *::after,\n.comments-thread-card,\n.comments-thread-card *,\n.comments-thread-card *::before,\n.comments-thread-card *::after {\n  box-sizing: border-box;\n}\n\n.comments-panel {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem;\n  gap: 0.5rem;\n  font-family: var(--comments-font);\n  color: var(--comments-fg);\n}\n\n.comments-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.75rem;\n  color: var(--comments-muted-fg);\n}\n\n.comments-panel-header-title {\n  font-weight: 500;\n}\n\n.comments-empty {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1.5rem 0.5rem;\n  text-align: center;\n  font-size: 0.875rem;\n  color: var(--comments-muted-fg);\n}\n\n.comments-thread {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n/* A thread that arrived while the doc was open (see SETTLE_MS in\n   CommentsView.tsx). Its card and actions mount whenever the `comment-thread`\n   tool finishes loading, so they animate on mount rather than the wrapper,\n   which could otherwise lift in while still empty. */\n.comments-thread[data-new] > patchwork-view > * {\n  transition:\n    opacity max(1ms, calc(200ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) var(--studio-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),\n    transform max(1ms, calc(200ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) var(--studio-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n}\n@starting-style {\n  .comments-thread[data-new] > patchwork-view > * {\n    opacity: 0;\n    transform: translateY(-4px) scale(0.98);\n  }\n}\n\n/* The thread's card + actions are rendered by the `comment-thread` tool into\n   its <patchwork-view> host, so that host is the flex column that lays them\n   out (a custom element is `display: inline` by default). */\n.comments-thread > patchwork-view {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comments-thread-card {\n  background: var(--comments-bg);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--comments-border);\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  cursor: var(--studio-cursor-pointer, pointer);\n  border-radius: 6px;\n  transition:\n    border-color var(--studio-transition, 0.15s ease),\n    background var(--studio-transition, 0.15s ease),\n    box-shadow var(--studio-transition, 0.15s ease);\n}\n\n.comments-thread-card--primary {\n  box-shadow:\n    0 10px 15px -3px rgb(0 0 0 / 0.1),\n    0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n.comments-thread-card--secondary {\n  box-shadow:\n    0 4px 6px -1px rgb(0 0 0 / 0.1),\n    0 2px 4px -2px rgb(0 0 0 / 0.1);\n}\n\n.comments-thread-card--inactive {\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n\n/* In the sidebar, where threads sit side by side, the selected one needs to\n   stand out from the rest: an accent border and ring, faintly tinted. A thread\n   embedded on its own defaults to primary, so this is scoped to the panel. */\n.comments-panel .comments-thread-card--primary {\n  border-color: var(--comments-accent);\n  background: color-mix(in srgb, var(--comments-accent) 6%, var(--comments-bg));\n  box-shadow:\n    0 0 0 1px var(--comments-accent),\n    0 6px 14px -4px rgb(0 0 0 / 0.15);\n}\n\n/* Threads that also overlap the selection: a softer accent border. */\n.comments-panel .comments-thread-card--secondary {\n  border-color: color-mix(\n    in srgb,\n    var(--comments-accent) 50%,\n    var(--comments-border)\n  );\n  box-shadow: 0 2px 4px -2px rgb(0 0 0 / 0.1);\n}\n\n.comments-panel .comments-thread-card--inactive {\n  box-shadow: none;\n}\n\n/* Hovering a thread highlights its target, so hint that it's live. */\n.comments-panel .comments-thread:hover .comments-thread-card--inactive {\n  border-color: color-mix(\n    in srgb,\n    var(--comments-accent) 40%,\n    var(--comments-border)\n  );\n  background: var(--comments-hover-bg);\n}\n\n/* Resolved threads are hidden in the sidebar but shown when embedded. Keep\n   them clearly readable, just visibly \"settled\": muted fill, dashed border,\n   and slightly dimmed so they read as archived rather than active. */\n.comments-thread-card--resolved {\n  background: var(--comments-hover-bg);\n  border-style: dashed;\n  opacity: 0.75;\n}\n\n.comments-thread-resolved-label {\n  align-self: flex-start;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: var(--studio-chrome-letter-spacing, 0.03em);\n  padding: 0.0625rem 0.375rem;\n  border-radius: 0.625rem;\n  color: var(--comments-muted-fg);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--comments-border);\n}\n\n.comments-thread-card-body {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comments-thread-doc-level {\n  font-size: 0.6875rem;\n  text-transform: uppercase;\n  letter-spacing: var(--studio-chrome-letter-spacing, 0.03em);\n  color: var(--comments-muted-fg);\n}\n\n.comments-thread-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.comments-thread-actions {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n.comment-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.comment-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.comment-author {\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n.comment-author-name {\n  font-size: 0.875rem;\n  font-weight: 500;\n  white-space: nowrap;\n  color: var(--comments-fg);\n}\n\n.comment-timestamp {\n  font-size: 0.75rem;\n  color: var(--comments-muted-fg);\n}\n\n.comment-content {\n  font-size: 1rem;\n  color: var(--comments-fg);\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n}\n\n/* The draft editor is a cute.txt (CodeMirror) instance. Its inner\n   padding/font come from the injected cute.txt styles. */\n.comment-draft-editor {\n  height: 6rem;\n  min-height: 6rem;\n  min-width: 0;\n  width: 100%;\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--comments-border);\n  border-radius: 0.5rem;\n  color: var(--comments-fg);\n  background: var(--comments-bg);\n  overflow: hidden;\n}\n\n.comment-draft-editor .cm-content {\n  box-sizing: border-box;\n  min-height: 0;\n  min-width: 0;\n  margin: 0;\n  padding: 0.5rem;\n}\n\n.comment-draft-editor .cm-line {\n  margin: 0;\n  padding: 0;\n}\n\n.comment-draft-editor .cm-scroller {\n  height: 100%;\n  min-width: 0;\n}\n\n.comment-draft-editor:focus-within {\n  outline: var(--studio-focus-ring, 2px solid var(--comments-accent));\n  outline-offset: var(--studio-focus-ring-offset, 1px);\n}\n\n.comment-btn {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  font-family: inherit;\n  font-size: 0.875rem;\n  cursor: var(--studio-cursor-pointer, pointer);\n  border: none;\n  background: transparent;\n  color: var(--comments-fg);\n  transition: scale max(1ms, calc(100ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) var(--studio-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n/* a small press, so Resolve / Reply / Save feel heard before the card changes */\n.comment-btn:active:not(:disabled) {\n  scale: 0.97;\n}\n\n.comment-btn:hover {\n  background: var(--studio-hover-fill, var(--comments-hover-bg));\n}\n\n/* The thread the editor's caret just moved into: a brief ring, so the eye\n   finds it in the list (see CommentsView's primary-thread effect). */\n.comments-panel .comments-thread[data-flash] {\n  border-radius: 8px;\n  animation: comments-thread-flash\n    max(1ms, calc(900ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)))\n    ease-out;\n}\n\n@keyframes comments-thread-flash {\n  0%,\n  30% {\n    box-shadow: 0 0 0 3px color-mix(in oklch, var(--studio-primary, #35f7ca), transparent 20%);\n  }\n  100% {\n    box-shadow: 0 0 0 3px transparent;\n  }\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-import { insert, createComponent, getOwner, effect, setAttribute, template, delegateEvents, className, memo, use, render } from "solid-js/web";
+import { use, insert, createComponent, setAttribute, getOwner, effect, template, delegateEvents, className, memo, render } from "solid-js/web";
 import { onCleanup, createMemo, createContext, useContext, createResource, createEffect, createSignal, onMount, createComputed, on, Show, For } from "solid-js";
 import { createStore, reconcile, produce } from "solid-js/store";
 import * as Providers from "@inkandswitch/patchwork-providers";
@@ -1152,6 +1152,27 @@ function CommentsView(props) {
   const [focusDoc, focusHandle] = subscribeDoc(props.element, {
     type: "patchwork:focus"
   });
+  let panel;
+  const viewId = `comments-view-${Math.random().toString(36).slice(2)}`;
+  const [onScreen, setOnScreen] = createSignal(false);
+  onMount(() => {
+    const observer = new IntersectionObserver(([entry]) => setOnScreen(!!entry && entry.isIntersecting && entry.intersectionRect.width > 0));
+    observer.observe(panel);
+    onCleanup(() => observer.disconnect());
+  });
+  const listed = (shown) => {
+    const handle = focusHandle();
+    if (!handle) return;
+    const already = !!handle.doc()?.commentViews?.[viewId];
+    if (already === shown) return;
+    handle.change((doc) => {
+      if (!doc.commentViews) doc.commentViews = {};
+      if (shown) doc.commentViews[viewId] = true;
+      else delete doc.commentViews[viewId];
+    });
+  };
+  createEffect(() => listed(onScreen()));
+  onCleanup(() => listed(false));
   const [, contactHandle] = subscribeDoc(props.element, {
     type: "patchwork:contact"
   });
@@ -1223,9 +1244,29 @@ function CommentsView(props) {
       doc.highlight = desired;
     });
   });
+  let pickedHere;
+  createEffect(on(primaryThreadUrl, (url) => {
+    if (!url || !onScreen()) return;
+    if (url === pickedHere) {
+      pickedHere = void 0;
+      return;
+    }
+    const card = panel.querySelector(`.comments-thread[data-thread-url="${CSS.escape(url)}"]`);
+    if (!card) return;
+    card.scrollIntoView({
+      block: "nearest",
+      behavior: "smooth"
+    });
+    card.removeAttribute("data-flash");
+    void card.offsetWidth;
+    card.setAttribute("data-flash", "");
+  }, {
+    defer: true
+  }));
   const onSelectThread = (threadUrl, targetUrls) => {
     const handle = focusHandle();
     if (!handle) return;
+    pickedHere = threadUrl;
     const wasPrimary = primaryThreadUrl() === threadUrl;
     setPinnedThread(wasPrimary ? void 0 : threadUrl);
     const next = {};
@@ -1261,6 +1302,8 @@ function CommentsView(props) {
   return (() => {
     var _el$ = _tmpl$2$1(), _el$2 = _el$.firstChild;
     _el$2.firstChild;
+    var _ref$ = panel;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : panel = _el$;
     insert(_el$2, createComponent(Show, {
       get when() {
         return canAddComment();
@@ -1293,6 +1336,10 @@ function CommentsView(props) {
                 e.currentTarget.removeAttribute("data-new");
               }
             });
+            _el$6.addEventListener("animationend", (e) => {
+              if (e.animationName === "comments-thread-flash") e.currentTarget.removeAttribute("data-flash");
+            });
+            setAttribute(_el$6, "data-thread-url", threadUrl);
             _el$7.docUrl = threadUrl;
             _el$7._$owner = getOwner();
             effect((_p$) => {
@@ -2930,4 +2977,4 @@ export {
   renderCommentThread,
   renderCommentsView
 };
-//# sourceMappingURL=main-DXYeEDFB.js.map
+//# sourceMappingURL=main-EQKeEvzx.js.map