@exponential_app/eui-react 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,11 +1,13 @@
 import {
   ChoiceTilesFrame2,
   choiceColumns2,
-  choiceValues2
-} from "./chunks/index-5yzzfez5.js";
+  choiceValues2,
+  ZOOM_MATH2,
+  useZoomableImage2
+} from "./chunks/index-eny7hh6w.js";
 
 // packages/exponential-ui-react/src/surface.tsx
-import { useCallback as useCallback11, useEffect as useEffect20, useId as useId7, useImperativeHandle as useImperativeHandle2, useLayoutEffect as useLayoutEffect6, useMemo as useMemo18, useRef as useRef25, useState as useState21, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect22, useId as useId7, useImperativeHandle as useImperativeHandle2, useLayoutEffect as useLayoutEffect7, useMemo as useMemo19, useRef as useRef26, useState as useState22, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   activeBreakpoint,
   applyContrast,
@@ -117,7 +119,7 @@ function extensionComponent(extensions, component) {
 }
 
 // packages/exponential-ui-react/src/node-view.tsx
-import { Component, Fragment as Fragment7, memo as memo2, useCallback as useCallback10, useContext as useContext6, useEffect as useEffect19, useMemo as useMemo17, useRef as useRef24 } from "react";
+import { Component, Fragment as Fragment8, memo as memo2, useCallback as useCallback10, useContext as useContext6, useEffect as useEffect21, useMemo as useMemo18, useRef as useRef25 } from "react";
 import { UNKNOWN_COMPONENT, instanceSegment, isResponsiveValue, nativeRecipeProps as nativeRecipeProps4, responsiveAt, templateItemKeys, templateSiteKey, withOwnWrites } from "@exponential_app/eui";
 import { dynamicStyleEntries, nodeClass, queryToken, styleDirection } from "@exponential_app/eui/web";
 
@@ -252,7 +254,8 @@ import {
   File,
   Hand,
   Info,
-  Loader,
+  LoaderCircle,
+  Maximize2,
   Menu,
   Mic,
   MicOff,
@@ -261,6 +264,7 @@ import {
   PhoneIncoming,
   PhoneOff,
   Play,
+  Pause,
   Plus,
   QrCode,
   ScanLine,
@@ -288,8 +292,9 @@ var CHROME = {
   send: Send,
   stop: Square,
   play: Play,
+  pause: Pause,
   attach: Paperclip,
-  spinner: Loader,
+  spinner: LoaderCircle,
   placeholder: CircleDashed
 };
 var FALLBACK_ICONS = {
@@ -321,6 +326,7 @@ var FALLBACK_ICONS = {
   "ui-scan": ScanLine,
   "ui-qr-code": QrCode,
   "ui-hold": Hand,
+  "ui-fullscreen": Maximize2,
   "voice-level": AudioLines,
   "call-mute": Mic,
   "call-unmute": MicOff,
@@ -631,7 +637,8 @@ function ButtonNative({ node, props, rootProps, emit, children }) {
   const label = str(props.label);
   const icon = str(props.icon);
   const loading = bool(props.loading) || pending || submit && form.busy;
-  const disabled = bool(props.disabled) || loading;
+  const disabled = bool(props.disabled);
+  const inert = disabled || loading;
   const iconOnly = props.size === `icon`;
   const Spinner = CHROME.spinner;
   const hasChild = node.children.length > 0;
@@ -646,7 +653,7 @@ function ButtonNative({ node, props, rootProps, emit, children }) {
   });
   const rootStyle = rootProps.style;
   const hold = bool(props.hold);
-  const { held, handlers } = useHold(hold, disabled, emit);
+  const { held, handlers } = useHold(hold, inert, emit);
   const holdingLabel = str(props.holdingLabel);
   const paintedLabel = held && holdingLabel ? holdingLabel : shownLabel;
   const states = [...ctx.states ?? [], disabled ? `disabled` : ``, pending ? `pending` : ``, held ? `pressed` : ``].filter(Boolean).join(` `);
@@ -665,7 +672,7 @@ function ButtonNative({ node, props, rootProps, emit, children }) {
     ...hold ? handlers : {},
     onClick: (e) => {
       e.stopPropagation();
-      if (hold)
+      if (hold || inert)
         return;
       track(emit(`press`));
       if (submit)
@@ -966,12 +973,12 @@ function ChartNative({ node, props, rootProps }) {
             strokeLinejoin: "round",
             strokeLinecap: "round"
           }),
-          !sparkline ? s.values.map((v, i) => Number.isFinite(v) ? /* @__PURE__ */ jsx5("circle", {
-            cx: px(i),
-            cy: y(v),
-            r: active === i ? 4 : 2.5,
+          !sparkline && active !== null && Number.isFinite(s.values[active]) ? /* @__PURE__ */ jsx5("circle", {
+            cx: px(active),
+            cy: y(s.values[active]),
+            r: 4,
             fill: color
-          }, i) : null) : null
+          }) : null
         ]
       }, si);
     });
@@ -1136,15 +1143,17 @@ function ChartNative({ node, props, rootProps }) {
                 fill: "currentColor",
                 fontSize: AXIS_FONT,
                 children: [
-                  /* @__PURE__ */ jsx5("line", {
-                    x1: mx(pad.l),
-                    x2: mx(width - pad.r),
-                    y1: zero,
-                    y2: zero,
-                    stroke: "currentColor",
-                    strokeWidth: 1,
-                    opacity: 0.6,
-                    shapeRendering: "crispEdges"
+                  /* @__PURE__ */ jsx5("g", {
+                    ...part(`grid`),
+                    children: /* @__PURE__ */ jsx5("line", {
+                      x1: mx(pad.l),
+                      x2: mx(width - pad.r),
+                      y1: zero,
+                      y2: zero,
+                      stroke: "currentColor",
+                      strokeWidth: 1,
+                      shapeRendering: "crispEdges"
+                    })
                   }),
                   ticks.ticks.map((t, i) => /* @__PURE__ */ jsx5("text", {
                     x: mx(pad.l - 6),
@@ -2274,8 +2283,7 @@ function TimePickerNative({ node, props, rootProps, emit, scope, domId }) {
       out.push(m);
     return out;
   }, [lo, hi, step]);
-  const clock = useMemo8(() => new Intl.DateTimeFormat(ctx.locale, { hour: `numeric`, minute: `2-digit` }), [ctx.locale]);
-  const show = (m) => clock.format(new Date(2000, 0, 1, Math.floor(m / 60), m % 60));
+  const show = formatHHmm;
   const current = parseTime(value);
   const pick = (i) => {
     const next = formatHHmm(times[i]);
@@ -2384,10 +2392,46 @@ function TimePickerNative({ node, props, rootProps, emit, scope, domId }) {
   });
 }
 
+// packages/exponential-ui-react/src/natives/motion.tsx
+import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect3, useRef as useRef11 } from "react";
+import { MotionView, motionA11y, motionBoxStyle, motionDeclaredSize } from "@exponential_app/eui/web";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CANVAS_STYLE = { display: `block`, width: `100%`, height: `100%` };
+function MotionNative({ node, props, rootProps, emit }) {
+  const ctx = useSurfaceContext();
+  const root = useRef11(null);
+  const canvas = useRef11(null);
+  const view = useRef11(null);
+  useLayoutEffect3(() => {
+    view.current = new MotionView(root.current, canvas.current);
+    return () => {
+      view.current?.destroy();
+      view.current = null;
+    };
+  }, []);
+  const host = ctx.host;
+  const surfaceId = ctx.surfaceId;
+  const pressable = Boolean(node.on?.press);
+  useEffect8(() => {
+    view.current?.update(props, { theme: ctx.theme, mode: ctx.mode, reducedMotion: ctx.reducedMotion, host, onError: (message) => host.onPaintError?.({ surfaceId, componentId: node.id, message }), emit: (event, payload) => void emit(event, payload), pressable }, node.style);
+  });
+  return /* @__PURE__ */ jsx10("div", {
+    ref: root,
+    ...rootProps,
+    ...motionA11y(props.label, pressable),
+    style: mergeStyle(rootProps, motionBoxStyle(motionDeclaredSize(props), node.style)),
+    children: /* @__PURE__ */ jsx10("canvas", {
+      ref: canvas,
+      "aria-hidden": "true",
+      style: CANVAS_STYLE
+    })
+  });
+}
+
 // packages/exponential-ui-react/src/natives/resizable.tsx
-import { useMemo as useMemo9, useRef as useRef11, useState as useState11 } from "react";
+import { useMemo as useMemo9, useRef as useRef12, useState as useState11 } from "react";
 import { dragDelta, keyboardResize, normalizeSizes, resizePanels, RESIZE_HANDLE_HIT } from "@exponential_app/eui";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var RESIZE_KEYS = new Set([`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`, `Home`, `End`, `Enter`]);
 function ResizableNative({ node, props, rootProps, emit, scope, domId }) {
   const ctx = useSurfaceContext();
@@ -2398,11 +2442,11 @@ function ResizableNative({ node, props, rootProps, emit, scope, domId }) {
   const external = useMemo9(() => normalizeSizes(arr(props.sizes), count, limits), [props.sizes, count, limits]);
   const [sizes, setBound] = useBoundState(node, scope, `sizes`, external);
   const [live, setLive] = useState11(null);
-  const liveRef = useRef11(null);
+  const liveRef = useRef12(null);
   const shown = live ?? (sizes.length === count ? sizes : external);
   const hairline = num(ctx.theme.tokens.control?.hairline, 1);
-  const rootRef = useRef11(null);
-  const drag = useRef11(null);
+  const rootRef = useRef12(null);
+  const drag = useRef12(null);
   const commit = (next) => {
     setBound(next);
     emit(`change`, { sizes: next }, { sizes: next });
@@ -2453,12 +2497,12 @@ function ResizableNative({ node, props, rootProps, emit, scope, domId }) {
   const parts = [];
   for (let i = 0;i < count; i++) {
     const size = shown[i] ?? 0;
-    parts.push(/* @__PURE__ */ jsx10("div", {
+    parts.push(/* @__PURE__ */ jsx11("div", {
       ...part.at(`panel`, i),
       id: `${domId}.panel.${i}`,
       "data-size": size,
       style: { flex: `${size} 1 0px` },
-      children: /* @__PURE__ */ jsx10(NodeView, {
+      children: /* @__PURE__ */ jsx11(NodeView, {
         node: node.children[i]
       })
     }, node.children[i].id));
@@ -2481,12 +2525,12 @@ function ResizableNative({ node, props, rootProps, emit, scope, domId }) {
         onPointerCancel: onPointerEnd,
         onKeyDown: onKey(i),
         children: [
-          /* @__PURE__ */ jsx10("span", {
+          /* @__PURE__ */ jsx11("span", {
             className: "xui-resize-hit",
             "aria-hidden": "true",
             style: { [orientation === `horizontal` ? `width` : `height`]: RESIZE_HANDLE_HIT }
           }),
-          bool(props.handle) ? /* @__PURE__ */ jsx10("span", {
+          bool(props.handle) ? /* @__PURE__ */ jsx11("span", {
             ...part.at(`grip`, i),
             "aria-hidden": "true"
           }) : null
@@ -2494,7 +2538,7 @@ function ResizableNative({ node, props, rootProps, emit, scope, domId }) {
       }, `h${i}`));
     }
   }
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx11("div", {
     ref: rootRef,
     ...rootProps,
     role: "group",
@@ -2505,10 +2549,10 @@ function ResizableNative({ node, props, rootProps, emit, scope, domId }) {
 }
 
 // packages/exponential-ui-react/src/natives/feedback.tsx
-import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect3, useRef as useRef12 } from "react";
+import { useEffect as useEffect9, useLayoutEffect as useLayoutEffect4, useRef as useRef13 } from "react";
 import { resolveRecipe, nativeRecipeProps as nativeRecipeProps2, voiceWave, voiceWaveBars, voiceWaveChildBox, voiceWavePath, voiceWaveVariant, TREE_GUIDE_BRIDGE, TREE_GUIDE_COLUMN, TREE_GUIDE_RADIUS, VOICE_WAVE_ACTIVITIES } from "@exponential_app/eui";
 import { voiceWaveAnimates, voiceWaveClock, voiceWaveFitChild, voiceWaveName } from "@exponential_app/eui/web";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function sizeOf(ctx, component, part, props, fallback) {
   const style = resolveRecipe(ctx.theme, { component, part, props: nativeRecipeProps2(component, props, ctx.extensionDefs) }, ctx.mode);
   return typeof style.width === `number` ? style.width : fallback;
@@ -2538,7 +2582,7 @@ function RingNative({ node, props, rootProps }) {
         width: size,
         height: size,
         children: [
-          /* @__PURE__ */ jsx11("circle", {
+          /* @__PURE__ */ jsx12("circle", {
             ...part(`track`),
             cx: size / 2,
             cy: size / 2,
@@ -2548,7 +2592,7 @@ function RingNative({ node, props, rootProps }) {
             strokeWidth: stroke,
             style: { color: String(trackStyle.color ?? `currentColor`) }
           }),
-          /* @__PURE__ */ jsx11("circle", {
+          /* @__PURE__ */ jsx12("circle", {
             ...part(`fill`),
             cx: size / 2,
             cy: size / 2,
@@ -2563,7 +2607,7 @@ function RingNative({ node, props, rootProps }) {
           })
         ]
       }),
-      label ? /* @__PURE__ */ jsx11("span", {
+      label ? /* @__PURE__ */ jsx12("span", {
         ...part(`label`),
         children: label
       }) : null
@@ -2575,12 +2619,12 @@ function SpinnerNative({ props, rootProps }) {
   const size = sizeOf(ctx, `Spinner`, `root`, props, 20);
   const Icon = CHROME.spinner;
   const label = str(props.label) || ctx.t(`loading`);
-  return /* @__PURE__ */ jsx11("span", {
+  return /* @__PURE__ */ jsx12("span", {
     ...rootProps,
     role: "status",
     "aria-label": label,
     style: mergeStyle(rootProps, { width: size, height: size }),
-    children: /* @__PURE__ */ jsx11(Icon, {
+    children: /* @__PURE__ */ jsx12(Icon, {
       "aria-hidden": "true"
     })
   });
@@ -2596,7 +2640,7 @@ function SkeletonNative({ node, props, rootProps }) {
   if (rows >= 1) {
     const dot = props.dot === undefined ? true : bool(props.dot);
     const height = props.rowHeight === undefined ? `var(--xui-control-row)` : `${num(props.rowHeight)}px`;
-    return /* @__PURE__ */ jsx11("div", {
+    return /* @__PURE__ */ jsx12("div", {
       ...rootProps,
       "data-rows": "",
       "aria-hidden": "true",
@@ -2606,14 +2650,14 @@ function SkeletonNative({ node, props, rootProps }) {
           ...part.at(`row`, r),
           style: { height },
           children: [
-            dot ? /* @__PURE__ */ jsx11("span", {
+            dot ? /* @__PURE__ */ jsx12("span", {
               ...part.at(`dot`, r)
             }) : null,
-            /* @__PURE__ */ jsx11("span", {
+            /* @__PURE__ */ jsx12("span", {
               ...part.at(`bar`, `${r}.0`),
               style: { width: lead }
             }),
-            /* @__PURE__ */ jsx11("span", {
+            /* @__PURE__ */ jsx12("span", {
               ...part.at(`bar`, `${r}.1`),
               "data-title": "",
               style: { width: title }
@@ -2625,7 +2669,7 @@ function SkeletonNative({ node, props, rootProps }) {
   }
   const width = str(props.width, `100%`);
   const height = str(props.height, `16px`);
-  return /* @__PURE__ */ jsx11("div", {
+  return /* @__PURE__ */ jsx12("div", {
     ...rootProps,
     "aria-hidden": "true",
     style: mergeStyle(rootProps, { width, height, borderRadius: bool(props.rounded) ? 9999 : undefined })
@@ -2641,7 +2685,7 @@ function TreeGuidesNative({ node, props, rootProps }) {
   const stroke = sizeOf(ctx, `TreeGuides`, `line`, props, 1);
   const line = part(`line`);
   const x = TREE_GUIDE_COLUMN / 2;
-  const vertical = (key) => /* @__PURE__ */ jsx11("i", {
+  const vertical = (key) => /* @__PURE__ */ jsx12("i", {
     ...line,
     "data-vertical": "",
     style: { left: x, width: stroke, top: -TREE_GUIDE_BRIDGE, bottom: 0 }
@@ -2656,7 +2700,7 @@ function TreeGuidesNative({ node, props, rootProps }) {
       children: [
         pass.has(i) && !elbow ? vertical(`p`) : null,
         elbow && tee ? vertical(`t`) : null,
-        elbow ? /* @__PURE__ */ jsx11("i", {
+        elbow ? /* @__PURE__ */ jsx12("i", {
           ...line,
           "data-elbow": "",
           style: {
@@ -2672,7 +2716,7 @@ function TreeGuidesNative({ node, props, rootProps }) {
       ]
     }, i));
   }
-  return /* @__PURE__ */ jsx11("span", {
+  return /* @__PURE__ */ jsx12("span", {
     ...rootProps,
     "aria-hidden": "true",
     "data-tee": tee ? `true` : undefined,
@@ -2680,9 +2724,9 @@ function TreeGuidesNative({ node, props, rootProps }) {
   });
 }
 function VoiceWaveNative(p) {
-  return voiceWaveVariant(p.props.variant) === `bars` ? /* @__PURE__ */ jsx11(VoiceWaveBarsNative, {
+  return voiceWaveVariant(p.props.variant) === `bars` ? /* @__PURE__ */ jsx12(VoiceWaveBarsNative, {
     ...p
-  }) : /* @__PURE__ */ jsx11(VoiceWaveRingNative, {
+  }) : /* @__PURE__ */ jsx12(VoiceWaveRingNative, {
     ...p
   });
 }
@@ -2691,12 +2735,12 @@ function VoiceWaveBarsNative({ node, props, rootProps, children }) {
   const part = useParts(node, props);
   const activity = VOICE_WAVE_ACTIVITIES.includes(str(props.activity)) ? str(props.activity) : `idle`;
   const input = { size: str(props.size, `md`), activity, level: num(props.level, 0), bands: arr(props.bands).map((b) => num(b, 0)), reducedMotion: ctx.reducedMotion };
-  const latest = useRef12(input);
+  const latest = useRef13(input);
   latest.current = input;
-  const elapsed = useRef12(0);
-  const rects = useRef12([]);
+  const elapsed = useRef13(0);
+  const rects = useRef13([]);
   const animates = voiceWaveAnimates(activity) && !ctx.reducedMotion;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!animates) {
       elapsed.current = 0;
       return;
@@ -2723,13 +2767,13 @@ function VoiceWaveBarsNative({ node, props, rootProps, children }) {
     "data-variant": "bars",
     style: mergeStyle(rootProps, { width: meter.width, height: meter.height }),
     children: [
-      /* @__PURE__ */ jsx11("svg", {
+      /* @__PURE__ */ jsx12("svg", {
         viewBox: `0 0 ${meter.width} ${meter.height}`,
         width: meter.width,
         height: meter.height,
         "aria-hidden": "true",
         style: { color: colour },
-        children: meter.bars.map((bar, i) => /* @__PURE__ */ jsx11("rect", {
+        children: meter.bars.map((bar, i) => /* @__PURE__ */ jsx12("rect", {
           ref: (el) => {
             rects.current[i] = el;
           },
@@ -2742,7 +2786,7 @@ function VoiceWaveBarsNative({ node, props, rootProps, children }) {
           fill: "currentColor"
         }, i))
       }),
-      node.children.length > 0 ? /* @__PURE__ */ jsx11("span", {
+      node.children.length > 0 ? /* @__PURE__ */ jsx12("span", {
         ...part(`child`),
         "data-hidden": "true",
         "aria-hidden": "true",
@@ -2757,12 +2801,12 @@ function VoiceWaveRingNative({ node, props, rootProps, children }) {
   const size = sizeOf(ctx, `VoiceWave`, `root`, props, 56);
   const activity = VOICE_WAVE_ACTIVITIES.includes(str(props.activity)) ? str(props.activity) : `idle`;
   const input = { size, activity, level: num(props.level, 0), bands: arr(props.bands).map((b) => num(b, 0)), reducedMotion: ctx.reducedMotion };
-  const latest = useRef12(input);
+  const latest = useRef13(input);
   latest.current = input;
-  const elapsed = useRef12(0);
-  const paths = useRef12([]);
+  const elapsed = useRef13(0);
+  const paths = useRef13([]);
   const animates = voiceWaveAnimates(activity) && !ctx.reducedMotion;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!animates) {
       elapsed.current = 0;
       return;
@@ -2772,9 +2816,9 @@ function VoiceWaveRingNative({ node, props, rootProps, children }) {
       voiceWave({ ...latest.current, elapsed: t }).rings.forEach((ring, k) => paths.current[k]?.setAttribute(`d`, voiceWavePath(ring)));
     });
   }, [animates]);
-  const childEl = useRef12(null);
+  const childEl = useRef13(null);
   const hasChild = node.children.length > 0;
-  useLayoutEffect3(() => hasChild && childEl.current ? voiceWaveFitChild(childEl.current, (c) => voiceWaveChildBox(size, c).scale) : undefined, [hasChild, size]);
+  useLayoutEffect4(() => hasChild && childEl.current ? voiceWaveFitChild(childEl.current, (c) => voiceWaveChildBox(size, c).scale) : undefined, [hasChild, size]);
   const wave = voiceWave({ ...input, elapsed: elapsed.current });
   const recipeProps = nativeRecipeProps2(`VoiceWave`, props);
   const colour = (name) => String(resolveRecipe(ctx.theme, { component: `VoiceWave`, part: name, props: recipeProps }, ctx.mode).color ?? `currentColor`);
@@ -2786,12 +2830,12 @@ function VoiceWaveRingNative({ node, props, rootProps, children }) {
     "aria-hidden": name ? undefined : `true`,
     style: mergeStyle(rootProps, { width: size, height: size }),
     children: [
-      /* @__PURE__ */ jsx11("svg", {
+      /* @__PURE__ */ jsx12("svg", {
         viewBox: `0 0 ${size} ${size}`,
         width: size,
         height: size,
         "aria-hidden": "true",
-        children: wave.rings.map((ring, k) => /* @__PURE__ */ jsx11("path", {
+        children: wave.rings.map((ring, k) => /* @__PURE__ */ jsx12("path", {
           ref: (el) => {
             paths.current[k] = el;
           },
@@ -2806,7 +2850,7 @@ function VoiceWaveRingNative({ node, props, rootProps, children }) {
           style: { color: colour(ring.part) }
         }, ring.part))
       }),
-      hasChild ? /* @__PURE__ */ jsx11("span", {
+      hasChild ? /* @__PURE__ */ jsx12("span", {
         ref: childEl,
         ...part(`child`),
         "data-hidden": wave.childSize > 0 ? undefined : `true`,
@@ -2819,25 +2863,25 @@ function VoiceWaveRingNative({ node, props, rootProps, children }) {
 }
 
 // packages/exponential-ui-react/src/natives/inputs.tsx
-import { useEffect as useEffect10, useId as useId4, useMemo as useMemo10, useRef as useRef14, useState as useState12 } from "react";
+import { useEffect as useEffect11, useId as useId4, useMemo as useMemo10, useRef as useRef15, useState as useState12 } from "react";
 import { Checkbox as CheckboxPrimitive, RadioGroup as RadioPrimitive, Slider as SliderPrimitive, Switch as SwitchPrimitive } from "radix-ui";
 import { boundPath as boundPath2, hostPath } from "@exponential_app/eui/web";
 
 // packages/exponential-ui-react/src/inputs.ts
-import { useCallback as useCallback5, useEffect as useEffect9, useReducer, useRef as useRef13 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useReducer, useRef as useRef14 } from "react";
 import { DEBOUNCE_MS, HostOwnedController } from "@exponential_app/eui/web";
 function useHostOwnedValue({ external, send, writeLocal, debounceMs = DEBOUNCE_MS }) {
   const [, rerender] = useReducer((n) => n + 1, 0);
-  const ref = useRef13(null);
+  const ref = useRef14(null);
   if (!ref.current)
     ref.current = new HostOwnedController({ initial: external, send, writeLocal, debounceMs, onChange: rerender });
   const c = ref.current;
   c.configure({ send, writeLocal, debounceMs });
-  useEffect9(() => {
+  useEffect10(() => {
     c.attach();
     return () => c.dispose();
   }, [c]);
-  useEffect9(() => {
+  useEffect10(() => {
     c.push(external);
   }, [c, external]);
   const onFocus = useCallback5(() => c.focus(), [c]);
@@ -2849,7 +2893,7 @@ function useHostOwnedValue({ external, send, writeLocal, debounceMs = DEBOUNCE_M
 
 // packages/exponential-ui-react/src/natives/inputs.tsx
 import { parseLocaleNumber } from "@exponential_app/eui/web";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function useInputSender(node, scope, prop, domId = node.id) {
   const ctx = useSurfaceContext();
   const path = boundPath2(node.props, prop, scope);
@@ -2862,13 +2906,13 @@ function useInputSender(node, scope, prop, domId = node.id) {
   return { send, writeLocal, path, name };
 }
 function InputNative(p) {
-  return /* @__PURE__ */ jsx12(TextFieldNative, {
+  return /* @__PURE__ */ jsx13(TextFieldNative, {
     ...p,
     multiline: false
   });
 }
 function TextareaNative(p) {
-  return /* @__PURE__ */ jsx12(TextFieldNative, {
+  return /* @__PURE__ */ jsx13(TextFieldNative, {
     ...p,
     multiline: true
   });
@@ -2891,7 +2935,7 @@ function TextFieldNative({ node, props, rootProps, emit, scope, domId, multiline
   const { send, writeLocal } = useInputSender(node, scope, `value`, domId);
   const external = str(props.value);
   const field = useHostOwnedValue({ external, send, writeLocal });
-  const focusRef = useRef14(null);
+  const focusRef = useRef15(null);
   const f = useField({ node, domId, props, value: field.value, focusRef });
   const disabled = bool(props.disabled) || Boolean(f.form?.disabled);
   const label = str(props.label);
@@ -2900,7 +2944,7 @@ function TextFieldNative({ node, props, rootProps, emit, scope, domId, multiline
   const rows = Math.max(1, num(props.rows, 3));
   const maxRows = props.maxRows === undefined ? null : Math.max(rows, num(props.maxRows, rows));
   const auto = multiline && bool(props.autosize);
-  useEffect10(() => {
+  useEffect11(() => {
     if (auto && focusRef.current)
       autosize(focusRef.current, rows, maxRows);
   }, [auto, field.value, rows, maxRows]);
@@ -2933,19 +2977,19 @@ function TextFieldNative({ node, props, rootProps, emit, scope, domId, multiline
     "data-pending": field.pending ? `true` : undefined,
     "data-revision": field.revision,
     children: [
-      /* @__PURE__ */ jsx12(TextPart, {
+      /* @__PURE__ */ jsx13(TextPart, {
         part: part(`label`),
         text: label,
         as: "label",
         htmlFor: id
       }),
-      multiline ? /* @__PURE__ */ jsx12("textarea", {
+      multiline ? /* @__PURE__ */ jsx13("textarea", {
         ref: focusRef,
         ...part(`field`, ...fieldStates),
         ...shared,
         rows,
         "data-autosize": auto ? `true` : undefined
-      }) : /* @__PURE__ */ jsx12("input", {
+      }) : /* @__PURE__ */ jsx13("input", {
         ref: focusRef,
         ...part(`field`, ...fieldStates),
         ...shared,
@@ -2959,12 +3003,12 @@ function TextFieldNative({ node, props, rootProps, emit, scope, domId, multiline
           }
         }
       }),
-      /* @__PURE__ */ jsx12(TextPart, {
+      /* @__PURE__ */ jsx13(TextPart, {
         part: part(`description`),
         text: description,
         id: `${id}-d`
       }),
-      /* @__PURE__ */ jsx12(FieldErrors, {
+      /* @__PURE__ */ jsx13(FieldErrors, {
         part,
         field: f
       })
@@ -2987,7 +3031,7 @@ function NumberFieldNative({ node, props, rootProps, emit, scope, domId }) {
   const external = props.value === undefined || props.value === null || props.value === `` ? null : num(props.value);
   const [value, setValue] = useBoundState(node, scope, `value`, external);
   const [text, setText] = useState12(null);
-  const focusRef = useRef14(null);
+  const focusRef = useRef15(null);
   const f = useField({ node, domId, props, value, focusRef });
   const disabled = bool(props.disabled) || Boolean(f.form?.disabled);
   const decimalSep = useMemo10(() => new Intl.NumberFormat(ctx.locale).formatToParts(1.1).find((p) => p.type === `decimal`)?.value ?? `.`, [ctx.locale]);
@@ -3015,7 +3059,7 @@ function NumberFieldNative({ node, props, rootProps, emit, scope, domId }) {
   return /* @__PURE__ */ jsxs9("div", {
     ...rootProps,
     children: [
-      /* @__PURE__ */ jsx12(TextPart, {
+      /* @__PURE__ */ jsx13(TextPart, {
         part: part(`label`),
         text: props.label,
         as: "label",
@@ -3025,18 +3069,18 @@ function NumberFieldNative({ node, props, rootProps, emit, scope, domId }) {
         ...part(`field`, disabled && `disabled`, f.invalid && `invalid`),
         "data-xui-numberfield": "",
         children: [
-          /* @__PURE__ */ jsx12("button", {
+          /* @__PURE__ */ jsx13("button", {
             type: "button",
             ...part(`decrement`, disabled && `disabled`),
             "aria-label": ctx.t(`decrement`),
             tabIndex: -1,
             disabled: disabled || min !== null && value !== null && value <= min,
             onClick: () => stepBy(-step),
-            children: /* @__PURE__ */ jsx12(BuiltinIcon, {
+            children: /* @__PURE__ */ jsx13(BuiltinIcon, {
               slot: "NumberField.decrement"
             })
           }),
-          /* @__PURE__ */ jsx12("input", {
+          /* @__PURE__ */ jsx13("input", {
             ref: focusRef,
             id,
             ...part(`input`),
@@ -3103,24 +3147,24 @@ function NumberFieldNative({ node, props, rootProps, emit, scope, domId }) {
               }
             }
           }),
-          unit ? /* @__PURE__ */ jsx12("span", {
+          unit ? /* @__PURE__ */ jsx13("span", {
             ...part(`unit`),
             children: unit
           }) : null,
-          /* @__PURE__ */ jsx12("button", {
+          /* @__PURE__ */ jsx13("button", {
             type: "button",
             ...part(`increment`, disabled && `disabled`),
             "aria-label": ctx.t(`increment`),
             tabIndex: -1,
             disabled: disabled || max !== null && value !== null && value >= max,
             onClick: () => stepBy(step),
-            children: /* @__PURE__ */ jsx12(BuiltinIcon, {
+            children: /* @__PURE__ */ jsx13(BuiltinIcon, {
               slot: "NumberField.increment"
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsx12(FieldErrors, {
+      /* @__PURE__ */ jsx13(FieldErrors, {
         part,
         field: f
       })
@@ -3131,13 +3175,13 @@ function CheckboxNative({ node, props, rootProps, emit, scope, domId }) {
   const part = useParts(node, props);
   const id = useId4();
   const [checked, setChecked] = useBoundState(node, scope, `checked`, bool(props.checked));
-  const focusRef = useRef14(null);
+  const focusRef = useRef15(null);
   const f = useField({ node, domId, props, value: checked, focusRef });
   const disabled = bool(props.disabled) || Boolean(f.form?.disabled);
   return /* @__PURE__ */ jsxs9("div", {
     ...rootProps,
     children: [
-      /* @__PURE__ */ jsx12(CheckboxPrimitive.Root, {
+      /* @__PURE__ */ jsx13(CheckboxPrimitive.Root, {
         ref: focusRef,
         id,
         ...part(`box`, checked && `checked`, disabled && `disabled`, f.invalid && `invalid`),
@@ -3153,9 +3197,9 @@ function CheckboxNative({ node, props, rootProps, emit, scope, domId }) {
           f.touch();
           emit(`change`, { checked: value }, { checked: value });
         },
-        children: /* @__PURE__ */ jsx12(CheckboxPrimitive.Indicator, {
+        children: /* @__PURE__ */ jsx13(CheckboxPrimitive.Indicator, {
           ...part(`check`),
-          children: /* @__PURE__ */ jsx12(BuiltinIcon, {
+          children: /* @__PURE__ */ jsx13(BuiltinIcon, {
             slot: "Checkbox.check"
           })
         })
@@ -3163,17 +3207,17 @@ function CheckboxNative({ node, props, rootProps, emit, scope, domId }) {
       /* @__PURE__ */ jsxs9("div", {
         className: "xui-field-text",
         children: [
-          /* @__PURE__ */ jsx12(TextPart, {
+          /* @__PURE__ */ jsx13(TextPart, {
             part: part(`label`),
             text: props.label,
             as: "label",
             htmlFor: id
           }),
-          /* @__PURE__ */ jsx12(TextPart, {
+          /* @__PURE__ */ jsx13(TextPart, {
             part: part(`description`),
             text: props.description
           }),
-          /* @__PURE__ */ jsx12(FieldErrors, {
+          /* @__PURE__ */ jsx13(FieldErrors, {
             part,
             field: f
           })
@@ -3187,7 +3231,7 @@ function SwitchNative({ node, props, rootProps, emit, scope, domId }) {
   const id = useId4();
   const ctx = useSurfaceContext();
   const [checked, setChecked] = useBoundState(node, scope, `checked`, bool(props.checked));
-  const focusRef = useRef14(null);
+  const focusRef = useRef15(null);
   const f = useField({ node, domId, props, value: checked, focusRef });
   const disabled = bool(props.disabled) || Boolean(f.form?.disabled);
   const travel = useMemo10(() => {
@@ -3209,24 +3253,24 @@ function SwitchNative({ node, props, rootProps, emit, scope, domId }) {
       /* @__PURE__ */ jsxs9("div", {
         ...part(`body`),
         children: [
-          /* @__PURE__ */ jsx12(TextPart, {
+          /* @__PURE__ */ jsx13(TextPart, {
             part: part(`label`),
             text: props.label,
             as: "label",
             htmlFor: id
           }),
-          /* @__PURE__ */ jsx12(TextPart, {
+          /* @__PURE__ */ jsx13(TextPart, {
             part: part(`description`),
             text: description,
             id: `${id}-d`
           }),
-          /* @__PURE__ */ jsx12(FieldErrors, {
+          /* @__PURE__ */ jsx13(FieldErrors, {
             part,
             field: f
           })
         ]
       }),
-      /* @__PURE__ */ jsx12(SwitchPrimitive.Root, {
+      /* @__PURE__ */ jsx13(SwitchPrimitive.Root, {
         ref: focusRef,
         id,
         ...part(`track`, checked && `checked`, disabled && `disabled`),
@@ -3240,7 +3284,7 @@ function SwitchNative({ node, props, rootProps, emit, scope, domId }) {
           f.change(next);
           emit(`change`, { checked: next }, { checked: next });
         },
-        children: /* @__PURE__ */ jsx12(SwitchPrimitive.Thumb, {
+        children: /* @__PURE__ */ jsx13(SwitchPrimitive.Thumb, {
           ...part(`thumb`, checked && `checked`)
         })
       })
@@ -3253,7 +3297,7 @@ function RadioNative({ node, props, rootProps, emit, scope, domId }) {
   const id = useId4();
   const options = objects(props.options);
   const [value, setValue] = useBoundState(node, scope, `value`, str(props.value));
-  const focusRef = useRef14(null);
+  const focusRef = useRef15(null);
   const itemRef = useMemo10(() => ({
     get current() {
       return focusRef.current?.querySelector(`[data-state="checked"]`) ?? focusRef.current?.querySelector(`button`);
@@ -3266,12 +3310,12 @@ function RadioNative({ node, props, rootProps, emit, scope, domId }) {
     "aria-labelledby": props.label ? `${id}-l` : undefined,
     "aria-describedby": f.describedBy,
     children: [
-      /* @__PURE__ */ jsx12(TextPart, {
+      /* @__PURE__ */ jsx13(TextPart, {
         part: part(`label`),
         text: props.label,
         id: `${id}-l`
       }),
-      /* @__PURE__ */ jsx12(RadioPrimitive.Root, {
+      /* @__PURE__ */ jsx13(RadioPrimitive.Root, {
         ref: focusRef,
         ...part(`items`),
         className: `${part(`items`).className} xui-radio-items`,
@@ -3294,24 +3338,24 @@ function RadioNative({ node, props, rootProps, emit, scope, domId }) {
             htmlFor: oid,
             "data-xui-id": `${part.domId}.item.${i}`,
             children: [
-              /* @__PURE__ */ jsx12(RadioPrimitive.Item, {
+              /* @__PURE__ */ jsx13(RadioPrimitive.Item, {
                 id: oid,
                 value: o.value,
                 disabled: bool(o.disabled),
                 ...part(`item`, checked && `checked`, bool(o.disabled) && `disabled`, f.invalid && `invalid`),
                 "data-xui-id": `${part.domId}.dot.${i}`,
-                children: /* @__PURE__ */ jsx12(RadioPrimitive.Indicator, {
+                children: /* @__PURE__ */ jsx13(RadioPrimitive.Indicator, {
                   ...part(`dot`, checked && `checked`)
                 })
               }),
-              o.icon ? /* @__PURE__ */ jsx12(IconGlyph, {
+              o.icon ? /* @__PURE__ */ jsx13(IconGlyph, {
                 icons: ctx.host.icons,
                 name: o.icon,
                 className: "xui-icon",
                 width: 16,
                 height: 16
               }) : null,
-              /* @__PURE__ */ jsx12("span", {
+              /* @__PURE__ */ jsx13("span", {
                 ...part.at(`label`, i),
                 children: str(o.label)
               })
@@ -3319,7 +3363,7 @@ function RadioNative({ node, props, rootProps, emit, scope, domId }) {
           }, o.value);
         })
       }),
-      /* @__PURE__ */ jsx12(FieldErrors, {
+      /* @__PURE__ */ jsx13(FieldErrors, {
         part,
         field: f
       })
@@ -3341,13 +3385,13 @@ function SliderNative({ node, props, rootProps, emit, scope }) {
         ...part(`header`),
         className: `${part(`header`).className} xui-slider-head`,
         children: [
-          /* @__PURE__ */ jsx12(TextPart, {
+          /* @__PURE__ */ jsx13(TextPart, {
             part: part(`label`),
             text: props.label,
             as: "label",
             htmlFor: id
           }),
-          /* @__PURE__ */ jsx12("span", {
+          /* @__PURE__ */ jsx13("span", {
             ...part(`value`),
             children: ctx.formatter.number(value)
           })
@@ -3364,13 +3408,13 @@ function SliderNative({ node, props, rootProps, emit, scope }) {
         onValueChange: ([next]) => setValue(next),
         onValueCommit: ([next]) => void emit(`change`, { value: next }, { value: next }),
         children: [
-          /* @__PURE__ */ jsx12(SliderPrimitive.Track, {
+          /* @__PURE__ */ jsx13(SliderPrimitive.Track, {
             ...part(`track`),
-            children: /* @__PURE__ */ jsx12(SliderPrimitive.Range, {
+            children: /* @__PURE__ */ jsx13(SliderPrimitive.Range, {
               ...part(`range`)
             })
           }),
-          /* @__PURE__ */ jsx12(SliderPrimitive.Thumb, {
+          /* @__PURE__ */ jsx13(SliderPrimitive.Thumb, {
             id,
             ...part(`thumb`),
             "aria-label": str(props.label) || undefined
@@ -3387,7 +3431,7 @@ function ComposerNative({ node, props, rootProps, emit, scope, domId }) {
   const external = str(props.value);
   const field = useHostOwnedValue({ external, send, writeLocal });
   const busy = bool(props.busy);
-  const ref = useRef14(null);
+  const ref = useRef15(null);
   const grow = () => {
     const el = ref.current;
     if (!el)
@@ -3395,7 +3439,7 @@ function ComposerNative({ node, props, rootProps, emit, scope, domId }) {
     el.style.height = `auto`;
     el.style.height = `${Math.min(200, el.scrollHeight)}px`;
   };
-  useEffect10(grow, [field.value]);
+  useEffect11(grow, [field.value]);
   const submit = () => {
     if (busy) {
       emit(`stop`);
@@ -3414,7 +3458,7 @@ function ComposerNative({ node, props, rootProps, emit, scope, domId }) {
     ...rootProps,
     "data-busy": busy ? `true` : undefined,
     children: [
-      /* @__PURE__ */ jsx12("textarea", {
+      /* @__PURE__ */ jsx13("textarea", {
         ref,
         ...part(`field`, field.focused && `focus`),
         rows: 1,
@@ -3437,24 +3481,24 @@ function ComposerNative({ node, props, rootProps, emit, scope, domId }) {
       /* @__PURE__ */ jsxs9("div", {
         className: "xui-composer-bar",
         children: [
-          bool(props.attachments) ? /* @__PURE__ */ jsx12("button", {
+          bool(props.attachments) ? /* @__PURE__ */ jsx13("button", {
             type: "button",
             ...part(`attachment`),
             "aria-label": ctx.t(`browse`),
             onClick: () => void emit(`attach`),
-            children: /* @__PURE__ */ jsx12(BuiltinIcon, {
+            children: /* @__PURE__ */ jsx13(BuiltinIcon, {
               slot: "Composer.attachment"
             })
           }) : null,
-          /* @__PURE__ */ jsx12("button", {
+          /* @__PURE__ */ jsx13("button", {
             type: "button",
             ...part(`send`, busy && `pressed`),
             "aria-label": busy ? ctx.t(`stop`) : submitLabel,
             disabled: !busy && field.value.trim() === ``,
             onClick: submit,
-            children: busy ? /* @__PURE__ */ jsx12(BuiltinIcon, {
+            children: busy ? /* @__PURE__ */ jsx13(BuiltinIcon, {
               slot: "Composer.stop"
-            }) : /* @__PURE__ */ jsx12(BuiltinIcon, {
+            }) : /* @__PURE__ */ jsx13(BuiltinIcon, {
               slot: "Composer.send"
             })
           })
@@ -3465,30 +3509,30 @@ function ComposerNative({ node, props, rootProps, emit, scope, domId }) {
 }
 
 // packages/exponential-ui-react/src/natives/layout.tsx
-import { memo, useCallback as useCallback7, useContext as useContext4, useEffect as useEffect12, useMemo as useMemo12, useRef as useRef16 } from "react";
+import { memo, useCallback as useCallback7, useContext as useContext4, useEffect as useEffect13, useMemo as useMemo12, useRef as useRef17 } from "react";
 import { listSections, sectionRows, WINDOW_THRESHOLD as CATALOG_WINDOW_THRESHOLD } from "@exponential_app/eui";
 import { getPointer, LITERAL_ROWS_ROOT } from "@exponential_app/eui/web";
 
 // packages/exponential-ui-react/src/list.tsx
-import { forwardRef, useCallback as useCallback6, useEffect as useEffect11, useImperativeHandle, useLayoutEffect as useLayoutEffect4, useMemo as useMemo11, useRef as useRef15, useState as useState13 } from "react";
+import { forwardRef, useCallback as useCallback6, useEffect as useEffect12, useImperativeHandle, useLayoutEffect as useLayoutEffect5, useMemo as useMemo11, useRef as useRef16, useState as useState13 } from "react";
 import { itemExtents, itemOffsets, scrollOffsetForIndex, stickyHeader, virtualWindow, WINDOW_OVERSCAN } from "@exponential_app/eui";
 import { listViewport as viewportOf, scrollParent } from "@exponential_app/eui/web";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-var useIsoLayoutEffect2 = typeof window === `undefined` ? useEffect11 : useLayoutEffect4;
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var useIsoLayoutEffect2 = typeof window === `undefined` ? useEffect12 : useLayoutEffect5;
 var WindowedList = forwardRef(function WindowedList({ count, itemKey, renderItem, estimatedItemHeight = 40, overscan = WINDOW_OVERSCAN, className, axis = `vertical`, direction = `ltr`, gap = 0, divider, stickyRows, itemProps }, handle) {
-  const ref = useRef15(null);
-  const extentsByKey = useRef15(new Map);
-  const crossByKey = useRef15(new Map);
-  const observed = useRef15(new Map);
-  const keyOfEl = useRef15(new WeakMap);
-  const observer = useRef15(null);
+  const ref = useRef16(null);
+  const extentsByKey = useRef16(new Map);
+  const crossByKey = useRef16(new Map);
+  const observed = useRef16(new Map);
+  const keyOfEl = useRef16(new WeakMap);
+  const observer = useRef16(null);
   const [version, bump] = useState13(0);
   const [view, setView] = useState13(null);
   const horizontal = axis === `horizontal`;
   const rtl = horizontal && direction === `rtl`;
   const estimate = useCallback6((i) => typeof estimatedItemHeight === `function` ? estimatedItemHeight(i) : estimatedItemHeight, [estimatedItemHeight]);
-  const measured = useRef15(0);
-  const extentsCache = useRef15(null);
+  const measured = useRef16(0);
+  const extentsCache = useRef16(null);
   const extents = () => {
     const c = extentsCache.current;
     if (c && c.count === count && c.itemKey === itemKey && c.estimate === estimatedItemHeight && c.measured === measured.current)
@@ -3504,7 +3548,7 @@ var WindowedList = forwardRef(function WindowedList({ count, itemKey, renderItem
     extentsCache.current = { count, itemKey, estimate: estimatedItemHeight, measured: measured.current, ext };
     return ext;
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (typeof ResizeObserver === `undefined`)
       return;
     const ro = new ResizeObserver((entries) => {
@@ -3593,7 +3637,7 @@ var WindowedList = forwardRef(function WindowedList({ count, itemKey, renderItem
   const win = virtualWindow(ext, gap, scroll, viewport, overscan);
   const headers = useMemo11(() => [...stickyRows ?? []].filter((r) => r >= 0 && r < count).sort((a, b) => a - b), [stickyRows, count]);
   const pinned = headers.length && scroll >= 0 ? stickyHeader(off, ext, headers, scroll) : null;
-  const pending = useRef15(null);
+  const pending = useRef16(null);
   const jump = (index, align) => {
     const el = ref.current;
     if (!el || index < 0 || index >= count)
@@ -3616,7 +3660,7 @@ var WindowedList = forwardRef(function WindowedList({ count, itemKey, renderItem
       window.scrollBy(by);
     return true;
   };
-  useEffect11(() => {
+  useEffect12(() => {
     const p = pending.current;
     if (!p)
       return;
@@ -3625,7 +3669,7 @@ var WindowedList = forwardRef(function WindowedList({ count, itemKey, renderItem
     else
       jump(p.index, p.align);
   });
-  useEffect11(() => {
+  useEffect12(() => {
     const target = scroller ?? window;
     const cancel = () => {
       pending.current = null;
@@ -3666,7 +3710,7 @@ var WindowedList = forwardRef(function WindowedList({ count, itemKey, renderItem
       ...itemProps?.(i) ?? {},
       style: { ...place(at), ...isPinned ? { zIndex: 1 } : {} },
       children: [
-        line ? /* @__PURE__ */ jsx13("div", {
+        line ? /* @__PURE__ */ jsx14("div", {
           className: "xui-list-gap",
           "aria-hidden": "true",
           "data-axis": axis,
@@ -3678,7 +3722,7 @@ var WindowedList = forwardRef(function WindowedList({ count, itemKey, renderItem
     }, key);
   });
   const spacer = horizontal ? { width: total, height: cross || undefined } : { height: total };
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx14("div", {
     ref,
     className: className ? `xui-list-window ${className}` : `xui-list-window`,
     "data-axis": axis,
@@ -3690,11 +3734,11 @@ var WindowedList = forwardRef(function WindowedList({ count, itemKey, renderItem
 });
 
 // packages/exponential-ui-react/src/natives/layout.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function BoxNative({ node, props, rootProps, emit, children }) {
   const pressable = bool(props.pressable) || Boolean(node.on?.press);
   if (!pressable)
-    return /* @__PURE__ */ jsx14("div", {
+    return /* @__PURE__ */ jsx15("div", {
       ...rootProps,
       children
     });
@@ -3706,7 +3750,7 @@ function BoxNative({ node, props, rootProps, emit, children }) {
       emit(`press`);
     }
   };
-  return /* @__PURE__ */ jsx14("div", {
+  return /* @__PURE__ */ jsx15("div", {
     ...rootProps,
     "data-pressable": "true",
     role: "button",
@@ -3763,10 +3807,10 @@ function ListNative({ node, props, rootProps, scope, domId }) {
     const prev = rows[r - 1];
     return `item` in row && `item` in prev ? row.item : null;
   };
-  const windowRef = useRef16(null);
-  const rootRef = useRef16(null);
+  const windowRef = useRef17(null);
+  const rootRef = useRef17(null);
   const rowOfIndex = useCallback7((index) => rows.findIndex((r) => (`item` in r) && r.item === (tpl ? childCount + index : index)), [rows, tpl, childCount]);
-  useEffect12(() => ctx.registerScroller(domId, (index, align) => {
+  useEffect13(() => ctx.registerScroller(domId, (index, align) => {
     const r = rowOfIndex(index);
     if (r < 0)
       return;
@@ -3778,7 +3822,7 @@ function ListNative({ node, props, rootProps, scope, domId }) {
       el?.scrollIntoView(horizontal ? { inline: block, block: `nearest` } : { block, inline: `nearest` });
     }
   }), [ctx, domId, rowOfIndex, windowed, horizontal]);
-  const renderRow = (r) => /* @__PURE__ */ jsx14(ListRowView, {
+  const renderRow = (r) => /* @__PURE__ */ jsx15(ListRowView, {
     row: rows[r],
     node,
     tpl,
@@ -3794,19 +3838,19 @@ function ListNative({ node, props, rootProps, scope, domId }) {
   };
   const divider = (r) => {
     const before = dividerBefore(r);
-    return before === null ? null : /* @__PURE__ */ jsx14("div", {
+    return before === null ? null : /* @__PURE__ */ jsx15("div", {
       ...part.at(`divider`, before),
       role: "separator"
     });
   };
   if (windowed) {
     const headerRows = sticky ? rows.flatMap((row, r) => (`header` in row) ? [r] : []) : undefined;
-    return /* @__PURE__ */ jsx14("div", {
+    return /* @__PURE__ */ jsx15("div", {
       ref: rootRef,
       ...rootProps,
       style,
       role: listRole,
-      children: /* @__PURE__ */ jsx14(WindowedList, {
+      children: /* @__PURE__ */ jsx15(WindowedList, {
         ref: windowRef,
         count: rows.length,
         itemKey: keyOf,
@@ -3831,7 +3875,7 @@ function ListNative({ node, props, rootProps, scope, domId }) {
       "data-xui-row": r,
       ...itemAttrs(r),
       children: [
-        line ? /* @__PURE__ */ jsx14("div", {
+        line ? /* @__PURE__ */ jsx15("div", {
           className: "xui-list-gap",
           "aria-hidden": "true",
           "data-axis": axis,
@@ -3842,7 +3886,7 @@ function ListNative({ node, props, rootProps, scope, domId }) {
       ]
     }, keyOf(r)));
   }
-  return /* @__PURE__ */ jsx14("div", {
+  return /* @__PURE__ */ jsx15("div", {
     ref: rootRef,
     ...rootProps,
     style,
@@ -3855,11 +3899,11 @@ var ListRowView = memo(function ListRowView({ row, node, tpl, sections, childCou
     const section = sections?.[row.header];
     if (!section)
       return null;
-    return /* @__PURE__ */ jsx14("div", {
+    return /* @__PURE__ */ jsx15("div", {
       ...part.at(`section`, row.header),
       role: "heading",
       "aria-level": 3,
-      children: node.slots?.section ? /* @__PURE__ */ jsx14(LiteralScope, {
+      children: node.slots?.section ? /* @__PURE__ */ jsx15(LiteralScope, {
         value: { value: section.value, count: section.count, index: row.header },
         pointer: `${LITERAL_ROWS_ROOT}/${node.id.replace(/[~/]/g, `_`)}/sections/${row.header}`,
         suffix: `.${row.header}`,
@@ -3868,13 +3912,13 @@ var ListRowView = memo(function ListRowView({ row, node, tpl, sections, childCou
     });
   }
   if (row.item < childCount)
-    return /* @__PURE__ */ jsx14(NodeView, {
+    return /* @__PURE__ */ jsx15(NodeView, {
       node: node.children[row.item]
     });
   const item = tpl?.items[row.item - childCount];
   if (!tpl || !item)
     return null;
-  return /* @__PURE__ */ jsx14(TemplateItemView, {
+  return /* @__PURE__ */ jsx15(TemplateItemView, {
     tpl: tpl.tpl,
     item
   });
@@ -3890,13 +3934,13 @@ function LiteralScope({ value, pointer, suffix, node }) {
     };
     return deriveContext(ctx, { setData }, data);
   }, [ctx, pointer, value]);
-  return /* @__PURE__ */ jsx14(SurfaceContext.Provider, {
+  return /* @__PURE__ */ jsx15(SurfaceContext.Provider, {
     value: view,
-    children: /* @__PURE__ */ jsx14(ScopeContext.Provider, {
+    children: /* @__PURE__ */ jsx15(ScopeContext.Provider, {
       value: pointer,
-      children: /* @__PURE__ */ jsx14(InstanceContext.Provider, {
+      children: /* @__PURE__ */ jsx15(InstanceContext.Provider, {
         value: `${outer}${suffix}`,
-        children: /* @__PURE__ */ jsx14(NodeView, {
+        children: /* @__PURE__ */ jsx15(NodeView, {
           node
         })
       })
@@ -3911,7 +3955,7 @@ function UnknownNative({ node, props, rootProps }) {
     role: "note",
     "data-xui-unknown": str(props.component, node.component),
     children: [
-      /* @__PURE__ */ jsx14(BuiltinIcon, {
+      /* @__PURE__ */ jsx15(BuiltinIcon, {
         slot: "Unknown.root",
         size: 16
       }),
@@ -3928,12 +3972,13 @@ function UnknownNative({ node, props, rootProps }) {
 }
 
 // packages/exponential-ui-react/src/natives/media.tsx
-import { useEffect as useEffect13, useRef as useRef17, useState as useState14 } from "react";
+import { useEffect as useEffect14, useRef as useRef18, useState as useState14 } from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
 import { MEDIA_ASPECT_RATIO, MEDIA_INTRINSIC_WIDTH } from "@exponential_app/eui";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { mediaClock } from "@exponential_app/eui/web";
+import { jsx as jsx16, jsxs as jsxs12, Fragment as Fragment2 } from "react/jsx-runtime";
 function MediaSizer() {
-  return /* @__PURE__ */ jsx15("svg", {
+  return /* @__PURE__ */ jsx16("svg", {
     className: "xui-media-sizer",
     "aria-hidden": "true",
     width: MEDIA_INTRINSIC_WIDTH,
@@ -3948,7 +3993,7 @@ function ImageNative({ node, props, rootProps }) {
   const alt = str(props.alt);
   const fit = str(props.fit, `cover`);
   const [state, setState] = useState14(`loading`);
-  useEffect13(() => setState(`loading`), [src]);
+  useEffect14(() => setState(`loading`), [src]);
   const style = {};
   if (props.width !== undefined)
     style.width = num(props.width);
@@ -3973,7 +4018,7 @@ function ImageNative({ node, props, rootProps }) {
     "aria-label": failed ? alt : undefined,
     "data-state": src ? shown : `empty`,
     children: [
-      src && url && shown !== `error` ? /* @__PURE__ */ jsx15("img", {
+      src && url && shown !== `error` ? /* @__PURE__ */ jsx16("img", {
         src: url,
         alt,
         loading: props.loading === `eager` ? `eager` : `lazy`,
@@ -3982,14 +4027,14 @@ function ImageNative({ node, props, rootProps }) {
         onLoad: () => setState(`loaded`),
         onError: () => setState(`error`)
       }) : null,
-      /* @__PURE__ */ jsx15(MediaSizer, {}),
-      failed ? /* @__PURE__ */ jsx15("div", {
+      /* @__PURE__ */ jsx16(MediaSizer, {}),
+      failed ? /* @__PURE__ */ jsx16("div", {
         ...part(`fallback`),
         "aria-hidden": "true",
-        children: fallback ? /* @__PURE__ */ jsx15(IconGlyph, {
+        children: fallback ? /* @__PURE__ */ jsx16(IconGlyph, {
           icons: ctx.host.icons,
           name: fallback
-        }) : /* @__PURE__ */ jsx15(BuiltinIcon, {
+        }) : /* @__PURE__ */ jsx16(BuiltinIcon, {
           slot: "Image.fallback"
         })
       }) : null
@@ -4001,24 +4046,54 @@ function VideoNative({ node, props, rootProps }) {
   const part = useParts(node, props);
   const src = str(props.src);
   const poster = str(props.poster);
+  const autoplay = bool(props.autoplay);
+  const [started, setStarted] = useState14(false);
   const url = useMediaSrc(ctx.host, src, `stream`);
   const posterUrl = useMediaSrc(ctx.host, poster);
   const ratio = num(props.aspectRatio, MEDIA_ASPECT_RATIO) || MEDIA_ASPECT_RATIO;
+  const durationMs = props.durationMs !== undefined ? num(props.durationMs) : undefined;
+  const Play = CHROME.play;
   return /* @__PURE__ */ jsxs12("div", {
     ...rootProps,
     style: mergeStyle(rootProps, { aspectRatio: String(ratio) }),
     children: [
-      /* @__PURE__ */ jsx15(MediaSizer, {}),
-      /* @__PURE__ */ jsx15("video", {
+      /* @__PURE__ */ jsx16(MediaSizer, {}),
+      started || autoplay ? /* @__PURE__ */ jsx16("video", {
         ...part(`controls`),
         src: url,
         poster: posterUrl,
         controls: true,
-        autoPlay: bool(props.autoplay),
-        muted: bool(props.autoplay),
+        autoPlay: true,
+        muted: autoplay && !started,
         playsInline: true,
         preload: "metadata",
-        "data-duration-ms": props.durationMs !== undefined ? num(props.durationMs) : undefined
+        "data-duration-ms": durationMs
+      }) : /* @__PURE__ */ jsxs12(Fragment2, {
+        children: [
+          posterUrl ? /* @__PURE__ */ jsx16("img", {
+            className: "xui-video-poster",
+            src: posterUrl,
+            alt: "",
+            "aria-hidden": "true",
+            decoding: "async",
+            draggable: false
+          }) : null,
+          /* @__PURE__ */ jsx16("button", {
+            type: "button",
+            className: "xui-media-play",
+            "data-size": "lg",
+            "aria-label": ctx.t(`play`),
+            disabled: !url,
+            onClick: () => setStarted(true),
+            children: /* @__PURE__ */ jsx16(Play, {
+              "aria-hidden": "true"
+            })
+          }),
+          durationMs !== undefined ? /* @__PURE__ */ jsx16("span", {
+            className: "xui-video-duration",
+            children: mediaClock(durationMs)
+          }) : null
+        ]
       })
     ]
   });
@@ -4029,21 +4104,67 @@ function AudioPlayerNative({ node, props, rootProps }) {
   const src = str(props.src);
   const title = str(props.title);
   const url = useMediaSrc(ctx.host, src, `stream`);
+  const audio = useRef18(null);
+  const [playing, setPlaying] = useState14(false);
+  const [position, setPosition] = useState14(0);
+  const [loadedMs, setLoadedMs] = useState14(null);
+  const durationMs = props.durationMs !== undefined ? num(props.durationMs) : loadedMs ?? 0;
+  const Glyph = playing ? CHROME.pause : CHROME.play;
+  const toggle = () => {
+    const el = audio.current;
+    if (!el)
+      return;
+    if (el.paused)
+      el.play()?.catch(() => setPlaying(false));
+    else
+      el.pause();
+  };
   return /* @__PURE__ */ jsxs12("div", {
     ...rootProps,
     style: mergeStyle(rootProps, { flexDirection: `column`, gap: `var(--xui-spacing-xs)` }),
     children: [
-      title ? /* @__PURE__ */ jsx15("span", {
+      title ? /* @__PURE__ */ jsx16("span", {
         ...part(`track`),
         children: title
       }) : null,
-      /* @__PURE__ */ jsx15("audio", {
+      /* @__PURE__ */ jsxs12("div", {
         ...part(`controls`),
+        "data-duration-ms": props.durationMs !== undefined ? num(props.durationMs) : undefined,
+        children: [
+          /* @__PURE__ */ jsx16("button", {
+            type: "button",
+            className: "xui-media-play",
+            "data-size": "sm",
+            "aria-label": ctx.t(playing ? `pause` : `play`),
+            disabled: !url,
+            onClick: toggle,
+            children: /* @__PURE__ */ jsx16(Glyph, {
+              "aria-hidden": "true"
+            })
+          }),
+          /* @__PURE__ */ jsx16("span", {
+            className: "xui-audio-progress",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx16("span", {
+              style: { width: `${durationMs > 0 ? Math.min(100, position / durationMs * 100) : 0}%` }
+            })
+          }),
+          /* @__PURE__ */ jsx16("span", {
+            className: "xui-audio-clock",
+            children: `${mediaClock(position)} / ${mediaClock(durationMs)}`
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx16("audio", {
+        ref: audio,
         src: url,
-        controls: true,
         preload: "metadata",
         "aria-label": title || undefined,
-        "data-duration-ms": props.durationMs !== undefined ? num(props.durationMs) : undefined
+        onPlay: () => setPlaying(true),
+        onPause: () => setPlaying(false),
+        onEnded: () => setPlaying(false),
+        onTimeUpdate: (e) => setPosition(e.currentTarget.currentTime * 1000),
+        onLoadedMetadata: (e) => setLoadedMs(Number.isFinite(e.currentTarget.duration) ? e.currentTarget.duration * 1000 : null)
       })
     ]
   });
@@ -4071,12 +4192,12 @@ function AvatarNative({ node, props, rootProps }) {
     "aria-label": name || undefined,
     role: "img",
     children: [
-      src ? /* @__PURE__ */ jsx15(AvatarPrimitive.Image, {
+      src ? /* @__PURE__ */ jsx16(AvatarPrimitive.Image, {
         ...part(`image`),
         src: url,
         alt: name
       }) : null,
-      /* @__PURE__ */ jsx15(AvatarPrimitive.Fallback, {
+      /* @__PURE__ */ jsx16(AvatarPrimitive.Fallback, {
         ...part(`fallback`),
         delayMs: src ? 300 : undefined,
         style: tint,
@@ -4088,28 +4209,39 @@ function AvatarNative({ node, props, rootProps }) {
 function CarouselThumbnail({ attrs, src, current, label, onPress }) {
   const ctx = useSurfaceContext();
   const url = useMediaSrc(ctx.host, src);
-  return /* @__PURE__ */ jsx15("button", {
+  const [broken, setBroken] = useState14(null);
+  return /* @__PURE__ */ jsxs12("button", {
     type: "button",
     ...attrs,
     "aria-label": label,
     "aria-current": current ? `true` : undefined,
     "data-current": current ? `true` : undefined,
     onClick: onPress,
-    children: src && url ? /* @__PURE__ */ jsx15("img", {
-      className: "xui-carousel-thumb",
-      src: url,
-      alt: "",
-      "aria-hidden": "true",
-      loading: "lazy",
-      decoding: "async",
-      draggable: false
-    }) : null
+    children: [
+      /* @__PURE__ */ jsx16("span", {
+        className: "xui-carousel-thumb-fallback",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx16(BuiltinIcon, {
+          slot: "Image.fallback"
+        })
+      }),
+      src && url && broken !== url ? /* @__PURE__ */ jsx16("img", {
+        className: "xui-carousel-thumb",
+        src: url,
+        alt: "",
+        "aria-hidden": "true",
+        loading: "lazy",
+        decoding: "async",
+        draggable: false,
+        onError: () => setBroken(url)
+      }) : null
+    ]
   });
 }
 function CarouselNative({ node, props, rootProps, emit, scope }) {
   const ctx = useSurfaceContext();
   const part = useParts(node, props);
-  const track = useRef17(null);
+  const track = useRef18(null);
   const pages = node.children;
   const [page, setPage] = useBoundState(node, scope, `page`, num(props.page, 0));
   const scrollTo = (i) => {
@@ -4118,7 +4250,7 @@ function CarouselNative({ node, props, rootProps, emit, scope }) {
       el.scrollTo({ left: el.children[i].offsetLeft, behavior: ctx.reducedMotion ? `auto` : `smooth` });
   };
   const external = num(props.page, 0);
-  useEffect13(() => scrollTo(external), [external]);
+  useEffect14(() => scrollTo(external), [external]);
   const onScroll = () => {
     const el = track.current;
     if (!el || el.clientWidth === 0)
@@ -4141,8 +4273,8 @@ function CarouselNative({ node, props, rootProps, emit, scope }) {
   const many = pages.length > 1;
   const counter = many && bool(props.counter);
   const thumbnails = many && Array.isArray(props.thumbnails) ? props.thumbnails : null;
-  const strip = useRef17(null);
-  useEffect13(() => {
+  const strip = useRef18(null);
+  useEffect14(() => {
     const el = strip.current;
     const thumb = el?.children[page];
     if (!el || !thumb)
@@ -4153,7 +4285,7 @@ function CarouselNative({ node, props, rootProps, emit, scope }) {
     if (delta !== 0)
       el.scrollLeft += delta;
   }, [page, thumbnails !== null]);
-  const trackView = /* @__PURE__ */ jsx15("div", {
+  const trackView = /* @__PURE__ */ jsx16("div", {
     ref: track,
     className: "xui-carousel-track",
     onScroll,
@@ -4163,7 +4295,7 @@ function CarouselNative({ node, props, rootProps, emit, scope }) {
       const attrs = part(`page`, active && `selected`);
       if (!active)
         delete attrs[`data-xui-id`];
-      return /* @__PURE__ */ jsx15("div", {
+      return /* @__PURE__ */ jsx16("div", {
         ...attrs,
         role: "group",
         "aria-roledescription": ctx.t(`slide`),
@@ -4171,7 +4303,7 @@ function CarouselNative({ node, props, rootProps, emit, scope }) {
         "aria-hidden": active ? undefined : true,
         "data-xui-inactive": active ? undefined : ``,
         ...active ? {} : INERT,
-        children: /* @__PURE__ */ jsx15(NodeView, {
+        children: /* @__PURE__ */ jsx16(NodeView, {
           node: child
         })
       }, child.id);
@@ -4193,17 +4325,17 @@ function CarouselNative({ node, props, rootProps, emit, scope }) {
         className: "xui-carousel-stage",
         children: [
           trackView,
-          /* @__PURE__ */ jsx15("span", {
+          /* @__PURE__ */ jsx16("span", {
             ...part(`counter`),
             "aria-hidden": "true",
             children: ctx.t(`pageCounter`, { page: page + 1, total: pages.length })
           })
         ]
       }) : trackView,
-      thumbnails ? /* @__PURE__ */ jsx15("div", {
+      thumbnails ? /* @__PURE__ */ jsx16("div", {
         ref: strip,
         ...part(`thumbnails`),
-        children: pages.map((child, i) => /* @__PURE__ */ jsx15(CarouselThumbnail, {
+        children: pages.map((child, i) => /* @__PURE__ */ jsx16(CarouselThumbnail, {
           attrs: part.at(`thumbnail`, i, i === page && `selected`),
           src: typeof thumbnails[i] === `string` ? thumbnails[i] : ``,
           current: i === page,
@@ -4214,22 +4346,22 @@ function CarouselNative({ node, props, rootProps, emit, scope }) {
       many ? /* @__PURE__ */ jsxs12("div", {
         ...withClass(part(`controls`), `xui-carousel-controls`),
         children: [
-          /* @__PURE__ */ jsx15("button", {
+          /* @__PURE__ */ jsx16("button", {
             type: "button",
             ...withClass(part(`previous`), `xui-carousel-nav`),
             "aria-label": ctx.t(`previous`),
             disabled: !bool(props.loop) && page === 0,
             onClick: () => go(page - 1),
-            children: /* @__PURE__ */ jsx15(BuiltinIcon, {
+            children: /* @__PURE__ */ jsx16(BuiltinIcon, {
               slot: "Carousel.previous"
             })
           }),
-          props.indicators !== false ? /* @__PURE__ */ jsx15("div", {
+          props.indicators !== false ? /* @__PURE__ */ jsx16("div", {
             ...part(`indicator`),
             className: "xui-carousel-dots",
             "data-xui-part": "Carousel/indicators",
             role: "tablist",
-            children: pages.map((child, i) => /* @__PURE__ */ jsx15("button", {
+            children: pages.map((child, i) => /* @__PURE__ */ jsx16("button", {
               type: "button",
               ...part(`indicator`, i === page && `selected`),
               "data-xui-id": undefined,
@@ -4239,13 +4371,13 @@ function CarouselNative({ node, props, rootProps, emit, scope }) {
               onClick: () => go(i)
             }, child.id))
           }) : null,
-          /* @__PURE__ */ jsx15("button", {
+          /* @__PURE__ */ jsx16("button", {
             type: "button",
             ...withClass(part(`next`), `xui-carousel-nav`),
             "aria-label": ctx.t(`next`),
             disabled: !bool(props.loop) && page === pages.length - 1,
             onClick: () => go(page + 1),
-            children: /* @__PURE__ */ jsx15(BuiltinIcon, {
+            children: /* @__PURE__ */ jsx16(BuiltinIcon, {
               slot: "Carousel.next"
             })
           })
@@ -4256,10 +4388,10 @@ function CarouselNative({ node, props, rootProps, emit, scope }) {
 }
 
 // packages/exponential-ui-react/src/natives/nav.tsx
-import { Fragment as Fragment2, useRef as useRef18, useState as useState15 } from "react";
+import { Fragment as Fragment3, useRef as useRef19, useState as useState15 } from "react";
 import { Accordion as AccordionPrimitive, Tabs as TabsPrimitive, ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import { segmentedBadge } from "@exponential_app/eui/web";
-import { jsx as jsx16, jsxs as jsxs13, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13, Fragment as Fragment4 } from "react/jsx-runtime";
 function TabsNative({ node, props, rootProps, emit, scope }) {
   const ctx = useSurfaceContext();
   const part = useParts(node, props);
@@ -4300,23 +4432,23 @@ function TabsNative({ node, props, rootProps, emit, scope }) {
                 /* @__PURE__ */ jsxs13("span", {
                   className: "xui-Tabs-tab-body",
                   children: [
-                    tab.icon ? /* @__PURE__ */ jsx16(IconGlyph, {
+                    tab.icon ? /* @__PURE__ */ jsx17(IconGlyph, {
                       icons: ctx.host.icons,
                       name: tab.icon,
                       className: "xui-icon",
                       width: 16,
                       height: 16
                     }) : null,
-                    /* @__PURE__ */ jsx16("span", {
+                    /* @__PURE__ */ jsx17("span", {
                       children: str(tab.label)
                     }),
-                    tab.count !== undefined ? /* @__PURE__ */ jsx16("span", {
+                    tab.count !== undefined ? /* @__PURE__ */ jsx17("span", {
                       "data-count": "",
                       children: ctx.formatter.number(num(tab.count))
                     }) : null
                   ]
                 }),
-                /* @__PURE__ */ jsx16("span", {
+                /* @__PURE__ */ jsx17("span", {
                   ...part(`indicator`, selected && `selected`),
                   "aria-hidden": "true"
                 })
@@ -4324,29 +4456,29 @@ function TabsNative({ node, props, rootProps, emit, scope }) {
             }, tab.value);
             if (!closable)
               return trigger;
-            return /* @__PURE__ */ jsxs13(Fragment2, {
+            return /* @__PURE__ */ jsxs13(Fragment3, {
               children: [
                 trigger,
-                /* @__PURE__ */ jsx16("button", {
+                /* @__PURE__ */ jsx17("button", {
                   type: "button",
                   ...part.at(`close`, i, lent?.index === i && lent.state),
                   "aria-label": ctx.t(`closeTab`, { name: str(tab.label) }),
                   onPointerEnter: lending ? () => lend(i, `hover`) : undefined,
                   onPointerLeave: lending ? () => lend(i, null) : undefined,
                   onClick: () => void emit(`close`, { value: tab.value }),
-                  children: /* @__PURE__ */ jsx16(BuiltinIcon, {
+                  children: /* @__PURE__ */ jsx17(BuiltinIcon, {
                     slot: "Tabs.close"
                   })
                 })
               ]
             }, tab.value);
           }),
-          bool(props.addable) ? /* @__PURE__ */ jsx16("button", {
+          bool(props.addable) ? /* @__PURE__ */ jsx17("button", {
             type: "button",
             ...part(`new`),
             "aria-label": ctx.t(`newTab`),
             onClick: () => void emit(`new`),
-            children: /* @__PURE__ */ jsx16(BuiltinIcon, {
+            children: /* @__PURE__ */ jsx17(BuiltinIcon, {
               slot: "Tabs.new"
             })
           }) : null
@@ -4356,10 +4488,10 @@ function TabsNative({ node, props, rootProps, emit, scope }) {
         const attrs = part(`content`);
         if (tab.value !== value)
           delete attrs[`data-xui-id`];
-        return /* @__PURE__ */ jsx16(TabsPrimitive.Content, {
+        return /* @__PURE__ */ jsx17(TabsPrimitive.Content, {
           value: tab.value,
           ...attrs,
-          children: node.children[i] ? /* @__PURE__ */ jsx16(NodeView, {
+          children: node.children[i] ? /* @__PURE__ */ jsx17(NodeView, {
             node: node.children[i]
           }) : null
         }, tab.value);
@@ -4383,26 +4515,26 @@ function SegmentedNative({ node, props, rootProps, emit, scope }) {
   const isSelected = (item) => multiple ? asArray(value).includes(item.value) : value === item.value;
   const content = (item, selected) => {
     const badge = bar ? segmentedBadge(item.count) : null;
-    return /* @__PURE__ */ jsxs13(Fragment3, {
+    return /* @__PURE__ */ jsxs13(Fragment4, {
       children: [
         item.icon ? /* @__PURE__ */ jsxs13("span", {
           ...part(`icon`, selected && `selected`),
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ jsx16(IconGlyph, {
+            /* @__PURE__ */ jsx17(IconGlyph, {
               icons: ctx.host.icons,
               name: item.icon,
               className: "xui-icon",
               width: bar ? 20 : 16,
               height: bar ? 20 : 16
             }),
-            badge ? /* @__PURE__ */ jsx16("span", {
+            badge ? /* @__PURE__ */ jsx17("span", {
               ...part(`badge`, selected && `selected`),
               children: badge
             }) : null
           ]
         }) : null,
-        item.label ? /* @__PURE__ */ jsx16("span", {
+        item.label ? /* @__PURE__ */ jsx17("span", {
           ...part(`label`, selected && `selected`),
           children: str(item.label)
         }) : null
@@ -4410,7 +4542,7 @@ function SegmentedNative({ node, props, rootProps, emit, scope }) {
     });
   };
   if (bar)
-    return /* @__PURE__ */ jsx16(SegmentedBar, {
+    return /* @__PURE__ */ jsx17(SegmentedBar, {
       node,
       rootProps,
       vertical,
@@ -4425,7 +4557,7 @@ function SegmentedNative({ node, props, rootProps, emit, scope }) {
     });
   const body = items.map((item) => {
     const selected = isSelected(item);
-    return /* @__PURE__ */ jsx16(ToggleGroupPrimitive.Item, {
+    return /* @__PURE__ */ jsx17(ToggleGroupPrimitive.Item, {
       value: item.value,
       disabled: bool(item.disabled),
       "aria-label": item.label ? undefined : item.value,
@@ -4434,7 +4566,7 @@ function SegmentedNative({ node, props, rootProps, emit, scope }) {
     }, item.value);
   });
   if (multiple) {
-    return /* @__PURE__ */ jsx16(ToggleGroupPrimitive.Root, {
+    return /* @__PURE__ */ jsx17(ToggleGroupPrimitive.Root, {
       ...rootProps,
       type: "multiple",
       value: Array.isArray(value) ? value : asArray(value),
@@ -4448,7 +4580,7 @@ function SegmentedNative({ node, props, rootProps, emit, scope }) {
       children: body
     });
   }
-  return /* @__PURE__ */ jsx16(ToggleGroupPrimitive.Root, {
+  return /* @__PURE__ */ jsx17(ToggleGroupPrimitive.Root, {
     ...rootProps,
     type: "single",
     value,
@@ -4466,7 +4598,7 @@ function SegmentedNative({ node, props, rootProps, emit, scope }) {
 }
 function SegmentedBar({ rootProps, vertical, items, value, part, content, onPick }) {
   const ctx = useSurfaceContext();
-  const refs = useRef18([]);
+  const refs = useRef19([]);
   const enabled = items.map((item, i) => bool(item.disabled) ? -1 : i).filter((i) => i >= 0);
   const selectedIndex = items.findIndex((item) => item.value === value && !bool(item.disabled));
   const [focusIndex, setFocusIndex] = useState15(null);
@@ -4493,13 +4625,13 @@ function SegmentedBar({ rootProps, vertical, items, value, part, content, onPick
     refs.current[next]?.focus();
     return true;
   };
-  return /* @__PURE__ */ jsx16("nav", {
+  return /* @__PURE__ */ jsx17("nav", {
     ...rootProps,
     dir: ctx.direction,
     children: items.map((item, i) => {
       const selected = item.value === value;
       const disabled = bool(item.disabled);
-      return /* @__PURE__ */ jsx16("button", {
+      return /* @__PURE__ */ jsx17("button", {
         ref: (el) => void (refs.current[i] = el),
         type: "button",
         ...part(`item`, selected && `selected`, disabled && `disabled`),
@@ -4533,9 +4665,9 @@ function AccordionNative({ node, props, rootProps, emit, scope }) {
       value: item.value,
       ...part.at(`item`, i, open && `open`),
       children: [
-        /* @__PURE__ */ jsx16(AccordionPrimitive.Header, {
+        /* @__PURE__ */ jsx17(AccordionPrimitive.Header, {
           asChild: true,
-          children: /* @__PURE__ */ jsx16("div", {
+          children: /* @__PURE__ */ jsx17("div", {
             style: { display: `flex` },
             children: /* @__PURE__ */ jsxs13(AccordionPrimitive.Trigger, {
               ...part.at(`trigger`, i, open && `open`),
@@ -4544,13 +4676,13 @@ function AccordionNative({ node, props, rootProps, emit, scope }) {
                   className: "xui-accordion-title",
                   children: [
                     str(item.title),
-                    item.count !== undefined ? /* @__PURE__ */ jsx16("span", {
+                    item.count !== undefined ? /* @__PURE__ */ jsx17("span", {
                       ...part.at(`count`, i),
                       children: ctx.formatter.number(num(item.count))
                     }) : null
                   ]
                 }),
-                /* @__PURE__ */ jsx16(BuiltinIcon, {
+                /* @__PURE__ */ jsx17(BuiltinIcon, {
                   slot: "Accordion.trigger",
                   size: 16
                 })
@@ -4558,9 +4690,9 @@ function AccordionNative({ node, props, rootProps, emit, scope }) {
             })
           })
         }),
-        /* @__PURE__ */ jsx16(AccordionPrimitive.Content, {
+        /* @__PURE__ */ jsx17(AccordionPrimitive.Content, {
           ...part.at(`content`, i, open && `open`),
-          children: node.children[i] ? /* @__PURE__ */ jsx16(NodeView, {
+          children: node.children[i] ? /* @__PURE__ */ jsx17(NodeView, {
             node: node.children[i]
           }) : null
         })
@@ -4568,7 +4700,7 @@ function AccordionNative({ node, props, rootProps, emit, scope }) {
     }, item.value);
   });
   if (multiple) {
-    return /* @__PURE__ */ jsx16(AccordionPrimitive.Root, {
+    return /* @__PURE__ */ jsx17(AccordionPrimitive.Root, {
       ...rootProps,
       type: "multiple",
       value: asArray(value),
@@ -4580,7 +4712,7 @@ function AccordionNative({ node, props, rootProps, emit, scope }) {
       children: body
     });
   }
-  return /* @__PURE__ */ jsx16(AccordionPrimitive.Root, {
+  return /* @__PURE__ */ jsx17(AccordionPrimitive.Root, {
     ...rootProps,
     type: "single",
     collapsible: true,
@@ -4596,17 +4728,17 @@ function AccordionNative({ node, props, rootProps, emit, scope }) {
 var asArray = (v) => Array.isArray(v) ? v : v ? v.split(`,`) : [];
 
 // packages/exponential-ui-react/src/natives/overlays.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback8, useEffect as useEffect15, useRef as useRef20, useState as useState17 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback8, useEffect as useEffect16, useRef as useRef21, useState as useState17 } from "react";
 import { createPortal } from "react-dom";
 import { ContextMenu as ContextPrimitive, Dialog as DialogPrimitive, DropdownMenu as MenuPrimitive, Popover as PopoverPrimitive2, Tooltip as TooltipPrimitive } from "radix-ui";
 import { OVERLAY_OFFSET as OVERLAY_OFFSET2, OVERLAY_PADDING as OVERLAY_PADDING2 } from "@exponential_app/eui";
-import { isBinding as isBinding2 } from "@exponential_app/eui/web";
+import { isBinding as isBinding2, overlayOpenFocus } from "@exponential_app/eui/web";
 import { absolutePath as absolutePath2 } from "@exponential_app/eui/web";
 
 // packages/exponential-ui-react/src/natives/search.tsx
-import { useEffect as useEffect14, useId as useId5, useLayoutEffect as useLayoutEffect5, useRef as useRef19, useState as useState16 } from "react";
+import { useEffect as useEffect15, useId as useId5, useLayoutEffect as useLayoutEffect6, useRef as useRef20, useState as useState16 } from "react";
 import { elementScale } from "@exponential_app/eui/web";
-import { jsx as jsx17, jsxs as jsxs14, Fragment as Fragment4 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14, Fragment as Fragment5 } from "react/jsx-runtime";
 function searchMatches(item, query) {
   const needle = query.trim().toLowerCase();
   return needle === `` || str(item.label).toLowerCase().includes(needle) || str(item.identifier).toLowerCase().includes(needle);
@@ -4615,7 +4747,7 @@ function SearchBody({ part, owner, suffix, rows, query, onQuery, placeholder, em
   const ctx = useSurfaceContext();
   const listId = useId5();
   const [active, setActive] = useState16(0);
-  const listRef = useRef19(null);
+  const listRef = useRef20(null);
   const [moreBelow, setMoreBelow] = useState16(false);
   const at = Math.min(active, Math.max(0, rows.length - 1));
   const single = (name) => {
@@ -4624,14 +4756,14 @@ function SearchBody({ part, owner, suffix, rows, query, onQuery, placeholder, em
       attrs[`data-xui-id`] = `${attrs[`data-xui-id`]}${suffix}`;
     return attrs;
   };
-  useEffect14(() => setActive(0), [query]);
+  useEffect15(() => setActive(0), [query]);
   const measure = () => {
     const list = listRef.current;
     if (list)
       setMoreBelow(list.scrollTop + list.clientHeight < list.scrollHeight - 1);
   };
-  useLayoutEffect5(measure, [rows.length, maxRows]);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(measure, [rows.length, maxRows]);
+  useLayoutEffect6(() => {
     const list = listRef.current;
     const row = list?.querySelector(`[data-active="true"]`);
     if (!list || !row)
@@ -4665,7 +4797,7 @@ function SearchBody({ part, owner, suffix, rows, query, onQuery, placeholder, em
     }
   };
   const activeId = rows[at] ? `${listId}-${rows[at].index}` : undefined;
-  return /* @__PURE__ */ jsxs14(Fragment4, {
+  return /* @__PURE__ */ jsxs14(Fragment5, {
     children: [
       /* @__PURE__ */ jsxs14("div", {
         ...single(`head`),
@@ -4673,10 +4805,10 @@ function SearchBody({ part, owner, suffix, rows, query, onQuery, placeholder, em
           /* @__PURE__ */ jsxs14("div", {
             ...single(`search`),
             children: [
-              /* @__PURE__ */ jsx17(BuiltinIcon, {
+              /* @__PURE__ */ jsx18(BuiltinIcon, {
                 slot: "SearchList.search"
               }),
-              /* @__PURE__ */ jsx17("input", {
+              /* @__PURE__ */ jsx18("input", {
                 type: "text",
                 role: "combobox",
                 "aria-expanded": "true",
@@ -4691,7 +4823,7 @@ function SearchBody({ part, owner, suffix, rows, query, onQuery, placeholder, em
               })
             ]
           }),
-          showCount && query.trim() !== `` ? /* @__PURE__ */ jsx17("span", {
+          showCount && query.trim() !== `` ? /* @__PURE__ */ jsx18("span", {
             ...single(`count`),
             role: "status",
             "aria-live": "polite",
@@ -4713,7 +4845,7 @@ function SearchBody({ part, owner, suffix, rows, query, onQuery, placeholder, em
               rows.map(({ index, item }, pos) => {
                 const isActive = pos === at;
                 const disabled = bool(item.disabled);
-                return /* @__PURE__ */ jsx17("div", {
+                return /* @__PURE__ */ jsx18("div", {
                   id: `${listId}-${index}`,
                   role: "option",
                   "aria-selected": isActive,
@@ -4723,28 +4855,28 @@ function SearchBody({ part, owner, suffix, rows, query, onQuery, placeholder, em
                   onPointerMove: () => pos !== at && setActive(pos),
                   onPointerDown: (e) => e.preventDefault(),
                   onClick: () => pick(pos),
-                  children: renderRow ? renderRow(item, index) : /* @__PURE__ */ jsxs14(Fragment4, {
+                  children: renderRow ? renderRow(item, index) : /* @__PURE__ */ jsxs14(Fragment5, {
                     children: [
-                      item.icon ? /* @__PURE__ */ jsx17("span", {
+                      item.icon ? /* @__PURE__ */ jsx18("span", {
                         ...part.at(`icon`, index),
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ jsx17(IconGlyph, {
+                        children: /* @__PURE__ */ jsx18(IconGlyph, {
                           icons: ctx.host.icons,
                           name: item.icon
                         })
                       }) : null,
-                      str(item.identifier) ? /* @__PURE__ */ jsx17("span", {
+                      str(item.identifier) ? /* @__PURE__ */ jsx18("span", {
                         ...part.at(`identifier`, index),
                         children: str(item.identifier)
                       }) : null,
-                      /* @__PURE__ */ jsx17("span", {
+                      /* @__PURE__ */ jsx18("span", {
                         ...part.at(`label`, index),
                         children: str(item.label)
                       }),
-                      picked !== undefined && picked !== `` && item.value === picked ? /* @__PURE__ */ jsx17("span", {
+                      picked !== undefined && picked !== `` && item.value === picked ? /* @__PURE__ */ jsx18("span", {
                         ...part.at(`check`, index),
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ jsx17(BuiltinIcon, {
+                        children: /* @__PURE__ */ jsx18(BuiltinIcon, {
                           slot: "SearchList.check"
                         })
                       }) : null
@@ -4752,13 +4884,13 @@ function SearchBody({ part, owner, suffix, rows, query, onQuery, placeholder, em
                   })
                 }, `${index}`);
               }),
-              rows.length === 0 ? /* @__PURE__ */ jsx17("div", {
+              rows.length === 0 ? /* @__PURE__ */ jsx18("div", {
                 ...single(`empty`),
                 children: emptyText
               }) : null
             ]
           }),
-          moreBelow && rows.length > maxRows ? /* @__PURE__ */ jsx17("div", {
+          moreBelow && rows.length > maxRows ? /* @__PURE__ */ jsx18("div", {
             ...single(`fade`),
             "aria-hidden": "true"
           }) : null
@@ -4774,8 +4906,8 @@ function SearchListNative({ node, props, rootProps, emit, scope }) {
   const [query, setQuery] = useBoundState(node, scope, `query`, str(props.query));
   const [picked, setPicked] = useBoundState(node, scope, `value`, str(props.value));
   const hostSearches = Boolean(node.on?.search);
-  const typed = useRef19(false);
-  useEffect14(() => {
+  const typed = useRef20(false);
+  useEffect15(() => {
     if (!typed.current)
       return;
     const t = setTimeout(() => void emit(`search`, { query }), DEBOUNCE_MS);
@@ -4783,9 +4915,9 @@ function SearchListNative({ node, props, rootProps, emit, scope }) {
   }, [query]);
   const rows = items.map((item, index) => ({ index, item })).filter(({ item }) => hostSearches || searchMatches(item, query));
   const maxRows = Math.max(1, Math.floor(num(props.maxRows, 8)));
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx18("div", {
     ...rootProps,
-    children: /* @__PURE__ */ jsx17(SearchBody, {
+    children: /* @__PURE__ */ jsx18(SearchBody, {
       part,
       owner: "SearchList",
       suffix: "",
@@ -4809,7 +4941,7 @@ function SearchListNative({ node, props, rootProps, emit, scope }) {
 }
 
 // packages/exponential-ui-react/src/natives/overlays.tsx
-import { jsx as jsx18, jsxs as jsxs15, Fragment as Fragment5 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15, Fragment as Fragment6 } from "react/jsx-runtime";
 function useOpenState(node, scope, external, emit) {
   const [open, setOpen] = useBoundState(node, scope, `open`, external);
   const change = useCallback8((next) => {
@@ -4819,7 +4951,7 @@ function useOpenState(node, scope, external, emit) {
   return [open, change];
 }
 var Trigger = forwardRef2(function Trigger({ children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx18("span", {
+  return /* @__PURE__ */ jsx19("span", {
     ref,
     className: "xui-trigger",
     ...rest,
@@ -4832,20 +4964,20 @@ function overlayRootProps(rootProps, trigger, triggerNode) {
   return { ...rootProps, "data-xui-overlay-root": triggerNode?.component === `Link` ? `stretch` : `` };
 }
 function DialogNative(p) {
-  return /* @__PURE__ */ jsx18(ModalNative, {
+  return /* @__PURE__ */ jsx19(ModalNative, {
     ...p,
     kind: "Dialog"
   });
 }
 function DrawerNative(p) {
-  return /* @__PURE__ */ jsx18(ModalNative, {
+  return /* @__PURE__ */ jsx19(ModalNative, {
     ...p,
     kind: "Drawer"
   });
 }
 function useDragToDismiss(side, enabled, onDismiss, reducedMotion) {
-  const panel = useRef20(null);
-  const drag = useRef20(null);
+  const panel = useRef21(null);
+  const drag = useRef21(null);
   const sign = side === `bottom` || side === `right` ? 1 : -1;
   const axis = side === `left` || side === `right` ? `x` : `y`;
   const distance = (e) => {
@@ -4905,11 +5037,11 @@ function ModalNative({ node, props, rootProps, emit, children, slots, scope, kin
     open,
     onOpenChange: (next) => next || dismissible ? setOpen(next) : undefined,
     children: [
-      /* @__PURE__ */ jsx18("div", {
+      /* @__PURE__ */ jsx19("div", {
         ...overlayRootProps(rootProps, slots.trigger, node.slots?.trigger),
-        children: slots.trigger ? /* @__PURE__ */ jsx18(DialogPrimitive.Trigger, {
+        children: slots.trigger ? /* @__PURE__ */ jsx19(DialogPrimitive.Trigger, {
           asChild: true,
-          children: /* @__PURE__ */ jsx18(Trigger, {
+          children: /* @__PURE__ */ jsx19(Trigger, {
             children: slots.trigger
           })
         }) : null
@@ -4917,7 +5049,7 @@ function ModalNative({ node, props, rootProps, emit, children, slots, scope, kin
       /* @__PURE__ */ jsxs15(DialogPrimitive.Portal, {
         container: ctx.portal ?? undefined,
         children: [
-          /* @__PURE__ */ jsx18(DialogPrimitive.Overlay, {
+          /* @__PURE__ */ jsx19(DialogPrimitive.Overlay, {
             ...part(`overlay`, open && `open`),
             "data-xui-overlay-backdrop": kind
           }),
@@ -4931,18 +5063,10 @@ function ModalNative({ node, props, rootProps, emit, children, slots, scope, kin
             onEscapeKeyDown: dismissible ? undefined : (e) => e.preventDefault(),
             onPointerDownOutside: dismissible ? undefined : (e) => e.preventDefault(),
             onInteractOutside: dismissible ? undefined : (e) => e.preventDefault(),
-            onOpenAutoFocus: (e) => {
-              const content = e.currentTarget;
-              const marked = content?.querySelector(`[data-xui-autofocus]`) ?? content?.querySelector(`[data-xui-part="AlertDialog/cancel"]`);
-              const target = marked && (marked.matches(`button,input,textarea,select,a[href],[tabindex]`) ? marked : marked.querySelector(`button,input,textarea,select,a[href],[tabindex]`));
-              if (target) {
-                e.preventDefault();
-                target.focus();
-              }
-            },
+            onOpenAutoFocus: overlayOpenFocus,
             ...description ? {} : { "aria-describedby": undefined },
             children: [
-              kind === `Drawer` && (side === `bottom` || side === `top`) ? /* @__PURE__ */ jsx18("div", {
+              kind === `Drawer` && (side === `bottom` || side === `top`) ? /* @__PURE__ */ jsx19("div", {
                 ...part(`handle`),
                 "aria-hidden": "true",
                 ...drag.handlers
@@ -4951,39 +5075,39 @@ function ModalNative({ node, props, rootProps, emit, children, slots, scope, kin
                 className: "xui-overlay-head",
                 ...kind === `Drawer` ? drag.handlers : {},
                 children: [
-                  title ? /* @__PURE__ */ jsx18(DialogPrimitive.Title, {
+                  title ? /* @__PURE__ */ jsx19(DialogPrimitive.Title, {
                     ...part(`title`),
                     children: title
-                  }) : /* @__PURE__ */ jsx18(DialogPrimitive.Title, {
+                  }) : /* @__PURE__ */ jsx19(DialogPrimitive.Title, {
                     className: "xui-sr-only",
                     children: ctx.t(`dialog`)
                   }),
-                  description ? /* @__PURE__ */ jsx18(DialogPrimitive.Description, {
+                  description ? /* @__PURE__ */ jsx19(DialogPrimitive.Description, {
                     ...part(`description`),
                     children: description
                   }) : null
                 ]
-              }) : /* @__PURE__ */ jsx18(DialogPrimitive.Title, {
+              }) : /* @__PURE__ */ jsx19(DialogPrimitive.Title, {
                 className: "xui-sr-only",
                 children: ctx.t(`dialog`)
               }),
               /* @__PURE__ */ jsxs15(CloseOnSubmitContext.Provider, {
                 value: dismissible ? close : null,
                 children: [
-                  /* @__PURE__ */ jsx18("div", {
+                  /* @__PURE__ */ jsx19("div", {
                     className: "xui-overlay-body",
                     children
                   }),
-                  slots.footer ? /* @__PURE__ */ jsx18("div", {
+                  slots.footer ? /* @__PURE__ */ jsx19("div", {
                     ...part(`footer`),
                     children: slots.footer
                   }) : null
                 ]
               }),
-              kind === `Dialog` && dismissible ? /* @__PURE__ */ jsx18(DialogPrimitive.Close, {
+              kind === `Dialog` && dismissible ? /* @__PURE__ */ jsx19(DialogPrimitive.Close, {
                 ...part(`close`),
                 "aria-label": ctx.t(`close`),
-                children: /* @__PURE__ */ jsx18(BuiltinIcon, {
+                children: /* @__PURE__ */ jsx19(BuiltinIcon, {
                   slot: "Dialog.close"
                 })
               }) : null
@@ -5002,10 +5126,10 @@ function PopoverNative({ node, props, rootProps, emit, children, slots, scope })
   const [open, setOpen] = useOpenState(node, scope, bool(props.open), emit);
   const side = str(props.side, `bottom`);
   const hoverMode = props.openOn === `hover` && ctx.hover;
-  const timer = useRef20(null);
-  const openRef = useRef20(open);
+  const timer = useRef21(null);
+  const openRef = useRef21(open);
   openRef.current = open;
-  const contentRef = useRef20(null);
+  const contentRef = useRef21(null);
   const schedule = (next) => {
     if (timer.current)
       clearTimeout(timer.current);
@@ -5014,7 +5138,7 @@ function PopoverNative({ node, props, rootProps, emit, children, slots, scope })
         setOpen(next);
     }, next ? HOVER_OPEN_MS : HOVER_CLOSE_MS);
   };
-  useEffect15(() => () => void (timer.current && clearTimeout(timer.current)), []);
+  useEffect16(() => () => void (timer.current && clearTimeout(timer.current)), []);
   const hoverProps = hoverMode ? {
     onPointerEnter: (e) => e.pointerType !== `touch` && schedule(true),
     onPointerLeave: (e) => e.pointerType !== `touch` && schedule(false),
@@ -5029,24 +5153,24 @@ function PopoverNative({ node, props, rootProps, emit, children, slots, scope })
     open,
     onOpenChange: setOpen,
     children: [
-      /* @__PURE__ */ jsx18("div", {
+      /* @__PURE__ */ jsx19("div", {
         ...overlayRootProps(rootProps, slots.trigger, node.slots?.trigger),
-        children: slots.trigger ? /* @__PURE__ */ jsx18(PopoverPrimitive2.Trigger, {
+        children: slots.trigger ? /* @__PURE__ */ jsx19(PopoverPrimitive2.Trigger, {
           asChild: true,
-          children: /* @__PURE__ */ jsx18(Trigger, {
+          children: /* @__PURE__ */ jsx19(Trigger, {
             ...hoverProps,
             children: slots.trigger
           })
-        }) : /* @__PURE__ */ jsx18(PopoverPrimitive2.Anchor, {
+        }) : /* @__PURE__ */ jsx19(PopoverPrimitive2.Anchor, {
           asChild: true,
-          children: /* @__PURE__ */ jsx18("span", {
+          children: /* @__PURE__ */ jsx19("span", {
             style: { display: `inline-flex` }
           })
         })
       }),
-      /* @__PURE__ */ jsx18(PopoverPrimitive2.Portal, {
+      /* @__PURE__ */ jsx19(PopoverPrimitive2.Portal, {
         container: ctx.portal ?? undefined,
-        children: /* @__PURE__ */ jsx18(PopoverPrimitive2.Content, {
+        children: /* @__PURE__ */ jsx19(PopoverPrimitive2.Content, {
           ref: contentRef,
           ...part(`content`, open && `open`),
           side,
@@ -5059,7 +5183,7 @@ function PopoverNative({ node, props, rootProps, emit, children, slots, scope })
           onOpenAutoFocus: hoverMode ? (e) => e.preventDefault() : undefined,
           onPointerEnter: hoverMode ? () => schedule(true) : undefined,
           onPointerLeave: hoverMode ? () => schedule(false) : undefined,
-          children: /* @__PURE__ */ jsx18(CloseOnSubmitContext.Provider, {
+          children: /* @__PURE__ */ jsx19(CloseOnSubmitContext.Provider, {
             value: null,
             children
           })
@@ -5073,25 +5197,25 @@ function TooltipNative({ node, props, rootProps, children }) {
   const part = useParts(node, props);
   const side = str(props.side, `top`);
   const content = str(props.content) || str(props.text);
-  return /* @__PURE__ */ jsx18(TooltipPrimitive.Provider, {
+  return /* @__PURE__ */ jsx19(TooltipPrimitive.Provider, {
     delayDuration: 300,
     children: /* @__PURE__ */ jsxs15(TooltipPrimitive.Root, {
       children: [
-        /* @__PURE__ */ jsx18("div", {
+        /* @__PURE__ */ jsx19("div", {
           ...rootProps,
           "data-xui-overlay-root": "",
-          children: /* @__PURE__ */ jsx18(TooltipPrimitive.Trigger, {
+          children: /* @__PURE__ */ jsx19(TooltipPrimitive.Trigger, {
             asChild: true,
-            children: /* @__PURE__ */ jsx18("div", {
+            children: /* @__PURE__ */ jsx19("div", {
               ...part(`anchor`),
               tabIndex: 0,
               children
             })
           })
         }),
-        /* @__PURE__ */ jsx18(TooltipPrimitive.Portal, {
+        /* @__PURE__ */ jsx19(TooltipPrimitive.Portal, {
           container: ctx.portal ?? undefined,
-          children: /* @__PURE__ */ jsx18(TooltipPrimitive.Content, {
+          children: /* @__PURE__ */ jsx19(TooltipPrimitive.Content, {
             ...part(`content`),
             side,
             sideOffset: OVERLAY_OFFSET2,
@@ -5107,13 +5231,13 @@ function TooltipNative({ node, props, rootProps, children }) {
 function MenuSearch({ item, i, part, emit, close }) {
   const ctx = useSurfaceContext();
   const [query, setQuery] = useState17(``);
-  const box = useRef20(null);
-  useEffect15(() => {
+  const box = useRef21(null);
+  useEffect16(() => {
     const frame = requestAnimationFrame(() => box.current?.querySelector(`input`)?.focus({ preventScroll: true }));
     return () => cancelAnimationFrame(frame);
   }, []);
   const rows = objects(item.items).map((entry, index) => ({ index, entry })).filter(({ entry }) => entry.kind !== `separator` && entry.kind !== `label` && !entry.separator && searchMatches({ label: str(entry.label) }, query)).map(({ index, entry }) => ({ index, item: { label: str(entry.label), value: str(entry.value ?? entry.label), icon: entry.icon, disabled: bool(entry.disabled) } }));
-  return /* @__PURE__ */ jsx18("div", {
+  return /* @__PURE__ */ jsx19("div", {
     ref: box,
     className: "xui-menu-search",
     onPointerEnter: (e) => {
@@ -5121,7 +5245,7 @@ function MenuSearch({ item, i, part, emit, close }) {
       if (input && !e.currentTarget.contains(document.activeElement))
         input.focus({ preventScroll: true });
     },
-    children: /* @__PURE__ */ jsx18(SearchBody, {
+    children: /* @__PURE__ */ jsx19(SearchBody, {
       part,
       owner: "Menu",
       suffix: `.${i}`,
@@ -5139,13 +5263,13 @@ function MenuSearch({ item, i, part, emit, close }) {
         close();
       },
       rowPart: (_, __, active) => part(`item`, active && `selected`),
-      renderRow: (row) => /* @__PURE__ */ jsxs15(Fragment5, {
+      renderRow: (row) => /* @__PURE__ */ jsxs15(Fragment6, {
         children: [
-          row.icon ? /* @__PURE__ */ jsx18(IconGlyph, {
+          row.icon ? /* @__PURE__ */ jsx19(IconGlyph, {
             icons: ctx.host.icons,
             name: row.icon
           }) : null,
-          /* @__PURE__ */ jsx18("span", {
+          /* @__PURE__ */ jsx19("span", {
             className: "xui-menu-label",
             children: row.label
           })
@@ -5158,24 +5282,24 @@ function MenuItems({ ns, items, rawItems, part, overlay, emit, scope, path, clos
   const ctx = useSurfaceContext();
   const raws = objects(rawItems);
   const N = ns;
-  return /* @__PURE__ */ jsx18(Fragment5, {
+  return /* @__PURE__ */ jsx19(Fragment6, {
     children: items.map((item, i) => {
       const kind = item.separator ? `separator` : item.kind ?? `item`;
       const key = `${path}${i}`;
-      const icon = item.icon ? /* @__PURE__ */ jsx18(IconGlyph, {
+      const icon = item.icon ? /* @__PURE__ */ jsx19(IconGlyph, {
         icons: ctx.host.icons,
         name: item.icon
       }) : null;
-      const shortcut = item.shortcut ? /* @__PURE__ */ jsx18("span", {
+      const shortcut = item.shortcut ? /* @__PURE__ */ jsx19("span", {
         ...part(`shortcut`),
         children: item.shortcut
       }) : null;
       if (kind === `separator`)
-        return /* @__PURE__ */ jsx18(N.Separator, {
+        return /* @__PURE__ */ jsx19(N.Separator, {
           ...part(`separator`)
         }, key);
       if (kind === `label`)
-        return /* @__PURE__ */ jsx18(N.Label, {
+        return /* @__PURE__ */ jsx19(N.Label, {
           ...part(`label`),
           children: str(item.label)
         }, key);
@@ -5187,33 +5311,33 @@ function MenuItems({ ns, items, rawItems, part, overlay, emit, scope, path, clos
               disabled: bool(item.disabled),
               children: [
                 icon,
-                /* @__PURE__ */ jsx18("span", {
+                /* @__PURE__ */ jsx19("span", {
                   className: "xui-menu-label",
                   children: str(item.label)
                 }),
-                /* @__PURE__ */ jsx18("span", {
+                /* @__PURE__ */ jsx19("span", {
                   ...part(`submenuIndicator`),
-                  children: /* @__PURE__ */ jsx18(BuiltinIcon, {
+                  children: /* @__PURE__ */ jsx19(BuiltinIcon, {
                     slot: "Menu.submenuIndicator"
                   })
                 })
               ]
             }),
-            /* @__PURE__ */ jsx18(N.Portal, {
+            /* @__PURE__ */ jsx19(N.Portal, {
               container: ctx.portal ?? undefined,
-              children: /* @__PURE__ */ jsx18(N.SubContent, {
+              children: /* @__PURE__ */ jsx19(N.SubContent, {
                 ...part(`content`),
                 sideOffset: 2,
                 collisionPadding: OVERLAY_PADDING2,
                 "data-xui-overlay": `${overlay}.sub`,
                 "data-searchable": item.searchable ? `true` : undefined,
-                children: item.searchable ? /* @__PURE__ */ jsx18(MenuSearch, {
+                children: item.searchable ? /* @__PURE__ */ jsx19(MenuSearch, {
                   item,
                   i: key,
                   part,
                   emit,
                   close
-                }) : /* @__PURE__ */ jsx18(MenuItems, {
+                }) : /* @__PURE__ */ jsx19(MenuItems, {
                   ns,
                   items: objects(item.items),
                   rawItems: raws[i]?.items,
@@ -5243,15 +5367,15 @@ function MenuItems({ ns, items, rawItems, part, overlay, emit, scope, path, clos
           },
           onSelect: (e) => e.preventDefault(),
           children: [
-            /* @__PURE__ */ jsx18("span", {
+            /* @__PURE__ */ jsx19("span", {
               ...part(`check`),
-              children: /* @__PURE__ */ jsx18(N.ItemIndicator, {
-                children: /* @__PURE__ */ jsx18(BuiltinIcon, {
+              children: /* @__PURE__ */ jsx19(N.ItemIndicator, {
+                children: /* @__PURE__ */ jsx19(BuiltinIcon, {
                   slot: "Menu.check"
                 })
               })
             }),
-            /* @__PURE__ */ jsx18("span", {
+            /* @__PURE__ */ jsx19("span", {
               className: "xui-menu-label",
               children: str(item.label)
             }),
@@ -5266,7 +5390,7 @@ function MenuItems({ ns, items, rawItems, part, overlay, emit, scope, path, clos
         onSelect: () => void emit(`select`, { value: item.value ?? item.label }),
         children: [
           icon,
-          /* @__PURE__ */ jsx18("span", {
+          /* @__PURE__ */ jsx19("span", {
             className: "xui-menu-label",
             children: str(item.label)
           }),
@@ -5277,9 +5401,9 @@ function MenuItems({ ns, items, rawItems, part, overlay, emit, scope, path, clos
   });
 }
 function MenuNative(p) {
-  return p.props.openOn === `contextmenu` ? /* @__PURE__ */ jsx18(ContextMenuOpening, {
+  return p.props.openOn === `contextmenu` ? /* @__PURE__ */ jsx19(ContextMenuOpening, {
     ...p
-  }) : /* @__PURE__ */ jsx18(PressMenuOpening, {
+  }) : /* @__PURE__ */ jsx19(PressMenuOpening, {
     ...p
   });
 }
@@ -5296,41 +5420,41 @@ function PressMenuOpening({ node, props, rootProps, emit, children, scope }) {
     onOpenChange: setOpen,
     dir: ctx.direction,
     children: [
-      /* @__PURE__ */ jsx18("div", {
+      /* @__PURE__ */ jsx19("div", {
         ...overlayRootProps(rootProps, true, child),
-        children: /* @__PURE__ */ jsx18(MenuPrimitive.Trigger, {
+        children: /* @__PURE__ */ jsx19(MenuPrimitive.Trigger, {
           asChild: true,
-          children: child ? /* @__PURE__ */ jsx18(Trigger, {
+          children: child ? /* @__PURE__ */ jsx19(Trigger, {
             children
           }) : /* @__PURE__ */ jsxs15("button", {
             type: "button",
             ...part(`trigger`, open && `open`),
             "aria-label": label || ctx.t(`menu`),
             children: [
-              icon ? /* @__PURE__ */ jsx18(IconGlyph, {
+              icon ? /* @__PURE__ */ jsx19(IconGlyph, {
                 icons: ctx.host.icons,
                 name: icon,
                 className: "xui-icon",
                 width: 16,
                 height: 16
               }) : null,
-              label || !icon ? /* @__PURE__ */ jsx18("span", {
+              label || !icon ? /* @__PURE__ */ jsx19("span", {
                 children: label || ctx.t(`menu`)
               }) : null
             ]
           })
         })
       }),
-      /* @__PURE__ */ jsx18(MenuPrimitive.Portal, {
+      /* @__PURE__ */ jsx19(MenuPrimitive.Portal, {
         container: ctx.portal ?? undefined,
-        children: /* @__PURE__ */ jsx18(MenuPrimitive.Content, {
+        children: /* @__PURE__ */ jsx19(MenuPrimitive.Content, {
           ...part(`content`, open && `open`),
           align: "start",
           sideOffset: OVERLAY_OFFSET2,
           collisionPadding: OVERLAY_PADDING2,
           "data-xui-overlay": "Menu",
           "data-open-on": "press",
-          children: /* @__PURE__ */ jsx18(MenuItems, {
+          children: /* @__PURE__ */ jsx19(MenuItems, {
             ns: MenuPrimitive,
             items,
             rawItems: node.props.items,
@@ -5358,9 +5482,9 @@ function ContextMenuOpening({ node, props, rootProps, emit, children, scope }) {
     onOpenChange: setOpen,
     dir: ctx.direction,
     children: [
-      /* @__PURE__ */ jsx18(ContextPrimitive.Trigger, {
+      /* @__PURE__ */ jsx19(ContextPrimitive.Trigger, {
         asChild: true,
-        children: /* @__PURE__ */ jsx18("div", {
+        children: /* @__PURE__ */ jsx19("div", {
           ...rootProps,
           "data-state": open ? `open` : `closed`,
           onKeyDown: (e) => {
@@ -5373,14 +5497,14 @@ function ContextMenuOpening({ node, props, rootProps, emit, children, scope }) {
           children
         })
       }),
-      /* @__PURE__ */ jsx18(ContextPrimitive.Portal, {
+      /* @__PURE__ */ jsx19(ContextPrimitive.Portal, {
         container: ctx.portal ?? undefined,
-        children: /* @__PURE__ */ jsx18(ContextPrimitive.Content, {
+        children: /* @__PURE__ */ jsx19(ContextPrimitive.Content, {
           ...part(`content`, open && `open`),
           collisionPadding: OVERLAY_PADDING2,
           "data-xui-overlay": "Menu",
           "data-open-on": "contextmenu",
-          children: /* @__PURE__ */ jsx18(MenuItems, {
+          children: /* @__PURE__ */ jsx19(MenuItems, {
             ns: ContextPrimitive,
             items,
             rawItems: node.props.items,
@@ -5404,15 +5528,15 @@ function ToastNative({ node, props, rootProps, emit, scope }) {
   const [paused, setPaused] = useState17(false);
   const duration = props.duration === undefined ? 5000 : Math.max(0, num(props.duration, 5000));
   const type = str(props.type, `info`);
-  const remaining = useRef20(duration);
-  const startedAt = useRef20(0);
+  const remaining = useRef21(duration);
+  const startedAt = useRef21(0);
   const close = useCallback8(() => {
     setOpenState(false);
     emit(`dismiss`, undefined, { open: false });
     emit(`change`, { open: false }, { open: false });
   }, [setOpenState, emit]);
   const [shown, setShown] = useState17(open);
-  useEffect15(() => {
+  useEffect16(() => {
     if (open) {
       setShown(true);
       setLeaving(false);
@@ -5429,7 +5553,7 @@ function ToastNative({ node, props, rootProps, emit, scope }) {
     }, ms);
     return () => clearTimeout(t);
   }, [open]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open || duration === 0 || paused)
       return;
     startedAt.current = Date.now();
@@ -5463,37 +5587,37 @@ function ToastNative({ node, props, rootProps, emit, scope }) {
       }
     },
     children: [
-      /* @__PURE__ */ jsx18("span", {
+      /* @__PURE__ */ jsx19("span", {
         ...part(`icon`),
-        children: /* @__PURE__ */ jsx18(BuiltinIcon, {
+        children: /* @__PURE__ */ jsx19(BuiltinIcon, {
           slot: `Toast.icon.${type}`
         })
       }),
       /* @__PURE__ */ jsxs15("div", {
         className: "xui-toast-text",
         children: [
-          /* @__PURE__ */ jsx18("span", {
+          /* @__PURE__ */ jsx19("span", {
             ...part(`title`),
             children: title
           }),
-          description ? /* @__PURE__ */ jsx18("span", {
+          description ? /* @__PURE__ */ jsx19("span", {
             ...part(`description`),
             children: description
           }) : null
         ]
       }),
-      actionLabel ? /* @__PURE__ */ jsx18("button", {
+      actionLabel ? /* @__PURE__ */ jsx19("button", {
         type: "button",
         ...part(`action`),
         onClick: () => void emit(`action`),
         children: actionLabel
       }) : null,
-      props.dismissible !== false ? /* @__PURE__ */ jsx18("button", {
+      props.dismissible !== false ? /* @__PURE__ */ jsx19("button", {
         type: "button",
         ...part(`close`),
         "aria-label": ctx.t(`dismiss`),
         onClick: close,
-        children: /* @__PURE__ */ jsx18(BuiltinIcon, {
+        children: /* @__PURE__ */ jsx19(BuiltinIcon, {
           slot: "Toast.close"
         })
       }) : null
@@ -5502,10 +5626,10 @@ function ToastNative({ node, props, rootProps, emit, scope }) {
 }
 
 // packages/exponential-ui-react/src/natives/qr.tsx
-import { useEffect as useEffect16, useMemo as useMemo13, useRef as useRef21, useState as useState18 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo13, useRef as useRef22, useState as useState18 } from "react";
 import { nativeRecipeProps as nativeRecipeProps3, resolveRecipe as resolveRecipe2 } from "@exponential_app/eui";
 import { QR_CORNERS, QR_SCANNER, qrCornerPath, qrFeedColour, qrPaint, qrScanFormats, qrScanReporter } from "@exponential_app/eui/web";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function recipeOf(ctx, component, part, props) {
   return resolveRecipe2(ctx.theme, { component, part, props: nativeRecipeProps3(component, props, ctx.extensionDefs) }, ctx.mode);
 }
@@ -5532,24 +5656,24 @@ function QrCodeNative({ node, props, rootProps }) {
     "aria-hidden": label ? undefined : `true`,
     "data-empty": paint.matrix ? undefined : `true`,
     children: [
-      /* @__PURE__ */ jsx19("span", {
+      /* @__PURE__ */ jsx20("span", {
         ...part(`plate`),
         style: { width: size, height: size, backgroundColor: paint.plate },
-        children: paint.matrix ? /* @__PURE__ */ jsx19("svg", {
+        children: paint.matrix ? /* @__PURE__ */ jsx20("svg", {
           viewBox: `0 0 ${paint.modules} ${paint.modules}`,
           width: size,
           height: size,
           shapeRendering: "crispEdges",
           "aria-hidden": "true",
           focusable: "false",
-          children: /* @__PURE__ */ jsx19("path", {
+          children: /* @__PURE__ */ jsx20("path", {
             ...part(`module`),
             d: paint.path,
             fill: paint.module
           })
         }) : null
       }),
-      label ? /* @__PURE__ */ jsx19("span", {
+      label ? /* @__PURE__ */ jsx20("span", {
         ...part(`label`),
         "aria-hidden": "true",
         children: label
@@ -5564,13 +5688,13 @@ function QrScannerNative({ node, props, rootProps, emit }) {
   const host = ctx.host.qrScanner;
   const formats = qrScanFormats(props.formats);
   const formatsKey = formats.join(`,`);
-  const feedRef = useRef21(null);
+  const feedRef = useRef22(null);
   const [live, setLive] = useState18(false);
-  const emitRef = useRef21(emit);
+  const emitRef = useRef22(emit);
   emitRef.current = emit;
-  const announce = useRef21(ctx.announce);
+  const announce = useRef22(ctx.announce);
   announce.current = ctx.announce;
-  useEffect16(() => {
+  useEffect17(() => {
     const feed = feedRef.current;
     if (!host || disabled || !feed) {
       setLive(false);
@@ -5608,19 +5732,19 @@ function QrScannerNative({ node, props, rootProps, emit }) {
         role: "img",
         "aria-label": camera ? label : `${label}, ${ctx.t(`cameraUnavailable`)}`,
         children: [
-          /* @__PURE__ */ jsx19("span", {
+          /* @__PURE__ */ jsx20("span", {
             ref: feedRef,
             ...part(`feed`),
             style: { backgroundColor: qrFeedColour(feedColour) },
             "aria-hidden": "true"
           }),
-          QR_CORNERS.map((corner) => /* @__PURE__ */ jsx19("svg", {
+          QR_CORNERS.map((corner) => /* @__PURE__ */ jsx20("svg", {
             ...part(`corner`),
             "data-corner": corner,
             viewBox: `0 0 ${QR_SCANNER.cornerLength} ${QR_SCANNER.cornerLength}`,
             "aria-hidden": "true",
             focusable: "false",
-            children: /* @__PURE__ */ jsx19("path", {
+            children: /* @__PURE__ */ jsx20("path", {
               d: qrCornerPath(corner, radius),
               fill: "none",
               stroke: "currentColor",
@@ -5629,30 +5753,30 @@ function QrScannerNative({ node, props, rootProps, emit }) {
               strokeLinejoin: "round"
             })
           }, corner)),
-          camera ? /* @__PURE__ */ jsx19("span", {
+          camera ? /* @__PURE__ */ jsx20("span", {
             ...part(`scanLine`),
             "aria-hidden": "true"
           }) : /* @__PURE__ */ jsxs16("span", {
             ...part(`placeholder`),
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx19("span", {
+              /* @__PURE__ */ jsx20("span", {
                 ...part(`placeholderIcon`),
-                children: /* @__PURE__ */ jsx19(IconGlyph, {
+                children: /* @__PURE__ */ jsx20(IconGlyph, {
                   icons: ctx.host.icons,
                   name: QR_SCANNER.placeholderIcon,
                   width: QR_SCANNER.placeholderIconSize,
                   height: QR_SCANNER.placeholderIconSize
                 })
               }),
-              /* @__PURE__ */ jsx19("span", {
+              /* @__PURE__ */ jsx20("span", {
                 children: ctx.t(`cameraUnavailable`)
               })
             ]
           })
         ]
       }),
-      hint ? /* @__PURE__ */ jsx19("span", {
+      hint ? /* @__PURE__ */ jsx20("span", {
         ...part(`hint`),
         children: hint
       }) : null
@@ -5661,18 +5785,18 @@ function QrScannerNative({ node, props, rootProps, emit }) {
 }
 
 // packages/exponential-ui-react/src/natives/select.tsx
-import { useEffect as useEffect17, useId as useId6, useMemo as useMemo14, useRef as useRef22, useState as useState19 } from "react";
+import { useEffect as useEffect18, useId as useId6, useMemo as useMemo14, useRef as useRef23, useState as useState19 } from "react";
 import { Popover as PopoverPrimitive3, Select as SelectPrimitive } from "radix-ui";
 import { OVERLAY_OFFSET as OVERLAY_OFFSET3, OVERLAY_PADDING as OVERLAY_PADDING3 } from "@exponential_app/eui";
 import { boundPath as boundPath3 } from "@exponential_app/eui/web";
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var EMPTY = `\x00xui-empty`;
 var toRadix = (value) => value === `` ? EMPTY : value;
 var fromRadix = (value) => value === EMPTY ? `` : value;
 function useNativeEmptyOption(root, empty) {
-  const emptyNow = useRef22(empty);
+  const emptyNow = useRef23(empty);
   emptyNow.current = empty;
-  useEffect17(() => {
+  useEffect18(() => {
     if (!root || typeof MutationObserver === `undefined`)
       return;
     const seen = new WeakSet;
@@ -5706,7 +5830,7 @@ function SelectNative({ node, props, rootProps, emit, scope, domId }) {
   const raw = props.value;
   const rawIsArray = Array.isArray(raw);
   const [value, setValue] = useBoundState(node, scope, `value`, multiple ? asList(raw) : str(raw));
-  const triggerRef = useRef22(null);
+  const triggerRef = useRef23(null);
   const f = useField({ node, domId, props, value, focusRef: triggerRef });
   const disabled = bool(props.disabled) || Boolean(f.form?.disabled);
   const [open, setOpen] = useState19(false);
@@ -5714,7 +5838,7 @@ function SelectNative({ node, props, rootProps, emit, scope, domId }) {
   const source = str(props.source);
   const optionsBound = boundPath3(node.props, `options`, scope) !== undefined;
   const [sourced, setSourced] = useState19(null);
-  const request = useRef22(0);
+  const request = useRef23(0);
   const askSource = (q) => {
     if (!source || !ctx.host.optionSource)
       return;
@@ -5731,7 +5855,7 @@ function SelectNative({ node, props, rootProps, emit, scope, domId }) {
     else
       take(r);
   };
-  useEffect17(() => () => {
+  useEffect18(() => () => {
     request.current++;
   }, []);
   const inline = objects(props.options);
@@ -5746,7 +5870,7 @@ function SelectNative({ node, props, rootProps, emit, scope, domId }) {
     f.touch();
     emit(`change`, { value: out }, { value: out });
   };
-  useEffect17(() => {
+  useEffect18(() => {
     if (!searchable || !open)
       return;
     const t = setTimeout(() => {
@@ -5755,12 +5879,12 @@ function SelectNative({ node, props, rootProps, emit, scope, domId }) {
     }, DEBOUNCE_MS);
     return () => clearTimeout(t);
   }, [query, open, searchable, source]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!source || !ctx.host.optionSource || searchable)
       return;
     askSource(``);
   }, [source, ctx.host, searchable]);
-  const label = /* @__PURE__ */ jsx20(TextPart, {
+  const label = /* @__PURE__ */ jsx21(TextPart, {
     part: part(`label`),
     text: props.label,
     as: "label",
@@ -5796,26 +5920,26 @@ function SelectNative({ node, props, rootProps, emit, scope, domId }) {
               "aria-invalid": f.invalid || undefined,
               "aria-describedby": f.describedBy,
               children: [
-                /* @__PURE__ */ jsx20("span", {
-                  children: chosen ? /* @__PURE__ */ jsx20(SelectPrimitive.Value, {
+                /* @__PURE__ */ jsx21("span", {
+                  children: chosen ? /* @__PURE__ */ jsx21(SelectPrimitive.Value, {
                     placeholder: chosenLabel,
                     children: chosenLabel
-                  }) : /* @__PURE__ */ jsx20("span", {
+                  }) : /* @__PURE__ */ jsx21("span", {
                     ...part(`placeholder`),
                     children: placeholder
                   })
                 }),
-                /* @__PURE__ */ jsx20(SelectPrimitive.Icon, {
+                /* @__PURE__ */ jsx21(SelectPrimitive.Icon, {
                   asChild: true,
-                  children: /* @__PURE__ */ jsx20(BuiltinIcon, {
+                  children: /* @__PURE__ */ jsx21(BuiltinIcon, {
                     slot: "Select.trigger"
                   })
                 })
               ]
             }),
-            /* @__PURE__ */ jsx20(SelectPrimitive.Portal, {
+            /* @__PURE__ */ jsx21(SelectPrimitive.Portal, {
               container: ctx.portal ?? undefined,
-              children: /* @__PURE__ */ jsx20(SelectPrimitive.Content, {
+              children: /* @__PURE__ */ jsx21(SelectPrimitive.Content, {
                 ...part(`content`, open && `open`),
                 position: "popper",
                 sideOffset: OVERLAY_OFFSET3,
@@ -5824,7 +5948,7 @@ function SelectNative({ node, props, rootProps, emit, scope, domId }) {
                 style: { minWidth: `var(--radix-select-trigger-width)` },
                 children: /* @__PURE__ */ jsxs17(SelectPrimitive.Viewport, {
                   children: [
-                    options.length === 0 ? /* @__PURE__ */ jsx20("div", {
+                    options.length === 0 ? /* @__PURE__ */ jsx21("div", {
                       ...part(`empty`),
                       children: str(props.emptyText) || ctx.t(`noResults`)
                     }) : null,
@@ -5833,17 +5957,17 @@ function SelectNative({ node, props, rootProps, emit, scope, domId }) {
                       disabled: bool(o.disabled),
                       ...part(`item`, o.value === value && `selected`, bool(o.disabled) && `disabled`),
                       children: [
-                        o.icon ? /* @__PURE__ */ jsx20(IconGlyph, {
+                        o.icon ? /* @__PURE__ */ jsx21(IconGlyph, {
                           icons: ctx.host.icons,
                           name: o.icon
                         }) : null,
-                        /* @__PURE__ */ jsx20(SelectPrimitive.ItemText, {
+                        /* @__PURE__ */ jsx21(SelectPrimitive.ItemText, {
                           children: str(o.label)
                         }),
-                        /* @__PURE__ */ jsx20(SelectPrimitive.ItemIndicator, {
+                        /* @__PURE__ */ jsx21(SelectPrimitive.ItemIndicator, {
                           ...part(`check`),
                           className: `${part(`check`).className} xui-Select-check`,
-                          children: /* @__PURE__ */ jsx20(BuiltinIcon, {
+                          children: /* @__PURE__ */ jsx21(BuiltinIcon, {
                             slot: "Select.check",
                             size: 16
                           })
@@ -5856,14 +5980,14 @@ function SelectNative({ node, props, rootProps, emit, scope, domId }) {
             })
           ]
         }),
-        /* @__PURE__ */ jsx20(FieldErrors, {
+        /* @__PURE__ */ jsx21(FieldErrors, {
           part,
           field: f
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsx20(Combobox, {
+  return /* @__PURE__ */ jsx21(Combobox, {
     ...{ node, props, rootProps, part, id, listId, multiple, searchable, placeholder, options, value, commit, open, setOpen, query, setQuery, disabled, triggerRef, label, source },
     localFilter: !optionsBound && !source,
     field: f
@@ -5874,7 +5998,7 @@ function Combobox({ props, rootProps, part, id, listId, multiple, searchable, pl
   const selected = multiple ? value : value ? [value] : [];
   const chosen = options.filter((o) => selected.includes(o.value));
   const shown = useMemo14(() => query && localFilter ? options.filter((o) => str(o.label).toLowerCase().includes(query.toLowerCase())) : options, [options, query, localFilter]);
-  const listRef = useRef22(null);
+  const listRef = useRef23(null);
   const pick = (i) => {
     const o = shown[i];
     if (!o || bool(o.disabled))
@@ -5887,21 +6011,21 @@ function Combobox({ props, rootProps, part, id, listId, multiple, searchable, pl
     }
   };
   const nav = useListNavigation({ count: shown.length, isDisabled: (i) => bool(shown[i]?.disabled), labelOf: (i) => str(shown[i]?.label), onPick: pick, typeahead: !searchable });
-  useEffect17(() => {
+  useEffect18(() => {
     if (open) {
       const i = shown.findIndex((o) => selected.includes(o.value));
       nav.setActive(i >= 0 ? i : shown.findIndex((o) => !bool(o.disabled)));
     } else
       setQuery(``);
   }, [open]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!searchable || !open)
       return;
     nav.setActive(shown.findIndex((o) => !bool(o.disabled)));
   }, [query]);
   const optionId = (i) => `${listId}-${i}`;
   const activeId = nav.active >= 0 && nav.active < shown.length ? optionId(nav.active) : undefined;
-  useEffect17(() => {
+  useEffect18(() => {
     if (activeId)
       listRef.current?.querySelector(`[id="${activeId}"]`)?.scrollIntoView?.({ block: `nearest` });
   }, [activeId]);
@@ -5932,18 +6056,18 @@ function Combobox({ props, rootProps, part, id, listId, multiple, searchable, pl
               }
             },
             children: [
-              /* @__PURE__ */ jsx20("span", {
-                children: chosen.length ? chosen.map((o) => str(o.label)).join(`, `) : /* @__PURE__ */ jsx20("span", {
+              /* @__PURE__ */ jsx21("span", {
+                children: chosen.length ? chosen.map((o) => str(o.label)).join(`, `) : /* @__PURE__ */ jsx21("span", {
                   ...part(`placeholder`),
                   children: placeholder
                 })
               }),
-              /* @__PURE__ */ jsx20(BuiltinIcon, {
+              /* @__PURE__ */ jsx21(BuiltinIcon, {
                 slot: "Select.trigger"
               })
             ]
           }),
-          /* @__PURE__ */ jsx20(PopoverPrimitive3.Portal, {
+          /* @__PURE__ */ jsx21(PopoverPrimitive3.Portal, {
             container: ctx.portal ?? undefined,
             children: /* @__PURE__ */ jsxs17(PopoverPrimitive3.Content, {
               ...part(`content`, open && `open`),
@@ -5963,11 +6087,11 @@ function Combobox({ props, rootProps, part, id, listId, multiple, searchable, pl
                 searchable ? /* @__PURE__ */ jsxs17("div", {
                   className: "xui-Select-searchbox",
                   children: [
-                    /* @__PURE__ */ jsx20(BuiltinIcon, {
+                    /* @__PURE__ */ jsx21(BuiltinIcon, {
                       slot: "Select.search",
                       size: 16
                     }),
-                    /* @__PURE__ */ jsx20("input", {
+                    /* @__PURE__ */ jsx21("input", {
                       ...part(`search`),
                       className: `${part(`search`).className} xui-Select-search`,
                       role: "combobox",
@@ -5994,7 +6118,7 @@ function Combobox({ props, rootProps, part, id, listId, multiple, searchable, pl
                   className: "xui-Select-listbox",
                   onKeyDown: searchable ? undefined : nav.onKeyDown,
                   children: [
-                    shown.length === 0 ? /* @__PURE__ */ jsx20("div", {
+                    shown.length === 0 ? /* @__PURE__ */ jsx21("div", {
                       ...part(`empty`),
                       children: str(props.emptyText) || ctx.t(`noResults`)
                     }) : null,
@@ -6012,17 +6136,17 @@ function Combobox({ props, rootProps, part, id, listId, multiple, searchable, pl
                         onMouseDown: (e) => e.preventDefault(),
                         onClick: () => pick(i),
                         children: [
-                          o.icon ? /* @__PURE__ */ jsx20(IconGlyph, {
+                          o.icon ? /* @__PURE__ */ jsx21(IconGlyph, {
                             icons: ctx.host.icons,
                             name: o.icon
                           }) : null,
-                          /* @__PURE__ */ jsx20("span", {
+                          /* @__PURE__ */ jsx21("span", {
                             children: str(o.label)
                           }),
-                          isSel ? /* @__PURE__ */ jsx20("span", {
+                          isSel ? /* @__PURE__ */ jsx21("span", {
                             ...part(`check`),
                             className: `${part(`check`).className} xui-Select-check`,
-                            children: /* @__PURE__ */ jsx20(BuiltinIcon, {
+                            children: /* @__PURE__ */ jsx21(BuiltinIcon, {
                               slot: "Select.check",
                               size: 16
                             })
@@ -6037,7 +6161,7 @@ function Combobox({ props, rootProps, part, id, listId, multiple, searchable, pl
           })
         ]
       }),
-      /* @__PURE__ */ jsx20(FieldErrors, {
+      /* @__PURE__ */ jsx21(FieldErrors, {
         part,
         field
       })
@@ -6046,14 +6170,14 @@ function Combobox({ props, rootProps, part, id, listId, multiple, searchable, pl
 }
 
 // packages/exponential-ui-react/src/natives/table.tsx
-import { useCallback as useCallback9, useContext as useContext5, useEffect as useEffect18, useMemo as useMemo15, useRef as useRef23, useState as useState20 } from "react";
+import { useCallback as useCallback9, useContext as useContext5, useEffect as useEffect19, useMemo as useMemo15, useRef as useRef24, useState as useState20 } from "react";
 import { Checkbox as CheckboxPrimitive2 } from "radix-ui";
 import { tableRowKeys, WINDOW_THRESHOLD as WINDOW_THRESHOLD2 } from "@exponential_app/eui";
 import { boundPath as boundPath4, getPointer as getPointer2, setPointer as setPointer2, LITERAL_ROWS_ROOT as LITERAL_ROWS_ROOT2 } from "@exponential_app/eui/web";
 import { partClass as partClass3 } from "@exponential_app/eui/web";
 import { displayString as displayString2 } from "@exponential_app/eui";
-import { sortRows } from "@exponential_app/eui/web";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { sortRows, tableMinWidth, tableTemplate } from "@exponential_app/eui/web";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var CURRENCY_CODE = /^[A-Za-z]{3}$/;
 var cellNumber = (v) => typeof v === `number` ? v : typeof v === `string` && v.trim() !== `` ? Number(v) : NaN;
 function TableNative({ node, props, rootProps, emit, scope, domId }) {
@@ -6072,7 +6196,8 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
   const rowKeys = useMemo15(() => tableRowKeys(rows, rowKey), [rows, rowKey]);
   const keyOf = (_row, i) => rowKeys[i] ?? String(i);
   const order = useMemo15(() => sortBound ? rows.map((_, i) => i) : sortRows(rows, sort, columns.find((c) => c.key === sort?.key), ctx.locale), [rows, sort, sortBound, columns, ctx.locale]);
-  const template = [selectable === `multiple` ? `var(--xui-control-checkbox, 16px)` : null, ...columns.map((c) => c.width ? `${c.width}px` : `minmax(0, 1fr)`)].filter(Boolean).join(` `);
+  const template = tableTemplate(columns, selectable === `multiple`);
+  const minWidth = tableMinWidth(columns, selectable === `multiple`);
   const cycle = (c) => {
     const next = sort?.key === c.key && sort.direction === `asc` ? { key: c.key, direction: `desc` } : { key: c.key, direction: `asc` };
     setSort(next);
@@ -6090,9 +6215,9 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
   const [focusKey, setFocusKey] = useState20(null);
   const orderKeys = order.map((i) => keyOf(rows[i], i));
   const stopKey = focusKey !== null && orderKeys.includes(focusKey) ? focusKey : orderKeys.find((k) => selected.includes(k)) ?? orderKeys[0] ?? null;
-  const bodyRef = useRef23(null);
-  const windowRef = useRef23(null);
-  const pendingFocus = useRef23(null);
+  const bodyRef = useRef24(null);
+  const windowRef = useRef24(null);
+  const pendingFocus = useRef24(null);
   const focusRow = useCallback9((key) => {
     const k = `[role="row"][data-key="${typeof CSS !== `undefined` && CSS.escape ? CSS.escape(key) : key.replace(/"/g, `\\"`)}"]`;
     return bodyRef.current?.querySelector(`:scope > ${k}, :scope > .xui-list-window > .xui-list-item > ${k}`) ?? null;
@@ -6111,7 +6236,7 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
       windowRef.current?.scrollToIndex(clamped);
     }
   };
-  useEffect18(() => ctx.registerScroller(domId, (index, align) => {
+  useEffect19(() => ctx.registerScroller(domId, (index, align) => {
     const pos = order.indexOf(index);
     if (pos < 0)
       return;
@@ -6143,19 +6268,19 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
       case `relativeTime`:
         return missing ? `` : ctx.formatter.relativeTime(v, ctx.now());
       case `boolean`:
-        return v ? /* @__PURE__ */ jsx21(BuiltinIcon, {
+        return v ? /* @__PURE__ */ jsx22(BuiltinIcon, {
           slot: "Checkbox.check",
           size: 16
-        }) : /* @__PURE__ */ jsx21("span", {
+        }) : /* @__PURE__ */ jsx22("span", {
           className: "xui-sr-only",
           children: "—"
         });
       case `badge`:
-        return v === undefined || v === null || v === `` ? null : /* @__PURE__ */ jsx21("span", {
+        return v === undefined || v === null || v === `` ? null : /* @__PURE__ */ jsx22("span", {
           className: `${ctx.compiled.scope} ${partClass3(`Badge`, `root`)} xui-table-badge`,
           "data-xui-part": "Badge/root",
           "data-m-variant": "secondary",
-          children: /* @__PURE__ */ jsx21("span", {
+          children: /* @__PURE__ */ jsx22("span", {
             className: `${ctx.compiled.scope} ${partClass3(`Badge`, `label`)}`,
             "data-xui-part": "Badge/label",
             "data-m-variant": "secondary",
@@ -6167,7 +6292,7 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
         if (!slot)
           return null;
         const key = keyOf(row, index);
-        return /* @__PURE__ */ jsx21(RowScope, {
+        return /* @__PURE__ */ jsx22(RowScope, {
           rowsPath,
           row: rowsPath ? row : literalEdits[key] ?? row,
           rowKey: key,
@@ -6225,55 +6350,60 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
         }
       },
       children: [
-        selectable === `multiple` ? /* @__PURE__ */ jsx21("div", {
+        selectable === `multiple` ? /* @__PURE__ */ jsx22("div", {
           role: "gridcell",
           className: "xui-table-check",
-          children: /* @__PURE__ */ jsx21(CheckboxPrimitive2.Root, {
+          children: /* @__PURE__ */ jsx22(CheckboxPrimitive2.Root, {
             ...part.at(`checkbox`, key, isSel && `checked`),
             className: `${part(`checkbox`).className} xui-Checkbox-box`,
             checked: isSel,
             "aria-label": ctx.t(`selectRow`),
             onClick: (e) => e.stopPropagation(),
             onCheckedChange: (next) => select(next === true ? [...selected, key] : selected.filter((k) => k !== key)),
-            children: /* @__PURE__ */ jsx21(CheckboxPrimitive2.Indicator, {
+            children: /* @__PURE__ */ jsx22(CheckboxPrimitive2.Indicator, {
               className: "xui-Checkbox-check",
-              children: /* @__PURE__ */ jsx21(BuiltinIcon, {
+              children: /* @__PURE__ */ jsx22(BuiltinIcon, {
                 slot: "Checkbox.check"
               })
             })
           })
         }) : null,
-        columns.map((c, ci) => /* @__PURE__ */ jsx21("div", {
+        columns.map((c, ci) => /* @__PURE__ */ jsx22("div", {
           role: interactive ? `gridcell` : `cell`,
           ...part.atWith(`cell`, `${key}.${ci}`, { align: c.align ?? `start` }),
           "data-type": c.type ?? `text`,
-          children: cell(c, row, index)
+          "data-truncate": c.truncate ? `true` : undefined,
+          children: c.truncate ? /* @__PURE__ */ jsx22("span", {
+            className: "xui-table-text",
+            children: cell(c, row, index)
+          }) : cell(c, row, index)
         }, c.key))
       ]
     }, key);
   };
-  const header = /* @__PURE__ */ jsx21("div", {
+  const header = /* @__PURE__ */ jsx22("div", {
     role: "rowgroup",
     ...part(`header`),
     "data-sticky": bool(props.stickyHeader) ? `true` : undefined,
+    style: { minWidth },
     children: /* @__PURE__ */ jsxs18("div", {
       role: "row",
       "aria-rowindex": 1,
       className: "xui-table-row",
       style: { gridTemplateColumns: template },
       children: [
-        selectable === `multiple` ? /* @__PURE__ */ jsx21("div", {
+        selectable === `multiple` ? /* @__PURE__ */ jsx22("div", {
           role: "columnheader",
           className: "xui-table-check",
-          children: /* @__PURE__ */ jsx21(CheckboxPrimitive2.Root, {
+          children: /* @__PURE__ */ jsx22(CheckboxPrimitive2.Root, {
             ...part.at(`checkbox`, `header`, allSelected && `checked`),
             className: `${part(`checkbox`).className} xui-Checkbox-box`,
             checked: allSelected ? true : someSelected ? `indeterminate` : false,
             "aria-label": ctx.t(`selectAll`),
             onCheckedChange: (next) => select(next === true ? allKeys : []),
-            children: /* @__PURE__ */ jsx21(CheckboxPrimitive2.Indicator, {
+            children: /* @__PURE__ */ jsx22(CheckboxPrimitive2.Indicator, {
               className: "xui-Checkbox-check",
-              children: /* @__PURE__ */ jsx21(BuiltinIcon, {
+              children: /* @__PURE__ */ jsx22(BuiltinIcon, {
                 slot: "Checkbox.check"
               })
             })
@@ -6282,7 +6412,7 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
         columns.map((c, ci) => {
           const active = sort?.key === c.key ? sort.direction : null;
           const ariaSort = active === `asc` ? `ascending` : active === `desc` ? `descending` : c.sortable ? `none` : undefined;
-          return /* @__PURE__ */ jsx21("div", {
+          return /* @__PURE__ */ jsx22("div", {
             role: "columnheader",
             "aria-sort": ariaSort,
             ...part.atWith(`headerCell`, ci, { align: c.align ?? `start` }),
@@ -6292,19 +6422,19 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
               "aria-label": phrase(ctx, active === `asc` ? `sortByDescending` : `sortByAscending`, { name: str(c.label) }, () => `${str(c.label)}: ${ctx.t(active === `asc` ? `sortDescending` : `sortAscending`)}`),
               onClick: () => cycle(c),
               children: [
-                /* @__PURE__ */ jsx21("span", {
+                /* @__PURE__ */ jsx22("span", {
                   children: str(c.label)
                 }),
-                /* @__PURE__ */ jsx21("span", {
+                /* @__PURE__ */ jsx22("span", {
                   ...part(`sortIcon`),
                   "data-direction": active ?? undefined,
                   "aria-hidden": "true",
-                  children: active ? /* @__PURE__ */ jsx21(BuiltinIcon, {
+                  children: active ? /* @__PURE__ */ jsx22(BuiltinIcon, {
                     slot: `Table.sortIcon.${active}`
                   }) : null
                 })
               ]
-            }) : /* @__PURE__ */ jsx21("span", {
+            }) : /* @__PURE__ */ jsx22("span", {
               children: str(c.label)
             })
           }, c.key);
@@ -6323,19 +6453,20 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
     "data-windowed": windowed ? `true` : undefined,
     children: [
       header,
-      /* @__PURE__ */ jsx21("div", {
+      /* @__PURE__ */ jsx22("div", {
         role: "rowgroup",
         ...part(`body`),
         className: `${part(`body`).className} xui-table-body`,
+        style: { minWidth },
         ref: bodyRef,
-        children: rows.length === 0 ? /* @__PURE__ */ jsx21("div", {
+        children: rows.length === 0 ? /* @__PURE__ */ jsx22("div", {
           role: "row",
-          children: /* @__PURE__ */ jsx21("div", {
+          children: /* @__PURE__ */ jsx22("div", {
             role: "cell",
             ...part(`empty`),
             children: str(props.emptyText) || ctx.t(`noResults`)
           })
-        }) : windowed ? /* @__PURE__ */ jsx21(WindowedList, {
+        }) : windowed ? /* @__PURE__ */ jsx22(WindowedList, {
           ref: windowRef,
           count: order.length,
           itemKey: (i) => keyOf(rows[order[i]], order[i]),
@@ -6344,12 +6475,12 @@ function TableNative({ node, props, rootProps, emit, scope, domId }) {
           renderItem: renderRow
         }) : order.map((_, pos) => renderRow(pos))
       }),
-      caption ? /* @__PURE__ */ jsx21("div", {
+      caption ? /* @__PURE__ */ jsx22("div", {
         ...part(`caption`),
         id: `${domId}.caption`,
         children: caption
       }) : null,
-      selectable === `multiple` && selected.length ? /* @__PURE__ */ jsx21("span", {
+      selectable === `multiple` && selected.length ? /* @__PURE__ */ jsx22("span", {
         className: "xui-sr-only",
         "aria-live": "polite",
         children: ctx.t(`selectedCount`, { count: selected.length })
@@ -6373,13 +6504,13 @@ function RowScope({ rowsPath, row, rowKey, index, tableId, node, onLiteralEdit }
     };
     return deriveContext(ctx, { setData }, data);
   }, [ctx, rowsPath, literalPath, row, rowKey, onLiteralEdit]);
-  return /* @__PURE__ */ jsx21(SurfaceContext.Provider, {
+  return /* @__PURE__ */ jsx22(SurfaceContext.Provider, {
     value: view,
-    children: /* @__PURE__ */ jsx21(ScopeContext.Provider, {
+    children: /* @__PURE__ */ jsx22(ScopeContext.Provider, {
       value: rowsPath ? `${rowsPath}/${index}` : literalPath,
-      children: /* @__PURE__ */ jsx21(InstanceContext.Provider, {
+      children: /* @__PURE__ */ jsx22(InstanceContext.Provider, {
         value: `${outer}.${rowKey}`,
-        children: /* @__PURE__ */ jsx21(NodeView, {
+        children: /* @__PURE__ */ jsx22(NodeView, {
           node
         })
       })
@@ -6391,25 +6522,25 @@ function RowScope({ rowsPath, row, rowKey, index, tableId, node, onLiteralEdit }
 import { displayString as displayString3 } from "@exponential_app/eui";
 
 // packages/exponential-ui-react/src/markdown.tsx
-import { Fragment as Fragment6, createElement, useMemo as useMemo16 } from "react";
+import { Fragment as Fragment7, createElement, useMemo as useMemo16 } from "react";
 import { linkHref as linkHref3, mediaRequestOf, parseMarkdown } from "@exponential_app/eui/web";
 import { MAX_LINK_NESTING, MAX_LINK_DEST, MAX_BLOCK_NESTING, linkAt, wholeImage, parseList } from "@exponential_app/eui/web";
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function MarkdownImage({ host, src, alt }) {
   const media = useMediaSource(host, src);
   if (mediaRequestOf(host, src) === null)
-    return alt ? /* @__PURE__ */ jsx22("p", {
+    return alt ? /* @__PURE__ */ jsx23("p", {
       className: "xui-Markdown-paragraph",
       children: alt
     }) : null;
-  return /* @__PURE__ */ jsx22("div", {
+  return /* @__PURE__ */ jsx23("div", {
     className: "xui-Markdown-image",
     role: "img",
     "aria-label": alt,
-    children: media.url && !media.error ? /* @__PURE__ */ jsx22("img", {
+    children: media.url && !media.error ? /* @__PURE__ */ jsx23("img", {
       alt: "",
       src: media.url
-    }) : /* @__PURE__ */ jsx22("span", {
+    }) : /* @__PURE__ */ jsx23("span", {
       className: "xui-Markdown-imageAlt",
       children: alt
     })
@@ -6420,7 +6551,7 @@ function MarkdownLink({ host, href, children }) {
     e.preventDefault();
     host.openUrl(href);
   } : undefined;
-  return /* @__PURE__ */ jsx22("a", {
+  return /* @__PURE__ */ jsx23("a", {
     className: "xui-Markdown-link",
     href,
     target: "_blank",
@@ -6435,30 +6566,30 @@ function inline(nodes, host) {
       return n;
     switch (n.type) {
       case `code`:
-        return /* @__PURE__ */ jsx22("code", {
+        return /* @__PURE__ */ jsx23("code", {
           className: "xui-Markdown-code",
           children: n.text
         }, k);
       case `strong`:
-        return /* @__PURE__ */ jsx22("strong", {
+        return /* @__PURE__ */ jsx23("strong", {
           children: inline(n.children, host)
         }, k);
       case `em`:
-        return /* @__PURE__ */ jsx22("em", {
+        return /* @__PURE__ */ jsx23("em", {
           children: inline(n.children, host)
         }, k);
       case `del`:
-        return /* @__PURE__ */ jsx22("del", {
+        return /* @__PURE__ */ jsx23("del", {
           children: n.text
         }, k);
       case `link`: {
         const href = linkHref3(host, n.dest);
         const label = inline(n.children, host);
-        return href ? /* @__PURE__ */ jsx22(MarkdownLink, {
+        return href ? /* @__PURE__ */ jsx23(MarkdownLink, {
           host,
           href,
           children: label
-        }, k) : /* @__PURE__ */ jsx22("span", {
+        }, k) : /* @__PURE__ */ jsx23("span", {
           className: "xui-Markdown-link",
           "data-denied": "",
           children: label
@@ -6472,49 +6603,49 @@ function renderList(list, host, key) {
     className: "xui-Markdown-listItem",
     "data-task": item.task === undefined ? undefined : item.task ? `done` : `todo`,
     children: [
-      item.task === undefined ? null : /* @__PURE__ */ jsx22("input", {
+      item.task === undefined ? null : /* @__PURE__ */ jsx23("input", {
         type: "checkbox",
         checked: item.task,
         readOnly: true
       }),
       item.task === undefined ? null : ` `,
       inline(item.content, host),
-      item.children.map((c, ci) => /* @__PURE__ */ jsx22(Fragment6, {
+      item.children.map((c, ci) => /* @__PURE__ */ jsx23(Fragment7, {
         children: renderList(c, host, ci)
       }, `c${ci}`))
     ]
   }, n));
-  return list.ordered ? /* @__PURE__ */ jsx22("ol", {
+  return list.ordered ? /* @__PURE__ */ jsx23("ol", {
     children: items
-  }, key) : /* @__PURE__ */ jsx22("ul", {
+  }, key) : /* @__PURE__ */ jsx23("ul", {
     children: items
   }, key);
 }
 function block(b, host, key) {
   switch (b.type) {
     case `paragraph`:
-      return /* @__PURE__ */ jsx22("p", {
+      return /* @__PURE__ */ jsx23("p", {
         className: "xui-Markdown-paragraph",
         children: inline(b.children, host)
       }, key);
     case `image`:
-      return /* @__PURE__ */ jsx22(MarkdownImage, {
+      return /* @__PURE__ */ jsx23(MarkdownImage, {
         host,
         src: b.src,
         alt: b.alt
       }, key);
     case `codeBlock`:
-      return /* @__PURE__ */ jsx22("pre", {
+      return /* @__PURE__ */ jsx23("pre", {
         className: "xui-Markdown-codeBlock",
         "data-lang": b.lang,
-        children: /* @__PURE__ */ jsx22("code", {
+        children: /* @__PURE__ */ jsx23("code", {
           children: b.text
         })
       }, key);
     case `heading`:
       return createElement(`h${Math.min(b.level, 6)}`, { key, className: `xui-Markdown-heading`, "data-level": b.level }, ...inline(b.children, host));
     case `quote`:
-      return /* @__PURE__ */ jsx22("blockquote", {
+      return /* @__PURE__ */ jsx23("blockquote", {
         className: "xui-Markdown-quote",
         children: blocks(b.children, host)
       }, key);
@@ -6524,17 +6655,17 @@ function block(b, host, key) {
       return /* @__PURE__ */ jsxs19("table", {
         className: "xui-Markdown-table",
         children: [
-          /* @__PURE__ */ jsx22("thead", {
-            children: /* @__PURE__ */ jsx22("tr", {
-              children: b.head.map((h, c) => /* @__PURE__ */ jsx22("th", {
+          /* @__PURE__ */ jsx23("thead", {
+            children: /* @__PURE__ */ jsx23("tr", {
+              children: b.head.map((h, c) => /* @__PURE__ */ jsx23("th", {
                 style: b.align[c] ? { textAlign: b.align[c] } : undefined,
                 children: inline(h, host)
               }, c))
             })
           }),
-          /* @__PURE__ */ jsx22("tbody", {
-            children: b.rows.map((r, ri) => /* @__PURE__ */ jsx22("tr", {
-              children: r.map((cell, c) => /* @__PURE__ */ jsx22("td", {
+          /* @__PURE__ */ jsx23("tbody", {
+            children: b.rows.map((r, ri) => /* @__PURE__ */ jsx23("tr", {
+              children: r.map((cell, c) => /* @__PURE__ */ jsx23("td", {
                 style: b.align[c] ? { textAlign: b.align[c] } : undefined,
                 children: inline(cell, host)
               }, c))
@@ -6543,11 +6674,11 @@ function block(b, host, key) {
         ]
       }, key);
     case `rule`:
-      return /* @__PURE__ */ jsx22("hr", {}, key);
+      return /* @__PURE__ */ jsx23("hr", {}, key);
   }
 }
 function blocks(tree, host) {
-  return tree.map((b, k) => /* @__PURE__ */ jsx22(Fragment6, {
+  return tree.map((b, k) => /* @__PURE__ */ jsx23(Fragment7, {
     children: block(b, host, k)
   }, k));
 }
@@ -6556,14 +6687,14 @@ function renderMarkdown(text, host = {}) {
 }
 function BuiltinMarkdown({ text, className, host }) {
   const tree = useMemo16(() => renderMarkdown(text, host), [text, host]);
-  return /* @__PURE__ */ jsx22("div", {
+  return /* @__PURE__ */ jsx23("div", {
     className: className ? `xui-md ${className}` : `xui-md`,
     children: tree
   });
 }
 
 // packages/exponential-ui-react/src/natives/text.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function TextNative({ props, rootProps }) {
   const lines = num(props.lines, 0);
   const align = props.align === `end` ? `end` : props.align === `center` ? `center` : props.align === `start` ? `start` : undefined;
@@ -6571,7 +6702,7 @@ function TextNative({ props, rootProps }) {
   if (lines > 1)
     style.WebkitLineClamp = lines;
   const live = props.live === `polite` || props.live === `assertive` ? props.live : undefined;
-  return /* @__PURE__ */ jsx23("span", {
+  return /* @__PURE__ */ jsx24("span", {
     ...rootProps,
     "aria-live": live,
     "aria-atomic": live ? true : undefined,
@@ -6588,14 +6719,14 @@ function MarkdownNative({ props, rootProps }) {
   const text = displayString3(props.text);
   const Host = ctx.host.Markdown;
   const lines = num(props.lines, 0);
-  return /* @__PURE__ */ jsx23("div", {
+  return /* @__PURE__ */ jsx24("div", {
     ...rootProps,
     "data-lines": lines > 0 ? lines : undefined,
     style: mergeStyle(rootProps, lines > 0 ? { WebkitLineClamp: lines } : undefined),
-    children: Host ? /* @__PURE__ */ jsx23(Host, {
+    children: Host ? /* @__PURE__ */ jsx24(Host, {
       text,
       className: "xui-md"
-    }) : /* @__PURE__ */ jsx23(BuiltinMarkdown, {
+    }) : /* @__PURE__ */ jsx24(BuiltinMarkdown, {
       text,
       host: ctx.host
     })
@@ -6605,18 +6736,190 @@ function IconNative({ props, rootProps }) {
   const ctx = useSurfaceContext();
   const name = str(props.name, `ui-icon-placeholder`);
   const label = str(props.label);
-  return /* @__PURE__ */ jsx23("span", {
+  return /* @__PURE__ */ jsx24("span", {
     ...rootProps,
     role: label ? `img` : undefined,
     "aria-label": label || undefined,
     "aria-hidden": label ? undefined : true,
-    children: /* @__PURE__ */ jsx23(IconGlyph, {
+    children: /* @__PURE__ */ jsx24(IconGlyph, {
       icons: ctx.host.icons,
       name
     })
   });
 }
 
+// packages/exponential-ui-react/src/natives/zoomable-image.tsx
+import { useEffect as useEffect20, useMemo as useMemo17, useState as useState21 } from "react";
+import { DropdownMenu as MenuPrimitive2 } from "radix-ui";
+import { MEDIA_INTRINSIC_WIDTH as MEDIA_INTRINSIC_WIDTH2, OVERLAY_OFFSET as OVERLAY_OFFSET4, OVERLAY_PADDING as OVERLAY_PADDING4, ZOOM } from "@exponential_app/eui";
+import { ZOOMABLE_IMAGE_NATIVE_TRANSITION, zoomBoxAspect, zoomableImageLayout } from "@exponential_app/eui/web/primitives";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+var LAYOUT = zoomableImageLayout(ZOOM.pill);
+var positive = (v) => typeof v === `number` && Number.isFinite(v) && v > 0 ? v : undefined;
+function ZoomableImageNative({ node, props, rootProps, emit, scope }) {
+  const ctx = useSurfaceContext();
+  const part = useParts(node, props);
+  const menuNode = useMemo17(() => ({ id: `${node.id}.menu`, component: `Menu`, props: {}, children: [] }), [node.id]);
+  const menuPart = useParts(menuNode, menuNode.props);
+  const src = str(props.src);
+  const alt = str(props.alt);
+  const controls = str(props.controls, `auto`);
+  const media = useMediaSource(ctx.host, src);
+  const [, setScale] = useBoundState(node, scope, `scale`, positive(props.scale));
+  const zoom = useZoomableImage2({
+    src: media.url,
+    naturalWidth: positive(props.naturalWidth),
+    naturalHeight: positive(props.naturalHeight),
+    initial: str(props.initial, `auto`),
+    maxScale: positive(props.maxScale),
+    scale: positive(props.scale),
+    controls,
+    transition: ctx.reducedMotion ? null : ZOOMABLE_IMAGE_NATIVE_TRANSITION,
+    onZoom: (scale, atFit) => {
+      setScale(scale);
+      emit(`zoom`, { scale, atFit }, { scale });
+    },
+    onTap: () => void emit(`tap`)
+  });
+  const [menuOpen, setMenuOpen] = useState21(false);
+  useEffect20(() => zoom.controller.current?.holdPill(menuOpen), [menuOpen]);
+  const styled = node.style !== undefined && (node.style.height !== undefined || node.style.aspectRatio !== undefined);
+  const aspect = zoomBoxAspect(ZOOM_MATH2, zoom.natural, styled);
+  const items = menuOpen ? zoom.menuItems(ctx.t(`zoomFit`)).map((item, i) => ({ kind: `checkbox`, label: item.label, value: String(i), checked: item.checked })) : [];
+  const choose = (event, payload) => {
+    if (event !== `select`)
+      return;
+    const c = zoom.controller.current;
+    const f = c?.frame();
+    const picked = c && f ? zoom.menuItems(ctx.t(`zoomFit`))[num(payload?.value, -1)] : undefined;
+    setMenuOpen(false);
+    if (!c || !picked)
+      return;
+    if (picked.scale === null)
+      c.rest();
+    else
+      c.zoomScale(picked.scale);
+  };
+  const { pill } = zoom;
+  return /* @__PURE__ */ jsxs20("div", {
+    ...rootProps,
+    ref: zoom.rootRef,
+    role: "group",
+    "aria-label": alt || undefined,
+    tabIndex: 0,
+    style: mergeStyle(rootProps, { ...LAYOUT.root, ...aspect !== null ? { aspectRatio: String(aspect) } : {} }),
+    children: [
+      /* @__PURE__ */ jsx25("img", {
+        ...part(`image`),
+        ref: zoom.imageRef,
+        src: media.url || undefined,
+        alt,
+        draggable: false,
+        loading: "lazy",
+        decoding: "async",
+        style: { ...LAYOUT.image, ...zoom.natural ? { width: zoom.natural.width, height: zoom.natural.height } : {} },
+        onLoad: zoom.onImageLoad
+      }),
+      /* @__PURE__ */ jsx25("svg", {
+        className: "xui-media-sizer",
+        "aria-hidden": "true",
+        width: MEDIA_INTRINSIC_WIDTH2,
+        height: 1
+      }),
+      controls !== `none` ? /* @__PURE__ */ jsxs20("div", {
+        ...part(`pill`),
+        ref: zoom.pillRef,
+        role: "toolbar",
+        "data-state": zoom.pillVisible ? `open` : `closed`,
+        style: zoom.pillVisible ? LAYOUT.pill : { ...LAYOUT.pill, ...LAYOUT.pillHidden },
+        children: [
+          /* @__PURE__ */ jsx25("button", {
+            type: "button",
+            ...part(`zoomOut`, pill.atMin && `disabled`),
+            style: LAYOUT.button,
+            "aria-label": ctx.t(`zoomOut`),
+            disabled: pill.atMin,
+            onClick: () => zoom.controller.current?.step(-1),
+            children: /* @__PURE__ */ jsx25(BuiltinIcon, {
+              slot: "ZoomableImage.zoomOut",
+              size: 16
+            })
+          }),
+          /* @__PURE__ */ jsxs20(MenuPrimitive2.Root, {
+            open: menuOpen,
+            onOpenChange: setMenuOpen,
+            dir: ctx.direction,
+            children: [
+              /* @__PURE__ */ jsx25(MenuPrimitive2.Trigger, {
+                asChild: true,
+                children: /* @__PURE__ */ jsx25("button", {
+                  type: "button",
+                  ...part(`percent`, menuOpen && `open`),
+                  style: LAYOUT.percent,
+                  "aria-label": ctx.t(`zoomLevel`),
+                  children: pill.percent
+                })
+              }),
+              /* @__PURE__ */ jsx25(MenuPrimitive2.Portal, {
+                container: ctx.portal ?? undefined,
+                children: /* @__PURE__ */ jsx25(MenuPrimitive2.Content, {
+                  ...menuPart(`content`, menuOpen && `open`),
+                  side: "top",
+                  align: "center",
+                  sideOffset: OVERLAY_OFFSET4,
+                  collisionPadding: OVERLAY_PADDING4,
+                  "data-xui-overlay": "Menu",
+                  "data-open-on": "press",
+                  children: /* @__PURE__ */ jsx25(MenuItems, {
+                    ns: MenuPrimitive2,
+                    items,
+                    rawItems: undefined,
+                    part: menuPart,
+                    overlay: "Menu",
+                    emit: choose,
+                    scope,
+                    path: "",
+                    close: () => setMenuOpen(false)
+                  })
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx25("button", {
+            type: "button",
+            ...part(`zoomIn`, pill.atMax && `disabled`),
+            style: LAYOUT.button,
+            "aria-label": ctx.t(`zoomIn`),
+            disabled: pill.atMax,
+            onClick: () => zoom.controller.current?.step(1),
+            children: /* @__PURE__ */ jsx25(BuiltinIcon, {
+              slot: "ZoomableImage.zoomIn",
+              size: 16
+            })
+          }),
+          /* @__PURE__ */ jsx25("span", {
+            ...part(`divider`),
+            "aria-hidden": "true",
+            style: LAYOUT.divider
+          }),
+          /* @__PURE__ */ jsx25("button", {
+            type: "button",
+            ...part(`fit`, pill.atRest && `selected`),
+            style: LAYOUT.button,
+            "aria-label": ctx.t(`zoomToFit`),
+            "aria-pressed": pill.atRest,
+            onClick: () => zoom.controller.current?.rest(),
+            children: /* @__PURE__ */ jsx25(BuiltinIcon, {
+              slot: "ZoomableImage.fit",
+              size: 16
+            })
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+
 // packages/exponential-ui-react/src/natives/index.ts
 var NATIVES = {
   Box: BoxNative,
@@ -6626,6 +6929,7 @@ var NATIVES = {
   Markdown: MarkdownNative,
   CodeBlock: CodeBlockNative,
   Image: ImageNative,
+  ZoomableImage: ZoomableImageNative,
   Icon: IconNative,
   Video: VideoNative,
   AudioPlayer: AudioPlayerNative,
@@ -6645,6 +6949,7 @@ var NATIVES = {
   Spinner: SpinnerNative,
   Skeleton: SkeletonNative,
   VoiceWave: VoiceWaveNative,
+  Motion: MotionNative,
   Table: TableNative,
   Chart: ChartNative,
   Button: ButtonNative,
@@ -6675,7 +6980,7 @@ var NATIVE_NAMES = Object.keys(NATIVES);
 
 // packages/exponential-ui-react/src/node-view.tsx
 import { cssValue, isMacroComponent, partClass as partClass4, propAttribute as propAttribute2 } from "@exponential_app/eui/web";
-import { jsx as jsx24, jsxs as jsxs20, Fragment as Fragment8 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21, Fragment as Fragment9 } from "react/jsx-runtime";
 var CONTAINERS = new Set([`Box`, `List`]);
 function styleIdOf(node) {
   return node.styleId ?? node.id;
@@ -6683,7 +6988,7 @@ function styleIdOf(node) {
 function useRootProps(node, props, domId = node.id, recipeProps, style) {
   const ctx = useSurfaceContext();
   const scope = useContext6(ScopeContext);
-  return useMemo17(() => {
+  return useMemo18(() => {
     const macros = extensionMacroNames(ctx.extensions);
     const classes = [`xui-el`, nodeClass(styleIdOf(node)), ctx.compiled.scope, partClass4(node.component, `root`)];
     const attrs = {};
@@ -6778,13 +7083,13 @@ var NodeView = memo2(function NodeView({ node }) {
     return null;
   const own = ownDirection(node, ctx);
   if (own && own !== ctx.direction)
-    return /* @__PURE__ */ jsx24(DirectedNode, {
+    return /* @__PURE__ */ jsx26(DirectedNode, {
       node,
       scope,
       direction: own,
       live
     });
-  return /* @__PURE__ */ jsx24(BoundNode, {
+  return /* @__PURE__ */ jsx26(BoundNode, {
     node,
     scope,
     live
@@ -6798,10 +7103,10 @@ function ownDirection(node, ctx) {
 }
 function DirectedNode({ node, scope, direction, live }) {
   const ctx = useSurfaceContext();
-  const value = useMemo17(() => deriveContext(ctx, { direction }), [ctx, direction]);
-  return /* @__PURE__ */ jsx24(SurfaceContext.Provider, {
+  const value = useMemo18(() => deriveContext(ctx, { direction }), [ctx, direction]);
+  return /* @__PURE__ */ jsx26(SurfaceContext.Provider, {
     value,
-    children: /* @__PURE__ */ jsx24(BoundNode, {
+    children: /* @__PURE__ */ jsx26(BoundNode, {
       node,
       scope,
       live
@@ -6813,8 +7118,8 @@ var BoundNode = memo2(function BoundNode({ node, scope, live }) {
   const instance = useContext6(InstanceContext);
   const domId = `${node.id}${instance}`;
   const data = ctx.data;
-  const rctx = useMemo17(() => resolveContextOf(ctx, scope), [ctx, scope, data, live]);
-  const props = useMemo17(() => {
+  const rctx = useMemo18(() => resolveContextOf(ctx, scope), [ctx, scope, data, live]);
+  const props = useMemo18(() => {
     const out = resolveNodeProps(node.component, node.props, rctx, ctx.extensionDefs);
     for (const name of responsiveProps(node.component, ctx.extensionDefs)) {
       const v = out[name];
@@ -6823,8 +7128,8 @@ var BoundNode = memo2(function BoundNode({ node, scope, live }) {
     }
     return out;
   }, [node.props, node.component, rctx, ctx.extensionDefs, ctx.breakpoint]);
-  const recipeProps = useMemo17(() => node.recipe ? resolveValue(node.recipe.props, rctx) : undefined, [node.recipe, rctx]);
-  const dynamicStyle = useMemo17(() => {
+  const recipeProps = useMemo18(() => node.recipe ? resolveValue(node.recipe.props, rctx) : undefined, [node.recipe, rctx]);
+  const dynamicStyle = useMemo18(() => {
     const entries = dynamicStyleEntries(node.style);
     if (entries.length === 0)
       return;
@@ -6842,30 +7147,30 @@ var BoundNode = memo2(function BoundNode({ node, scope, live }) {
   const Painter = Override ?? Native ?? NATIVES[UNKNOWN_COMPONENT];
   const unknown = node.component === UNKNOWN_COMPONENT || !Native && !Override;
   const onUnknown = ctx.host.onUnknown;
-  useEffect19(() => {
+  useEffect21(() => {
     if (unknown)
       onUnknown?.(node);
   }, [unknown, onUnknown, node]);
   if (ctx.measure && !CONTAINERS.has(node.component)) {
     const size = ctx.measure(node);
     if (size) {
-      return /* @__PURE__ */ jsx24("div", {
+      return /* @__PURE__ */ jsx26("div", {
         className: `xui-el ${nodeClass(node.id)} xui-leaf`,
         "data-xui-id": domId,
         "data-xui-c": node.component,
-        children: /* @__PURE__ */ jsx24("div", {
+        children: /* @__PURE__ */ jsx26("div", {
           className: "xui-measured",
           style: { width: size.w, height: size.h }
         })
       });
     }
   }
-  const children = /* @__PURE__ */ jsxs20(Fragment8, {
+  const children = /* @__PURE__ */ jsxs21(Fragment9, {
     children: [
-      node.children.map((child) => /* @__PURE__ */ jsx24(NodeView, {
+      node.children.map((child) => /* @__PURE__ */ jsx26(NodeView, {
         node: child
       }, child.id)),
-      node.template ? /* @__PURE__ */ jsx24(TemplateChildren, {
+      node.template ? /* @__PURE__ */ jsx26(TemplateChildren, {
         node,
         scope
       }) : null
@@ -6873,18 +7178,18 @@ var BoundNode = memo2(function BoundNode({ node, scope, live }) {
   });
   const slots = {};
   for (const [name, slot] of Object.entries(node.slots ?? {}))
-    slots[name] = /* @__PURE__ */ jsx24(NodeView, {
+    slots[name] = /* @__PURE__ */ jsx26(NodeView, {
       node: slot
     }, slot.id);
   const painterProps = { node, props, theme: ctx.theme, mode: ctx.mode, tokens: ctx.theme.tokens, children, slots, emit, rootProps, scope, domId };
   if (UNGUARDED.has(node.component) && !Override)
-    return /* @__PURE__ */ jsx24(Painter, {
+    return /* @__PURE__ */ jsx26(Painter, {
       ...painterProps
     });
-  return /* @__PURE__ */ jsx24(PaintBoundary, {
+  return /* @__PURE__ */ jsx26(PaintBoundary, {
     node,
     domId,
-    children: /* @__PURE__ */ jsx24(Painter, {
+    children: /* @__PURE__ */ jsx26(Painter, {
       ...painterProps
     })
   });
@@ -6944,7 +7249,7 @@ class PaintBoundary extends Component {
   render() {
     const { node, domId, children } = this.props;
     if (this.state.failed)
-      return /* @__PURE__ */ jsx24("div", {
+      return /* @__PURE__ */ jsx26("div", {
         className: `xui-el ${nodeClass(node.id)}`,
         "data-xui-id": domId,
         "data-xui-c": node.component,
@@ -6970,11 +7275,11 @@ function templateItems(ctx, node, scope) {
 var itemInstance = (instance, key) => `${instance}.${instanceSegment(key)}`;
 function TemplateItemView({ tpl, item }) {
   const instance = useContext6(InstanceContext);
-  return /* @__PURE__ */ jsx24(ScopeContext.Provider, {
+  return /* @__PURE__ */ jsx26(ScopeContext.Provider, {
     value: item.path,
-    children: /* @__PURE__ */ jsx24(InstanceContext.Provider, {
+    children: /* @__PURE__ */ jsx26(InstanceContext.Provider, {
       value: itemInstance(instance, item.key),
-      children: /* @__PURE__ */ jsx24(NodeView, {
+      children: /* @__PURE__ */ jsx26(NodeView, {
         node: tpl
       })
     })
@@ -6983,24 +7288,24 @@ function TemplateItemView({ tpl, item }) {
 function TemplateChildren({ node, scope }) {
   const ctx = useSurfaceContext();
   const t = templateItems(ctx, node, scope);
-  const last = useRef24({ keys: new Set, generation: 0 });
+  const last = useRef25({ keys: new Set, generation: 0 });
   const keys = t ? t.items.map((item) => item.key) : [];
   let generation = last.current.generation;
   if (keys.length > 0 && last.current.keys.size > 0 && !keys.some((k) => last.current.keys.has(k)))
     generation++;
-  useEffect19(() => {
+  useEffect21(() => {
     last.current = { keys: new Set(keys), generation };
   });
   if (!t)
     return null;
-  return /* @__PURE__ */ jsx24(TemplateBlock, {
+  return /* @__PURE__ */ jsx26(TemplateBlock, {
     items: t.items,
     tpl: t.tpl
   }, generation);
 }
 function TemplateBlock({ items, tpl }) {
-  return /* @__PURE__ */ jsx24(Fragment8, {
-    children: items.map((item) => /* @__PURE__ */ jsx24(TemplateItemView, {
+  return /* @__PURE__ */ jsx26(Fragment9, {
+    children: items.map((item) => /* @__PURE__ */ jsx26(TemplateItemView, {
       tpl,
       item
     }, item.key))
@@ -7011,7 +7316,7 @@ function TemplateBlock({ items, tpl }) {
 import { openAllowed } from "@exponential_app/eui/web";
 import { compiledTheme } from "@exponential_app/eui/web";
 import { layoutSize as layoutSize2 } from "@exponential_app/eui/web";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var resolvedCache = new Map;
 function resolveThemeInput(input) {
   if (!input)
@@ -7055,7 +7360,7 @@ function surfaceTheme(theme, density, highContrast) {
 var EMPTY2 = [];
 var NO_TEMPLATES = {};
 var EMPTY_HOST = {};
-var useIsoLayoutEffect3 = typeof window === `undefined` ? useEffect20 : useLayoutEffect6;
+var useIsoLayoutEffect3 = typeof window === `undefined` ? useEffect22 : useLayoutEffect7;
 function surfaceLayout(box, inputs) {
   const breakpoint = activeBreakpoint(box.width, inputs.breakpoints);
   const height = inputs.viewportHeight ?? box.height;
@@ -7208,30 +7513,30 @@ function ExponentialSurface({
   const reducedMotion = useMediaQuery(`(prefers-reduced-motion: reduce)`);
   const hover = useMediaQuery(`(hover: hover)`, true);
   const mode = modeSetting === `system` ? resolveMode(`system`, prefersDark) : modeSetting;
-  const resolution = useMemo18(() => resolveThemeInput(themeProp), [themeProp]);
+  const resolution = useMemo19(() => resolveThemeInput(themeProp), [themeProp]);
   const baseTheme = resolution.theme;
   const onThemeIssues = host?.onThemeIssues;
-  useEffect20(() => {
+  useEffect22(() => {
     if (resolution.issues.length > 0)
       onThemeIssues?.(resolution.issues);
   }, [resolution, onThemeIssues]);
   const theme = surfaceTheme(baseTheme, density, contrast === `high` || contrast === `system` && prefersContrast);
   const global = useSyncExternalStore3(subscribeExtensions, registeredExtensions, registeredExtensions);
-  const extensions = useMemo18(() => [...global, ...extensionsProp], [global, extensionsProp]);
-  const extensionDefs = useMemo18(() => extensionCatalogs(extensions), [extensions]);
-  const macros = useMemo18(() => extensionMacroNames(extensions), [extensions]);
-  const compiled = useMemo18(() => compiledTheme(theme, { extensionMacros: macros }), [theme, macros]);
+  const extensions = useMemo19(() => [...global, ...extensionsProp], [global, extensionsProp]);
+  const extensionDefs = useMemo19(() => extensionCatalogs(extensions), [extensions]);
+  const macros = useMemo19(() => extensionMacroNames(extensions), [extensions]);
+  const compiled = useMemo19(() => compiledTheme(theme, { extensionMacros: macros }), [theme, macros]);
   const direction = directionProp ?? textDirection(locale);
-  const strings = useMemo18(() => stringTable(stringOverrides ?? {}), [stringOverrides]);
+  const strings = useMemo19(() => stringTable(stringOverrides ?? {}), [stringOverrides]);
   const t = useCallback11((id, params) => formatString(strings[id] ?? id, params ?? {}), [strings]);
-  const [localData, setLocalData] = useState21(dataProp ?? {});
-  const [seenData, setSeenData] = useState21(dataProp);
+  const [localData, setLocalData] = useState22(dataProp ?? {});
+  const [seenData, setSeenData] = useState22(dataProp);
   if (dataProp !== seenData && !sameData(dataProp, seenData)) {
     setSeenData(dataProp);
     setLocalData(dataProp ?? {});
   }
   const data = surface ? surface.data : localData;
-  const latestSurface = useRef25(surface);
+  const latestSurface = useRef26(surface);
   latestSurface.current = surface;
   const setData = useCallback11((pointer, value) => {
     const current = latestSurface.current;
@@ -7240,40 +7545,40 @@ function ExponentialSurface({
     else
       setLocalData((cur) => setPointer3(cur, pointer, value));
   }, []);
-  const lastTree = useRef25({ root: null, templates: NO_TEMPLATES });
+  const lastTree = useRef26({ root: null, templates: NO_TEMPLATES });
   const rawRoot = surface ? surface.root : rootProp ?? null;
-  const root = useMemo18(() => lastTree.current.root = share(lastTree.current.root, rawRoot), [rawRoot]);
+  const root = useMemo19(() => lastTree.current.root = share(lastTree.current.root, rawRoot), [rawRoot]);
   const rawTemplates = (surface ? surface.templates : templatesProp) ?? NO_TEMPLATES;
-  const templates = useMemo18(() => lastTree.current.templates = share(lastTree.current.templates, rawTemplates), [rawTemplates]);
+  const templates = useMemo19(() => lastTree.current.templates = share(lastTree.current.templates, rawTemplates), [rawTemplates]);
   const templateNode = useCallback11((componentId) => templates[componentId], [templates]);
-  const templateRoots = useMemo18(() => Object.values(templates), [templates]);
-  const lastBudget = useRef25(undefined);
-  const budget = useMemo18(() => {
+  const templateRoots = useMemo19(() => Object.values(templates), [templates]);
+  const lastBudget = useRef26(undefined);
+  const budget = useMemo19(() => {
     const next = root ? templateBudget(root, data, templateNode) : undefined;
     if (sameBudget(lastBudget.current, next))
       return lastBudget.current;
     return lastBudget.current = next;
   }, [root, data, templateNode]);
-  useEffect20(() => {
+  useEffect22(() => {
     if (budget?.issue)
       console.warn(`[exponential-ui] ${surfaceId}: ${budget.issue.id}: ${budget.issue.message}`);
   }, [surfaceId, budget?.issue?.id, budget?.issue?.message]);
-  useEffect20(() => {
+  useEffect22(() => {
     if (IS_DEV && root)
       warnMissingTemplates(surfaceId, root, templates);
   }, [surfaceId, root, templates]);
-  const sheet = useMemo18(() => root ? compileNodeSheet([root, ...templateRoots], surfaceId, theme) : { css: ``, queries: [], chunks: NO_CHUNKS }, [root, templateRoots, surfaceId, theme]);
-  const lastBatches = useRef25([]);
-  const batches = useMemo18(() => lastBatches.current = nodeSheetBatches(lastBatches.current, sheet.chunks), [sheet.chunks]);
-  const [rootEl, setRootEl] = useState21(null);
-  const [portal, setPortal] = useState21(null);
-  const [toastLayer, setToastLayer] = useState21(null);
-  const box = useRef25({ width: typeof width === `number` ? width : 0, height: undefined, measured: false });
+  const sheet = useMemo19(() => root ? compileNodeSheet([root, ...templateRoots], surfaceId, theme) : { css: ``, queries: [], chunks: NO_CHUNKS }, [root, templateRoots, surfaceId, theme]);
+  const lastBatches = useRef26([]);
+  const batches = useMemo19(() => lastBatches.current = nodeSheetBatches(lastBatches.current, sheet.chunks), [sheet.chunks]);
+  const [rootEl, setRootEl] = useState22(null);
+  const [portal, setPortal] = useState22(null);
+  const [toastLayer, setToastLayer] = useState22(null);
+  const box = useRef26({ width: typeof width === `number` ? width : 0, height: undefined, measured: false });
   const layoutInputs = { breakpoints: theme.tokens.breakpoint ?? {}, queries: sheet.queries, viewportHeight, hover, reducedMotion };
   const { breakpoint, xq } = surfaceLayout(box.current, layoutInputs);
-  const inputsRef = useRef25(layoutInputs);
+  const inputsRef = useRef26(layoutInputs);
   inputsRef.current = layoutInputs;
-  const [, setLayoutKey] = useState21(``);
+  const [, setLayoutKey] = useState22(``);
   useIsoLayoutEffect3(() => {
     if (!rootEl)
       return;
@@ -7293,8 +7598,8 @@ function ExponentialSurface({
     ro.observe(rootEl);
     return () => ro.disconnect();
   }, [rootEl]);
-  const politeRef = useRef25(null);
-  const assertiveRef = useRef25(null);
+  const politeRef = useRef26(null);
+  const assertiveRef = useRef26(null);
   const announce = useCallback11((text, live = `polite`) => {
     const el = live === `assertive` ? assertiveRef.current : politeRef.current;
     if (!el)
@@ -7304,18 +7609,18 @@ function ExponentialSurface({
       el.textContent = text;
     }, 30);
   }, []);
-  const functions = useMemo18(() => ({ ...CLIENT_FUNCTIONS2, ...host?.functions ?? {} }), [host?.functions]);
-  const formatter = useMemo18(() => memoFormatter(lazyFormatter(locale, timeZone)), [locale, timeZone]);
-  const liveClock = useMemo18(() => usesLiveClock(root) || usesLiveClock(templateRoots), [root, templateRoots]);
-  const [minute, setMinute] = useState21(() => Date.now());
-  useEffect20(() => {
+  const functions = useMemo19(() => ({ ...CLIENT_FUNCTIONS2, ...host?.functions ?? {} }), [host?.functions]);
+  const formatter = useMemo19(() => memoFormatter(lazyFormatter(locale, timeZone)), [locale, timeZone]);
+  const liveClock = useMemo19(() => usesLiveClock(root) || usesLiveClock(templateRoots), [root, templateRoots]);
+  const [minute, setMinute] = useState22(() => Date.now());
+  useEffect22(() => {
     if (!liveClock)
       return;
     const timer = setInterval(() => setMinute(Date.now()), 60000);
     return () => clearInterval(timer);
   }, [liveClock]);
-  const now = useMemo18(() => () => Date.now(), [minute]);
-  const scrollers = useRef25(new Map);
+  const now = useMemo19(() => () => Date.now(), [minute]);
+  const scrollers = useRef26(new Map);
   const registerScroller = useCallback11((id, scroll) => {
     scrollers.current.set(id, scroll);
     return () => {
@@ -7323,12 +7628,12 @@ function ExponentialSurface({
         scrollers.current.delete(id);
     };
   }, []);
-  const paintFailures = useRef25(new Map).current;
+  const paintFailures = useRef26(new Map).current;
   const hostValue = host ?? EMPTY_HOST;
   const openUrl = useCallback11((url) => openAllowed(hostValue, url), [hostValue]);
-  const live = useRef25({ data, breakpoint, xq, mode });
+  const live = useRef26({ data, breakpoint, xq, mode });
   live.current = { data, breakpoint, xq, mode };
-  const listeners = useRef25(new Set).current;
+  const listeners = useRef26(new Set).current;
   const subscribe = useCallback11((listener) => {
     listeners.add(listener);
     return () => void listeners.delete(listener);
@@ -7337,7 +7642,7 @@ function ExponentialSurface({
     for (const listener of [...listeners])
       listener();
   }, [data, breakpoint, xq, mode, listeners]);
-  const ctx = useMemo18(() => withLive({
+  const ctx = useMemo19(() => withLive({
     surfaceId,
     compiled,
     theme,
@@ -7410,9 +7715,9 @@ function ExponentialSurface({
   const md = theme.tokens.breakpoint?.md ?? 768;
   const scopeSel = `.${surfaceClass(surfaceId)}`;
   const layerCss = `@layer xui-base{@container xui (width >= ${md}px){${scopeSel} .xui-toast-layer{left:auto;right:var(--xui-spacing-lg);transform:none;align-items:flex-end}${scopeSel}[dir="rtl"] .xui-toast-layer{right:auto;left:var(--xui-spacing-lg)}}}`;
-  const themeHtml = useMemo18(() => ({ __html: `${BASE_CSS}
+  const themeHtml = useMemo19(() => ({ __html: `${BASE_CSS}
 ${compiled.css}` }), [compiled.css]);
-  const nodesHtml = useMemo18(() => {
+  const nodesHtml = useMemo19(() => {
     const list = batches.length ? batches : [{ chunks: NO_CHUNKS, css: sheet.css }];
     return list.map((batch, i) => {
       const css = i === 0 ? `${batch.css}${layerCss}` : batch.css;
@@ -7424,7 +7729,7 @@ ${compiled.css}` }), [compiled.css]);
       return html;
     });
   }, [batches, sheet.css, layerCss]);
-  return /* @__PURE__ */ jsxs21("div", {
+  return /* @__PURE__ */ jsxs22("div", {
     ref: setRootEl,
     className: [`xui-surface`, compiled.scope, surfaceClass(surfaceId), className].filter(Boolean).join(` `),
     "data-xui-surface": surfaceId,
@@ -7436,29 +7741,29 @@ ${compiled.css}` }), [compiled.css]);
     dir: direction,
     style: width === undefined ? style : { width, ...style },
     children: [
-      /* @__PURE__ */ jsx25("style", {
+      /* @__PURE__ */ jsx27("style", {
         "data-xui-style": "theme",
         dangerouslySetInnerHTML: themeHtml
       }),
-      nodesHtml.map((html, i) => /* @__PURE__ */ jsx25("style", {
+      nodesHtml.map((html, i) => /* @__PURE__ */ jsx27("style", {
         "data-xui-style": "nodes",
         dangerouslySetInnerHTML: html
       }, i)),
-      /* @__PURE__ */ jsx25(SurfaceContext.Provider, {
+      /* @__PURE__ */ jsx27(SurfaceContext.Provider, {
         value: ctx,
-        children: /* @__PURE__ */ jsxs21("div", {
+        children: /* @__PURE__ */ jsxs22("div", {
           className: "xui-container",
           children: [
-            root ? /* @__PURE__ */ jsx25(NodeView, {
+            root ? /* @__PURE__ */ jsx27(NodeView, {
               node: root
             }) : null,
             children,
-            /* @__PURE__ */ jsx25("div", {
+            /* @__PURE__ */ jsx27("div", {
               ref: setPortal,
               className: "xui-layer",
               "data-xui-layer": "overlay"
             }),
-            /* @__PURE__ */ jsx25("div", {
+            /* @__PURE__ */ jsx27("div", {
               ref: setToastLayer,
               className: "xui-toast-layer",
               "data-xui-layer": "toast"
@@ -7466,14 +7771,14 @@ ${compiled.css}` }), [compiled.css]);
           ]
         })
       }),
-      /* @__PURE__ */ jsx25("div", {
+      /* @__PURE__ */ jsx27("div", {
         ref: politeRef,
         className: "xui-sr-only",
         "aria-live": "polite",
         "aria-atomic": "true",
         "data-xui-live": "polite"
       }),
-      /* @__PURE__ */ jsx25("div", {
+      /* @__PURE__ */ jsx27("div", {
         ref: assertiveRef,
         className: "xui-sr-only",
         "aria-live": "assertive",
@@ -7484,21 +7789,21 @@ ${compiled.css}` }), [compiled.css]);
   });
 }
 // packages/exponential-ui-react/src/use-surface.ts
-import { useCallback as useCallback12, useMemo as useMemo19, useRef as useRef26, useState as useState22 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo20, useRef as useRef27, useState as useState23 } from "react";
 import { CORE_CATALOG_ID, reduceNested, reduceSurface } from "@exponential_app/eui";
 import { setPointer as setPointer4 } from "@exponential_app/eui/web";
 var NO_EXTENSIONS = [];
 function useSurface(options = {}) {
   const surfaceId = options.surfaceId ?? `main`;
   const extensions = options.extensions ?? NO_EXTENSIONS;
-  const initialRef = useRef26({
+  const initialRef = useRef27({
     catalogId: options.catalogId ?? CORE_CATALOG_ID,
     components: [],
     nested: options.initial ?? null,
     data: options.data ?? {},
     deleted: false
   });
-  const [inner, setInner] = useState22(initialRef.current);
+  const [inner, setInner] = useState23(initialRef.current);
   const apply = useCallback12((message) => {
     setInner((cur) => {
       if (message.createSurface) {
@@ -7535,7 +7840,7 @@ function useSurface(options = {}) {
     setInner((cur) => ({ ...cur, nested: tree, components: [], deleted: false }));
   }, []);
   const reset = useCallback12(() => setInner(initialRef.current), []);
-  const reduced = useMemo19(() => {
+  const reduced = useMemo20(() => {
     if (inner.deleted)
       return { root: null, issues: [] };
     if (inner.nested)
@@ -7568,8 +7873,8 @@ import { BASE_CSS as BASE_CSS2 } from "@exponential_app/eui/web";
 import { getPointer as getPointer4, setPointer as setPointer5, absolutePath as absolutePath4, resolveValue as resolveValue2, resolveProps, resolveNodeProps as resolveNodeProps2, resolveVisible as resolveVisible2, bindTree, boundPath as boundPath5, isBinding as isBinding3, isCall as isCall2, hasDynamic, memoFormatter as memoFormatter2, CLIENT_FUNCTIONS as CLIENT_FUNCTIONS3 } from "@exponential_app/eui/web";
 
 // packages/exponential-ui-react/src/host-surface.tsx
-import { useCallback as useCallback13, useMemo as useMemo20, useSyncExternalStore as useSyncExternalStore4 } from "react";
-import { jsx as jsx26, Fragment as Fragment9 } from "react/jsx-runtime";
+import { useCallback as useCallback13, useMemo as useMemo21, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { jsx as jsx28, Fragment as Fragment10 } from "react/jsx-runtime";
 function hostPlugin(host, base = {}) {
   return {
     ...base,
@@ -7599,7 +7904,7 @@ function useHostSurfaceIds(host) {
   const subscribe = useCallback13((cb) => host.subscribe(cb), [host]);
   const key = useSyncExternalStore4(subscribe, () => host.surfaceIds().join(`
 `));
-  return useMemo20(() => key ? key.split(`
+  return useMemo21(() => key ? key.split(`
 `) : [], [key]);
 }
 function useHostStatus(host) {
@@ -7614,7 +7919,7 @@ function useHostSurface(host, surfaceId) {
   const store = useSyncExternalStore4(subscribeHost, () => host.surface(surfaceId));
   const subscribeStore = useCallback13((cb) => store ? store.subscribe(cb) : noop(), [store]);
   const version = useSyncExternalStore4(subscribeStore, () => store?.version ?? -1);
-  return useMemo20(() => store ? stateOf(host, store) : null, [host, store, version]);
+  return useMemo21(() => store ? stateOf(host, store) : null, [host, store, version]);
 }
 function stateOf(host, store) {
   return {
@@ -7640,12 +7945,12 @@ function stateOf(host, store) {
 }
 function HostSurface({ host, surfaceId, plugin, fallback = null, ...rest }) {
   const surface = useHostSurface(host, surfaceId);
-  const p = useMemo20(() => hostPlugin(host, plugin), [host, plugin]);
+  const p = useMemo21(() => hostPlugin(host, plugin), [host, plugin]);
   if (!surface)
-    return /* @__PURE__ */ jsx26(Fragment9, {
+    return /* @__PURE__ */ jsx28(Fragment10, {
       children: fallback
     });
-  return /* @__PURE__ */ jsx26(ExponentialSurface, {
+  return /* @__PURE__ */ jsx28(ExponentialSurface, {
     ...rest,
     theme: surface.theme ?? rest.theme,
     id: rest.id ?? surfaceId,
@@ -7753,5 +8058,5 @@ export {
   walkNodes
 };
 
-//# debugId=C1F40D910A8766D764756E2164756E21
+//# debugId=39A4F0FB7E01DD0264756E2164756E21
 //# sourceMappingURL=index.js.map