@lmb-it/kitsconcerto-native 0.1.286 → 0.1.287

package/components/ImageCropper/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback, useMemo, useReducer, useEffect } from 'react';
-import { PanResponder, View, Text, Image, Pressable } from 'react-native';
+import { PanResponder, View, Text, Image, ActivityIndicator, Pressable } from 'react-native';
 import Slider from '@react-native-community/slider';
 import { Icon } from '../../primitives/Icon/index.js';
 import '../../contexts/DialogContext.js';
@@ -11,7 +11,7 @@ import useResolvedElementStyles from '../../hooks/useResolvedElementStyles.js';
 import { cropperReducer, initialCropperState, scaleRange, zoomFraction } from './cropperState.js';
 import { aspectOf, cropToSourceRect, orientedSize } from './geometry.js';
 import { isUsablePinchReading, pinchScale } from './pinchZoom.js';
-import { DEFAULT_ASPECT, DEFAULT_MAX_ZOOM, DEFAULT_FORMAT, DEFAULT_MAX_BYTES, DEFAULT_LABELS } from './constants.js';
+import { DEFAULT_ASPECT, DEFAULT_MAX_ZOOM, SQUARE_CROP_FACTOR, STAGE_INSET_NATIVE, DEFAULT_FORMAT, DEFAULT_MAX_BYTES, STAGE_ASPECT_NATIVE, CROP_ACCENT_SOFT, DEFAULT_LABELS, CROP_DANGER, CROP_ACCENT } from './constants.js';
 import { useImageSource } from './useImageSource.js';
 import { encodeCropNative } from './encode.js';
 import { hasCropEncoder } from './encoderRegistry.js';
@@ -83,7 +83,9 @@ function ImageCropper(rawProps) {
       ratio,
       maxZoom,
       // ⚠️ ALWAYS FALSE ON NATIVE — see the note at the top of the file.
-      resizable: false
+      resizable: false,
+      inset: STAGE_INSET_NATIVE,
+      squareFactor: SQUARE_CROP_FACTOR
     }),
     [image, viewport, ratio, maxZoom]
   );
@@ -248,186 +250,388 @@ function ImageCropper(rawProps) {
   const { crop, transform, rotation } = state;
   const oriented = image ? orientedSize({ width: image.width, height: image.height }, rotation) : null;
   const band = scaleRange(state);
-  const zoomLabel = Number.isFinite(band.min) && band.min > 0 ? `${(transform.scale / band.min).toFixed(1)}\xD7` : "1.0\xD7";
+  const zoomLabel = Number.isFinite(band.min) && band.min > 0 ? `${Math.round(transform.scale / band.min * 100)}%` : "100%";
   const windowRadius = isCircle ? Math.max(crop.width, crop.height) / 2 : Number(el.mask?.borderRadius ?? 0);
   const SCRIM = Math.ceil(Math.max(viewport.width, viewport.height)) || 1;
-  const toolButton = (icon, label, onPress, disabled) => /* @__PURE__ */ jsxs(
+  const aspectLabel = `${aspect[0]}:${aspect[1]}`;
+  const subtitle = ready ? "Drag to move \xB7 pinch to zoom" : isCircle ? `Circle \xB7 ${aspectLabel}` : `Banner \xB7 ${aspectLabel}`;
+  const budgetKb = Math.round((output?.maxBytes ?? DEFAULT_MAX_BYTES) / 1024);
+  const previewWidth = isCircle ? 60 : 160;
+  const previewHeight = isCircle ? 60 : Math.round(160 / ratio);
+  const stageTool = (icon, label, onPress) => /* @__PURE__ */ jsxs(
     Pressable,
     {
       onPress,
-      disabled,
+      disabled: !ready,
       accessibilityRole: "button",
       accessibilityLabel: label,
-      accessibilityState: { disabled: !!disabled },
-      style: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 6,
-        paddingHorizontal: 8,
-        paddingVertical: 8,
-        opacity: disabled ? 0.5 : 1
-      },
+      accessibilityState: { disabled: !ready },
+      style: { width: 58, alignItems: "center", gap: 4 },
       children: [
-        /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", color: el.icon?.color }),
-        /* @__PURE__ */ jsx(Text, { style: el.text, children: label })
+        /* @__PURE__ */ jsx(View, { style: {
+          width: 44,
+          height: 44,
+          borderRadius: 22,
+          backgroundColor: "rgba(255,255,255,0.09)",
+          alignItems: "center",
+          justifyContent: "center"
+        }, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 19, color: "#FFFFFF" }) }),
+        /* @__PURE__ */ jsx(Text, { style: { fontSize: 11, fontWeight: "600", color: "rgba(255,255,255,0.75)" }, children: label })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs(View, { testID, style: [{ width: "100%" }, el.root], children: [
-    title != null && /* @__PURE__ */ jsx(View, { style: [{ flexDirection: "row", alignItems: "center" }, el.header], children: /* @__PURE__ */ jsx(Text, { style: el.title, children: title }) }),
-    /* @__PURE__ */ jsx(View, { style: [el.content], children: !source || error ? /* @__PURE__ */ jsxs(View, { style: [{ alignItems: "center" }, el.dropZone], children: [
-      /* @__PURE__ */ jsx(Icon, { name: "image", size: "lg", color: el.icon?.color }),
-      /* @__PURE__ */ jsx(Text, { style: el.text, children: error ? error.message : text.dropZone })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(StageFrame, { gesture: detector, children: /* @__PURE__ */ jsxs(
-        View,
-        {
-          ref: stageRef,
-          onLayout: onStageLayout,
-          ...detector ? scrollBlocker.panHandlers : responder.panHandlers,
-          style: [{ width: "100%", aspectRatio: 4 / 3, overflow: "hidden" }, el.container],
-          children: [
-            ready && image && oriented && /* @__PURE__ */ jsx(
-              Image,
-              {
-                source: { uri: image.uri },
-                resizeMode: "stretch",
-                style: {
-                  position: "absolute",
-                  left: transform.x,
-                  top: transform.y,
-                  width: oriented.width * transform.scale,
-                  height: oriented.height * transform.scale,
-                  transform: [{ rotate: `${rotation}deg` }]
-                }
-              }
-            ),
-            ready && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                View,
-                {
-                  pointerEvents: "none",
-                  style: [
-                    {
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      style: [
+        /**
+         * ⚠️ NO `flex: 1` HERE, THOUGH THE MOCKUP IS FULL-SCREEN. A
+         * child with `flex: 1` inside a parent that was never given a
+         * height measures 0 on Yoga, and this component does not own
+         * the screen — a consumer mounts it in a modal, a sheet or a
+         * form. The footer's `marginTop: 'auto'` gets the mockup's
+         * pinned-to-the-bottom footer when the parent DOES bound the
+         * height, and does nothing when it does not.
+         */
+        { width: "100%" },
+        el.root,
+        /**
+         * ⛔ THE PHONE CROPPER IS A DARK SHEET, AND THAT OVERRIDES THE
+         * `root` SLOT ON NATIVE ONLY. The mockup draws web as a light
+         * modal card and the phone as a full-screen dark surface, and
+         * one `root` token cannot be both. It has to be the dark one
+         * here because the controls below it are load-bearing white:
+         * on a light sheet the Rotate and Reset labels vanish.
+         *
+         * ⚠️ SO `slots.root.backgroundColor` DOES NOT REACH THIS ON
+         * NATIVE. That is the deliberate cost; the stage's own colour
+         * has carried the same argument since the component shipped.
+         */
+        { backgroundColor: "#0B1517" }
+      ],
+      children: [
+        title != null && /* @__PURE__ */ jsxs(View, { style: [
+          { alignItems: "center" },
+          el.header,
+          {
+            paddingLeft: 18,
+            paddingRight: 18,
+            paddingTop: 12,
+            paddingBottom: 14,
+            borderBottomWidth: 0,
+            gap: 0
+          }
+        ], children: [
+          /* @__PURE__ */ jsx(Text, { style: [el.title, { fontSize: 16, fontWeight: "800", color: "#FFFFFF" }], children: title }),
+          /* @__PURE__ */ jsx(Text, { style: { marginTop: 3, fontSize: 12, color: "rgba(255,255,255,0.6)" }, children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: [el.content, { paddingLeft: 0, paddingRight: 0, paddingTop: 0, paddingBottom: 0 }], children: [
+          /* @__PURE__ */ jsx(StageFrame, { gesture: detector, children: /* @__PURE__ */ jsxs(
+            View,
+            {
+              ref: stageRef,
+              onLayout: onStageLayout,
+              ...detector ? scrollBlocker.panHandlers : responder.panHandlers,
+              style: [
+                { width: "100%", aspectRatio: STAGE_ASPECT_NATIVE, overflow: "hidden" },
+                el.container
+              ],
+              children: [
+                ready && image && oriented && /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    source: { uri: image.uri },
+                    resizeMode: "stretch",
+                    style: {
                       position: "absolute",
-                      left: crop.x - SCRIM,
-                      top: crop.y - SCRIM,
-                      width: crop.width + SCRIM * 2,
-                      height: crop.height + SCRIM * 2,
-                      borderWidth: SCRIM,
-                      borderColor: el.shade?.backgroundColor ?? "rgba(0,0,0,0.6)",
-                      borderRadius: windowRadius + SCRIM
+                      left: transform.x,
+                      top: transform.y,
+                      width: oriented.width * transform.scale,
+                      height: oriented.height * transform.scale,
+                      transform: [{ rotate: `${rotation}deg` }]
+                    }
+                  }
+                ),
+                (!source || error) && /* @__PURE__ */ jsxs(View, { style: [
+                  {
+                    position: "absolute",
+                    left: 18,
+                    top: 18,
+                    right: 18,
+                    bottom: 18,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  el.dropZone,
+                  { borderRadius: 18 }
+                ], children: [
+                  /* @__PURE__ */ jsx(View, { style: {
+                    width: 60,
+                    height: 60,
+                    borderRadius: 30,
+                    backgroundColor: "rgba(32,170,176,0.16)",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }, children: /* @__PURE__ */ jsx(Icon, { name: "image", size: 26, color: CROP_ACCENT_SOFT }) }),
+                  /* @__PURE__ */ jsx(Text, { style: { fontSize: 16, fontWeight: "800", color: "#FFFFFF", textAlign: "center" }, children: text.dropZone }),
+                  /* @__PURE__ */ jsx(Text, { style: { fontSize: 12.5, color: "rgba(255,255,255,0.6)", textAlign: "center" }, children: "JPG, PNG or WebP" }),
+                  error && /* @__PURE__ */ jsx(Text, { style: {
+                    fontSize: 12.5,
+                    fontWeight: "600",
+                    color: CROP_DANGER,
+                    textAlign: "center"
+                  }, children: error.message })
+                ] }),
+                ready && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    View,
+                    {
+                      pointerEvents: "none",
+                      style: [
+                        {
+                          position: "absolute",
+                          left: crop.x - SCRIM,
+                          top: crop.y - SCRIM,
+                          width: crop.width + SCRIM * 2,
+                          height: crop.height + SCRIM * 2,
+                          borderWidth: SCRIM,
+                          borderColor: el.shade?.backgroundColor ?? "rgba(0,0,0,0.6)",
+                          borderRadius: windowRadius + SCRIM
+                        }
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    View,
+                    {
+                      pointerEvents: "none",
+                      style: [
+                        {
+                          position: "absolute",
+                          left: crop.x,
+                          top: crop.y,
+                          width: crop.width,
+                          height: crop.height,
+                          borderStyle: "solid"
+                        },
+                        el.cropWindow,
+                        { borderRadius: windowRadius }
+                      ],
+                      children: !hideGrid && [1, 2].map((n) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                        /* @__PURE__ */ jsx(View, { style: [
+                          {
+                            position: "absolute",
+                            top: 0,
+                            bottom: 0,
+                            width: 1,
+                            left: crop.width * n / 3
+                          },
+                          el.gridLine
+                        ] }),
+                        /* @__PURE__ */ jsx(View, { style: [
+                          {
+                            position: "absolute",
+                            left: 0,
+                            right: 0,
+                            height: 1,
+                            top: crop.height * n / 3
+                          },
+                          el.gridLine
+                        ] })
+                      ] }, n))
                     }
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                View,
-                {
-                  pointerEvents: "none",
-                  style: [
+                  ),
+                  /* @__PURE__ */ jsx(
+                    View,
                     {
+                      pointerEvents: "none",
+                      style: { position: "absolute", top: 12, left: 0, right: 0, alignItems: "center" },
+                      children: /* @__PURE__ */ jsx(
+                        View,
+                        {
+                          style: [
+                            { alignItems: "center", justifyContent: "center" },
+                            el.zoomChip
+                          ],
+                          children: /* @__PURE__ */ jsx(Text, { style: {
+                            color: el.zoomChip?.color ?? "#FFFFFF",
+                            fontSize: 11.5,
+                            fontWeight: "700"
+                          }, children: zoomLabel })
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                (loading || busy) && /* @__PURE__ */ jsxs(
+                  View,
+                  {
+                    pointerEvents: "none",
+                    style: {
                       position: "absolute",
-                      left: crop.x,
-                      top: crop.y,
-                      width: crop.width,
-                      height: crop.height,
-                      borderStyle: "solid"
+                      left: 0,
+                      top: 0,
+                      right: 0,
+                      bottom: 0,
+                      backgroundColor: "rgba(6,14,16,0.74)",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: 14
                     },
-                    el.cropWindow,
-                    { borderRadius: windowRadius }
-                  ],
-                  children: !hideGrid && [1, 2].map((n) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                    /* @__PURE__ */ jsx(View, { style: [
-                      {
-                        position: "absolute",
-                        top: 0,
-                        bottom: 0,
-                        width: 1,
-                        left: crop.width * n / 3
-                      },
-                      el.gridLine
-                    ] }),
-                    /* @__PURE__ */ jsx(View, { style: [
-                      {
-                        position: "absolute",
-                        left: 0,
-                        right: 0,
-                        height: 1,
-                        top: crop.height * n / 3
-                      },
-                      el.gridLine
-                    ] })
-                  ] }, n))
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                View,
-                {
-                  pointerEvents: "none",
-                  style: [{ position: "absolute", right: 8, bottom: 8 }, el.zoomChip],
-                  children: /* @__PURE__ */ jsx(Text, { style: { color: el.zoomChip?.color }, children: zoomLabel })
-                }
-              )
-            ] }),
-            (loading || busy) && /* @__PURE__ */ jsx(View, { style: [{ position: "absolute", left: 0, right: 0, bottom: 0 }, el.progressFill] })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
-        /* @__PURE__ */ jsx(Icon, { name: "zoom-in", size: "sm", color: el.icon?.color }),
-        /* @__PURE__ */ jsx(
-          Slider,
-          {
-            style: { flex: 1 },
-            minimumValue: 0,
-            maximumValue: 1,
-            value: zoomFraction(state),
-            disabled: !ready,
-            minimumTrackTintColor: el.thumb?.backgroundColor,
-            maximumTrackTintColor: el.track?.backgroundColor,
-            thumbTintColor: el.thumb?.backgroundColor,
-            onValueChange: (value) => dispatch({ type: "setZoom", value })
-          }
-        ),
-        !hidePreview && ready && image && oriented && /* The preview is the same image, clipped and offset so the
-           crop fills the frame — no pixel work, and therefore
-           nothing that has to wait for an encoder. */
-        /* @__PURE__ */ jsx(
-          View,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        ActivityIndicator,
+                        {
+                          size: "large",
+                          color: el.progressFill?.backgroundColor ?? CROP_ACCENT
+                        }
+                      ),
+                      busy && /* @__PURE__ */ jsx(Text, { style: { fontSize: 14, fontWeight: "700", color: "#FFFFFF" }, children: text.processing })
+                    ]
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            View,
+            {
+              pointerEvents: ready ? "auto" : "none",
+              style: {
+                paddingTop: 16,
+                paddingLeft: 18,
+                paddingRight: 18,
+                gap: 16,
+                opacity: ready ? 1 : 0.4
+              },
+              children: [
+                /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+                  !hidePreview && ready && image && oriented && /* The preview is the same image, clipped and offset so the
+                     crop fills the frame — no pixel work, and therefore
+                     nothing that has to wait for an encoder. */
+                  /* @__PURE__ */ jsx(
+                    View,
+                    {
+                      style: [
+                        { width: previewWidth, height: previewHeight, overflow: "hidden" },
+                        el.previewFrame,
+                        isCircle ? { borderRadius: previewWidth / 2 } : null,
+                        /* ⚠️ A 2px RING, NOT THE CARD'S 4. The slot
+                           carries the desktop preview's ring; at 60pt
+                           a 4pt ring eats the thumbnail. */
+                        { borderWidth: 2 },
+                        /* The mockup's float, in the native spelling —
+                           `boxShadow` is the web file's half of this. */
+                        {
+                          shadowColor: "#000000",
+                          shadowOpacity: 0.14,
+                          shadowRadius: 14,
+                          shadowOffset: { width: 0, height: 4 },
+                          elevation: 4
+                        }
+                      ],
+                      children: /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          source: { uri: image.uri },
+                          resizeMode: "stretch",
+                          style: {
+                            position: "absolute",
+                            width: oriented.width * transform.scale * (previewWidth / crop.width),
+                            height: oriented.height * transform.scale * (previewWidth / crop.width),
+                            left: (transform.x - crop.x) * (previewWidth / crop.width),
+                            top: (transform.y - crop.y) * (previewWidth / crop.width),
+                            transform: [{ rotate: `${rotation}deg` }]
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(View, { style: { flex: 1, alignItems: "flex-end" }, children: [
+                    /* @__PURE__ */ jsx(Text, { style: { fontSize: 17, fontWeight: "800", color: "#FFFFFF" }, children: zoomLabel }),
+                    /* @__PURE__ */ jsx(Text, { style: { marginTop: 2, fontSize: 11.5, color: "rgba(255,255,255,0.6)" }, children: `Under ${budgetKb} KB` })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 10 }, children: [
+                  stageTool("rotate-cw", text.rotate, () => dispatch({ type: "rotate" })),
+                  /* @__PURE__ */ jsx(
+                    Slider,
+                    {
+                      style: { flex: 1 },
+                      minimumValue: 0,
+                      maximumValue: 1,
+                      value: zoomFraction(state),
+                      disabled: !ready,
+                      minimumTrackTintColor: el.thumb?.backgroundColor,
+                      maximumTrackTintColor: el.track?.backgroundColor,
+                      thumbTintColor: el.thumb?.backgroundColor,
+                      onValueChange: (value) => dispatch({ type: "setZoom", value })
+                    }
+                  ),
+                  stageTool("rotate-ccw", text.reset, () => dispatch({ type: "reset" }))
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: [
+          { flexDirection: "row", alignItems: "center", marginTop: "auto" },
+          el.footer,
           {
-            style: [
-              { width: 64, height: 64, overflow: "hidden" },
-              el.previewFrame,
-              isCircle ? { borderRadius: 32 } : null
-            ],
-            children: /* @__PURE__ */ jsx(
-              Image,
-              {
-                source: { uri: image.uri },
-                resizeMode: "stretch",
-                style: {
-                  position: "absolute",
-                  width: oriented.width * transform.scale * (64 / crop.width),
-                  height: oriented.height * transform.scale * (64 / crop.width),
-                  left: (transform.x - crop.x) * (64 / crop.width),
-                  top: (transform.y - crop.y) * (64 / crop.width),
-                  transform: [{ rotate: `${rotation}deg` }]
-                }
-              }
-            )
+            paddingLeft: 18,
+            paddingRight: 18,
+            paddingTop: 12,
+            paddingBottom: 28,
+            borderTopWidth: 1,
+            borderTopColor: "rgba(255,255,255,0.08)",
+            gap: 12
           }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxs(View, { style: [{ flexDirection: "row", alignItems: "center" }, el.footer], children: [
-      toolButton("rotate-cw", text.rotate, () => dispatch({ type: "rotate" }), !ready),
-      toolButton("rotate-ccw", text.reset, () => dispatch({ type: "reset" }), !ready),
-      /* @__PURE__ */ jsx(View, { style: { flex: 1 } }),
-      toolButton("x", text.cancel, () => onCancel?.()),
-      toolButton("check", busy ? text.processing : text.save, () => void save(), !canSave)
-    ] })
-  ] });
+        ], children: [
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: () => onCancel?.(),
+              accessibilityRole: "button",
+              accessibilityLabel: text.cancel,
+              style: {
+                flex: 1,
+                height: 52,
+                borderRadius: 26,
+                backgroundColor: "rgba(255,255,255,0.1)",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 15, fontWeight: "700", color: "#FFFFFF" }, children: text.cancel })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: () => void save(),
+              disabled: !canSave,
+              accessibilityRole: "button",
+              accessibilityLabel: text.save,
+              accessibilityState: { disabled: !canSave },
+              style: {
+                flex: 1.4,
+                height: 52,
+                borderRadius: 26,
+                backgroundColor: canSave ? CROP_ACCENT : "rgba(32,170,176,0.35)",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(Text, { style: {
+                fontSize: 15,
+                fontWeight: "800",
+                color: canSave ? "#FFFFFF" : "rgba(255,255,255,0.55)"
+              }, children: busy ? text.processing : text.save })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 export { ImageCropper };