react-panel-layout 0.5.1 → 0.6.0

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

package/src/demo/demo.css

@@ -0,0 +1,172 @@
+/**
+ * Demo styles
+ */
+
+:root {
+  /* Modern LP / Bento Design Tokens */
+
+  /* Colors & Gradients */
+  --rpl-demo-bg: #ffffff;
+  --rpl-demo-sidebar-bg: #ffffff;
+  /* Reverted to white */
+  --rpl-demo-sidebar-border: rgba(0, 0, 0, 0.06);
+
+  --rpl-demo-text-primary: #000000;
+  --rpl-demo-text-secondary: #666666;
+  --rpl-demo-text-tertiary: #999999;
+
+  --rpl-demo-accent: #000000;
+  /* Bold black for primary actions */
+  --rpl-demo-accent-hover: #333333;
+  --rpl-demo-accent-contrast: #ffffff;
+
+  --rpl-demo-gradient-hero: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F5F5F7 100%);
+  --rpl-demo-gradient-text: linear-gradient(135deg, #000000 0%, #444444 100%);
+  --rpl-demo-gradient-glow: radial-gradient(circle at 50% 50%, rgba(0, 113, 227, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
+
+  --rpl-demo-control-bg: rgba(0, 0, 0, 0.04);
+  --rpl-demo-control-bg-hover: rgba(0, 0, 0, 0.08);
+  --rpl-demo-control-bg-active: rgba(0, 0, 0, 0.12);
+
+  /* Typography */
+  --rpl-demo-font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --rpl-demo-font-size-xs: 12px;
+  --rpl-demo-font-size-sm: 14px;
+  --rpl-demo-font-size-md: 16px;
+  --rpl-demo-font-size-lg: 20px;
+  --rpl-demo-font-size-xl: 24px;
+  --rpl-demo-font-size-display: 56px;
+  --rpl-demo-font-size-display-sm: 40px;
+
+  /* Spacing & Layout */
+  --rpl-demo-radius-sm: 8px;
+  --rpl-demo-radius-md: 12px;
+  --rpl-demo-radius-lg: 24px;
+  --rpl-demo-radius-xl: 32px;
+
+  --rpl-demo-space-xs: 4px;
+  --rpl-demo-space-sm: 8px;
+  --rpl-demo-space-md: 16px;
+  --rpl-demo-space-lg: 24px;
+  --rpl-demo-space-xl: 48px;
+  --rpl-demo-space-xxl: 80px;
+
+  /* Shadows */
+  --rpl-demo-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
+  --rpl-demo-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.04);
+  --rpl-demo-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.08);
+  --rpl-demo-shadow-hero: 0 40px 80px rgba(0, 0, 0, 0.12);
+
+  /* Transitions */
+  --rpl-demo-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  /* Apple-like springy ease */
+
+  /* Legacy/Compat variables */
+  --rpl-demo-control-background: var(--rpl-demo-control-bg);
+  --rpl-demo-control-background-secondary: rgba(0, 0, 0, 0.03);
+  --rpl-demo-input-border: 1px solid rgba(0, 0, 0, 0.1);
+  --rpl-demo-text-color: var(--rpl-demo-text-primary);
+  --rpl-demo-header-text-color: var(--rpl-demo-text-primary);
+  --rpl-demo-border-color: var(--rpl-demo-sidebar-border);
+  --rpl-demo-border-width: 1px;
+  --rpl-demo-surface-secondary: #f5f5f7;
+  --rpl-demo-title-font: 600 14px var(--rpl-demo-font-family);
+  --rpl-demo-control-button-size: 32px;
+  --rpl-demo-hover-background: var(--rpl-demo-control-bg-hover);
+  --rpl-demo-transition-duration: 400ms;
+  --rpl-demo-card-box-shadow: var(--rpl-demo-shadow-sm);
+  --rpl-demo-card-hover-box-shadow: var(--rpl-demo-shadow-md);
+  --rpl-demo-color-primary: #0071e3;
+  /* Keep blue for functional UI elements */
+
+  /* Panel split drop suggestion colors */
+  --rpl-color-drop-suggest-border: #0071e3;
+  --rpl-color-drop-suggest-bg: rgba(0, 113, 227, 0.1);
+
+  /* Resize/Divider colors */
+  --rpl-color-resize-handle-idle: rgba(0, 0, 0, 0.00);
+  --rpl-color-resize-handle-hover: rgba(33, 150, 243, 0.35);
+  --rpl-color-resize-handle-active: rgba(33, 150, 243, 0.55);
+
+  /* Library theme defaults (override CSS variables as needed) */
+  --rpl-color-tab-fg: #d5d7de;
+  --rpl-color-tab-active-bg: #2b2d35;
+  --rpl-color-tabbar-bg: #1e1f24;
+  --rpl-color-panel-border: rgba(0, 0, 0, 0.3);
+  --rpl-color-panel-bg: #0b0b0c;
+  --rpl-color-primary: #2196f3;
+  --rpl-color-tabdrag-bg: rgba(34, 36, 42, 0.95);
+  --rpl-color-tabdrag-fg: #e9ebf0;
+  --rpl-color-tabdrag-border: rgba(120, 160, 255, 0.6);
+  --rpl-color-tabdrag-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+  --rpl-color-insert-guide: rgba(120, 160, 255, 0.95);
+  --rpl-color-insert-guide-shadow: 0 0 0 2px rgba(120, 160, 255, 0.2);
+  --rpl-color-surface: #fff;
+  --rpl-color-surface-2: #fafafa;
+  --rpl-color-border: #e5e7eb;
+  --rpl-color-muted-fg: #6b7280;
+  --rpl-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08);
+
+  --rpl-size-tab-font: 12px;
+  --rpl-space-tab-padding-y: 4px;
+  --rpl-space-tab-padding-x: 8px;
+  --rpl-space-tabbar-gap: 6px;
+  --rpl-space-tabbar-padding-y: 4px;
+  --rpl-space-tabbar-padding-x: 6px;
+  --rpl-radius-tab: 4px;
+  --rpl-radius-suggest: 6px;
+  --rpl-size-suggest-border: 2px;
+  --rpl-size-grid-handle-thickness: 4px;
+  --rpl-size-resize-handle-thickness: 4px;
+  --rpl-size-split-handle-thickness: 6px;
+  --rpl-space-drop-suggest-padding: 6px;
+
+  --rpl-z-overlay: 9998;
+  --rpl-z-tabdrag-overlay: 9999;
+  --rpl-z-dialog-overlay: 10000;
+  --rpl-z-resize-handle: 1000;
+
+  --rpl-size-grid-layer-corner-hit: 14px;
+  --rpl-size-grid-layer-edge-hit-thickness: 12px;
+
+  --rpl-space-tab-drag-preview-offset-x: 12px;
+  --rpl-space-tab-drag-preview-offset-y: 12px;
+  --rpl-radius-tab-drag-preview: 6px;
+  --rpl-space-tab-drag-preview-padding-y: 4px;
+  --rpl-space-tab-drag-preview-padding-x: 8px;
+  --rpl-size-tab-drag-preview-font: 12px;
+  --rpl-size-tab-drag-insert-guide-width: 2px;
+  --rpl-radius-tab-drag-insert-guide: 1px;
+
+  --rpl-radius-floating-panel: 8px;
+  --rpl-space-floating-panel-gap: 8px;
+  --rpl-space-floating-panel-header-padding-y: 8px;
+  --rpl-space-floating-panel-header-padding-x: 12px;
+  --rpl-space-floating-panel-content-padding: 12px;
+  --rpl-size-floating-panel-meta-font: 12px;
+  --rpl-space-floating-panel-controls-gap: 6px;
+
+  --rpl-space-drawer-header-padding-y: 10px;
+  --rpl-space-drawer-header-padding-x: 12px;
+  --rpl-space-drawer-header-gap: 8px;
+  --rpl-space-drawer-content-padding: 12px;
+  --rpl-size-drawer-close-button-font: 18px;
+
+  --rpl-size-horizontal-divider-width: 4px;
+  --rpl-space-horizontal-divider-hit-area-offset: 4px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+#root {
+  min-width: 100vw;
+  height: auto;
+}

package/src/demo/hooks/useMedia.ts

@@ -0,0 +1,41 @@
+/**
+ * @file Media query matcher hook for demo pages.
+ */
+import * as React from "react";
+
+const getInitialMatch = (mediaQuery: string): boolean => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+
+  return window.matchMedia(mediaQuery).matches;
+};
+
+export const useMedia = (mediaQuery: string): boolean => {
+  if (!mediaQuery || mediaQuery.trim().length === 0) {
+    throw new Error("useMedia requires a non-empty mediaQuery string.");
+  }
+
+  const [matches, setMatches] = React.useState<boolean>(() => getInitialMatch(mediaQuery));
+
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      setMatches(false);
+      return;
+    }
+
+    const mediaList = window.matchMedia(mediaQuery);
+    const handleChange = (event: MediaQueryListEvent): void => {
+      setMatches(event.matches);
+    };
+
+    setMatches(mediaList.matches);
+    mediaList.addEventListener("change", handleChange);
+
+    return () => {
+      mediaList.removeEventListener("change", handleChange);
+    };
+  }, [mediaQuery]);
+
+  return matches;
+};