@sanity-labs/slides 0.0.0

package/dist/scaffold/template-base/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "./dist",
+    "declaration": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"]
+}

package/dist/scaffold/template-base/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"]
+}

package/package.json

@@ -0,0 +1,164 @@
+{
+  "name": "@sanity-labs/slides",
+  "version": "0.0.0",
+  "description": "Brand-locked PowerPoint generation for LLMs. Write a slide template in React; Claude (or any MCP client) writes the deck through the bundled MCP server without drifting on fonts, colors, or layout.",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "pptx",
+    "powerpoint",
+    "mcp",
+    "model-context-protocol",
+    "claude",
+    "anthropic",
+    "llm",
+    "ai",
+    "presentations",
+    "react-reconciler",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sanity-labs/slides.git"
+  },
+  "homepage": "https://github.com/sanity-labs/slides#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-labs/slides/issues"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./mcp": "./src/mcp/index.ts",
+    "./dev": "./src/dev/index.ts",
+    "./scaffold": "./src/scaffold/index.ts",
+    "./skill": "./SKILL.md",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "slidesctl": "./dist/cli.js",
+    "slides-dev": "./dist/dev/bin/slides-dev.mjs"
+  },
+  "files": [
+    "dist",
+    "src",
+    "SKILL.md",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node ./scripts/copy-static-assets.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "knip": "knip",
+    "verify-bins": "bash scripts/verify-bins.sh",
+    "verify": "pnpm run typecheck && pnpm run lint && pnpm run format:check && pnpm run build && pnpm run test && pnpm run knip && pnpm run verify-bins",
+    "changeset": "changeset",
+    "changeset:version": "changeset version",
+    "changeset:publish": "pnpm run build && changeset publish"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "@resvg/resvg-js": "^2.6.2",
+    "picocolors": "^1.0.0",
+    "pptxgenjs": "^4.0.1",
+    "zod": "^3.23.0",
+    "zod-to-json-schema": "^3.24.0"
+  },
+  "peerDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.511.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-zoom-pan-pinch": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "tsx": "^4.7.0",
+    "vite": "^5.4.0"
+  },
+  "peerDependenciesMeta": {
+    "@tailwindcss/vite": {
+      "optional": true
+    },
+    "@vitejs/plugin-react": {
+      "optional": true
+    },
+    "clsx": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-zoom-pan-pinch": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    },
+    "tsx": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.7.0",
+    "@changesets/cli": "^2.31.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "clsx": "^2.1.0",
+    "eslint": "^9.0.0",
+    "knip": "^5.0.0",
+    "lucide-react": "^0.511.0",
+    "prettier": "^3.0.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-zoom-pan-pinch": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "5.9.3",
+    "vite": "^5.4.0",
+    "vitest": "2.1.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./mcp": {
+        "types": "./dist/mcp/index.d.ts",
+        "import": "./dist/mcp/index.js"
+      },
+      "./dev": {
+        "types": "./dist/dev/index.d.ts",
+        "import": "./dist/dev/index.js"
+      },
+      "./scaffold": {
+        "types": "./dist/scaffold/index.d.ts",
+        "import": "./dist/scaffold/index.js"
+      },
+      "./skill": "./SKILL.md",
+      "./package.json": "./package.json"
+    }
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "pnpm@9.0.0"
+}

package/src/__tests__/fixtures/test-template/index.tsx

@@ -0,0 +1,77 @@
+/**
+ * Minimal brand-free template fixture, used by the framework's own
+ * end-to-end tests (smoke, MCP, preview, verify-bins). One slide type
+ * (`Cover`), plain colors, no chrome, no embedded raster assets.
+ *
+ * The richer Sanity-branded template lives in its own repo
+ * (`sanity-labs/slides-template`) and consumes `@sanity-labs/slides` as a
+ * regular external user — so the framework gets a clean canary AND the
+ * brand experience proves the public API end-to-end.
+ */
+
+import type { ReactElement } from 'react';
+import { z } from 'zod';
+import {
+  Box,
+  CANVAS_16_9,
+  defineTemplate,
+  defineTemplateComponent,
+  Slide,
+  Text,
+  type Template,
+} from '../../../index.js';
+
+export const CoverSchema = z
+  .object({
+    title: z.string().min(1).describe('The deck title.'),
+    subtitle: z.string().optional().describe('Optional subtitle.'),
+  })
+  .strict();
+
+type CoverProps = z.infer<typeof CoverSchema>;
+
+export const Cover = ({ title, subtitle }: CoverProps): ReactElement => (
+  <Slide>
+    <Box rect={{ x: 0, y: 0, w: 960, h: 540 }} fill={{ kind: 'solid', color: '#0b0b0b' }} />
+    <Box rect={{ x: 40, y: 60, w: 880, h: 100 }}>
+      <Text textStyle={{ fontFamily: 'display', fontSize: 48, foregroundColor: '#ffffff' }}>
+        {title}
+      </Text>
+    </Box>
+    {subtitle ? (
+      <Box rect={{ x: 40, y: 180, w: 880, h: 40 }}>
+        <Text textStyle={{ fontFamily: 'body', fontSize: 20, foregroundColor: '#cccccc' }}>
+          {subtitle}
+        </Text>
+      </Box>
+    ) : null}
+  </Slide>
+);
+
+export const preview = (): ReactElement => (
+  <>
+    <Cover title="Test deck" subtitle="Fixture used by the framework's own tests." />
+    <Cover title="Second slide" />
+  </>
+);
+
+export const testTemplate: Template = defineTemplate({
+  name: 'test-template',
+  canvas: CANVAS_16_9,
+  fonts: {
+    display: ['Arial', 'Helvetica'],
+    body: ['Arial', 'Helvetica'],
+    mono: ['Courier New'],
+  },
+  colors: {},
+  typography: {},
+  spacing: {},
+  components: {
+    Cover: defineTemplateComponent({
+      component: Cover,
+      schema: CoverSchema,
+      description: 'Use as the first slide of a deck. Plain title + optional subtitle.',
+    }),
+  },
+  preview,
+});

package/src/__tests__/pptx-mcp.test.ts

@@ -0,0 +1,85 @@
+/**
+ * Integration test for the `slides_create` MCP tool against the
+ * synthetic fixture template. Exercises `createSlideServer` with a
+ * `PptxSlidesRuntime`, calls the tool, and asserts the response carries
+ * a real .pptx file path.
+ *
+ * Brand-specific template tests live in the Sanity template repo
+ * (`sanity-labs/slides-template`).
+ */
+
+import { promises as fs } from 'node:fs';
+import * as os from 'node:os';
+import * as path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js';
+import { PptxSlidesRuntime } from '../index.js';
+import { createSlideServer } from '../mcp/index.js';
+import { testTemplate } from './fixtures/test-template/index.js';
+
+describe('slides_create integration (fixture template)', () => {
+  it('end-to-end: tool call → .pptx file on disk', async () => {
+    const dir = await fs.mkdtemp(path.join(os.tmpdir(), 'slides-mcp-pptx-'));
+    try {
+      const runtime = new PptxSlidesRuntime({ outputDir: dir });
+      const server = createSlideServer({ template: testTemplate, runtime });
+
+      const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
+      await server.connect(serverTransport);
+      const client = new Client({ name: 'test', version: '0.0.0' });
+      await client.connect(clientTransport);
+
+      const list = await client.listTools();
+      const names = list.tools.map((t) => t.name);
+      expect(names).toContain('slides_create');
+      expect(names).toContain('slides_list');
+
+      const response = await client.callTool({
+        name: 'slides_create',
+        arguments: {
+          title: 'Q2 Review',
+          slides: [{ component: 'Cover', props: { title: 'Q2 Review', subtitle: 'How we did' } }],
+        },
+      });
+
+      expect(response.isError).toBeFalsy();
+      const out = response.structuredContent as { filePath: string; slideCount: number };
+      expect(out.filePath).toMatch(/Q2-Review\.pptx$/);
+      expect(out.slideCount).toBe(1);
+      const buf = await fs.readFile(out.filePath);
+      expect(buf[0]).toBe(0x50);
+      expect(buf[1]).toBe(0x4b);
+
+      await server.close();
+    } finally {
+      await fs.rm(dir, { recursive: true, force: true });
+    }
+  }, 30_000);
+
+  it('rejects unknown component with a structured error', async () => {
+    const dir = await fs.mkdtemp(path.join(os.tmpdir(), 'slides-mcp-pptx-'));
+    try {
+      const runtime = new PptxSlidesRuntime({ outputDir: dir });
+      const server = createSlideServer({ template: testTemplate, runtime });
+      const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
+      await server.connect(serverTransport);
+      const client = new Client({ name: 'test', version: '0.0.0' });
+      await client.connect(clientTransport);
+
+      const response = await client.callTool({
+        name: 'slides_create',
+        arguments: {
+          title: 'X',
+          slides: [{ component: 'Bogus', props: {} }],
+        },
+      });
+      expect(response.isError).toBe(true);
+      const text = (response.content as Array<{ text: string }>)[0]?.text ?? '';
+      expect(text).toMatch(/Bogus/);
+      await server.close();
+    } finally {
+      await fs.rm(dir, { recursive: true, force: true });
+    }
+  }, 30_000);
+});

package/src/__tests__/pptx-smoke.test.ts

@@ -0,0 +1,45 @@
+/**
+ * End-to-end smoke test: synthetic fixture template → reconciler →
+ * `PptxSlidesRuntime` → real `.pptx` file on disk.
+ *
+ * Asserts the offline export path produces a valid PPTX (ZIP magic
+ * number + non-zero size). Uses the in-repo brand-free fixture so the
+ * framework doesn't depend on the Sanity brand template for its own
+ * canary coverage.
+ */
+
+import { promises as fs } from 'node:fs';
+import * as os from 'node:os';
+import * as path from 'node:path';
+import { createElement } from 'react';
+import { describe, expect, it } from 'vitest';
+import { PptxSlidesRuntime, renderToOps } from '../index.js';
+import { Cover, testTemplate } from './fixtures/test-template/index.js';
+
+describe('framework smoke test (fixture template → PptxSlidesRuntime → .pptx)', () => {
+  it('writes a real .pptx (ZIP magic, non-zero size) using the fixture template', async () => {
+    const dir = await fs.mkdtemp(path.join(os.tmpdir(), 'slides-pptx-smoke-'));
+    try {
+      const runtime = new PptxSlidesRuntime({ outputDir: dir });
+      const tree = createElement(Cover, { title: 'Smoke Test', subtitle: 'fixture' });
+      const result = renderToOps({
+        tree,
+        template: testTemplate,
+        deckId: null,
+        now: () => '2026-05-06T00:00:00.000Z',
+      });
+
+      const { deckId } = await runtime.createDeckFromMaster('test:cover-v1', 'Smoke Test');
+      const apply = await runtime.applyOps(deckId, result.ops);
+      expect(Object.keys(apply.createdObjectIds).length).toBeGreaterThanOrEqual(2);
+
+      const { filePath } = await runtime.write(deckId);
+      const buf = await fs.readFile(filePath);
+      expect(buf[0]).toBe(0x50);
+      expect(buf[1]).toBe(0x4b);
+      expect(buf.length).toBeGreaterThan(2000);
+    } finally {
+      await fs.rm(dir, { recursive: true, force: true });
+    }
+  }, 30_000);
+});

package/src/__tests__/preview.test.ts

@@ -0,0 +1,28 @@
+/**
+ * Smoke test for `composeDeck` and the auto-derived preview fallback.
+ *
+ * Uses the synthetic fixture template — confirms the dev-viewer's
+ * `composeDeck` produces a non-empty deck from a template's `preview()`,
+ * and that `deriveAutoPreview` synthesizes one slide per component when
+ * a template doesn't ship its own preview.
+ */
+
+import { describe, expect, test } from 'vitest';
+import { composeDeck } from '../dev/compose-deck.js';
+import { deriveAutoPreview } from '../dev/auto-examples.js';
+import { testTemplate } from './fixtures/test-template/index.js';
+
+describe('preview composition', () => {
+  test('template.preview() composes into a multi-slide deck', async () => {
+    const preview = testTemplate.preview;
+    if (!preview) throw new Error('fixture template should define preview()');
+    const result = await composeDeck({ tree: preview(), template: testTemplate });
+    expect(result.deck.slideOrder.length).toBeGreaterThan(1);
+  });
+
+  test('deriveAutoPreview renders one slide per component', async () => {
+    const tree = deriveAutoPreview(testTemplate);
+    const result = await composeDeck({ tree, template: testTemplate });
+    expect(result.deck.slideOrder.length).toBe(Object.keys(testTemplate.components).length);
+  });
+});