@hachej/boring-feedback 0.4.29 → 0.4.31

package/dist/page/picker/overlay.d.ts

@@ -36,7 +36,13 @@ export interface OverlayOptions {
     readonly styles?: string;
     /** Where the host is appended; defaults to `document.body`. Never inside the application root. */
     readonly mount?: Element;
+    /** `above` (default): the label sits over the box's top-left corner. `corner`: centred on the box's top-right corner, like a numbered pin. */
+    readonly labels?: 'above' | 'corner';
+    /** `element`: each box takes its element's own border radius (default: the overlay's square box). */
+    readonly shape?: 'box' | 'element';
+    /** Nothing is drawn outside this element's rectangle (a scroll container whose bottom part is taken by another surface). */
+    readonly clip?: Element;
 }
 /** Creates the overlay host and its shadow root. Nothing is drawn until `draw` or `highlight`. */
-export declare function createOverlay({ document, styles, mount }: OverlayOptions): PickerOverlay;
+export declare function createOverlay({ document, styles, mount, labels, shape, clip }: OverlayOptions): PickerOverlay;
 //# sourceMappingURL=overlay.d.ts.map

package/dist/page/picker/overlay.js

@@ -23,7 +23,7 @@ const BASE_STYLES = `
 `;
 const LABEL_HEIGHT = 22;
 /** Creates the overlay host and its shadow root. Nothing is drawn until `draw` or `highlight`. */
-export function createOverlay({ document, styles, mount }) {
+export function createOverlay({ document, styles, mount, labels = 'above', shape = 'box', clip }) {
     const host = document.createElement('div');
     host.setAttribute(FEEDBACK_OVERLAY_ATTRIBUTE, '');
     host.setAttribute('data-boring', 'feedback');
@@ -50,6 +50,10 @@ export function createOverlay({ document, styles, mount }) {
         frame = undefined;
         layer.replaceChildren();
         const height = view?.innerHeight ?? 0;
+        if (clip) {
+            const area = clip.getBoundingClientRect();
+            layer.style.clipPath = `inset(${area.top}px ${(view?.innerWidth ?? 0) - area.right}px ${height - area.bottom}px ${area.left}px)`;
+        }
         for (const item of boxes) {
             if (!item.element.isConnected)
                 continue;
@@ -59,14 +63,20 @@ export function createOverlay({ document, styles, mount }) {
             box.dataset['tone'] = item.tone;
             box.setAttribute('part', `box box-${item.tone}`);
             box.style.cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px`;
+            if (shape === 'element' && view)
+                box.style.borderRadius = view.getComputedStyle(item.element).borderRadius;
             const label = document.createElement('div');
             label.className = 'label';
             label.dataset['tone'] = item.tone;
             label.setAttribute('part', `label label-${item.tone}`);
             label.textContent = item.label;
-            const above = rect.top - LABEL_HEIGHT - 2;
-            const top = above >= 0 ? above : Math.min(rect.bottom + 2, Math.max(0, height - LABEL_HEIGHT));
-            label.style.cssText = `top:${top}px;left:${Math.max(0, rect.left)}px`;
+            if (labels === 'corner')
+                label.style.cssText = `top:${rect.top}px;left:${rect.right}px`;
+            else {
+                const above = rect.top - LABEL_HEIGHT - 2;
+                const top = above >= 0 ? above : Math.min(rect.bottom + 2, Math.max(0, height - LABEL_HEIGHT));
+                label.style.cssText = `top:${top}px;left:${Math.max(0, rect.left)}px`;
+            }
             layer.append(box, label);
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-feedback",
-  "version": "0.4.29",
+  "version": "0.4.31",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -52,9 +52,9 @@
     }
   },
   "peerDependencies": {
-    "@hachej/boring-ui-kit": "^0.4.29",
-    "@hachej/boring-files": "^0.4.29",
-    "@hachej/boring-agent": "^0.4.29",
+    "@hachej/boring-ui-kit": "^0.4.31",
+    "@hachej/boring-files": "^0.4.31",
+    "@hachej/boring-agent": "^0.4.31",
     "@earendil-works/pi-durable": "~1.4.0",
     "@earendil-works/pi-ai": "~1.4.0",
     "@earendil-works/chord": "~1.4.0",