react-panel-layout 0.5.2 → 0.6.1

package/src/demo/components/layout/SplitDemoLayout.tsx

@@ -0,0 +1,218 @@
+/**
+ * @file SplitDemoLayout - Responsive layout with left code / right preview
+ * Uses GridLayout for desktop (side-by-side) and drawer for compact viewports
+ */
+import * as React from "react";
+import { GridLayout } from "../../../components/grid/GridLayout";
+import type { PanelLayoutConfig, LayerDefinition } from "../../../types";
+import { CodePanel } from "./CodePanel";
+import styles from "./SplitDemoLayout.module.css";
+
+const COMPACT_BREAKPOINT = 900;
+
+type CodeToggleButtonProps = {
+  onClick: () => void;
+};
+
+const CodeToggleButton: React.FC<CodeToggleButtonProps> = ({ onClick }) => {
+  return (
+    <button
+      type="button"
+      className={styles.codeToggle}
+      onClick={onClick}
+      aria-label="Show source code"
+    >
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polyline points="16 18 22 12 16 6" />
+        <polyline points="8 6 2 12 8 18" />
+      </svg>
+      <span>Code</span>
+    </button>
+  );
+};
+
+type DrawerCloseButtonProps = {
+  onClick: () => void;
+};
+
+const DrawerCloseButton: React.FC<DrawerCloseButtonProps> = ({ onClick }) => {
+  return (
+    <button
+      type="button"
+      className={styles.drawerClose}
+      onClick={onClick}
+      aria-label="Close code panel"
+    >
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </button>
+  );
+};
+
+export type SplitDemoLayoutProps = {
+  /** Source code to display */
+  code: string;
+  /** Title for the code panel */
+  codeTitle?: string;
+  /** Preview content */
+  children: React.ReactNode;
+  /** Minimum height for the preview area */
+  previewMinHeight?: number | string;
+};
+
+/**
+ * SplitDemoLayout component
+ * - Desktop: Left code panel, right preview (side-by-side)
+ * - Compact: Preview only, with bottom drawer for code
+ */
+export const SplitDemoLayout: React.FC<SplitDemoLayoutProps> = ({
+  code,
+  codeTitle = "Source Code",
+  children,
+  previewMinHeight = 400,
+}) => {
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const [containerWidth, setContainerWidth] = React.useState<number>(0);
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+
+  // Track container width for responsive behavior
+  React.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const node = containerRef.current;
+    if (!node) {
+      return;
+    }
+
+    const updateWidth = () => {
+      const rect = node.getBoundingClientRect();
+      setContainerWidth(Math.round(rect.width));
+    };
+
+    updateWidth();
+
+    const observer =
+      typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateWidth) : null;
+
+    if (observer) {
+      observer.observe(node);
+    }
+
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, []);
+
+  const isCompact = containerWidth > 0 && containerWidth < COMPACT_BREAKPOINT;
+
+  // Desktop config: side-by-side layout
+  const desktopConfig = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["code", "preview"]],
+      rows: [{ size: "1fr" }],
+      columns: [
+        { size: "minmax(320px, 420px)", resizable: true, minSize: 280, maxSize: 600 },
+        { size: "1fr" },
+      ],
+      gap: "0",
+    }),
+    [],
+  );
+
+  // Compact config: preview only (code in drawer)
+  const compactConfig = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["preview"]],
+      rows: [{ size: "1fr" }],
+      columns: [{ size: "1fr" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const previewMinHeightValue =
+    typeof previewMinHeight === "number" ? `${previewMinHeight}px` : previewMinHeight;
+
+  const desktopLayers = React.useMemo<LayerDefinition[]>(
+    () => [
+      {
+        id: "code",
+        gridArea: "code",
+        component: (
+          <div className={styles.codeWrapper}>
+            <CodePanel code={code} title={codeTitle} />
+          </div>
+        ),
+      },
+      {
+        id: "preview",
+        gridArea: "preview",
+        component: (
+          <div className={styles.previewWrapper} style={{ minHeight: previewMinHeightValue }}>
+            {children}
+          </div>
+        ),
+      },
+    ],
+    [code, codeTitle, children, previewMinHeightValue],
+  );
+
+  const compactLayers = React.useMemo<LayerDefinition[]>(
+    () => [
+      {
+        id: "preview",
+        gridArea: "preview",
+        component: (
+          <div className={styles.previewWrapper} style={{ minHeight: previewMinHeightValue }}>
+            {children}
+          </div>
+        ),
+      },
+      {
+        id: "code-drawer",
+        component: (
+          <div className={styles.drawerContent}>
+            <CodePanel code={code} title={codeTitle} showHeader={true} />
+          </div>
+        ),
+        drawer: {
+          open: drawerOpen,
+          onStateChange: setDrawerOpen,
+          dismissible: true,
+          chrome: false,
+          inline: true,
+          anchor: "bottom",
+          transitionMode: "css",
+          transitionDuration: "250ms",
+          transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+          ariaLabel: "Source Code",
+        },
+        position: { bottom: 0, left: 0 },
+        width: "100%",
+        height: "60%",
+        zIndex: 100,
+      },
+    ],
+    [code, codeTitle, children, previewMinHeightValue, drawerOpen],
+  );
+
+  const config = isCompact ? compactConfig : desktopConfig;
+  const layers = isCompact ? compactLayers : desktopLayers;
+
+  const showToggleButton = isCompact ? !drawerOpen : false;
+  const showCloseButton = isCompact ? drawerOpen : false;
+
+  return (
+    <div className={styles.container} ref={containerRef}>
+      <GridLayout config={config} layers={layers} />
+      {showToggleButton ? <CodeToggleButton onClick={() => setDrawerOpen(true)} /> : null}
+      {showCloseButton ? <DrawerCloseButton onClick={() => setDrawerOpen(false)} /> : null}
+    </div>
+  );
+};

package/src/demo/components/layout/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @file Barrel exports for layout components
+ */
+export { DemoPage } from "./DemoPage";
+export type { DemoPageProps } from "./DemoPage";
+export { SingleSamplePage } from "./SingleSamplePage";
+export type { SingleSamplePageProps } from "./SingleSamplePage";
+export { SplitDemoLayout } from "./SplitDemoLayout";
+export type { SplitDemoLayoutProps } from "./SplitDemoLayout";
+export { CodePanel } from "./CodePanel";
+export type { CodePanelProps } from "./CodePanel";

package/src/demo/components/tab-styles/ChromeTabBar.module.css

@@ -0,0 +1,75 @@
+.tabbar {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0 6px;
+  background: #dee1e6;
+  border-bottom: 1px solid #c5c7ca;
+  min-height: 32px;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  background: #c8cacd;
+  color: #3c4043;
+  border: none;
+  margin: 0 -10px 0 0;
+  padding: 6px calc(12px + 10px);
+  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  z-index: 1;
+  transition: background 0.15s ease;
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.tab:hover {
+  background: #d4d6d9;
+}
+
+.tabActive {
+  background: #ffffff;
+  z-index: 2;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.tabActive:hover {
+  background: #ffffff;
+}
+
+.tabDragging {
+  opacity: 0.6;
+}
+
+.tabTitle {
+  font-size: 12px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+
+.addButton {
+  margin-left: 6px;
+  border: 1px solid #b8babd;
+  background: #ffffff;
+  border-radius: 4px;
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.closeButton {
+  margin-left: 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}

package/src/demo/components/tab-styles/ChromeTabBar.tsx

@@ -0,0 +1,111 @@
+/**
+ * @file Chrome-style tab bar component (demo only)
+ */
+import * as React from "react";
+import styles from "./ChromeTabBar.module.css";
+import type { TabBarRenderProps } from "../../../modules/panels/state/types";
+import { useDemoTabbarConfig } from "../../contexts/TabbarDemoConfig";
+import { usePanelInteractions } from "../../../modules/panels/interactions/InteractionsContext";
+
+export const ChromeTabBar: React.FC<TabBarRenderProps> = ({ group, onClickTab, onStartDrag, rootRef, onAddTab, onCloseTab, doubleClickToAdd }) => {
+  const { isTabDragging, draggingTabId } = usePanelInteractions();
+  const { addPlacement, AddButton, CloseButton } = useDemoTabbarConfig();
+  const handleTabbarDoubleClick = React.useCallback((): void => {
+    if (doubleClickToAdd && onAddTab) {
+      onAddTab(group.id);
+    }
+  }, [doubleClickToAdd, onAddTab, group.id]);
+  const renderAddButton = (): React.ReactNode => {
+    if (!onAddTab) {
+      return null;
+    }
+    if (AddButton) {
+      return <AddButton onClick={() => onAddTab(group.id)} ariaLabel="Add tab" className={styles.addButton} />;
+    }
+    return (
+      <button type="button" aria-label="Add tab" className={styles.addButton} onClick={() => onAddTab(group.id)}>
+        +
+      </button>
+    );
+  };
+  return (
+    <div ref={rootRef} className={styles.tabbar} role="tablist" data-tabbar="true" data-group-id={group.id} data-dragging={isTabDragging ? "true" : "false"} onDoubleClick={handleTabbarDoubleClick}>
+      {buildTabs()}
+      <span className={styles.spacer} />
+      {addPlacement === "trailing" ? renderAddButton() : null}
+    </div>
+  );
+
+  function renderCloseButton(tabTitle: string, tabId: string): React.ReactNode {
+    const handleClick = (ev: React.MouseEvent): void => {
+      if (!onCloseTab) {
+        return;
+      }
+      ev.stopPropagation();
+      onCloseTab(group.id, tabId);
+    };
+    const ariaLabel = `Close tab ${tabTitle}`;
+    const renderButton = (): React.ReactNode => {
+      if (CloseButton) {
+        return <CloseButton onClick={handleClick} ariaLabel={ariaLabel} className={styles.closeButton} />;
+      }
+      return (
+        <button
+          type="button"
+          aria-label={ariaLabel}
+          className={styles.closeButton}
+          onClick={handleClick}
+          tabIndex={onCloseTab ? undefined : -1}
+          disabled={!onCloseTab}
+          aria-hidden={onCloseTab ? undefined : true}
+        >
+          ×
+        </button>
+      );
+    };
+    return <span onPointerDown={(ev) => ev.stopPropagation()}>{renderButton()}</span>;
+  }
+
+  function buildTabs(): React.ReactNode[] {
+    const items: React.ReactNode[] = [];
+    group.tabs.forEach((tab, index) => {
+        const active = group.activeTabId === tab.id;
+        const dragging = draggingTabId === tab.id;
+        const className = `${styles.tab} ${active ? styles.tabActive : ""} ${dragging ? styles.tabDragging : ""}`.trim();
+        items.push(
+          <div
+            key={`${group.id}:${tab.id}:${index}`}
+            role="tab"
+            aria-selected={active}
+            className={className}
+            onClick={() => {
+              onClickTab(tab.id);
+            }}
+            onDoubleClick={(e) => e.stopPropagation()}
+            onPointerDown={(e) => {
+              if (!onStartDrag) {
+                return;
+              }
+              if (e.button !== 0) {
+                return;
+              }
+              onStartDrag(tab.id, group.id, e);
+            }}
+            data-tab-id={tab.id}
+          >
+            <span className={styles.tabTitle}>{tab.title}</span>
+            <React.Activity mode={onCloseTab ? "visible" : "hidden"}>
+              {renderCloseButton(tab.title, tab.id)}
+            </React.Activity>
+          </div>
+        );
+        if (addPlacement === "after-active" && active) {
+          items.push(<span key={`add-after-${tab.id}`}>{renderAddButton()}</span>);
+        }
+      });
+    if (addPlacement === "after-tabs") {
+      items.push(<span key="add-after-tabs">{renderAddButton()}</span>);
+    }
+    return items;
+  }
+};

package/src/demo/components/tab-styles/GitHubTabBar.module.css

@@ -0,0 +1,81 @@
+.tabbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  background: #ffffff;
+  border-bottom: 1px solid #d0d7de;
+  min-height: 48px;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  background: transparent;
+  color: #57606a;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px 6px 0 0;
+  transition: background 0.1s ease, color 0.1s ease;
+  cursor: pointer;
+  user-select: none;
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.tab:hover {
+  background: #f6f8fa;
+  color: #24292f;
+}
+
+.tabActive {
+  background: #ffffff;
+  color: #24292f;
+  font-weight: 600;
+}
+
+.tabActive::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background: #fd8c73;
+  border-radius: 6px 6px 0 0;
+}
+
+.tabDragging {
+  opacity: 0.6;
+}
+
+.tabTitle {
+  font-size: 14px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+
+.addButton {
+  margin-left: 8px;
+  border: 1px solid #d0d7de;
+  background: #f6f8fa;
+  color: #24292f;
+  border-radius: 6px;
+  width: 26px;
+  height: 26px;
+  line-height: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.closeButton {
+  margin-left: 8px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}

package/src/demo/components/tab-styles/GitHubTabBar.tsx

@@ -0,0 +1,109 @@
+/**
+ * @file GitHub-style tab bar component (demo only)
+ */
+import * as React from "react";
+import styles from "./GitHubTabBar.module.css";
+import type { TabBarRenderProps } from "../../../modules/panels/state/types";
+import { useDemoTabbarConfig } from "../../contexts/TabbarDemoConfig";
+import { usePanelInteractions } from "../../../modules/panels/interactions/InteractionsContext";
+
+export const GitHubTabBar: React.FC<TabBarRenderProps> = ({ group, onClickTab, onStartDrag, rootRef, onAddTab, onCloseTab, doubleClickToAdd }) => {
+  const { isTabDragging, draggingTabId } = usePanelInteractions();
+  const { addPlacement, AddButton, CloseButton } = useDemoTabbarConfig();
+  const handleTabbarDoubleClick = React.useCallback((): void => {
+    if (doubleClickToAdd && onAddTab) {
+      onAddTab(group.id);
+    }
+  }, [doubleClickToAdd, onAddTab, group.id]);
+  const renderAddButton = (): React.ReactNode => {
+    if (!onAddTab) {
+      return null;
+    }
+    if (AddButton) {
+      return <AddButton onClick={() => onAddTab(group.id)} ariaLabel="Add tab" className={styles.addButton} />;
+    }
+    return (
+      <button type="button" aria-label="Add tab" className={styles.addButton} onClick={() => onAddTab(group.id)}>
+        +
+      </button>
+    );
+  };
+  return (
+    <div ref={rootRef} className={styles.tabbar} role="tablist" data-tabbar="true" data-group-id={group.id} data-dragging={isTabDragging ? "true" : "false"} onDoubleClick={handleTabbarDoubleClick}>
+      {buildTabs()}
+      <span className={styles.spacer} />
+      {addPlacement === "trailing" ? renderAddButton() : null}
+    </div>
+  );
+
+  function renderCloseButton(tabTitle: string, tabId: string): React.ReactNode {
+    const handleClick = (ev: React.MouseEvent): void => {
+      if (!onCloseTab) {
+        return;
+      }
+      ev.stopPropagation();
+      onCloseTab(group.id, tabId);
+    };
+    const ariaLabel = `Close tab ${tabTitle}`;
+    const renderButton = (): React.ReactNode => {
+      if (CloseButton) {
+        return <CloseButton onClick={handleClick} ariaLabel={ariaLabel} className={styles.closeButton} />;
+      }
+      return (
+        <button
+          type="button"
+          aria-label={ariaLabel}
+          className={styles.closeButton}
+          onClick={handleClick}
+          tabIndex={onCloseTab ? undefined : -1}
+          disabled={!onCloseTab}
+          aria-hidden={onCloseTab ? undefined : true}
+        >
+          ×
+        </button>
+      );
+    };
+    return <span onPointerDown={(ev) => ev.stopPropagation()}>{renderButton()}</span>;
+  }
+
+  function buildTabs(): React.ReactNode[] {
+    const items: React.ReactNode[] = [];
+    group.tabs.forEach((tab, index) => {
+        const active = group.activeTabId === tab.id;
+        const dragging = draggingTabId === tab.id;
+        const className = `${styles.tab} ${active ? styles.tabActive : ""} ${dragging ? styles.tabDragging : ""}`.trim();
+        items.push(
+          <div
+            key={`${group.id}:${tab.id}:${index}`}
+            role="tab"
+            aria-selected={active}
+            className={className}
+            onClick={() => {
+              onClickTab(tab.id);
+            }}
+            onDoubleClick={(e) => e.stopPropagation()}
+            onPointerDown={(e) => {
+              if (!onStartDrag) {
+                return;
+              }
+              if (e.button !== 0) {
+                return;
+              }
+              onStartDrag(tab.id, group.id, e);
+            }}
+            data-tab-id={tab.id}
+          >
+            <span className={styles.tabTitle}>{tab.title}</span>
+            <React.Activity mode={onCloseTab ? "visible" : "hidden"}>{renderCloseButton(tab.title, tab.id)}</React.Activity>
+          </div>
+        );
+        if (addPlacement === "after-active" && active) {
+          items.push(<span key={`add-after-${tab.id}`}>{renderAddButton()}</span>);
+        }
+      });
+    if (addPlacement === "after-tabs") {
+      items.push(<span key="add-after-tabs">{renderAddButton()}</span>);
+    }
+    return items;
+  }
+};

package/src/demo/components/tab-styles/VSCodeTabBar.module.css

@@ -0,0 +1,78 @@
+.tabbar {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0;
+  background: #2d2d2d;
+  border-bottom: 1px solid #1e1e1e;
+  min-height: 35px;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  background: transparent;
+  color: #969696;
+  border: none;
+  border-right: 1px solid #1e1e1e;
+  padding: 8px 12px;
+  transition: background 0.1s ease, color 0.1s ease;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.tab:hover {
+  background: #2a2a2a;
+}
+
+.tabActive {
+  background: #1e1e1e;
+  color: #ffffff;
+}
+
+.tabActive::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: #007acc;
+}
+
+.tabDragging {
+  opacity: 0.6;
+}
+
+.tabTitle {
+  font-size: 13px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+
+.addButton {
+  margin: 0 6px;
+  border: 1px solid #3a3a3a;
+  background: #2a2a2a;
+  color: #ddd;
+  border-radius: 3px;
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.closeButton {
+  margin-left: 6px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}