react-panel-layout 0.3.0 → 0.4.2

package/README.md

@@ -119,3 +119,294 @@ All available CSS variables are documented in [docs/design-tokens.md](./docs/des
 - Larger UI: Increase `--rpl-size-tab-font` and spacing variables
 - Light theme: Override color variables for light backgrounds
 - VS Code style: See examples in the design tokens documentation
+
+---
+
+## Grid Layout – Flexible Grid-Based Layouts
+
+`GridLayout` provides a declarative way to create complex grid-based layouts with resizable tracks and floating overlays.
+
+### Quick Start
+
+```tsx
+import { GridLayout } from "react-panel-layout";
+import type { PanelLayoutConfig, LayerDefinition } from "react-panel-layout";
+
+const config: PanelLayoutConfig = {
+  areas: [
+    ["cell1", "cell2"],
+    ["cell3", "cell4"],
+  ],
+  rows: [{ size: "1fr" }, { size: "1fr" }],
+  columns: [{ size: "1fr" }, { size: "1fr" }],
+  gap: "1rem",
+};
+
+const layers: LayerDefinition[] = [
+  { id: "cell1", component: <Cell1 />, gridArea: "cell1" },
+  { id: "cell2", component: <Cell2 />, gridArea: "cell2" },
+  { id: "cell3", component: <Cell3 />, gridArea: "cell3" },
+  { id: "cell4", component: <Cell4 />, gridArea: "cell4" },
+];
+
+<GridLayout config={config} layers={layers} />;
+```
+
+### PanelLayoutConfig
+
+Define your grid structure with the following properties:
+
+| Property  | Type           | Description                                   |
+|-----------|----------------|-----------------------------------------------|
+| `areas`   | `string[][]`   | Grid template areas (CSS grid-template-areas) |
+| `rows`    | `GridTrack[]`  | Row track definitions                         |
+| `columns` | `GridTrack[]`  | Column track definitions                      |
+| `gap`     | `string`       | Gap between grid cells (optional)             |
+
+### GridTrack
+
+Each track (row or column) can be configured with:
+
+```tsx
+type GridTrack = {
+  size: string;       // CSS size value: "1fr", "200px", "auto", etc.
+  resizable?: boolean; // Enable drag-to-resize
+  minSize?: number;    // Minimum size in pixels (when resizable)
+  maxSize?: number;    // Maximum size in pixels (when resizable)
+};
+```
+
+### Resizable Tracks
+
+Enable resizable sidebar columns or rows:
+
+```tsx
+const config: PanelLayoutConfig = {
+  areas: [
+    ["sidebar", "main", "inspector"],
+  ],
+  rows: [{ size: "1fr" }],
+  columns: [
+    { size: "250px", resizable: true, minSize: 200, maxSize: 400 },
+    { size: "1fr" },
+    { size: "300px", resizable: true, minSize: 250, maxSize: 500 },
+  ],
+  gap: "4px",
+};
+```
+
+### LayerDefinition
+
+Each layer defines content to place in the grid or as a floating overlay:
+
+```tsx
+type LayerDefinition = {
+  id: string;                    // Unique identifier
+  component: React.ReactNode;    // Content to render
+  visible?: boolean;             // Show/hide the layer
+
+  // Grid positioning
+  gridArea?: string;             // Grid area name from config.areas
+  gridRow?: string;              // Explicit grid-row value
+  gridColumn?: string;           // Explicit grid-column value
+
+  // Floating positioning (for overlays)
+  position?: { top?, right?, bottom?, left? };
+  width?: string | number;
+  height?: string | number;
+  zIndex?: number;
+
+  // Floating behavior
+  floating?: {
+    draggable?: boolean;
+    resizable?: boolean;
+    constraints?: { minWidth?, maxWidth?, minHeight?, maxHeight? };
+  };
+
+  // Drawer behavior (slide-in panels)
+  drawer?: DrawerBehavior;
+};
+```
+
+### Floating Overlays
+
+Add draggable floating panels on top of the grid:
+
+```tsx
+const layers: LayerDefinition[] = [
+  // Grid-based layer
+  {
+    id: "canvas",
+    component: <Canvas />,
+    gridArea: "canvas",
+    zIndex: 0,
+  },
+  // Floating panel
+  {
+    id: "tools",
+    component: <ToolsPanel />,
+    position: { left: 20, top: 20 },
+    width: 200,
+    height: 250,
+    zIndex: 10,
+    floating: {
+      draggable: true,
+    },
+  },
+];
+```
+
+### IDE-Style Layout Example
+
+A complete IDE-style layout with toolbar, sidebar, main canvas, and floating panels:
+
+```tsx
+const config: PanelLayoutConfig = {
+  areas: [
+    ["toolbar", "toolbar", "toolbar"],
+    ["sidebar", "canvas", "inspector"],
+    ["statusbar", "statusbar", "statusbar"],
+  ],
+  rows: [
+    { size: "60px" },
+    { size: "1fr" },
+    { size: "30px" },
+  ],
+  columns: [
+    { size: "250px", resizable: true, minSize: 200, maxSize: 400 },
+    { size: "1fr" },
+    { size: "300px", resizable: true, minSize: 250, maxSize: 500 },
+  ],
+  gap: "4px",
+};
+
+const layers: LayerDefinition[] = [
+  { id: "toolbar", component: <Toolbar />, gridArea: "toolbar", zIndex: 10 },
+  { id: "sidebar", component: <Sidebar />, gridArea: "sidebar" },
+  { id: "canvas", component: <Canvas />, gridArea: "canvas" },
+  { id: "inspector", component: <Inspector />, gridArea: "inspector" },
+  { id: "statusbar", component: <StatusBar />, gridArea: "statusbar", zIndex: 10 },
+  // Floating panel
+  {
+    id: "preview",
+    component: <Preview />,
+    position: { right: 20, top: 80 },
+    width: 300,
+    height: 400,
+    zIndex: 20,
+    floating: { draggable: true },
+  },
+];
+
+<GridLayout config={config} layers={layers} />;
+```
+
+---
+
+## Pivot – Headless Content Switching
+
+`usePivot` is a headless hook for building tabbed interfaces, content switchers, and navigation patterns. It handles state management and provides an `Outlet` component for rendering content with CSS transitions.
+
+### Quick Start
+
+```tsx
+import { usePivot } from "react-panel-layout/pivot";
+
+const items = [
+  { id: "home", label: "Home", content: <HomePage /> },
+  { id: "settings", label: "Settings", content: <SettingsPage /> },
+];
+
+function MyTabs() {
+  const { activeId, getItemProps, Outlet } = usePivot({
+    items,
+    defaultActiveId: "home",
+  });
+
+  return (
+    <div>
+      <nav>
+        {items.map((item) => (
+          <button key={item.id} {...getItemProps(item.id)}>
+            {item.label}
+          </button>
+        ))}
+      </nav>
+      <Outlet />
+    </div>
+  );
+}
+```
+
+### Transition Modes
+
+```tsx
+const { Outlet } = usePivot({
+  items,
+  transitionMode: "css",  // "css" (default) | "none"
+});
+```
+
+- `"css"` – Smooth opacity transitions via CSS design tokens (default)
+- `"none"` – Instant switch, uses React.Activity for memory optimization
+
+### Design Tokens
+
+Customize animations via CSS custom properties:
+
+```css
+/* Define enter/leave keyframes */
+@keyframes pivotEnter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pivotLeave {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* Reference via design tokens */
+:root {
+  --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards;
+  --rpl-pivot-animation-leave: pivotLeave 150ms ease-out forwards;
+}
+```
+
+Example: Slide-up animation:
+```css
+@keyframes pivotSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pivotSlideOut {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-8px); }
+}
+
+:root {
+  --rpl-pivot-animation-enter: pivotSlideIn 150ms ease-out forwards;
+  --rpl-pivot-animation-leave: pivotSlideOut 150ms ease-out forwards;
+}
+```
+
+### UsePivotOptions
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `items` | `PivotItem[]` | Array of content items |
+| `activeId` | `string` | Controlled active item ID |
+| `defaultActiveId` | `string` | Default active item (uncontrolled) |
+| `onActiveChange` | `(id) => void` | Callback when active item changes |
+| `transitionMode` | `"css" \| "none"` | Enable/disable CSS transitions |
+
+### UsePivotResult
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `activeId` | `string` | Current active item ID |
+| `setActiveId` | `(id) => void` | Change active item |
+| `isActive` | `(id) => boolean` | Check if item is active |
+| `getItemProps` | `(id) => props` | Get props for navigation elements |
+| `Outlet` | `React.FC` | Component that renders active content |

package/dist/FloatingPanelFrame-SOrLGjZd.js

@@ -0,0 +1,67 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as n from "react";
+import { F as r, a as d, b as i, c as _, d as c, e as N, f as A, g as F, h as m, i as P, j as L, k as y } from "./styles-w0ZixggV.js";
+const O = {
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: _,
+  border: `1px solid ${i}`,
+  background: d,
+  overflow: "hidden",
+  boxShadow: r
+}, g = {
+  display: "flex",
+  alignItems: "center",
+  gap: F,
+  padding: `${N} ${A}`,
+  borderBottom: `1px solid ${i}`,
+  background: c
+}, E = {
+  fontWeight: 600
+}, f = {
+  marginLeft: "auto",
+  color: P,
+  fontSize: m
+}, u = {
+  display: "flex",
+  alignItems: "center",
+  gap: L
+}, T = {
+  padding: y,
+  overflow: "auto"
+}, I = n.forwardRef(function({ style: t, ...a }, s) {
+  const l = n.useMemo(() => ({ ...O, ...t }), [t]);
+  return /* @__PURE__ */ o("div", { ref: s, style: l, ...a });
+}), G = ({ style: e, ...t }) => {
+  const a = n.useMemo(() => ({ ...g, ...e }), [e]);
+  return /* @__PURE__ */ o("div", { style: a, ...t });
+}, R = ({ style: e, ...t }) => {
+  const a = n.useMemo(() => ({ ...E, ...e }), [e]);
+  return /* @__PURE__ */ o("span", { style: a, ...t });
+}, b = ({ style: e, ...t }) => {
+  const a = n.useMemo(() => ({ ...f, ...e }), [e]);
+  return /* @__PURE__ */ o("span", { style: a, ...t });
+}, D = ({ style: e, ...t }) => {
+  const a = n.useMemo(() => ({ ...u, ...e }), [e]);
+  return /* @__PURE__ */ o("div", { style: a, ...t });
+}, S = n.forwardRef(
+  function({ style: t, ...a }, s) {
+    const l = n.useMemo(() => ({ ...T, ...t }), [t]);
+    return /* @__PURE__ */ o("div", { ref: s, style: l, ...a });
+  }
+);
+I.displayName = "FloatingPanelFrame";
+G.displayName = "FloatingPanelHeader";
+R.displayName = "FloatingPanelTitle";
+b.displayName = "FloatingPanelMeta";
+D.displayName = "FloatingPanelControls";
+S.displayName = "FloatingPanelContent";
+export {
+  I as F,
+  G as a,
+  R as b,
+  b as c,
+  D as d,
+  S as e
+};
+//# sourceMappingURL=FloatingPanelFrame-SOrLGjZd.js.map

package/dist/FloatingPanelFrame-SOrLGjZd.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1 @@
+{"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"}