@joewinke/jatui 0.19.0 → 0.21.0

package/CLAUDE.md

@@ -26,7 +26,7 @@ Then import:
 | `SelectInput` | Dropdown select | `label`, `value` (bindable), `options: SelectOption[]`, `placeholder` |
 | `PhoneInput` | Intl phone (country dropdown + tel input, outputs E.164; caps national digits per country). Fires `onChange(value)` on every change. | `value` (bindable), `name`, `defaultCountry`, `required`, `onChange` |
 | `ChipInput` | Tag/chip entry with suggestions | `chips` (bindable), `suggestions: SuggestionGroup[]`, `placeholder` |
-| `SearchDropdown` | Searchable dropdown with grouped results, keyboard nav, avatar/initials options. `appendToBody` escapes table/overflow stacking contexts; `variant='chip'` renders a compact pill; `size='sm'` a smaller trigger; `dropup` opens upward; `clearable` shows an × when a value is set. Exposes `openDropdown()`. | `groups: SearchDropdownGroup[]`, `value`, `onChange`, `placeholder`, `variant`, `size`, `dropup`, `appendToBody`, `clearable`, `colorFn` |
+| `SearchDropdown` | Searchable dropdown with grouped results, keyboard nav, avatar/initials options. `appendToBody` escapes table/overflow stacking contexts; `variant='chip'` renders a compact pill; `size='sm'` a smaller trigger; `dropup` opens upward; `clearable` shows an × when a value is set. `onSearch` turns the built-in search box into a debounced server-side search hook (fires on open/clear with `''`; internal filtering is bypassed — the consumer updates `groups`). Exposes `openDropdown()`. | `groups: SearchDropdownGroup[]`, `value`, `onChange`, `placeholder`, `variant`, `size`, `dropup`, `appendToBody`, `clearable`, `colorFn`, `onSearch`, `searchDebounceMs` |
 | `FilterDropdown` | Multi-select filter dropdown | `label`, `options: string[]`, `selected: Set<string>` (bindable) |
 | `SortDropdown` | Sort by column with direction | `options: SortOption[]`, `sortBy` (bindable), `sortDir` (bindable) |
 | `InlineEdit` | Click-to-edit text | `value` (bindable), `segments: DisplaySegment[]`, `onSave` |

package/dist/actions/collapse.d.ts

@@ -57,6 +57,20 @@
  * control. For mapped lists, give each row its own `id`/`expanded`/`collapsible`
  * state (e.g. a `SvelteSet` of ids, with the id interpolating the row's own id) —
  * one action instance attaches per row element.
+ *
+ * ─── Expand on focus (expandOnFocus / onExpand) ───────────────────────────────
+ *
+ * By default a `focusin` inside a COLLAPSED region asks the consumer to expand
+ * it (upstream of the jat-ngdm1 fix, where tabbing into a clipped inline-edit
+ * textarea left it unreadable and clicking Show more blurred it). The action
+ * never mutates the consumer's state — it fires `onExpand` and the consumer
+ * sets `expanded = true`, keeping the toggle label and `aria-expanded` in sync:
+ *
+ *   <div use:collapse={{ expanded, onCollapsible, onExpand: () => (expanded = true) }}>
+ *
+ * Pass `expandOnFocus: false` to opt out (e.g. read-only log dumps where
+ * focus-driven expansion would be surprising). The `<Collapse>` component
+ * wires this out of the box.
  */
 export interface CollapseOptions {
     /** Max collapsed height in px. Content taller than this collapses. Default 120. */
@@ -73,6 +87,19 @@ export interface CollapseOptions {
      * content is shorter than the threshold.
      */
     onCollapsible?: (collapsible: boolean) => void;
+    /**
+     * Auto-expand when focus moves into the collapsed region (focusin).
+     * Default true. Expansion goes through `onExpand` — the consumer still owns
+     * the `expanded` state (same contract as `onCollapsible`), so wire it:
+     * `use:collapse={{ expanded, onExpand: () => (expanded = true) }}`.
+     * With no `onExpand` there is nothing to call and focusin is a no-op.
+     */
+    expandOnFocus?: boolean;
+    /**
+     * Called when the action decides the region should expand (focusin
+     * auto-expand while collapsed). Set your `expanded` state to true here.
+     */
+    onExpand?: () => void;
 }
 export declare function collapse(node: HTMLElement, options?: CollapseOptions): {
     update(next?: CollapseOptions): void;

package/dist/actions/collapse.js

@@ -57,8 +57,22 @@
  * control. For mapped lists, give each row its own `id`/`expanded`/`collapsible`
  * state (e.g. a `SvelteSet` of ids, with the id interpolating the row's own id) —
  * one action instance attaches per row element.
+ *
+ * ─── Expand on focus (expandOnFocus / onExpand) ───────────────────────────────
+ *
+ * By default a `focusin` inside a COLLAPSED region asks the consumer to expand
+ * it (upstream of the jat-ngdm1 fix, where tabbing into a clipped inline-edit
+ * textarea left it unreadable and clicking Show more blurred it). The action
+ * never mutates the consumer's state — it fires `onExpand` and the consumer
+ * sets `expanded = true`, keeping the toggle label and `aria-expanded` in sync:
+ *
+ *   <div use:collapse={{ expanded, onCollapsible, onExpand: () => (expanded = true) }}>
+ *
+ * Pass `expandOnFocus: false` to opt out (e.g. read-only log dumps where
+ * focus-driven expansion would be surprising). The `<Collapse>` component
+ * wires this out of the box.
  */
-const DEFAULTS = { threshold: 120, expanded: false, fadeStart: 55, epsilon: 4 };
+const DEFAULTS = { threshold: 120, expanded: false, fadeStart: 55, epsilon: 4, expandOnFocus: true };
 export function collapse(node, options = {}) {
     let opts = { ...DEFAULTS, ...options };
     let collapsible = false;
@@ -98,6 +112,19 @@ export function collapse(node, options = {}) {
         cancelAnimationFrame(rafId);
         rafId = requestAnimationFrame(measure);
     }
+    // Focus moving into a collapsed region means the user is interacting with
+    // content they can't fully see (the jat-ngdm1 case: tabbing into a clipped
+    // inline-edit textarea, then clicking Show more blurred it — three clicks
+    // for one edit). Expand instead of leaving the focused child clipped.
+    function onFocusin() {
+        if (!opts.expandOnFocus)
+            return;
+        // Only when actually collapsed — already-expanded or too-short content is a no-op.
+        if (!collapsible || opts.expanded)
+            return;
+        opts.onExpand?.();
+    }
+    node.addEventListener('focusin', onFocusin);
     // Re-measure when the content's natural size changes (streaming, {@html}, lazy images).
     const ro = new ResizeObserver(scheduleMeasure);
     ro.observe(node);
@@ -115,6 +142,7 @@ export function collapse(node, options = {}) {
         destroy() {
             cancelAnimationFrame(rafId);
             ro.disconnect();
+            node.removeEventListener('focusin', onFocusin);
         },
     };
 }

package/dist/components/BurndownChart.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+  import {
+    BURNDOWN_DONE,
+    burndownScope,
+    buildSeriesPoints,
+    type BurndownTask,
+  } from "./burndownSeries"
+
   interface OtherMilestone {
     ordinal: string // "01", "02", etc.
     name: string
@@ -23,7 +30,7 @@
     paymentDate?: string | null
   } = $props()
 
-  const DONE = new Set(["accepted", "deployed", "closed", "completed"])
+  const DONE = BURNDOWN_DONE
 
   // Layout constants
   const MARGIN = { top: 16, right: 20, bottom: 32, left: 40 }
@@ -62,47 +69,14 @@
     selected = milestoneFilter
   })
 
-  function buildPts(milestoneId: string, startDay: number, totalDays: number) {
-    const mt = tasks.filter(
-      (t) => t.milestone_id === milestoneId && t.status !== "dev",
-    )
-    if (!mt.length) return null
-    const creations = mt
-      .map((t) =>
-        new Date(new Date(t.created_at).setHours(0, 0, 0, 0)).getTime(),
-      )
-      .sort((a, b) => a - b)
-    const completions = mt
-      .filter((t) => DONE.has(t.status))
-      .map((t) => {
-        const d = t.closed_at
-          ? new Date(t.closed_at)
-          : t.completed_at
-            ? new Date(t.completed_at)
-            : new Date(t.updated_at)
-        return new Date(d.setHours(0, 0, 0, 0)).getTime()
-      })
-      .sort((a, b) => a - b)
-    const pts: { x: number; y: number }[] = []
-    for (let d = 0; d <= totalDays; d++) {
-      const ts = startDay + d * 86400000
-      pts.push({
-        x: d,
-        y: Math.max(
-          0,
-          creations.filter((c) => c <= ts).length -
-            completions.filter((c) => c <= ts).length,
-        ),
-      })
-    }
-    return pts
+  function buildPts(taskList: BurndownTask[], startDay: number, totalDays: number) {
+    return buildSeriesPoints(taskList, startDay, totalDays, DONE)
   }
 
+  let wholeList = $derived(selected === "" && activeMilestones.length === 0)
+
   let range = $derived.by((): { startDay: number; totalDays: number } => {
-    const relevant =
-      selected === ""
-        ? tasks.filter((t) => t.status !== "dev" && t.milestone_id)
-        : tasks.filter((t) => t.milestone_id === selected && t.status !== "dev")
+    const relevant = burndownScope(tasks, selected, activeMilestones.map((m) => m.id)).tasks
     if (!relevant.length) return { startDay: Date.now(), totalDays: 1 }
     const min = relevant.reduce(
       (m, t) => Math.min(m, new Date(t.created_at).getTime()),
@@ -116,9 +90,30 @@
   let lines = $derived.by(() => {
     const { startDay, totalDays } = range
     if (selected === "") {
+      // jatui-rt1no: no task carries a milestone_id → one series over the
+      // whole list, instead of the silent "No data" empty state.
+      if (wholeList) {
+        const pts = buildPts(tasks, startDay, totalDays)
+        return pts
+          ? [
+              {
+                id: "__all__",
+                name: "All tasks",
+                color: PALETTE[0],
+                pts,
+              },
+            ]
+          : []
+      }
       return activeMilestones
         .map((m, i) => {
-          const pts = buildPts(m.id, startDay, totalDays)
+          const pts = buildPts(
+            tasks.filter(
+              (t) => t.milestone_id === m.id && t.status !== "dev",
+            ),
+            startDay,
+            totalDays,
+          )
           return pts
             ? {
                 id: m.id,
@@ -136,7 +131,13 @@
       }[]
     } else {
       const m = (milestones as any[]).find((m) => m.id === selected)
-      const pts = buildPts(selected, startDay, totalDays)
+      const pts = buildPts(
+        tasks.filter(
+          (t) => t.milestone_id === selected && t.status !== "dev",
+        ),
+        startDay,
+        totalDays,
+      )
       return pts
         ? [{ id: selected, name: m?.name ?? "", color: PALETTE[0], pts }]
         : []
@@ -210,10 +211,7 @@
     const added = new Array(totalDays + 1).fill(0)
     const closed = new Array(totalDays + 1).fill(0)
 
-    const relevantTasks =
-      selected === ""
-        ? tasks.filter((t) => t.status !== "dev" && t.milestone_id)
-        : tasks.filter((t) => t.milestone_id === selected && t.status !== "dev")
+    const relevantTasks = burndownScope(tasks, selected, activeMilestones.map((m) => m.id)).tasks
 
     for (const t of relevantTasks) {
       const cd = Math.round(

package/dist/components/Collapse.svelte

@@ -11,6 +11,10 @@
 	 *   <Collapse>
 	 *     {@html renderedMarkdown}
 	 *   </Collapse>
+	 *
+	 * Focus-driven expansion: by default (`expandOnFocus`, default true) a
+	 * focusin inside a collapsed region expands it — tabbing into a clipped
+	 * editable child never leaves it unreadable (upstream of jat-ngdm1).
 	 */
 
 	interface Props {
@@ -24,6 +28,12 @@
 		moreLabel?: string;
 		/** Toggle label when expanded. Default 'Show less ↑'. */
 		lessLabel?: string;
+		/**
+		 * Auto-expand when focus moves into the collapsed region (focusin).
+		 * Default true — tabbing into a clipped editable child expands the region
+		 * instead of leaving it unreadable (upstream of jat-ngdm1).
+		 */
+		expandOnFocus?: boolean;
 		/** Extra classes on the content region. */
 		class?: string;
 		children?: import('svelte').Snippet;
@@ -35,6 +45,7 @@
 		expanded = $bindable(false),
 		moreLabel = 'Show more ↓',
 		lessLabel = 'Show less ↑',
+		expandOnFocus = true,
 		class: className = '',
 		children,
 	}: Props = $props();
@@ -61,12 +72,16 @@
 	);
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -- focusin only observes focus moving into an editable child; the wrapper takes no focus itself -->
 <div
 	id={bodyId}
 	class={`jatui-collapse-outer ${className}`.trim()}
 	class:jatui-collapse-outer-closed={collapsible && !expanded}
 	style="--collapse-threshold: {threshold}px; --collapse-gradient: {gradient};"
 	aria-expanded={expanded || !collapsible}
+	onfocusin={() => {
+		if (expandOnFocus && collapsible && !expanded) expanded = true;
+	}}
 >
 	<div bind:this={innerEl} class="jatui-collapse-inner">
 		{#if children}

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

@@ -10,6 +10,10 @@
  *   <Collapse>
  *     {@html renderedMarkdown}
  *   </Collapse>
+ *
+ * Focus-driven expansion: by default (`expandOnFocus`, default true) a
+ * focusin inside a collapsed region expands it — tabbing into a clipped
+ * editable child never leaves it unreadable (upstream of jat-ngdm1).
  */
 interface Props {
     /** Max collapsed height in px. Default 120. */
@@ -22,6 +26,12 @@ interface Props {
     moreLabel?: string;
     /** Toggle label when expanded. Default 'Show less ↑'. */
     lessLabel?: string;
+    /**
+     * Auto-expand when focus moves into the collapsed region (focusin).
+     * Default true — tabbing into a clipped editable child expands the region
+     * instead of leaving it unreadable (upstream of jat-ngdm1).
+     */
+    expandOnFocus?: boolean;
     /** Extra classes on the content region. */
     class?: string;
     children?: import('svelte').Snippet;

package/dist/components/SearchDropdown.svelte

@@ -36,6 +36,8 @@
 		triggerAttrs,
 		embedded = false,
 		onChange,
+		onSearch,
+		searchDebounceMs = 250,
 		onCreate,
 		createLabel = (q: string) => `Create "${q}"`,
 	}: {
@@ -65,6 +67,21 @@
 		/** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
 		embedded?: boolean;
 		onChange: (value: string) => void;
+		/**
+		 * Server-side search hook (mos-ibafm). When set, the built-in search box
+		 * drives ASYNC results instead of the client-side substring filter: every
+		 * keystroke (debounced to `searchDebounceMs`) calls onSearch with the
+		 * current query, and the consumer updates `groups` with the server's
+		 * response. Also fires on panel open (typically with '') so the consumer
+		 * can load the initial result set, and again when the query is cleared —
+		 * so '' means "reset to the default list". Internal filtering is bypassed
+		 * entirely while this is set: the consumer owns exactly what the list
+		 * shows (a fuzzy server match must not be re-filtered by substring).
+		 * With it absent, behavior is unchanged (client-side filter).
+		 */
+		onSearch?: (query: string) => void;
+		/** Debounce applied to onSearch keystrokes before the callback fires. */
+		searchDebounceMs?: number;
 		/**
 		 * When set, an always-present "create" row is rendered as the last option
 		 * whenever the search box is non-empty — it survives a zero-match filter (so
@@ -108,6 +125,10 @@
 	const activeColor = $derived(colorFn ? colorFn(value) : undefined);
 
 	const filteredGroups = $derived.by(() => {
+		// Server-search mode: the consumer owns the result set (groups arrive
+		// from onSearch responses) — re-filtering them client-side would hide
+		// fuzzy server matches that don't substring-match the query.
+		if (onSearch) return groups;
 		if (!searchQuery.trim()) return groups;
 		const q = searchQuery.toLowerCase();
 		const result: SearchDropdownGroup[] = [];
@@ -166,6 +187,19 @@
 		});
 	}
 
+	// Debounced onSearch: one timer per open panel; each keystroke reruns the
+	// effect, which clears the pending timer and re-arms it — a burst of
+		// keystrokes collapses into a single callback firing `searchDebounceMs`
+		// after the last one. Firing on open too (query is '' after a reset) is
+		// what lets the consumer load the initial result set from the server.
+		$effect(() => {
+			if (!onSearch) return;
+			if (!open && !embedded) return;
+			const q = searchQuery;
+			const t = setTimeout(() => onSearch(q), searchDebounceMs);
+			return () => clearTimeout(t);
+		});
+
 	function handleSearchKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			e.stopPropagation();

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

@@ -36,6 +36,21 @@ type $$ComponentProps = {
     /** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
     embedded?: boolean;
     onChange: (value: string) => void;
+    /**
+     * Server-side search hook (mos-ibafm). When set, the built-in search box
+     * drives ASYNC results instead of the client-side substring filter: every
+     * keystroke (debounced to `searchDebounceMs`) calls onSearch with the
+     * current query, and the consumer updates `groups` with the server's
+     * response. Also fires on panel open (typically with '') so the consumer
+     * can load the initial result set, and again when the query is cleared —
+     * so '' means "reset to the default list". Internal filtering is bypassed
+     * entirely while this is set: the consumer owns exactly what the list
+     * shows (a fuzzy server match must not be re-filtered by substring).
+     * With it absent, behavior is unchanged (client-side filter).
+     */
+    onSearch?: (query: string) => void;
+    /** Debounce applied to onSearch keystrokes before the callback fires. */
+    searchDebounceMs?: number;
     /**
      * When set, an always-present "create" row is rendered as the last option
      * whenever the search box is non-empty — it survives a zero-match filter (so

package/dist/components/burndownSeries.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Pure, DOM-free core of BurndownChart (jatui-rt1no).
+ *
+ * Extracted from the component so the series-building decisions are unit
+ * testable (`npm run test:unit`) — same pattern as sectionNavSpy.ts.
+ *
+ * Key behaviour: when no task in the list carries a milestone_id, the chart
+ * treats the WHOLE list as one series instead of rendering "No data".
+ * Consumers previously had to synthesize a milestone_id (the IDE's epic Burn
+ * tab passes the epicId as one) to see anything at all.
+ */
+export declare const BURNDOWN_DONE: Set<string>;
+export interface BurndownTask {
+    status: string;
+    milestone_id?: string | null;
+    created_at: string;
+    closed_at?: string | null;
+    completed_at?: string | null;
+    updated_at: string;
+    [key: string]: unknown;
+}
+/**
+ * Which tasks does the chart render for the current selection?
+ *
+ * - A specific milestone selected → only that milestone's non-dev tasks.
+ * - "All" selected with at least one milestone-tagged non-dev task → the
+ *   milestone-tagged tasks (per-milestone series, unchanged legacy behaviour).
+ * - "All" selected and NO task has a milestone_id → the whole non-dev list
+ *   as one series (the jatui-rt1no fallback).
+ */
+export declare function burndownScope(tasks: BurndownTask[], selected: string, activeMilestoneIds: Iterable<string>): {
+    tasks: BurndownTask[];
+    wholeList: boolean;
+};
+/** Completion timestamp with the closed_at → completed_at → updated_at fallback. */
+export declare function completionTs(t: BurndownTask): Date;
+/**
+ * Open-task count per day over the chart's range — the burn-down line.
+ * Returns null when the task list is empty (the chart then shows "No data",
+ * which is correct for a genuinely empty list).
+ */
+export declare function buildSeriesPoints(tasks: BurndownTask[], startDay: number, totalDays: number, done?: Set<string>): {
+    x: number;
+    y: number;
+}[] | null;

package/dist/components/burndownSeries.js

@@ -0,0 +1,76 @@
+/**
+ * Pure, DOM-free core of BurndownChart (jatui-rt1no).
+ *
+ * Extracted from the component so the series-building decisions are unit
+ * testable (`npm run test:unit`) — same pattern as sectionNavSpy.ts.
+ *
+ * Key behaviour: when no task in the list carries a milestone_id, the chart
+ * treats the WHOLE list as one series instead of rendering "No data".
+ * Consumers previously had to synthesize a milestone_id (the IDE's epic Burn
+ * tab passes the epicId as one) to see anything at all.
+ */
+export const BURNDOWN_DONE = new Set([
+    "accepted",
+    "deployed",
+    "closed",
+    "completed",
+]);
+/**
+ * Which tasks does the chart render for the current selection?
+ *
+ * - A specific milestone selected → only that milestone's non-dev tasks.
+ * - "All" selected with at least one milestone-tagged non-dev task → the
+ *   milestone-tagged tasks (per-milestone series, unchanged legacy behaviour).
+ * - "All" selected and NO task has a milestone_id → the whole non-dev list
+ *   as one series (the jatui-rt1no fallback).
+ */
+export function burndownScope(tasks, selected, activeMilestoneIds) {
+    const nonDev = tasks.filter((t) => t.status !== "dev");
+    if (selected !== "") {
+        return {
+            tasks: nonDev.filter((t) => t.milestone_id === selected),
+            wholeList: false,
+        };
+    }
+    const wholeList = [...activeMilestoneIds].length === 0;
+    return {
+        tasks: wholeList ? nonDev : nonDev.filter((t) => t.milestone_id),
+        wholeList,
+    };
+}
+/** Completion timestamp with the closed_at → completed_at → updated_at fallback. */
+export function completionTs(t) {
+    const d = t.closed_at
+        ? new Date(t.closed_at)
+        : t.completed_at
+            ? new Date(t.completed_at)
+            : new Date(t.updated_at);
+    return new Date(d.setHours(0, 0, 0, 0));
+}
+/**
+ * Open-task count per day over the chart's range — the burn-down line.
+ * Returns null when the task list is empty (the chart then shows "No data",
+ * which is correct for a genuinely empty list).
+ */
+export function buildSeriesPoints(tasks, startDay, totalDays, done = BURNDOWN_DONE) {
+    if (!tasks.length)
+        return null;
+    const creations = tasks
+        .map((t) => new Date(new Date(t.created_at).setHours(0, 0, 0, 0)).getTime())
+        .sort((a, b) => a - b);
+    const completions = tasks
+        .filter((t) => done.has(t.status))
+        .map(completionTs)
+        .map((d) => d.getTime())
+        .sort((a, b) => a - b);
+    const pts = [];
+    for (let d = 0; d <= totalDays; d++) {
+        const ts = startDay + d * 86400000;
+        pts.push({
+            x: d,
+            y: Math.max(0, creations.filter((c) => c <= ts).length -
+                completions.filter((c) => c <= ts).length),
+        });
+    }
+    return pts;
+}

package/package.json

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