@pretty-chitty/core 1.1.1

package/dist/components/Panel/MultiPanel.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Stack } from "@mui/material";
+import { useGameTheme } from "../../hooks/useGameTheme";
+import { useAnimationSpeedMultiplier, useTimeController, useTimeState } from "../../hooks/useTimeController";
+import { usePanelStates } from "../../hooks/usePanelStates";
+import { RootChitRenderInstance } from "../../rendering/RootChitRenderInstance";
+import { useEventChannelState } from "../../hooks/useEventChannelState";
+import { panelTransition } from "./util";
+import { PanelTabStack, TAB_HEIGHT } from "./PanelTabStack";
+import { usePanelPositioning } from "../../hooks/usePanelPositioning";
+import { useSmartDebouncedState } from "../../hooks/useSmartDebouncedState";
+import { ViewerZoomControls } from "./ViewerZoomControls";
+const ANIMATION_DURATION = 0.125;
+const PANEL_ADJUST_IGNORE_DURATION = 5000;
+export function MultiPanel({ chits, x, y, w, h, isFocusedPanel = false, focusedPanel, setFocusedPanel, enabled, }) {
+    const theme = useGameTheme();
+    const refContainer = useRef(null);
+    const timeState = useTimeState();
+    const { registerPosition } = usePanelPositioning();
+    const timeController = useTimeController();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_targetClock, setTargetClock] = useEventChannelState(timeState.targetClock);
+    const [maxClock] = useEventChannelState(timeController.maxClock);
+    const [live] = useEventChannelState(timeState.live);
+    const timeMultiplier = useAnimationSpeedMultiplier();
+    const [ignoreChangesBefore, setIgnoreChangesBefore] = useState(0);
+    const [isSliding, setIsSliding] = useState(false);
+    const [isLoading] = useEventChannelState(timeState.isLoading);
+    const [selectedIndex, setSelectedIndex] = useSmartDebouncedState(focusedPanel ? Math.max(0, chits.indexOf(focusedPanel)) : 0, {
+        interval: 250,
+    });
+    // Create a stable string of chit IDs for dependency tracking
+    const chitIdsString = chits.map((c) => c.id).join("-");
+    const chitsLength = chits.length;
+    const rootRenders = chits.map((c) => c.renderInstance instanceof RootChitRenderInstance ? c.renderInstance : undefined);
+    const panelStates = usePanelStates(rootRenders);
+    const manuallyChangeSelectedIndex = useCallback((index) => {
+        if (index !== selectedIndex) {
+            setSelectedIndex(index);
+            if (live) {
+                setTargetClock(maxClock.clock);
+            }
+            if (!prompt) {
+                setIgnoreChangesBefore(Date.now() + PANEL_ADJUST_IGNORE_DURATION);
+            }
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [prompt, selectedIndex, setSelectedIndex, live, maxClock, setTargetClock, chitIdsString]);
+    useEffect(() => {
+        if (ignoreChangesBefore) {
+            const to = setTimeout(() => setIgnoreChangesBefore(0), ignoreChangesBefore - Date.now());
+            return () => clearTimeout(to);
+        }
+    }, [ignoreChangesBefore]);
+    useEffect(() => {
+        if (isFocusedPanel) {
+            const focusedPanelIndex = chits.findIndex((c) => c === focusedPanel);
+            if (focusedPanelIndex >= 0) {
+                manuallyChangeSelectedIndex(focusedPanelIndex);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFocusedPanel, enabled]);
+    const effectiveSelectedIndex = selectedIndex >= chitsLength ? 0 : selectedIndex;
+    useEffect(() => {
+        if (isFocusedPanel && enabled) {
+            setFocusedPanel(chits[effectiveSelectedIndex]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFocusedPanel, enabled, effectiveSelectedIndex, chitIdsString, setFocusedPanel]);
+    const leavingIndex = panelStates.findIndex((p) => p.state === "leaving");
+    const enteringIndex = panelStates.findIndex((p) => p.state === "entering");
+    const pendingIndex = panelStates.findIndex((p) => p.state === "pending");
+    const ignoringChanges = ignoreChangesBefore > Date.now();
+    if (!isLoading && !ignoringChanges) {
+        if (leavingIndex >= 0) {
+            if (panelStates[effectiveSelectedIndex].state !== "leaving") {
+                // if our current panel is entering... obviously stay there
+                setSelectedIndex(leavingIndex);
+            }
+        }
+        else if (enteringIndex >= 0) {
+            if (panelStates[effectiveSelectedIndex].state !== "entering") {
+                // if our current panel is entering... obviously stay there
+                setSelectedIndex(enteringIndex);
+            }
+        }
+        else if (pendingIndex >= 0) {
+            if (panelStates[effectiveSelectedIndex].state !== "pending") {
+                // if our current panel is pending... obviously stay there
+                setSelectedIndex(pendingIndex);
+            }
+        }
+    }
+    if (ignoringChanges) {
+        rootRenders.forEach((chit) => chit && chit.resetMarks());
+    }
+    useEffect(() => {
+        setIsSliding(true);
+        const to = setTimeout(() => {
+            setIsSliding(false);
+        }, ANIMATION_DURATION * 1000 * timeMultiplier);
+        return () => clearTimeout(to);
+    }, [selectedIndex, timeState, timeMultiplier]);
+    const key = `panel--${chitIdsString}`;
+    const isAnimating = ignoringChanges ? false : Math.max(leavingIndex, enteringIndex, pendingIndex) >= 0;
+    useEffect(() => {
+        timeState.setAnimationState(key, isAnimating);
+        if (isAnimating) {
+            return () => timeState.setAnimationState(key, false);
+        }
+    }, [timeMultiplier, key, isAnimating, timeState]);
+    const panCallback = useCallback((direction) => {
+        if (direction === "left") {
+            manuallyChangeSelectedIndex((chitsLength + selectedIndex - 1) % chitsLength);
+        }
+        else {
+            manuallyChangeSelectedIndex((chitsLength + selectedIndex + 1) % chitsLength);
+        }
+    }, [selectedIndex, chitsLength, manuallyChangeSelectedIndex]);
+    // Register positions for all chits in this MultiPanel
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        chits.forEach((chit, index) => {
+            const transition = isLoading ? null : panelTransition(theme, timeMultiplier);
+            const chitId = chit.id ?? "";
+            const isPaused = focusedPanel && focusedPanel !== chit
+                ? true
+                : isLoading || ignoringChanges
+                    ? false
+                    : isSliding
+                        ? true
+                        : effectiveSelectedIndex !== index;
+            registerPosition(chitId, {
+                chitId,
+                x: x + theme.spacing / 4,
+                y: y + theme.spacing / 4,
+                w: w - theme.spacing / 2,
+                h: h - TAB_HEIGHT - theme.spacing / 2,
+                paused: isPaused,
+                refContainer,
+                panCallback,
+                visible: true,
+                front: index === effectiveSelectedIndex,
+                transition,
+            });
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        chitIdsString,
+        effectiveSelectedIndex,
+        w,
+        h,
+        x,
+        y,
+        enabled,
+        isLoading,
+        ignoringChanges,
+        isSliding,
+        focusedPanel,
+        registerPosition,
+        theme.spacing,
+        refContainer,
+        panCallback,
+        timeMultiplier,
+    ]);
+    const focusedRoot = focusedPanel?.renderInstance;
+    return (_jsxs(Stack, { sx: {
+            width: `${w}px`,
+            height: `${h}px`,
+            left: `${x}px`,
+            top: `${y}px`,
+            position: "absolute",
+            zIndex: enabled ? "auto" : -1,
+            p: `${theme.spacing / 4}px`,
+            transition: panelTransition(theme, timeMultiplier),
+        }, children: [_jsx(Box, { ref: refContainer, sx: { width: "100%", flex: 1, position: "relative" }, children: isFocusedPanel && (_jsx(ViewerZoomControls, { onZoomOut: () => {
+                        setFocusedPanel(undefined);
+                        focusedRoot?.handleZoom(0, 0, -20, false);
+                        setTimeout(() => {
+                            focusedRoot?.handleZoom(0, 0, 0, false);
+                        }, 100);
+                    }, onZoomIn: () => {
+                        focusedRoot?.handleZoom(w / 2, h / 2, 20, true);
+                    }, onZoomChange: (delta, totalDelta) => {
+                        focusedRoot?.handleZoom(w / 2, h / 2, delta, false);
+                        if (totalDelta < -2 && focusedRoot?.cameraWrapper.zoom <= 1) {
+                            setFocusedPanel(undefined);
+                        }
+                    } })) }), enabled && (_jsx(PanelTabStack, { chits: chits, selectedIndex: effectiveSelectedIndex, onSelectedIndexChange: manuallyChangeSelectedIndex }))] }));
+}
+//# sourceMappingURL=MultiPanel.js.map

package/dist/components/Panel/MultiPanel.js.map

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

package/dist/components/Panel/PanelContents.d.ts

@@ -0,0 +1,27 @@
+import { RootChit } from "../../game/RootChit";
+export interface ViewerGestureHandlers {
+    onSingleTap?: (x: number, y: number, isMouse: boolean) => void;
+    onDoubleTap?: (x: number, y: number) => void;
+    onLongTap?: (x: number, y: number, isMouse: boolean) => void;
+    onPanStart?: () => void;
+    onPan?: (dx: number, dy: number, ev: HammerInput) => void;
+    onPinchStart?: () => void;
+    onPinch?: (scale: number, deltaScale: number, centerX: number, centerY: number) => void;
+    onPinchEnd?: () => void;
+}
+export interface ViewerRegistration {
+    id: string;
+    getBounds: () => DOMRect | null;
+    handlers: ViewerGestureHandlers;
+}
+interface GestureContextValue {
+    registerViewer: (registration: ViewerRegistration) => () => void;
+}
+export declare function useGestureContext(): GestureContextValue | null;
+export declare function PanelContents({ rootChit, scaleWidth, scaleHeight, }: {
+    rootChit: RootChit<any>;
+    scaleWidth: number;
+    scaleHeight: number;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PanelContents.d.ts.map

package/dist/components/Panel/PanelContents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelContents.d.ts","sourceRoot":"","sources":["../../../src/library/components/Panel/PanelContents.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAW/C,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IAChC,QAAQ,EAAE,qBAAqB,CAAC;CACjC;AAED,UAAU,mBAAmB;IAC3B,cAAc,EAAE,CAAC,YAAY,EAAE,kBAAkB,KAAK,MAAM,IAAI,CAAC;CAClE;AAID,wBAAgB,iBAAiB,+BAEhC;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB,2CAoTA"}

package/dist/components/Panel/PanelContents.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback, createContext, useContext } from "react";
+import { Box } from "@mui/material";
+import useSize from "@react-hook/size";
+import { useGameTheme } from "../../hooks/useGameTheme";
+import { usePanelScale } from "../../hooks/usePanelScale";
+import { usePlayerId } from "../../hooks/usePlayer";
+import { SinglePanel } from "./SinglePanel";
+import { MultiPanel } from "./MultiPanel";
+import Hammer from "@egjs/hammerjs";
+import { PanelPositioningContext } from "../../hooks/usePanelPositioning";
+import { ViewerWrapper } from "./ViewerWrapper";
+const GestureContext = createContext(null);
+export function useGestureContext() {
+    return useContext(GestureContext);
+}
+export function PanelContents({ rootChit, scaleWidth, scaleHeight, }) {
+    const theme = useGameTheme();
+    const ref = useRef(null);
+    const [width, height] = useSize(ref);
+    const [focusedPanel, setFocusedPanel] = useState();
+    const scale = usePanelScale();
+    const playerId = usePlayerId();
+    const layout = rootChit.getFlatLayout(width, height, (scaleWidth / width) * scale, (scaleHeight / height) * scale, playerId);
+    const hasRootChitInLayout = layout.find((item) => item.chit === rootChit) !== undefined;
+    // Viewer registration system
+    const viewerRegistrationsRef = useRef(new Map());
+    const registerViewer = useCallback((registration) => {
+        viewerRegistrationsRef.current.set(registration.id, registration);
+        return () => {
+            viewerRegistrationsRef.current.delete(registration.id);
+        };
+    }, []);
+    // Panel positioning system
+    const positionsRef = useRef(new Map([
+        [
+            "root",
+            { chitId: "root", x: -40, y: 0, w: 30, h: 30, front: true, visible: true, paused: true, refContainer: null },
+        ],
+    ]));
+    const [, forceUpdate] = useState({});
+    const registerPosition = useCallback((chitId, position) => {
+        positionsRef.current.set(chitId, position);
+        forceUpdate({});
+    }, []);
+    const unregisterPosition = useCallback((chitId) => {
+        positionsRef.current.delete(chitId);
+        forceUpdate({});
+    }, []);
+    // Find which viewer contains a point
+    const findViewerAtPoint = useCallback((x, y) => {
+        for (const registration of viewerRegistrationsRef.current.values()) {
+            const bounds = registration.getBounds();
+            if (bounds && x >= bounds.left && x <= bounds.right && y >= bounds.top && y <= bounds.bottom) {
+                return registration;
+            }
+        }
+        return null;
+    }, []);
+    // Setup single HammerJS instance
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) {
+            return;
+        }
+        const hammer = new Hammer.Manager(el);
+        hammer.add(new Hammer.Tap({ event: "doubletap", taps: 2, interval: 300, threshold: 5, posThreshold: 50 }));
+        hammer.add(new Hammer.Tap({ event: "singletap", time: 400 }));
+        hammer.add(new Hammer.Pinch({ event: "pinch", threshold: 0.03 }));
+        hammer.add(new Hammer.Pan({ event: "pan", direction: Hammer.DIRECTION_ALL }));
+        hammer.add(new Hammer.Press({ event: "longtap", time: 600 }));
+        hammer.get("singletap").requireFailure("doubletap");
+        hammer.get("longtap").recognizeWith("singletap");
+        hammer.get("singletap").requireFailure("longtap");
+        let activeViewer = null;
+        let lastDeltaX = 0;
+        let lastDeltaY = 0;
+        let lastScale = 1;
+        let panCancelled = false;
+        let pinchCancelled = false;
+        // Tap handlers
+        hammer.on("longtap", (ev) => {
+            const viewer = findViewerAtPoint(ev.center.x, ev.center.y);
+            if (viewer?.handlers.onLongTap) {
+                const bounds = viewer.getBounds();
+                if (bounds) {
+                    const x = ev.center.x - bounds.left;
+                    const y = ev.center.y - bounds.top;
+                    const isMouse = ev.pointerType === "mouse";
+                    viewer.handlers.onLongTap(x, y, isMouse);
+                }
+            }
+        });
+        hammer.on("singletap", (ev) => {
+            const viewer = findViewerAtPoint(ev.center.x, ev.center.y);
+            if (viewer?.handlers.onSingleTap) {
+                const bounds = viewer.getBounds();
+                if (bounds) {
+                    const x = ev.center.x - bounds.left;
+                    const y = ev.center.y - bounds.top;
+                    const isMouse = ev.pointerType === "mouse";
+                    viewer.handlers.onSingleTap(x, y, isMouse);
+                }
+            }
+        });
+        hammer.on("doubletap", (ev) => {
+            const viewer = findViewerAtPoint(ev.center.x, ev.center.y);
+            if (viewer?.handlers.onDoubleTap) {
+                const bounds = viewer.getBounds();
+                if (bounds) {
+                    const x = ev.center.x - bounds.left;
+                    const y = ev.center.y - bounds.top;
+                    viewer.handlers.onDoubleTap(x, y);
+                }
+            }
+        });
+        // Pan handlers
+        hammer.on("panstart", (ev) => {
+            activeViewer = findViewerAtPoint(ev.center.x, ev.center.y);
+            lastDeltaX = 0;
+            lastDeltaY = 0;
+            panCancelled = false;
+            activeViewer?.handlers.onPanStart?.();
+        });
+        hammer.on("pan", (ev) => {
+            if (!activeViewer || panCancelled) {
+                return;
+            }
+            const dx = ev.deltaX - lastDeltaX;
+            const dy = ev.deltaY - lastDeltaY;
+            lastDeltaX = ev.deltaX;
+            lastDeltaY = ev.deltaY;
+            activeViewer.handlers.onPan?.(dx, dy, ev);
+        });
+        hammer.on("panend", () => {
+            activeViewer = null;
+        });
+        // Pinch handlers
+        hammer.on("pinchstart", (ev) => {
+            activeViewer = findViewerAtPoint(ev.center.x, ev.center.y);
+            lastScale = 1;
+            pinchCancelled = false;
+            activeViewer?.handlers.onPinchStart?.();
+        });
+        hammer.on("pinch", (ev) => {
+            if (!activeViewer || pinchCancelled) {
+                return;
+            }
+            const bounds = activeViewer.getBounds();
+            if (bounds) {
+                const centerX = ev.center.x - bounds.left;
+                const centerY = ev.center.y - bounds.top;
+                const deltaScale = ev.scale - lastScale;
+                lastScale = ev.scale;
+                activeViewer.handlers.onPinch?.(ev.scale, deltaScale, centerX, centerY);
+            }
+        });
+        hammer.on("pinchend", () => {
+            activeViewer?.handlers.onPinchEnd?.();
+            activeViewer = null;
+            pinchCancelled = true;
+        });
+        return () => {
+            hammer.destroy();
+        };
+    }, [findViewerAtPoint]);
+    const gestureContextValue = { registerViewer };
+    const positioningContextValue = {
+        positions: positionsRef.current,
+        registerPosition,
+        unregisterPosition,
+    };
+    const fullChitList = layout.flatMap((cell) => (Array.isArray(cell.chit) ? cell.chit : [cell.chit]));
+    const tabChitList = fullChitList.concat();
+    if (!hasRootChitInLayout) {
+        fullChitList.push(rootChit);
+    }
+    return (_jsx(GestureContext.Provider, { value: gestureContextValue, children: _jsx(PanelPositioningContext.Provider, { value: positioningContextValue, children: _jsx(Box, { sx: {
+                    position: "relative",
+                    flex: 1,
+                    p: `${theme.spacing * 0.75}px`,
+                }, children: _jsxs(Box, { ref: ref, sx: {
+                        position: "relative",
+                        width: "100%",
+                        height: "100%",
+                    }, children: [layout.map((cell) => {
+                            if (Array.isArray(cell.chit)) {
+                                return (_jsx(MultiPanel, { enabled: focusedPanel === undefined, focusedPanel: focusedPanel, setFocusedPanel: setFocusedPanel, chits: cell.chit, w: cell.w, h: cell.h, x: cell.x, y: cell.y, isFocusedPanel: false }, "m" + cell.id));
+                            }
+                            else {
+                                return (_jsx(SinglePanel, { enabled: focusedPanel === undefined, focusedPanel: focusedPanel, setFocusedPanel: setFocusedPanel, chit: cell.chit, w: cell.w, h: cell.h, x: cell.x, y: cell.y }, cell.id));
+                            }
+                        }), !hasRootChitInLayout && (_jsx(SinglePanel, { focusedPanel: focusedPanel, setFocusedPanel: setFocusedPanel, paused: true, chit: rootChit, x: -5 - theme.spacing * 3, y: 0, w: theme.spacing * 3, h: theme.spacing * 3, enabled: true })), focusedPanel && (_jsx(MultiPanel, { isFocusedPanel: true, enabled: focusedPanel !== undefined, focusedPanel: focusedPanel, setFocusedPanel: setFocusedPanel, chits: tabChitList, x: 0, y: 0, w: width, h: height })), fullChitList.map((chit) => {
+                            const chitId = chit.id ?? "";
+                            const position = positionsRef.current.get(chitId);
+                            if (!position || !position.visible) {
+                                return null;
+                            }
+                            return (_jsx(ViewerWrapper, { focusedPanel: focusedPanel, setFocusedPanel: setFocusedPanel, front: position.front, chit: chit, w: position.w, h: position.h, x: position.x, y: position.y, paused: position.paused, refContainer: position.refContainer, panCallback: position.panCallback, transition: position.transition }, chitId));
+                        })] }) }) }) }));
+}
+//# sourceMappingURL=PanelContents.js.map

package/dist/components/Panel/PanelContents.js.map

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

package/dist/components/Panel/PanelTabStack.d.ts

@@ -0,0 +1,9 @@
+import { Chit } from "../../game/Chit";
+declare const TAB_HEIGHT = 20;
+export declare function PanelTabStack({ chits, selectedIndex, onSelectedIndexChange, }: {
+    chits: Chit[];
+    selectedIndex: number;
+    onSelectedIndexChange: (index: number) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export { TAB_HEIGHT };
+//# sourceMappingURL=PanelTabStack.d.ts.map

package/dist/components/Panel/PanelTabStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTabStack.d.ts","sourceRoot":"","sources":["../../../src/library/components/Panel/PanelTabStack.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AASvC,QAAA,MAAM,UAAU,KAAK,CAAC;AAiDtB,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAa,EACb,qBAAqB,GACtB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,2CA+BA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Panel/PanelTabStack.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack } from "@mui/material";
+import Color from "color";
+import { useGameTheme } from "../../hooks/useGameTheme";
+import { useAnimationSpeedMultiplier } from "../../hooks/useTimeController";
+import { UpdatingCanvasImage } from "../UpdatingCanvasImage";
+import { ZINDEX_PANEL_CUTOUTS } from "../../utilities/zIndex";
+import { IconCanvas } from "../../utilities/CanvasStack/IconCanvas";
+const TAB_HEIGHT = 20;
+const ANIMATION_DURATION = 0.125;
+const TAB_WIDTH = TAB_HEIGHT * 2;
+function PanelTab({ chit, onClick, selected }) {
+    // eslint-disable-next-line prefer-const
+    let { color, icon } = chit.panelTab ?? {};
+    if (!color) {
+        color = "#ffffff";
+    }
+    const lightness = Color(color).lightness();
+    const outlineColor = Color(color)
+        .lightness(lightness < 35 ? lightness + 10 : 20)
+        .hex();
+    const image = icon
+        ? icon?.canvas
+            ? icon
+            : new IconCanvas(icon).get()
+        : undefined;
+    return (_jsx(Box, { onMouseDown: onClick, sx: { pt: 1, pb: 1, mt: -1, mb: -1, position: "relative", zIndex: ZINDEX_PANEL_CUTOUTS }, children: _jsx(Box, { sx: {
+                opacity: selected ? 1 : 0.75,
+                transition: "opacity linear 0.25s",
+                background: color,
+                border: `2px solid ${outlineColor}`,
+                borderTop: "none",
+                overflow: "hidden",
+                cursor: "pointer",
+                height: TAB_HEIGHT,
+                textAlign: "center",
+                width: TAB_WIDTH,
+                borderBottomLeftRadius: TAB_HEIGHT / 4,
+                borderBottomRightRadius: TAB_HEIGHT / 4,
+            }, children: image && _jsx(UpdatingCanvasImage, { image: image, style: { height: TAB_HEIGHT - 2, width: TAB_HEIGHT - 2 } }) }) }));
+}
+export function PanelTabStack({ chits, selectedIndex, onSelectedIndexChange, }) {
+    const theme = useGameTheme();
+    const timeMultiplier = useAnimationSpeedMultiplier();
+    return (_jsxs(Stack, { direction: "row", sx: { height: TAB_HEIGHT }, children: [_jsx(Box, { flex: 1 }), _jsxs(Stack, { direction: "row", sx: { position: "relative", width: TAB_WIDTH * chits.length }, children: [chits.map((chit, index) => (_jsx(PanelTab, { chit: chit, onClick: () => onSelectedIndexChange(index), selected: index === selectedIndex }, chit.id))), _jsx(Box, { sx: {
+                            height: "2px",
+                            width: TAB_WIDTH * 0.75,
+                            transition: `left ease-in-out ${ANIMATION_DURATION * timeMultiplier}s`,
+                            background: theme.panelSelectionCutoutSelected,
+                            position: "absolute",
+                            bottom: -2,
+                            left: selectedIndex * TAB_WIDTH + TAB_WIDTH * 0.125,
+                        } })] }), _jsx(Box, { flex: 1 })] }));
+}
+export { TAB_HEIGHT };
+//# sourceMappingURL=PanelTabStack.js.map

package/dist/components/Panel/PanelTabStack.js.map

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

package/dist/components/Panel/SinglePanel.d.ts

@@ -0,0 +1,13 @@
+import { Chit } from "../../game/Chit";
+export declare function SinglePanel({ chit, x, y, w, h, enabled, paused, focusedPanel, setFocusedPanel: _setFocusedPanel, }: {
+    chit: Chit;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    enabled: boolean;
+    paused?: boolean;
+    focusedPanel?: Chit | undefined;
+    setFocusedPanel: (chit: Chit | undefined) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SinglePanel.d.ts.map

package/dist/components/Panel/SinglePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SinglePanel.d.ts","sourceRoot":"","sources":["../../../src/library/components/Panel/SinglePanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAOvC,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,CAAC,EACD,CAAC,EACD,CAAC,EACD,CAAC,EACD,OAAO,EACP,MAAc,EACd,YAAY,EACZ,eAAe,EAAE,gBAAgB,GAClC,EAAE;IACD,IAAI,EAAE,IAAI,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IAChC,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;CACnD,2CA6CA"}

package/dist/components/Panel/SinglePanel.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Box } from "@mui/material";
+import { useGameTheme } from "../../hooks/useGameTheme";
+import { panelTransition } from "./util";
+import { useAnimationSpeedMultiplier } from "../../hooks/useTimeController";
+import { usePanelPositioning } from "../../hooks/usePanelPositioning";
+export function SinglePanel({ chit, x, y, w, h, enabled, paused = false, focusedPanel, setFocusedPanel: _setFocusedPanel, }) {
+    const theme = useGameTheme();
+    const animationSpeedMultiplier = useAnimationSpeedMultiplier();
+    const { registerPosition } = usePanelPositioning();
+    const effectivePaused = !enabled ? true : paused;
+    // Register position for ViewerWrapper (only when NOT in full-screen focus mode)
+    useEffect(() => {
+        // If focusedPanel is set, don't register - the full-screen MultiPanel in PanelContents handles it
+        if (!enabled) {
+            return;
+        }
+        const chitId = chit.id ?? "";
+        registerPosition(chitId, {
+            chitId,
+            x: x + theme.spacing / 4,
+            y: y + theme.spacing / 4,
+            w: w - theme.spacing / 2,
+            h: h - theme.spacing / 2,
+            paused: effectivePaused,
+            refContainer: null,
+            front: true,
+            visible: true,
+        });
+    }, [chit, x, y, w, h, effectivePaused, enabled, focusedPanel, registerPosition, theme.spacing]);
+    return (_jsx(Box, { sx: {
+            overflow: "hidden",
+            width: `${w}px`,
+            height: `${h}px`,
+            left: `${x}px`,
+            top: `${y}px`,
+            position: "absolute",
+            p: `${theme.spacing / 4}px`,
+            transition: panelTransition(theme, animationSpeedMultiplier),
+            zIndex: enabled ? "auto" : -1,
+        }, children: _jsx(Box, { sx: { width: "100%", height: "100%", position: "relative", borderRadius: "10px", overflow: "hidden" } }) }));
+}
+//# sourceMappingURL=SinglePanel.js.map

package/dist/components/Panel/SinglePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SinglePanel.js","sourceRoot":"","sources":["../../../src/library/components/Panel/SinglePanel.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAE5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAEtE,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,CAAC,EACD,CAAC,EACD,CAAC,EACD,CAAC,EACD,OAAO,EACP,MAAM,GAAG,KAAK,EACd,YAAY,EACZ,eAAe,EAAE,gBAAgB,GAWlC;IACC,MAAM,KAAK,GAAG,YAAY,EAAE,CAAC;IAC7B,MAAM,wBAAwB,GAAG,2BAA2B,EAAE,CAAC;IAC/D,MAAM,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEnD,MAAM,eAAe,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAEjD,gFAAgF;IAChF,SAAS,CAAC,GAAG,EAAE;QACb,kGAAkG;QAClG,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;QAC7B,gBAAgB,CAAC,MAAM,EAAE;YACvB,MAAM;YACN,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,CAAC;YACxB,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,CAAC;YACxB,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,CAAC;YACxB,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,CAAC;YACxB,MAAM,EAAE,eAAe;YACvB,YAAY,EAAE,IAAI;YAClB,KAAK,EAAE,IAAI;YACX,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,eAAe,EAAE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEhG,OAAO,CACL,KAAC,GAAG,IACF,EAAE,EAAE;YACF,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,GAAG,CAAC,IAAI;YACf,MAAM,EAAE,GAAG,CAAC,IAAI;YAChB,IAAI,EAAE,GAAG,CAAC,IAAI;YACd,GAAG,EAAE,GAAG,CAAC,IAAI;YACb,QAAQ,EAAE,UAAU;YACpB,CAAC,EAAE,GAAG,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI;YAC3B,UAAU,EAAE,eAAe,CAAC,KAAK,EAAE,wBAAwB,CAAC;YAC5D,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;SAC9B,YAED,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAI,GAC1G,CACP,CAAC;AACJ,CAAC"}

package/dist/components/Panel/ViewerWrapper.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Chit } from "../../game/Chit";
+export declare function ViewerWrapper({ chit, w, h, x, y, paused, front, panCallback, refContainer, focusedPanel, setFocusedPanel, transition, }: {
+    chit: Chit;
+    w: number;
+    h: number;
+    x?: number;
+    y?: number;
+    paused: boolean;
+    front: boolean;
+    panCallback?: (direction: "left" | "right") => void;
+    refContainer: React.RefObject<HTMLElement> | null;
+    focusedPanel?: Chit | undefined;
+    setFocusedPanel: (chit: Chit | undefined) => void;
+    transition?: string | null;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ViewerWrapper.d.ts.map

package/dist/components/Panel/ViewerWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewerWrapper.d.ts","sourceRoot":"","sources":["../../../src/library/components/Panel/ViewerWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AASvC,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,CAAC,EACD,CAAC,EACD,CAAC,EACD,CAAC,EACD,MAAM,EACN,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,UAAU,GACX,EAAE;IACD,IAAI,EAAE,IAAI,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IAChC,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,2CA6FA"}