@noxlovette/material 0.3.3 → 0.4.1

package/dist/components/containers/menu/MenuSub.svelte

@@ -0,0 +1,91 @@
+<!--
+@component
+A `MenuItem`-like row that opens a nested submenu panel on hover or press,
+instead of firing a selection itself.
+
+Wraps bits-ui's `DropdownMenu.Sub` + `SubTrigger` + `SubContent`. The
+trigger row (`iconProps`/`helper`/`children` label) behaves like a
+`MenuItem`; pass the nested rows — `MenuItem`, `MenuCheckboxItem`,
+`MenuRadioItem`, `MenuGroup`, more `MenuSub`, etc. — as `submenu`.
+
+@example
+```svelte
+<Menu label="File">
+  <MenuItem iconProps={{ name: 'draft' }}>New</MenuItem>
+  <MenuSub iconProps={{ name: 'ios_share' }}>
+    Share
+    {#snippet submenu()}
+      <MenuItem>Email</MenuItem>
+      <MenuItem>Link</MenuItem>
+    {/snippet}
+  </MenuSub>
+</Menu>
+```
+
+@see https://m3.material.io/components/menus/guidelines
+-->
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import clsx from 'clsx';
+  import Icon from '../../../utils/icon/Icon.svelte';
+  import Layer from '../../../utils/Layer.svelte';
+  import { menu as menuCls } from './theme.js';
+  import { enterExit } from '../../../animation/enterExit.js';
+  import { easeEmphasizedDecel } from '../../../animation/easing.js';
+  import type { MenuSubProps } from './types.js';
+
+  let {
+    iconProps,
+    disabled = false,
+    helper,
+    children,
+    submenu,
+    open = $bindable(false),
+    class: className,
+    submenuClass
+  }: MenuSubProps = $props();
+
+  const cls = $derived(menuCls());
+</script>
+
+<DropdownMenu.Sub bind:open>
+  <DropdownMenu.SubTrigger {disabled}>
+    {#snippet child({ props })}
+      <div {...props} class={cls.item({ class: className })}>
+        {#if iconProps}
+          <Icon class={cls.icon()} {...iconProps} />
+        {/if}
+        <div class={cls.itemContent()}>
+          {@render children()}
+          {#if helper}
+            <span class={cls.helper()}>{helper}</span>
+          {/if}
+        </div>
+        <Icon name="chevron_right" class={cls.rightSlot()} />
+        <Layer />
+      </div>
+    {/snippet}
+  </DropdownMenu.SubTrigger>
+
+  <DropdownMenu.Portal>
+    <DropdownMenu.SubContent forceMount sideOffset={4} class="z-100">
+      {#snippet child({ wrapperProps, props, open: isOpen })}
+        {#if isOpen}
+          <div {...wrapperProps} class={wrapperProps.class as any}>
+            <div
+              {...props}
+              class={clsx(cls.content(), props.class as any, submenuClass)}
+              transition:enterExit={{
+                duration: 200,
+                easing: easeEmphasizedDecel,
+                mode: 'scale'
+              }}
+            >
+              {@render submenu()}
+            </div>
+          </div>
+        {/if}
+      {/snippet}
+    </DropdownMenu.SubContent>
+  </DropdownMenu.Portal>
+</DropdownMenu.Sub>

package/dist/components/containers/menu/MenuSub.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { MenuSubProps } from './types.js';
+/**
+ * A `MenuItem`-like row that opens a nested submenu panel on hover or press,
+ * instead of firing a selection itself.
+ *
+ * Wraps bits-ui's `DropdownMenu.Sub` + `SubTrigger` + `SubContent`. The
+ * trigger row (`iconProps`/`helper`/`children` label) behaves like a
+ * `MenuItem`; pass the nested rows — `MenuItem`, `MenuCheckboxItem`,
+ * `MenuRadioItem`, `MenuGroup`, more `MenuSub`, etc. — as `submenu`.
+ *
+ * @example
+ * ```svelte
+ * <Menu label="File">
+ * <MenuItem iconProps={{ name: 'draft' }}>New</MenuItem>
+ * <MenuSub iconProps={{ name: 'ios_share' }}>
+ *   Share
+ *   {#snippet submenu()}
+ *     <MenuItem>Email</MenuItem>
+ *     <MenuItem>Link</MenuItem>
+ *   {/snippet}
+ * </MenuSub>
+ * </Menu>
+ * ```
+ *
+ * @see https://m3.material.io/components/menus/guidelines
+ */
+declare const MenuSub: import("svelte").Component<MenuSubProps, {}, "open">;
+type MenuSub = ReturnType<typeof MenuSub>;
+export default MenuSub;

package/dist/components/containers/menu/index.d.ts

@@ -1,2 +1,9 @@
+export * from './menu-item/index.js';
+export * from './theme.js';
 export * from './types.js';
 export { default as Menu } from './Menu.svelte';
+export { default as MenuCheckboxItem } from './MenuCheckboxItem.svelte';
+export { default as MenuGroup } from './MenuGroup.svelte';
+export { default as MenuRadioGroup } from './MenuRadioGroup.svelte';
+export { default as MenuRadioItem } from './MenuRadioItem.svelte';
+export { default as MenuSub } from './MenuSub.svelte';

package/dist/components/containers/menu/index.js

@@ -1,5 +1,13 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// folder re-exports (export everything from these folders)
+export * from './menu-item/index.js';
 // re-export TS/JS modules from this folder
+export * from './theme.js';
 export * from './types.js';
 // default exports for components in this folder
 export { default as Menu } from './Menu.svelte';
+export { default as MenuCheckboxItem } from './MenuCheckboxItem.svelte';
+export { default as MenuGroup } from './MenuGroup.svelte';
+export { default as MenuRadioGroup } from './MenuRadioGroup.svelte';
+export { default as MenuRadioItem } from './MenuRadioItem.svelte';
+export { default as MenuSub } from './MenuSub.svelte';

package/dist/components/containers/menu/menu-item/MenuItem.svelte

@@ -0,0 +1,71 @@
+<!--
+@component
+A single interactive row inside a `Menu`.
+
+`MenuItem` is the leaf node of the menu system. It wraps bits-ui's
+`DropdownMenu.Item` so each row automatically gets keyboard navigation,
+focus management, and the ARIA `menuitem` role.
+
+Pass `onclick` (or `onSelect`) for the action; use `iconProps` for a
+leading icon and `helper` for a supporting line below the label.
+
+Contrast with `Menu`, which is just the shell (open state + floating panel),
+and `ContextMenu`, which owns its own item list and is right-click triggered.
+
+@see https://m3.material.io/components/menus/guidelines
+-->
+<script lang="ts">
+  import type { MenuItemProps } from './types.js';
+  import type { DropdownMenuItemProps } from 'bits-ui';
+  import Icon from '../../../../utils/icon/Icon.svelte';
+  import Layer from '../../../../utils/Layer.svelte';
+  import { DropdownMenu } from 'bits-ui';
+  import { menu as menuCls } from '../theme.js';
+
+  let {
+    iconProps,
+    disabled = false,
+    onclick,
+    onSelect,
+    isGap,
+    selected,
+    helper,
+    children,
+    class: className,
+    ...restProps
+  }: MenuItemProps & DropdownMenuItemProps = $props();
+
+  // bits-ui fires onSelect at the Item level; avoid wiring onclick to the
+  // native button as well or it would fire twice on every click.
+  const handleSelect = $derived(onSelect ?? (onclick ? () => onclick() : undefined));
+
+  const cls = $derived(menuCls({ selected }));
+</script>
+
+{#if !isGap}
+  <DropdownMenu.Item
+    {...restProps}
+    {disabled}
+    onSelect={handleSelect}
+    class={cls.item({ class: className as string })}
+  >
+    {#if iconProps}
+      <Icon class={cls.icon()} {...iconProps} />
+    {/if}
+
+    <div class={cls.itemContent()}>
+      {@render children()}
+      {#if helper}
+        <span class={cls.helper()}>
+          {helper}
+        </span>
+      {/if}
+    </div>
+    <Layer />
+  </DropdownMenu.Item>
+{:else}
+  <!-- Render as a gap -->
+  <DropdownMenu.Item>
+    <hr class="h-1" />
+  </DropdownMenu.Item>
+{/if}

package/dist/components/containers/{menu-item → menu/menu-item}/MenuItem.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { MenuItemProps } from './types.js';
-type $$ComponentProps = MenuItemProps & Record<string, any>;
+import type { DropdownMenuItemProps } from 'bits-ui';
+type $$ComponentProps = MenuItemProps & DropdownMenuItemProps;
 /**
  * A single interactive row inside a `Menu`.
  *

package/dist/components/containers/{menu-item → menu/menu-item}/types.d.ts

@@ -1,4 +1,4 @@
-import type { IconProps } from '../../../utils/icon/types.js';
+import type { IconProps } from '../../../../utils/icon/types.js';
 import type { Snippet } from 'svelte';
 /**
  * Props for the MenuItem component.
@@ -33,4 +33,8 @@ export interface MenuItemProps {
      * The content of the menu item, typically a label.
      */
     children: Snippet;
+    /**
+     * Whether this item is in fact a gap
+     */
+    isGap?: boolean;
 }

package/dist/components/containers/menu/menu-item/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/containers/menu/theme.d.ts

@@ -0,0 +1,68 @@
+import { type VariantProps } from 'tailwind-variants';
+/**
+ * Shared styling for every row-shaped element inside a `Menu`'s floating
+ * panel: `MenuItem`, `MenuCheckboxItem`, `MenuRadioItem`, and `MenuSub`'s
+ * trigger row all pull from this one `tv()` so they stay visually identical.
+ */
+export type MenuVariants = VariantProps<typeof menu>;
+export declare const menu: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+    checked: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    icon: string;
+    indicator: string;
+    itemContent: string;
+    helper: string;
+    rightSlot: string;
+    groupHeading: string;
+}, undefined, {
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+    checked: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    icon: string;
+    indicator: string;
+    itemContent: string;
+    helper: string;
+    rightSlot: string;
+    groupHeading: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    selected: {
+        true: {
+            item: string;
+        };
+    };
+    checked: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    content: string;
+    item: string;
+    icon: string;
+    indicator: string;
+    itemContent: string;
+    helper: string;
+    rightSlot: string;
+    groupHeading: string;
+}>>;

package/dist/components/containers/menu/theme.js

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+export const menu = tv({
+    slots: {
+        content: `
+      bg-md-sys-color-surface-container-high shadow-elevation-3
+      ring-md-sys-color-outline/10 max-w-sm min-w-48 gap-1
+      overflow-y-auto rounded-lg px-2 py-1
+    `,
+        item: `
+      rounded-sm h-11 relative flex w-full cursor-pointer items-center gap-2 px-3 py-2
+      md-sys-typescale-body-medium whitespace-nowrap text-md-sys-color-on-surface
+      hover:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8
+      focus-visible:outline-2 focus-visible:outline-offset-2
+      focus-visible:outline-md-sys-color-primary
+      data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
+    `,
+        icon: 'text-md-sys-color-on-surface-variant size-5 text-[20px] shrink-0',
+        indicator: 'size-5 text-[20px] shrink-0 text-md-sys-color-on-surface-variant',
+        itemContent: 'flex flex-1 flex-col gap-1 text-left min-w-0',
+        helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
+        rightSlot: 'text-md-sys-color-on-surface-variant size-5 text-[20px] shrink-0',
+        groupHeading: 'px-3 pt-2 pb-1 md-sys-typescale-label-medium text-md-sys-color-primary'
+    },
+    variants: {
+        selected: {
+            true: {
+                item: 'bg-md-sys-color-secondary-container rounded-lg text-md-sys-color-on-secondary-container'
+            }
+        },
+        checked: {
+            true: {
+                indicator: 'text-md-sys-color-primary'
+            }
+        }
+    }
+});

package/dist/components/containers/menu/types.d.ts

@@ -1,3 +1,4 @@
+import type { IconProps } from '../../../utils/icon/types.js';
 import type { Snippet } from 'svelte';
 /**
  * Props for the Menu component.
@@ -18,9 +19,11 @@ export type MenuProps = {
     children: Snippet;
     /**
      * Custom trigger element. When omitted, a default filled `Button` labelled
-     * by `label` is used.
+     * by `label` is used. Receives the trigger's props — spread them onto the
+     * rendered element/component so bits-ui doesn't wrap it in its own
+     * `<button>` (which would nest buttons).
      */
-    trigger?: Snippet;
+    trigger?: Snippet<[Record<string, unknown>]>;
     /**
      * Label for the default button trigger. Ignored when `trigger` is provided.
      * @default 'Open menu'
@@ -38,3 +41,111 @@ export type MenuProps = {
     /** Additional CSS classes applied to the floating content panel. */
     class?: string;
 };
+/**
+ * Props for `MenuGroup`, which wraps related `MenuItem`s (or
+ * `MenuCheckboxItem`/`MenuRadioItem`s) under an optional heading so screen
+ * readers announce them as a labelled set.
+ */
+export type MenuGroupProps = {
+    /** Optional label rendered above the group's items. */
+    heading?: string;
+    /** Items inside the group. */
+    children: Snippet;
+    /** Additional CSS classes applied to the group container. */
+    class?: string;
+};
+/**
+ * Props for `MenuRadioGroup`, which restricts its `MenuRadioItem` children
+ * to a single selected value at a time.
+ */
+export type MenuRadioGroupProps = {
+    /**
+     * The value of the currently selected radio item.
+     * Supports two-way binding with `bind:value`.
+     */
+    value?: string;
+    /** Called when the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** `MenuRadioItem`s inside the group. */
+    children: Snippet;
+    /** Additional CSS classes applied to the group container. */
+    class?: string;
+};
+/**
+ * Props for a single option inside a `MenuRadioGroup`.
+ */
+export type MenuRadioItemProps = {
+    /** The value this item represents within its `MenuRadioGroup`. */
+    value: string;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Optional supporting text shown below the label. */
+    helper?: string;
+    /** The item's label. */
+    children: Snippet;
+    /**
+     * Whether the menu closes when this item is selected.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /** Additional CSS classes applied to the item row. */
+    class?: string;
+};
+/**
+ * Props for a toggleable option inside a `Menu`, independent of any other
+ * item (unlike `MenuRadioItem`, any number of `MenuCheckboxItem`s can be
+ * checked at once).
+ */
+export type MenuCheckboxItemProps = {
+    /**
+     * The checked state. Supports two-way binding with `bind:checked`.
+     * @default false
+     */
+    checked?: boolean;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Optional supporting text shown below the label. */
+    helper?: string;
+    /** The item's label. */
+    children: Snippet;
+    /**
+     * Whether the menu closes when this item is selected.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /** Additional CSS classes applied to the item row. */
+    class?: string;
+};
+/**
+ * Props for `MenuSub`, a `MenuItem`-like row that opens a nested submenu
+ * panel on hover/click instead of firing a selection.
+ */
+export type MenuSubProps = {
+    /** Props for the trigger row's leading icon. */
+    iconProps?: IconProps;
+    /**
+     * Whether the submenu trigger is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Optional supporting text shown below the trigger's label. */
+    helper?: string;
+    /** The trigger row's label. */
+    children: Snippet;
+    /** Items rendered inside the nested submenu panel. */
+    submenu: Snippet;
+    /** Controlled open state for the submenu. */
+    open?: boolean;
+    /** Additional CSS classes applied to the trigger row. */
+    class?: string;
+    /** Additional CSS classes applied to the submenu's floating panel. */
+    submenuClass?: string;
+};

package/dist/components/containers/pane/DraggablePane.stories.svelte

@@ -0,0 +1,199 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DraggablePane from './DraggablePane.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Containers/DraggablePane',
+    component: DraggablePane,
+    argTypes: {
+      title: { control: 'text' },
+      disableDrag: { control: 'boolean' }
+    },
+    args: {
+      title: 'Inspector',
+      disableDrag: false
+    }
+  });
+</script>
+
+<script lang="ts">
+  let boundedEl: HTMLDivElement | undefined = $state();
+  let boundedX: number | undefined = $state();
+  let boundedY: number | undefined = $state();
+
+  // DraggablePane positions with `position: fixed` (viewport coordinates), so
+  // seed x/y from the container's own rect rather than an arbitrary offset —
+  // `bounds` only clamps the drag, it doesn't reposition the panel into the box.
+  $effect(() => {
+    if (boundedEl && boundedX === undefined) {
+      const rect = boundedEl.getBoundingClientRect();
+      boundedX = rect.left + 16;
+      boundedY = rect.top + 16;
+    }
+  });
+</script>
+
+<!--
+  Bare `position: fixed` panel — drag the header around the Storybook canvas
+  by pointer or, once focused, the arrow keys (shift for a bigger step).
+-->
+<Story name="Playground">
+  {#snippet template(args)}
+    <DraggablePane title={args.title} disableDrag={args.disableDrag} initialX={32} initialY={32}>
+      <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant w-56">
+        Drag the header to move this panel. Its position is bindable via <code>x</code>/<code
+          >y</code
+        >.
+      </p>
+    </DraggablePane>
+  {/snippet}
+</Story>
+
+<!-- A closable pane, and a second one demonstrating `persistKey` position persistence. -->
+<Story name="Closable + Persisted" asChild>
+  <DraggablePane title="Closable" initialX={32} initialY={32} onClose={() => {}}>
+    <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant w-56">
+      Has a close button in its header.
+    </p>
+  </DraggablePane>
+  <DraggablePane
+    title="Remembers position"
+    initialX={340}
+    initialY={32}
+    persistKey="storybook-draggable-pane-demo"
+  >
+    <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant w-56">
+      Drag me, then reload the story — <code>persistKey</code> saves the position to
+      <code>localStorage</code>.
+    </p>
+  </DraggablePane>
+</Story>
+
+<!--
+  `onClickOutside` fires on any click landing outside the panel — wired to
+  `onClose` here, so clicking the surrounding canvas dismisses it.
+-->
+<Story name="Close On Outside Click" asChild>
+  <DraggablePane
+    title="Click outside to close"
+    initialX={32}
+    initialY={32}
+    onClose={() => console.log('DraggablePane closed')}
+    onClickOutside={() => console.log('DraggablePane: click outside')}
+  >
+    <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant w-56">
+      Click anywhere outside this panel (or the close button) to dismiss it.
+    </p>
+  </DraggablePane>
+</Story>
+
+<!-- Custom header content via the `header` snippet instead of `title`/`onClose`. -->
+<Story name="Custom Header" asChild>
+  <DraggablePane initialX={32} initialY={32}>
+    {#snippet header()}
+      <span
+        class="md-sys-typescale-label-large text-md-sys-color-on-surface flex-1 truncate px-1 py-1"
+      >
+        ⠿ Custom drag handle
+      </span>
+    {/snippet}
+    <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant w-56">
+      The default grip/title/close row is fully replaceable.
+    </p>
+  </DraggablePane>
+</Story>
+
+<!--
+  `bounds` clamps dragging to a given element's current rect instead of the
+  viewport — here, the dashed container below.
+-->
+<Story name="Bounded To Container">
+  {#snippet template()}
+    <div
+      bind:this={boundedEl}
+      class="border-md-sys-color-outline relative h-[320px] w-full overflow-hidden rounded-lg border border-dashed"
+    >
+      {#if boundedEl && boundedX !== undefined && boundedY !== undefined}
+        <DraggablePane title="Confined" bind:x={boundedX} bind:y={boundedY} bounds={boundedEl}>
+          <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant w-48">
+            Can't leave this box.
+          </p>
+        </DraggablePane>
+      {/if}
+    </div>
+  {/snippet}
+</Story>
+
+<!--
+  `resizable` adds edge/corner handles (pointer drag, or arrow keys once an
+  edge handle is focused). `minWidth`/`minHeight` are the safety net that
+  keeps a resize from shrinking the panel into uselessness; `maxWidth`/
+  `maxHeight` cap the other direction (both are also implicitly capped by
+  `bounds`, the viewport here).
+-->
+<Story name="Resizable" asChild>
+  <DraggablePane
+    title="Resizable"
+    initialX={32}
+    initialY={32}
+    resizable
+    minWidth={220}
+    minHeight={140}
+    maxWidth={520}
+    maxHeight={420}
+  >
+    <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant">
+      Drag any edge or corner to resize. Can't go below 220×140, or above 520×420.
+    </p>
+  </DraggablePane>
+</Story>
+
+<!--
+  Content-sized (no `height`) is the default — but content taller than the
+  viewport still carries a standing `max-height` (`bounds` minus
+  `boundsPadding`, see the component doc comment), so it scrolls internally
+  instead of rendering off-screen with the bottom of the panel unreachable.
+-->
+<Story name="Content Overflow (Unbounded)" asChild>
+  <DraggablePane title="Long Form">
+    <div
+      class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant flex w-56 flex-col gap-3"
+    >
+      {#each Array(30) as _, i (i)}
+        <p>
+          Field {i + 1} — this panel never sets `height`, yet can't render taller than the viewport.
+        </p>
+      {/each}
+    </div>
+  </DraggablePane>
+</Story>
+
+<!--
+  A fixed `height` turns the content area into an internal scroll region
+  instead of letting the panel grow past its bound — the `content` slot needs
+  `min-h-0` alongside `flex-1 overflow-auto`, otherwise a flex child's default
+  `min-height: auto` lets it grow past its flex-basis and overflow the fixed-
+  height panel instead of scrolling internally.
+-->
+<Story name="Scrollable Content" asChild>
+  <DraggablePane title="Long List" initialX={32} initialY={32} height={240} width={280}>
+    <ul class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant">
+      {#each Array(40) as _, i (i)}
+        <li>Item {i + 1}</li>
+      {/each}
+    </ul>
+  </DraggablePane>
+</Story>
+
+<!--
+  `collapsible` adds a minimize button that docks the pane into a small pill
+  at `minimizedCorner` (default bottom-left) showing `minimizedTitle` (falls
+  back to `title`); clicking the pill restores it at its previous position.
+-->
+<Story name="Collapsible" asChild>
+  <DraggablePane title="Mini Player" initialX={32} initialY={32} collapsible resizable>
+    <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant w-56">
+      Click the minimize icon in the header to collapse this into a pill in the bottom-left corner.
+    </p>
+  </DraggablePane>
+</Story>

package/dist/components/containers/pane/DraggablePane.stories.svelte.d.ts

@@ -0,0 +1,4 @@
+import DraggablePane from './DraggablePane.svelte';
+declare const DraggablePane: import("svelte").Component<Record<string, never>, {}, "">;
+type DraggablePane = ReturnType<typeof DraggablePane>;
+export default DraggablePane;