stillmade-sdk 0.1.18 → 0.1.20

package/AGENTS.md

@@ -54,7 +54,7 @@ Give the Block a short, plain name of 40 characters or fewer that says what it d
 
 ## Interface
 
-If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
+If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side, each label beside its control (`sm-field`, `sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
 
 ## Shared editing
 

package/INTERFACE_DESIGN.md

@@ -58,8 +58,8 @@ piece in Light, Dark and White.
 | `sm-stage` | The thing being made: preview, media or result. `data-ratio="16:9"`, `"9:16"` or `"1:1"`. |
 | `sm-empty` | An empty stage: a glyph, at most five words, one action. |
 | `sm-choices` | Picks shown as pictures (`img`, `.sm-swatch`, `.sm-glyph`) and one or two words. `data-compact` for short text chips, `data-segmented` for one connected row of three or four short options. Chips and segments scroll sideways on a phone. Give the `fieldset` an `id` and `data-stillmade-share` so teammates see the same pick. |
-| `sm-field`, `sm-fields` | A short label above one control; a responsive group of them. |
-| `sm-settings` | Short settings side by side, each label above its control. |
+| `sm-field`, `sm-fields` | One short setting on one row, its label beside the control; a responsive group of them. On a phone the control wraps under its label only when both do not fit. A textarea, picture choices, file tiles or a list keep the label above. |
+| `sm-settings` | Short settings side by side, each label beside its control; a narrow cell wraps the control under its label. |
 | `sm-list` | Many items, one line each: a thumbnail, one line of text, a short fact. An item that opens in place is an `li` holding a `details`. `data-peek` shows three on a phone, with a last `li.sm-list-more` button that sets `data-open`. |
 | `sm-clamp` | Long text that shows five lines on a phone until it gets `data-open`. |
 | `sm-actions` | One `sm-primary`, then `sm-quiet` buttons and `sm-icon` buttons (each with `aria-label` and `title`). |
@@ -175,6 +175,15 @@ exception, never unrelated technical UI.
   ungrouped options, more than one `h1`, a visible paragraph over twenty words,
   a word dropdown for something people see or hear, a bare browser file
   picker, and a size limit printed in view.
+- Admission warns about the compact rules it can see in the source: a short
+  input or select whose label sits above it outside `sm-field` / `sm-settings`
+  (a `<br>` between them, or a label made `display: block`); a heading,
+  legend or `<details>` summary titled Update, Schedule, History, Reload or
+  Versions, which should be an icon button beside the action; and more than
+  eight visible top-level rows besides the stage. The row count is an estimate:
+  a static check cannot measure height. StillMade's builder preview measures the
+  real one and says when the view is taller than one laptop screen (720px) at
+  the Desktop size.
 - Admission also warns, and `stillmade-block ready` fails the "UI works" check
   (DOD-15), when a button says "Run", "Run step" or "Submit", when the
   interface shows a credit price, or when it has a page heading

package/PASTE_TO_LLM.md

@@ -52,7 +52,7 @@ Give the Block a short, plain name of 40 characters or fewer that says what it d
 
 ### Interface
 
-If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
+If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side, each label beside its control (`sm-field`, `sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
 
 ### Shared editing
 

package/SDK.md

@@ -230,7 +230,7 @@ Give the Block a short, plain name of 40 characters or fewer that says what it d
 
 ### Interface
 
-If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
+If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side, each label beside its control (`sm-field`, `sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
 
 ### Shared editing
 
@@ -7274,7 +7274,7 @@ Give the Block a short, plain name of 40 characters or fewer that says what it d
 
 ### Interface
 
-If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
+If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade's run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block's own files or the host's free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side, each label beside its control (`sm-field`, `sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.
 
 ### Shared editing
 
@@ -9555,8 +9555,8 @@ piece in Light, Dark and White.
 | `sm-stage` | The thing being made: preview, media or result. `data-ratio="16:9"`, `"9:16"` or `"1:1"`. |
 | `sm-empty` | An empty stage: a glyph, at most five words, one action. |
 | `sm-choices` | Picks shown as pictures (`img`, `.sm-swatch`, `.sm-glyph`) and one or two words. `data-compact` for short text chips, `data-segmented` for one connected row of three or four short options. Chips and segments scroll sideways on a phone. Give the `fieldset` an `id` and `data-stillmade-share` so teammates see the same pick. |
-| `sm-field`, `sm-fields` | A short label above one control; a responsive group of them. |
-| `sm-settings` | Short settings side by side, each label above its control. |
+| `sm-field`, `sm-fields` | One short setting on one row, its label beside the control; a responsive group of them. On a phone the control wraps under its label only when both do not fit. A textarea, picture choices, file tiles or a list keep the label above. |
+| `sm-settings` | Short settings side by side, each label beside its control; a narrow cell wraps the control under its label. |
 | `sm-list` | Many items, one line each: a thumbnail, one line of text, a short fact. An item that opens in place is an `li` holding a `details`. `data-peek` shows three on a phone, with a last `li.sm-list-more` button that sets `data-open`. |
 | `sm-clamp` | Long text that shows five lines on a phone until it gets `data-open`. |
 | `sm-actions` | One `sm-primary`, then `sm-quiet` buttons and `sm-icon` buttons (each with `aria-label` and `title`). |
@@ -9672,6 +9672,15 @@ exception, never unrelated technical UI.
   ungrouped options, more than one `h1`, a visible paragraph over twenty words,
   a word dropdown for something people see or hear, a bare browser file
   picker, and a size limit printed in view.
+- Admission warns about the compact rules it can see in the source: a short
+  input or select whose label sits above it outside `sm-field` / `sm-settings`
+  (a `<br>` between them, or a label made `display: block`); a heading,
+  legend or `<details>` summary titled Update, Schedule, History, Reload or
+  Versions, which should be an icon button beside the action; and more than
+  eight visible top-level rows besides the stage. The row count is an estimate:
+  a static check cannot measure height. StillMade's builder preview measures the
+  real one and says when the view is taller than one laptop screen (720px) at
+  the Desktop size.
 - Admission also warns, and `stillmade-block ready` fails the "UI works" check
   (DOD-15), when a button says "Run", "Run step" or "Submit", when the
   interface shows a credit price, or when it has a page heading

package/blocks/screen-recorder/versions/1.0.0/package.js

@@ -93,9 +93,9 @@ export default {
   "code": "// The interface records, edits and cuts on the device (StillMade.desktop\n// record.start / record.stop / record.cut). This run only hands the chosen\n// video, and the uncut original, on as typed outputs.\nconst video = input.video;\nif (!video) throw new Error('Record a screen or choose a video first.');\nreturn { video: video, original: input.original || video };\n",
   "view": {
     "runtime": "frame",
-    "html": "<main class=\"sm-block sr\" data-layout=\"stack\">\n  <section id=\"ready\" class=\"sr-panel\">\n    <p class=\"sr-lead\">Record a screen or window. The recording stays on this device until you pass it on.</p>\n    <p class=\"sr-capacity\" id=\"capacity\" role=\"status\"></p>\n    <div class=\"sr-options\">\n      <label class=\"sr-check\"><input id=\"mic\" type=\"checkbox\" data-stillmade-share=\"microphone\"> Microphone</label>\n      <label class=\"sr-check\"><input id=\"system\" type=\"checkbox\" data-stillmade-share=\"computerSound\"> Computer sound</label>\n      <label class=\"sr-select\">Size <select id=\"resolution\" data-stillmade-share=\"resolution\"><option value=\"1080p\" selected>1080p</option><option value=\"source\">Full size</option></select></label>\n    </div>\n    <div class=\"sm-actions\">\n      <button type=\"button\" class=\"sm-primary\" id=\"start\">Start recording</button>\n      <p class=\"sm-status\" id=\"ready-status\" role=\"status\">Nothing is captured until you press Start in the StillMade controls above.</p>\n    </div>\n  </section>\n  <section id=\"live\" class=\"sr-panel\" hidden>\n    <div class=\"sr-live\">\n      <span class=\"sr-dot\" aria-hidden=\"true\"></span>\n      <strong id=\"timer\" class=\"sr-timer\">0:00.0</strong>\n      <span id=\"size\" class=\"sr-size\">0 KB</span>\n    </div>\n    <div class=\"sm-actions\">\n      <button type=\"button\" class=\"sm-primary\" id=\"stop\">Stop and edit</button>\n      <button type=\"button\" class=\"sr-btn\" id=\"discard\">Discard</button>\n      <p class=\"sm-status\" id=\"live-status\" role=\"status\">Recording. Press Stop and edit when you are done.</p>\n      <p class=\"sr-capacity\" id=\"live-capacity\" role=\"status\"></p>\n    </div>\n  </section>\n  <section id=\"editor\" class=\"sr-panel\" hidden>\n    <video id=\"player\" class=\"sr-player\" playsinline preload=\"metadata\"></video>\n    <div class=\"sr-transport\">\n      <button type=\"button\" class=\"sr-btn\" id=\"play\" aria-label=\"Play\">Play</button>\n      <span id=\"time\" class=\"sr-time\">0:00.0 / 0:00.0</span>\n      <label class=\"sr-check sr-skip\"><input id=\"skip\" type=\"checkbox\" checked data-stillmade-local> Skip removed parts</label>\n    </div>\n    <div id=\"timeline\" class=\"sr-timeline\" role=\"group\" aria-label=\"Recording timeline\" tabindex=\"0\">\n      <div id=\"segments\" class=\"sr-segments\"></div>\n      <div id=\"playhead\" class=\"sr-playhead\" aria-hidden=\"true\"></div>\n    </div>\n    <div class=\"sr-tools\">\n      <button type=\"button\" class=\"sr-btn\" id=\"cut\">Cut here</button>\n      <button type=\"button\" class=\"sr-btn\" id=\"toggle\" disabled>Remove part</button>\n      <button type=\"button\" class=\"sr-btn\" id=\"undo\" disabled>Undo</button>\n      <span id=\"kept\" class=\"sr-kept\"></span>\n    </div>\n    <div class=\"sm-actions\">\n      <button type=\"button\" class=\"sm-primary\" id=\"save\">Use the whole recording</button>\n      <button type=\"button\" class=\"sr-btn\" id=\"again\">Record again</button>\n      <p class=\"sm-status\" id=\"editor-status\" role=\"status\"></p>\n    </div>\n  </section>\n  <section id=\"done\" class=\"sr-panel\" hidden>\n    <p class=\"sr-lead\" id=\"done-text\">Saved.</p>\n    <div class=\"sm-actions\">\n      <button type=\"button\" class=\"sm-primary\" id=\"edit-again\">Edit again</button>\n      <button type=\"button\" class=\"sr-btn\" id=\"record-again\">Record again</button>\n    </div>\n  </section>\n</main>\n",
-    "css": ".sr { display: block; }\n.sr-panel { display: grid; gap: 1rem; padding: 1.25rem; }\n.sr-lead { margin: 0; color: var(--fg-muted); }\n.sr-capacity { margin: 0; color: var(--fg-muted); font-size: .92em; }\n.sr-capacity[data-warn=\"true\"] { color: var(--warning); }\n.sr-options { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }\n.sr-check { display: inline-flex; align-items: center; gap: .45rem; color: var(--fg); }\n.sr-select { display: inline-flex; align-items: center; gap: .45rem; color: var(--fg); }\n.sr-select select { border: 1px solid var(--border-tok); border-radius: var(--r-3); background: var(--bg-elev-1); color: var(--fg); padding: .35rem .5rem; }\n.sr-btn { border: 1px solid var(--border-tok); border-radius: 999px; padding: .6rem 1rem; background: var(--bg-elev-1); color: var(--fg); cursor: pointer; }\n.sr-btn:hover { background: var(--hover-wash); }\n.sr-btn:disabled, .sm-primary:disabled { opacity: .5; cursor: default; }\n.sr-live { display: flex; align-items: center; gap: .75rem; }\n.sr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); }\n.sr-timer { font-size: 1.6rem; font-variant-numeric: tabular-nums; }\n.sr-size { color: var(--fg-muted); font-variant-numeric: tabular-nums; }\n.sr-player { width: 100%; max-height: 52vh; background: var(--bg-inset); border-radius: var(--r-3); }\n.sr-transport { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }\n.sr-time { font-variant-numeric: tabular-nums; color: var(--fg-muted); }\n.sr-skip { margin-left: auto; color: var(--fg-muted); }\n.sr-timeline { position: relative; height: 56px; border-radius: var(--r-3); background: var(--bg-inset); border: 1px solid var(--border-tok); overflow: hidden; touch-action: none; user-select: none; }\n.sr-timeline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.sr-segments { position: absolute; inset: 0; }\n.sr-seg { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; background: var(--accent-dim); cursor: pointer; }\n.sr-seg[data-kept=\"false\"] { background: var(--hover-wash); opacity: .55; }\n.sr-seg[aria-pressed=\"true\"] { box-shadow: inset 0 0 0 2px var(--accent); opacity: 1; }\n.sr-handle { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; cursor: ew-resize; background: transparent; border: 0; padding: 0; }\n.sr-handle::after { content: \"\"; position: absolute; top: 6px; bottom: 6px; left: 6px; width: 4px; border-radius: 2px; background: var(--fg); opacity: .7; }\n.sr-handle:hover::after, .sr-handle[data-active=\"true\"]::after { background: var(--accent); opacity: 1; }\n.sr-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--fg); pointer-events: none; }\n.sr-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }\n.sr-kept { margin-left: auto; color: var(--fg-muted); font-variant-numeric: tabular-nums; }\n@media (max-width: 480px) { .sr-panel { padding: 1rem; } .sr-skip { margin-left: 0; } }\n",
-    "javascript": "(()=>{\n\"use strict\";\n// The cut editor's model: the recording is an ordered list of segments that\n// together cover it, each kept or removed. A cut splits the segment under the\n// playhead, removing a segment drops it from the result, and dragging a\n// boundary trims both neighbours. Every change returns a new array, so undo\n// keeps the earlier ones. Times are seconds of the source recording.\nconst MIN_SEGMENT = 0.1;\nlet nextSegmentId = 1;\nfunction createSegments(duration) {\n  nextSegmentId = 1;\n  return [{ id: nextSegmentId++, start: 0, end: duration, kept: true }];\n}\nfunction segmentAt(segments, time) {\n  const found = segments.find(segment => time >= segment.start && time < segment.end);\n  if (found) return found;\n  const last = segments[segments.length - 1];\n  return last && time >= last.end ? last : null;\n}\nfunction splitAt(segments, time) {\n  const index = segments.findIndex(segment => time > segment.start + MIN_SEGMENT && time < segment.end - MIN_SEGMENT);\n  if (index < 0) return segments;\n  const segment = segments[index];\n  return [...segments.slice(0, index), { ...segment, end: time }, { id: nextSegmentId++, start: time, end: segment.end, kept: segment.kept }, ...segments.slice(index + 1)];\n}\nfunction toggleKept(segments, id) {\n  const index = segments.findIndex(segment => segment.id === id);\n  if (index < 0) return segments;\n  const next = segments.slice();\n  next[index] = { ...next[index], kept: !next[index].kept };\n  return next;\n}\n/** Moves the boundary before segments[index], clamped so both neighbours keep a minimum length. */\nfunction moveBoundary(segments, index, time) {\n  if (index < 1 || index >= segments.length) return segments;\n  const left = segments[index - 1], right = segments[index];\n  const clamped = Math.min(right.end - MIN_SEGMENT, Math.max(left.start + MIN_SEGMENT, time));\n  if (clamped === left.end) return segments;\n  const next = segments.slice();\n  next[index - 1] = { ...left, end: clamped };\n  next[index] = { ...right, start: clamped };\n  return next;\n}\n/** Trims the recording's start or end to `time`: the trimmed part becomes a removed segment. */\nfunction trimEdge(segments, edge, time) {\n  if (edge === 'start') {\n    if (!segments[0].kept) return moveBoundary(segments, 1, time);\n    const split = splitAt(segments, time);\n    return split === segments ? segments : toggleKept(split, split[0].id);\n  }\n  const last = segments[segments.length - 1];\n  if (!last.kept) return moveBoundary(segments, segments.length - 1, time);\n  const split = splitAt(segments, time);\n  return split === segments ? segments : toggleKept(split, split[split.length - 1].id);\n}\n/** The kept ranges in order, neighbours merged: what record.cut keeps. */\nfunction keepRanges(segments) {\n  const ranges = [];\n  for (const segment of segments) {\n    if (!segment.kept) continue;\n    const last = ranges[ranges.length - 1];\n    if (last && Math.abs(last.end - segment.start) < 1e-6) last.end = segment.end;\n    else ranges.push({ start: segment.start, end: segment.end });\n  }\n  return ranges;\n}\nfunction keptDuration(segments) {\n  return segments.reduce((sum, segment) => segment.kept ? sum + segment.end - segment.start : sum, 0);\n}\nfunction isWhole(segments) {\n  return segments.every(segment => segment.kept);\n}\n/** Where playback continues from `time` when removed parts are skipped: `time` itself when kept, the next kept start, or null when nothing kept follows. */\nfunction nextKeptTime(segments, time) {\n  const segment = segmentAt(segments, time);\n  if (!segment || segment.kept) return time;\n  const later = segments.find(candidate => candidate.kept && candidate.start >= segment.end);\n  return later ? later.start : null;\n}\nfunction firstKeptTime(segments) {\n  const segment = segments.find(candidate => candidate.kept);\n  return segment ? segment.start : 0;\n}\n/** Seconds as m:ss.d */\nfunction formatTime(seconds) {\n  const total = Math.max(0, Math.round((Number(seconds) || 0) * 10) / 10);\n  const minutes = Math.floor(total / 60), whole = Math.floor(total % 60), tenth = Math.round((total - Math.floor(total)) * 10) % 10;\n  return `${minutes}:${String(whole).padStart(2, '0')}.${tenth}`;\n}\nfunction formatBytes(bytes) {\n  const value = Number(bytes) || 0;\n  return value >= 1024 * 1024 * 1024 ? `${(value / 1024 / 1024 / 1024).toFixed(2)} GB` : value >= 1024 * 1024 ? `${Math.round(value / 1024 / 1024)} MB` : `${Math.max(1, Math.round(value / 1024))} KB`;\n}\n\n// The Screen Recorder interface: record (the host records, this view only asks),\n// then a small cut editor over the recording kept on this device, then one\n// run that hands the result on. Built into src/view.js with the cut model.\nconst $ = id => document.getElementById(id);\nconst panels = { ready: $('ready'), live: $('live'), editor: $('editor'), done: $('done') };\nconst player = $('player'), timeline = $('timeline'), segmentsNode = $('segments'), playhead = $('playhead');\nconst state = { phase: 'ready', source: null, segments: [], undo: [], selected: null, duration: 0, previewUrl: null, dragging: null, poll: null, busy: false, lastSaved: null, device: null };\n\nfunction show(phase) {\n  state.phase = phase;\n  for (const [name, node] of Object.entries(panels)) node.hidden = name !== phase;\n}\nconst say = (id, text) => { $(id).textContent = text || ''; };\nconst message = error => String(error && error.message || error || 'Something went wrong.');\nconst sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\nconst busy = value => { state.busy = value; for (const id of ['start', 'stop', 'discard', 'cut', 'toggle', 'undo', 'save', 'again', 'edit-again', 'record-again']) $(id).disabled = value || ($(id).dataset.off === 'true'); };\n\n// ── What fits here ─────────────────────────────────────────────────────────\nconst minutes = seconds => Math.max(1, Math.round(seconds / 60));\nfunction describeDevice(device) {\n  if (!device) return '';\n  if (!device.recorder) return 'This browser cannot record. Use a current desktop browser or StillMade Desktop.';\n  const notes = [];\n  if (device.platform === 'desktop') notes.push('Records straight to disk; up to ' + minutes(device.budget.seconds) + ' minutes per recording.');\n  else if (device.budget.seconds < 60) notes.push('Less than a minute fits on this device. Free up storage or use StillMade Desktop.');\n  else notes.push('About ' + minutes(device.budget.seconds) + ' minutes at 1080p fit on this device' + (device.budget.bytes ? ' (' + formatBytes(device.budget.bytes) + ')' : '') + '. StillMade Desktop records longer.');\n  if (device.cut === 'playback') notes.push('Cuts here take as long as the part you keep.');\n  if (device.cut === 'none') notes.push('This browser cannot cut recordings; the whole recording can still be used, or cut it in StillMade Desktop.');\n  return notes.join(' ');\n}\nasync function loadDevice() {\n  let problem = null;\n  try { state.device = await StillMade.desktop('device.info'); } catch (error) { state.device = null; problem = message(error); }\n  say('capacity', state.device ? describeDevice(state.device) : `Could not check what fits on this device: ${problem}`);\n  $('capacity').dataset.warn = String(!!problem || (!!state.device && (!state.device.recorder || state.device.budget.seconds < 60)));\n}\nfunction describeLive(status) {\n  const limits = status.limits || {};\n  const parts = [];\n  let warn = false;\n  if (limits.seconds) {\n    const left = Math.max(0, limits.seconds - (status.elapsed || 0) / 1000);\n    if (left <= limits.seconds * 0.2) { warn = true; parts.push(formatTime(left) + ' left before the time limit.'); }\n  }\n  if (limits.bytes) {\n    const left = Math.max(0, limits.bytes - (status.bytes || 0));\n    if (left <= limits.bytes * 0.2) { warn = true; parts.push(formatBytes(left) + ' of space left here. The recording stops and is kept when it runs out.'); }\n  }\n  return { text: parts.join(' '), warn };\n}\n\n// ── Record ─────────────────────────────────────────────────────────────────\nasync function pollStatus() {\n  if (state.phase !== 'live') return;\n  try {\n    const status = await StillMade.desktop('record.status');\n    if (state.phase !== 'live') return;\n    if (status.active) {\n      say('timer', formatTime((status.elapsed || 0) / 1000));\n      say('size', formatBytes(status.bytes));\n      const live = describeLive(status);\n      say('live-capacity', status.ended ? '' : live.text); $('live-capacity').dataset.warn = String(live.warn && !status.ended);\n      if (status.ended) say('live-status', `${status.message || 'The recording stopped.'} Press Stop and edit to keep it.`);\n    }\n  } catch (error) { say('live-status', message(error)); }\n  state.poll = setTimeout(pollStatus, 1000);\n}\n$('start').addEventListener('click', async () => {\n  busy(true);\n  say('ready-status', 'Press Start in the StillMade controls above, then choose what to record.');\n  try {\n    await StillMade.desktop('record.start', { kind: 'screen', microphone: $('mic').checked, systemAudio: $('system').checked, resolution: $('resolution').value });\n    say('timer', '0:00.0'); say('size', '0 KB'); say('live-status', 'Recording. Press Stop and edit when you are done.'); say('live-capacity', '');\n    show('live'); pollStatus();\n  } catch (error) { say('ready-status', message(error)); }\n  finally { busy(false); }\n});\n$('stop').addEventListener('click', async () => {\n  busy(true); clearTimeout(state.poll);\n  say('live-status', 'Saving the recording on this device…');\n  try {\n    const result = await StillMade.desktop('record.stop');\n    const asset = { ...result.asset };\n    for (const key of ['duration', 'width', 'height']) if (result[key] && !asset[key]) asset[key] = result[key];\n    await openEditor(asset);\n    say('editor-status', result.stoppedBy ? result.message : '');\n  } catch (error) { say('live-status', message(error)); state.phase = 'live'; pollStatus(); }\n  finally { busy(false); }\n});\n$('discard').addEventListener('click', async () => {\n  busy(true); clearTimeout(state.poll);\n  try { await StillMade.desktop('record.cancel'); } catch (error) { /* already gone */ }\n  say('ready-status', 'Discarded. Ready to record again.'); show('ready'); busy(false);\n});\nconst recordAgain = () => { closePreview(); state.source = null; say('ready-status', 'Ready to record.'); show('ready'); loadDevice(); };\n$('again').addEventListener('click', recordAgain);\n$('record-again').addEventListener('click', recordAgain);\n\n// ── Editor ─────────────────────────────────────────────────────────────────\nfunction closePreview() {\n  player.pause();\n  if (state.previewUrl) { try { StillMade.releaseMedia(state.previewUrl); } catch (error) { /* released */ } state.previewUrl = null; }\n  player.removeAttribute('src'); player.load();\n}\nasync function openEditor(source) {\n  closePreview();\n  state.source = source; state.selected = null; state.undo = [];\n  const { url } = await StillMade.previewMedia(source);\n  state.previewUrl = url;\n  const duration = await new Promise((resolve, reject) => {\n    const done = () => { player.onloadedmetadata = null; player.onerror = null; resolve(Number.isFinite(player.duration) && player.duration > 0 ? player.duration : Number(source.duration) || 0); };\n    player.onloadedmetadata = done;\n    player.onerror = () => reject(new Error('This recording could not be opened for editing.'));\n    player.src = url;\n  });\n  if (!(duration > 0)) throw new Error('The recording has no length to edit.');\n  state.duration = duration;\n  state.segments = createSegments(duration);\n  renderTimeline(); updateTime(); updateButtons();\n  say('editor-status', '');\n  show('editor');\n}\nconst fraction = time => Math.max(0, Math.min(1, time / state.duration));\nfunction renderTimeline() {\n  segmentsNode.replaceChildren();\n  state.segments.forEach((segment, index) => {\n    const node = document.createElement('button');\n    node.type = 'button'; node.className = 'sr-seg'; node.dataset.id = String(segment.id); node.dataset.kept = String(segment.kept);\n    node.setAttribute('aria-pressed', String(state.selected === segment.id));\n    node.setAttribute('aria-label', `${segment.kept ? 'Kept' : 'Removed'} part from ${formatTime(segment.start)} to ${formatTime(segment.end)}`);\n    node.style.left = `${fraction(segment.start) * 100}%`; node.style.width = `${(fraction(segment.end) - fraction(segment.start)) * 100}%`;\n    node.addEventListener('click', event => { state.selected = state.selected === segment.id ? null : segment.id; seekTo(timeAt(event.clientX)); renderTimeline(); updateButtons(); });\n    segmentsNode.append(node);\n    if (index > 0) {\n      const handle = document.createElement('button');\n      handle.type = 'button'; handle.className = 'sr-handle'; handle.dataset.index = String(index);\n      handle.setAttribute('aria-label', `Move the cut at ${formatTime(segment.start)}`);\n      handle.style.left = `${fraction(segment.start) * 100}%`;\n      handle.addEventListener('pointerdown', beginDrag);\n      segmentsNode.append(handle);\n    }\n  });\n  say('kept', isWhole(state.segments) ? `${formatTime(state.duration)} kept` : `${formatTime(keptDuration(state.segments))} of ${formatTime(state.duration)} kept`);\n}\nfunction timeAt(clientX) {\n  const box = timeline.getBoundingClientRect();\n  return box.width > 0 ? Math.max(0, Math.min(state.duration, (clientX - box.left) / box.width * state.duration)) : 0;\n}\nfunction beginDrag(event) {\n  event.preventDefault(); event.stopPropagation();\n  const index = Number(event.currentTarget.dataset.index);\n  state.dragging = { index, before: state.segments, handle: event.currentTarget, pointerId: event.pointerId };\n  event.currentTarget.setPointerCapture(event.pointerId);\n  event.currentTarget.dataset.active = 'true';\n  event.currentTarget.addEventListener('pointermove', continueDrag);\n  event.currentTarget.addEventListener('pointerup', endDrag);\n  event.currentTarget.addEventListener('pointercancel', endDrag);\n}\nfunction continueDrag(event) {\n  const drag = state.dragging; if (!drag) return;\n  const next = moveBoundary(state.segments, drag.index, timeAt(event.clientX));\n  if (next === state.segments) return;\n  state.segments = next;\n  const boundary = next[drag.index].start;\n  drag.handle.style.left = `${fraction(boundary) * 100}%`;\n  const left = segmentsNode.querySelector(`.sr-seg[data-id=\"${next[drag.index - 1].id}\"]`), right = segmentsNode.querySelector(`.sr-seg[data-id=\"${next[drag.index].id}\"]`);\n  if (left) left.style.width = `${(fraction(boundary) - fraction(next[drag.index - 1].start)) * 100}%`;\n  if (right) { right.style.left = `${fraction(boundary) * 100}%`; right.style.width = `${(fraction(next[drag.index].end) - fraction(boundary)) * 100}%`; }\n  seekTo(boundary, { quiet: true });\n}\nfunction endDrag(event) {\n  const drag = state.dragging; if (!drag) return;\n  state.dragging = null;\n  drag.handle.dataset.active = 'false';\n  drag.handle.removeEventListener('pointermove', continueDrag);\n  drag.handle.removeEventListener('pointerup', endDrag);\n  drag.handle.removeEventListener('pointercancel', endDrag);\n  try { drag.handle.releasePointerCapture(drag.pointerId); } catch (error) { /* released */ }\n  if (drag.before !== state.segments) { state.undo.push(drag.before); if (state.undo.length > 100) state.undo.shift(); }\n  renderTimeline(); updateButtons();\n}\ntimeline.addEventListener('pointerdown', event => { if (event.target === timeline || event.target === segmentsNode) seekTo(timeAt(event.clientX)); });\nfunction seekTo(time, options) {\n  player.currentTime = Math.max(0, Math.min(state.duration, time));\n  if (!(options && options.quiet)) updateTime();\n}\nfunction updateTime() {\n  const time = player.currentTime || 0;\n  playhead.style.transform = `translateX(${fraction(time) * timeline.clientWidth}px)`;\n  say('time', `${formatTime(time)} / ${formatTime(state.duration)}`);\n}\nplayer.addEventListener('timeupdate', () => {\n  if (state.phase !== 'editor') return;\n  if ($('skip').checked && !player.paused) {\n    const next = nextKeptTime(state.segments, player.currentTime);\n    if (next === null) { player.pause(); }\n    else if (next !== player.currentTime) { player.currentTime = next; }\n  }\n  updateTime();\n});\nplayer.addEventListener('play', () => { if ($('skip').checked) { const next = nextKeptTime(state.segments, player.currentTime); if (next === null) player.currentTime = firstKeptTime(state.segments); else if (next !== player.currentTime) player.currentTime = next; } $('play').textContent = 'Pause'; });\nplayer.addEventListener('pause', () => { $('play').textContent = 'Play'; });\nplayer.addEventListener('ended', () => { $('play').textContent = 'Play'; });\n$('play').addEventListener('click', () => { if (player.paused) player.play().catch(error => say('editor-status', message(error))); else player.pause(); });\nfunction apply(next) {\n  if (next === state.segments) return;\n  state.undo.push(state.segments); if (state.undo.length > 100) state.undo.shift();\n  state.segments = next;\n  renderTimeline(); updateButtons();\n}\n$('cut').addEventListener('click', () => { apply(splitAt(state.segments, player.currentTime)); });\n$('toggle').addEventListener('click', () => { if (state.selected !== null) apply(toggleKept(state.segments, state.selected)); });\n$('undo').addEventListener('click', () => { const previous = state.undo.pop(); if (previous) { state.segments = previous; if (!previous.some(segment => segment.id === state.selected)) state.selected = null; renderTimeline(); updateButtons(); } });\ntimeline.addEventListener('keydown', event => {\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { event.preventDefault(); seekTo((player.currentTime || 0) + (event.key === 'ArrowLeft' ? -0.5 : 0.5) * (event.shiftKey ? 10 : 1)); }\n  else if (event.key === 'c' || event.key === 'C') { event.preventDefault(); $('cut').click(); }\n  else if (event.key === 'Delete' || event.key === 'Backspace') { event.preventDefault(); $('toggle').click(); }\n  else if (event.key === ' ') { event.preventDefault(); $('play').click(); }\n});\nfunction updateButtons() {\n  const selected = state.segments.find(segment => segment.id === state.selected);\n  $('toggle').disabled = !selected; $('toggle').dataset.off = String(!selected);\n  $('toggle').textContent = selected && !selected.kept ? 'Keep part' : 'Remove part';\n  $('undo').disabled = !state.undo.length; $('undo').dataset.off = String(!state.undo.length);\n  const whole = isWhole(state.segments), nothing = keepRanges(state.segments).length === 0;\n  $('save').textContent = whole ? 'Use the whole recording' : 'Save the cut';\n  $('save').disabled = nothing; $('save').dataset.off = String(nothing);\n}\nwindow.addEventListener('resize', () => { if (state.phase === 'editor') updateTime(); });\n\n// ── Save ───────────────────────────────────────────────────────────────────\n$('save').addEventListener('click', async () => {\n  const source = state.source; if (!source) return;\n  const keep = keepRanges(state.segments);\n  if (!keep.length) { say('editor-status', 'Keep at least one part.'); return; }\n  busy(true); player.pause();\n  try {\n    let video = source;\n    if (!isWhole(state.segments)) {\n      say('editor-status', 'Cutting on this device…');\n      let watching = true;\n      const watch = async () => { while (watching) { await sleep(700); if (!watching) break; try { const status = await StillMade.desktop('record.status'); if (status.cutting) say('editor-status', `Cutting on this device… ${Math.round(status.cutting.progress * 100)}%`); } catch (error) { /* next tick */ } } };\n      watch();\n      try { video = (await StillMade.desktop('record.cut', { source, keep })).asset; }\n      finally { watching = false; }\n    }\n    say('editor-status', 'Passing the result on…');\n    await StillMade.run({ video, original: source });\n    state.lastSaved = video;\n    say('done-text', isWhole(state.segments) ? `The whole recording (${formatTime(state.duration)}) is the result.` : `Saved ${formatTime(keptDuration(state.segments))} of ${formatTime(state.duration)}. The uncut recording is kept beside it.`);\n    show('done');\n  } catch (error) { say('editor-status', message(error)); }\n  finally { busy(false); }\n});\n$('edit-again').addEventListener('click', () => { if (state.source) { show('editor'); say('editor-status', ''); } });\n\n// ── Input: a video from an earlier Step opens straight in the editor ──────\n// onInput first fires once the view is ready, which is also the earliest moment a host call can be made.\nStillMade.onInput(async input => {\n  if (!state.device && !state.deviceAsked) { state.deviceAsked = true; loadDevice(); }\n  const video = input && input.video;\n  if (!video || state.source || state.phase !== 'ready') return;\n  busy(true);\n  try { await openEditor(video); say('editor-status', 'Editing the video this Block received. Record again to replace it.'); }\n  catch (error) { say('ready-status', message(error)); }\n  finally { busy(false); }\n});\n\n})();\n"
+    "html": "<main class=\"sm-block sr\">\n  <section class=\"sm-stage sr-stage\" id=\"stage\" aria-live=\"polite\">\n    <video id=\"player\" class=\"sr-player\" playsinline preload=\"metadata\" hidden></video>\n    <div class=\"sm-empty\" id=\"empty\">\n      <span class=\"sm-glyph\" data-glyph=\"video\" aria-hidden=\"true\"></span>\n      <p>Nothing recorded yet</p>\n    </div>\n    <div class=\"sr-live\" id=\"meter\" hidden>\n      <span class=\"sr-dot\" aria-hidden=\"true\"></span>\n      <strong id=\"timer\">0:00.0</strong>\n      <span id=\"size\">0 KB</span>\n    </div>\n    <div id=\"timeline\" class=\"sr-timeline\" role=\"group\" aria-label=\"Recording timeline\" tabindex=\"0\" hidden>\n      <div id=\"segments\" class=\"sr-segments\"></div>\n      <div id=\"playhead\" class=\"sr-playhead\" aria-hidden=\"true\"></div>\n    </div>\n  </section>\n  <fieldset class=\"sm-choices\" data-compact id=\"sound\">\n    <legend>Sound</legend>\n    <label><input id=\"mic\" type=\"checkbox\" data-stillmade-share=\"microphone\"><span class=\"sm-glyph\" data-glyph=\"audio\" aria-hidden=\"true\"></span><span>Microphone</span></label>\n    <label><input id=\"system\" type=\"checkbox\" data-stillmade-share=\"computerSound\"><span>Computer sound</span></label>\n  </fieldset>\n  <div class=\"sm-actions\" id=\"tools\" hidden>\n    <button type=\"button\" class=\"sm-icon\" id=\"play\" aria-label=\"Play\" title=\"Play\"><span class=\"sm-glyph\" data-glyph=\"play\" aria-hidden=\"true\"></span></button>\n    <span class=\"sr-time\" id=\"time\">0:00.0 / 0:00.0</span>\n    <button type=\"button\" class=\"sm-quiet\" id=\"cut\">Cut here</button>\n    <button type=\"button\" class=\"sm-quiet\" id=\"toggle\" disabled>Remove part</button>\n    <button type=\"button\" class=\"sm-quiet\" id=\"undo\" disabled>Undo</button>\n    <span class=\"sr-time\" id=\"kept\"></span>\n  </div>\n  <div class=\"sm-actions\">\n    <button type=\"button\" class=\"sm-primary\" id=\"action\">Record screen</button>\n    <button type=\"button\" class=\"sm-quiet\" id=\"secondary\" hidden>Record again</button>\n    <p class=\"sm-status\" id=\"status\" role=\"status\"></p>\n    <details class=\"sm-hint\" id=\"why\" hidden><summary aria-label=\"Why\" title=\"Why\"></summary><p id=\"why-text\"></p></details>\n  </div>\n  <details class=\"sm-more\" id=\"more\">\n    <summary>More</summary>\n    <div class=\"sm-settings\">\n      <fieldset class=\"sm-choices\" data-segmented id=\"resolution\" data-stillmade-share=\"resolution\">\n        <legend>Size</legend>\n        <label><input type=\"radio\" name=\"resolution\" value=\"1080p\" checked><span>1080p</span></label>\n        <label><input type=\"radio\" name=\"resolution\" value=\"source\"><span>Full size</span></label>\n      </fieldset>\n      <fieldset class=\"sm-choices\" data-compact id=\"playback\" hidden>\n        <legend>Playback</legend>\n        <label><input id=\"skip\" type=\"checkbox\" checked data-stillmade-local><span>Skip removed parts</span></label>\n      </fieldset>\n    </div>\n  </details>\n</main>\n",
+    "css": "/* The Block kit (injected by the host) carries the layout; this file only draws\n   what the kit has no piece for: the recording meter and the cut timeline. */\n.sr [hidden] { display: none !important; }\n.sr-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; justify-items: stretch; gap: var(--s-2, 8px); }\n.sr-stage > .sm-empty, .sr-live { align-self: center; justify-self: center; }\n.sr-player { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; border-radius: var(--r-2, 4px); background: var(--bg-inset); }\n#sound { --sm-tile: 150px; }\n.sr-live { display: flex; align-items: center; gap: var(--s-3, 12px); font-variant-numeric: tabular-nums; }\n.sr-live strong { font-size: 1.6rem; font-weight: 500; }\n.sr-live span:last-child { color: var(--fg-muted); }\n.sr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--attention-error, var(--signal)); }\n.sr-time { color: var(--fg-muted); font-size: var(--fs-body-s, .875rem); font-variant-numeric: tabular-nums; }\n/* Kept parts are solid, removed parts hatched, the chosen part outlined. */\n.sr-timeline { position: relative; height: 48px; border-radius: var(--r-3, 8px); background: var(--bg-elev-1); border: 1px solid var(--border-tok); overflow: hidden; touch-action: none; user-select: none; }\n.sr-timeline:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }\n.sr-segments { position: absolute; inset: 0; }\n.sr-seg { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; background: var(--fg-muted); opacity: .5; cursor: pointer; }\n.sr-seg[data-kept=\"false\"] { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--border-strong) 6px 8px); opacity: 1; }\n.sr-seg[aria-pressed=\"true\"] { box-shadow: inset 0 0 0 2px var(--fg); opacity: 1; }\n.sr-seg:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }\n.sr-handle { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; cursor: ew-resize; background: transparent; border: 0; padding: 0; }\n.sr-handle::after { content: \"\"; position: absolute; top: 4px; bottom: 4px; left: 6px; width: 4px; border-radius: 2px; background: var(--bg); box-shadow: 0 0 0 1px var(--fg); }\n.sr-handle:hover::after, .sr-handle[data-active=\"true\"]::after { background: var(--fg); }\n.sr-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--fg); pointer-events: none; }\n",
+    "javascript": "(()=>{\n\"use strict\";\n// The cut editor's model: the recording is an ordered list of segments that\n// together cover it, each kept or removed. A cut splits the segment under the\n// playhead, removing a segment drops it from the result, and dragging a\n// boundary trims both neighbours. Every change returns a new array, so undo\n// keeps the earlier ones. Times are seconds of the source recording.\nconst MIN_SEGMENT = 0.1;\nlet nextSegmentId = 1;\nfunction createSegments(duration) {\n  nextSegmentId = 1;\n  return [{ id: nextSegmentId++, start: 0, end: duration, kept: true }];\n}\nfunction segmentAt(segments, time) {\n  const found = segments.find(segment => time >= segment.start && time < segment.end);\n  if (found) return found;\n  const last = segments[segments.length - 1];\n  return last && time >= last.end ? last : null;\n}\nfunction splitAt(segments, time) {\n  const index = segments.findIndex(segment => time > segment.start + MIN_SEGMENT && time < segment.end - MIN_SEGMENT);\n  if (index < 0) return segments;\n  const segment = segments[index];\n  return [...segments.slice(0, index), { ...segment, end: time }, { id: nextSegmentId++, start: time, end: segment.end, kept: segment.kept }, ...segments.slice(index + 1)];\n}\nfunction toggleKept(segments, id) {\n  const index = segments.findIndex(segment => segment.id === id);\n  if (index < 0) return segments;\n  const next = segments.slice();\n  next[index] = { ...next[index], kept: !next[index].kept };\n  return next;\n}\n/** Moves the boundary before segments[index], clamped so both neighbours keep a minimum length. */\nfunction moveBoundary(segments, index, time) {\n  if (index < 1 || index >= segments.length) return segments;\n  const left = segments[index - 1], right = segments[index];\n  const clamped = Math.min(right.end - MIN_SEGMENT, Math.max(left.start + MIN_SEGMENT, time));\n  if (clamped === left.end) return segments;\n  const next = segments.slice();\n  next[index - 1] = { ...left, end: clamped };\n  next[index] = { ...right, start: clamped };\n  return next;\n}\n/** Trims the recording's start or end to `time`: the trimmed part becomes a removed segment. */\nfunction trimEdge(segments, edge, time) {\n  if (edge === 'start') {\n    if (!segments[0].kept) return moveBoundary(segments, 1, time);\n    const split = splitAt(segments, time);\n    return split === segments ? segments : toggleKept(split, split[0].id);\n  }\n  const last = segments[segments.length - 1];\n  if (!last.kept) return moveBoundary(segments, segments.length - 1, time);\n  const split = splitAt(segments, time);\n  return split === segments ? segments : toggleKept(split, split[split.length - 1].id);\n}\n/** The kept ranges in order, neighbours merged: what record.cut keeps. */\nfunction keepRanges(segments) {\n  const ranges = [];\n  for (const segment of segments) {\n    if (!segment.kept) continue;\n    const last = ranges[ranges.length - 1];\n    if (last && Math.abs(last.end - segment.start) < 1e-6) last.end = segment.end;\n    else ranges.push({ start: segment.start, end: segment.end });\n  }\n  return ranges;\n}\nfunction keptDuration(segments) {\n  return segments.reduce((sum, segment) => segment.kept ? sum + segment.end - segment.start : sum, 0);\n}\nfunction isWhole(segments) {\n  return segments.every(segment => segment.kept);\n}\n/** Where playback continues from `time` when removed parts are skipped: `time` itself when kept, the next kept start, or null when nothing kept follows. */\nfunction nextKeptTime(segments, time) {\n  const segment = segmentAt(segments, time);\n  if (!segment || segment.kept) return time;\n  const later = segments.find(candidate => candidate.kept && candidate.start >= segment.end);\n  return later ? later.start : null;\n}\nfunction firstKeptTime(segments) {\n  const segment = segments.find(candidate => candidate.kept);\n  return segment ? segment.start : 0;\n}\n/** Seconds as m:ss.d */\nfunction formatTime(seconds) {\n  const total = Math.max(0, Math.round((Number(seconds) || 0) * 10) / 10);\n  const minutes = Math.floor(total / 60), whole = Math.floor(total % 60), tenth = Math.round((total - Math.floor(total)) * 10) % 10;\n  return `${minutes}:${String(whole).padStart(2, '0')}.${tenth}`;\n}\nfunction formatBytes(bytes) {\n  const value = Number(bytes) || 0;\n  return value >= 1024 * 1024 * 1024 ? `${(value / 1024 / 1024 / 1024).toFixed(2)} GB` : value >= 1024 * 1024 ? `${Math.round(value / 1024 / 1024)} MB` : `${Math.max(1, Math.round(value / 1024))} KB`;\n}\n\n// The Screen Recorder interface on the Block kit: the stage shows the recording\n// (a meter while recording, the player and the cut timeline after), one button\n// names the next step, and the status beside it says the state in a few words\n// with the reason behind the (i). The host records; this view only asks.\n// Built into src/view.js with the cut model.\nconst $ = id => document.getElementById(id);\nconst player = $('player'), timeline = $('timeline'), segmentsNode = $('segments'), playhead = $('playhead');\nconst state = { phase: 'ready', source: null, segments: [], undo: [], selected: null, duration: 0, previewUrl: null, dragging: null, poll: null, busy: false, device: null, deviceAsked: false, capacity: null };\n\nconst say = (id, text) => { $(id).textContent = text || ''; };\nconst message = error => String(error && error.message || error || 'Something went wrong.');\nconst sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\n// A few words beside the action, a state dot, and the reason behind the (i).\nfunction status(text, tone, why) {\n  const node = $('status');\n  node.textContent = text || '';\n  if (tone) node.dataset.state = tone; else delete node.dataset.state;\n  $('why').hidden = !why; $('why').open = false; say('why-text', why || '');\n}\nconst busy = value => { state.busy = value; for (const id of ['action', 'secondary', 'play', 'cut', 'toggle', 'undo']) $(id).disabled = value || ($(id).dataset.off === 'true'); };\n\n// ── Phases: what the stage, the settings and the action row show ──────────\nconst PHASES = {\n  ready: { empty: true, meter: false, player: false, timeline: false, tools: false, sound: true, size: true, playback: false, action: 'Record screen', secondary: '' },\n  live: { empty: false, meter: true, player: false, timeline: false, tools: false, sound: false, size: false, playback: false, action: 'Stop and edit', secondary: 'Discard' },\n  editor: { empty: false, meter: false, player: true, timeline: true, tools: true, sound: false, size: false, playback: true, action: '', secondary: 'Record again' },\n  done: { empty: false, meter: false, player: true, timeline: false, tools: false, sound: false, size: false, playback: false, action: 'Edit again', secondary: 'Record again' },\n};\nfunction show(phase) {\n  state.phase = phase;\n  const p = PHASES[phase];\n  $('empty').hidden = !p.empty; $('meter').hidden = !p.meter; player.hidden = !p.player; timeline.hidden = !p.timeline; $('tools').hidden = !p.tools;\n  $('sound').hidden = !p.sound; $('resolution').hidden = !p.size; $('playback').hidden = !p.playback; $('more').hidden = !(p.size || p.playback);\n  $('secondary').hidden = !p.secondary; if (p.secondary) say('secondary', p.secondary);\n  if (p.action) say('action', p.action);\n  $('action').dataset.off = 'false';\n  if (phase === 'editor') updateButtons(); else if (phase === 'ready') showCapacity();\n  $('action').disabled = state.busy || $('action').dataset.off === 'true';\n}\n$('action').addEventListener('click', () => { ({ ready: start, live: stop, editor: save, done: editAgain })[state.phase](); });\n$('secondary').addEventListener('click', () => { if (state.phase === 'live') discard(); else recordAgain(); });\n\n// ── What fits here ─────────────────────────────────────────────────────────\nconst span = seconds => seconds >= 3600 ? Math.round(seconds / 3600) + ' h' : Math.max(1, Math.round(seconds / 60)) + ' min';\nfunction describeDevice(device) {\n  if (!device.recorder) return { text: 'This browser cannot record', tone: 'error', why: 'Use a current desktop browser or StillMade Desktop.', off: true };\n  const notes = [];\n  if (device.cut === 'playback') notes.push('A cut here takes as long as the part you keep.');\n  if (device.cut === 'none') notes.push('This browser cannot cut; use the whole recording, or cut it in StillMade Desktop.');\n  if (device.platform === 'desktop') return { text: 'Records to disk, up to ' + span(device.budget.seconds), tone: '', why: notes.join(' ') };\n  if (device.budget.seconds < 60) return { text: 'Less than a minute fits here', tone: 'error', why: ['Free up storage, or use StillMade Desktop, which records to disk.', ...notes].join(' ') };\n  const fit = span(device.budget.seconds);\n  return { text: 'About ' + fit + ' fit here', tone: device.budget.seconds < 300 ? 'waiting' : '', why: [fit + ' at 1080p' + (device.budget.bytes ? ' (' + formatBytes(device.budget.bytes) + ')' : '') + ' fit on this device. StillMade Desktop records longer.', ...notes].join(' ') };\n}\nasync function loadDevice() {\n  let problem = null;\n  try { state.device = await StillMade.desktop('device.info'); } catch (error) { state.device = null; problem = message(error); }\n  state.capacity = problem ? { text: 'Could not check what fits here', tone: 'waiting', why: problem } : describeDevice(state.device);\n  showCapacity();\n}\nfunction showCapacity() {\n  if (state.phase !== 'ready' || !state.capacity) return;\n  const capacity = state.capacity;\n  status(capacity.text, capacity.tone, capacity.why);\n  $('action').dataset.off = String(!!capacity.off); $('action').disabled = state.busy || !!capacity.off;\n}\nconst ENDED = { sharing: 'Sharing ended', time: 'Time limit reached', size: 'Out of space here', disk: 'Could not write to disk' };\nfunction describeLive(live) {\n  const limits = live.limits || {};\n  if (limits.seconds) {\n    const left = Math.max(0, limits.seconds - (live.elapsed || 0) / 1000);\n    if (left <= limits.seconds * 0.2) return { text: formatTime(left) + ' left', why: 'The recording stops at ' + span(limits.seconds) + ' and is kept up to that point.' };\n  }\n  if (limits.bytes) {\n    const left = Math.max(0, limits.bytes - (live.bytes || 0));\n    if (left <= limits.bytes * 0.2) return { text: formatBytes(left) + ' left', why: 'The recording stops when the space here runs out and is kept up to that point.' };\n  }\n  return null;\n}\n\n// ── Record ─────────────────────────────────────────────────────────────────\nasync function pollStatus() {\n  if (state.phase !== 'live') return;\n  try {\n    const live = await StillMade.desktop('record.status');\n    if (state.phase !== 'live') return;\n    if (live.active) {\n      say('timer', formatTime((live.elapsed || 0) / 1000));\n      say('size', formatBytes(live.bytes));\n      if (live.ended) status(ENDED[live.stoppedBy] || 'Recording stopped', 'waiting', (live.message || 'The recording stopped.') + ' Press Stop and edit to keep it.');\n      else { const warning = describeLive(live); if (warning) status(warning.text, 'waiting', warning.why); else status('Recording', 'loading'); }\n    }\n  } catch (error) { status(message(error), 'error'); }\n  state.poll = setTimeout(pollStatus, 1000);\n}\nasync function start() {\n  busy(true);\n  status('Press Start above', 'waiting', 'Then choose the screen or window to record. Nothing is captured before that.');\n  try {\n    const picked = document.querySelector('input[name=\"resolution\"]:checked');\n    await StillMade.desktop('record.start', { kind: 'screen', microphone: $('mic').checked, systemAudio: $('system').checked, resolution: picked ? picked.value : '1080p' });\n    say('timer', '0:00.0'); say('size', '0 KB');\n    show('live'); status('Recording', 'loading'); pollStatus();\n  } catch (error) { status(message(error), 'error'); }\n  finally { busy(false); }\n}\nasync function stop() {\n  busy(true); clearTimeout(state.poll);\n  status('Saving on this device', 'loading');\n  try {\n    const result = await StillMade.desktop('record.stop');\n    const asset = { ...result.asset };\n    for (const key of ['duration', 'width', 'height']) if (result[key] && !asset[key]) asset[key] = result[key];\n    await openEditor(asset);\n    if (result.stoppedBy) status(ENDED[result.stoppedBy] || 'Recording stopped', 'waiting', result.message); else status('');\n  } catch (error) { status(message(error), 'error'); pollStatus(); }\n  finally { busy(false); }\n}\nasync function discard() {\n  busy(true); clearTimeout(state.poll);\n  try { await StillMade.desktop('record.cancel'); } catch (error) { /* already gone */ }\n  show('ready'); busy(false);\n}\nfunction recordAgain() { closePreview(); state.source = null; show('ready'); loadDevice(); }\n\n// ── Editor ─────────────────────────────────────────────────────────────────\nfunction closePreview() {\n  player.pause();\n  if (state.previewUrl) { try { StillMade.releaseMedia(state.previewUrl); } catch (error) { /* released */ } state.previewUrl = null; }\n  player.removeAttribute('src'); player.load();\n}\nasync function openEditor(source) {\n  closePreview();\n  state.source = source; state.selected = null; state.undo = [];\n  const { url } = await StillMade.previewMedia(source);\n  state.previewUrl = url;\n  const duration = await new Promise((resolve, reject) => {\n    const done = () => { player.onloadedmetadata = null; player.onerror = null; resolve(Number.isFinite(player.duration) && player.duration > 0 ? player.duration : Number(source.duration) || 0); };\n    player.onloadedmetadata = done;\n    player.onerror = () => reject(new Error('This recording could not be opened for editing.'));\n    player.src = url;\n  });\n  if (!(duration > 0)) throw new Error('The recording has no length to edit.');\n  state.duration = duration;\n  state.segments = createSegments(duration);\n  show('editor'); status('');\n  renderTimeline(); updateTime(); updateButtons();\n}\nconst fraction = time => Math.max(0, Math.min(1, time / state.duration));\nfunction renderTimeline() {\n  segmentsNode.replaceChildren();\n  state.segments.forEach((segment, index) => {\n    const node = document.createElement('button');\n    node.type = 'button'; node.className = 'sr-seg'; node.dataset.id = String(segment.id); node.dataset.kept = String(segment.kept);\n    node.setAttribute('aria-pressed', String(state.selected === segment.id));\n    node.setAttribute('aria-label', `${segment.kept ? 'Kept' : 'Removed'} part from ${formatTime(segment.start)} to ${formatTime(segment.end)}`);\n    node.style.left = `${fraction(segment.start) * 100}%`; node.style.width = `${(fraction(segment.end) - fraction(segment.start)) * 100}%`;\n    node.addEventListener('click', event => { state.selected = state.selected === segment.id ? null : segment.id; seekTo(timeAt(event.clientX)); renderTimeline(); updateButtons(); });\n    segmentsNode.append(node);\n    if (index > 0) {\n      const handle = document.createElement('button');\n      handle.type = 'button'; handle.className = 'sr-handle'; handle.dataset.index = String(index);\n      handle.setAttribute('aria-label', `Move the cut at ${formatTime(segment.start)}`);\n      handle.style.left = `${fraction(segment.start) * 100}%`;\n      handle.addEventListener('pointerdown', beginDrag);\n      segmentsNode.append(handle);\n    }\n  });\n  say('kept', isWhole(state.segments) ? `${formatTime(state.duration)} kept` : `${formatTime(keptDuration(state.segments))} of ${formatTime(state.duration)} kept`);\n}\nfunction timeAt(clientX) {\n  const box = timeline.getBoundingClientRect();\n  return box.width > 0 ? Math.max(0, Math.min(state.duration, (clientX - box.left) / box.width * state.duration)) : 0;\n}\nfunction beginDrag(event) {\n  event.preventDefault(); event.stopPropagation();\n  const index = Number(event.currentTarget.dataset.index);\n  state.dragging = { index, before: state.segments, handle: event.currentTarget, pointerId: event.pointerId };\n  event.currentTarget.setPointerCapture(event.pointerId);\n  event.currentTarget.dataset.active = 'true';\n  event.currentTarget.addEventListener('pointermove', continueDrag);\n  event.currentTarget.addEventListener('pointerup', endDrag);\n  event.currentTarget.addEventListener('pointercancel', endDrag);\n}\nfunction continueDrag(event) {\n  const drag = state.dragging; if (!drag) return;\n  const next = moveBoundary(state.segments, drag.index, timeAt(event.clientX));\n  if (next === state.segments) return;\n  state.segments = next;\n  const boundary = next[drag.index].start;\n  drag.handle.style.left = `${fraction(boundary) * 100}%`;\n  const left = segmentsNode.querySelector(`.sr-seg[data-id=\"${next[drag.index - 1].id}\"]`), right = segmentsNode.querySelector(`.sr-seg[data-id=\"${next[drag.index].id}\"]`);\n  if (left) left.style.width = `${(fraction(boundary) - fraction(next[drag.index - 1].start)) * 100}%`;\n  if (right) { right.style.left = `${fraction(boundary) * 100}%`; right.style.width = `${(fraction(next[drag.index].end) - fraction(boundary)) * 100}%`; }\n  seekTo(boundary, { quiet: true });\n}\nfunction endDrag(event) {\n  const drag = state.dragging; if (!drag) return;\n  state.dragging = null;\n  drag.handle.dataset.active = 'false';\n  drag.handle.removeEventListener('pointermove', continueDrag);\n  drag.handle.removeEventListener('pointerup', endDrag);\n  drag.handle.removeEventListener('pointercancel', endDrag);\n  try { drag.handle.releasePointerCapture(drag.pointerId); } catch (error) { /* released */ }\n  if (drag.before !== state.segments) { state.undo.push(drag.before); if (state.undo.length > 100) state.undo.shift(); }\n  renderTimeline(); updateButtons();\n}\ntimeline.addEventListener('pointerdown', event => { if (event.target === timeline || event.target === segmentsNode) seekTo(timeAt(event.clientX)); });\nfunction seekTo(time, options) {\n  player.currentTime = Math.max(0, Math.min(state.duration, time));\n  if (!(options && options.quiet)) updateTime();\n}\nfunction updateTime() {\n  const time = player.currentTime || 0;\n  playhead.style.transform = `translateX(${fraction(time) * timeline.clientWidth}px)`;\n  say('time', `${formatTime(time)} / ${formatTime(state.duration)}`);\n}\nconst playGlyph = paused => { const glyph = $('play').querySelector('.sm-glyph'); glyph.dataset.glyph = paused ? 'play' : 'pause'; $('play').setAttribute('aria-label', paused ? 'Play' : 'Pause'); $('play').title = paused ? 'Play' : 'Pause'; };\nplayer.addEventListener('timeupdate', () => {\n  if (state.phase !== 'editor') return;\n  if ($('skip').checked && !player.paused) {\n    const next = nextKeptTime(state.segments, player.currentTime);\n    if (next === null) { player.pause(); }\n    else if (next !== player.currentTime) { player.currentTime = next; }\n  }\n  updateTime();\n});\nplayer.addEventListener('play', () => { if ($('skip').checked) { const next = nextKeptTime(state.segments, player.currentTime); if (next === null) player.currentTime = firstKeptTime(state.segments); else if (next !== player.currentTime) player.currentTime = next; } playGlyph(false); });\nplayer.addEventListener('pause', () => playGlyph(true));\nplayer.addEventListener('ended', () => playGlyph(true));\n$('play').addEventListener('click', () => { if (player.paused) player.play().catch(error => status(message(error), 'error')); else player.pause(); });\nfunction apply(next) {\n  if (next === state.segments) return;\n  state.undo.push(state.segments); if (state.undo.length > 100) state.undo.shift();\n  state.segments = next;\n  renderTimeline(); updateButtons();\n}\n$('cut').addEventListener('click', () => { apply(splitAt(state.segments, player.currentTime)); });\n$('toggle').addEventListener('click', () => { if (state.selected !== null) apply(toggleKept(state.segments, state.selected)); });\n$('undo').addEventListener('click', () => { const previous = state.undo.pop(); if (previous) { state.segments = previous; if (!previous.some(segment => segment.id === state.selected)) state.selected = null; renderTimeline(); updateButtons(); } });\ntimeline.addEventListener('keydown', event => {\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { event.preventDefault(); seekTo((player.currentTime || 0) + (event.key === 'ArrowLeft' ? -0.5 : 0.5) * (event.shiftKey ? 10 : 1)); }\n  else if (event.key === 'c' || event.key === 'C') { event.preventDefault(); $('cut').click(); }\n  else if (event.key === 'Delete' || event.key === 'Backspace') { event.preventDefault(); $('toggle').click(); }\n  else if (event.key === ' ') { event.preventDefault(); $('play').click(); }\n});\nfunction updateButtons() {\n  const selected = state.segments.find(segment => segment.id === state.selected);\n  $('toggle').disabled = state.busy || !selected; $('toggle').dataset.off = String(!selected);\n  say('toggle', selected && !selected.kept ? 'Keep part' : 'Remove part');\n  $('undo').disabled = state.busy || !state.undo.length; $('undo').dataset.off = String(!state.undo.length);\n  const whole = isWhole(state.segments), nothing = keepRanges(state.segments).length === 0;\n  say('action', whole ? 'Use the whole recording' : 'Save the cut');\n  $('action').disabled = state.busy || nothing; $('action').dataset.off = String(nothing);\n}\nwindow.addEventListener('resize', () => { if (state.phase === 'editor') updateTime(); });\n\n// ── Save ───────────────────────────────────────────────────────────────────\nasync function save() {\n  const source = state.source; if (!source) return;\n  const keep = keepRanges(state.segments);\n  if (!keep.length) { status('Keep at least one part', 'error'); return; }\n  busy(true); player.pause();\n  try {\n    let video = source;\n    if (!isWhole(state.segments)) {\n      status('Cutting on this device', 'loading');\n      let watching = true;\n      const watch = async () => { while (watching) { await sleep(700); if (!watching) break; try { const live = await StillMade.desktop('record.status'); if (live.cutting) status(`Cutting ${Math.round(live.cutting.progress * 100)}%`, 'loading'); } catch (error) { /* next tick */ } } };\n      watch();\n      try { video = (await StillMade.desktop('record.cut', { source, keep })).asset; }\n      finally { watching = false; }\n    }\n    status('Passing it on', 'loading');\n    await StillMade.run({ video, original: source });\n    show('done');\n    if (isWhole(state.segments)) status(`Whole recording, ${formatTime(state.duration)}`, 'success');\n    else status(`Saved ${formatTime(keptDuration(state.segments))} of ${formatTime(state.duration)}`, 'success', 'The uncut recording is passed on beside it.');\n  } catch (error) { status(message(error), 'error'); }\n  finally { busy(false); }\n}\nfunction editAgain() { if (state.source) { show('editor'); status(''); } }\n\n// ── Input: a video from an earlier Step opens straight in the editor ──────\n// onInput first fires once the view is ready, which is also the earliest moment a host call can be made.\nStillMade.onInput(async input => {\n  if (!state.deviceAsked) { state.deviceAsked = true; loadDevice(); }\n  const video = input && input.video;\n  if (!video || state.source || state.phase !== 'ready') return;\n  busy(true);\n  try { await openEditor(video); status('Video from an earlier Step', '', 'Record again to replace it.'); }\n  catch (error) { status(message(error), 'error'); }\n  finally { busy(false); }\n});\n\n})();\n"
   },
   "tests": [
     {
@@ -213,7 +213,7 @@ export default {
     "files": {
       "upstream/0/LICENSE": "MIT License\n\nCopyright (c) <year> <copyright holders>\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and \nassociated documentation files (the \"Software\"), to deal in the Software without restriction, including \nwithout limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell \ncopies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the \nfollowing conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial \nportions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT \nLIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO \nEVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER \nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE \nUSE OR OTHER DEALINGS IN THE SOFTWARE.\n",
       "upstream/0/src/run.js": "// The interface records, edits and cuts on the device (StillMade.desktop\n// record.start / record.stop / record.cut). This run only hands the chosen\n// video, and the uncut original, on as typed outputs.\nconst video = input.video;\nif (!video) throw new Error('Record a screen or choose a video first.');\nreturn { video: video, original: input.original || video };\n",
-      "upstream/0/src/view.json": "{\n  \"runtime\": \"frame\",\n  \"html\": \"<main class=\\\"sm-block sr\\\" data-layout=\\\"stack\\\">\\n  <section id=\\\"ready\\\" class=\\\"sr-panel\\\">\\n    <p class=\\\"sr-lead\\\">Record a screen or window. The recording stays on this device until you pass it on.</p>\\n    <p class=\\\"sr-capacity\\\" id=\\\"capacity\\\" role=\\\"status\\\"></p>\\n    <div class=\\\"sr-options\\\">\\n      <label class=\\\"sr-check\\\"><input id=\\\"mic\\\" type=\\\"checkbox\\\" data-stillmade-share=\\\"microphone\\\"> Microphone</label>\\n      <label class=\\\"sr-check\\\"><input id=\\\"system\\\" type=\\\"checkbox\\\" data-stillmade-share=\\\"computerSound\\\"> Computer sound</label>\\n      <label class=\\\"sr-select\\\">Size <select id=\\\"resolution\\\" data-stillmade-share=\\\"resolution\\\"><option value=\\\"1080p\\\" selected>1080p</option><option value=\\\"source\\\">Full size</option></select></label>\\n    </div>\\n    <div class=\\\"sm-actions\\\">\\n      <button type=\\\"button\\\" class=\\\"sm-primary\\\" id=\\\"start\\\">Start recording</button>\\n      <p class=\\\"sm-status\\\" id=\\\"ready-status\\\" role=\\\"status\\\">Nothing is captured until you press Start in the StillMade controls above.</p>\\n    </div>\\n  </section>\\n  <section id=\\\"live\\\" class=\\\"sr-panel\\\" hidden>\\n    <div class=\\\"sr-live\\\">\\n      <span class=\\\"sr-dot\\\" aria-hidden=\\\"true\\\"></span>\\n      <strong id=\\\"timer\\\" class=\\\"sr-timer\\\">0:00.0</strong>\\n      <span id=\\\"size\\\" class=\\\"sr-size\\\">0 KB</span>\\n    </div>\\n    <div class=\\\"sm-actions\\\">\\n      <button type=\\\"button\\\" class=\\\"sm-primary\\\" id=\\\"stop\\\">Stop and edit</button>\\n      <button type=\\\"button\\\" class=\\\"sr-btn\\\" id=\\\"discard\\\">Discard</button>\\n      <p class=\\\"sm-status\\\" id=\\\"live-status\\\" role=\\\"status\\\">Recording. Press Stop and edit when you are done.</p>\\n      <p class=\\\"sr-capacity\\\" id=\\\"live-capacity\\\" role=\\\"status\\\"></p>\\n    </div>\\n  </section>\\n  <section id=\\\"editor\\\" class=\\\"sr-panel\\\" hidden>\\n    <video id=\\\"player\\\" class=\\\"sr-player\\\" playsinline preload=\\\"metadata\\\"></video>\\n    <div class=\\\"sr-transport\\\">\\n      <button type=\\\"button\\\" class=\\\"sr-btn\\\" id=\\\"play\\\" aria-label=\\\"Play\\\">Play</button>\\n      <span id=\\\"time\\\" class=\\\"sr-time\\\">0:00.0 / 0:00.0</span>\\n      <label class=\\\"sr-check sr-skip\\\"><input id=\\\"skip\\\" type=\\\"checkbox\\\" checked data-stillmade-local> Skip removed parts</label>\\n    </div>\\n    <div id=\\\"timeline\\\" class=\\\"sr-timeline\\\" role=\\\"group\\\" aria-label=\\\"Recording timeline\\\" tabindex=\\\"0\\\">\\n      <div id=\\\"segments\\\" class=\\\"sr-segments\\\"></div>\\n      <div id=\\\"playhead\\\" class=\\\"sr-playhead\\\" aria-hidden=\\\"true\\\"></div>\\n    </div>\\n    <div class=\\\"sr-tools\\\">\\n      <button type=\\\"button\\\" class=\\\"sr-btn\\\" id=\\\"cut\\\">Cut here</button>\\n      <button type=\\\"button\\\" class=\\\"sr-btn\\\" id=\\\"toggle\\\" disabled>Remove part</button>\\n      <button type=\\\"button\\\" class=\\\"sr-btn\\\" id=\\\"undo\\\" disabled>Undo</button>\\n      <span id=\\\"kept\\\" class=\\\"sr-kept\\\"></span>\\n    </div>\\n    <div class=\\\"sm-actions\\\">\\n      <button type=\\\"button\\\" class=\\\"sm-primary\\\" id=\\\"save\\\">Use the whole recording</button>\\n      <button type=\\\"button\\\" class=\\\"sr-btn\\\" id=\\\"again\\\">Record again</button>\\n      <p class=\\\"sm-status\\\" id=\\\"editor-status\\\" role=\\\"status\\\"></p>\\n    </div>\\n  </section>\\n  <section id=\\\"done\\\" class=\\\"sr-panel\\\" hidden>\\n    <p class=\\\"sr-lead\\\" id=\\\"done-text\\\">Saved.</p>\\n    <div class=\\\"sm-actions\\\">\\n      <button type=\\\"button\\\" class=\\\"sm-primary\\\" id=\\\"edit-again\\\">Edit again</button>\\n      <button type=\\\"button\\\" class=\\\"sr-btn\\\" id=\\\"record-again\\\">Record again</button>\\n    </div>\\n  </section>\\n</main>\\n\",\n  \"css\": \".sr { display: block; }\\n.sr-panel { display: grid; gap: 1rem; padding: 1.25rem; }\\n.sr-lead { margin: 0; color: var(--fg-muted); }\\n.sr-capacity { margin: 0; color: var(--fg-muted); font-size: .92em; }\\n.sr-capacity[data-warn=\\\"true\\\"] { color: var(--warning); }\\n.sr-options { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }\\n.sr-check { display: inline-flex; align-items: center; gap: .45rem; color: var(--fg); }\\n.sr-select { display: inline-flex; align-items: center; gap: .45rem; color: var(--fg); }\\n.sr-select select { border: 1px solid var(--border-tok); border-radius: var(--r-3); background: var(--bg-elev-1); color: var(--fg); padding: .35rem .5rem; }\\n.sr-btn { border: 1px solid var(--border-tok); border-radius: 999px; padding: .6rem 1rem; background: var(--bg-elev-1); color: var(--fg); cursor: pointer; }\\n.sr-btn:hover { background: var(--hover-wash); }\\n.sr-btn:disabled, .sm-primary:disabled { opacity: .5; cursor: default; }\\n.sr-live { display: flex; align-items: center; gap: .75rem; }\\n.sr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); }\\n.sr-timer { font-size: 1.6rem; font-variant-numeric: tabular-nums; }\\n.sr-size { color: var(--fg-muted); font-variant-numeric: tabular-nums; }\\n.sr-player { width: 100%; max-height: 52vh; background: var(--bg-inset); border-radius: var(--r-3); }\\n.sr-transport { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }\\n.sr-time { font-variant-numeric: tabular-nums; color: var(--fg-muted); }\\n.sr-skip { margin-left: auto; color: var(--fg-muted); }\\n.sr-timeline { position: relative; height: 56px; border-radius: var(--r-3); background: var(--bg-inset); border: 1px solid var(--border-tok); overflow: hidden; touch-action: none; user-select: none; }\\n.sr-timeline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\\n.sr-segments { position: absolute; inset: 0; }\\n.sr-seg { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; background: var(--accent-dim); cursor: pointer; }\\n.sr-seg[data-kept=\\\"false\\\"] { background: var(--hover-wash); opacity: .55; }\\n.sr-seg[aria-pressed=\\\"true\\\"] { box-shadow: inset 0 0 0 2px var(--accent); opacity: 1; }\\n.sr-handle { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; cursor: ew-resize; background: transparent; border: 0; padding: 0; }\\n.sr-handle::after { content: \\\"\\\"; position: absolute; top: 6px; bottom: 6px; left: 6px; width: 4px; border-radius: 2px; background: var(--fg); opacity: .7; }\\n.sr-handle:hover::after, .sr-handle[data-active=\\\"true\\\"]::after { background: var(--accent); opacity: 1; }\\n.sr-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--fg); pointer-events: none; }\\n.sr-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }\\n.sr-kept { margin-left: auto; color: var(--fg-muted); font-variant-numeric: tabular-nums; }\\n@media (max-width: 480px) { .sr-panel { padding: 1rem; } .sr-skip { margin-left: 0; } }\\n\",\n  \"javascript\": \"(()=>{\\n\\\"use strict\\\";\\n// The cut editor's model: the recording is an ordered list of segments that\\n// together cover it, each kept or removed. A cut splits the segment under the\\n// playhead, removing a segment drops it from the result, and dragging a\\n// boundary trims both neighbours. Every change returns a new array, so undo\\n// keeps the earlier ones. Times are seconds of the source recording.\\nconst MIN_SEGMENT = 0.1;\\nlet nextSegmentId = 1;\\nfunction createSegments(duration) {\\n  nextSegmentId = 1;\\n  return [{ id: nextSegmentId++, start: 0, end: duration, kept: true }];\\n}\\nfunction segmentAt(segments, time) {\\n  const found = segments.find(segment => time >= segment.start && time < segment.end);\\n  if (found) return found;\\n  const last = segments[segments.length - 1];\\n  return last && time >= last.end ? last : null;\\n}\\nfunction splitAt(segments, time) {\\n  const index = segments.findIndex(segment => time > segment.start + MIN_SEGMENT && time < segment.end - MIN_SEGMENT);\\n  if (index < 0) return segments;\\n  const segment = segments[index];\\n  return [...segments.slice(0, index), { ...segment, end: time }, { id: nextSegmentId++, start: time, end: segment.end, kept: segment.kept }, ...segments.slice(index + 1)];\\n}\\nfunction toggleKept(segments, id) {\\n  const index = segments.findIndex(segment => segment.id === id);\\n  if (index < 0) return segments;\\n  const next = segments.slice();\\n  next[index] = { ...next[index], kept: !next[index].kept };\\n  return next;\\n}\\n/** Moves the boundary before segments[index], clamped so both neighbours keep a minimum length. */\\nfunction moveBoundary(segments, index, time) {\\n  if (index < 1 || index >= segments.length) return segments;\\n  const left = segments[index - 1], right = segments[index];\\n  const clamped = Math.min(right.end - MIN_SEGMENT, Math.max(left.start + MIN_SEGMENT, time));\\n  if (clamped === left.end) return segments;\\n  const next = segments.slice();\\n  next[index - 1] = { ...left, end: clamped };\\n  next[index] = { ...right, start: clamped };\\n  return next;\\n}\\n/** Trims the recording's start or end to `time`: the trimmed part becomes a removed segment. */\\nfunction trimEdge(segments, edge, time) {\\n  if (edge === 'start') {\\n    if (!segments[0].kept) return moveBoundary(segments, 1, time);\\n    const split = splitAt(segments, time);\\n    return split === segments ? segments : toggleKept(split, split[0].id);\\n  }\\n  const last = segments[segments.length - 1];\\n  if (!last.kept) return moveBoundary(segments, segments.length - 1, time);\\n  const split = splitAt(segments, time);\\n  return split === segments ? segments : toggleKept(split, split[split.length - 1].id);\\n}\\n/** The kept ranges in order, neighbours merged: what record.cut keeps. */\\nfunction keepRanges(segments) {\\n  const ranges = [];\\n  for (const segment of segments) {\\n    if (!segment.kept) continue;\\n    const last = ranges[ranges.length - 1];\\n    if (last && Math.abs(last.end - segment.start) < 1e-6) last.end = segment.end;\\n    else ranges.push({ start: segment.start, end: segment.end });\\n  }\\n  return ranges;\\n}\\nfunction keptDuration(segments) {\\n  return segments.reduce((sum, segment) => segment.kept ? sum + segment.end - segment.start : sum, 0);\\n}\\nfunction isWhole(segments) {\\n  return segments.every(segment => segment.kept);\\n}\\n/** Where playback continues from `time` when removed parts are skipped: `time` itself when kept, the next kept start, or null when nothing kept follows. */\\nfunction nextKeptTime(segments, time) {\\n  const segment = segmentAt(segments, time);\\n  if (!segment || segment.kept) return time;\\n  const later = segments.find(candidate => candidate.kept && candidate.start >= segment.end);\\n  return later ? later.start : null;\\n}\\nfunction firstKeptTime(segments) {\\n  const segment = segments.find(candidate => candidate.kept);\\n  return segment ? segment.start : 0;\\n}\\n/** Seconds as m:ss.d */\\nfunction formatTime(seconds) {\\n  const total = Math.max(0, Math.round((Number(seconds) || 0) * 10) / 10);\\n  const minutes = Math.floor(total / 60), whole = Math.floor(total % 60), tenth = Math.round((total - Math.floor(total)) * 10) % 10;\\n  return `${minutes}:${String(whole).padStart(2, '0')}.${tenth}`;\\n}\\nfunction formatBytes(bytes) {\\n  const value = Number(bytes) || 0;\\n  return value >= 1024 * 1024 * 1024 ? `${(value / 1024 / 1024 / 1024).toFixed(2)} GB` : value >= 1024 * 1024 ? `${Math.round(value / 1024 / 1024)} MB` : `${Math.max(1, Math.round(value / 1024))} KB`;\\n}\\n\\n// The Screen Recorder interface: record (the host records, this view only asks),\\n// then a small cut editor over the recording kept on this device, then one\\n// run that hands the result on. Built into src/view.js with the cut model.\\nconst $ = id => document.getElementById(id);\\nconst panels = { ready: $('ready'), live: $('live'), editor: $('editor'), done: $('done') };\\nconst player = $('player'), timeline = $('timeline'), segmentsNode = $('segments'), playhead = $('playhead');\\nconst state = { phase: 'ready', source: null, segments: [], undo: [], selected: null, duration: 0, previewUrl: null, dragging: null, poll: null, busy: false, lastSaved: null, device: null };\\n\\nfunction show(phase) {\\n  state.phase = phase;\\n  for (const [name, node] of Object.entries(panels)) node.hidden = name !== phase;\\n}\\nconst say = (id, text) => { $(id).textContent = text || ''; };\\nconst message = error => String(error && error.message || error || 'Something went wrong.');\\nconst sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\\nconst busy = value => { state.busy = value; for (const id of ['start', 'stop', 'discard', 'cut', 'toggle', 'undo', 'save', 'again', 'edit-again', 'record-again']) $(id).disabled = value || ($(id).dataset.off === 'true'); };\\n\\n// ── What fits here ─────────────────────────────────────────────────────────\\nconst minutes = seconds => Math.max(1, Math.round(seconds / 60));\\nfunction describeDevice(device) {\\n  if (!device) return '';\\n  if (!device.recorder) return 'This browser cannot record. Use a current desktop browser or StillMade Desktop.';\\n  const notes = [];\\n  if (device.platform === 'desktop') notes.push('Records straight to disk; up to ' + minutes(device.budget.seconds) + ' minutes per recording.');\\n  else if (device.budget.seconds < 60) notes.push('Less than a minute fits on this device. Free up storage or use StillMade Desktop.');\\n  else notes.push('About ' + minutes(device.budget.seconds) + ' minutes at 1080p fit on this device' + (device.budget.bytes ? ' (' + formatBytes(device.budget.bytes) + ')' : '') + '. StillMade Desktop records longer.');\\n  if (device.cut === 'playback') notes.push('Cuts here take as long as the part you keep.');\\n  if (device.cut === 'none') notes.push('This browser cannot cut recordings; the whole recording can still be used, or cut it in StillMade Desktop.');\\n  return notes.join(' ');\\n}\\nasync function loadDevice() {\\n  let problem = null;\\n  try { state.device = await StillMade.desktop('device.info'); } catch (error) { state.device = null; problem = message(error); }\\n  say('capacity', state.device ? describeDevice(state.device) : `Could not check what fits on this device: ${problem}`);\\n  $('capacity').dataset.warn = String(!!problem || (!!state.device && (!state.device.recorder || state.device.budget.seconds < 60)));\\n}\\nfunction describeLive(status) {\\n  const limits = status.limits || {};\\n  const parts = [];\\n  let warn = false;\\n  if (limits.seconds) {\\n    const left = Math.max(0, limits.seconds - (status.elapsed || 0) / 1000);\\n    if (left <= limits.seconds * 0.2) { warn = true; parts.push(formatTime(left) + ' left before the time limit.'); }\\n  }\\n  if (limits.bytes) {\\n    const left = Math.max(0, limits.bytes - (status.bytes || 0));\\n    if (left <= limits.bytes * 0.2) { warn = true; parts.push(formatBytes(left) + ' of space left here. The recording stops and is kept when it runs out.'); }\\n  }\\n  return { text: parts.join(' '), warn };\\n}\\n\\n// ── Record ─────────────────────────────────────────────────────────────────\\nasync function pollStatus() {\\n  if (state.phase !== 'live') return;\\n  try {\\n    const status = await StillMade.desktop('record.status');\\n    if (state.phase !== 'live') return;\\n    if (status.active) {\\n      say('timer', formatTime((status.elapsed || 0) / 1000));\\n      say('size', formatBytes(status.bytes));\\n      const live = describeLive(status);\\n      say('live-capacity', status.ended ? '' : live.text); $('live-capacity').dataset.warn = String(live.warn && !status.ended);\\n      if (status.ended) say('live-status', `${status.message || 'The recording stopped.'} Press Stop and edit to keep it.`);\\n    }\\n  } catch (error) { say('live-status', message(error)); }\\n  state.poll = setTimeout(pollStatus, 1000);\\n}\\n$('start').addEventListener('click', async () => {\\n  busy(true);\\n  say('ready-status', 'Press Start in the StillMade controls above, then choose what to record.');\\n  try {\\n    await StillMade.desktop('record.start', { kind: 'screen', microphone: $('mic').checked, systemAudio: $('system').checked, resolution: $('resolution').value });\\n    say('timer', '0:00.0'); say('size', '0 KB'); say('live-status', 'Recording. Press Stop and edit when you are done.'); say('live-capacity', '');\\n    show('live'); pollStatus();\\n  } catch (error) { say('ready-status', message(error)); }\\n  finally { busy(false); }\\n});\\n$('stop').addEventListener('click', async () => {\\n  busy(true); clearTimeout(state.poll);\\n  say('live-status', 'Saving the recording on this device…');\\n  try {\\n    const result = await StillMade.desktop('record.stop');\\n    const asset = { ...result.asset };\\n    for (const key of ['duration', 'width', 'height']) if (result[key] && !asset[key]) asset[key] = result[key];\\n    await openEditor(asset);\\n    say('editor-status', result.stoppedBy ? result.message : '');\\n  } catch (error) { say('live-status', message(error)); state.phase = 'live'; pollStatus(); }\\n  finally { busy(false); }\\n});\\n$('discard').addEventListener('click', async () => {\\n  busy(true); clearTimeout(state.poll);\\n  try { await StillMade.desktop('record.cancel'); } catch (error) { /* already gone */ }\\n  say('ready-status', 'Discarded. Ready to record again.'); show('ready'); busy(false);\\n});\\nconst recordAgain = () => { closePreview(); state.source = null; say('ready-status', 'Ready to record.'); show('ready'); loadDevice(); };\\n$('again').addEventListener('click', recordAgain);\\n$('record-again').addEventListener('click', recordAgain);\\n\\n// ── Editor ─────────────────────────────────────────────────────────────────\\nfunction closePreview() {\\n  player.pause();\\n  if (state.previewUrl) { try { StillMade.releaseMedia(state.previewUrl); } catch (error) { /* released */ } state.previewUrl = null; }\\n  player.removeAttribute('src'); player.load();\\n}\\nasync function openEditor(source) {\\n  closePreview();\\n  state.source = source; state.selected = null; state.undo = [];\\n  const { url } = await StillMade.previewMedia(source);\\n  state.previewUrl = url;\\n  const duration = await new Promise((resolve, reject) => {\\n    const done = () => { player.onloadedmetadata = null; player.onerror = null; resolve(Number.isFinite(player.duration) && player.duration > 0 ? player.duration : Number(source.duration) || 0); };\\n    player.onloadedmetadata = done;\\n    player.onerror = () => reject(new Error('This recording could not be opened for editing.'));\\n    player.src = url;\\n  });\\n  if (!(duration > 0)) throw new Error('The recording has no length to edit.');\\n  state.duration = duration;\\n  state.segments = createSegments(duration);\\n  renderTimeline(); updateTime(); updateButtons();\\n  say('editor-status', '');\\n  show('editor');\\n}\\nconst fraction = time => Math.max(0, Math.min(1, time / state.duration));\\nfunction renderTimeline() {\\n  segmentsNode.replaceChildren();\\n  state.segments.forEach((segment, index) => {\\n    const node = document.createElement('button');\\n    node.type = 'button'; node.className = 'sr-seg'; node.dataset.id = String(segment.id); node.dataset.kept = String(segment.kept);\\n    node.setAttribute('aria-pressed', String(state.selected === segment.id));\\n    node.setAttribute('aria-label', `${segment.kept ? 'Kept' : 'Removed'} part from ${formatTime(segment.start)} to ${formatTime(segment.end)}`);\\n    node.style.left = `${fraction(segment.start) * 100}%`; node.style.width = `${(fraction(segment.end) - fraction(segment.start)) * 100}%`;\\n    node.addEventListener('click', event => { state.selected = state.selected === segment.id ? null : segment.id; seekTo(timeAt(event.clientX)); renderTimeline(); updateButtons(); });\\n    segmentsNode.append(node);\\n    if (index > 0) {\\n      const handle = document.createElement('button');\\n      handle.type = 'button'; handle.className = 'sr-handle'; handle.dataset.index = String(index);\\n      handle.setAttribute('aria-label', `Move the cut at ${formatTime(segment.start)}`);\\n      handle.style.left = `${fraction(segment.start) * 100}%`;\\n      handle.addEventListener('pointerdown', beginDrag);\\n      segmentsNode.append(handle);\\n    }\\n  });\\n  say('kept', isWhole(state.segments) ? `${formatTime(state.duration)} kept` : `${formatTime(keptDuration(state.segments))} of ${formatTime(state.duration)} kept`);\\n}\\nfunction timeAt(clientX) {\\n  const box = timeline.getBoundingClientRect();\\n  return box.width > 0 ? Math.max(0, Math.min(state.duration, (clientX - box.left) / box.width * state.duration)) : 0;\\n}\\nfunction beginDrag(event) {\\n  event.preventDefault(); event.stopPropagation();\\n  const index = Number(event.currentTarget.dataset.index);\\n  state.dragging = { index, before: state.segments, handle: event.currentTarget, pointerId: event.pointerId };\\n  event.currentTarget.setPointerCapture(event.pointerId);\\n  event.currentTarget.dataset.active = 'true';\\n  event.currentTarget.addEventListener('pointermove', continueDrag);\\n  event.currentTarget.addEventListener('pointerup', endDrag);\\n  event.currentTarget.addEventListener('pointercancel', endDrag);\\n}\\nfunction continueDrag(event) {\\n  const drag = state.dragging; if (!drag) return;\\n  const next = moveBoundary(state.segments, drag.index, timeAt(event.clientX));\\n  if (next === state.segments) return;\\n  state.segments = next;\\n  const boundary = next[drag.index].start;\\n  drag.handle.style.left = `${fraction(boundary) * 100}%`;\\n  const left = segmentsNode.querySelector(`.sr-seg[data-id=\\\"${next[drag.index - 1].id}\\\"]`), right = segmentsNode.querySelector(`.sr-seg[data-id=\\\"${next[drag.index].id}\\\"]`);\\n  if (left) left.style.width = `${(fraction(boundary) - fraction(next[drag.index - 1].start)) * 100}%`;\\n  if (right) { right.style.left = `${fraction(boundary) * 100}%`; right.style.width = `${(fraction(next[drag.index].end) - fraction(boundary)) * 100}%`; }\\n  seekTo(boundary, { quiet: true });\\n}\\nfunction endDrag(event) {\\n  const drag = state.dragging; if (!drag) return;\\n  state.dragging = null;\\n  drag.handle.dataset.active = 'false';\\n  drag.handle.removeEventListener('pointermove', continueDrag);\\n  drag.handle.removeEventListener('pointerup', endDrag);\\n  drag.handle.removeEventListener('pointercancel', endDrag);\\n  try { drag.handle.releasePointerCapture(drag.pointerId); } catch (error) { /* released */ }\\n  if (drag.before !== state.segments) { state.undo.push(drag.before); if (state.undo.length > 100) state.undo.shift(); }\\n  renderTimeline(); updateButtons();\\n}\\ntimeline.addEventListener('pointerdown', event => { if (event.target === timeline || event.target === segmentsNode) seekTo(timeAt(event.clientX)); });\\nfunction seekTo(time, options) {\\n  player.currentTime = Math.max(0, Math.min(state.duration, time));\\n  if (!(options && options.quiet)) updateTime();\\n}\\nfunction updateTime() {\\n  const time = player.currentTime || 0;\\n  playhead.style.transform = `translateX(${fraction(time) * timeline.clientWidth}px)`;\\n  say('time', `${formatTime(time)} / ${formatTime(state.duration)}`);\\n}\\nplayer.addEventListener('timeupdate', () => {\\n  if (state.phase !== 'editor') return;\\n  if ($('skip').checked && !player.paused) {\\n    const next = nextKeptTime(state.segments, player.currentTime);\\n    if (next === null) { player.pause(); }\\n    else if (next !== player.currentTime) { player.currentTime = next; }\\n  }\\n  updateTime();\\n});\\nplayer.addEventListener('play', () => { if ($('skip').checked) { const next = nextKeptTime(state.segments, player.currentTime); if (next === null) player.currentTime = firstKeptTime(state.segments); else if (next !== player.currentTime) player.currentTime = next; } $('play').textContent = 'Pause'; });\\nplayer.addEventListener('pause', () => { $('play').textContent = 'Play'; });\\nplayer.addEventListener('ended', () => { $('play').textContent = 'Play'; });\\n$('play').addEventListener('click', () => { if (player.paused) player.play().catch(error => say('editor-status', message(error))); else player.pause(); });\\nfunction apply(next) {\\n  if (next === state.segments) return;\\n  state.undo.push(state.segments); if (state.undo.length > 100) state.undo.shift();\\n  state.segments = next;\\n  renderTimeline(); updateButtons();\\n}\\n$('cut').addEventListener('click', () => { apply(splitAt(state.segments, player.currentTime)); });\\n$('toggle').addEventListener('click', () => { if (state.selected !== null) apply(toggleKept(state.segments, state.selected)); });\\n$('undo').addEventListener('click', () => { const previous = state.undo.pop(); if (previous) { state.segments = previous; if (!previous.some(segment => segment.id === state.selected)) state.selected = null; renderTimeline(); updateButtons(); } });\\ntimeline.addEventListener('keydown', event => {\\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { event.preventDefault(); seekTo((player.currentTime || 0) + (event.key === 'ArrowLeft' ? -0.5 : 0.5) * (event.shiftKey ? 10 : 1)); }\\n  else if (event.key === 'c' || event.key === 'C') { event.preventDefault(); $('cut').click(); }\\n  else if (event.key === 'Delete' || event.key === 'Backspace') { event.preventDefault(); $('toggle').click(); }\\n  else if (event.key === ' ') { event.preventDefault(); $('play').click(); }\\n});\\nfunction updateButtons() {\\n  const selected = state.segments.find(segment => segment.id === state.selected);\\n  $('toggle').disabled = !selected; $('toggle').dataset.off = String(!selected);\\n  $('toggle').textContent = selected && !selected.kept ? 'Keep part' : 'Remove part';\\n  $('undo').disabled = !state.undo.length; $('undo').dataset.off = String(!state.undo.length);\\n  const whole = isWhole(state.segments), nothing = keepRanges(state.segments).length === 0;\\n  $('save').textContent = whole ? 'Use the whole recording' : 'Save the cut';\\n  $('save').disabled = nothing; $('save').dataset.off = String(nothing);\\n}\\nwindow.addEventListener('resize', () => { if (state.phase === 'editor') updateTime(); });\\n\\n// ── Save ───────────────────────────────────────────────────────────────────\\n$('save').addEventListener('click', async () => {\\n  const source = state.source; if (!source) return;\\n  const keep = keepRanges(state.segments);\\n  if (!keep.length) { say('editor-status', 'Keep at least one part.'); return; }\\n  busy(true); player.pause();\\n  try {\\n    let video = source;\\n    if (!isWhole(state.segments)) {\\n      say('editor-status', 'Cutting on this device…');\\n      let watching = true;\\n      const watch = async () => { while (watching) { await sleep(700); if (!watching) break; try { const status = await StillMade.desktop('record.status'); if (status.cutting) say('editor-status', `Cutting on this device… ${Math.round(status.cutting.progress * 100)}%`); } catch (error) { /* next tick */ } } };\\n      watch();\\n      try { video = (await StillMade.desktop('record.cut', { source, keep })).asset; }\\n      finally { watching = false; }\\n    }\\n    say('editor-status', 'Passing the result on…');\\n    await StillMade.run({ video, original: source });\\n    state.lastSaved = video;\\n    say('done-text', isWhole(state.segments) ? `The whole recording (${formatTime(state.duration)}) is the result.` : `Saved ${formatTime(keptDuration(state.segments))} of ${formatTime(state.duration)}. The uncut recording is kept beside it.`);\\n    show('done');\\n  } catch (error) { say('editor-status', message(error)); }\\n  finally { busy(false); }\\n});\\n$('edit-again').addEventListener('click', () => { if (state.source) { show('editor'); say('editor-status', ''); } });\\n\\n// ── Input: a video from an earlier Step opens straight in the editor ──────\\n// onInput first fires once the view is ready, which is also the earliest moment a host call can be made.\\nStillMade.onInput(async input => {\\n  if (!state.device && !state.deviceAsked) { state.deviceAsked = true; loadDevice(); }\\n  const video = input && input.video;\\n  if (!video || state.source || state.phase !== 'ready') return;\\n  busy(true);\\n  try { await openEditor(video); say('editor-status', 'Editing the video this Block received. Record again to replace it.'); }\\n  catch (error) { say('ready-status', message(error)); }\\n  finally { busy(false); }\\n});\\n\\n})();\\n\"\n}"
+      "upstream/0/src/view.json": "{\n  \"runtime\": \"frame\",\n  \"html\": \"<main class=\\\"sm-block sr\\\">\\n  <section class=\\\"sm-stage sr-stage\\\" id=\\\"stage\\\" aria-live=\\\"polite\\\">\\n    <video id=\\\"player\\\" class=\\\"sr-player\\\" playsinline preload=\\\"metadata\\\" hidden></video>\\n    <div class=\\\"sm-empty\\\" id=\\\"empty\\\">\\n      <span class=\\\"sm-glyph\\\" data-glyph=\\\"video\\\" aria-hidden=\\\"true\\\"></span>\\n      <p>Nothing recorded yet</p>\\n    </div>\\n    <div class=\\\"sr-live\\\" id=\\\"meter\\\" hidden>\\n      <span class=\\\"sr-dot\\\" aria-hidden=\\\"true\\\"></span>\\n      <strong id=\\\"timer\\\">0:00.0</strong>\\n      <span id=\\\"size\\\">0 KB</span>\\n    </div>\\n    <div id=\\\"timeline\\\" class=\\\"sr-timeline\\\" role=\\\"group\\\" aria-label=\\\"Recording timeline\\\" tabindex=\\\"0\\\" hidden>\\n      <div id=\\\"segments\\\" class=\\\"sr-segments\\\"></div>\\n      <div id=\\\"playhead\\\" class=\\\"sr-playhead\\\" aria-hidden=\\\"true\\\"></div>\\n    </div>\\n  </section>\\n  <fieldset class=\\\"sm-choices\\\" data-compact id=\\\"sound\\\">\\n    <legend>Sound</legend>\\n    <label><input id=\\\"mic\\\" type=\\\"checkbox\\\" data-stillmade-share=\\\"microphone\\\"><span class=\\\"sm-glyph\\\" data-glyph=\\\"audio\\\" aria-hidden=\\\"true\\\"></span><span>Microphone</span></label>\\n    <label><input id=\\\"system\\\" type=\\\"checkbox\\\" data-stillmade-share=\\\"computerSound\\\"><span>Computer sound</span></label>\\n  </fieldset>\\n  <div class=\\\"sm-actions\\\" id=\\\"tools\\\" hidden>\\n    <button type=\\\"button\\\" class=\\\"sm-icon\\\" id=\\\"play\\\" aria-label=\\\"Play\\\" title=\\\"Play\\\"><span class=\\\"sm-glyph\\\" data-glyph=\\\"play\\\" aria-hidden=\\\"true\\\"></span></button>\\n    <span class=\\\"sr-time\\\" id=\\\"time\\\">0:00.0 / 0:00.0</span>\\n    <button type=\\\"button\\\" class=\\\"sm-quiet\\\" id=\\\"cut\\\">Cut here</button>\\n    <button type=\\\"button\\\" class=\\\"sm-quiet\\\" id=\\\"toggle\\\" disabled>Remove part</button>\\n    <button type=\\\"button\\\" class=\\\"sm-quiet\\\" id=\\\"undo\\\" disabled>Undo</button>\\n    <span class=\\\"sr-time\\\" id=\\\"kept\\\"></span>\\n  </div>\\n  <div class=\\\"sm-actions\\\">\\n    <button type=\\\"button\\\" class=\\\"sm-primary\\\" id=\\\"action\\\">Record screen</button>\\n    <button type=\\\"button\\\" class=\\\"sm-quiet\\\" id=\\\"secondary\\\" hidden>Record again</button>\\n    <p class=\\\"sm-status\\\" id=\\\"status\\\" role=\\\"status\\\"></p>\\n    <details class=\\\"sm-hint\\\" id=\\\"why\\\" hidden><summary aria-label=\\\"Why\\\" title=\\\"Why\\\"></summary><p id=\\\"why-text\\\"></p></details>\\n  </div>\\n  <details class=\\\"sm-more\\\" id=\\\"more\\\">\\n    <summary>More</summary>\\n    <div class=\\\"sm-settings\\\">\\n      <fieldset class=\\\"sm-choices\\\" data-segmented id=\\\"resolution\\\" data-stillmade-share=\\\"resolution\\\">\\n        <legend>Size</legend>\\n        <label><input type=\\\"radio\\\" name=\\\"resolution\\\" value=\\\"1080p\\\" checked><span>1080p</span></label>\\n        <label><input type=\\\"radio\\\" name=\\\"resolution\\\" value=\\\"source\\\"><span>Full size</span></label>\\n      </fieldset>\\n      <fieldset class=\\\"sm-choices\\\" data-compact id=\\\"playback\\\" hidden>\\n        <legend>Playback</legend>\\n        <label><input id=\\\"skip\\\" type=\\\"checkbox\\\" checked data-stillmade-local><span>Skip removed parts</span></label>\\n      </fieldset>\\n    </div>\\n  </details>\\n</main>\\n\",\n  \"css\": \"/* The Block kit (injected by the host) carries the layout; this file only draws\\n   what the kit has no piece for: the recording meter and the cut timeline. */\\n.sr [hidden] { display: none !important; }\\n.sr-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; justify-items: stretch; gap: var(--s-2, 8px); }\\n.sr-stage > .sm-empty, .sr-live { align-self: center; justify-self: center; }\\n.sr-player { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; border-radius: var(--r-2, 4px); background: var(--bg-inset); }\\n#sound { --sm-tile: 150px; }\\n.sr-live { display: flex; align-items: center; gap: var(--s-3, 12px); font-variant-numeric: tabular-nums; }\\n.sr-live strong { font-size: 1.6rem; font-weight: 500; }\\n.sr-live span:last-child { color: var(--fg-muted); }\\n.sr-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--attention-error, var(--signal)); }\\n.sr-time { color: var(--fg-muted); font-size: var(--fs-body-s, .875rem); font-variant-numeric: tabular-nums; }\\n/* Kept parts are solid, removed parts hatched, the chosen part outlined. */\\n.sr-timeline { position: relative; height: 48px; border-radius: var(--r-3, 8px); background: var(--bg-elev-1); border: 1px solid var(--border-tok); overflow: hidden; touch-action: none; user-select: none; }\\n.sr-timeline:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }\\n.sr-segments { position: absolute; inset: 0; }\\n.sr-seg { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; background: var(--fg-muted); opacity: .5; cursor: pointer; }\\n.sr-seg[data-kept=\\\"false\\\"] { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--border-strong) 6px 8px); opacity: 1; }\\n.sr-seg[aria-pressed=\\\"true\\\"] { box-shadow: inset 0 0 0 2px var(--fg); opacity: 1; }\\n.sr-seg:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }\\n.sr-handle { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; cursor: ew-resize; background: transparent; border: 0; padding: 0; }\\n.sr-handle::after { content: \\\"\\\"; position: absolute; top: 4px; bottom: 4px; left: 6px; width: 4px; border-radius: 2px; background: var(--bg); box-shadow: 0 0 0 1px var(--fg); }\\n.sr-handle:hover::after, .sr-handle[data-active=\\\"true\\\"]::after { background: var(--fg); }\\n.sr-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--fg); pointer-events: none; }\\n\",\n  \"javascript\": \"(()=>{\\n\\\"use strict\\\";\\n// The cut editor's model: the recording is an ordered list of segments that\\n// together cover it, each kept or removed. A cut splits the segment under the\\n// playhead, removing a segment drops it from the result, and dragging a\\n// boundary trims both neighbours. Every change returns a new array, so undo\\n// keeps the earlier ones. Times are seconds of the source recording.\\nconst MIN_SEGMENT = 0.1;\\nlet nextSegmentId = 1;\\nfunction createSegments(duration) {\\n  nextSegmentId = 1;\\n  return [{ id: nextSegmentId++, start: 0, end: duration, kept: true }];\\n}\\nfunction segmentAt(segments, time) {\\n  const found = segments.find(segment => time >= segment.start && time < segment.end);\\n  if (found) return found;\\n  const last = segments[segments.length - 1];\\n  return last && time >= last.end ? last : null;\\n}\\nfunction splitAt(segments, time) {\\n  const index = segments.findIndex(segment => time > segment.start + MIN_SEGMENT && time < segment.end - MIN_SEGMENT);\\n  if (index < 0) return segments;\\n  const segment = segments[index];\\n  return [...segments.slice(0, index), { ...segment, end: time }, { id: nextSegmentId++, start: time, end: segment.end, kept: segment.kept }, ...segments.slice(index + 1)];\\n}\\nfunction toggleKept(segments, id) {\\n  const index = segments.findIndex(segment => segment.id === id);\\n  if (index < 0) return segments;\\n  const next = segments.slice();\\n  next[index] = { ...next[index], kept: !next[index].kept };\\n  return next;\\n}\\n/** Moves the boundary before segments[index], clamped so both neighbours keep a minimum length. */\\nfunction moveBoundary(segments, index, time) {\\n  if (index < 1 || index >= segments.length) return segments;\\n  const left = segments[index - 1], right = segments[index];\\n  const clamped = Math.min(right.end - MIN_SEGMENT, Math.max(left.start + MIN_SEGMENT, time));\\n  if (clamped === left.end) return segments;\\n  const next = segments.slice();\\n  next[index - 1] = { ...left, end: clamped };\\n  next[index] = { ...right, start: clamped };\\n  return next;\\n}\\n/** Trims the recording's start or end to `time`: the trimmed part becomes a removed segment. */\\nfunction trimEdge(segments, edge, time) {\\n  if (edge === 'start') {\\n    if (!segments[0].kept) return moveBoundary(segments, 1, time);\\n    const split = splitAt(segments, time);\\n    return split === segments ? segments : toggleKept(split, split[0].id);\\n  }\\n  const last = segments[segments.length - 1];\\n  if (!last.kept) return moveBoundary(segments, segments.length - 1, time);\\n  const split = splitAt(segments, time);\\n  return split === segments ? segments : toggleKept(split, split[split.length - 1].id);\\n}\\n/** The kept ranges in order, neighbours merged: what record.cut keeps. */\\nfunction keepRanges(segments) {\\n  const ranges = [];\\n  for (const segment of segments) {\\n    if (!segment.kept) continue;\\n    const last = ranges[ranges.length - 1];\\n    if (last && Math.abs(last.end - segment.start) < 1e-6) last.end = segment.end;\\n    else ranges.push({ start: segment.start, end: segment.end });\\n  }\\n  return ranges;\\n}\\nfunction keptDuration(segments) {\\n  return segments.reduce((sum, segment) => segment.kept ? sum + segment.end - segment.start : sum, 0);\\n}\\nfunction isWhole(segments) {\\n  return segments.every(segment => segment.kept);\\n}\\n/** Where playback continues from `time` when removed parts are skipped: `time` itself when kept, the next kept start, or null when nothing kept follows. */\\nfunction nextKeptTime(segments, time) {\\n  const segment = segmentAt(segments, time);\\n  if (!segment || segment.kept) return time;\\n  const later = segments.find(candidate => candidate.kept && candidate.start >= segment.end);\\n  return later ? later.start : null;\\n}\\nfunction firstKeptTime(segments) {\\n  const segment = segments.find(candidate => candidate.kept);\\n  return segment ? segment.start : 0;\\n}\\n/** Seconds as m:ss.d */\\nfunction formatTime(seconds) {\\n  const total = Math.max(0, Math.round((Number(seconds) || 0) * 10) / 10);\\n  const minutes = Math.floor(total / 60), whole = Math.floor(total % 60), tenth = Math.round((total - Math.floor(total)) * 10) % 10;\\n  return `${minutes}:${String(whole).padStart(2, '0')}.${tenth}`;\\n}\\nfunction formatBytes(bytes) {\\n  const value = Number(bytes) || 0;\\n  return value >= 1024 * 1024 * 1024 ? `${(value / 1024 / 1024 / 1024).toFixed(2)} GB` : value >= 1024 * 1024 ? `${Math.round(value / 1024 / 1024)} MB` : `${Math.max(1, Math.round(value / 1024))} KB`;\\n}\\n\\n// The Screen Recorder interface on the Block kit: the stage shows the recording\\n// (a meter while recording, the player and the cut timeline after), one button\\n// names the next step, and the status beside it says the state in a few words\\n// with the reason behind the (i). The host records; this view only asks.\\n// Built into src/view.js with the cut model.\\nconst $ = id => document.getElementById(id);\\nconst player = $('player'), timeline = $('timeline'), segmentsNode = $('segments'), playhead = $('playhead');\\nconst state = { phase: 'ready', source: null, segments: [], undo: [], selected: null, duration: 0, previewUrl: null, dragging: null, poll: null, busy: false, device: null, deviceAsked: false, capacity: null };\\n\\nconst say = (id, text) => { $(id).textContent = text || ''; };\\nconst message = error => String(error && error.message || error || 'Something went wrong.');\\nconst sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\\n// A few words beside the action, a state dot, and the reason behind the (i).\\nfunction status(text, tone, why) {\\n  const node = $('status');\\n  node.textContent = text || '';\\n  if (tone) node.dataset.state = tone; else delete node.dataset.state;\\n  $('why').hidden = !why; $('why').open = false; say('why-text', why || '');\\n}\\nconst busy = value => { state.busy = value; for (const id of ['action', 'secondary', 'play', 'cut', 'toggle', 'undo']) $(id).disabled = value || ($(id).dataset.off === 'true'); };\\n\\n// ── Phases: what the stage, the settings and the action row show ──────────\\nconst PHASES = {\\n  ready: { empty: true, meter: false, player: false, timeline: false, tools: false, sound: true, size: true, playback: false, action: 'Record screen', secondary: '' },\\n  live: { empty: false, meter: true, player: false, timeline: false, tools: false, sound: false, size: false, playback: false, action: 'Stop and edit', secondary: 'Discard' },\\n  editor: { empty: false, meter: false, player: true, timeline: true, tools: true, sound: false, size: false, playback: true, action: '', secondary: 'Record again' },\\n  done: { empty: false, meter: false, player: true, timeline: false, tools: false, sound: false, size: false, playback: false, action: 'Edit again', secondary: 'Record again' },\\n};\\nfunction show(phase) {\\n  state.phase = phase;\\n  const p = PHASES[phase];\\n  $('empty').hidden = !p.empty; $('meter').hidden = !p.meter; player.hidden = !p.player; timeline.hidden = !p.timeline; $('tools').hidden = !p.tools;\\n  $('sound').hidden = !p.sound; $('resolution').hidden = !p.size; $('playback').hidden = !p.playback; $('more').hidden = !(p.size || p.playback);\\n  $('secondary').hidden = !p.secondary; if (p.secondary) say('secondary', p.secondary);\\n  if (p.action) say('action', p.action);\\n  $('action').dataset.off = 'false';\\n  if (phase === 'editor') updateButtons(); else if (phase === 'ready') showCapacity();\\n  $('action').disabled = state.busy || $('action').dataset.off === 'true';\\n}\\n$('action').addEventListener('click', () => { ({ ready: start, live: stop, editor: save, done: editAgain })[state.phase](); });\\n$('secondary').addEventListener('click', () => { if (state.phase === 'live') discard(); else recordAgain(); });\\n\\n// ── What fits here ─────────────────────────────────────────────────────────\\nconst span = seconds => seconds >= 3600 ? Math.round(seconds / 3600) + ' h' : Math.max(1, Math.round(seconds / 60)) + ' min';\\nfunction describeDevice(device) {\\n  if (!device.recorder) return { text: 'This browser cannot record', tone: 'error', why: 'Use a current desktop browser or StillMade Desktop.', off: true };\\n  const notes = [];\\n  if (device.cut === 'playback') notes.push('A cut here takes as long as the part you keep.');\\n  if (device.cut === 'none') notes.push('This browser cannot cut; use the whole recording, or cut it in StillMade Desktop.');\\n  if (device.platform === 'desktop') return { text: 'Records to disk, up to ' + span(device.budget.seconds), tone: '', why: notes.join(' ') };\\n  if (device.budget.seconds < 60) return { text: 'Less than a minute fits here', tone: 'error', why: ['Free up storage, or use StillMade Desktop, which records to disk.', ...notes].join(' ') };\\n  const fit = span(device.budget.seconds);\\n  return { text: 'About ' + fit + ' fit here', tone: device.budget.seconds < 300 ? 'waiting' : '', why: [fit + ' at 1080p' + (device.budget.bytes ? ' (' + formatBytes(device.budget.bytes) + ')' : '') + ' fit on this device. StillMade Desktop records longer.', ...notes].join(' ') };\\n}\\nasync function loadDevice() {\\n  let problem = null;\\n  try { state.device = await StillMade.desktop('device.info'); } catch (error) { state.device = null; problem = message(error); }\\n  state.capacity = problem ? { text: 'Could not check what fits here', tone: 'waiting', why: problem } : describeDevice(state.device);\\n  showCapacity();\\n}\\nfunction showCapacity() {\\n  if (state.phase !== 'ready' || !state.capacity) return;\\n  const capacity = state.capacity;\\n  status(capacity.text, capacity.tone, capacity.why);\\n  $('action').dataset.off = String(!!capacity.off); $('action').disabled = state.busy || !!capacity.off;\\n}\\nconst ENDED = { sharing: 'Sharing ended', time: 'Time limit reached', size: 'Out of space here', disk: 'Could not write to disk' };\\nfunction describeLive(live) {\\n  const limits = live.limits || {};\\n  if (limits.seconds) {\\n    const left = Math.max(0, limits.seconds - (live.elapsed || 0) / 1000);\\n    if (left <= limits.seconds * 0.2) return { text: formatTime(left) + ' left', why: 'The recording stops at ' + span(limits.seconds) + ' and is kept up to that point.' };\\n  }\\n  if (limits.bytes) {\\n    const left = Math.max(0, limits.bytes - (live.bytes || 0));\\n    if (left <= limits.bytes * 0.2) return { text: formatBytes(left) + ' left', why: 'The recording stops when the space here runs out and is kept up to that point.' };\\n  }\\n  return null;\\n}\\n\\n// ── Record ─────────────────────────────────────────────────────────────────\\nasync function pollStatus() {\\n  if (state.phase !== 'live') return;\\n  try {\\n    const live = await StillMade.desktop('record.status');\\n    if (state.phase !== 'live') return;\\n    if (live.active) {\\n      say('timer', formatTime((live.elapsed || 0) / 1000));\\n      say('size', formatBytes(live.bytes));\\n      if (live.ended) status(ENDED[live.stoppedBy] || 'Recording stopped', 'waiting', (live.message || 'The recording stopped.') + ' Press Stop and edit to keep it.');\\n      else { const warning = describeLive(live); if (warning) status(warning.text, 'waiting', warning.why); else status('Recording', 'loading'); }\\n    }\\n  } catch (error) { status(message(error), 'error'); }\\n  state.poll = setTimeout(pollStatus, 1000);\\n}\\nasync function start() {\\n  busy(true);\\n  status('Press Start above', 'waiting', 'Then choose the screen or window to record. Nothing is captured before that.');\\n  try {\\n    const picked = document.querySelector('input[name=\\\"resolution\\\"]:checked');\\n    await StillMade.desktop('record.start', { kind: 'screen', microphone: $('mic').checked, systemAudio: $('system').checked, resolution: picked ? picked.value : '1080p' });\\n    say('timer', '0:00.0'); say('size', '0 KB');\\n    show('live'); status('Recording', 'loading'); pollStatus();\\n  } catch (error) { status(message(error), 'error'); }\\n  finally { busy(false); }\\n}\\nasync function stop() {\\n  busy(true); clearTimeout(state.poll);\\n  status('Saving on this device', 'loading');\\n  try {\\n    const result = await StillMade.desktop('record.stop');\\n    const asset = { ...result.asset };\\n    for (const key of ['duration', 'width', 'height']) if (result[key] && !asset[key]) asset[key] = result[key];\\n    await openEditor(asset);\\n    if (result.stoppedBy) status(ENDED[result.stoppedBy] || 'Recording stopped', 'waiting', result.message); else status('');\\n  } catch (error) { status(message(error), 'error'); pollStatus(); }\\n  finally { busy(false); }\\n}\\nasync function discard() {\\n  busy(true); clearTimeout(state.poll);\\n  try { await StillMade.desktop('record.cancel'); } catch (error) { /* already gone */ }\\n  show('ready'); busy(false);\\n}\\nfunction recordAgain() { closePreview(); state.source = null; show('ready'); loadDevice(); }\\n\\n// ── Editor ─────────────────────────────────────────────────────────────────\\nfunction closePreview() {\\n  player.pause();\\n  if (state.previewUrl) { try { StillMade.releaseMedia(state.previewUrl); } catch (error) { /* released */ } state.previewUrl = null; }\\n  player.removeAttribute('src'); player.load();\\n}\\nasync function openEditor(source) {\\n  closePreview();\\n  state.source = source; state.selected = null; state.undo = [];\\n  const { url } = await StillMade.previewMedia(source);\\n  state.previewUrl = url;\\n  const duration = await new Promise((resolve, reject) => {\\n    const done = () => { player.onloadedmetadata = null; player.onerror = null; resolve(Number.isFinite(player.duration) && player.duration > 0 ? player.duration : Number(source.duration) || 0); };\\n    player.onloadedmetadata = done;\\n    player.onerror = () => reject(new Error('This recording could not be opened for editing.'));\\n    player.src = url;\\n  });\\n  if (!(duration > 0)) throw new Error('The recording has no length to edit.');\\n  state.duration = duration;\\n  state.segments = createSegments(duration);\\n  show('editor'); status('');\\n  renderTimeline(); updateTime(); updateButtons();\\n}\\nconst fraction = time => Math.max(0, Math.min(1, time / state.duration));\\nfunction renderTimeline() {\\n  segmentsNode.replaceChildren();\\n  state.segments.forEach((segment, index) => {\\n    const node = document.createElement('button');\\n    node.type = 'button'; node.className = 'sr-seg'; node.dataset.id = String(segment.id); node.dataset.kept = String(segment.kept);\\n    node.setAttribute('aria-pressed', String(state.selected === segment.id));\\n    node.setAttribute('aria-label', `${segment.kept ? 'Kept' : 'Removed'} part from ${formatTime(segment.start)} to ${formatTime(segment.end)}`);\\n    node.style.left = `${fraction(segment.start) * 100}%`; node.style.width = `${(fraction(segment.end) - fraction(segment.start)) * 100}%`;\\n    node.addEventListener('click', event => { state.selected = state.selected === segment.id ? null : segment.id; seekTo(timeAt(event.clientX)); renderTimeline(); updateButtons(); });\\n    segmentsNode.append(node);\\n    if (index > 0) {\\n      const handle = document.createElement('button');\\n      handle.type = 'button'; handle.className = 'sr-handle'; handle.dataset.index = String(index);\\n      handle.setAttribute('aria-label', `Move the cut at ${formatTime(segment.start)}`);\\n      handle.style.left = `${fraction(segment.start) * 100}%`;\\n      handle.addEventListener('pointerdown', beginDrag);\\n      segmentsNode.append(handle);\\n    }\\n  });\\n  say('kept', isWhole(state.segments) ? `${formatTime(state.duration)} kept` : `${formatTime(keptDuration(state.segments))} of ${formatTime(state.duration)} kept`);\\n}\\nfunction timeAt(clientX) {\\n  const box = timeline.getBoundingClientRect();\\n  return box.width > 0 ? Math.max(0, Math.min(state.duration, (clientX - box.left) / box.width * state.duration)) : 0;\\n}\\nfunction beginDrag(event) {\\n  event.preventDefault(); event.stopPropagation();\\n  const index = Number(event.currentTarget.dataset.index);\\n  state.dragging = { index, before: state.segments, handle: event.currentTarget, pointerId: event.pointerId };\\n  event.currentTarget.setPointerCapture(event.pointerId);\\n  event.currentTarget.dataset.active = 'true';\\n  event.currentTarget.addEventListener('pointermove', continueDrag);\\n  event.currentTarget.addEventListener('pointerup', endDrag);\\n  event.currentTarget.addEventListener('pointercancel', endDrag);\\n}\\nfunction continueDrag(event) {\\n  const drag = state.dragging; if (!drag) return;\\n  const next = moveBoundary(state.segments, drag.index, timeAt(event.clientX));\\n  if (next === state.segments) return;\\n  state.segments = next;\\n  const boundary = next[drag.index].start;\\n  drag.handle.style.left = `${fraction(boundary) * 100}%`;\\n  const left = segmentsNode.querySelector(`.sr-seg[data-id=\\\"${next[drag.index - 1].id}\\\"]`), right = segmentsNode.querySelector(`.sr-seg[data-id=\\\"${next[drag.index].id}\\\"]`);\\n  if (left) left.style.width = `${(fraction(boundary) - fraction(next[drag.index - 1].start)) * 100}%`;\\n  if (right) { right.style.left = `${fraction(boundary) * 100}%`; right.style.width = `${(fraction(next[drag.index].end) - fraction(boundary)) * 100}%`; }\\n  seekTo(boundary, { quiet: true });\\n}\\nfunction endDrag(event) {\\n  const drag = state.dragging; if (!drag) return;\\n  state.dragging = null;\\n  drag.handle.dataset.active = 'false';\\n  drag.handle.removeEventListener('pointermove', continueDrag);\\n  drag.handle.removeEventListener('pointerup', endDrag);\\n  drag.handle.removeEventListener('pointercancel', endDrag);\\n  try { drag.handle.releasePointerCapture(drag.pointerId); } catch (error) { /* released */ }\\n  if (drag.before !== state.segments) { state.undo.push(drag.before); if (state.undo.length > 100) state.undo.shift(); }\\n  renderTimeline(); updateButtons();\\n}\\ntimeline.addEventListener('pointerdown', event => { if (event.target === timeline || event.target === segmentsNode) seekTo(timeAt(event.clientX)); });\\nfunction seekTo(time, options) {\\n  player.currentTime = Math.max(0, Math.min(state.duration, time));\\n  if (!(options && options.quiet)) updateTime();\\n}\\nfunction updateTime() {\\n  const time = player.currentTime || 0;\\n  playhead.style.transform = `translateX(${fraction(time) * timeline.clientWidth}px)`;\\n  say('time', `${formatTime(time)} / ${formatTime(state.duration)}`);\\n}\\nconst playGlyph = paused => { const glyph = $('play').querySelector('.sm-glyph'); glyph.dataset.glyph = paused ? 'play' : 'pause'; $('play').setAttribute('aria-label', paused ? 'Play' : 'Pause'); $('play').title = paused ? 'Play' : 'Pause'; };\\nplayer.addEventListener('timeupdate', () => {\\n  if (state.phase !== 'editor') return;\\n  if ($('skip').checked && !player.paused) {\\n    const next = nextKeptTime(state.segments, player.currentTime);\\n    if (next === null) { player.pause(); }\\n    else if (next !== player.currentTime) { player.currentTime = next; }\\n  }\\n  updateTime();\\n});\\nplayer.addEventListener('play', () => { if ($('skip').checked) { const next = nextKeptTime(state.segments, player.currentTime); if (next === null) player.currentTime = firstKeptTime(state.segments); else if (next !== player.currentTime) player.currentTime = next; } playGlyph(false); });\\nplayer.addEventListener('pause', () => playGlyph(true));\\nplayer.addEventListener('ended', () => playGlyph(true));\\n$('play').addEventListener('click', () => { if (player.paused) player.play().catch(error => status(message(error), 'error')); else player.pause(); });\\nfunction apply(next) {\\n  if (next === state.segments) return;\\n  state.undo.push(state.segments); if (state.undo.length > 100) state.undo.shift();\\n  state.segments = next;\\n  renderTimeline(); updateButtons();\\n}\\n$('cut').addEventListener('click', () => { apply(splitAt(state.segments, player.currentTime)); });\\n$('toggle').addEventListener('click', () => { if (state.selected !== null) apply(toggleKept(state.segments, state.selected)); });\\n$('undo').addEventListener('click', () => { const previous = state.undo.pop(); if (previous) { state.segments = previous; if (!previous.some(segment => segment.id === state.selected)) state.selected = null; renderTimeline(); updateButtons(); } });\\ntimeline.addEventListener('keydown', event => {\\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { event.preventDefault(); seekTo((player.currentTime || 0) + (event.key === 'ArrowLeft' ? -0.5 : 0.5) * (event.shiftKey ? 10 : 1)); }\\n  else if (event.key === 'c' || event.key === 'C') { event.preventDefault(); $('cut').click(); }\\n  else if (event.key === 'Delete' || event.key === 'Backspace') { event.preventDefault(); $('toggle').click(); }\\n  else if (event.key === ' ') { event.preventDefault(); $('play').click(); }\\n});\\nfunction updateButtons() {\\n  const selected = state.segments.find(segment => segment.id === state.selected);\\n  $('toggle').disabled = state.busy || !selected; $('toggle').dataset.off = String(!selected);\\n  say('toggle', selected && !selected.kept ? 'Keep part' : 'Remove part');\\n  $('undo').disabled = state.busy || !state.undo.length; $('undo').dataset.off = String(!state.undo.length);\\n  const whole = isWhole(state.segments), nothing = keepRanges(state.segments).length === 0;\\n  say('action', whole ? 'Use the whole recording' : 'Save the cut');\\n  $('action').disabled = state.busy || nothing; $('action').dataset.off = String(nothing);\\n}\\nwindow.addEventListener('resize', () => { if (state.phase === 'editor') updateTime(); });\\n\\n// ── Save ───────────────────────────────────────────────────────────────────\\nasync function save() {\\n  const source = state.source; if (!source) return;\\n  const keep = keepRanges(state.segments);\\n  if (!keep.length) { status('Keep at least one part', 'error'); return; }\\n  busy(true); player.pause();\\n  try {\\n    let video = source;\\n    if (!isWhole(state.segments)) {\\n      status('Cutting on this device', 'loading');\\n      let watching = true;\\n      const watch = async () => { while (watching) { await sleep(700); if (!watching) break; try { const live = await StillMade.desktop('record.status'); if (live.cutting) status(`Cutting ${Math.round(live.cutting.progress * 100)}%`, 'loading'); } catch (error) { /* next tick */ } } };\\n      watch();\\n      try { video = (await StillMade.desktop('record.cut', { source, keep })).asset; }\\n      finally { watching = false; }\\n    }\\n    status('Passing it on', 'loading');\\n    await StillMade.run({ video, original: source });\\n    show('done');\\n    if (isWhole(state.segments)) status(`Whole recording, ${formatTime(state.duration)}`, 'success');\\n    else status(`Saved ${formatTime(keptDuration(state.segments))} of ${formatTime(state.duration)}`, 'success', 'The uncut recording is passed on beside it.');\\n  } catch (error) { status(message(error), 'error'); }\\n  finally { busy(false); }\\n}\\nfunction editAgain() { if (state.source) { show('editor'); status(''); } }\\n\\n// ── Input: a video from an earlier Step opens straight in the editor ──────\\n// onInput first fires once the view is ready, which is also the earliest moment a host call can be made.\\nStillMade.onInput(async input => {\\n  if (!state.deviceAsked) { state.deviceAsked = true; loadDevice(); }\\n  const video = input && input.video;\\n  if (!video || state.source || state.phase !== 'ready') return;\\n  busy(true);\\n  try { await openEditor(video); status('Video from an earlier Step', '', 'Record again to replace it.'); }\\n  catch (error) { status(message(error), 'error'); }\\n  finally { busy(false); }\\n});\\n\\n})();\\n\"\n}"
     },
     "lineage": {
       "parents": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stillmade-sdk",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "StillMade Block SDK, CLI and examples",
   "license": "PolyForm-Shield-1.0.0",
   "type": "module",

package/packages/block-sdk/builder-contract.js

@@ -57,7 +57,7 @@ const SECTIONS=Object.freeze([
   `Give the Block a short, plain name of ${BLOCK_NAME_MAX_LENGTH} characters or fewer that says what it does ("Captioned Clip", not "Captioned Business Clip Generator With Review"). The name appears in step bars, Project Type cards and pickers, so put the detail in the description instead. New releases with a longer name do not pass readiness.`),
  rule('ui','block',
   'Prefer `manifest.ui`; custom views use the Block kit (`sm-*` classes) unless a look is named. Pictures over words: preview each option before choosing; cut needless words, fold the rest; the start button names the action (never "Run") and shows no price (StillMade adds it); fit one screen unscrolled and a 320px phone.',
-  'If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade\'s run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block\'s own files or the host\'s free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side (`sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.'),
+  'If the capability needs UI, use the Block UI SDK: generated `manifest.ui` controls first; a sandboxed custom view (`view.html`/`view.css`/`view.js`) only when the core interaction genuinely needs one. Build custom views from the Block kit the host injects (`block-kit.css`): the result in `sm-stage`, picks as pictures in `sm-choices`, one `sm-primary` naming the action (Write, Generate; never "Run") and no price (StillMade\'s run button adds it), extras in a closed `sm-more`; a look the person names wins. Fit one laptop screen without scrolling: label beside control, status in a few words, files as tiles, rare tools as icons, (i) on unclear controls. Drop words nobody needs; put helpful ones in a closed `sm-hint`. Expose the capability, not the implementation: sensible defaults, previews, progress, clear errors, visible outputs. Do not show raw JSON, internal IDs, filesystem details, provider terminology or developer settings unless the Block is itself a developer tool. When a person chooses among options they need to hear or see (voices, music, sounds, fonts, looks, colors, templates or images), let them preview each option before choosing: a sample to play or a thumbnail, from the Block\'s own files or the host\'s free samples, never a paid generation. Leave previews out only when the builder states there is nothing to preview. Choices StillMade owns, such as voices and models in the run review, already show their samples. Follow the host appearance (Light, Dark and White) and one elastic layout: stacked on a 320px phone with no sideways scroll (result first, action pinned), and from 860px the controls left (≤380px), the result filling the right. Short settings sit side by side, each label beside its control (`sm-field`, `sm-settings`; three or four short options as one `data-segmented` row); many items are one line each (`sm-list`) that open in place; input files are small tiles (`sm-gallery data-size="small"`); on a phone chip rows scroll sideways and long lists show three. Compacting moves controls, never deletes them.'),
  rule('multiplayer','block',
   'Custom views share edits: `StillMade.onShared`, publish every editable field (`data-stillmade-share`, `bindShared`, `updateShared`), respect `canEdit`, never re-run on remote updates.',
   'Projects are multiplayer. A custom view subscribes through `StillMade.onShared(callback)` and publishes every editable field: give static controls a unique `id` and `data-stillmade-share="field"` (the host owns their synchronization), use `StillMade.bindShared(field, elementId)` for controls created dynamically, and `StillMade.updateShared(values, before, options)` for structured values; private variables and DOM values are not shared. Mark a truly device-only control (playback, hover, device selection) with `data-stillmade-local`. Observe shared outputs as well as state, honor `canEdit` in every mutating callback (read-only participants cannot write), never run, click or call a paid integration in response to a remote update, and preserve conflicting drafts. Shared background work uses `sharedWork` with the `work.shared` permission.'),

package/packages/block-sdk/view-design.js

@@ -12,8 +12,8 @@ export const BLOCK_KIT_CLASSES=Object.freeze({
  'sm-stage':'The thing being made: preview, media or result. The biggest area; data-ratio="16:9|9:16|1:1".',
  'sm-empty':'What an empty stage shows: an .sm-glyph, at most five words and one action.',
  'sm-choices':'A fieldset of radio labels shown as pictures (img, .sm-swatch or .sm-glyph) and one or two words; replaces word dropdowns. data-compact for short text chips, data-segmented for one connected row (Low / Med / High). On a phone chips and segments scroll sideways.',
- 'sm-field':'A short label above one control. Group several in .sm-fields.',
- 'sm-settings':'Short settings side by side, each label above its control; .sm-choices[data-segmented] inside for three or four short options.',
+ 'sm-field':'One short setting on one row, its label beside the control; on a phone the control wraps under the label only when both do not fit. A textarea, picture choices, file tiles or a list keep the label above. Group several in .sm-fields.',
+ 'sm-settings':'Short settings side by side, each label beside its control (a narrow cell wraps the control under its label); .sm-choices[data-segmented] inside for three or four short options.',
  'sm-list':'Many items one line each (thumbnail, one line of text, a short fact); an item opens in place with <details>. data-peek shows three on a phone.',
  'sm-clamp':'Long text that shows five lines on a phone until opened (data-open).',
  'sm-actions':'The action row: one .sm-primary, optional .sm-quiet buttons and .sm-icon buttons (aria-label and title required).',
@@ -71,6 +71,66 @@ function bareFilePicker(html){
  return false;
 }
 const words=text=>text.replace(/<[^>]*>/g,' ').trim().split(/\s+/).filter(Boolean).length;
+const SHORT_CONTROL=/^<(?:select\b|input\b(?![^>]*\btype\s*=\s*["']?(?:file|hidden|checkbox|radio|range|submit|button|image|reset)\b))/;
+const ROW_CLASSES=/\bsm-(?:field|fields|settings|label|row|choices)\b/;
+const afterBreak=text=>text.replace(/^<br\s*\/?>\s*/,'');
+// A short control (a text-like input or a select) whose label sits above it outside the kit's
+// one-row fields: a <br> between them, a label styled display:block right before the control,
+// or the Block's CSS making every label a block. Conservative: a label inside or just after
+// sm-field / sm-settings markup is skipped. One forward scan; every search is bounded.
+function stackedLabel(html,css){
+ const lower=html.toLowerCase();
+ let blockLabels=false;
+ for(const rule of String(css||'').toLowerCase().split('}')){
+  const open=rule.indexOf('{');if(open===-1)continue;
+  if(rule.slice(0,open).split(',').some(selector=>/(?:^|\s)label$/.test(selector.trim()))&&/display\s*:\s*block\b/.test(rule.slice(open)))blockLabels=true;
+ }
+ for(let at=lower.indexOf('<label');at!==-1;at=lower.indexOf('<label',at+6)){
+  if(ROW_CLASSES.test(lower.slice(Math.max(0,at-240),at)))continue;
+  const tagEnd=lower.indexOf('>',at);if(tagEnd===-1)return false;
+  const close=lower.slice(tagEnd,tagEnd+400).indexOf('</label>');if(close===-1)continue;
+  const tag=lower.slice(at,tagEnd),inner=lower.slice(tagEnd+1,tagEnd+close),after=lower.slice(tagEnd+close+8,tagEnd+close+408).trimStart();
+  const brInside=inner.indexOf('<br');
+  if(brInside!==-1&&SHORT_CONTROL.test(afterBreak(inner.slice(brInside))))return true;
+  if(/^<br\b/.test(after)&&SHORT_CONTROL.test(afterBreak(after)))return true;
+  if((blockLabels||/\bstyle\s*=\s*["'][^"']*display\s*:\s*block/.test(tag))&&SHORT_CONTROL.test(after))return true;
+ }
+ return false;
+}
+// Rare tools named as their own section: a heading, legend or <details> summary titled
+// Update / Schedule / History / Reload / Versions.
+const RARE_TOOL=/^(?:update|updates|schedule|scheduling|history|reload|versions?|version history|run history|past runs|check for updates)$/i;
+function rareToolSection(html){
+ const lower=html.toLowerCase();
+ for(let at=lower.indexOf('<');at!==-1;at=lower.indexOf('<',at+1)){
+  const name=/^<(h[1-6]|summary|legend)\b/.exec(lower.slice(at,at+9));if(!name)continue;
+  const near=lower.slice(at,at+300),open=near.indexOf('>'),close=near.indexOf('</'+name[1]);
+  if(open===-1||close<open)continue;
+  const text=html.slice(at+open+1,at+close).replace(/<[^<>]*>/g,' ').replace(/\s+/g,' ').trim();
+  if(RARE_TOOL.test(text))return text;
+ }
+ return null;
+}
+// A static proxy for "fits one laptop screen": the visible top-level rows of the sm-block
+// (or the <main>) besides the stage. It cannot measure height; StillMade's builder preview measures the real one.
+const VOID_TAGS=new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);
+export const COMPACT_ROW_LIMIT=8;
+function topLevelRows(html){
+ const lower=html.toLowerCase(),found=/\bclass\s*=\s*["'][^"'<>]*\bsm-block\b/.exec(lower)||/<main\b/.exec(lower);
+ if(!found)return 0;
+ let depth=0,rows=0;
+ for(let at=lower.lastIndexOf('<',found.index);at!==-1;at=lower.indexOf('<',at+1)){
+  const end=lower.indexOf('>',at);if(end===-1)break;
+  const tag=/^<(\/?)([a-z][a-z0-9-]*)/.exec(lower.slice(at,Math.min(end+1,at+40)));
+  if(!tag)continue;
+  const [,closing,name]=tag;
+  if(closing){if(--depth<=0)break;continue;}
+  // Hidden parts, dialogs and live status lines (often empty) are not rows.
+  if(depth===1&&!['script','style','template','dialog'].includes(name)&&!/\bsm-stage\b|\shidden\b|\saria-live\b|\srole\s*=\s*["']?status\b/.test(lower.slice(at,end)))rows++;
+  if(!VOID_TAGS.has(name)&&lower[end-1]!=='/')depth++;
+ }
+ return rows;
+}
 
 export function reviewViewDesign(view){
   if(!view)return {passed:true,issues:[],warnings:[],principles:BLOCK_INTERFACE_PRINCIPLES};
@@ -89,6 +149,11 @@ export function reviewViewDesign(view){
   // Compact: a bare browser file picker and printed size limits each take rows nobody needs.
   if(bareFilePicker(primary))warnings.push('A bare file picker is in view. Show files as tiles: a + tile (a label around a hidden file input) and a thumbnail or chip for each saved file.');
   if(/\bup to \d+\s*(?:mb|gb|kb)\b/i.test(primary.replace(/<[^<>]*>/g,' ')))warnings.push('A size limit is printed in view. Say it only when a file is too big.');
+  if(stackedLabel(primary,view.css))warnings.push('A short setting has its label above the control. Put the label beside it: <div class="sm-field"><label for="x">Label</label><input id="x"></div>, or several side by side in .sm-settings.');
+  const rareTool=rareToolSection(html);
+  if(rareTool)warnings.push(`"${rareTool.slice(0,40)}" is its own section. Rare tools (update, schedule, history, reload) are named icon buttons beside the action (.sm-icon in .sm-actions), never sections under the work.`);
+  const rows=topLevelRows(primary);
+  if(rows>COMPACT_ROW_LIMIT)warnings.push(`The workspace has ${rows} visible rows besides the stage and may not fit one laptop screen (an estimate: this check counts rows and cannot measure height). Put short settings side by side in .sm-settings and secondary ones in a closed .sm-more.`);
   warnings.push(...blockKitProblems(view).map(problem=>problem.message));
   return {passed:issues.length===0,issues,warnings,principles:BLOCK_INTERFACE_PRINCIPLES};
 }

package/packages/design-system/block-kit.css

@@ -79,16 +79,23 @@
  :where(.sm-actions) > :where(.sm-primary){flex:1 1 100%}
 }
 
-/* ---------- Fields: a short label above one control ---------- */
+/* ---------- Fields: a short setting is one row, its label beside the control ----------
+   Long inputs (a textarea, picture choices, file tiles, a list) keep their label above. */
 :where(.sm-field){display:grid;gap:6px;min-width:0}
 :where(.sm-field) > :where(label,.sm-label){display:flex;align-items:center;gap:var(--s-1,4px);font-size:var(--fs-body-s,.875rem);color:var(--fg-muted);min-height:24px}
 :where(.sm-field) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){width:100%;min-height:var(--touch-target,44px);padding:10px 12px;border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-1);color:var(--fg);font:inherit}
 :where(.sm-field) :where(textarea){min-height:96px;resize:vertical}
 :where(.sm-fields){display:grid;gap:var(--s-4,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
-/* Compact: on a view wider than a phone a short field is one row, its label beside the control. */
+/* Compact (October 19, 2026): a short field is one row at every width. On a phone or in a
+   narrow cell the label takes its own width and the control the rest; when the two do not
+   fit, the control wraps under its label. */
+:where(.sm-field:not(:has(textarea,.sm-choices,.sm-gallery,.sm-list))){display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s-2,8px)}
+:where(.sm-field:not(:has(textarea,.sm-choices,.sm-gallery,.sm-list))) > :where(label,.sm-label){flex:0 1 auto}
+:where(.sm-field:not(:has(textarea,.sm-choices,.sm-gallery,.sm-list))) > :where(:not(label,.sm-label)){flex:1 1 var(--sm-control,10rem);min-width:0}
+/* Wider than a phone, short fields line up: one label column, the controls beside it. */
 @container (min-width:520px){
  /* Picture choices, file tiles and lists keep the full width: their label sits above, and they need the row. */
- :where(.sm-field:not(:has(textarea,.sm-choices,.sm-gallery,.sm-list))){grid-template-columns:minmax(5rem,9rem) minmax(0,1fr);align-items:center;gap:var(--s-2,8px)}
+ :where(.sm-field:not(:has(textarea,.sm-choices,.sm-gallery,.sm-list))){display:grid;grid-template-columns:minmax(5rem,9rem) minmax(0,1fr);align-items:center;gap:var(--s-2,8px)}
  :where(.sm-field) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select){min-height:36px;padding:6px 10px}
  :where(.sm-fields){gap:var(--s-2,8px) var(--s-4,16px)}
 }
@@ -123,9 +130,11 @@
 :where(.sm-choices[data-segmented]) > :where(label:last-of-type){border-start-end-radius:var(--r-pill,999px);border-end-end-radius:var(--r-pill,999px)}
 :where(.sm-choices[data-segmented]) > :where(label:has(input:checked)){position:relative;z-index:1;background:var(--bg-elev-2)}
 :where(.sm-choices[data-segmented]) :where(.sm-glyph){--sm-glyph-size:16px;margin:0}
-/* Settings side by side: a grid of short settings, each label above its control. */
+/* Settings side by side: a grid of short settings, each label beside its control. A cell
+   too narrow for both wraps the control under its label; long inputs keep the label above. */
 :where(.sm-settings){display:grid;gap:var(--s-3,12px) var(--s-4,16px);grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));align-items:start;min-width:0}
 :where(.sm-settings) > :where(.sm-field){grid-template-columns:minmax(0,1fr);gap:4px}
+:where(.sm-settings) > :where(.sm-field:not(:has(textarea,.sm-choices,.sm-gallery,.sm-list))){--sm-control:6rem;display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s-2,8px)}
 :where(.sm-settings) > :where(.sm-choices) > :where(legend),:where(.sm-settings) :where(.sm-label){font-size:var(--fs-caption,.8125rem)}
 /* On a phone, a row of chips or segments scrolls sideways instead of wrapping. */
 @container (max-width:519px){
@@ -189,7 +198,7 @@
 :where(.sm-more) > :where(summary):hover{color:var(--fg)}
 :where(.sm-more) > :where(:not(summary)){margin-top:var(--s-2,8px)}
 :where(.sm-more[open]){padding-bottom:var(--s-3,12px)}
-/* The popup spans its label row (.sm-label), so it never runs off a narrow screen. */
+/* The popup opens under its label row (.sm-label) and is never wider than the view, so it stays on a narrow screen even when the label sits beside its control. */
 :where(.sm-label){position:relative}
 :where(.sm-hint){display:inline-block;vertical-align:middle}
 :where(:not(.sm-label)) > :where(.sm-hint){position:relative}
@@ -198,7 +207,7 @@
 :where(.sm-hint) > :where(summary)::-webkit-details-marker{display:none}
 :where(.sm-hint) > :where(summary)::before{content:"i";display:grid;place-items:center;width:15px;height:15px;border:1.5px solid currentColor;border-radius:50%;font:600 10px/1 var(--font-body);font-style:normal}
 :where(.sm-hint) > :where(summary):hover,:where(.sm-hint[open]) > :where(summary){color:var(--fg)}
-:where(.sm-hint) > :where(:not(summary)){position:absolute;z-index:5;inset-inline-start:0;top:100%;width:max-content;max-width:min(280px,100%);margin:4px 0 0;padding:10px 12px;border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-2);color:var(--fg);font-size:var(--fs-body-s,.875rem);line-height:1.45;box-shadow:var(--shadow-1)}
+:where(.sm-hint) > :where(:not(summary)){position:absolute;z-index:5;inset-inline-start:0;top:100%;width:max-content;max-width:min(280px,calc(100cqi - 32px));margin:4px 0 0;padding:10px 12px;border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-2);color:var(--fg);font-size:var(--fs-body-s,.875rem);line-height:1.45;box-shadow:var(--shadow-1)}
 /* Outside a label row there is no safe anchor, so the explanation opens in the flow instead. */
 :where(:not(.sm-label)) > :where(.sm-hint[open]){display:block}
 :where(:not(.sm-label)) > :where(.sm-hint) > :where(:not(summary)){position:static;width:auto;max-width:60ch}