juxscript 1.1.404 → 1.1.408

package/machinery/jux-errors.js

@@ -0,0 +1,218 @@
+/**
+ * JUX Theme System
+ *
+ * Provides top-level CSS variable injection for swappable aesthetics.
+ * All jux components reference these CSS custom properties; changing the
+ * active theme instantly updates every rendered component.
+ *
+ * Usage:
+ *   jux.theme('gemini');       // apply a built-in preset
+ *   jux.theme('anthropic');    // swap to Anthropic aesthetic
+ *   jux.theme({ primary: '252 75% 60%', radius: '8px' }); // custom overrides
+ *   jux.getTheme();            // → current theme name
+ *   jux.getThemeNames();       // → ['gemini','anthropic','render','shadcn']
+ */
+
+// ── Token interface ──────────────────────────────────────────────────────────
+
+export interface ThemeTokens {
+    /* ── Semantic colors (HSL channel values, no `hsl()` wrapper) ── */
+    primary:                string;
+    'primary-foreground':   string;
+    secondary:              string;
+    'secondary-foreground': string;
+    accent:                 string;
+    'accent-foreground':    string;
+    destructive:            string;
+    'destructive-foreground': string;
+    muted:                  string;
+    'muted-foreground':     string;
+    background:             string;
+    foreground:             string;
+    card:                   string;
+    'card-foreground':      string;
+    popover:                string;
+    'popover-foreground':   string;
+    border:                 string;
+    input:                  string;
+    ring:                   string;
+
+    /* ── Structural tokens ── */
+    radius:     string;
+    'font-sans': string;
+}
+
+// ── Built-in presets ─────────────────────────────────────────────────────────
+
+const gemini: ThemeTokens = {
+    primary:                '217 89% 51%',
+    'primary-foreground':   '0 0% 100%',
+    secondary:              '220 14% 96%',
+    'secondary-foreground': '220 13% 18%',
+    accent:                 '217 91% 97%',
+    'accent-foreground':    '217 89% 41%',
+    destructive:            '0 72% 51%',
+    'destructive-foreground': '0 0% 100%',
+    muted:                  '220 14% 96%',
+    'muted-foreground':     '220 9% 46%',
+    background:             '0 0% 100%',
+    foreground:             '220 13% 18%',
+    card:                   '0 0% 100%',
+    'card-foreground':      '220 13% 18%',
+    popover:                '220 13% 18%',
+    'popover-foreground':   '0 0% 98%',
+    border:                 '220 13% 91%',
+    input:                  '220 13% 91%',
+    ring:                   '217 89% 61%',
+    radius:                 '12px',
+    'font-sans':            "'Google Sans','Inter',system-ui,-apple-system,sans-serif",
+};
+
+const anthropic: ThemeTokens = {
+    primary:                '24 75% 50%',
+    'primary-foreground':   '0 0% 100%',
+    secondary:              '30 15% 95%',
+    'secondary-foreground': '24 5% 20%',
+    accent:                 '30 30% 95%',
+    'accent-foreground':    '24 75% 40%',
+    destructive:            '0 72% 51%',
+    'destructive-foreground': '0 0% 100%',
+    muted:                  '30 15% 95%',
+    'muted-foreground':     '24 5% 46%',
+    background:             '40 33% 99%',
+    foreground:             '24 5% 20%',
+    card:                   '40 33% 99%',
+    'card-foreground':      '24 5% 20%',
+    popover:                '24 5% 15%',
+    'popover-foreground':   '40 33% 98%',
+    border:                 '30 15% 88%',
+    input:                  '30 15% 88%',
+    ring:                   '24 75% 60%',
+    radius:                 '8px',
+    'font-sans':            "'Inter',system-ui,-apple-system,sans-serif",
+};
+
+const render: ThemeTokens = {
+    primary:                '252 75% 60%',
+    'primary-foreground':   '0 0% 100%',
+    secondary:              '230 10% 96%',
+    'secondary-foreground': '230 10% 15%',
+    accent:                 '252 60% 97%',
+    'accent-foreground':    '252 75% 50%',
+    destructive:            '0 72% 51%',
+    'destructive-foreground': '0 0% 100%',
+    muted:                  '230 10% 96%',
+    'muted-foreground':     '230 10% 46%',
+    background:             '0 0% 100%',
+    foreground:             '230 10% 15%',
+    card:                   '0 0% 100%',
+    'card-foreground':      '230 10% 15%',
+    popover:                '230 10% 12%',
+    'popover-foreground':   '0 0% 98%',
+    border:                 '230 10% 90%',
+    input:                  '230 10% 90%',
+    ring:                   '252 75% 70%',
+    radius:                 '8px',
+    'font-sans':            "'Inter',system-ui,-apple-system,sans-serif",
+};
+
+const shadcn: ThemeTokens = {
+    primary:                '222.2 47.4% 11.2%',
+    'primary-foreground':   '210 40% 98%',
+    secondary:              '210 40% 96.1%',
+    'secondary-foreground': '222.2 47.4% 11.2%',
+    accent:                 '210 40% 96.1%',
+    'accent-foreground':    '222.2 47.4% 11.2%',
+    destructive:            '0 84.2% 60.2%',
+    'destructive-foreground': '210 40% 98%',
+    muted:                  '210 40% 96.1%',
+    'muted-foreground':     '215.4 16.3% 46.9%',
+    background:             '0 0% 100%',
+    foreground:             '222.2 84% 4.9%',
+    card:                   '0 0% 100%',
+    'card-foreground':      '222.2 84% 4.9%',
+    popover:                '0 0% 100%',
+    'popover-foreground':   '222.2 84% 4.9%',
+    border:                 '214.3 31.8% 91.4%',
+    input:                  '214.3 31.8% 91.4%',
+    ring:                   '215 20.2% 65.1%',
+    radius:                 '6px',
+    'font-sans':            "system-ui,-apple-system,sans-serif",
+};
+
+// ── Preset registry ──────────────────────────────────────────────────────────
+
+const PRESETS: Record<string, ThemeTokens> = { gemini, anthropic, render, shadcn };
+
+// ── State ────────────────────────────────────────────────────────────────────
+
+const STYLE_ID = 'jux-theme-tokens';
+let _currentTheme = 'gemini';
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function buildCSS(tokens: ThemeTokens): string {
+    const lines = Object.entries(tokens).map(([key, val]) => `  --${key}:${val};`);
+    return `:root{\n${lines.join('\n')}\n}`;
+}
+
+function inject(css: string): void {
+    if (typeof document === 'undefined') return;            // SSR / Node guard
+    let el = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+    if (!el) {
+        el = document.createElement('style');
+        el.id = STYLE_ID;
+        document.head.prepend(el);                          // first <style> → highest base priority
+    }
+    el.textContent = css;
+}
+
+// ── Public API ───────────────────────────────────────────────────────────────
+
+/**
+ * Apply a theme by name or by providing a partial/full token object.
+ *
+ * ```ts
+ * jux.theme('gemini');
+ * jux.theme('anthropic');
+ * jux.theme({ primary: '252 75% 60%', radius: '16px' });
+ * ```
+ */
+export function theme(nameOrTokens: string | Partial<ThemeTokens> = 'gemini'): void {
+    if (typeof nameOrTokens === 'string') {
+        const preset = PRESETS[nameOrTokens];
+        if (!preset) throw new Error(`[jux] Unknown theme "${nameOrTokens}". Available: ${Object.keys(PRESETS).join(', ')}`);
+        _currentTheme = nameOrTokens;
+        inject(buildCSS(preset));
+    } else {
+        // Merge overrides onto current base
+        const base = PRESETS[_currentTheme] ?? gemini;
+        const merged: ThemeTokens = { ...base, ...nameOrTokens };
+        _currentTheme = 'custom';
+        inject(buildCSS(merged));
+    }
+}
+
+/** Alias for `theme()` — set the active theme. */
+export const setTheme = theme;
+
+/** Return the name of the currently active theme. */
+export function getTheme(): string { return _currentTheme; }
+
+/** Return the list of built-in preset names. */
+export function getThemeNames(): string[] { return Object.keys(PRESETS); }
+
+/** Return a copy of a preset's tokens (or the current custom tokens). */
+export function getThemeTokens(name?: string): ThemeTokens {
+    const key = name ?? _currentTheme;
+    return { ...(PRESETS[key] ?? PRESETS.gemini) };
+}
+
+/** Register a custom preset so it can be referenced by name. */
+export function registerTheme(name: string, tokens: ThemeTokens): void {
+    PRESETS[name] = tokens;
+}
+
+// ── Auto-inject default theme on first import ────────────────────────────────
+
+theme('gemini');

package/machinery/serve.js

@@ -112,6 +112,8 @@ app.use((req, res, next) => {
   next();
 });
 
+app.use(express.json());
+
 app.get('/favicon.ico', (req, res) => res.status(204).end());
 app.get('/favicon.png', (req, res) => res.status(204).end());
 
@@ -148,6 +150,71 @@ app.get('/__jux_sources.json', (req, res) => {
   }
 });
 
+// ═══════════════════════════════════════════════════════════════
+// AI ASSIST — Claude proxy endpoint (Anthropic Messages API)
+// ═══════════════════════════════════════════════════════════════
+const aiConfig = rawConfig.ai || {};
+
+app.post('/api/ai/suggest', async (req, res) => {
+  const apiKey = aiConfig.apiKey || process.env.ANTHROPIC_API_KEY || '';
+  if (!apiKey) {
+    return res.status(400).json({
+      error: 'No Anthropic API key configured. Set ai.apiKey in juxconfig.js or the ANTHROPIC_API_KEY environment variable.'
+    });
+  }
+
+  const { prompt, code, cursorLine, systemPrompt } = req.body || {};
+  if (!prompt) {
+    return res.status(400).json({ error: 'Missing "prompt" in request body.' });
+  }
+
+  const model = aiConfig.model || 'claude-sonnet-4-20250514';
+  const maxTokens = aiConfig.maxTokens || 1024;
+
+  const userMessage = [
+    code ? `Current code:\n\`\`\`js\n${code}\n\`\`\`` : '',
+    cursorLine != null ? `Cursor is on line ${cursorLine}.` : '',
+    `Request: ${prompt}`,
+  ].filter(Boolean).join('\n\n');
+
+  try {
+    const anthropicRes = await fetch('https://api.anthropic.com/v1/messages', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': apiKey,
+        'anthropic-version': '2023-06-01',
+      },
+      body: JSON.stringify({
+        model,
+        max_tokens: maxTokens,
+        system: systemPrompt || 'You are a helpful JUX framework coding assistant.',
+        messages: [{ role: 'user', content: userMessage }],
+      }),
+    });
+
+    if (!anthropicRes.ok) {
+      const errBody = await anthropicRes.text();
+      console.error('Anthropic API error:', anthropicRes.status, errBody);
+      return res.status(anthropicRes.status).json({
+        error: `Anthropic API error: ${anthropicRes.status}`,
+      });
+    }
+
+    const data = await anthropicRes.json();
+    const text = data.content?.[0]?.text || '';
+
+    // Extract code from markdown fences if present
+    const codeMatch = text.match(/```(?:js|javascript)?\n([\s\S]*?)```/);
+    const suggestion = codeMatch ? codeMatch[1].trim() : text.trim();
+
+    res.json({ suggestion });
+  } catch (err) {
+    console.error('AI suggest error:', err.message);
+    res.status(500).json({ error: err.message });
+  }
+});
+
 const hotReloadScript = `
 <script>
 (function() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.404",
+  "version": "1.1.408",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/index.js",