dialkit 1.0.0 → 1.2.0

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

@@ -0,0 +1,10 @@
+import type { PanelConfig } from 'dialkit/store';
+type $$ComponentProps = {
+    panel: PanelConfig;
+    defaultOpen?: boolean;
+    inline?: boolean;
+};
+declare const Panel: import("svelte").Component<$$ComponentProps, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;
+//# sourceMappingURL=Panel.svelte.d.ts.map

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

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

package/dist/svelte/components/PresetManager.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+  import Portal from '../Portal.svelte';
+  import { DialStore } from 'dialkit/store';
+  import type { Preset } from 'dialkit/store';
+  import { dropdownTransition } from './transitions';
+  import { ICON_CHEVRON, ICON_TRASH } from '../../icons';
+
+  let { panelId, presets, activePresetId } = $props<{
+    panelId: string;
+    presets: Preset[];
+    activePresetId: string | null;
+  }>();
+
+  let isOpen = $state(false);
+  let pos = $state({ top: 0, left: 0, width: 0 });
+  let portalTarget = $state<HTMLElement | null>(null);
+  let triggerRef: HTMLButtonElement | undefined;
+  let dropdownRef: HTMLDivElement | undefined;
+
+  const chevronRotation = new Spring(0, { stiffness: 0.2, damping: 0.6 });
+  const chevronOpacity = new Spring(0.25, { stiffness: 0.2, damping: 0.6 });
+
+  const hasPresets = $derived(presets.length > 0);
+  const activePreset = $derived(presets.find((p: Preset) => p.id === activePresetId));
+
+  const updatePos = () => {
+    const rect = triggerRef?.getBoundingClientRect();
+    if (!rect) return;
+    pos = { top: rect.bottom + 4, left: rect.left, width: rect.width };
+  };
+
+  const openDropdown = () => {
+    if (!hasPresets) return;
+    updatePos();
+    isOpen = true;
+  };
+
+  const closeDropdown = () => {
+    isOpen = false;
+  };
+
+  $effect(() => {
+    if (typeof document === 'undefined' || !triggerRef) return;
+    portalTarget = (triggerRef.closest('.dialkit-root') as HTMLElement | null) ?? document.body;
+  });
+
+  $effect(() => {
+    chevronRotation.set(isOpen ? 180 : 0);
+    chevronOpacity.set(hasPresets ? 0.6 : 0.25);
+  });
+
+  $effect(() => {
+    if (!isOpen || typeof window === 'undefined') return;
+
+    const handleViewportChange = () => updatePos();
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (triggerRef?.contains(target) || dropdownRef?.contains(target)) return;
+      closeDropdown();
+    };
+
+    updatePos();
+    document.addEventListener('mousedown', handler);
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      window.removeEventListener('resize', handleViewportChange);
+      window.removeEventListener('scroll', handleViewportChange, true);
+    };
+  });
+
+  const handleSelect = (presetId: string | null) => {
+    if (presetId) DialStore.loadPreset(panelId, presetId);
+    else DialStore.clearActivePreset(panelId);
+    closeDropdown();
+  };
+
+  const handleDelete = (e: MouseEvent, presetId: string) => {
+    e.stopPropagation();
+    DialStore.deletePreset(panelId, presetId);
+  };
+</script>
+
+<div class="dialkit-preset-manager">
+  <button
+    bind:this={triggerRef}
+    class="dialkit-preset-trigger"
+    onclick={() => (isOpen ? closeDropdown() : openDropdown())}
+    data-open={String(isOpen)}
+    data-has-preset={String(!!activePreset)}
+    data-disabled={String(!hasPresets)}
+  >
+    <span class="dialkit-preset-label">
+      {activePreset ? activePreset.name : 'Version 1'}
+    </span>
+    <svg
+      class="dialkit-select-chevron"
+      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)`}
+      style:opacity={chevronOpacity.current}
+    >
+      <path d={ICON_CHEVRON} />
+    </svg>
+  </button>
+
+  {#if portalTarget}
+    <Portal target={portalTarget}>
+      {#if isOpen}
+        <div
+          bind:this={dropdownRef}
+          class="dialkit-root dialkit-preset-dropdown"
+          style={`position:fixed;top:${pos.top}px;left:${pos.left}px;min-width:${pos.width}px;`}
+          transition:dropdownTransition={{ above: false }}
+        >
+          <div
+            class="dialkit-preset-item"
+            data-active={String(!activePresetId)}
+            onclick={() => handleSelect(null)}
+          >
+            <span class="dialkit-preset-name">Version 1</span>
+          </div>
+
+          {#each presets as preset (preset.id)}
+            <div
+              class="dialkit-preset-item"
+              data-active={String(preset.id === activePresetId)}
+              onclick={() => handleSelect(preset.id)}
+            >
+              <span class="dialkit-preset-name">{preset.name}</span>
+              <button
+                class="dialkit-preset-delete"
+                onclick={(e) => handleDelete(e, preset.id)}
+                title="Delete preset"
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d={ICON_TRASH[0]} />
+                  <path d={ICON_TRASH[1]} />
+                  <path d={ICON_TRASH[2]} />
+                  <path d={ICON_TRASH[3]} />
+                  <path d={ICON_TRASH[4]} />
+                </svg>
+              </button>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </Portal>
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Preset } from 'dialkit/store';
+type $$ComponentProps = {
+    panelId: string;
+    presets: Preset[];
+    activePresetId: string | null;
+};
+declare const PresetManager: import("svelte").Component<$$ComponentProps, {}, "">;
+type PresetManager = ReturnType<typeof PresetManager>;
+export default PresetManager;
+//# sourceMappingURL=PresetManager.svelte.d.ts.map

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

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

package/dist/svelte/components/SegmentedControl.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  export interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label: string;
+  }
+
+  let { options, value, onChange } = $props<{
+    options: SegmentedControlOption[];
+    value: string;
+    onChange: (value: string) => void;
+  }>();
+
+  let containerRef = $state<HTMLDivElement | undefined>(undefined);
+  let hasAnimated = false;
+  let pillLeft = $state<number | null>(null);
+  let pillWidth = $state<number | null>(null);
+
+  function measure() {
+    if (!containerRef) return;
+    const activeButton = containerRef.querySelector('[data-active="true"]') as HTMLElement | null;
+    if (!activeButton) return;
+    pillLeft = activeButton.offsetLeft;
+    pillWidth = activeButton.offsetWidth;
+  }
+
+  $effect(() => {
+    void value;
+    void options.length;
+    measure();
+  });
+
+  let shouldAnimate = $derived.by(() => {
+    if (!hasAnimated) {
+      hasAnimated = true;
+      return false;
+    }
+    return true;
+  });
+</script>
+
+<div class="dialkit-segmented" bind:this={containerRef}>
+  {#if pillLeft !== null && pillWidth !== null}
+    <div
+      class="dialkit-segmented-pill"
+      style:left="{pillLeft}px"
+      style:width="{pillWidth}px"
+      style:transition={shouldAnimate
+        ? 'left 0.2s cubic-bezier(0.25, 1, 0.5, 1), width 0.2s cubic-bezier(0.25, 1, 0.5, 1)'
+        : 'none'}
+    ></div>
+  {/if}
+
+  {#each options as option (option.value)}
+    <button
+      onclick={() => onChange(option.value)}
+      class="dialkit-segmented-button"
+      data-active={String(value === option.value)}
+    >
+      {option.label}
+    </button>
+  {/each}
+</div>

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

@@ -0,0 +1,13 @@
+export interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label: string;
+}
+type $$ComponentProps = {
+    options: SegmentedControlOption[];
+    value: string;
+    onChange: (value: string) => void;
+};
+declare const SegmentedControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AACF,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAkDJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/SelectControl.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+  import Portal from '../Portal.svelte';
+  import { dropdownTransition } from './transitions';
+  import { ICON_CHEVRON } from '../../icons';
+
+  type SelectOption = string | { value: string; label: string };
+
+  let { label, value, options, onChange } = $props<{
+    label: string;
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+  }>();
+
+  let isOpen = $state(false);
+  let pos = $state<{ top: number; left: number; width: number; above: boolean } | null>(null);
+  let portalTarget = $state<HTMLElement | null>(null);
+  let triggerRef: HTMLButtonElement | undefined;
+  let dropdownRef: HTMLDivElement | undefined;
+
+  const chevronRotation = new Spring(0, { stiffness: 0.2, damping: 0.6 });
+
+  const toTitleCase = (s: string) => s.replace(/\b\w/g, (c) => c.toUpperCase());
+
+  const normalized = $derived(
+    options.map((opt: SelectOption) =>
+      typeof opt === 'string' ? { value: opt, label: toTitleCase(opt) } : opt
+    )
+  );
+
+  const selectedOption = $derived(normalized.find((o: { value: string; label: string }) => o.value === value));
+
+  const updatePos = () => {
+    if (!triggerRef || typeof window === 'undefined') return;
+    const rect = triggerRef.getBoundingClientRect();
+    const dropdownHeight = 8 + normalized.length * 36;
+    const spaceBelow = window.innerHeight - rect.bottom - 4;
+    const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
+
+    pos = {
+      top: above ? rect.top - 4 : rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+      above,
+    };
+  };
+
+  const openDropdown = () => {
+    updatePos();
+    isOpen = true;
+  };
+
+  const closeDropdown = () => {
+    isOpen = false;
+  };
+
+  const dropdownStyle = $derived.by(() => {
+    if (!pos || typeof window === 'undefined') return '';
+
+    if (pos.above) {
+      return `position:fixed;left:${pos.left}px;width:${pos.width}px;bottom:${window.innerHeight - pos.top}px;transform-origin:bottom;`;
+    }
+
+    return `position:fixed;left:${pos.left}px;width:${pos.width}px;top:${pos.top}px;transform-origin:top;`;
+  });
+
+  $effect(() => {
+    if (typeof document === 'undefined' || !triggerRef) return;
+
+    portalTarget = (triggerRef.closest('.dialkit-root') as HTMLElement | null) ?? document.body;
+  });
+
+  $effect(() => {
+    chevronRotation.set(isOpen ? 180 : 0);
+  });
+
+  $effect(() => {
+    if (!isOpen || typeof window === 'undefined') return;
+
+    const handleViewportChange = () => updatePos();
+
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (triggerRef?.contains(target) || dropdownRef?.contains(target)) return;
+      closeDropdown();
+    };
+
+    updatePos();
+    document.addEventListener('mousedown', handleClick);
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      window.removeEventListener('resize', handleViewportChange);
+      window.removeEventListener('scroll', handleViewportChange, true);
+    };
+  });
+</script>
+
+<div class="dialkit-select-row">
+  <button
+    bind:this={triggerRef}
+    class="dialkit-select-trigger"
+    onclick={() => (isOpen ? closeDropdown() : openDropdown())}
+    data-open={String(isOpen)}
+  >
+    <span class="dialkit-select-label">{label}</span>
+    <div class="dialkit-select-right">
+      <span class="dialkit-select-value">{selectedOption?.label ?? value}</span>
+      <svg
+        class="dialkit-select-chevron"
+        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>
+  </button>
+
+  {#if portalTarget}
+    <Portal target={portalTarget}>
+      {#if isOpen && pos}
+        <div
+          bind:this={dropdownRef}
+          class="dialkit-select-dropdown"
+          style={dropdownStyle}
+          transition:dropdownTransition={{ above: pos.above }}
+        >
+          {#each normalized as option (option.value)}
+            <button
+              class="dialkit-select-option"
+              data-selected={String(option.value === value)}
+              onclick={() => {
+                onChange(option.value);
+                closeDropdown();
+              }}
+            >
+              {option.label}
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </Portal>
+  {/if}
+</div>

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

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

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

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