@matteoaliano/forest-ui 0.3.6 → 0.4.1

package/dist/theme.mjs

@@ -1,3 +1,3 @@
-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, shadows2 as shadows, sliderColors, spacing, success, text, toggleColors, typography, violet, warning, widths } from './chunk-G2ZXCZKP.mjs';
+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 } from './chunk-IWYN6REP.mjs';
 //# sourceMappingURL=theme.mjs.map
 //# sourceMappingURL=theme.mjs.map

package/fonts/aeonik-mono/aeonik-mono.css

@@ -0,0 +1,32 @@
+/* Aeonik Mono — bundled with @matteoaliano/forest-ui */
+/* Usage: import "@matteoaliano/forest-ui/fonts/aeonik-mono/aeonik-mono.css" */
+
+@font-face {
+  font-family: "Aeonik Mono";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    url("./aeonikmono-light.woff2") format("woff2"),
+    url("./aeonikmono-light.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Aeonik Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("./aeonikmono-regular.woff2") format("woff2"),
+    url("./aeonikmono-regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Aeonik Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src:
+    url("./aeonikmono-medium.woff2") format("woff2"),
+    url("./aeonikmono-medium.woff") format("woff");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteoaliano/forest-ui",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "description": "Forest Design System — themed MUI components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -17,7 +17,8 @@
       "require": "./dist/theme.js"
     },
     "./fonts/aeonik/aeonik.css": "./fonts/aeonik/aeonik.css",
-    "./fonts/alkemy-beta/alkemy-beta.css": "./fonts/alkemy-beta/alkemy-beta.css"
+    "./fonts/alkemy-beta/alkemy-beta.css": "./fonts/alkemy-beta/alkemy-beta.css",
+    "./fonts/aeonik-mono/aeonik-mono.css": "./fonts/aeonik-mono/aeonik-mono.css"
   },
   "bin": {
     "forest-ui": "./bin/sync.mjs"
@@ -25,16 +26,14 @@
   "files": [
     "dist",
     "bin",
-    "guidelines",
     "skills",
     "fonts"
   ],
   "scripts": {
-    "presync": "node bin/stamp-version.mjs",
     "sync": "node bin/sync.mjs",
     "lint": "eslint src --ext .ts,.tsx",
     "build": "tsup",
-    "prepublishOnly": "node bin/stamp-version.mjs && tsup && node bin/sync.mjs",
+    "prepublishOnly": "tsup && node bin/sync.mjs",
     "dev": "tsup --watch",
     "test": "vitest",
     "test:coverage": "vitest --coverage",

package/skills/forest-agency/SKILL.md

@@ -3,7 +3,7 @@ name: forest-agency
 description: Forest UI Design System rules for the Agency (charcoal/red) preset. Enforces correct imports, component usage, and theming with @matteoaliano/forest-ui. Use when the project uses forest-ui, forest-agency preset, or when user builds UI components in a forest-ui project. Triggers on "forest", "forest-ui", "forest agency", "@matteoaliano/forest-ui".
 metadata:
   author: Forest Design System
-  version: 0.3.5
+  version: 0.4.1
 ---
 
 # Forest UI — Agency Preset
@@ -35,29 +35,6 @@ function App() {
 }
 ```
 
-## Preset Identity
-
-**Atmosphere:** Bold, authoritative, and editorial — commanding yet refined.
-
-| Role | Color | Hex |
-|------|-------|-----|
-| Primary (brand) | Commanding Charcoal | `#09090b` |
-| Secondary (brand) | Deep Onyx | `#18181b` |
-| Accent | Signal Red | `#FF2821` |
-| Background | Warm Parchment | `#faf9f8` |
-| Surface | Pure White | `#ffffff` |
-| Text primary | Near-Black Ink | `#18181b` |
-| Text secondary | Steel Gray | `#3f3f46` |
-| Border primary | Silver Mist | `#d8d8dc` |
-| Success | Verdant | `#079455` |
-| Warning | Amber | `#dc6803` |
-| Error | Coral | `#d92d20` |
-| Info | Sky | `#1570ef` |
-
-**Corner radius:** Sharp and architectural (4px for buttons/inputs, up to 12px for cards/modals).
-**Font:** Aeonik (geometric sans-serif). Consumers must load it.
-**Button height:** Compact 32px.
-
 ## Available Components
 
 **Inputs:** Button, ButtonGroup, TextField, Select + MenuItem, MultiSelect, Checkbox, RadioGroup + Radio, Switch, ToggleButton + ToggleButtonGroup, Fab, IconButton, Autocomplete, Search, DatePicker
@@ -74,6 +51,13 @@ function App() {
 
 See `references/components.md` for full API details and `references/patterns.md` for code examples.
 
+## Tooltip vs Popover
+
+- **Tooltip** — Use for **text-only hints**. The Tooltip has a dark (black) background and is meant for short, plain-text labels or descriptions. Do not nest rich content inside a Tooltip.
+- **Popover** — Use when you need to display **rich or interactive content** such as Chips, lists, buttons, or any nested components. Popover renders in a neutral surface container that supports arbitrary children.
+
+**Rule of thumb:** If the overlay content is just a string, use `<Tooltip>`. If it contains components, use `<Popover>`.
+
 ## Common Anti-Patterns
 
 1. **Importing from `@mui/material`** instead of `@matteoaliano/forest-ui`

package/skills/forest-external/SKILL.md

@@ -3,7 +3,7 @@ name: forest-external
 description: Forest UI Design System rules for the External (violet) preset. Enforces correct imports, component usage, and theming with @matteoaliano/forest-ui. Use when the project uses forest-ui, forest-external preset, or when user builds UI components in a forest-ui project. Triggers on "forest", "forest-ui", "forest external", "@matteoaliano/forest-ui".
 metadata:
   author: Forest Design System
-  version: 0.3.5
+  version: 0.4.1
 ---
 
 # Forest UI — External Preset
@@ -35,31 +35,6 @@ function App() {
 }
 ```
 
-## Preset Identity
-
-**Atmosphere:** Vibrant, creative, and confidently modern — electric yet composed.
-
-| Role | Color | Hex |
-|------|-------|-----|
-| Primary (brand) | Electric Violet | `#9D5FFF` |
-| Primary hover | Deep Amethyst | `#7c4de6` |
-| Brand depth | Royal Violet | `#5b3acc` |
-| Brand tint | Soft Lavender | `#f5f0ff` |
-| Background | Warm Parchment | `#faf9f8` |
-| Surface | Pure White | `#ffffff` |
-| Text primary | Near-Black Ink | `#18181b` |
-| Text secondary | Steel Gray | `#3f3f46` |
-| Border primary | Silver Mist | `#d8d8dc` |
-| Border brand | Violet Frost | `#b090ff` |
-| Success | Verdant | `#079455` |
-| Warning | Amber | `#dc6803` |
-| Error | Coral | `#d92d20` |
-| Info | Sky | `#1570ef` |
-
-**Corner radius:** Sharp and contemporary (4px for buttons/inputs, up to 12px for cards/modals).
-**Font:** Aeonik (geometric sans-serif). Consumers must load it.
-**Button height:** Compact 32px.
-
 ## Available Components
 
 **Inputs:** Button, ButtonGroup, TextField, Select + MenuItem, MultiSelect, Checkbox, RadioGroup + Radio, Switch, ToggleButton + ToggleButtonGroup, Fab, IconButton, Autocomplete, Search, DatePicker
@@ -76,6 +51,13 @@ function App() {
 
 See `references/components.md` for full API details and `references/patterns.md` for code examples.
 
+## Tooltip vs Popover
+
+- **Tooltip** — Use for **text-only hints**. The Tooltip has a dark (black) background and is meant for short, plain-text labels or descriptions. Do not nest rich content inside a Tooltip.
+- **Popover** — Use when you need to display **rich or interactive content** such as Chips, lists, buttons, or any nested components. Popover renders in a neutral surface container that supports arbitrary children.
+
+**Rule of thumb:** If the overlay content is just a string, use `<Tooltip>`. If it contains components, use `<Popover>`.
+
 ## Common Anti-Patterns
 
 1. **Importing from `@mui/material`** instead of `@matteoaliano/forest-ui`

package/skills/forest-internal/SKILL.md

@@ -3,7 +3,7 @@ name: forest-internal
 description: Forest UI Design System rules for the Internal (magenta) preset. Enforces correct imports, component usage, and theming with @matteoaliano/forest-ui. Use when the project uses forest-ui, forest-internal preset, or when user builds UI components in a forest-ui project. Triggers on "forest", "forest-ui", "forest internal", "@matteoaliano/forest-ui".
 metadata:
   author: Forest Design System
-  version: 0.3.5
+  version: 0.4.1
 ---
 
 # Forest UI — Internal Preset
@@ -35,31 +35,6 @@ function App() {
 }
 ```
 
-## Preset Identity
-
-**Atmosphere:** Playful, energetic, and unapologetically expressive — vibrant yet functional.
-
-| Role | Color | Hex |
-|------|-------|-----|
-| Primary (brand) | Hot Magenta | `#FF78F3` |
-| Primary hover | Vivid Fuchsia | `#e650d4` |
-| Brand depth | Deep Orchid | `#cc28b5` |
-| Brand tint | Blush Mist | `#fff0fa` |
-| Background | Warm Parchment | `#faf9f8` |
-| Surface | Pure White | `#ffffff` |
-| Text primary | Near-Black Ink | `#18181b` |
-| Text secondary | Steel Gray | `#3f3f46` |
-| Border primary | Silver Mist | `#d8d8dc` |
-| Border brand | Pink Frost | `#ff90d8` |
-| Success | Verdant | `#079455` |
-| Warning | Amber | `#dc6803` |
-| Error | Coral | `#d92d20` |
-| Info | Sky | `#1570ef` |
-
-**Corner radius:** Sharp and geometric (4px for buttons/inputs, up to 12px for cards/modals).
-**Font:** Aeonik (geometric sans-serif). Consumers must load it.
-**Button height:** Compact 32px.
-
 ## Available Components
 
 **Inputs:** Button, ButtonGroup, TextField, Select + MenuItem, MultiSelect, Checkbox, RadioGroup + Radio, Switch, ToggleButton + ToggleButtonGroup, Fab, IconButton, Autocomplete, Search, DatePicker
@@ -76,6 +51,13 @@ function App() {
 
 See `references/components.md` for full API details and `references/patterns.md` for code examples.
 
+## Tooltip vs Popover
+
+- **Tooltip** — Use for **text-only hints**. The Tooltip has a dark (black) background and is meant for short, plain-text labels or descriptions. Do not nest rich content inside a Tooltip.
+- **Popover** — Use when you need to display **rich or interactive content** such as Chips, lists, buttons, or any nested components. Popover renders in a neutral surface container that supports arbitrary children.
+
+**Rule of thumb:** If the overlay content is just a string, use `<Tooltip>`. If it contains components, use `<Popover>`.
+
 ## Common Anti-Patterns
 
 1. **Importing from `@mui/material`** instead of `@matteoaliano/forest-ui`

package/bin/stamp-version.mjs

@@ -1,53 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Stamps the current package version into all guideline .md files.
- * Replaces lines matching `> **forest-ui v*.**` with the version from package.json.
- *
- * Run automatically before sync and publish via npm scripts.
- */
-
-import { readFileSync, writeFileSync, readdirSync, existsSync } from "node:fs";
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const pkgPath = resolve(__dirname, "..", "package.json");
-const version = JSON.parse(readFileSync(pkgPath, "utf-8")).version;
-
-const guidelinesDir = resolve(__dirname, "..", "guidelines");
-const themesDir = resolve(guidelinesDir, "themes");
-
-const versionRe = />\s*\*\*forest-ui v[^*]*\*\*/;
-const replacement = `> **forest-ui v${version}**`;
-
-function stampFile(filePath) {
-  const content = readFileSync(filePath, "utf-8");
-  if (!versionRe.test(content)) return false;
-  const updated = content.replace(versionRe, replacement);
-  if (updated === content) return false;
-  writeFileSync(filePath, updated, "utf-8");
-  return true;
-}
-
-let stamped = 0;
-
-// Stamp top-level guideline files
-for (const f of readdirSync(guidelinesDir)) {
-  if (!f.endsWith(".md")) continue;
-  if (stampFile(resolve(guidelinesDir, f))) stamped++;
-}
-
-// Stamp theme files
-if (existsSync(themesDir)) {
-  for (const f of readdirSync(themesDir)) {
-    if (!f.endsWith(".md")) continue;
-    if (stampFile(resolve(themesDir, f))) stamped++;
-  }
-}
-
-if (stamped > 0) {
-  console.log(`   Stamped v${version} into ${stamped} guideline file(s)`);
-} else {
-  console.log(`   All guideline files already at v${version}`);
-}