@appkit/dek-lib 0.1.0 → 0.2.1

package/dist/index.umd.js

@@ -999,7 +999,7 @@ var __publicField = (obj, key, value) => {
   wr$1.exports;
   (function(d, w2) {
     (function() {
-      var o3, R = "4.17.21", O2 = 200, E2 = "Unsupported core-js use. Try https://npms.io/search?q=ponyfill.", T = "Expected a function", X10 = "Invalid `variable` option passed into `_.template`", en2 = "__lodash_hash_undefined__", y10 = 500, K = "__lodash_placeholder__", W = 1, $10 = 2, z = 4, Z10 = 1, N = 2, V10 = 1, j = 2, he2 = 4, Y = 8, Q = 16, un2 = 32, sn2 = 64, gn2 = 128, Tn2 = 256, C = 512, B2 = 30, D10 = "...", An2 = 800, ge2 = 16, pe2 = 1, Be2 = 2, Vn2 = 3, me2 = 1 / 0, _e2 = 9007199254740991, Ko2 = 17976931348623157e292, Et2 = 0 / 0, Qn2 = 4294967295, $o2 = Qn2 - 1, qo2 = Qn2 >>> 1, zo2 = [
+      var o3, O2 = "4.17.21", E2 = 200, R = "Unsupported core-js use. Try https://npms.io/search?q=ponyfill.", T = "Expected a function", X10 = "Invalid `variable` option passed into `_.template`", en2 = "__lodash_hash_undefined__", y10 = 500, K = "__lodash_placeholder__", W = 1, $10 = 2, z = 4, Z10 = 1, N = 2, V10 = 1, j = 2, he2 = 4, Y = 8, Q = 16, un2 = 32, sn2 = 64, gn2 = 128, Tn2 = 256, C = 512, B2 = 30, D10 = "...", An2 = 800, ge2 = 16, pe2 = 1, Be2 = 2, Vn2 = 3, me2 = 1 / 0, _e2 = 9007199254740991, Ko2 = 17976931348623157e292, Et2 = 0 / 0, Qn2 = 4294967295, $o2 = Qn2 - 1, qo2 = Qn2 >>> 1, zo2 = [
         ["ary", gn2],
         ["bind", V10],
         ["bindKey", j],
@@ -1787,7 +1787,7 @@ var __publicField = (obj, key, value) => {
           var t10 = this.__data__;
           if (t10 instanceof re2) {
             var r10 = t10.__data__;
-            if (!st2 || r10.length < O2 - 1)
+            if (!st2 || r10.length < E2 - 1)
               return r10.push([n10, e2]), this.size = ++t10.size, this;
             t10 = this.__data__ = new ie2(r10);
           }
@@ -1919,7 +1919,7 @@ var __publicField = (obj, key, value) => {
           var i2 = -1, f10 = bt2, s2 = true, l2 = n10.length, c3 = [], p10 = e2.length;
           if (!l2)
             return c3;
-          t10 && (e2 = on2(e2, bn2(t10))), r10 ? (f10 = Ur2, s2 = false) : e2.length >= O2 && (f10 = ft2, s2 = false, e2 = new Ce2(e2));
+          t10 && (e2 = on2(e2, bn2(t10))), r10 ? (f10 = Ur2, s2 = false) : e2.length >= E2 && (f10 = ft2, s2 = false, e2 = new Ce2(e2));
           n:
             for (; ++i2 < l2; ) {
               var _10 = n10[i2], v = t10 == null ? _10 : t10(_10);
@@ -2353,7 +2353,7 @@ var __publicField = (obj, key, value) => {
           var r10 = -1, i2 = bt2, f10 = n10.length, s2 = true, l2 = [], c3 = l2;
           if (t10)
             s2 = false, i2 = Ur2;
-          else if (f10 >= O2) {
+          else if (f10 >= E2) {
             var p10 = e2 ? null : ja2(n10);
             if (p10)
               return Dt2(p10);
@@ -3953,7 +3953,7 @@ var __publicField = (obj, key, value) => {
         }
         function Tg2(n10) {
           if (hc2(n10))
-            throw new b10(E2);
+            throw new b10(R);
           return nf2(n10);
         }
         function Cg2(n10) {
@@ -4568,7 +4568,7 @@ function print() { __p += __j.call(arguments, '') }
           return kn2(u2, function(e2, t10) {
             nn2.call(u2.prototype, t10) || (n10[t10] = e2);
           }), n10;
-        }(), { chain: false }), u2.VERSION = R, Un2(["bind", "bindKey", "curry", "curryRight", "partial", "partialRight"], function(n10) {
+        }(), { chain: false }), u2.VERSION = O2, Un2(["bind", "bindKey", "curry", "curryRight", "partial", "partialRight"], function(n10) {
           u2[n10].placeholder = u2;
         }), Un2(["drop", "take"], function(n10, e2) {
           H.prototype[n10] = function(t10) {
@@ -4672,16 +4672,16 @@ function print() { __p += __j.call(arguments, '') }
     return Object.values(w2).forEach((o3) => {
       o3.configurable = true;
     }), Object.create($i$1(d), w2);
-  }, Uo$1 = (d) => d[Zi$1] || d, Fo$1 = (d, w2, o3, R) => {
+  }, Uo$1 = (d) => d[Zi$1] || d, Fo$1 = (d, w2, o3, O2) => {
     if (!Bo$1(d))
       return d;
-    let O2 = R && R.get(d);
-    if (!O2) {
+    let E2 = O2 && O2.get(d);
+    if (!E2) {
       const en2 = Uo$1(d);
-      O2 = ((y10) => Object.values(Object.getOwnPropertyDescriptors(y10)).some((K) => !K.configurable && !K.writable))(en2) ? [en2, G_$1(en2)] : [en2], R == null || R.set(d, O2);
+      E2 = ((y10) => Object.values(Object.getOwnPropertyDescriptors(y10)).some((K) => !K.configurable && !K.writable))(en2) ? [en2, G_$1(en2)] : [en2], O2 == null || O2.set(d, E2);
     }
-    const [E2, T] = O2;
-    let X10 = o3 && o3.get(E2);
+    const [R, T] = E2;
+    let X10 = o3 && o3.get(R);
     return X10 && X10[1].f === !!T || (X10 = ((en2, y10) => {
       const K = { f: y10 };
       let W = false;
@@ -4697,47 +4697,47 @@ function print() { __p += __j.call(arguments, '') }
         }
       }, z = { get: (Z10, N) => N === Zi$1 ? en2 : ($10("k", N), Fo$1(Reflect.get(Z10, N), K[yt$1], K.c, K.t)), has: (Z10, N) => N === F_$1 ? (W = true, K[yt$1].delete(en2), true) : ($10("h", N), Reflect.has(Z10, N)), getOwnPropertyDescriptor: (Z10, N) => ($10("o", N), Reflect.getOwnPropertyDescriptor(Z10, N)), ownKeys: (Z10) => ($10(vr$1), Reflect.ownKeys(Z10)) };
       return y10 && (z.set = z.deleteProperty = () => false), [z, K];
-    })(E2, !!T), X10[1].p = N_$1(T || E2, X10[0]), o3 && o3.set(E2, X10)), X10[1][yt$1] = w2, X10[1].c = o3, X10[1].t = R, X10[1].p;
-  }, No$1 = (d, w2, o3, R) => {
+    })(R, !!T), X10[1].p = N_$1(T || R, X10[0]), o3 && o3.set(R, X10)), X10[1][yt$1] = w2, X10[1].c = o3, X10[1].t = O2, X10[1].p;
+  }, No$1 = (d, w2, o3, O2) => {
     if (Object.is(d, w2))
       return false;
     if (!To$1(d) || !To$1(w2))
       return true;
-    const O2 = o3.get(Uo$1(d));
-    if (!O2)
+    const E2 = o3.get(Uo$1(d));
+    if (!E2)
       return true;
-    if (R) {
-      const T = R.get(d);
+    if (O2) {
+      const T = O2.get(d);
       if (T && T.n === w2)
         return T.g;
-      R.set(d, { n: w2, g: false });
+      O2.set(d, { n: w2, g: false });
     }
-    let E2 = null;
+    let R = null;
     try {
-      for (const T of O2.h || [])
-        if (E2 = Reflect.has(d, T) !== Reflect.has(w2, T), E2)
-          return E2;
-      if (O2[vr$1] === true) {
-        if (E2 = ((T, X10) => {
+      for (const T of E2.h || [])
+        if (R = Reflect.has(d, T) !== Reflect.has(w2, T), R)
+          return R;
+      if (E2[vr$1] === true) {
+        if (R = ((T, X10) => {
           const en2 = Reflect.ownKeys(T), y10 = Reflect.ownKeys(X10);
           return en2.length !== y10.length || en2.some((K, W) => K !== y10[W]);
-        })(d, w2), E2)
-          return E2;
+        })(d, w2), R)
+          return R;
       } else
-        for (const T of O2.o || [])
-          if (E2 = !!Reflect.getOwnPropertyDescriptor(d, T) != !!Reflect.getOwnPropertyDescriptor(w2, T), E2)
-            return E2;
-      for (const T of O2.k || [])
-        if (E2 = No$1(d[T], w2[T], o3, R), E2)
-          return E2;
-      return E2 === null && (E2 = true), E2;
+        for (const T of E2.o || [])
+          if (R = !!Reflect.getOwnPropertyDescriptor(d, T) != !!Reflect.getOwnPropertyDescriptor(w2, T), R)
+            return R;
+      for (const T of E2.k || [])
+        if (R = No$1(d[T], w2[T], o3, O2), R)
+          return R;
+      return R === null && (R = true), R;
     } finally {
-      R && R.set(d, { n: w2, g: E2 });
+      O2 && O2.set(d, { n: w2, g: R });
     }
   }, H_$1 = (d) => Bo$1(d) && d[Zi$1] || null, Co$1 = (d, w2 = true) => {
     qi$1.set(d, w2);
   };
-  const Gi$1 = (d) => typeof d == "object" && d !== null, Oe$1 = /* @__PURE__ */ new WeakMap(), dr$1 = /* @__PURE__ */ new WeakSet(), K_$1 = (d = Object.is, w2 = (y10, K) => new Proxy(y10, K), o3 = (y10) => Gi$1(y10) && !dr$1.has(y10) && (Array.isArray(y10) || !(Symbol.iterator in y10)) && !(y10 instanceof WeakMap) && !(y10 instanceof WeakSet) && !(y10 instanceof Error) && !(y10 instanceof Number) && !(y10 instanceof Date) && !(y10 instanceof String) && !(y10 instanceof RegExp) && !(y10 instanceof ArrayBuffer), R = (y10) => {
+  const Gi$1 = (d) => typeof d == "object" && d !== null, Oe$1 = /* @__PURE__ */ new WeakMap(), dr$1 = /* @__PURE__ */ new WeakSet(), K_$1 = (d = Object.is, w2 = (y10, K) => new Proxy(y10, K), o3 = (y10) => Gi$1(y10) && !dr$1.has(y10) && (Array.isArray(y10) || !(Symbol.iterator in y10)) && !(y10 instanceof WeakMap) && !(y10 instanceof WeakSet) && !(y10 instanceof Error) && !(y10 instanceof Number) && !(y10 instanceof Date) && !(y10 instanceof String) && !(y10 instanceof RegExp) && !(y10 instanceof ArrayBuffer), O2 = (y10) => {
     switch (y10.status) {
       case "fulfilled":
         return y10.value;
@@ -4746,12 +4746,12 @@ function print() { __p += __j.call(arguments, '') }
       default:
         throw y10;
     }
-  }, O2 = /* @__PURE__ */ new WeakMap(), E2 = (y10, K, W = R) => {
-    const $10 = O2.get(y10);
+  }, E2 = /* @__PURE__ */ new WeakMap(), R = (y10, K, W = O2) => {
+    const $10 = E2.get(y10);
     if (($10 == null ? void 0 : $10[0]) === K)
       return $10[1];
     const z = Array.isArray(y10) ? [] : Object.create(Object.getPrototypeOf(y10));
-    return Co$1(z, true), O2.set(y10, [K, z]), Reflect.ownKeys(y10).forEach((Z10) => {
+    return Co$1(z, true), E2.set(y10, [K, z]), Reflect.ownKeys(y10).forEach((Z10) => {
       if (Object.getOwnPropertyDescriptor(z, Z10))
         return;
       const N = Reflect.get(y10, Z10), { enumerable: V10 } = Reflect.getOwnPropertyDescriptor(
@@ -4772,7 +4772,7 @@ function print() { __p += __j.call(arguments, '') }
         const [he2, Y] = Oe$1.get(
           N
         );
-        j.value = E2(
+        j.value = R(
           he2,
           Y(),
           W
@@ -4845,7 +4845,7 @@ function print() { __p += __j.call(arguments, '') }
     const Tn2 = [
       un2,
       N,
-      E2,
+      R,
       Q
     ];
     return Oe$1.set(gn2, Tn2), Reflect.ownKeys(y10).forEach((C) => {
@@ -4865,9 +4865,9 @@ function print() { __p += __j.call(arguments, '') }
     d,
     w2,
     o3,
-    R,
     O2,
     E2,
+    R,
     T,
     X10
   ], [$_$1] = K_$1();
@@ -4875,17 +4875,17 @@ function print() { __p += __j.call(arguments, '') }
     return $_$1(d);
   }
   function Go$1(d, w2, o3) {
-    const R = Oe$1.get(d);
-    let O2;
-    const E2 = [], T = R[3];
+    const O2 = Oe$1.get(d);
+    let E2;
+    const R = [], T = O2[3];
     let X10 = false;
     const y10 = T((K) => {
-      if (E2.push(K), o3) {
-        w2(E2.splice(0));
+      if (R.push(K), o3) {
+        w2(R.splice(0));
         return;
       }
-      O2 || (O2 = Promise.resolve().then(() => {
-        O2 = void 0, X10 && w2(E2.splice(0));
+      E2 || (E2 = Promise.resolve().then(() => {
+        E2 = void 0, X10 && w2(R.splice(0));
       }));
     });
     return X10 = true, () => {
@@ -4893,8 +4893,8 @@ function print() { __p += __j.call(arguments, '') }
     };
   }
   function bo$1(d, w2) {
-    const o3 = Oe$1.get(d), [R, O2, E2] = o3;
-    return E2(R, O2(), w2);
+    const o3 = Oe$1.get(d), [O2, E2, R] = o3;
+    return R(O2, E2(), w2);
   }
   var zi$1 = { exports: {} }, Hi$1 = {};
   /**
@@ -4915,12 +4915,12 @@ function print() { __p += __j.call(arguments, '') }
     function w2(W, $10) {
       return W === $10 && (W !== 0 || 1 / W === 1 / $10) || W !== W && $10 !== $10;
     }
-    var o3 = typeof Object.is == "function" ? Object.is : w2, R = d.useState, O2 = d.useEffect, E2 = d.useLayoutEffect, T = d.useDebugValue;
+    var o3 = typeof Object.is == "function" ? Object.is : w2, O2 = d.useState, E2 = d.useEffect, R = d.useLayoutEffect, T = d.useDebugValue;
     function X10(W, $10) {
-      var z = $10(), Z10 = R({ inst: { value: z, getSnapshot: $10 } }), N = Z10[0].inst, V10 = Z10[1];
-      return E2(function() {
+      var z = $10(), Z10 = O2({ inst: { value: z, getSnapshot: $10 } }), N = Z10[0].inst, V10 = Z10[1];
+      return R(function() {
         N.value = z, N.getSnapshot = $10, en2(N) && V10({ inst: N });
-      }, [W, z, $10]), O2(function() {
+      }, [W, z, $10]), E2(function() {
         return en2(N) && V10({ inst: N }), W(function() {
           en2(N) && V10({ inst: N });
         });
@@ -4961,10 +4961,10 @@ function print() { __p += __j.call(arguments, '') }
         {
           for (var Q = arguments.length, un2 = new Array(Q > 1 ? Q - 1 : 0), sn2 = 1; sn2 < Q; sn2++)
             un2[sn2 - 1] = arguments[sn2];
-          R("error", Y, un2);
+          O2("error", Y, un2);
         }
       }
-      function R(Y, Q, un2) {
+      function O2(Y, Q, un2) {
         {
           var sn2 = w2.ReactDebugCurrentFrame, gn2 = sn2.getStackAddendum();
           gn2 !== "" && (Q += "%s", un2 = un2.concat([gn2]));
@@ -4974,16 +4974,16 @@ function print() { __p += __j.call(arguments, '') }
           Tn2.unshift("Warning: " + Q), Function.prototype.apply.call(console[Y], console, Tn2);
         }
       }
-      function O2(Y, Q) {
+      function E2(Y, Q) {
         return Y === Q && (Y !== 0 || 1 / Y === 1 / Q) || Y !== Y && Q !== Q;
       }
-      var E2 = typeof Object.is == "function" ? Object.is : O2, T = d.useState, X10 = d.useEffect, en2 = d.useLayoutEffect, y10 = d.useDebugValue, K = false, W = false;
+      var R = typeof Object.is == "function" ? Object.is : E2, T = d.useState, X10 = d.useEffect, en2 = d.useLayoutEffect, y10 = d.useDebugValue, K = false, W = false;
       function $10(Y, Q, un2) {
         K || d.startTransition !== void 0 && (K = true, o3("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
         var sn2 = Q();
         if (!W) {
           var gn2 = Q();
-          E2(sn2, gn2) || (o3("The result of getSnapshot should be cached to avoid an infinite loop"), W = true);
+          R(sn2, gn2) || (o3("The result of getSnapshot should be cached to avoid an infinite loop"), W = true);
         }
         var Tn2 = T({
           inst: {
@@ -5011,7 +5011,7 @@ function print() { __p += __j.call(arguments, '') }
         var Q = Y.getSnapshot, un2 = Y.value;
         try {
           var sn2 = Q();
-          return !E2(un2, sn2);
+          return !R(un2, sn2);
         } catch {
           return true;
         }
@@ -5028,8 +5028,8 @@ function print() { __p += __j.call(arguments, '') }
   const X_$1 = /* @__PURE__ */ Mo$1(Z_$1), { use: Wo$1 } = React, { useSyncExternalStore: J_$1 } = X_$1;
   const V_$1 = /* @__PURE__ */ new WeakMap();
   function Ho$1(d, w2) {
-    const o3 = w2 == null ? void 0 : w2.sync, R = React.useRef(), O2 = React.useRef();
-    let E2 = true;
+    const o3 = w2 == null ? void 0 : w2.sync, O2 = React.useRef(), E2 = React.useRef();
+    let R = true;
     const T = J_$1(
       React.useCallback(
         (y10) => {
@@ -5041,23 +5041,23 @@ function print() { __p += __j.call(arguments, '') }
       () => {
         const y10 = bo$1(d, Wo$1);
         try {
-          if (!E2 && R.current && O2.current && !No$1(
-            R.current,
-            y10,
+          if (!R && O2.current && E2.current && !No$1(
             O2.current,
+            y10,
+            E2.current,
             /* @__PURE__ */ new WeakMap()
           ))
-            return R.current;
+            return O2.current;
         } catch {
         }
         return y10;
       },
       () => bo$1(d, Wo$1)
     );
-    E2 = false;
+    R = false;
     const X10 = /* @__PURE__ */ new WeakMap();
     React.useEffect(() => {
-      R.current = T, O2.current = X10;
+      O2.current = T, E2.current = X10;
     });
     const en2 = React.useMemo(() => /* @__PURE__ */ new WeakMap(), []);
     return Fo$1(
@@ -5078,8 +5078,8 @@ function print() { __p += __j.call(arguments, '') }
     localStorage.setItem("api", JSON.stringify(ee$1));
   }
   function j_$1(d, w2, o3) {
-    const R = ee$1[d] || {};
-    R[w2] = o3, ee$1[d] = U_$1.cloneDeep(R);
+    const O2 = ee$1[d] || {};
+    O2[w2] = o3, ee$1[d] = U_$1.cloneDeep(O2);
   }
   function n0$1(d, w2) {
     if (ee$1[d])
@@ -5118,7 +5118,9 @@ function print() { __p += __j.call(arguments, '') }
       return this.globals.boards;
     }
     get board() {
-      return this.boards.find((w2) => w2.key === this.boardKey) || {};
+      return this.boards.find((w2) => w2.key === this.boardKey) || {
+        zones: []
+      };
     }
     get layout() {
       return this.board.layout || "<Screen><Text>Missing layout</Text></Screen>";
@@ -5136,17 +5138,21 @@ function print() { __p += __j.call(arguments, '') }
       this.globals.setLocation(`/${w2}`);
     }
     createPluginWrapper(w2) {
-      const o3 = this.getPluginInstance(w2), R = !!o3;
+      const o3 = this.getPluginInstance(w2), O2 = !!o3;
       return {
-        available: R,
-        component: (O2, E2) => this.getComponent(w2, O2, E2),
-        screen: (O2) => this.getScreen(w2, O2),
-        board: (O2) => this.getBoard(w2, O2),
+        available: O2,
+        info: {
+          components: o3 != null && o3.components ? o3.components.map((E2) => E2.key) : [],
+          screens: o3 != null && o3.screens ? o3.screens.map((E2) => E2.path) : []
+        },
+        component: (E2, R) => this.getComponent(w2, E2, R),
+        screen: (E2) => this.getScreen(w2, E2),
+        board: (E2) => this.getBoard(w2, E2),
         api: (o3 == null ? void 0 : o3.api) || {},
         state: {
-          get: (O2, E2) => R && n0$1(w2, O2) || E2,
-          set: (O2, E2) => {
-            R && j_$1(w2, O2, E2);
+          get: (E2, R) => O2 && n0$1(w2, E2) || R,
+          set: (E2, R) => {
+            O2 && j_$1(w2, E2, R);
           }
         }
       };
@@ -5163,34 +5169,34 @@ function print() { __p += __j.call(arguments, '') }
     getPluginInstance(w2) {
       return this.globals.pluginInstances[w2];
     }
-    getComponent(w2, o3, R) {
-      const O2 = this.getPluginInstance(w2);
-      if (O2) {
-        const E2 = O2.components && O2.components.find(
+    getComponent(w2, o3, O2) {
+      const E2 = this.getPluginInstance(w2);
+      if (E2) {
+        const R = E2.components && E2.components.find(
           (T) => T.key.toLowerCase() === o3.toLowerCase()
         );
-        return E2 ? E2.element(R) : void 0;
+        return R ? R.element(O2) : void 0;
       }
     }
     getScreen(w2, o3) {
       if (w2) {
-        const R = this.getPluginInstance(w2);
-        if (R) {
-          const O2 = R.screens && R.screens.find(
-            (E2) => E2.path.toLowerCase() === o3.toLowerCase()
+        const O2 = this.getPluginInstance(w2);
+        if (O2) {
+          const E2 = O2.screens && O2.screens.find(
+            (R) => R.path.toLowerCase() === o3.toLowerCase()
           );
-          return O2 ? O2.element() : void 0;
+          return E2 ? E2.element() : void 0;
         }
       }
     }
     getBoard(w2, o3) {
       if (w2) {
-        const R = this.getPluginInstance(w2);
-        if (R) {
-          const O2 = R.boards && R.boards.find(
-            (E2) => E2.key.toLowerCase() === o3.toLowerCase()
+        const O2 = this.getPluginInstance(w2);
+        if (O2) {
+          const E2 = O2.boards && O2.boards.find(
+            (R) => R.key.toLowerCase() === o3.toLowerCase()
           );
-          return O2 ? O2.element() : void 0;
+          return E2 ? E2.element() : void 0;
         }
       }
     }
@@ -5200,8 +5206,8 @@ function print() { __p += __j.call(arguments, '') }
     return t0$1;
   }
   function s0(d, w2, o3) {
-    const R = Ho$1(ee$1);
-    return R && R[d] && R[d][w2] ? R[d][w2] : o3;
+    const O2 = Ho$1(ee$1);
+    return O2 && O2[d] && O2[d][w2] ? O2[d][w2] : o3;
   }
   var V4 = { exports: {} }, K2 = {};
   /**
@@ -28772,6 +28778,8 @@ Check the top-level render call using <` + w10 + ">.");
         return t10.text.size.xlarge;
       case "xxlarge":
         return t10.text.size.xxlarge;
+      case "heading":
+        return t10.text.size.heading;
     }
   }, IF1 = (t10, h10) => {
     if (h10 === void 0)
@@ -28793,6 +28801,8 @@ Check the top-level render call using <` + w10 + ">.");
         return t10.text.height.xlarge;
       case "xxlarge":
         return t10.text.height.xxlarge;
+      case "heading":
+        return t10.text.height.heading;
     }
   }, WF1 = (t10, h10) => {
     if (h10 === void 0)
@@ -49603,81 +49613,6 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
     }
   };
   window.__dek_globals = globals;
-  const USER_DATA_QUERY = gql(`
-  query userData {
-    currentUser {
-      id
-      name
-      email
-      location
-      avatar
-      boards {
-        id
-        title
-        key
-        layout
-        zones {
-          key
-          plugin
-          component
-          props {
-            key
-            value
-          }
-          containerProps {
-            key
-            value
-          }
-        }
-      }
-      commandGroups {
-        title
-        key
-        commands {
-          title
-          plugin
-          component
-          props {
-            key
-            value
-          }
-        }
-      }
-    }
-  }
-`);
-  async function fetchUserData(email, password) {
-    const client = await getClient(email, password);
-    const response = await client.query({
-      query: USER_DATA_QUERY
-    });
-    return response.data.currentUser;
-  }
-  const state$1 = proxy({
-    plugins: {},
-    pluginInstances: {},
-    data: null,
-    loading: false,
-    version: 0
-  });
-  function updateStatePlugins(plugins) {
-    state$1.plugins = plugins;
-  }
-  function updateStatePluginInstances(pluginInstances) {
-    state$1.pluginInstances = pluginInstances;
-  }
-  function updateStateData(data) {
-    state$1.data = data;
-  }
-  function updateStateLoading(loading) {
-    state$1.loading = loading;
-  }
-  async function updateData(email, password) {
-    updateStateLoading(true);
-    const userData = await fetchUserData(email, password);
-    updateStateData(userData);
-    updateStateLoading(false);
-  }
   var lodash = { exports: {} };
   /**
    * @license
@@ -55161,6 +55096,99 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
   })(lodash, lodash.exports);
   var lodashExports = lodash.exports;
   const _ = /* @__PURE__ */ getDefaultExportFromCjs(lodashExports);
+  const USER_DATA_QUERY = gql(`
+  query userData {
+    currentUser {
+      id
+      name
+      email
+      location
+      avatar
+      boards {
+        id
+        title
+        key
+        layout
+        zones {
+          key
+          plugin
+          component
+          props {
+            key
+            value
+          }
+          containerProps {
+            key
+            value
+          }
+        }
+      }
+      commandGroups {
+        title
+        key
+        commands {
+          title
+          plugin
+          component
+          props {
+            key
+            value
+          }
+        }
+      }
+    }
+  }
+`);
+  async function fetchUserData(email, password) {
+    const client = await getClient(email, password);
+    const response = await client.query({
+      query: USER_DATA_QUERY
+    });
+    return response.data.currentUser;
+  }
+  const state$1 = proxy({
+    plugins: {},
+    pluginInstances: {},
+    data: null,
+    loading: false,
+    version: 0
+  });
+  function updateStatePlugins(plugins) {
+    state$1.plugins = plugins;
+  }
+  function updateStatePluginInstances(pluginInstances) {
+    state$1.pluginInstances = pluginInstances;
+  }
+  function updateStateData(data) {
+    state$1.data = data;
+  }
+  function updateStateLoading(loading) {
+    state$1.loading = loading;
+  }
+  async function updateData(email, password, plugin) {
+    updateStateLoading(true);
+    let userData = await fetchUserData(email, password);
+    if (plugin) {
+      const pluginInstance = new plugin();
+      if (pluginInstance.config && pluginInstance.config.private !== "true") {
+        userData = _.cloneDeep(userData);
+        userData.boards = [
+          {
+            id: "test-plugin",
+            key: "dev",
+            title: "Test Board",
+            base: {
+              plugin: "base",
+              key: "dev"
+            },
+            zones: []
+          }
+        ];
+      }
+    }
+    updateStateData(userData);
+    updateStateLoading(false);
+  }
   const USER_PLUGIN_AND_INTEGRATIONS_QUERY = gql(`
   query userPluginsAndIntegrations {
     currentUser {
@@ -55361,6 +55389,61 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
       /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderRight, { "aria-label": "header-right", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClockComponent, { "aria-label": "clock" }) })
     ] });
   };
+  const DevBoard = () => {
+    const api = f0();
+    const plugin = api.plugin("plugin");
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(NN1, { overlay: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(D2, { paddingTop: 100, paddingHorz: 20, collapse: true, direction: "vert", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        _t,
+        {
+          size: "heading",
+          weight: "heading",
+          family: "heading",
+          paddingBottom: 15,
+          children: "Components"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(D2, { direction: "horz", collapse: true, children: plugin && plugin.info.components.map((component) => /* @__PURE__ */ jsxRuntimeExports.jsx(D2, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        jN1,
+        {
+          title: component,
+          icon: "none",
+          onClick: () => api.navigate(`/base/dev/component/${component}`)
+        }
+      ) }, component)) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        _t,
+        {
+          size: "heading",
+          weight: "heading",
+          family: "heading",
+          paddingBottom: 15,
+          paddingTop: 50,
+          children: "Screens"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(D2, { direction: "horz", collapse: true, children: plugin && plugin.info.screens.map((screen) => /* @__PURE__ */ jsxRuntimeExports.jsx(D2, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        jN1,
+        {
+          title: screen,
+          icon: "none",
+          onClick: () => api.navigate(`/plugin${screen}`)
+        }
+      ) }, screen)) })
+    ] }) });
+  };
+  const EmptyBoard = () => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(NN1, { overlay: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(D2, { paddingTop: 100, paddingHorz: 20, collapse: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      _t,
+      {
+        size: "heading",
+        weight: "heading",
+        family: "heading",
+        paddingBottom: 15,
+        children: "No boards configured yet"
+      }
+    ) }) });
+  };
   const MainBoard = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Board, {});
   };
@@ -59408,6 +59491,193 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
       )) }) })
     ] }) });
   };
+  const {
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useInsertionEffect: useBuiltinInsertionEffect
+  } = React__namespace;
+  const canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
+  const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
+  const useInsertionEffect = useBuiltinInsertionEffect || useIsomorphicLayoutEffect;
+  const useEvent = (fn2) => {
+    const ref = useRef([fn2, (...args) => ref[0](...args)]).current;
+    useInsertionEffect(() => {
+      ref[0] = fn2;
+    });
+    return ref[1];
+  };
+  const relativePath = (base = "", path = location.pathname) => !path.toLowerCase().indexOf(base.toLowerCase()) ? path.slice(base.length) || "/" : "~" + path;
+  const absolutePath = (to2, base = "") => to2[0] === "~" ? to2.slice(1) : base + to2;
+  const eventPopstate = "popstate";
+  const eventPushState = "pushState";
+  const eventReplaceState = "replaceState";
+  const eventHashchange = "hashchange";
+  const events = [
+    eventPopstate,
+    eventPushState,
+    eventReplaceState,
+    eventHashchange
+  ];
+  const subscribeToLocationUpdates = (callback) => {
+    for (const event of events) {
+      addEventListener(event, callback);
+    }
+    return () => {
+      for (const event of events) {
+        removeEventListener(event, callback);
+      }
+    };
+  };
+  const useLocationProperty = (fn2, ssrFn) => shimExports.useSyncExternalStore(subscribeToLocationUpdates, fn2, ssrFn);
+  const currentPathname = () => location.pathname;
+  const usePathname = ({ ssrPath } = {}) => useLocationProperty(
+    currentPathname,
+    ssrPath ? () => ssrPath : currentPathname
+  );
+  const navigate = (to2, { replace = false } = {}) => history[replace ? eventReplaceState : eventPushState](null, "", to2);
+  const useLocation$1 = (opts = {}) => [
+    relativePath(opts.base, usePathname(opts)),
+    useEvent((to2, navOpts) => navigate(absolutePath(to2, opts.base), navOpts))
+  ];
+  if (typeof history !== "undefined") {
+    for (const type of [eventPushState, eventReplaceState]) {
+      const original = history[type];
+      history[type] = function() {
+        const result = original.apply(this, arguments);
+        const event = new Event(type);
+        event.arguments = arguments;
+        dispatchEvent(event);
+        return result;
+      };
+    }
+  }
+  function makeMatcher(makeRegexpFn = pathToRegexp) {
+    let cache = {};
+    const getRegexp = (pattern) => cache[pattern] || (cache[pattern] = makeRegexpFn(pattern));
+    return (pattern, path) => {
+      const { regexp, keys: keys2 } = getRegexp(pattern || "");
+      const out = regexp.exec(path);
+      if (!out)
+        return [false, null];
+      const params = keys2.reduce((params2, key, i2) => {
+        params2[key.name] = out[i2 + 1];
+        return params2;
+      }, {});
+      return [true, params];
+    };
+  }
+  const escapeRx = (str) => str.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
+  const rxForSegment = (repeat, optional, prefix) => {
+    let capture = repeat ? "((?:[^\\/]+?)(?:\\/(?:[^\\/]+?))*)" : "([^\\/]+?)";
+    if (optional && prefix)
+      capture = "(?:\\/" + capture + ")";
+    return capture + (optional ? "?" : "");
+  };
+  const pathToRegexp = (pattern) => {
+    const groupRx = /:([A-Za-z0-9_]+)([?+*]?)/g;
+    let match = null, lastIndex = 0, keys2 = [], result = "";
+    while ((match = groupRx.exec(pattern)) !== null) {
+      const [_10, segment, mod2] = match;
+      const repeat = mod2 === "+" || mod2 === "*";
+      const optional = mod2 === "?" || mod2 === "*";
+      const prefix = optional && pattern[match.index - 1] === "/" ? 1 : 0;
+      const prev = pattern.substring(lastIndex, match.index - prefix);
+      keys2.push({ name: segment });
+      lastIndex = groupRx.lastIndex;
+      result += escapeRx(prev) + rxForSegment(repeat, optional, prefix);
+    }
+    result += escapeRx(pattern.substring(lastIndex));
+    return { keys: keys2, regexp: new RegExp("^" + result + "(?:\\/)?$", "i") };
+  };
+  const defaultRouter = {
+    hook: useLocation$1,
+    matcher: makeMatcher(),
+    base: ""
+    // this option is used to override the current location during SSR
+    // ssrPath: undefined,
+  };
+  const RouterCtx = React.createContext(defaultRouter);
+  const useRouter = () => React.useContext(RouterCtx);
+  const useLocationFromRouter = (router) => router.hook(router);
+  const useLocation = () => useLocationFromRouter(useRouter());
+  const useRoute = (pattern) => {
+    const router = useRouter();
+    const [path] = useLocationFromRouter(router);
+    return router.matcher(pattern, path);
+  };
+  const ParamsCtx = React.createContext({ params: {} });
+  const useParams = () => React.useContext(ParamsCtx).params;
+  const ParamsWrapper = (params, children) => React.createElement(ParamsCtx.Provider, {
+    value: { params },
+    children
+  });
+  const Route = ({ path, match, component, children }) => {
+    const useRouteMatch = useRoute(path);
+    const [matches, params] = match || useRouteMatch;
+    if (!matches)
+      return null;
+    if (component)
+      return ParamsWrapper(params, React.createElement(component, { params }));
+    return ParamsWrapper(
+      params,
+      typeof children === "function" ? children(params) : children
+    );
+  };
+  React.forwardRef((props, ref) => {
+    const router = useRouter();
+    const [, navigate2] = useLocationFromRouter(router);
+    const { to: to2, href = to2, children, onClick } = props;
+    const handleClick = useEvent((event) => {
+      if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || event.button !== 0)
+        return;
+      onClick && onClick(event);
+      if (!event.defaultPrevented) {
+        event.preventDefault();
+        navigate2(to2 || href, props);
+      }
+    });
+    const extraProps = {
+      // handle nested routers and absolute paths
+      href: href[0] === "~" ? href.slice(1) : router.base + href,
+      onClick: handleClick,
+      to: null,
+      ref
+    };
+    const jsx = React.isValidElement(children) ? children : React.createElement("a", props);
+    return React.cloneElement(jsx, extraProps);
+  });
+  const flattenChildren = (children) => {
+    return Array.isArray(children) ? [].concat(
+      ...children.map(
+        (c3) => c3 && c3.type === React.Fragment ? flattenChildren(c3.props.children) : flattenChildren(c3)
+      )
+    ) : [children];
+  };
+  const Switch = ({ children, location: location2 }) => {
+    const router = useRouter();
+    const matcher = router.matcher;
+    const [originalLocation] = useLocationFromRouter(router);
+    for (const element of flattenChildren(children)) {
+      let match = 0;
+      if (React.isValidElement(element) && // we don't require an element to be of type Route,
+      // but we do require it to contain a truthy `path` prop.
+      // this allows to use different components that wrap Route
+      // inside of a switch, for example <AnimatedRoute />.
+      (match = element.props.path ? matcher(element.props.path, location2 || originalLocation) : [true, {}])[0])
+        return React.cloneElement(element, { match });
+    }
+    return null;
+  };
+  const ComponentScreen = () => {
+    const params = useParams();
+    const api = f0();
+    const plugin = api.plugin("plugin").component(params.componentKey);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(NN1, { overlay: true, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(YN1, { title: `'${params.componentKey}' Component` }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(D2, { halign: "center", valign: "center", children: plugin })
+    ] });
+  };
   let Plugin$2 = class Plugin {
     constructor() {
       __publicField(this, "config", {});
@@ -59427,6 +59697,10 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
         {
           path: "/about",
           element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(AboutScreen, {})
+        },
+        {
+          path: "/dev/component/:componentKey",
+          element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentScreen, {})
         }
       ];
     }
@@ -59459,6 +59733,14 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
         {
           key: "main",
           element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(MainBoard, {})
+        },
+        {
+          key: "dev",
+          element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(DevBoard, {})
+        },
+        {
+          key: "empty",
+          element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyBoard, {})
         }
       ];
     }
@@ -63368,15 +63650,15 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
     const userChanged = React.useCallback(async () => {
       console.log("### USER CHANGED");
       await updatePlugins(email, password);
-      await updateData(email, password);
-    }, [email, password]);
+      await updateData(email, password, plugin);
+    }, [email, password, plugin]);
     React.useEffect(() => {
       const update = async () => {
         await updatePlugins(email, password);
         if (plugin) {
           await updateLocalPlugin(plugin);
         }
-        await updateData(email, password);
+        await updateData(email, password, plugin);
         await watchUser(email, password, userChanged);
       };
       update();
@@ -65342,183 +65624,6 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
     mode: modes.out
   };
   const SwitchTransition$1 = SwitchTransition;
-  const {
-    useEffect,
-    useLayoutEffect,
-    useRef,
-    useInsertionEffect: useBuiltinInsertionEffect
-  } = React__namespace;
-  const canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-  const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
-  const useInsertionEffect = useBuiltinInsertionEffect || useIsomorphicLayoutEffect;
-  const useEvent = (fn2) => {
-    const ref = useRef([fn2, (...args) => ref[0](...args)]).current;
-    useInsertionEffect(() => {
-      ref[0] = fn2;
-    });
-    return ref[1];
-  };
-  const relativePath = (base = "", path = location.pathname) => !path.toLowerCase().indexOf(base.toLowerCase()) ? path.slice(base.length) || "/" : "~" + path;
-  const absolutePath = (to2, base = "") => to2[0] === "~" ? to2.slice(1) : base + to2;
-  const eventPopstate = "popstate";
-  const eventPushState = "pushState";
-  const eventReplaceState = "replaceState";
-  const eventHashchange = "hashchange";
-  const events = [
-    eventPopstate,
-    eventPushState,
-    eventReplaceState,
-    eventHashchange
-  ];
-  const subscribeToLocationUpdates = (callback) => {
-    for (const event of events) {
-      addEventListener(event, callback);
-    }
-    return () => {
-      for (const event of events) {
-        removeEventListener(event, callback);
-      }
-    };
-  };
-  const useLocationProperty = (fn2, ssrFn) => shimExports.useSyncExternalStore(subscribeToLocationUpdates, fn2, ssrFn);
-  const currentPathname = () => location.pathname;
-  const usePathname = ({ ssrPath } = {}) => useLocationProperty(
-    currentPathname,
-    ssrPath ? () => ssrPath : currentPathname
-  );
-  const navigate = (to2, { replace = false } = {}) => history[replace ? eventReplaceState : eventPushState](null, "", to2);
-  const useLocation$1 = (opts = {}) => [
-    relativePath(opts.base, usePathname(opts)),
-    useEvent((to2, navOpts) => navigate(absolutePath(to2, opts.base), navOpts))
-  ];
-  if (typeof history !== "undefined") {
-    for (const type of [eventPushState, eventReplaceState]) {
-      const original = history[type];
-      history[type] = function() {
-        const result = original.apply(this, arguments);
-        const event = new Event(type);
-        event.arguments = arguments;
-        dispatchEvent(event);
-        return result;
-      };
-    }
-  }
-  function makeMatcher(makeRegexpFn = pathToRegexp) {
-    let cache = {};
-    const getRegexp = (pattern) => cache[pattern] || (cache[pattern] = makeRegexpFn(pattern));
-    return (pattern, path) => {
-      const { regexp, keys: keys2 } = getRegexp(pattern || "");
-      const out = regexp.exec(path);
-      if (!out)
-        return [false, null];
-      const params = keys2.reduce((params2, key, i2) => {
-        params2[key.name] = out[i2 + 1];
-        return params2;
-      }, {});
-      return [true, params];
-    };
-  }
-  const escapeRx = (str) => str.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1");
-  const rxForSegment = (repeat, optional, prefix) => {
-    let capture = repeat ? "((?:[^\\/]+?)(?:\\/(?:[^\\/]+?))*)" : "([^\\/]+?)";
-    if (optional && prefix)
-      capture = "(?:\\/" + capture + ")";
-    return capture + (optional ? "?" : "");
-  };
-  const pathToRegexp = (pattern) => {
-    const groupRx = /:([A-Za-z0-9_]+)([?+*]?)/g;
-    let match = null, lastIndex = 0, keys2 = [], result = "";
-    while ((match = groupRx.exec(pattern)) !== null) {
-      const [_10, segment, mod2] = match;
-      const repeat = mod2 === "+" || mod2 === "*";
-      const optional = mod2 === "?" || mod2 === "*";
-      const prefix = optional && pattern[match.index - 1] === "/" ? 1 : 0;
-      const prev = pattern.substring(lastIndex, match.index - prefix);
-      keys2.push({ name: segment });
-      lastIndex = groupRx.lastIndex;
-      result += escapeRx(prev) + rxForSegment(repeat, optional, prefix);
-    }
-    result += escapeRx(pattern.substring(lastIndex));
-    return { keys: keys2, regexp: new RegExp("^" + result + "(?:\\/)?$", "i") };
-  };
-  const defaultRouter = {
-    hook: useLocation$1,
-    matcher: makeMatcher(),
-    base: ""
-    // this option is used to override the current location during SSR
-    // ssrPath: undefined,
-  };
-  const RouterCtx = React.createContext(defaultRouter);
-  const useRouter = () => React.useContext(RouterCtx);
-  const useLocationFromRouter = (router) => router.hook(router);
-  const useLocation = () => useLocationFromRouter(useRouter());
-  const useRoute = (pattern) => {
-    const router = useRouter();
-    const [path] = useLocationFromRouter(router);
-    return router.matcher(pattern, path);
-  };
-  const ParamsCtx = React.createContext({ params: {} });
-  const ParamsWrapper = (params, children) => React.createElement(ParamsCtx.Provider, {
-    value: { params },
-    children
-  });
-  const Route = ({ path, match, component, children }) => {
-    const useRouteMatch = useRoute(path);
-    const [matches, params] = match || useRouteMatch;
-    if (!matches)
-      return null;
-    if (component)
-      return ParamsWrapper(params, React.createElement(component, { params }));
-    return ParamsWrapper(
-      params,
-      typeof children === "function" ? children(params) : children
-    );
-  };
-  React.forwardRef((props, ref) => {
-    const router = useRouter();
-    const [, navigate2] = useLocationFromRouter(router);
-    const { to: to2, href = to2, children, onClick } = props;
-    const handleClick = useEvent((event) => {
-      if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || event.button !== 0)
-        return;
-      onClick && onClick(event);
-      if (!event.defaultPrevented) {
-        event.preventDefault();
-        navigate2(to2 || href, props);
-      }
-    });
-    const extraProps = {
-      // handle nested routers and absolute paths
-      href: href[0] === "~" ? href.slice(1) : router.base + href,
-      onClick: handleClick,
-      to: null,
-      ref
-    };
-    const jsx = React.isValidElement(children) ? children : React.createElement("a", props);
-    return React.cloneElement(jsx, extraProps);
-  });
-  const flattenChildren = (children) => {
-    return Array.isArray(children) ? [].concat(
-      ...children.map(
-        (c3) => c3 && c3.type === React.Fragment ? flattenChildren(c3.props.children) : flattenChildren(c3)
-      )
-    ) : [children];
-  };
-  const Switch = ({ children, location: location2 }) => {
-    const router = useRouter();
-    const matcher = router.matcher;
-    const [originalLocation] = useLocationFromRouter(router);
-    for (const element of flattenChildren(children)) {
-      let match = 0;
-      if (React.isValidElement(element) && // we don't require an element to be of type Route,
-      // but we do require it to contain a truthy `path` prop.
-      // this allows to use different components that wrap Route
-      // inside of a switch, for example <AnimatedRoute />.
-      (match = element.props.path ? matcher(element.props.path, location2 || originalLocation) : [true, {}])[0])
-        return React.cloneElement(element, { match });
-    }
-    return null;
-  };
   const RouteResolver = ({ route }) => {
     const api = f0();
     const resolveRouteElement = (route2) => {
@@ -65532,15 +65637,24 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
         const board = api.boards.find(
           (b10) => b10.key === api.boardKey
         );
-        if (board && board.base) {
-          const boardElement = api.plugin(board.base.plugin).board(board.base.key);
-          if (boardElement) {
-            return boardElement;
+        if (board) {
+          if (board.base) {
+            const boardElement = api.plugin(board.base.plugin).board(board.base.key);
+            if (boardElement) {
+              return boardElement;
+            }
+          } else {
+            return api.plugin(defaultBase.plugin).board(defaultBase.key);
           }
         }
-        return api.plugin(defaultBase.plugin).board(defaultBase.key);
+        const devBoard = api.plugin("plugin").board(api.boardKey);
+        if (devBoard) {
+          return devBoard;
+        }
+        return api.plugin(defaultBase.plugin).board(api.boardKey);
       }
     };
+    console.log("### ROUTE", route);
     return resolveRouteElement(route);
   };
   const Container$1 = styled.div`
@@ -65554,14 +65668,18 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
   flex-direction: column;
   overflow: hidden;
 `;
-  const Router = ({ userConfig }) => {
+  const Router = ({ userConfig, transitionDelay: transitionDelay2 }) => {
     const [routes, setRoutes] = React.useState([]);
+    const [boardKeys, setBoardKeys] = React.useState([]);
     const [location2, setLocation] = useLocation();
+    const [container, setContainer] = React.useState(null);
+    const [containerNodeRef, setContainerNodeRef] = React.useState(null);
     const { data, pluginInstances } = userConfig;
     React.useEffect(() => {
       const loadRoutes = async () => {
-        var _a2;
+        var _a2, _b2;
         const newRoutes = [];
+        const newBoardKeys = [];
         if (pluginInstances) {
           for (const key in pluginInstances) {
             (_a2 = pluginInstances[key].screens) == null ? void 0 : _a2.forEach((screen) => {
@@ -65573,45 +65691,70 @@ Arguments: ` + Array.prototype.slice.call(n10).join("") + `
                 nodeRef: React.createRef()
               });
             });
+            (_b2 = pluginInstances[key].boards) == null ? void 0 : _b2.forEach((board) => {
+              newBoardKeys.push("/" + board.key);
+            });
           }
         }
+        (data == null ? void 0 : data.boards) && data.boards.forEach((board) => {
+          newBoardKeys.push("/" + board.key);
+        });
         newRoutes.push({
           type: "root",
           route: `/:boardKey`,
           nodeRef: React.createRef()
         });
-        console.log("### LOADED ROUTES", newRoutes);
+        console.log("### LOADED ROUTES", newRoutes, newBoardKeys);
         setRoutes(newRoutes);
+        setBoardKeys(newBoardKeys);
       };
       loadRoutes();
-    }, [pluginInstances]);
+    }, [pluginInstances, data == null ? void 0 : data.boards]);
+    React.useEffect(() => {
+      const { nodeRef } = routes.find((route) => {
+        let path = "/:boardKey";
+        const tokens2 = location2.split("/");
+        tokens2.shift();
+        if (tokens2.length > 2) {
+          tokens2.shift();
+          path += "/" + tokens2.join("/");
+        }
+        return route.path === path;
+      }) ?? {};
+      const containerComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Container$1, { "aria-label": "router", ref: nodeRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, { children: routes.map((route) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Route, { path: route.route, children: (params) => {
+          globals.boardKey = params.boardKey || "#error";
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteResolver, { route });
+        } }, route.route);
+      }) }) });
+      console.log("### SETTING CONTAINER");
+      setContainerNodeRef(nodeRef);
+      setContainer(containerComponent);
+    }, [location2, routes]);
     if (!data) {
       return null;
     }
-    const { nodeRef } = routes.find((route) => {
-      let path = "/:boardKey";
-      const tokens2 = location2.split("/");
-      tokens2.shift();
-      if (tokens2.length > 2) {
-        tokens2.shift();
-        path += "/" + tokens2.join("/");
+    const defaultBoard = data.boards.length > 0 ? data.boards[0].key : "empty";
+    if (location2 === "/") {
+      setLocation(`/${defaultBoard}`);
+    } else {
+      const exists = boardKeys.some((key) => location2.startsWith(key));
+      if (!exists) {
+        setLocation(`/${defaultBoard}`);
       }
-      return route.path === path;
-    }) ?? {};
+    }
     globals.setLocation = setLocation;
+    if (transitionDelay2 <= 0) {
+      return container;
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchTransition$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       CSSTransition$1,
       {
-        nodeRef,
-        timeout: 50,
+        nodeRef: containerNodeRef,
+        timeout: transitionDelay2,
         classNames: "page",
         unmountOnExit: true,
-        children: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Container$1, { "aria-label": "router", ref: nodeRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Switch, { children: routes.map((route) => {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(Route, { path: route.route, children: (params) => {
-            globals.boardKey = params.boardKey || "#error";
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteResolver, { route });
-          } }, route.route);
-        }) }) })
+        children: () => container
       },
       location2
     ) });
@@ -65677,8 +65820,8 @@ body {
   opacity: 1;
   transform: scale(1);
   transition:
-    opacity 50ms,
-    transform 50ms;
+    opacity ${({ $transitionDelay }) => $transitionDelay}ms,
+    transform ${({ $transitionDelay }) => $transitionDelay}ms;
 }
 
 .page-exit {
@@ -65690,8 +65833,8 @@ body {
   opacity: 0;
   transform: scale(0.95);
   transition:
-    opacity 50ms,
-    transform 50ms;
+    opacity ${({ $transitionDelay }) => $transitionDelay}ms,
+    transform ${({ $transitionDelay }) => $transitionDelay}ms;
 }
 
 /* scrollbar */
@@ -65719,14 +65862,16 @@ body {
 }
 
 `;
+  const zoom = 1;
+  const transitionDelay = 0;
   const BoardProvider = ({ email, password, plugin }) => {
     const config2 = useUserConfig(email, password, plugin);
     const api = f0();
-    console.log("BoardProvider", { config: config2, api });
+    console.log("### LOADED", config2, api);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(styled.ThemeProvider, { theme: LT1, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(BoardStyles, { $zoom: 1 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(BoardStyles, { $zoom: zoom, $transitionDelay: transitionDelay }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Background, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { userConfig: config2 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { userConfig: config2, transitionDelay }),
       config2.loading && /* @__PURE__ */ jsxRuntimeExports.jsx(UN1, {})
     ] });
   };