@forgeax/app-shell 0.47.0 → 0.49.0

package/dist/react.d.ts

@@ -154,6 +154,25 @@ interface LiveTabPlacementSource {
 /** Observe one tab's live edge/group placement without owning host identities. */
 declare function useLiveTabPlacement(source: LiveTabPlacementSource): LiveTabPlacement | undefined;
 
+interface TabPinnedStateSource {
+    pinnedIn(groupId: string): string | undefined;
+    subscribe(listener: () => void): () => void;
+}
+/** Observe whether one product-supplied panel identity is pinned in a group. */
+declare function useTabPinnedState(source: TabPinnedStateSource, groupId: string, panelId: string): boolean;
+
+interface DockTabFrameProps extends HTMLAttributes<HTMLDivElement> {
+    /** Caller-owned leading presentation, such as a product icon. */
+    leading?: ReactNode;
+    /** Caller-owned trailing action; App Shell only fixes its slot position. */
+    action?: ReactNode;
+}
+type DockTabActionProps = HTMLAttributes<HTMLDivElement>;
+/** Product-neutral Dock tab frame with stable Dockview-compatible DOM hooks. */
+declare const DockTabFrame: react.ForwardRefExoticComponent<DockTabFrameProps & react.RefAttributes<HTMLDivElement>>;
+/** Product-neutral trailing-action wrapper for a Dock tab frame. */
+declare const DockTabAction: react.ForwardRefExoticComponent<DockTabActionProps & react.RefAttributes<HTMLDivElement>>;
+
 type PanelContentPadding = 'none' | 'sm' | 'md';
 type PanelContentScroll = 'none' | 'auto';
 type PanelContentTone = 'default' | 'surface' | 'tool';
@@ -295,4 +314,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, 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 ThresholdPointerDragFinishReason, type ThresholdPointerDragSession, type ThresholdPointerDragSessionOptions, applyAnchoredResizeDelta, beginAnchoredResize, createPersistentSizeStore, hashSlotHue, installPointerDragSession, installPointerReorderSession, installThresholdPointerDragSession, isSlotDebugEnabled, useDockLayoutControlBinding, useLiveTabPlacement, useLiveTabTitle, useLocalSize, usePersistentSizeStore, useTabCloseInteractions };
+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 };

package/dist/react.js

@@ -1372,22 +1372,136 @@ function useLiveTabPlacement(source) {
   );
 }
 
-// src/panel.tsx
+// src/tab-pinned-state.tsx
+import { useMemo as useMemo3, useSyncExternalStore as useSyncExternalStore4 } from "react";
+function stabilizeTabPinnedStateSource(source, groupId, panelId) {
+  let snapshot = false;
+  try {
+    snapshot = source.pinnedIn(groupId) === panelId;
+  } catch {
+  }
+  const synchronize = () => {
+    let next;
+    try {
+      next = source.pinnedIn(groupId) === panelId;
+    } catch {
+      return false;
+    }
+    if (next === snapshot) return false;
+    snapshot = next;
+    return true;
+  };
+  return {
+    getSnapshot: () => {
+      synchronize();
+      return snapshot;
+    },
+    subscribe: (listener) => {
+      let active = true;
+      const notify = () => {
+        if (!active || !synchronize()) return;
+        try {
+          listener();
+        } catch {
+        }
+      };
+      let dispose = () => {
+      };
+      try {
+        dispose = source.subscribe(notify);
+      } catch {
+        notify();
+        return () => {
+          if (!active) return;
+          active = false;
+        };
+      }
+      notify();
+      return () => {
+        if (!active) return;
+        active = false;
+        try {
+          dispose();
+        } catch {
+        }
+      };
+    }
+  };
+}
+function useTabPinnedState(source, groupId, panelId) {
+  const stable = useMemo3(
+    () => stabilizeTabPinnedStateSource(source, groupId, panelId),
+    [source, groupId, panelId]
+  );
+  return useSyncExternalStore4(
+    stable.subscribe,
+    stable.getSnapshot,
+    stable.getSnapshot
+  );
+}
+
+// src/dock-tab-frame.tsx
+import {
+  forwardRef
+} from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function joinClassName(owned, caller) {
+  return caller ? `${owned} ${caller}` : owned;
+}
+var DockTabFrame = forwardRef(
+  function DockTabFrame2({
+    leading,
+    action,
+    children,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref,
+        className: joinClassName("dv-default-tab", className),
+        children: [
+          leading,
+          /* @__PURE__ */ jsx3("span", { className: "dv-default-tab-content", children }),
+          action
+        ]
+      }
+    );
+  }
+);
+DockTabFrame.displayName = "DockTabFrame";
+var DockTabAction = forwardRef(
+  function DockTabAction2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ...props,
+        ref,
+        className: joinClassName("dv-default-tab-action", className)
+      }
+    );
+  }
+);
+DockTabAction.displayName = "DockTabAction";
+
+// src/panel.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function PanelEmptyState({
   title,
   detail,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "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 })
+        /* @__PURE__ */ jsx4("div", { className: "fx-panel-empty-title", children: title }),
+        detail == null ? null : /* @__PURE__ */ jsx4("div", { className: "fx-panel-empty-detail", children: detail })
       ]
     }
   );
@@ -1402,7 +1516,7 @@ function PanelSurface({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "section",
     {
       ...props,
@@ -1413,7 +1527,7 @@ function PanelSurface({
       "data-fx-slot": `DockPanel:${id}`,
       children: [
         header,
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "div",
           {
             className: "fx-panel-content",
@@ -1447,7 +1561,7 @@ function DetachedPanelBoundary({
 }
 
 // src/detached-surface-frame.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var fill = { position: "fixed", inset: 0 };
 var centeredContent = {
   display: "flex",
@@ -1459,12 +1573,12 @@ function DetachedSurfaceFrame({
   panel = false,
   centered = false
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       className: panel ? "fx-detached-surface fx-detached-panel main-area" : "fx-detached-surface",
       style: fill,
-      children: centered ? /* @__PURE__ */ jsx4("div", { className: "fx-detached-surface-status", style: centeredContent, children }) : children
+      children: centered ? /* @__PURE__ */ jsx5("div", { className: "fx-detached-surface-status", style: centeredContent, children }) : children
     }
   );
 }
@@ -1472,25 +1586,25 @@ function DetachedSurfaceStatus({
   children,
   tone = "neutral"
 }) {
-  return /* @__PURE__ */ jsx4("span", { className: "fx-detached-surface-status-text", "data-tone": tone, children });
+  return /* @__PURE__ */ jsx5("span", { className: "fx-detached-surface-status-text", "data-tone": tone, children });
 }
 
 // src/surface-placeholder.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function SurfacePlaceholder({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx5("div", { className: className ? `surface-placeholder ${className}` : "surface-placeholder", children: /* @__PURE__ */ jsx5("div", { className: "surface-placeholder-title", children: title }) });
+  return /* @__PURE__ */ jsx6("div", { className: className ? `surface-placeholder ${className}` : "surface-placeholder", children: /* @__PURE__ */ jsx6("div", { className: "surface-placeholder-title", children: title }) });
 }
 
 // src/surface-region.tsx
 import {
-  forwardRef
+  forwardRef as forwardRef2
 } from "react";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var joinClassNames = (base, modifier) => modifier ? `${base} ${modifier}` : base;
-var SurfaceRegion = forwardRef(
+var SurfaceRegion = forwardRef2(
   function SurfaceRegion2({
     children,
     overlay,
@@ -1498,15 +1612,15 @@ var SurfaceRegion = forwardRef(
     bodyClassName,
     ...props
   }, ref) {
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3(
       "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 })
+          overlay == null ? null : /* @__PURE__ */ jsx7("div", { className: "fx-surface-region-overlay", children: overlay }),
+          /* @__PURE__ */ jsx7("div", { className: joinClassNames("fx-surface-region-body", bodyClassName), children })
         ]
       }
     );
@@ -1514,7 +1628,7 @@ var SurfaceRegion = forwardRef(
 );
 
 // src/dock-layout-control.ts
-import { useEffect as useEffect4, useMemo as useMemo3, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo4, useSyncExternalStore as useSyncExternalStore5 } from "react";
 function useDockLayoutControlBinding({
   state,
   onToggle,
@@ -1522,24 +1636,24 @@ function useDockLayoutControlBinding({
   closePanel,
   reopenPanel
 }) {
-  const snapshot = useSyncExternalStore4(
+  const snapshot = useSyncExternalStore5(
     state.subscribe,
     state.getSnapshot,
     state.getSnapshot
   );
   useEffect4(() => installDockLayoutControlToggle({ onToggle }, state), [onToggle, state]);
-  const panelControl = useMemo3(() => createDockLayoutPanelControl({
+  const panelControl = useMemo4(() => createDockLayoutPanelControl({
     isOpen: isPanelOpen,
     close: closePanel,
     reopen: reopenPanel
   }), [closePanel, isPanelOpen, reopenPanel]);
-  return useMemo3(() => ({ snapshot, panelControl }), [panelControl, snapshot]);
+  return useMemo4(() => ({ snapshot, panelControl }), [panelControl, snapshot]);
 }
 
 // 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 jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var VIEWPORT_PADDING = 8;
 function FloatingMenu({
   open,
@@ -1598,8 +1712,8 @@ function FloatingMenu({
   }, [onClose, open]);
   if (!open) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ jsxs3(Fragment, { children: [
-      /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx8(
         "div",
         {
           "data-app-shell-floating-menu-backdrop": "",
@@ -1611,7 +1725,7 @@ function FloatingMenu({
           }
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "div",
         {
           ref: menuRef,
@@ -1635,7 +1749,7 @@ function FloatingMenu({
 }
 
 // src/dock-layout-menu.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function DockLayoutMenu({
   state,
   onToggle,
@@ -1656,7 +1770,7 @@ function DockLayoutMenu({
     closePanel,
     reopenPanel
   });
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     FloatingMenu,
     {
       open: snapshot.open,
@@ -1665,7 +1779,7 @@ function DockLayoutMenu({
       align: "end",
       className: "fx-dl-menu",
       children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -1680,16 +1794,16 @@ function DockLayoutMenu({
               }
             },
             children: [
-              resetIcon ? /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: resetIcon }) : null,
+              resetIcon ? /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: resetIcon }) : null,
               resetLabel
             ]
           }
         ),
-        /* @__PURE__ */ jsx8("div", { className: "fx-dl-sep", role: "separator" }),
-        /* @__PURE__ */ jsx8("div", { className: "fx-dl-head", children: sectionLabel }),
-        panels.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "fx-dl-head", "data-app-shell-dock-layout-empty": "", children: emptyLabel }) : panels.map((panel) => {
+        /* @__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) => {
           const isOpen = panelControl.isOpen(panel.id);
-          return /* @__PURE__ */ jsxs4(
+          return /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -1700,8 +1814,8 @@ function DockLayoutMenu({
                 panelControl.toggle(panel.id);
               },
               children: [
-                /* @__PURE__ */ jsx8("span", { className: "fx-dl-check", "aria-hidden": "true", children: isOpen ? "\u2713" : "\uFF0B" }),
-                panel.icon ? /* @__PURE__ */ jsx8("span", { className: "fx-dl-icon", "aria-hidden": "true", children: panel.icon }) : null,
+                /* @__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,
                 panel.title
               ]
             },
@@ -1727,6 +1841,8 @@ export {
   DetachedSurfaceFrame,
   DetachedSurfaceStatus,
   DockLayoutMenu,
+  DockTabAction,
+  DockTabFrame,
   FloatingMenu,
   PanelEmptyState,
   PanelSurface,
@@ -1748,7 +1864,8 @@ export {
   useLiveTabTitle,
   useLocalSize,
   usePersistentSizeStore,
-  useTabCloseInteractions
+  useTabCloseInteractions,
+  useTabPinnedState
 };
 /*! Bundled license information:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeax/app-shell",
-  "version": "0.47.0",
+  "version": "0.49.0",
   "description": "Generic Dock, Panel, Window, and Slot composition primitives",
   "license": "Apache-2.0",
   "type": "module",