@inkandswitch/patchwork-pkg-base 0.0.75 → 0.0.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/module-settings-url +1 -1
- package/package.json +1 -1
- package/packages/comments-view/dist/assets/{main-DfvTgZ-4.js → main-51fB7vpU.js} +12 -8
- package/packages/comments-view/dist/assets/main-51fB7vpU.js.map +1 -0
- package/packages/comments-view/dist/index.js +3 -3
- package/plugin-registry-url +1 -1
- package/packages/comments-view/dist/assets/main-DfvTgZ-4.js.map +0 -1
package/module-settings-url
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
automerge:
|
|
1
|
+
automerge:2sEcLEmBVUGxfQs3TBkZkXxEdrS3
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
try {
|
|
4
4
|
if (typeof document != "undefined") {
|
|
5
5
|
var elementStyle = document.createElement("style");
|
|
6
|
-
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
|
|
6
|
+
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}"));
|
|
7
7
|
document.head.appendChild(elementStyle);
|
|
8
8
|
}
|
|
9
9
|
} catch (e) {
|
|
@@ -1153,7 +1153,6 @@ function CommentsView(props) {
|
|
|
1153
1153
|
const selectedHandles = useResolvedHandles(() => Object.keys(focusDoc()?.selection ?? {}), repo);
|
|
1154
1154
|
const threadTargetHandleMap = useResolvedHandleMap(threadTargetUrlMap, repo);
|
|
1155
1155
|
const threadsWithVisibleTarget = useThreadsWithVisibleTarget(threadTargetUrlMap, repo);
|
|
1156
|
-
const renderableThreadUrls = createMemo(() => threadUrls().filter((url) => threadsWithVisibleTarget().has(url)));
|
|
1157
1156
|
const docLevelThreadUrls = createMemo(() => {
|
|
1158
1157
|
const map = threadTargetUrlMap();
|
|
1159
1158
|
const set = /* @__PURE__ */ new Set();
|
|
@@ -1164,7 +1163,8 @@ function CommentsView(props) {
|
|
|
1164
1163
|
}
|
|
1165
1164
|
return set;
|
|
1166
1165
|
});
|
|
1167
|
-
const
|
|
1166
|
+
const renderableThreadUrls = createMemo(() => threadUrls().filter((url) => threadsWithVisibleTarget().has(url) && !docLevelThreadUrls().has(url)));
|
|
1167
|
+
const displayedThreadUrls = createMemo(() => threadUrls().filter((url) => threadsWithVisibleTarget().has(url)));
|
|
1168
1168
|
const overlappingThreads = createMemo(() => renderableThreadUrls().filter((url) => threadOverlapsSelection(threadTargetHandleMap().get(url) ?? [], selectedHandles())));
|
|
1169
1169
|
const [pinnedThread, setPinnedThread] = createSignal();
|
|
1170
1170
|
const primaryThreadUrl = createMemo(() => {
|
|
@@ -1179,10 +1179,11 @@ function CommentsView(props) {
|
|
|
1179
1179
|
const p = primaryThreadUrl();
|
|
1180
1180
|
return new Set(overlappingThreads().filter((u) => u !== p));
|
|
1181
1181
|
});
|
|
1182
|
+
const [hoveredThread, setHoveredThread] = createSignal();
|
|
1182
1183
|
createEffect(() => {
|
|
1183
1184
|
const handle = focusHandle();
|
|
1184
1185
|
if (!handle) return;
|
|
1185
|
-
const p = primaryThreadUrl();
|
|
1186
|
+
const p = hoveredThread() ?? primaryThreadUrl();
|
|
1186
1187
|
const urls = p ? threadTargetUrlMap().get(p) ?? [] : [];
|
|
1187
1188
|
const desired = {};
|
|
1188
1189
|
for (const u of urls) desired[u] = true;
|
|
@@ -1252,6 +1253,8 @@ function CommentsView(props) {
|
|
|
1252
1253
|
},
|
|
1253
1254
|
children: (threadUrl) => (() => {
|
|
1254
1255
|
var _el$6 = _tmpl$4$1(), _el$7 = _el$6.firstChild;
|
|
1256
|
+
_el$6.addEventListener("mouseleave", () => setHoveredThread((u) => u === threadUrl ? void 0 : u));
|
|
1257
|
+
_el$6.addEventListener("mouseenter", () => setHoveredThread(threadUrl));
|
|
1255
1258
|
_el$6.$$click = (e) => onClickThreadCard(e, threadUrl);
|
|
1256
1259
|
_el$7.docUrl = threadUrl;
|
|
1257
1260
|
_el$7._$owner = getOwner();
|
|
@@ -1351,12 +1354,12 @@ function flatHandles(map) {
|
|
|
1351
1354
|
}
|
|
1352
1355
|
function targetIsVisible(handle) {
|
|
1353
1356
|
const positions = handle.rangePositions();
|
|
1354
|
-
if (!positions) return
|
|
1357
|
+
if (!positions) return true;
|
|
1355
1358
|
const [start, end] = positions;
|
|
1356
1359
|
return start !== end;
|
|
1357
1360
|
}
|
|
1358
1361
|
function threadOverlapsSelection(targets, selection) {
|
|
1359
|
-
return targets.some((t) => selection.some((s) => s.overlaps(t)));
|
|
1362
|
+
return targets.some((t) => selection.some((s) => s.overlaps(t) || s.url === t.url || s.contains(t)));
|
|
1360
1363
|
}
|
|
1361
1364
|
delegateEvents(["click"]);
|
|
1362
1365
|
const relativeTime = (timestamp) => {
|
|
@@ -2825,7 +2828,8 @@ function CuteDraftEditor(props) {
|
|
|
2825
2828
|
return _el$16;
|
|
2826
2829
|
})();
|
|
2827
2830
|
}
|
|
2828
|
-
function createElementAttribute(
|
|
2831
|
+
function createElementAttribute(toolElement, name, fallback) {
|
|
2832
|
+
const element = toolElement.closest("patchwork-view") ?? toolElement;
|
|
2829
2833
|
const read2 = () => element.getAttribute(name) ?? fallback;
|
|
2830
2834
|
const [value, setValue] = createSignal(read2());
|
|
2831
2835
|
onMount(() => {
|
|
@@ -2881,4 +2885,4 @@ export {
|
|
|
2881
2885
|
renderCommentThread,
|
|
2882
2886
|
renderCommentsView
|
|
2883
2887
|
};
|
|
2884
|
-
//# sourceMappingURL=main-
|
|
2888
|
+
//# sourceMappingURL=main-51fB7vpU.js.map
|