@forgeax/app-shell 0.43.0 → 0.45.0

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactElement, HTMLAttributes, ReactNode } from 'react';
+import { ReactElement, RefCallback, PointerEventHandler, HTMLAttributes, ReactNode } from 'react';
 import { DetachedWindowCapability } from './window.js';
 import { DockLayoutControlSnapshot, DockLayoutPanelControl, DockLayoutControlState, DockLayoutControlToggleSource } from './dock.js';
 
@@ -92,6 +92,44 @@ interface AnchoredResizeHandleProps extends Omit<ResizeHandleProps, 'onDrag' | '
 /** Product-neutral anchored resize session over the public pointer carrier. */
 declare function AnchoredResizeHandle({ readSize, writeSize, direction, resizingBodyClassName, ...handleProps }: AnchoredResizeHandleProps): react.JSX.Element;
 
+type PointerReorderFinishReason = 'pointerup' | 'pointercancel' | 'buttons-released' | 'replacement' | 'cancel' | 'dispose' | 'error';
+interface PointerReorderSessionOptions<Item> {
+    readonly element: HTMLElement;
+    readonly target: Window;
+    readonly resolveItem: (target: EventTarget | null) => Item | null;
+    readonly canStart?: (event: globalThis.PointerEvent, item: Item) => boolean;
+    readonly reorder: (dragged: Item, over: Item, event: globalThis.PointerEvent) => void;
+    readonly onDraggingChange?: (item: Item | null, reason?: PointerReorderFinishReason) => void;
+    readonly equals?: (left: Item, right: Item) => boolean;
+}
+interface PointerReorderSession {
+    cancel(): void;
+    dispose(): void;
+}
+/** Own one delegated pointer reorder lifecycle without owning item identity or mutation policy. */
+declare function installPointerReorderSession<Item>(options: PointerReorderSessionOptions<Item>): PointerReorderSession;
+
+interface TabCloseInteractionsOptions<TabElement extends HTMLElement = HTMLElement> {
+    readonly close: () => void;
+    readonly disabled?: boolean;
+    readonly onPointerDown?: PointerEventHandler<TabElement>;
+    readonly onPointerUp?: PointerEventHandler<TabElement>;
+    readonly onPointerLeave?: PointerEventHandler<TabElement>;
+}
+interface TabCloseInteractions<TabElement extends HTMLElement = HTMLElement> {
+    readonly closeRef: RefCallback<HTMLElement>;
+    readonly onPointerDown: PointerEventHandler<TabElement>;
+    readonly onPointerUp: PointerEventHandler<TabElement>;
+    readonly onPointerLeave: PointerEventHandler<TabElement>;
+}
+/**
+ * Owns the browser-specific close gestures for a tab without owning tab identity,
+ * close policy, or presentation. Native pointerdown keeps an action surface from
+ * activating its parent tab; a middle-button close settles only the matching
+ * pointer that armed it.
+ */
+declare function useTabCloseInteractions<TabElement extends HTMLElement = HTMLElement>(options: TabCloseInteractionsOptions<TabElement>): TabCloseInteractions<TabElement>;
+
 type PanelContentPadding = 'none' | 'sm' | 'md';
 type PanelContentScroll = 'none' | 'auto';
 type PanelContentTone = 'default' | 'surface' | 'tool';
@@ -233,4 +271,4 @@ interface ShellSlotProps extends HTMLAttributes<HTMLElement> {
 /** Structural shell marker that preserves the caller's semantic element. */
 declare function ShellSlot({ as, name, ...props }: ShellSlotProps): ReactElement;
 
-export { type AnchoredResizeDirection, AnchoredResizeHandle, type AnchoredResizeHandleProps, type AnchoredResizeSession, DetachedPanelBoundary, type DetachedPanelBoundaryProps, DetachedSurfaceFrame, type DetachedSurfaceFrameProps, DetachedSurfaceStatus, type DetachedSurfaceStatusProps, type DetachedSurfaceStatusTone, type DockLayoutControlBinding, type DockLayoutControlBindingOptions, DockLayoutMenu, type DockLayoutMenuPanel, type DockLayoutMenuProps, FloatingMenu, type FloatingMenuAnchor, type FloatingMenuPoint, type FloatingMenuProps, type PanelContentPadding, type PanelContentPolicy, type PanelContentScroll, type PanelContentTone, PanelEmptyState, type PanelEmptyStateProps, PanelSurface, type PanelSurfaceProps, type PersistentSizeStorage, type PersistentSizeStore, type PersistentSizeStoreOptions, type PersistentSizeUpdate, type PointerDragFinishReason, type PointerDragSessionOptions, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, SurfaceRegion, type SurfaceRegionProps, type ThresholdPointerDragFinishReason, type ThresholdPointerDragSession, type ThresholdPointerDragSessionOptions, applyAnchoredResizeDelta, beginAnchoredResize, createPersistentSizeStore, hashSlotHue, installPointerDragSession, installThresholdPointerDragSession, isSlotDebugEnabled, useDockLayoutControlBinding, useLocalSize, usePersistentSizeStore };
+export { type AnchoredResizeDirection, AnchoredResizeHandle, type AnchoredResizeHandleProps, type AnchoredResizeSession, DetachedPanelBoundary, type DetachedPanelBoundaryProps, DetachedSurfaceFrame, type DetachedSurfaceFrameProps, DetachedSurfaceStatus, type DetachedSurfaceStatusProps, type DetachedSurfaceStatusTone, type DockLayoutControlBinding, type DockLayoutControlBindingOptions, DockLayoutMenu, type DockLayoutMenuPanel, type DockLayoutMenuProps, FloatingMenu, type FloatingMenuAnchor, type FloatingMenuPoint, type FloatingMenuProps, type PanelContentPadding, type PanelContentPolicy, type PanelContentScroll, type PanelContentTone, PanelEmptyState, type PanelEmptyStateProps, PanelSurface, type PanelSurfaceProps, type PersistentSizeStorage, type PersistentSizeStore, type PersistentSizeStoreOptions, type PersistentSizeUpdate, type PointerDragFinishReason, type PointerDragSessionOptions, type PointerReorderFinishReason, type PointerReorderSession, type PointerReorderSessionOptions, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, SurfaceRegion, type SurfaceRegionProps, type TabCloseInteractions, type TabCloseInteractionsOptions, type ThresholdPointerDragFinishReason, type ThresholdPointerDragSession, type ThresholdPointerDragSessionOptions, applyAnchoredResizeDelta, beginAnchoredResize, createPersistentSizeStore, hashSlotHue, installPointerDragSession, installPointerReorderSession, installThresholdPointerDragSession, isSlotDebugEnabled, useDockLayoutControlBinding, useLocalSize, usePersistentSizeStore, useTabCloseInteractions };

package/dist/react.js

@@ -1067,6 +1067,175 @@ function AnchoredResizeHandle({
   );
 }
 
+// src/pointer-reorder.ts
+function installPointerReorderSession(options) {
+  const equals = options.equals ?? Object.is;
+  let disposed = false;
+  let generation = 0;
+  let active = null;
+  const publishDragging = (item, reason) => {
+    try {
+      options.onDraggingChange?.(item, reason);
+    } catch {
+    }
+  };
+  const settle = (reason) => {
+    const current = active;
+    if (current === null) return;
+    active = null;
+    if (current.dragging) publishDragging(null, reason);
+  };
+  const onPointerDown = (event) => {
+    if (disposed || event.button !== 0 || event.isPrimary === false) return;
+    let item;
+    try {
+      item = options.resolveItem(event.target);
+      if (item === null || options.canStart?.(event, item) === false) return;
+    } catch {
+      return;
+    }
+    const nextGeneration = ++generation;
+    settle("replacement");
+    if (disposed || generation !== nextGeneration) return;
+    active = {
+      generation: nextGeneration,
+      pointerId: event.pointerId,
+      item,
+      dragging: false,
+      lastOver: null
+    };
+  };
+  const onPointerMove = (event) => {
+    const current = active;
+    if (disposed || current === null || event.pointerId !== current.pointerId) return;
+    if ((event.buttons & 1) !== 1) {
+      settle("buttons-released");
+      return;
+    }
+    let over;
+    try {
+      over = options.resolveItem(event.target);
+    } catch {
+      settle("error");
+      return;
+    }
+    if (active !== current || current.generation !== generation) return;
+    if (over === null) return;
+    let sameItem;
+    try {
+      sameItem = equals(over, current.item);
+    } catch {
+      if (active === current) settle("error");
+      return;
+    }
+    if (active !== current || current.generation !== generation || sameItem) return;
+    if (current.lastOver !== null) {
+      let sameTarget;
+      try {
+        sameTarget = equals(over, current.lastOver);
+      } catch {
+        if (active === current) settle("error");
+        return;
+      }
+      if (active !== current || current.generation !== generation || sameTarget) return;
+    }
+    current.lastOver = over;
+    if (!current.dragging) {
+      current.dragging = true;
+      publishDragging(current.item);
+      if (active !== current || current.generation !== generation) return;
+    }
+    try {
+      options.reorder(current.item, over, event);
+    } catch {
+      settle("error");
+    }
+  };
+  const onPointerFinish = (event) => {
+    const current = active;
+    if (disposed || current === null || event.pointerId !== current.pointerId) return;
+    settle(event.type === "pointercancel" ? "pointercancel" : "pointerup");
+  };
+  options.element.addEventListener("pointerdown", onPointerDown);
+  options.element.addEventListener("pointermove", onPointerMove);
+  options.target.addEventListener("pointerup", onPointerFinish, true);
+  options.target.addEventListener("pointercancel", onPointerFinish, true);
+  return {
+    cancel: () => settle("cancel"),
+    dispose: () => {
+      if (disposed) return;
+      disposed = true;
+      generation += 1;
+      options.element.removeEventListener("pointerdown", onPointerDown);
+      options.element.removeEventListener("pointermove", onPointerMove);
+      options.target.removeEventListener("pointerup", onPointerFinish, true);
+      options.target.removeEventListener("pointercancel", onPointerFinish, true);
+      settle("dispose");
+    }
+  };
+}
+
+// src/tab-close.tsx
+import {
+  useCallback,
+  useEffect as useEffect3,
+  useRef as useRef2
+} from "react";
+function useTabCloseInteractions(options) {
+  const optionsRef = useRef2(options);
+  const closeElementRef = useRef2(null);
+  const middlePointerRef = useRef2(null);
+  optionsRef.current = options;
+  const closeCurrent = useCallback(() => {
+    const current = optionsRef.current;
+    if (current.disabled) return;
+    try {
+      current.close();
+    } catch {
+    }
+  }, []);
+  const onClosePointerDown = useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    closeCurrent();
+  }, [closeCurrent]);
+  const closeRef = useCallback((element) => {
+    const previous = closeElementRef.current;
+    if (previous === element) return;
+    previous?.removeEventListener("pointerdown", onClosePointerDown);
+    closeElementRef.current = element;
+    element?.addEventListener("pointerdown", onClosePointerDown);
+  }, [onClosePointerDown]);
+  const forward = useCallback((callback, event) => {
+    try {
+      callback?.(event);
+    } catch {
+    }
+  }, []);
+  const onPointerDown = useCallback((event) => {
+    middlePointerRef.current = event.button === 1 ? event.pointerId : null;
+    forward(optionsRef.current.onPointerDown, event);
+  }, [forward]);
+  const onPointerUp = useCallback((event) => {
+    const matches = middlePointerRef.current === event.pointerId;
+    const shouldClose = event.button === 1 && matches;
+    if (matches) middlePointerRef.current = null;
+    if (shouldClose) closeCurrent();
+    forward(optionsRef.current.onPointerUp, event);
+  }, [closeCurrent, forward]);
+  const onPointerLeave = useCallback((event) => {
+    if (middlePointerRef.current === event.pointerId) middlePointerRef.current = null;
+    forward(optionsRef.current.onPointerLeave, event);
+  }, [forward]);
+  useEffect3(() => () => {
+    middlePointerRef.current = null;
+    const closeElement = closeElementRef.current;
+    closeElementRef.current = null;
+    closeElement?.removeEventListener("pointerdown", onClosePointerDown);
+  }, [onClosePointerDown]);
+  return { closeRef, onPointerDown, onPointerUp, onPointerLeave };
+}
+
 // src/panel.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function PanelEmptyState({
@@ -1209,7 +1378,7 @@ var SurfaceRegion = forwardRef(
 );
 
 // src/dock-layout-control.ts
-import { useEffect as useEffect3, useMemo, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useEffect as useEffect4, useMemo, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useDockLayoutControlBinding({
   state,
   onToggle,
@@ -1222,7 +1391,7 @@ function useDockLayoutControlBinding({
     state.getSnapshot,
     state.getSnapshot
   );
-  useEffect3(() => installDockLayoutControlToggle({ onToggle }, state), [onToggle, state]);
+  useEffect4(() => installDockLayoutControlToggle({ onToggle }, state), [onToggle, state]);
   const panelControl = useMemo(() => createDockLayoutPanelControl({
     isOpen: isPanelOpen,
     close: closePanel,
@@ -1233,7 +1402,7 @@ function useDockLayoutControlBinding({
 
 // src/floating-menu.tsx
 var import_react_dom = __toESM(require_react_dom(), 1);
-import { useEffect as useEffect4, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect5, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var VIEWPORT_PADDING = 8;
 function FloatingMenu({
@@ -1246,7 +1415,7 @@ function FloatingMenu({
   className,
   children
 }) {
-  const menuRef = useRef2(null);
+  const menuRef = useRef3(null);
   const [position, setPosition] = useState3({ top: 0 });
   useLayoutEffect(() => {
     if (!open) return;
@@ -1283,7 +1452,7 @@ function FloatingMenu({
       }
     }
   }, [align, anchor?.bottom, anchor?.left, anchor?.right, anchor?.top, offset, open, point?.x, point?.y]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!open) return;
     const closeOnEscape = (event) => {
       if (event.key === "Escape") onClose();
@@ -1435,11 +1604,13 @@ export {
   createPersistentSizeStore,
   hashSlotHue,
   installPointerDragSession,
+  installPointerReorderSession,
   installThresholdPointerDragSession,
   isSlotDebugEnabled,
   useDockLayoutControlBinding,
   useLocalSize,
-  usePersistentSizeStore
+  usePersistentSizeStore,
+  useTabCloseInteractions
 };
 /*! Bundled license information:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeax/app-shell",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "description": "Generic Dock, Panel, Window, and Slot composition primitives",
   "license": "Apache-2.0",
   "type": "module",