@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/elements/index.ts

@@ -17,6 +17,68 @@ import { MkHoverCardElement } from '../components/hover-card/element';
 import { MkInputOtpElement } from '../components/input-otp/element';
 import { MkCalendarElement } from '../components/calendar/element';
 import { MkSlotPickerElement } from '../components/slot-picker/element';
+import { MkAttachmentElement } from '../components/attachment/element';
+import { MkSkeletonElement } from '../components/skeleton/element';
+import { MkQuestionnaireElement } from '../components/questionnaire/element';
+import { MkCodeBlockElement } from '../components/code-block/element';
+import { MkContextMenuElement } from '../components/context-menu/element';
+import { MkDrawerElement } from '../components/drawer/element';
+import { MkLinkPreviewElement } from '../components/link-preview/element';
+import { MkProgressElement } from '../components/progress/element';
+import { MkRangeSliderElement } from '../components/range-slider/element';
+import { MkChartElement } from '../components/chart/element';
+import { MkCreditCardElement } from '../components/credit-card/element';
+import { MkCommandSearchElement } from '../components/command-search/element';
+import { MkHoldConfirmElement } from '../components/hold-confirm/element';
+import { MkImagePreviewElement } from '../components/image-preview/element';
+import { MkLikeButtonElement } from '../components/like-button/element';
+import { MkNotificationBellElement } from '../components/notification-bell/element';
+import { MkPasswordStrengthElement } from '../components/password-strength/element';
+import { MkScratchCardElement } from '../components/scratch-card/element';
+import { MkStarRatingElement } from '../components/star-rating/element';
+import { MkSwipeActionsElement } from '../components/swipe-actions/element';
+import { MkColorSliderElement } from '../components/color-slider/element';
+import { MkColorAreaElement } from '../components/color-area/element';
+import { MkColorFieldElement } from '../components/color-field/element';
+import { MkColorPickerElement } from '../components/color-picker/element';
+import { MkTimeFieldElement } from '../components/time-field/element';
+import { MkRangeCalendarElement } from '../components/range-calendar/element';
+import { MkDateRangePickerElement } from '../components/date-range-picker/element';
+import { MkTooltipElement } from '../components/tooltip/element';
+import { MkPopoverElement } from '../components/popover/element';
+import { MkLoadingButtonElement } from '../components/loading-button/element';
+import { MkBreadcrumbElement } from '../components/breadcrumb/element';
+import { MkEmptyStateElement } from '../components/empty-state/element';
+import { MkStatCardElement } from '../components/stat-card/element';
+import { MkChartTooltipElement } from '../components/chart-tooltip/element';
+import { MkMultiSelectElement } from '../components/multi-select/element';
+import { MkTagInputElement } from '../components/tag-input/element';
+import { MkDateTimePickerElement } from '../components/date-time-picker/element';
+import { MkFilterBuilderElement } from '../components/filter-builder/element';
+import { MkTimelineElement } from '../components/timeline/element';
+import { MkActivityFeedElement } from '../components/activity-feed/element';
+import { MkTreeViewElement } from '../components/tree-view/element';
+import { MkFileExplorerElement } from '../components/file-explorer/element';
+import { MkJsonViewerElement } from '../components/json-viewer/element';
+import { MkVirtualListElement } from '../components/virtual-list/element';
+import { MkResizablePanelElement } from '../components/resizable-panel/element';
+import { MkSplitViewElement } from '../components/split-view/element';
+import { MkDataTableElement } from '../components/data-table/element';
+import { MkEditableTableElement } from '../components/editable-table/element';
+import { MkRichTextEditorElement } from '../components/rich-text-editor/element';
+import { MkSelectElement } from '../components/select/element';
+import { MkAddToCartElement } from '../components/add-to-cart/element';
+import { MkScrollIslandElement } from '../components/scroll-island/element';
+import { MkPillButtonElement } from '../components/pill-button/element';
+import { MkToolbarElement } from '../components/toolbar/element';
+import { MkBidirectionalSliderElement } from '../components/bidirectional-slider/element';
+import { MkVoiceDotsElement } from '../components/voice-dots/element';
+import { MkPieChartElement } from '../components/pie-chart/element';
+import { MkRadarChartElement } from '../components/radar-chart/element';
+import { MkRadialChartElement } from '../components/radial-chart/element';
+import { MkSankeyChartElement } from '../components/sankey-chart/element';
+import { MkHeatmapChartElement } from '../components/heatmap-chart/element';
+import { MkOrbitMenuElement } from '../components/orbit-menu/element';
 // new-component:imports (scripts/new-component.mjs inserts above this line)
 
 export { MkElement, SafeHTMLElement, defineElement, type OptionType } from './base';
@@ -39,6 +101,68 @@ export { MkStudioDockElement, defineStudioDock } from '../components/studio-dock
 export { MkTrailerElement, defineTrailer } from '../components/trailer/element';
 export { MkCalendarElement } from '../components/calendar/element';
 export { MkSlotPickerElement } from '../components/slot-picker/element';
+export { MkAttachmentElement } from '../components/attachment/element';
+export { MkSkeletonElement } from '../components/skeleton/element';
+export { MkQuestionnaireElement } from '../components/questionnaire/element';
+export { MkCodeBlockElement } from '../components/code-block/element';
+export { MkContextMenuElement } from '../components/context-menu/element';
+export { MkDrawerElement } from '../components/drawer/element';
+export { MkLinkPreviewElement } from '../components/link-preview/element';
+export { MkProgressElement } from '../components/progress/element';
+export { MkRangeSliderElement } from '../components/range-slider/element';
+export { MkChartElement } from '../components/chart/element';
+export { MkCreditCardElement } from '../components/credit-card/element';
+export { MkCommandSearchElement } from '../components/command-search/element';
+export { MkHoldConfirmElement } from '../components/hold-confirm/element';
+export { MkImagePreviewElement } from '../components/image-preview/element';
+export { MkLikeButtonElement } from '../components/like-button/element';
+export { MkNotificationBellElement } from '../components/notification-bell/element';
+export { MkPasswordStrengthElement } from '../components/password-strength/element';
+export { MkScratchCardElement } from '../components/scratch-card/element';
+export { MkStarRatingElement } from '../components/star-rating/element';
+export { MkSwipeActionsElement } from '../components/swipe-actions/element';
+export { MkColorSliderElement } from '../components/color-slider/element';
+export { MkColorAreaElement } from '../components/color-area/element';
+export { MkColorFieldElement } from '../components/color-field/element';
+export { MkColorPickerElement } from '../components/color-picker/element';
+export { MkTimeFieldElement } from '../components/time-field/element';
+export { MkRangeCalendarElement } from '../components/range-calendar/element';
+export { MkDateRangePickerElement } from '../components/date-range-picker/element';
+export { MkTooltipElement } from '../components/tooltip/element';
+export { MkPopoverElement } from '../components/popover/element';
+export { MkLoadingButtonElement } from '../components/loading-button/element';
+export { MkBreadcrumbElement } from '../components/breadcrumb/element';
+export { MkEmptyStateElement } from '../components/empty-state/element';
+export { MkStatCardElement } from '../components/stat-card/element';
+export { MkChartTooltipElement } from '../components/chart-tooltip/element';
+export { MkMultiSelectElement } from '../components/multi-select/element';
+export { MkTagInputElement } from '../components/tag-input/element';
+export { MkDateTimePickerElement } from '../components/date-time-picker/element';
+export { MkFilterBuilderElement } from '../components/filter-builder/element';
+export { MkTimelineElement } from '../components/timeline/element';
+export { MkActivityFeedElement } from '../components/activity-feed/element';
+export { MkTreeViewElement } from '../components/tree-view/element';
+export { MkFileExplorerElement } from '../components/file-explorer/element';
+export { MkJsonViewerElement } from '../components/json-viewer/element';
+export { MkVirtualListElement } from '../components/virtual-list/element';
+export { MkResizablePanelElement } from '../components/resizable-panel/element';
+export { MkSplitViewElement } from '../components/split-view/element';
+export { MkDataTableElement } from '../components/data-table/element';
+export { MkEditableTableElement } from '../components/editable-table/element';
+export { MkRichTextEditorElement } from '../components/rich-text-editor/element';
+export { MkSelectElement } from '../components/select/element';
+export { MkAddToCartElement } from '../components/add-to-cart/element';
+export { MkScrollIslandElement } from '../components/scroll-island/element';
+export { MkPillButtonElement } from '../components/pill-button/element';
+export { MkToolbarElement } from '../components/toolbar/element';
+export { MkBidirectionalSliderElement } from '../components/bidirectional-slider/element';
+export { MkVoiceDotsElement } from '../components/voice-dots/element';
+export { MkPieChartElement } from '../components/pie-chart/element';
+export { MkRadarChartElement } from '../components/radar-chart/element';
+export { MkRadialChartElement } from '../components/radial-chart/element';
+export { MkSankeyChartElement } from '../components/sankey-chart/element';
+export { MkHeatmapChartElement } from '../components/heatmap-chart/element';
+export { MkOrbitMenuElement } from '../components/orbit-menu/element';
 // new-component:exports
 
 /** Tag name → element class, for every component. */
@@ -61,6 +185,68 @@ export const ELEMENTS = {
 'mk-trailer': MkTrailerElement,
   'mk-calendar': MkCalendarElement,
   'mk-slot-picker': MkSlotPickerElement,
+  'mk-attachment': MkAttachmentElement,
+  'mk-skeleton': MkSkeletonElement,
+  'mk-questionnaire': MkQuestionnaireElement,
+  'mk-code-block': MkCodeBlockElement,
+  'mk-context-menu': MkContextMenuElement,
+  'mk-drawer': MkDrawerElement,
+  'mk-link-preview': MkLinkPreviewElement,
+  'mk-progress': MkProgressElement,
+  'mk-range-slider': MkRangeSliderElement,
+  'mk-chart': MkChartElement,
+  'mk-credit-card': MkCreditCardElement,
+  'mk-command-search': MkCommandSearchElement,
+  'mk-hold-confirm': MkHoldConfirmElement,
+  'mk-image-preview': MkImagePreviewElement,
+  'mk-like-button': MkLikeButtonElement,
+  'mk-notification-bell': MkNotificationBellElement,
+  'mk-password-strength': MkPasswordStrengthElement,
+  'mk-scratch-card': MkScratchCardElement,
+  'mk-star-rating': MkStarRatingElement,
+  'mk-swipe-actions': MkSwipeActionsElement,
+  'mk-color-slider': MkColorSliderElement,
+  'mk-color-area': MkColorAreaElement,
+  'mk-color-field': MkColorFieldElement,
+  'mk-color-picker': MkColorPickerElement,
+  'mk-time-field': MkTimeFieldElement,
+  'mk-range-calendar': MkRangeCalendarElement,
+  'mk-date-range-picker': MkDateRangePickerElement,
+  'mk-tooltip': MkTooltipElement,
+  'mk-popover': MkPopoverElement,
+  'mk-loading-button': MkLoadingButtonElement,
+  'mk-breadcrumb': MkBreadcrumbElement,
+  'mk-empty-state': MkEmptyStateElement,
+  'mk-stat-card': MkStatCardElement,
+  'mk-chart-tooltip': MkChartTooltipElement,
+  'mk-multi-select': MkMultiSelectElement,
+  'mk-tag-input': MkTagInputElement,
+  'mk-date-time-picker': MkDateTimePickerElement,
+  'mk-filter-builder': MkFilterBuilderElement,
+  'mk-timeline': MkTimelineElement,
+  'mk-activity-feed': MkActivityFeedElement,
+  'mk-tree-view': MkTreeViewElement,
+  'mk-file-explorer': MkFileExplorerElement,
+  'mk-json-viewer': MkJsonViewerElement,
+  'mk-virtual-list': MkVirtualListElement,
+  'mk-resizable-panel': MkResizablePanelElement,
+  'mk-split-view': MkSplitViewElement,
+  'mk-data-table': MkDataTableElement,
+  'mk-editable-table': MkEditableTableElement,
+  'mk-rich-text-editor': MkRichTextEditorElement,
+  'mk-select': MkSelectElement,
+  'mk-add-to-cart': MkAddToCartElement,
+  'mk-scroll-island': MkScrollIslandElement,
+  'mk-pill-button': MkPillButtonElement,
+  'mk-toolbar': MkToolbarElement,
+  'mk-bidirectional-slider': MkBidirectionalSliderElement,
+  'mk-voice-dots': MkVoiceDotsElement,
+  'mk-pie-chart': MkPieChartElement,
+  'mk-radar-chart': MkRadarChartElement,
+  'mk-radial-chart': MkRadialChartElement,
+  'mk-sankey-chart': MkSankeyChartElement,
+  'mk-heatmap-chart': MkHeatmapChartElement,
+  'mk-orbit-menu': MkOrbitMenuElement,
   // new-component:entries
 } as const;
 

package/src/index.ts

@@ -153,9 +153,12 @@ export {
   createNav,
   revealShell,
   NAV_STYLES,
+  NAV_STYLE_ALIASES,
+  toNavStyle,
   type NavOptions,
   type NavInstance,
   type NavStyle,
+  type NavStyleAlias,
   type NavigateDetail,
 } from './components/nav/engine';
 export { createSteps, type StepsOptions, type StepsInstance, type StepDetail } from './components/steps/engine';
@@ -200,3 +203,88 @@ export { createWeightHover, type WeightHoverOptions, type WeightHoverInstance }
 export { createSticker, type StickerOptions, type StickerInstance, type StickerState } from './recipes/sticker/create-sticker';
 export { createScrollDock, type ScrollDockOptions, type ScrollDockInstance } from './recipes/scroll-dock/create-scroll-dock';
 export { createLocalClock, type LocalClockOptions, type LocalClockInstance } from './recipes/local-clock/create-local-clock';
+export { createAttachment, acceptsFile, describeAccept, formatBytes, type AttachmentOptions, type AttachmentInstance, type AttachmentFile, type AttachmentStatus, type AttachmentRejection, type AttachmentRejectCode, type AttachmentLabels } from './components/attachment/engine';
+export { createSkeleton, skeletonBones, type SkeletonOptions, type SkeletonInstance, type SkeletonShape, type SkeletonAnimation } from './components/skeleton/engine';
+export { createQuestionnaire, readAnswers, type QuestionnaireOptions, type QuestionnaireInstance, type QuestionnaireAnswers, type QuestionnaireLabels } from './components/questionnaire/engine';
+export { createCodeBlock, codeLines, type CodeBlockOptions, type CodeBlockInstance } from './components/code-block/engine';
+export { createContextMenu, type ContextMenuOptions, type ContextMenuInstance } from './components/context-menu/engine';
+export { createDrawer, type DrawerOptions, type DrawerInstance, type DrawerSide } from './components/drawer/engine';
+export { createLinkPreview, safeHref, safeImage, linkDomain, type LinkPreviewOptions, type LinkPreviewInstance, type LinkPreviewVariant } from './components/link-preview/engine';
+export { createProgress, type ProgressOptions, type ProgressInstance, type ProgressVariant } from './components/progress/engine';
+export { createRangeSlider, type RangeSliderOptions, type RangeSliderInstance, type RangeValue } from './components/range-slider/engine';
+export { createChart, type ChartOptions, type ChartInstance, type ChartSeries, type ChartPoint, type ChartType } from './components/chart/engine';
+export { press, blurIn, blurOut, collapse, shake, ringPulse, burst, rollDigits, type BlurInOptions, type BurstOptions } from './motion/micro';
+export { createCreditCard, type CreditCardOptions, type CreditCardInstance, type CreditCardField, type CreditCardValues, type CreditCardLabels } from './components/credit-card/engine';
+export { detectBrand, formatNumber, luhn, parseExpiry, cardLength, cvcLength, BRAND_LABELS, type CardBrand, type Expiry } from './components/credit-card/card';
+export { createCommandSearch, type CommandSearchOptions, type CommandSearchInstance, type CommandItem } from './components/command-search/engine';
+export { matchScore, type Match } from './components/command-search/match';
+export { createHoldConfirm, type HoldConfirmOptions, type HoldConfirmInstance } from './components/hold-confirm/engine';
+export { createImagePreview, type ImagePreviewOptions, type ImagePreviewInstance } from './components/image-preview/engine';
+export { createLikeButton, type LikeButtonOptions, type LikeButtonInstance } from './components/like-button/engine';
+export { createNotificationBell, type NotificationBellOptions, type NotificationBellInstance } from './components/notification-bell/engine';
+export { createPasswordStrength, type PasswordStrengthOptions, type PasswordStrengthInstance } from './components/password-strength/engine';
+export { scorePassword, STRENGTH_LABELS, type PasswordScore, type PasswordChecks } from './components/password-strength/score';
+export { createScratchCard, type ScratchCardOptions, type ScratchCardInstance } from './components/scratch-card/engine';
+export { createStarRating, type StarRatingOptions, type StarRatingInstance } from './components/star-rating/engine';
+export { createSwipeActions, type SwipeActionsOptions, type SwipeActionsInstance, type SwipeSide } from './components/swipe-actions/engine';
+export { tokenize, renderCode, languageFamily, type Token, type TokenType } from './components/code-block/highlight';
+export { createColorSlider, type ColorSliderOptions, type ColorSliderInstance } from './components/color-slider/engine';
+export { createColorArea, type ColorAreaOptions, type ColorAreaInstance } from './components/color-area/engine';
+export { createColorField, type ColorFieldOptions, type ColorFieldInstance } from './components/color-field/engine';
+export { createColorPicker, type ColorPickerOptions, type ColorPickerInstance } from './components/color-picker/engine';
+export { createTimeField, type TimeFieldOptions, type TimeFieldInstance } from './components/time-field/engine';
+export { createRangeCalendar, bandDuration, type RangeCalendarOptions, type RangeCalendarInstance } from './components/range-calendar/engine';
+export { createDateRangePicker, type DateRangePickerOptions, type DateRangePickerInstance } from './components/date-range-picker/engine';
+export {
+  parseColor, formatColor, toHex, toHsva, hsvToRgb, rgbToHsv, getChannel, setChannel, channelText, luminance, CHANNEL_LABELS,
+  type Hsva, type Rgba, type Hsla, type ColorFormat, type ColorChannel,
+} from './core/color';
+export { parseTime, formatTime, type TimeValue } from './core/segments';
+export { toRange, rangeKeys, rangeLength, type DateRange } from './core/date-range';
+export { createTooltip, type TooltipOptions, type TooltipInstance } from './components/tooltip/engine';
+export { place, type Placement, type Side, type Placed } from './core/position';
+export { createPopover, type PopoverOptions, type PopoverInstance } from './components/popover/engine';
+export { createLoadingButton, type LoadingButtonOptions, type LoadingButtonInstance, type LoadingState } from './components/loading-button/engine';
+export { createBreadcrumb, type BreadcrumbOptions, type BreadcrumbInstance, type BreadcrumbItem } from './components/breadcrumb/engine';
+export { createEmptyState, type EmptyStateOptions, type EmptyStateInstance, type EmptyIllustration, type EmptyAction } from './components/empty-state/engine';
+export { createStatCard, type StatCardOptions, type StatCardInstance } from './components/stat-card/engine';
+export { createChartTooltip, type ChartTooltipOptions, type ChartTooltipInstance, type ChartTooltipSeries } from './components/chart-tooltip/engine';
+export { createMultiSelect, type MultiSelectOptions, type MultiSelectInstance, type MultiSelectOption } from './components/multi-select/engine';
+export { createTagInput, type TagInputOptions, type TagInputInstance } from './components/tag-input/engine';
+export { createDateTimePicker, toDateTimeValue, dateTimeKey, type DateTimePickerOptions, type DateTimePickerInstance } from './components/date-time-picker/engine';
+export { createFilterBuilder, type FilterBuilderOptions, type FilterBuilderInstance } from './components/filter-builder/engine';
+export {
+  matchesFilter, describeFilter, emptyFilter, hasConditions, OPERATORS,
+  type FilterField, type FilterFieldType, type FilterGroup, type FilterRule, type FilterNode, type FilterValue,
+} from './core/filter';
+export { createTimeline, type TimelineOptions, type TimelineInstance, type TimelineEvent, type TimelineStatus } from './components/timeline/engine';
+export { relativeTime, dayLabel, type TimeInput } from './core/relative-time';
+export { createActivityFeed, type ActivityFeedOptions, type ActivityFeedInstance, type ActivityItem, type ActivityActor, type ActivityKind } from './components/activity-feed/engine';
+export { createTreeView, type TreeViewOptions, type TreeViewInstance } from './components/tree-view/engine';
+export { findNode, checkStates, toggleCheck, searchTree, type TreeNode, type CheckState } from './core/tree';
+export { createFileExplorer, type FileExplorerOptions, type FileExplorerInstance, type FileView, type FileChange } from './components/file-explorer/engine';
+export { formatSize, fileFamily, sortEntries, type FileEntry, type FileFamily, type FileSort } from './core/files';
+export { createJsonViewer, jsonPath, type JsonViewerOptions, type JsonViewerInstance, type JsonType } from './components/json-viewer/engine';
+export { createVirtualList, type VirtualListOptions, type VirtualListInstance, type VirtualKey, type VirtualScrollOptions } from './components/virtual-list/engine';
+export { createSizes, type VirtualSizes, type VirtualRange } from './core/virtual';
+export { createResizablePanel, normaliseSizes, type ResizablePanelOptions, type ResizablePanelInstance, type PanelOrientation } from './components/resizable-panel/engine';
+export { createSplitView, type SplitViewOptions, type SplitViewInstance, type SplitSide } from './components/split-view/engine';
+export {
+  createDataTable,
+  type DataTableOptions, type DataTableInstance, type DataColumn, type DataColumnType, type DataAction, type DataRow, type DataSort, type RowId, type SortDirection,
+} from './components/data-table/engine';
+export { createEditableTable, type EditableTableOptions, type EditableTableInstance, type EditableColumn, type RowChange, type EditorKind } from './components/editable-table/engine';
+export { createRichTextEditor, sanitizeHtml, type RichTextEditorOptions, type RichTextEditorInstance, type RichCommand } from './components/rich-text-editor/engine';
+export { createSelect, type SelectOptions, type SelectInstance, type SelectOption } from './components/select/engine';
+export { createAddToCart, type AddToCartOptions, type AddToCartInstance } from './components/add-to-cart/engine';
+export { createScrollIsland, type ScrollIslandOptions, type ScrollIslandInstance } from './components/scroll-island/engine';
+export { createPillButton, type PillButtonOptions, type PillButtonInstance } from './components/pill-button/engine';
+export { createToolbar, type ToolbarOptions, type ToolbarInstance } from './components/toolbar/engine';
+export { createBidirectionalSlider, type BidirectionalSliderOptions, type BidirectionalSliderInstance } from './components/bidirectional-slider/engine';
+export { createVoiceDots, type VoiceDotsOptions, type VoiceDotsInstance, type VoiceState } from './components/voice-dots/engine';
+export { createPieChart, type PieChartOptions, type PieChartInstance, type PieSlice } from './components/pie-chart/engine';
+export { createRadarChart, type RadarChartOptions, type RadarChartInstance, type RadarSeries } from './components/radar-chart/engine';
+export { createRadialChart, type RadialChartOptions, type RadialChartInstance, type RadialDatum } from './components/radial-chart/engine';
+export { createSankeyChart, type SankeyChartOptions, type SankeyChartInstance, type SankeyNode, type SankeyLink } from './components/sankey-chart/engine';
+export { createHeatmapChart, type HeatmapChartOptions, type HeatmapChartInstance, type HeatmapDatum } from './components/heatmap-chart/engine';
+export { createOrbitMenu, type OrbitMenuOptions, type OrbitMenuInstance } from './components/orbit-menu/engine';

package/src/motion/liquid.ts

@@ -9,7 +9,9 @@ import { transparentColor } from './surface';
  * a "goo" filter (blur 20, alpha threshold 19·a − 9), so while the surface's
  * blob swings out of the opener on a spring (144/14, kick 2400 px/s) they
  * stretch and merge like a liquid; the content zooms in from twice its size.
- * Each property runs on its own channel, as in the source.
+ * Each property runs on its own channel, as in the source. The goo only works
+ * while the shape leaves the opener: then the filter goes, so the rest of the
+ * travel is drawn sharp, and it settles as soon as the springs rest.
  */
 
 const GOO = 'mk-liquid-goo';
@@ -22,7 +24,7 @@ function ensureGoo() {
   svg.setAttribute('width', '0');
   svg.setAttribute('height', '0');
   svg.style.position = 'absolute';
-  svg.innerHTML = `<defs><filter id="${GOO}" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/><feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"/></filter></defs>`;
+  svg.innerHTML = `<defs><filter id="${GOO}" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="20"/><feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"/></filter></defs>`;
   document.body.append(svg);
 }
 
@@ -139,7 +141,7 @@ export function liquidOpen(surface: HTMLElement, origin: HTMLElement, parts: HTM
     }
   });
   const L = TIMING.liquid;
-  void motion.animate(
+  const settled = motion.animate(
     { top: box.top, left: box.left, width: box.width, height: box.height, radius: endRadius, scale: 1, blur: 0 },
     {
       top: spring(144, 14, { velocity: 2400, direction: towardY }),
@@ -154,17 +156,25 @@ export function liquidOpen(surface: HTMLElement, origin: HTMLElement, parts: HTM
   gsap.to(shape, { background: surfaceColor, duration: L.color, delay: L.colorDelay, ease: 'power2.out' });
   if (parts.length) gsap.to(parts, { opacity: 1, duration: L.color, delay: L.colorDelay, ease: 'power2.out' });
   gsap.to(originBlob, { opacity: 0, duration: L.ghost, delay: L.ghostDelay, ease: 'power2.out' });
+  // Once the opener's blob has gone there is nothing left to melt into: the thresholded blur would only blur the
+  // shape's edge, so the shape is drawn as it is for the rest of the way.
+  const sharpen = setTimeout(() => {
+    layer.style.filter = 'none';
+    originBlob.remove();
+  }, (L.ghostDelay + L.ghost) * 1000 + 30);
   let done = false;
   const finish = () => {
     if (done) return;
     done = true;
     motion.stop();
     clearTimeout(timer);
+    clearTimeout(sharpen);
     layer.remove();
     restore();
     if (parts.length) gsap.set(parts, { clearProps: 'opacity,transform,transformOrigin,filter' });
   };
-  // The springs settle well within the source's 1.1 s window.
+  // The surface takes over as soon as every channel rests; the source's 1.1 s window stays as a safety net.
+  void settled.then(finish);
   const timer = setTimeout(finish, L.safetyMs);
   return finish;
 }

package/src/motion/micro.ts

@@ -0,0 +1,248 @@
+import { gsap, EASE, registerMotion } from '../core/gsap';
+import { reduced } from '../core/reduced';
+
+/*
+ * Melonmind microinteractions (sources/app/css/ui-elements/animations.css,
+ * button.css, popover.css) on GSAP, shared by the components:
+ * - press: buttonClickAnimation, scale .95 × .9 and back in 500 ms (click curve).
+ * - blurIn: search-result-item-in (blur 16, y −20, 500 ms, 50 ms apart),
+ *   animation-general-in-2 (pop: blur 32, scale .7, 300 ms) or general-in (soft).
+ * - blurOut: item-out / -left / -bottom (blur 16, 500 ms).
+ * - collapse: a removed row folds (height 0, blur 16, 250 ms).
+ * - shake: the error shake (±4 px, 500 ms).
+ * - ringPulse: animation-highlight-2 (inset ring 0 → 4 px → 0 in 1 s).
+ * - burst: particles flying out of a control (like, rating, confirm).
+ * - rollDigits: Melonmind's RollingNumber, changed characters roll in their direction.
+ * Every helper returns its animation, or null under reduced motion (final state at once).
+ */
+
+type Targets = Element | Element[] | NodeListOf<Element> | null | undefined;
+
+const list = (targets: Targets) => (!targets ? [] : targets instanceof Element ? [targets] : [...targets]);
+const live = () => {
+  registerMotion();
+  return !reduced();
+};
+
+/** Press bounce (Melonmind buttonClickAnimation). */
+export function press(el: Element | null | undefined) {
+  if (!el || !live()) return null;
+  gsap.killTweensOf(el, 'scaleX,scaleY');
+  return gsap
+    .timeline({
+      onComplete: () => {
+        gsap.set(el, { clearProps: 'scale,transform' });
+      },
+    })
+    .to(el, { scaleX: 0.95, scaleY: 0.9, duration: 0.1, ease: 'power2.out' })
+    .to(el, { scaleX: 1, scaleY: 1, duration: 0.5, ease: EASE.click });
+}
+
+export interface BlurInOptions {
+  /** rise: list item (y −20, blur 16); pop: surface (scale .7, blur 32); soft: scale .96, blur 16. */
+  from?: 'rise' | 'pop' | 'soft';
+  stagger?: number;
+  delay?: number;
+  duration?: number;
+}
+
+export function blurIn(targets: Targets, { from = 'rise', stagger = 0.05, delay = 0, duration }: BlurInOptions = {}) {
+  const items = list(targets);
+  if (!items.length || !live()) return null;
+  const start =
+    from === 'pop' ? { opacity: 0, scale: 0.7, filter: 'blur(32px)' } : from === 'soft' ? { opacity: 0, scale: 0.96, filter: 'blur(16px)' } : { opacity: 0, y: -20, filter: 'blur(16px)' };
+  return gsap.fromTo(items, start, {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    filter: 'blur(0px)',
+    duration: duration ?? (from === 'pop' ? 0.3 : 0.5),
+    ease: from === 'pop' ? EASE.pop : 'power2.out',
+    stagger,
+    delay,
+    clearProps: 'opacity,transform,filter',
+  });
+}
+
+export function blurOut(targets: Targets, { to = 'up', onComplete }: { to?: 'up' | 'left' | 'down'; onComplete?: () => void } = {}) {
+  const items = list(targets);
+  if (!items.length) return null;
+  if (!live()) {
+    onComplete?.();
+    return null;
+  }
+  const end = to === 'left' ? { x: -64 } : to === 'down' ? { y: 24 } : { y: -20 };
+  return gsap.to(items, { ...end, opacity: 0, filter: 'blur(16px)', duration: 0.5, ease: 'power2.out', onComplete });
+}
+
+/** Fold an element away (Melonmind today-appt-item-out). */
+export function collapse(el: HTMLElement | null | undefined, { onComplete }: { onComplete?: () => void } = {}) {
+  if (!el) return null;
+  if (!live()) {
+    onComplete?.();
+    return null;
+  }
+  return gsap.to(el, {
+    height: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    marginTop: 0,
+    marginBottom: 0,
+    opacity: 0,
+    filter: 'blur(16px)',
+    overflow: 'hidden',
+    duration: 0.25,
+    ease: 'power2.in',
+    onComplete,
+  });
+}
+
+/** The error shake. */
+export function shake(el: Element | null | undefined, distance = 4) {
+  if (!el || !live()) return null;
+  gsap.killTweensOf(el, 'x');
+  return gsap.to(el, {
+    keyframes: { x: [0, -distance, distance, -distance, 0] },
+    duration: 0.5,
+    ease: EASE.shake,
+    clearProps: 'x,transform',
+  });
+}
+
+/** An inset ring that swells and fades (Melonmind animation-highlight-2). */
+export function ringPulse(el: HTMLElement | null | undefined, color = 'var(--mk-accent-soft)') {
+  if (!el || !live()) return null;
+  const before = { color: el.style.outlineColor, style: el.style.outlineStyle, offset: el.style.outlineOffset };
+  el.style.outlineColor = color;
+  el.style.outlineStyle = 'solid';
+  el.style.outlineOffset = '-4px';
+  const restore = () => {
+    el.style.outlineColor = before.color;
+    el.style.outlineStyle = before.style;
+    el.style.outlineOffset = before.offset;
+    el.style.removeProperty('outline-width');
+    if (el.getAttribute('style') === '') el.removeAttribute('style');
+  };
+  return gsap.fromTo(el, { outlineWidth: 0 }, { keyframes: { outlineWidth: [0, 4, 0] }, duration: 1, ease: 'power1.inOut', onComplete: restore, onInterrupt: restore });
+}
+
+export interface BurstOptions {
+  count?: number;
+  distance?: number;
+  /** CSS colours, used in turn. */
+  colors?: string[];
+  /** An expanding ring behind the particles. */
+  ring?: boolean;
+  size?: number;
+}
+
+/** Particles flying out of the centre of `origin` (like, rating, confirm). Removed when done. */
+export function burst(origin: HTMLElement | null | undefined, { count = 7, distance = 28, colors = ['var(--mk-accent)'], ring = true, size = 6 }: BurstOptions = {}) {
+  if (!origin || !live()) return null;
+  const layer = document.createElement('span');
+  layer.setAttribute('aria-hidden', 'true');
+  layer.dataset.mkBurst = '';
+  Object.assign(layer.style, { position: 'absolute', inset: '0', pointerEvents: 'none', overflow: 'visible', display: 'grid', placeItems: 'center' });
+  const positioned = getComputedStyle(origin).position !== 'static';
+  const previousPosition = origin.style.position;
+  if (!positioned) origin.style.position = 'relative';
+  origin.append(layer);
+  const cleanup = () => {
+    layer.remove();
+    if (!positioned) origin.style.position = previousPosition;
+    if (origin.getAttribute('style') === '') origin.removeAttribute('style');
+  };
+  const timeline = gsap.timeline({ onComplete: cleanup, onInterrupt: cleanup });
+  if (ring) {
+    const circle = document.createElement('span');
+    Object.assign(circle.style, { position: 'absolute', width: '100%', aspectRatio: '1', borderRadius: '50%', border: `2px solid ${colors[0]}` });
+    layer.append(circle);
+    timeline.fromTo(circle, { scale: 0.3, opacity: 0.9 }, { scale: 1.6, opacity: 0, duration: 0.5, ease: 'power2.out' }, 0);
+  }
+  for (let i = 0; i < count; i++) {
+    const angle = (i / count) * Math.PI * 2 - Math.PI / 2;
+    for (const [k, scale] of [[0, 1], [1, 0.6]] as const) {
+      const dot = document.createElement('span');
+      Object.assign(dot.style, {
+        position: 'absolute',
+        width: `${size * scale}px`,
+        height: `${size * scale}px`,
+        borderRadius: '50%',
+        background: colors[(i + k) % colors.length],
+      });
+      layer.append(dot);
+      const reach = distance * (k ? 0.72 : 1);
+      const turn = k ? 0.32 : 0;
+      timeline.fromTo(
+        dot,
+        { x: 0, y: 0, scale: 0, opacity: 1 },
+        { x: Math.cos(angle + turn) * reach, y: Math.sin(angle + turn) * reach, scale: 1, duration: 0.45, ease: 'power3.out' },
+        0.05,
+      );
+      timeline.to(dot, { scale: 0, opacity: 0, duration: 0.3, ease: 'power2.in' }, 0.38);
+    }
+  }
+  return timeline;
+}
+
+const rolling = new WeakMap<HTMLElement, gsap.core.Timeline>();
+
+/**
+ * Write `text` into `el`, rolling the characters that changed (up when the value
+ * grew, down when it shrank). Unchanged characters stay; the final DOM is plain text.
+ */
+export function rollDigits(el: HTMLElement | null | undefined, text: string, direction: 1 | -1 = 1, duration = 0.5) {
+  if (!el) return null;
+  rolling.get(el)?.progress(1).kill();
+  rolling.delete(el);
+  const previous = el.textContent ?? '';
+  if (previous === text || !live()) {
+    el.textContent = text;
+    return null;
+  }
+  // Right-aligned comparison: digits keep their place value.
+  const width = Math.max(previous.length, text.length);
+  const oldChars = previous.padStart(width, ' ');
+  const newChars = text.padStart(width, ' ');
+  el.textContent = '';
+  const label = document.createElement('span');
+  label.className = 'mk-sr-only';
+  label.textContent = text;
+  const visual = document.createElement('span');
+  visual.setAttribute('aria-hidden', 'true');
+  visual.style.display = 'inline-flex';
+  const moving: Array<[HTMLElement, HTMLElement]> = [];
+  // Only the padding added for the alignment is skipped; spaces inside the text stay.
+  const padding = Math.min(width - previous.length, width - text.length);
+  for (let i = padding; i < width; i++) {
+    const before = oldChars[i]!;
+    const after = newChars[i]!;
+    const cell = document.createElement('span');
+    Object.assign(cell.style, { position: 'relative', display: 'inline-block', overflow: 'hidden', whiteSpace: 'pre' });
+    const next = document.createElement('span');
+    next.style.display = 'inline-block';
+    next.textContent = after;
+    cell.append(next);
+    if (before !== after) {
+      const old = document.createElement('span');
+      Object.assign(old.style, { position: 'absolute', left: '0', top: '0', display: 'inline-block' });
+      old.textContent = before;
+      cell.append(old);
+      moving.push([old, next]);
+    }
+    visual.append(cell);
+  }
+  el.append(label, visual);
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      el.textContent = text;
+      rolling.delete(el);
+    },
+  });
+  moving.forEach(([old, next], i) => {
+    timeline.to(old, { yPercent: -100 * direction, opacity: 0, filter: 'blur(4px)', duration, ease: EASE.signature }, i * 0.03);
+    timeline.fromTo(next, { yPercent: 100 * direction, opacity: 0, filter: 'blur(4px)' }, { yPercent: 0, opacity: 1, filter: 'blur(0px)', duration, ease: EASE.signature }, i * 0.03);
+  });
+  rolling.set(el, timeline);
+  return timeline;
+}