@hyperframes/studio 0.5.0-alpha.9 → 0.5.0

package/src/components/editor/DomEditOverlay.tsx

@@ -1,445 +0,0 @@
-import { memo, useMemo, useRef, useState, type RefObject } from "react";
-import { useMountEffect } from "../../hooks/useMountEffect";
-import { type DomEditSelection, findElementForSelection } from "./domEditing";
-
-interface OverlayRect {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-  scaleX: number;
-  scaleY: number;
-}
-
-interface DomEditOverlayProps {
-  iframeRef: RefObject<HTMLIFrameElement | null>;
-  selection: DomEditSelection | null;
-  allowCanvasMovement?: boolean;
-  onCanvasMouseDown: (
-    event: React.MouseEvent<HTMLDivElement>,
-    options?: { preferClipAncestor?: boolean },
-  ) => void;
-  onCanvasDoubleClick: (event: React.MouseEvent<HTMLDivElement>) => void;
-  onSelectedDoubleClick: () => void;
-  onBlockedMove: (selection: DomEditSelection) => void;
-  onMoveCommit: (
-    selection: DomEditSelection,
-    next: { left: number; top: number },
-  ) => Promise<void> | void;
-  onResizeCommit: (
-    selection: DomEditSelection,
-    next: { width: number; height: number },
-  ) => Promise<void> | void;
-}
-
-function toOverlayRect(
-  overlayEl: HTMLDivElement,
-  iframe: HTMLIFrameElement,
-  element: HTMLElement,
-): OverlayRect | null {
-  const iframeRect = iframe.getBoundingClientRect();
-  const overlayRect = overlayEl.getBoundingClientRect();
-  const doc = iframe.contentDocument;
-  const root =
-    doc?.querySelector<HTMLElement>("[data-composition-id]") ?? doc?.documentElement ?? null;
-  const rootRect = root?.getBoundingClientRect();
-  const rootWidth = rootRect?.width;
-  const rootHeight = rootRect?.height;
-  if (!rootWidth || !rootHeight) return null;
-
-  const elementRect = element.getBoundingClientRect();
-  const scaleX = iframeRect.width / rootWidth;
-  const scaleY = iframeRect.height / rootHeight;
-
-  return {
-    left: iframeRect.left - overlayRect.left + elementRect.left * scaleX,
-    top: iframeRect.top - overlayRect.top + elementRect.top * scaleY,
-    width: elementRect.width * scaleX,
-    height: elementRect.height * scaleY,
-    scaleX,
-    scaleY,
-  };
-}
-
-type GestureKind = "drag" | "resize";
-const BLOCKED_MOVE_THRESHOLD_PX = 4;
-const OVERLAY_RECT_EPSILON_PX = 0.5;
-
-function rectsEqual(a: OverlayRect | null, b: OverlayRect | null): boolean {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  return (
-    Math.abs(a.left - b.left) < OVERLAY_RECT_EPSILON_PX &&
-    Math.abs(a.top - b.top) < OVERLAY_RECT_EPSILON_PX &&
-    Math.abs(a.width - b.width) < OVERLAY_RECT_EPSILON_PX &&
-    Math.abs(a.height - b.height) < OVERLAY_RECT_EPSILON_PX &&
-    Math.abs(a.scaleX - b.scaleX) < 0.001 &&
-    Math.abs(a.scaleY - b.scaleY) < 0.001
-  );
-}
-
-function selectionCacheKey(
-  selection: Pick<DomEditSelection, "id" | "selector" | "selectorIndex" | "sourceFile">,
-): string {
-  return [
-    selection.sourceFile ?? "",
-    selection.id ?? "",
-    selection.selector ?? "",
-    selection.selectorIndex ?? "",
-  ].join("|");
-}
-
-function restoreInlineStyle(
-  element: HTMLElement,
-  property: "left" | "top" | "width" | "height",
-  value: string,
-) {
-  if (value) element.style.setProperty(property, value);
-  else element.style.removeProperty(property);
-}
-
-interface GestureState {
-  kind: GestureKind;
-  startX: number;
-  startY: number;
-  initialStyleLeft: string;
-  initialStyleTop: string;
-  originLeft: number;
-  originTop: number;
-  originWidth: number;
-  originHeight: number;
-  actualLeft: number;
-  actualTop: number;
-  actualWidth: number;
-  actualHeight: number;
-  scaleX: number;
-  scaleY: number;
-}
-
-interface BlockedMoveState {
-  pointerId: number;
-  startX: number;
-  startY: number;
-  notified: boolean;
-}
-
-export const DomEditOverlay = memo(function DomEditOverlay({
-  iframeRef,
-  selection,
-  allowCanvasMovement = true,
-  onCanvasMouseDown,
-  onCanvasDoubleClick,
-  onSelectedDoubleClick,
-  onBlockedMove,
-  onMoveCommit,
-  onResizeCommit,
-}: DomEditOverlayProps) {
-  const overlayRef = useRef<HTMLDivElement | null>(null);
-  const boxRef = useRef<HTMLDivElement | null>(null);
-  const [overlayRect, setOverlayRect] = useState<OverlayRect | null>(null);
-  const gestureRef = useRef<GestureState | null>(null);
-  const blockedMoveRef = useRef<BlockedMoveState | null>(null);
-  const suppressNextBoxClickRef = useRef(false);
-  const rafPausedRef = useRef(false);
-  const resolvedElementRef = useRef<{ key: string; element: HTMLElement } | null>(null);
-
-  const selectionRef = useRef(selection);
-  selectionRef.current = selection;
-  const overlayRectRef = useRef(overlayRect);
-  overlayRectRef.current = overlayRect;
-  const onMoveCommitRef = useRef(onMoveCommit);
-  onMoveCommitRef.current = onMoveCommit;
-  const onResizeCommitRef = useRef(onResizeCommit);
-  onResizeCommitRef.current = onResizeCommit;
-  const onBlockedMoveRef = useRef(onBlockedMove);
-  onBlockedMoveRef.current = onBlockedMove;
-
-  useMountEffect(() => {
-    let frame = 0;
-    const clearOverlayRect = () => {
-      if (!overlayRectRef.current) return;
-      overlayRectRef.current = null;
-      setOverlayRect(null);
-    };
-    const setNextOverlayRect = (next: OverlayRect | null) => {
-      if (rectsEqual(overlayRectRef.current, next)) return;
-      overlayRectRef.current = next;
-      setOverlayRect(next);
-    };
-    const resolveElement = (doc: Document, sel: DomEditSelection) => {
-      const key = selectionCacheKey(sel);
-      const cached = resolvedElementRef.current;
-      if (
-        cached?.key === key &&
-        cached.element.isConnected &&
-        cached.element.ownerDocument === doc
-      ) {
-        return cached.element;
-      }
-
-      const next = findElementForSelection(doc, sel, sel.sourceFile);
-      resolvedElementRef.current = next ? { key, element: next } : null;
-      return next;
-    };
-
-    const update = () => {
-      frame = requestAnimationFrame(update);
-      if (rafPausedRef.current) return;
-
-      const sel = selectionRef.current;
-      const iframe = iframeRef.current;
-      const overlayEl = overlayRef.current;
-      if (!sel || !iframe || !overlayEl) {
-        resolvedElementRef.current = null;
-        clearOverlayRect();
-        return;
-      }
-
-      const doc = iframe.contentDocument;
-      if (!doc) return;
-
-      const el = resolveElement(doc, sel);
-      if (!el) {
-        clearOverlayRect();
-        return;
-      }
-
-      const next = toOverlayRect(overlayEl, iframe, el);
-      setNextOverlayRect(next);
-    };
-
-    frame = requestAnimationFrame(update);
-    return () => cancelAnimationFrame(frame);
-  });
-
-  const selectionKey = useMemo(() => {
-    if (!selection) return "none";
-    return `${selection.sourceFile}:${selection.id ?? selection.selector ?? selection.label}:${
-      selection.selectorIndex ?? 0
-    }`;
-  }, [selection]);
-
-  const startGesture = (kind: GestureKind, e: React.PointerEvent) => {
-    const sel = selectionRef.current;
-    const rect = overlayRectRef.current;
-    const box = boxRef.current;
-    if (!sel || !rect || !box) return;
-
-    const left = Number.parseFloat(sel.computedStyles.left ?? "");
-    const top = Number.parseFloat(sel.computedStyles.top ?? "");
-    const width = Number.parseFloat(sel.computedStyles.width ?? "");
-    const height = Number.parseFloat(sel.computedStyles.height ?? "");
-    if (!Number.isFinite(left) || !Number.isFinite(top)) return;
-    if (kind === "resize" && !Number.isFinite(width) && !Number.isFinite(height)) return;
-
-    e.preventDefault();
-    e.stopPropagation();
-    (e.target as HTMLElement).setPointerCapture(e.pointerId);
-
-    rafPausedRef.current = true;
-
-    gestureRef.current = {
-      kind,
-      startX: e.clientX,
-      startY: e.clientY,
-      initialStyleLeft: sel.element.style.left,
-      initialStyleTop: sel.element.style.top,
-      originLeft: rect.left,
-      originTop: rect.top,
-      originWidth: rect.width,
-      originHeight: rect.height,
-      actualLeft: left,
-      actualTop: top,
-      actualWidth: Number.isFinite(width) ? width : 0,
-      actualHeight: Number.isFinite(height) ? height : 0,
-      scaleX: rect.scaleX,
-      scaleY: rect.scaleY,
-    };
-  };
-
-  const onPointerMove = (e: React.PointerEvent) => {
-    const g = gestureRef.current;
-    const sel = selectionRef.current;
-    const box = boxRef.current;
-    const blockedMove = blockedMoveRef.current;
-    if (blockedMove && sel) {
-      const dx = e.clientX - blockedMove.startX;
-      const dy = e.clientY - blockedMove.startY;
-      if (!blockedMove.notified && Math.hypot(dx, dy) >= BLOCKED_MOVE_THRESHOLD_PX) {
-        blockedMove.notified = true;
-        suppressNextBoxClickRef.current = true;
-        onBlockedMoveRef.current(sel);
-      }
-      return;
-    }
-
-    if (!g || !sel || !box) return;
-
-    const dx = e.clientX - g.startX;
-    const dy = e.clientY - g.startY;
-
-    if (g.kind === "drag") {
-      const nextBoxLeft = g.originLeft + dx;
-      const nextBoxTop = g.originTop + dy;
-      box.style.left = `${nextBoxLeft}px`;
-      box.style.top = `${nextBoxTop}px`;
-      sel.element.style.left = `${Math.round(g.actualLeft + dx / g.scaleX)}px`;
-      sel.element.style.top = `${Math.round(g.actualTop + dy / g.scaleY)}px`;
-    } else {
-      const newW = Math.max(20, g.originWidth + dx);
-      const newH = Math.max(20, g.originHeight + dy);
-      box.style.width = `${newW}px`;
-      box.style.height = `${newH}px`;
-      sel.element.style.width = `${Math.round(g.actualWidth + dx / g.scaleX)}px`;
-      sel.element.style.height = `${Math.round(g.actualHeight + dy / g.scaleY)}px`;
-    }
-  };
-
-  const onPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
-    const g = gestureRef.current;
-    const sel = selectionRef.current;
-    const box = boxRef.current;
-    blockedMoveRef.current = null;
-    if (!g || !sel) {
-      gestureRef.current = null;
-      rafPausedRef.current = false;
-      return;
-    }
-
-    gestureRef.current = null;
-    rafPausedRef.current = false;
-
-    const movedDistance = Math.hypot(e.clientX - g.startX, e.clientY - g.startY);
-    if (g.kind === "drag" && movedDistance < BLOCKED_MOVE_THRESHOLD_PX) {
-      restoreInlineStyle(sel.element, "left", g.initialStyleLeft);
-      restoreInlineStyle(sel.element, "top", g.initialStyleTop);
-      if (box) {
-        box.style.left = `${g.originLeft}px`;
-        box.style.top = `${g.originTop}px`;
-      }
-      suppressNextBoxClickRef.current = true;
-      onCanvasMouseDown(e as unknown as React.MouseEvent<HTMLDivElement>, {
-        preferClipAncestor: false,
-      });
-      return;
-    }
-
-    if (g.kind === "drag") {
-      const finalLeft = Number.parseFloat(sel.element.style.left) || g.actualLeft;
-      const finalTop = Number.parseFloat(sel.element.style.top) || g.actualTop;
-      void Promise.resolve(onMoveCommitRef.current(sel, { left: finalLeft, top: finalTop })).catch(
-        () => {
-          sel.element.style.left = `${Math.round(g.actualLeft)}px`;
-          sel.element.style.top = `${Math.round(g.actualTop)}px`;
-        },
-      );
-    } else {
-      const finalW = Number.parseFloat(sel.element.style.width) || g.actualWidth;
-      const finalH = Number.parseFloat(sel.element.style.height) || g.actualHeight;
-      void Promise.resolve(onResizeCommitRef.current(sel, { width: finalW, height: finalH })).catch(
-        () => {
-          if (g.actualWidth > 0) sel.element.style.width = `${Math.round(g.actualWidth)}px`;
-          else sel.element.style.removeProperty("width");
-          if (g.actualHeight > 0) sel.element.style.height = `${Math.round(g.actualHeight)}px`;
-          else sel.element.style.removeProperty("height");
-        },
-      );
-    }
-  };
-
-  // Click on overlay background → select whatever is under the pointer in the iframe.
-  // This handles clicking children inside an already-selected parent: the selection
-  // box stops propagation for drag gestures, but clicks on the transparent overlay
-  // area outside the box pass through to the iframe pick logic.
-  const handleOverlayMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
-    const target = event.target as HTMLElement | null;
-    if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
-    onCanvasMouseDown(event, { preferClipAncestor: false });
-  };
-
-  const handleOverlayDoubleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    const target = event.target as HTMLElement | null;
-    if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
-    onCanvasDoubleClick(event);
-  };
-
-  // Click on the selection box itself → re-pick the element under the pointer.
-  // This lets you click a child element even when a parent is selected, because
-  // the click coordinates are forwarded to the iframe's element picker.
-  const handleBoxClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (gestureRef.current) return;
-    if (suppressNextBoxClickRef.current) {
-      suppressNextBoxClickRef.current = false;
-      event.stopPropagation();
-      return;
-    }
-    onCanvasMouseDown(event, { preferClipAncestor: false });
-  };
-
-  const clearPointerState = () => {
-    blockedMoveRef.current = null;
-    gestureRef.current = null;
-    rafPausedRef.current = false;
-  };
-
-  return (
-    <div
-      key={selectionKey}
-      ref={overlayRef}
-      className="absolute inset-0 z-10 pointer-events-auto"
-      onMouseDown={handleOverlayMouseDown}
-      onDoubleClick={handleOverlayDoubleClick}
-      onPointerMove={onPointerMove}
-      onPointerUp={onPointerUp}
-      onPointerCancel={clearPointerState}
-    >
-      {selection && overlayRect && (
-        <>
-          <div
-            key={selectionKey}
-            ref={boxRef}
-            data-dom-edit-selection-box="true"
-            className="pointer-events-auto absolute rounded-xl border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
-            style={{
-              left: overlayRect.left,
-              top: overlayRect.top,
-              width: overlayRect.width,
-              height: overlayRect.height,
-              cursor: allowCanvasMovement && selection.capabilities.canMove ? "move" : "default",
-            }}
-            onPointerDown={(e) => {
-              if (!allowCanvasMovement) return;
-              if (selection.capabilities.canMove) {
-                startGesture("drag", e);
-                return;
-              }
-              e.preventDefault();
-              e.stopPropagation();
-              e.currentTarget.setPointerCapture(e.pointerId);
-              blockedMoveRef.current = {
-                pointerId: e.pointerId,
-                startX: e.clientX,
-                startY: e.clientY,
-                notified: false,
-              };
-            }}
-            onClick={handleBoxClick}
-            onDoubleClick={onSelectedDoubleClick}
-          >
-            {/* Resize handle — bottom-right corner */}
-            {allowCanvasMovement && selection.capabilities.canResize && (
-              <div
-                className="absolute -right-1.5 -bottom-1.5 w-3 h-3 rounded-sm bg-studio-accent border border-studio-accent/60"
-                style={{ cursor: "se-resize", touchAction: "none" }}
-                onPointerDown={(e) => {
-                  e.stopPropagation();
-                  startGesture("resize", e);
-                }}
-              />
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-});

package/src/components/editor/colorValue.test.ts

@@ -1,82 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  formatCssColor,
-  hsvToRgb,
-  mergeColorWithExistingAlpha,
-  parseCssColor,
-  rgbToHsv,
-  toColorPickerValue,
-  toHexColor,
-} from "./colorValue";
-
-describe("parseCssColor", () => {
-  it("parses rgb values", () => {
-    expect(parseCssColor("rgb(12, 34, 56)")).toEqual({
-      red: 12,
-      green: 34,
-      blue: 56,
-      alpha: 1,
-    });
-  });
-
-  it("parses rgba values", () => {
-    expect(parseCssColor("rgba(15, 23, 42, 0.64)")).toEqual({
-      red: 15,
-      green: 23,
-      blue: 42,
-      alpha: 0.64,
-    });
-  });
-
-  it("parses transparent", () => {
-    expect(parseCssColor("transparent")).toEqual({
-      red: 0,
-      green: 0,
-      blue: 0,
-      alpha: 0,
-    });
-  });
-});
-
-describe("toColorPickerValue", () => {
-  it("converts css color to hex", () => {
-    expect(toColorPickerValue("rgba(15, 23, 42, 0.64)")).toBe("#0f172a");
-  });
-});
-
-describe("toHexColor", () => {
-  it("formats rgb channels as hex", () => {
-    expect(toHexColor({ red: 15, green: 23, blue: 42 })).toBe("#0f172a");
-  });
-});
-
-describe("formatCssColor", () => {
-  it("formats opaque colors as rgb", () => {
-    expect(formatCssColor({ red: 18, green: 52, blue: 86, alpha: 1 })).toBe("rgb(18, 52, 86)");
-  });
-
-  it("formats translucent colors as rgba", () => {
-    expect(formatCssColor({ red: 18, green: 52, blue: 86, alpha: 0.64 })).toBe(
-      "rgba(18, 52, 86, 0.64)",
-    );
-  });
-});
-
-describe("rgb hsv conversion", () => {
-  it("round-trips primary color values", () => {
-    const hsv = rgbToHsv({ red: 47, green: 198, blue: 127 });
-    expect(hsvToRgb(hsv)).toEqual({ red: 47, green: 198, blue: 127 });
-  });
-});
-
-describe("mergeColorWithExistingAlpha", () => {
-  it("preserves alpha when the previous color was translucent", () => {
-    expect(mergeColorWithExistingAlpha("#123456", "rgba(15, 23, 42, 0.64)")).toBe(
-      "rgba(18, 52, 86, 0.64)",
-    );
-  });
-
-  it("returns rgb when the previous color was opaque", () => {
-    expect(mergeColorWithExistingAlpha("#123456", "rgb(15, 23, 42)")).toBe("rgb(18, 52, 86)");
-  });
-});

package/src/components/editor/colorValue.ts

@@ -1,175 +0,0 @@
-export interface ParsedColor {
-  red: number;
-  green: number;
-  blue: number;
-  alpha: number;
-}
-
-export interface HsvColor {
-  hue: number;
-  saturation: number;
-  value: number;
-}
-
-function clampChannel(value: number): number {
-  return Math.max(0, Math.min(255, Math.round(value)));
-}
-
-function clampAlpha(value: number): number {
-  return Math.max(0, Math.min(1, value));
-}
-
-function toHex(value: number): string {
-  return clampChannel(value).toString(16).padStart(2, "0");
-}
-
-function formatAlpha(value: number): string {
-  return `${Math.round(clampAlpha(value) * 100) / 100}`;
-}
-
-export function parseCssColor(value: string): ParsedColor | null {
-  const trimmed = value.trim().toLowerCase();
-  if (!trimmed) return null;
-  if (trimmed === "transparent") {
-    return { red: 0, green: 0, blue: 0, alpha: 0 };
-  }
-
-  const shortHex = trimmed.match(/^#([0-9a-f]{3})$/i);
-  if (shortHex) {
-    const [r, g, b] = shortHex[1].split("");
-    return {
-      red: Number.parseInt(r + r, 16),
-      green: Number.parseInt(g + g, 16),
-      blue: Number.parseInt(b + b, 16),
-      alpha: 1,
-    };
-  }
-
-  const hex = trimmed.match(/^#([0-9a-f]{6})$/i);
-  if (hex) {
-    return {
-      red: Number.parseInt(hex[1].slice(0, 2), 16),
-      green: Number.parseInt(hex[1].slice(2, 4), 16),
-      blue: Number.parseInt(hex[1].slice(4, 6), 16),
-      alpha: 1,
-    };
-  }
-
-  const rgba = trimmed.match(
-    /^rgba?\(\s*([0-9.]+)\s*,\s*([0-9.]+)\s*,\s*([0-9.]+)(?:\s*,\s*([0-9.]+))?\s*\)$/i,
-  );
-  if (rgba) {
-    return {
-      red: clampChannel(Number.parseFloat(rgba[1])),
-      green: clampChannel(Number.parseFloat(rgba[2])),
-      blue: clampChannel(Number.parseFloat(rgba[3])),
-      alpha: clampAlpha(rgba[4] != null ? Number.parseFloat(rgba[4]) : 1),
-    };
-  }
-
-  return null;
-}
-
-export function toColorPickerValue(value: string): string {
-  const parsed = parseCssColor(value);
-  if (!parsed) return "#000000";
-  return toHexColor(parsed);
-}
-
-export function toHexColor(color: Pick<ParsedColor, "red" | "green" | "blue">): string {
-  return `#${toHex(color.red)}${toHex(color.green)}${toHex(color.blue)}`;
-}
-
-export function formatCssColor(color: ParsedColor): string {
-  const red = clampChannel(color.red);
-  const green = clampChannel(color.green);
-  const blue = clampChannel(color.blue);
-  const alpha = clampAlpha(color.alpha);
-
-  if (alpha >= 1) {
-    return `rgb(${red}, ${green}, ${blue})`;
-  }
-
-  return `rgba(${red}, ${green}, ${blue}, ${formatAlpha(alpha)})`;
-}
-
-export function rgbToHsv(color: Pick<ParsedColor, "red" | "green" | "blue">): HsvColor {
-  const red = clampChannel(color.red) / 255;
-  const green = clampChannel(color.green) / 255;
-  const blue = clampChannel(color.blue) / 255;
-  const max = Math.max(red, green, blue);
-  const min = Math.min(red, green, blue);
-  const delta = max - min;
-
-  let hue = 0;
-  if (delta !== 0) {
-    if (max === red) {
-      hue = 60 * (((green - blue) / delta) % 6);
-    } else if (max === green) {
-      hue = 60 * ((blue - red) / delta + 2);
-    } else {
-      hue = 60 * ((red - green) / delta + 4);
-    }
-  }
-
-  if (hue < 0) hue += 360;
-
-  return {
-    hue,
-    saturation: max === 0 ? 0 : delta / max,
-    value: max,
-  };
-}
-
-export function hsvToRgb(color: HsvColor): Pick<ParsedColor, "red" | "green" | "blue"> {
-  const hue = (((color.hue % 360) + 360) % 360) / 60;
-  const saturation = Math.max(0, Math.min(1, color.saturation));
-  const value = Math.max(0, Math.min(1, color.value));
-  const chroma = value * saturation;
-  const x = chroma * (1 - Math.abs((hue % 2) - 1));
-  const m = value - chroma;
-
-  let red = 0;
-  let green = 0;
-  let blue = 0;
-
-  if (hue >= 0 && hue < 1) {
-    red = chroma;
-    green = x;
-  } else if (hue >= 1 && hue < 2) {
-    red = x;
-    green = chroma;
-  } else if (hue >= 2 && hue < 3) {
-    green = chroma;
-    blue = x;
-  } else if (hue >= 3 && hue < 4) {
-    green = x;
-    blue = chroma;
-  } else if (hue >= 4 && hue < 5) {
-    red = x;
-    blue = chroma;
-  } else {
-    red = chroma;
-    blue = x;
-  }
-
-  return {
-    red: clampChannel((red + m) * 255),
-    green: clampChannel((green + m) * 255),
-    blue: clampChannel((blue + m) * 255),
-  };
-}
-
-export function mergeColorWithExistingAlpha(nextHex: string, previousValue: string): string {
-  const hex = nextHex.trim();
-  const match = hex.match(/^#([0-9a-f]{6})$/i);
-  if (!match) return previousValue;
-
-  const previous = parseCssColor(previousValue);
-  const red = Number.parseInt(match[1].slice(0, 2), 16);
-  const green = Number.parseInt(match[1].slice(2, 4), 16);
-  const blue = Number.parseInt(match[1].slice(4, 6), 16);
-  const alpha = previous?.alpha ?? 1;
-
-  return formatCssColor({ red, green, blue, alpha });
-}