@markgrafhq/starlight-markgraf 0.0.26

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mark Eibes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+# @markgrafhq/starlight-markgraf
+
+Astro/Starlight integration for embedding [markgraf](https://github.com/markgrafhq) animations.
+
+## Install
+
+```bash
+npm install @markgrafhq/starlight-markgraf @markgrafhq/markgraf-react @astrojs/react react react-dom
+```
+
+## Configure
+
+```js
+// astro.config.mjs
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+import starlight from "@astrojs/starlight";
+import markgraf from "@markgrafhq/starlight-markgraf";
+
+export default defineConfig({
+  integrations: [react(), starlight({ title: "Docs" }), markgraf()],
+});
+```
+
+Import the player CSS in a global stylesheet:
+
+```css
+@import "@markgrafhq/markgraf-react/dist/markgraf-react.css";
+```
+
+## Use
+
+Fenced code blocks with the `markgraf` language render as live players:
+
+````markdown
+```markgraf
+seed 1
+keyframe v1 {
+  +node client "Client"
+  +node api    "API"
+  +edge client api
+  client -> api "GET /user/42"
+}
+```
+````
+
+Or use the component directly in MDX/Astro:
+
+```astro
+---
+import Markgraf from "@markgrafhq/starlight-markgraf/Markgraf.astro";
+---
+
+<Markgraf src={`seed 1\nkeyframe v1 { +node a "A" }`} />
+```

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import type { AstroIntegration } from "astro";
+import remarkMarkgraf from "./remark-markgraf.mjs";
+export { remarkMarkgraf };
+export default function markgrafIntegration(): AstroIntegration;

package/dist/index.js

@@ -0,0 +1,16 @@
+import remarkMarkgraf from "./remark-markgraf.mjs";
+export { remarkMarkgraf };
+export default function markgrafIntegration() {
+    return {
+        name: "markgraf-starlight",
+        hooks: {
+            "astro:config:setup": ({ updateConfig }) => {
+                updateConfig({
+                    markdown: {
+                        remarkPlugins: [remarkMarkgraf],
+                    },
+                });
+            },
+        },
+    };
+}

package/dist/remark-markgraf.js

@@ -0,0 +1,51 @@
+import { visit } from "unist-util-visit";
+
+const importNode = {
+  type: "mdxjsEsm",
+  value: 'import Markgraf from "@markgrafhq/starlight-markgraf/Markgraf.astro";',
+  data: {
+    estree: {
+      type: "Program",
+      sourceType: "module",
+      body: [
+        {
+          type: "ImportDeclaration",
+          specifiers: [
+            {
+              type: "ImportDefaultSpecifier",
+              local: { type: "Identifier", name: "Markgraf" },
+            },
+          ],
+          source: {
+            type: "Literal",
+            value: "@markgrafhq/starlight-markgraf/Markgraf.astro",
+            raw: '"@markgrafhq/starlight-markgraf/Markgraf.astro"',
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default function remarkMarkgraf() {
+  return (tree) => {
+    let needsImport = false;
+
+    visit(tree, "code", (node, index, parent) => {
+      if (node.lang !== "markgraf" || !parent || index == null) return;
+
+      needsImport = true;
+
+      parent.children[index] = {
+        type: "mdxJsxFlowElement",
+        name: "Markgraf",
+        attributes: [
+          { type: "mdxJsxAttribute", name: "src", value: node.value },
+        ],
+        children: [],
+      };
+    });
+
+    if (needsImport) tree.children.unshift(importNode);
+  };
+}

package/dist/remark-markgraf.mjs

@@ -0,0 +1,51 @@
+import { visit } from "unist-util-visit";
+
+const importNode = {
+  type: "mdxjsEsm",
+  value: 'import Markgraf from "@markgrafhq/starlight-markgraf/Markgraf.astro";',
+  data: {
+    estree: {
+      type: "Program",
+      sourceType: "module",
+      body: [
+        {
+          type: "ImportDeclaration",
+          specifiers: [
+            {
+              type: "ImportDefaultSpecifier",
+              local: { type: "Identifier", name: "Markgraf" },
+            },
+          ],
+          source: {
+            type: "Literal",
+            value: "@markgrafhq/starlight-markgraf/Markgraf.astro",
+            raw: '"@markgrafhq/starlight-markgraf/Markgraf.astro"',
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default function remarkMarkgraf() {
+  return (tree) => {
+    let needsImport = false;
+
+    visit(tree, "code", (node, index, parent) => {
+      if (node.lang !== "markgraf" || !parent || index == null) return;
+
+      needsImport = true;
+
+      parent.children[index] = {
+        type: "mdxJsxFlowElement",
+        name: "Markgraf",
+        attributes: [
+          { type: "mdxJsxAttribute", name: "src", value: node.value },
+        ],
+        children: [],
+      };
+    });
+
+    if (needsImport) tree.children.unshift(importNode);
+  };
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@markgrafhq/starlight-markgraf",
+  "version": "0.0.26",
+  "description": "Starlight/Astro integration for embedding markgraf animations. Transforms ```markgraf fenced code blocks into a live player and exposes a <Markgraf src=\"…\" /> component.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./Markgraf.astro": "./src/Markgraf.astro",
+    "./remark": {
+      "default": "./dist/remark-markgraf.js"
+    },
+    "./css": "./node_modules/@markgrafhq/markgraf-react/dist/markgraf-react.css"
+  },
+  "files": [
+    "dist",
+    "src/Markgraf.astro",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/remark-markgraf.mjs dist/remark-markgraf.mjs && cp src/remark-markgraf.mjs dist/remark-markgraf.js"
+  },
+  "peerDependencies": {
+    "astro": ">=4",
+    "@astrojs/react": ">=3",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@markgrafhq/markgraf-react": "^0.0.26",
+    "unist-util-visit": "^5"
+  },
+  "devDependencies": {
+    "typescript": "^5"
+  },
+  "keywords": [
+    "markgraf",
+    "starlight",
+    "astro",
+    "astro-integration",
+    "remark",
+    "animation",
+    "diagram"
+  ],
+  "license": "MIT",
+  "author": "Mark Eibes <mark.eibes@gmail.com>",
+  "homepage": "https://github.com/markgrafhq/starlight-markgraf#readme",
+  "bugs": "https://github.com/markgrafhq/starlight-markgraf/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/markgrafhq/starlight-markgraf.git"
+  }
+}

package/src/Markgraf.astro

@@ -0,0 +1,18 @@
+---
+import { MarkgrafPlayer } from "@markgrafhq/markgraf-react";
+
+interface Props {
+  src: string;
+  renderer?: "canvas" | "svg";
+  class?: string;
+}
+
+const { src, renderer = "canvas", class: className } = Astro.props;
+---
+
+<MarkgrafPlayer
+  client:visible
+  src={src}
+  renderer={renderer}
+  className={className}
+/>