@tilewise/workbench-client 0.0.0-stage → 0.1.1

package/dist/vite/serveBuild.d.ts

@@ -0,0 +1,7 @@
+import type { ServerResponse } from 'node:http';
+export declare function sendJson(response: ServerResponse, status: number, body: unknown): void;
+/**
+ * A file of a build; a path that is no file is the app's own route, so its
+ * index. The build's fake API bundle is run, never served.
+ */
+export declare function serveBuild(response: ServerResponse, folder: string, sha: string, rest: string): Promise<void>;

package/dist/vite/serveBuild.js

@@ -0,0 +1,45 @@
+import { createReadStream, existsSync } from 'node:fs';
+import { stat } from 'node:fs/promises';
+import { extname, join, resolve, sep } from 'node:path';
+const TYPES = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'text/javascript',
+    '.css': 'text/css',
+    '.json': 'application/json',
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.woff2': 'font/woff2',
+    '.ico': 'image/x-icon',
+};
+export function sendJson(response, status, body) {
+    response.statusCode = status;
+    response.setHeader('Content-Type', 'application/json');
+    response.setHeader('Cache-Control', 'no-store');
+    response.end(JSON.stringify(body));
+}
+/**
+ * A file of a build; a path that is no file is the app's own route, so its
+ * index. The build's fake API bundle is run, never served.
+ */
+export async function serveBuild(response, folder, sha, rest) {
+    const dir = join(folder, sha);
+    let file = resolve(dir, `.${decodeURIComponent(rest || '/')}`);
+    if (!file.startsWith(dir + sep) && file !== dir) {
+        return sendJson(response, 400, { error: 'Bad path' });
+    }
+    if (file === join(dir, '__api') || file.startsWith(join(dir, '__api') + sep)) {
+        return sendJson(response, 404, { error: 'Not found' });
+    }
+    const isFile = await stat(file).then((found) => found.isFile(), () => false);
+    if (!isFile) {
+        file = join(dir, 'index.html');
+    }
+    if (!existsSync(file)) {
+        return sendJson(response, 404, { error: 'Not built' });
+    }
+    response.setHeader('Content-Type', TYPES[extname(file)] ?? 'application/octet-stream');
+    response.setHeader('Cache-Control', file.endsWith('index.html') ? 'no-cache' : 'public, max-age=31536000, immutable');
+    createReadStream(file).pipe(response);
+}

package/dist/vite/versions.d.ts

@@ -0,0 +1,44 @@
+import type { Build } from './builds.js';
+import { type Git } from './git.js';
+type Sync = 'pushed' | 'ahead' | 'behind' | 'diverged' | 'local' | 'remote';
+/**
+ * This machine's branches, with push status, author, how each stands against
+ * the base and its build; its tags; what is checked out; and how many files
+ * are changed.
+ */
+export declare function versions(git: Git, base: string, buildOf: (sha: string) => Promise<Build>): Promise<{
+    source: string;
+    base: string;
+    current: string;
+    changed: number;
+    branches: {
+        vsBase: {
+            ahead: number;
+            behind: number;
+        } | undefined;
+        build: Build;
+        name: string;
+        sha: string;
+        date: string;
+        author: string;
+        sync: Sync;
+        ahead: number;
+        behind: number;
+        current: boolean;
+        changed: number;
+    }[];
+    tags: {
+        name: string | undefined;
+        sha: string | undefined;
+        date: string | undefined;
+    }[];
+}>;
+/** A ref's history, newest first, each commit with its build. A branch only on the remote is origin's. */
+export declare function commits(git: Git, ref: string, buildOf: (sha: string) => Promise<Build>): Promise<{
+    sha: string;
+    author: string | undefined;
+    date: string | undefined;
+    message: string;
+    build: Build;
+}[]>;
+export {};

package/dist/vite/versions.js

@@ -0,0 +1,122 @@
+import { refExists } from './git.js';
+const rows = (output) => {
+    return output
+        .split('\n')
+        .filter(Boolean)
+        .map((line) => line.split('\t'));
+};
+const BRANCH = '%(refname:short)%09%(objectname)%09%(committerdate:iso-strict)%09%(authorname)';
+/**
+ * This machine's branches, with push status, author, how each stands against
+ * the base and its build; its tags; what is checked out; and how many files
+ * are changed.
+ */
+export async function versions(git, base, buildOf) {
+    const [head, status, heads, remotes, tags, baseRef] = await Promise.all([
+        git('rev-parse', '--abbrev-ref', 'HEAD'),
+        git('status', '--porcelain'),
+        git('for-each-ref', `--format=${BRANCH}%09%(upstream:short)%09%(upstream:track,nobracket)`, 'refs/heads'),
+        git('for-each-ref', `--format=${BRANCH}`, 'refs/remotes/origin'),
+        // An annotated tag names its commit through *objectname.
+        git('for-each-ref', '--sort=-creatordate', '--format=%(refname:short)%09%(if)%(*objectname)%(then)%(*objectname)%(else)%(objectname)%(end)%09%(creatordate:iso-strict)', 'refs/tags'),
+        baseRefOf(git, base),
+    ]);
+    const current = head.trim();
+    const changed = status.split('\n').filter(Boolean).length;
+    const branches = rows(heads).map(([name = '', sha = '', date = '', author = '', upstream, track]) => {
+        const ahead = Number(/ahead (\d+)/.exec(track ?? '')?.[1] ?? 0);
+        const behind = Number(/behind (\d+)/.exec(track ?? '')?.[1] ?? 0);
+        return {
+            name,
+            ref: `refs/heads/${name}`,
+            sha,
+            date,
+            author,
+            sync: syncOf(upstream, track, ahead, behind),
+            ahead,
+            behind,
+            current: name === current,
+            changed: name === current ? changed : 0,
+        };
+    });
+    const local = new Set(branches.map((branch) => branch.name));
+    for (const [ref = '', sha = '', date = '', author = ''] of rows(remotes)) {
+        const name = ref.replace(/^origin\//, '');
+        if (name === 'HEAD' || name === 'origin' || local.has(name)) {
+            continue;
+        }
+        branches.push({
+            name,
+            ref: `refs/remotes/${ref}`,
+            sha,
+            date,
+            author,
+            sync: 'remote',
+            ahead: 0,
+            behind: 0,
+            current: false,
+            changed: 0,
+        });
+    }
+    branches.sort((one, other) => {
+        return (Number(other.name === base) - Number(one.name === base) ||
+            Number(other.current) - Number(one.current) ||
+            other.date.localeCompare(one.date));
+    });
+    return {
+        source: 'local',
+        base,
+        current,
+        changed,
+        branches: await Promise.all(branches.map(async ({ ref, ...branch }) => {
+            return {
+                ...branch,
+                vsBase: baseRef ? await against(git, baseRef, ref) : undefined,
+                build: await buildOf(branch.sha),
+            };
+        })),
+        tags: rows(tags).map(([name, sha, date]) => ({ name, sha, date })),
+    };
+}
+function syncOf(upstream, track, ahead, behind) {
+    if (!upstream || track === 'gone') {
+        return 'local';
+    }
+    if (ahead && behind) {
+        return 'diverged';
+    }
+    if (ahead) {
+        return 'ahead';
+    }
+    return behind ? 'behind' : 'pushed';
+}
+/** The base as GitHub has it, when this machine has fetched it. */
+async function baseRefOf(git, base) {
+    if (await refExists(git, `refs/remotes/origin/${base}`)) {
+        return `origin/${base}`;
+    }
+    return (await refExists(git, `refs/heads/${base}`)) ? base : null;
+}
+/** A branch against the base: its commits not there yet, and the base's not in it. */
+async function against(git, baseRef, ref) {
+    const counts = (await git('rev-list', '--left-right', '--count', `${baseRef}...${ref}`))
+        .trim()
+        .split(/\s+/)
+        .map(Number);
+    return { ahead: counts[1] ?? 0, behind: counts[0] ?? 0 };
+}
+/** A ref's history, newest first, each commit with its build. A branch only on the remote is origin's. */
+export async function commits(git, ref, buildOf) {
+    const remoteOnly = !(await refExists(git, `refs/heads/${ref}`)) &&
+        (await refExists(git, `refs/remotes/origin/${ref}`));
+    const output = await git('log', '--format=%H%x09%an%x09%aI%x09%s', '-n', '300', remoteOnly ? `origin/${ref}` : ref, '--');
+    return Promise.all(rows(output).map(async ([sha = '', author, date, ...message]) => {
+        return {
+            sha,
+            author,
+            date,
+            message: message.join('\t'),
+            build: await buildOf(sha),
+        };
+    }));
+}

package/dist/vite/workbenchLocal.d.ts

@@ -0,0 +1,32 @@
+import type { Plugin } from 'vite';
+/**
+ * The local builds service, as a Vite plugin: with it, the app's dev server
+ * also answers the deployed viewer. It lists this machine's branches and
+ * commits, builds any commit, and checks a branch out.
+ *
+ *   GET  /__workbench/versions           branches, tags, what is checked out, changed files
+ *   GET  /__workbench/commits?ref=<ref>  that ref's history, newest first, each with its build
+ *   POST /__workbench/builds/<sha>       build it; asked again, says how it stands (?retry after a failure)
+ *   GET  /__workbench/builds/<sha>       how its build stands
+ *   GET  /__workbench/b/<sha>/…          the build, for the viewer's frame
+ *   POST /__workbench/checkout           { branch }: refused while anything is uncommitted
+ *   POST /__workbench/fetch              git fetch, so push status is current
+ *
+ * `base` is the branch the others are compared with: the repository's
+ * default branch unless set. Builds are served without the token, as a frame
+ * can't send a header. Without WORKBENCH_URL, the dev server opens no viewer.
+ *
+ * `api` is a fake API beside the app: `entry`, its module from the app's
+ * folder, whose default export is a fetch handler, and `path`, where the app
+ * asks it (`/api` unless set). The dev server answers it there for Live, from
+ * its source; each build bundles that commit's and answers it under the
+ * build, at `/__workbench/b/<sha>/api/…`. Either way the handler is asked
+ * without the path, so `/api/bags/b1` reaches it as `/bags/b1`.
+ */
+export declare function workbenchLocal(options?: {
+    base?: string;
+    api?: {
+        entry: string;
+        path?: string;
+    };
+}): Plugin;

package/dist/vite/workbenchLocal.js

@@ -0,0 +1,251 @@
+import { spawn } from 'node:child_process';
+import { randomBytes } from 'node:crypto';
+import { resolve } from 'node:path';
+import { apiFetchOf } from './apiFetch.js';
+import { createApiWorkers } from './apiWorkers.js';
+import { createBuilds } from './builds.js';
+import { checkout } from './checkout.js';
+import { environment } from './environment.js';
+import { sendResponse, toRequest } from './fetchBridge.js';
+import { defaultBranch, gitIn } from './git.js';
+import { sendJson, serveBuild } from './serveBuild.js';
+import { commits, versions } from './versions.js';
+const PREFIX = '/__workbench';
+const SHA = /^[0-9a-f]{7,40}$/;
+const REF = /^[\w][\w./-]*$/;
+// One token for the life of the process: Vite restarting on a config change
+// keeps the viewer that was opened with it connected.
+const scope = globalThis;
+const token = (scope.workbenchToken ??= randomBytes(16).toString('hex'));
+/** Only the viewer may ask: from its address, or a viewer on this machine. */
+const allowed = (origin) => {
+    return (!!origin &&
+        (origin === environment.viewerUrl || /^http:\/\/(localhost|127\.0\.0\.1):\d+$/.test(origin)));
+};
+const bodyOf = (request) => {
+    return new Promise((resolve) => {
+        let text = '';
+        request.setEncoding('utf8');
+        request.on('data', (chunk) => {
+            text += chunk;
+            if (text.length > 10_000) {
+                request.destroy();
+            }
+        });
+        request.on('end', () => {
+            try {
+                resolve(JSON.parse(text || '{}'));
+            }
+            catch {
+                resolve(null);
+            }
+        });
+        request.on('error', () => resolve(null));
+    });
+};
+function open(url) {
+    const [command, args] = process.platform === 'win32'
+        ? ['rundll32', ['url.dll,FileProtocolHandler', url]]
+        : process.platform === 'darwin'
+            ? ['open', [url]]
+            : ['xdg-open', [url]];
+    spawn(command, args, { detached: true, stdio: 'ignore' })
+        .on('error', () => undefined)
+        .unref();
+}
+/**
+ * The local builds service, as a Vite plugin: with it, the app's dev server
+ * also answers the deployed viewer. It lists this machine's branches and
+ * commits, builds any commit, and checks a branch out.
+ *
+ *   GET  /__workbench/versions           branches, tags, what is checked out, changed files
+ *   GET  /__workbench/commits?ref=<ref>  that ref's history, newest first, each with its build
+ *   POST /__workbench/builds/<sha>       build it; asked again, says how it stands (?retry after a failure)
+ *   GET  /__workbench/builds/<sha>       how its build stands
+ *   GET  /__workbench/b/<sha>/…          the build, for the viewer's frame
+ *   POST /__workbench/checkout           { branch }: refused while anything is uncommitted
+ *   POST /__workbench/fetch              git fetch, so push status is current
+ *
+ * `base` is the branch the others are compared with: the repository's
+ * default branch unless set. Builds are served without the token, as a frame
+ * can't send a header. Without WORKBENCH_URL, the dev server opens no viewer.
+ *
+ * `api` is a fake API beside the app: `entry`, its module from the app's
+ * folder, whose default export is a fetch handler, and `path`, where the app
+ * asks it (`/api` unless set). The dev server answers it there for Live, from
+ * its source; each build bundles that commit's and answers it under the
+ * build, at `/__workbench/b/<sha>/api/…`. Either way the handler is asked
+ * without the path, so `/api/bags/b1` reaches it as `/bags/b1`.
+ */
+export function workbenchLocal(options = {}) {
+    let root = process.cwd();
+    let git = gitIn(root);
+    let server = null;
+    const api = options.api
+        ? {
+            entry: options.api.entry,
+            path: `/${(options.api.path ?? '/api').replace(/^\/+|\/+$/g, '')}`,
+        }
+        : null;
+    const builds = createBuilds({
+        root: () => root,
+        git: (...args) => git(...args),
+        api: () => api,
+    });
+    const workers = createApiWorkers();
+    const base = async () => options.base ?? (await defaultBranch(git));
+    async function answer(request, response, url) {
+        const path = url.pathname;
+        if (request.method === 'GET' && path === '/versions') {
+            return sendJson(response, 200, await versions(git, await base(), builds.buildOf));
+        }
+        if (request.method === 'GET' && path === '/commits') {
+            const ref = url.searchParams.get('ref') ?? 'HEAD';
+            if (!REF.test(ref)) {
+                return sendJson(response, 400, { error: 'Bad ref' });
+            }
+            return sendJson(response, 200, { commits: await commits(git, ref, builds.buildOf) });
+        }
+        const build = /^\/builds\/([0-9a-f]{7,40})$/.exec(path);
+        if (build) {
+            const sha = (await git('rev-parse', '--verify', '--quiet', `${build[1]}^{commit}`).catch(() => '')).trim();
+            if (!SHA.test(sha)) {
+                return sendJson(response, 404, { error: 'No such commit' });
+            }
+            const state = request.method === 'POST'
+                ? await builds.requestBuild(sha, url.searchParams.has('retry'))
+                : await builds.buildOf(sha);
+            return sendJson(response, 200, { sha, ...state });
+        }
+        if (request.method === 'POST' && path === '/checkout') {
+            const branch = (await bodyOf(request))?.branch;
+            if (typeof branch !== 'string' || !REF.test(branch)) {
+                return sendJson(response, 400, { error: 'Bad branch' });
+            }
+            const result = await checkout(git, root, branch, () => void server?.restart());
+            return sendJson(response, result.status, result.body);
+        }
+        if (request.method === 'POST' && path === '/fetch') {
+            await git('fetch', '--prune', 'origin');
+            return sendJson(response, 200, { ok: true });
+        }
+        return sendJson(response, 404, { error: 'Not found' });
+    }
+    /** A build's own fake API, asked at `rest`, the path under the build; false when it has none there. */
+    async function answerBuildApi(request, response, sha, rest, search) {
+        const own = await builds.apiOf(sha);
+        if (!own || (rest !== own.path && !rest.startsWith(`${own.path}/`))) {
+            return false;
+        }
+        try {
+            const asked = await toRequest(request, `${rest.slice(own.path.length) || '/'}${search}`);
+            await sendResponse(response, await workers.answer(sha, own.file, asked));
+        }
+        catch (failure) {
+            sendJson(response, 500, { error: failure.message });
+        }
+        return true;
+    }
+    /** The fake API for Live, from its source: Vite loads it again when it changes. */
+    async function answerLiveApi(request, response) {
+        try {
+            if (!api || !server) {
+                return sendJson(response, 404, { error: 'No fake API' });
+            }
+            const module = await server.ssrLoadModule(resolve(root, api.entry));
+            const asked = await toRequest(request, request.url ?? '/');
+            await sendResponse(response, await apiFetchOf(module)(asked));
+        }
+        catch (failure) {
+            sendJson(response, 500, { error: failure.message });
+        }
+    }
+    async function handle(request, response) {
+        const url = new URL(request.url ?? '/', 'http://local');
+        const built = /^\/b\/([0-9a-f]{7,40})(\/.*)?$/.exec(url.pathname);
+        const sha = built?.[1] ?? '';
+        const rest = built?.[2] ?? '/';
+        if (built && (await answerBuildApi(request, response, sha, rest, url.search))) {
+            return;
+        }
+        if (built && request.method === 'GET') {
+            return serveBuild(response, builds.folder(), sha, rest);
+        }
+        const origin = request.headers.origin;
+        if (allowed(origin)) {
+            response.setHeader('Access-Control-Allow-Origin', origin);
+            response.setHeader('Vary', 'Origin');
+            response.setHeader('Access-Control-Allow-Headers', 'content-type, x-workbench-token');
+            response.setHeader('Access-Control-Allow-Methods', 'GET, POST');
+            response.setHeader('Access-Control-Allow-Private-Network', 'true');
+        }
+        if (request.method === 'OPTIONS') {
+            response.statusCode = 204;
+            return response.end();
+        }
+        if (!allowed(origin) || request.headers['x-workbench-token'] !== token) {
+            return sendJson(response, 403, {
+                error: 'Only the viewer, with the token from the dev server',
+            });
+        }
+        try {
+            await answer(request, response, url);
+        }
+        catch (failure) {
+            sendJson(response, 500, { error: failure.message });
+        }
+    }
+    return {
+        name: 'workbench-local',
+        apply: 'serve',
+        // Builds and their worktrees are no part of the app: never watch or reload for them.
+        config: () => ({ server: { watch: { ignored: ['**/.builds/**'] } } }),
+        configResolved(config) {
+            root = config.root;
+            git = gitIn(root);
+        },
+        configureServer(devServer) {
+            server = devServer;
+            devServer.middlewares.use(PREFIX, (request, response) => {
+                void handle(request, response);
+            });
+            // First in line: Vite's own CORS answers every preflight before any plugin, without the
+            // viewer's origin or Chrome's private-network header, so the deployed page could not ask.
+            const stack = devServer.middlewares.stack;
+            const ours = stack.pop();
+            if (ours) {
+                stack.unshift(ours);
+            }
+            // Before Vite's own middleware, which would answer the path with the app's page.
+            if (api) {
+                devServer.middlewares.use(api.path, (request, response) => {
+                    void answerLiveApi(request, response);
+                });
+            }
+            devServer.httpServer?.once('listening', () => {
+                void announce(devServer);
+            });
+            devServer.httpServer?.once('close', () => {
+                workers.stopAll();
+            });
+        },
+    };
+    async function announce(devServer) {
+        if (!environment.viewerUrl) {
+            devServer.config.logger.info('\n  Viewer: set WORKBENCH_URL to its address to open it\n');
+            return;
+        }
+        const address = devServer.httpServer?.address();
+        const port = typeof address === 'object' && address ? address.port : 5173;
+        // The repository, as owner/name: the viewer opens its project from it.
+        const remote = await git('remote', 'get-url', 'origin').catch(() => '');
+        const repository = /github\.com[:/]([\w.-]+\/[\w.-]+?)(?:\.git)?\s*$/.exec(remote)?.[1];
+        const local = encodeURIComponent(`http://localhost:${port}`);
+        const url = `${environment.viewerUrl}/?src=local&v=live#local=${local}&token=${token}${repository ? `&repo=${encodeURIComponent(repository)}` : ''}`;
+        devServer.config.logger.info(`\n  Viewer: ${url}\n`);
+        // `pnpm dev` opens it; any other script is the app alone.
+        if (environment.script === 'dev') {
+            open(url);
+        }
+    }
+}

package/docs/protocol.md

@@ -0,0 +1,66 @@
+# Protocol 4
+
+The app and the viewer talk through `postMessage`, between the frame and the
+page around it. The types are exported: `Manifest`, `AppMessage` and
+`ViewerMessage`.
+
+## Manifest
+
+The app sends it with `hello`. The viewer draws its screen list, route tree
+and forms from it alone, so an old commit shows its own screens and controls.
+
+- `app`: whose build this is, such as `aitems`.
+- `screens`: every screen, with `id`, `label`, `short`, and where it sits
+  (`parent`, `tab`, `group`, `page`, `where`, `statesBy`, `files`), each with
+  its `states`. A state goes without its jump: the viewer names the state, and
+  the app makes the jump.
+- `controls`: every control as declared, with its `level`, and its `screen`
+  or `block`.
+- `blocks`: each block's `id`, `label`, and its controls' ids, in order.
+
+## Messages
+
+| Message | Said by | Fields | Means |
+| --- | --- | --- | --- |
+| `hello` | App | `protocol`, `manifest` | Here is what this build has |
+| `at` | App | `screen`, `state` or null | This is where the app is now |
+| `blocks` | App | `screen`, `blocks` (ids) | These blocks are drawn on this screen now |
+| `values` | App | `values` | Every control's value, now |
+| `tone` | App | `top`: light or dark | The top of the screen, so the status bar reads on it |
+| `height` | App | `height` | On Full page, how tall the open screen is laid out whole |
+| `snapshot` | App | `id`, `image` (an `ImageBitmap`) or null | The screen as it was when asked |
+| `hello` | Viewer | None | Say your hello again |
+| `device` | Viewer | `insets` (`top`, `bottom`), `platform`, `whole` | The device drawn round the app |
+| `go` | Viewer | `state` | Go to this state |
+| `set` | Viewer | `id`, `value` | Give this control this value |
+| `reset` | Viewer | `id`, or none for all | Put this control back to its default |
+| `snapshot` | Viewer | `id`, a number | Send a picture of the screen as it is now |
+
+- The app says `hello` as it loads in a frame and whenever the viewer says
+  `hello`, then sends `at`, `blocks` and `values`. After that it sends each
+  only when it changes, and `tone` and `height` whenever they change;
+  `height` only on Full page.
+- The app has the last word on values: `set` asks, the app checks, and the
+  `values` it answers with says what it kept. `reset` is answered the same
+  way. After `set`, or `reset` of one control, the app scrolls to the part
+  marked `data-control` with its id.
+- The viewer sends `device` after each `hello` and whenever another device is
+  picked.
+- The viewer asks for a `snapshot` just before a foldable folds, and again as
+  it opens, once the app has laid itself out open, and shows them on the
+  halves that swing, as the app's frame can't be in two places. The app
+  answers with the same `id` and hands the picture over, at up to twice the
+  screen's size; `image` is null when it can't be taken. A build before
+  protocol 4 doesn't answer, and the viewer folds it dark.
+- Outside a frame the app sends nothing, and only takes `?at=` from the
+  address.
+
+Every message carries `source`: `'aitems'` from the app and
+`'aitems-workbench'` from the viewer, for every app, as builds from before
+this package send them. Each side ignores any message without the other's
+tag, or from a window other than the one it expects.
+
+## Changing it
+
+Any change to a message or to the manifest bumps `PROTOCOL`, so the viewer
+can still read older builds.

package/package.json

@@ -1,6 +1,66 @@
 {
   "name": "@tilewise/workbench-client",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Connects a React prototype to the workbench's viewer: its screens, its controls and the protocol between them.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tilewise/workbench.git",
+    "directory": "packages/workbench-client"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "default": "./dist/vite/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "docs",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "vite": ">=7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.3",
+    "@tilewise/config": "^0.2.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "jsdom": "^30.1.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
+  },
+  "dependencies": {
+    "modern-screenshot": "^4.7.0"
+  },
+  "scripts": {
+    "build": "tilewise-build",
+    "check:circular": "tilewise-madge src",
+    "lint": "tilewise-lint src/",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
 }