dialkit 1.2.1 → 1.3.0

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

@@ -8,7 +8,13 @@
   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' } = $props<{
+    panel: PanelConfig;
+    defaultOpen?: boolean;
+    inline?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    variant?: 'root' | 'section';
+  }>();
 
   const hasShortcuts = $derived(Object.keys(panel.shortcuts).length > 0);
 
@@ -72,78 +78,99 @@
       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>
+{/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}

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

@@ -3,6 +3,8 @@ type $$ComponentProps = {
     panel: PanelConfig;
     defaultOpen?: boolean;
     inline?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    variant?: 'root' | 'section';
 };
 declare const Panel: import("svelte").Component<$$ComponentProps, {}, "">;
 type Panel = ReturnType<typeof Panel>;

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Panel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAa,WAAW,EAAU,MAAM,eAAe,CAAC;AAOnE,KAAK,gBAAgB,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAqHzF,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Panel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAa,WAAW,EAAU,MAAM,eAAe,CAAC;AAOnE,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B,CAAC;AA0IJ,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/svelte/components/PresetManager.svelte

@@ -4,6 +4,7 @@
   import { DialStore } from 'dialkit/store';
   import type { Preset } from 'dialkit/store';
   import { dropdownTransition } from './transitions';
+  import { getDialKitPortalRoot, getDropdownPosition } from '../../dropdown-position';
   import { ICON_CHEVRON, ICON_TRASH } from '../../icons';
 
   let { panelId, presets, activePresetId } = $props<{
@@ -25,9 +26,8 @@
   const activePreset = $derived(presets.find((p: Preset) => p.id === activePresetId));
 
   const updatePos = () => {
-    const rect = triggerRef?.getBoundingClientRect();
-    if (!rect) return;
-    pos = { top: rect.bottom + 4, left: rect.left, width: rect.width };
+    if (!triggerRef || !portalTarget) return;
+    pos = getDropdownPosition(triggerRef, portalTarget, { allowAbove: false });
   };
 
   const openDropdown = () => {
@@ -42,7 +42,7 @@
 
   $effect(() => {
     if (typeof document === 'undefined' || !triggerRef) return;
-    portalTarget = (triggerRef.closest('.dialkit-root') as HTMLElement | null) ?? document.body;
+    portalTarget = getDialKitPortalRoot(triggerRef) ?? document.body;
   });
 
   $effect(() => {
@@ -117,7 +117,7 @@
         <div
           bind:this={dropdownRef}
           class="dialkit-root dialkit-preset-dropdown"
-          style={`position:fixed;top:${pos.top}px;left:${pos.left}px;min-width:${pos.width}px;`}
+          style={`position:absolute;top:${pos.top}px;left:${pos.left}px;min-width:${pos.width}px;`}
           transition:dropdownTransition={{ above: false }}
         >
           <div

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

@@ -1 +1 @@
-{"version":3,"file":"PresetManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PresetManager.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAI3C,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,CAAC;AA2HJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PresetManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PresetManager.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAK3C,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,CAAC;AA2HJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/SelectControl.svelte

@@ -2,6 +2,7 @@
   import { Spring } from 'svelte/motion';
   import Portal from '../Portal.svelte';
   import { dropdownTransition } from './transitions';
+  import { getDialKitPortalRoot, getDropdownPosition } from '../../dropdown-position';
   import { ICON_CHEVRON } from '../../icons';
 
   type SelectOption = string | { value: string; label: string };
@@ -32,18 +33,9 @@
   const selectedOption = $derived(normalized.find((o: { value: string; label: string }) => o.value === value));
 
   const updatePos = () => {
-    if (!triggerRef || typeof window === 'undefined') return;
-    const rect = triggerRef.getBoundingClientRect();
+    if (!triggerRef || !portalTarget || typeof window === 'undefined') return;
     const dropdownHeight = 8 + normalized.length * 36;
-    const spaceBelow = window.innerHeight - rect.bottom - 4;
-    const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
-
-    pos = {
-      top: above ? rect.top - 4 : rect.bottom + 4,
-      left: rect.left,
-      width: rect.width,
-      above,
-    };
+    pos = getDropdownPosition(triggerRef, portalTarget, { dropdownHeight });
   };
 
   const openDropdown = () => {
@@ -59,16 +51,16 @@
     if (!pos || typeof window === 'undefined') return '';
 
     if (pos.above) {
-      return `position:fixed;left:${pos.left}px;width:${pos.width}px;bottom:${window.innerHeight - pos.top}px;transform-origin:bottom;`;
+      return `position:absolute;left:${pos.left}px;top:${pos.top}px;width:${pos.width}px;transform-origin:bottom;`;
     }
 
-    return `position:fixed;left:${pos.left}px;width:${pos.width}px;top:${pos.top}px;transform-origin:top;`;
+    return `position:absolute;left:${pos.left}px;top:${pos.top}px;width:${pos.width}px;transform-origin:top;`;
   });
 
   $effect(() => {
     if (typeof document === 'undefined' || !triggerRef) return;
 
-    portalTarget = (triggerRef.closest('.dialkit-root') as HTMLElement | null) ?? document.body;
+    portalTarget = getDialKitPortalRoot(triggerRef) ?? document.body;
   });
 
   $effect(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"SelectControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SelectControl.svelte.ts"],"names":[],"mappings":"AASE,KAAK,YAAY,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAC/D,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AA+HJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SelectControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SelectControl.svelte.ts"],"names":[],"mappings":"AAUE,KAAK,YAAY,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAC/D,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAuHJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/createDialKit.svelte.d.ts

@@ -1,8 +1,18 @@
-import type { DialConfig, ResolvedValues, ShortcutConfig } from 'dialkit/store';
+import type { DialConfig, DialKitPersistOptions, DialKitValueUpdates, DialValue, ResolvedValues, ShortcutConfig } from 'dialkit/store';
 export interface CreateDialOptions {
+    id?: string;
+    persist?: DialKitPersistOptions;
     onAction?: (action: string) => void;
     shortcuts?: Record<string, ShortcutConfig>;
 }
 export type DialKitValues<T> = T;
+export interface DialKitController<T extends DialConfig> {
+    values: DialKitValues<ResolvedValues<T>>;
+    setValue: (path: string, value: DialValue) => void;
+    setValues: (values: DialKitValueUpdates<T>) => void;
+    resetValues: () => void;
+    getValues: () => ResolvedValues<T>;
+}
 export declare function createDialKit<T extends DialConfig>(name: string, config: T, options?: CreateDialOptions): DialKitValues<ResolvedValues<T>>;
+export declare function createDialKitController<T extends DialConfig>(name: string, config: T, options?: CreateDialOptions): DialKitController<T>;
 //# sourceMappingURL=createDialKit.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"createDialKit.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/createDialKit.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,EAGV,cAAc,EAEd,cAAc,EAGf,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CAC5C;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC;AAIjC,wBAAgB,aAAa,CAAC,CAAC,SAAS,UAAU,EAChD,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,iBAAiB,GAC1B,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CA0BlC"}
+{"version":3,"file":"createDialKit.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/createDialKit.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,EACV,qBAAqB,EACrB,mBAAmB,EACnB,SAAS,EAET,cAAc,EAEd,cAAc,EAGf,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CAC5C;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC;AAEjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,UAAU;IACrD,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD,SAAS,EAAE,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACpD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC;CACpC;AAID,wBAAgB,aAAa,CAAC,CAAC,SAAS,UAAU,EAChD,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,iBAAiB,GAC1B,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAElC;AAED,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,UAAU,EAC1D,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,iBAAiB,GAC1B,iBAAiB,CAAC,CAAC,CAAC,CA4CtB"}

package/dist/svelte/createDialKit.svelte.js

@@ -1,11 +1,18 @@
-import { DialStore } from 'dialkit/store';
+import { DialStore, flattenDialValueUpdates, resolveDialValues } from 'dialkit/store';
 let dialKitInstance = 0;
 export function createDialKit(name, config, options) {
-    const panelId = `${name}-${++dialKitInstance}`;
-    const resolve = () => buildResolvedValues(config, DialStore.getValues(panelId), '');
+    return createDialKitController(name, config, options).values;
+}
+export function createDialKitController(name, config, options) {
+    const hasStableId = options?.id !== undefined;
+    const panelId = options?.id ?? `${name}-${++dialKitInstance}`;
+    const resolve = () => resolveDialValues(config, DialStore.getValues(panelId));
     let values = $state(resolve());
     $effect(() => {
-        DialStore.registerPanel(panelId, name, config, options?.shortcuts);
+        DialStore.registerPanel(panelId, name, config, options?.shortcuts, {
+            retainOnUnmount: hasStableId,
+            persist: options?.persist,
+        });
         values = resolve();
         const unsubValues = DialStore.subscribe(panelId, () => {
             values = resolve();
@@ -19,42 +26,66 @@ export function createDialKit(name, config, options) {
             DialStore.unregisterPanel(panelId);
         };
     });
-    return values;
+    return {
+        values: buildReactiveValues(config, () => values, ''),
+        setValue(path, value) {
+            DialStore.updateValue(panelId, path, value);
+        },
+        setValues(nextValues) {
+            DialStore.updateValues(panelId, flattenDialValueUpdates(config, nextValues));
+        },
+        resetValues() {
+            DialStore.resetValues(panelId);
+        },
+        getValues() {
+            return resolve();
+        },
+    };
 }
-function buildResolvedValues(config, flatValues, prefix) {
+function buildReactiveValues(config, getValues, prefix) {
     const result = {};
     for (const [key, configValue] of Object.entries(config)) {
         if (key === '_collapsed')
             continue;
         const path = prefix ? `${prefix}.${key}` : key;
-        if (Array.isArray(configValue) && configValue.length <= 4 && typeof configValue[0] === 'number') {
-            result[key] = flatValues[path] ?? configValue[0];
-        }
-        else if (typeof configValue === 'number' || typeof configValue === 'boolean' || typeof configValue === 'string') {
-            result[key] = flatValues[path] ?? configValue;
-        }
-        else if (isSpringConfig(configValue) || isEasingConfig(configValue)) {
-            result[key] = flatValues[path] ?? configValue;
-        }
-        else if (isActionConfig(configValue)) {
-            result[key] = flatValues[path] ?? configValue;
-        }
-        else if (isSelectConfig(configValue)) {
-            const defaultValue = configValue.default ?? getFirstOptionValue(configValue.options);
-            result[key] = flatValues[path] ?? defaultValue;
-        }
-        else if (isColorConfig(configValue)) {
-            result[key] = flatValues[path] ?? configValue.default ?? '#000000';
-        }
-        else if (isTextConfig(configValue)) {
-            result[key] = flatValues[path] ?? configValue.default ?? '';
-        }
-        else if (typeof configValue === 'object' && configValue !== null) {
-            result[key] = buildResolvedValues(configValue, flatValues, path);
+        if (typeof configValue === 'object' && configValue !== null && !isLeafConfigValue(configValue)) {
+            const nested = buildReactiveValues(configValue, getValues, path);
+            Object.defineProperty(result, key, {
+                enumerable: true,
+                get() {
+                    return nested;
+                },
+            });
+            continue;
         }
+        Object.defineProperty(result, key, {
+            enumerable: true,
+            get() {
+                return getPathValue(getValues(), path);
+            },
+        });
     }
     return result;
 }
+function getPathValue(source, path) {
+    return path.split('.').reduce((value, segment) => {
+        if (typeof value !== 'object' || value === null)
+            return undefined;
+        return value[segment];
+    }, source);
+}
+function isLeafConfigValue(value) {
+    return ((Array.isArray(value) && value.length <= 4 && typeof value[0] === 'number') ||
+        typeof value === 'number' ||
+        typeof value === 'boolean' ||
+        typeof value === 'string' ||
+        isSpringConfig(value) ||
+        isEasingConfig(value) ||
+        isActionConfig(value) ||
+        isSelectConfig(value) ||
+        isColorConfig(value) ||
+        isTextConfig(value));
+}
 function hasType(value, type) {
     return typeof value === 'object' && value !== null && 'type' in value && value.type === type;
 }
@@ -76,7 +107,3 @@ function isColorConfig(value) {
 function isTextConfig(value) {
     return hasType(value, 'text');
 }
-function getFirstOptionValue(options) {
-    const first = options[0];
-    return typeof first === 'string' ? first : first.value;
-}

package/dist/svelte/index.d.ts

@@ -1,5 +1,5 @@
-export { createDialKit } from './createDialKit.svelte';
-export type { CreateDialOptions, DialKitValues } from './createDialKit.svelte';
+export { createDialKit, createDialKitController } from './createDialKit.svelte.js';
+export type { CreateDialOptions, DialKitController, DialKitValues } from './createDialKit.svelte.js';
 export { default as DialRoot } from './components/DialRoot.svelte';
 export type { DialPosition, DialMode, DialTheme } from './components/DialRoot.svelte';
 export { default as ShortcutListener } from './components/ShortcutListener.svelte';
@@ -19,5 +19,5 @@ export { default as SelectControl } from './components/SelectControl.svelte';
 export { default as ColorControl } from './components/ColorControl.svelte';
 export { default as PresetManager } from './components/PresetManager.svelte';
 export { DialStore } from 'dialkit/store';
-export type { SpringConfig, EasingConfig, TransitionConfig, ActionConfig, SelectConfig, ColorConfig, TextConfig, ShortcutConfig, Preset, DialValue, DialConfig, ResolvedValues, ControlMeta, PanelConfig, } from 'dialkit/store';
+export type { SpringConfig, EasingConfig, TransitionConfig, ActionConfig, SelectConfig, ColorConfig, TextConfig, ShortcutConfig, Preset, DialValue, DialConfig, DialKitPersistOptions, DialKitValueUpdates, ResolvedValues, ControlMeta, PanelConfig, } from 'dialkit/store';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAG/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGtF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAG7E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAG7E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,MAAM,EACN,SAAS,EACT,UAAU,EACV,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACnF,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAGrG,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACnE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGtF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAG7E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAG7E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,MAAM,EACN,SAAS,EACT,UAAU,EACV,qBAAqB,EACrB,mBAAmB,EACnB,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,eAAe,CAAC"}

package/dist/svelte/index.js

@@ -1,5 +1,5 @@
 // Core API
-export { createDialKit } from './createDialKit.svelte';
+export { createDialKit, createDialKitController } from './createDialKit.svelte.js';
 // Root component
 export { default as DialRoot } from './components/DialRoot.svelte';
 // Shortcut components