juxscript 1.0.8 → 1.0.10

package/lib/presets/notion.css

@@ -1,521 +0,0 @@
-/**
- * Notion Preset - Combined Layout + Theming
- * Light/Dark mode via [data-theme] attribute
- */
-
-/* ============================================
-   BASE TOKENS (Theme-independent)
-   ============================================ */
-:root {
-  /* Typography */
-  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-family-mono: 'Courier New', monospace;
-  
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 2rem;
-  
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-  
-  /* Spacing */
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
-  --space-3xl: 4rem;
-  
-  /* Borders */
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-full: 9999px;
-  
-  --border-width: 1px;
-  
-  /* Transitions */
-  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  
-  /* Semantic colors (theme-independent) */
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
-  --color-danger: #ef4444;
-  --color-info: #3b82f6;
-}
-
-/* ============================================
-   LIGHT THEME (Default)
-   ============================================ */
-:root,
-[data-theme="light"] {
-  --color-brand: #0a9ca5;
-  --color-brand-hover: #088892;
-  
-  --color-text-primary: #111827;
-  --color-text-secondary: #6b7280;
-  --color-text-tertiary: #9ca3af;
-  --color-text-inverse: #ffffff;
-  
-  --color-surface-base: #f9fafb;
-  --color-surface-elevated: #ffffff;
-  --color-surface-hover: #f3f4f6;
-  --color-background: #ffffff;
-  
-  --color-border: rgba(0, 0, 0, 0.06);
-  --color-border-hover: rgba(0, 0, 0, 0.12);
-  
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
-  --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
-  --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
-}
-
-/* ============================================
-   DARK THEME
-   ============================================ */
-[data-theme="dark"] {
-  --color-brand: #14b8a6;
-  --color-brand-hover: #0d9488;
-  
-  --color-text-primary: #f9fafb;
-  --color-text-secondary: #d1d5db;
-  --color-text-tertiary: #9ca3af;
-  --color-text-inverse: #111827;
-  
-  --color-surface-base: #1f2937;
-  --color-surface-elevated: #374151;
-  --color-surface-hover: #4b5563;
-  --color-background: #111827;
-  
-  --color-border: rgba(255, 255, 255, 0.08);
-  --color-border-hover: rgba(255, 255, 255, 0.16);
-  
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
-  --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
-}
-
-/* ============================================
-   GLOBAL STYLES
-   ============================================ */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-normal);
-  color: var(--color-text-primary);
-  background: var(--color-background);
-  transition: background-color var(--transition-base), color var(--transition-base);
-}
-
-/* ============================================
-   NOTION LAYOUT GRID
-   ============================================ */
-#app {
-  display: grid;
-  grid-template-areas:
-    "header header"
-    "sidebar main"
-    "footer footer";
-  grid-template-columns: 350px 1fr;
-  grid-template-rows: auto 1fr auto;
-  min-height: 100vh;
-}
-
-/* ============================================
-   HEADER
-   ============================================ */
-#appheader {
-  grid-area: header;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: var(--color-surface-elevated);
-  border-bottom: var(--border-width) solid var(--color-border);
-  display: flex;
-  align-items: center;
-  padding: var(--space-md) var(--space-lg);
-  gap: var(--space-lg);
-  transition: background-color var(--transition-base), border-color var(--transition-base);
-}
-
-#appheader-content {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: var(--space-lg);
-}
-
-#appheader-logo {
-  flex-shrink: 0;
-}
-
-#appheader-nav {
-  flex: 1;
-  display: flex;
-  gap: var(--space-md);
-}
-
-#appheader-actions {
-  flex-shrink: 0;
-  display: flex;
-  gap: var(--space-sm);
-  align-items: center;
-}
-
-/* Subheader - Hidden in notion layout */
-#appsubheader,
-#appsubheader-breadcrumbs,
-#appsubheader-tabs,
-#appsubheader-actions {
-  display: none;
-}
-
-/* ============================================
-   SIDEBAR
-   ============================================ */
-#appsidebar {
-  grid-area: sidebar;
-  overflow-y: auto;
-  background: var(--color-surface-base);
-  border-right: var(--border-width) solid var(--color-border);
-  transition: transform var(--transition-base), 
-              background-color var(--transition-base), 
-              border-color var(--transition-base);
-  display: flex;
-  flex-direction: column;
-}
-
-#appsidebar-header {
-  padding: var(--space-md);
-  border-bottom: var(--border-width) solid var(--color-border);
-  flex-shrink: 0;
-}
-
-#appsidebar-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-sm);
-}
-
-#appsidebar-footer {
-  padding: var(--space-md);
-  border-top: var(--border-width) solid var(--color-border);
-  flex-shrink: 0;
-}
-
-/* ============================================
-   MAIN
-   ============================================ */
-#appmain {
-  grid-area: main;
-  overflow-y: auto;
-  padding: var(--space-xl);
-  background: var(--color-background);
-  transition: background-color var(--transition-base);
-}
-
-#appmain-content {
-  max-width: 100%;
-}
-
-/* ============================================
-   ASIDE (Hidden in Notion layout)
-   ============================================ */
-#appaside,
-#appaside-header,
-#appaside-content,
-#appaside-footer {
-  display: none;
-}
-
-/* ============================================
-   FOOTER
-   ============================================ */
-#appfooter {
-  grid-area: footer;
-  background: var(--color-surface-elevated);
-  border-top: var(--border-width) solid var(--color-border);
-  padding: var(--space-lg) var(--space-xl);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: background-color var(--transition-base), border-color var(--transition-base);
-}
-
-#appfooter-content {
-  flex: 1;
-}
-
-#appfooter-legal {
-  flex-shrink: 0;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-}
-
-/* ============================================
-   MODAL
-   ============================================ */
-#appmodal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 2000;
-  display: none;
-}
-
-#appmodal[aria-hidden="false"] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#appmodal-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-}
-
-#appmodal-container {
-  position: relative;
-  background: var(--color-surface-elevated);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  max-width: 90vw;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: background-color var(--transition-base);
-}
-
-#appmodal-header {
-  padding: var(--space-lg);
-  border-bottom: var(--border-width) solid var(--color-border);
-  flex-shrink: 0;
-}
-
-#appmodal-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-lg);
-}
-
-#appmodal-footer {
-  padding: var(--space-lg);
-  border-top: var(--border-width) solid var(--color-border);
-  flex-shrink: 0;
-  display: flex;
-  gap: var(--space-sm);
-  justify-content: flex-end;
-}
-
-/* ============================================
-   THEME TOGGLE - CLEAN & MINIMAL
-   ============================================ */
-
-.jux-theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.jux-theme-toggle-button {
-  /* Remove all borders and backgrounds */
-  padding: var(--space-sm);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: 1.5rem; /* Bigger icons */
-  line-height: 1;
-  transition: all var(--transition-fast);
-  color: var(--color-text-secondary);
-  
-  /* Smooth icon transition */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-.jux-theme-toggle-button:hover {
-  background: var(--color-surface-hover);
-  color: var(--color-text-primary);
-  transform: scale(1.05);
-}
-
-.jux-theme-toggle-button:active {
-  transform: scale(0.95);
-}
-
-/* Light mode icon styling */
-[data-theme="light"] .jux-theme-toggle-button {
-  color: #f59e0b; /* Warm sun color */
-}
-
-[data-theme="light"] .jux-theme-toggle-button:hover {
-  color: #d97706;
-}
-
-/* Dark mode icon styling */
-[data-theme="dark"] .jux-theme-toggle-button {
-  color: #fbbf24; /* Bright moon color */
-}
-
-[data-theme="dark"] .jux-theme-toggle-button:hover {
-  color: #fcd34d;
-}
-
-/* Dropdown variant (if needed) */
-.jux-theme-toggle-select {
-  padding: var(--space-sm) var(--space-md);
-  background: transparent;
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: var(--font-size-base);
-  color: var(--color-text-primary);
-  transition: all var(--transition-fast);
-}
-
-.jux-theme-toggle-select:hover {
-  border-color: var(--color-border-hover);
-  background: var(--color-surface-hover);
-}
-
-.jux-theme-toggle-select:focus {
-  outline: none;
-  border-color: var(--color-brand);
-}
-
-/* ============================================
-   RESPONSIVE BREAKPOINTS
-   ============================================ */
-
-/* Tablet (portrait) */
-@media (max-width: 1024px) {
-  #app {
-    grid-template-columns: 200px 1fr;
-  }
-  
-  #appmain {
-    padding: var(--space-lg);
-  }
-  
-  #appheader {
-    padding: var(--space-sm) var(--space-md);
-    gap: var(--space-md);
-  }
-}
-
-/* Mobile */
-@media (max-width: 768px) {
-  #app {
-    grid-template-areas:
-      "header"
-      "main"
-      "footer";
-    grid-template-columns: 1fr;
-  }
-  
-  #appsidebar {
-    position: fixed;
-    top: 60px;
-    left: 0;
-    bottom: 0;
-    width: 280px;
-    max-width: 80vw;
-    z-index: 99;
-    transform: translateX(-100%);
-    box-shadow: var(--shadow-xl);
-  }
-  
-  #appsidebar.visible {
-    transform: translateX(0);
-  }
-  
-  #appmain {
-    padding: var(--space-md);
-  }
-  
-  #appheader {
-    padding: var(--space-xs) var(--space-md);
-  }
-  
-  #appfooter {
-    padding: var(--space-md) var(--space-lg);
-    flex-direction: column;
-    gap: var(--space-sm);
-    text-align: center;
-  }
-  
-  .jux-theme-toggle-button {
-    width: 2.25rem;
-    height: 2.25rem;
-    font-size: 1.25rem;
-  }
-}
-
-/* Small mobile */
-@media (max-width: 480px) {
-  #appsidebar {
-    width: 100%;
-    max-width: 100vw;
-  }
-  
-  #appmain {
-    padding: var(--space-sm);
-  }
-  
-  #appfooter {
-    padding: var(--space-sm) var(--space-md);
-    font-size: var(--font-size-sm);
-  }
-  
-  #appmodal-container {
-    max-width: 95vw;
-    max-height: 95vh;
-  }
-}
-
-/* ============================================
-   SMOOTH TRANSITIONS
-   ============================================ */
-body,
-#app,
-#appheader,
-#appsidebar,
-#appmain,
-#appfooter,
-#appmodal-container,
-.jux-theme-toggle-button {
-  transition: background-color var(--transition-base), 
-              border-color var(--transition-base),
-              color var(--transition-base);
-}

package/lib/presets/notion.jux

@@ -1,27 +0,0 @@
-// muse: notion layout preset
-export function layout() {
-    /* styles */
-    jux.include('/examples/presets/notion.css');
-
-    /* regions */
-    jux.header('appheader').render("#app");
-    jux.header('appsubheader').render("#app");
-    jux.sidebar('appsidebar').render("#app");
-    jux.main('appmain').render("#app");
-    jux.sidebar('appaside').render("#app");
-    jux.footer('appfooter').render("#app");
-    jux.modal('appmodal').render("#app");
-
-    /* theme toggle in header */
-    jux.themeToggle('theme-toggle', {
-        themes: [
-            { id: 'light', label: 'Light', icon: '☀️' },
-            { id: 'dark', label: 'Dark', icon: '🌙' }
-        ],
-        variant: 'button',
-        showLabel: false
-    }).render('#appheader');
-}
-
-// Auto-run on import
-layout();

package/machinery/generators/css.js

@@ -1,128 +0,0 @@
-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();
-}