@pixel-point/toolcraft 0.0.8 → 0.0.11

package/templates/runtime/contracts/decision-contracts.test.ts

@@ -24,7 +24,7 @@ describe("Toolcraft template decision contract", () => {
     for (const rule of TOOLCRAFT_DECISION_CONTRACT) {
       expect(rule.id).toMatch(/^[a-z0-9-]+$/);
       expect(rule.area).toMatch(
-        /^(runtime-shell|canvas|panels|layers|timeline|controls|renderer|reference-clone|acceptance|performance|persistence|workflow)$/,
+        /^(runtime-shell|canvas|panels|layers|timeline|controls|renderer|reference-analysis|reference-clone|acceptance|performance|persistence|workflow)$/,
       );
       expect(rule.title.trim().length).toBeGreaterThan(0);
       expect(rule.currentConstraint.trim().length).toBeGreaterThan(0);
@@ -40,6 +40,11 @@ describe("Toolcraft template decision contract", () => {
     expect(rule?.verdict).toBe("move-to-validator");
     expect(rule?.enforcement).toContain("browser-helper");
     expect(rule?.desiredBehavior).toMatch(/product result/i);
+    expect(rule?.desiredBehavior).toMatch(/uploaded or imported content is part/i);
+    expect(rule?.desiredBehavior).toMatch(/fake sample output/i);
+    expect(rule?.desiredBehavior).toMatch(/agent-invented preset modes/i);
+    expect(rule?.desiredBehavior).toMatch(/worklog records that evidence/i);
+    expect(rule?.currentConstraint).toMatch(/uploaded\/imported source-material flows/i);
   });
 
   it("keeps runtime shell bypass prevention in validators, not only docs", () => {
@@ -80,6 +85,36 @@ describe("Toolcraft template decision contract", () => {
     expect(rule?.enforcement).toContain("performance-validator");
   });
 
+  it("requires reference clone functionality to be inventoried and acceptance-backed", () => {
+    const rule = getToolcraftDecisionRule("reference-clone-source-of-truth");
+
+    expect(rule?.level).toBe("invariant");
+    expect(rule?.desiredBehavior).toMatch(/referenceStudy evidence/i);
+    expect(rule?.desiredBehavior).toMatch(/running the original or restoring it locally/i);
+    expect(rule?.desiredBehavior).toMatch(/reference feature inventory/i);
+    expect(rule?.desiredBehavior).toMatch(/feature-level behavior evidence/i);
+    expect(rule?.desiredBehavior).toMatch(/user-visible and output-affecting feature/i);
+    expect(rule?.desiredBehavior).toMatch(/Toolcraft implementation/i);
+    expect(rule?.desiredBehavior).toMatch(/acceptance coverage/i);
+    expect(rule?.desiredBehavior).toMatch(/explicit user approval/i);
+    expect(rule?.enforcement).toContain("acceptance-validator");
+  });
+
+  it("requires video references to be studied as behavior before implementation", () => {
+    const rule = getToolcraftDecisionRule("video-reference-analysis");
+
+    expect(rule?.level).toBe("invariant");
+    expect(rule?.area).toBe("reference-analysis");
+    expect(rule?.desiredBehavior).toMatch(/video, GIF, screen recording/i);
+    expect(rule?.desiredBehavior).toMatch(/storyboard/i);
+    expect(rule?.desiredBehavior).toMatch(/timecoded frame observations/i);
+    expect(rule?.desiredBehavior).toMatch(/frame-to-frame transitions/i);
+    expect(rule?.desiredBehavior).toMatch(/map those observed behaviors to acceptance rows/i);
+    expect(rule?.desiredBehavior).toMatch(/independent from loop duration or timeline choice/i);
+    expect(rule?.enforcement).toContain("acceptance-validator");
+    expect(rule?.enforcement).toContain("starter-agents");
+  });
+
   it("splits performance into workload and lightweight responsiveness coverage", () => {
     const rule = getToolcraftDecisionRule("performance-coverage-levels");
 
@@ -89,6 +124,8 @@ describe("Toolcraft template decision contract", () => {
     expect(rule?.desiredBehavior).toMatch(/canvas drag, pan, pinch, zoom, and radar\/center/i);
     expect(rule?.desiredBehavior).toMatch(/playback state/i);
     expect(rule?.desiredBehavior).toMatch(/first working version/i);
+    expect(rule?.desiredBehavior).toMatch(/agent's controlled browser/i);
+    expect(rule?.desiredBehavior).toMatch(/Playwright is only the fallback runner/i);
     expect(rule?.desiredBehavior).toMatch(/optimize performance/i);
     expect(rule?.desiredBehavior).toMatch(/otherwise complains about performance/i);
     expect(rule?.desiredBehavior).toMatch(/targeted functional\/browser checks/i);

package/templates/runtime/contracts/decision-contracts.ts

@@ -6,6 +6,7 @@ export type ToolcraftDecisionArea =
   | "panels"
   | "performance"
   | "persistence"
+  | "reference-analysis"
   | "reference-clone"
   | "renderer"
   | "runtime-shell"
@@ -68,9 +69,9 @@ export const TOOLCRAFT_DECISION_CONTRACT = [
   {
     area: "canvas",
     currentConstraint:
-      "canvasContent must not contain buttons, forms, CTAs, helper text, upload prompts, menus, or settings UI.",
+      "canvasContent must not contain buttons, forms, CTAs, helper text, upload prompts, menus, settings UI, or invented placeholder/demo artwork for apps with uploaded/imported source-material flows.",
     desiredBehavior:
-      "Canvas renders only product result, source material, renderer output, and valid product editing handles.",
+      "Canvas renders only real product result, source material, renderer output derived from current state, and valid product editing handles. If uploaded or imported content is part of the product source flow, the pre-content canvas stays neutral and runtime-backed until real content exists. Do not add agent-invented preset modes, demo backgrounds, CTA copy, fake sample output, or decorative placeholders to fill the canvas; a default procedural/reference source is allowed only when the prompt or reference explicitly defines it and the worklog records that evidence.",
     enforcement: ["browser-helper", "starter-agents", "spec-checklist"],
     id: "canvas-no-app-ui",
     level: "invariant",
@@ -139,10 +140,10 @@ export const TOOLCRAFT_DECISION_CONTRACT = [
   {
     area: "timeline",
     currentConstraint:
-      "Timeline is optional, but animated products must first classify animation intent as product transport, editable keyframes, custom reference timeline, or autonomous decorative output.",
+      "Timeline is optional only for animated products that have no video export and are explicitly classified as autonomous decorative output.",
     desiredBehavior:
-      "AI writes an Animation Intent Inventory before choosing no timeline, playback, keyframes, or custom reference timeline; user-requested product animation defaults to playback unless explicitly justified as autonomous output.",
-    enforcement: ["starter-agents", "spec-checklist"],
+      "AI writes an Animation Intent Inventory before choosing no timeline, playback, keyframes, or custom reference timeline; user-requested product animation defaults to playback unless explicitly justified as autonomous output without video export. Export Video always requires a top Toolcraft timeline.",
+    enforcement: ["starter-agents", "spec-checklist", "acceptance-validator"],
     id: "timeline-mode-choice",
     level: "heuristic",
     title: "Timeline mode is chosen from behavior",
@@ -189,7 +190,7 @@ export const TOOLCRAFT_DECISION_CONTRACT = [
     currentConstraint:
       "Labels, color placement, section grouping, selector order, and inline density need product-aware decisions.",
     desiredBehavior:
-      "Apps define a Control Section Inventory before schema authoring: every controls section has a product entity or workflow stage, related targets stay together, and sections are not named after UI component types.",
+      "Apps export a Control Section Inventory before schema authoring: every product controls section has a product entity or workflow stage, exact targets, a grouping reason, and split evidence when one target entity is intentionally divided.",
     enforcement: ["acceptance-validator", "schema-normalization", "docs", "starter-agents"],
     id: "controls-layout-heuristics",
     level: "heuristic",
@@ -211,15 +212,27 @@ export const TOOLCRAFT_DECISION_CONTRACT = [
   {
     area: "reference-clone",
     currentConstraint:
-      "Reference-runtime-clone mode preserves the reference runtime as source of truth unless a redesign is explicit.",
+      "Reference-runtime-clone mode preserves the reference runtime as source of truth unless a redesign is explicit; functionality must be inventoried from inspected reference behavior before implementation.",
     desiredBehavior:
-      "Ported apps keep reference loops, mutable state, transport semantics, media lifecycle, and export behavior before Toolcraft refinements.",
+      "Ported apps keep reference loops, mutable state, transport semantics, media lifecycle, and export behavior before Toolcraft refinements. The agent records referenceStudy evidence from source inspection plus running the original or restoring it locally when runnable/reconstructable, builds a reference feature inventory from inspected source/runtime/UI behavior, gives each inventory item feature-level behavior evidence from that study, maps every user-visible and output-affecting feature to Toolcraft implementation and acceptance coverage, and marks intentional behavior changes only with explicit user approval evidence.",
     enforcement: ["acceptance-validator", "browser-helper", "starter-agents"],
     id: "reference-clone-source-of-truth",
     level: "invariant",
     title: "Reference clone preserves behavior",
     verdict: "keep-hard",
   },
+  {
+    area: "reference-analysis",
+    currentConstraint:
+      "Video, GIF, and screen-recording references are often treated as static visual inspiration or summarized from a few frames.",
+    desiredBehavior:
+      "Whenever a supplied reference is a video, GIF, screen recording, contact sheet, or extracted frame sequence, the agent studies it as behavioral evidence before implementation: extract or inspect a storyboard, record timecoded frame observations, compare frame-to-frame transitions, decompose changing entities and state into product behavior, and map those observed behaviors to acceptance rows. This applies to new Toolcraft apps and reference-runtime-clone work; it is independent from loop duration or timeline choice.",
+    enforcement: ["acceptance-validator", "browser-helper", "docs", "starter-agents"],
+    id: "video-reference-analysis",
+    level: "invariant",
+    title: "Video references require storyboard behavior study",
+    verdict: "move-to-validator",
+  },
   {
     area: "acceptance",
     currentConstraint:
@@ -237,7 +250,7 @@ export const TOOLCRAFT_DECISION_CONTRACT = [
     currentConstraint:
       "Performance coverage currently asks every visible non-action control for a performance scenario.",
     desiredBehavior:
-      "Heavy workload controls get min/default/max workload coverage; ordinary controls get lightweight responsiveness coverage so they cannot hang or break input. Animated previews suspend or coalesce non-essential animation work during canvas drag, pan, pinch, zoom, and radar/center interactions without changing user playback state. A full performance checkpoint is required only when the first working version of an app exists, or whenever the user explicitly asks to optimize performance, fix lag, remove jank, speed up animation, stabilize drag/zoom, or otherwise complains about performance. Renderer, canvas, animation, export, timeline, layers, canvas.renderScale, bug fixes, and performance-sensitive controls need targeted functional/browser checks first and targeted performance scenarios only for touched workload/viewport/export paths. Performance fixes must preserve the selected render scale and must not pass budgets by silently downsampling, stretching a lower-resolution backing canvas, blurring output, or clamping canvas.renderScale below the user's chosen value. Browser performance tests read budgets from typed performance config and run sequentially for stable measurements.",
+      "Heavy workload controls get min/default/max workload coverage; ordinary controls get lightweight responsiveness coverage so they cannot hang or break input. Animated previews suspend or coalesce non-essential animation work during canvas drag, pan, pinch, zoom, and radar/center interactions without changing user playback state. A full performance checkpoint is required only when the first working version of an app exists, or whenever the user explicitly asks to optimize performance, fix lag, remove jank, speed up animation, stabilize drag/zoom, or otherwise complains about performance. The checkpoint uses the current AI agent's controlled browser first; Playwright is only the fallback runner when no agent browser is available or in CI/non-agent automation. Renderer, canvas, animation, export, timeline, layers, canvas.renderScale, bug fixes, and performance-sensitive controls need targeted functional/browser checks first and targeted performance scenarios only for touched workload/viewport/export paths. Performance fixes must preserve the selected render scale and must not pass budgets by silently downsampling, stretching a lower-resolution backing canvas, blurring output, or clamping canvas.renderScale below the user's chosen value. Browser performance checks read budgets from typed performance config and run sequentially for stable measurements.",
     enforcement: ["performance-validator", "browser-helper", "starter-agents"],
     id: "performance-coverage-levels",
     level: "invariant",

package/templates/runtime/export/export.test.ts

@@ -7,6 +7,7 @@ import {
   getToolcraftImageExportSize,
   getToolcraftRetinaExportPixelRatio,
   getToolcraftRetinaExportSize,
+  getToolcraftVideoExportSize,
   shouldIncludeToolcraftExportBackground,
   shouldIncludeToolcraftPreviewBackground,
 } from "./export";
@@ -185,6 +186,68 @@ describe("Toolcraft export helpers", () => {
       });
   });
 
+  it("resolves current video export to even current output dimensions", () => {
+    const state = createState();
+    state.canvas.size = { height: 101, unit: "px", width: 201 };
+
+    expect(getToolcraftVideoExportSize({ devicePixelRatio: 2, resolution: "current", state }))
+      .toEqual({
+        height: 102,
+        pixelRatio: 102 / 101,
+        width: 202,
+      });
+  });
+
+  it("keeps current video export distinct from 4k export at default canvas size", () => {
+    const state = createState();
+    state.canvas.size = { height: 1080, unit: "px", width: 1920 };
+
+    expect(getToolcraftVideoExportSize({ devicePixelRatio: 2, resolution: "current", state }))
+      .toEqual({
+        height: 1080,
+        pixelRatio: 1,
+        width: 1920,
+      });
+    expect(getToolcraftVideoExportSize({ resolution: "4k", state })).toEqual({
+      height: 2160,
+      pixelRatio: 2,
+      width: 3840,
+    });
+  });
+
+  it("fits 4k video export inside an encoder-safe UHD box", () => {
+    const state = createState();
+    state.canvas.size = { height: 900, unit: "px", width: 1440 };
+
+    expect(getToolcraftVideoExportSize({ resolution: "4k", state })).toEqual({
+      height: 2160,
+      pixelRatio: 2.4,
+      width: 3456,
+    });
+  });
+
+  it("preserves 16:9 at UHD dimensions for 4k video export", () => {
+    const state = createState();
+    state.canvas.size = { height: 1080, unit: "px", width: 1920 };
+
+    expect(getToolcraftVideoExportSize({ resolution: "4k", state })).toEqual({
+      height: 2160,
+      pixelRatio: 2,
+      width: 3840,
+    });
+  });
+
+  it("reports the actual rounded pixel ratio for 4k video export", () => {
+    const state = createState();
+    state.canvas.size = { height: 201, unit: "px", width: 333 };
+
+    expect(getToolcraftVideoExportSize({ resolution: "4k", state })).toEqual({
+      height: 2160,
+      pixelRatio: 2160 / 201,
+      width: 3578,
+    });
+  });
+
   it("creates a transparent retina png canvas when png background is disabled", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },

package/templates/runtime/export/export.ts

@@ -4,6 +4,7 @@ import type { ToolcraftState } from "../state/types";
 export type ToolcraftExportFormat = "png" | "video";
 
 export type ToolcraftImageExportResolution = "current" | "2k" | "4k" | "8k";
+export type ToolcraftVideoExportResolution = "current" | "4k";
 
 export type ToolcraftRetinaExportSize = {
   height: number;
@@ -30,6 +31,10 @@ export type ToolcraftImageExportSizeOptions = ToolcraftExportSizeOptions & {
   resolution?: ToolcraftImageExportResolution | string;
 };
 
+export type ToolcraftVideoExportSizeOptions = ToolcraftExportSizeOptions & {
+  resolution?: ToolcraftVideoExportResolution | string;
+};
+
 export type ToolcraftPngRenderContext = {
   canvas: HTMLCanvasElement;
   context: CanvasRenderingContext2D;
@@ -60,6 +65,17 @@ const toolcraftImageExportLongEdges: Record<
   "8k": 8192,
 };
 
+const toolcraftVideoExportMaxSizes: Record<
+  Exclude<ToolcraftVideoExportResolution, "current">,
+  { height: number; width: number }
+> = {
+  "4k": { height: 2160, width: 3840 },
+};
+
+function roundVideoDimension(value: number): number {
+  return Math.max(2, Math.round(value / 2) * 2);
+}
+
 export function getToolcraftRetinaExportPixelRatio(devicePixelRatio?: number): number {
   const globalPixelRatio = (globalThis as typeof globalThis & { devicePixelRatio?: number })
     .devicePixelRatio;
@@ -123,6 +139,45 @@ export function getToolcraftImageExportSize({
   };
 }
 
+export function getToolcraftVideoExportSize({
+  resolution,
+  state,
+}: ToolcraftVideoExportSizeOptions): ToolcraftRetinaExportSize {
+  const normalizedResolution = String(resolution ?? "current").toLowerCase();
+  const targetMaxSize =
+    toolcraftVideoExportMaxSizes[
+      normalizedResolution as Exclude<ToolcraftVideoExportResolution, "current">
+    ];
+
+  if (!targetMaxSize) {
+    const cssWidth = Math.max(1, state.canvas.size.width);
+    const cssHeight = Math.max(1, state.canvas.size.height);
+    const width = roundVideoDimension(cssWidth);
+    const height = roundVideoDimension(cssHeight);
+
+    return {
+      height,
+      pixelRatio: Math.max(width / cssWidth, height / cssHeight),
+      width,
+    };
+  }
+
+  const cssWidth = Math.max(1, state.canvas.size.width);
+  const cssHeight = Math.max(1, state.canvas.size.height);
+  const pixelRatio = Math.min(
+    targetMaxSize.width / cssWidth,
+    targetMaxSize.height / cssHeight,
+  );
+  const width = roundVideoDimension(cssWidth * pixelRatio);
+  const height = roundVideoDimension(cssHeight * pixelRatio);
+
+  return {
+    height,
+    pixelRatio: Math.max(width / cssWidth, height / cssHeight),
+    width,
+  };
+}
+
 export function shouldIncludeToolcraftExportBackground({
   format,
   schema,

package/templates/runtime/index.ts

@@ -10,5 +10,6 @@ export * from "./state/create-template-state";
 export * from "./state/keyframe-evaluation";
 export * from "./state/persistence";
 export * from "./state/reducer";
+export * from "./state/timeline-loop";
 export * from "./state/types";
 export * from "./testing/performance";

package/templates/runtime/react/canvas-shell.test.tsx

@@ -22,7 +22,18 @@ function createSchema() {
   });
 }
 
-function createAutoSizedSchema() {
+function createIntrinsicMediaSchema() {
+  return defineToolcraft({
+    canvas: {
+      enabled: true,
+      sizing: { mode: "intrinsic-media" },
+      upload: true,
+    },
+    panels: {},
+  });
+}
+
+function createUploadDefaultSchema() {
   return defineToolcraft({
     canvas: {
       enabled: true,
@@ -87,9 +98,9 @@ describe("CanvasShell", () => {
     expect(editableCanvas?.style.height).toBe("200px");
   });
 
-  it("does not render a fixed editable canvas when the app has not chosen a size", () => {
+  it("does not render a fixed editable canvas for explicit intrinsic media sizing", () => {
     const { container } = render(
-      <ToolcraftRoot schema={createAutoSizedSchema()}>
+      <ToolcraftRoot schema={createIntrinsicMediaSchema()}>
         <div style={{ height: 640, position: "relative", width: 640 }}>
           <CanvasShell />
         </div>
@@ -101,7 +112,7 @@ describe("CanvasShell", () => {
 
   it("renders the canvas slot inside the editable canvas when custom app content is provided", () => {
     const { container } = render(
-      <ToolcraftRoot schema={createAutoSizedSchema()}>
+      <ToolcraftRoot schema={createUploadDefaultSchema()}>
         <div style={{ height: 640, position: "relative", width: 640 }}>
           <CanvasShell>
             <div data-testid="custom-canvas-renderer" />
@@ -497,4 +508,47 @@ describe("CanvasShell", () => {
 
     expect(screen.queryByRole("button", { name: "Select material.png" })).toBeNull();
   });
+
+  it("renders uploaded canvas images with cover crop and runtime transforms", () => {
+    render(
+      <ToolcraftRoot
+        initialState={{
+          layers: [
+            {
+              displayName: "Layer 1",
+              id: "layer-1",
+              kind: "layer",
+              name: "layer-1",
+              visible: true,
+            },
+          ],
+          mediaAssets: [
+            {
+              dataUrl: "data:image/png;base64,test",
+              fileName: "material.png",
+              id: "media-1",
+              layerId: "layer-1",
+              mimeType: "image/png",
+              position: { x: 48, y: -24 },
+              size: { height: 200, unit: "px", width: 300 },
+              transform: { flipHorizontal: true, rotationDeg: 90 },
+            },
+          ],
+          selectedLayerId: "layer-1",
+        }}
+        schema={createSchema()}
+      >
+        <div style={{ height: 640, position: "relative", width: 640 }}>
+          <CanvasShell />
+        </div>
+      </ToolcraftRoot>,
+    );
+
+    const mediaButton = screen.getByRole("button", { name: "Select material.png" });
+    const mediaImage = screen.getByRole("img", { name: "material.png" });
+
+    expect(mediaButton.className).toContain("inset-0");
+    expect(mediaImage.className).toContain("object-cover");
+    expect(mediaImage.getAttribute("style")).toContain("rotate(90deg) scale(-1.5, 1.5)");
+  });
 });

package/templates/runtime/react/canvas-shell.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import { clampToolcraftCanvasZoom } from "../state/canvas-zoom";
 import type {
   ToolcraftMediaAsset,
+  ToolcraftMediaTransform,
   ToolcraftPoint,
   ToolcraftState,
 } from "../state/types";
@@ -176,6 +177,33 @@ function isDefaultCanvasImageAsset(
   );
 }
 
+function normalizeMediaRotation(rotationDeg: number | undefined): 0 | 90 | 180 | 270 {
+  const normalized = ((Math.round((rotationDeg ?? 0) / 90) * 90) % 360 + 360) % 360;
+
+  return normalized === 90 || normalized === 180 || normalized === 270 ? normalized : 0;
+}
+
+function getCanvasMediaTransformStyle(
+  transform: ToolcraftMediaTransform | undefined,
+  canvasSize: ToolcraftState["canvas"]["size"],
+): React.CSSProperties {
+  const rotationDeg = normalizeMediaRotation(transform?.rotationDeg);
+  const coverScale =
+    rotationDeg === 90 || rotationDeg === 270
+      ? Math.max(canvasSize.width / canvasSize.height, canvasSize.height / canvasSize.width)
+      : 1;
+  const scaleX = (transform?.flipHorizontal ? -1 : 1) * coverScale;
+  const scaleY = (transform?.flipVertical ? -1 : 1) * coverScale;
+
+  if (rotationDeg === 0 && scaleX === 1 && scaleY === 1) {
+    return {};
+  }
+
+  return {
+    transform: `rotate(${rotationDeg}deg) scale(${scaleX}, ${scaleY})`,
+  };
+}
+
 function getZoomedCanvasOffset({
   clientX,
   clientY,
@@ -507,7 +535,7 @@ export function CanvasShell({
                     <button
                       aria-label={`Select ${mediaAsset.fileName}`}
                       className={cn(
-                        "absolute top-1/2 left-1/2 block cursor-pointer rounded-md border bg-[color:color-mix(in_oklab,var(--background)_84%,transparent)] p-1 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out",
+                        "absolute inset-0 block cursor-pointer overflow-hidden rounded-none border bg-[color:color-mix(in_oklab,var(--background)_84%,transparent)] p-0 shadow-sm transition-[border-color,box-shadow] duration-150 ease-out",
                         selected
                           ? "border-[color:var(--link)] shadow-[0_0_0_1px_color-mix(in_oklab,var(--link)_48%,transparent)]"
                           : "border-[color:color-mix(in_oklab,var(--border)_10%,transparent)] hover:border-[color:color-mix(in_oklab,var(--border)_24%,transparent)]",
@@ -522,21 +550,15 @@ export function CanvasShell({
                         });
                       }}
                       onPointerDown={(event) => event.stopPropagation()}
-                      style={{
-                        transform: `translate(calc(-50% + ${mediaAsset.position.x}px), calc(-50% + ${mediaAsset.position.y}px))`,
-                      }}
                       type="button"
                     >
                       <img
                         alt={mediaAsset.fileName}
-                        className="block select-none object-contain"
+                        className="block size-full select-none object-cover"
                         data-toolcraft-generated-output=""
                         draggable={false}
                         src={mediaAsset.dataUrl}
-                        style={{
-                          height: mediaAsset.size.height,
-                          width: mediaAsset.size.width,
-                        }}
+                        style={getCanvasMediaTransformStyle(mediaAsset.transform, size)}
                       />
                     </button>
                   );