dialkit 0.2.2 → 1.1.0

package/dist/svelte/components/SpringVisualization.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import type { SpringConfig } from 'dialkit/store';
+
+  let { spring, isSimpleMode } = $props<{ spring: SpringConfig; isSimpleMode: boolean }>();
+
+  function generateSpringCurve(
+    stiffness: number,
+    damping: number,
+    mass: number,
+    duration: number
+  ): [number, number][] {
+    const points: [number, number][] = [];
+    const steps = 100;
+    const dt = duration / steps;
+
+    let position = 0;
+    let velocity = 0;
+    const target = 1;
+
+    for (let i = 0; i <= steps; i++) {
+      const time = i * dt;
+      points.push([time, position]);
+
+      const springForce = -stiffness * (position - target);
+      const dampingForce = -damping * velocity;
+      const acceleration = (springForce + dampingForce) / mass;
+
+      velocity += acceleration * dt;
+      position += velocity * dt;
+    }
+
+    return points;
+  }
+
+  const width = 256;
+  const height = 140;
+
+  const pathData = $derived.by(() => {
+    let stiffness: number;
+    let damping: number;
+    let mass: number;
+
+    if (isSimpleMode) {
+      const visualDuration = spring.visualDuration ?? 0.3;
+      const bounce = spring.bounce ?? 0.2;
+      mass = 1;
+      stiffness = Math.pow((2 * Math.PI) / visualDuration, 2);
+      const dampingRatio = 1 - bounce;
+      damping = 2 * dampingRatio * Math.sqrt(stiffness * mass);
+    } else {
+      stiffness = spring.stiffness ?? 400;
+      damping = spring.damping ?? 17;
+      mass = spring.mass ?? 1;
+    }
+
+    const duration = 2;
+    const points = generateSpringCurve(stiffness, damping, mass, duration);
+    const values = points.map(([, v]) => v);
+    const minValue = Math.min(...values);
+    const maxValue = Math.max(...values);
+    const valueRange = maxValue - minValue;
+
+    return points
+      .map(([time, value], i) => {
+        const x = (time / duration) * width;
+        const normalizedValue = (value - minValue) / (valueRange || 1);
+        const y = height - (normalizedValue * height * 0.6 + height * 0.2);
+        return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+      })
+      .join(' ');
+  });
+
+  const gridLines = $derived.by(() => {
+    const lines: { x1: number; y1: number; x2: number; y2: number }[] = [];
+    for (let i = 1; i < 4; i++) {
+      const x = (width / 4) * i;
+      const y = (height / 4) * i;
+      lines.push({ x1: x, y1: 0, x2: x, y2: height });
+      lines.push({ x1: 0, y1: y, x2: width, y2: y });
+    }
+    return lines;
+  });
+</script>
+
+<svg viewBox={`0 0 ${width} ${height}`} class="dialkit-spring-viz">
+  {#each gridLines as line}
+    <line
+      x1={line.x1}
+      y1={line.y1}
+      x2={line.x2}
+      y2={line.y2}
+      stroke="rgba(255, 255, 255, 0.08)"
+      stroke-width="1"
+    />
+  {/each}
+
+  <line
+    x1={0}
+    y1={height / 2}
+    x2={width}
+    y2={height / 2}
+    stroke="rgba(255, 255, 255, 0.15)"
+    stroke-width="1"
+    stroke-dasharray="4,4"
+  />
+
+  <path
+    d={pathData}
+    fill="none"
+    stroke="rgba(255, 255, 255, 0.6)"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

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

@@ -0,0 +1,9 @@
+import type { SpringConfig } from 'dialkit/store';
+type $$ComponentProps = {
+    spring: SpringConfig;
+    isSimpleMode: boolean;
+};
+declare const SpringVisualization: import("svelte").Component<$$ComponentProps, {}, "">;
+type SpringVisualization = ReturnType<typeof SpringVisualization>;
+export default SpringVisualization;
+//# sourceMappingURL=SpringVisualization.svelte.d.ts.map

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

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

package/dist/svelte/components/TextControl.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  let { label, value, onChange, placeholder } = $props<{
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+  }>();
+</script>
+
+<div class="dialkit-text-control">
+  <label class="dialkit-text-label">{label}</label>
+  <input
+    type="text"
+    class="dialkit-text-input"
+    value={value}
+    placeholder={placeholder}
+    oninput={(e) => onChange((e.currentTarget as HTMLInputElement).value)}
+  />
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TextControl.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;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAYJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/Toggle.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import SegmentedControl from './SegmentedControl.svelte';
+
+  let { label, checked, onChange } = $props<{
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+  }>();
+</script>
+
+<div class="dialkit-labeled-control">
+  <span class="dialkit-labeled-control-label">{label}</span>
+  <SegmentedControl
+    options={[
+      { value: 'off', label: 'Off' },
+      { value: 'on', label: 'On' },
+    ]}
+    value={checked ? 'on' : 'off'}
+    onChange={(val) => onChange(val === 'on')}
+  />
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Toggle.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAiBJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/svelte/components/TransitionControl.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import { DialStore } from 'dialkit/store';
+  import type { EasingConfig, SpringConfig, TransitionConfig } from 'dialkit/store';
+  import Folder from './Folder.svelte';
+  import Slider from './Slider.svelte';
+  import SegmentedControl from './SegmentedControl.svelte';
+  import SpringVisualization from './SpringVisualization.svelte';
+  import EasingVisualization from './EasingVisualization.svelte';
+
+  type CurveMode = 'easing' | 'simple' | 'advanced';
+
+  let { panelId, path, label, value, onChange } = $props<{
+    panelId: string;
+    path: string;
+    label: string;
+    value: TransitionConfig;
+    onChange: (value: TransitionConfig) => void;
+  }>();
+
+  let mode = $state<CurveMode>(DialStore.getTransitionMode(panelId, path));
+  let editingEase = $state(false);
+  let easeDraft = $state('');
+
+  $effect(() => {
+    const unsub = DialStore.subscribe(panelId, () => {
+      mode = DialStore.getTransitionMode(panelId, path);
+    });
+    return unsub;
+  });
+
+  const isEasing = $derived(mode === 'easing');
+  const isSimpleSpring = $derived(mode === 'simple');
+
+  const spring = $derived<SpringConfig>(
+    value.type === 'spring'
+      ? value
+      : { type: 'spring', visualDuration: 0.3, bounce: 0.2 }
+  );
+
+  const easing = $derived<EasingConfig>(
+    value.type === 'easing'
+      ? value
+      : { type: 'easing', duration: 0.3, ease: [1, -0.4, 0.5, 1] }
+  );
+
+  const formatEase = (ease: [number, number, number, number]) =>
+    ease.map((v) => Number(v.toFixed(2))).join(', ');
+
+  const parseEase = (text: string): [number, number, number, number] | null => {
+    const parts = text.split(',').map((s) => Number.parseFloat(s.trim()));
+    if (parts.length !== 4 || parts.some((n) => Number.isNaN(n))) return null;
+    return parts as [number, number, number, number];
+  };
+
+  const handleModeChange = (nextMode: string) => {
+    const typed = nextMode as CurveMode;
+    DialStore.updateTransitionMode(panelId, path, typed);
+
+    if (typed === 'easing') {
+      const duration = value.type === 'spring' ? (value.visualDuration ?? 0.3) : value.duration;
+      onChange({ type: 'easing', duration, ease: easing.ease });
+      return;
+    }
+
+    if (typed === 'simple') {
+      onChange({
+        type: 'spring',
+        visualDuration: spring.visualDuration ?? (value.type === 'easing' ? value.duration : 0.3),
+        bounce: spring.bounce ?? 0.2,
+      });
+      return;
+    }
+
+    onChange({
+      type: 'spring',
+      stiffness: spring.stiffness ?? 200,
+      damping: spring.damping ?? 25,
+      mass: spring.mass ?? 1,
+    });
+  };
+
+  const handleSpringUpdate = (key: keyof SpringConfig, val: number) => {
+    if (isSimpleSpring) {
+      const { stiffness, damping, mass, ...rest } = spring;
+      onChange({ ...rest, [key]: val });
+    } else {
+      const { visualDuration, bounce, ...rest } = spring;
+      onChange({ ...rest, [key]: val });
+    }
+  };
+
+  const updateEase = (index: number, val: number) => {
+    const next = [...easing.ease] as [number, number, number, number];
+    next[index] = val;
+    onChange({ ...easing, ease: next });
+  };
+
+  const handleEaseFocus = () => {
+    easeDraft = formatEase(easing.ease);
+    editingEase = true;
+  };
+
+  const handleEaseBlur = () => {
+    const parsed = parseEase(easeDraft);
+    if (parsed) onChange({ ...easing, ease: parsed });
+    editingEase = false;
+  };
+</script>
+
+<Folder title={label} defaultOpen={true}>
+  <div style="display: flex; flex-direction: column; gap: 6px;">
+    {#if isEasing}
+      <EasingVisualization {easing} />
+    {:else}
+      <SpringVisualization spring={spring} isSimpleMode={isSimpleSpring} />
+    {/if}
+
+    <div class="dialkit-labeled-control">
+      <span class="dialkit-labeled-control-label">Type</span>
+      <SegmentedControl
+        options={[
+          { value: 'easing', label: 'Easing' },
+          { value: 'simple', label: 'Time' },
+          { value: 'advanced', label: 'Physics' },
+        ]}
+        value={mode}
+        onChange={handleModeChange}
+      />
+    </div>
+
+    {#if isEasing}
+      <Slider label="x1" value={easing.ease[0]} onChange={(v) => updateEase(0, v)} min={0} max={1} step={0.01} />
+      <Slider label="y1" value={easing.ease[1]} onChange={(v) => updateEase(1, v)} min={-1} max={2} step={0.01} />
+      <Slider label="x2" value={easing.ease[2]} onChange={(v) => updateEase(2, v)} min={0} max={1} step={0.01} />
+      <Slider label="y2" value={easing.ease[3]} onChange={(v) => updateEase(3, v)} min={-1} max={2} step={0.01} />
+      <Slider label="Duration" value={easing.duration} onChange={(v) => onChange({ ...easing, duration: v })} min={0.1} max={2} step={0.05} unit="s" />
+
+      <div class="dialkit-labeled-control">
+        <span class="dialkit-labeled-control-label">Ease</span>
+        <input
+          type="text"
+          class="dialkit-text-input"
+          value={editingEase ? easeDraft : formatEase(easing.ease)}
+          oninput={(e) => (easeDraft = (e.currentTarget as HTMLInputElement).value)}
+          onfocus={handleEaseFocus}
+          onblur={handleEaseBlur}
+          onkeydown={(e) => {
+            if (e.key === 'Enter') {
+              (e.currentTarget as HTMLInputElement).blur();
+            }
+          }}
+          spellcheck={false}
+        />
+      </div>
+    {:else if isSimpleSpring}
+      <Slider
+        label="Duration"
+        value={spring.visualDuration ?? 0.3}
+        onChange={(v) => handleSpringUpdate('visualDuration', v)}
+        min={0.1}
+        max={1}
+        step={0.05}
+        unit="s"
+      />
+      <Slider
+        label="Bounce"
+        value={spring.bounce ?? 0.2}
+        onChange={(v) => handleSpringUpdate('bounce', v)}
+        min={0}
+        max={1}
+        step={0.05}
+      />
+    {:else}
+      <Slider
+        label="Stiffness"
+        value={spring.stiffness ?? 400}
+        onChange={(v) => handleSpringUpdate('stiffness', v)}
+        min={1}
+        max={1000}
+        step={10}
+      />
+      <Slider
+        label="Damping"
+        value={spring.damping ?? 17}
+        onChange={(v) => handleSpringUpdate('damping', v)}
+        min={1}
+        max={100}
+        step={1}
+      />
+      <Slider
+        label="Mass"
+        value={spring.mass ?? 1}
+        onChange={(v) => handleSpringUpdate('mass', v)}
+        min={0.1}
+        max={10}
+        step={0.1}
+      />
+    {/if}
+  </div>
+</Folder>

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

@@ -0,0 +1,12 @@
+import type { TransitionConfig } from 'dialkit/store';
+type $$ComponentProps = {
+    panelId: string;
+    path: string;
+    label: string;
+    value: TransitionConfig;
+    onChange: (value: TransitionConfig) => void;
+};
+declare const TransitionControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type TransitionControl = ReturnType<typeof TransitionControl>;
+export default TransitionControl;
+//# sourceMappingURL=TransitionControl.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransitionControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TransitionControl.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAA8B,gBAAgB,EAAE,MAAM,eAAe,CAAC;AASjF,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAoJJ,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,6 @@
+import type { TransitionConfig } from 'svelte/transition';
+export declare function dropdownTransition(node: Element, params?: {
+    above?: boolean;
+    duration?: number;
+}): TransitionConfig;
+//# sourceMappingURL=transitions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/transitions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,gBAAgB,CAcnH"}

package/dist/svelte/components/transitions.js

@@ -0,0 +1,14 @@
+export function dropdownTransition(node, params) {
+    const above = params?.above ?? false;
+    const duration = params?.duration ?? 150;
+    const offset = above ? 8 : -8;
+    return {
+        duration,
+        css: (t) => {
+            const eased = t;
+            const y = (1 - eased) * offset;
+            const scale = 0.95 + 0.05 * eased;
+            return `opacity:${eased};transform:translateY(${y}px) scale(${scale});`;
+        },
+    };
+}

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

@@ -0,0 +1,7 @@
+import type { DialConfig, ResolvedValues } from 'dialkit/store';
+export interface CreateDialOptions {
+    onAction?: (action: string) => void;
+}
+export type DialKitValues<T> = T;
+export declare function createDialKit<T extends DialConfig>(name: string, config: T, options?: CreateDialOptions): DialKitValues<ResolvedValues<T>>;
+//# sourceMappingURL=createDialKit.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createDialKit.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/createDialKit.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,EAGV,cAAc,EAIf,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;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"}

package/dist/svelte/createDialKit.svelte.js

@@ -0,0 +1,82 @@
+import { DialStore } from 'dialkit/store';
+let dialKitInstance = 0;
+export function createDialKit(name, config, options) {
+    const panelId = `${name}-${++dialKitInstance}`;
+    const resolve = () => buildResolvedValues(config, DialStore.getValues(panelId), '');
+    let values = $state(resolve());
+    $effect(() => {
+        DialStore.registerPanel(panelId, name, config);
+        values = resolve();
+        const unsubValues = DialStore.subscribe(panelId, () => {
+            values = resolve();
+        });
+        const unsubActions = options?.onAction
+            ? DialStore.subscribeActions(panelId, options.onAction)
+            : undefined;
+        return () => {
+            unsubValues();
+            unsubActions?.();
+            DialStore.unregisterPanel(panelId);
+        };
+    });
+    return values;
+}
+function buildResolvedValues(config, flatValues, 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);
+        }
+    }
+    return result;
+}
+function hasType(value, type) {
+    return typeof value === 'object' && value !== null && 'type' in value && value.type === type;
+}
+function isSpringConfig(value) {
+    return hasType(value, 'spring');
+}
+function isEasingConfig(value) {
+    return hasType(value, 'easing');
+}
+function isActionConfig(value) {
+    return hasType(value, 'action');
+}
+function isSelectConfig(value) {
+    return hasType(value, 'select') && 'options' in value && Array.isArray(value.options);
+}
+function isColorConfig(value) {
+    return hasType(value, 'color');
+}
+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

@@ -0,0 +1,19 @@
+export { createDialKit } from './createDialKit.svelte';
+export type { CreateDialOptions, DialKitValues } from './createDialKit.svelte';
+export { default as DialRoot } from './components/DialRoot.svelte';
+export type { DialPosition, DialMode } from './components/DialRoot.svelte';
+export { default as Slider } from './components/Slider.svelte';
+export { default as Toggle } from './components/Toggle.svelte';
+export { default as Folder } from './components/Folder.svelte';
+export { default as ButtonGroup } from './components/ButtonGroup.svelte';
+export { default as SpringControl } from './components/SpringControl.svelte';
+export { default as SpringVisualization } from './components/SpringVisualization.svelte';
+export { default as TransitionControl } from './components/TransitionControl.svelte';
+export { default as EasingVisualization } from './components/EasingVisualization.svelte';
+export { default as TextControl } from './components/TextControl.svelte';
+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, Preset, DialValue, DialConfig, ResolvedValues, ControlMeta, PanelConfig, } from 'dialkit/store';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,MAAM,8BAA8B,CAAC;AAG3E,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,MAAM,EACN,SAAS,EACT,UAAU,EACV,cAAc,EACd,WAAW,EACX,WAAW,GACZ,MAAM,eAAe,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1,19 @@
+// Core API
+export { createDialKit } from './createDialKit.svelte';
+// Root component
+export { default as DialRoot } from './components/DialRoot.svelte';
+// Component exports
+export { default as Slider } from './components/Slider.svelte';
+export { default as Toggle } from './components/Toggle.svelte';
+export { default as Folder } from './components/Folder.svelte';
+export { default as ButtonGroup } from './components/ButtonGroup.svelte';
+export { default as SpringControl } from './components/SpringControl.svelte';
+export { default as SpringVisualization } from './components/SpringVisualization.svelte';
+export { default as TransitionControl } from './components/TransitionControl.svelte';
+export { default as EasingVisualization } from './components/EasingVisualization.svelte';
+export { default as TextControl } from './components/TextControl.svelte';
+export { default as SelectControl } from './components/SelectControl.svelte';
+export { default as ColorControl } from './components/ColorControl.svelte';
+export { default as PresetManager } from './components/PresetManager.svelte';
+// Store exports (via dialkit/store subpath — svelte-package doesn't bundle, so relative paths to src/store would break in dist)
+export { DialStore } from 'dialkit/store';

package/dist/svelte/shims.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svelte' {
+  import { SvelteComponent } from 'svelte';
+
+  export default class Component<
+    Props extends Record<string, unknown> = Record<string, unknown>,
+    Events extends Record<string, unknown> = Record<string, unknown>,
+    Slots extends Record<string, unknown> = Record<string, unknown>
+  > extends SvelteComponent<Props, Events, Slots> {}
+}

package/dist/svelte/theme-css.d.ts

@@ -0,0 +1,2 @@
+export declare const themeCSS = "/* Dialkit Theme - Dark glassmorphic design */\n.dialkit-root {\n  /* Surfaces */\n  --dial-surface: rgba(255, 255, 255, 0.05);\n  --dial-surface-hover: rgba(255, 255, 255, 0.1);\n  --dial-surface-active: rgba(255, 255, 255, 0.11);\n\n  /* Text hierarchy - 3 levels */\n  --dial-text-root: #FFFFFF;   /* Root title */\n  --dial-text-section: rgba(255, 255, 255, 0.7); /* Section titles + carets */\n  --dial-text-label: rgba(255, 255, 255, 0.7);   /* Input labels */\n\n  /* Legacy aliases */\n  --dial-text-primary: rgba(255, 255, 255, 0.95);\n  --dial-text-secondary: rgba(255, 255, 255, 0.6);\n  --dial-text-tertiary: rgba(255, 255, 255, 0.4);\n\n  /* Borders */\n  --dial-border: rgba(255, 255, 255, 0.1);\n  --dial-border-hover: rgba(255, 255, 255, 0.15);\n\n  /* Glassmorphic panel */\n  --dial-glass-bg: #212121;\n  --dial-backdrop-blur: 20px;\n  --dial-radius: 8px;\n  --dial-row-height: 36px;\n  --dial-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n\n  /* Fonts */\n  font-family: system-ui, -apple-system, 'SF Pro Display', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.dialkit-panel {\n  position: fixed;\n  z-index: 9999;\n  max-height: calc(100vh - 32px);\n  overflow: visible;\n}\n\n/* Inline mode */\n.dialkit-root[data-mode=\"inline\"] {\n  height: 100%;\n}\n\n.dialkit-panel[data-mode=\"inline\"] {\n  position: static;\n  z-index: auto;\n  max-height: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.dialkit-panel-inner {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  padding: 10px 12px 12px 12px;\n  transform: translateZ(0);\n  transform-origin: top right;\n  max-height: calc(100vh - 80px);\n  overflow-y: auto;\n}\n\n\n.dialkit-panel-inner[data-collapsed=\"true\"] {\n  border-radius: 50%;\n  padding: 12px;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-title-row {\n  display: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-header-top {\n  justify-content: center;\n  padding: 0;\n}\n\n.dialkit-panel-inner::-webkit-scrollbar {\n  display: none;\n}\n\n.dialkit-panel-inner {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.dialkit-panel-inline {\n  width: 100%;\n  height: 100%;\n  max-height: none;\n  overflow-y: auto;\n  box-shadow: none;\n  border-radius: 0;\n  border: none;\n  box-sizing: border-box;\n}\n\n.dialkit-panel[data-mode=\"inline\"] .dialkit-panel-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n}\n\n/* Position variants */\n.dialkit-panel[data-position=\"top-right\"] {\n  top: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"top-left\"] {\n  top: 16px;\n  left: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-right\"] {\n  bottom: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-left\"] {\n  bottom: 16px;\n  left: 16px;\n}\n\n/* Folder */\n.dialkit-folder {\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n}\n\n.dialkit-folder:last-child:not(.dialkit-folder-root) {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-folder-root {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-header {\n  padding-bottom: 6px;\n  margin-bottom: 12px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n}\n\n.dialkit-folder-header {\n  cursor: pointer;\n  user-select: none;\n}\n\n.dialkit-folder-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 0 8px 0;\n}\n\n\n.dialkit-folder-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dial-text-section);\n  letter-spacing: -0.01em;\n  transform: translateY(-0.5px);\n  transition: color 0.15s;\n}\n\n.dialkit-folder-title-root {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-folder-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.dialkit-folder-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n.dialkit-folder-copy svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-section);\n}\n\n.dialkit-folder-icon {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  color: var(--dial-text-label);\n  opacity: 0.6;\n}\n\n.dialkit-panel-icon {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 16px;\n  height: 16px;\n  color: #fff;\n  z-index: 1;\n}\n\n.dialkit-folder-content {\n  will-change: transform;\n}\n\n.dialkit-folder-inner {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding-bottom: 10px;\n}\n\n/* Non-root folders - top & bottom HR dividers */\n.dialkit-folder:not(.dialkit-folder-root) {\n  border-top: 1px solid rgba(255, 255, 255, 0.06);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-bottom: 0;\n}\n\n/* Adjacent non-root folders collapse gap and share a single divider */\n.dialkit-folder:not(.dialkit-folder-root) + .dialkit-folder:not(.dialkit-folder-root) {\n  margin-top: -10px;\n  border-top: none;\n}\n\n/* Non-root folder header - match row height */\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header {\n  height: var(--dial-row-height);\n  padding: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header > .dialkit-folder-header-top {\n  padding: 0;\n  height: 100%;\n}\n\n/* Root folder inner needs no extra bottom padding */\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-bottom: 0;\n}\n\n/* Content spacing handled by folder-inner gap */\n\n\n/* Slider */\n.dialkit-slider-wrapper {\n  position: relative;\n  height: var(--dial-row-height);\n}\n\n.dialkit-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  touch-action: none;\n}\n\n.dialkit-slider-hashmarks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.dialkit-slider-hashmark {\n  position: absolute;\n  top: 50%;\n  width: 1px;\n  height: 8px;\n  border-radius: 999px;\n  transform: translateX(-50%) translateY(-50%);\n  background: rgba(255, 255, 255, 0);\n  transition: background 200ms;\n}\n\n.dialkit-slider-active .dialkit-slider-hashmark {\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.dialkit-slider-active .dialkit-slider-value {\n  color: #fff;\n}\n\n.dialkit-slider-fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  transition: background 0.15s;\n  pointer-events: none;\n}\n\n.dialkit-slider-handle {\n  position: absolute;\n  top: 50%;\n  width: 3px;\n  height: 20px;\n  border-radius: 999px;\n  pointer-events: none;\n}\n\n.dialkit-slider-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% - 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  pointer-events: none;\n  transition: color 0.15s;\n}\n\n.dialkit-slider-value {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% + 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\n  color: var(--dial-text-label);\n  pointer-events: auto;\n  transition: color 0.15s, border-color 0.15s;\n  border-bottom: 1px solid transparent;\n  padding-bottom: 1px;\n}\n\n.dialkit-slider-value-editable {\n  border-bottom-color: var(--dial-text-label);\n}\n\n.dialkit-slider-input {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 4ch;\n  min-width: 3ch;\n  max-width: 6ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--dial-text-label);\n  padding: 0 0 1px 0;\n  outline: none;\n  text-align: right;\n}\n\n.dialkit-slider-input:focus {\n  color: #fff;\n}\n\n/* Segmented Control */\n.dialkit-segmented {\n  position: relative;\n  display: flex;\n  padding: 2px;\n  background: transparent;\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-segmented-pill {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  background: var(--dial-surface-active);\n  border-radius: 6px;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.dialkit-segmented-button {\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  padding: 8px 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s;\n}\n\n.dialkit-segmented-button[data-active=\"true\"] {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.dialkit-segmented-button[data-active=\"false\"] {\n  color: var(--dial-text-label);\n}\n\n/* Toggle */\n.dialkit-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s;\n}\n\n.dialkit-toggle:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toggle-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transition: color 0.15s;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-label {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-toggle-track {\n  width: 36px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--dial-surface-active);\n  transition: background 0.2s;\n  position: relative;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-track {\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.dialkit-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.8);\n}\n\n/* Button Group */\n.dialkit-button-group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-button {\n  flex: 1;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-button:active {\n  background: var(--dial-surface-active);\n}\n\n/* Labeled Control Row (label + control side by side) */\n.dialkit-labeled-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 2px 10px 2px 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-labeled-control-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  line-height: 17px;\n}\n\n.dialkit-labeled-control .dialkit-segmented {\n  flex-shrink: 0;\n}\n\n.dialkit-action-button {\n  width: 160px;\n  flex-shrink: 0;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-action-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-action-button:active {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-actions-group {\n  align-items: flex-start;\n}\n\n.dialkit-actions-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: 160px;\n}\n\n/* Spring Visualization */\n.dialkit-spring-viz {\n  width: 100%;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  overflow: visible;\n}\n\n.dialkit-easing-viz {\n  width: 100%;\n  aspect-ratio: 256 / 140;\n}\n\n/* Panel Wrapper (contains panel + toolbar) */\n.dialkit-panel-wrapper {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Panel Toolbar */\n.dialkit-panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  margin-bottom: 6px;\n}\n\n.dialkit-toolbar-add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-add:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-add svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n.dialkit-toolbar-copy {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-copy:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-copy-icon-wrap {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.dialkit-toolbar-copy-icon {\n  position: absolute;\n  inset: 0;\n  width: 16px;\n  height: 16px;\n}\n\n/* Text Control */\n.dialkit-text-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-text-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n}\n\n.dialkit-text-input {\n  flex: 1;\n  min-width: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-align: right;\n  cursor: text;\n}\n\n.dialkit-text-input:focus {\n  color: #fff;\n}\n\n.dialkit-text-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n/* Select Control - Full-width row */\n.dialkit-select-row {\n}\n\n.dialkit-select-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-select-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-select-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-select-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-select-value {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transform: translateY(-0.5px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-select-chevron {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  opacity: 0.6;\n}\n\n/* Select Dropdown (portaled to body) */\n.dialkit-select-dropdown {\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: var(--dial-radius);\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n}\n\n.dialkit-select-option {\n  display: block;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-select-option:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-option[data-selected=\"true\"] {\n  color: var(--dial-text-primary);\n  background: var(--dial-surface-active);\n}\n\n/* Color Control */\n.dialkit-color-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-color-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-inputs {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-color-hex {\n  font-size: 13px;\n  font-weight: 500;\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\n  color: var(--dial-text-label);\n  cursor: text;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input {\n  width: 7ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-transform: uppercase;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-hex-input:focus {\n  color: #fff;\n}\n\n.dialkit-color-swatch {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  cursor: pointer;\n  transition: transform 0.15s;\n}\n\n.dialkit-color-swatch:hover {\n  transform: scale(1.1);\n}\n\n.dialkit-color-picker-native {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Preset Manager */\n.dialkit-preset-manager {\n  position: relative;\n  flex: 1;\n}\n\n.dialkit-preset-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"] {\n  cursor: default;\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"]:hover {\n  background: var(--dial-surface);\n}\n\n.dialkit-preset-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.dialkit-preset-dropdown {\n  width: max-content;\n  background: #2a2a2a;\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\n}\n\n.dialkit-preset-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 4px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--dial-border);\n}\n\n.dialkit-preset-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px 8px 10px;\n  gap: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-item:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-item[data-active=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-preset-item[data-active=\"true\"] .dialkit-preset-name {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-delete {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n}\n\n.dialkit-preset-item:hover .dialkit-preset-delete {\n  opacity: 0.6;\n}\n\n.dialkit-preset-delete:hover {\n  opacity: 1 !important;\n}\n\n.dialkit-preset-delete svg {\n  width: 14px;\n  height: 14px;\n  color: #fff;\n  pointer-events: none;\n}\n\n.dialkit-preset-save-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-preset-save-btn:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-save-btn svg {\n  width: 12px;\n  height: 12px;\n}\n\n.dialkit-preset-save-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px;\n}\n\n.dialkit-preset-input {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  color: var(--dial-text-primary);\n  background: var(--dial-surface);\n  border: 1px solid var(--dial-border);\n  border-radius: 6px;\n  outline: none;\n}\n\n.dialkit-preset-input:focus {\n  border-color: var(--dial-text-label);\n}\n\n.dialkit-preset-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n.dialkit-preset-confirm {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-confirm:hover:not(:disabled) {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-confirm:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.dialkit-preset-confirm svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-label);\n}\n";
+//# sourceMappingURL=theme-css.d.ts.map

package/dist/svelte/theme-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-css.d.ts","sourceRoot":"","sources":["../../src/svelte/theme-css.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,kusBAukCpB,CAAC"}