@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/studio-dock/engine.ts

@@ -0,0 +1,212 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+export type StudioDockView = 'menu' | 'contact' | 'reel';
+export interface StudioDockState { open: boolean; view: StudioDockView; page: number; }
+export interface StudioDockOptions {
+  /** Seconds. Reference sheet: 1.3 s, outBack(.52). */
+  duration?: number;
+  ease?: string;
+  /** Move focus into a newly opened view. Defaults to true. */
+  focusOnOpen?: boolean;
+  /** Contain Tab within the open panel and its toggle. Defaults to true. */
+  trapFocus?: boolean;
+  onChange?: (state: StudioDockState) => void;
+}
+export interface StudioDockInstance extends Instance {
+  open(view?: StudioDockView): void;
+  close(): void;
+  toggle(): void;
+  selectPage(index: number): void;
+  readonly state: StudioDockState;
+}
+
+let nextId = 0;
+/** Panel distance from the dock's edge (bar + gap); --mk-studio-dock-offset overrides it. */
+const PANEL_OFFSET = 76;
+const VIEWPORT_GAP = 12;
+const MIN_SPACE = 320;
+const FOCUSABLE = 'a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),video[controls],[tabindex]:not([tabindex="-1"])';
+
+/** A contained studio sheet. Markup remains useful without JavaScript; fixed positioning is CSS opt-in. */
+export function createStudioDock(root: HTMLElement | null, options: StudioDockOptions = {}): StudioDockInstance {
+  const toggleButton = root?.querySelector<HTMLButtonElement>('[data-mk-studio-toggle]');
+  const panel = root?.querySelector<HTMLElement>('[data-mk-studio-panel]');
+  if (!root || !toggleButton || !panel) return inert({ open() {}, close() {}, toggle() {}, selectPage() {}, state: { open: false, view: 'menu' as const, page: 0 } });
+  registerMotion();
+  const scope = createScope();
+  const context = gsap.context(() => {}, root);
+  scope.add(() => context.revert());
+  const views = [...panel.querySelectorAll<HTMLElement>('[data-mk-studio-view]')];
+  const pages = [...panel.querySelectorAll<HTMLElement>('[data-mk-studio-page]')];
+  const pageButtons = [...root.querySelectorAll<HTMLElement>('[data-mk-studio-page-to]')];
+  const slide = root.querySelector<HTMLElement>('[data-mk-studio-slide]');
+  const tracked = [root, panel, ...(slide ? [slide] : [])];
+  tracked.forEach(el => { const style = el.getAttribute('style'); scope.add(() => style === null ? el.removeAttribute('style') : el.setAttribute('style', style)); });
+  scope.attr(panel, 'id', panel.id || `mk-studio-panel-${++nextId}`);
+  scope.attr(panel, 'role', panel.getAttribute('role') || 'dialog');
+  scope.attr(panel, 'aria-label', panel.getAttribute('aria-label') || 'Studio navigation');
+  scope.attr(panel, 'tabindex', '-1');
+  scope.attr(toggleButton, 'aria-controls', panel.id);
+  scope.attr(toggleButton, 'aria-expanded', 'false');
+  scope.attr(panel, 'hidden', '');
+  scope.attr(panel, 'aria-hidden', 'true');
+  scope.attr(root, 'data-mk-ready', '');
+  let state: StudioDockState = { open: false, view: 'menu', page: 0 };
+  let previousFocus: HTMLElement | null = null;
+  let animation: gsap.core.Tween | undefined;
+  let slideStart: number | null = null;
+  let slideDistance = 0;
+  let slideMoved = false;
+  let suppressSlideClick = false;
+
+  // The sheet opens above the bar. Cap it to the room actually left in the viewport
+  // (it scrolls inside) and open it below the bar when above is too tight.
+  const place = (decide = false) => {
+    const view = root.ownerDocument.defaultView;
+    if (!state.open || !view) return;
+    const rect = root.getBoundingClientRect();
+    const offset = parseFloat(view.getComputedStyle(root).getPropertyValue('--mk-studio-dock-offset')) || PANEL_OFFSET;
+    const above = rect.bottom - offset - VIEWPORT_GAP;
+    const below = view.innerHeight - rect.top - offset - VIEWPORT_GAP;
+    // The direction is chosen on open only, so scrolling never flips an open sheet.
+    if (decide) scope.attr(root, 'data-mk-studio-below', above < Math.min(panel.scrollHeight || MIN_SPACE, MIN_SPACE) && below > above ? '' : null);
+    const flip = root.hasAttribute('data-mk-studio-below');
+    root.style.setProperty('--mk-studio-dock-space', `${Math.max(MIN_SPACE / 2, Math.floor(flip ? below : above))}px`);
+  };
+  const hidden = () => root.hasAttribute('data-mk-studio-below')
+    ? { clipPath: 'inset(0% 0% 100% 0% round 18px)', y: -16, opacity: 0 }
+    : { clipPath: 'inset(100% 0% 0% 0% round 18px)', y: 16, opacity: 0 };
+  const notify = () => {
+    const value = { ...state };
+    options.onChange?.(value);
+    root.dispatchEvent(new CustomEvent('mk:studio-dock', { bubbles: true, detail: value }));
+  };
+  const isTabbable = (el: HTMLElement) => el.tabIndex >= 0 && !el.closest('[hidden], [inert]') && el.getAttribute('aria-disabled') !== 'true';
+  const visibleFocus = () => [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(isTabbable);
+  const focusView = () => { if (options.focusOnOpen !== false) (visibleFocus()[0] ?? panel).focus({ preventScroll: true }); };
+  const setView = (view: StudioDockView) => {
+    state.view = views.length && !views.some(el => el.dataset.mkStudioView === view) ? 'menu' : view;
+    views.forEach(el => scope.attr(el, 'hidden', el.dataset.mkStudioView === state.view ? null : ''));
+    scope.attr(root, 'data-mk-studio-active', state.view);
+    panel.querySelectorAll<HTMLVideoElement>('video').forEach(video => { if (state.view !== 'reel') video.pause(); });
+  };
+  const selectPage = (index: number, announce = true) => {
+    if (scope.disposed || !pages.length || !Number.isFinite(index)) return;
+    state.page = ((Math.round(index) % pages.length) + pages.length) % pages.length;
+    pages.forEach((el, i) => scope.attr(el, 'hidden', i === state.page ? null : ''));
+    pageButtons.forEach(el => scope.attr(el, 'aria-current', Number(el.dataset.mkStudioPageTo) === state.page ? 'true' : null));
+    if (announce) notify();
+  };
+  const open = (view: StudioDockView = 'menu') => {
+    if (scope.disposed) return;
+    const wasOpen = state.open;
+    if (wasOpen && state.view === view) return;
+    if (!wasOpen) {
+      const active = root.ownerDocument.activeElement;
+      previousFocus = active instanceof HTMLElement && active !== root.ownerDocument.body && !panel.contains(active) ? active : toggleButton;
+    }
+    animation?.kill();
+    state.open = true;
+    scope.attr(panel, 'hidden', null);
+    scope.attr(panel, 'inert', null);
+    scope.attr(panel, 'aria-hidden', 'false');
+    scope.attr(root, 'data-mk-studio-open', '');
+    scope.attr(toggleButton, 'aria-expanded', 'true');
+    setView(view);
+    place(!wasOpen);
+    if (!reduced()) context.add(() => {
+      animation = gsap.fromTo(panel, hidden(), { clipPath: 'inset(0% 0% 0% 0% round 18px)', y: 0, opacity: 1, duration: Math.max(0, options.duration ?? 1.3), ease: options.ease ?? 'back.out(0.52)', overwrite: true });
+    });
+    else context.add(() => { gsap.set(panel, { clipPath: 'inset(0% round 18px)', y: 0, opacity: 1 }); });
+    focusView();
+    notify();
+  };
+  const close = (restoreFocus = true) => {
+    if (scope.disposed || !state.open) return;
+    animation?.kill();
+    state.open = false;
+    scope.attr(toggleButton, 'aria-expanded', 'false');
+    scope.attr(root, 'data-mk-studio-open', null);
+    // Stop focus immediately while the visual sheet collapses.
+    scope.attr(panel, 'inert', '');
+    scope.attr(panel, 'aria-hidden', 'true');
+    if (reduced()) scope.attr(panel, 'hidden', '');
+    else context.add(() => {
+      animation = gsap.to(panel, { ...hidden(), duration: Math.max(0, options.duration ?? 1.3), ease: options.ease ?? 'back.out(0.52)', overwrite: true, onComplete: () => { if (!scope.disposed && !state.open) scope.attr(panel, 'hidden', ''); } });
+    });
+    panel.querySelectorAll<HTMLVideoElement>('video').forEach(video => video.pause());
+    if (restoreFocus) (previousFocus?.isConnected ? previousFocus : toggleButton).focus({ preventScroll: true });
+    notify();
+  };
+  scope.on(root, 'click', event => {
+    const target = event.target instanceof Element ? event.target : null;
+    if (!target) return;
+    if (target.closest('[data-mk-studio-toggle]') === toggleButton) state.open ? close() : open();
+    else if (target.closest('[data-mk-studio-close]')) close();
+    else if (target.closest('[data-mk-studio-slide]')) {
+      if (suppressSlideClick) { event.preventDefault(); suppressSlideClick = false; }
+      else open('contact');
+    } else {
+      const view = target.closest<HTMLElement>('[data-mk-studio-to]')?.dataset.mkStudioTo;
+      if (view === 'menu' || view === 'contact' || view === 'reel') open(view);
+      const page = target.closest<HTMLElement>('[data-mk-studio-page-to]');
+      if (page) selectPage(Number(page.dataset.mkStudioPageTo));
+    }
+  });
+  if (root.ownerDocument.defaultView) scope.on(root.ownerDocument.defaultView, 'resize', () => place());
+  scope.on(root.ownerDocument, 'scroll', () => place(), { passive: true, capture: true });
+  scope.on(root.ownerDocument, 'pointerdown', event => {
+    if (state.open && event.target instanceof Node && !root.contains(event.target)) close(false);
+  });
+  scope.on(root.ownerDocument, 'keydown', event => {
+    if (!state.open || event.defaultPrevented) return;
+    if (event.key === 'Escape') { event.preventDefault(); close(); return; }
+    if (!(event.target instanceof Node) || !root.contains(event.target)) return;
+    if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && (event.target as Element).closest('[data-mk-studio-pages]')) {
+      event.preventDefault(); selectPage(state.page + (event.key === 'ArrowRight' ? 1 : -1));
+      pageButtons.find(el => Number(el.dataset.mkStudioPageTo) === state.page)?.focus();
+    }
+    if (event.key === 'Tab' && options.trapFocus !== false) {
+      // querySelectorAll keeps the authored DOM order, including a toggle before OR after the panel.
+      const elements = [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(el => (el === toggleButton || panel.contains(el)) && isTabbable(el));
+      if (!elements.length) { event.preventDefault(); panel.focus(); return; }
+      const first = elements[0]!, last = elements.at(-1)!;
+      if (event.shiftKey && (root.ownerDocument.activeElement === first || root.ownerDocument.activeElement === panel)) { event.preventDefault(); last.focus(); }
+      else if (!event.shiftKey && root.ownerDocument.activeElement === last) { event.preventDefault(); first.focus(); }
+    }
+  });
+  if (slide) {
+    scope.on(slide, 'pointerdown', event => { if (event.button !== 0) return; slideStart = event.clientX; slideDistance = 0; slideMoved = false; });
+    scope.on(root.ownerDocument, 'pointermove', event => {
+      if (slideStart === null) return;
+      const width = Math.max(0, (slide.parentElement?.clientWidth ?? 0) - slide.offsetWidth);
+      slideMoved ||= Math.abs(event.clientX - slideStart) > 5;
+      slideDistance = Math.max(0, Math.min(width, event.clientX - slideStart));
+      if (!reduced()) slide.style.setProperty('--mk-studio-drag', `${slideDistance}px`);
+    });
+    const release = (cancel = false) => {
+      if (slideStart === null) return;
+      const width = Math.max(0, (slide.parentElement?.clientWidth ?? 0) - slide.offsetWidth);
+      suppressSlideClick = slideMoved;
+      slideStart = null;
+      slide.style.removeProperty('--mk-studio-drag');
+      if (!cancel && width > 0 && slideDistance / width >= .7) open('contact');
+      scope.timeout(() => { suppressSlideClick = false; }, 150);
+    };
+    scope.on(root.ownerDocument, 'pointerup', () => release());
+    scope.on(root.ownerDocument, 'pointercancel', () => release(true));
+  }
+  const clocks = [...root.querySelectorAll<HTMLElement>('[data-mk-studio-timezone]')];
+  const clockOriginals = clocks.map(el => ({ el, text: el.textContent, style: el.getAttribute('style') }));
+  const tick = () => clocks.forEach(el => {
+    try { el.textContent = new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit', timeZone: el.dataset.mkStudioTimezone }).format(new Date()); } catch { /* Invalid caller time zone leaves the original label intact. */ }
+  });
+  if (clocks.length) { tick(); const timer = setInterval(tick, 60_000); scope.add(() => clearInterval(timer)); }
+  scope.add(() => clockOriginals.forEach(({ el, text, style }) => { el.textContent = text; if (style === null) el.removeAttribute('style'); else el.setAttribute('style', style); }));
+  setView('menu');
+  selectPage(0, false);
+  return { open, close, toggle: () => state.open ? close() : open(), selectPage, get state() { return { ...state }; }, destroy() { if (scope.disposed) return; const focused = root.contains(root.ownerDocument.activeElement); animation?.kill(); panel.querySelectorAll<HTMLVideoElement>('video').forEach(video => video.pause()); scope.dispose(); if (focused) toggleButton.focus({ preventScroll: true }); } };
+}

package/src/components/studio-dock/react.tsx

@@ -0,0 +1,23 @@
+'use client';
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createStudioDock, type StudioDockInstance, type StudioDockOptions } from './engine';
+
+export interface StudioDockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, StudioDockOptions {
+  /** Default stays inside its positioned demo/app panel. */
+  fixed?: boolean;
+  instanceRef?: { current: StudioDockInstance | null };
+}
+/** Composable light-DOM shell; use the data-mk-studio-* slots shown in the README. */
+export function StudioDock({ duration, ease, focusOnOpen, trapFocus, onChange, fixed = false, instanceRef, className, children, ...props }: StudioDockProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const change = useLatest(onChange);
+  useIsomorphicLayoutEffect(() => {
+    const instance = createStudioDock(ref.current, { duration, ease, focusOnOpen, trapFocus, onChange: state => change.current?.(state) });
+    if (instanceRef) instanceRef.current = instance;
+    return () => { instance.destroy(); if (instanceRef) instanceRef.current = null; };
+  }, [duration, ease, focusOnOpen, trapFocus]);
+  return <div {...props} ref={ref} className={['mk-studio-dock', fixed && 'mk-studio-dock--fixed', className].filter(Boolean).join(' ')}>{children}</div>;
+}
+
+export { useStudioDock } from '../../react/use-studio-dock';

package/src/components/studio-dock/studio-dock.css

@@ -0,0 +1,34 @@
+.mk-studio-dock { position: relative; isolation: isolate; width: min(343px, 100%); color: var(--mk-text); font: inherit; }
+.mk-studio-dock--fixed { position: fixed; z-index: 70; inset-block-end: 24px; inset-inline-start: 50%; translate: -50% 0; width: min(343px, calc(100vw - 32px)); }
+.mk-studio-dock__bar { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px; border-radius: 18px; background: var(--mk-surface-2); }
+.mk-studio-dock__brand, .mk-studio-dock__toggle { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; border: 0; border-radius: 10px; background: var(--mk-surface); color: inherit; text-decoration: none; font: inherit; }
+.mk-studio-dock__label { flex: 1; font-size: .9rem; }
+.mk-studio-dock__toggle { cursor: pointer; }
+.mk-studio-dock__toggle span { transition: transform .4s; }
+.mk-studio-dock[data-mk-studio-open] .mk-studio-dock__toggle span { transform: rotate(45deg); }
+.mk-studio-dock__panel { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: var(--mk-studio-dock-offset, 76px); max-height: min(660px, 75dvh, var(--mk-studio-dock-space, 660px)); overflow: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--mk-outline-soft); border-radius: 18px; background: var(--mk-surface-2); box-shadow: 0 16px 60px #0002; }
+/* Not enough room above the bar: the engine opens the sheet below it. */
+.mk-studio-dock[data-mk-studio-below] .mk-studio-dock__panel { inset-block: var(--mk-studio-dock-offset, 76px) auto; }
+.mk-studio-dock [hidden] { display: none !important; }
+.mk-studio-dock__grid, .mk-studio-dock__page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.mk-studio-dock__tile { min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 12px; border-radius: 10px; background: var(--mk-surface); color: inherit; text-decoration: none; transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); }
+.mk-studio-dock__tile small { color: var(--mk-muted); }
+.mk-studio-dock__tile:is(:hover, :focus-visible) { transform: scale(.94); }
+.mk-studio-dock__reel { display: flex; justify-content: space-between; align-items: end; min-height: 154px; margin-block: 12px; padding: 16px; border-radius: 10px; background: var(--mk-accent); color: var(--mk-on-accent); }
+.mk-studio-dock__reel button { border: 1px solid currentColor; border-radius: 50%; padding: 14px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+.mk-studio-dock__slide-track { position: relative; display: flex; align-items: center; height: 64px; padding: 4px; margin-block: 12px; border-radius: 48px; background: var(--mk-surface-3, var(--mk-surface)); }
+.mk-studio-dock__slide-track > span { position: absolute; inset-inline: 60px 12px; text-align: center; font-size: .75rem; pointer-events: none; }
+.mk-studio-dock [data-mk-studio-slide] { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--mk-surface); color: inherit; font-size: 20px; cursor: pointer; touch-action: pan-y; transform: translateX(var(--mk-studio-drag, 0px)); }
+.mk-studio-dock__clock { position: relative; aspect-ratio: 1; display: grid; place-content: center; gap: 4px; text-align: center; border: 10px solid var(--mk-surface); border-radius: 50%; background: var(--mk-surface-2); }
+.mk-studio-dock__clock::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--mk-outline-soft); border-radius: 50%; }
+.mk-studio-dock__clock small { color: var(--mk-muted); }
+.mk-studio-dock__pages { margin-block-start: 12px; }
+.mk-studio-dock__pagination { display: flex; justify-content: center; gap: 8px; margin-block-start: 12px; }
+.mk-studio-dock__pagination button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--mk-surface); color: inherit; font: inherit; cursor: pointer; }
+.mk-studio-dock__pagination [aria-current] { background: var(--mk-accent); color: var(--mk-on-accent); }
+.mk-studio-dock__view { display: grid; gap: 16px; padding: 12px 0; }
+.mk-studio-dock__view input, .mk-studio-dock__view textarea { width: 100%; padding: 12px; border: 1px solid var(--mk-outline-soft); border-radius: 8px; background: var(--mk-surface); color: inherit; font: inherit; }
+.mk-studio-dock__view label { display: grid; gap: 6px; }
+.mk-studio-dock__view video { width: 100%; border-radius: 10px; }
+.mk-studio-dock :is(button,a,input,textarea):focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
+@media (prefers-reduced-motion: reduce) { .mk-studio-dock *, .mk-studio-dock *::after { transition: none !important; animation: none !important; } }

package/src/components/swipe-actions/README.md

@@ -0,0 +1,19 @@
+# swipe-actions
+
+«Deslizar para ver opciones» en filas de lista: un arrastre horizontal sobre la fila (`[data-mk-swipe-row]`) aparta su cara (`[data-mk-swipe-content]`) y muestra detrás las acciones de ese lado (`[data-mk-swipe-actions="left|right"]` con botones `[data-mk-swipe-action]`). Los iconos crecen mientras aparecen; al soltar, la fila se abre o se cierra con la curva swing. Un deslizamiento largo (60 %) ejecuta la acción principal del lado: la cara sale y, si la acción lleva `data-mk-swipe-remove`, la fila se pliega (blur y alto a 0) antes de emitir `mk:action`, para que la app la quite de sus datos.
+
+```html
+<mk-swipe-actions class="mk-swipe-actions">
+  <div data-mk-swipe-row>
+    <div data-mk-swipe-actions="left"><button data-mk-swipe-action="archive" aria-label="Archivar">A</button></div>
+    <div data-mk-swipe-content>Factura de octubre</div>
+    <div data-mk-swipe-actions="right"><button data-mk-swipe-action="delete" data-mk-swipe-remove data-mk-tone="danger" aria-label="Eliminar">×</button></div>
+  </div>
+</mk-swipe-actions>
+```
+
+`defineElements()`, `createSwipeActions(root, options)` o `<SwipeActions onAction={run}><SwipeActions.Row right={[{ id: 'delete', label: 'Eliminar', remove: true, tone: 'danger' }]}>…</SwipeActions.Row></SwipeActions>`.
+
+Opciones: `fullSwipe=0.6` (0 lo desactiva), `onAction(action, row)`. API: `open(row, side)`, `close()`, `openRow`, `destroy()`. Eventos `mk:action` `{action, row}` y `mk:open` `{row, side}`. La acción principal es la marcada con `data-mk-swipe-primary` o, si no hay, la más exterior del lado. Una sola fila abierta; Escape o un toque fuera la cierran. Las acciones son botones reales: enfocarlas con teclado abre su fila. El desplazamiento vertical sigue siendo nativo (`touch-action: pan-y`).
+
+Tonos: `data-mk-tone="danger|accent"` (por defecto, el color del texto). Movimiento reducido: la fila se abre, se cierra y se pliega sin animación.

package/src/components/swipe-actions/element.ts

@@ -0,0 +1,26 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createSwipeActions, type SwipeActionsInstance } from './engine';
+
+/**
+ * <mk-swipe-actions class="mk-swipe-actions">
+ *   <div data-mk-swipe-row>
+ *     <div data-mk-swipe-actions="left"><button data-mk-swipe-action="archive" aria-label="Archivar">…</button></div>
+ *     <div data-mk-swipe-content>…the row…</div>
+ *     <div data-mk-swipe-actions="right"><button data-mk-swipe-action="delete" data-mk-swipe-remove aria-label="Eliminar">…</button></div>
+ *   </div>
+ * </mk-swipe-actions>
+ * Emits mk:action ({action, row}) and mk:open ({row, side}).
+ */
+export class MkSwipeActionsElement extends MkElement<SwipeActionsInstance> {
+  static options: Record<string, OptionType> = { fullSwipe: 'number' };
+
+  protected create(options: Record<string, unknown>) {
+    return createSwipeActions(this, options);
+  }
+
+  close() {
+    this.instance?.close();
+  }
+}
+
+export const defineSwipeActions = () => defineElement('mk-swipe-actions', MkSwipeActionsElement);

package/src/components/swipe-actions/engine.ts

@@ -0,0 +1,260 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { press } from '../../motion/micro';
+
+/*
+ * Swipe actions: a horizontal drag on a list row ([data-mk-swipe-row]) slides
+ * its face ([data-mk-swipe-content]) aside and shows the actions behind it
+ * ([data-mk-swipe-actions="left|right"] with buttons [data-mk-swipe-action]).
+ * The icons grow as the drag passes the opening point; letting go snaps the row
+ * open or shut on the swing curve. A long swipe (60 %) runs the side's primary
+ * action: the face slides out and, for [data-mk-swipe-remove] actions, the row
+ * folds away (blur, height to 0) before mk:action fires so the app can drop it.
+ * One row open at a time; Escape or a tap elsewhere shuts it. The actions are
+ * real buttons: focusing one opens its row. Vertical scrolling stays native.
+ */
+
+export type SwipeSide = 'left' | 'right';
+
+export interface SwipeActionsOptions {
+  /** Share of the row width that runs the primary action (default .6; 0 turns it off). */
+  fullSwipe?: number;
+  onAction?: (action: string, row: HTMLElement) => void;
+}
+
+export interface SwipeActionsInstance extends Instance {
+  open(row: HTMLElement, side: SwipeSide): void;
+  close(): void;
+  readonly openRow: HTMLElement | null;
+}
+
+const ROW = '[data-mk-swipe-row]';
+const SLOP = 8;
+
+export function createSwipeActions(root: HTMLElement | null, options: SwipeActionsOptions = {}): SwipeActionsInstance {
+  if (!root) return inert({ open() {}, close() {}, openRow: null });
+  registerMotion();
+  const scope = createScope();
+  const full = Number.isFinite(options.fullSwipe) ? Math.max(0, Math.min(0.95, options.fullSwipe!)) : 0.6;
+  scope.attr(root, 'data-mk-ready', '');
+
+  let current: { row: HTMLElement; side: SwipeSide } | null = null;
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  const touched = new Set<HTMLElement>();
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    for (const element of touched) {
+      gsap.set(element, { clearProps: 'transform,height,opacity,filter,marginTop,marginBottom,paddingTop,paddingBottom,overflow' });
+      element.removeAttribute('data-mk-open');
+      element.removeAttribute('data-mk-armed');
+      element.style.removeProperty('--mk-swipe-reveal');
+      if (element.getAttribute('style') === '') element.removeAttribute('style');
+    }
+  });
+
+  const parts = (row: HTMLElement) => ({
+    face: row.querySelector<HTMLElement>('[data-mk-swipe-content]'),
+    left: row.querySelector<HTMLElement>('[data-mk-swipe-actions="left"]'),
+    right: row.querySelector<HTMLElement>('[data-mk-swipe-actions="right"]'),
+  });
+  const widthOf = (actions: HTMLElement | null) => actions?.getBoundingClientRect().width || actions?.offsetWidth || 0;
+  const primaryOf = (actions: HTMLElement | null) => actions?.querySelector<HTMLButtonElement>('[data-mk-swipe-primary]') ?? (actions?.dataset.mkSwipeActions === 'right' ? actions.querySelector<HTMLButtonElement>('[data-mk-swipe-action]:last-of-type') : actions?.querySelector<HTMLButtonElement>('[data-mk-swipe-action]')) ?? null;
+
+  const move = (row: HTMLElement, x: number, animate: boolean) => {
+    const { face } = parts(row);
+    if (!face) return;
+    touched.add(face);
+    touched.add(row);
+    if (!animate || reduced()) gsap.set(face, { x });
+    else keep(gsap.to(face, { x, duration: 0.5, ease: EASE.swatch, overwrite: 'auto' }));
+  };
+
+  const close = (animate = true) => {
+    if (!current) return;
+    const { row } = current;
+    current = null;
+    row.removeAttribute('data-mk-open');
+    row.removeAttribute('data-mk-armed');
+    row.style.removeProperty('--mk-swipe-reveal');
+    move(row, 0, animate);
+  };
+
+  const open = (row: HTMLElement, side: SwipeSide, animate = true) => {
+    if (scope.disposed || !root.contains(row)) return;
+    const actions = parts(row)[side];
+    if (!actions) return;
+    if (current && current.row !== row) close();
+    current = { row, side };
+    row.setAttribute('data-mk-open', side);
+    row.style.setProperty('--mk-swipe-reveal', '1');
+    touched.add(row);
+    move(row, side === 'left' ? widthOf(actions) : -widthOf(actions), animate);
+    root.dispatchEvent(new CustomEvent('mk:open', { bubbles: true, detail: { row, side } }));
+  };
+
+  /** Run an action: emit; a removing action folds the row away first. */
+  const run = (button: HTMLButtonElement, row: HTMLElement, swiped: boolean) => {
+    const action = button.dataset.mkSwipeAction ?? button.textContent?.trim() ?? '';
+    const emit = () => {
+      options.onAction?.(action, row);
+      root.dispatchEvent(new CustomEvent('mk:action', { bubbles: true, detail: { action, row } }));
+    };
+    keep(press(button));
+    if (!button.hasAttribute('data-mk-swipe-remove')) {
+      if (current?.row === row) close();
+      return emit();
+    }
+    current = null;
+    row.removeAttribute('data-mk-open');
+    touched.add(row);
+    if (reduced()) {
+      gsap.set(row, { height: 0, opacity: 0, overflow: 'hidden', paddingTop: 0, paddingBottom: 0, marginTop: 0, marginBottom: 0 });
+      return emit();
+    }
+    const { face } = parts(row);
+    const width = row.getBoundingClientRect().width || 400;
+    const side = Number(gsap.getProperty(face, 'x')) >= 0 ? 1 : -1;
+    keep(
+      gsap
+        .timeline({ onComplete: emit })
+        .to(face, { x: side * width * (swiped ? 1.05 : 1), duration: 0.3, ease: 'power2.in' })
+        .to(row, { height: 0, opacity: 0, filter: 'blur(16px)', paddingTop: 0, paddingBottom: 0, marginTop: 0, marginBottom: 0, overflow: 'hidden', duration: 0.25, ease: 'power2.in' }),
+    );
+  };
+
+  // The drag.
+  /** The click that ends a drag is not a tap. */
+  let dragged = false;
+  let drag: { row: HTMLElement; x0: number; y0: number; start: number; id: number; horizontal: boolean | null } | null = null;
+  scope.on(root, 'pointerdown', (event) => {
+    const pointer = event as PointerEvent;
+    if (pointer.button !== 0) return;
+    const target = pointer.target as Element | null;
+    if (target?.closest('[data-mk-swipe-action], a, input, select, textarea')) return;
+    const row = target?.closest<HTMLElement>(ROW);
+    const face = row && parts(row).face;
+    if (!row || !face || !root.contains(row)) return;
+    gsap.killTweensOf(face, 'x');
+    drag = { row, x0: pointer.clientX, y0: pointer.clientY, start: Number(gsap.getProperty(face, 'x')) || 0, id: pointer.pointerId, horizontal: null };
+  });
+  scope.on(root, 'pointermove', (event) => {
+    const pointer = event as PointerEvent;
+    if (!drag || pointer.pointerId !== drag.id) return;
+    const dx = pointer.clientX - drag.x0;
+    const dy = pointer.clientY - drag.y0;
+    if (drag.horizontal === null) {
+      if (Math.abs(dx) < SLOP && Math.abs(dy) < SLOP) return;
+      drag.horizontal = Math.abs(dx) > Math.abs(dy);
+      if (!drag.horizontal) {
+        drag = null;
+        return;
+      }
+      if (current && current.row !== drag.row) close();
+      (pointer.target as Element).setPointerCapture?.(pointer.pointerId);
+      drag.row.setAttribute('data-mk-dragging', '');
+    }
+    const { left, right } = parts(drag.row);
+    let x = drag.start + dx;
+    // No actions on a side: it resists.
+    if ((x > 0 && !left) || (x < 0 && !right)) x *= 0.15;
+    const actions = x > 0 ? left : right;
+    const reach = widthOf(actions);
+    const width = drag.row.getBoundingClientRect().width || 1;
+    // Past the actions the drag slows down, unless a long swipe is on.
+    if (reach && Math.abs(x) > reach && !full) x = Math.sign(x) * (reach + (Math.abs(x) - reach) * 0.3);
+    drag.row.toggleAttribute('data-mk-armed', Boolean(full) && Math.abs(x) >= width * full);
+    drag.row.style.setProperty('--mk-swipe-reveal', String(Math.min(1, reach ? Math.abs(x) / reach : 0)));
+    touched.add(drag.row);
+    move(drag.row, x, false);
+  });
+  const release = (event: Event) => {
+    const pointer = event as PointerEvent;
+    if (!drag || pointer.pointerId !== drag.id) return;
+    const { row, horizontal } = drag;
+    drag = null;
+    row.removeAttribute('data-mk-dragging');
+    if (!horizontal) return;
+    dragged = true;
+    setTimeout(() => (dragged = false), 0);
+    const face = parts(row).face!;
+    const x = Number(gsap.getProperty(face, 'x')) || 0;
+    const side: SwipeSide = x > 0 ? 'left' : 'right';
+    const actions = parts(row)[side];
+    const width = row.getBoundingClientRect().width || 1;
+    row.removeAttribute('data-mk-armed');
+    const primary = primaryOf(actions);
+    if (full && actions && primary && Math.abs(x) >= width * full) return run(primary, row, true);
+    if (actions && Math.abs(x) > widthOf(actions) / 2) open(row, side);
+    else {
+      if (current?.row === row) current = null;
+      row.removeAttribute('data-mk-open');
+      row.style.removeProperty('--mk-swipe-reveal');
+      move(row, 0, true);
+    }
+  };
+  scope.on(root, 'pointerup', release);
+  scope.on(root, 'pointercancel', release);
+  // A click after a drag is not a tap on the row.
+  scope.on(
+    root,
+    'click',
+    (event) => {
+      if (dragged) {
+        dragged = false;
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      const button = (event.target as Element | null)?.closest<HTMLButtonElement>('[data-mk-swipe-action]');
+      const row = button?.closest<HTMLElement>(ROW);
+      if (button && row && root.contains(row)) {
+        run(button, row, false);
+        return;
+      }
+      if (current && !(event.target as Element | null)?.closest('[data-mk-swipe-actions]')) {
+        const inside = (event.target as Element | null)?.closest(ROW) === current.row;
+        close();
+        if (inside) event.preventDefault();
+      }
+    },
+    true,
+  );
+  scope.on(document, 'pointerdown', (event) => {
+    if (current && !current.row.contains(event.target as Node)) close();
+  });
+  scope.on(root, 'keydown', (event) => {
+    if ((event as KeyboardEvent).key === 'Escape' && current) {
+      const row = current.row;
+      close();
+      parts(row).face?.focus?.();
+    }
+  });
+  // Keyboard: focusing an action opens its row.
+  scope.on(root, 'focusin', (event) => {
+    const actions = (event.target as Element | null)?.closest<HTMLElement>('[data-mk-swipe-actions]');
+    const row = actions?.closest<HTMLElement>(ROW);
+    if (actions && row && current?.row !== row) open(row, actions.dataset.mkSwipeActions as SwipeSide);
+  });
+  scope.on(root, 'focusout', (event) => {
+    const next = (event as FocusEvent).relatedTarget as Element | null;
+    if (current && !current.row.contains(next)) close();
+  });
+
+  return {
+    open: (row, side) => open(row, side),
+    close: () => close(),
+    get openRow() {
+      return current?.row ?? null;
+    },
+    destroy: () => scope.dispose(),
+  };
+}