react-panel-layout 0.5.1 → 0.6.0

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;
+}

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

@@ -0,0 +1,109 @@
+/**
+ * @file VSCode-style tab bar component (demo only)
+ */
+import * as React from "react";
+import styles from "./VSCodeTabBar.module.css";
+import type { TabBarRenderProps } from "../../../modules/panels/state/types";
+import { useDemoTabbarConfig } from "../../contexts/TabbarDemoConfig";
+import { usePanelInteractions } from "../../../modules/panels/interactions/InteractionsContext";
+
+export const VSCodeTabBar: 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/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Tab bar style variants for demo pages.
+ */
+export { ChromeTabBar } from "./ChromeTabBar";
+export { VSCodeTabBar } from "./VSCodeTabBar";
+export { GitHubTabBar } from "./GitHubTabBar";

package/src/demo/components/ui/DemoButton.module.css

@@ -0,0 +1,63 @@
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--rpl-demo-font-family);
+    font-weight: 600;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s ease;
+    outline: none;
+}
+
+.button:hover {
+    transform: scale(1.03);
+}
+
+/* Size variants */
+.sm {
+    padding: 6px 12px;
+    font-size: var(--rpl-demo-font-size-sm);
+    border-radius: 16px;
+}
+
+.md {
+    padding: 10px 20px;
+    font-size: var(--rpl-demo-font-size-md);
+    border-radius: 24px;
+}
+
+.lg {
+    padding: 14px 28px;
+    font-size: var(--rpl-demo-font-size-lg);
+    border-radius: 32px;
+}
+
+/* Variant styles */
+.primary {
+    background: var(--rpl-demo-accent);
+    color: var(--rpl-demo-accent-contrast);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.secondary {
+    background: rgba(255, 255, 255, 0.8);
+    color: var(--rpl-demo-text-primary);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.secondary:hover {
+    background: rgba(255, 255, 255, 1);
+}
+
+.outline {
+    background: transparent;
+    color: var(--rpl-demo-text-primary);
+    border: 1px solid var(--rpl-demo-text-secondary);
+}
+
+.ghost {
+    background: transparent;
+    color: var(--rpl-demo-text-secondary);
+}

package/src/demo/components/ui/DemoButton.tsx

@@ -0,0 +1,32 @@
+/**
+ * @file Demo button component
+ */
+import * as React from "react";
+import styles from "./DemoButton.module.css";
+
+type DemoButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "primary" | "secondary" | "outline" | "ghost";
+    size?: "sm" | "md" | "lg";
+    children: React.ReactNode;
+};
+
+export const DemoButton: React.FC<DemoButtonProps> = ({
+    variant = "primary",
+    size = "md",
+    className = "",
+    children,
+    ...props
+}) => {
+    const classNames = [
+        styles.button,
+        styles[size],
+        styles[variant],
+        className,
+    ].filter(Boolean).join(" ");
+
+    return (
+        <button className={classNames} {...props}>
+            {children}
+        </button>
+    );
+};

package/src/demo/components/ui/DemoCard.module.css

@@ -0,0 +1,15 @@
+.card {
+    background: #fff;
+    border-radius: var(--rpl-demo-radius-xl);
+    padding: var(--rpl-demo-space-lg);
+    box-shadow: var(--rpl-demo-shadow-md);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    transition: var(--rpl-demo-transition);
+    position: relative;
+    overflow: hidden;
+}
+
+.hoverEffect:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--rpl-demo-shadow-lg);
+}