@forgeax/app-shell 0.39.0 → 0.40.0

package/dist/react.d.ts

@@ -20,7 +20,25 @@ interface ResizeHandleProps {
     ariaLabel?: string;
     title?: string;
 }
+type AnchoredResizeDirection = 'subtract' | 'add';
+interface AnchoredResizeSession {
+    readonly startSize: number;
+    readonly direction: AnchoredResizeDirection;
+    totalDelta: number;
+}
+/** Capture one unclamped drag origin so overshoot stays pinned until the pointer returns. */
+declare function beginAnchoredResize(startSize: number, direction?: AnchoredResizeDirection): AnchoredResizeSession;
+/** Project incremental pointer travel from the stable drag origin. */
+declare function applyAnchoredResizeDelta(session: AnchoredResizeSession, delta: number): number;
 declare function ResizeHandle({ orientation, onDrag, onDragStart, onDragEnd, className, ariaLabel, title, }: ResizeHandleProps): react.JSX.Element;
+interface AnchoredResizeHandleProps extends Omit<ResizeHandleProps, 'onDrag' | 'onDragStart' | 'onDragEnd'> {
+    readSize: () => number;
+    writeSize: (next: number) => void;
+    direction?: AnchoredResizeDirection;
+    resizingBodyClassName?: string;
+}
+/** Product-neutral anchored resize session over the public pointer carrier. */
+declare function AnchoredResizeHandle({ readSize, writeSize, direction, resizingBodyClassName, ...handleProps }: AnchoredResizeHandleProps): react.JSX.Element;
 
 type PanelContentPadding = 'none' | 'sm' | 'md';
 type PanelContentScroll = 'none' | 'auto';
@@ -163,4 +181,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 { 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, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, SurfaceRegion, type SurfaceRegionProps, hashSlotHue, isSlotDebugEnabled, useDockLayoutControlBinding, useLocalSize };
+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, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, SurfaceRegion, type SurfaceRegionProps, applyAnchoredResizeDelta, beginAnchoredResize, hashSlotHue, isSlotDebugEnabled, useDockLayoutControlBinding, useLocalSize };

package/dist/react.js

@@ -624,6 +624,46 @@ function useLocalSize(key, initial, min, max) {
   };
   return [value, setValue];
 }
+var bodyClassLeases = /* @__PURE__ */ new WeakMap();
+function acquireBodyClassLease(body, tokens) {
+  const uniqueTokens = [...new Set(tokens)];
+  let records = bodyClassLeases.get(body);
+  if (!records) {
+    records = /* @__PURE__ */ new Map();
+    bodyClassLeases.set(body, records);
+  }
+  for (const token of uniqueTokens) {
+    const existing = records.get(token);
+    if (existing) {
+      existing.count += 1;
+      continue;
+    }
+    const owned = !body.classList.contains(token);
+    if (owned) body.classList.add(token);
+    records.set(token, { count: 1, owned });
+  }
+  let active = true;
+  return () => {
+    if (!active) return;
+    active = false;
+    for (const token of uniqueTokens) {
+      const record = records?.get(token);
+      if (!record) continue;
+      record.count -= 1;
+      if (record.count > 0) continue;
+      records?.delete(token);
+      if (record.owned) body.classList.remove(token);
+    }
+    if (records?.size === 0) bodyClassLeases.delete(body);
+  };
+}
+function beginAnchoredResize(startSize, direction = "subtract") {
+  return { startSize, direction, totalDelta: 0 };
+}
+function applyAnchoredResizeDelta(session, delta) {
+  session.totalDelta += delta;
+  return session.startSize + (session.direction === "subtract" ? -session.totalDelta : session.totalDelta);
+}
 function ResizeHandle({
   orientation,
   onDrag,
@@ -644,24 +684,47 @@ function ResizeHandle({
     if (!startRef.current) return;
     startRef.current = null;
     resetGlobalDragStyles();
-    onDragEndRef.current?.();
+    try {
+      onDragEndRef.current?.();
+    } catch {
+    }
   };
   useEffect2(() => finishDrag, []);
   const onPointerDown = (event) => {
     if (startRef.current) return;
     event.preventDefault();
-    event.currentTarget.setPointerCapture(event.pointerId);
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      return;
+    }
     startRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
     document.body.style.cursor = orientation === "col" ? "col-resize" : "row-resize";
     document.body.style.userSelect = "none";
-    onDragStart?.();
+    try {
+      onDragStart?.();
+    } catch {
+      try {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      } catch {
+      }
+      finishDrag();
+    }
   };
   const onPointerMove = (event) => {
     if (!startRef.current || startRef.current.pointerId !== event.pointerId) return;
     const deltaX = event.clientX - startRef.current.x;
     const deltaY = event.clientY - startRef.current.y;
     startRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
-    onDrag(orientation === "col" ? deltaX : deltaY);
+    try {
+      onDrag(orientation === "col" ? deltaX : deltaY);
+    } catch {
+      try {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      } catch {
+      }
+      finishDrag();
+    }
   };
   const finish = (event) => {
     if (!startRef.current || startRef.current.pointerId !== event.pointerId) return;
@@ -686,6 +749,58 @@ function ResizeHandle({
     }
   );
 }
+function AnchoredResizeHandle({
+  readSize,
+  writeSize,
+  direction = "subtract",
+  resizingBodyClassName,
+  ...handleProps
+}) {
+  const readSizeRef = useRef(readSize);
+  const writeSizeRef = useRef(writeSize);
+  const directionRef = useRef(direction);
+  const bodyClassNameRef = useRef(resizingBodyClassName);
+  readSizeRef.current = readSize;
+  writeSizeRef.current = writeSize;
+  directionRef.current = direction;
+  bodyClassNameRef.current = resizingBodyClassName;
+  const sessionRef = useRef(null);
+  const finishSession = () => {
+    const active = sessionRef.current;
+    if (!active) return;
+    sessionRef.current = null;
+    try {
+      active.releaseBodyClass();
+    } catch {
+    }
+  };
+  useEffect2(() => finishSession, []);
+  const startSession = () => {
+    finishSession();
+    const bodyClassTokens = bodyClassNameRef.current?.trim().split(/\s+/).filter(Boolean) ?? [];
+    const resize = beginAnchoredResize(readSizeRef.current(), directionRef.current);
+    const releaseBodyClass = typeof document !== "undefined" && bodyClassTokens.length > 0 ? acquireBodyClassLease(document.body, bodyClassTokens) : () => {
+    };
+    sessionRef.current = {
+      resize,
+      releaseBodyClass
+    };
+  };
+  const applyDelta = (delta) => {
+    const active = sessionRef.current;
+    if (!active) return;
+    writeSizeRef.current(applyAnchoredResizeDelta(active.resize, delta));
+  };
+  return /* @__PURE__ */ jsx2(
+    ResizeHandle,
+    {
+      ...handleProps,
+      onDrag: applyDelta,
+      onDragStart: startSession,
+      onDragEnd: finishSession
+    }
+  );
+}
 
 // src/panel.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
@@ -995,7 +1110,7 @@ function DockLayoutMenu({
               }
             },
             children: [
-              resetIcon ? /* @__PURE__ */ jsx8("span", { className: "fx-dl-icon", "aria-hidden": "true", children: resetIcon }) : null,
+              resetIcon ? /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: resetIcon }) : null,
               resetLabel
             ]
           }
@@ -1037,6 +1152,7 @@ function ShellSlot({
   return createElement(as, { ...props, "data-fx-slot": name });
 }
 export {
+  AnchoredResizeHandle,
   DetachedPanelBoundary,
   DetachedSurfaceFrame,
   DetachedSurfaceStatus,
@@ -1049,6 +1165,8 @@ export {
   SlotDebugOverlay,
   SurfacePlaceholder,
   SurfaceRegion,
+  applyAnchoredResizeDelta,
+  beginAnchoredResize,
   hashSlotHue,
   isSlotDebugEnabled,
   useDockLayoutControlBinding,

package/package.json

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