react-panel-layout 0.5.2 → 0.6.1

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

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

@@ -0,0 +1,30 @@
+/**
+ * @file Demo card component
+ */
+import * as React from "react";
+import styles from "./DemoCard.module.css";
+
+type DemoCardProps = React.HTMLAttributes<HTMLDivElement> & {
+    hoverEffect?: boolean;
+    children: React.ReactNode;
+};
+
+export const DemoCard: React.FC<DemoCardProps> = ({
+    hoverEffect = false,
+    className = "",
+    style,
+    children,
+    ...props
+}) => {
+    const classNames = [
+        styles.card,
+        hoverEffect ? styles.hoverEffect : "",
+        className,
+    ].filter(Boolean).join(" ");
+
+    return (
+        <div className={classNames} style={style} {...props}>
+            {children}
+        </div>
+    );
+};

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

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  height: 300px;
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  border-radius: var(--rpl-demo-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--rpl-demo-shadow-md);
+  background: #fff;
+}
+
+.tall {
+  height: 400px;
+}
+
+.medium {
+  height: 350px;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * @file Demo container component
+ */
+import * as React from "react";
+import styles from "./DemoContainer.module.css";
+
+type DemoContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    height?: "default" | "tall" | "medium";
+    children: React.ReactNode;
+};
+
+export const DemoContainer: React.FC<DemoContainerProps> = ({
+    height = "default",
+    className = "",
+    style,
+    children,
+    ...props
+}) => {
+    const classNames = [
+        styles.container,
+        height !== "default" ? styles[height] : "",
+        className,
+    ].filter(Boolean).join(" ");
+
+    return (
+        <div className={classNames} style={style} {...props}>
+            {children}
+        </div>
+    );
+};

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

@@ -0,0 +1,23 @@
+.panel {
+  padding: var(--rpl-demo-space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.flex {
+  flex: 1;
+}
+
+.default {
+  background: #fff;
+}
+
+.secondary {
+  background: var(--rpl-demo-surface-secondary);
+}
+
+.main {
+  background: #fff;
+  overflow: auto;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @file Demo panel component
+ */
+import * as React from "react";
+import styles from "./DemoPanel.module.css";
+
+type DemoPanelProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "default" | "secondary" | "main";
+    flex?: boolean;
+    children: React.ReactNode;
+};
+
+export const DemoPanel: React.FC<DemoPanelProps> = ({
+    variant = "default",
+    flex = false,
+    className = "",
+    style,
+    children,
+    ...props
+}) => {
+    const classNames = [
+        styles.panel,
+        styles[variant],
+        flex ? styles.flex : "",
+        className,
+    ].filter(Boolean).join(" ");
+
+    return (
+        <div className={classNames} style={style} {...props}>
+            {children}
+        </div>
+    );
+};

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

@@ -0,0 +1,18 @@
+.text {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  line-height: 1.5;
+}
+
+.default {
+  color: var(--rpl-demo-text-secondary);
+}
+
+.info {
+  color: var(--rpl-demo-text-secondary);
+  font-size: var(--rpl-demo-font-size-sm);
+}
+
+.muted {
+  color: var(--rpl-demo-text-tertiary);
+}

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

@@ -0,0 +1,29 @@
+/**
+ * @file Panel text component
+ */
+import * as React from "react";
+import styles from "./PanelText.module.css";
+
+type PanelTextProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    variant?: "default" | "info" | "muted";
+    children: React.ReactNode;
+};
+
+export const PanelText: React.FC<PanelTextProps> = ({
+    variant = "default",
+    className = "",
+    children,
+    ...props
+}) => {
+    const classNames = [
+        styles.text,
+        styles[variant],
+        className,
+    ].filter(Boolean).join(" ");
+
+    return (
+        <p className={classNames} {...props}>
+            {children}
+        </p>
+    );
+};

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

@@ -0,0 +1,18 @@
+.title {
+  margin: 0;
+  font-weight: 600;
+  color: var(--rpl-demo-text-primary);
+}
+
+.sm {
+  font-size: var(--rpl-demo-font-size-sm);
+}
+
+.md {
+  font-size: var(--rpl-demo-font-size-md);
+}
+
+.lg {
+  font-size: var(--rpl-demo-font-size-lg);
+  font-weight: 700;
+}

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

@@ -0,0 +1,31 @@
+/**
+ * @file Panel title component
+ */
+import * as React from "react";
+import styles from "./PanelTitle.module.css";
+
+type PanelTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    size?: "sm" | "md" | "lg";
+    children: React.ReactNode;
+};
+
+export const PanelTitle: React.FC<PanelTitleProps> = ({
+    as: Tag = "h4",
+    size = "md",
+    className = "",
+    children,
+    ...props
+}) => {
+    const classNames = [
+        styles.title,
+        styles[size],
+        className,
+    ].filter(Boolean).join(" ");
+
+    return (
+        <Tag className={classNames} {...props}>
+            {children}
+        </Tag>
+    );
+};

package/src/demo/contexts/TabbarDemoConfig.tsx

@@ -0,0 +1,218 @@
+/**
+ * @file Demo-only context to inject TabBar add/close button components and placement.
+ */
+import * as React from "react";
+
+export type TabStyle = "chrome" | "vscode" | "github";
+
+export type AddButtonPlacement = "trailing" | "after-active" | "after-tabs";
+
+export type DemoTabbarConfig = {
+  tabStyle: TabStyle;
+  addPlacement: AddButtonPlacement;
+  AddButton?: React.ComponentType<{ onClick: () => void; ariaLabel?: string; className?: string }>;
+  CloseButton?: React.ComponentType<{ onClick: (e: React.MouseEvent) => void; ariaLabel?: string; className?: string }>;
+};
+
+const defaultConfig: DemoTabbarConfig = {
+  tabStyle: "vscode",
+  addPlacement: "trailing",
+};
+
+const Ctx = React.createContext<DemoTabbarConfig>(defaultConfig);
+
+export const DemoTabbarConfigProvider: React.FC<React.PropsWithChildren<{ value: DemoTabbarConfig }>> = ({ value, children }) => {
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+};
+
+export const useDemoTabbarConfig = (): DemoTabbarConfig => React.useContext(Ctx);
+
+/** Shared hook for tab style configuration state */
+export const useTabbarConfigState = (): {
+  tabStyle: TabStyle;
+  setTabStyle: React.Dispatch<React.SetStateAction<TabStyle>>;
+  addPlacement: AddButtonPlacement;
+  setAddPlacement: React.Dispatch<React.SetStateAction<AddButtonPlacement>>;
+  doubleClickToAdd: boolean;
+  setDoubleClickToAdd: React.Dispatch<React.SetStateAction<boolean>>;
+  useCustomButtons: boolean;
+  setUseCustomButtons: React.Dispatch<React.SetStateAction<boolean>>;
+  AddButton: React.ComponentType<{ onClick: () => void; ariaLabel?: string; className?: string }> | undefined;
+  CloseButton: React.ComponentType<{ onClick: (e: React.MouseEvent) => void; ariaLabel?: string; className?: string }> | undefined;
+  configValue: DemoTabbarConfig;
+} => {
+  const [tabStyle, setTabStyle] = React.useState<TabStyle>("vscode");
+  const [addPlacement, setAddPlacement] = React.useState<AddButtonPlacement>("trailing");
+  const [doubleClickToAdd, setDoubleClickToAdd] = React.useState(true);
+  const [useCustomButtons, setUseCustomButtons] = React.useState(false);
+
+  const AddButton = React.useMemo(() => {
+    if (!useCustomButtons) {
+      return undefined;
+    }
+    const Comp: React.FC<{ onClick: () => void; ariaLabel?: string; className?: string }> = ({ onClick, ariaLabel, className }) => (
+      <button
+        type="button"
+        onClick={onClick}
+        aria-label={ariaLabel ?? "Add tab"}
+        className={className}
+        style={{ background: "#007acc", color: "#fff", border: "none", borderRadius: 4 }}
+      >
+        +
+      </button>
+    );
+    return Comp;
+  }, [useCustomButtons]);
+
+  const CloseButton = React.useMemo(() => {
+    if (!useCustomButtons) {
+      return undefined;
+    }
+    const Comp: React.FC<{ onClick: (e: React.MouseEvent) => void; ariaLabel?: string; className?: string }> = ({ onClick, ariaLabel, className }) => (
+      <button
+        type="button"
+        onClick={onClick}
+        aria-label={ariaLabel ?? "Close tab"}
+        className={className}
+        style={{ background: "transparent", color: "#d00", border: "none", fontWeight: 700 }}
+      >
+        ×
+      </button>
+    );
+    return Comp;
+  }, [useCustomButtons]);
+
+  const configValue = React.useMemo<DemoTabbarConfig>(
+    () => ({ tabStyle, addPlacement, AddButton, CloseButton }),
+    [tabStyle, addPlacement, AddButton, CloseButton],
+  );
+
+  return {
+    tabStyle,
+    setTabStyle,
+    addPlacement,
+    setAddPlacement,
+    doubleClickToAdd,
+    setDoubleClickToAdd,
+    useCustomButtons,
+    setUseCustomButtons,
+    AddButton,
+    CloseButton,
+    configValue,
+  };
+};
+
+
+export type TabbarConfigControlsProps = {
+  tabStyle: TabStyle;
+  setTabStyle: (style: TabStyle) => void;
+  addPlacement: AddButtonPlacement;
+  setAddPlacement: (placement: AddButtonPlacement) => void;
+  doubleClickToAdd: boolean;
+  setDoubleClickToAdd: (enabled: boolean) => void;
+  useCustomButtons: boolean;
+  setUseCustomButtons: (use: boolean) => void;
+};
+
+import { DemoButton } from "../components/ui/DemoButton";
+
+/** Shared UI controls for tabbar configuration */
+export const TabbarConfigControls: React.FC<TabbarConfigControlsProps> = ({
+  tabStyle,
+  setTabStyle,
+  addPlacement,
+  setAddPlacement,
+  doubleClickToAdd,
+  setDoubleClickToAdd,
+  useCustomButtons,
+  setUseCustomButtons,
+}) => (
+  <div
+    style={{
+      padding: "var(--rpl-demo-space-md)",
+      borderBottom: "1px solid var(--rpl-demo-sidebar-border)",
+      display: "flex",
+      gap: "var(--rpl-demo-space-sm)",
+      alignItems: "center",
+      flexWrap: "wrap",
+      background: "#fff",
+    }}
+  >
+    <label style={{ fontWeight: 600, marginRight: "var(--rpl-demo-space-sm)", fontSize: "var(--rpl-demo-font-size-sm)" }}>
+      Tab Style:
+    </label>
+    <DemoButton
+      variant={tabStyle === "chrome" ? "primary" : "outline"}
+      size="sm"
+      onClick={() => setTabStyle("chrome")}
+    >
+      Chrome
+    </DemoButton>
+    <DemoButton
+      variant={tabStyle === "vscode" ? "primary" : "outline"}
+      size="sm"
+      onClick={() => setTabStyle("vscode")}
+    >
+      VSCode
+    </DemoButton>
+    <DemoButton
+      variant={tabStyle === "github" ? "primary" : "outline"}
+      size="sm"
+      onClick={() => setTabStyle("github")}
+    >
+      GitHub
+    </DemoButton>
+    <div
+      style={{
+        marginLeft: "var(--rpl-demo-space-lg)",
+        display: "inline-flex",
+        gap: "var(--rpl-demo-space-sm)",
+        alignItems: "center",
+      }}
+    >
+      <label style={{ fontWeight: 600, fontSize: "var(--rpl-demo-font-size-sm)" }}>Add Button Placement:</label>
+      <select
+        value={addPlacement}
+        onChange={(e) => setAddPlacement(e.target.value as AddButtonPlacement)}
+        style={{
+          padding: "0.25rem 0.5rem",
+          borderRadius: "var(--rpl-demo-radius-md)",
+          border: "1px solid var(--rpl-demo-sidebar-border)",
+          fontSize: "var(--rpl-demo-font-size-sm)",
+          fontFamily: "inherit",
+        }}
+      >
+        <option value="trailing">Trailing (right edge)</option>
+        <option value="after-active">After Active Tab</option>
+        <option value="after-tabs">After Last Tab</option>
+      </select>
+    </div>
+    <label
+      style={{
+        display: "inline-flex",
+        gap: "var(--rpl-demo-space-xs)",
+        alignItems: "center",
+        fontSize: "var(--rpl-demo-font-size-sm)",
+        marginLeft: "var(--rpl-demo-space-md)",
+        cursor: "pointer",
+      }}
+    >
+      <input type="checkbox" checked={doubleClickToAdd} onChange={(e) => setDoubleClickToAdd(e.target.checked)} />
+      Double-click to add
+    </label>
+    <label
+      style={{
+        display: "inline-flex",
+        gap: "var(--rpl-demo-space-xs)",
+        alignItems: "center",
+        fontSize: "var(--rpl-demo-font-size-sm)",
+        marginLeft: "var(--rpl-demo-space-md)",
+        cursor: "pointer",
+      }}
+    >
+      <input type="checkbox" checked={useCustomButtons} onChange={(e) => setUseCustomButtons(e.target.checked)} />
+      Use custom styled +/×
+    </label>
+  </div>
+);
+