magnaui 0.1.0

package/dist/assets/magna-logo.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="625.116" height="431.19" viewBox="0 0 625.116 431.19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M61.82 431.11C58.41 431.11 24.11 424.23 17.85 416.57C15.71 414.04 15.69 409.9 17.81 407.12C18.72 405.93 20.69 404.42 26.58 400.4L27.33 399.89L578.32 7.53C583.38 3.95 589.68 1.98001 596.07 1.98001C600.35 1.98001 604.66 2.87 608.53 4.56C618.56 8.93 625.04 18.33 625.04 28.5V337.72C625.04 340.7 625.06 343.61 625.08 346.51V346.6C625.13 354.13 625.17 361.92 624.9 370.71C624.78 374.66 621.35 377.87 617.26 377.87C616.94 377.87 616.62 377.85 616.3 377.81C608.75 376.9 597.28 371.24 586.36 363.03C579.17 357.63 567.1 347.15 567.1 337.72V82.53C501.72 128.56 81.3 424.51 77.18 427.3C71.54 431.11 65.69 431.11 61.82 431.11ZM7.75 376.44C15.41 375.59 27.37 370.02 38.22 362.25C54.3 350.75 57.67 342.56 57.67 337.71V80.45L220.46 196.17C222.36 197.62 231.94 204.44 243.63 204.44C251.78 204.44 258.93 201.22 264.88 194.87C270.6 188.76 273.01 182.19 272.05 175.34C270.43 163.81 259.47 156.21 258.03 155.26L46.57 5.58002C41.53 1.98002 35.23 0 28.83 0C24.59 0 20.32 0.880009 16.48 2.54001C6.47001 6.88001 0 16.24 0 26.4V337.71C0 343.57 0 349.91 0 355.83C0 355.83 0 366.05 0 369.73C0 371.62 0.82 373.43 2.25 374.7C3.54 375.85 5.20999 376.48 6.95999 376.48C7.22999 376.48 7.50001 376.47 7.76001 376.44H7.75ZM565.56 431.13C569.35 430.95 601.74 424.32 608.17 416.99C609.77 415.19 610.49 412.99 610.19 410.77C609.7 407.11 606.8 405.11 605.09 403.93L406.88 263.79C402.03 260.36 395.97 258.47 389.83 258.47C383.69 258.47 377.48 260.41 372.59 263.93C365.76 268.84 361.88 276.23 361.94 284.2C362 292.18 366 299.53 372.92 304.36L548.19 426.65C552.5 429.7 557.55 431.19 563.62 431.19C564.26 431.19 564.91 431.17 565.55 431.14L565.56 431.13Z" fill="black"/>
+</svg>

package/dist/components/interactions/border-beam.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { type BorderBeamProps as PrimitiveProps } from "border-beam";
+export type BorderBeamProps = PrimitiveProps;
+/** A theme-aware decorative beam around any MagnaUI component. */
+export declare const BorderBeam: React.ForwardRefExoticComponent<PrimitiveProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/interactions/border-beam.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { BorderBeam as Primitive, } from "border-beam";
+import { useInteractionPreferences } from "./preferences.js";
+/** A theme-aware decorative beam around any MagnaUI component. */
+export const BorderBeam = React.forwardRef(function BorderBeam({ theme = 'auto', active = true, size, colorVariant, staticColors, duration, borderRadius, brightness, saturation, glowSize, hueRange, strength, css, onActivate, onDeactivate, ...props }, ref) {
+    const preferences = useInteractionPreferences();
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => setMounted(true), []);
+    // The upstream style element must mount in the browser: SSR escapes its CSS text.
+    if (!mounted)
+        return _jsx("div", { ...props, ref: ref });
+    return (_jsx(Primitive, { ...props, ref: ref, theme: theme === 'auto' ? preferences.theme : theme, active: active && !preferences.reducedMotion, size: size, colorVariant: colorVariant, staticColors: staticColors, duration: duration, borderRadius: borderRadius, brightness: brightness, saturation: saturation, glowSize: glowSize, hueRange: hueRange, strength: strength, css: css, onActivate: onActivate, onDeactivate: onDeactivate }));
+});

package/dist/components/interactions/bot-avatar.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { type BotAvatarProps as PrimitiveProps } from "bot-avatars";
+export type BotAvatarProps = PrimitiveProps;
+/** An animated assistant avatar with MagnaUI theme and reduced-motion defaults. */
+export declare const BotAvatar: React.ForwardRefExoticComponent<PrimitiveProps & React.RefAttributes<HTMLCanvasElement>>;

package/dist/components/interactions/bot-avatar.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { BotAvatar as Primitive, } from "bot-avatars";
+import { useInteractionPreferences } from "./preferences.js";
+/** An animated assistant avatar with MagnaUI theme and reduced-motion defaults. */
+export const BotAvatar = React.forwardRef(function BotAvatar({ theme = 'auto', paused = false, interactive = true, ...props }, ref) {
+    const preferences = useInteractionPreferences();
+    return (_jsx(Primitive, { ...props, ref: ref, theme: theme === 'auto' ? preferences.theme : theme, paused: paused || preferences.reducedMotion, interactive: interactive && !preferences.reducedMotion }));
+});

package/dist/components/interactions/image-generation.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+export type ImageGenerationPreset = 'pixels-organic' | 'pixels-mechanic' | 'sweep-gradient';
+export type ImageGenerationTheme = 'auto' | 'dark' | 'light';
+export interface ImageGenerationCycleEvent {
+    phase: 'idle' | 'reveal' | 'visible' | 'hide';
+    src: string | null;
+}
+export interface ImageGenerationHandle {
+    /** The wrapper div, including the static fallback when animation is unavailable. */
+    element: HTMLDivElement | null;
+    /** Reveal an image, then hide automatically or hold until triggerHide is called. */
+    triggerReveal: (options?: {
+        hold?: 'auto' | 'manual';
+    }) => void;
+    triggerHide: () => void;
+    /** Regenerate the visible image; durationMs defaults to 4000. */
+    triggerRegenerate: (options?: {
+        durationMs?: number;
+        tintFromImage?: boolean;
+        autoReveal?: boolean;
+    }) => void;
+    isImageActive: () => boolean;
+}
+export type ImageGenerationRef = ImageGenerationHandle;
+export interface ImageGenerationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Content wrapped by the effect. */
+    children: React.ReactNode;
+    preset?: ImageGenerationPreset;
+    theme?: ImageGenerationTheme;
+    /** Shader opacity multiplier, from 0 to 1. */
+    strength?: number;
+    /** Pixel-cell size multiplier. Defaults to 1. */
+    pixelScale?: number;
+    cardBg?: string;
+    /** CSS palette overrides; null or undefined slots retain preset colors. */
+    colors?: (string | null | undefined)[];
+    images?: string | string[];
+    autoReveal?: boolean;
+    /** Random delay range in seconds between reveals. */
+    revealDelayRange?: [number, number];
+    /** Initial delay in seconds, fixed or sampled from a range. */
+    revealInitialDelay?: number | [number, number];
+    /** Visible duration in milliseconds, fixed or sampled from a range. */
+    revealHoldMs?: number | [number, number];
+    revealFadeOutMs?: number;
+    borderRadius?: number;
+    paused?: boolean;
+    onCycle?: (event: ImageGenerationCycleEvent) => void;
+    excludeSrcs?: () => string[] | Set<string> | null | undefined;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Optional static content when reduced motion is selected or WebGL is unavailable. */
+    fallback?: React.ReactNode;
+    /** Alt text for the first image shown by the default static fallback. */
+    fallbackAlt?: string;
+}
+/** Image reveal with a static, accessible image when animated rendering is unavailable. */
+export declare const ImageGeneration: React.ForwardRefExoticComponent<ImageGenerationProps & React.RefAttributes<ImageGenerationHandle>>;

package/dist/components/interactions/image-generation.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useInteractionPreferences } from "./preferences.js";
+const ImageGenerationPrimitive = React.lazy(async () => ({
+    default: (await import("img-fx")).ImageGeneration,
+}));
+const effectKeys = new Set([
+    'preset',
+    'theme',
+    'strength',
+    'pixelScale',
+    'cardBg',
+    'colors',
+    'images',
+    'autoReveal',
+    'revealDelayRange',
+    'revealInitialDelay',
+    'revealHoldMs',
+    'revealFadeOutMs',
+    'borderRadius',
+    'paused',
+    'onCycle',
+    'excludeSrcs',
+]);
+class ImageEffectBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { failed: false };
+    }
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    render() {
+        return this.state.failed ? this.props.fallback : this.props.children;
+    }
+}
+/** Image reveal with a static, accessible image when animated rendering is unavailable. */
+export const ImageGeneration = React.forwardRef(function ImageGeneration({ children, fallback, fallbackAlt = '', theme = 'auto', className, style, ...props }, ref) {
+    const preferences = useInteractionPreferences();
+    const [supported, setSupported] = React.useState(false);
+    const [failedImage, setFailedImage] = React.useState();
+    const effectRef = React.useRef(null);
+    const fallbackRef = React.useRef(null);
+    React.useEffect(() => {
+        // Three 0.149 supports either context. Release this short-lived probe;
+        // the upstream renderer owns and cleans up the context used for drawing.
+        try {
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('webgl2') || canvas.getContext('webgl');
+            const available = !!context && !!document.createElement('canvas').getContext('2d');
+            context?.getExtension('WEBGL_lose_context')?.loseContext();
+            setSupported(available);
+        }
+        catch {
+            setSupported(false);
+        }
+    }, []);
+    React.useImperativeHandle(ref, () => ({
+        get element() {
+            return effectRef.current?.element ?? fallbackRef.current;
+        },
+        triggerReveal: (options) => effectRef.current?.triggerReveal(options),
+        triggerHide: () => effectRef.current?.triggerHide(),
+        triggerRegenerate: (options) => effectRef.current?.triggerRegenerate(options),
+        isImageActive: () => effectRef.current?.isImageActive() ?? false,
+    }), []);
+    const firstImage = typeof props.images === 'string' ? props.images : props.images?.[0];
+    const htmlProps = Object.fromEntries(Object.entries(props).filter(([key]) => !effectKeys.has(key)));
+    const resolvedTheme = theme === 'auto' ? preferences.theme : theme;
+    const staticContent = (_jsx("div", { ...htmlProps, ref: fallbackRef, className: className, "data-image-generation-fallback": '', "data-theme": resolvedTheme, style: {
+            position: 'relative',
+            display: 'inline-block',
+            overflow: 'hidden',
+            verticalAlign: 'top',
+            background: props.cardBg ?? 'var(--bg-weak-50)',
+            borderRadius: props.borderRadius ?? 20,
+            ...style,
+        }, children: fallback ?? (_jsxs(_Fragment, { children: [children, firstImage && failedImage !== firstImage && (
+                // Keep a native image: these are caller-owned local or data URLs.
+                // eslint-disable-next-line @next/next/no-img-element
+                _jsx("img", { src: firstImage, alt: fallbackAlt, className: 'pointer-events-none absolute inset-0 size-full object-cover', onError: () => setFailedImage(firstImage) }))] })) }));
+    if (!supported || preferences.reducedMotion)
+        return staticContent;
+    return (_jsx(ImageEffectBoundary, { fallback: staticContent, children: _jsx(React.Suspense, { fallback: staticContent, children: _jsx(ImageGenerationPrimitive, { ...props, ref: effectRef, theme: resolvedTheme, className: className, cardBg: props.cardBg ?? (resolvedTheme === 'dark' ? '#171717' : '#ffffff'), style: style, children: children }) }) }, props.preset));
+});

package/dist/components/interactions/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./border-beam.js";
+export * from "./thinking-orb.js";
+export * from "./bot-avatar.js";
+export * from "./liquid.js";
+export * from "./voice-beam.js";
+export * from "./metal-fx.js";
+export * from "./image-generation.js";

package/dist/components/interactions/index.js

@@ -0,0 +1,7 @@
+export * from "./border-beam.js";
+export * from "./thinking-orb.js";
+export * from "./bot-avatar.js";
+export * from "./liquid.js";
+export * from "./voice-beam.js";
+export * from "./metal-fx.js";
+export * from "./image-generation.js";

package/dist/components/interactions/liquid.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { type LiquidItemProps, type LiquidProps } from "liquid-gooey";
+export type { BendTuning, CornerRadii, DissolveOptions, EvolveOptions, ImageMeltOptions, LiquidEffect, LiquidItemProps, LiquidProps, MorphTuning, MoveOptions, MoveTuning, SpringConfig, Transition, TransitionPreset, } from "liquid-gooey";
+declare function LiquidItem(props: LiquidItemProps): import("react/jsx-runtime").JSX.Element;
+/** Magna surfaces with the complete liquid-gooey group and Item APIs. */
+export declare const Liquid: React.ForwardRefExoticComponent<LiquidProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: typeof LiquidItem;
+};

package/dist/components/interactions/liquid.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Liquid as LiquidPrimitive, } from "liquid-gooey";
+import { useInteractionPreferences } from "./preferences.js";
+const LiquidRoot = React.forwardRef(function Liquid({ fill = 'var(--primary-base)', waviness, ...props }, ref) {
+    const { reducedMotion } = useInteractionPreferences();
+    return (_jsx(LiquidPrimitive, { ...props, ref: ref, fill: fill, waviness: reducedMotion ? 0 : waviness }));
+});
+function LiquidItem(props) {
+    const { reducedMotion } = useInteractionPreferences();
+    return reducedMotion ? (_jsx(LiquidPrimitive.Item, { ...props, effect: 'morph', morph: undefined, dissolve: false, observe: props.observe ||
+            props.effect === 'move' ||
+            props.effect === 'bend' ||
+            props.effect === 'melt' ||
+            Boolean(props.morph?.shape || props.dissolve), delay: 0, transition: { duration: 0 } })) : (_jsx(LiquidPrimitive.Item, { ...props }));
+}
+/** Magna surfaces with the complete liquid-gooey group and Item APIs. */
+export const Liquid = Object.assign(LiquidRoot, { Item: LiquidItem });

package/dist/components/interactions/metal-fx.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { MetalFxProps } from "metal-fx";
+export type { MetalFxProps, MetalFxPreset, MetalFxReflectionTarget, MetalFxTheme, MetalFxVariant, } from "metal-fx";
+export type MetalFxRef = HTMLDivElement;
+/** Metal lighting that follows Magna's theme and retains the child's focus styles. */
+export declare const MetalFx: React.ForwardRefExoticComponent<MetalFxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/interactions/metal-fx.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useInteractionPreferences } from "./preferences.js";
+const MetalFxPrimitive = React.lazy(async () => ({
+    default: (await import("metal-fx")).MetalFx,
+}));
+const effectKeys = new Set([
+    'variant',
+    'preset',
+    'strength',
+    'glowGain',
+    'borderRadius',
+    'reflectionTargets',
+    'disableGlow',
+    'innerShadow',
+    'shaderScale',
+    'ringCssPx',
+    'scale',
+    'mask',
+    'glowMode',
+]);
+class MetalEffectBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { failed: false };
+    }
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    render() {
+        return this.state.failed ? this.props.fallback : this.props.children;
+    }
+}
+/** Metal lighting that follows Magna's theme and retains the child's focus styles. */
+export const MetalFx = React.forwardRef(function MetalFx({ children, theme = 'auto', paused = false, normalizeHostStyles = false, className, style, ...props }, ref) {
+    const preferences = useInteractionPreferences();
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => setMounted(true), []);
+    const htmlProps = Object.fromEntries(Object.entries(props).filter(([key]) => !effectKeys.has(key)));
+    const staticContent = (_jsx("div", { ...htmlProps, ref: ref, className: className, style: { display: 'inline-flex', ...style }, children: children }));
+    // The upstream capability probe caches its answer. Mount it only in the
+    // browser, so server rendering cannot cache an unsupported result.
+    if (!mounted)
+        return staticContent;
+    return (_jsx(MetalEffectBoundary, { fallback: staticContent, children: _jsx(React.Suspense, { fallback: staticContent, children: _jsx(MetalFxPrimitive, { ...props, ref: ref, className: className, theme: theme === 'auto' ? preferences.theme : theme, paused: paused || preferences.reducedMotion, normalizeHostStyles: normalizeHostStyles, style: {
+                    background: 'var(--bg-white-0)',
+                    color: 'var(--text-strong-950)',
+                    ...style,
+                }, children: children }) }) }));
+});

package/dist/components/interactions/preferences.d.ts

@@ -0,0 +1,5 @@
+/** Use Magna's selected theme and respect the operating system's motion setting. */
+export declare function useInteractionPreferences(): {
+    theme: "dark" | "light";
+    reducedMotion: boolean;
+};

package/dist/components/interactions/preferences.js

@@ -0,0 +1,55 @@
+'use client';
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+/** Use Magna's selected theme and respect the operating system's motion setting. */
+export function useInteractionPreferences() {
+    const { resolvedTheme } = useTheme();
+    const [interactionTheme, setInteractionTheme] = useState('light');
+    // Keep animations still during hydration, before the media query is available.
+    const [reducedMotion, setReducedMotion] = useState(true);
+    useEffect(() => {
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setReducedMotion(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    useEffect(() => {
+        if (resolvedTheme === 'light' || resolvedTheme === 'dark') {
+            setInteractionTheme(resolvedTheme);
+            return;
+        }
+        const root = document.documentElement;
+        const query = window.matchMedia('(prefers-color-scheme: dark)');
+        const update = () => {
+            const declared = root.dataset.theme;
+            const colorScheme = root.style.colorScheme;
+            setInteractionTheme(declared === 'light' || declared === 'dark'
+                ? declared
+                : root.classList.contains('dark')
+                    ? 'dark'
+                    : root.classList.contains('light')
+                        ? 'light'
+                        : colorScheme === 'light' || colorScheme === 'dark'
+                            ? colorScheme
+                            : query.matches
+                                ? 'dark'
+                                : 'light');
+        };
+        update();
+        const observer = new MutationObserver(update);
+        observer.observe(root, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme', 'style'],
+        });
+        query.addEventListener('change', update);
+        return () => {
+            observer.disconnect();
+            query.removeEventListener('change', update);
+        };
+    }, [resolvedTheme]);
+    return {
+        theme: interactionTheme,
+        reducedMotion,
+    };
+}

package/dist/components/interactions/thinking-orb.d.ts

@@ -0,0 +1,4 @@
+import { type ThinkingOrbProps as PrimitiveProps } from "thinking-orbs";
+export type ThinkingOrbProps = PrimitiveProps;
+/** A labeled activity indicator that follows MagnaUI's theme and motion settings. */
+export declare function ThinkingOrb({ theme, paused, ...props }: ThinkingOrbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/interactions/thinking-orb.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThinkingOrb as Primitive, } from "thinking-orbs";
+import { useInteractionPreferences } from "./preferences.js";
+/** A labeled activity indicator that follows MagnaUI's theme and motion settings. */
+export function ThinkingOrb({ theme = 'auto', paused = false, ...props }) {
+    const preferences = useInteractionPreferences();
+    return (_jsx(Primitive, { ...props, theme: theme === 'auto' ? preferences.theme : theme, paused: paused || preferences.reducedMotion }));
+}

package/dist/components/interactions/voice-beam.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { type VoiceBeamProps } from "voice-glow";
+export type { VoiceBeamColorVariant, VoiceBeamLevel, VoiceBeamProps, VoiceBeamTheme, VoiceBeamType, VoiceGeometry, VoiceThemeColors, VoiceTypeStyle, } from "voice-glow";
+/** A manually driven or stream-driven glow that follows Magna's theme. */
+export declare const VoiceBeam: React.ForwardRefExoticComponent<VoiceBeamProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/interactions/voice-beam.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { VoiceBeam as VoiceBeamPrimitive, } from "voice-glow";
+import { useInteractionPreferences } from "./preferences.js";
+// Keep standard React, data, and ARIA props on the server-rendered content host.
+// Effect configuration belongs to the mounted primitive, never to the DOM.
+const effectPropNames = new Set(`type scale stream level sensitivity threshold attack release idle breatheDuration
+   reach spread bands flow processing processingDuration processingLevel processingEase
+   processingTravel processingCurve cornerFollow colorVariant colors bandColors theme
+   staticColors hueRange hueDuration active paused borderRadius brightness saturation
+   glowSize strokeOpacity innerOpacity bloomOpacity bend bandStrength bandWidth
+   bandPosition bandCurve bandSpread bandSkew bandOffset bandTail bandTailPosition
+   bandTailCurve bandTailOverflow bandAberration distortion distortionDetail glowWidth
+   glowHeight lobeSpacing rangeWidth rangeHeight softness coreSize coreLight
+   coreLightWidth coreLightHeight strokeScale innerScale innerHeight bloomScale
+   bloomHeight strength css onLevel onActivate onDeactivate`
+    .trim()
+    .split(/\s+/));
+/** A manually driven or stream-driven glow that follows Magna's theme. */
+export const VoiceBeam = React.forwardRef(function VoiceBeam({ theme, paused, staticColors, processing, flow, ...props }, ref) {
+    const preferences = useInteractionPreferences();
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => setMounted(true), []);
+    // The published component renders generated CSS as a style text child and
+    // reads browser media/canvas capabilities during render. Mount it only after
+    // hydration so its CSS and feature-dependent markup never disagree with SSR.
+    if (!mounted) {
+        const htmlProps = Object.fromEntries(Object.entries(props).filter(([key]) => !effectPropNames.has(key)));
+        return (_jsx("div", { ...htmlProps, ref: ref, children: props.children }));
+    }
+    return (_jsx(VoiceBeamPrimitive, { ...props, ref: ref, theme: theme === undefined || theme === 'auto' ? preferences.theme : theme, paused: preferences.reducedMotion || paused, staticColors: preferences.reducedMotion || staticColors, processing: preferences.reducedMotion ? false : processing, flow: preferences.reducedMotion ? 0 : flow }));
+});

package/dist/components/magna/app-icon.d.ts

@@ -0,0 +1,13 @@
+import { type MagnaAppId } from "./apps.js";
+/** Transparent 2x PNG exports of the original Figma icon components. */
+export declare function AppIcon({ app, size, className, decorative, }: {
+    app: MagnaAppId;
+    size?: number;
+    className?: string;
+    decorative?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AppLauncher({ apps, onLaunch, className, }: {
+    apps?: readonly MagnaAppId[];
+    onLaunch: (app: MagnaAppId) => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/magna/app-icon.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { magnaApps } from "./apps.js";
+/** Transparent 2x PNG exports of the original Figma icon components. */
+export function AppIcon({ app, size = 48, className, decorative = false, }) {
+    const asset = magnaApps.find((item) => item.id === app);
+    return (
+    // Keep the exported artwork usable outside Next.js as a source component.
+    // eslint-disable-next-line @next/next/no-img-element
+    _jsx("img", { src: asset.src, alt: decorative ? '' : asset.name, width: size, height: size, className: cn('shrink-0 object-contain', className), style: { width: size, height: size } }));
+}
+export function AppLauncher({ apps = magnaApps.map((a) => a.id), onLaunch, className, }) {
+    return (_jsx("div", { className: cn('grid grid-cols-3 gap-5 sm:grid-cols-5 lg:grid-cols-8', className), children: apps.map((id) => (_jsxs("button", { type: 'button', onClick: () => onLaunch(id), className: 'flex min-w-0 flex-col items-center gap-2 rounded-2xl p-2 transition hover:bg-bg-weak-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-base', children: [_jsx(AppIcon, { app: id, size: 52, decorative: true }), _jsx("span", { className: 'w-full truncate text-center text-label-xs', children: magnaApps.find((a) => a.id === id)?.name })] }, id))) }));
+}