@devicechain/widgets 0.23.0-rc.1 → 0.24.0-rc.1

package/dist/chunks/{control-widgets-3V2LSSRF.js → control-widgets-UCTJJJ2D.js}

@@ -11,15 +11,15 @@ import {
 // src/widgets/command-slider.tsx
 import { useEffect as useEffect2, useId, useMemo, useRef as useRef2, useState as useState2 } from "react";
 import {
-  css as css2,
-  FIT_MIN_FONT_PX,
-  fitValueFont,
-  fitValueFontCss,
-  fontVar as fontVar2,
+  css as css3,
+  FIT_MIN_FONT_PX as FIT_MIN_FONT_PX2,
+  fitValueFont as fitValueFont2,
+  fitValueFontCss as fitValueFontCss2,
+  fontVar as fontVar3,
   optNumber,
   optString,
-  spaceVar as spaceVar2,
-  useStickyChars,
+  spaceVar as spaceVar3,
+  useStickyChars as useStickyChars2,
   WidgetFrame
 } from "@devicechain/widget-sdk";
 
@@ -131,6 +131,17 @@ function lastSent(kind, commands, commandName, parameter, optimistic) {
   return { token: newest.token, value: readValue(kind, newest.payload, parameter), status: newest.status };
 }
 
+// src/widgets/command-stepper.tsx
+import {
+  css as css2,
+  FIT_MIN_FONT_PX,
+  fitValueFont,
+  fitValueFontCss,
+  fontVar as fontVar2,
+  spaceVar as spaceVar2,
+  useStickyChars
+} from "@devicechain/widget-sdk";
+
 // src/command-control.tsx
 import { useCallback, useEffect, useRef, useState } from "react";
 import { css, fontVar, spaceVar } from "@devicechain/widget-sdk";
@@ -156,6 +167,11 @@ var CONTROL_STRINGS = {
     noValue: "no value",
     unsent: "Not sent yet. Release or press Enter to send",
     sliderHint: "Arrow keys choose a value; press Enter to send it, or Escape to discard it.",
+    stepperHint: "Arrow keys and Page Up or Down change the value; press Enter to send it, or Escape to discard it.",
+    stepperUnsent: "Not sent yet. Press Send",
+    send: "Send",
+    decrease: "Decrease",
+    increase: "Increase",
     pending: "Pending",
     delivered: "Delivered",
     failed: "Failed",
@@ -186,6 +202,11 @@ var CONTROL_STRINGS = {
     noValue: "sin valor",
     unsent: "A\xFAn no enviado. Suelte o pulse Intro para enviar",
     sliderHint: "Las flechas eligen un valor; pulse Intro para enviarlo o Escape para descartarlo.",
+    stepperHint: "Las flechas y Re P\xE1g o Av P\xE1g cambian el valor; pulse Intro para enviarlo o Escape para descartarlo.",
+    stepperUnsent: "A\xFAn no enviado. Pulse Enviar",
+    send: "Enviar",
+    decrease: "Disminuir",
+    increase: "Aumentar",
     pending: "Pendiente",
     delivered: "Entregado",
     failed: "Fallido",
@@ -355,8 +376,161 @@ function LastSentCaption({
   );
 }
 
-// src/widgets/command-slider.tsx
+// src/widgets/command-stepper.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PAGE_STEPS = 10;
+var button = (off) => ({
+  flex: "0 0 auto",
+  boxSizing: "border-box",
+  minWidth: TOUCH_TARGET_PX,
+  height: TOUCH_TARGET_PX,
+  padding: `0 ${spaceVar2(2)}`,
+  border: `1px solid ${css2("border")}`,
+  borderRadius: 6,
+  background: css2("card"),
+  color: css2("foreground"),
+  font: "inherit",
+  fontSize: fontVar2("md"),
+  fontWeight: 600,
+  cursor: off ? "not-allowed" : "pointer",
+  opacity: off ? 0.5 : 1
+});
+function StepperBody({
+  binding,
+  label,
+  draft,
+  lastValue,
+  sender,
+  captionId,
+  hintId,
+  caption,
+  onStage,
+  onCommit,
+  onDiscard,
+  scale: ws
+}) {
+  const range = binding.range;
+  const unit = binding.param.unit;
+  const busy = sender.pending;
+  const inert = !sender.canSend || busy;
+  const rest = lastValue !== void 0 ? clampToRange(range, lastValue) : range.min;
+  const shown = draft ?? rest;
+  const known = draft !== null || lastValue !== void 0;
+  const readout = known ? String(shown) : "\u2014";
+  const text = unit && known ? `${shown} ${unit}` : String(shown);
+  const by = (steps) => {
+    if (inert) return;
+    const next = clampToRange(range, shown + steps * range.step);
+    if (next !== shown || draft === null) onStage(next);
+  };
+  const canSendNow = draft !== null && !inert;
+  const chars = useStickyChars(readout.length + (unit && known ? Math.ceil(unit.length / 2) + 1 : 0));
+  const floor = Math.round(FIT_MIN_FONT_PX * ws.scale);
+  const measured = ws.size.width > 0 && ws.size.height > 0;
+  const font = measured ? fitValueFont({ width: Math.floor(ws.size.width * 0.3), height: Math.max(TOUCH_TARGET_PX, Math.floor(ws.size.height * 0.5)) }, chars, { floor }) : fitValueFontCss(chars, { floor });
+  const key = (e) => {
+    const k = e.key;
+    if (k === "ArrowUp" || k === "ArrowRight") by(1);
+    else if (k === "ArrowDown" || k === "ArrowLeft") by(-1);
+    else if (k === "PageUp") by(PAGE_STEPS);
+    else if (k === "PageDown") by(-PAGE_STEPS);
+    else if (k === "Home") inert || onStage(range.min);
+    else if (k === "End") inert || onStage(range.max);
+    else if (k === "Enter") onCommit();
+    else if (k === "Escape") onDiscard();
+    else return;
+    e.preventDefault();
+  };
+  const atMin = shown <= range.min;
+  const atMax = shown >= range.max;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: { height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", justifyContent: "safe center", gap: spaceVar2(1), overflow: "hidden" },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: spaceVar2(1), minHeight: TOUCH_TARGET_PX }, children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": sender.strings.decrease,
+              "aria-disabled": inert || atMin || void 0,
+              "data-step": "down",
+              onClick: () => by(-1),
+              style: button(inert || atMin),
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              role: "spinbutton",
+              tabIndex: 0,
+              "aria-label": label,
+              "aria-valuemin": range.min,
+              "aria-valuemax": range.max,
+              "aria-valuenow": known ? shown : void 0,
+              "aria-valuetext": known ? text : sender.strings.noValue,
+              "aria-describedby": `${hintId} ${captionId}${sender.readOnlyReason ? ` ${readOnlyId(captionId)}` : ""}`,
+              "aria-disabled": inert || void 0,
+              "aria-busy": busy || void 0,
+              "data-staged": draft !== null ? "true" : void 0,
+              onKeyDown: key,
+              style: {
+                flex: "1 1 0",
+                minWidth: 0,
+                textAlign: "center",
+                fontSize: font,
+                fontWeight: 600,
+                lineHeight: 1.1,
+                whiteSpace: "nowrap",
+                fontVariantNumeric: "tabular-nums",
+                color: draft !== null ? css2("foreground") : css2("muted-foreground")
+              },
+              children: [
+                readout,
+                unit && known ? /* @__PURE__ */ jsx2("span", { style: { fontSize: fontVar2("sm"), marginLeft: spaceVar2(1), color: css2("muted-foreground") }, children: unit }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": sender.strings.increase,
+              "aria-disabled": inert || atMax || void 0,
+              "data-step": "up",
+              onClick: () => by(1),
+              style: button(inert || atMax),
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-disabled": !canSendNow || void 0,
+              "data-step": "send",
+              onClick: () => canSendNow && onCommit(),
+              style: { ...button(!canSendNow), background: canSendNow ? css2("primary") : css2("card"), color: canSendNow ? css2("primary-foreground") : css2("foreground") },
+              children: sender.strings.send
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { id: hintId, hidden: true, children: sender.strings.stepperHint })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", columnGap: spaceVar2(2) }, children: [
+          caption,
+          /* @__PURE__ */ jsx2(ControlNotes, { sender, captionId })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/widgets/command-slider.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var withUnit = (v, unit) => unit ? `${v} ${unit}` : String(v);
 function CommandSlider({ widget, data, actions }) {
   const commandName = optString(widget.options, "commandName");
@@ -366,6 +540,7 @@ function CommandSlider({ widget, data, actions }) {
   const min = optNumber(widget.options, "min");
   const max = optNumber(widget.options, "max");
   const step = optNumber(widget.options, "step");
+  const stepper = optString(widget.options, "mode") === "stepper";
   const binding = useMemo(
     () => bindControl("number", { commandName, parameterSchema, parameter, min, max, step }),
     [commandName, parameterSchema, parameter, min, max, step]
@@ -385,6 +560,12 @@ function CommandSlider({ widget, data, actions }) {
   };
   const captionId = useId();
   const hintId = useId();
+  const lastToken = last?.token;
+  useEffect2(() => {
+    if (!stepper || draftRef.current === null) return;
+    draftRef.current = null;
+    setDraftState(null);
+  }, [lastToken, stepper]);
   const pressed = useRef2(false);
   const offRelease = useRef2(null);
   useEffect2(() => () => offRelease.current?.(), []);
@@ -417,9 +598,23 @@ function CommandSlider({ widget, data, actions }) {
     offRelease.current = null;
     commit();
   };
-  return /* @__PURE__ */ jsx2(WidgetFrame, { title: optString(widget.options, "title"), children: (scale) => !binding.ok ? /* @__PURE__ */ jsx2(ControlEmpty, { message: refusalText(binding.refusal, sender.strings, "number") }) : /* @__PURE__ */ jsx2(
-    SliderBody,
+  const caption = binding.ok ? /* @__PURE__ */ jsx3(
+    LastSentCaption,
     {
+      id: captionId,
+      last,
+      strings: sender.strings,
+      truncated: data.total > data.commands.length,
+      format: (v) => typeof v === "number" ? withUnit(v, binding.param.unit) : sender.strings.noValue,
+      override: draft !== null ? stepper ? sender.strings.stepperUnsent : sender.strings.unsent : sender.pending ? sender.strings.sending : void 0
+    }
+  ) : null;
+  const onStage = (v) => {
+    if (binding.ok && !sender.pending) setDraft(clampToRange(binding.range, v));
+  };
+  return /* @__PURE__ */ jsx3(WidgetFrame, { title: optString(widget.options, "title"), children: (scale) => {
+    if (!binding.ok) return /* @__PURE__ */ jsx3(ControlEmpty, { message: refusalText(binding.refusal, sender.strings, "number") });
+    const common = {
       binding,
       label: commandLabel ?? binding.param.name,
       draft,
@@ -427,30 +622,24 @@ function CommandSlider({ widget, data, actions }) {
       sender,
       captionId,
       hintId,
-      caption: /* @__PURE__ */ jsx2(
-        LastSentCaption,
-        {
-          id: captionId,
-          last,
-          strings: sender.strings,
-          truncated: data.total > data.commands.length,
-          format: (v) => typeof v === "number" ? withUnit(v, binding.param.unit) : sender.strings.noValue,
-          override: draft !== null ? sender.strings.unsent : sender.pending ? sender.strings.sending : void 0
-        }
-      ),
-      onStage: (v) => {
-        if (!sender.pending) setDraft(clampToRange(binding.range, v));
-      },
+      caption,
+      onStage,
       onCommit: commit,
-      onPress: press,
-      onRelease: release,
       onDiscard: discard,
-      onLostCapture: () => {
-        if (pressed.current) discard();
-      },
       scale
-    }
-  ) });
+    };
+    return stepper ? /* @__PURE__ */ jsx3(StepperBody, { ...common }) : /* @__PURE__ */ jsx3(
+      SliderBody,
+      {
+        ...common,
+        onPress: press,
+        onRelease: release,
+        onLostCapture: () => {
+          if (pressed.current) discard();
+        }
+      }
+    );
+  } });
 }
 function SliderBody({
   binding,
@@ -477,15 +666,15 @@ function SliderBody({
   const shown = draft ?? rest;
   const known = draft !== null || lastValue !== void 0;
   const readout = known ? String(shown) : "\u2014";
-  const chars = useStickyChars(readout.length + (unit && known ? Math.ceil(unit.length / 2) + 1 : 0));
-  const floor = Math.round(FIT_MIN_FONT_PX * ws.scale);
+  const chars = useStickyChars2(readout.length + (unit && known ? Math.ceil(unit.length / 2) + 1 : 0));
+  const floor = Math.round(FIT_MIN_FONT_PX2 * ws.scale);
   const measured = ws.size.width > 0 && ws.size.height > 0;
   const room = {
     width: Math.floor(ws.size.width * 0.34),
     height: Math.max(TOUCH_TARGET_PX, Math.floor(ws.size.height * 0.5))
   };
-  const font = measured ? fitValueFont(room, chars, { floor }) : fitValueFontCss(chars, { floor });
-  return /* @__PURE__ */ jsxs2(
+  const font = measured ? fitValueFont2(room, chars, { floor }) : fitValueFontCss2(chars, { floor });
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       style: {
@@ -494,12 +683,12 @@ function SliderBody({
         display: "flex",
         flexDirection: "column",
         justifyContent: "safe center",
-        gap: spaceVar2(1),
+        gap: spaceVar3(1),
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: spaceVar2(2), minHeight: TOUCH_TARGET_PX }, children: [
-          /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: spaceVar3(2), minHeight: TOUCH_TARGET_PX }, children: [
+          /* @__PURE__ */ jsx3(
             "input",
             {
               type: "range",
@@ -529,13 +718,13 @@ function SliderBody({
                 minWidth: 0,
                 height: TOUCH_TARGET_PX,
                 margin: 0,
-                accentColor: css2("primary"),
+                accentColor: css3("primary"),
                 cursor: disabled || busy ? "not-allowed" : "pointer"
               }
             }
           ),
-          /* @__PURE__ */ jsx2("span", { id: hintId, hidden: true, children: sender.strings.sliderHint }),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsx3("span", { id: hintId, hidden: true, children: sender.strings.sliderHint }),
+          /* @__PURE__ */ jsxs3(
             "output",
             {
               "aria-hidden": "true",
@@ -547,18 +736,18 @@ function SliderBody({
                 lineHeight: 1.1,
                 whiteSpace: "nowrap",
                 fontVariantNumeric: "tabular-nums",
-                color: draft !== null ? css2("foreground") : css2("muted-foreground")
+                color: draft !== null ? css3("foreground") : css3("muted-foreground")
               },
               children: [
                 readout,
-                unit && known ? /* @__PURE__ */ jsx2("span", { style: { fontSize: fontVar2("sm"), marginLeft: spaceVar2(1), color: css2("muted-foreground") }, children: unit }) : null
+                unit && known ? /* @__PURE__ */ jsx3("span", { style: { fontSize: fontVar3("sm"), marginLeft: spaceVar3(1), color: css3("muted-foreground") }, children: unit }) : null
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", columnGap: spaceVar2(2) }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", columnGap: spaceVar3(2) }, children: [
           caption,
-          /* @__PURE__ */ jsx2(ControlNotes, { sender, captionId })
+          /* @__PURE__ */ jsx3(ControlNotes, { sender, captionId })
         ] })
       ]
     }
@@ -568,16 +757,16 @@ function SliderBody({
 // src/widgets/command-toggle.tsx
 import { useId as useId2, useMemo as useMemo2 } from "react";
 import {
-  css as css3,
-  FIT_MIN_FONT_PX as FIT_MIN_FONT_PX2,
-  fitValueFont as fitValueFont2,
-  fitValueFontCss as fitValueFontCss2,
+  css as css4,
+  FIT_MIN_FONT_PX as FIT_MIN_FONT_PX3,
+  fitValueFont as fitValueFont3,
+  fitValueFontCss as fitValueFontCss3,
   optString as optString2,
-  spaceVar as spaceVar3,
-  useStickyChars as useStickyChars2,
+  spaceVar as spaceVar4,
+  useStickyChars as useStickyChars3,
   WidgetFrame as WidgetFrame2
 } from "@devicechain/widget-sdk";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var TRACK_W = 52;
 var TRACK_H = 30;
 var THUMB = 24;
@@ -598,7 +787,7 @@ function CommandToggle({ widget, data, actions }) {
   );
   const last = binding.ok && commandName ? lastSent("boolean", data.commands, commandName, binding.param.name, sender.optimistic) : null;
   const captionId = useId2();
-  return /* @__PURE__ */ jsx3(WidgetFrame2, { title: optString2(widget.options, "title"), children: (scale) => !binding.ok ? /* @__PURE__ */ jsx3(ControlEmpty, { message: refusalText(binding.refusal, sender.strings, "boolean") }) : /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(WidgetFrame2, { title: optString2(widget.options, "title"), children: (scale) => !binding.ok ? /* @__PURE__ */ jsx4(ControlEmpty, { message: refusalText(binding.refusal, sender.strings, "boolean") }) : /* @__PURE__ */ jsx4(
     ToggleBody,
     {
       binding,
@@ -606,7 +795,7 @@ function CommandToggle({ widget, data, actions }) {
       value: intentOf(last),
       sender,
       captionId,
-      caption: /* @__PURE__ */ jsx3(
+      caption: /* @__PURE__ */ jsx4(
         LastSentCaption,
         {
           id: captionId,
@@ -639,18 +828,18 @@ function ToggleBody({
   const unknown = value === void 0;
   const disabled = !sender.canSend;
   const word = checked ? sender.strings.on : sender.strings.off;
-  const chars = useStickyChars2(word.length);
-  const floor = Math.round(FIT_MIN_FONT_PX2 * ws.scale);
+  const chars = useStickyChars3(word.length);
+  const floor = Math.round(FIT_MIN_FONT_PX3 * ws.scale);
   const measured = ws.size.width > 0 && ws.size.height > 0;
   const room = {
     width: Math.floor(ws.size.width - TRACK_W - 16),
     height: Math.max(TOUCH_TARGET_PX, Math.floor(ws.size.height * 0.5))
   };
-  const font = measured ? fitValueFont2(room, chars, { floor }) : fitValueFontCss2(chars, { floor });
+  const font = measured ? fitValueFont3(room, chars, { floor }) : fitValueFontCss3(chars, { floor });
   const sendValue = (next) => {
     sender.send(payloadFor(binding, next), next);
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       style: {
@@ -659,11 +848,11 @@ function ToggleBody({
         display: "flex",
         flexDirection: "column",
         justifyContent: "safe center",
-        gap: spaceVar3(1),
+        gap: spaceVar4(1),
         overflow: "hidden"
       },
       children: [
-        unknown ? /* @__PURE__ */ jsx3("div", { role: "group", "aria-label": label, "aria-describedby": sender.readOnlyReason ? `${captionId} ${readOnlyId(captionId)}` : captionId, "data-toggle-choose": "", style: { display: "flex", gap: spaceVar3(2) }, children: [true, false].map((v) => /* @__PURE__ */ jsx3(
+        unknown ? /* @__PURE__ */ jsx4("div", { role: "group", "aria-label": label, "aria-describedby": sender.readOnlyReason ? `${captionId} ${readOnlyId(captionId)}` : captionId, "data-toggle-choose": "", style: { display: "flex", gap: spaceVar4(2) }, children: [true, false].map((v) => /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -674,11 +863,11 @@ function ToggleBody({
               flex: "1 1 0",
               minHeight: TOUCH_TARGET_PX,
               minWidth: TOUCH_TARGET_PX,
-              padding: `0 ${spaceVar3(2)}`,
+              padding: `0 ${spaceVar4(2)}`,
               borderRadius: 6,
-              border: `1px solid ${css3("border")}`,
-              background: css3("background"),
-              color: css3("foreground"),
+              border: `1px solid ${css4("border")}`,
+              background: css4("background"),
+              color: css4("foreground"),
               fontWeight: 600,
               cursor: disabled ? "not-allowed" : "pointer",
               opacity: disabled ? 0.6 : 1
@@ -686,7 +875,7 @@ function ToggleBody({
             children: v ? sender.strings.on : sender.strings.off
           },
           String(v)
-        )) }) : /* @__PURE__ */ jsxs3(
+        )) }) : /* @__PURE__ */ jsxs4(
           "button",
           {
             type: "button",
@@ -700,19 +889,19 @@ function ToggleBody({
             style: {
               display: "flex",
               alignItems: "center",
-              gap: spaceVar3(2),
+              gap: spaceVar4(2),
               minHeight: TOUCH_TARGET_PX,
               minWidth: TOUCH_TARGET_PX,
               padding: 0,
               border: "none",
               background: "transparent",
-              color: css3("foreground"),
+              color: css4("foreground"),
               cursor: disabled ? "not-allowed" : "pointer",
               opacity: disabled ? 0.6 : 1,
               textAlign: "left"
             },
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -723,10 +912,10 @@ function ToggleBody({
                     height: TRACK_H,
                     borderRadius: TRACK_H / 2,
                     boxSizing: "border-box",
-                    border: `1px solid ${css3("border")}`,
-                    background: checked ? css3("primary") : css3("muted")
+                    border: `1px solid ${css4("border")}`,
+                    background: checked ? css4("primary") : css4("muted")
                   },
-                  children: /* @__PURE__ */ jsx3(
+                  children: /* @__PURE__ */ jsx4(
                     "span",
                     {
                       style: {
@@ -736,15 +925,15 @@ function ToggleBody({
                         width: THUMB,
                         height: THUMB,
                         borderRadius: "50%",
-                        background: checked ? css3("primary-foreground") : css3("background"),
-                        border: `1px solid ${css3("border")}`,
+                        background: checked ? css4("primary-foreground") : css4("background"),
+                        border: `1px solid ${css4("border")}`,
                         boxSizing: "border-box"
                       }
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "span",
                 {
                   "data-toggle-word": "",
@@ -753,7 +942,7 @@ function ToggleBody({
                     fontWeight: 600,
                     lineHeight: 1.1,
                     whiteSpace: "nowrap",
-                    color: css3("foreground")
+                    color: css4("foreground")
                   },
                   children: word
                 }
@@ -761,9 +950,9 @@ function ToggleBody({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", columnGap: spaceVar3(2) }, children: [
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", columnGap: spaceVar4(2) }, children: [
           caption,
-          /* @__PURE__ */ jsx3(ControlNotes, { sender, captionId })
+          /* @__PURE__ */ jsx4(ControlNotes, { sender, captionId })
         ] })
       ]
     }
@@ -774,4 +963,4 @@ export {
   CommandSlider,
   CommandToggle
 };
-//# sourceMappingURL=control-widgets-3V2LSSRF.js.map
+//# sourceMappingURL=control-widgets-UCTJJJ2D.js.map