animark-react 0.1.0

package/dist/canvasTypes.d.ts

@@ -0,0 +1,28 @@
+export type CanvasPreset = "full-screen" | "16:9" | "4:3" | "custom";
+export type VerticalAlign = "top" | "center" | "bottom" | "stretch";
+export type HorizontalAlign = "left" | "center" | "right" | "stretch";
+export interface CanvasSize {
+    width?: number | string;
+    height?: number | string;
+    preset?: CanvasPreset;
+    /** Background color for the canvas area */
+    background?: string;
+    /** Padding inside the canvas */
+    padding?: number | string;
+    /** Overflow behavior. Default: "hidden" */
+    overflow?: "hidden" | "auto" | "scroll" | "visible";
+    /** Vertical alignment of content. Default: "top" */
+    verticalAlign?: VerticalAlign;
+    /** Horizontal alignment of content. Default: "left" */
+    horizontalAlign?: HorizontalAlign;
+}
+export interface ResolvedCanvasSize {
+    width: string;
+    height: string;
+    background: string;
+    padding: string;
+    verticalAlign: VerticalAlign;
+    horizontalAlign: HorizontalAlign;
+}
+export declare function resolveCanvasSize(size?: CanvasSize): ResolvedCanvasSize | null;
+//# sourceMappingURL=canvasTypes.d.ts.map

package/dist/canvasTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTypes.d.ts","sourceRoot":"","sources":["../src/canvasTypes.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AACpE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IACpD,oDAAoD;IACpD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,uDAAuD;IACvD,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,aAAa,CAAC;IAC7B,eAAe,EAAE,eAAe,CAAC;CAClC;AAED,wBAAgB,iBAAiB,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,kBAAkB,GAAG,IAAI,CAgE9E"}

package/dist/canvasTypes.js

@@ -0,0 +1,57 @@
+export function resolveCanvasSize(size) {
+    if (!size)
+        return null;
+    const { preset, width, height, background = "#ffffff", padding = "48px", verticalAlign = "top", horizontalAlign = "left" } = size;
+    switch (preset) {
+        case "full-screen":
+            return {
+                width: "100vw",
+                height: "100vh",
+                background,
+                padding: typeof padding === "number" ? `${padding}px` : padding,
+                verticalAlign,
+                horizontalAlign,
+            };
+        case "16:9":
+            return {
+                width: "100%",
+                height: "0", // Will use aspect-ratio CSS
+                background,
+                padding: typeof padding === "number" ? `${padding}px` : padding,
+                verticalAlign,
+                horizontalAlign,
+            };
+        case "4:3":
+            return {
+                width: "100%",
+                height: "0",
+                background,
+                padding: typeof padding === "number" ? `${padding}px` : padding,
+                verticalAlign,
+                horizontalAlign,
+            };
+        case "custom":
+            return {
+                width: width ? (typeof width === "number" ? `${width}px` : width) : "800px",
+                height: height ? (typeof height === "number" ? `${height}px` : height) : "600px",
+                background,
+                padding: typeof padding === "number" ? `${padding}px` : padding,
+                verticalAlign,
+                horizontalAlign,
+            };
+        default:
+            // No preset, use provided dimensions
+            if (width && height) {
+                return {
+                    width: typeof width === "number" ? `${width}px` : width,
+                    height: typeof height === "number" ? `${height}px` : height,
+                    background,
+                    padding: typeof padding === "number" ? `${padding}px` : padding,
+                    verticalAlign,
+                    horizontalAlign,
+                };
+            }
+            return null;
+    }
+}
+//# sourceMappingURL=canvasTypes.js.map

package/dist/canvasTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTypes.js","sourceRoot":"","sources":["../src/canvasTypes.ts"],"names":[],"mappings":"AA8BA,MAAM,UAAU,iBAAiB,CAAC,IAAiB;IACjD,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,EACJ,MAAM,EACN,KAAK,EACL,MAAM,EACN,UAAU,GAAG,SAAS,EACtB,OAAO,GAAG,MAAM,EAChB,aAAa,GAAG,KAAK,EACrB,eAAe,GAAG,MAAM,EACzB,GAAG,IAAI,CAAC;IAET,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,aAAa;YAChB,OAAO;gBACL,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,OAAO;gBACf,UAAU;gBACV,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO;gBAC/D,aAAa;gBACb,eAAe;aAChB,CAAC;QACJ,KAAK,MAAM;YACT,OAAO;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,EAAE,4BAA4B;gBACzC,UAAU;gBACV,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO;gBAC/D,aAAa;gBACb,eAAe;aAChB,CAAC;QACJ,KAAK,KAAK;YACR,OAAO;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG;gBACX,UAAU;gBACV,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO;gBAC/D,aAAa;gBACb,eAAe;aAChB,CAAC;QACJ,KAAK,QAAQ;YACX,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO;gBAC3E,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO;gBAChF,UAAU;gBACV,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO;gBAC/D,aAAa;gBACb,eAAe;aAChB,CAAC;QACJ;YACE,qCAAqC;YACrC,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;gBACpB,OAAO;oBACL,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;oBACvD,MAAM,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;oBAC3D,UAAU;oBACV,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,OAAO;oBAC/D,aAAa;oBACb,eAAe;iBAChB,CAAC;YACJ,CAAC;YACD,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC"}

package/dist/index.d.mts

@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactMarkdown, { Components } from 'react-markdown';
+import { RemarkAnimarkOptions, AnimationConfig } from 'animark-core';
+export { AnimarkWrapperNode, AnimationConfig, AnimationDirection, AnimationTrigger, AnimationType, RemarkAnimarkOptions, remarkAnimark } from 'animark-core';
+
+interface AnimarkProps {
+    /** The Markdown string to render */
+    children: string;
+    /**
+     * Use Framer Motion for animations.
+     * Requires `framer-motion` to be installed.
+     * Falls back to CSS animations when false (default) — safe for SSR.
+     */
+    useMotion?: boolean;
+    /**
+     * Options forwarded to the `remarkAnimark` plugin.
+     * Use to add custom animation types or set default configs.
+     */
+    pluginOptions?: RemarkAnimarkOptions;
+    /**
+     * Additional remark plugins to include.
+     * remark-directive and remarkAnimark are always injected automatically.
+     */
+    remarkPlugins?: NonNullable<Parameters<typeof ReactMarkdown>[0]["remarkPlugins"]>;
+    /**
+     * Additional rehype plugins to include.
+     * rehype-katex is always injected automatically.
+     */
+    rehypePlugins?: NonNullable<Parameters<typeof ReactMarkdown>[0]["rehypePlugins"]>;
+    /**
+     * Override react-markdown component renderers.
+     * The `animark-wrapper` component is reserved and cannot be overridden here.
+     */
+    components?: Omit<Components, "animark-wrapper">;
+    /** CSS class name applied to the root wrapper div */
+    className?: string;
+    /** Inline styles for the root wrapper div */
+    style?: React.CSSProperties;
+}
+declare const Animark: React.FC<AnimarkProps>;
+
+interface AnimarkNodeRendererProps {
+    /** Animation config extracted from the AST node */
+    animation: AnimationConfig;
+    children: React.ReactNode;
+    /** Use Framer Motion when available. Falls back to CSS otherwise. */
+    useMotion?: boolean;
+    className?: string;
+}
+/**
+ * `AnimarkNodeRenderer` is the bridge between the parsed `animarkWrapper`
+ * AST node and the actual animation implementation.
+ *
+ * It decides whether to use CSS or Framer Motion based on the `useMotion` prop
+ * and falls back gracefully in SSR environments.
+ */
+declare const AnimarkNodeRenderer: React.FC<AnimarkNodeRendererProps>;
+
+interface CSSAnimatedWrapperProps {
+    animation: AnimationConfig;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Pure CSS animated wrapper.
+ * Works in SSR, does not require Framer Motion.
+ * Respects `prefers-reduced-motion` via CSS.
+ */
+declare const CSSAnimatedWrapper: React.FC<CSSAnimatedWrapperProps>;
+
+export { Animark, AnimarkNodeRenderer, type AnimarkProps, CSSAnimatedWrapper, Animark as default };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+export { Animark, default } from "./Animark";
+export type { AnimarkProps } from "./Animark";
+export { AnimarkPlayer } from "./AnimarkPlayer";
+export type { AnimarkPlayerProps } from "./AnimarkPlayer";
+export { AnimarkControls } from "./AnimarkControls";
+export type { AnimarkControlsProps } from "./AnimarkControls";
+export { AnimarkProvider, AnimarkContext, useAnimarkContext, } from "./AnimarkContext";
+export type { AnimarkContextValue } from "./AnimarkContext";
+export { AnimarkNodeRenderer } from "./AnimarkNodeRenderer";
+export { CSSAnimatedWrapper } from "./CSSAnimatedWrapper";
+export type { AnimationConfig, AnimationType, AnimationDirection, AnimationTrigger, AnimarkWrapperNode, RemarkAnimarkOptions, } from "animark-core";
+export { remarkAnimark } from "animark-core";
+export { StepPlayer } from "./StepPlayer";
+export type { StepPlayerProps } from "./StepPlayer";
+export { StepControls } from "./StepControls";
+export type { StepControlsProps } from "./StepControls";
+export { StepBlock } from "./StepBlock";
+export { StepCanvas } from "./StepCanvas";
+export { StepProvider, useStepContext } from "./StepContext";
+export type { StepContextValue } from "./StepContext";
+export type { CanvasSize, CanvasPreset, ResolvedCanvasSize, } from "./canvasTypes";
+export { resolveCanvasSize, VerticalAlign, HorizontalAlign, } from "./canvasTypes";
+export { remarkStep } from "animark-core";
+export type { StepWrapperNode } from "animark-core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EACL,eAAe,EACf,cAAc,EACd,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,YAAY,EACV,eAAe,EACf,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,YAAY,EACV,UAAU,EACV,YAAY,EACZ,kBAAkB,GACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,eAAe,GAChB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,22 @@
+// ─── Main components ──────────────────────────────────────────────────────────
+export { Animark, default } from "./Animark";
+// ─── Player (Animark + controls + timeline) ───────────────────────────────────
+export { AnimarkPlayer } from "./AnimarkPlayer";
+// ─── Controls (use inside your own AnimarkProvider layout) ────────────────────
+export { AnimarkControls } from "./AnimarkControls";
+// ─── Context (for advanced / headless usage) ──────────────────────────────────
+export { AnimarkProvider, AnimarkContext, useAnimarkContext, } from "./AnimarkContext";
+// ─── Primitives ───────────────────────────────────────────────────────────────
+export { AnimarkNodeRenderer } from "./AnimarkNodeRenderer";
+export { CSSAnimatedWrapper } from "./CSSAnimatedWrapper";
+export { remarkAnimark } from "animark-core";
+// ─── Step / Presentation mode ─────────────────────────────────────────────────
+export { StepPlayer } from "./StepPlayer";
+export { StepControls } from "./StepControls";
+export { StepBlock } from "./StepBlock";
+export { StepCanvas } from "./StepCanvas";
+export { StepProvider, useStepContext } from "./StepContext";
+export { resolveCanvasSize, } from "./canvasTypes";
+// ─── Core step re-exports ─────────────────────────────────────────────────────
+export { remarkStep } from "animark-core";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAG7C,iFAAiF;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,iFAAiF;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,iFAAiF;AACjF,OAAO,EACL,eAAe,EACf,cAAc,EACd,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAG1B,iFAAiF;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAW1D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,iFAAiF;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAS7D,OAAO,EACL,iBAAiB,GAGlB,MAAM,eAAe,CAAC;AAEvB,iFAAiF;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,153 @@
+// src/Animark.tsx
+import { useMemo as useMemo2 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkDirective from "remark-directive";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import { remarkAnimark } from "animark-core";
+
+// src/AnimarkNodeRenderer.tsx
+import { Suspense, lazy } from "react";
+
+// src/CSSAnimatedWrapper.tsx
+import { jsx } from "react/jsx-runtime";
+function getAnimationClass(animation) {
+  const dir = animation.direction ?? "up";
+  switch (animation.type) {
+    case "fade":
+      return "animark-fade";
+    case "scale":
+      return "animark-scale";
+    case "slide":
+      return `animark-slide-${dir}`;
+    case "move":
+      return `animark-move-${dir}`;
+    default:
+      return "animark-fade";
+  }
+}
+var CSSAnimatedWrapper = ({
+  animation,
+  children,
+  className = "",
+  style = {}
+}) => {
+  const animClass = getAnimationClass(animation);
+  const duration = animation.duration ?? 500;
+  const delay = animation.delay ?? 0;
+  const inlineStyle = {
+    animationDuration: `${duration}ms`,
+    animationDelay: `${delay}ms`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `animark-wrapper ${animClass} ${className}`.trim(),
+      style: inlineStyle,
+      children
+    }
+  );
+};
+
+// src/AnimarkNodeRenderer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LazyMotionWrapper = lazy(
+  () => import("./MotionAnimatedWrapper-HT6ZXMNF.mjs").then((m) => ({
+    default: m.MotionAnimatedWrapper
+  }))
+);
+var AnimarkNodeRenderer = ({
+  animation,
+  children,
+  useMotion = false,
+  className
+}) => {
+  if (!useMotion) {
+    return /* @__PURE__ */ jsx2(CSSAnimatedWrapper, { animation, className, children });
+  }
+  return /* @__PURE__ */ jsx2(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx2(CSSAnimatedWrapper, { animation, className, children }),
+      children: /* @__PURE__ */ jsx2(LazyMotionWrapper, { animation, className, children })
+    }
+  );
+};
+
+// src/Animark.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Animark = ({
+  children,
+  useMotion = false,
+  pluginOptions = {},
+  remarkPlugins = [],
+  rehypePlugins = [],
+  components = {},
+  className,
+  style
+}) => {
+  const finalRemarkPlugins = useMemo2(
+    () => [
+      remarkDirective,
+      [remarkAnimark, pluginOptions],
+      remarkMath,
+      ...remarkPlugins
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pluginOptions, ...remarkPlugins]
+  );
+  const finalRehypePlugins = useMemo2(
+    () => [rehypeKatex, ...rehypePlugins],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...rehypePlugins]
+  );
+  const finalComponents = useMemo2(
+    () => ({
+      ...components,
+      // react-markdown maps hName → component key
+      // Our remarkAnimark plugin sets hName: "animark-wrapper"
+      "animark-wrapper": (props) => {
+        const { children: wrapperChildren } = props;
+        const toNum = (v) => v !== void 0 && v !== "" ? Number(v) : void 0;
+        const animation = {
+          type: props["data-animark-type"] ?? "fade",
+          trigger: props["data-animark-trigger"] ?? "auto",
+          ...toNum(props["data-animark-delay"]) !== void 0 && { delay: toNum(props["data-animark-delay"]) },
+          ...toNum(props["data-animark-duration"]) !== void 0 && { duration: toNum(props["data-animark-duration"]) },
+          ...toNum(props["data-animark-stagger"]) !== void 0 && { stagger: toNum(props["data-animark-stagger"]) },
+          ...props["data-animark-direction"] && { direction: props["data-animark-direction"] }
+        };
+        return /* @__PURE__ */ jsx3(
+          AnimarkNodeRenderer,
+          {
+            animation,
+            useMotion,
+            children: wrapperChildren
+          }
+        );
+      }
+    }),
+    [components, useMotion]
+  );
+  return /* @__PURE__ */ jsx3("div", { className, style, children: /* @__PURE__ */ jsx3(
+    ReactMarkdown,
+    {
+      remarkPlugins: finalRemarkPlugins,
+      rehypePlugins: finalRehypePlugins,
+      components: finalComponents,
+      children
+    }
+  ) });
+};
+var Animark_default = Animark;
+
+// src/index.ts
+import { remarkAnimark as remarkAnimark2 } from "animark-core";
+export {
+  Animark,
+  AnimarkNodeRenderer,
+  CSSAnimatedWrapper,
+  Animark_default as default,
+  remarkAnimark2 as remarkAnimark
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "animark-react",
+  "version": "0.1.0",
+  "description": "React renderer for animark — animated Markdown components",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./src/animark.css"
+  },
+  "files": [
+    "dist",
+    "src/animark.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch",
+    "test": "vitest run"
+  },
+  "keywords": ["react", "markdown", "animation", "animark", "remark"],
+  "license": "MIT",
+  "dependencies": {
+    "animark-core": "^0.1.0",
+    "framer-motion": "^11.0.0",
+    "react-markdown": "^9.0.0",
+    "remark-directive": "^3.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "rehype-katex": "^7.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "vitest": "^1.0.0"
+  }
+}

package/src/animark.css

@@ -0,0 +1,89 @@
+/**
+ * animark — CSS animation keyframes and utility classes.
+ *
+ * These styles are the fallback when Framer Motion is not available and
+ * are also used as the SSR-safe baseline (no JS required for initial paint).
+ *
+ * Import in your app root:
+ *   import "animark-react/styles";
+ */
+
+@keyframes animark-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes animark-slide-up {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes animark-slide-down {
+  from { opacity: 0; transform: translateY(-24px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes animark-slide-left {
+  from { opacity: 0; transform: translateX(24px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes animark-slide-right {
+  from { opacity: 0; transform: translateX(-24px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes animark-scale-in {
+  from { opacity: 0; transform: scale(0.88); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes animark-move-up {
+  from { transform: translateY(12px); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes animark-move-down {
+  from { transform: translateY(-12px); }
+  to   { transform: translateY(0); }
+}
+
+@keyframes animark-move-left {
+  from { transform: translateX(12px); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes animark-move-right {
+  from { transform: translateX(-12px); }
+  to   { transform: translateX(0); }
+}
+
+/* ─── Base ─────────────────────────────────────────────────────────────────── */
+
+.animark-wrapper {
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Disable animations for users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .animark-wrapper {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* ─── Type classes ──────────────────────────────────────────────────────────── */
+
+.animark-fade   { animation-name: animark-fade-in; }
+.animark-scale  { animation-name: animark-scale-in; }
+
+.animark-slide-up    { animation-name: animark-slide-up; }
+.animark-slide-down  { animation-name: animark-slide-down; }
+.animark-slide-left  { animation-name: animark-slide-left; }
+.animark-slide-right { animation-name: animark-slide-right; }
+
+.animark-move-up    { animation-name: animark-move-up; }
+.animark-move-down  { animation-name: animark-move-down; }
+.animark-move-left  { animation-name: animark-move-left; }
+.animark-move-right { animation-name: animark-move-right; }