stillmade-sdk 0.1.44 → 0.1.45

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

@@ -48,7 +48,7 @@ export const BLOCK_INTERFACE_PRINCIPLES=Object.freeze([
  'Status sits beside the action it describes (`sm-status`), in a few words.',
  'Keep the page in normal scroll flow; no sticky media or control strips unless the editing task needs them.',
  'Use the width: from 860px wide the kit puts the controls on the left at a reading width (300–380px) and the result (`sm-stage`) fills the right, in its real shape; under that everything stacks in the page\'s order: the inputs, the action in normal flow (never pinned), then the result\'s place under it, so put `sm-stage` after `sm-actions`. Extra width goes to the result, never to wider text fields. Before there is a result, the stage previews what will be made from the inputs. `data-layout="stack"` opts out.',
- 'Size with the kit, never fixed sizes: no fixed pixel widths or heights for the workspace or stage, no 100vh, no position:fixed panels. StillMade zooms a Block\'s screen to fill the space it has (up to 150%, never down to a phone layout on a computer), so a Block laid out with the kit\'s spacing fills its Step without empty space, and it centers a standard view narrower than its Step. An app that lays itself out (full-size canvas or WebGL, its own scroll, pan or zoom, its own Ctrl/Cmd +/- keys) puts `data-stillmade-layout="own"` on its outermost element, and StillMade then never centers, zooms or takes those keys.',
+ 'Size with the kit, never fixed sizes: no fixed pixel widths or heights for the workspace or stage, no 100vh, no position:fixed panels. StillMade zooms a Block\'s screen to fill the space it has (up to 150%, never down to a phone layout on a computer), so a Block laid out with the kit\'s spacing fills its Step without empty space, and it centers a standard view narrower than its Step. The kit\'s `sm-stage` shows what it holds in its middle as one group (a caption stays with its picture), and several results in a stage fill its width as one row; the pages StillMade draws follow the same rule. An app that lays itself out (full-size canvas or WebGL, its own scroll, pan or zoom, its own Ctrl/Cmd +/- keys) puts `data-stillmade-layout="own"` on its outermost element, and StillMade then never centers, zooms or takes those keys.',
  'Group what the person sets in one `sm-fields` (or `sm-settings` for short ones): the kit gives the group its own surface, so the inputs, the settings and the result read as separate parts. Settings sit side by side (`sm-settings`), next to what they change. Three or four short options are one segmented row (`data-segmented`), not a row of big tiles.',
  'Lists fill the width at a small size: input files are small tiles (`sm-gallery data-size="small"`), many items are one line each (`sm-list`): a thumbnail, one line of text, a short fact. Tapping an item opens all of its fields in place. Extra width means more items per row, never bigger cards.',
  'On a phone chip and segment rows scroll sideways instead of wrapping; long lists show their first three with "N more" (`data-peek`) and long text five lines until tapped (`sm-clamp`).',

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

@@ -51,7 +51,7 @@
 }
 
 /* ---------- The stage: the object being made gets the main surface ---------- */
-:where(.sm-stage){position:relative;display:grid;place-items:center;min-height:220px;padding:var(--s-3,12px);border-radius:var(--r-3,8px);background:var(--bg-inset);overflow:hidden}
+:where(.sm-stage){position:relative;display:grid;place-items:center;align-content:center;min-height:220px;padding:var(--s-3,12px);border-radius:var(--r-3,8px);background:var(--bg-inset);overflow:hidden}
 :where(.sm-stage:is([data-ratio="16:9"],[data-ratio="16/9"])){aspect-ratio:16/9;min-height:0}
 :where(.sm-stage:is([data-ratio="9:16"],[data-ratio="9/16"])){aspect-ratio:9/16;min-height:0;max-height:70vh;justify-self:center;width:auto;height:min(70vh,640px)}
 :where(.sm-stage:is([data-ratio="1:1"],[data-ratio="1/1"])){aspect-ratio:1;min-height:0}
@@ -59,6 +59,14 @@
 :where(.sm-stage[data-fill]) > :where(img,video,canvas){width:100%;height:100%;object-fit:cover}
 /* A picture the view has not filled yet draws nothing, never a broken-image icon (November 3, 2026). */
 :where(.sm-stage) :where(img:not([src]),img[src=""]){display:none}
+/* November 4, 2026 (owner: "make that the rule for the SDK"): what a stage shows sits in its middle as one group, a caption
+   with its picture, and several results fill the stage's width as one row instead of leaving empty columns. A Block that
+   lays itself out (data-stillmade-layout="own") keeps its own placement. */
+:where(.sm-stage) > :where(.sm-gallery){width:100%;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--sm-tile,140px)),1fr))}
+:where(.sm-stage) > :where(.sm-gallery:not(:has(> :nth-child(5)))){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
+:where(.sm-stage) > :where(figcaption,small,.sm-caption){justify-self:center;text-align:center}
+:where([data-stillmade-layout="own"]) :where(.sm-stage){align-content:normal}
+:where([data-stillmade-layout="own"]) :where(.sm-stage) > :where(.sm-gallery){width:auto;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sm-tile,140px)),1fr));grid-auto-flow:row}
 
 /* ---------- Empty state: a picture and a few words, never a paragraph ---------- */
 :where(.sm-empty){display:grid;justify-items:center;gap:var(--s-3,12px);padding:var(--s-5,24px) var(--s-4,16px);text-align:center;color:var(--fg-muted)}