dialkit 1.2.1 → 1.4.0

package/dist/svelte/components/ControlRenderer.svelte

@@ -13,11 +13,13 @@
   import ControlRenderer from './ControlRenderer.svelte';
   import { SHORTCUT_CTX } from './ShortcutListener.svelte';
   import type { ShortcutContextValue } from './ShortcutListener.svelte';
+  import type { TransitionDurationControl } from './TransitionControl.svelte';
 
-  let { panelId, control, values } = $props<{
+  let { panelId, control, values, transitionDuration } = $props<{
     panelId: string;
     control: ControlMeta;
     values: Record<string, DialValue>;
+    transitionDuration?: TransitionDurationControl;
   }>();
 
   const shortcutCtx = getContext<ShortcutContextValue | undefined>(SHORTCUT_CTX);
@@ -62,11 +64,12 @@
     label={control.label}
     value={controlValue as TransitionConfig}
     onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+    durationControl={transitionDuration}
   />
 {:else if control.type === 'folder'}
   <Folder title={control.label} defaultOpen={control.defaultOpen ?? true}>
     {#each control.children ?? [] as child (child.path)}
-      <ControlRenderer {panelId} control={child} {values} />
+      <ControlRenderer {panelId} control={child} {values} {transitionDuration} />
     {/each}
   </Folder>
 {:else if control.type === 'text'}

package/dist/svelte/components/ControlRenderer.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { ControlMeta, DialValue } from 'dialkit/store';
 import ControlRenderer from './ControlRenderer.svelte';
+import type { TransitionDurationControl } from './TransitionControl.svelte';
 type $$ComponentProps = {
     panelId: string;
     control: ControlMeta;
     values: Record<string, DialValue>;
+    transitionDuration?: TransitionDurationControl;
 };
 declare const ControlRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
 type ControlRenderer = ReturnType<typeof ControlRenderer>;

package/dist/svelte/components/ControlRenderer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControlRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ControlRenderer.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAkC,MAAM,eAAe,CAAC;AAS5F,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAItD,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnC,CAAC;AAuDJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ControlRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ControlRenderer.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAkC,MAAM,eAAe,CAAC;AAS5F,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAGvD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAE3E,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;CAChD,CAAC;AAwDJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/DialRoot.svelte

@@ -1,35 +1,68 @@
 <script lang="ts">
   import { DialStore } from 'dialkit/store';
   import type { PanelConfig } from 'dialkit/store';
+  import { TimelineStore } from 'dialkit/timeline';
+  import type { TimelineMeta } from 'dialkit/timeline';
   import { themeCSS } from '../theme-css';
   import Portal from '../Portal.svelte';
+  import Folder from './Folder.svelte';
   import Panel from './Panel.svelte';
+  import TimelineToggleButton from './Timeline/TimelineToggleButton.svelte';
   import ShortcutListener from './ShortcutListener.svelte';
+  import {
+    blockPanelDragClick,
+    getPanelDragHandle,
+    getPanelDragOffset,
+    getPanelDragStart,
+    getPanelOriginX,
+    hasPanelDragMoved,
+    type PanelDragOffset,
+    type PanelDragStart,
+  } from '../../panel-drag';
 
   export type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
   export type DialMode = 'popover' | 'inline';
   export type DialTheme = 'light' | 'dark' | 'system';
 
-  declare const process: { env?: { NODE_ENV?: string } } | undefined;
-
-  const isDevDefault = typeof process !== 'undefined' && process?.env?.NODE_ENV
-    ? process.env.NODE_ENV !== 'production'
-    : typeof import.meta !== 'undefined' && (import.meta as any).env?.MODE
-      ? (import.meta as any).env.MODE !== 'production'
+  const nodeEnv = (globalThis as typeof globalThis & { process?: { env?: { NODE_ENV?: string } } }).process?.env?.NODE_ENV;
+  const viteMode = (import.meta as { env?: { MODE?: string } }).env?.MODE;
+  const isDevDefault = nodeEnv
+    ? nodeEnv !== 'production'
+    : viteMode
+      ? viteMode !== 'production'
       : true;
 
-  let { position = 'top-right', defaultOpen = true, mode = 'popover', theme = 'system' as DialTheme, productionEnabled = isDevDefault } = $props<{
+  let { position = 'top-right', defaultOpen = true, mode = 'popover', theme = 'system' as DialTheme, productionEnabled = isDevDefault, onOpenChange } = $props<{
     position?: DialPosition;
     defaultOpen?: boolean;
     mode?: DialMode;
     theme?: DialTheme;
     productionEnabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
   }>();
 
   const inline = $derived(mode === 'inline');
 
   let panels = $state<PanelConfig[]>([]);
+  let timelines = $state<TimelineMeta[]>([]);
   let mounted = $state(false);
+  let panelRef = $state<HTMLDivElement>();
+  let dragOffset = $state<PanelDragOffset | null>(null);
+  let activePosition = $state<DialPosition>(position);
+  let lastDragOffset: PanelDragOffset | null = null;
+  let dragging = false;
+  let dragStart: PanelDragStart | null = null;
+  let didDrag = false;
+  let dragTarget: HTMLElement | null = null;
+  let panelOpenStates = new Map<string, boolean>();
+  let rootOpen: boolean | undefined;
+
+  const dragStyle = $derived(
+    dragOffset
+      ? `top:${dragOffset.y}px;left:${dragOffset.x}px;right:auto;bottom:auto;`
+      : undefined
+  );
+  const originX = $derived(inline ? undefined : getPanelOriginX(activePosition, dragOffset));
 
   $effect(() => {
     if (typeof document === 'undefined') return;
@@ -46,24 +79,193 @@
     if (typeof window === 'undefined') return;
 
     mounted = true;
-    panels = DialStore.getPanels();
+    panels = DialStore.getPanels('panel');
+    timelines = TimelineStore.getTimelines();
+
+    const unsubscribePanels = DialStore.subscribeGlobal(() => {
+      panels = DialStore.getPanels('panel');
+    });
+    const unsubscribeTimelines = TimelineStore.subscribeGlobal(() => {
+      timelines = TimelineStore.getTimelines();
+    });
+
+    return () => {
+      unsubscribePanels();
+      unsubscribeTimelines();
+    };
+  });
+
+  $effect(() => {
+    const fallbackOpen = inline || defaultOpen;
+    const nextStates = new Map<string, boolean>();
+    for (const panel of panels) {
+      nextStates.set(panel.id, panelOpenStates.get(panel.id) ?? fallbackOpen);
+    }
+    panelOpenStates = nextStates;
+    rootOpen = Array.from(nextStates.values()).some(Boolean);
+  });
+
+  $effect(() => {
+    if (inline || !panelRef) return;
+
+    const observer = new MutationObserver(() => {
+      const inners = panelRef?.querySelectorAll('.dialkit-panel-inner');
+      if (!inners || inners.length === 0) return;
+      const collapsed = Array.from(inners).every((el) => el.getAttribute('data-collapsed') === 'true');
 
-    const unsub = DialStore.subscribeGlobal(() => {
-      panels = DialStore.getPanels();
+      if (!collapsed) {
+        if (dragOffset) {
+          lastDragOffset = dragOffset;
+          const bubbleCenterX = dragOffset.x + 21;
+          activePosition = bubbleCenterX < window.innerWidth / 2 ? 'top-left' : 'top-right';
+        } else {
+          activePosition = position;
+        }
+        dragOffset = null;
+      } else if (dragOffset) {
+        lastDragOffset = dragOffset;
+      } else if (lastDragOffset) {
+        dragOffset = lastDragOffset;
+      }
     });
 
-    return unsub;
+    observer.observe(panelRef, { subtree: true, attributes: true, attributeFilter: ['data-collapsed'] });
+    return () => observer.disconnect();
   });
+
+  function handlePointerDown(event: PointerEvent) {
+    const panel = panelRef ?? null;
+    const handle = getPanelDragHandle(event.target, panel);
+    if (!panel || !handle) return;
+
+    dragTarget = handle;
+    dragStart = getPanelDragStart(event.clientX, event.clientY, panel);
+    didDrag = false;
+    dragging = true;
+    handle.setPointerCapture(event.pointerId);
+  }
+
+  function handlePointerMove(event: PointerEvent) {
+    if (!dragging || !dragStart) return;
+
+    if (!didDrag && !hasPanelDragMoved(dragStart, event.clientX, event.clientY)) return;
+    didDrag = true;
+
+    dragOffset = getPanelDragOffset(dragStart, event.clientX, event.clientY);
+  }
+
+  function handlePointerUp(event: PointerEvent) {
+    if (!dragging) return;
+    dragging = false;
+    dragStart = null;
+    const handle = dragTarget;
+
+    if (handle?.hasPointerCapture(event.pointerId)) {
+      handle.releasePointerCapture(event.pointerId);
+    }
+
+    if (didDrag) {
+      event.stopPropagation();
+      if (handle) {
+        blockPanelDragClick(handle);
+      }
+    }
+
+    dragTarget = null;
+  }
+
+  function handlePanelOpenChange(panelId: string, open: boolean) {
+    panelOpenStates.set(panelId, open);
+    const fallbackOpen = inline || defaultOpen;
+    const nextRootOpen = panels.some((panel) => (
+      panelOpenStates.get(panel.id) ?? fallbackOpen
+    ));
+
+    if (rootOpen === nextRootOpen) return;
+    rootOpen = nextRootOpen;
+    onOpenChange?.(nextRootOpen);
+  }
+
+  function handleRootOpenChange(open: boolean) {
+    if (rootOpen === open) return;
+    rootOpen = open;
+    onOpenChange?.(open);
+  }
+
 </script>
 
-{#if productionEnabled && mounted && panels.length > 0}
+{#snippet timelineToolbar()}
+  {#if timelines.length > 0}
+    <TimelineToggleButton />
+  {/if}
+{/snippet}
+
+{#if productionEnabled && mounted && (panels.length > 0 || timelines.length > 0)}
   {#snippet content()}
     <ShortcutListener>
       <div class="dialkit-root" data-mode={mode} data-theme={theme}>
-        <div class="dialkit-panel" data-mode={mode} data-position={inline ? undefined : position}>
-          {#each panels as panel (panel.id)}
-            <Panel {panel} defaultOpen={inline || defaultOpen} {inline} />
-          {/each}
+        <div
+          bind:this={panelRef}
+          class="dialkit-panel"
+          data-mode={mode}
+          data-position={inline ? undefined : (dragOffset ? undefined : activePosition)}
+          data-origin-x={originX}
+          data-multiple={panels.length > 1 ? 'true' : undefined}
+          style={dragStyle}
+          onpointerdown={!inline ? handlePointerDown : undefined}
+          onpointermove={!inline ? handlePointerMove : undefined}
+          onpointerup={!inline ? handlePointerUp : undefined}
+          onpointercancel={!inline ? handlePointerUp : undefined}
+        >
+          {#if panels.length === 0}
+            <div class="dialkit-panel-wrapper">
+              <Folder
+                title="DialKit"
+                defaultOpen={inline || defaultOpen}
+                isRoot={true}
+                {inline}
+                onOpenChange={handleRootOpenChange}
+                panelHeightOffset={2}
+              >
+                {#snippet toolbar()}
+                  {@render timelineToolbar()}
+                {/snippet}
+                <div class="dialkit-timeline-toolkit-only">Timeline</div>
+              </Folder>
+            </div>
+          {:else if panels.length > 1}
+            <div class="dialkit-panel-wrapper">
+              <Folder
+                title="DialKit"
+                defaultOpen={inline || defaultOpen}
+                isRoot={true}
+                {inline}
+                onOpenChange={handleRootOpenChange}
+                panelHeightOffset={2}
+              >
+                {#snippet toolbar()}
+                  {@render timelineToolbar()}
+                {/snippet}
+                {#each panels as panel (panel.id)}
+                  <Panel
+                    {panel}
+                    defaultOpen={true}
+                    variant="section"
+                  />
+                {/each}
+              </Folder>
+            </div>
+          {:else}
+            {#each panels as panel (panel.id)}
+              <Panel
+                {panel}
+                defaultOpen={inline || defaultOpen}
+                {inline}
+                toolbarExtra={timelineToolbar}
+                onOpenChange={(open) => handlePanelOpenChange(panel.id, open)}
+              />
+            {/each}
+          {/if}
         </div>
       </div>
     </ShortcutListener>

package/dist/svelte/components/DialRoot.svelte.d.ts

@@ -7,6 +7,7 @@ type $$ComponentProps = {
     mode?: DialMode;
     theme?: DialTheme;
     productionEnabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
 declare const DialRoot: import("svelte").Component<$$ComponentProps, {}, "">;
 type DialRoot = ReturnType<typeof DialRoot>;

package/dist/svelte/components/DialRoot.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DialRoot.svelte.ts"],"names":[],"mappings":"AAWE,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AACrF,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC5C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACrD,KAAK,gBAAgB,GAAG;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AA4EJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DialRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DialRoot.svelte.ts"],"names":[],"mappings":"AAyBE,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AACrF,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC5C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACrD,KAAK,gBAAgB,GAAG;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAwOJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/Folder.svelte

@@ -12,6 +12,7 @@
     inline = false,
     onOpenChange,
     toolbar,
+    panelHeightOffset = 10,
     children,
   } = $props<{
     title: string;
@@ -20,12 +21,14 @@
     inline?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     toolbar?: Snippet;
+    panelHeightOffset?: number;
     children?: Snippet;
   }>();
 
   let isOpen = $state(defaultOpen);
   let isCollapsed = $state(!defaultOpen);
   let contentHeight = $state<number | undefined>(undefined);
+  let hasInitializedRootSize = $state(!isRoot || !defaultOpen);
 
   let contentRef: HTMLDivElement | undefined;
   let panelRef: HTMLDivElement | undefined;
@@ -74,11 +77,16 @@
     if (!isRoot) return;
 
     const measured = contentHeight ?? panelRef?.getBoundingClientRect().height ?? 42;
-    const nextHeight = isOpen ? Math.min(measured + 10, windowHeight - 32) : 42;
+    const nextHeight = isOpen ? Math.min(measured + panelHeightOffset, windowHeight - 32) : 42;
+    const springOptions = !hasInitializedRootSize && isOpen ? { instant: true } : undefined;
 
-    panelWidth.set(isOpen ? 280 : 42);
-    panelHeight.set(nextHeight);
-    panelRadius.set(isOpen ? 14 : 21);
+    panelWidth.set(isOpen ? 280 : 42, springOptions);
+    panelHeight.set(nextHeight, springOptions);
+    panelRadius.set(isOpen ? 14 : 21, springOptions);
+
+    if (isOpen || !defaultOpen) {
+      hasInitializedRootSize = true;
+    }
   });
 
   const handleToggle = () => {
@@ -100,8 +108,9 @@
     panelScale.set(1);
   };
 
+  const panelHeightStyle = $derived(!hasInitializedRootSize && isOpen ? 'auto' : `${panelHeight.current}px`);
   const panelStyle = $derived(
-    `width:${panelWidth.current}px;height:${panelHeight.current}px;border-radius:${panelRadius.current}px;` +
+    `width:${panelWidth.current}px;height:${panelHeightStyle};max-height:${Math.max(windowHeight - 32, 42)}px;border-radius:${panelRadius.current}px;` +
       `box-shadow:${isOpen ? 'var(--dial-shadow)' : 'var(--dial-shadow-collapsed)'};` +
       `cursor:${isOpen ? '' : 'pointer'};overflow:${isOpen ? 'hidden auto' : 'hidden'};` +
       `transform:scale(${panelScale.current});`
@@ -110,7 +119,7 @@
 
 {#if isRoot && inline}
   <div class="dialkit-panel-inner dialkit-panel-inline">
-    <div bind:this={contentRef} class="dialkit-folder dialkit-folder-root">
+    <div bind:this={contentRef} class="dialkit-folder dialkit-folder-root" data-open={String(isOpen)}>
       <div class="dialkit-folder-header dialkit-panel-header" onclick={(e) => { e.stopPropagation(); handleToggle(); }}>
         <div class="dialkit-folder-header-top">
           <div class="dialkit-folder-title-row">
@@ -118,9 +127,11 @@
           </div>
         </div>
 
-        <div class="dialkit-panel-toolbar" onclick={(e) => e.stopPropagation()}>
-          {#if toolbar}{@render toolbar()}{/if}
-        </div>
+        {#if toolbar}
+          <div class="dialkit-panel-toolbar" onclick={(e) => e.stopPropagation()}>
+            {@render toolbar()}
+          </div>
+        {/if}
       </div>
 
       <div class="dialkit-folder-content">
@@ -142,7 +153,7 @@
     onpointerleave={handleCollapsedTapEnd}
     onclick={() => { if (!isOpen) handleToggle(); }}
   >
-    <div bind:this={contentRef} class="dialkit-folder dialkit-folder-root">
+    <div bind:this={contentRef} class="dialkit-folder dialkit-folder-root" data-open={String(isOpen)}>
       <div class="dialkit-folder-header dialkit-panel-header" onclick={(e) => { e.stopPropagation(); handleToggle(); }}>
         <div class="dialkit-folder-header-top">
           {#if isOpen}
@@ -163,9 +174,9 @@
           </svg>
         </div>
 
-        {#if isOpen}
+        {#if isOpen && toolbar}
           <div class="dialkit-panel-toolbar" onclick={(e) => e.stopPropagation()}>
-            {#if toolbar}{@render toolbar()}{/if}
+            {@render toolbar()}
           </div>
         {/if}
       </div>
@@ -180,7 +191,7 @@
     </div>
   </div>
 {:else}
-  <div class="dialkit-folder">
+  <div class="dialkit-folder" data-open={String(isOpen)}>
     <div class="dialkit-folder-header" onclick={handleToggle}>
       <div class="dialkit-folder-header-top">
         <div class="dialkit-folder-title-row">

package/dist/svelte/components/Folder.svelte.d.ts

@@ -6,6 +6,7 @@ type $$ComponentProps = {
     inline?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     toolbar?: Snippet;
+    panelHeightOffset?: number;
     children?: Snippet;
 };
 declare const Folder: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/svelte/components/Folder.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Folder.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Folder.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0LJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Folder.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Folder.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoMJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/svelte/components/Panel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Spring } from 'svelte/motion';
+  import type { Snippet } from 'svelte';
   import { DialStore } from 'dialkit/store';
   import type { DialValue, PanelConfig, Preset } from 'dialkit/store';
   import Folder from './Folder.svelte';
@@ -8,7 +9,14 @@
   import ShortcutsMenu from './ShortcutsMenu.svelte';
   import { ICON_CLIPBOARD, ICON_CHECK, ICON_ADD_PRESET } from '../../icons';
 
-  let { panel, defaultOpen = true, inline = false } = $props<{ panel: PanelConfig; defaultOpen?: boolean; inline?: boolean }>();
+  let { panel, defaultOpen = true, inline = false, onOpenChange, variant = 'root', toolbarExtra } = $props<{
+    panel: PanelConfig;
+    defaultOpen?: boolean;
+    inline?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    variant?: 'root' | 'section';
+    toolbarExtra?: Snippet;
+  }>();
 
   const hasShortcuts = $derived(Object.keys(panel.shortcuts).length > 0);
 
@@ -72,78 +80,103 @@
       copied = false;
     }, 1500);
   };
+
+  const handleOpenChange = (open: boolean) => {
+    isPanelOpen = open;
+    onOpenChange?.(open);
+  };
 </script>
 
-<div class="dialkit-panel-wrapper">
-  <Folder title={panel.name} {defaultOpen} isRoot={true} {inline} onOpenChange={(open) => (isPanelOpen = open)}>
-    {#snippet toolbar()}
-      <button
-        class="dialkit-toolbar-add"
-        onclick={handleAddPreset}
-        onpointerdown={() => addScale.set(0.9)}
-        onpointerup={() => addScale.set(1)}
-        onpointercancel={() => addScale.set(1)}
-        onpointerleave={() => addScale.set(1)}
-        title="Add preset"
-        style:transform={`scale(${addScale.current})`}
+{#snippet panelToolbar()}
+  <button
+    class="dialkit-toolbar-add"
+    onclick={handleAddPreset}
+    onpointerdown={() => addScale.set(0.9)}
+    onpointerup={() => addScale.set(1)}
+    onpointercancel={() => addScale.set(1)}
+    onpointerleave={() => addScale.set(1)}
+    title="Add preset"
+    style:transform={`scale(${addScale.current})`}
+  >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d={ICON_ADD_PRESET[0]} />
+      <path d={ICON_ADD_PRESET[1]} />
+      <path d={ICON_ADD_PRESET[2]} />
+      <path d={ICON_ADD_PRESET[3]} />
+      <path d={ICON_ADD_PRESET[4]} />
+    </svg>
+  </button>
+
+  <PresetManager panelId={panel.id} {presets} {activePresetId} />
+
+  <button
+    class="dialkit-toolbar-copy"
+    onclick={handleCopy}
+    onpointerdown={() => copyScale.set(0.95)}
+    onpointerup={() => copyScale.set(1)}
+    onpointercancel={() => copyScale.set(1)}
+    onpointerleave={() => copyScale.set(1)}
+    title="Copy parameters"
+    style:transform={`scale(${copyScale.current})`}
+  >
+    <span class="dialkit-toolbar-copy-icon-wrap">
+      <svg
+        class="dialkit-toolbar-copy-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        style:opacity={clipboardOpacity.current}
+        style:transform={`scale(${clipboardScale.current})`}
+        style:filter={`blur(${(1 - clipboardOpacity.current) * 4}px)`}
       >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d={ICON_ADD_PRESET[0]} />
-          <path d={ICON_ADD_PRESET[1]} />
-          <path d={ICON_ADD_PRESET[2]} />
-          <path d={ICON_ADD_PRESET[3]} />
-          <path d={ICON_ADD_PRESET[4]} />
-        </svg>
-      </button>
-
-      <PresetManager panelId={panel.id} {presets} {activePresetId} />
-
-      <button
-        class="dialkit-toolbar-copy"
-        onclick={handleCopy}
-        onpointerdown={() => copyScale.set(0.95)}
-        onpointerup={() => copyScale.set(1)}
-        onpointercancel={() => copyScale.set(1)}
-        onpointerleave={() => copyScale.set(1)}
-        title="Copy parameters"
-        style:transform={`scale(${copyScale.current})`}
+        <path d={ICON_CLIPBOARD.board} stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+        <path d={ICON_CLIPBOARD.sparkle} fill="currentColor"/>
+        <path d={ICON_CLIPBOARD.body} stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+
+      <svg
+        class="dialkit-toolbar-copy-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        style:opacity={checkOpacity.current}
+        style:transform={`scale(${checkScale.current})`}
+        style:filter={`blur(${(1 - checkOpacity.current) * 4}px)`}
       >
-        <span class="dialkit-toolbar-copy-icon-wrap">
-          <svg
-            class="dialkit-toolbar-copy-icon"
-            viewBox="0 0 24 24"
-            fill="none"
-            style:opacity={clipboardOpacity.current}
-            style:transform={`scale(${clipboardScale.current})`}
-            style:filter={`blur(${(1 - clipboardOpacity.current) * 4}px)`}
-          >
-            <path d={ICON_CLIPBOARD.board} stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
-            <path d={ICON_CLIPBOARD.sparkle} fill="currentColor"/>
-            <path d={ICON_CLIPBOARD.body} stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-
-          <svg
-            class="dialkit-toolbar-copy-icon"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            style:opacity={checkOpacity.current}
-            style:transform={`scale(${checkScale.current})`}
-            style:filter={`blur(${(1 - checkOpacity.current) * 4}px)`}
-          >
-            <path d={ICON_CHECK} />
-          </svg>
-        </span>
-        Copy
-      </button>
-
-    {/snippet}
-
-    {#each panel.controls as control (control.path)}
-      <ControlRenderer panelId={panel.id} {control} {values} />
-    {/each}
+        <path d={ICON_CHECK} />
+      </svg>
+    </span>
+    Copy
+  </button>
+
+  {#if toolbarExtra}
+    {@render toolbarExtra()}
+  {/if}
+{/snippet}
+
+{#snippet panelControls()}
+  {#each panel.controls as control (control.path)}
+    <ControlRenderer panelId={panel.id} {control} {values} />
+  {/each}
+{/snippet}
+
+{#if variant === 'section'}
+  <Folder title={panel.name} {defaultOpen} onOpenChange={handleOpenChange}>
+    <div class="dialkit-panel-section-toolbar" onclick={(e) => e.stopPropagation()}>
+      {@render panelToolbar()}
+    </div>
+    {@render panelControls()}
   </Folder>
-</div>
+{:else}
+  <div class="dialkit-panel-wrapper">
+    <Folder title={panel.name} {defaultOpen} isRoot={true} {inline} onOpenChange={handleOpenChange}>
+      {#snippet toolbar()}
+        {@render panelToolbar()}
+      {/snippet}
+
+      {@render panelControls()}
+    </Folder>
+  </div>
+{/if}