@window-splitter/svelte 0.8.4

package/.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from "@storybook/svelte-vite";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../src/**/*.stories.@(js|ts|svelte)",
+    "../stories/**/*.stories.@(js|ts|svelte)",
+  ],
+  addons: [
+    {
+      name: getAbsolutePath("@storybook/addon-essentials"),
+      options: {
+        docs: false,
+      },
+    },
+    getAbsolutePath("@storybook/addon-svelte-csf"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/svelte-vite"),
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/svelte'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.tshy/build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "../src",
+    "module": "nodenext",
+    "moduleResolution": "nodenext"
+  }
+}

package/.tshy/commonjs.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./build.json",
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.cts",
+    "../src/**/*.tsx",
+    "../src/**/*.json"
+  ],
+  "exclude": [
+    "../node_modules",
+    "../src/**/*.test.svelte.ts",
+    "../**/*stories*",
+    "../src/**/*.mts",
+    "../src/package.json"
+  ],
+  "compilerOptions": {
+    "outDir": "../.tshy-build/commonjs"
+  }
+}

package/.tshy/esm.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./build.json",
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.mts",
+    "../src/**/*.tsx",
+    "../src/**/*.json"
+  ],
+  "exclude": [
+    "../node_modules",
+    "../src/**/*.test.svelte.ts",
+    "../**/*stories*",
+    "../src/package.json"
+  ],
+  "compilerOptions": {
+    "outDir": "../.tshy-build/esm"
+  }
+}

package/.turbo/turbo-build.log

@@ -0,0 +1,6 @@
+
+
+> @window-splitter/svelte@0.8.3 build /Users/andrew/Documents/react-window-splitter/packages/svelte
+> svelte-package
+
+src/lib -> dist

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# v0.8.4 (Sat May 03 2025)
+
+#### 🐛 Bug Fix
+
+- Svelte Adapter [#55](https://github.com/hipstersmoothie/window-splitter/pull/55) ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- fix test ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- builds ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- test it ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- fix warning ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- fix types ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- clean up type errors ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- constraints and imperative api ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- conditional ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- collapse ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- working ([@hipstersmoothie](https://github.com/hipstersmoothie))
+- startin ([@hipstersmoothie](https://github.com/hipstersmoothie))
+
+#### Authors: 1
+
+- Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie))

package/README.md

@@ -0,0 +1,58 @@
+# @window-splitter/svelte
+
+A full featured window splitter for Svelte.
+
+- Support for the full [window splitter](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/) ARIA spec
+- Support for percentage and pixel based constraints
+- Collapsible panels
+- Controlled panels
+- Layout Persistance - LocalStorage and Cookie
+
+[Read the full docs](https://react-window-splitter-six.vercel.app)
+
+> NOTE: Docs are currently on react but it's the same API. Refer the the stories for usage examples.
+
+## Installation
+
+```bash
+npm install @window-splitter/svelte
+```
+
+## Usage
+
+```svelte
+<script>
+  import { PanelGroup } from '@window-splitter/svelte';
+</script>
+
+<PanelGroup>
+  <Panel min="130px" max="400px" />
+  <PanelResizer />
+  <Panel min="130px" />
+</PanelGroup>
+```
+
+## Features
+
+- WAI-ARIA compliant
+- Keyboard accessible
+- Touch friendly
+- Customizable
+- TypeScript support
+
+## Server Side Rendering + Strict Mode
+
+While not required for the simple case, for anything more complex you will
+need to add an `id` prop to your panels and handles.
+This is so that the component can tell all of the components apart during layout and rendering.
+
+Features that require `id`:
+
+- Conditional Panels
+- Server Side Rendering
+
+## Prior Art
+
+This library is heavily inspired by the following libraries:
+
+- [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels)

package/dist/Panel.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import type { SharedPanelProps } from "@window-splitter/interface";
+  import { getContext } from "svelte";
+  import {
+    initializePanel,
+    isPanelData,
+    haveConstraintsChangedForPanel,
+    getPanelPercentageSize,
+    getPanelPixelSize,
+  } from "@window-splitter/state";
+  import type {
+    PanelData,
+    GroupMachineContextValue,
+    SendFn,
+    Unit,
+  } from "@window-splitter/state";
+  import { getPanelDomAttributes } from "@window-splitter/interface";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export { PanelHandle } from "@window-splitter/interface";
+
+  interface Props
+    extends SharedPanelProps<boolean>,
+      HTMLAttributes<HTMLDivElement> {}
+
+  let {
+    children,
+    min,
+    max,
+    id: _id,
+    collapsible,
+    collapsed,
+    collapsedSize,
+    onCollapseChange,
+    collapseAnimation,
+    onResize,
+    defaultCollapsed,
+    default: defaultSize,
+    isStaticAtRest,
+    ...attrs
+  }: Props = $props();
+
+  const defaultId = $props.id();
+  const id = _id || defaultId;
+  const send = getContext<SendFn>("send");
+  const state = getContext<GroupMachineContextValue>("state");
+
+  const initPanel = (): PanelData =>
+    initializePanel({
+      id,
+      min,
+      max,
+      collapsible,
+      collapsed,
+      collapsedSize,
+      onCollapseChange: { current: onCollapseChange },
+      collapseAnimation,
+      onResize: { current: onResize },
+      defaultCollapsed,
+      default: defaultSize,
+      isStaticAtRest,
+    });
+
+  const isPrerender = getContext<{ current: boolean }>("isPrerender");
+  const panelData = () => {
+    const item = state?.items.find((i) => i.id === id);
+    if (!item || !isPanelData(item)) return undefined;
+    return item;
+  };
+
+  let dynamicPanelIsMounting = false;
+
+  if (panelData()) {
+    send({
+      type: "rebindPanelCallbacks",
+      data: {
+        id,
+        onCollapseChange: { current: onCollapseChange },
+        onResize: { current: onResize },
+      },
+    });
+  } else {
+    if (isPrerender.current) {
+      send({ type: "registerPanel", data: initPanel() });
+    } else {
+      dynamicPanelIsMounting = true;
+    }
+  }
+
+  const contraintChanged = $derived(
+    !dynamicPanelIsMounting &&
+      haveConstraintsChangedForPanel(initPanel(), panelData())
+  );
+
+  $effect(() => {
+    if (!contraintChanged) return;
+    send({ type: "updateConstraints", data: initPanel() });
+  });
+
+  const dynamicPanelData = initPanel();
+
+  $effect(() => {
+    if (!dynamicPanelIsMounting) return;
+
+    const groupElement = document.getElementById(state.groupId);
+    if (!groupElement) return;
+
+    const panelElement = document.getElementById(id);
+    if (!panelElement) return;
+
+    const order = Array.from(groupElement.children).indexOf(panelElement);
+    if (typeof order !== "number") return;
+
+    send({
+      type: "registerDynamicPanel",
+      data: { ...dynamicPanelData, order },
+    });
+    dynamicPanelIsMounting = false;
+  });
+
+  $effect(() => () => {
+    requestAnimationFrame(() => {
+      send({ type: "unregisterPanel", id });
+    });
+  });
+
+  const isControlledCollapse = $derived(panelData()?.collapseIsControlled);
+
+  $effect(() => {
+    if (!isControlledCollapse) return;
+
+    if (collapsed) {
+      send?.({ type: "collapsePanel", panelId: id, controlled: true });
+    } else {
+      send?.({ type: "expandPanel", panelId: id, controlled: true });
+    }
+  });
+
+  const domAttributes = () => {
+    const currentPanel = panelData();
+
+    return getPanelDomAttributes({
+      groupId: state.groupId,
+      id,
+      collapsible: currentPanel?.collapsible,
+      collapsed: currentPanel?.collapsed,
+    });
+  };
+
+  export const getId = () => id;
+  export const collapse = () => {
+    if (!panelData()?.collapsible) return;
+    send({ type: "collapsePanel", panelId: id, controlled: true });
+  };
+  export const isCollapsed = () =>
+    Boolean(panelData()?.collapsible && panelData()?.collapsed);
+  export const expand = () => {
+    if (!panelData()?.collapsible) return;
+    send({ type: "expandPanel", panelId: id, controlled: true });
+  };
+  export const isExpanded = () =>
+    Boolean(panelData()?.collapsible && !panelData()?.collapsed);
+  export const getPixelSize = () => getPanelPixelSize(state, id);
+  export const setSize = (size: Unit) => {
+    send({ type: "setPanelPixelSize", panelId: id, size });
+  };
+  export const getPercentageSize = () => getPanelPercentageSize(state, id);
+</script>
+
+<div
+  {...attrs}
+  {...domAttributes()}
+  style:min-width={0}
+  style:min-height={0}
+  style:overflow="hidden"
+>
+  {@render children?.()}
+</div>

package/dist/Panel.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { SharedPanelProps } from "@window-splitter/interface";
+import type { Unit } from "@window-splitter/state";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends SharedPanelProps<boolean>, HTMLAttributes<HTMLDivElement> {
+}
+declare const Panel: import("svelte").Component<Props, {
+    PanelHandle: typeof PanelHandle;
+    getId: () => string;
+    collapse: () => void;
+    isCollapsed: () => boolean;
+    expand: () => void;
+    isExpanded: () => boolean;
+    getPixelSize: () => number;
+    setSize: (size: Unit) => void;
+    getPercentageSize: () => number;
+}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;
+//# sourceMappingURL=Panel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Panel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AASnE,OAAO,KAAK,EAIR,IAAI,EACL,MAAM,wBAAwB,CAAC;AAElC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,UAAU,KACR,SAAQ,gBAAgB,CAAC,OAAO,CAAC,EAC/B,cAAc,CAAC,cAAc,CAAC;CAAG;AAkKvC,QAAA,MAAM,KAAK;iBADsQ,OAAO,WAAW;;;;;;;oBAXzQ,IAAI;;MAYqB,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/PanelGroup.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import type { SharedPanelGroupProps } from "@window-splitter/interface";
+  import { measureGroupChildren } from "@window-splitter/interface";
+  import {
+    buildTemplate,
+    groupMachine,
+    prepareSnapshot,
+    prepareItems,
+    getPanelGroupPixelSizes,
+    getPanelGroupPercentageSizes,
+    isPanelData,
+  } from "@window-splitter/state";
+  import type { GroupMachineContextValue, Unit } from "@window-splitter/state";
+  import { setContext } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export { PanelGroupHandle } from "@window-splitter/interface";
+
+  interface Props
+    extends SharedPanelGroupProps,
+      HTMLAttributes<HTMLDivElement> {
+    id: string;
+  }
+
+  let {
+    children,
+    orientation = "horizontal",
+    autosaveStrategy = "localStorage",
+    autosaveId,
+    snapshot,
+    ...attrs
+  }: Props = $props();
+
+  if (
+    !snapshot &&
+    typeof window !== "undefined" &&
+    autosaveId &&
+    autosaveStrategy === "localStorage"
+  ) {
+    const localSnapshot = localStorage.getItem(autosaveId);
+
+    if (localSnapshot) {
+      snapshot = JSON.parse(localSnapshot) as GroupMachineContextValue;
+    }
+  }
+
+  const defaultId = $props.id();
+  const id = autosaveId || defaultId;
+
+  const [initialState, send, machineState] = groupMachine(
+    {
+      orientation,
+      groupId: id,
+      autosaveStrategy,
+      ...(snapshot ? prepareSnapshot(snapshot) : undefined),
+    },
+    (s) => {
+      if (!context) return;
+      updateContext(s);
+    }
+  );
+
+  const context = $state<GroupMachineContextValue>(initialState);
+  function updateContext(s: GroupMachineContextValue) {
+    for (const key in s) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (context as any)[key] = (s as any)[key];
+    }
+  }
+
+  setContext("send", send);
+  setContext("state", context);
+  setContext("id", machineState);
+
+  const isPrerender = $state({ current: true });
+  setContext("isPrerender", isPrerender);
+  $effect(() => {
+    isPrerender.current = false;
+  });
+
+  let elementRef = $state<HTMLDivElement>();
+
+  $effect(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+        send({ type: "setSize", size: entry.contentRect });
+      }
+    });
+
+    if (elementRef) {
+      observer.observe(elementRef);
+    }
+
+    return () => observer.disconnect();
+  });
+
+  let childIds = $derived(context.items.map((i) => i.id).join(","));
+
+  $effect(() => {
+    // re-render when the childIds change
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    childIds;
+    measureGroupChildren(id, (childrenSizes) => {
+      send({ type: "setActualItemsSize", childrenSizes });
+    });
+  });
+
+  let template = $derived(buildTemplate(context));
+
+  $effect(() => {
+    send({ type: "unlockGroup" });
+    return () => send({ type: "lockGroup" });
+  });
+
+  export const getId = () => id;
+  export const getPixelSizes = () => getPanelGroupPixelSizes(context);
+  export const getPercentageSizes = () => getPanelGroupPercentageSizes(context);
+  export const getTemplate = () =>
+    buildTemplate({ ...context, items: prepareItems(context) });
+  export const getState = () =>
+    machineState.current === "idle" ? "idle" : "dragging";
+  export const setSizes = (updates: Array<Unit>) => {
+    for (let index = 0; index < updates.length; index++) {
+      const item = context.items[index];
+      const update = updates[index];
+
+      if (item && isPanelData(item) && update) {
+        send({
+          type: "setPanelPixelSize",
+          panelId: item.id,
+          size: update,
+        });
+      }
+    }
+  };
+</script>
+
+<div
+  {...attrs}
+  data-panel-group-wrapper
+  bind:this={elementRef}
+  style:display="grid"
+  style:grid-template-columns={context.orientation === "horizontal"
+    ? template
+    : undefined}
+  style:grid-template-rows={context.orientation === "vertical"
+    ? template
+    : undefined}
+  {id}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  :where([data-panel-group-wrapper]) {
+    height: 100%;
+  }
+</style>

package/dist/PanelGroup.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { SharedPanelGroupProps } from "@window-splitter/interface";
+import type { Unit } from "@window-splitter/state";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends SharedPanelGroupProps, HTMLAttributes<HTMLDivElement> {
+    id: string;
+}
+declare const PanelGroup: import("svelte").Component<Props, {
+    PanelGroupHandle: typeof PanelGroupHandle;
+    getId: () => string;
+    getPixelSizes: () => number[];
+    getPercentageSizes: () => number[];
+    getTemplate: () => string;
+    getState: () => "idle" | "dragging";
+    setSizes: (updates: Array<Unit>) => void;
+}, "">;
+type PanelGroup = ReturnType<typeof PanelGroup>;
+export default PanelGroup;
+//# sourceMappingURL=PanelGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PanelGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAWxE,OAAO,KAAK,EAA4B,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,UAAU,KACR,SAAQ,qBAAqB,EAC3B,cAAc,CAAC,cAAc,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;CACZ;AA0IH,QAAA,MAAM,UAAU;sBADgP,OAAO,gBAAgB;;;;;;wBA3BzP,KAAK,CAAC,IAAI,CAAC;MA4Be,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}