@sarjallab09/figma-intelligence 1.0.1 → 1.2.0

package/figma-intelligence-layer/src/tools/phase3-generation/url-to-frame/index.ts

@@ -1,401 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────────
-// URL to Frame
-// Captures screenshots of a live URL at breakpoint widths using Playwright,
-// feeds each screenshot through the screen-cloner pipeline, positions the
-// resulting frames side-by-side, and optionally annotates with competitive
-// analysis notes and a DS coverage gap report.
-// ─────────────────────────────────────────────────────────────────────────────
-
-import { chromium, Browser, Page } from "playwright";
-import { getBridge } from "../../../shared/figma-bridge.js";
-import { VisionClient } from "../../../shared/vision-client.js";
-import { decisionLog } from "../../../shared/decision-log.js";
-import { screenClonerHandler } from "../../phase1-vision/screen-cloner/index.js";
-
-// ─── Public types ─────────────────────────────────────────────────────────────
-
-export type Breakpoint = "mobile" | "tablet" | "desktop";
-
-export interface UrlToFrameArgs {
-  url: string;
-  breakpoints: Array<Breakpoint>;
-  cloneMode: "pixel" | "system" | "adaptive";
-  addCompetitorAnnotations?: boolean;
-  dsGapReport?: boolean;
-}
-
-export interface BreakpointCapture {
-  breakpoint: Breakpoint;
-  width: number;
-  frameId: string;
-  screenshot: string;
-  dsCoverage: number;
-}
-
-export interface DsGapEntry {
-  pattern: string;
-  breakpoint: Breakpoint;
-  hasEquivalent: boolean;
-  suggestedComponent: string | null;
-}
-
-export interface UrlToFrameResult {
-  url: string;
-  captures: BreakpointCapture[];
-  frameIds: string[];
-  screenshotsTaken: number;
-  dsCoveragePercentage: number;
-  dsGapReport: DsGapEntry[] | null;
-  competitorAnnotations: string[] | null;
-  logEntryId: string;
-}
-
-// ─── Breakpoint widths ────────────────────────────────────────────────────────
-
-const BREAKPOINT_WIDTHS: Record<Breakpoint, number> = {
-  mobile: 375,
-  tablet: 768,
-  desktop: 1440,
-};
-
-// ─── Playwright screenshot capture ───────────────────────────────────────────
-
-async function captureScreenshot(
-  page: Page,
-  url: string,
-  width: number
-): Promise<string> {
-  await page.setViewportSize({ width, height: 900 });
-  await page.goto(url, { waitUntil: "networkidle", timeout: 30000 });
-
-  // Let lazy-loaded content settle
-  await page.waitForTimeout(1200);
-
-  const buffer = await page.screenshot({
-    type: "png",
-    fullPage: false,
-    clip: { x: 0, y: 0, width, height: 900 },
-  });
-
-  return `data:image/png;base64,${buffer.toString("base64")}`;
-}
-
-// ─── Figma: reposition frames side by side ────────────────────────────────────
-
-function buildRepositionScript(
-  frameIds: string[],
-  frameWidths: number[],
-  gap = 32
-): string {
-  const frameData = JSON.stringify(
-    frameIds.map((id, i) => ({ id, width: frameWidths[i] }))
-  );
-
-  return `
-(async () => {
-  const frameData = ${frameData};
-  const gap = ${gap};
-  let xOffset = 0;
-
-  for (const { id, width } of frameData) {
-    const node = await figma.getNodeByIdAsync(id);
-    if (node) {
-      node.x = xOffset;
-      node.y = 0;
-    }
-    xOffset += width + gap;
-  }
-
-  const nodes = [];
-  for (const d of frameData) {
-    const n = await figma.getNodeByIdAsync(d.id);
-    if (n) nodes.push(n);
-  }
-  if (nodes.length > 0) figma.viewport.scrollAndZoomIntoView(nodes);
-  return { repositioned: nodes.length };
-})();
-`.trim();
-}
-
-// ─── Figma: add sticky annotation ────────────────────────────────────────────
-
-function buildAnnotationScript(frameId: string, text: string, xOffset: number): string {
-  return `
-(async () => {
-  const frame = await figma.getNodeByIdAsync(${JSON.stringify(frameId)});
-  if (!frame) return;
-
-  const sticky = figma.createSticky();
-  sticky.text.characters = ${JSON.stringify(text.slice(0, 500))};
-  sticky.x = frame.x;
-  sticky.y = (frame.absoluteBoundingBox ? frame.absoluteBoundingBox.y + frame.absoluteBoundingBox.height : frame.y + 900) + 24;
-  figma.currentPage.appendChild(sticky);
-  return { stickyId: sticky.id };
-})();
-`.trim();
-}
-
-// ─── Vision analysis for competitor annotations ───────────────────────────────
-
-async function analyzeForAnnotations(
-  screenshots: Array<{ breakpoint: Breakpoint; screenshot: string }>,
-  vision: VisionClient
-): Promise<string[]> {
-  const annotations: string[] = [];
-
-  for (const { breakpoint, screenshot } of screenshots) {
-    const result = await vision.analyze(
-      screenshot,
-      `You are a competitive UX analyst reviewing this ${breakpoint} screenshot.
-Identify:
-1. Key UX patterns used (navigation, CTAs, information architecture)
-2. Strengths of this design approach
-3. Weaknesses or friction points
-4. Notable techniques or innovations
-
-Return a concise bullet-point analysis (max 6 bullets). Start each bullet with a category tag like [STRENGTH], [WEAKNESS], [PATTERN], or [TECHNIQUE].`
-    );
-
-    const prefix = `[${breakpoint.toUpperCase()} Competitive Analysis]\n`;
-    annotations.push(prefix + result.rawAnalysis);
-  }
-
-  return annotations;
-}
-
-// ─── DS gap analysis ─────────────────────────────────────────────────────────
-
-async function computeDsGapReport(
-  screenshots: Array<{ breakpoint: Breakpoint; screenshot: string }>,
-  vision: VisionClient
-): Promise<DsGapEntry[]> {
-  const gaps: DsGapEntry[] = [];
-
-  for (const { breakpoint, screenshot } of screenshots) {
-    const result = await vision.analyze(
-      screenshot,
-      `Analyze this UI screenshot and identify all distinct UI patterns/components present.
-For each pattern, output a JSON array item:
-{ "pattern": "pattern name", "category": "navigation|form|content|feedback|layout|data" }
-
-Return ONLY a valid JSON array, no markdown.`
-    );
-
-    let patterns: Array<{ pattern: string; category: string }> = [];
-    try {
-      const jsonMatch = result.rawAnalysis.match(/```(?:json)?\n?([\s\S]*?)\n?```/);
-      patterns = JSON.parse(jsonMatch ? jsonMatch[1] : result.rawAnalysis);
-    } catch {
-      // If parsing fails, extract pattern names from raw analysis
-      const lines = result.rawAnalysis.split("\n").filter((l) => l.trim().length > 2);
-      patterns = lines.slice(0, 10).map((l) => ({
-        pattern: l.replace(/^[-*•]\s*/, "").trim(),
-        category: "content",
-      }));
-    }
-
-    for (const { pattern } of patterns) {
-      // Heuristic: check if DS likely has an equivalent
-      const dsKeywords = [
-        "button",
-        "input",
-        "card",
-        "nav",
-        "modal",
-        "badge",
-        "tab",
-        "list",
-        "table",
-        "form",
-        "header",
-        "footer",
-        "icon",
-        "avatar",
-        "chip",
-        "toast",
-        "tooltip",
-      ];
-      const lp = pattern.toLowerCase();
-      const hasEquivalent = dsKeywords.some((kw) => lp.includes(kw));
-      const suggestedComponent = hasEquivalent
-        ? pattern
-            .split(" ")
-            .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-            .join("")
-        : null;
-
-      gaps.push({ pattern, breakpoint, hasEquivalent, suggestedComponent });
-    }
-  }
-
-  return gaps;
-}
-
-// ─── Coverage calculation ─────────────────────────────────────────────────────
-
-function computeCoveragePercentage(captures: BreakpointCapture[]): number {
-  if (captures.length === 0) return 0;
-  const avg = captures.reduce((sum, c) => sum + c.dsCoverage, 0) / captures.length;
-  return Math.round(avg * 100) / 100;
-}
-
-// ─── Main handler ─────────────────────────────────────────────────────────────
-
-export async function urlToFrameHandler(
-  args: UrlToFrameArgs
-): Promise<UrlToFrameResult> {
-  const {
-    url,
-    breakpoints,
-    cloneMode,
-    addCompetitorAnnotations = false,
-    dsGapReport = false,
-  } = args;
-
-  if (!url) throw new Error("urlToFrame: `url` is required.");
-  if (!breakpoints || breakpoints.length === 0) {
-    throw new Error("urlToFrame: `breakpoints` must be a non-empty array.");
-  }
-
-  const bridge = await getBridge();
-  const vision = new VisionClient();
-
-  // 1. Launch Playwright and capture screenshots
-  let browser: Browser | null = null;
-  const rawScreenshots: Array<{
-    breakpoint: Breakpoint;
-    width: number;
-    screenshot: string;
-  }> = [];
-
-  try {
-    browser = await chromium.launch({ headless: true });
-    const context = await browser.newContext({
-      userAgent:
-        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
-    });
-    const page = await context.newPage();
-
-    for (const bp of breakpoints) {
-      const width = BREAKPOINT_WIDTHS[bp];
-      const screenshot = await captureScreenshot(page, url, width);
-      rawScreenshots.push({ breakpoint: bp, width, screenshot });
-    }
-
-    await context.close();
-  } catch (err) {
-    throw new Error(
-      `urlToFrame: Playwright capture failed — ${err instanceof Error ? err.message : String(err)}`
-    );
-  } finally {
-    if (browser) await browser.close();
-  }
-
-  // 2. Run screen-cloner pipeline for each screenshot
-  const captures: BreakpointCapture[] = [];
-
-  for (const { breakpoint, width, screenshot } of rawScreenshots) {
-    try {
-      const clonerResult = await screenClonerHandler({
-        image: screenshot,
-        cloneMode,
-        frameWidth: width,
-        annotateUnmatched: false,
-      });
-
-      const dsCoverage =
-        clonerResult.zones > 0
-          ? (clonerResult.matched / clonerResult.zones) * 100
-          : 0;
-
-      captures.push({
-        breakpoint,
-        width,
-        frameId: clonerResult.frameId,
-        screenshot,
-        dsCoverage: Math.round(dsCoverage * 10) / 10,
-      });
-    } catch (err) {
-      console.error(
-        `urlToFrame: screen-cloner failed for ${breakpoint}: ${err instanceof Error ? err.message : String(err)}`
-      );
-    }
-  }
-
-  if (captures.length === 0) {
-    throw new Error("urlToFrame: No frames were created — all screen-cloner calls failed.");
-  }
-
-  // 3. Reposition frames side by side with 32px gap
-  const frameIds = captures.map((c) => c.frameId);
-  const frameWidths = captures.map((c) => c.width);
-  const repositionScript = buildRepositionScript(frameIds, frameWidths, 32);
-  await bridge.execute(repositionScript);
-
-  // 4. Optionally add competitor annotations
-  let competitorAnnotations: string[] | null = null;
-  if (addCompetitorAnnotations) {
-    const screenshotsForAnalysis = rawScreenshots.map((s) => ({
-      breakpoint: s.breakpoint,
-      screenshot: s.screenshot,
-    }));
-    competitorAnnotations = await analyzeForAnnotations(screenshotsForAnalysis, vision);
-
-    let xOffset = 0;
-    for (let i = 0; i < captures.length; i++) {
-      const annotation = competitorAnnotations[i] ?? "";
-      if (annotation) {
-        const annotationScript = buildAnnotationScript(
-          captures[i].frameId,
-          annotation,
-          xOffset
-        );
-        await bridge.execute(annotationScript);
-      }
-      xOffset += captures[i].width + 32;
-    }
-  }
-
-  // 5. Optionally compute DS gap report
-  let gapReport: DsGapEntry[] | null = null;
-  if (dsGapReport) {
-    const screenshotsForGap = rawScreenshots.map((s) => ({
-      breakpoint: s.breakpoint,
-      screenshot: s.screenshot,
-    }));
-    gapReport = await computeDsGapReport(screenshotsForGap, vision);
-  }
-
-  // 6. Compute overall DS coverage
-  const dsCoveragePercentage = computeCoveragePercentage(captures);
-
-  // 7. Log the decision
-  const logEntry = await decisionLog.log({
-    tool: "url-to-frame",
-    nodeIds: frameIds,
-    rationale: `Captured ${captures.length} breakpoint(s) from "${url}" and cloned into Figma frames using "${cloneMode}" mode. Breakpoints: ${captures.map((c) => `${c.breakpoint} (${c.width}px)`).join(", ")}. Overall DS coverage: ${dsCoveragePercentage}%. Competitor annotations: ${addCompetitorAnnotations}. DS gap report: ${dsGapReport}.`,
-    tokens: [],
-    reversible: true,
-    metadata: {
-      url,
-      breakpoints,
-      cloneMode,
-      addCompetitorAnnotations,
-      dsGapReport,
-      screenshotsTaken: captures.length,
-      dsCoveragePercentage,
-      gapEntries: gapReport?.length ?? 0,
-    },
-  });
-
-  return {
-    url,
-    captures,
-    frameIds,
-    screenshotsTaken: captures.length,
-    dsCoveragePercentage,
-    dsGapReport: gapReport,
-    competitorAnnotations,
-    logEntryId: logEntry.id,
-  };
-}

package/figma-intelligence-layer/src/tools/phase4-sync/animation-specifier/code-generators/css-animations.ts

@@ -1,68 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────────
-// CSS Animations Code Generator
-// Generates @keyframes and animation CSS from AnimationSpec entries.
-// ─────────────────────────────────────────────────────────────────────────────
-
-import type { AnimationSpec } from "./framer-motion.js";
-
-const EASING_CSS_MAP: Record<string, string> = {
-  EASE_IN:     "cubic-bezier(0.4, 0, 1, 1)",
-  EASE_OUT:    "cubic-bezier(0, 0, 0.2, 1)",
-  EASE_IN_OUT: "cubic-bezier(0.4, 0, 0.2, 1)",
-  LINEAR:      "cubic-bezier(0, 0, 1, 1)",
-  SPRING:      "cubic-bezier(0.4, 0, 0.2, 1)",
-};
-
-function getSlideAxis(type: string, dir: string): { axis: "x" | "y"; sign: number } {
-  const isOut = type === "SLIDE_OUT" || type === "MOVE_OUT";
-  if (dir === "LEFT")  return { axis: "x", sign: isOut ? -1 :  1 };
-  if (dir === "RIGHT") return { axis: "x", sign: isOut ?  1 : -1 };
-  if (dir === "UP")    return { axis: "y", sign: isOut ? -1 :  1 };
-  return { axis: "y", sign: isOut ? 1 : -1 };
-}
-
-export function generateCSS(specs: AnimationSpec[]): string {
-  const lines: string[] = [
-    "/* Generated by figma-intelligence-layer animation-specifier */",
-    "",
-  ];
-
-  for (const spec of specs) {
-    const type = spec.type.toUpperCase();
-    const dir = spec.direction.toUpperCase();
-    const name = spec.name;
-    const durationMs = Math.round(spec.duration * 1000);
-    const easingCss = EASING_CSS_MAP[spec.easing] ?? "ease-in-out";
-
-    if (type === "DISSOLVE") {
-      lines.push(`@keyframes ${name}FadeIn {`);
-      lines.push(`  from { opacity: 0; }`);
-      lines.push(`  to   { opacity: 1; }`);
-      lines.push(`}`);
-      lines.push(`.${name} { animation: ${name}FadeIn ${durationMs}ms ${easingCss} forwards; }`);
-    } else if (type === "SMART_ANIMATE") {
-      lines.push(`@keyframes ${name}Morph {`);
-      lines.push(`  from { opacity: 0; transform: scale(0.95); }`);
-      lines.push(`  to   { opacity: 1; transform: scale(1); }`);
-      lines.push(`}`);
-      lines.push(`.${name} { animation: ${name}Morph ${durationMs}ms ${easingCss} forwards; }`);
-    } else if (["PUSH", "SLIDE_IN", "SLIDE_OUT", "MOVE_IN", "MOVE_OUT"].includes(type)) {
-      const { axis, sign } = getSlideAxis(type, dir);
-      const translateFn = axis === "x" ? "translateX" : "translateY";
-      lines.push(`@keyframes ${name}SlideIn {`);
-      lines.push(`  from { opacity: 0; transform: ${translateFn}(${sign * 100}%); }`);
-      lines.push(`  to   { opacity: 1; transform: ${translateFn}(0); }`);
-      lines.push(`}`);
-      lines.push(`.${name} { animation: ${name}SlideIn ${durationMs}ms ${easingCss} forwards; }`);
-    } else {
-      lines.push(`@keyframes ${name} {`);
-      lines.push(`  from { opacity: 0; }`);
-      lines.push(`  to   { opacity: 1; }`);
-      lines.push(`}`);
-      lines.push(`.${name} { animation: ${name} ${durationMs}ms ${easingCss} forwards; }`);
-    }
-    lines.push("");
-  }
-
-  return lines.join("\n");
-}

package/figma-intelligence-layer/src/tools/phase4-sync/animation-specifier/code-generators/framer-motion.ts

@@ -1,78 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────────
-// Framer Motion Code Generator
-// Generates Framer Motion `Variants` objects from AnimationSpec entries.
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface AnimationSpec {
-  name: string;
-  fromId: string;
-  toId: string;
-  duration: number;
-  easing: string;
-  easingValues: number[];
-  direction: string;
-  type: string;
-  isSpring: boolean;
-  springStiffness?: number;
-  springDamping?: number;
-}
-
-function getClosedVariant(spec: AnimationSpec): Record<string, unknown> {
-  const closed: Record<string, unknown> = { opacity: 0 };
-  const type = spec.type.toUpperCase();
-
-  if (type === "SMART_ANIMATE") {
-    closed["scale"] = 0.96;
-  } else if (type === "PUSH" || type === "SLIDE_IN" || type === "MOVE_IN") {
-    const dir = spec.direction.toUpperCase();
-    if (dir === "LEFT") closed["x"] = -100;
-    else if (dir === "RIGHT") closed["x"] = 100;
-    else if (dir === "UP") closed["y"] = -100;
-    else closed["y"] = 100;
-  }
-
-  return closed;
-}
-
-export function generateFramerMotion(specs: AnimationSpec[]): string {
-  const lines: string[] = [
-    "// Generated by figma-intelligence-layer animation-specifier",
-    'import { Variants } from "framer-motion";',
-    "",
-  ];
-
-  for (const spec of specs) {
-    const varName = `${spec.name}Variants`;
-    const closedVariant = getClosedVariant(spec);
-    const openVariant: Record<string, unknown> = { opacity: 1 };
-
-    for (const key of Object.keys(closedVariant)) {
-      if (key !== "opacity" && key !== "scale") openVariant[key] = 0;
-      if (key === "scale") openVariant[key] = 1;
-    }
-
-    let transition: Record<string, unknown>;
-    if (spec.isSpring) {
-      transition = {
-        type: "spring",
-        stiffness: spec.springStiffness ?? 300,
-        damping: spec.springDamping ?? 30,
-      };
-    } else {
-      transition = { duration: spec.duration, ease: spec.easingValues };
-    }
-
-    lines.push(`export const ${varName}: Variants = {`);
-    lines.push(`  closed: ${JSON.stringify(closedVariant)},`);
-    lines.push(`  open: {`);
-    lines.push(`    ...${JSON.stringify(openVariant)},`);
-    lines.push(`    transition: ${JSON.stringify(transition)},`);
-    lines.push(`  },`);
-    lines.push(`};`);
-    lines.push("");
-    lines.push(`// Usage: <motion.div variants={${varName}} initial="closed" animate="open" />`);
-    lines.push("");
-  }
-
-  return lines.join("\n");
-}

package/figma-intelligence-layer/src/tools/phase4-sync/animation-specifier/code-generators/swift-animations.ts

@@ -1,93 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────────
-// Swift Animations Code Generator
-// Generates SwiftUI and UIKit animation code from AnimationSpec entries.
-// ─────────────────────────────────────────────────────────────────────────────
-
-import type { AnimationSpec } from "./framer-motion.js";
-
-const EASING_SWIFT_MAP: Record<string, string> = {
-  EASE_IN:     ".easeIn",
-  EASE_OUT:    ".easeOut",
-  EASE_IN_OUT: ".easeInOut",
-  LINEAR:      ".linear",
-  SPRING:      ".spring(response: 0.4, dampingFraction: 0.7)",
-};
-
-export function generateSwift(specs: AnimationSpec[]): string {
-  const lines: string[] = [
-    "// Generated by figma-intelligence-layer animation-specifier",
-    "import SwiftUI",
-    "import UIKit",
-    "",
-    "// MARK: - SwiftUI Animations",
-    "",
-  ];
-
-  for (const spec of specs) {
-    const type = spec.type.toUpperCase();
-    const dir = spec.direction.toUpperCase();
-    const swiftEasing = EASING_SWIFT_MAP[spec.easing] ?? ".easeInOut";
-    const durationStr = spec.duration.toFixed(3);
-    const name = spec.name;
-
-    lines.push(`// Transition: ${spec.fromId} → ${spec.toId}`);
-
-    if (spec.isSpring) {
-      lines.push(`func ${name}Animation(isVisible: Binding<Bool>) -> some View {`);
-      lines.push(`  content`);
-      lines.push(`    .opacity(isVisible.wrappedValue ? 1 : 0)`);
-      lines.push(`    .animation(.spring(response: ${durationStr}, dampingFraction: 0.7), value: isVisible.wrappedValue)`);
-      lines.push(`}`);
-    } else if (type === "DISSOLVE") {
-      lines.push(`func ${name}Animation(isVisible: Binding<Bool>) -> some View {`);
-      lines.push(`  content`);
-      lines.push(`    .opacity(isVisible.wrappedValue ? 1 : 0)`);
-      lines.push(`    .animation(.easeInOut(duration: ${durationStr}), value: isVisible.wrappedValue)`);
-      lines.push(`}`);
-    } else if (type === "SMART_ANIMATE") {
-      lines.push(`func ${name}Animation(isVisible: Binding<Bool>) -> some View {`);
-      lines.push(`  content`);
-      lines.push(`    .opacity(isVisible.wrappedValue ? 1 : 0)`);
-      lines.push(`    .scaleEffect(isVisible.wrappedValue ? 1 : 0.95)`);
-      lines.push(`    .animation(${swiftEasing}(duration: ${durationStr}), value: isVisible.wrappedValue)`);
-      lines.push(`}`);
-    } else if (["PUSH", "SLIDE_IN", "SLIDE_OUT", "MOVE_IN", "MOVE_OUT"].includes(type)) {
-      const isHorizontal = dir === "LEFT" || dir === "RIGHT";
-      const offsetEdge = dir === "LEFT" ? "-UIScreen.main.bounds.width"
-        : dir === "RIGHT" ? "UIScreen.main.bounds.width"
-        : dir === "UP" ? "-UIScreen.main.bounds.height"
-        : "UIScreen.main.bounds.height";
-
-      lines.push(`func ${name}Animation(isVisible: Binding<Bool>) -> some View {`);
-      lines.push(`  content`);
-      lines.push(`    .offset(${isHorizontal ? "x" : "y"}: isVisible.wrappedValue ? 0 : ${offsetEdge})`);
-      lines.push(`    .opacity(isVisible.wrappedValue ? 1 : 0)`);
-      lines.push(`    .animation(${swiftEasing}(duration: ${durationStr}), value: isVisible.wrappedValue)`);
-      lines.push(`}`);
-    } else {
-      lines.push(`func ${name}Animation(isVisible: Binding<Bool>) -> some View {`);
-      lines.push(`  content`);
-      lines.push(`    .opacity(isVisible.wrappedValue ? 1 : 0)`);
-      lines.push(`    .animation(${swiftEasing}(duration: ${durationStr}), value: isVisible.wrappedValue)`);
-      lines.push(`}`);
-    }
-
-    lines.push("");
-
-    // UIKit equivalent
-    lines.push(`// UIKit equivalent for ${name}`);
-    lines.push(`func ${name}UIKitAnimate(view: UIView, isShowing: Bool) {`);
-    if (spec.isSpring) {
-      lines.push(`  let animator = UIViewPropertyAnimator(duration: ${durationStr}, dampingRatio: 0.7) {`);
-    } else {
-      lines.push(`  let animator = UIViewPropertyAnimator(duration: ${durationStr}, curve: ${swiftEasing}) {`);
-    }
-    lines.push(`    view.alpha = isShowing ? 1 : 0`);
-    lines.push(`  }`);
-    lines.push(`  animator.startAnimation()`);
-    lines.push(`}`);
-    lines.push("");
-  }
-
-  return lines.join("\n");
-}