dialkit 1.0.0 → 1.2.0

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+};
+declare const ColorControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type ColorControl = ReturnType<typeof ColorControl>;
+export default ColorControl;
+//# sourceMappingURL=ColorControl.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ColorControl.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AA4DJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/ControlRenderer.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { DialStore } from 'dialkit/store';
+  import type { ControlMeta, DialValue, SpringConfig, TransitionConfig } from 'dialkit/store';
+  import Slider from './Slider.svelte';
+  import Toggle from './Toggle.svelte';
+  import Folder from './Folder.svelte';
+  import SpringControl from './SpringControl.svelte';
+  import TransitionControl from './TransitionControl.svelte';
+  import TextControl from './TextControl.svelte';
+  import SelectControl from './SelectControl.svelte';
+  import ColorControl from './ColorControl.svelte';
+  import ControlRenderer from './ControlRenderer.svelte';
+  import { SHORTCUT_CTX } from './ShortcutListener.svelte';
+  import type { ShortcutContextValue } from './ShortcutListener.svelte';
+
+  let { panelId, control, values } = $props<{
+    panelId: string;
+    control: ControlMeta;
+    values: Record<string, DialValue>;
+  }>();
+
+  const shortcutCtx = getContext<ShortcutContextValue | undefined>(SHORTCUT_CTX);
+
+  const controlValue = $derived(values[control.path]);
+  const isShortcutActive = $derived(
+    shortcutCtx ? shortcutCtx.activePanelId === panelId && shortcutCtx.activePath === control.path : false
+  );
+</script>
+
+{#if control.type === 'slider'}
+  <Slider
+    label={control.label}
+    value={controlValue as number}
+    onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+    min={control.min}
+    max={control.max}
+    step={control.step}
+    shortcut={control.shortcut}
+    shortcutActive={isShortcutActive}
+  />
+{:else if control.type === 'toggle'}
+  <Toggle
+    label={control.label}
+    checked={controlValue as boolean}
+    onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+    shortcut={control.shortcut}
+    shortcutActive={isShortcutActive}
+  />
+{:else if control.type === 'spring'}
+  <SpringControl
+    {panelId}
+    path={control.path}
+    label={control.label}
+    spring={controlValue as SpringConfig}
+    onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+  />
+{:else if control.type === 'transition'}
+  <TransitionControl
+    {panelId}
+    path={control.path}
+    label={control.label}
+    value={controlValue as TransitionConfig}
+    onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+  />
+{: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} />
+    {/each}
+  </Folder>
+{:else if control.type === 'text'}
+  <TextControl
+    label={control.label}
+    value={controlValue as string}
+    onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+    placeholder={control.placeholder}
+  />
+{:else if control.type === 'select'}
+  <SelectControl
+    label={control.label}
+    value={controlValue as string}
+    options={control.options ?? []}
+    onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+  />
+{:else if control.type === 'color'}
+  <ColorControl
+    label={control.label}
+    value={controlValue as string}
+    onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+  />
+{:else if control.type === 'action'}
+  <button class="dialkit-button" onclick={() => DialStore.triggerAction(panelId, control.path)}>
+    {control.label}
+  </button>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { ControlMeta, DialValue } from 'dialkit/store';
+import ControlRenderer from './ControlRenderer.svelte';
+type $$ComponentProps = {
+    panelId: string;
+    control: ControlMeta;
+    values: Record<string, DialValue>;
+};
+declare const ControlRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
+type ControlRenderer = ReturnType<typeof ControlRenderer>;
+export default ControlRenderer;
+//# sourceMappingURL=ControlRenderer.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/svelte/components/DialRoot.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { DialStore } from 'dialkit/store';
+  import type { PanelConfig } from 'dialkit/store';
+  import { themeCSS } from '../theme-css';
+  import Portal from '../Portal.svelte';
+  import Panel from './Panel.svelte';
+  import ShortcutListener from './ShortcutListener.svelte';
+
+  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'
+      : true;
+
+  let { position = 'top-right', defaultOpen = true, mode = 'popover', theme = 'system' as DialTheme, productionEnabled = isDevDefault } = $props<{
+    position?: DialPosition;
+    defaultOpen?: boolean;
+    mode?: DialMode;
+    theme?: DialTheme;
+    productionEnabled?: boolean;
+  }>();
+
+  const inline = $derived(mode === 'inline');
+
+  let panels = $state<PanelConfig[]>([]);
+  let mounted = $state(false);
+
+  $effect(() => {
+    if (typeof document === 'undefined') return;
+    const id = 'dialkit-theme';
+    if (!document.getElementById(id)) {
+      const style = document.createElement('style');
+      style.id = id;
+      style.textContent = themeCSS;
+      document.head.appendChild(style);
+    }
+  });
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+
+    mounted = true;
+    panels = DialStore.getPanels();
+
+    const unsub = DialStore.subscribeGlobal(() => {
+      panels = DialStore.getPanels();
+    });
+
+    return unsub;
+  });
+</script>
+
+{#if productionEnabled && mounted && panels.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>
+      </div>
+    </ShortcutListener>
+  {/snippet}
+
+  {#if inline}
+    {@render content()}
+  {:else}
+    <Portal target="body">
+      {@render content()}
+    </Portal>
+  {/if}
+{/if}

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

@@ -0,0 +1,14 @@
+export type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type DialMode = 'popover' | 'inline';
+export type DialTheme = 'light' | 'dark' | 'system';
+type $$ComponentProps = {
+    position?: DialPosition;
+    defaultOpen?: boolean;
+    mode?: DialMode;
+    theme?: DialTheme;
+    productionEnabled?: boolean;
+};
+declare const DialRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialRoot = ReturnType<typeof DialRoot>;
+export default DialRoot;
+//# sourceMappingURL=DialRoot.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/svelte/components/EasingVisualization.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { EasingConfig } from 'dialkit/store';
+
+  let { easing } = $props<{ easing: EasingConfig }>();
+
+  export const easingPresets: Record<string, [number, number, number, number]> = {
+    linear: [0, 0, 1, 1],
+    easeIn: [0.42, 0, 1, 1],
+    easeOut: [0, 0, 0.58, 1],
+    easeInOut: [0.42, 0, 0.58, 1],
+  };
+
+  const s = 200;
+  const pad = 10;
+  const inner = s - pad * 2;
+  const unit = inner / 2;
+
+  const toSvg = (nx: number, ny: number) => ({
+    x: pad + (nx + 0.5) * unit,
+    y: pad + (1.5 - ny) * unit,
+  });
+
+  const points = $derived.by(() => {
+    const ease = easing.ease;
+    const start = toSvg(0, 0);
+    const end = toSvg(1, 1);
+    const p1 = toSvg(ease[0], ease[1]);
+    const p2 = toSvg(ease[2], ease[3]);
+
+    return {
+      start,
+      end,
+      curvePath: `M ${start.x} ${start.y} C ${p1.x} ${p1.y}, ${p2.x} ${p2.y}, ${end.x} ${end.y}`,
+    };
+  });
+</script>
+
+<svg viewBox={`0 0 ${s} ${s}`} preserveAspectRatio="xMidYMid slice" class="dialkit-spring-viz dialkit-easing-viz">
+  <line
+    x1={points.start.x}
+    y1={points.start.y}
+    x2={points.end.x}
+    y2={points.end.y}
+    stroke="rgba(255, 255, 255, 0.15)"
+    stroke-width="1"
+    stroke-dasharray="4,4"
+  />
+
+  <path d={points.curvePath} fill="none" stroke="rgba(255, 255, 255, 0.6)" stroke-width="2" stroke-linecap="round" />
+</svg>

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

@@ -0,0 +1,10 @@
+import type { EasingConfig } from 'dialkit/store';
+type $$ComponentProps = {
+    easing: EasingConfig;
+};
+declare const EasingVisualization: import("svelte").Component<$$ComponentProps, {
+    easingPresets: Record<string, [number, number, number, number]>;
+}, "">;
+type EasingVisualization = ReturnType<typeof EasingVisualization>;
+export default EasingVisualization;
+//# sourceMappingURL=EasingVisualization.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EasingVisualization.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EasingVisualization.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEjD,KAAK,gBAAgB,GAAG;IAAE,MAAM,EAAE,YAAY,CAAA;CAAE,CAAC;AA8ClD,QAAA,MAAM,mBAAmB;mBADyF,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;MACjG,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/Folder.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+  import { slide } from 'svelte/transition';
+
+  import type { Snippet } from 'svelte';
+  import { ICON_PANEL, ICON_CHEVRON } from '../../icons';
+
+  let {
+    title,
+    defaultOpen = true,
+    isRoot = false,
+    inline = false,
+    onOpenChange,
+    toolbar,
+    children,
+  } = $props<{
+    title: string;
+    defaultOpen?: boolean;
+    isRoot?: boolean;
+    inline?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    toolbar?: Snippet;
+    children?: Snippet;
+  }>();
+
+  let isOpen = $state(defaultOpen);
+  let isCollapsed = $state(!defaultOpen);
+  let contentHeight = $state<number | undefined>(undefined);
+
+  let contentRef: HTMLDivElement | undefined;
+  let panelRef: HTMLDivElement | undefined;
+  let windowHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 800);
+
+  $effect(() => {
+    if (!isRoot) return;
+    const onResize = () => { windowHeight = window.innerHeight; };
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  });
+
+  const chevronRotation = new Spring(defaultOpen ? 0 : 180, { stiffness: 0.2, damping: 0.6 });
+  const panelWidth = new Spring(defaultOpen ? 280 : 42, { stiffness: 0.2, damping: 0.62 });
+  const panelHeight = new Spring(defaultOpen ? 220 : 42, { stiffness: 0.2, damping: 0.62 });
+  const panelRadius = new Spring(defaultOpen ? 14 : 21, { stiffness: 0.2, damping: 0.62 });
+  const panelScale = new Spring(1, { stiffness: 0.25, damping: 0.7 });
+
+  $effect(() => {
+    if (!isRoot || !contentRef || typeof ResizeObserver === 'undefined') return;
+
+    const ro = new ResizeObserver(() => {
+      if (!isOpen) return;
+      const next = contentRef?.offsetHeight;
+      if (!next) return;
+      contentHeight = next;
+    });
+
+    ro.observe(contentRef);
+
+    if (contentRef.offsetHeight > 0) {
+      contentHeight = contentRef.offsetHeight;
+    }
+
+    return () => {
+      ro.disconnect();
+    };
+  });
+
+  $effect(() => {
+    if (isRoot) return;
+    chevronRotation.set(isOpen ? 0 : 180);
+  });
+
+  $effect(() => {
+    if (!isRoot) return;
+
+    const measured = contentHeight ?? panelRef?.getBoundingClientRect().height ?? 42;
+    const nextHeight = isOpen ? Math.min(measured + 10, windowHeight - 32) : 42;
+
+    panelWidth.set(isOpen ? 280 : 42);
+    panelHeight.set(nextHeight);
+    panelRadius.set(isOpen ? 14 : 21);
+  });
+
+  const handleToggle = () => {
+    if (inline && isRoot) return;
+    const next = !isOpen;
+    isOpen = next;
+    isCollapsed = !next;
+    onOpenChange?.(next);
+  };
+
+  const handleCollapsedTapStart = () => {
+    if (isOpen) return;
+    (document.activeElement as HTMLElement | null)?.blur?.();
+    panelScale.set(0.9);
+  };
+
+  const handleCollapsedTapEnd = () => {
+    if (isOpen) return;
+    panelScale.set(1);
+  };
+
+  const panelStyle = $derived(
+    `width:${panelWidth.current}px;height:${panelHeight.current}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});`
+  );
+</script>
+
+{#if isRoot && inline}
+  <div class="dialkit-panel-inner dialkit-panel-inline">
+    <div bind:this={contentRef} class="dialkit-folder dialkit-folder-root">
+      <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">
+            <span class="dialkit-folder-title dialkit-folder-title-root">{title}</span>
+          </div>
+        </div>
+
+        <div class="dialkit-panel-toolbar" onclick={(e) => e.stopPropagation()}>
+          {#if toolbar}{@render toolbar()}{/if}
+        </div>
+      </div>
+
+      <div class="dialkit-folder-content">
+        <div class="dialkit-folder-inner">
+          {#if children}{@render children()}{/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{:else if isRoot}
+  <div
+    bind:this={panelRef}
+    class="dialkit-panel-inner"
+    data-collapsed={String(isCollapsed)}
+    style={panelStyle}
+    onpointerdown={handleCollapsedTapStart}
+    onpointerup={handleCollapsedTapEnd}
+    onpointercancel={handleCollapsedTapEnd}
+    onpointerleave={handleCollapsedTapEnd}
+    onclick={() => { if (!isOpen) handleToggle(); }}
+  >
+    <div bind:this={contentRef} class="dialkit-folder dialkit-folder-root">
+      <div class="dialkit-folder-header dialkit-panel-header" onclick={(e) => { e.stopPropagation(); handleToggle(); }}>
+        <div class="dialkit-folder-header-top">
+          {#if isOpen}
+            <div class="dialkit-folder-title-row">
+              <span class="dialkit-folder-title dialkit-folder-title-root">{title}</span>
+            </div>
+          {/if}
+
+          <svg class="dialkit-panel-icon" viewBox="0 0 16 16" fill="none">
+            <path
+              opacity="0.5"
+              d={ICON_PANEL.path}
+              fill="currentColor"
+            />
+            <circle cx={ICON_PANEL.circles[0].cx} cy={ICON_PANEL.circles[0].cy} r={ICON_PANEL.circles[0].r} fill="currentColor" stroke="currentColor" stroke-width="1.25" />
+            <circle cx={ICON_PANEL.circles[1].cx} cy={ICON_PANEL.circles[1].cy} r={ICON_PANEL.circles[1].r} fill="currentColor" stroke="currentColor" stroke-width="1.25" />
+            <circle cx={ICON_PANEL.circles[2].cx} cy={ICON_PANEL.circles[2].cy} r={ICON_PANEL.circles[2].r} fill="currentColor" stroke="currentColor" stroke-width="1.25" />
+          </svg>
+        </div>
+
+        {#if isOpen}
+          <div class="dialkit-panel-toolbar" onclick={(e) => e.stopPropagation()}>
+            {#if toolbar}{@render toolbar()}{/if}
+          </div>
+        {/if}
+      </div>
+
+      {#if isOpen}
+        <div class="dialkit-folder-content">
+          <div class="dialkit-folder-inner">
+            {#if children}{@render children()}{/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else}
+  <div class="dialkit-folder">
+    <div class="dialkit-folder-header" onclick={handleToggle}>
+      <div class="dialkit-folder-header-top">
+        <div class="dialkit-folder-title-row">
+          <span class="dialkit-folder-title">{title}</span>
+        </div>
+
+        <svg
+          class="dialkit-folder-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          style:transform={`rotate(${chevronRotation.current}deg)`}
+        >
+          <path d={ICON_CHEVRON} />
+        </svg>
+      </div>
+    </div>
+
+    {#if isOpen}
+      <div class="dialkit-folder-content" style="clip-path: inset(0 -20px);" transition:slide={{ duration: 220 }}>
+        <div class="dialkit-folder-inner">
+          {#if children}{@render children()}{/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    defaultOpen?: boolean;
+    isRoot?: boolean;
+    inline?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    toolbar?: Snippet;
+    children?: Snippet;
+};
+declare const Folder: import("svelte").Component<$$ComponentProps, {}, "">;
+type Folder = ReturnType<typeof Folder>;
+export default Folder;
+//# sourceMappingURL=Folder.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/svelte/components/Panel.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+  import { DialStore } from 'dialkit/store';
+  import type { DialValue, PanelConfig, Preset } from 'dialkit/store';
+  import Folder from './Folder.svelte';
+  import PresetManager from './PresetManager.svelte';
+  import ControlRenderer from './ControlRenderer.svelte';
+  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 }>();
+
+  const hasShortcuts = $derived(Object.keys(panel.shortcuts).length > 0);
+
+  let copied = $state(false);
+  let isPanelOpen = $state(defaultOpen);
+  let values = $state<Record<string, DialValue>>(DialStore.getValues(panel.id));
+  let presets = $state<Preset[]>(DialStore.getPresets(panel.id));
+  let activePresetId = $state<string | null>(DialStore.getActivePresetId(panel.id));
+
+  const addScale = new Spring(1, { stiffness: 0.25, damping: 0.7 });
+  const copyScale = new Spring(1, { stiffness: 0.25, damping: 0.7 });
+  const clipboardOpacity = new Spring(1, { stiffness: 0.25, damping: 0.7 });
+  const clipboardScale = new Spring(1, { stiffness: 0.2, damping: 0.6 });
+  const checkOpacity = new Spring(0, { stiffness: 0.25, damping: 0.7 });
+  const checkScale = new Spring(0.5, { stiffness: 0.2, damping: 0.6 });
+
+  let copyTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    const unsub = DialStore.subscribe(panel.id, () => {
+      values = DialStore.getValues(panel.id);
+      presets = DialStore.getPresets(panel.id);
+      activePresetId = DialStore.getActivePresetId(panel.id);
+    });
+
+    return () => {
+      unsub();
+      if (copyTimeout) clearTimeout(copyTimeout);
+    };
+  });
+
+  $effect(() => {
+    if (copied) {
+      clipboardOpacity.set(0);
+      clipboardScale.set(0.5);
+      checkOpacity.set(1);
+      checkScale.set(1);
+      return;
+    }
+
+    clipboardOpacity.set(1);
+    clipboardScale.set(1);
+    checkOpacity.set(0);
+    checkScale.set(0.5);
+  });
+
+  const handleAddPreset = () => {
+    const nextNum = presets.length + 2;
+    DialStore.savePreset(panel.id, `Version ${nextNum}`);
+  };
+
+  const handleCopy = async () => {
+    const jsonStr = JSON.stringify(values, null, 2);
+    const instruction = `Update the createDialKit configuration for "${panel.name}" with these values:\n\n\`\`\`json\n${jsonStr}\n\`\`\`\n\nApply these values as the new defaults in the createDialKit call.`;
+
+    await navigator.clipboard.writeText(instruction);
+    copied = true;
+
+    if (copyTimeout) clearTimeout(copyTimeout);
+    copyTimeout = setTimeout(() => {
+      copied = false;
+    }, 1500);
+  };
+</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})`}
+      >
+        <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)`}
+          >
+            <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}
+  </Folder>
+</div>