@forgeax/app-shell 0.6.1 → 0.8.0

package/README.md

@@ -67,6 +67,23 @@ const [width, setWidth] = useLocalSize('product.sidebar.width', 280, 180, 640);
 </aside>
 ```
 
+Generic panel sections keep product renderers and action policies outside App
+Shell while providing stable shell/content metadata:
+
+```tsx
+import '@forgeax/app-shell/panel.css';
+import { PanelSurface } from '@forgeax/app-shell/react';
+
+<PanelSurface
+  id="project-tree"
+  registered
+  header={<ProductPanelActions />}
+  content={{ padding: 'sm', scroll: 'auto', tone: 'tool' }}
+>
+  <ProjectTree />
+</PanelSurface>
+```
+
 ## Ownership boundary
 
 | Package | Owns |

package/dist/panel.css

@@ -0,0 +1,41 @@
+.fx-panel {
+  height: 100%;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-background-base, #191919);
+  color: var(--color-text-primary, #e8eaed);
+}
+
+.fx-panel-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.fx-panel-content[data-scroll="none"] {
+  overflow: hidden;
+}
+
+.fx-panel-content[data-padding="none"] {
+  padding: 0;
+}
+
+.fx-panel-content[data-padding="sm"] {
+  padding: 8px;
+}
+
+.fx-panel-content[data-padding="md"] {
+  padding: 12px;
+}
+
+.fx-panel-content[data-tone="surface"] {
+  background: var(--color-background-elevated, #161619);
+}
+
+.fx-panel-content[data-tone="tool"] {
+  background: var(--color-background-base, #191919);
+}

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactElement, HTMLAttributes } from 'react';
+import { ReactElement, HTMLAttributes, ReactNode } from 'react';
 
 /** Stable FNV-1a color bucket for a shell slot name. */
 declare function hashSlotHue(name: string): number;
@@ -12,9 +12,32 @@ 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 PanelContentPadding = 'none' | 'sm' | 'md';
+type PanelContentScroll = 'none' | 'auto';
+type PanelContentTone = 'default' | 'surface' | 'tool';
+interface PanelContentPolicy {
+    readonly padding?: PanelContentPadding;
+    readonly scroll?: PanelContentScroll;
+    readonly tone?: PanelContentTone;
+}
+interface PanelSurfaceProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'content' | 'id'> {
+    readonly id: string;
+    readonly registered?: boolean;
+    readonly singleTab?: 'default' | 'full' | 'hideTitle';
+    readonly header?: ReactNode;
+    readonly content?: PanelContentPolicy;
+    readonly children?: ReactNode;
+}
+/** Product-neutral panel section and content presentation. */
+declare function PanelSurface({ id, registered, singleTab, header, content, children, className, ...props }: PanelSurfaceProps): ReactElement;
 
 type ShellSlotElement = 'aside' | 'div' | 'main' | 'section';
 interface ShellSlotProps extends HTMLAttributes<HTMLElement> {
@@ -24,4 +47,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 { ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, hashSlotHue, isSlotDebugEnabled, useLocalSize };
+export { type PanelContentPadding, type PanelContentPolicy, type PanelContentScroll, type PanelContentTone, PanelSurface, type PanelSurfaceProps, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, hashSlotHue, isSlotDebugEnabled, useLocalSize };

package/dist/react.js

@@ -192,49 +192,103 @@ 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
+    }
+  );
+}
+
+// src/panel.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function PanelSurface({
+  id,
+  registered = false,
+  singleTab,
+  header,
+  content,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...props,
+      className: className ? `fx-panel ${className}` : "fx-panel",
+      "data-fx-panel-id": id,
+      "data-panel-registered": registered ? "true" : "false",
+      "data-dock-single-tab": singleTab,
+      "data-fx-slot": `DockPanel:${id}`,
+      children: [
+        header,
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "fx-panel-content",
+            "data-padding": content?.padding ?? "none",
+            "data-scroll": content?.scroll ?? "auto",
+            "data-tone": content?.tone ?? "default",
+            children
+          }
+        )
+      ]
     }
   );
 }
@@ -248,6 +302,7 @@ function ShellSlot({
   return createElement(as, { ...props, "data-fx-slot": name });
 }
 export {
+  PanelSurface,
   ResizeHandle,
   ShellSlot,
   SlotDebugOverlay,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@forgeax/app-shell",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Generic Dock, Panel, Window, and Slot composition primitives",
   "license": "Apache-2.0",
   "type": "module",
-  "sideEffects": ["./dist/resize.css"],
+  "sideEffects": ["./dist/resize.css", "./dist/panel.css"],
   "files": ["dist"],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,12 +21,13 @@
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js"
     },
-    "./resize.css": "./dist/resize.css"
+    "./resize.css": "./dist/resize.css",
+    "./panel.css": "./dist/panel.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 && bun run scripts/copy-resize-css.ts",
+    "build": "tsup src/index.ts src/dock.ts src/react.tsx --format esm --dts --outDir dist && bun run scripts/copy-resize-css.ts && bun run scripts/copy-panel-css.ts",
     "check": "bun run typecheck && bun run test && bun run build",
     "release:preflight": "bun run scripts/release-preflight.ts"
   },