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