paper-motion 0.3.0 → 0.4.1

package/studio/index.html

@@ -4,164 +4,200 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>paper-motion studio</title>
-<!-- pamo studio: a piece, stage by stage. Reads /api/piece, writes actions back; the agent reads them from piece.json. -->
+<!--
+  pamo studio: one piece in three steps. What it says (the brief and the content the user keeps), Your video (every
+  part playing live, edited in place: words, how it arrives, background, settings, length, transitions, order, adding,
+  swapping, removing, and the whole video's style) and Export. Reads /api/piece, writes edits back; the files stay the
+  source of truth and the agent reads every change as one line. paper-motion's own look: black ground, white figure,
+  one warm paper accent, hard edges, 1px rules.
+-->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
-<link href="https://paper-motion.vercel.app/fonts/geist-serif.css" rel="stylesheet">
 <style>
-  :root {
-    --bg: #0a0a0a; --panel: #111111; --panel2: #161616; --line: #ffffff14; --line2: #ffffff24;
-    --fg: #ece9e2; --dim: #8e8b85; --faint: #5a5853; --paper: #e9e4d8; --warn: #ff4d2e; --ok: #3ddc84;
-    --serif: 'Geist Serif', Georgia, serif; --sans: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace;
-  }
-  * { box-sizing: border-box; }
-  html, body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 var(--sans); }
+  @font-face { font-family: 'Geist Serif'; src: url('/fonts/GeistSerif-Regular.woff2') format('woff2'); font-display: swap; }
+  @font-face { font-family: 'Geist Pixel'; src: url('/fonts/GeistPixel-Square.woff2') format('woff2'); font-display: swap; }
+  :root { --ground: #000; --surface: #0b0b0b; --raised: #141414; --line: #1f1f1f; --rule: #3a3a3a; --figure: #fff; --muted: #8a8a8a; --faint: #4a4a4a; --paper: #e9e4d8; --ok: #3ddc84; --warn: #ff4d2e;
+    --serif: 'Geist Serif', Georgia, serif; --sans: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; --pixel: 'Geist Pixel', 'Geist Mono', monospace; }
+  * { box-sizing: border-box; border-radius: 0; }
+  html { background: var(--ground); color-scheme: dark; }
+  body { margin: 0; background: var(--ground); color: var(--figure); font: 14px/1.45 var(--sans); }
+  ::selection { background: var(--paper); color: #000; }
   button, input, select, textarea { font: inherit; color: inherit; }
-  button { cursor: pointer; }
-  video, img { display: block; width: 100%; background: #000; }
-  a { color: inherit; }
-  .mono { font-family: var(--mono); } .serif { font-family: var(--serif); font-weight: 400; }
-  .dim { color: var(--dim); } .faint { color: var(--faint); }
-  .btn { border: 1px solid var(--line2); background: transparent; border-radius: 999px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 8px; }
-  .btn:hover { background: #ffffff0a; }
-  .btn.primary { background: var(--paper); color: #111; border-color: var(--paper); }
-  .btn.primary:hover { background: #fff; }
-  .btn.small { padding: 4px 10px; font-size: 12px; }
-  .btn[disabled] { opacity: .35; cursor: default; }
-  textarea { width: 100%; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; resize: vertical; min-height: 64px; }
-  textarea:focus, input:focus, select:focus { outline: 1px solid var(--paper); }
-  select, input[type=number] { background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 4px 8px; }
-  .chip { font: 12px var(--mono); border: 1px solid var(--line2); border-radius: 999px; padding: 2px 9px; color: var(--dim); white-space: nowrap; }
-  .sw { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line2); }
-  .spin { animation: spin 1s linear infinite; transform-origin: 50% 50%; }
-  @keyframes spin { to { transform: rotate(360deg); } }
-  .rendering { position: relative; }
-  .rendering::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(110deg, #0000 0 12px, #ffffff08 12px 24px); animation: slide 1s linear infinite; }
-  @keyframes slide { to { background-position: 48px 0; } }
-  .empty { aspect-ratio: 16/9; display: grid; place-items: center; background: #0d0d0d; color: var(--faint); font: 12px var(--mono); }
-  .info { position: relative; display: inline-grid; place-items: center; color: var(--faint); cursor: help; border-radius: 50%; }
-  .info:hover, .info:focus { color: var(--fg); outline: none; }
-  .info .tip { position: absolute; left: -10px; top: calc(100% + 8px); width: 280px; z-index: 20; padding: 10px 12px; border-radius: 10px; background: #1d1d1d; border: 1px solid var(--line2); box-shadow: 0 10px 30px #000a; color: var(--fg); font: 13px/1.45 var(--sans); white-space: normal; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .12s, transform .12s; }
-  .info .tip::before { content: ''; position: absolute; left: 14px; top: -5px; width: 8px; height: 8px; background: #1d1d1d; border-left: 1px solid var(--line2); border-top: 1px solid var(--line2); transform: rotate(45deg); }
-  .info:hover .tip, .info:focus .tip { opacity: 1; transform: none; }
-  .edit { border-radius: 6px; padding: 4px 8px; margin: -4px -8px; outline: 1px solid transparent; cursor: text; min-height: 1.5em; }
-  .edit:hover { outline-color: var(--line2); }
-  .edit:focus { outline: 1px solid var(--paper); background: var(--panel2); color: var(--fg); }
+  button { cursor: pointer; } a { color: inherit; }
+  :focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
+  .muted { color: var(--muted); } .mono { font-family: var(--mono); } .serif { font-family: var(--serif); font-weight: 400; }
+  .ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; flex: none; }
+  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--rule); background: transparent; padding: 8px 13px; font-size: 13px; white-space: nowrap; text-decoration: none; }
+  .btn:hover { border-color: var(--paper); }
+  .btn.primary { background: var(--paper); color: #000; border-color: var(--paper); }
+  .btn.primary:hover { background: #fff; border-color: #fff; }
+  .btn.sm { padding: 6px 10px; font-size: 12.5px; }
+  .btn.on { background: var(--paper); color: #000; border-color: var(--paper); }
+  .btn:disabled { opacity: .35; cursor: default; }
+  .hint { font-size: 12.5px; color: var(--muted); margin: 0; }
+  .lbl { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+
+  header.top { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; background: var(--ground); }
+  .back { display: flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: 13px; }
+  .ttl { font: 400 21px/1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26vw; }
+  .steps { display: flex; margin: 0 auto; border: 1px solid var(--rule); }
+  .steps button { background: none; border: 0; padding: 9px 16px; display: flex; gap: 8px; align-items: center; color: var(--muted); }
+  .steps button + button { border-left: 1px solid var(--rule); }
+  .steps button b { font: 400 15px/1 var(--pixel); }
+  .steps button.on { background: var(--paper); color: #000; }
+  .steps button i { width: 7px; height: 7px; background: var(--ok); display: inline-block; }
+  .turn { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
+  .turn .mk { width: 8px; height: 8px; background: var(--paper); flex: none; }
+  .turn.agent .mk { background: var(--muted); animation: pulse 1.4s infinite; } .turn.off .mk, .turn.deaf .mk { background: var(--warn); }
+  @keyframes pulse { 50% { opacity: .3; } }
+  .turn b { font-weight: 500; margin-right: 8px; } .turn .tx { color: var(--muted); }
+  .turn .grow { flex: 1; }
+  main { min-height: calc(100vh - 97px); }
+
+  /* 1 · what it says */
+  .what { max-width: 900px; margin: 0 auto; padding: 36px 20px 90px; }
+  .what h1 { font: 400 46px/1.05 var(--serif); margin: 0; }
+  .what .sub { margin: 10px 0 26px; color: var(--muted); font-size: 15px; max-width: 62ch; }
+  .brief { border: 1px solid var(--line); margin-bottom: 30px; }
+  .brief summary { cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; list-style: none; }
+  .brief summary::-webkit-details-marker { display: none; }
+  .brief .rows { padding: 0 14px 14px; display: grid; gap: 10px; }
+  .brief .row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: baseline; }
+  .edit { padding: 5px 8px; margin: -5px -8px; outline: 1px dashed transparent; cursor: text; min-height: 1.4em; }
+  .edit:hover { outline-color: var(--rule); } .edit:focus { outline: 1px solid var(--paper); background: var(--surface); }
   .edit:empty::before { content: attr(data-placeholder); color: var(--faint); }
-  .txt { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 13px; min-width: 0; }
-  .txt:hover { border-color: var(--line2); } .txt:focus { background: var(--panel2); }
-  .grip { cursor: grab; color: var(--faint); display: grid; place-items: center; align-self: stretch; border-radius: 6px; }
-  .grip:hover { color: var(--fg); background: #ffffff0d; }
-  .dragging { opacity: .35; }
-  .drop-before { box-shadow: 0 -3px 0 0 var(--paper); } .drop-after { box-shadow: 0 3px 0 0 var(--paper); }
-  [data-trackdrag].drop-before { box-shadow: -3px 0 0 0 var(--paper); } [data-trackdrag].drop-after { box-shadow: 3px 0 0 0 var(--paper); }
-  body.resizing { cursor: col-resize; user-select: none; } body.resizing video { pointer-events: none; }
-  /* layout: rail · stage · decision, then the decision moves above the stage, then the rail becomes a strip */
-  .shell { display: grid; grid-template-columns: 280px minmax(0, 1fr) var(--rw, 340px); grid-template-areas: 'rail stage decide'; min-height: 100vh; }
-  .rail { grid-area: rail; border-right: 1px solid var(--line); padding: 22px 12px; display: grid; align-content: start; gap: 4px; }
-  .rail .head { padding: 0 14px 18px; }
-  .steps { display: grid; gap: 4px; }
-  .step { all: unset; cursor: pointer; display: grid; grid-template-columns: 28px 1fr 18px; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 10px; }
-  .step.on { background: var(--panel2); }
-  .step:disabled { cursor: default; opacity: .45; }
-  .step:focus-visible { outline: 1px solid var(--paper); }
-  .stage { grid-area: stage; padding: 28px 36px 90px; display: grid; align-content: start; gap: 22px; max-width: 1000px; min-width: 0; }
-  .stage h1 { font-size: 40px; margin: 4px 0 2px; line-height: 1.05; }
-  .decide { grid-area: decide; border-left: 1px solid var(--line); padding: 28px 22px; display: grid; align-content: start; gap: 18px; position: sticky; top: 0; height: 100vh; overflow: auto; }
-  .brow { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: start; }
-  .blabel { font-size: 12px; padding-top: 9px; display: flex; gap: 6px; align-items: center; }
-  .card { display: grid; grid-template-columns: 18px minmax(180px, 260px) minmax(0, 1fr); gap: 14px; padding: 14px 14px 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
-  .track { display: flex; align-items: stretch; margin-top: 14px; }
-  .tblock { cursor: grab; min-width: 0; }
-  @media (max-width: 1180px) {
-    .shell { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: 'rail decide' 'rail stage'; grid-template-rows: auto 1fr; }
-    .decide { position: static; height: auto; border-left: 0; border-bottom: 1px solid var(--line); padding: 20px 36px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 12px 24px; }
-    .decide > * { grid-column: 1 / -1; }
-    .decide > .btn.primary { grid-column: 1; align-self: start; }
-    .decide > div:has(> #note) { grid-column: 2; grid-row: span 2; }
-    #resize { display: none; }
-    .decide .activity { display: none !important; }
-    .decide .notes > div:nth-last-child(n+3) { display: none; }
-    .decide .notes > div:first-child { display: block; }
-  }
-  @media (max-width: 760px) {
-    .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'rail' 'decide' 'stage'; }
-    .rail { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 0 10px; position: sticky; top: 0; z-index: 10; background: var(--bg); gap: 10px; }
-    .rail .head { padding: 0 16px; }
-    .rail .head .serif { font-size: 20px !important; margin-top: 6px !important; }
-    .steps { display: flex; overflow-x: auto; gap: 4px; padding: 0 12px; scrollbar-width: none; }
-    .steps::-webkit-scrollbar { display: none; }
-    .step { grid-template-columns: auto auto auto; gap: 7px; padding: 7px 12px; flex: 0 0 auto; border-radius: 999px; align-items: center; }
-    .step .sub, .step > .mono { display: none; }
-    .stage { padding: 20px 16px 90px; gap: 18px; }
-    .stage h1 { font-size: 32px; }
-    .decide { padding: 16px; grid-template-columns: minmax(0, 1fr); }
-    .decide > .btn.primary, .decide > div:has(> #note) { grid-column: 1; grid-row: auto; }
-    .brow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
-    .blabel { padding-top: 0; }
-    .card { grid-template-columns: minmax(0, 1fr); padding: 12px; }
-    .card .grip { display: none; }
-    .track { overflow-x: auto; padding-bottom: 6px; }
-    .tblock { min-width: 96px; }
-    .info .tip { width: min(280px, calc(100vw - 48px)); }
-  }
-  #toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #1d1d1d; border: 1px solid var(--line2); border-radius: 999px; padding: 8px 16px; font: 12px var(--mono); opacity: 0; transition: opacity .2s; pointer-events: none; }
-  #toast.on { opacity: 1; }
+  .fact { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
+  .fact:last-of-type { border-bottom: 1px solid var(--line); }
+  .fact img { width: 96px; height: 60px; object-fit: cover; object-position: top; border: 1px solid var(--rule); }
+  .fact .k { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: center; }
+  .fact .k .new { background: var(--paper); color: #000; padding: 3px 5px; }
+  .fact .t { font: 400 23px/1.2 var(--serif); margin-top: 6px; overflow-wrap: anywhere; }
+  .fact .s { font-size: 12.5px; color: var(--faint); margin-top: 4px; }
+  .fact.out { opacity: .38; } .fact.out .t { text-decoration: line-through; }
+  .fact .acts { display: flex; gap: 6px; }
+  .addfact { margin-top: 16px; display: flex; gap: 8px; }
+  .addfact input, .addfact select { background: var(--surface); border: 1px solid var(--rule); padding: 10px 12px; }
+  .addfact input { flex: 1; }
+  .nextbar { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
+
+  /* 2 · your video */
+  .editor { display: grid; grid-template-columns: minmax(0, 1fr) 372px; min-height: calc(100vh - 97px); }
+  .center { padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
+  .player { position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--line); width: min(100%, calc(56vh * 16 / 9)); margin: 0 auto; overflow: hidden; }
+  .player.tall { aspect-ratio: 9/16; width: min(100%, calc(56vh * 9 / 16)); } .player.sq { aspect-ratio: 1; width: min(100%, 56vh); }
+  .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
+  .player .badge { position: absolute; left: 10px; top: 10px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.2); padding: 5px 7px; z-index: 2; }
+  .player .msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--muted); font: 13px var(--mono); }
+  .pbar { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
+  .pbar .grow { flex: 1; }
+  .track { display: flex; align-items: stretch; overflow-x: auto; padding: 6px 2px 12px; }
+  .part { flex: none; width: 170px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; position: relative; }
+  .part:hover { border-color: var(--rule); } .part.sel { border-color: var(--paper); box-shadow: 0 0 0 1px var(--paper); }
+  .part.dragging { opacity: .4; } .part.drop { box-shadow: -3px 0 0 var(--paper); }
+  .part .th { aspect-ratio: 16/9; background: #000 center/cover no-repeat; position: relative; overflow: hidden; }
+  .part .th video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .part .meta { padding: 7px 9px 9px; }
+  .part .nm { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .part .tx { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .part .sec { position: absolute; right: 6px; top: 6px; font: 500 11px/1 var(--mono); background: rgba(0,0,0,.72); padding: 4px 5px; }
+  .part .n { position: absolute; left: 6px; top: 6px; font: 400 13px/1 var(--pixel); background: rgba(0,0,0,.72); padding: 3px 5px; }
+  .join { flex: none; width: 52px; display: grid; place-items: center; position: relative; }
+  .join button { width: 34px; height: 34px; border: 1px solid var(--rule); background: var(--ground); display: grid; place-items: center; padding: 0; }
+  .join button:hover { border-color: var(--paper); }
+  .join small { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font: 10px/1.1 var(--mono); color: var(--muted); }
+  .addp { flex: none; width: 40px; display: grid; place-items: center; }
+  .addp button { width: 30px; height: 100%; min-height: 120px; border: 1px dashed var(--rule); background: none; display: grid; place-items: center; }
+  .addp button:hover { border-color: var(--paper); }
+  .insp { border-left: 1px solid var(--line); padding: 18px 20px 60px; overflow-y: auto; max-height: calc(100vh - 97px); position: sticky; top: 97px; }
+  .insp h2 { margin: 6px 0 0; font: 400 26px/1.1 var(--serif); }
+  .insp .sum { margin-top: 6px; }
+  .tabs { display: flex; margin: 16px 0 14px; border: 1px solid var(--rule); }
+  .tabs button { flex: 1; background: none; border: 0; padding: 8px 4px; font-size: 12.5px; color: var(--muted); }
+  .tabs button + button { border-left: 1px solid var(--rule); }
+  .tabs button.on { background: var(--paper); color: #000; }
+  .pane { display: grid; gap: 14px; }
+  .fld { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
+  .fld i { font-style: normal; color: var(--faint); }
+  .fld input, .fld textarea, .fld select { background: var(--surface); border: 1px solid var(--rule); padding: 9px 10px; font-size: 14px; color: var(--figure); width: 100%; }
+  .fld textarea { resize: vertical; min-height: 64px; } .fld textarea.code { font: 13px/1.5 var(--mono); }
+  .fld input:focus, .fld textarea:focus, .fld select:focus { outline: 0; border-color: var(--paper); }
+  .pick img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; border: 1px solid var(--rule); }
+  .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+  .tile { border: 1px solid var(--line); background: none; padding: 0; text-align: left; }
+  .tile:hover { border-color: var(--rule); } .tile.on { border-color: var(--paper); box-shadow: 0 0 0 1px var(--paper); }
+  .ph { aspect-ratio: 16/9; background: #000 center/cover no-repeat; position: relative; overflow: hidden; }
+  .ph video, .ph iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
+  .ph .bars { position: absolute; inset: 0; display: flex; } .ph .bars i { flex: 1; }
+  .tile .lb { padding: 7px 8px 8px; font-size: 12.5px; }
+  .tile .lb small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
+  .slider { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
+  .slider div { display: flex; justify-content: space-between; gap: 10px; } .slider em { font-style: normal; color: var(--figure); font-family: var(--mono); }
+  .slider input { accent-color: var(--paper); width: 100%; }
+  .seg { display: flex; flex-wrap: wrap; } .seg .btn { flex: 1; } .seg .btn + .btn { border-left: 0; }
+  .partacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
+  .empty { padding: 60px 20px; text-align: center; color: var(--muted); }
+
+  /* sheets */
+  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 50; display: none; }
+  .scrim.on { display: block; }
+  .sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--ground); border-left: 1px solid var(--paper); z-index: 51; overflow-y: auto; padding: 0 24px 40px; transform: translateX(102%); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
+  .sheet.on { transform: none; }
+  .sheet header { position: sticky; top: 0; background: var(--ground); padding: 20px 0 14px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; z-index: 2; }
+  .sheet header h2 { margin: 4px 0 0; font: 400 28px/1.1 var(--serif); }
+  .sheet .grp { margin-top: 22px; }
+  .sheet .grp h3 { margin: 0 0 10px; }
+  .sheet .tiles { grid-template-columns: repeat(3, 1fr); }
+  .pals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .pal { display: flex; align-items: center; gap: 4px; padding: 8px; border: 1px solid var(--line); background: none; width: 100%; text-align: left; }
+  .pal:hover { border-color: var(--rule); } .pal.on { border-color: var(--paper); }
+  .pal i { width: 20px; height: 20px; display: block; border: 1px solid rgba(255,255,255,.15); }
+  .pal span { margin-left: 8px; font-size: 13px; }
+  .colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+  .colors label { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
+  .colors input { width: 100%; height: 38px; padding: 0; border: 1px solid var(--rule); background: none; }
+  .fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .font { padding: 10px 12px; border: 1px solid var(--line); background: none; text-align: left; font-size: 14px; }
+  .font:hover { border-color: var(--rule); } .font.on { border-color: var(--paper); }
+  .ask { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 360px; background: var(--surface); border: 1px solid var(--rule); padding: 12px; display: none; }
+  .ask.on { display: grid; gap: 8px; }
+  .ask textarea { width: 100%; min-height: 80px; background: var(--ground); border: 1px solid var(--rule); padding: 8px; resize: vertical; }
+  #toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--paper); color: #000; padding: 9px 14px; font-size: 13px; transition: .2s; z-index: 80; pointer-events: none; max-width: 80vw; }
+  #toast.on { opacity: 1; transform: translateX(-50%); }
+
+  /* 3 · export */
+  .exp { max-width: 980px; margin: 0 auto; padding: 32px 20px 80px; display: grid; gap: 22px; }
+  .exp h1 { font: 400 42px/1.05 var(--serif); margin: 0; }
+  .file { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); }
+  .exp video { width: 100%; background: #000; border: 1px solid var(--line); }
+  .list { max-width: 760px; margin: 0 auto; padding: 40px 20px; }
+  .list h1 { font: 400 42px/1 var(--serif); margin: 0 0 20px; }
+  .lrow { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
+  @media (max-width: 900px) { .editor { grid-template-columns: 1fr; } .insp { position: static; max-height: none; border-left: 0; border-top: 1px solid var(--line); } .ttl { display: none; } .sheet .tiles { grid-template-columns: 1fr 1fr; } }
 </style>
 </head>
 <body>
-<div id="app"><div class="empty" style="height:100vh;aspect-ratio:auto">loading…</div></div>
-<div id="toast"></div>
+<div id="app"></div>
+<div class="scrim" id="scrim"></div>
+<aside class="sheet" id="sheet" role="dialog"></aside>
+<div class="ask" id="ask"><div style="display:flex;justify-content:space-between;align-items:center"><b>Ask your agent</b><button class="btn sm" data-ask-close>Close</button></div>
+  <p class="hint">For anything the controls can't do: "make it more playful", "add our pricing", "use the photo of the team".</p>
+  <textarea id="askText" aria-label="What to ask"></textarea><button class="btn primary" data-ask-send>Send</button></div>
+<div id="toast" role="status"></div>
 <script>
-const STAGES = [
-  ['brief', 'Brief', 'what we say, to whom and how'],
-  ['look', 'Look', 'colors, type, background and moves'],
-  ['structure', 'Structure', 'the beats, and the block that shows each'],
-  ['parts', 'Parts', 'each block in your brand, one by one'],
-  ['assembly', 'Assembly', 'everything joined, with its transitions'],
-  ['final', 'Final', 'full quality and formats'],
-];
-const BRIEF_HELP = {
-  what: ['what', 'One or two sentences: what the video shows and where it will live (your site, LinkedIn, a launch). Tell the story, not the style.'],
-  who: ['for whom', 'Who watches it and what they already know. The more specific, the better the words on screen.'],
-  format: ['format', 'Shape and length. 16:9 for web and YouTube, 9:16 for Reels and Stories, 1:1 for feeds. Most pieces run 15–30 s.'],
-  tone: ['tone', 'How it should feel, in a few words (calm, bold, playful), and anything to avoid.'],
-  action: ['call to action', 'The one thing viewers should do at the end: a URL, a button, a date.'],
-};
-const STATUS = { approved: ['approved', 'var(--ok)'], review: ['to review', 'var(--paper)'], changes: ['changes asked', 'var(--warn)'], rendering: ['rendering', 'var(--dim)'], queued: ['queued', 'var(--faint)'], working: ['your agent is on it', 'var(--dim)'], pending: ['later', 'var(--faint)'] };
-const TINT = { approved: '#3ddc8424', changes: '#ff4d2e2b', review: '#e9e4d81f' };
+// ─── state, helpers ────────────────────────────────────────────────────────────────────────────────────────────────
+const params = new URLSearchParams(location.search);
+let piece = params.get('p'), P = null, raw = '', view = null, sel = null, tab = 'words', misses = 0, playing = null;
+const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const $ = (id) => document.getElementById(id);
 const I = {
-  ok: '<svg width="14" height="14" viewBox="0 0 16 16"><path d="M3 8.5 L6.5 12 L13 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-  review: '<svg width="14" height="14" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.2" fill="currentColor"/><circle cx="8" cy="8" r="6.2" fill="none" stroke="currentColor" stroke-opacity=".35"/></svg>',
-  pending: '<svg width="14" height="14" viewBox="0 0 16 16"><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" stroke-dasharray="2 2.4"/></svg>',
-  changes: '<svg width="14" height="14" viewBox="0 0 16 16"><path d="M3 12.5 L3.6 9.8 L10.4 3 L13 5.6 L6.2 12.4 Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>',
-  rendering: '<svg class="spin" width="14" height="14" viewBox="0 0 16 16"><path d="M8 2.5 A5.5 5.5 0 1 1 2.5 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>',
-  queued: '<svg width="14" height="14" viewBox="0 0 16 16"><path d="M4 8 H12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-dasharray="1.5 2.5"/></svg>',
-  note: '<svg width="14" height="14" viewBox="0 0 16 16"><path d="M2.5 3.5 H13.5 V10.5 H7 L4 13 V10.5 H2.5 Z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>',
-  info: '<svg width="14" height="14" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.3" fill="none" stroke="currentColor" stroke-width="1.2"/><circle cx="8" cy="5" r="0.95" fill="currentColor"/><path d="M8 7.3 V11.4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>',
-  grip: '<svg width="10" height="16" viewBox="0 0 10 16">' + [3, 8, 13].map((y) => `<circle cx="2.5" cy="${y}" r="1.3" fill="currentColor"/><circle cx="7.5" cy="${y}" r="1.3" fill="currentColor"/>`).join('') + '</svg>',
-  down: '<svg width="14" height="14" viewBox="0 0 16 16"><path d="M8 2.5 V10.5 M4.5 7 L8 10.5 L11.5 7 M3 13.5 H13" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-  join: {
-    cut: '<svg width="18" height="14" viewBox="0 0 18 14"><path d="M9 1 V13" stroke="currentColor" stroke-width="1.4"/></svg>',
-    whip: '<svg width="18" height="14" viewBox="0 0 18 14"><path d="M2 7 H15 M11 3 L15 7 L11 11" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M2 4 H7 M2 10 H7" stroke="currentColor" stroke-opacity=".4"/></svg>',
-    dissolve: '<svg width="18" height="14" viewBox="0 0 18 14"><circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="11" cy="7" r="4.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-opacity=".5"/></svg>',
-    dip: '<svg width="18" height="14" viewBox="0 0 18 14"><path d="M1 3 Q9 13 17 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>',
-  },
+  undo: '<path d="M7 5 3 9l4 4M3 9h9a5 5 0 0 1 0 10H9"/>', style: '<circle cx="10" cy="10" r="7"/><path d="M10 3v14M3 10h7"/>', ask: '<path d="M3 4h14v10H8l-4 3v-3H3z"/>',
+  add: '<path d="M10 4v12M4 10h12"/>', join: '<path d="M3 10h14M12 5l5 5-5 5"/>', back: '<path d="M12 4 6 10l6 6"/>', play: '<path d="M6 4l10 6-10 6z"/>', out: '<path d="M8 4H4v12h12v-4M11 3h6v6M17 3l-8 8"/>',
 };
-I.approved = I.ok; I.working = I.rendering;
-
-const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
-const badge = (st) => { const [l, c] = STATUS[st] ?? [st, 'var(--dim)']; return `<span class="mono" style="display:inline-flex;gap:6px;align-items:center;white-space:nowrap;flex-shrink:0;font-size:12px;font-weight:500;color:${c};${TINT[st] ? `background:${TINT[st]};padding:3px 10px 3px 8px;border-radius:999px` : ''}">${I[st] ?? ''}${l}</span>`; };
-const vid = (src, extra = '') => `<video data-k="${esc(src)}" src="${esc(src)}" muted loop autoplay playsinline ${extra}></video>`;
-const fmt = (s) => (s == null ? '' : `${Number(s).toFixed(1).replace('.0', '')} s`);
-const clock = (iso) => (iso ? new Date(iso).toTimeString().slice(0, 5) : '');
-const order = (k) => STAGES.findIndex(([x]) => x === k);
-
-// ─── state ─────────────────────────────────────────────────────────────────────────
-const params = new URLSearchParams(location.search);
-let piece = params.get('p'), P = null, raw = '', view = null, followed = null;
-const RW = [280, 560];
-let rightW = (() => { try { return Math.min(RW[1], Math.max(RW[0], Number(localStorage.getItem('studio:rw')) || 340)); } catch { return 340; } })();
+const icon = (n) => `<svg class="ico" viewBox="0 0 20 20">${I[n]}</svg>`;
+let tt; const toast = (t, ms = 1900) => { const e = $('toast'); e.textContent = t; e.classList.add('on'); clearTimeout(tt); tt = setTimeout(() => e.classList.remove('on'), ms); };
+const STEP = { brief: 'what', inventory: 'what', video: 'video', final: 'export' };
+const tile = (o, attr, on) => `<button class="tile${on ? ' on' : ''}" ${attr} ${o.clip ? `data-clip="${esc(o.clip)}"` : ''}><div class="ph" ${o.poster ? `style="background-image:url('${esc(o.poster)}')"` : ''}></div><div class="lb">${esc(o.title)}${o.summary ? `<small>${esc(o.summary)}</small>` : ''}</div></button>`;
+const swatch = (b) => `<div class="ph" data-swatch="${esc(JSON.stringify(b.entry ?? {}))}"><div class="bars">${(b.colors?.length ? b.colors : ['#111', '#333']).map((c) => `<i style="background:${esc(c)}"></i>`).join('')}</div></div>`;
 
 async function load() {
   if (!piece) {
@@ -170,221 +206,313 @@ async function load() {
     else return renderList(list);
   }
   const res = await fetch(`/api/piece?p=${encodeURIComponent(piece)}`);
-  if (!res.ok) { document.getElementById('app').innerHTML = `<div class="empty" style="height:100vh;aspect-ratio:auto">no piece “${esc(piece)}” here</div>`; return; }
+  if (!res.ok) { $('app').innerHTML = `<div class="empty">There is no piece “${esc(piece)}” in this project.</div>`; return; }
   const text = await res.text();
   if (text === raw) return;
   raw = text; P = JSON.parse(text);
-  // follow the piece when the agent moves it on, unless the user is looking at something else on purpose
-  if (!view || view === followed) view = P.stage;
-  followed = P.stage;
+  if (!view) view = STEP[P.stage] ?? 'what';
   render();
 }
-// a re-render keeps the field you're in: same element (by its data attributes), same unsaved text, same caret
-function captureFocus() {
-  const a = document.activeElement;
-  if (!a || a === document.body || !(a.isContentEditable || /INPUT|TEXTAREA|SELECT/.test(a.tagName))) return null;
-  const sel = a.id ? `#${a.id}` : Object.entries(a.dataset).map(([k, v]) => `[data-${k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}="${CSS.escape(v)}"]`).join('');
-  if (!sel) return null;
-  const range = a.isContentEditable ? (() => { const r = getSelection(); return r.rangeCount ? [r.anchorOffset, r.focusOffset] : null; })() : [a.selectionStart, a.selectionEnd];
-  return { sel, value: a.isContentEditable ? a.innerText : a.value, editable: a.isContentEditable, range };
-}
-function restoreFocus(f) {
-  const el = f && document.querySelector(f.sel); if (!el) return;
-  if (f.editable) el.innerText = f.value; else el.value = f.value;
-  el.focus({ preventScroll: true });
-  try {
-    if (f.editable && el.firstChild && f.range) { const r = document.createRange(), n = el.firstChild, len = n.textContent.length; r.setStart(n, Math.min(f.range[0], len)); r.setEnd(n, Math.min(f.range[1], len)); const g = getSelection(); g.removeAllRanges(); g.addRange(r); }
-    else if (f.range && el.setSelectionRange) el.setSelectionRange(f.range[0], f.range[1]);
-  } catch {}
-}
-async function act(body) {
+async function act(body, quiet) {
   const res = await fetch(`/api/piece?p=${encodeURIComponent(piece)}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
   const r = await res.json();
-  toast(r.error ? `✗ ${r.error}` : 'sent to your agent');
+  if (r.error) toast(`Not done: ${r.error}`, 3200); else if (!quiet) toast(r.say ?? 'Saved');
   raw = ''; await load();
+  return r;
 }
-let tt; function toast(t) { const e = document.getElementById('toast'); e.textContent = t; e.classList.add('on'); clearTimeout(tt); tt = setTimeout(() => e.classList.remove('on'), 1800); }
-setInterval(() => load().catch(() => {}), 1500);
-
 function renderList(list) {
-  document.getElementById('app').innerHTML = `<div style="max-width:720px;margin:0 auto;padding:60px 24px"><h1 class="serif" style="font-size:44px;margin:0 0 6px">Your pieces</h1><p class="dim" style="margin:0 0 28px">Each one is a video in progress. Your agent starts one with <span class="mono">pamo piece init</span>.</p>
-    ${list.length ? list.map((x) => `<a href="?p=${encodeURIComponent(x.piece)}" style="display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none"><span><span style="font-size:17px">${esc(x.title)}</span> <span class="faint mono" style="font-size:12px">pieces/${esc(x.piece)}</span></span><span class="dim mono" style="font-size:12px">${esc(x.stage)} · ${badge(x.status)}</span></a>`).join('') : '<p class="faint">No pieces yet.</p>'}</div>`;
+  $('app').innerHTML = `<header class="top"><div class="ttl">paper-motion studio</div></header><div class="list"><h1>Pieces</h1>
+    ${list.length ? list.map((x) => `<a class="lrow" href="?p=${encodeURIComponent(x.piece)}"><b>${esc(x.title)}</b><span class="muted mono">pieces/${esc(x.piece)}</span></a>`).join('') : '<p class="muted">No pieces yet. Ask your agent for a video.</p>'}</div>`;
 }
 
-// ─── stages ────────────────────────────────────────────────────────────────────────
-function briefHTML() {
-  return `<div style="display:grid;gap:14px"><p class="faint" style="margin:0;font-size:13px">Click any text to edit it. Your agent works from your version.</p>${Object.entries(BRIEF_HELP).map(([k, [l, help]]) => `<div class="brow">
-    <span class="dim mono blabel">${l}<span class="info" tabindex="0" role="button" aria-label="What goes in ${l}">${I.info}<span class="tip" role="tooltip">${help}</span></span></span>
-    <div class="edit" contenteditable="plaintext-only" spellcheck="false" data-brief="${k}" data-placeholder="empty" style="${k === 'what' ? 'font:22px/1.35 var(--serif)' : ''}">${esc(P.brief[k])}</div></div>`).join('')}</div>`;
+// ─── the frame: steps, whose turn it is ───────────────────────────────────────────────────────────────────────────
+function turn() {
+  if (misses >= 3) return ['off', 'The studio stopped', 'Ask your agent to start it again.'];
+  if (P.ask) return ['ask', 'Your agent asked you something in the chat', P.ask.text];
+  if (P.building) return ['agent', 'Building your video', 'From what you kept. A few seconds.'];
+  if (P.rendering) return ['agent', 'Rendering the final', P.rendering.joining ? 'Joining the parts' : P.rendering.part ? `Part ${P.rendering.part} of ${P.rendering.of}` : 'Starting'];
+  const st = P.stages[P.stage]?.status, A = P.agent ?? {};
+  if (st === 'review') return ['yours', 'Your turn', A.listening ? 'Your agent waits while you edit. Every change reaches it.' : 'Edit freely; when you are done, tell your agent “continue” in the chat.'];
+  if (st === 'approved' && P.stage === 'final') return ['done', 'Finished', 'Your files are in Export.'];
+  return ['agent', 'Your agent is working', 'It shows up here when it is ready for you.'];
 }
-function lookHTML() {
-  const L = P.look, row = (label, inner) => `<div><div class="dim mono" style="font-size:12px;margin-bottom:8px">${label}</div>${inner}</div>`;
-  if (!L.colors.length && !L.fonts.length && !L.backgrounds.length && !L.moves.length) return `<p class="dim">Nothing chosen yet. Your agent proposes palettes, type, backgrounds and moves on boards; what you pick lands here.</p>`;
-  return `<div style="display:grid;gap:22px">
-    ${L.colors.length ? row('palette', `<div style="display:flex;gap:10px;flex-wrap:wrap">${L.colors.map(([n, h]) => `<div style="display:grid;gap:4px;justify-items:center"><div class="sw" style="background:${esc(h)}"></div><span class="faint mono" style="font-size:10px">${esc(n)}</span></div>`).join('')}</div>`) : ''}
-    ${L.fonts.length ? row('type', L.fonts.map(([r, f]) => `<div style="display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0"><span>${esc(f)}</span><span class="faint mono" style="font-size:12px">${esc(r)}</span></div>`).join('')) : ''}
-    <div style="display:flex;gap:24px;flex-wrap:wrap">${L.backgrounds.length ? row('backgrounds', `<div style="display:flex;gap:6px;flex-wrap:wrap">${L.backgrounds.map((b) => `<span class="chip">${esc(b)}</span>`).join('')}</div>`) : ''}
-    ${L.moves.length ? row('moves', `<div style="display:flex;gap:6px;flex-wrap:wrap">${L.moves.map((m) => `<span class="chip">${esc(m)}</span>`).join('')}</div>`) : ''}</div></div>`;
+function frame(body) {
+  const [k, head, tx] = turn(), step = STEP[P.stage], A = P.agent ?? {};
+  const done = (s) => ({ what: P.stages.inventory?.status === 'approved', video: P.stages.video?.status === 'approved', export: P.stages.final?.status === 'approved' }[s]);
+  document.title = `${k === 'yours' ? '● ' : ''}${P.title} · studio`;
+  return `<header class="top"><a class="back" href="/">${icon('back')}Pieces</a><div class="ttl">${esc(P.title)}</div>
+    <nav class="steps" aria-label="Steps">${[['what', 'What it says'], ['video', 'Your video'], ['export', 'Export']].map(([id, t], i) => `<button class="${view === id ? 'on' : ''}" data-view="${id}"><b>${i + 1}</b>${t}${done(id) ? '<i title="approved"></i>' : ''}</button>`).join('')}</nav>
+    <button class="btn" data-undo ${P.undo ? `title="Undo ${esc(P.undo)}"` : 'disabled'}>${icon('undo')}Undo</button>
+    <button class="btn" data-style>${icon('style')}Style</button>
+    <button class="btn" data-ask>${icon('ask')}Ask your agent</button></header>
+    <div class="turn ${k}"><i class="mk"></i><span><b>${esc(head)}</b><span class="tx">${esc(tx)}</span></span><span class="grow"></span>
+      ${A.focus && (k === 'yours' || k === 'ask') ? `<button class="btn sm" data-focus>Go to ${esc(A.app)} ${icon('out')}</button>` : ''}</div>
+    <main>${body}</main>`;
 }
-function structureHTML() {
-  if (!P.parts.length) return `<p class="dim">No structure yet. Your agent proposes a few on a board; the one you choose shows here, beat by beat.</p>`;
-  return `<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px">${P.parts.map((p, i) => `<div>
-    <div style="border-radius:8px;overflow:hidden;aspect-ratio:16/9">${p.clip ? vid(p.clip) : '<div class="empty">no block yet</div>'}</div>
-    <div style="display:flex;justify-content:space-between;margin-top:6px;gap:8px"><span><span class="faint mono" style="font-size:12px">0${i + 1}</span> ${esc(p.name)}</span><span class="faint mono" style="font-size:12px">${fmt(p.seconds)}</span></div>
-    <div class="dim" style="font-size:12px">${esc(p.what)}</div></div>`).join('')}</div>`;
+
+// ─── 1 · what it says ─────────────────────────────────────────────────────────────────────────────────────────────
+const BRIEF = [['what', 'What'], ['who', 'For whom'], ['format', 'Format'], ['tone', 'Tone'], ['action', 'At the end']];
+function whatHTML() {
+  const inv = P.inventory ?? { items: [] }, items = inv.items.filter((i) => i.status !== 'removed' || true);
+  const wait = items.filter((i) => i.status === 'proposed').length, kept = items.filter((i) => i.status === 'kept').length;
+  const briefOpen = P.stage === 'brief' || P.stages.brief?.status !== 'approved';
+  // what can be corrected right in the row: a sentence, a command, a number and what it counts
+  const EDITS = { line: ['text'], command: ['command'], figure: ['value', 'label'], share: ['value', 'label'], change: ['from', 'to', 'label'], screen: ['caption'] };
+  const inline = (i) => (EDITS[i.kind] ?? []).map((k) => i.fields?.find((f) => f[0] === k)).filter(Boolean);
+  const sentence = (i) => inline(i).length > 0;
+  const rows = items.map((i) => `<div class="fact${i.status === 'removed' ? ' out' : ''}">
+    ${i.thumb ? `<img src="${esc(i.thumb)}" alt="">` : '<span></span>'}
+    <div><div class="k">${esc(i.name)}${i.status === 'proposed' ? '<span class="new">To decide</span>' : ''}${i.must ? '<span class="new">Must appear</span>' : ''}</div>
+      ${sentence(i) && i.status !== 'removed' ? `<div class="t">${inline(i).map(([k, v]) => `<span class="edit" contenteditable="plaintext-only" spellcheck="false" data-inv="${esc(i.id)}" data-key="${esc(k)}" data-placeholder="${esc(k)}">${esc(v)}</span>`).join(i.kind === 'change' ? ' → ' : ' ')}</div>` : `<div class="t">${esc(i.what)}</div>`}
+      <div class="s">From ${esc(i.source || 'you')}${i.missing?.length ? ` · still needs ${esc(i.missing.join(', ').toLowerCase())}` : ''}</div></div>
+    <div class="acts">${i.status === 'removed' ? `<button class="btn sm" data-inv-set="${esc(i.id)}" data-v="kept">Keep it</button>`
+      : `${i.status === 'proposed' ? `<button class="btn sm primary" data-inv-set="${esc(i.id)}" data-v="kept">Keep</button>` : `<button class="btn sm${i.must ? ' on' : ''}" data-inv-must="${esc(i.id)}" data-v="${i.must ? '' : '1'}">★ ${i.must ? 'Must appear' : 'Must?'}</button>`}<button class="btn sm" data-inv-set="${esc(i.id)}" data-v="removed">Not this</button>`}</div></div>`).join('');
+  const atInv = ['brief', 'inventory'].includes(P.stage), hasVideo = !!P.video;
+  return `<div class="what">
+    <h1>What your video says</h1>
+    <p class="sub">Your agent read what you already have and found these. Keep what is true, star what must appear, click a sentence to change it. How it looks is the next step.</p>
+    <details class="brief"${briefOpen ? ' open' : ''}><summary><span><span class="lbl">The brief</span>&nbsp;&nbsp;${esc(P.brief.what)}</span><span class="muted">${P.stages.brief?.status === 'approved' ? 'approved' : 'to check'}</span></summary>
+      <div class="rows">${BRIEF.map(([k, l]) => `<div class="row"><span class="muted">${l}</span><div class="edit" contenteditable="plaintext-only" spellcheck="false" data-brief="${k}" data-placeholder="Empty">${esc(P.brief[k])}</div></div>`).join('')}
+      ${P.stage === 'brief' && P.stages.brief?.status === 'review' ? `<div><button class="btn primary sm" data-approve="brief">The brief is right</button></div>` : ''}</div></details>
+    ${items.length ? rows : `<p class="muted">${P.stage === 'brief' ? 'Once the brief is right, your agent brings what your video could say.' : 'Your agent is looking for what your video could say.'}</p>`}
+    ${inv.kinds && Object.keys(inv.kinds).length ? `<div class="addfact"><select id="addKind" aria-label="What is it">${Object.entries(inv.kinds).map(([id, k]) => `<option value="${id}">${esc(k.name)}</option>`).join('')}</select><input id="addText" placeholder="Add something true: a sentence, or a number and what it counts (163 pieces of motion)"><button class="btn" data-add-fact>Add</button></div>` : ''}
+    <div class="nextbar"><span class="muted">${kept} thing${kept === 1 ? '' : 's'} in your video${wait ? ` · ${wait} still to decide` : ''}${inv.moments ? ` · a ${inv.seconds} s video holds about ${inv.moments} moments` : ''}</span>
+      ${hasVideo ? `<button class="btn primary" data-view="video">Edit your video →</button>`
+        : atInv && P.stages.inventory?.status === 'review' && (kept || wait) ? `<button class="btn primary" data-make>${wait ? 'Keep the rest and make my video →' : 'Make my video →'}</button>`
+        : P.building ? '<span class="muted">Building your video…</span>' : ''}</div></div>`;
 }
-function partsHTML() {
-  if (!P.parts.length) return `<p class="dim">The parts appear here once the structure is set.</p>`;
-  return `<div style="display:grid;gap:14px">${P.parts.map((p, i) => {
-    const media = p.status === 'rendering' || p.status === 'queued'
-      ? `<div class="empty ${p.status === 'rendering' ? 'rendering' : ''}">${p.status}</div>`
-      : p.draft ? vid(p.draft) : '<div class="empty">no draft yet</div>';
-    return `<div class="card" data-drop="${i}" data-dir="${esc(p.dir)}" >
-      <span class="grip" data-grip title="drag to move">${I.grip}</span>
-      <div style="border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:#000">${media}</div>
-      <div style="display:grid;gap:10px;align-content:start;min-width:0">
-        <div style="display:flex;justify-content:space-between;align-items:center;gap:10px"><span style="min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><span class="faint mono" style="font-size:12px">0${i + 1}</span>&nbsp; ${esc(p.name)} <span class="faint mono" style="font-size:12px">· ${esc(p.id)}</span></span>${badge(p.status)}</div>
-        <div class="dim edit" contenteditable="plaintext-only" spellcheck="false" data-what="${esc(p.dir)}" data-placeholder="what this part shows" style="font-size:13px">${esc(p.what)}</div>
-        ${p.note ? `<div style="color:var(--warn);font-size:13px">you asked: “${esc(p.note)}”</div>` : ''}
-        ${p.error ? `<div class="mono" style="color:var(--warn);font-size:12px">render failed: ${esc(p.error)}</div>` : ''}
-        ${Object.keys(p.texts).length ? `<div style="display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center">${Object.entries(p.texts).map(([k, v]) => `<span class="mono faint" style="font-size:12px">${esc(k)}</span><input class="txt" value="${esc(v)}" data-text="${esc(p.dir)}" data-key="${esc(k)}">`).join('')}</div>` : ''}
-        <div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap">
-          <label class="mono dim" style="font-size:12px">length <input type="number" step="0.1" min="0.5" max="30" value="${p.seconds ?? ''}" data-sec="${esc(p.dir)}" style="width:68px"> s</label>
-          <label class="mono dim" style="font-size:12px">comes in with <select data-join="${esc(p.dir)}" ${i === 0 ? 'disabled' : ''}>${P.joins.map((j) => `<option ${j === p.join ? 'selected' : ''}>${j}</option>`).join('')}</select></label>
-        </div>
-        ${p.status === 'review' ? `<div style="display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap"><button class="btn small primary" data-okp="${esc(p.dir)}">${I.ok} approve part</button><input placeholder="or ask for a change, then Enter" data-cp="${esc(p.dir)}" style="flex:1;min-width:180px;background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;font-size:13px"></div>` : ''}
-      </div></div>`;
-  }).join('')}</div>`;
+
+// ─── 2 · your video ───────────────────────────────────────────────────────────────────────────────────────────────
+const cur = () => P.video?.parts.find((p) => p.dir === sel) ?? P.video?.parts[0];
+const joinName = (id) => P.library?.joins.find((j) => j.id === id)?.title ?? id;
+const firstWords = (p) => { const w = p.words.find((f) => f.kind === 'text' && f.value) ?? p.words.find((f) => f.value); return w ? String(w.value).split('\n')[0] : p.summary; };
+function videoHTML() {
+  const V = P.video;
+  if (!V) return `<div class="empty">${P.building ? 'Building your video from what you kept…' : 'Your video appears here once you keep what it says.'}<div style="margin-top:16px"><button class="btn" data-view="what">Go to What it says</button></div></div>`;
+  const p = cur(); sel = p?.dir;
+  const shape = V.format === '1080x1920' ? ' tall' : V.format === '1080x1080' ? ' sq' : '';
+  return `<div class="editor"><div class="center">
+      <div class="player${shape}" id="player"><span class="badge" id="pbadge"></span></div>
+      <div class="pbar"><span id="pinfo"></span><span class="grow"></span><span>${V.total} s · ${V.parts.length} parts</span>
+        <button class="btn sm" data-playall>${icon('play')}${playing ? 'Stop' : 'Play the whole video'}</button>
+        ${P.stage === 'video' && P.stages.video?.status === 'review' ? `<button class="btn primary sm" data-approve="video">It looks right → Export</button>` : `<button class="btn sm" data-view="export">Export →</button>`}</div>
+      <div><p class="lbl" style="margin:4px 0 8px">Your video, in order · drag to reorder · ＋ adds a part · the arrow is the transition</p>
+      <div class="track" id="track">${V.parts.map((x, i) => `${i === 0 ? `<div class="addp"><button data-addat="0" title="Add a part here">${icon('add')}</button></div>` : ''}
+        <div class="part${x.dir === sel ? ' sel' : ''}" draggable="true" data-part="${esc(x.dir)}" data-clip="${esc(x.clip)}">
+          <div class="th" style="background-image:url('${esc(x.poster)}')"><span class="n">${String(i + 1).padStart(2, '0')}</span><span class="sec">${Number(x.seconds).toFixed(1)}s</span></div>
+          <div class="meta"><div class="nm">${esc(x.title)}</div><div class="tx">${esc(firstWords(x))}</div></div></div>
+        ${x.join ? `<div class="join"><button data-joinof="${esc(x.dir)}" title="Transition: ${esc(joinName(x.join))}">${icon('join')}</button><small>${esc(joinName(x.join))}</small></div>` : ''}
+        <div class="addp"><button data-addat="${i + 1}" title="Add a part here">${icon('add')}</button></div>`).join('')}</div></div>
+    </div><aside class="insp" id="insp">${p ? inspHTML(p) : ''}</aside></div>`;
 }
-function trackHTML() {
-  if (!P.parts.length) return '';
-  const T = P.parts.reduce((a, p) => a + Number(p.seconds ?? 0), 0);
-  return `<div class="track">${P.parts.map((p, i) => `
-    ${i ? `<span title="${p.join}" style="display:grid;place-items:center;width:28px;color:var(--dim)">${I.join[p.join] ?? ''}</span>` : ''}
-    <div data-drop="${i}" data-dir="${esc(p.dir)}" draggable="true" data-trackdrag class="tblock" style="flex:${p.seconds ?? 1} 1 0;border-radius:8px;overflow:hidden;position:relative;outline:1px solid var(--line2);height:60px;background:#000">
-      ${p.draft ? `<video src="${esc(p.draft)}#t=${Math.min(1, (p.seconds ?? 2) / 2)}" preload="metadata" muted style="height:100%;object-fit:cover;pointer-events:none"></video>` : ''}
-      <span style="position:absolute;inset:auto 0 0 0;padding:4px 8px;background:linear-gradient(#0000,#000c);display:flex;justify-content:space-between;font-size:12px;pointer-events:none"><span>${esc(p.name)}</span><span class="mono dim">${fmt(p.seconds)}</span></span>
-    </div>`).join('')}</div><div class="faint mono" style="font-size:12px;margin-top:6px;text-align:right">${fmt(T)} in total · drag to reorder</div>`;
+function inspHTML(p) {
+  const n = P.video.parts.indexOf(p) + 1;
+  const fld = (f) => {
+    const a = `data-word="${esc(f.key)}"`;
+    if (f.kind === 'image') { const imgs = P.style?.images ?? []; return `<div class="fld">${esc(f.label)}<div class="pick"><img src="/files/${esc(String(f.value).replace(/^\//, ''))}" alt=""></div>${imgs.length > 1 ? `<select ${a}>${imgs.map((m) => `<option value="${esc(m)}"${m === f.value ? ' selected' : ''}>${esc(m.split('/').pop())}</option>`).join('')}</select>` : ''}<p class="hint">Another picture? Put it in brand/assets, or ask your agent.</p></div>`; }
+    if (f.kind === 'rows') return `<label class="fld">${esc(f.label)} <i>one per line${f.columns > 1 ? ', as  value | what it is' : ''}</i><textarea ${a} rows="${Math.min(8, String(f.value).split('\n').length + 1)}">${esc(f.value)}</textarea></label>`;
+    if (f.kind === 'lines') return `<label class="fld">${esc(f.label)} <i>one per line</i><textarea ${a} rows="${Math.min(8, String(f.value).split('\n').length + 1)}">${esc(f.value)}</textarea></label>`;
+    if (f.kind === 'block') return `<label class="fld">${esc(f.label)}<textarea class="code" ${a} rows="7">${esc(f.value)}</textarea></label>`;
+    if (String(f.value).length > 44) return `<label class="fld">${esc(f.label)}<textarea ${a} rows="2">${esc(f.value)}</textarea></label>`;
+    return `<label class="fld">${esc(f.label)}<input ${a} value="${esc(f.value)}"></label>`;
+  };
+  const B = P.inventory?.backgrounds ?? { mine: [], library: [] };
+  const panes = {
+    words: p.words.length ? p.words.map(fld).join('') : '<p class="hint">This part has no words of its own.</p>',
+    motion: p.motion ? `<p class="hint">How it arrives. Point at one to see it move.</p><div class="tiles">${p.motion.demos.map((d) => tile(d, `data-motion="${esc(d.value)}"`, d.value === p.motion.value)).join('')}</div>`
+      : `<p class="hint">This part has its own way of moving.</p><div class="tiles">${tile({ title: p.title, summary: p.summary, poster: p.poster, clip: p.clip }, 'disabled', true)}</div><button class="btn sm" data-swap>Show it another way</button>`,
+    bg: !p.takesBackground ? '<p class="hint">This part draws its own background, so it has none to change. Show it another way to use one.</p>' : `<p class="hint">Behind this part. Point at one to see it move.</p><div class="tiles">${[{ id: '', title: "Your brand's first", colors: [] , entry: null }, ...B.mine].map((b) => `<button class="tile${(p.background ?? '') === b.id ? ' on' : ''}" data-bg="${esc(b.id)}">${b.entry ? swatch(b) : '<div class="ph" style="display:grid;place-items:center;color:var(--muted);font-size:12px">default</div>'}<div class="lb">${esc(b.title)}</div></button>`).join('')}</div>
+      <div style="display:flex;gap:8px;flex-wrap:wrap"><button class="btn sm" data-bgall>Use this background on every part</button>${B.library.length ? `<button class="btn sm" data-bgmore>More backgrounds (${B.library.length})</button>` : ''}</div>`,
+    tune: `${p.tune.map((t) => t.kind === 'number'
+        ? `<div class="slider"><div>${esc(t.label)}<em id="tv-${esc(t.name)}">${esc(t.value)}</em></div><input type="range" min="${t.min}" max="${t.max}" step="${t.step}" value="${esc(t.value)}" data-tune="${esc(t.name)}"></div>`
+        : `<div class="fld">${esc(t.label)}<div class="seg">${t.options.map((o) => `<button class="btn sm${String(t.value) === String(o) ? ' on' : ''}" data-tunev="${esc(t.name)}" data-v="${esc(o)}">${esc(o)}</button>`).join('')}</div></div>`).join('')}
+      <div class="slider"><div>Length<em id="tv-seconds">${Number(p.seconds).toFixed(1)} s</em></div><input type="range" min="${p.range.min}" max="${p.range.max}" step="0.1" value="${p.seconds}" data-seconds data-natural="${p.duration}"></div>
+      <p class="hint" id="tv-pace">${pace(p.seconds, p.duration)}</p>`,
+  };
+  return `<div class="lbl">Part ${n} of ${P.video.parts.length}</div><h2>${esc(p.title)}</h2><p class="hint sum">${esc(p.summary)}</p>
+    <div class="tabs">${[['words', 'Words'], ['motion', 'Motion'], ['bg', 'Background'], ['tune', 'Tune']].map(([k, l]) => `<button class="${tab === k ? 'on' : ''}" data-tab="${k}">${l}</button>`).join('')}</div>
+    <div class="pane">${panes[tab]}</div>
+    <div class="partacts"><button class="btn sm" data-swap>Show it another way</button><button class="btn sm" data-dup>Duplicate</button><button class="btn sm" data-remove>Remove</button></div>`;
 }
-function assemblyHTML(st) {
-  return `${P.media.assembly ? `<div style="border-radius:12px;overflow:hidden">${vid(P.media.assembly, 'controls')}</div>` : `<div class="empty ${st === 'working' ? 'rendering' : ''}" style="border-radius:12px">${st === 'working' ? 'your agent is joining the parts' : 'not joined yet'}</div>`}${trackHTML()}`;
+// the player: the part's real scene, playing live; kept across redraws, reloaded only when the part changed
+function paintPlayer() {
+  const box = $('player'), p = cur(); if (!box || !p) return;
+  $('pbadge').textContent = `${String(P.video.parts.indexOf(p) + 1).padStart(2, '0')} · ${p.title}`;
+  const info = [p.motion ? p.motion.demos.find((d) => d.value === p.motion.value)?.title : null, p.background ? `${p.background} background` : null, `${Number(p.seconds).toFixed(1)} s`].filter(Boolean).join(' · ');
+  $('pinfo').textContent = info;
+  let f = box.querySelector('iframe');
+  if (!p.live) { if (!box.querySelector('.msg')) box.insertAdjacentHTML('beforeend', '<div class="msg">The live preview is starting…</div>'); return; }
+  box.querySelector('.msg')?.remove();
+  if (!f) { f = document.createElement('iframe'); f.title = 'Live preview'; box.append(f); }
+  if (f.dataset.src !== p.live) { f.dataset.src = p.live; f.src = p.live; }
 }
-function finalHTML(st) {
-  const out = P.media.outputs;
-  return `${P.media.final ? `<div style="border-radius:12px;overflow:hidden">${vid(P.media.final, 'controls')}</div>` : `<div class="empty ${st === 'working' ? 'rendering' : ''}" style="border-radius:12px">${st === 'working' ? 'rendering at full quality' : 'not rendered yet'}</div>`}
-    ${out.length ? `<div style="display:grid;gap:0">${out.map((o) => `<div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:9px 0"><span class="mono">${esc(o.file)}</span><span style="display:flex;gap:14px;align-items:center"><span class="faint mono" style="font-size:12px">${(o.bytes / 1e6).toFixed(1)} MB</span><a class="btn small" href="${esc(o.url)}" download="${esc(o.file)}">${I.down} download</a></span></div>`).join('')}</div>
-    <p class="faint" style="font-size:13px;margin:0">Need another shape (9:16, 1:1), a ProRes master or a GIF? Ask for it in the changes box.</p>` : ''}`;
+
+// ─── 3 · export ───────────────────────────────────────────────────────────────────────────────────────────────────
+function exportHTML() {
+  const M = P.media ?? {}, out = (M.outputs ?? []).filter((o) => /\.(mp4|mov|webm|gif)$/i.test(o.file));
+  const stale = P.stages.final?.status === 'changes';
+  return `<div class="exp"><h1>Export</h1>
+    ${!P.video ? '<p class="muted">Your video comes first.</p>' : `
+    <p class="muted">${P.video.parts.length} parts, ${P.video.total} s, ${esc(P.video.format)}. Full quality, with motion blur and your sound.${stale ? ' <b style="color:var(--warn)">You changed the video since the last render.</b>' : ''}</p>
+    <div>${P.rendering ? `<button class="btn" disabled>Rendering… ${P.rendering.joining ? 'joining' : P.rendering.part ? `part ${P.rendering.part} of ${P.rendering.of}` : ''}</button>` : `<button class="btn primary" data-render>${out.length ? 'Render again' : 'Render in full quality'}</button>`} <span class="muted" style="margin-left:10px">a minute or two</span></div>
+    ${M.final ? `<video src="${esc(M.final)}" controls playsinline></video>` : ''}
+    <div style="display:grid;gap:8px">${out.map((o) => `<div class="file"><span>${esc(o.file)} <span class="muted">· ${(o.bytes / 1e6).toFixed(1)} MB</span></span><a class="btn sm" href="${esc(o.url)}" download>Download</a></div>`).join('')}</div>
+    ${P.stage === 'final' && P.stages.final?.status === 'review' ? `<div><button class="btn" data-approve="final">This is the one</button></div>` : ''}`}</div>`;
 }
 
+// ─── drawing ──────────────────────────────────────────────────────────────────────────────────────────────────────
 function render() {
   if (!P) return;
-  const focus = captureFocus();
-  const k = view, st = P.stages[k].status, [, title, sub] = STAGES[order(k)];
-  const approvedParts = P.parts.filter((p) => p.status === 'approved').length;
-  const rail = STAGES.map(([key, t, s], n) => {
-    const ss = P.stages[key].status, on = key === k, can = ss !== 'pending' || key === P.stage;
-    return `<button data-go="${key}" ${can ? '' : 'disabled'} class="step${on ? ' on' : ''}">
-      <span class="mono faint" style="font-size:12px;padding-top:2px">0${n + 1}</span>
-      <span><span style="display:block">${t}</span><span class="dim sub" style="font-size:12px">${key === 'parts' && P.parts.length ? `${approvedParts} of ${P.parts.length} approved` : s}</span></span>
-      <span style="color:${(STATUS[ss] ?? [])[1]};padding-top:2px">${I[ss] ?? ''}</span></button>`;
-  }).join('');
-  const body = { brief: briefHTML, look: lookHTML, structure: structureHTML, parts: partsHTML, assembly: () => assemblyHTML(st), final: () => finalHTML(st) }[k]();
-  const canApprove = st === 'review' && (k !== 'parts' || (P.parts.length && approvedParts === P.parts.length));
-  const notes = P.events.filter((e) => e.stage === k && e.kind === 'changes').slice(-8);
-  const activity = P.events.filter((e) => e.stage === k).slice(-6).reverse();
-  const total = P.parts.reduce((a, p) => a + Number(p.seconds ?? 0), 0);
-  const app = document.getElementById('app');
-  app.innerHTML = `<div id="grid" class="shell" style="--rw:${rightW}px">
-    <aside class="rail">
-      <div class="head"><a href="/" class="faint mono" style="font-size:12px;text-decoration:none">← pieces</a><div class="serif" style="font-size:24px;line-height:1.1;margin-top:10px">${esc(P.title)}</div><div class="dim mono" style="font-size:12px;margin-top:6px">${[P.brand, P.dir, P.format, total ? fmt(total) : ''].filter(Boolean).map(esc).join(' · ')}</div></div>
-      <div class="steps">${rail}</div>
-    </aside>
-    <main class="stage">
-      <header><div class="dim mono" style="font-size:12px">stage ${order(k) + 1} of 6</div><h1 class="serif">${title}</h1><div class="dim">${sub}</div></header>
-      ${body}
-    </main>
-    <aside class="decide">
-      <div id="resize" title="drag to resize · double-click to reset" style="position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:5"><span style="position:absolute;left:4px;top:50%;width:2px;height:44px;margin-top:-22px;border-radius:2px;background:var(--line2)"></span></div>
-      <div>${badge(st)}${P.stages[k].at ? `<span class="faint mono" style="font-size:12px"> · ${clock(P.stages[k].at)}</span>` : ''}</div>
-      ${P.stages[k].note && st !== 'approved' ? `<div style="font-size:13px;border-left:2px solid var(--warn);padding-left:10px">${esc(P.stages[k].note)}</div>` : ''}
-      ${k === 'parts' && st === 'review' && !canApprove ? `<p class="dim" style="margin:0;font-size:13px">Approve each part, or ask for changes. Once they all are, your agent joins them.</p>` : ''}
-      ${st === 'review' ? `<button class="btn primary" data-oks="${k}" ${canApprove ? '' : 'disabled'} style="justify-content:center">${I.ok} approve ${title.toLowerCase()}</button>
-        <div><textarea id="note" placeholder="Anything to change? Your agent reads it and brings this stage back to you."></textarea><button class="btn small" data-cs="${k}" style="margin-top:8px">${I.note} ask for changes</button></div>` : ''}
-      ${st === 'approved' ? `<p class="dim" style="margin:0;font-size:13px">Approved. Reopen it to ask for a change.</p><button class="btn small" data-reopen="${k}" style="justify-self:start">${I.changes} reopen</button>` : ''}
-      ${st === 'working' || st === 'changes' ? `<p class="dim" style="margin:0;font-size:13px">Your agent is working on this stage. It shows up here when it's ready.</p>` : ''}
-      ${st === 'pending' ? `<p class="dim" style="margin:0;font-size:13px">This comes after ${esc(STAGES[order(k) - 1]?.[1] ?? '')}.</p>` : ''}
-      ${notes.length ? `<div class="notes" style="display:grid;gap:8px"><div class="faint mono" style="font-size:12px">your notes</div>${notes.map((f) => `<div style="font-size:13px;border-left:2px solid var(--line2);padding-left:10px">${f.part ? `<span class="faint mono">${esc(f.part)}</span> · ` : ''}${esc(f.text)} <span class="faint mono" style="font-size:11px">${clock(f.at)}</span></div>`).join('')}</div>` : ''}
-      ${activity.length ? `<div class="activity" style="display:grid;gap:6px"><div class="faint mono" style="font-size:12px">sent to your agent</div>${activity.map((e) => `<div class="mono faint" style="font-size:11px;line-height:1.4">${clock(e.at)} · ${esc(e.part ? `${e.part} ` : '')}${esc(e.kind === 'edit' ? `${e.key} → ${e.text}` : e.kind === 'changes' ? 'changes asked' : e.kind)}</div>`).join('')}</div>` : ''}
-    </aside></div>`;
-  app.querySelectorAll('video[data-k]').forEach((v) => { const c = vcache.get(v.dataset.k); if (c) v.replaceWith(c); else vcache.set(v.dataset.k, v); });
-  restoreFocus(focus);
-  // on a phone the stages are a strip: keep the open one in view
-  const on = app.querySelector('.step.on'); if (on && on.parentElement.scrollWidth > on.parentElement.clientWidth) on.scrollIntoView({ block: 'nearest', inline: 'center' });
+  // a field being typed in is never redrawn under the cursor: the page catches up when it loses focus
+  const a = document.activeElement;
+  if (a && a.closest?.('#app') && (a.matches('input, textarea, select') || a.isContentEditable)) { pending = true; return; }
+  pending = false;
+  const body = view === 'what' ? whatHTML() : view === 'video' ? videoHTML() : exportHTML();
+  const keepPlayer = $('player')?.querySelector('iframe');
+  const scroll = { insp: $('insp')?.scrollTop ?? 0, track: $('track')?.scrollLeft ?? 0 };
+  $('app').innerHTML = frame(body);
+  if (keepPlayer && $('player')) { $('player').append(keepPlayer); }
+  paintPlayer();
+  if ($('insp')) $('insp').scrollTop = scroll.insp;
+  if ($('track')) $('track').scrollLeft = scroll.track;
+  if (sheetOpen) paintSheet();
+}
+let pending = false;
+
+// ─── sheets: add, show another way, transition, more backgrounds, style ──────────────────────────────────────────
+let sheetOpen = null;
+function openSheet(kind, arg) { sheetOpen = { kind, arg }; paintSheet(); $('sheet').classList.add('on'); $('scrim').classList.add('on'); }
+function closeSheet() { sheetOpen = null; $('sheet').classList.remove('on'); $('scrim').classList.remove('on'); }
+let lastSheet = '';
+function paintSheet() {
+  const s = sheetOpen; if (!s || !P) return;
+  const key = JSON.stringify([s, P.style, P.video?.parts.map((p) => [p.dir, p.join, p.background, p.id]), P.inventory?.backgrounds?.mine?.length]);
+  if (key === lastSheet) return; lastSheet = key;
+  const head = (small, title) => `<header><div><span class="lbl">${esc(small)}</span><h2>${esc(title)}</h2></div><button class="btn sm" data-close>Close</button></header>`;
+  const L = P.library ?? { intents: [], joins: [] };
+  let h = '';
+  if (s.kind === 'add') h = head(`Add a part · position ${s.arg + 1}`, 'What do you want to add?') + `<p class="hint" style="margin-top:14px">Point at one to see it move. It arrives with something you kept, when it can show it.</p>` + L.intents.map((g) => `<div class="grp"><h3 class="lbl">${esc(g.title)}</h3><div class="tiles">${g.blocks.map((b) => tile(b, `data-addblock="${esc(b.id)}"`)).join('')}</div></div>`).join('');
+  else if (s.kind === 'swap') { const p = cur(), mine = L.intents.find((g) => g.blocks.some((b) => b.id === p.id)); h = head(`Part ${P.video.parts.indexOf(p) + 1}`, 'Show it another way') + `<p class="hint" style="margin-top:14px">Same content, shown differently. Point at one to see it move.</p>` + [mine, ...L.intents.filter((g) => g !== mine)].filter(Boolean).map((g, i) => `<div class="grp"><h3 class="lbl">${i ? esc(g.title) : `${esc(g.title)} · like this part`}</h3><div class="tiles">${g.blocks.map((b) => tile(b, `data-swapto="${esc(b.id)}"`, b.id === p.id)).join('')}</div></div>`).join(''); }
+  else if (s.kind === 'join') { const p = P.video.parts.find((x) => x.dir === s.arg), i = P.video.parts.indexOf(p); h = head(`Between part ${i + 1} and ${i + 2}`, 'How one leads to the next') + `<p class="hint" style="margin-top:14px">Point at one to see it move.</p><div class="grp"><div class="tiles">${L.joins.map((j) => tile(j, `data-setjoin="${esc(j.id)}"`, p.join === j.id)).join('')}</div></div><button class="btn sm" data-joinall style="margin-top:16px">Use ${esc(joinName(p.join))} everywhere</button>`; }
+  else if (s.kind === 'bgmore') { const B = P.inventory?.backgrounds ?? { library: [] }; h = head('Backgrounds', 'Add a background') + `<p class="hint" style="margin-top:14px">Point at one to see it move. Adding one puts it in your brand, in your colours, and uses it on this part.</p><div class="grp"><div class="tiles">${B.library.map((b) => `<button class="tile" data-bgadd="${esc(b.id)}">${swatch(b)}<div class="lb">${esc(b.title)}</div></button>`).join('')}</div></div>`; }
+  else if (s.kind === 'style') {
+    const S = P.style ?? {}, c = S.colors ?? {};
+    h = head('Your whole video', 'Style') + `
+      <div class="grp"><h3 class="lbl">Colours</h3><div class="pals">${(S.palettes ?? []).map((p) => `<button class="pal" data-palette="${esc(p.id)}">${p.colors.slice(0, 3).map((x) => `<i style="background:${esc(x)}"></i>`).join('')}<span>${esc(p.title)}</span></button>`).join('')}</div>
+        <p class="hint" style="margin:14px 0 8px">Or set each one yourself</p>
+        <div class="colors">${[['ground', 'Background'], ['figure', 'Text'], ['accent', 'Accent']].map(([k, l]) => `<label>${l}<input type="color" value="${esc(c[k] ?? '#000000')}" data-color="${k}"></label>`).join('')}</div></div>
+      <div class="grp"><h3 class="lbl">Type <span class="muted" style="text-transform:none;letter-spacing:0;font-family:var(--sans)">· now ${esc(S.fonts?.display ?? '')} and ${esc(S.fonts?.text ?? '')}</span></h3><div class="fonts">${(S.fontpairs ?? []).map((f) => `<button class="font" data-fontpair="${esc(f.id)}">${esc(f.title)}</button>`).join('')}</div></div>
+      <div class="grp"><h3 class="lbl">Pace</h3><div class="seg">${['calm', 'medium', 'fast'].map((x) => `<button class="btn${S.pace === x ? ' on' : ''}" data-pace="${x}">${x[0].toUpperCase() + x.slice(1)}</button>`).join('')}</div></div>
+      <p class="hint" style="margin-top:22px">Style is your brand's: it changes every part of this video, and every video after it.</p>`;
+  }
+  $('sheet').innerHTML = h;
 }
-const vcache = new Map();   // videos keep playing across re-renders (the key includes the file's mtime)
 
-// ─── wiring ────────────────────────────────────────────────────────────────────────
-document.addEventListener('click', (e) => {
-  const t = e.target.closest('button'); if (!t || t.disabled) return;
-  const d = t.dataset;
-  if (d.go) { view = d.go; render(); }
-  else if (d.okp) act({ type: 'approve-part', part: d.okp });
-  else if (d.oks) act({ type: 'approve', stage: d.oks });
-  else if (d.cs) { const v = document.getElementById('note').value; if (v.trim()) act({ type: 'changes', stage: d.cs, text: v }); else toast('write what to change first'); }
-  else if (d.reopen) act({ type: 'reopen', stage: d.reopen });
+// ─── wiring ───────────────────────────────────────────────────────────────────────────────────────────────────────
+const vact = (type, extra = {}) => act({ type: `v-${type}`, part: sel, ...extra });
+document.addEventListener('click', async (e) => {
+  if (e.target.id === 'scrim') return closeSheet();
+  const b = e.target.closest('button, .part'); if (!b || b.disabled) return; const d = b.dataset;
+  if (d.view) { view = d.view; closeSheet(); render(); scrollTo({ top: 0 }); }
+  else if ('close' in d) closeSheet();
+  else if (d.part !== undefined && !e.target.closest('button')) { sel = d.part; render(); }
+  else if (d.tab) { tab = d.tab; render(); }
+  else if ('undo' in d) act({ type: 'undo' });
+  else if ('style' in d) openSheet('style');
+  else if ('ask' in d) $('ask').classList.add('on');
+  else if ('askClose' in d) $('ask').classList.remove('on');
+  else if ('askSend' in d) { const t = $('askText').value.trim(); if (!t) return; await act({ type: 'changes', stage: P.stage, text: t }, true); $('askText').value = ''; $('ask').classList.remove('on'); toast(P.agent?.listening ? 'Sent to your agent' : 'Saved. Tell your agent “continue” in the chat', 3600); }
+  else if ('focus' in d) fetch(`/api/focus?p=${encodeURIComponent(piece)}`, { method: 'POST' });
+  else if (d.approve) { await act({ type: 'approve', stage: d.approve }); if (d.approve === 'video') { view = 'export'; render(); } }
+  else if ('make' in d) { if (P.inventory.items.some((i) => i.status === 'proposed')) await act({ type: 'inv-rest', value: 'kept' }, true); await act({ type: 'approve', stage: 'inventory' }, true); view = 'video'; toast('Building your video…', 3000); render(); }
+  else if (d.invSet) act({ type: 'inv-status', id: d.invSet, value: d.v }, true);
+  else if (d.invMust) act({ type: 'inv-must', id: d.invMust, value: !!d.v }, true);
+  else if ('addFact' in d) { const k = $('addKind').value, t = $('addText').value.trim(); if (!t) return toast('Write it first'); const m = t.match(/^([\d.,]+%?)\s+(.+)$/); const fields = k === 'line' ? { text: t } : k === 'figure' && m ? { value: m[1], label: m[2] } : k === 'share' && m ? { value: m[1].replace('%', ''), label: m[2] } : { text: t, label: t }; const r = await act({ type: 'inv-add', kind: k, fields }, true); if (!r.error) { $('addText').value = ''; toast('Added'); } }
+  else if (d.addat !== undefined) openSheet('add', Number(d.addat));
+  else if (d.addblock) { closeSheet(); const r = await act({ type: 'v-add', at: sheetOpenAt, block: d.addblock }); if (r.part) { sel = r.part; tab = 'words'; render(); } }
+  else if ('swap' in d) openSheet('swap');
+  else if (d.swapto) { closeSheet(); const r = await vact('swap', { block: d.swapto }); if (r.part) { sel = r.part; render(); } }
+  else if ('dup' in d) { const r = await vact('duplicate'); if (r.part) { sel = r.part; render(); } }
+  else if ('remove' in d) { const i = P.video.parts.findIndex((x) => x.dir === sel); const r = await vact('remove'); if (!r.error) { sel = P.video.parts[Math.max(0, i - 1)]?.dir; render(); toast('Removed. Undo brings it back.'); } }
+  else if (d.joinof) openSheet('join', d.joinof);
+  else if (d.setjoin) { const at = sheetOpen.arg; closeSheet(); act({ type: 'v-join', part: at, value: d.setjoin }); }
+  else if ('joinall' in d) { const p = P.video.parts.find((x) => x.dir === sheetOpen.arg); closeSheet(); act({ type: 'v-join', part: p.dir, value: p.join, all: true }); }
+  else if (d.motion) vact('motion', { value: d.motion });
+  else if (d.bg !== undefined) vact('background', { value: d.bg });
+  else if ('bgall' in d) vact('background', { value: cur().background ?? '', all: true });
+  else if ('bgmore' in d) openSheet('bgmore');
+  else if (d.bgadd) { b.querySelector('.lb').textContent = 'Adding…'; const r = await (await fetch(`/api/background?p=${encodeURIComponent(piece)}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: d.bgadd }) })).json(); if (r.error) return toast(`Not added: ${r.error}`); closeSheet(); vact('background', { value: d.bgadd }); }
+  else if (d.tunev) vact('tune', { key: d.tunev, value: d.v });
+  else if (d.palette) act({ type: 'style-palette', value: d.palette });
+  else if (d.fontpair) act({ type: 'style-font', value: d.fontpair });
+  else if (d.pace) act({ type: 'style-pace', value: d.pace });
+  else if ('render' in d) act({ type: 'render' });
+  else if ('playall' in d) playAll();
 });
+let sheetOpenAt = 0;
+const _open = openSheet; openSheet = (k, a) => { if (k === 'add') sheetOpenAt = a; _open(k, a); };
+function playAll() {
+  if (playing) { clearTimeout(playing); playing = null; onEnded = null; render(); return; }
+  let i = 0; const parts = P.video.parts;
+  // each part plays once in the player; the next one starts when it says it ended (or after its length, if it never does)
+  const next = () => {
+    clearTimeout(playing);
+    if (i >= parts.length || view !== 'video') { playing = null; onEnded = null; render(); return; }
+    sel = parts[i].dir; render(); onEnded = next; playing = setTimeout(next, (parts[i++].seconds + 3) * 1000);
+  };
+  playing = 1; next();
+}
+let onEnded = null;
+addEventListener('message', (e) => { if (e.data?.pm === 'ended' && onEnded && e.source === $('player')?.querySelector('iframe')?.contentWindow) onEnded(); });
 document.addEventListener('change', (e) => {
   const d = e.target.dataset;
-  if (d.text) act({ type: 'text', part: d.text, key: d.key, value: e.target.value });
-  if (d.sec) act({ type: 'seconds', part: d.sec, value: e.target.value });
-  if (d.join) act({ type: 'join', part: d.join, value: e.target.value });
+  if (d.word !== undefined) vact('word', { key: d.word, value: e.target.value });
+  else if (d.tune) vact('tune', { key: d.tune, value: e.target.value });
+  else if ('seconds' in d) vact('seconds', { value: e.target.value });
+  else if (d.color) act({ type: 'style-color', key: d.color, value: e.target.value });
+});
+document.addEventListener('input', (e) => {
+  const d = e.target.dataset; const k = d.tune ?? ('seconds' in d ? 'seconds' : null); if (!k) return;
+  const o = $(`tv-${k}`); if (o) o.textContent = k === 'seconds' ? `${Number(e.target.value).toFixed(1)} s` : e.target.value;
+  if (k === 'seconds' && $('tv-pace')) $('tv-pace').textContent = pace(Number(e.target.value), Number(d.natural));
 });
+// a part always plays its whole scene: its length is a speed
+function pace(s, natural) {
+  const r = natural / s, pct = Math.round(Math.abs(r - 1) * 100);
+  return pct < 1 ? 'Plays its whole scene at its own speed.' : `Plays its whole scene ${pct}% ${r > 1 ? 'faster' : 'slower'}.`;
+}
 document.addEventListener('focusout', (e) => {
-  const d = e.target.dataset, v = e.target.isContentEditable ? e.target.innerText.trim() : null;
-  if (d.brief && v !== P.brief[d.brief]) act({ type: 'brief', key: d.brief, value: v });
-  else if (d.what && v !== P.parts.find((p) => p.dir === d.what)?.what) act({ type: 'what', part: d.what, value: v });
+  const d = e.target.dataset ?? {}, v = e.target.isContentEditable ? e.target.innerText.trim() : null;
+  if (d.brief && v !== P.brief[d.brief]) act({ type: 'brief', key: d.brief, value: v }, true);
+  else if (d.inv && v) { const it = P.inventory.items.find((i) => i.id === d.inv); if (v !== String(it?.fields?.find((f) => f[0] === d.key)?.[1] ?? '')) act({ type: 'inv-field', id: d.inv, key: d.key, value: v }); }
+  setTimeout(() => { if (pending) render(); }, 0);
 });
 document.addEventListener('keydown', (e) => {
-  if (e.key !== 'Enter') return;
-  if (e.target.isContentEditable && !e.shiftKey) { e.preventDefault(); e.target.blur(); return; }   // Enter saves; Shift+Enter breaks a line
-  const d = e.target.dataset;
-  if (d.cp && e.target.value.trim()) act({ type: 'changes', stage: 'parts', part: d.cp, text: e.target.value });
-});
-// the decision column: drag its left edge, between RW[0] and RW[1]; double-click resets
-document.addEventListener('pointerdown', (e) => {
-  if (!e.target.closest('#resize')) return;
-  e.preventDefault(); document.body.classList.add('resizing');
-  const grid = document.getElementById('grid');
-  const move = (ev) => { rightW = Math.round(Math.min(RW[1], Math.max(RW[0], innerWidth - ev.clientX))); grid.style.setProperty('--rw', `${rightW}px`); };
-  const up = () => { document.body.classList.remove('resizing'); removeEventListener('pointermove', move); removeEventListener('pointerup', up); try { localStorage.setItem('studio:rw', rightW); } catch {} };
-  addEventListener('pointermove', move); addEventListener('pointerup', up);
-});
-document.addEventListener('dblclick', (e) => { if (e.target.closest('#resize')) { rightW = 340; try { localStorage.removeItem('studio:rw'); } catch {} render(); } });
-// drag to reorder: a card only while held by its grip (its fields stay usable); track blocks always
-let dragFrom = null;
-document.addEventListener('pointerdown', (e) => { if (e.target.closest('[data-grip]')) e.target.closest('.card').draggable = true; });
-document.addEventListener('dragstart', (e) => {
-  const el = e.target.closest?.('.card[draggable=true],[data-trackdrag]'); if (!el) return;
-  dragFrom = Number(el.dataset.drop); el.classList.add('dragging'); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', String(dragFrom));
+  if (e.key === 'Escape') { closeSheet(); $('ask').classList.remove('on'); }
+  if (e.key === 'Enter' && e.target.isContentEditable) { e.preventDefault(); e.target.blur(); }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.target.closest('input, textarea, [contenteditable]') && P?.undo) { e.preventDefault(); act({ type: 'undo' }); }
 });
-const clearMarks = () => document.querySelectorAll('.drop-before,.drop-after').forEach((x) => x.classList.remove('drop-before', 'drop-after'));
-document.addEventListener('dragover', (e) => {
-  if (dragFrom === null) return;
-  const el = e.target.closest('[data-drop]'); if (!el) return;
-  e.preventDefault(); clearMarks();
-  const r = el.getBoundingClientRect(), horiz = el.hasAttribute('data-trackdrag');
-  el.classList.add((horiz ? e.clientX < r.left + r.width / 2 : e.clientY < r.top + r.height / 2) ? 'drop-before' : 'drop-after');
+// samples play while the pointer is on them: a block's clip, or a background's shader running live
+document.addEventListener('mouseover', (e) => {
+  const c = e.target.closest?.('[data-clip]'); const ph = c?.querySelector('.ph, .th');
+  if (ph && c.dataset.clip && !ph.querySelector('video')) { const v = document.createElement('video'); Object.assign(v, { src: c.dataset.clip, muted: true, loop: true, autoplay: true, playsInline: true }); ph.append(v); }
+  const sw = e.target.closest?.('[data-swatch]');
+  if (sw && !sw.querySelector('iframe') && P?.inventory?.live && sw.dataset.swatch !== '{}') { const f = document.createElement('iframe'); f.src = `${P.inventory.live}/__pm/runtime/swatch.html#${encodeURIComponent(sw.dataset.swatch)}`; f.title = 'Live background'; sw.append(f); }
 });
+document.addEventListener('mouseout', (e) => { for (const s of ['[data-clip]', '[data-swatch]']) { const c = e.target.closest?.(s); if (c && !c.contains(e.relatedTarget)) c.querySelector('.ph > video, .th > video, iframe')?.remove(); } });
+// drag a part to reorder
+let from = null;
+document.addEventListener('dragstart', (e) => { const p = e.target.closest?.('.part'); if (!p) return; from = p.dataset.part; p.classList.add('dragging'); });
+document.addEventListener('dragover', (e) => { const p = e.target.closest?.('.part'); if (from === null || !p) return; e.preventDefault(); document.querySelectorAll('.part.drop').forEach((x) => x.classList.remove('drop')); p.classList.add('drop'); });
 document.addEventListener('drop', (e) => {
-  const el = e.target.closest('[data-drop]'); if (dragFrom === null || !el) return;
-  e.preventDefault();
-  let to = Number(el.dataset.drop) + (el.classList.contains('drop-after') ? 1 : 0);
-  if (to > dragFrom) to--;
-  const dirs = P.parts.map((p) => p.dir);
-  if (to !== dragFrom) { const [m] = dirs.splice(dragFrom, 1); dirs.splice(to, 0, m); act({ type: 'order', order: dirs }); }
-  dragFrom = null; clearMarks();
+  const p = e.target.closest?.('.part'); if (from === null || !p) return; e.preventDefault();
+  const order = P.video.parts.map((x) => x.dir), to = order.indexOf(p.dataset.part), at = order.indexOf(from);
+  if (to !== at) { order.splice(at, 1); order.splice(to, 0, from); act({ type: 'v-order', value: order }); }
+  from = null;
 });
-document.addEventListener('dragend', () => { dragFrom = null; clearMarks(); document.querySelectorAll('.dragging').forEach((x) => x.classList.remove('dragging')); document.querySelectorAll('.card[draggable=true]').forEach((x) => (x.draggable = false)); });
+document.addEventListener('dragend', () => { from = null; document.querySelectorAll('.dragging, .drop').forEach((x) => x.classList.remove('dragging', 'drop')); });
+// the page keeps up with the studio; a few misses in a row mean the studio itself stopped
+setInterval(() => load().then(() => { misses = 0; }).catch(() => { if (++misses === 3) render(); }), 1500);
 load();
 </script>
 </body>