dialkit 1.0.0 → 1.1.0

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"}

package/dist/svelte/components/Folder.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+  import { slide } from 'svelte/transition';
+
+  import type { Snippet } from 'svelte';
+
+  let {
+    title,
+    defaultOpen = true,
+    isRoot = false,
+    inline = false,
+    onOpenChange,
+    toolbar,
+    children,
+  } = $props<{
+    title: string;
+    defaultOpen?: boolean;
+    isRoot?: boolean;
+    inline?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    toolbar?: Snippet;
+    children?: Snippet;
+  }>();
+
+  let isOpen = $state(defaultOpen);
+  let isCollapsed = $state(!defaultOpen);
+  let contentHeight = $state<number | undefined>(undefined);
+
+  let contentRef: HTMLDivElement | undefined;
+  let panelRef: HTMLDivElement | undefined;
+
+  const chevronRotation = new Spring(defaultOpen ? 0 : 180, { stiffness: 0.2, damping: 0.6 });
+  const panelWidth = new Spring(defaultOpen ? 280 : 42, { stiffness: 0.2, damping: 0.62 });
+  const panelHeight = new Spring(defaultOpen ? 220 : 42, { stiffness: 0.2, damping: 0.62 });
+  const panelRadius = new Spring(defaultOpen ? 14 : 21, { stiffness: 0.2, damping: 0.62 });
+  const panelScale = new Spring(1, { stiffness: 0.25, damping: 0.7 });
+
+  $effect(() => {
+    if (!isRoot || !contentRef || typeof ResizeObserver === 'undefined') return;
+
+    const ro = new ResizeObserver(() => {
+      if (!isOpen) return;
+      const next = contentRef?.offsetHeight;
+      if (!next) return;
+      contentHeight = next;
+    });
+
+    ro.observe(contentRef);
+
+    if (contentRef.offsetHeight > 0) {
+      contentHeight = contentRef.offsetHeight;
+    }
+
+    return () => {
+      ro.disconnect();
+    };
+  });
+
+  $effect(() => {
+    if (isRoot) return;
+    chevronRotation.set(isOpen ? 0 : 180);
+  });
+
+  $effect(() => {
+    if (!isRoot) return;
+
+    const measured = contentHeight ?? panelRef?.getBoundingClientRect().height ?? 42;
+    const nextHeight = isOpen ? measured + 24 : 42;
+
+    panelWidth.set(isOpen ? 280 : 42);
+    panelHeight.set(nextHeight);
+    panelRadius.set(isOpen ? 14 : 21);
+  });
+
+  const handleToggle = () => {
+    if (inline && isRoot) return;
+    const next = !isOpen;
+    isOpen = next;
+    isCollapsed = !next;
+    onOpenChange?.(next);
+  };
+
+  const handleCollapsedTapStart = () => {
+    if (isOpen) return;
+    (document.activeElement as HTMLElement | null)?.blur?.();
+    panelScale.set(0.9);
+  };
+
+  const handleCollapsedTapEnd = () => {
+    if (isOpen) return;
+    panelScale.set(1);
+  };
+
+  const panelStyle = $derived(
+    `width:${panelWidth.current}px;height:${panelHeight.current}px;border-radius:${panelRadius.current}px;` +
+      `box-shadow:${isOpen ? '0 8px 32px rgba(0, 0, 0, 0.5)' : '0 4px 16px rgba(0, 0, 0, 0.25)'};` +
+      `cursor:${isOpen ? '' : 'pointer'};overflow:${isOpen ? '' : 'hidden'};` +
+      `transform:scale(${panelScale.current});`
+  );
+</script>
+
+{#if isRoot && inline}
+  <div class="dialkit-panel-inner dialkit-panel-inline">
+    <div bind:this={contentRef} class="dialkit-folder dialkit-folder-root">
+      <div class="dialkit-folder-header dialkit-panel-header" onclick={(e) => { e.stopPropagation(); handleToggle(); }}>
+        <div class="dialkit-folder-header-top">
+          <div class="dialkit-folder-title-row">
+            <span class="dialkit-folder-title dialkit-folder-title-root">{title}</span>
+          </div>
+        </div>
+
+        <div class="dialkit-panel-toolbar" onclick={(e) => e.stopPropagation()}>
+          {#if toolbar}{@render toolbar()}{/if}
+        </div>
+      </div>
+
+      <div class="dialkit-folder-content">
+        <div class="dialkit-folder-inner">
+          {#if children}{@render children()}{/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{:else if isRoot}
+  <div
+    bind:this={panelRef}
+    class="dialkit-panel-inner"
+    data-collapsed={String(isCollapsed)}
+    style={panelStyle}
+    onpointerdown={handleCollapsedTapStart}
+    onpointerup={handleCollapsedTapEnd}
+    onpointercancel={handleCollapsedTapEnd}
+    onpointerleave={handleCollapsedTapEnd}
+    onclick={() => { if (!isOpen) handleToggle(); }}
+  >
+    <div bind:this={contentRef} class="dialkit-folder dialkit-folder-root">
+      <div class="dialkit-folder-header dialkit-panel-header" onclick={(e) => { e.stopPropagation(); handleToggle(); }}>
+        <div class="dialkit-folder-header-top">
+          {#if isOpen}
+            <div class="dialkit-folder-title-row">
+              <span class="dialkit-folder-title dialkit-folder-title-root">{title}</span>
+            </div>
+          {/if}
+
+          <svg class="dialkit-panel-icon" viewBox="0 0 16 16" fill="none">
+            <path
+              opacity="0.5"
+              d="M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z"
+              fill="currentColor"
+            />
+            <circle cx="6" cy="8" r="0.998596" fill="currentColor" stroke="currentColor" stroke-width="1.25" />
+            <circle cx="10.4999" cy="3.5" r="0.998657" fill="currentColor" stroke="currentColor" stroke-width="1.25" />
+            <circle cx="9.75015" cy="12.5" r="0.997986" fill="currentColor" stroke="currentColor" stroke-width="1.25" />
+          </svg>
+        </div>
+
+        {#if isOpen}
+          <div class="dialkit-panel-toolbar" onclick={(e) => e.stopPropagation()}>
+            {#if toolbar}{@render toolbar()}{/if}
+          </div>
+        {/if}
+      </div>
+
+      {#if isOpen}
+        <div class="dialkit-folder-content">
+          <div class="dialkit-folder-inner">
+            {#if children}{@render children()}{/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else}
+  <div class="dialkit-folder">
+    <div class="dialkit-folder-header" onclick={handleToggle}>
+      <div class="dialkit-folder-header-top">
+        <div class="dialkit-folder-title-row">
+          <span class="dialkit-folder-title">{title}</span>
+        </div>
+
+        <svg
+          class="dialkit-folder-icon"
+          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="M6 9.5L12 15.5L18 9.5" />
+        </svg>
+      </div>
+    </div>
+
+    {#if isOpen}
+      <div class="dialkit-folder-content" style="clip-path: inset(0 -20px);" transition:slide={{ duration: 220 }}>
+        <div class="dialkit-folder-inner">
+          {#if children}{@render children()}{/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    defaultOpen?: boolean;
+    isRoot?: boolean;
+    inline?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    toolbar?: Snippet;
+    children?: Snippet;
+};
+declare const Folder: import("svelte").Component<$$ComponentProps, {}, "">;
+type Folder = ReturnType<typeof Folder>;
+export default Folder;
+//# sourceMappingURL=Folder.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Folder.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Folder.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAErC,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAiLJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}