@forgeax/app-shell 0.6.1 → 0.7.0

package/dist/react.d.ts

@@ -12,9 +12,13 @@ declare function useLocalSize(key: string, initial: number, min: number, max: nu
 interface ResizeHandleProps {
     orientation: 'col' | 'row';
     onDrag: (delta: number) => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    className?: string;
+    ariaLabel?: string;
     title?: string;
 }
-declare function ResizeHandle({ orientation, onDrag, title }: ResizeHandleProps): react.JSX.Element;
+declare function ResizeHandle({ orientation, onDrag, onDragStart, onDragEnd, className, ariaLabel, title, }: ResizeHandleProps): react.JSX.Element;
 
 type ShellSlotElement = 'aside' | 'div' | 'main' | 'section';
 interface ShellSlotProps extends HTMLAttributes<HTMLElement> {

package/dist/react.js

@@ -192,49 +192,65 @@ function useLocalSize(key, initial, min, max) {
   };
   return [value, setValue];
 }
-function ResizeHandle({ orientation, onDrag, title }) {
+function ResizeHandle({
+  orientation,
+  onDrag,
+  onDragStart,
+  onDragEnd,
+  className,
+  ariaLabel,
+  title
+}) {
   const startRef = useRef(null);
+  const onDragEndRef = useRef(onDragEnd);
+  onDragEndRef.current = onDragEnd;
   const resetGlobalDragStyles = () => {
     document.body.style.cursor = "";
     document.body.style.userSelect = "";
   };
-  useEffect2(() => () => {
-    if (startRef.current) resetGlobalDragStyles();
-  }, []);
+  const finishDrag = () => {
+    if (!startRef.current) return;
+    startRef.current = null;
+    resetGlobalDragStyles();
+    onDragEndRef.current?.();
+  };
+  useEffect2(() => finishDrag, []);
   const onPointerDown = (event) => {
+    if (startRef.current) return;
     event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
-    startRef.current = { x: event.clientX, y: event.clientY };
+    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?.();
   };
   const onPointerMove = (event) => {
-    if (!startRef.current) return;
+    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 = { x: event.clientX, y: event.clientY };
+    startRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
     onDrag(orientation === "col" ? deltaX : deltaY);
   };
   const finish = (event) => {
-    if (!startRef.current) return;
-    startRef.current = null;
+    if (!startRef.current || startRef.current.pointerId !== event.pointerId) return;
     try {
       event.currentTarget.releasePointerCapture(event.pointerId);
     } catch {
     }
-    resetGlobalDragStyles();
+    finishDrag();
   };
   return /* @__PURE__ */ jsx2(
     "div",
     {
-      className: `resize-handle resize-handle-${orientation}`,
+      className: `resize-handle resize-handle-${orientation}${className ? ` ${className}` : ""}`,
       onPointerDown,
       onPointerMove,
       onPointerUp: finish,
       onPointerCancel: finish,
       title,
       role: "separator",
-      "aria-orientation": orientation === "col" ? "vertical" : "horizontal"
+      "aria-orientation": orientation === "col" ? "vertical" : "horizontal",
+      "aria-label": ariaLabel
     }
   );
 }

package/package.json

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