@forgeax/app-shell 0.7.0 → 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;
@@ -20,6 +20,25 @@ interface ResizeHandleProps {
 }
 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> {
     as?: ShellSlotElement;
@@ -28,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

@@ -255,6 +255,44 @@ function ResizeHandle({
   );
 }
 
+// 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
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/react.tsx
 function ShellSlot({
   as = "div",
@@ -264,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.7.0",
+  "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"
   },