@exponential_app/eui-react 0.2.1 → 0.4.0

package/README.md

@@ -326,6 +326,15 @@ A step = the scroll, the window's render flushed and the layout read back
 | Button `hold` | `ButtonHold` (the shared machine): pointer capture on down, 24 px slop, Space/Enter key down → up, Escape/blur/pointercancel cancel; `holdingLabel` while held; never `press` |
 | serif | `ui-serif` stays a CSS keyword: `font-family: ui-serif, Georgia, serif` |
 
+## Round 6 (EXP-1495, `docs/round-6-contract.md`)
+
+| item | web |
+|---|---|
+| macros | `Outline` (the anchor list: ONE active row, its leading bar absolute at `inset-inline-start: 0`, `select {id}`) and `Mosaic` (the wide picture group: `aspect-ratio: 1.6`, the 60 % lead, cover pictures absolute `inset: 0`, "+N") need no painter |
+| Carousel `counter` | 2+ pages: the `counter` part (`$string.pageCounter`, `i / n`) absolute at the track's top-end corner (mirrored under RTL) inside a `relative` stage (so the pill stays while the track scrolls), `pointer-events: none`, `aria-hidden` |
+| Carousel `thumbnails` | 2+ pages: the `thumbnails` strip between the track and the controls, ONE `thumbnail` button per page (`<id>.thumbnail.<i>`; URLs past the page count ignored, a missing one = the empty muted square), the current one `selected` + `aria-current` + `data-current`, named `$string.pageOf`; a press pages and fires `change {page}` like a dot; the current one is scrolled into view inside the strip |
+| primitives | `Outline`, `Mosaic`, `CarouselCounter`, `CarouselThumbnails` on `OUTLINE_CLASSES` / `MOSAIC_CLASSES` / `CAROUSEL_CLASSES` (specimens `plain/outline`, `plain/mosaic`, `plain/carousel-extras`) |
+
 ## The primitive set
 
 `src/primitives/` holds the generic shadcn/Radix components the app and

package/dist/chunks/index-eny7hh6w.js

@@ -0,0 +1,596 @@
+// packages/exponential-ui-react/src/primitives/choice-tiles.tsx
+import * as React from "react";
+import { ImageIcon } from "lucide-react";
+import { CHOICE_TILES_CLASSES, choiceColumns, choiceToggle, choiceValues } from "@exponential_app/eui/web/primitives";
+
+// packages/exponential-ui-react/src/primitives/cn.ts
+import { cn as cn2, getInitials as getInitials2 } from "@exponential_app/eui/web/primitives";
+
+// packages/exponential-ui-react/src/primitives/choice-tiles.tsx
+import { choiceColumns as choiceColumns2, choiceToggle as choiceToggle2, choiceValues as choiceValues2 } from "@exponential_app/eui/web/primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChoiceTilesFrame2({ options, picked, multiple, columns, disabled = false, invalid = false, dir = `ltr`, onPick, rootProps, tileProps, pictureProps, labelProps, descriptionProps, renderPicture, after, rootRef }) {
+  const buttons = React.useRef([]);
+  const order = React.useMemo(() => options.map((o) => o.value), [options]);
+  const pictures = options.some((o) => Boolean(o.image));
+  const enabled = (i) => !disabled && !options[i]?.disabled;
+  const firstPicked = options.findIndex((o, i) => picked.includes(o.value) && enabled(i));
+  const tabStop = firstPicked >= 0 ? firstPicked : options.findIndex((_, i) => enabled(i));
+  const pick = (i) => {
+    const value = options[i].value;
+    onPick(choiceToggle(picked, value, multiple, order), value);
+  };
+  const move = (from, delta) => {
+    const n = options.length;
+    for (let step = 1;step <= n; step++) {
+      const i = ((from + delta * step) % n + n) % n;
+      if (enabled(i))
+        return i;
+    }
+    return -1;
+  };
+  const onKeyDown = (i) => (e) => {
+    const forward = dir === `rtl` ? `ArrowLeft` : `ArrowRight`;
+    const back = dir === `rtl` ? `ArrowRight` : `ArrowLeft`;
+    const delta = e.key === forward || e.key === `ArrowDown` ? 1 : e.key === back || e.key === `ArrowUp` ? -1 : 0;
+    if (delta === 0)
+      return;
+    e.preventDefault();
+    const next = move(i, delta);
+    if (next < 0)
+      return;
+    buttons.current[next]?.focus();
+    if (!multiple && !picked.includes(options[next].value))
+      pick(next);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    ref: rootRef,
+    role: multiple ? `group` : `radiogroup`,
+    "aria-invalid": invalid || undefined,
+    "aria-disabled": disabled || undefined,
+    dir,
+    ...rootProps,
+    style: { display: `grid`, gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...rootProps?.style ?? {} },
+    children: [
+      options.map((o, i) => {
+        const state = { index: i, selected: picked.includes(o.value), disabled: !enabled(i) };
+        const description = o.description ? String(o.description) : ``;
+        return /* @__PURE__ */ jsxs("button", {
+          ref: (el) => {
+            buttons.current[i] = el;
+          },
+          type: "button",
+          role: multiple ? `checkbox` : `radio`,
+          "aria-checked": state.selected,
+          "aria-label": o.label,
+          disabled: state.disabled,
+          tabIndex: i === tabStop ? 0 : -1,
+          "data-state": state.selected ? `checked` : `unchecked`,
+          "data-value": o.value,
+          onClick: () => pick(i),
+          onKeyDown: onKeyDown(i),
+          ...tileProps(state),
+          children: [
+            pictures ? /* @__PURE__ */ jsx("span", {
+              "aria-hidden": "true",
+              ...pictureProps(state),
+              children: renderPicture(o.image ? String(o.image) : null, state)
+            }) : null,
+            /* @__PURE__ */ jsx("span", {
+              ...labelProps(state),
+              children: o.label
+            }),
+            description ? /* @__PURE__ */ jsx("span", {
+              ...descriptionProps(state),
+              children: description
+            }) : null
+          ]
+        }, `${o.value}-${i}`);
+      }),
+      after
+    ]
+  });
+}
+function ChoiceTiles2({ options, value, multiple = false, columns, disabled = false, invalid = false, onChange, renderImage, className, dir, ...rest }) {
+  const picked = choiceValues(value, multiple);
+  const image = (src, label) => src ? renderImage ? renderImage(src, label) : /* @__PURE__ */ jsx("img", {
+    src,
+    alt: label,
+    loading: "lazy",
+    decoding: "async",
+    className: CHOICE_TILES_CLASSES.image
+  }) : /* @__PURE__ */ jsx(ImageIcon, {
+    className: CHOICE_TILES_CLASSES.placeholder
+  });
+  return /* @__PURE__ */ jsx(ChoiceTilesFrame2, {
+    options,
+    picked,
+    multiple,
+    columns: choiceColumns(columns),
+    disabled,
+    invalid,
+    dir,
+    onPick: (next) => onChange?.(multiple ? next : next[0] ?? ``),
+    rootProps: { "data-slot": `choice-tiles`, className: cn2(CHOICE_TILES_CLASSES.root, className), "aria-label": rest[`aria-label`], "aria-labelledby": rest[`aria-labelledby`], "data-testid": rest[`data-testid`] },
+    tileProps: (s) => ({ "data-slot": `choice-tile`, className: cn2(CHOICE_TILES_CLASSES.tile, s.selected && CHOICE_TILES_CLASSES.tileSelected, invalid && !s.selected && CHOICE_TILES_CLASSES.tileInvalid) }),
+    pictureProps: () => ({ "data-slot": `choice-tile-picture`, className: CHOICE_TILES_CLASSES.picture }),
+    labelProps: () => ({ className: CHOICE_TILES_CLASSES.label }),
+    descriptionProps: () => ({ className: CHOICE_TILES_CLASSES.description }),
+    renderPicture: (src, s) => image(src, options[s.index]?.label ?? ``)
+  });
+}
+
+// packages/exponential-ui-react/src/primitives/zoomable-image.tsx
+import { useEffect, useLayoutEffect, useRef as useRef2, useState } from "react";
+import { Maximize2Icon, MinusIcon, PlusIcon } from "lucide-react";
+import {
+  ZOOM,
+  zoomAtRest,
+  zoomBounds,
+  zoomCentre,
+  zoomClamp,
+  zoomDoubleTap,
+  zoomDrag,
+  zoomIsTall,
+  zoomKey,
+  zoomMenu,
+  zoomMomentum,
+  zoomMomentumActive,
+  zoomPanRoom,
+  zoomPercent,
+  zoomPinch,
+  zoomResize,
+  zoomRestView,
+  zoomScroll,
+  zoomStep,
+  zoomTo,
+  zoomWheel
+} from "@exponential_app/eui";
+import {
+  ZOOMABLE_IMAGE_CLASSES,
+  ZOOMABLE_IMAGE_TRANSITION,
+  createZoomController,
+  zoomBoxAspect,
+  zoomDeclaredSize,
+  zoomImageStyle
+} from "@exponential_app/eui/web/primitives";
+
+// packages/exponential-ui-react/src/primitives/button.tsx
+import { Slot } from "radix-ui";
+import { buttonVariants as buttonVariants2 } from "@exponential_app/eui/web/primitives";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Button2({
+  className,
+  variant = `default`,
+  size = `default`,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : `button`;
+  return /* @__PURE__ */ jsx2(Comp, {
+    "data-slot": "button",
+    "data-variant": variant,
+    "data-size": size,
+    className: cn2(buttonVariants2({ variant, size, className })),
+    ...props
+  });
+}
+
+// packages/exponential-ui-react/src/primitives/dropdown-menu.tsx
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { DROPDOWN_MENU_CLASSES } from "@exponential_app/eui/web/primitives";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+"use client";
+function DropdownMenu2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Root, {
+    "data-slot": "dropdown-menu",
+    ...props
+  });
+}
+function DropdownMenuPortal2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, {
+    "data-slot": "dropdown-menu-portal",
+    ...props
+  });
+}
+function DropdownMenuTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Trigger, {
+    "data-slot": "dropdown-menu-trigger",
+    ...props
+  });
+}
+function DropdownMenuContent2({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Content, {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn2(DROPDOWN_MENU_CLASSES.content, className),
+      ...props
+    })
+  });
+}
+function DropdownMenuGroup2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Group, {
+    "data-slot": "dropdown-menu-group",
+    ...props
+  });
+}
+function DropdownMenuItem2({
+  className,
+  inset,
+  variant = `default`,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Item, {
+    "data-slot": "dropdown-menu-item",
+    "data-inset": inset,
+    "data-variant": variant,
+    className: cn2(DROPDOWN_MENU_CLASSES.item, className),
+    ...props
+  });
+}
+function DropdownMenuCheckboxItem2({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(DropdownMenuPrimitive.CheckboxItem, {
+    "data-slot": "dropdown-menu-checkbox-item",
+    className: cn2(DROPDOWN_MENU_CLASSES.checkItem, className),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx3("span", {
+        className: DROPDOWN_MENU_CLASSES.itemIndicator,
+        children: /* @__PURE__ */ jsx3(DropdownMenuPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsx3(CheckIcon, {
+            className: DROPDOWN_MENU_CLASSES.checkIcon
+          })
+        })
+      }),
+      children
+    ]
+  });
+}
+function DropdownMenuRadioGroup2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.RadioGroup, {
+    "data-slot": "dropdown-menu-radio-group",
+    ...props
+  });
+}
+function DropdownMenuRadioItem2({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(DropdownMenuPrimitive.RadioItem, {
+    "data-slot": "dropdown-menu-radio-item",
+    className: cn2(DROPDOWN_MENU_CLASSES.checkItem, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx3("span", {
+        className: DROPDOWN_MENU_CLASSES.itemIndicator,
+        children: /* @__PURE__ */ jsx3(DropdownMenuPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsx3(CircleIcon, {
+            className: DROPDOWN_MENU_CLASSES.radioIcon
+          })
+        })
+      }),
+      children
+    ]
+  });
+}
+function DropdownMenuLabel2({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Label, {
+    "data-slot": "dropdown-menu-label",
+    "data-inset": inset,
+    className: cn2(DROPDOWN_MENU_CLASSES.label, className),
+    ...props
+  });
+}
+function DropdownMenuSeparator2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Separator, {
+    "data-slot": "dropdown-menu-separator",
+    className: cn2(DROPDOWN_MENU_CLASSES.separator, className),
+    ...props
+  });
+}
+function DropdownMenuShortcut2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3("span", {
+    "data-slot": "dropdown-menu-shortcut",
+    className: cn2(DROPDOWN_MENU_CLASSES.shortcut, className),
+    ...props
+  });
+}
+function DropdownMenuSub2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Sub, {
+    "data-slot": "dropdown-menu-sub",
+    ...props
+  });
+}
+function DropdownMenuSubTrigger2({
+  className,
+  inset,
+  children,
+  variant = `default`,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(DropdownMenuPrimitive.SubTrigger, {
+    "data-slot": "dropdown-menu-sub-trigger",
+    "data-inset": inset,
+    "data-variant": variant,
+    className: cn2(DROPDOWN_MENU_CLASSES.subTrigger, className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx3(ChevronRightIcon, {
+        className: DROPDOWN_MENU_CLASSES.subChevron
+      })
+    ]
+  });
+}
+function DropdownMenuSubContent2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx3(DropdownMenuPrimitive.SubContent, {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn2(DROPDOWN_MENU_CLASSES.subContent, className),
+      ...props
+    })
+  });
+}
+
+// packages/exponential-ui-react/src/primitives/use-media-query.ts
+import { useCallback, useSyncExternalStore } from "react";
+function useMediaQuery2(query) {
+  const subscribe = useCallback((onChange) => {
+    if (typeof window === `undefined` || typeof window.matchMedia !== `function`)
+      return () => {};
+    const mql = window.matchMedia(query);
+    mql.addEventListener(`change`, onChange);
+    return () => mql.removeEventListener(`change`, onChange);
+  }, [query]);
+  const read = () => typeof window !== `undefined` && typeof window.matchMedia === `function` && window.matchMedia(query).matches;
+  return useSyncExternalStore(subscribe, read, () => false);
+}
+
+// packages/exponential-ui-react/src/primitives/zoomable-image.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ZOOM_MATH2 = {
+  ZOOM,
+  zoomIsTall,
+  zoomRestView,
+  zoomClamp,
+  zoomAtRest,
+  zoomTo,
+  zoomCentre,
+  zoomWheel,
+  zoomScroll,
+  zoomStep,
+  zoomDoubleTap,
+  zoomKey,
+  zoomDrag,
+  zoomPinch,
+  zoomMomentum,
+  zoomMomentumActive,
+  zoomPanRoom,
+  zoomResize,
+  zoomPercent,
+  zoomMenu,
+  zoomBounds
+};
+var REST_PILL = { percent: zoomPercent(1), atMin: false, atMax: false, atRest: true };
+function useZoomableImage2(o) {
+  const rootRef = useRef2(null);
+  const imageRef = useRef2(null);
+  const pillRef = useRef2(null);
+  const controller = useRef2(null);
+  const [loaded, setLoaded] = useState(null);
+  const [pill, setPill] = useState(REST_PILL);
+  const [pillVisible, setPillVisible] = useState(true);
+  const declared = zoomDeclaredSize(o.naturalWidth, o.naturalHeight);
+  const natural = declared ?? loaded;
+  const latest = useRef2({ ...o, natural });
+  latest.current = { ...o, natural };
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const image = imageRef.current;
+    if (!root || !image)
+      return;
+    const c = createZoomController({
+      math: ZOOM_MATH2,
+      root,
+      image,
+      pill: () => pillRef.current,
+      natural: () => latest.current.natural,
+      initial: () => latest.current.initial,
+      maxScale: () => latest.current.maxScale,
+      boundScale: () => latest.current.scale,
+      transition: () => latest.current.transition,
+      autoHide: () => latest.current.controls === `auto`,
+      onPill: setPill,
+      onPillVisible: setPillVisible,
+      onZoom: (scale, atFit) => latest.current.onZoom?.(scale, atFit),
+      onTap: () => latest.current.onTap?.()
+    });
+    controller.current = c;
+    return () => {
+      c.destroy();
+      controller.current = null;
+    };
+  }, []);
+  useLayoutEffect(() => setLoaded(null), [o.src]);
+  useLayoutEffect(() => controller.current?.reset(), [o.src, natural?.width, natural?.height, o.initial, o.maxScale]);
+  useLayoutEffect(() => controller.current?.syncScale(), [o.scale]);
+  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 c = controller.current;
+    const f = c?.frame();
+    return c && f ? zoomMenu(c.view(), f, fitLabel) : [];
+  };
+  return { rootRef, imageRef, pillRef, controller, natural, pill, pillVisible, onImageLoad, menuItems };
+}
+var ZOOMABLE_IMAGE_STRINGS2 = { zoomIn: `Zoom in`, zoomOut: `Zoom out`, zoomToFit: `Zoom to fit`, zoomLevel: `Zoom level`, zoomFit: `Fit` };
+function ZoomableImage2({ src, alt, naturalWidth, naturalHeight, initial = `auto`, maxScale, controls = `auto`, scale, onScaleChange, onZoom, onTap, strings, className, style, ...props }) {
+  const reducedMotion = useMediaQuery2(`(prefers-reduced-motion: reduce)`);
+  const t = { ...ZOOMABLE_IMAGE_STRINGS2, ...strings };
+  const zoom = useZoomableImage2({
+    src,
+    naturalWidth,
+    naturalHeight,
+    initial,
+    maxScale,
+    scale,
+    controls,
+    transition: reducedMotion ? null : ZOOMABLE_IMAGE_TRANSITION,
+    onZoom: (s, atFit) => {
+      onScaleChange?.(s);
+      onZoom?.({ scale: s, atFit });
+    },
+    onTap
+  });
+  const [menuOpen, setMenuOpen] = useState(false);
+  useEffect(() => zoom.controller.current?.holdPill(menuOpen), [menuOpen]);
+  const aspect = zoomBoxAspect(ZOOM_MATH2, zoom.natural, style?.height !== undefined);
+  const rootStyle = { ...aspect !== null ? { aspectRatio: String(aspect) } : {}, ...style };
+  const { pill } = zoom;
+  return /* @__PURE__ */ jsxs3("div", {
+    ref: zoom.rootRef,
+    "data-slot": "zoomable-image",
+    role: "group",
+    "aria-label": alt || undefined,
+    tabIndex: 0,
+    className: cn2(ZOOMABLE_IMAGE_CLASSES.root, className),
+    style: rootStyle,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx4("img", {
+        ref: zoom.imageRef,
+        "data-slot": "zoomable-image-image",
+        src: src || undefined,
+        alt,
+        draggable: false,
+        loading: "lazy",
+        decoding: "async",
+        className: ZOOMABLE_IMAGE_CLASSES.image,
+        style: zoomImageStyle(zoom.natural),
+        onLoad: zoom.onImageLoad
+      }),
+      controls !== `none` ? /* @__PURE__ */ jsxs3("div", {
+        ref: zoom.pillRef,
+        "data-slot": "zoomable-image-pill",
+        "data-state": zoom.pillVisible ? `open` : `closed`,
+        role: "toolbar",
+        className: cn2(ZOOMABLE_IMAGE_CLASSES.pill, !zoom.pillVisible && ZOOMABLE_IMAGE_CLASSES.pillHidden),
+        children: [
+          /* @__PURE__ */ jsx4(Button2, {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            className: ZOOMABLE_IMAGE_CLASSES.button,
+            "aria-label": t.zoomOut,
+            disabled: pill.atMin,
+            onClick: () => zoom.controller.current?.step(-1),
+            children: /* @__PURE__ */ jsx4(MinusIcon, {})
+          }),
+          /* @__PURE__ */ jsxs3(DropdownMenu2, {
+            open: menuOpen,
+            onOpenChange: setMenuOpen,
+            children: [
+              /* @__PURE__ */ jsx4(DropdownMenuTrigger2, {
+                asChild: true,
+                children: /* @__PURE__ */ jsx4(Button2, {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: ZOOMABLE_IMAGE_CLASSES.percent,
+                  "aria-label": t.zoomLevel,
+                  children: pill.percent
+                })
+              }),
+              /* @__PURE__ */ jsx4(DropdownMenuContent2, {
+                side: "top",
+                align: "center",
+                children: (menuOpen ? zoom.menuItems(t.zoomFit) : []).map((item) => /* @__PURE__ */ jsx4(DropdownMenuCheckboxItem2, {
+                  checked: item.checked,
+                  onSelect: () => {
+                    const c = zoom.controller.current;
+                    if (item.scale === null)
+                      c?.rest();
+                    else
+                      c?.zoomScale(item.scale);
+                  },
+                  children: item.label
+                }, item.label))
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx4(Button2, {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            className: ZOOMABLE_IMAGE_CLASSES.button,
+            "aria-label": t.zoomIn,
+            disabled: pill.atMax,
+            onClick: () => zoom.controller.current?.step(1),
+            children: /* @__PURE__ */ jsx4(PlusIcon, {})
+          }),
+          /* @__PURE__ */ jsx4("span", {
+            "aria-hidden": "true",
+            "data-slot": "zoomable-image-divider",
+            className: ZOOMABLE_IMAGE_CLASSES.divider
+          }),
+          /* @__PURE__ */ jsx4(Button2, {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            className: ZOOMABLE_IMAGE_CLASSES.button,
+            "aria-label": t.zoomToFit,
+            "aria-pressed": pill.atRest,
+            onClick: () => zoom.controller.current?.rest(),
+            children: /* @__PURE__ */ jsx4(Maximize2Icon, {})
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+
+export { cn2, getInitials2, ChoiceTilesFrame2, ChoiceTiles2, choiceColumns2, choiceToggle2, choiceValues2, buttonVariants2, Button2, DropdownMenu2, DropdownMenuPortal2, DropdownMenuTrigger2, DropdownMenuContent2, DropdownMenuGroup2, DropdownMenuItem2, DropdownMenuCheckboxItem2, DropdownMenuRadioGroup2, DropdownMenuRadioItem2, DropdownMenuLabel2, DropdownMenuSeparator2, DropdownMenuShortcut2, DropdownMenuSub2, DropdownMenuSubTrigger2, DropdownMenuSubContent2, useMediaQuery2, ZOOM_MATH2, useZoomableImage2, ZOOMABLE_IMAGE_STRINGS2, ZoomableImage2 };
+
+//# debugId=D29E7D264854B4E764756E2164756E21
+//# sourceMappingURL=index-eny7hh6w.js.map