@a-type/ui 5.0.21 → 6.0.0

package/dist/components/viewport/Viewport.js

@@ -0,0 +1,78 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { useSizeCssVars, useStableCallback } from '../../hooks.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { Box } from '../box/Box.js';
+import { useKeyboardControls, useViewportGestureControls, } from './useViewportGestures.js';
+import cls from './Viewport.module.css';
+import { ViewportContent } from './ViewportContent.js';
+import { ViewportProvider } from './ViewportContext.js';
+import { ViewportState } from './ViewportState.js';
+import { ViewportZoomControls } from './ViewportZoomControls.js';
+export function ViewportRoot({ children, className, style, defaultCenter, onZoomChange, onCenterChange, viewportRef, minZoom = 'fit', maxZoom = 3, defaultZoom = 0.5, panLimitBuffer = 100, gestureOptions, }) {
+    const viewport = useState(() => new ViewportState({
+        panLimitMode: 'viewport',
+        zoomLimits: {
+            min: minZoom,
+            max: maxZoom,
+        },
+        defaultZoom,
+        panLimitBuffer,
+        defaultCenter,
+    }))[0];
+    if (viewportRef) {
+        // If a viewportRef is provided, we use it to expose the viewport state
+        // This allows parent components to access the viewport state directly
+        viewportRef.current = viewport;
+    }
+    const innerRef = useRef(null);
+    const sizeRef = useSizeCssVars(300, undefined, {
+        width: '--root-width',
+        height: '--root-height',
+    });
+    const finalRef = useMergedRef(viewport.bindRoot, innerRef, sizeRef);
+    const gestureProps = useViewportGestureControls(viewport, innerRef, gestureOptions);
+    const keyboardProps = useKeyboardControls(viewport);
+    useEffect(() => {
+        window.viewport = viewport; // For debugging purposes
+    }, [viewport]);
+    const stableOnZoomChange = useStableCallback(onZoomChange);
+    const stableOnCenterChange = useStableCallback(onCenterChange);
+    useEffect(() => {
+        setTimeout(() => stableOnZoomChange(viewport.zoom), 0);
+        return viewport.subscribe('zoomChanged', stableOnZoomChange);
+    }, [viewport, stableOnZoomChange]);
+    useEffect(() => {
+        setTimeout(() => stableOnCenterChange(viewport.panPosition), 0);
+        return viewport.subscribe('centerChanged', stableOnCenterChange);
+    }, [viewport, stableOnCenterChange]);
+    const [controlsRoot, controlsRef] = useState(null);
+    return (_jsx(ViewportProvider, { value: viewport, children: _jsx(ViewportControlContext.Provider, { value: controlsRoot, children: _jsx(Box, { className: clsx(cls.root, className), style: style, ref: controlsRef, children: _jsx("div", Object.assign({ className: clsx(cls.positioner, className) }, gestureProps, keyboardProps, { tabIndex: 0, ref: finalRef, children: _jsx(ViewportContent, { viewport: viewport, children: children }) })) }) }) }));
+}
+const ViewportControlContext = createContext(null);
+export function ViewportControlContent(_a) {
+    var { children, className, position = 'top-right' } = _a, props = __rest(_a, ["children", "className", "position"]);
+    const el = useContext(ViewportControlContext);
+    if (el === null) {
+        return null;
+    }
+    return createPortal(_jsx(Box, Object.assign({ className: clsx(cls.controlContent, className), surface: true, border: true, elevated: "md" }, props, { children: children })), el);
+}
+export const Viewport = Object.assign(ViewportRoot, {
+    Control: ViewportControlContent,
+    ZoomControls: ViewportZoomControls,
+});
+//# sourceMappingURL=Viewport.js.map

package/dist/components/viewport/Viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.js","sourceRoot":"","sources":["../../../src/components/viewport/Viewport.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACN,aAAa,EAIb,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAY,MAAM,eAAe,CAAC;AAC9C,OAAO,EACN,mBAAmB,EACnB,0BAA0B,GAE1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,GAAG,MAAM,uBAAuB,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAwB,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAkBjE,MAAM,UAAU,YAAY,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAa,EACb,YAAY,EACZ,cAAc,EACd,WAAW,EACX,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,CAAC,EACX,WAAW,GAAG,GAAG,EACjB,cAAc,GAAG,GAAG,EACpB,cAAc,GACC;IACf,MAAM,QAAQ,GAAG,QAAQ,CACxB,GAAG,EAAE,CACJ,IAAI,aAAa,CAAC;QACjB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE;YACX,GAAG,EAAE,OAAO;YACZ,GAAG,EAAE,OAAO;SACZ;QACD,WAAW;QACX,cAAc;QACd,aAAa;KACb,CAAC,CACH,CAAC,CAAC,CAAC,CAAC;IACL,IAAI,WAAW,EAAE,CAAC;QACjB,uEAAuE;QACvE,sEAAsE;QACtE,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,cAAc,CAAiB,GAAG,EAAE,SAAS,EAAE;QAC9D,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,eAAe;KACvB,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,YAAY,CAC5B,QAAQ,CAAC,QAAQ,EACjB,QAAQ,EACR,OAAO,CACP,CAAC;IAEF,MAAM,YAAY,GAAG,0BAA0B,CAC9C,QAAQ,EACR,QAAQ,EACR,cAAc,CACd,CAAC;IACF,MAAM,aAAa,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAc,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,yBAAyB;IAC/D,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC3D,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC/D,SAAS,CAAC,GAAG,EAAE;QACd,UAAU,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD,OAAO,QAAQ,CAAC,SAAS,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACd,UAAU,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;QAChE,OAAO,QAAQ,CAAC,SAAS,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAErC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAE1E,OAAO,CACN,KAAC,gBAAgB,IAAC,KAAK,EAAE,QAAQ,YAChC,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YACnD,KAAC,GAAG,IACH,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EACpC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,WAAW,YAEhB,4BACC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC,IACtC,YAAY,EACZ,aAAa,IACjB,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,QAAQ,YAEb,KAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,YAAG,QAAQ,GAAmB,IAC5D,GACD,GAC2B,GAChB,CACnB,CAAC;AACH,CAAC;AAED,MAAM,sBAAsB,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAC;AAE1E,MAAM,UAAU,sBAAsB,CAAC,EAOtC;QAPsC,EACtC,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,WAAW,OAItB,EAHG,KAAK,cAJ8B,qCAKtC,CADQ;IAIR,MAAM,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAE9C,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,YAAY,CAClB,KAAC,GAAG,kBACH,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,SAAS,CAAC,EAC9C,OAAO,QACP,MAAM,QACN,QAAQ,EAAC,IAAI,IACT,KAAK,cAER,QAAQ,IACJ,EACN,EAAE,CACF,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IACnD,OAAO,EAAE,sBAAsB;IAC/B,YAAY,EAAE,oBAAoB;CAClC,CAAC,CAAC"}

package/dist/components/viewport/Viewport.module.css

@@ -0,0 +1,44 @@
+.root {
+	min-height: 32px;
+	min-width: 32px;
+}
+
+.positioner {
+	contain: strict;
+	position: relative;
+	height: 100%;
+	width: 100%;
+	display: flex;
+	touch-action: none;
+	user-select: none;
+	overflow: clip;
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		@apply --mx-shadow;
+		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+	}
+}
+
+.controlContent {
+	position: absolute;
+
+	&[data-position='top-left'] {
+		top: var(--m-spacing-sm);
+		left: var(--m-spacing-sm);
+	}
+	&[data-position='top-right'] {
+		top: var(--m-spacing-sm);
+		right: var(--m-spacing-sm);
+	}
+	&[data-position='bottom-left'] {
+		bottom: var(--m-spacing-sm);
+		left: var(--m-spacing-sm);
+	}
+	&[data-position='bottom-right'] {
+		bottom: var(--m-spacing-sm);
+		right: var(--m-spacing-sm);
+	}
+}

package/dist/components/viewport/Viewport.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Viewport } from './Viewport.js';
+declare const meta: {
+    title: string;
+    component: typeof import("./Viewport.js").ViewportRoot & {
+        Control: typeof import("./Viewport.js").ViewportControlContent;
+        ZoomControls: typeof import("./ViewportZoomControls.js").ViewportZoomControls;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Viewport>;
+export declare const Default: Story;
+export declare const HighZoomLevel: Story;

package/dist/components/viewport/Viewport.stories.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { Viewport } from './Viewport.js';
+import { useViewport } from './ViewportContext.js';
+const meta = {
+    title: 'Components/Viewport',
+    component: Viewport,
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const CenterButton = () => {
+    const viewport = useViewport();
+    return (_jsx(Button, { emphasis: "ghost", size: "small", onClick: () => viewport.recenter(), children: _jsx(Icon, { name: "locate" }) }));
+};
+export const Default = {
+    render(args) {
+        return (_jsxs(Viewport, Object.assign({ style: {
+                height: 600,
+                width: '100%',
+            } }, args, { children: [_jsx("img", { src: "https://resources.biscuits.club/images/pashka.jpg" }), _jsx(Viewport.Control, { children: _jsx(Viewport.ZoomControls, {}) }), _jsx(Viewport.Control, { position: "bottom-right", children: _jsx(CenterButton, {}) })] })));
+    },
+};
+export const HighZoomLevel = {
+    render(args) {
+        return (_jsxs(Viewport, Object.assign({ style: {
+                height: 600,
+                width: '100%',
+            }, defaultZoom: 100, maxZoom: 1000, minZoom: 10 }, args, { children: [_jsx("img", { src: "https://resources.biscuits.club/images/pashka.jpg", width: 10 }), _jsx(Viewport.Control, { children: _jsx(Viewport.ZoomControls, {}) }), _jsx(Viewport.Control, { position: "bottom-right", children: _jsx(CenterButton, {}) })] })));
+    },
+};
+//# sourceMappingURL=Viewport.stories.js.map

package/dist/components/viewport/Viewport.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.stories.js","sourceRoot":"","sources":["../../../src/components/viewport/Viewport.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,YAAY,GAAG,GAAG,EAAE;IACzB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,OAAO,CACN,KAAC,MAAM,IAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,YACvE,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACd,CACT,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,QAAQ,kBACR,KAAK,EAAE;gBACN,MAAM,EAAE,GAAG;gBACX,KAAK,EAAE,MAAM;aACb,IACG,IAAI,eAER,cAAK,GAAG,EAAC,mDAAmD,GAAG,EAC/D,KAAC,QAAQ,CAAC,OAAO,cAChB,KAAC,QAAQ,CAAC,YAAY,KAAG,GACP,EACnB,KAAC,QAAQ,CAAC,OAAO,IAAC,QAAQ,EAAC,cAAc,YACxC,KAAC,YAAY,KAAG,GACE,KACT,CACX,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IACnC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,QAAQ,kBACR,KAAK,EAAE;gBACN,MAAM,EAAE,GAAG;gBACX,KAAK,EAAE,MAAM;aACb,EACD,WAAW,EAAE,GAAG,EAChB,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,EAAE,IACP,IAAI,eAER,cACC,GAAG,EAAC,mDAAmD,EACvD,KAAK,EAAE,EAAE,GACR,EACF,KAAC,QAAQ,CAAC,OAAO,cAChB,KAAC,QAAQ,CAAC,YAAY,KAAG,GACP,EACnB,KAAC,QAAQ,CAAC,OAAO,IAAC,QAAQ,EAAC,cAAc,YACxC,KAAC,YAAY,KAAG,GACE,KACT,CACX,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/viewport/ViewportContent.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { preventDefault } from '@a-type/utils';
+import clsx from 'clsx';
+import { motion, useMotionTemplate, useSpring, } from 'motion/react';
+import { useEffect, useRef } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import cls from './ViewportContent.module.css';
+const PAN_SPRING_CONFIG = {
+    mass: 0.2,
+    bounce: 0.05,
+};
+const ZOOM_SPRING_CONFIG = {
+    mass: 0.5,
+    bounce: 0.1,
+};
+export function ViewportContent(_a) {
+    var { viewport, children, className } = _a, rest = __rest(_a, ["viewport", "children", "className"]);
+    const internalRef = useRef(null);
+    const centerX = useSpring(viewport.panPosition.x, PAN_SPRING_CONFIG);
+    const centerY = useSpring(viewport.panPosition.y, PAN_SPRING_CONFIG);
+    const zoom = useSpring(viewport.zoom, ZOOM_SPRING_CONFIG);
+    useEffect(() => viewport.subscribe('centerChanged', (center, origin) => {
+        if (origin === 'direct') {
+            centerX.jump(-center.x);
+            centerY.jump(-center.y);
+        }
+        else {
+            centerX.set(-center.x);
+            centerY.set(-center.y);
+        }
+    }), [viewport, centerX, centerY]);
+    useEffect(() => viewport.subscribe('zoomChanged', (zoomValue, origin) => {
+        if (origin === 'direct') {
+            zoom.jump(zoomValue);
+        }
+        else {
+            zoom.set(zoomValue);
+        }
+        if (internalRef.current) {
+            // disabled: this is causing recalculate style :(
+            //internalRef.current.style.setProperty('--zoom', zoomValue.toString());
+        }
+    }), [viewport, zoom, internalRef]);
+    useEffect(() => viewport.subscribe('zoomSettled', (zoom) => {
+        if (internalRef.current) {
+            internalRef.current.style.setProperty('--zoom-settled', zoom.toString());
+        }
+    }), [viewport, internalRef]);
+    const finalRef = useMergedRef(viewport.bindContent, internalRef);
+    const transform = useMotionTemplate `translate3d(calc(var(--root-width,0)/2), calc(var(--root-height,0)/2), 0) translate3d(-50%, -50%, 0) scale(${zoom}) translate3d(${centerX}px, ${centerY}px, 0)`;
+    return (_jsx(motion.div, Object.assign({}, rest, { className: clsx(cls.root, className), ref: finalRef, style: { transform }, onDragStartCapture: preventDefault, onDrag: preventDefault, onDragEnd: preventDefault, children: children })));
+}
+//# sourceMappingURL=ViewportContent.js.map

package/dist/components/viewport/ViewportContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportContent.js","sourceRoot":"","sources":["../../../src/components/viewport/ViewportContent.tsx"],"names":[],"mappings":"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"}

package/dist/components/viewport/ViewportContent.module.css

@@ -0,0 +1,8 @@
+.root {
+	position: absolute;
+	transform-origin: center;
+	touch-action: none;
+	user-select: none;
+	overflow: visible;
+	overscroll-behavior: none;
+}

package/dist/components/viewport/ViewportContext.js

@@ -0,0 +1,11 @@
+import { createContext, use } from 'react';
+const ViewportContext = createContext(null);
+export const ViewportProvider = ViewportContext.Provider;
+export function useViewport() {
+    const viewport = use(ViewportContext);
+    if (!viewport) {
+        throw new Error('useViewport must be used within a ViewportProvider');
+    }
+    return viewport;
+}
+//# sourceMappingURL=ViewportContext.js.map

package/dist/components/viewport/ViewportContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportContext.js","sourceRoot":"","sources":["../../../src/components/viewport/ViewportContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,eAAe,GAAG,aAAa,CAAuB,IAAI,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAe,CAAC,QAAQ,CAAC;AACzD,MAAM,UAAU,WAAW;IACzB,MAAM,QAAQ,GAAG,GAAG,CAAC,eAAe,CAAC,CAAC;IACtC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IACxE,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC"}