@hyperframes/studio 0.5.5 → 0.6.0-alpha.2

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

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { resolveFloatingPanelPosition } from "./floatingPanel";
+
+describe("resolveFloatingPanelPosition", () => {
+  it("places the panel below the anchor when there is space", () => {
+    expect(
+      resolveFloatingPanelPosition(
+        { left: 100, top: 100, right: 220, bottom: 140, width: 120, height: 40 },
+        { width: 800, height: 600 },
+        { width: 280, height: 220 },
+      ),
+    ).toMatchObject({ top: 148, placement: "bottom" });
+  });
+
+  it("places the panel above the anchor when the bottom would be clipped", () => {
+    expect(
+      resolveFloatingPanelPosition(
+        { left: 100, top: 500, right: 220, bottom: 540, width: 120, height: 40 },
+        { width: 800, height: 600 },
+        { width: 280, height: 220 },
+      ),
+    ).toMatchObject({ top: 272, placement: "top" });
+  });
+
+  it("clamps the panel horizontally inside the viewport", () => {
+    expect(
+      resolveFloatingPanelPosition(
+        { left: 760, top: 100, right: 800, bottom: 140, width: 40, height: 40 },
+        { width: 800, height: 600 },
+        { width: 280, height: 220 },
+      ).left,
+    ).toBe(508);
+  });
+});

package/src/components/editor/floatingPanel.ts

@@ -0,0 +1,54 @@
+export interface FloatingRect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+export interface FloatingSize {
+  width: number;
+  height: number;
+}
+
+export interface FloatingPosition {
+  left: number;
+  top: number;
+  placement: "top" | "bottom";
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function resolveFloatingPanelPosition(
+  anchor: FloatingRect,
+  viewport: FloatingSize,
+  panel: FloatingSize,
+  options?: { offset?: number; margin?: number },
+): FloatingPosition {
+  const offset = options?.offset ?? 8;
+  const margin = options?.margin ?? 12;
+  const maxLeft = Math.max(margin, viewport.width - panel.width - margin);
+  const preferredLeft = anchor.left + anchor.width / 2 - panel.width / 2;
+  const left = clamp(preferredLeft, margin, maxLeft);
+  const belowTop = anchor.bottom + offset;
+  const aboveTop = anchor.top - panel.height - offset;
+  const fitsBelow = belowTop + panel.height <= viewport.height - margin;
+  const fitsAbove = aboveTop >= margin;
+
+  if (fitsBelow || !fitsAbove) {
+    return {
+      left,
+      top: clamp(belowTop, margin, Math.max(margin, viewport.height - panel.height - margin)),
+      placement: "bottom",
+    };
+  }
+
+  return {
+    left,
+    top: clamp(aboveTop, margin, Math.max(margin, viewport.height - panel.height - margin)),
+    placement: "top",
+  };
+}

package/src/components/editor/fontAssets.ts

@@ -0,0 +1,32 @@
+export interface ImportedFontAsset {
+  family: string;
+  path: string;
+  url: string;
+}
+
+const FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
+const FONT_STYLE_SUFFIX_RE =
+  /\s+(thin|extralight|extra light|light|regular|roman|medium|semibold|semi bold|bold|extrabold|extra bold|black|italic|oblique|variable)$/i;
+
+export function cssString(value: string): string {
+  return JSON.stringify(value);
+}
+
+export function fontFamilyFromAssetPath(path: string): string {
+  const fileName = decodeURIComponent(path.split(/[\\/]/).pop() ?? path).replace(FONT_EXT_RE, "");
+  let family = fileName
+    .replace(/[_-]+/g, " ")
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/\s+/g, " ")
+    .trim();
+
+  while (FONT_STYLE_SUFFIX_RE.test(family)) {
+    family = family.replace(FONT_STYLE_SUFFIX_RE, "").trim();
+  }
+
+  return family || fileName;
+}
+
+export function importedFontFaceCss(asset: ImportedFontAsset, url: string = asset.url): string {
+  return `@font-face { font-family: ${cssString(asset.family)}; src: url(${cssString(url)}); font-display: swap; }`;
+}

package/src/components/editor/fontCatalog.ts

@@ -0,0 +1,126 @@
+export const POPULAR_GOOGLE_FONT_FAMILIES = [
+  "ABeeZee",
+  "Abel",
+  "Abril Fatface",
+  "Alegreya",
+  "Alegreya Sans",
+  "Anton",
+  "Archivo",
+  "Archivo Black",
+  "Arimo",
+  "Assistant",
+  "Barlow",
+  "Barlow Condensed",
+  "Bebas Neue",
+  "Bitter",
+  "Bricolage Grotesque",
+  "Cabin",
+  "Cardo",
+  "Catamaran",
+  "Caveat",
+  "Chivo",
+  "Cormorant Garamond",
+  "Crimson Text",
+  "Dancing Script",
+  "DM Sans",
+  "DM Serif Display",
+  "Domine",
+  "EB Garamond",
+  "Exo 2",
+  "Figtree",
+  "Fira Code",
+  "Fira Sans",
+  "Fraunces",
+  "Fredoka",
+  "IBM Plex Mono",
+  "IBM Plex Sans",
+  "IBM Plex Serif",
+  "Inconsolata",
+  "Instrument Sans",
+  "Instrument Serif",
+  "Inter",
+  "JetBrains Mono",
+  "Josefin Sans",
+  "Jost",
+  "Kanit",
+  "Karla",
+  "Lato",
+  "League Gothic",
+  "Lexend",
+  "Libre Baskerville",
+  "Libre Franklin",
+  "Lora",
+  "Manrope",
+  "Merriweather",
+  "Montserrat",
+  "Mukta",
+  "Mulish",
+  "Newsreader",
+  "Noto Sans",
+  "Noto Sans JP",
+  "Noto Serif",
+  "Nunito",
+  "Nunito Sans",
+  "Open Sans",
+  "Oswald",
+  "Outfit",
+  "Overpass",
+  "Pacifico",
+  "Pathway Extreme",
+  "Permanent Marker",
+  "Playfair Display",
+  "Plus Jakarta Sans",
+  "Poppins",
+  "Prata",
+  "PT Sans",
+  "PT Serif",
+  "Public Sans",
+  "Quicksand",
+  "Raleway",
+  "Red Hat Display",
+  "Roboto",
+  "Roboto Condensed",
+  "Roboto Mono",
+  "Roboto Serif",
+  "Rubik",
+  "Schibsted Grotesk",
+  "Signika",
+  "Source Code Pro",
+  "Source Sans 3",
+  "Source Serif 4",
+  "Space Grotesk",
+  "Space Mono",
+  "Spectral",
+  "Sora",
+  "Syne",
+  "Teko",
+  "Titillium Web",
+  "Ubuntu",
+  "Ubuntu Mono",
+  "Unbounded",
+  "Urbanist",
+  "Varela Round",
+  "Work Sans",
+  "Young Serif",
+  "Zilla Slab",
+] as const;
+
+export const COMMON_LOCAL_FONT_FAMILIES = [
+  "TT Norms Pro",
+  "SF Pro Display",
+  "SF Pro Text",
+  "Avenir",
+  "Avenir Next",
+  "Helvetica Neue",
+  "Arial",
+  "Georgia",
+  "Times New Roman",
+  "Menlo",
+  "Monaco",
+  "Courier New",
+] as const;
+
+export function googleFontStylesheetUrl(family: string): string {
+  const encodedFamily = encodeURIComponent(family.trim()).replace(/%20/g, "+");
+  return `https://fonts.googleapis.com/css2?family=${encodedFamily}:wght@300;400;500;600;700;800;900&display=swap`;
+}

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

@@ -0,0 +1,89 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildDefaultGradientModel,
+  insertGradientStop,
+  parseGradient,
+  serializeGradient,
+} from "./gradientValue";
+
+describe("parseGradient", () => {
+  it("parses linear gradients", () => {
+    expect(
+      parseGradient("linear-gradient(135deg, rgba(15, 23, 42, 0.58), rgba(255, 255, 255, 0.04))"),
+    ).toMatchObject({
+      kind: "linear",
+      repeating: false,
+      angle: 135,
+      stops: [
+        { color: "rgba(15, 23, 42, 0.58)", position: 0 },
+        { color: "rgba(255, 255, 255, 0.04)", position: 100 },
+      ],
+    });
+  });
+
+  it("parses radial gradients", () => {
+    expect(
+      parseGradient("radial-gradient(circle closest-side at 20% 35%, #ff0000 10%, #0000ff 90%)"),
+    ).toMatchObject({
+      kind: "radial",
+      shape: "circle",
+      radialSize: "closest-side",
+      centerX: 20,
+      centerY: 35,
+    });
+  });
+
+  it("parses conic gradients", () => {
+    expect(
+      parseGradient("conic-gradient(from 45deg at 40% 60%, #111111 0%, #ffffff 100%)"),
+    ).toMatchObject({
+      kind: "conic",
+      angle: 45,
+      centerX: 40,
+      centerY: 60,
+    });
+  });
+
+  it("parses repeating gradients", () => {
+    expect(
+      parseGradient("repeating-linear-gradient(90deg, #000000 0%, #ffffff 50%)"),
+    ).toMatchObject({
+      kind: "linear",
+      repeating: true,
+      angle: 90,
+    });
+  });
+});
+
+describe("serializeGradient", () => {
+  it("serializes default gradient models", () => {
+    expect(serializeGradient(buildDefaultGradientModel("rgba(60, 230, 172, 0.18)"))).toBe(
+      "linear-gradient(135deg, rgba(60, 230, 172, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%)",
+    );
+  });
+
+  it("round-trips parsed gradients", () => {
+    const parsed = parseGradient(
+      "repeating-conic-gradient(from 90deg at 25% 75%, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%)",
+    );
+    expect(parsed).not.toBeNull();
+    expect(serializeGradient(parsed!)).toBe(
+      "repeating-conic-gradient(from 90deg at 25% 75%, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%)",
+    );
+  });
+});
+
+describe("insertGradientStop", () => {
+  it("inserts a stop at the clicked position with an interpolated color", () => {
+    const parsed = parseGradient("linear-gradient(90deg, #000000 0%, #ffffff 100%)");
+    expect(parsed).not.toBeNull();
+
+    expect(insertGradientStop(parsed!, 25)).toMatchObject({
+      stops: [
+        { color: "#000000", position: 0 },
+        { color: "#404040", position: 25 },
+        { color: "#ffffff", position: 100 },
+      ],
+    });
+  });
+});