@symbo.ls/sync 3.14.700 → 3.14.702

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @symbo.ls/sync
 
+## 3.14.702
+
+### Patch Changes
+
+- Seed the raw design system at BOOT rather than only in the socket's `onSnapshot`, so every livesync/HMR push re-paints correctly without a manual reload (RUNTIME-LIVESYNC-STYLE-LOSS-1).
+
+  `onOps` re-inits the design system from `ctx.__rawDesignSystem`. That copy was seeded only in `onSnapshot`, so transports that echo a boot snapshot were covered while the dev-server runner — which emits ops and never a snapshot — was not. `buildReinitDesignSystem` then returned null and `onOps` fell back to `init(ctx.designSystem)`, re-feeding scratch's PROCESSED config through the token transformers: alpha was stripped (`--color-transparent` rgba(0,0,0,0) → rgba(0,0,0,1)) and new tokens never reached the sheet.
+
+  `seedRawDesignSystem` is now called in `createDomql.js` immediately before `prepareDesignSystem` — shared libraries merged, scratch processing not yet run — and re-exported from `@symbo.ls/sync`. brender's sync stub gains the same export.
+
+  `@symbo.ls/utils` is republished because its shipped dist was missing `isPolyglotWritableKey`, which exists at `packages/utils/state.js:261` and is imported by `@symbo.ls/element` and `smbls/src/prepare.js`. The published 3.14.769 tarball lacks it, so any consumer importing that symbol from the package root fails at import time.
+
+- Updated dependencies
+  - @symbo.ls/utils@3.14.770
+
 ## 3.14.700
 
 ### Patch Changes

package/dist/cjs/handlers.js

@@ -1 +1 @@
-var h=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var A=(t,i)=>{for(var s in i)h(t,s,{get:i[s],enumerable:!0})},S=(t,i,s,a)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of g(i))!u.call(t,e)&&e!==s&&h(t,e,{get:()=>i[e],enumerable:!(a=y(i,e))||a.enumerable});return t};var w=t=>S(h({},"__esModule",{value:!0}),t);var D={};A(D,{onOps:()=>b,onSnapshot:()=>O});module.exports=w(D);var m=require("smbls"),c=require("@symbo.ls/utils"),f=require("./applier.js");const O=(t,i,s)=>{let a=!1;return(e={})=>{let{data:n}=e;const{schema:l}=e;n&&(n=t.call("deepDestringifyFunctions",n,Array.isArray(n)?[]:{}),Object.entries(n).forEach(([o,r])=>{if(s[o]&&typeof s[o]=="object")if(o==="designSystem"){if((0,f.seedRawDesignSystem)(s,r),a){const p=(0,f.buildReinitDesignSystem)(s);p&&(0,m.init)(p)}}else(0,c.overwriteShallow)(s[o],r);else s[o]=r}),a=!0,l&&(s.schema=l))}},b=(t,i,s)=>(a={})=>{let{changes:e}=a;if(!e||!Array.isArray(e)||!e.length)return;e=t.call("deepDestringifyFunctions",e,Array.isArray(e)?[]:{});const n=e.filter(r=>Array.isArray(r)&&Array.isArray(r[1])&&r[1][0]==="designSystem"),l=n.length?e.filter(r=>!n.includes(r)):e,o=(0,f.applyOpsToCtx)(s,l);if(n.length&&o.add("designSystem"),o.has("state")&&i.update(s.state),["pages","components","snippets","functions","assets"].some(r=>o.has(r))){const{pathname:r,search:p,hash:d}=s.window.location;t.call("router",r+p+d,t.__ref.root,{},{scrollToTop:!1})}if(o.has("designSystem")){const r=(0,f.buildReinitDesignSystem)(s,n);(0,m.init)(r||s.designSystem)}};
+var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var A=(t,i)=>{for(var s in i)c(t,s,{get:i[s],enumerable:!0})},S=(t,i,s,a)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of g(i))!u.call(t,e)&&e!==s&&c(t,e,{get:()=>i[e],enumerable:!(a=y(i,e))||a.enumerable});return t};var w=t=>S(c({},"__esModule",{value:!0}),t);var D={};A(D,{onOps:()=>b,onSnapshot:()=>O});module.exports=w(D);var h=require("smbls"),m=require("@symbo.ls/utils"),f=require("./applier.js");const O=(t,i,s)=>{let a=!1;return(e={})=>{let{data:n}=e;const{schema:l}=e;n&&(n=t.call("deepDestringifyFunctions",n,Array.isArray(n)?[]:{}),Object.entries(n).forEach(([o,r])=>{if(s[o]&&typeof s[o]=="object")if(o==="designSystem"){if((0,f.seedRawDesignSystem)(s,r),a){const p=(0,f.buildReinitDesignSystem)(s);p&&(0,h.init)(p)}}else(0,m.overwriteShallow)(s[o],r);else s[o]=r}),a=!0,l&&(s.schema=l))}},b=(t,i,s)=>(a={})=>{let{changes:e}=a;if(!e||!Array.isArray(e)||!e.length)return;e=t.call("deepDestringifyFunctions",e,Array.isArray(e)?[]:{});const n=e.filter(r=>Array.isArray(r)&&Array.isArray(r[1])&&r[1][0]==="designSystem"),l=n.length?e.filter(r=>!n.includes(r)):e,o=(0,f.applyOpsToCtx)(s,l);if(n.length&&o.add("designSystem"),o.has("designSystem")){const r=(0,f.buildReinitDesignSystem)(s,n);(0,h.init)(r||s.designSystem)}if(o.has("state")&&i.update(s.state),["pages","components","snippets","functions","assets"].some(r=>o.has(r))){const{pathname:r,search:p,hash:d}=s.window.location;t.call("router",r+p+d,t.__ref.root,{},{scrollToTop:!1,force:!0})}};

package/dist/cjs/index.js

@@ -1 +1 @@
-var d=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var T=(e,n)=>{for(var o in n)d(e,o,{get:n[o],enumerable:!0})},E=(e,n,o,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of g(n))!U.call(e,r)&&r!==o&&d(e,r,{get:()=>n[r],enumerable:!(t=w(n,r))||t.enumerable});return e};var A=e=>E(d({},"__esModule",{value:!0}),e);var R={};T(R,{DefaultSyncApp:()=>O,FORBIDDEN_SEGMENTS:()=>s.FORBIDDEN_SEGMENTS,Notifications:()=>c.Notifications,SyncComponent:()=>u,applyOpsToCtx:()=>s.applyOpsToCtx,connectToSocket:()=>v,deletePath:()=>s.deletePath,isSafePath:()=>s.isSafePath,notificationsPlugin:()=>M,onOps:()=>i.onOps,onSnapshot:()=>i.onSnapshot,setPath:()=>s.setPath,syncPlugin:()=>B});module.exports=A(R);var G=require("@symbo.ls/router"),f=require("socket.io-client"),l=require("@symbo.ls/utils"),s=require("./applier.js"),i=require("./handlers.js"),c=require("./SyncNotifications.js");const C=!1,D=()=>C?"http://localhost:8080":"https://api.symbols.app",I=e=>{const n=e&&e.editor&&e.editor.socketUrl||e&&e.settings&&e.settings.socketUrl;return typeof n=="string"&&n?{mode:"collab",baseUrl:n}:e&&e.editor&&e.editor.runtime==="runner"?{mode:"runner",baseUrl:null}:{mode:null,baseUrl:null}},j=async e=>{try{const n=e||D(),o=await l.window.fetch(`${n}/service-token`,{method:"GET"});let t;try{const r=await o.clone().json();if(r&&typeof r.token=="string")return r.token.trim();t=await o.text()}catch{t=await o.text()}return(t||"").replace(/\s+/gu,"")||void 0}catch(n){console.error("[sync] Failed to fetch service-token",n)}},y=(e,n,o,t)=>{e.on("snapshot",(0,i.onSnapshot)(n,o,t)),e.on("ops",(0,i.onOps)(n,o,t)),e.on("clients",r=>{t.editor?.verbose&&(0,c.connectedToSymbols)(r,n,o)}),e.on("disconnect",r=>{t.editor?.verbose&&console.info("[sync] disconnected",r)})},N=async(e,n,o,t)=>{const r=await j(t);if(!r)return console.warn("[sync] no service token \u2014 collab disabled"),null;const p=o.key;if(!p)return console.warn("[sync] ctx.key missing \u2014 collab cannot authenticate"),null;const S=o.editor?.projectId||null,a=(0,f.io)(t,{path:"/collab-socket",transports:["websocket"],auth:{token:r,projectId:S,projectKey:p,branch:"main",live:!0,clientType:"platform"},reconnectionAttempts:1/0,reconnectionDelayMax:4e3});return a.on("connect",()=>{o.editor?.verbose&&console.info("[sync] connected (collab)")}),y(a,e,n,o),a},P=(e,n,o)=>{const t=(0,f.io)({transports:["websocket","polling"],reconnectionAttempts:1/0,reconnectionDelayMax:4e3});return t.on("connect",()=>{o.editor?.verbose!==!1&&console.info("[sync] connected (runner)")}),y(t,e,n,o),t.on("reload",()=>{typeof l.window<"u"&&l.window.location&&l.window.location.reload()}),t},v=async(e,n,o)=>{const{mode:t,baseUrl:r}=I(o);return t?t==="collab"?N(e,n,o,r):t==="runner"?P(e,n,o):null:null},u={onInit:v},O={extends:[u,c.Notifications]},m=e=>typeof e>"u",b=e=>!!(e?.editor?.socketUrl||e?.settings?.socketUrl),h=e=>e?.editor?.runtime==="runner",k=(e,n)=>{Array.isArray(e.extends)?e.extends.push(n):e.extends?e.extends=[e.extends,n]:e.extends=[n]},B={name:"sync",beforeCreate(e,n){const o=n&&n.editor;(o&&!m(o.liveSync)?o.liveSync:b(n)||h(n))&&(b(n)&&!h(n)&&!n?.key||k(e,u))}},M={name:"notifications",beforeCreate(e,n){if(!n)return;const o=m(n.notifications)?null:n.notifications,t=n.editor&&n.editor.verbose===!0;(o===!0||o!==!1&&t)&&k(e,c.Notifications)}};
+var d=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var T=(e,n)=>{for(var o in n)d(e,o,{get:n[o],enumerable:!0})},D=(e,n,o,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of g(n))!U.call(e,r)&&r!==o&&d(e,r,{get:()=>n[r],enumerable:!(t=w(n,r))||t.enumerable});return e};var E=e=>D(d({},"__esModule",{value:!0}),e);var M={};T(M,{DefaultSyncApp:()=>O,FORBIDDEN_SEGMENTS:()=>s.FORBIDDEN_SEGMENTS,Notifications:()=>c.Notifications,SyncComponent:()=>u,applyOpsToCtx:()=>s.applyOpsToCtx,connectToSocket:()=>v,deletePath:()=>s.deletePath,isSafePath:()=>s.isSafePath,notificationsPlugin:()=>B,onOps:()=>i.onOps,onSnapshot:()=>i.onSnapshot,seedRawDesignSystem:()=>s.seedRawDesignSystem,setPath:()=>s.setPath,syncPlugin:()=>R});module.exports=E(M);var G=require("@symbo.ls/router"),f=require("socket.io-client"),l=require("@symbo.ls/utils"),s=require("./applier.js"),i=require("./handlers.js"),c=require("./SyncNotifications.js");const A=!1,C=()=>A?"http://localhost:8080":"https://api.symbols.app",I=e=>{const n=e&&e.editor&&e.editor.socketUrl||e&&e.settings&&e.settings.socketUrl;return typeof n=="string"&&n?{mode:"collab",baseUrl:n}:e&&e.editor&&e.editor.runtime==="runner"?{mode:"runner",baseUrl:null}:{mode:null,baseUrl:null}},j=async e=>{try{const n=e||C(),o=await l.window.fetch(`${n}/service-token`,{method:"GET"});let t;try{const r=await o.clone().json();if(r&&typeof r.token=="string")return r.token.trim();t=await o.text()}catch{t=await o.text()}return(t||"").replace(/\s+/gu,"")||void 0}catch(n){console.error("[sync] Failed to fetch service-token",n)}},y=(e,n,o,t)=>{e.on("snapshot",(0,i.onSnapshot)(n,o,t)),e.on("ops",(0,i.onOps)(n,o,t)),e.on("clients",r=>{t.editor?.verbose&&(0,c.connectedToSymbols)(r,n,o)}),e.on("disconnect",r=>{t.editor?.verbose&&console.info("[sync] disconnected",r)})},N=async(e,n,o,t)=>{const r=await j(t);if(!r)return console.warn("[sync] no service token \u2014 collab disabled"),null;const p=o.key;if(!p)return console.warn("[sync] ctx.key missing \u2014 collab cannot authenticate"),null;const S=o.editor?.projectId||null,a=(0,f.io)(t,{path:"/collab-socket",transports:["websocket"],auth:{token:r,projectId:S,projectKey:p,branch:"main",live:!0,clientType:"platform"},reconnectionAttempts:1/0,reconnectionDelayMax:4e3});return a.on("connect",()=>{o.editor?.verbose&&console.info("[sync] connected (collab)")}),y(a,e,n,o),a},P=(e,n,o)=>{const t=(0,f.io)({transports:["websocket","polling"],reconnectionAttempts:1/0,reconnectionDelayMax:4e3});return t.on("connect",()=>{o.editor?.verbose!==!1&&console.info("[sync] connected (runner)")}),y(t,e,n,o),t.on("reload",()=>{typeof l.window<"u"&&l.window.location&&l.window.location.reload()}),t},v=async(e,n,o)=>{const{mode:t,baseUrl:r}=I(o);return t?t==="collab"?N(e,n,o,r):t==="runner"?P(e,n,o):null:null},u={onInit:v},O={extends:[u,c.Notifications]},m=e=>typeof e>"u",b=e=>!!(e?.editor?.socketUrl||e?.settings?.socketUrl),h=e=>e?.editor?.runtime==="runner",k=(e,n)=>{Array.isArray(e.extends)?e.extends.push(n):e.extends?e.extends=[e.extends,n]:e.extends=[n]},R={name:"sync",beforeCreate(e,n){const o=n&&n.editor;(o&&!m(o.liveSync)?o.liveSync:b(n)||h(n))&&(b(n)&&!h(n)&&!n?.key||k(e,u))}},B={name:"notifications",beforeCreate(e,n){if(!n)return;const o=m(n.notifications)?null:n.notifications,t=n.editor&&n.editor.verbose===!0;(o===!0||o!==!1&&t)&&k(e,c.Notifications)}};

package/dist/esm/handlers.js

@@ -1 +1 @@
-import{init as p}from"smbls";import{overwriteShallow as c}from"@symbo.ls/utils";import{applyOpsToCtx as d,seedRawDesignSystem as y,buildReinitDesignSystem as h}from"./applier.js";const S=(n,l,e)=>{let o=!1;return(r={})=>{let{data:t}=r;const{schema:a}=r;t&&(t=n.call("deepDestringifyFunctions",t,Array.isArray(t)?[]:{}),Object.entries(t).forEach(([i,s])=>{if(e[i]&&typeof e[i]=="object")if(i==="designSystem"){if(y(e,s),o){const f=h(e);f&&p(f)}}else c(e[i],s);else e[i]=s}),o=!0,a&&(e.schema=a))}},w=(n,l,e)=>(o={})=>{let{changes:r}=o;if(!r||!Array.isArray(r)||!r.length)return;r=n.call("deepDestringifyFunctions",r,Array.isArray(r)?[]:{});const t=r.filter(s=>Array.isArray(s)&&Array.isArray(s[1])&&s[1][0]==="designSystem"),a=t.length?r.filter(s=>!t.includes(s)):r,i=d(e,a);if(t.length&&i.add("designSystem"),i.has("state")&&l.update(e.state),["pages","components","snippets","functions","assets"].some(s=>i.has(s))){const{pathname:s,search:f,hash:m}=e.window.location;n.call("router",s+f+m,n.__ref.root,{},{scrollToTop:!1})}if(i.has("designSystem")){const s=h(e,t);p(s||e.designSystem)}};export{w as onOps,S as onSnapshot};
+import{init as p}from"smbls";import{overwriteShallow as m}from"@symbo.ls/utils";import{applyOpsToCtx as d,seedRawDesignSystem as y,buildReinitDesignSystem as c}from"./applier.js";const S=(n,l,e)=>{let o=!1;return(r={})=>{let{data:t}=r;const{schema:a}=r;t&&(t=n.call("deepDestringifyFunctions",t,Array.isArray(t)?[]:{}),Object.entries(t).forEach(([i,s])=>{if(e[i]&&typeof e[i]=="object")if(i==="designSystem"){if(y(e,s),o){const f=c(e);f&&p(f)}}else m(e[i],s);else e[i]=s}),o=!0,a&&(e.schema=a))}},w=(n,l,e)=>(o={})=>{let{changes:r}=o;if(!r||!Array.isArray(r)||!r.length)return;r=n.call("deepDestringifyFunctions",r,Array.isArray(r)?[]:{});const t=r.filter(s=>Array.isArray(s)&&Array.isArray(s[1])&&s[1][0]==="designSystem"),a=t.length?r.filter(s=>!t.includes(s)):r,i=d(e,a);if(t.length&&i.add("designSystem"),i.has("designSystem")){const s=c(e,t);p(s||e.designSystem)}if(i.has("state")&&l.update(e.state),["pages","components","snippets","functions","assets"].some(s=>i.has(s))){const{pathname:s,search:f,hash:h}=e.window.location;n.call("router",s+f+h,n.__ref.root,{},{scrollToTop:!1,force:!0})}};export{w as onOps,S as onSnapshot};

package/dist/esm/index.js

@@ -1 +1 @@
-import"@symbo.ls/router";import{io as a}from"socket.io-client";import{window as s}from"@symbo.ls/utils";import{FORBIDDEN_SEGMENTS as v,isSafePath as S,deletePath as w,setPath as g,applyOpsToCtx as U}from"./applier.js";import{onSnapshot as d,onOps as f}from"./handlers.js";import{connectedToSymbols as T,Notifications as c}from"./SyncNotifications.js";const E=!1,A=()=>E?"http://localhost:8080":"https://api.symbols.app",C=e=>{const n=e&&e.editor&&e.editor.socketUrl||e&&e.settings&&e.settings.socketUrl;return typeof n=="string"&&n?{mode:"collab",baseUrl:n}:e&&e.editor&&e.editor.runtime==="runner"?{mode:"runner",baseUrl:null}:{mode:null,baseUrl:null}},D=async e=>{try{const n=e||A(),o=await s.fetch(`${n}/service-token`,{method:"GET"});let t;try{const r=await o.clone().json();if(r&&typeof r.token=="string")return r.token.trim();t=await o.text()}catch{t=await o.text()}return(t||"").replace(/\s+/gu,"")||void 0}catch(n){console.error("[sync] Failed to fetch service-token",n)}},u=(e,n,o,t)=>{e.on("snapshot",d(n,o,t)),e.on("ops",f(n,o,t)),e.on("clients",r=>{t.editor?.verbose&&T(r,n,o)}),e.on("disconnect",r=>{t.editor?.verbose&&console.info("[sync] disconnected",r)})},I=async(e,n,o,t)=>{const r=await D(t);if(!r)return console.warn("[sync] no service token \u2014 collab disabled"),null;const l=o.key;if(!l)return console.warn("[sync] ctx.key missing \u2014 collab cannot authenticate"),null;const k=o.editor?.projectId||null,i=a(t,{path:"/collab-socket",transports:["websocket"],auth:{token:r,projectId:k,projectKey:l,branch:"main",live:!0,clientType:"platform"},reconnectionAttempts:1/0,reconnectionDelayMax:4e3});return i.on("connect",()=>{o.editor?.verbose&&console.info("[sync] connected (collab)")}),u(i,e,n,o),i},j=(e,n,o)=>{const t=a({transports:["websocket","polling"],reconnectionAttempts:1/0,reconnectionDelayMax:4e3});return t.on("connect",()=>{o.editor?.verbose!==!1&&console.info("[sync] connected (runner)")}),u(t,e,n,o),t.on("reload",()=>{typeof s<"u"&&s.location&&s.location.reload()}),t},N=async(e,n,o)=>{const{mode:t,baseUrl:r}=C(o);return t?t==="collab"?I(e,n,o,r):t==="runner"?j(e,n,o):null:null},p={onInit:N},V={extends:[p,c]},y=e=>typeof e>"u",m=e=>!!(e?.editor?.socketUrl||e?.settings?.socketUrl),b=e=>e?.editor?.runtime==="runner",h=(e,n)=>{Array.isArray(e.extends)?e.extends.push(n):e.extends?e.extends=[e.extends,n]:e.extends=[n]},_={name:"sync",beforeCreate(e,n){const o=n&&n.editor;(o&&!y(o.liveSync)?o.liveSync:m(n)||b(n))&&(m(n)&&!b(n)&&!n?.key||h(e,p))}},K={name:"notifications",beforeCreate(e,n){if(!n)return;const o=y(n.notifications)?null:n.notifications,t=n.editor&&n.editor.verbose===!0;(o===!0||o!==!1&&t)&&h(e,c)}};export{V as DefaultSyncApp,v as FORBIDDEN_SEGMENTS,c as Notifications,p as SyncComponent,U as applyOpsToCtx,N as connectToSocket,w as deletePath,S as isSafePath,K as notificationsPlugin,f as onOps,d as onSnapshot,g as setPath,_ as syncPlugin};
+import"@symbo.ls/router";import{io as a}from"socket.io-client";import{window as s}from"@symbo.ls/utils";import{FORBIDDEN_SEGMENTS as v,isSafePath as S,deletePath as w,setPath as g,applyOpsToCtx as U,seedRawDesignSystem as T}from"./applier.js";import{onSnapshot as d,onOps as f}from"./handlers.js";import{connectedToSymbols as D,Notifications as c}from"./SyncNotifications.js";const E=!1,A=()=>E?"http://localhost:8080":"https://api.symbols.app",C=e=>{const n=e&&e.editor&&e.editor.socketUrl||e&&e.settings&&e.settings.socketUrl;return typeof n=="string"&&n?{mode:"collab",baseUrl:n}:e&&e.editor&&e.editor.runtime==="runner"?{mode:"runner",baseUrl:null}:{mode:null,baseUrl:null}},I=async e=>{try{const n=e||A(),o=await s.fetch(`${n}/service-token`,{method:"GET"});let t;try{const r=await o.clone().json();if(r&&typeof r.token=="string")return r.token.trim();t=await o.text()}catch{t=await o.text()}return(t||"").replace(/\s+/gu,"")||void 0}catch(n){console.error("[sync] Failed to fetch service-token",n)}},u=(e,n,o,t)=>{e.on("snapshot",d(n,o,t)),e.on("ops",f(n,o,t)),e.on("clients",r=>{t.editor?.verbose&&D(r,n,o)}),e.on("disconnect",r=>{t.editor?.verbose&&console.info("[sync] disconnected",r)})},j=async(e,n,o,t)=>{const r=await I(t);if(!r)return console.warn("[sync] no service token \u2014 collab disabled"),null;const l=o.key;if(!l)return console.warn("[sync] ctx.key missing \u2014 collab cannot authenticate"),null;const k=o.editor?.projectId||null,i=a(t,{path:"/collab-socket",transports:["websocket"],auth:{token:r,projectId:k,projectKey:l,branch:"main",live:!0,clientType:"platform"},reconnectionAttempts:1/0,reconnectionDelayMax:4e3});return i.on("connect",()=>{o.editor?.verbose&&console.info("[sync] connected (collab)")}),u(i,e,n,o),i},N=(e,n,o)=>{const t=a({transports:["websocket","polling"],reconnectionAttempts:1/0,reconnectionDelayMax:4e3});return t.on("connect",()=>{o.editor?.verbose!==!1&&console.info("[sync] connected (runner)")}),u(t,e,n,o),t.on("reload",()=>{typeof s<"u"&&s.location&&s.location.reload()}),t},P=async(e,n,o)=>{const{mode:t,baseUrl:r}=C(o);return t?t==="collab"?j(e,n,o,r):t==="runner"?N(e,n,o):null:null},p={onInit:P},_={extends:[p,c]},y=e=>typeof e>"u",m=e=>!!(e?.editor?.socketUrl||e?.settings?.socketUrl),b=e=>e?.editor?.runtime==="runner",h=(e,n)=>{Array.isArray(e.extends)?e.extends.push(n):e.extends?e.extends=[e.extends,n]:e.extends=[n]},K={name:"sync",beforeCreate(e,n){const o=n&&n.editor;(o&&!y(o.liveSync)?o.liveSync:m(n)||b(n))&&(m(n)&&!b(n)&&!n?.key||h(e,p))}},L={name:"notifications",beforeCreate(e,n){if(!n)return;const o=y(n.notifications)?null:n.notifications,t=n.editor&&n.editor.verbose===!0;(o===!0||o!==!1&&t)&&h(e,c)}};export{_ as DefaultSyncApp,v as FORBIDDEN_SEGMENTS,c as Notifications,p as SyncComponent,U as applyOpsToCtx,P as connectToSocket,w as deletePath,S as isSafePath,L as notificationsPlugin,f as onOps,d as onSnapshot,T as seedRawDesignSystem,g as setPath,K as syncPlugin};

package/handlers.js

@@ -85,6 +85,26 @@ export const onOps =
     const changed = applyOpsToCtx(ctx, otherOps)
     if (dsOps.length) changed.add('designSystem')
 
+    // DS re-init must run BEFORE any re-render below
+    // (RUNTIME-LIVESYNC-STYLE-LOSS-1). A re-render resolves component props
+    // against the ACTIVE scratch config, and token resolutions are BAKED
+    // into the emitted atomic rules — a token that only exists in the
+    // incoming payload resolved against the boot-time config emits a dead
+    // value (a raw token string is an invalid declaration the browser
+    // drops), and nothing re-resolves those classes once the late init
+    // finally defines it: the new tree stayed unstyled until a manual
+    // reload. Re-initing first rebuilds vars/sequences/keyframes/sprites
+    // the same way boot does, so every render below sees the new design
+    // system.
+    if (changed.has('designSystem')) {
+      // Re-init from the raw copy + shared-library defaults — see the
+      // seedRawDesignSystem note in onSnapshot. Fall back to the live
+      // config ONLY when no raw source was ever seeded (a client that
+      // never received a snapshot), matching the old behavior.
+      const raw = buildReinitDesignSystem(ctx, dsOps)
+      init(raw || ctx.designSystem)
+    }
+
     // State changes → re-run state. Editor-driven navigation now goes
     // through explicit `el.router(route)` calls (or a dedicated `navigate`
     // event) instead of writing `state.route` as a side-effect channel.
@@ -109,16 +129,13 @@ export const onOps =
         pathname + search + hash,
         el.__ref.root,
         {},
-        { scrollToTop: false }
+        // `force`: the ops above mutated `ctx.pages` / `ctx.components` IN
+        // PLACE, so the routed content object is often the SAME reference the
+        // router already rendered, and its swap gate (contentChanged) would
+        // skip the re-render — a components-only push never reached the DOM
+        // (RUNTIME-LIVESYNC-STYLE-LOSS-1, rendered half). `force` is the
+        // router contract for exactly this caller.
+        { scrollToTop: false, force: true }
       )
     }
-
-    if (changed.has('designSystem')) {
-      // Re-init from the raw copy + shared-library defaults — see the
-      // seedRawDesignSystem note in onSnapshot. Fall back to the live
-      // config ONLY when no raw source was ever seeded (a client that
-      // never received a snapshot), matching the old behavior.
-      const raw = buildReinitDesignSystem(ctx, dsOps)
-      init(raw || ctx.designSystem)
-    }
   }

package/index.js

@@ -6,7 +6,8 @@ import {
   isSafePath,
   deletePath,
   setPath,
-  applyOpsToCtx
+  applyOpsToCtx,
+  seedRawDesignSystem
 } from './applier.js'
 import { onSnapshot, onOps } from './handlers.js'
 import { connectedToSymbols, Notifications } from './SyncNotifications.js'
@@ -17,6 +18,7 @@ export {
   deletePath,
   setPath,
   applyOpsToCtx,
+  seedRawDesignSystem,
   onSnapshot,
   onOps
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/sync",
-  "version": "3.14.700",
+  "version": "3.14.702",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
@@ -36,7 +36,7 @@
   },
   "source": "index.js",
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
   "scripts": {
     "build:esm": "esbuild $(find . -type f -name \"*.js\" -not -path \"*/dist/*\" -not -path \"*/node_modules/*\" -not -path \"*/__tests__/*\" -not -path \"*/test/*\" -not -path \"*/demo/*\" -not -path \"*/demos/*\" -not -path \"*/examples/*\" -not -path \"*/fixtures/*\" -not -name \"*.test.js\") --target=es2022 --format=esm --outbase=. --outdir=dist/esm --minify --log-level=warning",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@symbo.ls/router": "^3.14.599",
-    "@symbo.ls/utils": "^3.14.599",
+    "@symbo.ls/utils": "^3.14.770",
     "@symbo.ls/scratch": "^3.14.700",
     "@symbo.ls/default-config": "^3.14.599",
     "chalk": "^5.6.2",