@tanishqkancharla/maui 0.0.45 → 0.0.47

package/README.md

@@ -11,18 +11,19 @@ Maui is open source under the MIT License and published on npm as `@tanishqkanch
 Halo keeps the short `maui` import alias:
 
 ```sh
-pnpm add maui@npm:@tanishqkancharla/maui@0.0.9
+pnpm add maui@npm:@tanishqkancharla/maui@0.0.9 motion@^13.2.0
 ```
 
 ```json
 {
 	"dependencies": {
-		"maui": "npm:@tanishqkancharla/maui@0.0.9"
+		"maui": "npm:@tanishqkancharla/maui@0.0.9",
+		"motion": "^13.2.0"
 	}
 }
 ```
 
-The published tarball contains compiled `dist/` JavaScript and declarations. Installs do not run a Maui build.
+Motion is a required peer dependency used by Maui components with animated presence and transitions. The published tarball contains compiled `dist/` JavaScript and declarations. Installs do not run a Maui build.
 
 Wrap the app in `MauiProvider`, then import tokens and components:
 

package/dist/components/Code.js

@@ -8,9 +8,10 @@ const codeClass = style(monospace, radius.sm, spacing.padding({ x: 2, y: 1 }), {
     backgroundColor: colors.gray[3],
     color: colors.gray[12],
     display: "inline",
-    boxDecorationBreak: "clone",
+    boxDecorationBreak: "slice",
     fontSize: "0.875em",
-    whiteSpace: "nowrap",
+    whiteSpace: "normal",
+    overflowWrap: "anywhere",
 });
 const kbdClass = style(text({ size: "xs", fontWeight: 400, color: "lowContrast" }), radius.sm, {
     backgroundColor: colors.gray[3],

package/dist/components/Dialog.d.ts

@@ -1,7 +1,24 @@
-import React from "react";
-type DialogProps = {
-    children?: React.ReactNode;
-    onClickOutside?: () => void;
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { Heading } from "react-aria-components";
+export type DialogSize = "sm" | "md" | "lg";
+export type DialogProps = {
+    children: ReactNode;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Enables outside-click dismissal. Escape remains enabled by default. */
+    isDismissable?: boolean;
+    isKeyboardDismissDisabled?: boolean;
+    size?: DialogSize;
+    role?: "dialog" | "alertdialog";
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: string;
 };
-export declare function Dialog(props: DialogProps): React.JSX.Element;
-export {};
+export declare function Dialog({ children, isOpen: isOpenProp, defaultOpen, onOpenChange, isDismissable, isKeyboardDismissDisabled, size, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, }: DialogProps): import("react").JSX.Element;
+export type DialogTitleProps = Omit<ComponentPropsWithoutRef<typeof Heading>, "slot">;
+export declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+export type DialogBodyProps = ComponentPropsWithoutRef<"div">;
+export declare function DialogBody({ className, ...props }: DialogBodyProps): import("react").JSX.Element;
+export type DialogActionsProps = ComponentPropsWithoutRef<"div">;
+export declare function DialogActions({ className, ...props }: DialogActionsProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -1,35 +1,120 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { animated, useSpring } from "@react-spring/web";
+import { useCallback, useState, } from "react";
+import { AnimatePresence, motion, useReducedMotion, } from "motion/react";
+import { Dialog as AriaDialog, Heading, Modal, ModalOverlay, } from "react-aria-components";
 import { style, useStyles } from "purse-styles";
-import { FocusScope } from "../hooks/useFocus";
 import { background } from "../tokens/background";
 import { border } from "../tokens/borders";
-import { Overlay } from "./Overlay";
-const dialogStyle = style(background.element, border([], "border"), {
-    flex: 1,
-    borderRadius: "4px",
-    margin: "15vh 20vw",
-    padding: "32px",
+import { overlayMotion } from "../tokens/motion";
+import { radius } from "../tokens/radius";
+import { spacing } from "../tokens/spacing";
+import { text } from "../tokens/text";
+import { cls } from "../utils/cls";
+const MotionModalOverlay = motion.create(ModalOverlay);
+const MotionModal = motion.create(Modal);
+const dialogEnterTransition = {
+    type: "spring",
+    visualDuration: overlayMotion.dialogEnter.durationMs / 1000,
+    bounce: overlayMotion.dialogEnter.bounce,
+};
+const dialogExitTransition = {
+    duration: overlayMotion.dialogExit.durationMs / 1000,
+    ease: "easeIn",
+};
+const backdropTransition = {
+    duration: overlayMotion.backdrop.durationMs / 1000,
+    ease: "easeInOut",
+};
+const reducedMotionTransition = {
+    duration: overlayMotion.reduced.durationMs / 1000,
+    ease: "easeInOut",
+};
+const overlayClass = style({
+    position: "fixed",
+    inset: 0,
+    zIndex: 1200,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    padding: spacing.value(8),
+    backgroundColor: "rgb(0 0 0 / 0.1)",
+    overflow: "auto",
+    overscrollBehavior: "contain",
+});
+const surfaceClass = style(background.element, border([], "outline"), radius.lg, {
+    width: "min(440px, calc(100vw - 32px))",
+    maxWidth: "100%",
+    maxHeight: "calc(100dvh - 32px)",
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
+    padding: spacing.value(12),
+    overflow: "hidden",
+    outline: "none",
+    transformOrigin: "center",
+    willChange: "opacity, transform",
 });
-const springConfigs = {
-    big: {
-        tension: 700,
-        friction: 50,
-        // clamp: true,
-    },
+const surfaceSizeClasses = {
+    sm: style({ width: "min(440px, calc(100vw - 32px))" }),
+    md: style({ width: "min(640px, calc(100vw - 32px))" }),
+    lg: style({ width: "min(960px, calc(100vw - 32px))" }),
 };
-export function Dialog(props) {
-    const className = useStyles(dialogStyle);
-    const dialogSprings = useSpring({
-        config: springConfigs.big,
-        from: {
-            transform: "scale(0.95)",
-            opacity: 0,
-        },
-        to: { transform: "scale(1)", opacity: 1 },
-    });
-    return (_jsx(Overlay, { onClickOutside: props.onClickOutside, children: _jsx(FocusScope, { containBehavior: "lock", autoFocus: true, children: _jsx(animated.div, { style: {
-                    ...dialogSprings,
-                }, className: className, children: props.children }) }) }));
+const dialogClass = style({
+    minWidth: 0,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: spacing.value(8),
+    outline: "none",
+});
+const titleClass = style(text({ size: "lg", fontWeight: 600 }), {
+    margin: 0,
+});
+const bodyClass = style({
+    minWidth: 0,
+    minHeight: 0,
+    overflowY: "auto",
+});
+const actionsClass = style({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    flexWrap: "wrap",
+    gap: spacing.value(4),
+});
+export function Dialog({ children, isOpen: isOpenProp, defaultOpen = false, onOpenChange, isDismissable = true, isKeyboardDismissDisabled, size = "sm", role = "dialog", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, }) {
+    const isControlled = isOpenProp !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? isOpenProp : uncontrolledOpen;
+    const reduceMotion = Boolean(useReducedMotion());
+    const overlayClassName = useStyles(overlayClass);
+    const surfaceClassName = useStyles(surfaceClass, surfaceSizeClasses[size]);
+    const dialogClassName = useStyles(dialogClass);
+    const setOpen = useCallback((next) => {
+        if (!isControlled) {
+            setUncontrolledOpen(next);
+        }
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const enterTransition = reduceMotion
+        ? reducedMotionTransition
+        : dialogEnterTransition;
+    const exitTransition = reduceMotion
+        ? reducedMotionTransition
+        : dialogExitTransition;
+    const scale = reduceMotion ? 1 : 0.98;
+    return (_jsx(AnimatePresence, { children: isOpen && (_jsx(MotionModalOverlay, { isOpen: true, onOpenChange: setOpen, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, className: overlayClassName, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: reduceMotion ? reducedMotionTransition : backdropTransition, children: _jsx(MotionModal, { className: cls(surfaceClassName, className), initial: { opacity: 0, scale }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale, transition: exitTransition }, transition: enterTransition, children: _jsx(AriaDialog, { role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: dialogClassName, children: children }) }) })) }));
+}
+export function DialogTitle({ className, ...props }) {
+    const titleClassName = useStyles(titleClass);
+    return (_jsx(Heading, { ...props, slot: "title", className: cls(titleClassName, className) }));
+}
+export function DialogBody({ className, ...props }) {
+    const bodyClassName = useStyles(bodyClass);
+    return _jsx("div", { ...props, className: cls(bodyClassName, className) });
+}
+export function DialogActions({ className, ...props }) {
+    const actionsClassName = useStyles(actionsClass);
+    return _jsx("div", { ...props, className: cls(actionsClassName, className) });
 }
-function AnimatedComponent(props) { }

package/dist/components/MermaidDiagram.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentPropsWithoutRef } from "react";
+export type MermaidDiagramProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+    source: string;
+};
+export declare function beautifulMermaidEditorUrl(source: string): string;
+export declare function MermaidDiagram({ source, className, "aria-label": ariaLabel, ...props }: MermaidDiagramProps): import("react").JSX.Element;

package/dist/components/MermaidDiagram.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { renderMermaidSVG } from "beautiful-mermaid";
+import { useMemo, useState } from "react";
+import { style, useStyles } from "purse-styles";
+import { Close, Copy, Fullscreen, LinkIcon } from "../icons/root";
+import { backgroundColor } from "../tokens/background";
+import { colors } from "../tokens/colors";
+import { radius } from "../tokens/radius";
+import { spacing } from "../tokens/spacing";
+import { text } from "../tokens/text";
+import { cls } from "../utils/cls";
+import { Button } from "./Button";
+import { Dialog } from "./Dialog";
+import { Tooltip } from "./Tooltip";
+const mauiMermaidTheme = {
+    bg: backgroundColor.app,
+    fg: colors.gray[12],
+    line: colors.gray[8],
+    accent: colors.accent[9],
+    muted: colors.gray[11],
+    surface: backgroundColor.element,
+    border: colors.gray[7],
+    font: "system-ui",
+    transparent: true,
+};
+const beautifulMermaidEditor = "https://agents.craft.do/mermaid/editor";
+export function beautifulMermaidEditorUrl(source) {
+    const bytes = new TextEncoder().encode(JSON.stringify({ source }));
+    let binary = "";
+    const chunkSize = 0x8000;
+    for (let offset = 0; offset < bytes.length; offset += chunkSize) {
+        binary += String.fromCharCode(...bytes.subarray(offset, offset + chunkSize));
+    }
+    return `${beautifulMermaidEditor}#${btoa(binary)}`;
+}
+const containerClass = style({
+    position: "relative",
+    maxWidth: "100%",
+});
+const diagramClass = style({
+    maxWidth: "100%",
+    overflowX: "auto",
+    "& svg": {
+        display: "block",
+        height: "auto",
+        maxWidth: "100%",
+        minWidth: "720px",
+    },
+});
+const actionsClass = style({
+    position: "absolute",
+    top: spacing.value(3),
+    right: spacing.value(3),
+    zIndex: 1,
+    display: "flex",
+    gap: spacing.value(2),
+});
+const dialogContentClass = style({
+    position: "relative",
+    minWidth: 0,
+    paddingTop: spacing.value(16),
+});
+const errorClass = style(text({ size: "xs", color: "lowContrast", monospace: true }), spacing.padding({ all: 6 }), radius.sm, {
+    backgroundColor: colors.gray[3],
+    whiteSpace: "pre-wrap",
+});
+export function MermaidDiagram({ source, className, "aria-label": ariaLabel = "Mermaid diagram", ...props }) {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const containerClassName = useStyles(containerClass);
+    const diagramClassName = useStyles(diagramClass);
+    const actionsClassName = useStyles(actionsClass);
+    const dialogContentClassName = useStyles(dialogContentClass);
+    const errorClassName = useStyles(errorClass);
+    const result = useMemo(() => {
+        try {
+            return { svg: renderMermaidSVG(source, mauiMermaidTheme), error: null };
+        }
+        catch (error) {
+            return {
+                svg: null,
+                error: error instanceof Error ? error.message : String(error),
+            };
+        }
+    }, [source]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, className: cls("maui-mermaid-diagram", containerClassName, className), children: [_jsxs("div", { className: actionsClassName, children: [_jsx(Tooltip, { content: "Open in Beautiful Mermaid", placement: "top", children: _jsx(Button, { "aria-label": "Open in Beautiful Mermaid", size: "sm", onClick: () => {
+                                        window.open(beautifulMermaidEditorUrl(source), "_blank", "noopener,noreferrer");
+                                    }, children: _jsx(LinkIcon, {}) }) }), _jsx(Tooltip, { content: "Copy Mermaid source", placement: "top", children: _jsx(Button, { "aria-label": "Copy Mermaid source", size: "sm", onClick: () => {
+                                        void navigator.clipboard.writeText(source);
+                                    }, children: _jsx(Copy, {}) }) }), _jsx(Tooltip, { content: "View fullscreen", placement: "top", children: _jsx(Button, { "aria-label": "View fullscreen", size: "sm", onClick: () => setDialogOpen(true), children: _jsx(Fullscreen, {}) }) })] }), result.error ? (_jsx("div", { className: errorClassName, role: "alert", children: result.error })) : (_jsx("div", { "aria-label": ariaLabel, className: diagramClassName, role: "img", dangerouslySetInnerHTML: { __html: result.svg ?? "" } }))] }), _jsx(Dialog, { "aria-label": `${ariaLabel} fullscreen`, isOpen: dialogOpen, onOpenChange: setDialogOpen, size: "lg", children: _jsxs("div", { className: dialogContentClassName, children: [_jsx("div", { className: actionsClassName, children: _jsx(Tooltip, { content: "Close", placement: "top", children: _jsx(Button, { "aria-label": "Close fullscreen dialog", size: "sm", slot: "close", children: _jsx(Close, {}) }) }) }), result.error ? (_jsx("div", { className: errorClassName, role: "alert", children: result.error })) : (_jsx("div", { "aria-label": `${ariaLabel} fullscreen`, className: diagramClassName, role: "img", dangerouslySetInnerHTML: { __html: result.svg ?? "" } }))] }) })] }));
+}

package/dist/components/Tooltip.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { animated, useSpring } from "@react-spring/web";
 import { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { mergeProps, useOverlayPosition, useTooltip, useTooltipTrigger, } from "react-aria";
 import { useTooltipTriggerState } from "react-stately";
+import { useReducedMotion } from "motion/react";
 import { style, useStyles } from "purse-styles";
 import { background } from "../tokens/background";
+import { border } from "../tokens/borders";
+import { overlayMotion } from "../tokens/motion";
 import { radius } from "../tokens/radius";
-import { shadow } from "../tokens/shadow";
 import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
 export function Tooltip(props) {
-    const { content, children, placement = "top", delay = 500, isDisabled, } = props;
+    const { content, children, placement = "top", delay = 400, isDisabled, } = props;
     const state = useTooltipTriggerState({ delay, isDisabled });
     const triggerRef = useRef(null);
     const { triggerProps, tooltipProps } = useTooltipTrigger({ delay, isDisabled }, state, triggerRef);
@@ -94,26 +95,15 @@ function useTooltipTransition(isOpen) {
     };
 }
 // The tooltip enters from the trigger's side: it starts nudged toward the
-// trigger and scaled down, then settles into its final position. The exit
-// reverses this, collapsing back toward the trigger.
-//
-// Both states MUST use the identical transform function structure
-// (`translate(x, y) scale(s)`). react-spring interpolates transforms by
-// matching numbers positionally between strings, so mismatched structures
-// (e.g. `translateY(...)` vs `translate(...)`) interpolate into garbage.
+// trigger, then settles into its final position. The final exit only fades so
+// dismissals feel faster than entrances.
 const hiddenTransforms = {
-    top: "translate(0px, 3px) scale(0.94)",
-    bottom: "translate(0px, -3px) scale(0.94)",
-    left: "translate(3px, 0px) scale(0.94)",
-    right: "translate(-3px, 0px) scale(0.94)",
-};
-const shownTransform = "translate(0px, 0px) scale(1)";
-const transformOrigins = {
-    top: "center bottom",
-    bottom: "center top",
-    left: "right center",
-    right: "left center",
+    top: "translate(0px, 2px)",
+    bottom: "translate(0px, -2px)",
+    left: "translate(2px, 0px)",
+    right: "translate(-2px, 0px)",
 };
+const shownTransform = "translate(0px, 0px)";
 function TooltipPopup(props) {
     const { state, triggerRef, placement, animateIn, phase, onExited, children, ...otherProps } = props;
     const overlayRef = useRef(null);
@@ -128,30 +118,41 @@ function TooltipPopup(props) {
     });
     const resolvedPlacement = actualPlacement ?? placement;
     const hidden = hiddenTransforms[resolvedPlacement];
-    // The spring's onRest closes over props from the render that scheduled the
-    // animation. If the user re-enters mid-exit, react-spring interrupts the
-    // exit and fires onRest — guard against that stale callback unmounting a
-    // tooltip that is now animating back in.
+    // A transition end can arrive after the user re-enters mid-exit. Guard
+    // against that stale event unmounting a tooltip that is visible again.
     const phaseRef = useRef(phase);
     phaseRef.current = phase;
-    const springStyle = useSpring({
-        config: { tension: 1200, friction: 60 },
-        from: { opacity: 0, transform: hidden },
-        to: phase === "out"
-            ? { opacity: 0, transform: hidden }
-            : { opacity: 1, transform: shownTransform },
-        // A tooltip opened via a "change" appears instantly (no enter animation).
-        immediate: phase === "in" && !animateIn,
-        onRest: (result) => {
-            if (result.finished && phaseRef.current === "out")
-                onExited();
-        },
-    });
+    const [visible, setVisible] = useState(!animateIn);
+    const reduceMotion = Boolean(useReducedMotion());
+    useEffect(() => {
+        if (phase === "out") {
+            setVisible(false);
+            return;
+        }
+        if (!animateIn) {
+            setVisible(true);
+            return;
+        }
+        const frame = requestAnimationFrame(() => setVisible(true));
+        return () => cancelAnimationFrame(frame);
+    }, [animateIn, phase]);
+    const transition = reduceMotion
+        ? `opacity ${overlayMotion.reduced.durationMs}ms ${overlayMotion.reduced.easing}`
+        : phase === "out"
+            ? `opacity ${overlayMotion.tooltipExit.durationMs}ms ${overlayMotion.tooltipExit.easing}`
+            : ["opacity", "transform"]
+                .map((property) => `${property} ${overlayMotion.tooltipEnter.durationMs}ms ${overlayMotion.tooltipEnter.easing}`)
+                .join(", ");
     const className = useStyles(tooltipClass);
-    return ReactDOM.createPortal(_jsx(animated.div, { ref: overlayRef, className: className, ...mergeProps(otherProps, tooltipProps), style: {
+    return ReactDOM.createPortal(_jsx("div", { ref: overlayRef, className: className, ...mergeProps(otherProps, tooltipProps), style: {
             ...overlayProps.style,
-            transformOrigin: transformOrigins[resolvedPlacement],
-            ...springStyle,
+            opacity: visible ? 1 : 0,
+            transform: reduceMotion || phase === "out" || visible ? shownTransform : hidden,
+            transition: phase === "in" && !animateIn ? "none" : transition,
+        }, onTransitionEnd: (event) => {
+            if (event.propertyName === "opacity" && phaseRef.current === "out") {
+                onExited();
+            }
         }, children: children }), document.body);
 }
 // The wrapper makes the trigger hoverable/focusable as a unit without
@@ -159,7 +160,7 @@ function TooltipPopup(props) {
 const triggerClass = style({
     display: "inline-block",
 });
-const tooltipClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), radius.sm, spacing.padding({ x: 3, y: 2 }), shadow.medium, background.element, {
+const tooltipClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), radius.sm, spacing.padding({ x: 3, y: 2 }), border([], "outline"), background.element, {
     zIndex: 1000,
     maxWidth: "240px",
 });

package/dist/maui.d.ts

@@ -14,7 +14,7 @@ export { spacing, type Space } from "./tokens/spacing";
 export { flex, flexItem, grid, gridItem, type AlignItems, type JustifyContent } from "./tokens/layout";
 export { text, monospace, baseTextStyle, fontFamily, monoFontFamily, monoFontStyle, type TextSize, type TextWeight, type TextColor, type TextOptions, } from "./tokens/text";
 export { avatar } from "./tokens/avatar";
-export { motion, motionDurationMs, motionEasing, motionStreamDurationMs, } from "./tokens/motion";
+export { motion, motionDurationMs, motionEasing, motionStreamDurationMs, overlayMotion, } from "./tokens/motion";
 export { iconSizeValues, sizingTokens as sizing, type IconSize, } from "./tokens/sizing";
 export { prose, proseRhythm, proseHtml, proseStreamingMarkers, type ProseSize, } from "./tokens/prose";
 export { visuallyHidden } from "./tokens/visuallyHidden";
@@ -28,7 +28,7 @@ export { Slider } from "./components/Slider";
 export { RadioOptionGroup, RadioOption } from "./components/Radio";
 export { TextField, SearchField, NumberField, QuietTextField, type TextFieldProps, type SearchFieldProps, } from "./components/Input";
 export { Select, SelectItem, type SelectProps, type SelectItemProps, } from "./components/Select";
-export { Dialog } from "./components/Dialog";
+export { Dialog, DialogActions, DialogBody, DialogTitle, type DialogActionsProps, type DialogBodyProps, type DialogProps, type DialogSize, type DialogTitleProps, } from "./components/Dialog";
 export { Tooltip } from "./components/Tooltip";
 export { Overlay } from "./components/Overlay";
 export { Drawer, type DrawerProps, type DrawerSide, } from "./components/Drawer";
@@ -47,5 +47,6 @@ export { Text, type TextProps } from "./components/Text";
 export { H1, H2, H3, H4, P, Label, labelText, Blockquote, Ul, Ol, Li, Link, } from "./components/Typography";
 export { CodeBlock } from "./components/CodeBlock";
 export { Code, Kbd, type KbdProps, type KbdVariant } from "./components/Code";
+export { MermaidDiagram, type MermaidDiagramProps, } from "./components/MermaidDiagram";
 export { CollectionPopover, type CollectionPopoverProps, } from "./components/CollectionPopover";
 export { navigationItem } from "./components/navigationItem";

package/dist/maui.js

@@ -16,7 +16,7 @@ export { spacing } from "./tokens/spacing";
 export { flex, flexItem, grid, gridItem } from "./tokens/layout";
 export { text, monospace, baseTextStyle, fontFamily, monoFontFamily, monoFontStyle, } from "./tokens/text";
 export { avatar } from "./tokens/avatar";
-export { motion, motionDurationMs, motionEasing, motionStreamDurationMs, } from "./tokens/motion";
+export { motion, motionDurationMs, motionEasing, motionStreamDurationMs, overlayMotion, } from "./tokens/motion";
 export { iconSizeValues, sizingTokens as sizing, } from "./tokens/sizing";
 export { prose, proseRhythm, proseHtml, proseStreamingMarkers, } from "./tokens/prose";
 export { visuallyHidden } from "./tokens/visuallyHidden";
@@ -31,7 +31,7 @@ export { Slider } from "./components/Slider";
 export { RadioOptionGroup, RadioOption } from "./components/Radio";
 export { TextField, SearchField, NumberField, QuietTextField, } from "./components/Input";
 export { Select, SelectItem, } from "./components/Select";
-export { Dialog } from "./components/Dialog";
+export { Dialog, DialogActions, DialogBody, DialogTitle, } from "./components/Dialog";
 export { Tooltip } from "./components/Tooltip";
 export { Overlay } from "./components/Overlay";
 export { Drawer, } from "./components/Drawer";
@@ -50,5 +50,6 @@ export { Text } from "./components/Text";
 export { H1, H2, H3, H4, P, Label, labelText, Blockquote, Ul, Ol, Li, Link, } from "./components/Typography";
 export { CodeBlock } from "./components/CodeBlock";
 export { Code, Kbd } from "./components/Code";
+export { MermaidDiagram, } from "./components/MermaidDiagram";
 export { CollectionPopover, } from "./components/CollectionPopover";
 export { navigationItem } from "./components/navigationItem";

package/dist/tokens/motion.d.ts

@@ -3,6 +3,34 @@ export declare const motionDurationMs = 80;
 /** Entrance duration for streaming token reveals (Streamdown word fade). */
 export declare const motionStreamDurationMs = 80;
 export declare const motionEasing = "ease-in-out";
+/** Shared timings for transient overlay surfaces. */
+export declare const overlayMotion: {
+    readonly tooltipEnter: {
+        readonly durationMs: 120;
+        readonly easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+    };
+    readonly tooltipExit: {
+        readonly durationMs: 80;
+        readonly easing: "ease-in";
+    };
+    readonly dialogEnter: {
+        readonly durationMs: 200;
+        readonly easing: "spring (bounce 0)";
+        readonly bounce: 0;
+    };
+    readonly dialogExit: {
+        readonly durationMs: 120;
+        readonly easing: "ease-in";
+    };
+    readonly backdrop: {
+        readonly durationMs: 100;
+        readonly easing: "ease-in-out";
+    };
+    readonly reduced: {
+        readonly durationMs: 80;
+        readonly easing: "ease-in-out";
+    };
+};
 export declare const motion: {
     readonly standard: (...args: string[]) => import("purse-styles").StyleElement;
 };

package/dist/tokens/motion.js

@@ -5,6 +5,22 @@ export const motionDurationMs = 80;
 /** Entrance duration for streaming token reveals (Streamdown word fade). */
 export const motionStreamDurationMs = 80;
 export const motionEasing = "ease-in-out";
+/** Shared timings for transient overlay surfaces. */
+export const overlayMotion = {
+    tooltipEnter: {
+        durationMs: 120,
+        easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+    },
+    tooltipExit: { durationMs: 80, easing: "ease-in" },
+    dialogEnter: {
+        durationMs: 200,
+        easing: "spring (bounce 0)",
+        bounce: 0,
+    },
+    dialogExit: { durationMs: 120, easing: "ease-in" },
+    backdrop: { durationMs: 100, easing: "ease-in-out" },
+    reduced: { durationMs: 80, easing: "ease-in-out" },
+};
 const standardDuration = `${motionDurationMs}ms`;
 export const motion = {
     standard: memoize((...properties) => style({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.45",
+	"version": "0.0.47",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",
@@ -100,6 +100,7 @@
 		"dialkit": "^2.0.2",
 		"esbuild": "^0.28.0",
 		"libretto-browser-tools": "^0.1.2",
+		"motion": "^13.2.0",
 		"process": "^0.11.10",
 		"satori": "^0.29.0",
 		"serve": "^14.2.6",
@@ -120,14 +121,13 @@
 		"@fontsource/commit-mono": "^5.3.0",
 		"@lezer/highlight": "^1.2.3",
 		"@radix-ui/colors": "^3.0.0",
-		"@react-spring/web": "^10.1.0",
 		"@streamdown/code": "^1.1.1",
 		"@types/inline-style-prefixer": "^5.0.3",
 		"@uiw/react-codemirror": "^4.25.11",
+		"beautiful-mermaid": "^1.1.3",
 		"dedent": "^1.7.2",
 		"inline-style-prefixer": "^7.0.1",
 		"lodash": "^4.18.1",
-		"motion": "^13.2.0",
 		"prettier": "^3.9.6",
 		"purse-styles": "^0.2.4",
 		"react": "^19.0.0",
@@ -149,6 +149,7 @@
 		"@tiptap/pm": "^3.29.2",
 		"@tiptap/react": "^3.29.2",
 		"@tiptap/starter-kit": "^3.29.2",
+		"motion": "^13.2.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0"
 	},

package/skills/maui/references/components/buttons.md

@@ -50,16 +50,31 @@ Full-viewport portal. `onClickOutside` fires when the backdrop itself is the mou
 
 ## `Dialog`
 
-`Overlay` + focus lock + scale/fade in. Children are the dialog body (padding 32px, `background.element`, 4px radius). Not React Aria Dialog — you own title and close.
+Accessible React Aria modal with focus containment/restoration, Escape handling,
+outside-click dismissal, scroll locking, and reversible scale/fade motion. The
+page is covered by a neutral 10% black scrim and the solid surface uses an
+outline border with no blur or shadow.
 
 ```tsx
-{open && (
-  <Dialog onClickOutside={() => setOpen(false)}>
-    <H3>Confirm</H3>
-    <P>This cannot be undone.</P>
-    <Button onClick={() => setOpen(false)}>Close</Button>
-  </Dialog>
-)}
+<Dialog isOpen={open} onOpenChange={setOpen}>
+	<DialogTitle>Delete project?</DialogTitle>
+	<DialogBody>
+		<P>This cannot be undone.</P>
+	</DialogBody>
+	<DialogActions>
+		<Button slot="close">Cancel</Button>
+		<Button variant="primary" variantColor="red">
+			Delete
+		</Button>
+	</DialogActions>
+</Dialog>
 ```
 
+Keep `Dialog` mounted and control it with `isOpen`; conditional mounting prevents
+the exit animation. `size` is `"sm" | "md" | "lg"` (`"sm"` default, 440px;
+`"md"` is 640px for forms).
+`isDismissable` defaults to true. Use `role="alertdialog"` and disable pointer and
+keyboard dismissal when a response is required. Actions are composed rather than
+passed as callback props so forms, loading states, links, and custom controls work.
+
 Edge-anchored mobile nav is [`Drawer`](drawer.md), not this Dialog and not Overlay.