libraries-dev-svelte 0.1.0

package/dist/gooey-radial-menu/GooeyRadialMenu.svelte

@@ -0,0 +1,747 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { easingFunction } from './motion';
+  import { parseShadow, type ShadowLayer } from './shadow';
+  import type { GooeyMenuSettings, GooeyRadialMenuProps } from './types';
+
+  let {
+    blur = 6,
+    contrast = 18,
+    fill = 'var(--modal-bg, #fff)',
+    shadow = '',
+    pro = false,
+    bare = false,
+  }: GooeyRadialMenuProps & { fill?: string } = $props();
+
+  const instanceId = $props.id();
+  const filterId = `gooey-${instanceId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const satellites = [
+    { label: 'New file', x: -54, y: -34, icon: 'file' },
+    { label: 'Add image', x: 0, y: -64, icon: 'image' },
+    { label: 'New folder', x: 54, y: -34, icon: 'folder' },
+  ] as const;
+  const defaults: GooeyMenuSettings = {
+    openDur: 550,
+    openEase: 'Bouncy',
+    openStagger: 40,
+    closeDur: 250,
+    closeEase: 'Snappy',
+    closeStagger: 0,
+    spread: 1,
+    iconDur: 180,
+    iconDelay: 120,
+    anticipDist: 5,
+    anticipDur: 700,
+  };
+  const eases: Record<string, string> = {
+    Bouncy: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    Smooth: 'cubic-bezier(0.3, 1.05, 0.4, 1)',
+    Snappy: 'cubic-bezier(0.22, 1, 0.36, 1)',
+    'Ease in-out': 'ease-in-out',
+    Linear: 'linear',
+  };
+  const easeNames = Object.keys(eases);
+  const allItems = [...satellites, { label: 'Menu', x: 0, y: 0, icon: 'main' as const }];
+  const initialBoxes: Array<BlobBox | null> = allItems.map(() => null);
+
+  interface BlobBox {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    r: [number, number, number, number];
+  }
+
+  const binarize = '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -29.5';
+  let menuOpen = $state(false);
+  let anticipating = $state(false);
+  let menuSettings = $state<GooeyMenuSettings>({ ...defaults });
+  let copied = $state(false);
+  let reducedMotion = $state(false);
+  let mounted = $state(false);
+  let groupElement: HTMLDivElement;
+  let itemWrappers: Array<HTMLDivElement | undefined> = [];
+  let blobElements: Array<SVGRectElement | undefined> = [];
+  let itemBoxes = $state<Array<BlobBox | null>>(initialBoxes);
+  let groupSize = $state({ w: 0, h: 0 });
+
+  const shadows = $derived(parseShadow(shadow));
+  const shadowEntries = $derived(shadows.map((layer, index) => ({ layer, index })));
+  const svgShadows = $derived(
+    shadowEntries.filter(({ layer }) => layer.inset || layer.spread !== 0),
+  );
+  const cssShadowFilter = $derived(
+    shadowEntries
+      .filter(({ layer }) => !layer.inset && layer.spread === 0)
+      .map(({ layer }) => `drop-shadow(${layer.x}px ${layer.y}px ${layer.blur}px ${layer.color})`)
+      .join(' '),
+  );
+  const shadowExtent = $derived(
+    svgShadows.reduce(
+      (max, { layer }) =>
+        Math.max(
+          max,
+          Math.max(Math.abs(layer.x), Math.abs(layer.y)) +
+            layer.blur * 1.5 +
+            Math.max(0, layer.spread),
+        ),
+      0,
+    ),
+  );
+  const filterPad = $derived(Math.ceil(blur * 3 + shadowExtent + 24));
+  const intercept = $derived(Math.round((0.5 - contrast * (5 / 12)) * 100) / 100);
+  const phase = $derived(
+    menuOpen
+      ? {
+          duration: menuSettings.openDur,
+          ease: eases[menuSettings.openEase],
+          stagger: menuSettings.openStagger,
+        }
+      : {
+          duration: menuSettings.closeDur,
+          ease: eases[menuSettings.closeEase],
+          stagger: menuSettings.closeStagger,
+        },
+  );
+
+  let positions = allItems.map(() => ({ x: 0, y: 0 }));
+  let frameIds = allItems.map(() => 0);
+  let anticipationTimer: ReturnType<typeof setTimeout> | undefined;
+  let copyTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function parseCorner(value: string, size: number): number {
+    const first = value.split(' ')[0];
+    return first.endsWith('%')
+      ? ((parseFloat(first) || 0) / 100) * size
+      : parseFloat(first) || 0;
+  }
+
+  function offsetTo(element: HTMLElement, ancestor: HTMLElement) {
+    let x = 0;
+    let y = 0;
+    let node: HTMLElement | null = element;
+    while (node && node !== ancestor && ancestor.contains(node)) {
+      x += node.offsetLeft;
+      y += node.offsetTop;
+      node = node.offsetParent as HTMLElement | null;
+    }
+    return { x, y };
+  }
+
+  function sameBox(left: BlobBox | null, right: BlobBox) {
+    return !!left && left.x === right.x && left.y === right.y && left.w === right.w &&
+      left.h === right.h && left.r.every((radius, index) => radius === right.r[index]);
+  }
+
+  function measure() {
+    if (!groupElement) return;
+    const w = groupElement.offsetWidth;
+    const h = groupElement.offsetHeight;
+    if (groupSize.w !== w || groupSize.h !== h) groupSize = { w, h };
+
+    const measured = itemWrappers.map((wrapper, index) => {
+      if (!wrapper) return itemBoxes[index];
+      const offset = offsetTo(wrapper, groupElement);
+      const boxWidth = wrapper.offsetWidth;
+      const boxHeight = wrapper.offsetHeight;
+      const target = (wrapper.firstElementChild as HTMLElement | null) ?? wrapper;
+      const computed = getComputedStyle(target);
+      const size = Math.min(boxWidth, boxHeight);
+      return {
+        x: offset.x,
+        y: offset.y,
+        w: boxWidth,
+        h: boxHeight,
+        r: [
+          parseCorner(computed.borderTopLeftRadius, size),
+          parseCorner(computed.borderTopRightRadius, size),
+          parseCorner(computed.borderBottomRightRadius, size),
+          parseCorner(computed.borderBottomLeftRadius, size),
+        ] as [number, number, number, number],
+      };
+    });
+    if (measured.some((box, index) => !box || !sameBox(itemBoxes[index], box))) {
+      itemBoxes = measured;
+    }
+  }
+
+  function writeTransform(index: number, x: number, y: number) {
+    const transform = `translate(${x}px, ${y}px)`;
+    if (itemWrappers[index]) itemWrappers[index]!.style.transform = transform;
+    if (blobElements[index]) blobElements[index]!.style.transform = transform;
+    positions[index] = { x, y };
+  }
+
+  function animateItem(index: number, x: number, y: number, duration: number, ease: string, delay: number) {
+    if (frameIds[index]) cancelAnimationFrame(frameIds[index]);
+    const from = positions[index];
+    if (duration <= 0 || (from.x === x && from.y === y)) {
+      writeTransform(index, x, y);
+      frameIds[index] = 0;
+      return;
+    }
+
+    const startPosition = { ...from };
+    const evaluate = easingFunction(ease);
+    const start = performance.now() + delay;
+    const tick = (now: number) => {
+      const progress = Math.min(1, Math.max(0, (now - start) / duration));
+      const eased = evaluate(progress);
+      writeTransform(
+        index,
+        startPosition.x + (x - startPosition.x) * eased,
+        startPosition.y + (y - startPosition.y) * eased,
+      );
+      if (progress < 1) frameIds[index] = requestAnimationFrame(tick);
+      else frameIds[index] = 0;
+    };
+    frameIds[index] = requestAnimationFrame(tick);
+  }
+
+  $effect(() => {
+    const open = menuOpen;
+    const duration = reducedMotion ? 0 : phase.duration;
+    const ease = phase.ease;
+    const stagger = phase.stagger;
+    const spread = menuSettings.spread;
+    if (!mounted) return;
+    satellites.forEach((satellite, index) => {
+      animateItem(
+        index,
+        open ? satellite.x * spread : 0,
+        open ? satellite.y * spread : 0,
+        duration,
+        ease,
+        index * stagger,
+      );
+    });
+    animateItem(allItems.length - 1, 0, 0, duration, ease, 0);
+  });
+
+  function toggle() {
+    if (menuOpen && menuSettings.anticipDist > 0) {
+      if (anticipationTimer) clearTimeout(anticipationTimer);
+      anticipating = false;
+      requestAnimationFrame(() => (anticipating = true));
+      anticipationTimer = setTimeout(() => (anticipating = false), menuSettings.anticipDur);
+    }
+    menuOpen = !menuOpen;
+  }
+
+  function updateSetting<K extends keyof GooeyMenuSettings>(key: K, value: GooeyMenuSettings[K]) {
+    menuSettings[key] = value;
+  }
+
+  function menuSnippet(settings: GooeyMenuSettings): string {
+    return [
+      '// liquid-gooey — Menu values',
+      `open: { duration: ${settings.openDur}, easing: '${eases[settings.openEase]}', stagger: ${settings.openStagger} },`,
+      `close: { duration: ${settings.closeDur}, easing: '${eases[settings.closeEase]}', stagger: ${settings.closeStagger} },`,
+      `anticipation: { distance: ${settings.anticipDist}, duration: ${settings.anticipDur} },`,
+      `spread: ${settings.spread}, iconFade: ${settings.iconDur}, iconDelay: ${settings.iconDelay},`,
+    ].join('\n');
+  }
+
+  function copyValues() {
+    navigator.clipboard.writeText(menuSnippet(menuSettings)).then(() => {
+      copied = true;
+      if (copyTimer) clearTimeout(copyTimer);
+      copyTimer = setTimeout(() => (copied = false), 1400);
+    });
+  }
+
+  onMount(() => {
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(groupElement);
+    itemWrappers.forEach((wrapper) => wrapper && observer.observe(wrapper));
+
+    const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    reducedMotion = motionQuery.matches;
+    const updateMotionPreference = (event: MediaQueryListEvent) => (reducedMotion = event.matches);
+    motionQuery.addEventListener('change', updateMotionPreference);
+    mounted = true;
+
+    return () => {
+      observer.disconnect();
+      motionQuery.removeEventListener('change', updateMotionPreference);
+    };
+  });
+
+  onDestroy(() => {
+    if (anticipationTimer) clearTimeout(anticipationTimer);
+    if (copyTimer) clearTimeout(copyTimer);
+    frameIds.forEach((frame) => frame && cancelAnimationFrame(frame));
+  });
+</script>
+
+{#snippet menuStage()}
+  <div
+    class={`pm${menuOpen ? ' pm-open' : ''}${anticipating ? ' pm-anticipating' : ''}`}
+    bind:this={groupElement}
+    style={`--pm-anticip:${menuSettings.anticipDist}px;--pm-anticip-dur:${menuSettings.anticipDur}ms;--pm-icon-dur:${menuSettings.iconDur}ms;position:relative;isolation:isolate;`}
+  >
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-gooey-svg=""
+      style={`position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1;will-change:filter,transform;${cssShadowFilter ? `filter:${cssShadowFilter};` : ''}`}
+    >
+      <defs>
+        <filter
+          id={filterId}
+          filterUnits="userSpaceOnUse"
+          x={-filterPad}
+          y={-filterPad}
+          width={groupSize.w + filterPad * 2}
+          height={groupSize.h + filterPad * 2}
+          color-interpolation-filters="sRGB"
+        >
+          <feGaussianBlur in="SourceGraphic" stdDeviation={blur} result="blur" />
+          <feColorMatrix
+            in="blur"
+            type="matrix"
+            values={`1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${contrast} ${intercept}`}
+            result="goo"
+          />
+          <feComposite in="SourceGraphic" in2="goo" operator="atop" result="shape" />
+          {#if svgShadows.some(({ layer }) => layer.inset || layer.spread !== 0)}
+            <feColorMatrix in="shape" type="matrix" values={binarize} result="bin" />
+          {/if}
+          {#each svgShadows as entry (entry.index)}
+            {@const layer = entry.layer}
+            {@const suffix = `s${entry.index}`}
+            {#if layer.inset}
+              {@const eroded = layer.spread !== 0}
+              {@const shifted = layer.x !== 0 || layer.y !== 0}
+              {@const softened = layer.blur > 0}
+              {#if eroded}
+                <feMorphology
+                  in="bin"
+                  operator={layer.spread > 0 ? 'erode' : 'dilate'}
+                  radius={Math.abs(layer.spread)}
+                  result={`${suffix}-er`}
+                />
+              {/if}
+              {#if shifted}
+                <feOffset
+                  in={softened ? eroded ? `${suffix}-er` : 'bin' : eroded ? `${suffix}-er` : 'bin'}
+                  dx={layer.x}
+                  dy={layer.y}
+                  result={`${suffix}-o`}
+                />
+              {/if}
+              {#if softened}
+                <feGaussianBlur
+                  in={shifted ? `${suffix}-o` : eroded ? `${suffix}-er` : 'bin'}
+                  stdDeviation={layer.blur / 2}
+                  result={`${suffix}-b`}
+                />
+              {/if}
+              {@const shapeSource = softened
+                ? `${suffix}-b`
+                : shifted
+                  ? `${suffix}-o`
+                  : eroded
+                    ? `${suffix}-er`
+                    : 'bin'}
+              <feComposite in="bin" in2={shapeSource} operator="out" result={`${suffix}-band`} />
+              <feFlood flood-color={layer.color} result={`${suffix}-c`} />
+              <feComposite
+                in={`${suffix}-c`}
+                in2={`${suffix}-band`}
+                operator="in"
+                result={suffix}
+              />
+            {:else}
+              {@const spread = layer.spread !== 0}
+              {@const softened = layer.blur > 0}
+              {@const shifted = layer.x !== 0 || layer.y !== 0}
+              {#if spread}
+                <feMorphology
+                  in="bin"
+                  operator={layer.spread > 0 ? 'dilate' : 'erode'}
+                  radius={Math.abs(layer.spread)}
+                  result={`${suffix}-sp`}
+                />
+              {/if}
+              {#if softened}
+                <feGaussianBlur
+                  in={spread ? `${suffix}-sp` : 'shape'}
+                  stdDeviation={layer.blur / 2}
+                  result={`${suffix}-b`}
+                />
+              {/if}
+              {#if shifted}
+                <feOffset
+                  in={softened ? `${suffix}-b` : spread ? `${suffix}-sp` : 'shape'}
+                  dx={layer.x}
+                  dy={layer.y}
+                  result={`${suffix}-o`}
+                />
+              {/if}
+              {@const shadowSource = shifted
+                ? `${suffix}-o`
+                : softened
+                  ? `${suffix}-b`
+                  : spread
+                    ? `${suffix}-sp`
+                    : 'shape'}
+              <feFlood flood-color={layer.color} result={`${suffix}-c`} />
+              <feComposite
+                in={`${suffix}-c`}
+                in2={shadowSource}
+                operator="in"
+                result={suffix}
+              />
+            {/if}
+          {/each}
+          {#if svgShadows.length > 0}
+            <feMerge>
+              {#each svgShadows.filter(({ layer }) => !layer.inset).slice().reverse() as entry (entry.index)}
+                <feMergeNode in={`s${entry.index}`} />
+              {/each}
+              <feMergeNode in="shape" />
+              {#each svgShadows.filter(({ layer }) => layer.inset) as entry (entry.index)}
+                <feMergeNode in={`s${entry.index}`} />
+              {/each}
+            </feMerge>
+          {/if}
+        </filter>
+      </defs>
+      <g id={`${filterId}-sil`} filter={`url(#${filterId})`} style={`fill:${fill};`}>
+        {#each itemBoxes as box, index (index)}
+          {#if box}
+            <rect
+              bind:this={blobElements[index]}
+              x={box.x}
+              y={box.y}
+              width={box.w}
+              height={box.h}
+              rx={box.r[0] === box.r[1] && box.r[1] === box.r[2] && box.r[2] === box.r[3]
+                ? Math.max(0, Math.min(box.r[0], Math.min(box.w, box.h) / 2))
+                : undefined}
+              style={`transform:translate(${positions[index].x}px,${positions[index].y}px);transform-box:fill-box;transform-origin:center;will-change:transform;`}
+            />
+          {/if}
+        {/each}
+      </g>
+    </svg>
+
+    {#each satellites as satellite, index (satellite.label)}
+      <div bind:this={itemWrappers[index]} class="pm-slot" style="display:inline-block;will-change:transform;">
+        <button
+          type="button"
+          class="pm-btn pm-sat"
+          aria-label={satellite.label}
+          tabindex={menuOpen ? 0 : -1}
+          onclick={toggle}
+        >
+          <span
+            class="pm-sat-icon"
+            style:transition-delay={menuOpen
+              ? `${menuSettings.iconDelay + index * phase.stagger}ms`
+              : '0ms'}
+          >
+            {#if satellite.icon === 'file'}
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 1.5H4A1.5 1.5 0 0 0 2.5 3v10A1.5 1.5 0 0 0 4 14.5h8a1.5 1.5 0 0 0 1.5-1.5V6z" />
+                <path d="M9 1.5V6h4.5" />
+              </svg>
+            {:else if satellite.icon === 'image'}
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="1.5" y="1.5" width="13" height="13" rx="2" />
+                <circle cx="5.5" cy="5.5" r="1.25" />
+                <path d="M14.5 10.5L11 7l-7.5 7.5" />
+              </svg>
+            {:else}
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M14.5 12.5A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5V3A1.5 1.5 0 0 1 3 1.5h3L7.5 4H13a1.5 1.5 0 0 1 1.5 1.5z" />
+              </svg>
+            {/if}
+          </span>
+        </button>
+      </div>
+    {/each}
+
+    <div bind:this={itemWrappers[satellites.length]} class="pm-slot" style="display:inline-block;will-change:transform;">
+      <button
+        type="button"
+        class="pm-btn pm-main"
+        aria-expanded={menuOpen}
+        aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+        onclick={toggle}
+      >
+        <span class="pm-plus">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round">
+            <path d="M10 4V16M4 10H16" />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+{/snippet}
+
+{#if bare}
+  {@render menuStage()}
+{:else}
+  <div class="pm-wrap">
+    <div class="stage">{@render menuStage()}</div>
+
+    {#if !pro}
+      <div class="cp-panel">
+        <div class="cp-section">
+          <div class="cp-section-head">
+            <span class="cp-section-title">Morph</span>
+          </div>
+          <div class="cp-row">
+            <span class="cp-label">Duration (ms)</span>
+            <span class="cp-slider">
+              <input type="range" min="80" max="1200" step="10" value={menuSettings.openDur} oninput={(event) => updateSetting('openDur', Number(event.currentTarget.value))} />
+              <span class="cp-val">{menuSettings.openDur}</span>
+            </span>
+          </div>
+          <div class="cp-row">
+            <span class="cp-label">Stagger (ms)</span>
+            <span class="cp-slider">
+              <input type="range" min="0" max="200" step="5" value={menuSettings.openStagger} oninput={(event) => updateSetting('openStagger', Number(event.currentTarget.value))} />
+              <span class="cp-val">{menuSettings.openStagger}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    {:else}
+      <div class="cp-panel">
+        <div class="cp-section">
+          <div class="cp-section-head">
+            <span class="cp-section-title">Menu controls</span>
+            <span class="cp-actions">
+              <button type="button" class={`cp-export${copied ? ' is-copied' : ''}`} onclick={copyValues}>{copied ? 'Copied' : 'Copy values'}</button>
+              <button type="button" class="cp-export" onclick={() => (menuSettings = { ...defaults })}>Reset</button>
+            </span>
+          </div>
+          <div class="cp-subhead">Open</div>
+          <div class="cp-row">
+            <span class="cp-label">Duration (ms)</span>
+            <span class="cp-slider"><input type="range" min="80" max="1200" step="10" value={menuSettings.openDur} oninput={(event) => updateSetting('openDur', Number(event.currentTarget.value))} /><span class="cp-val">{menuSettings.openDur}</span></span>
+          </div>
+          <div class="cp-row">
+            <span class="cp-label">Easing</span>
+            <select class="cp-ease" value={menuSettings.openEase} onchange={(event) => updateSetting('openEase', event.currentTarget.value)}>
+              {#each easeNames as name}<option>{name}</option>{/each}
+            </select>
+          </div>
+          <div class="cp-row">
+            <span class="cp-label">Stagger (ms)</span>
+            <span class="cp-slider"><input type="range" min="0" max="200" step="5" value={menuSettings.openStagger} oninput={(event) => updateSetting('openStagger', Number(event.currentTarget.value))} /><span class="cp-val">{menuSettings.openStagger}</span></span>
+          </div>
+          <div class="cp-subhead">Close</div>
+          <div class="cp-row">
+            <span class="cp-label">Duration (ms)</span>
+            <span class="cp-slider"><input type="range" min="80" max="1200" step="10" value={menuSettings.closeDur} oninput={(event) => updateSetting('closeDur', Number(event.currentTarget.value))} /><span class="cp-val">{menuSettings.closeDur}</span></span>
+          </div>
+          <div class="cp-row">
+            <span class="cp-label">Easing</span>
+            <select class="cp-ease" value={menuSettings.closeEase} onchange={(event) => updateSetting('closeEase', event.currentTarget.value)}>
+              {#each easeNames as name}<option>{name}</option>{/each}
+            </select>
+          </div>
+          <div class="cp-row">
+            <span class="cp-label">Stagger (ms)</span>
+            <span class="cp-slider"><input type="range" min="0" max="200" step="5" value={menuSettings.closeStagger} oninput={(event) => updateSetting('closeStagger', Number(event.currentTarget.value))} /><span class="cp-val">{menuSettings.closeStagger}</span></span>
+          </div>
+          <div class="cp-subhead">Anticipation (on close)</div>
+          <div class="cp-row">
+            <span class="cp-label">Distance (px)</span>
+            <span class="cp-slider"><input type="range" min="0" max="24" step="1" value={menuSettings.anticipDist} oninput={(event) => updateSetting('anticipDist', Number(event.currentTarget.value))} /><span class="cp-val">{menuSettings.anticipDist}</span></span>
+          </div>
+          <div class="cp-row">
+            <span class="cp-label">Duration (ms)</span>
+            <span class="cp-slider"><input type="range" min="120" max="1400" step="20" value={menuSettings.anticipDur} oninput={(event) => updateSetting('anticipDur', Number(event.currentTarget.value))} /><span class="cp-val">{menuSettings.anticipDur}</span></span>
+          </div>
+          <div class="cp-subhead">Layout &amp; icons</div>
+          <div class="cp-row">
+            <span class="cp-label">Spread</span>
+            <span class="cp-slider"><input type="range" min="0.4" max="2" step="0.05" value={menuSettings.spread} oninput={(event) => updateSetting('spread', Number(event.currentTarget.value))} /><span class="cp-val">{menuSettings.spread}</span></span>
+          </div>
+          <div class="cp-row">
+            <span class="cp-label">Icon fade (ms)</span>
+            <span class="cp-slider"><input type="range" min="0" max="600" step="10" value={menuSettings.iconDur} oninput={(event) => updateSetting('iconDur', Number(event.currentTarget.value))} /><span class="cp-val">{menuSettings.iconDur}</span></span>
+          </div>
+          <div class="cp-row">
+            <span class="cp-label">Icon delay (ms)</span>
+            <span class="cp-slider"><input type="range" min="0" max="600" step="10" value={menuSettings.iconDelay} oninput={(event) => updateSetting('iconDelay', Number(event.currentTarget.value))} /><span class="cp-val">{menuSettings.iconDelay}</span></span>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .stage {
+    display: grid;
+    place-items: center;
+    height: 280px;
+    background: var(--stage-bg, rgba(225, 225, 225, 0.3));
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .pm {
+    width: 200px;
+    height: 140px;
+  }
+
+  .pm-slot {
+    position: absolute;
+    left: 80px;
+    top: 80px;
+  }
+
+  .pm-btn {
+    width: 40px;
+    height: 40px;
+    border: 0;
+    padding: 0;
+    border-radius: 50%;
+    background: transparent;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    color: var(--btn-text, #17181c);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .pm-btn:focus-visible {
+    outline: 2px solid var(--accent, #17181c);
+    outline-offset: 2px;
+  }
+
+  .pm-sat { pointer-events: none; }
+  .pm-open .pm-sat { pointer-events: auto; }
+  .pm-open .pm-sat:hover { background: var(--hover-veil, rgba(0, 0, 0, 0.04)); }
+
+  .pm-sat-icon {
+    display: grid;
+    place-items: center;
+    opacity: 0;
+    filter: blur(2px);
+    transition: opacity 120ms ease, filter 120ms ease;
+  }
+
+  .pm-open .pm-sat-icon {
+    opacity: 1;
+    filter: blur(0);
+    transition-duration: var(--pm-icon-dur, 180ms);
+  }
+
+  @keyframes pm-anticipate {
+    0% { transform: translateY(0); }
+    30% { transform: translateY(var(--pm-anticip, 5px)); }
+    100% { transform: translateY(0); }
+  }
+
+  .pm-anticipating [data-gooey-svg],
+  .pm-anticipating .pm-main {
+    animation-name: pm-anticipate;
+    animation-duration: var(--pm-anticip-dur, 700ms);
+    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    animation-fill-mode: both;
+  }
+
+  .pm-wrap { display: flex; flex-direction: column; }
+
+  .pm-plus {
+    display: grid;
+    place-items: center;
+    transform: rotate(0deg);
+    transition: transform 250ms ease-in-out;
+  }
+
+  .pm-open .pm-plus { transform: rotate(45deg); }
+
+  .cp-panel {
+    margin-top: 14px;
+    background: var(--panel-bg);
+    border: 1px solid var(--panel-border);
+    border-radius: 12px;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .cp-section { padding: 14px 16px 16px; }
+  .cp-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+  .cp-section-title {
+    font-family: 'Roboto Mono', ui-monospace, monospace;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--text);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    opacity: 0.72;
+  }
+
+  .cp-export {
+    appearance: none;
+    border: 0;
+    background: var(--accent);
+    color: var(--on-accent);
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: 500;
+    height: 22px;
+    padding: 0 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+    flex: none;
+    transition: background-color 120ms ease;
+  }
+
+  .cp-export:hover { background: var(--accent); opacity: 0.82; }
+  .cp-export.is-copied { background: #178a4a; }
+  .cp-actions { display: flex; align-items: center; gap: 6px; }
+  .cp-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 3px 0; }
+  .cp-subhead { margin: 14px 0 2px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
+  .cp-subhead:first-of-type { margin-top: 4px; }
+  .cp-label { color: var(--muted); font-size: 11.5px; line-height: 1.3; font-weight: 400; user-select: none; }
+
+  .cp-row input,
+  .cp-row select {
+    width: 86px;
+    height: 24px;
+    padding: 0 6px;
+    border: 1px solid var(--ctl-border);
+    border-radius: 4px;
+    font-family: 'Roboto Mono', ui-monospace, monospace;
+    font-size: 11px;
+    color: var(--text);
+    background: var(--field-bg);
+    text-align: right;
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  .cp-row input:focus,
+  .cp-row select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
+  .cp-slider { display: inline-flex; align-items: center; gap: 8px; }
+  .cp-slider input[type='range'] { width: 110px; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--accent); }
+  .cp-slider .cp-val { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 11px; color: var(--text); min-width: 34px; text-align: right; }
+  .cp-row select.cp-ease {
+    width: 128px;
+    text-align: left;
+    padding-right: 4px;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+    background-position: calc(100% - 10px) 10px, calc(100% - 6px) 10px;
+    background-size: 4px 4px, 4px 4px;
+    background-repeat: no-repeat;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pm-plus, .pm-sat-icon { transition: none !important; }
+    .pm-anticipating [data-gooey-svg], .pm-anticipating .pm-main { animation: none !important; }
+  }
+</style>