@maayan-albert/moab-sdk 1.0.3 → 1.0.4

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 (11) hide show
  1. package/dist/components/DrawingTool.d.ts +0 -1
  2. package/dist/components/DrawingTool.d.ts.map +1 -1
  3. package/dist/components.js +175 -331
  4. package/dist/components.js.map +1 -1
  5. package/dist/components.mjs +176 -332
  6. package/dist/components.mjs.map +1 -1
  7. package/dist/index.js +175 -331
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +176 -332
  10. package/dist/index.mjs.map +1 -1
  11. package/package.json +1 -1
package/dist/components/DrawingTool.d.ts CHANGED
@@ -3,7 +3,6 @@ export interface DrawingToolProps extends React.HTMLAttributes<HTMLDivElement> {
3
3
  width?: number;
4
4
  height?: number;
5
5
  className?: string;
6
- overlay?: boolean;
7
6
  }
8
7
  /**
9
8
  * DrawingTool component - A canvas-based drawing tool
package/dist/components/DrawingTool.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DrawingTool.d.ts","sourceRoot":"","sources":["../../src/components/DrawingTool.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmoBlD,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"DrawingTool.d.ts","sourceRoot":"","sources":["../../src/components/DrawingTool.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgflD,CAAC;AAEF,eAAe,WAAW,CAAC"}
package/dist/components.js CHANGED
@@ -96,7 +96,6 @@ var DrawingTool = ({
96
96
  width,
97
97
  height,
98
98
  className = "",
99
- overlay = true,
100
99
  ...props
101
100
  }) => {
102
101
  const canvasRef = react.useRef(null);
@@ -112,23 +111,16 @@ var DrawingTool = ({
112
111
  const [dragStart, setDragStart] = react.useState({ x: 0, y: 0 });
113
112
  const [showClearTooltip, setShowClearTooltip] = react.useState(false);
114
113
  react.useEffect(() => {
115
- if (overlay) {
116
- const updateSize = () => {
117
- setCanvasSize({
118
- width: window.innerWidth,
119
- height: window.innerHeight
120
- });
121
- };
122
- updateSize();
123
- window.addEventListener("resize", updateSize);
124
- return () => window.removeEventListener("resize", updateSize);
125
- } else {
114
+ const updateSize = () => {
126
115
  setCanvasSize({
127
- width: width || 800,
128
- height: height || 600
116
+ width: window.innerWidth,
117
+ height: window.innerHeight
129
118
  });
130
- }
131
- }, [overlay, width, height]);
119
+ };
120
+ updateSize();
121
+ window.addEventListener("resize", updateSize);
122
+ return () => window.removeEventListener("resize", updateSize);
123
+ }, []);
132
124
  react.useEffect(() => {
133
125
  const canvas = canvasRef.current;
134
126
  if (!canvas || canvasSize.width === 0 || canvasSize.height === 0) return;
@@ -320,158 +312,57 @@ var DrawingTool = ({
320
312
  document.removeEventListener("mouseup", handleMouseUp);
321
313
  };
322
314
  }, [isDragging, dragStart, getTargetCorner]);
323
- if (overlay) {
324
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
325
- /* @__PURE__ */ jsxRuntime.jsx(
326
- "canvas",
327
- {
328
- ref: canvasRef,
329
- onMouseDown: startDrawing,
330
- onMouseMove: draw,
331
- onMouseUp: stopDrawing,
332
- onMouseLeave: stopDrawing,
333
- onTouchStart: startDrawing,
334
- onTouchMove: draw,
335
- onTouchEnd: stopDrawing,
336
- className: `fixed top-0 left-0 touch-none z-50 transition-opacity ${enabled && !isDragging ? "cursor-crosshair pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
337
- style: {
338
- width: `${canvasSize.width}px`,
339
- height: `${canvasSize.height}px`
340
- }
315
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "contents" }, children: [
316
+ /* @__PURE__ */ jsxRuntime.jsx(
317
+ "canvas",
318
+ {
319
+ ref: canvasRef,
320
+ onMouseDown: startDrawing,
321
+ onMouseMove: draw,
322
+ onMouseUp: stopDrawing,
323
+ onMouseLeave: stopDrawing,
324
+ onTouchStart: startDrawing,
325
+ onTouchMove: draw,
326
+ onTouchEnd: stopDrawing,
327
+ className: `fixed top-0 left-0 touch-none z-50 transition-opacity ${enabled && !isDragging ? "cursor-crosshair pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
328
+ style: {
329
+ width: `${canvasSize.width}px`,
330
+ height: `${canvasSize.height}px`
341
331
  }
342
- ),
343
- /* @__PURE__ */ jsxRuntime.jsxs(
344
- "div",
345
- {
346
- ref: toolbarRef,
347
- className: `fixed flex flex-row items-center px-2 py-1.5 bg-neutral-800 rounded-full shadow-lg z-[60] ${isDragging ? "cursor-grabbing" : "cursor-grab"} ${className}`,
348
- style: {
349
- gap: enabled ? "8px" : "0px",
350
- transition: "gap 300ms ease-in-out",
351
- ...corner === "top-left" ? { top: "16px", left: "16px", bottom: "auto", right: "auto" } : corner === "top-right" ? { top: "16px", right: "16px", bottom: "auto", left: "auto" } : corner === "bottom-left" ? { bottom: "16px", left: "16px", top: "auto", right: "auto" } : { bottom: "16px", right: "16px", top: "auto", left: "auto" }
352
- },
353
- onMouseDown: handleMouseDown,
354
- ...props,
355
- onClick: (e) => e.stopPropagation(),
356
- children: [
357
- /* @__PURE__ */ jsxRuntime.jsx(
358
- "div",
359
- {
360
- className: "overflow-hidden flex-shrink-0",
361
- style: {
362
- maxWidth: enabled ? "100px" : "0px",
363
- opacity: enabled ? 1 : 0,
364
- transition: "max-width 300ms ease-in-out, opacity 300ms ease-in-out"
365
- },
366
- children: /* @__PURE__ */ jsxRuntime.jsx(
367
- "button",
368
- {
369
- onClick: (e) => {
370
- e.stopPropagation();
371
- takeScreenshot();
372
- },
373
- className: "p-2 text-white hover:bg-neutral-600/30 rounded-full transition-colors focus:outline-none whitespace-nowrap",
374
- "aria-label": "Take screenshot",
375
- children: /* @__PURE__ */ jsxRuntime.jsxs(
376
- "svg",
377
- {
378
- xmlns: "http://www.w3.org/2000/svg",
379
- width: "18",
380
- height: "18",
381
- viewBox: "0 0 24 24",
382
- fill: "none",
383
- stroke: "currentColor",
384
- strokeWidth: "2",
385
- strokeLinecap: "round",
386
- strokeLinejoin: "round",
387
- className: "lucide lucide-camera",
388
- children: [
389
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" }),
390
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "3" })
391
- ]
392
- }
393
- )
394
- }
395
- )
396
- }
397
- ),
398
- /* @__PURE__ */ jsxRuntime.jsxs(
399
- "div",
400
- {
401
- className: "overflow-hidden flex-shrink-0 relative",
402
- style: {
403
- maxWidth: enabled ? "100px" : "0px",
404
- opacity: enabled ? 1 : 0,
405
- transition: "max-width 300ms ease-in-out, opacity 300ms ease-in-out"
406
- },
407
- children: [
408
- /* @__PURE__ */ jsxRuntime.jsxs(
409
- "button",
410
- {
411
- onClick: (e) => {
412
- e.stopPropagation();
413
- clearCanvas();
414
- setShowClearTooltip(false);
415
- },
416
- onMouseEnter: () => {
417
- if (hasContent) {
418
- setShowClearTooltip(true);
419
- }
420
- },
421
- onMouseLeave: () => setShowClearTooltip(false),
422
- disabled: !hasContent,
423
- className: "p-2 text-white rounded-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed relative group",
424
- "aria-label": "Clear canvas",
425
- children: [
426
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-red-600/30 opacity-0 group-hover:opacity-100 transition-opacity disabled:group-hover:opacity-0" }),
427
- /* @__PURE__ */ jsxRuntime.jsx(
428
- lucideReact.Trash2,
429
- {
430
- size: 18,
431
- strokeWidth: 2,
432
- className: "relative z-10 group-hover:text-red-600 transition-colors"
433
- }
434
- )
435
- ]
436
- }
437
- ),
438
- showClearTooltip && hasContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-neutral-800 rounded-full shadow-lg whitespace-nowrap z-[70]", children: [
439
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
440
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-sm", children: "Clear all" }),
441
- /* @__PURE__ */ jsxRuntime.jsx(
442
- "button",
443
- {
444
- onClick: (e) => {
445
- e.stopPropagation();
446
- setShowClearTooltip(false);
447
- },
448
- onMouseDown: (e) => e.stopPropagation(),
449
- className: "text-white hover:text-neutral-300 transition-colors rounded-full",
450
- "aria-label": "Dismiss tooltip",
451
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14, strokeWidth: 2 })
452
- }
453
- )
454
- ] }),
455
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 -mt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-neutral-800 rotate-45" }) })
456
- ] })
457
- ]
458
- }
459
- ),
460
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
461
- /* @__PURE__ */ jsxRuntime.jsx(
332
+ }
333
+ ),
334
+ /* @__PURE__ */ jsxRuntime.jsxs(
335
+ "div",
336
+ {
337
+ ref: toolbarRef,
338
+ className: `fixed flex flex-row items-center px-2 py-1.5 bg-neutral-800 rounded-full shadow-lg z-[60] ${isDragging ? "cursor-grabbing" : "cursor-grab"} ${className}`,
339
+ style: {
340
+ gap: enabled ? "8px" : "0px",
341
+ transition: "gap 300ms ease-in-out",
342
+ ...corner === "top-left" ? { top: "16px", left: "16px", bottom: "auto", right: "auto" } : corner === "top-right" ? { top: "16px", right: "16px", bottom: "auto", left: "auto" } : corner === "bottom-left" ? { bottom: "16px", left: "16px", top: "auto", right: "auto" } : { bottom: "16px", right: "16px", top: "auto", left: "auto" }
343
+ },
344
+ onMouseDown: handleMouseDown,
345
+ ...props,
346
+ onClick: (e) => e.stopPropagation(),
347
+ children: [
348
+ /* @__PURE__ */ jsxRuntime.jsx(
349
+ "div",
350
+ {
351
+ className: "overflow-hidden flex-shrink-0",
352
+ style: {
353
+ maxWidth: enabled ? "100px" : "0px",
354
+ opacity: enabled ? 1 : 0,
355
+ transition: "max-width 300ms ease-in-out, opacity 300ms ease-in-out"
356
+ },
357
+ children: /* @__PURE__ */ jsxRuntime.jsx(
462
358
  "button",
463
359
  {
464
360
  onClick: (e) => {
465
361
  e.stopPropagation();
466
- setEnabled(!enabled);
362
+ takeScreenshot();
467
363
  },
468
- className: "p-1.5 text-white hover:bg-neutral-600/30 rounded-full transition-all focus:outline-none",
469
- style: {
470
- opacity: enabled ? 0 : 1,
471
- pointerEvents: enabled ? "none" : "auto",
472
- transition: "opacity 300ms ease-in-out"
473
- },
474
- "aria-label": "Turn on drawing",
364
+ className: "p-2 text-white hover:bg-neutral-600/30 rounded-full transition-colors focus:outline-none whitespace-nowrap",
365
+ "aria-label": "Take screenshot",
475
366
  children: /* @__PURE__ */ jsxRuntime.jsxs(
476
367
  "svg",
477
368
  {
@@ -484,185 +375,138 @@ var DrawingTool = ({
484
375
  strokeWidth: "2",
485
376
  strokeLinecap: "round",
486
377
  strokeLinejoin: "round",
487
- className: "lucide lucide-brush",
378
+ className: "lucide lucide-camera",
488
379
  children: [
489
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m11 10 3 3" }),
490
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z" }),
491
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031" })
380
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" }),
381
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "3" })
492
382
  ]
493
383
  }
494
384
  )
495
385
  }
496
- ),
497
- /* @__PURE__ */ jsxRuntime.jsx(
498
- "button",
499
- {
500
- onClick: (e) => {
501
- e.stopPropagation();
502
- setEnabled(false);
503
- },
504
- className: "absolute inset-0 p-1.5 text-white hover:bg-neutral-600/30 rounded-full transition-all focus:outline-none",
505
- style: {
506
- opacity: enabled ? 1 : 0,
507
- pointerEvents: enabled ? "auto" : "none",
508
- transition: "opacity 300ms ease-in-out"
509
- },
510
- "aria-label": "Close",
511
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, strokeWidth: 2.5 })
512
- }
513
386
  )
514
- ] })
515
- ]
516
- }
517
- )
518
- ] });
519
- }
520
- return /* @__PURE__ */ jsxRuntime.jsxs(
521
- "div",
522
- {
523
- className: `flex flex-col items-center gap-4 p-6 bg-white rounded-full shadow-lg border border-gray-200 ${className}`,
524
- ...props,
525
- children: [
526
- /* @__PURE__ */ jsxRuntime.jsxs(
527
- "div",
528
- {
529
- className: "flex flex-row items-center w-full justify-center transition-all duration-300 ease-in-out",
530
- style: {
531
- gap: enabled ? "12px" : "0px"
532
- },
533
- children: [
534
- /* @__PURE__ */ jsxRuntime.jsx(
535
- "button",
536
- {
537
- onClick: () => setEnabled(!enabled),
538
- className: `p-3 rounded-xl transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 ${enabled ? "bg-emerald-500 text-white hover:bg-emerald-600 active:bg-emerald-700" : "bg-slate-500 text-white hover:bg-slate-600 active:bg-slate-700"}`,
539
- "aria-label": enabled ? "Turn off drawing" : "Turn on drawing",
540
- children: enabled ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxRuntime.jsxs(
541
- "svg",
542
- {
543
- xmlns: "http://www.w3.org/2000/svg",
544
- width: "20",
545
- height: "20",
546
- viewBox: "0 0 24 24",
547
- fill: "none",
548
- stroke: "currentColor",
549
- strokeWidth: "2",
550
- strokeLinecap: "round",
551
- strokeLinejoin: "round",
552
- className: "lucide lucide-brush",
553
- children: [
554
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m11 10 3 3" }),
555
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z" }),
556
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031" })
557
- ]
558
- }
559
- )
560
- }
561
- ),
562
- /* @__PURE__ */ jsxRuntime.jsx(
563
- "div",
564
- {
565
- className: "transition-all duration-300 ease-in-out overflow-hidden flex-shrink-0",
566
- style: {
567
- width: enabled ? "52px" : "0px",
568
- minWidth: enabled ? "52px" : "0px",
569
- opacity: enabled ? 1 : 0
570
- },
571
- children: /* @__PURE__ */ jsxRuntime.jsx(
572
- "button",
573
- {
574
- onClick: clearCanvas,
575
- disabled: !hasContent,
576
- className: "p-3 bg-red-500 text-white hover:text-red-200 rounded-xl hover:bg-red-600 active:bg-red-700 transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-500 disabled:hover:shadow-md disabled:active:scale-100 whitespace-nowrap",
577
- "aria-label": "Clear canvas",
578
- children: /* @__PURE__ */ jsxRuntime.jsxs(
579
- "svg",
580
- {
581
- xmlns: "http://www.w3.org/2000/svg",
582
- width: "20",
583
- height: "20",
584
- viewBox: "0 0 24 24",
585
- fill: "none",
586
- stroke: "currentColor",
587
- strokeWidth: "2",
588
- strokeLinecap: "round",
589
- strokeLinejoin: "round",
590
- className: "lucide lucide-brush-cleaning",
591
- children: [
592
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m16 22-1-4" }),
593
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 14a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2h-3a1 1 0 0 1-1-1V4a2 2 0 0 0-4 0v5a1 1 0 0 1-1 1H6a2 2 0 0 0-2 2v1a1 1 0 0 0 1 1" }),
594
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 14H5l-1.973 6.767A1 1 0 0 0 4 22h16a1 1 0 0 0 .973-1.233z" }),
595
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 22 1-4" })
596
- ]
597
- }
598
- )
599
- }
600
- )
601
- }
602
- ),
603
- /* @__PURE__ */ jsxRuntime.jsx(
604
- "div",
605
- {
606
- className: "transition-all duration-300 ease-in-out overflow-hidden flex-shrink-0",
607
- style: {
608
- width: enabled ? "52px" : "0px",
609
- minWidth: enabled ? "52px" : "0px",
610
- opacity: enabled ? 1 : 0
611
- },
612
- children: /* @__PURE__ */ jsxRuntime.jsx(
613
- "button",
614
- {
615
- onClick: takeScreenshot,
616
- className: "p-3 bg-neutral-500 text-white rounded-xl hover:bg-neutral-600 active:bg-neutral-700 transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 whitespace-nowrap",
617
- "aria-label": "Take screenshot",
618
- children: /* @__PURE__ */ jsxRuntime.jsxs(
619
- "svg",
387
+ }
388
+ ),
389
+ /* @__PURE__ */ jsxRuntime.jsxs(
390
+ "div",
391
+ {
392
+ className: "overflow-hidden flex-shrink-0 relative",
393
+ style: {
394
+ maxWidth: enabled ? "100px" : "0px",
395
+ opacity: enabled ? 1 : 0,
396
+ transition: "max-width 300ms ease-in-out, opacity 300ms ease-in-out"
397
+ },
398
+ children: [
399
+ /* @__PURE__ */ jsxRuntime.jsxs(
400
+ "button",
401
+ {
402
+ onClick: (e) => {
403
+ e.stopPropagation();
404
+ clearCanvas();
405
+ setShowClearTooltip(false);
406
+ },
407
+ onMouseEnter: () => {
408
+ if (hasContent) {
409
+ setShowClearTooltip(true);
410
+ }
411
+ },
412
+ onMouseLeave: () => setShowClearTooltip(false),
413
+ disabled: !hasContent,
414
+ className: "p-2 text-white rounded-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed relative group",
415
+ "aria-label": "Clear canvas",
416
+ children: [
417
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-red-600/30 opacity-0 group-hover:opacity-100 transition-opacity disabled:group-hover:opacity-0" }),
418
+ /* @__PURE__ */ jsxRuntime.jsx(
419
+ lucideReact.Trash2,
620
420
  {
621
- xmlns: "http://www.w3.org/2000/svg",
622
- width: "20",
623
- height: "20",
624
- viewBox: "0 0 24 24",
625
- fill: "none",
626
- stroke: "currentColor",
627
- strokeWidth: "2",
628
- strokeLinecap: "round",
629
- strokeLinejoin: "round",
630
- className: "lucide lucide-camera",
631
- children: [
632
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" }),
633
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "3" })
634
- ]
421
+ size: 18,
422
+ strokeWidth: 2,
423
+ className: "relative z-10 group-hover:text-red-600 transition-colors"
635
424
  }
636
425
  )
637
- }
638
- )
639
- }
640
- )
641
- ]
642
- }
643
- ),
644
- /* @__PURE__ */ jsxRuntime.jsx(
645
- "canvas",
646
- {
647
- ref: canvasRef,
648
- onMouseDown: startDrawing,
649
- onMouseMove: draw,
650
- onMouseUp: stopDrawing,
651
- onMouseLeave: stopDrawing,
652
- onTouchStart: startDrawing,
653
- onTouchMove: draw,
654
- onTouchEnd: stopDrawing,
655
- className: `border border-gray-300 rounded touch-none transition-opacity ${enabled ? "cursor-crosshair pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
656
- style: {
657
- width: `${canvasSize.width}px`,
658
- height: `${canvasSize.height}px`,
659
- maxWidth: "100%"
426
+ ]
427
+ }
428
+ ),
429
+ showClearTooltip && hasContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-neutral-800 rounded-full shadow-lg whitespace-nowrap z-[70]", children: [
430
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
431
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-sm", children: "Clear all" }),
432
+ /* @__PURE__ */ jsxRuntime.jsx(
433
+ "button",
434
+ {
435
+ onClick: (e) => {
436
+ e.stopPropagation();
437
+ setShowClearTooltip(false);
438
+ },
439
+ onMouseDown: (e) => e.stopPropagation(),
440
+ className: "text-white hover:text-neutral-300 transition-colors rounded-full",
441
+ "aria-label": "Dismiss tooltip",
442
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14, strokeWidth: 2 })
443
+ }
444
+ )
445
+ ] }),
446
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 -mt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-neutral-800 rotate-45" }) })
447
+ ] })
448
+ ]
660
449
  }
661
- }
662
- )
663
- ]
664
- }
665
- );
450
+ ),
451
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
452
+ /* @__PURE__ */ jsxRuntime.jsx(
453
+ "button",
454
+ {
455
+ onClick: (e) => {
456
+ e.stopPropagation();
457
+ setEnabled(!enabled);
458
+ },
459
+ className: "p-1.5 text-white hover:bg-neutral-600/30 rounded-full transition-all focus:outline-none",
460
+ style: {
461
+ opacity: enabled ? 0 : 1,
462
+ pointerEvents: enabled ? "none" : "auto",
463
+ transition: "opacity 300ms ease-in-out"
464
+ },
465
+ "aria-label": "Turn on drawing",
466
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
467
+ "svg",
468
+ {
469
+ xmlns: "http://www.w3.org/2000/svg",
470
+ width: "18",
471
+ height: "18",
472
+ viewBox: "0 0 24 24",
473
+ fill: "none",
474
+ stroke: "currentColor",
475
+ strokeWidth: "2",
476
+ strokeLinecap: "round",
477
+ strokeLinejoin: "round",
478
+ className: "lucide lucide-brush",
479
+ children: [
480
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m11 10 3 3" }),
481
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z" }),
482
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031" })
483
+ ]
484
+ }
485
+ )
486
+ }
487
+ ),
488
+ /* @__PURE__ */ jsxRuntime.jsx(
489
+ "button",
490
+ {
491
+ onClick: (e) => {
492
+ e.stopPropagation();
493
+ setEnabled(false);
494
+ },
495
+ className: "absolute inset-0 p-1.5 text-white hover:bg-neutral-600/30 rounded-full transition-all focus:outline-none",
496
+ style: {
497
+ opacity: enabled ? 1 : 0,
498
+ pointerEvents: enabled ? "auto" : "none",
499
+ transition: "opacity 300ms ease-in-out"
500
+ },
501
+ "aria-label": "Close",
502
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, strokeWidth: 2.5 })
503
+ }
504
+ )
505
+ ] })
506
+ ]
507
+ }
508
+ )
509
+ ] });
666
510
  };
667
511
  var DrawingTool_default = DrawingTool;
668
512