@scenar/remotion 0.1.7

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to the Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding any notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2026 Scenar Contributors
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/ScenarioComposition.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import type { ScenarioBundle } from "@scenar/core";
+interface ScenarioCompositionProps<T> {
+    /** Self-contained scenario bundle with steps and optional narration. */
+    bundle: ScenarioBundle<T>;
+    /** Render function — receives current step data and step index. */
+    children: (data: T, stepIndex: number) => ReactNode;
+    /** Frames per second.  Defaults to 30. */
+    fps?: number;
+    /**
+     * When true, audio `src` paths are resolved through Remotion's
+     * `staticFile()` (stripping a leading `/`).  Enable this when audio
+     * files live in the Remotion project's `public/` directory.
+     * Defaults to true.
+     */
+    useStaticFile?: boolean;
+}
+/**
+ * Root component for rendering a Scenar scenario as a Remotion video.
+ *
+ * Wraps the scenario in the correct providers (`VideoExportProvider`,
+ * `TimeSourceProvider`) and maps Remotion frames to the Scenar
+ * timeline.  Narration audio clips from the bundle manifest are placed
+ * as `<Audio>` elements at the exact frame offsets computed by the
+ * timeline — bypassing ScenarioPlayer's browser `<audio>` element
+ * entirely.
+ *
+ * Ported from Stigmer's `video/compositions/DemoVideo.tsx` with the
+ * product-specific parts (registry, AppShell, Tailwind classes)
+ * factored out.  The consumer wraps this component in their own
+ * `<AbsoluteFill>` with whatever layout they need.
+ *
+ * Usage inside a Remotion project:
+ *
+ * ```tsx
+ * import { Composition, AbsoluteFill } from "remotion";
+ * import { ScenarioComposition, calculateScenarioTimeline } from "@scenar/remotion";
+ *
+ * export const RemotionRoot = () => (
+ *   <Composition
+ *     id="my-demo"
+ *     component={() => (
+ *       <AbsoluteFill>
+ *         <ScenarioComposition bundle={myBundle}>
+ *           {(data) => <MyScenarioView data={data} />}
+ *         </ScenarioComposition>
+ *       </AbsoluteFill>
+ *     )}
+ *     fps={30}
+ *     width={1920}
+ *     height={1080}
+ *     durationInFrames={
+ *       calculateScenarioTimeline(myBundle.steps, myBundle.narrationManifest, 30)
+ *         .durationInFrames
+ *     }
+ *   />
+ * );
+ * ```
+ */
+export declare function ScenarioComposition<T>({ bundle, children, fps: fpsProp, useStaticFile: useStaticFileProp, }: ScenarioCompositionProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ScenarioComposition.d.ts.map

package/ScenarioComposition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScenarioComposition.d.ts","sourceRoot":"","sources":["../src/ScenarioComposition.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAMnD,UAAU,wBAAwB,CAAC,CAAC;IAClC,wEAAwE;IACxE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC1B,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,CAAC;IACpD,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,MAAM,EACN,QAAQ,EACR,GAAG,EAAE,OAAO,EACZ,aAAa,EAAE,iBAAwB,GACxC,EAAE,wBAAwB,CAAC,CAAC,CAAC,2CAqC7B"}

package/ScenarioComposition.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Audio, Sequence, staticFile, useCurrentFrame, useVideoConfig, } from "remotion";
+import { TimeSourceProvider, VideoExportProvider, ScenarioPlayer } from "@scenar/react";
+import { useScenarioTimeline } from "./useScenarioTimeline.js";
+const DEFAULT_FPS = 30;
+/**
+ * Root component for rendering a Scenar scenario as a Remotion video.
+ *
+ * Wraps the scenario in the correct providers (`VideoExportProvider`,
+ * `TimeSourceProvider`) and maps Remotion frames to the Scenar
+ * timeline.  Narration audio clips from the bundle manifest are placed
+ * as `<Audio>` elements at the exact frame offsets computed by the
+ * timeline — bypassing ScenarioPlayer's browser `<audio>` element
+ * entirely.
+ *
+ * Ported from Stigmer's `video/compositions/DemoVideo.tsx` with the
+ * product-specific parts (registry, AppShell, Tailwind classes)
+ * factored out.  The consumer wraps this component in their own
+ * `<AbsoluteFill>` with whatever layout they need.
+ *
+ * Usage inside a Remotion project:
+ *
+ * ```tsx
+ * import { Composition, AbsoluteFill } from "remotion";
+ * import { ScenarioComposition, calculateScenarioTimeline } from "@scenar/remotion";
+ *
+ * export const RemotionRoot = () => (
+ *   <Composition
+ *     id="my-demo"
+ *     component={() => (
+ *       <AbsoluteFill>
+ *         <ScenarioComposition bundle={myBundle}>
+ *           {(data) => <MyScenarioView data={data} />}
+ *         </ScenarioComposition>
+ *       </AbsoluteFill>
+ *     )}
+ *     fps={30}
+ *     width={1920}
+ *     height={1080}
+ *     durationInFrames={
+ *       calculateScenarioTimeline(myBundle.steps, myBundle.narrationManifest, 30)
+ *         .durationInFrames
+ *     }
+ *   />
+ * );
+ * ```
+ */
+export function ScenarioComposition({ bundle, children, fps: fpsProp, useStaticFile: useStaticFileProp = true, }) {
+    const videoConfig = useVideoConfig();
+    const fps = fpsProp ?? videoConfig.fps ?? DEFAULT_FPS;
+    const frame = useCurrentFrame();
+    const timeline = useScenarioTimeline(bundle.steps, bundle.narrationManifest, fps);
+    const currentTimeMs = (frame / fps) * 1000;
+    return (_jsxs(_Fragment, { children: [_jsx(TimeSourceProvider, { currentTimeMs: currentTimeMs, stepStartTimesMs: timeline.stepStartTimesMs, children: _jsx(VideoExportProvider, { children: _jsx(ScenarioPlayer, { bundle: bundle, children: children }) }) }), timeline.audioClips.map((clip) => (_jsx(Sequence, { from: clip.startFrame, durationInFrames: clip.durationFrames, children: _jsx(Audio, { src: resolveAudioSrc(clip, useStaticFileProp) }) }, clip.stepIndex)))] }));
+}
+/**
+ * Resolve audio source URL.  When `useStaticFile` is true, paths are
+ * resolved through Remotion's `staticFile()` (strips leading `/`).
+ * This matches Stigmer's pattern: `staticFile(clip.src.replace(/^\//, ""))`.
+ */
+function resolveAudioSrc(clip, useStaticFileFn) {
+    if (useStaticFileFn) {
+        return staticFile(clip.src.replace(/^\//, ""));
+    }
+    return clip.src;
+}
+//# sourceMappingURL=ScenarioComposition.js.map

package/ScenarioComposition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScenarioComposition.js","sourceRoot":"","sources":["../src/ScenarioComposition.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,eAAe,EACf,cAAc,GACf,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAkB,MAAM,0BAA0B,CAAC;AAE/E,MAAM,WAAW,GAAG,EAAE,CAAC;AAkBvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,UAAU,mBAAmB,CAAI,EACrC,MAAM,EACN,QAAQ,EACR,GAAG,EAAE,OAAO,EACZ,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACX;IAC5B,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,GAAG,GAAG,OAAO,IAAI,WAAW,CAAC,GAAG,IAAI,WAAW,CAAC;IACtD,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAEhC,MAAM,QAAQ,GAAG,mBAAmB,CAClC,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,iBAAiB,EACxB,GAAG,CACJ,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IAE3C,OAAO,CACL,8BACE,KAAC,kBAAkB,IACjB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,CAAC,gBAAgB,YAE3C,KAAC,mBAAmB,cAClB,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,YAC3B,QAAQ,GACM,GACG,GACH,EAEpB,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjC,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,gBAAgB,EAAE,IAAI,CAAC,cAAc,YAErC,KAAC,KAAK,IAAC,GAAG,EAAE,eAAe,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAI,IAJnD,IAAI,CAAC,SAAS,CAKV,CACZ,CAAC,IACD,CACJ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,eAAe,CAAC,IAAe,EAAE,eAAwB;IAChE,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IACjD,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC;AAClB,CAAC"}

package/index.d.ts

@@ -0,0 +1,5 @@
+export type { ScenarioBundle, NarrationManifest, ScenarioStep, StepTimeline } from "@scenar/core";
+export { ScenarioComposition } from "./ScenarioComposition.js";
+export type { ScenarioTimeline, AudioClip } from "./useScenarioTimeline.js";
+export { useScenarioTimeline, calculateScenarioTimeline, } from "./useScenarioTimeline.js";
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGlG,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EACL,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,0BAA0B,CAAC"}

package/index.js

@@ -0,0 +1,6 @@
+// @scenar/remotion — public API
+// Remotion integration for rendering Scenar scenarios as videos.
+// Composition
+export { ScenarioComposition } from "./ScenarioComposition.js";
+export { useScenarioTimeline, calculateScenarioTimeline, } from "./useScenarioTimeline.js";
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,iEAAiE;AAKjE,cAAc;AACd,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAI/D,OAAO,EACL,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@scenar/remotion",
+  "version": "0.1.7",
+  "description": "Remotion integration for Scenar — render scenario demos as pixel-perfect MP4 videos.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scenar-ai/scenar.git",
+    "directory": "packages/remotion"
+  },
+  "keywords": [
+    "scenar",
+    "scenario",
+    "remotion",
+    "video",
+    "render",
+    "mp4",
+    "demo"
+  ],
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@scenar/core": "0.1.7",
+    "@scenar/react": "0.1.7"
+  },
+  "peerDependencies": {
+    "@remotion/renderer": "4.0.448",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "remotion": "4.0.448"
+  },
+  "peerDependenciesMeta": {
+    "@remotion/renderer": {
+      "optional": true
+    }
+  }
+}

package/src/ScenarioComposition.tsx

@@ -0,0 +1,127 @@
+import { type ReactNode } from "react";
+import {
+  Audio,
+  Sequence,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import type { ScenarioBundle } from "@scenar/core";
+import { TimeSourceProvider, VideoExportProvider, ScenarioPlayer } from "@scenar/react";
+import { useScenarioTimeline, type AudioClip } from "./useScenarioTimeline.js";
+
+const DEFAULT_FPS = 30;
+
+interface ScenarioCompositionProps<T> {
+  /** Self-contained scenario bundle with steps and optional narration. */
+  bundle: ScenarioBundle<T>;
+  /** Render function — receives current step data and step index. */
+  children: (data: T, stepIndex: number) => ReactNode;
+  /** Frames per second.  Defaults to 30. */
+  fps?: number;
+  /**
+   * When true, audio `src` paths are resolved through Remotion's
+   * `staticFile()` (stripping a leading `/`).  Enable this when audio
+   * files live in the Remotion project's `public/` directory.
+   * Defaults to true.
+   */
+  useStaticFile?: boolean;
+}
+
+/**
+ * Root component for rendering a Scenar scenario as a Remotion video.
+ *
+ * Wraps the scenario in the correct providers (`VideoExportProvider`,
+ * `TimeSourceProvider`) and maps Remotion frames to the Scenar
+ * timeline.  Narration audio clips from the bundle manifest are placed
+ * as `<Audio>` elements at the exact frame offsets computed by the
+ * timeline — bypassing ScenarioPlayer's browser `<audio>` element
+ * entirely.
+ *
+ * Ported from Stigmer's `video/compositions/DemoVideo.tsx` with the
+ * product-specific parts (registry, AppShell, Tailwind classes)
+ * factored out.  The consumer wraps this component in their own
+ * `<AbsoluteFill>` with whatever layout they need.
+ *
+ * Usage inside a Remotion project:
+ *
+ * ```tsx
+ * import { Composition, AbsoluteFill } from "remotion";
+ * import { ScenarioComposition, calculateScenarioTimeline } from "@scenar/remotion";
+ *
+ * export const RemotionRoot = () => (
+ *   <Composition
+ *     id="my-demo"
+ *     component={() => (
+ *       <AbsoluteFill>
+ *         <ScenarioComposition bundle={myBundle}>
+ *           {(data) => <MyScenarioView data={data} />}
+ *         </ScenarioComposition>
+ *       </AbsoluteFill>
+ *     )}
+ *     fps={30}
+ *     width={1920}
+ *     height={1080}
+ *     durationInFrames={
+ *       calculateScenarioTimeline(myBundle.steps, myBundle.narrationManifest, 30)
+ *         .durationInFrames
+ *     }
+ *   />
+ * );
+ * ```
+ */
+export function ScenarioComposition<T>({
+  bundle,
+  children,
+  fps: fpsProp,
+  useStaticFile: useStaticFileProp = true,
+}: ScenarioCompositionProps<T>) {
+  const videoConfig = useVideoConfig();
+  const fps = fpsProp ?? videoConfig.fps ?? DEFAULT_FPS;
+  const frame = useCurrentFrame();
+
+  const timeline = useScenarioTimeline(
+    bundle.steps,
+    bundle.narrationManifest,
+    fps,
+  );
+
+  const currentTimeMs = (frame / fps) * 1000;
+
+  return (
+    <>
+      <TimeSourceProvider
+        currentTimeMs={currentTimeMs}
+        stepStartTimesMs={timeline.stepStartTimesMs}
+      >
+        <VideoExportProvider>
+          <ScenarioPlayer bundle={bundle}>
+            {children}
+          </ScenarioPlayer>
+        </VideoExportProvider>
+      </TimeSourceProvider>
+
+      {timeline.audioClips.map((clip) => (
+        <Sequence
+          key={clip.stepIndex}
+          from={clip.startFrame}
+          durationInFrames={clip.durationFrames}
+        >
+          <Audio src={resolveAudioSrc(clip, useStaticFileProp)} />
+        </Sequence>
+      ))}
+    </>
+  );
+}
+
+/**
+ * Resolve audio source URL.  When `useStaticFile` is true, paths are
+ * resolved through Remotion's `staticFile()` (strips leading `/`).
+ * This matches Stigmer's pattern: `staticFile(clip.src.replace(/^\//, ""))`.
+ */
+function resolveAudioSrc(clip: AudioClip, useStaticFileFn: boolean): string {
+  if (useStaticFileFn) {
+    return staticFile(clip.src.replace(/^\//, ""));
+  }
+  return clip.src;
+}

package/src/__tests__/ScenarioComposition.test.tsx

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+
+vi.mock("remotion", () => ({
+  useCurrentFrame: () => 0,
+  useVideoConfig: () => ({ fps: 30, width: 1920, height: 1080, durationInFrames: 300 }),
+  AbsoluteFill: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  Audio: ({ src }: { src: string }) => (
+    <audio data-testid="remotion-audio" data-remotion-audio="true" src={src} />
+  ),
+  Sequence: ({
+    from,
+    durationInFrames,
+    children,
+  }: {
+    from: number;
+    durationInFrames?: number;
+    children: React.ReactNode;
+  }) => (
+    <div
+      data-testid="remotion-sequence"
+      data-from={from}
+      data-duration={durationInFrames}
+    >
+      {children}
+    </div>
+  ),
+  staticFile: (path: string) => `/static/${path}`,
+}));
+
+import type { ScenarioBundle, NarrationManifest } from "@scenar/core";
+import { ScenarioComposition } from "../ScenarioComposition.js";
+
+type StepData = { view: string };
+
+const bundle: ScenarioBundle<StepData> = {
+  id: "test-scenario",
+  steps: [
+    { delayMs: 0, data: { view: "intro" } },
+    { delayMs: 2000, data: { view: "body" } },
+    { delayMs: 1500, data: { view: "outro" } },
+  ],
+};
+
+const manifest: NarrationManifest = {
+  steps: [
+    { src: "/audio/step-0.mp3", durationMs: 3000 },
+    null,
+    { src: "/audio/step-2.mp3", durationMs: 2000 },
+  ],
+};
+
+const bundleWithNarration: ScenarioBundle<StepData> = {
+  ...bundle,
+  narrationManifest: manifest,
+};
+
+describe("ScenarioComposition", () => {
+  it("renders children with the first step data at frame 0", () => {
+    const renderFn = vi.fn((data: StepData) => <div>{data.view}</div>);
+
+    const { getByText } = render(
+      <ScenarioComposition bundle={bundle}>
+        {renderFn}
+      </ScenarioComposition>,
+    );
+
+    expect(getByText("intro")).toBeTruthy();
+  });
+
+  it("places Remotion Audio elements for narrated steps via staticFile", () => {
+    const { container } = render(
+      <ScenarioComposition bundle={bundleWithNarration}>
+        {(data: StepData) => <div>{data.view}</div>}
+      </ScenarioComposition>,
+    );
+
+    const remotionAudios = container.querySelectorAll("[data-remotion-audio]");
+    expect(remotionAudios).toHaveLength(2);
+    // staticFile strips leading "/" → staticFile("audio/step-0.mp3") → "/static/audio/step-0.mp3"
+    expect(remotionAudios[0]!.getAttribute("src")).toBe("/static/audio/step-0.mp3");
+    expect(remotionAudios[1]!.getAttribute("src")).toBe("/static/audio/step-2.mp3");
+  });
+
+  it("wraps audio in Sequences with correct frame offsets and durations", () => {
+    const { container } = render(
+      <ScenarioComposition bundle={bundleWithNarration}>
+        {(data: StepData) => <div>{data.view}</div>}
+      </ScenarioComposition>,
+    );
+
+    const sequences = container.querySelectorAll("[data-testid='remotion-sequence']");
+    expect(sequences).toHaveLength(2);
+
+    // Step 0 starts at frame 0, duration = Math.round(3000 * 30 / 1000) = 90 frames
+    expect(sequences[0]!.getAttribute("data-from")).toBe("0");
+    expect(sequences[0]!.getAttribute("data-duration")).toBe("90");
+
+    // Step 2: starts at max(2000, 3000) + max(1500, 0) = 3000 + 1500 = 4500ms
+    // → Math.round(4500 * 30 / 1000) = 135 frames
+    // duration = Math.round(2000 * 30 / 1000) = 60 frames
+    expect(sequences[1]!.getAttribute("data-from")).toBe("135");
+    expect(sequences[1]!.getAttribute("data-duration")).toBe("60");
+  });
+
+  it("renders no Remotion audio when bundle has no narration manifest", () => {
+    const { container } = render(
+      <ScenarioComposition bundle={bundle}>
+        {(data: StepData) => <div>{data.view}</div>}
+      </ScenarioComposition>,
+    );
+
+    expect(container.querySelectorAll("[data-remotion-audio]")).toHaveLength(0);
+    expect(container.querySelectorAll("[data-testid='remotion-sequence']")).toHaveLength(0);
+  });
+
+  it("passes raw src when useStaticFile is false", () => {
+    const { container } = render(
+      <ScenarioComposition bundle={bundleWithNarration} useStaticFile={false}>
+        {(data: StepData) => <div>{data.view}</div>}
+      </ScenarioComposition>,
+    );
+
+    const remotionAudios = container.querySelectorAll("[data-remotion-audio]");
+    expect(remotionAudios[0]!.getAttribute("src")).toBe("/audio/step-0.mp3");
+    expect(remotionAudios[1]!.getAttribute("src")).toBe("/audio/step-2.mp3");
+  });
+});

package/src/__tests__/useScenarioTimeline.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from "vitest";
+import { calculateScenarioTimeline } from "../useScenarioTimeline.js";
+import type { ScenarioStep, NarrationManifest } from "@scenar/core";
+
+const steps: ScenarioStep<string>[] = [
+  { delayMs: 0, data: "step-0" },
+  { delayMs: 3000, data: "step-1" },
+  { delayMs: 2000, data: "step-2" },
+];
+
+const manifest: NarrationManifest = {
+  steps: [
+    { src: "/audio/step-0.mp3", durationMs: 5000 },
+    { src: "/audio/step-1.mp3", durationMs: 4000 },
+    null,
+  ],
+};
+
+describe("calculateScenarioTimeline", () => {
+  it("computes durationInFrames from step delays at 30 fps", () => {
+    const timeline = calculateScenarioTimeline(steps, null, 30);
+    expect(timeline.fps).toBe(30);
+    expect(timeline.durationInFrames).toBeGreaterThan(0);
+    expect(timeline.stepStartTimesMs[0]).toBe(0);
+  });
+
+  it("includes stepStartFrames aligned with stepStartTimesMs", () => {
+    const timeline = calculateScenarioTimeline(steps, manifest, 30);
+    expect(timeline.stepStartFrames).toHaveLength(3);
+    expect(timeline.stepStartFrames[0]).toBe(0);
+    // step 1 at 5000ms → Math.round(5000 * 30 / 1000) = 150
+    expect(timeline.stepStartFrames[1]).toBe(150);
+  });
+
+  it("accounts for narration durations when manifest is provided", () => {
+    const withNarration = calculateScenarioTimeline(steps, manifest, 30);
+    const withoutNarration = calculateScenarioTimeline(steps, null, 30);
+    expect(withNarration.totalDurationMs).toBeGreaterThan(
+      withoutNarration.totalDurationMs,
+    );
+  });
+
+  it("step 1 starts after max(delayMs, narration duration of step 0)", () => {
+    const timeline = calculateScenarioTimeline(steps, manifest, 30);
+    // step 0 narration is 5000ms, step 1 delayMs is 3000ms → max(3000, 5000) = 5000
+    expect(timeline.stepStartTimesMs[1]).toBe(5000);
+  });
+
+  it("step 2 starts after max(delayMs, narration duration of step 1)", () => {
+    const timeline = calculateScenarioTimeline(steps, manifest, 30);
+    // step 1 narration is 4000ms, step 2 delayMs is 2000ms → max(2000, 4000) = 4000
+    expect(timeline.stepStartTimesMs[2]).toBe(5000 + 4000);
+  });
+
+  it("builds audioClips with correct frame offsets and durations", () => {
+    const timeline = calculateScenarioTimeline(steps, manifest, 30);
+    expect(timeline.audioClips).toHaveLength(2);
+
+    expect(timeline.audioClips[0]!.stepIndex).toBe(0);
+    expect(timeline.audioClips[0]!.src).toBe("/audio/step-0.mp3");
+    expect(timeline.audioClips[0]!.startFrame).toBe(0);
+    // 5000ms → Math.round(5000 * 30 / 1000) = 150 frames
+    expect(timeline.audioClips[0]!.durationFrames).toBe(150);
+
+    expect(timeline.audioClips[1]!.stepIndex).toBe(1);
+    expect(timeline.audioClips[1]!.src).toBe("/audio/step-1.mp3");
+    expect(timeline.audioClips[1]!.startFrame).toBe(150);
+    // 4000ms → Math.round(4000 * 30 / 1000) = 120 frames
+    expect(timeline.audioClips[1]!.durationFrames).toBe(120);
+  });
+
+  it("returns empty audioClips when no manifest", () => {
+    const timeline = calculateScenarioTimeline(steps, null, 30);
+    expect(timeline.audioClips).toHaveLength(0);
+  });
+
+  it("uses Math.round for frame conversion (matches Stigmer)", () => {
+    const timeline = calculateScenarioTimeline(
+      [{ delayMs: 0, data: "a" }, { delayMs: 1500, data: "b" }],
+      null,
+      30,
+    );
+    // 1500ms + 3000ms final dwell = 4500ms → Math.round(4500 * 30 / 1000) = 135 frames
+    expect(timeline.durationInFrames).toBe(135);
+  });
+
+  it("returns correct fps value", () => {
+    const timeline = calculateScenarioTimeline(steps, null, 60);
+    expect(timeline.fps).toBe(60);
+  });
+
+  it("handles single-step scenario", () => {
+    const timeline = calculateScenarioTimeline(
+      [{ delayMs: 0, data: "only" }],
+      null,
+      30,
+    );
+    // Single step: 0 + 3000ms final dwell = 3000ms → Math.round(3000 * 30 / 1000) = 90 frames
+    expect(timeline.durationInFrames).toBe(90);
+    expect(timeline.stepStartTimesMs).toEqual([0]);
+    expect(timeline.stepStartFrames).toEqual([0]);
+  });
+});

package/src/index.ts

@@ -0,0 +1,15 @@
+// @scenar/remotion — public API
+// Remotion integration for rendering Scenar scenarios as videos.
+
+// Re-export core types for consumer convenience
+export type { ScenarioBundle, NarrationManifest, ScenarioStep, StepTimeline } from "@scenar/core";
+
+// Composition
+export { ScenarioComposition } from "./ScenarioComposition.js";
+
+// Timeline
+export type { ScenarioTimeline, AudioClip } from "./useScenarioTimeline.js";
+export {
+  useScenarioTimeline,
+  calculateScenarioTimeline,
+} from "./useScenarioTimeline.js";

package/src/useScenarioTimeline.ts

@@ -0,0 +1,108 @@
+import { useMemo } from "react";
+import {
+  type NarrationManifest,
+  type ScenarioStep,
+  type StepTimeline,
+  computeStepTimeline,
+} from "@scenar/core";
+
+export interface AudioClip {
+  /** Step index this clip belongs to. */
+  stepIndex: number;
+  /** Asset path from the narration manifest (e.g. "/demos/foo/step-0.mp3"). */
+  src: string;
+  /** Remotion frame where this clip starts. */
+  startFrame: number;
+  /** Duration of this clip in Remotion frames. */
+  durationFrames: number;
+}
+
+export interface ScenarioTimeline extends StepTimeline {
+  /** Total video duration in Remotion frames at the given FPS. */
+  durationInFrames: number;
+  /** Start frame of each step (for Remotion Sequence positioning). */
+  stepStartFrames: number[];
+  /** Narration audio clips with frame offsets for Remotion Audio. */
+  audioClips: AudioClip[];
+  /** Frames per second used for the conversion. */
+  fps: number;
+}
+
+function msToFrames(ms: number, fps: number): number {
+  return Math.round((ms * fps) / 1000);
+}
+
+/**
+ * Pre-compute a deterministic playback timeline with Remotion frame
+ * offsets.  Delegates ms-level computation to the shared
+ * `computeStepTimeline` utility (same math as browser playback).
+ *
+ * Ported from Stigmer's `video/lib/timeline.ts` — same conversion
+ * logic, same `Math.round` rounding for frame alignment.
+ */
+function buildTimeline(
+  steps: readonly ScenarioStep<unknown>[],
+  narrationManifest: NarrationManifest | null | undefined,
+  fps: number,
+): ScenarioTimeline {
+  const { stepStartTimesMs, totalDurationMs } = computeStepTimeline(
+    steps,
+    narrationManifest,
+  );
+
+  const stepStartFrames = stepStartTimesMs.map((ms) => msToFrames(ms, fps));
+  const durationInFrames = msToFrames(totalDurationMs, fps);
+
+  const audioClips: AudioClip[] = [];
+  if (narrationManifest) {
+    for (let i = 0; i < narrationManifest.steps.length; i++) {
+      const entry = narrationManifest.steps[i];
+      if (!entry) continue;
+      audioClips.push({
+        stepIndex: i,
+        src: entry.src,
+        startFrame: stepStartFrames[i] ?? 0,
+        durationFrames: msToFrames(entry.durationMs, fps),
+      });
+    }
+  }
+
+  return {
+    stepStartTimesMs,
+    stepStartFrames,
+    audioClips,
+    totalDurationMs,
+    durationInFrames,
+    fps,
+  };
+}
+
+/**
+ * Convert Scenar's millisecond-based step timeline into Remotion frame
+ * counts.  The returned values are stable across renders for the same
+ * inputs.
+ *
+ * Use inside a Remotion component that needs timeline data.
+ */
+export function useScenarioTimeline(
+  steps: readonly ScenarioStep<unknown>[],
+  narrationManifest: NarrationManifest | null | undefined,
+  fps: number,
+): ScenarioTimeline {
+  return useMemo(
+    () => buildTimeline(steps, narrationManifest, fps),
+    [steps, narrationManifest, fps],
+  );
+}
+
+/**
+ * Pure-function variant for use outside React (e.g. `calculateMetadata`,
+ * CLI render scripts, `<Composition>` durationInFrames).
+ */
+export function calculateScenarioTimeline(
+  steps: readonly ScenarioStep<unknown>[],
+  narrationManifest: NarrationManifest | null | undefined,
+  fps: number,
+): ScenarioTimeline {
+  return buildTimeline(steps, narrationManifest, fps);
+}

package/useScenarioTimeline.d.ts

@@ -0,0 +1,35 @@
+import { type NarrationManifest, type ScenarioStep, type StepTimeline } from "@scenar/core";
+export interface AudioClip {
+    /** Step index this clip belongs to. */
+    stepIndex: number;
+    /** Asset path from the narration manifest (e.g. "/demos/foo/step-0.mp3"). */
+    src: string;
+    /** Remotion frame where this clip starts. */
+    startFrame: number;
+    /** Duration of this clip in Remotion frames. */
+    durationFrames: number;
+}
+export interface ScenarioTimeline extends StepTimeline {
+    /** Total video duration in Remotion frames at the given FPS. */
+    durationInFrames: number;
+    /** Start frame of each step (for Remotion Sequence positioning). */
+    stepStartFrames: number[];
+    /** Narration audio clips with frame offsets for Remotion Audio. */
+    audioClips: AudioClip[];
+    /** Frames per second used for the conversion. */
+    fps: number;
+}
+/**
+ * Convert Scenar's millisecond-based step timeline into Remotion frame
+ * counts.  The returned values are stable across renders for the same
+ * inputs.
+ *
+ * Use inside a Remotion component that needs timeline data.
+ */
+export declare function useScenarioTimeline(steps: readonly ScenarioStep<unknown>[], narrationManifest: NarrationManifest | null | undefined, fps: number): ScenarioTimeline;
+/**
+ * Pure-function variant for use outside React (e.g. `calculateMetadata`,
+ * CLI render scripts, `<Composition>` durationInFrames).
+ */
+export declare function calculateScenarioTimeline(steps: readonly ScenarioStep<unknown>[], narrationManifest: NarrationManifest | null | undefined, fps: number): ScenarioTimeline;
+//# sourceMappingURL=useScenarioTimeline.d.ts.map

package/useScenarioTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScenarioTimeline.d.ts","sourceRoot":"","sources":["../src/useScenarioTimeline.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,YAAY,EAElB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,SAAS;IACxB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,GAAG,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,gEAAgE;IAChE,gBAAgB,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,mEAAmE;IACnE,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,iDAAiD;IACjD,GAAG,EAAE,MAAM,CAAC;CACb;AAmDD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,YAAY,CAAC,OAAO,CAAC,EAAE,EACvC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,EACvD,GAAG,EAAE,MAAM,GACV,gBAAgB,CAKlB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,SAAS,YAAY,CAAC,OAAO,CAAC,EAAE,EACvC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,EACvD,GAAG,EAAE,MAAM,GACV,gBAAgB,CAElB"}

package/useScenarioTimeline.js

@@ -0,0 +1,58 @@
+import { useMemo } from "react";
+import { computeStepTimeline, } from "@scenar/core";
+function msToFrames(ms, fps) {
+    return Math.round((ms * fps) / 1000);
+}
+/**
+ * Pre-compute a deterministic playback timeline with Remotion frame
+ * offsets.  Delegates ms-level computation to the shared
+ * `computeStepTimeline` utility (same math as browser playback).
+ *
+ * Ported from Stigmer's `video/lib/timeline.ts` — same conversion
+ * logic, same `Math.round` rounding for frame alignment.
+ */
+function buildTimeline(steps, narrationManifest, fps) {
+    const { stepStartTimesMs, totalDurationMs } = computeStepTimeline(steps, narrationManifest);
+    const stepStartFrames = stepStartTimesMs.map((ms) => msToFrames(ms, fps));
+    const durationInFrames = msToFrames(totalDurationMs, fps);
+    const audioClips = [];
+    if (narrationManifest) {
+        for (let i = 0; i < narrationManifest.steps.length; i++) {
+            const entry = narrationManifest.steps[i];
+            if (!entry)
+                continue;
+            audioClips.push({
+                stepIndex: i,
+                src: entry.src,
+                startFrame: stepStartFrames[i] ?? 0,
+                durationFrames: msToFrames(entry.durationMs, fps),
+            });
+        }
+    }
+    return {
+        stepStartTimesMs,
+        stepStartFrames,
+        audioClips,
+        totalDurationMs,
+        durationInFrames,
+        fps,
+    };
+}
+/**
+ * Convert Scenar's millisecond-based step timeline into Remotion frame
+ * counts.  The returned values are stable across renders for the same
+ * inputs.
+ *
+ * Use inside a Remotion component that needs timeline data.
+ */
+export function useScenarioTimeline(steps, narrationManifest, fps) {
+    return useMemo(() => buildTimeline(steps, narrationManifest, fps), [steps, narrationManifest, fps]);
+}
+/**
+ * Pure-function variant for use outside React (e.g. `calculateMetadata`,
+ * CLI render scripts, `<Composition>` durationInFrames).
+ */
+export function calculateScenarioTimeline(steps, narrationManifest, fps) {
+    return buildTimeline(steps, narrationManifest, fps);
+}
+//# sourceMappingURL=useScenarioTimeline.js.map

package/useScenarioTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScenarioTimeline.js","sourceRoot":"","sources":["../src/useScenarioTimeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAIL,mBAAmB,GACpB,MAAM,cAAc,CAAC;AAwBtB,SAAS,UAAU,CAAC,EAAU,EAAE,GAAW;IACzC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;AACvC,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,aAAa,CACpB,KAAuC,EACvC,iBAAuD,EACvD,GAAW;IAEX,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,mBAAmB,CAC/D,KAAK,EACL,iBAAiB,CAClB,CAAC;IAEF,MAAM,eAAe,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;IAC1E,MAAM,gBAAgB,GAAG,UAAU,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAgB,EAAE,CAAC;IACnC,IAAI,iBAAiB,EAAE,CAAC;QACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACxD,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACzC,IAAI,CAAC,KAAK;gBAAE,SAAS;YACrB,UAAU,CAAC,IAAI,CAAC;gBACd,SAAS,EAAE,CAAC;gBACZ,GAAG,EAAE,KAAK,CAAC,GAAG;gBACd,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC;gBACnC,cAAc,EAAE,UAAU,CAAC,KAAK,CAAC,UAAU,EAAE,GAAG,CAAC;aAClD,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,OAAO;QACL,gBAAgB;QAChB,eAAe;QACf,UAAU;QACV,eAAe;QACf,gBAAgB;QAChB,GAAG;KACJ,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAAuC,EACvC,iBAAuD,EACvD,GAAW;IAEX,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,CAAC,EAClD,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,CAAC,CAChC,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,yBAAyB,CACvC,KAAuC,EACvC,iBAAuD,EACvD,GAAW;IAEX,OAAO,aAAa,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,CAAC,CAAC;AACtD,CAAC"}