@lerret/cli 0.1.0

package/dist-studio/assets/project-studio-CKuMOMsC.css

@@ -0,0 +1 @@
+.lm-menu-popover{padding:var(--lm-space-1);background:var(--lm-popover-bg);-webkit-backdrop-filter:blur(16px)saturate(120%);border:1px solid var(--lm-popover-border);border-radius:var(--lm-radius-lg);min-width:200px;max-width:320px;max-height:320px;box-shadow:var(--lm-shadow-popup);z-index:80;font-family:var(--lm-font-sans);color:var(--lm-text-primary);animation:lm-menu-open var(--lm-duration-fast) var(--lm-ease) both;outline:none;margin:0;list-style:none;position:fixed;overflow-y:auto}@keyframes lm-menu-open{0%{opacity:0;transform:scale(.96)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}@media (prefers-reduced-motion:reduce){.lm-menu-popover{animation:none}}.lm-menu-item{align-items:center;gap:var(--lm-space-2);width:100%;padding:var(--lm-space-2) var(--lm-space-3);border-radius:var(--lm-radius-md);color:var(--lm-text-primary);font-family:var(--lm-font-sans);font-size:var(--lm-size-body);font-weight:var(--lm-weight-medium);line-height:var(--lm-lh-body);text-align:left;cursor:pointer;transition:background var(--lm-duration-fast), box-shadow var(--lm-duration-fast);background:0 0;border:none;outline:none;list-style:none;display:flex}@media (prefers-reduced-motion:reduce){.lm-menu-item{transition:none}}.lm-menu-item[data-active=true]{background:var(--lm-accent-light);box-shadow:inset 0 0 0 1.5px var(--lm-accent)}.lm-menu-item:hover:not([aria-disabled=true]){background:var(--lm-bg-tertiary)}.lm-menu-item[aria-disabled=true]{color:var(--lm-text-muted);cursor:not-allowed}.lm-menu-item-icon{opacity:.7;font-size:var(--lm-size-body-sm);flex:none;display:inline-flex}.lm-menu-item-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.lm-menu-item-reason{font-size:var(--lm-size-body-sm);color:var(--lm-text-tertiary);white-space:nowrap;text-overflow:ellipsis;flex:none;max-width:160px;overflow:hidden}.lm-menu-separator{height:1px;margin:var(--lm-space-1) var(--lm-space-3);background:var(--lm-border-light);list-style:none}.lm-field{gap:var(--lm-space-1,4px);font-family:var(--lm-font-sans);flex-direction:column;display:flex}.lm-field__label-row{align-items:center;gap:var(--lm-space-1,4px);display:flex}.lm-field__label{font-size:var(--lm-size-hint,10px);font-weight:var(--lm-weight-semibold,600);color:var(--lm-text-tertiary,#6e6960);text-transform:uppercase;letter-spacing:var(--lm-tracking-caps,.5px);line-height:1}.lm-field__required{color:var(--lm-error,#a8412b);font-size:var(--lm-size-hint,10px);-webkit-user-select:none;user-select:none;line-height:1}.lm-field__description{font-size:var(--lm-size-body-sm,12px);color:var(--lm-text-muted,#b8b3a8);line-height:var(--lm-lh-body,1.45);margin:0}.lm-field__invalid-msg{align-items:center;gap:var(--lm-space-1,4px);font-size:var(--lm-size-body-sm,12px);color:var(--lm-error,#a8412b);line-height:var(--lm-lh-body,1.45);display:flex}.lm-field__invalid-icon{flex-shrink:0;width:12px;height:12px}.lm-input{box-sizing:border-box;width:100%;padding:var(--lm-space-1,4px) var(--lm-space-2,8px);font-family:var(--lm-font-sans);font-size:var(--lm-size-body,13px);font-weight:var(--lm-weight-regular,400);color:var(--lm-text-primary,#1a1714);background:var(--lm-bg-primary,#faf8f2);border:1px solid var(--lm-border,#ddd7ca);border-radius:var(--lm-radius-sm,6px);transition:border-color var(--lm-duration-fast,.12s) var(--lm-ease);appearance:none;outline:none}.lm-input::placeholder{color:var(--lm-text-muted,#b8b3a8);opacity:1}.lm-input:hover:not(:disabled){border-color:var(--lm-accent-border,#b85b3333)}.lm-input:focus{border-color:var(--lm-accent,#b85b33);box-shadow:var(--lm-focus-ring)}.lm-input:disabled{opacity:.45;cursor:not-allowed;background:var(--lm-bg-tertiary,#e8e2d4)}.lm-input--invalid{border-color:var(--lm-error-border,#a8412b33);background:var(--lm-error-light,#a8412b1a)}.lm-input--invalid:focus{border-color:var(--lm-error,#a8412b);box-shadow:0 0 0 2px var(--lm-error-border,#a8412b33)}.lm-select{cursor:pointer}.lm-toggle{align-items:center;gap:var(--lm-space-2,8px);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}.lm-toggle__track{border-radius:var(--lm-radius-pill,999px);background:var(--lm-bg-tertiary,#e8e2d4);border:1px solid var(--lm-border,#ddd7ca);width:32px;height:18px;transition:background var(--lm-duration-fast,.12s) var(--lm-ease), border-color var(--lm-duration-fast,.12s) var(--lm-ease);outline:none;flex-shrink:0;align-items:center;display:inline-flex;position:relative}.lm-toggle__track:focus-visible{box-shadow:var(--lm-focus-ring);border-color:var(--lm-accent,#b85b33)}.lm-toggle__track--on{background:var(--lm-accent,#b85b33);border-color:var(--lm-accent,#b85b33)}.lm-toggle__track--invalid{border-color:var(--lm-error,#a8412b)}.lm-toggle__thumb{width:12px;height:12px;box-shadow:var(--lm-shadow-xs);transition:transform var(--lm-duration-fast,.12s) var(--lm-ease);background:#fff;border-radius:50%;position:absolute;left:2px}.lm-toggle__track--on .lm-toggle__thumb{transform:translate(14px)}.lm-toggle__track--disabled{opacity:.45;cursor:not-allowed}.lm-toggle__label{font-size:var(--lm-size-body,13px);color:var(--lm-text-secondary,#3a3530)}.lm-array{gap:var(--lm-space-2,8px);flex-direction:column;display:flex}.lm-array__items{gap:var(--lm-space-1,4px);flex-direction:column;display:flex}.lm-array__item{align-items:center;gap:var(--lm-space-1,4px);padding:var(--lm-space-1,4px) var(--lm-space-2,8px);background:var(--lm-bg-secondary,#f2eee6);border:1px solid var(--lm-border,#ddd7ca);border-radius:var(--lm-radius-sm,6px);display:flex}.lm-array__item-field{flex:1;min-width:0}.lm-array__item-actions{gap:var(--lm-space-1,4px);flex-shrink:0;display:flex}.lm-array__add{align-items:center;gap:var(--lm-space-1,4px);padding:var(--lm-space-1,4px) var(--lm-space-2,8px);font-family:var(--lm-font-sans);font-size:var(--lm-size-body-sm,12px);font-weight:var(--lm-weight-medium,500);color:var(--lm-accent,#b85b33);border:1px dashed var(--lm-accent-border,#b85b3333);border-radius:var(--lm-radius-sm,6px);cursor:pointer;width:100%;transition:background var(--lm-duration-fast,.12s) var(--lm-ease), border-color var(--lm-duration-fast,.12s) var(--lm-ease);background:0 0;outline:none;justify-content:center;display:flex}.lm-array__add:hover:not(:disabled){background:var(--lm-accent-light,#b85b331a);border-color:var(--lm-accent,#b85b33)}.lm-array__add:focus-visible{box-shadow:var(--lm-focus-ring);border-color:var(--lm-accent,#b85b33)}.lm-array__add:disabled{opacity:.45;cursor:not-allowed}.lm-object{gap:var(--lm-space-2,8px);padding:var(--lm-space-2,8px);background:var(--lm-bg-secondary,#f2eee6);border:1px solid var(--lm-border,#ddd7ca);border-radius:var(--lm-radius-sm,6px);flex-direction:column;display:flex}.lm-icon-btn{border-radius:var(--lm-radius-xs,4px);cursor:pointer;width:22px;height:22px;color:var(--lm-text-tertiary,#6e6960);transition:background var(--lm-duration-fast,.12s) var(--lm-ease), color var(--lm-duration-fast,.12s) var(--lm-ease);background:0 0;border:1px solid #0000;outline:none;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;display:inline-flex}.lm-icon-btn:hover:not(:disabled){background:var(--lm-bg-tertiary,#e8e2d4);color:var(--lm-text-primary,#1a1714)}.lm-icon-btn:focus-visible{box-shadow:var(--lm-focus-ring);border-color:var(--lm-accent,#b85b33)}.lm-icon-btn:disabled{opacity:.35;cursor:not-allowed}.lm-icon-btn--danger:hover:not(:disabled){background:var(--lm-error-light,#a8412b1a);color:var(--lm-error,#a8412b);border-color:var(--lm-error-border,#a8412b33)}

package/dist-studio/index.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>Lerret — Studio</title>
+ <!--
+ Hosted-mode import map placeholder (FR13).
+ ───────────────────────────────────────────────────
+ In hosted mode user assets are transformed in-browser by Sucrase and
+ served as ES modules by the studio's service worker
+ (`src/runtime/module-sw.js`). Sucrase's automatic JSX runtime emits
+ `import { jsx } from "react/jsx-runtime"`, and user assets are free to
+ write `import { useState } from "react"`. Those are BARE specifiers,
+ not URLs — the browser needs an import map to resolve them.
+
+ The bundled studio's React module URLs are only known after Vite has
+ built the studio (Rolldown produces hashed chunk paths). So the import
+ map is INJECTED AT RUNTIME by `src/runtime/sucrase-runtime.js`'s
+ `injectReactImportMap()` helper, called by the hosted entry layer
+ once it knows the right URLs. The placeholder here is left
+ empty so that:
+ - in CLI mode (`lerret dev`) it doesn't shadow Vite's own
+ dependency-pre-bundle resolution (which handles bare specifiers
+ via the bundler, not via the import map);
+ - the hosted entry layer's injected import map takes effect first,
+ before any asset module is dynamically imported.
+
+ Chrome 89+ propagates a page's import map into SW-served modules, so
+ the same map covers Sucrase-output asset modules.
+ -->
+
+ <style>
+ body {
+ background: #f1f5f9;
+ }
+ </style>
+ <script type="importmap" id="lerret-import-map">
+ { "imports": {} }
+ </script>
+   <script type="module" crossorigin src="./assets/index-EslqdOhg.js"></script>
+   <link rel="stylesheet" crossorigin href="./assets/index-BNmJ8c2t.css">
+ </head>
+ <body>
+ <div id="root"></div>
+ </body>
+</html>

package/dist-studio/module-sw.js

@@ -0,0 +1,275 @@
+// module-sw.js — the production service worker for hosted-mode asset modules.
+//
+// This SW participates in the hosted runtime as the module-graph layer:
+// the main thread reads asset files via the FSA backend, transforms them with
+// Sucrase (`sucrase-transform.js`), then pre-registers the transformed source
+// with this SW via `postMessage`. When the main thread issues a dynamic
+// `import()` for the module's virtual URL, this SW's `fetch` handler
+// intercepts it and serves the cached source as `text/javascript`.
+//
+// ── Why a service worker ─────────────────────────────────────────────────
+// A blob URL module cannot reliably resolve relative `import` specifiers
+// against other blob URLs — the URL is opaque. A service worker, scoped over
+// the studio's origin, intercepts ANY `fetch` (including dynamic `import`)
+// inside that scope, so we can serve a coherent module graph where each
+// asset's `./logo.png` or `../shared/Card.jsx` resolves to another SW-served
+// URL. This was validated by the spike.
+//
+// ── Pre-register protocol (validated by the spike, refined for production) ──
+// The main thread sends one of these messages:
+//
+// { type: 'PING', id }
+// A handshake the main thread uses to confirm the SW is alive and
+// responding. The SW replies with `{ type: 'PONG', id }` via the
+// `event.source` MessagePort. Optional but useful for entry-screen
+// diagnostics.
+//
+// { type: 'REGISTER_MODULE', url, code, contentType? }
+// Pre-register a transformed asset module's source at `url`. The next
+// dynamic `import(url)` will be served the cached `code`. `contentType`
+// defaults to `'text/javascript'`; the runtime overrides it for non-JS
+// resources (e.g. CSS sources served as `'text/css'`).
+//
+// { type: 'INVALIDATE', url }
+// Drop a single cached URL — used when the runtime knows a URL was
+// replaced by a new cache-busted one.
+//
+// { type: 'INVALIDATE_PREFIX', prefix }
+// Drop every cached URL whose key starts with `prefix`. Used when the
+// project is unmounted / re-mounted to clear stale entries en masse.
+//
+// { type: 'CLAIM' }
+// Force this SW to claim all clients in scope immediately. The main
+// thread sends this once after `register()` resolves, so the very first
+// transformed module the page imports is intercepted (otherwise the
+// uncontrolled-page race lets the first fetch bypass the SW).
+//
+// ── Module URL scheme ────────────────────────────────────────────────────
+// Modules are served under `/__lerret/asset/<path>?h=<hash>`. The leading
+// `/__lerret/` segment makes interception unambiguous and keeps SW concerns
+// from colliding with the studio's own routes. The `?h=<hash>` cache-buster
+// is added by the runtime (content-hash from `sucrase-transform.js`); a new
+// transform produces a new URL so the browser re-fetches a fresh module
+// instance (full remount on reload — see FINDINGS §4.3).
+//
+// ── Eviction ─────────────────────────────────────────────────────────────
+// The spike noted that cached URLs accumulate forever — fine for a spike, not
+// for a long-running session. This SW caps the in-memory map at MAX_MODULES.
+// When full, the oldest registered entry is evicted (FIFO via Map iteration
+// order — Map preserves insertion order in JS). A session with hundreds of
+// edits stays at a bounded memory footprint.
+//
+// ── Globals ──────────────────────────────────────────────────────────────
+// Service workers run in a special global scope where `self`, `clients`,
+// `skipWaiting` are defined by the SW spec. ESLint's `no-undef` doesn't know
+// about them. The block below declares them for the linter.
+
+/* global clients */
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+/**
+ * URL prefix the SW intercepts. Any fetch for a URL containing this prefix
+ * is treated as a request for a registered asset module. The leading
+ * `/__lerret/` segment is unlikely to collide with anything in the studio's
+ * own routes (the studio is a single-page app under `/`).
+ */
+const ASSET_URL_PREFIX = '/__lerret/asset/';
+
+/**
+ * Maximum number of registered modules to keep in memory before FIFO
+ * eviction kicks in. A realistic project has ≤200 assets × ≤a-handful of
+ * cache-busted versions; 2000 is generous and bounds the memory footprint.
+ */
+const MAX_MODULES = 2000;
+
+// ---------------------------------------------------------------------------
+// In-memory module store
+// ---------------------------------------------------------------------------
+
+/**
+ * @typedef {{ code: string, contentType: string, registeredAt: number }} ModuleEntry
+ */
+
+/** @type {Map<string, ModuleEntry>} */
+const moduleStore = new Map();
+
+/**
+ * Insert `entry` for `url`, evicting the oldest entry if the store would
+ * exceed {@link MAX_MODULES}.
+ *
+ * @param {string} url
+ * @param {ModuleEntry} entry
+ */
+function storeModule(url, entry) {
+ // If the URL is already present, delete-then-set so the entry moves to the
+ // end (most-recent) of Map iteration order.
+ if (moduleStore.has(url)) {
+ moduleStore.delete(url);
+ } else if (moduleStore.size >= MAX_MODULES) {
+ // FIFO eviction: the first key in iteration order is the oldest.
+ const oldestKey = moduleStore.keys().next().value;
+ if (oldestKey !== undefined) {
+ moduleStore.delete(oldestKey);
+ }
+ }
+ moduleStore.set(url, entry);
+}
+
+// ---------------------------------------------------------------------------
+// Lifecycle handlers
+// ---------------------------------------------------------------------------
+
+self.addEventListener('install', (event) => {
+ // Skip waiting so the new SW activates immediately — the studio's hosted
+ // entry layer is the only caller, and it expects this SW to
+ // be live by the time it tries to register the first module.
+ event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', (event) => {
+ // Claim all clients in this scope so the very first fetch the page makes
+ // after activation is intercepted — without `claim()`, the uncontrolled
+ // page would bypass the SW on its first dynamic import.
+ event.waitUntil(clients.claim());
+});
+
+// ---------------------------------------------------------------------------
+// Message handler — pre-register protocol
+// ---------------------------------------------------------------------------
+
+self.addEventListener('message', (event) => {
+ const data = event.data;
+ if (!data || typeof data !== 'object') return;
+
+ switch (data.type) {
+ case 'PING': {
+ // Reply to the sender with a PONG carrying the same id. Used by the
+ // entry layer to confirm the SW is alive before mounting
+ // the hosted runtime.
+ if (event.source && typeof event.source.postMessage === 'function') {
+ event.source.postMessage({ type: 'PONG', id: data.id });
+ }
+ break;
+ }
+ case 'REGISTER_MODULE': {
+ if (typeof data.url !== 'string' || typeof data.code !== 'string') return;
+ const contentType =
+ typeof data.contentType === 'string' && data.contentType.length > 0
+ ? data.contentType
+ : 'text/javascript';
+ storeModule(data.url, {
+ code: data.code,
+ contentType,
+ registeredAt: Date.now(),
+ });
+ break;
+ }
+ case 'INVALIDATE': {
+ if (typeof data.url !== 'string') return;
+ moduleStore.delete(data.url);
+ break;
+ }
+ case 'INVALIDATE_PREFIX': {
+ if (typeof data.prefix !== 'string' || data.prefix.length === 0) return;
+ // Iterate the snapshot of keys (don't mutate during iteration).
+ const toDelete = [];
+ for (const key of moduleStore.keys()) {
+ if (key.startsWith(data.prefix)) toDelete.push(key);
+ }
+ for (const key of toDelete) moduleStore.delete(key);
+ break;
+ }
+ case 'CLAIM': {
+ // Idempotent — the page may call this multiple times after a reload.
+ // `clients.claim()` returns a Promise; we don't `event.waitUntil` here
+ // because `message` events don't support it. The Promise is fire-and-
+ // forget — the page will retry register-and-import if a race loses.
+ try {
+ clients.claim();
+ } catch {
+ // Older browsers may not allow `claim()` outside the activate handler;
+ // the studio gracefully degrades to whatever interception the page
+ // already had.
+ }
+ break;
+ }
+ default:
+ // Unknown type — ignore. Future protocol evolution stays additive.
+ break;
+ }
+});
+
+// ---------------------------------------------------------------------------
+// Fetch handler — intercept dynamic import() of asset URLs
+// ---------------------------------------------------------------------------
+
+self.addEventListener('fetch', (event) => {
+ const url = event.request.url;
+ // Cheap substring check first to avoid URL parsing for every studio fetch.
+ if (url.indexOf(ASSET_URL_PREFIX) === -1) return;
+
+ // The pathname is the lookup key (origin / scheme are runtime-specific).
+ let pathAndQuery;
+ try {
+ const parsed = new URL(url);
+ pathAndQuery = parsed.pathname + parsed.search;
+ } catch {
+ return;
+ }
+ if (pathAndQuery.indexOf(ASSET_URL_PREFIX) !== 0) return;
+
+ event.respondWith(serveModule(pathAndQuery));
+});
+
+/**
+ * Serve a registered module by URL. A miss returns a JavaScript stub that
+ * throws on evaluation — the dynamic `import()` then rejects with the same
+ * stub message, which the runtime catches and surfaces as a per-asset error
+ * (NFR8). The stub is JavaScript so the browser parses it as a module rather
+ * than reporting a low-level network failure.
+ *
+ * @param {string} key The pathname-plus-search the runtime registered.
+ * @returns {Promise<Response>}
+ */
+async function serveModule(key) {
+ const entry = moduleStore.get(key);
+ if (entry) {
+ return new Response(entry.code, {
+ status: 200,
+ headers: {
+ 'Content-Type': entry.contentType,
+ // The SW is the source of truth for cache-busting; never let the
+ // HTTP cache hold a stale copy.
+ 'Cache-Control': 'no-store',
+ },
+ });
+ }
+ // Miss — emit a JS stub so the import rejects cleanly with a readable
+ // message rather than a generic network error.
+ const safeKey = JSON.stringify(key);
+ const body =
+ `// Lerret hosted runtime: no module registered at ${safeKey}.\n` +
+ `throw new Error(${JSON.stringify(`Hosted runtime: no module registered at ${key}`)});`;
+ return new Response(body, {
+ status: 404,
+ headers: {
+ 'Content-Type': 'text/javascript',
+ 'Cache-Control': 'no-store',
+ },
+ });
+}
+
+// ---------------------------------------------------------------------------
+// Documented exports — for the build to detect the file is a valid module
+// ---------------------------------------------------------------------------
+//
+// A service worker file is loaded by `navigator.serviceWorker.register(url)`,
+// not by `import`, so this file is normally side-effect-only. Vite's
+// production build, however, doesn't know to copy a side-effect-only
+// `.js` file into the dist/ output unless it is referenced. The runtime's
+// `sucrase-runtime.js` imports the URL of this file with Vite's `?worker&url`
+// idiom (`import swUrl from './module-sw.js?worker&url'`), so the bundler
+// emits it to a stable hashed URL. No re-export is needed here.

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@lerret/cli",
+  "version": "0.1.0",
+  "description": "The `lerret` design canvas CLI — a folder of plain React component files renders as a visual canvas. Includes the Vite dev server, headless export, and the bundled studio.",
+  "type": "module",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "bin": {
+    "lerret": "./src/lerret.js"
+  },
+  "files": [
+    "src",
+    "dist-studio",
+    "!src/**/*.test.js",
+    "!src/**/*.test.jsx"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/belikely-united/lerret.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://lerret.belikely.com",
+  "bugs": {
+    "url": "https://github.com/belikely-united/lerret/issues"
+  },
+  "keywords": [
+    "lerret",
+    "design-canvas",
+    "design-tool",
+    "react",
+    "vite",
+    "cli",
+    "local-first"
+  ],
+  "dependencies": {
+    "@vitejs/plugin-react": "^6.0.2",
+    "chokidar": "^5.0.0",
+    "playwright-core": "^1.60.0",
+    "vite": "^8.0.0",
+    "@lerret/core": "^0.1.0"
+  },
+  "devDependencies": {
+    "vitest": "^4.1.6"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "build": "pnpm --filter @lerret/studio build:cli && node scripts/bundle-studio.js"
+  }
+}