@devmotion/cli 0.7.0 → 0.8.0

package/studio/server/chunks/registry2-DJC1cBxe.js

@@ -0,0 +1,4851 @@
+import { G as GenerateVideoSchema, p as pxToPct, h as createLayer, m as runAction, b as generateVideoAction, t as toPct, k as round1, d as dubAudioAction, c as generateCaptionsAction, n as dubLanguages, j as deviceSize } from './find-stock-image-Cwkwf5gV.js';
+import './async-lVJA8xJZ.js';
+import { d as spread_props, w as attr_class, o as stringify, t as attr, i as escape_html, h as derived, f as bind_props, p as props_id, a as attributes, e as ensure_array_like, c as clsx } from './index9-D9BBZH26.js';
+import { B as Button, L as Loader_circle, c as cn } from './button-EIkCOf5j.js';
+import { r as requestUpload, c as confirmUpload } from './upload.remote-Bhhj6ZvH.js';
+import { e as extractMediaMetadataFromUrl, f as formatDuration$1, b as formatFileSize } from './media-v9Bq2kuR.js';
+import { I as Icon } from './Icon-DbEXclx7.js';
+import { b4 as Smartphone, u as Sparkles, b5 as Languages, b6 as Captions, b7 as Laptop, b8 as defaultBackground, b9 as meta$d, ba as Camera, bb as Image, bc as Mic, bd as Video, ao as Popover, a9 as Square, ap as Popover_trigger, aq as Popover_content, q as Debounced, r as Search, s as Select_1, B as getEditorState, be as useId, bf as Previous, bg as isFunction$1, n as noop$1, aM as Floating_layer, C as Check, bh as Music, e as Portal$1, aT as Popper_layer_force_mount, aU as Popper_layer, aV as getFloatingContentCSSVars, bi as FloatingArrowState, bj as External_link } from './editor.svelte-Bdv5LaOt.js';
+import { j as BackgroundValueSchema, f as fieldRegistry, i as createFromSchema } from './animation-sOd5R1cE.js';
+import { z } from 'zod';
+import { u as uiStore } from './ui.svelte-FJio-gZM.js';
+import { M as MAX_FILE_SIZES, R as RECORDER_STOP_THRESHOLD } from './index6-BwFC1GDh.js';
+import { G as Globe, X } from './x-dSB6BXUp.js';
+import { c as createBitsAttrs, I as Input, e as createId, b as boxWith, a as attachRef, m as mergeProps, s as simpleBox, i as executeCallbacks } from './input-C1z0Nn4U.js';
+import { a as watch, C as Context, D as DOMContext, w as watch$1 } from './copy-gHAQZ-hc.js';
+import { o as on } from './root-DjEsp22s.js';
+import { a as TooltipRootState, b as TooltipTriggerState, c as TooltipContentState } from './tooltip.svelte-DRe72lD-.js';
+import { s as searchLummiImages } from './lummi.remote-BMN4XopC.js';
+import { g as getUserAssets } from './assets.remote-CX2FvnlZ.js';
+import { C as Chevron_left, a as Chevron_right } from './arrow-right-Ba81Wr45.js';
+import './event-DmhHnWT5.js';
+import './exports-5qhW9hr2.js';
+import './client3-6wS0pbKv.js';
+import './base-qepI6vHK.js';
+import { formatStorage } from './plans-BAwNKt6H.js';
+import { R as Refresh_cw } from './refresh-cw-2Dwais_j.js';
+import { nanoid } from 'nanoid';
+import { a as analyzeMediaAsset } from './media-analysis.remote-BVdRHeP8.js';
+
+function Monitor($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "rect",
+        { "width": "20", "height": "14", "x": "2", "y": "3", "rx": "2" }
+      ],
+      ["line", { "x1": "8", "x2": "16", "y1": "21", "y2": "21" }],
+      ["line", { "x1": "12", "x2": "12", "y1": "17", "y2": "21" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "monitor" },
+      /**
+       * @component @name Monitor
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTQiIHg9IjIiIHk9IjMiIHJ4PSIyIiAvPgogIDxsaW5lIHgxPSI4IiB4Mj0iMTYiIHkxPSIyMSIgeTI9IjIxIiAvPgogIDxsaW5lIHgxPSIxMiIgeDI9IjEyIiB5MT0iMTciIHkyPSIyMSIgLz4KPC9zdmc+Cg==) - https://lucide.dev/icons/monitor
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Scissors($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["circle", { "cx": "6", "cy": "6", "r": "3" }],
+      ["path", { "d": "M8.12 8.12 12 12" }],
+      ["path", { "d": "M20 4 8.12 15.88" }],
+      ["circle", { "cx": "6", "cy": "18", "r": "3" }],
+      ["path", { "d": "M14.8 14.8 20 20" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "scissors" },
+      /**
+       * @component @name Scissors
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8Y2lyY2xlIGN4PSI2IiBjeT0iNiIgcj0iMyIgLz4KICA8cGF0aCBkPSJNOC4xMiA4LjEyIDEyIDEyIiAvPgogIDxwYXRoIGQ9Ik0yMCA0IDguMTIgMTUuODgiIC8+CiAgPGNpcmNsZSBjeD0iNiIgY3k9IjE4IiByPSIzIiAvPgogIDxwYXRoIGQ9Ik0xNC44IDE0LjggMjAgMjAiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/scissors
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+
+function Monitor_play($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "path",
+        {
+          "d": "M15.033 9.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56V7.648a.645.645 0 0 1 .967-.56z"
+        }
+      ],
+      ["path", { "d": "M12 17v4" }],
+      ["path", { "d": "M8 21h8" }],
+      [
+        "rect",
+        { "x": "2", "y": "3", "width": "20", "height": "14", "rx": "2" }
+      ]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "monitor-play" },
+      /**
+       * @component @name MonitorPlay
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTUuMDMzIDkuNDRhLjY0Ny42NDcgMCAwIDEgMCAxLjEybC00LjA2NSAyLjM1MmEuNjQ1LjY0NSAwIDAgMS0uOTY4LS41NlY3LjY0OGEuNjQ1LjY0NSAwIDAgMSAuOTY3LS41NnoiIC8+CiAgPHBhdGggZD0iTTEyIDE3djQiIC8+CiAgPHBhdGggZD0iTTggMjFoOCIgLz4KICA8cmVjdCB4PSIyIiB5PSIzIiB3aWR0aD0iMjAiIGhlaWdodD0iMTQiIHJ4PSIyIiAvPgo8L3N2Zz4K) - https://lucide.dev/icons/monitor-play
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+
+function File($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "file" },
+      /**
+       * @component @name File
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNiAyMmEyIDIgMCAwIDEtMi0yVjRhMiAyIDAgMCAxIDItMmg4YTIuNCAyLjQgMCAwIDEgMS43MDQuNzA2bDMuNTg4IDMuNTg4QTIuNCAyLjQgMCAwIDEgMjAgOHYxMmEyIDIgMCAwIDEtMiAyeiIgLz4KICA8cGF0aCBkPSJNMTQgMnY1YTEgMSAwIDAgMCAxIDFoNSIgLz4KPC9zdmc+Cg==) - https://lucide.dev/icons/file
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Folder_open($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "path",
+        {
+          "d": "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
+        }
+      ]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "folder-open" },
+      /**
+       * @component @name FolderOpen
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtNiAxNCAxLjUtMi45QTIgMiAwIDAgMSA5LjI0IDEwSDIwYTIgMiAwIDAgMSAxLjk0IDIuNWwtMS41NCA2YTIgMiAwIDAgMS0xLjk1IDEuNUg0YTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDEgMi0yaDMuOWEyIDIgMCAwIDEgMS42OS45bC44MSAxLjJhMiAyIDAgMCAwIDEuNjcuOUgxOGEyIDIgMCAwIDEgMiAydjIiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/folder-open
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Image_play($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "path",
+        {
+          "d": "M15 15.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997a1 1 0 0 1-1.517-.86z"
+        }
+      ],
+      [
+        "path",
+        {
+          "d": "M21 12.17V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"
+        }
+      ],
+      ["path", { "d": "m6 21 5-5" }],
+      ["circle", { "cx": "9", "cy": "9", "r": "2" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "image-play" },
+      /**
+       * @component @name ImagePlay
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTUgMTUuMDAzYTEgMSAwIDAgMSAxLjUxNy0uODU5bDQuOTk3IDIuOTk3YTEgMSAwIDAgMSAwIDEuNzE4bC00Ljk5NyAyLjk5N2ExIDEgMCAwIDEtMS41MTctLjg2eiIgLz4KICA8cGF0aCBkPSJNMjEgMTIuMTdWNWEyIDIgMCAwIDAtMi0ySDVhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDYiIC8+CiAgPHBhdGggZD0ibTYgMjEgNS01IiAvPgogIDxjaXJjbGUgY3g9IjkiIGN5PSI5IiByPSIyIiAvPgo8L3N2Zz4K) - https://lucide.dev/icons/image-play
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Info($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["circle", { "cx": "12", "cy": "12", "r": "10" }],
+      ["path", { "d": "M12 16v-4" }],
+      ["path", { "d": "M12 8h.01" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "info" },
+      /**
+       * @component @name Info
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIgLz4KICA8cGF0aCBkPSJNMTIgMTZ2LTQiIC8+CiAgPHBhdGggZD0iTTEyIDhoLjAxIiAvPgo8L3N2Zz4K) - https://lucide.dev/icons/info
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Rotate_cw($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "path",
+        { "d": "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }
+      ],
+      ["path", { "d": "M21 3v5h-5" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "rotate-cw" },
+      /**
+       * @component @name RotateCw
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMjEgMTJhOSA5IDAgMSAxLTktOWMyLjUyIDAgNC45MyAxIDYuNzQgMi43NEwyMSA4IiAvPgogIDxwYXRoIGQ9Ik0yMSAzdjVoLTUiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/rotate-cw
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+async function uploadMediaBlob(blob, fileName, mediaType, _projectId, duration) {
+  const reqResult = await requestUpload({
+    fileName,
+    mimeType: blob.type,
+    size: blob.size,
+    mediaTypeHint: mediaType,
+    duration
+  });
+  if (!reqResult.success) {
+    throw new Error(reqResult.error);
+  }
+  const {
+    uploadUrl,
+    key,
+    fileUrl,
+    assetId,
+    originalName,
+    mediaType: resolvedMediaType
+  } = reqResult.data;
+  const putRes = await fetch(uploadUrl, {
+    method: "PUT",
+    headers: { "Content-Type": blob.type },
+    body: blob
+  });
+  if (!putRes.ok) {
+    throw new Error(`Upload failed (${putRes.status})`);
+  }
+  const confirmResult = await confirmUpload({
+    assetId,
+    key,
+    fileUrl,
+    originalName,
+    mimeType: blob.type,
+    mediaType: resolvedMediaType,
+    duration: duration && isFinite(duration) ? Math.floor(duration) : null
+  });
+  if (!confirmResult.success) {
+    throw new Error(confirmResult.error);
+  }
+  return {
+    url: fileUrl,
+    key,
+    fileName: originalName,
+    duration
+  };
+}
+function generateTimestampedFileName(prefix, extension) {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+  return `${prefix}-${timestamp}.${extension}`;
+}
+function formatDuration(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+function handleMediaError(err) {
+  if (err instanceof DOMException) {
+    if (err.name === "NotAllowedError" || err.name === "PermissionDeniedError") {
+      return {
+        type: "permission",
+        message: "Permission denied. Please allow camera/microphone access in your browser settings."
+      };
+    }
+    if (err.name === "NotFoundError") {
+      return {
+        type: "unsupported",
+        message: "No camera or microphone found on this device."
+      };
+    }
+    if (err.name === "NotSupportedError") {
+      return {
+        type: "unsupported",
+        message: "Your browser does not support this feature. Please use Chrome, Firefox, or Safari."
+      };
+    }
+  }
+  if (err instanceof Error) {
+    return {
+      type: "unknown",
+      message: err.message
+    };
+  }
+  return {
+    type: "unknown",
+    message: "An unknown error occurred"
+  };
+}
+function stopMediaStream(stream) {
+  if (stream) {
+    stream.getTracks().forEach((track) => track.stop());
+  }
+}
+function Dual_recorder($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { ctx, onComplete } = $$props;
+    let recorderState = "idle";
+    let error = "";
+    let displayDuration = 0;
+    let screenStream = null;
+    let webcamStream = null;
+    let screenRecorder = null;
+    let webcamRecorder = null;
+    let screenChunks = [];
+    let webcamChunks = [];
+    let recordingInterval = null;
+    let recordingStartTime = 0;
+    const MAX_DURATION = 300;
+    async function startRecording() {
+      try {
+        error = "";
+        screenStream = await navigator.mediaDevices.getDisplayMedia({
+          video: { width: { ideal: 1920 }, height: { ideal: 1080 } },
+          audio: true
+        });
+        webcamStream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            width: { ideal: 640 },
+            height: { ideal: 640 },
+            facingMode: "user"
+          },
+          audio: true
+        });
+        const mimeType = "video/mp4";
+        if (!MediaRecorder.isTypeSupported(mimeType)) {
+          throw new Error("Your browser does not support MP4 recording. Please use Safari.");
+        }
+        screenChunks = [];
+        webcamChunks = [];
+        screenRecorder = new MediaRecorder(screenStream, { mimeType, videoBitsPerSecond: 5e6 });
+        webcamRecorder = new MediaRecorder(webcamStream, { mimeType, videoBitsPerSecond: 25e5 });
+        screenRecorder.ondataavailable = (e) => {
+          if (e.data.size > 0) screenChunks.push(e.data);
+        };
+        webcamRecorder.ondataavailable = (e) => {
+          if (e.data.size > 0) webcamChunks.push(e.data);
+        };
+        screenStream.getVideoTracks()[0].onended = () => stopRecording();
+        let stoppedCount = 0;
+        const onRecorderStop = () => {
+          stoppedCount++;
+          if (stoppedCount === 2) uploadBoth();
+        };
+        screenRecorder.onstop = onRecorderStop;
+        webcamRecorder.onstop = onRecorderStop;
+        screenRecorder.start(1e3);
+        webcamRecorder.start(1e3);
+        recorderState = "recording";
+        displayDuration = 0;
+        recordingStartTime = Date.now();
+        recordingInterval = setInterval(
+          () => {
+            displayDuration = (Date.now() - recordingStartTime) / 1e3;
+            if (displayDuration >= MAX_DURATION) stopRecording();
+          },
+          100
+        );
+      } catch (err) {
+        error = handleMediaError(err).message;
+        cleanup();
+      }
+    }
+    function stopRecording() {
+      if (recorderState !== "recording") return;
+      if (recordingInterval) {
+        clearInterval(recordingInterval);
+        recordingInterval = null;
+      }
+      screenRecorder?.stop();
+      webcamRecorder?.stop();
+      stopMediaStream(screenStream);
+      stopMediaStream(webcamStream);
+      screenStream = null;
+      webcamStream = null;
+      recorderState = "uploading";
+    }
+    async function uploadBoth() {
+      recorderState = "uploading";
+      error = "";
+      const projectId = ctx.project.id;
+      try {
+        const screenBlob = new Blob(screenChunks, { type: "video/mp4" });
+        const webcamBlob = new Blob(webcamChunks, { type: "video/mp4" });
+        const screenUrl = URL.createObjectURL(screenBlob);
+        const webcamUrl = URL.createObjectURL(webcamBlob);
+        const [screenMeta, webcamMeta] = await Promise.all([
+          extractMediaMetadataFromUrl(screenUrl, "video"),
+          extractMediaMetadataFromUrl(webcamUrl, "video")
+        ]);
+        URL.revokeObjectURL(screenUrl);
+        URL.revokeObjectURL(webcamUrl);
+        const screenDuration = screenMeta.duration && screenMeta.duration > 0 ? screenMeta.duration : 1;
+        const webcamDuration = webcamMeta.duration && webcamMeta.duration > 0 ? webcamMeta.duration : 1;
+        const [screenResult, webcamResult] = await Promise.all([
+          uploadMediaBlob(screenBlob, generateTimestampedFileName("screen", "mp4"), "video", projectId, screenDuration),
+          uploadMediaBlob(webcamBlob, generateTimestampedFileName("webcam", "mp4"), "video", projectId, webcamDuration)
+        ]);
+        onComplete({
+          screenSrc: screenResult.url,
+          screenKey: screenResult.key,
+          screenDuration,
+          webcamSrc: webcamResult.url,
+          webcamKey: webcamResult.key,
+          webcamDuration
+        });
+      } catch (err) {
+        error = err instanceof Error ? err.message : "Upload failed";
+        recorderState = "idle";
+      }
+    }
+    function cleanup() {
+      if (recordingInterval) clearInterval(recordingInterval);
+      stopMediaStream(screenStream);
+      stopMediaStream(webcamStream);
+      screenStream = null;
+      webcamStream = null;
+      recorderState = "idle";
+    }
+    $$renderer2.push(`<div class="space-y-3">`);
+    if (
+      // Wire up video preview elements
+      // Cleanup on destroy
+      recorderState === "recording"
+    ) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="rounded border-2 border-destructive bg-destructive/10 p-3"><div class="relative mb-2 overflow-hidden rounded bg-black"><video autoplay="" muted="" playsinline="" class="h-auto w-full" style="max-height: 150px; aspect-ratio: 16/9;"></video> <div class="absolute top-2 left-2 flex items-center gap-2 rounded bg-black/50 px-2 py-1"><div class="h-2 w-2 animate-pulse rounded-full bg-destructive"></div> `);
+      Monitor($$renderer2, { class: "h-3 w-3 text-white" });
+      $$renderer2.push(`<!----> <span class="text-[10px] text-white">Screen</span></div> <div class="absolute top-2 right-2 rounded bg-black/50 px-2 py-1"><span class="font-mono text-xs text-white tabular-nums">${escape_html(formatDuration$1(Math.floor(displayDuration)))}</span></div> <div class="absolute right-2 bottom-2 h-16 w-16 overflow-hidden rounded-full border-2 border-white/50 shadow-lg"><video autoplay="" muted="" playsinline="" class="h-full w-full object-cover"></video></div></div> `);
+      Button($$renderer2, {
+        variant: "destructive",
+        size: "sm",
+        class: "w-full",
+        onclick: stopRecording,
+        children: ($$renderer3) => {
+          Square($$renderer3, { class: "mr-1 size-3" });
+          $$renderer3.push(`<!----> Stop Recording`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----> `);
+      if (displayDuration >= MAX_DURATION - 10) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<p class="mt-1 text-center text-xs text-destructive">${escape_html(Math.round(MAX_DURATION - displayDuration))}s remaining</p>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else if (recorderState === "uploading") {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<div class="rounded border bg-muted/30 p-6 text-center">`);
+      Loader_circle($$renderer2, { class: "mx-auto mb-2 size-6 animate-spin text-primary" });
+      $$renderer2.push(`<!----> <span class="text-sm">Uploading both recordings...</span></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div class="rounded border bg-muted/30 p-4 text-center"><div class="mx-auto mb-3 flex items-center justify-center gap-3"><div class="flex items-center gap-1.5 rounded bg-background px-3 py-2 shadow-sm">`);
+      Monitor($$renderer2, { class: "size-4 text-muted-foreground" });
+      $$renderer2.push(`<!----> <span class="text-xs">Screen</span></div> <span class="text-xs text-muted-foreground">+</span> <div class="flex items-center gap-1.5 rounded bg-background px-3 py-2 shadow-sm">`);
+      Camera($$renderer2, { class: "size-4 text-muted-foreground" });
+      $$renderer2.push(`<!----> <span class="text-xs">Webcam</span></div></div> <p class="mb-3 text-[10px] text-muted-foreground">Records your screen and webcam simultaneously. The webcam will appear as a circular overlay
+        in the corner.</p> `);
+      Button($$renderer2, {
+        variant: "default",
+        size: "sm",
+        class: "w-full",
+        onclick: startRecording,
+        children: ($$renderer3) => {
+          $$renderer3.push(`<!---->Start Recording`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (error) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p class="text-xs text-destructive">${escape_html(error)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+const template$9 = {
+  id: "screen-webcam-demo",
+  name: "Screen + Webcam Recorder",
+  description: "Record screen and webcam together for product demos, with auto-captions",
+  thumbnail: "/templates/screen-webcam-demo.svg",
+  icon: Monitor_play,
+  category: "recording",
+  seoTitle: "Free Screen and Webcam Recorder with Auto Captions",
+  seoDescription: "Record your screen and webcam simultaneously, then get automatic captions generated in seconds. Free online tool — no install required.",
+  keywords: [
+    "screen recorder",
+    "webcam recorder",
+    "screen and webcam",
+    "auto captions",
+    "product demo recorder",
+    "loom alternative"
+  ],
+  steps: [
+    {
+      title: "Record Screen & Webcam",
+      description: "Record your screen and webcam at the same time",
+      component: Dual_recorder
+    }
+  ],
+  async apply(values, ctx) {
+    const { screenSrc, screenKey, screenDuration, webcamSrc, webcamKey, webcamDuration } = values;
+    const { width, height } = ctx.project;
+    const ar = height / width;
+    const maxDuration = Math.max(screenDuration, webcamDuration);
+    const enterTime = ctx.currentTime;
+    const screenExitTime = enterTime + screenDuration;
+    const webcamExitTime = enterTime + webcamDuration;
+    const screenPadPct = 4 * Math.min(1, ar);
+    const screenLayer = createLayer("video", {
+      props: {
+        src: screenSrc,
+        fileKey: screenKey,
+        width: round1(100 - screenPadPct * 2),
+        height: round1(toPct(ar) - screenPadPct * 2),
+        borderRadius: 1.2,
+        objectFit: "cover"
+      },
+      style: {
+        opacity: 1,
+        blur: 0,
+        brightness: 1,
+        contrast: 1,
+        saturate: 1,
+        dropShadowX: 0,
+        dropShadowY: 8,
+        dropShadowBlur: 32,
+        dropShadowColor: "rgba(0,0,0,0.4)"
+      },
+      projectDimensions: { width, height },
+      layer: {
+        name: "Screen Recording",
+        enterTime,
+        exitTime: screenExitTime,
+        contentDuration: screenDuration
+      }
+    });
+    const minFrac = Math.min(1, ar);
+    const webcamSizePct = round1(minFrac * 22);
+    const webcamPaddingPct = round1(minFrac * 5);
+    const webcamLayer = createLayer("video", {
+      props: {
+        src: webcamSrc,
+        fileKey: webcamKey,
+        width: webcamSizePct,
+        height: webcamSizePct,
+        borderRadius: webcamSizePct,
+        objectFit: "cover",
+        frame: "none"
+      },
+      transform: {
+        position: {
+          x: round1(50 - webcamSizePct / 2 - webcamPaddingPct),
+          y: round1(ar * 50 - webcamSizePct / 2 - webcamPaddingPct),
+          z: 0
+        },
+        rotation: { x: 0, y: 0, z: 0 },
+        scale: { x: 1, y: 1 },
+        anchor: "center"
+      },
+      style: {
+        opacity: 1,
+        blur: 0,
+        brightness: 1,
+        contrast: 1,
+        saturate: 1,
+        dropShadowX: 0,
+        dropShadowY: 4,
+        dropShadowBlur: 16,
+        dropShadowColor: "rgba(0,0,0,0.5)"
+      },
+      projectDimensions: { width, height },
+      layer: {
+        name: "Webcam",
+        enterTime,
+        exitTime: webcamExitTime,
+        contentDuration: webcamDuration
+      }
+    });
+    const input = createFromSchema(generateCaptionsAction.inputSchema, {});
+    const {
+      layersToAdd: generatedLayersToAdd,
+      layersToUpdate,
+      projectUpdates
+    } = await runAction({
+      action: generateCaptionsAction,
+      input,
+      sourceLayer: webcamLayer,
+      project: ctx.project
+    });
+    return {
+      layersToAdd: [
+        { layer: screenLayer, presets: [{ id: "fade-in", startTime: enterTime, duration: 0.3 }] },
+        {
+          layer: webcamLayer,
+          presets: [{ id: "scale-in", startTime: enterTime + 0.2, duration: 0.4 }]
+        },
+        ...generatedLayersToAdd ?? []
+      ],
+      layersToUpdate: [...layersToUpdate ?? []],
+      projectUpdates: {
+        ...enterTime + maxDuration > ctx.project.duration ? { duration: enterTime + maxDuration } : {},
+        ...projectUpdates
+      }
+    };
+  }
+};
+const __vite_glob_0_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template: template$9
+}, Symbol.toStringTag, { value: "Module" }));
+function extract(value, defaultValue) {
+  if (isFunction$1(value)) {
+    const getter = value;
+    const gotten = getter();
+    if (gotten === void 0) return defaultValue;
+    return gotten;
+  }
+  if (value === void 0) return defaultValue;
+  return value;
+}
+function useDebounce(callback, wait) {
+  let context = null;
+  const wait$ = derived(() => extract(wait, 250));
+  function debounced(...args) {
+    if (context) {
+      if (context.timeout) {
+        clearTimeout(context.timeout);
+      }
+    } else {
+      let resolve;
+      let reject;
+      const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+      });
+      context = { timeout: null, runner: null, promise, resolve, reject };
+    }
+    context.runner = async () => {
+      if (!context) return;
+      const ctx = context;
+      context = null;
+      try {
+        ctx.resolve(await callback.apply(this, args));
+      } catch (error) {
+        ctx.reject(error);
+      }
+    };
+    context.timeout = setTimeout(context.runner, wait$());
+    return context.promise;
+  }
+  debounced.cancel = async () => {
+    if (!context || context.timeout === null) {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      if (!context || context.timeout === null) return;
+    }
+    clearTimeout(context.timeout);
+    context.reject("Cancelled");
+    context = null;
+  };
+  debounced.runScheduledNow = async () => {
+    if (!context || !context.timeout) {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      if (!context || !context.timeout) return;
+    }
+    clearTimeout(context.timeout);
+    context.timeout = null;
+    await context.runner?.();
+  };
+  Object.defineProperty(debounced, "pending", {
+    enumerable: true,
+    get() {
+      return !!context?.timeout;
+    }
+  });
+  return debounced;
+}
+class IsMounted {
+  #isMounted = false;
+  constructor() {
+  }
+  get current() {
+    return this.#isMounted;
+  }
+}
+function Arrow($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id = useId(),
+      children,
+      child,
+      width = 10,
+      height = 5,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const mergedProps = derived(() => mergeProps(restProps, { id }));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<span${attributes({ ...mergedProps() })}>`);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children?.($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<svg${attr("width", width)}${attr("height", height)} viewBox="0 0 30 10" preserveAspectRatio="none" data-arrow=""><polygon points="0,0 30,0 15,10" fill="currentColor"></polygon></svg>`);
+      }
+      $$renderer2.push(`<!--]--></span>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function Floating_layer_arrow($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { id = useId(), ref = null, $$slots, $$events, ...restProps } = $$props;
+    const arrowState = FloatingArrowState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, arrowState.props));
+    Arrow($$renderer2, spread_props([mergedProps()]));
+    bind_props($$props, { ref });
+  });
+}
+class SvelteResizeObserver {
+  #node;
+  #onResize;
+  constructor(node, onResize) {
+    this.#node = node;
+    this.#onResize = onResize;
+    this.handler = this.handler.bind(this);
+  }
+  handler() {
+    let rAF = 0;
+    const _node = this.#node();
+    if (!_node) return;
+    const resizeObserver = new ResizeObserver(() => {
+      cancelAnimationFrame(rAF);
+      rAF = window.requestAnimationFrame(this.#onResize);
+    });
+    resizeObserver.observe(_node);
+    return () => {
+      window.cancelAnimationFrame(rAF);
+      resizeObserver.unobserve(_node);
+    };
+  }
+}
+class StateMachine {
+  state;
+  #machine;
+  constructor(initialState, machine) {
+    this.state = simpleBox(initialState);
+    this.#machine = machine;
+    this.dispatch = this.dispatch.bind(this);
+  }
+  #reducer(event) {
+    const nextState = this.#machine[this.state.current][event];
+    return nextState ?? this.state.current;
+  }
+  dispatch(event) {
+    this.state.current = this.#reducer(event);
+  }
+}
+const animationNameCache = /* @__PURE__ */ new WeakMap();
+const ANIMATION_NAME_CACHE_TTL_MS = 16;
+const presenceMachine = {
+  mounted: { UNMOUNT: "unmounted", ANIMATION_OUT: "unmountSuspended" },
+  unmountSuspended: { MOUNT: "mounted", ANIMATION_END: "unmounted" },
+  unmounted: { MOUNT: "mounted" }
+};
+class Presence {
+  opts;
+  prevAnimationNameState = "none";
+  styles = { display: "", animationName: "none" };
+  initialStatus;
+  previousPresent;
+  machine;
+  present;
+  constructor(opts) {
+    this.opts = opts;
+    this.present = this.opts.open;
+    this.initialStatus = opts.open.current ? "mounted" : "unmounted";
+    this.previousPresent = new Previous(() => this.present.current);
+    this.machine = new StateMachine(this.initialStatus, presenceMachine);
+    this.handleAnimationEnd = this.handleAnimationEnd.bind(this);
+    this.handleAnimationStart = this.handleAnimationStart.bind(this);
+    watchPresenceChange(this);
+    watchStatusChange(this);
+    watchRefChange(this);
+  }
+  /**
+   * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+   * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+   * make sure we only trigger ANIMATION_END for the currently active animation.
+   */
+  handleAnimationEnd(event) {
+    if (!this.opts.ref.current) return;
+    const currAnimationName = this.styles.animationName || getAnimationName(this.opts.ref.current);
+    const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
+    if (event.target === this.opts.ref.current && isCurrentAnimation) {
+      this.machine.dispatch("ANIMATION_END");
+    }
+  }
+  handleAnimationStart(event) {
+    if (!this.opts.ref.current) return;
+    if (event.target === this.opts.ref.current) {
+      const animationName = getAnimationName(this.opts.ref.current, true);
+      this.prevAnimationNameState = animationName;
+      this.styles.animationName = animationName;
+    }
+  }
+  #isPresent = derived(() => {
+    return ["mounted", "unmountSuspended"].includes(this.machine.state.current);
+  });
+  get isPresent() {
+    return this.#isPresent();
+  }
+  set isPresent($$value) {
+    return this.#isPresent($$value);
+  }
+}
+function watchPresenceChange(state) {
+  watch$1(() => state.present.current, () => {
+    if (!state.opts.ref.current) return;
+    const hasPresentChanged = state.present.current !== state.previousPresent.current;
+    if (!hasPresentChanged) return;
+    const prevAnimationName = state.prevAnimationNameState;
+    const currAnimationName = getAnimationName(state.opts.ref.current, true);
+    state.styles.animationName = currAnimationName;
+    if (state.present.current) {
+      state.machine.dispatch("MOUNT");
+    } else if (currAnimationName === "none" || state.styles.display === "none") {
+      state.machine.dispatch("UNMOUNT");
+    } else {
+      const isAnimating = prevAnimationName !== currAnimationName;
+      if (state.previousPresent.current && isAnimating) {
+        state.machine.dispatch("ANIMATION_OUT");
+      } else {
+        state.machine.dispatch("UNMOUNT");
+      }
+    }
+  });
+}
+function watchStatusChange(state) {
+  watch$1(() => state.machine.state.current, () => {
+    if (!state.opts.ref.current) return;
+    const currAnimationName = state.machine.state.current === "mounted" ? getAnimationName(state.opts.ref.current, true) : "none";
+    state.prevAnimationNameState = currAnimationName;
+    state.styles.animationName = currAnimationName;
+  });
+}
+function watchRefChange(state) {
+  watch$1(() => state.opts.ref.current, () => {
+    if (!state.opts.ref.current) return;
+    const computed = getComputedStyle(state.opts.ref.current);
+    state.styles = {
+      display: computed.display,
+      animationName: computed.animationName || "none"
+    };
+    return executeCallbacks(on(state.opts.ref.current, "animationstart", state.handleAnimationStart), on(state.opts.ref.current, "animationcancel", state.handleAnimationEnd), on(state.opts.ref.current, "animationend", state.handleAnimationEnd));
+  });
+}
+function getAnimationName(node, forceRefresh = false) {
+  if (!node) return "none";
+  const now = performance.now();
+  const cached = animationNameCache.get(node);
+  if (!forceRefresh && cached && now - cached.timestamp < ANIMATION_NAME_CACHE_TTL_MS) {
+    return cached.value;
+  }
+  const value = getComputedStyle(node).animationName || "none";
+  animationNameCache.set(node, { value, timestamp: now });
+  return value;
+}
+function Presence_layer($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { open, forceMount, presence, ref } = $$props;
+    const presenceState = new Presence({ open: boxWith(() => open), ref });
+    if (forceMount || open || presenceState.isPresent) {
+      $$renderer2.push("<!--[0-->");
+      presence?.($$renderer2, { present: presenceState.isPresent });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+const scrollAreaAttrs = createBitsAttrs({
+  component: "scroll-area",
+  parts: ["root", "viewport", "corner", "thumb", "scrollbar"]
+});
+const ScrollAreaRootContext = new Context("ScrollArea.Root");
+const ScrollAreaScrollbarContext = new Context("ScrollArea.Scrollbar");
+const ScrollAreaScrollbarVisibleContext = new Context("ScrollArea.ScrollbarVisible");
+const ScrollAreaScrollbarAxisContext = new Context("ScrollArea.ScrollbarAxis");
+const ScrollAreaScrollbarSharedContext = new Context("ScrollArea.ScrollbarShared");
+class ScrollAreaRootState {
+  static create(opts) {
+    return ScrollAreaRootContext.set(new ScrollAreaRootState(opts));
+  }
+  opts;
+  attachment;
+  scrollAreaNode = null;
+  viewportNode = null;
+  contentNode = null;
+  scrollbarXNode = null;
+  scrollbarYNode = null;
+  cornerWidth = 0;
+  cornerHeight = 0;
+  scrollbarXEnabled = false;
+  scrollbarYEnabled = false;
+  domContext;
+  constructor(opts) {
+    this.opts = opts;
+    this.attachment = attachRef(opts.ref, (v) => this.scrollAreaNode = v);
+    this.domContext = new DOMContext(opts.ref);
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    dir: this.opts.dir.current,
+    style: {
+      position: "relative",
+      "--bits-scroll-area-corner-height": `${this.cornerHeight}px`,
+      "--bits-scroll-area-corner-width": `${this.cornerWidth}px`
+    },
+    [scrollAreaAttrs.root]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaViewportState {
+  static create(opts) {
+    return new ScrollAreaViewportState(opts, ScrollAreaRootContext.get());
+  }
+  opts;
+  root;
+  attachment;
+  #contentId = simpleBox(useId());
+  #contentRef = simpleBox(null);
+  contentAttachment = attachRef(this.#contentRef, (v) => this.root.contentNode = v);
+  constructor(opts, root) {
+    this.opts = opts;
+    this.root = root;
+    this.attachment = attachRef(opts.ref, (v) => this.root.viewportNode = v);
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    style: {
+      overflowX: this.root.scrollbarXEnabled ? "scroll" : "hidden",
+      overflowY: this.root.scrollbarYEnabled ? "scroll" : "hidden"
+    },
+    [scrollAreaAttrs.viewport]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+  #contentProps = derived(() => ({
+    id: this.#contentId.current,
+    "data-scroll-area-content": "",
+    style: {
+      minWidth: this.root.scrollbarXEnabled ? "fit-content" : void 0
+    },
+    ...this.contentAttachment
+  }));
+  get contentProps() {
+    return this.#contentProps();
+  }
+  set contentProps($$value) {
+    return this.#contentProps($$value);
+  }
+}
+class ScrollAreaScrollbarState {
+  static create(opts) {
+    return ScrollAreaScrollbarContext.set(new ScrollAreaScrollbarState(opts, ScrollAreaRootContext.get()));
+  }
+  opts;
+  root;
+  #isHorizontal = derived(() => this.opts.orientation.current === "horizontal");
+  get isHorizontal() {
+    return this.#isHorizontal();
+  }
+  set isHorizontal($$value) {
+    return this.#isHorizontal($$value);
+  }
+  hasThumb = false;
+  constructor(opts, root) {
+    this.opts = opts;
+    this.root = root;
+    watch$1(() => this.isHorizontal, (isHorizontal) => {
+      if (isHorizontal) {
+        this.root.scrollbarXEnabled = true;
+        return () => {
+          this.root.scrollbarXEnabled = false;
+        };
+      } else {
+        this.root.scrollbarYEnabled = true;
+        return () => {
+          this.root.scrollbarYEnabled = false;
+        };
+      }
+    });
+  }
+}
+class ScrollAreaScrollbarHoverState {
+  static create() {
+    return new ScrollAreaScrollbarHoverState(ScrollAreaScrollbarContext.get());
+  }
+  scrollbar;
+  root;
+  isVisible = false;
+  constructor(scrollbar) {
+    this.scrollbar = scrollbar;
+    this.root = scrollbar.root;
+  }
+  #props = derived(() => ({ "data-state": this.isVisible ? "visible" : "hidden" }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarScrollState {
+  static create() {
+    return new ScrollAreaScrollbarScrollState(ScrollAreaScrollbarContext.get());
+  }
+  scrollbar;
+  root;
+  machine = new StateMachine("hidden", {
+    hidden: { SCROLL: "scrolling" },
+    scrolling: { SCROLL_END: "idle", POINTER_ENTER: "interacting" },
+    interacting: { SCROLL: "interacting", POINTER_LEAVE: "idle" },
+    idle: {
+      HIDE: "hidden",
+      SCROLL: "scrolling",
+      POINTER_ENTER: "interacting"
+    }
+  });
+  #isHidden = derived(() => this.machine.state.current === "hidden");
+  get isHidden() {
+    return this.#isHidden();
+  }
+  set isHidden($$value) {
+    return this.#isHidden($$value);
+  }
+  constructor(scrollbar) {
+    this.scrollbar = scrollbar;
+    this.root = scrollbar.root;
+    useDebounce(() => this.machine.dispatch("SCROLL_END"), 100);
+    this.onpointerenter = this.onpointerenter.bind(this);
+    this.onpointerleave = this.onpointerleave.bind(this);
+  }
+  onpointerenter(_) {
+    this.machine.dispatch("POINTER_ENTER");
+  }
+  onpointerleave(_) {
+    this.machine.dispatch("POINTER_LEAVE");
+  }
+  #props = derived(() => ({
+    "data-state": this.machine.state.current === "hidden" ? "hidden" : "visible",
+    onpointerenter: this.onpointerenter,
+    onpointerleave: this.onpointerleave
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarAutoState {
+  static create() {
+    return new ScrollAreaScrollbarAutoState(ScrollAreaScrollbarContext.get());
+  }
+  scrollbar;
+  root;
+  isVisible = false;
+  constructor(scrollbar) {
+    this.scrollbar = scrollbar;
+    this.root = scrollbar.root;
+    const handleResize = useDebounce(
+      () => {
+        const viewportNode = this.root.viewportNode;
+        if (!viewportNode) return;
+        const isOverflowX = viewportNode.offsetWidth < viewportNode.scrollWidth;
+        const isOverflowY = viewportNode.offsetHeight < viewportNode.scrollHeight;
+        this.isVisible = this.scrollbar.isHorizontal ? isOverflowX : isOverflowY;
+      },
+      10
+    );
+    new SvelteResizeObserver(() => this.root.viewportNode, handleResize);
+    new SvelteResizeObserver(() => this.root.contentNode, handleResize);
+  }
+  #props = derived(() => ({ "data-state": this.isVisible ? "visible" : "hidden" }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarVisibleState {
+  static create() {
+    return ScrollAreaScrollbarVisibleContext.set(new ScrollAreaScrollbarVisibleState(ScrollAreaScrollbarContext.get()));
+  }
+  scrollbar;
+  root;
+  thumbNode = null;
+  pointerOffset = 0;
+  sizes = {
+    content: 0,
+    viewport: 0,
+    scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 }
+  };
+  #thumbRatio = derived(() => getThumbRatio(this.sizes.viewport, this.sizes.content));
+  get thumbRatio() {
+    return this.#thumbRatio();
+  }
+  set thumbRatio($$value) {
+    return this.#thumbRatio($$value);
+  }
+  #hasThumb = derived(() => Boolean(this.thumbRatio > 0 && this.thumbRatio < 1));
+  get hasThumb() {
+    return this.#hasThumb();
+  }
+  set hasThumb($$value) {
+    return this.#hasThumb($$value);
+  }
+  prevTransformStyle = "";
+  constructor(scrollbar) {
+    this.scrollbar = scrollbar;
+    this.root = scrollbar.root;
+  }
+  setSizes(sizes) {
+    this.sizes = sizes;
+  }
+  getScrollPosition(pointerPos, dir) {
+    return getScrollPositionFromPointer({
+      pointerPos,
+      pointerOffset: this.pointerOffset,
+      sizes: this.sizes,
+      dir
+    });
+  }
+  onThumbPointerUp() {
+    this.pointerOffset = 0;
+  }
+  onThumbPointerDown(pointerPos) {
+    this.pointerOffset = pointerPos;
+  }
+  xOnThumbPositionChange() {
+    if (!(this.root.viewportNode && this.thumbNode)) return;
+    const scrollPos = this.root.viewportNode.scrollLeft;
+    const offset = getThumbOffsetFromScroll({
+      scrollPos,
+      sizes: this.sizes,
+      dir: this.root.opts.dir.current
+    });
+    const transformStyle = `translate3d(${offset}px, 0, 0)`;
+    this.thumbNode.style.transform = transformStyle;
+    this.prevTransformStyle = transformStyle;
+  }
+  xOnWheelScroll(scrollPos) {
+    if (!this.root.viewportNode) return;
+    this.root.viewportNode.scrollLeft = scrollPos;
+  }
+  xOnDragScroll(pointerPos) {
+    if (!this.root.viewportNode) return;
+    this.root.viewportNode.scrollLeft = this.getScrollPosition(pointerPos, this.root.opts.dir.current);
+  }
+  yOnThumbPositionChange() {
+    if (!(this.root.viewportNode && this.thumbNode)) return;
+    const scrollPos = this.root.viewportNode.scrollTop;
+    const offset = getThumbOffsetFromScroll({ scrollPos, sizes: this.sizes });
+    const transformStyle = `translate3d(0, ${offset}px, 0)`;
+    this.thumbNode.style.transform = transformStyle;
+    this.prevTransformStyle = transformStyle;
+  }
+  yOnWheelScroll(scrollPos) {
+    if (!this.root.viewportNode) return;
+    this.root.viewportNode.scrollTop = scrollPos;
+  }
+  yOnDragScroll(pointerPos) {
+    if (!this.root.viewportNode) return;
+    this.root.viewportNode.scrollTop = this.getScrollPosition(pointerPos, this.root.opts.dir.current);
+  }
+}
+class ScrollAreaScrollbarXState {
+  static create(opts) {
+    return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarXState(opts, ScrollAreaScrollbarVisibleContext.get()));
+  }
+  opts;
+  scrollbarVis;
+  root;
+  scrollbar;
+  attachment;
+  computedStyle;
+  constructor(opts, scrollbarVis) {
+    this.opts = opts;
+    this.scrollbarVis = scrollbarVis;
+    this.root = scrollbarVis.root;
+    this.scrollbar = scrollbarVis.scrollbar;
+    this.attachment = attachRef(this.scrollbar.opts.ref, (v) => this.root.scrollbarXNode = v);
+  }
+  onThumbPointerDown = (pointerPos) => {
+    this.scrollbarVis.onThumbPointerDown(pointerPos.x);
+  };
+  onDragScroll = (pointerPos) => {
+    this.scrollbarVis.xOnDragScroll(pointerPos.x);
+  };
+  onThumbPointerUp = () => {
+    this.scrollbarVis.onThumbPointerUp();
+  };
+  onThumbPositionChange = () => {
+    this.scrollbarVis.xOnThumbPositionChange();
+  };
+  onWheelScroll = (e, maxScrollPos) => {
+    if (!this.root.viewportNode) return;
+    const scrollPos = this.root.viewportNode.scrollLeft + e.deltaX;
+    this.scrollbarVis.xOnWheelScroll(scrollPos);
+    if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+      e.preventDefault();
+    }
+  };
+  onResize = () => {
+    if (!(this.scrollbar.opts.ref.current && this.root.viewportNode && this.computedStyle)) return;
+    this.scrollbarVis.setSizes({
+      content: this.root.viewportNode.scrollWidth,
+      viewport: this.root.viewportNode.offsetWidth,
+      scrollbar: {
+        size: this.scrollbar.opts.ref.current.clientWidth,
+        paddingStart: toInt(this.computedStyle.paddingLeft),
+        paddingEnd: toInt(this.computedStyle.paddingRight)
+      }
+    });
+  };
+  #thumbSize = derived(() => {
+    return getThumbSize(this.scrollbarVis.sizes);
+  });
+  get thumbSize() {
+    return this.#thumbSize();
+  }
+  set thumbSize($$value) {
+    return this.#thumbSize($$value);
+  }
+  #props = derived(() => ({
+    id: this.scrollbar.opts.id.current,
+    "data-orientation": "horizontal",
+    style: {
+      bottom: 0,
+      left: this.root.opts.dir.current === "rtl" ? "var(--bits-scroll-area-corner-width)" : 0,
+      right: this.root.opts.dir.current === "ltr" ? "var(--bits-scroll-area-corner-width)" : 0,
+      "--bits-scroll-area-thumb-width": `${this.thumbSize}px`
+    },
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarYState {
+  static create(opts) {
+    return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarYState(opts, ScrollAreaScrollbarVisibleContext.get()));
+  }
+  opts;
+  scrollbarVis;
+  root;
+  scrollbar;
+  attachment;
+  computedStyle;
+  constructor(opts, scrollbarVis) {
+    this.opts = opts;
+    this.scrollbarVis = scrollbarVis;
+    this.root = scrollbarVis.root;
+    this.scrollbar = scrollbarVis.scrollbar;
+    this.attachment = attachRef(this.scrollbar.opts.ref, (v) => this.root.scrollbarYNode = v);
+    this.onThumbPointerDown = this.onThumbPointerDown.bind(this);
+    this.onDragScroll = this.onDragScroll.bind(this);
+    this.onThumbPointerUp = this.onThumbPointerUp.bind(this);
+    this.onThumbPositionChange = this.onThumbPositionChange.bind(this);
+    this.onWheelScroll = this.onWheelScroll.bind(this);
+    this.onResize = this.onResize.bind(this);
+  }
+  onThumbPointerDown(pointerPos) {
+    this.scrollbarVis.onThumbPointerDown(pointerPos.y);
+  }
+  onDragScroll(pointerPos) {
+    this.scrollbarVis.yOnDragScroll(pointerPos.y);
+  }
+  onThumbPointerUp() {
+    this.scrollbarVis.onThumbPointerUp();
+  }
+  onThumbPositionChange() {
+    this.scrollbarVis.yOnThumbPositionChange();
+  }
+  onWheelScroll(e, maxScrollPos) {
+    if (!this.root.viewportNode) return;
+    const scrollPos = this.root.viewportNode.scrollTop + e.deltaY;
+    this.scrollbarVis.yOnWheelScroll(scrollPos);
+    if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+      e.preventDefault();
+    }
+  }
+  onResize() {
+    if (!(this.scrollbar.opts.ref.current && this.root.viewportNode && this.computedStyle)) return;
+    this.scrollbarVis.setSizes({
+      content: this.root.viewportNode.scrollHeight,
+      viewport: this.root.viewportNode.offsetHeight,
+      scrollbar: {
+        size: this.scrollbar.opts.ref.current.clientHeight,
+        paddingStart: toInt(this.computedStyle.paddingTop),
+        paddingEnd: toInt(this.computedStyle.paddingBottom)
+      }
+    });
+  }
+  #thumbSize = derived(() => {
+    return getThumbSize(this.scrollbarVis.sizes);
+  });
+  get thumbSize() {
+    return this.#thumbSize();
+  }
+  set thumbSize($$value) {
+    return this.#thumbSize($$value);
+  }
+  #props = derived(() => ({
+    id: this.scrollbar.opts.id.current,
+    "data-orientation": "vertical",
+    style: {
+      top: 0,
+      right: this.root.opts.dir.current === "ltr" ? 0 : void 0,
+      left: this.root.opts.dir.current === "rtl" ? 0 : void 0,
+      bottom: "var(--bits-scroll-area-corner-height)",
+      "--bits-scroll-area-thumb-height": `${this.thumbSize}px`
+    },
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaScrollbarSharedState {
+  static create() {
+    return ScrollAreaScrollbarSharedContext.set(new ScrollAreaScrollbarSharedState(ScrollAreaScrollbarAxisContext.get()));
+  }
+  scrollbarState;
+  root;
+  scrollbarVis;
+  scrollbar;
+  rect = null;
+  prevWebkitUserSelect = "";
+  handleResize;
+  handleThumbPositionChange;
+  handleWheelScroll;
+  handleThumbPointerDown;
+  handleThumbPointerUp;
+  #maxScrollPos = derived(() => this.scrollbarVis.sizes.content - this.scrollbarVis.sizes.viewport);
+  get maxScrollPos() {
+    return this.#maxScrollPos();
+  }
+  set maxScrollPos($$value) {
+    return this.#maxScrollPos($$value);
+  }
+  constructor(scrollbarState) {
+    this.scrollbarState = scrollbarState;
+    this.root = scrollbarState.root;
+    this.scrollbarVis = scrollbarState.scrollbarVis;
+    this.scrollbar = scrollbarState.scrollbarVis.scrollbar;
+    this.handleResize = useDebounce(() => this.scrollbarState.onResize(), 10);
+    this.handleThumbPositionChange = this.scrollbarState.onThumbPositionChange;
+    this.handleWheelScroll = this.scrollbarState.onWheelScroll;
+    this.handleThumbPointerDown = this.scrollbarState.onThumbPointerDown;
+    this.handleThumbPointerUp = this.scrollbarState.onThumbPointerUp;
+    new SvelteResizeObserver(() => this.scrollbar.opts.ref.current, this.handleResize);
+    new SvelteResizeObserver(() => this.root.contentNode, this.handleResize);
+    this.onpointerdown = this.onpointerdown.bind(this);
+    this.onpointermove = this.onpointermove.bind(this);
+    this.onpointerup = this.onpointerup.bind(this);
+    this.onlostpointercapture = this.onlostpointercapture.bind(this);
+  }
+  handleDragScroll(e) {
+    if (!this.rect) return;
+    const x = e.clientX - this.rect.left;
+    const y = e.clientY - this.rect.top;
+    this.scrollbarState.onDragScroll({ x, y });
+  }
+  #cleanupPointerState() {
+    if (this.rect === null) return;
+    this.root.domContext.getDocument().body.style.webkitUserSelect = this.prevWebkitUserSelect;
+    if (this.root.viewportNode) this.root.viewportNode.style.scrollBehavior = "";
+    this.rect = null;
+  }
+  onpointerdown(e) {
+    if (e.button !== 0) return;
+    const target = e.target;
+    target.setPointerCapture(e.pointerId);
+    this.rect = this.scrollbar.opts.ref.current?.getBoundingClientRect() ?? null;
+    this.prevWebkitUserSelect = this.root.domContext.getDocument().body.style.webkitUserSelect;
+    this.root.domContext.getDocument().body.style.webkitUserSelect = "none";
+    if (this.root.viewportNode) this.root.viewportNode.style.scrollBehavior = "auto";
+    this.handleDragScroll(e);
+  }
+  onpointermove(e) {
+    this.handleDragScroll(e);
+  }
+  onpointerup(e) {
+    const target = e.target;
+    if (target.hasPointerCapture(e.pointerId)) {
+      target.releasePointerCapture(e.pointerId);
+    }
+    this.#cleanupPointerState();
+  }
+  onlostpointercapture(_) {
+    this.#cleanupPointerState();
+  }
+  #props = derived(() => mergeProps({
+    ...this.scrollbarState.props,
+    style: { position: "absolute", ...this.scrollbarState.props.style },
+    [scrollAreaAttrs.scrollbar]: "",
+    onpointerdown: this.onpointerdown,
+    onpointermove: this.onpointermove,
+    onpointerup: this.onpointerup,
+    onlostpointercapture: this.onlostpointercapture
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaThumbImplState {
+  static create(opts) {
+    return new ScrollAreaThumbImplState(opts, ScrollAreaScrollbarSharedContext.get());
+  }
+  opts;
+  scrollbarState;
+  attachment;
+  #root;
+  #removeUnlinkedScrollListener;
+  #debounceScrollEnd = useDebounce(
+    () => {
+      if (this.#removeUnlinkedScrollListener) {
+        this.#removeUnlinkedScrollListener();
+        this.#removeUnlinkedScrollListener = void 0;
+      }
+    },
+    100
+  );
+  constructor(opts, scrollbarState) {
+    this.opts = opts;
+    this.scrollbarState = scrollbarState;
+    this.#root = scrollbarState.root;
+    this.attachment = attachRef(this.opts.ref, (v) => this.scrollbarState.scrollbarVis.thumbNode = v);
+    this.onpointerdowncapture = this.onpointerdowncapture.bind(this);
+    this.onpointerup = this.onpointerup.bind(this);
+  }
+  onpointerdowncapture(e) {
+    const thumb = e.target;
+    if (!thumb) return;
+    const thumbRect = thumb.getBoundingClientRect();
+    const x = e.clientX - thumbRect.left;
+    const y = e.clientY - thumbRect.top;
+    this.scrollbarState.handleThumbPointerDown({ x, y });
+  }
+  onpointerup(_) {
+    this.scrollbarState.handleThumbPointerUp();
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    "data-state": this.scrollbarState.scrollbarVis.hasThumb ? "visible" : "hidden",
+    style: {
+      width: "var(--bits-scroll-area-thumb-width)",
+      height: "var(--bits-scroll-area-thumb-height)",
+      transform: this.scrollbarState.scrollbarVis.prevTransformStyle
+    },
+    onpointerdowncapture: this.onpointerdowncapture,
+    onpointerup: this.onpointerup,
+    [scrollAreaAttrs.thumb]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class ScrollAreaCornerImplState {
+  static create(opts) {
+    return new ScrollAreaCornerImplState(opts, ScrollAreaRootContext.get());
+  }
+  opts;
+  root;
+  attachment;
+  #width = 0;
+  #height = 0;
+  #hasSize = derived(() => Boolean(this.#width && this.#height));
+  get hasSize() {
+    return this.#hasSize();
+  }
+  set hasSize($$value) {
+    return this.#hasSize($$value);
+  }
+  constructor(opts, root) {
+    this.opts = opts;
+    this.root = root;
+    this.attachment = attachRef(this.opts.ref);
+    new SvelteResizeObserver(() => this.root.scrollbarXNode, () => {
+      const height = this.root.scrollbarXNode?.offsetHeight || 0;
+      this.root.cornerHeight = height;
+      this.#height = height;
+    });
+    new SvelteResizeObserver(() => this.root.scrollbarYNode, () => {
+      const width = this.root.scrollbarYNode?.offsetWidth || 0;
+      this.root.cornerWidth = width;
+      this.#width = width;
+    });
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    style: {
+      width: this.#width,
+      height: this.#height,
+      position: "absolute",
+      right: this.root.opts.dir.current === "ltr" ? 0 : void 0,
+      left: this.root.opts.dir.current === "rtl" ? 0 : void 0,
+      bottom: 0
+    },
+    [scrollAreaAttrs.corner]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+function toInt(value) {
+  return value ? Number.parseInt(value, 10) : 0;
+}
+function getThumbRatio(viewportSize, contentSize) {
+  const ratio = viewportSize / contentSize;
+  return Number.isNaN(ratio) ? 0 : ratio;
+}
+function getThumbSize(sizes) {
+  const ratio = getThumbRatio(sizes.viewport, sizes.content);
+  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
+  return Math.max(thumbSize, 18);
+}
+function getScrollPositionFromPointer({ pointerPos, pointerOffset, sizes, dir = "ltr" }) {
+  const thumbSizePx = getThumbSize(sizes);
+  const thumbCenter = thumbSizePx / 2;
+  const offset = pointerOffset || thumbCenter;
+  const thumbOffsetFromEnd = thumbSizePx - offset;
+  const minPointerPos = sizes.scrollbar.paddingStart + offset;
+  const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
+  return interpolate(pointerPos);
+}
+function getThumbOffsetFromScroll({ scrollPos, sizes, dir = "ltr" }) {
+  const thumbSizePx = getThumbSize(sizes);
+  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+  const scrollbar = sizes.scrollbar.size - scrollbarPadding;
+  const maxScrollPos = sizes.content - sizes.viewport;
+  const maxThumbPos = scrollbar - thumbSizePx;
+  const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+  const scrollWithoutMomentum = clamp(scrollPos, scrollClampRange[0], scrollClampRange[1]);
+  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
+  return interpolate(scrollWithoutMomentum);
+}
+function linearScale(input, output) {
+  return (value) => {
+    if (input[0] === input[1] || output[0] === output[1]) return output[0];
+    const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+    return output[0] + ratio * (value - input[0]);
+  };
+}
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+  return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+function Scroll_area$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      ref = null,
+      id = createId(uid),
+      type = "hover",
+      dir = "ltr",
+      scrollHideDelay = 600,
+      children,
+      child,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const rootState = ScrollAreaRootState.create({
+      type: boxWith(() => type),
+      dir: boxWith(() => dir),
+      scrollHideDelay: boxWith(() => scrollHideDelay),
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, rootState.props));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps() })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_viewport($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      ref = null,
+      id = createId(uid),
+      children,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const viewportState = ScrollAreaViewportState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, viewportState.props));
+    const mergedContentProps = derived(() => mergeProps({}, viewportState.contentProps));
+    $$renderer2.push(`<div${attributes({ ...mergedProps() })}><div${attributes({ ...mergedContentProps() })}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></div></div>`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_scrollbar_shared($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { child, children, $$slots, $$events, ...restProps } = $$props;
+    const scrollbarSharedState = ScrollAreaScrollbarSharedState.create();
+    const mergedProps = derived(() => mergeProps(restProps, scrollbarSharedState.props));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps() })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function Scroll_area_scrollbar_x($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...restProps } = $$props;
+    const isMounted = new IsMounted();
+    const scrollbarXState = ScrollAreaScrollbarXState.create({ mounted: boxWith(() => isMounted.current) });
+    const mergedProps = derived(() => mergeProps(restProps, scrollbarXState.props));
+    Scroll_area_scrollbar_shared($$renderer2, spread_props([mergedProps()]));
+  });
+}
+function Scroll_area_scrollbar_y($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...restProps } = $$props;
+    const isMounted = new IsMounted();
+    const scrollbarYState = ScrollAreaScrollbarYState.create({ mounted: boxWith(() => isMounted.current) });
+    const mergedProps = derived(() => mergeProps(restProps, scrollbarYState.props));
+    Scroll_area_scrollbar_shared($$renderer2, spread_props([mergedProps()]));
+  });
+}
+function Scroll_area_scrollbar_visible($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...restProps } = $$props;
+    const scrollbarVisibleState = ScrollAreaScrollbarVisibleState.create();
+    if (scrollbarVisibleState.scrollbar.opts.orientation.current === "horizontal") {
+      $$renderer2.push("<!--[0-->");
+      Scroll_area_scrollbar_x($$renderer2, spread_props([restProps]));
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      Scroll_area_scrollbar_y($$renderer2, spread_props([restProps]));
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function Scroll_area_scrollbar_auto($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { forceMount = false, $$slots, $$events, ...restProps } = $$props;
+    const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
+    const mergedProps = derived(() => mergeProps(restProps, scrollbarAutoState.props));
+    {
+      let presence = function($$renderer3) {
+        Scroll_area_scrollbar_visible($$renderer3, spread_props([mergedProps()]));
+      };
+      Presence_layer($$renderer2, {
+        open: forceMount || scrollbarAutoState.isVisible,
+        ref: scrollbarAutoState.scrollbar.opts.ref,
+        presence
+      });
+    }
+  });
+}
+function Scroll_area_scrollbar_scroll($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { forceMount = false, $$slots, $$events, ...restProps } = $$props;
+    const scrollbarScrollState = ScrollAreaScrollbarScrollState.create();
+    const mergedProps = derived(() => mergeProps(restProps, scrollbarScrollState.props));
+    {
+      let presence = function($$renderer3) {
+        Scroll_area_scrollbar_visible($$renderer3, spread_props([mergedProps()]));
+      };
+      Presence_layer($$renderer2, spread_props([
+        mergedProps(),
+        {
+          open: forceMount || !scrollbarScrollState.isHidden,
+          ref: scrollbarScrollState.scrollbar.opts.ref,
+          presence,
+          $$slots: { presence: true }
+        }
+      ]));
+    }
+  });
+}
+function Scroll_area_scrollbar_hover($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { forceMount = false, $$slots, $$events, ...restProps } = $$props;
+    const scrollbarHoverState = ScrollAreaScrollbarHoverState.create();
+    const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
+    const mergedProps = derived(() => mergeProps(restProps, scrollbarHoverState.props, scrollbarAutoState.props, {
+      "data-state": scrollbarHoverState.isVisible ? "visible" : "hidden"
+    }));
+    const open = derived(() => forceMount || scrollbarHoverState.isVisible && scrollbarAutoState.isVisible);
+    {
+      let presence = function($$renderer3) {
+        Scroll_area_scrollbar_visible($$renderer3, spread_props([mergedProps()]));
+      };
+      Presence_layer($$renderer2, {
+        open: open(),
+        ref: scrollbarAutoState.scrollbar.opts.ref,
+        presence
+      });
+    }
+  });
+}
+function Scroll_area_scrollbar$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      ref = null,
+      id = createId(uid),
+      orientation,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const scrollbarState = ScrollAreaScrollbarState.create({
+      orientation: boxWith(() => orientation),
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const type = derived(() => scrollbarState.root.opts.type.current);
+    if (type() === "hover") {
+      $$renderer2.push("<!--[0-->");
+      Scroll_area_scrollbar_hover($$renderer2, spread_props([restProps, { id }]));
+    } else if (type() === "scroll") {
+      $$renderer2.push("<!--[1-->");
+      Scroll_area_scrollbar_scroll($$renderer2, spread_props([restProps, { id }]));
+    } else if (type() === "auto") {
+      $$renderer2.push("<!--[2-->");
+      Scroll_area_scrollbar_auto($$renderer2, spread_props([restProps, { id }]));
+    } else if (type() === "always") {
+      $$renderer2.push("<!--[3-->");
+      Scroll_area_scrollbar_visible($$renderer2, spread_props([restProps, { id }]));
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_thumb_impl($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      id,
+      child,
+      children,
+      present,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const isMounted = new IsMounted();
+    const thumbState = ScrollAreaThumbImplState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v),
+      mounted: boxWith(() => isMounted.current)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, thumbState.props, { style: { hidden: !present } }));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps() })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_thumb($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      id = createId(uid),
+      ref = null,
+      forceMount = false,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const scrollbarState = ScrollAreaScrollbarVisibleContext.get();
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      {
+        let presence = function($$renderer4, { present }) {
+          Scroll_area_thumb_impl($$renderer4, spread_props([
+            restProps,
+            {
+              id,
+              present,
+              get ref() {
+                return ref;
+              },
+              set ref($$value) {
+                ref = $$value;
+                $$settled = false;
+              }
+            }
+          ]));
+        };
+        Presence_layer($$renderer3, {
+          open: forceMount || scrollbarState.hasThumb,
+          ref: scrollbarState.scrollbar.opts.ref,
+          presence
+        });
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_corner_impl($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      id,
+      children,
+      child,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const cornerState = ScrollAreaCornerImplState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, cornerState.props));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps() })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area_corner($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      ref = null,
+      id = createId(uid),
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const scrollAreaState = ScrollAreaRootContext.get();
+    const hasBothScrollbarsVisible = derived(() => Boolean(scrollAreaState.scrollbarXNode && scrollAreaState.scrollbarYNode));
+    const hasCorner = derived(() => scrollAreaState.opts.type.current !== "scroll" && hasBothScrollbarsVisible());
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (hasCorner()) {
+        $$renderer3.push("<!--[0-->");
+        Scroll_area_corner_impl($$renderer3, spread_props([
+          restProps,
+          {
+            id,
+            get ref() {
+              return ref;
+            },
+            set ref($$value) {
+              ref = $$value;
+              $$settled = false;
+            }
+          }
+        ]));
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]-->`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Tooltip$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      open = false,
+      triggerId = null,
+      onOpenChange = noop$1,
+      onOpenChangeComplete = noop$1,
+      disabled,
+      delayDuration,
+      disableCloseOnTriggerClick,
+      disableHoverableContent,
+      ignoreNonKeyboardFocus,
+      tether,
+      children
+    } = $$props;
+    const rootState = TooltipRootState.create({
+      open: boxWith(() => open, (v) => {
+        open = v;
+        onOpenChange(v);
+      }),
+      triggerId: boxWith(() => triggerId, (v) => {
+        triggerId = v;
+      }),
+      delayDuration: boxWith(() => delayDuration),
+      disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
+      disableHoverableContent: boxWith(() => disableHoverableContent),
+      ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
+      disabled: boxWith(() => disabled),
+      onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+      tether: boxWith(() => tether)
+    });
+    Floating_layer($$renderer2, {
+      tooltip: true,
+      children: ($$renderer3) => {
+        children?.($$renderer3, {
+          open: rootState.opts.open.current,
+          triggerId: rootState.activeTriggerId,
+          payload: rootState.activePayload
+        });
+        $$renderer3.push(`<!---->`);
+      }
+    });
+    bind_props($$props, { open, triggerId });
+  });
+}
+function Tooltip_content$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      children,
+      child,
+      id = createId(uid),
+      ref = null,
+      side = "top",
+      sideOffset = 0,
+      align = "center",
+      avoidCollisions = true,
+      arrowPadding = 0,
+      sticky = "partial",
+      strategy,
+      hideWhenDetached = false,
+      customAnchor,
+      collisionPadding = 0,
+      onInteractOutside = noop$1,
+      onEscapeKeydown = noop$1,
+      forceMount = false,
+      style,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const contentState = TooltipContentState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v),
+      onInteractOutside: boxWith(() => onInteractOutside),
+      onEscapeKeydown: boxWith(() => onEscapeKeydown)
+    });
+    const floatingProps = derived(() => ({
+      side,
+      sideOffset,
+      align,
+      avoidCollisions,
+      arrowPadding,
+      sticky,
+      hideWhenDetached,
+      collisionPadding,
+      strategy,
+      customAnchor: customAnchor ?? contentState.root.triggerNode
+    }));
+    const mergedProps = derived(() => mergeProps(restProps, floatingProps(), contentState.props));
+    if (forceMount) {
+      $$renderer2.push("<!--[0-->");
+      {
+        let popper = function($$renderer3, { props, wrapperProps }) {
+          const finalProps = mergeProps(props, { style: getFloatingContentCSSVars("tooltip") }, { style });
+          if (child) {
+            $$renderer3.push("<!--[0-->");
+            child($$renderer3, {
+              props: finalProps,
+              wrapperProps,
+              ...contentState.snippetProps
+            });
+            $$renderer3.push(`<!---->`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
+            $$renderer3.push(`<div${attributes({ ...wrapperProps })}><div${attributes({ ...finalProps })}>`);
+            children?.($$renderer3);
+            $$renderer3.push(`<!----></div></div>`);
+          }
+          $$renderer3.push(`<!--]-->`);
+        };
+        Popper_layer_force_mount($$renderer2, spread_props([
+          mergedProps(),
+          contentState.popperProps,
+          {
+            enabled: contentState.root.opts.open.current,
+            id,
+            trapFocus: false,
+            loop: false,
+            preventScroll: false,
+            forceMount: true,
+            ref: contentState.opts.ref,
+            tooltip: true,
+            shouldRender: contentState.shouldRender,
+            contentPointerEvents: contentState.root.disableHoverableContent ? "none" : "auto",
+            popper,
+            $$slots: { popper: true }
+          }
+        ]));
+      }
+    } else if (!forceMount) {
+      $$renderer2.push("<!--[1-->");
+      {
+        let popper = function($$renderer3, { props, wrapperProps }) {
+          const finalProps = mergeProps(props, { style: getFloatingContentCSSVars("tooltip") }, { style });
+          if (child) {
+            $$renderer3.push("<!--[0-->");
+            child($$renderer3, {
+              props: finalProps,
+              wrapperProps,
+              ...contentState.snippetProps
+            });
+            $$renderer3.push(`<!---->`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
+            $$renderer3.push(`<div${attributes({ ...wrapperProps })}><div${attributes({ ...finalProps })}>`);
+            children?.($$renderer3);
+            $$renderer3.push(`<!----></div></div>`);
+          }
+          $$renderer3.push(`<!--]-->`);
+        };
+        Popper_layer($$renderer2, spread_props([
+          mergedProps(),
+          contentState.popperProps,
+          {
+            open: contentState.root.opts.open.current,
+            id,
+            trapFocus: false,
+            loop: false,
+            preventScroll: false,
+            forceMount: false,
+            ref: contentState.opts.ref,
+            tooltip: true,
+            shouldRender: contentState.shouldRender,
+            contentPointerEvents: contentState.root.disableHoverableContent ? "none" : "auto",
+            popper,
+            $$slots: { popper: true }
+          }
+        ]));
+      }
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Tooltip_trigger$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      children,
+      child,
+      id = createId(uid),
+      disabled = false,
+      payload,
+      tether,
+      type = "button",
+      tabindex = 0,
+      ref = null,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const triggerState = TooltipTriggerState.create({
+      id: boxWith(() => id),
+      disabled: boxWith(() => disabled ?? false),
+      tabindex: boxWith(() => tabindex ?? 0),
+      payload: boxWith(() => payload),
+      tether: boxWith(() => tether),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, triggerState.props, { type }));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<button${attributes({ ...mergedProps() })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></button>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Tooltip_arrow($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { ref = null, $$slots, $$events, ...restProps } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      Floating_layer_arrow($$renderer3, spread_props([
+        restProps,
+        {
+          get ref() {
+            return ref;
+          },
+          set ref($$value) {
+            ref = $$value;
+            $$settled = false;
+          }
+        }
+      ]));
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function AudioRecorder($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { onRecordingComplete, maxSizeBytes } = $$props;
+    const editorState = derived(getEditorState);
+    let isRecording = false;
+    let recordingError = "";
+    let mediaRecorder = null;
+    let mediaStream = null;
+    let audioChunks = [];
+    let displayDuration = 0;
+    let currentSizeBytes = 0;
+    let recordingInterval = null;
+    let recordingStartTime = 0;
+    let sizeWarning = derived(() => {
+      if (!maxSizeBytes || currentSizeBytes === 0) return false;
+      return currentSizeBytes >= maxSizeBytes * RECORDER_STOP_THRESHOLD * 0.75;
+    });
+    async function startRecording() {
+      try {
+        recordingError = "";
+        mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const mimeType = "audio/mp4";
+        if (!MediaRecorder.isTypeSupported(mimeType)) {
+          throw new Error("Your browser does not support M4A recording. Please use Safari.");
+        }
+        mediaRecorder = new MediaRecorder(mediaStream, { mimeType });
+        audioChunks = [];
+        displayDuration = 0;
+        currentSizeBytes = 0;
+        recordingStartTime = Date.now();
+        mediaRecorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            audioChunks.push(event.data);
+            currentSizeBytes += event.data.size;
+            if (maxSizeBytes && currentSizeBytes >= maxSizeBytes * RECORDER_STOP_THRESHOLD) {
+              stopRecording();
+            }
+          }
+        };
+        mediaRecorder.onstop = async () => {
+          stopMediaStream(mediaStream);
+          mediaStream = null;
+          finalizeRecording();
+        };
+        mediaRecorder.start(1e3);
+        isRecording = true;
+        recordingInterval = setInterval(
+          () => {
+            displayDuration = (Date.now() - recordingStartTime) / 1e3;
+          },
+          100
+        );
+      } catch (err) {
+        recordingError = handleMediaError(err).message;
+        console.error("Recording error:", err);
+        stopMediaStream(mediaStream);
+        mediaStream = null;
+      }
+    }
+    function stopRecording() {
+      if (mediaRecorder && isRecording) {
+        mediaRecorder.stop();
+        isRecording = false;
+        if (recordingInterval) {
+          clearInterval(recordingInterval);
+          recordingInterval = null;
+        }
+      }
+    }
+    async function finalizeRecording() {
+      const blob = new Blob(audioChunks, { type: "audio/mp4" });
+      const fileName = generateTimestampedFileName("recording", "m4a");
+      let duration = displayDuration;
+      try {
+        duration = await getBlobDuration(blob);
+      } catch {
+      }
+      onRecordingComplete({ blob, fileName, duration, mediaType: "audio" });
+    }
+    function getBlobDuration(blob) {
+      return new Promise((resolve) => {
+        const url = URL.createObjectURL(blob);
+        const audio = document.createElement("audio");
+        audio.preload = "metadata";
+        audio.onloadedmetadata = () => {
+          URL.revokeObjectURL(url);
+          resolve(isFinite(audio.duration) && audio.duration > 0 ? audio.duration : 1);
+        };
+        audio.onerror = () => {
+          URL.revokeObjectURL(url);
+          resolve(1);
+        };
+        audio.src = url;
+      });
+    }
+    async function handleStartRecording() {
+      await uiStore.requireLogin("save your project", () => {
+        uiStore.requireCreateProject(editorState(), startRecording);
+      });
+    }
+    $$renderer2.push(`<div class="space-y-2">`);
+    if (isRecording) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="rounded border-2 border-destructive bg-destructive/10 p-3 text-center"><div class="mb-2 flex items-center justify-center gap-2"><div class="h-2 w-2 animate-pulse rounded-full bg-destructive"></div> <span class="text-sm font-medium">Recording...</span></div> <div class="mb-2 font-mono text-2xl tabular-nums">${escape_html(formatDuration(Math.floor(displayDuration)))}</div> `);
+      Button($$renderer2, {
+        variant: "destructive",
+        size: "sm",
+        onclick: stopRecording,
+        children: ($$renderer3) => {
+          Square($$renderer3, { class: "mr-1 size-3" });
+          $$renderer3.push(`<!----> Stop Recording`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----> `);
+      if (sizeWarning()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<p class="mt-1 text-center text-xs text-destructive">Approaching size limit — recording will stop automatically</p>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      Button($$renderer2, {
+        variant: "default",
+        size: "sm",
+        class: "w-full text-xs",
+        onclick: handleStartRecording,
+        children: ($$renderer3) => {
+          Mic($$renderer3, { class: "mr-1 size-3" });
+          $$renderer3.push(`<!----> Record Audio`);
+        },
+        $$slots: { default: true }
+      });
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (recordingError) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p class="text-xs text-destructive">${escape_html(recordingError)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+function VideoRecorder($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { onRecordingComplete, audioEnabled = true, maxSizeBytes } = $$props;
+    const editorState = derived(getEditorState);
+    let isRecording = false;
+    let recordingError = "";
+    let mediaRecorder = null;
+    let mediaStream = null;
+    let videoChunks = [];
+    let facingMode = "user";
+    let recordingMode = "camera";
+    const MAX_DURATION = 300;
+    let displayDuration = 0;
+    let currentSizeBytes = 0;
+    let recordingInterval = null;
+    let recordingStartTime = 0;
+    let sizeWarning = derived(() => {
+      if (!maxSizeBytes || currentSizeBytes === 0) return false;
+      return currentSizeBytes >= maxSizeBytes * RECORDER_STOP_THRESHOLD * 0.9;
+    });
+    async function handleStartRecording() {
+      await uiStore.requireLogin("save your project", () => {
+        uiStore.requireCreateProject(editorState(), startRecording);
+      });
+    }
+    async function startRecording() {
+      try {
+        recordingError = "";
+        if (recordingMode === "screen") ;
+        else {
+          mediaStream = await navigator.mediaDevices.getUserMedia({
+            video: { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode },
+            audio: audioEnabled
+          });
+        }
+        const mimeType = "video/mp4";
+        if (!MediaRecorder.isTypeSupported(mimeType)) {
+          throw new Error("Your browser does not support MP4 recording. Please use Safari.");
+        }
+        mediaRecorder = new MediaRecorder(mediaStream, {
+          mimeType,
+          videoBitsPerSecond: recordingMode === "screen" ? 5e6 : 25e5
+        });
+        videoChunks = [];
+        displayDuration = 0;
+        currentSizeBytes = 0;
+        recordingStartTime = Date.now();
+        mediaRecorder.ondataavailable = (event) => {
+          if (event.data.size > 0) {
+            videoChunks.push(event.data);
+            currentSizeBytes += event.data.size;
+            if (maxSizeBytes && currentSizeBytes >= maxSizeBytes * RECORDER_STOP_THRESHOLD) {
+              stopRecording();
+            }
+          }
+        };
+        mediaRecorder.onstop = async () => {
+          stopMediaStream(mediaStream);
+          mediaStream = null;
+          finalizeRecording();
+        };
+        mediaRecorder.start(1e3);
+        isRecording = true;
+        recordingInterval = setInterval(
+          () => {
+            displayDuration = (Date.now() - recordingStartTime) / 1e3;
+            if (displayDuration >= MAX_DURATION) {
+              stopRecording();
+            }
+          },
+          100
+        );
+      } catch (err) {
+        recordingError = handleMediaError(err).message;
+        console.error("Recording error:", err);
+        stopMediaStream(mediaStream);
+        mediaStream = null;
+      }
+    }
+    function stopRecording() {
+      if (mediaRecorder && isRecording) {
+        mediaRecorder.stop();
+        isRecording = false;
+        if (recordingInterval) {
+          clearInterval(recordingInterval);
+          recordingInterval = null;
+        }
+      }
+    }
+    async function finalizeRecording() {
+      const blob = new Blob(videoChunks, { type: "video/mp4" });
+      const fileName = generateTimestampedFileName("video", "mp4");
+      let duration = displayDuration;
+      try {
+        duration = await getBlobDuration(blob);
+      } catch {
+      }
+      onRecordingComplete({ blob, fileName, duration, mediaType: "video" });
+    }
+    function getBlobDuration(blob) {
+      return new Promise((resolve) => {
+        const url = URL.createObjectURL(blob);
+        const video = document.createElement("video");
+        video.preload = "metadata";
+        video.onloadedmetadata = () => {
+          URL.revokeObjectURL(url);
+          resolve(isFinite(video.duration) && video.duration > 0 ? video.duration : 1);
+        };
+        video.onerror = () => {
+          URL.revokeObjectURL(url);
+          resolve(1);
+        };
+        video.src = url;
+      });
+    }
+    $$renderer2.push(`<div class="space-y-2">`);
+    if (isRecording) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="rounded border-2 border-destructive bg-destructive/10 p-3"><div class="relative mb-2 overflow-hidden rounded bg-black"><video autoplay="" muted="" playsinline="" class="h-auto w-full" style="max-height: 180px; aspect-ratio: 16/9;"></video> <div class="absolute top-2 left-2 flex items-center gap-2 rounded bg-black/50 px-2 py-1"><div class="h-2 w-2 animate-pulse rounded-full bg-destructive"></div> <span class="text-xs font-medium text-white">Recording ${escape_html("Camera")}</span></div> <div class="absolute top-2 right-2 rounded bg-black/50 px-2 py-1"><span class="font-mono text-xs text-white tabular-nums">${escape_html(formatDuration(Math.floor(displayDuration)))}</span></div> `);
+      {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<button type="button" class="absolute right-2 bottom-2 rounded-full bg-black/50 p-2 text-white hover:bg-black/70" title="Switch camera">`);
+        Rotate_cw($$renderer2, { class: "size-4" });
+        $$renderer2.push(`<!----></button>`);
+      }
+      $$renderer2.push(`<!--]--></div> `);
+      Button($$renderer2, {
+        variant: "destructive",
+        size: "sm",
+        class: "w-full",
+        onclick: stopRecording,
+        children: ($$renderer3) => {
+          Square($$renderer3, { class: "mr-1 size-3" });
+          $$renderer3.push(`<!----> Stop Recording`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----> `);
+      if (sizeWarning()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<p class="mt-1 text-center text-xs text-destructive">Approaching size limit — recording will stop automatically</p>`);
+      } else if (displayDuration >= MAX_DURATION - 10) {
+        $$renderer2.push("<!--[1-->");
+        $$renderer2.push(`<p class="mt-1 text-center text-xs text-destructive">${escape_html(Math.ceil(MAX_DURATION - displayDuration))}s remaining</p>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div class="flex gap-1 rounded border bg-muted/30 p-1"><button type="button"${attr_class(`flex flex-1 items-center justify-center gap-1 rounded px-2 py-1.5 text-xs transition-colors ${stringify("bg-background shadow-sm")}`)}>`);
+      Camera($$renderer2, { class: "size-3" });
+      $$renderer2.push(`<!----> Camera</button> <button type="button"${attr_class(`flex flex-1 items-center justify-center gap-1 rounded px-2 py-1.5 text-xs transition-colors ${stringify("hover:bg-background/50")}`)}>`);
+      Monitor($$renderer2, { class: "size-3" });
+      $$renderer2.push(`<!----> Screen</button></div> `);
+      Button($$renderer2, {
+        variant: "default",
+        size: "sm",
+        class: "w-full text-xs",
+        onclick: handleStartRecording,
+        children: ($$renderer3) => {
+          {
+            $$renderer3.push("<!--[-1-->");
+            Video($$renderer3, { class: "mr-1 size-3" });
+            $$renderer3.push(`<!----> Record Camera`);
+          }
+          $$renderer3.push(`<!--]-->`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (recordingError) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p class="text-xs text-destructive">${escape_html(recordingError)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+function CameraCapture($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { onCaptureComplete, projectId } = $$props;
+    const editorState = derived(getEditorState);
+    let cameraState = "idle";
+    let captureError = "";
+    let mediaStream = null;
+    let facingMode = "user";
+    let capturedImageUrl = "";
+    async function startPreview() {
+      try {
+        captureError = "";
+        mediaStream = await navigator.mediaDevices.getUserMedia({
+          video: { width: { ideal: 1920 }, height: { ideal: 1080 }, facingMode },
+          audio: false
+        });
+        cameraState = "preview";
+      } catch (err) {
+        const error = handleMediaError(err);
+        captureError = error.message;
+        console.error("Camera error:", err);
+        cameraState = "idle";
+      }
+    }
+    function capturePhoto() {
+      return;
+    }
+    async function handleStartPreview() {
+      await uiStore.requireLogin("save your project", () => {
+        uiStore.requireCreateProject(editorState(), startPreview);
+      });
+    }
+    async function usePhoto() {
+      return;
+    }
+    function retakePhoto() {
+      capturedImageUrl = "";
+      cameraState = "idle";
+      startPreview();
+    }
+    function cancelPreview() {
+      stopMediaStream(mediaStream);
+      mediaStream = null;
+      cameraState = "idle";
+    }
+    $$renderer2.push(`<div class="space-y-2">`);
+    if (
+      // Cleanup on unmount
+      cameraState === "idle"
+    ) {
+      $$renderer2.push("<!--[0-->");
+      Button($$renderer2, {
+        variant: "default",
+        size: "sm",
+        class: "w-full text-xs",
+        onclick: handleStartPreview,
+        children: ($$renderer3) => {
+          Camera($$renderer3, { class: "mr-1 size-3" });
+          $$renderer3.push(`<!----> Take Photo`);
+        },
+        $$slots: { default: true }
+      });
+    } else if (cameraState === "preview") {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<div class="rounded border-2 border-primary bg-black p-2"><div class="relative mb-2 overflow-hidden rounded"><video autoplay="" playsinline="" muted="" class="h-auto w-full" style="max-height: 240px;"></video> <button type="button" class="absolute top-2 right-2 rounded-full bg-black/50 p-2 text-white hover:bg-black/70" title="Switch camera">`);
+      Rotate_cw($$renderer2, { class: "size-4" });
+      $$renderer2.push(`<!----></button></div> <div class="flex gap-2">`);
+      Button($$renderer2, {
+        variant: "outline",
+        size: "sm",
+        class: "flex-1 text-xs",
+        onclick: cancelPreview,
+        children: ($$renderer3) => {
+          X($$renderer3, { class: "mr-1 size-3" });
+          $$renderer3.push(`<!----> Cancel`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----> `);
+      Button($$renderer2, {
+        variant: "default",
+        size: "sm",
+        class: "flex-1 text-xs",
+        onclick: capturePhoto,
+        children: ($$renderer3) => {
+          Camera($$renderer3, { class: "mr-1 size-3" });
+          $$renderer3.push(`<!----> Capture`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----></div></div>`);
+    } else if (cameraState === "review") {
+      $$renderer2.push("<!--[2-->");
+      $$renderer2.push(`<div class="rounded border-2 border-primary bg-black p-2"><div class="relative mb-2 overflow-hidden rounded"><img${attr("src", capturedImageUrl)} alt="Captured" class="h-auto w-full" style="max-height: 240px;"/></div> <div class="flex gap-2">`);
+      Button($$renderer2, {
+        variant: "outline",
+        size: "sm",
+        class: "flex-1 text-xs",
+        onclick: retakePhoto,
+        children: ($$renderer3) => {
+          Rotate_cw($$renderer3, { class: "mr-1 size-3" });
+          $$renderer3.push(`<!----> Retake`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----> `);
+      Button($$renderer2, {
+        variant: "default",
+        size: "sm",
+        class: "flex-1 text-xs",
+        onclick: usePhoto,
+        children: ($$renderer3) => {
+          Check($$renderer3, { class: "mr-1 size-3" });
+          $$renderer3.push(`<!----> Use Photo`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----></div></div>`);
+    } else if (cameraState === "uploading") {
+      $$renderer2.push("<!--[3-->");
+      $$renderer2.push(`<div class="rounded border bg-muted/30 p-3 text-center">`);
+      Loader_circle($$renderer2, { class: "mx-auto mb-2 size-6 animate-spin text-primary" });
+      $$renderer2.push(`<!----> <span class="text-sm">Uploading photo...</span></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <canvas class="hidden"></canvas> `);
+    if (captureError) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p class="text-xs text-destructive">${escape_html(captureError)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+function Scroll_area_scrollbar($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      orientation = "vertical",
+      children,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (Scroll_area_scrollbar$1) {
+        $$renderer3.push("<!--[-->");
+        Scroll_area_scrollbar$1($$renderer3, spread_props([
+          {
+            "data-slot": "scroll-area-scrollbar",
+            orientation,
+            class: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className)
+          },
+          restProps,
+          {
+            get ref() {
+              return ref;
+            },
+            set ref($$value) {
+              ref = $$value;
+              $$settled = false;
+            },
+            children: ($$renderer4) => {
+              children?.($$renderer4);
+              $$renderer4.push(`<!----> `);
+              if (Scroll_area_thumb) {
+                $$renderer4.push("<!--[-->");
+                Scroll_area_thumb($$renderer4, {
+                  "data-slot": "scroll-area-thumb",
+                  class: "relative flex-1 rounded-full bg-border"
+                });
+                $$renderer4.push("<!--]-->");
+              } else {
+                $$renderer4.push("<!--[!-->");
+                $$renderer4.push("<!--]-->");
+              }
+            },
+            $$slots: { default: true }
+          }
+        ]));
+        $$renderer3.push("<!--]-->");
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push("<!--]-->");
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Scroll_area($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      orientation = "vertical",
+      scrollbarXClasses = "",
+      scrollbarYClasses = "",
+      viewportClass = "",
+      children,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (Scroll_area$1) {
+        $$renderer3.push("<!--[-->");
+        Scroll_area$1($$renderer3, spread_props([
+          {
+            "data-slot": "scroll-area",
+            class: cn("relative min-h-0", className)
+          },
+          restProps,
+          {
+            children: ($$renderer4) => {
+              if (Scroll_area_viewport) {
+                $$renderer4.push("<!--[-->");
+                Scroll_area_viewport($$renderer4, {
+                  "data-slot": "scroll-area-viewport",
+                  class: cn("size-full rounded-[inherit] ring-ring/10 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20 dark:outline-ring/40", viewportClass),
+                  get ref() {
+                    return ref;
+                  },
+                  set ref($$value) {
+                    ref = $$value;
+                    $$settled = false;
+                  },
+                  children: ($$renderer5) => {
+                    children?.($$renderer5);
+                    $$renderer5.push(`<!---->`);
+                  },
+                  $$slots: { default: true }
+                });
+                $$renderer4.push("<!--]-->");
+              } else {
+                $$renderer4.push("<!--[!-->");
+                $$renderer4.push("<!--]-->");
+              }
+              $$renderer4.push(` `);
+              if (orientation === "vertical" || orientation === "both") {
+                $$renderer4.push("<!--[0-->");
+                Scroll_area_scrollbar($$renderer4, { orientation: "vertical", class: scrollbarYClasses });
+              } else {
+                $$renderer4.push("<!--[-1-->");
+              }
+              $$renderer4.push(`<!--]--> `);
+              if (orientation === "horizontal" || orientation === "both") {
+                $$renderer4.push("<!--[0-->");
+                Scroll_area_scrollbar($$renderer4, { orientation: "horizontal", class: scrollbarXClasses });
+              } else {
+                $$renderer4.push("<!--[-1-->");
+              }
+              $$renderer4.push(`<!--]--> `);
+              if (Scroll_area_corner) {
+                $$renderer4.push("<!--[-->");
+                Scroll_area_corner($$renderer4, {});
+                $$renderer4.push("<!--]-->");
+              } else {
+                $$renderer4.push("<!--[!-->");
+                $$renderer4.push("<!--]-->");
+              }
+            },
+            $$slots: { default: true }
+          }
+        ]));
+        $$renderer3.push("<!--]-->");
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push("<!--]-->");
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Tooltip($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { open = false, $$slots, $$events, ...restProps } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (Tooltip$1) {
+        $$renderer3.push("<!--[-->");
+        Tooltip$1($$renderer3, spread_props([
+          restProps,
+          {
+            get open() {
+              return open;
+            },
+            set open($$value) {
+              open = $$value;
+              $$settled = false;
+            }
+          }
+        ]));
+        $$renderer3.push("<!--]-->");
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push("<!--]-->");
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { open });
+  });
+}
+function Tooltip_trigger($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { ref = null, $$slots, $$events, ...restProps } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (Tooltip_trigger$1) {
+        $$renderer3.push("<!--[-->");
+        Tooltip_trigger$1($$renderer3, spread_props([
+          { "data-slot": "tooltip-trigger" },
+          restProps,
+          {
+            get ref() {
+              return ref;
+            },
+            set ref($$value) {
+              ref = $$value;
+              $$settled = false;
+            }
+          }
+        ]));
+        $$renderer3.push("<!--]-->");
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push("<!--]-->");
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Tooltip_portal($$renderer, $$props) {
+  let { $$slots, $$events, ...restProps } = $$props;
+  if (Portal$1) {
+    $$renderer.push("<!--[-->");
+    Portal$1($$renderer, spread_props([restProps]));
+    $$renderer.push("<!--]-->");
+  } else {
+    $$renderer.push("<!--[!-->");
+    $$renderer.push("<!--]-->");
+  }
+}
+function Tooltip_content($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      sideOffset = 0,
+      side = "top",
+      children,
+      arrowClasses,
+      portalProps,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      Tooltip_portal($$renderer3, spread_props([
+        portalProps,
+        {
+          children: ($$renderer4) => {
+            if (Tooltip_content$1) {
+              $$renderer4.push("<!--[-->");
+              Tooltip_content$1($$renderer4, spread_props([
+                {
+                  "data-slot": "tooltip-content",
+                  sideOffset,
+                  side,
+                  class: cn("z-50 w-fit origin-(--bits-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className)
+                },
+                restProps,
+                {
+                  get ref() {
+                    return ref;
+                  },
+                  set ref($$value) {
+                    ref = $$value;
+                    $$settled = false;
+                  },
+                  children: ($$renderer5) => {
+                    children?.($$renderer5);
+                    $$renderer5.push(`<!----> `);
+                    {
+                      let child = function($$renderer6, { props }) {
+                        $$renderer6.push(`<div${attributes({
+                          class: clsx(cn("z-50 size-2.5 rotate-45 rounded-[2px] bg-foreground", "data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]", "data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]", "data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2", "data-[side=left]:-translate-y-[calc(50%_-_3px)]", arrowClasses)),
+                          ...props
+                        })}></div>`);
+                      };
+                      if (Tooltip_arrow) {
+                        $$renderer5.push("<!--[-->");
+                        Tooltip_arrow($$renderer5, { child, $$slots: { child: true } });
+                        $$renderer5.push("<!--]-->");
+                      } else {
+                        $$renderer5.push("<!--[!-->");
+                        $$renderer5.push("<!--]-->");
+                      }
+                    }
+                  },
+                  $$slots: { default: true }
+                }
+              ]));
+              $$renderer4.push("<!--]-->");
+            } else {
+              $$renderer4.push("<!--[!-->");
+              $$renderer4.push("<!--]-->");
+            }
+          },
+          $$slots: { default: true }
+        }
+      ]));
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function LummiImagePicker($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let searchQuery = "";
+    let isSearching = false;
+    let searchError = "";
+    let images = [];
+    let currentPage = 1;
+    let totalCount = 0;
+    let imageType = void 0;
+    let orientation = void 0;
+    const hasMore = derived(() => images.length < totalCount);
+    async function performSearch(page = 1) {
+      if (!searchQuery.trim()) {
+        searchError = "Please enter a search term";
+        return;
+      }
+      isSearching = true;
+      searchError = "";
+      try {
+        const params = { query: searchQuery, page, perPage: 20 };
+        if (imageType) params.imageType = imageType;
+        if (orientation) params.orientation = orientation;
+        const result = await searchLummiImages(params);
+        if (page === 1) {
+          images = result.images;
+        } else {
+          images = [...images, ...result.images];
+        }
+        totalCount = result.totalCount;
+        currentPage = page;
+      } catch (err) {
+        searchError = err instanceof Error ? err.message : "Search failed";
+      } finally {
+        isSearching = false;
+      }
+    }
+    function handleSearch() {
+      performSearch(1);
+    }
+    function loadMore() {
+      if (!isSearching && hasMore()) {
+        performSearch(currentPage + 1);
+      }
+    }
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div class="flex flex-col gap-3"><div class="flex gap-2"><div class="flex-1">`);
+      Input($$renderer3, {
+        placeholder: "Search Lummi images...",
+        onkeydown: (e) => e.key === "Enter" && handleSearch(),
+        get value() {
+          return searchQuery;
+        },
+        set value($$value) {
+          searchQuery = $$value;
+          $$settled = false;
+        }
+      });
+      $$renderer3.push(`<!----></div> `);
+      Button($$renderer3, {
+        variant: "default",
+        size: "sm",
+        onclick: handleSearch,
+        disabled: isSearching,
+        loading: isSearching,
+        icon: Search,
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->Search`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----></div> <div class="flex gap-2">`);
+      Select_1($$renderer3, {
+        placeholder: "Type",
+        options: [
+          { value: "", label: "All types" },
+          { value: "photo", label: "Photo" },
+          { value: "illustration", label: "Illustration" },
+          { value: "3d", label: "3D" }
+        ],
+        trigger: { class: "w-[120px] text-xs" },
+        get value() {
+          return imageType;
+        },
+        set value($$value) {
+          imageType = $$value;
+          $$settled = false;
+        }
+      });
+      $$renderer3.push(`<!----> `);
+      Select_1($$renderer3, {
+        placeholder: "Orientation",
+        options: [
+          { value: "", label: "All" },
+          { value: "horizontal", label: "Horizontal" },
+          { value: "vertical", label: "Vertical" },
+          { value: "square", label: "Square" }
+        ],
+        trigger: { class: "w-[120px] text-xs" },
+        get value() {
+          return orientation;
+        },
+        set value($$value) {
+          orientation = $$value;
+          $$settled = false;
+        }
+      });
+      $$renderer3.push(`<!----></div> <div class="flex items-start gap-2 rounded border border-blue-500/20 bg-blue-500/10 px-3 py-2">`);
+      Info($$renderer3, { class: "mt-0.5 size-3 shrink-0 text-blue-400" });
+      $$renderer3.push(`<!----> <p class="text-[10px] leading-tight text-blue-200">Images from Lummi require attribution. The author credit will be displayed automatically on
+      your layer.</p></div> `);
+      if (searchError) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<p class="text-xs text-destructive">${escape_html(searchError)}</p>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      if (images.length > 0) {
+        $$renderer3.push("<!--[0-->");
+        Scroll_area($$renderer3, {
+          viewportClass: "max-h-[400px]",
+          children: ($$renderer4) => {
+            $$renderer4.push(`<div class="grid grid-cols-2 gap-2 pr-2"><!--[-->`);
+            const each_array = ensure_array_like(images);
+            for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+              let image = each_array[$$index];
+              $$renderer4.push(`<button class="group relative overflow-hidden rounded border bg-black transition-all hover:border-primary hover:ring-1 hover:ring-primary"><img${attr("src", image.url)} alt="" class="aspect-square w-full object-cover transition-transform group-hover:scale-105"/> <div class="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/80 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100"><p class="truncate text-[10px] text-white">by ${escape_html(image.author.name ?? image.author.username)}</p> <div class="mt-1 flex items-center gap-1 text-[9px] text-gray-300"><span>${escape_html(image.width)}×${escape_html(image.height)}</span> <span>•</span> <span class="capitalize">${escape_html(image.imageType)}</span> `);
+              if (image.pro) {
+                $$renderer4.push("<!--[0-->");
+                $$renderer4.push(`<span>•</span> <span class="text-yellow-400">PRO</span>`);
+              } else {
+                $$renderer4.push("<!--[-1-->");
+              }
+              $$renderer4.push(`<!--]--></div></div> `);
+              if (Tooltip) {
+                $$renderer4.push("<!--[-->");
+                Tooltip($$renderer4, {
+                  children: ($$renderer5) => {
+                    if (Tooltip_trigger) {
+                      $$renderer5.push("<!--[-->");
+                      Tooltip_trigger($$renderer5, {
+                        class: "absolute top-1 right-1",
+                        children: ($$renderer6) => {
+                          $$renderer6.push(`<div class="rounded bg-black/60 p-1 opacity-0 transition-opacity group-hover:opacity-100">`);
+                          External_link($$renderer6, { class: "size-3 text-white" });
+                          $$renderer6.push(`<!----></div>`);
+                        },
+                        $$slots: { default: true }
+                      });
+                      $$renderer5.push("<!--]-->");
+                    } else {
+                      $$renderer5.push("<!--[!-->");
+                      $$renderer5.push("<!--]-->");
+                    }
+                    $$renderer5.push(` `);
+                    if (Tooltip_content) {
+                      $$renderer5.push("<!--[-->");
+                      Tooltip_content($$renderer5, {
+                        children: ($$renderer6) => {
+                          $$renderer6.push(`<p class="text-xs">Click to use this image</p>`);
+                        },
+                        $$slots: { default: true }
+                      });
+                      $$renderer5.push("<!--]-->");
+                    } else {
+                      $$renderer5.push("<!--[!-->");
+                      $$renderer5.push("<!--]-->");
+                    }
+                  },
+                  $$slots: { default: true }
+                });
+                $$renderer4.push("<!--]-->");
+              } else {
+                $$renderer4.push("<!--[!-->");
+                $$renderer4.push("<!--]-->");
+              }
+              $$renderer4.push(`</button>`);
+            }
+            $$renderer4.push(`<!--]--></div> `);
+            if (hasMore()) {
+              $$renderer4.push("<!--[0-->");
+              $$renderer4.push(`<div class="mt-3 flex justify-center">`);
+              Button($$renderer4, {
+                variant: "outline",
+                size: "sm",
+                onclick: loadMore,
+                disabled: isSearching,
+                loading: isSearching,
+                children: ($$renderer5) => {
+                  $$renderer5.push(`<!---->Load more`);
+                },
+                $$slots: { default: true }
+              });
+              $$renderer4.push(`<!----></div>`);
+            } else {
+              $$renderer4.push("<!--[-1-->");
+            }
+            $$renderer4.push(`<!--]-->`);
+          },
+          $$slots: { default: true }
+        });
+      } else if (!isSearching && searchQuery) {
+        $$renderer3.push("<!--[1-->");
+        $$renderer3.push(`<div class="py-8 text-center text-sm text-muted-foreground">No images found. Try a different search term.</div>`);
+      } else if (!searchQuery) {
+        $$renderer3.push("<!--[2-->");
+        $$renderer3.push(`<div class="py-8 text-center text-sm text-muted-foreground">Search for free stock images from Lummi</div>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      if (isSearching && images.length === 0) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<div class="flex items-center justify-center py-8">`);
+        Loader_circle($$renderer3, { class: "size-6 animate-spin text-muted-foreground" });
+        $$renderer3.push(`<!----></div>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+  });
+}
+function AssetCard($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { asset, selected = false, actions } = $$props;
+    function getMediaIcon(mediaType) {
+      switch (mediaType) {
+        case "image":
+          return Image;
+        case "video":
+          return Video;
+        case "audio":
+          return Music;
+        default:
+          return File;
+      }
+    }
+    const Icon2 = derived(() => getMediaIcon(asset.mediaType));
+    const createdAt = derived(() => new Date(asset.createdAt).toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" }));
+    $$renderer2.push(`<button type="button"${attr_class(`group flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/50 ${stringify(selected ? "bg-primary/10 ring-1 ring-primary/30" : "")}`)}><div class="relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded bg-muted" role="img"${attr("aria-label", asset.originalName)}>`);
+    if (asset.mediaType === "image") {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<img${attr("src", asset.url)}${attr("alt", asset.originalName)} class="size-full object-cover" loading="lazy" onerror="this.__e=event"/>`);
+    } else if (asset.mediaType === "video") {
+      $$renderer2.push("<!--[2-->");
+      $$renderer2.push(`<video${attr("data-src", asset.url)} class="size-full object-cover" loop="" preload="metadata"></video>`);
+    } else if (asset.mediaType === "audio") {
+      $$renderer2.push("<!--[3-->");
+      $$renderer2.push(`<audio${attr("data-src", asset.url)} preload="metadata" loop=""></audio> `);
+      if (Icon2()) {
+        $$renderer2.push("<!--[-->");
+        Icon2()($$renderer2, { class: "size-4 text-muted-foreground" });
+        $$renderer2.push("<!--]-->");
+      } else {
+        $$renderer2.push("<!--[!-->");
+        $$renderer2.push("<!--]-->");
+      }
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      if (Icon2()) {
+        $$renderer2.push("<!--[-->");
+        Icon2()($$renderer2, { class: "size-4 text-muted-foreground" });
+        $$renderer2.push("<!--]-->");
+      } else {
+        $$renderer2.push("<!--[!-->");
+        $$renderer2.push("<!--]-->");
+      }
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (asset.duration) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="absolute right-0 bottom-0 left-0 bg-black/60 px-0.5 py-px text-center text-[8px] leading-tight text-white">${escape_html(formatDuration$1(asset.duration))}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> <div class="min-w-0 flex-1"><p class="truncate text-xs font-medium">${escape_html(asset.originalName)}</p> <div class="mt-0.5 flex flex-wrap items-center gap-x-1.5 gap-y-0 text-[10px] text-muted-foreground"><span>${escape_html(formatFileSize(asset.size))}</span> <span class="text-muted-foreground/40">·</span> <span class="capitalize">${escape_html(asset.mediaType)}</span> <span class="text-muted-foreground/40">·</span> <span>${escape_html(createdAt())}</span></div></div> `);
+    if (actions) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100">`);
+      actions($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></button>`);
+  });
+}
+function AssetPicker($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { mediaType, selectedUrl } = $$props;
+    const PAGE_SIZE = 20;
+    let searchQuery = "";
+    let debouncedSearch = new Debounced(() => searchQuery, 300);
+    let currentPage = 1;
+    watch(() => [debouncedSearch.current], () => {
+      currentPage = 1;
+    });
+    const assets = derived(() => getUserAssets({
+      mediaType,
+      search: debouncedSearch.current || void 0,
+      page: currentPage,
+      pageSize: PAGE_SIZE
+    }));
+    const assetList = derived(() => assets().current?.assets ?? []);
+    const totalPages = derived(() => Math.ceil((assets().current?.total ?? 0) / PAGE_SIZE));
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div class="flex flex-col"><div class="border-b px-3 py-2"><div class="relative">`);
+      Search($$renderer3, {
+        class: "absolute top-1/2 left-2 size-3 -translate-y-1/2 text-muted-foreground"
+      });
+      $$renderer3.push(`<!----> `);
+      Input($$renderer3, {
+        type: "text",
+        placeholder: "Search assets...",
+        class: "h-7 pl-6 text-xs",
+        get value() {
+          return searchQuery;
+        },
+        set value($$value) {
+          searchQuery = $$value;
+          $$settled = false;
+        }
+      });
+      $$renderer3.push(`<!----></div></div> `);
+      Scroll_area($$renderer3, {
+        viewportClass: "max-h-[calc(50vh)]",
+        children: ($$renderer4) => {
+          if (assets().loading && !assets().current) {
+            $$renderer4.push("<!--[0-->");
+            $$renderer4.push(`<div class="flex items-center justify-center py-6">`);
+            Loader_circle($$renderer4, { class: "size-4 animate-spin text-muted-foreground" });
+            $$renderer4.push(`<!----></div>`);
+          } else if (assetList().length === 0) {
+            $$renderer4.push("<!--[1-->");
+            $$renderer4.push(`<div class="px-3 py-6 text-center text-xs text-muted-foreground">`);
+            if (debouncedSearch.current) {
+              $$renderer4.push("<!--[0-->");
+              $$renderer4.push(`No assets match "${escape_html(debouncedSearch.current)}".`);
+            } else {
+              $$renderer4.push("<!--[-1-->");
+              $$renderer4.push(`${escape_html(mediaType ? `No ${mediaType} assets found` : "No assets found")}`);
+            }
+            $$renderer4.push(`<!--]--></div>`);
+          } else {
+            $$renderer4.push("<!--[-1-->");
+            $$renderer4.push(`<div class="divide-y"><!--[-->`);
+            const each_array = ensure_array_like(assetList());
+            for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+              let asset = each_array[$$index];
+              AssetCard($$renderer4, {
+                asset,
+                selected: asset.url === selectedUrl
+              });
+            }
+            $$renderer4.push(`<!--]--></div>`);
+          }
+          $$renderer4.push(`<!--]-->`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----> `);
+      if (totalPages() > 1) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<div class="flex items-center justify-between border-t px-3 py-2 text-xs text-muted-foreground">`);
+        Button($$renderer3, {
+          variant: "ghost",
+          size: "icon-xs",
+          disabled: currentPage === 1,
+          onclick: () => currentPage--,
+          icon: Chevron_left
+        });
+        $$renderer3.push(`<!----> <span>${escape_html(currentPage)} / ${escape_html(totalPages())}</span> `);
+        Button($$renderer3, {
+          variant: "ghost",
+          size: "icon-xs",
+          disabled: currentPage >= totalPages(),
+          onclick: () => currentPage++,
+          icon: Chevron_right
+        });
+        $$renderer3.push(`<!----></div>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+  });
+}
+function FileUpload($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      value = "",
+      currentFileName = "",
+      mediaType,
+      onUpload,
+      projectId
+    } = $$props;
+    let uploadError = "";
+    let displayNameOverride = "";
+    let displayName = derived(() => displayNameOverride || currentFileName || "");
+    let isUploading = false;
+    let assetPickerOpen = false;
+    let lummiPickerOpen = false;
+    let recordOpen = false;
+    let pendingRecording = null;
+    async function handleRecordingComplete(result) {
+      const localUrl = URL.createObjectURL(result.blob);
+      value = localUrl;
+      displayNameOverride = result.fileName;
+      recordOpen = false;
+      uploadError = "";
+      isUploading = true;
+      pendingRecording = result;
+      try {
+        const uploadResult = await uploadMediaBlob(result.blob, result.fileName, result.mediaType, projectId, result.duration);
+        pendingRecording = null;
+        onUpload({
+          url: uploadResult.url,
+          key: uploadResult.key,
+          fileName: uploadResult.fileName,
+          duration: result.duration,
+          ...result.mediaType === "video" && mediaType === "media" ? { detectedType: "video" } : {}
+        });
+        URL.revokeObjectURL(localUrl);
+        displayNameOverride = "";
+      } catch (err) {
+        uploadError = err instanceof Error ? err.message : "Upload failed";
+      } finally {
+        isUploading = false;
+      }
+    }
+    const acceptPatterns = {
+      image: "image/jpeg,image/png,image/gif,image/webp,image/svg+xml",
+      video: "video/mp4",
+      audio: "audio/mp3",
+      media: "image/jpeg,image/png,image/gif,image/webp,image/svg+xml,video/mp4"
+    };
+    let maxSizeBytes = derived(() => MAX_FILE_SIZES[mediaType === "media" ? "video" : mediaType]);
+    let maxSizeLabel = derived(() => formatStorage(maxSizeBytes()));
+    const mediaTypeLabel = {
+      image: "image",
+      video: "video",
+      audio: "audio",
+      media: "image or video"
+    };
+    const mediaTypeFormats = {
+      image: "JPG, PNG, GIF, WEBP, SVG",
+      video: "MP4",
+      audio: "MP3",
+      media: "JPG, PNG, MP4"
+    };
+    const showCapture = derived(() => mediaType === "image" || mediaType === "video" || mediaType === "audio" || mediaType === "media");
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div class="flex flex-col gap-2"><div${attr_class(`group relative flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-4 py-5 transition-colors ${stringify(isUploading && pendingRecording ? "cursor-default" : "cursor-pointer")} ${stringify("border-border hover:border-primary/50 hover:bg-muted/40")}`)} role="button"${attr("tabindex", isUploading && pendingRecording ? -1 : 0)}>`);
+      if (isUploading && !value) {
+        $$renderer3.push("<!--[0-->");
+        Loader_circle($$renderer3, { class: "h-8 w-8 animate-spin text-primary" });
+        $$renderer3.push(`<!----> <p class="text-xs font-medium">Uploading...</p>`);
+      } else if (value && (mediaType === "image" || mediaType === "video" || mediaType === "media" || mediaType === "audio")) {
+        $$renderer3.push("<!--[1-->");
+        $$renderer3.push(`<div class="relative w-full overflow-hidden rounded">`);
+        if (mediaType === "audio") {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<audio${attr("src", value)} controls="" class="w-full" preload="metadata"></audio>`);
+        } else if (mediaType === "image" || mediaType === "media" && !value.endsWith(".mp4")) {
+          $$renderer3.push("<!--[1-->");
+          $$renderer3.push(`<img${attr("src", value)}${attr("alt", displayName())} class="h-auto w-full rounded" style="max-height: 140px; object-fit: contain;"/>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          $$renderer3.push(`<video${attr("src", value)} class="h-auto w-full rounded" style="max-height: 140px; object-fit: contain;" controls="" preload="metadata"></video>`);
+        }
+        $$renderer3.push(`<!--]--> `);
+        if (isUploading && pendingRecording) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<div${attr_class(`absolute inset-0 z-10 flex items-center justify-center rounded ${stringify(mediaType === "audio" ? "bg-background/40" : "bg-black/40")}`)}>`);
+          Loader_circle($$renderer3, { class: "h-6 w-6 animate-spin text-primary" });
+          $$renderer3.push(`<!----></div>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]--></div> <p class="text-[10px] text-muted-foreground">${escape_html(isUploading && pendingRecording ? "Uploading... " : "Click or drop to replace ")}
+        · ${escape_html(displayName())}</p> `);
+        if (pendingRecording && uploadError) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<button type="button" class="mt-1 flex items-center gap-1 rounded border border-destructive/40 bg-destructive/10 px-2 py-1 text-[11px] text-destructive hover:bg-destructive/20">`);
+          Refresh_cw($$renderer3, { class: "size-3" });
+          $$renderer3.push(`<!----> Retry upload</button>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]-->`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+        $$renderer3.push(`<div class="flex h-10 w-10 items-center justify-center rounded-full bg-muted transition-colors group-hover:bg-muted/80">`);
+        if (mediaType === "image") {
+          $$renderer3.push("<!--[0-->");
+          Image($$renderer3, { class: "h-5 w-5 text-muted-foreground" });
+        } else if (mediaType === "audio") {
+          $$renderer3.push("<!--[1-->");
+          Mic($$renderer3, { class: "h-5 w-5 text-muted-foreground" });
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          Video($$renderer3, { class: "h-5 w-5 text-muted-foreground" });
+        }
+        $$renderer3.push(`<!--]--></div> <div class="text-center"><p class="text-xs font-medium">${escape_html(`Drop ${mediaTypeLabel[mediaType]} here`)}</p> <p class="mt-0.5 text-[10px] text-muted-foreground">${escape_html(mediaTypeFormats[mediaType])} · up to ${escape_html(maxSizeLabel())}</p></div> <span class="rounded border border-border bg-background px-2.5 py-1 text-[11px] text-muted-foreground transition-colors group-hover:border-primary/40 group-hover:text-foreground">Browse file</span>`);
+      }
+      $$renderer3.push(`<!--]--></div> <div class="flex gap-1.5">`);
+      if (Popover) {
+        $$renderer3.push("<!--[-->");
+        Popover($$renderer3, {
+          get open() {
+            return assetPickerOpen;
+          },
+          set open($$value) {
+            assetPickerOpen = $$value;
+            $$settled = false;
+          },
+          children: ($$renderer4) => {
+            {
+              let child = function($$renderer5, { props }) {
+                Button($$renderer5, spread_props([
+                  props,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    icon: Folder_open,
+                    class: "flex-1 justify-start text-xs",
+                    title: "Pick from project assets",
+                    children: ($$renderer6) => {
+                      $$renderer6.push(`<!---->Assets`);
+                    },
+                    $$slots: { default: true }
+                  }
+                ]));
+              };
+              if (Popover_trigger) {
+                $$renderer4.push("<!--[-->");
+                Popover_trigger($$renderer4, { child, $$slots: { child: true } });
+                $$renderer4.push("<!--]-->");
+              } else {
+                $$renderer4.push("<!--[!-->");
+                $$renderer4.push("<!--]-->");
+              }
+            }
+            $$renderer4.push(` `);
+            if (Popover_content) {
+              $$renderer4.push("<!--[-->");
+              Popover_content($$renderer4, {
+                class: "w-72 p-0",
+                align: "start",
+                children: ($$renderer5) => {
+                  AssetPicker($$renderer5, {
+                    mediaType: mediaType === "media" ? void 0 : mediaType,
+                    selectedUrl: value
+                  });
+                },
+                $$slots: { default: true }
+              });
+              $$renderer4.push("<!--]-->");
+            } else {
+              $$renderer4.push("<!--[!-->");
+              $$renderer4.push("<!--]-->");
+            }
+          },
+          $$slots: { default: true }
+        });
+        $$renderer3.push("<!--]-->");
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push("<!--]-->");
+      }
+      $$renderer3.push(` `);
+      if (mediaType === "image" || mediaType === "media") {
+        $$renderer3.push("<!--[0-->");
+        if (Popover) {
+          $$renderer3.push("<!--[-->");
+          Popover($$renderer3, {
+            get open() {
+              return lummiPickerOpen;
+            },
+            set open($$value) {
+              lummiPickerOpen = $$value;
+              $$settled = false;
+            },
+            children: ($$renderer4) => {
+              {
+                let child = function($$renderer5, { props }) {
+                  Button($$renderer5, spread_props([
+                    props,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      icon: Image,
+                      class: "flex-1 justify-start text-xs",
+                      title: "Browse Lummi stock images",
+                      children: ($$renderer6) => {
+                        $$renderer6.push(`<!---->Lummi`);
+                      },
+                      $$slots: { default: true }
+                    }
+                  ]));
+                };
+                if (Popover_trigger) {
+                  $$renderer4.push("<!--[-->");
+                  Popover_trigger($$renderer4, { child, $$slots: { child: true } });
+                  $$renderer4.push("<!--]-->");
+                } else {
+                  $$renderer4.push("<!--[!-->");
+                  $$renderer4.push("<!--]-->");
+                }
+              }
+              $$renderer4.push(` `);
+              if (Popover_content) {
+                $$renderer4.push("<!--[-->");
+                Popover_content($$renderer4, {
+                  class: "w-[400px] p-4",
+                  align: "start",
+                  children: ($$renderer5) => {
+                    LummiImagePicker($$renderer5);
+                  },
+                  $$slots: { default: true }
+                });
+                $$renderer4.push("<!--]-->");
+              } else {
+                $$renderer4.push("<!--[!-->");
+                $$renderer4.push("<!--]-->");
+              }
+            },
+            $$slots: { default: true }
+          });
+          $$renderer3.push("<!--]-->");
+        } else {
+          $$renderer3.push("<!--[!-->");
+          $$renderer3.push("<!--]-->");
+        }
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      if (showCapture()) {
+        $$renderer3.push("<!--[0-->");
+        if (Popover) {
+          $$renderer3.push("<!--[-->");
+          Popover($$renderer3, {
+            get open() {
+              return recordOpen;
+            },
+            set open($$value) {
+              recordOpen = $$value;
+              $$settled = false;
+            },
+            children: ($$renderer4) => {
+              {
+                let child = function($$renderer5, { props }) {
+                  Button($$renderer5, spread_props([
+                    props,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      icon: mediaType === "audio" ? Mic : mediaType === "image" ? Camera : Video,
+                      class: "flex-1 justify-start text-xs",
+                      title: mediaType === "audio" ? "Record audio" : mediaType === "image" ? "Capture photo" : "Record video",
+                      children: ($$renderer6) => {
+                        $$renderer6.push(`<!---->${escape_html(mediaType === "audio" ? "Record" : mediaType === "image" ? "Capture" : "Record")}`);
+                      },
+                      $$slots: { default: true }
+                    }
+                  ]));
+                };
+                if (Popover_trigger) {
+                  $$renderer4.push("<!--[-->");
+                  Popover_trigger($$renderer4, { child, $$slots: { child: true } });
+                  $$renderer4.push("<!--]-->");
+                } else {
+                  $$renderer4.push("<!--[!-->");
+                  $$renderer4.push("<!--]-->");
+                }
+              }
+              $$renderer4.push(` `);
+              if (Popover_content) {
+                $$renderer4.push("<!--[-->");
+                Popover_content($$renderer4, {
+                  class: "w-80 p-3",
+                  align: "end",
+                  children: ($$renderer5) => {
+                    $$renderer5.push(`<div class="flex flex-col gap-3">`);
+                    if (mediaType === "audio") {
+                      $$renderer5.push("<!--[0-->");
+                      AudioRecorder($$renderer5, {
+                        maxSizeBytes: maxSizeBytes(),
+                        onRecordingComplete: handleRecordingComplete
+                      });
+                    } else if (mediaType === "video") {
+                      $$renderer5.push("<!--[1-->");
+                      VideoRecorder($$renderer5, {
+                        maxSizeBytes: maxSizeBytes(),
+                        onRecordingComplete: handleRecordingComplete
+                      });
+                    } else if (mediaType === "image") {
+                      $$renderer5.push("<!--[2-->");
+                      CameraCapture($$renderer5, {
+                        projectId,
+                        onCaptureComplete: (result) => {
+                          onUpload(result);
+                          recordOpen = false;
+                        }
+                      });
+                    } else if (mediaType === "media") {
+                      $$renderer5.push("<!--[3-->");
+                      $$renderer5.push(`<p class="text-xs font-medium text-muted-foreground">Record video</p> `);
+                      VideoRecorder($$renderer5, {
+                        maxSizeBytes: maxSizeBytes(),
+                        onRecordingComplete: handleRecordingComplete
+                      });
+                      $$renderer5.push(`<!----> <p class="text-xs font-medium text-muted-foreground">Capture photo</p> `);
+                      CameraCapture($$renderer5, {
+                        projectId,
+                        onCaptureComplete: (result) => {
+                          onUpload({ ...result, detectedType: "image" });
+                          recordOpen = false;
+                        }
+                      });
+                      $$renderer5.push(`<!---->`);
+                    } else {
+                      $$renderer5.push("<!--[-1-->");
+                    }
+                    $$renderer5.push(`<!--]--></div>`);
+                  },
+                  $$slots: { default: true }
+                });
+                $$renderer4.push("<!--]-->");
+              } else {
+                $$renderer4.push("<!--[!-->");
+                $$renderer4.push("<!--]-->");
+              }
+            },
+            $$slots: { default: true }
+          });
+          $$renderer3.push("<!--]-->");
+        } else {
+          $$renderer3.push("<!--[!-->");
+          $$renderer3.push("<!--]-->");
+        }
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div> <input type="file" class="hidden"${attr("accept", acceptPatterns[mediaType])}/> `);
+      if (uploadError) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<p class="text-xs text-destructive">${escape_html(uploadError)}</p>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+  });
+}
+function Media_upload_step($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const {
+      values: _values,
+      ctx: _ctx,
+      onUpdate,
+      onComplete,
+      mediaType = "video"
+    } = $$props;
+    FileUpload($$renderer2, {
+      mediaType,
+      onUpload: (result) => {
+        const stepValues = {
+          src: result.url,
+          fileKey: result.key,
+          fileName: result.fileName,
+          duration: result.duration,
+          detectedType: result.detectedType
+        };
+        onUpdate(stepValues);
+        onComplete(stepValues);
+      }
+    });
+  });
+}
+const configSchema$6 = z.object({
+  background: BackgroundValueSchema.default(defaultBackground).register(fieldRegistry, {
+    label: "Background",
+    widget: "background"
+  })
+});
+const template$8 = {
+  id: "video-beautifier",
+  name: "Video Beautifier",
+  description: "Add a beautiful background and frame to any video in seconds",
+  thumbnail: "/templates/video-beautifier.svg",
+  icon: Sparkles,
+  category: "media",
+  seoTitle: "Free Video Beautifier — Add Background & Frame to Videos",
+  seoDescription: "Instantly add a polished background and rounded frame to your video. Perfect for sharing on social media, presentations, and portfolios. Free tool.",
+  keywords: [
+    "video beautifier",
+    "video background",
+    "video frame",
+    "video mockup",
+    "video presenter",
+    "social media video"
+  ],
+  steps: [
+    {
+      title: "Upload Your Video",
+      description: "Select the video you want to beautify",
+      component: Media_upload_step,
+      componentProps: { mediaType: "video" }
+    },
+    {
+      title: "Style It",
+      description: "Choose a background and corner radius for the frame",
+      schema: configSchema$6
+    }
+  ],
+  apply(values, ctx) {
+    const { src, fileKey, duration: mediaDuration, background } = values;
+    const { width, height } = ctx.project;
+    const ar = height / width;
+    const enterTime = ctx.currentTime;
+    const duration = mediaDuration ?? 5;
+    const exitTime = enterTime + duration;
+    const paddingPct = Math.min(1, ar) * 7;
+    const videoLayer = createLayer("video", {
+      props: {
+        src,
+        fileKey,
+        width: round1(100 - paddingPct * 2),
+        height: round1(toPct(ar) - paddingPct * 2),
+        objectFit: "cover",
+        frame: "arc",
+        frameWidth: 8
+      },
+      projectDimensions: { width, height },
+      layer: { name: "Video", enterTime, exitTime, contentDuration: mediaDuration }
+    });
+    return {
+      projectUpdates: {
+        ...ctx.inProject ? {} : { background, duration: exitTime },
+        ...exitTime > ctx.project.duration ? { duration: exitTime } : {}
+      },
+      layersToAdd: [
+        {
+          layer: videoLayer,
+          presets: [{ id: "fade-in", startTime: enterTime, duration: 0.4 }]
+        }
+      ]
+    };
+  }
+};
+const __vite_glob_0_1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template: template$8
+}, Symbol.toStringTag, { value: "Module" }));
+const stepSchema = z.object({
+  url: z.url().default("/demo/skeleton.html").register(fieldRegistry, { label: "Website URL" }),
+  background: BackgroundValueSchema.default(defaultBackground).register(fieldRegistry, {
+    label: "Background",
+    widget: "background"
+  }),
+  laptopColor: z.string().default("#2d2d2d").register(fieldRegistry, { label: "Laptop color", widget: "color" })
+});
+const template$7 = {
+  id: "laptop-3d-intro",
+  name: "Laptop 3D Intro",
+  description: "Animate any website inside a 3D laptop with a cinematic opening effect",
+  thumbnail: "/templates/laptop-3d-intro.svg",
+  icon: Laptop,
+  category: "composite",
+  seoTitle: "Free 3D Laptop Intro Maker — Animate Any Website",
+  seoDescription: "Drop any URL into a cinematic 3D laptop animation. Perfect for product launches, app showcases, and SaaS demos. Free online tool.",
+  keywords: [
+    "laptop mockup",
+    "3d laptop animation",
+    "website mockup video",
+    "product demo animation",
+    "saas intro video",
+    "app showcase"
+  ],
+  steps: [
+    {
+      title: "Configure Laptop",
+      description: "Enter the URL to display and customize the look",
+      schema: stepSchema
+    }
+  ],
+  apply(values, ctx) {
+    const { url, laptopColor } = values;
+    const { width, height } = ctx.project;
+    const background = values.background;
+    const enterTime = ctx.currentTime;
+    const duration = 7;
+    const exitTime = enterTime + duration;
+    const ar = height / width;
+    const lapZ0 = 448;
+    const lapZ1 = -2e3;
+    const lapZ2 = -840;
+    const lapY0 = round1(ar * 60);
+    const lapY1 = round1(ar * 50);
+    const keyframes = [
+      // t=0: Far away, fully open, flat perspective
+      { time: enterTime, property: "position.y", value: lapY0 },
+      { time: enterTime, property: "position.z", value: lapZ0 },
+      { time: enterTime, property: "props.openAngle", value: 180 },
+      { time: enterTime, property: "rotation.x", value: 0 },
+      { time: enterTime, property: "rotation.y", value: 0 },
+      // t=2.5s: Rotate into 3D view, close partially
+      { time: enterTime + 2.5, property: "rotation.y", value: 0 },
+      { time: enterTime + 2.5, property: "rotation.x", value: 1.45 },
+      { time: enterTime + 2.5, property: "props.openAngle", value: 106 },
+      { time: enterTime + 2.5, property: "position.z", value: lapZ1 },
+      { time: enterTime + 2.5, property: "position.y", value: lapY1 },
+      // t=4.5s: Continue closing
+      { time: enterTime + 4.5, property: "props.openAngle", value: 64 },
+      { time: enterTime + 4.5, property: "rotation.x", value: 1.1 },
+      // t=5.5s: Final resting position — readable angle
+      { time: enterTime + 5.5, property: "position.z", value: lapZ2 },
+      { time: enterTime + 5.5, property: "position.y", value: lapY1 },
+      { time: enterTime + 5.5, property: "props.openAngle", value: 73 }
+    ];
+    const keyframesWithEasing = keyframes.map(
+      (kf) => ({
+        ...kf,
+        id: nanoid(),
+        interpolation: {
+          family: "continuous",
+          strategy: "ease-in-out"
+        }
+      })
+    );
+    const dev = deviceSize({ width, height }, "laptop");
+    const laptopLayer = createLayer("laptop", {
+      props: {
+        url,
+        ...dev,
+        baseColor: laptopColor,
+        screenColor: laptopColor,
+        openAngle: 180,
+        _aspectRatio: 1,
+        _aspectRatioLocked: false
+      },
+      transform: {
+        position: { x: 0, y: lapY0, z: lapZ0 },
+        rotation: { x: 0, y: 0, z: 0 },
+        scale: { x: 1, y: 1 },
+        anchor: "center"
+      },
+      projectDimensions: { width, height },
+      layer: {
+        name: "Laptop",
+        enterTime,
+        exitTime
+      },
+      keyframes: keyframesWithEasing
+    });
+    return {
+      projectUpdates: {
+        ...ctx.inProject ? {} : { background },
+        ...exitTime > ctx.project.duration ? { duration: exitTime } : {}
+      },
+      layersToAdd: [
+        {
+          layer: laptopLayer
+        }
+      ]
+    };
+  }
+};
+const __vite_glob_0_2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template: template$7
+}, Symbol.toStringTag, { value: "Module" }));
+const configSchema$5 = meta$d.schema.pick({
+  fontFamily: true,
+  fontWeight: true,
+  fontSize: true,
+  textColor: true,
+  bgColor: true
+}).extend({
+  position: z.enum(["bottom", "top", "middle"]).default("bottom").register(fieldRegistry, { label: "Position" })
+});
+const template$6 = {
+  id: "add-captions",
+  name: "Auto Captions Generator",
+  description: "Upload a video and get accurate auto-generated captions in seconds",
+  thumbnail: "/templates/add-captions.svg",
+  icon: Captions,
+  category: "media",
+  seoTitle: "Free Auto Captions Generator — Add Subtitles to Any Video",
+  seoDescription: "Upload your video and generate accurate subtitles automatically with AI. Free online tool — no registration required to try.",
+  keywords: [
+    "auto captions",
+    "subtitle generator",
+    "add captions to video",
+    "video transcription",
+    "automatic subtitles",
+    "free caption maker"
+  ],
+  steps: [
+    {
+      title: "Upload Your Video",
+      description: "Select a video file to add captions to",
+      component: Media_upload_step,
+      componentProps: { mediaType: "video" }
+    },
+    {
+      title: "Caption Style",
+      description: "Customize how your captions look",
+      schema: configSchema$5
+    }
+  ],
+  async apply(values, ctx) {
+    const { src, fileKey, duration, ...captionsProps } = values;
+    const { width, height } = ctx.project;
+    const enterTime = ctx.currentTime;
+    const exitTime = enterTime + duration;
+    const videoLayer = createLayer("video", {
+      props: {
+        src,
+        fileKey,
+        width: 100,
+        height: toPct(height / width),
+        objectFit: "cover",
+        borderRadius: 0,
+        frame: "none",
+        frameWidth: 0
+      },
+      projectDimensions: { width, height },
+      layer: { name: "Video", enterTime, exitTime, contentDuration: duration }
+    });
+    const input = createFromSchema(generateCaptionsAction.inputSchema, captionsProps);
+    const { layersToAdd, layersToUpdate } = await runAction({
+      action: generateCaptionsAction,
+      input,
+      project: ctx.project,
+      sourceLayer: videoLayer
+    });
+    return {
+      layersToAdd: [{ layer: videoLayer }, ...layersToAdd ?? []],
+      layersToUpdate: [...layersToUpdate ?? []],
+      projectUpdates: { ...ctx.project.duration < exitTime && { duration: exitTime } }
+    };
+  }
+};
+const __vite_glob_0_3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template: template$6
+}, Symbol.toStringTag, { value: "Module" }));
+const configSchema$4 = z.object({
+  browserUrl: z.string().default("https://yoursite.com").register(fieldRegistry, { label: "URL shown in browser bar" }),
+  background: BackgroundValueSchema.default(defaultBackground).register(fieldRegistry, {
+    label: "Background",
+    widget: "background"
+  })
+});
+const template$5 = {
+  id: "video-to-browser",
+  name: "Browser Mockup Video",
+  description: "Wrap a screen recording inside an animated browser window",
+  thumbnail: "/templates/video-to-browser.svg",
+  icon: Globe,
+  category: "composite",
+  seoTitle: "Free Browser Mockup Video Maker — Wrap Screen Recordings",
+  seoDescription: "Instantly wrap your screen recording in a realistic browser window mockup. Perfect for SaaS demos, tutorials, and product videos. Free tool.",
+  keywords: [
+    "browser mockup",
+    "screen recording mockup",
+    "browser frame video",
+    "saas demo video",
+    "product walkthrough",
+    "website mockup video"
+  ],
+  steps: [
+    {
+      title: "Upload Screen Recording",
+      description: "Select a screen recording or screenshot to wrap in a browser",
+      component: Media_upload_step,
+      componentProps: { mediaType: "media" }
+    },
+    {
+      title: "Browser Settings",
+      description: "Customize the browser appearance and background",
+      schema: configSchema$4
+    }
+  ],
+  apply(values, ctx) {
+    const { src, fileKey, detectedType, duration: mediaDuration, browserUrl, background } = values;
+    const isVideo = detectedType === "video";
+    const { width, height } = ctx.project;
+    const ar = height / width;
+    const enterTime = ctx.currentTime;
+    const duration = isVideo ? mediaDuration ?? 5 : 5;
+    const exitTime = enterTime + duration;
+    const browserW = 88;
+    const browserH = round1(ar * 82);
+    const browserLayer = createLayer("browser", {
+      props: { url: browserUrl, width: browserW, height: browserH },
+      projectDimensions: ctx.project,
+      style: {
+        opacity: 1,
+        blur: 0,
+        brightness: 1,
+        contrast: 1,
+        saturate: 1,
+        dropShadowX: 0,
+        dropShadowY: 16,
+        dropShadowBlur: 48,
+        dropShadowColor: "rgba(0,0,0,0.4)"
+      },
+      layer: { name: "Browser", enterTime, exitTime }
+    });
+    const contentH = round1(browserH - pxToPct({ width }, 40));
+    const contentLayer = isVideo ? createLayer("video", {
+      props: {
+        src,
+        fileKey,
+        width: browserW,
+        height: contentH,
+        objectFit: "cover",
+        borderRadius: 0,
+        frame: "none",
+        frameWidth: 0
+      },
+      projectDimensions: { width, height },
+      layer: { name: "Screen Recording", enterTime, exitTime, contentDuration: mediaDuration }
+    }) : createLayer("image", {
+      props: {
+        src,
+        fileKey,
+        width: browserW,
+        height: contentH,
+        objectFit: "cover"
+      },
+      projectDimensions: { width, height },
+      layer: { name: "Screenshot", enterTime, exitTime }
+    });
+    contentLayer.parentId = browserLayer.id;
+    return {
+      projectUpdates: {
+        ...ctx.inProject ? {} : { background },
+        ...exitTime > ctx.project.duration ? { duration: exitTime } : {}
+      },
+      layersToAdd: [
+        {
+          layer: browserLayer,
+          presets: [{ id: "zoom-in", startTime: enterTime, duration: 0.5 }]
+        },
+        {
+          layer: contentLayer,
+          presets: [{ id: "fade-in", startTime: enterTime + 0.2, duration: 0.35 }]
+        }
+      ]
+    };
+  }
+};
+const __vite_glob_0_4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template: template$5
+}, Symbol.toStringTag, { value: "Module" }));
+const dubLanguageOptions = dubLanguages.map((l) => ({ value: l.value, label: l.label }));
+const dubLanguageCodes = dubLanguages.map((l) => l.value);
+const configSchema$3 = z.object({
+  targetLang: z.enum(dubLanguageCodes).default("en").register(fieldRegistry, {
+    label: "Target language",
+    widget: "select",
+    options: dubLanguageOptions
+  })
+});
+const template$4 = {
+  id: "translate-video",
+  name: "Video Translator",
+  description: "Dub your video into another language using AI voice cloning",
+  thumbnail: "/templates/translate-video.svg",
+  icon: Languages,
+  category: "media",
+  isPro: true,
+  seoTitle: "Free AI Video Translator — Dub Video to Any Language",
+  seoDescription: "Translate your video into 12+ languages with AI-powered voice dubbing. Keep original lip sync and tone. Free to try — no login required.",
+  keywords: [
+    "video translator",
+    "ai dubbing",
+    "video dubbing",
+    "translate video",
+    "voice cloning",
+    "multilingual video",
+    "video localization"
+  ],
+  steps: [
+    {
+      title: "Upload Your Video",
+      description: "Upload the video you want to translate",
+      component: Media_upload_step,
+      componentProps: { mediaType: "video" }
+    },
+    {
+      title: "Choose Target Language",
+      description: "Select the language you want to dub your video into",
+      schema: configSchema$3
+    }
+  ],
+  async apply(values, ctx) {
+    const { src, fileKey, duration } = values;
+    const { width, height } = ctx.project;
+    const enterTime = ctx.currentTime;
+    const exitTime = enterTime + duration;
+    const videoLayer = createLayer("video", {
+      props: {
+        src,
+        fileKey,
+        width: 100,
+        height: toPct(height / width),
+        objectFit: "cover",
+        // Mute original audio — dubbed audio layer will replace it
+        volume: 0,
+        borderRadius: 0,
+        frame: "none",
+        frameWidth: 0
+      },
+      projectDimensions: { width, height },
+      layer: { name: "Original Video", enterTime, exitTime, contentDuration: duration }
+    });
+    const { layersToAdd, layersToUpdate } = await runAction({
+      action: dubAudioAction,
+      input: createFromSchema(dubAudioAction.inputSchema, {
+        targetLang: values.targetLang
+      }),
+      sourceLayer: videoLayer,
+      project: ctx.project
+    });
+    return {
+      layersToAdd: [{ layer: videoLayer }, ...layersToAdd ?? []],
+      layersToUpdate,
+      projectUpdates: { ...exitTime > ctx.project.duration ? { duration: exitTime } : {} }
+    };
+  }
+};
+const __vite_glob_0_5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template: template$4
+}, Symbol.toStringTag, { value: "Module" }));
+const configSchema$2 = z.object({
+  aggressiveness: z.enum(["light", "balanced", "aggressive"]).default("balanced").register(fieldRegistry, { label: "Cut aggressiveness" })
+});
+const template$3 = {
+  id: "auto-cut",
+  name: "Silence Remover",
+  description: "Automatically detect and remove silent/boring parts from your video",
+  thumbnail: "/templates/auto-cut.svg",
+  icon: Scissors,
+  category: "media",
+  isPro: true,
+  seoTitle: "Free Silence Remover — Auto-Cut Dead Air from Videos",
+  seoDescription: "Upload your video and let AI automatically detect and remove silences, pauses, and boring sections. Free online silence remover.",
+  keywords: [
+    "silence remover",
+    "auto cut video",
+    "remove silence from video",
+    "jump cut editor",
+    "video trimmer",
+    "podcast editor",
+    "youtube editor"
+  ],
+  steps: [
+    {
+      title: "Upload Your Video",
+      description: "Upload the video you want to trim",
+      component: Media_upload_step,
+      componentProps: { mediaType: "video" }
+    },
+    {
+      title: "Cut Settings",
+      description: "Choose how aggressively to remove silences",
+      schema: configSchema$2
+    },
+    {
+      title: "Analyzing Video",
+      description: "AI is detecting silences and boring sections...",
+      async execute(values, _ctx, onProgress) {
+        const fileKey = values.fileKey;
+        const duration = values.duration;
+        const aggressiveness = values.aggressiveness ?? "balanced";
+        onProgress(0.1);
+        const result = await analyzeMediaAsset({ fileKey });
+        onProgress(0.8);
+        let segments;
+        const analysisData = result.success ? result.data : null;
+        const annotation = analysisData?.success ? analysisData.annotation : null;
+        if (annotation) {
+          const typesToCut = aggressiveness === "light" ? ["dead-space"] : aggressiveness === "balanced" ? ["dead-space", "tangent"] : ["dead-space", "tangent", "outro"];
+          segments = annotation.segments.filter((s) => !typesToCut.includes(s.type)).map((s) => ({ start: s.start, end: s.end }));
+        } else {
+          const segmentLength = aggressiveness === "light" ? 30 : aggressiveness === "balanced" ? 20 : 10;
+          segments = [];
+          for (let start = 0; start < duration; start += segmentLength + 1) {
+            segments.push({ start, end: Math.min(start + segmentLength, duration) });
+          }
+        }
+        if (segments.length === 0) {
+          segments.push({ start: 0, end: duration });
+        }
+        onProgress(1);
+        return { segments, fileKey, src: values.src };
+      }
+    }
+  ],
+  apply(values, ctx) {
+    const { src, fileKey, duration, segments } = values;
+    const { width, height } = ctx.project;
+    const enterTime = ctx.currentTime;
+    const allSegments = segments ?? [{ start: 0, end: duration }];
+    const layers = [];
+    let cursor = enterTime;
+    for (const seg of allSegments) {
+      const segDuration = seg.end - seg.start;
+      const layer = createLayer("video", {
+        props: {
+          src,
+          fileKey,
+          width: 100,
+          height: toPct(height / width),
+          objectFit: "cover",
+          borderRadius: 0,
+          frame: "none",
+          frameWidth: 0
+        },
+        projectDimensions: { width, height },
+        layer: {
+          name: `Clip ${Math.round(seg.start)}s–${Math.round(seg.end)}s`,
+          enterTime: cursor,
+          exitTime: cursor + segDuration,
+          contentDuration: duration,
+          contentOffset: seg.start
+        }
+      });
+      layers.push({ layer });
+      cursor += segDuration;
+    }
+    return {
+      layersToAdd: layers,
+      projectUpdates: { ...cursor > ctx.project.duration ? { duration: cursor } : {} }
+    };
+  }
+};
+const __vite_glob_0_6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template: template$3
+}, Symbol.toStringTag, { value: "Module" }));
+const configSchema$1 = z.object({
+  headline: z.string().default("").register(fieldRegistry, { label: "Headline text" }),
+  subtext: z.string().default("").register(fieldRegistry, { label: "Subtext (optional)" }),
+  background: BackgroundValueSchema.default({
+    type: "linear",
+    angle: 135,
+    stops: [
+      { color: "#667eea", position: 0 },
+      { color: "#764ba2", position: 100 }
+    ]
+  }).register(fieldRegistry, { label: "Background", widget: "background" }),
+  animateIn: z.boolean().default(true).register(fieldRegistry, { label: "Animate screenshot in" })
+});
+const template$2 = {
+  id: "screenshot-to-social",
+  name: "Screenshot to Social Card",
+  description: "Turn any screenshot into an animated social media card with text and branding",
+  thumbnail: "/templates/screenshot-to-social.svg",
+  icon: Image_play,
+  category: "composite",
+  seoTitle: "Free Screenshot to Social Card Maker — Animated Video",
+  seoDescription: "Drop a screenshot and turn it into a polished animated social card with gradient background, headline, and smooth reveal animation. Free.",
+  keywords: [
+    "screenshot to video",
+    "social media card maker",
+    "animated social post",
+    "product screenshot",
+    "marketing video maker",
+    "twitter card video"
+  ],
+  steps: [
+    {
+      title: "Upload Media",
+      description: "Upload a screenshot, image, or video to showcase",
+      component: Media_upload_step,
+      componentProps: { mediaType: "media" }
+    },
+    {
+      title: "Card Content",
+      description: "Add your headline, subtext, and choose a background color",
+      schema: configSchema$1
+    }
+  ],
+  apply(values, ctx) {
+    const {
+      src,
+      fileKey,
+      detectedType,
+      duration: mediaDuration,
+      headline,
+      subtext,
+      background,
+      animateIn
+    } = values;
+    const isVideo = detectedType === "video";
+    const { width, height } = ctx.project;
+    const ar = height / width;
+    const enterTime = ctx.currentTime;
+    const duration = mediaDuration ?? 5;
+    const exitTime = enterTime + duration;
+    const layers = [];
+    const bgLayer = createLayer("shape", {
+      props: { shapeType: "rectangle", background, width: 100, height: toPct(ar), borderRadius: 0 },
+      projectDimensions: { width, height },
+      layer: { name: "Background", enterTime, exitTime }
+    });
+    layers.push({ layer: bgLayer });
+    const mediaWidthPct = 75;
+    const mediaHeightPct = round1(mediaWidthPct * 0.56);
+    const hasText = headline || subtext;
+    const sharedStyle = {
+      opacity: 1,
+      blur: 0,
+      brightness: 1,
+      contrast: 1,
+      saturate: 1,
+      dropShadowX: 0,
+      dropShadowY: 12,
+      dropShadowBlur: 40,
+      dropShadowColor: "rgba(0,0,0,0.35)"
+    };
+    const sharedTransform = {
+      position: { x: 0, y: hasText ? -round1(ar * 8) : 0, z: 0 },
+      rotation: { x: 0, y: 0, z: 0 },
+      scale: { x: 1, y: 1 },
+      anchor: "center"
+    };
+    const mediaLayer = isVideo ? createLayer("video", {
+      props: {
+        src,
+        fileKey,
+        width: mediaWidthPct,
+        height: mediaHeightPct,
+        borderRadius: 12,
+        objectFit: "cover"
+      },
+      transform: sharedTransform,
+      style: sharedStyle,
+      layer: { name: "Video", enterTime, exitTime, contentDuration: mediaDuration }
+    }) : createLayer("image", {
+      props: {
+        src,
+        fileKey,
+        width: mediaWidthPct,
+        height: mediaHeightPct,
+        objectFit: "cover"
+      },
+      transform: sharedTransform,
+      style: sharedStyle,
+      layer: { name: "Screenshot", enterTime, exitTime }
+    });
+    layers.push({
+      layer: mediaLayer,
+      presets: animateIn ? [{ id: "zoom-in", startTime: enterTime, duration: 0.6 }] : void 0
+    });
+    if (headline) {
+      const headlineLayer = createLayer("text", {
+        props: {
+          content: headline,
+          fontSize: 42,
+          fontWeight: "700",
+          color: "#ffffff",
+          textAlign: "center",
+          letterSpacing: -0.5
+        },
+        transform: {
+          position: { x: 0, y: round1(ar * 50 - pxToPct({ width }, 72)), z: 0 },
+          rotation: { x: 0, y: 0, z: 0 },
+          scale: { x: 1, y: 1 },
+          anchor: "center"
+        },
+        layer: { name: "Headline", enterTime, exitTime }
+      });
+      layers.push({
+        layer: headlineLayer,
+        presets: [{ id: "slide-in-bottom", startTime: enterTime + 0.25, duration: 0.5 }]
+      });
+    }
+    if (subtext) {
+      const subtextLayer = createLayer("text", {
+        props: {
+          content: subtext,
+          fontSize: 22,
+          fontWeight: "400",
+          color: "rgba(255,255,255,0.7)",
+          textAlign: "center",
+          letterSpacing: 0.2
+        },
+        transform: {
+          position: { x: 0, y: round1(ar * 50 - pxToPct({ width }, 30)), z: 0 },
+          rotation: { x: 0, y: 0, z: 0 },
+          scale: { x: 1, y: 1 },
+          anchor: "center"
+        },
+        layer: { name: "Subtext", enterTime, exitTime }
+      });
+      layers.push({
+        layer: subtextLayer,
+        presets: [{ id: "slide-in-bottom", startTime: enterTime + 0.4, duration: 0.5 }]
+      });
+    }
+    return {
+      layersToAdd: layers,
+      projectUpdates: {
+        ...exitTime > ctx.project.duration ? { duration: Math.ceil(exitTime) } : {}
+      }
+    };
+  }
+};
+const __vite_glob_0_7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template: template$2
+}, Symbol.toStringTag, { value: "Module" }));
+const template$1 = {
+  id: "generate-video",
+  name: "AI Video Generator",
+  description: "Generate a video from a text prompt using Seedance 2.0 AI",
+  thumbnail: "/templates/generate-video.svg",
+  icon: Sparkles,
+  category: "media",
+  isPro: true,
+  seoTitle: "Free AI Video Generator — Text to Video in Seconds",
+  seoDescription: "Generate stunning AI videos from text prompts using state-of-the-art Seedance 2.0 model. Native audio, any aspect ratio. Free to try.",
+  keywords: [
+    "ai video generator",
+    "text to video",
+    "ai video creation",
+    "seedance",
+    "video generation",
+    "generative ai video"
+  ],
+  steps: [
+    {
+      title: "Describe Your Video",
+      description: "Write a prompt and choose generation settings",
+      schema: GenerateVideoSchema
+    }
+  ],
+  async apply(values, ctx) {
+    const { layersToAdd, layersToUpdate, projectUpdates } = await runAction({
+      action: generateVideoAction,
+      input: createFromSchema(generateVideoAction.inputSchema, values),
+      project: ctx.project
+    });
+    return {
+      layersToAdd,
+      layersToUpdate,
+      projectUpdates
+    };
+  }
+};
+const __vite_glob_0_8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template: template$1
+}, Symbol.toStringTag, { value: "Module" }));
+const configSchema = z.object({
+  phoneColor: z.string().default("#1f2937").register(fieldRegistry, { label: "Phone Frame Color", widget: "color" }),
+  background: BackgroundValueSchema.default(defaultBackground).register(fieldRegistry, {
+    label: "Background",
+    widget: "background"
+  })
+});
+const template = {
+  id: "video-to-phone",
+  name: "Phone Mockup Video",
+  description: "Wrap your video or screenshot inside an animated phone frame",
+  thumbnail: "/templates/video-to-phone.svg",
+  icon: Smartphone,
+  category: "composite",
+  seoTitle: "Free Phone Mockup Video Maker — Wrap Videos in a Phone Frame",
+  seoDescription: "Instantly wrap your video or screenshot in a realistic phone mockup. Perfect for app demos, social media content, and product showcases. Free tool.",
+  keywords: [
+    "phone mockup",
+    "mobile mockup video",
+    "app demo video",
+    "smartphone frame",
+    "iphone mockup",
+    "social media mockup"
+  ],
+  steps: [
+    {
+      title: "Upload Your Video",
+      description: "Select a video or screenshot to display inside the phone",
+      component: Media_upload_step,
+      componentProps: { mediaType: "media" }
+    },
+    {
+      title: "Phone Settings",
+      description: "Customize the phone frame color and background",
+      schema: configSchema
+    }
+  ],
+  apply(values, ctx) {
+    const { src, fileKey, detectedType, duration: mediaDuration, phoneColor, background } = values;
+    const isVideo = detectedType === "video";
+    const { width, height } = ctx.project;
+    const enterTime = ctx.currentTime;
+    const duration = isVideo ? mediaDuration ?? 5 : 5;
+    const exitTime = enterTime + duration;
+    const phoneW = round1(Math.min(45, pxToPct({ width }, 375)));
+    const phoneH = round1(phoneW * (667 / 375));
+    const bezelWidth = pxToPct({ width }, 12);
+    const notchHeight = pxToPct({ width }, 28);
+    const phoneLayer = createLayer("phone", {
+      props: {
+        width: phoneW,
+        height: phoneH,
+        phoneColor,
+        borderRadius: pxToPct({ width }, 40),
+        bezelWidth,
+        notchHeight,
+        showNotch: true
+      },
+      projectDimensions: ctx.project,
+      style: {
+        opacity: 1,
+        blur: 0,
+        brightness: 1,
+        contrast: 1,
+        saturate: 1,
+        dropShadowX: 0,
+        dropShadowY: 20,
+        dropShadowBlur: 60,
+        dropShadowColor: "rgba(0,0,0,0.45)"
+      },
+      layer: { name: "Phone Frame", enterTime, exitTime }
+    });
+    const contentW = phoneW - bezelWidth * 2;
+    const contentH = phoneH - bezelWidth * 2 - notchHeight;
+    const contentLayer = isVideo ? createLayer("video", {
+      props: {
+        src,
+        fileKey,
+        width: contentW,
+        height: contentH,
+        objectFit: "cover",
+        borderRadius: 0,
+        frame: "none",
+        frameWidth: 0
+      },
+      projectDimensions: { width, height },
+      layer: { name: "Video", enterTime, exitTime, contentDuration: mediaDuration }
+    }) : createLayer("image", {
+      props: {
+        src,
+        fileKey,
+        width: contentW,
+        height: contentH,
+        objectFit: "cover"
+      },
+      projectDimensions: { width, height },
+      layer: { name: "Screenshot", enterTime, exitTime }
+    });
+    contentLayer.parentId = phoneLayer.id;
+    return {
+      projectUpdates: {
+        ...ctx.inProject ? {} : { background, duration: exitTime },
+        ...exitTime > ctx.project.duration ? { duration: exitTime } : {}
+      },
+      layersToAdd: [
+        {
+          layer: phoneLayer,
+          presets: [{ id: "zoom-in", startTime: enterTime, duration: 0.5 }]
+        },
+        {
+          layer: contentLayer,
+          presets: [{ id: "fade-in", startTime: enterTime + 0.2, duration: 0.35 }]
+        }
+      ]
+    };
+  }
+};
+const __vite_glob_0_9 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  template
+}, Symbol.toStringTag, { value: "Module" }));
+const templateModules = /* @__PURE__ */ Object.assign({ "./templates/1-screen-webcam-demo.ts": __vite_glob_0_0, "./templates/10-video-beautifier.ts": __vite_glob_0_1, "./templates/2-laptop-3d-intro.ts": __vite_glob_0_2, "./templates/3-add-captions.ts": __vite_glob_0_3, "./templates/4-video-to-browser.ts": __vite_glob_0_4, "./templates/5-translate-video.ts": __vite_glob_0_5, "./templates/6-auto-cut.ts": __vite_glob_0_6, "./templates/7-screenshot-to-social.ts": __vite_glob_0_7, "./templates/8-generate-video.ts": __vite_glob_0_8, "./templates/9-video-to-phone.ts": __vite_glob_0_9 });
+const templateRegistry = Object.values(templateModules).map(
+  (m) => m.template
+);
+function getTemplateById(id) {
+  return templateRegistry.find((t) => t.id === id);
+}
+
+export { FileUpload as F, Monitor_play as M, Rotate_cw as R, Scroll_area as S, Tooltip as T, Tooltip_trigger as a, Tooltip_content as b, Tooltip$1 as c, Tooltip_trigger$1 as d, Monitor as e, Scissors as f, getTemplateById as g, templateRegistry as t };
+//# sourceMappingURL=registry2-DJC1cBxe.js.map