@devmotion/cli 0.6.3 → 0.8.0

package/studio/server/chunks/animation-sOd5R1cE.js

@@ -0,0 +1,2912 @@
+import z__default, { z } from 'zod';
+import { B as BRAND_COLORS } from './branding-5rLT-BvK.js';
+
+const DYNAMIC_BACKGROUND_VARIANTS = [
+  "mesh-gradient",
+  "aurora",
+  "aurora-borealis",
+  "plasma",
+  "silk",
+  "waves",
+  "halo",
+  "topographic",
+  "rain-window",
+  "data-stream",
+  "mountain-mist"
+];
+const DYNAMIC_VARIANTS = [
+  {
+    id: "mesh-gradient",
+    label: "Mesh Gradient",
+    description: "Soft organic color blobs — the kite.video look"
+  },
+  {
+    id: "aurora",
+    label: "Aurora",
+    description: "Flowing northern-lights bands across the sky"
+  },
+  {
+    id: "plasma",
+    label: "Plasma",
+    description: "Smooth hypnotic color plasma with radial vignette"
+  },
+  {
+    id: "silk",
+    label: "Silk",
+    description: "Domain-warped silky fbm clouds"
+  },
+  {
+    id: "waves",
+    label: "Waves",
+    description: "Horizontal color ribbons undulating over time"
+  },
+  {
+    id: "halo",
+    label: "Halo",
+    description: "Concentric glowing rings pulsing outward from the center"
+  },
+  {
+    id: "topographic",
+    label: "Topographic",
+    description: "Animated contour-map isolines flowing across a color field"
+  },
+  {
+    id: "aurora-borealis",
+    label: "Aurora Borealis",
+    description: "Soft vertical curtains of light drifting over a starry night"
+  },
+  {
+    id: "rain-window",
+    label: "Rain on Window",
+    description: "Blurred lights behind gently trickling streaks and droplets"
+  },
+  {
+    id: "data-stream",
+    label: "Data Stream",
+    description: "Falling columns of subtle matrix-style data trails"
+  },
+  {
+    id: "mountain-mist",
+    label: "Mountain Mist",
+    description: "Parallax ridges veiled by slow rising fog at dawn"
+  }
+];
+const ColorStopSchema = z.object({
+  color: z.string().describe("Color value (hex, rgb, or rgba)"),
+  position: z.number().min(0).max(100).describe("Position in percentage (0-100)")
+});
+const PatternOverlaySchema = z.enum([
+  "none",
+  "waves",
+  "dots",
+  "squares",
+  "grid",
+  "zigzag",
+  "hexagons"
+]);
+const BackgroundFiltersSchema = z.object({
+  blur: z.number().min(0).max(50).optional().describe("Blur amount in pixels (0-50)"),
+  brightness: z.number().min(0).max(2).optional().describe("Brightness multiplier (0-2, 1 = normal)"),
+  contrast: z.number().min(0).max(2).optional().describe("Contrast multiplier (0-2, 1 = normal)"),
+  saturate: z.number().min(0).max(2).optional().describe("Saturation multiplier (0-2, 1 = normal)"),
+  hueRotate: z.number().min(0).max(360).optional().describe("Hue rotation in degrees (0-360)"),
+  opacity: z.number().min(0).max(1).optional().describe("Opacity level (0-1)"),
+  grain: z.number().min(0).max(1).optional().describe("Noise/grain intensity (0-1)"),
+  pattern: PatternOverlaySchema.optional().describe("SVG pattern overlay"),
+  patternScale: z.number().min(0.1).max(5).optional().describe("Pattern scale multiplier (0.1-5)"),
+  patternRotation: z.number().min(-360).max(360).optional().describe("Pattern rotation in degrees (0-360)"),
+  patternOpacity: z.number().min(0).max(1).optional().describe("Pattern overlay opacity (0-1)"),
+  patternBlur: z.number().min(0).max(20).optional().describe("Pattern blur in pixels (0-20)")
+}).optional();
+const SolidBackgroundSchema = z.string().describe("Solid color value (hex format recommended)");
+const LinearGradientSchema = z.object({
+  type: z.literal("linear"),
+  angle: z.number().min(0).max(360).default(180).describe("Angle in degrees (0 = top to bottom, 90 = left to right)"),
+  stops: z.array(ColorStopSchema).min(2).describe("Color stops (minimum 2)"),
+  filters: BackgroundFiltersSchema
+});
+const RadialGradientSchema = z.object({
+  type: z.literal("radial"),
+  shape: z.enum(["circle", "ellipse"]).default("circle").describe("Shape of the gradient"),
+  size: z.enum(["closest-side", "closest-corner", "farthest-side", "farthest-corner"]).default("farthest-corner").describe("Size of the gradient"),
+  position: z.object({
+    x: z.number().min(0).max(100).default(50).describe("Center X position (%)"),
+    y: z.number().min(0).max(100).default(50).describe("Center Y position (%)")
+  }).default({ x: 50, y: 50 }).describe("Center position of the gradient"),
+  stops: z.array(ColorStopSchema).min(2).describe("Color stops (minimum 2)"),
+  filters: BackgroundFiltersSchema
+});
+const ConicGradientSchema = z.object({
+  type: z.literal("conic"),
+  angle: z.number().min(0).max(360).default(0).describe("Starting angle in degrees"),
+  position: z.object({
+    x: z.number().min(0).max(100).default(50).describe("Center X position (%)"),
+    y: z.number().min(0).max(100).default(50).describe("Center Y position (%)")
+  }).default({ x: 50, y: 50 }).describe("Center position of the gradient"),
+  stops: z.array(ColorStopSchema).min(2).describe("Color stops (minimum 2)"),
+  filters: BackgroundFiltersSchema
+});
+const DynamicBackgroundSchema = z.object({
+  type: z.literal("dynamic"),
+  variant: z.enum(DYNAMIC_BACKGROUND_VARIANTS),
+  /** Override the project's primary color for this background */
+  primaryColor: z.string().optional(),
+  /** Animation speed multiplier (0 = frozen, 1 = normal, 2 = double speed) */
+  speed: z.number().min(0).max(5).default(1),
+  /** Effect intensity: blob size for mesh, light brightness for grid-rays */
+  intensity: z.number().min(0).max(1).default(0.7)
+});
+const BackgroundValueSchema = z.union([
+  SolidBackgroundSchema,
+  LinearGradientSchema,
+  RadialGradientSchema,
+  ConicGradientSchema,
+  DynamicBackgroundSchema
+]);
+function isGradient(value) {
+  return typeof value === "object" && (value.type === "linear" || value.type === "radial" || value.type === "conic");
+}
+function isSolid(value) {
+  return typeof value === "string" || typeof value === "undefined";
+}
+function isDynamic(value) {
+  return typeof value === "object" && value.type === "dynamic";
+}
+function generateGrainSVG(intensity) {
+  const size2 = 300;
+  const baseOpacity = intensity * 0.6;
+  const frequency = 0.8 + intensity * 0.4;
+  return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${size2}' height='${size2}'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${frequency}' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='${baseOpacity}'/%3E%3C/svg%3E`;
+}
+function generatePatternSVG(pattern) {
+  const encode = (svg) => {
+    return "data:image/svg+xml," + encodeURIComponent(svg);
+  };
+  switch (pattern) {
+    case "waves":
+      return encode(`<svg width="100px" height="20px" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
+        <g stroke="none" stroke-width="0.2" fill="none" fill-rule="evenodd">
+          <path d="M21.1841339,20 C21.5411448,19.869748 21.9037256,19.7358773 22.272392,19.5983261 C22.6346445,19.4631679 23.8705367,18.9999982 24.0399055,18.9366758 C33.6397477,15.3475548 39.6469349,14 50,14 C60.2711361,14 65.3618399,15.2217689 74.6286093,18.9284767 C75.584355,19.310775 76.4978747,19.6675274 77.3787841,20 L83.604005,20 C81.0931362,19.2694473 78.4649665,18.3089537 75.3713907,17.0715233 C65.8881601,13.2782311 60.5621972,12 50,12 C39.3741437,12 33.144814,13.3973866 23.3395101,17.0633242 C23.1688625,17.1271247 21.9338538,17.5899633 21.5732596,17.7245028 C19.0984715,18.6478581 16.912678,19.3994574 14.8494171,20 L21.1841339,20 L21.1841339,20 Z M21.1841339,0 C13.2575214,2.89194861 8.07672845,4 7.87150385e-14,4 L7.81597009e-14,4 L0,2 C5.74391753,2 9.9514017,1.4256397 14.8494171,1.40165657e-15 L21.1841339,6.9388939e-17 L21.1841339,0 Z M77.3787841,2.21705987e-12 C85.238555,2.9664329 90.5022896,4 100,4 L100,2 C93.1577329,2 88.6144135,1.4578092 83.604005,1.04805054e-13 L77.3787841,0 L77.3787841,2.21705987e-12 Z M7.87150385e-14,14 C8.44050043,14 13.7183277,12.7898887 22.272392,9.59832609 C22.6346445,9.46316794 23.8705367,8.99999822 24.0399055,8.9366758 C33.6397477,5.34755477 39.6469349,4 50,4 C60.2711361,4 65.3618399,5.2217689 74.6286093,8.92847669 C84.1118399,12.7217689 89.4378028,14 100,14 L100,12 C89.7288639,12 84.6381601,10.7782311 75.3713907,7.07152331 C65.8881601,3.2782311 60.5621972,2 50,2 C39.3741437,2 33.144814,3.39738661 23.3395101,7.0633242 C23.1688625,7.12712472 21.9338538,7.58996334 21.5732596,7.72450279 C13.2235239,10.8398294 8.16350991,12 0,12 L7.81597009e-14,14 L7.87150385e-14,14 L7.87150385e-14,14 Z" fill="currentColor"/>
+        </g>
+      </svg>`);
+    case "dots":
+      return encode(`<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
+        <g fill="currentColor">
+          <circle cx="10" cy="10" r="4"/>
+          <circle cx="50" cy="16" r="3"/>
+          <circle cx="70" cy="24" r="2"/>
+          <circle cx="24" cy="36" r="3.6"/>
+          <circle cx="60" cy="50" r="4.4"/>
+          <circle cx="16" cy="64" r="2.6"/>
+          <circle cx="44" cy="70" r="3.2"/>
+          <circle cx="76" cy="60" r="2.4"/>
+        </g>
+      </svg>`);
+    case "squares":
+      return encode(`<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <g fill="currentColor">
+          <rect x="4" y="6" width="8" height="8" transform="rotate(12 8 10)"/>
+          <rect x="30" y="16" width="6" height="6" transform="rotate(-8 33 19)"/>
+          <rect x="56" y="10" width="10" height="10" transform="rotate(22 61 15)"/>
+          <rect x="84" y="24" width="5" height="5" transform="rotate(-15 86.5 26.5)"/>
+          <rect x="16" y="40" width="7" height="7" transform="rotate(18 19.5 43.5)"/>
+          <rect x="50" y="44" width="9" height="9" transform="rotate(-12 54.5 48.5)"/>
+          <rect x="80" y="56" width="6" height="6" transform="rotate(25 83 59)"/>
+          <rect x="10" y="70" width="8" height="8" transform="rotate(-20 14 74)"/>
+          <rect x="40" y="76" width="7" height="7" transform="rotate(10 43.5 79.5)"/>
+          <rect x="70" y="84" width="10" height="10" transform="rotate(-18 75 89)"/>
+        </g>
+      </svg>`);
+    case "grid":
+      return encode(`<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
+        <g>
+          <path d="M0 0h80v2H0zM0 0v80h2V0z" fill="currentColor"/>
+        </g>
+      </svg>`);
+    case "zigzag":
+      return encode(`<svg width="80" height="20" viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
+        <g>
+          <path d="M0 20L20 0L40 20L60 0L80 20V16L60 4L40 16L20 4L0 16z" fill="currentColor"/>
+        </g>
+      </svg>`);
+    case "hexagons":
+      return encode(`<svg width="56" height="98" viewBox="0 0 56 98" xmlns="http://www.w3.org/2000/svg">
+        <g>
+          <path d="M27.98 18.5l26 15v30l-26 15L2 63.5v-30l25.98-15zM6 35.8v25.4l21.98 12.68 22-12.7V35.8l-22-12.68L6 35.8zM0 30l25.96-15V0h-4v12.7L0 25.38v4.6zm0 37L25.96 82v16h-4v-13.7L0 71.62v-4.6zM30 0v15L55.98 30H56v-4.62h-.02L34 12.7V0h-4zm0 98v-16l25.98-15H56v4.62h-.02L34 84.3V98h-4z" fill="currentColor"/>
+        </g>
+      </svg>`);
+    default:
+      return "";
+  }
+}
+function buildFilterCSS(filters) {
+  if (!filters) return "";
+  const parts = [];
+  if (filters.blur !== void 0 && filters.blur > 0) {
+    parts.push(`blur(${filters.blur}px)`);
+  }
+  if (filters.brightness !== void 0 && filters.brightness !== 1) {
+    parts.push(`brightness(${filters.brightness})`);
+  }
+  if (filters.contrast !== void 0 && filters.contrast !== 1) {
+    parts.push(`contrast(${filters.contrast})`);
+  }
+  if (filters.saturate !== void 0 && filters.saturate !== 1) {
+    parts.push(`saturate(${filters.saturate})`);
+  }
+  if (filters.hueRotate !== void 0 && filters.hueRotate > 0) {
+    parts.push(`hue-rotate(${filters.hueRotate}deg)`);
+  }
+  if (filters.opacity !== void 0 && filters.opacity !== 1) {
+    parts.push(`opacity(${filters.opacity})`);
+  }
+  return parts.length > 0 ? parts.join(" ") : "";
+}
+function backgroundValueToCSS(value, options) {
+  if (!value) return "#000000";
+  if (isSolid(value)) {
+    return value;
+  }
+  if (isDynamic(value)) {
+    return "#000000";
+  }
+  let gradientCSS = "";
+  if (value.type === "linear") {
+    const stops = value.stops.map((s) => `${s.color} ${s.position}%`).join(", ");
+    gradientCSS = `linear-gradient(${value.angle}deg, ${stops})`;
+  } else if (value.type === "radial") {
+    const stops = value.stops.map((s) => `${s.color} ${s.position}%`).join(", ");
+    const pos = `${value.position.x}% ${value.position.y}%`;
+    const size2 = options?.radialSize ?? value.size;
+    gradientCSS = `radial-gradient(${value.shape} ${size2} at ${pos}, ${stops})`;
+  } else if (value.type === "conic") {
+    const stops = value.stops.map((s) => `${s.color} ${s.position}%`).join(", ");
+    const pos = `${value.position.x}% ${value.position.y}%`;
+    gradientCSS = `conic-gradient(from ${value.angle}deg at ${pos}, ${stops})`;
+  } else {
+    return "#000000";
+  }
+  if (value.filters?.grain && value.filters.grain > 0) {
+    const grainURL = generateGrainSVG(value.filters.grain);
+    return `url("${grainURL}"), ${gradientCSS}`;
+  }
+  return gradientCSS;
+}
+function getPatternLayerStyle(filters) {
+  if (!filters?.pattern || filters.pattern === "none") {
+    return null;
+  }
+  const patternOpacity = filters.patternOpacity ?? 0.2;
+  const patternScale = filters.patternScale ?? 1;
+  const patternRotation = filters.patternRotation ?? 0;
+  const patternBlur = filters.patternBlur ?? 0;
+  const patternURL = generatePatternSVG(filters.pattern);
+  const backgroundSizePercent = `${5 * patternScale}%`;
+  return {
+    backgroundImage: `url("${patternURL}")`,
+    backgroundRepeat: "repeat",
+    backgroundSize: backgroundSizePercent,
+    backgroundPosition: "center",
+    width: "200%",
+    height: "200%",
+    top: "-50%",
+    left: "-50%",
+    transform: patternRotation !== 0 ? `rotate(${patternRotation}deg)` : void 0,
+    opacity: patternOpacity,
+    filter: patternBlur > 0 ? `blur(${patternBlur}px)` : void 0
+  };
+}
+function getStyleProperties(value, options) {
+  const filters = value && isGradient(value) ? value.filters : void 0;
+  const filterCSS = buildFilterCSS(filters);
+  return {
+    backgroundImage: getBackgroundImage(value, options),
+    backgroundColor: getBackgroundColor(value),
+    filter: filterCSS || void 0
+  };
+}
+function getBackgroundColor(value) {
+  if (!value) {
+    return void 0;
+  }
+  if (isSolid(value)) {
+    return value;
+  }
+  if (isDynamic(value)) {
+    return "transparent";
+  }
+  return "transparent";
+}
+function getBackgroundImage(value, options) {
+  if (!value) {
+    return void 0;
+  }
+  if (isSolid(value)) {
+    return "none";
+  }
+  if (isDynamic(value)) {
+    return "none";
+  }
+  return backgroundValueToCSS(value, options);
+}
+function solidBackground(color) {
+  return color;
+}
+const fieldRegistry = z__default.registry();
+function createSizeWithAspectRatioSchema(opts = {}) {
+  const w = { min: 0.01, max: 300, default: 15, label: "Width", describe: "Width", ...opts.width };
+  const h = {
+    min: 0.1,
+    max: 300,
+    default: 15,
+    label: "Height",
+    describe: "Height",
+    ...opts.height
+  };
+  return z.object({
+    width: z.number().min(w.min).max(w.max).default(w.default).describe(w.describe).register(fieldRegistry, {
+      group: "size",
+      interpolationFamily: "continuous",
+      label: w.label,
+      postFix: "%",
+      step: 1
+    }),
+    height: z.number().min(h.min).max(h.max).default(h.default).describe(h.describe).register(fieldRegistry, {
+      group: "size",
+      interpolationFamily: "continuous",
+      label: h.label,
+      postFix: "%",
+      step: 1
+    }),
+    _aspectRatioLocked: z.boolean().default(false).describe("Aspect ratio locked").register(fieldRegistry, { hidden: true }),
+    _aspectRatio: z.number().default(1).describe("Aspect ratio value").register(fieldRegistry, { hidden: true })
+  });
+}
+const sizeMiddleware = (propName, value, currentValues) => {
+  const updates = { [propName]: value };
+  const props = currentValues.props;
+  if (props._aspectRatioLocked && (propName === "width" || propName === "height")) {
+    const ratio = props._aspectRatio || 1;
+    if (propName === "width") {
+      updates.height = value / ratio;
+    } else {
+      updates.width = value * ratio;
+    }
+  }
+  return updates;
+};
+const sizePropertyGroup = {
+  id: "size",
+  label: "Size"
+};
+function createSizeConfig(opts = {}) {
+  return {
+    schema: createSizeWithAspectRatioSchema(opts),
+    propertyGroup: sizePropertyGroup,
+    middleware: sizeMiddleware
+  };
+}
+const scaleMiddleware = (propName, value, currentValues) => {
+  const updates = {};
+  const props = currentValues.props;
+  if (props._scaleLocked && (propName === "scale.x" || propName === "scale.y")) {
+    const ratio = props._scaleRatio || 1;
+    if (propName === "scale.x") {
+      updates["scale.x"] = value;
+      updates["scale.y"] = parseFloat((value / ratio).toFixed(2));
+    } else {
+      updates["scale.x"] = parseFloat((value * ratio).toFixed(2));
+      updates["scale.y"] = value;
+    }
+  } else {
+    updates[propName] = value;
+  }
+  return updates;
+};
+const gradientPresets = [
+  // ============================================
+  // Pastel gradients - soft and dreamy
+  // ============================================
+  {
+    id: "unicorn-dream",
+    name: "Unicorn Dream",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#faf5ff", position: 0 },
+        { color: "#ff9a9e", position: 25 },
+        { color: "#fecfef", position: 50 },
+        { color: "#a18cd1", position: 75 },
+        { color: "#667eea", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "candy-shop",
+    name: "Candy Shop",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#f5f3ff", position: 0 },
+        { color: "#667eea", position: 25 },
+        { color: "#764ba2", position: 50 },
+        { color: "#f093fb", position: 75 },
+        { color: "#ff6b9d", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "ocean-sky",
+    name: "Ocean Sky",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#f0f9ff", position: 0 },
+        { color: "#f093fb", position: 25 },
+        { color: "#f5576c", position: 50 },
+        { color: "#4facfe", position: 75 },
+        { color: "#00f2fe", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "mint-lime",
+    name: "Mint Lime",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#f0fff4", position: 0 },
+        { color: "#4facfe", position: 25 },
+        { color: "#00f2fe", position: 50 },
+        { color: "#43e97b", position: 75 },
+        { color: "#fee140", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "spring-green",
+    name: "Spring Green",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#f6ffed", position: 0 },
+        { color: "#43e97b", position: 25 },
+        { color: "#38f9d7", position: 50 },
+        { color: "#667eea", position: 75 },
+        { color: "#a18cd1", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "peach-sunset",
+    name: "Peach Sunset",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fff7ed", position: 0 },
+        { color: "#fa709a", position: 25 },
+        { color: "#fee140", position: 50 },
+        { color: "#ff9a9e", position: 75 },
+        { color: "#ffd1ff", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "blush-pink",
+    name: "Blush Pink",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fef7ff", position: 0 },
+        { color: "#a8edea", position: 25 },
+        { color: "#fed6e3", position: 50 },
+        { color: "#ffecd2", position: 75 },
+        { color: "#fcb69f", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "coral-reef",
+    name: "Coral Reef",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fff8f1", position: 0 },
+        { color: "#ffecd2", position: 25 },
+        { color: "#fcb69f", position: 50 },
+        { color: "#fad0c4", position: 75 },
+        { color: "#f093fb", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "lemon-sky",
+    name: "Lemon Sky",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fefce8", position: 0 },
+        { color: "#4facfe", position: 25 },
+        { color: "#f5576c", position: 50 },
+        { color: "#fcb69f", position: 75 },
+        { color: "#ffd1ff", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "lavender-mist",
+    name: "Lavender Mist",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fefce8", position: 0 },
+        { color: "#f6d6ff", position: 25 },
+        { color: "#d0f4de", position: 50 },
+        { color: "#fff1c1", position: 75 },
+        { color: "#ffd6e0", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "baby-blue",
+    name: "Baby Blue",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#f0f9ff", position: 0 },
+        { color: "#a0c4ff", position: 25 },
+        { color: "#bdb2ff", position: 50 },
+        { color: "#ffc6ff", position: 75 },
+        { color: "#caffbf", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "lilac-dream",
+    name: "Lilac Dream",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#f0fdfa", position: 0 },
+        { color: "#e0c3fc", position: 25 },
+        { color: "#8ecae6", position: 50 },
+        { color: "#bde0fe", position: 75 },
+        { color: "#ffe6e6", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "peachy-cream",
+    name: "Peachy Cream",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fef7f0", position: 0 },
+        { color: "#f9f9c5", position: 25 },
+        { color: "#f7c8e0", position: 50 },
+        { color: "#c1f7d3", position: 75 },
+        { color: "#c1c8e4", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "soft-rainbow",
+    name: "Soft Rainbow",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fef2f2", position: 0 },
+        { color: "#e2f0cb", position: 25 },
+        { color: "#b5ead7", position: 50 },
+        { color: "#ffb7b2", position: 75 },
+        { color: "#ffdac1", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "mint-fresh",
+    name: "Mint Fresh",
+    category: "pastel",
+    value: {
+      type: "linear",
+      angle: 90,
+      stops: [
+        { color: "#d4fc79", position: 0 },
+        { color: "#96e6a1", position: 100 }
+      ]
+    }
+  },
+  // ============================================
+  // Vibrant gradients - bold and energetic
+  // ============================================
+  {
+    id: "fire-passion",
+    name: "Fire Passion",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fef2f2", position: 0 },
+        { color: "#ff6b6b", position: 25 },
+        { color: "#ff8e53", position: 50 },
+        { color: "#ff6b9d", position: 75 },
+        { color: "#c44569", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "ocean-wave",
+    name: "Ocean Wave",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#ecfeff", position: 0 },
+        { color: "#4ecdc4", position: 25 },
+        { color: "#44a08d", position: 50 },
+        { color: "#96ceb4", position: 75 },
+        { color: "#55a3ff", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "purple-power",
+    name: "Purple Power",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#faf5ff", position: 0 },
+        { color: "#a29bfe", position: 25 },
+        { color: "#6c5ce7", position: 50 },
+        { color: "#fd79a8", position: 75 },
+        { color: "#e84393", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "teal-blast",
+    name: "Teal Blast",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#f0fdfa", position: 0 },
+        { color: "#00d2d3", position: 25 },
+        { color: "#01a3a4", position: 50 },
+        { color: "#00b894", position: 75 },
+        { color: "#55efc4", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "hot-sunset",
+    name: "Hot Sunset",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fef2f2", position: 0 },
+        { color: "#fd79a8", position: 25 },
+        { color: "#fdcb6e", position: 50 },
+        { color: "#e17055", position: 75 },
+        { color: "#d63031", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "electric-blue",
+    name: "Electric Blue",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#eff6ff", position: 0 },
+        { color: "#74b9ff", position: 25 },
+        { color: "#0984e3", position: 50 },
+        { color: "#6c5ce7", position: 75 },
+        { color: "#a29bfe", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "mint-ocean",
+    name: "Mint Ocean",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#f0fdfa", position: 0 },
+        { color: "#00b894", position: 25 },
+        { color: "#00cec9", position: 50 },
+        { color: "#74b9ff", position: 75 },
+        { color: "#0984e3", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "sunset-fire",
+    name: "Sunset Fire",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fff7ed", position: 0 },
+        { color: "#e17055", position: 25 },
+        { color: "#d63031", position: 50 },
+        { color: "#fd79a8", position: 75 },
+        { color: "#e84393", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "violet-burst",
+    name: "Violet Burst",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#faf5ff", position: 0 },
+        { color: "#6c5ce7", position: 25 },
+        { color: "#a29bfe", position: 50 },
+        { color: "#fd79a8", position: 75 },
+        { color: "#ff7675", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "tropical-heat",
+    name: "Tropical Heat",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fffbeb", position: 0 },
+        { color: "#ff7675", position: 25 },
+        { color: "#fd79a8", position: 50 },
+        { color: "#fdcb6e", position: 75 },
+        { color: "#ffeaa7", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "neon-violet",
+    name: "Neon Violet",
+    category: "vibrant",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#f0f9ff", position: 0 },
+        { color: "#55a3ff", position: 25 },
+        { color: "#74b9ff", position: 50 },
+        { color: "#a29bfe", position: 75 },
+        { color: "#dda8dd", position: 100 }
+      ]
+    }
+  },
+  // ============================================
+  // Dark gradients - moody and sophisticated
+  // ============================================
+  {
+    id: "dark-ember",
+    name: "Dark Ember",
+    category: "dark",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#1a2026", position: 0 },
+        { color: "#872816", position: 50 },
+        { color: "#c4710b", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "deep-teal",
+    name: "Deep Teal",
+    category: "dark",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#011f26", position: 0 },
+        { color: "#4a8c8c", position: 50 },
+        { color: "#fab062", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "midnight-blue",
+    name: "Midnight Blue",
+    category: "dark",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#141421", position: 0 },
+        { color: "#547c8c", position: 50 },
+        { color: "#d6907c", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "dark-navy",
+    name: "Dark Navy",
+    category: "dark",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#11192d", position: 0 },
+        { color: "#283b8c", position: 50 },
+        { color: "#58d8db", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "midnight-indigo",
+    name: "Midnight Indigo",
+    category: "dark",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#120a2d", position: 0 },
+        { color: "#164782", position: 50 },
+        { color: "#e2a359", position: 100 }
+      ]
+    }
+  },
+  // ============================================
+  // Warm gradients - cozy and inviting
+  // ============================================
+  {
+    id: "autumn-warmth",
+    name: "Autumn Warmth",
+    category: "warm",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#dac7be", position: 0 },
+        { color: "#f7e7ce", position: 25 },
+        { color: "#e9c46a", position: 50 },
+        { color: "#f4a261", position: 75 },
+        { color: "#e76f51", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "sunrise-glow",
+    name: "Sunrise Glow",
+    category: "warm",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#4f5d75", position: 0 },
+        { color: "#bfc0c0", position: 33 },
+        { color: "#ffffff", position: 67 },
+        { color: "#ffd166", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "terracotta",
+    name: "Terracotta",
+    category: "warm",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#a0756c", position: 0 },
+        { color: "#f4f3ee", position: 25 },
+        { color: "#e9c46a", position: 50 },
+        { color: "#f4a261", position: 75 },
+        { color: "#e76f51", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "coastal-blue",
+    name: "Coastal Blue",
+    category: "warm",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#6b8e8e", position: 0 },
+        { color: "#f7f9fc", position: 25 },
+        { color: "#a8dadc", position: 50 },
+        { color: "#457b9d", position: 75 },
+        { color: "#1d3557", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "plum-wine",
+    name: "Plum Wine",
+    category: "warm",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#8d7b8b", position: 0 },
+        { color: "#f8f4f9", position: 25 },
+        { color: "#dda0dd", position: 50 },
+        { color: "#ba68c8", position: 75 },
+        { color: "#8e24aa", position: 100 }
+      ]
+    }
+  },
+  // ============================================
+  // Cool gradients - fresh and calming
+  // ============================================
+  {
+    id: "ocean-mist",
+    name: "Ocean Mist",
+    category: "cool",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fff2ef", position: 0 },
+        { color: "#ffdbba", position: 33 },
+        { color: "#f7a5a5", position: 67 },
+        { color: "#5d688a", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "arctic-sky",
+    name: "Arctic Sky",
+    category: "cool",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#b8cced", position: 0 },
+        { color: "#f6e7e4", position: 33 },
+        { color: "#fbf4f9", position: 67 },
+        { color: "#f6e4f2", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "rose-blush",
+    name: "Rose Blush",
+    category: "cool",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#ffecc0", position: 0 },
+        { color: "#ffc29b", position: 33 },
+        { color: "#f39f9f", position: 67 },
+        { color: "#b95e82", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "violet-pink",
+    name: "Violet Pink",
+    category: "cool",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fed2e2", position: 0 },
+        { color: "#c68efd", position: 33 },
+        { color: "#e9a5f1", position: 67 },
+        { color: "#8f87f1", position: 100 }
+      ]
+    }
+  },
+  // ============================================
+  // Neutral gradients - elegant and balanced
+  // ============================================
+  {
+    id: "silver-mist",
+    name: "Silver Mist",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#bcb6ff", position: 0 },
+        { color: "#b8e1ff", position: 33 },
+        { color: "#a9fff7", position: 67 },
+        { color: "#94fbab", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "glacier-blue",
+    name: "Glacier Blue",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#cae5ff", position: 0 },
+        { color: "#acedff", position: 25 },
+        { color: "#89bbfe", position: 50 },
+        { color: "#6f8ab7", position: 75 },
+        { color: "#615d6c", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "lavender-sky",
+    name: "Lavender Sky",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#9381ff", position: 0 },
+        { color: "#b8b8ff", position: 25 },
+        { color: "#f8f7ff", position: 50 },
+        { color: "#ffeedd", position: 75 },
+        { color: "#ffd8be", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "rustic-autumn",
+    name: "Rustic Autumn",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#780116", position: 0 },
+        { color: "#f7b538", position: 25 },
+        { color: "#db7c26", position: 50 },
+        { color: "#d8572a", position: 75 },
+        { color: "#c32f27", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "steel-blue",
+    name: "Steel Blue",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#0d1321", position: 0 },
+        { color: "#1d2d44", position: 33 },
+        { color: "#3e5c76", position: 67 },
+        { color: "#748cab", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "sunset-coral",
+    name: "Sunset Coral",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#fefeff", position: 0 },
+        { color: "#d6efff", position: 25 },
+        { color: "#fed18c", position: 50 },
+        { color: "#fed99b", position: 75 },
+        { color: "#fe654f", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "sage-garden",
+    name: "Sage Garden",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#b8d8ba", position: 0 },
+        { color: "#d9dbbc", position: 33 },
+        { color: "#fcddbc", position: 67 },
+        { color: "#ef959d", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "moody-night",
+    name: "Moody Night",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#151e3f", position: 0 },
+        { color: "#030027", position: 25 },
+        { color: "#f2f3d9", position: 50 },
+        { color: "#dc9e82", position: 75 },
+        { color: "#c16e70", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "graphite-stone",
+    name: "Graphite Stone",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#14110f", position: 0 },
+        { color: "#34312d", position: 25 },
+        { color: "#7e7f83", position: 50 },
+        { color: "#d9c5b2", position: 75 },
+        { color: "#f3f3f4", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "pink-teal",
+    name: "Pink Teal",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#d12383", position: 0 },
+        { color: "#de4d86", position: 25 },
+        { color: "#f29ca3", position: 50 },
+        { color: "#f7cacd", position: 75 },
+        { color: "#84e6f8", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "teal-beige",
+    name: "Teal Beige",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#0892a5", position: 0 },
+        { color: "#06908f", position: 25 },
+        { color: "#0ca4a5", position: 50 },
+        { color: "#dbb68f", position: 75 },
+        { color: "#dbbaa9", position: 100 }
+      ]
+    }
+  },
+  {
+    id: "forest-mint",
+    name: "Forest Mint",
+    category: "neutral",
+    value: {
+      type: "linear",
+      angle: 135,
+      stops: [
+        { color: "#d7fff1", position: 0 },
+        { color: "#aafcb8", position: 25 },
+        { color: "#8cd790", position: 50 },
+        { color: "#77af9c", position: 75 },
+        { color: "#285943", position: 100 }
+      ]
+    }
+  }
+];
+function getGradientPresetById(id) {
+  return gradientPresets.find((p) => p.id === id);
+}
+function getGradientCategories() {
+  return ["warm", "cool", "vibrant", "pastel", "dark", "neutral"];
+}
+const defaultSolidColors = [
+  "#4a90e2",
+  // Blue
+  "#e24a4a",
+  // Red
+  "#4ae24a",
+  // Green
+  "#e2e24a",
+  // Yellow
+  "#e24ae2",
+  // Magenta
+  "#4ae2e2",
+  // Cyan
+  "#ffffff",
+  // White
+  "#000000",
+  // Black
+  "#888888",
+  // Gray
+  "#ff6b6b",
+  // Coral
+  "#4ecdc4",
+  // Teal
+  "#95e1d3",
+  // Mint
+  "#f38181",
+  // Salmon
+  "#aa96da",
+  // Lavender
+  "#fcbad3",
+  // Pink
+  "#ffffd2"
+  // Cream
+];
+const size$9 = createSizeConfig();
+const schema$f = size$9.schema.extend({
+  shapeType: z.enum(["rectangle", "ellipse", "circle", "triangle", "polygon"]).default("rectangle").describe(
+    "Shape: rectangle (w×h), ellipse (w×h, rounded), circle (radius), triangle, polygon (sides)."
+  ).register(fieldRegistry, { interpolationFamily: "discrete", label: "Shape" }),
+  background: BackgroundValueSchema.optional().default(getGradientPresetById("baby-blue").value).describe("Fill: solid hex color (e.g., #4a90e2) or gradient object (linear, radial, conic).").register(fieldRegistry, {
+    widget: "background",
+    interpolationFamily: "discrete",
+    label: "Fill"
+  }),
+  stroke: z.string().default("#000000").describe("Outline color in hex.").register(fieldRegistry, {
+    group: "stroke",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Stroke"
+  }),
+  strokeWidth: z.number().default(0).describe("Outline thickness as % of project width. 0 = no stroke.").register(fieldRegistry, {
+    group: "stroke",
+    interpolationFamily: "continuous",
+    label: "Width",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 5
+  }),
+  borderRadius: z.number().default(0).optional().describe("Corner radius for rectangles as % of project width.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Corner Radius",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 60
+  }),
+  radius: z.number().default(7.8).optional().describe("Radius for circle/polygon as % of project width (center to edge).").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Radius",
+    postFix: "%",
+    step: 0.1,
+    min: 0.1,
+    max: 80
+  }),
+  sides: z.number().min(3).max(12).default(6).optional().describe(
+    "Number of sides for polygon: 3=triangle, 4=diamond, 6=hexagon... Quantized or continuous interpolation."
+  ).register(fieldRegistry, {
+    interpolationFamily: ["quantized", "continuous"],
+    label: "Sides"
+  })
+});
+const meta$f = {
+  category: "shape",
+  schema: schema$f,
+  type: "shape",
+  label: "Shape",
+  description: "Geometric shapes (rectangle, ellipse, circle, triangle, polygon) with background and stroke",
+  propertyGroups: [size$9.propertyGroup, { id: "stroke", label: "Stroke" }],
+  middleware: size$9.middleware
+};
+const schema$e = z.object({
+  pointerType: z.enum(["arrow", "pointer", "hand", "crosshair", "text"]).default("arrow").describe(
+    "Cursor type: arrow (default), pointer (click), hand (grab), crosshair (precision), text (I-beam)."
+  ).register(fieldRegistry, { interpolationFamily: "discrete", label: "Cursor" }),
+  size: z.number().default(1.875).describe("Cursor size as % of project width.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Size",
+    postFix: "%",
+    step: 0.1,
+    min: 0.1,
+    max: 5
+  }),
+  color: z.string().default("#ffffff").describe("Cursor icon color in hex. Contrast with background.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Cursor Color"
+  }),
+  backgroundColor: z.string().default("#000000").describe("Background circle color in hex.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Background"
+  })
+});
+const meta$e = {
+  category: "ui",
+  schema: schema$e,
+  type: "mouse",
+  label: "Mouse Cursor",
+  description: "Mouse cursor pointer (arrow, hand, crosshair, text) for UI demonstrations",
+  propertyGroups: [{ id: "appearance", label: "Appearance" }]
+};
+const CommonIcons = {
+  // Arrows & Navigation
+  ArrowRight: "arrow-right",
+  ArrowLeft: "arrow-left",
+  ArrowUp: "arrow-up",
+  ArrowDown: "arrow-down",
+  ChevronRight: "chevron-right",
+  ChevronLeft: "chevron-left",
+  ChevronUp: "chevron-up",
+  ChevronDown: "chevron-down",
+  // Actions
+  Check: "check",
+  X: "x",
+  Plus: "plus",
+  Minus: "minus",
+  Play: "play",
+  Pause: "pause",
+  Download: "download",
+  Upload: "upload",
+  Share: "share",
+  Send: "send",
+  Copy: "copy",
+  Trash: "trash",
+  Edit: "edit",
+  Search: "search",
+  // Objects
+  Star: "star",
+  Heart: "heart",
+  Bell: "bell",
+  Home: "home",
+  Settings: "settings",
+  User: "user",
+  Users: "users",
+  Mail: "mail",
+  Phone: "phone",
+  Calendar: "calendar",
+  Clock: "clock",
+  Lock: "lock",
+  Unlock: "unlock",
+  Key: "key",
+  Shield: "shield",
+  Zap: "zap",
+  Sparkles: "sparkles",
+  Rocket: "rocket",
+  Target: "target",
+  Award: "award",
+  Trophy: "trophy",
+  Gift: "gift",
+  Camera: "camera",
+  Image: "image",
+  Video: "video",
+  Music: "music",
+  Mic: "mic",
+  Volume2: "volume-2",
+  Wifi: "wifi",
+  Cloud: "cloud",
+  Database: "database",
+  Server: "server",
+  Code: "code",
+  Terminal: "terminal",
+  Globe: "globe",
+  MapPin: "map-pin",
+  Compass: "compass",
+  Sun: "sun",
+  Moon: "moon",
+  Lightbulb: "lightbulb",
+  Flame: "flame",
+  Bookmark: "bookmark",
+  Tag: "tag",
+  Hash: "hash",
+  AtSign: "at-sign",
+  Link: "link",
+  ExternalLink: "external-link",
+  Paperclip: "paperclip",
+  // Shapes & UI
+  Circle: "circle",
+  Square: "square",
+  Triangle: "triangle",
+  Hexagon: "hexagon",
+  Menu: "menu",
+  MoreHorizontal: "more-horizontal",
+  MoreVertical: "more-vertical",
+  Grid: "grid",
+  Layout: "layout",
+  Layers: "layers",
+  Box: "box",
+  Package: "package",
+  Fullscreen: "fullscreen",
+  // Brands & Social (generic names)
+  Github: "github",
+  Twitter: "twitter",
+  Facebook: "facebook",
+  Instagram: "instagram",
+  Linkedin: "linkedin",
+  Youtube: "youtube"
+};
+const commonIconValues = Object.values(CommonIcons);
+const schema$d = z.object({
+  icon: z.enum(commonIconValues).default("star").describe("Lucide icon name (e.g., star, heart, rocket, arrow-right, github).").register(fieldRegistry, { interpolationFamily: "discrete", label: "Icon" }),
+  size: z.number().default(5).describe("Icon size (width & height) as % of project width.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Size",
+    postFix: "%",
+    step: 0.1,
+    min: 0.1,
+    max: 40
+  }),
+  color: z.string().default("#ffffff").describe("Stroke/outline color in hex.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Stroke"
+  }),
+  strokeWidth: z.number().default(0.156).describe("Stroke thickness as % of project width.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Stroke Width",
+    postFix: "%",
+    step: 0.05,
+    min: 0,
+    max: 1
+  }),
+  fill: z.string().default("none").describe('Fill color in hex. "none" = outline only.').register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Fill"
+  }),
+  backgroundColor: z.string().default("transparent").describe('Background color in hex. "transparent" = none.').register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Background"
+  }),
+  backgroundRadius: z.number().default(0).describe("Background corner radius as % of project width. ~size/2 for circle.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Background Radius",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 30
+  }),
+  backgroundPadding: z.number().default(0).describe("Padding between icon and background edge as % of project width.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Background Padding",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 10
+  })
+});
+const meta$d = {
+  category: "shape",
+  schema: schema$d,
+  type: "icon",
+  label: "Icon",
+  description: "Lucide icons with customizable size, color, stroke, and optional background"
+};
+const size$8 = createSizeConfig({
+  width: { min: 23, max: 156, default: 80 },
+  height: { min: 23, max: 94, default: 47 }
+});
+const schema$c = size$8.schema.extend({
+  url: z.string().optional().describe("URL to load in the browser iframe. Some sites block embedding (X-Frame-Options).").register(fieldRegistry, { group: "iframe", label: "URL" }),
+  zoom: z.number().default(1).describe("Iframe zoom: 1 = normal, 0.5 = half, 2 = double.").register(fieldRegistry, {
+    group: "iframe",
+    interpolationFamily: "continuous",
+    label: "Zoom",
+    min: 0.1,
+    max: 5,
+    step: 0.1,
+    postFix: "x"
+  })
+});
+const meta$c = {
+  category: "code",
+  schema: schema$c,
+  type: "browser",
+  label: "Browser",
+  description: "Realistic dark-themed browser window with minimal chrome",
+  isContainer: true,
+  propertyGroups: [size$8.propertyGroup, { id: "iframe", label: "Iframe" }],
+  middleware: size$8.middleware
+};
+const schema$b = z.object({
+  code: z.string().default('const hello = "world";').describe("Source code with syntax highlighting. Multi-line via newlines."),
+  language: z.enum(["javascript", "typescript", "python", "html", "css", "json", "bash", "text"]).default("javascript").describe('Programming language for syntax coloring. Use "text" for no highlighting.'),
+  fontSize: z.number().default(1.25).describe("Font size as % of project width. Monospace font.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Font Size",
+    postFix: "%",
+    step: 0.1,
+    min: 0.1,
+    max: 3
+  }),
+  lineHeight: z.number().default(1.5).describe("Line spacing multiplier. 1.0 = compact, 1.5 = comfortable, 2.0 = spacious.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Line Height",
+    step: 0.1,
+    min: 1,
+    max: 3
+  }),
+  width: z.number().default(39).describe("Editor window width as % of project width.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Width",
+    postFix: "%",
+    min: 8,
+    max: 94
+  }),
+  maxHeight: z.number().default(31).describe(
+    "Max height of code area as % of project width. Content beyond scrolls (not rendered)."
+  ).register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Max Height",
+    postFix: "%",
+    min: 4,
+    max: 62
+  }),
+  backgroundColor: z.string().default("#1e1e1e").describe("Editor body background color in hex (VS Code dark: #1e1e1e)."),
+  textColor: z.string().default("#d4d4d4").describe("Default text color in hex. Contrast with background."),
+  keywordColor: z.string().default("#569cd6").describe("Keyword color in hex (const, let, function, if, class...)."),
+  stringColor: z.string().default("#ce9178").describe("String literal color in hex."),
+  commentColor: z.string().default("#6a9955").describe("Comment color in hex (//, /* */, #)."),
+  numberColor: z.string().default("#b5cea8").describe("Numeric literal color in hex."),
+  showLineNumbers: z.boolean().default(true).describe("Show line number gutter on the left."),
+  lineNumberColor: z.string().default("#858585").describe("Line number text color in hex. Subtle relative to code."),
+  padding: z.number().default(1.5).describe("Inner padding as % of project width.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Padding",
+    postFix: "%",
+    step: 0.1,
+    min: 0.1,
+    max: 4
+  }),
+  borderRadius: z.number().default(0.625).describe("Corner radius as % of project width. 0 = sharp.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Border Radius",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 3
+  }),
+  showHeader: z.boolean().default(true).describe("Show editor header bar with traffic lights and filename."),
+  fileName: z.string().default("index.js").describe("Filename in header bar. Match extension to language."),
+  headerColor: z.string().default("#2d2d2d").describe("Header bar background in hex. Slightly different from body.")
+});
+const meta$b = {
+  category: "code",
+  schema: schema$b,
+  type: "code",
+  label: "Code Block",
+  description: "Code editor window with syntax highlighting for multiple languages and line numbers"
+};
+const schema$a = z.object({
+  collapsed: z.boolean().default(false).describe("Internal: UI collapsed state.").register(fieldRegistry, { hidden: true }),
+  background: BackgroundValueSchema.optional().describe("Background fill for the group area (solid hex or gradient object).").register(fieldRegistry, { widget: "background", interpolationFamily: "discrete" }),
+  filterType: z.enum(["none", "glitch", "pixelate", "chromatic"]).default("none").describe(
+    "Visual filter on all children: glitch (tear+RGB split), pixelate (block posterize), chromatic (color fringe)."
+  ).register(fieldRegistry, { interpolationFamily: "discrete", label: "Filter" })
+});
+const meta$a = {
+  category: "ui",
+  schema: schema$a,
+  type: "group",
+  label: "Folder",
+  description: "A folder container that holds multiple child layers with linked transforms",
+  isContainer: true
+};
+const size$7 = createSizeConfig({
+  width: { min: 1, max: 400, default: 31 },
+  height: { min: 1, max: 400, default: 16 }
+});
+const schema$9 = size$7.schema.extend({
+  html: z.string().default('<div class="container">Hello World</div>').describe(
+    'HTML markup. Use {{var1}}–{{var5}} (text), {{num1}}–{{num3}} (numbers), {{color1}}/{{color2}} (hex colors), {{show1}}/{{show2}} ("block"/"none"). Supports data-dm-keyframe-props-* for dynamic CSS.'
+  ).register(fieldRegistry, {
+    widget: "textarea",
+    interpolationFamily: "discrete",
+    label: "HTML"
+  }),
+  css: z.string().default(
+    `.container {
+  padding: 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  color: white;
+  font-family: 'Inter', sans-serif;
+}`
+  ).describe(
+    "Scoped CSS. Selectors auto-namespaced to this layer. Use {{varName}} for variable interpolation."
+  ).register(fieldRegistry, {
+    widget: "textarea",
+    interpolationFamily: "discrete",
+    label: "CSS"
+  }),
+  scripts: z.array(z.object({ src: z.string().optional(), code: z.string().optional() })).optional().register(fieldRegistry, { hidden: true }),
+  var1: z.string().default("").describe("Text variable → {{var1}}. Animatable (text interpolation).").register(fieldRegistry, { interpolationFamily: "text", label: "var1" }),
+  var2: z.string().default("").describe("Text variable → {{var2}}. Animatable.").register(fieldRegistry, { interpolationFamily: "text", label: "var2" }),
+  var3: z.string().default("").describe("Text variable → {{var3}}. Animatable.").register(fieldRegistry, { interpolationFamily: "text", label: "var3" }),
+  var4: z.string().default("").describe("Text variable → {{var4}}. Animatable.").register(fieldRegistry, { interpolationFamily: "text", label: "var4" }),
+  var5: z.string().default("").describe("Text variable → {{var5}}. Animatable.").register(fieldRegistry, { interpolationFamily: "text", label: "var5" }),
+  num1: z.number().default(0).describe("Number variable → {{num1}}. Animatable (continuous).").register(fieldRegistry, { interpolationFamily: "continuous", label: "num1" }),
+  num2: z.number().default(0).describe("Number variable → {{num2}}. Animatable.").register(fieldRegistry, { interpolationFamily: "continuous", label: "num2" }),
+  num3: z.number().default(0).describe("Number variable → {{num3}}. Animatable.").register(fieldRegistry, { interpolationFamily: "continuous", label: "num3" }),
+  color1: z.string().default("#ffffff").describe("Color variable → {{color1}} as hex. Animatable between colors.").register(fieldRegistry, { interpolationFamily: "continuous", label: "color1" }),
+  color2: z.string().default("#000000").describe("Color variable → {{color2}} as hex. Animatable between colors.").register(fieldRegistry, { interpolationFamily: "continuous", label: "color2" }),
+  show1: z.boolean().default(true).describe('Show/hide → {{show1}}: "block" (true) or "none" (false).').register(fieldRegistry, { interpolationFamily: "discrete", label: "show1" }),
+  show2: z.boolean().default(true).describe('Show/hide → {{show2}}: "block" (true) or "none" (false).').register(fieldRegistry, { interpolationFamily: "discrete", label: "show2" })
+});
+const meta$9 = {
+  category: "code",
+  schema: schema$9,
+  type: "html",
+  label: "HTML/CSS",
+  description: "Custom HTML/CSS with interpolation. Supports data-dm-keyframe-props-* for dynamic CSS animation.",
+  propertyGroups: [size$7.propertyGroup, { id: "variables", label: "Variables" }],
+  middleware: size$7.middleware
+};
+const size$6 = createSizeConfig({
+  width: { max: 400, default: 56 },
+  height: { max: 400, default: 100 }
+});
+const schema$8 = size$6.schema.extend({
+  src: z.string().default("").describe("Image URL (external or uploaded). Empty = placeholder.").register(fieldRegistry, { widget: "upload", mediaType: "image", label: "Image" }),
+  objectFit: z.enum(["contain", "cover", "fill", "none", "scale-down"]).default("cover").describe(
+    "Fit mode: cover (crop to fill), contain (fit, may letterbox), fill (stretch), none (original size), scale-down."
+  ).register(fieldRegistry, { interpolationFamily: "discrete", label: "Fit" }),
+  borderRadius: z.number().default(0).describe("Corner radius as % of project width. ~50% for circle crop.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Radius",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 60
+  }),
+  fileKey: z.string().default("").describe("Internal: S3 storage key for cleanup.").register(fieldRegistry, { hidden: true }),
+  fileName: z.string().default("").describe("Internal: original filename for alt text.").register(fieldRegistry, { hidden: true }),
+  attribution: z.object({
+    imageUrl: z.string(),
+    authorUrl: z.string(),
+    authorName: z.string()
+  }).optional().describe("Internal: Lummi stock image attribution.").register(fieldRegistry, { hidden: true })
+});
+const meta$8 = {
+  category: "media",
+  schema: schema$8,
+  type: "image",
+  label: "Image",
+  description: "Display images from URL or uploaded files with configurable size and object-fit modes",
+  propertyGroups: [size$6.propertyGroup],
+  middleware: size$6.middleware
+};
+const size$5 = createSizeConfig({
+  width: { min: 16, max: 156, default: 62 },
+  height: { min: 12, max: 117, default: 39 }
+});
+const schema$7 = size$5.schema.extend({
+  url: z.string().optional().describe("URL to display on screen. Empty = show child layers.").register(fieldRegistry, { group: "iframe", label: "URL" }),
+  zoom: z.number().default(1).describe("Iframe zoom: 1 = normal, 0.5 = half, 2 = double.").register(fieldRegistry, {
+    group: "iframe",
+    interpolationFamily: "continuous",
+    label: "Zoom",
+    postFix: "x",
+    step: 0.1,
+    min: 0.1,
+    max: 5
+  }),
+  openAngle: z.number().default(110).describe("Screen lid angle in degrees: 0 = closed, 90 = perpendicular, 180 = flat.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Open Angle",
+    postFix: "°",
+    step: 1,
+    min: 0,
+    max: 180
+  }),
+  baseColor: z.string().default("#c0c0c0").describe("Laptop base/body color in hex.").register(fieldRegistry, { label: "Base Color", widget: "color" }),
+  screenColor: z.string().default("#2d2d2d").describe("Screen bezel/lid color in hex.").register(fieldRegistry, { label: "Screen Color", widget: "color" })
+});
+const meta$7 = {
+  category: "code",
+  schema: schema$7,
+  type: "laptop",
+  label: "Laptop",
+  description: "A 3D laptop with adjustable screen angle and URL display",
+  isContainer: true,
+  propertyGroups: [size$5.propertyGroup, { id: "iframe", label: "Iframe" }],
+  middleware: size$5.middleware
+};
+const size$4 = createSizeConfig({
+  width: { min: 16, max: 47, default: 29 },
+  height: { min: 31, max: 94, default: 52 }
+});
+const schema$6 = size$4.schema.extend({
+  url: z.string().optional().describe("URL to load in sandboxed iframe at mobile viewport. Some sites block embedding.").register(fieldRegistry, { group: "iframe", label: "URL" }),
+  zoom: z.number().default(1).describe("Iframe zoom: 1 = normal, 0.5 = half, 2 = double.").register(fieldRegistry, {
+    group: "iframe",
+    interpolationFamily: "continuous",
+    label: "Zoom",
+    postFix: "x",
+    step: 0.1,
+    min: 0.1,
+    max: 5
+  }),
+  phoneColor: z.string().default("#1f2937").describe("Phone body/bezel color in hex.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Frame Color"
+  }),
+  notchHeight: z.number().default(2.2).describe("Notch/dynamic island height as % of project width.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    label: "Notch Height",
+    postFix: "%",
+    step: 0.1,
+    min: 0.5,
+    max: 4
+  }),
+  showNotch: z.boolean().default(true).describe("Show camera notch at top of screen.").register(fieldRegistry, { interpolationFamily: "discrete", label: "Show Notch" }),
+  borderRadius: z.number().default(3.1).describe("Phone corner radius as % of project width.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Corner Radius",
+    postFix: "%",
+    step: 0.1,
+    min: 0.5,
+    max: 6
+  }),
+  bezelWidth: z.number().max(3).default(0.94).describe("Bezel border width as % of project width.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    label: "Bezel",
+    postFix: "%",
+    step: 0.1
+  })
+});
+const meta$6 = {
+  category: "ui",
+  schema: schema$6,
+  type: "phone",
+  label: "Phone",
+  description: "Mobile phone mockup with notch, bezel, and iframe for app/website previews",
+  isContainer: true,
+  propertyGroups: [
+    size$4.propertyGroup,
+    { id: "appearance", label: "Appearance" },
+    { id: "iframe", label: "Iframe" }
+  ],
+  middleware: size$4.middleware
+};
+const size$3 = createSizeConfig({
+  width: { min: 16, max: 156, default: 47 },
+  height: { min: 12, max: 156, default: 31 }
+});
+const schema$5 = size$3.schema.extend({
+  title: z.string().default("Terminal").describe('Header title (e.g., "bash", "~/projects"). Animatable (text interpolation).').register(fieldRegistry, { interpolationFamily: "text", label: "Title" }),
+  content: z.string().default("$ Welcome to terminal").describe("Terminal body text. Multi-line via newlines. Animatable (text interpolation).").register(fieldRegistry, {
+    widget: "textarea",
+    interpolationFamily: "text",
+    label: "Content"
+  }),
+  fontSize: z.number().default(1.1).describe("Font size as % of project width. Monospace.").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Font Size",
+    postFix: "%",
+    step: 0.1,
+    min: 0.1,
+    max: 2.5
+  }),
+  backgroundColor: z.string().default("#1e1e1e").describe("Terminal body background in hex.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Background"
+  }),
+  textColor: z.string().default("#00ff00").describe("Text color in hex (classic: #00ff00 green, #ffffff white).").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Text Color"
+  }),
+  borderColor: z.string().default("#404040").describe("Border color in hex. Visible when showBorder is true.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Border Color"
+  }),
+  showBorder: z.boolean().default(true).describe("Draw 1px border around terminal window.").register(fieldRegistry, { interpolationFamily: "discrete", label: "Show Border" })
+});
+const meta$5 = {
+  category: "code",
+  schema: schema$5,
+  type: "terminal",
+  label: "Terminal",
+  description: "Terminal window with customizable content, colors, and monospace font display",
+  propertyGroups: [size$3.propertyGroup, { id: "appearance", label: "Appearance" }],
+  middleware: size$3.middleware
+};
+const GOOGLE_FONTS_BY_CATEGORY = {
+  "Sans-Serif": {
+    Inter: "Inter",
+    Roboto: "Roboto",
+    Poppins: "Poppins",
+    Manrope: "Manrope",
+    OpenSans: "Open Sans",
+    Montserrat: "Montserrat",
+    Lato: "Lato",
+    DMSans: "DM Sans",
+    Nunito: "Nunito",
+    Raleway: "Raleway",
+    SourceSans3: "Source Sans 3",
+    Oswald: "Oswald",
+    Ubuntu: "Ubuntu",
+    WorkSans: "Work Sans",
+    Quicksand: "Quicksand",
+    Mulish: "Mulish",
+    Barlow: "Barlow",
+    Outfit: "Outfit"
+  },
+  Serif: {
+    PlayfairDisplay: "Playfair Display",
+    Merriweather: "Merriweather",
+    LoraFont: "Lora",
+    EBGaramond: "EB Garamond",
+    Crimson: "Crimson Text"
+  },
+  "Handwriting & Script": {
+    Pacifico: "Pacifico",
+    DancingScript: "Dancing Script",
+    Caveat: "Caveat",
+    IndieFlower: "Indie Flower",
+    ShadowsIntoLight: "Shadows Into Light",
+    PermanentMarker: "Permanent Marker",
+    KaushanScript: "Kaushan Script",
+    Satisfy: "Satisfy",
+    GreatVibes: "Great Vibes",
+    Parisienne: "Parisienne"
+  },
+  "Display & Decorative": {
+    Bangers: "Bangers",
+    Righteous: "Righteous",
+    Bebas: "Bebas Neue",
+    Anton: "Anton",
+    Audiowide: "Audiowide",
+    FredokaOne: "Fredoka One",
+    RussoOne: "Russo One",
+    Wallpoet: "Wallpoet",
+    Bungee: "Bungee",
+    PressStart2P: "Press Start 2P"
+  },
+  Monospace: {
+    RobotoMono: "Roboto Mono",
+    SourceCodePro: "Source Code Pro",
+    JetBrainsMono: "JetBrains Mono",
+    FiraCode: "Fira Code",
+    Courier: "Courier Prime"
+  },
+  Rounded: {
+    Comfortaa: "Comfortaa",
+    VarelaRound: "Varela Round",
+    Fredoka: "Fredoka",
+    Chewy: "Chewy"
+  },
+  Condensed: {
+    OswaldCondensed: "Oswald",
+    FjallaOne: "Fjalla One",
+    PathwayGothicOne: "Pathway Gothic One"
+  }
+};
+Object.values(GOOGLE_FONTS_BY_CATEGORY).reduce(
+  (acc, category) => ({ ...acc, ...category }),
+  {}
+);
+const FONT_CATEGORIES = {
+  "Sans-Serif": Object.values(GOOGLE_FONTS_BY_CATEGORY["Sans-Serif"]),
+  Serif: Object.values(GOOGLE_FONTS_BY_CATEGORY.Serif),
+  "Handwriting & Script": Object.values(GOOGLE_FONTS_BY_CATEGORY["Handwriting & Script"]),
+  "Display & Decorative": Object.values(GOOGLE_FONTS_BY_CATEGORY["Display & Decorative"]),
+  Monospace: Object.values(GOOGLE_FONTS_BY_CATEGORY.Monospace),
+  Rounded: Object.values(GOOGLE_FONTS_BY_CATEGORY.Rounded),
+  Condensed: Object.values(GOOGLE_FONTS_BY_CATEGORY.Condensed)
+};
+const CATEGORY_LABELS = {
+  "Sans-Serif": "Sans-Serif",
+  Serif: "Serif",
+  "Handwriting & Script": "Handwriting & Script",
+  "Display & Decorative": "Display & Decorative",
+  Monospace: "Monospace",
+  Rounded: "Rounded",
+  Condensed: "Condensed"
+};
+const googleFontValues = Object.values(FONT_CATEGORIES).flat();
+const fontCategoriesArray = Object.entries(FONT_CATEGORIES).map(([category, fonts]) => ({
+  label: CATEGORY_LABELS[category],
+  category,
+  fonts
+}));
+const SINGLE_WEIGHT_FONTS = /* @__PURE__ */ new Set([
+  "Pacifico",
+  "Permanent Marker",
+  "Press Start 2P",
+  "Fredoka One",
+  "Russo One",
+  "Wallpoet",
+  "Bebas Neue",
+  "Anton",
+  "Audiowide",
+  "Righteous",
+  "Bangers",
+  "Bungee",
+  "Great Vibes",
+  "Parisienne",
+  "Satisfy",
+  "Kaushan Script",
+  "Chewy",
+  "Fjalla One",
+  "Pathway Gothic One"
+]);
+function getGoogleFontUrl(fontFamily) {
+  const encodedFamily = fontFamily.replace(/ /g, "+");
+  if (SINGLE_WEIGHT_FONTS.has(fontFamily)) {
+    return `https://fonts.googleapis.com/css2?family=${encodedFamily}&display=swap`;
+  }
+  return `https://fonts.googleapis.com/css2?family=${encodedFamily}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
+}
+const size$2 = createSizeConfig({
+  width: { min: 4, max: 39, default: 9 },
+  height: { min: 2, max: 12, default: 4 }
+});
+const schema$4 = size$2.schema.extend({
+  text: z.string().default("Click me").describe("Button label text. Animatable with text interpolation (typewriter reveal).").register(fieldRegistry, { interpolationFamily: "text", label: "Text" }),
+  fontSize: z.number().default(1.25).describe("Font size as % of project width.").register(fieldRegistry, {
+    group: "typography",
+    interpolationFamily: "continuous",
+    label: "Font Size",
+    postFix: "%",
+    step: 0.1,
+    min: 0.1,
+    max: 2.5
+  }),
+  fontFamily: z.enum(googleFontValues).optional().describe("Google Fonts font family.").register(fieldRegistry, {
+    group: "typography",
+    interpolationFamily: "discrete",
+    label: "Font"
+  }),
+  fontWeight: z.enum(["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900"]).default("bold").describe('Font weight: 100 (thin) to 900 (black), or "normal"/"bold".').register(fieldRegistry, {
+    group: "typography",
+    interpolationFamily: "discrete",
+    label: "Weight"
+  }),
+  backgroundColor: z.string().default(BRAND_COLORS.blue).describe("Background fill color in hex (e.g., #4a90e2).").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Background"
+  }),
+  textColor: z.string().default("#ffffff").describe("Text color in hex. Should contrast with background.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Text Color"
+  }),
+  borderColor: z.string().default(BRAND_COLORS.blue).describe("Border color in hex. Used in outline/ghost styles.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Border"
+  }),
+  borderRadius: z.number().default(0.625).describe("Corner radius as % of project width. ~50% = pill shape.").register(fieldRegistry, {
+    group: "style",
+    interpolationFamily: "continuous",
+    label: "Radius",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 50
+  }),
+  style: z.enum(["solid", "outline", "ghost"]).default("solid").describe("Visual variant: solid (filled), outline (transparent+border), ghost (transparent).").register(fieldRegistry, { group: "style", interpolationFamily: "discrete", label: "Style" }),
+  shadow: z.boolean().default(true).describe("Show drop shadow for depth.").register(fieldRegistry, { interpolationFamily: "discrete", label: "Shadow" })
+});
+const meta$4 = {
+  category: "shape",
+  schema: schema$4,
+  type: "button",
+  label: "Button",
+  description: "Interactive button with solid, outline, or ghost styles and customizable appearance",
+  propertyGroups: [
+    size$2.propertyGroup,
+    { id: "typography", label: "Typography" },
+    { id: "appearance", label: "Appearance" },
+    { id: "style", label: "Style" }
+  ],
+  middleware: size$2.middleware
+};
+const EASING_VALUES = [
+  "linear",
+  "ease-in",
+  "ease-out",
+  "ease-in-out",
+  // Quad
+  "ease-in-quad",
+  "ease-out-quad",
+  "ease-in-out-quad",
+  // Cubic
+  "ease-in-cubic",
+  "ease-out-cubic",
+  "ease-in-out-cubic",
+  // Quart
+  "ease-in-quart",
+  "ease-out-quart",
+  "ease-in-out-quart",
+  // Quint
+  "ease-in-quint",
+  "ease-out-quint",
+  "ease-in-out-quint",
+  // Sine
+  "ease-in-sine",
+  "ease-out-sine",
+  "ease-in-out-sine",
+  // Expo
+  "ease-in-expo",
+  "ease-out-expo",
+  "ease-in-out-expo",
+  // Circ
+  "ease-in-circ",
+  "ease-out-circ",
+  "ease-in-out-circ",
+  // Back (overshoots)
+  "ease-in-back",
+  "ease-out-back",
+  "ease-in-out-back",
+  // Bounce
+  "ease-in-bounce",
+  "ease-out-bounce",
+  "ease-in-out-bounce",
+  // Elastic
+  "ease-in-elastic",
+  "ease-out-elastic",
+  "ease-in-out-elastic"
+];
+function easeOutBounce(t) {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+  if (t < 1 / d1) return n1 * t * t;
+  if (t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + 0.75;
+  if (t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + 0.9375;
+  return n1 * (t -= 2.625 / d1) * t + 0.984375;
+}
+function easeInBounce(t) {
+  return 1 - easeOutBounce(1 - t);
+}
+function easeInOutBounce(t) {
+  return t < 0.5 ? (1 - easeOutBounce(1 - 2 * t)) / 2 : (1 + easeOutBounce(2 * t - 1)) / 2;
+}
+function easeInElastic(t) {
+  if (t === 0 || t === 1) return t;
+  return -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * (2 * Math.PI / 3));
+}
+function easeOutElastic(t) {
+  if (t === 0 || t === 1) return t;
+  return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * (2 * Math.PI / 3)) + 1;
+}
+function easeInOutElastic(t) {
+  if (t === 0 || t === 1) return t;
+  return t < 0.5 ? -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * (2 * Math.PI / 4.5))) / 2 : Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * (2 * Math.PI / 4.5)) / 2 + 1;
+}
+const DISCRETE_STRATEGIES = ["step-end", "step-start", "step-mid"];
+const QUANTIZED_STRATEGIES = ["integer", "snap-grid"];
+const TEXT_STRATEGIES = ["char-reveal", "word-reveal"];
+const KEYFRAME_STRATEGIES = [
+  ...EASING_VALUES,
+  ...DISCRETE_STRATEGIES,
+  ...QUANTIZED_STRATEGIES,
+  ...TEXT_STRATEGIES
+];
+function strategyToFamily(strategy) {
+  if (TEXT_STRATEGIES.includes(strategy)) return "text";
+  if (DISCRETE_STRATEGIES.includes(strategy)) return "discrete";
+  if (QUANTIZED_STRATEGIES.includes(strategy)) return "quantized";
+  return "continuous";
+}
+function buildInterpolation(strategy, extras) {
+  if (!strategy) return void 0;
+  const family = strategyToFamily(strategy);
+  if (family === "quantized" && strategy === "snap-grid") {
+    return { family, strategy, increment: extras?.increment ?? 1 };
+  }
+  if (family === "text" && strategy === "word-reveal" && extras?.separator !== void 0) {
+    return { family, strategy, separator: extras.separator };
+  }
+  return { family, strategy };
+}
+const AnchorPointSchema = z.enum([
+  "top-left",
+  "top-center",
+  "top-right",
+  "center-left",
+  "center",
+  "center-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+]);
+const PositionSchema = z.object({
+  x: z.number().describe("X position as % of project width"),
+  y: z.number().describe("Y position as % of project width"),
+  z: z.number().describe("Z depth (px)")
+});
+const RotationSchema = z.object({
+  x: z.number().describe("X rotation (radians)"),
+  y: z.number().describe("Y rotation (radians)"),
+  z: z.number().describe("Z rotation (radians)")
+});
+const ScaleSchema = z.object({
+  x: z.number().min(0).describe("X scale (1 = normal)"),
+  y: z.number().min(0).describe("Y scale (1 = normal)")
+});
+const TransformSchema = z.object({
+  // New nested format
+  position: PositionSchema.optional().default({ x: 0, y: 0, z: 0 }),
+  rotation: RotationSchema.optional().default({ x: 0, y: 0, z: 0 }),
+  scale: ScaleSchema.optional().default({ x: 1, y: 1 }),
+  anchor: AnchorPointSchema.describe("Transform pivot point on the layer").optional().default("center"),
+  positionOrigin: AnchorPointSchema.describe(
+    'Canvas reference for (0,0). Default "center" = (0,0) at canvas center. "top-left" = (0,0) at top-left corner.'
+  ).optional().default("center")
+});
+const TransformPatchSchema = z.object({
+  position: PositionSchema.partial().optional(),
+  rotation: RotationSchema.partial().optional(),
+  scale: ScaleSchema.partial().optional(),
+  anchor: AnchorPointSchema.optional().describe("Transform pivot point on the layer"),
+  positionOrigin: AnchorPointSchema.optional().describe(
+    'Canvas reference for (0,0). Default "center" = (0,0) at canvas center. "top-left" = (0,0) at top-left corner.'
+  )
+});
+function defaultTransform() {
+  return {
+    position: { x: 0, y: 0, z: 0 },
+    rotation: { x: 0, y: 0, z: 0 },
+    scale: { x: 1, y: 1 },
+    anchor: "center",
+    positionOrigin: "center"
+  };
+}
+const LayerStyleSchema = z.object({
+  opacity: z.number().max(1).default(1).describe("Opacity 0–1").register(fieldRegistry, { interpolationFamily: "continuous", step: 0.05 }),
+  // CSS filter properties
+  blur: z.number().min(0).default(0).describe("Blur amount as % of project width").register(fieldRegistry, {
+    group: "filters-1",
+    interpolationFamily: "continuous",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 10
+  }),
+  brightness: z.number().min(0).default(1).describe("Brightness multiplier (1 = normal)").register(fieldRegistry, {
+    group: "filters-1",
+    interpolationFamily: "continuous",
+    step: 0.1,
+    min: 0,
+    max: 10
+  }),
+  contrast: z.number().min(0).max(10).default(1).describe("Contrast multiplier (1 = normal)").register(fieldRegistry, {
+    group: "filters-2",
+    interpolationFamily: "continuous",
+    step: 0.1
+  }),
+  saturate: z.number().min(0).max(10).default(1).describe("Saturation multiplier (1 = normal)").register(fieldRegistry, {
+    group: "filters-2",
+    interpolationFamily: "continuous",
+    step: 0.1
+  }),
+  // CSS drop-shadow filter
+  dropShadowX: z.number().default(0).describe("Shadow horizontal offset as % of project width").register(fieldRegistry, {
+    group: "shadow-offset",
+    interpolationFamily: "continuous",
+    postFix: "%",
+    step: 0.1
+  }),
+  dropShadowY: z.number().default(0).describe("Shadow vertical offset as % of project width").register(fieldRegistry, {
+    group: "shadow-offset",
+    interpolationFamily: "continuous",
+    postFix: "%",
+    step: 0.1
+  }),
+  dropShadowBlur: z.number().min(0).default(0).describe("Shadow blur radius as % of project width").register(fieldRegistry, {
+    group: "shadow-style",
+    interpolationFamily: "continuous",
+    postFix: "%",
+    step: 0.1
+  }),
+  dropShadowColor: z.string().default("transparent").describe("Shadow color (hex or rgba)").register(fieldRegistry, {
+    group: "shadow-style",
+    interpolationFamily: "discrete",
+    widget: "color"
+  })
+});
+const stylePropertyGroups = [
+  {
+    id: "filters-1",
+    label: "Filters"
+  },
+  {
+    id: "filters-2",
+    label: "Filters"
+  },
+  {
+    id: "shadow-offset",
+    label: "Shadow Offset"
+  },
+  {
+    id: "shadow-style",
+    label: "Shadow Style"
+  }
+];
+function defaultLayerStyle() {
+  return {
+    opacity: 1,
+    blur: 0,
+    brightness: 1,
+    contrast: 1,
+    saturate: 1,
+    dropShadowX: 0,
+    dropShadowY: 0,
+    dropShadowBlur: 0,
+    dropShadowColor: "transparent"
+  };
+}
+const BaseLayerFieldsSchema = z.object({
+  id: z.string().describe("Unique layer identifier"),
+  name: z.string().describe("Layer name for identification"),
+  visible: z.boolean().describe("Layer visibility state"),
+  locked: z.boolean().describe("Layer locked state (prevents editing)"),
+  parentId: z.string().optional().describe("Parent group layer ID")
+});
+const BaseAnimatablePropertyLabels = {
+  "position.x": "Position X",
+  "position.y": "Position Y",
+  "position.z": "Position Z",
+  "rotation.x": "Rotation X",
+  "rotation.y": "Rotation Y",
+  "rotation.z": "Rotation Z",
+  "scale.x": "Scale X",
+  "scale.y": "Scale Y",
+  opacity: "Opacity",
+  blur: "Blur",
+  brightness: "Brightness",
+  contrast: "Contrast",
+  saturate: "Saturate",
+  dropShadowBlur: "Drop Shadow Blur",
+  dropShadowColor: "Drop Shadow Color",
+  dropShadowX: "Drop Shadow X",
+  dropShadowY: "Drop Shadow Y"
+};
+const ContinuousInterpolationStrategies = EASING_VALUES;
+const createFromSchema = (schema2, data) => {
+  return schema2.parse(data);
+};
+const TransitionEffectEnum = z.enum([
+  "fade",
+  "scale",
+  "slide-up",
+  "slide-down",
+  "slide-left",
+  "slide-right",
+  "blur"
+]);
+const transitionEffectOptions = [
+  { value: "fade", label: "Fade" },
+  { value: "scale", label: "Scale" },
+  { value: "slide-up", label: "Slide ↑" },
+  { value: "slide-down", label: "Slide ↓" },
+  { value: "slide-left", label: "Slide ←" },
+  { value: "slide-right", label: "Slide →" },
+  { value: "blur", label: "Blur" }
+];
+function createTransitionSchema(group, defaults = {}) {
+  return z.object({
+    transitionEffects: z.array(TransitionEffectEnum).default(defaults.effects ?? []).describe(
+      "Enter transition effects. Select multiple to combine: fade = opacity, scale = pop-in, slide = motion, blur = focus."
+    ).register(fieldRegistry, {
+      group,
+      interpolationFamily: "discrete",
+      label: "Effects",
+      widget: "multi-select",
+      options: transitionEffectOptions
+    }),
+    transitionDuration: z.number().min(0).max(5e3).default(defaults.duration ?? 0).describe("Duration in milliseconds for the enter transition.").register(fieldRegistry, {
+      group,
+      interpolationFamily: "continuous",
+      label: "Duration",
+      step: 5,
+      postFix: "ms"
+    })
+  });
+}
+const schema$3 = z.object({
+  content: z.string().default("New Text").describe("Text content. Animatable with text interpolation (char-reveal / word-reveal).").register(fieldRegistry, { interpolationFamily: "text", label: "Content" }),
+  fontSize: z.number().default(3.75).describe("Font size as % of project width.").register(fieldRegistry, {
+    group: "typography",
+    interpolationFamily: "continuous",
+    label: "Size",
+    postFix: "%",
+    step: 0.1,
+    min: 0.1,
+    max: 50
+  }),
+  fontFamily: z.enum(googleFontValues).optional().describe("Google Fonts font family.").register(fieldRegistry, {
+    interpolationFamily: "discrete",
+    label: "Font"
+  }),
+  fontWeight: z.enum(["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900"]).default("normal").describe('Font weight: 100 (thin) to 900 (black), or "normal"/"bold".').register(fieldRegistry, {
+    group: "typography",
+    interpolationFamily: "discrete",
+    label: "Weight"
+  }),
+  color: BackgroundValueSchema.default("#ffffff").describe("Text color: solid hex or gradient object (linear, radial, conic).").register(fieldRegistry, {
+    interpolationFamily: "continuous",
+    label: "Color"
+  }),
+  letterSpacing: z.number().default(0).describe("Letter spacing as % of project width. Negative = tighter.").register(fieldRegistry, {
+    group: "spacing",
+    interpolationFamily: "continuous",
+    label: "Letter Spacing",
+    postFix: "%",
+    step: 0.1,
+    min: -1,
+    max: 8
+  }),
+  lineHeight: z.number().default(1.4).describe("Line spacing multiplier: 1.0 = single, 1.5 = one-and-half.").register(fieldRegistry, {
+    group: "spacing",
+    interpolationFamily: "continuous",
+    label: "Line Height",
+    step: 0.1,
+    min: 0.5,
+    max: 5
+  }),
+  autoWidth: z.boolean().default(true).describe("Auto-fit container width to content. When false, uses width for wrapping.").register(fieldRegistry, {
+    group: "layout",
+    interpolationFamily: "discrete",
+    label: "Auto width"
+  }),
+  width: z.number().default(31).describe("Container width as % of project width (when autoWidth is false).").register(fieldRegistry, {
+    group: "layout",
+    interpolationFamily: "continuous",
+    label: "Width",
+    postFix: "%",
+    min: 1,
+    max: 400
+  }),
+  textAlign: z.enum(["left", "center", "right"]).default("center").describe("Horizontal text alignment: left, center, right.").register(fieldRegistry, { interpolationFamily: "discrete", label: "Align" }),
+  ...createTransitionSchema("transition-basic").shape,
+  slideDistance: z.number().default(1.875).describe("Slide effect distance as % of project width.").register(fieldRegistry, {
+    group: "transition-motion",
+    interpolationFamily: "continuous",
+    label: "Slide distance",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 50
+  }),
+  transitionEasing: z.enum(ContinuousInterpolationStrategies).default("ease-out").describe("Easing curve for enter transition (ease-out, ease-in, bounce, elastic...).").register(fieldRegistry, {
+    group: "transition-motion",
+    interpolationFamily: "discrete",
+    label: "Easing"
+  }),
+  scaleFrom: z.number().default(0.5).describe("Initial scale: 0 = invisible, 0.5 = half, 1 = no scaling.").register(fieldRegistry, {
+    group: "transition-appearance",
+    interpolationFamily: "continuous",
+    label: "Scale From",
+    step: 0.1,
+    min: 0
+  }),
+  blurAmount: z.number().default(0.78).describe("Max blur as % of project width (animates to 0).").register(fieldRegistry, {
+    group: "transition-appearance",
+    interpolationFamily: "continuous",
+    label: "Blur Amount",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 5
+  }),
+  transitionColorFrom: z.string().optional().describe(
+    "Starting color for color transition (animates to final color). Empty = no color animation."
+  ).register(fieldRegistry, {
+    group: "transition-appearance-2",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Color From"
+  }),
+  expandOnReveal: z.boolean().default(false).describe("Each text fragment expands from zero width as it appears (typewriter expand).").register(fieldRegistry, {
+    group: "transition-appearance-2",
+    interpolationFamily: "discrete",
+    label: "Expand on reveal"
+  })
+});
+const meta$3 = {
+  category: "text",
+  schema: schema$3,
+  type: "text",
+  label: "Text",
+  description: "Styled text with Google Fonts, customizable size, weight, color, and alignment",
+  propertyGroups: [
+    { id: "typography", label: "Typography" },
+    { id: "spacing", label: "Spacing" },
+    { id: "layout", label: "Layout" },
+    { id: "transition-basic", label: "Effects & Duration" },
+    { id: "transition-motion", label: "Slide & Easing" },
+    { id: "transition-appearance", label: "Scale & Blur" },
+    { id: "transition-appearance-2", label: "Color & Expand" }
+  ]
+};
+const size$1 = createSizeConfig({
+  width: { max: 400, default: 90 },
+  height: { max: 400, default: 95 }
+});
+const schema$2 = size$1.schema.extend({
+  src: z.string().default("").describe("Video source URL (external or uploaded). Synced to project timeline.").register(fieldRegistry, { widget: "upload", mediaType: "video", label: "Video" }),
+  borderRadius: z.number().default(3.1).describe("Corner radius as % of project width. ~50% for circle crop.").register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    label: "Radius",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 60
+  }),
+  frame: z.enum([
+    "none",
+    "arc",
+    "stack-light",
+    "stack-dark",
+    "mac-light",
+    "mac-dark",
+    "mac-subtle",
+    "windows-light",
+    "windows-dark",
+    "glow",
+    "shadow"
+  ]).default("arc").describe(
+    "Decorative frame: arc, stack-light/dark, mac-light/dark/subtle, windows-light/dark, glow, shadow, none."
+  ).register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "discrete",
+    label: "Frame"
+  }),
+  frameWidth: z.number().default(0.625).describe('Frame padding as % of project width (only when frame != "none").').register(fieldRegistry, {
+    group: "appearance",
+    interpolationFamily: "continuous",
+    label: "Frame Width",
+    postFix: "%",
+    step: 0.1,
+    min: 0,
+    max: 3
+  }),
+  zoom: z.number().default(1).describe("Video zoom: 1 = original, higher = zoom in. Use with offsetX/Y for pan.").register(fieldRegistry, {
+    group: "zoom",
+    interpolationFamily: "continuous",
+    label: "Zoom",
+    step: 0.01,
+    postFix: "x",
+    min: 1,
+    max: 5
+  }),
+  offsetX: z.number().default(0).describe("Horizontal pan offset as % of viewport width. Positive = right.").register(fieldRegistry, {
+    group: "zoom",
+    interpolationFamily: "continuous",
+    label: "Offset X",
+    postFix: "%",
+    min: -100,
+    max: 100
+  }),
+  offsetY: z.number().default(0).describe("Vertical pan offset as % of viewport height. Positive = down.").register(fieldRegistry, {
+    group: "zoom",
+    interpolationFamily: "continuous",
+    label: "Offset Y",
+    postFix: "%",
+    min: -100,
+    max: 100
+  }),
+  objectFit: z.enum(["contain", "cover", "none"]).default("cover").describe("Fit: cover (crop fill), contain (fit, may letterbox), none (original size).").register(fieldRegistry, { interpolationFamily: "discrete", label: "Fit" }),
+  volume: z.number().min(0).max(1).default(1).describe("Audio volume: 0.0 = silent, 1.0 = full. Animatable for fades.").register(fieldRegistry, {
+    group: "playback",
+    interpolationFamily: "continuous",
+    label: "Volume",
+    step: 0.1,
+    postFix: "%"
+  }),
+  muted: z.boolean().default(false).describe("Mute audio regardless of volume.").register(fieldRegistry, { interpolationFamily: "discrete", label: "Muted" }),
+  playbackRate: z.number().min(0.1).max(4).default(1).describe("Playback speed: 1.0 = normal, 0.5 = slow-mo, 2.0 = 2×.").register(fieldRegistry, {
+    group: "playback",
+    interpolationFamily: "continuous",
+    label: "Speed",
+    step: 0.1,
+    postFix: "x"
+  }),
+  fileKey: z.string().default("").describe("Internal: S3 storage key for cleanup.").register(fieldRegistry, { hidden: true })
+});
+const meta$2 = {
+  category: "media",
+  schema: schema$2,
+  type: "video",
+  label: "Video",
+  description: "Embed video files with trimming, volume control, and playback options",
+  propertyGroups: [
+    { id: "appearance", label: "Appearance" },
+    size$1.propertyGroup,
+    { id: "zoom", label: "Zoom & Pan" },
+    { id: "playback", label: "Playback" }
+  ],
+  middleware: size$1.middleware
+};
+const schema$1 = z.object({
+  src: z.string().default("").describe("Audio source URL (external or uploaded). Synced to project timeline.").register(fieldRegistry, { widget: "upload", mediaType: "audio", label: "Audio" }),
+  volume: z.number().default(1).describe("Playback volume: 0.0 = silent, 1.0 = full. Animatable for fades.").register(fieldRegistry, {
+    group: "playback",
+    interpolationFamily: "continuous",
+    label: "Volume",
+    step: 0.1,
+    min: 0,
+    max: 1,
+    postFix: "%"
+  }),
+  muted: z.boolean().default(false).describe("Mute audio regardless of volume.").register(fieldRegistry, { interpolationFamily: "discrete", label: "Muted" }),
+  playbackRate: z.number().default(1).describe("Playback speed: 1.0 = normal, 0.5 = half, 2.0 = double. Affects pitch and tempo.").register(fieldRegistry, {
+    group: "playback",
+    interpolationFamily: "continuous",
+    label: "Speed",
+    step: 0.1,
+    min: 0.1,
+    max: 4,
+    postFix: "x"
+  }),
+  fileKey: z.string().default("").describe("Internal: S3 storage key for cleanup.").register(fieldRegistry, { hidden: true }),
+  generatedFromText: z.string().default("").describe("Internal: original TTS script, used as prompt for caption generation.").register(fieldRegistry, { hidden: true })
+});
+const meta$1 = {
+  category: "media",
+  schema: schema$1,
+  type: "audio",
+  label: "Audio",
+  description: "Audio tracks with captions",
+  propertyGroups: [{ id: "playback", label: "Playback" }]
+};
+const size = createSizeConfig({
+  width: { default: 70 },
+  height: { default: 16 }
+});
+const CaptionWordSchema = z.object({
+  word: z.string(),
+  start: z.number(),
+  end: z.number()
+});
+const displayModes = ["highlight", "single-word", "typewriter", "block"];
+const schema = size.schema.extend({
+  sourceLayerId: z.string().optional().describe("ID of source audio/video layer. Captions sync to word timestamps from that layer.").register(fieldRegistry, {
+    interpolationFamily: "discrete",
+    label: "Source"
+  }),
+  mode: z.enum(displayModes).optional().default("highlight").describe("Display mode: highlight (karaoke), single-word, typewriter, block (subtitles).").register(fieldRegistry, { interpolationFamily: "discrete", label: "Mode" }),
+  blockGap: z.number().optional().default(1).describe("Minimum silence gap (seconds) between words to split into a new block.").register(fieldRegistry, {
+    group: "captions",
+    interpolationFamily: "continuous",
+    label: "Block Gap",
+    postFix: "s",
+    min: 0.5,
+    max: 4,
+    step: 0.1
+  }),
+  maxWordsPerBlock: z.number().optional().default(10).describe("Max words per caption block before splitting.").register(fieldRegistry, {
+    group: "captions",
+    interpolationFamily: "discrete",
+    label: "Max Words",
+    min: 1,
+    max: 50
+  }),
+  words: z.array(CaptionWordSchema).optional().default([]).describe("Timed word array: [{word, start, end}, ...]. Generated from transcription.").register(fieldRegistry, { label: "Words" }),
+  originalScript: z.string().optional().default("").describe("Internal: original TTS script, used as Whisper prompt for re-alignment.").register(fieldRegistry, { hidden: true }),
+  fontSize: z.number().optional().default(3.75).describe("Font size as % of project width.").register(fieldRegistry, {
+    group: "font",
+    interpolationFamily: "continuous",
+    label: "Size",
+    postFix: "%",
+    step: 0.1,
+    min: 0.1,
+    max: 10
+  }),
+  fontFamily: z.enum(googleFontValues).optional().describe("Google Fonts font family.").register(fieldRegistry, {
+    group: "font",
+    interpolationFamily: "discrete",
+    label: "Font"
+  }),
+  fontWeight: z.enum(["400", "500", "600", "700", "800", "900"]).optional().default("700").describe("Font weight: 400 = regular, 700 = bold, 900 = black. Active words auto-bold.").register(fieldRegistry, {
+    group: "font",
+    interpolationFamily: "discrete",
+    label: "Weight"
+  }),
+  textColor: z.string().optional().default("#ffffff").describe("Text color in hex (e.g., #ffffff).").register(fieldRegistry, {
+    group: "style",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Text Color"
+  }),
+  bgColor: z.string().optional().default("#7b39ed").describe("Highlight/pill color behind active word in hex or rgba.").register(fieldRegistry, {
+    group: "style",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Highlight"
+  }),
+  ...createTransitionSchema("transition", { effects: ["fade"], duration: 100 }).shape,
+  textEffect: z.enum(["none", "shadow", "outline"]).optional().default("outline").describe("Text contrast effect: shadow (blurred drop shadow), outline (crisp stroke).").register(fieldRegistry, {
+    group: "shadow",
+    interpolationFamily: "discrete",
+    label: "Effect"
+  }),
+  textEffectColor: z.string().optional().default("#7c3aed").describe("Color of text effect in hex or rgba.").register(fieldRegistry, {
+    group: "shadow",
+    interpolationFamily: "continuous",
+    widget: "color",
+    label: "Color"
+  }),
+  textEffectSize: z.number().optional().default(0.16).describe("Effect size as % of project width (shadow blur radius / outline stroke width).").register(fieldRegistry, {
+    group: "shadow",
+    interpolationFamily: "continuous",
+    label: "Size",
+    step: 0.05,
+    postFix: "%",
+    min: 0,
+    max: 2
+  })
+});
+const meta = {
+  category: "text",
+  schema,
+  type: "captions",
+  label: "Captions",
+  description: "Synchronized captions/subtitles with highlight, single-word, typewriter, and block modes",
+  propertyGroups: [
+    size.propertyGroup,
+    { id: "captions", label: "Captions" },
+    { id: "style", label: "Style" },
+    { id: "shadow", label: "Shadow" },
+    { id: "font", label: "Font" },
+    { id: "transition", label: "Transition" }
+  ],
+  middleware: size.middleware
+};
+const metas = [
+  meta$4,
+  meta$3,
+  meta$2,
+  meta$1,
+  meta,
+  meta$f,
+  meta$e,
+  meta$d,
+  meta$c,
+  meta$b,
+  meta$a,
+  meta$9,
+  meta$8,
+  meta$7,
+  meta$6,
+  meta$5
+];
+const layerDataRegistry = Object.fromEntries(
+  metas.map((m) => [m.type, m])
+);
+function getLayerDataDefinition(type) {
+  const def = layerDataRegistry[type];
+  if (!def) throw new Error(`Unknown layer type: ${type}`);
+  return def;
+}
+function getLayerSchemaData(type) {
+  return getLayerDataDefinition(type).schema;
+}
+function getAvailableLayerTypesData() {
+  return Object.keys(layerDataRegistry);
+}
+function isContainerLayerData(type) {
+  return layerDataRegistry[type]?.isContainer === true;
+}
+
+const ContinuousInterpolationSchema = z.object({
+  family: z.literal("continuous").describe(
+    "Smooth numeric/color transitions. Use for position, scale, opacity, rotation, fontSize, colors. Colors interpolate in RGB space."
+  ),
+  strategy: z.enum(ContinuousInterpolationStrategies).describe(
+    "Easing: ease-out (entrances), ease-in (exits), ease-in-out (middle). Back = overshoot, bounce, elastic for playful effects."
+  )
+});
+const DiscreteInterpolationSchema = z.object({
+  family: z.literal("discrete").describe("Instant jump between values, no transition. Use for booleans, enums, visibility."),
+  strategy: z.enum(["step-end", "step-start", "step-mid"]).describe(
+    "When the jump occurs: step-end (hold old value until keyframe), step-start (jump immediately), step-mid (jump at midpoint)"
+  )
+});
+const QuantizedIntegerSchema = z.object({
+  family: z.literal("quantized").describe("Smooth animation snapped to discrete steps."),
+  strategy: z.literal("integer").describe("Snap to nearest integer (for counters, indices)")
+});
+const QuantizedSnapGridSchema = z.object({
+  family: z.literal("quantized").describe("Smooth animation snapped to discrete steps."),
+  strategy: z.literal("snap-grid").describe("Snap to a custom grid increment"),
+  increment: z.number().positive().describe("Grid step size (e.g., 5 → 0, 5, 10, 15...)")
+});
+const TextCharRevealSchema = z.object({
+  family: z.literal("text").describe("Text reveal. ONLY for props.content on text/terminal layers."),
+  strategy: z.literal("char-reveal").describe('Character-by-character typewriter. Animate text from "" to full content.')
+});
+const TextWordRevealSchema = z.object({
+  family: z.literal("text").describe("Text reveal. ONLY for props.content on text/terminal layers."),
+  strategy: z.literal("word-reveal").describe("Word-by-word reveal. Shows whole words one at a time."),
+  separator: z.string().optional().describe('Word delimiter (default: space " ")')
+});
+const InterpolationSchema = z.union([
+  ContinuousInterpolationSchema,
+  DiscreteInterpolationSchema,
+  QuantizedIntegerSchema,
+  QuantizedSnapGridSchema,
+  TextCharRevealSchema,
+  TextWordRevealSchema
+]);
+const BuiltInAnimatablePropertySchema = z.enum([
+  "position.x",
+  "position.y",
+  "position.z",
+  "scale.x",
+  "scale.y",
+  "rotation.x",
+  "rotation.y",
+  "rotation.z",
+  ...LayerStyleSchema.keyof().options
+]);
+const PropsAnimatablePropertySchema = z.string().regex(/^props\./).describe("Layer-specific property (e.g., props.fontSize, props.content).");
+const AnimatablePropertySchema = z.union([
+  BuiltInAnimatablePropertySchema,
+  PropsAnimatablePropertySchema
+]);
+const KeyframeSchema = z.object({
+  id: z.string().describe("Unique keyframe ID"),
+  time: z.number().min(0).describe("Time in seconds"),
+  property: AnimatablePropertySchema.describe(
+    "Property to animate: position.x/y/z, scale.x/y, rotation.x/y/z, opacity, blur, brightness, etc., or props.* for layer-specific (e.g., props.fontSize, props.content)."
+  ),
+  value: z.union([z.number(), z.string(), z.boolean()]).describe(
+    "Target value: number for numeric props, hex string for colors, string for text content, boolean for flags."
+  ),
+  interpolation: InterpolationSchema.optional().describe(
+    "How to reach this value from the previous keyframe. Omit for default continuous/ease-in-out."
+  )
+});
+const LayerTypeSchema = z.string().refine((t) => getAvailableLayerTypesData().includes(t), {
+  message: "Unknown layer type"
+});
+const LayerSchema = BaseLayerFieldsSchema.extend({
+  type: LayerTypeSchema,
+  transform: TransformSchema,
+  style: LayerStyleSchema,
+  keyframes: z.array(KeyframeSchema),
+  /**
+   * Layer-specific properties validated by the component's Zod schema.
+   * Kept flexible to allow each layer type to define its own props.
+   */
+  props: z.record(z.string(), z.unknown()),
+  /**
+   * Enter time - when this layer becomes visible in the timeline (seconds).
+   * If undefined, the layer is visible from the start.
+   */
+  enterTime: z.number().min(0).optional(),
+  /**
+   * Exit time - when this layer stops being visible in the timeline (seconds).
+   * If undefined, the layer is visible until the project ends.
+   */
+  exitTime: z.number().min(0).optional(),
+  /**
+   * Content duration - the total duration of the layer's content in seconds.
+   * For video/audio layers, this is the media file duration.
+   * For other layers, this may be undefined (infinite duration).
+   * Used to constrain enter/exit times and content offset.
+   */
+  contentDuration: z.number().min(0).optional(),
+  /**
+   * Content offset - how much to trim/skip from the start of the content (seconds).
+   * For video/audio layers, this is where playback starts in the source media.
+   * Combined with enter/exit times, this determines what portion of content is shown.
+   * Only applicable when contentDuration is defined.
+   */
+  contentOffset: z.number().min(0).optional()
+}).refine(
+  (data) => {
+    if (data.contentDuration !== void 0 && data.contentOffset !== void 0 && data.contentOffset > data.contentDuration) {
+      return false;
+    }
+    if (data.contentDuration !== void 0 && data.enterTime !== void 0 && data.exitTime !== void 0) {
+      const visibleDuration = data.exitTime - data.enterTime;
+      const contentOffset = data.contentOffset ?? 0;
+      const availableContent = data.contentDuration - contentOffset;
+      if (visibleDuration > availableContent) {
+        return false;
+      }
+    }
+    return true;
+  },
+  {
+    message: "Content duration and offset constraints violated: offset must be < duration, and visible duration must fit within available content"
+  }
+);
+const ProjectSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  width: z.number().positive(),
+  height: z.number().positive(),
+  duration: z.number().positive(),
+  fps: z.number().positive(),
+  background: BackgroundValueSchema.optional(),
+  /** Primary brand color used as the base for dynamic animated backgrounds */
+  primaryColor: z.string().optional().default("#6366f1"),
+  fontFamily: z.enum(googleFontValues).optional().default("Inter"),
+  hideWatermark: z.boolean().optional().default(false),
+  watermarkPosition: z.enum(["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"]).optional().default("top-center"),
+  /** Schema version: 2 = positions/sizes in % of project width (v1 = pixels) */
+  schemaVersion: z.number().int().optional(),
+  layers: z.array(LayerSchema)
+});
+z.object({
+  zoom: z.number(),
+  pan: z.object({
+    x: z.number(),
+    y: z.number()
+  }),
+  showGuides: z.boolean(),
+  snapToGrid: z.boolean()
+});
+z.object({
+  id: z.string(),
+  name: z.string(),
+  keyframes: z.array(KeyframeSchema.omit({ id: true }))
+});
+z.object({
+  format: z.enum(["mp4", "webm", "json"]),
+  quality: z.enum(["low", "medium", "high"]),
+  fps: z.number().positive(),
+  width: z.number().positive(),
+  height: z.number().positive()
+});
+const projectDataSchema = ProjectSchema.omit({ id: true });
+
+export { easeInOutBounce as $, meta$3 as A, BaseLayerFieldsSchema as B, meta$5 as C, meta$f as D, EASING_VALUES as E, meta$6 as F, meta$e as G, meta$7 as H, meta$8 as I, meta$d as J, KeyframeSchema as K, LayerSchema as L, meta$9 as M, meta$a as N, meta$b as O, ProjectSchema as P, CaptionWordSchema as Q, meta$4 as R, meta$c as S, TransformSchema as T, meta$1 as U, googleFontValues as V, isSolid as W, displayModes as X, easeInOutElastic as Y, easeOutElastic as Z, easeInElastic as _, defaultTransform as a, easeInBounce as a0, easeOutBounce as a1, backgroundValueToCSS as a2, fontCategoriesArray as a3, schema$4 as a4, schema as a5, schema$3 as a6, DYNAMIC_VARIANTS as a7, defaultSolidColors as a8, getGradientCategories as a9, gradientPresets as aa, solidBackground as ab, buildInterpolation as b, KEYFRAME_STRATEGIES as c, defaultLayerStyle as d, LayerStyleSchema as e, fieldRegistry as f, getLayerSchemaData as g, getLayerDataDefinition as h, createFromSchema as i, BackgroundValueSchema as j, TransformPatchSchema as k, getAvailableLayerTypesData as l, meta as m, layerDataRegistry as n, isContainerLayerData as o, projectDataSchema as p, BaseAnimatablePropertyLabels as q, stylePropertyGroups as r, scaleMiddleware as s, isDynamic as t, getStyleProperties as u, isGradient as v, getPatternLayerStyle as w, getGoogleFontUrl as x, getGradientPresetById as y, meta$2 as z };
+//# sourceMappingURL=animation-sOd5R1cE.js.map