@elmethis/qwik 1.0.0-alpha.24 → 1.0.0-alpha.25

package/lib/index.qwik.mjs

@@ -20,25 +20,25 @@ import { zodToJsonSchema } from "zod-to-json-schema";
 import { v7 } from "uuid";
 import autoAnimate from "@formkit/auto-animate";
 import { cloneDeep, isEqual, kebabCase } from "es-toolkit";
-const tab = "_tab_4ntkf_14";
-const active$3 = "_active_4ntkf_38";
-const styles$U = {
-  "elm-tabs": "_elm-tabs_4ntkf_1",
-  "tab-container": "_tab-container_4ntkf_14",
+const tab = "_tab_1fco0_14";
+const active$3 = "_active_1fco0_37";
+const styles$T = {
+  "elm-tabs": "_elm-tabs_1fco0_1",
+  "tab-container": "_tab-container_1fco0_14",
   tab,
   active: active$3,
-  "tab-content": "_tab-content_4ntkf_49",
-  "tab-content-inner": "_tab-content-inner_4ntkf_54"
+  "tab-content": "_tab-content_1fco0_48",
+  "tab-content-inner": "_tab-content-inner_1fco0_53"
 };
 const row$2 = "_row_12wiu_5";
-const open$2 = "_open_12wiu_11";
+const open$1 = "_open_12wiu_11";
 const column$2 = "_column_12wiu_16";
 const both = "_both_12wiu_27";
 const inner = "_inner_12wiu_44";
-const styles$T = {
+const styles$S = {
   "elm-collapse": "_elm-collapse_12wiu_1",
   row: row$2,
-  open: open$2,
+  open: open$1,
   column: column$2,
   both,
   inner
@@ -55,12 +55,12 @@ const ElmCollapse = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
   ]);
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$T["elm-collapse"],
+      styles$S["elm-collapse"],
       {
-        [styles$T["open"]]: _rawProps.isOpen,
-        [styles$T["row"]]: (_rawProps.direction ?? "row") === "row",
-        [styles$T["column"]]: (_rawProps.direction ?? "row") === "column",
-        [styles$T["both"]]: (_rawProps.direction ?? "row") === "both"
+        [styles$S["open"]]: _rawProps.isOpen,
+        [styles$S["row"]]: (_rawProps.direction ?? "row") === "row",
+        [styles$S["column"]]: (_rawProps.direction ?? "row") === "column",
+        [styles$S["both"]]: (_rawProps.direction ?? "row") === "both"
       },
       _rawProps.class
     ],
@@ -69,7 +69,7 @@ const ElmCollapse = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
     ]),
     ..._getVarProps(props)
   }, _getConstProps(props), /* @__PURE__ */ _jsxSorted("div", null, {
-    class: styles$T["inner"]
+    class: styles$S["inner"]
   }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "iE_0"), 1, null), 0, "iE_1");
 }, "ElmCollapse_component_P0XF5bWlJxw"));
 function useBindableSignal({ signal, defaultValue }) {
@@ -95,7 +95,7 @@ const ElmTabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
   });
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$U["elm-tabs"],
+      styles$T["elm-tabs"],
       props.class
     ],
     ..._getVarProps(rest)
@@ -107,7 +107,7 @@ const ElmTabList = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
   ]);
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$U["tab-container"],
+      styles$T["tab-container"],
       _rawProps.class
     ],
     ..._getVarProps(rest)
@@ -128,9 +128,9 @@ const ElmTab = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
   ]);
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$U["tab"],
+      styles$T["tab"],
       {
-        [styles$U["active"]]: ctx.selectedValue.value === props.value
+        [styles$T["active"]]: ctx.selectedValue.value === props.value
       },
       props.class
     ],
@@ -146,7 +146,7 @@ const ElmTabPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   const ctx = useContext(ElmTabsContext);
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$U["tab-content"],
+      styles$T["tab-content"],
       props.class
     ],
     ..._getVarProps(rest)
@@ -158,33 +158,31 @@ const ElmTabPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     ]),
     transitionTimingFunction: _wrapProp(ctx, "transitionTimingFunction")
   }, /* @__PURE__ */ _jsxSorted("div", null, {
-    class: styles$U["tab-content-inner"]
+    class: styles$T["tab-content-inner"]
   }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "lK_6"), 1, null), 1, "lK_7"), 0, "lK_8");
 }, "ElmTabPanel_component_4GhH207NkRY"));
-const h1 = "_h1_tvnol_13";
-const h2 = "_h2_tvnol_35";
-const h2__underline = "_h2__underline_tvnol_61";
-const h3 = "_h3_tvnol_72";
-const h4 = "_h4_tvnol_87";
-const h5 = "_h5_tvnol_91";
-const h6 = "_h6_tvnol_95";
-const styles$S = {
-  "heading-common": "_heading-common_tvnol_1",
+const h1 = "_h1_9vw8y_13";
+const h2 = "_h2_9vw8y_35";
+const h3 = "_h3_9vw8y_72";
+const h4 = "_h4_9vw8y_87";
+const h5 = "_h5_9vw8y_91";
+const h6 = "_h6_9vw8y_95";
+const styles$R = {
+  "elm-heading": "_elm-heading_9vw8y_1",
   h1,
   h2,
-  h2__underline,
+  "h2-underline": "_h2-underline_9vw8y_61",
   h3,
   h4,
   h5,
   h6
 };
-const text$3 = "_text_zme4t_1";
+const text$2 = "_text_zme4t_1";
 const textStyles = {
-  text: text$3
+  text: text$2
 };
-const fragment = "_fragment_mrfz3_1";
-const styles$R = {
-  fragment
+const styles$Q = {
+  "elm-fragment-identifier": "_elm-fragment-identifier_xb2v4_1"
 };
 const ElmFragmentIdentifier = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
@@ -204,7 +202,7 @@ const ElmFragmentIdentifier = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlin
   }, "ElmFragmentIdentifier_component_handleHashClick_0I1su3qeCsY");
   return /* @__PURE__ */ _jsxSplit("span", {
     class: [
-      styles$R.fragment,
+      styles$Q["elm-fragment-identifier"],
       _rawProps.class
     ],
     "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2, handleHashClick2) => handleHashClick2(_rawProps2.id), "ElmFragmentIdentifier_component_span_q_e_click_acZZ1kAS1Ek"),
@@ -234,9 +232,9 @@ const ElmHeading = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
   const Tag = `h${_rawProps.level}`;
   return /* @__PURE__ */ _jsxSplit(Tag, {
     class: [
-      styles$S["heading-common"],
+      styles$R["elm-heading"],
       textStyles.text,
-      styles$S[`h${_rawProps.level}`],
+      styles$R[`h${_rawProps.level}`],
       _rawProps.class
     ],
     style: {
@@ -256,24 +254,22 @@ const ElmHeading = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
       id: _wrapProp(_rawProps, "id")
     }, null, 3, "sL_1"), 1, "sL_2"),
     _rawProps.level === 2 && /* @__PURE__ */ _jsxSorted("span", null, {
-      class: styles$S["h2__underline"],
+      class: styles$R["h2-underline"],
       "aria-hidden": "true"
     }, null, 3, "sL_3")
   ], 0, "sL_4");
 }, "ElmHeading_component_O0GozTFBBog"));
-const text$2 = "_text_1yr55_1";
-const code$2 = "_code_1yr55_13";
-const kbd = "_kbd_1yr55_25";
-const link$1 = "_link_1yr55_59";
-const styles$Q = {
-  text: text$2,
-  code: code$2,
+const code$1 = "_code_uf3sg_13";
+const kbd = "_kbd_uf3sg_25";
+const link$1 = "_link_uf3sg_58";
+const styles$P = {
+  "elm-inline-text": "_elm-inline-text_uf3sg_1",
+  code: code$1,
   kbd,
   link: link$1
 };
-const icon$7 = "_icon_g4tb3_1";
-const styles$P = {
-  icon: icon$7
+const styles$O = {
+  "elm-inline-icon": "_elm-inline-icon_1qs0i_1"
 };
 const _hf0$Q = (p0) => p0.width ?? p0.size ?? 16;
 const _hf1$i = (p0) => p0.height ?? p0.size ?? 16;
@@ -288,7 +284,7 @@ const ElmInlineIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
   ]);
   return /* @__PURE__ */ _jsxSplit("span", {
     class: [
-      styles$P.icon,
+      styles$O["elm-inline-icon"],
       _rawProps.class
     ],
     ..._getVarProps(props)
@@ -302,7 +298,7 @@ const ElmInlineIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
       _rawProps
     ])
   }, {
-    class: styles$P.icon
+    class: styles$O["elm-inline-icon"]
   }, null, 3, null), 0, "D4_0");
 }, "ElmInlineIcon_component_9LkENpSGozA"));
 const _hf0$P = (p0) => ({
@@ -333,7 +329,7 @@ const ElmInlineText = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
     vnode = /* @__PURE__ */ _jsxSorted("a", {
       href: _wrapProp(_rawProps, "href")
     }, {
-      class: styles$Q.link,
+      class: styles$P.link,
       target: "_blank",
       rel: "noopener noreferrer"
     }, [
@@ -345,18 +341,18 @@ const ElmInlineText = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
     ], 1, "7t_2");
   }
   if (_rawProps.kbd ?? false) vnode = /* @__PURE__ */ _jsxSorted("kbd", null, {
-    class: styles$Q.kbd
+    class: styles$P.kbd
   }, vnode, 1, "7t_3");
   if (_rawProps.strikethrough ?? false) vnode = /* @__PURE__ */ _jsxSorted("del", null, null, vnode, 1, "7t_4");
   if (_rawProps.italic ?? false) vnode = /* @__PURE__ */ _jsxSorted("em", null, null, vnode, 1, "7t_5");
   if (_rawProps.underline ?? false) vnode = /* @__PURE__ */ _jsxSorted("ins", null, null, vnode, 1, "7t_6");
   if (_rawProps.bold ?? false) vnode = /* @__PURE__ */ _jsxSorted("strong", null, null, vnode, 1, "7t_7");
   if (_rawProps.code ?? false) vnode = /* @__PURE__ */ _jsxSorted("code", null, {
-    class: styles$Q.code
+    class: styles$P.code
   }, vnode, 1, "7t_8");
   if (_rawProps.ruby) {
     vnode = /* @__PURE__ */ _jsxSorted("ruby", null, {
-      class: styles$Q.text
+      class: styles$P["elm-inline-text"]
     }, [
       /* @__PURE__ */ _jsxSorted("span", null, null, vnode, 1, null),
       /* @__PURE__ */ _jsxSorted("rt", null, null, _wrapProp(_rawProps, "ruby"), 1, null)
@@ -364,7 +360,7 @@ const ElmInlineText = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
   }
   return /* @__PURE__ */ _jsxSplit("span", {
     class: [
-      styles$Q.text,
+      styles$P["elm-inline-text"],
       textStyles.text,
       _rawProps.class
     ],
@@ -374,9 +370,8 @@ const ElmInlineText = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
     ..._getVarProps(rest)
   }, _getConstProps(rest), vnode, 0, "7t_10");
 }, "ElmInlineText_component_MdjKbLJ3SR0"));
-const paragraph = "_paragraph_gxg3e_1";
-const styles$O = {
-  paragraph
+const styles$N = {
+  "elm-paragraph": "_elm-paragraph_rbsk5_1"
 };
 const _hf0$O = (p0) => ({
   ...p0.style,
@@ -392,7 +387,7 @@ const ElmParagraph = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
   ]);
   return /* @__PURE__ */ _jsxSplit("p", {
     class: [
-      styles$O.paragraph,
+      styles$N["elm-paragraph"],
       textStyles.text,
       _rawProps.class
     ],
@@ -406,10 +401,10 @@ const surface$1 = "_surface_4ps3c_5";
 const row$1 = "_row_4ps3c_47";
 const column$1 = "_column_4ps3c_53";
 const list = "_list_4ps3c_64";
-const card = "_card_4ps3c_81";
-const button$1 = "_button_4ps3c_91";
+const card$1 = "_card_4ps3c_81";
+const button = "_button_4ps3c_91";
 const image$3 = "_image_4ps3c_122";
-const icon$6 = "_icon_4ps3c_130";
+const icon$4 = "_icon_4ps3c_130";
 const divider$2 = "_divider_4ps3c_139";
 const label$1 = "_label_4ps3c_161";
 const input$2 = "_input_4ps3c_167";
@@ -418,7 +413,7 @@ const slider = "_slider_4ps3c_192";
 const modal = "_modal_4ps3c_199";
 const video = "_video_4ps3c_209";
 const audio = "_audio_4ps3c_210";
-const styles$N = {
+const styles$M = {
   "elm-a2ui": "_elm-a2ui_4ps3c_1",
   surface: surface$1,
   row: row$1,
@@ -427,11 +422,11 @@ const styles$N = {
   list,
   "list-horizontal": "_list-horizontal_4ps3c_71",
   "list-item": "_list-item_4ps3c_75",
-  card,
-  button: button$1,
+  card: card$1,
+  button,
   "button-primary": "_button-primary_4ps3c_110",
   image: image$3,
-  icon: icon$6,
+  icon: icon$4,
   divider: divider$2,
   "divider-vertical": "_divider-vertical_4ps3c_145",
   "text-field": "_text-field_4ps3c_155",
@@ -555,28 +550,28 @@ const basicCatalog = new CatalogRenderer([
       alignItems: alignItemsMap[_rawProps.props.align ?? "center"]
     }
   }, {
-    class: styles$N.row
+    class: styles$M.row
   }, _rawProps.childRefs(_rawProps.props.children).map(({ id, path: path2 }, i) => /* @__PURE__ */ _jsxSorted("span", null, {
-    class: styles$N["child-wrap"]
+    class: styles$M["child-wrap"]
   }, _rawProps.renderChild(id, path2, i), 1, `${id}:${i}`)), 1, "Lh_3")),
   defineRenderer(ColumnApi, (_rawProps) => /* @__PURE__ */ _jsxSorted("div", null, {
-    class: styles$N.column,
+    class: styles$M.column,
     style: {
       "--margin-block": "2rem"
     }
   }, _rawProps.childRefs(_rawProps.props.children).map(({ id, path: path2 }, i) => /* @__PURE__ */ _jsxSorted("span", null, {
-    class: styles$N["child-wrap"]
+    class: styles$M["child-wrap"]
   }, _rawProps.renderChild(id, path2, i), 1, `${id}:${i}`)), 1, "Lh_4")),
   defineRenderer(ListApi, (_rawProps) => /* @__PURE__ */ _jsxSorted("div", {
     class: [
-      styles$N.list,
-      _rawProps.props.direction === "horizontal" && styles$N["list-horizontal"]
+      styles$M.list,
+      _rawProps.props.direction === "horizontal" && styles$M["list-horizontal"]
     ]
   }, null, _rawProps.childRefs(_rawProps.props.children).map(({ id, path: path2 }, i) => /* @__PURE__ */ _jsxSorted("div", null, {
-    class: styles$N["list-item"]
+    class: styles$M["list-item"]
   }, _rawProps.renderChild(id, path2, i), 1, `${id}:${i}`)), 1, "Lh_5")),
   defineRenderer(CardApi, (_rawProps) => /* @__PURE__ */ _jsxSorted("div", null, {
-    class: styles$N.card
+    class: styles$M.card
   }, _rawProps.renderChild(_rawProps.props.child), 1, "Lh_6")),
   // Rendered as a div-with-role rather than a native <button> because the
   // A2UI `child` can be any component (Row, Column, Card, etc.), and those
@@ -584,8 +579,8 @@ const basicCatalog = new CatalogRenderer([
   // SSR validator (Q12).
   defineRenderer(ButtonApi, (_rawProps) => /* @__PURE__ */ _jsxSorted("div", {
     class: [
-      styles$N.button,
-      _rawProps.props.variant === "primary" && styles$N["button-primary"]
+      styles$M.button,
+      _rawProps.props.variant === "primary" && styles$M["button-primary"]
     ],
     "q-e:click": _rawProps.props.action ? () => _rawProps.dispatchAction$("action") : void 0,
     "q-e:keydown": _rawProps.props.action ? (e) => {
@@ -607,7 +602,7 @@ const basicCatalog = new CatalogRenderer([
         objectFit: objectFitMap[_rawProps.props.fit ?? "cover"]
       }
     }, {
-      class: styles$N.image
+      class: styles$M.image
     }, null, 3, "Lh_8")
   )),
   defineRenderer(IconApi, (_rawProps) => {
@@ -616,13 +611,13 @@ const basicCatalog = new CatalogRenderer([
       "aria-label": name,
       "data-icon": name
     }, {
-      class: styles$N.icon
+      class: styles$M.icon
     }, null, 3, "Lh_9");
   }),
   defineRenderer(DividerApi, (_rawProps) => /* @__PURE__ */ _jsxSorted("div", {
     class: [
-      styles$N.divider,
-      _rawProps.props.axis === "vertical" && styles$N["divider-vertical"]
+      styles$M.divider,
+      _rawProps.props.axis === "vertical" && styles$M["divider-vertical"]
     ]
   }, {
     role: "separator"
@@ -631,10 +626,10 @@ const basicCatalog = new CatalogRenderer([
     const variant = _rawProps.props.variant ?? "shortText";
     const value = _rawProps.props.value ? _rawProps.resolve(_rawProps.props.value) : "";
     return /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$N["text-field"]
+      class: styles$M["text-field"]
     }, [
       /* @__PURE__ */ _jsxSorted("label", null, {
-        class: styles$N.label
+        class: styles$M.label
       }, _rawProps.resolve(_rawProps.props.label), 1, null),
       variant === "longText" ? /* @__PURE__ */ _jsxSorted("textarea", {
         "q-e:change": /* @__PURE__ */ inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", el.value), "basicCatalog_defineRenderer_div_textarea_q_e_change_AvRxzHDOuzE"),
@@ -642,7 +637,7 @@ const basicCatalog = new CatalogRenderer([
         "q:p": _rawProps,
         value
       }, {
-        class: styles$N.input
+        class: styles$M.input
       }, null, 6, "Lh_11") : /* @__PURE__ */ _jsxSorted("input", {
         "q-e:change": /* @__PURE__ */ inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", el.value), "basicCatalog_defineRenderer_div_input_q_e_change_d4MNBikoI0c"),
         "q-e:input": /* @__PURE__ */ inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", el.value), "basicCatalog_defineRenderer_div_input_q_e_input_XTp8fL9T8eo"),
@@ -650,14 +645,14 @@ const basicCatalog = new CatalogRenderer([
         type: textFieldInputType[variant] ?? "text",
         value
       }, {
-        class: styles$N.input
+        class: styles$M.input
       }, null, 6, "Lh_12")
     ], 1, "Lh_13");
   }),
   defineRenderer(CheckBoxApi, (_rawProps) => {
     const checked2 = typeof _rawProps.props.value === "boolean" ? _rawProps.props.value : Boolean(_rawProps.ctx.dataContext.resolveDynamicValue(_rawProps.props.value) ?? false);
     return /* @__PURE__ */ _jsxSorted("label", null, {
-      class: styles$N.checkbox
+      class: styles$M.checkbox
     }, [
       /* @__PURE__ */ _jsxSorted("input", {
         checked: checked2,
@@ -667,7 +662,7 @@ const basicCatalog = new CatalogRenderer([
         type: "checkbox"
       }, null, 6, null),
       /* @__PURE__ */ _jsxSorted("span", null, {
-        class: styles$N["checkbox-label"]
+        class: styles$M["checkbox-label"]
       }, _rawProps.resolve(_rawProps.props.label), 1, null)
     ], 1, "Lh_14");
   }),
@@ -685,7 +680,7 @@ const basicCatalog = new CatalogRenderer([
       "q:p": _rawProps,
       value
     }, {
-      class: styles$N.slider,
+      class: styles$M.slider,
       type: "range"
     }, null, 6, "Lh_15");
   }),
@@ -700,23 +695,23 @@ const basicCatalog = new CatalogRenderer([
     }, null, _rawProps.renderChild(tab2.child), 1, idx))
   ], 1, "Lh_17")),
   defineRenderer(ModalApi, (_rawProps) => /* @__PURE__ */ _jsxSorted("div", null, {
-    class: styles$N.modal
+    class: styles$M.modal
   }, [
     _rawProps.renderChild(_rawProps.props.trigger),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$N["modal-content"]
+      class: styles$M["modal-content"]
     }, _rawProps.renderChild(_rawProps.props.content), 1, null)
   ], 1, "Lh_18")),
   defineRenderer(VideoApi, (_rawProps) => /* @__PURE__ */ _jsxSorted("video", {
     src: _rawProps.resolve(_rawProps.props.url)
   }, {
-    class: styles$N.video,
+    class: styles$M.video,
     controls: true
   }, null, 3, "Lh_19")),
   defineRenderer(AudioPlayerApi, (_rawProps) => /* @__PURE__ */ _jsxSorted("audio", {
     src: _rawProps.resolve(_rawProps.props.url)
   }, {
-    class: styles$N.audio,
+    class: styles$M.audio,
     controls: true
   }, null, 3, "Lh_20")),
   defineRenderer(ChoicePickerApi, (_rawProps) => {
@@ -725,23 +720,23 @@ const basicCatalog = new CatalogRenderer([
     const multi = (_rawProps.props.variant ?? "mutuallyExclusive") === "multipleSelection";
     return /* @__PURE__ */ _jsxSorted("div", {
       "data-choice-picker": _wrapProp(_rawProps, "componentId"),
-      "q-e:change": /* @__PURE__ */ inlinedQrl((_e, wrapper2, _rawProps2) => {
-        const inputs = wrapper2.querySelectorAll("input");
+      "q-e:change": /* @__PURE__ */ inlinedQrl((_e, wrapper, _rawProps2) => {
+        const inputs = wrapper.querySelectorAll("input");
         const isMulti = inputs.length > 0 && inputs[0].type === "checkbox";
-        const checked2 = Array.from(wrapper2.querySelectorAll("input:checked")).map((i) => i.value);
+        const checked2 = Array.from(wrapper.querySelectorAll("input:checked")).map((i) => i.value);
         return _rawProps2.setBinding$("value", isMulti ? checked2 : checked2.slice(0, 1));
       }, "basicCatalog_defineRenderer_div_q_e_change_HaNxxdy0Z1g"),
       "q:p": _rawProps
     }, {
-      class: styles$N["choice-picker"]
+      class: styles$M["choice-picker"]
     }, [
       _rawProps.props.label ? /* @__PURE__ */ _jsxSorted("span", null, {
-        class: styles$N["choice-picker-label"]
+        class: styles$M["choice-picker-label"]
       }, _rawProps.resolve(_rawProps.props.label), 1, "Lh_21") : null,
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$N["choice-picker-options"]
+        class: styles$M["choice-picker-options"]
       }, _rawProps.props.options.map((opt) => /* @__PURE__ */ _jsxSorted("label", null, {
-        class: styles$N["choice-picker-option"]
+        class: styles$M["choice-picker-option"]
       }, [
         /* @__PURE__ */ _jsxSorted("input", {
           checked: selected.includes(opt.value),
@@ -758,10 +753,10 @@ const basicCatalog = new CatalogRenderer([
     const enableTime = _rawProps.props.enableTime ?? false;
     const inputType = enableDate && enableTime ? "datetime-local" : enableDate ? "date" : enableTime ? "time" : "text";
     return /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$N["datetime-input"]
+      class: styles$M["datetime-input"]
     }, [
       _rawProps.props.label ? /* @__PURE__ */ _jsxSorted("label", null, {
-        class: styles$N.label
+        class: styles$M.label
       }, _rawProps.resolve(_rawProps.props.label), 1, "Lh_23") : null,
       /* @__PURE__ */ _jsxSorted("input", {
         max: _rawProps.props.max != null ? String(_rawProps.props.max) : void 0,
@@ -772,7 +767,7 @@ const basicCatalog = new CatalogRenderer([
         type: inputType,
         value: _rawProps.props.value ? _rawProps.resolve(_rawProps.props.value) : ""
       }, {
-        class: styles$N.input
+        class: styles$M.input
       }, null, 6, null)
     ], 1, "Lh_24");
   })
@@ -1005,7 +1000,7 @@ const A2uiSurface = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   useContextProvider(A2uiSurfaceContext, props.surface);
   useContextProvider(A2uiAncestorContext, []);
   return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: styles$N.surface,
+    class: styles$M.surface,
     style: {
       "--elmethis-margin-block-start": "2rem"
     }
@@ -1018,7 +1013,7 @@ const SurfaceView = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   useContextProvider(A2uiSurfaceContext, props.surface);
   useContextProvider(A2uiAncestorContext, []);
   return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: styles$N.surface,
+    class: styles$M.surface,
     style: {
       "--elmethis-margin-block-start": "2rem"
     }
@@ -1162,7 +1157,7 @@ const ElmA2ui = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
   ]));
   return /* @__PURE__ */ _jsxSorted("div", {
     class: [
-      styles$N["elm-a2ui"],
+      styles$M["elm-a2ui"],
       props.class
     ],
     style: _wrapProp(props, "style")
@@ -1170,9 +1165,8 @@ const ElmA2ui = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     surface: noSerialize(surface2)
   }, null, null, 3, surface2.id)), 1, "pJ_4");
 }, "ElmA2ui_component_JeVykabE5oE"));
-const katex = "_katex_19jd6_1";
-const styles$M = {
-  katex
+const styles$L = {
+  "elm-katex": "_elm-katex_189xe_1"
 };
 const _hf0$M = (p0) => p0.value ?? "";
 const ElmKatex = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1193,7 +1187,7 @@ const ElmKatex = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
       textStyles.text,
-      props.block ? styles$M.katex : void 0,
+      props.block ? styles$L["elm-katex"] : void 0,
       props.class
     ],
     dangerouslySetInnerHTML: _fnSignal(_hf0$M, [
@@ -1202,16 +1196,16 @@ const ElmKatex = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
     ..._getVarProps(rest)
   }, _getConstProps(rest), null, 0, "FX_0");
 }, "ElmKatex_component_83EW4M1WU0k"));
-const caption$1 = "_caption_yx3l5_22";
-const divider$1 = "_divider_yx3l5_33";
-const code$1 = "_code_yx3l5_1";
-const styles$L = {
-  "code-block": "_code-block_yx3l5_1",
-  "language-icon": "_language-icon_yx3l5_17",
+const caption$1 = "_caption_xdmlc_22";
+const divider$1 = "_divider_xdmlc_33";
+const code = "_code_xdmlc_40";
+const styles$K = {
+  "elm-code-block": "_elm-code-block_xdmlc_1",
+  "language-icon": "_language-icon_xdmlc_17",
   caption: caption$1,
-  "copy-icon": "_copy-icon_yx3l5_29",
+  "copy-icon": "_copy-icon_xdmlc_29",
   divider: divider$1,
-  code: code$1
+  code
 };
 const _hf0$L = (p0) => p0.size ?? 24;
 const Rust = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
@@ -1286,7 +1280,7 @@ const Typescript = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
   ], 0, "Os_0");
 }, "Typescript_component_nLU7Qpu0u0k"));
 const path = "_path_1aa0a_1";
-const styles$K = {
+const styles$J = {
   path
 };
 const _hf0$I = (p0) => p0.size ?? 24;
@@ -1310,7 +1304,7 @@ const Bash = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps)
       d: "M4.24 4.24h119.53v119.53H4.24z"
     }, null, 3, null),
     /* @__PURE__ */ _jsxSorted("path", null, {
-      class: styles$K.path,
+      class: styles$J.path,
       d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
     }, null, 3, null),
     /* @__PURE__ */ _jsxSorted("path", null, {
@@ -1837,9 +1831,8 @@ const C = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) =>
     }, null, 3, null)
   ], 0, "gG_0");
 }, "C_component_8furXfuHI4I"));
-const icon$5 = "_icon_1g5oq_1";
-const styles$J = {
-  icon: icon$5
+const styles$I = {
+  "elm-mdi-icon": "_elm-mdi-icon_ihskx_1"
 };
 const _hf0$t = (p0) => ({
   "--elmethis-scoped-color": p0.lightColor ?? p0.color ?? "currentColor",
@@ -1860,7 +1853,7 @@ const ElmMdiIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
   ]);
   return /* @__PURE__ */ _jsxSplit("svg", {
     class: [
-      styles$J.icon,
+      styles$I["elm-mdi-icon"],
       _rawProps.class
     ],
     style: _fnSignal(_hf0$t, [
@@ -1977,9 +1970,8 @@ const ElmLanguageIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(
     style: _wrapProp(_rawProps, "style")
   }, null, 3, "bu_1");
 }, "ElmLanguageIcon_component_nXOhYnvIKLk"));
-const code = "_code_1lqau_1";
-const styles$I = {
-  code
+const styles$H = {
+  "elm-shiki-highlighter": "_elm-shiki-highlighter_j5tas_1"
 };
 const ElmShikiHighlighter = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
@@ -2018,16 +2010,16 @@ const ElmShikiHighlighter = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
   ]));
   return /* @__PURE__ */ _jsxSplit("pre", {
     class: [
-      styles$I.code,
+      styles$H["elm-shiki-highlighter"],
       _rawProps.class
     ],
     dangerouslySetInnerHTML: _wrapProp(rawHtml),
     ..._getVarProps(props)
   }, _getConstProps(props), null, 0, "ZN_0");
 }, "ElmShikiHighlighter_component_vKuHJZdaUdo"));
-const styles$H = {
-  "use-clipboard": "_use-clipboard_1nork_1",
-  "use-clipboard-icon-copied": "_use-clipboard-icon-copied_1nork_16"
+const styles$G = {
+  "use-clipboard": "_use-clipboard_mb0qt_1",
+  "use-clipboard-icon-copied": "_use-clipboard-icon-copied_mb0qt_15"
 };
 const useClipboard = (options) => {
   const copied = useSignal(false);
@@ -2064,7 +2056,7 @@ const useClipboard = (options) => {
     const copied2 = _captures[0], copy2 = _captures[1], options2 = _captures[2];
     return /* @__PURE__ */ _jsxSorted("span", {
       class: [
-        styles$H["use-clipboard"],
+        styles$G["use-clipboard"],
         options2.class
       ],
       style: _wrapProp(options2, "style")
@@ -2073,7 +2065,7 @@ const useClipboard = (options) => {
     }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, {
       class: [
         {
-          [styles$H["use-clipboard-icon-copied"]]: copied2.value
+          [styles$G["use-clipboard-icon-copied"]]: copied2.value
         }
       ],
       d: copied2.value ? mdiClipboardCheckOutline : mdiClipboardOutline
@@ -2104,20 +2096,20 @@ const ElmCodeBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
   });
   return /* @__PURE__ */ _jsxSplit("figure", {
     class: [
-      styles$L["code-block"],
+      styles$K["elm-code-block"],
       _rawProps.class
     ],
     ..._getVarProps(props)
   }, _getConstProps(props), [
     /* @__PURE__ */ _jsxSorted("span", null, {
-      class: styles$L["language-icon"]
+      class: styles$K["language-icon"]
     }, /* @__PURE__ */ _jsxSorted(ElmLanguageIcon, null, {
       language: _fnSignal(_hf0$r, [
         _rawProps
       ])
     }, null, 3, "sK_0"), 1, null),
     /* @__PURE__ */ _jsxSorted("span", null, {
-      class: styles$L.caption
+      class: styles$K.caption
     }, /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, [
       _fnSignal(_hf1$f, [
         _rawProps
@@ -2125,13 +2117,13 @@ const ElmCodeBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
       /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "sK_1")
     ], 1, "sK_2"), 1, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$L["copy-icon"]
+      class: styles$K["copy-icon"]
     }, /* @__PURE__ */ _jsxSorted(clipboard.CopyButton, null, null, null, 3, "sK_3"), 1, null),
     /* @__PURE__ */ _jsxSorted("hr", null, {
-      class: styles$L.divider
+      class: styles$K.divider
     }, null, 3, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$L.code
+      class: styles$K.code
     }, /* @__PURE__ */ _jsxSorted(ElmShikiHighlighter, null, {
       code: _wrapProp(_rawProps, "code"),
       language: _fnSignal(_hf0$r, [
@@ -2140,19 +2132,18 @@ const ElmCodeBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
     }, null, 3, "sK_4"), 1, null)
   ], 0, "sK_5");
 }, "ElmCodeBlock_component_rH8kn9Tvguw"));
-const image$2 = "_image_t4lyp_12";
-const fallback$1 = "_fallback_t4lyp_36";
-const styles$G = {
-  "block-image": "_block-image_t4lyp_1",
-  "image-container": "_image-container_t4lyp_12",
+const image$2 = "_image_kwjx3_12";
+const fallback$1 = "_fallback_kwjx3_36";
+const styles$F = {
+  "elm-block-image": "_elm-block-image_kwjx3_1",
+  "image-container": "_image-container_kwjx3_12",
   image: image$2,
   fallback: fallback$1,
-  "caption-box": "_caption-box_t4lyp_46",
-  "caption-icon": "_caption-icon_t4lyp_57",
-  "modal-container": "_modal-container_t4lyp_63"
+  "caption-box": "_caption-box_kwjx3_46",
+  "caption-icon": "_caption-icon_kwjx3_57"
 };
-const styles$F = {
-  "rectangle-wave": "_rectangle-wave_z699a_21"
+const styles$E = {
+  "elm-rectangle-wave": "_elm-rectangle-wave_70gad_21"
 };
 const ElmRectangleWave = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
@@ -2161,23 +2152,128 @@ const ElmRectangleWave = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
   return /* @__PURE__ */ _jsxSplit("div", {
     "aria-hidden": "true",
     class: [
-      styles$F["rectangle-wave"],
+      styles$E["elm-rectangle-wave"],
       _rawProps.class
     ],
     ..._getVarProps(props)
   }, _getConstProps(props), null, 0, "vI_0");
 }, "ElmRectangleWave_component_4z0HAhT3758"));
+const shown = "_shown_12j1m_18";
+const styles$D = {
+  "elm-modal": "_elm-modal_12j1m_1",
+  shown
+};
+const ElmModal = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const rest = _restProps(props, [
+    "class",
+    "isOpen",
+    "delay",
+    "style",
+    "onClose$"
+  ]);
+  const dialogRef = useSignal();
+  const isShown = useSignal(false);
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track, cleanup }) => {
+    const dialogRef2 = _captures[0], isShown2 = _captures[1], props2 = _captures[2];
+    track(() => props2.isOpen);
+    if (!dialogRef2.value) return;
+    if (props2.isOpen) {
+      dialogRef2.value.showModal();
+      isShown2.value = true;
+    } else {
+      if (!isShown2.value) return;
+      isShown2.value = false;
+      const timer = setTimeout(() => {
+        dialogRef2.value?.close();
+      }, props2.delay ?? 200);
+      cleanup(() => {
+        clearTimeout(timer);
+      });
+    }
+  }, "ElmModal_component_useVisibleTask_1nydd6wvRjI", [
+    dialogRef,
+    isShown,
+    props
+  ]), {
+    strategy: "document-ready"
+  });
+  const handleClose = /* @__PURE__ */ inlinedQrl((event, element) => {
+    const props2 = _captures[0];
+    props2.onClose$?.(event, element);
+  }, "ElmModal_component_handleClose_0gU4hMZNm0Q", [
+    props
+  ]);
+  return /* @__PURE__ */ _jsxSplit("dialog", {
+    ref: dialogRef,
+    class: [
+      styles$D["elm-modal"],
+      props.class,
+      {
+        [styles$D["shown"]]: isShown.value
+      }
+    ],
+    "q-e:click": handleClose,
+    style: typeof props.style === "string" ? `${props.style};--elmethis-scoped-modal-delay:${props.delay ?? 200}ms` : {
+      "--elmethis-scoped-modal-delay": `${props.delay ?? 200}ms`,
+      ...props.style
+    },
+    ...{
+      closedBy: "none"
+    },
+    ..._getVarProps(rest)
+  }, _getConstProps(rest), /* @__PURE__ */ _jsxSorted("div", {
+    "q-e:click": /* @__PURE__ */ inlinedQrl((e) => e.stopPropagation(), "ElmModal_component_dialog_div_q_e_click_Qa7ZVv0yllU")
+  }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Ka_0"), 0, null), 0, "Ka_1");
+}, "ElmModal_component_wvBKav2Nx50"));
+const useModal = (options = {}) => {
+  const delay = options.delay;
+  const isOpen = useSignal(false);
+  const show2 = /* @__PURE__ */ inlinedQrl(() => {
+    const isOpen2 = _captures[0];
+    isOpen2.value = true;
+  }, "useModal_show_7khcPaT0Cx8", [
+    isOpen
+  ]);
+  const hide = /* @__PURE__ */ inlinedQrl(() => {
+    const isOpen2 = _captures[0];
+    isOpen2.value = false;
+  }, "useModal_hide_mSugMHYElis", [
+    isOpen
+  ]);
+  const toggle = /* @__PURE__ */ inlinedQrl(() => {
+    const isOpen2 = _captures[0];
+    isOpen2.value = !isOpen2.value;
+  }, "useModal_toggle_eBYb4dHabL0", [
+    isOpen
+  ]);
+  const Modal = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const delay2 = _captures[0], hide2 = _captures[1], isOpen2 = _captures[2];
+    return /* @__PURE__ */ _jsxSorted(ElmModal, {
+      delay: delay2
+    }, {
+      isOpen: _wrapProp(isOpen2),
+      onClose$: hide2
+    }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "GG_0"), 1, "GG_1");
+  }, "useModal_Modal_component_H3EY0g5t53g", [
+    delay,
+    hide,
+    isOpen
+  ]));
+  return {
+    Modal,
+    isOpen,
+    show: show2,
+    hide,
+    toggle
+  };
+};
 const _hf0$q = (p0) => p0.alt ?? p0.caption ?? "Image";
 const _hf1$e = (p0, p1) => p0 ? void 0 : p1.srcset;
 const _hf2$a = (p0, p1) => p0 ? void 0 : p1.sizes;
 const _hf3$9 = (p0) => ({
-  pointerEvents: p0.value ? "auto" : "none",
-  "--elmethis-scoped-opacity": p0.value ? 1 : 0
-});
-const _hf4$5 = (p0) => ({
   "--elmethis-scoped-opacity": p0.value ? 1 : 0.01
 });
-const _hf5$4 = (p0) => ({
+const _hf4$5 = (p0) => ({
   "--elmethis-scoped-opacity": p0.value ? 0.01 : 1
 });
 const ElmBlockImage = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -2193,23 +2289,29 @@ const ElmBlockImage = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     "enableModal"
   ]);
   const isLoading = useSignal(true);
-  const isShowModal = useSignal(false);
+  const modal2 = useModal();
   const handleImageLoad = /* @__PURE__ */ inlinedQrl(() => {
     const isLoading2 = _captures[0];
     isLoading2.value = false;
   }, "ElmBlockImage_component_handleImageLoad_v2NAc2lc6F8", [
     isLoading
   ]);
-  const handleToggleModal = /* @__PURE__ */ inlinedQrl(() => {
-    const isLoading2 = _captures[0], isShowModal2 = _captures[1], props2 = _captures[2];
+  const handleOpenModal = /* @__PURE__ */ inlinedQrl(() => {
+    const isLoading2 = _captures[0], modal22 = _captures[1], props2 = _captures[2];
     if ((props2.enableModal ?? true) && !isLoading2.value) {
-      isShowModal2.value = !isShowModal2.value;
+      modal22.show();
     }
-  }, "ElmBlockImage_component_handleToggleModal_IbYfut8v1Wc", [
+  }, "ElmBlockImage_component_handleOpenModal_q7vLxFH3bWY", [
     isLoading,
-    isShowModal,
+    modal2,
     props
   ]);
+  const handleCloseModal = /* @__PURE__ */ inlinedQrl(() => {
+    const modal22 = _captures[0];
+    modal22.hide();
+  }, "ElmBlockImage_component_handleCloseModal_atTNQViDSJ4", [
+    modal2
+  ]);
   const imgRef = useSignal();
   useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
     const imgRef2 = _captures[0], isLoading2 = _captures[1];
@@ -2227,7 +2329,10 @@ const ElmBlockImage = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     fetchPriority: isModal ? "low" : "auto",
     height: _wrapProp(props, "height"),
     loading: isModal ? "lazy" : void 0,
-    ref: imgRef,
+    "q-e:click": isModal ? handleCloseModal : void 0,
+    // Only the inline image owns imgRef; the modal image must not steal it
+    // (ElmModal keeps its slot mounted, so both can coexist in the DOM).
+    ref: isModal ? void 0 : imgRef,
     sizes: _fnSignal(_hf2$a, [
       isModal,
       props
@@ -2239,64 +2344,56 @@ const ElmBlockImage = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     ]),
     style: {
       "--elmethis-scoped-opacity": isLoading.value ? 0.01 : 1,
-      "--elmethis-scoped-cursor": props.enableModal ?? true ? isShowModal.value ? "zoom-out" : "zoom-in" : "default",
+      "--elmethis-scoped-cursor": props.enableModal ?? true ? modal2.isOpen.value ? "zoom-out" : "zoom-in" : "default",
       "--aspect-ratio": props.width && props.height ? `${props.width} / ${props.height}` : "auto"
     },
     width: _wrapProp(props, "width")
   }, {
-    class: styles$G.image,
+    class: styles$F.image,
     "q-e:load": handleImageLoad
-  }, null, 3, "zM_0");
-  const Modal = /* @__PURE__ */ _jsxSorted("div", null, {
-    class: styles$G["modal-container"],
-    style: _fnSignal(_hf3$9, [
-      isShowModal
-    ]),
-    "q-e:click": handleToggleModal
-  }, isShowModal.value && ImageComponent(true), 1, "zM_1");
+  }, null, 2, "zM_0");
   return /* @__PURE__ */ _jsxSplit("figure", {
     class: [
-      styles$G["block-image"],
+      styles$F["elm-block-image"],
       props.class
     ],
     ..._getVarProps(rest)
   }, _getConstProps(rest), [
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$G["image-container"],
-      style: _fnSignal(_hf4$5, [
+      class: styles$F["image-container"],
+      style: _fnSignal(_hf3$9, [
         isLoading
       ]),
-      "q-e:click": handleToggleModal
+      "q-e:click": handleOpenModal
     }, [
       ImageComponent(false),
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$G.fallback
-      }, /* @__PURE__ */ _jsxSorted(ElmRectangleWave, null, null, null, 3, "zM_2"), 1, null)
+        class: styles$F.fallback
+      }, /* @__PURE__ */ _jsxSorted(ElmRectangleWave, null, null, null, 3, "zM_1"), 1, null)
     ], 1, null),
     props.caption && /* @__PURE__ */ _jsxSorted("figcaption", null, {
-      class: styles$G["caption-box"],
-      style: _fnSignal(_hf5$4, [
+      class: styles$F["caption-box"],
+      style: _fnSignal(_hf4$5, [
         isLoading
       ])
     }, [
       /* @__PURE__ */ _jsxSorted("span", null, {
-        class: styles$G["caption-icon"]
+        class: styles$F["caption-icon"]
       }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
         d: mdiMessageImageOutline,
         size: "1.25rem"
-      }, null, 3, "zM_3"), 1, null),
+      }, null, 3, "zM_2"), 1, null),
       /* @__PURE__ */ _jsxSorted(ElmInlineText, null, {
         size: "1rem"
-      }, _wrapProp(props, "caption"), 1, "zM_4")
-    ], 1, "zM_5"),
-    Modal
+      }, _wrapProp(props, "caption"), 1, "zM_3")
+    ], 1, "zM_4"),
+    /* @__PURE__ */ _jsxSorted(modal2.Modal, null, null, modal2.isOpen.value && ImageComponent(true), 1, "zM_5")
   ], 0, "zM_6");
 }, "ElmBlockImage_component_XGyydMLGB8M"));
-const file = "_file_1sut5_1";
-const styles$E = {
-  file,
-  "file-size": "_file-size_1sut5_13",
-  "download-icon": "_download-icon_1sut5_18"
+const styles$C = {
+  "elm-file": "_elm-file_1oen6_1",
+  "file-size": "_file-size_1oen6_13",
+  "download-icon": "_download-icon_1oen6_18"
 };
 function getLastPathSegmentWithoutQueryOrHash(urlString) {
   const cleanedUrl = urlString.split(/[?#]/)[0];
@@ -2331,7 +2428,7 @@ const ElmFile = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawPro
   ]);
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$E.file,
+      styles$C["elm-file"],
       _rawProps.class
     ],
     ..._getVarProps(props)
@@ -2342,10 +2439,10 @@ const ElmFile = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawPro
     }, null, 3, "r0_0"), 1, null),
     /* @__PURE__ */ _jsxSorted("div", null, null, /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, _rawProps.name ?? getLastPathSegmentWithoutQueryOrHash(_rawProps.src), 1, "r0_1"), 1, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$E["file-size"]
+      class: styles$C["file-size"]
     }, /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, _wrapProp(_rawProps, "filesize"), 1, "r0_2"), 1, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$E["download-icon"],
+      class: styles$C["download-icon"],
       "q-e:click": downloadFile
     }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
       d: mdiDownload,
@@ -2353,16 +2450,15 @@ const ElmFile = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawPro
     }, null, 3, "r0_3"), 1, null)
   ], 0, "r0_4");
 }, "ElmFile_component_WgruD9GFaB4"));
-const bookmark = "_bookmark_1o6my_1";
-const container$2 = "_container_1o6my_24";
-const image$1 = "_image_1o6my_36";
-const content$2 = "_content_1o6my_56";
-const title = "_title_1o6my_72";
-const description = "_description_1o6my_76";
-const link = "_link_1o6my_81";
-const styles$D = {
-  bookmark,
-  container: container$2,
+const container = "_container_67069_24";
+const image$1 = "_image_67069_36";
+const content$2 = "_content_67069_56";
+const title = "_title_67069_72";
+const description = "_description_67069_76";
+const link = "_link_67069_81";
+const styles$B = {
+  "elm-bookmark": "_elm-bookmark_67069_1",
+  container,
   image: image$1,
   content: content$2,
   title,
@@ -2392,14 +2488,14 @@ const ElmBookmark = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
   };
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$D.bookmark,
+      styles$B["elm-bookmark"],
       _rawProps.class
     ],
     ..._getVarProps(props)
   }, _getConstProps(props), /* @__PURE__ */ _jsxSorted("a", {
     href: _wrapProp(_rawProps, "url")
   }, {
-    class: styles$D.container,
+    class: styles$B.container,
     target: "_blank",
     rel: "noopener noreferrer"
   }, [
@@ -2411,25 +2507,25 @@ const ElmBookmark = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
         isError
       ])
     }, {
-      class: styles$D.image,
+      class: styles$B.image,
       alt: "OGP Image",
       "q-e:error": handleImageOnError
     }, null, 3, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$D.content
+      class: styles$B.content
     }, [
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$D.title
+        class: styles$B.title
       }, /* @__PURE__ */ _jsxSorted(ElmInlineText, null, {
         bold: true
       }, _wrapProp(_rawProps, "title"), 1, "cr_0"), 1, null),
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$D.description
+        class: styles$B.description
       }, /* @__PURE__ */ _jsxSorted(ElmInlineText, null, {
         size: "0.75rem"
       }, _wrapProp(_rawProps, "description"), 1, "cr_1"), 1, null),
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$D.link
+        class: styles$B.link
       }, [
         _rawProps.favicon ? /* @__PURE__ */ _jsxSorted(ElmInlineIcon, null, {
           src: _wrapProp(_rawProps, "favicon")
@@ -2444,19 +2540,18 @@ const ElmBookmark = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
     ], 1, null)
   ], 1, null), 0, "cr_5");
 }, "ElmBookmark_component_SFTt0EvJVYc"));
-const toggle = "_toggle_11gju_1";
-const open$1 = "_open_11gju_9";
-const summary$1 = "_summary_11gju_14";
-const divider = "_divider_11gju_36";
-const chevron$1 = "_chevron_11gju_50";
-const cross = "_cross_11gju_63";
-const border = "_border_11gju_77";
-const content$1 = "_content_11gju_85";
-const styles$C = {
-  toggle,
-  open: open$1,
+const open = "_open_d59g8_9";
+const summary$1 = "_summary_d59g8_14";
+const divider = "_divider_d59g8_36";
+const chevron$1 = "_chevron_d59g8_50";
+const cross = "_cross_d59g8_63";
+const border = "_border_d59g8_77";
+const content$1 = "_content_d59g8_85";
+const styles$A = {
+  "elm-toggle": "_elm-toggle_d59g8_1",
+  open,
   summary: summary$1,
-  "summary-left": "_summary-left_11gju_29",
+  "summary-left": "_summary-left_d59g8_29",
   divider,
   chevron: chevron$1,
   cross,
@@ -2480,9 +2575,9 @@ const ElmToggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
   });
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$C.toggle,
+      styles$A["elm-toggle"],
       {
-        [styles$C.open]: isOpen.value
+        [styles$A.open]: isOpen.value
       },
       props.class
     ],
@@ -2497,17 +2592,17 @@ const ElmToggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
         isOpen
       ])
     }, {
-      class: styles$C.summary,
+      class: styles$A.summary,
       "preventdefault:click": true
     }, [
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$C["summary-left"]
+        class: styles$A["summary-left"]
       }, [
         /* @__PURE__ */ _jsxSorted("span", {
           class: [
-            styles$C.chevron,
+            styles$A.chevron,
             {
-              [styles$C.open]: isOpen.value
+              [styles$A.open]: isOpen.value
             }
           ]
         }, null, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
@@ -2522,13 +2617,13 @@ const ElmToggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
         }, null, 3, "VD_2"), 1, null)
       ], 1, null),
       /* @__PURE__ */ _jsxSorted("hr", null, {
-        class: styles$C.divider
+        class: styles$A.divider
       }, null, 3, null),
       /* @__PURE__ */ _jsxSorted("span", {
         class: [
-          styles$C.cross,
+          styles$A.cross,
           {
-            [styles$C.open]: isOpen.value
+            [styles$A.open]: isOpen.value
           }
         ]
       }, null, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
@@ -2541,27 +2636,26 @@ const ElmToggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
       }, null, 3, "VD_3"), 1, null)
     ], 0, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$C.border
+      class: styles$A.border
     }, null, 3, null),
     /* @__PURE__ */ _jsxSorted("div", {
       class: [
-        styles$C.content,
+        styles$A.content,
         {
-          [styles$C.open]: isOpen.value
+          [styles$A.open]: isOpen.value
         }
       ]
     }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "VD_4"), 1, null)
   ], 0, "VD_5");
 }, "ElmToggle_component_Gna1lAQa8FY"));
-const blockquote = "_blockquote_14jkh_1";
-const body$4 = "_body_14jkh_20";
-const icon$4 = "_icon_14jkh_25";
-const styles$B = {
-  blockquote,
+const body$4 = "_body_lqbme_20";
+const icon$3 = "_icon_lqbme_25";
+const styles$z = {
+  "elm-block-quote": "_elm-block-quote_lqbme_1",
   body: body$4,
-  icon: icon$4,
-  "icon-top-left": "_icon-top-left_14jkh_30",
-  "icon-bottom-right": "_icon-bottom-right_14jkh_34"
+  icon: icon$3,
+  "icon-top-left": "_icon-top-left_lqbme_30",
+  "icon-bottom-right": "_icon-bottom-right_lqbme_34"
 };
 const ElmBlockQuote = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
@@ -2569,7 +2663,7 @@ const ElmBlockQuote = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
   ]);
   return /* @__PURE__ */ _jsxSplit("blockquote", {
     class: [
-      styles$B.blockquote,
+      styles$z["elm-block-quote"],
       textStyles.text,
       _rawProps.class
     ],
@@ -2577,39 +2671,38 @@ const ElmBlockQuote = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
   }, _getConstProps(props), [
     /* @__PURE__ */ _jsxSorted("div", null, {
       class: [
-        styles$B.icon,
-        styles$B["icon-top-left"]
+        styles$z.icon,
+        styles$z["icon-top-left"]
       ]
     }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
       d: mdiFormatQuoteOpen
     }, null, 3, "Cw_0"), 1, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$B.body
+      class: styles$z.body
     }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Cw_1"), 1, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
       class: [
-        styles$B.icon,
-        styles$B["icon-bottom-right"]
+        styles$z.icon,
+        styles$z["icon-bottom-right"]
       ]
     }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
       d: mdiFormatQuoteClose
     }, null, 3, "Cw_2"), 1, null)
   ], 0, "Cw_3");
 }, "ElmBlockQuote_component_Omca9TyRpKI"));
-const callout = "_callout_ul4as_1";
-const header$3 = "_header_ul4as_27";
-const content = "_content_ul4as_36";
-const icon$3 = "_icon_ul4as_40";
-const note = "_note_ul4as_45";
-const tip = "_tip_ul4as_49";
-const important = "_important_ul4as_53";
-const warning = "_warning_ul4as_57";
-const caution = "_caution_ul4as_61";
-const styles$A = {
-  callout,
+const header$3 = "_header_1xydl_27";
+const content = "_content_1xydl_36";
+const icon$2 = "_icon_1xydl_40";
+const note = "_note_1xydl_45";
+const tip = "_tip_1xydl_49";
+const important = "_important_1xydl_53";
+const warning = "_warning_1xydl_57";
+const caution = "_caution_1xydl_61";
+const styles$y = {
+  "elm-callout": "_elm-callout_1xydl_1",
   header: header$3,
   content,
-  icon: icon$3,
+  icon: icon$2,
   note,
   tip,
   important,
@@ -2632,20 +2725,20 @@ const ElmCallout = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
   ]);
   return /* @__PURE__ */ _jsxSplit("aside", {
     class: [
-      styles$A.callout,
-      styles$A[_rawProps.type ?? "note"],
+      styles$y["elm-callout"],
+      styles$y[_rawProps.type ?? "note"],
       _rawProps.class
     ],
     style: _wrapProp(_rawProps, "style"),
     ..._getVarProps(props)
   }, _getConstProps(props), [
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$A.header
+      class: styles$y.header
     }, [
       /* @__PURE__ */ _jsxSorted(ElmMdiIcon, {
         d: ICON_MAP[_rawProps.type ?? "note"]
       }, {
-        class: styles$A.icon,
+        class: styles$y.icon,
         size: "1.25rem"
       }, null, 3, "qp_0"),
       /* @__PURE__ */ _jsxSorted("span", null, null, _fnSignal(_hf0$n, [
@@ -2653,13 +2746,12 @@ const ElmCallout = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
       ]), 1, null)
     ], 1, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$A.content
+      class: styles$y.content
     }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "qp_1"), 1, null)
   ], 0, "qp_2");
 }, "ElmCallout_component_vJ404ghu0V8"));
-const hr = "_hr_1lo8v_1";
-const styles$z = {
-  hr
+const styles$x = {
+  "elm-divider": "_elm-divider_8xkqn_1"
 };
 const ElmDivider = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
@@ -2667,16 +2759,18 @@ const ElmDivider = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
   ]);
   return /* @__PURE__ */ _jsxSplit("hr", {
     class: [
-      styles$z.hr,
+      styles$x["elm-divider"],
       _rawProps.class
     ],
     ..._getVarProps(props)
   }, _getConstProps(props), null, 0, "70_0");
 }, "ElmDivider_component_SDbNuDT10PU"));
-const styles$y = {
-  "elmethis-list-common": "_elmethis-list-common_v5znc_1",
-  "elmethis-bulleted-list": "_elmethis-bulleted-list_v5znc_9",
-  "elmethis-numbered-list": "_elmethis-numbered-list_v5znc_58"
+const bulleted = "_bulleted_n8430_9";
+const numbered = "_numbered_n8430_58";
+const styles$w = {
+  "elm-list": "_elm-list_n8430_1",
+  bulleted,
+  numbered
 };
 const ElmList = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
@@ -2688,8 +2782,8 @@ const ElmList = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawPro
     return /* @__PURE__ */ _jsxSplit("ol", {
       class: [
         textStyles.text,
-        styles$y["elmethis-list-common"],
-        styles$y["elmethis-numbered-list"],
+        styles$w["elm-list"],
+        styles$w.numbered,
         _rawProps.class
       ],
       style: _wrapProp(_rawProps, "style"),
@@ -2699,8 +2793,8 @@ const ElmList = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawPro
     return /* @__PURE__ */ _jsxSplit("ul", {
       class: [
         textStyles.text,
-        styles$y["elmethis-list-common"],
-        styles$y["elmethis-bulleted-list"],
+        styles$w["elm-list"],
+        styles$w.bulleted,
         _rawProps.class
       ],
       style: _wrapProp(_rawProps, "style"),
@@ -2708,13 +2802,12 @@ const ElmList = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawPro
     }, _getConstProps(props), /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "jF_2"), 0, "jF_3");
   }
 }, "ElmList_component_aFEzPziW6Gs"));
-const table = "_table_8qd0n_1";
-const caption = "_caption_8qd0n_8";
-const spacing = "_spacing_8qd0n_25";
-const styles$x = {
-  table,
+const caption = "_caption_14qfo_8";
+const spacing = "_spacing_14qfo_25";
+const styles$v = {
+  "elm-table": "_elm-table_14qfo_1",
   caption,
-  "caption-inner": "_caption-inner_8qd0n_18",
+  "caption-inner": "_caption-inner_14qfo_18",
   spacing
 };
 const HasRowHeaderContext = createContextId("elm.table.HasRowHeader");
@@ -2736,31 +2829,30 @@ const ElmTable = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
   useContextProvider(HasRowHeaderContext, hasRowHeader);
   return /* @__PURE__ */ _jsxSplit("table", {
     class: [
-      styles$x.table,
+      styles$v["elm-table"],
       textStyles.text,
       props.class
     ],
     ..._getVarProps(rest)
   }, _getConstProps(rest), [
     props.caption && /* @__PURE__ */ _jsxSorted("caption", null, null, /* @__PURE__ */ _jsxSorted("span", null, {
-      class: styles$x.caption
+      class: styles$v.caption
     }, [
       /* @__PURE__ */ _jsxSorted("span", null, {
-        class: styles$x.spacing
+        class: styles$v.spacing
       }, null, 3, null),
       /* @__PURE__ */ _jsxSorted("span", null, {
-        class: styles$x["caption-inner"]
+        class: styles$v["caption-inner"]
       }, /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, _wrapProp(props, "caption"), 1, "Yw_0"), 1, null),
       /* @__PURE__ */ _jsxSorted("span", null, {
-        class: styles$x.spacing
+        class: styles$v.spacing
       }, null, 3, null)
     ], 1, null), 1, "Yw_1"),
     /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Yw_2")
   ], 0, "Yw_3");
 }, "ElmTable_component_UT2AChu46oY"));
-const thead = "_thead_1kvax_1";
-const styles$w = {
-  thead
+const styles$u = {
+  "elm-table-header": "_elm-table-header_jhft7_1"
 };
 const ElmTableHeader = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
@@ -2769,7 +2861,7 @@ const ElmTableHeader = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
   useContextProvider(TableSectionContext, "head");
   return /* @__PURE__ */ _jsxSplit("thead", {
     class: [
-      styles$w.thead,
+      styles$u["elm-table-header"],
       _rawProps.class
     ],
     ..._getVarProps(props)
@@ -2785,9 +2877,8 @@ const ElmTableBody = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
     ..._getVarProps(props)
   }, _getConstProps(props), /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "d6_0"), 0, "d6_1");
 }, "ElmTableBody_component_cc34lI5xf6Y"));
-const tr = "_tr_8c0na_1";
-const styles$v = {
-  tr
+const styles$t = {
+  "elm-table-row": "_elm-table-row_mkm0q_1"
 };
 const ElmTableRow = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const props = _restProps(_rawProps, [
@@ -2795,17 +2886,16 @@ const ElmTableRow = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
   ]);
   return /* @__PURE__ */ _jsxSplit("tr", {
     class: [
-      styles$v.tr,
+      styles$t["elm-table-row"],
       _rawProps.class
     ],
     ..._getVarProps(props)
   }, _getConstProps(props), /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Hb_0"), 0, "Hb_1");
 }, "ElmTableRow_component_9imYSdaY9q8"));
-const common = "_common_i4f8p_1";
-const td = "_td_i4f8p_21";
-const th = "_th_i4f8p_26";
-const styles$u = {
-  common,
+const td = "_td_1a21f_20";
+const th = "_th_1a21f_25";
+const styles$s = {
+  "elm-table-cell": "_elm-table-cell_1a21f_1",
   td,
   th
 };
@@ -2828,8 +2918,8 @@ const ElmTableCell = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   const scope = props.scope ?? (inHead ? "col" : isRowHeader ? "row" : void 0);
   return renderAsTh ? /* @__PURE__ */ _jsxSplit("th", {
     class: [
-      styles$u.common,
-      styles$u.th,
+      styles$s["elm-table-cell"],
+      styles$s.th,
       props.class
     ],
     style: _wrapProp(props, "style"),
@@ -2837,22 +2927,21 @@ const ElmTableCell = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     ..._getVarProps(rest)
   }, _getConstProps(rest), props.text != null ? props.text : /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Vm_0"), 0, "Vm_1") : /* @__PURE__ */ _jsxSplit("td", {
     class: [
-      styles$u.common,
-      styles$u.td,
+      styles$s["elm-table-cell"],
+      styles$s.td,
       props.class
     ],
     style: _wrapProp(props, "style"),
     ..._getVarProps(rest)
   }, _getConstProps(rest), props.text != null ? props.text : /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Vm_2"), 0, "Vm_3");
 }, "ElmTableCell_component_cdS0ELa7S1k"));
-const unsupported = "_unsupported_1bixo_1";
-const message = "_message_1bixo_14";
-const icon$2 = "_icon_1bixo_21";
-const details = "_details_1bixo_25";
-const styles$t = {
-  unsupported,
+const message = "_message_xdddx_14";
+const icon$1 = "_icon_xdddx_21";
+const details = "_details_xdddx_25";
+const styles$r = {
+  "elm-unsupported-block": "_elm-unsupported-block_xdddx_1",
   message,
-  icon: icon$2,
+  icon: icon$1,
   details
 };
 const ElmUnsupportedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
@@ -2862,26 +2951,26 @@ const ElmUnsupportedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
   ]);
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$t.unsupported,
+      styles$r["elm-unsupported-block"],
       _rawProps.class
     ],
     ..._getVarProps(props)
   }, _getConstProps(props), [
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$t.message
+      class: styles$r.message
     }, [
       /* @__PURE__ */ _jsxSorted("svg", null, {
         viewBox: "0 0 24 24",
         width: "1.25rem",
         height: "1.25rem",
-        class: styles$t.icon
+        class: styles$r.icon
       }, /* @__PURE__ */ _jsxSorted("path", null, {
         d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
       }, null, 3, null), 3, null),
       /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, "UNSUPPORTED BLOCK", 3, "90_0")
     ], 1, null),
     _rawProps.details && /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$t.details
+      class: styles$r.details
     }, /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, _wrapProp(_rawProps, "details"), 1, "90_1"), 1, "90_2")
   ], 0, "90_3");
 }, "ElmUnsupportedBlock_component_yKqwfnlPSP4"));
@@ -3213,7 +3302,7 @@ function compactReasoningMessageEvents(events) {
 function compactEventsExtended(events) {
   return compactEvents(compactReasoningMessageEvents(events));
 }
-const styles$s = {
+const styles$q = {
   "message-content-user-wrapper": "_message-content-user-wrapper_80z92_8",
   "message-content-user-inner": "_message-content-user-inner_80z92_14",
   "message-content-user-content": "_message-content-user-content_80z92_22",
@@ -3270,25 +3359,25 @@ const ElmAgUiEventRenderer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
           if (!userMsg) break;
           const contents = userMsg.content;
           const userInputComponent = /* @__PURE__ */ _jsxSorted("div", null, {
-            class: styles$s["message-content-user-wrapper"]
+            class: styles$q["message-content-user-wrapper"]
           }, /* @__PURE__ */ _jsxSorted("div", null, {
-            class: styles$s["message-content-user-inner"]
+            class: styles$q["message-content-user-inner"]
           }, [
             /* @__PURE__ */ _jsxSorted("div", null, {
-              class: styles$s["message-content-type"]
+              class: styles$q["message-content-type"]
             }, [
               /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
-                class: styles$s["message-content-icon"],
+                class: styles$q["message-content-icon"],
                 d: mdiAccount
               }, null, 3, "Ds_3"),
               /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, "User", 3, "Ds_4"),
               /* @__PURE__ */ _jsxSorted("div", null, {
                 "aria-hidden": "true",
-                class: styles$s["message-content-spacer"]
+                class: styles$q["message-content-spacer"]
               }, null, 3, null)
             ], 1, null),
             /* @__PURE__ */ _jsxSorted("div", null, {
-              class: styles$s["message-content-user-content"]
+              class: styles$q["message-content-user-content"]
             }, typeof contents === "string" ? /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, contents, 1, "Ds_5") : contents.map((item, i) => /* @__PURE__ */ _jsxSorted("span", null, null, renderInputContent(item), 1, i)), 1, null)
           ], 1, null), 1, "Ds_6");
           components.push(userInputComponent);
@@ -3304,29 +3393,30 @@ const ElmAgUiEventRenderer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
   };
   return /* @__PURE__ */ _jsxSorted("div", {
     class: [
-      styles$s["elm-my-something"],
+      styles$q["elm-my-something"],
       _rawProps.class
     ],
     style: _wrapProp(_rawProps, "style")
   }, null, render(_rawProps.events), 1, "Ds_7");
 }, "ElmAgUiEventRenderer_component_ifhto4pMkTc"));
-const input$1 = "_input_1cg4b_33";
-const styles$r = {
-  "elm-ag-ui-input-wrapper": "_elm-ag-ui-input-wrapper_1cg4b_1",
-  "picker-container": "_picker-container_1cg4b_9",
-  "elm-ag-ui-input": "_elm-ag-ui-input_1cg4b_1",
+const card = "_card_1st6f_22";
+const input$1 = "_input_1st6f_33";
+const styles$p = {
+  "elm-ag-ui-input": "_elm-ag-ui-input_1st6f_1",
+  "picker-container": "_picker-container_1st6f_9",
+  card,
   input: input$1,
-  "button-row": "_button-row_1cg4b_56",
-  "plus-button": "_plus-button_1cg4b_64",
-  "submit-button": "_submit-button_1cg4b_81"
+  "button-row": "_button-row_1st6f_56",
+  "plus-button": "_plus-button_1st6f_64",
+  "submit-button": "_submit-button_1st6f_81"
 };
 const panel$1 = "_panel_8yo2s_1";
-const empty = "_empty_8yo2s_16";
+const empty$1 = "_empty_8yo2s_16";
 const form = "_form_8yo2s_86";
-const error$1 = "_error_8yo2s_135";
-const styles$q = {
+const error$2 = "_error_8yo2s_135";
+const styles$o = {
   panel: panel$1,
-  empty,
+  empty: empty$1,
   "prompt-row": "_prompt-row_8yo2s_23",
   "prompt-row-active": "_prompt-row-active_8yo2s_34",
   "prompt-head": "_prompt-head_8yo2s_38",
@@ -3340,104 +3430,13 @@ const styles$q = {
   "form-actions": "_form-actions_8yo2s_92",
   "use-button": "_use-button_8yo2s_98",
   "cancel-button": "_cancel-button_8yo2s_119",
-  error: error$1,
+  error: error$2,
   "field-label": "_field-label_8yo2s_140",
   "field-name": "_field-name_8yo2s_147",
   "field-required": "_field-required_8yo2s_152",
   "field-input": "_field-input_8yo2s_157",
   "field-hint": "_field-hint_8yo2s_178"
 };
-const open = "_open_1ijyc_17";
-const styles$p = {
-  "use-modal": "_use-modal_1ijyc_1",
-  open
-};
-const useModal = (options = {}) => {
-  const delay = options.delay ?? 200;
-  const isOpen = useSignal(false);
-  const isShown = useSignal(false);
-  const hideGen = useSignal(0);
-  const hideTimerId = useSignal(void 0);
-  useTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup }) => {
-    const hideTimerId2 = _captures[0];
-    cleanup(() => {
-      if (hideTimerId2.value !== void 0) clearTimeout(hideTimerId2.value);
-    });
-  }, "useModal_useTask_872zagKnsz0", [
-    hideTimerId
-  ]));
-  const show2 = /* @__PURE__ */ inlinedQrl(() => {
-    const hideGen2 = _captures[0], isOpen2 = _captures[1], isShown2 = _captures[2];
-    hideGen2.value++;
-    isOpen2.value = true;
-    isShown2.value = true;
-  }, "useModal_show_7khcPaT0Cx8", [
-    hideGen,
-    isOpen,
-    isShown
-  ]);
-  const hide = /* @__PURE__ */ inlinedQrl(() => {
-    const delay2 = _captures[0], hideGen2 = _captures[1], hideTimerId2 = _captures[2], isOpen2 = _captures[3], isShown2 = _captures[4];
-    const gen = ++hideGen2.value;
-    isShown2.value = false;
-    hideTimerId2.value = noSerialize(setTimeout(() => {
-      if (hideGen2.value === gen) {
-        isOpen2.value = false;
-      }
-      hideTimerId2.value = void 0;
-    }, delay2));
-  }, "useModal_hide_mSugMHYElis", [
-    delay,
-    hideGen,
-    hideTimerId,
-    isOpen,
-    isShown
-  ]);
-  const toggle2 = /* @__PURE__ */ inlinedQrl(() => {
-    const hide2 = _captures[0], isShown2 = _captures[1], show22 = _captures[2];
-    if (isShown2.value) {
-      hide2();
-    } else {
-      show22();
-    }
-  }, "useModal_toggle_eBYb4dHabL0", [
-    hide,
-    isShown,
-    show2
-  ]);
-  const Modal = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const delay2 = _captures[0], hide2 = _captures[1], isOpen2 = _captures[2], isShown2 = _captures[3];
-    return /* @__PURE__ */ _jsxSorted("div", {
-      class: [
-        styles$p["use-modal"],
-        {
-          [styles$p["open"]]: isShown2.value
-        }
-      ],
-      style: {
-        "--elmethis-scoped-delay": `${delay2}ms`
-      }
-    }, {
-      "q-e:click": hide2
-    }, isOpen2.value && /* @__PURE__ */ _jsxSorted("div", null, {
-      role: "dialog",
-      "stoppropagation:click": true
-    }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "GG_0"), 1, "GG_1"), 1, "GG_2");
-  }, "useModal_Modal_component_H3EY0g5t53g", [
-    delay,
-    hide,
-    isOpen,
-    isShown
-  ]));
-  return {
-    Modal,
-    isOpen,
-    isShown,
-    show: show2,
-    hide,
-    toggle: toggle2
-  };
-};
 const _hf0$l = (p0) => p0.descriptor.name;
 const _hf1$b = (p0) => p0.descriptor.description;
 const _hf2$8 = (p0, p1) => p1.values[p0.name] ?? "";
@@ -3552,12 +3551,12 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
   return /* @__PURE__ */ _jsxSorted(Fragment$1, null, null, [
     /* @__PURE__ */ _jsxSorted("div", {
       class: [
-        styles$q.panel,
+        styles$o.panel,
         _rawProps.class
       ],
       style: _wrapProp(_rawProps, "style")
     }, null, _rawProps.prompts.length === 0 ? /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$q.empty
+      class: styles$o.empty
     }, "No prompts available.", 3, "O0_0") : _rawProps.prompts.map((p, idx) => {
       const qrl_4294901764 = /* @__PURE__ */ inlinedQrl((_, _1, p2) => {
         const onRowClick$2 = _captures[0];
@@ -3567,41 +3566,41 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
       ]);
       return /* @__PURE__ */ _jsxSorted("div", {
         class: [
-          styles$q["prompt-row"],
-          idx === _rawProps.activeIndex && styles$q["prompt-row-active"]
+          styles$o["prompt-row"],
+          idx === _rawProps.activeIndex && styles$o["prompt-row-active"]
         ],
         "q-e:click": qrl_4294901764,
         "q:p": p
       }, null, [
         /* @__PURE__ */ _jsxSorted("div", null, {
-          class: styles$q["prompt-head"]
+          class: styles$o["prompt-head"]
         }, /* @__PURE__ */ _jsxSorted("span", null, {
-          class: styles$q["prompt-name"]
+          class: styles$o["prompt-name"]
         }, _wrapProp(p, "name"), 1, null), 1, null),
         p.description && /* @__PURE__ */ _jsxSorted("span", null, {
-          class: styles$q["prompt-description"]
+          class: styles$o["prompt-description"]
         }, _wrapProp(p, "description"), 1, "O0_1")
       ], 4, p.key);
     }), 1, null),
     /* @__PURE__ */ _jsxSorted(modal2.Modal, null, null, /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$q["modal-card"]
+      class: styles$o["modal-card"]
     }, active2.descriptor && /* @__PURE__ */ _jsxSorted(Fragment$1, null, null, [
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$q["modal-header"]
+        class: styles$o["modal-header"]
       }, [
         /* @__PURE__ */ _jsxSorted("span", null, {
-          class: styles$q["modal-title"]
+          class: styles$o["modal-title"]
         }, _fnSignal(_hf0$l, [
           active2
         ]), 3, null),
         active2.descriptor.description && /* @__PURE__ */ _jsxSorted("span", null, {
-          class: styles$q["modal-description"]
+          class: styles$o["modal-description"]
         }, _fnSignal(_hf1$b, [
           active2
         ]), 3, "O0_2")
       ], 1, null),
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$q.form
+        class: styles$o.form
       }, [
         (active2.descriptor.arguments ?? []).map((a, idx) => {
           const qrl_4294901765 = /* @__PURE__ */ inlinedQrl((_, el, a2) => {
@@ -3617,14 +3616,14 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
             active2
           ]);
           return /* @__PURE__ */ _jsxSorted("label", null, {
-            class: styles$q["field-label"]
+            class: styles$o["field-label"]
           }, [
             /* @__PURE__ */ _jsxSorted("span", null, {
-              class: styles$q["field-name"]
+              class: styles$o["field-name"]
             }, [
               _wrapProp(a, "name"),
               a.required && /* @__PURE__ */ _jsxSorted("span", null, {
-                class: styles$q["field-required"]
+                class: styles$o["field-required"]
               }, "*", 3, "O0_3")
             ], 1, null),
             a.enum && a.enum.length > 0 ? /* @__PURE__ */ _jsxSorted("select", {
@@ -3637,7 +3636,7 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
                 active2
               ])
             }, {
-              class: styles$q["field-input"]
+              class: styles$o["field-input"]
             }, [
               !a.required && /* @__PURE__ */ _jsxSorted("option", null, {
                 value: ""
@@ -3665,29 +3664,29 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
                 active2
               ])
             }, {
-              class: styles$q["field-input"],
+              class: styles$o["field-input"],
               type: "text"
             }, null, 6, "O0_6"),
             a.enum && a.description && /* @__PURE__ */ _jsxSorted("span", null, {
-              class: styles$q["field-hint"]
+              class: styles$o["field-hint"]
             }, _wrapProp(a, "description"), 1, "O0_7")
           ], 1, a.name);
         }),
         active2.error && /* @__PURE__ */ _jsxSorted("div", null, {
-          class: styles$q.error
+          class: styles$o.error
         }, _wrapProp(active2, "error"), 3, "O0_8")
       ], 1, null),
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$q["form-actions"]
+        class: styles$o["form-actions"]
       }, [
         /* @__PURE__ */ _jsxSorted("button", null, {
           type: "button",
-          class: styles$q["cancel-button"],
+          class: styles$o["cancel-button"],
           "q-e:click": onCancel$
         }, "Cancel", 3, null),
         /* @__PURE__ */ _jsxSorted("button", null, {
           type: "button",
-          class: styles$q["use-button"],
+          class: styles$o["use-button"],
           disabled: _wrapProp(active2, "submitting"),
           "q-e:click": onSubmit$
         }, _fnSignal(_hf4$3, [
@@ -3834,7 +3833,7 @@ const ElmAgUiInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
   ]);
   return /* @__PURE__ */ _jsxSorted("div", {
     class: [
-      styles$r["elm-ag-ui-input-wrapper"],
+      styles$p["elm-ag-ui-input"],
       _rawProps.class
     ],
     style: _wrapProp(_rawProps, "style")
@@ -3845,7 +3844,7 @@ const ElmAgUiInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
         isPickerOpen,
         slashRange
       ]),
-      class: styles$r["picker-container"]
+      class: styles$p["picker-container"]
     }, /* @__PURE__ */ _jsxSorted(ElmAgUiPromptPicker, null, {
       prompts: _fnSignal(_hf1$a, [
         _rawProps,
@@ -3861,7 +3860,7 @@ const ElmAgUiInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
     }, null, 3, "C8_0"), 1, "C8_1"),
     /* @__PURE__ */ _jsxSorted("div", null, {
       class: [
-        styles$r["elm-ag-ui-input"],
+        styles$p["card"],
         textStyles["text"]
       ]
     }, [
@@ -3870,12 +3869,12 @@ const ElmAgUiInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
       }, {
         name: "prompt",
         "aria-label": "Prompt",
-        class: styles$r["input"],
+        class: styles$p["input"],
         "q-e:input": handleInput$,
         "q-e:keydown": handleKeyDown$
       }, null, 3, null),
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$r["button-row"]
+        class: styles$p["button-row"]
       }, [
         hasPicker && /* @__PURE__ */ _jsxSorted("div", {
           "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, isPickerOpen2, textAreaRef2) => {
@@ -3894,7 +3893,7 @@ const ElmAgUiInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
             textAreaRef
           ]
         }, {
-          class: styles$r["plus-button"],
+          class: styles$p["plus-button"],
           "aria-label": _fnSignal(_hf3$6, [
             isPickerOpen
           ])
@@ -3907,7 +3906,7 @@ const ElmAgUiInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
         /* @__PURE__ */ _jsxSorted("div", {
           "q-e:click": _rawProps.isRunning ? _rawProps.onAbort$ : onSubmit
         }, {
-          class: styles$r["submit-button"]
+          class: styles$p["submit-button"]
         }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, {
           d: _rawProps.isRunning ? mdiStop : mdiSend
         }, {
@@ -3918,7 +3917,7 @@ const ElmAgUiInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_r
     ], 1, null)
   ], 1, "C8_5");
 }, "ElmAgUiInput_component_Q6DXfNqyu3E"));
-const styles$o = {
+const styles$n = {
   "message-content-assistant-wrapper": "_message-content-assistant-wrapper_1jrzm_1",
   "message-content-user-wrapper": "_message-content-user-wrapper_1jrzm_8",
   "message-content-user-inner": "_message-content-user-inner_1jrzm_14",
@@ -3929,8 +3928,8 @@ const styles$o = {
   "clickable-icon": "_clickable-icon_1jrzm_51",
   "reasoning-running": "_reasoning-running_1jrzm_65"
 };
-const styles$n = {
-  "markdown-body": "_markdown-body_jq5lk_1"
+const styles$m = {
+  "elm-markdown": "_elm-markdown_14gxe_1"
 };
 const _hf0$j = (p0) => p0.ordered ? "ordered" : "unordered";
 const renderByToken = (tokens) => {
@@ -4060,7 +4059,7 @@ const ElmMarkdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   const rest = _restProps(props, [
     "class",
     "markdown",
-    "streaming"
+    "isStreaming"
   ]);
   const stableTokens = useSignal([]);
   const tailTokens = useSignal([]);
@@ -4070,7 +4069,7 @@ const ElmMarkdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     const allTokens = marked.setOptions({
       gfm: true
     }).lexer(md);
-    if (props2.streaming && allTokens.length > 0) {
+    if (props2.isStreaming && allTokens.length > 0) {
       const newStable = allTokens.slice(0, -1);
       if (newStable.length !== stableTokens2.value.length) {
         stableTokens2.value = newStable;
@@ -4087,7 +4086,7 @@ const ElmMarkdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   ]));
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$n["markdown-body"],
+      styles$m["elm-markdown"],
       props.class
     ],
     ..._getVarProps(rest)
@@ -4099,7 +4098,7 @@ const ElmMarkdown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   ], 0, "c0_5");
 }, "ElmMarkdown_component_MjKh8ZU4JE4"));
 const summary = "_summary_1ya7x_2";
-const styles$m = {
+const styles$l = {
   "elm-ag-ui-tool-execution": "_elm-ag-ui-tool-execution_1ya7x_1",
   summary
 };
@@ -4251,7 +4250,7 @@ const ElmAgUiToolExecution = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
   ]));
   return /* @__PURE__ */ _jsxSorted("div", {
     class: [
-      styles$m["elm-ag-ui-tool-execution"],
+      styles$l["elm-ag-ui-tool-execution"],
       _rawProps.class
     ],
     style: _fnSignal(_hf0$i, [
@@ -4264,7 +4263,7 @@ const ElmAgUiToolExecution = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
     /* @__PURE__ */ _jsxSorted("div", {
       "q:slot": "summary"
     }, {
-      class: styles$m.summary
+      class: styles$l.summary
     }, [
       /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
         d: mdiHammerScrewdriver,
@@ -4273,7 +4272,7 @@ const ElmAgUiToolExecution = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
       /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, _wrapProp(_rawProps, "toolName"), 1, "o2_1")
     ], 1, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$m.summary
+      class: styles$l.summary
     }, [
       /* @__PURE__ */ _jsxSorted(ElmMdiIcon, {
         color: _rawProps.toolEventType === EventType.TOOL_CALL_START ? "var(--elmethis-color-accent-info)" : "var(--elmethis-color-accent-success)"
@@ -4290,7 +4289,7 @@ const ElmAgUiToolExecution = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
       /* @__PURE__ */ _jsxSorted("div", {
         "q:slot": "summary"
       }, {
-        class: styles$m.summary
+        class: styles$l.summary
       }, [
         /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
           d: mdiCodeJson,
@@ -4304,7 +4303,7 @@ const ElmAgUiToolExecution = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
       }, null, 3, "o2_6")
     ], 1, "o2_7"),
     _rawProps.toolEventType === EventType.TOOL_CALL_START ? null : /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$m.summary
+      class: styles$l.summary
     }, [
       /* @__PURE__ */ _jsxSorted(ElmMdiIcon, {
         color: _rawProps.toolEventType === EventType.TOOL_CALL_ARGS || _rawProps.toolEventType === EventType.TOOL_CALL_END ? "var(--elmethis-color-accent-info)" : "var(--elmethis-color-accent-success)"
@@ -4321,7 +4320,7 @@ const ElmAgUiToolExecution = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
       /* @__PURE__ */ _jsxSorted("div", {
         "q:slot": "summary"
       }, {
-        class: styles$m.summary
+        class: styles$l.summary
       }, [
         /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
           d: mdiCodeJson,
@@ -4346,7 +4345,7 @@ const ElmCopyIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
 }, "ElmCopyIcon_component_F4DnU406zxQ"));
 const image = "_image_1io0s_29";
 const text$1 = "_text_1io0s_35";
-const styles$l = {
+const styles$k = {
   "elm-ag-ui-input-content": "_elm-ag-ui-input-content_1io0s_1",
   "media-component-container": "_media-component-container_1io0s_8",
   "media-component": "_media-component_1io0s_8",
@@ -4361,7 +4360,7 @@ const _hf1$9 = (p0) => p0.source.mimeType;
 const ElmAgUiInputContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const renderTextContent = (text2) => {
     return /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$l["message-content-user-content"]
+      class: styles$k["message-content-user-content"]
     }, text2, 1, "xj_0");
   };
   if (typeof _rawProps.inputContent === "string") {
@@ -4384,22 +4383,22 @@ const ElmAgUiInputContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
         case "document": {
           return /* @__PURE__ */ _jsxSorted(Fragment$1, null, null, /* @__PURE__ */ _jsxSorted("div", {
             class: [
-              styles$l["media-component"],
+              styles$k["media-component"],
               _rawProps.class
             ],
             style: _wrapProp(_rawProps, "style")
           }, null, [
             /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
-              class: styles$l["type-icon"],
+              class: styles$k["type-icon"],
               d: mdiTextBox
             }, null, 3, "xj_3"),
             /* @__PURE__ */ _jsxSorted("div", null, null, /* @__PURE__ */ _jsxSorted("pre", null, {
-              class: styles$l.text
+              class: styles$k.text
             }, _fnSignal(_hf0$h, [
               content2
             ]), 1, null), 1, null),
             /* @__PURE__ */ _jsxSorted("div", null, {
-              class: styles$l["mime-type-label"]
+              class: styles$k["mime-type-label"]
             }, _fnSignal(_hf1$9, [
               content2
             ]), 1, null)
@@ -4413,24 +4412,24 @@ const ElmAgUiInputContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
           const url = source.type === "data" ? `data:${source.mimeType};base64,${source.value}` : source.value;
           mediaComponents.push(/* @__PURE__ */ _jsxSorted("div", {
             class: [
-              styles$l["media-component"],
+              styles$k["media-component"],
               _rawProps.class
             ],
             style: _wrapProp(_rawProps, "style")
           }, null, [
             /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
-              class: styles$l["type-icon"],
+              class: styles$k["type-icon"],
               d: mdiImage
             }, null, 3, "xj_6"),
             /* @__PURE__ */ _jsxSorted("img", {
               src: url
             }, {
-              class: styles$l.image,
+              class: styles$k.image,
               width: 96,
               height: 96
             }, null, 3, null),
             source.mimeType && /* @__PURE__ */ _jsxSorted("div", null, {
-              class: styles$l["mime-type-label"]
+              class: styles$k["mime-type-label"]
             }, _wrapProp(source, "mimeType"), 1, "xj_7")
           ], 1, "xj_8"));
           break;
@@ -4438,10 +4437,10 @@ const ElmAgUiInputContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
       }
     }
     return /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$l["elm-ag-ui-input-content"]
+      class: styles$k["elm-ag-ui-input-content"]
     }, [
       /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$l["media-component-container"]
+        class: styles$k["media-component-container"]
       }, mediaComponents, 1, null),
       texts.length > 0 && renderTextContent(texts.join("\n"))
     ], 1, "xj_9");
@@ -4488,27 +4487,27 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inli
           return /* @__PURE__ */ _jsxSorted(Fragment$1, null, null, [
             message2.toolCalls?.map((toolCall) => renderTool(toolCall, _rawProps.messages)),
             message2.content != null && /* @__PURE__ */ _jsxSorted("div", null, {
-              class: styles$o["message-content-assistant-wrapper"]
+              class: styles$n["message-content-assistant-wrapper"]
             }, [
               /* @__PURE__ */ _jsxSorted("div", null, {
-                class: styles$o["message-content-type"]
+                class: styles$n["message-content-type"]
               }, [
                 /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
-                  class: styles$o["message-content-icon"],
+                  class: styles$n["message-content-icon"],
                   d: mdiCreation
                 }, null, 3, "nO_2"),
                 /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, "Assistant", 3, "nO_3"),
                 /* @__PURE__ */ _jsxSorted("div", null, {
                   "aria-hidden": "true",
-                  class: styles$o["message-content-spacer"]
+                  class: styles$n["message-content-spacer"]
                 }, null, 3, null)
               ], 1, null),
               /* @__PURE__ */ _jsxSorted(ElmMarkdown, null, {
                 markdown: _wrapProp(message2, "content"),
-                streaming: true
+                isStreaming: true
               }, null, 3, "nO_4"),
               !_rawProps.isRunning && /* @__PURE__ */ _jsxSorted("div", null, {
-                class: styles$o["message-content-assistant-actions"]
+                class: styles$n["message-content-assistant-actions"]
               }, [
                 /* @__PURE__ */ _jsxSorted(ElmCopyIcon, null, {
                   content: _wrapProp(message2, "content")
@@ -4516,7 +4515,7 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inli
                 /* @__PURE__ */ _jsxSorted("span", {
                   "q-e:click": _rawProps.handleRetry$
                 }, {
-                  class: styles$o["clickable-icon"]
+                  class: styles$n["clickable-icon"]
                 }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
                   d: mdiRefresh,
                   size: "1.25rem"
@@ -4566,7 +4565,7 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inli
                 opacity: 0.5
               },
               markdown: _wrapProp(mdProps, "markdown"),
-              streaming: true
+              isStreaming: true
             }, null, 3, "nO_10"), 1, "nO_11");
           }, "ElmAgUiMessageRenderer_component_render_Reasoning_component_ReasoningMarkdown_component_shHwKkQAaC8"));
           return /* @__PURE__ */ _jsxSorted(ElmToggle, null, {
@@ -4576,22 +4575,22 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inli
             /* @__PURE__ */ _jsxSorted("div", {
               "q:slot": "summary"
             }, {
-              class: styles$o["message-content-type"]
+              class: styles$n["message-content-type"]
             }, [
               /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
-                class: styles$o["message-content-icon"],
+                class: styles$n["message-content-icon"],
                 d: mdiLightbulbOn
               }, null, 3, "nO_12"),
               /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, "Reasoning", 3, "nO_13"),
               /* @__PURE__ */ _jsxSorted("div", null, {
                 "aria-hidden": "true",
-                class: styles$o["message-content-spacer"]
+                class: styles$n["message-content-spacer"]
               }, null, 3, null)
             ], 1, null),
             /* @__PURE__ */ _jsxSorted("div", {
               class: [
                 {
-                  [styles$o["reasoning-running"]]: props.isReasoningRunning
+                  [styles$n["reasoning-running"]]: props.isReasoningRunning
                 }
               ],
               ref: reasoningRef
@@ -4623,21 +4622,21 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inli
           return "";
         };
         return /* @__PURE__ */ _jsxSorted("div", null, {
-          class: styles$o["message-content-user-wrapper"]
+          class: styles$n["message-content-user-wrapper"]
         }, /* @__PURE__ */ _jsxSorted("div", null, {
-          class: styles$o["message-content-user-inner"]
+          class: styles$n["message-content-user-inner"]
         }, [
           /* @__PURE__ */ _jsxSorted("div", null, {
-            class: styles$o["message-content-type"]
+            class: styles$n["message-content-type"]
           }, [
             /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
-              class: styles$o["message-content-icon"],
+              class: styles$n["message-content-icon"],
               d: mdiAccount
             }, null, 3, "nO_17"),
             /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, "User", 3, "nO_18"),
             /* @__PURE__ */ _jsxSorted("div", null, {
               "aria-hidden": "true",
-              class: styles$o["message-content-spacer"]
+              class: styles$n["message-content-spacer"]
             }, null, 3, null)
           ], 1, null),
           /* @__PURE__ */ _jsxSorted(ElmAgUiInputContent, null, {
@@ -4652,25 +4651,25 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inli
   };
   return /* @__PURE__ */ _jsxSorted("div", {
     class: [
-      styles$o["elm-my-something"],
+      styles$n["elm-my-something"],
       _rawProps.class
     ],
     style: _wrapProp(_rawProps, "style")
   }, null, _rawProps.messages.map((msg, i) => /* @__PURE__ */ _jsxSorted("div", null, null, render(msg, i), 1, msg.id ?? i)), 1, "nO_22");
 }, "ElmAgUiMessageRenderer_component_0OscNQKsfZA"));
-const messages = "_messages_11gxr_20";
-const error = "_error_11gxr_27";
-const styles$k = {
-  "use-agent": "_use-agent_11gxr_1",
-  "agent-container": "_agent-container_11gxr_14",
+const messages = "_messages_q1w8g_20";
+const error$1 = "_error_q1w8g_27";
+const styles$j = {
+  "elm-ag-ui-agent": "_elm-ag-ui-agent_q1w8g_1",
+  "agent-container": "_agent-container_q1w8g_14",
   messages,
-  error,
-  "agent-input-container": "_agent-input-container_11gxr_40",
-  "agent-input": "_agent-input_11gxr_40",
-  "prompt-template-container": "_prompt-template-container_11gxr_52",
-  "prompt-template-tip": "_prompt-template-tip_11gxr_61",
-  "prompt-template-tip-icon": "_prompt-template-tip-icon_11gxr_71",
-  "clickable-icon": "_clickable-icon_11gxr_84"
+  error: error$1,
+  "agent-input-container": "_agent-input-container_q1w8g_40",
+  "agent-input": "_agent-input_q1w8g_40",
+  "prompt-template-container": "_prompt-template-container_q1w8g_52",
+  "prompt-template-tip": "_prompt-template-tip_q1w8g_61",
+  "prompt-template-tip-icon": "_prompt-template-tip-icon_q1w8g_71",
+  "clickable-icon": "_clickable-icon_q1w8g_84"
 };
 const _hf0$f = (p0) => ({
   "--agent-ui-width": p0.width ?? "clamp(300px, 100%, 600px)",
@@ -4736,7 +4735,7 @@ const ElmAgUiAgent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   ]);
   return /* @__PURE__ */ _jsxSorted("div", {
     class: [
-      styles$k["use-agent"],
+      styles$j["elm-ag-ui-agent"],
       props.class
     ],
     ref: containerRef,
@@ -4745,9 +4744,9 @@ const ElmAgUiAgent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     ])
   }, null, [
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$k["agent-container"]
+      class: styles$j["agent-container"]
     }, /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$k["messages"]
+      class: styles$j["messages"]
     }, [
       /* @__PURE__ */ _jsxSorted(ElmAgUiMessageRenderer, {
         handleRetry$: props.retry$
@@ -4761,7 +4760,7 @@ const ElmAgUiAgent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       }, null, 2, "Oj_0"),
       props.state.error && /* @__PURE__ */ _jsxSorted(Fragment$1, null, null, [
         /* @__PURE__ */ _jsxSorted("div", null, {
-          class: styles$k["error"]
+          class: styles$j["error"]
         }, [
           /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
             d: mdiAlert,
@@ -4779,7 +4778,7 @@ const ElmAgUiAgent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         /* @__PURE__ */ _jsxSorted("span", {
           "q-e:click": props.retry$
         }, {
-          class: styles$k["clickable-icon"]
+          class: styles$j["clickable-icon"]
         }, /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
           d: mdiRefresh,
           size: "1.25rem"
@@ -4787,20 +4786,20 @@ const ElmAgUiAgent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       ], 1, "Oj_4")
     ], 1, null), 1, null),
     /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$k["agent-input-container"]
+      class: styles$j["agent-input-container"]
     }, /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles$k["agent-input"]
+      class: styles$j["agent-input"]
     }, [
       !props.state.isRunning && /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles$k["prompt-template-container"]
+        class: styles$j["prompt-template-container"]
       }, props.state.promptTemplates.map((template, index) => /* @__PURE__ */ _jsxSorted("span", {
         "data-template-index": index
       }, {
-        class: styles$k["prompt-template-tip"],
+        class: styles$j["prompt-template-tip"],
         "q-e:click": onTemplateClick$
       }, [
         /* @__PURE__ */ _jsxSorted(ElmMdiIcon, null, {
-          class: styles$k["prompt-template-tip-icon"],
+          class: styles$j["prompt-template-tip-icon"],
           d: mdiForumOutline
         }, null, 3, "Oj_5"),
         /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, _wrapProp(template, "description"), 1, "Oj_6")
@@ -5152,7 +5151,7 @@ function useMcpTools(options) {
   const { servers, clientFactory } = options;
   validateServers$1(servers);
   const tools = useSignal(noSerialize({}));
-  const status = useStore(Object.fromEntries(servers.map((s) => [
+  const status2 = useStore(Object.fromEntries(servers.map((s) => [
     s.id,
     {
       state: "connecting"
@@ -5163,12 +5162,12 @@ function useMcpTools(options) {
   const factoryRef = useSignal(() => clientFactory ?? noSerialize(createMcpClient));
   const reconnectOp = useSignal(void 0);
   useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup }) => {
-    const factoryRef2 = _captures[0], reconnectOp2 = _captures[1], serversRef2 = _captures[2], shouldPrefixRef2 = _captures[3], status2 = _captures[4], tools2 = _captures[5];
+    const factoryRef2 = _captures[0], reconnectOp2 = _captures[1], serversRef2 = _captures[2], shouldPrefixRef2 = _captures[3], status22 = _captures[4], tools2 = _captures[5];
     const handles = /* @__PURE__ */ new Map();
     const open2 = async (cfg) => {
       const factory = factoryRef2.value;
       if (!factory) return;
-      status2[cfg.id] = {
+      status22[cfg.id] = {
         state: "connecting"
       };
       try {
@@ -5185,12 +5184,12 @@ function useMcpTools(options) {
           next[name] = tool;
         }
         tools2.value = noSerialize(next);
-        status2[cfg.id] = {
+        status22[cfg.id] = {
           state: "ready",
           toolCount: descriptors.length
         };
       } catch (err) {
-        status2[cfg.id] = {
+        status22[cfg.id] = {
           state: "error",
           error: err instanceof Error ? err.message : String(err)
         };
@@ -5237,7 +5236,7 @@ function useMcpTools(options) {
     reconnectOp,
     serversRef,
     shouldPrefixRef,
-    status,
+    status2,
     tools
   ]), {
     strategy: "document-ready"
@@ -5252,7 +5251,7 @@ function useMcpTools(options) {
   ]);
   return {
     tools,
-    status,
+    status: status2,
     reconnect$
   };
 }
@@ -5273,7 +5272,7 @@ function useMcpPrompts(options) {
   const { servers, clientFactory } = options;
   validateServers(servers);
   const prompts = useSignal([]);
-  const status = useStore(Object.fromEntries(servers.map((s) => [
+  const status2 = useStore(Object.fromEntries(servers.map((s) => [
     s.id,
     {
       state: "connecting"
@@ -5283,12 +5282,12 @@ function useMcpPrompts(options) {
   const factoryRef = useSignal(() => clientFactory ?? noSerialize(createMcpClient));
   const resolveOp = useSignal(void 0);
   useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup }) => {
-    const factoryRef2 = _captures[0], prompts2 = _captures[1], resolveOp2 = _captures[2], serversRef2 = _captures[3], status2 = _captures[4];
+    const factoryRef2 = _captures[0], prompts2 = _captures[1], resolveOp2 = _captures[2], serversRef2 = _captures[3], status22 = _captures[4];
     const handles = /* @__PURE__ */ new Map();
     const open2 = async (cfg) => {
       const factory = factoryRef2.value;
       if (!factory) return;
-      status2[cfg.id] = {
+      status22[cfg.id] = {
         state: "connecting"
       };
       try {
@@ -5303,12 +5302,12 @@ function useMcpPrompts(options) {
           ...prompts2.value.filter((p) => p.serverId !== cfg.id),
           ...annotated
         ];
-        status2[cfg.id] = {
+        status22[cfg.id] = {
           state: "ready",
           toolCount: descriptors.length
         };
       } catch (err) {
-        status2[cfg.id] = {
+        status22[cfg.id] = {
           state: "error",
           error: err instanceof Error ? err.message : String(err)
         };
@@ -5343,7 +5342,7 @@ function useMcpPrompts(options) {
     prompts,
     resolveOp,
     serversRef,
-    status
+    status2
   ]), {
     strategy: "document-ready"
   });
@@ -5357,70 +5356,10 @@ function useMcpPrompts(options) {
   ]);
   return {
     prompts,
-    status,
+    status: status2,
     resolve$
   };
 }
-const shown = "_shown_pzcyf_13";
-const styles$j = {
-  "elm-modal": "_elm-modal_pzcyf_1",
-  shown
-};
-const ElmModal = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const rest = _restProps(props, [
-    "class",
-    "isOpen",
-    "onClose$"
-  ]);
-  const dialogRef = useSignal();
-  const isShown = useSignal(false);
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track, cleanup }) => {
-    const dialogRef2 = _captures[0], isShown2 = _captures[1], props2 = _captures[2];
-    track(() => props2.isOpen);
-    if (!dialogRef2.value) return;
-    if (props2.isOpen) {
-      dialogRef2.value.showModal();
-      isShown2.value = true;
-    } else {
-      isShown2.value = false;
-      const timer = setTimeout(() => {
-        dialogRef2.value?.close();
-      }, 200);
-      cleanup(() => {
-        clearTimeout(timer);
-      });
-    }
-  }, "ElmModal_component_useVisibleTask_1nydd6wvRjI", [
-    dialogRef,
-    isShown,
-    props
-  ]), {
-    strategy: "document-ready"
-  });
-  const handleClose = /* @__PURE__ */ inlinedQrl((event, element) => {
-    const props2 = _captures[0];
-    props2.onClose$?.(event, element);
-  }, "ElmModal_component_handleClose_0gU4hMZNm0Q", [
-    props
-  ]);
-  return /* @__PURE__ */ _jsxSplit("dialog", {
-    ref: dialogRef,
-    class: [
-      styles$j["elm-modal"],
-      props.class,
-      {
-        [styles$j["shown"]]: isShown.value
-      }
-    ],
-    "q-e:click": handleClose,
-    ...{
-      closedBy: "none"
-    },
-    ..._getVarProps(rest)
-  }, _getConstProps(rest), /* @__PURE__ */ _jsxSorted("div", {
-    "q-e:click": /* @__PURE__ */ inlinedQrl((e) => e.stopPropagation(), "ElmModal_component_dialog_div_q_e_click_Qa7ZVv0yllU")
-  }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Ka_0"), 0, null), 0, "Ka_1");
-}, "ElmModal_component_wvBKav2Nx50"));
 const parallax = "_parallax_z693a_1";
 const styles$i = {
   "parallax-watcher": "_parallax-watcher_z693a_1",
@@ -5460,11 +5399,10 @@ const ElmParallax = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_ra
     }, null, 3, index))
   ], 0, "sq_0");
 }, "ElmParallax_component_EJLLht8TfbM"));
-const original = "_original_ysfyp_1";
-const tooltip = "_tooltip_ysfyp_5";
-const show = "_show_ysfyp_18";
+const tooltip = "_tooltip_1b13f_5";
+const show = "_show_1b13f_18";
 const styles$h = {
-  original,
+  "elm-tooltip": "_elm-tooltip_1b13f_1",
   tooltip,
   show
 };
@@ -5522,7 +5460,7 @@ const ElmTooltip = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
   return /* @__PURE__ */ _jsxSplit("span", {
     ref: elRef,
     class: [
-      styles$h.original,
+      styles$h["elm-tooltip"],
       _rawProps.class
     ],
     "q-e:mouseover": handleMouseOver,
@@ -5547,12 +5485,11 @@ const ElmTooltip = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
   ], 0, "Kf_2");
 }, "ElmTooltip_component_7Z8Jw17rnA4"));
 const styles$g = {
-  "block-fallback": "_block-fallback_1xthk_1"
+  "elm-block-fallback": "_elm-block-fallback_1sx02_1"
 };
-const wrapper$5 = "_wrapper_1xvkv_15";
-const dot = "_dot_1xvkv_25";
+const dot = "_dot_qjgj2_25";
 const styles$f = {
-  wrapper: wrapper$5,
+  "elm-dot-loading-icon": "_elm-dot-loading-icon_qjgj2_15",
   dot
 };
 const _hf0$d = (p0) => ({
@@ -5567,7 +5504,7 @@ const ElmDotLoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQr
   ]);
   return /* @__PURE__ */ _jsxSplit("span", {
     class: [
-      styles$f.wrapper,
+      styles$f["elm-dot-loading-icon"],
       _rawProps.class
     ],
     style: _fnSignal(_hf0$d, [
@@ -5601,7 +5538,7 @@ const ElmBlockFallback = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
   ]);
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$g["block-fallback"],
+      styles$g["elm-block-fallback"],
       _rawProps.class
     ],
     style: _fnSignal(_hf0$c, [
@@ -5613,15 +5550,14 @@ const ElmBlockFallback = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
     /* @__PURE__ */ _jsxSorted(ElmRectangleWave, null, null, null, 3, "Jl_1")
   ], 0, "Jl_2");
 }, "ElmBlockFallback_component_R0mGF6D5fyk"));
-const button = "_button_11605_1";
-const normal = "_normal_11605_23";
-const primary = "_primary_11605_30";
-const colored = "_colored_11605_37";
-const enable = "_enable_11605_41";
-const flex = "_flex_11605_60";
-const ripple = "_ripple_11605_84";
+const normal = "_normal_9qh0y_22";
+const primary = "_primary_9qh0y_29";
+const colored = "_colored_9qh0y_36";
+const enable = "_enable_9qh0y_40";
+const flex = "_flex_9qh0y_59";
+const ripple = "_ripple_9qh0y_83";
 const styles$e = {
-  button,
+  "elm-button": "_elm-button_9qh0y_1",
   normal,
   primary,
   colored,
@@ -5635,14 +5571,14 @@ const ElmButton = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     "class",
     "onClick$",
     "style",
-    "loading",
+    "isLoading",
     "block",
     "color",
     "primary"
   ]);
   const handleClick = /* @__PURE__ */ inlinedQrl(async () => {
     const clicked2 = _captures[0], props2 = _captures[1];
-    if (!props2.loading && !props2.disabled) {
+    if (!props2.isLoading && !props2.disabled) {
       if (props2.onClick$) {
         clicked2.value = true;
         setTimeout(() => clicked2.value = false, 300);
@@ -5656,8 +5592,8 @@ const ElmButton = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
   return /* @__PURE__ */ _jsxSplit("button", {
     "q-e:click": handleClick,
     class: [
-      styles$e.button,
-      !props.loading && !rest.disabled && styles$e.enable,
+      styles$e["elm-button"],
+      !props.isLoading && !rest.disabled && styles$e.enable,
       props.color && styles$e.colored,
       !props.color && !props.primary && styles$e.normal,
       !props.color && props.primary && styles$e.primary,
@@ -5666,8 +5602,8 @@ const ElmButton = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     style: {
       display: props.block ? "flex" : "inline-flex",
       width: props.block ? "100%" : "auto",
-      cursor: rest.disabled ? "not-allowed" : props.loading ? "progress" : "pointer",
-      "--elmethis-scoped-opacity": rest.disabled || props.loading ? 0.6 : void 0,
+      cursor: rest.disabled ? "not-allowed" : props.isLoading ? "progress" : "pointer",
+      "--elmethis-scoped-opacity": rest.disabled || props.isLoading ? 0.6 : void 0,
       "--elmethis-scoped-color": props.color,
       ...props.style
     },
@@ -5676,36 +5612,37 @@ const ElmButton = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     clicked.value && /* @__PURE__ */ _jsxSorted("span", null, {
       class: styles$e.ripple
     }, null, 3, "3N_0"),
-    props.loading ? /* @__PURE__ */ _jsxSorted(ElmDotLoadingIcon, null, {
+    props.isLoading ? /* @__PURE__ */ _jsxSorted(ElmDotLoadingIcon, null, {
       size: "1.5rem"
     }, null, 3, "3N_1") : /* @__PURE__ */ _jsxSorted("span", null, {
       class: styles$e.flex
     }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "3N_2"), 1, "3N_3")
   ], 0, "3N_4");
 }, "ElmButton_component_f1UuOse0UGw"));
-const container$1 = "_container_1plde_1";
-const checkbox = "_checkbox_1plde_22";
-const rect = "_rect_1plde_27";
-const loading$2 = "_loading_1plde_39";
+const disabled$4 = "_disabled_18dfs_12";
+const checkbox = "_checkbox_18dfs_22";
+const rect = "_rect_18dfs_27";
+const loading$2 = "_loading_18dfs_30";
+const checked$1 = "_checked_18dfs_34";
 const styles$d = {
-  container: container$1,
-  "container--disable": "_container--disable_1plde_13",
+  "elm-checkbox": "_elm-checkbox_18dfs_1",
+  disabled: disabled$4,
   checkbox,
   rect,
-  "rect--loading": "_rect--loading_1plde_31",
-  "rect--checked": "_rect--checked_1plde_35",
   loading: loading$2,
-  "check-line": "_check-line_1plde_54"
+  checked: checked$1,
+  "loading-dot": "_loading-dot_18dfs_39",
+  "check-line": "_check-line_18dfs_54"
 };
 const _hf0$b = (p0) => ({
-  opacity: p0.loading ? 1 : 0
+  opacity: p0.isLoading ? 1 : 0
 });
 const ElmCheckbox = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const rest = _restProps(props, [
     "class",
     "label",
-    "loading",
-    "disable",
+    "isLoading",
+    "disabled",
     "checked",
     "defaultChecked"
   ]);
@@ -5715,13 +5652,13 @@ const ElmCheckbox = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   });
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$d.container,
-      props.disable && styles$d["container--disable"],
+      styles$d["elm-checkbox"],
+      props.disabled && styles$d.disabled,
       props.class
     ],
     "q-e:click": /* @__PURE__ */ inlinedQrl(() => {
       const isChecked2 = _captures[0], props2 = _captures[1];
-      if (!props2.loading && !props2.disable) {
+      if (!props2.isLoading && !props2.disabled) {
         isChecked2.value = !isChecked2.value;
       }
     }, "ElmCheckbox_component_div_q_e_click_gkqpEetYEhI", [
@@ -5749,7 +5686,7 @@ const ElmCheckbox = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         cx: "0",
         cy: "0",
         r: "2",
-        class: styles$d.loading
+        class: styles$d["loading-dot"]
       }, [
         /* @__PURE__ */ _jsxSorted("animate", null, {
           attributeName: "cx",
@@ -5776,7 +5713,7 @@ const ElmCheckbox = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         cx: "20",
         cy: "20",
         r: "2",
-        class: styles$d.loading
+        class: styles$d["loading-dot"]
       }, [
         /* @__PURE__ */ _jsxSorted("animate", null, {
           attributeName: "cx",
@@ -5798,8 +5735,8 @@ const ElmCheckbox = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       /* @__PURE__ */ _jsxSorted("rect", {
         class: [
           styles$d.rect,
-          isChecked.value && styles$d["rect--checked"],
-          props.loading && styles$d["rect--loading"]
+          isChecked.value && styles$d.checked,
+          props.isLoading && styles$d.loading
         ]
       }, {
         x: "4",
@@ -5876,23 +5813,22 @@ const ElmCheckbox = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     /* @__PURE__ */ _jsxSorted(ElmInlineText, null, null, _wrapProp(props, "label"), 1, "UZ_1")
   ], 1, null), 0, "UZ_2");
 }, "ElmCheckbox_component_a3MV4MkaYBo"));
-const wrapper$4 = "_wrapper_rwh9z_1";
-const disabled$3 = "_disabled_rwh9z_23";
-const active$2 = "_active_rwh9z_27";
-const label = "_label_rwh9z_31";
-const body$3 = "_body_rwh9z_49";
-const fallback = "_fallback_rwh9z_66";
-const pulldown = "_pulldown_rwh9z_74";
-const option = "_option_rwh9z_59";
+const disabled$3 = "_disabled_1u7w1_23";
+const active$2 = "_active_1u7w1_27";
+const label = "_label_1u7w1_31";
+const body$3 = "_body_1u7w1_49";
+const fallback = "_fallback_1u7w1_66";
+const pulldown = "_pulldown_1u7w1_74";
+const option = "_option_1u7w1_59";
 const styles$c = {
-  wrapper: wrapper$4,
+  "elm-select": "_elm-select_1u7w1_1",
   disabled: disabled$3,
   active: active$2,
   label,
-  "label-active": "_label-active_rwh9z_44",
+  "label-active": "_label-active_1u7w1_44",
   body: body$3,
-  "selected-option": "_selected-option_rwh9z_56",
-  "option-content": "_option-content_rwh9z_59",
+  "selected-option": "_selected-option_1u7w1_56",
+  "option-content": "_option-content_1u7w1_59",
   fallback,
   pulldown,
   option
@@ -5907,7 +5843,7 @@ const ElmSelect = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     "label",
     "placeholder",
     "disabled",
-    "loading",
+    "isLoading",
     "options",
     "selectedOptionId"
   ]);
@@ -5937,17 +5873,17 @@ const ElmSelect = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
   return /* @__PURE__ */ _jsxSplit("div", {
     ref: containerRef,
     class: [
-      styles$c.wrapper,
+      styles$c["elm-select"],
       isOpen.value && styles$c.active,
       props.class,
       {
-        [styles$c.disabled]: props.disabled || props.loading
+        [styles$c.disabled]: props.disabled || props.isLoading
       }
     ],
     style: _wrapProp(props, "style"),
     "q-e:click": /* @__PURE__ */ inlinedQrl(() => {
       const isOpen2 = _captures[0], props2 = _captures[1];
-      if (!props2.disabled && !props2.loading) {
+      if (!props2.disabled && !props2.isLoading) {
         isOpen2.value = !isOpen2.value;
       }
     }, "ElmSelect_component_div_q_e_click_mRy0UU6xCYI", [
@@ -6036,12 +5972,12 @@ const ElmSelect = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     ], 1, null)
   ], 0, "5b_10");
 }, "ElmSelect_component_5jGhwsE6oU0"));
-const bar = "_bar_6xrsu_5";
-const checked = "_checked_6xrsu_19";
-const disabled$2 = "_disabled_6xrsu_24";
-const circle = "_circle_6xrsu_29";
+const bar = "_bar_9s4vz_5";
+const checked = "_checked_9s4vz_21";
+const disabled$2 = "_disabled_9s4vz_26";
+const circle = "_circle_9s4vz_31";
 const styles$b = {
-  "switch": "_switch_6xrsu_1",
+  "switch": "_switch_9s4vz_1",
   bar,
   checked,
   disabled: disabled$2,
@@ -6102,21 +6038,20 @@ const ElmSwitch = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     }, null, null, 3, null), 1, null)
   ], 0, "hS_0");
 }, "ElmSwitch_component_vkfpyHRHmhQ"));
-const loading$1 = "_loading_kn3x0_23";
-const wrapper$3 = "_wrapper_kn3x0_37";
-const disabled$1 = "_disabled_kn3x0_63";
-const active$1 = "_active_kn3x0_67";
-const header$2 = "_header_kn3x0_72";
-const requierd$1 = "_requierd_kn3x0_90";
-const body$2 = "_body_kn3x0_96";
-const textarea = "_textarea_kn3x0_101";
+const loading$1 = "_loading_lgmx3_23";
+const disabled$1 = "_disabled_lgmx3_63";
+const active$1 = "_active_lgmx3_67";
+const header$2 = "_header_lgmx3_72";
+const requierd$1 = "_requierd_lgmx3_90";
+const body$2 = "_body_lgmx3_96";
+const textarea = "_textarea_lgmx3_101";
 const styles$a = {
   loading: loading$1,
-  wrapper: wrapper$3,
+  "elm-text-area": "_elm-text-area_lgmx3_37",
   disabled: disabled$1,
   active: active$1,
   header: header$2,
-  "label-active": "_label-active_kn3x0_85",
+  "label-active": "_label-active_lgmx3_85",
   requierd: requierd$1,
   body: body$2,
   textarea
@@ -6125,12 +6060,12 @@ const _hf0$8 = (p0) => p0.maxLength != null && p0.value.value.length > p0.maxLen
 const _hf1$5 = (p0) => p0.maxLength != null ? `${p0.value.value.length} / ${p0.maxLength}` : `${p0.value.value.length}`;
 const _hf2$3 = (p0) => p0.value?.value;
 const _hf3$3 = (p0) => p0.rows ?? 3;
-const _hf4$2 = (p0) => p0.disabled || p0.loading;
+const _hf4$2 = (p0) => p0.disabled || p0.isLoading;
 const _hf5$2 = (p0) => ({
-  cursor: p0.disabled ? "not-allowed" : p0.loading ? "progress" : "auto"
+  cursor: p0.disabled ? "not-allowed" : p0.isLoading ? "progress" : "auto"
 });
 const _hf6$1 = (p0) => ({
-  opacity: p0.loading ? 1 : 0
+  opacity: p0.isLoading ? 1 : 0
 });
 const ElmTextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const rest = _restProps(props, [
@@ -6140,7 +6075,7 @@ const ElmTextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     "maxLength",
     "placeholder",
     "disabled",
-    "loading",
+    "isLoading",
     "required",
     "value",
     "rows"
@@ -6148,11 +6083,11 @@ const ElmTextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   const isFocused = useSignal(false);
   return /* @__PURE__ */ _jsxSplit("label", {
     class: [
-      styles$a.wrapper,
+      styles$a["elm-text-area"],
       isFocused.value && styles$a.active,
       props.class,
       {
-        [styles$a.disabled]: props.disabled || props.loading
+        [styles$a.disabled]: props.disabled || props.isLoading
       }
     ],
     style: _wrapProp(props, "style"),
@@ -6225,37 +6160,36 @@ const ElmTextArea = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     }, null, 3, null)
   ], 0, "RT_4");
 }, "ElmTextArea_component_eI5Hurm0OV8"));
-const loading = "_loading_mpxha_23";
-const wrapper$2 = "_wrapper_mpxha_37";
-const disabled = "_disabled_mpxha_59";
-const active = "_active_mpxha_63";
-const header$1 = "_header_mpxha_68";
-const requierd = "_requierd_mpxha_86";
-const body$1 = "_body_mpxha_92";
-const input = "_input_mpxha_100";
+const loading = "_loading_11box_23";
+const disabled = "_disabled_11box_59";
+const active = "_active_11box_63";
+const header$1 = "_header_11box_68";
+const requierd = "_requierd_11box_86";
+const body$1 = "_body_11box_92";
+const input = "_input_11box_100";
 const styles$9 = {
   loading,
-  wrapper: wrapper$2,
+  "elm-text-field": "_elm-text-field_11box_37",
   disabled,
   active,
   header: header$1,
-  "label-active": "_label-active_mpxha_81",
+  "label-active": "_label-active_11box_81",
   requierd,
   body: body$1,
   input,
-  "right-icon-box": "_right-icon-box_mpxha_121",
-  "clickable-icon": "_clickable-icon_mpxha_126",
-  "prefix-suffix": "_prefix-suffix_mpxha_142"
+  "right-icon-box": "_right-icon-box_11box_121",
+  "clickable-icon": "_clickable-icon_11box_126",
+  "prefix-suffix": "_prefix-suffix_11box_142"
 };
 const _hf0$7 = (p0) => p0.maxLength != null && p0.value.value.length > p0.maxLength ? "var(--elmethis-color-accent-error)" : "gray";
 const _hf1$4 = (p0) => p0.maxLength != null ? `${p0.value.value.length} / ${p0.maxLength}` : `${p0.value.value.length}`;
 const _hf2$2 = (p0) => p0.value?.value;
-const _hf3$2 = (p0) => p0.disabled || p0.loading;
+const _hf3$2 = (p0) => p0.disabled || p0.isLoading;
 const _hf4$1 = (p0) => ({
-  cursor: p0.disabled ? "not-allowed" : p0.loading ? "progress" : "auto"
+  cursor: p0.disabled ? "not-allowed" : p0.isLoading ? "progress" : "auto"
 });
 const _hf5$1 = (p0) => ({
-  opacity: p0.loading ? 1 : 0
+  opacity: p0.isLoading ? 1 : 0
 });
 const ElmTextField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const rest = _restProps(props, [
@@ -6267,7 +6201,7 @@ const ElmTextField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     "suffix",
     "placeholder",
     "disabled",
-    "loading",
+    "isLoading",
     "value",
     "isPassword",
     "required"
@@ -6276,11 +6210,11 @@ const ElmTextField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   const inputType = useSignal(props.isPassword ? "password" : "text");
   return /* @__PURE__ */ _jsxSplit("label", {
     class: [
-      styles$9.wrapper,
+      styles$9["elm-text-field"],
       isFocused.value && styles$9.active,
       props.class,
       {
-        [styles$9.disabled]: props.disabled || props.loading
+        [styles$9.disabled]: props.disabled || props.isLoading
       }
     ],
     style: _wrapProp(props, "style"),
@@ -6355,7 +6289,7 @@ const ElmTextField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         /* @__PURE__ */ _jsxSorted("div", {
           "q-e:click": /* @__PURE__ */ inlinedQrl(() => {
             const inputType2 = _captures[0], props2 = _captures[1];
-            if (!props2.loading && !props2.disabled) {
+            if (!props2.isLoading && !props2.disabled) {
               inputType2.value = inputType2.value === "text" ? "password" : "text";
             }
           }, "ElmTextField_component_label_div_div_div_q_e_click_WaJ8NfQOs4Q", [
@@ -6373,7 +6307,7 @@ const ElmTextField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
         /* @__PURE__ */ _jsxSorted("div", {
           "q-e:click": /* @__PURE__ */ inlinedQrl(() => {
             const props2 = _captures[0];
-            if (!props2.loading && !props2.disabled && props2.value) {
+            if (!props2.isLoading && !props2.disabled && props2.value) {
               props2.value.value = "";
             }
           }, "ElmTextField_component_label_div_div_div_q_e_click_1_1vCztIHPnMw", [
@@ -6397,9 +6331,8 @@ const ElmTextField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     }, null, 3, null)
   ], 0, "3a_8");
 }, "ElmTextField_component_7yeLskO1oF0"));
-const validation = "_validation_1bh7c_1";
 const styles$8 = {
-  validation
+  "elm-validation": "_elm-validation_1cigg_1"
 };
 const _hf0$6 = (p0) => ({
   "--elmethis-scoped-opacity": p0.isValid ? 1 : 0.5,
@@ -6416,7 +6349,7 @@ const ElmValidation = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
   ]);
   return /* @__PURE__ */ _jsxSplit("div", {
     class: [
-      styles$8.validation,
+      styles$8["elm-validation"],
       _rawProps.class
     ],
     style: _fnSignal(_hf0$6, [
@@ -6846,39 +6779,6 @@ function useElmethisTheme() {
     toggleTheme
   };
 }
-const useInView = (props) => {
-  const ref = useSignal();
-  const isVisible = useSignal(props?.defaultValue ?? false);
-  useVisibleTaskQrl(
-    /* @__PURE__ */ inlinedQrl(() => {
-      const isVisible2 = _captures[0], ref2 = _captures[1];
-      if (!ref2.value) return;
-      const observer = new IntersectionObserver(([entry]) => {
-        isVisible2.value = entry.isIntersecting;
-      }, {
-        rootMargin: "100px",
-        threshold: 0.1
-      });
-      observer.observe(ref2.value);
-      return () => observer.disconnect();
-    }, "useInView_useVisibleTask_dCSguHRVxN4", [
-      isVisible,
-      ref
-    ]),
-    // The default `intersection-observer` strategy never fires when the host
-    // is mounted inside a subtree that starts hidden (e.g. <ElmCollapse>), so
-    // a `useInView` consumer in that subtree would be permanently stuck at
-    // `isVisible: false`. `document-ready` fires once the DOM is parsed, then
-    // our own IntersectionObserver does the actual visibility tracking.
-    {
-      strategy: "document-ready"
-    }
-  );
-  return {
-    ref,
-    isVisible
-  };
-};
 const resolveStorage = (area) => area === "local" ? localStorage : sessionStorage;
 const useStorage = (_rawProps) => {
   const state = useSignal(_rawProps.initialValue);
@@ -6994,10 +6894,9 @@ const useSessionStorage = (_rawProps) => {
     channel: `elmethis:sessionStorage:${_rawProps.key}`
   });
 };
-const wrapper$1 = "_wrapper_17g64_19";
-const square = "_square_17g64_28";
+const square = "_square_m72nq_28";
 const styles$7 = {
-  wrapper: wrapper$1,
+  "elm-square-loading-icon": "_elm-square-loading-icon_m72nq_19",
   square
 };
 const _hf0$5 = (p0) => ({
@@ -7016,7 +6915,7 @@ const ElmSquareLoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
   const DELAY = 1200 / ((_rawProps.dimensions ?? 4) * 3);
   return /* @__PURE__ */ _jsxSplit("span", {
     class: [
-      styles$7.wrapper,
+      styles$7["elm-square-loading-icon"],
       _rawProps.class
     ],
     style: _fnSignal(_hf0$5, [
@@ -7031,16 +6930,15 @@ const ElmSquareLoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inline
     class: styles$7.square
   }, null, 3, `${rowIndex}-${columnIndex}`))), 0, "dY_0");
 }, "ElmSquareLoadingIcon_component_URq2y0Vp5Ws"));
-const icon$1 = "_icon_1oksx_1";
 const styles$6 = {
-  icon: icon$1
+  "elm-toggle-theme": "_elm-toggle-theme_11awq_1"
 };
 const _hf0$4 = (p0) => p0.size ?? "2rem";
 const ElmToggleTheme = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
   const elmethistheme = useElmethisTheme();
   return /* @__PURE__ */ _jsxSorted(Fragment$1, null, null, !elmethistheme.isDarkTheme.value ? /* @__PURE__ */ _jsxSorted("svg", {
     class: [
-      styles$6.icon,
+      styles$6["elm-toggle-theme"],
       _rawProps.class
     ],
     height: _fnSignal(_hf0$4, [
@@ -7244,7 +7142,7 @@ const ElmToggleTheme = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     ], 3, null)
   ], 2, "7Z_0") : /* @__PURE__ */ _jsxSorted("svg", {
     class: [
-      styles$6.icon,
+      styles$6["elm-toggle-theme"],
       _rawProps.class
     ],
     height: _fnSignal(_hf0$4, [
@@ -7485,13 +7383,12 @@ const ElmToggleTheme = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     ], 3, null)
   ], 2, "7Z_1"), 1, "7Z_2");
 }, "ElmToggleTheme_component_UCPPH0ZjWO4"));
-const container = "_container_19tkl_1";
-const icon = "_icon_19tkl_23";
-const chunk = "_chunk_19tkl_36";
-const chevron = "_chevron_19tkl_41";
+const icon = "_icon_13oke_23";
+const chunk = "_chunk_13oke_36";
+const chevron = "_chevron_13oke_41";
 const styles$5 = {
-  container,
-  "link-container": "_link-container_19tkl_9",
+  "elm-breadcrumb": "_elm-breadcrumb_13oke_1",
+  "link-container": "_link-container_13oke_9",
   icon,
   chunk,
   chevron
@@ -7503,7 +7400,7 @@ const ElmBreadcrumb = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
   ]);
   return /* @__PURE__ */ _jsxSplit("nav", {
     class: [
-      styles$5.container,
+      styles$5["elm-breadcrumb"],
       _rawProps.class
     ],
     ..._getVarProps(props)
@@ -7530,14 +7427,14 @@ const ElmBreadcrumb = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_
     }, null, 3, "wL_1")
   ], 1, "wL_2")), 0, "wL_3");
 }, "ElmBreadcrumb_component_Bm4cHEZjNRM"));
-const wrapper = "_wrapper_1uubg_1";
-const partial = "_partial_1uubg_30";
-const text = "_text_1uubg_67";
+const visible = "_visible_18d6m_30";
+const partial = "_partial_18d6m_37";
+const text = "_text_18d6m_74";
 const styles$4 = {
-  wrapper,
+  "elm-page-top": "_elm-page-top_18d6m_1",
+  visible,
   partial,
-  text,
-  "wrapper--visible": "_wrapper--visible_1uubg_122"
+  text
 };
 const _hf0$3 = (p0) => ({
   "--elmethis-scoped-size": `${64}px`,
@@ -7575,9 +7472,9 @@ const ElmPageTop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_raw
   }, "ElmPageTop_component_toTop_40Bu5QRIQBE");
   return /* @__PURE__ */ _jsxSplit("nav", {
     class: [
-      styles$4.wrapper,
+      styles$4["elm-page-top"],
       {
-        [styles$4["wrapper--visible"]]: isVisible.value
+        [styles$4.visible]: isVisible.value
       },
       _rawProps.class
     ],
@@ -8433,35 +8330,40 @@ const ElmJarkup = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
     ..._getVarProps(rest)
   }, _getConstProps(rest), render(props.jsonComponents), 0, "Ck_5");
 }, "ElmJarkup_component_v1hxPALYrDQ"));
-const wordle = "_wordle_j0hdx_1";
-const board = "_board_j0hdx_41";
-const row = "_row_j0hdx_47";
-const cell = "_cell_j0hdx_52";
-const keyboard = "_keyboard_j0hdx_100";
-const key = "_key_j0hdx_100";
+const error = "_error_1llms_26";
+const status = "_status_1llms_32";
+const board = "_board_1llms_41";
+const row = "_row_1llms_47";
+const cell = "_cell_1llms_52";
+const empty = "_empty_1llms_68";
+const tbd = "_tbd_1llms_74";
+const correct = "_correct_1llms_80";
+const present = "_present_1llms_86";
+const absent = "_absent_1llms_92";
+const keyboard = "_keyboard_1llms_100";
+const key = "_key_1llms_100";
+const wide = "_wide_1llms_137";
+const hidden = "_hidden_1llms_159";
 const styles = {
-  wordle,
-  "message-area": "_message-area_j0hdx_11",
-  "message-area--error": "_message-area--error_j0hdx_27",
-  "message-area--status": "_message-area--status_j0hdx_33",
+  "elm-wordle": "_elm-wordle_1llms_1",
+  "message-area": "_message-area_1llms_11",
+  error,
+  status,
   board,
   row,
   cell,
-  "cell--empty": "_cell--empty_j0hdx_69",
-  "cell--tbd": "_cell--tbd_j0hdx_75",
-  "cell--correct": "_cell--correct_j0hdx_81",
-  "cell--present": "_cell--present_j0hdx_87",
-  "cell--absent": "_cell--absent_j0hdx_93",
+  empty,
+  tbd,
+  correct,
+  present,
+  absent,
   keyboard,
-  "keyboard-row": "_keyboard-row_j0hdx_108",
+  "keyboard-row": "_keyboard-row_1llms_108",
   key,
-  "key--wide": "_key--wide_j0hdx_138",
-  "key--correct": "_key--correct_j0hdx_143",
-  "key--present": "_key--present_j0hdx_147",
-  "key--absent": "_key--absent_j0hdx_151",
-  "reset-container": "_reset-container_j0hdx_156",
-  "reset-container--hidden": "_reset-container--hidden_j0hdx_160",
-  "reset-button": "_reset-button_j0hdx_164"
+  wide,
+  "reset-container": "_reset-container_1llms_156",
+  hidden,
+  "reset-button": "_reset-button_1llms_164"
 };
 const WORDS = [
   "which",
@@ -25003,11 +24905,11 @@ const useWordle = (options) => {
     const updatedStatuses = {
       ...letterStatuses2.value
     };
-    for (const { letter, status } of result) {
+    for (const { letter, status: status2 } of result) {
       const current = updatedStatuses[letter];
       if (current !== "correct") {
-        if (status === "correct" || current !== "present") {
-          updatedStatuses[letter] = status;
+        if (status2 === "correct" || current !== "present") {
+          updatedStatuses[letter] = status2;
         }
       }
     }
@@ -25081,11 +24983,11 @@ const useWordle = (options) => {
         return /* @__PURE__ */ _jsxSorted("div", {
           class: [
             styles["cell"],
-            cellStatus === "correct" && styles["cell--correct"],
-            cellStatus === "present" && styles["cell--present"],
-            cellStatus === "absent" && styles["cell--absent"],
-            cellStatus === "tbd" && styles["cell--tbd"],
-            cellStatus === "empty" && styles["cell--empty"]
+            cellStatus === "correct" && styles["correct"],
+            cellStatus === "present" && styles["present"],
+            cellStatus === "absent" && styles["absent"],
+            cellStatus === "tbd" && styles["tbd"],
+            cellStatus === "empty" && styles["empty"]
           ]
         }, null, letter, 1, colIndex);
       });
@@ -25094,12 +24996,12 @@ const useWordle = (options) => {
       }, cells, 1, rowIndex);
     });
     return /* @__PURE__ */ _jsxSorted("div", null, {
-      class: styles["wordle"]
+      class: styles["elm-wordle"]
     }, [
       /* @__PURE__ */ _jsxSorted("div", {
         class: [
           styles["message-area"],
-          errorMessage2.value ? styles["message-area--error"] : gameStatus2.value !== "playing" ? styles["message-area--status"] : void 0
+          errorMessage2.value ? styles["error"] : gameStatus2.value !== "playing" ? styles["status"] : void 0
         ]
       }, {
         "aria-live": "polite"
@@ -25107,44 +25009,47 @@ const useWordle = (options) => {
       /* @__PURE__ */ _jsxSorted("div", null, {
         class: styles["board"]
       }, rows, 1, null),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles["keyboard"]
-      }, KEYBOARD_ROWS.map((row2, rowIndex) => /* @__PURE__ */ _jsxSorted("div", null, {
-        class: styles["keyboard-row"]
-      }, row2.map((key2) => {
-        const lowerKey = key2.toLowerCase();
-        const keyStatus = letterStatuses2.value[lowerKey];
-        const qrl_4294901764 = /* @__PURE__ */ inlinedQrl((_, _1, key22) => {
-          const addLetter3 = _captures[0], removeLetter3 = _captures[1], submit3 = _captures[2];
-          if (key22 === "Enter") {
+      /* @__PURE__ */ _jsxSorted("div", {
+        "q-e:click": /* @__PURE__ */ inlinedQrl((event, _1, addLetter3, removeLetter3, submit3) => {
+          const button2 = event.target.closest("button[data-key]");
+          const key2 = button2?.dataset.key;
+          if (!key2) return;
+          if (key2 === "Enter") {
             submit3();
-          } else if (key22 === "⌫") {
+          } else if (key2 === "⌫") {
             removeLetter3();
           } else {
-            addLetter3(key22);
+            addLetter3(key2);
           }
-        }, "useWordle_Wordle_component_div_div_div_button_q_e_click_U10sV5Kq4pw", [
+        }, "useWordle_Wordle_component_div_div_q_e_click_Plq0gr08B0I"),
+        "q:ps": [
           addLetter2,
           removeLetter2,
           submit2
-        ]);
+        ]
+      }, {
+        class: styles["keyboard"]
+      }, KEYBOARD_ROWS.map((row2, rowIndex) => /* @__PURE__ */ _jsxSorted("div", null, {
+        class: styles["keyboard-row"]
+      }, row2.map((key2) => {
+        const lowerKey = key2.toLowerCase();
+        const keyStatus = letterStatuses2.value[lowerKey];
         return /* @__PURE__ */ _jsxSorted("button", {
           class: [
             styles["key"],
-            key2 === "Enter" && styles["key--wide"],
-            key2 === "⌫" && styles["key--wide"],
-            keyStatus === "correct" && styles["key--correct"],
-            keyStatus === "present" && styles["key--present"],
-            keyStatus === "absent" && styles["key--absent"]
+            key2 === "Enter" && styles["wide"],
+            key2 === "⌫" && styles["wide"],
+            keyStatus === "correct" && styles["correct"],
+            keyStatus === "present" && styles["present"],
+            keyStatus === "absent" && styles["absent"]
           ],
-          "q-e:click": qrl_4294901764,
-          "q:p": key2
-        }, null, key2, 4, key2);
-      }), 1, rowIndex)), 1, null),
+          "data-key": key2
+        }, null, key2, 1, key2);
+      }), 1, rowIndex)), 4, null),
       /* @__PURE__ */ _jsxSorted("div", {
         class: [
           styles["reset-container"],
-          gameStatus2.value === "playing" && styles["reset-container--hidden"]
+          gameStatus2.value === "playing" && styles["hidden"]
         ]
       }, null, /* @__PURE__ */ _jsxSorted("button", null, {
         class: styles["reset-button"],
@@ -25287,7 +25192,6 @@ export {
   useDebouncedStore,
   useDelayedSignal,
   useElmethisTheme,
-  useInView,
   useLocalStorage,
   useMcpPrompts,
   useMcpTools,