@elmethis/qwik 1.0.0-alpha.27 → 1.0.0-alpha.29

package/lib/index.qwik.cjs

@@ -44,7 +44,7 @@ const autoAnimate = require("@formkit/auto-animate");
 const esToolkit = require("es-toolkit");
 const tab = "_tab_1fco0_14";
 const active$3 = "_active_1fco0_37";
-const styles$R = {
+const styles$S = {
   "elm-tabs": "_elm-tabs_1fco0_1",
   "tab-container": "_tab-container_1fco0_14",
   tab,
@@ -57,7 +57,7 @@ const open$1 = "_open_12wiu_11";
 const column$1 = "_column_12wiu_16";
 const both = "_both_12wiu_27";
 const inner = "_inner_12wiu_44";
-const styles$Q = {
+const styles$R = {
   "elm-collapse": "_elm-collapse_12wiu_1",
   row: row$2,
   open: open$1,
@@ -65,7 +65,7 @@ const styles$Q = {
   both,
   inner
 };
-const _hf0$A = (p0) => ({
+const _hf0$B = (p0) => ({
   "--elmethis-scoped-transition-timing-function": p0.transitionTimingFunction ?? "ease-in-out"
 });
 const ElmCollapse = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -77,28 +77,28 @@ const ElmCollapse = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$Q["elm-collapse"],
+      styles$R["elm-collapse"],
       {
-        [styles$Q["open"]]: _rawProps.isOpen,
-        [styles$Q["row"]]: (_rawProps.direction ?? "row") === "row",
-        [styles$Q["column"]]: (_rawProps.direction ?? "row") === "column",
-        [styles$Q["both"]]: (_rawProps.direction ?? "row") === "both"
+        [styles$R["open"]]: _rawProps.isOpen,
+        [styles$R["row"]]: (_rawProps.direction ?? "row") === "row",
+        [styles$R["column"]]: (_rawProps.direction ?? "row") === "column",
+        [styles$R["both"]]: (_rawProps.direction ?? "row") === "both"
       },
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$A, [
+    style: core$1._fnSignal(_hf0$B, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), /* @__PURE__ */ core$1._jsxSorted("div", null, {
-    class: styles$Q["inner"]
+    class: styles$R["inner"]
   }, /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "iE_0"), 1, null), 0, "iE_1");
 }, "ElmCollapse_component_P0XF5bWlJxw"));
 function useBindableSignal({ signal, defaultValue }) {
   const internal = core$1.useSignal(defaultValue);
   return signal ?? internal;
 }
-const _hf0$z = (p0, p1) => p0.selectedValue.value === p1.value;
+const _hf0$A = (p0, p1) => p0.selectedValue.value === p1.value;
 const ElmTabsContext = core$1.createContextId("elmethis.tabs");
 const ElmTabs = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
@@ -117,7 +117,7 @@ const ElmTabs = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
   });
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$R["elm-tabs"],
+      styles$S["elm-tabs"],
       props.class
     ],
     ...core$1._getVarProps(rest)
@@ -129,7 +129,7 @@ const ElmTabList = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$R["tab-container"],
+      styles$S["tab-container"],
       _rawProps.class
     ],
     ...core$1._getVarProps(rest)
@@ -150,9 +150,9 @@ const ElmTab = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inline
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$R["tab"],
+      styles$S["tab"],
       {
-        [styles$R["active"]]: ctx.selectedValue.value === props.value
+        [styles$S["active"]]: ctx.selectedValue.value === props.value
       },
       props.class
     ],
@@ -168,19 +168,19 @@ const ElmTabPanel = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   const ctx = core$1.useContext(ElmTabsContext);
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
-      styles$R["tab-content"],
+      styles$S["tab-content"],
       props.class
     ],
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), /* @__PURE__ */ core$1._jsxSorted(ElmCollapse, null, {
     direction: "row",
-    isOpen: core$1._fnSignal(_hf0$z, [
+    isOpen: core$1._fnSignal(_hf0$A, [
       ctx,
       props
     ]),
     transitionTimingFunction: core$1._wrapProp(ctx, "transitionTimingFunction")
   }, /* @__PURE__ */ core$1._jsxSorted("div", null, {
-    class: styles$R["tab-content-inner"]
+    class: styles$S["tab-content-inner"]
   }, /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "lK_6"), 1, null), 1, "lK_7"), 0, "lK_8");
 }, "ElmTabPanel_component_4GhH207NkRY"));
 const h1 = "_h1_9vw8y_13";
@@ -189,7 +189,7 @@ const h3 = "_h3_9vw8y_72";
 const h4 = "_h4_9vw8y_87";
 const h5 = "_h5_9vw8y_91";
 const h6 = "_h6_9vw8y_95";
-const styles$P = {
+const styles$Q = {
   "elm-heading": "_elm-heading_9vw8y_1",
   h1,
   h2,
@@ -203,7 +203,7 @@ const text$2 = "_text_zme4t_1";
 const textStyles = {
   text: text$2
 };
-const styles$O = {
+const styles$P = {
   "elm-fragment-identifier": "_elm-fragment-identifier_xb2v4_1"
 };
 const ElmFragmentIdentifier = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -224,7 +224,7 @@ const ElmFragmentIdentifier = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ *
   }, "ElmFragmentIdentifier_component_handleHashClick_0I1su3qeCsY");
   return /* @__PURE__ */ core$1._jsxSplit("span", {
     class: [
-      styles$O["elm-fragment-identifier"],
+      styles$P["elm-fragment-identifier"],
       _rawProps.class
     ],
     "q-e:click": /* @__PURE__ */ core$1.inlinedQrl((_, _1, _rawProps2, handleHashClick2) => handleHashClick2(_rawProps2.id), "ElmFragmentIdentifier_component_span_q_e_click_acZZ1kAS1Ek"),
@@ -254,9 +254,9 @@ const ElmHeading = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
   const Tag = `h${_rawProps.level}`;
   return /* @__PURE__ */ core$1._jsxSplit(Tag, {
     class: [
-      styles$P["elm-heading"],
+      styles$Q["elm-heading"],
       textStyles.text,
-      styles$P[`h${_rawProps.level}`],
+      styles$Q[`h${_rawProps.level}`],
       _rawProps.class
     ],
     style: {
@@ -276,7 +276,7 @@ const ElmHeading = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
       id: core$1._wrapProp(_rawProps, "id")
     }, null, 3, "sL_1"), 1, "sL_2"),
     _rawProps.level === 2 && /* @__PURE__ */ core$1._jsxSorted("span", null, {
-      class: styles$P["h2-underline"],
+      class: styles$Q["h2-underline"],
       "aria-hidden": "true"
     }, null, 3, "sL_3")
   ], 0, "sL_4");
@@ -284,17 +284,17 @@ const ElmHeading = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
 const code$1 = "_code_uf3sg_13";
 const kbd = "_kbd_uf3sg_25";
 const link$1 = "_link_uf3sg_58";
-const styles$N = {
+const styles$O = {
   "elm-inline-text": "_elm-inline-text_uf3sg_1",
   code: code$1,
   kbd,
   link: link$1
 };
-const styles$M = {
+const styles$N = {
   "elm-inline-icon": "_elm-inline-icon_1qs0i_1"
 };
-const _hf0$y = (p0) => p0.width ?? p0.size ?? 16;
-const _hf1$i = (p0) => p0.height ?? p0.size ?? 16;
+const _hf0$z = (p0) => p0.width ?? p0.size ?? 16;
+const _hf1$j = (p0) => p0.height ?? p0.size ?? 16;
 const ElmInlineIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -306,24 +306,24 @@ const ElmInlineIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("span", {
     class: [
-      styles$M["elm-inline-icon"],
+      styles$N["elm-inline-icon"],
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), /* @__PURE__ */ core$1._jsxSorted("img", {
     alt: core$1._wrapProp(_rawProps, "alt"),
-    height: core$1._fnSignal(_hf1$i, [
+    height: core$1._fnSignal(_hf1$j, [
       _rawProps
     ]),
     src: core$1._wrapProp(_rawProps, "src"),
-    width: core$1._fnSignal(_hf0$y, [
+    width: core$1._fnSignal(_hf0$z, [
       _rawProps
     ])
   }, {
-    class: styles$M["elm-inline-icon"]
+    class: styles$N["elm-inline-icon"]
   }, null, 3, null), 0, "D4_0");
 }, "ElmInlineIcon_component_9LkENpSGozA"));
-const _hf0$x = (p0) => ({
+const _hf0$y = (p0) => ({
   ...p0.style,
   "--elmethis-scoped-color": p0.color,
   "--elmethis-scoped-font-size": p0.size ?? "1em",
@@ -351,7 +351,7 @@ const ElmInlineText = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     vnode = /* @__PURE__ */ core$1._jsxSorted("a", {
       href: core$1._wrapProp(_rawProps, "href")
     }, {
-      class: styles$N.link,
+      class: styles$O.link,
       target: "_blank",
       rel: "noopener noreferrer"
     }, [
@@ -363,18 +363,18 @@ const ElmInlineText = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     ], 1, "7t_2");
   }
   if (_rawProps.kbd ?? false) vnode = /* @__PURE__ */ core$1._jsxSorted("kbd", null, {
-    class: styles$N.kbd
+    class: styles$O.kbd
   }, vnode, 1, "7t_3");
   if (_rawProps.strikethrough ?? false) vnode = /* @__PURE__ */ core$1._jsxSorted("del", null, null, vnode, 1, "7t_4");
   if (_rawProps.italic ?? false) vnode = /* @__PURE__ */ core$1._jsxSorted("em", null, null, vnode, 1, "7t_5");
   if (_rawProps.underline ?? false) vnode = /* @__PURE__ */ core$1._jsxSorted("ins", null, null, vnode, 1, "7t_6");
   if (_rawProps.bold ?? false) vnode = /* @__PURE__ */ core$1._jsxSorted("strong", null, null, vnode, 1, "7t_7");
   if (_rawProps.code ?? false) vnode = /* @__PURE__ */ core$1._jsxSorted("code", null, {
-    class: styles$N.code
+    class: styles$O.code
   }, vnode, 1, "7t_8");
   if (_rawProps.ruby) {
     vnode = /* @__PURE__ */ core$1._jsxSorted("ruby", null, {
-      class: styles$N["elm-inline-text"]
+      class: styles$O["elm-inline-text"]
     }, [
       /* @__PURE__ */ core$1._jsxSorted("span", null, null, vnode, 1, null),
       /* @__PURE__ */ core$1._jsxSorted("rt", null, null, core$1._wrapProp(_rawProps, "ruby"), 1, null)
@@ -382,20 +382,20 @@ const ElmInlineText = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
   }
   return /* @__PURE__ */ core$1._jsxSplit("span", {
     class: [
-      styles$N["elm-inline-text"],
+      styles$O["elm-inline-text"],
       textStyles.text,
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$x, [
+    style: core$1._fnSignal(_hf0$y, [
       _rawProps
     ]),
     ...core$1._getVarProps(rest)
   }, core$1._getConstProps(rest), vnode, 0, "7t_10");
 }, "ElmInlineText_component_MdjKbLJ3SR0"));
-const styles$L = {
+const styles$M = {
   "elm-paragraph": "_elm-paragraph_rbsk5_1"
 };
-const _hf0$w = (p0) => ({
+const _hf0$x = (p0) => ({
   ...p0.style,
   "--elmethis-scoped-color": p0.color,
   "--elmethis-scoped-background-color": p0.backgroundColor
@@ -409,11 +409,11 @@ const ElmParagraph = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("p", {
     class: [
-      styles$L["elm-paragraph"],
+      styles$M["elm-paragraph"],
       textStyles.text,
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$w, [
+    style: core$1._fnSignal(_hf0$x, [
       _rawProps
     ]),
     ...core$1._getVarProps(props)
@@ -435,7 +435,7 @@ const slider = "_slider_4ps3c_192";
 const modal = "_modal_4ps3c_199";
 const video = "_video_4ps3c_209";
 const audio = "_audio_4ps3c_210";
-const styles$K = {
+const styles$L = {
   "elm-a2ui": "_elm-a2ui_4ps3c_1",
   surface: surface$1,
   row: row$1,
@@ -533,8 +533,8 @@ function firstChildMargin(index) {
     marginBlockStart: 0
   } : void 0;
 }
-const _hf0$v = (p0) => p0.props.min ?? 0;
-const _hf1$h = (p0) => p0.props.max;
+const _hf0$w = (p0) => p0.props.min ?? 0;
+const _hf1$i = (p0) => p0.props.max;
 const textFieldInputType = {
   shortText: "text",
   number: "number",
@@ -572,28 +572,28 @@ const basicCatalog = new CatalogRenderer([
       alignItems: alignItemsMap[_rawProps.props.align ?? "center"]
     }
   }, {
-    class: styles$K.row
+    class: styles$L.row
   }, _rawProps.childRefs(_rawProps.props.children).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted("span", null, {
-    class: styles$K["child-wrap"]
+    class: styles$L["child-wrap"]
   }, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Lh_3")),
   defineRenderer(basic_catalog.ColumnApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted("div", null, {
-    class: styles$K.column,
+    class: styles$L.column,
     style: {
       "--margin-block": "2rem"
     }
   }, _rawProps.childRefs(_rawProps.props.children).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted("span", null, {
-    class: styles$K["child-wrap"]
+    class: styles$L["child-wrap"]
   }, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Lh_4")),
   defineRenderer(basic_catalog.ListApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted("div", {
     class: [
-      styles$K.list,
-      _rawProps.props.direction === "horizontal" && styles$K["list-horizontal"]
+      styles$L.list,
+      _rawProps.props.direction === "horizontal" && styles$L["list-horizontal"]
     ]
   }, null, _rawProps.childRefs(_rawProps.props.children).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted("div", null, {
-    class: styles$K["list-item"]
+    class: styles$L["list-item"]
   }, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Lh_5")),
   defineRenderer(basic_catalog.CardApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted("div", null, {
-    class: styles$K.card
+    class: styles$L.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
@@ -601,8 +601,8 @@ const basicCatalog = new CatalogRenderer([
   // SSR validator (Q12).
   defineRenderer(basic_catalog.ButtonApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted("div", {
     class: [
-      styles$K.button,
-      _rawProps.props.variant === "primary" && styles$K["button-primary"]
+      styles$L.button,
+      _rawProps.props.variant === "primary" && styles$L["button-primary"]
     ],
     "q-e:click": _rawProps.props.action ? () => _rawProps.dispatchAction$("action") : void 0,
     "q-e:keydown": _rawProps.props.action ? (e) => {
@@ -624,7 +624,7 @@ const basicCatalog = new CatalogRenderer([
         objectFit: objectFitMap[_rawProps.props.fit ?? "cover"]
       }
     }, {
-      class: styles$K.image
+      class: styles$L.image
     }, null, 3, "Lh_8")
   )),
   defineRenderer(basic_catalog.IconApi, (_rawProps) => {
@@ -633,13 +633,13 @@ const basicCatalog = new CatalogRenderer([
       "aria-label": name,
       "data-icon": name
     }, {
-      class: styles$K.icon
+      class: styles$L.icon
     }, null, 3, "Lh_9");
   }),
   defineRenderer(basic_catalog.DividerApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted("div", {
     class: [
-      styles$K.divider,
-      _rawProps.props.axis === "vertical" && styles$K["divider-vertical"]
+      styles$L.divider,
+      _rawProps.props.axis === "vertical" && styles$L["divider-vertical"]
     ]
   }, {
     role: "separator"
@@ -648,10 +648,10 @@ const basicCatalog = new CatalogRenderer([
     const variant = _rawProps.props.variant ?? "shortText";
     const value = _rawProps.props.value ? _rawProps.resolve(_rawProps.props.value) : "";
     return /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$K["text-field"]
+      class: styles$L["text-field"]
     }, [
       /* @__PURE__ */ core$1._jsxSorted("label", null, {
-        class: styles$K.label
+        class: styles$L.label
       }, _rawProps.resolve(_rawProps.props.label), 1, null),
       variant === "longText" ? /* @__PURE__ */ core$1._jsxSorted("textarea", {
         "q-e:change": /* @__PURE__ */ core$1.inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", el.value), "basicCatalog_defineRenderer_div_textarea_q_e_change_AvRxzHDOuzE"),
@@ -659,7 +659,7 @@ const basicCatalog = new CatalogRenderer([
         "q:p": _rawProps,
         value
       }, {
-        class: styles$K.input
+        class: styles$L.input
       }, null, 6, "Lh_11") : /* @__PURE__ */ core$1._jsxSorted("input", {
         "q-e:change": /* @__PURE__ */ core$1.inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", el.value), "basicCatalog_defineRenderer_div_input_q_e_change_d4MNBikoI0c"),
         "q-e:input": /* @__PURE__ */ core$1.inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", el.value), "basicCatalog_defineRenderer_div_input_q_e_input_XTp8fL9T8eo"),
@@ -667,14 +667,14 @@ const basicCatalog = new CatalogRenderer([
         type: textFieldInputType[variant] ?? "text",
         value
       }, {
-        class: styles$K.input
+        class: styles$L.input
       }, null, 6, "Lh_12")
     ], 1, "Lh_13");
   }),
   defineRenderer(basic_catalog.CheckBoxApi, (_rawProps) => {
     const checked2 = typeof _rawProps.props.value === "boolean" ? _rawProps.props.value : Boolean(_rawProps.ctx.dataContext.resolveDynamicValue(_rawProps.props.value) ?? false);
     return /* @__PURE__ */ core$1._jsxSorted("label", null, {
-      class: styles$K.checkbox
+      class: styles$L.checkbox
     }, [
       /* @__PURE__ */ core$1._jsxSorted("input", {
         checked: checked2,
@@ -684,17 +684,17 @@ const basicCatalog = new CatalogRenderer([
         type: "checkbox"
       }, null, 6, null),
       /* @__PURE__ */ core$1._jsxSorted("span", null, {
-        class: styles$K["checkbox-label"]
+        class: styles$L["checkbox-label"]
       }, _rawProps.resolve(_rawProps.props.label), 1, null)
     ], 1, "Lh_14");
   }),
   defineRenderer(basic_catalog.SliderApi, (_rawProps) => {
     const value = typeof _rawProps.props.value === "number" ? _rawProps.props.value : Number(_rawProps.ctx.dataContext.resolveDynamicValue(_rawProps.props.value) ?? 0);
     return /* @__PURE__ */ core$1._jsxSorted("input", {
-      max: core$1._fnSignal(_hf1$h, [
+      max: core$1._fnSignal(_hf1$i, [
         _rawProps
       ]),
-      min: core$1._fnSignal(_hf0$v, [
+      min: core$1._fnSignal(_hf0$w, [
         _rawProps
       ]),
       "q-e:change": /* @__PURE__ */ core$1.inlinedQrl((_e, el, _rawProps2) => _rawProps2.setBinding$("value", Number(el.value)), "basicCatalog_defineRenderer_input_q_e_change_U0Dwvjz0O9o"),
@@ -702,7 +702,7 @@ const basicCatalog = new CatalogRenderer([
       "q:p": _rawProps,
       value
     }, {
-      class: styles$K.slider,
+      class: styles$L.slider,
       type: "range"
     }, null, 6, "Lh_15");
   }),
@@ -717,23 +717,23 @@ const basicCatalog = new CatalogRenderer([
     }, null, _rawProps.renderChild(tab2.child), 1, idx))
   ], 1, "Lh_17")),
   defineRenderer(basic_catalog.ModalApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted("div", null, {
-    class: styles$K.modal
+    class: styles$L.modal
   }, [
     _rawProps.renderChild(_rawProps.props.trigger),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$K["modal-content"]
+      class: styles$L["modal-content"]
     }, _rawProps.renderChild(_rawProps.props.content), 1, null)
   ], 1, "Lh_18")),
   defineRenderer(basic_catalog.VideoApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted("video", {
     src: _rawProps.resolve(_rawProps.props.url)
   }, {
-    class: styles$K.video,
+    class: styles$L.video,
     controls: true
   }, null, 3, "Lh_19")),
   defineRenderer(basic_catalog.AudioPlayerApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted("audio", {
     src: _rawProps.resolve(_rawProps.props.url)
   }, {
-    class: styles$K.audio,
+    class: styles$L.audio,
     controls: true
   }, null, 3, "Lh_20")),
   defineRenderer(basic_catalog.ChoicePickerApi, (_rawProps) => {
@@ -750,15 +750,15 @@ const basicCatalog = new CatalogRenderer([
       }, "basicCatalog_defineRenderer_div_q_e_change_HaNxxdy0Z1g"),
       "q:p": _rawProps
     }, {
-      class: styles$K["choice-picker"]
+      class: styles$L["choice-picker"]
     }, [
       _rawProps.props.label ? /* @__PURE__ */ core$1._jsxSorted("span", null, {
-        class: styles$K["choice-picker-label"]
+        class: styles$L["choice-picker-label"]
       }, _rawProps.resolve(_rawProps.props.label), 1, "Lh_21") : null,
       /* @__PURE__ */ core$1._jsxSorted("div", null, {
-        class: styles$K["choice-picker-options"]
+        class: styles$L["choice-picker-options"]
       }, _rawProps.props.options.map((opt) => /* @__PURE__ */ core$1._jsxSorted("label", null, {
-        class: styles$K["choice-picker-option"]
+        class: styles$L["choice-picker-option"]
       }, [
         /* @__PURE__ */ core$1._jsxSorted("input", {
           checked: selected.includes(opt.value),
@@ -775,10 +775,10 @@ const basicCatalog = new CatalogRenderer([
     const enableTime = _rawProps.props.enableTime ?? false;
     const inputType = enableDate && enableTime ? "datetime-local" : enableDate ? "date" : enableTime ? "time" : "text";
     return /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$K["datetime-input"]
+      class: styles$L["datetime-input"]
     }, [
       _rawProps.props.label ? /* @__PURE__ */ core$1._jsxSorted("label", null, {
-        class: styles$K.label
+        class: styles$L.label
       }, _rawProps.resolve(_rawProps.props.label), 1, "Lh_23") : null,
       /* @__PURE__ */ core$1._jsxSorted("input", {
         max: _rawProps.props.max != null ? String(_rawProps.props.max) : void 0,
@@ -789,7 +789,7 @@ const basicCatalog = new CatalogRenderer([
         type: inputType,
         value: _rawProps.props.value ? _rawProps.resolve(_rawProps.props.value) : ""
       }, {
-        class: styles$K.input
+        class: styles$L.input
       }, null, 6, null)
     ], 1, "Lh_24");
   })
@@ -1022,7 +1022,7 @@ const A2uiSurface = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   core$1.useContextProvider(A2uiSurfaceContext, props.surface);
   core$1.useContextProvider(A2uiAncestorContext, []);
   return /* @__PURE__ */ core$1._jsxSorted("div", null, {
-    class: styles$K.surface,
+    class: styles$L.surface,
     style: {
       "--elmethis-margin-block-start": "2rem"
     }
@@ -1035,7 +1035,7 @@ const SurfaceView = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   core$1.useContextProvider(A2uiSurfaceContext, props.surface);
   core$1.useContextProvider(A2uiAncestorContext, []);
   return /* @__PURE__ */ core$1._jsxSorted("div", null, {
-    class: styles$K.surface,
+    class: styles$L.surface,
     style: {
       "--elmethis-margin-block-start": "2rem"
     }
@@ -1064,11 +1064,11 @@ const ElmA2ui = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
   }, "ElmA2ui_component_useTask_xwXB3CpZoHI", [
     processorRef
   ]));
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(async ({ track }) => {
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(async ({ track: track2 }) => {
     const processorRef2 = core$1._captures[0], props2 = core$1._captures[1], streamStore2 = core$1._captures[2], surfaceMapSig2 = core$1._captures[3], tick2 = core$1._captures[4];
-    const propsMessages = track(() => props2.messages);
-    const propsCatalogId = track(() => props2.catalogId);
-    track(() => streamStore2.list.length);
+    const propsMessages = track2(() => props2.messages);
+    const propsCatalogId = track2(() => props2.catalogId);
+    track2(() => streamStore2.list.length);
     const effective = propsMessages ? [
       ...propsMessages
     ] : [
@@ -1179,7 +1179,7 @@ const ElmA2ui = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
   ]));
   return /* @__PURE__ */ core$1._jsxSorted("div", {
     class: [
-      styles$K["elm-a2ui"],
+      styles$L["elm-a2ui"],
       props.class
     ],
     style: core$1._wrapProp(props, "style")
@@ -1187,10 +1187,10 @@ const ElmA2ui = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlin
     surface: core$1.noSerialize(surface2)
   }, null, null, 3, surface2.id)), 1, "pJ_4");
 }, "ElmA2ui_component_JeVykabE5oE"));
-const styles$J = {
+const styles$K = {
   "elm-katex": "_elm-katex_189xe_1"
 };
-const _hf0$u = (p0) => p0.value ?? "";
+const _hf0$v = (p0) => p0.value ?? "";
 const ElmKatex = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const rest = core$1._restProps(props, [
     "class",
@@ -1209,10 +1209,10 @@ const ElmKatex = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
   return /* @__PURE__ */ core$1._jsxSplit("div", {
     class: [
       textStyles.text,
-      props.block ? styles$J["elm-katex"] : void 0,
+      props.block ? styles$K["elm-katex"] : void 0,
       props.class
     ],
-    dangerouslySetInnerHTML: core$1._fnSignal(_hf0$u, [
+    dangerouslySetInnerHTML: core$1._fnSignal(_hf0$v, [
       html
     ]),
     ...core$1._getVarProps(rest)
@@ -1221,7 +1221,7 @@ const ElmKatex = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
 const caption$1 = "_caption_xdmlc_22";
 const divider$1 = "_divider_xdmlc_33";
 const code = "_code_xdmlc_40";
-const styles$I = {
+const styles$J = {
   "elm-code-block": "_elm-code-block_xdmlc_1",
   "language-icon": "_language-icon_xdmlc_17",
   caption: caption$1,
@@ -1229,8 +1229,8 @@ const styles$I = {
   divider: divider$1,
   code
 };
-const _hf0$t = (p0) => p0.icon.viewBox;
-const _hf1$g = (p0) => p0.size ?? 24;
+const _hf0$u = (p0) => p0.icon.viewBox;
+const _hf1$h = (p0) => p0.size ?? 24;
 const scopeId = (value, key2, suffix) => key2 === "id" ? `${value}-${suffix}` : value.replace(/url\(#([^)]+)\)/g, `url(#$1-${suffix})`);
 const renderNode = (node, suffix, key2) => {
   const attrs = {};
@@ -1249,13 +1249,13 @@ const LanguageGlyph = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
   const suffix = core$1.useId();
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: core$1._fnSignal(_hf0$t, [
+    viewBox: core$1._fnSignal(_hf0$u, [
       _rawProps
     ]),
-    width: core$1._fnSignal(_hf1$g, [
+    width: core$1._fnSignal(_hf1$h, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf1$g, [
+    height: core$1._fnSignal(_hf1$h, [
       _rawProps
     ]),
     class: core$1._wrapProp(_rawProps, "class"),
@@ -1263,16 +1263,16 @@ const LanguageGlyph = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1
     ..._rawProps.icon.attrs
   }, null, _rawProps.icon.children.map((child, i) => renderNode(child, suffix, i)), 0, "d4_0");
 }, "LanguageGlyph_component_8wkMyHdmoRo"));
-const styles$H = {
+const styles$I = {
   "elm-mdi-icon": "_elm-mdi-icon_ihskx_1"
 };
-const _hf0$s = (p0) => ({
+const _hf0$t = (p0) => ({
   "--elmethis-scoped-color": p0.lightColor ?? p0.color ?? "currentColor",
   "--dark-color": p0.darkColor ?? p0.color ?? "currentColor",
   ...p0.style
 });
-const _hf1$f = (p0) => p0.size ?? "1em";
-const _hf2$a = (p0) => p0.color ?? "currentColor";
+const _hf1$g = (p0) => p0.size ?? "1em";
+const _hf2$b = (p0) => p0.color ?? "currentColor";
 const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -1285,20 +1285,20 @@ const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("svg", {
     class: [
-      styles$H["elm-mdi-icon"],
+      styles$I["elm-mdi-icon"],
       _rawProps.class
     ],
-    style: core$1._fnSignal(_hf0$s, [
+    style: core$1._fnSignal(_hf0$t, [
       _rawProps
     ]),
-    width: core$1._fnSignal(_hf1$f, [
+    width: core$1._fnSignal(_hf1$g, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf1$f, [
+    height: core$1._fnSignal(_hf1$g, [
       _rawProps
     ]),
     viewBox: "0 0 24 24",
-    fill: core$1._fnSignal(_hf2$a, [
+    fill: core$1._fnSignal(_hf2$b, [
       _rawProps
     ]),
     xmlns: "http://www.w3.org/2000/svg",
@@ -1309,7 +1309,7 @@ const ElmMdiIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.in
     d: core$1._wrapProp(_rawProps, "d")
   }, null, null, 3, null), 0, "IA_0");
 }, "ElmMdiIcon_component_AUxPCIu3tI0"));
-const _hf0$r = (p0) => p0.size ?? 24;
+const _hf0$s = (p0) => p0.size ?? 24;
 const ElmLanguageIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const normalized = core.normalizeLanguage(_rawProps.language);
   if (normalized === "file") {
@@ -1322,14 +1322,14 @@ const ElmLanguageIcon = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core
   return /* @__PURE__ */ core$1._jsxSorted(LanguageGlyph, {
     icon: core.languageIcons[normalized]
   }, {
-    size: core$1._fnSignal(_hf0$r, [
+    size: core$1._fnSignal(_hf0$s, [
       _rawProps
     ]),
     class: core$1._wrapProp(_rawProps, "class"),
     style: core$1._wrapProp(_rawProps, "style")
   }, null, 3, "bu_1");
 }, "ElmLanguageIcon_component_nXOhYnvIKLk"));
-const styles$G = {
+const styles$H = {
   "elm-shiki-highlighter": "_elm-shiki-highlighter_j5tas_1"
 };
 const ElmShikiHighlighter = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
@@ -1339,10 +1339,10 @@ const ElmShikiHighlighter = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
     "language"
   ]);
   const rawHtml = core$1.useSignal("");
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(async ({ track }) => {
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(async ({ track: track2 }) => {
     const _rawProps2 = core$1._captures[0], rawHtml2 = core$1._captures[1];
-    track(() => _rawProps2.code);
-    track(() => _rawProps2.language ?? "txt");
+    track2(() => _rawProps2.code);
+    track2(() => _rawProps2.language ?? "txt");
     if (!_rawProps2.code) return;
     try {
       rawHtml2.value = await shiki.codeToHtml(_rawProps2.code, {
@@ -1369,14 +1369,14 @@ const ElmShikiHighlighter = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
   ]));
   return /* @__PURE__ */ core$1._jsxSplit("pre", {
     class: [
-      styles$G["elm-shiki-highlighter"],
+      styles$H["elm-shiki-highlighter"],
       _rawProps.class
     ],
     dangerouslySetInnerHTML: core$1._wrapProp(rawHtml),
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), null, 0, "ZN_0");
 }, "ElmShikiHighlighter_component_vKuHJZdaUdo"));
-const styles$F = {
+const styles$G = {
   "use-clipboard": "_use-clipboard_mb0qt_1",
   "use-clipboard-icon-copied": "_use-clipboard-icon-copied_mb0qt_15"
 };
@@ -1415,7 +1415,7 @@ const useClipboard = (options) => {
     const copied2 = core$1._captures[0], copy2 = core$1._captures[1], options2 = core$1._captures[2];
     return /* @__PURE__ */ core$1._jsxSorted("span", {
       class: [
-        styles$F["use-clipboard"],
+        styles$G["use-clipboard"],
         options2.class
       ],
       style: core$1._wrapProp(options2, "style")
@@ -1424,7 +1424,7 @@ const useClipboard = (options) => {
     }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
       class: [
         {
-          [styles$F["use-clipboard-icon-copied"]]: copied2.value
+          [styles$G["use-clipboard-icon-copied"]]: copied2.value
         }
       ],
       d: copied2.value ? js.mdiClipboardCheckOutline : js.mdiClipboardOutline
@@ -1441,8 +1441,8 @@ const useClipboard = (options) => {
     copy
   };
 };
-const _hf0$q = (p0) => p0.language ?? "txt";
-const _hf1$e = (p0) => p0.caption || (p0.language ?? "txt");
+const _hf0$r = (p0) => p0.language ?? "txt";
+const _hf1$f = (p0) => p0.caption || (p0.language ?? "txt");
 const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((_rawProps) => {
   const props = core$1._restProps(_rawProps, [
     "class",
@@ -1455,42 +1455,526 @@ const ElmCodeBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
   });
   return /* @__PURE__ */ core$1._jsxSplit("figure", {
     class: [
-      styles$I["elm-code-block"],
+      styles$J["elm-code-block"],
       _rawProps.class
     ],
     ...core$1._getVarProps(props)
   }, core$1._getConstProps(props), [
     /* @__PURE__ */ core$1._jsxSorted("span", null, {
-      class: styles$I["language-icon"]
+      class: styles$J["language-icon"]
     }, /* @__PURE__ */ core$1._jsxSorted(ElmLanguageIcon, null, {
-      language: core$1._fnSignal(_hf0$q, [
+      language: core$1._fnSignal(_hf0$r, [
         _rawProps
       ])
     }, null, 3, "sK_0"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("span", null, {
-      class: styles$I.caption
+      class: styles$J.caption
     }, /* @__PURE__ */ core$1._jsxSorted(ElmInlineText, null, null, [
-      core$1._fnSignal(_hf1$e, [
+      core$1._fnSignal(_hf1$f, [
         _rawProps
       ]),
       /* @__PURE__ */ core$1._jsxSorted(core$1.Slot, null, null, null, 3, "sK_1")
     ], 1, "sK_2"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$I["copy-icon"]
+      class: styles$J["copy-icon"]
     }, /* @__PURE__ */ core$1._jsxSorted(clipboard.CopyButton, null, null, null, 3, "sK_3"), 1, null),
     /* @__PURE__ */ core$1._jsxSorted("hr", null, {
-      class: styles$I.divider
+      class: styles$J.divider
     }, null, 3, null),
     /* @__PURE__ */ core$1._jsxSorted("div", null, {
-      class: styles$I.code
+      class: styles$J.code
     }, /* @__PURE__ */ core$1._jsxSorted(ElmShikiHighlighter, null, {
       code: core$1._wrapProp(_rawProps, "code"),
-      language: core$1._fnSignal(_hf0$q, [
+      language: core$1._fnSignal(_hf0$r, [
         _rawProps
       ])
     }, null, 3, "sK_4"), 1, null)
   ], 0, "sK_5");
 }, "ElmCodeBlock_component_rH8kn9Tvguw"));
+const loading$3 = "_loading_p7xym_34";
+const header$4 = "_header_p7xym_40";
+const artwork = "_artwork_p7xym_46";
+const meta = "_meta_p7xym_69";
+const title$1 = "_title_p7xym_77";
+const artist = "_artist_p7xym_87";
+const equalizer = "_equalizer_p7xym_99";
+const playing = "_playing_p7xym_116";
+const seekbar = "_seekbar_p7xym_151";
+const track = "_track_p7xym_167";
+const fill = "_fill_p7xym_176";
+const thumb = "_thumb_p7xym_189";
+const controls = "_controls_p7xym_248";
+const time = "_time_p7xym_254";
+const transport = "_transport_p7xym_273";
+const volume = "_volume_p7xym_359";
+const errored = "_errored_p7xym_412";
+const styles$F = {
+  "elm-audio-player": "_elm-audio-player_p7xym_1",
+  loading: loading$3,
+  header: header$4,
+  artwork,
+  "artwork-error": "_artwork-error_p7xym_63",
+  meta,
+  title: title$1,
+  artist,
+  equalizer,
+  playing,
+  seekbar,
+  track,
+  fill,
+  thumb,
+  "hover-thumb": "_hover-thumb_p7xym_209",
+  controls,
+  time,
+  "time-current": "_time-current_p7xym_264",
+  "time-total": "_time-total_p7xym_269",
+  transport,
+  "icon-button": "_icon-button_p7xym_281",
+  "play-button": "_play-button_p7xym_312",
+  volume,
+  "volume-slider": "_volume-slider_p7xym_366",
+  errored,
+  "error-notice": "_error-notice_p7xym_421",
+  "error-message": "_error-message_p7xym_431"
+};
+const _hf0$q = (p0, p1) => ({
+  "--elmethis-scoped-progress": p1.value,
+  "--elmethis-scoped-hover": p0.value ?? 0
+});
+const _hf1$e = (p0) => p0.errorMessage ?? "This audio couldn't be loaded.";
+const _hf2$a = (p0) => p0.value ? "Pause" : "Play";
+const _hf3$9 = (p0) => p0.value ? "Unmute" : "Mute";
+const _hf4$5 = (p0, p1) => p0.value ? 0 : p1.value;
+const _hf5$3 = (p0, p1) => ({
+  "--elmethis-scoped-volume": p0.value ? 0 : p1.value
+});
+const formatTime = (seconds) => {
+  if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+  const total = Math.floor(seconds);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const mm = h > 0 ? String(m).padStart(2, "0") : String(m);
+  const out = `${mm}:${String(s).padStart(2, "0")}`;
+  return h > 0 ? `${h}:${out}` : out;
+};
+const fileNameFromSrc = (src) => {
+  const clean = src.split(/[?#]/)[0];
+  const seg = clean.split("/").filter(Boolean).pop() ?? src;
+  try {
+    return decodeURIComponent(seg);
+  } catch {
+    return seg;
+  }
+};
+const ElmAudioPlayer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
+  const rest = core$1._restProps(props, [
+    "class",
+    "src",
+    "title",
+    "artist",
+    "errorMessage",
+    "seekStep",
+    "loop",
+    "autoPlay"
+  ]);
+  const audioRef = core$1.useSignal();
+  const rafId = core$1.useSignal(null);
+  const isPlaying = core$1.useSignal(false);
+  const isLoading = core$1.useSignal(true);
+  const hasError = core$1.useSignal(false);
+  const duration = core$1.useSignal(0);
+  const currentTime = core$1.useSignal(0);
+  const volume2 = core$1.useSignal(1);
+  const isMuted = core$1.useSignal(false);
+  const hoverRatio = core$1.useSignal(null);
+  const progress = core$1.useComputedQrl(/* @__PURE__ */ core$1.inlinedQrl(() => {
+    const currentTime2 = core$1._captures[0], duration2 = core$1._captures[1];
+    return duration2.value > 0 ? Math.min(1, currentTime2.value / duration2.value) : 0;
+  }, "ElmAudioPlayer_component_progress_useComputed_UmcsvccDM9g", [
+    currentTime,
+    duration
+  ]));
+  const volumeIcon = core$1.useComputedQrl(/* @__PURE__ */ core$1.inlinedQrl(() => {
+    const isMuted2 = core$1._captures[0], volume22 = core$1._captures[1];
+    if (isMuted2.value || volume22.value === 0) return js.mdiVolumeOff;
+    if (volume22.value < 0.34) return js.mdiVolumeLow;
+    if (volume22.value < 0.67) return js.mdiVolumeMedium;
+    return js.mdiVolumeHigh;
+  }, "ElmAudioPlayer_component_volumeIcon_useComputed_PPOFACXYryU", [
+    isMuted,
+    volume2
+  ]));
+  const resolvedTitle = core$1.useComputedQrl(/* @__PURE__ */ core$1.inlinedQrl(() => {
+    const props2 = core$1._captures[0];
+    return props2.title ?? fileNameFromSrc(props2.src);
+  }, "ElmAudioPlayer_component_resolvedTitle_useComputed_n7BecSAD0Ho", [
+    props
+  ]));
+  const startRaf = /* @__PURE__ */ core$1.inlinedQrl(() => {
+    const audioRef2 = core$1._captures[0], currentTime2 = core$1._captures[1], rafId2 = core$1._captures[2];
+    if (rafId2.value != null) return;
+    const tick = () => {
+      if (audioRef2.value) currentTime2.value = audioRef2.value.currentTime;
+      rafId2.value = requestAnimationFrame(tick);
+    };
+    rafId2.value = requestAnimationFrame(tick);
+  }, "ElmAudioPlayer_component_startRaf_uyzIbOd8edc", [
+    audioRef,
+    currentTime,
+    rafId
+  ]);
+  const stopRaf = /* @__PURE__ */ core$1.inlinedQrl(() => {
+    const rafId2 = core$1._captures[0];
+    if (rafId2.value != null) {
+      cancelAnimationFrame(rafId2.value);
+      rafId2.value = null;
+    }
+  }, "ElmAudioPlayer_component_stopRaf_iSlA4zwTszs", [
+    rafId
+  ]);
+  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ cleanup }) => {
+    const rafId2 = core$1._captures[0];
+    cleanup(() => {
+      if (rafId2.value != null) cancelAnimationFrame(rafId2.value);
+    });
+  }, "ElmAudioPlayer_component_useVisibleTask_yjHYVV53qtg", [
+    rafId
+  ]));
+  const togglePlay = /* @__PURE__ */ core$1.inlinedQrl(() => {
+    const audioRef2 = core$1._captures[0], isPlaying2 = core$1._captures[1];
+    const audio2 = audioRef2.value;
+    if (!audio2) return;
+    if (audio2.paused) {
+      void audio2.play().catch(() => isPlaying2.value = false);
+    } else {
+      audio2.pause();
+    }
+  }, "ElmAudioPlayer_component_togglePlay_sMx00mG9yLs", [
+    audioRef,
+    isPlaying
+  ]);
+  const seekTo = /* @__PURE__ */ core$1.inlinedQrl((seconds) => {
+    const audioRef2 = core$1._captures[0], currentTime2 = core$1._captures[1], duration2 = core$1._captures[2];
+    const audio2 = audioRef2.value;
+    if (!audio2 || !Number.isFinite(duration2.value) || duration2.value <= 0) {
+      return;
+    }
+    const clamped = Math.max(0, Math.min(duration2.value, seconds));
+    audio2.currentTime = clamped;
+    currentTime2.value = clamped;
+  }, "ElmAudioPlayer_component_seekTo_IAobgQJxsaY", [
+    audioRef,
+    currentTime,
+    duration
+  ]);
+  const changeVolume = /* @__PURE__ */ core$1.inlinedQrl((next) => {
+    const audioRef2 = core$1._captures[0], isMuted2 = core$1._captures[1], volume22 = core$1._captures[2];
+    const audio2 = audioRef2.value;
+    const clamped = Math.max(0, Math.min(1, next));
+    if (audio2) {
+      audio2.volume = clamped;
+      audio2.muted = clamped === 0;
+    }
+    volume22.value = clamped;
+    isMuted2.value = clamped === 0;
+  }, "ElmAudioPlayer_component_changeVolume_FE02J81CE7g", [
+    audioRef,
+    isMuted,
+    volume2
+  ]);
+  const toggleMute = /* @__PURE__ */ core$1.inlinedQrl(() => {
+    const audioRef2 = core$1._captures[0], isMuted2 = core$1._captures[1];
+    const audio2 = audioRef2.value;
+    if (!audio2) return;
+    const next = !audio2.muted;
+    audio2.muted = next;
+    isMuted2.value = next;
+  }, "ElmAudioPlayer_component_toggleMute_GwaccfmcDuM", [
+    audioRef,
+    isMuted
+  ]);
+  return /* @__PURE__ */ core$1._jsxSplit("div", {
+    class: [
+      styles$F["elm-audio-player"],
+      isPlaying.value && styles$F.playing,
+      isLoading.value && styles$F.loading,
+      hasError.value && styles$F.errored,
+      props.class
+    ],
+    style: core$1._fnSignal(_hf0$q, [
+      hoverRatio,
+      progress
+    ]),
+    ...core$1._getVarProps(rest)
+  }, core$1._getConstProps(rest), [
+    /* @__PURE__ */ core$1._jsxSorted("audio", {
+      autoplay: core$1._wrapProp(props, "autoPlay"),
+      loop: core$1._wrapProp(props, "loop"),
+      "q-e:canplay": /* @__PURE__ */ core$1.inlinedQrl((_, _1, _2, _3, _4, isLoading2) => isLoading2.value = false, "ElmAudioPlayer_component_div_audio_q_e_canplay_9wP9DQ5FnZw"),
+      "q-e:durationchange": /* @__PURE__ */ core$1.inlinedQrl((_, el, _2, duration2) => duration2.value = el.duration, "ElmAudioPlayer_component_div_audio_q_e_durationchange_1Qldw8NrJFs"),
+      "q-e:ended": /* @__PURE__ */ core$1.inlinedQrl((_, _1, _2, _3, _4, _5, _6, isPlaying2, _8, _9, stopRaf2) => {
+        isPlaying2.value = false;
+        stopRaf2();
+      }, "ElmAudioPlayer_component_div_audio_q_e_ended_6V0pmk1XTv4"),
+      "q-e:error": /* @__PURE__ */ core$1.inlinedQrl((_, _1, _2, _3, hasError2, isLoading2) => {
+        hasError2.value = true;
+        isLoading2.value = false;
+      }, "ElmAudioPlayer_component_div_audio_q_e_error_iWobgs8gRR0"),
+      "q-e:loadedmetadata": /* @__PURE__ */ core$1.inlinedQrl((_, el, _2, duration2, _4, isLoading2, isMuted2, _7, _8, _9, _10, volume22) => {
+        duration2.value = el.duration;
+        volume22.value = el.volume;
+        isMuted2.value = el.muted;
+        isLoading2.value = false;
+      }, "ElmAudioPlayer_component_div_audio_q_e_loadedmetadata_u6lLcP8Pk4A"),
+      "q-e:pause": /* @__PURE__ */ core$1.inlinedQrl((_, _1, _2, _3, _4, _5, _6, isPlaying2, _8, _9, stopRaf2) => {
+        isPlaying2.value = false;
+        stopRaf2();
+      }, "ElmAudioPlayer_component_div_audio_q_e_pause_RC60H909VsM"),
+      "q-e:play": /* @__PURE__ */ core$1.inlinedQrl((_, _1, _2, _3, _4, _5, _6, isPlaying2, _8, startRaf2) => {
+        isPlaying2.value = true;
+        startRaf2();
+      }, "ElmAudioPlayer_component_div_audio_q_e_play_nhVqTik63OM"),
+      "q-e:playing": /* @__PURE__ */ core$1.inlinedQrl((_, _1, _2, _3, _4, isLoading2) => isLoading2.value = false, "ElmAudioPlayer_component_div_audio_q_e_playing_y7NnWkObWHI"),
+      "q-e:timeupdate": /* @__PURE__ */ core$1.inlinedQrl((_, el, currentTime2, _3, _4, _5, _6, _7, rafId2) => {
+        if (rafId2.value == null) currentTime2.value = el.currentTime;
+      }, "ElmAudioPlayer_component_div_audio_q_e_timeupdate_q5IfjlJ1OeU"),
+      "q-e:volumechange": /* @__PURE__ */ core$1.inlinedQrl((_, el, _2, _3, _4, _5, isMuted2, _7, _8, _9, _10, volume22) => {
+        volume22.value = el.volume;
+        isMuted2.value = el.muted;
+      }, "ElmAudioPlayer_component_div_audio_q_e_volumechange_ItVSO66jfwo"),
+      "q-e:waiting": /* @__PURE__ */ core$1.inlinedQrl((_, _1, _2, _3, _4, isLoading2) => isLoading2.value = true, "ElmAudioPlayer_component_div_audio_q_e_waiting_iiUap70uy9g"),
+      "q:ps": [
+        currentTime,
+        duration,
+        hasError,
+        isLoading,
+        isMuted,
+        isPlaying,
+        rafId,
+        startRaf,
+        stopRaf,
+        volume2
+      ],
+      ref: audioRef,
+      src: core$1._wrapProp(props, "src")
+    }, {
+      preload: "metadata"
+    }, null, 6, null),
+    /* @__PURE__ */ core$1._jsxSorted("div", null, {
+      class: styles$F.header
+    }, [
+      /* @__PURE__ */ core$1._jsxSorted("span", {
+        class: [
+          styles$F.artwork,
+          hasError.value && styles$F["artwork-error"]
+        ]
+      }, {
+        "aria-hidden": "true"
+      }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
+        d: hasError.value ? js.mdiAlertCircleOutline : js.mdiMusicNote
+      }, {
+        size: "1.25rem"
+      }, null, 3, "CY_0"), 1, null),
+      /* @__PURE__ */ core$1._jsxSorted("div", null, {
+        class: styles$F.meta
+      }, [
+        /* @__PURE__ */ core$1._jsxSorted("span", null, {
+          class: styles$F.title,
+          title: core$1._wrapProp(resolvedTitle)
+        }, core$1._wrapProp(resolvedTitle), 3, null),
+        props.artist && /* @__PURE__ */ core$1._jsxSorted("span", null, {
+          class: styles$F.artist
+        }, core$1._wrapProp(props, "artist"), 1, "CY_1")
+      ], 1, null),
+      /* @__PURE__ */ core$1._jsxSorted("span", null, {
+        class: styles$F.equalizer,
+        "aria-hidden": "true"
+      }, [
+        /* @__PURE__ */ core$1._jsxSorted("i", null, null, null, 3, null),
+        /* @__PURE__ */ core$1._jsxSorted("i", null, null, null, 3, null),
+        /* @__PURE__ */ core$1._jsxSorted("i", null, null, null, 3, null),
+        /* @__PURE__ */ core$1._jsxSorted("i", null, null, null, 3, null)
+      ], 3, null)
+    ], 1, null),
+    hasError.value ? /* @__PURE__ */ core$1._jsxSorted("div", null, {
+      class: styles$F["error-notice"],
+      role: "alert"
+    }, [
+      /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
+        d: js.mdiAlertCircleOutline,
+        size: "1.25rem"
+      }, null, 3, "CY_2"),
+      /* @__PURE__ */ core$1._jsxSorted("span", null, {
+        class: styles$F["error-message"]
+      }, core$1._fnSignal(_hf1$e, [
+        props
+      ]), 1, null)
+    ], 1, "CY_3") : /* @__PURE__ */ core$1._jsxSorted(jsxRuntime.Fragment, null, null, [
+      /* @__PURE__ */ core$1._jsxSorted("div", {
+        "aria-valuemax": Math.round(duration.value) || 0,
+        "aria-valuenow": Math.round(currentTime.value),
+        "aria-valuetext": `${formatTime(currentTime.value)} of ${formatTime(duration.value)}`,
+        "q-e:keydown": /* @__PURE__ */ core$1.inlinedQrl((event, _1, currentTime2, duration2, _4, props2, seekTo2) => {
+          if (event.key === "ArrowRight") {
+            event.preventDefault();
+            seekTo2(currentTime2.value + (props2.seekStep ?? 10));
+          } else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            seekTo2(currentTime2.value - (props2.seekStep ?? 10));
+          } else if (event.key === "Home") {
+            event.preventDefault();
+            seekTo2(0);
+          } else if (event.key === "End") {
+            event.preventDefault();
+            seekTo2(duration2.value);
+          }
+        }, "ElmAudioPlayer_component_div_Fragment_div_q_e_keydown_J0ebQ9Yvu08"),
+        "q-e:pointerdown": /* @__PURE__ */ core$1.inlinedQrl((event, el, _2, duration2, _4, _5, seekTo2) => {
+          el.setPointerCapture(event.pointerId);
+          const rect2 = el.getBoundingClientRect();
+          const ratio = rect2.width === 0 ? 0 : Math.max(0, Math.min(1, (event.clientX - rect2.left) / rect2.width));
+          seekTo2(ratio * duration2.value);
+        }, "ElmAudioPlayer_component_div_Fragment_div_q_e_pointerdown_780WVX50v1Y"),
+        "q-e:pointerleave": /* @__PURE__ */ core$1.inlinedQrl((_, _1, _2, _3, hoverRatio2) => hoverRatio2.value = null, "ElmAudioPlayer_component_div_Fragment_div_q_e_pointerleave_K0r0ltqd1Ak"),
+        "q-e:pointermove": /* @__PURE__ */ core$1.inlinedQrl((event, el, _2, duration2, hoverRatio2, _5, seekTo2) => {
+          const rect2 = el.getBoundingClientRect();
+          const ratio = rect2.width === 0 ? 0 : Math.max(0, Math.min(1, (event.clientX - rect2.left) / rect2.width));
+          hoverRatio2.value = ratio;
+          if (el.hasPointerCapture(event.pointerId)) {
+            seekTo2(ratio * duration2.value);
+          }
+        }, "ElmAudioPlayer_component_div_Fragment_div_q_e_pointermove_aXJtCYXlCkc"),
+        "q:ps": [
+          currentTime,
+          duration,
+          hoverRatio,
+          props,
+          seekTo
+        ]
+      }, {
+        class: styles$F.seekbar,
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": "Seek",
+        "aria-valuemin": 0
+      }, [
+        /* @__PURE__ */ core$1._jsxSorted("div", null, {
+          class: styles$F.track,
+          "aria-hidden": "true"
+        }, /* @__PURE__ */ core$1._jsxSorted("div", null, {
+          class: styles$F.fill
+        }, null, 3, null), 3, null),
+        /* @__PURE__ */ core$1._jsxSorted("span", null, {
+          class: styles$F["hover-thumb"],
+          "aria-hidden": "true"
+        }, null, 3, null),
+        /* @__PURE__ */ core$1._jsxSorted("span", null, {
+          class: styles$F.thumb,
+          "aria-hidden": "true"
+        }, null, 3, null)
+      ], 6, null),
+      /* @__PURE__ */ core$1._jsxSorted("div", null, {
+        class: styles$F.controls
+      }, [
+        /* @__PURE__ */ core$1._jsxSorted("span", null, {
+          class: [
+            styles$F.time,
+            styles$F["time-current"]
+          ]
+        }, formatTime(currentTime.value), 1, null),
+        /* @__PURE__ */ core$1._jsxSorted("div", null, {
+          class: styles$F["transport"]
+        }, [
+          /* @__PURE__ */ core$1._jsxSorted("button", {
+            "aria-label": `Back ${props.seekStep ?? 10} seconds`,
+            "q-e:click": /* @__PURE__ */ core$1.inlinedQrl((_, _1, currentTime2, props2, seekTo2) => seekTo2(currentTime2.value - (props2.seekStep ?? 10)), "ElmAudioPlayer_component_div_Fragment_div_div_button_q_e_click_dyAWFy4PvTs"),
+            "q:ps": [
+              currentTime,
+              props,
+              seekTo
+            ]
+          }, {
+            type: "button",
+            class: styles$F["icon-button"]
+          }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
+            d: js.mdiRewind10,
+            size: "1.25rem"
+          }, null, 3, "CY_4"), 4, null),
+          /* @__PURE__ */ core$1._jsxSorted("button", null, {
+            type: "button",
+            class: styles$F["play-button"],
+            "q-e:click": togglePlay,
+            "aria-label": core$1._fnSignal(_hf2$a, [
+              isPlaying
+            ]),
+            "aria-pressed": core$1._wrapProp(isPlaying)
+          }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, {
+            d: isPlaying.value ? js.mdiPause : js.mdiPlay
+          }, {
+            size: "1.5rem"
+          }, null, 3, "CY_5"), 1, null),
+          /* @__PURE__ */ core$1._jsxSorted("button", {
+            "aria-label": `Forward ${props.seekStep ?? 10} seconds`,
+            "q-e:click": /* @__PURE__ */ core$1.inlinedQrl((_, _1, currentTime2, props2, seekTo2) => seekTo2(currentTime2.value + (props2.seekStep ?? 10)), "ElmAudioPlayer_component_div_Fragment_div_div_button_q_e_click_1_8X73FmeqLbY"),
+            "q:ps": [
+              currentTime,
+              props,
+              seekTo
+            ]
+          }, {
+            type: "button",
+            class: styles$F["icon-button"]
+          }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
+            d: js.mdiFastForward10,
+            size: "1.25rem"
+          }, null, 3, "CY_6"), 4, null)
+        ], 1, null),
+        /* @__PURE__ */ core$1._jsxSorted("div", null, {
+          class: styles$F.volume
+        }, [
+          /* @__PURE__ */ core$1._jsxSorted("button", null, {
+            type: "button",
+            class: styles$F["icon-button"],
+            "q-e:click": toggleMute,
+            "aria-label": core$1._fnSignal(_hf3$9, [
+              isMuted
+            ]),
+            "aria-pressed": core$1._wrapProp(isMuted)
+          }, /* @__PURE__ */ core$1._jsxSorted(ElmMdiIcon, null, {
+            d: core$1._wrapProp(volumeIcon),
+            size: "1.25rem"
+          }, null, 3, "CY_7"), 1, null),
+          /* @__PURE__ */ core$1._jsxSorted("input", {
+            "q-e:input": /* @__PURE__ */ core$1.inlinedQrl((_, el, changeVolume2) => changeVolume2(el.valueAsNumber), "ElmAudioPlayer_component_div_Fragment_div_div_input_q_e_input_wgZ524DJ28g"),
+            "q:p": changeVolume
+          }, {
+            class: styles$F["volume-slider"],
+            type: "range",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            value: core$1._fnSignal(_hf4$5, [
+              isMuted,
+              volume2
+            ]),
+            "aria-label": "Volume",
+            style: core$1._fnSignal(_hf5$3, [
+              isMuted,
+              volume2
+            ])
+          }, null, 6, null)
+        ], 1, null),
+        /* @__PURE__ */ core$1._jsxSorted("span", null, {
+          class: [
+            styles$F.time,
+            styles$F["time-total"]
+          ]
+        }, formatTime(duration.value), 1, null)
+      ], 1, null)
+    ], 1, "CY_8")
+  ], 0, "CY_9");
+}, "ElmAudioPlayer_component_yG6lZHeffu8"));
 const image$2 = "_image_kwjx3_12";
 const fallback$1 = "_fallback_kwjx3_36";
 const styles$E = {
@@ -1532,9 +2016,9 @@ const ElmModal = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
   ]);
   const dialogRef = core$1.useSignal();
   const isShown = core$1.useSignal(false);
-  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track, cleanup }) => {
+  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2, cleanup }) => {
     const dialogRef2 = core$1._captures[0], isShown2 = core$1._captures[1], props2 = core$1._captures[2];
-    track(() => props2.isOpen);
+    track2(() => props2.isOpen);
     if (!dialogRef2.value) return;
     if (props2.isOpen) {
       dialogRef2.value.showModal();
@@ -2178,9 +2662,9 @@ const ElmTable = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inli
     "hasRowHeader"
   ]);
   const hasRowHeader = core$1.useSignal(props.hasRowHeader ?? false);
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
     const hasRowHeader2 = core$1._captures[0], props2 = core$1._captures[1];
-    hasRowHeader2.value = track(() => props2.hasRowHeader) ?? false;
+    hasRowHeader2.value = track2(() => props2.hasRowHeader) ?? false;
   }, "ElmTable_component_useTask_TZl40E0lLa8", [
     hasRowHeader,
     props
@@ -2335,10 +2819,14 @@ const ElmUnsupportedBlock = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
 }, "ElmUnsupportedBlock_component_yKqwfnlPSP4"));
 const _hf0$l = (p0) => p0.props.color;
 const _hf1$b = (p0) => p0.props.ruby;
-const _hf10 = (p0) => p0.props.width;
-const _hf11 = (p0) => p0.props.height;
-const _hf12 = (p0) => p0.props.hasRowHeader;
-const _hf13 = (p0) => p0.props.isHeader;
+const _hf10 = (p0) => p0.props.seekStep;
+const _hf11 = (p0) => p0.props.loop;
+const _hf12 = (p0) => p0.props.autoPlay;
+const _hf13 = (p0) => p0.props.width;
+const _hf14 = (p0) => p0.props.height;
+const _hf15 = (p0) => p0.props.muted;
+const _hf16 = (p0) => p0.props.hasRowHeader;
+const _hf17 = (p0) => p0.props.isHeader;
 const _hf2$8 = (p0) => p0.props.href;
 const _hf3$7 = (p0) => p0.props.favicon;
 const _hf4$3 = (p0) => p0.props.alt;
@@ -2492,6 +2980,59 @@ const blockCatalog = basicCatalog.extend(
     src: _rawProps.resolve(_rawProps.props.src),
     style: firstChildMargin(_rawProps.index)
   }, null, null, 3, "Fl_15")),
+  defineRenderer(core.AudioApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted(ElmAudioPlayer, {
+    artist: _rawProps.props.artist ? _rawProps.resolve(_rawProps.props.artist) : void 0,
+    src: _rawProps.resolve(_rawProps.props.src),
+    style: firstChildMargin(_rawProps.index),
+    title: _rawProps.props.title ? _rawProps.resolve(_rawProps.props.title) : void 0
+  }, {
+    seekStep: core$1._fnSignal(_hf10, [
+      _rawProps
+    ]),
+    loop: core$1._fnSignal(_hf11, [
+      _rawProps
+    ]),
+    autoPlay: core$1._fnSignal(_hf12, [
+      _rawProps
+    ])
+  }, null, 3, "Fl_16")),
+  defineRenderer(core.VideoApi, (_rawProps) => {
+    const caption2 = _rawProps.props.caption ? _rawProps.resolve(_rawProps.props.caption) : void 0;
+    return /* @__PURE__ */ core$1._jsxSorted("figure", {
+      style: {
+        ...firstChildMargin(_rawProps.index),
+        margin: 0
+      }
+    }, null, [
+      /* @__PURE__ */ core$1._jsxSorted("video", {
+        autoplay: core$1._fnSignal(_hf12, [
+          _rawProps
+        ]),
+        height: core$1._fnSignal(_hf14, [
+          _rawProps
+        ]),
+        loop: core$1._fnSignal(_hf11, [
+          _rawProps
+        ]),
+        muted: core$1._fnSignal(_hf15, [
+          _rawProps
+        ]),
+        poster: _rawProps.props.poster ? _rawProps.resolve(_rawProps.props.poster) : void 0,
+        src: _rawProps.resolve(_rawProps.props.src),
+        title: _rawProps.props.title ? _rawProps.resolve(_rawProps.props.title) : void 0,
+        width: core$1._fnSignal(_hf13, [
+          _rawProps
+        ])
+      }, {
+        controls: true,
+        style: {
+          maxWidth: "100%",
+          height: "auto"
+        }
+      }, null, 3, null),
+      caption2 ? /* @__PURE__ */ core$1._jsxSorted("figcaption", null, null, caption2, 1, "Fl_17") : null
+    ], 1, "Fl_18");
+  }),
   defineRenderer(core.BlockImageApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted(ElmBlockImage, {
     alt: _rawProps.props.alt ? _rawProps.resolve(_rawProps.props.alt) : void 0,
     caption: _rawProps.props.caption ? _rawProps.resolve(_rawProps.props.caption) : void 0,
@@ -2500,14 +3041,14 @@ const blockCatalog = basicCatalog.extend(
     srcset: _rawProps.props.srcset ? _rawProps.resolve(_rawProps.props.srcset) : void 0,
     style: firstChildMargin(_rawProps.index)
   }, {
-    width: core$1._fnSignal(_hf10, [
+    width: core$1._fnSignal(_hf13, [
       _rawProps
     ]),
-    height: core$1._fnSignal(_hf11, [
+    height: core$1._fnSignal(_hf14, [
       _rawProps
     ]),
     enableModal: true
-  }, null, 3, "Fl_16")),
+  }, null, 3, "Fl_19")),
   // -------------------------------------------------------------------------
   // Code / math / diagram
   // -------------------------------------------------------------------------
@@ -2516,13 +3057,13 @@ const blockCatalog = basicCatalog.extend(
     code: _rawProps.resolve(_rawProps.props.code),
     language: _rawProps.props.language ? _rawProps.resolve(_rawProps.props.language) : void 0,
     style: firstChildMargin(_rawProps.index)
-  }, null, null, 3, "Fl_17")),
+  }, null, null, 3, "Fl_20")),
   defineRenderer(core.KatexApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted(ElmKatex, {
     expression: _rawProps.resolve(_rawProps.props.expression),
     style: firstChildMargin(_rawProps.index)
   }, {
     block: true
-  }, null, 3, "Fl_18")),
+  }, null, 3, "Fl_21")),
   // Mermaid is rendered as a syntax-highlighted code block — no dedicated
   // Mermaid renderer in this package. The diagram source is preserved so a
   // host application can post-process if needed.
@@ -2531,7 +3072,7 @@ const blockCatalog = basicCatalog.extend(
     style: firstChildMargin(_rawProps.index)
   }, {
     language: "mermaid"
-  }, null, 3, "Fl_19")),
+  }, null, 3, "Fl_22")),
   // -------------------------------------------------------------------------
   // Tabs — ContentTab is data-only (its parent ContentTabs walks the surface
   // model to read each tab's label and content ChildList directly).
@@ -2554,11 +3095,11 @@ const blockCatalog = basicCatalog.extend(
     }, [
       /* @__PURE__ */ core$1._jsxSorted(ElmTabList, null, null, tabs.map(({ tabId, labelIds }, idx) => /* @__PURE__ */ core$1._jsxSorted(ElmTab, {
         value: String(idx)
-      }, null, labelIds.map((lid, i) => /* @__PURE__ */ core$1._jsxSorted(core$1.Fragment, null, null, _rawProps.renderChild(lid, "/", i), 1, `${lid}:${i}`)), 1, tabId)), 1, "Fl_20"),
+      }, null, labelIds.map((lid, i) => /* @__PURE__ */ core$1._jsxSorted(core$1.Fragment, null, null, _rawProps.renderChild(lid, "/", i), 1, `${lid}:${i}`)), 1, tabId)), 1, "Fl_23"),
       tabs.map(({ tabId, contentIds }, idx) => /* @__PURE__ */ core$1._jsxSorted(ElmTabPanel, {
         value: String(idx)
       }, null, contentIds.map((cid, i) => /* @__PURE__ */ core$1._jsxSorted(core$1.Fragment, null, null, _rawProps.renderChild(cid, "/", i), 1, `${cid}:${i}`)), 1, tabId))
-    ], 1, "Fl_21");
+    ], 1, "Fl_24");
   }),
   // -------------------------------------------------------------------------
   // Table
@@ -2567,27 +3108,27 @@ const blockCatalog = basicCatalog.extend(
     caption: _rawProps.props.caption ? String(_rawProps.props.caption) : void 0,
     style: firstChildMargin(_rawProps.index)
   }, {
-    hasRowHeader: core$1._fnSignal(_hf12, [
+    hasRowHeader: core$1._fnSignal(_hf16, [
       _rawProps
     ])
   }, [
-    _rawProps.props.header && _rawProps.props.header.length > 0 && /* @__PURE__ */ core$1._jsxSorted(ElmTableHeader, null, null, _rawProps.childRefs(_rawProps.props.header).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted(core$1.Fragment, null, null, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Fl_22"),
-    /* @__PURE__ */ core$1._jsxSorted(ElmTableBody, null, null, _rawProps.childRefs(_rawProps.props.body).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted(core$1.Fragment, null, null, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Fl_23")
-  ], 1, "Fl_24")),
-  defineRenderer(core.TableRowApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted(ElmTableRow, null, null, _rawProps.childRefs(_rawProps.props.children).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted(core$1.Fragment, null, null, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Fl_25")),
+    _rawProps.props.header && _rawProps.props.header.length > 0 && /* @__PURE__ */ core$1._jsxSorted(ElmTableHeader, null, null, _rawProps.childRefs(_rawProps.props.header).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted(core$1.Fragment, null, null, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Fl_25"),
+    /* @__PURE__ */ core$1._jsxSorted(ElmTableBody, null, null, _rawProps.childRefs(_rawProps.props.body).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted(core$1.Fragment, null, null, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Fl_26")
+  ], 1, "Fl_27")),
+  defineRenderer(core.TableRowApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted(ElmTableRow, null, null, _rawProps.childRefs(_rawProps.props.children).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted(core$1.Fragment, null, null, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Fl_28")),
   defineRenderer(core.TableCellApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted(ElmTableCell, null, {
-    isHeader: core$1._fnSignal(_hf13, [
+    isHeader: core$1._fnSignal(_hf17, [
       _rawProps
     ]),
     columnIndex: core$1._wrapProp(_rawProps, "index")
-  }, _rawProps.childRefs(_rawProps.props.children).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted("span", null, null, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Fl_26")),
+  }, _rawProps.childRefs(_rawProps.props.children).map(({ id, path }, i) => /* @__PURE__ */ core$1._jsxSorted("span", null, null, _rawProps.renderChild(id, path, i), 1, `${id}:${i}`)), 1, "Fl_29")),
   // -------------------------------------------------------------------------
   // Fallback
   // -------------------------------------------------------------------------
   defineRenderer(core.UnsupportedApi, (_rawProps) => /* @__PURE__ */ core$1._jsxSorted(ElmUnsupportedBlock, {
     details: _rawProps.props.details ? `Unsupported component type: ${String(_rawProps.props.details)}` : "Unsupported component type",
     style: firstChildMargin(_rawProps.index)
-  }, null, null, 3, "Fl_27"))
+  }, null, null, 3, "Fl_30"))
 );
 function findCompleteReasoningGroups(events) {
   const started = /* @__PURE__ */ new Set();
@@ -2810,9 +3351,9 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
     error: null
   });
   const firstFieldRef = core$1.useSignal();
-  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
     const active22 = core$1._captures[0], firstFieldRef2 = core$1._captures[1];
-    const desc = track(() => active22.descriptor);
+    const desc = track2(() => active22.descriptor);
     if (!desc) return;
     requestAnimationFrame(() => firstFieldRef2.value?.focus());
   }, "ElmAgUiPromptPicker_component_useVisibleTask_feapXj33s9k", [
@@ -2842,10 +3383,10 @@ const ElmAgUiPromptPicker = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
     active2,
     modal2
   ]);
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(async ({ track }) => {
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(async ({ track: track2 }) => {
     const _rawProps2 = core$1._captures[0], onRowClick$2 = core$1._captures[1];
     if (!_rawProps2.triggerDescriptor) return;
-    const desc = track(() => _rawProps2.triggerDescriptor.value);
+    const desc = track2(() => _rawProps2.triggerDescriptor.value);
     if (desc === null) return;
     _rawProps2.triggerDescriptor.value = null;
     await onRowClick$2(desc);
@@ -3422,9 +3963,9 @@ const ElmMarkdown = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.i
   ]);
   const stableTokens = core$1.useSignal([]);
   const tailTokens = core$1.useSignal([]);
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
     const props2 = core$1._captures[0], stableTokens2 = core$1._captures[1], tailTokens2 = core$1._captures[2];
-    const md = track(() => props2.markdown);
+    const md = track2(() => props2.markdown);
     const allTokens = marked.marked.setOptions({
       gfm: true
     }).lexer(md);
@@ -3550,9 +4091,9 @@ const ElmAgUiToolExecution = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */
   const isResultShown = core$1.useSignal(false);
   const isResultOpen = core$1.useSignal(false);
   const queue = useThrottledQueue(200);
-  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
     const _rawProps2 = core$1._captures[0], isArgsOpen2 = core$1._captures[1], isArgsShown2 = core$1._captures[2], isOpen2 = core$1._captures[3], isResultOpen2 = core$1._captures[4], isResultShown2 = core$1._captures[5], queue2 = core$1._captures[6];
-    const eventType = track(() => _rawProps2.toolEventType);
+    const eventType = track2(() => _rawProps2.toolEventType);
     switch (eventType) {
       case core$2.EventType.TOOL_CALL_START:
         queue2.value?.push(async () => {
@@ -3893,16 +4434,16 @@ const ElmAgUiMessageRenderer = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__
           const reasoningRef = core$1.useSignal();
           const lastScrollTime = core$1.useSignal(0);
           const isOpen = core$1.useSignal(props.isReasoningRunning);
-          core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+          core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
             const isOpen2 = core$1._captures[0], props2 = core$1._captures[1];
-            isOpen2.value = track(() => props2.isReasoningRunning);
+            isOpen2.value = track2(() => props2.isReasoningRunning);
           }, "ElmAgUiMessageRenderer_component_render_Reasoning_component_useTask_60ln3xg09dQ", [
             isOpen,
             props
           ]));
-          core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+          core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
             const lastScrollTime2 = core$1._captures[0], props2 = core$1._captures[1], reasoningRef2 = core$1._captures[2];
-            track(() => props2.markdown);
+            track2(() => props2.markdown);
             const now = Date.now();
             if (now - lastScrollTime2.value < 500) return;
             lastScrollTime2.value = now;
@@ -4041,9 +4582,9 @@ const ElmAgUiAgent = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.
   const input2 = core$1.useSignal("");
   const containerRef = core$1.useSignal();
   const lastScrollTime = core$1.useSignal(0);
-  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
     const containerRef2 = core$1._captures[0], lastScrollTime2 = core$1._captures[1], props2 = core$1._captures[2];
-    track(() => props2.state.messages.length);
+    track2(() => props2.state.messages.length);
     if (props2.enableAutoScroll) {
       const now = Date.now();
       if (now - lastScrollTime2.value < 500) return;
@@ -4315,10 +4856,10 @@ function useAgent({ url, tools, context, headers, initialMessages, agentFactory
     toolsRef,
     toolsSignal
   ]);
-  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ cleanup, track }) => {
+  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ cleanup, track: track2 }) => {
     const agentRef2 = core$1._captures[0], executeRun2 = core$1._captures[1], factoryRef2 = core$1._captures[2], headers2 = core$1._captures[3], state2 = core$1._captures[4], toolsRef2 = core$1._captures[5], toolsSignal2 = core$1._captures[6], url2 = core$1._captures[7];
-    const trackedUrl = track(() => url2);
-    const trackedHeaders = track(() => headers2 ? {
+    const trackedUrl = track2(() => url2);
+    const trackedHeaders = track2(() => headers2 ? {
       ...headers2
     } : void 0);
     const factory = factoryRef2.value ?? ((opts) => new client.HttpAgent(opts));
@@ -4460,12 +5001,12 @@ async function createMcpClient(cfg) {
   const client2 = new Client(CLIENT_INFO, {
     capabilities: {}
   });
-  const transport = new StreamableHTTPClientTransport(new URL(cfg.url), {
+  const transport2 = new StreamableHTTPClientTransport(new URL(cfg.url), {
     requestInit: cfg.headers ? {
       headers: cfg.headers
     } : void 0
   });
-  await client2.connect(transport);
+  await client2.connect(transport2);
   return {
     listTools: async () => {
       const { tools } = await client2.listTools();
@@ -4926,6 +5467,7 @@ const styles$d = {
 };
 const ElmButton = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inlinedQrl((props) => {
   const clicked = core$1.useSignal(false);
+  const timer = core$1.useSignal();
   const rest = core$1._restProps(props, [
     "class",
     "onClick$",
@@ -4935,18 +5477,26 @@ const ElmButton = /* @__PURE__ */ core$1.componentQrl(/* @__PURE__ */ core$1.inl
     "color",
     "primary"
   ]);
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ cleanup }) => {
+    const timer2 = core$1._captures[0];
+    cleanup(() => clearTimeout(timer2.value));
+  }, "ElmButton_component_useTask_CIR92bUomvY", [
+    timer
+  ]));
   const handleClick = /* @__PURE__ */ core$1.inlinedQrl(async () => {
-    const clicked2 = core$1._captures[0], props2 = core$1._captures[1];
+    const clicked2 = core$1._captures[0], props2 = core$1._captures[1], timer2 = core$1._captures[2];
     if (!props2.isLoading && !props2.disabled) {
       if (props2.onClick$) {
         clicked2.value = true;
-        setTimeout(() => clicked2.value = false, 300);
+        clearTimeout(timer2.value);
+        timer2.value = setTimeout(() => clicked2.value = false, 300);
         await props2.onClick$();
       }
     }
   }, "ElmButton_component_handleClick_TjZWd0Dz3m8", [
     clicked,
-    props
+    props,
+    timer
   ]);
   return /* @__PURE__ */ core$1._jsxSplit("button", {
     "q-e:click": handleClick,
@@ -5846,9 +6396,9 @@ const useDebouncedSignal = (initialValue, delay) => {
   const signal = core$1.useSignal(resolved);
   const debouncedSignal = core$1.useSignal(resolved);
   const isPending = core$1.useSignal(false);
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track, cleanup }) => {
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2, cleanup }) => {
     const debouncedSignal2 = core$1._captures[0], delay2 = core$1._captures[1], isPending2 = core$1._captures[2], signal2 = core$1._captures[3];
-    const value = track(() => signal2.value);
+    const value = track2(() => signal2.value);
     if (delay2 <= 0) {
       debouncedSignal2.value = value;
       isPending2.value = false;
@@ -5886,9 +6436,9 @@ const useDebouncedStore = (initialValue, delay) => {
   const store = core$1.useStore(esToolkit.cloneDeep(initialValue));
   const debouncedStore = core$1.useStore(esToolkit.cloneDeep(initialValue));
   const isPending = core$1.useSignal(false);
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track, cleanup }) => {
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2, cleanup }) => {
     const debouncedStore2 = core$1._captures[0], delay2 = core$1._captures[1], isPending2 = core$1._captures[2], store2 = core$1._captures[3];
-    const snapshot = track(() => esToolkit.cloneDeep(store2));
+    const snapshot = track2(() => esToolkit.cloneDeep(store2));
     if (delay2 <= 0) {
       syncStore$1(debouncedStore2, snapshot);
       isPending2.value = false;
@@ -5968,9 +6518,9 @@ const useThrottledSignal = (initialValue, interval) => {
   }, "useThrottledSignal_useTask_guB8zmf2bYc", [
     cooldownId
   ]));
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
     const cooldownId2 = core$1._captures[0], interval2 = core$1._captures[1], isCooling2 = core$1._captures[2], signal2 = core$1._captures[3], throttledSignal2 = core$1._captures[4];
-    const value = track(() => signal2.value);
+    const value = track2(() => signal2.value);
     if (interval2 <= 0) {
       throttledSignal2.value = value;
       return;
@@ -6023,9 +6573,9 @@ const useThrottledStore = (initialValue, interval) => {
   }, "useThrottledStore_useTask_3uGijs762ho", [
     cooldownId
   ]));
-  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+  core$1.useTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
     const cooldownId2 = core$1._captures[0], interval2 = core$1._captures[1], isCooling2 = core$1._captures[2], store2 = core$1._captures[3], throttledStore2 = core$1._captures[4];
-    const snapshot = track(() => esToolkit.cloneDeep(store2));
+    const snapshot = track2(() => esToolkit.cloneDeep(store2));
     if (interval2 <= 0) {
       syncStore(throttledStore2, snapshot);
       return;
@@ -6188,9 +6738,9 @@ const useStorage = (_rawProps) => {
   ]), {
     strategy: "document-ready"
   });
-  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track }) => {
+  core$1.useVisibleTaskQrl(/* @__PURE__ */ core$1.inlinedQrl(({ track: track2 }) => {
     const _rawProps2 = core$1._captures[0], bcRef2 = core$1._captures[1], state2 = core$1._captures[2], storageRef2 = core$1._captures[3];
-    const newState = track(state2);
+    const newState = track2(state2);
     const storage = storageRef2.value;
     if (!storage) return;
     try {
@@ -24269,6 +24819,7 @@ exports.ElmAgUiInputContent = ElmAgUiInputContent;
 exports.ElmAgUiMessageRenderer = ElmAgUiMessageRenderer;
 exports.ElmAgUiPromptPicker = ElmAgUiPromptPicker;
 exports.ElmAgUiToolExecution = ElmAgUiToolExecution;
+exports.ElmAudioPlayer = ElmAudioPlayer;
 exports.ElmBlockFallback = ElmBlockFallback;
 exports.ElmBlockImage = ElmBlockImage;
 exports.ElmBlockQuote = ElmBlockQuote;