@forgeax/app-shell 0.5.0 → 0.7.0

package/README.md

@@ -57,6 +57,9 @@ export function ProductShell() {
 Generic persisted sizing and pointer-capture handles use the same public entry:
 
 ```tsx
+import '@forgeax/app-shell/resize.css';
+import { ResizeHandle, useLocalSize } from '@forgeax/app-shell/react';
+
 const [width, setWidth] = useLocalSize('product.sidebar.width', 280, 180, 640);
 
 <aside style={{ width }}>

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/dist/resize.css

@@ -0,0 +1,47 @@
+.resize-handle {
+  flex-shrink: 0;
+  position: relative;
+  background: transparent;
+  z-index: 5;
+}
+
+.resize-handle::after {
+  content: "";
+  position: absolute;
+  background: var(--color-border-default);
+  transition: background 150ms;
+  pointer-events: none;
+}
+
+.resize-handle-col {
+  width: 4px;
+  cursor: col-resize;
+  margin: 0 -2px;
+}
+
+.resize-handle-col::after {
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+}
+
+.resize-handle-row {
+  height: 4px;
+  cursor: row-resize;
+  margin: -2px 0;
+}
+
+.resize-handle-row::after {
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1px;
+  transform: translateY(-50%);
+}
+
+.resize-handle:hover::after,
+.resize-handle:active::after {
+  background: var(--color-border-strong);
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@forgeax/app-shell",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Generic Dock, Panel, Window, and Slot composition primitives",
   "license": "Apache-2.0",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": ["./dist/resize.css"],
   "files": ["dist"],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -20,12 +20,13 @@
     "./react": {
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js"
-    }
+    },
+    "./resize.css": "./dist/resize.css"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "bun test test",
-    "build": "tsup src/index.ts src/dock.ts src/react.tsx --format esm --dts --outDir dist",
+    "build": "tsup src/index.ts src/dock.ts src/react.tsx --format esm --dts --outDir dist && bun run scripts/copy-resize-css.ts",
     "check": "bun run typecheck && bun run test && bun run build",
     "release:preflight": "bun run scripts/release-preflight.ts"
   },