lines-overlay 0.1.21 → 0.1.23

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 (10) hide show
  1. package/dist/index.js +66 -67
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +66 -67
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/config-button.tsx +3 -5
  7. package/src/components/config-options.tsx +9 -15
  8. package/src/components/move-lines-button.tsx +22 -23
  9. package/src/lines-overlay.tsx +31 -23
  10. package/src/ui/button.tsx +2 -3
package/dist/index.js CHANGED
@@ -52,7 +52,7 @@ var styles = {
52
52
  alignItems: "center",
53
53
  justifyContent: "center",
54
54
  gap: 8,
55
- borderRadius: 6,
55
+ borderRadius: 4,
56
56
  position: "relative",
57
57
  outline: "none",
58
58
  userSelect: "none"
@@ -95,7 +95,6 @@ var styles = {
95
95
  backgroundColor: "rgba(59,130,246,0.08)"
96
96
  },
97
97
  closeButton: {
98
- borderRadius: 9999,
99
98
  color: "#0f172a"
100
99
  }
101
100
  };
@@ -263,7 +262,6 @@ var css3 = {
263
262
  pointerEvents: "auto"
264
263
  },
265
264
  button: {
266
- borderRadius: 9999,
267
265
  backgroundColor: "rgba(255,255,255,0.75)",
268
266
  backdropFilter: "blur(2px)"
269
267
  }
@@ -315,9 +313,7 @@ var css4 = {
315
313
  zIndex: 9999,
316
314
  pointerEvents: "auto",
317
315
  height: 40,
318
- borderWidth: 1,
319
- borderStyle: "solid",
320
- borderColor: "rgba(148,163,184,0.8)",
316
+ border: "1px solid rgba(148,163,184,0.8)",
321
317
  backgroundColor: "rgba(255,255,255,0.70)",
322
318
  boxShadow: "0 1px 3px rgba(15,23,42,0.2)",
323
319
  display: "flex",
@@ -327,7 +323,7 @@ var css4 = {
327
323
  },
328
324
  label: {
329
325
  fontWeight: 500,
330
- fontSize: "0.8125rem",
326
+ fontSize: "1.21875rem",
331
327
  letterSpacing: "0.03em",
332
328
  paddingRight: 8
333
329
  },
@@ -413,13 +409,12 @@ var css5 = {
413
409
  right: 8,
414
410
  zIndex: 1e3,
415
411
  pointerEvents: "auto",
416
- fontSize: "0.875rem",
412
+ fontSize: "1.3125rem",
417
413
  backgroundColor: "rgba(255,255,255,0.94)",
418
414
  backdropFilter: "blur(4px)",
419
415
  boxShadow: "0 4px 6px rgba(15,23,42,0.12)",
420
- borderWidth: 1,
421
- borderStyle: "solid",
422
- borderColor: "rgba(148,163,184,0.5)",
416
+ border: "1px solid rgba(148,163,184,0.5)",
417
+ borderRadius: 12,
423
418
  paddingInline: 12,
424
419
  paddingBlock: 8,
425
420
  width: "auto",
@@ -429,9 +424,7 @@ var css5 = {
429
424
  },
430
425
  fieldRow: {
431
426
  width: "100%",
432
- borderBottomWidth: 1,
433
- borderBottomStyle: "solid",
434
- borderBottomColor: "rgba(148,163,184,0.4)",
427
+ borderBottom: "1px solid rgba(148,163,184,0.4)",
435
428
  paddingBottom: 12,
436
429
  display: "flex",
437
430
  flexDirection: "column",
@@ -441,24 +434,22 @@ var css5 = {
441
434
  display: "flex",
442
435
  alignItems: "flex-end",
443
436
  gap: 8,
444
- borderRadius: 6
437
+ borderRadius: 4
445
438
  },
446
439
  inputWrapper: {
447
440
  width: 104
448
441
  },
449
442
  label: {
450
443
  display: "block",
451
- fontSize: "0.75rem",
444
+ fontSize: "1.125rem",
452
445
  fontWeight: 500,
453
446
  marginBottom: 4
454
447
  },
455
448
  numberInput: {
456
449
  width: "100%",
457
450
  height: 32,
458
- borderRadius: 6,
459
- borderWidth: 1,
460
- borderStyle: "solid",
461
- borderColor: "#e5e7eb",
451
+ borderRadius: 4,
452
+ border: "1px solid #e5e7eb",
462
453
  paddingInline: 8,
463
454
  fontSize: "0.875rem"
464
455
  },
@@ -476,7 +467,7 @@ var css5 = {
476
467
  },
477
468
  colorLabel: {
478
469
  display: "block",
479
- fontSize: "0.75rem",
470
+ fontSize: "1.125rem",
480
471
  fontWeight: 500,
481
472
  marginBottom: 4
482
473
  },
@@ -487,8 +478,7 @@ var css5 = {
487
478
  colorDot: {
488
479
  display: "block",
489
480
  width: "80%",
490
- height: "80%",
491
- borderRadius: 9999
481
+ height: "80%"
492
482
  }
493
483
  };
494
484
  function ConfigOptions(props) {
@@ -552,25 +542,25 @@ function ConfigOptions(props) {
552
542
  var import_jsx_runtime7 = require("react/jsx-runtime");
553
543
  var css6 = {
554
544
  overlay: {
555
- position: "fixed",
545
+ position: "absolute",
556
546
  top: 100,
557
547
  left: 0,
558
548
  width: "100%",
559
549
  pointerEvents: "none",
560
550
  display: "flex",
561
551
  justifyContent: "center",
562
- zIndex: 9998
552
+ zIndex: 10
563
553
  },
564
554
  grid: {
565
555
  width: "100%"
566
556
  },
567
557
  triggerButton: {
568
- position: "fixed",
558
+ position: "absolute",
569
559
  bottom: 8,
570
560
  right: 8,
571
- zIndex: 9999,
572
- fontSize: "0.75rem",
573
- backgroundColor: "rgba(255,255,255,0.66)"
561
+ zIndex: 20,
562
+ fontSize: "1rem",
563
+ backgroundColor: "rgba(255,255,255,0.70)"
574
564
  }
575
565
  };
576
566
  function RowGridCore({ show, setShow }) {
@@ -591,34 +581,27 @@ function RowGridCore({ show, setShow }) {
591
581
  }, []);
592
582
  if (!show) return null;
593
583
  const height = lines * gap;
594
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
595
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
596
- "div",
597
- {
598
- ref: containerRef,
599
- style: { ...css6.overlay, height },
600
- children: [
601
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
602
- "div",
603
- {
604
- style: {
605
- ...css6.grid,
606
- height,
607
- backgroundImage: `repeating-linear-gradient(
584
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
585
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: containerRef, style: { ...css6.overlay, height }, children: [
586
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
587
+ "div",
588
+ {
589
+ style: {
590
+ ...css6.grid,
591
+ height,
592
+ backgroundImage: `repeating-linear-gradient(
608
593
  to bottom,
609
594
  ${color},
610
595
  ${color} 1px,
611
596
  transparent 1px,
612
597
  transparent ${gap}px
613
598
  )`,
614
- opacity
615
- }
616
- }
617
- ),
618
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MoveLinesButton, { targetRef: containerRef })
619
- ]
620
- }
621
- ),
599
+ opacity
600
+ }
601
+ }
602
+ ),
603
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MoveLinesButton, { targetRef: containerRef })
604
+ ] }),
622
605
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
623
606
  ConfigButton,
624
607
  {
@@ -644,22 +627,38 @@ function RowGridCore({ show, setShow }) {
644
627
  }
645
628
  function RowGrid() {
646
629
  const [show, setShow] = (0, import_react2.useState)(false);
647
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
648
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
649
- Button,
650
- {
651
- size: "sm",
652
- variant: "ghost",
653
- style: { ...css6.triggerButton, visibility: show ? "hidden" : "visible" },
654
- onClick: () => setShow((v) => !v),
655
- children: [
656
- "Mostrar linhas",
657
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { Icon: import_lucide_react3.Eye })
658
- ]
659
- }
660
- ),
661
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RowGridCore, { setShow, show })
662
- ] });
630
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
631
+ "div",
632
+ {
633
+ style: {
634
+ position: "fixed",
635
+ zIndex: 9e3,
636
+ bottom: 0,
637
+ left: 0,
638
+ width: "100%",
639
+ height: "100dvh"
640
+ },
641
+ children: [
642
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RowGridCore, { setShow, show }),
643
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
644
+ Button,
645
+ {
646
+ size: "sm",
647
+ variant: "ghost",
648
+ style: {
649
+ ...css6.triggerButton,
650
+ visibility: show ? "hidden" : "visible"
651
+ },
652
+ onClick: () => setShow((v) => !v),
653
+ children: [
654
+ "Mostrar linhas",
655
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { Icon: import_lucide_react3.Eye })
656
+ ]
657
+ }
658
+ )
659
+ ]
660
+ }
661
+ );
663
662
  }
664
663
  // Annotate the CommonJS export names for ESM import in node:
665
664
  0 && (module.exports = {
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/lines-overlay.tsx","../src/components/move-lines-button.tsx","../src/ui/button.tsx","../src/ui/lucide-icon.tsx","../src/ui/separator.tsx","../src/components/config-button.tsx","../src/components/data.ts","../src/components/config-options.tsx"],"sourcesContent":["export { RowGrid } from \"./lines-overlay\";\n","import { Eye } from \"lucide-react\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport {\r\n ConfigButton,\r\n ConfigOptions,\r\n MoveLinesButton,\r\n} from \"./components/index\";\r\nimport { StateSetter } from \"../types\";\r\nimport { Button, Icon } from \"./ui\";\r\n\r\ntype Props = {\r\n setShow: StateSetter<boolean>;\r\n show: boolean;\r\n};\r\n\r\nconst css = {\r\n overlay: {\r\n position: 'fixed' as const,\r\n top: 100,\r\n left: 0,\r\n width: '100%',\r\n pointerEvents: 'none' as const,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n zIndex: 9998,\r\n },\r\n grid: {\r\n width: '100%',\r\n },\r\n triggerButton: {\r\n position: 'fixed' as const,\r\n bottom: 8,\r\n right: 8,\r\n zIndex: 9999,\r\n fontSize: '0.75rem',\r\n backgroundColor: 'rgba(255,255,255,0.66)',\r\n },\r\n} as const;\r\n\r\nfunction RowGridCore({ show, setShow }: Props) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n const [lines, setLines] = useState(12);\r\n const [gap, setGap] = useState(24);\r\n const [opacity, setOpacity] = useState(0.3);\r\n const [color, setColor] = useState(\"#d71212\");\r\n const [showConfig, setShowConfig] = useState(false);\r\n\r\n // Toggle por tecla\r\n useEffect(() => {\r\n const handler = (e: KeyboardEvent) => {\r\n if (e.ctrlKey && e.key === \";\") {\r\n setShow((v) => !v);\r\n }\r\n };\r\n window.addEventListener(\"keydown\", handler);\r\n return () => window.removeEventListener(\"keydown\", handler);\r\n }, []);\r\n\r\n if (!show) return null;\r\n\r\n const height = lines * gap;\r\n\r\n return (\r\n <div>\r\n <div\r\n ref={containerRef}\r\n style={{ ...css.overlay, height }}\r\n >\r\n {/* linhas */}\r\n <div\r\n style={{\r\n ...css.grid,\r\n height,\r\n backgroundImage: `repeating-linear-gradient(\r\n to bottom,\r\n ${color},\r\n ${color} 1px,\r\n transparent 1px,\r\n transparent ${gap}px\r\n )`,\r\n opacity,\r\n }}\r\n />\r\n {/* Move */}\r\n <MoveLinesButton targetRef={containerRef} />\r\n </div>\r\n {/* Config */}\r\n <ConfigButton\r\n setShow={setShow}\r\n onToggleConfig={() => setShowConfig((v) => !v)}\r\n open={showConfig}\r\n />\r\n {showConfig && (\r\n <ConfigOptions\r\n lines={lines}\r\n gap={gap}\r\n opacity={opacity}\r\n color={color}\r\n setLines={setLines}\r\n setGap={setGap}\r\n setOpacity={setOpacity}\r\n setColor={setColor}\r\n />\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nexport function RowGrid() {\r\n const [show, setShow] = useState(false);\r\n\r\n return (\r\n <>\r\n <Button\r\n size=\"sm\"\r\n variant=\"ghost\"\r\n style={{ ...css.triggerButton, visibility: show ? 'hidden' : 'visible' }}\r\n onClick={() => setShow((v) => !v)}\r\n >\r\n Mostrar linhas\r\n <Icon Icon={Eye} />\r\n </Button>\r\n\r\n <RowGridCore setShow={setShow} show={show} />\r\n </>\r\n );\r\n}\r\n","import { Move } from 'lucide-react';\nimport { useRef, type MouseEvent as ReactMouseEvent, type RefObject } from 'react';\nimport { Button, Icon } from '../ui';\n\nconst css = {\n wrapper: {\n position: 'absolute' as const,\n left: '50%',\n top: '44%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'auto',\n },\n button: {\n borderRadius: 9999,\n backgroundColor: 'rgba(255,255,255,0.75)',\n backdropFilter: 'blur(2px)',\n },\n} as const;\n\r\nexport function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivElement | null> }) {\n const dragging = useRef(false);\r\n const last = useRef({ x: 0, y: 0 });\r\n\r\n function onMouseDown(e: ReactMouseEvent<HTMLButtonElement>) {\n dragging.current = true;\r\n last.current = { x: e.clientX, y: e.clientY };\r\n document.addEventListener('mousemove', onMove);\r\n document.addEventListener('mouseup', onUp);\r\n }\r\n\r\n function onMove(e: MouseEvent) {\r\n if (!dragging.current || !targetRef.current) return;\r\n\r\n const dx = e.clientX - last.current.x;\r\n const dy = e.clientY - last.current.y;\r\n\r\n const el = targetRef.current;\r\n\r\n el.style.left = `${el.offsetLeft + dx}px`;\r\n el.style.top = `${el.offsetTop + dy}px`;\r\n\r\n last.current = { x: e.clientX, y: e.clientY };\r\n }\r\n\r\n function onUp() {\r\n dragging.current = false;\r\n document.removeEventListener('mousemove', onMove);\r\n document.removeEventListener('mouseup', onUp);\r\n }\r\n\r\n return (\r\n <div style={css.wrapper}>\n <Button\r\n size=\"icon-sm\"\r\n data-black\r\n variant=\"ghost\"\r\n onMouseDown={onMouseDown}\r\n style={css.button}>\n <Icon Icon={Move} size=\"lg\" strokeWidth=\"thin\" />\r\n </Button>\r\n </div>\r\n );\r\n}\r\n","import * as React from 'react';\r\n\r\ntype ButtonVariant = 'default' | 'ghost' | 'transparent';\r\ntype ButtonSize = 'default' | 'sm' | 'icon-sm';\r\n\r\nconst styles = {\r\n base: {\r\n width: 'auto',\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n gap: 8,\r\n borderRadius: 6,\r\n position: 'relative',\r\n outline: 'none',\r\n userSelect: 'none',\r\n } satisfies React.CSSProperties,\r\n\r\n variants: {\r\n default: {\r\n backgroundColor: '#0ea5e9',\r\n color: '#ffffff',\r\n },\r\n ghost: {\r\n backgroundColor: 'transparent',\r\n color: '#111827',\r\n border: '1px solid #e5e7eb',\r\n },\r\n transparent: {\r\n backgroundColor: 'transparent',\r\n color: '#0ea5e9',\r\n },\r\n } satisfies Record<ButtonVariant, React.CSSProperties>,\r\n\r\n sizes: {\r\n default: {\r\n minHeight: 40,\r\n paddingInline: 12,\r\n paddingBlock: 12 * 0.73438 / 0.93,\r\n },\r\n sm: {\r\n minHeight: 36,\r\n paddingInline: 12,\r\n paddingBlock: 10,\r\n },\r\n 'icon-sm': {\r\n width: 32,\r\n height: 32,\r\n padding: 0,\r\n },\r\n } satisfies Record<ButtonSize, React.CSSProperties>,\r\n\r\n selected: {\r\n border: '2px solid #60a5fa',\r\n color: '#0ea5e9',\r\n backgroundColor: 'rgba(59,130,246,0.08)',\r\n } satisfies React.CSSProperties,\r\n\r\n closeButton: {\r\n borderRadius: 9999,\r\n color: '#0f172a',\r\n } satisfies React.CSSProperties,\r\n};\r\n\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n asChild?: boolean;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n closeButton?: boolean;\r\n variant?: ButtonVariant;\r\n size?: ButtonSize;\r\n}\r\n\r\ntype ResolveButtonStyleParams = {\r\n variant: ButtonVariant;\r\n size: ButtonSize;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n closeButton?: boolean;\r\n style?: React.CSSProperties;\r\n};\r\n\r\nexport function resolveButtonStyles({\r\n variant,\r\n size,\r\n selected,\r\n disabled,\r\n closeButton,\r\n style,\r\n}: ResolveButtonStyleParams): React.CSSProperties {\r\n return {\r\n ...styles.base,\r\n ...styles.variants[variant],\r\n ...styles.sizes[size],\r\n ...(disabled && { opacity: 0.6, cursor: 'not-allowed' }),\r\n ...(selected && styles.selected),\r\n ...(closeButton && styles.closeButton),\r\n ...style,\r\n };\r\n}\r\n\r\ntype SlotProps = React.HTMLAttributes<HTMLElement> & {\r\n children?: React.ReactNode;\r\n};\r\n\r\nconst Slot = React.forwardRef<HTMLElement, SlotProps>(\r\n ({ children, className, style, ...slotProps }, ref) => {\r\n if (!children || !React.isValidElement(children)) {\r\n return null;\r\n }\r\n\r\n const child = children as React.ReactElement<any>;\r\n const mergedClassName = [className, child.props.className].filter(Boolean).join(' ');\r\n const mergedStyle = { ...style, ...child.props.style };\r\n\r\n return React.cloneElement(child, {\r\n ...slotProps,\r\n ...child.props,\r\n className: mergedClassName || undefined,\r\n style: mergedStyle,\r\n ref,\r\n });\r\n },\r\n);\r\n\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n {\r\n className,\r\n variant = 'default',\r\n size = 'default',\r\n asChild = false,\r\n selected = false,\r\n disabled = false,\r\n closeButton = false,\r\n style,\r\n ...props\r\n },\r\n ref,\r\n ) => {\r\n const Comp = asChild ? Slot : 'button';\r\n\r\n return (\r\n <Comp\r\n ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n style={resolveButtonStyles({\r\n variant,\r\n size,\r\n selected,\r\n disabled,\r\n closeButton,\r\n style,\r\n })}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\n\r\n","import type { LucideIcon as LucideIconType, LucideProps } from 'lucide-react';\r\n\r\ntype StrokeWidthValue = keyof typeof weights;\r\nconst weights = {\r\n thin: 2.25,\r\n light: 2.35,\r\n normal: 2.65,\r\n semibold: 2.75,\r\n bold: 2.85,\r\n extrabold: 3,\r\n};\r\n\r\ntype SizeValue = keyof typeof iconSizes;\r\n\r\nconst iconSizes = {\r\n xs: '0.937em',\r\n sm: '0.968em',\r\n base: '1em',\r\n md: '1.033em',\r\n lg: '1.067em',\r\n xl: '1.138em',\r\n '2xl': '1.215em',\r\n '3xl': '1.296em',\r\n h6: '1.067em',\r\n h5: '1.138em',\r\n h4: '1.215em',\r\n h3: '1.296em',\r\n h2: '1.383em',\r\n h1: '1.4757em',\r\n};\r\n\r\nconst css = {\r\n wrapper: {\r\n height: '0.75rem',\r\n display: 'inline-flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n overflow: 'visible' as const,\r\n },\r\n} as const;\r\n\r\ninterface IconProps extends Omit<LucideProps, 'size' | 'strokeWidth'> {\r\n Icon: LucideIconType;\r\n size?: SizeValue | string;\r\n strokeWidth?: StrokeWidthValue | string;\r\n}\r\n\r\nexport const Icon = ({ Icon, size, className, strokeWidth, fill }: IconProps) => {\r\n return (\r\n <div data-icon style={css.wrapper}>\r\n <Icon\r\n size={iconSizes[size as SizeValue] || size || '1.067em'}\r\n strokeWidth={weights[strokeWidth as StrokeWidthValue] || strokeWidth || 2.6}\r\n className={className}\r\n fill={fill || 'none'}\r\n />\r\n </div>\r\n );\r\n};\r\n","import * as React from 'react';\r\n\r\nconst css = {\r\n base: {\r\n flexShrink: 0,\r\n backgroundColor: '#e5e7eb',\r\n },\r\n horizontal: {\r\n height: 1,\r\n width: '100%',\r\n },\r\n vertical: {\r\n height: '100%',\r\n width: 1,\r\n },\r\n} as const;\r\n\r\ntype SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {\r\n orientation?: 'horizontal' | 'vertical';\r\n decorative?: boolean;\r\n};\r\n\r\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\r\n ({ className, orientation = 'horizontal', decorative = true, style, ...props }, ref) => {\r\n const dimensionStyle = orientation === 'horizontal' ? css.horizontal : css.vertical;\r\n\r\n const ariaProps = decorative\r\n ? { role: 'none' as const }\r\n : {\r\n role: 'separator' as const,\r\n 'aria-orientation': orientation,\r\n };\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n style={{ ...css.base, ...dimensionStyle, ...style }}\r\n className={className}\r\n {...ariaProps}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\nSeparator.displayName = 'Separator';\r\n\r\nexport { Separator };\r\n","import { ChevronDown, ChevronUp, X } from 'lucide-react';\nimport { MouseEvent } from 'react';\nimport { StateSetter } from '../../types';\nimport { Button, Icon, Separator } from '../ui/index';\n\nconst css = {\n container: {\n position: 'fixed',\n bottom: 8,\n right: 8,\n zIndex: 9999,\n pointerEvents: 'auto',\n height: 40,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: 'rgba(148,163,184,0.8)',\n backgroundColor: 'rgba(255,255,255,0.70)',\n boxShadow: '0 1px 3px rgba(15,23,42,0.2)',\n display: 'flex',\n alignItems: 'center',\n paddingLeft: 14,\n paddingRight: 4,\n },\n label: {\n fontWeight: 500,\n fontSize: '0.8125rem',\n letterSpacing: '0.03em',\n paddingRight: 8,\n },\n buttonsRow: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n gap: 4,\n },\n closeIcon: {\n color: '#dc2626',\n },\n} as const;\n\nexport function ConfigButton({\n onToggleConfig,\n open,\n setShow,\n}: {\n open: boolean;\n onToggleConfig: () => void;\n setShow: StateSetter<boolean>;\n}) {\n const handleClick = (e: MouseEvent<HTMLButtonElement>, item: number) => {\n if (item === 1) {\n onToggleConfig();\n } else {\n e.stopPropagation();\n setShow((v) => !v);\n }\n };\n\n return (\n <div style={css.container}>\n <span style={css.label}>\n Configurar\n </span>\n\n <div style={css.buttonsRow}>\n {[1, 2, 3].map((item) =>\n item !== 2 ? (\n <Button\n variant={'transparent'}\n size=\"icon-sm\"\n data-black\n key={item}\n onClick={(e) => {\n handleClick(e, item);\n }}>\n {item === 1 ? (\n <Icon Icon={open ? ChevronDown : ChevronUp} size={'xl'} strokeWidth=\"light\" />\n ) : (\n <Icon Icon={X} size=\"sm\" strokeWidth=\"light\" className={undefined} />\n )}\n </Button>\n ) : (\n <Separator orientation=\"vertical\" />\n ),\n )}\n </div>\n </div>\n );\n}\n","export type FieldBinding = {\r\n value: number;\r\n set: (v: number) => void;\r\n};\r\n\r\nexport type ConfigOptionsProps = {\r\n lines: number;\r\n gap: number;\r\n opacity: number;\r\n color: string;\r\n setLines: (v: number) => void;\r\n setGap: (v: number) => void;\r\n setOpacity: (v: number) => void;\r\n setColor: (v: string) => void;\r\n};\r\n\r\nexport type NumberFieldConfig = {\r\n key: 'lines' | 'gap' | 'opacity';\r\n label: string;\r\n step?: number;\r\n quick: number[];\r\n};\r\n\r\nexport const NUMBER_FIELDS: NumberFieldConfig[] = [\r\n {\r\n key: 'lines',\r\n label: 'Linhas',\r\n quick: [2, 4, 8, 12],\r\n step: 4,\r\n },\r\n {\r\n key: 'gap',\r\n label: 'Gap',\r\n quick: [16, 24, 32, 40, 44],\r\n step: 4,\r\n },\r\n {\r\n key: 'opacity',\r\n label: 'Opacidade',\r\n quick: [0.2, 0.3, 0.5, 0.7],\r\n step: 0.05,\r\n },\r\n];\r\n\r\nexport const colorOptions = [\r\n { name: 'Azul', value: '#2563eb' },\r\n { name: 'Amarelo', value: '#eab308' },\r\n { name: 'Verde', value: '#16a34a' },\r\n { name: 'Roxo', value: '#7c3aed' },\r\n { name: 'Violeta', value: '#9333ea' },\r\n { name: 'Violeta', value: '#d71212' },\r\n];\r\n","import { Button } from '../ui';\r\nimport { ConfigOptionsProps, NUMBER_FIELDS, colorOptions } from './data';\r\n\r\nconst css = {\r\n container: {\r\n position: 'fixed',\r\n bottom: 52,\r\n right: 8,\r\n zIndex: 1000,\r\n pointerEvents: 'auto',\r\n fontSize: '0.875rem',\r\n backgroundColor: 'rgba(255,255,255,0.94)',\r\n backdropFilter: 'blur(4px)',\r\n boxShadow: '0 4px 6px rgba(15,23,42,0.12)',\r\n borderWidth: 1,\r\n borderStyle: 'solid',\r\n borderColor: 'rgba(148,163,184,0.5)',\r\n paddingInline: 12,\r\n paddingBlock: 8,\r\n width: 'auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: 8,\r\n },\r\n fieldRow: {\r\n width: '100%',\r\n borderBottomWidth: 1,\r\n borderBottomStyle: 'solid',\r\n borderBottomColor: 'rgba(148,163,184,0.4)',\r\n paddingBottom: 12,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: 4,\r\n },\r\n wrapper: {\r\n display: 'flex',\r\n alignItems: 'flex-end',\r\n gap: 8,\r\n borderRadius: 6,\r\n },\r\n inputWrapper: {\r\n width: 104,\r\n },\r\n label: {\r\n display: 'block',\r\n fontSize: '0.75rem',\r\n fontWeight: 500,\r\n marginBottom: 4,\r\n },\r\n numberInput: {\r\n width: '100%',\r\n height: 32,\r\n borderRadius: 6,\r\n borderWidth: 1,\r\n borderStyle: 'solid',\r\n borderColor: '#e5e7eb',\r\n paddingInline: 8,\r\n fontSize: '0.875rem',\r\n },\r\n quickRow: {\r\n display: 'flex',\r\n gap: 5,\r\n marginTop: 4,\r\n },\r\n quickButton: {\r\n fontWeight: 500,\r\n fontSize: '0.875rem',\r\n },\r\n colorSection: {\r\n marginTop: 8,\r\n },\r\n colorLabel: {\r\n display: 'block',\r\n fontSize: '0.75rem',\r\n fontWeight: 500,\r\n marginBottom: 4,\r\n },\r\n colorRow: {\r\n display: 'flex',\r\n gap: 8,\r\n },\r\n colorDot: {\r\n display: 'block',\r\n width: '80%',\r\n height: '80%',\r\n borderRadius: 9999,\r\n },\r\n} as const;\r\n\r\nexport function ConfigOptions(props: ConfigOptionsProps) {\r\n const fieldBindings = {\r\n lines: { value: props.lines, set: props.setLines },\r\n gap: { value: props.gap, set: props.setGap },\r\n opacity: { value: props.opacity, set: props.setOpacity },\r\n };\r\n\r\n return (\r\n <div style={css.container}>\r\n {NUMBER_FIELDS.map((field) => {\r\n const binding = fieldBindings[field.key];\r\n\r\n return (\r\n <div style={css.fieldRow} key={field.key}>\r\n <div style={css.wrapper}>\r\n <div style={css.inputWrapper}>\r\n <label style={css.label}>{field.label}</label>\r\n <input\r\n style={css.numberInput}\r\n type=\"number\"\r\n step={field.step}\r\n value={binding.value}\r\n onChange={(e) => binding.set(+e.target.value)}\r\n />\r\n </div>\r\n <div style={css.quickRow}>\r\n {field.quick.map((v) => {\r\n return (\r\n <Button\r\n selected={binding.value === v}\r\n key={v}\r\n data-option\r\n variant=\"ghost\"\r\n size=\"icon-sm\"\r\n style={css.quickButton}\r\n onClick={() => binding.set(v)}>\r\n {v}\r\n </Button>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n })}\r\n\r\n <div style={css.colorSection}>\r\n <span style={css.colorLabel}>Cor</span>\r\n <div style={css.colorRow}>\r\n {colorOptions.map((c) => (\r\n <Button\r\n key={c.value}\r\n variant=\"ghost\"\r\n size=\"icon-sm\"\r\n title={c.name}\r\n onClick={() => props.setColor(c.value)}>\r\n <span style={{ ...css.colorDot, backgroundColor: c.value }} />\r\n </Button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n"],"mappings":"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","names":["import_lucide_react","import_react","import_jsx_runtime","Icon","React","import_jsx_runtime","css","import_jsx_runtime","css","import_lucide_react","import_jsx_runtime","css","import_jsx_runtime","css","import_jsx_runtime","css"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/lines-overlay.tsx","../src/components/move-lines-button.tsx","../src/ui/button.tsx","../src/ui/lucide-icon.tsx","../src/ui/separator.tsx","../src/components/config-button.tsx","../src/components/data.ts","../src/components/config-options.tsx"],"sourcesContent":["export { RowGrid } from \"./lines-overlay\";\n","import { Eye } from \"lucide-react\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport {\r\n ConfigButton,\r\n ConfigOptions,\r\n MoveLinesButton,\r\n} from \"./components/index\";\r\nimport { StateSetter } from \"../types\";\r\nimport { Button, Icon } from \"./ui\";\r\n\r\ntype Props = {\r\n setShow: StateSetter<boolean>;\r\n show: boolean;\r\n};\r\n\r\nconst css = {\r\n overlay: {\r\n position: \"absolute\" as const,\r\n top: 100,\r\n left: 0,\r\n width: \"100%\",\r\n pointerEvents: \"none\" as const,\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n zIndex: 10,\r\n },\r\n grid: {\r\n width: \"100%\",\r\n },\r\n triggerButton: {\r\n position: \"absolute\" as const,\r\n bottom: 8,\r\n right: 8,\r\n zIndex: 20,\r\n fontSize: \"1rem\",\r\n backgroundColor: \"rgba(255,255,255,0.70)\",\r\n },\r\n} as const;\r\n\r\nfunction RowGridCore({ show, setShow }: Props) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const [lines, setLines] = useState(12);\r\n const [gap, setGap] = useState(24);\r\n const [opacity, setOpacity] = useState(0.3);\r\n const [color, setColor] = useState(\"#d71212\");\r\n const [showConfig, setShowConfig] = useState(false);\r\n\r\n // Toggle por tecla\r\n useEffect(() => {\r\n const handler = (e: KeyboardEvent) => {\r\n if (e.ctrlKey && e.key === \";\") {\r\n setShow((v) => !v);\r\n }\r\n };\r\n window.addEventListener(\"keydown\", handler);\r\n return () => window.removeEventListener(\"keydown\", handler);\r\n }, []);\r\n\r\n if (!show) return null;\r\n\r\n const height = lines * gap;\r\n\r\n return (\r\n <>\r\n <div ref={containerRef} style={{ ...css.overlay, height }}>\r\n {/* linhas */}\r\n <div\r\n style={{\r\n ...css.grid,\r\n height,\r\n backgroundImage: `repeating-linear-gradient(\r\n to bottom,\r\n ${color},\r\n ${color} 1px,\r\n transparent 1px,\r\n transparent ${gap}px\r\n )`,\r\n opacity,\r\n }}\r\n />\r\n {/* Move */}\r\n <MoveLinesButton targetRef={containerRef} />\r\n </div>\r\n {/* Config */}\r\n <ConfigButton\r\n setShow={setShow}\r\n onToggleConfig={() => setShowConfig((v) => !v)}\r\n open={showConfig}\r\n />\r\n {showConfig && (\r\n <ConfigOptions\r\n lines={lines}\r\n gap={gap}\r\n opacity={opacity}\r\n color={color}\r\n setLines={setLines}\r\n setGap={setGap}\r\n setOpacity={setOpacity}\r\n setColor={setColor}\r\n />\r\n )}\r\n </>\r\n );\r\n}\r\n\r\nexport function RowGrid() {\r\n const [show, setShow] = useState(false);\r\n\r\n return (\r\n <div\r\n style={{\r\n position: \"fixed\",\r\n zIndex: 9000,\r\n bottom: 0,\r\n left: 0,\r\n width: \"100%\",\r\n height: \"100dvh\",\r\n }}\r\n >\r\n <RowGridCore setShow={setShow} show={show} />\r\n\r\n <Button\r\n size=\"sm\"\r\n variant=\"ghost\"\r\n style={{\r\n ...css.triggerButton,\r\n visibility: show ? \"hidden\" : \"visible\",\r\n }}\r\n onClick={() => setShow((v) => !v)}\r\n >\r\n Mostrar linhas\r\n <Icon Icon={Eye} />\r\n </Button>\r\n </div>\r\n );\r\n}\r\n","import { Move } from 'lucide-react';\r\nimport { useRef, type MouseEvent as ReactMouseEvent, type RefObject } from 'react';\r\nimport { Button, Icon } from '../ui';\r\n\r\nconst css = {\r\n wrapper: {\r\n position: 'absolute' as const,\r\n left: '50%',\r\n top: '44%',\r\n transform: 'translate(-50%, -50%)',\r\n pointerEvents: 'auto',\r\n },\r\n button: {\r\n backgroundColor: 'rgba(255,255,255,0.75)',\r\n backdropFilter: 'blur(2px)',\r\n },\r\n} as const;\r\n\r\nexport function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivElement | null> }) {\r\n const dragging = useRef(false);\r\n const last = useRef({ x: 0, y: 0 });\r\n\r\n function onMouseDown(e: ReactMouseEvent<HTMLButtonElement>) {\r\n dragging.current = true;\r\n last.current = { x: e.clientX, y: e.clientY };\r\n document.addEventListener('mousemove', onMove);\r\n document.addEventListener('mouseup', onUp);\r\n }\r\n\r\n function onMove(e: MouseEvent) {\r\n if (!dragging.current || !targetRef.current) return;\r\n\r\n const dx = e.clientX - last.current.x;\r\n const dy = e.clientY - last.current.y;\r\n\r\n const el = targetRef.current;\r\n\r\n el.style.left = `${el.offsetLeft + dx}px`;\r\n el.style.top = `${el.offsetTop + dy}px`;\r\n\r\n last.current = { x: e.clientX, y: e.clientY };\r\n }\r\n\r\n function onUp() {\r\n dragging.current = false;\r\n document.removeEventListener('mousemove', onMove);\r\n document.removeEventListener('mouseup', onUp);\r\n }\r\n\r\n return (\r\n <div style={css.wrapper}>\r\n <Button\r\n size=\"icon-sm\"\r\n data-black\r\n variant=\"ghost\"\r\n onMouseDown={onMouseDown}\r\n style={css.button}>\r\n <Icon Icon={Move} size=\"lg\" strokeWidth=\"thin\" />\r\n </Button>\r\n </div>\r\n );\r\n}\r\n","import * as React from 'react';\r\n\r\ntype ButtonVariant = 'default' | 'ghost' | 'transparent';\r\ntype ButtonSize = 'default' | 'sm' | 'icon-sm';\r\n\r\nconst styles = {\r\n base: {\r\n width: 'auto',\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n gap: 8,\n borderRadius: 4,\n position: 'relative',\r\n outline: 'none',\r\n userSelect: 'none',\r\n } satisfies React.CSSProperties,\r\n\r\n variants: {\r\n default: {\r\n backgroundColor: '#0ea5e9',\r\n color: '#ffffff',\r\n },\r\n ghost: {\r\n backgroundColor: 'transparent',\r\n color: '#111827',\r\n border: '1px solid #e5e7eb',\r\n },\r\n transparent: {\r\n backgroundColor: 'transparent',\r\n color: '#0ea5e9',\r\n },\r\n } satisfies Record<ButtonVariant, React.CSSProperties>,\r\n\r\n sizes: {\r\n default: {\r\n minHeight: 40,\r\n paddingInline: 12,\r\n paddingBlock: 12 * 0.73438 / 0.93,\r\n },\r\n sm: {\r\n minHeight: 36,\r\n paddingInline: 12,\r\n paddingBlock: 10,\r\n },\r\n 'icon-sm': {\r\n width: 32,\r\n height: 32,\r\n padding: 0,\r\n },\r\n } satisfies Record<ButtonSize, React.CSSProperties>,\r\n\r\n selected: {\r\n border: '2px solid #60a5fa',\r\n color: '#0ea5e9',\r\n backgroundColor: 'rgba(59,130,246,0.08)',\r\n } satisfies React.CSSProperties,\r\n\r\n closeButton: {\r\n color: '#0f172a',\r\n } satisfies React.CSSProperties,\r\n};\r\n\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n asChild?: boolean;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n closeButton?: boolean;\r\n variant?: ButtonVariant;\r\n size?: ButtonSize;\r\n}\r\n\r\ntype ResolveButtonStyleParams = {\r\n variant: ButtonVariant;\r\n size: ButtonSize;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n closeButton?: boolean;\r\n style?: React.CSSProperties;\r\n};\r\n\r\nexport function resolveButtonStyles({\r\n variant,\r\n size,\r\n selected,\r\n disabled,\r\n closeButton,\r\n style,\r\n}: ResolveButtonStyleParams): React.CSSProperties {\r\n return {\r\n ...styles.base,\r\n ...styles.variants[variant],\r\n ...styles.sizes[size],\r\n ...(disabled && { opacity: 0.6, cursor: 'not-allowed' }),\r\n ...(selected && styles.selected),\r\n ...(closeButton && styles.closeButton),\r\n ...style,\r\n };\r\n}\r\n\r\ntype SlotProps = React.HTMLAttributes<HTMLElement> & {\r\n children?: React.ReactNode;\r\n};\r\n\r\nconst Slot = React.forwardRef<HTMLElement, SlotProps>(\r\n ({ children, className, style, ...slotProps }, ref) => {\r\n if (!children || !React.isValidElement(children)) {\r\n return null;\r\n }\r\n\r\n const child = children as React.ReactElement<any>;\r\n const mergedClassName = [className, child.props.className].filter(Boolean).join(' ');\r\n const mergedStyle = { ...style, ...child.props.style };\r\n\r\n return React.cloneElement(child, {\r\n ...slotProps,\r\n ...child.props,\r\n className: mergedClassName || undefined,\r\n style: mergedStyle,\r\n ref,\r\n });\r\n },\r\n);\r\n\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n {\r\n className,\r\n variant = 'default',\r\n size = 'default',\r\n asChild = false,\r\n selected = false,\r\n disabled = false,\r\n closeButton = false,\r\n style,\r\n ...props\r\n },\r\n ref,\r\n ) => {\r\n const Comp = asChild ? Slot : 'button';\r\n\r\n return (\r\n <Comp\r\n ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n style={resolveButtonStyles({\r\n variant,\r\n size,\r\n selected,\r\n disabled,\r\n closeButton,\r\n style,\r\n })}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\n\r\n","import type { LucideIcon as LucideIconType, LucideProps } from 'lucide-react';\r\n\r\ntype StrokeWidthValue = keyof typeof weights;\r\nconst weights = {\r\n thin: 2.25,\r\n light: 2.35,\r\n normal: 2.65,\r\n semibold: 2.75,\r\n bold: 2.85,\r\n extrabold: 3,\r\n};\r\n\r\ntype SizeValue = keyof typeof iconSizes;\r\n\r\nconst iconSizes = {\r\n xs: '0.937em',\r\n sm: '0.968em',\r\n base: '1em',\r\n md: '1.033em',\r\n lg: '1.067em',\r\n xl: '1.138em',\r\n '2xl': '1.215em',\r\n '3xl': '1.296em',\r\n h6: '1.067em',\r\n h5: '1.138em',\r\n h4: '1.215em',\r\n h3: '1.296em',\r\n h2: '1.383em',\r\n h1: '1.4757em',\r\n};\r\n\r\nconst css = {\r\n wrapper: {\r\n height: '0.75rem',\r\n display: 'inline-flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n overflow: 'visible' as const,\r\n },\r\n} as const;\r\n\r\ninterface IconProps extends Omit<LucideProps, 'size' | 'strokeWidth'> {\r\n Icon: LucideIconType;\r\n size?: SizeValue | string;\r\n strokeWidth?: StrokeWidthValue | string;\r\n}\r\n\r\nexport const Icon = ({ Icon, size, className, strokeWidth, fill }: IconProps) => {\r\n return (\r\n <div data-icon style={css.wrapper}>\r\n <Icon\r\n size={iconSizes[size as SizeValue] || size || '1.067em'}\r\n strokeWidth={weights[strokeWidth as StrokeWidthValue] || strokeWidth || 2.6}\r\n className={className}\r\n fill={fill || 'none'}\r\n />\r\n </div>\r\n );\r\n};\r\n","import * as React from 'react';\r\n\r\nconst css = {\r\n base: {\r\n flexShrink: 0,\r\n backgroundColor: '#e5e7eb',\r\n },\r\n horizontal: {\r\n height: 1,\r\n width: '100%',\r\n },\r\n vertical: {\r\n height: '100%',\r\n width: 1,\r\n },\r\n} as const;\r\n\r\ntype SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {\r\n orientation?: 'horizontal' | 'vertical';\r\n decorative?: boolean;\r\n};\r\n\r\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\r\n ({ className, orientation = 'horizontal', decorative = true, style, ...props }, ref) => {\r\n const dimensionStyle = orientation === 'horizontal' ? css.horizontal : css.vertical;\r\n\r\n const ariaProps = decorative\r\n ? { role: 'none' as const }\r\n : {\r\n role: 'separator' as const,\r\n 'aria-orientation': orientation,\r\n };\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n style={{ ...css.base, ...dimensionStyle, ...style }}\r\n className={className}\r\n {...ariaProps}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\nSeparator.displayName = 'Separator';\r\n\r\nexport { Separator };\r\n","import { ChevronDown, ChevronUp, X } from 'lucide-react';\nimport { MouseEvent } from 'react';\nimport { StateSetter } from '../../types';\nimport { Button, Icon, Separator } from '../ui/index';\n\nconst css = {\n container: {\n position: 'fixed',\n bottom: 8,\n right: 8,\n zIndex: 9999,\n pointerEvents: 'auto',\n height: 40,\n border: '1px solid rgba(148,163,184,0.8)',\n backgroundColor: 'rgba(255,255,255,0.70)',\n boxShadow: '0 1px 3px rgba(15,23,42,0.2)',\n display: 'flex',\n alignItems: 'center',\n paddingLeft: 14,\n paddingRight: 4,\n },\n label: {\n fontWeight: 500,\n fontSize: '1.21875rem',\n letterSpacing: '0.03em',\n paddingRight: 8,\n },\n buttonsRow: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n gap: 4,\n },\n closeIcon: {\n color: '#dc2626',\n },\n} as const;\n\nexport function ConfigButton({\n onToggleConfig,\n open,\n setShow,\n}: {\n open: boolean;\n onToggleConfig: () => void;\n setShow: StateSetter<boolean>;\n}) {\n const handleClick = (e: MouseEvent<HTMLButtonElement>, item: number) => {\n if (item === 1) {\n onToggleConfig();\n } else {\n e.stopPropagation();\n setShow((v) => !v);\n }\n };\n\n return (\n <div style={css.container}>\n <span style={css.label}>\n Configurar\n </span>\n\n <div style={css.buttonsRow}>\n {[1, 2, 3].map((item) =>\n item !== 2 ? (\n <Button\n variant={'transparent'}\n size=\"icon-sm\"\n data-black\n key={item}\n onClick={(e) => {\n handleClick(e, item);\n }}>\n {item === 1 ? (\n <Icon Icon={open ? ChevronDown : ChevronUp} size={'xl'} strokeWidth=\"light\" />\n ) : (\n <Icon Icon={X} size=\"sm\" strokeWidth=\"light\" className={undefined} />\n )}\n </Button>\n ) : (\n <Separator orientation=\"vertical\" />\n )\n )}\n </div>\n </div>\n );\n}\n","export type FieldBinding = {\r\n value: number;\r\n set: (v: number) => void;\r\n};\r\n\r\nexport type ConfigOptionsProps = {\r\n lines: number;\r\n gap: number;\r\n opacity: number;\r\n color: string;\r\n setLines: (v: number) => void;\r\n setGap: (v: number) => void;\r\n setOpacity: (v: number) => void;\r\n setColor: (v: string) => void;\r\n};\r\n\r\nexport type NumberFieldConfig = {\r\n key: 'lines' | 'gap' | 'opacity';\r\n label: string;\r\n step?: number;\r\n quick: number[];\r\n};\r\n\r\nexport const NUMBER_FIELDS: NumberFieldConfig[] = [\r\n {\r\n key: 'lines',\r\n label: 'Linhas',\r\n quick: [2, 4, 8, 12],\r\n step: 4,\r\n },\r\n {\r\n key: 'gap',\r\n label: 'Gap',\r\n quick: [16, 24, 32, 40, 44],\r\n step: 4,\r\n },\r\n {\r\n key: 'opacity',\r\n label: 'Opacidade',\r\n quick: [0.2, 0.3, 0.5, 0.7],\r\n step: 0.05,\r\n },\r\n];\r\n\r\nexport const colorOptions = [\r\n { name: 'Azul', value: '#2563eb' },\r\n { name: 'Amarelo', value: '#eab308' },\r\n { name: 'Verde', value: '#16a34a' },\r\n { name: 'Roxo', value: '#7c3aed' },\r\n { name: 'Violeta', value: '#9333ea' },\r\n { name: 'Violeta', value: '#d71212' },\r\n];\r\n","import { Button } from '../ui';\r\nimport { ConfigOptionsProps, NUMBER_FIELDS, colorOptions } from './data';\r\n\r\nconst css = {\r\n container: {\r\n position: 'fixed',\r\n bottom: 52,\r\n right: 8,\r\n zIndex: 1000,\r\n pointerEvents: 'auto',\r\n fontSize: '1.3125rem',\r\n backgroundColor: 'rgba(255,255,255,0.94)',\r\n backdropFilter: 'blur(4px)',\r\n boxShadow: '0 4px 6px rgba(15,23,42,0.12)',\r\n border: \"1px solid rgba(148,163,184,0.5)\",\r\n borderRadius: 12,\r\n paddingInline: 12,\r\n paddingBlock: 8,\r\n width: 'auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: 8,\r\n },\r\n fieldRow: {\r\n width: '100%',\r\n borderBottom: \"1px solid rgba(148,163,184,0.4)\",\r\n paddingBottom: 12,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: 4,\r\n },\r\n wrapper: {\r\n display: 'flex',\r\n alignItems: 'flex-end',\r\n gap: 8,\r\n borderRadius: 4,\r\n },\r\n inputWrapper: {\r\n width: 104,\r\n },\r\n label: {\r\n display: 'block',\r\n fontSize: '1.125rem',\r\n fontWeight: 500,\r\n marginBottom: 4,\r\n },\r\n numberInput: {\r\n width: '100%',\r\n height: 32,\r\n borderRadius: 4,\r\n border: '1px solid #e5e7eb',\r\n paddingInline: 8,\r\n fontSize: '0.875rem',\r\n },\r\n quickRow: {\r\n display: 'flex',\r\n gap: 5,\r\n marginTop: 4,\r\n },\r\n quickButton: {\r\n fontWeight: 500,\r\n fontSize: '0.875rem',\r\n },\r\n colorSection: {\r\n marginTop: 8,\r\n },\r\n colorLabel: {\r\n display: 'block',\r\n fontSize: '1.125rem',\r\n fontWeight: 500,\r\n marginBottom: 4,\r\n },\r\n colorRow: {\r\n display: 'flex',\r\n gap: 8,\r\n },\r\n colorDot: {\r\n display: 'block',\r\n width: '80%',\r\n height: '80%',\r\n },\r\n} as const;\r\n\r\nexport function ConfigOptions(props: ConfigOptionsProps) {\r\n const fieldBindings = {\r\n lines: { value: props.lines, set: props.setLines },\r\n gap: { value: props.gap, set: props.setGap },\r\n opacity: { value: props.opacity, set: props.setOpacity },\r\n };\r\n\r\n return (\r\n <div style={css.container}>\r\n {NUMBER_FIELDS.map((field) => {\r\n const binding = fieldBindings[field.key];\r\n\r\n return (\r\n <div style={css.fieldRow} key={field.key}>\r\n <div style={css.wrapper}>\r\n <div style={css.inputWrapper}>\r\n <label style={css.label}>{field.label}</label>\r\n <input\r\n style={css.numberInput}\r\n type=\"number\"\r\n step={field.step}\r\n value={binding.value}\r\n onChange={(e) => binding.set(+e.target.value)}\r\n />\r\n </div>\r\n <div style={css.quickRow}>\r\n {field.quick.map((v) => {\r\n return (\r\n <Button\r\n selected={binding.value === v}\r\n key={v}\r\n data-option\r\n variant=\"ghost\"\r\n size=\"icon-sm\"\r\n style={css.quickButton}\r\n onClick={() => binding.set(v)}>\r\n {v}\r\n </Button>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n })}\r\n\r\n <div style={css.colorSection}>\r\n <span style={css.colorLabel}>Cor</span>\r\n <div style={css.colorRow}>\r\n {colorOptions.map((c) => (\r\n <Button\r\n key={c.value}\r\n variant=\"ghost\"\r\n size=\"icon-sm\"\r\n title={c.name}\r\n onClick={() => props.setColor(c.value)}>\r\n <span style={{ ...css.colorDot, backgroundColor: c.value }} />\r\n </Button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,uBAAoB;AACpB,IAAAC,gBAA4C;;;ACD5C,0BAAqB;AACrB,mBAA2E;;;ACD3E,YAAuB;AAgJjB;AA3IN,IAAM,SAAS;AAAA,EACb,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,cAAc;AAAA,IACd,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,OAAO;AAAA,IACT;AAAA,IACA,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,aAAa;AAAA,MACX,iBAAiB;AAAA,MACjB,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEA,OAAO;AAAA,IACL,SAAS;AAAA,MACP,WAAW;AAAA,MACX,eAAe;AAAA,MACf,cAAc,KAAK,UAAU;AAAA,IAC/B;AAAA,IACA,IAAI;AAAA,MACF,WAAW;AAAA,MACX,eAAe;AAAA,MACf,cAAc;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,iBAAiB;AAAA,EACnB;AAAA,EAEA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAqBO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkD;AAChD,SAAO;AAAA,IACL,GAAG,OAAO;AAAA,IACV,GAAG,OAAO,SAAS,OAAO;AAAA,IAC1B,GAAG,OAAO,MAAM,IAAI;AAAA,IACpB,GAAI,YAAY,EAAE,SAAS,KAAK,QAAQ,cAAc;AAAA,IACtD,GAAI,YAAY,OAAO;AAAA,IACvB,GAAI,eAAe,OAAO;AAAA,IAC1B,GAAG;AAAA,EACL;AACF;AAMA,IAAM,OAAa;AAAA,EACjB,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,UAAU,GAAG,QAAQ;AACrD,QAAI,CAAC,YAAY,CAAO,qBAAe,QAAQ,GAAG;AAChD,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ;AACd,UAAM,kBAAkB,CAAC,WAAW,MAAM,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACnF,UAAM,cAAc,EAAE,GAAG,OAAO,GAAG,MAAM,MAAM,MAAM;AAErD,WAAa,mBAAa,OAAO;AAAA,MAC/B,GAAG;AAAA,MACH,GAAG,MAAM;AAAA,MACT,WAAW,mBAAmB;AAAA,MAC9B,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAGO,IAAM,SAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,oBAAoB;AAAA,UACzB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACA,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AC9GM,IAAAC,sBAAA;AA/CN,IAAM,UAAU;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,WAAW;AACb;AAIA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,MAAM;AAAA,EACV,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AACF;AAQO,IAAM,OAAO,CAAC,EAAE,MAAAC,OAAM,MAAM,WAAW,aAAa,KAAK,MAAiB;AAC/E,SACE,6CAAC,SAAI,aAAS,MAAC,OAAO,IAAI,SACxB;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,MAAM,UAAU,IAAiB,KAAK,QAAQ;AAAA,MAC9C,aAAa,QAAQ,WAA+B,KAAK,eAAe;AAAA,MACxE;AAAA,MACA,MAAM,QAAQ;AAAA;AAAA,EAChB,GACF;AAEJ;;;AC1DA,IAAAC,SAAuB;AAkCjB,IAAAC,sBAAA;AAhCN,IAAMC,OAAM;AAAA,EACV,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF;AAOA,IAAM,YAAkB;AAAA,EACtB,CAAC,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,OAAO,GAAG,MAAM,GAAG,QAAQ;AACtF,UAAM,iBAAiB,gBAAgB,eAAeA,KAAI,aAAaA,KAAI;AAE3E,UAAM,YAAY,aACd,EAAE,MAAM,OAAgB,IACxB;AAAA,MACE,MAAM;AAAA,MACN,oBAAoB;AAAA,IACtB;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,GAAGA,KAAI,MAAM,GAAG,gBAAgB,GAAG,MAAM;AAAA,QAClD;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;;;AHahB,IAAAC,sBAAA;AArDR,IAAMC,OAAM;AAAA,EACV,SAAS;AAAA,IACP,UAAU;AAAA,IACV,MAAM;AAAA,IACN,KAAK;AAAA,IACL,WAAW;AAAA,IACX,eAAe;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,EAClB;AACF;AAEO,SAAS,gBAAgB,EAAE,UAAU,GAAoD;AAC9F,QAAM,eAAW,qBAAO,KAAK;AAC7B,QAAM,WAAO,qBAAO,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AAElC,WAAS,YAAY,GAAuC;AAC1D,aAAS,UAAU;AACnB,SAAK,UAAU,EAAE,GAAG,EAAE,SAAS,GAAG,EAAE,QAAQ;AAC5C,aAAS,iBAAiB,aAAa,MAAM;AAC7C,aAAS,iBAAiB,WAAW,IAAI;AAAA,EAC3C;AAEA,WAAS,OAAO,GAAe;AAC7B,QAAI,CAAC,SAAS,WAAW,CAAC,UAAU,QAAS;AAE7C,UAAM,KAAK,EAAE,UAAU,KAAK,QAAQ;AACpC,UAAM,KAAK,EAAE,UAAU,KAAK,QAAQ;AAEpC,UAAM,KAAK,UAAU;AAErB,OAAG,MAAM,OAAO,GAAG,GAAG,aAAa,EAAE;AACrC,OAAG,MAAM,MAAM,GAAG,GAAG,YAAY,EAAE;AAEnC,SAAK,UAAU,EAAE,GAAG,EAAE,SAAS,GAAG,EAAE,QAAQ;AAAA,EAC9C;AAEA,WAAS,OAAO;AACd,aAAS,UAAU;AACnB,aAAS,oBAAoB,aAAa,MAAM;AAChD,aAAS,oBAAoB,WAAW,IAAI;AAAA,EAC9C;AAEA,SACE,6CAAC,SAAI,OAAOA,KAAI,SACd;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAU;AAAA,MACV,SAAQ;AAAA,MACR;AAAA,MACA,OAAOA,KAAI;AAAA,MACX,uDAAC,QAAK,MAAM,0BAAM,MAAK,MAAK,aAAY,QAAO;AAAA;AAAA,EACjD,GACF;AAEJ;;;AI7DA,IAAAC,uBAA0C;AAyDtC,IAAAC,sBAAA;AApDJ,IAAMC,OAAM;AAAA,EACV,WAAW;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,EACP;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,EACT;AACF;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,cAAc,CAAC,GAAkC,SAAiB;AACtE,QAAI,SAAS,GAAG;AACd,qBAAe;AAAA,IACjB,OAAO;AACL,QAAE,gBAAgB;AAClB,cAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IACnB;AAAA,EACF;AAEA,SACE,8CAAC,SAAI,OAAOA,KAAI,WACd;AAAA,iDAAC,UAAK,OAAOA,KAAI,OAAO,wBAExB;AAAA,IAEA,6CAAC,SAAI,OAAOA,KAAI,YACb,WAAC,GAAG,GAAG,CAAC,EAAE;AAAA,MAAI,CAAC,SACd,SAAS,IACP;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,MAAK;AAAA,UACL,cAAU;AAAA,UAEV,SAAS,CAAC,MAAM;AACd,wBAAY,GAAG,IAAI;AAAA,UACrB;AAAA,UACC,mBAAS,IACR,6CAAC,QAAK,MAAM,OAAO,mCAAc,gCAAW,MAAM,MAAM,aAAY,SAAQ,IAE5E,6CAAC,QAAK,MAAM,wBAAG,MAAK,MAAK,aAAY,SAAQ,WAAW,QAAW;AAAA;AAAA,QAPhE;AAAA,MASP,IAEA,6CAAC,aAAU,aAAY,YAAW;AAAA,IAEtC,GACF;AAAA,KACF;AAEJ;;;AC/DO,IAAM,gBAAqC;AAAA,EAChD;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO,CAAC,GAAG,GAAG,GAAG,EAAE;AAAA,IACnB,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO,CAAC,KAAK,KAAK,KAAK,GAAG;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;AAEO,IAAM,eAAe;AAAA,EAC1B,EAAE,MAAM,QAAQ,OAAO,UAAU;AAAA,EACjC,EAAE,MAAM,WAAW,OAAO,UAAU;AAAA,EACpC,EAAE,MAAM,SAAS,OAAO,UAAU;AAAA,EAClC,EAAE,MAAM,QAAQ,OAAO,UAAU;AAAA,EACjC,EAAE,MAAM,WAAW,OAAO,UAAU;AAAA,EACpC,EAAE,MAAM,WAAW,OAAO,UAAU;AACtC;;;AC+Cc,IAAAC,sBAAA;AA/Fd,IAAMC,OAAM;AAAA,EACV,WAAW;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,IACd,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,EACP;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,cAAc;AAAA,EAChB;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,UAAU;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF;AAEO,SAAS,cAAc,OAA2B;AACvD,QAAM,gBAAgB;AAAA,IACpB,OAAO,EAAE,OAAO,MAAM,OAAO,KAAK,MAAM,SAAS;AAAA,IACjD,KAAK,EAAE,OAAO,MAAM,KAAK,KAAK,MAAM,OAAO;AAAA,IAC3C,SAAS,EAAE,OAAO,MAAM,SAAS,KAAK,MAAM,WAAW;AAAA,EACzD;AAEA,SACE,8CAAC,SAAI,OAAOA,KAAI,WACb;AAAA,kBAAc,IAAI,CAAC,UAAU;AAC5B,YAAM,UAAU,cAAc,MAAM,GAAG;AAEvC,aACE,6CAAC,SAAI,OAAOA,KAAI,UACd,wDAAC,SAAI,OAAOA,KAAI,SACd;AAAA,sDAAC,SAAI,OAAOA,KAAI,cACd;AAAA,uDAAC,WAAM,OAAOA,KAAI,OAAQ,gBAAM,OAAM;AAAA,UACtC;AAAA,YAAC;AAAA;AAAA,cACC,OAAOA,KAAI;AAAA,cACX,MAAK;AAAA,cACL,MAAM,MAAM;AAAA,cACZ,OAAO,QAAQ;AAAA,cACf,UAAU,CAAC,MAAM,QAAQ,IAAI,CAAC,EAAE,OAAO,KAAK;AAAA;AAAA,UAC9C;AAAA,WACF;AAAA,QACA,6CAAC,SAAI,OAAOA,KAAI,UACb,gBAAM,MAAM,IAAI,CAAC,MAAM;AACtB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,QAAQ,UAAU;AAAA,cAE5B,eAAW;AAAA,cACX,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAOA,KAAI;AAAA,cACX,SAAS,MAAM,QAAQ,IAAI,CAAC;AAAA,cAC3B;AAAA;AAAA,YANI;AAAA,UAOP;AAAA,QAEJ,CAAC,GACH;AAAA,SACF,KA5B6B,MAAM,GA6BrC;AAAA,IAEJ,CAAC;AAAA,IAED,8CAAC,SAAI,OAAOA,KAAI,cACd;AAAA,mDAAC,UAAK,OAAOA,KAAI,YAAY,iBAAG;AAAA,MAChC,6CAAC,SAAI,OAAOA,KAAI,UACb,uBAAa,IAAI,CAAC,MACjB;AAAA,QAAC;AAAA;AAAA,UAEC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,OAAO,EAAE;AAAA,UACT,SAAS,MAAM,MAAM,SAAS,EAAE,KAAK;AAAA,UACrC,uDAAC,UAAK,OAAO,EAAE,GAAGA,KAAI,UAAU,iBAAiB,EAAE,MAAM,GAAG;AAAA;AAAA,QALvD,EAAE;AAAA,MAMT,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;;;APnFI,IAAAC,sBAAA;AAhDJ,IAAMC,OAAM;AAAA,EACV,SAAS;AAAA,IACP,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,eAAe;AAAA,IACf,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,EACT;AAAA,EACA,eAAe;AAAA,IACb,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,iBAAiB;AAAA,EACnB;AACF;AAEA,SAAS,YAAY,EAAE,MAAM,QAAQ,GAAU;AAC7C,QAAM,mBAAe,sBAAuB,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAS,EAAE;AACrC,QAAM,CAAC,KAAK,MAAM,QAAI,wBAAS,EAAE;AACjC,QAAM,CAAC,SAAS,UAAU,QAAI,wBAAS,GAAG;AAC1C,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAS,SAAS;AAC5C,QAAM,CAAC,YAAY,aAAa,QAAI,wBAAS,KAAK;AAGlD,+BAAU,MAAM;AACd,UAAM,UAAU,CAAC,MAAqB;AACpC,UAAI,EAAE,WAAW,EAAE,QAAQ,KAAK;AAC9B,gBAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,MACnB;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,OAAO;AAC1C,WAAO,MAAM,OAAO,oBAAoB,WAAW,OAAO;AAAA,EAC5D,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,SAAS,QAAQ;AAEvB,SACE,8EACE;AAAA,kDAAC,SAAI,KAAK,cAAc,OAAO,EAAE,GAAGA,KAAI,SAAS,OAAO,GAEtD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,GAAGA,KAAI;AAAA,YACP;AAAA,YACA,iBAAiB;AAAA;AAAA,kBAEX,KAAK;AAAA,kBACL,KAAK;AAAA;AAAA,8BAEO,GAAG;AAAA;AAAA,YAErB;AAAA,UACF;AAAA;AAAA,MACF;AAAA,MAEA,6CAAC,mBAAgB,WAAW,cAAc;AAAA,OAC5C;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,gBAAgB,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;AAAA,QAC7C,MAAM;AAAA;AAAA,IACR;AAAA,IACC,cACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAEO,SAAS,UAAU;AACxB,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA;AAAA,qDAAC,eAAY,SAAkB,MAAY;AAAA,QAE3C;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAO;AAAA,cACL,GAAGA,KAAI;AAAA,cACP,YAAY,OAAO,WAAW;AAAA,YAChC;AAAA,YACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,YACjC;AAAA;AAAA,cAEC,6CAAC,QAAK,MAAM,0BAAK;AAAA;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_lucide_react","import_react","import_jsx_runtime","Icon","React","import_jsx_runtime","css","import_jsx_runtime","css","import_lucide_react","import_jsx_runtime","css","import_jsx_runtime","css","import_jsx_runtime","css"]}
package/dist/index.mjs CHANGED
@@ -16,7 +16,7 @@ var styles = {
16
16
  alignItems: "center",
17
17
  justifyContent: "center",
18
18
  gap: 8,
19
- borderRadius: 6,
19
+ borderRadius: 4,
20
20
  position: "relative",
21
21
  outline: "none",
22
22
  userSelect: "none"
@@ -59,7 +59,6 @@ var styles = {
59
59
  backgroundColor: "rgba(59,130,246,0.08)"
60
60
  },
61
61
  closeButton: {
62
- borderRadius: 9999,
63
62
  color: "#0f172a"
64
63
  }
65
64
  };
@@ -227,7 +226,6 @@ var css3 = {
227
226
  pointerEvents: "auto"
228
227
  },
229
228
  button: {
230
- borderRadius: 9999,
231
229
  backgroundColor: "rgba(255,255,255,0.75)",
232
230
  backdropFilter: "blur(2px)"
233
231
  }
@@ -279,9 +277,7 @@ var css4 = {
279
277
  zIndex: 9999,
280
278
  pointerEvents: "auto",
281
279
  height: 40,
282
- borderWidth: 1,
283
- borderStyle: "solid",
284
- borderColor: "rgba(148,163,184,0.8)",
280
+ border: "1px solid rgba(148,163,184,0.8)",
285
281
  backgroundColor: "rgba(255,255,255,0.70)",
286
282
  boxShadow: "0 1px 3px rgba(15,23,42,0.2)",
287
283
  display: "flex",
@@ -291,7 +287,7 @@ var css4 = {
291
287
  },
292
288
  label: {
293
289
  fontWeight: 500,
294
- fontSize: "0.8125rem",
290
+ fontSize: "1.21875rem",
295
291
  letterSpacing: "0.03em",
296
292
  paddingRight: 8
297
293
  },
@@ -377,13 +373,12 @@ var css5 = {
377
373
  right: 8,
378
374
  zIndex: 1e3,
379
375
  pointerEvents: "auto",
380
- fontSize: "0.875rem",
376
+ fontSize: "1.3125rem",
381
377
  backgroundColor: "rgba(255,255,255,0.94)",
382
378
  backdropFilter: "blur(4px)",
383
379
  boxShadow: "0 4px 6px rgba(15,23,42,0.12)",
384
- borderWidth: 1,
385
- borderStyle: "solid",
386
- borderColor: "rgba(148,163,184,0.5)",
380
+ border: "1px solid rgba(148,163,184,0.5)",
381
+ borderRadius: 12,
387
382
  paddingInline: 12,
388
383
  paddingBlock: 8,
389
384
  width: "auto",
@@ -393,9 +388,7 @@ var css5 = {
393
388
  },
394
389
  fieldRow: {
395
390
  width: "100%",
396
- borderBottomWidth: 1,
397
- borderBottomStyle: "solid",
398
- borderBottomColor: "rgba(148,163,184,0.4)",
391
+ borderBottom: "1px solid rgba(148,163,184,0.4)",
399
392
  paddingBottom: 12,
400
393
  display: "flex",
401
394
  flexDirection: "column",
@@ -405,24 +398,22 @@ var css5 = {
405
398
  display: "flex",
406
399
  alignItems: "flex-end",
407
400
  gap: 8,
408
- borderRadius: 6
401
+ borderRadius: 4
409
402
  },
410
403
  inputWrapper: {
411
404
  width: 104
412
405
  },
413
406
  label: {
414
407
  display: "block",
415
- fontSize: "0.75rem",
408
+ fontSize: "1.125rem",
416
409
  fontWeight: 500,
417
410
  marginBottom: 4
418
411
  },
419
412
  numberInput: {
420
413
  width: "100%",
421
414
  height: 32,
422
- borderRadius: 6,
423
- borderWidth: 1,
424
- borderStyle: "solid",
425
- borderColor: "#e5e7eb",
415
+ borderRadius: 4,
416
+ border: "1px solid #e5e7eb",
426
417
  paddingInline: 8,
427
418
  fontSize: "0.875rem"
428
419
  },
@@ -440,7 +431,7 @@ var css5 = {
440
431
  },
441
432
  colorLabel: {
442
433
  display: "block",
443
- fontSize: "0.75rem",
434
+ fontSize: "1.125rem",
444
435
  fontWeight: 500,
445
436
  marginBottom: 4
446
437
  },
@@ -451,8 +442,7 @@ var css5 = {
451
442
  colorDot: {
452
443
  display: "block",
453
444
  width: "80%",
454
- height: "80%",
455
- borderRadius: 9999
445
+ height: "80%"
456
446
  }
457
447
  };
458
448
  function ConfigOptions(props) {
@@ -516,25 +506,25 @@ function ConfigOptions(props) {
516
506
  import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
517
507
  var css6 = {
518
508
  overlay: {
519
- position: "fixed",
509
+ position: "absolute",
520
510
  top: 100,
521
511
  left: 0,
522
512
  width: "100%",
523
513
  pointerEvents: "none",
524
514
  display: "flex",
525
515
  justifyContent: "center",
526
- zIndex: 9998
516
+ zIndex: 10
527
517
  },
528
518
  grid: {
529
519
  width: "100%"
530
520
  },
531
521
  triggerButton: {
532
- position: "fixed",
522
+ position: "absolute",
533
523
  bottom: 8,
534
524
  right: 8,
535
- zIndex: 9999,
536
- fontSize: "0.75rem",
537
- backgroundColor: "rgba(255,255,255,0.66)"
525
+ zIndex: 20,
526
+ fontSize: "1rem",
527
+ backgroundColor: "rgba(255,255,255,0.70)"
538
528
  }
539
529
  };
540
530
  function RowGridCore({ show, setShow }) {
@@ -555,34 +545,27 @@ function RowGridCore({ show, setShow }) {
555
545
  }, []);
556
546
  if (!show) return null;
557
547
  const height = lines * gap;
558
- return /* @__PURE__ */ jsxs3("div", { children: [
559
- /* @__PURE__ */ jsxs3(
560
- "div",
561
- {
562
- ref: containerRef,
563
- style: { ...css6.overlay, height },
564
- children: [
565
- /* @__PURE__ */ jsx7(
566
- "div",
567
- {
568
- style: {
569
- ...css6.grid,
570
- height,
571
- backgroundImage: `repeating-linear-gradient(
548
+ return /* @__PURE__ */ jsxs3(Fragment, { children: [
549
+ /* @__PURE__ */ jsxs3("div", { ref: containerRef, style: { ...css6.overlay, height }, children: [
550
+ /* @__PURE__ */ jsx7(
551
+ "div",
552
+ {
553
+ style: {
554
+ ...css6.grid,
555
+ height,
556
+ backgroundImage: `repeating-linear-gradient(
572
557
  to bottom,
573
558
  ${color},
574
559
  ${color} 1px,
575
560
  transparent 1px,
576
561
  transparent ${gap}px
577
562
  )`,
578
- opacity
579
- }
580
- }
581
- ),
582
- /* @__PURE__ */ jsx7(MoveLinesButton, { targetRef: containerRef })
583
- ]
584
- }
585
- ),
563
+ opacity
564
+ }
565
+ }
566
+ ),
567
+ /* @__PURE__ */ jsx7(MoveLinesButton, { targetRef: containerRef })
568
+ ] }),
586
569
  /* @__PURE__ */ jsx7(
587
570
  ConfigButton,
588
571
  {
@@ -608,22 +591,38 @@ function RowGridCore({ show, setShow }) {
608
591
  }
609
592
  function RowGrid() {
610
593
  const [show, setShow] = useState(false);
611
- return /* @__PURE__ */ jsxs3(Fragment, { children: [
612
- /* @__PURE__ */ jsxs3(
613
- Button,
614
- {
615
- size: "sm",
616
- variant: "ghost",
617
- style: { ...css6.triggerButton, visibility: show ? "hidden" : "visible" },
618
- onClick: () => setShow((v) => !v),
619
- children: [
620
- "Mostrar linhas",
621
- /* @__PURE__ */ jsx7(Icon, { Icon: Eye })
622
- ]
623
- }
624
- ),
625
- /* @__PURE__ */ jsx7(RowGridCore, { setShow, show })
626
- ] });
594
+ return /* @__PURE__ */ jsxs3(
595
+ "div",
596
+ {
597
+ style: {
598
+ position: "fixed",
599
+ zIndex: 9e3,
600
+ bottom: 0,
601
+ left: 0,
602
+ width: "100%",
603
+ height: "100dvh"
604
+ },
605
+ children: [
606
+ /* @__PURE__ */ jsx7(RowGridCore, { setShow, show }),
607
+ /* @__PURE__ */ jsxs3(
608
+ Button,
609
+ {
610
+ size: "sm",
611
+ variant: "ghost",
612
+ style: {
613
+ ...css6.triggerButton,
614
+ visibility: show ? "hidden" : "visible"
615
+ },
616
+ onClick: () => setShow((v) => !v),
617
+ children: [
618
+ "Mostrar linhas",
619
+ /* @__PURE__ */ jsx7(Icon, { Icon: Eye })
620
+ ]
621
+ }
622
+ )
623
+ ]
624
+ }
625
+ );
627
626
  }
628
627
  export {
629
628
  RowGrid
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/lines-overlay.tsx","../src/components/move-lines-button.tsx","../src/ui/button.tsx","../src/ui/lucide-icon.tsx","../src/ui/separator.tsx","../src/components/config-button.tsx","../src/components/data.ts","../src/components/config-options.tsx"],"sourcesContent":["import { Eye } from \"lucide-react\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport {\r\n ConfigButton,\r\n ConfigOptions,\r\n MoveLinesButton,\r\n} from \"./components/index\";\r\nimport { StateSetter } from \"../types\";\r\nimport { Button, Icon } from \"./ui\";\r\n\r\ntype Props = {\r\n setShow: StateSetter<boolean>;\r\n show: boolean;\r\n};\r\n\r\nconst css = {\r\n overlay: {\r\n position: 'fixed' as const,\r\n top: 100,\r\n left: 0,\r\n width: '100%',\r\n pointerEvents: 'none' as const,\r\n display: 'flex',\r\n justifyContent: 'center',\r\n zIndex: 9998,\r\n },\r\n grid: {\r\n width: '100%',\r\n },\r\n triggerButton: {\r\n position: 'fixed' as const,\r\n bottom: 8,\r\n right: 8,\r\n zIndex: 9999,\r\n fontSize: '0.75rem',\r\n backgroundColor: 'rgba(255,255,255,0.66)',\r\n },\r\n} as const;\r\n\r\nfunction RowGridCore({ show, setShow }: Props) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n const [lines, setLines] = useState(12);\r\n const [gap, setGap] = useState(24);\r\n const [opacity, setOpacity] = useState(0.3);\r\n const [color, setColor] = useState(\"#d71212\");\r\n const [showConfig, setShowConfig] = useState(false);\r\n\r\n // Toggle por tecla\r\n useEffect(() => {\r\n const handler = (e: KeyboardEvent) => {\r\n if (e.ctrlKey && e.key === \";\") {\r\n setShow((v) => !v);\r\n }\r\n };\r\n window.addEventListener(\"keydown\", handler);\r\n return () => window.removeEventListener(\"keydown\", handler);\r\n }, []);\r\n\r\n if (!show) return null;\r\n\r\n const height = lines * gap;\r\n\r\n return (\r\n <div>\r\n <div\r\n ref={containerRef}\r\n style={{ ...css.overlay, height }}\r\n >\r\n {/* linhas */}\r\n <div\r\n style={{\r\n ...css.grid,\r\n height,\r\n backgroundImage: `repeating-linear-gradient(\r\n to bottom,\r\n ${color},\r\n ${color} 1px,\r\n transparent 1px,\r\n transparent ${gap}px\r\n )`,\r\n opacity,\r\n }}\r\n />\r\n {/* Move */}\r\n <MoveLinesButton targetRef={containerRef} />\r\n </div>\r\n {/* Config */}\r\n <ConfigButton\r\n setShow={setShow}\r\n onToggleConfig={() => setShowConfig((v) => !v)}\r\n open={showConfig}\r\n />\r\n {showConfig && (\r\n <ConfigOptions\r\n lines={lines}\r\n gap={gap}\r\n opacity={opacity}\r\n color={color}\r\n setLines={setLines}\r\n setGap={setGap}\r\n setOpacity={setOpacity}\r\n setColor={setColor}\r\n />\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nexport function RowGrid() {\r\n const [show, setShow] = useState(false);\r\n\r\n return (\r\n <>\r\n <Button\r\n size=\"sm\"\r\n variant=\"ghost\"\r\n style={{ ...css.triggerButton, visibility: show ? 'hidden' : 'visible' }}\r\n onClick={() => setShow((v) => !v)}\r\n >\r\n Mostrar linhas\r\n <Icon Icon={Eye} />\r\n </Button>\r\n\r\n <RowGridCore setShow={setShow} show={show} />\r\n </>\r\n );\r\n}\r\n","import { Move } from 'lucide-react';\nimport { useRef, type MouseEvent as ReactMouseEvent, type RefObject } from 'react';\nimport { Button, Icon } from '../ui';\n\nconst css = {\n wrapper: {\n position: 'absolute' as const,\n left: '50%',\n top: '44%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'auto',\n },\n button: {\n borderRadius: 9999,\n backgroundColor: 'rgba(255,255,255,0.75)',\n backdropFilter: 'blur(2px)',\n },\n} as const;\n\r\nexport function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivElement | null> }) {\n const dragging = useRef(false);\r\n const last = useRef({ x: 0, y: 0 });\r\n\r\n function onMouseDown(e: ReactMouseEvent<HTMLButtonElement>) {\n dragging.current = true;\r\n last.current = { x: e.clientX, y: e.clientY };\r\n document.addEventListener('mousemove', onMove);\r\n document.addEventListener('mouseup', onUp);\r\n }\r\n\r\n function onMove(e: MouseEvent) {\r\n if (!dragging.current || !targetRef.current) return;\r\n\r\n const dx = e.clientX - last.current.x;\r\n const dy = e.clientY - last.current.y;\r\n\r\n const el = targetRef.current;\r\n\r\n el.style.left = `${el.offsetLeft + dx}px`;\r\n el.style.top = `${el.offsetTop + dy}px`;\r\n\r\n last.current = { x: e.clientX, y: e.clientY };\r\n }\r\n\r\n function onUp() {\r\n dragging.current = false;\r\n document.removeEventListener('mousemove', onMove);\r\n document.removeEventListener('mouseup', onUp);\r\n }\r\n\r\n return (\r\n <div style={css.wrapper}>\n <Button\r\n size=\"icon-sm\"\r\n data-black\r\n variant=\"ghost\"\r\n onMouseDown={onMouseDown}\r\n style={css.button}>\n <Icon Icon={Move} size=\"lg\" strokeWidth=\"thin\" />\r\n </Button>\r\n </div>\r\n );\r\n}\r\n","import * as React from 'react';\r\n\r\ntype ButtonVariant = 'default' | 'ghost' | 'transparent';\r\ntype ButtonSize = 'default' | 'sm' | 'icon-sm';\r\n\r\nconst styles = {\r\n base: {\r\n width: 'auto',\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n gap: 8,\r\n borderRadius: 6,\r\n position: 'relative',\r\n outline: 'none',\r\n userSelect: 'none',\r\n } satisfies React.CSSProperties,\r\n\r\n variants: {\r\n default: {\r\n backgroundColor: '#0ea5e9',\r\n color: '#ffffff',\r\n },\r\n ghost: {\r\n backgroundColor: 'transparent',\r\n color: '#111827',\r\n border: '1px solid #e5e7eb',\r\n },\r\n transparent: {\r\n backgroundColor: 'transparent',\r\n color: '#0ea5e9',\r\n },\r\n } satisfies Record<ButtonVariant, React.CSSProperties>,\r\n\r\n sizes: {\r\n default: {\r\n minHeight: 40,\r\n paddingInline: 12,\r\n paddingBlock: 12 * 0.73438 / 0.93,\r\n },\r\n sm: {\r\n minHeight: 36,\r\n paddingInline: 12,\r\n paddingBlock: 10,\r\n },\r\n 'icon-sm': {\r\n width: 32,\r\n height: 32,\r\n padding: 0,\r\n },\r\n } satisfies Record<ButtonSize, React.CSSProperties>,\r\n\r\n selected: {\r\n border: '2px solid #60a5fa',\r\n color: '#0ea5e9',\r\n backgroundColor: 'rgba(59,130,246,0.08)',\r\n } satisfies React.CSSProperties,\r\n\r\n closeButton: {\r\n borderRadius: 9999,\r\n color: '#0f172a',\r\n } satisfies React.CSSProperties,\r\n};\r\n\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n asChild?: boolean;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n closeButton?: boolean;\r\n variant?: ButtonVariant;\r\n size?: ButtonSize;\r\n}\r\n\r\ntype ResolveButtonStyleParams = {\r\n variant: ButtonVariant;\r\n size: ButtonSize;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n closeButton?: boolean;\r\n style?: React.CSSProperties;\r\n};\r\n\r\nexport function resolveButtonStyles({\r\n variant,\r\n size,\r\n selected,\r\n disabled,\r\n closeButton,\r\n style,\r\n}: ResolveButtonStyleParams): React.CSSProperties {\r\n return {\r\n ...styles.base,\r\n ...styles.variants[variant],\r\n ...styles.sizes[size],\r\n ...(disabled && { opacity: 0.6, cursor: 'not-allowed' }),\r\n ...(selected && styles.selected),\r\n ...(closeButton && styles.closeButton),\r\n ...style,\r\n };\r\n}\r\n\r\ntype SlotProps = React.HTMLAttributes<HTMLElement> & {\r\n children?: React.ReactNode;\r\n};\r\n\r\nconst Slot = React.forwardRef<HTMLElement, SlotProps>(\r\n ({ children, className, style, ...slotProps }, ref) => {\r\n if (!children || !React.isValidElement(children)) {\r\n return null;\r\n }\r\n\r\n const child = children as React.ReactElement<any>;\r\n const mergedClassName = [className, child.props.className].filter(Boolean).join(' ');\r\n const mergedStyle = { ...style, ...child.props.style };\r\n\r\n return React.cloneElement(child, {\r\n ...slotProps,\r\n ...child.props,\r\n className: mergedClassName || undefined,\r\n style: mergedStyle,\r\n ref,\r\n });\r\n },\r\n);\r\n\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n {\r\n className,\r\n variant = 'default',\r\n size = 'default',\r\n asChild = false,\r\n selected = false,\r\n disabled = false,\r\n closeButton = false,\r\n style,\r\n ...props\r\n },\r\n ref,\r\n ) => {\r\n const Comp = asChild ? Slot : 'button';\r\n\r\n return (\r\n <Comp\r\n ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n style={resolveButtonStyles({\r\n variant,\r\n size,\r\n selected,\r\n disabled,\r\n closeButton,\r\n style,\r\n })}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\n\r\n","import type { LucideIcon as LucideIconType, LucideProps } from 'lucide-react';\r\n\r\ntype StrokeWidthValue = keyof typeof weights;\r\nconst weights = {\r\n thin: 2.25,\r\n light: 2.35,\r\n normal: 2.65,\r\n semibold: 2.75,\r\n bold: 2.85,\r\n extrabold: 3,\r\n};\r\n\r\ntype SizeValue = keyof typeof iconSizes;\r\n\r\nconst iconSizes = {\r\n xs: '0.937em',\r\n sm: '0.968em',\r\n base: '1em',\r\n md: '1.033em',\r\n lg: '1.067em',\r\n xl: '1.138em',\r\n '2xl': '1.215em',\r\n '3xl': '1.296em',\r\n h6: '1.067em',\r\n h5: '1.138em',\r\n h4: '1.215em',\r\n h3: '1.296em',\r\n h2: '1.383em',\r\n h1: '1.4757em',\r\n};\r\n\r\nconst css = {\r\n wrapper: {\r\n height: '0.75rem',\r\n display: 'inline-flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n overflow: 'visible' as const,\r\n },\r\n} as const;\r\n\r\ninterface IconProps extends Omit<LucideProps, 'size' | 'strokeWidth'> {\r\n Icon: LucideIconType;\r\n size?: SizeValue | string;\r\n strokeWidth?: StrokeWidthValue | string;\r\n}\r\n\r\nexport const Icon = ({ Icon, size, className, strokeWidth, fill }: IconProps) => {\r\n return (\r\n <div data-icon style={css.wrapper}>\r\n <Icon\r\n size={iconSizes[size as SizeValue] || size || '1.067em'}\r\n strokeWidth={weights[strokeWidth as StrokeWidthValue] || strokeWidth || 2.6}\r\n className={className}\r\n fill={fill || 'none'}\r\n />\r\n </div>\r\n );\r\n};\r\n","import * as React from 'react';\r\n\r\nconst css = {\r\n base: {\r\n flexShrink: 0,\r\n backgroundColor: '#e5e7eb',\r\n },\r\n horizontal: {\r\n height: 1,\r\n width: '100%',\r\n },\r\n vertical: {\r\n height: '100%',\r\n width: 1,\r\n },\r\n} as const;\r\n\r\ntype SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {\r\n orientation?: 'horizontal' | 'vertical';\r\n decorative?: boolean;\r\n};\r\n\r\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\r\n ({ className, orientation = 'horizontal', decorative = true, style, ...props }, ref) => {\r\n const dimensionStyle = orientation === 'horizontal' ? css.horizontal : css.vertical;\r\n\r\n const ariaProps = decorative\r\n ? { role: 'none' as const }\r\n : {\r\n role: 'separator' as const,\r\n 'aria-orientation': orientation,\r\n };\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n style={{ ...css.base, ...dimensionStyle, ...style }}\r\n className={className}\r\n {...ariaProps}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\nSeparator.displayName = 'Separator';\r\n\r\nexport { Separator };\r\n","import { ChevronDown, ChevronUp, X } from 'lucide-react';\nimport { MouseEvent } from 'react';\nimport { StateSetter } from '../../types';\nimport { Button, Icon, Separator } from '../ui/index';\n\nconst css = {\n container: {\n position: 'fixed',\n bottom: 8,\n right: 8,\n zIndex: 9999,\n pointerEvents: 'auto',\n height: 40,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: 'rgba(148,163,184,0.8)',\n backgroundColor: 'rgba(255,255,255,0.70)',\n boxShadow: '0 1px 3px rgba(15,23,42,0.2)',\n display: 'flex',\n alignItems: 'center',\n paddingLeft: 14,\n paddingRight: 4,\n },\n label: {\n fontWeight: 500,\n fontSize: '0.8125rem',\n letterSpacing: '0.03em',\n paddingRight: 8,\n },\n buttonsRow: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n gap: 4,\n },\n closeIcon: {\n color: '#dc2626',\n },\n} as const;\n\nexport function ConfigButton({\n onToggleConfig,\n open,\n setShow,\n}: {\n open: boolean;\n onToggleConfig: () => void;\n setShow: StateSetter<boolean>;\n}) {\n const handleClick = (e: MouseEvent<HTMLButtonElement>, item: number) => {\n if (item === 1) {\n onToggleConfig();\n } else {\n e.stopPropagation();\n setShow((v) => !v);\n }\n };\n\n return (\n <div style={css.container}>\n <span style={css.label}>\n Configurar\n </span>\n\n <div style={css.buttonsRow}>\n {[1, 2, 3].map((item) =>\n item !== 2 ? (\n <Button\n variant={'transparent'}\n size=\"icon-sm\"\n data-black\n key={item}\n onClick={(e) => {\n handleClick(e, item);\n }}>\n {item === 1 ? (\n <Icon Icon={open ? ChevronDown : ChevronUp} size={'xl'} strokeWidth=\"light\" />\n ) : (\n <Icon Icon={X} size=\"sm\" strokeWidth=\"light\" className={undefined} />\n )}\n </Button>\n ) : (\n <Separator orientation=\"vertical\" />\n ),\n )}\n </div>\n </div>\n );\n}\n","export type FieldBinding = {\r\n value: number;\r\n set: (v: number) => void;\r\n};\r\n\r\nexport type ConfigOptionsProps = {\r\n lines: number;\r\n gap: number;\r\n opacity: number;\r\n color: string;\r\n setLines: (v: number) => void;\r\n setGap: (v: number) => void;\r\n setOpacity: (v: number) => void;\r\n setColor: (v: string) => void;\r\n};\r\n\r\nexport type NumberFieldConfig = {\r\n key: 'lines' | 'gap' | 'opacity';\r\n label: string;\r\n step?: number;\r\n quick: number[];\r\n};\r\n\r\nexport const NUMBER_FIELDS: NumberFieldConfig[] = [\r\n {\r\n key: 'lines',\r\n label: 'Linhas',\r\n quick: [2, 4, 8, 12],\r\n step: 4,\r\n },\r\n {\r\n key: 'gap',\r\n label: 'Gap',\r\n quick: [16, 24, 32, 40, 44],\r\n step: 4,\r\n },\r\n {\r\n key: 'opacity',\r\n label: 'Opacidade',\r\n quick: [0.2, 0.3, 0.5, 0.7],\r\n step: 0.05,\r\n },\r\n];\r\n\r\nexport const colorOptions = [\r\n { name: 'Azul', value: '#2563eb' },\r\n { name: 'Amarelo', value: '#eab308' },\r\n { name: 'Verde', value: '#16a34a' },\r\n { name: 'Roxo', value: '#7c3aed' },\r\n { name: 'Violeta', value: '#9333ea' },\r\n { name: 'Violeta', value: '#d71212' },\r\n];\r\n","import { Button } from '../ui';\r\nimport { ConfigOptionsProps, NUMBER_FIELDS, colorOptions } from './data';\r\n\r\nconst css = {\r\n container: {\r\n position: 'fixed',\r\n bottom: 52,\r\n right: 8,\r\n zIndex: 1000,\r\n pointerEvents: 'auto',\r\n fontSize: '0.875rem',\r\n backgroundColor: 'rgba(255,255,255,0.94)',\r\n backdropFilter: 'blur(4px)',\r\n boxShadow: '0 4px 6px rgba(15,23,42,0.12)',\r\n borderWidth: 1,\r\n borderStyle: 'solid',\r\n borderColor: 'rgba(148,163,184,0.5)',\r\n paddingInline: 12,\r\n paddingBlock: 8,\r\n width: 'auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: 8,\r\n },\r\n fieldRow: {\r\n width: '100%',\r\n borderBottomWidth: 1,\r\n borderBottomStyle: 'solid',\r\n borderBottomColor: 'rgba(148,163,184,0.4)',\r\n paddingBottom: 12,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: 4,\r\n },\r\n wrapper: {\r\n display: 'flex',\r\n alignItems: 'flex-end',\r\n gap: 8,\r\n borderRadius: 6,\r\n },\r\n inputWrapper: {\r\n width: 104,\r\n },\r\n label: {\r\n display: 'block',\r\n fontSize: '0.75rem',\r\n fontWeight: 500,\r\n marginBottom: 4,\r\n },\r\n numberInput: {\r\n width: '100%',\r\n height: 32,\r\n borderRadius: 6,\r\n borderWidth: 1,\r\n borderStyle: 'solid',\r\n borderColor: '#e5e7eb',\r\n paddingInline: 8,\r\n fontSize: '0.875rem',\r\n },\r\n quickRow: {\r\n display: 'flex',\r\n gap: 5,\r\n marginTop: 4,\r\n },\r\n quickButton: {\r\n fontWeight: 500,\r\n fontSize: '0.875rem',\r\n },\r\n colorSection: {\r\n marginTop: 8,\r\n },\r\n colorLabel: {\r\n display: 'block',\r\n fontSize: '0.75rem',\r\n fontWeight: 500,\r\n marginBottom: 4,\r\n },\r\n colorRow: {\r\n display: 'flex',\r\n gap: 8,\r\n },\r\n colorDot: {\r\n display: 'block',\r\n width: '80%',\r\n height: '80%',\r\n borderRadius: 9999,\r\n },\r\n} as const;\r\n\r\nexport function ConfigOptions(props: ConfigOptionsProps) {\r\n const fieldBindings = {\r\n lines: { value: props.lines, set: props.setLines },\r\n gap: { value: props.gap, set: props.setGap },\r\n opacity: { value: props.opacity, set: props.setOpacity },\r\n };\r\n\r\n return (\r\n <div style={css.container}>\r\n {NUMBER_FIELDS.map((field) => {\r\n const binding = fieldBindings[field.key];\r\n\r\n return (\r\n <div style={css.fieldRow} key={field.key}>\r\n <div style={css.wrapper}>\r\n <div style={css.inputWrapper}>\r\n <label style={css.label}>{field.label}</label>\r\n <input\r\n style={css.numberInput}\r\n type=\"number\"\r\n step={field.step}\r\n value={binding.value}\r\n onChange={(e) => binding.set(+e.target.value)}\r\n />\r\n </div>\r\n <div style={css.quickRow}>\r\n {field.quick.map((v) => {\r\n return (\r\n <Button\r\n selected={binding.value === v}\r\n key={v}\r\n data-option\r\n variant=\"ghost\"\r\n size=\"icon-sm\"\r\n style={css.quickButton}\r\n onClick={() => binding.set(v)}>\r\n {v}\r\n </Button>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n })}\r\n\r\n <div style={css.colorSection}>\r\n <span style={css.colorLabel}>Cor</span>\r\n <div style={css.colorRow}>\r\n {colorOptions.map((c) => (\r\n <Button\r\n key={c.value}\r\n variant=\"ghost\"\r\n size=\"icon-sm\"\r\n title={c.name}\r\n onClick={() => props.setColor(c.value)}>\r\n <span style={{ ...css.colorDot, backgroundColor: c.value }} />\r\n </Button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n"],"mappings":"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","names":["useRef","jsx","Icon","React","jsx","css","jsx","css","jsx","css","jsx","jsxs","css","jsx","jsxs","css","useRef"]}
1
+ {"version":3,"sources":["../src/lines-overlay.tsx","../src/components/move-lines-button.tsx","../src/ui/button.tsx","../src/ui/lucide-icon.tsx","../src/ui/separator.tsx","../src/components/config-button.tsx","../src/components/data.ts","../src/components/config-options.tsx"],"sourcesContent":["import { Eye } from \"lucide-react\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport {\r\n ConfigButton,\r\n ConfigOptions,\r\n MoveLinesButton,\r\n} from \"./components/index\";\r\nimport { StateSetter } from \"../types\";\r\nimport { Button, Icon } from \"./ui\";\r\n\r\ntype Props = {\r\n setShow: StateSetter<boolean>;\r\n show: boolean;\r\n};\r\n\r\nconst css = {\r\n overlay: {\r\n position: \"absolute\" as const,\r\n top: 100,\r\n left: 0,\r\n width: \"100%\",\r\n pointerEvents: \"none\" as const,\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n zIndex: 10,\r\n },\r\n grid: {\r\n width: \"100%\",\r\n },\r\n triggerButton: {\r\n position: \"absolute\" as const,\r\n bottom: 8,\r\n right: 8,\r\n zIndex: 20,\r\n fontSize: \"1rem\",\r\n backgroundColor: \"rgba(255,255,255,0.70)\",\r\n },\r\n} as const;\r\n\r\nfunction RowGridCore({ show, setShow }: Props) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const [lines, setLines] = useState(12);\r\n const [gap, setGap] = useState(24);\r\n const [opacity, setOpacity] = useState(0.3);\r\n const [color, setColor] = useState(\"#d71212\");\r\n const [showConfig, setShowConfig] = useState(false);\r\n\r\n // Toggle por tecla\r\n useEffect(() => {\r\n const handler = (e: KeyboardEvent) => {\r\n if (e.ctrlKey && e.key === \";\") {\r\n setShow((v) => !v);\r\n }\r\n };\r\n window.addEventListener(\"keydown\", handler);\r\n return () => window.removeEventListener(\"keydown\", handler);\r\n }, []);\r\n\r\n if (!show) return null;\r\n\r\n const height = lines * gap;\r\n\r\n return (\r\n <>\r\n <div ref={containerRef} style={{ ...css.overlay, height }}>\r\n {/* linhas */}\r\n <div\r\n style={{\r\n ...css.grid,\r\n height,\r\n backgroundImage: `repeating-linear-gradient(\r\n to bottom,\r\n ${color},\r\n ${color} 1px,\r\n transparent 1px,\r\n transparent ${gap}px\r\n )`,\r\n opacity,\r\n }}\r\n />\r\n {/* Move */}\r\n <MoveLinesButton targetRef={containerRef} />\r\n </div>\r\n {/* Config */}\r\n <ConfigButton\r\n setShow={setShow}\r\n onToggleConfig={() => setShowConfig((v) => !v)}\r\n open={showConfig}\r\n />\r\n {showConfig && (\r\n <ConfigOptions\r\n lines={lines}\r\n gap={gap}\r\n opacity={opacity}\r\n color={color}\r\n setLines={setLines}\r\n setGap={setGap}\r\n setOpacity={setOpacity}\r\n setColor={setColor}\r\n />\r\n )}\r\n </>\r\n );\r\n}\r\n\r\nexport function RowGrid() {\r\n const [show, setShow] = useState(false);\r\n\r\n return (\r\n <div\r\n style={{\r\n position: \"fixed\",\r\n zIndex: 9000,\r\n bottom: 0,\r\n left: 0,\r\n width: \"100%\",\r\n height: \"100dvh\",\r\n }}\r\n >\r\n <RowGridCore setShow={setShow} show={show} />\r\n\r\n <Button\r\n size=\"sm\"\r\n variant=\"ghost\"\r\n style={{\r\n ...css.triggerButton,\r\n visibility: show ? \"hidden\" : \"visible\",\r\n }}\r\n onClick={() => setShow((v) => !v)}\r\n >\r\n Mostrar linhas\r\n <Icon Icon={Eye} />\r\n </Button>\r\n </div>\r\n );\r\n}\r\n","import { Move } from 'lucide-react';\r\nimport { useRef, type MouseEvent as ReactMouseEvent, type RefObject } from 'react';\r\nimport { Button, Icon } from '../ui';\r\n\r\nconst css = {\r\n wrapper: {\r\n position: 'absolute' as const,\r\n left: '50%',\r\n top: '44%',\r\n transform: 'translate(-50%, -50%)',\r\n pointerEvents: 'auto',\r\n },\r\n button: {\r\n backgroundColor: 'rgba(255,255,255,0.75)',\r\n backdropFilter: 'blur(2px)',\r\n },\r\n} as const;\r\n\r\nexport function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivElement | null> }) {\r\n const dragging = useRef(false);\r\n const last = useRef({ x: 0, y: 0 });\r\n\r\n function onMouseDown(e: ReactMouseEvent<HTMLButtonElement>) {\r\n dragging.current = true;\r\n last.current = { x: e.clientX, y: e.clientY };\r\n document.addEventListener('mousemove', onMove);\r\n document.addEventListener('mouseup', onUp);\r\n }\r\n\r\n function onMove(e: MouseEvent) {\r\n if (!dragging.current || !targetRef.current) return;\r\n\r\n const dx = e.clientX - last.current.x;\r\n const dy = e.clientY - last.current.y;\r\n\r\n const el = targetRef.current;\r\n\r\n el.style.left = `${el.offsetLeft + dx}px`;\r\n el.style.top = `${el.offsetTop + dy}px`;\r\n\r\n last.current = { x: e.clientX, y: e.clientY };\r\n }\r\n\r\n function onUp() {\r\n dragging.current = false;\r\n document.removeEventListener('mousemove', onMove);\r\n document.removeEventListener('mouseup', onUp);\r\n }\r\n\r\n return (\r\n <div style={css.wrapper}>\r\n <Button\r\n size=\"icon-sm\"\r\n data-black\r\n variant=\"ghost\"\r\n onMouseDown={onMouseDown}\r\n style={css.button}>\r\n <Icon Icon={Move} size=\"lg\" strokeWidth=\"thin\" />\r\n </Button>\r\n </div>\r\n );\r\n}\r\n","import * as React from 'react';\r\n\r\ntype ButtonVariant = 'default' | 'ghost' | 'transparent';\r\ntype ButtonSize = 'default' | 'sm' | 'icon-sm';\r\n\r\nconst styles = {\r\n base: {\r\n width: 'auto',\r\n display: 'inline-flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n gap: 8,\n borderRadius: 4,\n position: 'relative',\r\n outline: 'none',\r\n userSelect: 'none',\r\n } satisfies React.CSSProperties,\r\n\r\n variants: {\r\n default: {\r\n backgroundColor: '#0ea5e9',\r\n color: '#ffffff',\r\n },\r\n ghost: {\r\n backgroundColor: 'transparent',\r\n color: '#111827',\r\n border: '1px solid #e5e7eb',\r\n },\r\n transparent: {\r\n backgroundColor: 'transparent',\r\n color: '#0ea5e9',\r\n },\r\n } satisfies Record<ButtonVariant, React.CSSProperties>,\r\n\r\n sizes: {\r\n default: {\r\n minHeight: 40,\r\n paddingInline: 12,\r\n paddingBlock: 12 * 0.73438 / 0.93,\r\n },\r\n sm: {\r\n minHeight: 36,\r\n paddingInline: 12,\r\n paddingBlock: 10,\r\n },\r\n 'icon-sm': {\r\n width: 32,\r\n height: 32,\r\n padding: 0,\r\n },\r\n } satisfies Record<ButtonSize, React.CSSProperties>,\r\n\r\n selected: {\r\n border: '2px solid #60a5fa',\r\n color: '#0ea5e9',\r\n backgroundColor: 'rgba(59,130,246,0.08)',\r\n } satisfies React.CSSProperties,\r\n\r\n closeButton: {\r\n color: '#0f172a',\r\n } satisfies React.CSSProperties,\r\n};\r\n\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n asChild?: boolean;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n closeButton?: boolean;\r\n variant?: ButtonVariant;\r\n size?: ButtonSize;\r\n}\r\n\r\ntype ResolveButtonStyleParams = {\r\n variant: ButtonVariant;\r\n size: ButtonSize;\r\n selected?: boolean;\r\n disabled?: boolean;\r\n closeButton?: boolean;\r\n style?: React.CSSProperties;\r\n};\r\n\r\nexport function resolveButtonStyles({\r\n variant,\r\n size,\r\n selected,\r\n disabled,\r\n closeButton,\r\n style,\r\n}: ResolveButtonStyleParams): React.CSSProperties {\r\n return {\r\n ...styles.base,\r\n ...styles.variants[variant],\r\n ...styles.sizes[size],\r\n ...(disabled && { opacity: 0.6, cursor: 'not-allowed' }),\r\n ...(selected && styles.selected),\r\n ...(closeButton && styles.closeButton),\r\n ...style,\r\n };\r\n}\r\n\r\ntype SlotProps = React.HTMLAttributes<HTMLElement> & {\r\n children?: React.ReactNode;\r\n};\r\n\r\nconst Slot = React.forwardRef<HTMLElement, SlotProps>(\r\n ({ children, className, style, ...slotProps }, ref) => {\r\n if (!children || !React.isValidElement(children)) {\r\n return null;\r\n }\r\n\r\n const child = children as React.ReactElement<any>;\r\n const mergedClassName = [className, child.props.className].filter(Boolean).join(' ');\r\n const mergedStyle = { ...style, ...child.props.style };\r\n\r\n return React.cloneElement(child, {\r\n ...slotProps,\r\n ...child.props,\r\n className: mergedClassName || undefined,\r\n style: mergedStyle,\r\n ref,\r\n });\r\n },\r\n);\r\n\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (\r\n {\r\n className,\r\n variant = 'default',\r\n size = 'default',\r\n asChild = false,\r\n selected = false,\r\n disabled = false,\r\n closeButton = false,\r\n style,\r\n ...props\r\n },\r\n ref,\r\n ) => {\r\n const Comp = asChild ? Slot : 'button';\r\n\r\n return (\r\n <Comp\r\n ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n style={resolveButtonStyles({\r\n variant,\r\n size,\r\n selected,\r\n disabled,\r\n closeButton,\r\n style,\r\n })}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\n\r\n","import type { LucideIcon as LucideIconType, LucideProps } from 'lucide-react';\r\n\r\ntype StrokeWidthValue = keyof typeof weights;\r\nconst weights = {\r\n thin: 2.25,\r\n light: 2.35,\r\n normal: 2.65,\r\n semibold: 2.75,\r\n bold: 2.85,\r\n extrabold: 3,\r\n};\r\n\r\ntype SizeValue = keyof typeof iconSizes;\r\n\r\nconst iconSizes = {\r\n xs: '0.937em',\r\n sm: '0.968em',\r\n base: '1em',\r\n md: '1.033em',\r\n lg: '1.067em',\r\n xl: '1.138em',\r\n '2xl': '1.215em',\r\n '3xl': '1.296em',\r\n h6: '1.067em',\r\n h5: '1.138em',\r\n h4: '1.215em',\r\n h3: '1.296em',\r\n h2: '1.383em',\r\n h1: '1.4757em',\r\n};\r\n\r\nconst css = {\r\n wrapper: {\r\n height: '0.75rem',\r\n display: 'inline-flex',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n overflow: 'visible' as const,\r\n },\r\n} as const;\r\n\r\ninterface IconProps extends Omit<LucideProps, 'size' | 'strokeWidth'> {\r\n Icon: LucideIconType;\r\n size?: SizeValue | string;\r\n strokeWidth?: StrokeWidthValue | string;\r\n}\r\n\r\nexport const Icon = ({ Icon, size, className, strokeWidth, fill }: IconProps) => {\r\n return (\r\n <div data-icon style={css.wrapper}>\r\n <Icon\r\n size={iconSizes[size as SizeValue] || size || '1.067em'}\r\n strokeWidth={weights[strokeWidth as StrokeWidthValue] || strokeWidth || 2.6}\r\n className={className}\r\n fill={fill || 'none'}\r\n />\r\n </div>\r\n );\r\n};\r\n","import * as React from 'react';\r\n\r\nconst css = {\r\n base: {\r\n flexShrink: 0,\r\n backgroundColor: '#e5e7eb',\r\n },\r\n horizontal: {\r\n height: 1,\r\n width: '100%',\r\n },\r\n vertical: {\r\n height: '100%',\r\n width: 1,\r\n },\r\n} as const;\r\n\r\ntype SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {\r\n orientation?: 'horizontal' | 'vertical';\r\n decorative?: boolean;\r\n};\r\n\r\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\r\n ({ className, orientation = 'horizontal', decorative = true, style, ...props }, ref) => {\r\n const dimensionStyle = orientation === 'horizontal' ? css.horizontal : css.vertical;\r\n\r\n const ariaProps = decorative\r\n ? { role: 'none' as const }\r\n : {\r\n role: 'separator' as const,\r\n 'aria-orientation': orientation,\r\n };\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n style={{ ...css.base, ...dimensionStyle, ...style }}\r\n className={className}\r\n {...ariaProps}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\nSeparator.displayName = 'Separator';\r\n\r\nexport { Separator };\r\n","import { ChevronDown, ChevronUp, X } from 'lucide-react';\nimport { MouseEvent } from 'react';\nimport { StateSetter } from '../../types';\nimport { Button, Icon, Separator } from '../ui/index';\n\nconst css = {\n container: {\n position: 'fixed',\n bottom: 8,\n right: 8,\n zIndex: 9999,\n pointerEvents: 'auto',\n height: 40,\n border: '1px solid rgba(148,163,184,0.8)',\n backgroundColor: 'rgba(255,255,255,0.70)',\n boxShadow: '0 1px 3px rgba(15,23,42,0.2)',\n display: 'flex',\n alignItems: 'center',\n paddingLeft: 14,\n paddingRight: 4,\n },\n label: {\n fontWeight: 500,\n fontSize: '1.21875rem',\n letterSpacing: '0.03em',\n paddingRight: 8,\n },\n buttonsRow: {\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n gap: 4,\n },\n closeIcon: {\n color: '#dc2626',\n },\n} as const;\n\nexport function ConfigButton({\n onToggleConfig,\n open,\n setShow,\n}: {\n open: boolean;\n onToggleConfig: () => void;\n setShow: StateSetter<boolean>;\n}) {\n const handleClick = (e: MouseEvent<HTMLButtonElement>, item: number) => {\n if (item === 1) {\n onToggleConfig();\n } else {\n e.stopPropagation();\n setShow((v) => !v);\n }\n };\n\n return (\n <div style={css.container}>\n <span style={css.label}>\n Configurar\n </span>\n\n <div style={css.buttonsRow}>\n {[1, 2, 3].map((item) =>\n item !== 2 ? (\n <Button\n variant={'transparent'}\n size=\"icon-sm\"\n data-black\n key={item}\n onClick={(e) => {\n handleClick(e, item);\n }}>\n {item === 1 ? (\n <Icon Icon={open ? ChevronDown : ChevronUp} size={'xl'} strokeWidth=\"light\" />\n ) : (\n <Icon Icon={X} size=\"sm\" strokeWidth=\"light\" className={undefined} />\n )}\n </Button>\n ) : (\n <Separator orientation=\"vertical\" />\n )\n )}\n </div>\n </div>\n );\n}\n","export type FieldBinding = {\r\n value: number;\r\n set: (v: number) => void;\r\n};\r\n\r\nexport type ConfigOptionsProps = {\r\n lines: number;\r\n gap: number;\r\n opacity: number;\r\n color: string;\r\n setLines: (v: number) => void;\r\n setGap: (v: number) => void;\r\n setOpacity: (v: number) => void;\r\n setColor: (v: string) => void;\r\n};\r\n\r\nexport type NumberFieldConfig = {\r\n key: 'lines' | 'gap' | 'opacity';\r\n label: string;\r\n step?: number;\r\n quick: number[];\r\n};\r\n\r\nexport const NUMBER_FIELDS: NumberFieldConfig[] = [\r\n {\r\n key: 'lines',\r\n label: 'Linhas',\r\n quick: [2, 4, 8, 12],\r\n step: 4,\r\n },\r\n {\r\n key: 'gap',\r\n label: 'Gap',\r\n quick: [16, 24, 32, 40, 44],\r\n step: 4,\r\n },\r\n {\r\n key: 'opacity',\r\n label: 'Opacidade',\r\n quick: [0.2, 0.3, 0.5, 0.7],\r\n step: 0.05,\r\n },\r\n];\r\n\r\nexport const colorOptions = [\r\n { name: 'Azul', value: '#2563eb' },\r\n { name: 'Amarelo', value: '#eab308' },\r\n { name: 'Verde', value: '#16a34a' },\r\n { name: 'Roxo', value: '#7c3aed' },\r\n { name: 'Violeta', value: '#9333ea' },\r\n { name: 'Violeta', value: '#d71212' },\r\n];\r\n","import { Button } from '../ui';\r\nimport { ConfigOptionsProps, NUMBER_FIELDS, colorOptions } from './data';\r\n\r\nconst css = {\r\n container: {\r\n position: 'fixed',\r\n bottom: 52,\r\n right: 8,\r\n zIndex: 1000,\r\n pointerEvents: 'auto',\r\n fontSize: '1.3125rem',\r\n backgroundColor: 'rgba(255,255,255,0.94)',\r\n backdropFilter: 'blur(4px)',\r\n boxShadow: '0 4px 6px rgba(15,23,42,0.12)',\r\n border: \"1px solid rgba(148,163,184,0.5)\",\r\n borderRadius: 12,\r\n paddingInline: 12,\r\n paddingBlock: 8,\r\n width: 'auto',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: 8,\r\n },\r\n fieldRow: {\r\n width: '100%',\r\n borderBottom: \"1px solid rgba(148,163,184,0.4)\",\r\n paddingBottom: 12,\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: 4,\r\n },\r\n wrapper: {\r\n display: 'flex',\r\n alignItems: 'flex-end',\r\n gap: 8,\r\n borderRadius: 4,\r\n },\r\n inputWrapper: {\r\n width: 104,\r\n },\r\n label: {\r\n display: 'block',\r\n fontSize: '1.125rem',\r\n fontWeight: 500,\r\n marginBottom: 4,\r\n },\r\n numberInput: {\r\n width: '100%',\r\n height: 32,\r\n borderRadius: 4,\r\n border: '1px solid #e5e7eb',\r\n paddingInline: 8,\r\n fontSize: '0.875rem',\r\n },\r\n quickRow: {\r\n display: 'flex',\r\n gap: 5,\r\n marginTop: 4,\r\n },\r\n quickButton: {\r\n fontWeight: 500,\r\n fontSize: '0.875rem',\r\n },\r\n colorSection: {\r\n marginTop: 8,\r\n },\r\n colorLabel: {\r\n display: 'block',\r\n fontSize: '1.125rem',\r\n fontWeight: 500,\r\n marginBottom: 4,\r\n },\r\n colorRow: {\r\n display: 'flex',\r\n gap: 8,\r\n },\r\n colorDot: {\r\n display: 'block',\r\n width: '80%',\r\n height: '80%',\r\n },\r\n} as const;\r\n\r\nexport function ConfigOptions(props: ConfigOptionsProps) {\r\n const fieldBindings = {\r\n lines: { value: props.lines, set: props.setLines },\r\n gap: { value: props.gap, set: props.setGap },\r\n opacity: { value: props.opacity, set: props.setOpacity },\r\n };\r\n\r\n return (\r\n <div style={css.container}>\r\n {NUMBER_FIELDS.map((field) => {\r\n const binding = fieldBindings[field.key];\r\n\r\n return (\r\n <div style={css.fieldRow} key={field.key}>\r\n <div style={css.wrapper}>\r\n <div style={css.inputWrapper}>\r\n <label style={css.label}>{field.label}</label>\r\n <input\r\n style={css.numberInput}\r\n type=\"number\"\r\n step={field.step}\r\n value={binding.value}\r\n onChange={(e) => binding.set(+e.target.value)}\r\n />\r\n </div>\r\n <div style={css.quickRow}>\r\n {field.quick.map((v) => {\r\n return (\r\n <Button\r\n selected={binding.value === v}\r\n key={v}\r\n data-option\r\n variant=\"ghost\"\r\n size=\"icon-sm\"\r\n style={css.quickButton}\r\n onClick={() => binding.set(v)}>\r\n {v}\r\n </Button>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n })}\r\n\r\n <div style={css.colorSection}>\r\n <span style={css.colorLabel}>Cor</span>\r\n <div style={css.colorRow}>\r\n {colorOptions.map((c) => (\r\n <Button\r\n key={c.value}\r\n variant=\"ghost\"\r\n size=\"icon-sm\"\r\n title={c.name}\r\n onClick={() => props.setColor(c.value)}>\r\n <span style={{ ...css.colorDot, backgroundColor: c.value }} />\r\n </Button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n"],"mappings":"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","names":["useRef","jsx","Icon","React","jsx","css","jsx","css","jsx","css","jsx","jsxs","css","jsx","jsxs","css","useRef"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lines-overlay",
3
- "version": "0.1.21",
3
+ "version": "0.1.23",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/LeonardoSouzaBento/lines-overlay-npm-package.git"
package/src/components/config-button.tsx CHANGED
@@ -11,9 +11,7 @@ const css = {
11
11
  zIndex: 9999,
12
12
  pointerEvents: 'auto',
13
13
  height: 40,
14
- borderWidth: 1,
15
- borderStyle: 'solid',
16
- borderColor: 'rgba(148,163,184,0.8)',
14
+ border: '1px solid rgba(148,163,184,0.8)',
17
15
  backgroundColor: 'rgba(255,255,255,0.70)',
18
16
  boxShadow: '0 1px 3px rgba(15,23,42,0.2)',
19
17
  display: 'flex',
@@ -23,7 +21,7 @@ const css = {
23
21
  },
24
22
  label: {
25
23
  fontWeight: 500,
26
- fontSize: '0.8125rem',
24
+ fontSize: '1.21875rem',
27
25
  letterSpacing: '0.03em',
28
26
  paddingRight: 8,
29
27
  },
@@ -81,7 +79,7 @@ export function ConfigButton({
81
79
  </Button>
82
80
  ) : (
83
81
  <Separator orientation="vertical" />
84
- ),
82
+ )
85
83
  )}
86
84
  </div>
87
85
  </div>
package/src/components/config-options.tsx CHANGED
@@ -8,13 +8,12 @@ const css = {
8
8
  right: 8,
9
9
  zIndex: 1000,
10
10
  pointerEvents: 'auto',
11
- fontSize: '0.875rem',
11
+ fontSize: '1.3125rem',
12
12
  backgroundColor: 'rgba(255,255,255,0.94)',
13
13
  backdropFilter: 'blur(4px)',
14
14
  boxShadow: '0 4px 6px rgba(15,23,42,0.12)',
15
- borderWidth: 1,
16
- borderStyle: 'solid',
17
- borderColor: 'rgba(148,163,184,0.5)',
15
+ border: "1px solid rgba(148,163,184,0.5)",
16
+ borderRadius: 12,
18
17
  paddingInline: 12,
19
18
  paddingBlock: 8,
20
19
  width: 'auto',
@@ -24,9 +23,7 @@ const css = {
24
23
  },
25
24
  fieldRow: {
26
25
  width: '100%',
27
- borderBottomWidth: 1,
28
- borderBottomStyle: 'solid',
29
- borderBottomColor: 'rgba(148,163,184,0.4)',
26
+ borderBottom: "1px solid rgba(148,163,184,0.4)",
30
27
  paddingBottom: 12,
31
28
  display: 'flex',
32
29
  flexDirection: 'column',
@@ -36,24 +33,22 @@ const css = {
36
33
  display: 'flex',
37
34
  alignItems: 'flex-end',
38
35
  gap: 8,
39
- borderRadius: 6,
36
+ borderRadius: 4,
40
37
  },
41
38
  inputWrapper: {
42
39
  width: 104,
43
40
  },
44
41
  label: {
45
42
  display: 'block',
46
- fontSize: '0.75rem',
43
+ fontSize: '1.125rem',
47
44
  fontWeight: 500,
48
45
  marginBottom: 4,
49
46
  },
50
47
  numberInput: {
51
48
  width: '100%',
52
49
  height: 32,
53
- borderRadius: 6,
54
- borderWidth: 1,
55
- borderStyle: 'solid',
56
- borderColor: '#e5e7eb',
50
+ borderRadius: 4,
51
+ border: '1px solid #e5e7eb',
57
52
  paddingInline: 8,
58
53
  fontSize: '0.875rem',
59
54
  },
@@ -71,7 +66,7 @@ const css = {
71
66
  },
72
67
  colorLabel: {
73
68
  display: 'block',
74
- fontSize: '0.75rem',
69
+ fontSize: '1.125rem',
75
70
  fontWeight: 500,
76
71
  marginBottom: 4,
77
72
  },
@@ -83,7 +78,6 @@ const css = {
83
78
  display: 'block',
84
79
  width: '80%',
85
80
  height: '80%',
86
- borderRadius: 9999,
87
81
  },
88
82
  } as const;
89
83
 
package/src/components/move-lines-button.tsx CHANGED
@@ -1,27 +1,26 @@
1
- import { Move } from 'lucide-react';
2
- import { useRef, type MouseEvent as ReactMouseEvent, type RefObject } from 'react';
3
- import { Button, Icon } from '../ui';
4
-
5
- const css = {
6
- wrapper: {
7
- position: 'absolute' as const,
8
- left: '50%',
9
- top: '44%',
10
- transform: 'translate(-50%, -50%)',
11
- pointerEvents: 'auto',
12
- },
13
- button: {
14
- borderRadius: 9999,
15
- backgroundColor: 'rgba(255,255,255,0.75)',
16
- backdropFilter: 'blur(2px)',
17
- },
18
- } as const;
19
-
20
- export function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivElement | null> }) {
1
+ import { Move } from 'lucide-react';
2
+ import { useRef, type MouseEvent as ReactMouseEvent, type RefObject } from 'react';
3
+ import { Button, Icon } from '../ui';
4
+
5
+ const css = {
6
+ wrapper: {
7
+ position: 'absolute' as const,
8
+ left: '50%',
9
+ top: '44%',
10
+ transform: 'translate(-50%, -50%)',
11
+ pointerEvents: 'auto',
12
+ },
13
+ button: {
14
+ backgroundColor: 'rgba(255,255,255,0.75)',
15
+ backdropFilter: 'blur(2px)',
16
+ },
17
+ } as const;
18
+
19
+ export function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivElement | null> }) {
21
20
  const dragging = useRef(false);
22
21
  const last = useRef({ x: 0, y: 0 });
23
22
 
24
- function onMouseDown(e: ReactMouseEvent<HTMLButtonElement>) {
23
+ function onMouseDown(e: ReactMouseEvent<HTMLButtonElement>) {
25
24
  dragging.current = true;
26
25
  last.current = { x: e.clientX, y: e.clientY };
27
26
  document.addEventListener('mousemove', onMove);
@@ -49,13 +48,13 @@ export function MoveLinesButton({ targetRef }: { targetRef: RefObject<HTMLDivEle
49
48
  }
50
49
 
51
50
  return (
52
- <div style={css.wrapper}>
51
+ <div style={css.wrapper}>
53
52
  <Button
54
53
  size="icon-sm"
55
54
  data-black
56
55
  variant="ghost"
57
56
  onMouseDown={onMouseDown}
58
- style={css.button}>
57
+ style={css.button}>
59
58
  <Icon Icon={Move} size="lg" strokeWidth="thin" />
60
59
  </Button>
61
60
  </div>
package/src/lines-overlay.tsx CHANGED
@@ -15,31 +15,30 @@ type Props = {
15
15
 
16
16
  const css = {
17
17
  overlay: {
18
- position: 'fixed' as const,
18
+ position: "absolute" as const,
19
19
  top: 100,
20
20
  left: 0,
21
- width: '100%',
22
- pointerEvents: 'none' as const,
23
- display: 'flex',
24
- justifyContent: 'center',
25
- zIndex: 9998,
21
+ width: "100%",
22
+ pointerEvents: "none" as const,
23
+ display: "flex",
24
+ justifyContent: "center",
25
+ zIndex: 10,
26
26
  },
27
27
  grid: {
28
- width: '100%',
28
+ width: "100%",
29
29
  },
30
30
  triggerButton: {
31
- position: 'fixed' as const,
31
+ position: "absolute" as const,
32
32
  bottom: 8,
33
33
  right: 8,
34
- zIndex: 9999,
35
- fontSize: '0.75rem',
36
- backgroundColor: 'rgba(255,255,255,0.66)',
34
+ zIndex: 20,
35
+ fontSize: "1rem",
36
+ backgroundColor: "rgba(255,255,255,0.70)",
37
37
  },
38
38
  } as const;
39
39
 
40
40
  function RowGridCore({ show, setShow }: Props) {
41
41
  const containerRef = useRef<HTMLDivElement>(null);
42
-
43
42
  const [lines, setLines] = useState(12);
44
43
  const [gap, setGap] = useState(24);
45
44
  const [opacity, setOpacity] = useState(0.3);
@@ -62,11 +61,8 @@ function RowGridCore({ show, setShow }: Props) {
62
61
  const height = lines * gap;
63
62
 
64
63
  return (
65
- <div>
66
- <div
67
- ref={containerRef}
68
- style={{ ...css.overlay, height }}
69
- >
64
+ <>
65
+ <div ref={containerRef} style={{ ...css.overlay, height }}>
70
66
  {/* linhas */}
71
67
  <div
72
68
  style={{
@@ -103,7 +99,7 @@ function RowGridCore({ show, setShow }: Props) {
103
99
  setColor={setColor}
104
100
  />
105
101
  )}
106
- </div>
102
+ </>
107
103
  );
108
104
  }
109
105
 
@@ -111,18 +107,30 @@ export function RowGrid() {
111
107
  const [show, setShow] = useState(false);
112
108
 
113
109
  return (
114
- <>
110
+ <div
111
+ style={{
112
+ position: "fixed",
113
+ zIndex: 9000,
114
+ bottom: 0,
115
+ left: 0,
116
+ width: "100%",
117
+ height: "100dvh",
118
+ }}
119
+ >
120
+ <RowGridCore setShow={setShow} show={show} />
121
+
115
122
  <Button
116
123
  size="sm"
117
124
  variant="ghost"
118
- style={{ ...css.triggerButton, visibility: show ? 'hidden' : 'visible' }}
125
+ style={{
126
+ ...css.triggerButton,
127
+ visibility: show ? "hidden" : "visible",
128
+ }}
119
129
  onClick={() => setShow((v) => !v)}
120
130
  >
121
131
  Mostrar linhas
122
132
  <Icon Icon={Eye} />
123
133
  </Button>
124
-
125
- <RowGridCore setShow={setShow} show={show} />
126
- </>
134
+ </div>
127
135
  );
128
136
  }
package/src/ui/button.tsx CHANGED
@@ -9,8 +9,8 @@ const styles = {
9
9
  display: 'inline-flex',
10
10
  alignItems: 'center',
11
11
  justifyContent: 'center',
12
- gap: 8,
13
- borderRadius: 6,
12
+ gap: 8,
13
+ borderRadius: 4,
14
14
  position: 'relative',
15
15
  outline: 'none',
16
16
  userSelect: 'none',
@@ -57,7 +57,6 @@ const styles = {
57
57
  } satisfies React.CSSProperties,
58
58
 
59
59
  closeButton: {
60
- borderRadius: 9999,
61
60
  color: '#0f172a',
62
61
  } satisfies React.CSSProperties,
63
62
  };