@editframe/react 0.47.1 → 0.47.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE-FULL.md +148 -0
- package/LICENSE.md +58 -0
- package/dist/r3f/CompositionCanvas.js +1 -0
- package/dist/r3f/CompositionCanvas.js.map +1 -1
- package/package.json +2 -2
package/LICENSE-FULL.md
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# Editframe SDK License Agreement
|
|
2
|
+
|
|
3
|
+
**Effective Date:** January 12, 2026 **Version:** 2.0
|
|
4
|
+
|
|
5
|
+
This License Agreement ("License") governs your use of the Editframe SDK. By downloading, accessing, or using the SDK, you agree to these terms.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 1. Definitions
|
|
10
|
+
|
|
11
|
+
**"Total Employees"** — All full-time employees, part-time employees, and contractor equivalents across your Organization and all affiliated entities under common control. Contractors are counted proportionally by time worked.
|
|
12
|
+
|
|
13
|
+
**"Organization"** — You, your company, and all affiliates, subsidiaries, or related entities under common control.
|
|
14
|
+
|
|
15
|
+
**"Client-Side SDK"** — The source-available browser-based video rendering components, including the custom video tag for local file playback.
|
|
16
|
+
|
|
17
|
+
**"Server-Side Rendering"** — Hosted cloud service for parallel rendering at scale, supporting simultaneous rendering of large volumes of videos including longer and more complex ones.
|
|
18
|
+
|
|
19
|
+
**"Premium Player"** — Cloud-based CDN streaming service with API-authenticated streaming capabilities, optimized for editing workflows.
|
|
20
|
+
|
|
21
|
+
**"Cloud Services"** — Server-Side Rendering and Premium Player collectively.
|
|
22
|
+
|
|
23
|
+
**"Commercial Use"** — Any use in connection with business operations, revenue-generating activities, or professional services, including internal tools, production environments, and client deliverables.
|
|
24
|
+
|
|
25
|
+
**"Evaluation Use"** — Good-faith testing and proof-of-concept development, limited to 30 days. Excludes production deployment and ongoing business use.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## 2. License Grant
|
|
30
|
+
|
|
31
|
+
### 2.1 Free Tier (≤3 Employees)
|
|
32
|
+
|
|
33
|
+
A limited, non-exclusive, non-transferable, revocable license to use the Client-Side SDK.
|
|
34
|
+
|
|
35
|
+
**Eligible:**
|
|
36
|
+
|
|
37
|
+
- Organizations with ≤3 total employees (Commercial Use permitted)
|
|
38
|
+
- Evaluation Use (any size, 30 days, non-production)
|
|
39
|
+
- Registered non-profits (any size)
|
|
40
|
+
- Accredited educational institutions
|
|
41
|
+
- Personal non-commercial projects
|
|
42
|
+
|
|
43
|
+
**Permitted:**
|
|
44
|
+
|
|
45
|
+
- Install and use the Client-Side SDK
|
|
46
|
+
- Use the custom video tag for local file playback (no API key required)
|
|
47
|
+
- Create and distribute video outputs for personal or Commercial Use
|
|
48
|
+
|
|
49
|
+
**Not included:** Cloud Services. Cloud Services require a Cloud Tier subscription regardless of company size.
|
|
50
|
+
|
|
51
|
+
### 2.2 Team Tier (4–10 Employees)
|
|
52
|
+
|
|
53
|
+
Includes all Free Tier rights. Full Client-Side SDK use for any business purpose including production. Does not include Cloud Services. See [editframe.com/pricing](https://editframe.com/pricing) for pricing.
|
|
54
|
+
|
|
55
|
+
### 2.3 Cloud Tier (11–20 Employees, or Any Size Requiring Cloud)
|
|
56
|
+
|
|
57
|
+
Required for organizations with 11–20 employees, or any organization using Cloud Services.
|
|
58
|
+
|
|
59
|
+
Includes all Team Tier rights, plus Server-Side Rendering and Premium Player via API. Usage-based billing applies in addition to base subscription. See [editframe.com/pricing](https://editframe.com/pricing) for pricing.
|
|
60
|
+
|
|
61
|
+
### 2.4 Enterprise (21+ Employees)
|
|
62
|
+
|
|
63
|
+
Contact [hello@editframe.com](mailto:hello@editframe.com). Includes all Cloud Tier features plus priority support and custom SLAs.
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## 3. Restrictions
|
|
68
|
+
|
|
69
|
+
### 3.1 Prohibited
|
|
70
|
+
|
|
71
|
+
- Do not offer the Client-Side SDK or CLI itself as a managed rendering API or infrastructure product to third parties
|
|
72
|
+
- Do not fork, redistribute, or sublicense the Client-Side SDK or CLI under different terms
|
|
73
|
+
- Do not use the SDK above your tier threshold without upgrading
|
|
74
|
+
- Do not share credentials or API keys across separate organizations
|
|
75
|
+
- Do not implement workarounds to avoid usage-based billing
|
|
76
|
+
- Do not reverse engineer, decompile, or extract proprietary algorithms from Server-Side Rendering or Premium Player
|
|
77
|
+
- Do not access Cloud Service APIs other than through official client libraries
|
|
78
|
+
- Do not disable, circumvent, or tamper with telemetry
|
|
79
|
+
- Do not remove or alter copyright notices or attribution
|
|
80
|
+
- Do not use the SDK for unlawful purposes or in violation of export control regulations
|
|
81
|
+
|
|
82
|
+
### 3.2 Permitted
|
|
83
|
+
|
|
84
|
+
- Build any product that creates, processes, or delivers video — editors, workflows, motion design tools, content automation, and more
|
|
85
|
+
- Integrate the Client-Side SDK into platforms, coding environments, vibe coding tools, and AI agents (end users are individually responsible for compliance)
|
|
86
|
+
- Use the Client-Side SDK in CI/CD pipelines and development environments, provided you are not using it to render production video at scale
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## 4. Intellectual Property
|
|
91
|
+
|
|
92
|
+
Editframe, Inc. retains all rights to the SDK. This License does not transfer ownership. You retain all rights to video outputs you create ("Your Content"). Feedback may be used by us without obligation.
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## 5. Telemetry
|
|
97
|
+
|
|
98
|
+
The SDK includes always-on telemetry collecting render counts, durations, IP addresses, domains, and feature usage. Telemetry cannot be disabled. Required for usage-based billing and license compliance. No video content is collected. See [editframe.com/privacy](https://editframe.com/privacy).
|
|
99
|
+
|
|
100
|
+
High Client-Side rendering volume does not trigger payment requirements — eligibility is determined by company size only.
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## 6. Support
|
|
105
|
+
|
|
106
|
+
- **Free:** Community support
|
|
107
|
+
- **Team/Cloud:** Email and Slack, 48-hour response
|
|
108
|
+
- **Enterprise:** Dedicated support, custom SLAs
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## 7. Warranties
|
|
113
|
+
|
|
114
|
+
THE SDK IS PROVIDED "AS IS" WITHOUT WARRANTIES OF ANY KIND. WE DO NOT WARRANT THAT THE SDK WILL BE ERROR-FREE, SECURE, OR UNINTERRUPTED. YOU ASSUME ALL RISKS.
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## 8. Limitation of Liability
|
|
119
|
+
|
|
120
|
+
WE SHALL NOT BE LIABLE FOR INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES. TOTAL LIABILITY SHALL NOT EXCEED AMOUNTS PAID IN THE 12 MONTHS PRECEDING THE CLAIM, OR $100 USD, WHICHEVER IS GREATER.
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
## 9. Termination
|
|
125
|
+
|
|
126
|
+
This License is effective upon first use. We may terminate immediately for breach, failure to maintain required subscription tier, or fraudulent conduct (10 days' notice where feasible). Upon termination, all rights cease and you must delete all SDK copies.
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## 10. Compliance
|
|
131
|
+
|
|
132
|
+
Self-report your employee count accurately. Violations may result in termination, back-payment of owed fees, liquidated damages (3× unpaid fees), and legal action. Voluntary disclosure may result in waived penalties.
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
## 11. General
|
|
137
|
+
|
|
138
|
+
- **Governing Law:** Delaware
|
|
139
|
+
- **Jurisdiction:** New York County, NY
|
|
140
|
+
- **Export Controls:** You must comply with U.S. Export Administration Regulations
|
|
141
|
+
- **Assignment:** You may not assign this License without written consent
|
|
142
|
+
- **Entire Agreement:** This License, Terms of Service, and Privacy Policy constitute the full agreement
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
[hello@editframe.com](mailto:hello@editframe.com) · editframe.com
|
|
147
|
+
|
|
148
|
+
**By using the SDK, you agree to these terms.**
|
package/LICENSE.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Editframe SDK License
|
|
2
|
+
|
|
3
|
+
The Editframe SDK is source-available and free for individuals and small teams, including for commercial use. We've kept the bar low intentionally — if you're building something, you should be able to just use it.
|
|
4
|
+
|
|
5
|
+
- [Free Tier](#free-tier)
|
|
6
|
+
- [Paid Tiers](#paid-tiers)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Free Tier
|
|
11
|
+
|
|
12
|
+
Copyright © 2026 [Editframe](https://editframe.com)
|
|
13
|
+
|
|
14
|
+
### Who Qualifies
|
|
15
|
+
|
|
16
|
+
- Individuals and freelancers
|
|
17
|
+
- Organizations with 3 or fewer total employees
|
|
18
|
+
- Non-profits and not-for-profit organizations (any size)
|
|
19
|
+
- Accredited educational institutions
|
|
20
|
+
- Organizations evaluating Editframe in good faith, prior to commercial deployment (30 days)
|
|
21
|
+
|
|
22
|
+
### What You Can Build
|
|
23
|
+
|
|
24
|
+
Use and modify the SDK to build any product that creates, processes, or delivers video — editors, workflows, motion design tools, content automation, and more. Platforms, coding environments, vibe coding tools, and AI agents may freely integrate the SDK. End users are each responsible for their own license compliance.
|
|
25
|
+
|
|
26
|
+
### What Is Not Permitted
|
|
27
|
+
|
|
28
|
+
You may not offer the Client-Side SDK or CLI itself as a managed rendering API or infrastructure product to third parties. You may not sell, sublicense, or redistribute the SDK or modifications to it as a standalone product.
|
|
29
|
+
|
|
30
|
+
### Warranty
|
|
31
|
+
|
|
32
|
+
The SDK is provided as-is without warranty of any kind. See the [Full License Agreement](./LICENSE-FULL.md) for complete terms.
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Paid Tiers
|
|
37
|
+
|
|
38
|
+
Organizations outside the Free Tier must subscribe to a paid plan.
|
|
39
|
+
|
|
40
|
+
| Tier | Employees |
|
|
41
|
+
| :---- | :---- |
|
|
42
|
+
| Team | 4–10 |
|
|
43
|
+
| Cloud | 11–20, or any size needing Cloud Rendering & Player |
|
|
44
|
+
| Enterprise | 21+ |
|
|
45
|
+
|
|
46
|
+
All paid tiers include full SDK rights.
|
|
47
|
+
|
|
48
|
+
Cloud Rendering & Player — parallel rendering and CDN streaming optimized for editing workflows — requires a Cloud Tier subscription regardless of company size.
|
|
49
|
+
|
|
50
|
+
[View pricing →](https://editframe.com/pricing) · Enterprise: [hello@editframe.com](mailto:hello@editframe.com)
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
Unsure which tier applies? See the [FAQ](https://editframe.com/faq) or reach out at [hello@editframe.com](mailto:hello@editframe.com).
|
|
55
|
+
|
|
56
|
+
[Full License Agreement](./LICENSE-FULL.md) · [Terms of Service](https://editframe.com/terms)
|
|
57
|
+
|
|
58
|
+
*© 2026 Editframe, Inc.*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompositionCanvas.js","names":[],"sources":["../../src/r3f/CompositionCanvas.tsx"],"sourcesContent":["/**\n * CompositionCanvas — R3F Canvas that automatically bridges\n * Editframe composition time into the 3D scene.\n *\n * Handles: addFrameTask → React state, preserveDrawingBuffer,\n * gl.finish(), frameloop=\"demand\", and invalidation.\n *\n * Usage:\n * ```tsx\n * <Timegroup mode=\"fixed\" duration=\"14s\">\n * <CompositionCanvas shadows>\n * <MyScene />\n * </CompositionCanvas>\n * </Timegroup>\n * ```\n *\n * Inside scene components, use `useCompositionTime()` to read the\n * current composition time in milliseconds.\n */\n\nimport * as React from \"react\";\nimport { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { Canvas, useThree, useFrame } from \"@react-three/fiber\";\nimport { flushSync } from \"react-dom\";\nimport type { CanvasProps } from \"@react-three/fiber\";\n\n/* ━━ Context for composition time ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nconst CompositionTimeContext = createContext<{\n timeMs: number;\n durationMs: number;\n}>({ timeMs: 0, durationMs: 0 });\n\n/**\n * Hook to read the current composition time inside an R3F scene.\n * Must be used within a `<CompositionCanvas>`.\n *\n * @returns { timeMs, durationMs } — current time and total duration in ms\n */\nexport function useCompositionTime() {\n return useContext(CompositionTimeContext);\n}\n\n/* ━━ Internal: GL sync for renderToVideo ━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nfunction GLSync() {\n const { gl } = useThree();\n useFrame(() => {\n gl.getContext().finish();\n });\n return null;\n}\n\n/* ━━ Internal: invalidate on time change ━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nfunction InvalidateOnTimeChange({ timeMs }: { timeMs: number }) {\n const { invalidate } = useThree();\n // useLayoutEffect fires synchronously during flushSync, ensuring\n // invalidate() runs before the addFrameTask callback returns.\n useLayoutEffect(() => {\n invalidate();\n }, [timeMs, invalidate]);\n return null;\n}\n\n/* ━━ CompositionCanvas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nexport interface CompositionCanvasProps extends Omit<CanvasProps, \"frameloop\"> {\n /** Extra styles for the container div */\n containerStyle?: React.CSSProperties;\n /** Extra className for the container div */\n containerClassName?: string;\n}\n\nexport function CompositionCanvas({\n children,\n containerStyle,\n containerClassName,\n gl: glProp,\n ...canvasProps\n}: CompositionCanvasProps) {\n const [timeMs, setTimeMs] = useState(0);\n const [durationMs, setDurationMs] = useState(0);\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n\n // Walk up to find the ef-timegroup ancestor\n const tg = el.closest(\"ef-timegroup\") as\n | (HTMLElement & {\n addFrameTask?: (\n cb: (info: { ownCurrentTimeMs: number; durationMs: number }) => void,\n ) => () => void;\n durationMs?: number;\n })\n | null;\n\n if (!tg) {\n console.warn(\n \"[CompositionCanvas] No ef-timegroup ancestor found. \" +\n \"Wrap CompositionCanvas inside a <Timegroup>.\",\n );\n return;\n }\n\n if (tg.durationMs) setDurationMs(tg.durationMs);\n\n const cleanup = tg.addFrameTask?.(({ ownCurrentTimeMs, durationMs: dur }) => {\n // flushSync commits the state update synchronously so the\n // useLayoutEffect → invalidate() fires before we return.\n // R3F's demand render then runs useFrame subscribers (which\n // update instancedMesh matrices, cameras, etc.) and gl.render\n // in a single pass — no duplicate GPU work.\n flushSync(() => {\n setTimeMs(ownCurrentTimeMs);\n setDurationMs(dur);\n });\n });\n\n return cleanup;\n }, []);\n\n // Merge user gl options with required defaults\n const mergedGl =\n typeof glProp === \"object\"\n ? { preserveDrawingBuffer: true, ...glProp }\n : (glProp ?? { preserveDrawingBuffer: true });\n\n return (\n <div\n ref={containerRef}\n className={containerClassName}\n style={{\n position: \"absolute\",\n inset: 0,\n width: \"100%\",\n height: \"100%\",\n ...containerStyle,\n }}\n >\n <Canvas\n frameloop=\"demand\"\n gl={mergedGl}\n {...canvasProps}\n style={{ width: \"100%\", height: \"100%\", ...canvasProps.style }}\n >\n <CompositionTimeContext.Provider value={{ timeMs, durationMs }}>\n <GLSync />\n <InvalidateOnTimeChange timeMs={timeMs} />\n {children}\n </CompositionTimeContext.Provider>\n </Canvas>\n </div>\n );\n}\n"],"mappings":";;;;;;AA4BA,MAAM,yBAAyB,cAG5B;CAAE,QAAQ;CAAG,YAAY;CAAG,CAAC;;;;;;;AAQhC,SAAgB,qBAAqB;AACnC,QAAO,WAAW,uBAAuB;;AAK3C,SAAS,SAAS;CAChB,MAAM,EAAE,OAAO,UAAU;AACzB,gBAAe;AACb,KAAG,YAAY,CAAC,QAAQ;GACxB;AACF,QAAO;;AAKT,SAAS,uBAAuB,EAAE,UAA8B;CAC9D,MAAM,EAAE,eAAe,UAAU;AAGjC,uBAAsB;AACpB,cAAY;IACX,CAAC,QAAQ,WAAW,CAAC;AACxB,QAAO;;AAYT,SAAgB,kBAAkB,EAChC,UACA,gBACA,oBACA,IAAI,OACJ,GAAG,eACsB;CACzB,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,eAAe,OAAuB,KAAK;AAEjD,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EAGT,MAAM,KAAK,GAAG,QAAQ,eAAe;AASrC,MAAI,CAAC,IAAI;AACP,WAAQ,KACN,mGAED;AACD;;AAGF,MAAI,GAAG,WAAY,eAAc,GAAG,WAAW;AAc/C,SAZgB,GAAG,gBAAgB,EAAE,kBAAkB,YAAY,UAAU;AAM3E,mBAAgB;AACd,cAAU,iBAAiB;AAC3B,kBAAc,IAAI;KAClB;IACF;IAGD,EAAE,CAAC;CAGN,MAAM,WACJ,OAAO,WAAW,WACd;EAAE,uBAAuB;EAAM,GAAG;EAAQ,GACzC,UAAU,EAAE,uBAAuB,MAAM;AAEhD,QACE,oBAAC;EACC,KAAK;EACL,WAAW;EACX,OAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACP,QAAQ;GACR,GAAG;GACJ;YAED,oBAAC;GACC,WAAU;GACV,IAAI;
|
|
1
|
+
{"version":3,"file":"CompositionCanvas.js","names":[],"sources":["../../src/r3f/CompositionCanvas.tsx"],"sourcesContent":["/**\n * CompositionCanvas — R3F Canvas that automatically bridges\n * Editframe composition time into the 3D scene.\n *\n * Handles: addFrameTask → React state, preserveDrawingBuffer,\n * gl.finish(), frameloop=\"demand\", and invalidation.\n *\n * Usage:\n * ```tsx\n * <Timegroup mode=\"fixed\" duration=\"14s\">\n * <CompositionCanvas shadows>\n * <MyScene />\n * </CompositionCanvas>\n * </Timegroup>\n * ```\n *\n * Inside scene components, use `useCompositionTime()` to read the\n * current composition time in milliseconds.\n */\n\nimport * as React from \"react\";\nimport { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { Canvas, useThree, useFrame } from \"@react-three/fiber\";\nimport { flushSync } from \"react-dom\";\nimport type { CanvasProps } from \"@react-three/fiber\";\n\n/* ━━ Context for composition time ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nconst CompositionTimeContext = createContext<{\n timeMs: number;\n durationMs: number;\n}>({ timeMs: 0, durationMs: 0 });\n\n/**\n * Hook to read the current composition time inside an R3F scene.\n * Must be used within a `<CompositionCanvas>`.\n *\n * @returns { timeMs, durationMs } — current time and total duration in ms\n */\nexport function useCompositionTime() {\n return useContext(CompositionTimeContext);\n}\n\n/* ━━ Internal: GL sync for renderToVideo ━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nfunction GLSync() {\n const { gl } = useThree();\n useFrame(() => {\n gl.getContext().finish();\n });\n return null;\n}\n\n/* ━━ Internal: invalidate on time change ━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nfunction InvalidateOnTimeChange({ timeMs }: { timeMs: number }) {\n const { invalidate } = useThree();\n // useLayoutEffect fires synchronously during flushSync, ensuring\n // invalidate() runs before the addFrameTask callback returns.\n useLayoutEffect(() => {\n invalidate();\n }, [timeMs, invalidate]);\n return null;\n}\n\n/* ━━ CompositionCanvas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nexport interface CompositionCanvasProps extends Omit<CanvasProps, \"frameloop\"> {\n /** Extra styles for the container div */\n containerStyle?: React.CSSProperties;\n /** Extra className for the container div */\n containerClassName?: string;\n}\n\nexport function CompositionCanvas({\n children,\n containerStyle,\n containerClassName,\n gl: glProp,\n ...canvasProps\n}: CompositionCanvasProps) {\n const [timeMs, setTimeMs] = useState(0);\n const [durationMs, setDurationMs] = useState(0);\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n\n // Walk up to find the ef-timegroup ancestor\n const tg = el.closest(\"ef-timegroup\") as\n | (HTMLElement & {\n addFrameTask?: (\n cb: (info: { ownCurrentTimeMs: number; durationMs: number }) => void,\n ) => () => void;\n durationMs?: number;\n })\n | null;\n\n if (!tg) {\n console.warn(\n \"[CompositionCanvas] No ef-timegroup ancestor found. \" +\n \"Wrap CompositionCanvas inside a <Timegroup>.\",\n );\n return;\n }\n\n if (tg.durationMs) setDurationMs(tg.durationMs);\n\n const cleanup = tg.addFrameTask?.(({ ownCurrentTimeMs, durationMs: dur }) => {\n // flushSync commits the state update synchronously so the\n // useLayoutEffect → invalidate() fires before we return.\n // R3F's demand render then runs useFrame subscribers (which\n // update instancedMesh matrices, cameras, etc.) and gl.render\n // in a single pass — no duplicate GPU work.\n flushSync(() => {\n setTimeMs(ownCurrentTimeMs);\n setDurationMs(dur);\n });\n });\n\n return cleanup;\n }, []);\n\n // Merge user gl options with required defaults\n const mergedGl =\n typeof glProp === \"object\"\n ? { preserveDrawingBuffer: true, ...glProp }\n : (glProp ?? { preserveDrawingBuffer: true });\n\n return (\n <div\n ref={containerRef}\n className={containerClassName}\n style={{\n position: \"absolute\",\n inset: 0,\n width: \"100%\",\n height: \"100%\",\n ...containerStyle,\n }}\n >\n <Canvas\n frameloop=\"demand\"\n gl={mergedGl}\n // offsetSize: true makes R3F measure offsetWidth/offsetHeight instead of\n // getBoundingClientRect. This is required when the canvas sits inside a\n // FitScale (CSS transform: scale) context — getBoundingClientRect returns\n // the scaled-down pixel rect, causing R3F to allocate a small drawing\n // buffer and render the scene into the top-left corner of it.\n // offsetWidth/offsetHeight are unaffected by CSS transforms, so they\n // always return the logical composition size (e.g. 960×540) and the\n // scene fills the full canvas regardless of the display scale factor.\n resize={{ offsetSize: true }}\n {...canvasProps}\n style={{ width: \"100%\", height: \"100%\", ...canvasProps.style }}\n >\n <CompositionTimeContext.Provider value={{ timeMs, durationMs }}>\n <GLSync />\n <InvalidateOnTimeChange timeMs={timeMs} />\n {children}\n </CompositionTimeContext.Provider>\n </Canvas>\n </div>\n );\n}\n"],"mappings":";;;;;;AA4BA,MAAM,yBAAyB,cAG5B;CAAE,QAAQ;CAAG,YAAY;CAAG,CAAC;;;;;;;AAQhC,SAAgB,qBAAqB;AACnC,QAAO,WAAW,uBAAuB;;AAK3C,SAAS,SAAS;CAChB,MAAM,EAAE,OAAO,UAAU;AACzB,gBAAe;AACb,KAAG,YAAY,CAAC,QAAQ;GACxB;AACF,QAAO;;AAKT,SAAS,uBAAuB,EAAE,UAA8B;CAC9D,MAAM,EAAE,eAAe,UAAU;AAGjC,uBAAsB;AACpB,cAAY;IACX,CAAC,QAAQ,WAAW,CAAC;AACxB,QAAO;;AAYT,SAAgB,kBAAkB,EAChC,UACA,gBACA,oBACA,IAAI,OACJ,GAAG,eACsB;CACzB,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,eAAe,OAAuB,KAAK;AAEjD,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EAGT,MAAM,KAAK,GAAG,QAAQ,eAAe;AASrC,MAAI,CAAC,IAAI;AACP,WAAQ,KACN,mGAED;AACD;;AAGF,MAAI,GAAG,WAAY,eAAc,GAAG,WAAW;AAc/C,SAZgB,GAAG,gBAAgB,EAAE,kBAAkB,YAAY,UAAU;AAM3E,mBAAgB;AACd,cAAU,iBAAiB;AAC3B,kBAAc,IAAI;KAClB;IACF;IAGD,EAAE,CAAC;CAGN,MAAM,WACJ,OAAO,WAAW,WACd;EAAE,uBAAuB;EAAM,GAAG;EAAQ,GACzC,UAAU,EAAE,uBAAuB,MAAM;AAEhD,QACE,oBAAC;EACC,KAAK;EACL,WAAW;EACX,OAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACP,QAAQ;GACR,GAAG;GACJ;YAED,oBAAC;GACC,WAAU;GACV,IAAI;GASJ,QAAQ,EAAE,YAAY,MAAM;GAC5B,GAAI;GACJ,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ,GAAG,YAAY;IAAO;aAE9D,qBAAC,uBAAuB;IAAS,OAAO;KAAE;KAAQ;KAAY;;KAC5D,oBAAC,WAAS;KACV,oBAAC,0BAA+B,SAAU;KACzC;;KAC+B;IAC3B;GACL"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@editframe/react",
|
|
3
|
-
"version": "0.47.
|
|
3
|
+
"version": "0.47.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"author": "",
|
|
40
40
|
"license": "SEE LICENSE IN LICENSE-FULL.md",
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@editframe/elements": "0.47.
|
|
42
|
+
"@editframe/elements": "0.47.2",
|
|
43
43
|
"lit": "^3.3.1",
|
|
44
44
|
"mitt": "^3.0.1"
|
|
45
45
|
},
|