stillmade-sdk 0.1.19 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stillmade-sdk",
-  "version": "0.1.19",
+  "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}