@joewinke/jatui 0.35.0 → 0.36.1

package/CLAUDE.md

@@ -116,7 +116,7 @@ Item-by-item review surfaces (MOS review-ux, design mos-z8vgx). One `VerdictOpti
 
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
-| `ThumbnailGrid` | Generic thumbnail strip (chimaro port) — image tiles with text-tile fallback, +N overflow counter, remove/add affordances. Decoupled from any media library: pass `{id, url, alt}` items, or a `cell` snippet for full control of tile contents. | `items: ThumbnailItem[]`, `max`, `size` (`xs\|sm\|md\|lg`), `removable`+`onRemove`, `addable`+`onAdd`, `onSelect`, `cell` snippet |
+| `ThumbnailGrid` | Generic thumbnail strip (chimaro port) — image tiles with text-tile fallback, +N overflow counter, remove/add affordances. Decoupled from any media library: pass `{id, url, alt}` items, or a `cell` snippet for full control of tile contents. `removeMode` — `'hover'` (default) reveals the × on hover/focus and keeps it visible on coarse (touch) pointers (ContextMenuTrigger pattern); `'always'` pins it for touch-first flows. `gridCols` (e.g. `'grid-cols-2 sm:grid-cols-4'`) switches the strip to a responsive CSS grid with column-filling tiles. | `items: ThumbnailItem[]`, `max`, `size` (`xs\|sm\|md\|lg`), `removable`+`onRemove`, `removeMode` (`hover\|always`), `addable`+`onAdd`, `onSelect`, `gridCols`, `class`, `cell` snippet |
 | `MediaWorkbench` | Full-featured image editor modal — upload, AI generate, AI edit, background removal, annotation canvas. **Preferred over `SmartImageEditor` for new image fields.** Two-column modal: preview left, 4 action tabs right (Generate, Edit, Remove BG, Annotate). Save uploads blob to `uploadEndpoint` or emits `onComplete`. Requires proxy endpoints from jst-23w1l.2. | `value` (bindable `string \| null`), `uploadEndpoint?` (default `/api/media`), `onComplete?`, `accept?` |
 | `MediaLightbox` | Full-screen media preview — z-9040 backdrop, arrow-key paging when given an array, `+/-/0` zoom, download action, Escape/backdrop close. **Use this for the general "just show it big" case** — replaces hand-rolled `fixed inset-0 z-[9040]` modals. For annotated / markup-overlaid image previews, use `ImageLightbox` instead. | `src?`, `filename?`, `kind?: 'image' \| 'video'`, `downloadUrl?`, `items?: MediaItem[]`, `initialIndex?`, `onClose?`, `zIndex?` |
 | `VideoPlayer` | **The default video surface — reach for this over a bare `<video controls>`.** One timeline band carrying a waveform-envelope scrubber, chapter flags (top edge), bookmark diamonds (bottom edge), diarized speaker colouring and scroll-to-zoom, plus an optional transcript pane (click to seek, active line auto-scroll, solo/skip per speaker, `T` toggle) and a "Talk time" legend (2+ speakers only; one voice gets no legend and no per-row name). **`kind="audio"` renders no stage**, and **`transport="band"`** (the audio default) drops the native `<video controls>` bar for a transport row on the band (play/pause, `now / total`, speed, mute + volume, fullscreen for video), so the band is the ONE timeline. **Every intelligence prop is optional** — a bare mp4 still gets the scrubber, hover-time card, wheel volume and the full keyboard map (Space/K, arrows/J/L, vol/mute, −/= speed + Backspace reset, </> frame step, [/] chapters, B bookmark, ? help overlay), and each pane lights up as its data arrives (nothing shifts layout when diarization lands late). Wheel means volume over the video (shift = seek, alt = speed) and zoom over the band. Internals live in `src/lib/video/` (band/keys/rate/deepLink/settings + contracts for audio/night/presence — see that README; gap audit vs the extension: `VIDEO-PLAYER-GAP-AUDIT.md`). | `src`, `kind?` (`'video' \| 'audio'`), `transport?` (`'native' \| 'band'`), `chapters?`, `speakers?`, `transcript?`, `bookmarks?`, `waveform?`, `talkTime?`, `startAt?`, `poster?`, `captionsSrc?`, `crossorigin?` (`'anonymous'` — what frame-reading features need), `syncUrlTime?` (`?t=` deep-link, opt-in), `transcriptPosition?` (`'below' \| 'side'`), `onTimeUpdate?`, `onAddBookmark?`, `onBookmarkContext?` |
@@ -232,14 +232,19 @@ const rec = createAudioRecorder({
   mode: "push",                 // 'toggle' (default) | 'push' (hold-to-talk: pointerdown→start, pointerup→stop;
                                 //   a stop during stream acquisition cancels silently, matching VoiceMicButton)
   maxDurationMs: 0,             // auto-stop ceiling; 0 = until stopped
+  timesliceMs: 1000,            // MediaRecorder.start(timeslice) — chunks fire onChunk; 0 = single blob until stop
   onStart?, onPause?, onResume?, onCancel?,
   onStop?,                      // (result: AudioRecordingResult) — blob/mimeType/durationSeconds/sizeBytes;
                                 //   may be async, recorder stays 'processing' until it settles
   onError?,                     // (err: { kind, message }) — kind: unsupported|denied|no-mic|start-failed|too-short|handler-failed
   onFrame?,                     // ({ level, frequency, time }) per animation frame — draw your own visualization
+  onChunk?,                     // (chunk: AudioRecorderChunk) per timeslice — { blob, mimeType, sizeBytes (cumulative),
+                                //   elapsedMs (pause-adjusted), index }; the take still accumulates for onStop
+                                //   (Scribe: full take + restartable chunks)
 })
 // Reactive state (Svelte 5 getters): rec.phase ('idle'|'starting'|'recording'|'processing'|'done'),
-// rec.paused, rec.level (0–100), rec.elapsedMs, rec.sizeBytes, rec.error, rec.supported
+// rec.paused, rec.level (0–100), rec.elapsedMs, rec.sizeBytes, rec.error, rec.supported,
+// rec.stream (live MediaStream while recording, else null — for WebRTC / requestData()-driven streaming)
 // Methods: start() stop() pause() resume() cancel() reset() destroy()
 ```
 
@@ -334,7 +339,7 @@ const callbacks: AnnotationCallbacks = {
 
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
-| `KeyboardShortcutsOverlay` | `?`-triggered modal listing keyboard shortcuts. Ignores typing targets and Ctrl/Meta/Alt combos. Supports a flat `shortcuts` list, grouped `sections` with optional per-key color tinting, or a shortcut `registry` (lists what can fire right now, and pushes a modal context while open so page shortcuts don't fire behind it). App-specific sections (marks, list motions, cockpit panels) come in via `extraSections` — rendered after the primary content, before the meta rows, in every mode — plus an `extra` snippet for custom footer content. Precedence: `sections` > `registry` > `shortcuts`; `extraSections`/`extra` always append. | `shortcuts?: KeyboardShortcut[]`, `sections?: KeyboardShortcutSection[]`, `registry?: ShortcutRegistry`, `extraSections?: KeyboardShortcutSection[]`, `extra?: Snippet`, `title?`, `open` (bindable) |
+| `KeyboardShortcutsOverlay` | `?`-triggered modal listing keyboard shortcuts. Ignores typing targets and Ctrl/Meta/Alt combos. Supports a flat `shortcuts` list, grouped `sections` with optional per-key color tinting, or a shortcut `registry` (lists what can fire right now, and pushes a modal context while open so page shortcuts don't fire behind it). App-specific sections (marks, list motions, cockpit panels) come in via `extraSections` — rendered after the primary content, before the meta rows, in every mode — plus an `extra` snippet for custom footer content. Precedence: `sections` > `registry` > `shortcuts`; `extraSections`/`extra` always append. Host/contributor mode: one `mode="host"` overlay is the page-wide `?` hub that aggregates every `mode="auto"` instance's sections under that instance's `sectionTitle`; contributors render nothing (no panel, no hint) and forward `open` to the host via `requestOpen()`. With no host mounted, `auto` self-renders (portal/contract-page fallback); `mode="standalone"` never defers. `showHint={false}` opts out of the closed-state press-`?` hint. | `shortcuts?: KeyboardShortcut[]`, `sections?: KeyboardShortcutSection[]`, `registry?: ShortcutRegistry`, `extraSections?: KeyboardShortcutSection[]`, `extra?: Snippet`, `title?`, `open` (bindable), `mode?: 'auto' | 'host' | 'standalone'`, `sectionTitle?: string`, `showHint?: boolean` |
 
 **Shortcut registry** (`createShortcutRegistry()`, or the lazy `getShortcutRegistry()` singleton) — the data source for the overlay, so apps stop hand-wiring a keydown handler plus a separate list for the overlay. Shortcuts register against a **context** and return an unregister fn (return it from `$effect`). Contexts form a stack: `global` is the bottom, `pushContext(name, { modal?, label? })` returns a pop fn, the top context shadows the same combo lower down, and a `modal` context suppresses everything beneath it (including `global`). Handled for you: no firing while typing in text inputs/textarea/select/contenteditable (opt in per shortcut with `allowInInput`), IME composition and `defaultPrevented` events are skipped, `mod` = ⌘ on macOS / Ctrl elsewhere, exact modifier matching (`?` doesn't need `shift`), and macOS Option combos fall back to `event.code`. Per shortcut: `enabled()`, `allowRepeat`, `preventDefault`, `group` (overlay section), `hidden`, `label` (keycap override).
 

package/dist/actions/reveal.d.ts

@@ -2,12 +2,54 @@
  * Scroll-reveal action — reveals an element the first time it scrolls into
  * the viewport (IntersectionObserver, fires once, then unobserves).
  *
- * Ported from chimaro's `use:reveal` (jatui-m4uz3.3). The public API is kept
- * chimaro-compatible (animation / delay / threshold) so chimaro's local copy
- * is deletable in favor of this import — but the animista.css dependency is
- * NOT shipped: each named variant remaps onto a `jatui-reveal-*` class in
- * `jatui/styles/motion.css`, whose keyframes and timing are built entirely
- * from the `--motion-*` tokens.
+ * Ported from chimaro's `use:reveal` (jatui-m4uz3.3), then hardened with the
+ * MOS reveal fixes (jatui-jtip4, from mardukos's `src/lib/actions/reveal.ts`):
+ *
+ * 1. **threshold defaults to 0** (was 0.1). A tall element in a short
+ *    viewport — a 9000px email preview in an 800px pane — can only ever
+ *    intersect ~8%, so a fractional default made it sit at `opacity: 0`
+ *    forever (the blank-reading-pane bug). Elements still opt into a
+ *    fractional threshold explicitly.
+ * 2. **zero-area guard**: an entry whose `boundingClientRect` is 0×0 means
+ *    the element sits inside a `display: none` subtree — that is not
+ *    "below the fold", and waiting for an intersection that can't be
+ *    trusted left routed panes permanently blank. Such entries reveal
+ *    immediately *without* the entrance (fail visible).
+ * 3. **entrance classes are stripped on `animationend`**:
+ *    `animation-fill-mode: both` keeps the animation's `transform` applied
+ *    after it finishes, which silently turns the node into the containing
+ *    block for `position: fixed` descendants (tiptap drag handles and other
+ *    overlays land wrong). Removing `.jatui-reveal` + the variant class once
+ *    the entrance has played restores a transform-free node. Bubbled
+ *    `animationend`s from children and unrelated animations are ignored.
+ *
+ * MOS extras also ported:
+ *
+ * - **delay normalization + stagger cap** — `delay < 1` is seconds (the
+ *   chimaro contract: `0.2` = 200ms); `delay >= 1` is read as milliseconds
+ *   (ported call sites keep passing `200`/`500`). Either way the effective
+ *   wait is capped at {@link REVEAL_MAX_DELAY_SECONDS} (0.3s), so a unit
+ *   mix-up or an over-long stagger can never hold content invisible.
+ * - **`data-reveal="off"` surface switch** — any ancestor carrying the
+ *   attribute opts its whole subtree out of reveal: the action no-ops and
+ *   the content simply renders visible.
+ * - **paint-first (below-fold-only entrances)** — if the observer's very
+ *   first delivery reports the element already intersecting (hydration or
+ *   first layout: it was painted in view), it is revealed *without* the
+ *   entrance instead of replaying an animation over content the user can
+ *   already see. Only content that actually starts below the fold animates.
+ *   The check rides the observer itself, so clipping by an inner scroller is
+ *   respected (rows scrolled out of a scroll box still animate when the box
+ *   scrolls them into view).
+ * - **live `prefers-reduced-motion` listener** — the media query is watched
+ *   for the lifetime of the action; switching to reduce while nodes are
+ *   still hidden reveals them immediately (no entrance) and unobserves.
+ *
+ * The public API stays chimaro-compatible (animation / delay / threshold) so
+ * chimaro's local copy stays deletable in favor of this import — but the
+ * animista.css dependency is NOT shipped: each named variant remaps onto a
+ * `jatui-reveal-*` class in `jatui/styles/motion.css`, whose keyframes and
+ * timing are built entirely from the `--motion-*` tokens.
  *
  * Usage:
  *   <div use:reveal>                                → fade-in-bottom on scroll
@@ -15,23 +57,42 @@
  *   <div use:reveal={{ delay: 0.2 }}>               → 200ms staggered delay
  *   <div use:reveal={{ threshold: 0.3 }}>           → triggers at 30% visibility
  *
- * Note: `delay` is in SECONDS (chimaro's contract — CSS animation-delay
- * units), unlike staggerEntrance's ms-based options. Use fractional values
- * for staggers (0.2 = 200ms).
+ * Opt a subtree out entirely: `<section data-reveal="off">…</section>`.
  */
 export type RevealVariant = 'fade-in' | 'fade-in-bottom' | 'fade-in-top' | 'fade-in-left' | 'fade-in-right' | 'scale-in-center';
 export interface RevealOptions {
     /** Named entrance variant, rendered by a `jatui-reveal-*` class in motion.css. Default 'fade-in-bottom'. */
     animation?: RevealVariant;
-    /** Delay in SECONDS before the entrance runs (fill mode holds the from-state during the wait). Default 0. */
+    /**
+     * Delay before the entrance runs. Values below 1 are SECONDS (chimaro's
+     * contract — CSS animation-delay units: 0.2 = 200ms); values ≥ 1 are read
+     * as MILLISECONDS (250 → 0.25s). The effective wait is capped at
+     * {@link REVEAL_MAX_DELAY_SECONDS} so content is never held invisible.
+     * Default 0.
+     */
     delay?: number;
-    /** Fraction of the element that must be visible before revealing (0–1). Default 0.1. */
+    /**
+     * Fraction of the element that must be visible before revealing (0–1).
+     * Default 0 — any intersection counts, so tall elements in short
+     * viewports still reveal (a fractional default strands them at opacity 0).
+     */
     threshold?: number;
 }
 /** Class applied while the element is waiting to be revealed (opacity: 0). */
 export declare const REVEAL_HIDDEN_CLASS = "jatui-reveal-hidden";
 /** Base class carrying the token-driven duration/easing/fill. */
 export declare const REVEAL_BASE_CLASS = "jatui-reveal";
+/**
+ * Selector that switches reveal off for a subtree: any ancestor carrying
+ * `data-reveal="off"` makes the action a no-op for nodes inside it.
+ */
+export declare const REVEAL_OFF_SELECTOR = "[data-reveal=\"off\"]";
+/**
+ * Cap (in seconds) on how long any reveal may hold its content hidden before
+ * the entrance starts — keeps unit mix-ups and long stagger trains from
+ * blanking content.
+ */
+export declare const REVEAL_MAX_DELAY_SECONDS = 0.3;
 export declare function reveal(node: HTMLElement, options?: RevealOptions): {
     destroy(): void;
 };

package/dist/actions/reveal.js

@@ -2,40 +2,129 @@
 export const REVEAL_HIDDEN_CLASS = 'jatui-reveal-hidden';
 /** Base class carrying the token-driven duration/easing/fill. */
 export const REVEAL_BASE_CLASS = 'jatui-reveal';
+/**
+ * Selector that switches reveal off for a subtree: any ancestor carrying
+ * `data-reveal="off"` makes the action a no-op for nodes inside it.
+ */
+export const REVEAL_OFF_SELECTOR = '[data-reveal="off"]';
+/**
+ * Cap (in seconds) on how long any reveal may hold its content hidden before
+ * the entrance starts — keeps unit mix-ups and long stagger trains from
+ * blanking content.
+ */
+export const REVEAL_MAX_DELAY_SECONDS = 0.3;
 function variantClass(animation) {
     return `${REVEAL_BASE_CLASS}-${animation}`;
 }
+/**
+ * Normalize a delay option to seconds under the stagger cap. `< 1` is
+ * seconds (chimaro contract), `≥ 1` is read as milliseconds — call sites
+ * ported from ms-based APIs pass `200` meaning 0.2s, not 200s.
+ */
+function normalizeDelay(delay) {
+    if (!delay || delay <= 0)
+        return 0;
+    const seconds = delay >= 1 ? delay / 1000 : delay;
+    return Math.min(seconds, REVEAL_MAX_DELAY_SECONDS);
+}
+/** A 0×0 rect means the element is inside a `display: none` subtree. */
+function isZeroArea(rect) {
+    return !!rect && rect.width === 0 && rect.height === 0;
+}
 export function reveal(node, options) {
     const animation = options?.animation ?? 'fade-in-bottom';
-    const threshold = options?.threshold ?? 0.1;
-    // Respect prefers-reduced-motion: skip the animation entirely, show content.
-    const prefersReducedMotion = typeof window !== 'undefined' &&
-        window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    const threshold = options?.threshold ?? 0;
+    const variant = variantClass(animation);
     // No window (SSR) or no IntersectionObserver: stay visible, do nothing.
-    const canObserve = !prefersReducedMotion &&
-        typeof window !== 'undefined' &&
-        typeof IntersectionObserver !== 'undefined';
-    if (!canObserve) {
+    if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') {
+        return { destroy() { } };
+    }
+    // Surface switch: an ancestor with data-reveal="off" opts the whole
+    // subtree out — content renders visible with no entrance, ever.
+    if (node.closest?.(REVEAL_OFF_SELECTOR)) {
+        return { destroy() { } };
+    }
+    // Respect prefers-reduced-motion: skip the animation entirely, show content.
+    const motionQuery = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+    if (motionQuery?.matches) {
         return { destroy() { } };
     }
     node.classList.add(REVEAL_HIDDEN_CLASS);
-    if (options?.delay) {
-        node.style.animationDelay = `${options.delay}s`;
+    const delay = normalizeDelay(options?.delay);
+    if (delay > 0) {
+        node.style.animationDelay = `${delay}s`;
     }
+    // Strip the entrance classes once the animation has played: fill-mode:both
+    // would otherwise leave a computed transform on the node, making it the
+    // containing block for position:fixed descendants (overlays land wrong).
+    // Attached only when an entrance actually runs; bubbled animationends from
+    // descendants and unrelated animations are ignored.
+    const stripEntrance = (event) => {
+        if (event.target !== node)
+            return; // bubbled from a descendant
+        if (!event.animationName?.startsWith(`${REVEAL_BASE_CLASS}-`))
+            return; // unrelated animation
+        node.classList.remove(REVEAL_BASE_CLASS, variant);
+        node.removeEventListener('animationend', stripEntrance);
+    };
+    const bareReveal = () => {
+        // Fail visible: drop the hidden class with no entrance. The inline
+        // animation-delay is meaningless without the entrance — clear it too.
+        node.classList.remove(REVEAL_HIDDEN_CLASS);
+        if (delay > 0)
+            node.style.animationDelay = '';
+        observer.unobserve(node);
+    };
+    const entranceReveal = () => {
+        node.classList.remove(REVEAL_HIDDEN_CLASS);
+        node.classList.add(REVEAL_BASE_CLASS, variant);
+        node.addEventListener('animationend', stripEntrance);
+        observer.unobserve(node);
+    };
+    // Live prefers-reduced-motion: if the user switches to reduce while this
+    // node is still hidden, show it immediately (no entrance) and stop watching.
+    const onMotionChange = () => {
+        if (motionQuery?.matches)
+            bareReveal();
+    };
+    motionQuery?.addEventListener?.('change', onMotionChange);
+    // True until the observer's first delivery has been processed — an element
+    // already intersecting on that first look was painted in view, so it gets
+    // no entrance (paint-first: below-fold-only entrances).
+    let firstDelivery = true;
     const observer = new IntersectionObserver((entries) => {
         for (const entry of entries) {
+            // Zero-area guard: 0×0 = display:none subtree, not below-the-fold.
+            // Reveal without the entrance so a routed pane can never sit at
+            // opacity: 0 permanently.
+            if (isZeroArea(entry.boundingClientRect)) {
+                bareReveal();
+                return;
+            }
             if (entry.isIntersecting) {
-                node.classList.remove(REVEAL_HIDDEN_CLASS);
-                node.classList.add(REVEAL_BASE_CLASS, variantClass(animation));
-                observer.unobserve(node);
+                if (firstDelivery) {
+                    // Paint-first: visible at the observer's first look (hydration
+                    // or first layout) → no entrance over already-seen content.
+                    // Rides the observer, so inner-scroller clipping is respected.
+                    bareReveal();
+                }
+                else {
+                    entranceReveal();
+                }
+                return;
             }
         }
+        // First delivery said "not visible" — later intersections are real
+        // scroll-ins and get the entrance.
+        firstDelivery = false;
     }, { threshold });
     observer.observe(node);
     return {
         destroy() {
             observer.disconnect();
-            node.classList.remove(REVEAL_HIDDEN_CLASS, REVEAL_BASE_CLASS, variantClass(animation));
+            node.removeEventListener('animationend', stripEntrance);
+            motionQuery?.removeEventListener?.('change', onMotionChange);
+            node.classList.remove(REVEAL_HIDDEN_CLASS, REVEAL_BASE_CLASS, variant);
             node.style.animationDelay = '';
         },
     };

package/dist/components/AudioRecorder.svelte

@@ -2,7 +2,7 @@
 	// The capture pipeline lives in the headless factory (jatui-is2ow.8) —
 	// this component is its markup. Re-exported here so consumers importing
 	// the type from the component keep working.
-	export type { AudioRecordingResult } from '../utils/audioRecorderCore'
+	export type { AudioRecordingResult, AudioRecorderChunk } from '../utils/audioRecorderCore'
 
 	/** m:ss zero-padded seconds — shared format for the timer display. */
 	export function formatDuration(totalSeconds: number): string {
@@ -55,6 +55,10 @@
 		variant?: 'small' | 'large'
 		/** Auto-stop ceiling in ms. 0 (default) records until stopped manually. */
 		maxDurationMs?: number
+		/** Timeslice in ms passed to MediaRecorder.start() — each chunk fires
+		 * `onRecordChunk` as it arrives (restartable dictation, streaming
+		 * transcription). Default 1000; 0 records a single blob until stop. */
+		timesliceMs?: number
 		disabled?: boolean
 		/** Fired once the mic stream is live and recording has started. */
 		onRecordStart?: () => void
@@ -66,6 +70,14 @@
 		onRecordStop?: (result: AudioRecordingResult) => void | Promise<void>
 		/** Fired when the user cancels — no blob is produced. */
 		onRecordCancel?: () => void
+		/** Fired per MediaRecorder chunk as it arrives (every `timesliceMs`, plus
+		 * a final shorter chunk at stop). The take still accumulates for
+		 * `onRecordStop` — full take AND a live chunk stream (jatui-ft2ot). */
+		onRecordChunk?: (chunk: AudioRecorderChunk) => void
+		/** Fired with the live mic MediaStream once recording starts, and with
+		 * null when it is released — for hosts that attach the raw stream
+		 * (WebRTC, a custom MediaRecorder). */
+		onRecordStream?: (stream: MediaStream | null) => void
 		/** Fired on recorder errors (permission denied, no mic, start failure). */
 		onError?: (message: string) => void
 		class?: string
@@ -74,12 +86,15 @@
 	let {
 		variant = 'small',
 		maxDurationMs = 0,
+		timesliceMs = 1000,
 		disabled = false,
 		onRecordStart,
 		onRecordPause,
 		onRecordResume,
 		onRecordStop,
 		onRecordCancel,
+		onRecordChunk,
+		onRecordStream,
 		onError,
 		class: className = ''
 	}: Props = $props()
@@ -92,11 +107,13 @@
 	const rec = createAudioRecorder({
 		mode: 'toggle',
 		maxDurationMs,
+		timesliceMs,
 		onStart: onRecordStart,
 		onPause: onRecordPause,
 		onResume: onRecordResume,
 		onStop: onRecordStop,
 		onCancel: onRecordCancel,
+		onChunk: onRecordChunk,
 		onError: (err) => {
 			if (err.kind === 'denied') permissionDenied = true
 			onError?.(err.message)
@@ -297,6 +314,11 @@
 		}
 	})
 
+	// Notify stream-access hosts on every acquire/release (jatui-ft2ot).
+	$effect(() => {
+		onRecordStream?.(rec.stream)
+	})
+
 	// Space toggles pause/resume while recording (chimaro behaviour).
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.code === 'Space' && phase === 'recording' && variant === 'large') {

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

@@ -1,4 +1,4 @@
-export type { AudioRecordingResult } from '../utils/audioRecorderCore';
+export type { AudioRecordingResult, AudioRecorderChunk } from '../utils/audioRecorderCore';
 /** m:ss zero-padded seconds — shared format for the timer display. */
 export declare function formatDuration(totalSeconds: number): string;
 /** 1.2 KB / 3.4 MB style byte formatting for the size readout. */
@@ -8,6 +8,10 @@ interface Props {
     variant?: 'small' | 'large';
     /** Auto-stop ceiling in ms. 0 (default) records until stopped manually. */
     maxDurationMs?: number;
+    /** Timeslice in ms passed to MediaRecorder.start() — each chunk fires
+     * `onRecordChunk` as it arrives (restartable dictation, streaming
+     * transcription). Default 1000; 0 records a single blob until stop. */
+    timesliceMs?: number;
     disabled?: boolean;
     /** Fired once the mic stream is live and recording has started. */
     onRecordStart?: () => void;
@@ -19,6 +23,14 @@ interface Props {
     onRecordStop?: (result: AudioRecordingResult) => void | Promise<void>;
     /** Fired when the user cancels — no blob is produced. */
     onRecordCancel?: () => void;
+    /** Fired per MediaRecorder chunk as it arrives (every `timesliceMs`, plus
+     * a final shorter chunk at stop). The take still accumulates for
+     * `onRecordStop` — full take AND a live chunk stream (jatui-ft2ot). */
+    onRecordChunk?: (chunk: AudioRecorderChunk) => void;
+    /** Fired with the live mic MediaStream once recording starts, and with
+     * null when it is released — for hosts that attach the raw stream
+     * (WebRTC, a custom MediaRecorder). */
+    onRecordStream?: (stream: MediaStream | null) => void;
     /** Fired on recorder errors (permission denied, no mic, start failure). */
     onError?: (message: string) => void;
     class?: string;

package/dist/components/BulkActionBar.svelte

@@ -21,6 +21,13 @@
 	 * `isTypingTarget`), for modifier combos and for non-printable keys.
 	 * The key also renders as a `<kbd>` hint on the button.
 	 *
+	 * Per-action `disabled` and `loadingText` (upstreamed from mardukos
+	 * BulkActionBar): when `disabled` is true the button renders dimmed and
+	 * non-interactive; when `loadingText` is set the button is disabled and
+	 * shows a spinner + that text instead of its label while the action is
+	 * in flight — other actions stay interactive. Global `loading` +
+	 * `loadingMessage` still take precedence over per-action state.
+	 *
 	 * While `loadingMessage` is set, the buttons are replaced by a spinner +
 	 * message row (matches the IDE's BulkActionBar fork).
 	 *
@@ -34,7 +41,8 @@
 	 *       selection={nav.selection}
 	 *       actions={[
 	 *         { label: 'Assign',  onSelect: () => assignBulk(nav.selection) },
-	 *         { label: 'Delete',  onSelect: () => deleteBulk(nav.selection), destructive: true },
+	 *         { label: 'Delete',  onSelect: () => deleteBulk(nav.selection), destructive: true, disabled: !canDelete },
+	 *         { label: 'Send',    onSelect: () => sendBulk(nav.selection), loadingText: 'Sending…' },
 	 *       ]}
 	 *       onClear={() => nav.clearSelection()}
 	 *     />
@@ -71,6 +79,11 @@
 		destructive?: boolean;
 		/** Semantic variant override — takes precedence over `destructive`. */
 		variant?: ActionButton['variant'];
+		/** Dimmed, non-interactive button (upstreamed from mardukos). */
+		disabled?: boolean;
+		/** When set, the button is disabled and shows a spinner + this text
+		 * while the action is in flight (upstreamed from mardukos). */
+		loadingText?: string | null;
 		/** Unique key (defaults to label). */
 		id?: string;
 	}
@@ -135,6 +148,8 @@
 			key: a.key,
 			variant: a.variant ?? (a.destructive ? 'danger' : 'default'),
 			onclick: a.onSelect,
+			disabled: a.disabled,
+			loadingText: a.loadingText,
 		})),
 	);
 
@@ -143,7 +158,7 @@
 	// typing targets, modifier combos and non-printable keys never fire.
 	$effect(() => {
 		if (count === 0 || loading || loadingMessage) return;
-		const hotkeyed = actions.filter((a) => a.key);
+		const hotkeyed = actions.filter((a) => a.key && !a.disabled && !a.loadingText);
 		if (hotkeyed.length === 0) return;
 		function onKeydown(event: KeyboardEvent) {
 			const action = matchBulkHotkey(event, hotkeyed);

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

@@ -14,6 +14,11 @@ export interface BulkAction {
     destructive?: boolean;
     /** Semantic variant override — takes precedence over `destructive`. */
     variant?: ActionButton['variant'];
+    /** Dimmed, non-interactive button (upstreamed from mardukos). */
+    disabled?: boolean;
+    /** When set, the button is disabled and shows a spinner + this text
+     * while the action is in flight (upstreamed from mardukos). */
+    loadingText?: string | null;
     /** Unique key (defaults to label). */
     id?: string;
 }

package/dist/components/Drawer.svelte

@@ -3,6 +3,9 @@
 	 * Drawer Component
 	 *
 	 * Sliding panel overlay with backdrop, escape key, and header actions.
+	 * Supports a `footer` snippet (pinned below the scrollable body —
+	 * matches mardukos DrawerShell) and an arbitrary Tailwind `width`
+	 * class (e.g. `'w-[42rem]'`) which takes precedence over `size`.
 	 */
 
 	import { untrack, type Snippet } from 'svelte';
@@ -13,6 +16,10 @@
 		title?: string;
 		position?: 'left' | 'right';
 		size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+		/** Arbitrary Tailwind width class (e.g. `'w-[42rem]'`). Takes precedence
+		 * over `size`. Pins the panel to a named breakpoint if combined with one,
+		 * so you don't need `max-w-[100vw]` guards for mobile. */
+		width?: string;
 		showCloseButton?: boolean;
 		contentClass?: string;
 		/**
@@ -37,6 +44,10 @@
 		onclose?: () => void;
 		class?: string;
 		headerActions?: Snippet;
+		/** Pinned below the scrollable content area (matches mardukos DrawerShell
+		 * `footer` — action rows / submit buttons that must stay visible while
+		 * the body scrolls). */
+		footer?: Snippet;
 		children?: Snippet;
 	}
 
@@ -45,6 +56,7 @@
 		title = '',
 		position = 'right',
 		size = 'md',
+		width,
 		showCloseButton = true,
 		contentClass = '',
 		trapKeys = true,
@@ -53,6 +65,7 @@
 		onclose,
 		class: className = '',
 		headerActions,
+		footer,
 		children
 	}: Props = $props();
 
@@ -118,7 +131,7 @@
 <div
 	class="fixed top-0 {position === 'right'
 		? 'right-0'
-		: 'left-0'} h-full bg-base-200 {position === 'right' ? 'border-l' : 'border-r'} border-base-300 {sizeClasses[size]} flex flex-col transition-all duration-300 {open
+		: 'left-0'} h-full bg-base-200 {position === 'right' ? 'border-l' : 'border-r'} border-base-300 {width || sizeClasses[size]} flex flex-col transition-all duration-300 {open
 		? 'z-[101] translate-x-0'
 		: '-z-10 ' + (position === 'right' ? 'translate-x-full' : '-translate-x-full')} {className}"
 	role="dialog"
@@ -157,4 +170,10 @@
 			{@render children()}
 		{/if}
 	</div>
+
+	{#if footer}
+		<div class="flex-shrink-0 border-t border-base-content/10">
+			{@render footer()}
+		</div>
+	{/if}
 </div>

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

@@ -2,6 +2,9 @@
      * Drawer Component
      *
      * Sliding panel overlay with backdrop, escape key, and header actions.
+     * Supports a `footer` snippet (pinned below the scrollable body —
+     * matches mardukos DrawerShell) and an arbitrary Tailwind `width`
+     * class (e.g. `'w-[42rem]'`) which takes precedence over `size`.
      */
 import { type Snippet } from 'svelte';
 import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
@@ -10,6 +13,10 @@ interface Props {
     title?: string;
     position?: 'left' | 'right';
     size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    /** Arbitrary Tailwind width class (e.g. `'w-[42rem]'`). Takes precedence
+     * over `size`. Pins the panel to a named breakpoint if combined with one,
+     * so you don't need `max-w-[100vw]` guards for mobile. */
+    width?: string;
     showCloseButton?: boolean;
     contentClass?: string;
     /**
@@ -34,6 +41,10 @@ interface Props {
     onclose?: () => void;
     class?: string;
     headerActions?: Snippet;
+    /** Pinned below the scrollable content area (matches mardukos DrawerShell
+     * `footer` — action rows / submit buttons that must stay visible while
+     * the body scrolls). */
+    footer?: Snippet;
     children?: Snippet;
 }
 declare const Drawer: import("svelte").Component<Props, {}, "open">;

package/dist/components/FloatingActionBar.svelte

@@ -16,6 +16,10 @@
 	 * the matching keydown handling lives in the host/BulkActionBar). While
 	 * `loading` with a `loadingMessage` set, the buttons are replaced by a
 	 * spinner + message row (matching the IDE's fork, audit jat-1alfp #15).
+	 *
+	 * Per-action `disabled` renders the button dimmed and non-interactive;
+	 * per-action `loadingText` disables it and swaps the label for a
+	 * spinner + that text (mardukos fork) while other actions stay active.
 	 */
 
 	import { fade } from 'svelte/transition';
@@ -33,6 +37,11 @@
 		key?: string;
 		/** Called when clicked */
 		onclick: () => void;
+		/** Dimmed, non-interactive button (mardukos). */
+		disabled?: boolean;
+		/** When set, the button is disabled and shows a spinner + this text
+		 * instead of the label (mardukos per-action loading). */
+		loadingText?: string | null;
 	}
 
 	export interface DropdownItem {
@@ -136,18 +145,24 @@
 					type="button"
 					class="fab-btn {variantClass(action.variant)}"
 					onclick={action.onclick}
-					disabled={loading}
-					title={action.key ? `${action.label} (${action.key})` : undefined}
+					disabled={loading || action.disabled || !!action.loadingText}
+					aria-busy={loading || !!action.loadingText || undefined}
+					title={action.key && !action.disabled && !action.loadingText ? `${action.label} (${action.key})` : undefined}
 				>
-					{#if action.icon}
-						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
-							<!-- svelte-ignore a11y_consider_explicit_label -->
-							{@html action.icon}
-						</svg>
-					{/if}
-					{action.label}
-					{#if action.key}
-						<kbd class="fab-key">{action.key}</kbd>
+					{#if action.loadingText}
+						<span class="fab-spinner"></span>
+						<span class="fab-loading-msg">{action.loadingText}</span>
+					{:else}
+						{#if action.icon}
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+								<!-- svelte-ignore a11y_consider_explicit_label -->
+								{@html action.icon}
+							</svg>
+						{/if}
+						{action.label}
+						{#if action.key}
+							<kbd class="fab-key">{action.key}</kbd>
+						{/if}
 					{/if}
 				</button>
 			{/each}

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

@@ -11,6 +11,11 @@ export interface ActionButton {
     key?: string;
     /** Called when clicked */
     onclick: () => void;
+    /** Dimmed, non-interactive button (mardukos). */
+    disabled?: boolean;
+    /** When set, the button is disabled and shows a spinner + this text
+     * instead of the label (mardukos per-action loading). */
+    loadingText?: string | null;
 }
 export interface DropdownItem {
     /** Display label */