@joewinke/jatui 0.39.0 → 0.40.0

package/CLAUDE.md

@@ -22,9 +22,10 @@ Then import:
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
 | `TextInput` | Text input with label, error, icon slots | `label`, `value` (bindable), `placeholder`, `error`, `disabled` |
-| `TextArea` | Multiline text input | `label`, `value` (bindable), `placeholder`, `rows`, `error`, `maxlength` |
+| `TextArea` | Multiline text input. Auto-grow (`autoResize`, or implied by `maxRows`) grows a whole line at a time from `minRows` (default `rows`) to `maxRows`, then scrolls — CSS `field-sizing: content` where supported, row-quantized JS fallback (`textareaRowsHeight`) elsewhere. | `label`, `value` (bindable), `placeholder`, `rows`, `minRows?`, `maxRows?`, `autoResize?`, `error`, `maxlength` |
 | `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` |
+| `PinInput` | One box per character for PINs and one-time codes. Every cell is `autocomplete="one-time-code"` with no maxlength, so SMS autofill / WebOTP (which drop the whole code into the focused cell) fill all cells from the first; paste distributes from the caret; `dir="ltr"`, `inputmode`/`pattern` numeric. Pure helpers: `applyPinCellInput`, `distributePin`, `isPinComplete`. | `value` (bindable), `length` (6), `numeric`, `masked`, `name?`, `autocomplete?` (`one-time-code`), `error`, `label`, `oncomplete` |
 | `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. `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) |
@@ -56,13 +57,16 @@ Then import:
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
 | `Button` | Styled button with variants | `variant`, `size`, `loading`, `disabled`, `onclick` |
+| `IconButton` | Icon-only button with a **required** `label` (the aria-label; also the tooltip text with `tooltip`). Square/circle, toggle `pressed` (aria-pressed + selection surface), `href` → `<a>`, `variant="overlay"` for chrome over media. Use instead of hand-written `btn btn-sm btn-circle btn-ghost`. | `label`, `variant?` (ghost\|outline\|soft\|primary\|secondary\|error\|overlay), `size?`, `shape?` ('square'\|'circle'), `pressed?`, `tooltip?: boolean \| string`, `href?`, `children` (icon) |
+| `CloseButton` | The one ✕ for dialogs, drawers, sheets, toasts and lightboxes — an IconButton with a built-in X whose stroke is a true CSS pixel at every size. Modal, Drawer, BottomSheet and MediaLightbox use it. | `label?` ('Close'), `size?` ('sm'), `variant?`, `shape?` ('circle'), `tooltip?`, `onclick` |
+| `LinkButton` | Text action styled as a link: `<a>` with `href`, `<button>` without; underline on hover (or always). `external` adds new-tab + rel=noopener + an SR hint. | `href?`, `tone?` (inherit\|primary\|muted\|error), `size?`, `underline?`, `external?`, `disabled?`, `onclick?`, `children` |
 | `ProgressButton` | Multi-phase async submit button (upstreamed from the JAT IDE): walks through the **named phases** of the work (`phases: [{key,label}]` in order) instead of a blank spinner — spinner + current phase label with shimmer, a fill bar that advances to `(index+1)/N`, disabled while busy, green check-flash on `success`. Caller owns the state machine (`phase` / `success`). Renders through the shared `Button`, so `class` composes with join patterns. | `phase?` (null = idle), `phases?: Phase[]`, `idleLabel?`, `success?`, `successLabel?`, `variant?`, `size?`, `disabled?`, `type?`, `class?`, `onclick?`, `children` |
 | `Badge` | Status/label badge | `variant`, `size`, `children` (snippet) |
 | `StatusBadge` | Status indicator with dot | `status: StatusValue`, `label` |
 | `Card` | Content card container | `title`, `children` (snippet) |
 | `Modal` | Dialog overlay. `zIndex` accepts `number` OR any CSS `z-index` string, including `"var(--z-lightbox)"`. **Escape is owned by the dialog element itself** (not the window handler) — Modal focuses the dialog on open, so `trapKeys`' stopPropagation would otherwise swallow Esc before the window listener sees it; a Modal opened inside a host Drawer closes before the drawer. The component ships its own open-state `.modal-box` opacity rule, so it renders under DaisyUI 5 with no host global override. | `open` (bindable), `title`, `children` (snippet), `zIndex?: string \| number`, `trapKeys?`, `closeOnEscape?` |
 | `ConfirmModal` | Yes/no confirmation dialog | `open` (bindable), `title`, `message`, `onConfirm`, `onCancel` |
-| `Drawer` | Slide-out side panel | `open` (bindable), `side`, `children` (snippet) |
+| `Drawer` | Slide-out side panel. Header ✕ is a `CloseButton`; the body carries `use:scrollEdge` (opt out with `scrollEdge={false}`). | `open` (bindable), `side`, `scrollEdge?`, `children` (snippet) |
 | `LoadingSpinner` | Spinner animation | `size`, `color` |
 | `Sparkline` | Inline mini chart | `data: number[]`, `width`, `height`, `color` |
 | `LazyImage` | Image with lazy loading + placeholder | `src`, `alt`, `placeholder` |
@@ -220,11 +224,13 @@ import { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from 'jatui
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
 | `PageHeader` | The standard route header (upstreamed from the JAT IDE): uppercase/tracked "instrument label" title + slots for a count chip, subtitle, leading `icon` snippet, right-aligned `actions` cluster, `meta` metrics strip and content below the header row. `sticky` pins it to the top of the scroll container; `size='lg'` for landing screens. All color via `--color-*` tokens; entrance animation reduced-motion gated (`animate`, default off). | `title`, `subtitle?`, `count?`, `size?` ('md'\|'lg'), `sticky?`, `animate?`, `icon?`/`actions?`/`meta?`/`children` (snippets) |
+| `Breadcrumb` | Location trail in a `<nav aria-label>`; the last item is `aria-current="page"`. `maxItems` keeps the root + the last `maxItems - 1` and folds the middle into a `…` button whose menu lists the hidden levels (arrows/Home/End/Escape, click-outside; pure `collapseBreadcrumb`). Leading icons via `item.icon` (component taking `{size,class}`) or the `icon` snippet. | `items: BreadcrumbItem[]`, `maxItems?`, `icon?` (snippet `(item, i)`), `ariaLabel?` |
 | `ResizablePanel` | Resizable container | `minWidth`, `maxWidth`, `defaultWidth` |
 | `ResizableDivider` | Drag handle between panels | `onResize` |
 | `InfiniteGrid` | Cursor-paged infinite-scroll grid (from chimaro). `loadMore(cursor, {signal})` resolves `{items, nextCursor, total?}` (`nextCursor: null` = end); cells render through the `renderItem(item, i)` snippet. Change `resetKey` to start over — the in-flight page is aborted and a late page for the old key is dropped. One request in flight; items de-duped by `getKey`; short pages auto-chain until the sentinel leaves the screen; distinct skeleton / empty / exhausted / error(+Retry) states; non-item rows are `overflow-anchor: none` so scroll anchoring can't runaway-load. Scroll root = `root` or nearest scrollable ancestor. Exposes `reset()`/`retry()`. Not virtualized. Pure core: `createInfiniteLoader`. | `loadMore`, `renderItem` (snippet), `getKey?`, `resetKey?`, `columns?` / `minItemWidth?`, `gap?`, `root?`, `loadAhead?` (400px), `skeleton?`/`empty?`/`end?`/`error?` (snippets), `emptyText?`, `endText?`, `onStateChange?` |
 | `InfiniteSearchGrid` | Search box + `InfiniteGrid`. Query is debounced, then becomes the grid's `resetKey` (Enter commits now, Escape clears). Below `minQueryLength` no request is made and `prompt` shows. All other `InfiniteGrid` props pass through. | `search(query, cursor, {signal})`, `renderItem` (snippet), `query` (bindable), `debounceMs?` (300), `minQueryLength?` (0), `placeholder?`, `noResultsText?`/`noResults?`, `prompt?`/`promptText?`, `toolbar?` (snippet) |
 | `SectionNav` | Sticky in-page section index for long single-column pages — vertical rail beside the content on xl+, wrapping chip row above it below xl. Built-in scroll-spy (omit `activeId` and it just works; `bind:activeId` to observe/control — the spy writes back to it): on every observer callback + rAF-throttled scroll/resize it measures ALL sections and activates the last one whose top is at/above the activation line (`activationRatio`, default 0.3 of the scroller height); at the bottom of the page the last section wins. Clicking an item activates it immediately and holds the spy off until the smooth scroll lands (`scrollend`, or 800ms after the last scroll event); reduced-motion scrolls instantly. Pure decision fn exported as `computeActiveSection(rects, viewport, scroll, ratio?)`. Amber dot per `dirtyIds` marks sections holding unsaved edits. `go()` scrolls AND moves focus so keyboard/SR users land where the click did. j/k/Enter via `listNav`. Layout contract: parent is a `flex flex-wrap gap-8 items-start` row, content column `flex-1 min-w-0`; sections need `id` + `scroll-mt-*`. | `sections: {id,label}[]`, `activeId?` (bindable), `dirtyIds?: Set<string>`, `ariaLabel?`, `spy?`, `activationRatio?` (0.3) |
+| `use:scrollEdge` (action) | Progressive-blur fade on a scroll region's edge once content scrolls under it: a stationary `aria-hidden` sticky strip inside the scroller with two masked backdrop-blur layers + a surface→transparent gradient, each ramping opacity 0→1 over the first `size` px of scroll distance (nothing drawn at rest). Keep headers OUTSIDE the scroller; chat threads (stick-to-bottom) want `edges: 'bottom'`. Opacity-only, reduced-motion safe. Pure: `edgeOpacity`, `edgeDistances`. | `edges?` ('top'\|'bottom'\|'both'), `size?` (24), `surface?` (`--jatui-surface`), `blur?` (true), `enabled?` |
 
 **Windowing (subpath: `jatui/virtual`, optional peer `@tanstack/virtual-core`).** `createRowWindow(opts)` is headless variable-height windowing built on **spacer rows**, not absolute positioning, so it works inside a `<table>` and keeps `table-layout: fixed` and sticky `<thead>`s. It returns reactive `items` (`{index, key, start, size, end, gapBefore, sticky, pinned}`), `paddingTop`, `paddingBottom`, `totalSize` and `windowed`, plus `use:win.anchor` (on the `<tbody>` or list container, whose top is item 0's top) and `use:win.measure={item.key}` (on each item; a shared ResizeObserver re-measures it). Reading a row's height for the first time, or later re-measuring one above the viewport, shifts `scrollTop` by the delta so nothing jumps. The anchor gets `overflow-anchor: none` so native scroll anchoring doesn't correct the shift a second time. The options are reactive getters: `count`, `getKey`, `estimateSize`, `pinned()` (keys kept rendered, e.g. an open editor or exiting row), `stickyIndices()` (a flat list, or one array per level `[projectHdrs, epicHdrs]`; the active header of each level stays rendered, and an inner header never outlives its outer group), and `threshold` (render everything below N; pass it as a getter to make it reactive). Also `scrollRoot` (`'auto'` = the nearest ancestor that really scrolls, else the window; it re-resolves on resize), `overscan` (6), `scrollPaddingStart/End` and `initialViewportSize` (800; used for SSR and first paint). Methods: `scrollToIndex`/`scrollToKey(…, {align})` (queued until mount), `indexOf`, `remeasure()`. Render `item.gapBefore` as a spacer before the item; it is non-zero only when a pinned or sticky item sits outside the slice. Pure policy helpers are exported too (`extractWindowIndices`, `activeStickyIndices`, `layoutWindow`, `findScrollRoot`, `RowWindowEngine`). Demo: `/components/row-window`.
 
@@ -363,8 +369,8 @@ const callbacks: AnnotationCallbacks = {
 
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
-| `ThemeSelector` | DaisyUI theme switcher with preview dots | `themes`, `defaultTheme`, `dropUp`, `storageKey`, `onThemeChange` |
-| `ThemeToggle` | Icon-only sun<->moon light/dark toggle with an animated morph (transform+opacity on motion tokens; instant under reduced-motion; spring flattens on `data-motion="calm"`). A pure control — flips the bindable `theme` and fires `onchange`; storage stays with the consumer. | `theme` (bindable), `lightTheme`, `darkTheme`, `onchange`, `size` |
+| `ThemeSelector` | DaisyUI theme switcher with preview dots. `reveal` wipes the new theme in from the clicked item (`themeWipe`). | `themes`, `defaultTheme`, `dropUp`, `storageKey`, `onThemeChange`, `reveal?: boolean \| 'hard' \| 'soft'` |
+| `ThemeToggle` | Icon-only sun<->moon light/dark toggle with an animated morph (transform+opacity on motion tokens; instant under reduced-motion; spring flattens on `data-motion="calm"`). A pure control — flips the bindable `theme` and fires `onchange`; storage stays with the consumer. `reveal` runs the flip inside a `themeWipe` circular View Transition from the button (keyboard activation grows from its centre). | `theme` (bindable), `lightTheme`, `darkTheme`, `onchange`, `size`, `reveal?: boolean \| 'hard' \| 'soft'` |
 
 ### Keyboard Navigation
 
@@ -526,6 +532,12 @@ import { groupRows, groupPathKey, type GroupLevel, type GroupedItem } from "jatu
 // groupRows(rows, [{ key: t => t.project }, { key: t => t.epic }], { getRowId, collapsed, label? })
 //   → { kind:'group', key, path, depth, label, rows, count, collapsed } | { kind:'row', row, id, depth, groupPath, position }
 
+// Theme change reveal — circular View Transition from the click (or, for a
+// keyboard activation, the control's centre). Single-flight, level-scaled
+// duration, reduced-motion = instant. ThemeToggle/ThemeSelector `reveal` use it.
+import { themeWipe } from "jatui"
+// themeWipe(event, () => setTheme(next), { edge: 'soft' })  // edge: 'hard' (default) | 'soft'
+
 // Date formatting
 import { formatRelativeTime, formatDate, formatShortDate, formatDateTime } from "jatui"
 
@@ -645,7 +657,13 @@ Three rules keep DaisyUI swappable instead of load-bearing:
    internal skin, like vendored CSS — never part of a component's public
    props/API.
 3. **jatui owns the token layer.** Components consume `--jatui-*`
-   (`styles/tokens.css`: radius/spacing/border) and `--motion-*`
+   (`styles/tokens.css`: radius/spacing/border, plus the colour-intent layer —
+   `--jatui-focus-ring{,-width,-offset}`, `--jatui-surface`, `--jatui-hover-bg`,
+   `--jatui-pressed-bg`, `--jatui-separator`, `--jatui-selection-{bg,edge,solid,solid-fg}`,
+   `--jatui-chart-{1..5,grid,axis}`, `--jatui-event-{1..6}{,-bg,-fg}`,
+   `--jatui-status-{positive,caution,negative,neutral}`; all `color-mix` over DaisyUI
+   semantic vars, re-declared on `[data-theme]` so nested themes recompute — use
+   them with an inline fallback) and `--motion-*`
    (`styles/motion.css`: easing/duration) custom properties. DaisyUI theme
    variables feed INTO those tokens (as fallback-chained inputs), never
    appear directly in component styles for values the tokens cover.

package/THIRD_PARTY_NOTICES.md

@@ -49,3 +49,19 @@ Files adapted from BoardUI free components:
 BoardUI Pro items are not covered by the MIT licence. `AgentTaskList`,
 `Questionnaire` and `ContextMeter` were built from public behaviour only; no Pro
 source was read or copied.
+
+### Wave 1 (jatui-owg2z) — ideas only, written fresh for Svelte 5
+
+None of these files is a close port, so none carries the BoardUI notice. They
+follow ideas from BoardUI's free items:
+
+- `IconButton`, `CloseButton`, `LinkButton`: BoardUI icon-button, close-button
+  and link-button.
+- `use:scrollEdge`: BoardUI's scroll-region progressive-blur guidance.
+- Colour-intent tokens in `styles/tokens.css`: BoardUI's semantic theme vars,
+  reduced to a thin `color-mix` layer over DaisyUI.
+- `PinInput` one-time-code autofill: BoardUI input-otp.
+- `TextArea` `minRows`/`maxRows`: BoardUI textarea.
+- `themeWipe` fixes and `ThemeToggle`/`ThemeSelector` `reveal`: BoardUI theme
+  toggle.
+- `Breadcrumb` `maxItems` and icons: BoardUI breadcrumb.

package/dist/actions/scrollEdge.d.ts

@@ -0,0 +1,55 @@
+/**
+ * scrollEdge — progressive-blur fade on the edge of a scroll region.
+ *
+ *   <div class="overflow-y-auto" use:scrollEdge>…</div>                 top edge
+ *   <div class="overflow-y-auto" use:scrollEdge={{ edges: 'both' }}>…</div>
+ *   <div use:scroller.action use:scrollEdge={{ edges: 'bottom' }}>…</div> chat (stick-to-bottom)
+ *
+ * When content has scrolled under an edge, that edge softens: a stationary,
+ * `pointer-events: none`, `aria-hidden` overlay with three layers —
+ *
+ *   1. a tall band of light backdrop blur (1px), masked to fade out,
+ *   2. a shorter band of heavier blur (4px), masked the same way,
+ *   3. a surface → transparent gradient.
+ *
+ * Each layer's opacity ramps 0 → 1 over the first `size` px of scroll
+ * distance from that edge, so at rest (scrollTop 0) nothing is drawn and
+ * the first line of content is never dimmed. Opacity goes on the LAYERS,
+ * never their parent: a translucent parent becomes a backdrop root and the
+ * blur would sample nothing.
+ *
+ * The overlay lives inside the scroller as a `position: sticky` strip with a
+ * negative margin, so it needs no positioned wrapper and takes no layout
+ * space. Keep headers OUTSIDE the scroller — the edge belongs to the scroll
+ * area, not the chrome above it. Opacity-only, so it is reduced-motion safe.
+ *
+ * Idea from BoardUI's scroll-region guidance (MIT); written fresh.
+ */
+export type ScrollEdgeSide = 'top' | 'bottom' | 'both';
+export interface ScrollEdgeOptions {
+    /** Which edge(s) fade. Default 'top'. Chat threads that stick to the bottom want 'bottom'. */
+    edges?: ScrollEdgeSide;
+    /** Height of the fade band and the scroll distance the ramp runs over, px. Default 24. */
+    size?: number;
+    /** Colour the gradient blends into. Default the `--jatui-surface` token (base-100). */
+    surface?: string;
+    /** Backdrop blur layers. false = gradient only (cheaper on huge lists). Default true. */
+    blur?: boolean;
+    /** Turn it off without unmounting the action. Default true. */
+    enabled?: boolean;
+}
+/** Opacity for an edge given how far content has scrolled past it. Pure. */
+export declare function edgeOpacity(distance: number, size: number): number;
+/** Scroll distance past the top and bottom edges of a scroller. Pure. */
+export declare function edgeDistances(m: {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}): {
+    top: number;
+    bottom: number;
+};
+export declare function scrollEdge(node: HTMLElement, options?: ScrollEdgeOptions): {
+    update(next?: ScrollEdgeOptions): void;
+    destroy(): void;
+};

package/dist/actions/scrollEdge.js

@@ -0,0 +1,144 @@
+/**
+ * scrollEdge — progressive-blur fade on the edge of a scroll region.
+ *
+ *   <div class="overflow-y-auto" use:scrollEdge>…</div>                 top edge
+ *   <div class="overflow-y-auto" use:scrollEdge={{ edges: 'both' }}>…</div>
+ *   <div use:scroller.action use:scrollEdge={{ edges: 'bottom' }}>…</div> chat (stick-to-bottom)
+ *
+ * When content has scrolled under an edge, that edge softens: a stationary,
+ * `pointer-events: none`, `aria-hidden` overlay with three layers —
+ *
+ *   1. a tall band of light backdrop blur (1px), masked to fade out,
+ *   2. a shorter band of heavier blur (4px), masked the same way,
+ *   3. a surface → transparent gradient.
+ *
+ * Each layer's opacity ramps 0 → 1 over the first `size` px of scroll
+ * distance from that edge, so at rest (scrollTop 0) nothing is drawn and
+ * the first line of content is never dimmed. Opacity goes on the LAYERS,
+ * never their parent: a translucent parent becomes a backdrop root and the
+ * blur would sample nothing.
+ *
+ * The overlay lives inside the scroller as a `position: sticky` strip with a
+ * negative margin, so it needs no positioned wrapper and takes no layout
+ * space. Keep headers OUTSIDE the scroller — the edge belongs to the scroll
+ * area, not the chrome above it. Opacity-only, so it is reduced-motion safe.
+ *
+ * Idea from BoardUI's scroll-region guidance (MIT); written fresh.
+ */
+/** Opacity for an edge given how far content has scrolled past it. Pure. */
+export function edgeOpacity(distance, size) {
+    if (!(size > 0) || !Number.isFinite(distance))
+        return 0;
+    return Math.min(1, Math.max(0, distance / size));
+}
+/** Scroll distance past the top and bottom edges of a scroller. Pure. */
+export function edgeDistances(m) {
+    return {
+        top: Math.max(0, m.scrollTop),
+        bottom: Math.max(0, m.scrollHeight - m.clientHeight - m.scrollTop)
+    };
+}
+const DEFAULT_SURFACE = 'var(--jatui-surface, var(--color-base-100, Canvas))';
+function strip(side, o) {
+    const el = document.createElement('div');
+    el.setAttribute('aria-hidden', 'true');
+    el.dataset.scrollEdge = side;
+    const s = el.style;
+    s.position = 'sticky';
+    s.display = 'block';
+    s[side] = '0';
+    s.height = `${o.size}px`;
+    s[side === 'top' ? 'marginBottom' : 'marginTop'] = `-${o.size}px`;
+    s.pointerEvents = 'none';
+    s.zIndex = '1';
+    s.gridColumn = '1 / -1'; // a grid scroller must not give the strip its own cell
+    s.flexShrink = '0';
+    s.alignSelf = 'stretch';
+    const dir = side === 'top' ? 'to bottom' : 'to top';
+    const anchor = side === 'top' ? 'top: 0' : 'bottom: 0';
+    const layers = [];
+    if (o.blur) {
+        layers.push(`${anchor}; height: 100%; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); mask-image: linear-gradient(${dir}, #000, transparent); -webkit-mask-image: linear-gradient(${dir}, #000, transparent)`, `${anchor}; height: 66%; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask-image: linear-gradient(${dir}, #000, transparent); -webkit-mask-image: linear-gradient(${dir}, #000, transparent)`);
+    }
+    layers.push(`${anchor}; height: 100%; background: linear-gradient(${dir}, ${o.surface}, transparent)`);
+    for (const css of layers) {
+        const layer = document.createElement('div');
+        layer.style.cssText = `position: absolute; left: 0; right: 0; ${css}; opacity: var(--jatui-scroll-edge-o, 0); transition: opacity var(--motion-instant, 80ms) linear;`;
+        el.appendChild(layer);
+    }
+    return el;
+}
+export function scrollEdge(node, options = {}) {
+    let opts = resolve(options);
+    let top = null;
+    let bottom = null;
+    let frame = 0;
+    let ro = null;
+    function resolve(o) {
+        return {
+            edges: o.edges ?? 'top',
+            size: o.size ?? 24,
+            surface: o.surface ?? DEFAULT_SURFACE,
+            blur: o.blur ?? true,
+            enabled: o.enabled ?? true
+        };
+    }
+    function measure() {
+        frame = 0;
+        const d = edgeDistances(node);
+        top?.style.setProperty('--jatui-scroll-edge-o', String(edgeOpacity(d.top, opts.size)));
+        bottom?.style.setProperty('--jatui-scroll-edge-o', String(edgeOpacity(d.bottom, opts.size)));
+    }
+    function schedule() {
+        if (frame)
+            return;
+        frame = requestAnimationFrame(measure);
+    }
+    function mount() {
+        unmount();
+        if (!opts.enabled)
+            return;
+        if (opts.edges !== 'bottom') {
+            top = strip('top', opts);
+            node.prepend(top);
+        }
+        if (opts.edges !== 'top') {
+            bottom = strip('bottom', opts);
+            node.append(bottom);
+        }
+        measure();
+    }
+    function unmount() {
+        top?.remove();
+        bottom?.remove();
+        top = bottom = null;
+    }
+    node.addEventListener('scroll', schedule, { passive: true });
+    if (typeof ResizeObserver !== 'undefined') {
+        ro = new ResizeObserver(schedule);
+        ro.observe(node);
+    }
+    // Content growth changes the bottom distance without a scroll event.
+    const mo = typeof MutationObserver !== 'undefined' ? new MutationObserver(schedule) : null;
+    mo?.observe(node, { childList: true, subtree: true, characterData: true });
+    mount();
+    return {
+        update(next = {}) {
+            const prev = opts;
+            opts = resolve(next);
+            const same = Object.keys(opts).every((k) => opts[k] === prev[k]);
+            if (same)
+                schedule();
+            else
+                mount();
+        },
+        destroy() {
+            node.removeEventListener('scroll', schedule);
+            ro?.disconnect();
+            mo?.disconnect();
+            if (frame)
+                cancelAnimationFrame(frame);
+            unmount();
+        }
+    };
+}

package/dist/artifact-blocks/blocks/diagram/DiagramBlock.svelte.d.ts

@@ -6,7 +6,7 @@ declare const DiagramBlock: import("svelte").Component<BlockProps<{
         id: string;
         label: string;
         sublabel?: string | undefined;
-        kind?: "data" | "input" | "output" | "note" | "default" | "decision" | "external" | "terminal" | "process" | "subroutine" | undefined;
+        kind?: "data" | "input" | "output" | "note" | "default" | "external" | "decision" | "terminal" | "process" | "subroutine" | undefined;
         tone?: "error" | "warning" | "info" | "success" | "primary" | "secondary" | "neutral" | "accent" | undefined;
         shape?: "circle" | "rect" | "stadium" | "pill" | "diamond" | undefined;
     }[];

package/dist/artifact-blocks/blocks/diagram/schema.d.ts

@@ -39,8 +39,8 @@ export declare const diagramParamsSchema: z.ZodObject<{
             output: "output";
             note: "note";
             default: "default";
-            decision: "decision";
             external: "external";
+            decision: "decision";
             terminal: "terminal";
             process: "process";
             subroutine: "subroutine";

package/dist/components/BottomSheet.svelte

@@ -26,6 +26,8 @@
              settles on the snap nearest the post-drag height.
 -->
 <script lang="ts">
+	import CloseButton from './CloseButton.svelte';
+	import { scrollEdge as scrollEdgeAction } from '../actions/scrollEdge';
 	import { onMount, untrack } from 'svelte';
 	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 	import type { Snippet } from 'svelte';
@@ -49,6 +51,7 @@
 		onclose = () => {},
 		shortcutRegistry,
 		shortcutContext = 'bottom-sheet',
+		scrollEdge = true,
 		children
 	}: {
 		open?: boolean;
@@ -70,6 +73,8 @@
 		shortcutRegistry?: ShortcutRegistry;
 		/** Context name pushed while open. Default `'bottom-sheet'`. */
 		shortcutContext?: string;
+		/** Soft progressive-blur fade at the top of the content once it scrolls (`use:scrollEdge`). Ignored with `fullHeight` (the slot owns scrolling). Default true. */
+		scrollEdge?: boolean;
 		children?: Snippet;
 	} = $props();
 
@@ -254,12 +259,7 @@
 		{#if title}
 			<div class="flex-shrink-0 flex items-center justify-between px-4 py-2 border-b border-base-200">
 				<span class="text-sm font-semibold">{title}</span>
-				<button
-					type="button"
-					class="btn btn-sm btn-ghost btn-circle"
-					aria-label="Close"
-					onclick={dismiss}
-				>✕</button>
+				<CloseButton label="Close" onclick={dismiss} />
 			</div>
 		{/if}
 
@@ -273,6 +273,7 @@
 				: keyboardInset > 0
 					? `padding-bottom: ${keyboardInset}px;`
 					: ''}
+			use:scrollEdgeAction={{ enabled: scrollEdge && !(fullHeight && !isDual) }}
 		>
 			{@render children?.()}
 		</div>

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

@@ -20,6 +20,8 @@ type $$ComponentProps = {
     shortcutRegistry?: ShortcutRegistry;
     /** Context name pushed while open. Default `'bottom-sheet'`. */
     shortcutContext?: string;
+    /** Soft progressive-blur fade at the top of the content once it scrolls (`use:scrollEdge`). Ignored with `fullHeight` (the slot owns scrolling). Default true. */
+    scrollEdge?: boolean;
     children?: Snippet;
 };
 declare const BottomSheet: import("svelte").Component<$$ComponentProps, {}, "open">;

package/dist/components/CloseButton.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	/**
+	 * CloseButton — the one ✕ every dialog, drawer, sheet, toast and lightbox
+	 * needs. An IconButton with a built-in X glyph whose stroke is a true CSS
+	 * pixel width at every size (`vector-effect: non-scaling-stroke`), so the
+	 * cross never turns hairline at xs or chunky at lg.
+	 *
+	 *   <CloseButton onclick={close} />
+	 *   <CloseButton label="Close drawer" size="md" onclick={close} />
+	 *   <CloseButton variant="overlay" onclick={close} />   <!-- over media -->
+	 *
+	 * Idea from BoardUI's close-button (MIT); written fresh for Svelte 5.
+	 */
+	import IconButton, { type IconButtonSize, type IconButtonVariant } from './IconButton.svelte';
+
+	interface Props {
+		/** Accessible name. Default "Close" — name the thing ("Close drawer") when several are on screen. */
+		label?: string;
+		size?: IconButtonSize;
+		variant?: IconButtonVariant;
+		shape?: 'square' | 'circle';
+		disabled?: boolean;
+		/** Show the label as a tooltip (string = custom text, e.g. "Close (Esc)"). */
+		tooltip?: boolean | string;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		[key: string]: unknown;
+	}
+
+	let {
+		label = 'Close',
+		size = 'sm',
+		variant = 'ghost',
+		shape = 'circle',
+		disabled = false,
+		tooltip = false,
+		class: className = '',
+		onclick,
+		...rest
+	}: Props = $props();
+
+	/** Glyph box per size — the X itself is inset to ~58% of it. */
+	const GLYPH: Record<IconButtonSize, number> = { xs: 12, sm: 16, md: 18, lg: 22 };
+	const STROKE: Record<IconButtonSize, number> = { xs: 1.5, sm: 1.75, md: 2, lg: 2 };
+	const px = $derived(GLYPH[size] ?? 16);
+</script>
+
+<IconButton
+	{...rest}
+	{label}
+	{size}
+	{variant}
+	{shape}
+	{disabled}
+	{tooltip}
+	{onclick}
+	class="jatui-close-btn {className}"
+>
+	<svg
+		width={px}
+		height={px}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-linecap="round"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<path
+			d="M17 7L7 17M7 7l10 10"
+			stroke-width={STROKE[size] ?? 1.75}
+			vector-effect="non-scaling-stroke"
+		/>
+	</svg>
+</IconButton>

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

@@ -0,0 +1,29 @@
+/**
+     * CloseButton — the one ✕ every dialog, drawer, sheet, toast and lightbox
+     * needs. An IconButton with a built-in X glyph whose stroke is a true CSS
+     * pixel width at every size (`vector-effect: non-scaling-stroke`), so the
+     * cross never turns hairline at xs or chunky at lg.
+     *
+     *   <CloseButton onclick={close} />
+     *   <CloseButton label="Close drawer" size="md" onclick={close} />
+     *   <CloseButton variant="overlay" onclick={close} />   <!-- over media -->
+     *
+     * Idea from BoardUI's close-button (MIT); written fresh for Svelte 5.
+     */
+import { type IconButtonSize, type IconButtonVariant } from './IconButton.svelte';
+interface Props {
+    /** Accessible name. Default "Close" — name the thing ("Close drawer") when several are on screen. */
+    label?: string;
+    size?: IconButtonSize;
+    variant?: IconButtonVariant;
+    shape?: 'square' | 'circle';
+    disabled?: boolean;
+    /** Show the label as a tooltip (string = custom text, e.g. "Close (Esc)"). */
+    tooltip?: boolean | string;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const CloseButton: import("svelte").Component<Props, {}, "">;
+type CloseButton = ReturnType<typeof CloseButton>;
+export default CloseButton;

package/dist/components/Drawer.svelte

@@ -8,6 +8,8 @@
 	 * class (e.g. `'w-[42rem]'`) which takes precedence over `size`.
 	 */
 
+	import CloseButton from './CloseButton.svelte';
+	import { scrollEdge as scrollEdgeAction } from '../actions/scrollEdge';
 	import { untrack, type Snippet } from 'svelte';
 	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 
@@ -22,6 +24,8 @@
 		width?: string;
 		showCloseButton?: boolean;
 		contentClass?: string;
+		/** Soft progressive-blur fade at the top of the body once it scrolls (`use:scrollEdge`). Default true. */
+		scrollEdge?: boolean;
 		/**
 		 * When true (default), keydown events fired inside the drawer panel are
 		 * stopped from propagating to window — preventing page-level list/keyboard
@@ -59,6 +63,7 @@
 		width,
 		showCloseButton = true,
 		contentClass = '',
+		scrollEdge = true,
 		trapKeys = true,
 		shortcutRegistry,
 		shortcutContext = 'drawer',
@@ -150,22 +155,16 @@
 					{@render headerActions()}
 				{/if}
 				{#if showCloseButton}
-					<button
-						type="button"
-						class="btn btn-sm btn-circle btn-ghost"
-						onclick={handleClose}
-						aria-label="Close drawer"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-						</svg>
-					</button>
+					<CloseButton label="Close drawer" onclick={handleClose} />
 				{/if}
 			</div>
 		</div>
 	{/if}
 
-	<div class="flex-1 overflow-y-auto {contentClass}">
+	<div
+		class="flex-1 overflow-y-auto {contentClass}"
+		use:scrollEdgeAction={{ enabled: scrollEdge, surface: 'var(--color-base-200)' }}
+	>
 		{#if open && children}
 			{@render children()}
 		{/if}

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

@@ -1,11 +1,3 @@
-/**
-     * 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';
 interface Props {
@@ -19,6 +11,8 @@ interface Props {
     width?: string;
     showCloseButton?: boolean;
     contentClass?: string;
+    /** Soft progressive-blur fade at the top of the body once it scrolls (`use:scrollEdge`). Default true. */
+    scrollEdge?: boolean;
     /**
      * When true (default), keydown events fired inside the drawer panel are
      * stopped from propagating to window — preventing page-level list/keyboard