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