react-panel-layout 0.5.2 → 0.6.1

package/src/demo/pages/Pivot/components/SwipeTabsPivot.tsx

@@ -0,0 +1,320 @@
+/**
+ * @file Swipe Tabs Pivot demo - swipeable tabs with synchronized content
+ *
+ * Both tab and content areas respond to swipe gestures.
+ * Uses SwipePivotTabBar for tabs and scaleInputState for displacement sync.
+ * Demonstrates both indicator styles: standard active state and iOS-style sliding indicator.
+ */
+import * as React from "react";
+import { usePivot, scaleInputState, SwipePivotTabBar } from "../../../../pivot/index.js";
+import { usePivotSwipeInput } from "../../../../modules/pivot/usePivotSwipeInput.js";
+import { SwipePivotContent } from "../../../../modules/pivot/SwipePivotContent.js";
+import type { PivotItem, UsePivotResult, IndicatorRenderProps } from "../../../../pivot/index.js";
+import type { SwipeInputState } from "../../../../hooks/gesture/types.js";
+import styles from "./SwipeTabsPivot.module.css";
+
+type IndicatorStyle = "standard" | "sliding";
+
+type ContentItemsProps = {
+  items: PivotItem[];
+  pivot: UsePivotResult;
+  inputState: SwipeInputState;
+  containerWidth: number;
+};
+
+type TabBarProps = {
+  contentContainerWidth: number;
+  items: PivotItem[];
+  pivot: UsePivotResult;
+  tabInputState: SwipeInputState;
+  tabWidth: number;
+  indicatorStyle: IndicatorStyle;
+};
+
+/** Renders content items */
+const ContentItems: React.FC<ContentItemsProps> = ({ items, pivot, inputState, containerWidth }) => {
+  if (containerWidth <= 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {items.map((item) => {
+        const position = pivot.getVirtualPosition(item.id);
+        if (position === null) {
+          return null;
+        }
+
+        return (
+          <SwipePivotContent
+            key={item.id}
+            id={item.id}
+            isActive={pivot.isActive(item.id)}
+            position={position}
+            inputState={inputState}
+            axis="horizontal"
+            containerSize={containerWidth}
+            canNavigate={true}
+          >
+            {item.content}
+          </SwipePivotContent>
+        );
+      })}
+    </>
+  );
+};
+
+const TabBar: React.FC<TabBarProps> = ({
+  contentContainerWidth,
+  items,
+  pivot,
+  tabInputState,
+  tabWidth,
+  indicatorStyle,
+}) => {
+  if (contentContainerWidth <= 0) {
+    return null;
+  }
+
+  return (
+    <SwipePivotTabBar
+      items={items}
+      activeId={pivot.activeId}
+      activeIndex={pivot.activeIndex}
+      itemCount={pivot.itemCount}
+      inputState={tabInputState}
+      tabWidth={tabWidth}
+      viewportWidth={contentContainerWidth}
+      navigationMode={pivot.navigationMode}
+      fixedTabs={indicatorStyle === "sliding"}
+      renderTab={(item, isActive) => (
+        <button
+          className={indicatorStyle === "sliding" ? styles.tabIos : styles.tab}
+          data-active={isActive}
+          onClick={() => pivot.setActiveId(item.id)}
+        >
+          {item.label}
+        </button>
+      )}
+      renderIndicator={indicatorStyle === "sliding" ? SlidingIndicator : undefined}
+    />
+  );
+};
+
+const pageColors = ["#ffe0e0", "#e0ffe0", "#e0e0ff", "#fff0e0", "#f0e0ff"];
+
+const items: PivotItem[] = [
+  {
+    id: "tab1",
+    label: "Tab 1",
+    content: (
+      <div className={styles.pageContent} style={{ backgroundColor: pageColors[0] }}>
+        <h2>Tab 1 Content</h2>
+        <p>Swipe on the tabs above or the content area</p>
+        <p>Both areas are synchronized</p>
+      </div>
+    ),
+  },
+  {
+    id: "tab2",
+    label: "Tab 2",
+    content: (
+      <div className={styles.pageContent} style={{ backgroundColor: pageColors[1] }}>
+        <h2>Tab 2 Content</h2>
+        <p>Infinite loop navigation enabled</p>
+        <p>Swipe in any direction to continue</p>
+      </div>
+    ),
+  },
+  {
+    id: "tab3",
+    label: "Tab 3",
+    content: (
+      <div className={styles.pageContent} style={{ backgroundColor: pageColors[2] }}>
+        <h2>Tab 3 Content</h2>
+        <p>Try swiping on the tab bar</p>
+        <p>Content follows the same navigation</p>
+      </div>
+    ),
+  },
+  {
+    id: "tab4",
+    label: "Tab 4",
+    content: (
+      <div className={styles.pageContent} style={{ backgroundColor: pageColors[3] }}>
+        <h2>Tab 4 Content</h2>
+        <p>More tabs to navigate through</p>
+      </div>
+    ),
+  },
+  {
+    id: "tab5",
+    label: "Tab 5",
+    content: (
+      <div className={styles.pageContent} style={{ backgroundColor: pageColors[4] }}>
+        <h2>Tab 5 Content</h2>
+        <p>Last tab - swipe left to loop back to Tab 1</p>
+      </div>
+    ),
+  },
+];
+
+/** Get hint text for current swipe state */
+const getHintText = (phase: SwipeInputState["phase"], displacement: number): string => {
+  if (phase === "swiping") {
+    return `Swiping: ${Math.round(displacement)}px`;
+  }
+  return "Swipe tabs or content";
+};
+
+/** Sliding indicator component (iOS segmented control style) */
+const SlidingIndicator = ({ offsetPx, tabWidth, centerX }: IndicatorRenderProps): React.ReactNode => {
+  const padding = 4;
+  const indicatorWidth = tabWidth - padding * 2;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: centerX + padding,
+        top: "50%",
+        transform: `translateX(${offsetPx}px) translateY(-50%)`,
+        width: indicatorWidth,
+        height: 28,
+        backgroundColor: "#fff",
+        borderRadius: 7,
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08)",
+        willChange: "transform",
+        pointerEvents: "none",
+      }}
+    />
+  );
+};
+
+export const SwipeTabsPivot: React.FC = () => {
+  const mainContainerRef = React.useRef<HTMLDivElement>(null);
+  const contentContainerRef = React.useRef<HTMLDivElement>(null);
+  const [contentContainerWidth, setContentContainerWidth] = React.useState(0);
+  const [indicatorStyle, setIndicatorStyle] = React.useState<IndicatorStyle>("sliding");
+
+  // Per-tab width (each tab takes equal space in viewport)
+  const tabWidth = contentContainerWidth / items.length;
+
+  const pivot = usePivot({
+    items,
+    defaultActiveId: "tab1",
+    transitionMode: "none",
+    navigationMode: "loop",
+  });
+
+  // Use swipe input on the main container (covers both tabs and content)
+  const { inputState, containerProps } = usePivotSwipeInput({
+    containerRef: mainContainerRef,
+    pivot,
+    axis: "horizontal",
+    thresholds: {
+      distanceThreshold: 100,
+      velocityThreshold: 0.5,
+      lockThreshold: 15,
+    },
+  });
+
+  // Scale inputState for tabs: content swipe distance → tab swipe distance
+  const tabInputState = scaleInputState(inputState, contentContainerWidth, tabWidth);
+
+  // Measure container width
+  React.useEffect(() => {
+    const updateWidth = () => {
+      if (contentContainerRef.current) {
+        setContentContainerWidth(contentContainerRef.current.clientWidth);
+      }
+    };
+
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <h3 className={styles.title}>Swipeable Tabs Demo</h3>
+      <p className={styles.subtitle}>Swipe on tabs or content - both are synchronized</p>
+
+      {/* Indicator style toggle */}
+      <div className={styles.styleToggle}>
+        <span>Indicator Style:</span>
+        <button
+          className={styles.toggleButton}
+          data-active={indicatorStyle === "standard"}
+          onClick={() => setIndicatorStyle("standard")}
+        >
+          Standard
+        </button>
+        <button
+          className={styles.toggleButton}
+          data-active={indicatorStyle === "sliding"}
+          onClick={() => setIndicatorStyle("sliding")}
+        >
+          Sliding (iOS)
+        </button>
+      </div>
+
+      {/* Main swipe container wrapping both tabs and content */}
+      <div
+        ref={mainContainerRef}
+        className={styles.mainContainer}
+        {...containerProps}
+        style={containerProps.style}
+      >
+        {/* Swipeable tabs using SwipePivotTabBar */}
+        <div
+          className={styles.tabsContainer}
+          data-style={indicatorStyle === "sliding" ? "ios" : undefined}
+        >
+          <TabBar
+            contentContainerWidth={contentContainerWidth}
+            items={items}
+            pivot={pivot}
+            tabInputState={tabInputState}
+            tabWidth={tabWidth}
+            indicatorStyle={indicatorStyle}
+          />
+        </div>
+
+        {/* Content area - uses original inputState */}
+        <div ref={contentContainerRef} className={styles.contentContainer}>
+          <ContentItems
+            items={items}
+            pivot={pivot}
+            inputState={inputState}
+            containerWidth={contentContainerWidth}
+          />
+        </div>
+      </div>
+
+      {/* Navigation info */}
+      <div className={styles.info}>
+        <span>Tab {pivot.activeIndex + 1} of {pivot.itemCount}</span>
+        <span className={styles.hint}>
+          {getHintText(inputState.phase, inputState.displacement.x)}
+        </span>
+      </div>
+
+      {/* Manual navigation buttons */}
+      <div className={styles.buttons}>
+        <button
+          className={styles.navButton}
+          onClick={() => pivot.go(-1)}
+        >
+          Previous
+        </button>
+        <button
+          className={styles.navButton}
+          onClick={() => pivot.go(1)}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/Pivot/sidebar/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file Pivot - Sidebar page
+ */
+import * as React from "react";
+import { PivotSidebar } from "../components/PivotSidebar";
+import PivotSidebarSource from "../components/PivotSidebar.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="Pivot / Sidebar Navigation" code={PivotSidebarSource} codeTitle="PivotSidebar.tsx" previewHeight={450}>
+      <PivotSidebar />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Pivot/swipe/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * @file Pivot - Swipe Navigation demo page
+ */
+import * as React from "react";
+import { SwipePivot } from "../components/SwipePivot";
+
+// Temporarily render directly without SingleSamplePage to debug
+const Page: React.FC = () => {
+  return (
+    <div style={{ height: "100%", padding: "16px" }}>
+      <SwipePivot />
+    </div>
+  );
+};
+
+export default Page;

package/src/demo/pages/Pivot/swipe-debug/index.tsx

@@ -0,0 +1,287 @@
+/**
+ * @file Debug page for investigating iOS swipe issue
+ */
+import * as React from "react";
+import { usePivot } from "../../../../pivot/index.js";
+import { usePivotSwipeInput } from "../../../../modules/pivot/usePivotSwipeInput.js";
+import { SwipePivotContent } from "../../../../modules/pivot/SwipePivotContent.js";
+import type { PivotItem } from "../../../../pivot/index.js";
+import type { SwipeInputState } from "../../../../hooks/gesture/types.js";
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "500px",
+    gap: "16px",
+    padding: "16px",
+  },
+  indicators: {
+    display: "flex",
+    justifyContent: "center",
+    gap: "8px",
+  },
+  indicator: {
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    border: "none",
+    cursor: "pointer",
+    backgroundColor: "#ccc",
+  },
+  indicatorActive: {
+    backgroundColor: "#333",
+  },
+  swipeContainer: {
+    flex: 1,
+    minHeight: "250px",
+    position: "relative",
+    overflow: "hidden",
+    backgroundColor: "#f0f0f0",
+    borderRadius: "8px",
+  },
+  pageContent: {
+    padding: "24px",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  debugPanel: {
+    padding: "12px",
+    backgroundColor: "#1a1a1a",
+    color: "#00ff00",
+    fontFamily: "monospace",
+    fontSize: "12px",
+    borderRadius: "8px",
+    maxHeight: "200px",
+    overflow: "auto",
+  },
+  info: {
+    display: "flex",
+    justifyContent: "space-between",
+    padding: "8px 0",
+  },
+};
+
+const pageColors = ["#ffcccc", "#ccffcc", "#ccccff"];
+
+const items: PivotItem[] = [
+  {
+    id: "page1",
+    label: "Page 1",
+    content: (
+      <div style={{ ...styles.pageContent, backgroundColor: pageColors[0] }}>
+        <h2>Page 1</h2>
+        <p>Swipe left to see Page 2</p>
+      </div>
+    ),
+  },
+  {
+    id: "page2",
+    label: "Page 2",
+    content: (
+      <div style={{ ...styles.pageContent, backgroundColor: pageColors[1] }}>
+        <h2>Page 2</h2>
+        <p>Swipe left or right</p>
+      </div>
+    ),
+  },
+  {
+    id: "page3",
+    label: "Page 3",
+    content: (
+      <div style={{ ...styles.pageContent, backgroundColor: pageColors[2] }}>
+        <h2>Page 3</h2>
+        <p>Last page</p>
+      </div>
+    ),
+  },
+];
+
+type DebugLog = {
+  time: string;
+  message: string;
+};
+
+const SwipeDebugPage: React.FC = () => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [logs, setLogs] = React.useState<DebugLog[]>([]);
+
+  const addLog = React.useCallback((message: string) => {
+    const time = new Date().toISOString().split("T")[1].split(".")[0];
+    setLogs((prev) => [...prev.slice(-50), { time, message }]);
+  }, []);
+
+  const pivot = usePivot({
+    items,
+    defaultActiveId: "page1",
+    transitionMode: "none",
+  });
+
+  const { inputState, containerProps } = usePivotSwipeInput({
+    containerRef,
+    pivot,
+    axis: "horizontal",
+    thresholds: {
+      distanceThreshold: 150,
+      velocityThreshold: 0.6,
+      lockThreshold: 25,
+    },
+  });
+
+  // Log input state changes
+  const prevInputStateRef = React.useRef<SwipeInputState>(inputState);
+  React.useEffect(() => {
+    const prev = prevInputStateRef.current;
+    if (
+      prev.phase !== inputState.phase ||
+      prev.direction !== inputState.direction ||
+      Math.abs(prev.displacement.x - inputState.displacement.x) > 10
+    ) {
+      addLog(
+        `inputState: phase=${inputState.phase}, dir=${inputState.direction}, dx=${Math.round(inputState.displacement.x)}`
+      );
+      prevInputStateRef.current = inputState;
+    }
+  }, [inputState, addLog]);
+
+  // Log active index changes
+  const prevActiveIndexRef = React.useRef(pivot.activeIndex);
+  React.useEffect(() => {
+    if (prevActiveIndexRef.current !== pivot.activeIndex) {
+      addLog(`activeIndex: ${prevActiveIndexRef.current} -> ${pivot.activeIndex}`);
+      prevActiveIndexRef.current = pivot.activeIndex;
+    }
+  }, [pivot.activeIndex, addLog]);
+
+  // Measure container width
+  React.useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        const newWidth = containerRef.current.clientWidth;
+        if (newWidth !== containerWidth) {
+          addLog(`containerWidth: ${containerWidth} -> ${newWidth}`);
+          setContainerWidth(newWidth);
+        }
+      }
+    };
+
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, [containerWidth, addLog]);
+
+  // Calculate position offset for each item relative to active
+  const getPositionOffset = (itemId: string): number => {
+    const itemIndex = items.findIndex((item) => item.id === itemId);
+    return itemIndex - pivot.activeIndex;
+  };
+
+  // Convert offset to display position (-1, 0, 1)
+  const toDisplayPosition = (offset: number): -1 | 0 | 1 => {
+    if (offset < 0) {
+      return -1;
+    }
+    if (offset > 0) {
+      return 1;
+    }
+    return 0;
+  };
+
+  // Only render items within ±1 of active
+  const shouldRenderItem = (offset: number): boolean => {
+    return Math.abs(offset) <= 1;
+  };
+
+  return (
+    <div style={styles.container}>
+      <h3>iOS Swipe Debug</h3>
+
+      {/* Page indicators */}
+      <div style={styles.indicators}>
+        {items.map((item) => (
+          <button
+            key={item.id}
+            style={{
+              ...styles.indicator,
+              ...(pivot.isActive(item.id) ? styles.indicatorActive : {}),
+            }}
+            onClick={() => pivot.setActiveId(item.id)}
+            aria-label={`Go to ${item.label}`}
+          />
+        ))}
+      </div>
+
+      {/* Swipe area */}
+      <div
+        ref={containerRef}
+        {...containerProps}
+        style={{ ...styles.swipeContainer, ...containerProps.style }}
+      >
+        {items.map((item) => {
+          const offset = getPositionOffset(item.id);
+          if (!shouldRenderItem(offset)) {
+            return null;
+          }
+
+          const position = toDisplayPosition(offset);
+          const canNavigateToPosition = position === 0;
+          const canNavigate = canNavigateToPosition ? true : pivot.canGo(position);
+
+          return (
+            <SwipePivotContent
+              key={item.id}
+              id={item.id}
+              isActive={pivot.isActive(item.id)}
+              position={position}
+              inputState={inputState}
+              axis="horizontal"
+              containerSize={containerWidth}
+              canNavigate={canNavigate}
+            >
+              {item.content}
+            </SwipePivotContent>
+          );
+        })}
+      </div>
+
+      {/* Info */}
+      <div style={styles.info}>
+        <span>Page {pivot.activeIndex + 1} of {pivot.itemCount}</span>
+        <span>Width: {containerWidth}px</span>
+      </div>
+
+      {/* Debug logs */}
+      <div style={styles.debugPanel}>
+        {logs.map((log, i) => (
+          <div key={i}>
+            [{log.time}] {log.message}
+          </div>
+        ))}
+        {logs.length === 0 ? <div>No logs yet. Start swiping...</div> : null}
+      </div>
+
+      {/* Manual navigation */}
+      <div style={{ display: "flex", gap: "8px" }}>
+        <button
+          onClick={() => pivot.go(-1)}
+          disabled={!pivot.canGo(-1)}
+        >
+          Previous
+        </button>
+        <button
+          onClick={() => pivot.go(1)}
+          disabled={!pivot.canGo(1)}
+        >
+          Next
+        </button>
+        <button onClick={() => setLogs([])}>Clear Logs</button>
+      </div>
+    </div>
+  );
+};
+
+export default SwipeDebugPage;

package/src/demo/pages/Pivot/swipe-tabs/index.tsx

@@ -0,0 +1,15 @@
+/**
+ * @file Pivot - Swipe Tabs demo page
+ */
+import * as React from "react";
+import { SwipeTabsPivot } from "../components/SwipeTabsPivot.js";
+
+const Page: React.FC = () => {
+  return (
+    <div style={{ height: "100%", padding: "16px" }}>
+      <SwipeTabsPivot />
+    </div>
+  );
+};
+
+export default Page;

package/src/demo/pages/Pivot/tabs/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file Pivot - Tabs page
+ */
+import * as React from "react";
+import { PivotTabs } from "../components/PivotTabs";
+import PivotTabsSource from "../components/PivotTabs.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="Pivot / Tab Navigation" code={PivotTabsSource} codeTitle="PivotTabs.tsx" previewHeight={400}>
+      <PivotTabs />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Pivot/transitions/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * @file Pivot - Transitions page
+ */
+import * as React from "react";
+import { PivotTransitions } from "../components/PivotTransitions";
+import PivotTransitionsSource from "../components/PivotTransitions.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage title="Pivot / Transitions" code={PivotTransitionsSource} codeTitle="PivotTransitions.tsx" previewHeight={600}>
+      <PivotTransitions />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;