@joewinke/jatui 0.2.9 → 0.2.11

package/CLAUDE.md

@@ -65,6 +65,8 @@ Then import:
 | `Sparkline` | Inline mini chart | `data: number[]`, `width`, `height`, `color` |
 | `LazyImage` | Image with lazy loading + placeholder | `src`, `alt`, `placeholder` |
 | `HunkDiffView` | Side-by-side diff with line numbers, red/green backgrounds, strikethrough on removed lines, inline word-level highlights via the `diff` lib. Used for reviewing YAML/text changes per hunk. | `oldText: string \| null`, `newText: string \| null`, `unified?: boolean` |
+| `ContextMenu` | Floating right-click (or programmatic) action menu, positioned via `use:floating` at a cursor point. Real `<button>`s, per-item `icon`/`variant`/`disabled`, dividers, click-outside + Escape dismiss, arrow-key/Home/End roving nav (focus starts on the first item). | `open` (bindable), `x`, `y`, `items: ContextMenuItem[]`, `header?`, `zIndex?`, `onClose?` |
+| `ContextMenuTrigger` | Wraps content with the standard right-click + "⋯" touch affordance, backed by `ContextMenu`. Use instead of hand-rolling `oncontextmenu` + a kebab button per row/card. | `items: ContextMenuItem[]`, `children` (snippet), `header?`, `triggerLabel?`, `hideButton?`, `zIndex?`, `class?` |
 
 ### Media
 

package/dist/components/Collapse.svelte

@@ -2,9 +2,11 @@
 	/**
 	 * Collapse — batteries-included tall-content collapser.
 	 *
-	 * Animates via grid-template-rows 0fr↔1fr with var(--motion-glide) — no
-	 * overshoot, no layout-property animation. The toggle self-hides when content
-	 * is shorter than the threshold (ResizeObserver-backed measurement).
+	 * Caps tall content at `threshold` px with a fade-out mask so it shows a
+	 * preview instead of overflowing; the toggle clamp is instant (no
+	 * layout-property animation, matching the `use:collapse` action). The toggle
+	 * self-hides when content is shorter than the threshold
+	 * (ResizeObserver-backed measurement).
 	 *
 	 *   <Collapse>
 	 *     {@html renderedMarkdown}
@@ -86,27 +88,26 @@
 
 <style>
 	/*
-	 * Grid-template-rows trick: outer wraps inner with overflow:hidden.
-	 * Closed → 0fr (inner pinned to 0 height). Open → 1fr (natural height).
-	 * grid-template-rows is a discrete property in older engines but modern
-	 * browsers interpolate it as a length when rows go 0fr↔1fr.
-	 * No layout-property width change; height is the only transition.
+	 * Preview collapse: closed caps the visible area at the threshold with a
+	 * fade-out mask; open removes the cap. This is a PREVIEW collapser — closed
+	 * must show the first `threshold` px, NOT zero. The original implementation
+	 * animated grid-template-rows 0fr↔1fr, but 0fr (with the inner's
+	 * min-height:0) clamps the row to ZERO height — max-height never got a say,
+	 * so every collapsed body rendered empty with only the "Show more" toggle
+	 * visible (mos-7i3ni). The toggle is now an instant clamp, matching the
+	 * `use:collapse` action's behavior (no layout-property animation).
 	 */
 	.jatui-collapse-outer {
-		display: grid;
-		grid-template-rows: 1fr;
-		transition: grid-template-rows var(--motion-enter) var(--motion-glide);
 		overflow: hidden;
 		position: relative;
 	}
 
 	.jatui-collapse-outer-closed {
-		grid-template-rows: 0fr;
+		/* Cap visible area at threshold */
+		max-height: var(--collapse-threshold);
 		/* Fade gradient masks the bottom edge when collapsed */
 		-webkit-mask-image: var(--collapse-gradient);
 		mask-image: var(--collapse-gradient);
-		/* Cap visible area at threshold */
-		max-height: var(--collapse-threshold);
 	}
 
 	/* When open, remove the mask and height cap */
@@ -116,12 +117,6 @@
 		mask-image: none;
 	}
 
-	.jatui-collapse-inner {
-		/* Required for grid 0fr to clamp to zero */
-		min-height: 0;
-		overflow: hidden;
-	}
-
 	.jatui-collapse-toggle {
 		display: block;
 		margin-top: 4px;
@@ -138,10 +133,4 @@
 		opacity: 1;
 		text-decoration: underline;
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.jatui-collapse-outer {
-			transition: none;
-		}
-	}
 </style>

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

@@ -1,9 +1,11 @@
 /**
  * Collapse — batteries-included tall-content collapser.
  *
- * Animates via grid-template-rows 0fr↔1fr with var(--motion-glide) — no
- * overshoot, no layout-property animation. The toggle self-hides when content
- * is shorter than the threshold (ResizeObserver-backed measurement).
+ * Caps tall content at `threshold` px with a fade-out mask so it shows a
+ * preview instead of overflowing; the toggle clamp is instant (no
+ * layout-property animation, matching the `use:collapse` action). The toggle
+ * self-hides when content is shorter than the threshold
+ * (ResizeObserver-backed measurement).
  *
  *   <Collapse>
  *     {@html renderedMarkdown}

package/dist/dnd/createDndBoard.js

@@ -45,17 +45,29 @@ export function createDndBoard(opts) {
 		}
 	}
 
-	$.user_effect(function () {
-		opts.items();
-
-		if ($.safe_get(dragging) || inFlight > 0) {
-			seedQueued = true;
-
-			return;
-		}
+	// Seed synchronously at creation so the render mirror is populated for the very
+	// first render — SSR (where effects never run) and a client mount where items
+	// are already present. Without this the grid renders empty until an effect
+	// fires.
+	seed();
+
+	// Reactive re-seed on items() change — CLIENT ONLY. createDndBoard ships as a
+	// client build (svelte/internal/client); creating this effect during SSR calls
+	// user_effect with no active reaction → effect_orphan (a 500 on any page that
+	// server-renders a board). The synchronous seed above covers the SSR render.
+	if (typeof window !== 'undefined') {
+		$.user_effect(function () {
+			opts.items();
+
+			if ($.safe_get(dragging) || inFlight > 0) {
+				seedQueued = true;
+
+				return;
+			}
 
-		seed();
-	});
+			seed();
+		});
+	}
 
 	function placementFrom(dropTargets) {
 		var _a;
@@ -219,7 +231,9 @@ export function createDndBoard(opts) {
 		});
 	}
 
-	$.user_effect(function () {
+	// Drag monitor — CLIENT ONLY (same effect_orphan reason as the seed effect;
+	// monitorForElements also needs the DOM, which does not exist during SSR).
+	if (typeof window !== 'undefined') $.user_effect(function () {
 		return monitorForElements({
 			canMonitor(_a) {
 				var source = _a.source;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",