@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/internal/flow.js

@@ -1,35 +1,33 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Panel, useNodesInitialized, useReactFlow, useStore, } from "@xyflow/react";
-import { useEffect, useSyncExternalStore } from "react";
-import { Add } from "reicon-react/icons/Add";
-import { Minus } from "reicon-react/icons/Minus";
-import { Scan } from "reicon-react/icons/Scan";
-import { Button } from "../components/button.js";
+import { Panel, useNodesInitialized, useReactFlow, useStore } from '@xyflow/react';
+import { useEffect, useSyncExternalStore } from 'react';
+import { Add } from 'reicon-react/icons/Add';
+import { Minus } from 'reicon-react/icons/Minus';
+import { Scan } from 'reicon-react/icons/Scan';
+import { Button } from '../components/button.js';
 export const flowMinZoom = 0.2;
 export const flowMaxZoom = 1.5;
 const panStep = 48;
-const mobileQuery = "(max-width: 767px)";
-const motionQuery = "(prefers-reduced-motion: reduce)";
+const mobileQuery = '(max-width: 767px)';
+const motionQuery = '(prefers-reduced-motion: reduce)';
 function subscribeMobile(callback) {
     const media = window.matchMedia(mobileQuery);
-    media.addEventListener("change", callback);
-    return () => media.removeEventListener("change", callback);
+    media.addEventListener('change', callback);
+    return () => media.removeEventListener('change', callback);
 }
 export function useViewportMobile() {
     return useSyncExternalStore(subscribeMobile, () => window.matchMedia(mobileQuery).matches, () => false);
 }
-export const motion = (ms) => typeof window !== "undefined" && window.matchMedia(motionQuery).matches
-    ? 0
-    : ms;
+export const motion = (ms) => typeof window !== 'undefined' && window.matchMedia(motionQuery).matches ? 0 : ms;
 /**
  * Refits whenever the pane resizes or the nodes change. The canvas panel
  * animates open, so the first fit sees a narrower pane than the final one.
  */
-export function FitOnResize({ nodes, fit, }) {
+export function FitOnResize({ nodes, fit }) {
     const { fitView } = useReactFlow();
-    const width = useStore((state) => state.width);
-    const height = useStore((state) => state.height);
+    const width = useStore(state => state.width);
+    const height = useStore(state => state.height);
     const measured = useNodesInitialized();
     useEffect(() => {
         if (!measured)
@@ -41,7 +39,7 @@ export function FitOnResize({ nodes, fit, }) {
 }
 export function ZoomControls({ position, fit, className, slot, }) {
     const { zoomIn, zoomOut, fitView } = useReactFlow();
-    const zoom = useStore((state) => state.transform[2]);
+    const zoom = useStore(state => state.transform[2]);
     return (_jsxs(Panel, { position: position, className: className, "data-slot": slot, role: "toolbar", "aria-label": "Diagram view", "aria-orientation": "vertical", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", title: "Zoom in", disabled: zoom >= flowMaxZoom, onClick: () => void zoomIn({ duration: motion(160) }), children: _jsx(Add, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", title: "Zoom out", disabled: zoom <= flowMinZoom, onClick: () => void zoomOut({ duration: motion(160) }), children: _jsx(Minus, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Fit to view", title: "Fit to view", onClick: () => void fitView({ ...fit, duration: motion(180) }), children: _jsx(Scan, { size: 16, "aria-hidden": "true" }) })] }));
 }
 /** Arrow keys pan, plus and minus zoom, and 0 fits, from the pane or a node. */
@@ -51,8 +49,7 @@ export function useKeyboardView(fit) {
         const target = event.target;
         if (event.altKey || event.ctrlKey || event.metaKey)
             return;
-        if (target !== event.currentTarget &&
-            !target.classList.contains("react-flow__node"))
+        if (target !== event.currentTarget && !target.classList.contains('react-flow__node'))
             return;
         const step = panStep * (event.shiftKey ? 4 : 1);
         const pan = {
@@ -66,13 +63,13 @@ export function useKeyboardView(fit) {
             const { x, y, zoom } = getViewport();
             void setViewport({ x: x + move[0], y: y + move[1], zoom }, { duration: motion(120) });
         }
-        else if (event.key === "+" || event.key === "=") {
+        else if (event.key === '+' || event.key === '=') {
             void zoomIn({ duration: motion(160) });
         }
-        else if (event.key === "-" || event.key === "_") {
+        else if (event.key === '-' || event.key === '_') {
             void zoomOut({ duration: motion(160) });
         }
-        else if (event.key === "0") {
+        else if (event.key === '0') {
             void fitView({ ...fit, duration: motion(180) });
         }
         else