lines-overlay 0.1.24 → 0.1.26

package/README.md

@@ -26,19 +26,19 @@ Este pacote assume que o seu projeto já usa:
 ## Uso básico
 
 ```tsx
-import { RowGrid } from 'lines-overlay';
+import { LinesOverlay } from 'lines-overlay';
 
 export function App() {
   return (
     <div>
       {/* Sua interface normal aqui */}
-      <RowGrid />
+      <LinesOverlay />
     </div>
   );
 }
 ```
 
-Ao incluir o componente `RowGrid` em qualquer lugar do seu aplicativo React, um botão “Mostrar linhas” aparece fixo no canto inferior direito.
+Ao incluir o componente `LinesOverlay` em qualquer lugar do seu aplicativo React, um botão “Mostrar linhas” aparece fixo no canto inferior direito.
 
 - **Atalho de teclado**  
 - `Ctrl + ;` também alterna entre mostrar/ocultar as linhas.

package/dist/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/lines-overlay.tsx
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var import_react2 = require("react");
 
 // src/components/move-lines-button.tsx
@@ -417,6 +417,9 @@ function ConfigButton({
   ] });
 }
 
+// src/components/config-options.tsx
+var import_lucide_react3 = require("lucide-react");
+
 // src/components/data.ts
 var NUMBER_FIELDS = [
   {
@@ -581,7 +584,26 @@ function ConfigOptions(props) {
         },
         c.value
       )) })
-    ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        style: { maxWidth: "max-content" },
+        onClick: () => {
+          if (props.rotate === 0) {
+            props.setRotate(90);
+          } else {
+            props.setRotate(0);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { Icon: import_lucide_react3.RotateCw }),
+          " Rotacionar"
+        ]
+      }
+    )
   ] });
 }
 
@@ -616,6 +638,7 @@ function Core({ show, setShow }) {
   const [opacity, setOpacity] = (0, import_react2.useState)(0.3);
   const [color, setColor] = (0, import_react2.useState)("#d71212");
   const [showConfig, setShowConfig] = (0, import_react2.useState)(false);
+  const [rotate, setRotate] = (0, import_react2.useState)(0);
   (0, import_react2.useEffect)(() => {
     const handler = (e) => {
       if (e.ctrlKey && e.key === ";") {
@@ -642,7 +665,8 @@ function Core({ show, setShow }) {
                 transparent 1px,
                 transparent ${gap}px
               )`,
-            opacity
+            opacity,
+            transform: `rotate(${rotate}deg)`
           }
         }
       ),
@@ -666,6 +690,8 @@ function Core({ show, setShow }) {
     showConfig && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ConfigOptions,
       {
+        rotate,
+        setRotate,
         lines,
         gap,
         opacity,
@@ -705,7 +731,7 @@ function LinesOverlay() {
             },
             onClick: () => setShow((v) => !v),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { Icon: import_lucide_react3.Eye, size: "xl" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { Icon: import_lucide_react4.Eye, size: "xl" }),
               "Mostrar linhas - ",
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: "#787878ff" }, children: "Ctrl + ;" })
             ]

package/dist/index.js.map

@@ -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 { LinesOverlay } 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: 175,\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    backgroundColor: \"rgba(255,255,255,0.70)\",\r\n  },\r\n} as const;\r\n\r\nfunction Core({ 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} 1.25px,\r\n                transparent 1px,\r\n                transparent ${gap}px\r\n              )`,\r\n            opacity,\r\n          }}\r\n        />\r\n        {/* Move */}\r\n        <MoveLinesButton\r\n          targetRef={containerRef}\r\n          color={color}\r\n          opacity={opacity}\r\n        />\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 LinesOverlay() {\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        fontFamily: \"Inter, sans-serif\",\r\n      }}\r\n    >\r\n      <Core 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        <Icon Icon={Eye} size=\"xl\" />\r\n        Mostrar linhas - <span style={{ color: \"#787878ff\" }}>Ctrl + ;</span>\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    width: \"100%\",\r\n    height: \"100%\",\r\n    position: \"absolute\" as const,\r\n    left: 0,\r\n    top: 0,\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    justifyContent: \"center\",\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    borderRadius: 9999,\r\n  },\r\n} as const;\r\n\r\nexport function MoveLinesButton({\r\n  targetRef,\r\n  color,\r\n  opacity,\r\n}: {\r\n  targetRef: RefObject<HTMLDivElement | null>;\r\n  color: string;\r\n  opacity: number;\r\n}) {\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      >\r\n        <Icon Icon={Move} size=\"3xl\" strokeWidth=\"2\" />\r\n      </Button>\r\n      <div\r\n        style={{\r\n          width: \"100%\",\r\n          height: 1.25,\r\n          position: \"absolute\",\r\n          left: 0,\r\n          bottom: 0,\r\n          backgroundColor: color,\r\n          opacity,\r\n        }}\r\n      />\r\n    </div>\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 type { MouseEvent } from 'react';\nimport type { 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.5)\",\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    borderRadius: 4,\n  },\n  label: {\n    fontWeight: 600,\n    letterSpacing: \"0.03em\",\n    paddingRight: 8,\n    fontSize: 14,\n    userSelect: \"none\",\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\n        style={css.label}\n        onClick={(e) => {\n          e.stopPropagation();\n          onToggleConfig();\n        }}\n      >\n        Configurar\n      </span>\n\n      <div style={css.buttonsRow}>\n        {[1, 2, 3].map((item) =>\n          item !== 2 ? (\n            <Button\n              style={{\n                outlineWidth: 1,\n              }}\n              variant={\"transparent\"}\n              size=\"icon-sm\"\n              data-black\n              key={item}\n              onClick={(e) => {\n                handleClick(e, item);\n              }}\n            >\n              {item === 1 ? (\n                <Icon\n                  Icon={open ? ChevronDown : ChevronUp}\n                  size={\"xl\"}\n                  strokeWidth=\"light\"\n                />\n              ) : (\n                <Icon Icon={X} size=\"sm\" strokeWidth=\"light\" />\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 { type 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    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.3)\",\r\n    borderRadius: 8,\r\n    paddingInline: 12,\r\n    paddingBlock: 10,\r\n    width: \"auto\",\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    gap: 4,\r\n  },\r\n  fieldRow: {\r\n    width: \"100%\",\r\n    marginBottom: 12,\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    gap: 8,\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    fontWeight: 500,\r\n    marginBottom: 4,\r\n    fontSize: 14,\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    boxSizing: \"border-box\",\r\n  },\r\n  quickRow: {\r\n    display: \"flex\",\r\n    gap: 6,\r\n    marginTop: 4,\r\n  },\r\n  quickButton: {\r\n    fontWeight: 500,\r\n    borderRadius: 999,\r\n  },\r\n  colorSection: {\r\n    marginTop: 0,\r\n  },\r\n  colorLabel: {\r\n    display: \"block\",\r\n    fontWeight: 500,\r\n    marginBottom: 4,\r\n    fontSize: 14,\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: 999,\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                    >\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              style={{ borderRadius: 999 }}\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            >\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"]}
+{"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/config-options.tsx","../src/components/data.ts"],"sourcesContent":["export { LinesOverlay } 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: 175,\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    backgroundColor: \"rgba(255,255,255,0.70)\",\r\n  },\r\n} as const;\r\n\r\nfunction Core({ 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  const [rotate, setRotate] = useState(0);\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} 1.25px,\r\n                transparent 1px,\r\n                transparent ${gap}px\r\n              )`,\r\n            opacity,\r\n            transform: `rotate(${rotate}deg)`,\r\n          }}\r\n        />\r\n        {/* Move */}\r\n        <MoveLinesButton\r\n          targetRef={containerRef}\r\n          color={color}\r\n          opacity={opacity}\r\n        />\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          rotate={rotate}\r\n          setRotate={setRotate}\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 LinesOverlay() {\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        fontFamily: \"Inter, sans-serif\",\r\n      }}\r\n    >\r\n      <Core 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        <Icon Icon={Eye} size=\"xl\" />\r\n        Mostrar linhas - <span style={{ color: \"#787878ff\" }}>Ctrl + ;</span>\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    width: \"100%\",\r\n    height: \"100%\",\r\n    position: \"absolute\" as const,\r\n    left: 0,\r\n    top: 0,\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    justifyContent: \"center\",\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    borderRadius: 9999,\r\n  },\r\n} as const;\r\n\r\nexport function MoveLinesButton({\r\n  targetRef,\r\n  color,\r\n  opacity,\r\n}: {\r\n  targetRef: RefObject<HTMLDivElement | null>;\r\n  color: string;\r\n  opacity: number;\r\n}) {\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      >\r\n        <Icon Icon={Move} size=\"3xl\" strokeWidth=\"2\" />\r\n      </Button>\r\n      <div\r\n        style={{\r\n          width: \"100%\",\r\n          height: 1.25,\r\n          position: \"absolute\",\r\n          left: 0,\r\n          bottom: 0,\r\n          backgroundColor: color,\r\n          opacity,\r\n        }}\r\n      />\r\n    </div>\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 type { MouseEvent } from 'react';\nimport type { 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.5)\",\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    borderRadius: 4,\n  },\n  label: {\n    fontWeight: 600,\n    letterSpacing: \"0.03em\",\n    paddingRight: 8,\n    fontSize: 14,\n    userSelect: \"none\",\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\n        style={css.label}\n        onClick={(e) => {\n          e.stopPropagation();\n          onToggleConfig();\n        }}\n      >\n        Configurar\n      </span>\n\n      <div style={css.buttonsRow}>\n        {[1, 2, 3].map((item) =>\n          item !== 2 ? (\n            <Button\n              style={{\n                outlineWidth: 1,\n              }}\n              variant={\"transparent\"}\n              size=\"icon-sm\"\n              data-black\n              key={item}\n              onClick={(e) => {\n                handleClick(e, item);\n              }}\n            >\n              {item === 1 ? (\n                <Icon\n                  Icon={open ? ChevronDown : ChevronUp}\n                  size={\"xl\"}\n                  strokeWidth=\"light\"\n                />\n              ) : (\n                <Icon Icon={X} size=\"sm\" strokeWidth=\"light\" />\n              )}\n            </Button>\n          ) : (\n            <Separator orientation=\"vertical\" />\n          )\n        )}\n      </div>\n    </div>\n  );\n}\n","import { RotateCw } from \"lucide-react\";\r\nimport { Button, Icon } from \"../ui\";\r\nimport { type 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    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.3)\",\r\n    borderRadius: 8,\r\n    paddingInline: 12,\r\n    paddingBlock: 10,\r\n    width: \"auto\",\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    gap: 4,\r\n  },\r\n  fieldRow: {\r\n    width: \"100%\",\r\n    marginBottom: 12,\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    gap: 8,\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    fontWeight: 500,\r\n    marginBottom: 4,\r\n    fontSize: 14,\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    boxSizing: \"border-box\",\r\n  },\r\n  quickRow: {\r\n    display: \"flex\",\r\n    gap: 6,\r\n    marginTop: 4,\r\n  },\r\n  quickButton: {\r\n    fontWeight: 500,\r\n    borderRadius: 999,\r\n  },\r\n  colorSection: {\r\n    marginTop: 0,\r\n  },\r\n  colorLabel: {\r\n    display: \"block\",\r\n    fontWeight: 500,\r\n    marginBottom: 4,\r\n    fontSize: 14,\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: 999,\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                    >\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              style={{ borderRadius: 999 }}\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            >\r\n              <span style={{ ...css.colorDot, backgroundColor: c.value }} />\r\n            </Button>\r\n          ))}\r\n        </div>\r\n      </div>\r\n\r\n      <Button\r\n        variant=\"ghost\"\r\n        size=\"sm\"\r\n        style={{ maxWidth: \"max-content\" }}\r\n        onClick={() => {\r\n          if (props.rotate === 0) {\r\n            props.setRotate(90);\r\n          } else {\r\n            props.setRotate(0);\r\n          }\r\n        }}\r\n      >\r\n        <Icon Icon={RotateCw} /> Rotacionar\r\n      </Button>\r\n    </div>\r\n  );\r\n}\r\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  rotate: number;\r\n  setRotate: (v: number) => 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"],"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_lucide_react","import_jsx_runtime","css","import_jsx_runtime","css"]}

package/dist/index.mjs

@@ -381,6 +381,9 @@ function ConfigButton({
   ] });
 }
 
+// src/components/config-options.tsx
+import { RotateCw } from "lucide-react";
+
 // src/components/data.ts
 var NUMBER_FIELDS = [
   {
@@ -545,7 +548,26 @@ function ConfigOptions(props) {
         },
         c.value
       )) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        style: { maxWidth: "max-content" },
+        onClick: () => {
+          if (props.rotate === 0) {
+            props.setRotate(90);
+          } else {
+            props.setRotate(0);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx6(Icon, { Icon: RotateCw }),
+          " Rotacionar"
+        ]
+      }
+    )
   ] });
 }
 
@@ -580,6 +602,7 @@ function Core({ show, setShow }) {
   const [opacity, setOpacity] = useState(0.3);
   const [color, setColor] = useState("#d71212");
   const [showConfig, setShowConfig] = useState(false);
+  const [rotate, setRotate] = useState(0);
   useEffect(() => {
     const handler = (e) => {
       if (e.ctrlKey && e.key === ";") {
@@ -606,7 +629,8 @@ function Core({ show, setShow }) {
                 transparent 1px,
                 transparent ${gap}px
               )`,
-            opacity
+            opacity,
+            transform: `rotate(${rotate}deg)`
           }
         }
       ),
@@ -630,6 +654,8 @@ function Core({ show, setShow }) {
     showConfig && /* @__PURE__ */ jsx7(
       ConfigOptions,
       {
+        rotate,
+        setRotate,
         lines,
         gap,
         opacity,

package/dist/index.mjs.map

@@ -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: \"absolute\" as const,\r\n    top: 175,\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    backgroundColor: \"rgba(255,255,255,0.70)\",\r\n  },\r\n} as const;\r\n\r\nfunction Core({ 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} 1.25px,\r\n                transparent 1px,\r\n                transparent ${gap}px\r\n              )`,\r\n            opacity,\r\n          }}\r\n        />\r\n        {/* Move */}\r\n        <MoveLinesButton\r\n          targetRef={containerRef}\r\n          color={color}\r\n          opacity={opacity}\r\n        />\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 LinesOverlay() {\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        fontFamily: \"Inter, sans-serif\",\r\n      }}\r\n    >\r\n      <Core 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        <Icon Icon={Eye} size=\"xl\" />\r\n        Mostrar linhas - <span style={{ color: \"#787878ff\" }}>Ctrl + ;</span>\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    width: \"100%\",\r\n    height: \"100%\",\r\n    position: \"absolute\" as const,\r\n    left: 0,\r\n    top: 0,\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    justifyContent: \"center\",\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    borderRadius: 9999,\r\n  },\r\n} as const;\r\n\r\nexport function MoveLinesButton({\r\n  targetRef,\r\n  color,\r\n  opacity,\r\n}: {\r\n  targetRef: RefObject<HTMLDivElement | null>;\r\n  color: string;\r\n  opacity: number;\r\n}) {\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      >\r\n        <Icon Icon={Move} size=\"3xl\" strokeWidth=\"2\" />\r\n      </Button>\r\n      <div\r\n        style={{\r\n          width: \"100%\",\r\n          height: 1.25,\r\n          position: \"absolute\",\r\n          left: 0,\r\n          bottom: 0,\r\n          backgroundColor: color,\r\n          opacity,\r\n        }}\r\n      />\r\n    </div>\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 type { MouseEvent } from 'react';\nimport type { 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.5)\",\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    borderRadius: 4,\n  },\n  label: {\n    fontWeight: 600,\n    letterSpacing: \"0.03em\",\n    paddingRight: 8,\n    fontSize: 14,\n    userSelect: \"none\",\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\n        style={css.label}\n        onClick={(e) => {\n          e.stopPropagation();\n          onToggleConfig();\n        }}\n      >\n        Configurar\n      </span>\n\n      <div style={css.buttonsRow}>\n        {[1, 2, 3].map((item) =>\n          item !== 2 ? (\n            <Button\n              style={{\n                outlineWidth: 1,\n              }}\n              variant={\"transparent\"}\n              size=\"icon-sm\"\n              data-black\n              key={item}\n              onClick={(e) => {\n                handleClick(e, item);\n              }}\n            >\n              {item === 1 ? (\n                <Icon\n                  Icon={open ? ChevronDown : ChevronUp}\n                  size={\"xl\"}\n                  strokeWidth=\"light\"\n                />\n              ) : (\n                <Icon Icon={X} size=\"sm\" strokeWidth=\"light\" />\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 { type 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    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.3)\",\r\n    borderRadius: 8,\r\n    paddingInline: 12,\r\n    paddingBlock: 10,\r\n    width: \"auto\",\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    gap: 4,\r\n  },\r\n  fieldRow: {\r\n    width: \"100%\",\r\n    marginBottom: 12,\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    gap: 8,\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    fontWeight: 500,\r\n    marginBottom: 4,\r\n    fontSize: 14,\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    boxSizing: \"border-box\",\r\n  },\r\n  quickRow: {\r\n    display: \"flex\",\r\n    gap: 6,\r\n    marginTop: 4,\r\n  },\r\n  quickButton: {\r\n    fontWeight: 500,\r\n    borderRadius: 999,\r\n  },\r\n  colorSection: {\r\n    marginTop: 0,\r\n  },\r\n  colorLabel: {\r\n    display: \"block\",\r\n    fontWeight: 500,\r\n    marginBottom: 4,\r\n    fontSize: 14,\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: 999,\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                    >\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              style={{ borderRadius: 999 }}\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            >\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","jsxs","css","jsx","jsxs","css","jsx","jsxs","css","useRef"]}
+{"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/config-options.tsx","../src/components/data.ts"],"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: 175,\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    backgroundColor: \"rgba(255,255,255,0.70)\",\r\n  },\r\n} as const;\r\n\r\nfunction Core({ 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  const [rotate, setRotate] = useState(0);\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} 1.25px,\r\n                transparent 1px,\r\n                transparent ${gap}px\r\n              )`,\r\n            opacity,\r\n            transform: `rotate(${rotate}deg)`,\r\n          }}\r\n        />\r\n        {/* Move */}\r\n        <MoveLinesButton\r\n          targetRef={containerRef}\r\n          color={color}\r\n          opacity={opacity}\r\n        />\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          rotate={rotate}\r\n          setRotate={setRotate}\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 LinesOverlay() {\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        fontFamily: \"Inter, sans-serif\",\r\n      }}\r\n    >\r\n      <Core 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        <Icon Icon={Eye} size=\"xl\" />\r\n        Mostrar linhas - <span style={{ color: \"#787878ff\" }}>Ctrl + ;</span>\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    width: \"100%\",\r\n    height: \"100%\",\r\n    position: \"absolute\" as const,\r\n    left: 0,\r\n    top: 0,\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n    justifyContent: \"center\",\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    borderRadius: 9999,\r\n  },\r\n} as const;\r\n\r\nexport function MoveLinesButton({\r\n  targetRef,\r\n  color,\r\n  opacity,\r\n}: {\r\n  targetRef: RefObject<HTMLDivElement | null>;\r\n  color: string;\r\n  opacity: number;\r\n}) {\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      >\r\n        <Icon Icon={Move} size=\"3xl\" strokeWidth=\"2\" />\r\n      </Button>\r\n      <div\r\n        style={{\r\n          width: \"100%\",\r\n          height: 1.25,\r\n          position: \"absolute\",\r\n          left: 0,\r\n          bottom: 0,\r\n          backgroundColor: color,\r\n          opacity,\r\n        }}\r\n      />\r\n    </div>\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 type { MouseEvent } from 'react';\nimport type { 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.5)\",\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    borderRadius: 4,\n  },\n  label: {\n    fontWeight: 600,\n    letterSpacing: \"0.03em\",\n    paddingRight: 8,\n    fontSize: 14,\n    userSelect: \"none\",\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\n        style={css.label}\n        onClick={(e) => {\n          e.stopPropagation();\n          onToggleConfig();\n        }}\n      >\n        Configurar\n      </span>\n\n      <div style={css.buttonsRow}>\n        {[1, 2, 3].map((item) =>\n          item !== 2 ? (\n            <Button\n              style={{\n                outlineWidth: 1,\n              }}\n              variant={\"transparent\"}\n              size=\"icon-sm\"\n              data-black\n              key={item}\n              onClick={(e) => {\n                handleClick(e, item);\n              }}\n            >\n              {item === 1 ? (\n                <Icon\n                  Icon={open ? ChevronDown : ChevronUp}\n                  size={\"xl\"}\n                  strokeWidth=\"light\"\n                />\n              ) : (\n                <Icon Icon={X} size=\"sm\" strokeWidth=\"light\" />\n              )}\n            </Button>\n          ) : (\n            <Separator orientation=\"vertical\" />\n          )\n        )}\n      </div>\n    </div>\n  );\n}\n","import { RotateCw } from \"lucide-react\";\r\nimport { Button, Icon } from \"../ui\";\r\nimport { type 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    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.3)\",\r\n    borderRadius: 8,\r\n    paddingInline: 12,\r\n    paddingBlock: 10,\r\n    width: \"auto\",\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    gap: 4,\r\n  },\r\n  fieldRow: {\r\n    width: \"100%\",\r\n    marginBottom: 12,\r\n    display: \"flex\",\r\n    flexDirection: \"column\",\r\n    gap: 8,\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    fontWeight: 500,\r\n    marginBottom: 4,\r\n    fontSize: 14,\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    boxSizing: \"border-box\",\r\n  },\r\n  quickRow: {\r\n    display: \"flex\",\r\n    gap: 6,\r\n    marginTop: 4,\r\n  },\r\n  quickButton: {\r\n    fontWeight: 500,\r\n    borderRadius: 999,\r\n  },\r\n  colorSection: {\r\n    marginTop: 0,\r\n  },\r\n  colorLabel: {\r\n    display: \"block\",\r\n    fontWeight: 500,\r\n    marginBottom: 4,\r\n    fontSize: 14,\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: 999,\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                    >\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              style={{ borderRadius: 999 }}\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            >\r\n              <span style={{ ...css.colorDot, backgroundColor: c.value }} />\r\n            </Button>\r\n          ))}\r\n        </div>\r\n      </div>\r\n\r\n      <Button\r\n        variant=\"ghost\"\r\n        size=\"sm\"\r\n        style={{ maxWidth: \"max-content\" }}\r\n        onClick={() => {\r\n          if (props.rotate === 0) {\r\n            props.setRotate(90);\r\n          } else {\r\n            props.setRotate(0);\r\n          }\r\n        }}\r\n      >\r\n        <Icon Icon={RotateCw} /> Rotacionar\r\n      </Button>\r\n    </div>\r\n  );\r\n}\r\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  rotate: number;\r\n  setRotate: (v: number) => 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"],"mappings":"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","names":["useRef","jsx","Icon","React","jsx","css","jsx","css","jsx","jsxs","css","jsx","jsxs","css","jsx","jsxs","css","useRef"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lines-overlay",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "repository": {
     "type": "git",
     "url": "https://github.com/LeonardoSouzaBento/lines-overlay-npm-package.git"

package/src/components/config-options.tsx

@@ -1,4 +1,5 @@
-import { Button } from '../ui';
+import { RotateCw } from "lucide-react";
+import { Button, Icon } from "../ui";
 import { type ConfigOptionsProps, NUMBER_FIELDS, colorOptions } from "./data";
 
 const css = {
@@ -144,6 +145,21 @@ export function ConfigOptions(props: ConfigOptionsProps) {
           ))}
         </div>
       </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        style={{ maxWidth: "max-content" }}
+        onClick={() => {
+          if (props.rotate === 0) {
+            props.setRotate(90);
+          } else {
+            props.setRotate(0);
+          }
+        }}
+      >
+        <Icon Icon={RotateCw} /> Rotacionar
+      </Button>
     </div>
   );
 }

package/src/components/data.ts

@@ -12,6 +12,8 @@ export type ConfigOptionsProps = {
   setGap: (v: number) => void;
   setOpacity: (v: number) => void;
   setColor: (v: string) => void;
+  rotate: number;
+  setRotate: (v: number) => void;
 };
 
 export type NumberFieldConfig = {

package/src/lines-overlay.tsx

@@ -43,6 +43,7 @@ function Core({ show, setShow }: Props) {
   const [opacity, setOpacity] = useState(0.3);
   const [color, setColor] = useState("#d71212");
   const [showConfig, setShowConfig] = useState(false);
+  const [rotate, setRotate] = useState(0);
 
   // Toggle por tecla
   useEffect(() => {
@@ -75,6 +76,7 @@ function Core({ show, setShow }: Props) {
                 transparent ${gap}px
               )`,
             opacity,
+            transform: `rotate(${rotate}deg)`,
           }}
         />
         {/* Move */}
@@ -92,6 +94,8 @@ function Core({ show, setShow }: Props) {
       />
       {showConfig && (
         <ConfigOptions
+          rotate={rotate}
+          setRotate={setRotate}
           lines={lines}
           gap={gap}
           opacity={opacity}