@markgrafhq/markgraf-react 0.0.28 → 0.0.30

package/README.md

@@ -1,6 +1,6 @@
 # @markgrafhq/markgraf-react
 
-React hook + component for embedding [markgraf](https://github.com/i-am-the-slime/markgraf) animations. Drives play/pause/seek imperatively and exposes `time`, `currentKeyframe`, and `playing` as reactive state.
+React hook + component for embedding [markgraf](https://github.com/i-am-the-slime/markgraf) animations. Drives play/pause/seek imperatively and exposes `time`, `keyframe`, and `playing` as reactive state.
 
 ## Install
 
@@ -9,30 +9,31 @@ bun add @markgrafhq/markgraf-react
 # or: npm install @markgrafhq/markgraf-react
 ```
 
-Also pull in the embed CSS for canvas styling:
+Import the package CSS for player styling:
 
 ```js
-import "@markgrafhq/markgraf-embed/css";
+import "@markgrafhq/markgraf-react/css";
 ```
 
 ## `<MarkgrafPlayer src=... />`
 
-Headless component — renders a `<canvas>` (default) or `<svg>` with the scene drawn directly into it. Bring your own controls.
+Headless component that draws the scene directly into the selected Canvas2D, SVG, or WebGL surface. Bring your own controls.
 
 ```jsx
 import { MarkgrafPlayer } from "@markgrafhq/markgraf-react";
 
 const src = `seed 1
-keyframe v1 {
-  +node client "Client"
-  +node api "API"
-  +edge client api
-  client -> api "GET"
+scene v1 {
+  + client: Client
+  + api: API
+  + client -> api
+  client ~> api: GET
 }`;
 
 export default function App() {
   return <MarkgrafPlayer src={src} />;
   // Or: <MarkgrafPlayer src={src} renderer="svg" />
+  // Or: <MarkgrafPlayer src={src} renderer="sdf" />
 }
 ```
 
@@ -84,6 +85,7 @@ export function Player({ src }) {
 
 - **`canvas`** (default) — Canvas2D with DPR-aware scaling and label springs. Fastest, best for many tokens.
 - **`svg`** — Inline SVG. Easier to inspect/style, scales crisply at any zoom, no DPR concerns. No spring labels.
+- **`sdf`** (alias **`webgl`**) — WebGL raymarched 3D rendering; available through `MarkgrafPlayer` only.
 
 ## License
 

package/dist/markgraf-react.js

@@ -27533,7 +27533,7 @@ const wn = /* @__PURE__ */ Vs(GR), f$ = (t) => (n) => (e) => () => ks((r, o) =>
   onCueEnter: (n) => gf(t.onCueEnter(_f(n))()),
   onStepEnter: (n, e) => gf(t.onStepEnter(n)(_f(e))()),
   onComplete: (n) => gf(t.onComplete(_f(n))())
-}), H6 = (t, n) => B6(p$(t)(n ?? {})), Q6 = F6;
+}), H6 = (t, n) => B6(p$(t)(n ?? {})()), Q6 = F6;
 export {
   Q6 as MarkgrafPlayer,
   H6 as useMarkgraf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markgrafhq/markgraf-react",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "React hook + component for embedding markgraf animations. Drives play/pause/seek and exposes time + keyframe as reactive state.",
   "type": "module",
   "main": "./dist/markgraf-react.js",
@@ -23,7 +23,22 @@
     "README.md",
     "LICENSE"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/markgraf-react.css"
+  ],
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.6.14",
+    "vite": "^5.4.11"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"