@spaethtech/svelte-ui 0.21.1-dev.128.59d3487 → 0.21.1-dev.130.6593aa4

package/CLAUDE.md

@@ -162,9 +162,21 @@ host port). Get its IP with `docker inspect svelte-ui-demo-1 --format '{{range .
 (`svelte-ui-caddy-1` proxies to it; `php-svelte.spaethtech.dev` → the host `:5173`). `curl` the route
 first to confirm it serves, then point a browser at it.
 
+**For INTERACTION / HYDRATION testing, use the Caddy route `https://svelte-ui.spaethtech.dev/<route>`
+(Playwright `ignoreHTTPSErrors: true`), NOT the container IP.** Hitting the container IP `:5173`
+directly serves the SSR HTML but **intermittently fails to hydrate**: vite's HMR client tries
+`ws://<ip>:443` (refused) and the route's dynamic client module then fails to fetch, so the page stays
+SSR-only and **all client interactivity is dead** — clicks/keyboard/`bind:`/`oninput` do nothing, and a
+Svelte `.fill()` won't propagate to bound state. This looks exactly like a component bug but isn't; it
+bit this project's DatePicker2-reset and Tree-lazy verifications. The Caddy origin terminates TLS on
+`:443`, so HMR + module imports load and the page hydrates reliably. Container IP is fine for
+**SSR-only / visual** checks (screenshots of rendered markup); use Caddy whenever you click, type, or
+assert post-hydration state. Confirm hydration first (e.g. toggle a known control and see state flip)
+before trusting an interaction result — don't report "verified" from a page that never hydrated.
+
 Use the **`/playwright-cli`** workflow for browser-driven testing (navigation, snapshots/screenshots,
-console inspection, interaction). Point it at the **container IP** `:5173` and the relevant demo route
-(e.g. `/tabstrip`). The old Chrome DevTools MCP (`.mcp.json` + `chrome-devtools-mcp`) has been removed
+console inspection, interaction). Point it at the **Caddy route** for interaction (container IP only for
+SSR/visual) and the relevant demo route (e.g. `/tabstrip`). The old Chrome DevTools MCP (`.mcp.json` + `chrome-devtools-mcp`) has been removed
 in favor of this. **Browser-binary gotcha:** the Playwright in `node_modules` and the cached browser
 revision can mismatch (e.g. it wants `headless_shell-1181` but the cache has `chromium-1229`); pass
 `executablePath` to the installed `~/.cache/ms-playwright/chromium-*/chrome-linux64/chrome` instead of

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -23,7 +23,10 @@
     children,
     ...rest
   }: {
-    items: MenuItem[];
+    /** The menu items — a static list, OR a function of the triggering event so one wrapper can build
+     *  the menu from whatever was right-clicked (read `event.target`, a row's `data-key`, …) without
+     *  the consumer tracking target state during the bubble. Return `[]` to suppress the menu. */
+    items: MenuItem[] | ((event: MouseEvent) => MenuItem[]);
     size?: Responsive<Size>;
     variant?: Variant;
     disabled?: boolean;
@@ -35,10 +38,14 @@
   let anchorEl = $state<HTMLElement>();
   let x = $state(0);
   let y = $state(0);
+  // The items shown for the current open — a snapshot (for the function form, computed from the event).
+  let resolvedItems = $state<MenuItem[]>([]);
 
   function onContextMenu(e: MouseEvent) {
     if (disabled) return;
     e.preventDefault();
+    resolvedItems = typeof items === "function" ? items(e) : items;
+    if (!resolvedItems?.length) return; // nothing to show → don't open (and let no empty menu flash)
     x = e.clientX;
     y = e.clientY;
     open = true;
@@ -57,4 +64,4 @@
   style="position: fixed; left: {x}px; top: {y}px; width: 0; height: 0; pointer-events: none;"
 ></span>
 
-<Menu anchor={anchorEl} bind:open {items} {size} {variant} side="bottom" align="start" />
+<Menu anchor={anchorEl} bind:open items={resolvedItems} {size} {variant} side="bottom" align="start" />

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

@@ -5,7 +5,10 @@ import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
 import type { Responsive } from "../../types/responsive.js";
 type $$ComponentProps = {
-    items: MenuItem[];
+    /** The menu items — a static list, OR a function of the triggering event so one wrapper can build
+     *  the menu from whatever was right-clicked (read `event.target`, a row's `data-key`, …) without
+     *  the consumer tracking target state during the bubble. Return `[]` to suppress the menu. */
+    items: MenuItem[] | ((event: MouseEvent) => MenuItem[]);
     size?: Responsive<Size>;
     variant?: Variant;
     disabled?: boolean;

package/dist/components/Tree/Tree.svelte

@@ -256,6 +256,7 @@
           bind:this={rowRefs[f.key]}
           role="treeitem"
           data-key={f.key}
+          aria-label={f.node.label}
           aria-level={f.level + 1}
           aria-selected={active}
           aria-expanded={f.hasChildren ? f.open : undefined}

package/docs/components.md

@@ -840,8 +840,11 @@ Vertical event sequence — marker + connecting line + title/time/description.
 Right-click menu over any content; opens `Menu` at the pointer.
 
 - **Location**: `src/lib/components/ContextMenu/ContextMenu.svelte`
-- **Props**: `items` (`MenuItem[]`), `size`, `variant`, `disabled` (leaves the native menu), `class`,
-  `children` (the right-clickable content)
+- **Props**: `items` (`MenuItem[]` **or** `(event: MouseEvent) => MenuItem[]`), `size`, `variant`,
+  `disabled` (leaves the native menu), `class`, `children` (the right-clickable content)
+- **Dynamic items**: pass a function to build the menu from whatever was right-clicked — read
+  `event.target` (e.g. a row's `data-key`) and return that target's items; return `[]` to suppress the
+  menu. Lets one wrapper serve many targets (e.g. a `Tree`/file list) without tracking target state.
 - **Composition**: `Menu` anchored to a 0-size point at the pointer; flips/shifts at edges
 
 ### Tree

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.128.59d3487",
+  "version": "0.21.1-dev.130.6593aa4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"