@forgeax/app-shell 0.49.0 → 0.51.0

package/dist/dock-tab.css

@@ -0,0 +1,35 @@
+.fx-dock-tab-status-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  height: 100%;
+  font-size: 11px;
+  line-height: 1;
+}
+
+.fx-dock-tab-status-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 100%;
+  font-variant-numeric: tabular-nums;
+}
+
+.fx-dock-tab-status-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 11px;
+  height: 11px;
+  font-size: 11px;
+  line-height: 11px;
+  transform: translateY(1.5px);
+}
+
+.fx-dock-tab-status-value {
+  display: inline-flex;
+  align-items: center;
+  height: 11px;
+  line-height: 11px;
+}

package/dist/react.d.ts

@@ -173,6 +173,24 @@ declare const DockTabFrame: react.ForwardRefExoticComponent<DockTabFrameProps &
 /** Product-neutral trailing-action wrapper for a Dock tab frame. */
 declare const DockTabAction: react.ForwardRefExoticComponent<DockTabActionProps & react.RefAttributes<HTMLDivElement>>;
 
+type DockTabStatusTone = 'neutral' | 'error' | 'warning';
+interface DockTabStatusSummaryItem {
+    id: string;
+    icon?: ReactNode;
+    tone?: DockTabStatusTone;
+    value: ReactNode;
+}
+interface DockTabStatusSummaryProps extends HTMLAttributes<HTMLSpanElement> {
+    items: readonly DockTabStatusSummaryItem[];
+}
+/**
+ * Product-neutral status-count presentation for a Dock tab.
+ *
+ * The caller owns the status source, labels, visibility policy, and product
+ * styling. App Shell only owns stable DOM hooks and item ordering.
+ */
+declare const DockTabStatusSummary: react.ForwardRefExoticComponent<DockTabStatusSummaryProps & react.RefAttributes<HTMLSpanElement>>;
+
 type PanelContentPadding = 'none' | 'sm' | 'md';
 type PanelContentScroll = 'none' | 'auto';
 type PanelContentTone = 'default' | 'surface' | 'tool';
@@ -314,4 +332,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 { type AnchoredResizeDirection, AnchoredResizeHandle, type AnchoredResizeHandleProps, type AnchoredResizeSession, DetachedPanelBoundary, type DetachedPanelBoundaryProps, DetachedSurfaceFrame, type DetachedSurfaceFrameProps, DetachedSurfaceStatus, type DetachedSurfaceStatusProps, type DetachedSurfaceStatusTone, type DockLayoutControlBinding, type DockLayoutControlBindingOptions, DockLayoutMenu, type DockLayoutMenuPanel, type DockLayoutMenuProps, DockTabAction, type DockTabActionProps, DockTabFrame, type DockTabFrameProps, FloatingMenu, type FloatingMenuAnchor, type FloatingMenuPoint, type FloatingMenuProps, type LiveTabPlacement, type LiveTabPlacementSource, type LiveTabTitleSource, type PanelContentPadding, type PanelContentPolicy, type PanelContentScroll, type PanelContentTone, PanelEmptyState, type PanelEmptyStateProps, PanelSurface, type PanelSurfaceProps, type PersistentSizeStorage, type PersistentSizeStore, type PersistentSizeStoreOptions, type PersistentSizeUpdate, type PointerDragFinishReason, type PointerDragSessionOptions, type PointerReorderFinishReason, type PointerReorderSession, type PointerReorderSessionOptions, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, SurfaceRegion, type SurfaceRegionProps, type TabCloseInteractions, type TabCloseInteractionsOptions, type TabPinnedStateSource, type ThresholdPointerDragFinishReason, type ThresholdPointerDragSession, type ThresholdPointerDragSessionOptions, applyAnchoredResizeDelta, beginAnchoredResize, createPersistentSizeStore, hashSlotHue, installPointerDragSession, installPointerReorderSession, installThresholdPointerDragSession, isSlotDebugEnabled, useDockLayoutControlBinding, useLiveTabPlacement, useLiveTabTitle, useLocalSize, usePersistentSizeStore, useTabCloseInteractions, useTabPinnedState };
+export { type AnchoredResizeDirection, AnchoredResizeHandle, type AnchoredResizeHandleProps, type AnchoredResizeSession, DetachedPanelBoundary, type DetachedPanelBoundaryProps, DetachedSurfaceFrame, type DetachedSurfaceFrameProps, DetachedSurfaceStatus, type DetachedSurfaceStatusProps, type DetachedSurfaceStatusTone, type DockLayoutControlBinding, type DockLayoutControlBindingOptions, DockLayoutMenu, type DockLayoutMenuPanel, type DockLayoutMenuProps, DockTabAction, type DockTabActionProps, DockTabFrame, type DockTabFrameProps, DockTabStatusSummary, type DockTabStatusSummaryItem, type DockTabStatusSummaryProps, type DockTabStatusTone, FloatingMenu, type FloatingMenuAnchor, type FloatingMenuPoint, type FloatingMenuProps, type LiveTabPlacement, type LiveTabPlacementSource, type LiveTabTitleSource, type PanelContentPadding, type PanelContentPolicy, type PanelContentScroll, type PanelContentTone, PanelEmptyState, type PanelEmptyStateProps, PanelSurface, type PanelSurfaceProps, type PersistentSizeStorage, type PersistentSizeStore, type PersistentSizeStoreOptions, type PersistentSizeUpdate, type PointerDragFinishReason, type PointerDragSessionOptions, type PointerReorderFinishReason, type PointerReorderSession, type PointerReorderSessionOptions, ResizeHandle, type ResizeHandleProps, ShellSlot, type ShellSlotElement, type ShellSlotProps, SlotDebugOverlay, SurfacePlaceholder, type SurfacePlaceholderProps, SurfaceRegion, type SurfaceRegionProps, type TabCloseInteractions, type TabCloseInteractionsOptions, type TabPinnedStateSource, type ThresholdPointerDragFinishReason, type ThresholdPointerDragSession, type ThresholdPointerDragSessionOptions, applyAnchoredResizeDelta, beginAnchoredResize, createPersistentSizeStore, hashSlotHue, installPointerDragSession, installPointerReorderSession, installThresholdPointerDragSession, isSlotDebugEnabled, useDockLayoutControlBinding, useLiveTabPlacement, useLiveTabTitle, useLocalSize, usePersistentSizeStore, useTabCloseInteractions, useTabPinnedState };

package/dist/react.js

@@ -1486,22 +1486,54 @@ var DockTabAction = forwardRef(
 );
 DockTabAction.displayName = "DockTabAction";
 
-// src/panel.tsx
+// src/dock-tab-status-summary.tsx
+import {
+  forwardRef as forwardRef2
+} from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var DockTabStatusSummary = forwardRef2(function DockTabStatusSummary2({ className, items, ...props }, ref) {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      ref,
+      className: [
+        "fx-dock-tab-status-summary",
+        className
+      ].filter(Boolean).join(" "),
+      ...props,
+      children: items.map(({ id, icon, tone = "neutral", value }) => /* @__PURE__ */ jsxs2(
+        "span",
+        {
+          className: `fx-dock-tab-status-item fx-dock-tab-status-item--${tone}`,
+          "data-status-id": id,
+          children: [
+            icon !== void 0 && /* @__PURE__ */ jsx4("span", { className: "fx-dock-tab-status-icon", "aria-hidden": true, children: icon }),
+            /* @__PURE__ */ jsx4("span", { className: "fx-dock-tab-status-value", children: value })
+          ]
+        },
+        id
+      ))
+    }
+  );
+});
+DockTabStatusSummary.displayName = "DockTabStatusSummary";
+
+// src/panel.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function PanelEmptyState({
   title,
   detail,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ...props,
       className: className ? `fx-panel-empty ${className}` : "fx-panel-empty",
       children: [
-        /* @__PURE__ */ jsx4("div", { className: "fx-panel-empty-title", children: title }),
-        detail == null ? null : /* @__PURE__ */ jsx4("div", { className: "fx-panel-empty-detail", children: detail })
+        /* @__PURE__ */ jsx5("div", { className: "fx-panel-empty-title", children: title }),
+        detail == null ? null : /* @__PURE__ */ jsx5("div", { className: "fx-panel-empty-detail", children: detail })
       ]
     }
   );
@@ -1516,7 +1548,7 @@ function PanelSurface({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "section",
     {
       ...props,
@@ -1527,7 +1559,7 @@ function PanelSurface({
       "data-fx-slot": `DockPanel:${id}`,
       children: [
         header,
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: "fx-panel-content",
@@ -1561,7 +1593,7 @@ function DetachedPanelBoundary({
 }
 
 // src/detached-surface-frame.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var fill = { position: "fixed", inset: 0 };
 var centeredContent = {
   display: "flex",
@@ -1573,12 +1605,12 @@ function DetachedSurfaceFrame({
   panel = false,
   centered = false
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: panel ? "fx-detached-surface fx-detached-panel main-area" : "fx-detached-surface",
       style: fill,
-      children: centered ? /* @__PURE__ */ jsx5("div", { className: "fx-detached-surface-status", style: centeredContent, children }) : children
+      children: centered ? /* @__PURE__ */ jsx6("div", { className: "fx-detached-surface-status", style: centeredContent, children }) : children
     }
   );
 }
@@ -1586,25 +1618,25 @@ function DetachedSurfaceStatus({
   children,
   tone = "neutral"
 }) {
-  return /* @__PURE__ */ jsx5("span", { className: "fx-detached-surface-status-text", "data-tone": tone, children });
+  return /* @__PURE__ */ jsx6("span", { className: "fx-detached-surface-status-text", "data-tone": tone, children });
 }
 
 // src/surface-placeholder.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function SurfacePlaceholder({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx6("div", { className: className ? `surface-placeholder ${className}` : "surface-placeholder", children: /* @__PURE__ */ jsx6("div", { className: "surface-placeholder-title", children: title }) });
+  return /* @__PURE__ */ jsx7("div", { className: className ? `surface-placeholder ${className}` : "surface-placeholder", children: /* @__PURE__ */ jsx7("div", { className: "surface-placeholder-title", children: title }) });
 }
 
 // src/surface-region.tsx
 import {
-  forwardRef as forwardRef2
+  forwardRef as forwardRef3
 } from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var joinClassNames = (base, modifier) => modifier ? `${base} ${modifier}` : base;
-var SurfaceRegion = forwardRef2(
+var SurfaceRegion = forwardRef3(
   function SurfaceRegion2({
     children,
     overlay,
@@ -1612,15 +1644,15 @@ var SurfaceRegion = forwardRef2(
     bodyClassName,
     ...props
   }, ref) {
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         ...props,
         ref,
         className: joinClassNames("fx-surface-region", className),
         children: [
-          overlay == null ? null : /* @__PURE__ */ jsx7("div", { className: "fx-surface-region-overlay", children: overlay }),
-          /* @__PURE__ */ jsx7("div", { className: joinClassNames("fx-surface-region-body", bodyClassName), children })
+          overlay == null ? null : /* @__PURE__ */ jsx8("div", { className: "fx-surface-region-overlay", children: overlay }),
+          /* @__PURE__ */ jsx8("div", { className: joinClassNames("fx-surface-region-body", bodyClassName), children })
         ]
       }
     );
@@ -1653,7 +1685,7 @@ function useDockLayoutControlBinding({
 // src/floating-menu.tsx
 var import_react_dom = __toESM(require_react_dom(), 1);
 import { useEffect as useEffect5, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
-import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var VIEWPORT_PADDING = 8;
 function FloatingMenu({
   open,
@@ -1712,8 +1744,8 @@ function FloatingMenu({
   }, [onClose, open]);
   if (!open) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx9(
         "div",
         {
           "data-app-shell-floating-menu-backdrop": "",
@@ -1725,7 +1757,7 @@ function FloatingMenu({
           }
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         "div",
         {
           ref: menuRef,
@@ -1749,7 +1781,7 @@ function FloatingMenu({
 }
 
 // src/dock-layout-menu.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function DockLayoutMenu({
   state,
   onToggle,
@@ -1770,7 +1802,7 @@ function DockLayoutMenu({
     closePanel,
     reopenPanel
   });
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     FloatingMenu,
     {
       open: snapshot.open,
@@ -1779,7 +1811,7 @@ function DockLayoutMenu({
       align: "end",
       className: "fx-dl-menu",
       children: [
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "button",
           {
             type: "button",
@@ -1794,16 +1826,16 @@ function DockLayoutMenu({
               }
             },
             children: [
-              resetIcon ? /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: resetIcon }) : null,
+              resetIcon ? /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", children: resetIcon }) : null,
               resetLabel
             ]
           }
         ),
-        /* @__PURE__ */ jsx9("div", { className: "fx-dl-sep", role: "separator" }),
-        /* @__PURE__ */ jsx9("div", { className: "fx-dl-head", children: sectionLabel }),
-        panels.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "fx-dl-head", "data-app-shell-dock-layout-empty": "", children: emptyLabel }) : panels.map((panel) => {
+        /* @__PURE__ */ jsx10("div", { className: "fx-dl-sep", role: "separator" }),
+        /* @__PURE__ */ jsx10("div", { className: "fx-dl-head", children: sectionLabel }),
+        panels.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "fx-dl-head", "data-app-shell-dock-layout-empty": "", children: emptyLabel }) : panels.map((panel) => {
           const isOpen = panelControl.isOpen(panel.id);
-          return /* @__PURE__ */ jsxs5(
+          return /* @__PURE__ */ jsxs6(
             "button",
             {
               type: "button",
@@ -1814,8 +1846,8 @@ function DockLayoutMenu({
                 panelControl.toggle(panel.id);
               },
               children: [
-                /* @__PURE__ */ jsx9("span", { className: "fx-dl-check", "aria-hidden": "true", children: isOpen ? "\u2713" : "\uFF0B" }),
-                panel.icon ? /* @__PURE__ */ jsx9("span", { className: "fx-dl-icon", "aria-hidden": "true", children: panel.icon }) : null,
+                /* @__PURE__ */ jsx10("span", { className: "fx-dl-check", "aria-hidden": "true", children: isOpen ? "\u2713" : "\uFF0B" }),
+                panel.icon ? /* @__PURE__ */ jsx10("span", { className: "fx-dl-icon", "aria-hidden": "true", children: panel.icon }) : null,
                 panel.title
               ]
             },
@@ -1843,6 +1875,7 @@ export {
   DockLayoutMenu,
   DockTabAction,
   DockTabFrame,
+  DockTabStatusSummary,
   FloatingMenu,
   PanelEmptyState,
   PanelSurface,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@forgeax/app-shell",
-  "version": "0.49.0",
+  "version": "0.51.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", "./dist/surface.css"],
+  "sideEffects": ["./dist/resize.css", "./dist/panel.css", "./dist/detached.css", "./dist/surface.css", "./dist/dock-tab.css"],
   "files": ["dist"],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,12 +28,13 @@
     "./resize.css": "./dist/resize.css",
     "./panel.css": "./dist/panel.css",
     "./detached.css": "./dist/detached.css",
-    "./surface.css": "./dist/surface.css"
+    "./surface.css": "./dist/surface.css",
+    "./dock-tab.css": "./dist/dock-tab.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 && bun run scripts/copy-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 && bun run scripts/copy-dock-tab-css.ts",
     "check": "bun run typecheck && bun run test && bun run build",
     "release:preflight": "bun run scripts/release-preflight.ts"
   },