@appkit/dek-lib 0.25.0 → 0.27.0

package/dist/index.umd.js

@@ -1117,14 +1117,14 @@ var __publicField = (obj, key, value) => {
           }
         return null;
       }
-      var Z = Object.assign, L1 = 0, d1, I, S, n1, B1, f1, S1;
+      var Z = Object.assign, L1 = 0, d1, I, S, n1, C1, f1, S1;
       function j1() {
       }
       j1.__reactDisabledLog = true;
       function k1() {
         {
           if (L1 === 0) {
-            d1 = console.log, I = console.info, S = console.warn, n1 = console.error, B1 = console.group, f1 = console.groupCollapsed, S1 = console.groupEnd;
+            d1 = console.log, I = console.info, S = console.warn, n1 = console.error, C1 = console.group, f1 = console.groupCollapsed, S1 = console.groupEnd;
             var _10 = {
               configurable: true,
               enumerable: true,
@@ -1166,7 +1166,7 @@ var __publicField = (obj, key, value) => {
                 value: n1
               }),
               group: Z({}, _10, {
-                value: B1
+                value: C1
               }),
               groupCollapsed: Z({}, _10, {
                 value: f1
@@ -1634,7 +1634,7 @@ Check the top-level render call using <` + u1 + ">.");
 `, F4 = (t2, e2 = false) => t2 === "center" ? "center" : t2 === "left" ? e2 ? "flex-end" : "flex-start" : t2 === "stretch" ? "stretch" : e2 ? "flex-start" : "flex-end", E4 = (t2, e2 = false) => t2 === "center" ? "center" : t2 === "top" ? e2 ? "flex-end" : "flex-start" : e2 ? "flex-start" : "flex-end", f7 = styled.div`
   box-sizing: border-box;
   background-color: ${(t2) => t2.$active ? t2.$backColorActive : t2.$backColor};
-  filter: ${(t2) => t2.$disabled ? `brightness(${C1.button.brightnessDisabled})` : t2.$pressed ? `brightness(${C1.button.brightnessPressed})` : "none"};
+  filter: ${(t2) => t2.$disabled ? `brightness(${B1.button.brightnessDisabled})` : t2.$pressed ? `brightness(${B1.button.brightnessPressed})` : "none"};
   border-radius: ${({ $borderRadius: t2 }) => typeof t2 == "number" ? `${t2}px` : t2};
   width: ${({ $width: t2 }) => typeof t2 == "number" ? `${t2}px` : t2};
   height: ${({ $height: t2 }) => typeof t2 == "number" ? `${t2}px` : t2};
@@ -1685,7 +1685,7 @@ Check the top-level render call using <` + u1 + ">.");
     }, W = () => {
       e2 || X();
     }, G = i2 ? void 0 : r2 ? `dek-button-${t2}-active` : `dek-button-${t2}`;
-    return i2 || (i2 = (J = C1.button[t2]) == null ? void 0 : J.backColor), c2 || (c2 = (r1 = C1.button[t2]) == null ? void 0 : r1.backColorActive), /* @__PURE__ */ z1.jsx(
+    return i2 || (i2 = (J = B1.button[t2]) == null ? void 0 : J.backColor), c2 || (c2 = (r1 = B1.button[t2]) == null ? void 0 : r1.backColorActive), /* @__PURE__ */ z1.jsx(
       f7,
       {
         $pressed: e2 ? false : R,
@@ -24515,7 +24515,7 @@ Check the top-level render call using <` + u1 + ">.");
     iconPadding: c2 = 2,
     iconBackColor: l2 = ""
   }) => {
-    const o4 = e2 ? h2 : n5 || C1.button.normal.color, d = l2 ? i2 - 4 : i2, g = c2, f4 = l2 ? 2 : 0;
+    const o4 = e2 ? h2 : n5 || B1.button.normal.color, d = l2 ? i2 - 4 : i2, g = c2, f4 = l2 ? 2 : 0;
     return /* @__PURE__ */ z1.jsxs(
       OU1,
       {
@@ -24538,7 +24538,7 @@ Check the top-level render call using <` + u1 + ">.");
         ]
       }
     );
-  }, C1 = {
+  }, B1 = {
     text: {
       size: {
         xxsmall: 10,
@@ -24635,15 +24635,15 @@ Check the top-level render call using <` + u1 + ">.");
   function z5(t2) {
     switch (t2) {
       case "xxsubtle":
-        return C1.text.color.xxsubtle;
+        return B1.text.color.xxsubtle;
       case "xsubtle":
-        return C1.text.color.xsubtle;
+        return B1.text.color.xsubtle;
       case "subtle":
-        return C1.text.color.subtle;
+        return B1.text.color.subtle;
       case "tint":
-        return C1.text.color.tint;
+        return B1.text.color.tint;
       case "normal":
-        return C1.text.color.normal;
+        return B1.text.color.normal;
       default:
         return t2;
     }
@@ -24651,97 +24651,97 @@ Check the top-level render call using <` + u1 + ">.");
   function H3(t2) {
     switch (t2) {
       case "normal":
-        return C1.text.family.normal;
+        return B1.text.family.normal;
       case "condensed":
-        return C1.text.family.condensed;
+        return B1.text.family.condensed;
       case "mono":
-        return C1.text.family.mono;
+        return B1.text.family.mono;
       case "slab":
-        return C1.text.family.slab;
+        return B1.text.family.slab;
       case "flex":
-        return C1.text.family.flex;
+        return B1.text.family.flex;
       case "heading":
-        return C1.text.family.heading;
+        return B1.text.family.heading;
       default:
         return t2;
     }
   }
   function j4(t2) {
     if (t2 === void 0)
-      return C1.text.size.normal;
+      return B1.text.size.normal;
     if (typeof t2 == "number")
       return t2;
     switch (t2) {
       case "xxsmall":
-        return C1.text.size.xxsmall;
+        return B1.text.size.xxsmall;
       case "xsmall":
-        return C1.text.size.xsmall;
+        return B1.text.size.xsmall;
       case "small":
-        return C1.text.size.small;
+        return B1.text.size.small;
       case "normal":
-        return C1.text.size.normal;
+        return B1.text.size.normal;
       case "large":
-        return C1.text.size.large;
+        return B1.text.size.large;
       case "xlarge":
-        return C1.text.size.xlarge;
+        return B1.text.size.xlarge;
       case "xxlarge":
-        return C1.text.size.xxlarge;
+        return B1.text.size.xxlarge;
       case "heading":
-        return C1.text.size.heading;
+        return B1.text.size.heading;
     }
   }
   function N9(t2) {
     if (t2 === void 0)
-      return C1.text.height.normal;
+      return B1.text.height.normal;
     if (typeof t2 == "number")
       return t2 + 5;
     switch (t2) {
       case "xxsmall":
-        return C1.text.height.xxsmall;
+        return B1.text.height.xxsmall;
       case "xsmall":
-        return C1.text.height.xsmall;
+        return B1.text.height.xsmall;
       case "small":
-        return C1.text.height.small;
+        return B1.text.height.small;
       case "normal":
-        return C1.text.height.normal;
+        return B1.text.height.normal;
       case "large":
-        return C1.text.height.large;
+        return B1.text.height.large;
       case "xlarge":
-        return C1.text.height.xlarge;
+        return B1.text.height.xlarge;
       case "xxlarge":
-        return C1.text.height.xxlarge;
+        return B1.text.height.xxlarge;
       case "heading":
-        return C1.text.height.heading;
+        return B1.text.height.heading;
     }
   }
   function M5(t2) {
     if (t2 === void 0)
-      return C1.text.weight.normal;
+      return B1.text.weight.normal;
     if (typeof t2 == "number")
       return t2;
     switch (t2) {
       case "xxthin":
-        return C1.text.weight.xxthin;
+        return B1.text.weight.xxthin;
       case "xthin":
-        return C1.text.weight.xthin;
+        return B1.text.weight.xthin;
       case "thin":
-        return C1.text.weight.thin;
+        return B1.text.weight.thin;
       case "normal":
-        return C1.text.weight.normal;
+        return B1.text.weight.normal;
       case "bold":
-        return C1.text.weight.bold;
+        return B1.text.weight.bold;
       case "xbold":
-        return C1.text.weight.xbold;
+        return B1.text.weight.xbold;
       case "xxbold":
-        return C1.text.weight.xxbold;
+        return B1.text.weight.xxbold;
       case "heavy":
-        return C1.text.weight.heavy;
+        return B1.text.weight.heavy;
       case "xheavy":
-        return C1.text.weight.xheavy;
+        return B1.text.weight.xheavy;
       case "xxheavy":
-        return C1.text.weight.xxheavy;
+        return B1.text.weight.xxheavy;
       case "heading":
-        return C1.text.weight.heading;
+        return B1.text.weight.heading;
     }
   }
   const bU1 = styled.div`
@@ -24859,22 +24859,22 @@ Check the top-level render call using <` + u1 + ">.");
     }, N = t2.variant === "clear" || t2.variant === "toggle" ? t2.variant : "normal", X = {
       ...t2,
       pressed: e2,
-      color: m || ((Q = C1.button[N]) == null ? void 0 : Q.color),
-      colorActive: B || (($ = C1.button[N]) == null ? void 0 : $.colorActive),
+      color: m || ((Q = B1.button[N]) == null ? void 0 : Q.color),
+      colorActive: B || (($ = B1.button[N]) == null ? void 0 : $.colorActive),
       textStyle: {},
       label: "button-text"
     }, c1 = {
       ...t2,
       pressed: e2,
-      iconColor: i2 || m || ((W = C1.button[N]) == null ? void 0 : W.color),
-      iconColorActive: w2 || B || ((G = C1.button[N]) == null ? void 0 : G.colorActive),
+      iconColor: i2 || m || ((W = B1.button[N]) == null ? void 0 : W.color),
+      iconColorActive: w2 || B || ((G = B1.button[N]) == null ? void 0 : G.colorActive),
       label: "button-icon"
     }, a1 = {
       ...t2,
       variant: N,
       paddingVert: f4 === void 0 && d === void 0 && g === void 0 && o4 === void 0 ? 12 : o4,
       // if only backColor is set, use it for backColorActive (except for toggle variants)
-      backColorActive: l2 || (N !== "toggle" ? c2 || ((J = C1.button[N]) == null ? void 0 : J.backColor) : void 0)
+      backColorActive: l2 || (N !== "toggle" ? c2 || ((J = B1.button[N]) == null ? void 0 : J.backColor) : void 0)
     };
     let R = null;
     return C ? R = C : h2 === "none" ? (X.textStyle.margin = "4px 4px 0 4px", R = /* @__PURE__ */ z1.jsx(P8, { ...X })) : (h2 === "top" ? (a1.direction = "vert", X.textStyle.margin = "0 4px") : h2 === "right" ? (a1.direction = "horz-reverse", X.textStyle.margin = "4px 4px 0 4px") : h2 === "bottom" ? (a1.direction = "vert-reverse", X.textStyle.margin = "0 4px") : h2 === "left" && (a1.direction = "horz", X.textStyle.margin = "4px 4px 0 4px"), R = /* @__PURE__ */ z1.jsxs(z1.Fragment, { children: [
@@ -24891,79 +24891,36 @@ Check the top-level render call using <` + u1 + ">.");
         children: R
       }
     );
-  }, Bt2 = (t2) => {
-    const {
-      title: e2,
-      width: r2 = C1.card.width,
-      height: n5 = C1.card.height,
-      halign: h2 = "left",
-      valign: i2 = "top",
-      onPressed: c2,
-      children: l2,
-      borderRadius: o4 = C1.card.borderRadius,
-      onClick: d = I0
-    } = t2;
-    return /* @__PURE__ */ z1.jsx(
-      R6,
-      {
-        ...t2,
-        label: "card-button",
-        width: r2,
-        height: n5,
-        halign: h2,
-        valign: i2,
-        title: e2,
-        borderRadius: o4,
-        onClick: d,
-        onPressed: c2,
-        children: l2
-      }
-    );
-  }, _U1 = (t2) => {
-    const { onPressed: e2, children: r2, onClick: n5 = I0, padding: h2 = 6 } = t2;
-    return /* @__PURE__ */ z1.jsx(
-      R6,
-      {
-        ...t2,
-        label: "icon-button",
-        padding: h2,
-        halign: "center",
-        valign: "center",
-        onClick: n5,
-        onPressed: e2,
-        children: r2
-      }
-    );
   };
   function A3(t2) {
     switch (t2) {
       case "subtle":
-        return console.error("subtle view backColor is deprecated"), C1.text.color.subtle;
+        return console.error("subtle view backColor is deprecated"), B1.text.color.subtle;
       case "tile":
-        return C1.view.backColor.tile;
+        return B1.view.backColor.tile;
       case "card":
-        return C1.view.backColor.card;
+        return B1.view.backColor.card;
       case "clear":
-        return C1.view.backColor.clear;
+        return B1.view.backColor.clear;
       case "light":
-        return C1.view.backColor.light;
+        return B1.view.backColor.light;
       case "lighter":
-        return C1.view.backColor.lighter;
+        return B1.view.backColor.lighter;
       case "lightest":
-        return C1.view.backColor.lightest;
+        return B1.view.backColor.lightest;
       case "dark":
-        return C1.view.backColor.dark;
+        return B1.view.backColor.dark;
       case "darker":
-        return C1.view.backColor.darker;
+        return B1.view.backColor.darker;
       case "darkest":
-        return C1.view.backColor.darkest;
+        return B1.view.backColor.darkest;
       case "none":
         return "transparent";
       default:
         return t2;
     }
   }
-  const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 === "hidden" ? "hidden" : "initial", xa = (t2) => typeof t2 == "string" ? t2 === "true" : t2, IU1 = styled.div`
+  const b3 = (t2) => t2 === "always" ? "scroll" : t2 === "auto" ? "auto" : t2 === "hidden" ? "hidden" : "initial", xa = (t2) => typeof t2 == "string" ? t2 === "true" : t2, _U1 = styled.div`
   display: flex;
   box-sizing: border-box;
   ${(t2) => xa(t2.$collapse) ? "flex-shrink: 0;" : ""}
@@ -24974,7 +24931,7 @@ Check the top-level render call using <` + u1 + ">.");
   }};
   ${({ $fixed: t2 }) => t2 === "none" ? "" : t2 === "top" ? "position: absolute; top: 0; left: 0; right: 0;" : "position: absolute; bottom: 0; left: 0; right: 0;"}
   width: ${({ $width: t2 }) => typeof t2 == "number" ? `${t2}px` : t2};
-  color: ${() => C1.text.color.normal};
+  color: ${() => B1.text.color.normal};
   border-radius: ${(t2) => t2.$borderRadius}px;
   overflow-y: ${({ $vscroll: t2 }) => b3(t2)};
   overflow-x: ${({ $hscroll: t2 }) => b3(t2)};
@@ -25027,7 +24984,7 @@ Check the top-level render call using <` + u1 + ">.");
     style: G,
     children: J
   }) => /* @__PURE__ */ z1.jsx(
-    IU1,
+    _U1,
     {
       "aria-label": t2 || "view",
       $direction: e2,
@@ -25058,37 +25015,117 @@ Check the top-level render call using <` + u1 + ">.");
       style: G,
       children: J
     }
-  ), PU1 = ({ size: t2, weight: e2, ...r2 }) => /* @__PURE__ */ z1.jsx(h4, { size: t2 || "heading", weight: e2 || "heading", ...r2 }), WU1 = ({ title: t2, active: e2, onClick: r2 = I0 }) => /* @__PURE__ */ z1.jsx(
-    u0,
-    {
-      backColor: e2 ? "clear" : "none",
-      backColorHover: e2 ? "lighter" : "light",
-      borderRadius: 6,
-      onClick: r2,
-      collapse: true,
-      className: e2 ? "dek-button-clear" : "",
-      style: { marginBottom: 4, marginRight: 4, cursor: "pointer" },
-      children: /* @__PURE__ */ z1.jsx(PU1, { padding: 20, children: t2 })
-    }
-  ), Ct2 = ({
+  ), Bt2 = (t2) => {
+    const {
+      variant: e2 = "normal",
+      children: r2,
+      square: n5 = false,
+      width: h2 = n5 ? B1.card.height : B1.card.width,
+      height: i2 = B1.card.height,
+      borderRadius: c2 = B1.card.borderRadius,
+      label: l2 = "card",
+      ...o4
+    } = t2;
+    let { backColor: d } = t2;
+    const g = d ? void 0 : `dek-card-${e2}`;
+    return d || (d = e2 === "normal" ? B1.view.backColor.card : B1.view.backColor.clear), /* @__PURE__ */ z1.jsx(
+      u0,
+      {
+        width: h2,
+        height: i2,
+        className: g,
+        backColor: d,
+        borderRadius: c2,
+        label: l2,
+        ...o4,
+        children: r2
+      }
+    );
+  }, Ct2 = (t2) => {
+    const {
+      title: e2,
+      square: r2 = false,
+      width: n5 = r2 ? B1.card.height : B1.card.width,
+      height: h2 = B1.card.height,
+      halign: i2 = "left",
+      valign: c2 = "top",
+      onPressed: l2,
+      children: o4,
+      borderRadius: d = B1.card.borderRadius,
+      onClick: g = I0
+    } = t2;
+    return /* @__PURE__ */ z1.jsx(
+      R6,
+      {
+        ...t2,
+        label: "card-button",
+        width: n5,
+        height: h2,
+        halign: i2,
+        valign: c2,
+        title: e2,
+        borderRadius: d,
+        onClick: g,
+        onPressed: l2,
+        children: o4
+      }
+    );
+  }, IU1 = (t2) => {
+    const { onPressed: e2, children: r2, onClick: n5 = I0, padding: h2 = 6 } = t2;
+    return /* @__PURE__ */ z1.jsx(
+      R6,
+      {
+        ...t2,
+        label: "icon-button",
+        padding: h2,
+        halign: "center",
+        valign: "center",
+        onClick: n5,
+        onPressed: e2,
+        children: r2
+      }
+    );
+  }, PU1 = ({ size: t2, weight: e2, ...r2 }) => /* @__PURE__ */ z1.jsx(h4, { size: t2 || "heading", weight: e2 || "heading", ...r2 }), WU1 = ({
+    title: t2,
+    active: e2,
+    compact: r2 = false,
+    onClick: n5 = I0
+  }) => {
+    const h2 = r2 ? 10 : 20, i2 = r2 ? "large" : void 0;
+    return /* @__PURE__ */ z1.jsx(
+      u0,
+      {
+        backColor: e2 ? "clear" : "none",
+        backColorHover: e2 ? "lighter" : "light",
+        borderRadius: 6,
+        onClick: n5,
+        collapse: true,
+        className: e2 ? "dek-button-clear" : "",
+        style: { marginBottom: 4, marginRight: 4, cursor: "pointer" },
+        children: /* @__PURE__ */ z1.jsx(PU1, { size: i2, padding: h2, children: t2 })
+      }
+    );
+  }, yt2 = ({
     items: t2,
     initialKey: e2,
     direction: r2 = "vert",
-    onSelect: n5 = I0
+    compact: n5 = false,
+    onSelect: h2 = I0
   }) => {
-    const [h2, i2] = React$3.useState(e2), c2 = (l2) => {
-      i2(l2), n5(l2);
+    const [i2, c2] = React$3.useState(e2), l2 = (o4) => {
+      c2(o4), h2(o4);
     };
-    return /* @__PURE__ */ z1.jsx(u0, { children: /* @__PURE__ */ z1.jsx(u0, { direction: r2, collapse: true, children: t2.map(({ key: l2, title: o4 }) => /* @__PURE__ */ z1.jsx(
+    return /* @__PURE__ */ z1.jsx(u0, { children: /* @__PURE__ */ z1.jsx(u0, { direction: r2, collapse: true, children: t2.map(({ key: o4, title: d }) => /* @__PURE__ */ z1.jsx(
       WU1,
       {
-        title: o4,
-        onClick: () => c2(l2),
-        active: h2 === l2
+        title: d,
+        compact: n5,
+        onClick: () => l2(o4),
+        active: i2 === o4
       },
-      l2
+      o4
     )) }) });
-  }, yt2 = (t2) => {
+  }, kt2 = (t2) => {
     const { title: e2, icon: r2 = "left", onPressed: n5, children: h2, onClick: i2 = I0 } = t2;
     return /* @__PURE__ */ z1.jsx(
       R6,
@@ -25113,7 +25150,7 @@ Check the top-level render call using <` + u1 + ">.");
   padding: ${({ $padding: t2 }) => t2}px;
   background-color: ${({ $backColor: t2 }) => t2};
   border-radius: 50%;
-`, TU1 = styled.div``, kt2 = ({
+`, TU1 = styled.div``, Ot2 = ({
     loading: t2 = false,
     disabled: e2 = false,
     iconName: r2,
@@ -25122,7 +25159,7 @@ Check the top-level render call using <` + u1 + ">.");
     iconPadding: i2 = 2,
     iconBackColor: c2 = "transparent"
   }) => {
-    const l2 = e2 ? "#888" : n5 === void 0 ? C1.text.color.normal : n5;
+    const l2 = e2 ? "#888" : n5 === void 0 ? B1.text.color.normal : n5;
     return /* @__PURE__ */ z1.jsxs(
       DU1,
       {
@@ -25143,31 +25180,6 @@ Check the top-level render call using <` + u1 + ">.");
         ]
       }
     );
-  }, Ot2 = (t2) => {
-    const {
-      variant: e2 = "normal",
-      children: r2,
-      width: n5 = C1.card.width,
-      height: h2 = C1.card.height,
-      borderRadius: i2 = C1.card.borderRadius,
-      label: c2 = "card",
-      ...l2
-    } = t2;
-    let { backColor: o4 } = t2;
-    const d = o4 ? void 0 : `dek-card-${e2}`;
-    return o4 || (o4 = e2 === "normal" ? C1.view.backColor.card : C1.view.backColor.clear), /* @__PURE__ */ z1.jsx(
-      u0,
-      {
-        width: n5,
-        height: h2,
-        className: d,
-        backColor: o4,
-        borderRadius: i2,
-        label: c2,
-        ...l2,
-        children: r2
-      }
-    );
   };
   var $9 = {}, U9 = {}, h6 = { exports: {} }, wa = { exports: {} }, Y5 = { exports: {} }, Ba = { exports: {} }, G5 = { exports: {} }, Ca, W8;
   function RU1() {
@@ -25183,7 +25195,7 @@ Check the top-level render call using <` + u1 + ">.");
           !n5.call(v, E) && E !== V && t2(v, E, { get: () => M[E], enumerable: !(k = e2(M, E)) || k.enumerable });
       return v;
     }, c2 = (v) => i2(t2({}, "__esModule", { value: true }), v), l2 = {};
-    h2(l2, { FluidValue: () => _10, Globals: () => o4, addFluidObserver: () => u1, callFluidObserver: () => ct, callFluidObservers: () => e0, clamp: () => Q2, colorToRgba: () => X1, colors: () => $1, createInterpolator: () => L0, createStringInterpolator: () => A2, defineHidden: () => D, deprecateDirectCall: () => v4, deprecateInterpolate: () => o42, each: () => d1, eachProp: () => I, easings: () => J0, flush: () => n1, flushCalls: () => B1, frameLoop: () => c23, getFluidObservers: () => yt, getFluidValue: () => W0, hasFluidValue: () => Z0, hex3: () => x, hex4: () => z, hex6: () => p4, hex8: () => O, hsl: () => F2, hsla: () => l0, is: () => Z, isAnimatedString: () => ot, isEqual: () => L1, isSSR: () => f1, noop: () => r1, onResize: () => kt, onScroll: () => z4, once: () => D0, prefix: () => P1, raf: () => g, removeFluidObserver: () => E1, rgb: () => q2, rgba: () => S2, setFluidGetter: () => v1, toArray: () => S, useConstant: () => E0, useForceUpdate: () => L, useIsomorphicLayoutEffect: () => u7, useMemoOne: () => P, useOnce: () => h1, usePrev: () => l1, useReducedMotion: () => V1 }), Ca = c2(l2);
+    h2(l2, { FluidValue: () => _10, Globals: () => o4, addFluidObserver: () => u1, callFluidObserver: () => ct, callFluidObservers: () => e0, clamp: () => Q2, colorToRgba: () => X1, colors: () => $1, createInterpolator: () => L0, createStringInterpolator: () => A2, defineHidden: () => D, deprecateDirectCall: () => v4, deprecateInterpolate: () => o42, each: () => d1, eachProp: () => I, easings: () => J0, flush: () => n1, flushCalls: () => C1, frameLoop: () => c23, getFluidObservers: () => yt, getFluidValue: () => W0, hasFluidValue: () => Z0, hex3: () => x, hex4: () => z, hex6: () => p4, hex8: () => O, hsl: () => F2, hsla: () => l0, is: () => Z, isAnimatedString: () => ot, isEqual: () => L1, isSSR: () => f1, noop: () => r1, onResize: () => kt, onScroll: () => z4, once: () => D0, prefix: () => P1, raf: () => g, removeFluidObserver: () => E1, rgb: () => q2, rgba: () => S2, setFluidGetter: () => v1, toArray: () => S, useConstant: () => E0, useForceUpdate: () => L, useIsomorphicLayoutEffect: () => u7, useMemoOne: () => P, useOnce: () => h1, usePrev: () => l1, useReducedMotion: () => V1 }), Ca = c2(l2);
     var o4 = {};
     h2(o4, { assign: () => H1, colors: () => k1, createStringInterpolator: () => S1, skipAnimation: () => y2, to: () => j1, willAdvance: () => K });
     var d = G(), g = (v) => a1(v, d), f4 = G();
@@ -25301,7 +25313,7 @@ Check the top-level render call using <` + u1 + ">.");
         v.clear(), d1(V, M);
       }
     }
-    var B1 = (v, ...M) => n1(v, (V) => V(...M)), f1 = () => typeof window > "u" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent), S1, j1, k1 = null, y2 = false, K = r1, H1 = (v) => {
+    var C1 = (v, ...M) => n1(v, (V) => V(...M)), f1 = () => typeof window > "u" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent), S1, j1, k1 = null, y2 = false, K = r1, H1 = (v) => {
       v.to && (j1 = v.to), v.now && (g.now = v.now), v.colors !== void 0 && (k1 = v.colors), v.skipAnimation != null && (y2 = v.skipAnimation), v.createStringInterpolator && (S1 = v.createStringInterpolator), v.requestAnimationFrame && g.use(v.requestAnimationFrame), v.batchedUpdates && (g.batchedUpdates = v.batchedUpdates), v.willAdvance && (K = v.willAdvance), v.frameLoop && (g.frameLoop = v.frameLoop);
     }, g1 = /* @__PURE__ */ new Set(), M1 = [], I1 = [], R1 = 0, c23 = { get idle() {
       return !g1.size && !M1.length;
@@ -25624,7 +25636,7 @@ Check the top-level render call using <` + u1 + ">.");
       eachProp: () => I,
       easings: () => J0,
       flush: () => n1,
-      flushCalls: () => B1,
+      flushCalls: () => C1,
       frameLoop: () => c23,
       getFluidObservers: () => yt,
       getFluidValue: () => W0,
@@ -25798,7 +25810,7 @@ Check the top-level render call using <` + u1 + ">.");
         v.clear(), d1(V, M);
       }
     }
-    var B1 = (v, ...M) => n1(v, (V) => V(...M)), f1 = () => typeof window > "u" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent), S1, j1, k1 = null, y2 = false, K = r1, H1 = (v) => {
+    var C1 = (v, ...M) => n1(v, (V) => V(...M)), f1 = () => typeof window > "u" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent), S1, j1, k1 = null, y2 = false, K = r1, H1 = (v) => {
       v.to && (j1 = v.to), v.now && (g.now = v.now), v.colors !== void 0 && (k1 = v.colors), v.skipAnimation != null && (y2 = v.skipAnimation), v.createStringInterpolator && (S1 = v.createStringInterpolator), v.requestAnimationFrame && g.use(v.requestAnimationFrame), v.batchedUpdates && (g.batchedUpdates = v.batchedUpdates), v.willAdvance && (K = v.willAdvance), v.frameLoop && (g.frameLoop = v.frameLoop);
     }, g1 = /* @__PURE__ */ new Set(), M1 = [], I1 = [], R1 = 0, c23 = {
       get idle() {
@@ -26538,7 +26550,7 @@ Check the top-level render call using <` + u1 + ">.");
       return (0, d1.forwardRef)((g1, M1) => {
         let I1 = (0, d1.useRef)(null), R1 = H1 && (0, d1.useCallback)(($1) => {
           I1.current = f1(M1, $1);
-        }, [M1]), [c23, K1] = B1(g1, K), H2 = (0, I.useForceUpdate)(), W2 = () => {
+        }, [M1]), [c23, K1] = C1(g1, K), H2 = (0, I.useForceUpdate)(), W2 = () => {
           let $1 = I1.current;
           H1 && !$1 || ($1 ? K.applyAnimatedValues($1, c23.getValue(true)) : false) === false && H2();
         }, z2 = new n1(W2, K1), M2 = (0, d1.useRef)();
@@ -26559,7 +26571,7 @@ Check the top-level render call using <` + u1 + ">.");
         y2.type == "change" && I.raf.write(this.update);
       }
     };
-    function B1(y2, K) {
+    function C1(y2, K) {
       let H1 = /* @__PURE__ */ new Set();
       return $.dependencies = H1, y2.style && (y2 = { ...y2, style: K.createAnimatedStyle(y2.style) }), y2 = new W(y2), $.dependencies = null, [y2, H1];
     }
@@ -26737,7 +26749,7 @@ Check the top-level render call using <` + u1 + ">.");
             I1.current = f1(M1, $1);
           },
           [M1]
-        ), [c23, K1] = B1(g1, K), H2 = (0, I.useForceUpdate)(), W2 = () => {
+        ), [c23, K1] = C1(g1, K), H2 = (0, I.useForceUpdate)(), W2 = () => {
           const $1 = I1.current;
           if (H1 && !$1)
             return;
@@ -26763,7 +26775,7 @@ Check the top-level render call using <` + u1 + ">.");
         y2.type == "change" && I.raf.write(this.update);
       }
     };
-    function B1(y2, K) {
+    function C1(y2, K) {
       const H1 = /* @__PURE__ */ new Set();
       return $.dependencies = H1, y2.style && (y2 = {
         ...y2,
@@ -26934,7 +26946,7 @@ Check the top-level render call using <` + u1 + ">.");
           }
         });
       }
-      var L1 = T1(), d1 = React$3, I = T1(), S = T1(), n1 = Vt(), B1 = T1(), f1 = { default: { tension: 170, friction: 26 }, gentle: { tension: 120, friction: 14 }, wobbly: { tension: 180, friction: 12 }, stiff: { tension: 210, friction: 20 }, slow: { tension: 280, friction: 60 }, molasses: { tension: 280, friction: 120 } }, S1 = { ...f1.default, mass: 1, damping: 1, easing: B1.easings.linear, clamp: false }, j1 = class {
+      var L1 = T1(), d1 = React$3, I = T1(), S = T1(), n1 = Vt(), C1 = T1(), f1 = { default: { tension: 170, friction: 26 }, gentle: { tension: 120, friction: 14 }, wobbly: { tension: 180, friction: 12 }, stiff: { tension: 210, friction: 20 }, slow: { tension: 280, friction: 60 }, molasses: { tension: 280, friction: 120 } }, S1 = { ...f1.default, mass: 1, damping: 1, easing: C1.easings.linear, clamp: false }, j1 = class {
         constructor() {
           this.velocity = 0, Object.assign(this, S1);
         }
@@ -26944,14 +26956,14 @@ Check the top-level render call using <` + u1 + ">.");
         for (let Y in S1)
           s10[Y] == null && (s10[Y] = S1[Y]);
         let { frequency: L, damping: A } = s10, { mass: P } = s10;
-        return B1.is.und(L) || (L < 0.01 && (L = 0.01), A < 0 && (A = 0), s10.tension = Math.pow(2 * Math.PI / L, 2) * P, s10.friction = 4 * Math.PI * A * P / L), s10;
+        return C1.is.und(L) || (L < 0.01 && (L = 0.01), A < 0 && (A = 0), s10.tension = Math.pow(2 * Math.PI / L, 2) * P, s10.friction = 4 * Math.PI * A * P / L), s10;
       }
       function y2(s10, u7) {
-        if (!B1.is.und(u7.decay))
+        if (!C1.is.und(u7.decay))
           s10.duration = void 0;
         else {
-          let H = !B1.is.und(u7.tension) || !B1.is.und(u7.friction);
-          (H || !B1.is.und(u7.frequency) || !B1.is.und(u7.damping) || !B1.is.und(u7.mass)) && (s10.duration = void 0, s10.decay = void 0), H && (s10.frequency = void 0);
+          let H = !C1.is.und(u7.tension) || !C1.is.und(u7.friction);
+          (H || !C1.is.und(u7.frequency) || !C1.is.und(u7.damping) || !C1.is.und(u7.mass)) && (s10.duration = void 0, s10.decay = void 0), H && (s10.frequency = void 0);
         }
       }
       var K = [], H1 = class {
@@ -28015,7 +28027,7 @@ Check the top-level render call using <` + u1 + ">.");
           }
         });
       }
-      var L1 = T1(), d1 = React$3, I = T1(), S = T1(), n1 = Vt(), B1 = T1(), f1 = {
+      var L1 = T1(), d1 = React$3, I = T1(), S = T1(), n1 = Vt(), C1 = T1(), f1 = {
         default: { tension: 170, friction: 26 },
         gentle: { tension: 120, friction: 14 },
         wobbly: { tension: 180, friction: 12 },
@@ -28026,7 +28038,7 @@ Check the top-level render call using <` + u1 + ">.");
         ...f1.default,
         mass: 1,
         damping: 1,
-        easing: B1.easings.linear,
+        easing: C1.easings.linear,
         clamp: false
       }, j1 = class {
         constructor() {
@@ -28039,14 +28051,14 @@ Check the top-level render call using <` + u1 + ">.");
           s10[Y] == null && (s10[Y] = S1[Y]);
         let { frequency: L, damping: A } = s10;
         const { mass: P } = s10;
-        return B1.is.und(L) || (L < 0.01 && (L = 0.01), A < 0 && (A = 0), s10.tension = Math.pow(2 * Math.PI / L, 2) * P, s10.friction = 4 * Math.PI * A * P / L), s10;
+        return C1.is.und(L) || (L < 0.01 && (L = 0.01), A < 0 && (A = 0), s10.tension = Math.pow(2 * Math.PI / L, 2) * P, s10.friction = 4 * Math.PI * A * P / L), s10;
       }
       function y2(s10, u7) {
-        if (!B1.is.und(u7.decay))
+        if (!C1.is.und(u7.decay))
           s10.duration = void 0;
         else {
-          const H = !B1.is.und(u7.tension) || !B1.is.und(u7.friction);
-          (H || !B1.is.und(u7.frequency) || !B1.is.und(u7.damping) || !B1.is.und(u7.mass)) && (s10.duration = void 0, s10.decay = void 0), H && (s10.frequency = void 0);
+          const H = !C1.is.und(u7.tension) || !C1.is.und(u7.friction);
+          (H || !C1.is.und(u7.frequency) || !C1.is.und(u7.damping) || !C1.is.und(u7.mass)) && (s10.duration = void 0, s10.decay = void 0), H && (s10.frequency = void 0);
         }
       }
       var K = [], H1 = class {
@@ -29331,10 +29343,10 @@ Check the top-level render call using <` + u1 + ">.");
       var e2 = Object.defineProperty, r2 = Object.getOwnPropertyDescriptor, n5 = Object.getOwnPropertyNames, h2 = Object.prototype.hasOwnProperty, i2 = (I, S) => {
         for (var n1 in S)
           e2(I, n1, { get: S[n1], enumerable: true });
-      }, c2 = (I, S, n1, B1) => {
+      }, c2 = (I, S, n1, C1) => {
         if (S && typeof S == "object" || typeof S == "function")
           for (let f1 of n5(S))
-            !h2.call(I, f1) && f1 !== n1 && e2(I, f1, { get: () => S[f1], enumerable: !(B1 = r2(S, f1)) || B1.enumerable });
+            !h2.call(I, f1) && f1 !== n1 && e2(I, f1, { get: () => S[f1], enumerable: !(C1 = r2(S, f1)) || C1.enumerable });
         return I;
       }, l2 = (I, S, n1) => (c2(I, S, "default"), n1 && c2(n1, S, "default")), o4 = (I) => c2(e2({}, "__esModule", { value: true }), I), d = {};
       i2(d, { a: () => d1, animated: () => d1 }), t2.exports = o4(d);
@@ -29346,11 +29358,11 @@ Check the top-level render call using <` + u1 + ">.");
       function F(I, S) {
         if (!I.nodeType || !I.setAttribute)
           return false;
-        let n1 = I.nodeName === "filter" || I.parentNode && I.parentNode.nodeName === "filter", { style: B1, children: f1, scrollTop: S1, scrollLeft: j1, viewBox: k1, ...y2 } = S, K = Object.values(y2), H1 = Object.keys(y2).map((g1) => n1 || I.hasAttribute(g1) ? g1 : b[g1] || (b[g1] = g1.replace(/([A-Z])/g, (M1) => "-" + M1.toLowerCase())));
+        let n1 = I.nodeName === "filter" || I.parentNode && I.parentNode.nodeName === "filter", { style: C1, children: f1, scrollTop: S1, scrollLeft: j1, viewBox: k1, ...y2 } = S, K = Object.values(y2), H1 = Object.keys(y2).map((g1) => n1 || I.hasAttribute(g1) ? g1 : b[g1] || (b[g1] = g1.replace(/([A-Z])/g, (M1) => "-" + M1.toLowerCase())));
         f1 !== void 0 && (I.textContent = f1);
-        for (let g1 in B1)
-          if (B1.hasOwnProperty(g1)) {
-            let M1 = C(g1, B1[g1]);
+        for (let g1 in C1)
+          if (C1.hasOwnProperty(g1)) {
+            let M1 = C(g1, C1[g1]);
             B.test(g1) ? I.style.setProperty(g1, M1) : I.style[g1] = M1;
           }
         H1.forEach((g1, M1) => {
@@ -29360,18 +29372,18 @@ Check the top-level render call using <` + u1 + ">.");
       var N = { animationIterationCount: true, borderImageOutset: true, borderImageSlice: true, borderImageWidth: true, boxFlex: true, boxFlexGroup: true, boxOrdinalGroup: true, columnCount: true, columns: true, flex: true, flexGrow: true, flexPositive: true, flexShrink: true, flexNegative: true, flexOrder: true, gridRow: true, gridRowEnd: true, gridRowSpan: true, gridRowStart: true, gridColumn: true, gridColumnEnd: true, gridColumnSpan: true, gridColumnStart: true, fontWeight: true, lineClamp: true, lineHeight: true, opacity: true, order: true, orphans: true, tabSize: true, widows: true, zIndex: true, zoom: true, fillOpacity: true, floodOpacity: true, stopOpacity: true, strokeDasharray: true, strokeDashoffset: true, strokeMiterlimit: true, strokeOpacity: true, strokeWidth: true }, X = (I, S) => I + S.charAt(0).toUpperCase() + S.substring(1), c1 = ["Webkit", "Ms", "Moz", "O"];
       N = Object.keys(N).reduce((I, S) => (c1.forEach((n1) => I[X(n1, S)] = I[S]), I), N);
       var a1 = Vt(), R = T1(), Q = /^(matrix|translate|scale|rotate|skew)/, $ = /^(translate)/, W = /^(rotate|skew)/, G = (I, S) => R.is.num(I) && I !== 0 ? I + S : I, J = (I, S) => R.is.arr(I) ? I.every((n1) => J(n1, S)) : R.is.num(I) ? I === S : parseFloat(I) === S, r1 = class extends a1.AnimatedObject {
-        constructor({ x: I, y: S, z: n1, ...B1 }) {
+        constructor({ x: I, y: S, z: n1, ...C1 }) {
           let f1 = [], S1 = [];
-          (I || S || n1) && (f1.push([I || 0, S || 0, n1 || 0]), S1.push((j1) => [`translate3d(${j1.map((k1) => G(k1, "px")).join(",")})`, J(j1, 0)])), (0, R.eachProp)(B1, (j1, k1) => {
+          (I || S || n1) && (f1.push([I || 0, S || 0, n1 || 0]), S1.push((j1) => [`translate3d(${j1.map((k1) => G(k1, "px")).join(",")})`, J(j1, 0)])), (0, R.eachProp)(C1, (j1, k1) => {
             if (k1 === "transform")
               f1.push([j1 || ""]), S1.push((y2) => [y2, y2 === ""]);
             else if (Q.test(k1)) {
-              if (delete B1[k1], R.is.und(j1))
+              if (delete C1[k1], R.is.und(j1))
                 return;
               let y2 = $.test(k1) ? "px" : W.test(k1) ? "deg" : "";
               f1.push((0, R.toArray)(j1)), S1.push(k1 === "rotate3d" ? ([K, H1, g1, M1]) => [`rotate3d(${K},${H1},${g1},${G(M1, y2)})`, J(M1, 0)] : (K) => [`${k1}(${K.map((H1) => G(H1, y2)).join(",")})`, J(K, k1.startsWith("scale") ? 1 : 0)]);
             }
-          }), f1.length && (B1.transform = new D(f1, S1)), super(B1);
+          }), f1.length && (C1.transform = new D(f1, S1)), super(C1);
         }
       }, D = class extends R.FluidValue {
         constructor(I, S) {
@@ -29382,8 +29394,8 @@ Check the top-level render call using <` + u1 + ">.");
         }
         _get() {
           let I = "", S = true;
-          return (0, R.each)(this.inputs, (n1, B1) => {
-            let f1 = (0, R.getFluidValue)(n1[0]), [S1, j1] = this.transforms[B1](R.is.arr(f1) ? f1 : n1.map(R.getFluidValue));
+          return (0, R.each)(this.inputs, (n1, C1) => {
+            let f1 = (0, R.getFluidValue)(n1[0]), [S1, j1] = this.transforms[C1](R.is.arr(f1) ? f1 : n1.map(R.getFluidValue));
             I += " " + S1, S = S && j1;
           }), S ? "none" : I;
         }
@@ -29407,10 +29419,10 @@ Check the top-level render call using <` + u1 + ">.");
       var e2 = Object.defineProperty, r2 = Object.getOwnPropertyDescriptor, n5 = Object.getOwnPropertyNames, h2 = Object.prototype.hasOwnProperty, i2 = (I, S) => {
         for (var n1 in S)
           e2(I, n1, { get: S[n1], enumerable: true });
-      }, c2 = (I, S, n1, B1) => {
+      }, c2 = (I, S, n1, C1) => {
         if (S && typeof S == "object" || typeof S == "function")
           for (let f1 of n5(S))
-            !h2.call(I, f1) && f1 !== n1 && e2(I, f1, { get: () => S[f1], enumerable: !(B1 = r2(S, f1)) || B1.enumerable });
+            !h2.call(I, f1) && f1 !== n1 && e2(I, f1, { get: () => S[f1], enumerable: !(C1 = r2(S, f1)) || C1.enumerable });
         return I;
       }, l2 = (I, S, n1) => (c2(I, S, "default"), n1 && c2(n1, S, "default")), o4 = (I) => c2(e2({}, "__esModule", { value: true }), I), d = {};
       i2(d, {
@@ -29425,7 +29437,7 @@ Check the top-level render call using <` + u1 + ">.");
       function F(I, S) {
         if (!I.nodeType || !I.setAttribute)
           return false;
-        const n1 = I.nodeName === "filter" || I.parentNode && I.parentNode.nodeName === "filter", { style: B1, children: f1, scrollTop: S1, scrollLeft: j1, viewBox: k1, ...y2 } = S, K = Object.values(y2), H1 = Object.keys(y2).map(
+        const n1 = I.nodeName === "filter" || I.parentNode && I.parentNode.nodeName === "filter", { style: C1, children: f1, scrollTop: S1, scrollLeft: j1, viewBox: k1, ...y2 } = S, K = Object.values(y2), H1 = Object.keys(y2).map(
           (g1) => n1 || I.hasAttribute(g1) ? g1 : b[g1] || (b[g1] = g1.replace(
             /([A-Z])/g,
             // Attributes are written in dash case
@@ -29433,9 +29445,9 @@ Check the top-level render call using <` + u1 + ">.");
           ))
         );
         f1 !== void 0 && (I.textContent = f1);
-        for (const g1 in B1)
-          if (B1.hasOwnProperty(g1)) {
-            const M1 = C(g1, B1[g1]);
+        for (const g1 in C1)
+          if (C1.hasOwnProperty(g1)) {
+            const M1 = C(g1, C1[g1]);
             B.test(g1) ? I.style.setProperty(g1, M1) : I.style[g1] = M1;
           }
         H1.forEach((g1, M1) => {
@@ -29488,17 +29500,17 @@ Check the top-level render call using <` + u1 + ">.");
       }, X = (I, S) => I + S.charAt(0).toUpperCase() + S.substring(1), c1 = ["Webkit", "Ms", "Moz", "O"];
       N = Object.keys(N).reduce((I, S) => (c1.forEach((n1) => I[X(n1, S)] = I[S]), I), N);
       var a1 = Vt(), R = T1(), Q = /^(matrix|translate|scale|rotate|skew)/, $ = /^(translate)/, W = /^(rotate|skew)/, G = (I, S) => R.is.num(I) && I !== 0 ? I + S : I, J = (I, S) => R.is.arr(I) ? I.every((n1) => J(n1, S)) : R.is.num(I) ? I === S : parseFloat(I) === S, r1 = class extends a1.AnimatedObject {
-        constructor({ x: I, y: S, z: n1, ...B1 }) {
+        constructor({ x: I, y: S, z: n1, ...C1 }) {
           const f1 = [], S1 = [];
           (I || S || n1) && (f1.push([I || 0, S || 0, n1 || 0]), S1.push((j1) => [
             `translate3d(${j1.map((k1) => G(k1, "px")).join(",")})`,
             // prettier-ignore
             J(j1, 0)
-          ])), (0, R.eachProp)(B1, (j1, k1) => {
+          ])), (0, R.eachProp)(C1, (j1, k1) => {
             if (k1 === "transform")
               f1.push([j1 || ""]), S1.push((y2) => [y2, y2 === ""]);
             else if (Q.test(k1)) {
-              if (delete B1[k1], R.is.und(j1))
+              if (delete C1[k1], R.is.und(j1))
                 return;
               const y2 = $.test(k1) ? "px" : W.test(k1) ? "deg" : "";
               f1.push((0, R.toArray)(j1)), S1.push(
@@ -29511,7 +29523,7 @@ Check the top-level render call using <` + u1 + ">.");
                 ]
               );
             }
-          }), f1.length && (B1.transform = new D(f1, S1)), super(B1);
+          }), f1.length && (C1.transform = new D(f1, S1)), super(C1);
         }
       }, D = class extends R.FluidValue {
         constructor(I, S) {
@@ -29522,8 +29534,8 @@ Check the top-level render call using <` + u1 + ">.");
         }
         _get() {
           let I = "", S = true;
-          return (0, R.each)(this.inputs, (n1, B1) => {
-            const f1 = (0, R.getFluidValue)(n1[0]), [S1, j1] = this.transforms[B1](
+          return (0, R.each)(this.inputs, (n1, C1) => {
+            const f1 = (0, R.getFluidValue)(n1[0]), [S1, j1] = this.transforms[C1](
               R.is.arr(f1) ? f1 : n1.map(R.getFluidValue)
             );
             I += " " + S1, S = S && j1;
@@ -29899,7 +29911,7 @@ Check the top-level render call using <` + u1 + ">.");
           var I = Z.defaultPrevented;
           if (!I && D.state.active) {
             if (D.isMovingCross == null) {
-              var S = D.props, n1 = S.vertical, B1 = S.ignoreCrossMove, f1 = B1;
+              var S = D.props, n1 = S.vertical, C1 = S.ignoreCrossMove, f1 = C1;
               typeof f1 != "number" && (f1 = f1 ? 1 : 0);
               var S1 = n1 ? "y" : "x", j1 = n1 ? "x" : "y", k1 = Math.abs(L1[S1] - D.touchMoves[0][S1]), y2 = Math.abs(L1[j1] - D.touchMoves[0][j1]);
               D.isMovingCross = y2 * f1 > k1;
@@ -29922,10 +29934,10 @@ Check the top-level render call using <` + u1 + ">.");
           D.grabbing && (Z.preventDefault(), Z.stopPropagation());
           var d1 = D.state.dragging, I = null;
           if (d1 && D.touchMoves.length) {
-            for (var S = D.props, n1 = S.cardSize, B1 = S.moveScale, f1 = S.vertical, S1 = D.props.friction / 1e6, j1 = b(D), k1 = j1.touchMoves, y2 = k1.length, K = 0; --y2 >= 0 && K < 100; )
+            for (var S = D.props, n1 = S.cardSize, C1 = S.moveScale, f1 = S.vertical, S1 = D.props.friction / 1e6, j1 = b(D), k1 = j1.touchMoves, y2 = k1.length, K = 0; --y2 >= 0 && K < 100; )
               K = Date.now() - k1[y2].time;
             y2++;
-            var H1 = f1 ? "y" : "x", g1 = ((0, h2.getTouchPosition)(Z)[H1] - k1[y2][H1]) / K, M1 = g1 * Math.abs(g1) / S1 / 2, I1 = D.state.cursor, R1 = (0, h2.clamp)(M1 / n1 * B1, Math.floor(I1) - I1, Math.ceil(I1) - I1);
+            var H1 = f1 ? "y" : "x", g1 = ((0, h2.getTouchPosition)(Z)[H1] - k1[y2][H1]) / K, M1 = g1 * Math.abs(g1) / S1 / 2, I1 = D.state.cursor, R1 = (0, h2.clamp)(M1 / n1 * C1, Math.floor(I1) - I1, Math.ceil(I1) - I1);
             I = Math.round(I1 + R1), D.touchMoves = [];
           } else
             I = Math.round(D.state.cursor);
@@ -30020,8 +30032,8 @@ Check the top-level render call using <` + u1 + ">.");
           var Z = this;
           this.AnimatedComponent = (0, n5.animated)(D.component);
           var L1 = function(I) {
-            var S = I.index, n1 = I.modIndex, B1 = I.cursor, f1 = I.state;
-            return Z.usedCursor = B1, Z.props.renderCard(S, n1, B1, f1);
+            var S = I.index, n1 = I.modIndex, C1 = I.cursor, f1 = I.state;
+            return Z.usedCursor = C1, Z.props.renderCard(S, n1, C1, f1);
           };
           this.AnimatedCard = (0, n5.animated)(L1);
         }
@@ -30033,8 +30045,8 @@ Check the top-level render call using <` + u1 + ">.");
       }, {
         key: "getComputedCursor",
         value: function() {
-          var D = this.props, Z = D.cardCount, L1 = D.loop, d1 = D.maxOverflow, I = this.state, S = I.cursor, n1 = I.dragging, B1 = S;
-          return L1 || (B1 = (0, h2.clamp)(B1, 1 - Z, 0), n1 && S > 0 ? B1 = d1 - d1 / (S + 1) : n1 && S < 1 - Z && (B1 = 1 - Z - d1 + d1 / (1 - Z - S + 1))), B1;
+          var D = this.props, Z = D.cardCount, L1 = D.loop, d1 = D.maxOverflow, I = this.state, S = I.cursor, n1 = I.dragging, C1 = S;
+          return L1 || (C1 = (0, h2.clamp)(C1, 1 - Z, 0), n1 && S > 0 ? C1 = d1 - d1 / (S + 1) : n1 && S < 1 - Z && (C1 = 1 - Z - d1 + d1 / (1 - Z - S + 1))), C1;
         }
       }, {
         key: "getUsedCursor",
@@ -30048,9 +30060,9 @@ Check the top-level render call using <` + u1 + ">.");
           d1.cardSize;
           var I = d1.cardCount, S = d1.cardPadCount;
           d1.renderCard;
-          var n1 = d1.tension, B1 = d1.friction, f1 = d1.precision, S1 = d1.loop, j1 = l2(d1, ["cardSize", "cardCount", "cardPadCount", "renderCard", "tension", "friction", "precision", "loop"]), k1 = S1 ? S : 0, y2 = {
+          var n1 = d1.tension, C1 = d1.friction, f1 = d1.precision, S1 = d1.loop, j1 = l2(d1, ["cardSize", "cardCount", "cardPadCount", "renderCard", "tension", "friction", "precision", "loop"]), k1 = S1 ? S : 0, y2 = {
             tension: n1,
-            friction: B1,
+            friction: C1,
             precision: f1
           }, K = this.getComputedCursor();
           return /* @__PURE__ */ r2.default.createElement(n5.Spring, {
@@ -30982,7 +30994,7 @@ Check the top-level render call using <` + u1 + ">.");
       }, {
         key: "render",
         value: function() {
-          var W, G, J, r1, D, Z = this.props, L1 = Z.baseClassName, d1 = Z.controlClassName, I = Z.placeholderClassName, S = Z.menuClassName, n1 = Z.arrowClassName, B1 = Z.arrowClosed, f1 = Z.arrowOpen, S1 = Z.className, j1 = this.props.disabled ? "Dropdown-disabled" : "", k1 = typeof this.state.selected == "string" ? this.state.selected : this.state.selected.label, y2 = (0, r2.default)((W = {}, g(W, "".concat(L1, "-root"), true), g(W, S1, !!S1), g(W, "is-open", this.state.isOpen), W)), K = (0, r2.default)((G = {}, g(G, "".concat(L1, "-control"), true), g(G, d1, !!d1), g(G, j1, !!j1), G)), H1 = (0, r2.default)((J = {}, g(J, "".concat(L1, "-placeholder"), true), g(J, I, !!I), g(J, "is-selected", this.isValueSelected()), J)), g1 = (0, r2.default)((r1 = {}, g(r1, "".concat(L1, "-menu"), true), g(r1, S, !!S), r1)), M1 = (0, r2.default)((D = {}, g(D, "".concat(L1, "-arrow"), true), g(D, n1, !!n1), D)), I1 = e2.default.createElement("div", {
+          var W, G, J, r1, D, Z = this.props, L1 = Z.baseClassName, d1 = Z.controlClassName, I = Z.placeholderClassName, S = Z.menuClassName, n1 = Z.arrowClassName, C1 = Z.arrowClosed, f1 = Z.arrowOpen, S1 = Z.className, j1 = this.props.disabled ? "Dropdown-disabled" : "", k1 = typeof this.state.selected == "string" ? this.state.selected : this.state.selected.label, y2 = (0, r2.default)((W = {}, g(W, "".concat(L1, "-root"), true), g(W, S1, !!S1), g(W, "is-open", this.state.isOpen), W)), K = (0, r2.default)((G = {}, g(G, "".concat(L1, "-control"), true), g(G, d1, !!d1), g(G, j1, !!j1), G)), H1 = (0, r2.default)((J = {}, g(J, "".concat(L1, "-placeholder"), true), g(J, I, !!I), g(J, "is-selected", this.isValueSelected()), J)), g1 = (0, r2.default)((r1 = {}, g(r1, "".concat(L1, "-menu"), true), g(r1, S, !!S), r1)), M1 = (0, r2.default)((D = {}, g(D, "".concat(L1, "-arrow"), true), g(D, n1, !!n1), D)), I1 = e2.default.createElement("div", {
             className: H1
           }, k1), R1 = this.state.isOpen ? e2.default.createElement("div", {
             className: g1,
@@ -30998,7 +31010,7 @@ Check the top-level render call using <` + u1 + ">.");
             "aria-haspopup": "listbox"
           }, I1, e2.default.createElement("div", {
             className: "".concat(L1, "-arrow-wrapper")
-          }, f1 && B1 ? this.state.isOpen ? f1 : B1 : e2.default.createElement("span", {
+          }, f1 && C1 ? this.state.isOpen ? f1 : C1 : e2.default.createElement("span", {
             className: M1
           }))), R1);
         }
@@ -33061,7 +33073,7 @@ Check the top-level render call using <` + u1 + ">.");
           case "ucs-2":
           case "utf16le":
           case "utf-16le":
-            return B1(this, z, p4);
+            return C1(this, z, p4);
           default:
             if (O)
               throw new TypeError("Unknown encoding: " + x);
@@ -33323,7 +33335,7 @@ Check the top-level render call using <` + u1 + ">.");
         T += S2[x[q]];
       return T;
     }
-    function B1(x, z, p4) {
+    function C1(x, z, p4) {
       const O = x.slice(z, p4);
       let T = "";
       for (let q = 0; q < O.length - 1; q += 2)
@@ -34490,7 +34502,7 @@ body {
     )
   ] }), SG1 = styled.div`
   position: relative;
-  background-color: ${(t2) => t2.$pressed ? C1.view.backColor.lighter : A3(t2.$backColor)};
+  background-color: ${(t2) => t2.$pressed ? B1.view.backColor.lighter : A3(t2.$backColor)};
   border-radius: 10px;
   padding: 16px;
   padding-top: 8px;
@@ -34500,19 +34512,19 @@ body {
 
   ${F9};
 `, AG1 = styled.div`
-  font-size: ${() => C1.text.size.xsmall}px;
-  color: ${() => C1.text.color.tint};
+  font-size: ${() => B1.text.size.xsmall}px;
+  color: ${() => B1.text.color.tint};
   padding: 0;
   padding-top: 8px;
   margin-left: 4px;
   margin-bottom: -4px;
   text-transform: uppercase;
 `, bG1 = styled.div`
-  font-family: ${() => C1.text.family.heading};
-  font-size: ${() => C1.text.size.heading}px;
-  line-height: ${() => C1.text.height.heading}px;
-  font-weight: ${() => C1.text.weight.heading};
-  color: ${() => C1.text.color.normal};
+  font-family: ${() => B1.text.family.heading};
+  font-size: ${() => B1.text.size.heading}px;
+  line-height: ${() => B1.text.height.heading}px;
+  font-weight: ${() => B1.text.weight.heading};
+  color: ${() => B1.text.color.normal};
   margin: 4px;
   margin-bottom: 1px;
 `, _G1 = styled.div`
@@ -34521,8 +34533,8 @@ body {
   padding: 6px 6px 6px 4px;
   padding-top: 4px;
 `, IG1 = styled.div`
-  font-size: ${() => C1.text.size.normal}px;
-  color: ${() => C1.text.color.xsubtle};
+  font-size: ${() => B1.text.size.normal}px;
+  color: ${() => B1.text.color.xsubtle};
   margin-top: -1px;
   padding-left: ${(t2) => t2.$hasIcon ? "6px" : "0px"};
 `, PG1 = styled.div`
@@ -34568,7 +34580,7 @@ body {
               {
                 name: i2,
                 size: 18,
-                color: C1.text.color.xsubtle
+                color: B1.text.color.xsubtle
               }
             ) }),
             /* @__PURE__ */ z1.jsx(IG1, { $hasIcon: !!i2, children: n5 })
@@ -38499,7 +38511,7 @@ body {
       }
       const Z = o2(h2.ticks.maxTicksLimit, f4), L1 = Math.max(1, Math.ceil(f4 / Z));
       for (X = 0; X < f4; X += L1) {
-        const d1 = this.getContext(X), I = i2.setContext(d1), S = l2.setContext(d1), n1 = I.lineWidth, B1 = I.color, f1 = S.dash || [], S1 = S.dashOffset, j1 = I.tickWidth, k1 = I.tickColor, y2 = I.tickBorderDash || [], K = I.tickBorderDashOffset;
+        const d1 = this.getContext(X), I = i2.setContext(d1), S = l2.setContext(d1), n1 = I.lineWidth, C1 = I.color, f1 = S.dash || [], S1 = S.dashOffset, j1 = I.tickWidth, k1 = I.tickColor, y2 = I.tickBorderDash || [], K = I.tickBorderDashOffset;
         c1 = HX1(this, X, o4), c1 !== void 0 && (a1 = V4(n5, c1, n1), d ? R = $ = G = r1 = a1 : Q = W = J = D = a1, w2.push({
           tx1: R,
           ty1: Q,
@@ -38510,7 +38522,7 @@ body {
           x2: r1,
           y2: D,
           width: n1,
-          color: B1,
+          color: C1,
           borderDash: f1,
           borderDashOffset: S1,
           tickWidth: j1,
@@ -38558,8 +38570,8 @@ body {
         const L1 = i2.setContext(this.getContext(F));
         $ = this.getPixelForTick(F) + i2.labelOffset, W = this._resolveTickFontOptions(F), G = W.lineHeight, J = R2(c1) ? c1.length : 1;
         const d1 = J / 2, I = L1.color, S = L1.textStrokeColor, n1 = L1.textStrokeWidth;
-        let B1 = Q;
-        c2 ? (a1 = $, Q === "inner" && (F === N - 1 ? B1 = this.options.reverse ? "left" : "right" : F === 0 ? B1 = this.options.reverse ? "right" : "left" : B1 = "center"), h2 === "top" ? d === "near" || C !== 0 ? r1 = -J * G + G / 2 : d === "center" ? r1 = -Z.highest.height / 2 - d1 * G + G : r1 = -Z.highest.height + G / 2 : d === "near" || C !== 0 ? r1 = G / 2 : d === "center" ? r1 = Z.highest.height / 2 - d1 * G : r1 = Z.highest.height - J * G, f4 && (r1 *= -1), C !== 0 && !L1.showLabelBackdrop && (a1 += G / 2 * Math.sin(C))) : (R = $, r1 = (1 - J) * G / 2);
+        let C1 = Q;
+        c2 ? (a1 = $, Q === "inner" && (F === N - 1 ? C1 = this.options.reverse ? "left" : "right" : F === 0 ? C1 = this.options.reverse ? "right" : "left" : C1 = "center"), h2 === "top" ? d === "near" || C !== 0 ? r1 = -J * G + G / 2 : d === "center" ? r1 = -Z.highest.height / 2 - d1 * G + G : r1 = -Z.highest.height + G / 2 : d === "near" || C !== 0 ? r1 = G / 2 : d === "center" ? r1 = Z.highest.height / 2 - d1 * G : r1 = Z.highest.height - J * G, f4 && (r1 *= -1), C !== 0 && !L1.showLabelBackdrop && (a1 += G / 2 * Math.sin(C))) : (R = $, r1 = (1 - J) * G / 2);
         let f1;
         if (L1.showLabelBackdrop) {
           const S1 = H0(L1.backdropPadding), j1 = Z.heights[F], k1 = Z.widths[F];
@@ -38600,7 +38612,7 @@ body {
             color: I,
             strokeColor: S,
             strokeWidth: n1,
-            textAlign: B1,
+            textAlign: C1,
             textBaseline: D,
             translation: [
               a1,
@@ -42497,7 +42509,7 @@ body {
     subtitle: n5,
     subtitleSize: h2 = "small",
     backColor: i2,
-    borderRadius: c2 = C1.card.borderRadius,
+    borderRadius: c2 = B1.card.borderRadius,
     width: l2,
     height: o4,
     padding: d = 15,
@@ -42609,7 +42621,7 @@ body {
     }, l2 = r2 ? "none" : "light", o4 = /* @__PURE__ */ z1.jsxs(u0, { valign: "center", paddingRight: 10, children: [
       /* @__PURE__ */ z1.jsx(h4, { size: "xlarge", weight: "bold", paddingRight: 2, children: t2 }),
       !i2 && /* @__PURE__ */ z1.jsx(
-        _U1,
+        IU1,
         {
           onClick: c2,
           iconName: "IoCloseSharp",
@@ -45186,9 +45198,9 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   const dekUiModule = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Button: R6,
-    ButtonLoadingIcon: kt2,
-    Card: Ot2,
-    CardButton: Bt2,
+    ButtonLoadingIcon: Ot2,
+    Card: Bt2,
+    CardButton: Ct2,
     Carousel: Mq1,
     Cell: St2,
     ColorPicker: At2,
@@ -45198,12 +45210,12 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     Header: Eq1,
     HeadingText: PU1,
     Icon: G4,
-    IconButton: _U1,
+    IconButton: IU1,
     Image: It2,
     LoadingDots: Cr,
-    MenuBar: Ct2,
+    MenuBar: yt2,
     MenuBarItem: WU1,
-    PillButton: yt2,
+    PillButton: kt2,
     ProgressBar: Pt2,
     Screen: Wt2,
     ScreenLoadingOverlay: Dt2,
@@ -45217,7 +45229,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     View: u0,
     formatDateTime: Yt2,
     formatFromNow: Gt2,
-    theme: C1,
+    getImageAsBase64: uG1,
+    theme: B1,
     useDateTime: qt2,
     useInterval: Ut2
   }, Symbol.toStringTag, { value: "Module" }));
@@ -49815,8 +49828,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       if (zones.length > 1) {
         const components = [];
         zones.forEach((zone2) => {
-          if (zone2.plugin && zone2.component) {
-            const component = api2.plugin(zone2.plugin).component(zone2.component, {
+          if (zone2.integration && zone2.component) {
+            const component = api2.integration(zone2.integration).component(zone2.component, {
               ...parsePropsForComponent(api2, zone2.props),
               "aria-label": `zone-${props.id}`
             });
@@ -49824,7 +49837,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
               if (zone2.containerProps && Object.keys(zone2.containerProps).length > 0) {
                 const style = parsePropsForComponent(api2, zone2.containerProps);
                 components.push(
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "aria-label": `zone-${props.id}`, style, children: component })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { "aria-label": `zone-${props.id}`, style, children: component })
                 );
               } else {
                 components.push(component);
@@ -49847,9 +49860,9 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       const zone = api2.board.zones.find(
         (z) => z.key === props.id
       );
-      if (zone && zone.plugin && zone.component) {
-        label = `${props.id}: ${zone.plugin}/${zone.component}`;
-        const component = api2.plugin(zone.plugin).component(zone.component, {
+      if (zone && zone.integration && zone.component) {
+        label = `${props.id}: ${zone.integration}/${zone.component}`;
+        const component = api2.integration(zone.integration).component(zone.component, {
           ...parsePropsForComponent(api2, zone.props),
           "aria-label": `zone-${props.id}`
         });
@@ -50633,10 +50646,10 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   }
   const registry = new Registry();
   const globals = {
-    boards: {},
-    commandGroups: {},
+    boards: [],
+    commandGroups: [],
     plugins: {},
-    pluginInstances: {},
+    integrationInstances: {},
     setLocation: () => {
     },
     registry,
@@ -66274,11 +66287,11 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       cache: new InMemoryCache()
     });
   }
-  const UserDataDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "userData" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "currentUser" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "email" } }, { "kind": "Field", "name": { "kind": "Name", "value": "location" } }, { "kind": "Field", "name": { "kind": "Name", "value": "avatar" } }, { "kind": "Field", "name": { "kind": "Name", "value": "boards" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "layout" } }, { "kind": "Field", "name": { "kind": "Name", "value": "zones" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "plugin" } }, { "kind": "Field", "name": { "kind": "Name", "value": "component" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "commandGroups" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "commands" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "plugin" } }, { "kind": "Field", "name": { "kind": "Name", "value": "component" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }] } }] } }] };
+  const UserDataDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "userData" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "currentUser" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "email" } }, { "kind": "Field", "name": { "kind": "Name", "value": "location" } }, { "kind": "Field", "name": { "kind": "Name", "value": "avatar" } }, { "kind": "Field", "name": { "kind": "Name", "value": "boards" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "layout" } }, { "kind": "Field", "name": { "kind": "Name", "value": "base" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "zones" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "component" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "commandGroups" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "commands" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "title" } }, { "kind": "Field", "name": { "kind": "Name", "value": "integration" } }, { "kind": "Field", "name": { "kind": "Name", "value": "component" } }, { "kind": "Field", "name": { "kind": "Name", "value": "props" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "containerProps" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }] } }] } }] };
   const UserPluginsAndIntegrationsDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "userPluginsAndIntegrations" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "currentUser" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "plugins" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "code" } }, { "kind": "Field", "name": { "kind": "Name", "value": "version" } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "integrations" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "pluginName" } }, { "kind": "Field", "name": { "kind": "Name", "value": "pluginVersion" } }, { "kind": "Field", "name": { "kind": "Name", "value": "pluginConfig" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "key" } }, { "kind": "Field", "name": { "kind": "Name", "value": "value" } }] } }] } }] } }] } }] };
   const UserChangeDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "subscription", "name": { "kind": "Name", "value": "userChange" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "userChange" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "user" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }] } }] } }] } }] };
   const documents = {
-    "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        zones {\n          key\n          plugin\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          plugin\n          component\n          props {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n": UserDataDocument,
+    "\n  query userData {\n    currentUser {\n      id\n      name\n      email\n      location\n      avatar\n      boards {\n        id\n        title\n        key\n        layout\n        base {\n          integration\n          key\n        }\n        zones {\n          key\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n      commandGroups {\n        title\n        key\n        commands {\n          title\n          integration\n          component\n          props {\n            key\n            value\n          }\n          containerProps {\n            key\n            value\n          }\n        }\n      }\n    }\n  }\n": UserDataDocument,
     "\n  query userPluginsAndIntegrations {\n    currentUser {\n      plugins {\n        name\n        code\n        version\n      }\n      integrations {\n        key\n        pluginName\n        pluginVersion\n        pluginConfig {\n          key\n          value\n        }\n      }\n    }\n  }\n": UserPluginsAndIntegrationsDocument,
     "\n  subscription userChange {\n    userChange {\n      user {\n        id\n      }\n    }\n  }\n": UserChangeDocument
   };
@@ -66298,9 +66311,13 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         title
         key
         layout
+        base {
+          integration
+          key
+        }
         zones {
           key
-          plugin
+          integration
           component
           props {
             key
@@ -66317,12 +66334,16 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         key
         commands {
           title
-          plugin
+          integration
           component
           props {
             key
             value
           }
+          containerProps {
+            key
+            value
+          }
         }
       }
     }
@@ -66363,13 +66384,13 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     data: null,
     loading: false
   });
-  let pluginInstances = {};
-  function getPluginInstances() {
-    return pluginInstances;
+  let globalIntegrationInstances = {};
+  function getIntegrationInstances() {
+    return globalIntegrationInstances;
   }
-  function updateStatePlugins(plugins, instances) {
-    pluginInstances = instances;
-    state$1.plugins = plugins;
+  function updateStatePlugins(pluginFactories, integrationInstances2) {
+    globalIntegrationInstances = integrationInstances2;
+    state$1.plugins = pluginFactories;
   }
   function updateStateData(data) {
     state$1.data = data;
@@ -66399,7 +66420,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
             key: "dev",
             title: "Test Board",
             base: {
-              plugin: "base",
+              integration: "base",
               key: "dev"
             },
             zones: []
@@ -66550,8 +66571,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     messages() {
       return this.internal.messages();
     }
-    plugin(name) {
-      return this.internal.plugin(name);
+    integration(key) {
+      return this.internal.integration(key);
     }
     get registry() {
       return this.internal.registry;
@@ -66583,26 +66604,26 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     open(boardKey) {
       this.internal.open(boardKey);
     }
-    get plugins() {
-      return this.internal.plugins;
+    get integrations() {
+      return this.internal.integrations;
     }
     get api() {
-      return this.plugin(this.integrationKey).api;
+      return this.integration(this.integrationKey).api;
     }
     get state() {
-      return this.plugin(this.integrationKey).state;
+      return this.integration(this.integrationKey).state;
     }
     get info() {
-      return this.plugin(this.integrationKey).info;
+      return this.integration(this.integrationKey).info;
     }
     component(key, props) {
-      return this.plugin(this.integrationKey).component(key, props);
+      return this.integration(this.integrationKey).component(key, props);
     }
     componentSchema(key) {
-      return this.plugin(this.integrationKey).componentSchema(key);
+      return this.integration(this.integrationKey).componentSchema(key);
     }
     screen(path) {
-      return this.plugin(this.integrationKey).screen(path);
+      return this.integration(this.integrationKey).screen(path);
     }
   }
   class ApiInternal {
@@ -66636,8 +66657,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     messages() {
       return this.globals.messages;
     }
-    plugin(name) {
-      return this.createPluginWrapper(name);
+    integration(key) {
+      return this.createIntegrationWrapper(key);
     }
     get registry() {
       return this.globals.registry;
@@ -66650,6 +66671,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     }
     get board() {
       return this.boards.find((board) => board.key === this.boardKey) || {
+        title: "Missing board",
+        key: "#error",
         zones: []
       };
     }
@@ -66671,20 +66694,20 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     open(boardKey) {
       this.globals.setLocation(`/${boardKey}`);
     }
-    createPluginWrapper(integrationKey) {
-      const plugin = this.getPluginInstance(integrationKey);
-      const available = !!plugin;
+    createIntegrationWrapper(integrationKey) {
+      const integration = this.getIntegrationInstance(integrationKey);
+      const available = !!integration;
       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) : []
+          components: (integration == null ? void 0 : integration.components) ? integration.components.map((component) => component.key) : [],
+          screens: (integration == null ? void 0 : integration.screens) ? integration.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) || {},
+        api: (integration == null ? void 0 : integration.api) || {},
         state: {
           get: (key, defaultValue) => {
             if (!available) {
@@ -66704,20 +66727,20 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     get globals() {
       return window.__dek_globals;
     }
-    get plugins() {
-      const plugins = {};
-      Object.keys(this.globals.pluginInstances).forEach((key) => {
-        plugins[key] = this.createPluginWrapper(key);
+    get integrations() {
+      const integrations = {};
+      Object.keys(this.globals.integrationInstances).forEach((key) => {
+        integrations[key] = this.createIntegrationWrapper(key);
       });
-      return plugins;
+      return integrations;
     }
-    getPluginInstance(integrationKey) {
-      return this.globals.pluginInstances[integrationKey];
+    getIntegrationInstance(integrationKey) {
+      return this.globals.integrationInstances[integrationKey];
     }
     getComponent(integrationKey, componentKey, props) {
-      const plugin = this.getPluginInstance(integrationKey);
-      if (plugin) {
-        const component = plugin.components && plugin.components.find(
+      const integration = this.getIntegrationInstance(integrationKey);
+      if (integration) {
+        const component = integration.components && integration.components.find(
           (c2) => c2.key.toLowerCase() === componentKey.toLowerCase()
         );
         if (!component) {
@@ -66725,15 +66748,15 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         }
         return component.element({
           ...props,
-          plugin,
+          plugin: integration,
           api: new Api(integrationKey)
         });
       }
     }
     getComponentSchema(integrationKey, componentKey) {
-      const plugin = this.getPluginInstance(integrationKey);
-      if (plugin) {
-        const component = plugin.components && plugin.components.find(
+      const integration = this.getIntegrationInstance(integrationKey);
+      if (integration) {
+        const component = integration.components && integration.components.find(
           (c2) => c2.key.toLowerCase() === componentKey.toLowerCase()
         );
         if (component) {
@@ -66744,29 +66767,35 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     }
     getScreen(integrationKey, screenPath) {
       if (integrationKey) {
-        const plugin = this.getPluginInstance(integrationKey);
-        if (plugin) {
-          const component = plugin.screens && plugin.screens.find(
+        const integration = this.getIntegrationInstance(integrationKey);
+        if (integration) {
+          const component = integration.screens && integration.screens.find(
             (s4) => s4.path.toLowerCase() === screenPath.toLowerCase()
           );
           if (!component) {
             return;
           }
-          return component.element({ plugin, api: new Api(integrationKey) });
+          return component.element({
+            plugin: integration,
+            api: new Api(integrationKey)
+          });
         }
       }
     }
     getBoard(integrationKey, boardKey) {
       if (integrationKey) {
-        const plugin = this.getPluginInstance(integrationKey);
-        if (plugin) {
-          const component = plugin.boards && plugin.boards.find(
+        const integration = this.getIntegrationInstance(integrationKey);
+        if (integration) {
+          const component = integration.boards && integration.boards.find(
             (c2) => c2.key.toLowerCase() === boardKey.toLowerCase()
           );
           if (!component) {
             return;
           }
-          return component.element({ plugin, api: new Api(integrationKey) });
+          return component.element({
+            plugin: integration,
+            api: new Api(integrationKey)
+          });
         }
       }
     }
@@ -66849,7 +66878,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     result.integrations.push({
       key: "base",
       pluginName: "base",
-      pluginVersion: "0.25.0",
+      pluginVersion: "0.27.0",
       pluginConfig: []
     });
     return result;
@@ -66881,7 +66910,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   const useEntities = () => {
     return useSnapshot(state).entities;
   };
-  const Container$9 = styled.div`
+  const Container$b = styled.div`
   width: 50px;
   height: 50px;
   padding: 0;
@@ -66959,7 +66988,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       }
     };
     const info = getWeatherTypeInfo(type);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$9, { "aria-label": "weather-icon", $top: info.top, $left: info.left, children: info.element });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$b, { "aria-label": "weather-icon", $top: info.top, $left: info.left, children: info.element });
   };
   const WeatherComponent = () => {
     const api2 = getPluginApi();
@@ -66985,7 +67014,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       ] })
     ] });
   };
-  const Container$8 = styled.div`
+  const Container$a = styled.div`
   display: flex;
   align-items: center;
   width: 100%;
@@ -67016,7 +67045,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   padding-right: 15px;
 `;
   const Header = ({ height = 70 }) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$8, { "aria-label": "header", $height: height, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$a, { "aria-label": "header", $height: height, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderLeft, { "aria-label": "header-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx(WeatherComponent, { "aria-label": "weather" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderCenter, { "aria-label": "header-center" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderRight, { "aria-label": "header-right", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClockComponent, { "aria-label": "clock" }) })
@@ -67024,7 +67053,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   };
   const About = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { padding: 20, direction: "vert", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: `Dek ${"0.25.0"}` }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: `Dek ${"0.27.0"}` }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { children: "From Appkit" })
     ] });
   };
@@ -67039,7 +67068,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     const handleSelection = (key) => {
       setSelectedKey(key);
       console.log("handleSelection", { key });
-      api2.plugin("base").state.set("backgroundKey", key);
+      api2.integration("base").state.set("backgroundKey", key);
     };
     const menuItems = Object.keys(backgroundItems).map((key) => {
       const item = backgroundItems[key];
@@ -67050,7 +67079,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fq1, { cols: "24% auto", gap: 20, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Ct2,
+        yt2,
         {
           items: menuItems,
           onSelect: handleSelection,
@@ -67074,7 +67103,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
                 value: backgroundProps[key] || prop.default,
                 onChange: (value) => {
                   backgroundProps[key] = value;
-                  api2.plugin("base").state.set(propsKey, JSON.stringify(backgroundProps));
+                  api2.integration("base").state.set(propsKey, JSON.stringify(backgroundProps));
                 }
               }
             ) });
@@ -67091,7 +67120,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
                 value: backgroundProps[key],
                 onChange: (option) => {
                   backgroundProps[key] = option.value;
-                  api2.plugin("base").state.set(propsKey, JSON.stringify(backgroundProps));
+                  api2.integration("base").state.set(propsKey, JSON.stringify(backgroundProps));
                 }
               }
             ) });
@@ -67106,7 +67135,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
                 color: backgroundProps[key] || prop.default,
                 onChange: (color) => {
                   backgroundProps[key] = color;
-                  api2.plugin("base").state.set(propsKey, JSON.stringify(backgroundProps));
+                  api2.integration("base").state.set(propsKey, JSON.stringify(backgroundProps));
                 }
               }
             );
@@ -67139,7 +67168,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { padding: 20, collapse: true, direction: "vert", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { paddingBottom: 15, children: "Boards" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "horz", collapse: true, children: boards && boards.map(({ key, title }) => /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        yt2,
+        kt2,
         {
           title,
           icon: "none",
@@ -67160,12 +67189,12 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     )) });
   };
   const PluginDev = ({ api: api2 }) => {
-    const plugin = api2.plugin("plugin");
+    const integration = api2.integration("plugin");
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { padding: 20, collapse: true, direction: "vert", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { paddingBottom: 15, children: "Components" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "horz", collapse: true, children: plugin && plugin.info.components.map((component) => /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          yt2,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "horz", collapse: true, children: integration && integration.info.components.map((component) => /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          kt2,
           {
             title: component,
             icon: "none",
@@ -67173,8 +67202,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
           }
         ) }, component)) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { paddingBottom: 15, paddingTop: 50, children: "Screens" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "horz", collapse: true, children: plugin && plugin.info.screens.map((screen) => /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          yt2,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "horz", collapse: true, children: integration && integration.info.screens.map((screen) => /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { collapse: true, paddingRight: 10, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          kt2,
           {
             title: screen,
             icon: "none",
@@ -67183,7 +67212,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         ) }, screen)) })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { fixed: "bottom", height: 120, paddingLeft: 20, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Bt2,
+        Ct2,
         {
           title: "Settings",
           variant: "clear",
@@ -67247,7 +67276,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     ];
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fq1, { cols: "24% auto", gap: 20, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Ct2,
+        yt2,
         {
           items: menuItems,
           onSelect: handleSelection,
@@ -67266,7 +67295,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { children: "Sets the color for Cards with variant='normal'.." })
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Ot2, { padding: 12, direction: "vert", style: { marginBottom: 40 }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Bt2, { padding: 12, direction: "vert", style: { marginBottom: 40 }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(PU1, { children: "Card" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { color: "subtle", children: "Body" })
           ] }),
@@ -67276,7 +67305,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
               width: "100%",
               maxWidth: 400,
               height: 150,
-              color: themeState["card-bg"] || C1.view.backColor.card,
+              color: themeState["card-bg"] || B1.view.backColor.card,
               onChange: (color) => {
                 themeState["card-bg"] = color;
                 setThemeState(themeState);
@@ -67312,7 +67341,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
               width: "100%",
               maxWidth: 400,
               height: 150,
-              color: themeState["tile-bg"] || C1.view.backColor.tile,
+              color: themeState["tile-bg"] || B1.view.backColor.tile,
               onChange: (color) => {
                 themeState["tile-bg"] = color;
                 setThemeState(themeState);
@@ -67343,7 +67372,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { width: 20 }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(yt2, { title: "Clear Pill", variant: "clear" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(kt2, { title: "Clear Pill", variant: "clear" })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             At2,
@@ -67352,7 +67381,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
               width: "100%",
               maxWidth: 400,
               height: 150,
-              color: themeState["clear-bg"] || C1.view.backColor.clear,
+              color: themeState["clear-bg"] || B1.view.backColor.clear,
               onChange: (color) => {
                 themeState["clear-bg"] = color;
                 setThemeState(themeState);
@@ -67373,9 +67402,9 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { style: { marginBottom: 40 }, direction: "horz", collapse: true, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Bt2, { title: "Button", variant: "normal" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Ct2, { title: "Button", variant: "normal" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { width: 20 }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(yt2, { title: "Pill", variant: "normal" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(kt2, { title: "Pill", variant: "normal" })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             At2,
@@ -67383,7 +67412,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
               width: "100%",
               maxWidth: 400,
               height: 150,
-              color: themeState["button-bg"] || C1.button.normal.backColor,
+              color: themeState["button-bg"] || B1.button.normal.backColor,
               onChange: (color) => {
                 themeState["button-bg"] = color;
                 setThemeState(themeState);
@@ -67425,7 +67454,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     ] });
   };
   const SettingsScreen = ({ api: api2, isPluginDev }) => {
-    const isPrivatePluginDev = !isPluginDev && api2.plugin("plugin").available;
+    const isPrivatePluginDev = !isPluginDev && api2.integration("plugin").available;
     const [selectedKey, setSelectedKey] = usePluginState(
       api2,
       "settings-screen-key",
@@ -67468,7 +67497,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wt2, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Fq1, { fullscreen: true, cols: "20% auto", padding: 20, paddingTop: 90, gap: 20, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Ct2,
+          yt2,
           {
             items: menuItems,
             onSelect: handleMenuSelection,
@@ -71426,7 +71455,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     MONTH: "YYYY-MM"
     // <input type="month" />
   };
-  const Container$7 = styled.div`
+  const Container$9 = styled.div`
   align-items: flex-start;
   padding: 10px 20px;
   margin-top: 130px;
@@ -71470,7 +71499,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     ]
   };
   const Greeting = ({ api: api2 }) => {
-    const calendarPlugin = api2.plugin("calendar");
+    const calendarPlugin = api2.integration("calendar");
     const events2 = calendarPlugin.api.useEvents();
     const getGreeting = () => {
       const d = /* @__PURE__ */ new Date();
@@ -71495,9 +71524,9 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         events2.nextEvent.startDate * 1e3
       ).format("h:mm")}`;
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$7, { "aria-label": "greeting", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: `${getGreeting()} ${getUpcoming()}` }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$9, { "aria-label": "greeting", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: `${getGreeting()} ${getUpcoming()}` }) });
   };
-  const Container$6 = styled.div`
+  const Container$8 = styled.div`
   height: 100vh;
   width: 100vw;
   background: ${(props) => `linear-gradient(90deg, ${props.$colorStart}, ${props.$colorEnd})`};
@@ -71537,12 +71566,12 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   }
 `;
   const BlobBackground = ({
-    colorStart = "#e52e71",
-    colorEnd = "#ff8a00",
-    speed = 0.5
+    colorStart = "#26a88d",
+    colorEnd = "#00796b",
+    speed = 1
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Container$6,
+      Container$8,
       {
         "aria-label": "blob-background",
         $colorStart: colorStart,
@@ -71551,7 +71580,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       }
     );
   };
-  const Container$5 = styled.div`
+  const Container$7 = styled.div`
   height: 100vh;
   width: 100vw;
   background: ${(props) => `radial-gradient(${props.$colorStart}, ${props.$colorEnd})`};
@@ -71646,12 +71675,12 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   left: 85%;
 `;
   const BlurredLightsBackground = ({
-    colorStart = "#e52e71",
-    colorEnd = "#ff8a00",
-    speed = 0.5
+    colorStart = "#d2276c",
+    colorEnd = "#170070",
+    speed = 1
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Container$5,
+      Container$7,
       {
         "aria-label": "blurred-lights-background",
         $colorStart: colorStart,
@@ -71670,7 +71699,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       }
     );
   };
-  const Container$4 = styled.div`
+  const Container$6 = styled.div`
   height: 100vh;
   width: 100vw;
   display: flex;
@@ -71704,7 +71733,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     speed = 0.5
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Container$4,
+      Container$6,
       {
         "aria-label": "gradient-background",
         $colorStart: colorStart,
@@ -71713,7 +71742,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       }
     );
   };
-  const Container$3 = styled.div`
+  const Container$5 = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -71780,13 +71809,184 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     };
     const background = backgrounds[itemKey];
     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 }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$5, { "aria-label": "background", $imageUrl: background.uri, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { $opacity: opacity || 0 }) });
+  };
+  const Container$4 = styled.div`
+  height: 100vh;
+  width: 100vw;
+  xbackground: ${(props) => `radial-gradient(
+    ${props.$colorStart} 0%,
+    ${props.$colorEnd} 100%
+  )`};
+`;
+  const speedFactor = 2;
+  const Slant1 = styled.div`
+  animation: slide ${({ $speed }) => ($speed + 0) * speedFactor}s ease-in-out
+    infinite alternate;
+  background-image: ${({ $colorStart, $colorEnd }) => `linear-gradient(-60deg, ${$colorStart} 50%, ${$colorEnd} 50%)`};
+  bottom: 0;
+  left: -50%;
+  opacity: 0.5;
+  position: fixed;
+  right: -50%;
+  top: 0;
+  z-index: -1;
+
+  @keyframes slide {
+    0% {
+      transform: translateX(-25%);
+    }
+    100% {
+      transform: translateX(25%);
+    }
+  }
+`;
+  const Slant2 = styled.div`
+  animation: slide ${({ $speed }) => ($speed + 0) * speedFactor}s ease-in-out
+    infinite alternate;
+  animation-direction: alternate-reverse;
+  animation-duration: ${({ $speed }) => ($speed + 1) * speedFactor}s;
+  background-image: ${({ $colorStart, $colorEnd }) => `linear-gradient(-60deg, ${$colorStart} 50%, ${$colorEnd} 50%)`};
+  bottom: 0;
+  left: -50%;
+  opacity: 0.5;
+  position: fixed;
+  right: -50%;
+  top: 0;
+  z-index: -1;
+
+  @keyframes slide {
+    0% {
+      transform: translateX(-25%);
+    }
+    100% {
+      transform: translateX(25%);
+    }
+  }
+`;
+  const Slant3 = styled.div`
+  animation: slide ${({ $speed }) => ($speed + 0) * speedFactor}s ease-in-out
+    infinite alternate;
+  animation-duration: ${({ $speed }) => ($speed + 2) * speedFactor}s;
+  background-image: ${({ $colorStart, $colorEnd }) => `linear-gradient(-60deg, ${$colorStart} 50%, ${$colorEnd} 50%)`};
+  bottom: 0;
+  left: -50%;
+  opacity: 0.5;
+  position: fixed;
+  right: -50%;
+  top: 0;
+  z-index: -1;
+
+  @keyframes slide {
+    0% {
+      transform: translateX(-25%);
+    }
+    100% {
+      transform: translateX(25%);
+    }
+  }
+`;
+  const SlantBackground = ({
+    colorStart = "#6c3",
+    colorEnd = "#09f",
+    speed = 30
+  }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Container$4,
+      {
+        "aria-label": "slant-background",
+        $colorStart: colorStart,
+        $colorEnd: colorEnd,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Slant1, { $speed: speed, $colorStart: colorStart, $colorEnd: colorEnd }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Slant2, { $speed: speed, $colorStart: colorStart, $colorEnd: colorEnd }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Slant3, { $speed: speed, $colorStart: colorStart, $colorEnd: colorEnd })
+        ]
+      }
+    );
+  };
+  const Container$3 = styled.div`
+  height: 100vh;
+  width: 100vw;
+  background: ${(props) => `radial-gradient(
+    ${props.$colorStart} 0%,
+    ${props.$colorEnd} 100%
+  )`};
+`;
+  const Ocean = styled.div`
+  height: ${({ $height }) => $height * 3}%;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: #015871;
+`;
+  const Wave1 = styled.div`
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg)
+    repeat-x;
+  position: absolute;
+  width: 6400px;
+  top: -198px;
+  left: 0;
+  height: 198px;
+  transform: translate(0, 0, 0);
+  animation: wave ${({ $speed }) => $speed * 70}s ease infinite;
+
+  @keyframes wave {
+    0% {
+      margin-left: 0;
+    }
+    100% {
+      margin-left: -1600px;
+    }
+  }
+`;
+  const Wave2 = styled.div`
+  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg)
+    repeat-x;
+  position: absolute;
+  width: 6400px;
+  top: -168px;
+  left: 0;
+  height: 198px;
+  transform: translate(0, 0, 0);
+  animation: swell ${({ $speed }) => $speed * 40}s ease infinite;
+  opacity: 1;
+
+  @keyframes swell {
+    0%,
+    100% {
+      transform: translate(0, -30px);
+    }
+    50% {
+      transform: translate(0, 5px);
+    }
+  }
+`;
+  const WaveBackground = ({
+    colorStart = "#3a88ba",
+    colorEnd = "#0b5774",
+    speed = 0.5,
+    tide = 3
+  }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Container$3,
+      {
+        "aria-label": "wave-background",
+        $colorStart: colorStart,
+        $colorEnd: colorEnd,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Ocean, { $height: tide, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Wave1, { $speed: speed }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Wave2, { $speed: speed })
+        ] })
+      }
+    );
   };
   const AboutScreen = ({ api: api2 }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wt2, { overlay: true, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx($t2, { title: "About" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { paddingTop: 100, paddingHorz: 20, collapse: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Bt2,
+        Ct2,
         {
           title: "Settings",
           iconName: "about",
@@ -98487,7 +98687,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     const [error2, setError] = React$3.useState(void 0);
     React$3.useEffect(() => {
       if (propsString === "") {
-        const plugin = api2.plugin("plugin");
+        const plugin = api2.integration("plugin");
         setPropsString(
           JSON.stringify(
             schemaToProps(plugin.componentSchema(params.componentKey)),
@@ -98529,7 +98729,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       }
     };
     const handleReset = () => {
-      const plugin = api2.plugin("plugin");
+      const plugin = api2.integration("plugin");
       setPropsString(
         JSON.stringify(
           schemaToProps(plugin.componentSchema(params.componentKey)),
@@ -98557,7 +98757,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              yt2,
+              kt2,
               {
                 title: "RESET",
                 variant: "clear",
@@ -98592,7 +98792,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
           ) }),
           error2 && /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { color: "red", paddingLeft: 15, paddingTop: 10, children: error2 })
         ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(St2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { halign: "left", valign: "center", children: propsString && api2.plugin("plugin").component(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(St2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { halign: "left", valign: "center", children: propsString && api2.integration("plugin").component(
           params.componentKey,
           parsePropsForComponent(api2, propsArray)
         ) }) })
@@ -98716,17 +98916,17 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
           colorStart: {
             type: "color",
             title: "Start Color",
-            default: "#e52e71"
+            default: "#d2276c"
           },
           colorEnd: {
             type: "color",
             title: "End Color",
-            default: "#ff8a00"
+            default: "#170070"
           },
           speed: {
             type: "number",
             title: "Speed",
-            default: 0.5,
+            default: 1,
             min: 0.1,
             max: 2,
             step: 0.1,
@@ -98742,12 +98942,38 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
           colorStart: {
             type: "color",
             title: "Start Color",
-            default: "#e52e71"
+            default: "#26a88d"
           },
           colorEnd: {
             type: "color",
             title: "End Color",
-            default: "#ff8a00"
+            default: "#00796b"
+          },
+          speed: {
+            type: "number",
+            title: "Speed",
+            default: 1,
+            min: 0.1,
+            max: 2,
+            step: 0.1,
+            minLabel: "Fast",
+            maxLabel: "Slow"
+          }
+        }
+      });
+      registry2.registerCollectionItem("backgrounds", "wave", {
+        name: "Wave",
+        component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(WaveBackground, { ...props }),
+        props: {
+          colorStart: {
+            type: "color",
+            title: "Start Color",
+            default: "#3a88ba"
+          },
+          colorEnd: {
+            type: "color",
+            title: "End Color",
+            default: "#0b5774"
           },
           speed: {
             type: "number",
@@ -98758,6 +98984,42 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
             step: 0.1,
             minLabel: "Fast",
             maxLabel: "Slow"
+          },
+          tide: {
+            type: "number",
+            title: "Tide",
+            default: 3,
+            min: 1,
+            max: 10,
+            step: 1,
+            minLabel: "Low",
+            maxLabel: "High"
+          }
+        }
+      });
+      registry2.registerCollectionItem("backgrounds", "slant", {
+        name: "Slant",
+        component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(SlantBackground, { ...props }),
+        props: {
+          colorStart: {
+            type: "color",
+            title: "Start Color",
+            default: "#6c3"
+          },
+          colorEnd: {
+            type: "color",
+            title: "End Color",
+            default: "#09f"
+          },
+          speed: {
+            type: "number",
+            title: "Speed",
+            default: 30,
+            min: 5,
+            max: 55,
+            step: 5,
+            minLabel: "Fast",
+            maxLabel: "Slow"
           }
         }
       });
@@ -98789,7 +99051,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       return [
         {
           key: "card-button",
-          element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Bt2, { ...props })
+          element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Ct2, { ...props })
         },
         {
           key: "command-group",
@@ -99132,7 +99394,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
           more > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(MoreContainer, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(MoreSpacer, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(More, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              yt2,
+              kt2,
               {
                 title: `${more} more today`,
                 icon: "none",
@@ -102210,7 +102472,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     title,
     entityId,
     iconName = "IoMedicalSharp",
-    variant = "toggle"
+    variant = "toggle",
+    square = true
   }) => {
     const entities = useEntities();
     const [loading, setLoading] = React$3.useState(false);
@@ -102224,7 +102487,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     const disabled = !entity;
     const active = entity && entity.state === "on";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Bt2,
+      Ct2,
       {
         variant,
         active,
@@ -102237,7 +102500,8 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         iconBackColor: active ? "#ffcc01" : "#ffffff22",
         iconColor: active ? "#fff" : "#fff",
         iconColorActive: "#fff",
-        loading
+        loading,
+        square
       }
     );
   };
@@ -102277,7 +102541,12 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       album: data.attributes.media_album_name
     };
   }
-  const MediaButton = ({ entityId, title = "Media", variant }) => {
+  const MediaButton = ({
+    entityId,
+    title = "Media",
+    variant,
+    square = true
+  }) => {
     const entities = useEntities();
     const [loading, setLoading] = React$3.useState(false);
     const [state2, setState2] = React$3.useState("");
@@ -102298,14 +102567,15 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     const iconName = state2 === "playing" ? "MdPause" : "MdPlayArrow";
     const disabled = !entity;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Bt2,
+      Ct2,
       {
         variant,
         disabled: loading || disabled,
         title,
         onClick: handleStateToggle,
         iconName,
-        loading
+        loading,
+        square
       }
     );
   };
@@ -102505,7 +102775,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         /* @__PURE__ */ jsxRuntimeExports.jsx(MediaTrack, { entity: media }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { paddingTop: 0, collapse: true, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            _U1,
+            IU1,
             {
               variant: "clear",
               width: 50,
@@ -102518,7 +102788,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(ControlSpacer, {}),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            _U1,
+            IU1,
             {
               variant: "clear",
               width: 50,
@@ -102534,6 +102804,60 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       ] })
     ] }) });
   };
+  function tryParseNumber(value, defValue) {
+    const parsed = parseInt(value);
+    return isNaN(parsed) ? defValue : parsed;
+  }
+  const SensorCard = ({
+    title,
+    entityId,
+    iconName = "MdOutlineDeviceThermostat",
+    clear = false,
+    square = true
+  }) => {
+    const entity = useEntity(entityId);
+    const state2 = entity ? tryParseNumber(entity.state) : void 0;
+    const value = entity && state2 ? `${state2} ${entity.attributes.unit_of_measurement}` : "?";
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Bt2,
+      {
+        variant: clear ? "clear" : "normal",
+        square,
+        label: "sensor-card",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { direction: "vert", padding: 10, paddingTop: 12, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(G4, { name: iconName, size: 30 }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(u0, { direction: "vert", paddingHorz: 4, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { size: "large", weight: "xbold", children: value }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(h4, { size: "normal", weight: "normal", children: title })
+          ] })
+        ] })
+      }
+    );
+  };
+  const EntitiesScreen = () => {
+    const entities = useEntities();
+    const [selectedKey, setSelectedKey] = React$3.useState("");
+    const menuItems = Object.keys(entities).map((key) => ({
+      title: entities[key].attributes.friendly_name || "Unknown",
+      key
+    }));
+    const handleMenuSelection = (key) => {
+      setSelectedKey(key);
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Wt2, { overlay: false, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Fq1, { fullscreen: true, cols: "40% auto", rows: "60px auto", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(St2, { colSpan: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx($t2, { title: "Home Assistant Entities" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { direction: "vert", vscroll: "auto", hscroll: "hidden", padding: 15, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        yt2,
+        {
+          items: menuItems,
+          onSelect: handleMenuSelection,
+          initialKey: selectedKey,
+          compact: true
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(u0, { vscroll: "auto", hscroll: "hidden", padding: 15, children: selectedKey && /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { style: { fontSize: 16 }, children: JSON.stringify(entities[selectedKey], null, 2) }) })
+    ] }) });
+  };
   class Plugin {
     constructor(config2) {
       __publicField(this, "config");
@@ -102568,20 +102892,32 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         {
           key: "entity-button",
           element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(EntityButton, { ...props })
+        },
+        {
+          key: "sensor-card",
+          element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(SensorCard, { ...props })
+        }
+      ];
+    }
+    get screens() {
+      return [
+        {
+          path: "/entities",
+          element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(EntitiesScreen, { ...props })
         }
       ];
     }
   }
-  const builtinPlugins = {
+  const builtinPluginFactories = {
     base: Plugin$2,
     calendar: Plugin$1,
     "home-assistant": Plugin
   };
   const pluginVersions = {};
-  const loadedDekPlugins = {};
-  const loadedDekPluginInstances = {};
-  let loadedLocalPlugin;
-  let loadedLocalPluginInstance;
+  const userPluginFactories = {};
+  const integrationInstances = {};
+  let localPluginFactory;
+  let localIntegrationInstance;
   async function loadUserPlugin(name, version2, code) {
     try {
       const module2 = {};
@@ -102612,7 +102948,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       return null;
     }
   }
-  function constructPluginInstance(integration, plugin, pluginConfig = {}) {
+  function constructIntegrationInstance(integration, plugin, pluginConfig = {}) {
     const pluginConfigMerged = {
       plugin: integration.pluginName,
       version: integration.pluginVersion || pluginVersions[integration.pluginName] || "latest",
@@ -102624,14 +102960,14 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     }
     return new plugin(pluginConfigMerged, registry);
   }
-  async function initializePluginInstance(pluginInstance, integrationKey) {
-    if (pluginInstance && pluginInstance.load) {
-      await pluginInstance.load(getPluginApi(integrationKey));
+  async function initializeIntegrationInstance(integrationInstance, integrationKey) {
+    if (integrationInstance && integrationInstance.load) {
+      await integrationInstance.load(getPluginApi(integrationKey));
     }
   }
-  async function initializePluginInstances() {
-    for (const key of Object.keys(loadedDekPluginInstances)) {
-      await initializePluginInstance(loadedDekPluginInstances[key], key);
+  async function initializeIntegrationInstances() {
+    for (const key of Object.keys(integrationInstances)) {
+      await initializeIntegrationInstance(integrationInstances[key], key);
     }
   }
   async function loadPlugins({
@@ -102640,59 +102976,62 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   }) {
     if (plugins) {
       for (const plugin of plugins) {
-        const userPlugin = await loadUserPlugin(
+        const userPluginFactory = await loadUserPlugin(
           plugin.name,
           plugin.version,
           plugin.code
         );
-        if (userPlugin) {
-          loadedDekPlugins[plugin.name] = userPlugin;
+        if (userPluginFactory) {
+          userPluginFactories[plugin.name] = userPluginFactory;
         }
       }
     }
     if (integrations) {
       for (const integration of integrations) {
-        const Plugin2 = builtinPlugins[integration.pluginName] || loadedDekPlugins[integration.pluginName];
-        if (Plugin2) {
-          const pluginInstance = constructPluginInstance(integration, Plugin2);
-          loadedDekPluginInstances[integration.key] = pluginInstance;
+        const plugin = builtinPluginFactories[integration.pluginName] || userPluginFactories[integration.pluginName];
+        if (plugin) {
+          const integrationInstance = constructIntegrationInstance(
+            integration,
+            plugin
+          );
+          integrationInstances[integration.key] = integrationInstance;
         }
       }
-      await initializePluginInstances();
+      await initializeIntegrationInstances();
     }
   }
   async function unloadAllPlugins() {
-    while (Object.keys(loadedDekPluginInstances).length > 0) {
-      const key = Object.keys(loadedDekPluginInstances)[0];
-      const plugin = loadedDekPluginInstances[key];
+    while (Object.keys(integrationInstances).length > 0) {
+      const key = Object.keys(integrationInstances)[0];
+      const plugin = integrationInstances[key];
       if (plugin && plugin.unload) {
         await plugin.unload();
       }
-      delete loadedDekPluginInstances[key];
+      delete integrationInstances[key];
     }
-    while (Object.keys(loadedDekPlugins).length > 0) {
-      const key = Object.keys(loadedDekPlugins)[0];
-      delete loadedDekPlugins[key];
+    while (Object.keys(userPluginFactories).length > 0) {
+      const key = Object.keys(userPluginFactories)[0];
+      delete userPluginFactories[key];
     }
   }
-  function getAllPlugins() {
-    const allPlugins = {
-      ...builtinPlugins,
-      ...loadedDekPlugins
+  function getAllPluginFactories() {
+    const results = {
+      ...builtinPluginFactories,
+      ...userPluginFactories
     };
-    if (loadedLocalPlugin) {
-      allPlugins.plugin = loadedLocalPlugin;
+    if (localPluginFactory) {
+      results.plugin = localPluginFactory;
     }
-    return allPlugins;
+    return results;
   }
-  function getAllPluginInstances() {
-    const allPluginInstances = {
-      ...loadedDekPluginInstances
+  function getAllIntegrationInstances() {
+    const results = {
+      ...integrationInstances
     };
-    if (loadedLocalPluginInstance) {
-      allPluginInstances.plugin = loadedLocalPluginInstance;
+    if (localIntegrationInstance) {
+      results.plugin = localIntegrationInstance;
     }
-    return allPluginInstances;
+    return results;
   }
   async function updatePlugins(email, password) {
     updateStateLoading(true);
@@ -102706,7 +103045,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
           {
             key: "base",
             pluginName: "base",
-            pluginVersion: "0.25.0",
+            pluginVersion: "0.27.0",
             pluginConfig: []
           }
         ],
@@ -102717,12 +103056,12 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       pluginVersions[plugin.name] = plugin.version;
     });
     await loadPlugins(integrationsAndPlugins);
-    updateStatePlugins(getAllPlugins(), getAllPluginInstances());
+    updateStatePlugins(getAllPluginFactories(), getAllIntegrationInstances());
     updateStateLoading(false);
   }
   async function unloadPlugins() {
     await unloadAllPlugins();
-    updateStatePlugins(getAllPlugins(), getAllPluginInstances());
+    updateStatePlugins(getAllPluginFactories(), getAllIntegrationInstances());
   }
   async function updateLocalPlugin(plugin, pluginConfig) {
     updateStateLoading(true);
@@ -102732,25 +103071,25 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       key: "plugin",
       pluginConfig: []
     };
-    loadedLocalPlugin = plugin;
-    loadedLocalPluginInstance = constructPluginInstance(
+    localPluginFactory = plugin;
+    localIntegrationInstance = constructIntegrationInstance(
       integration,
       plugin,
       pluginConfig
     );
-    if (loadedLocalPluginInstance && loadedLocalPluginInstance.load) {
-      await loadedLocalPluginInstance.load(getPluginApi("plugin"));
+    if (localIntegrationInstance && localIntegrationInstance.load) {
+      await localIntegrationInstance.load(getPluginApi("plugin"));
     }
-    updateStatePlugins(getAllPlugins(), getAllPluginInstances());
+    updateStatePlugins(getAllPluginFactories(), getAllIntegrationInstances());
     updateStateLoading(false);
   }
   async function unloadLocalPlugin() {
-    if (loadedLocalPluginInstance && loadedLocalPluginInstance.unload) {
-      await loadedLocalPluginInstance.unload();
+    if (localIntegrationInstance && localIntegrationInstance.unload) {
+      await localIntegrationInstance.unload();
     }
-    loadedLocalPluginInstance = void 0;
-    loadedLocalPlugin = void 0;
-    updateStatePlugins(getAllPlugins(), getAllPluginInstances());
+    localIntegrationInstance = void 0;
+    localPluginFactory = void 0;
+    updateStatePlugins(getAllPluginFactories(), getAllIntegrationInstances());
   }
   function useUserConfig(email, password, plugin, pluginConfig) {
     const userConfig = useSnapshot(state$1);
@@ -102779,7 +103118,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
       globals.commandGroups = userConfig.data.commandGroups;
     }
     globals.plugins = userConfig.plugins;
-    globals.pluginInstances = getPluginInstances();
+    globals.integrationInstances = getIntegrationInstances();
     return userConfig;
   }
   const Background = () => {
@@ -103732,10 +104071,10 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     const api2 = getPluginApi();
     const resolveRouteElement = (route2) => {
       if (route2.type === "screen") {
-        return api2.plugin(route2.plugin).screen(route2.path);
+        return api2.integration(route2.plugin).screen(route2.path);
       } else {
         const defaultBase = {
-          plugin: "base",
+          integration: "base",
           key: "main"
         };
         const board = api2.boards.find(
@@ -103743,19 +104082,19 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         );
         if (board) {
           if (board.base) {
-            const boardElement = api2.plugin(board.base.plugin).board(board.base.key);
+            const boardElement = api2.integration(board.base.integration).board(board.base.key);
             if (boardElement) {
               return boardElement;
             }
           } else {
-            return api2.plugin(defaultBase.plugin).board(defaultBase.key);
+            return api2.integration(defaultBase.integration).board(defaultBase.key);
           }
         }
-        const devBoard = api2.plugin("plugin").board(api2.boardKey);
+        const devBoard = api2.integration("plugin").board(api2.boardKey);
         if (devBoard) {
           return devBoard;
         }
-        return api2.plugin(defaultBase.plugin).board(api2.boardKey);
+        return api2.integration(defaultBase.integration).board(api2.boardKey);
       }
     };
     console.log("### ROUTE", route);
@@ -103779,15 +104118,15 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     const [container, setContainer] = React$3.useState(null);
     const [containerNodeRef, setContainerNodeRef] = React$3.useState(null);
     const { data } = userConfig;
-    const pluginInstances2 = getPluginInstances();
+    const pluginInstances = getIntegrationInstances();
     React$3.useEffect(() => {
       const loadRoutes = async () => {
         var _a2, _b2;
         const newRoutes = [];
         const newBoardKeys = [];
-        if (pluginInstances2) {
-          for (const key in pluginInstances2) {
-            (_a2 = pluginInstances2[key].screens) == null ? void 0 : _a2.forEach((screen) => {
+        if (pluginInstances) {
+          for (const key in pluginInstances) {
+            (_a2 = pluginInstances[key].screens) == null ? void 0 : _a2.forEach((screen) => {
               newRoutes.push({
                 type: "screen",
                 plugin: key,
@@ -103796,7 +104135,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
                 nodeRef: React$3.createRef()
               });
             });
-            (_b2 = pluginInstances2[key].boards) == null ? void 0 : _b2.forEach((board) => {
+            (_b2 = pluginInstances[key].boards) == null ? void 0 : _b2.forEach((board) => {
               newBoardKeys.push("/" + board.key);
             });
           }
@@ -103814,7 +104153,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
         setBoardKeys(newBoardKeys);
       };
       loadRoutes();
-    }, [pluginInstances2, data == null ? void 0 : data.boards]);
+    }, [pluginInstances, data == null ? void 0 : data.boards]);
     React$3.useEffect(() => {
       const { nodeRef } = routes.find((route) => {
         let path = "/:boardKey";
@@ -103886,7 +104225,7 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
   const BoardProvider = ({ email, password, plugin, pluginConfig }) => {
     const config2 = useUserConfig(email, password, plugin, pluginConfig);
     console.log("### LOADED", config2);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(styled.ThemeProvider, { theme: C1, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(styled.ThemeProvider, { theme: B1, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(BoardStyles, { transitionDelay }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Background, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { userConfig: config2, transitionDelay }),
@@ -103910,10 +104249,10 @@ Arguments: ` + Array.prototype.slice.call(n5).join("") + `
     if (!group) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { children: group.commands.map((component, idx) => {
-      const instance = api2.plugin(component.plugin).component(
-        component.component,
-        parsePropsForComponent(api2, component.props)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { children: group.commands.map((command, idx) => {
+      const instance = api2.integration(command.integration).component(
+        command.component,
+        parsePropsForComponent(api2, command.props)
       );
       return /* @__PURE__ */ jsxRuntimeExports.jsx(CommandItem, { children: instance }, idx);
     }) });