canvu-react 0.4.61 → 0.4.62

package/dist/native.d.cts

@@ -247,9 +247,6 @@ type NativeRemotePresenceHit = {
     readonly peerId?: string;
 };
 
-type NativeVectorStyleInspectorPlacement = "bottom" | "top-left";
-type NativeVectorStyleInspectorOverlayStyle = StyleProp<ViewStyle>;
-
 type NativeCustomShapePlacementOptions = {
     readonly toolId: string;
     readonly createItem: (args: {
@@ -388,17 +385,43 @@ type NativeVectorViewportProps = {
     readonly overlay?: React.ReactNode;
     readonly toolbar?: React.ReactNode;
     readonly showStyleInspector?: boolean;
-    readonly styleInspectorPlacement?: NativeVectorStyleInspectorPlacement;
-    /**
-     * Overrides the outer container style used to position the native style inspector.
-     *
-     * Use this when your app overlays custom headers, footers, or safe-area chrome
-     * above the canvas and needs to move the inspector away from those controls.
-     */
-    readonly styleInspectorOverlayStyle?: NativeVectorStyleInspectorOverlayStyle;
+    readonly styleInspectorPlacement?: "bottom" | "top-left";
 };
 declare const NativeVectorViewport: react.ForwardRefExoticComponent<NativeVectorViewportProps & react.RefAttributes<NativeVectorViewportHandle>>;
 
+type NativeVectorZoomControlsLabels = {
+    readonly zoomOut?: string;
+    readonly zoomIn?: string;
+};
+type NativeVectorZoomControlsProps = {
+    readonly zoomPercent: number;
+    readonly onZoomOut: () => void;
+    readonly onZoomIn: () => void;
+    readonly labels?: NativeVectorZoomControlsLabels;
+    readonly disabled?: boolean;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly buttonStyle?: StyleProp<ViewStyle>;
+    readonly iconStyle?: StyleProp<TextStyle>;
+    readonly labelStyle?: StyleProp<TextStyle>;
+};
+/**
+ * Native zoom-out, percentage, and zoom-in control for apps that compose
+ * {@link NativeVectorViewport} with their own floating chrome.
+ *
+ * Canvu owns the visual control and accessibility defaults; the consuming app
+ * should own placement, visibility, and camera wiring.
+ *
+ * @example
+ * ```tsx
+ * <NativeVectorZoomControls
+ *   zoomPercent={Math.round(camera.zoom * 100)}
+ *   onZoomOut={() => camera.setZoom(camera.zoom / 1.2)}
+ *   onZoomIn={() => camera.setZoom(camera.zoom * 1.2)}
+ * />
+ * ```
+ */
+declare function NativeVectorZoomControls({ zoomPercent, onZoomOut, onZoomIn, labels, disabled, style, buttonStyle, iconStyle, labelStyle, }: NativeVectorZoomControlsProps): react_jsx_runtime.JSX.Element;
+
 type NativeStyleColor = {
     readonly name: string;
     readonly hex: string;
@@ -530,4 +553,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeImagesMenu, type NativeImagesMenuLabels, type NativeImagesMenuProps, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeImagesMenu, type NativeImagesMenuLabels, type NativeImagesMenuProps, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, NativeVectorZoomControls, type NativeVectorZoomControlsLabels, type NativeVectorZoomControlsProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };

package/dist/native.d.ts

@@ -247,9 +247,6 @@ type NativeRemotePresenceHit = {
     readonly peerId?: string;
 };
 
-type NativeVectorStyleInspectorPlacement = "bottom" | "top-left";
-type NativeVectorStyleInspectorOverlayStyle = StyleProp<ViewStyle>;
-
 type NativeCustomShapePlacementOptions = {
     readonly toolId: string;
     readonly createItem: (args: {
@@ -388,17 +385,43 @@ type NativeVectorViewportProps = {
     readonly overlay?: React.ReactNode;
     readonly toolbar?: React.ReactNode;
     readonly showStyleInspector?: boolean;
-    readonly styleInspectorPlacement?: NativeVectorStyleInspectorPlacement;
-    /**
-     * Overrides the outer container style used to position the native style inspector.
-     *
-     * Use this when your app overlays custom headers, footers, or safe-area chrome
-     * above the canvas and needs to move the inspector away from those controls.
-     */
-    readonly styleInspectorOverlayStyle?: NativeVectorStyleInspectorOverlayStyle;
+    readonly styleInspectorPlacement?: "bottom" | "top-left";
 };
 declare const NativeVectorViewport: react.ForwardRefExoticComponent<NativeVectorViewportProps & react.RefAttributes<NativeVectorViewportHandle>>;
 
+type NativeVectorZoomControlsLabels = {
+    readonly zoomOut?: string;
+    readonly zoomIn?: string;
+};
+type NativeVectorZoomControlsProps = {
+    readonly zoomPercent: number;
+    readonly onZoomOut: () => void;
+    readonly onZoomIn: () => void;
+    readonly labels?: NativeVectorZoomControlsLabels;
+    readonly disabled?: boolean;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly buttonStyle?: StyleProp<ViewStyle>;
+    readonly iconStyle?: StyleProp<TextStyle>;
+    readonly labelStyle?: StyleProp<TextStyle>;
+};
+/**
+ * Native zoom-out, percentage, and zoom-in control for apps that compose
+ * {@link NativeVectorViewport} with their own floating chrome.
+ *
+ * Canvu owns the visual control and accessibility defaults; the consuming app
+ * should own placement, visibility, and camera wiring.
+ *
+ * @example
+ * ```tsx
+ * <NativeVectorZoomControls
+ *   zoomPercent={Math.round(camera.zoom * 100)}
+ *   onZoomOut={() => camera.setZoom(camera.zoom / 1.2)}
+ *   onZoomIn={() => camera.setZoom(camera.zoom * 1.2)}
+ * />
+ * ```
+ */
+declare function NativeVectorZoomControls({ zoomPercent, onZoomOut, onZoomIn, labels, disabled, style, buttonStyle, iconStyle, labelStyle, }: NativeVectorZoomControlsProps): react_jsx_runtime.JSX.Element;
+
 type NativeStyleColor = {
     readonly name: string;
     readonly hex: string;
@@ -530,4 +553,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeImagesMenu, type NativeImagesMenuLabels, type NativeImagesMenuProps, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeImagesMenu, type NativeImagesMenuLabels, type NativeImagesMenuProps, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, NativeVectorZoomControls, type NativeVectorZoomControlsLabels, type NativeVectorZoomControlsProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };

package/dist/native.js

@@ -5368,35 +5368,6 @@ function duplicateNativeSelectedShapes(input) {
   });
 }
 
-// src/native/native-style-inspector-overlay.ts
-function resolveNativeStyleInspectorOverlayStyle({
-  placement,
-  overlayElevation,
-  overlayStyle,
-  overlayZIndex
-}) {
-  const placementStyle = placement === "top-left" ? {
-    position: "absolute",
-    left: 16,
-    top: 104,
-    alignItems: "flex-start"
-  } : {
-    position: "absolute",
-    left: 16,
-    right: 16,
-    bottom: 84,
-    alignItems: "center"
-  };
-  return [
-    placementStyle,
-    {
-      zIndex: overlayZIndex,
-      elevation: overlayElevation
-    },
-    overlayStyle
-  ];
-}
-
 // src/native/native-transient-items.ts
 function moveNativeTransientItems({
   items,
@@ -5693,8 +5664,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   overlay,
   toolbar,
   showStyleInspector = false,
-  styleInspectorPlacement = "bottom",
-  styleInspectorOverlayStyle
+  styleInspectorPlacement = "bottom"
 }, ref) {
   const [size, setSize] = useState({ width: 0, height: 0 });
   const cameraRef = useRef(null);
@@ -6928,12 +6898,22 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         View,
         {
           pointerEvents: "box-none",
-          style: resolveNativeStyleInspectorOverlayStyle({
-            placement: styleInspectorPlacement,
-            overlayElevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION,
-            overlayStyle: styleInspectorOverlayStyle,
-            overlayZIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX
-          }),
+          style: styleInspectorPlacement === "top-left" ? {
+            position: "absolute",
+            left: 16,
+            top: 104,
+            alignItems: "flex-start",
+            zIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX,
+            elevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION
+          } : {
+            position: "absolute",
+            left: 16,
+            right: 16,
+            bottom: 84,
+            alignItems: "center",
+            zIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX,
+            elevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION
+          },
           children: /* @__PURE__ */ jsx(
             NativeVectorStyleInspector,
             {
@@ -7162,7 +7142,140 @@ var styles4 = StyleSheet.create({
     fontWeight: "700"
   }
 });
+var DEFAULT_NATIVE_VECTOR_ZOOM_CONTROLS_LABELS = {
+  zoomOut: "Zoom out",
+  zoomIn: "Zoom in"
+};
+function NativeVectorZoomControls({
+  zoomPercent,
+  onZoomOut,
+  onZoomIn,
+  labels,
+  disabled = false,
+  style,
+  buttonStyle,
+  iconStyle,
+  labelStyle
+}) {
+  const resolvedLabels = {
+    ...DEFAULT_NATIVE_VECTOR_ZOOM_CONTROLS_LABELS,
+    ...labels
+  };
+  return /* @__PURE__ */ jsxs(View, { style: [styles5.root, style], children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: resolvedLabels.zoomOut,
+        accessibilityState: { disabled },
+        disabled,
+        onPress: onZoomOut,
+        style: ({ pressed }) => [
+          styles5.button,
+          pressed && !disabled ? styles5.buttonPressed : null,
+          disabled ? styles5.buttonDisabled : null,
+          buttonStyle
+        ],
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [styles5.icon, disabled ? styles5.disabledText : null, iconStyle],
+            children: "-"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: styles5.labelWrap, children: /* @__PURE__ */ jsxs(
+      Text,
+      {
+        accessibilityRole: "text",
+        style: [styles5.label, disabled ? styles5.disabledText : null, labelStyle],
+        children: [
+          zoomPercent,
+          "%"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: resolvedLabels.zoomIn,
+        accessibilityState: { disabled },
+        disabled,
+        onPress: onZoomIn,
+        style: ({ pressed }) => [
+          styles5.button,
+          pressed && !disabled ? styles5.buttonPressed : null,
+          disabled ? styles5.buttonDisabled : null,
+          buttonStyle
+        ],
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [styles5.icon, disabled ? styles5.disabledText : null, iconStyle],
+            children: "+"
+          }
+        )
+      }
+    )
+  ] });
+}
+var styles5 = StyleSheet.create({
+  root: {
+    alignItems: "center",
+    backgroundColor: "#ffffff",
+    borderColor: "rgba(15, 23, 42, 0.12)",
+    borderRadius: 18,
+    borderWidth: 1,
+    elevation: 4,
+    flexDirection: "row",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    shadowColor: "#0f172a",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.16,
+    shadowRadius: 3
+  },
+  button: {
+    alignItems: "center",
+    borderRadius: 12,
+    height: 36,
+    justifyContent: "center",
+    width: 36
+  },
+  buttonPressed: {
+    backgroundColor: "rgba(15, 23, 42, 0.08)"
+  },
+  buttonDisabled: {
+    opacity: 0.54
+  },
+  icon: {
+    color: "#0f172a",
+    fontSize: 30,
+    fontWeight: "400",
+    includeFontPadding: false,
+    lineHeight: 32,
+    textAlign: "center"
+  },
+  labelWrap: {
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 64,
+    paddingHorizontal: 8
+  },
+  label: {
+    color: "#0f172a",
+    fontSize: 16,
+    fontWeight: "700",
+    includeFontPadding: false,
+    lineHeight: 20
+  },
+  disabledText: {
+    color: "#64748b"
+  }
+});
 
-export { DEFAULT_LINK_CARD_SIZE, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, NativeImagesMenu, NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorStyleInspector, NativeVectorToolbar, NativeVectorViewport, createFreehandStrokeItem, createImageItem, createLinkItem, createShapeId, getLinkData, isLinkItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { DEFAULT_LINK_CARD_SIZE, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, NativeImagesMenu, NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorStyleInspector, NativeVectorToolbar, NativeVectorViewport, NativeVectorZoomControls, createFreehandStrokeItem, createImageItem, createLinkItem, createShapeId, getLinkData, isLinkItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
 //# sourceMappingURL=native.js.map
 //# sourceMappingURL=native.js.map