frameyard 0.8.0 → 0.10.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 (327) hide show
  1. package/CHANGELOG.md +177 -14
  2. package/GLOSSARY.md +112 -2
  3. package/README.md +302 -265
  4. package/dist/assets/integrations.d.ts +8 -4
  5. package/dist/assets/integrations.d.ts.map +1 -1
  6. package/dist/assets/integrations.js +8 -4
  7. package/dist/assets/integrations.js.map +1 -1
  8. package/dist/assets/provenance.d.ts +2 -2
  9. package/dist/assets/provenance.d.ts.map +1 -1
  10. package/dist/assets/provenance.js +5 -3
  11. package/dist/assets/provenance.js.map +1 -1
  12. package/dist/assets/tts-supertonic.d.ts +28 -0
  13. package/dist/assets/tts-supertonic.d.ts.map +1 -0
  14. package/dist/assets/tts-supertonic.js +156 -0
  15. package/dist/assets/tts-supertonic.js.map +1 -0
  16. package/dist/assets/tts.d.ts +18 -6
  17. package/dist/assets/tts.d.ts.map +1 -1
  18. package/dist/assets/tts.js +219 -97
  19. package/dist/assets/tts.js.map +1 -1
  20. package/dist/cli.js +1685 -93
  21. package/dist/cli.js.map +1 -1
  22. package/dist/composition/format.d.ts +1 -1
  23. package/dist/composition/format.d.ts.map +1 -1
  24. package/dist/composition/format.js +1 -1
  25. package/dist/composition/format.js.map +1 -1
  26. package/dist/context.d.ts +82 -0
  27. package/dist/context.d.ts.map +1 -0
  28. package/dist/context.js +277 -0
  29. package/dist/context.js.map +1 -0
  30. package/dist/contracts.d.ts +25 -0
  31. package/dist/contracts.d.ts.map +1 -1
  32. package/dist/contracts.js.map +1 -1
  33. package/dist/doctor.d.ts +14 -1
  34. package/dist/doctor.d.ts.map +1 -1
  35. package/dist/doctor.js +166 -7
  36. package/dist/doctor.js.map +1 -1
  37. package/dist/errors.d.ts +1 -1
  38. package/dist/errors.d.ts.map +1 -1
  39. package/dist/errors.js.map +1 -1
  40. package/dist/fonts/add.d.ts +41 -0
  41. package/dist/fonts/add.d.ts.map +1 -0
  42. package/dist/fonts/add.js +259 -0
  43. package/dist/fonts/add.js.map +1 -0
  44. package/dist/fonts/binary.d.ts +4 -0
  45. package/dist/fonts/binary.d.ts.map +1 -0
  46. package/dist/fonts/binary.js +21 -0
  47. package/dist/fonts/binary.js.map +1 -0
  48. package/dist/fonts/css.d.ts +4 -0
  49. package/dist/fonts/css.d.ts.map +1 -0
  50. package/dist/fonts/css.js +50 -0
  51. package/dist/fonts/css.js.map +1 -0
  52. package/dist/fonts/fontsource.d.ts +107 -0
  53. package/dist/fonts/fontsource.d.ts.map +1 -0
  54. package/dist/fonts/fontsource.js +565 -0
  55. package/dist/fonts/fontsource.js.map +1 -0
  56. package/dist/fonts/index.d.ts +11 -0
  57. package/dist/fonts/index.d.ts.map +1 -0
  58. package/dist/fonts/index.js +11 -0
  59. package/dist/fonts/index.js.map +1 -0
  60. package/dist/fonts/install.d.ts +24 -0
  61. package/dist/fonts/install.d.ts.map +1 -0
  62. package/dist/fonts/install.js +145 -0
  63. package/dist/fonts/install.js.map +1 -0
  64. package/dist/fonts/manifest.d.ts +21 -0
  65. package/dist/fonts/manifest.d.ts.map +1 -0
  66. package/dist/fonts/manifest.js +96 -0
  67. package/dist/fonts/manifest.js.map +1 -0
  68. package/dist/fonts/options.d.ts +9 -0
  69. package/dist/fonts/options.d.ts.map +1 -0
  70. package/dist/fonts/options.js +66 -0
  71. package/dist/fonts/options.js.map +1 -0
  72. package/dist/fonts/schema.d.ts +4 -0
  73. package/dist/fonts/schema.d.ts.map +1 -0
  74. package/dist/fonts/schema.js +316 -0
  75. package/dist/fonts/schema.js.map +1 -0
  76. package/dist/fonts/summary.d.ts +16 -0
  77. package/dist/fonts/summary.d.ts.map +1 -0
  78. package/dist/fonts/summary.js +22 -0
  79. package/dist/fonts/summary.js.map +1 -0
  80. package/dist/fonts/types.d.ts +56 -0
  81. package/dist/fonts/types.d.ts.map +1 -0
  82. package/dist/fonts/types.js +8 -0
  83. package/dist/fonts/types.js.map +1 -0
  84. package/dist/fonts/verify.d.ts +33 -0
  85. package/dist/fonts/verify.d.ts.map +1 -0
  86. package/dist/fonts/verify.js +200 -0
  87. package/dist/fonts/verify.js.map +1 -0
  88. package/dist/html/validate.d.ts.map +1 -1
  89. package/dist/html/validate.js +59 -0
  90. package/dist/html/validate.js.map +1 -1
  91. package/dist/index.d.ts +3 -3
  92. package/dist/index.d.ts.map +1 -1
  93. package/dist/index.js +1 -1
  94. package/dist/index.js.map +1 -1
  95. package/dist/inspect.d.ts +61 -0
  96. package/dist/inspect.d.ts.map +1 -0
  97. package/dist/inspect.js +325 -0
  98. package/dist/inspect.js.map +1 -0
  99. package/dist/lint.d.ts +63 -0
  100. package/dist/lint.d.ts.map +1 -0
  101. package/dist/lint.js +265 -0
  102. package/dist/lint.js.map +1 -0
  103. package/dist/policy.d.ts +69 -0
  104. package/dist/policy.d.ts.map +1 -0
  105. package/dist/policy.js +361 -0
  106. package/dist/policy.js.map +1 -0
  107. package/dist/preview/fonts/LICENSE-figtree.txt +93 -0
  108. package/dist/preview/fonts/LICENSE-space-mono.txt +93 -0
  109. package/dist/preview/fonts/README.md +23 -0
  110. package/dist/preview/fonts/figtree-latin-wght-normal.woff2 +0 -0
  111. package/dist/preview/fonts/space-mono-latin-400-normal.woff2 +0 -0
  112. package/dist/preview/fonts/space-mono-latin-700-normal.woff2 +0 -0
  113. package/dist/preview/main.js +5 -2
  114. package/dist/preview/main.js.map +1 -1
  115. package/dist/preview/timeline-data.d.ts +17 -69
  116. package/dist/preview/timeline-data.d.ts.map +1 -1
  117. package/dist/preview/timeline-host.d.ts.map +1 -1
  118. package/dist/preview/timeline-host.js +70 -45
  119. package/dist/preview/timeline-host.js.map +1 -1
  120. package/dist/preview/timeline-main.d.ts.map +1 -1
  121. package/dist/preview/timeline-main.js +88 -27
  122. package/dist/preview/timeline-main.js.map +1 -1
  123. package/dist/project.d.ts +10 -3
  124. package/dist/project.d.ts.map +1 -1
  125. package/dist/project.js +20 -17
  126. package/dist/project.js.map +1 -1
  127. package/dist/renderer/audio.d.ts +6 -0
  128. package/dist/renderer/audio.d.ts.map +1 -1
  129. package/dist/renderer/audio.js +3 -1
  130. package/dist/renderer/audio.js.map +1 -1
  131. package/dist/renderer/browser.d.ts.map +1 -1
  132. package/dist/renderer/browser.js +13 -0
  133. package/dist/renderer/browser.js.map +1 -1
  134. package/dist/renderer/concurrency.d.ts +6 -0
  135. package/dist/renderer/concurrency.d.ts.map +1 -0
  136. package/dist/renderer/concurrency.js +27 -0
  137. package/dist/renderer/concurrency.js.map +1 -0
  138. package/dist/renderer/ffmpeg.d.ts +104 -5
  139. package/dist/renderer/ffmpeg.d.ts.map +1 -1
  140. package/dist/renderer/ffmpeg.js +580 -67
  141. package/dist/renderer/ffmpeg.js.map +1 -1
  142. package/dist/renderer/index.js +1 -1
  143. package/dist/renderer/index.js.map +1 -1
  144. package/dist/renderer/keyframe-expressions.d.ts +39 -0
  145. package/dist/renderer/keyframe-expressions.d.ts.map +1 -0
  146. package/dist/renderer/keyframe-expressions.js +180 -0
  147. package/dist/renderer/keyframe-expressions.js.map +1 -0
  148. package/dist/renderer/session-pool.d.ts +28 -0
  149. package/dist/renderer/session-pool.d.ts.map +1 -0
  150. package/dist/renderer/session-pool.js +91 -0
  151. package/dist/renderer/session-pool.js.map +1 -0
  152. package/dist/renderer/timeline.d.ts +2 -0
  153. package/dist/renderer/timeline.d.ts.map +1 -1
  154. package/dist/renderer/timeline.js +600 -147
  155. package/dist/renderer/timeline.js.map +1 -1
  156. package/dist/renderer/timings.d.ts +13 -0
  157. package/dist/renderer/timings.d.ts.map +1 -0
  158. package/dist/renderer/timings.js +29 -0
  159. package/dist/renderer/timings.js.map +1 -0
  160. package/dist/runtime/host.d.ts.map +1 -1
  161. package/dist/runtime/host.js +4 -0
  162. package/dist/runtime/host.js.map +1 -1
  163. package/dist/scaffold.d.ts +3 -0
  164. package/dist/scaffold.d.ts.map +1 -1
  165. package/dist/scaffold.js +48 -320
  166. package/dist/scaffold.js.map +1 -1
  167. package/dist/server/composition-html.d.ts +2 -0
  168. package/dist/server/composition-html.d.ts.map +1 -1
  169. package/dist/server/composition-html.js +7 -0
  170. package/dist/server/composition-html.js.map +1 -1
  171. package/dist/server/preview-html.d.ts.map +1 -1
  172. package/dist/server/preview-html.js +74 -188
  173. package/dist/server/preview-html.js.map +1 -1
  174. package/dist/server/preview-style.d.ts +11 -0
  175. package/dist/server/preview-style.d.ts.map +1 -0
  176. package/dist/server/preview-style.js +298 -0
  177. package/dist/server/preview-style.js.map +1 -0
  178. package/dist/server/server.d.ts.map +1 -1
  179. package/dist/server/server.js +31 -1
  180. package/dist/server/server.js.map +1 -1
  181. package/dist/server/timeline-preview-data.d.ts.map +1 -1
  182. package/dist/server/timeline-preview-data.js +12 -34
  183. package/dist/server/timeline-preview-data.js.map +1 -1
  184. package/dist/server/timeline-preview-html.d.ts.map +1 -1
  185. package/dist/server/timeline-preview-html.js +140 -148
  186. package/dist/server/timeline-preview-html.js.map +1 -1
  187. package/dist/templates.d.ts +16 -0
  188. package/dist/templates.d.ts.map +1 -0
  189. package/dist/templates.js +186 -0
  190. package/dist/templates.js.map +1 -0
  191. package/dist/timeline/easing.d.ts +36 -0
  192. package/dist/timeline/easing.d.ts.map +1 -0
  193. package/dist/timeline/easing.js +225 -0
  194. package/dist/timeline/easing.js.map +1 -0
  195. package/dist/timeline/keyframes.d.ts +23 -0
  196. package/dist/timeline/keyframes.d.ts.map +1 -0
  197. package/dist/timeline/keyframes.js +95 -0
  198. package/dist/timeline/keyframes.js.map +1 -0
  199. package/dist/timeline/plan.d.ts +6 -12
  200. package/dist/timeline/plan.d.ts.map +1 -1
  201. package/dist/timeline/plan.js +17 -30
  202. package/dist/timeline/plan.js.map +1 -1
  203. package/dist/timeline/resolve.d.ts +12 -0
  204. package/dist/timeline/resolve.d.ts.map +1 -1
  205. package/dist/timeline/resolve.js +105 -9
  206. package/dist/timeline/resolve.js.map +1 -1
  207. package/dist/timeline/scene.d.ts +126 -0
  208. package/dist/timeline/scene.d.ts.map +1 -0
  209. package/dist/timeline/scene.js +109 -0
  210. package/dist/timeline/scene.js.map +1 -0
  211. package/dist/timeline/schema.d.ts +31 -0
  212. package/dist/timeline/schema.d.ts.map +1 -1
  213. package/dist/timeline/schema.js +240 -9
  214. package/dist/timeline/schema.js.map +1 -1
  215. package/dist/timeline/transitions.d.ts +21 -0
  216. package/dist/timeline/transitions.d.ts.map +1 -0
  217. package/dist/timeline/transitions.js +23 -0
  218. package/dist/timeline/transitions.js.map +1 -0
  219. package/dist/version.d.ts +1 -1
  220. package/dist/version.d.ts.map +1 -1
  221. package/dist/version.js +1 -1
  222. package/dist/version.js.map +1 -1
  223. package/docs/adr/0007-make-html-documents-the-composition-unit.md +1 -1
  224. package/docs/adr/0010-make-timelines-the-render-unit.md +3 -2
  225. package/docs/adr/0012-render-timelines-with-segmented-lossless-clip-intermediates.md +1 -1
  226. package/docs/adr/0014-compose-timeline-clips-with-css-blend-modes.md +2 -1
  227. package/docs/adr/0015-inherit-composition-format-from-the-project.md +2 -2
  228. package/docs/adr/0016-author-compositions-as-html-fragments.md +1 -1
  229. package/docs/adr/0018-animate-timeline-clips-with-keyframes.md +35 -0
  230. package/docs/adr/0019-make-same-track-overlap-the-transition-window.md +36 -0
  231. package/docs/adr/0020-crossfade-audio-clips-on-audio-tracks.md +27 -0
  232. package/docs/adr/0021-project-timeline-scenes-once.md +32 -0
  233. package/docs/adr/0022-gate-heavy-operations-with-a-workspace-resource-policy.md +35 -0
  234. package/docs/adr/0023-pin-fonts-as-project-assets.md +98 -0
  235. package/docs/adr/0024-stream-composition-captures-and-skip-trivial-composites.md +86 -0
  236. package/docs/adr/0025-capture-timeline-layers-in-parallel-with-a-global-limit.md +67 -0
  237. package/docs/adr/0026-reuse-loaded-composition-sessions-across-segments.md +70 -0
  238. package/docs/adr/0027-encode-two-full-frame-layers-through-dual-pipes.md +76 -0
  239. package/docs/adr/0028-encode-full-frame-video-segments-directly.md +65 -0
  240. package/docs/migration-0.4.md +2 -2
  241. package/docs/preview-testing.md +27 -6
  242. package/docs/{v0.1-design.md → v0.x-design.md} +57 -32
  243. package/examples/blend/README.md +3 -3
  244. package/examples/demo/README.md +2 -2
  245. package/examples/intro/README.md +71 -0
  246. package/examples/intro/assets/fonts/figtree/LICENSE.txt +93 -0
  247. package/examples/intro/assets/fonts/figtree/figtree-latin-wght-normal.woff2 +0 -0
  248. package/examples/intro/assets/fonts/instrument-serif/LICENSE.txt +93 -0
  249. package/examples/intro/assets/fonts/instrument-serif/instrument-serif-latin-400-italic.woff2 +0 -0
  250. package/examples/intro/assets/fonts/space-mono/LICENSE.txt +93 -0
  251. package/examples/intro/assets/fonts/space-mono/space-mono-latin-400-normal.woff2 +0 -0
  252. package/examples/intro/assets/fonts/space-mono/space-mono-latin-700-normal.woff2 +0 -0
  253. package/examples/intro/assets/grain.png +0 -0
  254. package/examples/intro/assets/score.ogg +0 -0
  255. package/examples/intro/compositions/brand.html +412 -0
  256. package/examples/intro/compositions/chrome.controller.js +63 -0
  257. package/examples/intro/compositions/chrome.html +256 -0
  258. package/examples/intro/compositions/lattice.controller.js +148 -0
  259. package/examples/intro/compositions/lattice.html +308 -0
  260. package/examples/intro/compositions/opening.html +504 -0
  261. package/examples/intro/compositions/studio.html +930 -0
  262. package/examples/intro/compositions/theme.css +218 -0
  263. package/examples/intro/fy.config.js +13 -0
  264. package/examples/intro/fy.fonts.json +100 -0
  265. package/examples/intro/scripts/make-grain.mjs +79 -0
  266. package/examples/intro/scripts/make-score.mjs +702 -0
  267. package/examples/intro/timelines/intro.timeline.json +60 -0
  268. package/examples/keyframes/README.md +76 -0
  269. package/examples/keyframes/compositions/backdrop.html +60 -0
  270. package/examples/keyframes/compositions/card.html +99 -0
  271. package/examples/keyframes/fy.config.js +10 -0
  272. package/examples/keyframes/timelines/keyframes.timeline.json +60 -0
  273. package/examples/nested/README.md +112 -0
  274. package/examples/nested/assets/pulse.wav +0 -0
  275. package/examples/nested/compositions/backdrop.html +84 -0
  276. package/examples/nested/compositions/card.html +275 -0
  277. package/examples/nested/compositions/overlay.html +307 -0
  278. package/examples/nested/fy.config.js +13 -0
  279. package/examples/nested/scripts/make-pulse.sh +20 -0
  280. package/examples/nested/timelines/chapter-a.timeline.json +39 -0
  281. package/examples/nested/timelines/chapter-b.timeline.json +39 -0
  282. package/examples/nested/timelines/nested-reel.timeline.json +52 -0
  283. package/examples/static/README.md +2 -2
  284. package/examples/transitions/README.md +128 -0
  285. package/examples/transitions/assets/alpha.wav +0 -0
  286. package/examples/transitions/assets/beta.wav +0 -0
  287. package/examples/transitions/assets/gamma.wav +0 -0
  288. package/examples/transitions/compositions/alpha.html +56 -0
  289. package/examples/transitions/compositions/beta.html +56 -0
  290. package/examples/transitions/compositions/gamma.html +56 -0
  291. package/examples/transitions/fy.config.js +12 -0
  292. package/examples/transitions/timelines/audio-crossfade.timeline.json +44 -0
  293. package/examples/transitions/timelines/transitions.timeline.json +31 -0
  294. package/examples/video/README.md +4 -4
  295. package/examples/webgl/README.md +1 -1
  296. package/package.json +13 -6
  297. package/scaffolds/init/AGENTS.md +131 -0
  298. package/scaffolds/init/README.md +56 -0
  299. package/scaffolds/init/compositions/hello.html +79 -0
  300. package/scaffolds/init/fy.config.js +9 -0
  301. package/scaffolds/init/gitignore.template +1 -0
  302. package/scaffolds/init/package.json +11 -0
  303. package/scaffolds/init/props/hello.json +4 -0
  304. package/scaffolds/init/props/main.json +6 -0
  305. package/scaffolds/init/timelines/main.timeline.json +20 -0
  306. package/scaffolds/local-models/LOCAL-MODELS.md +77 -0
  307. package/scaffolds/local-models/fy.policy.json +5 -0
  308. package/scaffolds/local-models/opencode/opencode.jsonc +17 -0
  309. package/scaffolds/local-models/pi/APPEND_SYSTEM.md +21 -0
  310. package/scaffolds/local-models/pi/sandbox.json +15 -0
  311. package/scaffolds/local-models/pi/settings.json +15 -0
  312. package/skills/frameyard/README.md +1 -0
  313. package/skills/frameyard/SKILL.md +59 -61
  314. package/skills/frameyard/references/audio-assets.md +32 -3
  315. package/skills/frameyard/references/common-mistakes.md +53 -2
  316. package/skills/frameyard/references/deterministic-authoring.md +10 -3
  317. package/skills/frameyard/references/diagnostics.md +31 -1
  318. package/skills/frameyard/references/failure-recovery.md +32 -6
  319. package/skills/frameyard/references/fonts.md +132 -0
  320. package/skills/frameyard/references/json-results.md +119 -6
  321. package/skills/frameyard/references/quick-reference.md +222 -0
  322. package/skills/frameyard/references/timelines.md +97 -7
  323. /package/examples/blend/{video.config.js → fy.config.js} +0 -0
  324. /package/examples/demo/{video.config.js → fy.config.js} +0 -0
  325. /package/examples/static/{video.config.js → fy.config.js} +0 -0
  326. /package/examples/video/{video.config.js → fy.config.js} +0 -0
  327. /package/examples/webgl/{video.config.js → fy.config.js} +0 -0
package/dist/server/preview-html.js CHANGED
@@ -1,223 +1,108 @@
1
+ import { PREVIEW_CSS } from "./preview-style.js";
1
2
  const IMPORT_MAP = JSON.stringify({
2
3
  imports: {
3
4
  frameyard: "/__frameyard/framework/index.js",
4
5
  "frameyard/runtime": "/__frameyard/framework/runtime/index.js",
5
6
  },
6
7
  }, null, 2);
7
- export function renderPreviewHtml() {
8
- return `<!doctype html>
9
- <html lang="en">
10
- <head>
11
- <meta charset="utf-8" />
12
- <meta name="viewport" content="width=device-width, initial-scale=1" />
13
- <title>Frameyard Preview</title>
14
- <script type="importmap">${IMPORT_MAP}</script>
15
- <style>
16
- :root {
17
- color-scheme: dark;
18
- --bg: #0b0d10;
19
- --panel: #11151a;
20
- --panel-2: #171c23;
21
- --line: #252c35;
22
- --text: #e8edf3;
23
- --muted: #8a97a6;
24
- --accent: #b8f36b;
25
- --accent-ink: #101408;
26
- --danger: #ff8a8a;
27
- --mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Liberation Mono", monospace;
28
- --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
29
- }
30
- * { box-sizing: border-box; }
31
- html, body { height: 100%; }
32
- body {
33
- margin: 0;
34
- background: var(--bg);
35
- color: var(--text);
36
- font-family: var(--sans);
37
- font-size: 13px;
38
- overflow: hidden;
39
- }
8
+ const PAGE_CSS = `
40
9
  #app {
41
10
  display: grid;
42
- grid-template-columns: 340px minmax(0, 1fr);
11
+ grid-template-columns: 320px minmax(0, 1fr);
43
12
  grid-template-rows: 54px minmax(0, 1fr) 58px;
44
13
  height: 100vh;
45
14
  }
46
- .topbar {
47
- grid-column: 1 / -1;
48
- display: flex;
49
- align-items: center;
50
- gap: 22px;
51
- padding: 0 18px;
52
- border-bottom: 1px solid var(--line);
53
- background: linear-gradient(180deg, #11151a, #0d1014);
54
- }
55
- .brand { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: -0.01em; }
56
- .mark {
57
- width: 17px; height: 17px; border-radius: 4px;
58
- background: linear-gradient(135deg, var(--accent), #5fd6ff);
59
- box-shadow: 0 0 18px rgba(184, 243, 107, 0.3);
60
- }
61
- .tag { color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
62
- .comp { display: flex; align-items: center; gap: 8px; color: var(--muted); }
63
- select, textarea, input { font: inherit; }
64
- select {
65
- background: var(--panel-2);
66
- color: var(--text);
67
- border: 1px solid var(--line);
68
- border-radius: 6px;
69
- padding: 6px 9px;
70
- min-width: 160px;
71
- }
72
- .meta { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; }
15
+ .topbar { grid-column: 1 / -1; }
73
16
  .panel {
74
17
  grid-row: 2 / 4;
75
18
  display: flex;
76
19
  flex-direction: column;
77
20
  gap: 12px;
78
- padding: 16px;
21
+ padding: 18px;
79
22
  border-right: 1px solid var(--line);
80
23
  background: var(--panel);
81
24
  min-height: 0;
82
25
  }
83
- .field { display: flex; flex-direction: column; gap: 7px; min-height: 0; flex: 1; }
84
- .field-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
85
- .field-head label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
86
- textarea {
87
- flex: 1;
88
- min-height: 160px;
89
- resize: none;
90
- background: var(--bg);
91
- color: var(--text);
92
- border: 1px solid var(--line);
93
- border-radius: 7px;
94
- padding: 11px;
95
- font-family: var(--mono);
96
- font-size: 12px;
97
- line-height: 1.55;
98
- tab-size: 2;
99
- }
100
- textarea:focus, select:focus, input:focus-visible, button:focus-visible {
101
- outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
102
- outline-offset: 1px;
103
- }
104
- button {
105
- border: 1px solid var(--line);
106
- background: var(--panel-2);
107
- color: var(--text);
108
- border-radius: 6px;
109
- padding: 8px 12px;
110
- cursor: pointer;
111
- }
112
- button:hover { border-color: #3a4654; }
113
- button:disabled { opacity: 0.45; cursor: default; }
114
- .primary {
115
- background: var(--accent);
116
- border-color: var(--accent);
117
- color: var(--accent-ink);
118
- font-weight: 700;
119
- }
120
- .ghost { background: transparent; border-color: transparent; color: var(--muted); }
121
- .ghost:hover { color: var(--text); border-color: var(--line); }
122
- .small { padding: 3px 7px; font-size: 11px; }
123
- .error {
124
- border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--line));
125
- background: color-mix(in srgb, var(--danger) 9%, var(--panel));
126
- color: var(--danger);
127
- border-radius: 7px;
128
- padding: 10px 11px;
129
- font-family: var(--mono);
130
- font-size: 11px;
131
- line-height: 1.5;
132
- white-space: pre-wrap;
133
- max-height: 30vh;
134
- overflow: auto;
135
- }
136
- .hint { color: var(--muted); font-size: 11px; line-height: 1.5; }
137
- .hint code { font-family: var(--mono); color: #b9c5d2; }
138
- .viewport {
139
- grid-row: 2;
140
- grid-column: 2;
141
- display: flex;
142
- align-items: center;
143
- justify-content: center;
144
- overflow: hidden;
145
- padding: 24px;
146
- background:
147
- radial-gradient(circle at 50% 40%, #161b22 0%, transparent 55%),
148
- repeating-conic-gradient(#0d1014 0% 25%, #0b0d10 0% 50%) 50% / 24px 24px;
149
- }
150
- .stage-wrap { position: relative; flex: 0 0 auto; }
151
- .stage-frame { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; background: #000; color-scheme: light; }
152
- .diagnostics {
153
- border: 1px solid var(--line);
154
- background: var(--panel-2);
155
- border-radius: 7px;
156
- padding: 8px 10px;
157
- max-height: 26vh;
158
- overflow: auto;
159
- font-family: var(--mono);
160
- font-size: 11px;
161
- line-height: 1.5;
162
- }
163
- .diagnostics .diagnostic { display: block; white-space: pre-wrap; }
164
- .diagnostics .warning { color: #e8c76a; }
165
- .diagnostics .error { color: var(--danger); }
166
- .transport {
167
- grid-row: 3;
168
- grid-column: 2;
169
- display: flex;
170
- align-items: center;
171
- gap: 14px;
172
- padding: 0 18px;
173
- border-top: 1px solid var(--line);
174
- background: var(--panel);
175
- }
176
- .play {
177
- width: 34px; height: 34px; padding: 0; border-radius: 50%;
178
- background: var(--text); color: var(--bg); font-size: 12px; font-weight: 800;
179
- }
180
- .step {
181
- width: 30px; height: 30px; padding: 0; border-radius: 6px;
182
- color: var(--muted); font-size: 18px; line-height: 1;
183
- }
184
- .jump {
185
- height: 30px; padding: 0 8px; border-radius: 6px;
186
- color: var(--muted); font: 10px var(--mono);
187
- }
188
- .step:hover:not(:disabled), .jump:hover:not(:disabled) { color: var(--text); }
189
- .scrub { flex: 1; accent-color: var(--accent); }
190
- .readout { display: flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-size: 11px; white-space: nowrap; }
191
- .readout .dim { color: #5c6875; }
192
- .clock { margin-left: 8px; color: var(--accent); }
193
- .audio { display: flex; align-items: center; gap: 7px; color: var(--muted); font-family: var(--mono); font-size: 11px; }
194
- .audio input[type="range"] { width: 72px; accent-color: var(--accent); }
26
+ .panel-head { display: flex; align-items: center; justify-content: space-between; }
27
+ .panel-head .eyebrow { color: var(--muted-strong); }
28
+ .panel-index {
29
+ font-family: var(--mono); font-size: 9px; color: var(--muted);
30
+ letter-spacing: 0.14em; text-transform: uppercase;
31
+ }
32
+ .field { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
33
+ .field-head { display: flex; align-items: center; justify-content: space-between; }
34
+ .field-head label { font-size: 10px; color: var(--muted); }
35
+ .stage-frame {
36
+ position: absolute; top: 0; left: 0; border: 0;
37
+ transform-origin: top left; background: #000; color-scheme: light;
38
+ }
39
+ .viewport { grid-row: 2; grid-column: 2; }
40
+ .transport { grid-row: 3; grid-column: 2; }
195
41
 
42
+ @media (max-width: 760px) {
43
+ #app {
44
+ grid-template-columns: minmax(0, 1fr);
45
+ grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 38vh);
46
+ }
47
+ .topbar { flex-wrap: wrap; gap: 8px 14px; padding: 9px 14px; }
48
+ .transport { flex-wrap: wrap; padding: 9px 14px; }
49
+ .topbar-rule { display: none; }
50
+ select { min-width: 120px; max-width: 100%; }
51
+ .panel {
52
+ grid-row: 4; grid-column: 1;
53
+ border-right: 0; border-top: 1px solid var(--line);
54
+ overflow: auto;
55
+ }
56
+ .panel > * { flex-shrink: 0; }
57
+ .field { flex: 0 0 auto; }
58
+ textarea { flex: 0 0 auto; height: 120px; min-height: 0; }
59
+ .viewport { grid-row: 2; grid-column: 1; }
60
+ .transport { grid-row: 3; grid-column: 1; }
61
+ .meta { display: none; }
62
+ }
63
+ `;
64
+ export function renderPreviewHtml() {
65
+ return `<!doctype html>
66
+ <html lang="en">
67
+ <head>
68
+ <meta charset="utf-8" />
69
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
70
+ <title>Frameyard Preview</title>
71
+ <script type="importmap">${IMPORT_MAP}</script>
72
+ <style>
73
+ ${PREVIEW_CSS}
74
+ ${PAGE_CSS}
196
75
  </style>
197
76
  </head>
198
77
  <body>
199
78
  <div id="app">
200
79
  <header class="topbar">
201
- <div class="brand"><span class="mark"></span>frameyard <span class="tag">preview</span></div>
202
- <label class="comp">Composition <select id="composition"></select></label>
203
- <label class="comp">Timeline <select id="timeline"></select></label>
80
+ <div class="brand">
81
+ <span class="mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
82
+ <span class="wordmark">frameyard</span>
83
+ <span class="slash">/</span>
84
+ <span class="tag">preview</span>
85
+ </div>
86
+ <span class="topbar-rule"></span>
87
+ <label class="comp">composition <select id="composition"></select></label>
88
+ <label class="comp">timeline <select id="timeline"></select></label>
204
89
  <div id="meta" class="meta"></div>
205
90
  </header>
206
91
  <aside id="panel" class="panel">
92
+ <div class="panel-head">
93
+ <span class="eyebrow">input</span>
94
+ <span class="panel-index">props / json</span>
95
+ </div>
207
96
  <div class="field">
208
97
  <div class="field-head">
209
- <label for="props">Props (JSON)</label>
210
- <button id="format" class="ghost small" type="button">Format</button>
98
+ <label for="props">props</label>
99
+ <button id="format" class="ghost small" type="button">format</button>
211
100
  </div>
212
101
  <textarea id="props" spellcheck="false" autocomplete="off"></textarea>
213
102
  </div>
214
- <button id="apply" class="primary" type="button">Apply props</button>
215
- <div id="error" class="error" role="alert" hidden></div>
216
- <div id="diagnostics" class="diagnostics" hidden></div>
217
- <div class="hint">
218
- Frames are derived from <code>frame</code> and <code>props</code> only.
219
- Wall-clock animation and unseeded randomness are not deterministic.
220
- </div>
103
+ <button id="apply" class="primary" type="button">apply props</button>
104
+ <div id="error" role="alert" hidden></div>
105
+ <div id="diagnostics" hidden></div>
221
106
  </aside>
222
107
  <main id="viewport" class="viewport">
223
108
  <div id="stage-wrap" class="stage-wrap">
@@ -230,10 +115,11 @@ export function renderPreviewHtml() {
230
115
  <button id="play" class="play" type="button" aria-label="Play">&#9654;</button>
231
116
  <button id="step-forward" class="step" type="button" aria-label="Next frame" aria-keyshortcuts="ArrowRight" title="Next frame (→)">&#8250;</button>
232
117
  <button id="jump-forward" class="jump" type="button" aria-label="Forward one second" aria-keyshortcuts="Shift+ArrowRight" title="Forward one second (Shift+→)">+1s</button>
233
- <input id="scrub" class="scrub" type="range" min="0" max="0" value="0" step="1" aria-label="Frame" />
118
+ <div class="scrub-wrap"><input id="scrub" class="scrub" type="range" min="0" max="0" value="0" step="1" aria-label="Frame" /></div>
234
119
  <div class="readout">
120
+ <span class="readout-label">frame</span>
235
121
  <span id="frame">0</span><span class="dim">/</span><span id="duration">0</span><span class="dim">f</span>
236
- <span id="clock" class="clock">0.00s</span>
122
+ <span class="dim">·</span><span id="clock" class="clock">0.00s</span>
237
123
  </div>
238
124
  <label class="audio">
239
125
  <input id="mute" type="checkbox" /> mute
package/dist/server/preview-html.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"preview-html.js","sourceRoot":"","sources":["../../src/server/preview-html.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAC/B;IACE,OAAO,EAAE;QACP,SAAS,EAAE,iCAAiC;QAC5C,mBAAmB,EAAE,yCAAyC;KAC/D;CACF,EACD,IAAI,EACJ,CAAC,CACF,CAAC;AAEF,MAAM,UAAU,iBAAiB;IAC/B,OAAO;;;;;;2BAMkB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAwO7B,CAAC;AACT,CAAC"}
1
+ {"version":3,"file":"preview-html.js","sourceRoot":"","sources":["../../src/server/preview-html.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAC/B;IACE,OAAO,EAAE;QACP,SAAS,EAAE,iCAAiC;QAC5C,mBAAmB,EAAE,yCAAyC;KAC/D;CACF,EACD,IAAI,EACJ,CAAC,CACF,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDhB,CAAC;AAEF,MAAM,UAAU,iBAAiB;IAC/B,OAAO;;;;;;2BAMkB,UAAU;;EAEnC,WAAW;EACX,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA0DF,CAAC;AACT,CAAC"}
package/dist/server/preview-style.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Shared visual language for the composition and timeline preview pages.
3
+ *
4
+ * Ink-black surfaces, paper-white type, a single lime signal, hairline rules,
5
+ * and small monospace instrument labels. The chrome bundles its own Figtree and
6
+ * Space Mono faces (`src/preview/fonts/`), so the preview UI does not depend on
7
+ * the project's font manifest; the stacks fall back to system faces if a face
8
+ * fails to load.
9
+ */
10
+ export declare const PREVIEW_CSS = "\n @font-face {\n font-family: \"Figtree\";\n font-style: normal;\n font-display: swap;\n font-weight: 300 900;\n src: url(\"/__frameyard/framework/preview/fonts/figtree-latin-wght-normal.woff2\") format(\"woff2\");\n }\n @font-face {\n font-family: \"Space Mono\";\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(\"/__frameyard/framework/preview/fonts/space-mono-latin-400-normal.woff2\") format(\"woff2\");\n }\n @font-face {\n font-family: \"Space Mono\";\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(\"/__frameyard/framework/preview/fonts/space-mono-latin-700-normal.woff2\") format(\"woff2\");\n }\n :root {\n color-scheme: dark;\n --ink: #06080b;\n --bg: #080b0e;\n --panel: #0c1013;\n --panel-2: #11171b;\n --line: rgba(238, 245, 235, 0.12);\n --line-strong: rgba(238, 245, 235, 0.28);\n --paper: #f2f5ee;\n --muted: #8b9892;\n --muted-strong: #b8c2bc;\n --accent: #b8f36b;\n --accent-ink: #0a1005;\n --danger: #ff9b8a;\n --warning: #e8c76a;\n --mono: \"Space Mono\", ui-monospace, \"SFMono-Regular\", \"Cascadia Code\", \"Liberation Mono\", monospace;\n --sans: \"Figtree\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n }\n * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }\n ::-webkit-scrollbar { width: 8px; height: 8px; }\n ::-webkit-scrollbar-track { background: transparent; }\n ::-webkit-scrollbar-thumb { background: var(--line-strong); }\n html, body { height: 100%; }\n body {\n margin: 0;\n background: var(--bg);\n color: var(--paper);\n font-family: var(--sans);\n font-size: 13px;\n -webkit-font-smoothing: antialiased;\n text-rendering: geometricPrecision;\n overflow: hidden;\n }\n a { color: var(--muted-strong); text-decoration: none; }\n a:hover { color: var(--accent); }\n :focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }\n\n /* Instrument labels */\n .eyebrow, .tag, .meta, .field-head label, .track-label, .readout-label, .comp, .audio {\n font-family: var(--mono);\n font-variant-numeric: tabular-nums;\n text-transform: uppercase;\n letter-spacing: 0.14em;\n }\n .eyebrow, .tag, .track-label, .readout-label { font-size: 10px; color: var(--muted); }\n .tag { color: var(--muted-strong); }\n\n /* Header */\n header, .topbar {\n display: flex;\n align-items: center;\n gap: 20px;\n padding: 0 22px;\n border-bottom: 1px solid var(--line);\n background: linear-gradient(180deg, var(--panel), var(--bg));\n }\n .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }\n .mark {\n display: grid;\n grid-template-columns: repeat(2, 6px);\n grid-template-rows: repeat(2, 6px);\n gap: 2px;\n width: 14px;\n height: 14px;\n }\n .mark i { display: block; border: 1px solid var(--line-strong); }\n .mark i:nth-child(2) {\n background: var(--accent);\n border-color: var(--accent);\n box-shadow: 0 0 10px rgba(184, 243, 107, 0.55);\n }\n .wordmark {\n font-family: var(--sans);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.24em;\n text-transform: uppercase;\n }\n .slash { color: var(--muted); font-family: var(--mono); font-size: 12px; }\n .topbar-rule { width: 1px; height: 20px; background: var(--line); flex: 0 0 auto; }\n .meta { margin-left: auto; font-size: 10px; color: var(--muted-strong); white-space: nowrap; }\n .title { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }\n .comp { display: flex; align-items: center; gap: 9px; font-size: 10px; color: var(--muted); white-space: nowrap; }\n\n /* Form controls */\n select, textarea, input { font: inherit; }\n select {\n appearance: none;\n background-color: var(--ink);\n background-image:\n linear-gradient(45deg, transparent 50%, var(--muted) 50%),\n linear-gradient(135deg, var(--muted) 50%, transparent 50%);\n background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;\n background-size: 5px 5px, 5px 5px;\n background-repeat: no-repeat;\n color: var(--paper);\n border: 1px solid var(--line);\n border-radius: 2px;\n padding: 7px 26px 7px 10px;\n min-width: 148px;\n font-family: var(--mono);\n font-size: 11px;\n letter-spacing: 0.06em;\n cursor: pointer;\n }\n select:hover, textarea:hover { border-color: var(--line-strong); }\n select:disabled { opacity: 0.45; cursor: default; }\n textarea {\n flex: 1;\n min-height: 140px;\n resize: none;\n background: var(--ink);\n color: var(--paper);\n border: 1px solid var(--line);\n border-radius: 2px;\n padding: 12px;\n font-family: var(--mono);\n font-size: 12px;\n line-height: 1.6;\n tab-size: 2;\n }\n\n /* Buttons */\n button {\n border: 1px solid var(--line);\n background: var(--panel-2);\n color: var(--muted-strong);\n border-radius: 2px;\n padding: 8px 12px;\n cursor: pointer;\n font-family: var(--mono);\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;\n }\n button:hover:not(:disabled) { border-color: var(--line-strong); color: var(--paper); }\n button:disabled { opacity: 0.35; cursor: default; }\n .primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }\n .primary:hover:not(:disabled) { background: #c9ff7e; border-color: #c9ff7e; color: var(--accent-ink); }\n .ghost { background: transparent; border-color: transparent; color: var(--muted); }\n .ghost:hover:not(:disabled) { color: var(--paper); border-color: var(--line); }\n .small { padding: 3px 6px; font-size: 9px; }\n\n /* Transport */\n footer, .transport {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 22px;\n border-top: 1px solid var(--line);\n background: var(--panel);\n }\n .step, .jump { width: 30px; height: 30px; padding: 0; color: var(--muted); font-size: 16px; line-height: 1; }\n .jump { width: auto; padding: 0 9px; font-size: 10px; }\n .step:hover:not(:disabled), .jump:hover:not(:disabled) { color: var(--paper); }\n .play {\n width: 34px; height: 34px; padding: 0; font-size: 13px;\n background: var(--accent); border-color: var(--accent); color: var(--accent-ink);\n }\n .play:hover:not(:disabled) { background: #c9ff7e; border-color: #c9ff7e; color: var(--accent-ink); }\n\n /* Tick-marked range rail */\n input[type=\"range\"] { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; cursor: pointer; }\n input[type=\"range\"]:disabled { opacity: 0.35; cursor: default; }\n input[type=\"range\"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); }\n input[type=\"range\"]::-moz-range-track { height: 2px; background: var(--line-strong); }\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none; width: 8px; height: 8px; margin-top: -3px;\n background: var(--accent); border: 0; border-radius: 0;\n }\n input[type=\"range\"]::-moz-range-thumb { width: 8px; height: 8px; background: var(--accent); border: 0; border-radius: 0; }\n .scrub-wrap { position: relative; flex: 1; min-width: 60px; height: 34px; display: flex; align-items: center; }\n .scrub-wrap::before {\n content: \"\"; position: absolute; left: 0; right: 0; top: 50%; height: 8px;\n transform: translateY(-50%);\n background-image: linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px);\n background-size: 10% 100%;\n opacity: 0.45;\n pointer-events: none;\n }\n .scrub { width: 100%; height: 34px; position: relative; z-index: 1; --progress: 0%; }\n .scrub::-webkit-slider-runnable-track {\n height: 2px;\n background: linear-gradient(90deg, var(--accent) 0 var(--progress), var(--line-strong) var(--progress) 100%);\n }\n .scrub::-moz-range-track {\n height: 2px;\n background: linear-gradient(90deg, var(--accent) 0 var(--progress), var(--line-strong) var(--progress) 100%);\n }\n .scrub::-webkit-slider-thumb {\n width: 3px; height: 16px; margin-top: -7px; border-radius: 0;\n box-shadow: 0 0 10px rgba(184, 243, 107, 0.75);\n }\n .scrub::-moz-range-thumb {\n width: 3px; height: 16px; border-radius: 0;\n box-shadow: 0 0 10px rgba(184, 243, 107, 0.75);\n }\n\n /* Readouts */\n .readout {\n display: flex; align-items: baseline; gap: 6px;\n font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;\n white-space: nowrap; color: var(--muted);\n }\n .readout b, .readout #frame { color: var(--paper); font-weight: 500; }\n .readout .dim { color: #5b6660; }\n .readout .clock { color: var(--accent); margin-left: 2px; }\n .audio { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); white-space: nowrap; }\n .audio input[type=\"checkbox\"] { width: 12px; height: 12px; accent-color: var(--accent); }\n .audio input[type=\"range\"] { width: 72px; }\n\n /* Messages */\n #error {\n border: 1px solid rgba(255, 155, 138, 0.35);\n background: rgba(255, 155, 138, 0.06);\n color: var(--danger);\n border-radius: 2px;\n padding: 10px 12px;\n font-family: var(--mono);\n font-size: 11px;\n line-height: 1.6;\n white-space: pre-wrap;\n max-height: 30vh;\n overflow: auto;\n }\n #diagnostics {\n border: 1px solid var(--line);\n background: var(--panel-2);\n border-radius: 2px;\n padding: 9px 11px;\n max-height: 26vh;\n overflow: auto;\n font-family: var(--mono);\n font-size: 10px;\n line-height: 1.7;\n color: var(--muted);\n }\n #error[hidden], #diagnostics[hidden] { display: none; }\n .diagnostic { display: block; white-space: pre-wrap; }\n .diagnostic.warning { color: var(--warning); }\n .diagnostic.error { color: var(--danger); }\n\n /* Viewfinder */\n #viewport, .viewport {\n position: relative;\n display: grid;\n place-items: center;\n padding: 28px;\n overflow: hidden;\n background:\n radial-gradient(ellipse at 50% 38%, rgba(184, 243, 107, 0.05), transparent 58%),\n linear-gradient(rgba(238, 245, 235, 0.028) 1px, transparent 1px) 0 0 / 32px 32px,\n linear-gradient(90deg, rgba(238, 245, 235, 0.028) 1px, transparent 1px) 0 0 / 32px 32px,\n var(--ink);\n }\n #stage-wrap {\n position: relative;\n outline: 1px solid var(--line);\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);\n background: var(--ink);\n }\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }\n }\n";
11
+ //# sourceMappingURL=preview-style.d.ts.map
package/dist/server/preview-style.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"preview-style.d.ts","sourceRoot":"","sources":["../../src/server/preview-style.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,WAAW,6nVA+RvB,CAAC"}
package/dist/server/preview-style.js ADDED
@@ -0,0 +1,298 @@
1
+ /**
2
+ * Shared visual language for the composition and timeline preview pages.
3
+ *
4
+ * Ink-black surfaces, paper-white type, a single lime signal, hairline rules,
5
+ * and small monospace instrument labels. The chrome bundles its own Figtree and
6
+ * Space Mono faces (`src/preview/fonts/`), so the preview UI does not depend on
7
+ * the project's font manifest; the stacks fall back to system faces if a face
8
+ * fails to load.
9
+ */
10
+ export const PREVIEW_CSS = `
11
+ @font-face {
12
+ font-family: "Figtree";
13
+ font-style: normal;
14
+ font-display: swap;
15
+ font-weight: 300 900;
16
+ src: url("/__frameyard/framework/preview/fonts/figtree-latin-wght-normal.woff2") format("woff2");
17
+ }
18
+ @font-face {
19
+ font-family: "Space Mono";
20
+ font-style: normal;
21
+ font-display: swap;
22
+ font-weight: 400;
23
+ src: url("/__frameyard/framework/preview/fonts/space-mono-latin-400-normal.woff2") format("woff2");
24
+ }
25
+ @font-face {
26
+ font-family: "Space Mono";
27
+ font-style: normal;
28
+ font-display: swap;
29
+ font-weight: 700;
30
+ src: url("/__frameyard/framework/preview/fonts/space-mono-latin-700-normal.woff2") format("woff2");
31
+ }
32
+ :root {
33
+ color-scheme: dark;
34
+ --ink: #06080b;
35
+ --bg: #080b0e;
36
+ --panel: #0c1013;
37
+ --panel-2: #11171b;
38
+ --line: rgba(238, 245, 235, 0.12);
39
+ --line-strong: rgba(238, 245, 235, 0.28);
40
+ --paper: #f2f5ee;
41
+ --muted: #8b9892;
42
+ --muted-strong: #b8c2bc;
43
+ --accent: #b8f36b;
44
+ --accent-ink: #0a1005;
45
+ --danger: #ff9b8a;
46
+ --warning: #e8c76a;
47
+ --mono: "Space Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", "Liberation Mono", monospace;
48
+ --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
49
+ }
50
+ * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
51
+ ::-webkit-scrollbar { width: 8px; height: 8px; }
52
+ ::-webkit-scrollbar-track { background: transparent; }
53
+ ::-webkit-scrollbar-thumb { background: var(--line-strong); }
54
+ html, body { height: 100%; }
55
+ body {
56
+ margin: 0;
57
+ background: var(--bg);
58
+ color: var(--paper);
59
+ font-family: var(--sans);
60
+ font-size: 13px;
61
+ -webkit-font-smoothing: antialiased;
62
+ text-rendering: geometricPrecision;
63
+ overflow: hidden;
64
+ }
65
+ a { color: var(--muted-strong); text-decoration: none; }
66
+ a:hover { color: var(--accent); }
67
+ :focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
68
+
69
+ /* Instrument labels */
70
+ .eyebrow, .tag, .meta, .field-head label, .track-label, .readout-label, .comp, .audio {
71
+ font-family: var(--mono);
72
+ font-variant-numeric: tabular-nums;
73
+ text-transform: uppercase;
74
+ letter-spacing: 0.14em;
75
+ }
76
+ .eyebrow, .tag, .track-label, .readout-label { font-size: 10px; color: var(--muted); }
77
+ .tag { color: var(--muted-strong); }
78
+
79
+ /* Header */
80
+ header, .topbar {
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 20px;
84
+ padding: 0 22px;
85
+ border-bottom: 1px solid var(--line);
86
+ background: linear-gradient(180deg, var(--panel), var(--bg));
87
+ }
88
+ .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
89
+ .mark {
90
+ display: grid;
91
+ grid-template-columns: repeat(2, 6px);
92
+ grid-template-rows: repeat(2, 6px);
93
+ gap: 2px;
94
+ width: 14px;
95
+ height: 14px;
96
+ }
97
+ .mark i { display: block; border: 1px solid var(--line-strong); }
98
+ .mark i:nth-child(2) {
99
+ background: var(--accent);
100
+ border-color: var(--accent);
101
+ box-shadow: 0 0 10px rgba(184, 243, 107, 0.55);
102
+ }
103
+ .wordmark {
104
+ font-family: var(--sans);
105
+ font-size: 12px;
106
+ font-weight: 600;
107
+ letter-spacing: 0.24em;
108
+ text-transform: uppercase;
109
+ }
110
+ .slash { color: var(--muted); font-family: var(--mono); font-size: 12px; }
111
+ .topbar-rule { width: 1px; height: 20px; background: var(--line); flex: 0 0 auto; }
112
+ .meta { margin-left: auto; font-size: 10px; color: var(--muted-strong); white-space: nowrap; }
113
+ .title { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
114
+ .comp { display: flex; align-items: center; gap: 9px; font-size: 10px; color: var(--muted); white-space: nowrap; }
115
+
116
+ /* Form controls */
117
+ select, textarea, input { font: inherit; }
118
+ select {
119
+ appearance: none;
120
+ background-color: var(--ink);
121
+ background-image:
122
+ linear-gradient(45deg, transparent 50%, var(--muted) 50%),
123
+ linear-gradient(135deg, var(--muted) 50%, transparent 50%);
124
+ background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
125
+ background-size: 5px 5px, 5px 5px;
126
+ background-repeat: no-repeat;
127
+ color: var(--paper);
128
+ border: 1px solid var(--line);
129
+ border-radius: 2px;
130
+ padding: 7px 26px 7px 10px;
131
+ min-width: 148px;
132
+ font-family: var(--mono);
133
+ font-size: 11px;
134
+ letter-spacing: 0.06em;
135
+ cursor: pointer;
136
+ }
137
+ select:hover, textarea:hover { border-color: var(--line-strong); }
138
+ select:disabled { opacity: 0.45; cursor: default; }
139
+ textarea {
140
+ flex: 1;
141
+ min-height: 140px;
142
+ resize: none;
143
+ background: var(--ink);
144
+ color: var(--paper);
145
+ border: 1px solid var(--line);
146
+ border-radius: 2px;
147
+ padding: 12px;
148
+ font-family: var(--mono);
149
+ font-size: 12px;
150
+ line-height: 1.6;
151
+ tab-size: 2;
152
+ }
153
+
154
+ /* Buttons */
155
+ button {
156
+ border: 1px solid var(--line);
157
+ background: var(--panel-2);
158
+ color: var(--muted-strong);
159
+ border-radius: 2px;
160
+ padding: 8px 12px;
161
+ cursor: pointer;
162
+ font-family: var(--mono);
163
+ font-size: 10px;
164
+ text-transform: uppercase;
165
+ letter-spacing: 0.1em;
166
+ transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
167
+ }
168
+ button:hover:not(:disabled) { border-color: var(--line-strong); color: var(--paper); }
169
+ button:disabled { opacity: 0.35; cursor: default; }
170
+ .primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
171
+ .primary:hover:not(:disabled) { background: #c9ff7e; border-color: #c9ff7e; color: var(--accent-ink); }
172
+ .ghost { background: transparent; border-color: transparent; color: var(--muted); }
173
+ .ghost:hover:not(:disabled) { color: var(--paper); border-color: var(--line); }
174
+ .small { padding: 3px 6px; font-size: 9px; }
175
+
176
+ /* Transport */
177
+ footer, .transport {
178
+ display: flex;
179
+ align-items: center;
180
+ gap: 10px;
181
+ padding: 0 22px;
182
+ border-top: 1px solid var(--line);
183
+ background: var(--panel);
184
+ }
185
+ .step, .jump { width: 30px; height: 30px; padding: 0; color: var(--muted); font-size: 16px; line-height: 1; }
186
+ .jump { width: auto; padding: 0 9px; font-size: 10px; }
187
+ .step:hover:not(:disabled), .jump:hover:not(:disabled) { color: var(--paper); }
188
+ .play {
189
+ width: 34px; height: 34px; padding: 0; font-size: 13px;
190
+ background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
191
+ }
192
+ .play:hover:not(:disabled) { background: #c9ff7e; border-color: #c9ff7e; color: var(--accent-ink); }
193
+
194
+ /* Tick-marked range rail */
195
+ input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; margin: 0; cursor: pointer; }
196
+ input[type="range"]:disabled { opacity: 0.35; cursor: default; }
197
+ input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); }
198
+ input[type="range"]::-moz-range-track { height: 2px; background: var(--line-strong); }
199
+ input[type="range"]::-webkit-slider-thumb {
200
+ -webkit-appearance: none; width: 8px; height: 8px; margin-top: -3px;
201
+ background: var(--accent); border: 0; border-radius: 0;
202
+ }
203
+ input[type="range"]::-moz-range-thumb { width: 8px; height: 8px; background: var(--accent); border: 0; border-radius: 0; }
204
+ .scrub-wrap { position: relative; flex: 1; min-width: 60px; height: 34px; display: flex; align-items: center; }
205
+ .scrub-wrap::before {
206
+ content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px;
207
+ transform: translateY(-50%);
208
+ background-image: linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px);
209
+ background-size: 10% 100%;
210
+ opacity: 0.45;
211
+ pointer-events: none;
212
+ }
213
+ .scrub { width: 100%; height: 34px; position: relative; z-index: 1; --progress: 0%; }
214
+ .scrub::-webkit-slider-runnable-track {
215
+ height: 2px;
216
+ background: linear-gradient(90deg, var(--accent) 0 var(--progress), var(--line-strong) var(--progress) 100%);
217
+ }
218
+ .scrub::-moz-range-track {
219
+ height: 2px;
220
+ background: linear-gradient(90deg, var(--accent) 0 var(--progress), var(--line-strong) var(--progress) 100%);
221
+ }
222
+ .scrub::-webkit-slider-thumb {
223
+ width: 3px; height: 16px; margin-top: -7px; border-radius: 0;
224
+ box-shadow: 0 0 10px rgba(184, 243, 107, 0.75);
225
+ }
226
+ .scrub::-moz-range-thumb {
227
+ width: 3px; height: 16px; border-radius: 0;
228
+ box-shadow: 0 0 10px rgba(184, 243, 107, 0.75);
229
+ }
230
+
231
+ /* Readouts */
232
+ .readout {
233
+ display: flex; align-items: baseline; gap: 6px;
234
+ font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
235
+ white-space: nowrap; color: var(--muted);
236
+ }
237
+ .readout b, .readout #frame { color: var(--paper); font-weight: 500; }
238
+ .readout .dim { color: #5b6660; }
239
+ .readout .clock { color: var(--accent); margin-left: 2px; }
240
+ .audio { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); white-space: nowrap; }
241
+ .audio input[type="checkbox"] { width: 12px; height: 12px; accent-color: var(--accent); }
242
+ .audio input[type="range"] { width: 72px; }
243
+
244
+ /* Messages */
245
+ #error {
246
+ border: 1px solid rgba(255, 155, 138, 0.35);
247
+ background: rgba(255, 155, 138, 0.06);
248
+ color: var(--danger);
249
+ border-radius: 2px;
250
+ padding: 10px 12px;
251
+ font-family: var(--mono);
252
+ font-size: 11px;
253
+ line-height: 1.6;
254
+ white-space: pre-wrap;
255
+ max-height: 30vh;
256
+ overflow: auto;
257
+ }
258
+ #diagnostics {
259
+ border: 1px solid var(--line);
260
+ background: var(--panel-2);
261
+ border-radius: 2px;
262
+ padding: 9px 11px;
263
+ max-height: 26vh;
264
+ overflow: auto;
265
+ font-family: var(--mono);
266
+ font-size: 10px;
267
+ line-height: 1.7;
268
+ color: var(--muted);
269
+ }
270
+ #error[hidden], #diagnostics[hidden] { display: none; }
271
+ .diagnostic { display: block; white-space: pre-wrap; }
272
+ .diagnostic.warning { color: var(--warning); }
273
+ .diagnostic.error { color: var(--danger); }
274
+
275
+ /* Viewfinder */
276
+ #viewport, .viewport {
277
+ position: relative;
278
+ display: grid;
279
+ place-items: center;
280
+ padding: 28px;
281
+ overflow: hidden;
282
+ background:
283
+ radial-gradient(ellipse at 50% 38%, rgba(184, 243, 107, 0.05), transparent 58%),
284
+ linear-gradient(rgba(238, 245, 235, 0.028) 1px, transparent 1px) 0 0 / 32px 32px,
285
+ linear-gradient(90deg, rgba(238, 245, 235, 0.028) 1px, transparent 1px) 0 0 / 32px 32px,
286
+ var(--ink);
287
+ }
288
+ #stage-wrap {
289
+ position: relative;
290
+ outline: 1px solid var(--line);
291
+ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
292
+ background: var(--ink);
293
+ }
294
+ @media (prefers-reduced-motion: reduce) {
295
+ *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
296
+ }
297
+ `;
298
+ //# sourceMappingURL=preview-style.js.map
package/dist/server/preview-style.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"preview-style.js","sourceRoot":"","sources":["../../src/server/preview-style.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+R1B,CAAC"}
package/dist/server/server.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/server/server.ts"],"names":[],"mappings":"AASA,OAAO,EAAe,KAAK,OAAO,EAA2B,MAAM,eAAe,CAAC;AAMnF,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuPD,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CAAC,aAAa,CAAC,CA2L9F"}
1
+ {"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/server/server.ts"],"names":[],"mappings":"AASA,OAAO,EAAe,KAAK,OAAO,EAA2B,MAAM,eAAe,CAAC;AAQnF,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgQD,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CAAC,aAAa,CAAC,CA8M9F"}