@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/motion/sheet.ts

@@ -1,65 +1,88 @@
-import { gsap, EASE, registerMotion } from '../core/gsap';
-import { motionSpring } from '../core/physics-spring';
-import { reduced } from '../core/reduced';
-import { clearStyles } from '../core/styles';
-import { TIMING } from '../core/timing';
-import { backdropVeil, ghostOf } from './surface';
-
-/*
- * project sheet: the surface rises from below the screen (0.72 s,
- * cubic(.16,1,.3,1)) while the page behind ([data-mk-underlay]) sinks to
- * scale .98 / opacity .4 on a 300/30 spring. It closes through an inert copy
- * that drops away, so focus returns at once.
- */
-
-const UNDERLAY_STYLES = ['transform', 'translate', 'rotate', 'scale', 'transform-origin', 'opacity'];
-
-export function sheetOpen(surface: HTMLElement) {
-  if (reduced()) return null;
-  registerMotion();
-  return gsap.fromTo(surface, { yPercent: 100 }, { yPercent: 0, duration: TIMING.sheet.open, ease: EASE.sheet, clearProps: 'transform' });
-}
-
-/** Drop a copy of the (still open) sheet off the bottom of the screen. */
-export function sheetClose(surface: HTMLElement, { inPlace = false }: { inPlace?: boolean } = {}) {
-  registerMotion();
-  const dragged = inPlace ? Number(gsap.getProperty(surface, 'y')) || 0 : 0;
-  gsap.killTweensOf(surface);
-  clearStyles([surface], ['transform', 'translate', 'rotate', 'scale']);
-  const ghost = reduced() ? null : ghostOf(surface);
-  if (!ghost) return null;
-  const veil = backdropVeil(surface);
-  document.body.append(veil, ghost);
-  gsap.to(veil, { opacity: 0, duration: TIMING.sheet.close, ease: 'power3.in', onComplete: () => veil.remove() });
-  return gsap.fromTo(
-    ghost,
-    { y: dragged, yPercent: 0 },
-    { yPercent: 100, duration: TIMING.sheet.close, ease: EASE.sheet, onComplete: () => ghost.remove() },
-  );
-}
-
-export function pushUnderlay(elements: HTMLElement[]) {
-  if (!elements.length || reduced()) return;
-  registerMotion();
-  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
-  gsap.to(elements, {
-    scale: TIMING.sheet.underlayScale,
-    opacity: TIMING.sheet.underlayOpacity,
-    transformOrigin: '50% 0',
-    duration,
-    ease,
-    overwrite: 'auto',
-  });
-}
-
-export function releaseUnderlay(elements: HTMLElement[], animated = true) {
-  if (!elements.length) return;
-  const restore = () => clearStyles(elements, UNDERLAY_STYLES);
-  if (!animated || reduced()) {
-    gsap.killTweensOf(elements);
-    restore();
-    return;
-  }
-  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
-  gsap.to(elements, { scale: 1, opacity: 1, duration, ease, overwrite: 'auto', onComplete: restore });
-}
+import { gsap, EASE, registerMotion } from '../core/gsap';
+import { motionSpring } from '../core/physics-spring';
+import { reduced } from '../core/reduced';
+import { clearStyles } from '../core/styles';
+import { TIMING } from '../core/timing';
+import { backdropVeil, ghostOf } from './surface';
+
+/*
+ * project sheet: the surface rises from below the screen (0.72 s,
+ * cubic(.16,1,.3,1)) while the page behind ([data-mk-underlay]) sinks to
+ * scale .98 / opacity .4 on a 300/30 spring. It closes through an inert copy
+ * that drops away, so focus returns at once.
+ */
+
+const UNDERLAY_STYLES = ['transform', 'translate', 'rotate', 'scale', 'transform-origin', 'opacity'];
+
+export function sheetOpen(surface: HTMLElement) {
+  if (reduced()) return null;
+  registerMotion();
+  return gsap.fromTo(surface, { yPercent: 100 }, { yPercent: 0, duration: TIMING.sheet.open, ease: EASE.sheet, clearProps: 'transform' });
+}
+
+/** Side of a drawer surface: data-mk-drawer="left", else right. */
+const slideFrom = (surface: HTMLElement) => (surface.dataset.mkDrawer === 'left' ? -1 : 1);
+
+/** Drawer: the surface slides in from its side on the sheet curve. */
+export function slideOpen(surface: HTMLElement) {
+  if (reduced()) return null;
+  registerMotion();
+  return gsap.fromTo(surface, { xPercent: 104 * slideFrom(surface) }, { xPercent: 0, duration: TIMING.sheet.open, ease: EASE.sheet, clearProps: 'transform' });
+}
+
+/** Slide a copy of the (still open) drawer back off its side, so focus returns at once. */
+export function slideClose(surface: HTMLElement) {
+  registerMotion();
+  gsap.killTweensOf(surface);
+  clearStyles([surface], ['transform', 'translate', 'rotate', 'scale']);
+  const ghost = reduced() ? null : ghostOf(surface);
+  if (!ghost) return null;
+  const veil = backdropVeil(surface);
+  document.body.append(veil, ghost);
+  gsap.to(veil, { opacity: 0, duration: TIMING.sheet.close * 0.8, ease: 'power3.in', onComplete: () => veil.remove() });
+  return gsap.to(ghost, { xPercent: 104 * slideFrom(surface), duration: TIMING.sheet.close * 0.8, ease: 'power3.in', onComplete: () => ghost.remove() });
+}
+
+/** Drop a copy of the (still open) sheet off the bottom of the screen. */
+export function sheetClose(surface: HTMLElement, { inPlace = false }: { inPlace?: boolean } = {}) {
+  registerMotion();
+  const dragged = inPlace ? Number(gsap.getProperty(surface, 'y')) || 0 : 0;
+  gsap.killTweensOf(surface);
+  clearStyles([surface], ['transform', 'translate', 'rotate', 'scale']);
+  const ghost = reduced() ? null : ghostOf(surface);
+  if (!ghost) return null;
+  const veil = backdropVeil(surface);
+  document.body.append(veil, ghost);
+  gsap.to(veil, { opacity: 0, duration: TIMING.sheet.close, ease: 'power3.in', onComplete: () => veil.remove() });
+  return gsap.fromTo(
+    ghost,
+    { y: dragged, yPercent: 0 },
+    { yPercent: 100, duration: TIMING.sheet.close, ease: EASE.sheet, onComplete: () => ghost.remove() },
+  );
+}
+
+export function pushUnderlay(elements: HTMLElement[]) {
+  if (!elements.length || reduced()) return;
+  registerMotion();
+  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
+  gsap.to(elements, {
+    scale: TIMING.sheet.underlayScale,
+    opacity: TIMING.sheet.underlayOpacity,
+    transformOrigin: '50% 0',
+    duration,
+    ease,
+    overwrite: 'auto',
+  });
+}
+
+export function releaseUnderlay(elements: HTMLElement[], animated = true) {
+  if (!elements.length) return;
+  const restore = () => clearStyles(elements, UNDERLAY_STYLES);
+  if (!animated || reduced()) {
+    gsap.killTweensOf(elements);
+    restore();
+    return;
+  }
+  const { ease, duration } = motionSpring(...TIMING.springs.underlay);
+  gsap.to(elements, { scale: 1, opacity: 1, duration, ease, overwrite: 'auto', onComplete: restore });
+}

package/src/motion/surface.ts

@@ -78,6 +78,15 @@ export function ghostOf(surface: HTMLElement): HTMLElement | null {
   const ghost = document.createElement('div');
   ghost.className = surface.className;
   ghost.innerHTML = surface.innerHTML;
+  // The markup carries attributes, not what was typed or chosen since: copy the live values too.
+  const live = surface.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select');
+  ghost.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select').forEach((copy, i) => {
+    const source = live[i];
+    if (!source) return;
+    if (copy instanceof HTMLSelectElement) copy.selectedIndex = (source as HTMLSelectElement).selectedIndex;
+    else copy.value = source.value;
+    if (copy instanceof HTMLInputElement && source instanceof HTMLInputElement) copy.checked = source.checked;
+  });
   ghost.setAttribute('aria-hidden', 'true');
   ghost.inert = true;
   ghost.dataset.mkGhost = '';

package/src/react/index.ts

@@ -78,3 +78,81 @@ export { confetti, type ConfettiOptions } from '../motion/confetti';
 export { MK_HEAD_SCRIPT } from '../core/reduced';
 export { MK_THEME_HEAD_SCRIPT, themeHeadScript } from '../theme/theme';
 export { Island, IslandDots, type IslandProps, type IslandPanel } from '../components/island/react';
+export { Quantity, type QuantityProps } from '../components/quantity/react';
+export { Pagination, type PaginationProps } from '../components/pagination/react';
+export { HoverCard, type HoverCardProps } from '../components/hover-card/react';
+export { InputOtp, type InputOtpProps } from '../components/input-otp/react';
+export { useJoinedCta } from './use-joined-cta';
+export { useImageZoom } from './use-image-zoom';
+export { useFontCycle } from './use-font-cycle';
+export { useThumbnailNav } from './use-thumbnail-nav';
+export { useActionButton } from './use-action-button';
+export { useFilmHero } from './use-film-hero';
+export { useEditorialReveal } from './use-editorial-reveal';
+export { useStudioDock } from './use-studio-dock';
+export { useTrailer } from './use-trailer';
+export { StudioDock, type StudioDockProps } from '../components/studio-dock/react';
+export { Trailer, type TrailerProps } from '../components/trailer/react';
+export { Calendar, type CalendarProps } from '../components/calendar/react';
+export { SlotPicker, type SlotPickerProps } from '../components/slot-picker/react';
+export { useWeightHover } from './use-weight-hover';
+export { useSticker } from './use-sticker';
+export { useScrollDock } from './use-scroll-dock';
+export { useLocalClock } from './use-local-clock';
+export { Attachment, type AttachmentProps, type AttachmentUpload } from '../components/attachment/react';
+export { Skeleton, type SkeletonProps } from '../components/skeleton/react';
+export { Questionnaire, type QuestionnaireProps, type Question, type QuestionType, type QuestionOption } from '../components/questionnaire/react';
+export { CodeBlock, type CodeBlockProps } from '../components/code-block/react';
+export { ContextMenu, type ContextMenuProps } from '../components/context-menu/react';
+export { Drawer, useDrawer, type DrawerRootProps } from '../components/drawer/react';
+export { LinkPreview, type LinkPreviewProps } from '../components/link-preview/react';
+export { Progress, type ProgressProps } from '../components/progress/react';
+export { RangeSlider, type RangeSliderProps } from '../components/range-slider/react';
+export { Chart, type ChartProps } from '../components/chart/react';
+export { CreditCard, type CreditCardProps } from '../components/credit-card/react';
+export { CommandSearch, type CommandSearchProps } from '../components/command-search/react';
+export type { CommandItem } from '../components/command-search/engine';
+export { HoldConfirm, type HoldConfirmProps } from '../components/hold-confirm/react';
+export { ImagePreview, type ImagePreviewProps, type PreviewImage } from '../components/image-preview/react';
+export { LikeButton, type LikeButtonProps } from '../components/like-button/react';
+export { NotificationBell, type NotificationBellProps } from '../components/notification-bell/react';
+export { PasswordStrength, type PasswordStrengthProps } from '../components/password-strength/react';
+export { ScratchCard, type ScratchCardProps } from '../components/scratch-card/react';
+export { StarRating, type StarRatingProps } from '../components/star-rating/react';
+export { SwipeActions, type SwipeActionsProps, type SwipeRowProps, type SwipeAction } from '../components/swipe-actions/react';
+export { ColorSlider, type ColorSliderProps } from '../components/color-slider/react';
+export { ColorArea, type ColorAreaProps } from '../components/color-area/react';
+export { ColorField, type ColorFieldProps } from '../components/color-field/react';
+export { ColorPicker, type ColorPickerProps } from '../components/color-picker/react';
+export { TimeField, type TimeFieldProps } from '../components/time-field/react';
+export { RangeCalendar, type RangeCalendarProps } from '../components/range-calendar/react';
+export { DateRangePicker, type DateRangePickerProps } from '../components/date-range-picker/react';
+export { Tooltip, type TooltipProps } from '../components/tooltip/react';
+export { Popover, type PopoverProps } from '../components/popover/react';
+export { LoadingButton, type LoadingButtonProps } from '../components/loading-button/react';
+export { Breadcrumb, type BreadcrumbProps } from '../components/breadcrumb/react';
+export { EmptyState, type EmptyStateProps } from '../components/empty-state/react';
+export { StatCard, type StatCardProps } from '../components/stat-card/react';
+export { ChartTooltip, type ChartTooltipProps } from '../components/chart-tooltip/react';
+export { MultiSelect, type MultiSelectProps } from '../components/multi-select/react';
+export { TagInput, type TagInputProps } from '../components/tag-input/react';
+export { DateTimePicker, type DateTimePickerProps } from '../components/date-time-picker/react';
+export { FilterBuilder, type FilterBuilderProps } from '../components/filter-builder/react';
+export { Timeline, type TimelineProps } from '../components/timeline/react';
+export type { TimelineEvent, TimelineStatus } from '../components/timeline/engine';
+export { ActivityFeed, type ActivityFeedProps, type ActivityFeedHandle } from '../components/activity-feed/react';
+export type { ActivityItem, ActivityActor, ActivityKind } from '../components/activity-feed/engine';
+export { TreeView, type TreeViewProps, type TreeViewHandle } from '../components/tree-view/react';
+export type { TreeNode } from '../core/tree';
+export { FileExplorer, type FileExplorerProps, type FileExplorerHandle } from '../components/file-explorer/react';
+export type { FileEntry, FileView, FileChange } from '../components/file-explorer/engine';
+export { JsonViewer, type JsonViewerProps, type JsonViewerHandle } from '../components/json-viewer/react';
+export { VirtualList, type VirtualListProps, type VirtualListHandle } from '../components/virtual-list/react';
+export { ResizablePanel, type ResizablePanelProps, type ResizablePanelHandle } from '../components/resizable-panel/react';
+export { SplitView, type SplitViewProps, type SplitViewHandle } from '../components/split-view/react';
+export { DataTable, type DataTableProps, type DataTableHandle } from '../components/data-table/react';
+export type { DataColumn, DataAction, DataRow, DataSort, RowId } from '../components/data-table/engine';
+export { EditableTable, type EditableTableProps, type EditableTableHandle } from '../components/editable-table/react';
+export type { EditableColumn, RowChange, EditorKind } from '../components/editable-table/engine';
+export { RichTextEditor, type RichTextEditorProps, type RichTextEditorHandle } from '../components/rich-text-editor/react';
+export type { RichCommand } from '../components/rich-text-editor/engine';

package/src/react/use-action-button.ts

@@ -0,0 +1,6 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createActionButton, type ActionButtonOptions } from '../recipes/action-button/create-action-button';
+export const useActionButton = (ref: RefObject<HTMLElement | null>, options?: ActionButtonOptions, deps?: DependencyList) =>
+  useRecipe(ref, createActionButton, options, deps);

package/src/react/use-editorial-reveal.ts

@@ -0,0 +1,7 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createEditorialReveal, type EditorialRevealOptions } from '../recipes/editorial-reveal/create-editorial-reveal';
+export function useEditorialReveal(ref: RefObject<HTMLElement | null>, options: EditorialRevealOptions = {}, deps?: DependencyList) {
+  return useRecipe(ref, createEditorialReveal, options, deps);
+}

package/src/react/use-film-hero.ts

@@ -0,0 +1,6 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createFilmHero, type FilmHeroOptions } from '../recipes/film-hero/create-film-hero';
+export const useFilmHero = (ref: RefObject<HTMLElement | null>, options?: FilmHeroOptions, deps?: DependencyList) =>
+  useRecipe(ref, createFilmHero, options, deps);

package/src/react/use-font-cycle.ts

@@ -0,0 +1,7 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createFontCycle, type FontCycleOptions } from '../recipes/font-cycle/create-font-cycle';
+
+export const useFontCycle = (ref: RefObject<HTMLElement | null>, options?: FontCycleOptions, deps?: DependencyList) =>
+  useRecipe(ref, createFontCycle, options, deps);

package/src/react/use-image-zoom.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createImageZoom, type ImageZoomOptions } from '../recipes/image-zoom/create-image-zoom';
+export const useImageZoom = (ref: RefObject<HTMLElement | null>, options?: ImageZoomOptions, deps?: DependencyList) => useRecipe(ref, createImageZoom, options, deps);

package/src/react/use-joined-cta.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createJoinedCta, type JoinedCtaOptions } from '../recipes/joined-cta/create-joined-cta';
+export const useJoinedCta = (ref: RefObject<HTMLElement | null>, options?: JoinedCtaOptions, deps?: DependencyList) => useRecipe(ref, createJoinedCta, options, deps);

package/src/react/use-local-clock.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createLocalClock, type LocalClockOptions } from '../recipes/local-clock/create-local-clock';
+export const useLocalClock = (ref: RefObject<HTMLElement | null>, options?: LocalClockOptions, deps?: DependencyList) => useRecipe(ref, createLocalClock, options, deps);

package/src/react/use-scroll-dock.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createScrollDock, type ScrollDockOptions } from '../recipes/scroll-dock/create-scroll-dock';
+export const useScrollDock = (ref: RefObject<HTMLElement | null>, options?: ScrollDockOptions, deps?: DependencyList) => useRecipe(ref, createScrollDock, options, deps);

package/src/react/use-sticker.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createSticker, type StickerOptions } from '../recipes/sticker/create-sticker';
+export const useSticker = (ref: RefObject<HTMLElement | null>, options?: StickerOptions, deps?: DependencyList) => useRecipe(ref, createSticker, options, deps);

package/src/react/use-studio-dock.ts

@@ -0,0 +1,8 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useLatest, useRecipe } from './use-recipe';
+import { createStudioDock, type StudioDockOptions } from '../components/studio-dock/engine';
+export function useStudioDock(ref: RefObject<HTMLElement | null>, options: StudioDockOptions = {}, deps?: DependencyList) {
+  const change = useLatest(options.onChange);
+  return useRecipe(ref, createStudioDock, { ...options, onChange: state => change.current?.(state) }, deps);
+}

package/src/react/use-thumbnail-nav.ts

@@ -0,0 +1,7 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createThumbnailNav, type ThumbnailNavOptions } from '../recipes/thumbnail-nav/create-thumbnail-nav';
+
+export const useThumbnailNav = (ref: RefObject<HTMLElement | null>, options?: ThumbnailNavOptions, deps?: DependencyList) =>
+  useRecipe(ref, createThumbnailNav, options, deps);

package/src/react/use-trailer.ts

@@ -0,0 +1,6 @@
+'use client';
+import type { DependencyList, RefObject } from 'react';
+import { useRecipe } from './use-recipe';
+import { createTrailer, type TrailerOptions } from '../components/trailer/engine';
+export const useTrailer = (ref: RefObject<HTMLElement | null>, options?: TrailerOptions, deps?: DependencyList) =>
+  useRecipe(ref, createTrailer, options, deps);

package/src/react/use-weight-hover.ts

@@ -0,0 +1,5 @@
+'use client';
+import type { RefObject, DependencyList } from 'react';
+import { useRecipe } from './use-recipe';
+import { createWeightHover, type WeightHoverOptions } from '../recipes/weight-hover/create-weight-hover';
+export const useWeightHover = (ref: RefObject<HTMLElement | null>, options?: WeightHoverOptions, deps?: DependencyList) => useRecipe(ref, createWeightHover, options, deps);

package/src/recipes/action-button/README.md

@@ -0,0 +1,31 @@
+# action-button
+
+Botones con sombra firme inspirados en Don't Look Up y etiquetas en máscara inspiradas en la ficha A24.
+
+## HTML / Astro
+
+```html
+<button class="mk-action-button" data-mk="action-button" data-mk-variant="primary">Empezar</button>
+<button class="mk-action-button" data-mk="action-button" data-mk-variant="film">
+  <span data-mk-action-label>Ver trailer ↗</span>
+</button>
+```
+
+```ts
+const button = createActionButton(element, {
+  variant: 'icon', toggle: true,
+  onPressedChange: value => console.log(value),
+});
+button.setPressed(true);
+button.destroy();
+```
+
+React: `useActionButton(ref, options, deps?)`. Conserva botones/enlaces semánticos escritos por el consumidor; la receta no ejecuta navegación ni reproduce sonidos. Variantes: `primary`, `secondary`, `icon`, `stepper`, `film`. Las variantes también pueden usarse sólo con CSS mediante `data-mk-action-variant`; `film` necesita el motor para duplicar su etiqueta marcada.
+
+## Movimiento / accesibilidad
+
+Press 130ms ease-out, color150ms ease. Hover baja3px y reduce sombra; active5×6px. Film usa clip.4s/translate.35s/scale.3s y copia retrasada75ms. Es una adaptación reusable; no reproduce todos los overrides particulares del juego original ni su lógica económica.
+
+`toggle` es opt-in y usa `aria-pressed`; controles disabled y `aria-disabled` no cambian el estado. Un icono necesita `aria-label`. La copia rolling tiene `aria-hidden`, el nodo original se conserva. Focus visible explícito. Reduced-motion elimina las transiciones y la duplicación visual; los gestos de botón siguen indicando estado. `destroy()` restaura nodos/atributos y retira listeners.
+
+Tokens: `--mk-action-ink`, `--mk-action-paper`, `--mk-action-lift`, `--mk-action-tilt`, `--mk-action-focus`, `--mk-film-font`.

package/src/recipes/action-button/action-button.css

@@ -0,0 +1,113 @@
+.mk-action-button {
+  --mk-action-ink: var(--mk-text, #171713);
+  --mk-action-paper: var(--mk-surface, #f7f5ee);
+  --mk-action-lift: 5px;
+  --mk-action-tilt: -1.2deg;
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .6em;
+  min-height: 44px;
+  padding: .65em 1.5em;
+  border: 3px solid var(--mk-action-paper);
+  border-radius: 24px 30px 22px 28px / 30px 22px 28px 24px;
+  background: var(--mk-action-ink);
+  color: var(--mk-action-paper);
+  box-shadow: var(--mk-action-lift) calc(var(--mk-action-lift) + 1px) 0 var(--mk-action-ink);
+  transform: rotate(var(--mk-action-tilt));
+  font: 700 .85rem/1.15 var(--mk-font, sans-serif);
+  letter-spacing: .045em;
+  text-transform: uppercase;
+  text-decoration: none;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: transform 130ms ease-out, box-shadow 130ms ease-out, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+.mk-action-button[data-mk-action-variant="secondary"],
+.mk-action-button[data-mk-action-variant="icon"] {
+  --mk-action-tilt: 1.1deg;
+  background: var(--mk-action-paper);
+  border-color: var(--mk-action-ink);
+  color: var(--mk-action-ink);
+}
+.mk-action-button[data-mk-action-variant="icon"] {
+  width: 44px;
+  padding: 8px;
+  border-radius: 16px 20px 15px 19px / 20px 15px 19px 16px;
+}
+.mk-action-button svg { width: 1.25em; height: 1.25em; flex: none; }
+.mk-action-button[data-mk-action-variant="stepper"] {
+  --mk-action-tilt: 0deg;
+  min-width: 44px;
+  padding: .5em;
+  border: 2px solid var(--mk-action-ink);
+  border-radius: 11px;
+  background: var(--mk-action-paper);
+  color: var(--mk-action-ink);
+  box-shadow: none;
+}
+.mk-action-button[data-mk-action-variant="film"] {
+  --mk-action-tilt: 0deg;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding: .5em 0;
+  font-family: var(--mk-film-font, Georgia, serif);
+  font-size: 1.25rem;
+}
+.mk-action-button[data-mk-action-variant="film"]::before,
+.mk-action-button[data-mk-action-variant="film"]::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  background: currentColor;
+  transition: transform .4s cubic-bezier(.32,.72,0,1);
+}
+.mk-action-button[data-mk-action-variant="film"]::after { inset: auto 0 0; }
+[data-mk-action-label] { display: inline-grid; overflow: clip; }
+.mk-action-button__line, .mk-action-button__copy {
+  grid-area: 1 / 1;
+  transition: clip-path .4s cubic-bezier(.32,.72,0,1), translate .35s cubic-bezier(.32,.72,0,1), scale .3s cubic-bezier(.34,2.27,.64,1);
+}
+.mk-action-button__line { clip-path: inset(0); transform-origin: bottom; }
+.mk-action-button__copy { clip-path: inset(0 0 100%); translate: 0 -.25em; scale: 1.05; transform-origin: top; }
+@media (hover: hover) {
+  .mk-action-button:not(:disabled):not([aria-disabled="true"]):hover {
+    transform: rotate(var(--mk-action-tilt)) translate(3px, 3px);
+    box-shadow: 2px 3px 0 var(--mk-action-ink);
+  }
+  .mk-action-button:is([data-mk-action-variant="secondary"], [data-mk-action-variant="icon"], [data-mk-action-variant="stepper"]):not(:disabled):not([aria-disabled="true"]):hover {
+    background: var(--mk-action-ink);
+    border-color: var(--mk-action-paper);
+    color: var(--mk-action-paper);
+  }
+  .mk-action-button[data-mk-action-variant="stepper"]:not(:disabled):not([aria-disabled="true"]):hover { transform: none; box-shadow: none; }
+}
+.mk-action-button:not(:disabled):not([aria-disabled="true"]):active,
+.mk-action-button[aria-pressed="true"] {
+  transform: rotate(var(--mk-action-tilt)) translate(var(--mk-action-lift), calc(var(--mk-action-lift) + 1px));
+  box-shadow: 0 0 0 var(--mk-action-ink);
+}
+.mk-action-button[aria-pressed="true"] { background: var(--mk-action-ink); color: var(--mk-action-paper); }
+.mk-action-button[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):hover { transform: rotate(var(--mk-action-tilt)) translate(var(--mk-action-lift), calc(var(--mk-action-lift) + 1px)); box-shadow: none; }
+.mk-action-button[data-mk-action-variant="stepper"]:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); box-shadow: none; }
+.mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
+  transform: scale(1.03) rotate(-.75deg);
+  box-shadow: none;
+}
+.mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .mk-action-button__line { clip-path: inset(100% 0 0); translate: 0 .25em; scale: .95; }
+.mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .mk-action-button__copy { clip-path: inset(0); translate: 0; scale: 1; transition-delay: 75ms; }
+.mk-action-button[data-mk-action-variant="film"]:active:not(:disabled) { transform: scale(.97); }
+.mk-action-button:focus-visible { outline: 3px solid var(--mk-action-focus, #356bdf); outline-offset: 7px; }
+.mk-action-button:disabled, .mk-action-button[aria-disabled="true"] { opacity: .35; cursor: default; }
+@media (prefers-reduced-motion: reduce) {
+  .mk-action-button, .mk-action-button *, .mk-action-button::before, .mk-action-button::after { transition: none; }
+  .mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { transform: none; }
+  .mk-action-button[data-mk-action-variant="film"]:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .mk-action-button__line { clip-path: none; translate: none; scale: 1; }
+  .mk-action-button__copy { display: none; }
+}

package/src/recipes/action-button/create-action-button.ts

@@ -0,0 +1,56 @@
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+export type ActionButtonVariant = 'primary' | 'secondary' | 'icon' | 'stepper' | 'film';
+export interface ActionButtonOptions {
+  variant?: ActionButtonVariant;
+  /** Toggle aria-pressed on activation. Ordinary action buttons leave it unset. */
+  toggle?: boolean;
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+}
+export interface ActionButtonInstance extends Instance {
+  setPressed(pressed: boolean): void;
+  readonly pressed: boolean;
+}
+
+/** Drawn press buttons and a masked rolling-label film variant. Uses native activation. */
+export function createActionButton(root: HTMLElement | null, options: ActionButtonOptions = {}): ActionButtonInstance {
+  if (!root) return inert({ setPressed() {}, pressed: false });
+  const scope = createScope();
+  const variant = options.variant ?? (root.getAttribute('data-mk-action-variant') as ActionButtonVariant | null) ?? 'primary';
+  scope.attr(root, 'data-mk-action-variant', variant);
+  scope.attr(root, 'data-mk-action-ready', '');
+  const label = root.querySelector<HTMLElement>('[data-mk-action-label]');
+  if (label && variant === 'film') {
+    const nodes = [...label.childNodes];
+    const line = document.createElement('span');
+    line.className = 'mk-action-button__line';
+    line.append(...nodes);
+    const copy = document.createElement('span');
+    copy.className = 'mk-action-button__copy';
+    copy.setAttribute('aria-hidden', 'true');
+    // Plain text prevents duplicate interactive controls or IDs inside the label.
+    copy.textContent = line.textContent;
+    label.append(line, copy);
+    scope.add(() => { label.replaceChildren(...nodes); });
+  }
+  let pressed = options.pressed ?? root.getAttribute('aria-pressed') === 'true';
+  if (options.toggle || options.pressed !== undefined) scope.attr(root, 'aria-pressed', String(pressed));
+  const setPressed = (next: boolean) => {
+    if (scope.disposed || next === pressed) return;
+    pressed = next;
+    scope.attr(root, 'aria-pressed', String(pressed));
+    options.onPressedChange?.(pressed);
+    root.dispatchEvent(new CustomEvent('mk:action-change', { bubbles: true, detail: { pressed } }));
+  };
+  scope.on(root, 'click', (event) => {
+    if (event.defaultPrevented) return;
+    if (root.hasAttribute('disabled') || root.getAttribute('aria-disabled') === 'true') {
+      event.preventDefault();
+      return;
+    }
+    if (options.toggle) setPressed(!pressed);
+  });
+  return { setPressed, get pressed() { return pressed; }, destroy: () => scope.dispose() };
+}

package/src/recipes/editorial-reveal/README.md

@@ -0,0 +1,35 @@
+# editorial-reveal
+
+Composición de títulos enmascarados, tarjetas, CTA con flecha duplicada, cursor decorativo y grupos de contacto escalonados. Referencia conductual: CoMinVi. Reutiliza `mask-text`, `cascade`, `parallax` y `contrast` sin copiar assets ni código de la referencia.
+
+```html
+<section class="mk-editorial-reveal" data-mk="editorial-reveal">
+  <header data-mk-editorial-header>Estudio</header>
+  <section data-mk-tone="light">
+    <h1 data-mk-editorial-title>Un nuevo punto de vista.</h1>
+    <a href="/story" data-mk-editorial-card>
+      <img data-mk-editorial-card-image src="/your-image.webp" alt="Paisaje">
+      <h2>Explorar la historia</h2>
+    </a>
+    <a href="/story" data-mk-editorial-button><span data-mk-editorial-button-content>Leer</span></a>
+  </section>
+  <div data-mk-editorial-group>
+    <h2 data-mk-cascade="rise">Conversemos</h2>
+    <label data-mk-cascade="fade">Correo <input type="email"></label>
+  </div>
+  <span data-mk-editorial-cursor hidden>Leer ↗</span>
+</section>
+```
+
+```ts
+import { createEditorialReveal } from '@yewdiel21/motion-kit';
+import { useEditorialReveal } from '@yewdiel21/motion-kit/react';
+const motion = createEditorialReveal(root, { trigger: 'manual' });
+motion.play(); motion.reset(); motion.destroy();
+```
+
+Opciones: `trigger` (`scroll` por defecto, `load`, `manual`), `duration` 1.2 s, `stagger` .03 s, `y` 110 %, `ease` curva `(0.6,0,0,1)`, `hoverDuration` .5 s, `buttonShift` 2.25 em, `imageScale` 1.04 y `parallax` true. Los grupos mantienen el easing `expo.out` de `cascade`; la curva de referencia se aplica a títulos, CTA e imágenes. La entrada se reproduce una vez. `reset()` permite repetirla manualmente.
+
+Marca un marco opcional con `[data-mk-editorial-image]` y su hijo con `[data-mk-parallax-target]` para un parallax de intensidad .25. El header observa únicamente las secciones de su propia instancia. El estado de tarjeta se activa tanto con puntero como con foco; el cursor es decorativo, se oculta en touch y con movimiento reducido, y nunca sustituye al cursor del sistema. Sin JavaScript el contenido sigue visible.
+
+Con movimiento reducido el título queda entero, las entradas no ocultan campos y las interacciones conservan sus estados sin desplazamiento. `destroy()` es idempotente y restaura atributos/estilos propios y los helpers. El formulario, navegación y assets son responsabilidad de quien compone el contenido.