donobu 5.41.2 → 5.41.3

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.
Files changed (5) hide show
  1. package/dist/esm/managers/InteractionVisualizer.d.ts +2 -0
  2. package/dist/esm/managers/InteractionVisualizer.js +17 -6
  3. package/dist/managers/InteractionVisualizer.d.ts +2 -0
  4. package/dist/managers/InteractionVisualizer.js +17 -6
  5. package/package.json +1 -1
package/dist/esm/managers/InteractionVisualizer.d.ts CHANGED
@@ -2,6 +2,8 @@ import type { Locator, Page } from 'playwright';
2
2
  export declare class InteractionVisualizer {
3
3
  readonly defaultMessageDurationMillis: number;
4
4
  private static readonly RAW_MOUSE_D;
5
+ private static readonly TIP_X;
6
+ private static readonly TIP_Y;
5
7
  private static readonly SVG_MOUSE;
6
8
  private static readonly SVG_MOUSE_JSON;
7
9
  private static readonly CSS;
package/dist/esm/managers/InteractionVisualizer.js CHANGED
@@ -145,7 +145,7 @@ class InteractionVisualizer {
145
145
  }
146
146
  async ensureCursor(page) {
147
147
  const id = InteractionVisualizer.CONTAINER_ID;
148
- await page.evaluate(([containerId, position, svg, svgAttrs]) => {
148
+ await page.evaluate(([containerId, position, svg, svgAttrs, tipX, tipY]) => {
149
149
  const root = document.getElementById(containerId).shadowRoot;
150
150
  let cursor = root.querySelector('.donobu-virtual-mouse');
151
151
  if (cursor) {
@@ -175,24 +175,26 @@ class InteractionVisualizer {
175
175
  }
176
176
  const pos = position;
177
177
  cursor.style.transitionDuration = '0s';
178
- cursor.style.transform = `translate(${pos.x - 12}px, ${pos.y - 12}px)`;
178
+ cursor.style.transform = `translate(${pos.x - tipX}px, ${pos.y - tipY}px)`;
179
179
  root.appendChild(cursor);
180
180
  }, [
181
181
  id,
182
182
  this.cursorPos,
183
183
  InteractionVisualizer.SVG_MOUSE,
184
184
  JSON.stringify(InteractionVisualizer.SVG_MOUSE_JSON),
185
+ InteractionVisualizer.TIP_X,
186
+ InteractionVisualizer.TIP_Y,
185
187
  ]);
186
188
  }
187
189
  async moveCursor(page, target, duration) {
188
190
  await this.ensureCursor(page);
189
191
  const id = InteractionVisualizer.CONTAINER_ID;
190
- await page.evaluate(([containerId, end, duration]) => {
192
+ await page.evaluate(([containerId, end, duration, tipX, tipY]) => {
191
193
  const root = document.getElementById(containerId).shadowRoot;
192
194
  const cursor = root.querySelector('.donobu-virtual-mouse');
193
195
  cursor.style.transitionDuration = `${duration}ms`;
194
196
  const endPos = end;
195
- cursor.style.transform = `translate(${endPos.x - 12}px, ${endPos.y - 12}px)`;
197
+ cursor.style.transform = `translate(${endPos.x - tipX}px, ${endPos.y - tipY}px)`;
196
198
  cursor.classList.add('rippling');
197
199
  const done = new Promise((resolve) => {
198
200
  const finish = () => {
@@ -204,7 +206,13 @@ class InteractionVisualizer {
204
206
  setTimeout(finish, duration + 50);
205
207
  });
206
208
  return done;
207
- }, [id, target, duration]);
209
+ }, [
210
+ id,
211
+ target,
212
+ duration,
213
+ InteractionVisualizer.TIP_X,
214
+ InteractionVisualizer.TIP_Y,
215
+ ]);
208
216
  this.cursorPos = target;
209
217
  }
210
218
  async showMessage(page, target, text, duration) {
@@ -246,6 +254,9 @@ exports.InteractionVisualizer = InteractionVisualizer;
246
254
  /* Constants */
247
255
  /* ------------------------------------------------------------------ */
248
256
  InteractionVisualizer.RAW_MOUSE_D = 'M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z';
257
+ // Arrow tip within the 24×24 viewBox — matches the M command at the start of RAW_MOUSE_D.
258
+ InteractionVisualizer.TIP_X = 4.037;
259
+ InteractionVisualizer.TIP_Y = 4.688;
249
260
  InteractionVisualizer.SVG_MOUSE = `
250
261
  <svg xmlns="http://www.w3.org/2000/svg"
251
262
  width="32"
@@ -279,7 +290,7 @@ InteractionVisualizer.CSS = `
279
290
  .donobu-virtual-mouse{width:24px;height:24px;position:absolute;z-index:2147483646;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5));transition:transform .15s ease-in-out;pointer-events:none;opacity:1;visibility:visible}
280
291
  .donobu-virtual-mouse.hidden{opacity:0;visibility:hidden}
281
292
  .donobu-virtual-mouse svg{width:100%;height:100%;display:block}
282
- .donobu-virtual-mouse.rippling::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;background:#FF781B;transform:translate(-50%,-50%) scale(.5);opacity:.4;animation:ripple-pop .6s ease-out forwards}
293
+ .donobu-virtual-mouse.rippling::after{content:"";position:absolute;left:${InteractionVisualizer.TIP_X}px;top:${InteractionVisualizer.TIP_Y}px;width:24px;height:24px;border-radius:50%;background:#FF781B;transform:translate(-50%,-50%) scale(.5);opacity:.4;animation:ripple-pop .6s ease-out forwards}
283
294
  @keyframes ripple-pop{40%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}
284
295
  `;
285
296
  InteractionVisualizer.CONTAINER_ID = 'donobu-iv-overlay';
package/dist/managers/InteractionVisualizer.d.ts CHANGED
@@ -2,6 +2,8 @@ import type { Locator, Page } from 'playwright';
2
2
  export declare class InteractionVisualizer {
3
3
  readonly defaultMessageDurationMillis: number;
4
4
  private static readonly RAW_MOUSE_D;
5
+ private static readonly TIP_X;
6
+ private static readonly TIP_Y;
5
7
  private static readonly SVG_MOUSE;
6
8
  private static readonly SVG_MOUSE_JSON;
7
9
  private static readonly CSS;
package/dist/managers/InteractionVisualizer.js CHANGED
@@ -145,7 +145,7 @@ class InteractionVisualizer {
145
145
  }
146
146
  async ensureCursor(page) {
147
147
  const id = InteractionVisualizer.CONTAINER_ID;
148
- await page.evaluate(([containerId, position, svg, svgAttrs]) => {
148
+ await page.evaluate(([containerId, position, svg, svgAttrs, tipX, tipY]) => {
149
149
  const root = document.getElementById(containerId).shadowRoot;
150
150
  let cursor = root.querySelector('.donobu-virtual-mouse');
151
151
  if (cursor) {
@@ -175,24 +175,26 @@ class InteractionVisualizer {
175
175
  }
176
176
  const pos = position;
177
177
  cursor.style.transitionDuration = '0s';
178
- cursor.style.transform = `translate(${pos.x - 12}px, ${pos.y - 12}px)`;
178
+ cursor.style.transform = `translate(${pos.x - tipX}px, ${pos.y - tipY}px)`;
179
179
  root.appendChild(cursor);
180
180
  }, [
181
181
  id,
182
182
  this.cursorPos,
183
183
  InteractionVisualizer.SVG_MOUSE,
184
184
  JSON.stringify(InteractionVisualizer.SVG_MOUSE_JSON),
185
+ InteractionVisualizer.TIP_X,
186
+ InteractionVisualizer.TIP_Y,
185
187
  ]);
186
188
  }
187
189
  async moveCursor(page, target, duration) {
188
190
  await this.ensureCursor(page);
189
191
  const id = InteractionVisualizer.CONTAINER_ID;
190
- await page.evaluate(([containerId, end, duration]) => {
192
+ await page.evaluate(([containerId, end, duration, tipX, tipY]) => {
191
193
  const root = document.getElementById(containerId).shadowRoot;
192
194
  const cursor = root.querySelector('.donobu-virtual-mouse');
193
195
  cursor.style.transitionDuration = `${duration}ms`;
194
196
  const endPos = end;
195
- cursor.style.transform = `translate(${endPos.x - 12}px, ${endPos.y - 12}px)`;
197
+ cursor.style.transform = `translate(${endPos.x - tipX}px, ${endPos.y - tipY}px)`;
196
198
  cursor.classList.add('rippling');
197
199
  const done = new Promise((resolve) => {
198
200
  const finish = () => {
@@ -204,7 +206,13 @@ class InteractionVisualizer {
204
206
  setTimeout(finish, duration + 50);
205
207
  });
206
208
  return done;
207
- }, [id, target, duration]);
209
+ }, [
210
+ id,
211
+ target,
212
+ duration,
213
+ InteractionVisualizer.TIP_X,
214
+ InteractionVisualizer.TIP_Y,
215
+ ]);
208
216
  this.cursorPos = target;
209
217
  }
210
218
  async showMessage(page, target, text, duration) {
@@ -246,6 +254,9 @@ exports.InteractionVisualizer = InteractionVisualizer;
246
254
  /* Constants */
247
255
  /* ------------------------------------------------------------------ */
248
256
  InteractionVisualizer.RAW_MOUSE_D = 'M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z';
257
+ // Arrow tip within the 24×24 viewBox — matches the M command at the start of RAW_MOUSE_D.
258
+ InteractionVisualizer.TIP_X = 4.037;
259
+ InteractionVisualizer.TIP_Y = 4.688;
249
260
  InteractionVisualizer.SVG_MOUSE = `
250
261
  <svg xmlns="http://www.w3.org/2000/svg"
251
262
  width="32"
@@ -279,7 +290,7 @@ InteractionVisualizer.CSS = `
279
290
  .donobu-virtual-mouse{width:24px;height:24px;position:absolute;z-index:2147483646;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5));transition:transform .15s ease-in-out;pointer-events:none;opacity:1;visibility:visible}
280
291
  .donobu-virtual-mouse.hidden{opacity:0;visibility:hidden}
281
292
  .donobu-virtual-mouse svg{width:100%;height:100%;display:block}
282
- .donobu-virtual-mouse.rippling::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;background:#FF781B;transform:translate(-50%,-50%) scale(.5);opacity:.4;animation:ripple-pop .6s ease-out forwards}
293
+ .donobu-virtual-mouse.rippling::after{content:"";position:absolute;left:${InteractionVisualizer.TIP_X}px;top:${InteractionVisualizer.TIP_Y}px;width:24px;height:24px;border-radius:50%;background:#FF781B;transform:translate(-50%,-50%) scale(.5);opacity:.4;animation:ripple-pop .6s ease-out forwards}
283
294
  @keyframes ripple-pop{40%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}
284
295
  `;
285
296
  InteractionVisualizer.CONTAINER_ID = 'donobu-iv-overlay';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "donobu",
3
- "version": "5.41.2",
3
+ "version": "5.41.3",
4
4
  "description": "Create browser automations with an LLM agent and replay them as Playwright scripts.",
5
5
  "main": "dist/main.js",
6
6
  "module": "dist/esm/main.js",