@forgeax/app-shell 0.4.0 → 0.6.1

package/README.md

@@ -38,9 +38,11 @@ React entry point:
 
 ```tsx
 import {
+  ResizeHandle,
   ShellSlot,
   SlotDebugOverlay,
   isSlotDebugEnabled,
+  useLocalSize,
 } from '@forgeax/app-shell/react';
 
 export function ProductShell() {
@@ -52,6 +54,19 @@ 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 }}>
+  <ResizeHandle orientation="col" onDrag={(delta) => setWidth((value) => value + delta)} />
+</aside>
+```
+
 ## Ownership boundary
 
 | Package | Owns |

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import * as react from 'react';
 import { ReactElement, HTMLAttributes } from 'react';
 
 /** Stable FNV-1a color bucket for a shell slot name. */
@@ -7,6 +8,14 @@ declare function isSlotDebugEnabled(search?: string): boolean;
 /** Dev-time visualization derived only from live `data-fx-slot` markers. */
 declare function SlotDebugOverlay(): ReactElement;
 
+declare function useLocalSize(key: string, initial: number, min: number, max: number): readonly [number, (next: number | ((previous: number) => number)) => void];
+interface ResizeHandleProps {
+    orientation: 'col' | 'row';
+    onDrag: (delta: number) => void;
+    title?: string;
+}
+declare function ResizeHandle({ orientation, onDrag, title }: ResizeHandleProps): react.JSX.Element;
+
 type ShellSlotElement = 'aside' | 'div' | 'main' | 'section';
 interface ShellSlotProps extends HTMLAttributes<HTMLElement> {
     as?: ShellSlotElement;
@@ -15,4 +24,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 { ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, hashSlotHue, isSlotDebugEnabled };
+export { ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, hashSlotHue, isSlotDebugEnabled, useLocalSize };

package/dist/react.js

@@ -162,6 +162,83 @@ function SlotDebugOverlay() {
   );
 }
 
+// src/resize.tsx
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function useLocalSize(key, initial, min, max) {
+  const clamp = (value2) => Math.min(max, Math.max(min, value2));
+  const [value, setValueRaw] = useState2(() => {
+    if (typeof window === "undefined") return initial;
+    try {
+      const raw = window.localStorage.getItem(key);
+      if (!raw) return initial;
+      const persisted = Number(raw);
+      if (!Number.isFinite(persisted)) return initial;
+      return clamp(persisted);
+    } catch {
+      return initial;
+    }
+  });
+  useEffect2(() => {
+    try {
+      window.localStorage.setItem(key, String(value));
+    } catch {
+    }
+  }, [key, value]);
+  const setValue = (next) => {
+    setValueRaw((previous) => clamp(
+      typeof next === "function" ? next(previous) : next
+    ));
+  };
+  return [value, setValue];
+}
+function ResizeHandle({ orientation, onDrag, title }) {
+  const startRef = useRef(null);
+  const resetGlobalDragStyles = () => {
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+  useEffect2(() => () => {
+    if (startRef.current) resetGlobalDragStyles();
+  }, []);
+  const onPointerDown = (event) => {
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    startRef.current = { x: event.clientX, y: event.clientY };
+    document.body.style.cursor = orientation === "col" ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+  };
+  const onPointerMove = (event) => {
+    if (!startRef.current) return;
+    const deltaX = event.clientX - startRef.current.x;
+    const deltaY = event.clientY - startRef.current.y;
+    startRef.current = { x: event.clientX, y: event.clientY };
+    onDrag(orientation === "col" ? deltaX : deltaY);
+  };
+  const finish = (event) => {
+    if (!startRef.current) return;
+    startRef.current = null;
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch {
+    }
+    resetGlobalDragStyles();
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: `resize-handle resize-handle-${orientation}`,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: finish,
+      onPointerCancel: finish,
+      title,
+      role: "separator",
+      "aria-orientation": orientation === "col" ? "vertical" : "horizontal"
+    }
+  );
+}
+
 // src/react.tsx
 function ShellSlot({
   as = "div",
@@ -171,8 +248,10 @@ function ShellSlot({
   return createElement(as, { ...props, "data-fx-slot": name });
 }
 export {
+  ResizeHandle,
   ShellSlot,
   SlotDebugOverlay,
   hashSlotHue,
-  isSlotDebugEnabled
+  isSlotDebugEnabled,
+  useLocalSize
 };

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.4.0",
+  "version": "0.6.1",
   "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"
   },