@westopp/windo 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 westopp
+
+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,146 @@
+# windo
+
+Zero-infra component canvas. Point it at your `*.windo.tsx` files and get a resizable iframe preview with live JSON props, variants, and ambient contexts — no Storybook config, no build step to maintain.
+
+Each component renders inside a real iframe, so its styles, layout, and media queries are isolated from the workbench chrome. Props are edited as JSON and validated by your zod schema before they reach the component.
+
+## Install
+
+```sh
+npm i -D @westopp/windo zod
+```
+
+`react`, `react-dom`, `zod`, and (optionally) `vite` are peer dependencies.
+
+## Quick start
+
+### 1. Add a `windo.config.ts`
+
+`defineWindoConfig` is the single entry point. It captures your **groups** (the sidebar sections) and **contexts** (ambient controls + providers), and hands back a `windo` factory whose `group` field is type-checked against your configured slugs.
+
+```ts
+import { defineWindoConfig, defineContext } from '@westopp/windo'
+import { z } from 'zod'
+
+export const { config, windo } = defineWindoConfig({
+  title: 'Acme UI',
+  groups: [
+    { name: 'Primitives', slug: 'primitives' },
+    { name: 'Forms', slug: 'forms', description: 'Inputs and controls' },
+  ],
+  contexts: {
+    theme: defineContext({
+      label: 'Theme',
+      controls: {
+        accent: { type: 'enum', default: 'indigo', options: ['indigo', 'teal', 'rose'] },
+      },
+      // Optional: mount a provider inside the iframe for components that opt in via `uses`
+      provider: ({ children, values }) => <ThemeProvider accent={values.accent}>{children}</ThemeProvider>,
+    }),
+  },
+})
+```
+
+A context can contribute ambient `controls` (free toggles, always available), a `provider` (mounted in the iframe, opt-in per component), or both.
+
+### 2. Write a `Button.windo.tsx`
+
+Import the `windo` factory from your config and default-export the result. `configurableProps<Props>()(schema)` binds a zod schema to your prop type — its `z.input` is the JSON edit surface, its `z.output` is what the component receives.
+
+```tsx
+import { z } from 'zod'
+import { configurableProps } from '@westopp/windo'
+import { windo } from '../windo.config'
+import { Button, type ButtonProps } from './Button'
+
+const props = configurableProps<ButtonProps>()(
+  z.object({
+    label: z.string(),
+    variant: z.enum(['primary', 'secondary', 'ghost']),
+    disabled: z.boolean().optional(),
+  })
+)
+
+export default windo<ButtonProps>(w => ({
+  title: 'Button',
+  group: w.groups.primitives.slug,
+  placement: 'center',
+  configurableProps: props,
+  defaultProps: { label: 'Click me', variant: 'primary' },
+  variants: [
+    { label: 'Secondary', props: { variant: 'secondary' } },
+    { label: 'Disabled', props: { disabled: true } },
+  ],
+  component: props => <Button {...props} />,
+}))
+```
+
+The factory runs **once** at definition time for static fields (`title`, `group`, `configurableProps`). Function fields — `defaultProps`, `component`, `providers`, `code` — run at render time with the live `ctx` (color scheme, viewport, locale, resolved contexts, `action`/`log`). Never close over live values in the static factory body.
+
+### 3. Run the dev server
+
+Via the bin:
+
+```sh
+windo dev            # defaults to cwd; serves the workbench
+windo dev ./src -p 6006 --open
+```
+
+Or wire the Vite plugin yourself:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { windo } from '@westopp/windo/plugin'
+
+export default defineConfig({
+  plugins: [windo({ config: 'windo.config.ts' })],
+})
+```
+
+The plugin pairs `@vitejs/plugin-react` with windo, serves the chrome + iframe HTML, and discovers every `*.windo.tsx` matching your `include` glob.
+
+## Authoring API
+
+`windo(w => definition)` — the factory returns a `WindoDefinition`:
+
+| Field | Type | Notes |
+|-------|------|-------|
+| `title` | `string` | Display name in the sidebar. **Required.** |
+| `group` | group slug | Type-checked against configured slugs. **Required.** |
+| `component` | `(props, ctx) => ReactNode` | Renders the component. **Required.** |
+| `defaultProps` | `Props` or `ctx => Props` | Full props incl. functions/JSX; JSON edits merge on top. **Required.** |
+| `configurableProps` | zod schema | Validator + parser for the JSON-editable prop subset. |
+| `placement` | `WindoPlacement` | Where it sits in the canvas frame (see below). |
+| `variants` | `{ label, props }[]` | Click-to-apply prop patches shown in the gallery. |
+| `uses` | `string[]` | Context names whose `provider` should wrap this component. |
+| `status` | `'stable' \| 'beta' \| 'deprecated'` | Badge in the sidebar. |
+| `description` / `deprecation` | `string` | Shown in the chrome. |
+| `props` | `{ name, type, default?, desc? }[]` | Authored docs table (not derived from the schema). |
+| `code` | `(values) => string` | Optional snippet for the Code tab. |
+| `providers` | `({ children, ctx }) => ReactNode` | A local provider wrapping just this windo. |
+
+Config-level helpers:
+
+- `defineWindoConfig({ groups, contexts?, include?, title? })` → `{ config, windo }`
+- `defineContext({ label?, description?, controls?, provider?, resolve? })`
+- `configurableProps<Props>()(schema)` — identity helper that constrains the schema to `Partial<Props>`
+
+## Placement
+
+`placement` positions the component within the resizable canvas frame:
+
+```
+center   fill   top   bottom   left   right
+top-left   top-right   bottom-left   bottom-right
+```
+
+Defaults to `center`.
+
+## How props editing works
+
+The `configurableProps` zod schema lives in the iframe and does the real parsing. Its **input** shape is flattened into a serialisable descriptor (via `describeSchema`) that the chrome uses to render controls and the Schema panel. When you edit props as JSON, the iframe validates them with the live schema (transforms, `coerce`, `refine` and all) and either renders the parsed output or surfaces per-field errors. Whatever the JSON omits falls back to `defaultProps`.
+
+## License
+
+MIT

package/dist/chunk-5RM2VYAM.js

@@ -0,0 +1,150 @@
+// src/plugin/index.ts
+import { existsSync } from "fs";
+import { isAbsolute, resolve as resolvePath } from "path";
+import reactPlugin from "@vitejs/plugin-react";
+var VIRTUAL_ID = "virtual:windo-registry";
+var RESOLVED_VIRTUAL_ID = `\0${VIRTUAL_ID}`;
+var CONFIG_CANDIDATES = ["windo.config.ts", "windo.config.tsx", "windo.config.mts", "windo.config.js", "windo.config.mjs"];
+function findConfig(root, configOpt) {
+  if (configOpt) return isAbsolute(configOpt) ? configOpt : resolvePath(root, configOpt);
+  for (const candidate of CONFIG_CANDIDATES) {
+    const full = resolvePath(root, candidate);
+    if (existsSync(full)) return full;
+  }
+  return null;
+}
+function toGlob(include) {
+  const first = Array.isArray(include) ? include[0] : include;
+  const pattern = first ?? "**/*.windo.tsx";
+  return pattern.startsWith("/") ? pattern : `/${pattern}`;
+}
+var CHROME_HTML = `<!doctype html>
+<html data-theme="light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>windo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import('@westopp/windo/client')
+    </script>
+  </body>
+</html>
+`;
+var IFRAME_HTML = `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body style="background: transparent">
+    <div id="root"></div>
+    <script type="module">
+      import('@westopp/windo/preview')
+    </script>
+  </body>
+</html>
+`;
+function htmlIds(root) {
+  return {
+    index: resolvePath(root, "index.html"),
+    iframe: resolvePath(root, "__windo/iframe.html")
+  };
+}
+function windo(options = {}) {
+  let resolvedRoot = process.cwd();
+  let ids = htmlIds(resolvedRoot);
+  const registryModule = () => {
+    const root = options.root ?? resolvedRoot ?? process.cwd();
+    const configPath = findConfig(root, options.config);
+    const glob = toGlob(options.include);
+    const importPath = configPath ? JSON.stringify(configPath) : "null";
+    const globLiteral = JSON.stringify(glob);
+    return [
+      `import * as __cfg from ${importPath}`,
+      "const config = __cfg.config ?? (__cfg.default && __cfg.default.config) ?? __cfg.default",
+      "export { config }",
+      `export const modules = import.meta.glob(${globLiteral})`,
+      ""
+    ].join("\n");
+  };
+  const plugin = {
+    name: "windo",
+    // `pre` so our resolveId/load claim the virtual registry and the two HTML
+    // entries before Vite's filesystem fallback tries (and fails) to read them.
+    enforce: "pre",
+    config(userConfig, { command, isPreview }) {
+      const root = resolvePath(options.root ?? userConfig.root ?? ".");
+      ids = htmlIds(root);
+      const base = {
+        // Dev serves the chrome + iframe HTML from `configureServer`, so it runs
+        // headless (`custom`). Build and preview want the normal SPA behaviour so
+        // `/` resolves to the emitted index.html.
+        appType: command === "serve" && !isPreview ? "custom" : "spa",
+        define: {
+          __WINDO_IFRAME_SRC__: JSON.stringify(command === "build" ? "./__windo/iframe.html" : "./__windo/iframe")
+        },
+        resolve: {
+          dedupe: ["react", "react-dom"]
+        },
+        optimizeDeps: {
+          // Pre-bundle every React entrypoint in one pass so React's identity is
+          // fixed up front. If `react-dom/client` (the preview renderer) is
+          // discovered late, Vite re-optimizes and can split React across two
+          // instances — fine until a component calls a hook, then "invalid hook
+          // call". Keeping them all here prevents that re-optimize.
+          include: ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "react/jsx-dev-runtime"]
+        }
+      };
+      if (command === "build" && !userConfig.build?.rollupOptions?.input) {
+        base.build = { rollupOptions: { input: { index: ids.index, iframe: ids.iframe } } };
+      }
+      return base;
+    },
+    configResolved(resolved) {
+      resolvedRoot = resolved.root;
+      ids = htmlIds(resolvedRoot);
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_ID) return RESOLVED_VIRTUAL_ID;
+      if (id === ids.index || id === ids.iframe) return id;
+      return null;
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_ID) return registryModule();
+      if (id === ids.index) return CHROME_HTML;
+      if (id === ids.iframe) return IFRAME_HTML;
+      return null;
+    },
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        if (req.method !== "GET") return next();
+        const url = (req.url ?? "").split("?")[0];
+        let html = null;
+        if (url === "/" || url === "/index.html") html = CHROME_HTML;
+        else if (url.startsWith("/__windo/iframe")) html = IFRAME_HTML;
+        if (html === null) return next();
+        try {
+          const transformed = await server.transformIndexHtml(url, html);
+          res.statusCode = 200;
+          res.setHeader("Content-Type", "text/html");
+          res.end(transformed);
+        } catch (err) {
+          next(err);
+        }
+      });
+    }
+  };
+  return [reactPlugin(), plugin];
+}
+var windoPlugin = windo;
+var plugin_default = windo;
+
+export {
+  windo,
+  windoPlugin,
+  plugin_default
+};
+//# sourceMappingURL=chunk-5RM2VYAM.js.map

package/dist/chunk-5RM2VYAM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin/index.ts"],"sourcesContent":["// Vite plugin (node side). Pairs `@vitejs/plugin-react` with the windo plugin:\n// serves the chrome + iframe HTML documents ourselves (appType custom) and\n// exposes a `virtual:windo-registry` module that re-exports the user config and\n// glob-imports every `*.windo.tsx` file.\n\nimport { existsSync } from 'node:fs'\nimport { isAbsolute, resolve as resolvePath } from 'node:path'\nimport reactPlugin from '@vitejs/plugin-react'\nimport type { Plugin, PluginOption, UserConfig, ViteDevServer } from 'vite'\n\nexport interface WindoPluginOptions {\n  include?: string | string[]\n  config?: string\n  root?: string\n}\n\nconst VIRTUAL_ID = 'virtual:windo-registry'\nconst RESOLVED_VIRTUAL_ID = `\\0${VIRTUAL_ID}`\n\nconst CONFIG_CANDIDATES = ['windo.config.ts', 'windo.config.tsx', 'windo.config.mts', 'windo.config.js', 'windo.config.mjs'] as const\n\nfunction findConfig(root: string, configOpt?: string): string | null {\n  if (configOpt) return isAbsolute(configOpt) ? configOpt : resolvePath(root, configOpt)\n  for (const candidate of CONFIG_CANDIDATES) {\n    const full = resolvePath(root, candidate)\n    if (existsSync(full)) return full\n  }\n  return null\n}\n\nfunction toGlob(include?: string | string[]): string {\n  const first = Array.isArray(include) ? include[0] : include\n  const pattern = first ?? '**/*.windo.tsx'\n  return pattern.startsWith('/') ? pattern : `/${pattern}`\n}\n\nconst CHROME_HTML = `<!doctype html>\n<html data-theme=\"light\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <title>windo</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\">\n      import('@westopp/windo/client')\n    </script>\n  </body>\n</html>\n`\n\nconst IFRAME_HTML = `<!doctype html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  </head>\n  <body style=\"background: transparent\">\n    <div id=\"root\"></div>\n    <script type=\"module\">\n      import('@westopp/windo/preview')\n    </script>\n  </body>\n</html>\n`\n\n// Absolute ids for the two HTML entry documents, relative to the project root.\n// They are virtual — the files need not exist on disk; the plugin's `load`\n// returns their contents. Keeping them rooted at `<root>/index.html` and\n// `<root>/__windo/iframe.html` makes `vite build` emit them at the matching\n// paths in the output directory (Vite derives an HTML asset's output path from\n// the input id's path relative to root).\nfunction htmlIds(root: string) {\n  return {\n    index: resolvePath(root, 'index.html'),\n    iframe: resolvePath(root, '__windo/iframe.html'),\n  }\n}\n\nexport function windo(options: WindoPluginOptions = {}): PluginOption[] {\n  let resolvedRoot = process.cwd()\n  let ids = htmlIds(resolvedRoot)\n\n  const registryModule = (): string => {\n    const root = options.root ?? resolvedRoot ?? process.cwd()\n    const configPath = findConfig(root, options.config)\n    const glob = toGlob(options.include)\n    const importPath = configPath ? JSON.stringify(configPath) : 'null'\n    const globLiteral = JSON.stringify(glob)\n    return [\n      `import * as __cfg from ${importPath}`,\n      'const config = __cfg.config ?? (__cfg.default && __cfg.default.config) ?? __cfg.default',\n      'export { config }',\n      `export const modules = import.meta.glob(${globLiteral})`,\n      '',\n    ].join('\\n')\n  }\n\n  const plugin: Plugin = {\n    name: 'windo',\n    // `pre` so our resolveId/load claim the virtual registry and the two HTML\n    // entries before Vite's filesystem fallback tries (and fails) to read them.\n    enforce: 'pre',\n\n    config(userConfig: UserConfig, { command, isPreview }) {\n      const root = resolvePath(options.root ?? userConfig.root ?? '.')\n      ids = htmlIds(root)\n      const base: UserConfig = {\n        // Dev serves the chrome + iframe HTML from `configureServer`, so it runs\n        // headless (`custom`). Build and preview want the normal SPA behaviour so\n        // `/` resolves to the emitted index.html.\n        appType: command === 'serve' && !isPreview ? 'custom' : 'spa',\n        define: {\n          __WINDO_IFRAME_SRC__: JSON.stringify(command === 'build' ? './__windo/iframe.html' : './__windo/iframe'),\n        },\n        resolve: {\n          dedupe: ['react', 'react-dom'],\n        },\n        optimizeDeps: {\n          // Pre-bundle every React entrypoint in one pass so React's identity is\n          // fixed up front. If `react-dom/client` (the preview renderer) is\n          // discovered late, Vite re-optimizes and can split React across two\n          // instances — fine until a component calls a hook, then \"invalid hook\n          // call\". Keeping them all here prevents that re-optimize.\n          include: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react/jsx-dev-runtime'],\n        },\n      }\n\n      // Wire the chrome + iframe as build inputs unless the user supplied their\n      // own. Both are emitted as static HTML the canvas can be hosted from.\n      if (command === 'build' && !userConfig.build?.rollupOptions?.input) {\n        base.build = { rollupOptions: { input: { index: ids.index, iframe: ids.iframe } } }\n      }\n      return base\n    },\n\n    configResolved(resolved) {\n      resolvedRoot = resolved.root\n      ids = htmlIds(resolvedRoot)\n    },\n\n    resolveId(id) {\n      if (id === VIRTUAL_ID) return RESOLVED_VIRTUAL_ID\n      if (id === ids.index || id === ids.iframe) return id\n      return null\n    },\n\n    load(id) {\n      if (id === RESOLVED_VIRTUAL_ID) return registryModule()\n      if (id === ids.index) return CHROME_HTML\n      if (id === ids.iframe) return IFRAME_HTML\n      return null\n    },\n\n    configureServer(server: ViteDevServer) {\n      server.middlewares.use(async (req, res, next) => {\n        if (req.method !== 'GET') return next()\n        const url = (req.url ?? '').split('?')[0]\n        let html: string | null = null\n        if (url === '/' || url === '/index.html') html = CHROME_HTML\n        else if (url.startsWith('/__windo/iframe')) html = IFRAME_HTML\n        if (html === null) return next()\n        try {\n          const transformed = await server.transformIndexHtml(url, html)\n          res.statusCode = 200\n          res.setHeader('Content-Type', 'text/html')\n          res.end(transformed)\n        } catch (err) {\n          next(err)\n        }\n      })\n    },\n  }\n\n  return [reactPlugin(), plugin]\n}\n\nexport const windoPlugin = windo\n\nexport default windo\n"],"mappings":"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","names":[]}

package/dist/cli.cjs

@@ -0,0 +1,303 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/cli/index.ts
+var import_node_util = require("util");
+var import_picocolors = __toESM(require("picocolors"), 1);
+var import_vite = require("vite");
+
+// src/plugin/index.ts
+var import_node_fs = require("fs");
+var import_node_path = require("path");
+var import_plugin_react = __toESM(require("@vitejs/plugin-react"), 1);
+var VIRTUAL_ID = "virtual:windo-registry";
+var RESOLVED_VIRTUAL_ID = `\0${VIRTUAL_ID}`;
+var CONFIG_CANDIDATES = ["windo.config.ts", "windo.config.tsx", "windo.config.mts", "windo.config.js", "windo.config.mjs"];
+function findConfig(root, configOpt) {
+  if (configOpt) return (0, import_node_path.isAbsolute)(configOpt) ? configOpt : (0, import_node_path.resolve)(root, configOpt);
+  for (const candidate of CONFIG_CANDIDATES) {
+    const full = (0, import_node_path.resolve)(root, candidate);
+    if ((0, import_node_fs.existsSync)(full)) return full;
+  }
+  return null;
+}
+function toGlob(include) {
+  const first = Array.isArray(include) ? include[0] : include;
+  const pattern = first ?? "**/*.windo.tsx";
+  return pattern.startsWith("/") ? pattern : `/${pattern}`;
+}
+var CHROME_HTML = `<!doctype html>
+<html data-theme="light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>windo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import('@westopp/windo/client')
+    </script>
+  </body>
+</html>
+`;
+var IFRAME_HTML = `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body style="background: transparent">
+    <div id="root"></div>
+    <script type="module">
+      import('@westopp/windo/preview')
+    </script>
+  </body>
+</html>
+`;
+function htmlIds(root) {
+  return {
+    index: (0, import_node_path.resolve)(root, "index.html"),
+    iframe: (0, import_node_path.resolve)(root, "__windo/iframe.html")
+  };
+}
+function windo(options = {}) {
+  let resolvedRoot = process.cwd();
+  let ids = htmlIds(resolvedRoot);
+  const registryModule = () => {
+    const root = options.root ?? resolvedRoot ?? process.cwd();
+    const configPath = findConfig(root, options.config);
+    const glob = toGlob(options.include);
+    const importPath = configPath ? JSON.stringify(configPath) : "null";
+    const globLiteral = JSON.stringify(glob);
+    return [
+      `import * as __cfg from ${importPath}`,
+      "const config = __cfg.config ?? (__cfg.default && __cfg.default.config) ?? __cfg.default",
+      "export { config }",
+      `export const modules = import.meta.glob(${globLiteral})`,
+      ""
+    ].join("\n");
+  };
+  const plugin = {
+    name: "windo",
+    // `pre` so our resolveId/load claim the virtual registry and the two HTML
+    // entries before Vite's filesystem fallback tries (and fails) to read them.
+    enforce: "pre",
+    config(userConfig, { command, isPreview }) {
+      const root = (0, import_node_path.resolve)(options.root ?? userConfig.root ?? ".");
+      ids = htmlIds(root);
+      const base = {
+        // Dev serves the chrome + iframe HTML from `configureServer`, so it runs
+        // headless (`custom`). Build and preview want the normal SPA behaviour so
+        // `/` resolves to the emitted index.html.
+        appType: command === "serve" && !isPreview ? "custom" : "spa",
+        define: {
+          __WINDO_IFRAME_SRC__: JSON.stringify(command === "build" ? "./__windo/iframe.html" : "./__windo/iframe")
+        },
+        resolve: {
+          dedupe: ["react", "react-dom"]
+        },
+        optimizeDeps: {
+          // Pre-bundle every React entrypoint in one pass so React's identity is
+          // fixed up front. If `react-dom/client` (the preview renderer) is
+          // discovered late, Vite re-optimizes and can split React across two
+          // instances — fine until a component calls a hook, then "invalid hook
+          // call". Keeping them all here prevents that re-optimize.
+          include: ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "react/jsx-dev-runtime"]
+        }
+      };
+      if (command === "build" && !userConfig.build?.rollupOptions?.input) {
+        base.build = { rollupOptions: { input: { index: ids.index, iframe: ids.iframe } } };
+      }
+      return base;
+    },
+    configResolved(resolved) {
+      resolvedRoot = resolved.root;
+      ids = htmlIds(resolvedRoot);
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_ID) return RESOLVED_VIRTUAL_ID;
+      if (id === ids.index || id === ids.iframe) return id;
+      return null;
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_ID) return registryModule();
+      if (id === ids.index) return CHROME_HTML;
+      if (id === ids.iframe) return IFRAME_HTML;
+      return null;
+    },
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        if (req.method !== "GET") return next();
+        const url = (req.url ?? "").split("?")[0];
+        let html = null;
+        if (url === "/" || url === "/index.html") html = CHROME_HTML;
+        else if (url.startsWith("/__windo/iframe")) html = IFRAME_HTML;
+        if (html === null) return next();
+        try {
+          const transformed = await server.transformIndexHtml(url, html);
+          res.statusCode = 200;
+          res.setHeader("Content-Type", "text/html");
+          res.end(transformed);
+        } catch (err) {
+          next(err);
+        }
+      });
+    }
+  };
+  return [(0, import_plugin_react.default)(), plugin];
+}
+var windoPlugin = windo;
+
+// src/cli/index.ts
+var VERSION = "0.1.0";
+var USAGE = `
+${import_picocolors.default.bold("windo")} ${import_picocolors.default.dim(`v${VERSION}`)} \u2014 zero-infra component canvas
+
+${import_picocolors.default.bold("Usage")}
+  windo [command] [root] [options]
+
+${import_picocolors.default.bold("Commands")}
+  dev                Start the dev server (default)
+  build              Emit a static canvas to windo-static/
+  preview            Serve a built canvas locally
+
+${import_picocolors.default.bold("Options")}
+  -p, --port <n>     Port to listen on (dev, preview)
+      --host [host]  Expose on the network (dev, preview)
+  -o, --open         Open the workbench in the browser (dev, preview)
+  -c, --config <p>   Path to windo.config.ts (dev, build)
+  -d, --outDir <p>   Output directory (build, preview) ${import_picocolors.default.dim("[windo-static]")}
+  -b, --base <p>     Public base path for the build ${import_picocolors.default.dim("[./]")}
+  -h, --help         Show this help
+`;
+var COMMANDS = /* @__PURE__ */ new Set(["dev", "build", "preview"]);
+async function main() {
+  const argv = process.argv.slice(2);
+  const first = argv[0];
+  if (first === "-h" || first === "--help") {
+    console.log(USAGE);
+    return;
+  }
+  let command = "dev";
+  let rest = argv;
+  if (first !== void 0 && !first.startsWith("-")) {
+    if (!COMMANDS.has(first)) {
+      console.error(`${import_picocolors.default.red(`windo: unknown command "${first}".`)}
+${USAGE}`);
+      process.exitCode = 1;
+      return;
+    }
+    command = first;
+    rest = argv.slice(1);
+  }
+  const { values, positionals } = (0, import_node_util.parseArgs)({
+    args: rest,
+    allowPositionals: true,
+    options: {
+      port: { type: "string", short: "p" },
+      host: { type: "string" },
+      open: { type: "boolean", short: "o" },
+      config: { type: "string", short: "c" },
+      outDir: { type: "string", short: "d" },
+      base: { type: "string", short: "b" },
+      help: { type: "boolean", short: "h" }
+    }
+  });
+  if (values.help) {
+    console.log(USAGE);
+    return;
+  }
+  const ALLOWED = {
+    dev: /* @__PURE__ */ new Set(["port", "host", "open", "config", "help"]),
+    build: /* @__PURE__ */ new Set(["config", "outDir", "base", "help"]),
+    preview: /* @__PURE__ */ new Set(["port", "host", "open", "outDir", "help"])
+  };
+  const stray = Object.keys(values).filter((k) => !ALLOWED[command].has(k));
+  if (stray.length > 0) {
+    console.error(`${import_picocolors.default.red(`windo ${command}: unsupported option${stray.length > 1 ? "s" : ""} ${stray.map((s) => `--${s}`).join(", ")}.`)}
+${USAGE}`);
+    process.exitCode = 1;
+    return;
+  }
+  const root = positionals[0] ? String(positionals[0]) : process.cwd();
+  const config = values.config;
+  if (command === "build") {
+    const outDir = values.outDir ?? "windo-static";
+    const base = values.base ?? "./";
+    console.log();
+    console.log(`  ${import_picocolors.default.bold(import_picocolors.default.cyan("windo"))} ${import_picocolors.default.dim(`v${VERSION}`)} ${import_picocolors.default.dim("build")}`);
+    console.log();
+    await (0, import_vite.build)({
+      root,
+      base,
+      // Self-contained: don't merge an unrelated vite.config from the project.
+      configFile: false,
+      plugins: [windoPlugin({ config })],
+      build: { outDir, emptyOutDir: true }
+    });
+    console.log();
+    console.log(`  ${import_picocolors.default.green("\u2713")} canvas written to ${import_picocolors.default.cyan(outDir)}`);
+    console.log(`  ${import_picocolors.default.dim("preview it with")} ${import_picocolors.default.bold("windo preview")}${outDir === "windo-static" ? "" : ` -d ${outDir}`}`);
+    console.log();
+    return;
+  }
+  if (command === "preview") {
+    const outDir = values.outDir ?? "windo-static";
+    const port2 = values.port === void 0 ? void 0 : Number(values.port);
+    const host2 = values.host === "" ? true : values.host;
+    const open2 = values.open ?? false;
+    const server2 = await (0, import_vite.preview)({
+      root,
+      configFile: false,
+      build: { outDir },
+      preview: { port: port2, host: host2, open: open2 }
+    });
+    console.log();
+    console.log(`  ${import_picocolors.default.bold(import_picocolors.default.cyan("windo"))} ${import_picocolors.default.dim(`v${VERSION}`)} ${import_picocolors.default.dim("preview")}`);
+    console.log();
+    server2.printUrls();
+    return;
+  }
+  const port = values.port === void 0 ? void 0 : Number(values.port);
+  const host = values.host === "" ? true : values.host;
+  const open = values.open ?? false;
+  const server = await (0, import_vite.createServer)({
+    root,
+    plugins: [windoPlugin({ config })],
+    server: { port, host, open }
+  });
+  await server.listen();
+  console.log();
+  console.log(`  ${import_picocolors.default.bold(import_picocolors.default.cyan("windo"))} ${import_picocolors.default.dim(`v${VERSION}`)}`);
+  console.log();
+  server.printUrls();
+}
+main().catch((err) => {
+  process.exitCode = 1;
+  console.error(import_picocolors.default.red("windo: command failed."));
+  console.error(err);
+});
+//# sourceMappingURL=cli.cjs.map