@appkit/dek-lib 0.1.0 → 0.2.0

package/dist/index.es.js

@@ -982,7 +982,7 @@ var wr$1 = { exports: {} };
 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__", y2 = 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__", y2 = 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],
@@ -1770,7 +1770,7 @@ wr$1.exports;
         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);
         }
@@ -1902,7 +1902,7 @@ wr$1.exports;
         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);
@@ -2336,7 +2336,7 @@ wr$1.exports;
         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);
@@ -3936,7 +3936,7 @@ wr$1.exports;
       }
       function Tg2(n10) {
         if (hc2(n10))
-          throw new b10(E2);
+          throw new b10(R);
         return nf2(n10);
       }
       function Cg2(n10) {
@@ -4551,7 +4551,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) {
@@ -4655,16 +4655,16 @@ const $i$1 = Object.getPrototypeOf, qi$1 = /* @__PURE__ */ new WeakMap(), Bo$1 =
   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 = ((y2) => Object.values(Object.getOwnPropertyDescriptors(y2)).some((K) => !K.configurable && !K.writable))(en2) ? [en2, G_$1(en2)] : [en2], R == null || R.set(d, O2);
+    E2 = ((y2) => Object.values(Object.getOwnPropertyDescriptors(y2)).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, y2) => {
     const K = { f: y2 };
     let W = false;
@@ -4680,47 +4680,47 @@ const $i$1 = Object.getPrototypeOf, qi$1 = /* @__PURE__ */ new WeakMap(), Bo$1 =
       }
     }, 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 y2 && (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), y2 = Reflect.ownKeys(X10);
         return en2.length !== y2.length || en2.some((K, W) => K !== y2[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 = (y2, K) => new Proxy(y2, K), o3 = (y2) => Gi$1(y2) && !dr$1.has(y2) && (Array.isArray(y2) || !(Symbol.iterator in y2)) && !(y2 instanceof WeakMap) && !(y2 instanceof WeakSet) && !(y2 instanceof Error) && !(y2 instanceof Number) && !(y2 instanceof Date) && !(y2 instanceof String) && !(y2 instanceof RegExp) && !(y2 instanceof ArrayBuffer), R = (y2) => {
+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 = (y2, K) => new Proxy(y2, K), o3 = (y2) => Gi$1(y2) && !dr$1.has(y2) && (Array.isArray(y2) || !(Symbol.iterator in y2)) && !(y2 instanceof WeakMap) && !(y2 instanceof WeakSet) && !(y2 instanceof Error) && !(y2 instanceof Number) && !(y2 instanceof Date) && !(y2 instanceof String) && !(y2 instanceof RegExp) && !(y2 instanceof ArrayBuffer), O2 = (y2) => {
   switch (y2.status) {
     case "fulfilled":
       return y2.value;
@@ -4729,12 +4729,12 @@ const Gi$1 = (d) => typeof d == "object" && d !== null, Oe$1 = /* @__PURE__ */ n
     default:
       throw y2;
   }
-}, O2 = /* @__PURE__ */ new WeakMap(), E2 = (y2, K, W = R) => {
-  const $10 = O2.get(y2);
+}, E2 = /* @__PURE__ */ new WeakMap(), R = (y2, K, W = O2) => {
+  const $10 = E2.get(y2);
   if (($10 == null ? void 0 : $10[0]) === K)
     return $10[1];
   const z = Array.isArray(y2) ? [] : Object.create(Object.getPrototypeOf(y2));
-  return Co$1(z, true), O2.set(y2, [K, z]), Reflect.ownKeys(y2).forEach((Z10) => {
+  return Co$1(z, true), E2.set(y2, [K, z]), Reflect.ownKeys(y2).forEach((Z10) => {
     if (Object.getOwnPropertyDescriptor(z, Z10))
       return;
     const N = Reflect.get(y2, Z10), { enumerable: V10 } = Reflect.getOwnPropertyDescriptor(
@@ -4755,7 +4755,7 @@ const Gi$1 = (d) => typeof d == "object" && d !== null, Oe$1 = /* @__PURE__ */ n
       const [he2, Y] = Oe$1.get(
         N
       );
-      j.value = E2(
+      j.value = R(
         he2,
         Y(),
         W
@@ -4828,7 +4828,7 @@ const Gi$1 = (d) => typeof d == "object" && d !== null, Oe$1 = /* @__PURE__ */ n
   const Tn2 = [
     un2,
     N,
-    E2,
+    R,
     Q
   ];
   return Oe$1.set(gn2, Tn2), Reflect.ownKeys(y2).forEach((C) => {
@@ -4848,9 +4848,9 @@ const Gi$1 = (d) => typeof d == "object" && d !== null, Oe$1 = /* @__PURE__ */ n
   d,
   w2,
   o3,
-  R,
   O2,
   E2,
+  R,
   T,
   X10
 ], [$_$1] = K_$1();
@@ -4858,17 +4858,17 @@ function q_$1(d = {}) {
   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 y2 = 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, () => {
@@ -4876,8 +4876,8 @@ function Go$1(d, w2, o3) {
   };
 }
 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 = {};
 /**
@@ -4898,12 +4898,12 @@ function z_$1() {
   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 });
       });
@@ -4944,10 +4944,10 @@ function Y_$1() {
       {
         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]));
@@ -4957,16 +4957,16 @@ function Y_$1() {
         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, y2 = d.useDebugValue, K = false, W = false;
+    var R = typeof Object.is == "function" ? Object.is : E2, T = d.useState, X10 = d.useEffect, en2 = d.useLayoutEffect, y2 = 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: {
@@ -4994,7 +4994,7 @@ function Y_$1() {
       var Q = Y.getSnapshot, un2 = Y.value;
       try {
         var sn2 = Q();
-        return !E2(un2, sn2);
+        return !R(un2, sn2);
       } catch {
         return true;
       }
@@ -5011,8 +5011,8 @@ var Z_$1 = zi$1.exports;
 const X_$1 = /* @__PURE__ */ Mo$1(Z_$1), { use: Wo$1 } = React__default, { 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 = useRef$1(), O2 = useRef$1();
-  let E2 = true;
+  const o3 = w2 == null ? void 0 : w2.sync, O2 = useRef$1(), E2 = useRef$1();
+  let R = true;
   const T = J_$1(
     useCallback(
       (y2) => {
@@ -5024,23 +5024,23 @@ function Ho$1(d, w2) {
     () => {
       const y2 = bo$1(d, Wo$1);
       try {
-        if (!E2 && R.current && O2.current && !No$1(
-          R.current,
-          y2,
+        if (!R && O2.current && E2.current && !No$1(
           O2.current,
+          y2,
+          E2.current,
           /* @__PURE__ */ new WeakMap()
         ))
-          return R.current;
+          return O2.current;
       } catch {
       }
       return y2;
     },
     () => bo$1(d, Wo$1)
   );
-  E2 = false;
+  R = false;
   const X10 = /* @__PURE__ */ new WeakMap();
   useEffect$1(() => {
-    R.current = T, O2.current = X10;
+    O2.current = T, E2.current = X10;
   });
   const en2 = useMemo(() => /* @__PURE__ */ new WeakMap(), []);
   return Fo$1(
@@ -5061,8 +5061,8 @@ function k_$1() {
   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])
@@ -5101,7 +5101,9 @@ let e0$1 = class e0 {
     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>";
@@ -5119,17 +5121,21 @@ let e0$1 = class e0 {
     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);
         }
       }
     };
@@ -5146,34 +5152,34 @@ let e0$1 = class e0 {
   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;
       }
     }
   }
@@ -5183,8 +5189,8 @@ function f0() {
   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 = {};
 /**
@@ -28755,6 +28761,8 @@ const OF1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
       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)
@@ -28776,6 +28784,8 @@ const OF1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
       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)
@@ -49586,81 +49596,6 @@ const globals = {
   }
 };
 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
@@ -55144,6 +55079,109 @@ lodash.exports;
 })(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.private !== "true") {
+      userData = _.cloneDeep(userData);
+      userData.boards = [
+        {
+          id: "test-plugin",
+          key: "dev",
+          // layout: `<Screen><View halign='center' valign='center'><Zone id='plugin'></Zone></View></Screen>`,
+          title: "Test Board",
+          base: {
+            plugin: "base",
+            key: "dev"
+          },
+          zones: []
+          // zones: [
+          //   {
+          //     key: 'plugin',
+          //     plugin: 'plugin',
+          //     component: 'toggle-button',
+          //     props: [],
+          //     containerProps: [],
+          //   },
+          // ],
+        }
+      ];
+    }
+  }
+  updateStateData(userData);
+  updateStateLoading(false);
+}
 const USER_PLUGIN_AND_INTEGRATIONS_QUERY = gql(`
   query userPluginsAndIntegrations {
     currentUser {
@@ -55344,6 +55382,61 @@ const Header = ({ height = 70 }) => {
     /* @__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, {});
 };
@@ -59391,6 +59484,193 @@ const SettingsScreen = () => {
     )) }) })
   ] }) });
 };
+const {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useInsertionEffect: useBuiltinInsertionEffect
+} = React;
+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 = createContext(defaultRouter);
+const useRouter = () => 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 = createContext({ params: {} });
+const useParams = () => useContext(ParamsCtx).params;
+const ParamsWrapper = (params, children) => 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, createElement(component, { params }));
+  return ParamsWrapper(
+    params,
+    typeof children === "function" ? children(params) : children
+  );
+};
+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 = isValidElement(children) ? children : createElement("a", props);
+  return cloneElement(jsx, extraProps);
+});
+const flattenChildren = (children) => {
+  return Array.isArray(children) ? [].concat(
+    ...children.map(
+      (c3) => c3 && c3.type === 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 (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 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", {});
@@ -59410,6 +59690,10 @@ let Plugin$2 = class Plugin {
       {
         path: "/about",
         element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(AboutScreen, {})
+      },
+      {
+        path: "/dev/component/:componentKey",
+        element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentScreen, {})
       }
     ];
   }
@@ -59442,6 +59726,14 @@ let Plugin$2 = class Plugin {
       {
         key: "main",
         element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(MainBoard, {})
+      },
+      {
+        key: "dev",
+        element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(DevBoard, {})
+      },
+      {
+        key: "empty",
+        element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyBoard, {})
       }
     ];
   }
@@ -63351,15 +63643,15 @@ function useUserConfig(email, password, plugin) {
   const userChanged = useCallback(async () => {
     console.log("### USER CHANGED");
     await updatePlugins(email, password);
-    await updateData(email, password);
-  }, [email, password]);
+    await updateData(email, password, plugin);
+  }, [email, password, plugin]);
   useEffect$1(() => {
     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();
@@ -65325,183 +65617,6 @@ SwitchTransition.defaultProps = {
   mode: modes.out
 };
 const SwitchTransition$1 = SwitchTransition;
-const {
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useInsertionEffect: useBuiltinInsertionEffect
-} = React;
-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 = createContext(defaultRouter);
-const useRouter = () => 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 = createContext({ params: {} });
-const ParamsWrapper = (params, children) => 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, createElement(component, { params }));
-  return ParamsWrapper(
-    params,
-    typeof children === "function" ? children(params) : children
-  );
-};
-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 = isValidElement(children) ? children : createElement("a", props);
-  return cloneElement(jsx, extraProps);
-});
-const flattenChildren = (children) => {
-  return Array.isArray(children) ? [].concat(
-    ...children.map(
-      (c3) => c3 && c3.type === 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 (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 cloneElement(element, { match });
-  }
-  return null;
-};
 const RouteResolver = ({ route }) => {
   const api = f0();
   const resolveRouteElement = (route2) => {
@@ -65515,15 +65630,24 @@ const RouteResolver = ({ route }) => {
       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`
@@ -65537,14 +65661,18 @@ const Container$1 = styled.div`
   flex-direction: column;
   overflow: hidden;
 `;
-const Router = ({ userConfig }) => {
+const Router = ({ userConfig, transitionDelay: transitionDelay2 }) => {
   const [routes, setRoutes] = useState([]);
+  const [boardKeys, setBoardKeys] = useState([]);
   const [location2, setLocation] = useLocation();
+  const [container, setContainer] = useState(null);
+  const [containerNodeRef, setContainerNodeRef] = useState(null);
   const { data, pluginInstances } = userConfig;
   useEffect$1(() => {
     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) => {
@@ -65556,45 +65684,70 @@ const Router = ({ userConfig }) => {
               nodeRef: 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: 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]);
+  useEffect$1(() => {
+    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
   ) });
@@ -65660,8 +65813,8 @@ body {
   opacity: 1;
   transform: scale(1);
   transition:
-    opacity 50ms,
-    transform 50ms;
+    opacity ${({ $transitionDelay }) => $transitionDelay}ms,
+    transform ${({ $transitionDelay }) => $transitionDelay}ms;
 }
 
 .page-exit {
@@ -65673,8 +65826,8 @@ body {
   opacity: 0;
   transform: scale(0.95);
   transition:
-    opacity 50ms,
-    transform 50ms;
+    opacity ${({ $transitionDelay }) => $transitionDelay}ms,
+    transform ${({ $transitionDelay }) => $transitionDelay}ms;
 }
 
 /* scrollbar */
@@ -65702,14 +65855,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(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, {})
   ] });
 };