dialkit 1.2.1 → 1.4.0

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

@@ -1,8 +1,12 @@
+import type { Snippet } from 'svelte';
 import type { PanelConfig } from 'dialkit/store';
 type $$ComponentProps = {
     panel: PanelConfig;
     defaultOpen?: boolean;
     inline?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    variant?: 'root' | 'section';
+    toolbarExtra?: Snippet;
 };
 declare const Panel: import("svelte").Component<$$ComponentProps, {}, "">;
 type Panel = ReturnType<typeof Panel>;

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

@@ -1 +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"}
+{"version":3,"file":"Panel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Panel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAa,WAAW,EAAU,MAAM,eAAe,CAAC;AAOnE,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,WAAW,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA+IJ,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

@@ -4,6 +4,7 @@
   import { DialStore } from 'dialkit/store';
   import type { Preset } from 'dialkit/store';
   import { dropdownTransition } from './transitions';
+  import { getDialKitPortalRoot, getDropdownPosition } from '../../dropdown-position';
   import { ICON_CHEVRON, ICON_TRASH } from '../../icons';
 
   let { panelId, presets, activePresetId } = $props<{
@@ -25,9 +26,8 @@
   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 };
+    if (!triggerRef || !portalTarget) return;
+    pos = getDropdownPosition(triggerRef, portalTarget, { allowAbove: false });
   };
 
   const openDropdown = () => {
@@ -42,7 +42,7 @@
 
   $effect(() => {
     if (typeof document === 'undefined' || !triggerRef) return;
-    portalTarget = (triggerRef.closest('.dialkit-root') as HTMLElement | null) ?? document.body;
+    portalTarget = getDialKitPortalRoot(triggerRef) ?? document.body;
   });
 
   $effect(() => {
@@ -117,7 +117,7 @@
         <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;`}
+          style={`position:absolute;top:${pos.top}px;left:${pos.left}px;min-width:${pos.width}px;`}
           transition:dropdownTransition={{ above: false }}
         >
           <div

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

@@ -1 +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"}
+{"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;AAK3C,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/SelectControl.svelte

@@ -2,6 +2,7 @@
   import { Spring } from 'svelte/motion';
   import Portal from '../Portal.svelte';
   import { dropdownTransition } from './transitions';
+  import { getDialKitPortalRoot, getDropdownPosition } from '../../dropdown-position';
   import { ICON_CHEVRON } from '../../icons';
 
   type SelectOption = string | { value: string; label: string };
@@ -32,18 +33,9 @@
   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();
+    if (!triggerRef || !portalTarget || typeof window === 'undefined') return;
     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,
-    };
+    pos = getDropdownPosition(triggerRef, portalTarget, { dropdownHeight });
   };
 
   const openDropdown = () => {
@@ -59,16 +51,16 @@
     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:absolute;left:${pos.left}px;top:${pos.top}px;width:${pos.width}px;transform-origin:bottom;`;
     }
 
-    return `position:fixed;left:${pos.left}px;width:${pos.width}px;top:${pos.top}px;transform-origin:top;`;
+    return `position:absolute;left:${pos.left}px;top:${pos.top}px;width:${pos.width}px;transform-origin:top;`;
   });
 
   $effect(() => {
     if (typeof document === 'undefined' || !triggerRef) return;
 
-    portalTarget = (triggerRef.closest('.dialkit-root') as HTMLElement | null) ?? document.body;
+    portalTarget = getDialKitPortalRoot(triggerRef) ?? document.body;
   });
 
   $effect(() => {

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

@@ -1 +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"}
+{"version":3,"file":"SelectControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SelectControl.svelte.ts"],"names":[],"mappings":"AAUE,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;AAuHJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/Timeline/ClipPopover.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  import { DialStore } from 'dialkit/store';
+  import type { ControlMeta, DialValue } from 'dialkit/store';
+  import {
+    TIMELINE_MIN_CLIP_DURATION,
+    clamp,
+    formatStepLabel,
+    timelinePopoverDisplayValues,
+  } from 'dialkit/timeline';
+  import type { TimelineClipMeta } from 'dialkit/timeline';
+  import { findControl } from '../../../shortcut-utils';
+  import Portal from '../../Portal.svelte';
+  import ControlRenderer from '../ControlRenderer.svelte';
+  import type { DialTheme } from '../DialRoot.svelte';
+
+  const POPOVER_WIDTH = 280;
+
+  export type PopoverState = {
+    clip: TimelineClipMeta;
+    stepKey?: string;
+    anchor: { left: number; top: number; right: number; bottom: number; width: number; height: number };
+  };
+
+  let { panelId, popover, values, theme, onClose } = $props<{
+    panelId: string;
+    popover: PopoverState;
+    values: Record<string, DialValue>;
+    theme: DialTheme;
+    onClose: () => void;
+  }>();
+
+  let element = $state<HTMLDivElement>();
+  let naturalHeight = $state(0);
+  let viewport = $state(readViewport());
+
+  const presentation = $derived.by(() => {
+    const { clip, stepKey } = popover;
+    let controls: ControlMeta[];
+    let title: string;
+    if (stepKey) {
+      controls = getClipControls(panelId, `${clip.key}.${stepKey}`);
+      if (stepKey === clip.stepKeys?.[0]) {
+        const from = getControlAt(panelId, `${clip.key}.from`);
+        if (from) {
+          const index = controls.findIndex((control) => control.path === `${clip.key}.${stepKey}.to`);
+          controls = index >= 0
+            ? [...controls.slice(0, index), from, ...controls.slice(index)]
+            : [...controls, from];
+        }
+      }
+      title = `${clip.label} · ${formatStepLabel(stepKey)}`;
+    } else {
+      controls = getClipControls(panelId, clip.key, clipPopoverExclusions(clip));
+      title = clip.label;
+    }
+    const target = stepKey ? `${clip.key}.${stepKey}` : clip.key;
+    const durationMeta = getControlAt(panelId, `${target}.duration`);
+    const durationValue = durationMeta ? values[durationMeta.path] : undefined;
+    const transitionDuration = durationMeta?.type === 'slider' && typeof durationValue === 'number'
+      ? {
+          value: durationValue,
+          onChange: (next: number) => DialStore.updateValue(panelId, durationMeta.path, next),
+          min: Math.max(TIMELINE_MIN_CLIP_DURATION, durationMeta.min ?? 0),
+          max: durationMeta.max,
+          step: durationMeta.step,
+        }
+      : undefined;
+    return {
+      controls,
+      title,
+      transitionDuration,
+      displayValues: timelinePopoverDisplayValues(values, clip.key, clip.stepKeys, stepKey),
+    };
+  });
+
+  const position = $derived.by(() => {
+    const right = viewport.offsetLeft + viewport.width;
+    const bottom = viewport.offsetTop + viewport.height;
+    const width = Math.min(POPOVER_WIDTH, Math.max(220, viewport.width - 24));
+    const left = clamp(
+      popover.anchor.left + popover.anchor.width / 2 - width / 2,
+      viewport.offsetLeft + 12,
+      Math.max(viewport.offsetLeft + 12, right - width - 12)
+    );
+    const above = Math.max(0, popover.anchor.top - viewport.offsetTop - 22);
+    const below = Math.max(0, bottom - popover.anchor.bottom - 22);
+    const placeAbove = naturalHeight === 0
+      ? above >= below
+      : naturalHeight <= above || (naturalHeight > below && above >= below);
+    const availableHeight = placeAbove ? above : below;
+    const renderedHeight = Math.min(naturalHeight || availableHeight, availableHeight);
+    const rawTop = placeAbove ? popover.anchor.top - 10 - renderedHeight : popover.anchor.bottom + 10;
+    return {
+      left,
+      top: clamp(rawTop, viewport.offsetTop + 12, Math.max(viewport.offsetTop + 12, bottom - renderedHeight - 12)),
+      width,
+      availableHeight,
+      placeAbove,
+    };
+  });
+
+  $effect(() => {
+    if (!element) return;
+    popover.clip.key;
+    popover.stepKey;
+    const measure = () => {
+      if (element) naturalHeight = element.scrollHeight + 2;
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element.querySelector('.dialkit-timeline-popover-body') ?? element);
+    return () => observer.disconnect();
+  });
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    const updateViewport = () => { viewport = readViewport(); };
+    const outside = (event: PointerEvent) => {
+      const target = event.target as HTMLElement;
+      if (element?.contains(target) || target.closest?.('.dialkit-timeline-clip') || target.closest?.('.dialkit-timeline-label')) return;
+      onClose();
+    };
+    const keydown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    window.addEventListener('resize', updateViewport);
+    window.visualViewport?.addEventListener('resize', updateViewport);
+    window.visualViewport?.addEventListener('scroll', updateViewport);
+    document.addEventListener('pointerdown', outside, true);
+    document.addEventListener('keydown', keydown);
+    return () => {
+      window.removeEventListener('resize', updateViewport);
+      window.visualViewport?.removeEventListener('resize', updateViewport);
+      window.visualViewport?.removeEventListener('scroll', updateViewport);
+      document.removeEventListener('pointerdown', outside, true);
+      document.removeEventListener('keydown', keydown);
+    };
+  });
+
+  function readViewport() {
+    if (typeof window === 'undefined') return { width: 1024, height: 768, offsetLeft: 0, offsetTop: 0 };
+    return {
+      width: window.visualViewport?.width ?? window.innerWidth,
+      height: window.visualViewport?.height ?? window.innerHeight,
+      offsetLeft: window.visualViewport?.offsetLeft ?? 0,
+      offsetTop: window.visualViewport?.offsetTop ?? 0,
+    };
+  }
+
+  function clipPopoverExclusions(clip: TimelineClipMeta) {
+    return new Set([...(clip.stepKeys ?? []), ...(clip.tracks?.map((track) => track.prop) ?? [])]);
+  }
+
+  function getClipControls(panel: string, path: string, exclusions?: Set<string>): ControlMeta[] {
+    const currentPanel = DialStore.getPanel(panel);
+    const folder = currentPanel ? findControl(currentPanel.controls, path) : null;
+    if (!folder?.children) return [];
+    return folder.children.filter((control) => {
+      const key = control.path.slice(path.length + 1);
+      return key !== 'at' && key !== 'duration' && !exclusions?.has(key);
+    });
+  }
+
+  function getControlAt(panel: string, path: string): ControlMeta | null {
+    const currentPanel = DialStore.getPanel(panel);
+    return currentPanel ? findControl(currentPanel.controls, path) : null;
+  }
+</script>
+
+{#if presentation.controls.length > 0}
+  <Portal target="body">
+    <div class="dialkit-root" data-theme={theme}>
+      <div
+        bind:this={element}
+        class="dialkit-timeline-popover"
+        data-placement={position.placeAbove ? 'above' : 'below'}
+        style:left={`${position.left}px`}
+        style:top={`${position.top}px`}
+        style:width={`${position.width}px`}
+        style:max-height={`${position.availableHeight}px`}
+        style:visibility={naturalHeight > 0 ? 'visible' : 'hidden'}
+        role="dialog"
+        aria-label={`Edit ${presentation.title}`}
+      >
+        <div class="dialkit-timeline-popover-header">
+          <span class="dialkit-timeline-popover-title">{presentation.title}</span>
+          <button class="dialkit-timeline-popover-close" onclick={onClose} title="Close editor" aria-label="Close editor">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+              <path d="M6 6L18 18M18 6L6 18" />
+            </svg>
+          </button>
+        </div>
+        <div class="dialkit-timeline-popover-body">
+          {#each presentation.controls as control (control.path)}
+            <ControlRenderer
+              {panelId}
+              {control}
+              values={presentation.displayValues}
+              transitionDuration={presentation.transitionDuration}
+            />
+          {/each}
+        </div>
+      </div>
+    </div>
+  </Portal>
+{/if}

package/dist/svelte/components/Timeline/ClipPopover.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { DialValue } from 'dialkit/store';
+import type { TimelineClipMeta } from 'dialkit/timeline';
+import type { DialTheme } from '../DialRoot.svelte';
+export type PopoverState = {
+    clip: TimelineClipMeta;
+    stepKey?: string;
+    anchor: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+};
+type $$ComponentProps = {
+    panelId: string;
+    popover: PopoverState;
+    values: Record<string, DialValue>;
+    theme: DialTheme;
+    onClose: () => void;
+};
+declare const ClipPopover: import("svelte").Component<$$ComponentProps, {}, "">;
+type ClipPopover = ReturnType<typeof ClipPopover>;
+export default ClipPopover;
+//# sourceMappingURL=ClipPopover.svelte.d.ts.map

package/dist/svelte/components/Timeline/ClipPopover.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClipPopover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/Timeline/ClipPopover.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,eAAe,CAAC;AAO5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGlD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACrG,CAAC;AACH,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAkLJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/Timeline/DialTimeline.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import {
+    TimelineStore,
+    TimelineUiStore,
+    isDevDefault,
+  } from 'dialkit/timeline';
+  import type { TimelineMeta } from 'dialkit/timeline';
+  import Portal from '../../Portal.svelte';
+  import type { DialTheme } from '../DialRoot.svelte';
+  import TimelineSection from './TimelineSection.svelte';
+
+  let {
+    theme = 'system',
+    defaultVisible = true,
+    visible,
+    onVisibilityChange,
+    defaultOpen = true,
+    productionEnabled = isDevDefault,
+  } = $props<{
+    theme?: DialTheme;
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibilityChange?: (visible: boolean) => void;
+    defaultOpen?: boolean;
+    productionEnabled?: boolean;
+  }>();
+
+  const controllerId = Symbol('dialkit-timeline-visibility');
+  let mounted = $state(false);
+  let timelines = $state<TimelineMeta[]>([]);
+  let dockVisible = $state(TimelineUiStore.getVisible());
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    mounted = true;
+    timelines = TimelineStore.getTimelines();
+    dockVisible = TimelineUiStore.getVisible();
+    const unsubscribeVisibility = TimelineUiStore.subscribe(() => {
+      dockVisible = TimelineUiStore.getVisible();
+    });
+    const unregisterController = TimelineUiStore.registerController(controllerId, {
+      visible,
+      defaultVisible,
+      onVisibilityChange,
+    });
+    dockVisible = TimelineUiStore.getVisible();
+    const unsubscribeTimelines = TimelineStore.subscribeGlobal(() => {
+      timelines = TimelineStore.getTimelines();
+    });
+    return () => {
+      unregisterController();
+      unsubscribeTimelines();
+      unsubscribeVisibility();
+    };
+  });
+
+  $effect(() => {
+    TimelineUiStore.updateController(controllerId, {
+      visible,
+      defaultVisible,
+      onVisibilityChange,
+    });
+  });
+</script>
+
+{#if productionEnabled && mounted && timelines.length > 0}
+  <Portal target="body">
+    <div class="dialkit-root dialkit-timeline" data-theme={theme} hidden={!dockVisible}>
+      <div class="dialkit-timeline-dock">
+        {#each timelines as timeline (timeline.id)}
+          <TimelineSection meta={timeline} {defaultOpen} {theme} {dockVisible} />
+        {/each}
+      </div>
+    </div>
+  </Portal>
+{/if}

package/dist/svelte/components/Timeline/DialTimeline.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { DialTheme } from '../DialRoot.svelte';
+type $$ComponentProps = {
+    theme?: DialTheme;
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibilityChange?: (visible: boolean) => void;
+    defaultOpen?: boolean;
+    productionEnabled?: boolean;
+};
+declare const DialTimeline: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialTimeline = ReturnType<typeof DialTimeline>;
+export default DialTimeline;
+//# sourceMappingURL=DialTimeline.svelte.d.ts.map

package/dist/svelte/components/Timeline/DialTimeline.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialTimeline.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/Timeline/DialTimeline.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGnD,KAAK,gBAAgB,GAAG;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAqEJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}