dialkit 1.0.0 → 1.2.0

package/dist/svelte/components/Slider.svelte

@@ -0,0 +1,332 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { Spring } from 'svelte/motion';
+  import type { ShortcutConfig } from 'dialkit/store';
+  import { decimalsForStep, roundValue, snapToDecile, formatSliderShortcut } from '../../shortcut-utils';
+
+  let {
+    label,
+    value,
+    onChange,
+    min = 0,
+    max = 1,
+    step = 0.01,
+    shortcut,
+    shortcutActive = false,
+  } = $props<{
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
+  }>();
+
+  const CLICK_THRESHOLD = 3;
+  const DEAD_ZONE = 32;
+  const MAX_CURSOR_RANGE = 200;
+  const MAX_STRETCH = 8;
+  const HANDLE_BUFFER = 8;
+  const LABEL_CSS_LEFT = 10;
+  const VALUE_CSS_RIGHT = 10;
+
+  let wrapperRef: HTMLDivElement | undefined;
+  let labelRef: HTMLSpanElement | undefined;
+  let valueSpanRef: HTMLSpanElement | undefined;
+  let inputRef: HTMLInputElement | undefined;
+
+  let isInteracting = $state(false);
+  let isDragging = $state(false);
+  let isHovered = $state(false);
+  let isValueHovered = $state(false);
+  let isValueEditable = $state(false);
+  let showInput = $state(false);
+  let inputValue = $state('');
+
+  const fillPercent = new Spring(((value - min) / (max - min)) * 100, { stiffness: 0.25, damping: 0.7 });
+  const rubberStretchPx = new Spring(0, { stiffness: 0.2, damping: 0.65 });
+  const handleOpacityMv = new Spring(0, { stiffness: 0.3, damping: 0.75 });
+  const handleScaleXMv = new Spring(0.25, { stiffness: 0.2, damping: 0.6 });
+  const handleScaleYMv = new Spring(1, { stiffness: 0.2, damping: 0.6 });
+
+  let pointerDownPos: { x: number; y: number } | null = null;
+  let isClickFlag = true;
+  let wrapperRect: DOMRect | null = null;
+  let scaleVal = 1;
+  let hoverTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const percentFromValue = (nextValue: number) => ((nextValue - min) / (max - min)) * 100;
+
+  const positionToValue = (clientX: number) => {
+    if (!wrapperRect || !wrapperRef) return value;
+    const screenX = clientX - wrapperRect.left;
+    const sceneX = screenX / scaleVal;
+    const nativeWidth = wrapperRef.offsetWidth || wrapperRect.width;
+    const percent = Math.max(0, Math.min(1, sceneX / nativeWidth));
+    const rawValue = min + percent * (max - min);
+    return Math.max(min, Math.min(max, rawValue));
+  };
+
+  const computeRubberStretch = (clientX: number, sign: number) => {
+    if (!wrapperRect) return 0;
+    const distancePast = sign < 0 ? wrapperRect.left - clientX : clientX - wrapperRect.right;
+    const overflow = Math.max(0, distancePast - DEAD_ZONE);
+    return sign * MAX_STRETCH * Math.sqrt(Math.min(overflow / MAX_CURSOR_RANGE, 1));
+  };
+
+  $effect(() => {
+    value;
+    if (!isInteracting) {
+      fillPercent.set(((value - min) / (max - min)) * 100, { instant: true });
+    }
+  });
+
+  $effect(() => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+      hoverTimeout = null;
+    }
+
+    if (isValueHovered && !showInput && !isValueEditable) {
+      hoverTimeout = setTimeout(() => {
+        isValueEditable = true;
+      }, 800);
+    } else if (!isValueHovered && !showInput) {
+      isValueEditable = false;
+    }
+
+    return () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = null;
+      }
+    };
+  });
+
+  $effect(() => {
+    if (showInput) {
+      tick().then(() => {
+        inputRef?.focus();
+        inputRef?.select();
+      });
+    }
+  });
+
+  const percentage = $derived(((value - min) / (max - min)) * 100);
+  const isActive = $derived(isInteracting || isHovered);
+
+  const leftThreshold = $derived.by(() => {
+    const trackWidth = wrapperRef?.offsetWidth;
+    if (trackWidth && labelRef) {
+      return ((LABEL_CSS_LEFT + labelRef.offsetWidth + HANDLE_BUFFER) / trackWidth) * 100;
+    }
+    return 30;
+  });
+
+  const rightThreshold = $derived.by(() => {
+    const trackWidth = wrapperRef?.offsetWidth;
+    if (trackWidth && valueSpanRef) {
+      return ((trackWidth - VALUE_CSS_RIGHT - valueSpanRef.offsetWidth - HANDLE_BUFFER) / trackWidth) * 100;
+    }
+    return 78;
+  });
+
+  const valueDodge = $derived(percentage < leftThreshold || percentage > rightThreshold);
+
+  const handleOpacity = $derived.by(() => {
+    if (!isActive) return 0;
+    if (valueDodge) return 0.1;
+    if (isDragging) return 0.9;
+    return 0.5;
+  });
+
+  $effect(() => {
+    handleOpacityMv.set(handleOpacity);
+    handleScaleXMv.set(isActive ? 1 : 0.25);
+    handleScaleYMv.set(isActive && valueDodge ? 0.75 : 1);
+  });
+
+  const discreteSteps = $derived((max - min) / step);
+
+  const hashMarks = $derived.by(() => {
+    if (discreteSteps <= 10) {
+      return Array.from({ length: Math.max(discreteSteps - 1, 0) }, (_, i) => ({
+        key: `d-${i + 1}`,
+        left: (((i + 1) * step) / (max - min)) * 100,
+      }));
+    }
+
+    return Array.from({ length: 9 }, (_, i) => ({
+      key: `t-${i + 1}`,
+      left: (i + 1) * 10,
+    }));
+  });
+
+  const handlePointerDown = (e: PointerEvent) => {
+    if (showInput) return;
+    e.preventDefault();
+
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    pointerDownPos = { x: e.clientX, y: e.clientY };
+    isClickFlag = true;
+    isInteracting = true;
+
+    if (wrapperRef) {
+      wrapperRect = wrapperRef.getBoundingClientRect();
+      scaleVal = wrapperRect.width / wrapperRef.offsetWidth;
+    }
+  };
+
+  const handlePointerMove = (e: PointerEvent) => {
+    if (!isInteracting || !pointerDownPos) return;
+
+    const dx = e.clientX - pointerDownPos.x;
+    const dy = e.clientY - pointerDownPos.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (isClickFlag && distance > CLICK_THRESHOLD) {
+      isClickFlag = false;
+      isDragging = true;
+    }
+
+    if (!isClickFlag) {
+      if (wrapperRect) {
+        if (e.clientX < wrapperRect.left) {
+          rubberStretchPx.set(computeRubberStretch(e.clientX, -1), { instant: true });
+        } else if (e.clientX > wrapperRect.right) {
+          rubberStretchPx.set(computeRubberStretch(e.clientX, 1), { instant: true });
+        } else {
+          rubberStretchPx.set(0, { instant: true });
+        }
+      }
+
+      const newValue = positionToValue(e.clientX);
+      fillPercent.set(percentFromValue(newValue), { instant: true });
+      onChange(roundValue(newValue, step));
+    }
+  };
+
+  const handlePointerUp = (e: PointerEvent) => {
+    if (!isInteracting) return;
+
+    if (isClickFlag) {
+      const rawValue = positionToValue(e.clientX);
+      const steps = (max - min) / step;
+      const snappedValue = steps <= 10
+        ? Math.max(min, Math.min(max, min + Math.round((rawValue - min) / step) * step))
+        : snapToDecile(rawValue, min, max);
+
+      fillPercent.set(percentFromValue(snappedValue));
+      onChange(roundValue(snappedValue, step));
+    }
+
+    if (rubberStretchPx.current !== 0) {
+      rubberStretchPx.set(0);
+    }
+
+    isInteracting = false;
+    isDragging = false;
+    pointerDownPos = null;
+  };
+
+  const handlePointerCancel = () => {
+    if (!isInteracting) return;
+    isInteracting = false;
+    isDragging = false;
+    rubberStretchPx.set(0, { instant: true });
+    pointerDownPos = null;
+  };
+
+  const handleInputSubmit = () => {
+    const parsed = Number.parseFloat(inputValue);
+    if (!Number.isNaN(parsed)) {
+      const clamped = Math.max(min, Math.min(max, parsed));
+      onChange(roundValue(clamped, step));
+    }
+
+    showInput = false;
+    isValueHovered = false;
+    isValueEditable = false;
+  };
+
+  const handleValueClick = (e: MouseEvent) => {
+    if (!isValueEditable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    showInput = true;
+    inputValue = value.toFixed(decimalsForStep(step));
+  };
+
+  const displayValue = $derived(value.toFixed(decimalsForStep(step)));
+
+  const trackStyle = $derived(`width:calc(100% + ${Math.abs(rubberStretchPx.current)}px);transform:translateX(${rubberStretchPx.current < 0 ? rubberStretchPx.current : 0}px);`);
+  const fillStyle = $derived(`width:${fillPercent.current}%;`);
+  const handleStyle = $derived(`left:max(5px, calc(${fillPercent.current}% - 9px));opacity:${handleOpacityMv.current};transform:translateY(-50%) scaleX(${handleScaleXMv.current}) scaleY(${handleScaleYMv.current});`);
+</script>
+
+<div bind:this={wrapperRef} class="dialkit-slider-wrapper">
+  <div
+    class={`dialkit-slider ${isActive ? 'dialkit-slider-active' : ''}`}
+    style={trackStyle}
+    onpointerdown={handlePointerDown}
+    onpointermove={handlePointerMove}
+    onpointerup={handlePointerUp}
+    onpointercancel={handlePointerCancel}
+    onmouseenter={() => (isHovered = true)}
+    onmouseleave={() => (isHovered = false)}
+  >
+    <div class="dialkit-slider-hashmarks">
+      {#each hashMarks as mark (mark.key)}
+        <div class="dialkit-slider-hashmark" style:left={`${mark.left}%`} />
+      {/each}
+    </div>
+
+    <div class="dialkit-slider-fill" style={fillStyle} />
+
+    <div class="dialkit-slider-handle" style={handleStyle} />
+
+    <span bind:this={labelRef} class="dialkit-slider-label">
+      {label}
+      {#if shortcut}
+        <span class={`dialkit-shortcut-pill${shortcutActive ? ' dialkit-shortcut-pill-active' : ''}`}>
+          {formatSliderShortcut(shortcut)}
+        </span>
+      {/if}
+    </span>
+
+    {#if showInput}
+      <input
+        bind:this={inputRef}
+        type="text"
+        class="dialkit-slider-input"
+        value={inputValue}
+        oninput={(e) => (inputValue = (e.currentTarget as HTMLInputElement).value)}
+        onkeydown={(e) => {
+          if (e.key === 'Enter') handleInputSubmit();
+          else if (e.key === 'Escape') {
+            showInput = false;
+            isValueHovered = false;
+          }
+        }}
+        onblur={handleInputSubmit}
+        onclick={(e) => e.stopPropagation()}
+        onmousedown={(e) => e.stopPropagation()}
+      />
+    {:else}
+      <span
+        bind:this={valueSpanRef}
+        class={`dialkit-slider-value ${isValueEditable ? 'dialkit-slider-value-editable' : ''}`}
+        onmouseenter={() => (isValueHovered = true)}
+        onmouseleave={() => (isValueHovered = false)}
+        onclick={handleValueClick}
+        onmousedown={(e) => isValueEditable && e.stopPropagation()}
+        style:cursor={isValueEditable ? 'text' : 'default'}
+      >
+        {displayValue}
+      </span>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+import type { ShortcutConfig } from 'dialkit/store';
+type $$ComponentProps = {
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;
+//# sourceMappingURL=Slider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Slider.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGnD,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA2SJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/svelte/components/SpringControl.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import { DialStore } from 'dialkit/store';
+  import type { SpringConfig } from 'dialkit/store';
+  import Folder from './Folder.svelte';
+  import Slider from './Slider.svelte';
+  import SegmentedControl from './SegmentedControl.svelte';
+  import SpringVisualization from './SpringVisualization.svelte';
+
+  let { panelId, path, label, spring, onChange } = $props<{
+    panelId: string;
+    path: string;
+    label: string;
+    spring: SpringConfig;
+    onChange: (spring: SpringConfig) => void;
+  }>();
+
+  let mode = $state<'simple' | 'advanced'>(DialStore.getSpringMode(panelId, path));
+
+  $effect(() => {
+    const unsub = DialStore.subscribe(panelId, () => {
+      mode = DialStore.getSpringMode(panelId, path);
+    });
+    return unsub;
+  });
+
+  const isSimpleMode = $derived(mode === 'simple');
+
+  const cache: {
+    simple: SpringConfig;
+    advanced: SpringConfig;
+  } = {
+    simple: spring.visualDuration !== undefined ? spring : { type: 'spring', visualDuration: 0.3, bounce: 0.2 },
+    advanced: spring.stiffness !== undefined ? spring : { type: 'spring', stiffness: 200, damping: 25, mass: 1 },
+  };
+
+  const handleModeChange = (newMode: string) => {
+    const typedMode = newMode as 'simple' | 'advanced';
+
+    if (isSimpleMode) {
+      cache.simple = spring;
+    } else {
+      cache.advanced = spring;
+    }
+
+    DialStore.updateSpringMode(panelId, path, typedMode);
+
+    if (typedMode === 'simple') {
+      onChange(cache.simple);
+    } else {
+      onChange(cache.advanced);
+    }
+  };
+
+  const handleUpdate = (key: keyof SpringConfig, value: number) => {
+    if (isSimpleMode) {
+      const { stiffness, damping, mass, ...rest } = spring;
+      onChange({ ...rest, [key]: value });
+    } else {
+      const { visualDuration, bounce, ...rest } = spring;
+      onChange({ ...rest, [key]: value });
+    }
+  };
+</script>
+
+<Folder title={label} defaultOpen={true}>
+  <div style="display: flex; flex-direction: column; gap: 6px;">
+    <SpringVisualization {spring} isSimpleMode={isSimpleMode} />
+
+    <div class="dialkit-labeled-control">
+      <span class="dialkit-labeled-control-label">Type</span>
+      <SegmentedControl
+        options={[
+          { value: 'simple', label: 'Time' },
+          { value: 'advanced', label: 'Physics' },
+        ]}
+        value={mode}
+        onChange={handleModeChange}
+      />
+    </div>
+
+    {#if isSimpleMode}
+      <Slider
+        label="Duration"
+        value={spring.visualDuration ?? 0.3}
+        onChange={(v) => handleUpdate('visualDuration', v)}
+        min={0.1}
+        max={1}
+        step={0.05}
+        unit="s"
+      />
+      <Slider
+        label="Bounce"
+        value={spring.bounce ?? 0.2}
+        onChange={(v) => handleUpdate('bounce', v)}
+        min={0}
+        max={1}
+        step={0.05}
+      />
+    {:else}
+      <Slider
+        label="Stiffness"
+        value={spring.stiffness ?? 400}
+        onChange={(v) => handleUpdate('stiffness', v)}
+        min={1}
+        max={1000}
+        step={10}
+      />
+      <Slider
+        label="Damping"
+        value={spring.damping ?? 17}
+        onChange={(v) => handleUpdate('damping', v)}
+        min={1}
+        max={100}
+        step={1}
+      />
+      <Slider
+        label="Mass"
+        value={spring.mass ?? 1}
+        onChange={(v) => handleUpdate('mass', v)}
+        min={0.1}
+        max={10}
+        step={0.1}
+      />
+    {/if}
+  </div>
+</Folder>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpringControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SpringControl.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAMjD,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC1C,CAAC;AAoFJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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,32 @@
+<script lang="ts">
+  import SegmentedControl from './SegmentedControl.svelte';
+  import type { ShortcutConfig } from 'dialkit/store';
+  import { formatToggleShortcut } from '../../shortcut-utils';
+
+  let { label, checked, onChange, shortcut, shortcutActive = false } = $props<{
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
+  }>();
+</script>
+
+<div class="dialkit-labeled-control">
+  <span class="dialkit-labeled-control-label">
+    {label}
+    {#if shortcut}
+      <span class={`dialkit-shortcut-pill${shortcutActive ? ' dialkit-shortcut-pill-active' : ''}`}>
+        {formatToggleShortcut(shortcut)}
+      </span>
+    {/if}
+  </span>
+  <SegmentedControl
+    options={[
+      { value: 'off', label: 'Off' },
+      { value: 'on', label: 'On' },
+    ]}
+    value={checked ? 'on' : 'off'}
+    onChange={(val) => onChange(val === 'on')}
+  />
+</div>