react-panel-layout 0.4.2 → 0.5.0

package/dist/modules/grid/GridLayoutContext.d.ts

@@ -27,6 +27,11 @@ export type GridLayoutContextValue = {
     handleLayerPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
     getLayerRenderState: (layer: LayerDefinition) => GridLayerRenderState;
     getLayerHandleProps: (layerId: string) => GridLayerHandleProps;
+    /**
+     * Whether the GridLayout is mounted at root level.
+     * When true, scrollable layers should delegate to browser's native scroll.
+     */
+    isRootLevel: boolean;
 };
 export declare const GridLayoutProvider: React.FC<React.PropsWithChildren<{
     value: GridLayoutContextValue;

package/dist/modules/grid/resizeHandles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file Resize handle configuration computation for grid tracks.
+ */
+import type { GridTrack } from "../../types";
+export type TrackHandleConfig = {
+    trackIndex: number;
+    align: "start" | "end";
+    span: {
+        start: number;
+        end: number;
+    };
+};
+export declare const computeColumnResizeHandles: (tracks: GridTrack[], areas: string[][]) => TrackHandleConfig[];
+export declare const computeRowResizeHandles: (tracks: GridTrack[], areas: string[][]) => TrackHandleConfig[];

package/dist/modules/grid/trackUtils.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file Grid track sizing utilities.
+ */
+import type * as React from "react";
+import type { GridTrack } from "../../types";
+import { type GridDirection, type ParsedGap } from "../../utils/css";
+export type TrackDirection = GridDirection;
+export declare const createTrackKey: (direction: TrackDirection, index: number) => string;
+export declare const getTrackSize: (track: GridTrack, trackSizes: Record<string, number>, direction: TrackDirection, index: number) => string;
+export declare const buildTrackTemplateString: (tracks: GridTrack[], trackSizes: Record<string, number>, direction: TrackDirection) => string;
+export declare const extractInitialTrackSizes: (tracks: GridTrack[], direction: TrackDirection) => Record<string, number>;
+export type ResolveTrackSizeParams = {
+    trackSizes: Record<string, number>;
+    track: GridTrack;
+    direction: TrackDirection;
+    trackIndex: number;
+    containerRef: React.RefObject<HTMLElement | null> | undefined;
+};
+export declare const resolveCurrentTrackSize: ({ trackSizes, track, direction, trackIndex, containerRef, }: ResolveTrackSizeParams) => number;
+export type EffectiveMaxSizeParams = {
+    track: GridTrack;
+    tracks: GridTrack[];
+    trackIndex: number;
+    direction: TrackDirection;
+    containerRef: React.RefObject<HTMLElement | null> | undefined;
+    gapSizes: ParsedGap;
+};
+export declare const calculateEffectiveMaxSize: ({ track, tracks, trackIndex, direction, containerRef, gapSizes, }: EffectiveMaxSizeParams) => number | undefined;
+export declare const applyTrackConstraints: (size: number, minSize?: number, maxSize?: number) => number;

package/dist/modules/grid/useGridTracks.d.ts

@@ -3,24 +3,15 @@
  */
 import * as React from "react";
 import type { PanelLayoutConfig } from "../../types";
-export type TrackHandleConfig = {
-    trackIndex: number;
-    align: "start" | "end";
-    span: {
-        start: number;
-        end: number;
-    };
-};
-type ParsedGap = {
-    rowGap: number;
-    columnGap: number;
-};
-type TrackDirection = "row" | "col";
-export declare const useGridTracks: (config: PanelLayoutConfig, styleProp?: React.CSSProperties) => {
+import { type ParsedGap } from "../../utils/css";
+import { type TrackDirection } from "./trackUtils";
+import { type TrackHandleConfig } from "./resizeHandles";
+export type { TrackHandleConfig } from "./resizeHandles";
+export type { TrackDirection } from "./trackUtils";
+export declare const useGridTracks: (config: PanelLayoutConfig, styleProp?: React.CSSProperties, containerRef?: React.RefObject<HTMLElement | null>) => {
     columnHandles: TrackHandleConfig[];
     rowHandles: TrackHandleConfig[];
     gapSizes: ParsedGap;
     gridStyle: React.CSSProperties;
     handleResize: (direction: TrackDirection, trackIndex: number, delta: number) => void;
 };
-export {};

package/dist/modules/grid/useLayerInteractions.d.ts

@@ -3,8 +3,9 @@ import type { GridLayoutContextValue } from "./GridLayoutContext";
 type UseLayerInteractionsArgs = {
     layers: LayerDefinition[];
     layerById: Map<string, LayerDefinition>;
+    isRootLevel: boolean;
 };
-export declare const useLayerInteractions: ({ layers, layerById, }: UseLayerInteractionsArgs) => {
+export declare const useLayerInteractions: ({ layers, layerById, isRootLevel, }: UseLayerInteractionsArgs) => {
     providerValue: GridLayoutContextValue;
     draggingLayerId: string | null;
     resizingLayerId: string | null;

package/dist/modules/window/useFloatingState.d.ts

@@ -0,0 +1,9 @@
+import type { LayerDefinition, WindowPosition, WindowSize } from "../../types";
+export declare const useFloatingState: (layers: LayerDefinition[]) => {
+    getPosition: (layerId: string) => WindowPosition;
+    getSize: (layerId: string) => WindowSize;
+    getZIndex: (layerId: string) => number | undefined;
+    updatePosition: (layerId: string, position: WindowPosition) => void;
+    updateSize: (layerId: string, size: WindowSize) => void;
+    close: (layerId: string) => void;
+};

package/dist/types.d.ts

@@ -49,13 +49,61 @@ export type PopupWindowFactoryConfig = {
     bounds: WindowBounds;
 };
 export type FloatingWindowMode = "embedded" | "popup";
-export type FloatingWindowConfig = {
-    mode?: FloatingWindowMode;
+export type FloatingHeaderConfig = {
+    /** Header title text */
+    title?: string;
+    /** Show close button (requires onClose callback) */
+    showCloseButton?: boolean;
+};
+export type FloatingBehavior = {
+    /** Controlled position - when defined, component uses this value directly */
+    position?: WindowPosition;
+    /** Initial position for uncontrolled mode */
+    defaultPosition?: WindowPosition;
+    /** Controlled size - when defined, component uses this value directly */
+    size?: WindowSize;
+    /** Initial size for uncontrolled mode */
+    defaultSize?: WindowSize;
+    /** Z-index for stacking order */
+    zIndex?: number;
+    /** Enable drag-to-move functionality */
     draggable?: boolean;
+    /** Enable resize handles */
     resizable?: boolean;
+    /** Size constraints for resizing */
     constraints?: WindowConstraints;
+    /** Called when position changes (drag/move) */
     onMove?: (position: WindowPosition) => void;
+    /** Called when size changes (resize) */
     onResize?: (size: WindowSize) => void;
+    /** Called when close button is clicked */
+    onClose?: () => void;
+    /**
+     * Use built-in chrome (FloatingPanelFrame with border, shadow, background).
+     * When true and header is provided, header auto-enables drag handle.
+     * Defaults to false.
+     */
+    chrome?: boolean;
+    /**
+     * Header configuration (renders header when provided).
+     * When chrome is true and header is provided, header becomes the drag handle.
+     */
+    header?: FloatingHeaderConfig;
+    /** Accessible label when header.title is not provided */
+    ariaLabel?: string;
+    /**
+     * Transition mode for position/size changes.
+     * - "css" uses CSS transitions.
+     * - "none" disables transitions.
+     */
+    transitionMode?: "css" | "none";
+    /** Override transition duration (e.g., "200ms") */
+    transitionDuration?: string;
+    /** Override transition easing (e.g., "ease-out") */
+    transitionEasing?: string;
+    /** Display mode: "embedded" (default) or "popup" (browser window) */
+    mode?: FloatingWindowMode;
+    /** Popup-specific options when mode is "popup" */
     popup?: PopupWindowOptions;
 };
 export type PivotBehaviorItem = {
@@ -90,6 +138,12 @@ export type DrawerBehavior = {
     open?: boolean;
     /** Whether clicking backdrop dismisses the drawer */
     dismissible?: boolean;
+    /**
+     * Anchor edge for the drawer.
+     * - "left", "right", "top", "bottom"
+     * - When not specified, inferred from position prop
+     */
+    anchor?: "left" | "right" | "top" | "bottom";
     /**
      * Transition mode for drawer visibility.
      * - "css" (default) uses CSS transform transitions.
@@ -143,18 +197,39 @@ export type LayerDefinition = {
      * If `floating` is present, behaves as absolute (embedded) or relative (popup).
      */
     positionMode?: LayerPositionMode;
-    /** Absolute/fixed offsets when positionMode !== 'grid'. */
+    /**
+     * Position offsets for non-floating layers (drawer, absolute positioned).
+     * For floating layers, use `floating.position` or `floating.defaultPosition` instead.
+     */
     position?: WindowPosition;
+    /**
+     * Stacking order for non-floating layers.
+     * For floating layers, use `floating.zIndex` instead.
+     */
     zIndex?: number;
+    /**
+     * Width for non-floating layers.
+     * For floating layers, use `floating.size` or `floating.defaultSize` instead.
+     */
     width?: string | number;
+    /**
+     * Height for non-floating layers.
+     * For floating layers, use `floating.size` or `floating.defaultSize` instead.
+     */
     height?: string | number;
     pointerEvents?: boolean | "auto" | "none";
     /** Optional backdrop style (used by DrawerBehaviour) */
     backdropStyle?: React.CSSProperties;
     drawer?: DrawerBehavior;
-    floating?: FloatingWindowConfig;
+    /** Floating window behavior configuration */
+    floating?: FloatingBehavior;
     pivot?: PivotBehavior;
     style?: React.CSSProperties;
+    /**
+     * When true, enables scrolling within this panel (overflow: auto).
+     * When false or omitted, content overflow is hidden (default behavior).
+     */
+    scrollable?: boolean;
 };
 export type PanelLayoutProps = {
     config: PanelLayoutConfig;

package/dist/utils/css.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file Generic CSS parsing and measurement utilities.
+ */
+export type ParsedGap = {
+    rowGap: number;
+    columnGap: number;
+};
+/**
+ * Parses a CSS gap value string into row and column gap numbers.
+ * Supports single value (applied to both) or two values (row column).
+ * Only handles px units; other units return 0.
+ */
+export declare const parseGapValue: (gapValue?: string) => ParsedGap;
+export type GridDirection = "col" | "row";
+/**
+ * Measures actual rendered grid track sizes from computed style.
+ * Returns pixel values parsed from gridTemplateColumns or gridTemplateRows.
+ */
+export declare const measureGridTrackSizes: (containerEl: HTMLElement | null, direction: GridDirection) => number[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-panel-layout",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "license": "Unlicense",
   "type": "module",
   "main": "dist/index.cjs",

package/dist/FloatingPanelFrame-SOrLGjZd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FloatingPanelFrame-SOrLGjZd.js","sources":["../src/components/paneling/FloatingPanelFrame.tsx"],"sourcesContent":["/**\n * @file Shared floating panel frame components for reusable overlay styling\n */\nimport * as React from \"react\";\nimport {\n  FLOATING_PANEL_BORDER_RADIUS,\n  FLOATING_PANEL_GAP,\n  FLOATING_PANEL_HEADER_PADDING_Y,\n  FLOATING_PANEL_HEADER_PADDING_X,\n  FLOATING_PANEL_CONTENT_PADDING,\n  FLOATING_PANEL_META_FONT_SIZE,\n  FLOATING_PANEL_CONTROLS_GAP,\n  FLOATING_PANEL_SURFACE_COLOR,\n  FLOATING_PANEL_SURFACE_2_COLOR,\n  FLOATING_PANEL_BORDER_COLOR,\n  FLOATING_PANEL_MUTED_FG_COLOR,\n  FLOATING_PANEL_SHADOW,\n} from \"../../constants/styles\";\n\nconst frameStyle: React.CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_COLOR,\n  overflow: \"hidden\",\n  boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst headerStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_GAP,\n  padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,\n  borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_2_COLOR,\n};\n\nconst titleStyle: React.CSSProperties = {\n  fontWeight: 600,\n};\n\nconst metaStyle: React.CSSProperties = {\n  marginLeft: \"auto\",\n  color: FLOATING_PANEL_MUTED_FG_COLOR,\n  fontSize: FLOATING_PANEL_META_FONT_SIZE,\n};\n\nconst controlsStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_CONTROLS_GAP,\n};\n\nconst contentStyle: React.CSSProperties = {\n  padding: FLOATING_PANEL_CONTENT_PADDING,\n  overflow: \"auto\",\n};\n\nexport type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(\n  { style: propStyle, ...props },\n  ref,\n) {\n  const combinedStyle = React.useMemo(() => ({ ...frameStyle, ...propStyle }), [propStyle]);\n  return <div ref={ref} style={combinedStyle} {...props} />;\n});\n\nexport type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n  function FloatingPanelContent({ style: propStyle, ...props }, ref) {\n    const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);\n    return <div ref={ref} style={combinedStyle} {...props} />;\n  },\n);\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\n\n"],"names":["frameStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SHADOW","headerStyle","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_SURFACE_2_COLOR","titleStyle","metaStyle","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_META_FONT_SIZE","controlsStyle","FLOATING_PANEL_CONTROLS_GAP","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","props","ref","combinedStyle","FloatingPanelHeader","jsx","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent"],"mappings":";;;AAmBA,MAAMA,IAAkC;AAAA,EACtC,SAAS;AAAA,EACT,eAAe;AAAA,EACf,cAAcC;AAAA,EACd,QAAQ,aAAaC,CAA2B;AAAA,EAChD,YAAYC;AAAA,EACZ,UAAU;AAAA,EACV,WAAWC;AACb,GAEMC,IAAmC;AAAA,EACvC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAKC;AAAA,EACL,SAAS,GAAGC,CAA+B,IAAIC,CAA+B;AAAA,EAC9E,cAAc,aAAaN,CAA2B;AAAA,EACtD,YAAYO;AACd,GAEMC,IAAkC;AAAA,EACtC,YAAY;AACd,GAEMC,IAAiC;AAAA,EACrC,YAAY;AAAA,EACZ,OAAOC;AAAA,EACP,UAAUC;AACZ,GAEMC,IAAqC;AAAA,EACzC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAKC;AACP,GAEMC,IAAoC;AAAA,EACxC,SAASC;AAAA,EACT,UAAU;AACZ,GAMaC,IAAqBC,EAAM,WAAoD,SAC1F,EAAE,OAAOC,GAAW,GAAGC,EAAA,GACvBC,GACA;AACA,QAAMC,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGnB,GAAY,GAAGoB,EAAA,IAAc,CAACA,CAAS,CAAC;AACxF,2BAAQ,OAAA,EAAI,KAAAE,GAAU,OAAOC,GAAgB,GAAGF,GAAO;AACzD,CAAC,GAMYG,IAA0D,CAAC,EAAE,OAAOJ,GAAW,GAAGC,QAAY;AACzG,QAAME,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGd,GAAa,GAAGe,EAAA,IAAc,CAACA,CAAS,CAAC;AACzF,SAAO,gBAAAK,EAAC,OAAA,EAAI,OAAOF,GAAgB,GAAGF,GAAO;AAC/C,GAMaK,IAAwD,CAAC,EAAE,OAAON,GAAW,GAAGC,QAAY;AACvG,QAAME,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGT,GAAY,GAAGU,EAAA,IAAc,CAACA,CAAS,CAAC;AACxF,SAAO,gBAAAK,EAAC,QAAA,EAAK,OAAOF,GAAgB,GAAGF,GAAO;AAChD,GAMaM,IAAsD,CAAC,EAAE,OAAOP,GAAW,GAAGC,QAAY;AACrG,QAAME,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGR,GAAW,GAAGS,EAAA,IAAc,CAACA,CAAS,CAAC;AACvF,SAAO,gBAAAK,EAAC,QAAA,EAAK,OAAOF,GAAgB,GAAGF,GAAO;AAChD,GAMaO,IAA8D,CAAC,EAAE,OAAOR,GAAW,GAAGC,QAAY;AAC7G,QAAME,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGL,GAAe,GAAGM,EAAA,IAAc,CAACA,CAAS,CAAC;AAC3F,SAAO,gBAAAK,EAAC,OAAA,EAAI,OAAOF,GAAgB,GAAGF,GAAO;AAC/C,GAMaQ,IAAuBV,EAAM;AAAA,EACxC,SAA8B,EAAE,OAAOC,GAAW,GAAGC,EAAA,GAASC,GAAK;AACjE,UAAMC,IAAgBJ,EAAM,QAAQ,OAAO,EAAE,GAAGH,GAAc,GAAGI,EAAA,IAAc,CAACA,CAAS,CAAC;AAC1F,6BAAQ,OAAA,EAAI,KAAAE,GAAU,OAAOC,GAAgB,GAAGF,GAAO;AAAA,EACzD;AACF;AAEAH,EAAmB,cAAc;AACjCM,EAAoB,cAAc;AAClCE,EAAmB,cAAc;AACjCC,EAAkB,cAAc;AAChCC,EAAsB,cAAc;AACpCC,EAAqB,cAAc;"}

package/dist/FloatingPanelFrame-XtBcHANI.cjs

@@ -1,2 +0,0 @@
-"use strict";const s=require("react/jsx-runtime"),P=require("react"),o=require("./styles-DcG3aIFx.cjs");function A(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const a=A(P),O={display:"flex",flexDirection:"column",borderRadius:o.FLOATING_PANEL_BORDER_RADIUS,border:`1px solid ${o.FLOATING_PANEL_BORDER_COLOR}`,background:o.FLOATING_PANEL_SURFACE_COLOR,overflow:"hidden",boxShadow:o.FLOATING_PANEL_SHADOW},g={display:"flex",alignItems:"center",gap:o.FLOATING_PANEL_GAP,padding:`${o.FLOATING_PANEL_HEADER_PADDING_Y} ${o.FLOATING_PANEL_HEADER_PADDING_X}`,borderBottom:`1px solid ${o.FLOATING_PANEL_BORDER_COLOR}`,background:o.FLOATING_PANEL_SURFACE_2_COLOR},u={fontWeight:600},m={marginLeft:"auto",color:o.FLOATING_PANEL_MUTED_FG_COLOR,fontSize:o.FLOATING_PANEL_META_FONT_SIZE},L={display:"flex",alignItems:"center",gap:o.FLOATING_PANEL_CONTROLS_GAP},y={padding:o.FLOATING_PANEL_CONTENT_PADDING,overflow:"auto"},r=a.forwardRef(function({style:t,...n},l){const i=a.useMemo(()=>({...O,...t}),[t]);return s.jsx("div",{ref:l,style:i,...n})}),c=({style:e,...t})=>{const n=a.useMemo(()=>({...g,...e}),[e]);return s.jsx("div",{style:n,...t})},d=({style:e,...t})=>{const n=a.useMemo(()=>({...u,...e}),[e]);return s.jsx("span",{style:n,...t})},_=({style:e,...t})=>{const n=a.useMemo(()=>({...m,...e}),[e]);return s.jsx("span",{style:n,...t})},F=({style:e,...t})=>{const n=a.useMemo(()=>({...L,...e}),[e]);return s.jsx("div",{style:n,...t})},N=a.forwardRef(function({style:t,...n},l){const i=a.useMemo(()=>({...y,...t}),[t]);return s.jsx("div",{ref:l,style:i,...n})});r.displayName="FloatingPanelFrame";c.displayName="FloatingPanelHeader";d.displayName="FloatingPanelTitle";_.displayName="FloatingPanelMeta";F.displayName="FloatingPanelControls";N.displayName="FloatingPanelContent";exports.FloatingPanelContent=N;exports.FloatingPanelControls=F;exports.FloatingPanelFrame=r;exports.FloatingPanelHeader=c;exports.FloatingPanelMeta=_;exports.FloatingPanelTitle=d;
-//# sourceMappingURL=FloatingPanelFrame-XtBcHANI.cjs.map

package/dist/FloatingPanelFrame-XtBcHANI.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FloatingPanelFrame-XtBcHANI.cjs","sources":["../src/components/paneling/FloatingPanelFrame.tsx"],"sourcesContent":["/**\n * @file Shared floating panel frame components for reusable overlay styling\n */\nimport * as React from \"react\";\nimport {\n  FLOATING_PANEL_BORDER_RADIUS,\n  FLOATING_PANEL_GAP,\n  FLOATING_PANEL_HEADER_PADDING_Y,\n  FLOATING_PANEL_HEADER_PADDING_X,\n  FLOATING_PANEL_CONTENT_PADDING,\n  FLOATING_PANEL_META_FONT_SIZE,\n  FLOATING_PANEL_CONTROLS_GAP,\n  FLOATING_PANEL_SURFACE_COLOR,\n  FLOATING_PANEL_SURFACE_2_COLOR,\n  FLOATING_PANEL_BORDER_COLOR,\n  FLOATING_PANEL_MUTED_FG_COLOR,\n  FLOATING_PANEL_SHADOW,\n} from \"../../constants/styles\";\n\nconst frameStyle: React.CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  border: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_COLOR,\n  overflow: \"hidden\",\n  boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst headerStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_GAP,\n  padding: `${FLOATING_PANEL_HEADER_PADDING_Y} ${FLOATING_PANEL_HEADER_PADDING_X}`,\n  borderBottom: `1px solid ${FLOATING_PANEL_BORDER_COLOR}`,\n  background: FLOATING_PANEL_SURFACE_2_COLOR,\n};\n\nconst titleStyle: React.CSSProperties = {\n  fontWeight: 600,\n};\n\nconst metaStyle: React.CSSProperties = {\n  marginLeft: \"auto\",\n  color: FLOATING_PANEL_MUTED_FG_COLOR,\n  fontSize: FLOATING_PANEL_META_FONT_SIZE,\n};\n\nconst controlsStyle: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: FLOATING_PANEL_CONTROLS_GAP,\n};\n\nconst contentStyle: React.CSSProperties = {\n  padding: FLOATING_PANEL_CONTENT_PADDING,\n  overflow: \"auto\",\n};\n\nexport type FloatingPanelFrameProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelFrame = React.forwardRef<HTMLDivElement, FloatingPanelFrameProps>(function FloatingPanelFrame(\n  { style: propStyle, ...props },\n  ref,\n) {\n  const combinedStyle = React.useMemo(() => ({ ...frameStyle, ...propStyle }), [propStyle]);\n  return <div ref={ref} style={combinedStyle} {...props} />;\n});\n\nexport type FloatingPanelHeaderProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelHeader: React.FC<FloatingPanelHeaderProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...headerStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelTitle: React.FC<FloatingPanelTitleProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...titleStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelMetaProps = Omit<React.HTMLAttributes<HTMLSpanElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelMeta: React.FC<FloatingPanelMetaProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...metaStyle, ...propStyle }), [propStyle]);\n  return <span style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelControlsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelControls: React.FC<FloatingPanelControlsProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...controlsStyle, ...propStyle }), [propStyle]);\n  return <div style={combinedStyle} {...props} />;\n};\n\nexport type FloatingPanelContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\"> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelContent = React.forwardRef<HTMLDivElement, FloatingPanelContentProps>(\n  function FloatingPanelContent({ style: propStyle, ...props }, ref) {\n    const combinedStyle = React.useMemo(() => ({ ...contentStyle, ...propStyle }), [propStyle]);\n    return <div ref={ref} style={combinedStyle} {...props} />;\n  },\n);\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\n\n"],"names":["frameStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","FLOATING_PANEL_SHADOW","headerStyle","FLOATING_PANEL_GAP","FLOATING_PANEL_HEADER_PADDING_Y","FLOATING_PANEL_HEADER_PADDING_X","FLOATING_PANEL_SURFACE_2_COLOR","titleStyle","metaStyle","FLOATING_PANEL_MUTED_FG_COLOR","FLOATING_PANEL_META_FONT_SIZE","controlsStyle","FLOATING_PANEL_CONTROLS_GAP","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","props","ref","combinedStyle","FloatingPanelHeader","jsx","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent"],"mappings":"kYAmBMA,EAAkC,CACtC,QAAS,OACT,cAAe,SACf,aAAcC,EAAAA,6BACd,OAAQ,aAAaC,EAAAA,2BAA2B,GAChD,WAAYC,EAAAA,6BACZ,SAAU,SACV,UAAWC,EAAAA,qBACb,EAEMC,EAAmC,CACvC,QAAS,OACT,WAAY,SACZ,IAAKC,EAAAA,mBACL,QAAS,GAAGC,EAAAA,+BAA+B,IAAIC,EAAAA,+BAA+B,GAC9E,aAAc,aAAaN,EAAAA,2BAA2B,GACtD,WAAYO,EAAAA,8BACd,EAEMC,EAAkC,CACtC,WAAY,GACd,EAEMC,EAAiC,CACrC,WAAY,OACZ,MAAOC,EAAAA,8BACP,SAAUC,EAAAA,6BACZ,EAEMC,EAAqC,CACzC,QAAS,OACT,WAAY,SACZ,IAAKC,EAAAA,2BACP,EAEMC,EAAoC,CACxC,QAASC,EAAAA,+BACT,SAAU,MACZ,EAMaC,EAAqBC,EAAM,WAAoD,SAC1F,CAAE,MAAOC,EAAW,GAAGC,CAAA,EACvBC,EACA,CACA,MAAMC,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGnB,EAAY,GAAGoB,CAAA,GAAc,CAACA,CAAS,CAAC,EACxF,aAAQ,MAAA,CAAI,IAAAE,EAAU,MAAOC,EAAgB,GAAGF,EAAO,CACzD,CAAC,EAMYG,EAA0D,CAAC,CAAE,MAAOJ,EAAW,GAAGC,KAAY,CACzG,MAAME,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGd,EAAa,GAAGe,CAAA,GAAc,CAACA,CAAS,CAAC,EACzF,OAAOK,EAAAA,IAAC,MAAA,CAAI,MAAOF,EAAgB,GAAGF,EAAO,CAC/C,EAMaK,EAAwD,CAAC,CAAE,MAAON,EAAW,GAAGC,KAAY,CACvG,MAAME,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGT,EAAY,GAAGU,CAAA,GAAc,CAACA,CAAS,CAAC,EACxF,OAAOK,EAAAA,IAAC,OAAA,CAAK,MAAOF,EAAgB,GAAGF,EAAO,CAChD,EAMaM,EAAsD,CAAC,CAAE,MAAOP,EAAW,GAAGC,KAAY,CACrG,MAAME,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGR,EAAW,GAAGS,CAAA,GAAc,CAACA,CAAS,CAAC,EACvF,OAAOK,EAAAA,IAAC,OAAA,CAAK,MAAOF,EAAgB,GAAGF,EAAO,CAChD,EAMaO,EAA8D,CAAC,CAAE,MAAOR,EAAW,GAAGC,KAAY,CAC7G,MAAME,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGL,EAAe,GAAGM,CAAA,GAAc,CAACA,CAAS,CAAC,EAC3F,OAAOK,EAAAA,IAAC,MAAA,CAAI,MAAOF,EAAgB,GAAGF,EAAO,CAC/C,EAMaQ,EAAuBV,EAAM,WACxC,SAA8B,CAAE,MAAOC,EAAW,GAAGC,CAAA,EAASC,EAAK,CACjE,MAAMC,EAAgBJ,EAAM,QAAQ,KAAO,CAAE,GAAGH,EAAc,GAAGI,CAAA,GAAc,CAACA,CAAS,CAAC,EAC1F,aAAQ,MAAA,CAAI,IAAAE,EAAU,MAAOC,EAAgB,GAAGF,EAAO,CACzD,CACF,EAEAH,EAAmB,YAAc,qBACjCM,EAAoB,YAAc,sBAClCE,EAAmB,YAAc,qBACjCC,EAAkB,YAAc,oBAChCC,EAAsB,YAAc,wBACpCC,EAAqB,YAAc"}