@symbo.ls/sync 2.11.523 → 3.0.2

package/Inspect.js

@@ -4,16 +4,16 @@ import * as smblsUI from '@symbo.ls/uikit'
 import { isObject, isString, isArray } from '@domql/utils'
 import { send } from '@symbo.ls/socket/client'
 
-function returnStringExtend (extend) {
-  return isString(extend) ? extend : isArray(extend) ? extend.find(extItem => isString(extItem)) : ''
+function returnStringExtend (_extends) {
+  return isString(_extends) ? _extends : isArray(_extends) ? _extends.find(extItem => isString(extItem)) : ''
 }
 
 function getComponentKey (el) {
   if (!el) return
   const __componentKey = el.__ref.__componentKey
-  const extendStr = el.extend && returnStringExtend(el.extend)
-  const parentChildExtendStr = el.parent && el.parent.childExtend && returnStringExtend(el.parent.childExtend)
-  return (__componentKey || extendStr || parentChildExtendStr || '').split('_')[0].split('.')[0].split('+')[0]
+  const extendsStr = el.extends && returnStringExtend(el.extends)
+  const parentChildExtendStr = el.parent && el.parent.childExtends && returnStringExtend(el.parent.childExtends)
+  return (__componentKey || extendsStr || parentChildExtendStr || '').split('_')[0].split('.')[0].split('+')[0]
 }
 
 function findComponent (el) {
@@ -54,145 +54,137 @@ const onInspect = (app, state, ctx) => {
 }
 
 export const Inspect = {
-  props: {
-    '.preventSelect': { userSelect: 'none' },
-    '!preventSelect': { userSelect: 'auto' },
+  '.preventSelect': { userSelect: 'none' },
+  '!preventSelect': { userSelect: 'auto' },
 
-    onInspect,
+  onInspect,
 
-    onMousemove: (ev, e, state) => {
-      const el = ev.target.ref
-      const component = findComponent(el)
-      const focusState = e.Inspector.state
+  onMousemove: (ev, e, state) => {
+    const el = ev.target.ref
+    const component = findComponent(el)
+    const focusState = e.Inspector.state
 
-      if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false })
+    if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false })
 
-      const componentKey = getComponentKey(component)
-      const updateValue = (area) => {
-        focusState.update({ area, focusKey: componentKey })
-      }
+    const componentKey = getComponentKey(component)
+    const updateValue = (area) => {
+      focusState.update({ area, focusKey: componentKey })
+    }
 
-      const update = () => {
-        if (ev.altKey && ev.shiftKey) {
-          const { x, y, width, height } = component.node.getBoundingClientRect()
-          const area = { x, y, width, height }
+    const update = () => {
+      if (ev.altKey && ev.shiftKey) {
+        const { x, y, width, height } = component.node.getBoundingClientRect()
+        const area = { x, y, width, height }
 
-          if (!focusState.area) return updateValue(area)
-          if (focusState.area.x !== area.x) updateValue(area)
-        } else if (focusState.area) {
-          focusState.update({ area: false })
-        }
+        if (!focusState.area) return updateValue(area)
+        if (focusState.area.x !== area.x) updateValue(area)
+      } else if (focusState.area) {
+        focusState.update({ area: false })
       }
+    }
 
-      window.requestAnimationFrame(() => {
-        update()
-        window.requestAnimationFrame(update)
-      })
-    },
+    window.requestAnimationFrame(() => {
+      update()
+      window.requestAnimationFrame(update)
+    })
+  },
 
-    onMousedown: (ev, elem, state) => {
-      if (!state.debugging) return
-      const el = ev.target.ref
-      const component = findComponent(el)
-      if (!component) return
-      const componentKey = getComponentKey(component)
-      if (!componentKey) return
-
-      const editor = el.context.editor
-      if (editor && editor.onInspect) {
-        return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true })
-      }
+  onMousedown: (ev, elem, state) => {
+    if (!state.debugging) return
+    const el = ev.target.ref
+    const component = findComponent(el)
+    if (!component) return
+    const componentKey = getComponentKey(component)
+    if (!componentKey) return
+
+    const editor = el.context.editor
+    if (editor && editor.onInspect) {
+      return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true })
+    }
 
-      const data = JSON.stringify({
-        componentKey: `${componentKey}`
-      })
-      send.call(el.context.socket, 'route', data)
+    const data = JSON.stringify({
+      componentKey: `${componentKey}`
+    })
+    send.call(el.context.socket, 'route', data)
 
-      ev.preventDefault()
-      ev.stopPropagation()
-      return false
-    }
+    ev.preventDefault()
+    ev.stopPropagation()
+    return false
   },
 
   Inspector: {
     state: {},
 
-    props: (el, s) => ({
+    transition: 'all, defaultBezier, X',
+    position: 'fixed',
+    hide: (el, s) => !(s.area && s.parent.debugging),
+    style: {
+      boxShadow: '0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A',
+      zIndex: '9999999',
+      borderRadius: '10px',
+      pointerEvents: 'none'
+    },
+
+    Span: {
+      position: 'absolute',
+      margin: 'A2 0',
+      fontSize: 'Z',
+      color: 'text',
+      // color: 'blue',
+      zIndex: '99999999',
       transition: 'all, defaultBezier, X',
-      position: 'fixed',
-      hide: !(s.area && s.parent.debugging),
+      textDecoration: 'underline',
+      fontWeight: '500',
+      top: '100%',
       style: {
-        boxShadow: '0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A',
-        zIndex: '9999999',
-        borderRadius: '10px',
-        pointerEvents: 'none'
-      }
-    }),
-
-    span: {
-      props: {
-        position: 'absolute',
-        margin: 'A2 0',
-        fontSize: 'Z',
-        color: 'text',
-        // color: 'blue',
-        zIndex: '99999999',
-        transition: 'all, defaultBezier, X',
-        textDecoration: 'underline',
-        fontWeight: '500',
-        top: '100%',
-        style: {
-          boxShadow: '0 25px 10px 35px black',
-          textShadow: '0 0 10px black'
-        },
-        text: '{{ focusKey }}'
-      }
+        boxShadow: '0 25px 10px 35px black',
+        textShadow: '0 0 10px black'
+      },
+      text: '{{ focusKey }}'
     },
 
-    on: {
-      init: ({ context }) => {
-        const { components } = context
-
-        if (isObject(components)) {
-          const { Content, ...rest } = components
-          for (const key in rest) {
-            if (smblsUI[key]) continue
-            if (!rest[key].__ref) rest[key].__ref = {}
-            if (!rest[key].__ref.__componentKey) {
-              rest[key].__ref.__componentKey = key
-            }
+    onInit: ({ context }) => {
+      const { components } = context
+
+      if (isObject(components)) {
+        const { Content, ...rest } = components
+        for (const key in rest) {
+          if (smblsUI[key]) continue
+          if (!rest[key].__ref) rest[key].__ref = {}
+          if (!rest[key].__ref.__componentKey) {
+            rest[key].__ref.__componentKey = key
           }
         }
-      },
-      beforeUpdate: (ch, el, s) => {
-        const { area } = s
-        const isDebugging = s.area && s.parent.debugging
-
-        let style
-        if (!isDebugging) {
-          style = 'display: none !important'
-        } else if (area) {
-          const { x, y, width, height } = area
-          // el.node.style = Object.stringify({
-          //   top: y - 6 + 'px',
-          //   left: x - 6 + 'px',
-          //   width: width + 12 + 'px',
-          //   height: height + 12 + 'px'
-          // })
-          style = `
+      }
+    },
+    onBeforeUpdate: (ch, el, s) => {
+      const { area } = s
+      const isDebugging = s.area && s.parent.debugging
+
+      let style
+      if (!isDebugging) {
+        style = 'display: none !important'
+      } else if (area) {
+        const { x, y, width, height } = area
+        // el.node.style = Object.stringify({
+        //   top: y - 6 + 'px',
+        //   left: x - 6 + 'px',
+        //   width: width + 12 + 'px',
+        //   height: height + 12 + 'px'
+        // })
+        style = `
             display: block !important;
             top: ${y - 6}px;
             left: ${x - 6}px;
             width: ${width + 12}px;
             height: ${height + 12}px;
           `
-        }
+      }
 
-        el.node.style = style
-        el.span.node.innerText = s.focusKey
+      el.node.style = style
+      el.Span.node.innerText = s.focusKey
 
-        return false
-      }
+      return false
     }
   }
 }

package/dist/cjs/Inspect.js

@@ -34,26 +34,23 @@ module.exports = __toCommonJS(Inspect_exports);
 var smblsUI = __toESM(require("@symbo.ls/uikit"), 1);
 var import_utils = require("@domql/utils");
 var import_client = require("@symbo.ls/socket/client");
-function returnStringExtend(extend) {
-  return (0, import_utils.isString)(extend) ? extend : (0, import_utils.isArray)(extend) ? extend.find((extItem) => (0, import_utils.isString)(extItem)) : "";
+function returnStringExtend(_extends) {
+  return (0, import_utils.isString)(_extends) ? _extends : (0, import_utils.isArray)(_extends) ? _extends.find((extItem) => (0, import_utils.isString)(extItem)) : "";
 }
 function getComponentKey(el) {
-  if (!el)
-    return;
+  if (!el) return;
   const __componentKey = el.__ref.__componentKey;
-  const extendStr = el.extend && returnStringExtend(el.extend);
-  const parentChildExtendStr = el.parent && el.parent.childExtend && returnStringExtend(el.parent.childExtend);
-  return (__componentKey || extendStr || parentChildExtendStr || "").split("_")[0].split(".")[0].split("+")[0];
+  const extendsStr = el.extends && returnStringExtend(el.extends);
+  const parentChildExtendStr = el.parent && el.parent.childExtends && returnStringExtend(el.parent.childExtends);
+  return (__componentKey || extendsStr || parentChildExtendStr || "").split("_")[0].split(".")[0].split("+")[0];
 }
 function findComponent(el) {
-  if (!el || !el.__ref)
-    return;
+  if (!el || !el.__ref) return;
   const { components, pages, editor } = el.context;
   const componentKey = getComponentKey(el);
   if (editor && editor.onInitInspect) {
     const initInspectReturns = editor.onInitInspect(componentKey, el, el.state);
-    if (!initInspectReturns)
-      return findComponent(el.parent);
+    if (!initInspectReturns) return findComponent(el.parent);
   }
   if (componentKey && (components[componentKey] || pages[componentKey])) {
     return el;
@@ -83,128 +80,112 @@ const onInspect = (app, state, ctx) => {
   };
 };
 const Inspect = {
-  props: {
-    ".preventSelect": { userSelect: "none" },
-    "!preventSelect": { userSelect: "auto" },
-    onInspect,
-    onMousemove: (ev, e, state) => {
-      const el = ev.target.ref;
-      const component = findComponent(el);
-      const focusState = e.Inspector.state;
-      if (!component || !state.debugging || !component.__ref)
-        return focusState.update({ area: false });
-      const componentKey = getComponentKey(component);
-      const updateValue = (area) => {
-        focusState.update({ area, focusKey: componentKey });
-      };
-      const update = () => {
-        if (ev.altKey && ev.shiftKey) {
-          const { x, y, width, height } = component.node.getBoundingClientRect();
-          const area = { x, y, width, height };
-          if (!focusState.area)
-            return updateValue(area);
-          if (focusState.area.x !== area.x)
-            updateValue(area);
-        } else if (focusState.area) {
-          focusState.update({ area: false });
-        }
-      };
-      window.requestAnimationFrame(() => {
-        update();
-        window.requestAnimationFrame(update);
-      });
-    },
-    onMousedown: (ev, elem, state) => {
-      if (!state.debugging)
-        return;
-      const el = ev.target.ref;
-      const component = findComponent(el);
-      if (!component)
-        return;
-      const componentKey = getComponentKey(component);
-      if (!componentKey)
-        return;
-      const editor = el.context.editor;
-      if (editor && editor.onInspect) {
-        return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
+  ".preventSelect": { userSelect: "none" },
+  "!preventSelect": { userSelect: "auto" },
+  onInspect,
+  onMousemove: (ev, e, state) => {
+    const el = ev.target.ref;
+    const component = findComponent(el);
+    const focusState = e.Inspector.state;
+    if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false });
+    const componentKey = getComponentKey(component);
+    const updateValue = (area) => {
+      focusState.update({ area, focusKey: componentKey });
+    };
+    const update = () => {
+      if (ev.altKey && ev.shiftKey) {
+        const { x, y, width, height } = component.node.getBoundingClientRect();
+        const area = { x, y, width, height };
+        if (!focusState.area) return updateValue(area);
+        if (focusState.area.x !== area.x) updateValue(area);
+      } else if (focusState.area) {
+        focusState.update({ area: false });
       }
-      const data = JSON.stringify({
-        componentKey: `${componentKey}`
-      });
-      import_client.send.call(el.context.socket, "route", data);
-      ev.preventDefault();
-      ev.stopPropagation();
-      return false;
+    };
+    window.requestAnimationFrame(() => {
+      update();
+      window.requestAnimationFrame(update);
+    });
+  },
+  onMousedown: (ev, elem, state) => {
+    if (!state.debugging) return;
+    const el = ev.target.ref;
+    const component = findComponent(el);
+    if (!component) return;
+    const componentKey = getComponentKey(component);
+    if (!componentKey) return;
+    const editor = el.context.editor;
+    if (editor && editor.onInspect) {
+      return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
     }
+    const data = JSON.stringify({
+      componentKey: `${componentKey}`
+    });
+    import_client.send.call(el.context.socket, "route", data);
+    ev.preventDefault();
+    ev.stopPropagation();
+    return false;
   },
   Inspector: {
     state: {},
-    props: (el, s) => ({
+    transition: "all, defaultBezier, X",
+    position: "fixed",
+    hide: (el, s) => !(s.area && s.parent.debugging),
+    style: {
+      boxShadow: "0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A",
+      zIndex: "9999999",
+      borderRadius: "10px",
+      pointerEvents: "none"
+    },
+    Span: {
+      position: "absolute",
+      margin: "A2 0",
+      fontSize: "Z",
+      color: "text",
+      // color: 'blue',
+      zIndex: "99999999",
       transition: "all, defaultBezier, X",
-      position: "fixed",
-      hide: !(s.area && s.parent.debugging),
+      textDecoration: "underline",
+      fontWeight: "500",
+      top: "100%",
       style: {
-        boxShadow: "0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A",
-        zIndex: "9999999",
-        borderRadius: "10px",
-        pointerEvents: "none"
-      }
-    }),
-    span: {
-      props: {
-        position: "absolute",
-        margin: "A2 0",
-        fontSize: "Z",
-        color: "text",
-        // color: 'blue',
-        zIndex: "99999999",
-        transition: "all, defaultBezier, X",
-        textDecoration: "underline",
-        fontWeight: "500",
-        top: "100%",
-        style: {
-          boxShadow: "0 25px 10px 35px black",
-          textShadow: "0 0 10px black"
-        },
-        text: "{{ focusKey }}"
-      }
+        boxShadow: "0 25px 10px 35px black",
+        textShadow: "0 0 10px black"
+      },
+      text: "{{ focusKey }}"
     },
-    on: {
-      init: ({ context }) => {
-        const { components } = context;
-        if ((0, import_utils.isObject)(components)) {
-          const { Content, ...rest } = components;
-          for (const key in rest) {
-            if (smblsUI[key])
-              continue;
-            if (!rest[key].__ref)
-              rest[key].__ref = {};
-            if (!rest[key].__ref.__componentKey) {
-              rest[key].__ref.__componentKey = key;
-            }
+    onInit: ({ context }) => {
+      const { components } = context;
+      if ((0, import_utils.isObject)(components)) {
+        const { Content, ...rest } = components;
+        for (const key in rest) {
+          if (smblsUI[key]) continue;
+          if (!rest[key].__ref) rest[key].__ref = {};
+          if (!rest[key].__ref.__componentKey) {
+            rest[key].__ref.__componentKey = key;
           }
         }
-      },
-      beforeUpdate: (ch, el, s) => {
-        const { area } = s;
-        const isDebugging = s.area && s.parent.debugging;
-        let style;
-        if (!isDebugging) {
-          style = "display: none !important";
-        } else if (area) {
-          const { x, y, width, height } = area;
-          style = `
+      }
+    },
+    onBeforeUpdate: (ch, el, s) => {
+      const { area } = s;
+      const isDebugging = s.area && s.parent.debugging;
+      let style;
+      if (!isDebugging) {
+        style = "display: none !important";
+      } else if (area) {
+        const { x, y, width, height } = area;
+        style = `
             display: block !important;
             top: ${y - 6}px;
             left: ${x - 6}px;
             width: ${width + 12}px;
             height: ${height + 12}px;
           `;
-        }
-        el.node.style = style;
-        el.span.node.innerText = s.focusKey;
-        return false;
       }
+      el.node.style = style;
+      el.Span.node.innerText = s.focusKey;
+      return false;
     }
   }
 };

package/dist/cjs/SyncNotifications.js

@@ -88,8 +88,7 @@ const Notifications = {
       onClick: (e, el, s) => {
         delete s.notifications[el.key];
         el.setProps({ animation: "fadeOutDown" });
-        if (s.onClose)
-          s.onClose(e, el, s);
+        if (s.onClose) s.onClose(e, el, s);
       }
     }),
     IconText: null,

package/dist/cjs/index.js

@@ -16,15 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var sync_exports = {};
-__export(sync_exports, {
+var index_exports = {};
+__export(index_exports, {
   DefaultSyncApp: () => DefaultSyncApp,
   Inspect: () => import_Inspect.Inspect,
   Notifications: () => import_SyncNotifications.Notifications,
   SyncComponent: () => SyncComponent,
   connectToSocket: () => connectToSocket
 });
-module.exports = __toCommonJS(sync_exports);
+module.exports = __toCommonJS(index_exports);
 var import_router = require("@domql/router");
 var import_init = require("@symbo.ls/init");
 var import_client = require("@symbo.ls/socket/client");
@@ -45,8 +45,7 @@ const onChange = (el, s, ctx) => {
   return (event, data) => {
     if (event === "change") {
       const obj = JSON.parse(data);
-      if (!(obj == null ? void 0 : obj.DATA))
-        return;
+      if (!(obj == null ? void 0 : obj.DATA)) return;
       const { state, designSystem, pages, components, snippets, functions } = obj.DATA;
       const { utils } = ctx;
       if (pages) {
@@ -63,17 +62,14 @@ const onChange = (el, s, ctx) => {
       }
       if (state) {
         const route = state.route;
-        if (route)
-          (utils.router || import_router.router)(route.replace("/state", "") || "/", el, {});
-        else if (!(snippets && functions && components && pages))
-          s.update(state);
+        if (route) (utils.router || import_router.router)(route.replace("/state", "") || "/", el, {});
+        else if (!(snippets && functions && components && pages)) s.update(state);
       }
       if (snippets || functions || components || pages) {
         const { pathname, search, hash } = ctx.window.location;
         (utils.router || import_router.router)(pathname + search + hash, el, {});
       }
-      if (designSystem)
-        (0, import_init.init)(designSystem);
+      if (designSystem) (0, import_init.init)(designSystem);
     }
     if (ctx.editor.verbose && event === "clients") {
       (0, import_SyncNotifications.connectedToSymbols)(data, el, s);
@@ -96,5 +92,5 @@ const SyncComponent = {
   }
 };
 const DefaultSyncApp = {
-  extend: [SyncComponent, import_Inspect.Inspect, import_SyncNotifications.Notifications]
+  extends: [SyncComponent, import_Inspect.Inspect, import_SyncNotifications.Notifications]
 };

package/dist/esm/Inspect.js

@@ -16,26 +16,23 @@ var __objRest = (source, exclude) => {
 import * as smblsUI from "@symbo.ls/uikit";
 import { isObject, isString, isArray } from "@domql/utils";
 import { send } from "@symbo.ls/socket/client";
-function returnStringExtend(extend) {
-  return isString(extend) ? extend : isArray(extend) ? extend.find((extItem) => isString(extItem)) : "";
+function returnStringExtend(_extends) {
+  return isString(_extends) ? _extends : isArray(_extends) ? _extends.find((extItem) => isString(extItem)) : "";
 }
 function getComponentKey(el) {
-  if (!el)
-    return;
+  if (!el) return;
   const __componentKey = el.__ref.__componentKey;
-  const extendStr = el.extend && returnStringExtend(el.extend);
-  const parentChildExtendStr = el.parent && el.parent.childExtend && returnStringExtend(el.parent.childExtend);
-  return (__componentKey || extendStr || parentChildExtendStr || "").split("_")[0].split(".")[0].split("+")[0];
+  const extendsStr = el.extends && returnStringExtend(el.extends);
+  const parentChildExtendStr = el.parent && el.parent.childExtends && returnStringExtend(el.parent.childExtends);
+  return (__componentKey || extendsStr || parentChildExtendStr || "").split("_")[0].split(".")[0].split("+")[0];
 }
 function findComponent(el) {
-  if (!el || !el.__ref)
-    return;
+  if (!el || !el.__ref) return;
   const { components, pages, editor } = el.context;
   const componentKey = getComponentKey(el);
   if (editor && editor.onInitInspect) {
     const initInspectReturns = editor.onInitInspect(componentKey, el, el.state);
-    if (!initInspectReturns)
-      return findComponent(el.parent);
+    if (!initInspectReturns) return findComponent(el.parent);
   }
   if (componentKey && (components[componentKey] || pages[componentKey])) {
     return el;
@@ -65,128 +62,112 @@ const onInspect = (app, state, ctx) => {
   };
 };
 const Inspect = {
-  props: {
-    ".preventSelect": { userSelect: "none" },
-    "!preventSelect": { userSelect: "auto" },
-    onInspect,
-    onMousemove: (ev, e, state) => {
-      const el = ev.target.ref;
-      const component = findComponent(el);
-      const focusState = e.Inspector.state;
-      if (!component || !state.debugging || !component.__ref)
-        return focusState.update({ area: false });
-      const componentKey = getComponentKey(component);
-      const updateValue = (area) => {
-        focusState.update({ area, focusKey: componentKey });
-      };
-      const update = () => {
-        if (ev.altKey && ev.shiftKey) {
-          const { x, y, width, height } = component.node.getBoundingClientRect();
-          const area = { x, y, width, height };
-          if (!focusState.area)
-            return updateValue(area);
-          if (focusState.area.x !== area.x)
-            updateValue(area);
-        } else if (focusState.area) {
-          focusState.update({ area: false });
-        }
-      };
-      window.requestAnimationFrame(() => {
-        update();
-        window.requestAnimationFrame(update);
-      });
-    },
-    onMousedown: (ev, elem, state) => {
-      if (!state.debugging)
-        return;
-      const el = ev.target.ref;
-      const component = findComponent(el);
-      if (!component)
-        return;
-      const componentKey = getComponentKey(component);
-      if (!componentKey)
-        return;
-      const editor = el.context.editor;
-      if (editor && editor.onInspect) {
-        return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
+  ".preventSelect": { userSelect: "none" },
+  "!preventSelect": { userSelect: "auto" },
+  onInspect,
+  onMousemove: (ev, e, state) => {
+    const el = ev.target.ref;
+    const component = findComponent(el);
+    const focusState = e.Inspector.state;
+    if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false });
+    const componentKey = getComponentKey(component);
+    const updateValue = (area) => {
+      focusState.update({ area, focusKey: componentKey });
+    };
+    const update = () => {
+      if (ev.altKey && ev.shiftKey) {
+        const { x, y, width, height } = component.node.getBoundingClientRect();
+        const area = { x, y, width, height };
+        if (!focusState.area) return updateValue(area);
+        if (focusState.area.x !== area.x) updateValue(area);
+      } else if (focusState.area) {
+        focusState.update({ area: false });
       }
-      const data = JSON.stringify({
-        componentKey: `${componentKey}`
-      });
-      send.call(el.context.socket, "route", data);
-      ev.preventDefault();
-      ev.stopPropagation();
-      return false;
+    };
+    window.requestAnimationFrame(() => {
+      update();
+      window.requestAnimationFrame(update);
+    });
+  },
+  onMousedown: (ev, elem, state) => {
+    if (!state.debugging) return;
+    const el = ev.target.ref;
+    const component = findComponent(el);
+    if (!component) return;
+    const componentKey = getComponentKey(component);
+    if (!componentKey) return;
+    const editor = el.context.editor;
+    if (editor && editor.onInspect) {
+      return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true });
     }
+    const data = JSON.stringify({
+      componentKey: `${componentKey}`
+    });
+    send.call(el.context.socket, "route", data);
+    ev.preventDefault();
+    ev.stopPropagation();
+    return false;
   },
   Inspector: {
     state: {},
-    props: (el, s) => ({
+    transition: "all, defaultBezier, X",
+    position: "fixed",
+    hide: (el, s) => !(s.area && s.parent.debugging),
+    style: {
+      boxShadow: "0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A",
+      zIndex: "9999999",
+      borderRadius: "10px",
+      pointerEvents: "none"
+    },
+    Span: {
+      position: "absolute",
+      margin: "A2 0",
+      fontSize: "Z",
+      color: "text",
+      // color: 'blue',
+      zIndex: "99999999",
       transition: "all, defaultBezier, X",
-      position: "fixed",
-      hide: !(s.area && s.parent.debugging),
+      textDecoration: "underline",
+      fontWeight: "500",
+      top: "100%",
       style: {
-        boxShadow: "0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A",
-        zIndex: "9999999",
-        borderRadius: "10px",
-        pointerEvents: "none"
-      }
-    }),
-    span: {
-      props: {
-        position: "absolute",
-        margin: "A2 0",
-        fontSize: "Z",
-        color: "text",
-        // color: 'blue',
-        zIndex: "99999999",
-        transition: "all, defaultBezier, X",
-        textDecoration: "underline",
-        fontWeight: "500",
-        top: "100%",
-        style: {
-          boxShadow: "0 25px 10px 35px black",
-          textShadow: "0 0 10px black"
-        },
-        text: "{{ focusKey }}"
-      }
+        boxShadow: "0 25px 10px 35px black",
+        textShadow: "0 0 10px black"
+      },
+      text: "{{ focusKey }}"
     },
-    on: {
-      init: ({ context }) => {
-        const { components } = context;
-        if (isObject(components)) {
-          const _a = components, { Content } = _a, rest = __objRest(_a, ["Content"]);
-          for (const key in rest) {
-            if (smblsUI[key])
-              continue;
-            if (!rest[key].__ref)
-              rest[key].__ref = {};
-            if (!rest[key].__ref.__componentKey) {
-              rest[key].__ref.__componentKey = key;
-            }
+    onInit: ({ context }) => {
+      const { components } = context;
+      if (isObject(components)) {
+        const _a = components, { Content } = _a, rest = __objRest(_a, ["Content"]);
+        for (const key in rest) {
+          if (smblsUI[key]) continue;
+          if (!rest[key].__ref) rest[key].__ref = {};
+          if (!rest[key].__ref.__componentKey) {
+            rest[key].__ref.__componentKey = key;
           }
         }
-      },
-      beforeUpdate: (ch, el, s) => {
-        const { area } = s;
-        const isDebugging = s.area && s.parent.debugging;
-        let style;
-        if (!isDebugging) {
-          style = "display: none !important";
-        } else if (area) {
-          const { x, y, width, height } = area;
-          style = `
+      }
+    },
+    onBeforeUpdate: (ch, el, s) => {
+      const { area } = s;
+      const isDebugging = s.area && s.parent.debugging;
+      let style;
+      if (!isDebugging) {
+        style = "display: none !important";
+      } else if (area) {
+        const { x, y, width, height } = area;
+        style = `
             display: block !important;
             top: ${y - 6}px;
             left: ${x - 6}px;
             width: ${width + 12}px;
             height: ${height + 12}px;
           `;
-        }
-        el.node.style = style;
-        el.span.node.innerText = s.focusKey;
-        return false;
       }
+      el.node.style = style;
+      el.Span.node.innerText = s.focusKey;
+      return false;
     }
   }
 };

package/dist/esm/SyncNotifications.js

@@ -64,8 +64,7 @@ const Notifications = {
       onClick: (e, el, s) => {
         delete s.notifications[el.key];
         el.setProps({ animation: "fadeOutDown" });
-        if (s.onClose)
-          s.onClose(e, el, s);
+        if (s.onClose) s.onClose(e, el, s);
       }
     }),
     IconText: null,

package/dist/esm/index.js

@@ -18,8 +18,7 @@ const onChange = (el, s, ctx) => {
   return (event, data) => {
     if (event === "change") {
       const obj = JSON.parse(data);
-      if (!(obj == null ? void 0 : obj.DATA))
-        return;
+      if (!(obj == null ? void 0 : obj.DATA)) return;
       const { state, designSystem, pages, components, snippets, functions } = obj.DATA;
       const { utils } = ctx;
       if (pages) {
@@ -36,17 +35,14 @@ const onChange = (el, s, ctx) => {
       }
       if (state) {
         const route = state.route;
-        if (route)
-          (utils.router || router)(route.replace("/state", "") || "/", el, {});
-        else if (!(snippets && functions && components && pages))
-          s.update(state);
+        if (route) (utils.router || router)(route.replace("/state", "") || "/", el, {});
+        else if (!(snippets && functions && components && pages)) s.update(state);
       }
       if (snippets || functions || components || pages) {
         const { pathname, search, hash } = ctx.window.location;
         (utils.router || router)(pathname + search + hash, el, {});
       }
-      if (designSystem)
-        init(designSystem);
+      if (designSystem) init(designSystem);
     }
     if (ctx.editor.verbose && event === "clients") {
       connectedToSymbols(data, el, s);
@@ -69,7 +65,7 @@ const SyncComponent = {
   }
 };
 const DefaultSyncApp = {
-  extend: [SyncComponent, Inspect, Notifications]
+  extends: [SyncComponent, Inspect, Notifications]
 };
 export {
   DefaultSyncApp,

package/index.js

@@ -84,5 +84,5 @@ export const SyncComponent = {
 }
 
 export const DefaultSyncApp = {
-  extend: [SyncComponent, Inspect, Notifications]
+  extends: [SyncComponent, Inspect, Notifications]
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/sync",
-  "version": "2.11.523",
+  "version": "3.0.2",
   "main": "index.js",
   "module": "index.js",
-  "gitHead": "08e5b257605d1475f4628529f8e35373d87eb369",
+  "gitHead": "c4dacc88fa3a65574680d11e320307dd2a22e6e9",
   "files": [
     "*.js",
     "dist"
@@ -30,12 +30,12 @@
   },
   "dependencies": {
     "@domql/globals": "latest",
-    "@domql/router": "^2.5.0",
-    "@domql/utils": "^2.5.0",
-    "@symbo.ls/init": "^2.11.523",
-    "@symbo.ls/scratch": "^2.11.523",
-    "@symbo.ls/socket": "^2.11.523",
-    "@symbo.ls/uikit": "^2.11.523"
+    "@domql/router": "^3.0.0",
+    "@domql/utils": "^3.0.0",
+    "@symbo.ls/init": "^3.0.2",
+    "@symbo.ls/scratch": "^3.0.2",
+    "@symbo.ls/socket": "^3.0.2",
+    "@symbo.ls/uikit": "^3.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.0"