[pull] main from bvaughn:main

.github/workflows/playwright.yml

@@ -28,10 +28,10 @@ jobs:
       - name: Build library
         run: pnpm prerelease
       - name: Run Playwright tests
-        run: pnpm dev:integrations:vite & pnpm e2e:test
+        run: pnpm dev:integrations & pnpm e2e:test
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: playwright-report
-          path: integrations/vite/test-results/
+          path: integrations/tests/test-results/
           retention-days: 14

.gitignore

@@ -12,7 +12,7 @@ node_modules
 /docs
 *.local
 
-integrations/vite/test-results
+integrations/tests/test-results
 
 # Editor directories and files
 .vscode/*

integrations/next/app/decoder/[encoded]/Decoder.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+import { Decoder as DecoderExternal } from "../../../../tests";
+
+export function Decoder({
+  encoded: encodedProp,
+  searchParams: searchParamsMap
+}: {
+  encoded: string;
+  searchParams: { [key: string]: string | undefined } | undefined;
+}) {
+  const [encoded] = useState(() => decodeURIComponent(encodedProp));
+
+  const [searchParams] = useState(() => {
+    const params = new URLSearchParams();
+    for (const key in searchParamsMap) {
+      params.set(key, searchParamsMap[key] ?? "");
+    }
+
+    return params;
+  });
+
+  return <DecoderExternal encoded={encoded} searchParams={searchParams} />;
+}

integrations/next/app/decoder/[encoded]/page.tsx

@@ -0,0 +1,15 @@
+import { Decoder } from "./Decoder";
+
+export default async function Page({
+  params,
+  searchParams: searchParamsPromise
+}: {
+  params: Promise<{ encoded: string }>;
+  searchParams?: { [key: string]: string | undefined };
+}) {
+  const { encoded } = await params;
+
+  const searchParams = await searchParamsPromise;
+
+  return <Decoder encoded={encoded} searchParams={searchParams} />;
+}

integrations/next/app/layout.tsx

@@ -2,7 +2,7 @@
 
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import "./tailwind.css";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

integrations/next/app/page.tsx

@@ -1,67 +1,62 @@
 import { cookies } from "next/headers";
 import { type Layout, Panel, Separator } from "react-resizable-panels";
 import Group from "./components/Group";
+import { LayoutShiftDetecter } from "../../tests";
 
 export default async function Home() {
-  const defaultLayoutA = await getDefaultLayout("group-one");
-  const defaultLayoutB = await getDefaultLayout("group-two");
+  const defaultLayoutOne = await getDefaultLayout("group-one");
+  const defaultLayoutTwo = await getDefaultLayout("group-two");
 
   return (
     <div className="p-2 flex flex-col gap-2">
+      <LayoutShiftDetecter />
       <Group
         className="h-25 gap-2"
-        defaultLayout={defaultLayoutA}
+        defaultLayout={defaultLayoutOne}
         id="group-one"
       >
         <Panel
           className="bg-slate-800 rounded rounded-md p-2"
           id="left"
           minSize={50}
         >
-          left
+          id: left
         </Panel>
         <Panel
           className="bg-slate-800 rounded rounded-md p-2"
           id="center"
           minSize={50}
         >
-          center
+          id: center
         </Panel>
         <Panel
           className="bg-slate-800 rounded rounded-md p-2"
           id="right"
           minSize={50}
         >
-          right
+          id: right
         </Panel>
       </Group>
       <Group
-        className="h-25 gap-2"
-        defaultLayout={defaultLayoutB}
+        className="min-h-35 gap-2"
+        defaultLayout={defaultLayoutTwo}
         id="group-two"
+        orientation="vertical"
       >
         <Panel
           className="bg-slate-800 rounded rounded-md p-2"
-          id="left"
-          minSize={50}
+          id="top"
+          minSize={30}
         >
-          left
+          id: top
         </Panel>
-        <Separator className="w-2 rounded rounded-md bg-slate-700" />
+        <Separator className="h-2 rounded rounded-md bg-slate-700" />
         <Panel
           className="bg-slate-800 rounded rounded-md p-2"
-          id="right"
-          minSize={50}
+          id="bottom"
+          minSize={30}
         >
-          right
-        </Panel>
-      </Group>
-      <Group className="h-25 gap-2">
-        <Panel className="bg-slate-800 rounded rounded-md p-2" minSize={50}>
-          left
-        </Panel>
-        <Panel className="bg-slate-800 rounded rounded-md p-2" minSize={50}>
-          right
+          id: bottom
         </Panel>
       </Group>
     </div>

integrations/next/app/globals.css → integrations/next/app/tailwind.css

@@ -1,3 +1,5 @@
+@source "../../tests";
+
 @import "tailwindcss";
 
 :root {

integrations/next/tsconfig.json

@@ -17,7 +17,8 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
@@ -27,5 +28,6 @@
     "**/*.ts",
     "**/*.tsx"
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+  "tsconfigRootDir": ""
 }

integrations/tests/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "tests",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "npx playwright test"
+  },
+  "dependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-resizable-panels": "workspace:*",
+    "react-router": "^7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@playwright/test": "^1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5"
+  }
+}

integrations/vite/playwright.config.ts → integrations/tests/playwright.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   projects: [
     {
       name: "chromium",
-      timeout: 5_000,
+      timeout: 10_000,
       use: {
         ...devices["Desktop Chrome"],
         viewport: { width: 1000, height: 600 }

integrations/vite/src/components/Clickable.tsx → integrations/tests/src/components/Clickable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 
 export type ClickableProps = { className?: string; id?: string };