@appkit/dek-lib 0.10.1 → 0.11.0

package/dist/index.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import * as React$3 from "react";
-import React__default, { useCallback, useState as useState$1, useEffect as useEffect$1, useRef as useRef$1, useLayoutEffect as useLayoutEffect$1, useMemo, useDebugValue, createContext, forwardRef, isValidElement, createElement, cloneElement, useContext, Fragment, createRef } from "react";
+import React__default, { useRef as useRef$1, useMemo, useEffect as useEffect$1, useState as useState$1, useLayoutEffect as useLayoutEffect$1, useCallback, useDebugValue, createContext, forwardRef, isValidElement, createElement, cloneElement, useContext, Fragment, createRef } from "react";
 import styled, { createGlobalStyle, ThemeProvider } from "styled-components";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
@@ -703,324 +703,6 @@ const jsxRuntimeModule = /* @__PURE__ */ _mergeNamespaces({
   __proto__: null,
   default: jsxRuntime
 }, [jsxRuntimeExports]);
-function useEventCallback$1(fn2) {
-  const ref = useRef$1(() => {
-    throw new Error("Cannot call an event handler while rendering.");
-  });
-  useIsomorphicLayoutEffect$2(() => {
-    ref.current = fn2;
-  }, [fn2]);
-  return useCallback((...args) => ref.current(...args), [ref]);
-}
-function useEventListener$1(eventName, handler, element, options) {
-  const savedHandler = useRef$1(handler);
-  useIsomorphicLayoutEffect$2(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-  useEffect$1(() => {
-    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" ? useLayoutEffect$1 : useEffect$1;
-function useLocalStorage$1(key, initialValue) {
-  const readValue = 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] = useState$1(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);
-    }
-  });
-  useEffect$1(() => {
-    setStoredValue(readValue());
-  }, []);
-  const handleStorageChange = 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);
@@ -42105,6 +41787,9 @@ var reactJsxParser_min = { exports: {} };
 })(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;
@@ -42141,7 +41826,7 @@ const parsePropsForComponent = (api2, props) => {
   return finalProps;
 };
 const Zone = (props) => {
-  const api2 = usePluginApi();
+  const api2 = getPluginApi();
   let label = "";
   if (props.id) {
     label = `${props.id}`;
@@ -42234,8 +41919,7 @@ const LayoutRenderer = ({ layout }) => {
     }
   );
 };
-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";
@@ -58211,6 +57895,407 @@ async function updateData(email, password, plugin) {
   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 = useRef$1(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  useIsomorphicLayoutEffect$2(() => {
+    ref.current = fn2;
+  }, [fn2]);
+  return useCallback((...args) => ref.current(...args), [ref]);
+}
+function useEventListener$1(eventName, handler, element, options) {
+  const savedHandler = useRef$1(handler);
+  useIsomorphicLayoutEffect$2(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect$1(() => {
+    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" ? useLayoutEffect$1 : useEffect$1;
+function useLocalStorage$1(key, initialValue) {
+  const readValue = 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] = useState$1(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);
+    }
+  });
+  useEffect$1(() => {
+    setStoredValue(readValue());
+  }, []);
+  const handleStorageChange = 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 {
@@ -58240,7 +58325,7 @@ async function fetchUserPlugins(email, password) {
   result.integrations.push({
     key: "base",
     pluginName: "base",
-    pluginVersion: "0.10.1",
+    pluginVersion: "0.11.0",
     pluginConfig: []
   });
   return result;
@@ -58353,7 +58438,7 @@ const WeatherIcon = ({ type }) => {
   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__default.useState();
   const data = transformWeatherData(entities["weather.forecast_home"]);
@@ -58415,16 +58500,15 @@ const Header = ({ height = 70 }) => {
 };
 const About = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(x0, { padding: 20, direction: "vert", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(hF1, { children: `Dek ${"0.10.1"}` }),
+    /* @__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] = useState$1(backgroundKey);
-  const api2 = usePluginApi();
   const backgrounds = api2.registry.collection("backgrounds");
   const backgroundItems = backgrounds.items;
   const backgroundPropsSchema = backgroundItems[selectedKey].props;
@@ -58522,8 +58606,7 @@ const Backgrounds = () => {
     }) })
   ] });
 };
-const Boards = () => {
-  const api2 = usePluginApi();
+const Boards = ({ api: api2 }) => {
   const boards = api2.boards;
   console.log("boards", boards);
   const openBoard = (boardKey) => {
@@ -58541,8 +58624,7 @@ const Boards = () => {
     ) }, 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,
     {
@@ -58553,8 +58635,7 @@ const Messages = () => {
     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: [
@@ -58588,9 +58669,9 @@ const PluginDev = () => {
     ) })
   ] });
 };
-const Theme = () => {
+const Theme = ({ api: api2 }) => {
   const [selectedKey, setSelectedKey] = useState$1("tile");
-  const [themeState, setThemeState] = usePluginState("base", "theme", {});
+  const [themeState, setThemeState] = usePluginState(api2, "theme", {});
   const handleSelection = (key) => {
     setSelectedKey(key);
   };
@@ -58669,8 +58750,7 @@ const Theme = () => {
     ] })
   ] });
 };
-const SettingsScreen = ({ isPluginDev }) => {
-  const api2 = usePluginApi();
+const SettingsScreen = ({ api: api2, isPluginDev }) => {
   const isPrivatePluginDev = !isPluginDev && api2.plugin("plugin").available;
   const [selectedKey, setSelectedKey] = useState$1(
     isPluginDev ? "plugin-dev" : "boards"
@@ -58719,18 +58799,18 @@ const SettingsScreen = ({ isPluginDev }) => {
           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(
@@ -58744,8 +58824,8 @@ const EmptyBoard = () => {
     }
   ) }) });
 };
-const MainBoard = () => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Board, {});
+const MainBoard = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Board, { ...props });
 };
 //! moment.js
 //! version : 2.29.4
@@ -62713,8 +62793,7 @@ const greetings = {
     "Time to rest"
   ]
 };
-const Greeting = () => {
-  const api2 = usePluginApi();
+const Greeting = ({ api: api2 }) => {
   const calendarPlugin = api2.plugin("calendar");
   const events2 = calendarPlugin.api.useEvents();
   const getGreeting = () => {
@@ -63027,8 +63106,7 @@ const ImageBackground = ({ itemKey = "fibre", opacity }) => {
   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(
@@ -89651,9 +89729,8 @@ var _default = lib.default = ace_1.default;
 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,
     ""
@@ -89948,15 +90025,15 @@ let Plugin$2 = class Plugin {
     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 })
       }
     ];
   }
@@ -89988,11 +90065,11 @@ let Plugin$2 = class Plugin {
     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",
@@ -93607,13 +93684,13 @@ const ControlSpacer = styled.div`
 styled(x0)`
   color: red;
 `;
-const MediaView = ({ entityId, showLargeContent = false }) => {
+const MediaView = ({ api: api2, entityId, showLargeContent = false }) => {
   const entity = useEntity(entityId);
   const [loading, setLoading] = useState$1(false);
   const [coverArtUrl, setCoverArtUrl] = useState$1("");
   const [playingState, setPLayingState] = useState$1("");
   const [lastAlbumArt, setLastAlbumArt] = usePluginState(
-    "home-assistant",
+    api2,
     "last-album-art",
     ""
   );
@@ -93799,14 +93876,14 @@ function constructPluginInstance(integration, plugin, pluginConfig = {}) {
   }
   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({
@@ -93899,7 +93976,7 @@ async function updateLocalPlugin(plugin, pluginConfig) {
     pluginConfig
   );
   if (loadedLocalPluginInstance && loadedLocalPluginInstance.load) {
-    await loadedLocalPluginInstance.load(window.__dek_api);
+    await loadedLocalPluginInstance.load(getPluginApi("plugin"));
   }
   updateStatePlugins(getAllPlugins(), getAllPluginInstances());
   updateStateLoading(false);
@@ -93943,10 +94020,10 @@ function useUserConfig(email, password, plugin, pluginConfig) {
   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);
@@ -94889,7 +94966,7 @@ SwitchTransition.defaultProps = {
 };
 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);
@@ -95128,7 +95205,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(
@@ -95162,7 +95240,7 @@ const CommandItem = styled.div`
   margin-top: 10px;
 `;
 const CommandGroup = ({ groupKey }) => {
-  const api2 = usePluginApi();
+  const api2 = getPluginApi();
   const group = api2.commandGroups.find(
     (g) => g.key == groupKey
   );