stillmade-sdk 0.1.45 → 0.1.47

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

@@ -6,6 +6,20 @@ export function installViewRenderer(document,onError=()=>{},onControlsChanged=()
  const listeners=new Set();
  const actions=new WeakMap(),compositionState=new WeakMap(),compositions=new Map(),conflicts=new Map();let disposed=false,revision=0,sequence=0,dispatching=false;const roots=new Set();
  const notify=()=>{try{onControlsChanged();}catch{}};
+ // A button whose whole text is "Preview" shows the StillMade preview icon alone (owner, November 6, 2026), in
+ // StillMade.render trees and in a view's own HTML, so every Block's preview control looks the same without a new
+ // Block version. The label stays as aria-label for screen readers and Chat. Geometry: design-system/preview-icon.js.
+ const PREVIEW_PATHS=['M3 8V5a2 2 0 0 1 2-2h3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M8 21H5a2 2 0 0 1-2-2v-3','M6.5 12s2.2-3.8 5.5-3.8 5.5 3.8 5.5 3.8-2.2 3.8-5.5 3.8S6.5 12 6.5 12Z'];
+ const isPreviewText=value=>typeof value==='string'&&/^\s*preview\s*$/i.test(value);
+ const showPreviewIcon=(node,label)=>{
+  const ns='http://www.w3.org/2000/svg',svg=document.createElementNS(ns,'svg');
+  for(const [name,value] of [['viewBox','0 0 24 24'],['width','20'],['height','20'],['fill','none'],['stroke','currentColor'],['stroke-width','1.5'],['stroke-linecap','round'],['stroke-linejoin','round'],['aria-hidden','true']])svg.setAttribute(name,value);
+  for(const d of PREVIEW_PATHS){const path=document.createElementNS(ns,'path');path.setAttribute('d',d);svg.appendChild(path);}
+  const pupil=document.createElementNS(ns,'circle');for(const [name,value] of [['cx','12'],['cy','12'],['r','1.8']])pupil.setAttribute(name,value);svg.appendChild(pupil);
+  node.textContent='';node.appendChild(svg);node.setAttribute('data-icon-action','true');node.setAttribute('aria-label',label||'Preview');node.setAttribute('title',label||'Preview');
+ };
+ const iconStaticPreviews=()=>{if(disposed)return;for(const node of document.querySelectorAll('button'))if(!node.children.length&&isPreviewText(node.textContent))showPreviewIcon(node,node.getAttribute('aria-label'));};
+ if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',iconStaticPreviews,{once:true});else iconStaticPreviews();
  // October 30, 2026: Chat also reads and presses a view's plain HTML controls: a button marked
  // data-stillmade-action, and a labelled input, select or textarea. Shared fields (data-stillmade-share, reached
  // as shared fields), device-only controls (data-stillmade-local) and file, password and hidden inputs are never
@@ -75,6 +89,7 @@ export function installViewRenderer(document,onError=()=>{},onControlsChanged=()
    if(item.className!==undefined)node.className=text(item.className,240);
    if(item.text!==undefined)node.textContent=text(item.text);
    if(item.label!==undefined)node.setAttribute('aria-label',text(item.label,240));
+   if(item.tag==='button'&&isPreviewText(item.text))showPreviewIcon(node,item.label);
    if(item.type!==undefined){check(item.tag==='input'&&['text','number','range','checkbox','radio','color'].includes(item.type),'Unsupported dynamic input type');node.type=item.type;}
    for(const key of ['checked','disabled'])if(item[key]!==undefined){check(typeof item[key]==='boolean','Control flags must be boolean');node[key]=item[key];}
    for(const key of ['min','max','step'])if(item[key]!==undefined){check(typeof item[key]==='string'||typeof item[key]==='number'&&Number.isFinite(item[key]),'Control values must be text or finite numbers');node[key]=text(String(item[key]),10000);}
@@ -133,7 +148,8 @@ export function installViewRenderer(document,onError=()=>{},onControlsChanged=()
      }
      // Preserve Block-owned media src/style properties. Only renderer-owned
      // attributes and control state are reconciled from the validated tree.
-     for(const name of ['id','class','aria-label','type','min','max','step','placeholder']){
+     const iconed=fresh.hasAttribute('data-icon-action')||node.hasAttribute('data-icon-action');
+     for(const name of ['id','class','aria-label','type','min','max','step','placeholder',...(iconed?['data-icon-action','title']:[])]){
       const value=fresh.getAttribute(name);if(value===null)node.removeAttribute(name);else if(node.getAttribute(name)!==value)node.setAttribute(name,value);
      }
      reconcile(node,fresh);

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

@@ -322,3 +322,20 @@
  :where(.sm-status[data-state="loading"])::before,:where(.sm-glyph[data-glyph="spinner"])::before{animation:none;border-right-color:currentColor;opacity:.6}
  :where(.sm-more) > :where(summary)::after{transition:none}
 }
+
+/* Actions on the stage (owner, November 5, 2026). A job's sm-actions and sm-status go inside its sm-stage: status top-left,
+   actions top-right, in the cream blocks of StillMade's player, over a band kept above the media so they never cover it.
+   The run button is always the rightmost, so making again is pressed in the same place it made the first time, and what
+   the result adds (Download) sits to its left. On a narrow stage the actions take a second row under the status. */
+:where(.sm-stage:has(> .sm-actions,> .sm-status)){padding-top:calc(var(--s-3,12px) * 2 + var(--touch-target,44px))}
+:where(.sm-stage) > :where(.sm-actions){position:absolute;top:var(--s-3,12px);right:var(--s-3,12px);z-index:2;flex-wrap:nowrap;justify-content:flex-end;max-width:calc(100% - var(--s-3,12px) * 2)}
+:where(.sm-stage) > :where(.sm-actions) > :where(.sm-primary){flex:0 0 auto}
+:where(.sm-stage) > :where(.sm-actions) > :where([data-stillmade-action="run"]){order:99}
+:where(.sm-stage) > :where(.sm-actions) > :where(.sm-quiet,.sm-icon){border-color:transparent;background:var(--cream-100,#F7F0DB);color:var(--ink-600,#0A0A0A)}
+:where(.sm-stage) > :where(.sm-status){position:absolute;top:var(--s-3,12px);left:var(--s-3,12px);z-index:2;display:inline-flex;align-items:center;gap:var(--s-2,8px);min-height:32px;margin:0;padding:0 var(--s-3,12px);border-radius:var(--r-3,8px);background:var(--cream-100,#F7F0DB);color:var(--ink-600,#0A0A0A);font-size:12px}
+:where(.sm-stage) > :where(.sm-status:empty){display:none}
+@container (max-width:420px){
+ :where(.sm-stage:has(> .sm-actions):has(> .sm-status:not(:empty))){padding-top:calc(var(--s-3,12px) * 2 + var(--s-2,8px) + 32px + var(--touch-target,44px))}
+ :where(.sm-stage:has(> .sm-status:not(:empty))) > :where(.sm-actions){top:calc(var(--s-3,12px) + var(--s-2,8px) + 32px);left:var(--s-3,12px)}
+ :where(.sm-stage) > :where(.sm-actions) > :where(.sm-primary){flex:0 1 auto}
+}

package/packages/design-system/theme.css

@@ -256,15 +256,16 @@
 }
 
 /* Bare icon controls: visible glyph, generous invisible target, no circular chrome. */
-button[data-icon-action="true"] {
+button[data-icon-action="true"],a[data-icon-action="true"] {
   display:inline-flex !important; align-items:center !important; justify-content:center !important;
   min-width:36px !important; min-height:36px !important; padding:8px !important;
   border:0 !important; border-radius:0 !important; background:transparent !important;
   box-shadow:none !important; color:var(--text-secondary, var(--fg)) !important;
-  flex-shrink:0; line-height:1; cursor:pointer;
+  flex-shrink:0; line-height:1; cursor:pointer; text-decoration:none !important;
 }
-button[data-icon-action="true"]:hover:not(:disabled) {color:var(--text-primary, var(--fg)) !important;}
-button[data-icon-action="true"]:focus-visible {outline:2px solid var(--signal) !important;outline-offset:2px;}
-button[data-icon-action="true"]:disabled {opacity:.4 !important;cursor:not-allowed;}
-button[data-icon-action="true"][aria-pressed="true"] {color:var(--text-primary, var(--fg)) !important;text-decoration:underline;text-underline-offset:5px;}
-@media (pointer:coarse) {button[data-icon-action="true"] {min-width:44px !important;min-height:44px !important;}}
+button[data-icon-action="true"]:hover:not(:disabled),a[data-icon-action="true"]:hover:not(:disabled) {color:var(--text-primary, var(--fg)) !important;}
+button[data-icon-action="true"]:focus-visible,a[data-icon-action="true"]:focus-visible {outline:2px solid var(--signal) !important;outline-offset:2px;}
+button[data-icon-action="true"]:disabled,a[data-icon-action="true"]:disabled {opacity:.4 !important;cursor:not-allowed;}
+button[data-icon-action="true"][aria-pressed="true"],a[data-icon-action="true"][aria-pressed="true"] {color:var(--text-primary, var(--fg)) !important;text-decoration:underline;text-underline-offset:5px;}
+a[data-icon-action="true"] {flex:0 0 auto !important;align-self:center;} /* an icon link never stretches into a bar */
+@media (pointer:coarse) {button[data-icon-action="true"],a[data-icon-action="true"] {min-width:44px !important;min-height:44px !important;}}