@matteoaliano/forest-ui 0.2.10 → 0.2.11

package/bin/sync.mjs

@@ -14,12 +14,12 @@
  *   .antigravity/rules.md     — Antigravity
  *
  * Guideline categories:
- *   - FOREST_AI_GUIDELINES.md            — Design system components, tokens, patterns
- *   - FOREST_DEV_GUIDELINES.md           — Development best practices
- *   - themes/FOREST_THEME_<NAME>.md      — Theme-specific guidelines (auto-discovered)
+ *   - 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
  */
 
-import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync } from "node:fs";
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
 import { resolve, dirname, basename } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -30,48 +30,32 @@ const pkgPath = resolve(__dirname, "..", "package.json");
 const pkgVersion = JSON.parse(readFileSync(pkgPath, "utf-8")).version;
 
 const guidelinesDir = resolve(__dirname, "..", "guidelines");
-const themesDir = resolve(guidelinesDir, "themes");
 
 // Static guideline entries
 const staticEntries = [
     {
-        source: resolve(guidelinesDir, "FOREST_AI_GUIDELINES.md"),
+        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_DEV_GUIDELINES.md"),
-        claudeName: "forest-dev.md",
-        geminiName: "forest-dev.md",
-        cursorName: "forest-dev.mdc",
-        cursorDescription: "Forest UI development best practices",
+        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",
     },
 ];
 
-// Auto-discover theme files from guidelines/themes/
-function discoverThemeEntries() {
-    if (!existsSync(themesDir)) return [];
-
-    return readdirSync(themesDir)
-        .filter((f) => /^FOREST_THEME_\w+\.md$/.test(f))
-        .map((f) => {
-            const themeName = f
-                .replace(/^FOREST_THEME_/, "")
-                .replace(/\.md$/, "")
-                .toLowerCase();
-
-            return {
-                source: resolve(themesDir, f),
-                claudeName: `forest-theme-${themeName}.md`,
-                geminiName: `forest-theme-${themeName}.md`,
-                cursorName: `forest-theme-${themeName}.mdc`,
-                cursorDescription: `Forest UI theme guidelines — ${themeName}`,
-            };
-        });
-}
-
 // Find the consuming project root (walk up until we find package.json)
 function findProjectRoot(startDir) {
     let dir = startDir;
@@ -90,7 +74,7 @@ function findProjectRoot(startDir) {
 }
 
 const projectRoot = findProjectRoot(process.cwd());
-const entries = [...staticEntries, ...discoverThemeEntries()];
+const entries = [...staticEntries];
 
 console.log(`\n🌲 Forest UI — Syncing AI guidelines\n`);
 console.log(`   Project root: ${projectRoot}`);

package/dist/{chunk-7B6NCKX3.mjs → chunk-6W3RIXXY.mjs}

@@ -94,14 +94,19 @@ var colors = {
     950: "#102a56"
   },
   teal: {
+    50: "#f0fdf9",
     100: "#ccfbef",
     200: "#99f6e0",
+    300: "#5fe9d0",
+    400: "#2ed3b7",
     600: "#0e9384",
     700: "#107569"
   },
   orange: {
     100: "#fdead7",
     200: "#f9dbaf",
+    300: "#f7b27a",
+    400: "#f38744",
     600: "#e04f16",
     700: "#b93815"
   },
@@ -114,24 +119,31 @@ var colors = {
   pink: {
     100: "#fce7f6",
     200: "#fcceee",
+    400: "#f670c7",
+    500: "#ee46bc",
     600: "#dd2590",
     700: "#c11574"
   },
   fuchsia: {
     100: "#fbe8ff",
     200: "#f6d0fe",
+    400: "#e478fa",
+    500: "#d444f1",
     600: "#ba24d5",
     700: "#9f1ab1"
   },
   orangeDark: {
     100: "#ffe6d5",
     200: "#ffd6ae",
+    400: "#ff692e",
+    500: "#ff4405",
     600: "#e62e05",
     700: "#bc1b06"
   },
   green: {
     100: "#d3f8df",
     200: "#aaf0c4",
+    500: "#16b364",
     600: "#099250",
     700: "#087443"
   },
@@ -140,6 +152,30 @@ var colors = {
     200: "#c7d7fe",
     600: "#444ce7",
     700: "#3538cd"
+  },
+  violet: {
+    100: "#ece9fe",
+    200: "#ddd6fe",
+    500: "#875bf7",
+    600: "#7839ee"
+  },
+  rose: {
+    100: "#ffe4e8",
+    200: "#fecdd6",
+    400: "#fd6f8e",
+    500: "#f63d68"
+  },
+  blueLight: {
+    100: "#e0f2fe",
+    200: "#b9e6fe",
+    400: "#36bffa",
+    500: "#0ba5ec"
+  },
+  cyan: {
+    100: "#cff9fe",
+    200: "#a5f0fc",
+    600: "#088ab2",
+    700: "#0e7090"
   }
 };
 var spacing = {
@@ -436,7 +472,7 @@ var toggleColors = {
   buttonFgDisabled: colors.gray[50]
 };
 var chartColors = {
-  axisFg: colors.gray[200],
+  axisFg: colors.gray[100],
   gridlineFg: colors.gray[100],
   labelFg: colors.gray[600],
   labelFgEmphasis: colors.gray[700],
@@ -446,31 +482,19 @@ var chartColors = {
   tooltipFg: colors.base.white,
   crosshairFg: colors.gray[500],
   legendFg: text.tertiary,
-  categorical: [
-    "#7B61FF",
-    "#FF7E67",
-    "#76DFD5",
-    "#F6C343",
-    "#B36A6F",
-    "#71BCF6",
-    "#FFB076",
-    "#11819D",
-    "#3CB371",
-    "#FFBCAE",
-    "#C87EED",
-    "#76C5AF"
-  ],
-  vibrant: [
-    "#6B38FB",
-    // 1. Deep Purple
-    "#E85B22",
-    // 2. Deep Orange
-    "#4AABFF",
-    // 3. Bright Blue
-    "#E83B1A",
-    // 4. True Red
-    "#E02088"
-    // 5. Magenta
+  series: [
+    { fg: colors.violet[500], fgHover: colors.violet[600], bg: colors.violet[100], bgHover: colors.violet[200] },
+    { fg: colors.orangeDark[400], fgHover: colors.orangeDark[500], bg: colors.orangeDark[100], bgHover: colors.orangeDark[200] },
+    { fg: colors.teal[300], fgHover: colors.teal[400], bg: colors.teal[50], bgHover: colors.teal[100] },
+    { fg: colors.warning[400], fgHover: colors.warning[500], bg: colors.warning[100], bgHover: colors.warning[200] },
+    { fg: colors.rose[400], fgHover: colors.rose[500], bg: colors.rose[100], bgHover: colors.rose[200] },
+    { fg: colors.blueLight[400], fgHover: colors.blueLight[500], bg: colors.blueLight[100], bgHover: colors.blueLight[200] },
+    { fg: colors.orange[300], fgHover: colors.orange[400], bg: colors.orange[100], bgHover: colors.orange[200] },
+    { fg: colors.cyan[600], fgHover: colors.cyan[700], bg: colors.cyan[100], bgHover: colors.cyan[200] },
+    { fg: colors.green[500], fgHover: colors.green[600], bg: colors.green[100], bgHover: colors.green[200] },
+    { fg: colors.pink[400], fgHover: colors.pink[500], bg: colors.pink[100], bgHover: colors.pink[200] },
+    { fg: colors.fuchsia[400], fgHover: colors.fuchsia[500], bg: colors.fuchsia[100], bgHover: colors.fuchsia[200] },
+    { fg: colors.teal[600], fgHover: colors.teal[700], bg: colors.teal[100], bgHover: colors.teal[200] }
   ]
 };
 var alpha = {
@@ -855,18 +879,21 @@ function buildComponents(tokens) {
         }
       }
     },
-    // ─── Select ─────────────────────────────────────────────────────
-    MuiSelect: {
+    // ─── Menu ──────────────────────────────────────────────────────
+    MuiMenu: {
       defaultProps: {
-        MenuProps: {
-          autoFocus: false,
-          slotProps: {
-            backdrop: {
-              sx: { backgroundColor: "transparent" }
-            }
+        autoFocus: false
+      },
+      styleOverrides: {
+        root: {
+          "& .MuiBackdrop-root": {
+            backgroundColor: "transparent"
           }
         }
-      },
+      }
+    },
+    // ─── Select ─────────────────────────────────────────────────────
+    MuiSelect: {
       styleOverrides: {
         select: {
           "&.MuiSelect-select": {
@@ -1885,19 +1912,8 @@ var forestPreset = {
 };
 
 // src/theme/presets/alkemy-plus.ts
-var red = {
-  50: "#fef2f2",
-  200: "#fecaca",
-  600: "#dc2626",
-  700: "#b91c1c",
-  800: "#991b1b",
-  900: "#7f1d1d"};
 var colors2 = {
-  base: {
-    white: "#ffffff",
-    black: "#000000",
-    transparent: "#ffffff00"
-  },
+  ...colors,
   /** Brand scale — black-based for primary actions */
   brand: {
     25: "#fafafa",
@@ -1927,36 +1943,7 @@ var colors2 = {
     800: "#27272a",
     900: "#18181b",
     950: "#09090b"
-  },
-  /** Error — forest defaults (standard UX red) */
-  error: colors.error,
-  /** Warning — orange/yellow tones from Alkemy+ palette */
-  warning: {
-    25: "#fffcf5",
-    50: "#fff7ed",
-    100: "#ffedd5",
-    200: "#fed7aa",
-    300: "#fdba74",
-    400: "#fb923c",
-    500: "#f08828",
-    600: "#ea580c",
-    700: "#c2410c",
-    800: "#9a3412",
-    900: "#7c2d12",
-    950: "#431407"
-  },
-  /** Success — forest defaults (standard UX green) */
-  success: colors.success,
-  /** Blue (info) — forest defaults (standard UX) */
-  blue: colors.blue,
-  teal: colors.teal,
-  orange: colors.orange,
-  purple: colors.purple,
-  pink: colors.pink,
-  fuchsia: colors.fuchsia,
-  orangeDark: colors.orangeDark,
-  green: colors.green,
-  indigo: colors.indigo
+  }
 };
 var radius2 = {
   ...radius,
@@ -1981,10 +1968,10 @@ var text2 = {
   placeholder: colors2.gray[500],
   placeholderSubtle: colors2.gray[300],
   white: colors2.base.white,
-  brandPrimary: red[900],
-  brandSecondary: red[700],
-  brandTertiary: red[600],
-  brandTertiaryAlt: red[600],
+  brandPrimary: colors2.brand[900],
+  brandSecondary: colors2.brand[700],
+  brandTertiary: colors2.brand[600],
+  brandTertiaryAlt: colors2.brand[600],
   primaryOnBrand: colors2.base.white,
   secondaryOnBrand: colors2.brand[200],
   tertiaryOnBrand: colors2.brand[200],
@@ -1996,22 +1983,22 @@ var text2 = {
 var bg2 = {
   primary: colors2.gray[50],
   primaryAlt: colors2.gray[50],
-  primaryHover: colors2.gray[50],
+  primaryHover: colors2.gray[100],
   primarySolid: colors2.gray[950],
   secondary: colors2.base.white,
   secondaryAlt: colors2.base.white,
   secondarySubtle: colors2.gray[25],
-  secondaryHover: colors2.gray[100],
+  secondaryHover: colors2.gray[50],
   secondarySolid: colors2.gray[600],
   tertiary: colors2.gray[100],
   quaternary: colors2.gray[200],
-  active: colors2.gray[50],
+  active: colors2.gray[200],
   disabled: colors2.gray[100],
   disabledSubtle: colors2.gray[50],
   overlay: colors2.gray[950],
-  brandPrimary: colors2.brand[100],
-  brandPrimaryAlt: colors2.brand[100],
-  brandSecondary: colors2.brand[200],
+  brandPrimary: colors2.brand[50],
+  brandPrimaryAlt: colors2.brand[50],
+  brandSecondary: colors2.brand[100],
   brandSolid: colors2.brand[600],
   brandSolidHover: colors2.brand[700],
   brandSection: colors2.brand[800],
@@ -2063,7 +2050,6 @@ var border2 = {
   errorSolid: colors2.error[600]
 };
 var buttonColors2 = {
-  /** Primary buttons — black */
   primary: {
     bg: colors2.brand[600],
     bgHover: colors2.brand[700],
@@ -2080,7 +2066,6 @@ var buttonColors2 = {
     border: colors2.gray[300],
     borderHover: colors2.gray[300]
   },
-  /** Outlined accent buttons — dark */
   secondaryColor: {
     bg: colors2.base.white,
     bgHover: colors2.brand[50],
@@ -2094,11 +2079,10 @@ var buttonColors2 = {
     fgHover: colors2.gray[700],
     bgHover: colors2.gray[50]
   },
-  /** Text accent buttons — red */
   tertiaryColor: {
-    fg: red[700],
-    fgHover: red[800],
-    bgHover: red[50]
+    fg: colors2.brand[700],
+    fgHover: colors2.brand[800],
+    bgHover: colors2.brand[50]
   },
   primaryError: {
     bg: colors2.error[600],
@@ -2127,22 +2111,23 @@ var avatarColors2 = {
   contrastBorder: "#00000014",
   profilePhotoBorder: colors2.base.white,
   focusBorder: "#a0a0a624"
+  // gray[400] + 14% alpha
 };
 var breadcrumbColors2 = {
   fg: colors2.gray[600],
   fgHover: colors2.gray[700],
   bgHover: colors2.gray[50],
-  brandBgHover: red[50],
-  brandFgHover: red[700],
+  brandBgHover: colors2.brand[50],
+  brandFgHover: colors2.brand[700],
   iconFg: colors2.gray[500],
   iconFgHover: colors2.gray[700],
-  brandIconFgHover: red[700]
+  brandIconFgHover: colors2.brand[700]
 };
 var iconColors2 = {
-  fgBrand: red[600],
-  fgBrandOnBrand: red[200],
+  fgBrand: colors2.brand[600],
+  fgBrandOnBrand: colors2.brand[200],
   featuredModernBorder: colors2.gray[200],
-  featuredLightFgBrand: red[600],
+  featuredLightFgBrand: colors2.brand[600],
   featuredLightFgGray: colors2.gray[500],
   featuredLightFgError: colors2.error[600],
   featuredLightFgWarning: colors2.warning[600],
@@ -2155,19 +2140,19 @@ var iconColors2 = {
 };
 var navColors2 = {
   itemIconFg: colors2.gray[500],
-  itemIconFgActive: colors2.gray[500],
+  itemIconFgActive: colors2.gray[700],
   itemButtonIconFg: colors2.gray[500],
   itemButtonIconFgActive: colors2.gray[700]
 };
 var sliderColors2 = {
-  handleBorder: red[600],
+  handleBorder: colors2.brand[600],
   handleBg: colors2.base.white
 };
 var toggleColors2 = {
   buttonFgDisabled: colors2.gray[50]
 };
 var chartColors2 = {
-  axisFg: colors2.gray[200],
+  axisFg: colors2.gray[100],
   gridlineFg: colors2.gray[100],
   labelFg: colors2.gray[600],
   labelFgEmphasis: colors2.gray[700],
@@ -2177,52 +2162,25 @@ var chartColors2 = {
   tooltipFg: colors2.base.white,
   crosshairFg: colors2.gray[500],
   legendFg: text2.tertiary,
-  categorical: [
-    "#7B61FF",
-    "#FF7E67",
-    "#76DFD5",
-    "#F6C343",
-    "#B36A6F",
-    "#71BCF6",
-    "#FFB076",
-    "#11819D",
-    "#3CB371",
-    "#FFBCAE",
-    "#C87EED",
-    "#76C5AF"
-  ],
-  vibrant: [
-    "#6B38FB",
-    "#E85B22",
-    "#4AABFF",
-    "#E83B1A",
-    "#E02088"
-  ],
-  series6Fg: colors2.brand[400],
-  series6FgHover: colors2.brand[500],
-  series6Bg: colors2.brand[100],
-  series6BgHover: colors2.brand[200],
-  series7Fg: colors2.fuchsia[600],
-  series7FgHover: colors2.fuchsia[700],
-  series7Bg: colors2.fuchsia[100],
-  series7BgHover: colors2.fuchsia[200],
-  series8Fg: colors2.teal[600],
-  series8FgHover: colors2.teal[700],
-  series8Bg: colors2.teal[100],
-  series8BgHover: colors2.teal[200],
-  series9Fg: colors2.indigo[600],
-  series9FgHover: colors2.indigo[700],
-  series9Bg: colors2.indigo[100],
-  series9BgHover: colors2.indigo[200],
-  series10Fg: colors2.green[600],
-  series10FgHover: colors2.green[700],
-  series10Bg: colors2.green[100],
-  series10BgHover: colors2.green[200]
+  series: [
+    { fg: colors2.violet[500], fgHover: colors2.violet[600], bg: colors2.violet[100], bgHover: colors2.violet[200] },
+    { fg: colors2.orangeDark[400], fgHover: colors2.orangeDark[500], bg: colors2.orangeDark[100], bgHover: colors2.orangeDark[200] },
+    { fg: colors2.teal[300], fgHover: colors2.teal[400], bg: colors2.teal[50], bgHover: colors2.teal[100] },
+    { fg: colors2.warning[400], fgHover: colors2.warning[500], bg: colors2.warning[100], bgHover: colors2.warning[200] },
+    { fg: colors2.rose[400], fgHover: colors2.rose[500], bg: colors2.rose[100], bgHover: colors2.rose[200] },
+    { fg: colors2.blueLight[400], fgHover: colors2.blueLight[500], bg: colors2.blueLight[100], bgHover: colors2.blueLight[200] },
+    { fg: colors2.orange[300], fgHover: colors2.orange[400], bg: colors2.orange[100], bgHover: colors2.orange[200] },
+    { fg: colors2.cyan[600], fgHover: colors2.cyan[700], bg: colors2.cyan[100], bgHover: colors2.cyan[200] },
+    { fg: colors2.green[500], fgHover: colors2.green[600], bg: colors2.green[100], bgHover: colors2.green[200] },
+    { fg: colors2.pink[400], fgHover: colors2.pink[500], bg: colors2.pink[100], bgHover: colors2.pink[200] },
+    { fg: colors2.fuchsia[400], fgHover: colors2.fuchsia[500], bg: colors2.fuchsia[100], bgHover: colors2.fuchsia[200] },
+    { fg: colors2.teal[600], fgHover: colors2.teal[700], bg: colors2.teal[100], bgHover: colors2.teal[200] }
+  ]
 };
 var focusRings2 = {
-  brand: "0px 0px 0px 4px #f040403d",
-  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f040403d",
-  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f040403d",
+  brand: "0px 0px 0px 4px #4040403d",
+  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
+  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
   gray: "0px 0px 0px 4px #a0a0a624",
   grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
   grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
@@ -2292,5 +2250,5 @@ var forestThemeOptions = {
 var forestTheme = createTheme(forestThemeOptions);
 
 export { alkemyPlusPreset, alpha, avatarColors, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, colors, components, container, display, fg, focusRings, fontFamily, fontSize, fontWeight, forestPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, iconColors, lineHeight, navColors, palette, radius, registerPreset, shadows, shadows2, sliderColors, spacing, text, toggleColors, typography, widths };
-//# sourceMappingURL=chunk-7B6NCKX3.mjs.map
-//# sourceMappingURL=chunk-7B6NCKX3.mjs.map
+//# sourceMappingURL=chunk-6W3RIXXY.mjs.map
+//# sourceMappingURL=chunk-6W3RIXXY.mjs.map