react-panel-layout 0.5.2 → 0.6.0

package/src/demo/pages/FloatingPanelFrame/ResizableFloatingPanelsPreview.module.css

@@ -0,0 +1,163 @@
+.container {
+  padding: var(--rpl-demo-space-lg);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.pageTitle {
+  margin-bottom: var(--rpl-demo-space-lg);
+  font-size: var(--rpl-demo-font-size-xl);
+  font-weight: 700;
+}
+
+.intro {
+  margin-bottom: var(--rpl-demo-space-xl);
+  font-size: var(--rpl-demo-font-size-md);
+  color: var(--rpl-demo-text-secondary);
+  line-height: 1.6;
+}
+
+.previewFrame {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.demoSurface {
+  width: min(1200px, 100%);
+  min-width: min(960px, 100%);
+  height: clamp(420px, 55vw, 640px);
+  border-radius: var(--rpl-demo-radius-xl);
+  padding: var(--rpl-demo-space-lg);
+  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 60%, #ffffff 100%);
+  border: 1px solid rgba(79, 70, 229, 0.12);
+  box-shadow: var(--rpl-demo-shadow-lg);
+  overflow: hidden;
+}
+
+.workspace {
+  position: relative;
+  height: 420px;
+  border-radius: var(--rpl-demo-radius-lg);
+  overflow: hidden;
+  background: radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.16), transparent 45%),
+    radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.18), transparent 50%),
+    linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.94) 100%);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.workspaceBackdrop {
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(0deg,
+      rgba(255, 255, 255, 0.05),
+      rgba(255, 255, 255, 0.05) 1px,
+      transparent 1px,
+      transparent 32px),
+    repeating-linear-gradient(90deg,
+      rgba(255, 255, 255, 0.05),
+      rgba(255, 255, 255, 0.05) 1px,
+      transparent 1px,
+      transparent 32px);
+}
+
+.workspaceGrid {
+  position: absolute;
+  inset: 24px;
+  border-radius: var(--rpl-demo-radius-lg);
+  border: 1px dashed rgba(148, 163, 184, 0.3);
+}
+
+.workspaceLabel {
+  position: absolute;
+  left: 24px;
+  bottom: 24px;
+  color: rgba(226, 232, 240, 0.9);
+  font-size: var(--rpl-demo-font-size-sm);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.panelBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-md);
+  padding: var(--rpl-demo-space-md);
+  background: linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, rgba(255, 255, 255, 0.96) 100%);
+}
+
+.panelSummary {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--rpl-demo-space-md);
+  padding: 0.75rem 1rem;
+  border-radius: var(--rpl-demo-radius-lg);
+  background: rgba(79, 70, 229, 0.08);
+  border: 1px solid rgba(79, 70, 229, 0.12);
+}
+
+.metricLabel {
+  display: block;
+  font-size: var(--rpl-demo-font-size-xs);
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.metricValue {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.metricsList {
+  margin: 0;
+  padding-left: 1.125rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.metricsItem {
+  font-size: 0.95rem;
+  color: #334155;
+  line-height: 1.5;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  background: rgba(99, 102, 241, 0.12);
+  color: #4338ca;
+  font-size: var(--rpl-demo-font-size-xs);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.notesIntro {
+  margin: 0;
+  color: #475569;
+  line-height: 1.6;
+}
+
+.notesGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--rpl-demo-space-md);
+  padding: 0.75rem 1rem;
+  border-radius: var(--rpl-demo-radius-md);
+  background: rgba(14, 165, 233, 0.08);
+  border: 1px solid rgba(14, 165, 233, 0.14);
+}
+
+.notesTip {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #0f172a;
+  line-height: 1.5;
+}

package/src/demo/pages/FloatingPanelFrame/ResizableFloatingPanelsPreview.tsx

@@ -0,0 +1,234 @@
+/**
+ * @file Resizable floating panels preview page
+ */
+import * as React from "react";
+import { GridLayout } from "../../../components/grid/GridLayout";
+import type { LayerDefinition, PanelLayoutConfig } from "../../../types";
+import {
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelContent,
+} from "../../../components/paneling/FloatingPanelFrame";
+import { useLayerDragHandle } from "../../../modules/grid/useLayerDragHandle";
+import { Story } from "../../components/Story";
+import { CodePreview } from "../../components/CodePreview";
+import { DemoPage } from "../../components/layout/index";
+import styles from "./ResizableFloatingPanelsPreview.module.css";
+
+const EDGE_RESIZE_DEMO_CODE = `import {
+  GridLayout,
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelContent,
+  useLayerDragHandle,
+} from "react-panel-layout";
+
+const config = {
+  areas: [["main"]],
+  columns: [{ size: "1fr" }],
+  rows: [{ size: "420px" }],
+};
+
+const MetricsPanel = () => {
+  const dragHandleProps = useLayerDragHandle();
+
+  return (
+    <FloatingPanelFrame>
+      <FloatingPanelHeader {...dragHandleProps}>
+        <FloatingPanelTitle>Session Metrics</FloatingPanelTitle>
+      </FloatingPanelHeader>
+      <FloatingPanelContent>…</FloatingPanelContent>
+    </FloatingPanelFrame>
+  );
+};
+
+const layers = [
+  {
+    id: "workspace",
+    gridArea: "main",
+    component: <div className="workspace" />,
+  },
+  {
+    id: "floating",
+    component: <MetricsPanel />,
+    position: { left: 48, top: 48 },
+    width: 320,
+    height: 240,
+    zIndex: 10,
+    floating: {
+      constraints: { minWidth: 240, minHeight: 180 },
+      resizable: true,
+      draggable: true,
+    },
+  },
+];`;
+
+const FloatingWorkspaceDemo: React.FC = () => {
+  const [primarySize, setPrimarySize] = React.useState({ width: 320, height: 240 });
+  const [notesSize, setNotesSize] = React.useState({ width: 260, height: 220 });
+
+  const handlePrimarySizeChange = React.useCallback((next: { width: number; height: number }) => {
+    setPrimarySize((previous) => {
+      const widthMatches = previous.width === next.width;
+      const heightMatches = previous.height === next.height;
+      return widthMatches && heightMatches ? previous : next;
+    });
+  }, []);
+
+  const handleNotesSizeChange = React.useCallback((next: { width: number; height: number }) => {
+    setNotesSize((previous) => {
+      const widthMatches = previous.width === next.width;
+      const heightMatches = previous.height === next.height;
+      return widthMatches && heightMatches ? previous : next;
+    });
+  }, []);
+
+  const config = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["main"]],
+      columns: [{ size: "1fr" }],
+      rows: [{ size: "420px" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const MetricsPanel: React.FC = () => {
+    const dragHandleProps = useLayerDragHandle();
+
+    return (
+      <FloatingPanelFrame style={{ height: "100%" }}>
+        <FloatingPanelHeader {...dragHandleProps}>
+          <FloatingPanelTitle>Session Metrics</FloatingPanelTitle>
+          <span className={styles.badge}>Resizable</span>
+        </FloatingPanelHeader>
+        <FloatingPanelContent>
+          <div className={styles.panelBody}>
+            <div className={styles.panelSummary}>
+              <div>
+                <span className={styles.metricLabel}>Width</span>
+                <strong className={styles.metricValue}>{primarySize.width}px</strong>
+              </div>
+              <div>
+                <span className={styles.metricLabel}>Height</span>
+                <strong className={styles.metricValue}>{primarySize.height}px</strong>
+              </div>
+            </div>
+            <ul className={styles.metricsList}>
+              <li className={styles.metricsItem}>Drag the header to move the panel.</li>
+              <li className={styles.metricsItem}>Use any edge to resize; corners support diagonal resizing.</li>
+              <li className={styles.metricsItem}>Constraints: min 240 × 180, max 560 × 380.</li>
+            </ul>
+          </div>
+        </FloatingPanelContent>
+      </FloatingPanelFrame>
+    );
+  };
+
+  const NotesPanel: React.FC = () => {
+    const dragHandleProps = useLayerDragHandle();
+
+    return (
+      <FloatingPanelFrame style={{ height: "100%" }}>
+        <FloatingPanelHeader {...dragHandleProps}>
+          <FloatingPanelTitle>Creative Notes</FloatingPanelTitle>
+        </FloatingPanelHeader>
+        <FloatingPanelContent>
+          <div className={styles.panelBody}>
+            <p className={styles.notesIntro}>
+              Resize from the right or bottom edges to make room for additional annotations.
+            </p>
+            <div className={styles.notesGrid}>
+              <div>
+                <span className={styles.metricLabel}>Width</span>
+                <strong className={styles.metricValue}>{notesSize.width}px</strong>
+              </div>
+              <div>
+                <span className={styles.metricLabel}>Height</span>
+                <strong className={styles.metricValue}>{notesSize.height}px</strong>
+              </div>
+            </div>
+            <p className={styles.notesTip}>
+              Edge handles appear on hover and remain active while resizing for improved precision.
+            </p>
+          </div>
+        </FloatingPanelContent>
+      </FloatingPanelFrame>
+    );
+  };
+
+  const layers: LayerDefinition[] = [
+    {
+      id: "workspace",
+      gridArea: "main",
+      component: (
+        <div className={styles.workspace}>
+          <div className={styles.workspaceBackdrop} />
+          <div className={styles.workspaceGrid} />
+          <div className={styles.workspaceLabel}>Canvas Surface</div>
+        </div>
+      ),
+    },
+    {
+      id: "metrics-panel",
+      component: <MetricsPanel />,
+      position: { left: 48, top: 48 },
+      width: primarySize.width,
+      height: primarySize.height,
+      zIndex: 10,
+      floating: {
+        constraints: { minWidth: 240, minHeight: 180, maxWidth: 560, maxHeight: 380 },
+        draggable: true,
+        resizable: true,
+        onResize: handlePrimarySizeChange,
+      },
+    },
+    {
+      id: "notes-panel",
+      component: <NotesPanel />,
+      position: { left: 420, top: 128 },
+      width: notesSize.width,
+      height: notesSize.height,
+      zIndex: 12,
+      floating: {
+        constraints: { minWidth: 220, minHeight: 180, maxWidth: 480, maxHeight: 360 },
+        draggable: true,
+        resizable: true,
+        onResize: handleNotesSizeChange,
+      },
+    },
+  ];
+
+  return (
+    <div className={styles.previewFrame}>
+      <div className={styles.demoSurface}>
+        <GridLayout config={config} layers={layers} style={{ width: "100%", height: "100%" }} />
+      </div>
+    </div>
+  );
+};
+
+export const ResizableFloatingPanelsPreview: React.FC = () => {
+  return (
+    <DemoPage
+      title="Floating Panel Interactions"
+      padding="var(--rpl-demo-space-lg)"
+      intro={
+        <p className={styles.intro}>
+          Floating layers can now be resized from any edge in addition to the existing corner handles. This demo shows
+          how the edge handles behave inside a canvas environment and how you can react to the updated dimensions.
+        </p>
+      }
+    >
+      <Story
+        title="Edge-resizable floating panels"
+        description="Drag the header to move the floating panels and resize them from any edge or corner with live dimension updates and constraints."
+      >
+        <FloatingWorkspaceDemo />
+      </Story>
+      <CodePreview code={EDGE_RESIZE_DEMO_CODE} title="Edge Resize Demo Code" />
+    </DemoPage>
+  );
+};

package/src/demo/pages/FloatingPanelFrame/basic/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file FloatingPanelFrame - Basic sample page (single sample)
+ */
+import * as React from "react";
+import { BasicPanel } from "../components/BasicPanel";
+import BasicPanelSource from "../components/BasicPanel.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="FloatingPanelFrame / Basic" code={BasicPanelSource} codeTitle="BasicPanel.tsx">
+      <BasicPanel />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/FloatingPanelFrame/complex/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * @file FloatingPanelFrame - Complex sample page
+ */
+import * as React from "react";
+import { ComplexPanel } from "../components/ComplexPanel";
+import ComplexPanelSource from "../components/ComplexPanel.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  const [open, setOpen] = React.useState(true);
+
+  const renderBody = (): React.ReactNode => {
+    if (open) {
+      return <ComplexPanel onClose={() => { setOpen(false); }} />;
+    }
+    return <button onClick={() => { setOpen(true); }}>Show Panel</button>;
+  };
+
+  return (
+    <SingleSamplePage title="FloatingPanelFrame / Complex" code={ComplexPanelSource} codeTitle="ComplexPanel.tsx">
+      {renderBody()}
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/FloatingPanelFrame/components/BasicPanel.module.css

@@ -0,0 +1,16 @@
+.container {
+  width: 100%;
+  height: 400px;
+  position: relative;
+  background-color: var(--rpl-demo-bg-secondary);
+  background-image: radial-gradient(var(--rpl-demo-border-primary) 1px, transparent 1px);
+  background-size: 20px 20px;
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  box-shadow: var(--rpl-demo-shadow-md);
+  overflow: hidden;
+}
+
+.contentText {
+  color: var(--rpl-demo-text-secondary);
+}

package/src/demo/pages/FloatingPanelFrame/components/BasicPanel.tsx

@@ -0,0 +1,24 @@
+/**
+ * @file Basic FloatingPanelFrame sample
+ */
+import * as React from "react";
+import {
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelContent,
+} from "../../../../components/paneling/FloatingPanelFrame";
+import styles from "./BasicPanel.module.css";
+
+export const BasicPanel = () => (
+  <div className={styles.container}>
+    <FloatingPanelFrame style={{ width: "100%", height: "100%" }}>
+      <FloatingPanelHeader>
+        <FloatingPanelTitle>Panel Title</FloatingPanelTitle>
+      </FloatingPanelHeader>
+      <FloatingPanelContent>
+        <p className={styles.contentText}>This is the panel content. You can put any React components here.</p>
+      </FloatingPanelContent>
+    </FloatingPanelFrame>
+  </div>
+);

package/src/demo/pages/FloatingPanelFrame/components/ComplexPanel.module.css

@@ -0,0 +1,54 @@
+.profileContent {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.profileHeader {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.profileAvatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.profileName {
+  display: block;
+  font-weight: bold;
+}
+
+.profileEmail {
+  font-size: 0.875rem;
+  color: #666;
+}
+
+.profileBioLabel {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  color: #666;
+}
+
+.profileBio {
+  margin: 0;
+}
+
+.profileStats {
+  display: flex;
+  gap: 1rem;
+}
+
+.profileStat {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.profileStatLabel {
+  font-size: 0.75rem;
+  color: #666;
+}

package/src/demo/pages/FloatingPanelFrame/components/ComplexPanel.tsx

@@ -0,0 +1,67 @@
+/**
+ * @file Complex FloatingPanelFrame sample
+ */
+import * as React from "react";
+import {
+  FloatingPanelCloseButton,
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelMeta,
+  FloatingPanelControls,
+  FloatingPanelContent,
+} from "../../../../components/paneling/FloatingPanelFrame";
+import styles from "./ComplexPanel.module.css";
+
+import { DemoButton } from "../../../components/ui/DemoButton";
+
+export const ComplexPanel: React.FC<{ onClose?: () => void }> = ({ onClose }) => (
+  <FloatingPanelFrame
+    style={{
+      width: "500px",
+      maxWidth: "100%",
+    }}
+  >
+    <FloatingPanelHeader>
+      <div style={{ flex: 1 }}>
+        <FloatingPanelTitle>User Profile</FloatingPanelTitle>
+        <FloatingPanelMeta>ID: 12345 • Online</FloatingPanelMeta>
+      </div>
+      <FloatingPanelControls>
+        <DemoButton variant="outline" size="sm" style={{ marginRight: "0.5rem" }}>
+          Edit
+        </DemoButton>
+        <FloatingPanelCloseButton onClick={onClose} style={{ color: "var(--rpl-demo-text-secondary)" }} />
+      </FloatingPanelControls>
+    </FloatingPanelHeader>
+    <FloatingPanelContent>
+      <div className={styles.profileContent}>
+        <div className={styles.profileHeader}>
+          <div className={styles.profileAvatar} />
+          <div>
+            <span className={styles.profileName}>Jane Doe</span>
+            <span className={styles.profileEmail}>jane.doe@example.com</span>
+          </div>
+        </div>
+        <div>
+          <p className={styles.profileBioLabel}>Bio</p>
+          <p className={styles.profileBio}>Frontend developer passionate about building great user experiences.</p>
+        </div>
+        <div className={styles.profileStats}>
+          <div>
+            <span className={styles.profileStat}>128</span>
+            <span className={styles.profileStatLabel}>Posts</span>
+          </div>
+          <div>
+            <span className={styles.profileStat}>2.4k</span>
+            <span className={styles.profileStatLabel}>Followers</span>
+          </div>
+          <div>
+            <span className={styles.profileStat}>512</span>
+            <span className={styles.profileStatLabel}>Following</span>
+          </div>
+        </div>
+      </div>
+    </FloatingPanelContent>
+  </FloatingPanelFrame>
+);

package/src/demo/pages/FloatingPanelFrame/components/PanelWithControls.module.css

@@ -0,0 +1,21 @@
+.notificationItem {
+  padding: 0.5rem;
+  border-radius: 4px;
+}
+
+.notificationItemBlue {
+  background: #e3f2fd;
+}
+
+.notificationItemPurple {
+  background: #f3e5f5;
+}
+
+.notificationTitle {
+  font-weight: bold;
+}
+
+.notificationText {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+}

package/src/demo/pages/FloatingPanelFrame/components/PanelWithControls.tsx

@@ -0,0 +1,41 @@
+/**
+ * @file FloatingPanelFrame with controls sample
+ */
+import * as React from "react";
+import {
+  FloatingPanelCloseButton,
+  FloatingPanelFrame,
+  FloatingPanelHeader,
+  FloatingPanelTitle,
+  FloatingPanelControls,
+  FloatingPanelContent,
+} from "../../../../components/paneling/FloatingPanelFrame";
+import styles from "./PanelWithControls.module.css";
+
+export const PanelWithControls: React.FC<{ onClose?: () => void }> = ({ onClose }) => (
+  <FloatingPanelFrame
+    style={{
+      width: "400px",
+      maxWidth: "100%",
+    }}
+  >
+    <FloatingPanelHeader>
+      <FloatingPanelTitle>Notifications</FloatingPanelTitle>
+      <FloatingPanelControls>
+        <FloatingPanelCloseButton onClick={onClose} style={{ color: "var(--rpl-demo-text-secondary)" }} />
+      </FloatingPanelControls>
+    </FloatingPanelHeader>
+    <FloatingPanelContent>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+        <div className={`${styles.notificationItem} ${styles.notificationItemBlue}`}>
+          <div className={styles.notificationTitle}>New message</div>
+          <p className={styles.notificationText}>You have a new message from John</p>
+        </div>
+        <div className={`${styles.notificationItem} ${styles.notificationItemPurple}`}>
+          <div className={styles.notificationTitle}>Task completed</div>
+          <p className={styles.notificationText}>Your task "Review PR" is complete</p>
+        </div>
+      </div>
+    </FloatingPanelContent>
+  </FloatingPanelFrame>
+);

package/src/demo/pages/FloatingPanelFrame/components/PanelWithMeta.module.css

@@ -0,0 +1,5 @@
+.settingsContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}