@heymantle/litho 0.0.10 → 0.0.13

package/dist/esm/utilities/useMobile.js

@@ -0,0 +1,79 @@
+"use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useState, useEffect, useCallback } from "react";
+import { useDebouncedCallback } from "use-debounce";
+/**
+ * Custom hook for detecting mobile viewport
+ * @param {number} breakpoint - The breakpoint width in pixels (default: 768)
+ * @param {number} debounceMs - Debounce delay for resize events in milliseconds (default: 150)
+ * @returns {boolean} - True if viewport width is below the breakpoint
+ */ export function useMobile() {
+    var breakpoint = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 768, debounceMs = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 150;
+    var _useState = _sliced_to_array(useState(function() {
+        if (typeof window === 'undefined') return false;
+        return window.innerWidth < breakpoint;
+    }), 2), isMobile = _useState[0], setIsMobile = _useState[1];
+    // Debounced resize handler
+    var handleResize = useDebouncedCallback(function() {
+        if (typeof window === 'undefined') return;
+        var mobile = window.innerWidth < breakpoint;
+        setIsMobile(mobile);
+    }, debounceMs);
+    useEffect(function() {
+        if (typeof window === 'undefined') return;
+        window.addEventListener('resize', handleResize);
+        return function() {
+            window.removeEventListener('resize', handleResize);
+            handleResize.cancel();
+        };
+    }, [
+        handleResize
+    ]);
+    return isMobile;
+}
+export default useMobile;

package/dist/esm/utilities/usePaneState.js

@@ -0,0 +1,334 @@
+"use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useEffect, useRef, useMemo, useCallback } from "react";
+import { useLocalStorage } from "./useLocalStorage.js";
+var PANE_STATE_STORAGE_KEY = 'litho-pane-state';
+var DEFAULT_ORG_STATE = {
+    activeTabId: null,
+    width: 400,
+    collapsed: false,
+    open: false,
+    tabs: []
+};
+// Module-level refs to track recent values across all hook instances
+// This ensures we can track values even when multiple components use the hook
+// Used to handle race conditions where updates are called in the same render cycle
+var recentValuesRef = {}; // { [orgId]: { [key]: value } }
+// Stable empty object reference to prevent unnecessary recalculations
+var EMPTY_OBJECT = {};
+// Helper to merge state with defaults (for reading)
+// Preserves original array references when possible to prevent unnecessary re-renders
+var mergeWithDefaults = function(state) {
+    if (!state || (typeof state === "undefined" ? "undefined" : _type_of(state)) !== 'object') {
+        return _object_spread({}, DEFAULT_ORG_STATE);
+    }
+    return _object_spread_props(_object_spread({}, DEFAULT_ORG_STATE, state), {
+        // Preserve original tabs array reference if it exists and is valid, otherwise use default
+        tabs: Array.isArray(state.tabs) ? state.tabs : DEFAULT_ORG_STATE.tabs
+    });
+};
+/**
+ * Hook to manage consolidated pane state in localStorage, scoped by orgId
+ * @param {string} [orgId] - Organization ID to scope the pane state (optional, but required for state operations)
+ * @returns {Object} { state, setState, setWidth, setCollapsed, setOpen, setTabs, setActiveTabId, refreshFromStorage }
+ */ export var usePaneState = function(orgId) {
+    var currentOrgIdRef = useRef(orgId);
+    // Ref to track current React state so we can access it in setState callbacks
+    var currentStateRef = useRef(null);
+    // Update ref when orgId changes
+    useEffect(function() {
+        currentOrgIdRef.current = orgId;
+    }, [
+        orgId
+    ]);
+    // Only initialize localStorage if there's existing data, otherwise use null
+    // This prevents saving empty objects on page load
+    var _useLocalStorage = _sliced_to_array(useLocalStorage(PANE_STATE_STORAGE_KEY, null, {
+        serialize: true
+    }), 2), allOrgsState = _useLocalStorage[0], setAllOrgsState = _useLocalStorage[1];
+    // Normalize null to empty object for internal use (memoize to prevent unnecessary recalculations)
+    // Use stable EMPTY_OBJECT reference when allOrgsState is null
+    var normalizedState = useMemo(function() {
+        return allOrgsState || EMPTY_OBJECT;
+    }, [
+        allOrgsState
+    ]);
+    // Keep ref in sync with current React state
+    useEffect(function() {
+        currentStateRef.current = normalizedState;
+    }, [
+        normalizedState
+    ]);
+    // Get current org's state (merge with defaults for reading)
+    var orgState = useMemo(function() {
+        if (!orgId) {
+            return _object_spread({}, DEFAULT_ORG_STATE);
+        }
+        var state = normalizedState === null || normalizedState === void 0 ? void 0 : normalizedState[orgId];
+        return mergeWithDefaults(state);
+    }, [
+        normalizedState,
+        orgId
+    ]);
+    // Function to manually refresh state from localStorage
+    // Called on page load (via useState initializer) and when pane opens
+    var refreshFromStorage = useCallback(function() {
+        if (typeof window === 'undefined') return;
+        try {
+            var item = window.localStorage.getItem(PANE_STATE_STORAGE_KEY);
+            if (item !== null) {
+                var parsed = JSON.parse(item);
+                setAllOrgsState(parsed);
+            }
+        } catch (error) {
+            console.warn('Error refreshing pane state from localStorage:', error);
+        }
+    }, [
+        setAllOrgsState
+    ]);
+    // Helper to ensure recentValuesRef exists for an orgId
+    var ensureRecentValuesRef = useCallback(function(orgId) {
+        if (!recentValuesRef[orgId]) {
+            recentValuesRef[orgId] = {};
+        }
+    }, []);
+    // Helper to create first-time state
+    var createFirstTimeState = useCallback(function(currentState, orgId, key, newValue) {
+        // Don't create state when setting 'open' to false on first time (pane was never opened)
+        if (key === 'open' && newValue === false) {
+            return currentState;
+        }
+        // Save the full default state on first open
+        return _object_spread_props(_object_spread({}, currentState), _define_property({}, orgId, _object_spread_props(_object_spread({}, DEFAULT_ORG_STATE), _define_property({}, key, newValue))));
+    }, []);
+    // Helper to apply recent values from snapshot to new state
+    var applyRecentValues = useCallback(function(newOrgState, snapshot, key) {
+        Object.keys(snapshot).forEach(function(recentKey) {
+            if (recentKey !== key) {
+                newOrgState[recentKey] = snapshot[recentKey];
+            }
+        });
+    }, []);
+    // Helper to cleanup snapshot values after update cycle
+    var cleanupSnapshotValues = useCallback(function(orgId, snapshot, snapshotKeys) {
+        if (typeof window === 'undefined' || snapshotKeys.length === 0) return;
+        requestAnimationFrame(function() {
+            var currentRecentValues = recentValuesRef[orgId];
+            if (!currentRecentValues) return;
+            // Clear only the keys that were in our snapshot and haven't changed
+            snapshotKeys.forEach(function(snapshotKey) {
+                if (currentRecentValues[snapshotKey] === snapshot[snapshotKey]) {
+                    delete currentRecentValues[snapshotKey];
+                }
+            });
+        });
+    }, []);
+    // Generic helper function to update state for a given key
+    // Uses currentOrgIdRef internally to always get the latest orgId value
+    // Falls back to orgId prop if ref hasn't been updated yet
+    var updateStateForKey = useCallback(function(key, value, setState) {
+        var currentOrgId = currentOrgIdRef.current || orgId;
+        if (!currentOrgId) {
+            console.warn("Cannot set ".concat(key, ": orgId is required"));
+            return;
+        }
+        ensureRecentValuesRef(currentOrgId);
+        // Capture a snapshot of recent values BEFORE entering setState callback
+        // This ensures we have the latest values even if React batches updates
+        var recentValuesSnapshot = _object_spread({}, recentValuesRef[currentOrgId]);
+        var snapshotKeys = Object.keys(recentValuesSnapshot);
+        setState(function(prev) {
+            var currentState = prev || {};
+            var currentOrgState = currentState[currentOrgId] || {};
+            var prevValue = currentOrgState[key];
+            var newValue = typeof value === 'function' ? value(prevValue) : value;
+            // Track the most recent value for this key (to handle race conditions)
+            recentValuesRef[currentOrgId][key] = newValue;
+            // Handle first-time state creation
+            var isFirstTime = !currentState[currentOrgId];
+            if (isFirstTime) {
+                return createFirstTimeState(currentState, currentOrgId, key, newValue);
+            }
+            // After first open, preserve existing state and update the specific key
+            var newOrgState = _object_spread_props(_object_spread({}, currentOrgState), _define_property({}, key, newValue));
+            // Apply recent values from snapshot (except the key being updated)
+            if (snapshotKeys.length > 0) {
+                applyRecentValues(newOrgState, recentValuesSnapshot, key);
+            }
+            return _object_spread_props(_object_spread({}, currentState), _define_property({}, currentOrgId, newOrgState));
+        });
+        // Cleanup snapshot values after update cycle completes
+        cleanupSnapshotValues(currentOrgId, recentValuesSnapshot, snapshotKeys);
+    }, [
+        orgId,
+        ensureRecentValuesRef,
+        createFirstTimeState,
+        applyRecentValues,
+        cleanupSnapshotValues
+    ]);
+    // Helper setters for individual properties - memoized with useCallback
+    var setWidth = useCallback(function(value) {
+        updateStateForKey('width', value, setAllOrgsState);
+    }, [
+        updateStateForKey,
+        setAllOrgsState
+    ]);
+    var setCollapsed = useCallback(function(value) {
+        updateStateForKey('collapsed', value, setAllOrgsState);
+    }, [
+        updateStateForKey,
+        setAllOrgsState
+    ]);
+    var setOpen = useCallback(function(value) {
+        updateStateForKey('open', value, setAllOrgsState);
+    }, [
+        updateStateForKey,
+        setAllOrgsState
+    ]);
+    var setTabs = useCallback(function(value) {
+        updateStateForKey('tabs', value, setAllOrgsState);
+    }, [
+        updateStateForKey,
+        setAllOrgsState
+    ]);
+    var setActiveTabId = useCallback(function(value) {
+        updateStateForKey('activeTabId', value, setAllOrgsState);
+    }, [
+        updateStateForKey,
+        setAllOrgsState
+    ]);
+    // Generic setState function for updating entire org state
+    var setState = useCallback(function(newState) {
+        if (!orgId) {
+            console.warn('Cannot set state: orgId is required');
+            return;
+        }
+        setAllOrgsState(function(prev) {
+            var currentState = prev || {};
+            var currentOrgState = currentState[orgId] || {};
+            var isFirstTime = !currentState[orgId];
+            var mergedState = mergeWithDefaults(currentOrgState);
+            var updatedState = typeof newState === 'function' ? newState(mergedState) : _object_spread({}, mergedState, newState);
+            // On first open, save all default values to initialize the state
+            if (isFirstTime) {
+                return _object_spread_props(_object_spread({}, currentState), _define_property({}, orgId, _object_spread({}, DEFAULT_ORG_STATE, updatedState)));
+            }
+            // After first open, just save the updated state
+            return _object_spread_props(_object_spread({}, currentState), _define_property({}, orgId, updatedState));
+        });
+    }, [
+        orgId,
+        setAllOrgsState
+    ]);
+    return {
+        state: orgState,
+        setState: setState,
+        setWidth: setWidth,
+        setCollapsed: setCollapsed,
+        setOpen: setOpen,
+        setTabs: setTabs,
+        setActiveTabId: setActiveTabId,
+        refreshFromStorage: refreshFromStorage
+    };
+};