kaizen-agent 1.48.0 → 1.49.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.
- package/README.md +2 -2
- package/cli/build-web.ts +4 -2
- package/cli/hermes.ts +65 -0
- package/cli/install.ts +18 -5
- package/cli/localsend.test.ts +84 -0
- package/cli/localsend.ts +131 -0
- package/cli/notes.test.ts +6 -4
- package/cli/settings.ts +1 -0
- package/cli/state.test.ts +37 -0
- package/cli/state.ts +35 -20
- package/cli/video.test.ts +479 -0
- package/cli/video.ts +507 -0
- package/cli/web.ts +127 -1
- package/package.json +1 -1
- package/skills/kaizen/config.default.yml +4 -0
- package/skills/media/kaizen-book/SKILL.md +107 -0
- package/skills/media/kaizen-book/assets/reader.html +440 -0
- package/skills/media/kaizen-book/assets/styles.json +45 -0
- package/skills/media/kaizen-book/examples/book.json +14 -0
- package/skills/media/kaizen-book/examples/images/reach.svg +1 -0
- package/skills/media/kaizen-book/examples/manuscript.md +127 -0
- package/skills/media/kaizen-book/references/interview.md +85 -0
- package/skills/media/kaizen-book/references/proofread.md +47 -0
- package/skills/media/kaizen-book/references/writing.md +53 -0
- package/skills/media/kaizen-book/scripts/build_book.py +279 -0
- package/skills/media/kaizen-book/scripts/check.sh +10 -0
- package/skills/media/kaizen-book/scripts/check_book.py +128 -0
- package/skills/media/kaizen-book/scripts/deploy.py +58 -0
- package/skills/media/kaizen-book/scripts/pdf.mjs +99 -0
- package/skills/media/kaizen-book/scripts/setup.sh +9 -0
- package/skills/media/kaizen-book/scripts/verify.mjs +95 -0
- package/skills/{story-deck → media/kaizen-deck}/SKILL.md +1 -1
- package/skills/{story-deck → media/kaizen-deck}/scripts/check.sh +1 -1
- package/skills/{story-deck → media/kaizen-deck}/scripts/install_fonts.py +2 -2
- package/skills/media/kaizen-video/SKILL.md +112 -0
- package/skills/{kaizen-video → media/kaizen-video}/assets/CREDITS.txt +5 -0
- package/skills/media/kaizen-video/assets/film-fonts/Fraunces.ttf +0 -0
- package/skills/media/kaizen-video/assets/film-fonts/Inter.ttf +0 -0
- package/skills/media/kaizen-video/assets/film-fonts/PlayfairDisplay-Italic.ttf +0 -0
- package/skills/media/kaizen-video/assets/film-fonts/PlayfairDisplay.ttf +0 -0
- package/skills/media/kaizen-video/examples/sample-film/README.md +10 -0
- package/skills/media/kaizen-video/examples/sample-film/film.json +63 -0
- package/skills/media/kaizen-video/film.html +246 -0
- package/skills/media/kaizen-video/presets/film-cinematic-drama/CREDITS.txt +1 -0
- package/skills/media/kaizen-video/presets/film-cinematic-drama/README.md +2 -0
- package/skills/media/kaizen-video/presets/film-cinematic-drama/style.json +39 -0
- package/skills/media/kaizen-video/presets/film-fun-energetic/CREDITS.txt +1 -0
- package/skills/media/kaizen-video/presets/film-fun-energetic/README.md +2 -0
- package/skills/media/kaizen-video/presets/film-fun-energetic/style.json +39 -0
- package/skills/media/kaizen-video/presets/film-promo-booth/CREDITS.txt +1 -0
- package/skills/media/kaizen-video/presets/film-promo-booth/README.md +2 -0
- package/skills/media/kaizen-video/presets/film-promo-booth/style.json +39 -0
- package/skills/media/kaizen-video/presets/film-viral-social/CREDITS.txt +1 -0
- package/skills/media/kaizen-video/presets/film-viral-social/README.md +2 -0
- package/skills/media/kaizen-video/presets/film-viral-social/style.json +39 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/CREDITS.txt +3 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/README.md +52 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/fonts/InstrumentSerif.ttf +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/fonts/SpaceMono.ttf +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/sfx/boing.wav +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/sfx/ding.wav +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/sfx/ending.wav +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/sfx/pop.wav +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/sfx/reveal.wav +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/sfx/shutter.wav +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/sfx/stamp.wav +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/sfx/tick.wav +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/assets/sfx/whoosh.wav +0 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/index.html +272 -0
- package/skills/media/kaizen-video/presets/tiktok-explainer/package.json +10 -0
- package/skills/{kaizen-video → media/kaizen-video}/references/presets.md +22 -0
- package/skills/{story-video → media/kaizen-video}/references/production.md +2 -2
- package/skills/{story-video → media/kaizen-video}/references/revisions.md +9 -9
- package/skills/media/kaizen-video/scripts/__pycache__/intake.cpython-314.pyc +0 -0
- package/skills/media/kaizen-video/scripts/__pycache__/make_film.cpython-314.pyc +0 -0
- package/skills/media/kaizen-video/scripts/__pycache__/make_tiktok.cpython-314.pyc +0 -0
- package/skills/media/kaizen-video/scripts/__pycache__/render_cut.cpython-314.pyc +0 -0
- package/skills/media/kaizen-video/scripts/__pycache__/sfx.cpython-314.pyc +0 -0
- package/skills/media/kaizen-video/scripts/__pycache__/srt.cpython-314.pyc +0 -0
- package/skills/media/kaizen-video/scripts/__pycache__/transcribe.cpython-314.pyc +0 -0
- package/skills/media/kaizen-video/scripts/__pycache__/vo.cpython-314.pyc +0 -0
- package/skills/{kaizen-video → media/kaizen-video}/scripts/check.sh +8 -0
- package/skills/{story-video → media/kaizen-video}/scripts/intake.py +2 -2
- package/skills/media/kaizen-video/scripts/make_film.py +263 -0
- package/skills/{kaizen-video → media/kaizen-video}/scripts/make_tiktok.py +8 -3
- package/skills/{story-video → media/kaizen-video}/scripts/master.sh +12 -11
- package/skills/{story-video → media/kaizen-video}/scripts/sfx.py +3 -3
- package/skills/media/kaizen-video/scripts/srt.py +9 -0
- package/skills/media/kaizen-video/scripts/still.sh +7 -0
- package/web/board/views.ts +1 -1
- package/web/board.html +2 -0
- package/web/board.js +2 -2
- package/web/notebook.js +1 -1
- package/web/notes.html +2 -0
- package/web/term.js +1 -1
- package/web/video.html +298 -0
- package/web/video.js +81 -0
- package/web/video.ts +610 -0
- package/skills/kaizen-video/SKILL.md +0 -73
- package/skills/story-video/SKILL.md +0 -108
- package/skills/story-video/engine/package.json +0 -12
- package/skills/story-video/engine/src/Root.tsx +0 -24
- package/skills/story-video/engine/src/engine/Film.tsx +0 -405
- package/skills/story-video/engine/src/engine/presets.json +0 -58
- package/skills/story-video/engine/src/index.ts +0 -3
- package/skills/story-video/engine/tsconfig.json +0 -1
- package/skills/story-video/examples/sample-film/README.md +0 -12
- package/skills/story-video/examples/sample-film/film.json +0 -16
- package/skills/story-video/references/presets.md +0 -21
- package/skills/story-video/scripts/check.sh +0 -19
- package/skills/story-video/scripts/setup.sh +0 -25
- package/skills/story-video/scripts/srt.py +0 -30
- package/skills/story-video/scripts/still.sh +0 -10
- /package/skills/{story-deck → media/kaizen-deck}/examples/build-example.js +0 -0
- /package/skills/{story-deck → media/kaizen-deck}/references/rules.md +0 -0
- /package/skills/{story-deck → media/kaizen-deck}/references/story-arc.md +0 -0
- /package/skills/{story-deck → media/kaizen-deck}/scripts/kit.js +0 -0
- /package/skills/{story-deck → media/kaizen-deck}/scripts/prep_images.py +0 -0
- /package/skills/{story-deck → media/kaizen-deck}/scripts/qa.sh +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/assets/fonts/Fredoka.ttf +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/assets/fonts/Montserrat.ttf +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/assets/fonts/SpecialElite.ttf +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/assets/music/investigations.mp3 +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/assets/music/lights.mp3 +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/assets/music/sunny.mp3 +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/examples/config.json +0 -0
- /package/skills/{story-video → media/kaizen-video}/examples/sample-film/lines.json +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/hyperframes.json +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/educational-warning/CREDITS.txt +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/educational-warning/README.md +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/educational-warning/assets/sfx/ending.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/educational-warning/assets/sfx/reveal.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/educational-warning/assets/sfx/shutter.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/educational-warning/assets/sfx/stamp.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/educational-warning/index.html +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/educational-warning/package.json +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/CREDITS.txt +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/README.md +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/assets/sfx/boing.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/assets/sfx/chime.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/assets/sfx/ding.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/assets/sfx/ending.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/assets/sfx/pop.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/assets/sfx/reveal.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/assets/sfx/shutter.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/assets/sfx/stamp.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/assets/sfx/whoosh.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/index.html +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-cheerful/package.json +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/CREDITS.txt +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/README.md +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/assets/sfx/clock.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/assets/sfx/ding.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/assets/sfx/ending.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/assets/sfx/heart.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/assets/sfx/projector.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/assets/sfx/reveal.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/assets/sfx/shutter.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/assets/sfx/stamp.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/assets/sfx/whoosh.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/index.html +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-mystery/package.json +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/CREDITS.txt +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/README.md +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/assets/sfx/clock.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/assets/sfx/ding.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/assets/sfx/ending.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/assets/sfx/heart.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/assets/sfx/reveal.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/assets/sfx/shutter.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/assets/sfx/stamp.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/assets/sfx/whoosh.wav +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/index.html +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/presets/tiktok-scam-alert/package.json +0 -0
- /package/skills/{story-video → media/kaizen-video}/references/licensing.md +0 -0
- /package/skills/{story-video → media/kaizen-video}/references/script.md +0 -0
- /package/skills/{story-video → media/kaizen-video}/scripts/music.sh +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/scripts/render_cut.py +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/scripts/setup.sh +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/scripts/transcribe.py +0 -0
- /package/skills/{story-video → media/kaizen-video}/scripts/vo.py +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/tools/carve.mjs +0 -0
- /package/skills/{kaizen-video → media/kaizen-video}/tools/lib/main-module.mjs +0 -0
package/web/video.html
ADDED
|
@@ -0,0 +1,298 @@
|
|
|
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,viewport-fit=cover">
|
|
6
|
+
<script>if(matchMedia("(display-mode:standalone)").matches||navigator.standalone){document.querySelector("meta[name=viewport]").content+=",maximum-scale=1,user-scalable=no";addEventListener("gesturestart",e=>e.preventDefault())}</script>
|
|
7
|
+
<title>kaizen video</title>
|
|
8
|
+
<link rel="icon" href="/favicon.ico" sizes="any">
|
|
9
|
+
<link rel="icon" type="image/png" href="/logo.png">
|
|
10
|
+
<link rel="apple-touch-icon" href="/logo.png">
|
|
11
|
+
<style>
|
|
12
|
+
/* Tokens: copied from web/board.html, line for line; cli/notes.test.ts holds them equal. */
|
|
13
|
+
:root{--bg:#f6f8fc;--bg-2:#fff;--line:#d9e0ee;--ink:#0c162f;--ink-hi:#0c162f;--dim:#5b6b8c;--accent:#2d50a5;--run:#0f8fa3;--ok:#1f9d55;--warn:#a8720a;--danger:#c8322f;color-scheme:light}
|
|
14
|
+
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0c162f;--bg-2:#121e3c;--line:#22305a;--ink:#eef2fa;--ink-hi:#deeeff;--dim:#96aacd;--accent:#486ed9;--run:#4fd6e6;--ok:#5fd28a;--warn:#e6b450;--danger:#e85050;color-scheme:dark}}
|
|
15
|
+
:root[data-theme=dark]{--bg:#0c162f;--bg-2:#121e3c;--line:#22305a;--ink:#eef2fa;--ink-hi:#deeeff;--dim:#96aacd;--accent:#486ed9;--run:#4fd6e6;--ok:#5fd28a;--warn:#e6b450;--danger:#e85050;color-scheme:dark}
|
|
16
|
+
*{box-sizing:border-box}
|
|
17
|
+
/* Shape, type and depth. --shade is the one shadow colour, themed like the rest. */
|
|
18
|
+
:root{--r:12px;--r-s:8px;--r-pill:999px;--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;--mono:ui-monospace,"JetBrains Mono","Cascadia Code","SF Mono",Menlo,Consolas,monospace;--on-accent:#fff;--hover:color-mix(in srgb,var(--dim) 12%,transparent);--shade:rgb(12 22 47/.08);--shadow-1:0 1px 2px var(--shade);--shadow-2:0 0 0 1px var(--shade),0 8px 24px -6px var(--shade);--canvas:color-mix(in srgb,var(--bg) 95.5%,var(--ink))}
|
|
19
|
+
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--shade:rgb(0 0 0/.45);--canvas:color-mix(in srgb,var(--bg) 70%,black)}}
|
|
20
|
+
:root[data-theme=dark]{--shade:rgb(0 0 0/.45);--canvas:color-mix(in srgb,var(--bg) 70%,black)}
|
|
21
|
+
body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;height:100vh;height:100dvh;overflow:hidden;display:flex}
|
|
22
|
+
html{background:var(--canvas);touch-action:manipulation}
|
|
23
|
+
@media(display-mode:standalone){body{position:fixed;inset:0;height:auto;overscroll-behavior:none;touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}}
|
|
24
|
+
@media(max-width:640px),(display-mode:standalone){body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}}
|
|
25
|
+
/* iOS 26 blurs the page under the status bar unless a fixed bar touches the top edge: give it one in the page colour */
|
|
26
|
+
@media(display-mode:standalone){body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:inherit;z-index:100;pointer-events:none}}
|
|
27
|
+
button,input,select{font:inherit;color:inherit;background:none;border:0;padding:0}
|
|
28
|
+
button{cursor:pointer}
|
|
29
|
+
a{color:inherit;text-decoration:none}
|
|
30
|
+
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
|
|
31
|
+
svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
|
|
32
|
+
[hidden]{display:none!important}
|
|
33
|
+
|
|
34
|
+
/* side menu: the same lines in board.html and notes.html (a test holds them equal) */
|
|
35
|
+
.rail{width:220px;flex:none;display:flex;flex-direction:column;gap:2px;padding:18px 12px 14px;overflow:hidden auto;transition:width .18s}
|
|
36
|
+
.rail .top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 18px 10px}
|
|
37
|
+
.rail .home{display:block;color:inherit;text-decoration:none}
|
|
38
|
+
.rail .top .mascot{display:none;width:36px;height:34px}
|
|
39
|
+
.rail a.it{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-s);font-size:13px;font-weight:500;color:var(--dim);text-decoration:none;white-space:nowrap;transition:background .12s,color .12s}
|
|
40
|
+
.rail a.it:hover{background:var(--hover);color:var(--ink)}
|
|
41
|
+
.rail a.it[aria-current=page]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--ink)}
|
|
42
|
+
.rail a.it[aria-current=page] svg{color:var(--accent)}
|
|
43
|
+
.rail .end{flex:1}
|
|
44
|
+
.theme{display:flex;gap:2px;padding:3px;border-radius:var(--r-s);background:var(--hover)}
|
|
45
|
+
.theme button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:4px;font-size:12px;font-weight:500;color:var(--dim);transition:background .12s,color .12s}
|
|
46
|
+
.theme button svg{width:15px;height:15px}
|
|
47
|
+
.theme button:hover{color:var(--ink)}
|
|
48
|
+
.theme button[aria-pressed=true]{background:var(--bg-2);color:var(--ink);box-shadow:var(--shadow-1)}
|
|
49
|
+
[data-rail=min] .rail{width:60px;padding-inline:10px;align-items:center}
|
|
50
|
+
[data-rail=min] .rail .top{flex-direction:column;gap:12px;padding:0 0 14px}
|
|
51
|
+
[data-rail=min] .rail .top pre.mark{display:none}
|
|
52
|
+
[data-rail=min] .rail .top .mascot{display:block}
|
|
53
|
+
[data-rail=min] .rail a.it{width:40px;justify-content:center;padding:0}
|
|
54
|
+
[data-rail=min] .rail .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
|
|
55
|
+
[data-rail=min] .theme{flex-direction:column}
|
|
56
|
+
[data-rail=min] .theme button{width:34px;flex:none}
|
|
57
|
+
@media(max-width:640px){#fold{display:none}}
|
|
58
|
+
/* phones: the side menu is a bottom tab bar, in the page flow so nothing sits under it; it owns the bottom safe area */
|
|
59
|
+
@media(max-width:640px){body{flex-direction:column;padding-bottom:0}.app{flex:1;min-height:0}
|
|
60
|
+
.rail,[data-rail=min] .rail{order:2;width:auto;flex-direction:row;align-items:stretch;gap:0;padding:4px 6px calc(4px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg-2);overflow:visible}
|
|
61
|
+
.rail .top,.rail .end,.rail .theme{display:none}
|
|
62
|
+
.rail a.it,[data-rail=min] .rail a.it{flex:1;width:auto;flex-direction:column;justify-content:center;gap:2px;height:auto;min-height:48px;padding:4px 0;font-size:11px}
|
|
63
|
+
.rail a.it[aria-current=page]{background:none;color:var(--accent)}
|
|
64
|
+
[data-rail=min] .rail .lbl{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
|
|
65
|
+
body .rail a.upd::after{left:calc(50% + 6px);top:4px}body .toast{left:16px;bottom:calc(68px + env(safe-area-inset-bottom))}}
|
|
66
|
+
/* end side menu */
|
|
67
|
+
/* the work area: an inset rounded panel on the canvas the side menu sits on */
|
|
68
|
+
.app{flex:1;min-width:0;display:flex;flex-direction:column;margin:8px 8px 8px 0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
|
|
69
|
+
@media(max-width:640px){.app{margin:0;border:0;border-radius:0}html,body{background:var(--bg)}}
|
|
70
|
+
.hdr{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 28px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);flex-wrap:wrap}
|
|
71
|
+
pre.mark{margin:0;font:700 8px/1 var(--mono)}
|
|
72
|
+
.mascot{width:120px;height:112px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 428 400%22%3E%3Cpath fill=%22currentColor%22 fill-rule=%22evenodd%22 d=%22M130 381L122 362L119 346L119 325L124 305L123 294L119 288L117 288L115 285L109 282L89 264L89 262L82 256L82 254L79 252L79 250L76 248L76 246L73 244L70 237L68 236L58 216L53 201L49 182L48 166L45 166L39 170L19 177L7 178L2 176L0 173L0 163L4 157L4 154L7 150L7 147L10 143L16 126L20 120L26 103L30 97L30 94L34 88L37 78L41 72L44 62L48 56L48 53L52 47L52 44L56 38L59 28L64 20L67 10L70 7L247 0L252 4L253 11L250 18L243 25L243 27L209 60L207 60L203 65L201 65L197 70L195 70L191 75L189 75L186 79L180 82L169 92L164 93L161 90L162 85L169 81L171 78L173 78L176 74L178 74L181 70L183 70L186 66L193 62L197 57L199 57L205 50L207 50L235 23L235 21L242 14L244 9L241 9L226 14L220 18L217 18L199 27L198 29L190 32L189 34L183 36L182 38L178 39L177 41L173 42L167 47L163 48L156 54L152 55L151 57L149 57L148 59L146 59L145 61L143 61L142 63L140 63L139 65L137 65L136 67L134 67L133 69L131 69L130 71L116 79L114 82L106 86L104 89L99 91L93 97L88 99L86 102L84 102L82 105L80 105L78 108L76 108L74 111L72 111L70 114L68 114L66 117L64 117L62 120L56 123L53 127L51 127L48 131L41 135L37 140L35 140L15 159L15 161L11 164L9 169L21 167L30 164L34 161L37 161L45 156L48 156L50 140L57 132L71 131L75 133L79 138L81 138L87 135L88 133L94 131L95 129L104 126L107 129L106 134L82 147L82 156L85 172L92 188L94 189L94 194L92 196L88 196L84 192L79 182L74 164L73 144L69 140L62 140L58 144L58 182L62 200L68 217L76 232L82 239L82 241L92 252L92 254L107 269L109 269L112 273L114 273L128 285L132 292L133 307L128 325L128 345L131 361L140 382L149 390L160 392L191 381L228 377L238 373L251 362L251 360L254 358L255 354L258 351L261 341L261 322L259 315L253 304L243 294L232 288L220 285L203 286L188 292L176 303L176 305L170 313L167 323L168 345L178 363L187 370L187 375L184 377L179 376L169 366L161 352L158 341L158 323L162 309L167 300L170 298L170 296L181 286L194 279L207 276L221 276L234 279L244 284L249 289L251 289L263 303L270 322L270 342L266 355L260 363L260 365L257 367L257 369L247 378L243 379L240 382L253 386L263 391L277 391L281 389L290 379L298 358L300 347L300 323L296 307L297 298L302 292L318 287L333 279L335 276L337 276L339 273L341 273L345 268L349 266L349 264L355 259L351 251L349 242L345 243L341 247L329 253L309 258L290 258L276 255L274 257L262 261L236 266L192 266L154 257L130 245L129 243L121 239L119 236L117 236L101 220L101 218L98 216L96 212L95 207L107 192L113 180L119 159L121 157L121 151L118 146L118 142L115 135L114 112L117 101L124 92L129 90L138 90L146 92L159 99L169 109L184 103L204 99L231 100L244 103L259 109L264 103L266 103L268 100L270 100L271 98L280 93L290 90L302 91L309 97L314 112L314 130L311 143L307 152L307 156L310 161L316 182L325 198L332 205L333 210L328 219L322 224L322 226L317 231L315 231L310 237L308 237L306 240L296 245L292 249L309 249L325 245L341 236L347 230L350 210L360 193L360 187L355 178L355 174L357 172L387 172L389 177L384 187L385 195L387 194L391 182L394 180L401 180L415 187L426 190L428 193L428 202L423 211L423 214L421 216L421 219L419 221L419 224L417 226L417 229L415 231L415 234L413 236L413 239L411 241L405 258L402 260L395 260L390 257L388 259L366 259L361 264L361 266L340 285L318 297L307 300L305 302L305 307L309 325L318 323L325 319L334 310L334 308L337 306L341 298L354 283L356 283L362 277L377 271L394 271L400 273L407 277L415 285L420 294L423 306L421 323L416 335L408 344L408 346L401 353L399 353L397 356L395 356L388 362L369 370L353 373L330 373L304 367L301 377L297 385L294 387L294 389L288 395L279 400L261 400L240 391L216 387L192 390L167 400L150 400L139 394L132 386ZM130 155L119 189L116 192L112 201L106 207L107 210L119 207L126 200L134 185L136 184L137 180L149 166L163 158L171 156L180 156L191 160L198 166L202 173L204 182L203 192L195 205L194 216L196 220L205 227L212 229L221 228L227 225L233 219L234 207L225 191L225 177L233 163L235 163L237 160L241 158L248 156L262 157L278 165L289 177L289 179L295 186L297 192L299 193L300 197L309 207L316 210L323 209L313 196L307 184L304 171L297 154L302 142L305 129L304 107L301 101L298 99L291 99L278 104L261 119L257 119L243 112L224 108L197 109L185 112L171 119L167 119L163 114L161 114L157 109L155 109L150 104L138 99L130 99L126 103L123 113L123 128L125 138L131 152ZM380 280L372 282L361 289L361 306L364 310L375 312L382 317L384 321L384 337L386 339L390 341L400 341L408 331L413 319L413 301L409 292L400 283L393 280ZM144 187L141 193L139 194L138 198L134 202L134 204L131 206L131 208L125 214L123 214L120 217L113 218L113 220L124 230L126 230L128 233L138 238L139 240L156 248L180 255L201 258L226 258L257 253L277 246L291 239L292 237L303 231L315 220L315 218L306 216L298 209L298 207L291 199L290 195L288 194L287 190L285 189L281 181L271 171L257 165L245 166L241 168L235 175L234 190L242 203L243 217L240 224L234 231L221 237L207 237L201 235L194 229L192 229L186 220L185 207L187 201L193 193L195 185L193 175L187 168L179 165L171 165L164 167L158 172L156 172L148 180ZM367 179L364 179L367 185L367 195L362 204L360 205L355 219L355 240L357 247L361 253L383 253L388 245L390 236L389 218L383 203L377 195L377 185L380 179ZM319 362L330 364L360 363L376 358L387 352L389 349L382 347L376 341L375 323L371 320L362 319L359 316L357 316L353 310L351 300L348 306L343 311L343 313L333 324L331 324L329 327L320 332L309 334L309 348L307 358ZM130 59L132 59L133 57L147 49L149 46L76 18L66 105L72 100L74 100L76 97L78 97L80 94L82 94L84 91L89 89L91 86L93 86L95 83L97 83L105 76L113 72L115 69L129 61ZM213 204L218 204L225 208L224 213L217 218L211 218L207 216L203 210L205 206ZM39 96L20 142L26 136L28 136L33 130L35 130L38 126L40 126L43 122L45 122L48 118L50 118L53 114L56 113L64 41L56 57L56 60L52 66L49 76L45 82L42 92ZM194 11L101 14L95 16L98 16L100 18L103 18L105 20L108 20L110 22L113 22L115 24L118 24L120 26L123 26L125 28L128 28L130 30L133 30L135 32L138 32L140 34L143 34L145 36L148 36L159 41L164 37L168 36L169 34L173 33L174 31L178 30L179 28L213 11ZM409 203L413 193L412 191L404 189L400 186L396 186L394 190L390 203L395 213L397 230L401 223L407 205ZM418 210L421 200L423 198L423 196L418 195L412 212L407 221L407 224L405 226L405 229L403 231L403 234L401 236L401 239L399 241L399 244L397 246L397 249L395 251L396 254L400 254ZM182 191L178 195L170 194L167 190L168 182L172 179L180 180L183 183ZM256 194L250 195L245 190L245 184L250 179L256 179L261 184L261 190L258 194Z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 428 400%22%3E%3Cpath fill=%22currentColor%22 fill-rule=%22evenodd%22 d=%22M130 381L122 362L119 346L119 325L124 305L123 294L119 288L117 288L115 285L109 282L89 264L89 262L82 256L82 254L79 252L79 250L76 248L76 246L73 244L70 237L68 236L58 216L53 201L49 182L48 166L45 166L39 170L19 177L7 178L2 176L0 173L0 163L4 157L4 154L7 150L7 147L10 143L16 126L20 120L26 103L30 97L30 94L34 88L37 78L41 72L44 62L48 56L48 53L52 47L52 44L56 38L59 28L64 20L67 10L70 7L247 0L252 4L253 11L250 18L243 25L243 27L209 60L207 60L203 65L201 65L197 70L195 70L191 75L189 75L186 79L180 82L169 92L164 93L161 90L162 85L169 81L171 78L173 78L176 74L178 74L181 70L183 70L186 66L193 62L197 57L199 57L205 50L207 50L235 23L235 21L242 14L244 9L241 9L226 14L220 18L217 18L199 27L198 29L190 32L189 34L183 36L182 38L178 39L177 41L173 42L167 47L163 48L156 54L152 55L151 57L149 57L148 59L146 59L145 61L143 61L142 63L140 63L139 65L137 65L136 67L134 67L133 69L131 69L130 71L116 79L114 82L106 86L104 89L99 91L93 97L88 99L86 102L84 102L82 105L80 105L78 108L76 108L74 111L72 111L70 114L68 114L66 117L64 117L62 120L56 123L53 127L51 127L48 131L41 135L37 140L35 140L15 159L15 161L11 164L9 169L21 167L30 164L34 161L37 161L45 156L48 156L50 140L57 132L71 131L75 133L79 138L81 138L87 135L88 133L94 131L95 129L104 126L107 129L106 134L82 147L82 156L85 172L92 188L94 189L94 194L92 196L88 196L84 192L79 182L74 164L73 144L69 140L62 140L58 144L58 182L62 200L68 217L76 232L82 239L82 241L92 252L92 254L107 269L109 269L112 273L114 273L128 285L132 292L133 307L128 325L128 345L131 361L140 382L149 390L160 392L191 381L228 377L238 373L251 362L251 360L254 358L255 354L258 351L261 341L261 322L259 315L253 304L243 294L232 288L220 285L203 286L188 292L176 303L176 305L170 313L167 323L168 345L178 363L187 370L187 375L184 377L179 376L169 366L161 352L158 341L158 323L162 309L167 300L170 298L170 296L181 286L194 279L207 276L221 276L234 279L244 284L249 289L251 289L263 303L270 322L270 342L266 355L260 363L260 365L257 367L257 369L247 378L243 379L240 382L253 386L263 391L277 391L281 389L290 379L298 358L300 347L300 323L296 307L297 298L302 292L318 287L333 279L335 276L337 276L339 273L341 273L345 268L349 266L349 264L355 259L351 251L349 242L345 243L341 247L329 253L309 258L290 258L276 255L274 257L262 261L236 266L192 266L154 257L130 245L129 243L121 239L119 236L117 236L101 220L101 218L98 216L96 212L95 207L107 192L113 180L119 159L121 157L121 151L118 146L118 142L115 135L114 112L117 101L124 92L129 90L138 90L146 92L159 99L169 109L184 103L204 99L231 100L244 103L259 109L264 103L266 103L268 100L270 100L271 98L280 93L290 90L302 91L309 97L314 112L314 130L311 143L307 152L307 156L310 161L316 182L325 198L332 205L333 210L328 219L322 224L322 226L317 231L315 231L310 237L308 237L306 240L296 245L292 249L309 249L325 245L341 236L347 230L350 210L360 193L360 187L355 178L355 174L357 172L387 172L389 177L384 187L385 195L387 194L391 182L394 180L401 180L415 187L426 190L428 193L428 202L423 211L423 214L421 216L421 219L419 221L419 224L417 226L417 229L415 231L415 234L413 236L413 239L411 241L405 258L402 260L395 260L390 257L388 259L366 259L361 264L361 266L340 285L318 297L307 300L305 302L305 307L309 325L318 323L325 319L334 310L334 308L337 306L341 298L354 283L356 283L362 277L377 271L394 271L400 273L407 277L415 285L420 294L423 306L421 323L416 335L408 344L408 346L401 353L399 353L397 356L395 356L388 362L369 370L353 373L330 373L304 367L301 377L297 385L294 387L294 389L288 395L279 400L261 400L240 391L216 387L192 390L167 400L150 400L139 394L132 386ZM130 155L119 189L116 192L112 201L106 207L107 210L119 207L126 200L134 185L136 184L137 180L149 166L163 158L171 156L180 156L191 160L198 166L202 173L204 182L203 192L195 205L194 216L196 220L205 227L212 229L221 228L227 225L233 219L234 207L225 191L225 177L233 163L235 163L237 160L241 158L248 156L262 157L278 165L289 177L289 179L295 186L297 192L299 193L300 197L309 207L316 210L323 209L313 196L307 184L304 171L297 154L302 142L305 129L304 107L301 101L298 99L291 99L278 104L261 119L257 119L243 112L224 108L197 109L185 112L171 119L167 119L163 114L161 114L157 109L155 109L150 104L138 99L130 99L126 103L123 113L123 128L125 138L131 152ZM380 280L372 282L361 289L361 306L364 310L375 312L382 317L384 321L384 337L386 339L390 341L400 341L408 331L413 319L413 301L409 292L400 283L393 280ZM144 187L141 193L139 194L138 198L134 202L134 204L131 206L131 208L125 214L123 214L120 217L113 218L113 220L124 230L126 230L128 233L138 238L139 240L156 248L180 255L201 258L226 258L257 253L277 246L291 239L292 237L303 231L315 220L315 218L306 216L298 209L298 207L291 199L290 195L288 194L287 190L285 189L281 181L271 171L257 165L245 166L241 168L235 175L234 190L242 203L243 217L240 224L234 231L221 237L207 237L201 235L194 229L192 229L186 220L185 207L187 201L193 193L195 185L193 175L187 168L179 165L171 165L164 167L158 172L156 172L148 180ZM367 179L364 179L367 185L367 195L362 204L360 205L355 219L355 240L357 247L361 253L383 253L388 245L390 236L389 218L383 203L377 195L377 185L380 179ZM319 362L330 364L360 363L376 358L387 352L389 349L382 347L376 341L375 323L371 320L362 319L359 316L357 316L353 310L351 300L348 306L343 311L343 313L333 324L331 324L329 327L320 332L309 334L309 348L307 358ZM130 59L132 59L133 57L147 49L149 46L76 18L66 105L72 100L74 100L76 97L78 97L80 94L82 94L84 91L89 89L91 86L93 86L95 83L97 83L105 76L113 72L115 69L129 61ZM213 204L218 204L225 208L224 213L217 218L211 218L207 216L203 210L205 206ZM39 96L20 142L26 136L28 136L33 130L35 130L38 126L40 126L43 122L45 122L48 118L50 118L53 114L56 113L64 41L56 57L56 60L52 66L49 76L45 82L42 92ZM194 11L101 14L95 16L98 16L100 18L103 18L105 20L108 20L110 22L113 22L115 24L118 24L120 26L123 26L125 28L128 28L130 30L133 30L135 32L138 32L140 34L143 34L145 36L148 36L159 41L164 37L168 36L169 34L173 33L174 31L178 30L179 28L213 11ZM409 203L413 193L412 191L404 189L400 186L396 186L394 190L390 203L395 213L397 230L401 223L407 205ZM418 210L421 200L423 198L423 196L418 195L412 212L407 221L407 224L405 226L405 229L403 231L403 234L401 236L401 239L399 241L399 244L397 246L397 249L395 251L396 254L400 254ZM182 191L178 195L170 194L167 190L168 182L172 179L180 180L183 183ZM256 194L250 195L245 190L245 184L250 179L256 179L261 184L261 190L258 194Z%22/%3E%3C/svg%3E") center/contain no-repeat}
|
|
73
|
+
::view-transition-group(*){animation-duration:.2s}
|
|
74
|
+
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) *,:root:not([data-motion=full]) *::before,:root:not([data-motion=full]) *::after,:root:not([data-motion=full])::view-transition-group(*),:root:not([data-motion=full])::view-transition-old(*),:root:not([data-motion=full])::view-transition-new(*){transition:none!important;animation:none!important}}
|
|
75
|
+
:root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after,:root[data-motion=reduce]::view-transition-group(*),:root[data-motion=reduce]::view-transition-old(*),:root[data-motion=reduce]::view-transition-new(*){transition:none!important;animation:none!important}
|
|
76
|
+
/* ---- the Video page ---- */
|
|
77
|
+
.hdr h1{margin:0;font-size:15px;font-weight:600}
|
|
78
|
+
.sp{flex:1}
|
|
79
|
+
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-2);color:var(--ink);font-weight:500;white-space:nowrap}
|
|
80
|
+
.btn:hover{background:var(--hover)}
|
|
81
|
+
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
|
|
82
|
+
.btn:disabled{opacity:.5;cursor:default}
|
|
83
|
+
.ib{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-s);color:var(--dim)}
|
|
84
|
+
.ib:hover{background:var(--hover);color:var(--ink)}
|
|
85
|
+
.page{flex:1;min-height:0;overflow:auto;padding-block:20px 40px;padding-left:max(16px,2.4vw);padding-right:max(16px,2.4vw)}
|
|
86
|
+
.note{color:var(--dim);font-size:12px;margin:8px 0 0}
|
|
87
|
+
.pill{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--hover);color:var(--dim)}
|
|
88
|
+
.pill::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
|
|
89
|
+
.pill.ready{color:var(--ok)}.pill.rendering,.pill.building,.pill.queued{color:var(--run)}.pill.draft{color:var(--warn)}.pill.failed{color:var(--danger)}
|
|
90
|
+
.chips{display:flex;flex-wrap:wrap;gap:8px}
|
|
91
|
+
.chip{min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--dim)}
|
|
92
|
+
.chip:hover{color:var(--ink)}
|
|
93
|
+
.chip.on{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent)}
|
|
94
|
+
/* library: CSS columns, each tile at its video's real shape */
|
|
95
|
+
.find{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
|
|
96
|
+
.find input{flex:1;min-width:200px;height:36px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-2);padding:0 12px}
|
|
97
|
+
.grid{columns:200px;column-gap:16px}
|
|
98
|
+
.vid{width:100%;break-inside:avoid;margin-bottom:16px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:left;display:flex;flex-direction:column;cursor:pointer}
|
|
99
|
+
.vid:hover{box-shadow:var(--shadow-2)}
|
|
100
|
+
.thumb{position:relative;aspect-ratio:var(--ar);max-width:100%;display:grid;place-items:center;padding:14px;text-align:center;color:#fff;font-weight:700;font-size:14px;background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 30%,#000)) center/cover;overflow:hidden}
|
|
101
|
+
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
|
|
102
|
+
.thumb span.t{position:relative;text-shadow:0 1px 8px rgb(0 0 0/.6);text-wrap:balance}
|
|
103
|
+
.tag{position:absolute;z-index:1;font:600 10px/1 var(--mono);background:rgb(0 0 0/.6);color:#fff;padding:4px 6px;border-radius:4px}
|
|
104
|
+
.tag.sh{top:8px;left:8px}.tag.du{bottom:10px;right:8px}
|
|
105
|
+
.bar{position:absolute;z-index:1;left:0;bottom:0;height:4px;background:var(--run)}
|
|
106
|
+
.vid .meta{padding:10px 12px;display:grid;gap:5px;min-width:0}
|
|
107
|
+
.vid .meta b{overflow-wrap:anywhere}
|
|
108
|
+
.plats{display:flex;flex-wrap:wrap;gap:4px}
|
|
109
|
+
.plats i{font-style:normal;font-size:11px;padding:1px 6px;border-radius:4px;background:var(--hover);color:var(--dim)}
|
|
110
|
+
.plats i.where{background:none;border:1px solid var(--line)}
|
|
111
|
+
.blank{padding:60px 20px;text-align:center;color:var(--dim);display:grid;gap:8px;justify-items:center}
|
|
112
|
+
.blank b{color:var(--ink);font-size:15px}
|
|
113
|
+
/* editor */
|
|
114
|
+
.crumb{color:var(--dim);font-size:12px}
|
|
115
|
+
.crumb button{color:var(--accent)}
|
|
116
|
+
.ehead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
|
|
117
|
+
.ehead h2{margin:0;font-size:20px;flex:1;min-width:0;overflow-wrap:anywhere}
|
|
118
|
+
.acts{display:flex;gap:8px;flex-wrap:wrap}
|
|
119
|
+
.ed{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:20px;align-items:start}
|
|
120
|
+
.player{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:10px;position:sticky;top:0}
|
|
121
|
+
.screen{position:relative;width:100%;aspect-ratio:var(--ar);max-width:100%;border-radius:var(--r-s);overflow:hidden;background:#000}
|
|
122
|
+
.screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none}
|
|
123
|
+
.screen .none{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:#cfd6e6;font-size:12px}
|
|
124
|
+
.ctrl{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;color:var(--dim);font-size:12px}
|
|
125
|
+
.ctrl .play{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
|
|
126
|
+
.ctrl .play svg{width:14px;height:14px;fill:currentColor;stroke:none}
|
|
127
|
+
.strip{position:relative;display:flex;height:26px;border-radius:6px;overflow:hidden;gap:2px}
|
|
128
|
+
.strip button{min-width:4px;font:700 10px/1 var(--mono);color:#fff;background:var(--c)}
|
|
129
|
+
.strip button.on{outline:2px solid var(--ink);outline-offset:-2px}
|
|
130
|
+
.head{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);pointer-events:none}
|
|
131
|
+
.stills{display:flex;gap:6px;overflow-x:auto}
|
|
132
|
+
.stills img{height:90px;border-radius:4px;border:1px solid var(--line)}
|
|
133
|
+
.beats{display:grid;gap:8px;min-width:0}
|
|
134
|
+
.beat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);min-width:0}
|
|
135
|
+
.beat.open{border-color:var(--accent)}
|
|
136
|
+
.beat>button{width:100%;display:grid;grid-template-columns:12px 64px 92px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;text-align:left}
|
|
137
|
+
.beat>button .sw{width:12px;height:12px;border-radius:3px;background:var(--c)}
|
|
138
|
+
.beat>button .k{font-weight:600;text-transform:capitalize}
|
|
139
|
+
.beat>button .tm{font:11px var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
|
|
140
|
+
.beat>button .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
|
|
141
|
+
.beat .form{display:none;padding:0 12px 14px 34px;gap:10px}
|
|
142
|
+
.beat.open .form{display:grid}
|
|
143
|
+
.form label{display:grid;gap:4px;color:var(--dim);font-size:12px}
|
|
144
|
+
.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);color:var(--ink);padding:8px 10px}
|
|
145
|
+
.form textarea{min-height:56px;resize:vertical}
|
|
146
|
+
.form .said{font-size:12px;color:var(--dim);border-left:2px solid var(--line);padding-left:10px}
|
|
147
|
+
.savebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
|
|
148
|
+
.savebar .chips{flex:1}
|
|
149
|
+
.job{display:grid;gap:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
|
|
150
|
+
.job .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
|
151
|
+
.job .prog{height:4px;border-radius:2px;background:var(--hover);overflow:hidden}
|
|
152
|
+
.job .prog i{display:block;height:100%;background:var(--run)}
|
|
153
|
+
.job pre{margin:0;max-height:160px;overflow:auto;font:11px/1.4 var(--mono);color:var(--dim);white-space:pre-wrap;overflow-wrap:anywhere}
|
|
154
|
+
.files{display:grid;gap:8px}
|
|
155
|
+
.file{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;background:var(--bg-2)}
|
|
156
|
+
.file b{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere;flex:1;min-width:0}
|
|
157
|
+
.file a{color:var(--accent)}
|
|
158
|
+
/* send: the mockup's send panel, one tab per way */
|
|
159
|
+
.sendp{margin-top:16px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:12px;max-width:880px}
|
|
160
|
+
.sendp .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
|
161
|
+
.sendp h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
|
|
162
|
+
.sendp select,.sendp textarea{border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);color:var(--ink);padding:8px 10px;max-width:100%;min-width:0}
|
|
163
|
+
.sendp textarea{width:100%;min-height:64px;resize:vertical;font:inherit}
|
|
164
|
+
.sendp label{display:grid;gap:4px;color:var(--dim);font-size:12px}
|
|
165
|
+
.sendp .chip small{color:var(--dim);font-weight:400}
|
|
166
|
+
.sendbox{border:1px solid var(--line);border-radius:var(--r-s);padding:12px;display:grid;gap:10px;align-content:start;background:var(--bg)}
|
|
167
|
+
.sendres.sent{border-color:var(--ok)}.sendres.failed{border-color:var(--danger)}
|
|
168
|
+
.sends{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:12px}
|
|
169
|
+
.sends li{overflow-wrap:anywhere}
|
|
170
|
+
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
|
|
171
|
+
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-s);font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:calc(100vw - 32px)}
|
|
172
|
+
.toast.on{opacity:1}
|
|
173
|
+
/* new video: one form, the mockup's */
|
|
174
|
+
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:22px;max-width:880px}
|
|
175
|
+
.card h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
|
|
176
|
+
.card h3 small{text-transform:none;letter-spacing:0;font-weight:400}
|
|
177
|
+
.src{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
178
|
+
.opt{border:1px solid var(--line);border-radius:var(--r-s);padding:14px;text-align:left;display:grid;gap:4px}
|
|
179
|
+
.opt small{color:var(--dim)}
|
|
180
|
+
.opt.on,.sty.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
|
|
181
|
+
.card textarea,.card input[type=text],.card select{width:100%;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);color:var(--ink);padding:10px}
|
|
182
|
+
.card textarea{min-height:96px;resize:vertical}
|
|
183
|
+
.styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
|
|
184
|
+
.sty{border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;text-align:left;display:grid;gap:2px}
|
|
185
|
+
.sty small{color:var(--dim);font-size:11px}
|
|
186
|
+
.lenrow{display:flex;gap:12px;align-items:center}
|
|
187
|
+
.lenrow input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:28px}
|
|
188
|
+
.lenrow input[type=text]{width:84px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
|
|
189
|
+
.ticks{position:relative;height:16px;margin-right:96px;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
|
|
190
|
+
.ticks span{position:absolute;transform:translateX(-50%)}.ticks span:first-child{transform:none}.ticks span:last-child{transform:translateX(-100%)}
|
|
191
|
+
.warn-t{color:var(--warn)}
|
|
192
|
+
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
|
193
|
+
.two label{display:grid;gap:6px;color:var(--dim);font-size:12px}
|
|
194
|
+
.pickrow{display:flex;gap:8px}
|
|
195
|
+
.foot{display:flex;justify-content:flex-end;gap:8px}
|
|
196
|
+
/* the agent working on this video: its board terminal, here */
|
|
197
|
+
#dock:empty{display:none}
|
|
198
|
+
#dock{display:grid;gap:8px;margin-bottom:16px}
|
|
199
|
+
.agentbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:color-mix(in srgb,var(--run) 10%,var(--bg-2));border:1px solid color-mix(in srgb,var(--run) 45%,var(--line));border-radius:var(--r-s);padding:10px 12px}
|
|
200
|
+
.agentbar.asking{background:color-mix(in srgb,var(--warn) 12%,var(--bg-2));border-color:var(--warn)}
|
|
201
|
+
.agentbar b{flex:1;min-width:0}
|
|
202
|
+
.term{height:min(440px,60vh);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--bg)}
|
|
203
|
+
.term .xterm{height:100%;padding:6px}
|
|
204
|
+
.ask{display:flex;gap:8px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px}
|
|
205
|
+
.ask input{flex:1;min-width:0;border:0;background:none;color:var(--ink);padding:6px}
|
|
206
|
+
.thumb.making{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--run) 30%,#000) 0 14px,color-mix(in srgb,var(--run) 18%,#000) 14px 28px)}
|
|
207
|
+
@media(max-width:640px){.ticks .m-hide{display:none}.src,.two{grid-template-columns:1fr}.styles{grid-template-columns:1fr 1fr}.foot .btn{flex:1;height:44px}.term{height:60vh}}
|
|
208
|
+
@media(max-width:900px){.ed{grid-template-columns:minmax(0,1fr)}.player{position:static;max-width:360px;width:100%;justify-self:center}}
|
|
209
|
+
@media(max-width:640px){.grid{columns:2;column-gap:10px}.vid{margin-bottom:10px}.thumb{font-size:12px;padding:10px}.vid .meta{padding:8px}
|
|
210
|
+
.beat>button{grid-template-columns:12px minmax(0,1fr) 84px}.beat>button .tx{display:none}.beat .form{padding-left:12px}
|
|
211
|
+
.acts{width:100%}.acts .btn{flex:1;height:40px}.chip{min-height:40px}}
|
|
212
|
+
</style>
|
|
213
|
+
</head>
|
|
214
|
+
<body>
|
|
215
|
+
<svg style="display:none"><defs>
|
|
216
|
+
<symbol id="s-idea" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" stroke-dasharray="2 2.5"/></symbol>
|
|
217
|
+
<symbol id="s-start" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" stroke-dasharray="2 2.5"/><path d="M6.5 5.5v5l4-2.5z" fill="currentColor" stroke="none"/></symbol>
|
|
218
|
+
<symbol id="s-run" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/><path d="M8 2a6 6 0 0 1 0 12z" fill="currentColor" stroke="none"/></symbol>
|
|
219
|
+
<symbol id="s-stall" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/><path d="M8 2a6 6 0 0 1 0 12z" fill="currentColor" stroke="none" opacity=".35"/></symbol>
|
|
220
|
+
<symbol id="s-wait" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/><path d="M8 5v3.5M8 11v.1"/></symbol>
|
|
221
|
+
<symbol id="s-done" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="currentColor" stroke="none"/><path d="M5.5 8l1.8 1.8L10.8 6" stroke="var(--bg-2)"/></symbol>
|
|
222
|
+
<symbol id="s-aband" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/><path d="M5.5 5.5l5 5M10.5 5.5l-5 5"/></symbol>
|
|
223
|
+
<symbol id="i-gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></symbol>
|
|
224
|
+
<symbol id="i-inbox" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5.1L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z"/></symbol>
|
|
225
|
+
<symbol id="i-link" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.1.4l3-3a5 5 0 0 0-7.1-7.1l-1.7 1.7M14 11a5 5 0 0 0-7.1-.4l-3 3a5 5 0 0 0 7.1 7.1l1.7-1.7"/></symbol>
|
|
226
|
+
<symbol id="i-note" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></symbol>
|
|
227
|
+
<symbol id="i-video" viewBox="0 0 24 24"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10.5l5-3v9l-5-3z"/></symbol>
|
|
228
|
+
<symbol id="i-board" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16M15 4v16"/></symbol>
|
|
229
|
+
<symbol id="i-side" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></symbol>
|
|
230
|
+
<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></symbol>
|
|
231
|
+
<symbol id="i-moon" viewBox="0 0 24 24"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></symbol>
|
|
232
|
+
<symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6"/></symbol>
|
|
233
|
+
<symbol id="i-folder" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></symbol>
|
|
234
|
+
<symbol id="i-chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></symbol>
|
|
235
|
+
<symbol id="i-wide" viewBox="0 0 24 24"><path d="M3 12h18M7 8l-4 4 4 4M17 8l4 4-4 4"/></symbol>
|
|
236
|
+
<symbol id="i-box" viewBox="0 0 24 24"><path d="M4 5v14M20 5v14M8 12h8M11 9l-3 3 3 3M13 9l3 3-3 3"/></symbol>
|
|
237
|
+
<symbol id="i-term" viewBox="0 0 24 24"><path d="M4 17l6-5-6-5M12 19h8"/></symbol>
|
|
238
|
+
<symbol id="i-max" viewBox="0 0 24 24"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></symbol>
|
|
239
|
+
<symbol id="i-min" viewBox="0 0 24 24"><path d="M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5"/></symbol>
|
|
240
|
+
<symbol id="i-list" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></symbol>
|
|
241
|
+
<symbol id="i-play" viewBox="0 0 24 24"><path d="M7 4.5v15l12-7.5z"/></symbol>
|
|
242
|
+
<symbol id="i-pause" viewBox="0 0 24 24"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></symbol>
|
|
243
|
+
</defs></svg>
|
|
244
|
+
<nav class="rail" aria-label="Main">
|
|
245
|
+
<div class="top"><a class="home" href="/" title="Board" aria-label="kaizen board"><pre class="mark"><span>█ █ ▄▀█ █ ▀▀█ █▀▀ █▄ █</span>
|
|
246
|
+
<span>█▀▄ █▀█ █ ▄▀ ██▄ █ ▀█</span>
|
|
247
|
+
<span>█ █ █ █ █ █▄▄ █▄▄ █ █</span></pre><span class="mascot"></span></a><button class="ib" id="fold" aria-label="Collapse menu" title="Collapse menu"><svg><use href="#i-side"/></svg></button></div>
|
|
248
|
+
<a class="it" href="/?view=icebox" data-view="sources" title="Icebox: requests gathered from your sources"><svg><use href="#i-inbox"/></svg><span class="lbl">Icebox</span></a>
|
|
249
|
+
<a class="it" href="/" data-view="board" title="Board"><svg><use href="#i-board"/></svg><span class="lbl">Board</span></a>
|
|
250
|
+
<a class="it" href="/notebook" data-view="notes" title="Notes"><svg><use href="#i-note"/></svg><span class="lbl">Notes</span></a>
|
|
251
|
+
<a class="it" href="/video" data-view="video" title="Video: make and edit videos"><svg><use href="#i-video"/></svg><span class="lbl">Video</span></a>
|
|
252
|
+
<a class="it" href="/?view=terminal" data-view="terminal" title="Terminal: every agent running in its card"><svg><use href="#i-term"/></svg><span class="lbl">Terminal</span></a>
|
|
253
|
+
<a class="it" href="/?view=settings" data-view="settings" title="Settings"><svg><use href="#i-gear"/></svg><span class="lbl">Settings</span></a>
|
|
254
|
+
<span class="end"></span>
|
|
255
|
+
<div class="theme" role="group" aria-label="Theme"><button data-t="light" title="Light theme"><svg><use href="#i-sun"/></svg><span class="lbl">Light</span></button><button data-t="dark" title="Dark theme"><svg><use href="#i-moon"/></svg><span class="lbl">Dark</span></button></div>
|
|
256
|
+
</nav>
|
|
257
|
+
<script>
|
|
258
|
+
// Side menu: theme and collapse, the same lines in board.html and notes.html. Runs before
|
|
259
|
+
// the page draws, so a stored theme or a collapsed menu never flashes the default first.
|
|
260
|
+
(()=>{const r=document.documentElement,wide=matchMedia("(max-width:1100px)"),phone=matchMedia("(max-width:640px)"),os=matchMedia("(prefers-color-scheme: dark)");
|
|
261
|
+
// The toggle's choice is kept per browser; with none, the width decides. A phone always gets icons.
|
|
262
|
+
let fold=null;try{fold=localStorage.getItem("kz-rail")}catch(e){}
|
|
263
|
+
const rail=()=>{const m=phone.matches||(fold?fold==="min":wide.matches),b=document.getElementById("fold");r.dataset.rail=m?"min":"full";b.title=m?"Expand menu":"Collapse menu";b.setAttribute("aria-label",b.title);b.setAttribute("aria-expanded",!m)};
|
|
264
|
+
wide.addEventListener("change",rail);phone.addEventListener("change",rail);rail();
|
|
265
|
+
document.getElementById("fold").onclick=()=>{fold=r.dataset.rail==="min"?"full":"min";try{localStorage.setItem("kz-rail",fold)}catch(e){}rail()};
|
|
266
|
+
// Theme: light, dark, or unset for system, in kz-theme. The switch shows what is on screen.
|
|
267
|
+
const paint=()=>{const d=r.dataset.theme?r.dataset.theme==="dark":os.matches;document.querySelectorAll(".theme button").forEach(b=>b.setAttribute("aria-pressed",(b.dataset.t==="dark")===d))};
|
|
268
|
+
window.setTheme=t=>{if(t==="system")delete r.dataset.theme;else r.dataset.theme=t;try{t==="system"?localStorage.removeItem("kz-theme"):localStorage.setItem("kz-theme",t)}catch(e){}paint();dispatchEvent(new Event("kz-theme"))};
|
|
269
|
+
try{const t=localStorage.getItem("kz-theme");if(t)r.dataset.theme=t}catch(e){}
|
|
270
|
+
// Motion: full, reduce, or unset to follow the system's reduced-motion, in kz-motion.
|
|
271
|
+
window.setMotion=m=>{if(m==="system")delete r.dataset.motion;else r.dataset.motion=m;try{m==="system"?localStorage.removeItem("kz-motion"):localStorage.setItem("kz-motion",m)}catch(e){}};
|
|
272
|
+
try{const m=localStorage.getItem("kz-motion");if(m)r.dataset.motion=m}catch(e){}
|
|
273
|
+
os.addEventListener("change",paint);paint();
|
|
274
|
+
document.querySelectorAll(".theme button").forEach(b=>b.onclick=()=>setTheme(b.dataset.t))})();
|
|
275
|
+
</script>
|
|
276
|
+
<div class="app">
|
|
277
|
+
<div class="hdr">
|
|
278
|
+
<h1>Videos</h1>
|
|
279
|
+
<span class="sp"></span>
|
|
280
|
+
<button class="btn pri" id="new">+ New video</button>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="page" id="lib">
|
|
283
|
+
<div class="find">
|
|
284
|
+
<input type="search" id="q" placeholder="Search title, words said, preset, platform, folder" aria-label="Search videos">
|
|
285
|
+
<div class="chips" id="fstat" role="group" aria-label="Status"><button class="chip on" data-f="">All</button><button class="chip" data-f="draft">Draft</button><button class="chip" data-f="busy">Rendering</button><button class="chip" data-f="ready">Ready</button></div>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="grid" id="grid"></div>
|
|
288
|
+
<div class="blank" id="nores" hidden><b>No videos match</b><span>Try a word from the script, or clear the search.</span></div>
|
|
289
|
+
<div class="blank" id="empty" hidden><b>No videos yet</b><span id="emptyhow"></span></div>
|
|
290
|
+
</div>
|
|
291
|
+
<div class="page" id="edit" hidden><div id="dock"></div><div id="editbody"></div><div id="sendp"></div></div>
|
|
292
|
+
<div class="page" id="wiz" hidden></div>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="toast" id="toast" role="status"></div>
|
|
295
|
+
<script>document.querySelector('.rail a[data-view="video"]').setAttribute("aria-current","page")</script>
|
|
296
|
+
<script src="/video.js"></script>
|
|
297
|
+
</body>
|
|
298
|
+
</html>
|
package/web/video.js
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/* kaizen video page c24cf970db99487d -- generated by bun run build:web from web/video.ts; do not edit */
|
|
2
|
+
(()=>{var x={TikTok:"9x16","Instagram Reels":"9x16","YouTube Shorts":"9x16","WhatsApp Status":"9x16",YouTube:"16x9","Instagram feed":"4x5"},U={"9x16":[1080,1920],"16x9":[1920,1080],"4x5":[1080,1350]},A=["#b4462f","#a8720a","#2d50a5","#0f8fa3","#1f9d55","#7a4fb5","#c2416b","#5b6b8c"],d=(t)=>document.getElementById(t),o=(t)=>String(t??"").replace(/[&<>"']/g,(e)=>`&#${e.charCodeAt(0)};`),h=(t)=>t==null?"":`${Math.floor(t/60)}:${String(Math.round(t%60)).padStart(2,"0")}`,T=(t)=>(t??"9x16").replace("x",":"),v=(t,e)=>`/video/f/${t.place}/${encodeURIComponent(t.name)}/${e.split("/").map(encodeURIComponent).join("/")}`,G={draft:"Draft",queued:"Queued",building:"Building preview",rendering:"Rendering",ready:"Ready",failed:"Failed"},I=[],Y=[],R=[],le=(t,e)=>Y.filter((s)=>s.place===t&&s.name===e).sort((s,i)=>i.at-s.at)[0],L="",se;function p(t){let e=d("toast");e.textContent=t,e.classList.add("on"),clearTimeout(se),se=setTimeout(()=>e.classList.remove("on"),3200)}async function w(t,e){let s=await fetch(t,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify(e)}),i=await s.json().catch(()=>({}));if(!s.ok)throw Error(i.error||i.why||`${s.status}`);return i}async function j(){let t;try{t=await fetch("/video/list")}catch{p("The board is not running");return}let e=await t.json();if(I=e.videos,Y=e.agents??[],R=e.places,d("emptyhow").innerHTML=`Videos are folders under <code>videos/</code> in ${e.places.map((s)=>`<code>${o(s.dir)}</code>`).join(" or ")}. Ask the kaizen-video skill to make one, and it shows up here.`,K(),f)oe(),pe();me()}function be(){return I.flatMap((t)=>{let e=t.outputs.length?t.outputs:[null],s=new Map;for(let i of e)if(!s.has(i?.format??t.formats[0]))s.set(i?.format??t.formats[0],i);return[...s].map(([i,n])=>({v:t,f:i,o:n}))})}function K(){let t=d("q").value.trim().toLowerCase().split(/\s+/).filter(Boolean),e=be(),s=e.filter(({v:n})=>{let a=[n.title,n.name,n.text,n.preset,n.where,n.mode,...n.platforms].join(" ").toLowerCase();return(L==="busy"?["queued","building","rendering"].includes(n.status):!L||n.status===L)&&t.every((g)=>a.includes(g))}),i=Y.filter((n)=>n.alive&&!I.some((a)=>a.place===n.place&&a.name===n.name)&&t.every((a)=>n.name.includes(a))&&(!L||L==="busy"||L==="draft"));d("grid").innerHTML=i.map((n)=>`<article class="vid" tabindex="0" data-p="${n.place}" data-n="${o(n.name)}" aria-label="${o(n.name)}, being made">
|
|
3
|
+
<div class="thumb making" style="--ar:9/16"><span class="t">${n.asking?"Claude is asking you something":"Claude is making this"}</span></div>
|
|
4
|
+
<div class="meta"><b>${o(n.name)}</b><div class="plats"><i class="where">${o(R[n.place]?.label??"")}</i></div>
|
|
5
|
+
<span class="pill ${n.asking?"draft":"building"}">${n.asking?"Needs your answer":"Being made"}</span></div></article>`).join("")+s.map(({v:n,f:a,o:c})=>{let[g,u]=U[a],E=c?.thumb?v(n,c.thumb):n.poster?v(n,n.poster):"",W=n.platforms.filter((D)=>x[D]===a),te=n.job&&(n.job.state==="running"||n.job.state==="queued"),fe=te&&n.job.total?Math.round(n.job.step/n.job.total*100):0;return`<article class="vid" tabindex="0" data-p="${n.place}" data-n="${o(n.name)}" aria-label="${o(n.name)}, ${T(a)}">
|
|
6
|
+
<div class="thumb" style="--ar:${g}/${u}">${E?`<img src="${o(E)}" alt="" loading="lazy">`:""}
|
|
7
|
+
<span class="tag sh">${T(a)}</span><span class="t">${E?"":o(n.title)}</span>
|
|
8
|
+
${(c?.seconds??n.seconds)!=null?`<span class="tag du">${h(c?.seconds??n.seconds)}</span>`:""}
|
|
9
|
+
${te?`<span class="bar" style="width:${Math.max(6,fe)}%"></span>`:""}</div>
|
|
10
|
+
<div class="meta"><b>${o(n.name)}</b>
|
|
11
|
+
<div class="plats">${W.map((D)=>`<i>${o(D)}</i>`).join("")}<i class="where" title="Where it lives">${o(n.where)}</i></div>
|
|
12
|
+
<span class="pill ${n.status}">${G[n.status]}${n.preset?` · ${o(n.preset)}`:""}</span></div></article>`}).join(""),d("nores").hidden=!e.length||!!s.length||!!i.length,d("empty").hidden=!!e.length||!!i.length}d("grid").addEventListener("click",(t)=>{let e=t.target.closest(".vid");if(e)C(Number(e.dataset.p),e.dataset.n)});d("grid").addEventListener("keydown",(t)=>{let e=t.target.closest(".vid");if(e&&(t.key==="Enter"||t.key===" "))t.preventDefault(),C(Number(e.dataset.p),e.dataset.n)});d("q").addEventListener("input",K);d("fstat").addEventListener("click",(t)=>{let e=t.target.closest(".chip");if(!e)return;L=e.dataset.f;for(let s of d("fstat").querySelectorAll(".chip"))s.classList.toggle("on",s===e);K()});var f=null,m=null,H=new Map,b=new Set,k=0,_=!1,B="";function C(t,e){let s=t==null?"":`#${t}/${encodeURIComponent(e)}`;if(location.hash!==s)history.pushState(null,"",s||location.pathname);P()}function P(){let t=location.hash.match(/^#(\d+)\/(.+)$/);f=t?{place:Number(t[1]),name:decodeURIComponent(t[2])}:null;let e=location.hash==="#new";if(d("lib").hidden=!!f||e,d("edit").hidden=!f,d("wiz").hidden=!e,m=null,H=new Map,l=null,d("sendp").innerHTML="",f)oe(!0);else d("editbody").innerHTML="";if(e)ee();me()}addEventListener("popstate",P);var S=()=>f&&I.find((t)=>t.place===f.place&&t.name===f.name);async function oe(t=!1){let e=S();if(!e){let a=f&&le(f.place,f.name);if(a)d("editbody").innerHTML=`<div class="crumb"><button data-back>Videos</button> / ${o(R[a.place]?.label??"")}</div>
|
|
13
|
+
<div class="ehead"><h2>${o(a.name)}</h2></div><p class="note">Claude is setting this video up. Answer its questions above; the editor opens here once the video has its storyboard.</p>`;else if(I.length)d("editbody").innerHTML='<p class="blank">That video is gone. <button class="btn" data-back>Back to videos</button></p>';return}let s=JSON.stringify(e.job&&[e.job.id,e.job.state,e.job.step]);if(!t&&m&&s===B)return;let i=B&&e.job?.state==="done"&&s!==B;B=s;let n=t||!d("edit").querySelector(".ed");if(e.mode==="film"){let a=await fetch(`/video/film?p=${e.place}&name=${encodeURIComponent(e.name)}`);if(!a.ok){d("editbody").innerHTML=`<p class="blank">Could not read this film's film.json.</p>`;return}m=await a.json()}if(n)b=new Set(m?.platforms.length?m.platforms:e.platforms);if(n||e.mode!=="film")he(e);else if(de(e),ce(e),i)ve(e)}function he(t){Z=!1;let e=m?.format??t.formats[0]??"9x16",[s,i]=t.size??U[e],n=m?.beats??[];k=n.reduce((a,c)=>Math.max(a,c.start+(c.len??0)),0)||t.seconds||0,d("editbody").innerHTML=`
|
|
14
|
+
<div class="crumb"><button data-back>Videos</button> / ${o(t.where)}</div>
|
|
15
|
+
<div class="ehead"><h2>${o(t.name)}</h2><span class="pill ${t.status}" id="stat">${G[t.status]}</span>
|
|
16
|
+
<div class="acts">${t.mode==="film"?'<button class="btn" id="stillsBtn" title="Build the film and take three still frames">Preview stills</button>':""}
|
|
17
|
+
<button class="btn pri" id="render">Render final</button></div></div>
|
|
18
|
+
<div class="ed">
|
|
19
|
+
<div class="player">
|
|
20
|
+
<div class="screen" style="--ar:${s}/${i}" id="screen">${t.built?`<iframe id="frame" title="Preview" src="${o(v(t,"v/film/index.html"))}" width="${s}" height="${i}"></iframe>`:'<div class="none">No preview yet. Press <b>Preview stills</b> or save a change to build it.</div>'}</div>
|
|
21
|
+
<div class="ctrl"><button class="play" id="play" aria-label="Play" ${t.built?"":"disabled"}><svg><use href="#i-play"/></svg></button><span id="time">0:00 / ${h(k)}</span><span class="sp"></span><span id="shape">${T(e)} · ${o(t.preset)}</span></div>
|
|
22
|
+
${n.length?`<div class="strip" id="strip">${n.map((a,c)=>`<button style="flex:${Math.max(1,a.len??1)};--c:${A[c%A.length]}" data-b="${c}" title="${o(a.kind)} ${h(a.start)}">${c+1}</button>`).join("")}<span class="head" id="head" style="left:0"></span></div>`:""}
|
|
23
|
+
<div class="stills" id="stills">${(m?.stills??[]).map((a)=>`<a href="${o(v(t,a))}" target="_blank" rel="noopener"><img src="${o(v(t,a))}?t=${Date.now()}" alt="Still frame"></a>`).join("")}</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="beats">
|
|
26
|
+
<div id="job"></div>
|
|
27
|
+
${t.mode==="film"?n.map((a,c)=>ge(a,c)).join(""):'<p class="note">A video made from your footage. Its words come from what you said; change them by asking the kaizen-video skill. Render it again here.</p>'}
|
|
28
|
+
<div class="savebar"><div class="chips" id="plats" role="group" aria-label="Where it goes">${Object.keys(x).map((a)=>`<button class="chip${b.has(a)?" on":""}" data-p="${o(a)}">${o(a)}</button>`).join("")}</div>
|
|
29
|
+
${t.mode==="film"?'<button class="btn pri" id="save">Save changes</button>':""}</div>
|
|
30
|
+
<p class="note" id="platnote"></p>
|
|
31
|
+
<div class="ask"><input id="askin" maxlength="2000" placeholder="Ask Claude for a bigger change, like a new voice line or a punchier hook" aria-label="Ask Claude to change this video"><button class="btn pri" id="askgo">Send</button></div>
|
|
32
|
+
<p class="note">Claude works in a terminal at the top of this page; answer it there.</p>
|
|
33
|
+
<div class="files" id="files"></div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>`,Q(),re(),de(t),ce(t)}function ge(t,e){let s={...t,...H.get(e)},i=(c,g)=>typeof t[c]==="string"?`<label>${g}<input data-i="${e}" data-k="${c}" value="${o(s[c])}" maxlength="400"></label>`:"",n=Array.isArray(t.items)?`<label>List, one per line<textarea data-i="${e}" data-k="items">${o((s.items??[]).join(`
|
|
36
|
+
`))}</textarea></label>`:"",a=i("kick","Small line above")+i("title","Words on screen")+i("sub","Line below")+n;return`<div class="beat" data-b="${e}"><button><span class="sw" style="--c:${A[e%A.length]}"></span><span class="k">${o(t.kind)}</span>
|
|
37
|
+
<span class="tm">${h(t.start)}–${h(t.start+(t.len??0))}</span><span class="tx">${o(s.title??s.kick??t.line.replace(/\[[^\]]*\]\s*/g,""))}</span></button>
|
|
38
|
+
<div class="form">${a||'<p class="note">No words on screen in this beat.</p>'}
|
|
39
|
+
${t.line?`<div class="said">Said: ${o(t.line.replace(/\[[^\]]*\]\s*/g,""))}<br><span class="note">Changing what is said records the voice again; ask Claude for that.</span></div>`:""}</div></div>`}function Q(){let t=document.getElementById("frame"),e=document.getElementById("screen");if(t&&e)t.style.transform=`scale(${e.clientWidth/Number(t.width)})`}addEventListener("resize",Q);function ve(t){let e=document.getElementById("screen");if(!e)return;let[s,i]=t.size??U[m?.format??"9x16"];e.style.setProperty("--ar",`${s}/${i}`),e.innerHTML=`<iframe id="frame" title="Preview" src="${o(v(t,"v/film/index.html"))}?t=${Date.now()}" width="${s}" height="${i}"></iframe>`,d("play").disabled=!1,Q();let n=document.getElementById("stills");if(n&&m)n.innerHTML=m.stills.map((a)=>`<a href="${o(v(t,a))}" target="_blank" rel="noopener"><img src="${o(v(t,a))}?t=${Date.now()}" alt="Still frame"></a>`).join("")}function re(){let t=[...new Set([...b].map((s)=>x[s]))],e=document.getElementById("platnote");if(e)e.textContent=b.size?`Render makes ${t.length} file${t.length>1?"s":""}: ${t.map((s)=>T(s)).join(", ")}`:"Pick where it goes, then Render."}function de(t){let e=document.getElementById("job"),s=document.getElementById("stat");if(s)s.className=`pill ${t.status}`,s.textContent=G[t.status];let i=!!t.job&&(t.job.state==="running"||t.job.state==="queued");for(let g of["render","stillsBtn","save"]){let u=document.getElementById(g);if(u)u.disabled=i}if(!e)return;let n=t.job;if(!n||n.state==="done"||n.state==="cancelled"){e.innerHTML="";return}let a=n.total?Math.round(n.step/n.total*100):0,c=n.state==="queued"?"Waiting for another video to finish":n.state==="failed"?n.error??"Failed":`${n.label[n.step]??"Working"} (step ${n.step+1} of ${n.total})`;e.innerHTML=`<div class="job"><div class="row"><b>${o(c)}</b><span class="sp"></span>${i?`<button class="btn" data-cancel="${n.id}">Cancel</button>`:""}</div>
|
|
40
|
+
${i?`<div class="prog"><i style="width:${Math.max(4,a)}%"></i></div>`:""}
|
|
41
|
+
${n.state==="failed"&&m?.log?`<pre>${o(m.log.split(`
|
|
42
|
+
`).slice(-25).join(`
|
|
43
|
+
`))}</pre>`:""}</div>`}function ce(t){let e=document.getElementById("files");if(!e)return;e.innerHTML=t.outputs.length?'<p class="note" style="margin:0">Finished files</p>'+t.outputs.map((s)=>`<div class="file"><span class="pill ready">${T(s.format)}</span><b>${o(s.file.split("/").pop())}</b>
|
|
44
|
+
${s.seconds!=null?`<span class="note" style="margin:0">${h(s.seconds)}</span>`:""}
|
|
45
|
+
<a href="${o(v(t,s.file))}" target="_blank" rel="noopener">Open</a>${s.srt?`<a href="${o(v(t,s.srt))}" target="_blank" rel="noopener">Captions</a>`:""}
|
|
46
|
+
<button class="btn" data-sendfile="${o(s.file)}">Send</button></div>`).join(""):""}var l=null;function $e(t){let e=S();if(!e)return;if(l={file:t,via:l?.via??"localsend",devices:l?.devices??null,devNote:l?.devNote??null,dev:l?.dev??"",chats:l?.chats??null,chatErr:null,chat:l?.chat??"",text:l?.text||e.title||e.name,searching:!1},M(),d("sendp").scrollIntoView({behavior:"smooth",block:"nearest"}),l.via==="localsend"&&!l.devices)J(!1);else if(l.via==="whatsapp"&&!l.chats)ue()}async function J(t){if(!l)return;l.searching=!0,M();try{let e=await(await fetch(`/video/devices${t?"?fresh=1":""}`)).json();if(l){if(l.devices=e.devices,l.devNote=e.note,!e.devices.some((s)=>s.id===l.dev))l.dev=e.devices[0]?.id??""}}catch{p("The board is not running")}if(l)l.searching=!1,M()}async function ue(){if(!l)return;try{let t=await(await fetch("/video/chats")).json();if(l){if(l.chats=t.chats,l.chatErr=t.error??null,!t.chats.some((e)=>e.id===l.chat))l.chat=t.chats[0]?.id??""}}catch{p("The board is not running")}M()}function M(){let t=d("sendp"),e=S();if(!l||!e){t.innerHTML="";return}let s=(n)=>n.deviceModel||n.deviceType||"",i=l.via==="localsend";t.innerHTML=`<div class="sendp"><div class="row"><h3>Send</h3>
|
|
47
|
+
<label class="sr" for="sfile">File</label><select id="sfile">${e.outputs.flatMap((n)=>[n.file,n.srt,n.thumb]).filter(Boolean).map((n)=>`<option value="${o(n)}"${n===l.file?" selected":""}>${o(n.split("/").pop())}</option>`).join("")}</select>
|
|
48
|
+
<span class="sp"></span><button class="ib" data-sclose aria-label="Close send">✕</button></div>
|
|
49
|
+
<div class="chips" role="tablist"><button class="chip${i?" on":""}" role="tab" aria-selected="${i}" data-via="localsend">LocalSend</button><button class="chip${i?"":" on"}" role="tab" aria-selected="${!i}" data-via="whatsapp">WhatsApp <small>via Hermes</small></button></div>
|
|
50
|
+
${i?`<div class="sendbox">
|
|
51
|
+
<div class="chips" role="group" aria-label="Device">${l.searching?'<span class="note">Looking for devices…</span>':(l.devices??[]).map((n)=>`<button class="chip${n.id===l.dev?" on":""}" data-dev="${o(n.id)}">${o(n.alias)}${s(n)?` <small>${o(s(n))}</small>`:""}</button>`).join("")||'<span class="note">No devices found. Open LocalSend on the phone, on the same Wi‑Fi, then search again.</span>'}</div>
|
|
52
|
+
${l.devNote?`<span class="note">${o(l.devNote)}</span>`:""}
|
|
53
|
+
<div class="row"><button class="btn" data-search ${l.searching?"disabled":""}>Search again</button><span class="sp"></span><button class="btn pri" data-sgo ${l.dev&&!l.searching?"":"disabled"}>Send to device</button></div>
|
|
54
|
+
<span class="note">The device asks to accept; it has 2 minutes.</span></div>`:`<div class="sendbox">
|
|
55
|
+
${l.chatErr?`<span class="note">${o(l.chatErr)}</span>`:l.chats?`<label>Chat<select id="schat">${l.chats.map((n)=>`<option value="${o(n.id)}"${n.id===l.chat?" selected":""}>${o(n.name)}${n.type?` (${o(n.type)})`:""}</option>`).join("")}</select></label>`:'<span class="note">Asking Hermes for its chats…</span>'}
|
|
56
|
+
<label>Message<textarea id="stext" maxlength="1000">${o(l.text)}</textarea></label>
|
|
57
|
+
<div class="row"><span class="sp"></span><button class="btn pri" data-sgo ${l.chat?"":"disabled"}>Send on WhatsApp</button></div></div>`}
|
|
58
|
+
<div id="sendst"></div></div>`,pe()}var we=(t)=>new Date(t).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"});function pe(){let t=document.getElementById("sendst"),e=S();if(!t||!e)return;let s=e.send,i=(a)=>a.state==="sent"?`Sent to ${a.to}`:a.state==="failed"?a.error??"Failed":a.state==="waiting"?a.via==="localsend"?`Waiting for ${a.to} to accept…`:`Hermes is sending to ${a.to}…`:`Sending to ${a.to}… ${a.pct}%`,n=!!s&&(s.state==="waiting"||s.state==="uploading");t.innerHTML=(s?`<div class="job sendres ${s.state}" role="status"><div class="row"><b>${o(i(s))}</b></div>${n&&s.via==="localsend"?`<div class="prog"><i style="width:${Math.max(4,s.pct)}%"></i></div>`:""}</div>`:"")+(e.sends.length?`<p class="note" style="margin:0">Recent sends</p><ul class="sends">${e.sends.map((a)=>`<li><span class="pill ${a.state==="sent"?"ready":"failed"}">${a.state==="sent"?"Sent":"Failed"}</span> ${o(a.file.split("/").pop())} → ${o(a.to)}${a.via==="whatsapp"?" (WhatsApp)":""}, ${we(a.at)}${a.state==="failed"&&a.error?` <span class="note">${o(a.error)}</span>`:""}</li>`).join("")}</ul>`:"");for(let a of document.querySelectorAll("#sendp [data-sgo]"))if(n)a.disabled=!0}d("sendp").addEventListener("click",async(t)=>{let e=t.target,s=S();if(!l||!s)return;if(e.closest("[data-sclose]"))return l=null,M();let i=e.closest("[data-via]");if(i)return l.via=i.dataset.via,M(),l.via==="localsend"?l.devices?void 0:J(!1):l.chats?void 0:ue();let n=e.closest("[data-dev]");if(n)return l.dev=n.dataset.dev,M();if(e.closest("[data-search]"))return J(!0);if(!e.closest("[data-sgo]"))return;try{await w("/video/send",{p:s.place,name:s.name,file:l.file,via:l.via,to:l.via==="localsend"?l.dev:l.chat,text:l.text}),p(l.via==="localsend"?"Accept it on the device":"Hermes is sending it")}catch(a){p(a instanceof Error?a.message:String(a))}j()});d("sendp").addEventListener("change",(t)=>{let e=t.target;if(!l)return;if(e.id==="sfile")l.file=e.value;if(e.id==="schat")l.chat=e.value});d("sendp").addEventListener("input",(t)=>{let e=t.target;if(l&&e.id==="stext")l.text=e.value});function ne(t,e=!0){document.querySelectorAll(".beat").forEach((i)=>i.classList.toggle("open",Number(i.dataset.b)===t)),document.querySelectorAll("#strip button").forEach((i)=>i.classList.toggle("on",Number(i.dataset.b)===t));let s=m?.beats[t];if(Z=!0,e&&s)X({kz:"seek",t:s.start+Math.min(1.2,(s.len??0)/2)})}var X=(t)=>document.getElementById("frame")?.contentWindow?.postMessage(t,location.origin);addEventListener("message",(t)=>{if(t.origin!==location.origin||t.data?.kz!=="time")return;let{t:e,dur:s,on:i}=t.data;k=s||k;let n=document.getElementById("time"),a=document.getElementById("head");if(n)n.textContent=`${h(e)} / ${h(k)}`;if(a&&k)a.style.left=`${e/k*100}%`;if(i!==_){_=i;let c=document.getElementById("play");if(c)c.innerHTML=`<svg><use href="#i-${i?"pause":"play"}"/></svg>`,c.setAttribute("aria-label",i?"Pause":"Play")}});d("edit").addEventListener("click",async(t)=>{let e=t.target,s=S();if(e.closest("[data-back]"))return C(null);if(!s)return;let i=e.closest(".beat>button");if(i)return ne(Number(i.parentElement.dataset.b));let n=e.closest("#strip button");if(n)return ne(Number(n.dataset.b));if(e.closest("#play"))return X({kz:_?"pause":"play"});let a=e.closest("#plats .chip");if(a){let u=a.dataset.p;return b.has(u)?b.delete(u):b.add(u),a.classList.toggle("on",b.has(u)),re()}let c=e.closest("[data-sendfile]");if(c)return $e(c.dataset.sendfile);let g=e.closest("[data-cancel]");try{if(g)await w("/video/cancel",{id:Number(g.dataset.cancel)}),p("Cancelled");else if(e.closest("#save")){let u=[...H].map(([E,W])=>({i:E,...W}));await w("/video/save",{p:s.place,name:s.name,edits:u,platforms:[...b]}),H=new Map,p(u.length?"Saved. Building the preview…":"Saved")}else if(e.closest("#stillsBtn"))await w("/video/job",{p:s.place,name:s.name,kind:"preview"}),p("Building the film and taking stills…");else if(e.closest("#askgo")){let u=d("askin").value.trim();if(!u)return p("Write what to change first");let E=await w("/video/ask",{p:s.place,name:s.name,text:u});d("askin").value="",p(E.pty?"Claude is on it. Its terminal is at the top of the page.":"Claude opened in a terminal window."),scrollTo({top:0,behavior:"smooth"})}else if(e.closest("#render")){if(!b.size)return p("Pick where it goes first");if(s.mode==="film")await w("/video/save",{p:s.place,name:s.name,edits:[],platforms:[...b],build:!1});let u=await w("/video/job",{p:s.place,name:s.name,kind:"render",platforms:[...b]});p(`Rendering ${u.job.total} file${u.job.total>1?"s":""}. You can leave this page.`)}else return}catch(u){p(u instanceof Error?u.message:String(u))}j()});d("edit").addEventListener("input",(t)=>{let e=t.target,s=Number(e.dataset.i),i=e.dataset.k;if(!i||!m)return;let n=H.get(s)??{};if(n[i]=i==="items"?e.value.split(`
|
|
59
|
+
`).map((a)=>a.trim()).filter(Boolean):e.value,H.set(s,n),i==="title"){let a=e.closest(".beat")?.querySelector(".tx");if(a)a.textContent=e.value}});var Z=!1;document.addEventListener("load",(t)=>{if(t.target.id==="frame"&&!Z)X({kz:"seek",t:Math.min(1.5,k/2)})},!0);var ae=null,ye=()=>ae??=new Promise((t,e)=>{let s=document.createElement("link");s.rel="stylesheet",s.href="/term.css",document.head.append(s);let i=document.createElement("script");i.src="/term.js",i.onload=()=>t(window.kzTerm),i.onerror=()=>{ae=null,e(Error("terminal failed to load"))},document.head.append(i)}),y=null;async function me(){let t=d("dock"),e=f&&le(f.place,f.name);if(!e){y?.off(),y=null,t.innerHTML="";return}if(y?.key!==e.pty){y?.off(),y=null,t.innerHTML='<div class="agentbar" id="abar"></div><div class="term" id="term"></div>';try{let i=await ye(),n=document.getElementById("term");if(n&&!y)y={key:e.pty,off:i(n,e.pty,()=>j())}}catch{y={key:e.pty,off:()=>{}};let i=document.getElementById("term");if(i)i.textContent="The terminal could not load. Open it on the board instead."}}let s=document.getElementById("abar");if(!s)return;s.className="agentbar"+(e.alive&&e.asking?" asking":""),s.innerHTML=`<b>${!e.alive?"Claude finished. Its terminal stays here for a few minutes.":e.asking?"Claude is asking you something: answer in the terminal below.":"Claude is working on this video."}</b>
|
|
60
|
+
<a class="btn" href="/?view=terminal" target="_blank" rel="noopener">Open on the board</a>`}var ke={id:"Indonesian",en:"English"},r={source:"brief",brief:"",folder:"",preset:"",platforms:new Set(["TikTok"]),seconds:60,language:"id",place:0},ie=[],N={},z=15,F=300,V=(t)=>`${(t-z)/(F-z)*100}%`;async function ee(){try{let s=await(await fetch(`/video/presets?p=${r.place}`)).json();ie=s.presets,N=s.limits}catch{p("The board is not running");return}let t=r.source==="brief"?"film":"footage",e=ie.filter((s)=>s.kind===t);if(!e.some((s)=>s.name===r.preset))r.preset=e[0]?.name??"";d("wiz").innerHTML=`
|
|
61
|
+
<div class="crumb"><button data-back>Videos</button> /</div>
|
|
62
|
+
<div class="ehead"><h2>New video</h2></div>
|
|
63
|
+
<form class="card" id="wform" novalidate>
|
|
64
|
+
<div><h3>Start from</h3><div class="src">
|
|
65
|
+
<button type="button" class="opt${r.source==="brief"?" on":""}" data-src="brief"><b>A brief</b><small>Describe it. Claude writes the script, the narration, the cards and picks music.</small></button>
|
|
66
|
+
<button type="button" class="opt${r.source==="footage"?" on":""}" data-src="footage"><b>My footage</b><small>A talking-head video already on this computer. Claude cuts dead air and retakes, then captions it.</small></button>
|
|
67
|
+
</div></div>
|
|
68
|
+
${r.source==="brief"?`<label style="display:grid;gap:6px"><h3 style="margin:0">Brief</h3><textarea id="wbrief" maxlength="4000" placeholder="60-second promo for … in Indonesian, friendly, ends with …">${o(r.brief)}</textarea></label>`:`<div><h3>Footage folder</h3><div class="pickrow"><input type="text" id="wfolder" value="${o(r.folder)}" placeholder="/home/you/Videos/recording" aria-label="Footage folder"><button type="button" class="btn" id="wpick">Pick…</button></div>
|
|
69
|
+
<p class="note">Claude copies the video from this folder into the video's own folder; the original stays where it is.</p></div>`}
|
|
70
|
+
<div><h3>Style preset</h3><div class="styles">${e.map((s)=>`<button type="button" class="sty${s.name===r.preset?" on":""}" data-preset="${o(s.name)}"><b>${o(s.label)}</b><small>${o(s.name)}</small></button>`).join("")||`<p class="note">No ${t} presets found.</p>`}</div></div>
|
|
71
|
+
<div><h3>Where it goes <small>(pick one or more)</small></h3><div class="chips" id="wplats">${Object.keys(x).map((s)=>`<button type="button" class="chip${r.platforms.has(s)?" on":""}" data-plat="${o(s)}">${o(s)}</button>`).join("")}</div><p class="note" id="wplatnote"></p></div>
|
|
72
|
+
<div><h3>Length</h3>
|
|
73
|
+
<div class="lenrow"><input type="range" id="wlen" min="${z}" max="${F}" step="5" value="${Math.min(F,r.seconds)}" aria-label="Length in seconds"><input type="text" id="wlentxt" value="${h(r.seconds)}" inputmode="numeric" aria-label="Length as minutes:seconds"></div>
|
|
74
|
+
<div class="ticks"><span style="left:0">0:15</span><span class="m-hide" style="left:${V(60)}">1:00</span><span style="left:${V(120)}">2:00</span><span style="left:${V(180)}">3:00</span><span style="left:100%">5:00</span></div>
|
|
75
|
+
<p class="note" id="wlennote"></p></div>
|
|
76
|
+
<div class="two">
|
|
77
|
+
<label>Language<select id="wlang">${Object.entries(ke).map(([s,i])=>`<option value="${s}"${s===r.language?" selected":""}>${i}</option>`).join("")}</select></label>
|
|
78
|
+
<label>Save in<select id="wplace">${R.map((s)=>`<option value="${s.i}"${s.i===r.place?" selected":""}>${o(s.label==="library"?`Video library (${s.dir})`:`${s.label} (${s.dir})`)}</option>`).join("")}</select></label>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="foot"><button type="button" class="btn" data-back>Cancel</button><button type="submit" class="btn pri" id="wgo">Generate draft</button></div>
|
|
81
|
+
</form>`,q()}function q(){let t=[...new Set([...r.platforms].map((n)=>x[n]))],e=document.getElementById("wplatnote");if(e)e.textContent=r.platforms.size?`Makes ${t.length} file${t.length>1?"s":""}: ${t.map((n)=>T(n)).join(", ")}`:"Pick at least one.";let s=[...r.platforms].filter((n)=>N[n]&&r.seconds>N[n]).map((n)=>`${n} takes at most ${h(N[n])}`),i=document.getElementById("wlennote");if(i)i.textContent=s.length?`Too long: ${s.join(", ")}`:`About ${Math.round(r.seconds*2.3)} words of narration`,i.className="note"+(s.length?" warn-t":"")}d("new").addEventListener("click",()=>{if(location.hash!=="#new")history.pushState(null,"","#new");P()});d("wiz").addEventListener("click",async(t)=>{let e=t.target;if(e.closest("[data-back]"))return C(null);let s=e.closest("[data-src]");if(s)return O(),r.source=s.dataset.src,ee();let i=e.closest("[data-preset]");if(i){r.preset=i.dataset.preset;for(let a of d("wiz").querySelectorAll("[data-preset]"))a.classList.toggle("on",a===i);return}let n=e.closest("[data-plat]");if(n){let a=n.dataset.plat;return r.platforms.has(a)?r.platforms.delete(a):r.platforms.add(a),n.classList.toggle("on",r.platforms.has(a)),q()}if(e.closest("#wpick"))try{let a=await w("/pick-folder",{});if(a.path)r.folder=a.path,d("wfolder").value=a.path}catch(a){p(a instanceof Error?a.message:String(a))}});var O=()=>{let t=document.getElementById("wbrief"),e=document.getElementById("wfolder");if(t)r.brief=t.value;if(e)r.folder=e.value};d("wiz").addEventListener("input",(t)=>{let e=t.target;if(e.id==="wlen")r.seconds=Number(e.value),d("wlentxt").value=h(r.seconds),q();else if(e.id==="wbrief"||e.id==="wfolder")O()});d("wiz").addEventListener("change",(t)=>{let e=t.target;if(e.id==="wlentxt"){let[s,i]=e.value.includes(":")?e.value.split(":").map(Number):[0,Number(e.value)];r.seconds=Math.min(600,Math.max(z,Math.round((s*60+i||60)/5)*5)),e.value=h(r.seconds),d("wlen").value=String(Math.min(F,r.seconds)),q()}else if(e.id==="wlang")r.language=e.value;else if(e.id==="wplace")O(),r.place=Number(e.value),ee()});d("wiz").addEventListener("submit",async(t)=>{t.preventDefault(),O();let e=d("wgo");e.disabled=!0;try{let s=await w("/video/new",{p:r.place,source:r.source,brief:r.brief,folder:r.folder,preset:r.preset,platforms:[...r.platforms],seconds:r.seconds,language:r.language});r.brief="",r.folder="",await j(),C(r.place,s.name),p(s.pty?"Claude started. Answer its questions in the terminal at the top.":"Claude opened in a terminal window.")}catch(s){p(s instanceof Error?s.message:String(s))}finally{e.disabled=!1}});function Ee(){let t=new EventSource("/events");t.onmessage=()=>j()}P();j();Ee();})();
|