@expcat/tigercat-react 2.1.3 → 2.2.0

package/dist/{chunk-TVVLCER6.mjs → chunk-QCRTRRBD.mjs}

@@ -33,6 +33,9 @@ import {
   getImageEditorLabels,
   getInitialCropRect,
   imageCropperContainerClasses,
+  imageCropperSizeHostClasses,
+  planCropperDisplaySize,
+  resolveCropperAvailableSize,
   imageCropperDragAreaClasses,
   imageCropperFrameClasses,
   imageCropperGuideClasses,
@@ -127,10 +130,12 @@ var ImageCropper = forwardRef(
     const defaultCropRectRef = useRef(defaultCropRect);
     const onReadyRef = useRef(onReady);
     const onErrorRef = useRef(onError);
+    const styleRef = useRef(style);
     aspectRef.current = aspectRatio;
     defaultCropRectRef.current = defaultCropRect;
     onReadyRef.current = onReady;
     onErrorRef.current = onError;
+    styleRef.current = style;
     const [status, setStatus] = useState("loading");
     const [displayWidth, setDisplayWidth] = useState(0);
     const [displayHeight, setDisplayHeight] = useState(0);
@@ -160,12 +165,12 @@ var ImageCropper = forwardRef(
       loader.load(src, {
         onLoad: (img, naturalWidth, naturalHeight) => {
           const container = containerRef.current;
-          const size = getCropperDisplaySize(
-            naturalWidth,
-            naturalHeight,
+          const box = resolveCropperAvailableSize(
             container?.clientWidth ?? 0,
-            container?.clientHeight ?? 0
+            container?.clientHeight ?? 0,
+            styleRef.current
           );
+          const size = getCropperDisplaySize(naturalWidth, naturalHeight, box.width, box.height);
           if (!size) {
             setStatus("error");
             onErrorRef.current?.(new Error("Image not loaded"));
@@ -205,15 +210,21 @@ var ImageCropper = forwardRef(
       if (!container || status !== "ready" || typeof ResizeObserver === "undefined") return;
       const observer = new ResizeObserver(() => {
         const natural = naturalSizeRef.current;
-        const next = getCropperDisplaySize(
+        const box = resolveCropperAvailableSize(
+          container.clientWidth,
+          container.clientHeight,
+          styleRef.current
+        );
+        const current = displayDimsRef.current;
+        const next = planCropperDisplaySize(
           natural.w,
           natural.h,
-          container.clientWidth,
-          container.clientHeight
+          box.width,
+          box.height,
+          current.w,
+          current.h
         );
         if (!next) return;
-        const current = displayDimsRef.current;
-        if (next.width === current.w && next.height === current.h) return;
         setCropRect(
           (prev) => remapCropRect(
             prev,
@@ -340,13 +351,10 @@ var ImageCropper = forwardRef(
       },
       [cropRect, setCropRect]
     );
-    const containerClasses = classNames(imageCropperContainerClasses, className);
+    const containerClasses = classNames(imageCropperSizeHostClasses, className);
     const rootStyle = { ...style };
     if (status === "loading" || status === "error") {
       if (rootStyle.minHeight == null) rootStyle.minHeight = 200;
-    } else {
-      if (rootStyle.width == null) rootStyle.width = displayWidth;
-      if (rootStyle.height == null) rootStyle.height = displayHeight;
     }
     if (status !== "ready") {
       return /* @__PURE__ */ jsx(
@@ -354,7 +362,7 @@ var ImageCropper = forwardRef(
         {
           ...rest,
           ref: containerRef,
-          className: classNames(containerClasses, "flex items-center justify-center"),
+          className: classNames(containerClasses, "items-center"),
           style: rootStyle,
           "data-image-cropper": "",
           "data-image-cropper-status": status,
@@ -365,7 +373,7 @@ var ImageCropper = forwardRef(
       );
     }
     const cr = cropRect;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ...rest,
@@ -374,161 +382,169 @@ var ImageCropper = forwardRef(
         style: rootStyle,
         "data-image-cropper": "",
         "data-image-cropper-status": "ready",
-        role: "group",
-        "aria-label": labels.cropperDialogAriaLabel,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: imageCropperFrameClasses,
-              style: { width: displayWidth, height: displayHeight },
-              children: [
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: imageCropperContainerClasses,
+            style: { width: displayWidth, height: displayHeight },
+            "data-image-cropper-stage": "",
+            role: "group",
+            "aria-label": labels.cropperDialogAriaLabel,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: imageCropperFrameClasses,
+                  style: { width: displayWidth, height: displayHeight },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src,
+                        className: imageCropperImgClasses,
+                        style: { width: displayWidth, height: displayHeight },
+                        draggable: false,
+                        alt: labels.imageToCropAriaLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        className: imageCropperMaskClasses,
+                        width: displayWidth,
+                        height: displayHeight,
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: [
+                          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
+                            /* @__PURE__ */ jsx("rect", { width: displayWidth, height: displayHeight, fill: "white" }),
+                            /* @__PURE__ */ jsx("rect", { x: cr.x, y: cr.y, width: cr.width, height: cr.height, fill: "black" })
+                          ] }) }),
+                          /* @__PURE__ */ jsx(
+                            "rect",
+                            {
+                              width: displayWidth,
+                              height: displayHeight,
+                              fill: IMAGE_CROPPER_MASK_FILL,
+                              mask: `url(#${maskId})`
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: imageCropperSelectionClasses,
+                  style: {
+                    left: cr.x,
+                    top: cr.y,
+                    width: cr.width,
+                    height: cr.height
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: imageCropperDragAreaClasses,
+                  style: {
+                    left: cr.x,
+                    top: cr.y,
+                    width: cr.width,
+                    height: cr.height
+                  },
+                  "data-crop-move": "",
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": labels.moveCropAreaAriaLabel,
+                  onPointerDown: (event) => startDrag(event, "move"),
+                  onKeyDown: handleMoveKeyDown
+                }
+              ),
+              guides && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: imageCropperGuideClasses,
+                    "data-guide": "true",
+                    style: {
+                      left: cr.x,
+                      top: cr.y + cr.height / 3,
+                      width: cr.width,
+                      height: 0,
+                      borderTopWidth: 1,
+                      borderTopStyle: "dashed"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: imageCropperGuideClasses,
+                    "data-guide": "true",
+                    style: {
+                      left: cr.x,
+                      top: cr.y + cr.height * 2 / 3,
+                      width: cr.width,
+                      height: 0,
+                      borderTopWidth: 1,
+                      borderTopStyle: "dashed"
+                    }
+                  }
+                ),
                 /* @__PURE__ */ jsx(
-                  "img",
+                  "div",
                   {
-                    src,
-                    className: imageCropperImgClasses,
-                    style: { width: displayWidth, height: displayHeight },
-                    draggable: false,
-                    alt: labels.imageToCropAriaLabel
+                    className: imageCropperGuideClasses,
+                    "data-guide": "true",
+                    style: {
+                      left: cr.x + cr.width / 3,
+                      top: cr.y,
+                      width: 0,
+                      height: cr.height,
+                      borderLeftWidth: 1,
+                      borderLeftStyle: "dashed"
+                    }
                   }
                 ),
-                /* @__PURE__ */ jsxs(
-                  "svg",
+                /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    className: imageCropperMaskClasses,
-                    width: displayWidth,
-                    height: displayHeight,
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: [
-                      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
-                        /* @__PURE__ */ jsx("rect", { width: displayWidth, height: displayHeight, fill: "white" }),
-                        /* @__PURE__ */ jsx("rect", { x: cr.x, y: cr.y, width: cr.width, height: cr.height, fill: "black" })
-                      ] }) }),
-                      /* @__PURE__ */ jsx(
-                        "rect",
-                        {
-                          width: displayWidth,
-                          height: displayHeight,
-                          fill: IMAGE_CROPPER_MASK_FILL,
-                          mask: `url(#${maskId})`
-                        }
-                      )
-                    ]
+                    className: imageCropperGuideClasses,
+                    "data-guide": "true",
+                    style: {
+                      left: cr.x + cr.width * 2 / 3,
+                      top: cr.y,
+                      width: 0,
+                      height: cr.height,
+                      borderLeftWidth: 1,
+                      borderLeftStyle: "dashed"
+                    }
                   }
                 )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: imageCropperSelectionClasses,
-              style: {
-                left: cr.x,
-                top: cr.y,
-                width: cr.width,
-                height: cr.height
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: imageCropperDragAreaClasses,
-              style: {
-                left: cr.x,
-                top: cr.y,
-                width: cr.width,
-                height: cr.height
-              },
-              "data-crop-move": "",
-              role: "button",
-              tabIndex: 0,
-              "aria-label": labels.moveCropAreaAriaLabel,
-              onPointerDown: (event) => startDrag(event, "move"),
-              onKeyDown: handleMoveKeyDown
-            }
-          ),
-          guides && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: imageCropperGuideClasses,
-                "data-guide": "true",
-                style: {
-                  left: cr.x,
-                  top: cr.y + cr.height / 3,
-                  width: cr.width,
-                  height: 0,
-                  borderTopWidth: 1,
-                  borderTopStyle: "dashed"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: imageCropperGuideClasses,
-                "data-guide": "true",
-                style: {
-                  left: cr.x,
-                  top: cr.y + cr.height * 2 / 3,
-                  width: cr.width,
-                  height: 0,
-                  borderTopWidth: 1,
-                  borderTopStyle: "dashed"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: imageCropperGuideClasses,
-                "data-guide": "true",
-                style: {
-                  left: cr.x + cr.width / 3,
-                  top: cr.y,
-                  width: 0,
-                  height: cr.height,
-                  borderLeftWidth: 1,
-                  borderLeftStyle: "dashed"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: imageCropperGuideClasses,
-                "data-guide": "true",
-                style: {
-                  left: cr.x + cr.width * 2 / 3,
-                  top: cr.y,
-                  width: 0,
-                  height: cr.height,
-                  borderLeftWidth: 1,
-                  borderLeftStyle: "dashed"
-                }
-              }
-            )
-          ] }),
-          CROP_HANDLES.map((handle) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: getCropperHandleClasses(handle),
-              style: getCropperHandleStyle(handle, cr),
-              "data-crop-handle": handle,
-              role: "button",
-              tabIndex: -1,
-              "aria-label": formatCropperResizeAriaLabel(
-                labels.resizeCropAreaAriaLabel,
-                getCropperHandleName(handle, labels)
-              ),
-              onPointerDown: (event) => startDrag(event, "resize", handle)
-            },
-            handle
-          ))
-        ]
+              ] }),
+              CROP_HANDLES.map((handle) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: getCropperHandleClasses(handle),
+                  style: getCropperHandleStyle(handle, cr),
+                  "data-crop-handle": handle,
+                  role: "button",
+                  tabIndex: -1,
+                  "aria-label": formatCropperResizeAriaLabel(
+                    labels.resizeCropAreaAriaLabel,
+                    getCropperHandleName(handle, labels)
+                  ),
+                  onPointerDown: (event) => startDrag(event, "resize", handle)
+                },
+                handle
+              ))
+            ]
+          }
+        )
       }
     );
   }

package/dist/chunk-REHHFHZ3.mjs

@@ -0,0 +1,67 @@
+import {
+  useFullscreen
+} from "./chunk-2MV3F7WP.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/FullscreenButton.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  fullscreenButtonClasses,
+  getFullscreenLabels,
+  getIconDefinition,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function Glyph({ name }) {
+  const definition = getIconDefinition(name);
+  if (!definition) return null;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: definition.viewBox,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "h-5 w-5",
+      "aria-hidden": "true",
+      children: definition.paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
+    }
+  );
+}
+var FullscreenButton = forwardRef(
+  function FullscreenButton2({ target, locale, labels, className, onChange, onError, ...props }, ref) {
+    const config = useTigerConfig();
+    const labelSet = getFullscreenLabels(mergeTigerLocale(config.locale, locale), labels);
+    const fullscreen = useFullscreen({ target, onChange, onError });
+    const label = fullscreen.isFullscreen ? labelSet.exitAriaLabel : labelSet.enterAriaLabel;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...props,
+        ref,
+        type: "button",
+        className: classNames(fullscreenButtonClasses, className),
+        "aria-label": label,
+        "aria-pressed": fullscreen.isFullscreen,
+        disabled: !fullscreen.supported,
+        onClick: () => {
+          void fullscreen.toggle();
+        },
+        children: /* @__PURE__ */ jsx(Glyph, { name: fullscreen.isFullscreen ? "fullscreen-exit" : "fullscreen" })
+      }
+    );
+  }
+);
+FullscreenButton.displayName = "FullscreenButton";
+var FullscreenButton_default = FullscreenButton;
+
+export {
+  FullscreenButton,
+  FullscreenButton_default
+};

package/dist/{chunk-XI6KQAHW.mjs → chunk-RJ2FJXHT.mjs}

@@ -122,9 +122,8 @@ var Anchor = forwardRef(function Anchor2({
   getCurrentAnchorRef.current = getCurrentAnchor;
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
-  const scrollLockRef = useRef(
-    createProgrammaticScrollLock(() => resolveAnchorScrollContainer(getContainerRef.current))
-  );
+  const resolveContainer = () => resolveAnchorScrollContainer(getContainerRef.current, anchorRef.current);
+  const scrollLockRef = useRef(createProgrammaticScrollLock(() => resolveContainer()));
   const config = useTigerConfig();
   const mergedLocale = useMemo(
     () => mergeTigerLocale(config.locale, locale),
@@ -158,7 +157,7 @@ var Anchor = forwardRef(function Anchor2({
   }, []);
   const scrollTo = useCallback(
     (href) => {
-      const container = resolveAnchorScrollContainer(getContainerRef.current);
+      const container = resolveContainer();
       scrollToAnchor(href, container, scrollOffset);
     },
     [scrollOffset]
@@ -182,10 +181,10 @@ var Anchor = forwardRef(function Anchor2({
     },
     [applyActive, onClick, scrollTo]
   );
-  const resolved = resolveScrollRoot(getContainer);
+  const resolved = resolveScrollRoot(getContainer, { from: anchorRef.current });
   const resolvedKey = resolved.isWindow ? "window" : resolved.target;
   useEffect(() => {
-    const container = resolveAnchorScrollContainer(getContainerRef.current);
+    const container = resolveContainer();
     const root = container === window ? null : container;
     const stop = createAnchorObserver(links, {
       offsetTop: scrollOffset,

package/dist/{chunk-XKB7ECPU.mjs → chunk-S37KEELR.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-UJTAHHQT.mjs";
 import {
   useAnchoredOverlay
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 
 // src/utils/use-popup.ts
 import { useCallback, useEffect, useMemo, useRef } from "react";

package/dist/{chunk-RNKUEEIX.mjs → chunk-S5GHNXGQ.mjs}

@@ -1,15 +1,15 @@
 import {
   ImageGroupContext
-} from "./chunk-KVXGNUIE.mjs";
+} from "./chunk-4IVRLBKW.mjs";
 import {
   ImagePreview
-} from "./chunk-OYQ6HTLQ.mjs";
+} from "./chunk-SGKPZW57.mjs";
 import {
   usePopup
-} from "./chunk-XKB7ECPU.mjs";
+} from "./chunk-S37KEELR.mjs";
 import {
   renderOverlayPortal
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-OES5DL3S.mjs → chunk-SCN6UULA.mjs}

@@ -10,7 +10,7 @@ import {
   useEscapeKey,
   useFocusTrap,
   useOverlayPortalTarget
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-OYQ6HTLQ.mjs → chunk-SGKPZW57.mjs}

@@ -3,7 +3,7 @@ import {
   useBodyScrollLock,
   useEscapeKey,
   useFocusTrap
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-WN6ZHQTI.mjs → chunk-SIBNSFVR.mjs}

@@ -54,7 +54,13 @@ var BackTop = forwardRef(function BackTop2({
     [config.locale, locale]
   );
   const labelSet = getBackTopLabels(mergedLocale, labels);
-  const resolved = resolveScrollRoot(target);
+  const hostRef = useRef(null);
+  const setHostRef = (node) => {
+    hostRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const resolved = resolveScrollRoot(target, { from: hostRef.current });
   const resolvedKey = resolved.isWindow ? "window" : resolved.target;
   const visibilityHeightRef = useRef(visibilityHeight);
   visibilityHeightRef.current = visibilityHeight;
@@ -62,7 +68,7 @@ var BackTop = forwardRef(function BackTop2({
     void 0
   );
   useEffect(() => {
-    const root = resolveScrollRoot(target);
+    const root = resolveScrollRoot(target, { from: hostRef.current });
     const eventTarget = getScrollRootEventTarget(root);
     const scrollNode = root.target;
     if (!eventTarget || !scrollNode) return void 0;
@@ -85,7 +91,7 @@ var BackTop = forwardRef(function BackTop2({
   }, [visibilityHeight]);
   const handleClick = useCallback(
     (event) => {
-      const root = resolveScrollRoot(target);
+      const root = resolveScrollRoot(target, { from: hostRef.current });
       if (root.target) scrollToTop(root.target, duration);
       onClick?.(event);
     },
@@ -108,7 +114,7 @@ var BackTop = forwardRef(function BackTop2({
     "button",
     {
       ...props,
-      ref,
+      ref: setHostRef,
       type: "button",
       className: buttonClasses,
       style: buttonStyle,

package/dist/{chunk-C4UZFBFV.mjs → chunk-SOVB7HJF.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-ST4NN6XV.mjs";
 import {
   ChartTooltip
-} from "./chunk-IPI45RUK.mjs";
+} from "./chunk-JX2WKSVM.mjs";
 import {
   ChartAxis
 } from "./chunk-XZFHPHV5.mjs";

package/dist/{chunk-3WP4PGHF.mjs → chunk-TFHQODGK.mjs}

@@ -13,12 +13,15 @@ import {
   getCodeBlockCopyButtonClasses,
   getCodeLabels,
   mergeTigerLocale,
+  renderCodeHighlightHtml,
   resolveLocaleText
 } from "@expcat/tigercat-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Code = forwardRef(function Code2({
   code,
   copyable = true,
+  language,
+  highlighter,
   copyLabel,
   copiedLabel,
   copyFailedLabel,
@@ -64,7 +67,10 @@ var Code = forwardRef(function Code2({
   const buttonLabel = copyStatus === "failed" ? resolvedCopyFailedLabel : copyStatus === "copied" ? resolvedCopiedLabel : resolvedCopyLabel;
   const liveText = copyStatus === "idle" ? "" : buttonLabel;
   return /* @__PURE__ */ jsxs("div", { ref, className: containerClasses, ...props, children: [
-    /* @__PURE__ */ jsx("pre", { className: codeBlockPreClasses, children: /* @__PURE__ */ jsx("code", { className: "block", children: code }) }),
+    /* @__PURE__ */ jsx("pre", { className: codeBlockPreClasses, children: (() => {
+      const highlighted = renderCodeHighlightHtml(code, language, highlighter);
+      return highlighted == null ? /* @__PURE__ */ jsx("code", { className: "block", children: code }) : /* @__PURE__ */ jsx("code", { className: "block", dangerouslySetInnerHTML: { __html: highlighted } });
+    })() }),
     copyable && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("button", { type: "button", className: copyButtonClasses, onClick: handleCopy, children: buttonLabel }),
       /* @__PURE__ */ jsx("span", { className: codeBlockCopyStatusLiveClasses, "aria-live": "polite", children: liveText })