@matteoaliano/forest-ui 0.3.6 → 0.4.1

package/bin/sync.mjs

@@ -3,60 +3,17 @@
 /**
  * forest-ui sync
  *
- * Copies guideline files into the AI-tool config directories
- * of the consuming project so coding assistants automatically follow
- * Forest UI conventions.
- *
- * Supported targets:
- *   .claude/<name>.md         — Claude Code
- *   .cursor/rules/<name>.mdc  — Cursor
- *   .gemini/<name>.md         — Gemini CLI
- *   .antigravity/rules.md     — Antigravity
- *
- * Guideline categories:
- *   - FOREST_UI_GUIDELINES.md            — Design system components, tokens, patterns
- *   - FOREST_FE_GUIDELINES.md            — Next.js frontend best practices
- *   - FOREST_BE_GUIDELINES.md            — FastAPI backend best practices
+ * Copies skill folders into the consuming project's .claude/skills/
+ * directory so Claude Code automatically discovers Forest UI preset rules.
  */
 
-import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, cpSync } from "node:fs";
-import { resolve, dirname, basename } from "node:path";
+import { readFileSync, mkdirSync, existsSync, readdirSync, cpSync } from "node:fs";
+import { resolve, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const pkgPath = resolve(__dirname, "..", "package.json");
-const pkgVersion = JSON.parse(readFileSync(pkgPath, "utf-8")).version;
-
-const guidelinesDir = resolve(__dirname, "..", "guidelines");
+const __dirname = dirname(fileURLToPath(import.meta.url));
 const skillsDir = resolve(__dirname, "..", "skills");
 
-// Static guideline entries
-const staticEntries = [
-    {
-        source: resolve(guidelinesDir, "FOREST_UI_GUIDELINES.md"),
-        claudeName: "forest-ui.md",
-        geminiName: "forest-ui.md",
-        cursorName: "forest-ui.mdc",
-        cursorDescription: "Forest UI Design System guidelines — components, tokens, and patterns",
-    },
-    {
-        source: resolve(guidelinesDir, "FOREST_FE_GUIDELINES.md"),
-        claudeName: "forest-fe.md",
-        geminiName: "forest-fe.md",
-        cursorName: "forest-fe.mdc",
-        cursorDescription: "Next.js frontend best practices",
-    },
-    {
-        source: resolve(guidelinesDir, "FOREST_BE_GUIDELINES.md"),
-        claudeName: "forest-be.md",
-        geminiName: "forest-be.md",
-        cursorName: "forest-be.mdc",
-        cursorDescription: "FastAPI backend requirements and best practices",
-    },
-];
-
 // Find the consuming project root (walk up until we find package.json)
 function findProjectRoot(startDir) {
     let dir = startDir;
@@ -75,122 +32,41 @@ function findProjectRoot(startDir) {
 }
 
 const projectRoot = findProjectRoot(process.cwd());
-const entries = [...staticEntries];
 
-console.log(`\n🌲 Forest UI — Syncing AI guidelines\n`);
-console.log(`   Project root: ${projectRoot}`);
-console.log(`   Found ${entries.length} guideline file(s)\n`);
+console.log(`\n🌲 Forest UI — Syncing skills\n`);
+console.log(`   Project root: ${projectRoot}\n`);
 
 let synced = 0;
 let total = 0;
 
-for (const entry of entries) {
-    if (!existsSync(entry.source)) {
-        console.log(`   ⚠️  ${basename(entry.source)} — not found, skipping`);
-        continue;
-    }
+if (!existsSync(skillsDir)) {
+    console.log(`   ⚠️  No skills directory found, nothing to sync.\n`);
+    process.exit(0);
+}
 
-    const raw = readFileSync(entry.source, "utf-8");
-    const content = raw.replace(
-        />\s*\*\*forest-ui v[^*]*\*\*/,
-        `> **forest-ui v${pkgVersion}**`,
-    );
+const skillFolders = readdirSync(skillsDir, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name);
 
-    // Claude Code target
-    const claudeDir = resolve(projectRoot, ".claude");
-    const claudePath = resolve(claudeDir, entry.claudeName);
-    total++;
-    try {
-        mkdirSync(claudeDir, { recursive: true });
-        writeFileSync(claudePath, content, "utf-8");
-        console.log(`   ✅ Claude Code → .claude/${entry.claudeName}`);
-        synced++;
-    } catch (err) {
-        console.log(`   ⚠️  Claude Code — .claude/${entry.claudeName} skipped (${err.message})`);
-    }
-
-    // Gemini target
-    const geminiDir = resolve(projectRoot, ".gemini");
-    const geminiPath = resolve(geminiDir, entry.geminiName);
-    total++;
-    try {
-        mkdirSync(geminiDir, { recursive: true });
-        writeFileSync(geminiPath, content, "utf-8");
-        console.log(`   ✅ Gemini      → .gemini/${entry.geminiName}`);
-        
-        // Update .gemini/GEMINI.md to import all synced files
-        const geminiMainPath = resolve(geminiDir, "GEMINI.md");
-        const geminiMainContent = entries
-            .map(e => `@${e.geminiName}`)
-            .join("\n");
-        writeFileSync(geminiMainPath, `# Forest UI Guidelines\n\n${geminiMainContent}\n`, "utf-8");
-        
-        synced++;
-    } catch (err) {
-        console.log(`   ⚠️  Gemini — .gemini/${entry.geminiName} skipped (${err.message})`);
-    }
+if (skillFolders.length === 0) {
+    console.log(`   ⚠️  No skill folders found, nothing to sync.\n`);
+    process.exit(0);
+}
 
-    // Antigravity target
-    const antiDir = resolve(projectRoot, ".antigravity");
-    const antiPath = resolve(antiDir, "rules.md");
-    total++;
-    try {
-        mkdirSync(antiDir, { recursive: true });
-        // Concatenate all content into rules.md or use imports if supported. 
-        // Using imports to keep it clean, pointing to the .gemini folder.
-        const antiContent = entries
-            .map(e => `@../.gemini/${e.geminiName}`)
-            .join("\n");
-        writeFileSync(antiPath, `# Forest UI — Antigravity Rules\n\n${antiContent}\n`, "utf-8");
-        console.log(`   ✅ Antigravity → .antigravity/rules.md`);
-        synced++;
-    } catch (err) {
-        console.log(`   ⚠️  Antigravity — .antigravity/rules.md skipped (${err.message})`);
-    }
+const claudeSkillsDir = resolve(projectRoot, ".claude", "skills");
 
-    // Cursor target
-    const cursorDir = resolve(projectRoot, ".cursor", "rules");
-    const cursorPath = resolve(cursorDir, entry.cursorName);
+for (const folder of skillFolders) {
+    const src = resolve(skillsDir, folder);
+    const dest = resolve(claudeSkillsDir, folder);
     total++;
     try {
-        mkdirSync(cursorDir, { recursive: true });
-        const cursorContent =
-            `---\ndescription: ${entry.cursorDescription}\nglobs: **/*.{ts,tsx,js,jsx}\nalwaysApply: false\n---\n\n` +
-            content;
-        writeFileSync(cursorPath, cursorContent, "utf-8");
-        console.log(`   ✅ Cursor     → .cursor/rules/${entry.cursorName}`);
+        mkdirSync(dest, { recursive: true });
+        cpSync(src, dest, { recursive: true });
+        console.log(`   ✅ .claude/skills/${folder}/`);
         synced++;
     } catch (err) {
-        console.log(`   ⚠️  Cursor — .cursor/rules/${entry.cursorName} skipped (${err.message})`);
-    }
-}
-
-// ─── Claude Code Skills ────────────────────────────────────────────────
-// Copy skill folders into .claude/skills/ for auto-discovery
-
-if (existsSync(skillsDir)) {
-    const skillFolders = readdirSync(skillsDir, { withFileTypes: true })
-        .filter((d) => d.isDirectory())
-        .map((d) => d.name);
-
-    if (skillFolders.length > 0) {
-        console.log(`   --- Claude Code Skills ---`);
-        const claudeSkillsDir = resolve(projectRoot, ".claude", "skills");
-
-        for (const folder of skillFolders) {
-            const src = resolve(skillsDir, folder);
-            const dest = resolve(claudeSkillsDir, folder);
-            total++;
-            try {
-                mkdirSync(dest, { recursive: true });
-                cpSync(src, dest, { recursive: true });
-                console.log(`   ✅ Skill       → .claude/skills/${folder}/`);
-                synced++;
-            } catch (err) {
-                console.log(`   ⚠️  Skill — .claude/skills/${folder}/ skipped (${err.message})`);
-            }
-        }
+        console.log(`   ⚠️  .claude/skills/${folder}/ skipped (${err.message})`);
     }
 }
 
-console.log(`\n   Synced ${synced}/${total} targets.\n`);
+console.log(`\n   Synced ${synced}/${total} skills.\n`);

package/dist/{chunk-G2ZXCZKP.mjs → chunk-IWYN6REP.mjs}

@@ -215,17 +215,6 @@ var misc = {
     950: "#0d2d3a"
   }
 };
-var radiusSharp = {
-  xxs: 1,
-  xs: 2,
-  sm: 3,
-  md: 4,
-  lg: 5,
-  xl: 6,
-  "2xl": 8,
-  "3xl": 10,
-  "4xl": 12
-};
 var base = {
   white: "#ffffff",
   black: "#000000",
@@ -338,7 +327,8 @@ var focusRings = {
   error: "0px 0px 0px 4px #f044383d",
   errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
 };
-var fontFamily = '"Poppins", sans-serif';
+var fontFamily = '"Aeonik", sans-serif';
+var fontFamilyMono = '"Aeonik Mono", monospace';
 var fontSize = {
   xxs: 11,
   xs: 12,
@@ -694,18 +684,6 @@ function buildPalette(tokens) {
     chart: (_a = tokens.chartColors) != null ? _a : chartColors
   };
 }
-var palette = buildPalette({
-  base,
-  error,
-  warning,
-  success,
-  info,
-  text,
-  bg,
-  fg,
-  border,
-  chartColors
-});
 
 // src/theme/typography.ts
 function buildTypography(tokens) {
@@ -789,13 +767,6 @@ function buildTypography(tokens) {
     }
   };
 }
-var typography = buildTypography({
-  fontFamily,
-  display,
-  fontSize,
-  lineHeight,
-  fontWeight
-});
 
 // src/theme/shadows.ts
 function buildShadows(tokens) {
@@ -853,9 +824,6 @@ function buildShadows(tokens) {
     // 24
   ];
 }
-var shadows2 = buildShadows({
-  shadows
-});
 
 // src/theme/components.ts
 function buildComponents(tokens) {
@@ -948,7 +916,11 @@ function buildComponents(tokens) {
     MuiIconButton: {
       styleOverrides: {
         root: {
-          borderRadius: radius5.md
+          borderRadius: radius5.md,
+          padding: 6,
+          "& .MuiSvgIcon-root": {
+            fontSize: 20
+          }
         }
       }
     },
@@ -978,6 +950,15 @@ function buildComponents(tokens) {
         variant: "outlined"
       }
     },
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          "&:has(.Mui-disabled)": {
+            opacity: 0.5
+          }
+        }
+      }
+    },
     MuiInputBase: {
       styleOverrides: {
         input: {
@@ -995,20 +976,27 @@ function buildComponents(tokens) {
         root: {
           borderRadius: radius5.md,
           boxShadow: tokenShadows.xs,
-          "&:hover .MuiOutlinedInput-notchedOutline": {
+          "&&:hover:not(.Mui-focused):not(.Mui-disabled) .MuiOutlinedInput-notchedOutline": {
             borderColor: border5.brand
           },
-          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          "&&.Mui-focused .MuiOutlinedInput-notchedOutline": {
             borderColor: border5.brandSolid,
             borderWidth: 1,
             boxShadow: "none"
           },
-          "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+          "&&.Mui-error:not(.Mui-focused) .MuiOutlinedInput-notchedOutline": {
             borderColor: border5.error
           },
-          "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          "&&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
             borderColor: border5.errorSolid,
             boxShadow: "none"
+          },
+          "& .MuiInputAdornment-root .MuiIconButton-root": {
+            color: fg5.quaternary,
+            "&:hover": {
+              backgroundColor: bg5.primaryHover,
+              color: fg5.brandPrimary
+            }
           }
         },
         notchedOutline: {
@@ -1480,6 +1468,40 @@ function buildComponents(tokens) {
         }
       }
     },
+    // ─── Tabs ──────────────────────────────────────────────────────────
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          minHeight: 48
+        },
+        indicator: {
+          backgroundColor: fg5.brandPrimary,
+          height: 2
+        }
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          minHeight: 48,
+          height: 48,
+          padding: "12px 16px",
+          fontSize: 14,
+          fontWeight: 600,
+          lineHeight: "20px",
+          textTransform: "none",
+          color: text5.tertiary,
+          borderRadius: `${radius5.md}px ${radius5.md}px 0 0`,
+          "&:hover": {
+            backgroundColor: bg5.primaryHover
+          },
+          "&.Mui-selected": {
+            color: fg5.brandPrimary,
+            backgroundColor: bg5.brandPrimary
+          }
+        }
+      }
+    },
     // ─── Chip ───────────────────────────────────────────────────────
     MuiChip: {
       styleOverrides: {
@@ -1500,15 +1522,15 @@ function buildComponents(tokens) {
         },
         colorDefault: {
           "&.MuiChip-filled": {
-            backgroundColor: gray[50],
-            color: gray[700],
-            "& .MuiChip-deleteIcon": { color: gray[400] }
+            backgroundColor: tokens.bg.secondaryHover,
+            color: tokens.fg.secondary,
+            "& .MuiChip-deleteIcon": { color: tokens.fg.quinary }
           }
         },
         colorPrimary: {
           "&.MuiChip-filled": {
             backgroundColor: tokens.bg.brandPrimary,
-            color: tokens.text.brandPrimary,
+            color: tokens.fg.brandPrimary,
             "& .MuiChip-deleteIcon": { color: tokens.fg.brandPrimary }
           }
         },
@@ -1598,13 +1620,16 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           backgroundColor: bg5.secondary,
-          borderBottom: `1px solid ${border5.secondary}`
+          "& .MuiTableRow-root:last-child .MuiTableCell-root": {
+            borderBottom: `1px solid ${border5.secondary}`
+          }
         }
       }
     },
     MuiTableRow: {
       styleOverrides: {
         root: {
+          backgroundColor: bg5.secondary,
           "&:last-child td, &:last-child th": {
             border: 0
           },
@@ -1960,6 +1985,7 @@ function buildComponents(tokens) {
             }
           },
           row: {
+            backgroundColor: bg5.secondary,
             "&:hover": {
               backgroundColor: bg5.primaryHover
             },
@@ -2002,7 +2028,7 @@ function buildComponents(tokens) {
             "& .MuiOutlinedInput-notchedOutline": {
               borderColor: border5.primary
             },
-            "&:hover .MuiOutlinedInput-notchedOutline": {
+            "&:hover:not(:has(.Mui-disabled)) .MuiOutlinedInput-notchedOutline": {
               borderColor: border5.brand
             },
             "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
@@ -2012,7 +2038,6 @@ function buildComponents(tokens) {
             },
             "& .MuiInputAdornment-root .MuiIconButton-root": {
               color: fg5.quaternary,
-              padding: 4,
               "&:hover": {
                 backgroundColor: bg5.primaryHover,
                 color: fg5.brandPrimary
@@ -2164,21 +2189,6 @@ function buildComponents(tokens) {
     }
   };
 }
-var components = buildComponents({
-  base,
-  error,
-  warning,
-  success,
-  info,
-  radius,
-  focusRings,
-  shadows,
-  text,
-  bg,
-  fg,
-  border,
-  buttonColors,
-  sliderColors});
 
 // src/theme/buildTheme.ts
 function buildThemeOptions(tokens) {
@@ -2455,6 +2465,7 @@ var forestExternalPreset = {
         shadows,
         focusRings: focusRings2,
         fontFamily: '"Aeonik", sans-serif',
+        fontFamilyMono: '"Aeonik Mono", monospace',
         fontSize,
         lineHeight,
         fontWeight,
@@ -2595,7 +2606,7 @@ var border3 = {
   tertiary: gray[100],
   disabled: gray[300],
   disabledSubtle: gray[200],
-  brand: colors.brand[300],
+  brand: gray[400],
   brandSolid: colors.brand[600],
   brandSolidAlt: colors.brand[600],
   error: error[300],
@@ -2755,6 +2766,7 @@ var forestAgencyPreset = {
         shadows,
         focusRings: focusRings3,
         fontFamily: '"Aeonik", sans-serif',
+        fontFamilyMono: '"Aeonik Mono", monospace',
         fontSize,
         lineHeight,
         fontWeight,
@@ -3038,6 +3050,7 @@ var forestInternalPreset = {
         shadows,
         focusRings: focusRings4,
         fontFamily: '"Aeonik", sans-serif',
+        fontFamilyMono: '"Aeonik Mono", monospace',
         fontSize,
         lineHeight,
         fontWeight,
@@ -3082,6 +3095,6 @@ var agencyTokens = forestAgencyPreset.variants.light.tokens;
 var forestTheme = buildTheme(agencyTokens);
 var forestThemeOptions = buildThemeOptions(agencyTokens);
 
-export { alpha, avatarColors, base, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, components, container, display, error, fg, focusRings, fontFamily, fontSize, fontWeight, forestAgencyPreset, forestExternalPreset, forestInternalPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, gray, iconColors, info, lineHeight, magenta, misc, navColors, palette, radius, radiusSharp, red, registerPreset, shadows, shadows2, sliderColors, spacing, success, text, toggleColors, typography, violet, warning, widths };
-//# sourceMappingURL=chunk-G2ZXCZKP.mjs.map
-//# sourceMappingURL=chunk-G2ZXCZKP.mjs.map
+export { alpha, avatarColors, base, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, container, display, error, fg, focusRings, fontFamily, fontFamilyMono, fontSize, fontWeight, forestAgencyPreset, forestExternalPreset, forestInternalPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, gray, iconColors, info, lineHeight, magenta, misc, navColors, radius, red, registerPreset, shadows, sliderColors, spacing, success, text, toggleColors, violet, warning, widths };
+//# sourceMappingURL=chunk-IWYN6REP.mjs.map
+//# sourceMappingURL=chunk-IWYN6REP.mjs.map