libraries-dev-svelte 0.2.0 → 0.3.0

package/README.md

@@ -50,7 +50,56 @@ You can also pass CSS `box-shadow` layers directly. Layer order is horizontal of
 />
 ```
 
-Props: `blur` (6), `contrast` (18), `fill` (`var(--modal-bg, #fff)`), `shadow` (empty), `onAction` (optional callback for `'new-file'`, `'add-image'`, or `'new-folder'`), `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.
+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 bare {items} onAction={handleAction} />
+```
+
+With custom icons:
+
+```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/gooey-radial-menu/GooeyRadialMenu.svelte

@@ -1,25 +1,28 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
   import { parseShadow, type ShadowLayer } from './shadow';
-  import type { GooeyMenuAction, 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 = [
+  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' },
-  ] as const;
+  ];
+  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;
@@ -62,7 +64,7 @@
   let itemWrappers: Array<HTMLDivElement | undefined> = [];
   let satelliteButtons: Array<HTMLButtonElement | undefined> = [];
   let mainButton: HTMLButtonElement;
-  let itemBoxes = $state<Array<BlobBox | null>>(initialBoxes);
+  let itemBoxes = $state<Array<BlobBox | null>>([]);
   let groupSize = $state({ w: 0, h: 0 });
 
   const shadows = $derived(parseShadow(shadow));
@@ -423,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" />

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,8 +6,12 @@ export interface GooeyRadialMenuProps {
     contrast?: number;
     /** CSS box-shadow layers drawn on the merged liquid silhouette. */
     shadow?: string;
-    /** Called when a sample action is selected. The menu closes after activation. */
+    /** 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. */
@@ -15,7 +19,20 @@ export interface GooeyRadialMenuProps {
     /** Render only the menu stage for embedding in a host layout. */
     bare?: boolean;
 }
-export type GooeyMenuAction = 'new-file' | 'add-image' | 'new-folder';
+/** 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

@@ -2,7 +2,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 type { GooeyMenuAction, GooeyMenuSettings, GooeyRadialMenuProps } from './gooey-radial-menu/types';
+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/package.json

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