@exponential_app/eui 0.2.1 → 0.4.0

package/dist/web/primitives/index.js

@@ -1,4 +1,5 @@
 import {
+  __chunks,
   layoutSize2,
   visualScale2,
   elementScale2,
@@ -9,8 +10,27 @@ import {
   voiceWaveName2,
   voiceWaveClock2,
   voiceWaveFitChild2,
-  VOICE_WAVE_CLASSES2
-} from "../../chunks/index-t6qz1770.js";
+  VOICE_WAVE_CLASSES2,
+  motionFitMatrix2,
+  motionConcat2,
+  motionFrameSize2,
+  MotionCanvasPool2,
+  paintMotionFrame2,
+  MOTION_MAX_PLAYING2,
+  MOTION_MAX_FPS2,
+  motionDeclaredSize2,
+  motionBoxStyle2,
+  motionFit2,
+  motionA11y2,
+  motionThemeSlots2,
+  motionCanPaint2,
+  motionFromDotLottie2,
+  motionDotLottie2,
+  MotionStateDriver2,
+  MotionView2,
+  resetMotionThemeIds2
+} from "../../chunks/index-t2mwfbb6.js";
+__chunks(import.meta.url,["ts0twve6","t2mwfbb6","ctcc3cma"],[["./index.js",1],["../../chunks/index-t2mwfbb6.js"],["../../chunks/wasm-ctcc3cma.js",1]],0);
 
 // packages/exponential-ui/src/web/primitives/button.ts
 import { cva } from "class-variance-authority";
@@ -201,6 +221,17 @@ var CARD_CLASSES = {
   content: `px-6`,
   footer: `flex items-center px-6 [.border-t]:pt-6`
 };
+// packages/exponential-ui/src/web/primitives/carousel.ts
+var CAROUSEL_GEOMETRY = { thumbnail: 52, ring: 2, thumbnailGap: 8, counterInset: 8 };
+function carouselCounterText(page, total) {
+  return `${page + 1} / ${total}`;
+}
+var CAROUSEL_CLASSES = {
+  counter: `pointer-events-none absolute end-2 top-2 z-10 rounded-full bg-black/55 px-2 text-xs leading-5 font-medium text-white tabular-nums`,
+  thumbnails: `flex flex-row gap-[8px] overflow-x-auto pt-2 [scrollbar-width:none]`,
+  thumbnail: `relative size-[52px] shrink-0 cursor-pointer overflow-hidden rounded-md border-2 border-transparent bg-muted p-0 opacity-70 outline-none transition-opacity duration-fast hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[current=true]:border-foreground data-[current=true]:opacity-100`,
+  thumbnailImage: `size-full object-cover`
+};
 // packages/exponential-ui/src/web/primitives/checkbox.ts
 var CHECKBOX_CLASSES = {
   root: `peer size-4 shrink-0 rounded-[4px] border border-glass-stroke-strong bg-glass-row shadow-none transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary`,
@@ -981,8 +1012,8 @@ var DOCK_CARD_CLASSES = {
   icon: `mt-0.5 size-3.5 shrink-0`,
   text: `min-w-0 flex-1`,
   header: `mb-1 flex items-center gap-2`,
-  label: `truncate text-xs font-medium`,
-  caption: `min-w-0 truncate text-xs text-muted-foreground`,
+  label: `max-w-full shrink-0 truncate text-xs font-medium`,
+  caption: `min-w-0 flex-1 basis-0 truncate text-xs text-muted-foreground`,
   meta: `ml-auto shrink-0 text-xs text-muted-foreground`,
   row: `flex min-w-0 items-center gap-2`,
   title: `min-w-0 flex-1 truncate text-sm text-foreground/90`,
@@ -1086,6 +1117,44 @@ var METER_CLASSES = {
     danger: `[&_[data-slot=progress-indicator]]:bg-destructive`
   }
 };
+// packages/exponential-ui/src/web/primitives/mosaic.ts
+var MOSAIC_GEOMETRY = { gap: 10, largeFraction: 0.6, aspect: 1.6, radius: 10 };
+function mosaicTiles(count) {
+  const n = Math.max(0, Math.floor(count));
+  if (n === 0)
+    return [];
+  if (n === 1)
+    return [{ index: 0, size: `large`, more: 0 }];
+  if (n === 2)
+    return [0, 1].map((index) => ({ index, size: `half`, more: 0 }));
+  return [
+    { index: 0, size: `large`, more: 0 },
+    { index: 1, size: `small`, more: 0 },
+    { index: 2, size: `small`, more: n - 3 }
+  ];
+}
+var MOSAIC_CLASSES = {
+  root: `flex aspect-[1.6] w-full min-w-0 flex-row gap-[10px]`,
+  side: `flex min-w-0 flex-1 flex-col gap-[10px]`,
+  tile: `relative min-h-0 min-w-0 cursor-pointer overflow-hidden rounded-[10px] border border-glass-stroke-card bg-muted p-0 outline-none transition-opacity duration-fast hover:opacity-90 focus-visible:ring-[3px] focus-visible:ring-ring/50`,
+  fill: `flex-1`,
+  lead: `shrink-0 grow-0 basis-[60%]`,
+  image: `absolute inset-0 size-full object-cover`,
+  more: `pointer-events-none absolute inset-0 flex items-center justify-center bg-black/55 text-xl font-semibold text-white`
+};
+// packages/exponential-ui/src/web/primitives/outline.ts
+var OUTLINE_GEOMETRY = { rowHeight: 32, activeBar: 2 };
+var OUTLINE_CLASSES = {
+  root: `flex min-w-0 flex-col gap-[2px]`,
+  caption: `px-2 py-1 text-[11px] leading-4 font-medium tracking-[0.5px] text-muted-foreground uppercase`,
+  row: `relative flex h-[32px] w-full min-w-0 cursor-pointer items-center gap-1 overflow-hidden rounded-md px-2 text-start text-sm text-muted-foreground outline-none transition-colors duration-fast hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-foreground`,
+  bar: `pointer-events-none absolute inset-y-0 start-0 w-[2px] bg-foreground`,
+  title: `min-w-0 flex-1 truncate`,
+  count: `shrink-0 text-xs text-muted-foreground tabular-nums`
+};
+function outlineCountText(count) {
+  return typeof count === `number` && Number.isFinite(count) && count > 0 ? `· ${count}` : null;
+}
 // packages/exponential-ui/src/web/primitives/popover.ts
 var POPOVER_CLASSES = {
   content: `${MENU_SURFACE_CLASS} w-72 origin-(--radix-popover-content-transform-origin) p-4 outline-hidden`
@@ -1328,6 +1397,531 @@ var TYPEAHEAD_PORTAL_SELECTOR = `[data-editor-autocomplete]`;
 function isTypeaheadPortalInteraction(event) {
   return event.target instanceof Element && event.target.closest(TYPEAHEAD_PORTAL_SELECTOR) !== null;
 }
+// packages/exponential-ui/src/web/primitives/zoomable-image.ts
+var ZOOM_CONTROLS = [`auto`, `always`, `none`];
+var ZOOM_DOUBLE_TAP_MS = 300;
+var ZOOM_DOUBLE_TAP_SLOP = 24;
+var ZOOM_TAP_SLOP = 4;
+var ZOOM_WHEEL_SETTLE_MS = 150;
+function zoomBoxAspect(math, natural, styledHeight) {
+  if (styledHeight)
+    return null;
+  if (!natural || !(natural.width > 0) || !(natural.height > 0))
+    return 16 / 9;
+  if (math.zoomIsTall(natural))
+    return 1;
+  return natural.width / natural.height;
+}
+function zoomDeclaredSize(width, height) {
+  const w = typeof width === `number` && Number.isFinite(width) ? width : 0;
+  const h = typeof height === `number` && Number.isFinite(height) ? height : 0;
+  return w > 0 && h > 0 ? { width: w, height: h } : null;
+}
+function zoomPillOf(math, view, frame) {
+  const { atMin, atMax } = math.zoomBounds(view, frame);
+  return { percent: math.zoomPercent(view.scale), atMin, atMax, atRest: math.zoomAtRest(view, frame) };
+}
+var sameView = (a, b) => Math.abs(a.scale - b.scale) < 0.000001 && Math.abs(a.x - b.x) < 0.001 && Math.abs(a.y - b.y) < 0.001;
+var samePill = (a, b) => !!a && a.percent === b.percent && a.atMin === b.atMin && a.atMax === b.atMax && a.atRest === b.atRest;
+var now = () => typeof performance !== `undefined` ? performance.now() : Date.now();
+var raf = (fn) => typeof requestAnimationFrame === `function` ? requestAnimationFrame(fn) : setTimeout(() => fn(now()), 16);
+var cancelRaf = (id) => typeof cancelAnimationFrame === `function` ? cancelAnimationFrame(id) : clearTimeout(id);
+function createZoomController(o) {
+  const m = o.math;
+  const { root, image } = o;
+  let view = { scale: 1, x: 0, y: 0 };
+  let viewport = { width: 0, height: 0 };
+  let painted = false;
+  let pill = null;
+  let lastEmitted = null;
+  const pointers = new Map;
+  let drag = null;
+  let pinch = null;
+  let safari = null;
+  let momentum = 0;
+  let wheelTimer = null;
+  let tapTimer = null;
+  let lastTap = null;
+  let visible = true;
+  let hideTimer = null;
+  let hovered = false;
+  let held = false;
+  const frame = () => {
+    const natural = o.natural();
+    if (!natural || viewport.width <= 0 || viewport.height <= 0)
+      return null;
+    return { natural, viewport, initial: o.initial(), maxScale: o.maxScale() };
+  };
+  const point = (e) => {
+    const r = root.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+  };
+  const cursor = () => {
+    const f = frame();
+    if (!f)
+      return;
+    root.style.cursor = drag && drag.type === `mouse` && drag.moved ? `grabbing` : m.zoomAtRest(view, f) ? `zoom-in` : `grab`;
+    const room = m.zoomPanRoom(view, f);
+    root.style.touchAction = room.x && room.y ? `none` : room.x ? `pan-y` : room.y ? `pan-x` : `pan-x pan-y`;
+  };
+  const paint = (next, animated = false) => {
+    view = next;
+    const transition = animated ? o.transition() : null;
+    image.style.transition = transition ?? ``;
+    image.style.transform = `translate(${next.x}px, ${next.y}px) scale(${next.scale})`;
+    if (!painted) {
+      painted = true;
+      image.style.visibility = ``;
+    }
+    const f = frame();
+    if (f) {
+      const p = zoomPillOf(m, next, f);
+      if (!samePill(pill, p)) {
+        pill = p;
+        o.onPill(p);
+      }
+    }
+    cursor();
+  };
+  const settle = () => {
+    const f = frame();
+    if (!f)
+      return;
+    if (lastEmitted !== null && Math.abs(lastEmitted - view.scale) < 0.000001)
+      return;
+    lastEmitted = view.scale;
+    o.onZoom(view.scale, m.zoomAtRest(view, f));
+  };
+  const stopMotion = () => {
+    if (momentum)
+      cancelRaf(momentum);
+    momentum = 0;
+  };
+  const setVisible = (next) => {
+    if (visible === next)
+      return;
+    visible = next;
+    o.onPillVisible(next);
+  };
+  const kept = () => {
+    const el = o.pill();
+    return held || hovered || !!el && typeof document !== `undefined` && el.contains(document.activeElement);
+  };
+  const armHide = () => {
+    if (hideTimer)
+      clearTimeout(hideTimer);
+    hideTimer = null;
+    if (!o.autoHide())
+      return;
+    hideTimer = setTimeout(() => {
+      hideTimer = null;
+      if (!kept())
+        setVisible(false);
+    }, m.ZOOM.autoHideMs);
+  };
+  const activity = () => {
+    if (!o.autoHide())
+      return;
+    setVisible(true);
+    armHide();
+  };
+  const jump = (next) => {
+    stopMotion();
+    paint(next, true);
+    settle();
+    activity();
+  };
+  const restView = (f) => {
+    const rest = m.zoomRestView(f);
+    const bound = o.boundScale();
+    return bound !== undefined && Number.isFinite(bound) && bound > 0 ? m.zoomTo(rest, bound, m.zoomCentre(f), f) : rest;
+  };
+  const reset = () => {
+    stopMotion();
+    drag = null;
+    pinch = null;
+    const f = frame();
+    if (!f) {
+      painted = false;
+      image.style.visibility = `hidden`;
+      return;
+    }
+    paint(restView(f));
+    lastEmitted = view.scale;
+  };
+  const measure = () => {
+    const next = { width: root.clientWidth, height: root.clientHeight };
+    if (next.width === viewport.width && next.height === viewport.height)
+      return;
+    const from = viewport;
+    const before = frame();
+    viewport = next;
+    const f = frame();
+    if (!f)
+      return;
+    if (!before || !painted) {
+      paint(restView(f));
+      lastEmitted = view.scale;
+      return;
+    }
+    paint(m.zoomResize(view, from, f));
+  };
+  const tap = (at, type) => {
+    const t = now();
+    if (lastTap && t - lastTap.t < ZOOM_DOUBLE_TAP_MS && Math.hypot(at.x - lastTap.x, at.y - lastTap.y) < ZOOM_DOUBLE_TAP_SLOP) {
+      if (tapTimer)
+        clearTimeout(tapTimer);
+      tapTimer = null;
+      lastTap = null;
+      const f = frame();
+      if (f)
+        jump(m.zoomDoubleTap(view, at, f));
+      return;
+    }
+    lastTap = { t, x: at.x, y: at.y };
+    if (tapTimer)
+      clearTimeout(tapTimer);
+    tapTimer = setTimeout(() => {
+      tapTimer = null;
+      lastTap = null;
+      if (type === `touch` && o.autoHide()) {
+        if (visible)
+          setVisible(false);
+        else
+          activity();
+      }
+      const f = frame();
+      if (f && m.zoomAtRest(view, f))
+        o.onTap();
+    }, ZOOM_DOUBLE_TAP_MS);
+  };
+  const release = (vx = 0, vy = 0) => {
+    const f = frame();
+    if (!f)
+      return;
+    const clamped = m.zoomClamp(view, f);
+    if (!sameView(clamped, view)) {
+      paint(clamped, true);
+      settle();
+      return;
+    }
+    settle();
+    if (!m.zoomMomentumActive(vx, vy, 0))
+      return;
+    const from = view;
+    const started = now();
+    const step = () => {
+      const t = now() - started;
+      const g = frame();
+      if (!g)
+        return;
+      paint(m.zoomMomentum(from, vx, vy, t, g));
+      momentum = m.zoomMomentumActive(vx, vy, t) ? raf(step) : 0;
+    };
+    momentum = raf(step);
+  };
+  const velocity = (samples) => {
+    const last = samples[samples.length - 1];
+    if (!last || now() - last.t > 50)
+      return { vx: 0, vy: 0 };
+    const first = samples.find((s) => last.t - s.t <= 100) ?? last;
+    const dt = last.t - first.t;
+    return dt > 0 ? { vx: (last.x - first.x) / dt, vy: (last.y - first.y) / dt } : { vx: 0, vy: 0 };
+  };
+  const inPill = (target) => {
+    const el = o.pill();
+    return !!el && target instanceof Node && el.contains(target);
+  };
+  const startPinch = () => {
+    const [a, b] = [...pointers.values()];
+    if (!a || !b)
+      return;
+    drag = null;
+    pinch = { start: view, dist: Math.max(1, Math.hypot(a.x - b.x, a.y - b.y)), mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } };
+  };
+  const onPointerDown = (e) => {
+    if (inPill(e.target))
+      return;
+    if (e.pointerType === `mouse` && e.button !== 0)
+      return;
+    const f = frame();
+    if (!f)
+      return;
+    stopMotion();
+    if (image.style.transition)
+      paint(view);
+    const at = point(e);
+    pointers.set(e.pointerId, { x: at.x, y: at.y, type: e.pointerType });
+    try {
+      root.setPointerCapture(e.pointerId);
+    } catch {}
+    if (pointers.size === 2 && e.pointerType === `touch`) {
+      startPinch();
+      return;
+    }
+    if (pointers.size === 1)
+      drag = { id: e.pointerId, type: e.pointerType, start: view, sx: at.x, sy: at.y, moved: false, samples: [{ t: now(), x: at.x, y: at.y }] };
+  };
+  const onPointerMove = (e) => {
+    if (e.pointerType === `mouse` || pointers.has(e.pointerId))
+      activity();
+    const p = pointers.get(e.pointerId);
+    if (!p)
+      return;
+    const at = point(e);
+    p.x = at.x;
+    p.y = at.y;
+    const f = frame();
+    if (!f)
+      return;
+    if (pinch) {
+      const [a, b] = [...pointers.values()];
+      if (!a || !b)
+        return;
+      const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+      const dist = Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
+      const start = { scale: pinch.start.scale, x: pinch.start.x + mid.x - pinch.mid.x, y: pinch.start.y + mid.y - pinch.mid.y };
+      paint(m.zoomPinch(start, dist / pinch.dist, mid, f));
+      e.preventDefault();
+      return;
+    }
+    if (!drag || drag.id !== e.pointerId)
+      return;
+    let dx = at.x - drag.sx;
+    let dy = at.y - drag.sy;
+    if (!drag.moved && Math.hypot(dx, dy) < ZOOM_TAP_SLOP)
+      return;
+    if (drag.type === `touch`) {
+      const room = m.zoomPanRoom(drag.start, f);
+      if (!room.x)
+        dx = 0;
+      if (!room.y)
+        dy = 0;
+      if (!drag.moved && dx === 0 && dy === 0)
+        return;
+    }
+    drag.moved = true;
+    drag.samples.push({ t: now(), x: at.x, y: at.y });
+    if (drag.samples.length > 8)
+      drag.samples.shift();
+    paint(m.zoomDrag(drag.start, dx, dy, f));
+    e.preventDefault();
+  };
+  const onPointerUp = (e) => {
+    const had = pointers.delete(e.pointerId);
+    if (!had)
+      return;
+    const cancelled = e.type === `pointercancel`;
+    if (pinch) {
+      if (pointers.size < 2) {
+        pinch = null;
+        drag = null;
+        release();
+      }
+      return;
+    }
+    const d = drag;
+    if (!d || d.id !== e.pointerId)
+      return;
+    drag = null;
+    if (!d.moved) {
+      cursor();
+      if (!cancelled)
+        tap({ x: d.sx, y: d.sy }, d.type);
+      return;
+    }
+    const v = d.type === `mouse` && !cancelled ? velocity(d.samples) : { vx: 0, vy: 0 };
+    release(v.vx, v.vy);
+  };
+  const onWheel = (e) => {
+    const f = frame();
+    if (!f)
+      return;
+    const mode = e.deltaMode === 1 ? `line` : `pixel`;
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      stopMotion();
+      const page = e.deltaMode === 2 ? viewport.height : 1;
+      paint(m.zoomWheel(view, e.deltaY * page, mode, point(e), f));
+      activity();
+      if (wheelTimer)
+        clearTimeout(wheelTimer);
+      wheelTimer = setTimeout(() => {
+        wheelTimer = null;
+        settle();
+      }, ZOOM_WHEEL_SETTLE_MS);
+      return;
+    }
+    const unit = e.deltaMode === 1 ? m.ZOOM.wheelLinePx : e.deltaMode === 2 ? viewport.height : 1;
+    const next = m.zoomScroll(view, e.deltaX * unit, e.deltaY * unit, f);
+    if (sameView(next, view))
+      return;
+    e.preventDefault();
+    stopMotion();
+    paint(next);
+    activity();
+  };
+  const onGestureStart = (e) => {
+    e.preventDefault();
+    const g = e;
+    if (!frame())
+      return;
+    stopMotion();
+    safari = { start: view, anchor: point(g) };
+  };
+  const onGestureChange = (e) => {
+    e.preventDefault();
+    const f = frame();
+    if (!safari || !f)
+      return;
+    paint(m.zoomPinch(safari.start, e.scale, safari.anchor, f));
+    activity();
+  };
+  const onGestureEnd = (e) => {
+    e.preventDefault();
+    if (!safari)
+      return;
+    safari = null;
+    release();
+  };
+  const onKeyDown = (e) => {
+    if (e.ctrlKey || e.metaKey || e.altKey || e.defaultPrevented)
+      return;
+    if (inPill(e.target) && (e.key === `Enter` || e.key === ` `))
+      return;
+    const f = frame();
+    if (!f)
+      return;
+    const next = m.zoomKey(view, e.key, f);
+    if (!next)
+      return;
+    e.preventDefault();
+    jump(next);
+  };
+  const onFocusIn = () => activity();
+  const onFocusOut = () => armHide();
+  const onPointerOver = (e) => {
+    hovered = inPill(e.target);
+  };
+  const onPointerOut = (e) => {
+    if (!hovered || inPill(e.relatedTarget))
+      return;
+    hovered = false;
+    armHide();
+  };
+  const onDragStart = (e) => e.preventDefault();
+  root.addEventListener(`pointerdown`, onPointerDown);
+  root.addEventListener(`pointermove`, onPointerMove);
+  root.addEventListener(`pointerup`, onPointerUp);
+  root.addEventListener(`pointercancel`, onPointerUp);
+  root.addEventListener(`wheel`, onWheel, { passive: false });
+  root.addEventListener(`gesturestart`, onGestureStart);
+  root.addEventListener(`gesturechange`, onGestureChange);
+  root.addEventListener(`gestureend`, onGestureEnd);
+  root.addEventListener(`keydown`, onKeyDown);
+  root.addEventListener(`focusin`, onFocusIn);
+  root.addEventListener(`focusout`, onFocusOut);
+  root.addEventListener(`dragstart`, onDragStart);
+  root.addEventListener(`pointerover`, onPointerOver);
+  root.addEventListener(`pointerout`, onPointerOut);
+  let ro = null;
+  if (typeof ResizeObserver === `function`) {
+    ro = new ResizeObserver(() => measure());
+    ro.observe(root);
+  }
+  if (!frame())
+    image.style.visibility = `hidden`;
+  measure();
+  armHide();
+  return {
+    view: () => view,
+    frame,
+    step: (direction) => {
+      const f = frame();
+      if (f)
+        jump(m.zoomStep(view, direction, f));
+    },
+    rest: () => {
+      const f = frame();
+      if (f)
+        jump(m.zoomRestView(f));
+    },
+    zoomScale: (scale) => {
+      const f = frame();
+      if (f)
+        jump(m.zoomTo(view, scale, m.zoomCentre(f), f));
+    },
+    syncScale: () => {
+      const f = frame();
+      const bound = o.boundScale();
+      if (!f || bound === undefined || !Number.isFinite(bound) || Math.abs(bound - view.scale) < 0.0001)
+        return;
+      stopMotion();
+      paint(m.zoomTo(view, bound, m.zoomCentre(f), f), true);
+      lastEmitted = view.scale;
+    },
+    reset: () => {
+      measure();
+      reset();
+    },
+    holdPill: (hold) => {
+      held = hold;
+      if (hold)
+        setVisible(true);
+      else
+        armHide();
+    },
+    destroy: () => {
+      stopMotion();
+      if (wheelTimer)
+        clearTimeout(wheelTimer);
+      if (tapTimer)
+        clearTimeout(tapTimer);
+      if (hideTimer)
+        clearTimeout(hideTimer);
+      ro?.disconnect();
+      root.removeEventListener(`pointerdown`, onPointerDown);
+      root.removeEventListener(`pointermove`, onPointerMove);
+      root.removeEventListener(`pointerup`, onPointerUp);
+      root.removeEventListener(`pointercancel`, onPointerUp);
+      root.removeEventListener(`wheel`, onWheel);
+      root.removeEventListener(`gesturestart`, onGestureStart);
+      root.removeEventListener(`gesturechange`, onGestureChange);
+      root.removeEventListener(`gestureend`, onGestureEnd);
+      root.removeEventListener(`keydown`, onKeyDown);
+      root.removeEventListener(`focusin`, onFocusIn);
+      root.removeEventListener(`focusout`, onFocusOut);
+      root.removeEventListener(`dragstart`, onDragStart);
+      root.removeEventListener(`pointerover`, onPointerOver);
+      root.removeEventListener(`pointerout`, onPointerOut);
+    }
+  };
+}
+function zoomableImageLayout(pill) {
+  return {
+    root: { overflow: `clip`, userSelect: `none` },
+    image: { position: `absolute`, left: 0, top: 0, display: `block`, maxWidth: `none`, maxHeight: `none`, transformOrigin: `0 0`, pointerEvents: `none`, userSelect: `none` },
+    pill: { position: `absolute`, left: `50%`, bottom: pill.inset, transform: `translateX(-50%)`, zIndex: 1, display: `flex`, flexDirection: `row`, alignItems: `center`, whiteSpace: `nowrap`, cursor: `default`, transition: `opacity var(--xui-motion-standard) var(--xui-ease-standard,ease)` },
+    pillHidden: { opacity: 0, pointerEvents: `none` },
+    button: { display: `inline-flex`, alignItems: `center`, justifyContent: `center`, cursor: `pointer`, flexShrink: 0 },
+    percent: { display: `inline-flex`, alignItems: `center`, justifyContent: `center`, cursor: `pointer`, minWidth: pill.percentMinWidth, fontVariantNumeric: `tabular-nums`, flexShrink: 0 },
+    divider: { alignSelf: `center`, flexShrink: 0 }
+  };
+}
+var ZOOMABLE_IMAGE_NATIVE_TRANSITION = `transform var(--xui-motion-standard) var(--xui-ease-standard,ease)`;
+var ZOOMABLE_IMAGE_TRANSITION = `transform var(--motion-duration-standard,var(--xui-duration-standard,180ms)) var(--motion-ease-standard,cubic-bezier(0.2,0,0,1))`;
+function zoomImageStyle(natural) {
+  return natural ? { width: natural.width, height: natural.height } : {};
+}
+var ZOOMABLE_IMAGE_CLASSES = {
+  root: `relative w-full min-w-0 overflow-hidden rounded-md select-none outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50`,
+  image: `pointer-events-none absolute top-0 left-0 block max-h-none max-w-none origin-top-left select-none`,
+  pill: `absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 flex-row items-center gap-0.5 rounded-full border border-glass-stroke-card bg-popover p-1 whitespace-nowrap shadow-lg backdrop-blur-lg transition-opacity duration-standard ease-standard`,
+  pillHidden: `pointer-events-none opacity-0`,
+  button: `size-7 rounded-full border-0 bg-transparent`,
+  percent: `h-7 min-w-14 rounded-full border-0 bg-transparent px-2 tabular-nums`,
+  divider: `mx-0.5 h-4 w-px shrink-0 bg-border`
+};
 export {
   ALERT_CLASSES,
   ALERT_DIALOG_CLASSES,
@@ -1338,6 +1932,8 @@ export {
   BREADCRUMB_CLASSES,
   CALENDAR_CLASSES,
   CARD_CLASSES,
+  CAROUSEL_CLASSES,
+  CAROUSEL_GEOMETRY,
   CHECKBOX_CLASSES,
   CHOICE_TILES_CLASSES,
   CODE_BLOCK_CLASSES,
@@ -1381,6 +1977,15 @@ export {
   MOBILE_PAGE,
   MOBILE_SHEET,
   MOBILE_SHEET_FULL,
+  MOSAIC_CLASSES,
+  MOSAIC_GEOMETRY,
+  MOTION_MAX_FPS2 as MOTION_MAX_FPS,
+  MOTION_MAX_PLAYING2 as MOTION_MAX_PLAYING,
+  MotionCanvasPool2 as MotionCanvasPool,
+  MotionStateDriver2 as MotionStateDriver,
+  MotionView2 as MotionView,
+  OUTLINE_CLASSES,
+  OUTLINE_GEOMETRY,
   POPOVER_CLASSES,
   PROGRESS_CLASSES,
   PROGRESS_RING_CLASSES,
@@ -1423,12 +2028,21 @@ export {
   VOICE_WAVE_CLASSES2 as VOICE_WAVE_CLASSES,
   VOICE_WAVE_SIZES2 as VOICE_WAVE_SIZES,
   VOICE_WAVE_SIZE_PX2 as VOICE_WAVE_SIZE_PX,
+  ZOOMABLE_IMAGE_CLASSES,
+  ZOOMABLE_IMAGE_NATIVE_TRANSITION,
+  ZOOMABLE_IMAGE_TRANSITION,
+  ZOOM_CONTROLS,
+  ZOOM_DOUBLE_TAP_MS,
+  ZOOM_DOUBLE_TAP_SLOP,
+  ZOOM_TAP_SLOP,
+  ZOOM_WHEEL_SETTLE_MS,
   alertVariants,
   avatarFallbackColors,
   avatarFallbackHue,
   avatarHueIndex,
   badgeLabel,
   buttonVariants,
+  carouselCounterText,
   choiceColumns,
   choiceToggle,
   choiceValues,
@@ -1439,6 +2053,7 @@ export {
   commandScore,
   createCommandStore,
   createToastStore,
+  createZoomController,
   dockPileGeometry,
   elementScale2 as elementScale,
   filterCommandItems,
@@ -1446,9 +2061,24 @@ export {
   isTypeaheadPortalInteraction,
   layoutSize2 as layoutSize,
   middleTruncate,
+  mosaicTiles,
+  motionA11y2 as motionA11y,
+  motionBoxStyle2 as motionBoxStyle,
+  motionCanPaint2 as motionCanPaint,
+  motionConcat2 as motionConcat,
+  motionDeclaredSize2 as motionDeclaredSize,
+  motionDotLottie2 as motionDotLottie,
+  motionFit2 as motionFit,
+  motionFitMatrix2 as motionFitMatrix,
+  motionFrameSize2 as motionFrameSize,
+  motionFromDotLottie2 as motionFromDotLottie,
+  motionThemeSlots2 as motionThemeSlots,
   observeCommandListHeight,
+  outlineCountText,
+  paintMotionFrame2 as paintMotionFrame,
   progressIndicatorTransform,
   progressRingPercent,
+  resetMotionThemeIds2 as resetMotionThemeIds,
   ringGeometry,
   scrollAreaCornerStyle,
   scrollAreaRootStyle,
@@ -1469,8 +2099,13 @@ export {
   voiceWaveClock2 as voiceWaveClock,
   voiceWaveFitChild2 as voiceWaveFitChild,
   voiceWaveName2 as voiceWaveName,
-  voiceWaveQuiet2 as voiceWaveQuiet
+  voiceWaveQuiet2 as voiceWaveQuiet,
+  zoomBoxAspect,
+  zoomDeclaredSize,
+  zoomImageStyle,
+  zoomPillOf,
+  zoomableImageLayout
 };
 
-//# debugId=126D7C3DA58A626B64756E2164756E21
+//# debugId=BD3177F492C31D0164756E2164756E21
 //# sourceMappingURL=index.js.map