@yewdiel21/motion-kit 0.18.0 → 0.19.1

package/README.md

@@ -1,222 +1,245 @@
-# @yewdiel21/motion-kit
-
-Motion toolkit for vanilla JavaScript, Astro and React/Next.js. GSAP recipes, accessible UI components, 19 Material 3 themes, CSS controls and optional WebGL effects.
-
-[Live playground](https://motion-kit-playground.vercel.app) — vanilla and React examples for every component.
-
-## New in 0.18.0
-
-Fifteen components join the Melonmind/Stepbro visual language: tonal surfaces, restrained accent, elastic press feedback, moving selections, short blur transitions and rolling values. Every entry includes a vanilla factory, React adapter, custom element, individual CSS and working examples.
-
-| Family | Components |
-| --- | --- |
-| Forms | `stepper` (horizontal, vertical, compact, dots), `radio-group` (pill, card, list), `equalizer-slider`, `temperature-slider`, `rating-scale` (numbered, sentiment) |
-| Surfaces | `notification-stack`, `bento-grid`, `scroll-preview-dock`, `sticky-header` |
-| Motion and actions | `handwriting-text`, `particle-button`, `magnetize-button`, `badge-button`, `morphing-page-dots`, `not-found` |
-
-The five 0.17 components were redesigned: Wheel Picker now projects rows around a 3D cylinder with real Y/Z depth and native touch inertia; Signature Pad, Drilldown Menu and the audio components share the kit's press, highlight and transition vocabulary. Waveform progress follows the actual media time; it does not fabricate audio analysis. No new runtime dependencies.
-
-```tsx
-import { Stepper, RadioGroup, TemperatureSlider } from '@yewdiel21/motion-kit/react';
-import '@yewdiel21/motion-kit/css';
-
-<Stepper items={[{ label: 'Details' }, { label: 'Review' }]} variant="compact" />
-<RadioGroup name="plan" items={[{ value: 'solo', label: 'Personal' }, { value: 'team', label: 'Team' }]} />
-<TemperatureSlider name="temperature" defaultValue={22} min={16} max={30} />
-```
-
-Explore the [playground](https://motion-kit-playground.vercel.app), or copy an implementation with `npx @yewdiel21/motion-kit add stepper --react --elements`. Keep `destroy()`/React cleanup when replacing a component. Reduced motion retains every action; native form inputs provide keyboard, validation and submission.
-
-## New in 0.17.0
-
-Five reusable components with vanilla factories, React wrappers, custom elements, individual stylesheets and live examples:
-
-| Component | Behavior |
-| --- | --- |
-| [Signature Pad](https://motion-kit-playground.vercel.app/signature-pad/) | Mouse, pen and touch input; undo/redo; normalized stroke data; transparent SVG/PNG export. |
-| [Waveform Player](https://motion-kit-playground.vercel.app/waveform-player/) | Real audio playback, seek, playback speed and loading/error states. Supply your own waveform peaks. |
-| [Voice Message Bubble](https://motion-kit-playground.vercel.app/voice-message-bubble/) | Incoming/outgoing audio messages with author, timestamp and delivery status. |
-| [Drilldown Menu](https://motion-kit-playground.vercel.app/drilldown-menu/) | Nested actions, animated level changes, breadcrumbs and keyboard navigation. |
-| [Wheel Picker](https://motion-kit-playground.vercel.app/wheel-picker/) | Native touch scrolling, mouse drag, keyboard selection, disabled options and form values. |
-
-The components follow the active theme and respect reduced motion. No new runtime dependencies. Audio demos use an original synthesized test sound; the player does not request microphone access or analyze audio automatically.
-
-```tsx
-import { WheelPicker } from '@yewdiel21/motion-kit/react';
-import '@yewdiel21/motion-kit/css';
-
-<WheelPicker items={['15 min', '25 min', '50 min']} name="duration" />
-```
-
-## Install
-
-```sh
-npm install @yewdiel21/motion-kit gsap
-```
-
-For React components, install React 18 or newer. The theme generator additionally requires `@material/material-color-utilities@^0.3.0`.
-
-## Vanilla / Astro
-
-```ts
-import '@yewdiel21/motion-kit/css';
-import { autoInit } from '@yewdiel21/motion-kit/auto';
-
-const destroy = autoInit(document);
-```
-
-```html
-<div class="mk-segmented" data-mk="tabs">
-  <button data-mk-tab aria-selected="true">Today</button>
-  <button data-mk-tab>Week</button>
-  <span data-mk-indicator></span>
-</div>
-```
-
-Call `destroy()` before replacing the DOM. Add `MK_HEAD_SCRIPT` from `/auto` inline to `<head>` when using entrance recipes, and `defineElements()` from `/elements` to register the `mk-*` custom elements.
-
-## React / Next.js
-
-```tsx
-'use client';
-
-import '@yewdiel21/motion-kit/css';
-import { useRef } from 'react';
-import { useTabs } from '@yewdiel21/motion-kit/react';
-
-export function Tabs() {
-  const ref = useRef<HTMLDivElement>(null);
-  useTabs(ref);
-  return (
-    <div ref={ref} className="mk-segmented">
-      <button data-mk-tab aria-selected="true">Today</button>
-      <button data-mk-tab>Week</button>
-      <span data-mk-indicator="" />
-    </div>
-  );
-}
-```
-
-Hooks create the engine after mount and destroy it on unmount. Import themes separately from `/css/themes`, fonts from `/css/fonts`, and theme utilities from `/theme`.
-
-## Copy source with the CLI
-
-```sh
-npx @yewdiel21/motion-kit list
-npx @yewdiel21/motion-kit add tabs island drag-ruler --react --elements --dir src/motion-kit
-npx @yewdiel21/motion-kit skill
-```
-
-The CLI copies the selected components, their dependencies and CSS. Each copied folder includes its README. It does not overwrite files without `--force`.
-
-## Entry points
-
-| Import | Contents |
-|---|---|
-| `@yewdiel21/motion-kit` | Factories, motion functions, easings and timing constants |
-| `/auto` | Declarative `data-mk` initialization and head script |
-| `/react` | Hooks and React components |
-| `/elements` | Custom elements |
-| `/theme` | Theme runtime and head script |
-| `/theme/generate` | Optional Material 3 palette generator |
-| `/gl` | Particle hero, liquid blend, matcap, shader grain and blur |
-| `/css`, `/css/themes`, `/css/fonts` | Styles, theme palettes and font imports |
-
-WebGL is optional. Keep accessible text and images in HTML; effects provide a fallback when graphics support is unavailable. Motion recipes respect reduced-motion preferences and return an idempotent `destroy()`.
-
-Full component documentation and the playground source are in the [repository](https://github.com/YewdielMartinez/motion-kit). Each component README documents its markup, options and controls. License notices: `NOTICE`. License: `UNLICENSED`; all rights reserved.
-
-## New in 0.14.0
-
-Twenty-two application components with GSAP microinteractions, each with a factory, a React component, a custom element, its own stylesheet, a Spanish README and vanilla/React demos:
-
-- Overlays and feedback: `tooltip` (automatic placement, an arrow that tracks its anchor), `popover` (an anchored, interactive panel that grows out of its trigger), `loading-button` (loading, success and error with a width glide), `empty-state` (drawn illustrations with an idle loop), `breadcrumb` (folds its middle into "…", glides when the path changes).
-- Data at a glance: `stat-card` (a counted figure, trend badge, sparkline and target), `chart-tooltip` (a rich tooltip linked to `chart` or standalone).
-- Inputs: `multi-select` (chips and search), `tag-input` (autocomplete and validation), `date-time-picker` (date and time in one field), `filter-builder` (conditions and nested AND/OR groups).
-- Structures: `timeline`, `activity-feed` (live entries behind a "novedades" pill), `tree-view` (three-state checks, search, lazy children), `file-explorer` (tree, breadcrumb, list/grid, drag-and-drop), `json-viewer` (typed values, copy, flashes on new data), `virtual-list` (thousands of rows, measured heights, a position pill).
-- Layout and data: `resizable-panel` (draggable separators with a rubber band and snap-to-collapse), `split-view`, `data-table` (sorting, search, filters, selection with bulk actions, pagination, row menus, columns), `editable-table` (in-place editing, validation and saving), `rich-text-editor` (toolbar, Markdown shortcuts, safe paste, links, counter).
-
-New helpers: `place`, `matchesFilter`, `describeFilter`, `relativeTime`, `dayLabel`, `findNode`, `toggleCheck`, `searchTree`, `formatSize`, `sortEntries`, `createSizes`, `jsonPath`, `normaliseSizes`, `sanitizeHtml`, `toDateTimeValue`. `chart` gains an optional built-in tooltip and richer `mk:select` details; `breadcrumb` keeps a crumb that turns into a link in place.
-
-## New in 0.13.0
-
-Seven input components with GSAP microinteractions, each with a factory, a React component, a custom element, its own stylesheet and vanilla/React demos:
-
-- `color-slider`: one channel (hue, saturation, brightness, lightness, red, green, blue, alpha) on a native range; gradient track, round thumb that grows when grabbed and a colour loupe.
-- `color-area`: saturation × brightness square with drag, keyboard (two labelled ranges) and the same loupe.
-- `color-field`: hex / rgb() / hsl() text with a live swatch; invalid input shakes and reverts.
-- `color-picker`: a swatch button that grows into a panel (area, hue, alpha, field, presets, eyedropper), or the panel inline.
-- `time-field`: segmented time (24 h or a.m./p.m.); digits roll, a focus pill glides, min/max validation.
-- `range-calendar`: one or two months; two-click range with hover preview, a band that wipes in, unavailable days, full keyboard.
-- `date-range-picker`: two segmented dates and a calendar popover that grows out of its button; presets and inline errors.
-
-`command-search` now grows out of the button that opened it and folds back into it. New helpers: `parseColor`, `formatColor`, `toHex`, `toHsva`, `luminance`, `parseTime`, `formatTime`, `toRange`, `rangeKeys`.
-
-## New in 0.12.0
-
-Ten microinteraction components on the Melon Mind design line (neutral surfaces, sparse accent, glass and GSAP curves), each with a factory, a React component, a custom element, its own stylesheet and vanilla/React demos. All of them respect reduced motion.
-
-- `credit-card`: the card fills in as you type (characters roll in, a frame follows the active field), detects the brand, checks Luhn and expiry, and turns over in 3D for the CVC.
-- `command-search`: Ctrl/⌘ K palette with fuzzy matching, marked matches, groups, arrows and Enter; an `href` navigates unless `mk:select` is cancelled.
-- `hold-confirm`: the button itself fills while held (pointer or Space/Enter); releasing early cancels, completion pops a check.
-- `image-preview`: thumbnails open into a dialog that grows from the picture; arrows, swipe, double-click zoom, drag down or Escape to close.
-- `like-button`: heart that squashes and pops with particles; the count rolls.
-- `notification-bell`: the bell swings, the badge pops and a message rises beside it on the side with room.
-- `password-strength`: four-segment meter, live rule checklist and show/hide toggle; can require a score through native validity.
-- `scratch-card`: metallic canvas cover scratched with a finger or mouse; reveals at a threshold with confetti, plus a keyboard Reveal button.
-- `star-rating`: native radios with hover preview, pop and sparkles; half stars when read-only.
-- `swipe-actions`: rows slide to show actions on both sides; a long swipe runs the primary action, keyboard reaches every action.
-
-Shared motion helpers are exported: `press`, `blurIn`, `blurOut`, `collapse`, `shake`, `ringPulse`, `burst` and `rollDigits`, plus the `click`, `playful`, `pop`, `wipe` and `shake` curves in `EASE`.
-
-The 0.11 entries follow the same line: `code-block` is a dark editor with built-in syntax highlighting (ts/js/jsx, json, css, html/xml, shell) and `highlightLines`; `link-preview` adds a `row` variant; `progress` and `range-slider` glide between values; `chart` defaults to a monochrome single series with an end-value pill (`axis` and `endLabel` options) and animates its first draw and data updates; `hover-card`, `attachment`, `skeleton` and `questionnaire` adopt the glass and surfaces with tighter radii. Counts and ratings format numbers in the page language.
-
-## New in 0.11.0
-
-Ten everyday components, each with a factory, a React component, a custom element, its own stylesheet (`/css/components/<name>.css`) and vanilla/React demos in the playground. Data, uploads and persistence stay in your app.
-
-- `attachment`: file chooser and drop zone with accept/size/count validation, cards with progress and status, image previews revoked on removal.
-- `skeleton`: text, avatar, image or card placeholders with pulse or shimmer; the region reports `aria-busy` and keeps real content hidden until loaded.
-- `questionnaire`: native-form steps (text, single and multiple choice) with per-step validation, focus on the first invalid field and a single completion; built on `steps`.
-- `code-block`: title, language, line numbers and copy with success/error feedback; code is always text.
-- `context-menu`: right click, Menu key, Shift+F10 or long press; placed inside the viewport, built on `menu`, focus returns to the opener.
-- `drawer`: left/right side panel or bottom sheet on the dialog engine, with focus, Escape and scroll locking.
-- `link-preview`: resource card or hover preview from app-supplied metadata; only http(s)/relative links.
-- `progress`: bar or ring, determinate or indeterminate.
-- `range-slider`: single value or interval on native range inputs.
-- `chart`: SVG line, area and grouped/stacked bars with pointer/touch/keyboard tooltip and an accessible table, no chart runtime.
-
-`hover-card` now flips and shifts to stay inside the viewport and repositions on scroll and resize; its API is unchanged (plus `reposition()`). `Dialog` gains an optional `anchor` box and a `drawer` variant used by the new surfaces.
-
-## New in 0.10.0
-
-Nineteen entries, each with vanilla and React demos in the playground:
-
-- **Components** (factory, React and custom element): `quantity`, `pagination`, `hover-card`, `input-otp`, `studio-dock`, `trailer`, `calendar` (month and week views with events, ARIA grid) and `slot-picker` (day and time slots for bookings; accepts lists, maps or promises and submits through a hidden input).
-- **Recipes** (factory, hook and `autoInit()`): `joined-cta`, `image-zoom`, `font-cycle`, `thumbnail-nav`, `action-button`, `film-hero`, `editorial-reveal`, `weight-hover` (requires a variable font), `sticker`, `scroll-dock` and `local-clock`.
-- **CSS control**: `.mk-status`, an availability pill with a pulsing dot.
-
-All new entries return an idempotent `destroy()`, support the keyboard and respect reduced motion. No original assets from the reference sites are included.
-
-## Controles y gráficos · 0.15.0
-
-- `pill-button`: el fondo de la píldora se reúne junto al icono; también tiene una variante inversa.
-- `toolbar`: selector elástico tipo slime, orientación vertical u horizontal y etiquetas que siguen la selección.
-- `bidirectional-slider`: volumen, balance o ajustes alrededor de un origen, con teclado y burbuja de valor.
-- `orbit-menu`: acciones alrededor de un botón central, con entrada escalonada, foco y Escape.
-- `voice-dots`: espera, escucha, pensamiento y habla; sigue un `MediaStream`, audio/video o niveles de tu aplicación.
-- `chart`: línea, área, barras, combinación por serie y áreas por rangos con `lowerValues`.
-- `pie-chart`, `radar-chart`, `radial-chart`, `sankey-chart` y `heatmap-chart`: datos animados, tooltips, selección por teclado y tablas accesibles.
-
-Cada pieza incluye factory vanilla, custom element, componente React, estilos individuales, documentación y demos interactivas. Los gráficos nuevos comparten los tokens de color y actualizan sus datos sin desmontarse. Las animaciones respetan `prefers-reduced-motion`.
-
-```tsx
-import '@yewdiel21/motion-kit/css';
-import { PillButton, Toolbar, VoiceDots, Chart, PieChart } from '@yewdiel21/motion-kit/react';
-```
-
-Los cambios de 0.15 también incluyen `select`, `add-to-cart` y `scroll-island`, que ya estaban implementados antes de esta continuación.
-
-## New in 0.16.0
-
-Pill bars, capacity tracks, spotlight/gradient fills, stacked capsules and smooth range curves extend Chart. RadialChart gains segmented gauges and percentage centers. AddToCart and ScrollIsland now have complete, interactive Vanilla/React playground demos; ScrollIsland also supports a persistent rail and AddToCart synchronizes controlled counts.
+# @yewdiel21/motion-kit
+
+Motion toolkit for vanilla JavaScript, Astro and React/Next.js. GSAP recipes, accessible UI components, 19 Material 3 themes, CSS controls and optional WebGL effects.
+
+[Live playground](https://motion-kit-playground.vercel.app) — vanilla and React examples for every component.
+
+## Fixed in 0.19.1
+
+- `pill-button` keeps SVG and `.mk-icon` icons within the 18 px slot and centred during hover.
+- `scroll-island` measures section titles before constraining the capsule, so long titles remain readable with ellipsis when needed. Percentage-only mode remains available with `sections: false`.
+
+## New in 0.19.0
+
+`scroll-area` replaces the system scrollbar with the kit's own, while scrolling stays native (keyboard, touch, momentum, scroll snap, find in page).
+
+- **At rest:** a 6 px pill that shows on hover or while scrolling and fades 0.9 s later.
+- **Over the bar:** a tonal rail appears and the pill swells to 10 px on the swing curve.
+- **Dragging:** the pill presses, takes the accent and follows the pointer with no delay.
+- **Clicking the rail:** glides there, interrupted by the wheel, a touch or a key.
+- **Extras:** edges with hidden content fade out, there is a horizontal bar, and an optional "back to top" pill pops in.
+
+```tsx
+import { ScrollArea } from '@yewdiel21/motion-kit/react';
+
+<ScrollArea style={{ height: 320 }} label="Release notes" backToTop>…</ScrollArea>
+```
+
+Select, Dialog, Command Search, Code Block and Heatmap Chart now scroll under this bar instead of the grey system one. Reduced motion keeps every action. No new runtime dependencies.
+
+## New in 0.18.0
+
+Fifteen components join the Melonmind/Stepbro visual language: tonal surfaces, restrained accent, elastic press feedback, moving selections, short blur transitions and rolling values. Every entry includes a vanilla factory, React adapter, custom element, individual CSS and working examples.
+
+| Family | Components |
+| --- | --- |
+| Forms | `stepper` (horizontal, vertical, compact, dots), `radio-group` (pill, card, list), `equalizer-slider`, `temperature-slider`, `rating-scale` (numbered, sentiment) |
+| Surfaces | `notification-stack`, `bento-grid`, `scroll-preview-dock`, `sticky-header` |
+| Motion and actions | `handwriting-text`, `particle-button`, `magnetize-button`, `badge-button`, `morphing-page-dots`, `not-found` |
+
+The five 0.17 components were redesigned: Wheel Picker now projects rows around a 3D cylinder with real Y/Z depth and native touch inertia; Signature Pad, Drilldown Menu and the audio components share the kit's press, highlight and transition vocabulary. Waveform progress follows the actual media time; it does not fabricate audio analysis. No new runtime dependencies.
+
+```tsx
+import { Stepper, RadioGroup, TemperatureSlider } from '@yewdiel21/motion-kit/react';
+import '@yewdiel21/motion-kit/css';
+
+<Stepper items={[{ label: 'Details' }, { label: 'Review' }]} variant="compact" />
+<RadioGroup name="plan" items={[{ value: 'solo', label: 'Personal' }, { value: 'team', label: 'Team' }]} />
+<TemperatureSlider name="temperature" defaultValue={22} min={16} max={30} />
+```
+
+Explore the [playground](https://motion-kit-playground.vercel.app), or copy an implementation with `npx @yewdiel21/motion-kit add stepper --react --elements`. Keep `destroy()`/React cleanup when replacing a component. Reduced motion retains every action; native form inputs provide keyboard, validation and submission.
+
+## New in 0.17.0
+
+Five reusable components with vanilla factories, React wrappers, custom elements, individual stylesheets and live examples:
+
+| Component | Behavior |
+| --- | --- |
+| [Signature Pad](https://motion-kit-playground.vercel.app/signature-pad/) | Mouse, pen and touch input; undo/redo; normalized stroke data; transparent SVG/PNG export. |
+| [Waveform Player](https://motion-kit-playground.vercel.app/waveform-player/) | Real audio playback, seek, playback speed and loading/error states. Supply your own waveform peaks. |
+| [Voice Message Bubble](https://motion-kit-playground.vercel.app/voice-message-bubble/) | Incoming/outgoing audio messages with author, timestamp and delivery status. |
+| [Drilldown Menu](https://motion-kit-playground.vercel.app/drilldown-menu/) | Nested actions, animated level changes, breadcrumbs and keyboard navigation. |
+| [Wheel Picker](https://motion-kit-playground.vercel.app/wheel-picker/) | Native touch scrolling, mouse drag, keyboard selection, disabled options and form values. |
+
+The components follow the active theme and respect reduced motion. No new runtime dependencies. Audio demos use an original synthesized test sound; the player does not request microphone access or analyze audio automatically.
+
+```tsx
+import { WheelPicker } from '@yewdiel21/motion-kit/react';
+import '@yewdiel21/motion-kit/css';
+
+<WheelPicker items={['15 min', '25 min', '50 min']} name="duration" />
+```
+
+## Install
+
+```sh
+npm install @yewdiel21/motion-kit gsap
+```
+
+For React components, install React 18 or newer. The theme generator additionally requires `@material/material-color-utilities@^0.3.0`.
+
+## Vanilla / Astro
+
+```ts
+import '@yewdiel21/motion-kit/css';
+import { autoInit } from '@yewdiel21/motion-kit/auto';
+
+const destroy = autoInit(document);
+```
+
+```html
+<div class="mk-segmented" data-mk="tabs">
+  <button data-mk-tab aria-selected="true">Today</button>
+  <button data-mk-tab>Week</button>
+  <span data-mk-indicator></span>
+</div>
+```
+
+Call `destroy()` before replacing the DOM. Add `MK_HEAD_SCRIPT` from `/auto` inline to `<head>` when using entrance recipes, and `defineElements()` from `/elements` to register the `mk-*` custom elements.
+
+## React / Next.js
+
+```tsx
+'use client';
+
+import '@yewdiel21/motion-kit/css';
+import { useRef } from 'react';
+import { useTabs } from '@yewdiel21/motion-kit/react';
+
+export function Tabs() {
+  const ref = useRef<HTMLDivElement>(null);
+  useTabs(ref);
+  return (
+    <div ref={ref} className="mk-segmented">
+      <button data-mk-tab aria-selected="true">Today</button>
+      <button data-mk-tab>Week</button>
+      <span data-mk-indicator="" />
+    </div>
+  );
+}
+```
+
+Hooks create the engine after mount and destroy it on unmount. Import themes separately from `/css/themes`, fonts from `/css/fonts`, and theme utilities from `/theme`.
+
+## Copy source with the CLI
+
+```sh
+npx @yewdiel21/motion-kit list
+npx @yewdiel21/motion-kit add tabs island drag-ruler --react --elements --dir src/motion-kit
+npx @yewdiel21/motion-kit skill
+```
+
+The CLI copies the selected components, their dependencies and CSS. Each copied folder includes its README. It does not overwrite files without `--force`.
+
+## Entry points
+
+| Import | Contents |
+|---|---|
+| `@yewdiel21/motion-kit` | Factories, motion functions, easings and timing constants |
+| `/auto` | Declarative `data-mk` initialization and head script |
+| `/react` | Hooks and React components |
+| `/elements` | Custom elements |
+| `/theme` | Theme runtime and head script |
+| `/theme/generate` | Optional Material 3 palette generator |
+| `/gl` | Particle hero, liquid blend, matcap, shader grain and blur |
+| `/css`, `/css/themes`, `/css/fonts` | Styles, theme palettes and font imports |
+
+WebGL is optional. Keep accessible text and images in HTML; effects provide a fallback when graphics support is unavailable. Motion recipes respect reduced-motion preferences and return an idempotent `destroy()`.
+
+Full component documentation and the playground source are in the [repository](https://github.com/YewdielMartinez/motion-kit). Each component README documents its markup, options and controls. License notices: `NOTICE`. License: `UNLICENSED`; all rights reserved.
+
+## New in 0.14.0
+
+Twenty-two application components with GSAP microinteractions, each with a factory, a React component, a custom element, its own stylesheet, a Spanish README and vanilla/React demos:
+
+- Overlays and feedback: `tooltip` (automatic placement, an arrow that tracks its anchor), `popover` (an anchored, interactive panel that grows out of its trigger), `loading-button` (loading, success and error with a width glide), `empty-state` (drawn illustrations with an idle loop), `breadcrumb` (folds its middle into "…", glides when the path changes).
+- Data at a glance: `stat-card` (a counted figure, trend badge, sparkline and target), `chart-tooltip` (a rich tooltip linked to `chart` or standalone).
+- Inputs: `multi-select` (chips and search), `tag-input` (autocomplete and validation), `date-time-picker` (date and time in one field), `filter-builder` (conditions and nested AND/OR groups).
+- Structures: `timeline`, `activity-feed` (live entries behind a "novedades" pill), `tree-view` (three-state checks, search, lazy children), `file-explorer` (tree, breadcrumb, list/grid, drag-and-drop), `json-viewer` (typed values, copy, flashes on new data), `virtual-list` (thousands of rows, measured heights, a position pill).
+- Layout and data: `resizable-panel` (draggable separators with a rubber band and snap-to-collapse), `split-view`, `data-table` (sorting, search, filters, selection with bulk actions, pagination, row menus, columns), `editable-table` (in-place editing, validation and saving), `rich-text-editor` (toolbar, Markdown shortcuts, safe paste, links, counter).
+
+New helpers: `place`, `matchesFilter`, `describeFilter`, `relativeTime`, `dayLabel`, `findNode`, `toggleCheck`, `searchTree`, `formatSize`, `sortEntries`, `createSizes`, `jsonPath`, `normaliseSizes`, `sanitizeHtml`, `toDateTimeValue`. `chart` gains an optional built-in tooltip and richer `mk:select` details; `breadcrumb` keeps a crumb that turns into a link in place.
+
+## New in 0.13.0
+
+Seven input components with GSAP microinteractions, each with a factory, a React component, a custom element, its own stylesheet and vanilla/React demos:
+
+- `color-slider`: one channel (hue, saturation, brightness, lightness, red, green, blue, alpha) on a native range; gradient track, round thumb that grows when grabbed and a colour loupe.
+- `color-area`: saturation × brightness square with drag, keyboard (two labelled ranges) and the same loupe.
+- `color-field`: hex / rgb() / hsl() text with a live swatch; invalid input shakes and reverts.
+- `color-picker`: a swatch button that grows into a panel (area, hue, alpha, field, presets, eyedropper), or the panel inline.
+- `time-field`: segmented time (24 h or a.m./p.m.); digits roll, a focus pill glides, min/max validation.
+- `range-calendar`: one or two months; two-click range with hover preview, a band that wipes in, unavailable days, full keyboard.
+- `date-range-picker`: two segmented dates and a calendar popover that grows out of its button; presets and inline errors.
+
+`command-search` now grows out of the button that opened it and folds back into it. New helpers: `parseColor`, `formatColor`, `toHex`, `toHsva`, `luminance`, `parseTime`, `formatTime`, `toRange`, `rangeKeys`.
+
+## New in 0.12.0
+
+Ten microinteraction components on the Melon Mind design line (neutral surfaces, sparse accent, glass and GSAP curves), each with a factory, a React component, a custom element, its own stylesheet and vanilla/React demos. All of them respect reduced motion.
+
+- `credit-card`: the card fills in as you type (characters roll in, a frame follows the active field), detects the brand, checks Luhn and expiry, and turns over in 3D for the CVC.
+- `command-search`: Ctrl/⌘ K palette with fuzzy matching, marked matches, groups, arrows and Enter; an `href` navigates unless `mk:select` is cancelled.
+- `hold-confirm`: the button itself fills while held (pointer or Space/Enter); releasing early cancels, completion pops a check.
+- `image-preview`: thumbnails open into a dialog that grows from the picture; arrows, swipe, double-click zoom, drag down or Escape to close.
+- `like-button`: heart that squashes and pops with particles; the count rolls.
+- `notification-bell`: the bell swings, the badge pops and a message rises beside it on the side with room.
+- `password-strength`: four-segment meter, live rule checklist and show/hide toggle; can require a score through native validity.
+- `scratch-card`: metallic canvas cover scratched with a finger or mouse; reveals at a threshold with confetti, plus a keyboard Reveal button.
+- `star-rating`: native radios with hover preview, pop and sparkles; half stars when read-only.
+- `swipe-actions`: rows slide to show actions on both sides; a long swipe runs the primary action, keyboard reaches every action.
+
+Shared motion helpers are exported: `press`, `blurIn`, `blurOut`, `collapse`, `shake`, `ringPulse`, `burst` and `rollDigits`, plus the `click`, `playful`, `pop`, `wipe` and `shake` curves in `EASE`.
+
+The 0.11 entries follow the same line: `code-block` is a dark editor with built-in syntax highlighting (ts/js/jsx, json, css, html/xml, shell) and `highlightLines`; `link-preview` adds a `row` variant; `progress` and `range-slider` glide between values; `chart` defaults to a monochrome single series with an end-value pill (`axis` and `endLabel` options) and animates its first draw and data updates; `hover-card`, `attachment`, `skeleton` and `questionnaire` adopt the glass and surfaces with tighter radii. Counts and ratings format numbers in the page language.
+
+## New in 0.11.0
+
+Ten everyday components, each with a factory, a React component, a custom element, its own stylesheet (`/css/components/<name>.css`) and vanilla/React demos in the playground. Data, uploads and persistence stay in your app.
+
+- `attachment`: file chooser and drop zone with accept/size/count validation, cards with progress and status, image previews revoked on removal.
+- `skeleton`: text, avatar, image or card placeholders with pulse or shimmer; the region reports `aria-busy` and keeps real content hidden until loaded.
+- `questionnaire`: native-form steps (text, single and multiple choice) with per-step validation, focus on the first invalid field and a single completion; built on `steps`.
+- `code-block`: title, language, line numbers and copy with success/error feedback; code is always text.
+- `context-menu`: right click, Menu key, Shift+F10 or long press; placed inside the viewport, built on `menu`, focus returns to the opener.
+- `drawer`: left/right side panel or bottom sheet on the dialog engine, with focus, Escape and scroll locking.
+- `link-preview`: resource card or hover preview from app-supplied metadata; only http(s)/relative links.
+- `progress`: bar or ring, determinate or indeterminate.
+- `range-slider`: single value or interval on native range inputs.
+- `chart`: SVG line, area and grouped/stacked bars with pointer/touch/keyboard tooltip and an accessible table, no chart runtime.
+
+`hover-card` now flips and shifts to stay inside the viewport and repositions on scroll and resize; its API is unchanged (plus `reposition()`). `Dialog` gains an optional `anchor` box and a `drawer` variant used by the new surfaces.
+
+## New in 0.10.0
+
+Nineteen entries, each with vanilla and React demos in the playground:
+
+- **Components** (factory, React and custom element): `quantity`, `pagination`, `hover-card`, `input-otp`, `studio-dock`, `trailer`, `calendar` (month and week views with events, ARIA grid) and `slot-picker` (day and time slots for bookings; accepts lists, maps or promises and submits through a hidden input).
+- **Recipes** (factory, hook and `autoInit()`): `joined-cta`, `image-zoom`, `font-cycle`, `thumbnail-nav`, `action-button`, `film-hero`, `editorial-reveal`, `weight-hover` (requires a variable font), `sticker`, `scroll-dock` and `local-clock`.
+- **CSS control**: `.mk-status`, an availability pill with a pulsing dot.
+
+All new entries return an idempotent `destroy()`, support the keyboard and respect reduced motion. No original assets from the reference sites are included.
+
+## Controles y gráficos · 0.15.0
+
+- `pill-button`: el fondo de la píldora se reúne junto al icono; también tiene una variante inversa.
+- `toolbar`: selector elástico tipo slime, orientación vertical u horizontal y etiquetas que siguen la selección.
+- `bidirectional-slider`: volumen, balance o ajustes alrededor de un origen, con teclado y burbuja de valor.
+- `orbit-menu`: acciones alrededor de un botón central, con entrada escalonada, foco y Escape.
+- `voice-dots`: espera, escucha, pensamiento y habla; sigue un `MediaStream`, audio/video o niveles de tu aplicación.
+- `chart`: línea, área, barras, combinación por serie y áreas por rangos con `lowerValues`.
+- `pie-chart`, `radar-chart`, `radial-chart`, `sankey-chart` y `heatmap-chart`: datos animados, tooltips, selección por teclado y tablas accesibles.
+
+Cada pieza incluye factory vanilla, custom element, componente React, estilos individuales, documentación y demos interactivas. Los gráficos nuevos comparten los tokens de color y actualizan sus datos sin desmontarse. Las animaciones respetan `prefers-reduced-motion`.
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { PillButton, Toolbar, VoiceDots, Chart, PieChart } from '@yewdiel21/motion-kit/react';
+```
+
+Los cambios de 0.15 también incluyen `select`, `add-to-cart` y `scroll-island`, que ya estaban implementados antes de esta continuación.
+
+## New in 0.16.0
+
+Pill bars, capacity tracks, spotlight/gradient fills, stacked capsules and smooth range curves extend Chart. RadialChart gains segmented gauges and percentage centers. AddToCart and ScrollIsland now have complete, interactive Vanilla/React playground demos; ScrollIsland also supports a persistent rail and AddToCart synchronizes controlled counts.

package/dist/auto/index.d.ts

@@ -1,6 +1,6 @@
-import { c as createJoinedCta, a as createImageZoom, b as createFontCycle, d as createThumbnailNav, e as createActionButton, f as createFilmHero, g as createEditorialReveal, h as createDrawer, i as createWeightHover, j as createSticker, k as createScrollDock, l as createLocalClock, m as createSpringCards, C as CurvedCarouselInstance, n as createPile, o as createWords, p as createFlow, q as createPop, r as createFitText, s as createStretchFooter, t as createRadialMenu, u as createTabs, v as createCounter, w as createReveal, x as createReflow, y as createSlotText, z as createSortable, A as createMaskText, B as createCascade, D as createTextRoll, E as createLetters, F as createParallax, G as createDepthGrid, H as createFrameZoom, I as createContrast, J as createMarquee, K as createCardDock, L as createSnapStrip, M as createFillText, T as TicketMenuOptions, N as TicketMenuInstance, O as createInfiniteReel, P as createRepelBento, Q as createRotator, R as createDragRuler, S as createDockPill } from '../reduced-dPsZYqtI.js';
-export { U as MK_HEAD_SCRIPT } from '../reduced-dPsZYqtI.js';
-import { c as createStepper, a as createRadioGroup, b as createEqualizerSlider, d as createTemperatureSlider, e as createRatingScale, f as createNotificationStack, g as createBentoGrid, h as createScrollPreviewDock, i as createStickyHeader, j as createHandwritingText, k as createParticleButton, l as createMagnetizeButton, m as createBadgeButton, n as createMorphingPageDots, o as createNotFound, p as createWheelPicker, q as createDrilldownMenu, r as createVoiceMessageBubble, s as createWaveformPlayer, t as createSignaturePad, u as createStudioDock, v as createTrailer, w as createQuantity, x as createPagination, y as createHoverCard, z as createInputOtp, A as createCalendar, B as createSlotPicker, C as createCreditCard, D as createCommandSearch, E as createHoldConfirm, F as createImagePreview, G as createNotificationBell, H as createPasswordStrength, I as createScratchCard, J as createStarRating, K as createAttachment, L as createSkeleton, M as createQuestionnaire, N as createCodeBlock, O as createContextMenu, P as createLinkPreview, Q as createProgress, R as createRangeSlider, S as createChart, T as createColorSlider, U as createColorArea, V as createColorField, W as createColorPicker, X as createTimeField, Y as createRangeCalendar, Z as createDateRangePicker, _ as createTooltip, $ as createPopover, a0 as createLoadingButton, a1 as createBreadcrumb, a2 as createEmptyState, a3 as createStatCard, a4 as createChartTooltip, a5 as createMultiSelect, a6 as createTagInput, a7 as createDateTimePicker, a8 as createFilterBuilder, a9 as createTimeline, aa as createActivityFeed, ab as createTreeView, ac as createFileExplorer, ad as createJsonViewer, ae as createVirtualList, af as createResizablePanel, ag as createSplitView, ah as createDataTable, ai as createEditableTable, aj as createRichTextEditor, ak as createSelect, al as createAddToCart, am as createScrollIsland } from '../engine-t8d7brjn.js';
+import { c as createJoinedCta, a as createImageZoom, b as createFontCycle, d as createThumbnailNav, e as createActionButton, f as createFilmHero, g as createEditorialReveal, h as createDrawer, i as createWeightHover, j as createSticker, k as createScrollDock, l as createLocalClock, m as createSpringCards, C as CurvedCarouselInstance, n as createPile, o as createWords, p as createFlow, q as createPop, r as createFitText, s as createStretchFooter, t as createRadialMenu, u as createTabs, v as createCounter, w as createReveal, x as createReflow, y as createSlotText, z as createSortable, A as createMaskText, B as createCascade, D as createTextRoll, E as createLetters, F as createParallax, G as createDepthGrid, H as createFrameZoom, I as createContrast, J as createMarquee, K as createCardDock, L as createSnapStrip, M as createFillText, T as TicketMenuOptions, N as TicketMenuInstance, O as createInfiniteReel, P as createRepelBento, Q as createRotator, R as createDragRuler, S as createDockPill } from '../reduced-4croIXl-.js';
+export { U as MK_HEAD_SCRIPT } from '../reduced-4croIXl-.js';
+import { c as createStepper, a as createRadioGroup, b as createEqualizerSlider, d as createTemperatureSlider, e as createRatingScale, f as createNotificationStack, g as createBentoGrid, h as createScrollPreviewDock, i as createStickyHeader, j as createHandwritingText, k as createParticleButton, l as createMagnetizeButton, m as createBadgeButton, n as createMorphingPageDots, o as createNotFound, p as createWheelPicker, q as createDrilldownMenu, r as createVoiceMessageBubble, s as createWaveformPlayer, t as createSignaturePad, u as createStudioDock, v as createTrailer, w as createQuantity, x as createPagination, y as createHoverCard, z as createInputOtp, A as createCalendar, B as createSlotPicker, C as createCreditCard, D as createCommandSearch, E as createHoldConfirm, F as createImagePreview, G as createNotificationBell, H as createPasswordStrength, I as createScratchCard, J as createStarRating, K as createAttachment, L as createSkeleton, M as createQuestionnaire, N as createCodeBlock, O as createContextMenu, P as createLinkPreview, Q as createProgress, R as createRangeSlider, S as createChart, T as createColorSlider, U as createColorArea, V as createColorField, W as createColorPicker, X as createTimeField, Y as createRangeCalendar, Z as createDateRangePicker, _ as createTooltip, $ as createPopover, a0 as createLoadingButton, a1 as createBreadcrumb, a2 as createEmptyState, a3 as createStatCard, a4 as createChartTooltip, a5 as createMultiSelect, a6 as createTagInput, a7 as createDateTimePicker, a8 as createFilterBuilder, a9 as createTimeline, aa as createActivityFeed, ab as createTreeView, ac as createFileExplorer, ad as createJsonViewer, ae as createVirtualList, af as createResizablePanel, ag as createSplitView, ah as createDataTable, ai as createEditableTable, aj as createRichTextEditor, ak as createSelect, al as createAddToCart, am as createScrollIsland, an as createScrollArea } from '../engine-D6XV-WNt.js';
 import { c as createLikeButton, a as createSwipeActions } from '../engine-QECQnGz1.js';
 import { I as Instance } from '../types-BkS_raL8.js';
 import 'gsap/SplitText';
@@ -93,6 +93,7 @@ declare const factories: {
     select: typeof createSelect;
     'add-to-cart': typeof createAddToCart;
     'scroll-island': typeof createScrollIsland;
+    'scroll-area': typeof createScrollArea;
     'weight-hover': typeof createWeightHover;
     sticker: typeof createSticker;
     'scroll-dock': typeof createScrollDock;

package/dist/auto/index.js

@@ -44,7 +44,7 @@ import {
   createTicketMenu,
   createWeightHover,
   createWords
-} from "../chunk-EDMXWUW3.js";
+} from "../chunk-PVN7YVKV.js";
 import {
   ScrollTrigger,
   createActivityFeed,
@@ -103,6 +103,7 @@ import {
   createResizablePanel,
   createRichTextEditor,
   createScratchCard,
+  createScrollArea,
   createScrollIsland,
   createScrollPreviewDock,
   createSelect,
@@ -127,11 +128,11 @@ import {
   createVoiceMessageBubble,
   createWaveformPlayer,
   createWheelPicker
-} from "../chunk-Q7IW4FV3.js";
+} from "../chunk-NCGNIPJE.js";
 import "../chunk-34EZ7DF4.js";
 import {
   MK_HEAD_SCRIPT
-} from "../chunk-DOOMULVV.js";
+} from "../chunk-OLT3CWDJ.js";
 import {
   warnOnce
 } from "../chunk-TGV27ZWM.js";
@@ -288,6 +289,7 @@ var factories = {
   "select": createSelect,
   "add-to-cart": createAddToCart,
   "scroll-island": createScrollIsland,
+  "scroll-area": createScrollArea,
   "weight-hover": createWeightHover,
   "sticker": createSticker,
   "scroll-dock": createScrollDock,