react-panel-layout 0.5.2 → 0.6.1

package/src/components/grid/GridLayout.tsx

@@ -0,0 +1,130 @@
+/**
+ * @file Top-level grid layout component that consumes PanelSystemContext core.
+ */
+import * as React from "react";
+import { useIntersectionObserver } from "../../hooks/useIntersectionObserver";
+import type { LayerDefinition, PanelLayoutConfig } from "../../types";
+import { DrawerLayers } from "../window/DrawerLayers";
+import { GridLayerList } from "./GridLayerList";
+import { GridTrackResizeHandle } from "./GridTrackResizeHandle";
+import { PanelSystemProvider, usePanelSystem } from "../../PanelSystemContext";
+import { useGridPlacements } from "../../modules/grid/useGridPlacements";
+import { useGridTracks } from "../../modules/grid/useGridTracks";
+import { useLayerInteractions } from "../../modules/grid/useLayerInteractions";
+import { GridLayoutProvider } from "../../modules/grid/GridLayoutContext";
+
+const gridLayoutBaseStyle: React.CSSProperties = {
+  display: "grid",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden",
+};
+
+const gridLayoutDraggingStyle: React.CSSProperties = {
+  touchAction: "none",
+  WebkitTouchCallout: "none",
+  WebkitUserSelect: "none",
+  userSelect: "none",
+};
+
+const gridLayoutRootLevelStyle: React.CSSProperties = {
+  ...gridLayoutBaseStyle,
+  overflow: "visible",
+  height: "auto",
+  minHeight: "100%",
+};
+
+const resolveGridBaseStyle = (isRootLevel: boolean): React.CSSProperties => {
+  return isRootLevel ? gridLayoutRootLevelStyle : gridLayoutBaseStyle;
+};
+
+export type GridLayoutProps = {
+  config: PanelLayoutConfig;
+  layers: LayerDefinition[];
+  style?: React.CSSProperties;
+  /**
+   * When true, enables browser-native scrolling for scrollable layers.
+   * Use this when GridLayout is at the root level of the application.
+   */
+  root?: boolean;
+};
+
+export const GridLayout: React.FC<GridLayoutProps> = ({ config, layers, style: styleProp, root = false }) => {
+  const gridRef = React.useRef<HTMLDivElement | null>(null);
+  const { isIntersecting } = useIntersectionObserver(gridRef, { threshold: 0 });
+
+  return (
+    <PanelSystemProvider config={config} layers={layers} style={styleProp}>
+      <GridLayoutInner gridRef={gridRef} isIntersecting={isIntersecting} isRoot={root} />
+    </PanelSystemProvider>
+  );
+};
+
+const GridLayoutInner: React.FC<{
+  gridRef: React.RefObject<HTMLDivElement | null>;
+  isIntersecting: boolean;
+  isRoot: boolean;
+}> = ({ gridRef, isIntersecting, isRoot }) => {
+  const { config, style, layers } = usePanelSystem();
+  const { normalizedLayers, visibleLayers, regularLayers, layerById } = useGridPlacements(config, layers.defs);
+  const { columnHandles, rowHandles, gapSizes, gridStyle, handleResize } = useGridTracks(config, style, gridRef);
+  const { providerValue, draggingLayerId, resizingLayerId } = useLayerInteractions({
+    layers: normalizedLayers,
+    layerById,
+    isRootLevel: isRoot,
+  });
+
+  const isDraggingOrResizing = draggingLayerId ? true : Boolean(resizingLayerId);
+  const combinedStyle = React.useMemo(() => {
+    const baseStyle = resolveGridBaseStyle(isRoot);
+    return {
+      ...baseStyle,
+      ...gridStyle,
+      ...(isDraggingOrResizing ? gridLayoutDraggingStyle : {}),
+    };
+  }, [gridStyle, isDraggingOrResizing, isRoot]);
+
+  return (
+    <>
+      <div
+        ref={gridRef}
+        style={combinedStyle}
+        data-dragging={Boolean(draggingLayerId)}
+        data-resizing={Boolean(resizingLayerId)}
+        data-visible={isIntersecting}
+      >
+        <GridLayoutProvider value={providerValue}>
+          <GridLayerList layers={regularLayers} />
+        </GridLayoutProvider>
+
+        {columnHandles.map(({ trackIndex, align, span }) => (
+          <GridTrackResizeHandle
+            key={`col-${trackIndex}:${align}`}
+            direction="col"
+            trackIndex={trackIndex}
+            align={align}
+            gap={gapSizes.columnGap}
+            span={span}
+            onResize={handleResize}
+          />
+        ))}
+
+        {rowHandles.map(({ trackIndex, align, span }) => (
+          <GridTrackResizeHandle
+            key={`row-${trackIndex}:${align}`}
+            direction="row"
+            trackIndex={trackIndex}
+            align={align}
+            gap={gapSizes.rowGap}
+            span={span}
+            onResize={handleResize}
+          />
+        ))}
+      </div>
+
+      <DrawerLayers layers={visibleLayers} />
+    </>
+  );
+};
+
+/* Debug note: Refactored to consume PanelSystemContext core for consistent separation. */

package/src/components/grid/GridTrackResizeHandle.tsx

@@ -0,0 +1,87 @@
+/**
+ * @file Internal renderer for grid resize handles.
+ */
+import * as React from "react";
+import { ResizeHandle } from "../resizer/ResizeHandle";
+import { GRID_HANDLE_THICKNESS } from "../../constants/styles";
+
+type TrackDirection = "row" | "col";
+
+type GridTrackResizeHandleProps = {
+  direction: TrackDirection;
+  trackIndex: number;
+  align: "start" | "end";
+  gap: number;
+  span: { start: number; end: number };
+  onResize: (direction: TrackDirection, index: number, delta: number) => void;
+};
+
+const resizeHandleWrapperBaseStyle: React.CSSProperties = {
+  position: "absolute",
+  pointerEvents: "auto",
+};
+
+export const GridTrackResizeHandle: React.FC<GridTrackResizeHandleProps> = ({
+  direction,
+  trackIndex,
+  align,
+  gap,
+  span,
+  onResize,
+}) => {
+  const resizeDirection = direction === "col" ? "vertical" : "horizontal";
+
+  const handleResize = React.useCallback(
+    (delta: number) => {
+      const signedDelta = align === "start" ? -delta : delta;
+      onResize(direction, trackIndex, signedDelta);
+    },
+    [align, direction, trackIndex, onResize],
+  );
+
+  const placementStyle = React.useMemo<React.CSSProperties>(() => {
+    if (direction === "col") {
+      return {
+        gridColumn: `${trackIndex + 1} / ${trackIndex + 2}`,
+        gridRow: `${span.start} / ${span.end}`,
+      };
+    }
+    return {
+      gridRow: `${trackIndex + 1} / ${trackIndex + 2}`,
+      gridColumn: `${span.start} / ${span.end}`,
+    };
+  }, [direction, trackIndex, span]);
+
+  const wrapperStyle = React.useMemo<React.CSSProperties>(() => {
+    const halfGap = Math.max(0, gap) / 2;
+    const offset = halfGap + GRID_HANDLE_THICKNESS / 2;
+
+    if (direction === "col") {
+      return {
+        ...resizeHandleWrapperBaseStyle,
+        width: GRID_HANDLE_THICKNESS,
+        height: "100%",
+        top: 0,
+        bottom: 0,
+        ...(align === "start" ? { left: -offset } : { right: -offset }),
+      };
+    }
+
+    return {
+      ...resizeHandleWrapperBaseStyle,
+      width: "100%",
+      height: GRID_HANDLE_THICKNESS,
+      left: 0,
+      right: 0,
+      ...(align === "start" ? { top: -offset } : { bottom: -offset }),
+    };
+  }, [align, direction, gap]);
+
+  return (
+    <div data-resizable="true" style={{ ...placementStyle, position: "relative", pointerEvents: "none" }}>
+      <div data-direction={resizeDirection} data-align={align} data-handle="true" style={wrapperStyle}>
+        <ResizeHandle direction={resizeDirection} onResize={handleResize} />
+      </div>
+    </div>
+  );
+};

package/src/components/paneling/FloatingPanelFrame.tsx

@@ -0,0 +1,203 @@
+/**
+ * @file Shared floating panel frame components for reusable overlay styling
+ */
+import * as React from "react";
+import {
+  FLOATING_PANEL_BORDER_RADIUS,
+  FLOATING_PANEL_GAP,
+  FLOATING_PANEL_HEADER_PADDING_Y,
+  FLOATING_PANEL_HEADER_PADDING_X,
+  FLOATING_PANEL_CONTENT_PADDING,
+  FLOATING_PANEL_META_FONT_SIZE,
+  FLOATING_PANEL_CONTROLS_GAP,
+  FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,
+  FLOATING_PANEL_CLOSE_BUTTON_PADDING,
+  FLOATING_PANEL_SURFACE_COLOR,
+  FLOATING_PANEL_SURFACE_2_COLOR,
+  FLOATING_PANEL_BORDER_COLOR,
+  FLOATING_PANEL_MUTED_FG_COLOR,
+  FLOATING_PANEL_SHADOW,
+} from "../../constants/styles";
+
+const shadowWrapperStyle: React.CSSProperties = {
+  borderRadius: FLOATING_PANEL_BORDER_RADIUS,
+  boxShadow: FLOATING_PANEL_SHADOW,
+};
+
+const overflowWrapperStyle: React.CSSProperties = {
+  borderRadius: FLOATING_PANEL_BORDER_RADIUS,
+  overflow: "hidden",
+};
+
+const innerStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: FLOATING_PANEL_BORDER_RADIUS,
+  border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,
+  background: FLOATING_PANEL_SURFACE_COLOR,
+};
+
+const headerStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: FLOATING_PANEL_GAP,
+  padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,
+  borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,
+  background: FLOATING_PANEL_SURFACE_2_COLOR,
+};
+
+const titleStyle: React.CSSProperties = {
+  fontWeight: 600,
+};
+
+const metaStyle: React.CSSProperties = {
+  marginLeft: "auto",
+  color: FLOATING_PANEL_MUTED_FG_COLOR,
+  fontSize: FLOATING_PANEL_META_FONT_SIZE,
+};
+
+const controlsStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: FLOATING_PANEL_CONTROLS_GAP,
+};
+
+const closeButtonStyle: React.CSSProperties = {
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  fontSize: FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,
+  padding: FLOATING_PANEL_CLOSE_BUTTON_PADDING,
+  lineHeight: 1,
+};
+
+const contentStyle: React.CSSProperties = {
+  padding: FLOATING_PANEL_CONTENT_PADDING,
+  overflow: "auto",
+};
+
+export type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+  style?: React.CSSProperties;
+};
+
+export const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(
+  { style: propStyle, children, ...props },
+  ref,
+) {
+  const combinedShadowStyle = React.useMemo(() => ({ ...shadowWrapperStyle, ...propStyle }), [propStyle]);
+
+  const combinedOverflowStyle = React.useMemo(() => {
+    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;
+    const hasHeight = propStyle?.height !== undefined;
+
+    if (!hasCustomBorderRadius && !hasHeight) {
+      return overflowWrapperStyle;
+    }
+
+    const result: React.CSSProperties = { ...overflowWrapperStyle };
+    if (hasCustomBorderRadius) {
+      result.borderRadius = propStyle.borderRadius;
+    }
+    if (hasHeight) {
+      result.height = propStyle.height;
+    }
+    return result;
+  }, [propStyle?.borderRadius, propStyle?.height]);
+
+  const combinedInnerStyle = React.useMemo(() => {
+    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;
+    const hasHeight = propStyle?.height !== undefined;
+
+    if (!hasCustomBorderRadius && !hasHeight) {
+      return innerStyle;
+    }
+
+    const result: React.CSSProperties = { ...innerStyle };
+    if (hasCustomBorderRadius) {
+      result.borderRadius = propStyle.borderRadius;
+    }
+    if (hasHeight) {
+      result.height = propStyle.height;
+    }
+    return result;
+  }, [propStyle?.borderRadius, propStyle?.height]);
+
+  return (
+    <div ref={ref} style={combinedShadowStyle} {...props}>
+      <div style={combinedOverflowStyle}>
+        <div style={combinedInnerStyle}>{children}</div>
+      </div>
+    </div>
+  );
+});
+
+export type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+  style?: React.CSSProperties;
+};
+
+export const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {
+  const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);
+  return <div style={combinedStyle} {...props} />;
+};
+
+export type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "className" | "style"> & {
+  style?: React.CSSProperties;
+};
+
+export const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {
+  const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);
+  return <span style={combinedStyle} {...props} />;
+};
+
+export type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "className" | "style"> & {
+  style?: React.CSSProperties;
+};
+
+export const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {
+  const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);
+  return <span style={combinedStyle} {...props} />;
+};
+
+export type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+  style?: React.CSSProperties;
+};
+
+export const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {
+  const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);
+  return <div style={combinedStyle} {...props} />;
+};
+
+export type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+  style?: React.CSSProperties;
+};
+
+export const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(
+  function FloatingPanelContent({ style: propStyle, ...props }, ref) {
+    const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);
+    return <div ref={ref} style={combinedStyle} {...props} />;
+  },
+);
+
+export type FloatingPanelCloseButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "className" | "style" | "children"
+> & {
+  style?: React.CSSProperties;
+};
+
+export const FloatingPanelCloseButton: React.FC<FloatingPanelCloseButtonProps> = ({ style: propStyle, ...props }) => {
+  const combinedStyle = React.useMemo(() => ({ ...closeButtonStyle, ...propStyle }), [propStyle]);
+  return (
+    <button type="button" style={combinedStyle} {...props}>
+      ×
+    </button>
+  );
+};
+
+FloatingPanelFrame.displayName = "FloatingPanelFrame";
+FloatingPanelHeader.displayName = "FloatingPanelHeader";
+FloatingPanelTitle.displayName = "FloatingPanelTitle";
+FloatingPanelMeta.displayName = "FloatingPanelMeta";
+FloatingPanelControls.displayName = "FloatingPanelControls";
+FloatingPanelContent.displayName = "FloatingPanelContent";
+FloatingPanelCloseButton.displayName = "FloatingPanelCloseButton";

package/src/components/panels/DropSuggestOverlay.tsx

@@ -0,0 +1,131 @@
+/**
+ * @file Overlay renderer and helpers for drop suggestion zones.
+ */
+import * as React from "react";
+import type { DropZone } from "../../modules/panels/state/types";
+import {
+  DROP_SUGGEST_Z_INDEX,
+  DROP_SUGGEST_BORDER_WIDTH,
+  DROP_SUGGEST_BORDER_RADIUS,
+  DROP_SUGGEST_BORDER_COLOR,
+  DROP_SUGGEST_BG_COLOR,
+  DROP_SUGGEST_PADDING_PX,
+} from "../../constants/styles";
+import { clampNumber } from "../../utils/math";
+import { matrix } from "../../utils/CSSMatrix";
+
+const overlayStyle: React.CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  pointerEvents: "none",
+  zIndex: DROP_SUGGEST_Z_INDEX,
+};
+
+const suggestRectBaseStyle: React.CSSProperties = {
+  position: "absolute",
+  border: `${DROP_SUGGEST_BORDER_WIDTH} dashed ${DROP_SUGGEST_BORDER_COLOR}`,
+  background: DROP_SUGGEST_BG_COLOR,
+  borderRadius: DROP_SUGGEST_BORDER_RADIUS,
+  transformOrigin: "top left",
+};
+
+export type SuggestInfo = {
+  rect: DOMRectReadOnly;
+  zone: DropZone;
+};
+
+export type DropSuggestOverlayProps = {
+  suggest: SuggestInfo | null;
+};
+
+const safeRatio = (value: number, base: number): number => {
+  if (base <= 0) {
+    return 0;
+  }
+  return clampNumber(value / base, 0);
+};
+
+const buildZoneTransform = (rect: DOMRectReadOnly, zone: DropZone, pad: number): string => {
+  const { width, height } = rect;
+  const halfPad = pad / 2;
+  const widthBase = width > 0 ? width : 1;
+  const heightBase = height > 0 ? height : 1;
+
+  const center = {
+    translateX: pad,
+    translateY: pad,
+    scaleX: safeRatio(clampNumber(width - pad * 2, 0), widthBase),
+    scaleY: safeRatio(clampNumber(height - pad * 2, 0), heightBase),
+  };
+
+  const left = {
+    translateX: pad,
+    translateY: pad,
+    scaleX: safeRatio(clampNumber(width / 2 - pad * 1.5, 0), widthBase),
+    scaleY: safeRatio(clampNumber(height - pad * 2, 0), heightBase),
+  };
+
+  const right = {
+    translateX: width / 2 + halfPad,
+    translateY: pad,
+    scaleX: safeRatio(clampNumber(width / 2 - pad * 1.5, 0), widthBase),
+    scaleY: safeRatio(clampNumber(height - pad * 2, 0), heightBase),
+  };
+
+  const top = {
+    translateX: pad,
+    translateY: pad,
+    scaleX: safeRatio(clampNumber(width - pad * 2, 0), widthBase),
+    scaleY: safeRatio(clampNumber(height / 2 - pad * 1.5, 0), heightBase),
+  };
+
+  const bottom = {
+    translateX: pad,
+    translateY: height / 2 + halfPad,
+    scaleX: safeRatio(clampNumber(width - pad * 2, 0), widthBase),
+    scaleY: safeRatio(clampNumber(height / 2 - pad * 1.5, 0), heightBase),
+  };
+
+  const zoneTransforms: Record<DropZone, typeof center> = {
+    center,
+    left,
+    right,
+    top,
+    bottom,
+  };
+
+  const { translateX, translateY, scaleX, scaleY } = zoneTransforms[zone];
+  return matrix()
+    .translate(translateX, translateY, 0)
+    .scale(scaleX, scaleY, 1)
+    .toCSS();
+};
+
+const buildSuggestStyle = (rect: DOMRectReadOnly, zone: DropZone): React.CSSProperties => {
+  const pad = DROP_SUGGEST_PADDING_PX;
+  return {
+    ...suggestRectBaseStyle,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    transform: buildZoneTransform(rect, zone, pad),
+  };
+};
+
+export const DropSuggestOverlay: React.FC<DropSuggestOverlayProps> = ({ suggest }) => {
+  if (!suggest) {
+    return null;
+  }
+
+  const { rect, zone } = suggest;
+  const style = buildSuggestStyle(rect, zone);
+
+  return (
+    <div style={overlayStyle}>
+      <div style={style} />
+    </div>
+  );
+};
+
+// pickDropZone moved to modules/panels/runtime/dnd

package/src/components/panels/PanelGroupView.tsx

@@ -0,0 +1,112 @@
+/**
+ * @file Group view rendering for PanelSystem (tabbar + active content).
+ */
+import * as React from "react";
+import type { PanelGroupRenderProps } from "../../modules/panels/state/types";
+
+export type PanelGroupViewProps = PanelGroupRenderProps & {
+  /** Custom component for the group container */
+  component?: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }>;
+  /** Custom element for the group container */
+  element?: React.ReactElement;
+  /** Custom component for the content container */
+  contentComponent?: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }>;
+  /** Custom element for the content container */
+  contentElement?: React.ReactElement;
+};
+
+const groupStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  height: "100%",
+};
+
+const contentStyle: React.CSSProperties = {
+  flex: "1 1 auto",
+  minWidth: 0,
+  minHeight: 0,
+  position: "relative",
+  overflow: "hidden",
+};
+
+function createContentNode(
+  contentElement: React.ReactElement | undefined,
+  ContentComponent: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }> | undefined,
+  contentProps: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> },
+  content: React.ReactNode
+): React.ReactNode {
+  if (contentElement) {
+    return React.cloneElement(contentElement, contentProps, content);
+  }
+  if (ContentComponent) {
+    return <ContentComponent {...contentProps}>{content}</ContentComponent>;
+  }
+  return <div {...contentProps}>{content}</div>;
+}
+
+function createGroupNode(
+  element: React.ReactElement | undefined,
+  GroupComponent: React.ComponentType<React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }> | undefined,
+  groupProps: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> },
+  groupContent: React.ReactNode
+): React.ReactNode {
+  if (element) {
+    return React.cloneElement(element, groupProps, groupContent);
+  }
+  if (GroupComponent) {
+    return <GroupComponent {...groupProps}>{groupContent}</GroupComponent>;
+  }
+  return <div {...groupProps}>{groupContent}</div>;
+}
+
+const RawPanelGroupView: React.FC<PanelGroupViewProps> = ({
+  group,
+  tabbar,
+  content,
+  onContentPointerDown,
+  groupRef,
+  contentRef,
+  component: GroupComponent,
+  element,
+  contentComponent: ContentComponent,
+  contentElement
+}) => {
+  const groupProps = {
+    ref: groupRef,
+    style: groupStyle,
+    "data-group-id": group.id,
+  };
+
+  const contentProps = {
+    ref: contentRef,
+    style: contentStyle,
+    "data-dnd-zone": "content",
+    onPointerDown: onContentPointerDown,
+  };
+
+  const contentNode = createContentNode(contentElement, ContentComponent, contentProps, content);
+
+  const groupContent = (
+    <>
+      {tabbar}
+      {contentNode}
+    </>
+  );
+
+  return createGroupNode(element, GroupComponent, groupProps, groupContent);
+};
+
+export const PanelGroupView = React.memo(RawPanelGroupView, (prev, next) => {
+  if (prev.group.id !== next.group.id) {
+    return false;
+  }
+  if (prev.group.activeTabId !== next.group.activeTabId) {
+    return false;
+  }
+  if (prev.group.tabs.length !== next.group.tabs.length) {
+    return false;
+  }
+  return prev.group.tabs === next.group.tabs;
+});
+PanelGroupView.displayName = "PanelGroupView";

package/src/components/pivot/PivotLayer.tsx

@@ -0,0 +1,27 @@
+/**
+ * @file PivotLayer component for rendering pivot behavior within GridLayout.
+ * This component bridges the usePivot hook with the GridLayout layer system.
+ */
+import * as React from "react";
+import type { PivotBehavior } from "../../types";
+import { usePivot } from "../../modules/pivot";
+
+export type PivotLayerProps = {
+  pivot: PivotBehavior;
+};
+
+/**
+ * Internal component that renders pivot content using React.Activity.
+ * Used by GridLayerList when a layer has pivot behavior.
+ */
+export const PivotLayer: React.FC<PivotLayerProps> = ({ pivot }) => {
+  const { Outlet } = usePivot({
+    items: pivot.items,
+    activeId: pivot.activeId,
+    defaultActiveId: pivot.defaultActiveId,
+    onActiveChange: pivot.onActiveChange,
+    transitionMode: pivot.transitionMode,
+  });
+
+  return <Outlet />;
+};