@exponential_app/eui-solid 0.3.0 → 0.4.0

package/dist/chunks/{image-loading-status--T9ny7b0.js → zoomable-image-CmoMEUF6.js}

@@ -1,11 +1,12 @@
-import { createComponent, mergeProps, Dynamic, spread, insert, template, effect, setAttribute, style, use } from "solid-js/web";
 import { splitProps, createRoot, For, createSignal, createEffect, onCleanup, getOwner, createRenderEffect, Show, children, untrack, on, createContext, useContext, onMount, createMemo, createComputed } from "solid-js";
-import { Icon, Loader, CircleDashed, Star, Upload, Search, Calendar, PhoneIncoming, PhoneOff, Ear, Volume2, MicOff, Mic, AudioLines, Hand, QrCode, ScanLine, CheckCheck, Menu, Ellipsis, ArrowLeft, Send, Paperclip, CircleStop, CircleX, TriangleAlert, CircleCheck, Info, Clock, Plus, Minus, File, Copy, X, ChevronsUpDown, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, Check, Play, Square } from "lucide-solid";
 import { CUSTOM_ICON_NODES, lookupIcon, layoutSize, typeaheadStep, nextEnabledIndex, str, bool } from "@exponential_app/eui/web";
-import { OVERLAY_PADDING } from "@exponential_app/eui";
+import { createComponent, mergeProps, Dynamic, spread, insert, template, effect, setAttribute, style, use, memo, className, addEventListener } from "solid-js/web";
+import { Icon, Pause, Play, LoaderCircle, CircleDashed, Star, Upload, Search, Calendar, PhoneIncoming, PhoneOff, Ear, Volume2, MicOff, Mic, AudioLines, Maximize2, Hand, QrCode, ScanLine, CheckCheck, Menu, Ellipsis, ArrowLeft, Send, Paperclip, CircleStop, CircleX, TriangleAlert, CircleCheck, Info, Clock, Plus, Minus, File, Copy, X, ChevronsUpDown, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, Check, Square, Circle } from "lucide-solid";
+import { OVERLAY_PADDING, zoomPercent, zoomBounds, zoomMenu, zoomResize, zoomPanRoom, zoomMomentumActive, zoomMomentum, zoomPinch, zoomDrag, zoomKey, zoomDoubleTap, zoomStep, zoomScroll, zoomWheel, zoomCentre, zoomTo, zoomAtRest, zoomClamp, zoomRestView, zoomIsTall, ZOOM } from "@exponential_app/eui";
+import { cn, buttonVariants, DROPDOWN_MENU_CLASSES, zoomDeclaredSize, ZOOMABLE_IMAGE_TRANSITION, ZOOMABLE_IMAGE_CLASSES, zoomImageStyle, zoomBoxAspect, createZoomController } from "@exponential_app/eui/web/primitives";
 import { hideOthers } from "aria-hidden";
 import { offset, shift, limitShift, flip, size, autoUpdate, computePosition } from "@floating-ui/dom";
-var _tmpl$$4 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
+var _tmpl$$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
 const CHROME = {
   check: Check,
   chevronDown: ChevronDown,
@@ -18,8 +19,9 @@ const CHROME = {
   send: Send,
   stop: Square,
   play: Play,
+  pause: Pause,
   attach: Paperclip,
-  spinner: Loader,
+  spinner: LoaderCircle,
   placeholder: CircleDashed
 };
 const FALLBACK_ICONS = {
@@ -52,6 +54,8 @@ const FALLBACK_ICONS = {
   "ui-scan": ScanLine,
   "ui-qr-code": QrCode,
   "ui-hold": Hand,
+  // EXP-1586: the ZoomableImage pill's fit button.
+  "ui-fullscreen": Maximize2,
   "voice-level": AudioLines,
   "call-mute": Mic,
   "call-unmute": MicOff,
@@ -109,7 +113,7 @@ function LucideSvg(props) {
   const size2 = () => local.size ?? 24;
   const attr = (name, fallback) => name in rest ? rest[name] : fallback;
   return (() => {
-    var _el$ = _tmpl$$4();
+    var _el$ = _tmpl$$7();
     spread(_el$, mergeProps({
       get ["aria-hidden"]() {
         return hasA11y() ? void 0 : `true`;
@@ -197,7 +201,7 @@ function css(style2) {
   return out;
 }
 const px = (v) => typeof v === `number` ? v === 0 ? `0` : `${v}px` : v;
-function createMediaQuery(query, fallback = false) {
+function createMediaQuery$1(query, fallback = false) {
   if (typeof window === `undefined` || typeof window.matchMedia !== `function`) return () => fallback;
   const mql = window.matchMedia(query);
   const [matches, setMatches] = createSignal(mql.matches);
@@ -668,7 +672,7 @@ function useModalEffects(el, lockScroll) {
   onCleanup(undo);
   if (lockScroll) useScrollLock();
 }
-var _tmpl$$3 = /* @__PURE__ */ template(`<div data-radix-popper-content-wrapper>`);
+var _tmpl$$6 = /* @__PURE__ */ template(`<div data-radix-popper-content-wrapper>`);
 const transformOrigin = {
   name: `transformOrigin`,
   fn(data) {
@@ -715,7 +719,7 @@ function Popper(props) {
   let zIndex;
   let disposed = false;
   const wrapper = (() => {
-    var _el$ = _tmpl$$3();
+    var _el$ = _tmpl$$6();
     effect(() => setAttribute(_el$, "dir", props.dir));
     return _el$;
   })();
@@ -858,7 +862,7 @@ function popperWrapper(opts) {
     return css(s);
   };
   const wrapper = (() => {
-    var _el$2 = _tmpl$$3();
+    var _el$2 = _tmpl$$6();
     insert(_el$2, () => opts.content(placed, (el) => contentEl = el));
     effect((_p$) => {
       var _v$ = style$1(), _v$2 = opts.dir?.();
@@ -969,10 +973,10 @@ function graceArea(exit, from, to) {
   const padded = m === left ? [{ x: exit.x + padding, y: exit.y - padding }, { x: exit.x + padding, y: exit.y + padding }] : m === right ? [{ x: exit.x - padding, y: exit.y - padding }, { x: exit.x - padding, y: exit.y + padding }] : m === top ? [{ x: exit.x - padding, y: exit.y + padding }, { x: exit.x + padding, y: exit.y + padding }] : [{ x: exit.x - padding, y: exit.y - padding }, { x: exit.x + padding, y: exit.y - padding }];
   return hull([...padded, { x: to.left, y: to.top }, { x: to.right, y: to.top }, { x: to.right, y: to.bottom }, { x: to.left, y: to.bottom }]);
 }
-var _tmpl$$2 = /* @__PURE__ */ template(`<span role=tooltip>`);
+var _tmpl$$5 = /* @__PURE__ */ template(`<span role=tooltip>`);
 function VisuallyHidden(props) {
   const el = (() => {
-    var _el$ = _tmpl$$2();
+    var _el$ = _tmpl$$5();
     insert(_el$, () => props.children);
     effect(() => setAttribute(_el$, "id", props.id));
     return _el$;
@@ -1034,7 +1038,7 @@ function findNextItem(items, search, current) {
   const next = wrapped.find((item) => item.label.toLowerCase().startsWith(normalized.toLowerCase()));
   return next !== current ? next : void 0;
 }
-var _tmpl$$1 = /* @__PURE__ */ template(`<div role=menu aria-orientation=vertical data-radix-menu-content>`);
+var _tmpl$$4 = /* @__PURE__ */ template(`<div role=menu aria-orientation=vertical data-radix-menu-content>`);
 let usingKeyboard = false;
 let keyboardListeners = 0;
 function useKeyboardTracking() {
@@ -1163,7 +1167,7 @@ function MenuContent(props) {
     },
     children: (popper) => {
       const el = (() => {
-        var _el$ = _tmpl$$1();
+        var _el$ = _tmpl$$4();
         spread(_el$, mergeProps({
           get ["data-side"]() {
             return popper.placedSide();
@@ -1510,7 +1514,7 @@ function createElementSize(el) {
   });
   return size2;
 }
-var _tmpl$ = /* @__PURE__ */ template(`<input aria-hidden=true tabindex=-1>`), _tmpl$2 = /* @__PURE__ */ template(`<input>`), _tmpl$3 = /* @__PURE__ */ template(`<select aria-hidden=true tabindex=-1>`), _tmpl$4 = /* @__PURE__ */ template(`<option value>`), _tmpl$5 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$$3 = /* @__PURE__ */ template(`<input aria-hidden=true tabindex=-1>`), _tmpl$2$3 = /* @__PURE__ */ template(`<input>`), _tmpl$3$2 = /* @__PURE__ */ template(`<select aria-hidden=true tabindex=-1>`), _tmpl$4$2 = /* @__PURE__ */ template(`<option value>`), _tmpl$5$1 = /* @__PURE__ */ template(`<option>`);
 function createInForm(el) {
   const [inForm, setInForm] = createSignal(false);
   onMount(() => setInForm(Boolean(el()?.closest(`form`))));
@@ -1557,7 +1561,7 @@ function BubbleCheck(props) {
     });
   };
   return (() => {
-    var _el$ = _tmpl$();
+    var _el$ = _tmpl$$3();
     var _ref$ = input;
     typeof _ref$ === "function" ? use(_ref$, _el$) : input = _el$;
     setAttribute(_el$, "checked", initial ? `` : void 0);
@@ -1583,7 +1587,7 @@ function SliderBubble(props) {
   const initial = untrack(() => String(props.value));
   bubbleOnChange(() => input, () => props.value, (el, v) => Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, `value`)?.set?.call(el, v), `input`);
   return (() => {
-    var _el$2 = _tmpl$2();
+    var _el$2 = _tmpl$2$3();
     var _ref$2 = input;
     typeof _ref$2 === "function" ? use(_ref$2, _el$2) : input = _el$2;
     setAttribute(_el$2, "value", initial);
@@ -1626,17 +1630,17 @@ function NativeSelect(props) {
     wordWrap: `normal`
   });
   return (() => {
-    var _el$3 = _tmpl$3();
+    var _el$3 = _tmpl$3$2();
     _el$3.addEventListener("change", (e) => props.onChange(e.currentTarget.value));
     var _ref$3 = el;
     typeof _ref$3 === "function" ? use(_ref$3, _el$3) : el = _el$3;
-    insert(_el$3, initial === void 0 ? _tmpl$4() : null, null);
+    insert(_el$3, initial === void 0 ? _tmpl$4$2() : null, null);
     insert(_el$3, createComponent(For, {
       get each() {
         return props.options;
       },
       children: (o) => (() => {
-        var _el$5 = _tmpl$5();
+        var _el$5 = _tmpl$5$1();
         insert(_el$5, () => str(o.label));
         effect((_p$) => {
           var _v$0 = bool(o.disabled), _v$1 = initial !== void 0 && o.value === initial ? `` : void 0;
@@ -1687,7 +1691,1323 @@ function createImageLoadingStatus(src) {
   }
   return status;
 }
+function Button(props) {
+  const [local, rest] = splitProps(props, [`class`, `variant`, `size`, `as`]);
+  const variant = () => local.variant ?? `default`;
+  const size2 = () => local.size ?? `default`;
+  return createComponent(Dynamic, mergeProps({
+    get component() {
+      return local.as ?? `button`;
+    },
+    "data-slot": "button",
+    get ["data-variant"]() {
+      return variant();
+    },
+    get ["data-size"]() {
+      return size2();
+    },
+    get ["class"]() {
+      return cn(buttonVariants({
+        variant: variant(),
+        size: size2(),
+        className: local.class
+      }));
+    }
+  }, rest));
+}
+var _tmpl$$2 = /* @__PURE__ */ template(`<div>`), _tmpl$2$2 = /* @__PURE__ */ template(`<div tabindex=-1>`), _tmpl$3$1 = /* @__PURE__ */ template(`<h2>`), _tmpl$4$1 = /* @__PURE__ */ template(`<p>`);
+function callHandler(handler, event) {
+  if (typeof handler === `function`) handler(event);
+  else if (Array.isArray(handler) && typeof handler[0] === `function`) handler[0](handler[1], event);
+}
+function composeHandlers(user, ours, checkForDefaultPrevented = true) {
+  return (event) => {
+    callHandler(user, event);
+    if (!checkForDefaultPrevented || !event.defaultPrevented) ours(event);
+  };
+}
+function callRef(ref, el) {
+  if (typeof ref === `function`) ref(el);
+}
+function mergeRefs(...refs) {
+  return (el) => {
+    for (const r of refs) if (typeof r === `function`) r(el);
+  };
+}
+function styleObject(style2) {
+  if (!style2 || typeof style2 !== `object`) return {};
+  const out = {};
+  for (const [k, v] of Object.entries(style2)) out[k] = v === void 0 || v === null ? void 0 : String(v);
+  return out;
+}
+function createOpenState(o) {
+  const [inner, setInner] = createSignal(untrack(() => o.defaultOpen) ?? false);
+  const open = () => o.open() ?? inner();
+  const set = (next) => {
+    const prev = untrack(open);
+    if (next !== prev) untrack(o.onOpenChange)?.(next);
+    if (untrack(o.open) === void 0) setInner(next);
+  };
+  return [open, set];
+}
+const stateOf = (open) => open ? `open` : `closed`;
+let layerMounted = false;
+function noteLayerMount() {
+  if (layerMounted) return;
+  layerMounted = true;
+  queueMicrotask(() => layerMounted = false);
+}
+function layerMountedThisTask() {
+  return layerMounted;
+}
+function layerPointerEvents(layer, registered, lag) {
+  return lag && !registered ? void 0 : layer.pointerEvents(registered);
+}
+const DialogContext = createContext();
+function useDialogContext(part) {
+  const ctx = useContext(DialogContext);
+  if (!ctx) throw new Error(`\`${part}\` must be used within \`Dialog\``);
+  return ctx;
+}
+function DialogRoot(props) {
+  const [open, setOpen] = createOpenState({
+    open: () => props.open,
+    defaultOpen: props.defaultOpen,
+    onOpenChange: () => props.onOpenChange
+  });
+  const [trigger, setTrigger] = createSignal();
+  const value = {
+    open,
+    setOpen,
+    modal: untrack(() => props.modal) ?? true,
+    contentId: `radix-${createId()}`,
+    titleId: `radix-${createId()}`,
+    descriptionId: `radix-${createId()}`,
+    trigger,
+    setTrigger
+  };
+  return createComponent(DialogContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+}
+let idCounter = 0;
+function createId() {
+  return `s${++idCounter}`;
+}
+function DialogTriggerPart(props) {
+  const ctx = useDialogContext(`DialogTrigger`);
+  const [local, rest] = splitProps(props, [`as`, `ref`, `onClick`]);
+  return createComponent(Dynamic, mergeProps({
+    get component() {
+      return local.as ?? `button`;
+    },
+    type: "button",
+    "aria-haspopup": "dialog",
+    get ["aria-expanded"]() {
+      return ctx.open() ? `true` : `false`;
+    },
+    get ["aria-controls"]() {
+      return ctx.contentId;
+    },
+    get ["data-state"]() {
+      return stateOf(ctx.open());
+    }
+  }, rest, {
+    ref(r$) {
+      var _ref$ = mergeRefs(local.ref, ctx.setTrigger);
+      typeof _ref$ === "function" && _ref$(r$);
+    },
+    get onClick() {
+      return composeHandlers(local.onClick, () => ctx.setOpen(!untrack(ctx.open)));
+    }
+  }));
+}
+function DialogClosePart(props) {
+  const ctx = useDialogContext(`DialogClose`);
+  const [local, rest] = splitProps(props, [`as`, `ref`, `onClick`]);
+  return createComponent(Dynamic, mergeProps({
+    get component() {
+      return local.as ?? `button`;
+    },
+    type: "button"
+  }, rest, {
+    ref(r$) {
+      var _ref$2 = local.ref;
+      typeof _ref$2 === "function" ? _ref$2(r$) : local.ref = r$;
+    },
+    get onClick() {
+      return composeHandlers(local.onClick, () => ctx.setOpen(false));
+    }
+  }));
+}
+function DialogPortalPart(props) {
+  const [mounted, setMounted] = createSignal(false);
+  onMount(() => setMounted(true));
+  return createComponent(LayerPortal, {
+    get mount() {
+      return memo(() => props.container !== void 0)() ? props.container : memo(() => !!mounted())() ? document.body : null;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function DialogOverlayPart(props) {
+  const ctx = useDialogContext(`DialogOverlay`);
+  const presence = createPresence(ctx.open);
+  const [local, rest] = splitProps(props, [`style`, `ref`]);
+  const Overlay = () => {
+    const el = (() => {
+      var _el$ = _tmpl$$2();
+      spread(_el$, mergeProps({
+        get ["data-state"]() {
+          return stateOf(ctx.open());
+        }
+      }, rest), false, false);
+      return _el$;
+    })();
+    presence.ref(el);
+    bindStyle(el, () => ({
+      "pointer-events": `auto`,
+      ...styleObject(local.style)
+    }));
+    callRef(local.ref, el);
+    onMount(() => useScrollLock());
+    return el;
+  };
+  return createComponent(Show, {
+    get when() {
+      return memo(() => !!ctx.modal)() && presence.mounted();
+    },
+    get children() {
+      return createComponent(Overlay, {});
+    }
+  });
+}
+function DialogContentPart(props) {
+  const ctx = useDialogContext(`DialogContent`);
+  const presence = createPresence(ctx.open);
+  const [local, rest] = splitProps(props, [`role`, `style`, `ref`, `children`, `onOpenAutoFocus`, `onCloseAutoFocus`, `onEscapeKeyDown`, `onPointerDownOutside`, `onFocusOutside`, `onInteractOutside`, `onKeyDown`]);
+  const Content = () => {
+    const modal = ctx.modal;
+    let interactedOutside = false;
+    let pointerDownOutside = false;
+    const layer = createLayer({
+      disableOutsidePointerEvents: () => modal,
+      onEscapeKeyDown: (e) => local.onEscapeKeyDown?.(e),
+      onPointerDownOutside: (e) => {
+        local.onPointerDownOutside?.(e);
+        if (!modal || e.defaultPrevented) return;
+        const original = e.detail.originalEvent;
+        const ctrlLeftClick = original.button === 0 && original.ctrlKey === true;
+        if (original.button === 2 || ctrlLeftClick) e.preventDefault();
+      },
+      onFocusOutside: (e) => {
+        local.onFocusOutside?.(e);
+        if (modal && !e.defaultPrevented) e.preventDefault();
+      },
+      onInteractOutside: (e) => {
+        local.onInteractOutside?.(e);
+        if (modal) return;
+        if (!e.defaultPrevented) {
+          interactedOutside = true;
+          if (e.detail.originalEvent.type === `pointerdown`) pointerDownOutside = true;
+        }
+        const target = e.target;
+        if (target && ctx.trigger()?.contains(target)) e.preventDefault();
+        if (e.detail.originalEvent.type === `focusin` && pointerDownOutside) e.preventDefault();
+      },
+      onDismiss: () => ctx.setOpen(false)
+    });
+    const scope = createFocusScope({
+      trapped: () => modal && ctx.open(),
+      loop: true,
+      onMountAutoFocus: (e) => local.onOpenAutoFocus?.(e),
+      onUnmountAutoFocus: (e) => {
+        if (modal) {
+          local.onCloseAutoFocus?.(e);
+          if (e.defaultPrevented) return;
+          e.preventDefault();
+          ctx.trigger()?.focus();
+          return;
+        }
+        local.onCloseAutoFocus?.(e);
+        if (!e.defaultPrevented) {
+          if (!interactedOutside) ctx.trigger()?.focus();
+          e.preventDefault();
+        }
+        interactedOutside = false;
+        pointerDownOutside = false;
+      }
+    });
+    const [registered, setRegistered] = createSignal(false);
+    const lag = layerMountedThisTask();
+    const el = (() => {
+      var _el$2 = _tmpl$2$2();
+      spread(_el$2, mergeProps({
+        get role() {
+          return local.role ?? `dialog`;
+        },
+        get id() {
+          return ctx.contentId;
+        },
+        get ["aria-describedby"]() {
+          return ctx.descriptionId;
+        },
+        get ["aria-labelledby"]() {
+          return ctx.titleId;
+        },
+        get ["data-state"]() {
+          return stateOf(ctx.open());
+        }
+      }, rest, {
+        "onKeyDown": (e) => {
+          callHandler(local.onKeyDown, e);
+          scope.onKeyDown(e);
+        }
+      }), false, true);
+      insert(_el$2, () => local.children);
+      return _el$2;
+    })();
+    presence.ref(el);
+    bindStyle(el, () => ({
+      "pointer-events": layerPointerEvents(layer, registered(), lag),
+      ...styleObject(local.style)
+    }));
+    callRef(local.ref, el);
+    onMount(() => {
+      layer.attach(el);
+      setRegistered(true);
+      noteLayerMount();
+      scope.attach(el);
+      useFocusGuards();
+      if (modal) useModalEffects(el, false);
+    });
+    return el;
+  };
+  return createComponent(Show, {
+    get when() {
+      return presence.mounted();
+    },
+    get children() {
+      return createComponent(Content, {});
+    }
+  });
+}
+function DialogTitlePart(props) {
+  const ctx = useDialogContext(`DialogTitle`);
+  return (() => {
+    var _el$3 = _tmpl$3$1();
+    spread(_el$3, mergeProps({
+      get id() {
+        return ctx.titleId;
+      }
+    }, props), false, false);
+    return _el$3;
+  })();
+}
+function DialogDescriptionPart(props) {
+  const ctx = useDialogContext(`DialogDescription`);
+  return (() => {
+    var _el$4 = _tmpl$4$1();
+    spread(_el$4, mergeProps({
+      get id() {
+        return ctx.descriptionId;
+      }
+    }, props), false, false);
+    return _el$4;
+  })();
+}
+var _tmpl$$1 = /* @__PURE__ */ template(`<div role=group data-slot=dropdown-menu-group>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div role=menuitem>`), _tmpl$3 = /* @__PURE__ */ template(`<span>`), _tmpl$4 = /* @__PURE__ */ template(`<div role=menuitemcheckbox><span>`), _tmpl$5 = /* @__PURE__ */ template(`<div role=group data-slot=dropdown-menu-radio-group>`), _tmpl$6 = /* @__PURE__ */ template(`<div role=menuitemradio><span>`), _tmpl$7 = /* @__PURE__ */ template(`<div data-slot=dropdown-menu-label>`), _tmpl$8 = /* @__PURE__ */ template(`<div role=separator aria-orientation=horizontal data-slot=dropdown-menu-separator>`), _tmpl$9 = /* @__PURE__ */ template(`<span data-slot=dropdown-menu-shortcut>`), _tmpl$0 = /* @__PURE__ */ template(`<div role=menuitem aria-haspopup=menu>`);
+const RootContext = createContext();
+const useRoot = (part) => {
+  const ctx = useContext(RootContext);
+  if (!ctx) throw new Error(`\`${part}\` must be used within \`DropdownMenu\``);
+  return ctx;
+};
+const LevelOpenContext = createContext(() => false);
+function DropdownMenu(props) {
+  const [open, setOpen] = createOpenState({
+    open: () => props.open,
+    defaultOpen: props.defaultOpen,
+    onOpenChange: () => props.onOpenChange
+  });
+  const [trigger, setTrigger] = createSignal();
+  useKeyboardTracking();
+  const value = {
+    open,
+    setOpen,
+    triggerId: `radix-${createId()}`,
+    contentId: `radix-${createId()}`,
+    trigger,
+    setTrigger,
+    dir: () => props.dir ?? `ltr`
+  };
+  return createComponent(RootContext.Provider, {
+    value,
+    get children() {
+      return createComponent(LevelOpenContext.Provider, {
+        value: open,
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
+}
+function DropdownMenuPortal(props) {
+  return createComponent(DialogPortalPart, props);
+}
+function DropdownMenuTrigger(props) {
+  const ctx = useRoot(`DropdownMenuTrigger`);
+  const [local, rest] = splitProps(props, [`as`, `ref`, `disabled`, `onPointerDown`, `onKeyDown`]);
+  const disabled = () => local.disabled ?? false;
+  return createComponent(Dynamic, mergeProps({
+    get component() {
+      return local.as ?? `button`;
+    },
+    "data-slot": "dropdown-menu-trigger",
+    type: "button",
+    get id() {
+      return ctx.triggerId;
+    },
+    "aria-haspopup": "menu",
+    get ["aria-expanded"]() {
+      return ctx.open() ? `true` : `false`;
+    },
+    get ["aria-controls"]() {
+      return memo(() => !!ctx.open())() ? ctx.contentId : void 0;
+    },
+    get ["data-state"]() {
+      return stateOf(ctx.open());
+    },
+    get ["data-disabled"]() {
+      return disabled() ? `` : void 0;
+    },
+    get disabled() {
+      return disabled();
+    }
+  }, rest, {
+    ref(r$) {
+      var _ref$ = mergeRefs(local.ref, ctx.setTrigger);
+      typeof _ref$ === "function" && _ref$(r$);
+    },
+    get onPointerDown() {
+      return composeHandlers(local.onPointerDown, (e) => {
+        if (!untrack(disabled) && e.button === 0 && e.ctrlKey === false) {
+          const was = untrack(ctx.open);
+          ctx.setOpen(!was);
+          if (!was) e.preventDefault();
+        }
+      });
+    },
+    get onKeyDown() {
+      return composeHandlers(local.onKeyDown, (e) => {
+        if (untrack(disabled)) return;
+        if ([`Enter`, ` `].includes(e.key)) ctx.setOpen(!untrack(ctx.open));
+        if (e.key === `ArrowDown`) ctx.setOpen(true);
+        if ([`Enter`, ` `, `ArrowDown`].includes(e.key)) e.preventDefault();
+      });
+    }
+  }));
+}
+const CONTENT_KEYS = [`class`, `side`, `align`, `sideOffset`, `alignOffset`, `collisionPadding`, `container`, `children`, `ref`, `onKeyDown`, `onCloseAutoFocus`, `onEscapeKeyDown`, `onFocusOutside`, `onInteractOutside`];
+function DropdownMenuContent(props) {
+  const ctx = useRoot(`DropdownMenuContent`);
+  const [local, rest] = splitProps(props, CONTENT_KEYS);
+  const presence = createPresence(ctx.open);
+  let interactedOutside = false;
+  return createComponent(DropdownMenuPortal, {
+    get container() {
+      return local.container;
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return presence.mounted();
+        },
+        children: (_) => {
+          const lag = layerMountedThisTask();
+          return createComponent(MenuContent, {
+            get anchor() {
+              return ctx.trigger();
+            },
+            get side() {
+              return local.side ?? `bottom`;
+            },
+            get align() {
+              return local.align ?? `center`;
+            },
+            get sideOffset() {
+              return local.sideOffset ?? 4;
+            },
+            get alignOffset() {
+              return local.alignOffset;
+            },
+            get collisionPadding() {
+              return local.collisionPadding ?? 0;
+            },
+            get dir() {
+              return ctx.dir();
+            },
+            kind: "dropdown-menu",
+            lagParentLayer: lag,
+            root: true,
+            get id() {
+              return ctx.contentId;
+            },
+            get labelledBy() {
+              return ctx.triggerId;
+            },
+            state: () => stateOf(ctx.open()),
+            attrs: () => ({
+              "data-slot": `dropdown-menu-content`,
+              class: cn(DROPDOWN_MENU_CLASSES.content, local.class),
+              ...rest
+            }),
+            setContent: (el) => {
+              if (el) {
+                presence.ref(el);
+                noteLayerMount();
+                callRef(local.ref, el);
+              }
+            },
+            onDismiss: () => ctx.setOpen(false),
+            get onKeyDown() {
+              return local.onKeyDown;
+            },
+            get onEscapeKeyDown() {
+              return local.onEscapeKeyDown;
+            },
+            get onFocusOutside() {
+              return local.onFocusOutside;
+            },
+            onInteractOutside: (e) => {
+              local.onInteractOutside?.(e);
+              if (e.defaultPrevented) return;
+              const original = e.detail.originalEvent;
+              const ctrlLeftClick = original.button === 0 && original.ctrlKey === true;
+              if (original.button === 2 || ctrlLeftClick) interactedOutside = true;
+            },
+            onCloseAutoFocus: (e) => {
+              local.onCloseAutoFocus?.(e);
+              if (e.defaultPrevented) return;
+              if (!interactedOutside) ctx.trigger()?.focus();
+              interactedOutside = false;
+              e.preventDefault();
+            },
+            get children() {
+              return local.children;
+            }
+          });
+        }
+      });
+    }
+  });
+}
+function DropdownMenuGroup(props) {
+  return (() => {
+    var _el$ = _tmpl$$1();
+    spread(_el$, props, false, false);
+    return _el$;
+  })();
+}
+const insetAttr = (inset) => inset === void 0 ? void 0 : String(inset);
+function createItem(local, onSelect) {
+  const root = useRoot(`DropdownMenuItem`);
+  const row = createSelectable(() => local.disabled ?? false, (e) => onSelect(e), () => root.setOpen(false));
+  const h = row.handlers;
+  return {
+    attrs: row.attrs,
+    ref: mergeRefs(row.ref, local.ref),
+    handlers: {
+      onClick: composeHandlers(local.onClick, h.onClick),
+      onPointerDown: composeHandlers(local.onPointerDown, h.onPointerDown, false),
+      onPointerUp: composeHandlers(local.onPointerUp, h.onPointerUp),
+      onPointerMove: composeHandlers(local.onPointerMove, h.onPointerMove),
+      onPointerLeave: composeHandlers(local.onPointerLeave, h.onPointerLeave),
+      onKeyDown: composeHandlers(local.onKeyDown, h.onKeyDown),
+      onFocus: composeHandlers(local.onFocus, h.onFocus),
+      onBlur: composeHandlers(local.onBlur, h.onBlur)
+    }
+  };
+}
+const ITEM_KEYS = [`disabled`, `onSelect`, `ref`, `onClick`, `onPointerDown`, `onPointerUp`, `onPointerMove`, `onPointerLeave`, `onKeyDown`, `onFocus`, `onBlur`];
+function DropdownMenuItem(props) {
+  const [local, handlers, rest] = splitProps(props, [`class`, `inset`, `variant`], ITEM_KEYS);
+  const item = createItem(handlers, (e) => handlers.onSelect?.(e));
+  return (() => {
+    var _el$2 = _tmpl$2$1();
+    var _ref$2 = item.ref;
+    typeof _ref$2 === "function" ? use(_ref$2, _el$2) : item.ref = _el$2;
+    spread(_el$2, mergeProps(() => item.attrs(), {
+      "data-slot": "dropdown-menu-item",
+      get ["data-inset"]() {
+        return insetAttr(local.inset);
+      },
+      get ["data-variant"]() {
+        return local.variant ?? `default`;
+      },
+      get ["class"]() {
+        return cn(DROPDOWN_MENU_CLASSES.item, local.class);
+      }
+    }, rest, () => item.handlers), false, false);
+    return _el$2;
+  })();
+}
+const checkedState = (c) => c === `indeterminate` ? `indeterminate` : c ? `checked` : `unchecked`;
+const IndicatorContext = createContext(() => false);
+function ItemIndicator(props) {
+  const checked = useContext(IndicatorContext);
+  return createComponent(Show, {
+    get when() {
+      return checked() === true || checked() === `indeterminate`;
+    },
+    get children() {
+      var _el$3 = _tmpl$3();
+      insert(_el$3, () => props.children);
+      effect(() => setAttribute(_el$3, "data-state", checkedState(checked())));
+      return _el$3;
+    }
+  });
+}
+function DropdownMenuCheckboxItem(props) {
+  const [local, handlers, rest] = splitProps(props, [`class`, `children`, `checked`, `onCheckedChange`], ITEM_KEYS);
+  const checked = () => local.checked ?? false;
+  const item = createItem(handlers, (e) => {
+    handlers.onSelect?.(e);
+    const c = untrack(checked);
+    local.onCheckedChange?.(c === `indeterminate` ? true : !c);
+  });
+  return createComponent(IndicatorContext.Provider, {
+    value: checked,
+    get children() {
+      var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild;
+      var _ref$3 = item.ref;
+      typeof _ref$3 === "function" ? use(_ref$3, _el$4) : item.ref = _el$4;
+      spread(_el$4, mergeProps({
+        get ["aria-checked"]() {
+          return memo(() => checked() === `indeterminate`)() ? `mixed` : checked() ? `true` : `false`;
+        }
+      }, () => item.attrs(), {
+        "data-slot": "dropdown-menu-checkbox-item",
+        get ["class"]() {
+          return cn(DROPDOWN_MENU_CLASSES.checkItem, local.class);
+        }
+      }, rest, {
+        get ["data-state"]() {
+          return checkedState(checked());
+        }
+      }, () => item.handlers), false, true);
+      insert(_el$5, createComponent(ItemIndicator, {
+        get children() {
+          return createComponent(PaintIcon, {
+            icon: Check,
+            get ["class"]() {
+              return DROPDOWN_MENU_CLASSES.checkIcon;
+            }
+          });
+        }
+      }));
+      insert(_el$4, () => local.children, null);
+      effect(() => className(_el$5, DROPDOWN_MENU_CLASSES.itemIndicator));
+      return _el$4;
+    }
+  });
+}
+const RadioGroupContext = createContext({
+  value: () => void 0,
+  onValueChange: () => {
+  }
+});
+function DropdownMenuRadioGroup(props) {
+  const [local, rest] = splitProps(props, [`value`, `onValueChange`]);
+  return createComponent(RadioGroupContext.Provider, {
+    value: {
+      value: () => local.value,
+      onValueChange: (v) => local.onValueChange?.(v)
+    },
+    get children() {
+      var _el$6 = _tmpl$5();
+      spread(_el$6, rest, false, false);
+      return _el$6;
+    }
+  });
+}
+function DropdownMenuRadioItem(props) {
+  const [local, handlers, rest] = splitProps(props, [`class`, `children`, `value`], ITEM_KEYS);
+  const group = useContext(RadioGroupContext);
+  const checked = () => local.value === group.value();
+  const item = createItem(handlers, (e) => {
+    handlers.onSelect?.(e);
+    group.onValueChange(local.value);
+  });
+  return createComponent(IndicatorContext.Provider, {
+    value: checked,
+    get children() {
+      var _el$7 = _tmpl$6(), _el$8 = _el$7.firstChild;
+      var _ref$4 = item.ref;
+      typeof _ref$4 === "function" ? use(_ref$4, _el$7) : item.ref = _el$7;
+      spread(_el$7, mergeProps({
+        get ["aria-checked"]() {
+          return checked() ? `true` : `false`;
+        }
+      }, () => item.attrs(), {
+        "data-slot": "dropdown-menu-radio-item",
+        get ["class"]() {
+          return cn(DROPDOWN_MENU_CLASSES.checkItem, local.class);
+        }
+      }, rest, {
+        get ["data-state"]() {
+          return checkedState(checked());
+        }
+      }, () => item.handlers), false, true);
+      insert(_el$8, createComponent(ItemIndicator, {
+        get children() {
+          return createComponent(PaintIcon, {
+            icon: Circle,
+            get ["class"]() {
+              return DROPDOWN_MENU_CLASSES.radioIcon;
+            }
+          });
+        }
+      }));
+      insert(_el$7, () => local.children, null);
+      effect(() => className(_el$8, DROPDOWN_MENU_CLASSES.itemIndicator));
+      return _el$7;
+    }
+  });
+}
+function DropdownMenuLabel(props) {
+  const [local, rest] = splitProps(props, [`class`, `inset`]);
+  return (() => {
+    var _el$9 = _tmpl$7();
+    spread(_el$9, mergeProps({
+      get ["data-inset"]() {
+        return insetAttr(local.inset);
+      },
+      get ["class"]() {
+        return cn(DROPDOWN_MENU_CLASSES.label, local.class);
+      }
+    }, rest), false, false);
+    return _el$9;
+  })();
+}
+function DropdownMenuSeparator(props) {
+  const [local, rest] = splitProps(props, [`class`]);
+  return (() => {
+    var _el$0 = _tmpl$8();
+    spread(_el$0, mergeProps({
+      get ["class"]() {
+        return cn(DROPDOWN_MENU_CLASSES.separator, local.class);
+      }
+    }, rest), false, false);
+    return _el$0;
+  })();
+}
+function DropdownMenuShortcut(props) {
+  const [local, rest] = splitProps(props, [`class`]);
+  return (() => {
+    var _el$1 = _tmpl$9();
+    spread(_el$1, mergeProps({
+      get ["class"]() {
+        return cn(DROPDOWN_MENU_CLASSES.shortcut, local.class);
+      }
+    }, rest), false, false);
+    return _el$1;
+  })();
+}
+const SubContext = createContext();
+const useSub = (part) => {
+  const ctx = useContext(SubContext);
+  if (!ctx) throw new Error(`\`${part}\` must be used within \`DropdownMenuSub\``);
+  return ctx;
+};
+function DropdownMenuSub(props) {
+  const parentOpen = useContext(LevelOpenContext);
+  const [open, setOpen] = createOpenState({
+    open: () => props.open,
+    defaultOpen: props.defaultOpen,
+    onOpenChange: () => props.onOpenChange
+  });
+  const [trigger, setTrigger] = createSignal();
+  const [content, setContent] = createSignal();
+  createEffect(on(parentOpen, (o) => o === false && setOpen(false)));
+  onCleanup(() => setOpen(false));
+  const value = {
+    open,
+    setOpen,
+    triggerId: `radix-${createId()}`,
+    contentId: `radix-${createId()}`,
+    trigger,
+    setTrigger,
+    content,
+    setContent
+  };
+  return createComponent(SubContext.Provider, {
+    value,
+    get children() {
+      return createComponent(LevelOpenContext.Provider, {
+        value: open,
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
+}
+function DropdownMenuSubTrigger(props) {
+  const root = useRoot(`DropdownMenuSubTrigger`);
+  const sub = useSub(`DropdownMenuSubTrigger`);
+  const [local, rest] = splitProps(props, [`class`, `inset`, `variant`, `children`, `disabled`, `ref`, `onClick`, `onPointerMove`, `onPointerLeave`, `onKeyDown`, `onFocus`, `onBlur`]);
+  const disabled = () => local.disabled ?? false;
+  const row = createMenuRow(disabled);
+  let openTimer;
+  let graceTimer;
+  const clearOpenTimer = () => {
+    clearTimeout(openTimer);
+    openTimer = void 0;
+  };
+  onCleanup(() => {
+    clearOpenTimer();
+    clearTimeout(graceTimer);
+    row.level.setGrace(null);
+  });
+  const openKey = () => root.dir() === `rtl` ? `ArrowLeft` : `ArrowRight`;
+  return (() => {
+    var _el$10 = _tmpl$0();
+    var _ref$5 = mergeRefs(row.ref, sub.setTrigger, local.ref);
+    typeof _ref$5 === "function" && use(_ref$5, _el$10);
+    spread(_el$10, mergeProps({
+      get id() {
+        return sub.triggerId;
+      },
+      get ["aria-expanded"]() {
+        return sub.open() ? `true` : `false`;
+      },
+      get ["aria-controls"]() {
+        return sub.contentId;
+      },
+      get ["data-state"]() {
+        return stateOf(sub.open());
+      }
+    }, () => row.attrs(), {
+      "data-slot": "dropdown-menu-sub-trigger",
+      get ["data-inset"]() {
+        return insetAttr(local.inset);
+      },
+      get ["data-variant"]() {
+        return local.variant ?? `default`;
+      },
+      get ["class"]() {
+        return cn(DROPDOWN_MENU_CLASSES.subTrigger, local.class);
+      }
+    }, rest, {
+      get onClick() {
+        return composeHandlers(local.onClick, (e) => {
+          if (untrack(disabled)) return;
+          e.currentTarget.focus();
+          if (!untrack(sub.open)) sub.setOpen(true);
+        });
+      },
+      get onPointerMove() {
+        return composeHandlers(local.onPointerMove, (e) => {
+          if (e.pointerType !== `mouse`) return;
+          if (row.level.onItemEnter(e)) return;
+          if (!untrack(disabled) && !untrack(sub.open) && !openTimer) {
+            row.level.setGrace(null);
+            openTimer = setTimeout(() => {
+              sub.setOpen(true);
+              clearOpenTimer();
+            }, 100);
+          }
+          row.handlers.onPointerMove(e);
+        });
+      },
+      get onPointerLeave() {
+        return composeHandlers(local.onPointerLeave, (e) => {
+          if (e.pointerType !== `mouse`) return;
+          clearOpenTimer();
+          const content = sub.content();
+          const rect = content?.getBoundingClientRect();
+          if (content && rect) {
+            const side = content.dataset.side;
+            const right = side === `right`;
+            const bleed = right ? -5 : 5;
+            const near = rect[right ? `left` : `right`];
+            const far = rect[right ? `right` : `left`];
+            row.level.setGrace({
+              area: [{
+                x: e.clientX + bleed,
+                y: e.clientY
+              }, {
+                x: near,
+                y: rect.top
+              }, {
+                x: far,
+                y: rect.top
+              }, {
+                x: far,
+                y: rect.bottom
+              }, {
+                x: near,
+                y: rect.bottom
+              }],
+              side
+            });
+            clearTimeout(graceTimer);
+            graceTimer = setTimeout(() => row.level.setGrace(null), 300);
+          } else {
+            if (row.level.onTriggerLeave(e)) return;
+            row.level.setGrace(null);
+            row.handlers.onPointerLeave(e);
+          }
+        });
+      },
+      get onKeyDown() {
+        return composeHandlers(local.onKeyDown, (e) => {
+          const typingAhead = row.level.search() !== ``;
+          if (untrack(disabled) || typingAhead && e.key === ` `) return;
+          if ([`Enter`, ` `, openKey()].includes(e.key)) {
+            sub.setOpen(true);
+            sub.content()?.focus();
+            e.preventDefault();
+            return;
+          }
+          row.handlers.onKeyDown(e);
+        });
+      },
+      get onFocus() {
+        return composeHandlers(local.onFocus, row.handlers.onFocus);
+      },
+      get onBlur() {
+        return composeHandlers(local.onBlur, row.handlers.onBlur);
+      }
+    }), false, true);
+    insert(_el$10, () => local.children, null);
+    insert(_el$10, createComponent(PaintIcon, {
+      icon: ChevronRight,
+      get ["class"]() {
+        return DROPDOWN_MENU_CLASSES.subChevron;
+      }
+    }), null);
+    return _el$10;
+  })();
+}
+function DropdownMenuSubContent(props) {
+  const root = useRoot(`DropdownMenuSubContent`);
+  const sub = useSub(`DropdownMenuSubContent`);
+  const [local, rest] = splitProps(props, CONTENT_KEYS);
+  const presence = createPresence(sub.open);
+  const closeKey = () => root.dir() === `rtl` ? `ArrowRight` : `ArrowLeft`;
+  return createComponent(DropdownMenuPortal, {
+    get container() {
+      return local.container;
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return presence.mounted();
+        },
+        children: (_) => {
+          const lag = layerMountedThisTask();
+          return createComponent(MenuContent, {
+            get anchor() {
+              return sub.trigger();
+            },
+            get side() {
+              return root.dir() === `rtl` ? `left` : `right`;
+            },
+            align: "start",
+            get sideOffset() {
+              return local.sideOffset ?? 0;
+            },
+            get alignOffset() {
+              return local.alignOffset;
+            },
+            get collisionPadding() {
+              return local.collisionPadding ?? 0;
+            },
+            get dir() {
+              return root.dir();
+            },
+            kind: "dropdown-menu",
+            lagParentLayer: lag,
+            root: false,
+            get id() {
+              return sub.contentId;
+            },
+            get labelledBy() {
+              return sub.triggerId;
+            },
+            state: () => stateOf(sub.open()),
+            attrs: () => ({
+              "data-slot": `dropdown-menu-sub-content`,
+              class: cn(DROPDOWN_MENU_CLASSES.subContent, local.class),
+              ...rest
+            }),
+            setContent: (el) => {
+              sub.setContent(el);
+              if (el) {
+                presence.ref(el);
+                noteLayerMount();
+                callRef(local.ref, el);
+              }
+            },
+            onDismiss: () => {
+            },
+            onEscapeKeyDown: (e) => {
+              local.onEscapeKeyDown?.(e);
+              if (e.defaultPrevented) return;
+              root.setOpen(false);
+              e.preventDefault();
+            },
+            onFocusOutside: (e) => {
+              local.onFocusOutside?.(e);
+              if (e.defaultPrevented) return;
+              if (e.target !== sub.trigger()) sub.setOpen(false);
+            },
+            get onInteractOutside() {
+              return local.onInteractOutside;
+            },
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            onKeyDown: (e) => {
+              local.onKeyDown?.(e);
+              if (e.defaultPrevented) return;
+              if (sub.content()?.contains(e.target) && e.key === closeKey()) {
+                sub.setOpen(false);
+                sub.trigger()?.focus();
+                e.preventDefault();
+              }
+            },
+            get children() {
+              return local.children;
+            }
+          });
+        }
+      });
+    }
+  });
+}
+function createMediaQuery(query) {
+  if (typeof window === `undefined` || typeof window.matchMedia !== `function`) return () => false;
+  const mql = window.matchMedia(query);
+  const [matches, setMatches] = createSignal(mql.matches);
+  const onChange = () => setMatches(window.matchMedia(query).matches);
+  mql.addEventListener(`change`, onChange);
+  onCleanup(() => mql.removeEventListener(`change`, onChange));
+  return matches;
+}
+var _tmpl$ = /* @__PURE__ */ template(`<div data-slot=zoomable-image-pill role=toolbar><span aria-hidden=true data-slot=zoomable-image-divider>`), _tmpl$2 = /* @__PURE__ */ template(`<div data-slot=zoomable-image role=group tabindex=0><img data-slot=zoomable-image-image loading=lazy decoding=async>`, true, false, false);
+const ZOOM_MATH = {
+  ZOOM,
+  zoomIsTall,
+  zoomRestView,
+  zoomClamp,
+  zoomAtRest,
+  zoomTo,
+  zoomCentre,
+  zoomWheel,
+  zoomScroll,
+  zoomStep,
+  zoomDoubleTap,
+  zoomKey,
+  zoomDrag,
+  zoomPinch,
+  zoomMomentum,
+  zoomMomentumActive,
+  zoomPanRoom,
+  zoomResize,
+  zoomPercent,
+  zoomMenu,
+  zoomBounds
+};
+const REST_PILL = {
+  percent: zoomPercent(1),
+  atMin: false,
+  atMax: false,
+  atRest: true
+};
+function createZoomableImage(o) {
+  let root;
+  let image;
+  let pillEl;
+  let controller = null;
+  const [loaded, setLoaded] = createSignal(null);
+  const [pill, setPill] = createSignal(REST_PILL);
+  const [pillVisible, setPillVisible] = createSignal(true);
+  const declared = () => zoomDeclaredSize(o.naturalWidth(), o.naturalHeight());
+  const natural = () => declared() ?? loaded();
+  onMount(() => {
+    if (!root || !image) return;
+    const c = createZoomController({
+      math: ZOOM_MATH,
+      root,
+      image,
+      pill: () => pillEl ?? null,
+      natural,
+      initial: o.initial,
+      maxScale: o.maxScale,
+      boundScale: o.scale,
+      transition: o.transition,
+      autoHide: () => o.controls() === `auto`,
+      onPill: (p) => setPill(p),
+      onPillVisible: setPillVisible,
+      onZoom: (scale, atFit) => o.onZoom?.(scale, atFit),
+      onTap: () => o.onTap?.()
+    });
+    controller = c;
+    onCleanup(() => {
+      c.destroy();
+      controller = null;
+    });
+  });
+  createEffect(on(o.src, () => setLoaded(null), {
+    defer: true
+  }));
+  createEffect(on([o.src, () => natural()?.width, () => natural()?.height, o.initial, o.maxScale], () => controller?.reset(), {
+    defer: true
+  }));
+  createEffect(on(o.scale, () => controller?.syncScale(), {
+    defer: true
+  }));
+  const onImageLoad = (e) => {
+    const img = e.currentTarget;
+    if (!declared() && img.naturalWidth > 0 && img.naturalHeight > 0) setLoaded({
+      width: img.naturalWidth,
+      height: img.naturalHeight
+    });
+  };
+  const menuItems = (fitLabel) => {
+    const f = controller?.frame();
+    return controller && f ? zoomMenu(controller.view(), f, fitLabel) : [];
+  };
+  return {
+    rootRef: (el) => root = el,
+    imageRef: (el) => image = el,
+    pillRef: (el) => pillEl = el,
+    controller: () => controller,
+    natural,
+    pill,
+    pillVisible,
+    onImageLoad,
+    menuItems
+  };
+}
+const ZOOMABLE_IMAGE_STRINGS = {
+  zoomIn: `Zoom in`,
+  zoomOut: `Zoom out`,
+  zoomToFit: `Zoom to fit`,
+  zoomLevel: `Zoom level`,
+  zoomFit: `Fit`
+};
+function ZoomableImage(props) {
+  const [local, rest] = splitProps(props, [`src`, `alt`, `naturalWidth`, `naturalHeight`, `initial`, `maxScale`, `controls`, `scale`, `onScaleChange`, `onZoom`, `onTap`, `strings`, `class`, `style`]);
+  const reducedMotion = createMediaQuery(`(prefers-reduced-motion: reduce)`);
+  const t = () => ({
+    ...ZOOMABLE_IMAGE_STRINGS,
+    ...local.strings
+  });
+  const controls = () => local.controls ?? `auto`;
+  const zoom = createZoomableImage({
+    src: () => local.src,
+    naturalWidth: () => local.naturalWidth,
+    naturalHeight: () => local.naturalHeight,
+    initial: () => local.initial ?? `auto`,
+    maxScale: () => local.maxScale,
+    scale: () => local.scale,
+    controls,
+    transition: () => reducedMotion() ? null : ZOOMABLE_IMAGE_TRANSITION,
+    onZoom: (s, atFit) => {
+      local.onScaleChange?.(s);
+      local.onZoom?.({
+        scale: s,
+        atFit
+      });
+    },
+    onTap: () => local.onTap?.()
+  });
+  const [menuOpen, setMenuOpen] = createSignal(false);
+  createEffect(on(menuOpen, (open) => zoom.controller()?.holdPill(open), {
+    defer: true
+  }));
+  const rootStyle = () => {
+    const aspect = zoomBoxAspect(ZOOM_MATH, zoom.natural(), local.style?.height !== void 0);
+    return css({
+      ...aspect !== null ? {
+        aspectRatio: String(aspect)
+      } : {},
+      ...local.style
+    });
+  };
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+    var _ref$ = zoom.rootRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : zoom.rootRef = _el$;
+    spread(_el$, mergeProps({
+      get ["aria-label"]() {
+        return local.alt || void 0;
+      },
+      get ["class"]() {
+        return cn(ZOOMABLE_IMAGE_CLASSES.root, local.class);
+      },
+      get style() {
+        return rootStyle();
+      }
+    }, rest), false, true);
+    addEventListener(_el$2, "load", zoom.onImageLoad);
+    var _ref$2 = zoom.imageRef;
+    typeof _ref$2 === "function" ? use(_ref$2, _el$2) : zoom.imageRef = _el$2;
+    setAttribute(_el$2, "draggable", false);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return controls() !== `none`;
+      },
+      get children() {
+        var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild;
+        var _ref$3 = zoom.pillRef;
+        typeof _ref$3 === "function" ? use(_ref$3, _el$3) : zoom.pillRef = _el$3;
+        insert(_el$3, createComponent(Button, {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          get ["class"]() {
+            return ZOOMABLE_IMAGE_CLASSES.button;
+          },
+          get ["aria-label"]() {
+            return t().zoomOut;
+          },
+          get disabled() {
+            return zoom.pill().atMin;
+          },
+          onClick: () => zoom.controller()?.step(-1),
+          get children() {
+            return createComponent(PaintIcon, {
+              icon: Minus
+            });
+          }
+        }), _el$4);
+        insert(_el$3, createComponent(DropdownMenu, {
+          get open() {
+            return menuOpen();
+          },
+          onOpenChange: setMenuOpen,
+          get children() {
+            return [createComponent(DropdownMenuTrigger, {
+              as: Button,
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              get ["class"]() {
+                return ZOOMABLE_IMAGE_CLASSES.percent;
+              },
+              get ["aria-label"]() {
+                return t().zoomLevel;
+              },
+              get children() {
+                return zoom.pill().percent;
+              }
+            }), createComponent(DropdownMenuContent, {
+              side: "top",
+              align: "center",
+              get children() {
+                return createComponent(For, {
+                  get each() {
+                    return memo(() => !!menuOpen())() ? zoom.menuItems(t().zoomFit) : [];
+                  },
+                  children: (item) => createComponent(DropdownMenuCheckboxItem, {
+                    get checked() {
+                      return item.checked;
+                    },
+                    onSelect: () => {
+                      const c = zoom.controller();
+                      if (item.scale === null) c?.rest();
+                      else c?.zoomScale(item.scale);
+                    },
+                    get children() {
+                      return item.label;
+                    }
+                  })
+                });
+              }
+            })];
+          }
+        }), _el$4);
+        insert(_el$3, createComponent(Button, {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          get ["class"]() {
+            return ZOOMABLE_IMAGE_CLASSES.button;
+          },
+          get ["aria-label"]() {
+            return t().zoomIn;
+          },
+          get disabled() {
+            return zoom.pill().atMax;
+          },
+          onClick: () => zoom.controller()?.step(1),
+          get children() {
+            return createComponent(PaintIcon, {
+              icon: Plus
+            });
+          }
+        }), _el$4);
+        insert(_el$3, createComponent(Button, {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          get ["class"]() {
+            return ZOOMABLE_IMAGE_CLASSES.button;
+          },
+          get ["aria-label"]() {
+            return t().zoomToFit;
+          },
+          get ["aria-pressed"]() {
+            return zoom.pill().atRest ? `true` : `false`;
+          },
+          onClick: () => zoom.controller()?.rest(),
+          get children() {
+            return createComponent(PaintIcon, {
+              icon: Maximize2
+            });
+          }
+        }), null);
+        effect((_p$) => {
+          var _v$ = zoom.pillVisible() ? `open` : `closed`, _v$2 = cn(ZOOMABLE_IMAGE_CLASSES.pill, !zoom.pillVisible() && ZOOMABLE_IMAGE_CLASSES.pillHidden), _v$3 = ZOOMABLE_IMAGE_CLASSES.divider;
+          _v$ !== _p$.e && setAttribute(_el$3, "data-state", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$3;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$4 = local.src || void 0, _v$5 = local.alt, _v$6 = ZOOMABLE_IMAGE_CLASSES.image, _v$7 = css(zoomImageStyle(zoom.natural()));
+      _v$4 !== _p$.e && setAttribute(_el$2, "src", _p$.e = _v$4);
+      _v$5 !== _p$.t && setAttribute(_el$2, "alt", _p$.t = _v$5);
+      _v$6 !== _p$.a && className(_el$2, _p$.a = _v$6);
+      _p$.o = style(_el$2, _v$7, _p$.o);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$;
+  })();
+}
 export {
+  DialogOverlayPart as $,
   findNextItem as A,
   BubbleCheck as B,
   CHROME as C,
@@ -1695,25 +3015,65 @@ export {
   popperWrapper as E,
   mountIn as F,
   SELECTION_KEYS as G,
-  createMediaQuery as H,
+  createZoomableImage as H,
   IconGlyph as I,
-  px as J,
+  createMediaQuery$1 as J,
   KEY_INTENT as K,
   LayerPortal as L,
   MenuContent as M,
   NativeSelect as N,
   OPEN_KEYS as O,
   PaintIcon as P,
-  FALLBACK_ICONS as Q,
-  resolveIcon as R,
+  px as Q,
+  FALLBACK_ICONS as R,
   SliderBubble as S,
-  bubbleOnChange as T,
-  focusIntent as U,
+  resolveIcon as T,
+  DialogRoot as U,
   VisuallyHidden as V,
-  wrapArray as W,
-  styleWriter as X,
-  setChecked as Y,
+  DialogClosePart as W,
+  mergeRefs as X,
+  DialogContentPart as Y,
+  ZOOM_MATH as Z,
+  DialogDescriptionPart as _,
   createElementSize$1 as a,
+  DialogPortalPart as a0,
+  DialogTitlePart as a1,
+  DialogTriggerPart as a2,
+  Button as a3,
+  bubbleOnChange as a4,
+  useDialogContext as a5,
+  callRef as a6,
+  createOpenState as a7,
+  composeHandlers as a8,
+  styleObject as a9,
+  ZOOMABLE_IMAGE_STRINGS as aA,
+  ZoomableImage as aB,
+  layerPointerEvents as aa,
+  noteLayerMount as ab,
+  layerMountedThisTask as ac,
+  stateOf as ad,
+  createId as ae,
+  callHandler as af,
+  focusIntent as ag,
+  wrapArray as ah,
+  styleWriter as ai,
+  setChecked as aj,
+  createMediaQuery as ak,
+  DropdownMenu as al,
+  DropdownMenuCheckboxItem as am,
+  DropdownMenuContent as an,
+  DropdownMenuGroup as ao,
+  DropdownMenuItem as ap,
+  DropdownMenuLabel as aq,
+  DropdownMenuPortal as ar,
+  DropdownMenuRadioGroup as as,
+  DropdownMenuRadioItem as at,
+  DropdownMenuSeparator as au,
+  DropdownMenuShortcut as av,
+  DropdownMenuSub as aw,
+  DropdownMenuSubContent as ax,
+  DropdownMenuSubTrigger as ay,
+  DropdownMenuTrigger as az,
   createListNavigation as b,
   css as c,
   createListNavigationSync as d,
@@ -1726,18 +3086,18 @@ export {
   Popper as k,
   bindStyle as l,
   LayerContext as m,
-  useKeyboardTracking as n,
+  useFocusGuards as n,
   graceArea as o,
   createFocusScope as p,
   useScrollLock as q,
   rovingFocusFirst as r,
   useModalEffects as s,
   transformOrigin as t,
-  useFocusGuards as u,
+  useKeyboardTracking as u,
   createMenuRow as v,
   createSelectable as w,
   popperContentStyle as x,
   inPolygon as y,
   radixTypeahead as z
 };
-//# sourceMappingURL=image-loading-status--T9ny7b0.js.map
+//# sourceMappingURL=zoomable-image-CmoMEUF6.js.map