libraries-dev-svelte 0.1.0 → 0.3.0

package/README.md

@@ -13,23 +13,93 @@ Svelte 5 ports of the Libraries.dev Bot Avatars and Gooey radial plus menu. The
 <BotAvatar type="clover" {state} size={64} />
 ```
 
-The port retains all 18 shapes; idle, working and sleeping animation states; eyes and optional state-aware mouth; pointer following and click jumps; `plastic`, `crisp`, `smooth` and `flat` shading; lighting, whirl and jump controls; reduced-motion and paused poses; seed synchronization; accessible labels; and the canvas drawing exports. Canvas properties and native click handlers pass through.
+The port retains all 18 shapes; idle, working and sleeping animation states; eyes and optional state-aware mouth; pointer following and click jumps; `plastic`, `crisp`, `smooth` and `flat` shading; lighting, whirl and jump controls; reduced-motion and paused poses; seed synchronization; accessible labels; and the canvas drawing exports. Canvas properties and native click handlers pass through. It updates at 30 fps with a maximum device pixel ratio of 1.5 by default to reduce continuous drawing and backing-store memory on high-density screens; set `fps={60}` and `maxDpr={2}` when maximum smoothness and resolution matter more.
 
 Types, presets, palette, shape paths, simulation, renderer, and plastic-material helpers are exported from the package entry point. See `packages/bot-avatars/README.md` in the source clone for the complete original prop descriptions.
 
 ## Gooey radial menu
 
+```svelte
+<script lang="ts">
+  import { GooeyRadialMenu, gooeyShadowPresets } from 'libraries-dev-svelte';
+</script>
+
+<GooeyRadialMenu bare blur={6} contrast={18} shadow={gooeyShadowPresets.light.soft} />
+```
+
+This ports the source `PlusMenu.tsx` demo and the liquid-gooey behavior it uses: filtered merged silhouettes and shadows, synchronized CSS transform transitions for each button and its SVG blob, stagger and easing controls, close anticipation, theme-aware fill, and the full tuning panel. The normal playground exposes duration and stagger; add `?pro` on `/gooey` for the full controls, copy-values output, and reset.
+
+### Shadow styles
+
+`shadow` styles one silhouette behind the menu. When the buttons join, their shadow joins into one continuous outline; it is not a separate shadow on each button. The presets are split by surface theme:
+
+```ts
+gooeyShadowPresets.light.soft
+gooeyShadowPresets.light.floating
+gooeyShadowPresets.dark.soft
+gooeyShadowPresets.dark.floating
+gooeyShadowPresets.none
+```
+
+You can also pass CSS `box-shadow` layers directly. Layer order is horizontal offset, vertical offset, blur, optional spread, then color. Separate layers with commas; add `inset` for an inner ring or highlight. Lengths must be numbers in pixels (`px`) or unitless values.
+
+```svelte
+<GooeyRadialMenu
+  bare
+  shadow="0 0 0 1px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .12)"
+/>
+```
+
+Props: `blur` (6), `contrast` (18), `fill` (`var(--modal-bg, #fff)`), `shadow` (empty), `items` (optional custom satellite items), `onAction` (optional callback; receives the selected item's `action` string), `pro` (false), and `bare` (false). `bare` renders only the menu stage and is the recommended mode when embedding it in an application; without it, the tuning panel is included. Selecting a satellite calls `onAction` when supplied and closes the menu. The host can set `--modal-bg`, `--btn-text`, `--stage-bg`, `--accent`, and `--hover-veil` to match its theme.
+
+### Custom items
+
+**Note for package users:** `GooeyRadialMenu` no longer ships fixed demo items. By default it still renders the original `New file` / `Add image` / `New folder` demo, but you can pass your own via the `items` prop. Each item is `{ label, action, x, y, iconSnippet? }`, where `x`/`y` are pixel offsets from the main button (positive `y` is down) and `action` is any string reported back through `onAction`. Keep offsets within the stage (the default stage is 200×140 with the main button centered) so satellites stay inside the goo filter. Icons are snippets, so any markup works — including an icon library. If `iconSnippet` is omitted, the built-in `icon` key (`'file' | 'image' | 'folder'`) is used; when neither is set, the item renders unlabeled.
+
 ```svelte
 <script lang="ts">
   import { GooeyRadialMenu } from 'libraries-dev-svelte';
+
+  const items = [
+    { label: 'Reply', action: 'reply', x: -54, y: -34 },
+    { label: 'Share', action: 'share', x: 0, y: -64 },
+    { label: 'Delete', action: 'delete', x: 54, y: -34 },
+  ];
+
+  function handleAction(action: string) {
+    if (action === 'delete') confirmDelete();
+  }
 </script>
 
-<GooeyRadialMenu blur={6} contrast={18} shadow="0 2px 6px rgba(0, 0, 0, .08)" />
+<GooeyRadialMenu bare {items} onAction={handleAction} />
 ```
 
-This ports the source `PlusMenu.tsx` demo and the liquid-gooey behavior it uses: filtered merged silhouettes and shadows, a shared animation clock for each button and its SVG blob, stagger and easing controls, close anticipation, theme-aware fill, and the full tuning panel. The normal playground exposes duration and stagger; add `?pro` on `/gooey` for the full controls, copy-values output, and reset.
+With custom icons:
 
-Props: `blur` (6), `contrast` (18), `fill` (`var(--modal-bg, #fff)`), `shadow` (empty), `pro` (false), and `bare` (false). `bare` renders only the menu stage. The host can set `--modal-bg`, `--btn-text`, `--stage-bg`, `--accent`, and `--hover-veil` to match its theme.
+```svelte
+<script lang="ts">
+  import { GooeyRadialMenu } from 'libraries-dev-svelte';
+  import { Camera, Send, Trash } from 'reicon-svelte';
+
+  const items = [
+    { label: 'Camera', action: 'camera', x: -54, y: -34 },
+    { label: 'Send', action: 'send', x: 0, y: -64 },
+    { label: 'Delete', action: 'delete', x: 54, y: -34 },
+  ];
+</script>
+
+<GooeyRadialMenu
+  bare
+  {items}
+  onAction={(action) => console.log(action)}
+>
+  {#snippet iconSnippet(item)}
+    {#if item.action === 'camera'}<Camera size={16} weight="Outline" />{/if}
+    {#if item.action === 'send'}<Send size={16} weight="Outline" />{/if}
+    {#if item.action === 'delete'}<Trash size={16} weight="Outline" />{/if}
+  {/snippet}
+</GooeyRadialMenu>
+```
 
 ## Demo routes
 

package/dist/bot-avatars/BotAvatar.svelte

@@ -15,6 +15,8 @@
     face,
     state: avatarState = 'default',
     size = 64,
+    fps = 30,
+    maxDpr = 1.5,
     color,
     ink,
     brightness = 1,
@@ -69,6 +71,8 @@
   let sim: Sim | null = null;
   let cfg: DrawConfig | null = null;
   let cssSize = 0;
+  let drawContext: CanvasRenderingContext2D | null = null;
+  let bounds: DOMRect | null = null;
   let instanceSeed = 0;
   let speedValue = 1;
   let interactiveValue = true;
@@ -117,14 +121,18 @@
     /* A hidden ancestor measures 0: keep the last size rather than wiping the backing store. */
     const px = el.clientWidth / OVERSCAN || cssSize || (typeof size === 'number' ? size : 64);
     if (!px) return;
-    const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1);
+    const dpr = Math.min(
+      2,
+      clamp(maxDpr, 1, 2),
+      (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1,
+    );
     const wanted = Math.round(px * OVERSCAN * dpr);
     if (el.width !== wanted || el.height !== wanted) {
       el.width = wanted;
       el.height = wanted;
     }
     cssSize = px;
-    const ctx = el.getContext('2d');
+    const ctx = drawContext ?? (drawContext = el.getContext('2d'));
     if (!ctx) return;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     current.dpr = dpr;
@@ -164,6 +172,34 @@
     };
     media?.addEventListener?.('change', updateMotion);
 
+    const el = canvas;
+    if (el) {
+      const measure = () => {
+        const measuredSize = el.clientWidth / OVERSCAN;
+        if (measuredSize > 0) cssSize = measuredSize;
+        bounds = el.getBoundingClientRect();
+        paint();
+      };
+      const updateBounds = () => {
+        bounds = el.getBoundingClientRect();
+      };
+      const observer = typeof ResizeObserver === 'function'
+        ? new ResizeObserver(measure)
+        : null;
+      observer?.observe(el);
+      window.addEventListener('scroll', updateBounds, { capture: true, passive: true });
+      window.addEventListener('resize', measure, { passive: true });
+      mounted = true;
+      measure();
+
+      return () => {
+        media?.removeEventListener?.('change', updateMotion);
+        observer?.disconnect();
+        window.removeEventListener('scroll', updateBounds, true);
+        window.removeEventListener('resize', measure);
+      };
+    }
+
     mounted = true;
 
     return () => {
@@ -228,7 +264,11 @@
   $effect(() => {
     if (!mounted || shadingMode !== 'plastic' || typeof Path2D === 'undefined') return;
     const path = bodyPath(SHAPE_PATHS[type] ?? SHAPE_PATHS.clover);
-    const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1);
+    const dpr = Math.min(
+      2,
+      clamp(maxDpr, 1, 2),
+      (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1,
+    );
     const devicePx = (typeof size === 'number' ? size : 64) * dpr;
     const runtime = globalThis as typeof globalThis & {
       requestIdleCallback?: (callback: () => void) => number;
@@ -247,20 +287,37 @@
     const el = canvas;
     const current = sim;
     if (!mounted || !el || !current || frozen || motionReduced) return;
-    let onScreen = true;
     let unsubscribe: (() => void) | null = null;
     const reach = 3;
+    const frameInterval = 1 / clamp(fps, 10, 60);
+    let frameElapsed = 0;
+    let lastPointerVersion = -1;
     const tick = (dt: number) => {
+      frameElapsed += dt;
+      if (frameElapsed < frameInterval) return;
+      const frameDt = frameElapsed;
+      frameElapsed = 0;
+
       if (interactiveValue && !Number.isNaN(pointer.x)) {
-        const rect = el.getBoundingClientRect();
+        if (pointer.version !== lastPointerVersion) {
+          bounds = el.getBoundingClientRect();
+          lastPointerVersion = pointer.version;
+        }
+      }
+
+      if (interactiveValue && !Number.isNaN(pointer.x) && bounds) {
+        const rect = bounds;
         const box = rect.width / OVERSCAN || 1;
         const dx = (pointer.x - (rect.left + rect.width / 2)) / box;
         const dy = (pointer.y - (rect.top + rect.height / 2 + RISE * box)) / box;
-        const distance = Math.hypot(dx, dy);
-        const strength = distance < 1 ? 1 : distance > reach ? 0 : 1 - (distance - 1) / (reach - 1);
-        current.setPointer(dx / Math.max(1, distance), dy / Math.max(1, distance), strength);
+        const distanceSquared = dx * dx + dy * dy;
+        if (distanceSquared < 1) current.setPointer(dx, dy, 1);
+        else if (distanceSquared < reach * reach) {
+          const distance = Math.sqrt(distanceSquared);
+          current.setPointer(dx / distance, dy / distance, 1 - (distance - 1) / (reach - 1));
+        } else current.setPointer(0, 0, 0);
       } else current.setPointer(0, 0, 0);
-      current.update(dt * speedValue);
+      current.update(frameDt * speedValue);
       paint();
     };
     const run = () => {
@@ -273,8 +330,7 @@
     let observer: IntersectionObserver | null = null;
     if (typeof IntersectionObserver === 'function') {
       observer = new IntersectionObserver((entries) => {
-        onScreen = entries[0]?.isIntersecting ?? true;
-        if (onScreen) run();
+        if (entries[0]?.isIntersecting ?? true) run();
         else stop();
       });
       observer.observe(el);

package/dist/bot-avatars/ticker.d.ts

@@ -3,6 +3,7 @@ type Tick = (dt: number) => void;
 export declare const pointer: {
     x: number;
     y: number;
+    version: number;
 };
 export declare function subscribe(fn: Tick): () => void;
 export {};

package/dist/bot-avatars/ticker.js

@@ -2,7 +2,7 @@
    the seconds since their last tick; the loop stops while the tab is
    hidden and while nobody is subscribed. */
 /** The last pointer position on the page, NaN while it is away. */
-export const pointer = { x: NaN, y: NaN };
+export const pointer = { x: NaN, y: NaN, version: 0 };
 const subs = new Set();
 let raf = 0;
 let last = 0;
@@ -25,7 +25,11 @@ function wire() {
     if (wired || typeof document === 'undefined')
         return;
     wired = true;
-    document.addEventListener('pointermove', (e) => { pointer.x = e.clientX; pointer.y = e.clientY; }, { passive: true });
+    document.addEventListener('pointermove', (e) => {
+        pointer.x = e.clientX;
+        pointer.y = e.clientY;
+        pointer.version++;
+    }, { passive: true });
     document.addEventListener('pointerleave', () => { pointer.x = NaN; pointer.y = NaN; });
     window.addEventListener('blur', () => { pointer.x = NaN; pointer.y = NaN; });
     document.addEventListener('visibilitychange', () => {

package/dist/bot-avatars/types.d.ts

@@ -64,6 +64,10 @@ export interface BotAvatarProps extends Omit<HTMLCanvasAttributes, 'color' | 'st
     saturation?: number;
     /** Multiplier on every animation's speed. Default `1`. */
     speed?: number;
+    /** Maximum animation updates per second, clamped to 10–60. Default `30`. */
+    fps?: number;
+    /** Maximum backing-store device pixel ratio, clamped to 1–2. Default `1.5`. */
+    maxDpr?: number;
     /** Freeze every animation on its current frame. */
     paused?: boolean;
     /**

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

@@ -1,25 +1,28 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
-  import { easingFunction } from './motion';
   import { parseShadow, type ShadowLayer } from './shadow';
-  import type { GooeyMenuSettings, GooeyRadialMenuProps } from './types';
+  import type { GooeyMenuAction, GooeyMenuItem, GooeyMenuSettings, GooeyRadialMenuProps } from './types';
 
   let {
     blur = 6,
     contrast = 18,
     fill = 'var(--modal-bg, #fff)',
     shadow = '',
+    items,
+    onAction,
+    iconSnippet,
     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 demoItems: GooeyMenuItem[] = [
+    { label: 'New file', action: 'new-file', x: -54, y: -34, icon: 'file' },
+    { label: 'Add image', action: 'add-image', x: 0, y: -64, icon: 'image' },
+    { label: 'New folder', action: 'new-folder', x: 54, y: -34, icon: 'folder' },
+  ];
+  const satellites = $derived(items ?? demoItems);
   const defaults: GooeyMenuSettings = {
     openDur: 550,
     openEase: 'Bouncy',
@@ -41,8 +44,7 @@
     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);
+  const allItems = $derived([...satellites, { label: 'Menu', x: 0, y: 0, icon: 'main' as const }]);
 
   interface BlobBox {
     x: number;
@@ -58,11 +60,11 @@
   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 satelliteButtons: Array<HTMLButtonElement | undefined> = [];
+  let mainButton: HTMLButtonElement;
+  let itemBoxes = $state<Array<BlobBox | null>>([]);
   let groupSize = $state({ w: 0, h: 0 });
 
   const shadows = $derived(parseShadow(shadow));
@@ -104,10 +106,10 @@
         },
   );
 
-  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;
+  let anticipationFrame = 0;
+  let focusFrame = 0;
 
   function parseCorner(value: string, size: number): number {
     const first = value.split(' ')[0];
@@ -165,67 +167,46 @@
     }
   }
 
-  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 transformFor(index: number) {
+    const item = allItems[index];
+    if (!menuOpen || !item || (!item.x && !item.y)) return 'none';
+    return `translate(${item.x * menuSettings.spread}px, ${item.y * menuSettings.spread}px)`;
   }
 
-  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() {
+    const opening = !menuOpen;
     if (menuOpen && menuSettings.anticipDist > 0) {
       if (anticipationTimer) clearTimeout(anticipationTimer);
+      if (anticipationFrame) cancelAnimationFrame(anticipationFrame);
       anticipating = false;
-      requestAnimationFrame(() => (anticipating = true));
+      anticipationFrame = requestAnimationFrame(() => {
+        anticipationFrame = 0;
+        anticipating = true;
+      });
       anticipationTimer = setTimeout(() => (anticipating = false), menuSettings.anticipDur);
     }
-    menuOpen = !menuOpen;
+    menuOpen = opening;
+    if (focusFrame) cancelAnimationFrame(focusFrame);
+    if (opening) {
+      focusFrame = requestAnimationFrame(() => {
+        focusFrame = 0;
+        if (menuOpen) satelliteButtons[0]?.focus();
+      });
+    } else {
+      mainButton?.focus();
+    }
+  }
+
+  function activateSatellite(action: GooeyMenuAction) {
+    toggle();
+    onAction?.(action);
+  }
+
+  function handleEscape(event: KeyboardEvent) {
+    if (event.key === 'Escape' && menuOpen) {
+      event.preventDefault();
+      toggle();
+    }
   }
 
   function updateSetting<K extends keyof GooeyMenuSettings>(key: K, value: GooeyMenuSettings[K]) {
@@ -260,8 +241,6 @@
     reducedMotion = motionQuery.matches;
     const updateMotionPreference = (event: MediaQueryListEvent) => (reducedMotion = event.matches);
     motionQuery.addEventListener('change', updateMotionPreference);
-    mounted = true;
-
     return () => {
       observer.disconnect();
       motionQuery.removeEventListener('change', updateMotionPreference);
@@ -271,7 +250,8 @@
   onDestroy(() => {
     if (anticipationTimer) clearTimeout(anticipationTimer);
     if (copyTimer) clearTimeout(copyTimer);
-    frameIds.forEach((frame) => frame && cancelAnimationFrame(frame));
+    if (anticipationFrame) cancelAnimationFrame(anticipationFrame);
+    if (focusFrame) cancelAnimationFrame(focusFrame);
   });
 </script>
 
@@ -279,13 +259,13 @@
   <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;`}
+    style={`--pm-anticip:${menuSettings.anticipDist}px;--pm-anticip-dur:${menuSettings.anticipDur}ms;--pm-icon-dur:${menuSettings.iconDur}ms;--pm-transition-duration:${reducedMotion ? 0 : phase.duration}ms;--pm-transition-ease:${phase.ease};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};` : ''}`}
+      style={`position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1;${cssShadowFilter ? `filter:${cssShadowFilter};` : ''}`}
     >
       <defs>
         <filter
@@ -409,11 +389,10 @@
           {/if}
         </filter>
       </defs>
-      <g id={`${filterId}-sil`} filter={`url(#${filterId})`} style={`fill:${fill};`}>
+      <g id={`${filterId}-sil`} class="pm-blobs" 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}
@@ -421,7 +400,7 @@
               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;`}
+              style={`--pm-transition-delay:${reducedMotion || index >= satellites.length ? 0 : index * phase.stagger}ms;transform:${transformFor(index)};`}
             />
           {/if}
         {/each}
@@ -429,13 +408,16 @@
     </svg>
 
     {#each satellites as satellite, index (satellite.label)}
-      <div bind:this={itemWrappers[index]} class="pm-slot" style="display:inline-block;will-change:transform;">
+      <div bind:this={itemWrappers[index]} class="pm-slot" style={`--pm-transition-delay:${reducedMotion ? 0 : index * phase.stagger}ms;transform:${transformFor(index)};`}>
         <button
           type="button"
           class="pm-btn pm-sat"
           aria-label={satellite.label}
           tabindex={menuOpen ? 0 : -1}
-          onclick={toggle}
+          inert={!menuOpen}
+          bind:this={satelliteButtons[index]}
+          onclick={() => activateSatellite(satellite.action)}
+          onkeydown={handleEscape}
         >
           <span
             class="pm-sat-icon"
@@ -443,7 +425,9 @@
               ? `${menuSettings.iconDelay + index * phase.stagger}ms`
               : '0ms'}
           >
-            {#if satellite.icon === 'file'}
+            {#if iconSnippet}
+              {@render iconSnippet(satellite)}
+            {:else 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" />
@@ -464,13 +448,15 @@
       </div>
     {/each}
 
-    <div bind:this={itemWrappers[satellites.length]} class="pm-slot" style="display:inline-block;will-change:transform;">
+    <div bind:this={itemWrappers[satellites.length]} class="pm-slot" style={`transform:${transformFor(satellites.length)};`}>
       <button
+        bind:this={mainButton}
         type="button"
         class="pm-btn pm-main"
         aria-expanded={menuOpen}
         aria-label={menuOpen ? 'Close menu' : 'Open menu'}
         onclick={toggle}
+        onkeydown={handleEscape}
       >
         <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">
@@ -597,9 +583,20 @@
     position: absolute;
     left: 80px;
     top: 80px;
+    display: inline-block;
+    transition: transform var(--pm-transition-duration, 0ms)
+      var(--pm-transition-ease, ease) var(--pm-transition-delay, 0ms);
+  }
+
+  .pm-blobs rect {
+    transform-box: fill-box;
+    transform-origin: center;
+    transition: transform var(--pm-transition-duration, 0ms)
+      var(--pm-transition-ease, ease) var(--pm-transition-delay, 0ms);
   }
 
   .pm-btn {
+    position: relative;
     width: 40px;
     height: 40px;
     border: 0;
@@ -611,6 +608,14 @@
     cursor: pointer;
     color: var(--btn-text, #17181c);
     -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  .pm-btn::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: inherit;
   }
 
   .pm-btn:focus-visible {

package/dist/gooey-radial-menu/shadow.d.ts

@@ -7,4 +7,16 @@ export interface ShadowLayer {
     color: string;
     inset: boolean;
 }
+/** Ready-to-use box-shadow values for the Gooey menu's merged liquid silhouette. */
+export declare const gooeyShadowPresets: {
+    readonly light: {
+        readonly soft: "0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 42px rgba(0, 0, 0, 0.06)";
+        readonly floating: "0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.18)";
+    };
+    readonly dark: {
+        readonly soft: "0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 1px 0 rgba(255, 255, 255, 0.06) inset";
+        readonly floating: "0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.55)";
+    };
+    readonly none: "";
+};
 export declare function parseShadow(input?: string | null): ShadowLayer[];

package/dist/gooey-radial-menu/shadow.js

@@ -1,3 +1,15 @@
+/** Ready-to-use box-shadow values for the Gooey menu's merged liquid silhouette. */
+export const gooeyShadowPresets = {
+    light: {
+        soft: '0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 42px rgba(0, 0, 0, 0.06)',
+        floating: '0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.18)',
+    },
+    dark: {
+        soft: '0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 1px 0 rgba(255, 255, 255, 0.06) inset',
+        floating: '0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.55)',
+    },
+    none: '',
+};
 function splitTop(value, separator) {
     const parts = [];
     let depth = 0;

package/dist/gooey-radial-menu/types.d.ts

@@ -1,4 +1,4 @@
-/** Inputs accepted by the Goey radial-menu playground component. */
+/** Inputs accepted by the Gooey radial-menu component. */
 export interface GooeyRadialMenuProps {
     /** Goo filter blur sigma in px. */
     blur?: number;
@@ -6,6 +6,12 @@ export interface GooeyRadialMenuProps {
     contrast?: number;
     /** CSS box-shadow layers drawn on the merged liquid silhouette. */
     shadow?: string;
+    /** Custom satellite items. Defaults to the original demo items. */
+    items?: GooeyMenuItem[];
+    /** Called when an item is selected. The menu closes after activation. */
+    onAction?: (action: GooeyMenuAction) => void;
+    /** Snippet rendering each item's icon; receives the item. Falls back to the built-in demo icons. */
+    iconSnippet?: Snippet<[GooeyMenuItem]>;
     /** Surface color for the merged liquid. Defaults to the host theme's modal color. */
     fill?: string;
     /** Show all raw tuning controls, export, and reset controls. */
@@ -13,6 +19,20 @@ export interface GooeyRadialMenuProps {
     /** Render only the menu stage for embedding in a host layout. */
     bare?: boolean;
 }
+/** A satellite item rendered around the main button. */
+import type { Snippet } from 'svelte';
+export interface GooeyMenuItem {
+    /** Accessible label (also the `aria-label`). */
+    label: string;
+    /** Stable identifier reported to `onAction`. */
+    action: string;
+    /** Offset in px from the main button (positive y is down). */
+    x: number;
+    y: number;
+    /** Built-in demo icon key: 'file' | 'image' | 'folder'. Used when the component's `iconSnippet` prop is not set. */
+    icon?: 'file' | 'image' | 'folder';
+}
+export type GooeyMenuAction = string;
 export interface GooeyMenuSettings {
     openDur: number;
     openEase: string;

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 export { default as BotAvatar } from './bot-avatars/BotAvatar.svelte';
 export { default } from './bot-avatars/BotAvatar.svelte';
 export { default as GooeyRadialMenu } from './gooey-radial-menu/GooeyRadialMenu.svelte';
-export type { GooeyMenuSettings, GooeyRadialMenuProps } from './gooey-radial-menu/types';
+export { gooeyShadowPresets } from './gooey-radial-menu/shadow';
+export type { GooeyMenuAction, GooeyMenuItem, GooeyMenuSettings, GooeyRadialMenuProps } from './gooey-radial-menu/types';
 export { botAvatarPresets, botAvatarPalette, botAvatarTypes, botAvatarFaces, botAvatarStates, } from './bot-avatars/presets';
 export { SHAPE_PATHS as botAvatarShapes, SHAPE_PARTS as botAvatarParts } from './bot-avatars/shapes';
 export { autoInk, luminance, parseColor, shade } from './bot-avatars/color';

package/dist/index.js

@@ -1,6 +1,7 @@
 export { default as BotAvatar } from './bot-avatars/BotAvatar.svelte';
 export { default } from './bot-avatars/BotAvatar.svelte';
 export { default as GooeyRadialMenu } from './gooey-radial-menu/GooeyRadialMenu.svelte';
+export { gooeyShadowPresets } from './gooey-radial-menu/shadow';
 export { botAvatarPresets, botAvatarPalette, botAvatarTypes, botAvatarFaces, botAvatarStates, } from './bot-avatars/presets';
 export { SHAPE_PATHS as botAvatarShapes, SHAPE_PARTS as botAvatarParts } from './bot-avatars/shapes';
 export { autoInk, luminance, parseColor, shade } from './bot-avatars/color';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "libraries-dev-svelte",
-	"version": "0.1.0",
+	"version": "0.3.0",
 	"description": "Svelte ports of Bot Avatars and the Gooey radial menu from Libraries.dev",
 	"license": "MIT",
 	"scripts": {