react-panel-layout 0.5.2 → 0.6.1

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

package/src/demo/hooks/useShikiHighlight.ts

@@ -0,0 +1,55 @@
+/**
+ * @file useShikiHighlight hook for syntax highlighting with shiki
+ */
+import * as React from "react";
+import { codeToHtml, type BundledLanguage, type BundledTheme } from "shiki";
+
+export type UseShikiHighlightOptions = {
+  code: string;
+  language?: BundledLanguage;
+  theme?: BundledTheme;
+};
+
+export type UseShikiHighlightResult = {
+  html: string;
+  isLoading: boolean;
+};
+
+/**
+ * Hook to highlight code using shiki
+ * Returns HTML string with syntax highlighting
+ */
+export function useShikiHighlight(options: UseShikiHighlightOptions): UseShikiHighlightResult {
+  const { code, language = "typescript", theme = "github-dark" } = options;
+  const [html, setHtml] = React.useState<string>("");
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    const abortController = new AbortController();
+    setIsLoading(true);
+
+    codeToHtml(code, {
+      lang: language,
+      theme: theme,
+    })
+      .then((result) => {
+        if (!abortController.signal.aborted) {
+          setHtml(result);
+          setIsLoading(false);
+        }
+      })
+      .catch((error) => {
+        console.error("Shiki highlighting failed:", error);
+        if (!abortController.signal.aborted) {
+          setHtml("");
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      abortController.abort();
+    };
+  }, [code, language, theme]);
+
+  return { html, isLoading };
+}

package/src/demo/index.tsx

@@ -0,0 +1,293 @@
+/**
+ * @file Demo page entry point with React Router
+ */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { HashRouter, Routes, Route, Outlet, Link } from "react-router";
+import { Layout } from "./Layout";
+import { PanelLayoutDemo } from "./pages/PanelLayout/PanelLayoutDemo";
+import { demoCategories } from "./routes";
+import * as React from "react";
+import { useMedia } from "./hooks/useMedia";
+import "./demo.css";
+import "./styles/animations.css";
+
+import { DemoButton } from "./components/ui/DemoButton";
+import { DemoCard } from "./components/ui/DemoCard";
+
+function Home() {
+  const isMediumViewport = useMedia("(max-width: 1200px)");
+  const isSmallViewport = useMedia("(max-width: 720px)");
+
+  const pagePaddingY = isSmallViewport ? "var(--rpl-demo-space-xl)" : "var(--rpl-demo-space-xxl)";
+  const pagePaddingX = isSmallViewport ? "var(--rpl-demo-space-md)" : "var(--rpl-demo-space-lg)";
+  const heroGlowWidth = isSmallViewport ? "360px" : isMediumViewport ? "480px" : "600px";
+  const heroGlowHeight = isSmallViewport ? "260px" : isMediumViewport ? "340px" : "400px";
+  const heroTitleSize = isSmallViewport ? "var(--rpl-demo-font-size-display-sm)" : "var(--rpl-demo-font-size-display)";
+  const heroLeadSize = isSmallViewport ? "var(--rpl-demo-font-size-md)" : "var(--rpl-demo-font-size-lg)";
+  const heroMarginBottom = isSmallViewport ? "var(--rpl-demo-space-xl)" : "var(--rpl-demo-space-xxl)";
+  const actionGap = isSmallViewport ? "12px" : "16px";
+  const actionWrap = isSmallViewport ? "wrap" : "nowrap";
+  const gridColumns = isSmallViewport ? "1fr" : isMediumViewport ? "repeat(2, 1fr)" : "repeat(3, 1fr)";
+  const gridAutoRows = isSmallViewport ? "minmax(200px, auto)" : "minmax(240px, auto)";
+  const wideCardSpan = isSmallViewport ? 1 : 2;
+  const wideCardColumnStyle = wideCardSpan > 1 ? { gridColumn: `span ${wideCardSpan}` } : {};
+
+  return (
+    <div
+      style={{
+        background: "var(--rpl-demo-gradient-hero)",
+        padding: `${pagePaddingY} ${pagePaddingX}`,
+        fontFamily: "var(--rpl-demo-font-family)",
+        color: "var(--rpl-demo-text-primary)",
+      }}
+    >
+      {/* Hero Section */}
+      <div
+        style={{
+          maxWidth: "1000px",
+          margin: "0 auto",
+          textAlign: "center",
+          marginBottom: heroMarginBottom,
+          position: "relative",
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: heroGlowWidth,
+            height: heroGlowHeight,
+            background: "var(--rpl-demo-gradient-glow)",
+            pointerEvents: "none",
+            zIndex: 0,
+          }}
+        />
+        <div style={{ position: "relative", zIndex: 1 }}>
+          <div
+            style={{
+              display: "inline-block",
+              padding: "6px 12px",
+              borderRadius: "20px",
+              background: "rgba(0,0,0,0.05)",
+              backdropFilter: "blur(10px)",
+              fontSize: "var(--rpl-demo-font-size-sm)",
+              fontWeight: 600,
+              marginBottom: "var(--rpl-demo-space-lg)",
+              border: "1px solid rgba(0,0,0,0.05)",
+            }}
+          >
+            {__APP_VERSION__}
+          </div>
+          <h1
+            style={{
+              fontSize: heroTitleSize,
+              lineHeight: 1.1,
+              fontWeight: 700,
+              letterSpacing: "-0.03em",
+              marginBottom: "var(--rpl-demo-space-lg)",
+              background: "var(--rpl-demo-gradient-text)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+            }}
+          >
+            The Ultimate Panel Layout
+            <br />
+            for React Applications.
+          </h1>
+          <p
+            style={{
+              fontSize: heroLeadSize,
+              lineHeight: 1.5,
+              color: "var(--rpl-demo-text-secondary)",
+              maxWidth: isSmallViewport ? "100%" : "640px",
+              margin: "0 auto var(--rpl-demo-space-xl)",
+            }}
+          >
+            Build complex, resizable, and drag-and-drop interfaces with ease.
+            Powered by CSS Grid and designed for performance.
+          </p>
+          <div style={{ display: "flex", gap: actionGap, justifyContent: "center", flexWrap: actionWrap }}>
+            <Link to="/components/panel-layout/simple-grid" style={{ textDecoration: "none" }}>
+              <DemoButton variant="primary" size="lg">
+                Get Started
+              </DemoButton>
+            </Link>
+            <Link to="/components/panel-system/preview" style={{ textDecoration: "none" }}>
+              <DemoButton variant="secondary" size="lg">
+                View Documentation
+              </DemoButton>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Bento Grid */}
+      <div
+        style={{
+          maxWidth: "1000px",
+          margin: "0 auto",
+          display: "grid",
+          gridTemplateColumns: gridColumns,
+          gridAutoRows,
+          gap: "var(--rpl-demo-space-lg)",
+        }}
+      >
+        {/* Card 1: Grid System (Large) */}
+        <DemoCard
+          hoverEffect
+          style={{
+            ...wideCardColumnStyle,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: "300px",
+              height: "300px",
+              background: "radial-gradient(circle at 100% 0%, rgba(0,113,227,0.08) 0%, transparent 70%)",
+            }}
+          />
+          <div>
+            <h3 style={{ fontSize: "24px", fontWeight: 700, marginBottom: "8px" }}>Grid System</h3>
+            <p style={{ fontSize: "16px", color: "var(--rpl-demo-text-secondary)", maxWidth: "80%" }}>
+              Leverage the full power of CSS Grid for pixel-perfect layouts that adapt to any screen size.
+            </p>
+          </div>
+          <div
+            style={{
+              marginTop: "24px",
+              height: "120px",
+              background: "rgba(0,0,0,0.03)",
+              borderRadius: "var(--rpl-demo-radius-md)",
+              border: "1px dashed rgba(0,0,0,0.1)",
+              display: "grid",
+              gridTemplateColumns: "1fr 2fr",
+              gap: "8px",
+              padding: "8px",
+            }}
+          >
+            <div style={{ background: "rgba(0,113,227,0.1)", borderRadius: "4px" }} />
+            <div style={{ background: "rgba(0,113,227,0.05)", borderRadius: "4px" }} />
+          </div>
+        </DemoCard>
+
+        {/* Card 2: Interactive */}
+        <DemoCard
+          hoverEffect
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            textAlign: "center",
+          }}
+        >
+          <div style={{ fontSize: "48px", marginBottom: "16px" }}>👆</div>
+          <h3 style={{ fontSize: "20px", fontWeight: 700, marginBottom: "8px" }}>Interactive</h3>
+          <p style={{ fontSize: "14px", color: "var(--rpl-demo-text-secondary)" }}>
+            Native-like drag and drop with smooth physics.
+          </p>
+        </DemoCard>
+
+        {/* Card 3: Performance */}
+        <DemoCard
+          hoverEffect
+          style={{
+            background: "#1d1d1f",
+            color: "#fff",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+          }}
+        >
+          <h3 style={{ fontSize: "20px", fontWeight: 700, marginBottom: "8px" }}>Zero Lag</h3>
+          <p style={{ fontSize: "14px", color: "rgba(255,255,255,0.7)" }}>
+            Optimized for 60fps rendering even with complex layouts.
+          </p>
+        </DemoCard>
+
+        {/* Card 4: Customizable (Wide) */}
+        <DemoCard
+          hoverEffect
+          style={{
+            ...wideCardColumnStyle,
+            display: "flex",
+            alignItems: "center",
+            gap: "24px",
+          }}
+        >
+          <div style={{ flex: 1 }}>
+            <h3 style={{ fontSize: "24px", fontWeight: 700, marginBottom: "8px" }}>Fully Customizable</h3>
+            <p style={{ fontSize: "16px", color: "var(--rpl-demo-text-secondary)" }}>
+              Style every component to match your brand. From resize handles to drop indicators.
+            </p>
+          </div>
+          <div
+            style={{
+              width: "120px",
+              height: "120px",
+              background: "linear-gradient(135deg, #FF2D55 0%, #FF375F 100%)",
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#fff",
+              fontWeight: 700,
+              fontSize: "24px",
+              boxShadow: "0 10px 20px rgba(255, 45, 85, 0.3)",
+            }}
+          >
+            Aa
+          </div>
+        </DemoCard>
+      </div>
+    </div>
+  );
+}
+
+
+function App() {
+  const CategoryOutlet: React.FC = () => {
+    return <Outlet />;
+  };
+
+  return (
+    <HashRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="panel-demo" element={<PanelLayoutDemo />} />
+          {demoCategories.map((cat) => (
+            <Route key={cat.id} path={cat.base.slice(1)} element={<CategoryOutlet />}>
+              {cat.pages.map((page) => (
+                <Route
+                  key={page.id}
+                  path={page.path}
+                  element={<React.Suspense fallback={null}>{page.element}</React.Suspense>}
+                />
+              ))}
+            </Route>
+          ))}
+        </Route>
+      </Routes>
+    </HashRouter>
+  );
+}
+
+const root = document.getElementById("root");
+if (root) {
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+}

package/src/demo/pages/Dialog/alerts/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Dialog - Alerts page
+ */
+import * as React from "react";
+import { AlertDialogDemo } from "../components/AlertDialogDemo";
+import AlertDialogDemoSource from "../components/AlertDialogDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Dialog / Alert, Confirm, Prompt"
+      code={AlertDialogDemoSource}
+      codeTitle="AlertDialogDemo.tsx"
+      previewHeight={520}
+    >
+      <AlertDialogDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Dialog/card/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Dialog - Card Expansion page (Apple Music style)
+ */
+import * as React from "react";
+import { CardExpandDemo } from "../components/CardExpandDemo.js";
+import CardExpandDemoSource from "../components/CardExpandDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout/index.js";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Dialog / Card Expansion"
+      code={CardExpandDemoSource}
+      codeTitle="CardExpandDemo.tsx"
+      previewHeight={600}
+    >
+      <CardExpandDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;