react-panel-layout 0.5.2 → 0.6.0

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/Drawer/animations/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Drawer - Animations comparison page
+ */
+import * as React from "react";
+import { DrawerAnimations } from "../components/DrawerAnimations";
+import DrawerAnimationsSource from "../components/DrawerAnimations.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Drawer / Animations"
+      code={DrawerAnimationsSource}
+      codeTitle="DrawerAnimations.tsx"
+      previewHeight={480}
+    >
+      <DrawerAnimations />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Drawer/basics/index.tsx

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

package/src/demo/pages/Drawer/components/DrawerAnimations.module.css

@@ -0,0 +1,125 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.intro {
+  text-align: center;
+}
+
+.intro h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.intro p {
+  margin: 0;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+  flex: 1;
+  min-height: 0;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.cardHeader {
+  padding: 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f8f9fa;
+}
+
+.cardHeader h3 {
+  margin: 0 0 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.cardHeader p {
+  margin: 0;
+  font-size: 0.75rem;
+  color: #666;
+}
+
+.cardBody {
+  flex: 1;
+  position: relative;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fafafa;
+}
+
+.drawerContent {
+  padding: 1rem;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.drawerContent h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.drawerContent ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.drawerContent li {
+  padding: 0.5rem;
+  background: #f0f0f0;
+  border-radius: 4px;
+  font-size: 0.8rem;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badgeNone {
+  background: #e0e0e0;
+  color: #666;
+}
+
+.badgeCss {
+  background: #e3f2fd;
+  color: #1565c0;
+}
+
+.badgeViewTransition {
+  background: #f3e5f5;
+  color: #7b1fa2;
+}

package/src/demo/pages/Drawer/components/DrawerAnimations.tsx

@@ -0,0 +1,118 @@
+/**
+ * @file Drawer animation modes comparison demo
+ */
+import * as React from "react";
+import { GridLayout } from "../../../../components/grid/GridLayout";
+import type { LayerDefinition, PanelLayoutConfig, DrawerBehavior } from "../../../../types";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DrawerAnimations.module.css";
+
+type TransitionMode = DrawerBehavior["transitionMode"];
+
+type DrawerCardProps = {
+  mode: TransitionMode;
+  label: string;
+  description: string;
+  badgeClass: string;
+};
+
+const DrawerContent: React.FC<{ onClose: () => void }> = ({ onClose }) => (
+  <div className={styles.drawerContent}>
+    <h4>Sample Menu</h4>
+    <ul>
+      <li>Dashboard</li>
+      <li>Settings</li>
+      <li>Profile</li>
+    </ul>
+    <DemoButton variant="secondary" size="sm" onClick={onClose}>
+      Close
+    </DemoButton>
+  </div>
+);
+
+const DrawerCard: React.FC<DrawerCardProps> = ({ mode, label, description, badgeClass }) => {
+  const [open, setOpen] = React.useState(false);
+
+  const config = React.useMemo<PanelLayoutConfig>(
+    () => ({
+      areas: [["main"]],
+      rows: [{ size: "1fr" }],
+      columns: [{ size: "1fr" }],
+      gap: "0",
+    }),
+    [],
+  );
+
+  const layers = React.useMemo<LayerDefinition[]>(
+    () => [
+      {
+        id: "main",
+        gridArea: "main",
+        component: (
+          <DemoButton variant="primary" size="md" onClick={() => setOpen(true)}>
+            Open
+          </DemoButton>
+        ),
+      },
+      {
+        id: `drawer-${mode}`,
+        component: <DrawerContent onClose={() => setOpen(false)} />,
+        drawer: {
+          open,
+          onStateChange: setOpen,
+          dismissible: true,
+          transitionMode: mode,
+          transitionDuration: "300ms",
+          transitionEasing: "cubic-bezier(0.22, 1, 0.36, 1)",
+          header: { title: `${label} Drawer` },
+          inline: true,
+        },
+        position: { left: 0 },
+        width: 180,
+        height: "100%",
+        zIndex: 10,
+      },
+    ],
+    [mode, label, open],
+  );
+
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardHeader}>
+        <h3>
+          {label} <span className={`${styles.badge} ${badgeClass}`}>{mode}</span>
+        </h3>
+        <p>{description}</p>
+      </div>
+      <div className={styles.cardBody}>
+        <GridLayout config={config} layers={layers} />
+      </div>
+    </div>
+  );
+};
+
+export const DrawerAnimations: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.intro}>
+        <h2>Drawer Transition Modes</h2>
+        <p>Compare different animation strategies for drawer open/close transitions.</p>
+      </div>
+
+      <div className={styles.grid}>
+        <DrawerCard
+          mode="none"
+          label="No Animation"
+          description="Instant show/hide without transitions."
+          badgeClass={styles.badgeNone}
+        />
+        <DrawerCard
+          mode="css"
+          label="CSS Transition"
+          description="Smooth transform animation via CSS."
+          badgeClass={styles.badgeCss}
+        />
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/Drawer/components/DrawerBasics.module.css

@@ -0,0 +1,55 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--rpl-demo-radius-lg);
+  border: 1px solid var(--rpl-demo-sidebar-border);
+  background: #f8fafc;
+  box-shadow: var(--rpl-demo-shadow-md);
+}
+
+.hero {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  gap: var(--rpl-demo-space-md);
+  color: #0f172a;
+}
+
+.lead {
+  margin: 0;
+  max-width: 520px;
+  text-align: center;
+  color: #475569;
+  line-height: 1.5;
+}
+
+.drawerContent {
+  padding: var(--rpl-demo-space-lg);
+  display: grid;
+  gap: var(--rpl-demo-space-md);
+}
+
+.drawerList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+
+.drawerItem {
+  padding: 0.75rem 0.9rem;
+  border-radius: var(--rpl-demo-radius-md);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: #ffffff;
+  color: #0f172a;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.drawerItem small {
+  color: #475569;
+}