@appkit/dek-lib 0.36.0 → 0.43.0

package/dist/index.umd.js

@@ -24535,6 +24535,7 @@ React keys must be passed directly to JSX without using spread:
   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,
@@ -46556,12 +46557,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
   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);
@@ -65530,146 +65526,15 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
       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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { attributeName: "transform", dur: "7s", repeatCount: "indefinite", type: "translate", values: "-3 0; 3 0; -3 0" })));
-  const SvgExceptional = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 32 32", repeatCount: "indefinite", to: "360 32 32", type: "rotate" })));
-  const SvgFog = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#d1d5db", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 58h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "0s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#d1d5db", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 52h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-4s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })));
-  const SvgHail = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 24, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 31, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 38, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })));
-  const SvgLightningRaining = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "#f59e0b", d: "M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z" }), /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "#f59e0b", d: "M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z" }), /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 19 24", repeatCount: "indefinite", to: "360 19 24", type: "rotate" }))), /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })));
-  const SvgRainy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })));
-  const SvgSnowyRainy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 24, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-2s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 24 45; 360 24 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-2s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 38, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-1s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 38 45; 360 38 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.08 45.01l-.16.98" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.08 45.01l-.16.98" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.5s", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.5s", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.08 45.01l-.16.98" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-1s", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })));
-  const SvgSnowy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 31, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "4s", repeatCount: "indefinite", type: "translate", values: "-1 -6; 1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 31 45; 360 31 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 24, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-2s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 24 45; 360 24 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-2s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 38, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-1s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 38 45; 360 38 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })));
-  const SvgSunny = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 32 32", repeatCount: "indefinite", to: "360 32 32", type: "rotate" })));
-  const SvgUnknown = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 32h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "0s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 39h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-2s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-3 0; 3 0; -3 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 25h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-4s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })));
-  const SvgWindyVariant = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("animate", { attributeName: "stroke-dashoffset", dur: "2s", repeatCount: "indefinite", values: "-57; 57" })), /* @__PURE__ */ React__namespace.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__namespace.createElement("animate", { attributeName: "stroke-dashoffset", begin: "-1.5s", dur: "2s", repeatCount: "indefinite", values: "-39; 39" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M21.5 39.5h9" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "0 0; 15 0" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M11.5 24.5h9" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-.3s", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "-3 0; 18 0" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-.3s", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M27.5 32h9" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-.6s", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "-6 0; 12 0" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-.6s", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })));
-  const SvgWindy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("animate", { attributeName: "stroke-dashoffset", dur: "2s", repeatCount: "indefinite", values: "-57; 57" })), /* @__PURE__ */ React__namespace.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__namespace.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$3.useState();
-    const data = transformWeatherData(entities["weather.forecast_home"]);
-    React$3.useEffect(() => {
-      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%;
@@ -65699,16 +65564,41 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
   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" })
     ] });
   };
@@ -70729,7 +70619,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
   })(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;
@@ -70737,7 +70627,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
   const BoardScreen = ({ children }) => {
     const previewConfig = usePreviewConfig();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Container$9,
+      Container$a,
       {
         "aria-label": "screen",
         $width: previewConfig == null ? void 0 : previewConfig.width,
@@ -74804,7 +74694,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     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;
@@ -74873,9 +74763,9 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
         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})`};
@@ -74920,7 +74810,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     speed = 1
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Container$7,
+      Container$8,
       {
         "aria-label": "blob-background",
         $colorStart: colorStart,
@@ -74929,7 +74819,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
       }
     );
   };
-  const Container$6 = styled.div`
+  const Container$7 = styled.div`
   height: 100vh;
   width: 100vw;
   background: ${(props) => `radial-gradient(${props.$colorStart}, ${props.$colorEnd})`};
@@ -75029,7 +74919,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     speed = 1
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Container$6,
+      Container$7,
       {
         "aria-label": "blurred-lights-background",
         $colorStart: colorStart,
@@ -75048,7 +74938,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
       }
     );
   };
-  const Container$5 = styled.div`
+  const Container$6 = styled.div`
   height: 100vh;
   width: 100vw;
   display: flex;
@@ -75082,7 +74972,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     speed = 0.5
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Container$5,
+      Container$6,
       {
         "aria-label": "gradient-background",
         $colorStart: colorStart,
@@ -75091,7 +74981,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
       }
     );
   };
-  const Container$4 = styled.div`
+  const Container$5 = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -75158,9 +75048,9 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     };
     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(
@@ -75241,7 +75131,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     speed = 30
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Container$3,
+      Container$4,
       {
         "aria-label": "slant-background",
         $colorStart: colorStart,
@@ -75254,7 +75144,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
       }
     );
   };
-  const Container$2 = styled.div`
+  const Container$3 = styled.div`
   height: 100vh;
   width: 100vw;
   background: ${(props) => `radial-gradient(
@@ -75319,7 +75209,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     tide = 3
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Container$2,
+      Container$3,
       {
         "aria-label": "wave-background",
         $colorStart: colorStart,
@@ -101245,6 +101135,28 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
           }
         }
       });
+      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(
@@ -101281,7 +101193,24 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
         },
         {
           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",
@@ -104690,6 +104619,12 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
       state: data.state
     };
   }
+  const state = proxy({
+    entities: {}
+  });
+  const useEntities = () => {
+    return useSnapshot(state).entities;
+  };
   const EntityButton = ({
     title,
     entityId,
@@ -104808,7 +104743,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     }
     return entities[entityId];
   };
-  const Container$1 = styled.div`
+  const Container$2 = styled.div`
   display: flex;
   aspect-ratio: 1;
   ${({ $large }) => {
@@ -104822,7 +104757,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
   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,
@@ -105056,6 +104991,122 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
       }
     );
   };
+  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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { attributeName: "transform", dur: "7s", repeatCount: "indefinite", type: "translate", values: "-3 0; 3 0; -3 0" })));
+  const SvgExceptional = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 32 32", repeatCount: "indefinite", to: "360 32 32", type: "rotate" })));
+  const SvgFog = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#d1d5db", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 58h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "0s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#d1d5db", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 52h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-4s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })));
+  const SvgHail = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 24, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 31, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 38, cy: 45, r: 1.5, fill: "#72b8d4" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.6s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 18; -4 14" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.6s", repeatCount: "indefinite", values: "1;1;0" })));
+  const SvgLightningRaining = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "#f59e0b", d: "M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z" }), /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "#f59e0b", d: "M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z" }), /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 19 24", repeatCount: "indefinite", to: "360 19 24", type: "rotate" }))), /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })));
+  const SvgRainy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.4s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.39 43.03l-.78 4.94" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.2s", dur: "0.7s", repeatCount: "indefinite", values: "0;1;1;0" })));
+  const SvgSnowyRainy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 24, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-2s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 24 45; 360 24 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-2s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 38, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-1s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 38 45; 360 38 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M24.08 45.01l-.16.98" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M31.08 45.01l-.16.98" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-0.5s", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-0.5s", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#2885c7", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 2, d: "M38.08 45.01l-.16.98" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-1s", dur: "1.5s", repeatCount: "indefinite", type: "translate", values: "1 -5; -2 10" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "1.5s", repeatCount: "indefinite", values: "0;1;1;0" })));
+  const SvgSnowy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 31, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "4s", repeatCount: "indefinite", type: "translate", values: "-1 -6; 1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 31 45; 360 31 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 24, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-2s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 24 45; 360 24 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-2s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 38, cy: 45, r: 1.25, fill: "none", stroke: "#72b8d4", strokeMiterlimit: 10 }), /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", begin: "-1s", dur: "4s", repeatCount: "indefinite", type: "translate", values: "1 -6; -1 12" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { additive: "sum", attributeName: "transform", dur: "9s", repeatCount: "indefinite", type: "rotate", values: "0 38 45; 360 38 45" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-1s", dur: "4s", repeatCount: "indefinite", values: "0;1;1;1;0" })));
+  const SvgSunny = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.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__namespace.createElement("animateTransform", { attributeName: "transform", dur: "45s", from: "0 32 32", repeatCount: "indefinite", to: "360 32 32", type: "rotate" })));
+  const SvgUnknown = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 32h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "0s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 39h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-2s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-3 0; 3 0; -3 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#e5e7eb", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M17 25h30" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-4s", dur: "5s", repeatCount: "indefinite", type: "translate", values: "-4 0; 4 0; -4 0" })));
+  const SvgWindyVariant = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("animate", { attributeName: "stroke-dashoffset", dur: "2s", repeatCount: "indefinite", values: "-57; 57" })), /* @__PURE__ */ React__namespace.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__namespace.createElement("animate", { attributeName: "stroke-dashoffset", begin: "-1.5s", dur: "2s", repeatCount: "indefinite", values: "-39; 39" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M21.5 39.5h9" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "0 0; 15 0" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M11.5 24.5h9" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-.3s", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "-3 0; 18 0" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-.3s", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })), /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { fill: "none", stroke: "#fde68a", strokeLinecap: "round", strokeMiterlimit: 10, strokeWidth: 3, d: "M27.5 32h9" }), /* @__PURE__ */ React__namespace.createElement("animateTransform", { attributeName: "transform", begin: "-.6s", dur: ".9s", repeatCount: "indefinite", type: "translate", values: "-6 0; 12 0" }), /* @__PURE__ */ React__namespace.createElement("animate", { attributeName: "opacity", begin: "-.6s", dur: ".9s", repeatCount: "indefinite", values: "0; 1; 1; 1; 0" })));
+  const SvgWindy = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", ...props }, /* @__PURE__ */ React__namespace.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__namespace.createElement("animate", { attributeName: "stroke-dashoffset", dur: "2s", repeatCount: "indefinite", values: "-57; 57" })), /* @__PURE__ */ React__namespace.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__namespace.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$3.useState();
+    const data = transformWeatherData(entities["weather.forecast_home"]);
+    React$3.useEffect(() => {
+      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] = React$3.useState("");
@@ -105267,7 +105318,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
           {
             key: "base",
             pluginName: "base",
-            pluginVersion: "0.36.0",
+            pluginVersion: "0.43.0",
             pluginConfig: []
           }
         ],
@@ -105385,10 +105436,8 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     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;
@@ -105449,9 +105498,35 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     ] });
   };
   const CommandGroup$1 = CommandGroup;
+  class ErrorBoundary extends React$3.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, []),
@@ -105463,7 +105538,7 @@ Arguments: ` + Array.prototype.slice.call(n2).join("") + `
     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] = React$3.useState("");