@hyperframes/studio 0.5.0-alpha.8 → 0.5.0

package/src/components/editor/gradientValue.ts

@@ -1,445 +0,0 @@
-export type GradientKind = "linear" | "radial" | "conic";
-
-export type RadialSizeKeyword =
-  | "closest-side"
-  | "closest-corner"
-  | "farthest-side"
-  | "farthest-corner";
-
-export interface GradientStop {
-  color: string;
-  position: number;
-}
-
-export interface GradientModel {
-  kind: GradientKind;
-  repeating: boolean;
-  angle: number;
-  centerX: number;
-  centerY: number;
-  shape: "circle" | "ellipse";
-  radialSize: RadialSizeKeyword;
-  stops: GradientStop[];
-}
-
-const RADIAL_SIZE_KEYWORDS: RadialSizeKeyword[] = [
-  "closest-side",
-  "closest-corner",
-  "farthest-side",
-  "farthest-corner",
-];
-
-function isWhitespace(char: string | undefined): boolean {
-  return char === " " || char === "\n" || char === "\r" || char === "\t" || char === "\f";
-}
-
-function isDigit(char: string | undefined): boolean {
-  return char != null && char >= "0" && char <= "9";
-}
-
-function isSimpleNumber(value: string): boolean {
-  if (!value) return false;
-  let index = value[0] === "-" ? 1 : 0;
-  let digits = 0;
-
-  while (isDigit(value[index])) {
-    index += 1;
-    digits += 1;
-  }
-
-  if (value[index] === ".") {
-    index += 1;
-    while (isDigit(value[index])) {
-      index += 1;
-      digits += 1;
-    }
-  }
-
-  return digits > 0 && index === value.length;
-}
-
-function parseCssNumber(value: string | undefined): number | null {
-  if (!value) return null;
-  const trimmed = value.trim();
-  if (!isSimpleNumber(trimmed)) return null;
-  const parsed = Number(trimmed);
-  return Number.isFinite(parsed) ? parsed : null;
-}
-
-function splitCssWhitespace(value: string): string[] {
-  const tokens: string[] = [];
-  let current = "";
-
-  for (const char of value) {
-    if (isWhitespace(char)) {
-      if (current) {
-        tokens.push(current);
-        current = "";
-      }
-      continue;
-    }
-    current += char;
-  }
-
-  if (current) tokens.push(current);
-  return tokens;
-}
-
-function hasCssWord(value: string, word: string): boolean {
-  return splitCssWhitespace(value.toLowerCase()).includes(word);
-}
-
-function parsePercentToken(value: string | undefined, fallback: number): number {
-  if (!value?.endsWith("%")) return fallback;
-  const parsed = parseCssNumber(value.slice(0, -1));
-  return parsed == null ? fallback : clamp(parsed, 0, 100);
-}
-
-function parseAngleToken(value: string | undefined): number | null {
-  const trimmed = value?.trim().toLowerCase();
-  if (!trimmed?.endsWith("deg")) return null;
-  return parseCssNumber(trimmed.slice(0, -3));
-}
-
-function trailingPercentStart(value: string): number | null {
-  if (!value.endsWith("%")) return null;
-  const withoutUnit = value.slice(0, -1).trimEnd();
-  let start = withoutUnit.length;
-
-  while (start > 0 && (isDigit(withoutUnit[start - 1]) || withoutUnit[start - 1] === ".")) {
-    start -= 1;
-  }
-
-  if (start > 0 && withoutUnit[start - 1] === "-") {
-    start -= 1;
-  }
-
-  const token = withoutUnit.slice(start);
-  if (!isSimpleNumber(token)) return null;
-  if (start === 0 || !isWhitespace(withoutUnit[start - 1])) return null;
-  return start;
-}
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, value));
-}
-
-function round(value: number): number {
-  return Math.round(value * 100) / 100;
-}
-
-function parsePercent(value: string | undefined, fallback: number): number {
-  const parsed = parseCssNumber(value);
-  return parsed == null ? fallback : clamp(parsed, 0, 100);
-}
-
-function parseColorStop(raw: string): { color: string; position: number | null } {
-  const trimmed = raw.trim();
-  const percentStart = trailingPercentStart(trimmed);
-  if (percentStart == null) return { color: trimmed, position: null };
-
-  const withoutUnit = trimmed.slice(0, -1).trimEnd();
-  return {
-    color: withoutUnit.slice(0, percentStart).trim(),
-    position: parsePercent(withoutUnit.slice(percentStart), 0),
-  };
-}
-
-function normalizeStops(stops: Array<{ color: string; position: number | null }>): GradientStop[] {
-  if (stops.length === 0) {
-    return [
-      { color: "rgba(60, 230, 172, 0.18)", position: 0 },
-      { color: "rgba(255, 255, 255, 0.04)", position: 100 },
-    ];
-  }
-
-  if (stops.length === 1) {
-    return [
-      { color: stops[0].color, position: 0 },
-      { color: stops[0].color, position: 100 },
-    ];
-  }
-
-  const result = stops.map((stop, index) => ({
-    color: stop.color,
-    position: stop.position ?? (index / (stops.length - 1)) * 100,
-  }));
-
-  return result.map((stop) => ({
-    color: stop.color,
-    position: round(clamp(stop.position, 0, 100)),
-  }));
-}
-
-function splitGradientArgs(value: string): string[] {
-  const parts: string[] = [];
-  let current = "";
-  let depth = 0;
-
-  for (const char of value) {
-    if (char === "(") depth += 1;
-    if (char === ")") depth = Math.max(0, depth - 1);
-
-    if (char === "," && depth === 0) {
-      if (current.trim()) parts.push(current.trim());
-      current = "";
-      continue;
-    }
-
-    current += char;
-  }
-
-  if (current.trim()) parts.push(current.trim());
-  return parts;
-}
-
-function directionToAngle(value: string): number | null {
-  const normalized = value.trim().toLowerCase();
-  const map: Record<string, number> = {
-    "to top": 0,
-    "to top right": 45,
-    "to right top": 45,
-    "to right": 90,
-    "to bottom right": 135,
-    "to right bottom": 135,
-    "to bottom": 180,
-    "to bottom left": 225,
-    "to left bottom": 225,
-    "to left": 270,
-    "to top left": 315,
-    "to left top": 315,
-  };
-  return normalized in map ? map[normalized] : null;
-}
-
-function parseLinearArgs(parts: string[]): GradientModel {
-  const first = parts[0] ?? "";
-  const angleFromDirection = directionToAngle(first);
-  const parsedAngle = parseAngleToken(first);
-  const firstIsAngle = parsedAngle != null;
-  const angle = parsedAngle ?? angleFromDirection ?? 180;
-  const stopParts = firstIsAngle || angleFromDirection != null ? parts.slice(1) : parts;
-
-  return {
-    kind: "linear",
-    repeating: false,
-    angle,
-    centerX: 50,
-    centerY: 50,
-    shape: "ellipse",
-    radialSize: "farthest-corner",
-    stops: normalizeStops(stopParts.map(parseColorStop)),
-  };
-}
-
-function parseRadialArgs(parts: string[]): GradientModel {
-  const first = parts[0] ?? "";
-  const firstLower = first.toLowerCase();
-  const hasConfig =
-    hasCssWord(firstLower, "at") ||
-    hasCssWord(firstLower, "circle") ||
-    hasCssWord(firstLower, "ellipse") ||
-    firstLower.includes("closest-") ||
-    firstLower.includes("farthest-");
-  const config = hasConfig ? first : "";
-  const stopParts = hasConfig ? parts.slice(1) : parts;
-  const configLower = config.toLowerCase();
-  const configTokens = splitCssWhitespace(configLower);
-  const atIndex = configTokens.indexOf("at");
-
-  const shape = hasCssWord(configLower, "circle") ? "circle" : "ellipse";
-  const radialSize =
-    RADIAL_SIZE_KEYWORDS.find((keyword) => configTokens.includes(keyword)) ?? "farthest-corner";
-
-  return {
-    kind: "radial",
-    repeating: false,
-    angle: 180,
-    centerX: parsePercentToken(configTokens[atIndex + 1], 50),
-    centerY: parsePercentToken(configTokens[atIndex + 2], 50),
-    shape,
-    radialSize,
-    stops: normalizeStops(stopParts.map(parseColorStop)),
-  };
-}
-
-function parseConicArgs(parts: string[]): GradientModel {
-  const first = parts[0] ?? "";
-  const firstLower = first.toLowerCase();
-  const hasConfig = hasCssWord(firstLower, "from") || hasCssWord(firstLower, "at");
-  const config = hasConfig ? first : "";
-  const stopParts = hasConfig ? parts.slice(1) : parts;
-  const configTokens = splitCssWhitespace(config.toLowerCase());
-  const fromIndex = configTokens.indexOf("from");
-  const atIndex = configTokens.indexOf("at");
-  const angle = parseAngleToken(configTokens[fromIndex + 1]);
-
-  return {
-    kind: "conic",
-    repeating: false,
-    angle: angle ?? 0,
-    centerX: parsePercentToken(configTokens[atIndex + 1], 50),
-    centerY: parsePercentToken(configTokens[atIndex + 2], 50),
-    shape: "ellipse",
-    radialSize: "farthest-corner",
-    stops: normalizeStops(stopParts.map(parseColorStop)),
-  };
-}
-
-export function buildDefaultGradientModel(fallbackColor?: string): GradientModel {
-  return {
-    kind: "linear",
-    repeating: false,
-    angle: 135,
-    centerX: 50,
-    centerY: 50,
-    shape: "ellipse",
-    radialSize: "farthest-corner",
-    stops: normalizeStops([
-      {
-        color:
-          fallbackColor && fallbackColor !== "transparent"
-            ? fallbackColor
-            : "rgba(60, 230, 172, 0.18)",
-        position: 0,
-      },
-      { color: "rgba(255, 255, 255, 0.04)", position: 100 },
-    ]),
-  };
-}
-
-export function parseGradient(value: string | undefined): GradientModel | null {
-  if (!value || value === "none") return null;
-  const trimmed = value.trim();
-  const openParenIndex = trimmed.indexOf("(");
-  if (openParenIndex <= 0 || !trimmed.endsWith(")")) return null;
-
-  const functionName = trimmed.slice(0, openParenIndex).toLowerCase();
-  const kindByFunctionName: Record<string, { kind: GradientKind; repeating: boolean }> = {
-    "linear-gradient": { kind: "linear", repeating: false },
-    "radial-gradient": { kind: "radial", repeating: false },
-    "conic-gradient": { kind: "conic", repeating: false },
-    "repeating-linear-gradient": { kind: "linear", repeating: true },
-    "repeating-radial-gradient": { kind: "radial", repeating: true },
-    "repeating-conic-gradient": { kind: "conic", repeating: true },
-  };
-  const parsedFunction = kindByFunctionName[functionName];
-  if (!parsedFunction) return null;
-
-  const { kind, repeating } = parsedFunction;
-  const parts = splitGradientArgs(trimmed.slice(openParenIndex + 1, -1));
-
-  const parsed =
-    kind === "linear"
-      ? parseLinearArgs(parts)
-      : kind === "radial"
-        ? parseRadialArgs(parts)
-        : parseConicArgs(parts);
-
-  return { ...parsed, repeating };
-}
-
-function formatStop(stop: GradientStop): string {
-  return `${stop.color} ${round(stop.position)}%`;
-}
-
-export function serializeGradient(model: GradientModel): string {
-  const fn = `${model.repeating ? "repeating-" : ""}${model.kind}-gradient`;
-  const stops = model.stops.map(formatStop).join(", ");
-
-  if (model.kind === "linear") {
-    return `${fn}(${round(model.angle)}deg, ${stops})`;
-  }
-
-  if (model.kind === "radial") {
-    return `${fn}(${model.shape} ${model.radialSize} at ${round(model.centerX)}% ${round(
-      model.centerY,
-    )}%, ${stops})`;
-  }
-
-  return `${fn}(from ${round(model.angle)}deg at ${round(model.centerX)}% ${round(
-    model.centerY,
-  )}%, ${stops})`;
-}
-
-function blendChannel(start: number, end: number, ratio: number): number {
-  return Math.round(start + (end - start) * ratio);
-}
-
-function formatHex(channel: number): string {
-  return channel.toString(16).padStart(2, "0");
-}
-
-export function interpolateGradientStopColor(model: GradientModel, position: number): string {
-  const clampedPosition = clamp(position, 0, 100);
-  const sortedStops = [...model.stops].sort((a, b) => a.position - b.position);
-  const exact = sortedStops.find((stop) => Math.abs(stop.position - clampedPosition) < 0.001);
-  if (exact) return exact.color;
-
-  const right = sortedStops.find((stop) => stop.position > clampedPosition) ?? sortedStops.at(-1);
-  const left =
-    [...sortedStops].reverse().find((stop) => stop.position < clampedPosition) ?? sortedStops[0];
-  if (!left || !right) return sortedStops[0]?.color ?? "rgba(255, 255, 255, 1)";
-  if (left === right) return left.color;
-
-  const leftColor = left.color;
-  const rightColor = right.color;
-  const leftParsed = leftColor ? parseColorString(leftColor) : null;
-  const rightParsed = rightColor ? parseColorString(rightColor) : null;
-  if (!leftParsed || !rightParsed) return left.color;
-
-  const ratio = (clampedPosition - left.position) / Math.max(1, right.position - left.position);
-  const red = blendChannel(leftParsed.red, rightParsed.red, ratio);
-  const green = blendChannel(leftParsed.green, rightParsed.green, ratio);
-  const blue = blendChannel(leftParsed.blue, rightParsed.blue, ratio);
-  const alpha = round(leftParsed.alpha + (rightParsed.alpha - leftParsed.alpha) * ratio);
-
-  if (alpha >= 1) {
-    return `#${formatHex(red)}${formatHex(green)}${formatHex(blue)}`.toUpperCase();
-  }
-
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-}
-
-export function insertGradientStop(model: GradientModel, position: number): GradientModel {
-  const clampedPosition = round(clamp(position, 0, 100));
-  const color = interpolateGradientStopColor(model, clampedPosition);
-  const nextStops = [...model.stops, { color, position: clampedPosition }].sort(
-    (a, b) => a.position - b.position,
-  );
-  return {
-    ...model,
-    stops: nextStops,
-  };
-}
-
-function parseColorString(
-  value: string,
-): { red: number; green: number; blue: number; alpha: number } | null {
-  const trimmed = value.trim().toLowerCase();
-  if (trimmed === "transparent") {
-    return { red: 0, green: 0, blue: 0, alpha: 0 };
-  }
-
-  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 null;
-
-  return {
-    red: Number.parseFloat(rgba[1]),
-    green: Number.parseFloat(rgba[2]),
-    blue: Number.parseFloat(rgba[3]),
-    alpha: rgba[4] != null ? Number.parseFloat(rgba[4]) : 1,
-  };
-}

package/src/player/components/CompositionThumbnail.test.ts

@@ -1,19 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { buildCompositionThumbnailUrl } from "./CompositionThumbnail";
-
-describe("buildCompositionThumbnailUrl", () => {
-  it("includes selector and occurrence index for precise element thumbnails", () => {
-    expect(
-      buildCompositionThumbnailUrl({
-        previewUrl: "/api/projects/demo/preview",
-        seekTime: 1,
-        duration: 2,
-        selector: ".card",
-        selectorIndex: 2,
-        origin: "http://localhost:3000",
-      }),
-    ).toBe(
-      "http://localhost:3000/api/projects/demo/thumbnail/index.html?t=2.00&v=v2&selector=.card&selectorIndex=2",
-    );
-  });
-});

package/src/utils/clipboard.test.ts

@@ -1,88 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Window } from "happy-dom";
-import { copyTextToClipboard } from "./clipboard";
-
-function installDocument(execCommand: (command: string) => boolean): void {
-  const window = new Window();
-  Object.defineProperty(window.document, "execCommand", {
-    configurable: true,
-    value: execCommand,
-  });
-  vi.stubGlobal("document", window.document);
-}
-
-function installNavigator(
-  writeText: (text: string) => Promise<void>,
-  userAgent = "Mozilla/5.0 Chrome/120.0.0.0 Safari/537.36",
-): void {
-  vi.stubGlobal("navigator", {
-    clipboard: { writeText },
-    userAgent,
-  });
-}
-
-describe("copyTextToClipboard", () => {
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  it("uses the synchronous selection copy path first in Safari", async () => {
-    const execCommand = vi.fn((command: string) => command === "copy");
-    const writeText = vi.fn((_text: string) => Promise.resolve());
-
-    installDocument(execCommand);
-    installNavigator(
-      writeText,
-      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15",
-    );
-
-    await expect(copyTextToClipboard("copy me")).resolves.toBe(true);
-
-    expect(execCommand).toHaveBeenCalledWith("copy");
-    expect(writeText).not.toHaveBeenCalled();
-    expect(document.querySelector("textarea")).toBeNull();
-  });
-
-  it("uses navigator.clipboard first outside Safari", async () => {
-    const execCommand = vi.fn((command: string) => command === "copy");
-    const writeText = vi.fn((_text: string) => Promise.resolve());
-
-    installDocument(execCommand);
-    installNavigator(writeText);
-
-    await expect(copyTextToClipboard("copy me")).resolves.toBe(true);
-
-    expect(writeText).toHaveBeenCalledWith("copy me");
-    expect(execCommand).not.toHaveBeenCalled();
-  });
-
-  it("falls back to selection copy outside Safari when navigator.clipboard fails", async () => {
-    const execCommand = vi.fn((command: string) => command === "copy");
-    const writeText = vi.fn((_text: string) => Promise.reject(new Error("blocked")));
-
-    installDocument(execCommand);
-    installNavigator(writeText);
-
-    await expect(copyTextToClipboard("copy me")).resolves.toBe(true);
-
-    expect(writeText).toHaveBeenCalledWith("copy me");
-    expect(execCommand).toHaveBeenCalledWith("copy");
-  });
-
-  it("reports failure when both copy paths fail", async () => {
-    const execCommand = vi.fn(() => false);
-    const writeText = vi.fn((_text: string) => Promise.reject(new Error("blocked")));
-
-    installDocument(execCommand);
-    installNavigator(
-      writeText,
-      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15",
-    );
-
-    await expect(copyTextToClipboard("copy me")).resolves.toBe(false);
-
-    expect(execCommand).toHaveBeenCalledWith("copy");
-    expect(writeText).toHaveBeenCalledWith("copy me");
-    expect(document.querySelector("textarea")).toBeNull();
-  });
-});

package/src/utils/clipboard.ts

@@ -1,57 +0,0 @@
-function copyWithSelection(text: string): boolean {
-  if (typeof document === "undefined" || !document.body || !document.execCommand) {
-    return false;
-  }
-
-  const textarea = document.createElement("textarea");
-  textarea.value = text;
-  textarea.setAttribute("readonly", "true");
-  textarea.style.position = "fixed";
-  textarea.style.top = "0";
-  textarea.style.left = "0";
-  textarea.style.width = "1px";
-  textarea.style.height = "1px";
-  textarea.style.padding = "0";
-  textarea.style.border = "0";
-  textarea.style.opacity = "0";
-  textarea.style.pointerEvents = "none";
-
-  document.body.appendChild(textarea);
-  textarea.focus({ preventScroll: true });
-  textarea.select();
-  textarea.setSelectionRange(0, text.length);
-
-  try {
-    return document.execCommand("copy");
-  } catch {
-    return false;
-  } finally {
-    document.body.removeChild(textarea);
-  }
-}
-
-function shouldCopyWithSelectionFirst(): boolean {
-  if (typeof navigator === "undefined") return false;
-
-  const userAgent = navigator.userAgent;
-  return /Safari/i.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR/i.test(userAgent);
-}
-
-export async function copyTextToClipboard(text: string): Promise<boolean> {
-  const useSelectionFirst = shouldCopyWithSelectionFirst();
-  if (useSelectionFirst && copyWithSelection(text)) {
-    return true;
-  }
-
-  const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : undefined;
-  if (clipboard?.writeText) {
-    try {
-      await clipboard.writeText(text);
-      return true;
-    } catch {
-      // Fall back below when the browser still allows synchronous copy.
-    }
-  }
-
-  return !useSelectionFirst && copyWithSelection(text);
-}