@symbo.ls/sync 3.14.1 → 3.14.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @symbo.ls/sync
+
+## 3.14.3
+
+### Patch Changes
+
+- Auto-generated cross-repo patch release.
+- Updated dependencies
+  - @symbo.ls/default-config@3.14.4
+
+## 3.14.1
+
+### Patch Changes
+
+- Auto-generated patch release for changed packages.
+- Updated dependencies
+  - @symbo.ls/default-config@3.14.2
+  - @symbo.ls/scratch@3.14.2
+  - @symbo.ls/utils@3.14.2
+  - @symbo.ls/router@3.14.1

package/dist/cjs/SyncNotifications.cjs

@@ -0,0 +1 @@
+"use strict";var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var l=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},f=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of a(e))!s.call(t,i)&&i!==n&&c(t,i,{get:()=>e[i],enumerable:!(o=d(e,i))||o.enumerable});return t};var r=t=>f(c({},"__esModule",{value:!0}),t);var x={};l(x,{Notifications:()=>m,connectedToSymbols:()=>p});module.exports=r(x);const u={success:"green",error:"red",warning:"yellow"},p=(t,e,n)=>{if(t.symbols){if(!n.connected){n.notifications.connected={title:"Connected",message:"to the Symbols live server"},n.update({connected:!0});const o=setTimeout(()=>{delete n.notifications.connected,e.notifications.content.connected.update({animation:"fadeOutDown"}),n.update({connected:!0}),clearTimeout(o)},3e3)}}else if(n.connected){n.notifications.connected={title:"Disconnected",type:"error"},n.update({connected:!1});const o=setTimeout(()=>{delete n.notifications.connected,e.notifications.content.connected&&e.notifications.content.connected.update({animation:"fadeOutDown"}),n.update({connected:!0}),clearTimeout(o)},3e3)}},m={state:{notifications:[]},Notifications:{position:"fixed",left:"A2",bottom:"Z2",zIndex:"999",childExtends:"Notification",childProps:({state:t})=>({animationDuration:"C",background:u[t.type||"success"],icon:null,Flex:{Title:{text:"{{ title }}"},P:{text:"{{ title }}"}},onRender:(e,n,o)=>{n.update({animation:"fadeInUp"})},onClick:(e,n,o)=>{delete o.notifications[n.key],n.update({animation:"fadeOutDown"}),o.onClose&&o.onClose(e,n,o)}}),IconText:null,childrenAs:"state",children:({state:t})=>t.notifications}};

package/dist/cjs/applier.cjs

@@ -0,0 +1 @@
+var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var g=(r,e)=>{for(var n in e)s(r,n,{get:e[n],enumerable:!0})},x=(r,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!A.call(r,t)&&t!==n&&s(r,t,{get:()=>e[t],enumerable:!(o=y(e,t))||o.enumerable});return r};var S=r=>x(s({},"__esModule",{value:!0}),r);var k={};g(k,{FORBIDDEN_SEGMENTS:()=>f,applyOpsToCtx:()=>_,deletePath:()=>a,isSafePath:()=>u,setPath:()=>l});module.exports=S(k);const f=new Set(["__proto__","constructor","prototype"]),u=r=>{if(!Array.isArray(r))return!1;for(let e=0;e<r.length;e++)if(f.has(r[e]))return!1;return!0},a=(r,e)=>{!r||!u(e)||e.reduce((n,o,t,i)=>{if(n&&o in n){if(t!==i.length-1)return n[o];delete n[o]}},r)},l=(r,e,n,o=!1)=>{!r||!u(e)||e.reduce((t,i,d,p)=>{if(t){if(d!==p.length-1)return!t[i]&&o&&(t[i]={}),t[i];t[i]=n}},r)},_=(r,e)=>{const n=new Set;if(!Array.isArray(e))return n;for(const[o,t,i]of e)if(!(!Array.isArray(t)||!t.length))switch(n.add(t[0]),o){case"delete":a(r,t);break;case"update":case"set":l(r,t,i,!0);break;default:break}return n};

package/dist/cjs/handlers.cjs

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

package/dist/cjs/index.cjs

@@ -0,0 +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)}};

package/dist/esm/SyncNotifications.js

@@ -0,0 +1 @@
+const i={success:"green",error:"red",warning:"yellow"},c=(o,t,n)=>{if(o.symbols){if(!n.connected){n.notifications.connected={title:"Connected",message:"to the Symbols live server"},n.update({connected:!0});const e=setTimeout(()=>{delete n.notifications.connected,t.notifications.content.connected.update({animation:"fadeOutDown"}),n.update({connected:!0}),clearTimeout(e)},3e3)}}else if(n.connected){n.notifications.connected={title:"Disconnected",type:"error"},n.update({connected:!1});const e=setTimeout(()=>{delete n.notifications.connected,t.notifications.content.connected&&t.notifications.content.connected.update({animation:"fadeOutDown"}),n.update({connected:!0}),clearTimeout(e)},3e3)}},d={state:{notifications:[]},Notifications:{position:"fixed",left:"A2",bottom:"Z2",zIndex:"999",childExtends:"Notification",childProps:({state:o})=>({animationDuration:"C",background:i[o.type||"success"],icon:null,Flex:{Title:{text:"{{ title }}"},P:{text:"{{ title }}"}},onRender:(t,n,e)=>{n.update({animation:"fadeInUp"})},onClick:(t,n,e)=>{delete e.notifications[n.key],n.update({animation:"fadeOutDown"}),e.onClose&&e.onClose(t,n,e)}}),IconText:null,childrenAs:"state",children:({state:o})=>o.notifications}};export{d as Notifications,c as connectedToSymbols};

package/dist/esm/applier.js

@@ -0,0 +1 @@
+const a=new Set(["__proto__","constructor","prototype"]),s=r=>{if(!Array.isArray(r))return!1;for(let t=0;t<r.length;t++)if(a.has(r[t]))return!1;return!0},l=(r,t)=>{!r||!s(t)||t.reduce((n,i,e,o)=>{if(n&&i in n){if(e!==o.length-1)return n[i];delete n[i]}},r)},d=(r,t,n,i=!1)=>{!r||!s(t)||t.reduce((e,o,u,f)=>{if(e){if(u!==f.length-1)return!e[o]&&i&&(e[o]={}),e[o];e[o]=n}},r)},p=(r,t)=>{const n=new Set;if(!Array.isArray(t))return n;for(const[i,e,o]of t)if(!(!Array.isArray(e)||!e.length))switch(n.add(e[0]),i){case"delete":l(r,e);break;case"update":case"set":d(r,e,o,!0);break;default:break}return n};export{a as FORBIDDEN_SEGMENTS,p as applyOpsToCtx,l as deletePath,s as isSafePath,d as setPath};

package/dist/esm/handlers.js

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

package/dist/esm/index.js

@@ -0,0 +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};

package/package.json

@@ -1,41 +1,53 @@
 {
   "name": "@symbo.ls/sync",
-  "version": "3.14.1",
-  "main": "./index.js",
-  "module": "./index.js",
+  "version": "3.14.3",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/esm/index.js",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "files": [
     "dist",
-    "*.js"
+    "*.md",
+    "LICENSE"
   ],
   "repository": "https://github.com/symbo-ls/scratch",
   "type": "module",
   "license": "CC-BY-NC-4.0",
-  "unpkg": "./dist/iife/index.js",
-  "jsdelivr": "./dist/iife/index.js",
   "exports": {
-    ".": "./index.js",
-    "./applier": "./applier.js",
-    "./handlers": "./handlers.js",
-    "./package.json": "./package.json"
+    ".": {
+      "development": "./index.js",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.js"
+    },
+    "./package.json": "./package.json",
+    "./applier": {
+      "development": "./applier.js",
+      "import": "./dist/esm/applier.js",
+      "require": "./dist/cjs/applier.cjs",
+      "default": "./dist/esm/applier.js"
+    },
+    "./handlers": {
+      "development": "./handlers.js",
+      "import": "./dist/esm/handlers.js",
+      "require": "./dist/cjs/handlers.cjs",
+      "default": "./dist/esm/handlers.js"
+    }
   },
   "source": "index.js",
   "publishConfig": {
-    "access": "public"
+    "access": "restricted"
   },
   "scripts": {
-    "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "NODE_ENV=$NODE_ENV esbuild *.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:cjs": "NODE_ENV=$NODE_ENV esbuild *.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:iife": "NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=SmblsSync --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV --external:smbls --external:@symbo.ls/* --external:socket.io-client --external:css-in-props",
-    "build": "node ../../build/build.js",
-    "prepublish": "npm run build && npm run copy:package:cjs"
+    "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",
+    "build:cjs": "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=node20 --format=cjs --outbase=. --outdir=dist/cjs --out-extension:.js=.cjs --minify --log-level=warning",
+    "build": "rimraf dist && npm run build:esm && npm run build:cjs",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
     "@symbo.ls/router": "^3.14.1",
     "@symbo.ls/utils": "^3.14.2",
     "@symbo.ls/scratch": "^3.14.2",
-    "@symbo.ls/default-config": "^3.14.2",
+    "@symbo.ls/default-config": "^3.14.4",
     "chalk": "^5.4.1",
     "socket.io-client": "^4.8.1"
   },

package/SyncNotifications.js

@@ -1,120 +0,0 @@
-'use strict'
-
-// const ANIMATION = {
-//   fadeInUp: {
-//     from: {
-//       transform: 'translate3d(0, 12.5%, 1px)',
-//       opacity: 0
-//     },
-//     to: {
-//       transform: 'translate3d(0, 0, 1px)',
-//       opacity: 1
-//     }
-//   },
-//   fadeOutDown: {
-//     from: {
-//       transform: 'translate3d(0, 0, 1px)',
-//       opacity: 1
-//     },
-//     to: {
-//       transform: 'translate3d(0, 12.5%, 1px)',
-//       opacity: 0
-//     }
-//   }
-// }
-
-// const COLOR = {
-//   black: '#000000',
-//   blue: '#3686F7'
-// }
-
-// set({
-//   COLOR,
-//   ANIMATION
-// })
-
-const NOTIF_COLORS = {
-  success: 'green',
-  error: 'red',
-  warning: 'yellow'
-}
-
-export const connectedToSymbols = (clients, element, state) => {
-  if (clients.symbols) {
-    if (!state.connected) {
-      state.notifications.connected = {
-        title: 'Connected',
-        message: 'to the Symbols live server'
-      }
-
-      state.update({ connected: true })
-
-      const t = setTimeout(() => {
-        delete state.notifications.connected
-        element.notifications.content.connected.update({
-          animation: 'fadeOutDown'
-        })
-        state.update({ connected: true })
-        clearTimeout(t)
-      }, 3000)
-    }
-  } else {
-    if (state.connected) {
-      state.notifications.connected = {
-        title: 'Disconnected',
-        type: 'error'
-      }
-
-      state.update({ connected: false })
-
-      const t = setTimeout(() => {
-        delete state.notifications.connected
-        if (element.notifications.content.connected) {
-          element.notifications.content.connected.update({
-            animation: 'fadeOutDown'
-          })
-        }
-        state.update({ connected: true })
-        clearTimeout(t)
-      }, 3000)
-    }
-  }
-}
-
-export const Notifications = {
-  state: {
-    notifications: []
-  },
-
-  Notifications: {
-    position: 'fixed',
-    left: 'A2',
-    bottom: 'Z2',
-    zIndex: '999',
-    childExtends: 'Notification',
-    childProps: ({ state }) => ({
-      animationDuration: 'C',
-      background: NOTIF_COLORS[state.type || 'success'],
-      icon: null,
-      Flex: {
-        Title: {
-          text: '{{ title }}'
-        },
-        P: {
-          text: '{{ title }}'
-        }
-      },
-      onRender: (e, el, s) => {
-        el.update({ animation: 'fadeInUp' })
-      },
-      onClick: (e, el, s) => {
-        delete s.notifications[el.key]
-        el.update({ animation: 'fadeOutDown' })
-        if (s.onClose) s.onClose(e, el, s)
-      }
-    }),
-    IconText: null,
-    childrenAs: 'state',
-    children: ({ state }) => state.notifications
-  }
-}

package/applier.js

@@ -1,71 +0,0 @@
-// Pure ops applier — Node-safe, zero DOM coupling. Both browser handlers
-// (onSnapshot/onOps in `./handlers.js`) and server-side test code import
-// from here. Anything DOM-touching (init(designSystem), s.update(...)
-// re-renders, el.call('router', …)) lives in handlers.js.
-
-// Forbidden path segments — block prototype-pollution writes coming over
-// any sync transport. Without the filter, a remote
-// `setPath(ctx, ['__proto__', 'isAdmin'], true)` would pollute
-// Object.prototype across the whole runtime.
-export const FORBIDDEN_SEGMENTS = new Set(['__proto__', 'constructor', 'prototype'])
-
-export const isSafePath = (path) => {
-  if (!Array.isArray(path)) return false
-  for (let i = 0; i < path.length; i++) {
-    if (FORBIDDEN_SEGMENTS.has(path[i])) return false
-  }
-  return true
-}
-
-export const deletePath = (obj, path) => {
-  if (!obj || !isSafePath(path)) return
-  path.reduce((acc, v, i, arr) => {
-    if (acc && v in acc) {
-      if (i !== arr.length - 1) return acc[v]
-      delete acc[v]
-    }
-    return void 0
-  }, obj)
-}
-
-export const setPath = (obj, path, value, createNestedObjects = false) => {
-  if (!obj || !isSafePath(path)) return
-  path.reduce((acc, v, i, arr) => {
-    if (!acc) return void 0
-    if (i !== arr.length - 1) {
-      if (!acc[v] && createNestedObjects) acc[v] = {}
-      return acc[v]
-    }
-    acc[v] = value
-    return void 0
-  }, obj)
-}
-
-/**
- * Apply a batch of `[action, path, value]` ops to a context object.
- * Returns the set of top-level keys that changed so the caller can decide
- * which downstream re-render side-effects to run.
- *
- * Supported actions: 'set', 'update' (alias for set), 'delete'.
- * Empty paths are skipped — replace at the root needs a snapshot, not an op.
- */
-export const applyOpsToCtx = (ctx, changes) => {
-  const topLevelChanged = new Set()
-  if (!Array.isArray(changes)) return topLevelChanged
-  for (const [action, path, change] of changes) {
-    if (!Array.isArray(path) || !path.length) continue
-    topLevelChanged.add(path[0])
-    switch (action) {
-      case 'delete':
-        deletePath(ctx, path)
-        break
-      case 'update':
-      case 'set':
-        setPath(ctx, path, change, true)
-        break
-      default:
-        break
-    }
-  }
-  return topLevelChanged
-}

package/handlers.js

@@ -1,83 +0,0 @@
-// Browser-only sync handlers. Imports `init` from smbls (which transitively
-// loads scratch and touches `document`), so this module must not be imported
-// from server-side code paths. Server-side tests/utilities should import from
-// `./applier.js` instead — that's the pure ops layer.
-
-import { init } from 'smbls/src/init.js'
-import { overwriteShallow } from '@symbo.ls/utils'
-import { applyOpsToCtx } from './applier.js'
-
-export const onSnapshot =
-  (el, s, ctx) =>
-  (payload = {}) => {
-    let { data } = payload
-    const { schema } = payload
-    if (!data) return
-
-    data = el.call(
-      'deepDestringifyFunctions',
-      data,
-      Array.isArray(data) ? [] : {}
-    )
-
-    Object.entries(data).forEach(([key, val]) => {
-      if (ctx[key] && typeof ctx[key] === 'object') {
-        if (key === 'designSystem') {
-          init(val)
-        } else {
-          overwriteShallow(ctx[key], val)
-        }
-      } else {
-        ctx[key] = val
-      }
-    })
-
-    if (schema) ctx.schema = schema
-  }
-
-export const onOps =
-  (el, s, ctx) =>
-  (payload = {}) => {
-    let { changes } = payload
-    if (!changes || !Array.isArray(changes) || !changes.length) return
-
-    changes = el.call(
-      'deepDestringifyFunctions',
-      changes,
-      Array.isArray(changes) ? [] : {}
-    )
-
-    const changed = applyOpsToCtx(ctx, changes)
-
-    // 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.
-    if (changed.has('state')) {
-      s.update(ctx.state)
-    }
-
-    // Source-section changes → soft reload at the current location so the
-    // new component bodies are picked up without a full page refresh.
-    // `assets` triggers the same rerender so updated variant URLs (e.g.
-    // a `?v=<mtime>` bump on a replaced image) propagate into the rendered
-    // <img>/<source> tags — without this, byte-edits to assets would
-    // refresh the manifest in ctx but never re-render the DOM.
-    if (
-      ['pages', 'components', 'snippets', 'functions', 'assets'].some((k) =>
-        changed.has(k)
-      )
-    ) {
-      const { pathname, search, hash } = ctx.window.location
-      el.call(
-        'router',
-        pathname + search + hash,
-        el.__ref.root,
-        {},
-        { scrollToTop: false }
-      )
-    }
-
-    if (changed.has('designSystem')) {
-      init(ctx.designSystem)
-    }
-  }

package/index.js

@@ -1,258 +0,0 @@
-import { router } from '@symbo.ls/router'
-import { io } from 'socket.io-client'
-import { window } from '@symbo.ls/utils'
-import {
-  FORBIDDEN_SEGMENTS,
-  isSafePath,
-  deletePath,
-  setPath,
-  applyOpsToCtx
-} from './applier.js'
-import { onSnapshot, onOps } from './handlers.js'
-import { connectedToSymbols, Notifications } from './SyncNotifications.js'
-export { Notifications }
-export {
-  FORBIDDEN_SEGMENTS,
-  isSafePath,
-  deletePath,
-  setPath,
-  applyOpsToCtx,
-  onSnapshot,
-  onOps
-}
-
-const isLocal = process.env.NODE_ENV === 'local'
-
-const defaultBaseUrl = () =>
-  isLocal ? 'http://localhost:8080' : 'https://api.symbols.app'
-
-/*
- * Detect which transport this page should speak. Two modes:
- *
- *   collab — page was rendered by mermaid (hosted dev/staging/prod
- *     deploys). `ctx.editor.socketUrl` is injected at render time and
- *     points at the per-channel realtime API. Auth is a service token
- *     fetched from `${socketUrl}/service-token`; room is keyed by
- *     `ctx.key` (project key, or `editor.projectId` when present).
- *
- *   runner — page was rendered by `@symbo.ls/runner` locally. The
- *     runner's HTTP server exposes a same-origin socket.io endpoint at
- *     the default `/socket.io` path with no auth. Detection:
- *     `ctx.editor.runtime === 'runner'` — the runner's boot script
- *     stamps that onto `context.editor` before calling `Smbls.create`.
- *     No window globals.
- *
- * Both modes attach the same applier handlers (onSnapshot/onOps) so the
- * server-side wire format is interchangeable. Production builds (no
- * socketUrl, no runner runtime) skip sync entirely.
- */
-const detectTransport = (ctx) => {
-  const socketUrl =
-    (ctx && ctx.editor && ctx.editor.socketUrl) ||
-    (ctx && ctx.settings && ctx.settings.socketUrl)
-  if (typeof socketUrl === 'string' && socketUrl) {
-    return { mode: 'collab', baseUrl: socketUrl }
-  }
-  if (ctx && ctx.editor && ctx.editor.runtime === 'runner') {
-    return { mode: 'runner', baseUrl: null }
-  }
-  return { mode: null, baseUrl: null }
-}
-
-const fetchServiceToken = async (baseUrl) => {
-  try {
-    const urlBase = baseUrl || defaultBaseUrl()
-    const res = await window.fetch(`${urlBase}/service-token`, {
-      method: 'GET'
-    })
-
-    // Attempt to parse JSON first – recent versions return `{ token: "..." }`
-    // Fall back to treating the response as raw text for backward-compatibility.
-    let txt
-    try {
-      const json = await res.clone().json()
-      if (json && typeof json.token === 'string') {
-        return json.token.trim()
-      }
-      // If json parsing succeeds but no token field, fall back to text below.
-      txt = await res.text()
-    } catch {
-      // Response is not JSON – treat as plain text token.
-      txt = await res.text()
-    }
-
-    return (txt || '').replace(/\s+/gu, '') || void 0
-  } catch (e) {
-    console.error('[sync] Failed to fetch service-token', e)
-  }
-}
-
-/**
- * Wire the shared applier handlers onto a connected socket. Used by both
- * collab and runner transports so the snapshot/ops protocol is uniform.
- */
-const attachApplier = (socket, el, s, ctx) => {
-  socket.on('snapshot', onSnapshot(el, s, ctx))
-  socket.on('ops', onOps(el, s, ctx))
-  socket.on('clients', (data) => {
-    if (ctx.editor?.verbose) connectedToSymbols(data, el, s)
-  })
-  socket.on('disconnect', (reason) => {
-    if (ctx.editor?.verbose) console.info('[sync] disconnected', reason)
-  })
-}
-
-const connectCollab = async (el, s, ctx, baseUrl) => {
-  const token = await fetchServiceToken(baseUrl)
-  if (!token) {
-    console.warn('[sync] no service token — collab disabled')
-    return null
-  }
-  const projectKey = ctx.key
-  if (!projectKey) {
-    console.warn('[sync] ctx.key missing — collab cannot authenticate')
-    return null
-  }
-  // The server prefers `projectId` (mongo _id) over `projectKey` lookup;
-  // mermaid injects it via `editor.projectId` to skip a 404-prone roundtrip.
-  const projectId = ctx.editor?.projectId || null
-
-  const socket = io(baseUrl, {
-    path: '/collab-socket',
-    transports: ['websocket'],
-    auth: {
-      token,
-      projectId,
-      projectKey,
-      branch: 'main',
-      live: true,
-      clientType: 'platform'
-    },
-    reconnectionAttempts: Infinity,
-    reconnectionDelayMax: 4000
-  })
-
-  socket.on('connect', () => {
-    if (ctx.editor?.verbose) console.info('[sync] connected (collab)')
-  })
-  attachApplier(socket, el, s, ctx)
-  return socket
-}
-
-const connectRunner = (el, s, ctx) => {
-  // Same-origin /socket.io (default path), no auth — the runner is a
-  // local-only dev surface. Auto-reconnect so a server restart doesn't
-  // require a browser refresh.
-  const socket = io({
-    transports: ['websocket', 'polling'],
-    reconnectionAttempts: Infinity,
-    reconnectionDelayMax: 4000
-  })
-  socket.on('connect', () => {
-    if (ctx.editor?.verbose !== false) console.info('[sync] connected (runner)')
-  })
-  attachApplier(socket, el, s, ctx)
-  // Runner emits `reload` when something the wire format can't express
-  // changes (importmap shift, add/remove of dependencies). The browser
-  // must do a full reload to pick up the new HTML scaffold.
-  socket.on('reload', () => {
-    if (typeof window !== 'undefined' && window.location) {
-      window.location.reload()
-    }
-  })
-  return socket
-}
-
-export const connectToSocket = async (el, s, ctx) => {
-  const { mode, baseUrl } = detectTransport(ctx)
-  if (!mode) return null
-  if (mode === 'collab') return connectCollab(el, s, ctx, baseUrl)
-  if (mode === 'runner') return connectRunner(el, s, ctx)
-  return null
-}
-
-// `onInitSync` was a custom lifecycle name that v3.14 never actually fires —
-// `initSync` is registered in LIFECYCLE_EVENTS but no code triggers it, so the
-// handler stayed dead and the realtime socket never opened on deployed pages.
-// `onInit` is a fired root-element lifecycle: when SyncComponent is pushed
-// into the app's `extends` (only on the root by initializeSync), this runs
-// once at app boot and connects to the collab/mermaid backend.
-export const SyncComponent = {
-  onInit: connectToSocket
-}
-
-// `Inspect` moved to `@symbo.ls/inspect`. Compose it manually if you want
-// the legacy DefaultSyncApp shape:
-//   import { Inspect } from '@symbo.ls/inspect'
-//   const DefaultApp = { extends: [SyncComponent, Inspect, Notifications] }
-export const DefaultSyncApp = {
-  extends: [SyncComponent, Notifications]
-}
-
-const isUndef = (v) => typeof v === 'undefined'
-const hasCollab = (ctx) => !!(ctx?.editor?.socketUrl || ctx?.settings?.socketUrl)
-const hasRunner = (ctx) => ctx?.editor?.runtime === 'runner'
-
-const attachExtend = (app, component) => {
-  if (Array.isArray(app.extends)) app.extends.push(component)
-  else if (app.extends) app.extends = [app.extends, component]
-  else app.extends = [component]
-}
-
-/**
- * @symbo.ls/sync as a regular smbls plugin. Auto-registered by
- * `prepareContext` in `packages/smbls/src/createDomql.js` (default-on);
- * users opt out by setting `context.sync = false` or by removing it from
- * `context.plugins` before calling `Smbls.create(...)`.
- *
- * The `beforeCreate(app, ctx)` lifecycle runs after `initializeExtend`
- * has set the root `app.extends` array but before DOMQL element creation,
- * so attaching SyncComponent here causes its `onInit` to fire as a normal
- * root-element lifecycle event against the resolved app — no window
- * globals, no Promise race.
- */
-export const syncPlugin = {
-  name: 'sync',
-  beforeCreate (app, ctx) {
-    const editor = ctx && ctx.editor
-
-    // Precedence:
-    //   explicit editor.liveSync → wins
-    //   else: editor.socketUrl (collab) OR editor.runtime === 'runner'
-    //   else: off (production / static dist)
-    const liveSync = editor && !isUndef(editor.liveSync)
-      ? editor.liveSync
-      : (hasCollab(ctx) || hasRunner(ctx))
-    if (!liveSync) return
-
-    // Collab transport requires ctx.key for socket auth. Runner doesn't.
-    if (hasCollab(ctx) && !hasRunner(ctx) && !ctx?.key) return
-
-    attachExtend(app, SyncComponent)
-  }
-}
-
-/**
- * Notifications overlay (toast stack at bottom-left). Visualises sync
- * connect/disconnect events surfaced by `connectedToSymbols`. Lives in
- * `@symbo.ls/sync` rather than its own package because the helper that
- * fires notifications is owned by sync's collab transport.
- *
- * Auto-registered by `prepareContext` only when the user opts in
- * (default OFF). Two opt-in shapes for backwards compatibility:
- *   1. `context.notifications = true` (preferred — same shape as
- *      `context.sync` / `context.inspect`)
- *   2. `context.editor.verbose = true` (legacy — historic behaviour
- *      where auto-on-in-dev also turned this on)
- */
-export const notificationsPlugin = {
-  name: 'notifications',
-  beforeCreate (app, ctx) {
-    if (!ctx) return
-    const explicit = !isUndef(ctx.notifications) ? ctx.notifications : null
-    const editorVerbose = ctx.editor && ctx.editor.verbose === true
-    const enabled = explicit === true || (explicit !== false && editorVerbose)
-    if (!enabled) return
-    attachExtend(app, Notifications)
-  }
-}