@nuraly/lumenjs 0.1.3 → 0.2.0

package/dist/dev-server/plugins/vite-plugin-routes.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { dirToLayoutTagName, fileHasLoader, fileHasSubscribe, filePathToRoute, filePathToTagName } from '../../shared/utils.js';
+import { dirToLayoutTagName, fileHasLoader, fileHasSubscribe, fileHasSocket, fileHasAuth, fileHasMeta, fileHasStandalone, filePathToRoute, filePathToTagName } from '../../shared/utils.js';
 const VIRTUAL_MODULE_ID = 'virtual:lumenjs-routes';
 const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
 /**
@@ -28,7 +28,7 @@ export function lumenRoutesPlugin(pagesDir) {
                 const tagName = dirToLayoutTagName(relativePath);
                 layouts.push({ dir: relativePath.replace(/\\/g, '/'), filePath, tagName });
             }
-            if (entry.isDirectory()) {
+            if (entry.isDirectory() && !entry.name.startsWith('_')) {
                 walkForLayouts(baseDir, path.join(relativePath, entry.name), layouts);
             }
         }
@@ -55,12 +55,18 @@ export function lumenRoutesPlugin(pagesDir) {
     function walkDir(baseDir, relativePath, routes) {
         const fullDir = path.join(baseDir, relativePath);
         const entries = fs.readdirSync(fullDir, { withFileTypes: true });
+        // Check if this subdirectory contains an index file (folder route)
+        // Only applies to subdirectories, not the root pages directory
+        const hasIndex = relativePath !== '' && entries.some(e => e.isFile() && /^index\.(ts|js)$/.test(e.name));
         for (const entry of entries) {
             const entryRelative = path.join(relativePath, entry.name);
-            if (entry.isDirectory()) {
+            if (entry.isDirectory() && !entry.name.startsWith('_')) {
                 walkDir(baseDir, entryRelative, routes);
             }
             else if (entry.isFile() && /\.(ts|js)$/.test(entry.name) && !entry.name.startsWith('_')) {
+                // In a folder route (has index file), only register the index file and dynamic param files
+                if (hasIndex && !/^index\.(ts|js)$/.test(entry.name) && !entry.name.startsWith('['))
+                    continue;
                 const routePath = filePathToRoute(entryRelative);
                 const componentPath = path.join(pagesDir, entryRelative);
                 const tagName = filePathToTagName(entryRelative);
@@ -99,8 +105,13 @@ export function lumenRoutesPlugin(pagesDir) {
                     .map(r => {
                     const hasLoader = fileHasLoader(r.componentPath);
                     const hasSubscribe = fileHasSubscribe(r.componentPath);
+                    const hasSocketFlag = fileHasSocket(r.componentPath);
+                    const hasAuth = fileHasAuth(r.componentPath);
+                    const hasMeta = fileHasMeta(r.componentPath);
+                    const isStandalone = fileHasStandalone(r.componentPath);
                     const componentPath = r.componentPath.replace(/\\/g, '/');
-                    const chain = getLayoutChain(r.componentPath, layouts);
+                    // Standalone pages skip all layouts
+                    const chain = isStandalone ? [] : getLayoutChain(r.componentPath, layouts);
                     let layoutsStr = '';
                     if (chain.length > 0) {
                         const items = chain.map(l => {
@@ -111,7 +122,7 @@ export function lumenRoutesPlugin(pagesDir) {
                         });
                         layoutsStr = `, layouts: [${items.join(', ')}]`;
                     }
-                    return `  { path: ${JSON.stringify(r.path)}, tagName: ${JSON.stringify(r.tagName)}${hasLoader ? ', hasLoader: true' : ''}${hasSubscribe ? ', hasSubscribe: true' : ''}, load: () => import('${componentPath}')${layoutsStr} }`;
+                    return `  { path: ${JSON.stringify(r.path)}, tagName: ${JSON.stringify(r.tagName)}${hasLoader ? ', hasLoader: true' : ''}${hasSubscribe ? ', hasSubscribe: true' : ''}${hasSocketFlag ? ', hasSocket: true' : ''}${hasMeta ? ', hasMeta: true' : ''}${hasAuth ? ', __nk_has_auth: true' : ''}, load: () => import('${componentPath}')${layoutsStr} }`;
                 })
                     .join(',\n');
                 return `export const routes = [\n${routeArray}\n];\n`;

package/dist/dev-server/plugins/vite-plugin-socketio.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'vite';
+export declare function lumenSocketIOPlugin(pagesDir: string): Plugin;

package/dist/dev-server/plugins/vite-plugin-socketio.js

@@ -0,0 +1,51 @@
+import fs from 'fs';
+import path from 'path';
+import { fileHasSocket, filePathToRoute } from '../../shared/utils.js';
+export function lumenSocketIOPlugin(pagesDir) {
+    return {
+        name: 'lumenjs-socketio',
+        configureServer(server) {
+            if (!server.httpServer)
+                return;
+            import('../../shared/socket-io-setup.js').then(({ setupSocketIO }) => {
+                const routes = scanSocketRoutes(pagesDir);
+                setupSocketIO({
+                    httpServer: server.httpServer,
+                    loadModule: (fp) => server.ssrLoadModule(fp),
+                    routes,
+                    projectDir: path.dirname(pagesDir),
+                }).catch((err) => {
+                    console.warn('[LumenJS] Socket.IO setup failed:', err.message);
+                    console.warn('[LumenJS] Make sure socket.io is installed: lumenjs add socketio');
+                });
+            }).catch((err) => {
+                console.warn('[LumenJS] Socket.IO plugin load failed:', err.message);
+            });
+        },
+    };
+}
+function scanSocketRoutes(pagesDir) {
+    const routes = [];
+    if (!fs.existsSync(pagesDir))
+        return routes;
+    walkDir(pagesDir, '', routes, pagesDir);
+    return routes;
+}
+function walkDir(baseDir, relativePath, routes, pagesDir) {
+    const fullDir = path.join(baseDir, relativePath);
+    const entries = fs.readdirSync(fullDir, { withFileTypes: true });
+    for (const entry of entries) {
+        const entryRelative = path.join(relativePath, entry.name);
+        if (entry.isDirectory()) {
+            walkDir(baseDir, entryRelative, routes, pagesDir);
+        }
+        else if (entry.isFile() && /\.(ts|js)$/.test(entry.name) && !entry.name.startsWith('_')) {
+            const filePath = path.join(pagesDir, entryRelative);
+            const hasSocket = fileHasSocket(filePath);
+            if (hasSocket) {
+                const routePath = filePathToRoute(entryRelative);
+                routes.push({ path: routePath, hasSocket: true, filePath });
+            }
+        }
+    }
+}

package/dist/dev-server/plugins/vite-plugin-source-annotator.d.ts

@@ -1,5 +1,7 @@
 import { Plugin } from 'vite';
 /**
  * In editor mode, inject data-nk-source attributes into html`` template literals.
+ * Reads the original source file from disk to compute correct line numbers,
+ * since Vite's transform hook receives esbuild-compiled code with shifted lines.
  */
 export declare function sourceAnnotatorPlugin(projectDir: string): Plugin;

package/dist/dev-server/plugins/vite-plugin-source-annotator.js

@@ -1,21 +1,44 @@
 import path from 'path';
+import fs from 'fs';
 /**
  * In editor mode, inject data-nk-source attributes into html`` template literals.
+ * Reads the original source file from disk to compute correct line numbers,
+ * since Vite's transform hook receives esbuild-compiled code with shifted lines.
  */
 export function sourceAnnotatorPlugin(projectDir) {
     return {
         name: 'lumenjs-source-annotator',
+        enforce: 'pre',
         transform(code, id) {
             if (!id.startsWith(projectDir) || !id.endsWith('.ts'))
                 return;
             if (!code.includes('html`'))
                 return;
+            // Read the original source to get correct line numbers
+            let originalSource;
+            try {
+                originalSource = fs.readFileSync(id, 'utf-8');
+            }
+            catch {
+                originalSource = code;
+            }
             const relativePath = path.relative(projectDir, id);
+            // Build ordered list of html` base lines from original source
+            const originalBaseLines = [];
+            const origRegex = /html`/g;
+            let origMatch;
+            while ((origMatch = origRegex.exec(originalSource)) !== null) {
+                const before = originalSource.substring(0, origMatch.index + 5); // include 'html`'
+                originalBaseLines.push(before.split('\n').length);
+            }
+            let templateIndex = 0;
             const transformed = code.replace(/html`([\s\S]*?)`/g, (match, templateContent) => {
                 let offset = 0;
-                const beforeTemplate = code.substring(0, code.indexOf(match));
-                const baseLine = beforeTemplate.split('\n').length;
-                const annotated = templateContent.replace(/<([a-z][a-z0-9]*-[a-z0-9-]*)([\s>])/gi, (tagMatch, tagName, after) => {
+                // Use original source line for this Nth html` template
+                const baseLine = originalBaseLines[templateIndex] ?? code.substring(0, code.indexOf(match)).split('\n').length;
+                templateIndex++;
+                // Annotate both custom elements (tags with hyphens) and standard HTML elements
+                const annotated = templateContent.replace(/<((?:[a-z][a-z0-9]*-[a-z0-9-]*)|(?:div|section|article|aside|main|nav|header|footer|h[1-6]|p|span|a|ul|ol|li|button|form|input|textarea|select|label|img|table|tr|td|th|thead|tbody))([\s>])/gi, (tagMatch, tagName, after) => {
                     const beforeTag = templateContent.substring(0, templateContent.indexOf(tagMatch, offset));
                     const lineInTemplate = beforeTag.split('\n').length - 1;
                     offset = templateContent.indexOf(tagMatch, offset) + tagMatch.length;

package/dist/dev-server/plugins/vite-plugin-storage.d.ts

@@ -0,0 +1,10 @@
+import type { Plugin } from 'vite';
+/**
+ * LumenJS storage plugin (dev mode).
+ *
+ * - Creates a LocalStorageAdapter pointing to `{projectDir}/uploads`
+ * - Registers it as the global storage singleton (`useStorage()`)
+ * - Serves uploaded files at `/uploads/*`
+ * - Handles presigned PUT requests at `/__nk_storage/upload/:token`
+ */
+export declare function lumenStoragePlugin(projectDir: string): Plugin;

package/dist/dev-server/plugins/vite-plugin-storage.js

@@ -0,0 +1,126 @@
+import path from 'path';
+import fs from 'fs';
+import { LocalStorageAdapter } from '../../storage/adapters/local.js';
+import { setStorage } from '../../storage/index.js';
+/**
+ * LumenJS storage plugin (dev mode).
+ *
+ * - Creates a LocalStorageAdapter pointing to `{projectDir}/uploads`
+ * - Registers it as the global storage singleton (`useStorage()`)
+ * - Serves uploaded files at `/uploads/*`
+ * - Handles presigned PUT requests at `/__nk_storage/upload/:token`
+ */
+export function lumenStoragePlugin(projectDir) {
+    const uploadDir = path.join(projectDir, 'uploads');
+    const adapter = new LocalStorageAdapter({ uploadDir, publicPath: '/uploads' });
+    // Register global singleton so API routes and communication handlers can use it
+    setStorage(adapter);
+    return {
+        name: 'lumenjs-storage',
+        configureServer(server) {
+            // ── Presigned upload endpoint ──────────────────────────────
+            // Client sends a PUT to /__nk_storage/upload/:token with the (possibly
+            // encrypted) file body. The token was issued via adapter.presignPut().
+            server.middlewares.use('/__nk_storage/upload', async (req, res, next) => {
+                if (req.method !== 'PUT')
+                    return next();
+                const token = req.url?.replace(/^\//, '').split('?')[0];
+                if (!token) {
+                    res.statusCode = 400;
+                    res.end(JSON.stringify({ error: 'missing token' }));
+                    return;
+                }
+                const pending = adapter.consumeUpload(token);
+                if (!pending) {
+                    res.statusCode = 410; // Gone — expired or unknown token
+                    res.setHeader('Content-Type', 'application/json');
+                    res.end(JSON.stringify({ error: 'upload token expired or invalid' }));
+                    return;
+                }
+                // Read raw body with streaming size enforcement
+                const MAX_UPLOAD = pending.maxSize || 50 * 1024 * 1024; // 50MB default cap
+                const chunks = [];
+                let uploadSize = 0;
+                let aborted = false;
+                req.on('data', (c) => {
+                    uploadSize += c.length;
+                    if (uploadSize > MAX_UPLOAD) {
+                        aborted = true;
+                        req.destroy();
+                        res.statusCode = 413;
+                        res.setHeader('Content-Type', 'application/json');
+                        res.end(JSON.stringify({ error: 'file_too_large', maxSize: MAX_UPLOAD, received: uploadSize }));
+                        return;
+                    }
+                    chunks.push(c);
+                });
+                await new Promise((resolve, reject) => {
+                    req.on('end', resolve);
+                    req.on('error', reject);
+                });
+                if (aborted)
+                    return;
+                const body = Buffer.concat(chunks);
+                // Enforce maxSize if specified (redundant safety check)
+                if (pending.maxSize && body.length > pending.maxSize) {
+                    res.statusCode = 413;
+                    res.setHeader('Content-Type', 'application/json');
+                    res.end(JSON.stringify({
+                        error: `file_too_large`,
+                        maxSize: pending.maxSize,
+                        received: body.length,
+                    }));
+                    return;
+                }
+                // Write to disk (validate path stays within uploadDir)
+                const filePath = path.resolve(uploadDir, pending.key);
+                if (!filePath.startsWith(uploadDir + path.sep) && filePath !== uploadDir) {
+                    res.statusCode = 400;
+                    res.setHeader('Content-Type', 'application/json');
+                    res.end(JSON.stringify({ error: 'invalid storage key' }));
+                    return;
+                }
+                fs.mkdirSync(path.dirname(filePath), { recursive: true });
+                fs.writeFileSync(filePath, body);
+                res.statusCode = 200;
+                res.setHeader('Content-Type', 'application/json');
+                res.end(JSON.stringify({
+                    key: pending.key,
+                    url: adapter.publicUrl(pending.key),
+                    size: body.length,
+                }));
+            });
+            // ── Static file serving ────────────────────────────────────
+            // Serve files from uploadDir at /uploads/*
+            server.middlewares.use('/uploads', (req, res, next) => {
+                if (req.method !== 'GET' && req.method !== 'HEAD')
+                    return next();
+                const filePath = path.resolve(uploadDir, (req.url?.split('?')[0] ?? '/').replace(/^\/+/, ''));
+                if (!filePath.startsWith(uploadDir + path.sep) && filePath !== uploadDir) {
+                    return next();
+                }
+                if (!fs.existsSync(filePath) || fs.statSync(filePath).isDirectory()) {
+                    return next();
+                }
+                const ext = path.extname(filePath).toLowerCase();
+                const mimeTypes = {
+                    '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.png': 'image/png',
+                    '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml',
+                    '.mp4': 'video/mp4', '.webm': 'video/webm', '.mp3': 'audio/mpeg',
+                    '.pdf': 'application/pdf', '.json': 'application/json',
+                    '.txt': 'text/plain', '.bin': 'application/octet-stream',
+                };
+                const contentType = mimeTypes[ext] ?? 'application/octet-stream';
+                const stat = fs.statSync(filePath);
+                res.setHeader('Content-Type', contentType);
+                res.setHeader('Content-Length', stat.size);
+                res.setHeader('Cache-Control', 'no-cache');
+                if (req.method === 'HEAD') {
+                    res.end();
+                    return;
+                }
+                fs.createReadStream(filePath).pipe(res);
+            });
+        },
+    };
+}

package/dist/dev-server/plugins/vite-plugin-virtual-modules.js

@@ -15,16 +15,49 @@ export function virtualModulesPlugin(runtimeDir, editorDir) {
         'router-data': 'router-data.js',
         'router-hydration': 'router-hydration.js',
         'i18n': 'i18n.js',
+        'auth': 'auth.js',
+        'communication': 'communication.js',
+        'webrtc': 'webrtc.js',
+        'error-boundary': 'error-boundary.js',
+        'island': 'island.js',
+        'hydrate-support': '__virtual__',
     };
     // Modules resolved via resolve.alias instead of virtual module.
     // They still appear in the map so relative import rewrites work.
-    const aliasedModules = new Set(['i18n']);
+    const aliasedModules = new Set(['i18n', 'auth', 'communication', 'webrtc']);
     const editorModules = {
         'editor-bridge': 'editor-bridge.js',
         'element-annotator': 'element-annotator.js',
         'click-select': 'click-select.js',
         'hover-detect': 'hover-detect.js',
         'inline-text-edit': 'inline-text-edit.js',
+        'editor-api-client': 'editor-api-client.js',
+        'standalone-overlay': 'standalone-overlay.js',
+        'standalone-overlay-dom': 'standalone-overlay-dom.js',
+        'standalone-overlay-styles': 'standalone-overlay-styles.js',
+        'standalone-file-panel': 'standalone-file-panel.js',
+        'overlay-utils': 'overlay-utils.js',
+        'overlay-events': 'overlay-events.js',
+        'overlay-hmr': 'overlay-hmr.js',
+        'overlay-selection': 'overlay-selection.js',
+        'text-toolbar': 'text-toolbar.js',
+        'toolbar-styles': 'toolbar-styles.js',
+        'editor-toolbar': 'editor-toolbar.js',
+        'css-rules': 'css-rules.js',
+        'ast-modification': 'ast-modification.js',
+        'ast-service': 'ast-service.js',
+        'file-service': 'file-service.js',
+        'file-editor': 'file-editor.js',
+        'syntax-highlighter': 'syntax-highlighter.js',
+        'property-registry': 'property-registry.js',
+        'properties-panel': 'properties-panel.js',
+        'properties-panel-persist': 'properties-panel-persist.js',
+        'properties-panel-rows': 'properties-panel-rows.js',
+        'properties-panel-styles': 'properties-panel-styles.js',
+        'i18n-key-gen': 'i18n-key-gen.js',
+        'ai-chat-panel': 'ai-chat-panel.js',
+        'ai-project-panel': 'ai-project-panel.js',
+        'ai-markdown': 'ai-markdown.js',
     };
     function rewriteRelativeImports(code, modules) {
         for (const name of Object.keys(modules)) {
@@ -32,14 +65,26 @@ export function virtualModulesPlugin(runtimeDir, editorDir) {
             // Aliased modules use @lumenjs/name (resolved by Vite alias).
             // Virtual modules use /@lumenjs/name (resolved by this plugin).
             const prefix = aliasedModules.has(name) ? '@lumenjs' : '/@lumenjs';
-            code = code.replace(new RegExp(`from\\s+['"]\\.\\/${file.replace('.', '\\.')}['"]`, 'g'), `from '${prefix}/${name}'`);
+            const escaped = file.replace('.', '\\.');
+            // Rewrite `from './file.js'`
+            code = code.replace(new RegExp(`from\\s+['"]\\.\\/${escaped}['"]`, 'g'), `from '${prefix}/${name}'`);
+            // Rewrite side-effect `import './file.js'`
+            code = code.replace(new RegExp(`import\\s+['"]\\.\\/${escaped}['"]`, 'g'), `import '${prefix}/${name}'`);
         }
         return code;
     }
+    let viteBase = '/';
     return {
         name: 'lumenjs-virtual-modules',
         enforce: 'pre',
+        configResolved(config) {
+            viteBase = config.base || '/';
+        },
         resolveId(id) {
+            // Strip Vite base prefix if present (e.g. /__app_dev/{id}/@lumenjs/foo → /@lumenjs/foo)
+            if (viteBase !== '/' && id.startsWith(viteBase)) {
+                id = '/' + id.slice(viteBase.length);
+            }
             const match = id.match(/^\/@lumenjs\/(.+)$/);
             if (!match)
                 return;
@@ -55,8 +100,100 @@ export function virtualModulesPlugin(runtimeDir, editorDir) {
             if (!id.startsWith('\0lumenjs:'))
                 return;
             const name = id.slice('\0lumenjs:'.length);
+            if (name === 'hydrate-support') {
+                // Custom hydrate support that catches digest mismatch errors and falls
+                // back to CSR instead of leaving double-rendered content.
+                // The stock @lit-labs/ssr-client/lit-element-hydrate-support.js throws
+                // on digest mismatch, sets _$AG=false before throwing, so the next
+                // update() appends fresh render alongside stale SSR content.
+                return `
+import { render } from 'lit-html';
+import { hydrate } from '@lit-labs/ssr-client';
+
+globalThis.litElementHydrateSupport = ({LitElement}) => {
+  const observedGet = Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(LitElement), 'observedAttributes'
+  ).get;
+  Object.defineProperty(LitElement, 'observedAttributes', {
+    get() { return [...observedGet.call(this), 'defer-hydration']; }
+  });
+
+  const origAttrChanged = LitElement.prototype.attributeChangedCallback;
+  LitElement.prototype.attributeChangedCallback = function(name, old, value) {
+    if (name === 'defer-hydration' && value === null) {
+      origConnected.call(this);
+    }
+    origAttrChanged.call(this, name, old, value);
+  };
+
+  const origConnected = LitElement.prototype.connectedCallback;
+  LitElement.prototype.connectedCallback = function() {
+    if (!this.hasAttribute('defer-hydration')) origConnected.call(this);
+  };
+
+  function adoptElementStyles(el) {
+    const styles = el.constructor.elementStyles;
+    if (styles?.length && el.renderRoot instanceof ShadowRoot) {
+      el.renderRoot.adoptedStyleSheets = styles.map(
+        s => s instanceof CSSStyleSheet ? s : s.styleSheet
+      );
+    }
+  }
+
+  const origCreateRoot = LitElement.prototype.createRenderRoot;
+  LitElement.prototype.createRenderRoot = function() {
+    if (this.shadowRoot) {
+      this._$AG = true;
+      // Adopt styles that SSR declarative shadow roots don't include
+      adoptElementStyles(this);
+      return this.shadowRoot;
+    }
+    return origCreateRoot.call(this);
+  };
+
+  const superUpdate = Object.getPrototypeOf(LitElement.prototype).update;
+  LitElement.prototype.update = function(changedProps) {
+    const value = this.render();
+    superUpdate.call(this, changedProps);
+    if (this._$AG) {
+      this._$AG = false;
+      for (const attr of this.getAttributeNames()) {
+        if (attr.startsWith('hydrate-internals-')) {
+          this.removeAttribute(attr.slice(18));
+          this.removeAttribute(attr);
+        }
+      }
+      try {
+        hydrate(value, this.renderRoot, this.renderOptions);
+      } catch (err) {
+        // Digest mismatch — re-render fresh but avoid visible flash
+        console.warn('[LumenJS] Hydration mismatch for <' + this.localName + '>, falling back to CSR');
+        const root = this.renderRoot;
+        // Preserve adopted styles so content is never unstyled
+        adoptElementStyles(this);
+        // Remove only non-style children to keep styles applied during re-render
+        const toRemove = [];
+        for (let c = root.firstChild; c; c = c.nextSibling) {
+          if (c.nodeName !== 'STYLE') toRemove.push(c);
+        }
+        toRemove.forEach(c => root.removeChild(c));
+        delete root._$litPart$;
+        render(value, root, this.renderOptions);
+      }
+    } else {
+      render(value, this.renderRoot, this.renderOptions);
+    }
+  };
+};
+`;
+            }
             if (runtimeModules[name]) {
-                const code = fs.readFileSync(path.join(runtimeDir, runtimeModules[name]), 'utf-8');
+                let code = fs.readFileSync(path.join(runtimeDir, runtimeModules[name]), 'utf-8');
+                // Prepend hydrate support to app-shell so all Lit imports share one module graph.
+                // Uses our custom hydrate-support virtual module (with CSR fallback) instead of stock.
+                if (name === 'app-shell') {
+                    code = `import '/@lumenjs/hydrate-support';\n` + code;
+                }
                 return rewriteRelativeImports(code, runtimeModules);
             }
             if (editorModules[name]) {