@_unit/unit 1.0.19 → 1.0.20

package/public/sw.js

@@ -0,0 +1,90 @@
+"use strict";
+(() => {
+  // <define:globalThis.env>
+  var define_globalThis_env_default = { NODE_ENV: "development" };
+
+  // src/v.ts
+  var v = 0;
+
+  // src/client/env.ts
+  var env = define_globalThis_env_default && define_globalThis_env_default.NODE_ENV || "development";
+  var dev = env === "development";
+
+  // src/client/platform/web/sw.ts
+  var CACHE = `${v}`;
+  var CACHE_LIST_FONT = [
+    "/fonts/Inconsolata-Regular.woff2",
+    "/fonts/Inconsolata-Regular.woff"
+  ];
+  var CACHE_LIST_FAVICON = [
+    "/favicon.ico",
+    "/favicon_16.png",
+    "/favicon_64.png",
+    "/favicon_32.png",
+    "/favicon_57.png",
+    "/favicon_60.png",
+    "/favicon_72.png",
+    "/favicon_76.png",
+    "/favicon_96.png",
+    "/favicon_114.png",
+    "/favicon_120.png",
+    "/favicon_144.png",
+    "/favicon_152.png",
+    "/favicon_160.png",
+    "/favicon_180.png",
+    "/favicon_192.png",
+    "/browserconfig.xml",
+    "/safari-pinned-tab.svg"
+  ];
+  var CACHE_LIST_MANIFEST = ["/manifest.json"];
+  var CACHE_LIST_HTML = ["/", "/index.html"];
+  var CACHE_LIST_INDEX_JS = [
+    "/index.js",
+    ...dev ? ["/index.js.map"] : []
+  ];
+  var CACHE_LIST = [
+    ...CACHE_LIST_HTML,
+    ...CACHE_LIST_INDEX_JS,
+    ...CACHE_LIST_MANIFEST,
+    ...CACHE_LIST_FAVICON,
+    ...CACHE_LIST_FONT
+  ];
+  self.addEventListener("install", (event) => {
+    event.waitUntil(
+      caches.open(CACHE).then((cache) => {
+        return cache.addAll(dev ? [] : CACHE_LIST);
+      }).then(() => {
+        return self.skipWaiting();
+      })
+    );
+  });
+  self.addEventListener("activate", (event) => {
+    event.waitUntil(
+      caches.keys().then(
+        (keys) => Promise.all(
+          keys.filter((key) => key !== CACHE).map((key) => caches.delete(key))
+        )
+      )
+    );
+    return self.clients.claim();
+  });
+  function _fetch(request) {
+    return fetch(request, {
+      credentials: "include"
+    });
+  }
+  self.addEventListener("fetch", function(event) {
+    const { request } = event;
+    const { url } = request;
+    event.respondWith(
+      caches.match(url).then((response) => {
+        if (response) {
+          return response;
+        } else {
+          return _fetch(request);
+        }
+      })
+    );
+  });
+})();
+//# sourceMappingURL=sw.js.map

package/public/sw.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["<define:globalThis.env>", "../src/v.ts", "../src/client/env.ts", "../src/client/platform/web/sw.ts"],
+  "sourcesContent": ["", "export const v: number = 0\n", "const env = (globalThis.env && globalThis.env.NODE_ENV) || 'development'\n\nexport const dev = env === 'development'\n\nexport const prod = !dev\n\nexport default env\n", "declare const self: ServiceWorkerGlobalScope\n\nimport { v } from '../../../v'\nimport { dev } from '../../env'\n\nconst CACHE = `${v}`\n\nconst CACHE_LIST_FONT: string[] = [\n  '/fonts/Inconsolata-Regular.woff2',\n  '/fonts/Inconsolata-Regular.woff',\n]\n\nconst CACHE_LIST_FAVICON: string[] = [\n  '/favicon.ico',\n  '/favicon_16.png',\n  '/favicon_64.png',\n  '/favicon_32.png',\n  '/favicon_57.png',\n  '/favicon_60.png',\n  '/favicon_72.png',\n  '/favicon_76.png',\n  '/favicon_96.png',\n  '/favicon_114.png',\n  '/favicon_120.png',\n  '/favicon_144.png',\n  '/favicon_152.png',\n  '/favicon_160.png',\n  '/favicon_180.png',\n  '/favicon_192.png',\n  '/browserconfig.xml',\n  '/safari-pinned-tab.svg',\n]\n\nconst CACHE_LIST_MANIFEST: string[] = ['/manifest.json']\n\nconst CACHE_LIST_HTML: string[] = ['/', '/index.html']\n\nconst CACHE_LIST_INDEX_JS: string[] = [\n  '/index.js',\n  ...(dev ? ['/index.js.map'] : []),\n]\n\nconst CACHE_LIST: string[] = [\n  ...CACHE_LIST_HTML,\n  ...CACHE_LIST_INDEX_JS,\n  ...CACHE_LIST_MANIFEST,\n  ...CACHE_LIST_FAVICON,\n  ...CACHE_LIST_FONT,\n]\n\nself.addEventListener('install', (event) => {\n  event.waitUntil(\n    caches\n      .open(CACHE)\n      .then((cache) => {\n        return cache.addAll(dev ? [] : CACHE_LIST)\n      })\n      .then(() => {\n        return self.skipWaiting()\n      })\n  )\n})\n\nself.addEventListener('activate', (event) => {\n  event.waitUntil(\n    caches\n      .keys()\n      .then((keys) =>\n        Promise.all(\n          keys.filter((key) => key !== CACHE).map((key) => caches.delete(key))\n        )\n      )\n  )\n\n  return self.clients.claim()\n})\n\nfunction _fetch(request) {\n  return fetch(request, {\n    credentials: 'include',\n  })\n}\n\nself.addEventListener('fetch', function (event) {\n  const { request } = event\n\n  const { url } = request\n\n  event.respondWith(\n    caches.match(url).then((response) => {\n      if (response) {\n        return response\n      } else {\n        return _fetch(request)\n      }\n    })\n  )\n})\n\nexport type {}\n"],
+  "mappings": ";;;AAAA,wCAAC,UAAY,cAAa;;;ACAnB,MAAM,IAAY;;;ACAzB,MAAM,MAAO,iCAAkB,8BAAe,YAAa;AAEpD,MAAM,MAAM,QAAQ;;;ACG3B,MAAM,QAAQ,GAAG;AAEjB,MAAM,kBAA4B;AAAA,IAChC;AAAA,IACA;AAAA,EACF;AAEA,MAAM,qBAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAM,sBAAgC,CAAC,gBAAgB;AAEvD,MAAM,kBAA4B,CAAC,KAAK,aAAa;AAErD,MAAM,sBAAgC;AAAA,IACpC;AAAA,IACA,GAAI,MAAM,CAAC,eAAe,IAAI,CAAC;AAAA,EACjC;AAEA,MAAM,aAAuB;AAAA,IAC3B,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,OAAK,iBAAiB,WAAW,CAAC,UAAU;AAC1C,UAAM;AAAA,MACJ,OACG,KAAK,KAAK,EACV,KAAK,CAAC,UAAU;AACf,eAAO,MAAM,OAAO,MAAM,CAAC,IAAI,UAAU;AAAA,MAC3C,CAAC,EACA,KAAK,MAAM;AACV,eAAO,KAAK,YAAY;AAAA,MAC1B,CAAC;AAAA,IACL;AAAA,EACF,CAAC;AAED,OAAK,iBAAiB,YAAY,CAAC,UAAU;AAC3C,UAAM;AAAA,MACJ,OACG,KAAK,EACL;AAAA,QAAK,CAAC,SACL,QAAQ;AAAA,UACN,KAAK,OAAO,CAAC,QAAQ,QAAQ,KAAK,EAAE,IAAI,CAAC,QAAQ,OAAO,OAAO,GAAG,CAAC;AAAA,QACrE;AAAA,MACF;AAAA,IACJ;AAEA,WAAO,KAAK,QAAQ,MAAM;AAAA,EAC5B,CAAC;AAED,WAAS,OAAO,SAAS;AACvB,WAAO,MAAM,SAAS;AAAA,MACpB,aAAa;AAAA,IACf,CAAC;AAAA,EACH;AAEA,OAAK,iBAAiB,SAAS,SAAU,OAAO;AAC9C,UAAM,EAAE,QAAQ,IAAI;AAEpB,UAAM,EAAE,IAAI,IAAI;AAEhB,UAAM;AAAA,MACJ,OAAO,MAAM,GAAG,EAAE,KAAK,CAAC,aAAa;AACnC,YAAI,UAAU;AACZ,iBAAO;AAAA,QACT,OAAO;AACL,iBAAO,OAAO,OAAO;AAAA,QACvB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;",
+  "names": []
+}

package/src/API.ts

@@ -39,9 +39,7 @@ import { IUserMediaOpt } from './types/global/IUserMedia'
 import { IWakeLock, IWakeLockOpt } from './types/global/IWakeLock'
 import { J } from './types/interface/J'
 
-declare global {
-  type ImageCapture = any
-}
+export type ImageCapture = any
 
 export type BasicHTTPResponse = {
   status: number

package/src/Class/Graph/moveSubgraph.ts

@@ -1175,6 +1175,7 @@ export function movePlug(
         plug: {
           [nextSubPinId]: nextSubPinSpec_,
         },
+        ref: pinSpec.ref,
       },
       data,
       false,

package/src/build/buildBundle.ts

@@ -18,7 +18,7 @@ export async function buildBundle(
 
   const bootPathExists = await pathExists(bootPath)
 
-  const bundle = await readJSON(bundlePath)
+  const bundle = await readJSON(bundlePath, 'utf8')
 
   const idSet = includeSystem ? undefined : buildIdSetFromBundle(bundle)
 

package/src/bundle.ts

@@ -7,7 +7,6 @@ import { GraphSpec } from './types/GraphSpec'
 import { GraphSpecs } from './types/GraphSpecs'
 import { GraphUnitSpec } from './types/GraphUnitSpec'
 import { UnitBundleSpec } from './types/UnitBundleSpec'
-import { weakMerge } from './weakMerge'
 
 export function unitBundleSpec(
   unit: GraphUnitSpec,
@@ -125,23 +124,7 @@ function _bundleUnits(
         const tree = getTree(data)
 
         if (tree.type === TreeNodeType.Unit) {
-          const str = tree.value.substring(1)
-
-          const bundle = evaluate(str, specs, {}) as UnitBundleSpec
-
-          const _spec = getSpec(
-            weakMerge(bundle.specs ?? {}, specs),
-            bundle.unit.id
-          ) as GraphSpec
-
-          // _bundle(_spec, specs, custom, branch)
-
-          if (
-            !specs[bundle.unit.id] ||
-            !isSystemSpecId(specs, bundle.unit.id)
-          ) {
-            // custom[bundle.unit.id] = _spec
-          }
+          const bundle = evaluate(tree.value, specs, {}) as UnitBundleSpec
 
           for (const specId in bundle.specs) {
             const spec = bundle.specs[specId]

package/src/client/component.ts

@@ -372,12 +372,14 @@ export class Component<
     } = this.$system
     // console.log(this.constructor.name, 'setPointerCapture', pointerId)
 
-    if (this.$element instanceof Text) {
+    const leaf = this.getFirstRootLeaf()
+
+    if (leaf.$node instanceof Text) {
       throw new Error('cannot set pointer capture on a text element')
     }
 
     this._releasePointerCapture[pointerId] = setPointerCapture(
-      this.$element,
+      leaf.$node,
       pointerId
     )
   }
@@ -714,7 +716,13 @@ export class Component<
       (parent, leaf_comp) => {
         const index = parent.$parentRoot.indexOf(leaf_comp)
 
-        parent.domRemoveParentRootAt(leaf_comp, 'default', index, index)
+        parent.domRemoveParentRootAt(
+          leaf_comp,
+          'default',
+          index,
+          index,
+          this.$slotParent
+        )
       }
     )
   }
@@ -730,7 +738,13 @@ export class Component<
       (parent, leaf_comp) => {
         const index = parent.$parentRoot.indexOf(leaf_comp)
 
-        parent.domRemoveParentRootAt(leaf_comp, 'default', index, index)
+        parent.domRemoveParentRootAt(
+          leaf_comp,
+          'default',
+          index,
+          index,
+          this.$slotParent
+        )
       }
     )
   }
@@ -1234,7 +1248,7 @@ export class Component<
   }
 
   getRect(): Rect {
-    return getRect(this.$element)
+    return getRect(this.$node)
   }
 
   getBoundingClientRect(): Rect {
@@ -1371,7 +1385,7 @@ export class Component<
 
     at = at ?? slot.$slotChildren[slotName].indexOf(child)
 
-    slot.domRemoveParentChildAt(child, slotName, at, at)
+    slot.domRemoveParentChildAt(child, slotName, at, at, this.$slotParent)
 
     child.$slotParent = null
   }
@@ -1934,7 +1948,8 @@ export class Component<
               component.$mountRoot[i],
               'default',
               at,
-              at
+              at,
+              this.$slotParent
             )
           } else {
             this.domRemoveRoot(component.$mountRoot[i], at)
@@ -1944,7 +1959,13 @@ export class Component<
         }
       } else {
         if (this.$slotParent) {
-          this.$slotParent.domRemoveParentChildAt(component, 'default', at, at)
+          this.$slotParent.domRemoveParentChildAt(
+            component,
+            'default',
+            at,
+            at,
+            this.$slotParent
+          )
         } else {
           this.domCommitRemoveChild(component)
         }
@@ -1978,7 +1999,7 @@ export class Component<
     for (const component of [...this.$mountRoot]) {
       this.removeRoot(component)
 
-      deep && component.uncollapse(deep)
+      deep && component.uncollapse(deep, this.$slotParent)
     }
   }
 
@@ -2038,7 +2059,7 @@ export class Component<
 
   public unregisterParentRoot(component: Component): void {
     // console.log('unregisgerParentRoot')
-    this.removeParentRoot(component)
+    this.removeParentRoot(component, this.$slotParent)
     this.pullParentRoot(component)
   }
 
@@ -2056,11 +2077,11 @@ export class Component<
     }
   }
 
-  public uncollapse(deep: boolean = true): void {
+  public uncollapse(deep: boolean = true, slotParent?: Component): void {
     for (const component of this.$parentRoot) {
-      this.removeParentRoot(component)
+      this.removeParentRoot(component, slotParent)
 
-      deep && component.uncollapse(deep)
+      deep && component.uncollapse(deep, slotParent ?? this.$slotParent)
     }
   }
 
@@ -2162,6 +2183,16 @@ export class Component<
       if (!component.$primitive) {
         for (const root of component.$mountRoot) {
           this.domAppendParentChildAt(root, slotName, at, at)
+
+          if (!root.$primitive) {
+            let i = 1
+
+            for (const parentRoot of root.$mountParentChildren) {
+              this.domAppendParentChildAt(parentRoot, slotName, at + i, at + i)
+
+              i++
+            }
+          }
         }
       } else {
         this.domCommitAppendChild(component)
@@ -2280,7 +2311,13 @@ export class Component<
     const slot = this.$slot[slotName]
     if (slot === this) {
       const _at = this.$parentChildren.indexOf(component)
-      this.domRemoveParentChildAt(component, slotName, at, _at)
+      this.domRemoveParentChildAt(
+        component,
+        slotName,
+        at,
+        _at,
+        this.$slotParent
+      )
       this.memRemoveParentChildAt(component, slotName, at, _at)
     } else {
       slot.removeParentChild(component, 'default', at)
@@ -2304,7 +2341,8 @@ export class Component<
     component: Component,
     slotName: string,
     at: number,
-    _at: number
+    _at: number,
+    slotParent?: Component
   ): void {
     if (!this.$primitive) {
       if (!component.$primitive) {
@@ -2314,17 +2352,32 @@ export class Component<
               component.$mountRoot[i],
               slotName,
               at,
-              at
+              at,
+              slotParent
             )
           } else {
-            this.domCommitRemoveChild(component)
+            this.domRemoveParentChildAt(
+              component.$mountRoot[i],
+              slotName,
+              at,
+              at,
+              slotParent
+            )
           }
 
           appendChild(component.$element, component.$mountRoot[i].$element)
         }
       } else {
         if (this.$slotParent) {
-          this.$slotParent.domRemoveParentChildAt(component, 'default', at, at)
+          this.$slotParent.domRemoveParentChildAt(
+            component,
+            'default',
+            at,
+            at,
+            slotParent
+          )
+        } else if (slotParent) {
+          slotParent.domCommitRemoveChild(component)
         } else {
           this.domCommitRemoveChild(component)
         }
@@ -2332,9 +2385,22 @@ export class Component<
     } else {
       if (!component.$primitive) {
         for (const root of component.$mountRoot) {
-          this.domRemoveParentChildAt(root, slotName, at, at)
+          this.domRemoveParentChildAt(root, slotName, at, at, slotParent)
 
           appendChild(component.$element, root.$element)
+
+          if (!root.$primitive) {
+            let i = 1
+            for (const parentRoot of root.$mountParentChildren) {
+              this.domRemoveParentChildAt(
+                parentRoot,
+                slotName,
+                at,
+                at,
+                slotParent
+              )
+            }
+          }
         }
       } else {
         this.domCommitRemoveChild(component)
@@ -2390,12 +2456,12 @@ export class Component<
     this.insertParentRootAt(component, 0, slotName)
   }
 
-  public removeParentRoot(component: Component): void {
+  public removeParentRoot(component: Component, slotParent?: Component): void {
     const at = this.$parentRoot.indexOf(component)
     const _at = this.$mountParentRoot.indexOf(component)
     const slotName = this.$parentRootSlotName[at]
     this.postRemoveParentRootAt(component, slotName, at, _at)
-    this.domRemoveParentRootAt(component, slotName, at, _at)
+    this.domRemoveParentRootAt(component, slotName, at, _at, slotParent)
     this.memRemoveParentRootAt(component, slotName, at, _at)
   }
 
@@ -2416,11 +2482,12 @@ export class Component<
     component: Component,
     slotName: string,
     at: number,
-    _at: number
+    _at: number,
+    slotParent?: Component
   ): void {
     // console.log(this.constructor.name, 'domRemoveParentRootAt', component.constructor.name, slotName, at, _at)
     const slot = this.$slot[slotName]
-    slot.domRemoveParentChildAt(component, 'default', at, _at)
+    slot.domRemoveParentChildAt(component, 'default', at, _at, slotParent)
   }
 
   public postRemoveParentRootAt(

package/src/client/extension/src/background.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["background.ts"],
+  "sourcesContent": ["chrome.runtime.onConnect.addListener((port) => {\n  //\n})\n\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n  const { type, method, data } = message\n\n  chrome[type][method](data, (result) => {\n    sendResponse(result)\n  })\n\n  return true\n})\n\nexport default null\n"],
+  "mappings": ";;;AAAA,SAAO,QAAQ,UAAU,YAAY,CAAC,SAAS;AAAA,EAE/C,CAAC;AAED,SAAO,QAAQ,UAAU,YAAY,CAAC,SAAS,QAAQ,iBAAiB;AACtE,UAAM,EAAE,MAAM,QAAQ,KAAK,IAAI;AAE/B,WAAO,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,WAAW;AACrC,mBAAa,MAAM;AAAA,IACrB,CAAC;AAED,WAAO;AAAA,EACT,CAAC;AAED,MAAO,qBAAQ;",
+  "names": []
+}

package/src/client/extension/src/content.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../constant/STRING.ts", "../index.ts", "content.ts"],
+  "sourcesContent": ["export const UNTITLED = 'untitled'\nexport const CALL = 'call'\nexport const CALLBACK = 'callback'\nexport const SEND = 'send'\nexport const WATCH = 'watch'\nexport const UNWATCH = 'unwatch'\nexport const REF = 'ref'\nexport const REF_EXEC = 'ref_exec'\nexport const REF_WATCH = 'ref_watch'\nexport const UNREF = 'unref'\nexport const INIT = 'init'\nexport const TERMINATE = 'terminate'\nexport const CONNECT = 'connect'\nexport const DISCONNECT = 'disconnect'\nexport const EXEC = 'exec'\n", "import { CALL, CALLBACK } from '../../constant/STRING'\nimport { Callback } from '../../types/Callback'\nimport { Dict } from '../../types/Dict'\nimport { uuid } from '../../util/id'\n\nconst _callback: Dict<Callback> = {}\n\nexport const SYSTEM_EXTENSION_ID = '___SYSTEM__EXTENSION___'\n\nexport function getExtensionElement(): HTMLElement {\n  return document.getElementById(SYSTEM_EXTENSION_ID) as HTMLElement\n}\n\nexport function isExtensionInstalled(): boolean {\n  const installed = !!getExtensionElement()\n\n  return installed\n}\n\nexport function dispatchExtensionEvent(\n  type: 'send' | 'callback',\n  id: string,\n  data: any\n) {\n  const element = getExtensionElement()\n\n  element.dispatchEvent(\n    new CustomEvent('message', {\n      detail: { type, id, data },\n    })\n  )\n}\n\nexport function postMessage(data: any, callback: Callback): void {\n  setup()\n\n  const installed = isExtensionInstalled()\n\n  if (installed) {\n    const id = uuid()\n\n    _callback[id] = callback\n\n    dispatchExtensionEvent('send', id, data)\n  } else {\n    callback(undefined, 'extension not installed')\n  }\n}\n\nexport function postCallMessage(data: any, callback: Callback<any>): void {\n  postMessage(\n    {\n      type: CALL,\n      data,\n    },\n    callback\n  )\n}\n\nexport function callExtensionMethod(\n  type: string,\n  method: string,\n  data: any,\n  callback: Callback<any>\n): void {\n  postCallMessage(\n    {\n      type,\n      method,\n      data,\n    },\n    callback\n  )\n}\n\nlet _init = false\n\nexport function setup(): void {\n  if (_init) {\n    return\n  }\n\n  const element = getExtensionElement()\n\n  element.addEventListener('message', (event: CustomEvent<any>) => {\n    const { detail } = event\n\n    const { type, id, data } = detail\n\n    if (type === CALLBACK) {\n      const callback = _callback[id]\n\n      if (callback) {\n        delete _callback[id]\n\n        callback(data)\n      }\n    }\n  })\n\n  _init = true\n}\n", "import { SYSTEM_EXTENSION_ID, dispatchExtensionEvent } from '..'\nimport { CALL } from '../../../constant/STRING'\nimport { Action } from '../../../types/Action'\n\nconst element = document.createElement('div')\n\nelement.style.display = 'none'\n\nelement.id = SYSTEM_EXTENSION_ID\n\ndocument.body.appendChild(element)\n\ntype ExtensionAction = Action & { id?: string }\n\nelement.addEventListener(\n  'message',\n  function (event: CustomEvent<ExtensionAction>) {\n    const { detail } = event\n\n    const { type, id, data } = detail\n\n    if (type === 'send') {\n      const { type: _type, data: _data } = data\n\n      switch (_type) {\n        case CALL:\n          chrome.runtime.sendMessage(_data, (data) => {\n            if (chrome.runtime.lastError) {\n              const err = chrome.runtime.lastError.message.toLowerCase()\n\n              dispatchExtensionEvent('callback', id, { err })\n            } else {\n              dispatchExtensionEvent('callback', id, data)\n            }\n          })\n\n          break\n        default:\n          dispatchExtensionEvent('callback', id, { err: 'not supported' })\n      }\n    } else {\n      // ignore \"callback\"\n    }\n  },\n  false\n)\n\nexport default null\n"],
+  "mappings": ";;;AACO,MAAM,OAAO;;;ACMb,MAAM,sBAAsB;AAE5B,WAAS,sBAAmC;AACjD,WAAO,SAAS,eAAe,mBAAmB;AAAA,EACpD;AAQO,WAAS,uBACd,MACA,IACA,MACA;AACA,UAAMA,WAAU,oBAAoB;AAEpC,IAAAA,SAAQ;AAAA,MACN,IAAI,YAAY,WAAW;AAAA,QACzB,QAAQ,EAAE,MAAM,IAAI,KAAK;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,EACF;;;AC3BA,MAAM,UAAU,SAAS,cAAc,KAAK;AAE5C,UAAQ,MAAM,UAAU;AAExB,UAAQ,KAAK;AAEb,WAAS,KAAK,YAAY,OAAO;AAIjC,UAAQ;AAAA,IACN;AAAA,IACA,SAAU,OAAqC;AAC7C,YAAM,EAAE,OAAO,IAAI;AAEnB,YAAM,EAAE,MAAM,IAAI,KAAK,IAAI;AAE3B,UAAI,SAAS,QAAQ;AACnB,cAAM,EAAE,MAAM,OAAO,MAAM,MAAM,IAAI;AAErC,gBAAQ,OAAO;AAAA,UACb,KAAK;AACH,mBAAO,QAAQ,YAAY,OAAO,CAACC,UAAS;AAC1C,kBAAI,OAAO,QAAQ,WAAW;AAC5B,sBAAM,MAAM,OAAO,QAAQ,UAAU,QAAQ,YAAY;AAEzD,uCAAuB,YAAY,IAAI,EAAE,IAAI,CAAC;AAAA,cAChD,OAAO;AACL,uCAAuB,YAAY,IAAIA,KAAI;AAAA,cAC7C;AAAA,YACF,CAAC;AAED;AAAA,UACF;AACE,mCAAuB,YAAY,IAAI,EAAE,KAAK,gBAAgB,CAAC;AAAA,QACnE;AAAA,MACF,OAAO;AAAA,MAEP;AAAA,IACF;AAAA,IACA;AAAA,EACF;AAEA,MAAO,kBAAQ;",
+  "names": ["element", "data"]
+}

package/src/client/extension/src/manifest.json

@@ -8,10 +8,7 @@
   },
   "content_scripts": [
     {
-      "matches": [
-        "https://unit.land/*",
-        "http://localhost:4000/*"
-      ],
+      "matches": ["https://unit.land/*", "http://localhost:4000/*"],
       "js": ["content.js"]
     }
   ],

package/src/client/extension/src/options.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["options.ts"],
+  "sourcesContent": ["// TODO\n\nconst page = document.getElementById('buttonDiv')\nconst kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1']\nfunction constructOptions(kButtonColors) {\n  for (let item of kButtonColors) {\n    let button = document.createElement('button')\n    button.style.backgroundColor = item\n    button.addEventListener('click', function () {\n      chrome.storage.sync.set({ color: item }, function () {\n        // eslint-disable-next-line no-console\n        console.log('color is ' + item)\n      })\n    })\n    page.appendChild(button)\n  }\n}\nconstructOptions(kButtonColors)\n\nexport default null\n"],
+  "mappings": ";;;AAEA,MAAM,OAAO,SAAS,eAAe,WAAW;AAChD,MAAM,gBAAgB,CAAC,WAAW,WAAW,WAAW,SAAS;AACjE,WAAS,iBAAiBA,gBAAe;AACvC,aAAS,QAAQA,gBAAe;AAC9B,UAAI,SAAS,SAAS,cAAc,QAAQ;AAC5C,aAAO,MAAM,kBAAkB;AAC/B,aAAO,iBAAiB,SAAS,WAAY;AAC3C,eAAO,QAAQ,KAAK,IAAI,EAAE,OAAO,KAAK,GAAG,WAAY;AAEnD,kBAAQ,IAAI,cAAc,IAAI;AAAA,QAChC,CAAC;AAAA,MACH,CAAC;AACD,WAAK,YAAY,MAAM;AAAA,IACzB;AAAA,EACF;AACA,mBAAiB,aAAa;AAE9B,MAAO,kBAAQ;",
+  "names": ["kButtonColors"]
+}

package/src/client/extension/src/popup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["popup.ts"],
+  "sourcesContent": ["chrome.storage.sync.get('color', function (data) {})\n\nexport default null\n"],
+  "mappings": ";;;AAAA,SAAO,QAAQ,KAAK,IAAI,SAAS,SAAU,MAAM;AAAA,EAAC,CAAC;AAEnD,MAAO,gBAAQ;",
+  "names": []
+}

package/src/client/platform/node/boot.ts

@@ -11,6 +11,7 @@ export function boot(): System {
   const root = window.document.getElementById(SYSTEM_ROOT_ID)
 
   window.fetch = fetch
+  window.HTMLCanvasElement.prototype.getContext = () => null
 
   // @ts-ignore
   return webBoot(window, root)

package/src/client/platform/web/api/text.ts

@@ -13,7 +13,9 @@ export function webText(window: Window, opt: BootOpt): API['text'] {
   try {
     ctx = canvas.getContext('2d')
 
-    ctx.textAlign = 'center'
+    if (ctx) {
+      ctx.textAlign = 'center'
+    }
   } catch (err) {
     //
   }

package/src/client/rawExtractStyle.ts

@@ -1,4 +1,4 @@
-import { Style } from '@_unit/unit/lib/system/platform/Props'
+import { Style } from '../system/platform/Props'
 import { Dict } from '../types/Dict'
 import { IOElement } from './IOElement'
 

package/src/client/reflectComponentBaseTrait.ts

@@ -164,13 +164,16 @@ export const expandSlot = (
     }
 
     child_leaf_id = slot_base_ids[i]
+
+    if (!child_leaf_id) {
+      return []
+    }
+
     child_leaf_path = child_leaf_id.split('/')
 
     slot_base_ids = parent_slot_base[child_leaf_id]
 
     if (!slot_base_ids) {
-      const child_leaf_path = child_leaf_id.split('/')
-
       const child_leaf_comp = component.pathGetSubComponent(child_leaf_path)
 
       slot_base_ids = child_leaf_comp.$parentChildren.reduce(

package/src/client/render/attachCanvas.ts

@@ -11,7 +11,9 @@ export function attachCanvas(system: System): void {
 
   const canvas = createElement('canvas')
   canvas.classList.add('__SYSTEM__CANVAS__')
+
   canvas.style.pointerEvents = 'none'
+  canvas.style.zIndex = '1'
 
   resizeWith(system, canvas, root)
 

package/src/client/render/attachSVG.ts

@@ -19,6 +19,7 @@ export function attachSVG(system: System): void {
   svg.style.position = 'absolute'
   svg.style.top = '0'
   svg.style.left = '0'
+  svg.style.zIndex = '1'
 
   resizeWith(system, svg, root)
 

package/src/client/style.ts

@@ -74,7 +74,7 @@ export function reactToFrameSize(
 export function applyDynamicStyle(
   component: Component<HTMLElement | SVGElement>,
   $element: HTMLElement | SVGElement,
-  style: Dict<string>
+  style: Dict<string> = {}
 ): Unlisten {
   removeStyle($element)
 

package/src/docs/concept/README.md

@@ -8,19 +8,19 @@ Unit is based on a fundamental Law of Computing:
 
 This can be seem as the foundation of Flow-based Programming - "data will flow through the computational graph". This principle alone can be used to define any computer program.
 
-Unit is also heavily inspired by Functional and Reactive Programming, both highly sophisticated and wildly powerful software paradigms, that confer very unique properties to the debugging experience. Aspects of Object Oriented Programming are also present on the Unit language through the presence of "objects" representing the mutable state side of programs, essential to build real life applications. The combination of these concepts can be recursed upon on the development useful virtual tooling at an incredibly speed. Unit is the product of infinitely recursing on this very own concept, with a focus on Development Experience.
+Unit is also heavily inspired by Functional and Reactive Programming, both highly sophisticated and wildly powerful software paradigms that confer very unique properties to the debugging experience. Aspects of Object Oriented Programming are also present on the Unit language through the presence of "objects" representing the mutable state side of programs, essential to build real life applications. The combination of these concepts can be recursed upon on the development of useful virtual tooling at an incredible speed. Unit is the product of infinitely recursing on this very own concept, with a focus on Development Experience.
 
 The Unit paradigm was specially designed to enable easy visual creation of programs called units, which can be interacted with through their inputs and outputs. A new unit can be built by piping and collapsing together smaller units, in a process called Composition. Unit's fundamentals are not new by themselves - in fact, Unit represents a purposeful re-exploration of Computer Science principles in the context of modern Software Development.
 
-The simplicity of programming in Unit comes from the very small number of actions that are necessary to build any sort of application logic. One may start out with an initial set of units, which can be linked together and collapsed into a new graph unit, in a process called Composition. Symmetrically, a graph can be decomposed and disconnected into its set of smaller units. Moreover any software can be built by repeating this process.
+The simplicity of programming in Unit comes from the very small number of repeatable steps which are enough to build any sort of application logic. One may start out with an initial set of units, which can be linked together and collapsed into a new graph unit. Symmetrically, a graph can be decomposed and disconnected into its set of smaller units. Moreover any software can be built by repeating this process.
 
-The concept of a Unit is essentially an advancement of the fundamental concept of a function, common to many Textual Programming Languages, such as JavaScript and C++. A function is supposed to be given an ordered list of arguments as input and it can return a single datum as output. A unit, on the other hand, can receive and send data at any time, in any order and through multiple inputs and outputs. We found that redefining the fundamental building block of Programming as a unit can exponentially reduce Software Complexity.
+The concept of a unit is essentially an advancement of the fundamental concept of a function, common to many Textual Programming Languages, such as JavaScript and C++. A function is supposed to be given an ordered list of arguments as input and it can return a single datum as output. A unit, on the other hand, can receive and send data at any time, in any order and through multiple inputs and outputs. We found that redefining the fundamental building block of Programming as a unit can exponentially reduce Software Complexity.
 
-A code drawn in Unit is simply a Directed Graph. This is commonly the same representational model a software archictect might have in mind for understanding how programs work, or in better words, how inputs are progressively transformed into desired outputs. This way, Unit removes steps that separate Software Architecture from Software Development. The pseudocode, the code and the program become one. Design and Development can be performed in the same place.
+A code drawn in Unit is simply a Directed Graph. This is commonly the same representational model a software archictect might have in mind for understanding how programs work, or in better words, how inputs are progressively transformed into the desired outputs. This way, Unit removes steps that separate Software Architecture from Software Development. The pseudocode, the code and the program become one. Design and Development can be performed in the same place.
 
 The conception of Unit was motivated by the observable frustration the modern programmer goes through to express even simple constructs in written code. Ideas that are easy to express commonly map to disproportionate complexity and often need to be implemented from scratch, especially when one's feeling creative, which often leads to code duplication in a global scale, leading to global waste. While the existing ecosystem provides additional tooling to support development, they come with the added cost of frequent Context Switch. The developer is constantly forced to spend time in custom "setup", "configuration", "learning" and "integration" tasks, instead of focusing on Beauty and Functionality.
 
-Systems built on top of traditional Textual Programming Languages became so complex and heterogeneous developers lost much of their ability to understand and control their own code, rendering a weak ecosystem where every individual piece of Software cannot be decomposed neither reused, much less integrated with in a plug and play manner. This is a reflex of an industry that failed to incorporate many rather fundamental principles of Systems Programming and their intersection with Cognitive Psychology.
+Systems built on top of traditional Textual Programming Languages became so complex and heterogeneous developers lost much of their ability to understand and control their own code, rendering a weak ecosystem where every individual piece of software cannot be decomposed neither reused, much less integrated with in a plug and play manner. This is a reflex of an industry that failed to incorporate many rather fundamental principles of Systems Programming and their intersection with Cognitive Psychology.
 
 The current state of the art of Programming imposes a tall barrier of entry for people interested in making Small Software. Reading written code is known to be error-prone and time-consuming. Such dread is further augmented by the diffculty of understanding the architecture of a program in the big picture, which is a reflex of the paradigm mismatch between how systems are encoded and how they are represented.
 
@@ -30,7 +30,7 @@ That brings us to the world of User Interfaces (UI), which is inseparable from t
 
 Today, programming a UI is about building a thin visual layer on top of a thick black box, represented by the figure of an "app". Such apps are usually optimized, in logic and design, for a specific set of use cases, invariably rendering the UI either unfit or overfit for real life use cases, which are often unpredictable; the user is not free to arbitrarily mold the interface to his liking. He can neither extend nor extract nor focus on the objects he is currently interested on, so he's forced to content with the lack or interference of a certain UI element. This renders people hostage to the specific design decisions of many one-size-fits-all apps, which are usually borderline impossible to customize or extend.
 
-In Unit, the (visual) components that make up a user interface are units! That means they can be composed and decomposed on will. The user can always inspect the layout and logic of anything he can put his eyes on, being that copying, extending, changing or removing. Therefore, like any other unit, every unit website can be unwrapped into its subcomponents, which live side by side with the logical circuitry that controls them - no context switch between Design and Development.
+In Unit, the (visual) components that make up a user interface are units! That means they can be composed and decomposed on will. The user can always inspect the layout and logic of anything he can put his eyes on. He can copy, extend, change, reconfigure or remove any aspect of any Unit program. Therefore, like any other unit, every unit website can be unwrapped into its subcomponents, which live side by side with the logical circuitry that controls them - no context switch between Design and Development.
 
 Likewise, in Unit, there is no explicit separation between "frontend" and "backend". All unit processes can contain components, which helps to visualize them, and can be accessed through an array of standard communication channels. Therefore, the Unit programmer is able to debug "client" and "server" logic side by side. Nowadays, the modern divide between these technologies comes down to the presence of certain APIs, such as "HTTP", "File System" and "Database", which are always available in Unit, so the same program can run anywhere seamlessly, regardless of the host system.
 

package/src/examples/helloworld.ts

@@ -1,4 +1,4 @@
-import { renderBundle } from '@_unit/unit/lib/client/platform/web/render'
+import { renderBundle } from '../client/platform/web/render'
 
 const root = document.getElementById('root')
 

package/src/examples/system.ts

@@ -1,6 +1,6 @@
-import { boot } from '@_unit/unit/lib/client/platform/node/boot'
-import { fromBundle } from '@_unit/unit/lib/spec/fromBundle'
-import _specs from '@_unit/unit/lib/system/_specs'
+import { boot } from '../client/platform/node/boot'
+import { fromBundle } from '../spec/fromBundle'
+import _specs from '../system/_specs'
 
 export const system = boot()
 

package/src/html.ts

@@ -119,7 +119,11 @@ export async function html(opt: WebTemplate): Promise<string> {
     >
       ${baseHtml || ''}
     </div>
-    ${script ? `<script type="text/javascript" src="${pathname}/index.js"></script>` : ``}
+    ${
+      script
+        ? `<script type="text/javascript" src="${pathname}/index.js"></script>`
+        : ``
+    }
   </body>
 </html>
   `

package/src/system/_ids.ts

@@ -135,6 +135,7 @@ export const ID_EMPTY = 'e33e7dcd-9715-461c-a474-15ed2bda899e'
 export const ID_SEARCH_DELETE_VISITS = 'dd22949e-ad44-4571-9af4-322a1e194ebe'
 export const ID_SET_UNIT_INPUT_DATA = '8a1ca6c0-af60-48cc-86bb-01e4e59598db'
 export const ID_SET_UNIT_OUTPUT_DATA = '18e8759a-aa11-11eb-984d-339712a7789d'
+export const ID_HOVERED = '9b9ba4bc-7f94-40db-8988-d23867a6b0c3'
 export const ID_ITERATE_COUNT = 'fb5bb9ea-bf24-4150-b12d-bc4873a153a2'
 export const ID_ITERATE_COUNT_FROM = '9fa0c25b-0675-48dc-80e7-eab1829656bd'
 export const ID_ITERATE_SUM_FROM = '72513267-174e-4ea4-9561-b11dea518af5'