@loupekit/sdk 0.3.2 → 0.3.3-next.8
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/dist/index.global.js +22 -1
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +22 -1
- package/dist/index.js.map +1 -1
- package/package.json +26 -7
package/dist/index.js
CHANGED
|
@@ -78,7 +78,14 @@ var STYLES = (
|
|
|
78
78
|
.toolbar button .ico { flex: none; display: block; }
|
|
79
79
|
.toolbar button.on { background: var(--accent); color: #fff; }
|
|
80
80
|
.toolbar .sep { width: 1px; height: 20px; background: #333846; margin: 0 2px; }
|
|
81
|
-
.toolbar .brand {
|
|
81
|
+
.toolbar .brand {
|
|
82
|
+
font-weight: 700; padding: 8px; border-radius: 8px; letter-spacing: -.01em;
|
|
83
|
+
cursor: pointer; user-select: none;
|
|
84
|
+
}
|
|
85
|
+
.toolbar .brand:hover { background: #2b2f3b; }
|
|
86
|
+
/* collapsed \u2192 show only the brand/logo; click it again to expand */
|
|
87
|
+
.toolbar.collapsed { gap: 0; }
|
|
88
|
+
.toolbar.collapsed > *:not(.brand) { display: none; }
|
|
82
89
|
.toolbar .count {
|
|
83
90
|
background: var(--pin); color: #fff; font-size: 11px; font-weight: 700;
|
|
84
91
|
border-radius: 999px; padding: 1px 7px; margin-left: 2px;
|
|
@@ -2105,6 +2112,7 @@ var LoupeApp = class {
|
|
|
2105
2112
|
/** comment.id → pin element. */
|
|
2106
2113
|
this.pins = /* @__PURE__ */ new Map();
|
|
2107
2114
|
this.mode = "off";
|
|
2115
|
+
this.collapsed = false;
|
|
2108
2116
|
this.targetOffset = { x: 0.5, y: 0.5 };
|
|
2109
2117
|
this.pending = null;
|
|
2110
2118
|
this.dragStart = null;
|
|
@@ -2273,6 +2281,9 @@ var LoupeApp = class {
|
|
|
2273
2281
|
buildToolbar() {
|
|
2274
2282
|
const bar = el("div", "toolbar");
|
|
2275
2283
|
const brand = el("span", "brand", "\u25CE Loupe");
|
|
2284
|
+
brand.title = "Collapse / expand the Loupe bar";
|
|
2285
|
+
brand.setAttribute("role", "button");
|
|
2286
|
+
brand.onclick = () => this.toggleCollapsed();
|
|
2276
2287
|
const inspectBtn = el("button", "", "\u271B Inspect & comment");
|
|
2277
2288
|
inspectBtn.dataset.role = "inspect";
|
|
2278
2289
|
inspectBtn.onclick = () => this.setMode(this.mode === "inspect" ? "off" : "inspect");
|
|
@@ -2518,6 +2529,16 @@ var LoupeApp = class {
|
|
|
2518
2529
|
this.panel.classList.toggle("open");
|
|
2519
2530
|
this.renderPanel();
|
|
2520
2531
|
}
|
|
2532
|
+
/** Collapse the toolbar to just the logo (or expand it back). */
|
|
2533
|
+
toggleCollapsed() {
|
|
2534
|
+
this.collapsed = !this.collapsed;
|
|
2535
|
+
this.toolbar.classList.toggle("collapsed", this.collapsed);
|
|
2536
|
+
if (this.collapsed) {
|
|
2537
|
+
this.setMode("off");
|
|
2538
|
+
this.panel.classList.remove("open");
|
|
2539
|
+
this.closeComposer();
|
|
2540
|
+
}
|
|
2541
|
+
}
|
|
2521
2542
|
renderPanel() {
|
|
2522
2543
|
const p = this.panel;
|
|
2523
2544
|
p.innerHTML = "";
|