react-panel-layout 0.5.1 → 0.6.0

package/src/utils/dialogUtils.ts

@@ -0,0 +1,43 @@
+/**
+ * @file Dialog positioning utilities
+ */
+
+export type ViewportInfo = {
+  width: number;
+  height: number;
+};
+
+/**
+ * Get viewport dimensions
+ */
+export const getViewportInfo = (): ViewportInfo => {
+  if (typeof window === "undefined") {
+    return { width: 0, height: 0 };
+  }
+
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+};
+
+/**
+ * Calculate context menu position to keep it within viewport
+ */
+export const calculateContextMenuPosition = (
+  anchorX: number,
+  anchorY: number,
+  menuWidth: number,
+  menuHeight: number,
+  viewport: ViewportInfo,
+): { x: number; y: number } => {
+  // Adjust horizontal position if menu would overflow
+  const x =
+    anchorX + menuWidth > viewport.width ? Math.max(0, viewport.width - menuWidth) : anchorX;
+
+  // Adjust vertical position if menu would overflow
+  const y =
+    anchorY + menuHeight > viewport.height ? Math.max(0, viewport.height - menuHeight) : anchorY;
+
+  return { x, y };
+};

package/src/utils/math.ts

@@ -0,0 +1,18 @@
+/**
+ * @file Primitive math helpers shared across modules.
+ */
+
+export const clampNumber = (
+  value: number,
+  min: number = Number.NEGATIVE_INFINITY,
+  max: number = Number.POSITIVE_INFINITY,
+): number => {
+  return Math.min(Math.max(value, min), max);
+};
+
+export const toFiniteNumberOr = (value: number | undefined, fallback: number): number => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return fallback;
+  }
+  return value;
+};

package/src/utils/polyfills/createDialogPolyfill.ts

@@ -0,0 +1,18 @@
+/**
+ * @file Dialog polyfill for browsers that don't support <dialog> element natively
+ */
+
+/**
+ * Ensure dialog polyfill is loaded if needed
+ * This is a placeholder - in production you might want to use a real polyfill like dialog-polyfill
+ */
+export const ensureDialogPolyfill = (): void => {
+  // Check if browser supports <dialog> element
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  // Modern browsers already support dialog element
+  // If you need to support older browsers, you can load a polyfill here
+  // For now, we assume modern browser support
+};

package/src/utils/typedActions.ts

@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-explicit-any -- Generic action helpers rely on 'any' to avoid over-constraining payload creators */
+/**
+ * @file Utilities for defining typed action creators and reducer handler maps without external dependencies.
+ */
+
+export type AnyAction = { type: string };
+
+export type AnyActionCreator = {
+  (...args: any[]): AnyAction;
+  readonly type: string;
+};
+
+type PayloadCreator = (...args: any[]) => any;
+
+type ActionFromPayload<Type extends string, Creator extends PayloadCreator> =
+  ReturnType<Creator> extends undefined | void
+    ? { type: Type }
+    : { type: Type; payload: Exclude<ReturnType<Creator>, undefined> };
+
+/**
+ * Creates a typed action creator with an attached literal `type` property.
+ */
+export function createAction<Type extends string>(type: Type): (() => { type: Type }) & { readonly type: Type };
+export function createAction<Type extends string, Creator extends PayloadCreator>(
+  type: Type,
+  payloadCreator: Creator,
+): ((...args: Parameters<Creator>) => ActionFromPayload<Type, Creator>) & { readonly type: Type };
+export function createAction<Type extends string, Creator extends PayloadCreator>(
+  type: Type,
+  payloadCreator?: Creator,
+) {
+  if (!payloadCreator) {
+    const actionCreator = (() => ({ type }) as const) as (() => { type: Type }) & { readonly type: Type };
+    Object.defineProperty(actionCreator, "type", {
+      value: type,
+      writable: false,
+      enumerable: true,
+    });
+    return actionCreator;
+  }
+  const actionCreator = ((...args: Parameters<Creator>) => {
+    const payload = payloadCreator(...args);
+    if (typeof payload === "undefined") {
+      return { type } as const;
+    }
+    return { type, payload } as const;
+  }) as ((...args: Parameters<Creator>) => ActionFromPayload<Type, Creator>) & { readonly type: Type };
+  Object.defineProperty(actionCreator, "type", {
+    value: type,
+    writable: false,
+    enumerable: true,
+  });
+  return actionCreator;
+}
+
+export type ActionCreatorsMap = Record<string, AnyActionCreator>;
+
+export type ActionUnion<Creators extends ActionCreatorsMap> = ReturnType<Creators[keyof Creators]>;
+
+export type CaseReducer<State, Action extends AnyAction, Extra> = (state: State, action: Action, extra: Extra) => State;
+
+export type BoundActionCreators<Creators extends ActionCreatorsMap> = {
+  [Key in keyof Creators]: (...args: Parameters<Creators[Key]>) => ReturnType<Creators[Key]>;
+};
+
+export const bindActionCreators = <Creators extends ActionCreatorsMap>(
+  creators: Creators,
+  dispatch: (action: ActionUnion<Creators>) => unknown,
+): BoundActionCreators<Creators> => {
+  const bound = {} as BoundActionCreators<Creators>;
+  (Object.keys(creators) as Array<keyof Creators>).forEach((key) => {
+    const creator = creators[key];
+    bound[key] = ((...args: Parameters<typeof creator>) => {
+      const action = creator(...args);
+      dispatch(action as ActionUnion<Creators>);
+      return action;
+    }) as BoundActionCreators<Creators>[keyof Creators];
+  });
+  return bound;
+};
+
+export const createActionHandlerMap = <State, Creators extends ActionCreatorsMap, Extra = undefined>(
+  creators: Creators,
+  handlers: {
+    [Key in keyof Creators]?: CaseReducer<State, ReturnType<Creators[Key]>, Extra>;
+  },
+): Record<string, CaseReducer<State, ReturnType<Creators[keyof Creators]>, Extra>> => {
+  const map: Record<string, CaseReducer<State, ReturnType<Creators[keyof Creators]>, Extra>> = {};
+
+  (Object.keys(handlers) as Array<keyof Creators>).forEach((key) => {
+    const handler = handlers[key];
+    if (!handler) {
+      return;
+    }
+    const creator = creators[key];
+    if (!creator) {
+      throw new Error(`Missing action creator for key "${String(key)}"`);
+    }
+    map[creator.type] = handler as CaseReducer<State, ReturnType<Creators[keyof Creators]>, Extra>;
+  });
+
+  return map;
+};

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Vite environment type declarations
+ */
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string;

package/src/window/index.ts

@@ -0,0 +1,67 @@
+/**
+ * @file Window entry point - Floating window and drawer components
+ * @packageDocumentation
+ *
+ * This is a subpath export entry point for `react-panel-layout/window`.
+ *
+ * ## Overview
+ * Window provides floating panels, drawers, and dialog overlays for modal
+ * and non-modal UI patterns. Supports draggable windows, slide-in drawers,
+ * and popup portals.
+ *
+ * ## Installation
+ * ```ts
+ * import { Drawer, FloatingWindow, useDrawerState } from "react-panel-layout/window";
+ * ```
+ *
+ * ## Drawer Usage
+ * ```tsx
+ * function App() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setIsOpen(true)}>Open Drawer</button>
+ *       <Drawer
+ *         id="settings"
+ *         config={{ anchor: 'right', header: { title: 'Settings' } }}
+ *         isOpen={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *       >
+ *         <SettingsPanel />
+ *       </Drawer>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * ## Floating Window Usage
+ * ```tsx
+ * <FloatingWindow
+ *   id="inspector"
+ *   config={{
+ *     draggable: true,
+ *     chrome: true,
+ *     header: { title: 'Inspector', showCloseButton: true },
+ *   }}
+ *   onClose={handleClose}
+ * >
+ *   <InspectorContent />
+ * </FloatingWindow>
+ * ```
+ */
+
+// Components
+export { FloatingWindow } from "../components/window/FloatingWindow.js";
+export { Drawer } from "../components/window/Drawer.js";
+export { DrawerLayers } from "../components/window/DrawerLayers.js";
+export { DialogOverlay } from "../components/window/DialogOverlay.js";
+export { PopupLayerPortal } from "../components/window/PopupLayerPortal.js";
+
+// Hooks
+export { useFloatingState } from "../modules/window/useFloatingState.js";
+export { useDrawerState } from "../modules/window/useDrawerState.js";
+
+// Types
+export type { FloatingWindowProps } from "../components/window/FloatingWindow.js";
+export type { DrawerProps } from "../components/window/Drawer.js";

package/dist/FloatingPanelFrame-6W5OexYe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FloatingPanelFrame-6W5OexYe.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_CLOSE_BUTTON_FONT_SIZE,\n  FLOATING_PANEL_CLOSE_BUTTON_PADDING,\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 shadowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst overflowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  overflow: \"hidden\",\n};\n\nconst innerStyle: 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};\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 closeButtonStyle: React.CSSProperties = {\n  border: \"none\",\n  background: \"transparent\",\n  cursor: \"pointer\",\n  fontSize: FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n  padding: FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n  lineHeight: 1,\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, children, ...props },\n  ref,\n) {\n  const combinedShadowStyle = React.useMemo(\n    () => ({ ...shadowWrapperStyle, ...propStyle }),\n    [propStyle],\n  );\n\n  const combinedOverflowStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return overflowWrapperStyle;\n    }\n\n    const result: React.CSSProperties = { ...overflowWrapperStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  const combinedInnerStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return innerStyle;\n    }\n\n    const result: React.CSSProperties = { ...innerStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  return (\n    <div ref={ref} style={combinedShadowStyle} {...props}>\n      <div style={combinedOverflowStyle}>\n        <div style={combinedInnerStyle}>{children}</div>\n      </div>\n    </div>\n  );\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\nexport type FloatingPanelCloseButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"className\" | \"style\" | \"children\"\n> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelCloseButton: React.FC<FloatingPanelCloseButtonProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...closeButtonStyle, ...propStyle }), [propStyle]);\n  return (\n    <button type=\"button\" style={combinedStyle} {...props}>\n      ×\n    </button>\n  );\n};\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\nFloatingPanelCloseButton.displayName = \"FloatingPanelCloseButton\";\n"],"names":["shadowWrapperStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_SHADOW","overflowWrapperStyle","innerStyle","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","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","closeButtonStyle","FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","children","props","ref","combinedShadowStyle","combinedOverflowStyle","hasCustomBorderRadius","hasHeight","result","combinedInnerStyle","jsx","FloatingPanelHeader","combinedStyle","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent","FloatingPanelCloseButton"],"mappings":"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"}

package/dist/FloatingPanelFrame-D9Cp2al1.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FloatingPanelFrame-D9Cp2al1.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_CLOSE_BUTTON_FONT_SIZE,\n  FLOATING_PANEL_CLOSE_BUTTON_PADDING,\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 shadowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  boxShadow: FLOATING_PANEL_SHADOW,\n};\n\nconst overflowWrapperStyle: React.CSSProperties = {\n  borderRadius: FLOATING_PANEL_BORDER_RADIUS,\n  overflow: \"hidden\",\n};\n\nconst innerStyle: 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};\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 closeButtonStyle: React.CSSProperties = {\n  border: \"none\",\n  background: \"transparent\",\n  cursor: \"pointer\",\n  fontSize: FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE,\n  padding: FLOATING_PANEL_CLOSE_BUTTON_PADDING,\n  lineHeight: 1,\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, children, ...props },\n  ref,\n) {\n  const combinedShadowStyle = React.useMemo(\n    () => ({ ...shadowWrapperStyle, ...propStyle }),\n    [propStyle],\n  );\n\n  const combinedOverflowStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return overflowWrapperStyle;\n    }\n\n    const result: React.CSSProperties = { ...overflowWrapperStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  const combinedInnerStyle = React.useMemo(() => {\n    const hasCustomBorderRadius = propStyle?.borderRadius !== undefined;\n    const hasHeight = propStyle?.height !== undefined;\n\n    if (!hasCustomBorderRadius && !hasHeight) {\n      return innerStyle;\n    }\n\n    const result: React.CSSProperties = { ...innerStyle };\n    if (hasCustomBorderRadius) {\n      result.borderRadius = propStyle.borderRadius;\n    }\n    if (hasHeight) {\n      result.height = propStyle.height;\n    }\n    return result;\n  }, [propStyle?.borderRadius, propStyle?.height]);\n\n  return (\n    <div ref={ref} style={combinedShadowStyle} {...props}>\n      <div style={combinedOverflowStyle}>\n        <div style={combinedInnerStyle}>{children}</div>\n      </div>\n    </div>\n  );\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\nexport type FloatingPanelCloseButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"className\" | \"style\" | \"children\"\n> & {\n  style?: React.CSSProperties;\n};\n\nexport const FloatingPanelCloseButton: React.FC<FloatingPanelCloseButtonProps> = ({ style: propStyle, ...props }) => {\n  const combinedStyle = React.useMemo(() => ({ ...closeButtonStyle, ...propStyle }), [propStyle]);\n  return (\n    <button type=\"button\" style={combinedStyle} {...props}>\n      ×\n    </button>\n  );\n};\n\nFloatingPanelFrame.displayName = \"FloatingPanelFrame\";\nFloatingPanelHeader.displayName = \"FloatingPanelHeader\";\nFloatingPanelTitle.displayName = \"FloatingPanelTitle\";\nFloatingPanelMeta.displayName = \"FloatingPanelMeta\";\nFloatingPanelControls.displayName = \"FloatingPanelControls\";\nFloatingPanelContent.displayName = \"FloatingPanelContent\";\nFloatingPanelCloseButton.displayName = \"FloatingPanelCloseButton\";\n"],"names":["shadowWrapperStyle","FLOATING_PANEL_BORDER_RADIUS","FLOATING_PANEL_SHADOW","overflowWrapperStyle","innerStyle","FLOATING_PANEL_BORDER_COLOR","FLOATING_PANEL_SURFACE_COLOR","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","closeButtonStyle","FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE","FLOATING_PANEL_CLOSE_BUTTON_PADDING","contentStyle","FLOATING_PANEL_CONTENT_PADDING","FloatingPanelFrame","React","propStyle","children","props","ref","combinedShadowStyle","combinedOverflowStyle","hasCustomBorderRadius","hasHeight","result","combinedInnerStyle","jsx","FloatingPanelHeader","combinedStyle","FloatingPanelTitle","FloatingPanelMeta","FloatingPanelControls","FloatingPanelContent","FloatingPanelCloseButton"],"mappings":"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"}