@appkit/dek-lib 0.36.0 → 0.43.0

package/dist/index.es.js

@@ -24518,6 +24518,7 @@ const cq1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   margin: ${({ $margin: t2 }) => t2}px;
   background-color: ${({ $backColor: t2 }) => t2};
   border-radius: 50%;
+  box-sizing: content-box;
 `, oq1 = styled.div``, vq1 = ({
   loading: t2 = false,
   active: e2 = false,
@@ -46539,12 +46540,7 @@ class Api {
 class ApiInternal {
   trace(integrationKey, message, ...data) {
     console.log(`DEK-TRACE[${integrationKey}]: ${message}`, ...data);
-    this.globals.messages.push({
-      type: "trace",
-      body: message,
-      data,
-      at: Date.now()
-    });
+    return;
   }
   warn(integrationKey, message, ...data) {
     console.warn(`DEK-WARN[${integrationKey}]: ${message}`, ...data);
@@ -65513,146 +65509,15 @@ async function fetchUserPlugins(authToken) {
     query: USER_PLUGIN_AND_INTEGRATIONS_QUERY
   });
   const result = _.cloneDeep(response.data.currentUser);
-  result.integrations.push({
+  result.integrations.unshift({
     key: "base",
     pluginName: "base",
-    pluginVersion: "0.36.0",
+    pluginVersion: "0.43.0",
     pluginConfig: []
   });
   return result;
 }
-const ClockComponent = () => {
-  const dt = r52();
-  const time = n52("h:mm", dt);
-  const date = n52("ddd, MMM D", dt);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(g0, { label: "clock", direction: "horz", valign: "center", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(l4, { size: "xxlarge", color: "xxsubtle", paddingRight: 11, children: date }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(l4, { size: "xxlarge", color: "subtle", weight: "bold", children: time })
-  ] });
-};
-function transformWeatherData(data) {
-  if (!data) {
-    return {
-      type: "unknown",
-      temperature: 0
-    };
-  }
-  return {
-    type: data.state,
-    temperature: data.attributes.temperature
-  };
-}
-const state = proxy({
-  entities: {}
-});
-const useEntities = () => {
-  return useSnapshot(state).entities;
-};
 const Container$b = styled.div`
-  width: 50px;
-  height: 50px;
-  padding: 0;
-  margin-top: ${(props) => props.$top}px;
-  margin-left: ${(props) => props.$left}px;
-  & svg {
-    stroke: ${({ theme }) => theme.text.color.xsubtle};
-  }
-  & g > path {
-    stroke: ${({ theme }) => theme.text.color.xsubtle};
-    fill: ${({ theme }) => theme.text.color.xsubtle};
-  }
-  & path {
-    stroke: ${({ theme }) => theme.text.color.xsubtle};
-    fill: ${({ theme }) => theme.text.color.xsubtle};
-  }
-`;
-const SvgClearNight = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b9d5", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M46.66 36.2a16.66 16.66 0 01-16.78-16.55 16.29 16.29 0 01.55-4.15A16.56 16.56 0 1048.5 36.1c-.61.06-1.22.1-1.84.1z" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "10s", repeatCount: "indefinite", type: "rotate", values: "-5 32 32;15 32 32;-5 32 32" })));
-const SvgCloudy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinejoin: "round", strokeWidth: 3, d: "M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "7s", repeatCount: "indefinite", type: "translate", values: "-3 0; 3 0; -3 0" })));
-const SvgExceptional = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#f59e0b", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M42.5 32A10.5 10.5 0 1132 21.5 10.5 10.5 0 0142.5 32zM32 15.71V9.5m0 45v-6.21m11.52-27.81l4.39-4.39M16.09 47.91l4.39-4.39m0-23l-4.39-4.39m31.82 31.78l-4.39-4.39M15.71 32H9.5m45 0h-6.21" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 32 32", repeatCount: "indefinite", to: "360 32 32", type: "rotate" })));
-const SvgFog = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinejoin: "round", strokeWidth: 3, d: "M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#d1d5db", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 58h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "0s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#d1d5db", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 52h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-4s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })));
-const SvgHail = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 24, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 31, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 38, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })));
-const SvgLightningRaining = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "#f59e0b", d: "M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "2s", repeatCount: "indefinite", values: "1;1;1;1;1;1;0.1;1;0.1;1;1;0.1;1;0.1;1" })));
-const SvgLightning = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "#f59e0b", d: "M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "2s", repeatCount: "indefinite", values: "1;1;1;1;1;1;0.1;1;0.1;1;1;0.1;1;0.1;1" })));
-const SvgPartlyCloudy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("defs", null, /* @__PURE__ */ React$3.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", d: "M12 35l-5.28-4.21-2-6 1-7 4-5 5-3h6l5 1 3 3L33 20l-6 4h-6l-3 3v4l-4 2-2 2z" }))), /* @__PURE__ */ React$3.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#f59e0b", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M23.5 24a4.5 4.5 0 11-4.5-4.5 4.49 4.49 0 014.5 4.5zM19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 19 24", repeatCount: "indefinite", to: "360 19 24", type: "rotate" }))), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinejoin: "round", strokeWidth: 3, d: "M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z" }));
-const SvgPouring = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })));
-const SvgRainy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })));
-const SvgSnowyRainy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 24, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M26.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M24 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-2s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 24 45; 360 24 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-2s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 38, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M40.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M38 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-1s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 38 45; 360 38 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.08 45.01l-.16.98" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.08 45.01l-.16.98" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.5s", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.5s", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.08 45.01l-.16.98" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-1s", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })));
-const SvgSnowy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 31, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M33.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M31 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "4s", repeatCount: "indefinite", type: "translate", values: "-1 -6; 1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 31 45; 360 31 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 24, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M26.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M24 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-2s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 24 45; 360 24 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-2s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 38, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M40.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M38 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-1s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 38 45; 360 38 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })));
-const SvgSunny = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#f59e0b", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M42.5 32A10.5 10.5 0 1132 21.5 10.5 10.5 0 0142.5 32zM32 15.71V9.5m0 45v-6.21m11.52-27.81l4.39-4.39M16.09 47.91l4.39-4.39m0-23l-4.39-4.39m31.82 31.78l-4.39-4.39M15.71 32H9.5m45 0h-6.21" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 32 32", repeatCount: "indefinite", to: "360 32 32", type: "rotate" })));
-const SvgUnknown = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 32h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "0s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 39h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-2s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-3 0; 3 0; -3 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 25h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-4s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })));
-const SvgWindyVariant = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeDasharray: "35 22", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M43.64 20a5 5 0 113.61 8.46h-35.5" }, /* @__PURE__ */ React$3.createElement("animate", { attributeName: "stroke-dashoffset", dur: "2s", repeatCount: "indefinite", values: "-57; 57" })), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeDasharray: "24 18", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M29.14 44a5 5 0 103.61-8.46h-21" }, /* @__PURE__ */ React$3.createElement("animate", { attributeName: "stroke-dashoffset", begin: "-1.5s", dur: "2s", repeatCount: "indefinite", values: "-39; 39" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M21.5 39.5h9" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "0 0; 15 0" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M11.5 24.5h9" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-.3s", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "-3 0; 18 0" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-.3s", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M27.5 32h9" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-.6s", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "-6 0; 12 0" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-.6s", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })));
-const SvgWindy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeDasharray: "35 22", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M43.64 20a5 5 0 113.61 8.46h-35.5" }, /* @__PURE__ */ React$3.createElement("animate", { attributeName: "stroke-dashoffset", dur: "2s", repeatCount: "indefinite", values: "-57; 57" })), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeDasharray: "24 15", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M29.14 44a5 5 0 103.61-8.46h-21" }, /* @__PURE__ */ React$3.createElement("animate", { attributeName: "stroke-dashoffset", begin: "-1.5s", dur: "2s", repeatCount: "indefinite", values: "-39; 39" })));
-const WeatherIcon = ({ type }) => {
-  const baseTop = 0;
-  const baseLeft = -7;
-  const getWeatherTypeInfo = (type2) => {
-    switch (type2) {
-      case "sunny":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgSunny, {}), top: baseTop, left: baseLeft };
-      case "cloudy":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgCloudy, {}), top: baseTop, left: baseLeft };
-      case "partlycloudy":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgPartlyCloudy, {}), top: baseTop, left: baseLeft };
-      case "clear-night":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgClearNight, {}), top: baseTop, left: baseLeft };
-      case "fog":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgFog, {}), top: baseTop - 6, left: baseLeft };
-      case "hail":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgHail, {}), top: baseTop - 3, left: baseLeft };
-      case "lightning":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgLightning, {}), top: baseTop - 3, left: baseLeft };
-      case "lightning-raining":
-        return {
-          element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgLightningRaining, {}),
-          top: baseTop - 3,
-          left: baseLeft
-        };
-      case "pouring":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgPouring, {}), top: baseTop - 3, left: baseLeft };
-      case "rainy":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgRainy, {}), top: baseTop - 3, left: baseLeft };
-      case "snowy":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgSnowy, {}), top: baseTop - 3, left: baseLeft };
-      case "snowy-rainy":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgSnowyRainy, {}), top: baseTop - 3, left: baseLeft };
-      case "windy":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWindy, {}), top: baseTop, left: baseLeft };
-      case "windy-variant":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWindyVariant, {}), top: baseTop, left: baseLeft };
-      case "exceptional":
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgExceptional, {}), top: baseTop, left: baseLeft };
-      default:
-        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgUnknown, {}), top: baseTop, left: baseLeft };
-    }
-  };
-  const info = getWeatherTypeInfo(type);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$b, { "aria-label": "weather-icon", $top: info.top, $left: info.left, children: info.element });
-};
-const WeatherComponent = () => {
-  const api2 = getPluginApi();
-  const entities = useEntities();
-  const [weatherData, setWeatherData] = React__default.useState();
-  const data = transformWeatherData(entities["weather.forecast_home"]);
-  useEffect$1(() => {
-    if (data && (!weatherData || data.temperature !== weatherData.temperature || data.type !== weatherData.type)) {
-      if (weatherData) {
-        api2.trace("Weather changed", data);
-      }
-      setWeatherData(data);
-    }
-  }, [data, weatherData, api2]);
-  if (!weatherData) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(g0, { label: "weather-view", direction: "horz", valign: "center", children: [
-    weatherData.type !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(WeatherIcon, { type: weatherData.type }),
-    !!weatherData.temperature && /* @__PURE__ */ jsxRuntimeExports.jsxs(l4, { label: "temperature", size: "xxlarge", color: "xsubtle", children: [
-      weatherData.temperature,
-      "°"
-    ] })
-  ] });
-};
-const Container$a = styled.div`
   display: flex;
   align-items: center;
   width: 100%;
@@ -65682,16 +65547,41 @@ const HeaderRight = styled.div`
   height: 100%;
   padding-right: 15px;
 `;
-const Header = ({ height = 70 }) => {
-  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" }) })
+const Header = ({
+  height = 70,
+  leftWidget = "",
+  centerWidget = "",
+  rightWidget = "datetime"
+}) => {
+  var _a2, _b2, _c2;
+  const api2 = getPluginApi();
+  let leftComponent = null;
+  let centerComponent = null;
+  let rightComponent = null;
+  const widgets = api2.registry.collection("header-widgets");
+  if (widgets && widgets.items) {
+    leftComponent = leftWidget ? ((_a2 = widgets.items[leftWidget]) == null ? void 0 : _a2.component()) ?? null : null;
+    centerComponent = centerWidget ? ((_b2 = widgets.items[centerWidget]) == null ? void 0 : _b2.component()) ?? null : null;
+    rightComponent = rightWidget ? ((_c2 = widgets.items[rightWidget]) == null ? void 0 : _c2.component()) ?? null : null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$b, { "aria-label": "header", $height: height, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderLeft, { "aria-label": "header-left", children: leftComponent }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderCenter, { "aria-label": "header-center", children: centerComponent }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderRight, { "aria-label": "header-right", children: rightComponent })
+  ] });
+};
+const ClockComponent = () => {
+  const dt = r52();
+  const time = n52("h:mm", dt);
+  const date = n52("ddd, MMM D", dt);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(g0, { label: "clock", direction: "horz", valign: "center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(l4, { size: "xxlarge", color: "xxsubtle", paddingRight: 11, children: date }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(l4, { size: "xxlarge", color: "subtle", weight: "bold", children: time })
   ] });
 };
 const About = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(g0, { padding: 20, direction: "vert", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(uq1, { children: `Dek ${"0.36.0"}` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(uq1, { children: `Dek ${"0.43.0"}` }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(l4, { children: "From Appkit" })
   ] });
 };
@@ -70712,7 +70602,7 @@ var reactJsxParser_min = { exports: {} };
 })(reactJsxParser_min);
 var reactJsxParser_minExports = reactJsxParser_min.exports;
 const JsxParser = /* @__PURE__ */ getDefaultExportFromCjs(reactJsxParser_minExports);
-const Container$9 = styled.div`
+const Container$a = styled.div`
   ${({ $width, $height }) => $width && $height ? `position: relative; width: ${$width}px; height: ${$height}px;` : "position: absolute; top: 0; bottom: 0; left: 0; right: 0;"}
 
   display: flex;
@@ -70720,7 +70610,7 @@ const Container$9 = styled.div`
 const BoardScreen = ({ children }) => {
   const previewConfig = usePreviewConfig();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Container$9,
+    Container$a,
     {
       "aria-label": "screen",
       $width: previewConfig == null ? void 0 : previewConfig.width,
@@ -74787,7 +74677,7 @@ hooks.HTML5_FMT = {
   MONTH: "YYYY-MM"
   // <input type="month" />
 };
-const Container$8 = styled.div`
+const Container$9 = styled.div`
   align-items: flex-start;
   padding: 10px 20px;
   margin-top: 130px;
@@ -74856,9 +74746,9 @@ const Greeting = ({ api: api2 }) => {
       events2.nextEvent.startDate * 1e3
     ).format("h:mm")}`;
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$8, { "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$7 = styled.div`
+const Container$8 = styled.div`
   height: 100vh;
   width: 100vw;
   background: ${(props) => `linear-gradient(90deg, ${props.$colorStart}, ${props.$colorEnd})`};
@@ -74903,7 +74793,7 @@ const BlobBackground = ({
   speed = 1
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Container$7,
+    Container$8,
     {
       "aria-label": "blob-background",
       $colorStart: colorStart,
@@ -74912,7 +74802,7 @@ const BlobBackground = ({
     }
   );
 };
-const Container$6 = styled.div`
+const Container$7 = styled.div`
   height: 100vh;
   width: 100vw;
   background: ${(props) => `radial-gradient(${props.$colorStart}, ${props.$colorEnd})`};
@@ -75012,7 +74902,7 @@ const BlurredLightsBackground = ({
   speed = 1
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Container$6,
+    Container$7,
     {
       "aria-label": "blurred-lights-background",
       $colorStart: colorStart,
@@ -75031,7 +74921,7 @@ const BlurredLightsBackground = ({
     }
   );
 };
-const Container$5 = styled.div`
+const Container$6 = styled.div`
   height: 100vh;
   width: 100vw;
   display: flex;
@@ -75065,7 +74955,7 @@ const GradientBackground = ({
   speed = 0.5
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Container$5,
+    Container$6,
     {
       "aria-label": "gradient-background",
       $colorStart: colorStart,
@@ -75074,7 +74964,7 @@ const GradientBackground = ({
     }
   );
 };
-const Container$4 = styled.div`
+const Container$5 = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -75141,9 +75031,9 @@ const ImageBackground = ({ itemKey = "fibre", opacity }) => {
   };
   const background = backgrounds[itemKey];
   opacity = opacity === void 0 ? background.opacity : opacity;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$4, { "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$3 = styled.div`
+const Container$4 = styled.div`
   height: 100vh;
   width: 100vw;
   xbackground: ${(props) => `radial-gradient(
@@ -75224,7 +75114,7 @@ const SlantBackground = ({
   speed = 30
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Container$3,
+    Container$4,
     {
       "aria-label": "slant-background",
       $colorStart: colorStart,
@@ -75237,7 +75127,7 @@ const SlantBackground = ({
     }
   );
 };
-const Container$2 = styled.div`
+const Container$3 = styled.div`
   height: 100vh;
   width: 100vw;
   background: ${(props) => `radial-gradient(
@@ -75302,7 +75192,7 @@ const WaveBackground = ({
   tide = 3
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Container$2,
+    Container$3,
     {
       "aria-label": "wave-background",
       $colorStart: colorStart,
@@ -101228,6 +101118,28 @@ let Plugin$2 = class Plugin {
         }
       }
     });
+    registry2.registerCollection("header-widgets", "Header Widgets", {
+      name: {
+        type: "string",
+        title: "name",
+        required: true
+      },
+      component: {
+        type: "component",
+        title: "component",
+        required: true
+      },
+      props: {
+        type: "props",
+        title: "props",
+        required: false
+      }
+    });
+    registry2.registerCollectionItem("header-widgets", "datetime", {
+      name: "Date and Time",
+      component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(ClockComponent, { ...props }),
+      props: {}
+    });
   }
   async load(api2) {
     api2.trace(
@@ -101264,7 +101176,24 @@ let Plugin$2 = class Plugin {
       },
       {
         key: "header",
-        element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Header, { ...props })
+        element: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Header, { ...props }),
+        schema: {
+          leftWidget: {
+            type: "string",
+            title: "Left Widget",
+            default: ""
+          },
+          centerWidget: {
+            type: "string",
+            title: "Center Widget",
+            default: ""
+          },
+          rightWidget: {
+            type: "string",
+            title: "Right Widget",
+            default: "datetime"
+          }
+        }
       },
       {
         key: "title-bar",
@@ -104673,6 +104602,12 @@ function transformSwitchData(data) {
     state: data.state
   };
 }
+const state = proxy({
+  entities: {}
+});
+const useEntities = () => {
+  return useSnapshot(state).entities;
+};
 const EntityButton = ({
   title,
   entityId,
@@ -104791,7 +104726,7 @@ const useEntity = (entityId) => {
   }
   return entities[entityId];
 };
-const Container$1 = styled.div`
+const Container$2 = styled.div`
   display: flex;
   aspect-ratio: 1;
   ${({ $large }) => {
@@ -104805,7 +104740,7 @@ const Container$1 = styled.div`
 const CoverArt = ({ url, showLargeContent, onClick = noop$1 }) => {
   const size = showLargeContent ? "60vh" : "250px";
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Container$1,
+    Container$2,
     {
       "aria-label": "media-cover-art",
       $large: showLargeContent,
@@ -105039,6 +104974,122 @@ const SensorCard = ({
     }
   );
 };
+function transformWeatherData(data) {
+  if (!data) {
+    return {
+      type: "unknown",
+      temperature: 0
+    };
+  }
+  return {
+    type: data.state,
+    temperature: data.attributes.temperature
+  };
+}
+const Container$1 = styled.div`
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  margin-top: ${(props) => props.$top}px;
+  margin-left: ${(props) => props.$left}px;
+  & svg {
+    stroke: ${({ theme }) => theme.text.color.xsubtle};
+  }
+  & g > path {
+    stroke: ${({ theme }) => theme.text.color.xsubtle};
+    fill: ${({ theme }) => theme.text.color.xsubtle};
+  }
+  & path {
+    stroke: ${({ theme }) => theme.text.color.xsubtle};
+    fill: ${({ theme }) => theme.text.color.xsubtle};
+  }
+`;
+const SvgClearNight = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b9d5", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M46.66 36.2a16.66 16.66 0 01-16.78-16.55 16.29 16.29 0 01.55-4.15A16.56 16.56 0 1048.5 36.1c-.61.06-1.22.1-1.84.1z" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "10s", repeatCount: "indefinite", type: "rotate", values: "-5 32 32;15 32 32;-5 32 32" })));
+const SvgCloudy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinejoin: "round", strokeWidth: 3, d: "M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "7s", repeatCount: "indefinite", type: "translate", values: "-3 0; 3 0; -3 0" })));
+const SvgExceptional = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#f59e0b", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M42.5 32A10.5 10.5 0 1132 21.5 10.5 10.5 0 0142.5 32zM32 15.71V9.5m0 45v-6.21m11.52-27.81l4.39-4.39M16.09 47.91l4.39-4.39m0-23l-4.39-4.39m31.82 31.78l-4.39-4.39M15.71 32H9.5m45 0h-6.21" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 32 32", repeatCount: "indefinite", to: "360 32 32", type: "rotate" })));
+const SvgFog = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinejoin: "round", strokeWidth: 3, d: "M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#d1d5db", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 58h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "0s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#d1d5db", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 52h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-4s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })));
+const SvgHail = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 24, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 31, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 38, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })));
+const SvgLightningRaining = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "#f59e0b", d: "M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "2s", repeatCount: "indefinite", values: "1;1;1;1;1;1;0.1;1;0.1;1;1;0.1;1;0.1;1" })));
+const SvgLightning = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "#f59e0b", d: "M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "2s", repeatCount: "indefinite", values: "1;1;1;1;1;1;0.1;1;0.1;1;1;0.1;1;0.1;1" })));
+const SvgPartlyCloudy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("defs", null, /* @__PURE__ */ React$3.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", d: "M12 35l-5.28-4.21-2-6 1-7 4-5 5-3h6l5 1 3 3L33 20l-6 4h-6l-3 3v4l-4 2-2 2z" }))), /* @__PURE__ */ React$3.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#f59e0b", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M23.5 24a4.5 4.5 0 11-4.5-4.5 4.49 4.49 0 014.5 4.5zM19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 19 24", repeatCount: "indefinite", to: "360 19 24", type: "rotate" }))), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinejoin: "round", strokeWidth: 3, d: "M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z" }));
+const SvgPouring = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })));
+const SvgRainy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })));
+const SvgSnowyRainy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 24, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M26.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M24 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-2s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 24 45; 360 24 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-2s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 38, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M40.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M38 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-1s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 38 45; 360 38 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.08 45.01l-.16.98" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.08 45.01l-.16.98" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-0.5s", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-0.5s", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.08 45.01l-.16.98" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-1s", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })));
+const SvgSnowy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0" }), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 31, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M33.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M31 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "4s", repeatCount: "indefinite", type: "translate", values: "-1 -6; 1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 31 45; 360 31 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 24, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M26.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M24 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-2s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 24 45; 360 24 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-2s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("circle", { cx: 38, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#72b8d4", strokeLinecap: "round", strokeMiterlimit: 10, d: "M40.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M38 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-1s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React$3.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 38 45; 360 38 45" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })));
+const SvgSunny = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#f59e0b", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M42.5 32A10.5 10.5 0 1132 21.5 10.5 10.5 0 0142.5 32zM32 15.71V9.5m0 45v-6.21m11.52-27.81l4.39-4.39M16.09 47.91l4.39-4.39m0-23l-4.39-4.39m31.82 31.78l-4.39-4.39M15.71 32H9.5m45 0h-6.21" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 32 32", repeatCount: "indefinite", to: "360 32 32", type: "rotate" })));
+const SvgUnknown = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 32h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "0s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 39h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-2s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-3 0; 3 0; -3 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 25h30" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-4s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })));
+const SvgWindyVariant = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeDasharray: "35 22", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M43.64 20a5 5 0 113.61 8.46h-35.5" }, /* @__PURE__ */ React$3.createElement("animate", { attributeName: "stroke-dashoffset", dur: "2s", repeatCount: "indefinite", values: "-57; 57" })), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeDasharray: "24 18", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M29.14 44a5 5 0 103.61-8.46h-21" }, /* @__PURE__ */ React$3.createElement("animate", { attributeName: "stroke-dashoffset", begin: "-1.5s", dur: "2s", repeatCount: "indefinite", values: "-39; 39" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M21.5 39.5h9" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "0 0; 15 0" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M11.5 24.5h9" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-.3s", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "-3 0; 18 0" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-.3s", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })), /* @__PURE__ */ React$3.createElement("g", null, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M27.5 32h9" }), /* @__PURE__ */ React$3.createElement("animateTransform", { attributeName: "transform", begin: "-.6s", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "-6 0; 12 0" }), /* @__PURE__ */ React$3.createElement("animate", { attributeName: "opacity", begin: "-.6s", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })));
+const SvgWindy = (props) => /* @__PURE__ */ React$3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeDasharray: "35 22", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M43.64 20a5 5 0 113.61 8.46h-35.5" }, /* @__PURE__ */ React$3.createElement("animate", { attributeName: "stroke-dashoffset", dur: "2s", repeatCount: "indefinite", values: "-57; 57" })), /* @__PURE__ */ React$3.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeDasharray: "24 15", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M29.14 44a5 5 0 103.61-8.46h-21" }, /* @__PURE__ */ React$3.createElement("animate", { attributeName: "stroke-dashoffset", begin: "-1.5s", dur: "2s", repeatCount: "indefinite", values: "-39; 39" })));
+const WeatherIcon = ({ type }) => {
+  const baseTop = 0;
+  const baseLeft = -7;
+  const getWeatherTypeInfo = (type2) => {
+    switch (type2) {
+      case "sunny":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgSunny, {}), top: baseTop, left: baseLeft };
+      case "cloudy":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgCloudy, {}), top: baseTop, left: baseLeft };
+      case "partlycloudy":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgPartlyCloudy, {}), top: baseTop, left: baseLeft };
+      case "clear-night":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgClearNight, {}), top: baseTop, left: baseLeft };
+      case "fog":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgFog, {}), top: baseTop - 6, left: baseLeft };
+      case "hail":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgHail, {}), top: baseTop - 3, left: baseLeft };
+      case "lightning":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgLightning, {}), top: baseTop - 3, left: baseLeft };
+      case "lightning-raining":
+        return {
+          element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgLightningRaining, {}),
+          top: baseTop - 3,
+          left: baseLeft
+        };
+      case "pouring":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgPouring, {}), top: baseTop - 3, left: baseLeft };
+      case "rainy":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgRainy, {}), top: baseTop - 3, left: baseLeft };
+      case "snowy":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgSnowy, {}), top: baseTop - 3, left: baseLeft };
+      case "snowy-rainy":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgSnowyRainy, {}), top: baseTop - 3, left: baseLeft };
+      case "windy":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWindy, {}), top: baseTop, left: baseLeft };
+      case "windy-variant":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWindyVariant, {}), top: baseTop, left: baseLeft };
+      case "exceptional":
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgExceptional, {}), top: baseTop, left: baseLeft };
+      default:
+        return { element: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgUnknown, {}), top: baseTop, left: baseLeft };
+    }
+  };
+  const info = getWeatherTypeInfo(type);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$1, { "aria-label": "weather-icon", $top: info.top, $left: info.left, children: info.element });
+};
+const WeatherComponent = () => {
+  const api2 = getPluginApi();
+  const entities = useEntities();
+  const [weatherData, setWeatherData] = React__default.useState();
+  const data = transformWeatherData(entities["weather.forecast_home"]);
+  useEffect$1(() => {
+    if (data && (!weatherData || data.temperature !== weatherData.temperature || data.type !== weatherData.type)) {
+      if (weatherData) {
+        api2.trace("Weather changed", data);
+      }
+      setWeatherData(data);
+    }
+  }, [data, weatherData, api2]);
+  if (!weatherData) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(g0, { label: "weather-view", direction: "horz", valign: "center", children: [
+    weatherData.type !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(WeatherIcon, { type: weatherData.type }),
+    !!weatherData.temperature && /* @__PURE__ */ jsxRuntimeExports.jsxs(l4, { label: "temperature", size: "xxlarge", color: "xsubtle", children: [
+      weatherData.temperature,
+      "°"
+    ] })
+  ] });
+};
 const EntitiesScreen = () => {
   const entities = useEntities();
   const [selectedKey, setSelectedKey] = useState$1("");
@@ -105250,7 +105301,7 @@ async function updatePlugins(authToken) {
         {
           key: "base",
           pluginName: "base",
-          pluginVersion: "0.36.0",
+          pluginVersion: "0.43.0",
           pluginConfig: []
         }
       ],
@@ -105368,10 +105419,8 @@ const BoardProvider = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(UserConfigContext.Provider, { value: config2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(BoardStylesProvider, { zoom, transitionDelay, children }) });
 };
 const Command = ({ commandTitle }) => {
-  const userConfig = useUserConfig();
-  console.log("### USER CONFIG", userConfig);
+  useUserConfig();
   const api2 = getPluginApi();
-  console.log("!!! commands", api2.commands);
   const command = api2.commands.find((c2) => c2.title == commandTitle);
   if (!command) {
     return null;
@@ -105432,9 +105481,35 @@ const CommandGroup = ({ groupKey, title, align = "left" }) => {
   ] });
 };
 const CommandGroup$1 = CommandGroup;
+class ErrorBoundary extends React__default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error2) {
+    console.log("getDerivedStateFromError", error2);
+    return { hasError: true };
+  }
+  componentDidCatch(error2, errorInfo) {
+    console.log("componentDidCatch", error2, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          style: {
+            border: "1px solid red"
+          },
+          children: "#ERR"
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
 const Component = ({ integrationKey, componentKey }) => {
   const userConfig = useUserConfig();
-  console.log("### USER CONFIG", userConfig);
   const api2 = getPluginApi();
   const component = api2.integration(integrationKey).component(componentKey, {
     ...parsePropsForComponent(api2, []),
@@ -105446,7 +105521,7 @@ const Component = ({ integrationKey, componentKey }) => {
   if (component === null) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "aria-label": "component-not-found", children: "Component not found" });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "aria-label": "component", children: component || null });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "aria-label": "component", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { children: component || null }) });
 };
 function useAuthorization(email, password) {
   const [token2, setToken] = useState$1("");