@forgeax/app-shell 0.19.0 → 0.21.0

package/dist/panel.css

@@ -39,3 +39,28 @@
 .fx-panel-content[data-tone="tool"] {
   background: var(--color-background-base, #191919);
 }
+
+.fx-panel-empty {
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 16px;
+  color: var(--color-text-tertiary, #778);
+  text-align: center;
+}
+
+.fx-panel-empty-title {
+  color: var(--color-text-secondary, #aab);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.fx-panel-empty-detail {
+  font-family: var(--font-mono, monospace);
+  font-size: 11px;
+  opacity: 0.72;
+}

package/dist/react.d.ts

@@ -37,6 +37,12 @@ interface PanelSurfaceProps extends Omit<HTMLAttributes<HTMLElement>, 'children'
     readonly content?: PanelContentPolicy;
     readonly children?: ReactNode;
 }
+interface PanelEmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    readonly title: ReactNode;
+    readonly detail?: ReactNode;
+}
+/** Product-neutral empty panel presentation with caller-owned content. */
+declare function PanelEmptyState({ title, detail, className, ...props }: PanelEmptyStateProps): ReactElement;
 /** Product-neutral panel section and content presentation. */
 declare function PanelSurface({ id, registered, singleTab, header, content, children, className, ...props }: PanelSurfaceProps): ReactElement;
 
@@ -74,6 +80,16 @@ interface SurfacePlaceholderProps {
 /** Product-neutral empty renderer placeholder with stable shell hooks. */
 declare function SurfacePlaceholder({ title, className, }: SurfacePlaceholderProps): ReactElement;
 
+interface SurfaceRegionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children: ReactNode;
+    /** Caller-owned content layered outside the fill body. */
+    overlay?: ReactNode;
+    /** Optional caller-owned modifier for the fill body. */
+    bodyClassName?: string;
+}
+/** Product-neutral full-size surface region with an explicit fill body. */
+declare const SurfaceRegion: react.ForwardRefExoticComponent<SurfaceRegionProps & react.RefAttributes<HTMLDivElement>>;
+
 type ShellSlotElement = 'aside' | 'div' | 'main' | 'section';
 interface ShellSlotProps extends HTMLAttributes<HTMLElement> {
     as?: ShellSlotElement;
@@ -82,4 +98,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 { DetachedPanelBoundary, type DetachedPanelBoundaryProps, DetachedSurfaceFrame, type DetachedSurfaceFrameProps, DetachedSurfaceStatus, type DetachedSurfaceStatusProps, type DetachedSurfaceStatusTone, type PanelContentPadding, type PanelContentPolicy, type PanelContentScroll, type PanelContentTone, PanelSurface, type PanelSurfaceProps, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, hashSlotHue, isSlotDebugEnabled, useLocalSize };
+export { DetachedPanelBoundary, type DetachedPanelBoundaryProps, DetachedSurfaceFrame, type DetachedSurfaceFrameProps, DetachedSurfaceStatus, type DetachedSurfaceStatusProps, type DetachedSurfaceStatusTone, type PanelContentPadding, type PanelContentPolicy, type PanelContentScroll, type PanelContentTone, PanelEmptyState, type PanelEmptyStateProps, PanelSurface, type PanelSurfaceProps, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, SurfaceRegion, type SurfaceRegionProps, hashSlotHue, isSlotDebugEnabled, useLocalSize };

package/dist/react.js

@@ -261,6 +261,24 @@ function ResizeHandle({
 
 // src/panel.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function PanelEmptyState({
+  title,
+  detail,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: className ? `fx-panel-empty ${className}` : "fx-panel-empty",
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "fx-panel-empty-title", children: title }),
+        detail == null ? null : /* @__PURE__ */ jsx3("div", { className: "fx-panel-empty-detail", children: detail })
+      ]
+    }
+  );
+}
 function PanelSurface({
   id,
   registered = false,
@@ -353,6 +371,35 @@ function SurfacePlaceholder({
   return /* @__PURE__ */ jsx5("div", { className: className ? `surface-placeholder ${className}` : "surface-placeholder", children: /* @__PURE__ */ jsx5("div", { className: "surface-placeholder-title", children: title }) });
 }
 
+// src/surface-region.tsx
+import {
+  forwardRef
+} from "react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var joinClassNames = (base, modifier) => modifier ? `${base} ${modifier}` : base;
+var SurfaceRegion = forwardRef(
+  function SurfaceRegion2({
+    children,
+    overlay,
+    className,
+    bodyClassName,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ...props,
+        ref,
+        className: joinClassNames("fx-surface-region", className),
+        children: [
+          overlay == null ? null : /* @__PURE__ */ jsx6("div", { className: "fx-surface-region-overlay", children: overlay }),
+          /* @__PURE__ */ jsx6("div", { className: joinClassNames("fx-surface-region-body", bodyClassName), children })
+        ]
+      }
+    );
+  }
+);
+
 // src/react.tsx
 function ShellSlot({
   as = "div",
@@ -365,11 +412,13 @@ export {
   DetachedPanelBoundary,
   DetachedSurfaceFrame,
   DetachedSurfaceStatus,
+  PanelEmptyState,
   PanelSurface,
   ResizeHandle,
   ShellSlot,
   SlotDebugOverlay,
   SurfacePlaceholder,
+  SurfaceRegion,
   hashSlotHue,
   isSlotDebugEnabled,
   useLocalSize

package/dist/surface.css

@@ -0,0 +1,19 @@
+.fx-surface-region {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.fx-surface-region-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.fx-surface-region-overlay {
+  display: contents;
+}

package/package.json

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