@rig-c/review 0.0.0-stage → 0.2.1

package/web/view-controls.ts

@@ -0,0 +1,69 @@
+/** Local inspection controls; these never write source or review state. */
+export type ThemePreference = 'system' | 'dark' | 'light';
+export interface ViewPoint { x:number; y:number }
+export function stageOrientation(width:number,height:number):'horizontal'|'vertical' {return width>=height?'horizontal':'vertical';}
+export function panCenter(center:ViewPoint,dx:number,dy:number,scale:number,space:'world'|'image'):ViewPoint {
+ if(![center.x,center.y,dx,dy,scale].every(Number.isFinite)||scale<=0)throw new Error('Pan requires finite coordinates and a positive scale');
+ return {x:center.x-dx/scale,y:center.y+(space==='world'?dy:-dy)/scale};
+}
+export function idleAvailable(names:readonly string[],selected:string):boolean {return selected==='idle'&&names.includes('idle');}
+export function initialIdleAnimation(names:readonly string[],fallback:string|null,explicit:boolean):string|null {return !explicit&&names.includes('idle')?'idle':fallback;}
+/** An automatic idle-at-start checkpoint is preview context, not a manual hold. */
+export function automaticIdlePreview(names:readonly string[],selected:string,checkpoint:{animation?:string;time?:number;axis?:unknown}|undefined,explicitCheckpoint:boolean):boolean {
+ return idleAvailable(names,selected)&&!explicitCheckpoint&&(!checkpoint||(checkpoint.animation==='idle'&&(checkpoint.time??0)===0&&!checkpoint.axis));
+}
+export function themePreference(value:unknown):ThemePreference {return value==='dark'||value==='light'?value:'system';}
+
+/** The inspection appearance is transient; workspace Settings owns the saved browser default. */
+export function bindAppearance(control:HTMLSelectElement,initial:ThemePreference='system'):{get:()=>ThemePreference;set:(value:ThemePreference)=>void;dispose:()=>void} {
+ let current=themePreference(initial);
+ const system=matchMedia('(prefers-color-scheme: light)');
+ const render=()=>{document.documentElement.dataset.theme=current==='system'?(system.matches?'light':'dark'):current;control.value=current;};
+ const set=(value:ThemePreference)=>{current=themePreference(value);render();};
+ const change=()=>set(themePreference(control.value));control.addEventListener('change',change);system.addEventListener('change',render);render();
+ return {get:()=>current,set,dispose:()=>{control.removeEventListener('change',change);system.removeEventListener('change',render);}};
+}
+export function syncStageLayout(area:Pick<HTMLElement,'clientWidth'|'clientHeight'|'dataset'>):boolean {const next=stageOrientation(area.clientWidth,area.clientHeight);if(area.dataset.orientation===next)return false;area.dataset.orientation=next;return true;}
+export function bindStageLayout(area:HTMLElement,changed:()=>void):()=>void {
+ const render=()=>{if(syncStageLayout(area))changed();};
+ const observer=new ResizeObserver(render);observer.observe(area);render();return ()=>observer.disconnect();
+}
+// Nested or separately disposed pan binders must not restore another binder's override.
+const panVideoOverrides=new WeakMap<HTMLVideoElement,{owners:number;value:string;priority:string}>();
+export function bindPan(viewport:HTMLElement,move:(dx:number,dy:number)=>void,enabled:()=>boolean=()=>true):()=>void {
+ let pointer:number|null=null,x=0,y=0,space=false;
+ const videos=new Set<HTMLVideoElement>();
+ const releaseVideo=(video:HTMLVideoElement)=>{
+  const previous=panVideoOverrides.get(video);if(!previous)return;
+  if(--previous.owners===0){if(previous.value)video.style.setProperty('pointer-events',previous.value,previous.priority);else video.style.removeProperty('pointer-events');panVideoOverrides.delete(video);}
+ };
+ const syncVideos=()=>{
+  const current=new Set(viewport.querySelectorAll<HTMLVideoElement>('video[controls]'));
+  for(const video of videos)if(!current.has(video)){releaseVideo(video);videos.delete(video);}
+  for(const video of current)if(!videos.has(video)){
+   const previous=panVideoOverrides.get(video);
+   if(previous)previous.owners++;else{panVideoOverrides.set(video,{owners:1,value:video.style.getPropertyValue('pointer-events'),priority:video.style.getPropertyPriority('pointer-events')});video.style.setProperty('pointer-events','none','important');}
+   videos.add(video);
+  }
+ };
+ const observer=new MutationObserver(()=>{if(space)syncVideos();});
+ const releaseSpace=()=>{space=false;observer.disconnect();for(const video of videos)releaseVideo(video);videos.clear();};
+ const releasePointer=()=>{const id=pointer;pointer=null;delete viewport.dataset.panning;if(id!==null&&viewport.hasPointerCapture(id))viewport.releasePointerCapture(id);};
+ const keyDown=(event:KeyboardEvent)=>{if(event.code==='Space'&&enabled()&&!(event.target instanceof Element&&event.target.closest('input,textarea,select,button'))){
+  if(!space){space=true;syncVideos();observer.observe(viewport,{childList:true,subtree:true,attributes:true,attributeFilter:['controls']});}event.preventDefault();
+ }};
+ const keyUp=(event:KeyboardEvent)=>{if(event.code==='Space')releaseSpace();};const blur=()=>{releaseSpace();releasePointer();};
+ const start=(event:PointerEvent)=>{if(!enabled()||!event.isPrimary||event.button!==0)return;const target=event.target;if(target instanceof Element&&(target.closest('button,input,select,textarea,a')||target.closest('video[controls]')&&!space))return;pointer=event.pointerId;x=event.clientX;y=event.clientY;viewport.setPointerCapture(pointer);viewport.dataset.panning='true';event.preventDefault();};
+ const drag=(event:PointerEvent)=>{if(event.pointerId!==pointer)return;const dx=event.clientX-x,dy=event.clientY-y;x=event.clientX;y=event.clientY;move(dx,dy);event.preventDefault();};
+ const end=(event:PointerEvent)=>{if(event.pointerId===pointer)releasePointer();};
+ const native=(event:DragEvent)=>event.preventDefault();
+ window.addEventListener('blur',blur);document.addEventListener('keydown',keyDown,true);window.addEventListener('keyup',keyUp,true);viewport.addEventListener('pointerdown',start);viewport.addEventListener('pointermove',drag);viewport.addEventListener('pointerup',end);viewport.addEventListener('pointercancel',end);viewport.addEventListener('lostpointercapture',end);viewport.addEventListener('dragstart',native);
+ return ()=>{blur();window.removeEventListener('blur',blur);document.removeEventListener('keydown',keyDown,true);window.removeEventListener('keyup',keyUp,true);viewport.removeEventListener('pointerdown',start);viewport.removeEventListener('pointermove',drag);viewport.removeEventListener('pointerup',end);viewport.removeEventListener('pointercancel',end);viewport.removeEventListener('lostpointercapture',end);viewport.removeEventListener('dragstart',native);};
+}
+
+/** beforeChange runs while the old panel is still visible; changed runs after the new one is shown. */
+export function bindInspectorTabs(changed:()=>void,beforeChange:()=>void=()=>{}):void {
+ const tabs=[...document.querySelectorAll<HTMLButtonElement>('[data-inspector]')];
+ const activate=(tab:HTMLButtonElement)=>{beforeChange();for(const item of tabs){const active=item===tab;item.setAttribute('aria-selected',String(active));item.tabIndex=active?0:-1;}for(const panel of document.querySelectorAll<HTMLElement>('[data-inspector-panel]'))panel.hidden=panel.dataset.inspectorPanel!==tab.dataset.inspector;changed();};
+ for(const [index,tab] of tabs.entries()){tab.onclick=()=>activate(tab);tab.onkeydown=event=>{const next=event.key==='ArrowRight'?(index+1)%tabs.length:event.key==='ArrowLeft'?(index+tabs.length-1)%tabs.length:event.key==='Home'?0:event.key==='End'?tabs.length-1:null;if(next===null)return;event.preventDefault();const target=tabs[next];if(target){activate(target);target.focus();}};}
+}

package/web/workspace-layout.ts

@@ -0,0 +1,84 @@
+/** Effective workspace geometry and local DOM bindings. Never stores source or global preferences. */
+import {parseWorkspacePanels,panelBounds,type WorkspacePanels} from './workspace-preferences.ts';
+export type WorkspacePanel=keyof WorkspacePanels;
+export const workspaceMinimums=Object.freeze({stageWidth:240,stageHeight:180,separator:8});
+export interface SeparatorRange {min:number;max:number;value:number;enabled:boolean}
+export interface EffectiveWorkspaceLayout {leftWidth:number;rightWidth:number;inspectorHeight:number;stageWidth:number;stageHeight:number;leftMode:'panel'|'drawer';rightMode:'panel'|'drawer';inspectorMode:'panel'|'drawer';stageMinimumSatisfied:boolean;separators:Record<WorkspacePanel,SeparatorRange>}
+const clamp=(value:number,min:number,max:number)=>Math.max(min,Math.min(max,value));
+/** Input rectangle excludes app chrome. Drawer triggers must remain outside collapsed panel content.
+ * Collapse left, then right when minima cannot coexist; Inspector becomes a drawer below its minimum.
+ * Returned clamps never replace the user's desired desktop sizes. */
+export function allocateWorkspaceLayout(available:{width:number;height:number},desired:WorkspacePanels):EffectiveWorkspaceLayout {
+ const panels=parseWorkspacePanels(desired),{width,height}=available,{stageWidth:minWidth,stageHeight:minHeight,separator}=workspaceMinimums;
+ if(![width,height].every(n=>Number.isFinite(n)&&n>=0&&n<=65536))throw new Error('WORKSPACE_RECTANGLE: finite 0..65536 CSS pixels required');
+ let left=true,right=true;if(width<panelBounds.leftWidth.min+panelBounds.rightWidth.min+minWidth+2*separator)left=false;if(width<(left?panelBounds.leftWidth.min+separator:0)+panelBounds.rightWidth.min+minWidth+separator)right=false;
+ const count=Number(left)+Number(right),budget=Math.max(0,width-minWidth-count*separator),leftMin=left?panelBounds.leftWidth.min:0,rightMin=right?panelBounds.rightWidth.min:0,wantLeft=left?panels.leftWidth:0,wantRight=right?panels.rightWidth:0;
+ const slack=wantLeft+wantRight-leftMin-rightMin,ratio=slack>0?Math.min(1,Math.max(0,(budget-leftMin-rightMin)/slack)):1,leftWidth=leftMin+(wantLeft-leftMin)*ratio,rightWidth=rightMin+(wantRight-rightMin)*ratio;
+ const inspector=height>=minHeight+panelBounds.inspectorHeight.min+separator,inspectorHeight=inspector?Math.min(panels.inspectorHeight,height-minHeight-separator):0;
+ const stageWidth=Math.max(0,width-leftWidth-rightWidth-count*separator),stageHeight=Math.max(0,height-inspectorHeight-(inspector?separator:0));
+ const range=(visible:boolean,key:WorkspacePanel,value:number,max:number):SeparatorRange=>visible?{min:panelBounds[key].min,max:Math.max(panelBounds[key].min,Math.min(panelBounds[key].max,max)),value,enabled:true}:{min:0,max:0,value:0,enabled:false};
+ return {leftWidth,rightWidth,inspectorHeight,stageWidth,stageHeight,leftMode:left?'panel':'drawer',rightMode:right?'panel':'drawer',inspectorMode:inspector?'panel':'drawer',stageMinimumSatisfied:width>=minWidth&&height>=minHeight,separators:{leftWidth:range(left,'leftWidth',leftWidth,width-rightWidth-count*separator-minWidth),rightWidth:range(right,'rightWidth',rightWidth,width-leftWidth-count*separator-minWidth),inspectorHeight:range(inspector,'inspectorHeight',inspectorHeight,height-minHeight-separator)}};
+}
+export interface WorkspaceSeparatorOptions {element:HTMLElement;panel:WorkspacePanel;controls:string;label:string;range:()=>SeparatorRange;resize:(desired:number)=>void;desired?:()=>number;resolveDesired?:(effective:number,context:{range:SeparatorRange;desired:number})=>number;commit?:(desired:number)=>void;events?:Pick<EventTarget,'addEventListener'|'removeEventListener'>|null;step?:number;coarseStep?:number}
+/** Arrow keys act only on the separator itself. Right/bottom boundaries grow inward.
+ * Pointer cancellation, capture loss, Escape and blur restore the prior desired size.
+ * Coupled allocators supply their reachable effective range and resolveDesired inverse;
+ * resize/commit receive desired sizes, including when effective geometry is clamped. */
+export function bindWorkspaceSeparator(options:WorkspaceSeparatorOptions):{refresh():void;dispose():void} {
+ const {element,panel}=options,vertical=panel!=='inspectorHeight',direction=panel==='leftWidth'?1:-1,events=options.events===undefined?(typeof window==='undefined'?null:window):options.events;
+ if(!options.controls||!options.label||/[\x00-\x1f]/.test(options.controls+options.label))throw new Error('WORKSPACE_SEPARATOR: controls and accessible label required');
+ const step=options.step??8,coarse=options.coarseStep??40;if(![step,coarse].every(n=>Number.isFinite(n)&&n>0))throw new Error('WORKSPACE_SEPARATOR: positive finite keyboard steps required');
+ const attrs=['role','aria-orientation','aria-controls','aria-label','aria-valuemin','aria-valuemax','aria-valuenow','aria-valuetext','aria-disabled'],saved=new Map(attrs.map(key=>[key,element.getAttribute(key)])),tabIndex=element.tabIndex,touchAction=element.style.touchAction;
+ let drag:{id:number;coordinate:number;value:number;desired:number;last:number;changed:boolean}|null=null,disposed=false;
+ const current=()=>{const range=options.range();if(![range.min,range.max,range.value].every(Number.isFinite)||range.min>range.max)throw new Error('WORKSPACE_SEPARATOR_RANGE: finite ordered range required');return {...range,value:clamp(range.value,range.min,range.max)};};
+ const release=(cancel:boolean)=>{const previous=drag;if(!previous)return;drag=null;delete element.dataset.resizing;try{if(element.hasPointerCapture(previous.id))element.releasePointerCapture(previous.id);}finally{if(previous.changed){if(cancel)options.resize(previous.desired);else options.commit?.(previous.last);}}};
+ const refresh=()=>{if(disposed)return;let range=current(),enabled=range.enabled&&range.max>range.min;if(!enabled&&drag){release(true);range=current();enabled=range.enabled&&range.max>range.min;}element.setAttribute('role','separator');element.setAttribute('aria-orientation',vertical?'vertical':'horizontal');element.setAttribute('aria-controls',options.controls);element.setAttribute('aria-label',options.label);element.setAttribute('aria-valuemin',String(Math.round(range.min)));element.setAttribute('aria-valuemax',String(Math.round(range.max)));element.setAttribute('aria-valuenow',String(Math.round(range.value)));element.setAttribute('aria-valuetext',`${Math.round(range.value)} pixels`);element.setAttribute('aria-disabled',String(!enabled));element.tabIndex=enabled?0:-1;};
+ const apply=(value:number,beforeResize?:(desired:number)=>void)=>{const range=current(),next=clamp(value,range.min,range.max),desired=options.desired?.()??range.value;if(Math.abs(next-range.value)<=1e-7)return {desired,changed:false};const resolved=options.resolveDesired?.(next,{range,desired})??next;if(!Number.isFinite(resolved))throw new Error('WORKSPACE_SEPARATOR: finite resolved desired size required');beforeResize?.(resolved);options.resize(resolved);refresh();return {desired:resolved,changed:true};};
+ const down=(event:PointerEvent)=>{if(disposed||drag||!event.isPrimary||event.button!==0)return;const target=event.target as Element|null;if(target!==element&&target&&typeof target.closest==='function'&&target.closest('input,textarea,select,button,[contenteditable]'))return;const range=current();if(!range.enabled||range.min===range.max)return;const coordinate=vertical?event.clientX:event.clientY;if(!Number.isFinite(coordinate))return;const desired=options.desired?.()??range.value;if(!Number.isFinite(desired))throw new Error('WORKSPACE_SEPARATOR: finite desired start required');drag={id:event.pointerId,coordinate,value:range.value,desired,last:desired,changed:false};try{element.setPointerCapture(event.pointerId);}catch(error){drag=null;throw error;}element.dataset.resizing='true';element.focus({preventScroll:true});event.preventDefault();};
+ const move=(event:PointerEvent)=>{if(!drag||event.pointerId!==drag.id)return;const coordinate=vertical?event.clientX:event.clientY;if(!Number.isFinite(coordinate))return;const active=drag;apply(active.value+(coordinate-active.coordinate)*direction,desired=>{active.last=desired;active.changed=true;});event.preventDefault();};
+ const up=(event:PointerEvent)=>{if(drag?.id!==event.pointerId)return;release(false);refresh();};
+ const cancel=(event:PointerEvent)=>{if(drag?.id!==event.pointerId)return;release(true);refresh();};
+ const blur=()=>{release(true);refresh();};
+ const key=(event:KeyboardEvent)=>{if(event.target!==element||event.altKey||event.ctrlKey||event.metaKey)return;if(event.key==='Escape'&&drag){event.preventDefault();release(true);refresh();return;}const range=current();if(!range.enabled||range.min===range.max)return;const amount=event.shiftKey?coarse:step,delta=vertical?(event.key==='ArrowRight'?direction*amount:event.key==='ArrowLeft'?-direction*amount:null):(event.key==='ArrowDown'?-amount:event.key==='ArrowUp'?amount:null);const next=event.key==='Home'?range.min:event.key==='End'?range.max:delta===null?null:range.value+delta;if(next===null)return;event.preventDefault();const result=apply(next);if(result.changed)options.commit?.(result.desired);};
+ element.style.touchAction='none';element.addEventListener('pointerdown',down);element.addEventListener('pointermove',move);element.addEventListener('pointerup',up);element.addEventListener('pointercancel',cancel);element.addEventListener('lostpointercapture',cancel);element.addEventListener('keydown',key);events?.addEventListener('blur',blur);refresh();
+ return {refresh,dispose(){if(disposed)return;release(true);disposed=true;element.removeEventListener('pointerdown',down);element.removeEventListener('pointermove',move);element.removeEventListener('pointerup',up);element.removeEventListener('pointercancel',cancel);element.removeEventListener('lostpointercapture',cancel);element.removeEventListener('keydown',key);events?.removeEventListener('blur',blur);element.style.touchAction=touchAction;element.tabIndex=tabIndex;for(const [key,value]of saved)if(value===null)element.removeAttribute(key);else element.setAttribute(key,value);}};
+}
+/** Use a native modal dialog for collapsed panels: focus containment/Escape belong to the browser.
+ * The trigger remains outside the collapsed panel; closing returns focus to that trigger. */
+export function bindWorkspaceDrawer(options:{trigger:HTMLButtonElement;drawer:HTMLDialogElement;label:string;close?:HTMLButtonElement}):()=>void {
+ const {trigger,drawer}=options;if(!drawer.id||!options.label)throw new Error('WORKSPACE_DRAWER: named dialog and trigger required');let opened=false;
+ trigger.setAttribute('aria-haspopup','dialog');trigger.setAttribute('aria-controls',drawer.id);trigger.setAttribute('aria-expanded',String(drawer.open));if(!drawer.getAttribute('aria-label')&&!drawer.getAttribute('aria-labelledby'))drawer.setAttribute('aria-label',options.label);
+ const close=()=>{if(drawer.open)drawer.close();closed();};const toggle=()=>{if(drawer.open){close();return;}drawer.showModal();opened=true;trigger.setAttribute('aria-expanded','true');};const closed=()=>{trigger.setAttribute('aria-expanded','false');if(opened){opened=false;trigger.focus({preventScroll:true});}};
+ trigger.addEventListener('click',toggle);drawer.addEventListener('close',closed);options.close?.addEventListener('click',close);
+ return ()=>{if(opened)close();trigger.removeEventListener('click',toggle);drawer.removeEventListener('close',closed);options.close?.removeEventListener('click',close);};
+}
+export const inspectorTabs=['view','rig','playback','feedback'] as const;
+export type InspectorTab=typeof inspectorTabs[number];
+export interface InspectorScrollOffset {x:number;y:number}
+export type InspectorScrollSnapshot=Partial<Record<InspectorTab,InspectorScrollOffset>>;
+export interface ScrollScheduler {request(callback:()=>void):number;cancel(handle:number):void}
+const validTab=(tab:string):tab is InspectorTab=>inspectorTabs.includes(tab as InspectorTab);
+export function parseInspectorScroll(value:unknown):InspectorScrollSnapshot {
+ if(!value||typeof value!=='object'||Array.isArray(value))throw new Error('INSPECTOR_SCROLL: expected tab object');const result:InspectorScrollSnapshot={};
+ for(const [tab,raw]of Object.entries(value)){if(!validTab(tab)||!raw||typeof raw!=='object'||Array.isArray(raw))throw new Error('INSPECTOR_SCROLL: unknown tab or malformed offset');const o=raw as Record<string,unknown>;if(Object.keys(o).some(key=>key!=='x'&&key!=='y')||![o.x,o.y].every(n=>typeof n==='number'&&Number.isFinite(n)&&n>=0&&n<=10000000))throw new Error('INSPECTOR_SCROLL: finite nonnegative x/y <=10000000 required');result[tab]={x:o.x as number,y:o.y as number};}return result;
+}
+const scrollScheduler:ScrollScheduler={request:callback=>typeof requestAnimationFrame==='function'?requestAnimationFrame(callback):Number(setTimeout(callback,0)),cancel:handle=>typeof cancelAnimationFrame==='function'?cancelAnimationFrame(handle):clearTimeout(handle)};
+/** One instance per source draft. Capture BEFORE hiding a tab; restore AFTER activation.
+ * Two frame boundaries settle layout, and later content can explicitly restore again.
+ * Clamping never overwrites the remembered desired offsets with a temporary empty extent.
+ * Programmatic scroll events are ignored through the following frame; explicit user input can capture with true. */
+export class InspectorScrollMemory {
+ private offsets:InspectorScrollSnapshot;private pending=new Map<InspectorTab,number>();private applied=new Map<InspectorTab,InspectorScrollOffset>();private disposed=false;
+ constructor(initial:InspectorScrollSnapshot={},private readonly scheduler:ScrollScheduler=scrollScheduler){this.offsets=parseInspectorScroll(initial);}
+ snapshot():InspectorScrollSnapshot{return parseInspectorScroll(this.offsets);}
+ replace(value:unknown):void {const next=parseInspectorScroll(value);for(const handle of this.pending.values())this.scheduler.cancel(handle);this.pending.clear();this.applied.clear();this.offsets=next;}
+ restoring(tab:InspectorTab):boolean{return this.pending.has(tab);}
+ capture(tab:InspectorTab,panel:Pick<HTMLElement,'scrollLeft'|'scrollTop'>,userInitiated=false):void {if(this.disposed||this.pending.has(tab)&&!userInitiated)return;if(!validTab(tab))throw new Error('INSPECTOR_SCROLL: unknown tab');const offset={x:Math.max(0,panel.scrollLeft),y:Math.max(0,panel.scrollTop)},applied=this.applied.get(tab);if(!userInitiated&&applied&&offset.x===applied.x&&offset.y===applied.y)return;const handle=this.pending.get(tab);if(handle!==undefined)this.scheduler.cancel(handle);this.pending.delete(tab);this.applied.delete(tab);this.offsets={...this.offsets,...parseInspectorScroll({[tab]:offset})};}
+ restore(tab:InspectorTab,panel:Pick<HTMLElement,'scrollLeft'|'scrollTop'|'scrollWidth'|'scrollHeight'|'clientWidth'|'clientHeight'>):()=>void {
+  if(this.disposed)return ()=>{};if(!validTab(tab))throw new Error('INSPECTOR_SCROLL: unknown tab');const previous=this.pending.get(tab);if(previous!==undefined)this.scheduler.cancel(previous);let cancelled=false;
+  let handle=0;const apply=()=>{if(cancelled||this.disposed||this.pending.get(tab)!==handle)return;this.pending.delete(tab);if(![panel.scrollWidth,panel.scrollHeight,panel.clientWidth,panel.clientHeight].every(n=>Number.isFinite(n)&&n>=0))throw new Error('INSPECTOR_SCROLL_LAYOUT: finite nonnegative extents required');const offset=this.offsets[tab]??{x:0,y:0};panel.scrollLeft=clamp(offset.x,0,Math.max(0,panel.scrollWidth-panel.clientWidth));panel.scrollTop=clamp(offset.y,0,Math.max(0,panel.scrollHeight-panel.clientHeight));this.applied.set(tab,{x:panel.scrollLeft,y:panel.scrollTop});handle=this.scheduler.request(()=>{if(this.pending.get(tab)===handle)this.pending.delete(tab);});this.pending.set(tab,handle);};
+  handle=this.scheduler.request(()=>{if(cancelled||this.disposed||this.pending.get(tab)!==handle)return;handle=this.scheduler.request(apply);this.pending.set(tab,handle);});this.pending.set(tab,handle);
+  return ()=>{cancelled=true;this.scheduler.cancel(handle);if(this.pending.get(tab)===handle)this.pending.delete(tab);};
+ }
+ dispose():void {if(this.disposed)return;this.disposed=true;for(const handle of this.pending.values())this.scheduler.cancel(handle);this.pending.clear();this.applied.clear();}
+}

package/web/workspace-preferences.ts

@@ -0,0 +1,95 @@
+/** Browser-owned app defaults. Source inspection, review data and capabilities never belong here. */
+export const workspacePreferenceKey='rig-review-preferences/1';
+export const legacyAppearanceKey='rig-review-appearance/1';
+export type WorkspaceTheme='system'|'dark'|'light';
+export interface WorkspacePanels {leftWidth:number;rightWidth:number;inspectorHeight:number}
+export const panelBounds=Object.freeze({leftWidth:Object.freeze({min:120,max:720}),rightWidth:Object.freeze({min:180,max:900}),inspectorHeight:Object.freeze({min:160,max:900})});
+export const defaultWorkspacePanels:Readonly<WorkspacePanels>=Object.freeze({leftWidth:170,rightWidth:260,inspectorHeight:280});
+type Field='theme'|'defaultCameraSync'|'defaultIdleRepeat'|keyof WorkspacePanels;
+const fields:readonly Field[]=['theme','defaultCameraSync','defaultIdleRepeat','leftWidth','rightWidth','inspectorHeight'];
+interface FieldStamp {revision:number;writer:string}
+export interface WorkspacePreferences {schema:'rig-review-preferences/1';revision:number;theme:WorkspaceTheme;defaultCameraSync:boolean;defaultIdleRepeat:boolean;panels:WorkspacePanels;stamps:Record<Field,FieldStamp>}
+export interface WorkspacePreferencePatch {theme?:WorkspaceTheme;defaultCameraSync?:boolean;defaultIdleRepeat?:boolean;panels?:Partial<WorkspacePanels>}
+export interface PreferenceStorage {getItem(key:string):string|null;setItem(key:string,value:string):void}
+export interface PreferenceStatus {state:'available'|'memory-only'|'corrupt';detail:string}
+export interface PreferenceEventSource {addEventListener(type:string,listener:EventListener):void;removeEventListener(type:string,listener:EventListener):void}
+export interface WorkspacePreferenceOptions {storage?:PreferenceStorage|null;events?:PreferenceEventSource|null;writer?:string;onStatus?:(status:PreferenceStatus)=>void}
+const object=(v:unknown,label:string):Record<string,unknown>=>{if(!v||typeof v!=='object'||Array.isArray(v))throw new Error(`${label}: expected object`);return v as Record<string,unknown>;};
+const closed=(v:Record<string,unknown>,allowed:readonly string[],label:string)=>{for(const key of Object.keys(v))if(!allowed.includes(key))throw new Error(`${label}.${key}: unknown field`);};
+const theme=(v:unknown):WorkspaceTheme=>{if(v!=='system'&&v!=='dark'&&v!=='light')throw new Error('PREFERENCES_THEME: expected system, dark or light');return v;};
+const boolean=(v:unknown,label:string):boolean=>{if(typeof v!=='boolean')throw new Error(`${label}: expected boolean`);return v;};
+const panel=(v:unknown,key:keyof WorkspacePanels):number=>{const {min,max}=panelBounds[key];if(typeof v!=='number'||!Number.isFinite(v)||v<min||v>max)throw new Error(`PREFERENCES_PANEL: ${key} requires finite ${min}..${max} CSS pixels`);return v;};
+export function parseWorkspacePanels(value:unknown):WorkspacePanels {const o=object(value,'panels');closed(o,Object.keys(panelBounds),'panels');return {leftWidth:panel(o.leftWidth,'leftWidth'),rightWidth:panel(o.rightWidth,'rightWidth'),inspectorHeight:panel(o.inspectorHeight,'inspectorHeight')};}
+export function defaultWorkspacePreferences():WorkspacePreferences {return {schema:workspacePreferenceKey,revision:0,theme:'system',defaultCameraSync:true,defaultIdleRepeat:true,panels:{...defaultWorkspacePanels},stamps:Object.fromEntries(fields.map(field=>[field,{revision:0,writer:''}])) as Record<Field,FieldStamp>};}
+const clone=(v:WorkspacePreferences):WorkspacePreferences=>({...v,panels:{...v.panels},stamps:Object.fromEntries(fields.map(field=>[field,{...v.stamps[field]}])) as Record<Field,FieldStamp>});
+function leaf(value:WorkspacePreferences,field:Field):WorkspaceTheme|boolean|number {return field in panelBounds?value.panels[field as keyof WorkspacePanels]:value[field as 'theme'|'defaultCameraSync'|'defaultIdleRepeat'];}
+function put(value:WorkspacePreferences,field:Field,v:WorkspaceTheme|boolean|number):void {if(field==='theme')value.theme=theme(v);else if(field==='defaultCameraSync'||field==='defaultIdleRepeat')value[field]=boolean(v,field);else value.panels[field]=panel(v,field);}
+export function parseWorkspacePreferences(value:unknown):WorkspacePreferences {
+ const o=object(value,'preferences');closed(o,['schema','revision','theme','defaultCameraSync','defaultIdleRepeat','panels','stamps'],'preferences');if(o.schema!==workspacePreferenceKey)throw new Error('PREFERENCES_VERSION: unsupported schema');
+ const result=defaultWorkspacePreferences();result.theme=theme(o.theme);result.defaultCameraSync=boolean(o.defaultCameraSync,'defaultCameraSync');result.defaultIdleRepeat=boolean(o.defaultIdleRepeat,'defaultIdleRepeat');result.panels=parseWorkspacePanels(o.panels);
+ const stamps=object(o.stamps,'stamps');closed(stamps,fields,'stamps');
+ for(const field of fields){const stamp=object(stamps[field],`stamps.${field}`);closed(stamp,['revision','writer'],`stamps.${field}`);if(typeof stamp.revision!=='number'||!Number.isSafeInteger(stamp.revision)||stamp.revision<0||typeof stamp.writer!=='string'||!(/^[A-Za-z0-9_-]{1,80}$/.test(stamp.writer)||stamp.revision===0&&stamp.writer===''))throw new Error(`PREFERENCES_STAMP: invalid ${field} revision/writer`);if(stamp.revision===0&&(stamp.writer!==''||leaf(result,field)!==leaf(defaultWorkspacePreferences(),field)))throw new Error(`PREFERENCES_STAMP: unstamped ${field} differs from defaults`);result.stamps[field]={revision:stamp.revision,writer:stamp.writer};}
+ const revision=Math.max(...fields.map(field=>result.stamps[field].revision));if(o.revision!==revision)throw new Error('PREFERENCES_REVISION: record revision must equal maximum field revision');result.revision=revision;return result;
+}
+function parseText(raw:string):WorkspacePreferences {if(raw.length>8192)throw new Error('PREFERENCES_SIZE: record exceeds 8192 characters');return parseWorkspacePreferences(JSON.parse(raw));}
+function patches(value:unknown):Map<Field,WorkspaceTheme|boolean|number> {
+ const o=object(value,'preference patch');closed(o,['theme','defaultCameraSync','defaultIdleRepeat','panels'],'preference patch');const patch=new Map<Field,WorkspaceTheme|boolean|number>();
+ if('theme'in o)patch.set('theme',theme(o.theme));for(const field of ['defaultCameraSync','defaultIdleRepeat'] as const)if(field in o)patch.set(field,boolean(o[field],field));
+ if('panels'in o){const p=object(o.panels,'panel patch');closed(p,Object.keys(panelBounds),'panel patch');for(const key of Object.keys(p) as (keyof WorkspacePanels)[])patch.set(key,panel(p[key],key));}return patch;
+}
+/** Per-field Lamport stamps converge even when independent tabs wrote stale whole records.
+ * Equal-field concurrent writes use revision then writer ordering, never wall-clock time. */
+export function mergeWorkspacePreferences(...records:WorkspacePreferences[]):WorkspacePreferences {
+ const result=defaultWorkspacePreferences();
+ for(const raw of records){const value=parseWorkspacePreferences(raw);for(const field of fields){const a=result.stamps[field],b=value.stamps[field],order=b.revision-a.revision|| (b.writer<a.writer?-1:b.writer>a.writer?1:0);if(order>0){put(result,field,leaf(value,field));result.stamps[field]={...b};}else if(order===0&&leaf(result,field)!==leaf(value,field))throw new Error(`PREFERENCES_STAMP_CONFLICT: ${field} has two values at one stamp`);}}
+ result.revision=Math.max(...fields.map(field=>result.stamps[field].revision));return result;
+}
+let fallbackWriter=0;
+export class WorkspacePreferenceStore {
+ private value=defaultWorkspacePreferences();private persistence:PreferenceStatus={state:'available',detail:'Browser preferences use defaults.'};private readonly storage:PreferenceStorage|null;private readonly events:PreferenceEventSource|null;private readonly writer:string;private listeners=new Set<(value:WorkspacePreferences)=>void>();private conflicts=new Set<Field>();private closed=false;
+ constructor(private readonly options:WorkspacePreferenceOptions={}){
+  this.writer=options.writer??(globalThis.crypto?.randomUUID?.()??`local-${Date.now().toString(36)}-${++fallbackWriter}`);if(!/^[A-Za-z0-9_-]{1,80}$/.test(this.writer))throw new Error('PREFERENCES_WRITER: invalid tab writer');
+  let storage=options.storage??null;if(options.storage===undefined){try{storage=globalThis.localStorage;}catch{this.statusTo('memory-only','Browser storage access was denied; preferences remain usable in this page.');}}this.storage=storage;this.events=options.events===undefined?(typeof window==='undefined'?null:window):options.events;
+  const loaded=this.read();if(loaded.kind==='valid'){this.value=loaded.value;this.statusTo('available','Saved browser preferences loaded.');}else if(loaded.kind==='absent')this.migrateAppearance();this.events?.addEventListener('storage',this.storageEvent);
+ }
+ get():WorkspacePreferences{return clone(this.value);}
+ status():PreferenceStatus{return {...this.persistence};}
+ subscribe(listener:(value:WorkspacePreferences)=>void):()=>void {this.listeners.add(listener);return ()=>this.listeners.delete(listener);}
+ update(patch:WorkspacePreferencePatch):WorkspacePreferences {
+  if(this.closed)throw new Error('PREFERENCES_DISPOSED');const changes=patches(patch);if(!changes.size)return this.get();const loaded=this.read();if(loaded.kind==='valid')this.reconcile(loaded.value);const next=clone(this.value);
+  if(next.revision===Number.MAX_SAFE_INTEGER)throw new Error('PREFERENCES_REVISION_EXHAUSTED');const revision=next.revision+1;for(const [field,v]of changes)put(next,field,v);for(const field of new Set([...changes.keys(),...this.conflicts]))next.stamps[field]={revision,writer:this.writer};next.revision=revision;this.conflicts.clear();this.value=next;this.persist();this.notify();return this.get();
+ }
+ resetLayout():WorkspacePreferences{return this.update({panels:{...defaultWorkspacePanels}});}
+ /** Reconcile after resuming a suspended tab as well as on storage events. */
+ refresh():WorkspacePreferences {if(this.closed)return this.get();const loaded=this.read();if(loaded.kind==='valid'){this.reconcile(loaded.value);if(!this.conflicts.size)this.persist();this.notify();}return this.get();}
+ dispose():void {if(this.closed)return;this.closed=true;this.events?.removeEventListener('storage',this.storageEvent);this.listeners.clear();}
+ private statusTo(state:PreferenceStatus['state'],detail:string){this.persistence={state,detail};this.options.onStatus?.(this.status());}
+ /** Quarantine only equal-stamp conflicting leaves; retain every independent valid update.
+  * An explicit edit gives quarantined known values a new stamp before repairing storage. */
+ private reconcile(...records:WorkspacePreferences[]):void {
+  const next=clone(this.value);
+  for(const value of records)for(const field of fields){const a=next.stamps[field],b=value.stamps[field],order=b.revision-a.revision||(b.writer<a.writer?-1:b.writer>a.writer?1:0);if(order>0){put(next,field,leaf(value,field));next.stamps[field]={...b};this.conflicts.delete(field);}else if(order===0&&leaf(next,field)!==leaf(value,field))this.conflicts.add(field);}
+  next.revision=Math.max(...fields.map(field=>next.stamps[field].revision));this.value=next;if(this.conflicts.size)this.statusTo('corrupt',`Browser preference fields were refused because their stamps conflict: ${[...this.conflicts].join(', ')}. Known values remain usable; an explicit edit repairs them.`);
+ }
+ private read():{kind:'valid';value:WorkspacePreferences}|{kind:'absent'|'denied'|'corrupt'} {
+  if(!this.storage){this.statusTo('memory-only','Browser storage is unavailable; preferences remain usable in this page.');return {kind:'denied'};}
+  let raw:string|null;try{raw=this.storage.getItem(workspacePreferenceKey);}catch{this.statusTo('memory-only','Browser storage read was denied; preferences remain usable in this page.');return {kind:'denied'};}
+  if(raw===null)return {kind:'absent'};try{return {kind:'valid',value:parseText(raw)};}catch(error){this.statusTo('corrupt',`Saved browser preferences were refused: ${error instanceof Error?error.message:String(error)}. Current page defaults remain usable.`);return {kind:'corrupt'};}
+ }
+ private persist():void {
+  if(!this.storage)return;const latest=this.read();if(latest.kind==='valid')this.reconcile(latest.value);if(this.conflicts.size)return;
+  const text=JSON.stringify(this.value);if(latest.kind==='valid'&&JSON.stringify(latest.value)===text){this.statusTo('available','Browser preferences are current.');return;}
+  try{this.storage.setItem(workspacePreferenceKey,text);this.statusTo('available','Browser preferences saved.');}catch{this.statusTo('memory-only','Browser storage write was denied; changed preferences remain usable in this page.');}
+ }
+ private migrateAppearance():void {
+  if(!this.storage)return;let raw:string|null;try{raw=this.storage.getItem(legacyAppearanceKey);}catch{this.statusTo('memory-only','Legacy appearance storage read was denied; defaults remain usable.');return;}if(raw===null)return;
+  if(raw!=='system'&&raw!=='dark'&&raw!=='light'){this.statusTo('corrupt','Legacy appearance value was refused; defaults remain usable.');return;}
+  this.value.theme=raw;this.value.stamps.theme={revision:1,writer:this.writer};this.value.revision=1;this.persist();
+ }
+ private storageEvent:EventListener=(event)=>{
+  if(this.closed)return;const e=event as StorageEvent;if(e.key!==workspacePreferenceKey&&e.key!==null||e.storageArea&&e.storageArea!==this.storage)return;const latest=this.read();
+  if(latest.kind==='absent'){this.value=defaultWorkspacePreferences();this.conflicts.clear();this.statusTo('available','Browser preferences were cleared; defaults remain usable.');this.notify();return;}
+  try{const incoming=e.newValue===null||e.key===null?null:parseText(e.newValue);this.reconcile(...(incoming?[incoming]:[]),...(latest.kind==='valid'?[latest.value]:[]));if(latest.kind!=='corrupt'&&!this.conflicts.size)this.persist();this.notify();}catch(error){this.statusTo('corrupt',`Browser preference update was refused: ${error instanceof Error?error.message:String(error)}.`);}
+ };
+ private notify(){for(const listener of this.listeners)listener(this.get());}
+}

package/web/workspace-ui.ts

@@ -0,0 +1,91 @@
+/** Browser workspace presentation. Source selection, player clocks and review decisions stay with the page. */
+import {WorkspacePreferenceStore,panelBounds,type WorkspacePanels,type WorkspacePreferences,type WorkspaceTheme} from './workspace-preferences.ts';
+import {allocateWorkspaceLayout,bindWorkspaceSeparator,bindWorkspaceDrawer,InspectorScrollMemory,inspectorTabs,type InspectorTab,type WorkspacePanel,type SeparatorRange} from './workspace-layout.ts';
+
+/** Reachable effective bounds, accounting for the other panel's saved desired size. */
+export function workspaceResizeRange(available:{width:number;height:number},desired:WorkspacePanels,panel:WorkspacePanel):SeparatorRange {
+ const base=allocateWorkspaceLayout(available,desired),range=base.separators[panel];if(!range.enabled)return range;
+ const low=allocateWorkspaceLayout(available,{...desired,[panel]:panelBounds[panel].min})[panel],high=allocateWorkspaceLayout(available,{...desired,[panel]:panelBounds[panel].max})[panel];
+ return {min:low,max:high,value:base[panel],enabled:high>low};
+}
+/** Invert the allocator instead of storing an already-clamped pixel value as a desktop desire. */
+export function workspaceResizeTarget(available:{width:number;height:number},desired:WorkspacePanels,panel:WorkspacePanel,target:number):number {
+ const range=workspaceResizeRange(available,desired,panel);if(!range.enabled)return desired[panel];
+ if(target<=range.min)return panelBounds[panel].min;if(target>=range.max)return panelBounds[panel].max;
+ let low:number=panelBounds[panel].min,high:number=panelBounds[panel].max;
+ for(let i=0;i<48;i++){const mid=(low+high)/2,value=allocateWorkspaceLayout(available,{...desired,[panel]:mid})[panel];if(value<target)low=mid;else high=mid;}
+ return (low+high)/2;
+}
+export interface WorkspaceUI {
+ defaults:()=>WorkspacePreferences;beforeTab:()=>void;afterTab:()=>void;scroll:()=>string;restoreScroll:(value:unknown)=>void;
+ revealInspector:()=>void;refresh:()=>void;dispose:()=>void;
+}
+export function bindWorkspaceUI(options:{changed:()=>void;defaultTheme:(theme:WorkspaceTheme)=>void}):WorkspaceUI {
+ const require=<T extends HTMLElement=HTMLElement>(id:string)=>{const node=document.getElementById(id);if(!node)throw new Error('Missing workspace element: '+id);return node as T;};
+ const layout=document.querySelector<HTMLElement>('.layout')!,main=layout.querySelector<HTMLElement>('main')!,stage=require('stage-layout'),inspector=document.querySelector<HTMLElement>('.inspector')!,right=require('parts-explorer');
+ layout.classList.add('workspace-layout');
+ let left=layout.querySelector<HTMLElement>('.left-panel');if(!left){left=document.createElement('aside');left.className='left-panel';left.innerHTML='<h2>INPUTS</h2><p class="hint">A and B retain their fixed source bindings. The reference video and shared animation are named above the stage.</p>';layout.prepend(left);}left.id='workspace-left';inspector.id='workspace-inspector';
+ const sourceList=document.createElement('div');sourceList.className='workspace-sources';sourceList.append(...left.childNodes);left.append(sourceList);
+ const settings=document.createElement('section');settings.className='workspace-settings';settings.setAttribute('aria-label','Settings');
+ settings.innerHTML='<h2>Settings</h2><label>Theme <select id="settings-theme" data-app-preference><option value="system">System</option><option value="dark">Dark</option><option value="light">Light</option></select></label><label><input id="settings-sync" data-app-preference type="checkbox">Sync cameras by default</label><label><input id="settings-idle" data-app-preference type="checkbox">Repeat idle by default</label><button id="settings-reset" type="button">Reset layout</button><p class="hint">Defaults apply to new inspections. Links and source drafts retain their explicit view.</p><p id="settings-state" class="hint" role="status"></p>';
+ left.append(settings);
+ const theme=require<HTMLSelectElement>('settings-theme'),sync=require<HTMLInputElement>('settings-sync'),idle=require<HTMLInputElement>('settings-idle'),status=require('settings-state');
+ const store=new WorkspacePreferenceStore({onStatus:value=>{status.textContent=value.detail;}});let desired={...store.get().panels};
+ const stack=document.createElement('div');stack.className='workspace-stage-stack';for(const child of [...main.children])if(child!==inspector)stack.append(child);main.prepend(stack);
+ const triggers=document.createElement('div');triggers.className='workspace-drawer-triggers';triggers.setAttribute('aria-label','Workspace panels');stack.prepend(triggers);
+ const panels:Record<WorkspacePanel,HTMLElement>={leftWidth:left,rightWidth:right,inspectorHeight:inspector};
+ const labels:Record<WorkspacePanel,string>={leftWidth:'Sources and settings',rightWidth:'Parts explorer',inspectorHeight:'Inspector'};
+ const handles={} as Record<WorkspacePanel,HTMLElement>,dialogs={} as Record<WorkspacePanel,HTMLDialogElement>,buttons={} as Record<WorkspacePanel,HTMLButtonElement>,disposers:(()=>void)[]=[];
+ for(const panel of Object.keys(panels) as WorkspacePanel[]){
+  const handle=document.createElement('div');handle.className='workspace-separator workspace-'+panel;handles[panel]=handle;
+  if(panel==='leftWidth')left.after(handle);else if(panel==='rightWidth')right.before(handle);else inspector.before(handle);
+  const trigger=document.createElement('button');trigger.type='button';trigger.textContent=labels[panel];trigger.hidden=true;triggers.append(trigger);buttons[panel]=trigger;
+  const dialog=document.createElement('dialog');dialog.className='workspace-drawer';dialog.id='workspace-drawer-'+panel;dialog.dataset.panel=panel;const close=document.createElement('button');close.type='button';close.textContent='Close '+labels[panel];close.className='workspace-drawer-close';dialog.append(close);document.body.append(dialog);dialogs[panel]=dialog;
+  disposers.push(bindWorkspaceDrawer({trigger,drawer:dialog,label:labels[panel],close}));
+ }
+ const memory=new InspectorScrollMemory();const active=():InspectorTab=>(document.querySelector<HTMLElement>('[data-inspector][aria-selected=true]')?.dataset.inspector as InspectorTab)??'view';
+ let disposed=false,frame=0,applying=false,available={width:0,height:0},effective=allocateWorkspaceLayout(available,desired);
+ const panelFor=(tab:InspectorTab)=>require('inspector-'+tab);
+ const capture=()=>{const tab=active(),panel=panelFor(tab),saved=memory.snapshot()[tab];if(!panel.hidden&&(!saved||saved.x<=Math.max(0,panel.scrollWidth-panel.clientWidth)&&saved.y<=Math.max(0,panel.scrollHeight-panel.clientHeight)))memory.capture(tab,panel);};
+ const restore=()=>{if(!disposed)memory.restore(active(),panelFor(active()));};
+ const schedule=()=>{if(!disposed&&!frame)frame=requestAnimationFrame(()=>{frame=0;apply();});};
+ const dock=(panel:WorkspacePanel,drawer:boolean)=>{
+  const node=panels[panel],dialog=dialogs[panel],trigger=buttons[panel];trigger.hidden=!drawer;handles[panel].hidden=drawer;
+  if(drawer&&node.parentElement!==dialog){const focus=node.contains(document.activeElement);dialog.append(node);if(focus)trigger.focus({preventScroll:true});}
+  if(!drawer&&node.parentElement===dialog){const focused=node.contains(document.activeElement)||document.activeElement===trigger;if(dialog.open)dialog.close();trigger.setAttribute('aria-expanded','false');if(panel==='leftWidth')layout.prepend(node);else if(panel==='rightWidth')layout.append(node);else main.append(node);if(focused){node.tabIndex=-1;node.focus({preventScroll:true});}}
+ };
+ const bindings=(Object.keys(panels) as WorkspacePanel[]).map(panel=>bindWorkspaceSeparator({element:handles[panel],panel,controls:panels[panel].id,label:'Resize '+labels[panel],range:()=>workspaceResizeRange(available,desired,panel),resolveDesired:value=>workspaceResizeTarget(available,desired,panel,value),desired:()=>desired[panel],resize:value=>{desired={...desired,[panel]:value};apply();},commit:value=>store.update({panels:{[panel]:value}})}));
+ function apply():void {
+  if(disposed||applying)return;applying=true;
+  try{
+   // Chrome shares the center width. It is not charged against the actual stage minimum.
+   const chrome=[...stack.children].filter(node=>node!==stage&&!((node as HTMLElement).hidden)).reduce((sum,node)=>sum+(node as HTMLElement).getBoundingClientRect().height,0);
+   available={width:Math.max(0,layout.clientWidth),height:Math.max(0,layout.clientHeight-chrome)};effective=allocateWorkspaceLayout(available,desired);
+   for(const panel of Object.keys(panels) as WorkspacePanel[])dock(panel,effective[panel==='leftWidth'?'leftMode':panel==='rightWidth'?'rightMode':'inspectorMode']==='drawer');
+   layout.style.setProperty('--workspace-columns',`${effective.leftWidth}px ${effective.leftMode==='panel'?8:0}px minmax(0,1fr) ${effective.rightMode==='panel'?8:0}px ${effective.rightWidth}px`);
+   main.style.gridTemplateRows=`minmax(0,1fr) ${effective.inspectorMode==='panel'?8:0}px ${effective.inspectorHeight}px`;
+   layout.dataset.stageMinimum=String(effective.stageMinimumSatisfied);for(const binding of bindings)binding.refresh();options.changed();restore();
+  }finally{applying=false;}
+ }
+ const renderSettings=()=>{const value=store.get();theme.value=value.theme;sync.checked=value.defaultCameraSync;idle.checked=value.defaultIdleRepeat;status.textContent=store.status().detail;};
+ theme.onchange=()=>{store.update({theme:theme.value as WorkspaceTheme});options.defaultTheme(store.get().theme);};sync.onchange=()=>{store.update({defaultCameraSync:sync.checked});};idle.onchange=()=>{store.update({defaultIdleRepeat:idle.checked});};require<HTMLButtonElement>('settings-reset').onclick=()=>store.resetLayout();
+ const unsubscribe=store.subscribe(value=>{desired={...value.panels};renderSettings();schedule();});renderSettings();
+ for(const tab of inspectorTabs){
+  const panel=panelFor(tab);let user=false,timer:ReturnType<typeof setTimeout>|undefined;
+  const intent=()=>{user=true;if(timer)clearTimeout(timer);timer=setTimeout(()=>{user=false;},600);};const scrolled=()=>{
+   if(!user)return;const saved=memory.snapshot()[tab]??{x:0,y:0};
+   const expected={x:Math.min(saved.x,Math.max(0,panel.scrollWidth-panel.clientWidth)),y:Math.min(saved.y,Math.max(0,panel.scrollHeight-panel.clientHeight))};
+   // Scroll steps precede animation frames. An actual new user offset may cancel
+   // a queued restore; the restore's own expected clamp must retain its desire.
+   if(panel.scrollLeft!==expected.x||panel.scrollTop!==expected.y)memory.capture(tab,panel,true);
+  };
+  for(const type of ['wheel','pointerdown','touchstart','keydown'])panel.addEventListener(type,intent,{passive:true});panel.addEventListener('scroll',scrolled,{passive:true});
+  let extent='';const content=new MutationObserver(()=>{const next=`${panel.scrollWidth}:${panel.scrollHeight}:${panel.clientWidth}:${panel.clientHeight}`;if(next!==extent){extent=next;if(tab===active())restore();}});content.observe(panel,{childList:true,subtree:true});
+  disposers.push(()=>{if(timer)clearTimeout(timer);for(const type of ['wheel','pointerdown','touchstart','keydown'])panel.removeEventListener(type,intent);panel.removeEventListener('scroll',scrolled);content.disconnect();});
+ }
+ const observer=new ResizeObserver(schedule);observer.observe(layout);for(const node of [...stack.children])if(node!==stage)observer.observe(node);for(const tab of inspectorTabs)observer.observe(panelFor(tab));
+ const resumed=()=>{if(!document.hidden)store.refresh();};document.addEventListener('visibilitychange',resumed);schedule();
+ return {defaults:()=>store.get(),beforeTab:capture,afterTab:restore,scroll:()=>{capture();return JSON.stringify(memory.snapshot());},restoreScroll(value){if(typeof value!=='string')return;memory.replace(JSON.parse(value));restore();},revealInspector(){if(effective.inspectorMode==='drawer'&&!dialogs.inspectorHeight.open){for(const dialog of Object.values(dialogs))if(dialog.open)dialog.close();buttons.inspectorHeight.click();}},refresh:schedule,
+  dispose(){if(disposed)return;capture();disposed=true;if(frame)cancelAnimationFrame(frame);observer.disconnect();document.removeEventListener('visibilitychange',resumed);unsubscribe();for(const binding of bindings)binding.dispose();for(const dispose of disposers)dispose();memory.dispose();store.dispose();}
+ };
+}