piloti 1.0.0

package/README.md

@@ -0,0 +1,207 @@
+# Piloti
+
+A config-driven CSS framework following **CUBE CSS methodology**.
+
+> *Piloti* (pilotis) — architectural columns that lift a building, providing the foundation. Just like pilotis support architecture, Piloti supports your design system.
+
+## Features
+
+- 🎨 **Token-based** — Colors, spacing, typography from config
+- ⚡ **Auto-generated utilities** — Build from your tokens
+- 📱 **Responsive** — Breakpoint-prefixed classes (sm:, md:, lg:, xl:)
+- 🧩 **CUBE CSS compositions** — Stack, cluster, flow
+- 🔧 **Customizable** — Your config, your design system
+
+## Installation
+
+```bash
+npm install piloti
+```
+
+## Quick Start
+
+### 1. Create your config
+
+Create `piloti.config.json` in your project root:
+
+```json
+{
+  "settings": {
+    "basePixel": 16,
+    "breakpoints": {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px"
+    }
+  },
+  "tokens": {
+    "color": {
+      "primary": "#4f46e5",
+      "secondary": "#e5e7eb",
+      "accent": "#f59e0b"
+    },
+    "spacing": {
+      "0": "0px",
+      "1": "4px",
+      "2": "8px",
+      "4": "16px",
+      "8": "32px"
+    }
+  },
+  "utilities": [
+    {
+      "prefix": "p",
+      "property": "padding",
+      "fromToken": "spacing",
+      "values": ["0", "1", "2", "4", "8"],
+      "responsive": true
+    },
+    {
+      "prefix": "bg",
+      "property": "background-color",
+      "fromToken": "color",
+      "values": ["primary", "secondary", "accent"]
+    }
+  ]
+}
+```
+
+### 2. Generate CSS
+
+```bash
+npx piloti
+```
+
+This creates `piloti-output/` with:
+- `variables.css` — CSS custom properties
+- `utilities.css` — Utility classes
+- `responsive.css` — Responsive utilities
+- `index.css` — Entry point
+
+### 3. Import in your project
+
+```css
+@import url('./piloti-output/index.css');
+```
+
+Or in JS:
+```js
+import './piloti-output/index.css';
+```
+
+## CLI Options
+
+```bash
+npx piloti [options]
+
+Options:
+  -c, --config <path>   Path to config file (default: ./piloti.config.json)
+  -o, --output <path>   Output directory (default: ./piloti-output)
+  -h, --help            Show help
+```
+
+### Examples
+
+```bash
+# Use default config location
+npx piloti
+
+# Custom config
+npx piloti --config ./tokens/design-system.json
+
+# Custom output
+npx piloti --output ./src/styles/generated
+```
+
+## Config Reference
+
+### Settings
+
+```json
+{
+  "settings": {
+    "basePixel": 16,
+    "breakpoints": {
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    }
+  }
+}
+```
+
+### Tokens
+
+```json
+{
+  "tokens": {
+    "color": { "primary": "#000", "accent": "#f00" },
+    "spacing": { "1": "4px", "2": "8px" },
+    "fontSize": { "sm": "14px", "base": "16px" },
+    "radius": { "sm": "2px", "full": "9999px" },
+    "shadow": { "md": "0 4px 6px rgba(0,0,0,0.1)" },
+    "lineHeight": { "tight": "1.25", "normal": "1.5" },
+    "zIndex": { "10": "10", "50": "50" }
+  }
+}
+```
+
+### Utilities
+
+```json
+{
+  "utilities": [
+    {
+      "prefix": "p",
+      "property": "padding",
+      "fromToken": "spacing",
+      "values": ["1", "2", "4"],
+      "responsive": true
+    },
+    {
+      "prefix": "d",
+      "property": "display",
+      "values": ["flex", "grid", "block", "none"],
+      "responsive": true
+    },
+    {
+      "prefix": "justify",
+      "property": "justify-content",
+      "values": ["start", "center", "between"],
+      "valueMap": {
+        "start": "flex-start",
+        "center": "center",
+        "between": "space-between"
+      }
+    }
+  ]
+}
+```
+
+## Generated Classes
+
+With the default config, you get:
+
+| Category | Examples |
+|----------|----------|
+| Display | `.d-flex`, `.d-grid`, `.d-none` |
+| Flexbox | `.flex-row`, `.flex-col`, `.justify-center`, `.items-center` |
+| Spacing | `.p-4`, `.m-2`, `.gap-4`, `.mx-auto` |
+| Colors | `.text-primary`, `.bg-accent` |
+| Typography | `.font-xl`, `.leading-tight` |
+| Shadows | `.shadow-md`, `.shadow-lg` |
+| Responsive | `.sm:d-flex`, `.md:w-1/2`, `.lg:gap-8` |
+
+## Using with the Base Framework
+
+For compositions (stack, cluster, flow) and reset styles, also import:
+
+```css
+@import url('node_modules/piloti/src/main.css');
+@import url('./piloti-output/index.css'); /* Your custom tokens */
+```
+
+## License
+
+MIT

package/bin/piloti.js

@@ -0,0 +1,264 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+// =============================================================================
+// CLI ARGUMENT PARSING
+// =============================================================================
+
+const args = process.argv.slice(2);
+let configPath = null;
+let outputDir = null;
+
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === '--config' || args[i] === '-c') {
+    configPath = args[i + 1];
+    i++;
+  } else if (args[i] === '--output' || args[i] === '-o') {
+    outputDir = args[i + 1];
+    i++;
+  } else if (args[i] === '--help' || args[i] === '-h') {
+    console.log(`
+Piloti - CSS Framework Build Tool
+
+Usage:
+  npx piloti [options]
+
+Options:
+  -c, --config <path>   Path to custom config.json (default: ./piloti.config.json)
+  -o, --output <path>   Output directory for generated CSS (default: ./piloti-output)
+  -h, --help            Show this help message
+
+Examples:
+  npx piloti
+  npx piloti --config ./my-tokens.json
+  npx piloti --config ./tokens.json --output ./styles/generated
+`);
+    process.exit(0);
+  }
+}
+
+// Resolve paths
+const packageDir = path.dirname(__dirname);
+const cwd = process.cwd();
+
+// Default config: look in cwd first, then fallback to package config
+const defaultConfigPath = fs.existsSync(path.join(cwd, 'piloti.config.json'))
+  ? path.join(cwd, 'piloti.config.json')
+  : path.join(packageDir, 'config/config.json');
+
+configPath = configPath
+  ? path.resolve(cwd, configPath)
+  : defaultConfigPath;
+
+outputDir = outputDir
+  ? path.resolve(cwd, outputDir)
+  : path.join(cwd, 'piloti-output');
+
+// Load config
+if (!fs.existsSync(configPath)) {
+  console.error(`Error: Config file not found at ${configPath}`);
+  console.error('Create a piloti.config.json file or use --config to specify a path.');
+  process.exit(1);
+}
+
+const config = require(configPath);
+
+console.log(`\n🏛️  Piloti CSS Framework`);
+console.log(`   Config: ${configPath}`);
+console.log(`   Output: ${outputDir}\n`);
+
+// =============================================================================
+// ENSURE OUTPUT DIRECTORIES
+// =============================================================================
+
+[outputDir].forEach(dir => {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+});
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+/**
+ * Convert px to rem
+ */
+const toRem = (value) => {
+  const basePixel = config.settings?.basePixel || 16;
+  if (typeof value === 'string' && value.endsWith('px')) {
+    const px = parseInt(value);
+    return px === 0 ? '0' : `${px / basePixel}rem`;
+  }
+  return value;
+};
+
+/**
+ * Sanitize class names (handles special characters like /)
+ */
+const sanitizeClassName = (name) => {
+  return name.replace(/\//g, '\\/');
+};
+
+// =============================================================================
+// GENERATE VARIABLES CSS
+// =============================================================================
+
+console.log('Generating CSS variables...');
+
+let variablesContent = `/* ============================================
+   CSS Variables - Auto-generated
+   Config: ${path.basename(configPath)}
+   ============================================ */\n\n:root {\n`;
+
+let variableCount = 0;
+
+for (const [category, tokens] of Object.entries(config.tokens || {})) {
+  variablesContent += `\n  /* ${category.charAt(0).toUpperCase() + category.slice(1)} */\n`;
+
+  for (const [key, value] of Object.entries(tokens)) {
+    const varName = `--${category}-${key}`;
+    const varValue = toRem(value);
+    variablesContent += `  ${varName}: ${varValue};\n`;
+    variableCount++;
+  }
+}
+
+variablesContent += '}\n';
+
+fs.writeFileSync(path.join(outputDir, 'variables.css'), variablesContent);
+console.log(`   ✓ ${variableCount} variables → variables.css`);
+
+// =============================================================================
+// GENERATE UTILITIES CSS
+// =============================================================================
+
+console.log('Generating utilities...');
+
+let utilitiesContent = `/* ============================================
+   Utility Classes - Auto-generated
+   Config: ${path.basename(configPath)}
+   ============================================ */\n\n`;
+
+let utilityCount = 0;
+let warnings = [];
+
+(config.utilities || []).forEach(util => {
+  utilitiesContent += `/* ${util.property} */\n`;
+
+  util.values.forEach(key => {
+    let valueStr;
+
+    if (util.fromToken) {
+      if (config.tokens[util.fromToken] && config.tokens[util.fromToken][key]) {
+        valueStr = `var(--${util.fromToken}-${key})`;
+      } else {
+        warnings.push(`Token '${key}' not found in '${util.fromToken}'`);
+        return;
+      }
+    } else if (util.valueMap && util.valueMap[key]) {
+      valueStr = util.valueMap[key];
+    } else {
+      valueStr = key;
+    }
+
+    const className = `.${util.prefix}-${sanitizeClassName(key)}`;
+    utilitiesContent += `${className} { ${util.property}: ${valueStr}; }\n`;
+    utilityCount++;
+  });
+
+  utilitiesContent += '\n';
+});
+
+fs.writeFileSync(path.join(outputDir, 'utilities.css'), utilitiesContent);
+console.log(`   ✓ ${utilityCount} utilities → utilities.css`);
+
+// =============================================================================
+// GENERATE RESPONSIVE UTILITIES
+// =============================================================================
+
+const breakpoints = config.settings?.breakpoints || {};
+let responsiveCount = 0;
+
+if (Object.keys(breakpoints).length > 0) {
+  console.log('Generating responsive utilities...');
+
+  let responsiveContent = `/* ============================================
+   Responsive Utilities - Auto-generated
+   Config: ${path.basename(configPath)}
+   ============================================ */\n\n`;
+
+  for (const [bpName, bpValue] of Object.entries(breakpoints)) {
+    responsiveContent += `/* ${bpName}: (min-width: ${bpValue}) */\n`;
+    responsiveContent += `@media (min-width: ${bpValue}) {\n`;
+
+    (config.utilities || []).forEach(util => {
+      if (!util.responsive) return;
+
+      util.values.forEach(key => {
+        let valueStr;
+
+        if (util.fromToken) {
+          if (config.tokens[util.fromToken] && config.tokens[util.fromToken][key]) {
+            valueStr = `var(--${util.fromToken}-${key})`;
+          } else {
+            return;
+          }
+        } else if (util.valueMap && util.valueMap[key]) {
+          valueStr = util.valueMap[key];
+        } else {
+          valueStr = key;
+        }
+
+        const className = `.${bpName}\\:${util.prefix}-${sanitizeClassName(key)}`;
+        responsiveContent += `  ${className} { ${util.property}: ${valueStr}; }\n`;
+        responsiveCount++;
+      });
+    });
+
+    responsiveContent += '}\n\n';
+  }
+
+  fs.writeFileSync(path.join(outputDir, 'responsive.css'), responsiveContent);
+  console.log(`   ✓ ${responsiveCount} responsive utilities → responsive.css`);
+}
+
+// =============================================================================
+// GENERATE MAIN ENTRY FILE
+// =============================================================================
+
+let mainContent = `/* Piloti CSS Framework - Generated Entry Point */\n`;
+mainContent += `@import url('./variables.css');\n`;
+mainContent += `@import url('./utilities.css');\n`;
+if (responsiveCount > 0) {
+  mainContent += `@import url('./responsive.css');\n`;
+}
+
+fs.writeFileSync(path.join(outputDir, 'index.css'), mainContent);
+
+// =============================================================================
+// WARNINGS
+// =============================================================================
+
+if (warnings.length > 0) {
+  console.log('\n⚠️  Warnings:');
+  warnings.forEach(w => console.log(`   - ${w}`));
+}
+
+// =============================================================================
+// SUMMARY
+// =============================================================================
+
+console.log('\n' + '='.repeat(50));
+console.log('✅ Build complete!');
+console.log('='.repeat(50));
+console.log(`   Variables:   ${variableCount}`);
+console.log(`   Utilities:   ${utilityCount}`);
+console.log(`   Responsive:  ${responsiveCount}`);
+console.log(`   Total:       ${variableCount + utilityCount + responsiveCount}`);
+console.log('='.repeat(50));
+console.log(`\nImport in your project:`);
+console.log(`   @import url('${path.relative(cwd, outputDir)}/index.css');`);
+console.log('');