@window-splitter/svelte 0.8.4

package/dist/PanelResizer.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import {
+    getCursor,
+    getGroupSize,
+    initializePanelHandleData,
+    isPanelData,
+    isPanelHandle,
+    getCollapsiblePanelForHandleId,
+    haveConstraintsChangedForPanelHandle,
+  } from "@window-splitter/state";
+  import type {
+    SendFn,
+    GroupMachineContextValue,
+  } from "@window-splitter/state";
+  import type { SharedPanelResizerProps } from "@window-splitter/interface";
+  import {
+    getPanelResizerDomAttributes,
+    move,
+  } from "@window-splitter/interface";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props
+    extends SharedPanelResizerProps,
+      HTMLAttributes<HTMLDivElement> {}
+
+  let {
+    size = "0px",
+    id: _id,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    disabled,
+    ...attrs
+  }: Props = $props();
+
+  const defaultId = $props.id();
+  const id = _id || defaultId;
+  const send = getContext<SendFn>("send");
+  const state = getContext<GroupMachineContextValue>("state");
+  const isPrerender = getContext<{ current: boolean }>("isPrerender");
+  const initHandle = () => initializePanelHandleData({ size, id });
+  const handleData = () => {
+    const item = state?.items.find((i) => i.id === id);
+    if (!item || !isPanelHandle(item)) return undefined;
+    return item;
+  };
+
+  let dynamicPanelHandleIsMounting = false;
+
+  if (!handleData()) {
+    if (isPrerender.current) {
+      send({ type: "registerPanelHandle", data: initHandle() });
+    } else {
+      dynamicPanelHandleIsMounting = true;
+    }
+  }
+
+  $effect(() => {
+    if (!dynamicPanelHandleIsMounting) return;
+
+    const groupElement = document.getElementById(state.groupId);
+    if (!groupElement) return;
+
+    const handleEl = document.getElementById(id);
+    if (!handleEl) return;
+
+    const order = Array.from(groupElement.children).indexOf(handleEl);
+    if (typeof order !== "number") return;
+
+    send({
+      type: "registerPanelHandle",
+      data: { ...initHandle(), order },
+    });
+    dynamicPanelHandleIsMounting = false;
+  });
+
+  const contraintChanged = $derived(
+    !dynamicPanelHandleIsMounting &&
+      haveConstraintsChangedForPanelHandle(initHandle(), handleData())
+  );
+
+  const dynamicPanelHandleData = initHandle();
+  $effect(() => {
+    if (!contraintChanged) return;
+    send({ type: "updateConstraints", data: dynamicPanelHandleData });
+  });
+
+  $effect(() => () => {
+    requestAnimationFrame(() => {
+      send({ type: "unregisterPanelHandle", id });
+    });
+  });
+
+  const { moveProps } = move({
+    onMoveStart: () => {
+      send({ type: "dragHandleStart", handleId: id });
+      onDragStart?.();
+      document.body.style.cursor = getCursor(state) || "auto";
+    },
+    onMove: (e) => {
+      send({ type: "dragHandle", handleId: id, value: e });
+      onDrag?.();
+    },
+    onMoveEnd: () => {
+      send({ type: "dragHandleEnd", handleId: id });
+      onDragEnd?.();
+      document.body.style.cursor = "auto";
+    },
+  });
+
+  const itemIndex = 1;
+  const panelAttributes = () => {
+    const panelBeforeHandle = state?.items[itemIndex - 1];
+
+    if (!panelBeforeHandle || !isPanelData(panelBeforeHandle)) return { id };
+
+    return getPanelResizerDomAttributes({
+      groupId: state.groupId,
+      id,
+      orientation: state.orientation,
+      isDragging: state.activeDragHandleId === id,
+      activeDragHandleId: state.activeDragHandleId,
+      disabled: disabled,
+      controlsId: panelBeforeHandle.id,
+      min: panelBeforeHandle.min,
+      max: panelBeforeHandle.max,
+      currentValue: panelBeforeHandle.currentValue,
+      groupSize: getGroupSize(state),
+    });
+  };
+  const getDimensions = () => {
+    const handle = state.items.find((item) => item.id === id);
+    if (!handle || !isPanelHandle(handle)) return {};
+    return state.orientation === "horizontal"
+      ? { width: `${handle.size.value.toNumber()}px`, height: "100%" }
+      : { height: `${handle.size.value.toNumber()}px`, width: "100%" };
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    try {
+      const collapsiblePanel = getCollapsiblePanelForHandleId(state, id);
+
+      if (e.key === "Enter" && collapsiblePanel) {
+        if (collapsiblePanel.collapsed) {
+          send({ type: "expandPanel", panelId: collapsiblePanel.id });
+        } else {
+          send({ type: "collapsePanel", panelId: collapsiblePanel.id });
+        }
+      }
+    } catch {
+      //
+    }
+  };
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  {...attrs}
+  {...panelAttributes()}
+  onpointerdown={disabled ? undefined : moveProps.onPointerDown}
+  onkeydown={disabled
+    ? undefined
+    : (e) => {
+        moveProps.onKeyDown(e);
+        onKeyDown(e);
+      }}
+  tabindex={disabled ? -1 : 0}
+  style:cursor={getCursor(state)}
+  style:width={getDimensions().width}
+  style:height={getDimensions().height}
+></div>

package/dist/PanelResizer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SharedPanelResizerProps } from "@window-splitter/interface";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends SharedPanelResizerProps, HTMLAttributes<HTMLDivElement> {
+}
+declare const PanelResizer: import("svelte").Component<Props, {}, "">;
+type PanelResizer = ReturnType<typeof PanelResizer>;
+export default PanelResizer;
+//# sourceMappingURL=PanelResizer.svelte.d.ts.map

package/dist/PanelResizer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelResizer.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PanelResizer.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAK1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,UAAU,KACR,SAAQ,uBAAuB,EAC7B,cAAc,CAAC,cAAc,CAAC;CAAG;AAqJvC,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Panel.svelte";
+export * from "./PanelGroup.svelte";
+export * from "./PanelResizer.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./Panel.svelte";
+export * from "./PanelGroup.svelte";
+export * from "./PanelResizer.svelte";

package/eslint.config.js

@@ -0,0 +1,24 @@
+// eslint.config.js
+import base from "@internal/eslint-config";
+import svelte from "eslint-plugin-svelte";
+import ts from "typescript-eslint";
+import svelteConfig from "./svelte.config.js";
+
+export default [
+  ...base,
+  ...svelte.configs["flat/recommended"],
+  {
+    files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        extraFileExtensions: [".svelte"],
+        parser: ts.parser,
+        svelteConfig,
+      },
+    },
+  },
+  {
+    rules: {},
+  },
+];

package/package.json

@@ -0,0 +1,92 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@window-splitter/svelte",
+  "sideEffects": false,
+  "version": "0.8.4",
+  "description": "A WAI-ARIA compliant window splitter for Svelte.",
+  "repository": {
+    "url": "https://github.com/hipstersmoothie/window-splitter",
+    "directory": "packages/svelte"
+  },
+  "author": {
+    "name": "Andrew Lisowski",
+    "email": "lisowski54@gmail.com"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "svelte-package",
+    "test": "CI=true vitest",
+    "dev": "svelte-package -w",
+    "lint": "eslint .",
+    "stats": "rsbuild --mode production build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "clean": "rm -rf dist .turbo"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@internal/eslint-config": "0.8.4",
+    "@rsbuild/core": "^1.3.12",
+    "@rsdoctor/rspack-plugin": "^1.0.2",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.0",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/svelte": "^8.6.12",
+    "@storybook/svelte-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/svelte": "^5.2.7",
+    "@types/node": "^20.14.10",
+    "@vitest/browser": "^3.1.2",
+    "@vitest/coverage-istanbul": "^3.1.2",
+    "@vitest/coverage-v8": "^3.1.2",
+    "eslint": "^9.9.0",
+    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "framer-motion": "^11.3.28",
+    "jsdom": "^24.1.1",
+    "playwright": "^1.46.0",
+    "storybook": "^8.6.12",
+    "svelte": "^5.28.2",
+    "tiny-cookie": "^2.5.1",
+    "typescript": "^5.5.4",
+    "vite": "^6.3.3",
+    "vitest": "^3.1.2"
+  },
+  "peerDependencies": {
+    "svelte": ">=5.x"
+  },
+  "dependencies": {
+    "@window-splitter/interface": "0.8.4",
+    "@window-splitter/state": "0.8.4"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "module": "./dist/index.js",
+  "keywords": [
+    "svelte",
+    "panel",
+    "splitter",
+    "resizable",
+    "window"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "gitHead": "b71dcbded56d12a3e78294802e56d97d179b0bf6"
+}

package/src/SvelteWindowSplitter.test.svelte.ts

@@ -0,0 +1,283 @@
+import "@testing-library/jest-dom/vitest";
+
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/svelte";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import * as Cookies from "tiny-cookie";
+
+import Collapsible, {
+  handle as collapsibleHandle,
+  leftHandle,
+  rightHandle,
+} from "./stories/Collapsible.svelte";
+import AutosaveCookie from "./stories/AutosaveCookie.svelte";
+import Autosave, { handle as autosaveHandle } from "./stories/Autosave.svelte";
+import AutosaveCollapsible from "./stories/AutosaveCollapsible.svelte";
+import DynamicConstraints, {
+  handle as dynamicConstraintsHandle,
+} from "./stories/DynamicConstraints.svelte";
+import Conditional, {
+  handle as conditionalHandle,
+} from "./stories/Conditional.svelte";
+import Simple, { handle as simpleHandle } from "./stories/Simple.svelte";
+import VerticalLayout, {
+  handle as verticalHandle,
+} from "./stories/VerticalLayout.svelte";
+import { createTestUtils, dragHandle } from "@window-splitter/interface/test";
+import { PanelGroupHandle } from "@window-splitter/interface";
+
+const { expectTemplate, waitForMeasurement, waitForCondition } =
+  createTestUtils({
+    waitFor,
+  });
+
+afterEach(() => {
+  cleanup();
+});
+
+test("horizontal layout", async () => {
+  const component = render(Simple);
+
+  await waitForMeasurement(simpleHandle);
+
+  expect(component.getByText("Panel 1")).toBeInTheDocument();
+  expect(component.getByText("Panel 2")).toBeInTheDocument();
+
+  await expectTemplate(simpleHandle, "244px 10px 244px");
+
+  // Should respect the min
+  await dragHandle({ delta: 300 });
+  await expectTemplate(simpleHandle, "388px 10px 100px");
+});
+
+test("vertical layout", async () => {
+  const component = render(VerticalLayout);
+
+  await waitForMeasurement(verticalHandle);
+
+  expect(component.getByText("top")).toBeInTheDocument();
+  expect(component.getByText("middle")).toBeInTheDocument();
+  expect(component.getByText("bottom")).toBeInTheDocument();
+
+  await expectTemplate(verticalHandle, "96px 10px 108px 10px 96px");
+
+  // Should respect the min
+  await dragHandle({ delta: 100, orientation: "vertical" });
+  await expectTemplate(verticalHandle, "172px 10px 64px 10px 64px");
+});
+
+test("Conditional Panels", async () => {
+  const component = render(Conditional);
+
+  await waitForMeasurement(conditionalHandle);
+  await expectTemplate(conditionalHandle, "244px 10px 244px");
+
+  component.getByText("Expand").click();
+  await expectTemplate(conditionalHandle, "244px 10px 134px 10px 100px");
+
+  component.getByText("Close").click();
+  await expectTemplate(conditionalHandle, "244px 10px 244px");
+});
+
+test("Dynamic constraints", async () => {
+  const component = render(DynamicConstraints);
+
+  await waitForMeasurement(dynamicConstraintsHandle);
+  await expectTemplate(dynamicConstraintsHandle, "100px 10px 178px 10px 700px");
+
+  component.getByText("Toggle Custom").click();
+  await expectTemplate(dynamicConstraintsHandle, "500px 10px 178px 10px 300px");
+
+  component.getByText("Toggle Custom").click();
+  await expectTemplate(dynamicConstraintsHandle, "400px 10px 178px 10px 400px");
+});
+
+describe("Autosave", () => {
+  test("localStorage", async () => {
+    localStorage.clear();
+
+    render(Autosave);
+
+    await waitForMeasurement(autosaveHandle);
+    await expectTemplate(autosaveHandle, "244px 10px 244px");
+
+    await dragHandle({ delta: 100 });
+    await expectTemplate(autosaveHandle, "342px 10px 146px");
+
+    await waitForCondition(() =>
+      Boolean(localStorage.getItem("autosave-example-svelte"))
+    );
+    const obj = JSON.parse(
+      localStorage.getItem("autosave-example-svelte") || "{}"
+    );
+    expect(obj.items).toMatchSnapshot();
+  });
+
+  test("callback", async () => {
+    localStorage.clear();
+
+    const spy = vi.fn();
+    const handle = $state<{ current: PanelGroupHandle | null }>({
+      current: null,
+    });
+
+    render(AutosaveCollapsible, {
+      props: { onCollapseChange: spy, handle },
+    });
+
+    await dragHandle({ delta: -200 });
+    await expectTemplate(handle.current!, "100px 10px 388px");
+    expect(spy).toHaveBeenCalledWith(true);
+
+    cleanup();
+
+    render(AutosaveCollapsible, {
+      props: { onCollapseChange: spy, handle },
+    });
+
+    await expectTemplate(handle.current!, "100px 10px 388px");
+    await dragHandle({ delta: 200 });
+    expect(spy).toHaveBeenCalledWith(false);
+  });
+
+  test("cookie", async () => {
+    // clear cookies
+    document.cookie = "test=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+
+    const handle = $state<{ current: PanelGroupHandle | null }>({
+      current: null,
+    });
+
+    render(AutosaveCookie, {
+      props: { handle, snapshot: undefined },
+    });
+
+    await waitForMeasurement(handle.current!);
+    await expectTemplate(handle.current!, "245px 10px 245px");
+
+    await dragHandle({ delta: 100 });
+    await expectTemplate(handle.current!, "343px 10px 147px");
+
+    await waitForCondition(() =>
+      document.cookie.includes("autosave-cookie-svelte")
+    );
+
+    expect(document.cookie).toMatchSnapshot();
+
+    const snapshot = Cookies.get("autosave-cookie-svelte");
+
+    cleanup();
+
+    render(AutosaveCookie, {
+      props: { snapshot: JSON.parse(snapshot || "{}"), handle },
+    });
+
+    await expectTemplate(handle.current!, "343px 10px 147px");
+  });
+});
+
+describe("imperative panel API", async () => {
+  test("panel group", async () => {
+    render(Collapsible);
+
+    await waitForMeasurement(collapsibleHandle);
+
+    expect(collapsibleHandle.getPercentageSizes()).toMatchInlineSnapshot(`
+      [
+        0.5,
+        0.020080321285140562,
+        0.5,
+        0.020080321285140562,
+        0.12048192771084337,
+      ]
+    `);
+
+    expect(collapsibleHandle.getPixelSizes()).toMatchInlineSnapshot(`
+      [
+        209,
+        10,
+        209,
+        10,
+        60,
+      ]
+    `);
+
+    await expectTemplate(collapsibleHandle, "209px 10px 209px 10px 60px");
+  });
+
+  test("panel", async () => {
+    render(Collapsible);
+
+    await waitForMeasurement(collapsibleHandle);
+
+    expect(rightHandle.isCollapsed()).toBe(true);
+    expect(rightHandle.isExpanded()).toBe(false);
+
+    rightHandle.expand();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(rightHandle.isCollapsed()).toBe(false);
+    expect(rightHandle.isExpanded()).toBe(true);
+
+    rightHandle.collapse();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(rightHandle.isCollapsed()).toBe(true);
+    expect(rightHandle.isExpanded()).toBe(false);
+
+    // Test the non controlled version
+
+    expect(leftHandle.isCollapsed()).toBe(false);
+    expect(leftHandle.isExpanded()).toBe(true);
+
+    leftHandle.collapse();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(leftHandle.isCollapsed()).toBe(true);
+    expect(leftHandle.isExpanded()).toBe(false);
+    expect(rightHandle.getPercentageSize()).toBe(
+      leftHandle.getPercentageSize()
+    );
+    expect(rightHandle.getPixelSize()).toBe(leftHandle.getPixelSize());
+
+    leftHandle.expand();
+    await new Promise((resolve) => setTimeout(resolve, 5000));
+
+    expect(leftHandle.isCollapsed()).toBe(false);
+    expect(leftHandle.isExpanded()).toBe(true);
+  });
+});
+
+test("Keyboard interactions with collapsed panels", async () => {
+  render(Collapsible);
+
+  await waitForMeasurement(collapsibleHandle);
+  await expectTemplate(collapsibleHandle, "209px 10px 209px 10px 60px");
+
+  const resizer2 = document.getElementById("resizer-2")!;
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(collapsibleHandle, "209px 10px 169px 10px 100px");
+
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  await expectTemplate(collapsibleHandle, "209px 10px 165px 10px 104px");
+
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft", shiftKey: true });
+  await expectTemplate(
+    collapsibleHandle,
+    "209.03125px 10px 149.984375px 10px 118.984375px"
+  );
+
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(
+    collapsibleHandle,
+    "209.03125px 10px 208.96875px 10px 60px"
+  );
+
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(
+    collapsibleHandle,
+    "209.0625px 10px 149.96875px 10px 118.96875px"
+  );
+});

package/src/__snapshots__/SvelteWindowSplitter.test.svelte.ts.snap

@@ -0,0 +1,56 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Autosave > cookie 1`] = `"autosave-cookie-svelte=%7B%22size%22%3A%7B%22x%22%3A0%2C%22y%22%3A0%2C%22width%22%3A500%2C%22height%22%3A198%2C%22top%22%3A0%2C%22right%22%3A500%2C%22bottom%22%3A198%2C%22left%22%3A0%7D%2C%22items%22%3A%5B%7B%22type%22%3A%22panel%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.7%22%7D%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onCollapseChange%22%3A%7B%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%221%22%7D%2C%7B%22type%22%3A%22handle%22%2C%22size%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%2210%22%7D%2C%22id%22%3A%22resizer%22%7D%2C%7B%22type%22%3A%22panel%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.3%22%7D%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onCollapseChange%22%3A%7B%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%222%22%7D%5D%2C%22orientation%22%3A%22horizontal%22%2C%22dragOvershoot%22%3A%220%22%2C%22groupId%22%3A%22autosave-cookie-svelte%22%2C%22autosaveStrategy%22%3A%22cookie%22%7D"`;
+
+exports[`Autosave > localStorage 1`] = `
+[
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "currentValue": {
+      "type": "percent",
+      "value": "0.70081967213114754098",
+    },
+    "id": "1",
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onCollapseChange": {},
+    "onResize": {},
+    "type": "panel",
+  },
+  {
+    "id": "resizer",
+    "size": {
+      "type": "pixel",
+      "value": "10",
+    },
+    "type": "handle",
+  },
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "currentValue": {
+      "type": "percent",
+      "value": "0.29918032786885245902",
+    },
+    "id": "2",
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onCollapseChange": {},
+    "onResize": {},
+    "type": "panel",
+  },
+]
+`;