@appkit/dek-lib 0.10.0 → 0.11.0

package/dist/index.umd.js

@@ -720,324 +720,6 @@ var __publicField = (obj, key, value) => {
     __proto__: null,
     default: jsxRuntime
   }, [jsxRuntimeExports]);
-  function useEventCallback$1(fn2) {
-    const ref = React$3.useRef(() => {
-      throw new Error("Cannot call an event handler while rendering.");
-    });
-    useIsomorphicLayoutEffect$2(() => {
-      ref.current = fn2;
-    }, [fn2]);
-    return React$3.useCallback((...args) => ref.current(...args), [ref]);
-  }
-  function useEventListener$1(eventName, handler, element, options) {
-    const savedHandler = React$3.useRef(handler);
-    useIsomorphicLayoutEffect$2(() => {
-      savedHandler.current = handler;
-    }, [handler]);
-    React$3.useEffect(() => {
-      var _a2;
-      const targetElement = (_a2 = element === null || element === void 0 ? void 0 : element.current) !== null && _a2 !== void 0 ? _a2 : window;
-      if (!(targetElement && targetElement.addEventListener))
-        return;
-      const listener = (event) => savedHandler.current(event);
-      targetElement.addEventListener(eventName, listener, options);
-      return () => {
-        targetElement.removeEventListener(eventName, listener, options);
-      };
-    }, [eventName, element, options]);
-  }
-  const useIsomorphicLayoutEffect$2 = typeof window !== "undefined" ? React$3.useLayoutEffect : React$3.useEffect;
-  function useLocalStorage$1(key, initialValue) {
-    const readValue = React$3.useCallback(() => {
-      if (typeof window === "undefined") {
-        return initialValue;
-      }
-      try {
-        const item = window.localStorage.getItem(key);
-        return item ? parseJSON$1(item) : initialValue;
-      } catch (error2) {
-        console.warn(`Error reading localStorage key “${key}”:`, error2);
-        return initialValue;
-      }
-    }, [initialValue, key]);
-    const [storedValue, setStoredValue] = React$3.useState(readValue);
-    const setValue = useEventCallback$1((value) => {
-      if (typeof window === "undefined") {
-        console.warn(`Tried setting localStorage key “${key}” even though environment is not a client`);
-      }
-      try {
-        const newValue = value instanceof Function ? value(storedValue) : value;
-        window.localStorage.setItem(key, JSON.stringify(newValue));
-        setStoredValue(newValue);
-        window.dispatchEvent(new Event("local-storage"));
-      } catch (error2) {
-        console.warn(`Error setting localStorage key “${key}”:`, error2);
-      }
-    });
-    React$3.useEffect(() => {
-      setStoredValue(readValue());
-    }, []);
-    const handleStorageChange = React$3.useCallback((event) => {
-      if ((event === null || event === void 0 ? void 0 : event.key) && event.key !== key) {
-        return;
-      }
-      setStoredValue(readValue());
-    }, [key, readValue]);
-    useEventListener$1("storage", handleStorageChange);
-    useEventListener$1("local-storage", handleStorageChange);
-    return [storedValue, setValue];
-  }
-  function parseJSON$1(value) {
-    try {
-      return value === "undefined" ? void 0 : JSON.parse(value !== null && value !== void 0 ? value : "");
-    } catch (_a2) {
-      console.log("parsing error on", { value });
-      return void 0;
-    }
-  }
-  function extractErrorMessage$1(err) {
-    return err instanceof Error ? err.message : JSON.stringify(err);
-  }
-  function setState(plugin, key, value) {
-    const localData = getStateRoot(plugin);
-    localData[key] = value;
-    localStorage.setItem(
-      `api:${plugin.toLowerCase()}`,
-      JSON.stringify(localData)
-    );
-    window.dispatchEvent(new Event("local-storage"));
-  }
-  function getState(plugin, key) {
-    const localData = getStateRoot(plugin);
-    return localData[key];
-  }
-  function getStateRoot(plugin) {
-    const local = localStorage.getItem(`api:${plugin.toLowerCase()}`);
-    return tryParseJson(local || "{}");
-  }
-  function tryParseJson(jsonString, defaultValue = {}) {
-    try {
-      return JSON.parse(jsonString);
-    } catch (err) {
-      console.warn(`Failed parsing JSON: ${extractErrorMessage$1(err)}`);
-      return defaultValue;
-    }
-  }
-  function useState(plugin) {
-    const [state2] = useLocalStorage$1(`api:${plugin.toLowerCase()}`, "{}");
-    return state2;
-  }
-  function isJsonString(str) {
-    if (typeof str !== "string") {
-      return false;
-    }
-    if (str.length === 0) {
-      return false;
-    }
-    if (str[0] !== "{" && str[0] !== "[") {
-      return false;
-    }
-    if (str[str.length - 1] !== "}" && str[str.length - 1] !== "]") {
-      return false;
-    }
-    return true;
-  }
-  class Api {
-    trace(message, ...data) {
-      console.log(`DEK-TRACE: ${message}`, ...data);
-      this.globals.messages.push({
-        type: "trace",
-        body: message,
-        data,
-        at: Date.now()
-      });
-    }
-    warn(message, ...data) {
-      console.warn(`DEK-WARN: ${message}`, ...data);
-      this.globals.messages.push({
-        type: "error",
-        body: message,
-        data,
-        at: Date.now()
-      });
-    }
-    error(message, ...data) {
-      console.error(`DEK-ERROR: ${message}`, ...data);
-      this.globals.messages.push({
-        type: "error",
-        body: message,
-        data,
-        at: Date.now()
-      });
-    }
-    messages() {
-      return this.globals.messages;
-    }
-    plugin(name) {
-      return this.createPluginWrapper(name);
-    }
-    get registry() {
-      return this.globals.registry;
-    }
-    get boardKey() {
-      return this.globals.navigateParams.boardKey || "#error";
-    }
-    get boards() {
-      return this.globals.boards;
-    }
-    get board() {
-      return this.boards.find((board) => board.key === this.boardKey) || {
-        zones: []
-      };
-    }
-    get layout() {
-      return this.board.layout || `<Screen><Text>Missing layout</Text></Screen>`;
-    }
-    get commandGroups() {
-      return this.globals.commandGroups;
-    }
-    navigate(path) {
-      this.globals.setLocation(`/${this.boardKey}${path}`);
-    }
-    get navigateParams() {
-      return this.globals.navigateParams;
-    }
-    navigateBack() {
-      history.back();
-    }
-    open(boardKey) {
-      this.globals.setLocation(`/${boardKey}`);
-    }
-    createPluginWrapper(integrationKey) {
-      const plugin = this.getPluginInstance(integrationKey);
-      const available = !!plugin;
-      return {
-        available,
-        info: {
-          components: (plugin == null ? void 0 : plugin.components) ? plugin.components.map((component) => component.key) : [],
-          screens: (plugin == null ? void 0 : plugin.screens) ? plugin.screens.map((screen) => screen.path) : []
-        },
-        component: (key, props) => this.getComponent(integrationKey, key, props),
-        componentSchema: (key) => this.getComponentSchema(integrationKey, key),
-        screen: (path) => this.getScreen(integrationKey, path),
-        board: (key) => this.getBoard(integrationKey, key),
-        api: (plugin == null ? void 0 : plugin.api) || {},
-        state: {
-          get: (key, defaultValue) => {
-            if (!available) {
-              return defaultValue;
-            }
-            return getState(integrationKey, key) || defaultValue;
-          },
-          set: (key, value) => {
-            if (!available) {
-              return;
-            }
-            setState(integrationKey, key, value);
-          }
-        }
-      };
-    }
-    get globals() {
-      return window.__dek_globals;
-    }
-    get plugins() {
-      const plugins = {};
-      Object.keys(this.globals.pluginInstances).forEach((key) => {
-        plugins[key] = this.createPluginWrapper(key);
-      });
-      return plugins;
-    }
-    getPluginInstance(integrationKey) {
-      return this.globals.pluginInstances[integrationKey];
-    }
-    getComponent(integrationKey, componentKey, props) {
-      const plugin = this.getPluginInstance(integrationKey);
-      if (plugin) {
-        const component = plugin.components && plugin.components.find(
-          (c2) => c2.key.toLowerCase() === componentKey.toLowerCase()
-        );
-        if (!component) {
-          return;
-        }
-        return component.element({ ...props, plugin });
-      }
-    }
-    getComponentSchema(integrationKey, componentKey) {
-      const plugin = this.getPluginInstance(integrationKey);
-      if (plugin) {
-        const component = plugin.components && plugin.components.find(
-          (c2) => c2.key.toLowerCase() === componentKey.toLowerCase()
-        );
-        if (component) {
-          return component.schema || {};
-        }
-      }
-      return {};
-    }
-    getScreen(integrationKey, screenPath) {
-      if (integrationKey) {
-        const plugin = this.getPluginInstance(integrationKey);
-        if (plugin) {
-          const component = plugin.screens && plugin.screens.find(
-            (s2) => s2.path.toLowerCase() === screenPath.toLowerCase()
-          );
-          if (!component) {
-            return;
-          }
-          return component.element({ plugin });
-        }
-      }
-    }
-    getBoard(integrationKey, boardKey) {
-      if (integrationKey) {
-        const plugin = this.getPluginInstance(integrationKey);
-        if (plugin) {
-          const component = plugin.boards && plugin.boards.find(
-            (c2) => c2.key.toLowerCase() === boardKey.toLowerCase()
-          );
-          if (!component) {
-            return;
-          }
-          return component.element({ plugin });
-        }
-      }
-    }
-  }
-  const api = new Api();
-  window.__dek_api = api;
-  function usePluginApi() {
-    return window.__dek_api;
-  }
-  function usePluginState(plugin, key, defaultValue) {
-    const state2 = useState(plugin);
-    let value;
-    if (state2 && state2[key]) {
-      value = state2[key];
-      if (isJsonString(value)) {
-        value = tryParseJson(value, defaultValue);
-      }
-    } else {
-      value = defaultValue;
-    }
-    return [
-      value,
-      (newValue) => {
-        if (typeof newValue === "object") {
-          newValue = JSON.stringify(newValue);
-        }
-        setState(plugin, key, newValue);
-      }
-    ];
-  }
-  function __debug() {
-  }
-  const dekPluginModule = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    __debug,
-    usePluginApi,
-    usePluginState
-  }, Symbol.toStringTag, { value: "Module" }));
   var _8 = Object.defineProperty;
   var P8 = (t2, r4, e4) => r4 in t2 ? _8(t2, r4, { enumerable: true, configurable: true, writable: true, value: e4 }) : t2[r4] = e4;
   var h0 = (t2, r4, e4) => (P8(t2, typeof r4 != "symbol" ? r4 + "" : r4, e4), e4);
@@ -42122,6 +41804,9 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
   })(reactJsxParser_min);
   var reactJsxParser_minExports = reactJsxParser_min.exports;
   const JsxParser = /* @__PURE__ */ getDefaultExportFromCjs(reactJsxParser_minExports);
+  function getPluginApi(integrationKey = "base") {
+    return window.__dek_api_factory(integrationKey);
+  }
   function isNumeric(str) {
     if (typeof str != "string") {
       return false;
@@ -42158,7 +41843,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
     return finalProps;
   };
   const Zone = (props) => {
-    const api2 = usePluginApi();
+    const api2 = getPluginApi();
     let label = "";
     if (props.id) {
       label = `${props.id}`;
@@ -42251,8 +41936,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       }
     );
   };
-  const Board = ({ layout }) => {
-    const api2 = usePluginApi();
+  const Board = ({ api: api2, layout }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutRenderer, { layout: layout || api2.layout });
   };
   const e = Symbol(), t = Symbol(), r = "a", n = "w";
@@ -58228,6 +57912,407 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
     updateStateData(userData);
     updateStateLoading(false);
   }
+  var __defProp2 = Object.defineProperty;
+  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField2 = (obj, key, value) => {
+    __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+    return value;
+  };
+  function useEventCallback$1(fn2) {
+    const ref = React$3.useRef(() => {
+      throw new Error("Cannot call an event handler while rendering.");
+    });
+    useIsomorphicLayoutEffect$2(() => {
+      ref.current = fn2;
+    }, [fn2]);
+    return React$3.useCallback((...args) => ref.current(...args), [ref]);
+  }
+  function useEventListener$1(eventName, handler, element, options) {
+    const savedHandler = React$3.useRef(handler);
+    useIsomorphicLayoutEffect$2(() => {
+      savedHandler.current = handler;
+    }, [handler]);
+    React$3.useEffect(() => {
+      var _a2;
+      const targetElement = (_a2 = element === null || element === void 0 ? void 0 : element.current) !== null && _a2 !== void 0 ? _a2 : window;
+      if (!(targetElement && targetElement.addEventListener))
+        return;
+      const listener = (event) => savedHandler.current(event);
+      targetElement.addEventListener(eventName, listener, options);
+      return () => {
+        targetElement.removeEventListener(eventName, listener, options);
+      };
+    }, [eventName, element, options]);
+  }
+  const useIsomorphicLayoutEffect$2 = typeof window !== "undefined" ? React$3.useLayoutEffect : React$3.useEffect;
+  function useLocalStorage$1(key, initialValue) {
+    const readValue = React$3.useCallback(() => {
+      if (typeof window === "undefined") {
+        return initialValue;
+      }
+      try {
+        const item = window.localStorage.getItem(key);
+        return item ? parseJSON$1(item) : initialValue;
+      } catch (error2) {
+        console.warn(`Error reading localStorage key “${key}”:`, error2);
+        return initialValue;
+      }
+    }, [initialValue, key]);
+    const [storedValue, setStoredValue] = React$3.useState(readValue);
+    const setValue = useEventCallback$1((value) => {
+      if (typeof window === "undefined") {
+        console.warn(`Tried setting localStorage key “${key}” even though environment is not a client`);
+      }
+      try {
+        const newValue = value instanceof Function ? value(storedValue) : value;
+        window.localStorage.setItem(key, JSON.stringify(newValue));
+        setStoredValue(newValue);
+        window.dispatchEvent(new Event("local-storage"));
+      } catch (error2) {
+        console.warn(`Error setting localStorage key “${key}”:`, error2);
+      }
+    });
+    React$3.useEffect(() => {
+      setStoredValue(readValue());
+    }, []);
+    const handleStorageChange = React$3.useCallback((event) => {
+      if ((event === null || event === void 0 ? void 0 : event.key) && event.key !== key) {
+        return;
+      }
+      setStoredValue(readValue());
+    }, [key, readValue]);
+    useEventListener$1("storage", handleStorageChange);
+    useEventListener$1("local-storage", handleStorageChange);
+    return [storedValue, setValue];
+  }
+  function parseJSON$1(value) {
+    try {
+      return value === "undefined" ? void 0 : JSON.parse(value !== null && value !== void 0 ? value : "");
+    } catch (_a2) {
+      console.log("parsing error on", { value });
+      return void 0;
+    }
+  }
+  function extractErrorMessage$1(err) {
+    return err instanceof Error ? err.message : JSON.stringify(err);
+  }
+  function setState(integrationKey, key, value) {
+    const localData = getStateRoot(integrationKey);
+    localData[key] = value;
+    localStorage.setItem(
+      `api:${integrationKey.toLowerCase()}`,
+      JSON.stringify(localData)
+    );
+    window.dispatchEvent(new Event("local-storage"));
+  }
+  function getState(integrationKey, key) {
+    const localData = getStateRoot(integrationKey);
+    return localData[key];
+  }
+  function getStateRoot(integrationKey) {
+    const local = localStorage.getItem(`api:${integrationKey.toLowerCase()}`);
+    return tryParseJson(local || "{}");
+  }
+  function tryParseJson(jsonString, defaultValue = {}) {
+    try {
+      return JSON.parse(jsonString);
+    } catch (err) {
+      console.warn(`Failed parsing JSON: ${extractErrorMessage$1(err)}`);
+      return defaultValue;
+    }
+  }
+  function useState(plugin) {
+    const [state2] = useLocalStorage$1(`api:${plugin.toLowerCase()}`, "{}");
+    return state2;
+  }
+  function isJsonString(str) {
+    if (typeof str !== "string") {
+      return false;
+    }
+    if (str.length === 0) {
+      return false;
+    }
+    if (str[0] !== "{" && str[0] !== "[") {
+      return false;
+    }
+    if (str[str.length - 1] !== "}" && str[str.length - 1] !== "]") {
+      return false;
+    }
+    return true;
+  }
+  class Api {
+    constructor(integrationKey) {
+      __publicField2(this, "integrationKey");
+      this.integrationKey = integrationKey;
+    }
+    get internal() {
+      return window.__dek_api;
+    }
+    trace(message, ...data) {
+      this.internal.trace(this.integrationKey, message, ...data);
+    }
+    warn(message, ...data) {
+      this.internal.warn(this.integrationKey, message, ...data);
+    }
+    error(message, ...data) {
+      this.internal.error(this.integrationKey, message, ...data);
+    }
+    messages() {
+      return this.internal.messages();
+    }
+    plugin(name) {
+      return this.internal.plugin(name);
+    }
+    get registry() {
+      return this.internal.registry;
+    }
+    get boardKey() {
+      return this.internal.boardKey;
+    }
+    get boards() {
+      return this.internal.boards;
+    }
+    get board() {
+      return this.internal.board;
+    }
+    get layout() {
+      return this.internal.layout;
+    }
+    get commandGroups() {
+      return this.internal.commandGroups;
+    }
+    navigate(path) {
+      this.internal.navigate(path);
+    }
+    get navigateParams() {
+      return this.internal.navigateParams;
+    }
+    navigateBack() {
+      this.internal.navigateBack();
+    }
+    open(boardKey) {
+      this.internal.open(boardKey);
+    }
+    get plugins() {
+      return this.internal.plugins;
+    }
+    get api() {
+      return this.plugin(this.integrationKey).api;
+    }
+    get state() {
+      return this.plugin(this.integrationKey).state;
+    }
+    get info() {
+      return this.plugin(this.integrationKey).info;
+    }
+    component(key, props) {
+      return this.plugin(this.integrationKey).component(key, props);
+    }
+    componentSchema(key) {
+      return this.plugin(this.integrationKey).componentSchema(key);
+    }
+    screen(path) {
+      return this.plugin(this.integrationKey).screen(path);
+    }
+  }
+  class ApiInternal {
+    trace(integrationKey, message, ...data) {
+      console.log(`DEK-TRACE[${integrationKey}]: ${message}`, ...data);
+      this.globals.messages.push({
+        type: "trace",
+        body: message,
+        data,
+        at: Date.now()
+      });
+    }
+    warn(integrationKey, message, ...data) {
+      console.warn(`DEK-WARN[${integrationKey}]: ${message}`, ...data);
+      this.globals.messages.push({
+        type: "error",
+        body: message,
+        data,
+        at: Date.now()
+      });
+    }
+    error(integrationKey, message, ...data) {
+      console.error(`DEK-ERROR[${integrationKey}]: ${message}`, ...data);
+      this.globals.messages.push({
+        type: "error",
+        body: message,
+        data,
+        at: Date.now()
+      });
+    }
+    messages() {
+      return this.globals.messages;
+    }
+    plugin(name) {
+      return this.createPluginWrapper(name);
+    }
+    get registry() {
+      return this.globals.registry;
+    }
+    get boardKey() {
+      return this.globals.navigateParams.boardKey || "#error";
+    }
+    get boards() {
+      return this.globals.boards;
+    }
+    get board() {
+      return this.boards.find((board) => board.key === this.boardKey) || {
+        zones: []
+      };
+    }
+    get layout() {
+      return this.board.layout || `<Screen><Text>Missing layout</Text></Screen>`;
+    }
+    get commandGroups() {
+      return this.globals.commandGroups;
+    }
+    navigate(path) {
+      this.globals.setLocation(`/${this.boardKey}${path}`);
+    }
+    get navigateParams() {
+      return this.globals.navigateParams;
+    }
+    navigateBack() {
+      history.back();
+    }
+    open(boardKey) {
+      this.globals.setLocation(`/${boardKey}`);
+    }
+    createPluginWrapper(integrationKey) {
+      const plugin = this.getPluginInstance(integrationKey);
+      const available = !!plugin;
+      return {
+        available,
+        info: {
+          components: (plugin == null ? void 0 : plugin.components) ? plugin.components.map((component) => component.key) : [],
+          screens: (plugin == null ? void 0 : plugin.screens) ? plugin.screens.map((screen) => screen.path) : []
+        },
+        component: (key, props) => this.getComponent(integrationKey, key, props),
+        componentSchema: (key) => this.getComponentSchema(integrationKey, key),
+        screen: (path) => this.getScreen(integrationKey, path),
+        board: (key) => this.getBoard(integrationKey, key),
+        api: (plugin == null ? void 0 : plugin.api) || {},
+        state: {
+          get: (key, defaultValue) => {
+            if (!available) {
+              return defaultValue;
+            }
+            return getState(integrationKey, key) || defaultValue;
+          },
+          set: (key, value) => {
+            if (!available) {
+              return;
+            }
+            setState(integrationKey, key, value);
+          }
+        }
+      };
+    }
+    get globals() {
+      return window.__dek_globals;
+    }
+    get plugins() {
+      const plugins = {};
+      Object.keys(this.globals.pluginInstances).forEach((key) => {
+        plugins[key] = this.createPluginWrapper(key);
+      });
+      return plugins;
+    }
+    getPluginInstance(integrationKey) {
+      return this.globals.pluginInstances[integrationKey];
+    }
+    getComponent(integrationKey, componentKey, props) {
+      const plugin = this.getPluginInstance(integrationKey);
+      if (plugin) {
+        const component = plugin.components && plugin.components.find(
+          (c2) => c2.key.toLowerCase() === componentKey.toLowerCase()
+        );
+        if (!component) {
+          return;
+        }
+        return component.element({
+          ...props,
+          plugin,
+          api: new Api(integrationKey)
+        });
+      }
+    }
+    getComponentSchema(integrationKey, componentKey) {
+      const plugin = this.getPluginInstance(integrationKey);
+      if (plugin) {
+        const component = plugin.components && plugin.components.find(
+          (c2) => c2.key.toLowerCase() === componentKey.toLowerCase()
+        );
+        if (component) {
+          return component.schema || {};
+        }
+      }
+      return {};
+    }
+    getScreen(integrationKey, screenPath) {
+      if (integrationKey) {
+        const plugin = this.getPluginInstance(integrationKey);
+        if (plugin) {
+          const component = plugin.screens && plugin.screens.find(
+            (s2) => s2.path.toLowerCase() === screenPath.toLowerCase()
+          );
+          if (!component) {
+            return;
+          }
+          return component.element({ plugin, api: new Api(integrationKey) });
+        }
+      }
+    }
+    getBoard(integrationKey, boardKey) {
+      if (integrationKey) {
+        const plugin = this.getPluginInstance(integrationKey);
+        if (plugin) {
+          const component = plugin.boards && plugin.boards.find(
+            (c2) => c2.key.toLowerCase() === boardKey.toLowerCase()
+          );
+          if (!component) {
+            return;
+          }
+          return component.element({ plugin, api: new Api(integrationKey) });
+        }
+      }
+    }
+  }
+  const api = new ApiInternal();
+  window.__dek_api = api;
+  window.__dek_api_factory = (integrationKey) => new Api(integrationKey);
+  function usePluginState(api2, key, defaultValue) {
+    const integrationKey = api2.integrationKey;
+    const state2 = useState(integrationKey);
+    let value;
+    if (state2 && state2[key]) {
+      value = state2[key];
+      if (isJsonString(value)) {
+        value = tryParseJson(value, defaultValue);
+      }
+    } else {
+      value = defaultValue;
+    }
+    return [
+      value,
+      (newValue) => {
+        if (typeof newValue === "object") {
+          newValue = JSON.stringify(newValue);
+        }
+        setState(integrationKey, key, newValue);
+      }
+    ];
+  }
+  function __debug() {
+  }
+  const dekPluginModule = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    __debug,
+    usePluginState
+  }, Symbol.toStringTag, { value: "Module" }));
   const USER_PLUGIN_AND_INTEGRATIONS_QUERY = gql(`
   query userPluginsAndIntegrations {
     currentUser {
@@ -58257,7 +58342,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
     result.integrations.push({
       key: "base",
       pluginName: "base",
-      pluginVersion: "0.10.0",
+      pluginVersion: "0.11.0",
       pluginConfig: []
     });
     return result;
@@ -58370,7 +58455,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$9, { "aria-label": "weather-icon", $top: info.top, $left: info.left, children: info.element });
   };
   const WeatherComponent = () => {
-    const api2 = usePluginApi();
+    const api2 = getPluginApi();
     const entities = useEntities();
     const [weatherData, setWeatherData] = React$3.useState();
     const data = transformWeatherData(entities["weather.forecast_home"]);
@@ -58432,16 +58517,15 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
   };
   const About = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(x0, { padding: 20, direction: "vert", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(hF1, { children: `Dek ${"0.10.0"}` }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(hF1, { children: `Dek ${"0.11.0"}` }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(X4, { children: "From Appkit" })
     ] });
   };
-  const Backgrounds = () => {
-    const [backgroundKey] = usePluginState("base", "backgroundKey", "image");
+  const Backgrounds = ({ api: api2 }) => {
+    const [backgroundKey] = usePluginState(api2, "backgroundKey", "image");
     const propsKey = `backgroundProps-${backgroundKey}`;
-    const [backgroundProps] = usePluginState("base", propsKey, {});
+    const [backgroundProps] = usePluginState(api2, propsKey, {});
     const [selectedKey, setSelectedKey] = React$3.useState(backgroundKey);
-    const api2 = usePluginApi();
     const backgrounds = api2.registry.collection("backgrounds");
     const backgroundItems = backgrounds.items;
     const backgroundPropsSchema = backgroundItems[selectedKey].props;
@@ -58539,8 +58623,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       }) })
     ] });
   };
-  const Boards = () => {
-    const api2 = usePluginApi();
+  const Boards = ({ api: api2 }) => {
     const boards = api2.boards;
     console.log("boards", boards);
     const openBoard = (boardKey) => {
@@ -58558,8 +58641,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       ) }, key)) })
     ] });
   };
-  const Messages = () => {
-    const api2 = usePluginApi();
+  const Messages = ({ api: api2 }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(x0, { direction: "vert", vscroll: "auto", paddingTop: 20, children: api2.messages().map((msg, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       X4,
       {
@@ -58570,8 +58652,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       idx
     )) });
   };
-  const PluginDev = () => {
-    const api2 = usePluginApi();
+  const PluginDev = ({ api: api2 }) => {
     const plugin = api2.plugin("plugin");
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(x0, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(x0, { padding: 20, collapse: true, direction: "vert", children: [
@@ -58605,9 +58686,9 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       ) })
     ] });
   };
-  const Theme = () => {
+  const Theme = ({ api: api2 }) => {
     const [selectedKey, setSelectedKey] = React$3.useState("tile");
-    const [themeState, setThemeState] = usePluginState("base", "theme", {});
+    const [themeState, setThemeState] = usePluginState(api2, "theme", {});
     const handleSelection = (key) => {
       setSelectedKey(key);
     };
@@ -58686,8 +58767,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       ] })
     ] });
   };
-  const SettingsScreen = ({ isPluginDev }) => {
-    const api2 = usePluginApi();
+  const SettingsScreen = ({ api: api2, isPluginDev }) => {
     const isPrivatePluginDev = !isPluginDev && api2.plugin("plugin").available;
     const [selectedKey, setSelectedKey] = React$3.useState(
       isPluginDev ? "plugin-dev" : "boards"
@@ -58736,18 +58816,18 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
             initialKey: selectedKey
           }
         ),
-        selectedKey === "plugin-dev" && /* @__PURE__ */ jsxRuntimeExports.jsx(PluginDev, {}),
-        selectedKey === "backgrounds" && /* @__PURE__ */ jsxRuntimeExports.jsx(Backgrounds, {}),
-        selectedKey === "theme" && /* @__PURE__ */ jsxRuntimeExports.jsx(Theme, {}),
-        selectedKey === "messages" && /* @__PURE__ */ jsxRuntimeExports.jsx(Messages, {}),
+        selectedKey === "plugin-dev" && /* @__PURE__ */ jsxRuntimeExports.jsx(PluginDev, { api: api2 }),
+        selectedKey === "backgrounds" && /* @__PURE__ */ jsxRuntimeExports.jsx(Backgrounds, { api: api2 }),
+        selectedKey === "theme" && /* @__PURE__ */ jsxRuntimeExports.jsx(Theme, { api: api2 }),
+        selectedKey === "messages" && /* @__PURE__ */ jsxRuntimeExports.jsx(Messages, { api: api2 }),
         selectedKey === "about" && /* @__PURE__ */ jsxRuntimeExports.jsx(About, {}),
-        selectedKey === "boards" && /* @__PURE__ */ jsxRuntimeExports.jsx(Boards, {})
+        selectedKey === "boards" && /* @__PURE__ */ jsxRuntimeExports.jsx(Boards, { api: api2 })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(_G1, { title, noclose: isPluginDev })
     ] });
   };
-  const DevBoard = () => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsScreen, { isPluginDev: true });
+  const DevBoard = (props) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsScreen, { isPluginDev: true, ...props });
   };
   const EmptyBoard = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(OG1, { overlay: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(x0, { paddingTop: 100, paddingHorz: 20, collapse: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -58761,8 +58841,8 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       }
     ) }) });
   };
-  const MainBoard = () => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Board, {});
+  const MainBoard = (props) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Board, { ...props });
   };
   //! moment.js
   //! version : 2.29.4
@@ -62730,8 +62810,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       "Time to rest"
     ]
   };
-  const Greeting = () => {
-    const api2 = usePluginApi();
+  const Greeting = ({ api: api2 }) => {
     const calendarPlugin = api2.plugin("calendar");
     const events2 = calendarPlugin.api.useEvents();
     const getGreeting = () => {
@@ -63044,8 +63123,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
     opacity = opacity === void 0 ? background.opacity : opacity;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$3, { "aria-label": "background", $imageUrl: background.uri, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { $opacity: opacity || 0 }) });
   };
-  const AboutScreen = () => {
-    const api2 = usePluginApi();
+  const AboutScreen = ({ api: api2 }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(OG1, { overlay: true, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(_G1, { title: "About" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(x0, { paddingTop: 100, paddingHorz: 20, collapse: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -89668,9 +89746,8 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
   const AceEditorStyled = styled(_default)`
   background: #ffffff66;
 `;
-  const ComponentScreen = () => {
+  const ComponentScreen = ({ api: api2 }) => {
     const params = useParams();
-    const api2 = usePluginApi();
     const [propsString, setPropsString] = useLocalStorage(
       "component-" + params.componentKey,
       ""
@@ -89965,15 +90042,15 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       return [
         {
           path: "/settings",
-          element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsScreen, {})
+          element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsScreen, { ...props })
         },
         {
           path: "/about",
-          element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(AboutScreen, {})
+          element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(AboutScreen, { ...props })
         },
         {
           path: "/dev/component/:componentKey",
-          element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentScreen, {})
+          element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentScreen, { ...props })
         }
       ];
     }
@@ -90005,11 +90082,11 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       return [
         {
           key: "main",
-          element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(MainBoard, {})
+          element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(MainBoard, { ...props })
         },
         {
           key: "dev",
-          element: () => /* @__PURE__ */ jsxRuntimeExports.jsx(DevBoard, {})
+          element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(DevBoard, { ...props })
         },
         {
           key: "empty",
@@ -93624,13 +93701,13 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
   styled(x0)`
   color: red;
 `;
-  const MediaView = ({ entityId, showLargeContent = false }) => {
+  const MediaView = ({ api: api2, entityId, showLargeContent = false }) => {
     const entity = useEntity(entityId);
     const [loading, setLoading] = React$3.useState(false);
     const [coverArtUrl, setCoverArtUrl] = React$3.useState("");
     const [playingState, setPLayingState] = React$3.useState("");
     const [lastAlbumArt, setLastAlbumArt] = usePluginState(
-      "home-assistant",
+      api2,
       "last-album-art",
       ""
     );
@@ -93816,14 +93893,14 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
     }
     return new plugin(pluginConfigMerged, registry);
   }
-  async function initializePluginInstance(pluginInstance) {
+  async function initializePluginInstance(pluginInstance, integrationKey) {
     if (pluginInstance && pluginInstance.load) {
-      await pluginInstance.load(window.__dek_api);
+      await pluginInstance.load(getPluginApi(integrationKey));
     }
   }
   async function initializePluginInstances() {
     for (const key of Object.keys(loadedDekPluginInstances)) {
-      await initializePluginInstance(loadedDekPluginInstances[key]);
+      await initializePluginInstance(loadedDekPluginInstances[key], key);
     }
   }
   async function loadPlugins({
@@ -93904,9 +93981,9 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
   async function updateLocalPlugin(plugin, pluginConfig) {
     updateStateLoading(true);
     const integration = {
-      pluginName: "local",
+      pluginName: "plugin",
       pluginVersion: "latest",
-      key: "local",
+      key: "plugin",
       pluginConfig: []
     };
     loadedLocalPlugin = plugin;
@@ -93916,7 +93993,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
       pluginConfig
     );
     if (loadedLocalPluginInstance && loadedLocalPluginInstance.load) {
-      await loadedLocalPluginInstance.load(window.__dek_api);
+      await loadedLocalPluginInstance.load(getPluginApi("plugin"));
     }
     updateStatePlugins(getAllPlugins(), getAllPluginInstances());
     updateStateLoading(false);
@@ -93960,10 +94037,10 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
     return userConfig;
   }
   const Background = () => {
-    const api2 = usePluginApi();
-    const [backgroundKey] = usePluginState("base", "backgroundKey", "image");
+    const api2 = getPluginApi();
+    const [backgroundKey] = usePluginState(api2, "backgroundKey", "image");
     const propsKey = `backgroundProps-${backgroundKey}`;
-    const [backgroundProps] = usePluginState("base", propsKey, {});
+    const [backgroundProps] = usePluginState(api2, propsKey, {});
     const backgrounds = api2.registry.collection("backgrounds");
     if (backgrounds && backgrounds.items && backgrounds.items[backgroundKey]) {
       return backgrounds.items[backgroundKey].component(backgroundProps);
@@ -94906,7 +94983,7 @@ Arguments: ` + Array.prototype.slice.call(h2).join("") + `
   };
   const SwitchTransition$1 = SwitchTransition;
   const RouteResolver = ({ route }) => {
-    const api2 = usePluginApi();
+    const api2 = getPluginApi();
     const resolveRouteElement = (route2) => {
       if (route2.type === "screen") {
         return api2.plugin(route2.plugin).screen(route2.path);
@@ -95145,7 +95222,8 @@ body {
 
 `;
   const BoardStyles = ({ transitionDelay: transitionDelay2 }) => {
-    const [themeState] = usePluginState("base", "theme", {});
+    const api2 = getPluginApi();
+    const [themeState] = usePluginState(api2, "theme", {});
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(wG1, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -95179,7 +95257,7 @@ body {
   margin-top: 10px;
 `;
   const CommandGroup = ({ groupKey }) => {
-    const api2 = usePluginApi();
+    const api2 = getPluginApi();
     const group = api2.commandGroups.find(
       (g) => g.key == groupKey
     );