@inkandswitch/patchwork-pkg-base 0.0.74 → 0.0.76

package/module-settings-url

@@ -1 +1 @@
-automerge:4SnJNQ7TsCJPGVV7wphDeVKSDqvv
+automerge:2sEcLEmBVUGxfQs3TBkZkXxEdrS3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkandswitch/patchwork-pkg-base",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "type": "module",
   "description": "Base packages for the Patchwork system",
   "repository": {

package/packages/comments-view/dist/assets/{main-DfvTgZ-4.js → main-51fB7vpU.js}

@@ -3,7 +3,7 @@
   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/* 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: 1px solid var(--comments-border);\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  cursor: pointer;\n  transition: box-shadow 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/* 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: 0.03em;\n  padding: 0.0625rem 0.375rem;\n  border-radius: 0.625rem;\n  color: var(--comments-muted-fg);\n  border: 1px 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: 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: 1px 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: 2px solid var(--comments-accent);\n  outline-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: pointer;\n  border: none;\n  background: transparent;\n  color: var(--comments-fg);\n}\n\n.comment-btn:hover {\n  background: 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/* 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: 1px solid var(--comments-border);\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  cursor: pointer;\n  border-radius: 6px;\n  transition:\n    border-color 0.15s ease,\n    background 0.15s ease,\n    box-shadow 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: 0.03em;\n  padding: 0.0625rem 0.375rem;\n  border-radius: 0.625rem;\n  color: var(--comments-muted-fg);\n  border: 1px 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: 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: 1px 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: 2px solid var(--comments-accent);\n  outline-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: pointer;\n  border: none;\n  background: transparent;\n  color: var(--comments-fg);\n}\n\n.comment-btn:hover {\n  background: var(--comments-hover-bg);\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -1153,7 +1153,6 @@ function CommentsView(props) {
   const selectedHandles = useResolvedHandles(() => Object.keys(focusDoc()?.selection ?? {}), repo);
   const threadTargetHandleMap = useResolvedHandleMap(threadTargetUrlMap, repo);
   const threadsWithVisibleTarget = useThreadsWithVisibleTarget(threadTargetUrlMap, repo);
-  const renderableThreadUrls = createMemo(() => threadUrls().filter((url) => threadsWithVisibleTarget().has(url)));
   const docLevelThreadUrls = createMemo(() => {
     const map = threadTargetUrlMap();
     const set = /* @__PURE__ */ new Set();
@@ -1164,7 +1163,8 @@ function CommentsView(props) {
     }
     return set;
   });
-  const displayedThreadUrls = createMemo(() => threadUrls().filter((url) => threadsWithVisibleTarget().has(url) || docLevelThreadUrls().has(url)));
+  const renderableThreadUrls = createMemo(() => threadUrls().filter((url) => threadsWithVisibleTarget().has(url) && !docLevelThreadUrls().has(url)));
+  const displayedThreadUrls = createMemo(() => threadUrls().filter((url) => threadsWithVisibleTarget().has(url)));
   const overlappingThreads = createMemo(() => renderableThreadUrls().filter((url) => threadOverlapsSelection(threadTargetHandleMap().get(url) ?? [], selectedHandles())));
   const [pinnedThread, setPinnedThread] = createSignal();
   const primaryThreadUrl = createMemo(() => {
@@ -1179,10 +1179,11 @@ function CommentsView(props) {
     const p = primaryThreadUrl();
     return new Set(overlappingThreads().filter((u) => u !== p));
   });
+  const [hoveredThread, setHoveredThread] = createSignal();
   createEffect(() => {
     const handle = focusHandle();
     if (!handle) return;
-    const p = primaryThreadUrl();
+    const p = hoveredThread() ?? primaryThreadUrl();
     const urls = p ? threadTargetUrlMap().get(p) ?? [] : [];
     const desired = {};
     for (const u of urls) desired[u] = true;
@@ -1252,6 +1253,8 @@ function CommentsView(props) {
           },
           children: (threadUrl) => (() => {
             var _el$6 = _tmpl$4$1(), _el$7 = _el$6.firstChild;
+            _el$6.addEventListener("mouseleave", () => setHoveredThread((u) => u === threadUrl ? void 0 : u));
+            _el$6.addEventListener("mouseenter", () => setHoveredThread(threadUrl));
             _el$6.$$click = (e) => onClickThreadCard(e, threadUrl);
             _el$7.docUrl = threadUrl;
             _el$7._$owner = getOwner();
@@ -1351,12 +1354,12 @@ function flatHandles(map) {
 }
 function targetIsVisible(handle) {
   const positions = handle.rangePositions();
-  if (!positions) return false;
+  if (!positions) return true;
   const [start, end] = positions;
   return start !== end;
 }
 function threadOverlapsSelection(targets, selection) {
-  return targets.some((t) => selection.some((s) => s.overlaps(t)));
+  return targets.some((t) => selection.some((s) => s.overlaps(t) || s.url === t.url || s.contains(t)));
 }
 delegateEvents(["click"]);
 const relativeTime = (timestamp) => {
@@ -2825,7 +2828,8 @@ function CuteDraftEditor(props) {
     return _el$16;
   })();
 }
-function createElementAttribute(element, name, fallback) {
+function createElementAttribute(toolElement, name, fallback) {
+  const element = toolElement.closest("patchwork-view") ?? toolElement;
   const read2 = () => element.getAttribute(name) ?? fallback;
   const [value, setValue] = createSignal(read2());
   onMount(() => {
@@ -2881,4 +2885,4 @@ export {
   renderCommentThread,
   renderCommentsView
 };
-//# sourceMappingURL=main-DfvTgZ-4.js.map
+//# sourceMappingURL=main-51fB7vpU.js.map