dialkit 1.3.0 → 1.4.1

package/dist/svelte/components/ControlRenderer.svelte

@@ -13,11 +13,13 @@
   import ControlRenderer from './ControlRenderer.svelte';
   import { SHORTCUT_CTX } from './ShortcutListener.svelte';
   import type { ShortcutContextValue } from './ShortcutListener.svelte';
+  import type { TransitionDurationControl } from './TransitionControl.svelte';
 
-  let { panelId, control, values } = $props<{
+  let { panelId, control, values, transitionDuration } = $props<{
     panelId: string;
     control: ControlMeta;
     values: Record<string, DialValue>;
+    transitionDuration?: TransitionDurationControl;
   }>();
 
   const shortcutCtx = getContext<ShortcutContextValue | undefined>(SHORTCUT_CTX);
@@ -62,11 +64,12 @@
     label={control.label}
     value={controlValue as TransitionConfig}
     onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+    durationControl={transitionDuration}
   />
 {: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} />
+      <ControlRenderer {panelId} control={child} {values} {transitionDuration} />
     {/each}
   </Folder>
 {:else if control.type === 'text'}

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

@@ -1,9 +1,11 @@
 import type { ControlMeta, DialValue } from 'dialkit/store';
 import ControlRenderer from './ControlRenderer.svelte';
+import type { TransitionDurationControl } from './TransitionControl.svelte';
 type $$ComponentProps = {
     panelId: string;
     control: ControlMeta;
     values: Record<string, DialValue>;
+    transitionDuration?: TransitionDurationControl;
 };
 declare const ControlRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
 type ControlRenderer = ReturnType<typeof ControlRenderer>;

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

@@ -1 +1 @@
-{"version":3,"file":"ControlRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ControlRenderer.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAkC,MAAM,eAAe,CAAC;AAS5F,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAItD,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;AAuDJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ControlRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ControlRenderer.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAkC,MAAM,eAAe,CAAC;AAS5F,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAGvD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAE3E,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;CAChD,CAAC;AAwDJ,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

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { DialStore } from 'dialkit/store';
   import type { PanelConfig } from 'dialkit/store';
+  import { TimelineStore } from 'dialkit/timeline';
+  import type { TimelineMeta } from 'dialkit/timeline';
   import { themeCSS } from '../theme-css';
   import Portal from '../Portal.svelte';
   import Folder from './Folder.svelte';
   import Panel from './Panel.svelte';
+  import TimelineToggleButton from './Timeline/TimelineToggleButton.svelte';
   import ShortcutListener from './ShortcutListener.svelte';
   import {
     blockPanelDragClick,
@@ -41,6 +44,7 @@
   const inline = $derived(mode === 'inline');
 
   let panels = $state<PanelConfig[]>([]);
+  let timelines = $state<TimelineMeta[]>([]);
   let mounted = $state(false);
   let panelRef = $state<HTMLDivElement>();
   let dragOffset = $state<PanelDragOffset | null>(null);
@@ -75,13 +79,20 @@
     if (typeof window === 'undefined') return;
 
     mounted = true;
-    panels = DialStore.getPanels();
+    panels = DialStore.getPanels('panel');
+    timelines = TimelineStore.getTimelines();
 
-    const unsub = DialStore.subscribeGlobal(() => {
-      panels = DialStore.getPanels();
+    const unsubscribePanels = DialStore.subscribeGlobal(() => {
+      panels = DialStore.getPanels('panel');
+    });
+    const unsubscribeTimelines = TimelineStore.subscribeGlobal(() => {
+      timelines = TimelineStore.getTimelines();
     });
 
-    return unsub;
+    return () => {
+      unsubscribePanels();
+      unsubscribeTimelines();
+    };
   });
 
   $effect(() => {
@@ -183,7 +194,13 @@
 
 </script>
 
-{#if productionEnabled && mounted && panels.length > 0}
+{#snippet timelineToolbar()}
+  {#if timelines.length > 0}
+    <TimelineToggleButton />
+  {/if}
+{/snippet}
+
+{#if productionEnabled && mounted && (panels.length > 0 || timelines.length > 0)}
   {#snippet content()}
     <ShortcutListener>
       <div class="dialkit-root" data-mode={mode} data-theme={theme}>
@@ -200,7 +217,23 @@
           onpointerup={!inline ? handlePointerUp : undefined}
           onpointercancel={!inline ? handlePointerUp : undefined}
         >
-          {#if panels.length > 1}
+          {#if panels.length === 0}
+            <div class="dialkit-panel-wrapper">
+              <Folder
+                title="DialKit"
+                defaultOpen={inline || defaultOpen}
+                isRoot={true}
+                {inline}
+                onOpenChange={handleRootOpenChange}
+                panelHeightOffset={2}
+              >
+                {#snippet toolbar()}
+                  {@render timelineToolbar()}
+                {/snippet}
+                <div class="dialkit-timeline-toolkit-only">Timeline</div>
+              </Folder>
+            </div>
+          {:else if panels.length > 1}
             <div class="dialkit-panel-wrapper">
               <Folder
                 title="DialKit"
@@ -210,6 +243,9 @@
                 onOpenChange={handleRootOpenChange}
                 panelHeightOffset={2}
               >
+                {#snippet toolbar()}
+                  {@render timelineToolbar()}
+                {/snippet}
                 {#each panels as panel (panel.id)}
                   <Panel
                     {panel}
@@ -225,6 +261,7 @@
                 {panel}
                 defaultOpen={inline || defaultOpen}
                 {inline}
+                toolbarExtra={timelineToolbar}
                 onOpenChange={(open) => handlePanelOpenChange(panel.id, open)}
               />
             {/each}

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

@@ -1 +1 @@
-{"version":3,"file":"DialRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DialRoot.svelte.ts"],"names":[],"mappings":"AAsBE,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AACrF,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC5C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACrD,KAAK,gBAAgB,GAAG;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AA2MJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DialRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DialRoot.svelte.ts"],"names":[],"mappings":"AAyBE,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AACrF,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC5C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACrD,KAAK,gBAAgB,GAAG;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAwOJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/Panel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Spring } from 'svelte/motion';
+  import type { Snippet } from 'svelte';
   import { DialStore } from 'dialkit/store';
   import type { DialValue, PanelConfig, Preset } from 'dialkit/store';
   import Folder from './Folder.svelte';
@@ -8,12 +9,13 @@
   import ShortcutsMenu from './ShortcutsMenu.svelte';
   import { ICON_CLIPBOARD, ICON_CHECK, ICON_ADD_PRESET } from '../../icons';
 
-  let { panel, defaultOpen = true, inline = false, onOpenChange, variant = 'root' } = $props<{
+  let { panel, defaultOpen = true, inline = false, onOpenChange, variant = 'root', toolbarExtra } = $props<{
     panel: PanelConfig;
     defaultOpen?: boolean;
     inline?: boolean;
     onOpenChange?: (open: boolean) => void;
     variant?: 'root' | 'section';
+    toolbarExtra?: Snippet;
   }>();
 
   const hasShortcuts = $derived(Object.keys(panel.shortcuts).length > 0);
@@ -148,6 +150,10 @@
     </span>
     Copy
   </button>
+
+  {#if toolbarExtra}
+    {@render toolbarExtra()}
+  {/if}
 {/snippet}
 
 {#snippet panelControls()}

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { PanelConfig } from 'dialkit/store';
 type $$ComponentProps = {
     panel: PanelConfig;
@@ -5,6 +6,7 @@ type $$ComponentProps = {
     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;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;CAC9B,CAAC;AA0IJ,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/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,125 @@
+<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';
+
+  const DEFAULT_DOCK_MAX_HEIGHT = 400;
+  const MIN_DOCK_MAX_HEIGHT = 120;
+
+  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());
+  let dockMaxHeight = $state(DEFAULT_DOCK_MAX_HEIGHT);
+  let dockElement = $state<HTMLDivElement>();
+  let resizeCleanup: (() => void) | null = null;
+
+  $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,
+    });
+  });
+
+  $effect(() => () => resizeCleanup?.());
+
+  function handleResizePointerDown(event: PointerEvent) {
+    if (!dockElement) return;
+    event.preventDefault();
+    event.stopPropagation();
+    resizeCleanup?.();
+
+    const pointerY = event.clientY;
+    const startHeight = dockElement.getBoundingClientRect().height;
+    const move = (next: PointerEvent) => {
+      next.preventDefault();
+      const viewportMax = Math.max(MIN_DOCK_MAX_HEIGHT, window.innerHeight - 24);
+      dockMaxHeight = Math.min(
+        viewportMax,
+        Math.max(MIN_DOCK_MAX_HEIGHT, startHeight + pointerY - next.clientY)
+      );
+    };
+    const finish = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', finish);
+      window.removeEventListener('pointercancel', finish);
+      resizeCleanup = null;
+    };
+
+    window.addEventListener('pointermove', move, { passive: false });
+    window.addEventListener('pointerup', finish);
+    window.addEventListener('pointercancel', finish);
+    resizeCleanup = finish;
+  }
+</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-resize-handle"
+        onpointerdown={handleResizePointerDown}
+        role="separator"
+        aria-label="Resize timeline height"
+        aria-orientation="horizontal"
+        title="Drag to resize timeline"
+      ></div>
+      <div
+        bind:this={dockElement}
+        class="dialkit-timeline-dock"
+        style:max-height={`min(${dockMaxHeight}px, calc(100vh - 24px))`}
+      >
+        {#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;AA2GJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}