@supportpages.io/wtfm 0.0.0-stage → 0.3.0

package/engine/detect-project/scripts/theme_overrides.js

@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+'use strict';
+
+/*
+ * theme_overrides.js — Given detection JSON + framework name, emit theme-aware
+ * CSS overrides (CSS custom properties + component class overrides) on stdout.
+ *
+ * When source compilation fails and we fall back to a framework CDN, the
+ * vanilla CDN doesn't know about the project's brand colours. This script
+ * generates the targeted overrides so things like .btn-primary, --bs-primary,
+ * and font-family settings render with the detected theme.
+ *
+ * Usage: node theme_overrides.js <detection_json> <framework>
+ *        — writes the override CSS to stdout
+ */
+
+const fs = require('fs');
+
+/** Python-style truthiness: empty strings, arrays and objects are false. */
+function truthy(value) {
+    if (Array.isArray(value)) return value.length > 0;
+    if (value !== null && typeof value === 'object') return Object.keys(value).length > 0;
+    return Boolean(value);
+}
+
+function orEmpty(value) {
+    return truthy(value) ? value : {};
+}
+
+function hexToRgb(hex) {
+    const h = String(hex).replace(/^#+/, '');
+    if (h.length !== 6) return [0, 0, 0];
+    // Throw on non-hex digits, as the caller treats a failed run as "no overrides".
+    return [0, 2, 4].map(i => {
+        const pair = h.slice(i, i + 2);
+        if (!/^[0-9a-fA-F]{2}$/.test(pair)) throw new Error(`invalid hex colour: ${hex}`);
+        return parseInt(pair, 16);
+    });
+}
+
+function isValid(value) {
+    return truthy(value) && value !== 'null' && value !== 'None';
+}
+
+function overrideCss(detect, framework) {
+    // Detection JSON may have theme tokens at the top level (skill convention)
+    // OR nested under theme_overrides (analyzer convention). Support both.
+    const overrides = detect.theme_overrides ?? {};
+    const colors = { ...orEmpty(overrides.colors) };
+    const custom = orEmpty(overrides.custom_colors);
+    const fonts = orEmpty(overrides.fonts);
+    const radius = overrides.border_radius;
+
+    // Skill-style fallback: pick up default_colors + scss_vars from top level
+    if (!truthy(colors)) {
+        const dc = orEmpty(detect.default_colors);
+        // Translate {primary, accent} → {primary, secondary}
+        if (truthy(dc.primary)) colors.primary = dc.primary;
+        if (truthy(dc.accent)) colors.secondary = dc.accent;
+        const sv = orEmpty(detect.scss_vars);
+        for (const key of ['success', 'danger', 'warning', 'info', 'body-color']) {
+            if (truthy(sv[key])) colors[key.replaceAll('-', '_')] = sv[key];
+        }
+    }
+
+    const bodyFont = fonts.body;
+    const headingFont = fonts.heading;
+    const lines = ['', '/* Theme overrides from project variables */', ':root {'];
+
+    if (framework === 'bootstrap') {
+        for (const [name, val] of Object.entries(colors)) {
+            if (!isValid(val)) continue;
+            const [r, g, b] = hexToRgb(val);
+            lines.push(`  --bs-${name}: ${val};`);
+            lines.push(`  --bs-${name}-rgb: ${r}, ${g}, ${b};`);
+        }
+        if (isValid(bodyFont)) lines.push(`  --bs-body-font-family: ${bodyFont};`);
+        if (isValid(headingFont)) lines.push(`  --bs-heading-font-family: ${headingFont};`);
+        if (isValid(radius)) lines.push(`  --bs-border-radius: ${radius};`);
+        lines.push('}');
+
+        for (const [name, val] of Object.entries(custom)) {
+            if (!isValid(val)) continue;
+            const safe = name.replaceAll('_', '-');
+            lines.push(`.text-${safe} { color: ${val} !important; }`);
+            lines.push(`.bg-${safe} { background-color: ${val} !important; }`);
+        }
+
+        const primary = colors.primary;
+        const secondary = colors.secondary;
+        if (isValid(primary)) {
+            lines.push(`.btn-primary { background-color: ${primary}; border-color: ${primary}; }`);
+            lines.push(`.btn-primary:hover { background-color: ${primary}; border-color: ${primary}; opacity: 0.9; }`);
+            lines.push(`.btn-outline-primary { color: ${primary}; border-color: ${primary}; }`);
+            lines.push(`.btn-outline-primary:hover { background-color: ${primary}; border-color: ${primary}; color: #fff; }`);
+            lines.push(`a { color: ${primary}; }`);
+            lines.push(`.text-primary { color: ${primary} !important; }`);
+            lines.push(`.bg-primary { background-color: ${primary} !important; }`);
+        }
+        if (isValid(secondary)) {
+            lines.push(`.btn-secondary { background-color: ${secondary}; border-color: ${secondary}; }`);
+        }
+    } else if (framework === 'tailwind') {
+        for (const [name, val] of Object.entries(colors)) {
+            if (isValid(val)) lines.push(`  --color-${name}: ${val};`);
+        }
+        if (isValid(bodyFont)) lines.push(`  font-family: ${bodyFont};`);
+        if (isValid(headingFont)) lines.push(`  --font-heading: ${headingFont};`);
+        if (isValid(radius)) lines.push(`  --radius: ${radius};`);
+        lines.push('}');
+
+        if (isValid(headingFont)) lines.push(`h1, h2, h3, h4, h5, h6 { font-family: ${headingFont}; }`);
+
+        for (const [name, val] of Object.entries({ ...colors, ...custom })) {
+            if (!isValid(val)) continue;
+            const safe = name.replaceAll('_', '-');
+            lines.push(`.text-${safe} { color: ${val}; }`);
+            lines.push(`.bg-${safe} { background-color: ${val}; }`);
+        }
+    } else {
+        // Generic: plain CSS custom properties + utility classes
+        for (const [name, val] of Object.entries(colors)) {
+            if (isValid(val)) lines.push(`  --color-${name}: ${val};`);
+        }
+        if (isValid(bodyFont)) lines.push(`  font-family: ${bodyFont};`);
+        if (isValid(headingFont)) lines.push(`  --font-heading: ${headingFont};`);
+        if (isValid(radius)) lines.push(`  --border-radius: ${radius};`);
+        lines.push('}');
+
+        for (const [name, val] of Object.entries(custom)) {
+            if (!isValid(val)) continue;
+            const safe = name.replaceAll('_', '-');
+            lines.push(`.text-${safe} { color: ${val} !important; }`);
+            lines.push(`.bg-${safe} { background-color: ${val} !important; }`);
+        }
+    }
+
+    let out = lines.join('\n') + '\n';
+
+    // Append sanitized extra_css if detection captured any
+    const extra = overrides.extra_css ?? '';
+    if (isValid(extra)) {
+        const badPatterns = [
+            /^@tailwind\b/, /^@theme\b/, /^@plugin\b/, /^@custom-variant\b/,
+            /^@apply\b/, /^@config\b/, /^@source\b/, /^@utility\b/,
+            /^@layer\b/, /^@import\s+["']tailwindcss/,
+        ];
+        const clean = String(extra).split('\n')
+            .filter(line => !badPatterns.some(pattern => pattern.test(line.trim())))
+            .join('\n').trim();
+        if (clean) out += `\n/* Extra project overrides */\n${clean}\n`;
+    }
+
+    return out;
+}
+
+function main() {
+    if (process.argv.length !== 4) {
+        process.stderr.write('Usage: theme_overrides.js <detection_json> <framework>\n');
+        process.exit(1);
+    }
+    const [detectPath, framework] = process.argv.slice(2);
+    const detect = JSON.parse(fs.readFileSync(detectPath, 'utf8'));
+    process.stdout.write(overrideCss(detect, framework));
+}
+
+if (require.main === module) main();
+
+module.exports = { overrideCss };

package/engine/detect-project/scripts/write_branding.js

@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+'use strict';
+
+/*
+ * write_branding.js — write or patch branding.json for each app type, so the
+ * detect-project steps need no inline Python.
+ *
+ * Usage:
+ *   node write_branding.js web      <brand_dir> <compilation_method> <css_bytes>
+ *        (merges <brand_dir>/branding-detect.json into <brand_dir>/branding.json)
+ *   node write_branding.js terminal <branding.json> <theme_attr> <background> <accent> <css_bytes>
+ *   node write_branding.js mobile   <branding.json> <platform> <platform_attr> <primary> <background> <css_bytes>
+ *   node write_branding.js desktop  <branding.json> <platform> <window_chrome> <css_bytes>   (patch)
+ *   node write_branding.js win32    <branding.json> <css_bytes>
+ *   node write_branding.js macos    <branding.json> <css_bytes>
+ *   node write_branding.js game     <branding.json> <engine> <logical_w> <logical_h> <display_w> <display_h> <css_bytes>   (patch)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+function int(value, name) {
+    const text = String(value ?? '').trim();
+    if (!/^-?\d+$/.test(text)) throw new Error(`${name} must be an integer, got "${value}"`);
+    return Number(text);
+}
+
+function readJson(file) {
+    return JSON.parse(fs.readFileSync(file, 'utf8'));
+}
+
+function writeJson(file, value) {
+    fs.writeFileSync(file, JSON.stringify(value, null, 2));
+}
+
+function now() {
+    return new Date().toISOString();
+}
+
+const MODES = {
+    web: ([brandDir, method, cssBytes]) => {
+        const result = { ...readJson(path.join(brandDir, 'branding-detect.json')) };
+        result.compiled_css_path = 'branding.css';
+        result.compilation_method = method;
+        result.compiled_css_bytes = int(cssBytes, 'css_bytes');
+        result.generated_at = now().replace(/\.\d{3}Z$/, 'Z');
+        return [path.join(brandDir, 'branding.json'), result];
+    },
+    terminal: ([file, attr, background, accent, cssBytes]) => [file, {
+        framework: 'terminal',
+        app_type: 'terminal',
+        compiled_css_path: 'branding.css',
+        compilation_method: 'webtui_vendored',
+        compiled_css_bytes: int(cssBytes, 'css_bytes'),
+        terminal_theme: attr,
+        default_colors: { primary: accent, background },
+        generated_at: now(),
+    }],
+    mobile: ([file, platform, attr, primary, background, cssBytes]) => [file, {
+        framework: 'mobile',
+        app_type: 'mobile',
+        compiled_css_path: 'branding.css',
+        compilation_method: 'framework7_vendored',
+        compiled_css_bytes: int(cssBytes, 'css_bytes'),
+        platform,
+        platform_attr: attr,
+        mobile_theme: 'light',
+        default_colors: { primary, background },
+        generated_at: now(),
+    }],
+    desktop: ([file, platform, chrome, cssBytes]) => {
+        const branding = readJson(file);
+        branding.app_type = 'desktop';
+        branding.platform = platform; // macos | windows
+        branding.window_chrome = chrome; // native | hybrid | custom (main window)
+        branding.compiled_css_bytes = int(cssBytes, 'css_bytes');
+        return [file, branding];
+    },
+    win32: ([file, cssBytes]) => [file, {
+        framework: 'win32',
+        app_type: 'win32',
+        compiled_css_path: 'branding.css',
+        compilation_method: '7css_vendored',
+        compiled_css_bytes: int(cssBytes, 'css_bytes'),
+        platform: 'windows',
+        default_colors: { primary: '#3399ff', background: '#f0f0f0', confidence: 'low' },
+        generated_at: now(),
+    }],
+    macos: ([file, cssBytes]) => [file, {
+        framework: 'macos',
+        app_type: 'macos',
+        compiled_css_path: 'branding.css',
+        compilation_method: 'puppertino_vendored',
+        compiled_css_bytes: int(cssBytes, 'css_bytes'),
+        platform: 'macos',
+        default_colors: { primary: '#007aff', background: '#f6f6f6', confidence: 'low' },
+        generated_at: now(),
+    }],
+    game: ([file, engine, lw, lh, dw, dh, cssBytes]) => {
+        const branding = readJson(file);
+        branding.app_type = 'game';
+        branding.engine = engine;
+        branding.canvas_size = { width: int(lw, 'logical_w'), height: int(lh, 'logical_h') };
+        branding.display_size = { width: int(dw, 'display_w'), height: int(dh, 'display_h') };
+        branding.compiled_css_bytes = int(cssBytes, 'css_bytes');
+        return [file, branding];
+    },
+};
+
+const ARITY = { web: 3, terminal: 5, mobile: 6, desktop: 4, win32: 2, macos: 2, game: 7 };
+
+function main(argv) {
+    const [mode, ...args] = argv;
+    if (!MODES[mode] || args.length !== ARITY[mode]) {
+        process.stderr.write('Usage: write_branding.js <web|terminal|mobile|desktop|win32|macos|game> <args…> (see the header)\n');
+        return 2;
+    }
+    const [file, value] = MODES[mode](args);
+    writeJson(file, value);
+    return 0;
+}
+
+if (require.main === module) {
+    try { process.exitCode = main(process.argv.slice(2)); }
+    catch (error) {
+        process.stderr.write(`write_branding: ${error.message}\n`);
+        process.exitCode = 1;
+    }
+}