react-os-shell 4.2.2 → 4.4.0

package/dist/{chunk-SI4XHEMM.js → chunk-EF5W3EXL.js}

@@ -1,5 +1,5 @@
-import { glassStyle, GLASS_DIVIDER, navIcons } from './chunk-6Q4KYGMH.js';
-import { createContext, Component, useContext, useState, useRef, useEffect, useCallback, useSyncExternalStore, useLayoutEffect, isValidElement, cloneElement, Suspense } from 'react';
+import { useShellAuth, glassStyle, GLASS_DIVIDER, navIcons } from './chunk-DKDD5KXG.js';
+import { createContext, Component, useReducer, useRef, useCallback, useState, useEffect, useMemo, useContext, useId, useSyncExternalStore, useLayoutEffect, isValidElement, cloneElement, Suspense } from 'react';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
 import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import { createPortal } from 'react-dom';
@@ -123,6 +123,217 @@ var WindowErrorBoundary = class extends Component {
     return this.props.children;
   }
 };
+
+// src/hooks/undoHistory.ts
+var UNDO_LIMIT = 100;
+var emptyUndoState = { past: [], future: [] };
+function undoReducer(state, action) {
+  switch (action.type) {
+    case "record": {
+      const newest = state.past[state.past.length - 1];
+      if (action.step.coalesceKey !== null && newest?.coalesceKey === action.step.coalesceKey) {
+        return state.future.length === 0 ? state : { ...state, future: [] };
+      }
+      const past = [...state.past, action.step];
+      return {
+        past: past.length > UNDO_LIMIT ? past.slice(past.length - UNDO_LIMIT) : past,
+        future: []
+      };
+    }
+    case "undo": {
+      if (state.past.length === 0) return state;
+      return {
+        past: state.past.slice(0, -1),
+        future: [action.redoStep, ...state.future]
+      };
+    }
+    case "redo": {
+      if (state.future.length === 0) return state;
+      return {
+        past: [...state.past, action.undoStep],
+        future: state.future.slice(1)
+      };
+    }
+    case "clear":
+      return state.past.length === 0 && state.future.length === 0 ? state : emptyUndoState;
+  }
+}
+var TEXT_ENTRY = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT"]);
+function matchUndoHotkey(e) {
+  if (!(e.metaKey || e.ctrlKey) || e.altKey) return null;
+  const key = e.key.toLowerCase();
+  const action = key === "z" ? e.shiftKey ? "redo" : "undo" : key === "y" && e.ctrlKey && !e.metaKey && !e.shiftKey ? "redo" : null;
+  if (!action) return null;
+  const target = e.target;
+  if (target?.isContentEditable) return null;
+  if (target?.tagName && TEXT_ENTRY.has(target.tagName.toUpperCase())) return null;
+  return action;
+}
+var UndoContext = createContext(null);
+var RUNAWAY_LIMIT = 500;
+var RUNAWAY_QUIET_MS = 250;
+function UndoProvider({ children, canEdit = true, perms, windowId }) {
+  const [state, dispatch] = useReducer(undoReducer, emptyUndoState);
+  const slices = useRef(/* @__PURE__ */ new Map());
+  const { hasAnyPerm } = useShellAuth();
+  const enabled = canEdit && (perms && perms.length > 0 ? hasAnyPerm(perms) : true);
+  const pending = useRef(null);
+  const suspended = useRef(false);
+  const snapshot = useCallback(() => {
+    const values = {};
+    for (const [id, slice] of slices.current) values[id] = slice.getLast();
+    return values;
+  }, []);
+  const register = useCallback((id, slice) => {
+    slices.current.set(id, slice);
+  }, []);
+  const unregister = useCallback((id) => {
+    slices.current.delete(id);
+  }, []);
+  const runaway = useRef({ last: 0, count: 0, tripped: false });
+  const record = useCallback((label, coalesceKey) => {
+    if (!enabled || suspended.current || pending.current) return;
+    const r = runaway.current;
+    if (r.tripped) return;
+    const now = Date.now();
+    if (now - r.last > RUNAWAY_QUIET_MS) r.count = 0;
+    r.last = now;
+    if (++r.count > RUNAWAY_LIMIT) {
+      r.tripped = true;
+      console.error(
+        `[react-os-shell] UndoProvider: "${label}" recorded ${RUNAWAY_LIMIT} undo steps with no pause between them, which no user action can do. The value passed to useUndoable for this slice is almost certainly rebuilt on every render (a .map/.filter/object literal in the call) rather than held in state, so it reads as changed every time \u2014 and since recording a step re-renders the form, that is a loop. Undo recording is now off for this form to keep the tab responsive.`
+      );
+      return;
+    }
+    pending.current = { values: snapshot(), label, coalesceKey };
+    queueMicrotask(() => {
+      const step = pending.current;
+      pending.current = null;
+      if (step) dispatch({ type: "record", step });
+    });
+  }, [enabled, snapshot]);
+  const applyValues = useCallback((values) => {
+    for (const [id, value2] of Object.entries(values)) {
+      const slice = slices.current.get(id);
+      if (!slice) continue;
+      slice.setLast(value2);
+      slice.apply(value2);
+    }
+  }, []);
+  const undo = useCallback(() => {
+    const step = state.past[state.past.length - 1];
+    if (!step) return;
+    const redoStep = { values: snapshot(), label: step.label, coalesceKey: null };
+    applyValues(step.values);
+    dispatch({ type: "undo", redoStep });
+  }, [state.past, snapshot, applyValues]);
+  const redo = useCallback(() => {
+    const step = state.future[0];
+    if (!step) return;
+    const undoStep = { values: snapshot(), label: step.label, coalesceKey: null };
+    applyValues(step.values);
+    dispatch({ type: "redo", undoStep });
+  }, [state.future, snapshot, applyValues]);
+  const [baselineToken, setBaselineToken] = useState(0);
+  const baseline = useCallback(() => {
+    suspended.current = true;
+    pending.current = null;
+    setBaselineToken((t) => t + 1);
+    dispatch({ type: "clear" });
+  }, []);
+  useEffect(() => {
+    if (!suspended.current) return;
+    suspended.current = false;
+    pending.current = null;
+    dispatch({ type: "clear" });
+  }, [baselineToken]);
+  const clear = baseline;
+  const canUndo = enabled && state.past.length > 0;
+  const canRedo = enabled && state.future.length > 0;
+  const isActive = useIsActiveWindow(windowId);
+  const keyed = useRef({ undo, redo, canUndo, canRedo });
+  keyed.current = { undo, redo, canUndo, canRedo };
+  useEffect(() => {
+    if (!isActive || !enabled) return;
+    const handler = (e) => {
+      const action = matchUndoHotkey(e);
+      if (!action) return;
+      const k = keyed.current;
+      if (action === "undo" ? !k.canUndo : !k.canRedo) return;
+      e.preventDefault();
+      if (action === "undo") k.undo();
+      else k.redo();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isActive, enabled]);
+  const value = useMemo(() => ({
+    register,
+    unregister,
+    record,
+    undo,
+    redo,
+    clear,
+    baseline,
+    canUndo,
+    canRedo,
+    enabled,
+    undoLabel: canUndo ? state.past[state.past.length - 1].label : null,
+    redoLabel: canRedo ? state.future[0].label : null
+  }), [register, unregister, record, undo, redo, clear, baseline, canUndo, canRedo, enabled, state.past, state.future]);
+  return /* @__PURE__ */ jsx(UndoContext.Provider, { value, children });
+}
+function useUndo() {
+  const ctx = useContext(UndoContext);
+  const noop = useCallback(() => {
+  }, []);
+  return {
+    undo: ctx?.undo ?? noop,
+    redo: ctx?.redo ?? noop,
+    clear: ctx?.clear ?? noop,
+    baseline: ctx?.baseline ?? noop,
+    canUndo: ctx?.canUndo ?? false,
+    canRedo: ctx?.canRedo ?? false,
+    undoLabel: ctx?.undoLabel ?? null,
+    redoLabel: ctx?.redoLabel ?? null,
+    enabled: ctx?.enabled ?? false
+  };
+}
+function useUndoable(value, apply, opts) {
+  const ctx = useContext(UndoContext);
+  const id = useId();
+  const last = useRef(value);
+  const applyRef = useRef(apply);
+  applyRef.current = apply;
+  useEffect(() => {
+    if (!ctx) return;
+    ctx.register(id, {
+      getLast: () => last.current,
+      setLast: (v) => {
+        last.current = v;
+      },
+      apply: (v) => applyRef.current(v)
+    });
+    return () => ctx.unregister(id);
+  }, [ctx, id]);
+  const { label, coalesceKey = null } = opts;
+  const ctxRef = useRef(ctx);
+  ctxRef.current = ctx;
+  const optsRef = useRef({ label, coalesceKey });
+  optsRef.current = { label, coalesceKey };
+  useEffect(() => {
+    const c = ctxRef.current;
+    if (!c) return;
+    if (Object.is(value, last.current)) return;
+    c.record(optsRef.current.label, optsRef.current.coalesceKey);
+    last.current = value;
+  }, [value]);
+}
+function useUndoableState(initial, opts) {
+  const [value, setValue] = useState(initial);
+  useUndoable(value, (next) => setValue(() => next), opts);
+  return [value, setValue];
+}
 function LoadingSpinner() {
   return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-sm text-gray-400", children: "Loading..." });
 }
@@ -698,13 +909,13 @@ function seedDefaultWidgetPositions(widgets) {
   }
 }
 function healWindowIds(items) {
-  const counts = /* @__PURE__ */ new Map();
-  for (const it of items) counts.set(it.id, (counts.get(it.id) ?? 0) + 1);
+  const counts2 = /* @__PURE__ */ new Map();
+  for (const it of items) counts2.set(it.id, (counts2.get(it.id) ?? 0) + 1);
   const seen = /* @__PURE__ */ new Set();
   const out = [];
   for (const it of items) {
     let id = it.id;
-    if ((counts.get(it.id) ?? 0) > 1 && it.type === "modal" && it.entityType && it.entityId) {
+    if ((counts2.get(it.id) ?? 0) > 1 && it.type === "modal" && it.entityType && it.entityId) {
       id = `${it.entityType}:${it.entityId}`;
     }
     if (seen.has(id)) continue;
@@ -850,7 +1061,7 @@ function WindowManagerProvider({ children, windowAccentForRoute }) {
         WindowErrorBoundary,
         {
           fallback: (error, reset) => /* @__PURE__ */ jsx(Modal, { open: true, onClose: () => closeEntity(item.id), title: item.label, size: "md", autoHeight: true, windowKey: item.id, children: /* @__PURE__ */ jsx(WindowCrashedFallback, { error, onReload: reset }) }),
-          children: /* @__PURE__ */ jsx(WindowShortcutProvider, { spec: shortcutSpecFor(item), children: item.type === "page" ? /* @__PURE__ */ jsx(PageWindow, { item, onClose: () => closeEntity(item.id), accentRgb }) : /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(WindowShortcutProvider, { spec: shortcutSpecFor(item), children: /* @__PURE__ */ jsx(UndoProvider, { windowId: item.id, children: item.type === "page" ? /* @__PURE__ */ jsx(PageWindow, { item, onClose: () => closeEntity(item.id), accentRgb }) : /* @__PURE__ */ jsx(
             RestoredRegistryModal,
             {
               item,
@@ -859,7 +1070,7 @@ function WindowManagerProvider({ children, windowAccentForRoute }) {
               },
               accentRgb
             }
-          ) })
+          ) }) })
         },
         item.id
       );
@@ -1029,6 +1240,41 @@ function subscribeSwipingParentKey(cb) {
     subs.delete(cb);
   };
 }
+
+// src/shell/perfEvents.ts
+var empty = () => ({ menus: 0, submenus: 0, menuKey: null, moveMs: 0, resizeMs: 0 });
+var collecting = false;
+var counts = empty();
+var NOOP = () => {
+};
+function setPerfCollecting(on) {
+  collecting = on;
+  counts = empty();
+}
+function markMenuOpen(layer, key) {
+  if (!collecting) return;
+  if (layer === "submenu") counts.submenus++;
+  else counts.menus++;
+  counts.menuKey = key;
+}
+function beginWindowGesture(kind) {
+  if (!collecting) return NOOP;
+  const startedAt = performance.now();
+  let ended = false;
+  return () => {
+    if (ended) return;
+    ended = true;
+    if (!collecting) return;
+    const elapsed = performance.now() - startedAt;
+    if (kind === "move") counts.moveMs += elapsed;
+    else counts.resizeMs += elapsed;
+  };
+}
+function drainPerfEvents() {
+  const drained = counts;
+  counts = empty();
+  return drained;
+}
 var ShellPrefsContext = createContext(null);
 function ShellPrefsProvider({
   value,
@@ -1205,7 +1451,7 @@ function CancelButton({ onClick, children, className }) {
   const ctx = useContext(ModalActionsContext);
   const handleClick = async () => {
     if (ctx?.isDirty) {
-      const { confirm: confirm2 } = await import('./ConfirmDialog-QMBUHDXK.js');
+      const { confirm: confirm2 } = await import('./ConfirmDialog-R7NZVI2V.js');
       const ok = await confirm2({
         title: "Discard changes?",
         message: "You have unsaved changes. Are you sure you want to cancel? All changes will be lost.",
@@ -1307,6 +1553,14 @@ var windowHeightScale = {
 };
 var activationOrder = [];
 var activeListeners = /* @__PURE__ */ new Set();
+var _activeVersion = 0;
+function getActiveVersion() {
+  return _activeVersion;
+}
+function notifyActive() {
+  _activeVersion++;
+  activeListeners.forEach((fn) => fn());
+}
 var _modalIdByKey = /* @__PURE__ */ new Map();
 var _keyByModalId = /* @__PURE__ */ new Map();
 function _insertModalIdForKey(modalId, key) {
@@ -1339,7 +1593,7 @@ function mountModal(modalId, key) {
       _saveOrderDebounced();
     }
   }
-  activeListeners.forEach((fn) => fn());
+  notifyActive();
   window.dispatchEvent(new CustomEvent("modal-reorder"));
 }
 function activateModal(id) {
@@ -1353,7 +1607,7 @@ function activateModal(id) {
     _activationOrderKeys.push(key);
     _saveOrderDebounced();
   }
-  activeListeners.forEach((fn) => fn());
+  notifyActive();
   window.dispatchEvent(new CustomEvent("modal-reorder"));
 }
 function _minimizeModal(modalId) {
@@ -1367,7 +1621,7 @@ function _minimizeModal(modalId) {
       _saveOrderDebounced();
     }
   }
-  activeListeners.forEach((fn) => fn());
+  notifyActive();
   window.dispatchEvent(new CustomEvent("modal-reorder"));
 }
 var widgetIds = /* @__PURE__ */ new Set();
@@ -1380,7 +1634,7 @@ function deactivateAllModals() {
     return mid != null && widgetIds.has(mid);
   });
   _saveOrderDebounced();
-  activeListeners.forEach((fn) => fn());
+  notifyActive();
   window.dispatchEvent(new CustomEvent("modal-reorder"));
 }
 var EDGE_THRESHOLD = 8;
@@ -1530,7 +1784,7 @@ var RESIZE_CURSOR = {
   w: "ew-resize"
 };
 var DRAG_THRESHOLD = 4;
-function beginPointerGesture(handle, pointerId, cursor) {
+function beginPointerGesture(handle, pointerId, cursor, kind) {
   ensureGestureStyle();
   try {
     handle.setPointerCapture(pointerId);
@@ -1541,10 +1795,12 @@ function beginPointerGesture(handle, pointerId, cursor) {
   shield.setAttribute("data-drag-shield", "");
   shield.style.cssText = `position:fixed;inset:0;z-index:2147483647;cursor:${cursor};background:transparent;touch-action:none`;
   document.body.appendChild(shield);
+  const endMark = beginWindowGesture(kind);
   let done = false;
   return () => {
     if (done) return;
     done = true;
+    endMark();
     try {
       handle.releasePointerCapture(pointerId);
     } catch {
@@ -1588,6 +1844,16 @@ function useIsActiveModal(modalId) {
   const activeId = useSyncExternalStore(subscribeActive, getActiveModalId);
   return activationOrder.length <= 1 || activeId === modalId;
 }
+function useIsActiveWindow(windowKey) {
+  useSyncExternalStore(subscribeActive, getActiveVersion);
+  const ctx = useContext(ModalActionsContext);
+  if (activationOrder.length <= 1) return true;
+  if (windowKey) {
+    const modalId = _modalIdByKey.get(windowKey);
+    if (modalId != null) return getActiveModalId() === modalId;
+  }
+  return ctx?.active ?? getActiveModalId() != null;
+}
 var _exposeOn = false;
 var _exposeListeners = /* @__PURE__ */ new Set();
 function _notifyExpose() {
@@ -2038,7 +2304,7 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
       const aidx = activationOrder.indexOf(modalId);
       if (aidx !== -1) {
         activationOrder.splice(aidx, 1);
-        activeListeners.forEach((fn) => fn());
+        notifyActive();
       }
       const cleanupKey = _keyByModalId.get(modalId);
       if (cleanupKey) {
@@ -2289,7 +2555,7 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
     const move = (ev) => {
       if (!endGesture) {
         if (Math.abs(ev.clientX - sx) < DRAG_THRESHOLD && Math.abs(ev.clientY - sy) < DRAG_THRESHOLD) return;
-        endGesture = beginPointerGesture(dragHandle, dragPointerId, "move");
+        endGesture = beginPointerGesture(dragHandle, dragPointerId, "move", "move");
         if (panel) panel.style.transition = "none";
       }
       const nx = ox + ev.clientX - sx;
@@ -2399,7 +2665,7 @@ function Modal({ open, onClose, title, icon, copyText, size = "lg", dirty = fals
     const move = (ev) => {
       if (!endGesture) {
         if (Math.abs(ev.clientX - sx) < DRAG_THRESHOLD && Math.abs(ev.clientY - sy) < DRAG_THRESHOLD) return;
-        endGesture = beginPointerGesture(resizeHandle, resizePointerId, RESIZE_CURSOR[corner]);
+        endGesture = beginPointerGesture(resizeHandle, resizePointerId, RESIZE_CURSOR[corner], "resize");
       }
       pending = compute(ev.clientX - sx, ev.clientY - sy);
       if (!raf) raf = requestAnimationFrame(flush);
@@ -3207,6 +3473,6 @@ function ConfirmProvider({ children }) {
   ] });
 }
 
-export { CancelButton, ConfirmProvider, CopyButton, DocFavStar, LoadingSpinner, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, SIDEBAR_STRIP_W, ShellPrefsProvider, WINDOW_REGISTRY, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, client_default, commitExposeHighlight, confirm, confirmDestructive, exitExposeMode, forgetMaximizedWindowBoxes, getActiveModalId, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, isShellApiClientConfigured, prompt, registerModalEscapeInterceptor, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useConfirm, useIsMobile, useLocalStoragePrefs, useModalActive, useShellPrefs, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
-//# sourceMappingURL=chunk-SI4XHEMM.js.map
-//# sourceMappingURL=chunk-SI4XHEMM.js.map
+export { CancelButton, ConfirmProvider, CopyButton, DocFavStar, LoadingSpinner, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, SIDEBAR_STRIP_W, ShellPrefsProvider, UndoProvider, WINDOW_REGISTRY, WindowCrashedFallback, WindowErrorBoundary, WindowManagerProvider, WindowTitle, beginWindowGesture, client_default, commitExposeHighlight, confirm, confirmDestructive, drainPerfEvents, exitExposeMode, forgetMaximizedWindowBoxes, getActiveModalId, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, isShellApiClientConfigured, markMenuOpen, prompt, registerModalEscapeInterceptor, setExposeHighlight, setPerfCollecting, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useConfirm, useIsActiveWindow, useIsMobile, useLocalStoragePrefs, useModalActive, useShellPrefs, useUndo, useUndoable, useUndoableState, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle };
+//# sourceMappingURL=chunk-EF5W3EXL.js.map
+//# sourceMappingURL=chunk-EF5W3EXL.js.map