{"version":3,"sources":["../src/components/Alpha.tsx","../src/contexts/ColorPickerContext.ts","../src/components/Interactive.tsx","../src/components/Pointer.tsx","../src/components/ColorPicker.tsx","../src/components/EyeDropper.tsx","../src/components/Gradient.tsx","../src/utils/compare.ts","../src/utils/getGradientBackground.tsx","../src/utils/interpolateRgba.ts","../src/components/HexColorInput.tsx","../src/utils/validate.ts","../src/components/Hue.tsx","../src/components/Saturation.tsx","../src/components/SketchColorPicker.tsx","../src/utils/sketchColor.ts"],"sourcesContent":["\"use client\";\n\nimport { hsvaToHslaString, hsvaToHslString } from \"@noya-app/noya-color\";\nimport { clamp, round } from \"@noya-app/noya-utils\";\nimport React, { memo, type JSX } from \"react\";\nimport { useColorPicker } from \"../contexts/ColorPickerContext\";\nimport { Interaction, Interactive } from \"./Interactive\";\nimport Pointer from \"./Pointer\";\n\ninterface ContainerProps {\n  colorFrom: string;\n  colorTo: string;\n  children: React.ReactNode;\n}\n\nconst Container: React.FC<ContainerProps> = ({\n  colorFrom,\n  colorTo,\n  children,\n}) => {\n  const containerStyle: React.CSSProperties = {\n    position: \"relative\",\n    height: \"8px\",\n    borderRadius: \"8px\",\n    boxShadow: \"0 0 0 1px rgba(0,0,0,0.2) inset\",\n    backgroundColor: \"#fff\",\n    backgroundImage: [\n      `url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" fill-opacity=\".05\"><rect x=\"4\" width=\"4\" height=\"4\"/><rect y=\"4\" width=\"4\" height=\"4\"/></svg>')`,\n      `linear-gradient(90deg, ${colorFrom}, ${colorTo})`,\n    ].join(\", \"),\n    zIndex: 2,\n  };\n\n  return <div style={containerStyle}>{children}</div>;\n};\n\nexport default memo(function Alpha(): JSX.Element {\n  const [hsva, onChange] = useColorPicker();\n  const hslColor = hsvaToHslString(hsva);\n  const color = `color-mix(in srgb, ${hslColor} ${hsva.a * 100}%, white)`;\n\n  const handleMove = (interaction: Interaction) => {\n    onChange({ a: interaction.left });\n  };\n\n  const handleKey = (offset?: Interaction) => {\n    // Alpha always fit into [0, 1] range\n    if (!offset) return;\n    onChange({ a: clamp(hsva.a + offset.left) });\n  };\n\n  // We use `Object.assign` instead of the spread operator\n  // to prevent adding the polyfill (about 150 bytes gzipped)\n  const colorFrom = hsvaToHslaString(Object.assign({}, hsva, { a: 0 }));\n  const colorTo = hsvaToHslaString(Object.assign({}, hsva, { a: 1 }));\n\n  return (\n    <Container colorFrom={colorFrom} colorTo={colorTo}>\n      <Interactive\n        onMove={handleMove}\n        onKey={handleKey}\n        aria-label=\"Alpha\"\n        aria-valuetext={`${round(hsva.a * 100)}%`}\n      >\n        <Pointer left={hsva.a} color={color} />\n      </Interactive>\n    </Container>\n  );\n});\n","\"use client\";\n\nimport { HsvaColor } from \"@noya-app/noya-color\";\nimport { createContext, useContext } from \"react\";\n\nexport type ColorPickerContextValue = [\n  hsva: HsvaColor,\n  onChange: (color: Partial<HsvaColor>) => void,\n];\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined\n);\n\nexport const ColorPickerProvider = ColorPickerContext.Provider;\n\nexport function useColorPicker(): ColorPickerContextValue {\n  const value = useContext(ColorPickerContext);\n\n  if (!value) {\n    throw new Error(\"Missing ColorPickerProvider\");\n  }\n\n  return value;\n}\n","\"use client\";\n\nimport { clamp } from \"@noya-app/noya-utils\";\nimport {\n  useIsomorphicLayoutEffect,\n  useStableCallback,\n} from \"@noya-app/react-utils\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\n\nconst Container = forwardRef(\n  (\n    props: React.HTMLAttributes<HTMLDivElement>,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => (\n    <div\n      ref={ref}\n      {...props}\n      style={{\n        position: \"absolute\",\n        left: 0,\n        top: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: \"inherit\",\n        outline: \"none\",\n        touchAction: \"none\",\n        ...props.style,\n      }}\n    />\n  )\n);\n\nexport interface Interaction {\n  left: number;\n  top: number;\n}\n\n// Check if an event was triggered by touch\nconst isTouch = (e: PointerEvent | TouchEvent): e is TouchEvent =>\n  \"touches\" in e;\n\n// Returns a relative position of the pointer inside the node's bounding box\nconst getRelativePosition = (\n  node: HTMLDivElement,\n  event: PointerEvent | TouchEvent\n): Interaction => {\n  const rect = node.getBoundingClientRect();\n\n  const pointer = isTouch(event) ? event.touches[0] : event;\n\n  return {\n    left: clamp(\n      (pointer.pageX - (rect.left + window.pageXOffset)) / rect.width\n    ),\n    top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),\n  };\n};\n\ninterface Props {\n  onMove: (interaction: Interaction) => void;\n  onKey: (offset: Interaction) => void;\n  onClick?: (interaction: Interaction) => void;\n  onDelete?: () => void;\n  onClickPointer?: (index: number) => void;\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n  className?: string;\n}\n\nconst InteractiveBase = ({\n  onMove,\n  onKey,\n  onClick,\n  onDelete,\n  onClickPointer,\n  ...rest\n}: Props) => {\n  const container = useRef<HTMLDivElement>(null);\n  const hasTouched = useRef(false);\n  const isDragging = useRef(false);\n  const onMoveCallback = useStableCallback(onMove);\n  const onKeyCallback = useStableCallback(onKey);\n  const onClickCallback = useStableCallback(onClick);\n  const onClickPointerCallback = useStableCallback(onClickPointer);\n\n  // Prevent mobile browsers from handling mouse events (conflicting with touch ones).\n  // If we detected a touch interaction before, we prefer reacting to touch events only.\n  const isValid = (event: PointerEvent | TouchEvent): boolean => {\n    if (hasTouched.current && !isTouch(event)) return false;\n    if (!hasTouched.current) hasTouched.current = isTouch(event);\n    return true;\n  };\n\n  const handleMove = useCallback(\n    (event: PointerEvent | TouchEvent) => {\n      if (!isDragging.current || !container.current) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n      event.stopImmediatePropagation();\n\n      onMoveCallback(getRelativePosition(container.current, event));\n\n      // // If user moves the pointer outside of the window or iframe bounds and release it there,\n      // // `mouseup`/`touchend` won't be fired. In order to stop the picker from following the cursor\n      // // after the user has moved the mouse/finger back to the document, we check `event.buttons`\n      // // and `event.touches`. It allows us to detect that the user is just moving his pointer\n      // // without pressing it down\n      // const isDown = isTouch(event)\n      //   ? event.touches.length > 0\n      //   : event.buttons > 0;\n\n      // if (isDown && container.current) {\n      //   onMoveCallback(getRelativePosition(container.current, event));\n      // } else {\n      //   isDragging.current = false;\n      // }\n    },\n    [onMoveCallback]\n  );\n\n  const handleMoveStart = useCallback(\n    ({ nativeEvent: event }: React.TouchEvent | React.PointerEvent) => {\n      event.preventDefault();\n\n      if (!isValid(event)) return;\n\n      // focus the container\n      container.current?.focus();\n\n      if (onClick) {\n        if (\n          event.target instanceof HTMLElement &&\n          !event.target.classList.contains(\"pointer\")\n        ) {\n          onClickCallback(getRelativePosition(container.current!, event));\n          return;\n        }\n        if (onClickPointer && event.target instanceof HTMLElement) {\n          onClickPointerCallback(Number(event.target.dataset.index));\n        }\n      } else {\n        // The node/ref must actually exist when user start an interaction.\n        // We won't suppress the ESLint warning though, as it should probably be something to be aware of.\n        onMoveCallback(getRelativePosition(container.current!, event));\n      }\n\n      isDragging.current = true;\n    },\n    [\n      onMoveCallback,\n      onClickCallback,\n      onClickPointer,\n      onClickPointerCallback,\n      onClick,\n    ]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      const keyCode = event.which || event.keyCode;\n\n      if (onDelete && (keyCode === 46 || keyCode === 8)) onDelete();\n      // Ignore all keys except arrow ones\n      if (keyCode < 37 || keyCode > 40) return;\n      // Do not scroll page by arrow keys when document is focused on the element\n      event.preventDefault();\n      // Send relative offset to the parent component.\n      // We use codes (37←, 38↑, 39→, 40↓) instead of keys ('ArrowRight', 'ArrowDown', etc)\n      // to reduce the size of the library\n      onKeyCallback({\n        left: keyCode === 39 ? 0.05 : keyCode === 37 ? -0.05 : 0,\n        top: keyCode === 40 ? 0.05 : keyCode === 38 ? -0.05 : 0,\n      });\n    },\n    [onKeyCallback, onDelete]\n  );\n\n  const handleMoveEnd = useCallback((event: PointerEvent | TouchEvent) => {\n    // console.log('is dragging?', isDragging.current);\n\n    if (!isDragging.current) return;\n\n    // console.log('handle end');\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    event.stopPropagation();\n\n    isDragging.current = false;\n  }, []);\n\n  const toggleDocumentEvents = useCallback(\n    (state: boolean) => {\n      // console.log(state ? 'add' : 'remove', 'events');\n\n      // add or remove additional pointer event listeners\n      const toggleEvent = state\n        ? window.addEventListener\n        : window.removeEventListener;\n      toggleEvent(\n        hasTouched.current ? \"touchmove\" : \"pointermove\",\n        handleMove,\n        true\n      );\n      toggleEvent(\n        hasTouched.current ? \"touchend\" : \"pointerup\",\n        handleMoveEnd,\n        true\n      );\n    },\n    [handleMove, handleMoveEnd]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    toggleDocumentEvents(true);\n\n    return () => {\n      toggleDocumentEvents(false);\n    };\n  }, [toggleDocumentEvents]);\n\n  return (\n    <Container\n      {...rest}\n      ref={container}\n      onTouchStart={handleMoveStart}\n      onPointerDown={handleMoveStart}\n      onKeyDown={handleKeyDown}\n      tabIndex={0}\n      role=\"slider\"\n    />\n  );\n};\n\nexport const Interactive = React.memo(InteractiveBase);\n","\"use client\";\n\nimport React, { memo, useMemo, type JSX } from \"react\";\n\nconst Container: React.FC<\n  React.HTMLAttributes<HTMLDivElement> & { selected?: boolean; index?: number }\n> = ({ index, selected, style, ...rest }) => {\n  const baseShadow = \"0 0 1px 1px rgba(0,0,0,0.2)\";\n\n  const containerStyle: React.CSSProperties = {\n    width: \"10px\",\n    height: \"10px\",\n    borderRadius: \"10px\",\n    border: \"2px solid white\",\n    boxShadow: selected\n      ? `${baseShadow}, 0 0 0 2px var(--n-primary)`\n      : baseShadow,\n    zIndex: selected ? 3 : 2,\n    borderColor: \"white\",\n    transform: \"translate(-50%, -50%)\",\n    position: \"absolute\",\n    cursor: \"pointer\",\n    ...style,\n  };\n\n  return <div {...rest} style={containerStyle} data-index={index} />;\n};\n\ninterface Props extends React.HTMLAttributes<HTMLDivElement> {\n  top?: number;\n  left: number;\n  index?: number;\n  selected?: boolean;\n  onClick?: () => void;\n  color?: string;\n}\n\nexport default memo(function Pointer({\n  top = 0.5,\n  left,\n  color,\n  ...rest\n}: Props): JSX.Element {\n  const style = useMemo(\n    () => ({\n      top: `${top * 100}%`,\n      left: `${left * 100}%`,\n      background: color,\n    }),\n    [left, top, color]\n  );\n\n  return <Container {...rest} className=\"pointer\" style={style} />;\n});\n","\"use client\";\n\nimport { HsvaColor } from \"@noya-app/noya-color\";\nimport { useDeepMemo } from \"@noya-app/react-utils\";\nimport React, { ReactNode, useCallback, useMemo, type JSX } from \"react\";\nimport {\n  ColorPickerContextValue,\n  ColorPickerProvider,\n} from \"../contexts/ColorPickerContext\";\nimport { AnyColor, ColorModel, ColorPickerBaseProps } from \"../types\";\n\ninterface Props<T extends AnyColor> extends Partial<ColorPickerBaseProps<T>> {\n  colorModel: ColorModel<T>;\n  children?: ReactNode;\n}\n\nexport default function ColorPicker<T extends AnyColor>({\n  colorModel,\n  color = colorModel.defaultColor,\n  onChange,\n  children,\n  style,\n  className,\n}: Props<T>): JSX.Element {\n  const hsva = useDeepMemo(colorModel.toHsva(color));\n\n  const handleChange = useCallback(\n    (params: Partial<HsvaColor>) => {\n      onChange?.(colorModel.fromHsva({ ...hsva, ...params }));\n    },\n    [colorModel, hsva, onChange]\n  );\n\n  const contextValue = useMemo(\n    (): ColorPickerContextValue => [hsva, handleChange],\n    [handleChange, hsva]\n  );\n\n  return (\n    <ColorPickerProvider value={contextValue}>\n      <div\n        style={{\n          position: \"relative\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          userSelect: \"none\",\n          cursor: \"default\",\n          ...style,\n        }}\n        className={className}\n      >\n        {children}\n      </div>\n    </ColorPickerProvider>\n  );\n}\n","\"use client\";\n\nimport { hexToHsva } from \"@noya-app/noya-color\";\nimport React, { useCallback, useState } from \"react\";\nimport useEyeDropper from \"use-eye-dropper\";\nimport { useColorPicker } from \"../contexts/ColorPickerContext\";\n\ntype DropperError = {\n  message: string;\n  canceled?: boolean;\n};\n\nconst isError = <T,>(err: DropperError | T): err is DropperError =>\n  !!err && err instanceof Error && !!err.message;\n\nconst isNotCanceled = <T,>(err: DropperError | T): err is DropperError =>\n  isError(err) && !err.canceled;\n\nexport function EyeDropper(\n  props: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n) {\n  const [_hsva, onChange] = useColorPicker();\n  const { open } = useEyeDropper();\n  const [_error, setError] = useState<DropperError>();\n  // useEyeDropper will reject/cleanup the open() promise on unmount,\n  // so setState never fires when the component is unmounted.\n  const pickColor = useCallback(() => {\n    // Using async/await (can be used as a promise as-well)\n    const openPicker = async () => {\n      try {\n        const color = await open();\n        onChange(hexToHsva(color.sRGBHex));\n      } catch (e) {\n        console.log(e);\n        // Ensures component is still mounted\n        // before calling setState\n        if (isNotCanceled(e)) {\n          setError(e);\n        }\n      }\n    };\n    openPicker();\n  }, [open]);\n\n  return (\n    <button\n      type=\"button\"\n      onClick={pickColor}\n      style={{\n        appearance: \"none\",\n        borderRadius: \"4px\",\n        boxShadow: \"0 0 0 1px rgba(0,0,0,0.2) inset\",\n        backgroundColor: \"rgba(0,0,0,0.02)\",\n        // width: \"20px\",\n        // height: \"20px\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        padding: \"4px\",\n        color: \"#888\",\n        border: \"none\",\n        ...props.style,\n      }}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"13px\"\n        height=\"13px\"\n        viewBox=\"0 0 15 15\"\n        // style={{\n        //   transform: \"scale(0.9)\",\n        //   transformOrigin: \"center\",\n        // }}\n      >\n        <path\n          fill=\"currentColor\"\n          d=\"m.5 12.5l-.354-.354l-.146.147v.207zM8 5l.354-.354a.5.5 0 0 0-.708 0zm2 2l.354.354a.5.5 0 0 0 0-.708zm-7.5 7.5v.5h.207l.147-.146zm-2 0H0a.5.5 0 0 0 .5.5zm7-10l-.354-.354l-.353.354l.353.354zm3.086-3.086l-.354-.353zm2.828 0l-.353.354zm.172.172l.353-.354zm0 2.828l-.354-.353zM10.5 7.5l-.354.354l.354.353l.354-.353zM.854 12.854l7.5-7.5l-.708-.708l-7.5 7.5zm6.792-7.5l2 2l.708-.708l-2-2zm2 1.292l-7.5 7.5l.708.708l7.5-7.5zM2.5 14h-2v1h2zm-1.5.5v-2H0v2zM6.146 3.854l5 5l.708-.708l-5-5zm1.708 1l3.085-3.086l-.707-.707l-3.086 3.085zm5.207-3.086l.171.171l.707-.707l-.171-.171zm.171 2.293l-3.086 3.085l.708.708l3.085-3.086zm-2.378 3.085l-3-3l-.708.708l3 3zm2.378-5.207a1.5 1.5 0 0 1 0 2.122l.707.707a2.5 2.5 0 0 0 0-3.536zm-2.293-.171a1.5 1.5 0 0 1 2.122 0l.707-.707a2.5 2.5 0 0 0-3.536 0z\"\n        />\n      </svg>\n    </button>\n  );\n}\n","\"use client\";\n\nimport {\n  HsvaColor,\n  hsvaToHsvaString,\n  hsvaToRgba,\n  rgbaToHsva,\n} from \"@noya-app/noya-color\";\nimport { Sketch } from \"@noya-app/noya-file-format\";\nimport React, { memo, useMemo } from \"react\";\nimport { ColorModel } from \"../types\";\nimport { equalColorObjects } from \"../utils/compare\";\nimport { getGradientBackground } from \"../utils/getGradientBackground\";\nimport { interpolateRgba } from \"../utils/interpolateRgba\";\nimport ColorPicker from \"./ColorPicker\";\nimport { Interaction, Interactive } from \"./Interactive\";\nimport Pointer from \"./Pointer\";\n\ninterface ContainerProps {\n  background: string;\n  children: React.ReactNode;\n}\n\nconst Container: React.FC<ContainerProps> = ({ background, children }) => (\n  <div\n    style={{\n      position: \"relative\",\n      height: \"8px\",\n      borderRadius: \"8px\",\n      boxShadow: \"0 0 0 1px rgba(0,0,0,0.2) inset\",\n      background,\n      zIndex: 2,\n    }}\n  >\n    {children}\n  </div>\n);\n\nexport type GradientStop = {\n  color: HsvaColor;\n  position: number; // percentage between 0 and 1\n};\n\nconst hsvaColorModel: ColorModel<HsvaColor> = {\n  defaultColor: { h: 0, s: 0, v: 0, a: 1 },\n  equal: equalColorObjects,\n  toHsva: (color) => color,\n  fromHsva: (color) => color,\n};\n\nexport default memo(function Gradient({\n  stops,\n  selectedStopIndex: selectedStopIndexProp,\n  onSelectStop,\n  onChange,\n  children,\n  style,\n  className,\n}: {\n  stops: GradientStop[];\n  selectedStopIndex: number;\n  onSelectStop: (index: number) => void;\n  onChange: (stops: GradientStop[]) => void;\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n  className?: string;\n}) {\n  const selectedStopIndex = useMemo(() => {\n    return Math.max(0, Math.min(selectedStopIndexProp, stops.length - 1));\n  }, [selectedStopIndexProp, stops]);\n\n  const handleMove = (interaction: Interaction) => {\n    onChange(\n      stops.map((stop, index) => ({\n        ...stop,\n        position:\n          index === selectedStopIndex ? interaction.left : stop.position,\n      }))\n    );\n  };\n\n  const handleKey = (offset: Interaction) => {\n    if (!offset) {\n      onChange(stops.filter((_, index) => index !== selectedStopIndex));\n    }\n    // Hue measured in degrees of the color circle ranging from 0 to 360\n    //console.log('press');\n  };\n\n  const handleClick = (interaction: Interaction) => {\n    const color = interpolateRgba(\n      stops.map((stop) => ({\n        color: hsvaToRgba(stop.color),\n        position: stop.position,\n      })),\n      interaction.left\n    );\n\n    const newStop: GradientStop = {\n      color: rgbaToHsva(color),\n      position: interaction.left,\n    };\n\n    onChange([...stops, newStop].sort((a, b) => a.position - b.position));\n  };\n\n  const handleDelete = () => {\n    const nextStops = stops.filter((_, index) => index !== selectedStopIndex);\n    if (nextStops.length < 2) return;\n    onChange(nextStops);\n  };\n\n  const background = useMemo(\n    () => getGradientBackground(stops, Sketch.GradientType.Linear, 90),\n    [stops]\n  );\n\n  const handleClickPointer = (index: number) => {\n    onSelectStop(index);\n  };\n\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        userSelect: \"none\",\n        cursor: \"default\",\n        ...style,\n      }}\n      className={className}\n    >\n      <Container background={background}>\n        <Interactive\n          onMove={handleMove}\n          onKey={handleKey}\n          onClick={handleClick}\n          onDelete={handleDelete}\n          onClickPointer={handleClickPointer}\n          aria-label=\"Gradient\"\n          style={{ cursor: \"copy\" }}\n        >\n          {stops.map((stop, index) => (\n            <Pointer\n              index={index}\n              key={`gradients-point-${index}`}\n              selected={index === selectedStopIndex}\n              // position is a percentage between 0 and 1\n              left={stop.position}\n              color={hsvaToHsvaString(stop.color)}\n            />\n          ))}\n        </Interactive>\n      </Container>\n      <ColorPicker\n        color={stops[selectedStopIndex].color}\n        colorModel={hsvaColorModel}\n        onChange={(hsvaColor) => {\n          onChange(\n            stops.map((stop, index) => ({\n              ...stop,\n              color: index === selectedStopIndex ? hsvaColor : stop.color,\n            }))\n          );\n        }}\n      >\n        {children}\n      </ColorPicker>\n    </div>\n  );\n});\n","import { hexToRgba } from \"@noya-app/noya-color\";\nimport { ObjectColor } from \"../types\";\n\nexport const equalColorObjects = (\n  first: ObjectColor,\n  second: ObjectColor\n): boolean => {\n  if (first === second) return true;\n\n  for (const prop in first) {\n    // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)\n    // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)\n    // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,\n    // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if\n    // there is or not), and then as a type TS can iterate over.\n    if (\n      (first as unknown as Record<string, number>)[prop] !==\n      (second as unknown as Record<string, number>)[prop]\n    )\n      return false;\n  }\n\n  return true;\n};\n\nexport const equalColorString = (first: string, second: string): boolean => {\n  return first.replace(/\\s/g, \"\") === second.replace(/\\s/g, \"\");\n};\n\nexport const equalHex = (first: string, second: string): boolean => {\n  if (first.toLowerCase() === second.toLowerCase()) return true;\n\n  // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects\n  return equalColorObjects(hexToRgba(first), hexToRgba(second));\n};\n","import { hsvaToRgbaString } from \"@noya-app/noya-color\";\nimport { Sketch } from \"@noya-app/noya-file-format\";\nimport { GradientStop } from \"../components/Gradient\";\n\nconst getRGBAColor = (value: GradientStop[], num: 100 | 360) =>\n  [...value]\n    .sort((a, b) => a.position - b.position)\n    .map(\n      (g) =>\n        `${hsvaToRgbaString(g.color)} ${g.position * num}${\n          num === 100 ? \"%\" : \"deg\"\n        }`\n    )\n    .join(\", \\n\");\n\nexport function getGradientBackground(\n  value: GradientStop[],\n  type: Sketch.GradientType,\n  direction?: number\n) {\n  if (type === Sketch.GradientType.Angular) {\n    return `conic-gradient(${getRGBAColor(value, 360)})`;\n  }\n\n  const color = getRGBAColor(value, 100);\n  const position =\n    type === Sketch.GradientType.Radial\n      ? \"radial-gradient(circle\"\n      : `linear-gradient(${direction ?? 180}deg`;\n\n  return `${position}, ${color})`;\n}\n","import { RgbaColor } from \"@noya-app/noya-color\";\nimport { interpolate } from \"@noya-app/noya-utils\";\n\nexport interface GradientStopRgba {\n  color: RgbaColor;\n  position: number;\n}\n\nconst RGBA_COMPONENTS = [\"r\", \"g\", \"b\", \"a\"] as const;\n\nexport function interpolateRgba(\n  stops: GradientStopRgba[],\n  pos: number\n): RgbaColor {\n  const color: RgbaColor = { r: 0, g: 0, b: 0, a: 1 };\n\n  if (stops.length === 0) return color;\n\n  const sorted = [...stops].sort((a, b) => a.position - b.position);\n\n  RGBA_COMPONENTS.forEach((component) => {\n    const inputRange = sorted.map((stop) => stop.position);\n    const outputRange = sorted.map((stop) => stop.color[component]);\n\n    color[component] = interpolate(pos, { inputRange, outputRange });\n  });\n\n  return color;\n}\n","\"use client\";\n\nimport React, {\n  memo,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { useStableCallback } from \"@noya-app/react-utils\";\nimport { validHex } from \"../utils/validate\";\n\n// Escapes all non-hexadecimal characters including \"#\"\nconst escape = (hex: string) => hex.replace(/([^0-9A-F]+)/gi, \"\").substr(0, 6);\n\ninterface ComponentProps {\n  color: string;\n  onChange: (newColor: string) => void;\n}\n\ntype InputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\"\n>;\n\nexport default memo(function HexColorInput(\n  props: Partial<InputProps & ComponentProps>\n): ReactNode {\n  const { color = \"\", onChange, onBlur, ...rest } = props;\n  const [value, setValue] = useState(() => escape(color));\n  const onChangeCallback = useStableCallback(onChange);\n  const onBlurCallback = useStableCallback(onBlur);\n\n  // Trigger `onChange` handler only if the input value is a valid HEX-color\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const inputValue = escape(e.target.value);\n      setValue(inputValue);\n      if (validHex(inputValue)) onChangeCallback(\"#\" + inputValue);\n    },\n    [onChangeCallback]\n  );\n\n  // Take the color from props if the last typed color (in local state) is not valid\n  const handleBlur = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      if (!validHex(e.target.value)) setValue(escape(color));\n      onBlurCallback(e);\n    },\n    [color, onBlurCallback]\n  );\n\n  // Update the local state when `color` property value is changed\n  useEffect(() => {\n    setValue(escape(color));\n  }, [color]);\n\n  return (\n    <input\n      {...rest}\n      value={value}\n      spellCheck=\"false\" // the element should not be checked for spelling errors\n      onChange={handleChange}\n      onBlur={handleBlur}\n    />\n  );\n});\n","const hex3 = /^#?[0-9A-F]{3}$/i;\nconst hex6 = /^#?[0-9A-F]{6}$/i;\n\nexport const validHex = (color: string): boolean => hex6.test(color) || hex3.test(color);\n","\"use client\";\n\nimport { hsvaToHslString } from \"@noya-app/noya-color\";\nimport { clamp, round } from \"@noya-app/noya-utils\";\nimport React, { memo } from \"react\";\nimport { useColorPicker } from \"../contexts/ColorPickerContext\";\nimport { Interaction, Interactive } from \"./Interactive\";\nimport Pointer from \"./Pointer\";\n\nconst Container: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n  <div\n    style={{\n      position: \"relative\",\n      height: \"8px\",\n      borderRadius: \"8px\",\n      boxShadow: \"0 0 0 1px rgba(0,0,0,0.2) inset\",\n      background: `linear-gradient(\n        to right,\n        #f00 0%,\n        #ff0 17%,\n        #0f0 33%,\n        #0ff 50%,\n        #00f 67%,\n        #f0f 83%,\n        #f00 100%\n      )`,\n      zIndex: 2,\n    }}\n  >\n    {children}\n  </div>\n);\n\nexport default memo(function HueBase() {\n  const [{ h: hue }, onChange] = useColorPicker();\n  const color = hsvaToHslString({ h: hue, s: 100, v: 100, a: 1 });\n\n  const handleMove = (interaction: Interaction) => {\n    onChange({ h: 360 * interaction.left });\n  };\n\n  const handleKey = (offset?: Interaction) => {\n    // Hue measured in degrees of the color circle ranging from 0 to 360\n    if (!offset) return;\n    onChange({\n      h: clamp(hue + offset.left * 360, 0, 360),\n    });\n  };\n\n  return (\n    <Container>\n      <Interactive\n        onMove={handleMove}\n        onKey={handleKey}\n        aria-label=\"Hue\"\n        aria-valuetext={round(hue)}\n      >\n        <Pointer left={hue / 360} color={color} />\n      </Interactive>\n    </Container>\n  );\n});\n","\"use client\";\n\nimport { hsvaToHslString } from \"@noya-app/noya-color\";\nimport { clamp, round } from \"@noya-app/noya-utils\";\nimport React, { memo } from \"react\";\nimport { useColorPicker } from \"../contexts/ColorPickerContext\";\nimport { Interaction, Interactive } from \"./Interactive\";\nimport Pointer from \"./Pointer\";\n\ninterface ContainerProps {\n  backgroundColor: string;\n  children: React.ReactNode;\n}\n\nconst Container: React.FC<ContainerProps> = ({ backgroundColor, children }) => (\n  <div\n    style={{\n      position: \"relative\",\n      flexGrow: 1,\n      borderRadius: \"3px\",\n      backgroundColor,\n      backgroundImage: [\n        \"linear-gradient(to top, #000, rgba(0, 0, 0, 0))\",\n        \"linear-gradient(to right, #fff, rgba(255, 255, 255, 0))\",\n      ].join(\", \"),\n      boxShadow: \"0 0 0 1px rgba(0,0,0,0.2) inset\",\n      minHeight: \"150px\",\n    }}\n  >\n    {children}\n  </div>\n);\n\nexport default memo(function SaturationBase() {\n  const [hsva, onChange] = useColorPicker();\n  const color = hsvaToHslString(hsva);\n  const backgroundColor = hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 });\n\n  const handleMove = (interaction: Interaction) => {\n    onChange({\n      s: interaction.left * 100,\n      v: 100 - interaction.top * 100,\n    });\n  };\n\n  const handleKey = (offset?: Interaction) => {\n    // Saturation and brightness always fit into [0, 100] range\n    if (!offset) return;\n    onChange({\n      s: clamp(hsva.s + offset.left * 100, 0, 100),\n      v: clamp(hsva.v - offset.top * 100, 0, 100),\n    });\n  };\n\n  return (\n    <Container backgroundColor={backgroundColor}>\n      <Interactive\n        onMove={handleMove}\n        onKey={handleKey}\n        aria-label=\"Color\"\n        aria-valuetext={`Saturation ${round(hsva.s)}%, Brightness ${round(\n          hsva.v\n        )}%`}\n      >\n        <Pointer top={1 - hsva.v / 100} left={hsva.s / 100} color={color} />\n      </Interactive>\n    </Container>\n  );\n});\n","\"use client\";\n\nimport { HsvaColor, hsvaToRgba, rgbaToHsva } from \"@noya-app/noya-color\";\nimport type { Sketch } from \"@noya-app/noya-file-format\";\nimport * as React from \"react\";\nimport { ColorModel } from \"../types\";\nimport { equalColorObjects } from \"../utils/compare\";\nimport { rgbaToSketchColor, sketchColorToRgba } from \"../utils/sketchColor\";\nimport Alpha from \"./Alpha\";\nimport NoyaColorPicker from \"./ColorPicker\";\nimport Hue from \"./Hue\";\nimport Saturation from \"./Saturation\";\n\ninterface Props {\n  value: Sketch.Color;\n  onChange: (color: Sketch.Color) => void;\n}\n\nconst colorModel: ColorModel<HsvaColor> = {\n  defaultColor: { h: 0, s: 0, v: 0, a: 1 },\n  equal: equalColorObjects,\n  toHsva: (a) => a,\n  fromHsva: (a) => a,\n};\n\nexport const SketchColorPicker = React.memo(function ColorPicker({\n  value,\n  onChange,\n}: Props) {\n  const hsva = value.colorSpaces?.hsva;\n\n  const color = React.useMemo(() => {\n    return hsva\n      ? { h: hsva.hue, s: hsva.saturation, v: hsva.value, a: hsva.alpha }\n      : rgbaToHsva(sketchColorToRgba(value));\n  }, [value, hsva]);\n\n  const handleChange = React.useCallback(\n    (hsva: HsvaColor) => {\n      const updated = rgbaToSketchColor(hsvaToRgba(hsva));\n\n      updated.colorSpaces = {\n        hsva: {\n          hue: hsva.h,\n          saturation: hsva.s,\n          value: hsva.v,\n          alpha: hsva.a,\n        },\n      };\n\n      onChange(updated);\n    },\n    [onChange]\n  );\n\n  return (\n    <NoyaColorPicker<HsvaColor>\n      color={color}\n      colorModel={colorModel}\n      onChange={handleChange}\n    >\n      <Saturation />\n      <div style={{ height: \"12px\" }} />\n      <Hue />\n      <div style={{ height: \"5px\" }} />\n      <Alpha />\n    </NoyaColorPicker>\n  );\n});\n","import {\n  hsvaToRgbaString,\n  RgbaColor,\n  rgbaToHex,\n  rgbaToHsva,\n} from \"@noya-app/noya-color\";\nimport type { Sketch } from \"@noya-app/noya-file-format\";\n\nexport function sketchColorToRgba(value: Sketch.Color): RgbaColor {\n  return {\n    r: Math.floor(value.red * 255),\n    g: Math.floor(value.green * 255),\n    b: Math.floor(value.blue * 255),\n    a: value.alpha,\n  };\n}\n\nexport function sketchColorToRgbaString(value: Sketch.Color): string {\n  return hsvaToRgbaString(rgbaToHsva(sketchColorToRgba(value)));\n}\n\nexport function rgbaToSketchColor(value: RgbaColor): Sketch.Color {\n  return {\n    _class: \"color\",\n    alpha: value.a,\n    red: value.r / 255,\n    green: value.g / 255,\n    blue: value.b / 255,\n  };\n}\n\nexport function sketchColorToHex(value: Sketch.Color): string {\n  return rgbaToHex(sketchColorToRgba(value)).toUpperCase();\n}\n"],"mappings":"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","names":["clamp","React","memo","React","Container","Container","React","memo","clamp","React","useCallback","useMemo","colorModel","useCallback","useMemo","React","React","useCallback","useCallback","React","Sketch","React","memo","useMemo","Container","React","memo","useMemo","Sketch","React","memo","useCallback","useState","useStableCallback","memo","useState","useStableCallback","useCallback","React","hsvaToHslString","clamp","round","React","memo","Container","React","memo","hsvaToHslString","clamp","round","hsvaToHslString","clamp","round","React","memo","Container","React","memo","hsvaToHslString","clamp","round","hsvaToRgba","rgbaToHsva","React","hsvaToRgbaString","rgbaToHsva","ColorPicker","rgbaToHsva","hsva","hsvaToRgba"]}