agent-screenplay 0.0.0-stage → 0.1.0

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.
Files changed (89) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +141 -2
  3. package/assets/editor/index.html +536 -0
  4. package/assets/fonts/Inter-Bold.ttf +0 -0
  5. package/assets/fonts/Inter-LICENSE.txt +92 -0
  6. package/assets/fonts/Inter-Medium.ttf +0 -0
  7. package/assets/fonts/Inter-Regular.ttf +0 -0
  8. package/assets/fonts/Inter-SemiBold.ttf +0 -0
  9. package/dist/cli.d.ts +2 -0
  10. package/dist/cli.js +163 -0
  11. package/dist/cli.js.map +1 -0
  12. package/dist/core.d.ts +16 -0
  13. package/dist/core.js +73 -0
  14. package/dist/core.js.map +1 -0
  15. package/dist/direct/plan.d.ts +100 -0
  16. package/dist/direct/plan.js +274 -0
  17. package/dist/direct/plan.js.map +1 -0
  18. package/dist/drivers/browser.d.ts +9 -0
  19. package/dist/drivers/browser.js +44 -0
  20. package/dist/drivers/browser.js.map +1 -0
  21. package/dist/drivers/desktop.d.ts +53 -0
  22. package/dist/drivers/desktop.js +650 -0
  23. package/dist/drivers/desktop.js.map +1 -0
  24. package/dist/drivers/pace.d.ts +11 -0
  25. package/dist/drivers/pace.js +44 -0
  26. package/dist/drivers/pace.js.map +1 -0
  27. package/dist/drivers/web.d.ts +37 -0
  28. package/dist/drivers/web.js +570 -0
  29. package/dist/drivers/web.js.map +1 -0
  30. package/dist/editor/server.d.ts +96 -0
  31. package/dist/editor/server.js +303 -0
  32. package/dist/editor/server.js.map +1 -0
  33. package/dist/ffmpeg.d.ts +5 -0
  34. package/dist/ffmpeg.js +44 -0
  35. package/dist/ffmpeg.js.map +1 -0
  36. package/dist/guide.d.ts +6 -0
  37. package/dist/guide.js +25 -0
  38. package/dist/guide.js.map +1 -0
  39. package/dist/init.d.ts +19 -0
  40. package/dist/init.js +147 -0
  41. package/dist/init.js.map +1 -0
  42. package/dist/login.d.ts +2 -0
  43. package/dist/login.js +50 -0
  44. package/dist/login.js.map +1 -0
  45. package/dist/mcp/server.d.ts +1 -0
  46. package/dist/mcp/server.js +132 -0
  47. package/dist/mcp/server.js.map +1 -0
  48. package/dist/render/compose.d.ts +68 -0
  49. package/dist/render/compose.js +361 -0
  50. package/dist/render/compose.js.map +1 -0
  51. package/dist/render/presets.d.ts +42 -0
  52. package/dist/render/presets.js +111 -0
  53. package/dist/render/presets.js.map +1 -0
  54. package/dist/render/render.d.ts +25 -0
  55. package/dist/render/render.js +257 -0
  56. package/dist/render/render.js.map +1 -0
  57. package/dist/render/sources.d.ts +15 -0
  58. package/dist/render/sources.js +146 -0
  59. package/dist/render/sources.js.map +1 -0
  60. package/dist/render/style.d.ts +37 -0
  61. package/dist/render/style.js +118 -0
  62. package/dist/render/style.js.map +1 -0
  63. package/dist/scenario/config.d.ts +43 -0
  64. package/dist/scenario/config.js +69 -0
  65. package/dist/scenario/config.js.map +1 -0
  66. package/dist/scenario/fingerprint.d.ts +10 -0
  67. package/dist/scenario/fingerprint.js +58 -0
  68. package/dist/scenario/fingerprint.js.map +1 -0
  69. package/dist/scenario/load.d.ts +36 -0
  70. package/dist/scenario/load.js +101 -0
  71. package/dist/scenario/load.js.map +1 -0
  72. package/dist/scenario/schema.d.ts +553 -0
  73. package/dist/scenario/schema.js +262 -0
  74. package/dist/scenario/schema.js.map +1 -0
  75. package/dist/scenario/target.d.ts +26 -0
  76. package/dist/scenario/target.js +40 -0
  77. package/dist/scenario/target.js.map +1 -0
  78. package/dist/take.d.ts +100 -0
  79. package/dist/take.js +15 -0
  80. package/dist/take.js.map +1 -0
  81. package/dist/version.d.ts +1 -0
  82. package/dist/version.js +2 -0
  83. package/dist/version.js.map +1 -0
  84. package/dist/voice/cartesia.d.ts +12 -0
  85. package/dist/voice/cartesia.js +103 -0
  86. package/dist/voice/cartesia.js.map +1 -0
  87. package/package.json +65 -4
  88. package/schema/scenario.schema.json +1098 -0
  89. package/skills/screenplay/SKILL.md +127 -0
package/assets/editor/index.html ADDED
@@ -0,0 +1,536 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Screenplay · Style</title>
7
+ <style>
8
+ :root {
9
+ --bg: #0a0a0b; --panel: #121214; --raised: #1a1a1d; --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.12);
10
+ --text: #ededef; --muted: #8b8b93; --faint: #5c5c63; --accent: #ffffff;
11
+ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1);
12
+ --r: 10px;
13
+ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
14
+ color: var(--text); background: var(--bg); color-scheme: dark;
15
+ -webkit-font-smoothing: antialiased;
16
+ }
17
+ * { box-sizing: border-box; }
18
+ html, body { margin: 0; height: 100%; overflow: hidden; }
19
+ button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
20
+ button:focus-visible, input:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }
21
+
22
+ .app { display: grid; grid-template-columns: 1fr 320px; height: 100%; }
23
+ .main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
24
+ .top { display: flex; align-items: center; gap: 10px; padding: 16px 24px; font-size: 13px; color: var(--muted); }
25
+ .top b { color: var(--text); font-weight: 600; }
26
+ .top .sep { color: var(--faint); }
27
+
28
+ /* Stage: the 16:9 composition, scaled to fit. */
29
+ .stage { position: relative; display: grid; place-items: center; padding: 8px 40px 16px; min-height: 0; }
30
+ .fit { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
31
+ .frame { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.5); }
32
+ .comp { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
33
+ .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 320ms var(--ease-out); }
34
+ .glow { position: absolute; inset: 0; background: radial-gradient(circle 1536px at 20% 10%, rgba(255,255,255,.18), rgba(255,255,255,0)); transition: opacity 320ms var(--ease-out); }
35
+ .win { position: absolute; overflow: hidden; background: #fff;
36
+ transition: left 280ms var(--ease-out), top 280ms var(--ease-out), width 280ms var(--ease-out), height 280ms var(--ease-out), border-radius 280ms var(--ease-out), box-shadow 280ms var(--ease-out); }
37
+ .live .win { transition: none; }
38
+ .win img { position: absolute; left: 0; width: 100%; display: block; }
39
+ .bar { position: absolute; left: 0; right: 0; top: 0; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; }
40
+ .bar i { width: 12px; height: 12px; border-radius: 50%; margin-left: 8px; }
41
+ .bar i:first-child { margin-left: 16px; }
42
+ .bar span { position: absolute; left: 25%; right: 25%; height: 24px; border-radius: 6px; background: #fff; font: 13px Inter, system-ui, sans-serif; color: #6b7280; display: grid; place-items: center; }
43
+ .placeholder { position: absolute; inset: 0; background: #f8fafc; }
44
+ .placeholder div { position: absolute; border-radius: 10px; background: #e2e8f0; }
45
+ .video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; opacity: 0; transform: scale(.985); pointer-events: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
46
+ .showVideo .video { opacity: 1; transform: none; pointer-events: auto; }
47
+
48
+ .under { display: flex; justify-content: center; gap: 12px; align-items: center; padding: 0 24px 20px; font-size: 12px; color: var(--muted); min-height: 52px; }
49
+
50
+ /* Sidebar */
51
+ .side { background: var(--panel); border-left: 1px solid var(--line); display: grid; grid-template-rows: 1fr auto; min-height: 0; }
52
+ .scroll { overflow-y: auto; padding: 20px 20px 8px; }
53
+ .section { padding: 4px 0 20px; animation: rise 420ms var(--ease-out) both; }
54
+ .section:nth-child(2) { animation-delay: 50ms; } .section:nth-child(3) { animation-delay: 100ms; }
55
+ @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
56
+ .label { font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; }
57
+ .label output { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); font-variant-numeric: tabular-nums; }
58
+
59
+ /* Segmented control with a sliding pill. */
60
+ .seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
61
+ .seg button { position: relative; z-index: 1; height: 28px; font-size: 13px; color: var(--muted); border-radius: 6px; transition: color 160ms ease; }
62
+ .seg button[aria-pressed="true"] { color: var(--text); }
63
+ .seg .pill { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 6px; background: var(--raised); box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(0,0,0,.4); transition: transform 240ms var(--ease-out); }
64
+
65
+ .pane { display: none; padding-top: 14px; }
66
+ .pane.on { display: block; animation: paneIn 220ms var(--ease-out); }
67
+ @keyframes paneIn { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } }
68
+
69
+ .swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
70
+ .sw { position: relative; aspect-ratio: 1; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform 160ms var(--ease-out); }
71
+ .sw:active { transform: scale(.94); }
72
+ .sw::after { content: ""; position: absolute; inset: -3px; border-radius: 10px; box-shadow: 0 0 0 2px var(--accent); opacity: 0; transform: scale(.92); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
73
+ .sw[aria-pressed="true"]::after { opacity: 1; transform: none; }
74
+ .sw.plus { display: grid; place-items: center; background: var(--raised); color: var(--muted); font-size: 18px; overflow: hidden; }
75
+ .sw.plus input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
76
+ @media (hover: hover) { .sw:hover { transform: translateY(-1px); } .sw:active { transform: scale(.94); } }
77
+
78
+ .stops { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
79
+ .stop { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 6px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); flex: 1; font: 12px ui-monospace, Menlo, monospace; color: var(--muted); }
80
+ .stop i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
81
+ .stop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
82
+ .swap { width: 28px; height: 28px; border-radius: 7px; color: var(--muted); display: grid; place-items: center; transition: transform 160ms var(--ease-out), color 160ms ease; }
83
+ .swap:hover { color: var(--text); } .swap:active { transform: scale(.92) rotate(180deg); }
84
+
85
+ .hex { margin-top: 12px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
86
+ .hex i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
87
+ .hex input { flex: 1; background: none; border: 0; color: var(--text); font: 12px ui-monospace, Menlo, monospace; outline: none; }
88
+
89
+ .drop { position: relative; display: grid; place-items: center; gap: 6px; height: 132px; border-radius: var(--r); border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; text-align: center; transition: border-color 160ms ease, background 160ms ease, transform 200ms var(--ease-out); overflow: hidden; }
90
+ .drop small { color: var(--faint); font-size: 12px; }
91
+ .drop.over { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.03); transform: scale(1.01); }
92
+ .drop .thumb { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 260ms var(--ease-out); }
93
+ .drop.has .thumb { opacity: 1; }
94
+ .drop.has .cta { position: absolute; bottom: 8px; left: 8px; right: 8px; padding: 6px 10px; border-radius: 7px; background: rgba(10,10,11,.72); backdrop-filter: blur(8px); font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
95
+ .drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
96
+
97
+ /* Sliders */
98
+ .range { position: relative; height: 22px; display: flex; align-items: center; }
99
+ .range input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
100
+ .range input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, #fff var(--p), rgba(255,255,255,.1) var(--p)); }
101
+ .range input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); }
102
+ .range input::-moz-range-progress { height: 4px; border-radius: 4px; background: #fff; }
103
+ .range input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); transition: transform 140ms var(--ease-out); }
104
+ .range input:active::-webkit-slider-thumb { transform: scale(1.15); }
105
+ .range input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
106
+ .row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
107
+ .dial { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; }
108
+ .dial::after { content: ""; position: absolute; left: 50%; top: 2px; width: 1.5px; height: 7px; margin-left: -.75px; border-radius: 1px; background: #fff; transform-origin: 50% 6px; transform: rotate(var(--a)); }
109
+
110
+ .switch { position: relative; width: 34px; height: 20px; border-radius: 20px; background: rgba(255,255,255,.12); transition: background 200ms ease; }
111
+ .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform 220ms var(--ease-out); }
112
+ .switch[aria-checked="true"] { background: #fff; }
113
+ .switch[aria-checked="true"]::after { transform: translateX(14px); background: #0a0a0b; }
114
+
115
+ /* Footer */
116
+ .foot { border-top: 1px solid var(--line); padding: 16px 20px 20px; display: grid; gap: 12px; background: var(--panel); }
117
+ .dest { font-size: 12px; color: var(--faint); min-height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
118
+ .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
119
+ .btn { position: relative; height: 36px; border-radius: 9px; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 160ms var(--ease-out), background 160ms ease, opacity 160ms ease; }
120
+ .btn:active:not(:disabled) { transform: scale(.97); }
121
+ .btn:disabled { opacity: .4; cursor: default; }
122
+ .btn.primary { background: #fff; color: #0a0a0b; }
123
+ .btn.ghost { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
124
+ .btn .txt { transition: opacity 200ms ease, filter 200ms ease; }
125
+ .btn.swapping .txt { opacity: 0; filter: blur(3px); }
126
+ .dirty { width: 6px; height: 6px; border-radius: 50%; background: #0a0a0b; opacity: 0; transform: scale(.5); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
127
+ .isDirty .dirty { opacity: .55; transform: none; }
128
+ .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 600ms linear infinite; }
129
+ @keyframes spin { to { transform: rotate(360deg); } }
130
+ kbd { font: 11px ui-monospace, Menlo, monospace; color: var(--faint); }
131
+
132
+ .toast { position: fixed; left: calc((100% - 320px) / 2); top: 14px; transform: translate(-50%, -8px); opacity: 0; padding: 9px 14px; border-radius: 10px; background: var(--raised); box-shadow: 0 0 0 1px var(--line-2), 0 10px 30px rgba(0,0,0,.5); font-size: 13px; pointer-events: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); max-width: 60vw; }
133
+ .toast.on { opacity: 1; transform: translate(-50%, 0); }
134
+ .toast.err { color: #fca5a5; }
135
+
136
+ .tabs { display: inline-grid; grid-auto-flow: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
137
+ .tabs button { height: 24px; padding: 0 10px; border-radius: 6px; font-size: 12px; color: var(--muted); transition: background 160ms ease, color 160ms ease; }
138
+ .tabs button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
139
+ .tabs button:disabled { opacity: .35; cursor: default; }
140
+
141
+ @media (prefers-reduced-motion: reduce) {
142
+ *, *::before, *::after { animation-duration: 1ms !important; transition-property: opacity, background, color !important; }
143
+ }
144
+ @media (max-width: 760px) { .app { grid-template-columns: 1fr; grid-template-rows: 46vh 1fr; } .side { border-left: 0; border-top: 1px solid var(--line); } .toast { left: 50%; } }
145
+ </style>
146
+ </head>
147
+ <body>
148
+ <div class="app">
149
+ <div class="main">
150
+ <div class="top"><b>Screenplay</b><span class="sep">/</span><span id="name"></span></div>
151
+ <div class="stage"><div class="fit" id="fit">
152
+ <div class="frame" id="frame">
153
+ <div class="comp" id="comp">
154
+ <div class="bg" id="bgA"></div><div class="bg" id="bgB" style="opacity:0"></div>
155
+ <div class="glow" id="glow"></div>
156
+ <div class="win" id="win"></div>
157
+ </div>
158
+ <video class="video" id="video" controls playsinline></video>
159
+ </div>
160
+ </div></div>
161
+ <div class="under">
162
+ <div class="tabs"><button id="tabPreview" aria-pressed="true">Preview</button><button id="tabVideo" disabled>Video</button></div>
163
+ <span id="hint"></span>
164
+ </div>
165
+ </div>
166
+
167
+ <aside class="side">
168
+ <div class="scroll">
169
+ <div class="section">
170
+ <p class="label">Background</p>
171
+ <div class="seg" id="bgKind"><span class="pill"></span>
172
+ <button data-k="gradient">Gradient</button><button data-k="color">Color</button><button data-k="image">Image</button>
173
+ </div>
174
+ <div class="pane" data-pane="gradient">
175
+ <div class="swatches" id="presets"></div>
176
+ <div class="stops">
177
+ <label class="stop"><i id="s1i"></i><span id="s1t"></span><input type="color" id="s1"></label>
178
+ <button class="swap" id="swap" title="Swap colors" aria-label="Swap colors">
179
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4.5h9.5M9 2l2.5 2.5L9 7M12 9.5H2.5M5 7 2.5 9.5 5 12"/></svg>
180
+ </button>
181
+ <label class="stop"><i id="s2i"></i><span id="s2t"></span><input type="color" id="s2"></label>
182
+ </div>
183
+ <div style="margin-top:16px">
184
+ <p class="label"><span>Direction</span><span style="display:flex;gap:8px;align-items:center"><span class="dial" id="dial"></span><output id="angleV"></output></span></p>
185
+ <div class="range"><input type="range" id="angle" min="0" max="360" step="5"></div>
186
+ </div>
187
+ </div>
188
+ <div class="pane" data-pane="color">
189
+ <div class="swatches" id="colors"></div>
190
+ <div class="hex"><i id="hexI"></i><input id="hex" spellcheck="false" maxlength="7" aria-label="Hex color"></div>
191
+ </div>
192
+ <div class="pane" data-pane="image">
193
+ <label class="drop" id="drop">
194
+ <div class="thumb" id="thumb"></div>
195
+ <svg class="ic" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2.5"/><path d="m3 14 4.5-4.5 3.5 3.5 2-2 4 4"/><circle cx="13.5" cy="7.5" r="1.25"/></svg>
196
+ <div class="cta" id="dropText">Drop an image, or click to choose<br><small>PNG, JPEG or WebP</small></div>
197
+ <input type="file" id="file" accept="image/png,image/jpeg,image/webp">
198
+ </label>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="section">
203
+ <p class="label"><span>Margin</span><output id="padV"></output></p>
204
+ <div class="range"><input type="range" id="pad" min="0" max="240" step="2"></div>
205
+ <p class="label" style="margin-top:18px"><span>Corners</span><output id="radV"></output></p>
206
+ <div class="range"><input type="range" id="rad" min="0" max="48" step="1"></div>
207
+ </div>
208
+
209
+ <div class="section">
210
+ <div class="row"><span>Shadow</span><button class="switch" id="shadow" role="switch" aria-label="Shadow"></button></div>
211
+ </div>
212
+ </div>
213
+
214
+ <div class="foot">
215
+ <div>
216
+ <p class="label">Apply to</p>
217
+ <div class="seg" id="target"><span class="pill"></span><button data-k="scenario">This video</button><button data-k="project">All videos</button></div>
218
+ </div>
219
+ <div class="dest" id="dest"></div>
220
+ <div class="actions">
221
+ <button class="btn ghost" id="renderBtn"><span class="txt">Render video</span></button>
222
+ <button class="btn primary" id="saveBtn"><span class="txt">Save</span><span class="dirty"></span></button>
223
+ </div>
224
+ </div>
225
+ </aside>
226
+ </div>
227
+ <div class="toast" id="toast"></div>
228
+
229
+ <script>
230
+ const TOKEN = "__TOKEN__";
231
+ const $ = (id) => document.getElementById(id);
232
+ const api = (p, o = {}) => fetch(p, { ...o, headers: { "x-token": TOKEN, ...(o.headers || {}) } });
233
+ const COLORS = ["#0a0a0a", "#0f172a", "#1e1b4b", "#f8fafc", "#f5f5f4", "#fef3c7", "#dbeafe", "#ede9fe", "#dcfce7"];
234
+
235
+ let S; // state from the server
236
+ let style; // what the editor shows: { background, padding, radius, shadow }
237
+ let saved; // last saved, to know if there are changes
238
+ let target = "scenario";
239
+ let imageRef = null; // { path, from } of the image background
240
+ let frameUrl = null;
241
+
242
+ const kindOf = (bg) => typeof bg === "object" ? "gradient" : S.presets[bg] ? "gradient" : /^#/.test(bg) ? "color" : "image";
243
+
244
+ async function load() {
245
+ S = await (await api("/api/state")).json();
246
+ $("name").textContent = S.name;
247
+ const eff = { ...S.defaults, ...S.projectStyle, ...S.scenarioStyle };
248
+ style = { background: eff.background, padding: eff.padding, radius: eff.radius, shadow: eff.shadow };
249
+ if (kindOf(style.background) === "image") imageRef = { path: style.background, from: S.scenarioStyle.background !== undefined ? "scenario" : "project" };
250
+ saved = JSON.stringify(style);
251
+ // A video that already has its own look keeps it; otherwise the look is for the whole project.
252
+ target = Object.keys(S.scenarioStyle).length ? "scenario" : "project";
253
+ const r = await api("/api/frame");
254
+ if (r.ok) frameUrl = URL.createObjectURL(await r.blob());
255
+ $("tabVideo").disabled = !S.hasVideo;
256
+ $("renderBtn").disabled = !S.hasTake;
257
+ $("hint").textContent = S.hasTake ? "A frame of your last recording" : "Record the scenario to preview a real frame";
258
+ buildSwatches();
259
+ setKind(kindOf(style.background), true);
260
+ setSeg($("target"), target);
261
+ draw(true);
262
+ sync();
263
+ }
264
+
265
+ /* ---------- composition: the same layout as the renderer ---------- */
266
+ function layout() {
267
+ const OW = S.output.width, OH = S.output.height, k = OH / 1080;
268
+ const cap = S.capture || { width: 1440, height: 900 };
269
+ const pad = style.padding * k, barH = S.frame === "browser" ? Math.round(40 * k) : 0;
270
+ const s = Math.min((OW - 2 * pad) / cap.width, (OH - 2 * pad - barH) / cap.height);
271
+ const cw = Math.round(cap.width * s), ch = Math.round(cap.height * s);
272
+ return { OW, OH, k, barH, x: Math.round((OW - cw) / 2), y: Math.round((OH - ch - barH) / 2), w: cw, h: ch + barH, ch };
273
+ }
274
+
275
+ function fitStage() {
276
+ const L = layout(), box = $("fit").getBoundingClientRect();
277
+ const sc = Math.min(box.width / L.OW, box.height / L.OH);
278
+ $("frame").style.width = L.OW * sc + "px"; $("frame").style.height = L.OH * sc + "px";
279
+ $("comp").style.width = L.OW + "px"; $("comp").style.height = L.OH + "px";
280
+ $("comp").style.transform = `scale(${sc})`;
281
+ }
282
+
283
+ function bgCss(bg) {
284
+ if (typeof bg === "object") return `linear-gradient(${bg.angle ?? 135}deg, ${bg.gradient.join(", ")})`;
285
+ const p = S.presets[bg];
286
+ if (p) return `linear-gradient(${p.angle}deg, ${p.stops.join(", ")})`;
287
+ if (/^#/.test(bg)) return bg;
288
+ if (imageRef) return `url("/api/image?t=${TOKEN}&from=${imageRef.from}&path=${encodeURIComponent(imageRef.path)}")`;
289
+ return "#111";
290
+ }
291
+
292
+ let front = "bgA", lastBg = "";
293
+ function draw(initial) {
294
+ const L = layout(), win = $("win");
295
+ const css = bgCss(style.background);
296
+ if (css !== lastBg) {
297
+ // Crossfade: the new background fades in over the old one.
298
+ const back = front === "bgA" ? "bgB" : "bgA";
299
+ $(back).style.background = css; $(back).style.backgroundSize = "cover"; $(back).style.backgroundPosition = "center";
300
+ if (initial) { $(back).style.transition = "none"; requestAnimationFrame(() => $(back).style.transition = ""); }
301
+ $(back).style.opacity = 1; $(front).style.opacity = 0; front = back; lastBg = css;
302
+ }
303
+ $("glow").style.opacity = kindOf(style.background) === "gradient" ? 1 : 0;
304
+ Object.assign(win.style, { left: L.x + "px", top: L.y + "px", width: L.w + "px", height: L.h + "px", borderRadius: style.radius * L.k + "px",
305
+ boxShadow: style.shadow ? `0 ${24 * L.k}px ${60 * L.k}px rgba(0,0,0,.35), 0 ${2 * L.k}px ${8 * L.k}px rgba(0,0,0,.18)` : "none" });
306
+ if (!win.dataset.built) {
307
+ win.dataset.built = 1;
308
+ let html = "";
309
+ if (L.barH) html += `<div class="bar" id="bar"><i style="background:#ff5f57"></i><i style="background:#febc2e"></i><i style="background:#28c840"></i>${S.url ? `<span>${new URL(S.url).host}</span>` : ""}</div>`;
310
+ html += frameUrl ? `<img id="shot" src="${frameUrl}" alt="">` :
311
+ `<div class="placeholder" id="shot"><div style="left:6%;top:9%;width:22%;height:6%"></div><div style="left:6%;top:22%;width:58%;height:30%"></div><div style="left:68%;top:22%;width:26%;height:30%"></div><div style="left:6%;top:58%;width:88%;height:26%"></div></div>`;
312
+ win.innerHTML = html;
313
+ }
314
+ const bar = $("bar"); if (bar) bar.style.height = L.barH + "px";
315
+ const shot = $("shot"); shot.style.top = L.barH + "px"; shot.style.height = L.ch + "px";
316
+ fitStage();
317
+ }
318
+
319
+ /* ---------- controls ---------- */
320
+ function setSeg(el, k) {
321
+ const btns = [...el.querySelectorAll("button")];
322
+ const i = Math.max(0, btns.findIndex((b) => b.dataset.k === k));
323
+ btns.forEach((b, j) => b.setAttribute("aria-pressed", String(i === j)));
324
+ const pill = el.querySelector(".pill");
325
+ pill.style.width = `calc((100% - 6px) / ${btns.length})`;
326
+ pill.style.transform = `translateX(${i * 100}%)`;
327
+ }
328
+
329
+ function setKind(k, initial) {
330
+ setSeg($("bgKind"), k);
331
+ document.querySelectorAll(".pane").forEach((p) => p.classList.toggle("on", p.dataset.pane === k));
332
+ if (initial) return;
333
+ const cur = style.background, curKind = kindOf(cur);
334
+ if (k === curKind) return;
335
+ if (k === "gradient") style.background = lastGradient || "ocean";
336
+ if (k === "color") style.background = lastColor || "#0f172a";
337
+ if (k === "image") { if (imageRef) style.background = imageRef.path; else { sync(); return; } }
338
+ change();
339
+ }
340
+ let lastGradient = null, lastColor = null;
341
+
342
+ function buildSwatches() {
343
+ const pre = $("presets");
344
+ for (const [name, p] of Object.entries(S.presets)) {
345
+ const b = document.createElement("button");
346
+ b.className = "sw"; b.dataset.v = name; b.title = name; b.setAttribute("aria-label", name);
347
+ b.style.background = `linear-gradient(${p.angle}deg, ${p.stops.join(", ")})`;
348
+ b.onclick = () => { style.background = name; change(); };
349
+ pre.appendChild(b);
350
+ }
351
+ const custom = document.createElement("button");
352
+ custom.className = "sw"; custom.id = "customGrad"; custom.title = "Your gradient"; custom.setAttribute("aria-label", "Your gradient");
353
+ custom.onclick = () => { style.background = customGradient(); change(); };
354
+ pre.appendChild(custom);
355
+ const col = $("colors");
356
+ for (const c of COLORS) {
357
+ const b = document.createElement("button");
358
+ b.className = "sw"; b.dataset.v = c; b.title = c; b.setAttribute("aria-label", c); b.style.background = c;
359
+ b.onclick = () => { style.background = c; change(); };
360
+ col.appendChild(b);
361
+ }
362
+ }
363
+
364
+ function currentStops() {
365
+ const bg = style.background;
366
+ if (typeof bg === "object") return { stops: bg.gradient, angle: bg.angle ?? 135 };
367
+ const p = S.presets[bg] || S.presets.ocean;
368
+ return { stops: [p.stops[0], p.stops[p.stops.length - 1]], angle: p.angle };
369
+ }
370
+ function customGradient() {
371
+ if (typeof style.background === "object") return style.background;
372
+ const c = currentStops();
373
+ return { gradient: [c.stops[0], c.stops[c.stops.length - 1]], angle: c.angle };
374
+ }
375
+ function setGradient(fn) {
376
+ const g = customGradient();
377
+ style.background = fn({ gradient: [...g.gradient], angle: g.angle ?? 135 });
378
+ change();
379
+ }
380
+
381
+ $("s1").oninput = (e) => setGradient((g) => (g.gradient[0] = e.target.value, g));
382
+ $("s2").oninput = (e) => setGradient((g) => (g.gradient[g.gradient.length - 1] = e.target.value, g));
383
+ $("swap").onclick = () => setGradient((g) => (g.gradient.reverse(), g));
384
+ $("angle").oninput = (e) => { live(); setGradient((g) => (g.angle = +e.target.value, g)); };
385
+ $("hex").onchange = (e) => { const v = e.target.value.trim(); if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v)) { style.background = v.toLowerCase(); change(); } else sync(); };
386
+ $("pad").oninput = (e) => { live(); style.padding = +e.target.value; change(); };
387
+ $("rad").oninput = (e) => { live(); style.radius = +e.target.value; change(); };
388
+ $("shadow").onclick = () => { style.shadow = !style.shadow; change(); };
389
+ $("bgKind").querySelectorAll("button").forEach((b) => (b.onclick = () => setKind(b.dataset.k)));
390
+ $("target").querySelectorAll("button").forEach((b) => (b.onclick = () => { target = b.dataset.k; setSeg($("target"), target); sync(); }));
391
+
392
+ // While a slider moves, the preview follows it directly; transitions come back once it stops.
393
+ let liveT;
394
+ function live() { document.body.classList.add("live"); clearTimeout(liveT); liveT = setTimeout(() => document.body.classList.remove("live"), 120); }
395
+
396
+ /* custom color tile in the color pane */
397
+ (function addColorPicker() {
398
+ const t = setInterval(() => {
399
+ if (!S) return; clearInterval(t);
400
+ const b = document.createElement("label");
401
+ b.className = "sw plus"; b.title = "Pick a color"; b.innerHTML = '+<input type="color" aria-label="Pick a color">';
402
+ b.querySelector("input").oninput = (e) => { style.background = e.target.value; change(); };
403
+ $("colors").appendChild(b);
404
+ }, 30);
405
+ })();
406
+
407
+ /* image: click, or drop anywhere */
408
+ async function upload(file) {
409
+ if (!file || !/^image\/(png|jpeg|webp)$/.test(file.type)) return toast("Use a PNG, JPEG or WebP image", true);
410
+ $("drop").classList.add("over");
411
+ const r = await api("/api/upload", { method: "POST", headers: { "x-filename": file.name }, body: file });
412
+ $("drop").classList.remove("over");
413
+ const j = await r.json();
414
+ if (!r.ok) return toast(j.error || "Upload failed", true);
415
+ imageRef = { path: j.path, from: "scenario" };
416
+ style.background = j.path;
417
+ setKind("image", true);
418
+ change();
419
+ }
420
+ $("file").onchange = (e) => upload(e.target.files[0]);
421
+ ["dragenter", "dragover"].forEach((ev) => addEventListener(ev, (e) => { e.preventDefault(); $("drop").classList.add("over"); if (kindOf(style.background) !== "image") setKind("image", true); }));
422
+ ["dragleave", "drop"].forEach((ev) => addEventListener(ev, (e) => { e.preventDefault(); if (ev === "drop" || !e.relatedTarget) $("drop").classList.remove("over"); }));
423
+ addEventListener("drop", (e) => upload(e.dataTransfer.files[0]));
424
+
425
+ function change() { draw(); sync(); }
426
+
427
+ /* reflect the style in the controls */
428
+ function sync() {
429
+ const bg = style.background, k = kindOf(bg);
430
+ if (k === "gradient") lastGradient = bg;
431
+ if (k === "color") lastColor = bg;
432
+ document.querySelectorAll("#presets .sw").forEach((b) => b.setAttribute("aria-pressed", String(typeof bg === "string" && b.dataset.v === bg)));
433
+ const cg = customGradient();
434
+ $("customGrad").style.background = `linear-gradient(${cg.angle ?? 135}deg, ${cg.gradient.join(", ")})`;
435
+ $("customGrad").setAttribute("aria-pressed", String(typeof bg === "object"));
436
+ const c = currentStops(), a = c.stops[0], z = c.stops[c.stops.length - 1];
437
+ $("s1").value = a; $("s1i").style.background = a; $("s1t").textContent = a;
438
+ $("s2").value = z; $("s2i").style.background = z; $("s2t").textContent = z;
439
+ $("angle").value = c.angle; $("angle").style.setProperty("--p", (100 * c.angle) / 360 + "%"); $("angleV").textContent = c.angle + "°"; $("dial").style.setProperty("--a", c.angle + "deg");
440
+ document.querySelectorAll("#colors .sw[data-v]").forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.v === bg)));
441
+ const hex = k === "color" ? bg : (lastColor || "#0f172a");
442
+ if (document.activeElement !== $("hex")) $("hex").value = hex;
443
+ $("hexI").style.background = hex;
444
+ const drop = $("drop");
445
+ drop.classList.toggle("has", Boolean(imageRef));
446
+ if (imageRef) { $("thumb").style.backgroundImage = bgCss(imageRef.path); $("dropText").textContent = imageRef.path.split(/[\\/]/).pop(); }
447
+ for (const [id, v, unit] of [["pad", style.padding, ""], ["rad", style.radius, ""]]) {
448
+ const el = $(id); el.value = v; el.style.setProperty("--p", (100 * (v - el.min)) / (el.max - el.min) + "%");
449
+ $(id + "V").textContent = v + unit;
450
+ }
451
+ $("shadow").setAttribute("aria-checked", String(style.shadow));
452
+ const file = target === "project" ? S.configFile : S.scenarioFile;
453
+ $("dest").textContent = (target === "project" ? (S.configExists ? "Saves to " : "Creates ") : "Saves to ") + file.split(/[\\/]/).pop();
454
+ $("dest").title = file;
455
+ document.body.classList.toggle("isDirty", JSON.stringify(style) !== saved);
456
+ $("saveBtn").classList.toggle("isDirty", JSON.stringify(style) !== saved);
457
+ }
458
+
459
+ /* ---------- save, render ---------- */
460
+ async function swapText(btn, html) {
461
+ btn.classList.add("swapping");
462
+ await new Promise((r) => setTimeout(r, 120));
463
+ btn.querySelector(".txt").innerHTML = html;
464
+ btn.classList.remove("swapping");
465
+ }
466
+
467
+ async function save() {
468
+ // One save at a time; a second click waits for the first.
469
+ if (save.pending) return save.pending;
470
+ save.pending = (async () => {
471
+ const btn = $("saveBtn");
472
+ btn.disabled = true;
473
+ // What is sent is what gets marked saved: edits made while saving stay unsaved.
474
+ const sent = JSON.stringify(style);
475
+ try {
476
+ const r = await api("/api/save", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ target, style: JSON.parse(sent) }) });
477
+ const j = await r.json();
478
+ if (!r.ok) { toast(j.error || "Could not save", true); return false; }
479
+ S = { ...S, ...j.state };
480
+ saved = sent;
481
+ sync();
482
+ await swapText(btn, "Saved");
483
+ setTimeout(() => swapText(btn, "Save"), 1400);
484
+ return true;
485
+ } finally {
486
+ btn.disabled = false;
487
+ }
488
+ })();
489
+ try { return await save.pending; } finally { save.pending = null; }
490
+ }
491
+ $("saveBtn").onclick = save;
492
+ addEventListener("keydown", (e) => { if ((e.metaKey || e.ctrlKey) && e.key === "s") { e.preventDefault(); save(); } });
493
+
494
+ $("renderBtn").onclick = async () => {
495
+ const btn = $("renderBtn");
496
+ if (JSON.stringify(style) !== saved && !(await save())) return;
497
+ if (JSON.stringify(style) !== saved) return toast("Save your latest changes first", true);
498
+ btn.disabled = true;
499
+ await swapText(btn, '<span class="spin"></span>Rendering…');
500
+ const r = await api("/api/render", { method: "POST" });
501
+ const j = await r.json();
502
+ btn.disabled = false;
503
+ await swapText(btn, "Render video");
504
+ if (!r.ok) return toast(j.error || "Render failed", true);
505
+ $("video").src = `/api/video?t=${TOKEN}&v=${j.at}`;
506
+ $("tabVideo").disabled = false;
507
+ showVideo(true);
508
+ $("video").play().catch(() => {});
509
+ toast(`Video ready · ${j.duration.toFixed(1)}s`);
510
+ };
511
+
512
+ function showVideo(on) {
513
+ $("frame").classList.toggle("showVideo", on);
514
+ $("tabPreview").setAttribute("aria-pressed", String(!on));
515
+ $("tabVideo").setAttribute("aria-pressed", String(on));
516
+ if (!on) $("video").pause();
517
+ else if (!$("video").src) $("video").src = `/api/video?t=${TOKEN}`;
518
+ }
519
+ $("tabPreview").onclick = () => showVideo(false);
520
+ $("tabVideo").onclick = () => showVideo(true);
521
+ document.addEventListener("input", () => showVideo(false), true);
522
+ document.addEventListener("click", (e) => { if (e.target.closest(".side") && !e.target.closest(".foot")) showVideo(false); }, true);
523
+
524
+ let toastT;
525
+ function toast(msg, err) {
526
+ const t = $("toast");
527
+ t.textContent = msg; t.classList.toggle("err", Boolean(err)); t.classList.add("on");
528
+ clearTimeout(toastT); toastT = setTimeout(() => t.classList.remove("on"), 2600);
529
+ }
530
+
531
+ addEventListener("resize", fitStage);
532
+ addEventListener("beforeunload", (e) => { if (S && JSON.stringify(style) !== saved) { e.preventDefault(); e.returnValue = ""; } });
533
+ load().catch((e) => toast(String(e.message || e), true));
534
+ </script>
535
+ </body>
536
+ </html>
package/assets/fonts/Inter-Bold.ttf ADDED
Binary file
package/assets/fonts/Inter-LICENSE.txt ADDED
@@ -0,0 +1,92 @@
1
+ Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
2
+
3
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
4
+ This license is copied below, and is also available with a FAQ at:
5
+ http://scripts.sil.org/OFL
6
+
7
+ -----------------------------------------------------------
8
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
9
+ -----------------------------------------------------------
10
+
11
+ PREAMBLE
12
+ The goals of the Open Font License (OFL) are to stimulate worldwide
13
+ development of collaborative font projects, to support the font creation
14
+ efforts of academic and linguistic communities, and to provide a free and
15
+ open framework in which fonts may be shared and improved in partnership
16
+ with others.
17
+
18
+ The OFL allows the licensed fonts to be used, studied, modified and
19
+ redistributed freely as long as they are not sold by themselves. The
20
+ fonts, including any derivative works, can be bundled, embedded,
21
+ redistributed and/or sold with any software provided that any reserved
22
+ names are not used by derivative works. The fonts and derivatives,
23
+ however, cannot be released under any other type of license. The
24
+ requirement for fonts to remain under this license does not apply
25
+ to any document created using the fonts or their derivatives.
26
+
27
+ DEFINITIONS
28
+ "Font Software" refers to the set of files released by the Copyright
29
+ Holder(s) under this license and clearly marked as such. This may
30
+ include source files, build scripts and documentation.
31
+
32
+ "Reserved Font Name" refers to any names specified as such after the
33
+ copyright statement(s).
34
+
35
+ "Original Version" refers to the collection of Font Software components as
36
+ distributed by the Copyright Holder(s).
37
+
38
+ "Modified Version" refers to any derivative made by adding to, deleting,
39
+ or substituting -- in part or in whole -- any of the components of the
40
+ Original Version, by changing formats or by porting the Font Software to a
41
+ new environment.
42
+
43
+ "Author" refers to any designer, engineer, programmer, technical
44
+ writer or other person who contributed to the Font Software.
45
+
46
+ PERMISSION AND CONDITIONS
47
+ Permission is hereby granted, free of charge, to any person obtaining
48
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
49
+ redistribute, and sell modified and unmodified copies of the Font
50
+ Software, subject to the following conditions:
51
+
52
+ 1) Neither the Font Software nor any of its individual components,
53
+ in Original or Modified Versions, may be sold by itself.
54
+
55
+ 2) Original or Modified Versions of the Font Software may be bundled,
56
+ redistributed and/or sold with any software, provided that each copy
57
+ contains the above copyright notice and this license. These can be
58
+ included either as stand-alone text files, human-readable headers or
59
+ in the appropriate machine-readable metadata fields within text or
60
+ binary files as long as those fields can be easily viewed by the user.
61
+
62
+ 3) No Modified Version of the Font Software may use the Reserved Font
63
+ Name(s) unless explicit written permission is granted by the corresponding
64
+ Copyright Holder. This restriction only applies to the primary font name as
65
+ presented to the users.
66
+
67
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
68
+ Software shall not be used to promote, endorse or advertise any
69
+ Modified Version, except to acknowledge the contribution(s) of the
70
+ Copyright Holder(s) and the Author(s) or with their explicit written
71
+ permission.
72
+
73
+ 5) The Font Software, modified or unmodified, in part or in whole,
74
+ must be distributed entirely under this license, and must not be
75
+ distributed under any other license. The requirement for fonts to
76
+ remain under this license does not apply to any document created
77
+ using the Font Software.
78
+
79
+ TERMINATION
80
+ This license becomes null and void if any of the above conditions are
81
+ not met.
82
+
83
+ DISCLAIMER
84
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
85
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
86
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
87
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
88
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
89
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
90
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
91
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
92
+ OTHER DEALINGS IN THE FONT SOFTWARE.
package/assets/fonts/Inter-Medium.ttf ADDED
Binary file
package/assets/fonts/Inter-Regular.ttf ADDED
Binary file
package/assets/fonts/Inter-SemiBold.ttf ADDED
Binary file
package/dist/cli.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ #!/usr/bin/env node
2
+ export {};