openuispec 0.2.20 → 0.2.21

package/dist/cli/init.js

@@ -253,7 +253,7 @@ When the openuispec MCP server is configured, AI assistants should use these too
 | \`openuispec_get_contract\` | Get a single contract spec, optionally filtered to one variant. |
 | \`openuispec_get_tokens\` | Get tokens for a specific category (color, typography, spacing, etc.). |
 | \`openuispec_get_locale\` | Get a single locale file, optionally filtered to specific keys. |
-| \`openuispec_screenshot\` | Screenshot the web app at a route via headless browser (requires \`puppeteer\`). |
+| \`openuispec_screenshot\` | Screenshot the web app at a route via headless browser (requires \`playwright\`). |
 | \`openuispec_screenshot_android\` | Screenshot Android app on emulator — works with any project via \`project_dir\`. |
 | \`openuispec_screenshot_ios\` | Screenshot iOS app on Simulator via XCUITest — works with any project via \`project_dir\`. |
 
@@ -301,153 +301,70 @@ function aiRulesBlock(specDir, targets) {
     return `
 ${RULES_START_MARKER}
 <!-- openuispec-rules-version: ${version} -->
-# OpenUISpec — AI Assistant Rules
-# ================================
-# This project uses OpenUISpec to define UI as a semantic spec.
-# Spec files are the single source of truth for all UI across platforms.
-# Targets: ${targetList}
+# OpenUISpec Rules
 
-## MANDATORY — UI work requires OpenUISpec tools
+STOP — before writing ANY UI code you MUST call an OpenUISpec tool first.
+No exceptions. Spec files are the single source of truth. Targets: ${targetList}
 
-When the user's request involves UI — screens, navigation, layout, tokens, flows, localization,
-or any visual/structural change — you MUST use the OpenUISpec tools before writing any code.
+## Workflow
 
-### MCP Tools (use these when available)
+**Full generation** (new screens, multi-platform changes, first-time setup):
+1. \`openuispec_prepare(target, include_specs: true)\` — returns everything
+2. Generate code strictly from the spec contents returned
+3. \`openuispec_check(target, audit: true)\` — returns a checklist, verify your code against it
+4. Fix gaps. Repeat 2–3 until audit passes.
 
-Call these MCP tools directly. They return structured JSON with everything you need.
-
-**Pre-generation:**
-1. Call \`openuispec_prepare\` with the target platform — returns spec context, platform config, constraints.
-   Use \`include_specs: true\` to embed all spec contents in one call (saves a separate read_specs).
-2. Call \`openuispec_read_specs\` to load spec file contents if not using include_specs.
-   Without paths: returns file listing. With paths: returns contents. Use these as the AUTHORITATIVE source.
-3. If spec changes are needed, update spec files FIRST, then call \`openuispec_check\`.
-4. Generate or update the platform UI code based on the spec contents.
-
-**Post-generation (EVERY TIME after writing UI code):**
-5. Call \`openuispec_check\` to validate spec files (schema + semantics) and confirm prepare readiness.
-   Note: this validates the SPEC, not the generated code.
-6. Call \`openuispec_check\` with \`audit: true\` to get a spec-derived checklist, then manually review
-   the generated code against it. For each screen, verify:
-   - Every field/action in the spec has a corresponding UI element
-   - Token values (colors, spacing, radii) match exactly — no approximations
-   - Contract \`must_handle\` states are all implemented (loading, error, empty, etc.)
-   - Adaptive breakpoints match the spec's \`size_classes\`
-   - Locale keys match \`$t:\` references
-   - Navigation targets match flow definitions
-7. Report any real gaps found and fix them before finishing.
-
-**Iterating before baseline:**
-Generated code rarely needs just one pass. Read the spec, audit the generated code against it,
-take screenshots to verify visuals, then fix gaps and repeat.
-Multiple generate → review → fix cycles are expected before the user accepts the result.
-
-**Baseline reminder:**
-After generation, remind the user to review the output and run the baseline when satisfied:
-> When you're happy with the generated output, run: \`openuispec drift --snapshot --target <t>\`
-> This records the spec state so future changes are tracked as incremental drift.
-Do not baseline on your own initiative — only run the snapshot when the user asks.
+**Incremental edits** (one screen, one token, one locale key):
+1. Use a focused getter: \`get_screen\`, \`get_contract\`, \`get_component\`, \`get_tokens\`, \`get_locale\`
+2. Edit code based on the spec returned
+3. \`openuispec_check(target)\` — validate
 
 **Creating new spec files:**
-- Call \`openuispec_spec_types\` to discover available spec types.
-- Call \`openuispec_spec_schema\` with the specific type to get the full JSON schema.
-- Write the spec file following the schema exactly.
-
-**Focused getters (prefer these for incremental edits over \`read_specs\`):**
-- \`openuispec_get_screen(name)\` — single screen spec
-- \`openuispec_get_contract(name, variant?)\` — single contract, optionally one variant
-- \`openuispec_get_component(name, variant?)\` — single component, optionally one variant
-- \`openuispec_get_tokens(category)\` — single token category (color, typography, spacing, etc.)
-- \`openuispec_get_locale(locale, keys?)\` — single locale file, optionally filtered keys
-- \`openuispec_check(target, audit?, screens?, contracts?)\` — validation + optional scoped audit checklist
-
-Use \`read_specs\` for full-project generation; use focused getters when editing one screen or contract.
+1. \`openuispec_spec_types\` → \`openuispec_spec_schema(type)\` → write YAML following the schema
 
 **Other tools:**
-- \`openuispec_status\` — cross-target summary, good starting point
-- \`openuispec_drift\` with \`explain: true\` — property-level spec changes
-- \`openuispec_validate\` — schema-only validation by group
+- \`openuispec_status\` — cross-target summary
+- \`openuispec_drift(explain: true)\` — what changed since last baseline
+- \`openuispec_validate\` — schema-only validation
+- \`openuispec_screenshot\` / \`screenshot_android\` / \`screenshot_ios\` — visual verification
+- \`openuispec_preview(screen)\` — render spec as HTML, no running app needed
 
-### CLI fallback (when MCP is not available)
+**CLI fallback** (when MCP is unavailable): \`openuispec <command> --json\` — same names, with dashes.
 
-If MCP tools are not available, use these CLI commands with \`--json\` flag:
+## Spec-first vs platform-first
 
-**Status & discovery:**
-- \`openuispec status --json\` — cross-target status
-- \`openuispec spec-types\` — list available spec types
-- \`openuispec spec-schema <type>\` — get JSON schema for a spec type
-
-**Spec access:**
-- \`openuispec read-specs [paths...]\` — read spec file contents
-- \`openuispec get-screen <name>\` — get a single screen spec
-- \`openuispec get-contract <name> [--variant v]\` — get a contract spec
-- \`openuispec get-component <name> [--variant v]\` — get a component spec
-- \`openuispec get-tokens <category>\` — get tokens for a category
-- \`openuispec get-locale <locale> [--keys k1,k2]\` — get a locale file
-
-**Validation & generation workflow:**
-- \`openuispec validate [group...] --json\` — validate spec files against JSON Schemas
-- \`openuispec check --target <t> --json\` — validate spec files + check target generation readiness
-- \`openuispec prepare --target <t> --json\` — build AI-ready work bundle
-- \`openuispec drift --target <t> --explain --json\` — semantic drift
-
-**Visual verification:**
-- \`openuispec screenshot --route /path\` — screenshot the web app
-- \`openuispec screenshot --route /path --init-script "..."\` — inject auth/role before rendering (web only; app must implement \`__ous_init\` bootstrapper)
-- \`openuispec screenshot-android [--project-dir path]\` — screenshot Android app
-- \`openuispec screenshot-ios [--project-dir path]\` — screenshot iOS app
+**Spec-first** (use the workflow above):
+- Screen structure, navigation, fields, actions, validation, data binding
+- Token, variant, contract, flow, or localization changes
+- Changes affecting multiple platforms
 
-### Other CLI commands
-- \`openuispec init\` — scaffold a new spec project
-- \`openuispec configure-target <t>\` — configure target platform stack
-- \`openuispec update-rules\` — update AI rules to match installed package version
-- \`openuispec drift --snapshot --target <t>\` — snapshot current state (user-initiated, after reviewing generated output)
+**Platform-first** (skip spec tools):
+- Platform-only polish (iOS-only animation, web-only CSS tweak)
+- Bug fixes that don't alter shared behavior
 
 ## Spec format reference
 
-The spec format, schemas, and generation rules are in the installed \`openuispec\` package.
-You MUST read the reference files before creating or editing spec files — do NOT guess the format.
-
-**Find the package:** \`node_modules/openuispec/\` or run \`npm root -g\` → \`<prefix>/openuispec/\`.
-**Online fallback:** \`https://openuispec.rsteam.uz/llms-full.txt\`
-
-**Reference files (read in order):**
-1. \`README.md\` — schema tables, file format, root wrapper keys
-2. \`spec/openuispec-v0.2.md\` — full specification
-3. \`examples/taskflow/openuispec/\` — complete working example
-4. \`schema/\` — JSON Schemas for every file type
+Read from the installed package, NEVER guess the format:
+- \`node_modules/openuispec/README.md\` — schema tables, file format
+- \`node_modules/openuispec/spec/openuispec-v0.2.md\` — full specification
+- \`node_modules/openuispec/schema/\` — JSON Schemas
+- Online fallback: \`https://openuispec.rsteam.uz/llms-full.txt\`
 
 ## Spec location
-- Spec root: \`${specDir}/\` — read \`${specDir}/openuispec.yaml\` first for actual paths.
+- Spec root: \`${specDir}/\` — read \`${specDir}/openuispec.yaml\` first.
 - Default dirs: tokens/, screens/, flows/, contracts/, components/, platform/, locales/
 
-## When to start from spec vs platform code
-
-**Spec-first** (use \`openuispec_prepare\` or \`openuispec prepare\`):
-- Screen structure, navigation, fields, actions, validation, data binding changes
-- Token, variant, contract, flow, or localization changes
-- Changes affecting multiple platforms
-- Requests in product/UI terms
-
-**Platform-first** (skip spec tools):
-- Platform-specific polish (iOS-only, Android-only, web-only)
-- Local bug fixes that don't alter shared semantic behavior
-
-## If spec directories are empty (first-time setup)
-
-Read \`spec/openuispec-v0.2.md\` from the package first, then:
-1. Scan codebase for UI screens → create \`${specDir}/screens/<name>.yaml\` as \`status: stub\`
-2. Extract tokens (colors, fonts, spacing) → \`${specDir}/tokens/\`
-3. Create contract extensions → \`${specDir}/contracts/\`
-4. Create locale files → \`${specDir}/locales/<locale>.json\`
-5. Fill in \`data_model\`, \`api.endpoints\` in \`${specDir}/openuispec.yaml\`
+## If spec directories are empty
+Read \`spec/openuispec-v0.2.md\` from the package, then create stubs:
+screens → \`${specDir}/screens/\`, tokens → \`${specDir}/tokens/\`,
+contracts → \`${specDir}/contracts/\`, locales → \`${specDir}/locales/\`
 
 ## Rules
-- Do not baseline on your own initiative — the user decides when generated output is accepted.
-- After generation, always remind the user to review and baseline: \`openuispec drift --snapshot --target <t>\`.
-- Do not modify generated UI without checking whether the spec must change first.
-- Do not use \`configure-target --defaults\` as silent approval — ask the user to confirm.
-- Always read spec format from the installed package, not from cached/memorized content.
+- NEVER write UI code without calling an OpenUISpec tool first.
+- NEVER snapshot drift without user approval.
+- NEVER modify generated UI without checking whether the spec must change first.
+- ALWAYS read spec format from the installed package, not from memory.
+- After generation, remind the user: \`openuispec drift --snapshot --target <t>\`
 ${RULES_END_MARKER}
 `;
 }

package/dist/mcp-server/index.js

@@ -93,27 +93,29 @@ export const server = new McpServer({
     name: "openuispec",
     version: getPackageVersion(),
 }, {
-    instructions: `OpenUISpec — semantic UI spec format. Spec files (YAML) are the single source of truth for all UI.
+    instructions: `CRITICAL: NEVER write or edit UI code without calling an OpenUISpec tool first. NO EXCEPTIONS.
 
-WORKFLOW — each tool response includes a next_tool hint, follow it:
-1. openuispec_prepare(target) → get context + platform config (include_specs=true to embed content)
-2. openuispec_read_specs(paths) → load spec content (omit paths for listing only)
-3. Generate/update code
-4. openuispec_check(target) → validate spec files (audit=true for review checklist, not code inspection)
-5. Remind the user to baseline when satisfied: openuispec drift --snapshot --target <t>
-   Do not baseline on your own initiative — the user decides when output is accepted.
+OpenUISpec — spec files (YAML) are the ONLY source of truth for all UI.
 
-FOCUSED GETTERS (prefer for incremental edits): get_screen, get_contract, get_component, get_tokens, get_locale
-SPEC AUTHORING: spec_types → spec_schema(type, summary?) → write YAML
-PREVIEW: openuispec_preview(screen) → render spec as HTML with mock data, returns screenshot (no app needed)
-SCREENSHOTS: screenshot (web), screenshot_android, screenshot_ios — single + batch variants
+FULL GENERATION (new screens, multi-platform, first-time):
+1. openuispec_prepare(target, include_specs=true) → MUST be first action
+2. Generate code strictly from spec contents — do NOT improvise UI structure
+3. openuispec_check(target, audit=true) → verify code against the returned checklist
+4. Fix gaps, repeat 2–3 until audit passes
+
+INCREMENTAL EDITS (one screen, one token, one locale key):
+1. Focused getter: get_screen, get_contract, get_component, get_tokens, get_locale
+2. Edit code based on spec returned
+3. openuispec_check(target) → validate
 
-Skip only for purely non-UI requests.
+SPEC AUTHORING: spec_types → spec_schema(type) → write YAML
+PREVIEW: openuispec_preview(screen) → render spec as HTML screenshot (no app needed)
+SCREENSHOTS: screenshot (web), screenshot_android, screenshot_ios — single + batch variants
 
-When generating UI code:
-1. Check anti_patterns in the prepare result — hard constraints on what NOT to produce
-2. Check design_context — match the complexity level and personality description
-3. Apply the AI Fingerprint Test: would a viewer immediately say "AI made this"? If yes, revise.`,
+NEVER skip the tools. NEVER generate UI from memory or conversation alone.
+ALWAYS check anti_patterns and design_context from prepare — hard constraints.
+ALWAYS remind user to baseline when satisfied: openuispec drift --snapshot --target <t>
+Apply the AI Fingerprint Test: if it looks obviously AI-generated, revise.`,
 });
 // ── tool: openuispec_prepare ─────────────────────────────────────────
 server.registerTool("openuispec_prepare", {
@@ -687,7 +689,7 @@ server.registerTool("openuispec_get_locale", {
 });
 // ── tool: openuispec_screenshot ──────────────────────────────────────
 server.registerTool("openuispec_screenshot", {
-    description: "Take a screenshot of the generated web app at a specific route. Starts the Vite dev server automatically if needed (first call may take longer). Returns a PNG image for visual verification of generated UI. Requires puppeteer to be installed (npm install -g puppeteer).",
+    description: "Take a screenshot of the generated web app at a specific route. Starts the Vite dev server automatically if needed (first call may take longer). Returns a PNG image for visual verification of generated UI. Requires playwright to be installed (npm install -g playwright).",
     inputSchema: {
         route: z.string().default("/").describe("Route path to navigate to, e.g. '/home', '/settings', '/posts/123'"),
         viewport: z.object({

package/dist/mcp-server/preview.js

@@ -188,21 +188,16 @@ export async function renderPreview(projectCwd, options) {
     };
     // 6. Render HTML
     const html = renderPage(ctx);
-    // 7. Screenshot with Puppeteer
+    // 7. Screenshot with Playwright
     const vp = viewport ?? SIZE_CLASS_VIEWPORTS[size_class];
     const browser = await getBrowser();
-    const page = await browser.newPage();
+    const context = await browser.newContext({
+        viewport: { width: vp.width, height: vp.height },
+        deviceScaleFactor: 2,
+        colorScheme: theme === "dark" ? "dark" : "light",
+    });
+    const page = await context.newPage();
     try {
-        await page.setViewport({
-            width: vp.width,
-            height: vp.height,
-            deviceScaleFactor: 2,
-        });
-        if (theme === "dark") {
-            await page.emulateMediaFeatures([
-                { name: "prefers-color-scheme", value: "dark" },
-            ]);
-        }
         await page.setContent(html, { waitUntil: "load", timeout: 10_000 });
         // Small delay for CSS to settle
         await new Promise((r) => setTimeout(r, 200));
@@ -229,5 +224,6 @@ export async function renderPreview(projectCwd, options) {
     }
     finally {
         await page.close();
+        await context.close();
     }
 }

package/dist/mcp-server/screenshot-shared.js

@@ -6,23 +6,28 @@ import { join, resolve, relative } from "node:path";
 import { createHash } from "node:crypto";
 import YAML from "yaml";
 import { findProjectDir } from "../drift/index.js";
-// ── shared browser manager ──────────────────────────────────────────
+// ── shared browser manager (Playwright) ─────────────────────────────
 let browserInstance = null;
 let launchPromise = null;
 export async function getBrowser() {
-    if (browserInstance?.connected)
+    if (browserInstance && browserInstance.isConnected())
         return browserInstance;
     if (!launchPromise) {
         launchPromise = (async () => {
-            let puppeteer;
+            let playwright;
             try {
-                puppeteer = await import("puppeteer");
+                playwright = await import("playwright");
             }
             catch {
-                throw new Error("puppeteer is not installed. Run:\n  npm install -g puppeteer\n" +
-                    "or add it to your project's devDependencies.");
+                try {
+                    playwright = await import("playwright-core");
+                }
+                catch {
+                    throw new Error("playwright is not installed. Run:\n  npm install -g playwright\n" +
+                        "or add it to your project's devDependencies.");
+                }
             }
-            browserInstance = await puppeteer.launch({
+            browserInstance = await playwright.chromium.launch({
                 headless: true,
                 args: ["--no-sandbox", "--disable-setuid-sandbox"],
             });

package/dist/mcp-server/screenshot.js

@@ -1,7 +1,7 @@
 /**
  * Screenshot tool — launches dev server + headless browser, captures pages.
  *
- * Both the Vite dev server and the Puppeteer browser are kept alive between
+ * Both the Vite dev server and the Playwright browser are kept alive between
  * calls and torn down when the MCP server process exits.
  */
 import { spawn, execSync } from "node:child_process";
@@ -306,38 +306,33 @@ export async function takeScreenshot(projectCwd, options) {
     const webDir = findWebAppDir(projectCwd);
     const server = await startDevServer(webDir);
     const browser = await getBrowser();
-    // 2. Navigate
-    const page = await browser.newPage();
+    // 2. Navigate (Playwright context + page)
+    const context = await browser.newContext({
+        viewport: { width: viewport.width, height: viewport.height },
+        deviceScaleFactor: scale,
+        colorScheme: theme ?? "light",
+    });
+    const page = await context.newPage();
     try {
-        await page.setViewport({
-            width: viewport.width,
-            height: viewport.height,
-            deviceScaleFactor: scale,
-        });
-        if (theme) {
-            await page.emulateMediaFeatures([
-                { name: "prefers-color-scheme", value: theme },
-            ]);
-        }
         const base = server.url.replace(/\/+$/, "");
         let targetUrl = `${base}${route.startsWith("/") ? "" : "/"}${route}`;
         if (init_script)
             targetUrl = appendInitParam(targetUrl, init_script);
-        await page.goto(targetUrl, { waitUntil: "networkidle2", timeout: 30_000 });
+        await page.goto(targetUrl, { waitUntil: "networkidle", timeout: 30_000 });
         if (wait_for > 0) {
             await new Promise((r) => setTimeout(r, wait_for));
         }
         // 3. Screenshot
         let buffer;
         if (selector) {
-            const element = await page.$(selector);
-            if (!element) {
+            const loc = page.locator(selector);
+            if ((await loc.count()) === 0) {
                 return {
                     content: [{ type: "text", text: `Error: Element not found for selector: ${selector}` }],
                     isError: true,
                 };
             }
-            buffer = await element.screenshot({ type: "png" });
+            buffer = await loc.screenshot({ type: "png" });
         }
         else {
             buffer = await page.screenshot({ type: "png", fullPage: full_page });
@@ -375,6 +370,7 @@ export async function takeScreenshot(projectCwd, options) {
     }
     finally {
         await page.close();
+        await context.close();
     }
 }
 // ── batch screenshot ─────────────────────────────────────────────────
@@ -386,45 +382,58 @@ export async function takeScreenshotBatch(projectCwd, options) {
     const webDir = findWebAppDir(projectCwd);
     const server = await startDevServer(webDir);
     const browser = await getBrowser();
-    const page = await browser.newPage();
+    const context = await browser.newContext({
+        viewport: { width: viewport.width, height: viewport.height },
+        deviceScaleFactor: scale,
+        colorScheme: theme ?? "light",
+    });
+    const page = await context.newPage();
     try {
-        await page.setViewport({
-            width: viewport.width,
-            height: viewport.height,
-            deviceScaleFactor: scale,
-        });
-        if (theme) {
-            await page.emulateMediaFeatures([{ name: "prefers-color-scheme", value: theme }]);
-        }
         const base = server.url.replace(/\/+$/, "");
         const themeLabel = theme ?? "default";
         const snapshots = [];
-        for (const capture of captures) {
-            const effectiveInitScript = capture.init_script ?? sharedInitScript;
-            let targetUrl = `${base}${capture.route.startsWith("/") ? "" : "/"}${capture.route}`;
-            if (effectiveInitScript)
-                targetUrl = appendInitParam(targetUrl, effectiveInitScript);
-            await page.goto(targetUrl, { waitUntil: "networkidle2", timeout: 30_000 });
-            await new Promise((r) => setTimeout(r, capture.wait_for ?? 1000));
-            let buffer;
-            if (capture.selector) {
-                const el = await page.$(capture.selector);
-                buffer = el ? await el.screenshot({ type: "png" }) : await page.screenshot({ type: "png" });
-            }
-            else {
-                buffer = await page.screenshot({ type: "png", fullPage: capture.full_page ?? false });
+        const errors = [];
+        for (let i = 0; i < captures.length; i++) {
+            const capture = captures[i];
+            try {
+                const effectiveInitScript = capture.init_script ?? sharedInitScript;
+                let targetUrl = `${base}${capture.route.startsWith("/") ? "" : "/"}${capture.route}`;
+                if (effectiveInitScript)
+                    targetUrl = appendInitParam(targetUrl, effectiveInitScript);
+                await page.goto(targetUrl, { waitUntil: "networkidle", timeout: 30_000 });
+                await new Promise((r) => setTimeout(r, capture.wait_for ?? 1000));
+                let buffer;
+                if (capture.selector) {
+                    const loc = page.locator(capture.selector);
+                    buffer = (await loc.count()) > 0
+                        ? await loc.screenshot({ type: "png" })
+                        : await page.screenshot({ type: "png" });
+                }
+                else {
+                    buffer = await page.screenshot({ type: "png", fullPage: capture.full_page ?? false });
+                }
+                const filename = `${capture.screen}_${themeLabel}.png`;
+                let savedPath = filename;
+                if (output_dir) {
+                    const outDir = resolve(webDir, output_dir);
+                    mkdirSync(outDir, { recursive: true });
+                    savedPath = join(outDir, filename);
+                    writeFileSync(savedPath, buffer);
+                }
+                snapshots.push({ screen: capture.screen, path: savedPath, data: buffer.toString("base64"), init_script: effectiveInitScript });
+                options.onProgress?.({ screen: capture.screen, index: i + 1, total: captures.length, ok: true });
             }
-            const filename = `${capture.screen}_${themeLabel}.png`;
-            let savedPath = filename;
-            if (output_dir) {
-                const outDir = resolve(webDir, output_dir);
-                mkdirSync(outDir, { recursive: true });
-                savedPath = join(outDir, filename);
-                writeFileSync(savedPath, buffer);
+            catch (err) {
+                const msg = err instanceof Error ? err.message : String(err);
+                errors.push({ screen: capture.screen, error: msg });
+                options.onProgress?.({ screen: capture.screen, index: i + 1, total: captures.length, ok: false, error: msg });
             }
-            snapshots.push({ screen: capture.screen, path: savedPath, data: buffer.toString("base64"), init_script: effectiveInitScript });
         }
         const content = [];
+        content.push({
+            type: "text",
+            text: JSON.stringify({ captured: snapshots.length, failed: errors.length, errors }, null, 2),
+        });
         for (const s of snapshots) {
             content.push({ type: "image", data: s.data, mimeType: "image/png" });
             content.push({
@@ -436,6 +445,7 @@ export async function takeScreenshotBatch(projectCwd, options) {
     }
     finally {
         await page.close();
+        await context.close();
     }
 }
 // ── cleanup ─────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openuispec",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "license": "MIT",
   "type": "module",
   "description": "A semantic UI specification format for AI-native, platform-native app development",
@@ -54,7 +54,7 @@
     "zod": "^3.25.76"
   },
   "optionalDependencies": {
-    "puppeteer": "^24.39.1"
+    "playwright": "^1.52.0"
   },
   "devDependencies": {
     "@types/node": "^25.5.0",