swatchkit 0.0.7 → 0.0.9

package/README.md

@@ -71,7 +71,59 @@ SwatchKit scaffolds a design system for you. Edit the JSON files in `swatches/to
 
 Documentation patterns for these are automatically created alongside the JSON files.
 
-### 3. CSS Workflow
+### 3. Intelligent Fluid Logic (New!)
+
+SwatchKit can auto-calculate fluid typography and spacing scales.
+
+**Static vs Fluid:**
+*   **Static:** Provide a `value` (e.g. `"16px"`).
+*   **Fluid:** Provide `min` and `max` (e.g. `16` and `18`).
+*   **Auto-Fluid:** Provide just ONE side (`min` or `max`), and SwatchKit calculates the other using a default ratio (1.125).
+
+**Example (`swatches/tokens/text-sizes.json`):**
+```json
+{
+  "title": "Text Sizes",
+  "fluidRatio": 1.25,
+  "items": [
+    { "name": "base", "value": "1rem" },        // Static: 1rem always
+    { "name": "md", "min": 16, "max": 20 },     // Fluid: 16px -> 20px
+    { "name": "lg", "max": 24 },                // Auto: 19.2px -> 24px (24 / 1.25)
+    { "name": "xl", "min": 32 },                // Auto: 32px -> 40px (32 * 1.25)
+    { "name": "jumbo", "max": 64, "fluidRatio": 1.5 } // Auto: 42.6px -> 64px (64 / 1.5)
+  ]
+}
+```
+
+**Generated CSS:**
+```css
+:root {
+  --s-base: 1rem;
+  --s-md: clamp(1rem, ... , 1.25rem);
+  --s-lg: clamp(1.2rem, ... , 1.5rem);
+  --s-xl: clamp(2rem, ... , 2.5rem);
+  --s-jumbo: clamp(2.66rem, ... , 4rem);
+}
+```
+
+### 4. Hybrid Text Leading
+
+You can mix modular scales with manual overrides.
+
+**Example (`swatches/tokens/text-leading.json`):**
+```json
+{
+  "base": 1,
+  "ratio": 1.2,
+  "items": [
+    { "name": "tight", "step": -1 },   // Modular: 1 * (1.2 ^ -1)
+    { "name": "flat", "value": 1 },    // Manual: 1
+    { "name": "loose", "step": 1 }     // Modular: 1 * (1.2 ^ 1)
+  ]
+}
+```
+
+### 5. CSS Workflow
 
 SwatchKit generates `css/tokens.css` with your design tokens as CSS custom properties. The starter `css/styles.css` imports this file:
 
@@ -88,7 +140,7 @@ body {
 
 The pattern library uses **your stylesheet**, so components render exactly as they will in your app.
 
-### 4. Custom Layouts
+### 6. Custom Layouts
 When you run `swatchkit init`, we create `swatches/_layout.html`.
 **You own this file.**
 *   Link to your own stylesheets.
@@ -97,7 +149,7 @@ When you run `swatchkit init`, we create `swatches/_layout.html`.
 
 SwatchKit injects content into the `<!-- PATTERNS -->`, `<!-- SIDEBAR_LINKS -->`, and `<!-- HEAD_EXTRAS -->` placeholders.
 
-### 5. JavaScript Bundling
+### 7. JavaScript Bundling
 If your component needs client-side JS:
 1.  Create a folder: `swatches/carousel/`.
 2.  Add `index.html` (Markup).
@@ -118,7 +170,7 @@ swatchkit [command] [options]
 ### Flags
 | Flag | Short | Description |
 | :--- | :--- | :--- |
-| `--watch` | `-w` | Watch mode (coming soon). |
+| `--watch` | `-w` | Watch files and rebuild on change. |
 | `--config` | `-c` | Path to config file. |
 | `--input` | `-i` | Pattern directory (Default: `swatches/`). |
 | `--outDir` | `-o` | Output directory (Default: `public/swatchkit`). |
@@ -138,6 +190,9 @@ module.exports = {
   // Override CSS directory
   css: './assets/css',
   
+  // Exclude files (supports glob patterns)
+  exclude: ['*.test.js', 'temp*'],
+  
   // Override token settings
   tokens: {
     input: './design-tokens',    // Where token JSON files live

package/build.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 const fs = require("fs");
 const path = require("path");
+const chokidar = require("chokidar");
 const { processTokens } = require("./src/tokens");
 
 /**
@@ -66,6 +67,27 @@ function loadConfig(configPath) {
   return {};
 }
 
+// --- 2.5 Glob Matching Helper ---
+function matchesPattern(filename, pattern) {
+  // Simple wildcard support
+  if (pattern.includes("*")) {
+    const parts = pattern.split("*");
+    // Handle "foo*"
+    if (pattern.endsWith("*") && !pattern.startsWith("*")) {
+        return filename.startsWith(parts[0]);
+    }
+    // Handle "*bar"
+    if (pattern.startsWith("*") && !pattern.endsWith("*")) {
+        return filename.endsWith(parts[1]);
+    }
+    // Handle "*bar*"
+    if (pattern.startsWith("*") && pattern.endsWith("*")) {
+        return filename.includes(parts[1]);
+    }
+  }
+  return filename === pattern;
+}
+
 // --- 3. Smart Defaults & Path Resolution ---
 function resolveSettings(cliOptions, fileConfig) {
   const cwd = process.cwd();
@@ -108,12 +130,16 @@ function resolveSettings(cliOptions, fileConfig) {
   const tokensDir = fileConfig.tokens?.input
     ? path.resolve(cwd, fileConfig.tokens.input)
     : path.join(patternsDir, "tokens");
+  
+  // Exclude patterns
+  const exclude = fileConfig.exclude || [];
 
   return {
     patternsDir,
     outDir,
     cssDir,
     tokensDir,
+    exclude,
     fileConfig, // Expose config to init
     // Internal layout template (relative to this script)
     internalLayout: path.join(__dirname, "src/layout.html"),
@@ -264,8 +290,10 @@ function scanDirectory(dir, scriptsCollector, exclude = []) {
   const items = fs.readdirSync(dir);
 
   items.forEach((item) => {
-    // Skip excluded items, _layout.html, or hidden files
-    if (exclude.includes(item)) return;
+    // Skip excluded items
+    if (exclude.some(pattern => matchesPattern(item, pattern))) return;
+
+    // Skip _layout.html or hidden files
     if (item.startsWith("_") || item.startsWith(".")) return;
 
     const itemPath = path.join(dir, item);
@@ -372,8 +400,9 @@ function build(settings) {
   const tokensDir = path.join(settings.patternsDir, "tokens");
   const tokenPages = scanDirectory(tokensDir, scripts);
 
-  // Pass 2: Patterns (in [patternsDir], excluding 'tokens')
-  const patternPages = scanDirectory(settings.patternsDir, scripts, ["tokens"]);
+  // Pass 2: Patterns (in [patternsDir], excluding 'tokens' and user excludes)
+  const userExcludes = settings.exclude || [];
+  const patternPages = scanDirectory(settings.patternsDir, scripts, ["tokens", ...userExcludes]);
 
   // Combine for content generation (Tokens first, then Patterns)
   const allPatterns = [...tokenPages, ...patternPages];
@@ -451,6 +480,43 @@ function build(settings) {
   console.log(`Build complete! Generated ${settings.outputFile}`);
 }
 
+// --- 6. Watch Logic ---
+function watch(settings) {
+  const watchPaths = [
+    settings.patternsDir,
+    settings.tokensDir,
+    settings.projectLayout,
+    settings.stylesCssFile
+  ].filter(p => fs.existsSync(p)); // Only watch files that exist
+
+  console.log("[SwatchKit] Watch mode enabled.");
+  console.log("Watching for changes in:");
+  watchPaths.forEach(p => console.log(`  - ${p}`));
+
+  let buildTimeout;
+  const rebuild = () => {
+    if (buildTimeout) clearTimeout(buildTimeout);
+    buildTimeout = setTimeout(() => {
+      try {
+        console.log("[SwatchKit] Change detected. Rebuilding...");
+        build(settings);
+      } catch (e) {
+        console.error("[SwatchKit] Build failed:", e.message);
+      }
+    }, 100); // 100ms debounce
+  };
+
+  const watcher = chokidar.watch(watchPaths, {
+    ignored: /(^|[\/\\])\../, // ignore dotfiles
+    persistent: true,
+    ignoreInitial: true
+  });
+
+  watcher.on('all', (event, path) => {
+    rebuild();
+  });
+}
+
 // --- Main Execution ---
 try {
   const cliOptions = parseArgs(process.argv);
@@ -462,7 +528,7 @@ try {
   } else {
     build(settings);
     if (cliOptions.watch) {
-      console.log("[SwatchKit] Watch mode is not yet fully implemented.");
+      watch(settings);
     }
   }
 } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swatchkit",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A lightweight tool for creating HTML pattern libraries.",
   "main": "build.js",
   "bin": {
@@ -23,5 +23,8 @@
   "bugs": {
     "url": "https://github.com/cwebley/swatchkit/issues"
   },
-  "homepage": "https://github.com/cwebley/swatchkit#readme"
+  "homepage": "https://github.com/cwebley/swatchkit#readme",
+  "dependencies": {
+    "chokidar": "^5.0.0"
+  }
 }