@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/components/dialog/engine.ts

@@ -0,0 +1,432 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { TIMING } from '../../core/timing';
+import { inert, warnOnce, type Cleanup, type Instance } from '../../core/types';
+import { MORPH_STYLES, clearStyles } from '../../core/styles';
+import { anchorSurface, clearAnchor } from '../../motion/anchor';
+import { attachDragDismiss } from '../../motion/drag-dismiss';
+import {
+  attachFloating,
+  dockWindow,
+  floatingAvailable,
+  forgetFloat,
+  liftWindow,
+  savedFloat,
+  unplaceWindow,
+} from '../../motion/floating';
+import { isMorphing, morphCloseWithGhost, morphOpen, releaseShared, showOrigin, stopMorph } from '../../motion/morph';
+import { pushUnderlay, releaseUnderlay, sheetClose, sheetOpen } from '../../motion/sheet';
+import { closeModal, fadeBackdrop, openModal } from '../../motion/surface';
+
+/*
+ * Stepbro's ModalHost on a native <dialog> (focus trap, Escape, top layer): the
+ * control that opened it turns into it and it folds back into that control
+ * (morph or liquid) over a backdrop tinted on the signature curve. It eases to
+ * new heights (auto-resize), can be dragged away (> 100 px) and, on desktop,
+ * lifted into a floating window by its handle. Parts: [data-mk-part] header,
+ * title, description, body, footer, close, handle.
+ */
+
+export type DialogVariant = 'morph' | 'liquid' | 'sheet';
+export type DialogPlacement = 'center' | 'anchor' | 'side';
+
+export interface DialogLabels {
+  close?: string;
+  float?: string;
+  dock?: string;
+}
+
+export interface DialogOptions {
+  /** morph (Stepbro, default), liquid (Stepbro), or sheet: rises from the bottom and pushes [data-mk-underlay] back (Dousan). */
+  variant?: DialogVariant;
+  placement?: DialogPlacement;
+  /** Tinted backdrop; false leaves it transparent (menus). */
+  backdrop?: boolean;
+  closeOnBackdrop?: boolean;
+  /** Drag (or wheel) down to dismiss. */
+  drag?: boolean;
+  /** A key turns on the floating window (desktop) and remembers its place. */
+  float?: string | false;
+  autoResize?: boolean;
+  /** `[data-mk-open="<id>"]` buttons open it: true uses the dialog's id; a string names another id; false: none. */
+  triggers?: boolean | string;
+  /** Modal (default) or a non-modal dialog. */
+  modal?: boolean;
+  labels?: DialogLabels;
+  /** Grow the content with the surface (default). Menus turn it off and cascade their items instead. */
+  animateContent?: boolean;
+  onOpen?: () => void;
+  /** After it closed, whatever closed it. */
+  onClose?: () => void;
+}
+
+export interface DialogInstance extends Instance {
+  /** `origin`: the control it grows from; omitted, the focused control; null, none (scale-in). */
+  open(origin?: HTMLElement | null): void;
+  close(): void;
+  toggle(origin?: HTMLElement | null): void;
+  float(): void;
+  dock(): void;
+  readonly isOpen: boolean;
+  readonly isFloating: boolean;
+  readonly element: HTMLElement;
+}
+
+const DEFAULT_LABELS: Required<DialogLabels> = { close: 'Cerrar', float: 'Ventana flotante', dock: 'Volver a su sitio' };
+const FIELDS = '[autofocus], input:not([type="hidden"]):not(:disabled), textarea:not(:disabled), select:not(:disabled)';
+const CORNERS = ['tl', 'tr', 'bl', 'br'] as const;
+let uid = 0;
+
+const part = (dialog: HTMLElement, name: string) => dialog.querySelector<HTMLElement>(`[data-mk-part="${name}"]`);
+
+export function createDialog(dialog: HTMLElement | null, options: DialogOptions = {}): DialogInstance {
+  if (!dialog) {
+    warnOnce('dialog: missing <dialog> element');
+    return inert({ open() {}, close() {}, toggle() {}, float() {}, dock() {}, isOpen: false, isFloating: false, element: null as unknown as HTMLElement });
+  }
+  registerMotion();
+  const {
+    variant = 'morph',
+    placement = 'center',
+    backdrop = true,
+    closeOnBackdrop = true,
+    drag = true,
+    float: floatKey = false,
+    autoResize = true,
+    triggers = true,
+    modal = true,
+  } = options;
+  const labels = { ...DEFAULT_LABELS, ...options.labels };
+  const liquid = variant === 'liquid';
+  const sheet = variant === 'sheet';
+  const scope = createScope();
+  /** Effects that live while it is open. */
+  let session: Cleanup[] = [];
+  let opener: HTMLElement | null = null;
+  let isOpen = false;
+  let closing = false;
+  let floating = false;
+  /**
+   * Lifting and docking swap modal ↔ popover: the native `close` events they cause
+   * (queued, so they arrive later) are not the person closing it.
+   */
+  let ownCloses = 0;
+  const closeNatively = () => {
+    if (!dialog.hasAttribute('open')) return;
+    ownCloses += 1;
+    closeModal(dialog as HTMLDialogElement);
+  };
+  let destroyed = false;
+  /** destroy() is under way: the page behind comes back at once. */
+  let tearingDown = false;
+
+  if (placement !== 'center') scope.attr(dialog, 'data-mk-placement', placement);
+  if (!backdrop) scope.attr(dialog, 'data-mk-backdrop', 'none');
+  scope.attr(dialog, 'data-mk-variant', variant);
+  const title = part(dialog, 'title');
+  if (title && !dialog.hasAttribute('aria-label') && !dialog.hasAttribute('aria-labelledby')) {
+    if (!title.id) scope.attr(title, 'id', `mk-dialog-title-${++uid}`);
+    scope.attr(dialog, 'aria-labelledby', title.id);
+  }
+  const description = part(dialog, 'description');
+  if (description && !dialog.hasAttribute('aria-describedby')) {
+    if (!description.id) scope.attr(description, 'id', `mk-dialog-description-${++uid}`);
+    scope.attr(dialog, 'aria-describedby', description.id);
+  }
+  const closeButton = part(dialog, 'close');
+  if (closeButton && !closeButton.hasAttribute('aria-label') && !closeButton.textContent?.trim()) {
+    scope.attr(closeButton, 'aria-label', labels.close);
+  }
+  const handle = floatKey ? part(dialog, 'handle') : null;
+  if (handle) {
+    scope.attr(handle, 'data-mk-no-drag', '');
+    scope.attr(handle, 'aria-pressed', 'false');
+    scope.attr(handle, 'aria-label', labels.float);
+  }
+  const corners: HTMLElement[] = [];
+  if (floatKey) {
+    for (const corner of CORNERS) {
+      const element = document.createElement('span');
+      element.className = 'mk-float-corner';
+      element.dataset.mkFloatCorner = corner;
+      element.dataset.mkNoDrag = '';
+      element.setAttribute('aria-hidden', 'true');
+      dialog.append(element);
+      corners.push(element);
+    }
+    scope.add(() => corners.forEach((corner) => corner.remove()));
+  }
+
+  const emit = (type: string, cancelable = false, detail: Record<string, unknown> = {}) =>
+    dialog.dispatchEvent(new CustomEvent(type, { bubbles: true, cancelable, detail: { dialog, ...detail } }));
+
+  const endSession = () => {
+    for (const cleanup of session.splice(0).reverse()) cleanup();
+  };
+
+  const settleFloating = () => {
+    if (!floating) return;
+    floating = false;
+    if (typeof dialog.hidePopover === 'function' && dialog.hasAttribute('popover')) {
+      try {
+        dialog.hidePopover();
+      } catch {
+        // Already hidden.
+      }
+    }
+    dialog.removeAttribute('popover');
+    unplaceWindow(dialog);
+    if (handle) {
+      handle.setAttribute('aria-pressed', 'false');
+      handle.setAttribute('aria-label', labels.float);
+    }
+  };
+
+  /** Closed without our animation (owner, form[method=dialog], destroy). */
+  const closedQuietly = () => {
+    stopMorph(dialog);
+    endSession();
+    isOpen = false;
+    closing = false;
+    showOrigin(opener);
+    releaseShared(opener);
+    emit('mk:closed');
+    options.onClose?.();
+  };
+
+  const lift = () => {
+    if (!floatKey || floating || !isOpen || !floatingAvailable()) return;
+    const box = dialog.getBoundingClientRect();
+    const rect = savedFloat(floatKey) ?? { top: box.top, left: box.left, width: box.width, height: box.height };
+    const focused = document.activeElement;
+    // Its backdrop leaves as the window lifts off the page.
+    const backdropStyle = getComputedStyle(dialog, '::backdrop');
+    const veil = document.createElement('div');
+    veil.setAttribute('aria-hidden', 'true');
+    Object.assign(veil.style, {
+      position: 'fixed',
+      inset: '0',
+      background: backdropStyle.background || backdropStyle.backgroundColor,
+      backdropFilter: backdropStyle.backdropFilter,
+      pointerEvents: 'none',
+    });
+    closeNatively();
+    document.body.append(veil);
+    dialog.setAttribute('popover', 'manual');
+    if (typeof dialog.showPopover === 'function') dialog.showPopover();
+    else openModal(dialog, false);
+    liftWindow(dialog, rect);
+    gsap.to(veil, { opacity: 0, duration: reduced() ? 0 : TIMING.float.shadow, ease: EASE.signature, onComplete: () => veil.remove() });
+    floating = true;
+    if (handle) {
+      handle.setAttribute('aria-pressed', 'true');
+      handle.setAttribute('aria-label', labels.dock);
+    }
+    showOrigin(opener, { fade: true });
+    if (focused instanceof HTMLElement && dialog.contains(focused)) focused.focus();
+  };
+
+  const dock = () => {
+    if (!floatKey || !floating) return;
+    const box = dialog.getBoundingClientRect();
+    const focused = document.activeElement;
+    floating = false;
+    if (typeof dialog.hidePopover === 'function') dialog.hidePopover();
+    dialog.removeAttribute('popover');
+    closeNatively();
+    openModal(dialog, modal);
+    dockWindow(dialog, { top: box.top, left: box.left, width: box.width, height: box.height });
+    if (backdrop) void fadeBackdrop(dialog, 'in');
+    forgetFloat(floatKey);
+    if (handle) {
+      handle.setAttribute('aria-pressed', 'false');
+      handle.setAttribute('aria-label', labels.float);
+    }
+    if (focused instanceof HTMLElement && dialog.contains(focused)) focused.focus();
+  };
+
+  const startSession = () => {
+    if (sheet) {
+      const behind = [...document.querySelectorAll<HTMLElement>('[data-mk-underlay]')];
+      pushUnderlay(behind);
+      const root = document.documentElement;
+      const overflow = root.style.overflow;
+      root.style.overflow = 'hidden';
+      session.push(() => {
+        root.style.overflow = overflow;
+        if (root.getAttribute('style') === '') root.removeAttribute('style');
+        releaseUnderlay(behind, !tearingDown);
+      });
+    }
+    if (autoResize && typeof ResizeObserver === 'function') {
+      let last = dialog.offsetHeight;
+      let resizing: gsap.core.Tween | null = null;
+      const observer = new ResizeObserver(() => {
+        if (resizing?.isActive()) return;
+        const next = dialog.offsetHeight;
+        const previous = last;
+        last = next;
+        // A floating window's size is the person's, not its content's.
+        if (floating || Math.abs(next - previous) < 2 || !previous || isMorphing(dialog) || reduced()) return;
+        resizing = gsap.fromTo(
+          dialog,
+          { height: previous },
+          {
+            height: next,
+            duration: TIMING.dialog.autoResize,
+            ease: EASE.signature,
+            clearProps: 'height',
+            onComplete: () => {
+              last = dialog.offsetHeight;
+            },
+          },
+        );
+      });
+      observer.observe(dialog);
+      session.push(() => {
+        observer.disconnect();
+        resizing?.kill();
+        clearStyles([dialog], ['height']);
+      });
+    }
+    if (drag) {
+      session.push(
+        attachDragDismiss(dialog, {
+          canDrag: () => !isMorphing(dialog) && !floating && !closing && isOpen,
+          onDismiss: () => close(true),
+        }),
+      );
+    }
+    if (placement === 'anchor') {
+      const onResize = () => {
+        if (isOpen && !floating) anchorSurface(dialog, opener?.isConnected ? opener.getBoundingClientRect() : null);
+      };
+      addEventListener('resize', onResize);
+      session.push(() => {
+        removeEventListener('resize', onResize);
+        clearAnchor(dialog);
+      });
+    }
+    if (floatKey && handle) {
+      session.push(attachFloating(dialog, { key: floatKey, handle, corners, isFloating: () => floating, float: lift, dock }));
+      const onResize = () => {
+        if (floating && !floatingAvailable()) dock();
+      };
+      addEventListener('resize', onResize);
+      session.push(() => removeEventListener('resize', onResize));
+    }
+  };
+
+  const open = (origin?: HTMLElement | null) => {
+    if (destroyed || isOpen) return;
+    const active = document.activeElement;
+    // undefined: the focused control (usually the one clicked); null: no opener at all.
+    opener = origin !== undefined ? origin : active instanceof HTMLElement && active !== document.body && !dialog.contains(active) ? active : null;
+    closing = false;
+    isOpen = true;
+    openModal(dialog, modal);
+    if (placement === 'anchor') anchorSurface(dialog, opener?.getBoundingClientRect());
+    if (backdrop && modal) void fadeBackdrop(dialog, 'in');
+    if (sheet) sheetOpen(dialog);
+    else morphOpen(dialog, opener, { hideOrigin: true, liquid, content: options.animateContent === false ? ':scope > :not(*)' : undefined });
+    startSession();
+    // Forms start at their first field (after showModal: a closed dialog cannot take focus).
+    dialog.querySelector<HTMLElement>(FIELDS)?.focus({ preventScroll: true });
+    emit('mk:open', false, { origin: opener });
+    options.onOpen?.();
+  };
+
+  /** Animated close: the dialog closes at once while an inert copy folds into the opener. */
+  const close = (inPlace = false) => {
+    if (destroyed || !isOpen || closing) return;
+    if (!emit('mk:close', true, { inPlace })) return;
+    closing = true;
+    // The copy is measured first: the session cleanup clears an anchored place.
+    if (sheet) sheetClose(dialog, { inPlace });
+    else morphCloseWithGhost(dialog, opener, { inPlace, liquid });
+    endSession();
+    if (floating) settleFloating();
+    if (dialog.hasAttribute('open')) closeModal(dialog as HTMLDialogElement);
+    isOpen = false;
+    closing = false;
+    if (opener?.isConnected) opener.focus();
+    emit('mk:closed');
+    options.onClose?.();
+  };
+
+  scope.on(dialog, 'cancel', (event) => {
+    event.preventDefault();
+    close();
+  });
+  scope.on(dialog, 'close', () => {
+    if (ownCloses > 0) {
+      ownCloses -= 1;
+      return;
+    }
+    // A native close we did not start (form method="dialog", dialog.close()).
+    if (!isOpen || closing) return;
+    closedQuietly();
+  });
+  scope.on(dialog, 'keydown', (event) => {
+    // A floating (non-modal) window still closes with Escape.
+    if ((event as KeyboardEvent).key === 'Escape' && floating) {
+      event.preventDefault();
+      close();
+    }
+  });
+  scope.on(dialog, 'click', (event) => {
+    const target = event.target as Element | null;
+    if (target?.closest('[data-mk-part="close"], [data-mk-close]') && dialog.contains(target)) {
+      close();
+      return;
+    }
+    if (target !== dialog || !closeOnBackdrop || floating) return;
+    const mouse = event as MouseEvent;
+    const box = dialog.getBoundingClientRect();
+    if (mouse.clientX < box.left || mouse.clientX > box.right || mouse.clientY < box.top || mouse.clientY > box.bottom) close();
+  });
+  const triggerId = triggers === true ? dialog.id : triggers || '';
+  if (triggerId) {
+    const selector = `[data-mk-open="${typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(triggerId) : triggerId}"]`;
+    scope.on(document, 'click', (event) => {
+      const trigger = (event.target as Element | null)?.closest<HTMLElement>(selector);
+      if (!trigger || dialog.contains(trigger)) return;
+      event.preventDefault();
+      if (isOpen) close();
+      else open(trigger);
+    });
+  }
+  dialog.dataset.mkReady = '';
+
+  return {
+    open,
+    close: () => close(),
+    toggle: (origin?: HTMLElement | null) => (isOpen ? close() : open(origin)),
+    float: lift,
+    dock,
+    get isOpen() {
+      return isOpen;
+    },
+    get isFloating() {
+      return floating;
+    },
+    element: dialog,
+    destroy() {
+      if (destroyed) return;
+      tearingDown = true;
+      if (isOpen) {
+        settleFloating();
+        closing = true;
+        if (dialog.hasAttribute('open')) closeModal(dialog as HTMLDialogElement);
+        closedQuietly();
+      }
+      destroyed = true;
+      endSession();
+      gsap.killTweensOf(dialog);
+      clearStyles([dialog], [...MORPH_STYLES, 'height']);
+      scope.dispose();
+      delete dialog.dataset.mkReady;
+    },
+  };
+}

package/src/components/dialog/react.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type DialogHTMLAttributes,
+  type HTMLAttributes,
+  type MutableRefObject,
+  type ReactNode,
+} from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { MkIcon } from '../icon';
+import { createDialog, type DialogInstance, type DialogOptions } from './engine';
+
+export { MkIcon };
+
+export type SurfaceOptions = Omit<DialogOptions, 'onOpen' | 'onClose' | 'triggers'>;
+
+export interface SurfaceContextValue<I> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  /** The control the next open grows from (set by the Trigger). */
+  origin: MutableRefObject<HTMLElement | null>;
+  instance: MutableRefObject<I | null>;
+  options: SurfaceOptions;
+}
+
+export interface SurfaceRootProps extends SurfaceOptions {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+
+/** Open state (controlled or not) shared by a surface's parts. Used by Dialog and Menu. */
+export function useSurfaceRoot<I>({ open: controlled, defaultOpen = false, onOpenChange, children: _children, ...options }: SurfaceRootProps): SurfaceContextValue<I> {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = controlled ?? uncontrolled;
+  const current = useLatest(open);
+  const change = useLatest(onOpenChange);
+  const isControlled = controlled !== undefined;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (next === current.current) return;
+      current.current = next;
+      if (!isControlled) setUncontrolled(next);
+      change.current?.(next);
+    },
+    [isControlled, current, change],
+  );
+  const origin = useRef<HTMLElement | null>(null);
+  const instance = useRef<I | null>(null);
+  const optionKey = JSON.stringify(options);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stable = useMemo(() => options, [optionKey]);
+  return useMemo(() => ({ open, setOpen, origin, instance, options: stable }), [open, setOpen, stable]);
+}
+
+const DialogContext = createContext<SurfaceContextValue<DialogInstance> | null>(null);
+
+function useDialogContext(part: string) {
+  const value = useContext(DialogContext);
+  if (!value) throw new Error(`<Dialog.${part}> must be inside <Dialog.Root>`);
+  return value;
+}
+
+function Root(props: SurfaceRootProps) {
+  const value = useSurfaceRoot<DialogInstance>(props);
+  return <DialogContext.Provider value={value}>{props.children}</DialogContext.Provider>;
+}
+
+/** A button that opens the dialog and is the shape it grows from. */
+function Trigger({ onClick, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  const context = useDialogContext('Trigger');
+  return (
+    <button
+      type="button"
+      aria-haspopup="dialog"
+      aria-expanded={context.open}
+      {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        context.origin.current = event.currentTarget;
+        context.setOpen(!context.open);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export interface DialogContentProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open'> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Skip the base class (style it yourself). */
+  unstyled?: boolean;
+}
+
+/**
+ * Runs a surface engine on a <dialog> and follows the root's open state.
+ * Shared with Menu (which passes its own engine).
+ */
+export function useSurfaceEngine<I extends DialogInstance>(
+  context: SurfaceContextValue<I>,
+  create: (dialog: HTMLDialogElement, options: DialogOptions) => I,
+) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const setOpen = useLatest(context.setOpen);
+  useIsomorphicLayoutEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    const created = create(dialog, { ...context.options, triggers: false, onClose: () => setOpen.current(false) });
+    context.instance.current = created;
+    if (context.open) created.open(context.origin.current ?? undefined);
+    return () => {
+      created.destroy();
+      context.instance.current = null;
+    };
+    // The engine is rebuilt only when its options change; open state is followed below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [context.options]);
+  useIsomorphicLayoutEffect(() => {
+    const instance = context.instance.current;
+    if (!instance) return;
+    if (context.open && !instance.isOpen) {
+      instance.open(context.origin.current ?? undefined);
+      context.origin.current = null;
+    } else if (!context.open && instance.isOpen) instance.close();
+  }, [context.open]);
+  return ref;
+}
+
+function Content({ size = 'md', unstyled, className, children, ...props }: DialogContentProps) {
+  const context = useDialogContext('Content');
+  const ref = useSurfaceEngine(context, createDialog);
+  const classes = [unstyled ? null : 'mk-dialog', !unstyled && size !== 'md' ? `mk-dialog--${size}` : null, className].filter(Boolean).join(' ');
+  return (
+    <dialog ref={ref} className={classes || undefined} {...props}>
+      {children}
+    </dialog>
+  );
+}
+
+const partOf = (name: string) =>
+  function Part({ children, ...props }: HTMLAttributes<HTMLElement>) {
+    const Tag = (name === 'header' ? 'header' : name === 'footer' ? 'footer' : name === 'title' ? 'h2' : name === 'description' ? 'p' : 'div') as 'div';
+    return (
+      <Tag data-mk-part={name} {...props}>
+        {children}
+      </Tag>
+    );
+  };
+
+function Close({ children, label = 'Cerrar', ...props }: ButtonHTMLAttributes<HTMLButtonElement> & { label?: string }) {
+  return (
+    <button type="button" data-mk-part="close" aria-label={children ? undefined : label} {...props}>
+      {children ?? <MkIcon name="close" />}
+    </button>
+  );
+}
+
+function Handle({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button type="button" data-mk-part="handle" {...props}>
+      {children ?? <MkIcon name="expand" size={18} />}
+    </button>
+  );
+}
+
+/**
+ * Stepbro's dialog for React:
+ * <Dialog.Root><Dialog.Trigger>Crear</Dialog.Trigger><Dialog.Content>
+ *   <Dialog.Header><Dialog.Title>…</Dialog.Title><Dialog.Close /></Dialog.Header>
+ *   <Dialog.Body>…</Dialog.Body><Dialog.Footer>…</Dialog.Footer>
+ * </Dialog.Content></Dialog.Root>
+ */
+export const Dialog = {
+  Root,
+  Trigger,
+  Content,
+  Header: partOf('header'),
+  Title: partOf('title'),
+  Description: partOf('description'),
+  Actions: partOf('actions'),
+  Body: partOf('body'),
+  Footer: partOf('footer'),
+  Close,
+  Handle,
+};
+
+/** The dialog instance of the surrounding <Dialog.Root> (open, close, float…). */
+export function useDialog() {
+  const context = useDialogContext('useDialog');
+  return { open: context.open, setOpen: context.setOpen, instance: context.instance };
+}

package/src/components/icon.tsx

@@ -0,0 +1,10 @@
+import { ICON_PATHS, type IconName } from './icons';
+
+/** The same stroke icons the vanilla components use (aria-hidden). */
+export function MkIcon({ name, size = 20 }: { name: IconName; size?: number }) {
+  return (
+    <svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d={ICON_PATHS[name]} />
+    </svg>
+  );
+}

package/src/components/icons.ts

@@ -0,0 +1,24 @@
+/*
+ * The few icons the components draw themselves (close, float, dock, tones), as
+ * 24 × 24 stroke paths, so no component depends on the Material Symbols font.
+ */
+
+export const ICON_PATHS = {
+  close: 'M6 6l12 12M18 6L6 18',
+  expand: 'M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7',
+  shrink: 'M4 14h6v6M20 10h-6V4M10 14l-7 7M14 10l7-7',
+  check: 'M5 12.5l4.5 4.5L19 7.5',
+  alert: 'M12 8v5M12 16.5v.01M10.3 3.9L2.6 17.3a2 2 0 001.7 3h15.4a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z',
+  info: 'M12 11v6M12 7.5v.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  send: 'M12 19V5M5.5 11.5L12 5l6.5 6.5',
+  mic: 'M12 3a3 3 0 00-3 3v6a3 3 0 006 0V6a3 3 0 00-3-3zM5.5 11a6.5 6.5 0 0013 0M12 17.5V21',
+  sparkle: 'M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z',
+  grip: 'M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01',
+} as const;
+
+export type IconName = keyof typeof ICON_PATHS;
+
+/** An inline SVG string (aria-hidden), for vanilla engines and custom elements. */
+export function iconSvg(name: IconName, size = 20) {
+  return `<svg aria-hidden="true" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${ICON_PATHS[name]}"/></svg>`;
+}