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