Support overflowing content like drop-shadows

bvaughn · bvaughn · commit e47e1d364b04 · 2026-03-01T16:49:55.000-05:00
diff --git a/.prettierignore b/.prettierignore
@@ -3,4 +3,6 @@
 /generated
 /public
 
+src/routes/examples/*.html
+
 integrations/next/.next
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,12 @@
 # Changelog
 
+## 4.7.1 (Unreleased)
+
+- [678](https://github.com/bvaughn/react-resizable-panels/pull/678): Change default overflow styles to support shadows
+
 ## 4.7.0
 
-= [677](https://github.com/bvaughn/react-resizable-panels/pull/677): Add `groupResizeBehavior` prop to `Panel`, enabling panels to retain their current size (pixels) size when the parent `Group` is resized.
+- [677](https://github.com/bvaughn/react-resizable-panels/pull/677): Add `groupResizeBehavior` prop to `Panel`, enabling panels to retain their current size (pixels) size when the parent `Group` is resized.
 
 ## 4.6.5
 
diff --git a/integrations/tests/src/components/PanelText.tsx b/integrations/tests/src/components/PanelText.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 
 export function PanelText({ children }: PropsWithChildren) {
   return (
-    <div className="w-full h-full flex flex-col items-center justify-center p-1">
+    <div className="w-full min-h-full flex flex-col items-center justify-center p-1">
       {children}
     </div>
   );
diff --git a/integrations/tests/tests/cursor.spec.tsx b/integrations/tests/tests/cursor.spec.tsx
@@ -91,7 +91,7 @@ test.describe("cursor", () => {
         <Panel id="top" minSize="25%" />
         <Separator id="vertical-separator" />
         <Panel id="bottom" minSize="25%">
-          <Group orientation="horizontal">
+          <Group className="relative top-[-5rem]" orientation="horizontal">
             <Panel id="left" minSize="25%" />
             <Separator />
             <Panel id="right" minSize="25%" />
@@ -178,7 +178,7 @@ test.describe("cursor", () => {
         <Panel id="top" minSize="25%" />
         <Separator id="vertical-separator" />
         <Panel id="bottom" minSize="25%">
-          <Group orientation="horizontal">
+          <Group className="relative top-[-5rem]" orientation="horizontal">
             <Panel id="left" minSize="25%" />
             <Separator />
             <Panel id="right" minSize="25%" />
diff --git a/lib/components/group/Group.tsx b/lib/components/group/Group.tsx
@@ -363,7 +363,7 @@ export function Group({
         style={{
           height: "100%",
           width: "100%",
-          overflow: "hidden",
+          overflow: "visible",
 
           ...style,
 
diff --git a/lib/components/panel/Panel.tsx b/lib/components/panel/Panel.tsx
@@ -160,9 +160,7 @@ export function Panel({
         display: "flex",
         flexBasis: 0,
         flexShrink: 1,
-
-        // Prevent Panel content from interfering with panel size
-        overflow: "hidden",
+        overflow: "visible",
 
         ...JSON.parse(panelStylesString)
       }}
@@ -173,6 +171,7 @@ export function Panel({
           maxHeight: "100%",
           maxWidth: "100%",
           flexGrow: 1,
+          overflow: "auto",
 
           ...style,
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "4.7.0",
+  "version": "4.7.1-alpha.0",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [
@@ -95,7 +95,7 @@
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
-    "react-lib-tools": "^0.0.34",
+    "react-lib-tools": "0.0.35",
     "react-router-dom": "^7.6.3",
     "rimraf": "^6.1.2",
     "rollup-plugin-terser": "^7.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/generated/examples/GroupAndPanelElements.json b/public/generated/examples/GroupAndPanelElements.json
@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-comment\">&#60;!-- &#9883;️ Group --&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-group</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">  </span><span class=\"tok-comment\">&#60;!-- &#9883;️ Panel --&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">auto</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\">      </span><span class=\"tok-comment\">&#60;!-- The stuff you render goes here --&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}
diff --git a/public/generated/examples/LayoutBasicsHorizontal.json b/public/generated/examples/LayoutBasicsHorizontal.json
@@ -1,3 +1,3 @@
 {
-  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">left</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">right</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">&#62;</span></div>"
+  "html": "<div><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Group</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Panel</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-resizable-panels\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div>&nbsp;</div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">left</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">right</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">&#62;</span></div>"
 }
diff --git a/public/generated/examples/PanelDropShadow.json b/public/generated/examples/PanelDropShadow.json
@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"shadow-md shadow-fuchsia-600\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  left</span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}
diff --git a/public/generated/examples/PanelFocusOutline.json b/public/generated/examples/PanelFocusOutline.json
@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"focus-within:z-10 focus-within:outline-2 outline-solid\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">input</span><span class=\"\"> </span><span class=\"tok-propertyName\">placeholder</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"left input\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}
diff --git a/public/generated/examples/PanelTooltip.json b/public/generated/examples/PanelTooltip.json
@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"overflow-visible!\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Tooltip</span><span class=\"\"> </span><span class=\"tok-propertyName\">content</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"This is the left panel\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\">    left</span></div>\n<div><span class=\"\">  </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Tooltip</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">&#62;</span></div>"
+}
diff --git a/public/generated/examples/SeparatorFocusOutline.json b/public/generated/examples/SeparatorFocusOutline.json
@@ -0,0 +1,3 @@
+{
+  "html": "<div><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Separator</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"focus-within:z-10 focus-within:outline-2 outline-solid\"</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span></div>"
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -56,6 +56,7 @@ export default function App() {
             <NavLink path="/examples/group-resize-behavior">
               Group resize behavior
             </NavLink>
+            <NavLink path="/examples/overflow">Overflow</NavLink>
             <NavLink path="/examples/custom-css-styles">
               Custom CSS styles
             </NavLink>
diff --git a/src/components/styled-panels/Panel.tsx b/src/components/styled-panels/Panel.tsx
@@ -28,7 +28,7 @@ export function Panel({
   return (
     <PanelExternal
       className={cn(
-        "bg-slate-800 rounded rounded-md overflow-auto",
+        "bg-slate-800 rounded rounded-md",
         disabled && "opacity-65",
         className
       )}
diff --git a/src/components/styled-panels/PanelText.tsx b/src/components/styled-panels/PanelText.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 
 export function PanelText({ children }: PropsWithChildren) {
   return (
-    <div className="w-full h-full flex flex-col items-center justify-center p-1">
+    <div className="w-full min-h-full flex flex-col items-center justify-center p-1">
       {children}
     </div>
   );
diff --git a/src/routes.ts b/src/routes.ts
@@ -35,6 +35,7 @@ export const routes = {
   "/examples/disabled-panels": lazy(
     () => import("./routes/DisabledPanelsRoute")
   ),
+  "/examples/overflow": lazy(() => import("./routes/OverflowRoute")),
   "/examples/custom-css-styles": lazy(
     () => import("./routes/CustomStylesRoute")
   ),
diff --git a/src/routes/OverflowRoute.tsx b/src/routes/OverflowRoute.tsx
@@ -0,0 +1,121 @@
+import {
+  Box,
+  Callout,
+  Code,
+  ExternalLink,
+  Header,
+  Input,
+  Tooltip
+} from "react-lib-tools";
+import { html as GroupAndPanelElementsHTML } from "../../public/generated/examples/GroupAndPanelElements.json";
+import { html as PanelDropShadowHTML } from "../../public/generated/examples/PanelDropShadow.json";
+import { html as PanelFocusOutlineHTML } from "../../public/generated/examples/PanelFocusOutline.json";
+import { html as PanelTooltipHTML } from "../../public/generated/examples/PanelTooltip.json";
+import { html as SeparatorFocusOutlineHTML } from "../../public/generated/examples/SeparatorFocusOutline.json";
+import { Group } from "../components/styled-panels/Group";
+import { Panel } from "../components/styled-panels/Panel";
+import { Separator } from "../components/styled-panels/Separator";
+
+const noop = () => {};
+
+export default function OverflowRoute() {
+  return (
+    <Box direction="column" gap={4}>
+      <Header section="Examples" title="Overflow" />
+      <div>
+        Groups and Panels set the{" "}
+        <ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow">
+          overflow
+        </ExternalLink>{" "}
+        styles shown below:
+      </div>
+      <Code html={GroupAndPanelElementsHTML} />
+      <div>
+        This combination of styles allows overflow content to be scrollable
+        while also allowing Panels to have visual styles like shadows or
+        outlines.
+      </div>
+      <div>
+        For example, this group of panels demonstrate drop-shadow style.
+      </div>
+      <Code html={PanelDropShadowHTML} />
+      <Group>
+        <Panel
+          className="bg-fuchsia-600 shadow-md shadow-fuchsia-600/50"
+          minSize={100}
+        >
+          left
+        </Panel>
+        <Panel
+          className="bg-violet-600 shadow-md shadow-violet-600/50"
+          minSize={100}
+        >
+          right
+        </Panel>
+      </Group>
+      <div>And this group demonstrate a focus outline style.</div>
+      <Code html={PanelFocusOutlineHTML} />
+      <Group>
+        <Panel
+          className="focus-within:z-10 focus-within:outline-2! outline-offset-2 outline-solid outline-blue-500!"
+          minSize={100}
+        >
+          <Input
+            className="focus:border-transparent!"
+            onChange={noop}
+            placeholder="left input"
+            size={10}
+            value=""
+          />
+        </Panel>
+        <Panel
+          className="focus-within:z-10 focus-within:outline-2! outline-offset-2 outline-solid outline-blue-500!"
+          minSize={100}
+        >
+          <Input
+            className="focus:border-transparent!"
+            onChange={noop}
+            placeholder="right input"
+            size={10}
+            value=""
+          />
+        </Panel>
+      </Group>
+      <Callout>
+        The panel sets a higher z-index on <code>focus-within</code> to avoid
+        clipping issues.
+      </Callout>
+      <div>
+        Styles that affect the outer panel element (e.g. shadows, outlines) work
+        without any customizations. Things like tooltips or popovers that are
+        rendered <em>inside</em> of the panel will be clipped by the{" "}
+        <code>overflow:auto</code> style. Because of this it's recommended to
+        use{" "}
+        <ExternalLink href="https://react.dev/reference/react-dom/createPortal">
+          portals
+        </ExternalLink>{" "}
+        for these. However you can override the default style as shown below.
+      </div>
+      <Code html={PanelTooltipHTML} />
+      <Group>
+        <Panel className="overflow-visible!" minSize={100}>
+          <Tooltip content="This is the left panel" positions={["top"]}>
+            left
+          </Tooltip>
+        </Panel>
+        <Panel className="overflow-visible!" minSize={100}>
+          <Tooltip content="This is the right panel" positions={["top"]}>
+            right
+          </Tooltip>
+        </Panel>
+      </Group>
+      <div>All of the above styles also apply to the separator component.</div>
+      <Code html={SeparatorFocusOutlineHTML} />
+      <Group>
+        <Panel minSize={100}>left</Panel>
+        <Separator className="focus-within:z-10 focus-within:outline-2! outline-offset-2 outline-solid outline-blue-500!" />
+        <Panel minSize={100}>right</Panel>
+      </Group>
+    </Box>
+  );
+}
diff --git a/src/routes/examples/GroupAndPanelElements.html b/src/routes/examples/GroupAndPanelElements.html
@@ -0,0 +1,11 @@
+<!-- ⚛️ Group -->
+<div data-group style="overflow: visible">
+
+  <!-- ⚛️ Panel -->
+  <div data-panel style="overflow: visible">
+    <div style="overflow: auto">
+
+      <!-- The stuff you render goes here -->
+    </div>
+  </div>
+</div>
diff --git a/src/routes/examples/LayoutBasicsHorizontal.tsx b/src/routes/examples/LayoutBasicsHorizontal.tsx
@@ -1,7 +1,5 @@
 import { Group, Panel } from "react-resizable-panels";
 
-// <begin>
-
 /* prettier-ignore */
 <Group>
   <Panel>left</Panel>
diff --git a/src/routes/examples/PanelDropShadow.tsx b/src/routes/examples/PanelDropShadow.tsx
@@ -0,0 +1,8 @@
+import { Panel } from "react-resizable-panels";
+
+// <begin>
+
+/* prettier-ignore */
+<Panel className="shadow-md shadow-fuchsia-600">
+  left
+</Panel>
diff --git a/src/routes/examples/PanelFocusOutline.tsx b/src/routes/examples/PanelFocusOutline.tsx
@@ -0,0 +1,8 @@
+import { Panel } from "react-resizable-panels";
+
+// <begin>
+
+/* prettier-ignore */
+<Panel className="focus-within:z-10 focus-within:outline-2 outline-solid">
+  <input placeholder="left input" />
+</Panel>
diff --git a/src/routes/examples/PanelTooltip.tsx b/src/routes/examples/PanelTooltip.tsx
@@ -0,0 +1,11 @@
+import { Tooltip } from "react-lib-tools";
+import { Panel } from "react-resizable-panels";
+
+// <begin>
+
+/* prettier-ignore */
+<Panel className="overflow-visible!">
+  <Tooltip content="This is the left panel">
+    left
+  </Tooltip>
+</Panel>
diff --git a/src/routes/examples/SeparatorFocusOutline.tsx b/src/routes/examples/SeparatorFocusOutline.tsx
@@ -0,0 +1,6 @@
+import { Separator } from "react-resizable-panels";
+
+// <begin>
+
+/* prettier-ignore */
+<Separator className="focus-within:z-10 focus-within:outline-2 outline-solid" />

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	+ "html": "<div><span class=\"tok-comment\"><!-- ⚛️ Group --></span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-group</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div> </div>\n<div><span class=\"\"> </span><span class=\"tok-comment\"><!-- ⚛️ Panel --></span><span class=\"\"></span></div>\n<div><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">data-panel</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">visible</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"</span><span class=\"tok-propertyName\">overflow</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-atom\">auto</span><span class=\"tok-string\">\"</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div> </div>\n<div><span class=\"\"> </span><span class=\"tok-comment\"><!-- The stuff you render goes here --></span><span class=\"\"></span></div>\n<div><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"> </span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">></span></div>"
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		- "html": "<div><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">></span><span class=\"\">left</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">></span><span class=\"\">right</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">></span></div>"
	`2`	+ "html": "<div><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Group</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Panel</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-resizable-panels\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div> </div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">></span><span class=\"\">left</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"> </span><span class=\"tok-punctuation\"><</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">></span><span class=\"\">right</span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">Panel</span><span class=\"tok-punctuation\">></span><span class=\"\"></span></div>\n<div><span class=\"\"></span><span class=\"tok-punctuation\"></</span><span class=\"tok-typeName\">Group</span><span class=\"tok-punctuation\">></span></div>"
`3`	`3`	`}`