dialkit 0.2.2 → 1.1.0

package/dist/styles.css

@@ -39,6 +39,19 @@
   overflow: visible;
 }
 
+/* Inline mode */
+.dialkit-root[data-mode="inline"] {
+  height: 100%;
+}
+
+.dialkit-panel[data-mode="inline"] {
+  position: static;
+  z-index: auto;
+  max-height: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 .dialkit-panel-inner {
   background: var(--dial-glass-bg);
   border: 1px solid var(--dial-border);
@@ -82,6 +95,24 @@
   scrollbar-width: none;
 }
 
+.dialkit-panel-inline {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  overflow-y: auto;
+  box-shadow: none;
+  border-radius: 0;
+  border: none;
+  box-sizing: border-box;
+}
+
+.dialkit-panel[data-mode="inline"] .dialkit-panel-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
 /* Position variants */
 .dialkit-panel[data-position="top-right"] {
   top: 16px;
@@ -493,7 +524,8 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 2px 2px 2px 12px;
+  height: var(--dial-row-height);
+  padding: 2px 10px 2px 12px;
   background: var(--dial-surface);
   border-radius: var(--dial-radius);
 }
@@ -553,6 +585,11 @@
   overflow: visible;
 }
 
+.dialkit-easing-viz {
+  width: 100%;
+  aspect-ratio: 256 / 140;
+}
+
 /* Panel Wrapper (contains panel + toolbar) */
 .dialkit-panel-wrapper {
   display: inline-flex;

package/dist/svelte/Portal.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let { target = 'body', children } = $props<{ target?: string | HTMLElement | null; children?: Snippet }>();
+
+  let portalEl: HTMLDivElement | undefined;
+
+  const resolveTarget = (): HTMLElement | null => {
+    if (typeof document === 'undefined') return null;
+    if (!target) return document.body;
+    if (typeof target === 'string') return document.querySelector(target);
+    return target;
+  };
+
+  $effect(() => {
+    if (!portalEl) return;
+    const root = resolveTarget();
+    if (!root) return;
+
+    root.appendChild(portalEl);
+
+    return () => {
+      portalEl?.remove();
+    };
+  });
+</script>
+
+<div bind:this={portalEl} style="display: contents;">
+  {#if children}{@render children()}{/if}
+</div>

package/dist/svelte/Portal.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    target?: string | HTMLElement | null;
+    children?: Snippet;
+};
+declare const Portal: import("svelte").Component<$$ComponentProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;
+//# sourceMappingURL=Portal.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/Portal.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAErC,KAAK,gBAAgB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkCtF,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/svelte/components/ButtonGroup.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export type ButtonAction = {
+    label: string;
+    onClick: () => void;
+  };
+
+  let { buttons } = $props<{ buttons: ButtonAction[] }>();
+</script>
+
+<div class="dialkit-button-group">
+  {#each buttons as button (button.label)}
+    <button class="dialkit-button" onclick={button.onClick}>
+      {button.label}
+    </button>
+  {/each}
+</div>

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

@@ -0,0 +1,11 @@
+export type ButtonAction = {
+    label: string;
+    onClick: () => void;
+};
+type $$ComponentProps = {
+    buttons: ButtonAction[];
+};
+declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;
+//# sourceMappingURL=ButtonGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ButtonGroup.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AACH,KAAK,gBAAgB,GAAG;IAAE,OAAO,EAAE,YAAY,EAAE,CAAA;CAAE,CAAC;AAiBrD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/ColorControl.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  const HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+
+  let { label, value, onChange } = $props<{
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+  }>();
+
+  let isEditing = $state(false);
+  let editValue = $state(value);
+  let colorInputRef: HTMLInputElement | undefined;
+
+  const expandShorthandHex = (hex: string) => {
+    if (hex.length !== 4) return hex;
+    return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+  };
+
+  $effect(() => {
+    value;
+    if (!isEditing) {
+      editValue = value;
+    }
+  });
+
+  const handleTextSubmit = () => {
+    isEditing = false;
+    if (HEX_COLOR_REGEX.test(editValue)) {
+      onChange(editValue);
+    } else {
+      editValue = value;
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleTextSubmit();
+    } else if (e.key === 'Escape') {
+      isEditing = false;
+      editValue = value;
+    }
+  };
+</script>
+
+<div class="dialkit-color-control">
+  <label class="dialkit-color-label">{label}</label>
+  <div class="dialkit-color-inputs">
+    {#if isEditing}
+      <input
+        type="text"
+        class="dialkit-color-hex-input"
+        value={editValue}
+        oninput={(e) => (editValue = (e.currentTarget as HTMLInputElement).value)}
+        onblur={handleTextSubmit}
+        onkeydown={handleKeyDown}
+        autofocus
+      />
+    {:else}
+      <span class="dialkit-color-hex" onclick={() => (isEditing = true)}>
+        {(value ?? '').toUpperCase()}
+      </span>
+    {/if}
+
+    <button
+      class="dialkit-color-swatch"
+      style:background-color={value}
+      onclick={() => colorInputRef?.click()}
+      title="Pick color"
+      aria-label={`Pick color for ${label}`}
+    />
+
+    <input
+      bind:this={colorInputRef}
+      type="color"
+      class="dialkit-color-picker-native"
+      aria-label={`${label} color picker`}
+      value={value.length === 4 ? expandShorthandHex(value) : value.slice(0, 7)}
+      oninput={(e) => onChange((e.currentTarget as HTMLInputElement).value)}
+    />
+  </div>
+</div>

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,84 @@
+<script lang="ts">
+  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';
+
+  let { panelId, control, values } = $props<{
+    panelId: string;
+    control: ControlMeta;
+    values: Record<string, DialValue>;
+  }>();
+
+  const controlValue = $derived(values[control.path]);
+</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}
+  />
+{:else if control.type === 'toggle'}
+  <Toggle
+    label={control.label}
+    checked={controlValue as boolean}
+    onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+  />
+{: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":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAkC,MAAM,eAAe,CAAC;AAS5F,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAEtD,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;AA+CJ,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,65 @@
+<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';
+
+  export type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  export type DialMode = 'popover' | 'inline';
+
+  let { position = 'top-right', defaultOpen = true, mode = 'popover' } = $props<{
+    position?: DialPosition;
+    defaultOpen?: boolean;
+    mode?: DialMode;
+  }>();
+
+  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 mounted && panels.length > 0}
+  {#snippet content()}
+    <div class="dialkit-root" data-mode={mode}>
+      <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>
+  {/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,11 @@
+export type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type DialMode = 'popover' | 'inline';
+type $$ComponentProps = {
+    position?: DialPosition;
+    defaultOpen?: boolean;
+    mode?: DialMode;
+};
+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":"AAUE,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AACrF,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7C,KAAK,gBAAgB,GAAG;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAgEJ,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"}