@hyperframes/studio 0.5.5 → 0.6.0-alpha.1

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

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { Window } from "happy-dom";
+import type { DomEditLayerItem } from "./domEditing";
+import { getTimelineLayerPanelSummary } from "./TimelineLayerPanel";
+
+function createLayer(overrides: Partial<DomEditLayerItem> = {}): DomEditLayerItem {
+  const window = new Window();
+  return {
+    childCount: 0,
+    depth: 0,
+    element: window.document.createElement(overrides.tagName ?? "div"),
+    key: "layer",
+    label: "Layer",
+    sourceFile: "index.html",
+    tagName: "div",
+    ...overrides,
+  };
+}
+
+describe("TimelineLayerPanel", () => {
+  it("describes a leaf media clip as a single selectable layer", () => {
+    expect(
+      getTimelineLayerPanelSummary([
+        createLayer({ key: "alpha-video", label: "Alpha Video", tagName: "video" }),
+      ]),
+    ).toBe("Single selectable media layer");
+  });
+
+  it("describes real nested layers with the nested count", () => {
+    expect(
+      getTimelineLayerPanelSummary([
+        createLayer({ key: "root", childCount: 2 }),
+        createLayer({ key: "title", depth: 1 }),
+        createLayer({ key: "subtitle", depth: 1 }),
+      ]),
+    ).toBe("2 nested selectable layers");
+  });
+
+  it("keeps empty layer lists explicit", () => {
+    expect(getTimelineLayerPanelSummary([])).toBe("No selectable layers");
+  });
+});

package/src/components/editor/TimelineLayerPanel.tsx

@@ -0,0 +1,113 @@
+import { memo } from "react";
+import type { DomEditLayerItem } from "./domEditing";
+
+interface TimelineLayerPanelProps {
+  clipLabel: string;
+  layers: DomEditLayerItem[];
+  selectedLayerKey: string | null;
+  onSelectLayer: (layer: DomEditLayerItem) => void;
+  onClose: () => void;
+}
+
+const MEDIA_LAYER_TAGS = new Set(["audio", "canvas", "img", "picture", "svg", "video"]);
+
+export function getTimelineLayerPanelSummary(layers: readonly DomEditLayerItem[]): string {
+  const childCount = Math.max(0, layers.length - 1);
+  if (childCount > 0) {
+    return `${childCount} nested selectable layer${childCount === 1 ? "" : "s"}`;
+  }
+  const layer = layers[0];
+  if (!layer) return "No selectable layers";
+  return MEDIA_LAYER_TAGS.has(layer.tagName.trim().toLowerCase())
+    ? "Single selectable media layer"
+    : "Single selectable layer";
+}
+
+export const TimelineLayerPanel = memo(function TimelineLayerPanel({
+  clipLabel,
+  layers,
+  selectedLayerKey,
+  onSelectLayer,
+  onClose,
+}: TimelineLayerPanelProps) {
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-950">
+      <div className="flex items-start justify-between gap-3 border-b border-white/10 px-3 py-3">
+        <div className="min-w-0">
+          <div className="text-[9px] font-semibold uppercase tracking-[0.18em] text-neutral-500">
+            Clip layers
+          </div>
+          <div className="mt-1 truncate text-sm font-semibold text-neutral-100">{clipLabel}</div>
+        </div>
+        <button
+          type="button"
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={onClose}
+          className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/20 text-neutral-500 transition-colors hover:border-white/20 hover:text-neutral-200"
+          aria-label="Close clip layers"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            aria-hidden="true"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+      <div className="border-b border-white/10 px-3 py-2 text-[11px] text-neutral-500">
+        {getTimelineLayerPanelSummary(layers)}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto py-1">
+        {layers.map((layer) => {
+          const selected = layer.key === selectedLayerKey;
+          return (
+            <button
+              key={layer.key}
+              type="button"
+              data-timeline-layer-row={layer.key}
+              onPointerDown={(event) => {
+                event.stopPropagation();
+                onSelectLayer(layer);
+              }}
+              onClick={(event) => {
+                event.stopPropagation();
+                onSelectLayer(layer);
+              }}
+              className={`group flex w-full items-center gap-2 px-2.5 py-1.5 text-left transition-colors ${
+                selected
+                  ? "bg-studio-accent/14 text-studio-accent"
+                  : "text-neutral-300 hover:bg-white/[0.04] hover:text-neutral-100"
+              }`}
+              style={{ paddingLeft: 10 + layer.depth * 14 }}
+            >
+              <span
+                className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md border text-[9px] font-bold uppercase ${
+                  selected
+                    ? "border-studio-accent/50 bg-studio-accent/18"
+                    : "border-white/10 bg-black/20 text-neutral-500 group-hover:text-neutral-300"
+                }`}
+              >
+                {layer.tagName.slice(0, 2)}
+              </span>
+              <span className="min-w-0 flex-1 truncate text-xs font-medium">{layer.label}</span>
+              {layer.childCount > 0 && (
+                <span className="rounded-full border border-white/10 bg-black/25 px-1.5 py-0.5 text-[9px] font-semibold tabular-nums text-neutral-500">
+                  {layer.childCount}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,175 @@
+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 });
+}