npm - juxscript - Versions diffs - 1.0.0 - Mend

juxscript 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/README.md +292 -0
package/bin/cli.js +149 -0
package/lib/adapters/base-adapter.js +35 -0
package/lib/adapters/index.js +33 -0
package/lib/adapters/mysql-adapter.js +65 -0
package/lib/adapters/postgres-adapter.js +70 -0
package/lib/adapters/sqlite-adapter.js +56 -0
package/lib/components/app.ts +124 -0
package/lib/components/button.ts +136 -0
package/lib/components/card.ts +205 -0
package/lib/components/chart.ts +125 -0
package/lib/components/code.ts +242 -0
package/lib/components/container.ts +282 -0
package/lib/components/data.ts +105 -0
package/lib/components/docs-data.json +1211 -0
package/lib/components/error-handler.ts +285 -0
package/lib/components/footer.ts +146 -0
package/lib/components/header.ts +167 -0
package/lib/components/hero.ts +170 -0
package/lib/components/import.ts +430 -0
package/lib/components/input.ts +175 -0
package/lib/components/layout.ts +113 -0
package/lib/components/list.ts +392 -0
package/lib/components/main.ts +111 -0
package/lib/components/menu.ts +170 -0
package/lib/components/modal.ts +216 -0
package/lib/components/nav.ts +136 -0
package/lib/components/node.ts +200 -0
package/lib/components/reactivity.js +104 -0
package/lib/components/script.ts +152 -0
package/lib/components/sidebar.ts +168 -0
package/lib/components/style.ts +129 -0
package/lib/components/table.ts +279 -0
package/lib/components/tabs.ts +191 -0
package/lib/components/theme.ts +97 -0
package/lib/components/view.ts +174 -0
package/lib/jux.ts +203 -0
package/lib/layouts/default.css +260 -0
package/lib/layouts/default.jux +8 -0
package/lib/layouts/figma.css +334 -0
package/lib/layouts/figma.jux +0 -0
package/lib/layouts/notion.css +258 -0
package/lib/styles/base-theme.css +186 -0
package/lib/styles/dark-theme.css +144 -0
package/lib/styles/global.css +1131 -0
package/lib/styles/light-theme.css +144 -0
package/lib/styles/tokens/dark.css +86 -0
package/lib/styles/tokens/light.css +86 -0
package/lib/themes/dark.css +86 -0
package/lib/themes/light.css +86 -0
package/lib/utils/path-resolver.js +23 -0
package/machinery/compiler.js +262 -0
package/machinery/doc-generator.js +160 -0
package/machinery/generators/css.js +128 -0
package/machinery/generators/html.js +108 -0
package/machinery/imports.js +155 -0
package/machinery/server.js +185 -0
package/machinery/validators/file-validator.js +123 -0
package/machinery/watcher.js +148 -0
package/package.json +58 -0
package/types/globals.d.ts +16 -0

package/machinery/compiler.js ADDED Viewed

@@ -0,0 +1,262 @@
+import fs from 'fs';
+import path from 'path';
+import esbuild from 'esbuild';
+import { generateDocs } from './doc-generator.js';
+export async function compileJuxFile(juxFilePath, options = {}) {
+  const { distDir, projectRoot, isServe = false } = options;
+  const relativePath = path.relative(projectRoot, juxFilePath);
+  const parsedPath = path.parse(relativePath);
+  // Output paths
+  const outputDir = path.join(distDir, parsedPath.dir);
+  const jsOutputPath = path.join(outputDir, `${parsedPath.name}.js`);
+  const htmlOutputPath = path.join(outputDir, `${parsedPath.name}.html`);
+  // Ensure output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+  console.log(`📝 Compiling: ${relativePath}`);
+  // Read the .jux file
+  const juxContent = fs.readFileSync(juxFilePath, 'utf-8');
+  // Calculate depth for relative paths
+  const depth = parsedPath.dir.split(path.sep).filter(p => p).length;
+  const libPath = depth === 0 ? './lib/jux.js' : '../'.repeat(depth) + 'lib/jux.js';
+  const styleBasePath = depth === 0 ? './lib/styles/' : '../'.repeat(depth) + 'lib/styles/';
+  // Transform imports
+  let transformedContent = juxContent;
+  // Replace common import patterns with calculated path
+  transformedContent = transformedContent.replace(
+    /from\s+['"]\.\.?\/lib\/jux\.js['"]/g,
+    `from '${libPath}'`
+  );
+  // Only inject import if:
+  // 1. File is not empty (ignoring whitespace and comments)
+  // 2. File uses 'jux.' but has no import statement
+  const contentWithoutComments = transformedContent
+    .replace(/\/\*[\s\S]*?\*\//g, '') // Remove block comments
+    .replace(/\/\/.*/g, '')             // Remove line comments
+    .trim();
+  const hasContent = contentWithoutComments.length > 0;
+  const usesJux = /\bjux\./g.test(contentWithoutComments);
+  const hasImport = /import\s+.*from/.test(transformedContent);
+  if (hasContent && usesJux && !hasImport) {
+    transformedContent = `import { jux } from '${libPath}';\n\n${transformedContent}`;
+  }
+  // Write the transformed JS
+  fs.writeFileSync(jsOutputPath, transformedContent);
+  console.log(`  ✓ JS: ${path.relative(projectRoot, jsOutputPath)}`);
+  // Generate HTML with correct script path
+  const scriptPath = `./${parsedPath.name}.js`;
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${parsedPath.name}</title>
+  <!-- JUX Core Styles -->
+  <link rel="stylesheet" href="${styleBasePath}tokens/dark.css">
+  <link rel="stylesheet" href="${styleBasePath}global.css">
+</head>
+<body data-theme="dark">
+  <!-- App container -->
+  <div id="app" data-jux-page="${parsedPath.name}"></div>
+  <!-- Main content -->
+  <div id="appmain"></div>
+  <!-- Modal overlay -->
+  <div id="appmodal" aria-hidden="true" role="dialog"></div>
+  <script type="module" src="${scriptPath}"></script>
+  ${isServe ? `
+  <!-- Hot reload -->
+  <script type="module">
+    const ws = new WebSocket('ws://localhost:3001');
+    ws.onmessage = (msg) => {
+      const data = JSON.parse(msg.data);
+      if (data.type === 'reload') {
+        console.log('🔄 Reloading page...');
+        location.reload();
+      }
+    };
+    ws.onerror = () => console.warn('⚠️  WebSocket connection failed');
+  </script>
+  ` : ''}
+</body>
+</html>`;
+  fs.writeFileSync(htmlOutputPath, html);
+  console.log(`  ✓ HTML: ${path.relative(projectRoot, htmlOutputPath)}`);
+  return { jsOutputPath, htmlOutputPath };
+}
+export async function copyLibToOutput(projectRoot, distDir) {
+  // Simplified lib path resolution
+  const libSrc = path.resolve(projectRoot, '../lib');
+  if (!fs.existsSync(libSrc)) {
+    throw new Error(`lib/ directory not found at ${libSrc}`);
+  }
+  const libDest = path.join(distDir, 'lib');
+  console.log('📦 Building TypeScript library...');
+  console.log(`   From: ${libSrc}`);
+  console.log(`   To: ${libDest}`);
+  if (fs.existsSync(libDest)) {
+    fs.rmSync(libDest, { recursive: true });
+  }
+  fs.mkdirSync(libDest, { recursive: true });
+  // Find all TypeScript entry points
+  const tsFiles = findFiles(libSrc, '.ts');
+  if (tsFiles.length === 0) {
+    console.warn('⚠️  No TypeScript files found in lib/');
+    return;
+  }
+  console.log(`   Found ${tsFiles.length} TypeScript files`);
+  // Build all TypeScript files with esbuild
+  try {
+    await esbuild.build({
+      entryPoints: tsFiles,
+      bundle: false,
+      format: 'esm',
+      outdir: libDest,
+      outbase: libSrc,
+      platform: 'browser',
+      target: 'es2020',
+      loader: {
+        '.ts': 'ts'
+      },
+      logLevel: 'warning'
+    });
+    console.log('   ✓ TypeScript compiled to JavaScript');
+    // Copy non-TS files (CSS, HTML, etc.)
+    console.log('   Copying lib assets...');
+    copyNonTsFiles(libSrc, libDest);
+    console.log('   ✓ Lib assets copied');
+  } catch (err) {
+    console.error('❌ Failed to build TypeScript:', err.message);
+    throw err;
+  }
+  console.log('✅ Library ready\n');
+}
+export async function copyProjectAssets(projectRoot, distDir) {
+  console.log('📦 Copying project assets...');
+  // Find all CSS and JS files in project root (excluding node_modules, dist, .git)
+  const allFiles = [];
+  findProjectFiles(projectRoot, ['.css', '.js'], allFiles, projectRoot);
+  console.log(`   Found ${allFiles.length} asset file(s)`);
+  for (const srcPath of allFiles) {
+    const relativePath = path.relative(projectRoot, srcPath);
+    const destPath = path.join(distDir, relativePath);
+    const destDir = path.dirname(destPath);
+    // Create destination directory if needed
+    if (!fs.existsSync(destDir)) {
+      fs.mkdirSync(destDir, { recursive: true });
+    }
+    // Copy file
+    fs.copyFileSync(srcPath, destPath);
+    console.log(`   ✓ ${relativePath}`);
+  }
+  console.log('✅ Project assets copied\n');
+}
+function findFiles(dir, extension, fileList = []) {
+  const files = fs.readdirSync(dir);
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+    if (stat.isDirectory()) {
+      findFiles(filePath, extension, fileList);
+    } else if (file.endsWith(extension)) {
+      fileList.push(filePath);
+    }
+  });
+  return fileList;
+}
+function copyNonTsFiles(src, dest) {
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      if (!fs.existsSync(destPath)) {
+        fs.mkdirSync(destPath, { recursive: true });
+      }
+      copyNonTsFiles(srcPath, destPath);
+    } else if (entry.isFile()) {
+      const ext = path.extname(entry.name);
+      // Copy CSS, JSON, and JS files (but not .ts files)
+      if (ext === '.css' || ext === '.json' || (ext === '.js' && !srcPath.endsWith('.ts'))) {
+        fs.copyFileSync(srcPath, destPath);
+        console.log(`  → Copied: ${path.relative(src, srcPath)}`);
+      }
+    }
+  }
+}
+function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, excludeDirs = ['node_modules', 'dist', '.git', 'lib']) {
+  if (!fs.existsSync(dir)) return fileList;
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      // Skip excluded directories
+      if (excludeDirs.includes(entry.name)) {
+        continue;
+      }
+      findProjectFiles(fullPath, extensions, fileList, rootDir, excludeDirs);
+    } else {
+      // Check if file has one of the desired extensions
+      const hasExtension = extensions.some(ext => entry.name.endsWith(ext));
+      if (hasExtension) {
+        fileList.push(fullPath);
+      }
+    }
+  }
+  return fileList;
+}

package/machinery/doc-generator.js ADDED Viewed

@@ -0,0 +1,160 @@
+import fs from 'fs';
+import path from 'path';
+import { glob } from 'glob';
+/**
+ * Generate documentation from TypeScript component files
+ */
+export async function generateDocs(projectRoot) {
+  const libRoot = path.resolve(projectRoot, '../lib');
+  const componentsDir = path.join(libRoot, 'components');
+  console.log(`  Scanning: ${componentsDir}`);
+  // Find all component TypeScript files
+  const componentFiles = glob.sync('*.ts', {
+    cwd: componentsDir,
+    absolute: true,
+    ignore: ['reactivity.js', 'error-handler.ts', 'docs.ts']
+  });
+  console.log(`  Found ${componentFiles.length} component files`);
+  const components = [];
+  for (const filePath of componentFiles) {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const componentDoc = parseComponentFile(content, filePath);
+    if (componentDoc) {
+      components.push(componentDoc);
+      console.log(`    ✓ ${componentDoc.name}`);
+    }
+  }
+  // Sort by category and name
+  components.sort((a, b) => {
+    const categoryCompare = (a.category || 'ZZZ').localeCompare(b.category || 'ZZZ');
+    if (categoryCompare !== 0) return categoryCompare;
+    return a.name.localeCompare(b.name);
+  });
+  // Generate the docs data
+  const docsData = {
+    components,
+    version: '1.0.0',
+    lastUpdated: new Date().toISOString()
+  };
+  // Write to JSON file
+  const outputPath = path.join(componentsDir, 'docs-data.json');
+  fs.writeFileSync(outputPath, JSON.stringify(docsData, null, 2));
+  console.log(`  Generated: ${outputPath}`);
+  return docsData;
+}
+/**
+ * Parse a single component file
+ */
+function parseComponentFile(content, filePath) {
+  const fileName = path.basename(filePath, '.ts');
+  const className = fileName.charAt(0).toUpperCase() + fileName.slice(1);
+  // Extract category from file content or infer
+  const category = inferCategory(className, content);
+  // Extract description from class JSDoc
+  const descMatch = content.match(/\/\*\*\s*\n\s*\*\s*([^\n*]+)/);
+  const description = descMatch ? descMatch[1].trim() : `${className} component`;
+  // Extract constructor/factory pattern
+  const factoryMatch = content.match(/export function\s+\w+\(([^)]*)\)/);
+  const constructorSig = factoryMatch
+    ? `jux.${fileName}(${factoryMatch[1]})`
+    : `new ${className}()`;
+  // Extract fluent methods
+  const fluentMethods = extractFluentMethods(content, className);
+  // Extract usage example from JSDoc
+  const exampleMatch = content.match(/\*\s+Usage:\s*\n\s*\*\s+(.+?)(?:\n|$)/);
+  let example = exampleMatch
+    ? exampleMatch[1].trim()
+    : `jux.${fileName}('id').render()`;
+  return {
+    name: className,
+    category,
+    description,
+    constructor: constructorSig,
+    fluentMethods,
+    example
+  };
+}
+/**
+ * Extract fluent API methods from class
+ */
+function extractFluentMethods(content, className) {
+  const methods = [];
+  // Match method patterns: methodName(params): this
+  const methodRegex = /^\s*(\w+)\(([^)]*)\):\s*this\s*\{/gm;
+  let match;
+  while ((match = methodRegex.exec(content)) !== null) {
+    const methodName = match[1];
+    const params = match[2];
+    // Skip private methods and constructor
+    if (methodName.startsWith('_') || methodName === 'constructor') continue;
+    // Clean up params
+    const cleanParams = params
+      .split(',')
+      .map(p => {
+        const parts = p.trim().split(':');
+        return parts[0].trim();
+      })
+      .filter(p => p)
+      .join(', ');
+    methods.push({
+      name: methodName,
+      params: cleanParams ? `(${cleanParams})` : '()',
+      returns: 'this',
+      description: `Set ${methodName}`
+    });
+  }
+  // Also look for render methods
+  const renderMatch = content.match(/^\s*render\(([^)]*)\):\s*(\w+)/m);
+  if (renderMatch && !methods.find(m => m.name === 'render')) {
+    methods.push({
+      name: 'render',
+      params: renderMatch[1] ? `(${renderMatch[1]})` : '()',
+      returns: renderMatch[2],
+      description: 'Render component to DOM'
+    });
+  }
+  return methods;
+}
+/**
+ * Infer category from component name or content
+ */
+function inferCategory(name, content) {
+  const dataComponents = ['Table', 'List', 'Chart', 'Data'];
+  const coreComponents = ['App', 'Layout', 'Theme', 'Style', 'Script', 'Import'];
+  if (dataComponents.some(dc => name.includes(dc))) {
+    return 'Data Components';
+  }
+  if (coreComponents.includes(name)) {
+    return 'Core';
+  }
+  return 'UI Components';
+}

package/machinery/generators/css.js ADDED Viewed

@@ -0,0 +1,128 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import CleanCSS from 'clean-css';
+import { FileValidator } from '../validators/file-validator.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+/**
+ * Generates CSS content from Jux configuration
+ * Handles: global.css, themes, imports, styleImports, and styleInline blocks
+ */
+export function generateCSS(juxConfig, layoutParsed = null) {
+  const fileValidator = new FileValidator();
+  let cssOutput = '';
+  // 1. Add global.css (always first)
+  const globalCssPath = path.join(__dirname, '../../lib/global.css');
+  if (fs.existsSync(globalCssPath)) {
+    cssOutput += `/* Global Styles */\n`;
+    cssOutput += fs.readFileSync(globalCssPath, 'utf-8') + '\n\n';
+    console.log(`  ✓ Included global.css`);
+  }
+  // 2. Add theme CSS (layout theme first, then page theme if different)
+  const themesToLoad = [];
+  if (layoutParsed?.config?.theme) {
+    themesToLoad.push({ theme: layoutParsed.config.theme, source: 'layout' });
+  }
+  if (juxConfig.theme && juxConfig.theme !== layoutParsed?.config?.theme) {
+    themesToLoad.push({ theme: juxConfig.theme, source: 'page' });
+  }
+  for (const { theme, source } of themesToLoad) {
+    const themePath = path.join(__dirname, '../../lib/themes', `${theme}.css`);
+    if (fs.existsSync(themePath)) {
+      cssOutput += `/* Theme: ${theme} (${source}) */\n`;
+      cssOutput += fs.readFileSync(themePath, 'utf-8') + '\n\n';
+      console.log(`  ✓ Included theme: ${theme} (${source})`);
+    } else {
+      console.warn(`  ⚠️  Theme not found: ${theme}`);
+    }
+  }
+  // 3. Process @import directives (CSS files only from layout, then page)
+  const allImports = [
+    ...(layoutParsed?.config?.import || []),
+    ...(juxConfig.import || [])
+  ];
+  if (allImports.length > 0) {
+    const { categorized } = fileValidator.categorizeImports(allImports);
+    // Only process CSS files
+    for (const cssImport of categorized.css) {
+      const resolvedPath = path.join(__dirname, '../../', cssImport);
+      if (fs.existsSync(resolvedPath)) {
+        cssOutput += `/* Import: ${cssImport} */\n`;
+        cssOutput += fs.readFileSync(resolvedPath, 'utf-8') + '\n\n';
+        console.log(`  ✓ Included import: ${cssImport}`);
+      } else {
+        console.warn(`  ⚠️  Import not found: ${cssImport} (resolved to ${resolvedPath})`);
+      }
+    }
+    // Log skipped JS imports (will be handled in HTML)
+    if (categorized.js.length > 0) {
+      console.log(`  ℹ️  Skipped JS imports (will be added to HTML): ${categorized.js.length} file(s)`);
+    }
+  }
+  // 4. Process @style imports (CSS file references from layout, then page)
+  const allStyleImports = [
+    ...(layoutParsed?.config?.styleImports || []),
+    ...(juxConfig.styleImports || [])
+  ];
+  for (const styleImport of allStyleImports) {
+    // Handle URLs (CDN)
+    if (styleImport.startsWith('http://') || styleImport.startsWith('https://')) {
+      cssOutput += `/* External CSS: ${styleImport} */\n`;
+      cssOutput += `@import url('${styleImport}');\n\n`;
+      console.log(`  ✓ Added CDN import: ${styleImport}`);
+    } else {
+      // Handle local files
+      const resolvedPath = path.join(__dirname, '../../', styleImport);
+      if (fs.existsSync(resolvedPath)) {
+        cssOutput += `/* Style Import: ${styleImport} */\n`;
+        cssOutput += fs.readFileSync(resolvedPath, 'utf-8') + '\n\n';
+        console.log(`  ✓ Included style import: ${styleImport}`);
+      } else {
+        console.warn(`  ⚠️  Style import not found: ${styleImport} (resolved to ${resolvedPath})`);
+      }
+    }
+  }
+  // 5. Process inline @style blocks (layout first, then page)
+  const allInlineStyles = [
+    ...(layoutParsed?.config?.styleInline || []),
+    ...(juxConfig.styleInline || [])
+  ];
+  if (allInlineStyles.length > 0) {
+    cssOutput += `/* Inline Styles (${allInlineStyles.length} block(s)) */\n`;
+    allInlineStyles.forEach((styleBlock, index) => {
+      const source = index < (layoutParsed?.config?.styleInline?.length || 0) ? 'layout' : 'page';
+      try {
+        const validatedStyle = fileValidator.validateStyleContent(styleBlock, `inline block #${index + 1}`);
+        if (!fileValidator.isEmptyStyle(validatedStyle)) {
+          cssOutput += `/* Inline Block #${index + 1} (${source}) */\n`;
+          cssOutput += validatedStyle + '\n\n';
+        }
+      } catch (error) {
+        console.error(`  ❌ ${error.message}`);
+      }
+    });
+    console.log(`  ✓ Included ${allInlineStyles.length} inline style block(s)`);
+  }
+  return cssOutput.trim();
+}

package/machinery/generators/html.js ADDED Viewed

@@ -0,0 +1,108 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * Generates a simple HTML wrapper for a .jux file
+ * No directives, no parsing - just a clean HTML shell
+ */
+export function generateHTML(fileName, options = {}) {
+  const { fileDir = '.', pathPrefix = './', isServe = false } = options;
+  const prefix = pathPrefix;
+  // Page script path
+  const pageScriptPath = `${prefix}${fileName}.js`;
+  // Build app structure with semantic nodes
+  const appStructure = buildAppStructure(fileName);
+  // Hot reload script (only in serve mode)
+  const hotReloadScript = isServe ? `
+  <!-- Hot Reload -->
+  <script>
+    (function() {
+      const ws = new WebSocket('ws://' + location.host);
+      ws.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        if (data.type === 'reload') {
+          console.log('🔄 Reloading...');
+          location.reload();
+        }
+      };
+      ws.onclose = () => console.log('🔌 Hot reload disconnected');
+    })();
+  </script>` : '';
+  // Build complete HTML
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${fileName}</title>
+  <!-- JUX Core Styles -->
+  <link rel="stylesheet" href="${prefix}lib/styles/tokens/dark.css">
+  <link rel="stylesheet" href="${prefix}lib/styles/global.css">
+</head>
+<body data-theme="dark">
+${appStructure}
+  <!-- Page Script -->
+  <script type="module" src="${pageScriptPath}"></script>${hotReloadScript}
+</body>
+</html>`;
+  return html;
+}
+/**
+ * Build semantic app structure - Always includes all nodes
+ */
+function buildAppStructure(pageName) {
+  const page = pageName || 'index';
+  return `  <!-- App Container -->
+  <div id="app" data-jux-page="${page}">
+    <!-- Header -->
+    <header id="appheader">
+      <div id="appheader-logo"></div>
+      <nav id="appheader-nav"></nav>
+      <div id="appheader-actions"></div>
+    </header>
+    <!-- Subheader (breadcrumbs, tabs, etc.) -->
+    <div id="appsubheader">
+      <div id="appsubheader-breadcrumbs"></div>
+      <div id="appsubheader-tabs"></div>
+      <div id="appsubheader-actions"></div>
+    </div>
+    <!-- Sidebar -->
+    <aside id="appsidebar">
+      <div id="appsidebar-header"></div>
+      <div id="appsidebar-content"></div>
+      <div id="appsidebar-footer"></div>
+    </aside>
+    <!-- Main content area -->
+    <main id="appmain"></main>
+    <!-- Footer -->
+    <footer id="appfooter">
+      <div id="appfooter-content"></div>
+      <div id="appfooter-legal"></div>
+    </footer>
+  </div>
+  <!-- Modal overlay -->
+  <div id="appmodal" aria-hidden="true" role="dialog">
+    <div id="appmodal-backdrop"></div>
+    <div id="appmodal-container">
+      <button id="appmodal-close" aria-label="Close modal">&times;</button>
+      <header id="appmodal-header"></header>
+      <div id="appmodal-content"></div>
+      <footer id="appmodal-footer"></footer>
+    </div>
+  </div>`;
+}