@matteoaliano/forest-ui 1.2.0 → 1.2.2

package/dist/theme.mjs

@@ -42,7 +42,7 @@ import {
   violet,
   warning,
   widths
-} from "./chunk-VIQ5IYUZ.mjs";
+} from "./chunk-4PNVZETQ.mjs";
 export {
   alpha,
   avatarColors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteoaliano/forest-ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Forest Design System — themed MUI components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -33,7 +33,7 @@
     "sync": "node bin/sync.mjs --internal",
     "lint": "eslint src --ext .ts,.tsx",
     "build": "tsup",
-    "prepublishOnly": "tsup && node bin/sync.mjs",
+    "prepublishOnly": "tsup && node bin/sync.mjs --internal",
     "dev": "tsup --watch",
     "test": "vitest",
     "test:coverage": "vitest --coverage",

package/skills/forest-alkemy-plus/SKILL.md

@@ -3,7 +3,7 @@ name: forest-alkemy-plus
 description: Forest UI Design System rules for the Alkemy+ (charcoal/red) preset. Enforces correct imports, component usage, and theming with @matteoaliano/forest-ui. Use when the project uses forest-ui, forest-alkemy-plus preset, or when user builds UI components in a forest-ui project. Triggers on "forest", "forest-ui", "forest alkemy", "forest alkemy+", "@matteoaliano/forest-ui".
 metadata:
   author: Forest Design System
-  version: 1.2.0
+  version: 1.2.2
 ---
 
 # Forest UI — Alkemy+ Preset
@@ -50,6 +50,6 @@ Full APIs (nav router escape, logoVariant, brand/search/actions slots, Page acti
 
 ## Components
 
-Inputs: Button, ButtonGroup, TextField, Select+MenuItem, MultiSelect, Checkbox, RadioGroup, Switch, ToggleButton, Fab, IconButton (variant: text|contained|outlined), Autocomplete, Search, DatePicker, Input · Data: Badge, Chip, Divider, Typography, Tooltip (plain text only; rich content → Popover), Logo, Table family, DataGrid, List family, Avatar, ImageList, Rating · Surfaces: Accordion, AppBar+Toolbar, Card family, Paper, Drawer · Feedback: Alert, Dialog, Backdrop, Progress, Skeleton, Modal, Popover, Snackbar, Slider · Navigation: Breadcrumbs, Link, Menu, Pagination, Stepper, Tabs, SidebarNav+SidebarItem, BottomNavigation, SpeedDial · Layout: **AppShell, Page**, Box, Stack, Grid, Container · Charts: BarChart, LineChart, PieChart, ScatterChart, Gauge, SparkLineChart · plus form helpers, transitions, utilities, hooks (useMediaQuery, useTheme, useColorScheme).
+Inputs: Button, ButtonGroup, TextField, Select+MenuItem, MultiSelect, Checkbox, RadioGroup, Switch, ToggleButton, Fab, IconButton (variant: contained (default)|outlined|icon), Autocomplete, Search, DatePicker, Input · Data: Badge, Chip, Divider, Typography, Tooltip (plain text only; rich content → Popover), Logo, Table family, DataGrid, List family, Avatar, ImageList, Rating · Surfaces: Accordion, AppBar+Toolbar, Card family, Paper, Drawer · Feedback: Alert, Dialog, Backdrop, Progress, Skeleton, Modal, Popover, Snackbar, Slider · Navigation: Breadcrumbs, Link, Menu, Pagination, Stepper, Tabs, SidebarNav+SidebarItem, BottomNavigation, SpeedDial · Layout: **AppShell, Page**, Box, Stack, Grid, Container · Charts: BarChart, LineChart, PieChart, ScatterChart, Gauge, SparkLineChart · plus form helpers, transitions, utilities, hooks (useMediaQuery, useTheme, useColorScheme).
 
 **Full prop tables:** `references/components.md` · **Copy-paste patterns** (forms, tables, dialogs, app shell, detail drawer, charts): `references/patterns.md` · **Upgrading:** `references/upgrading.md`.

package/skills/forest-alkemy-plus/references/components.md

@@ -54,7 +54,7 @@ import Button from "@mui/material/Button";
 | `Switch` | `import { Switch } from "@matteoaliano/forest-ui"` | `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `size: "small" \| "medium"`, `checked`, `disabled` | — |
 | `ToggleButton` + `ToggleButtonGroup` | `import { ToggleButton, ToggleButtonGroup } from "@matteoaliano/forest-ui"` | `value`, `exclusive`, `onChange`, `orientation: "horizontal" \| "vertical"`, `size: "small" \| "medium" \| "large"`, `color`, `fullWidth` | — |
 | `Fab` | `import { Fab } from "@matteoaliano/forest-ui"` | `variant: "circular" \| "extended"`, `size: "small" \| "medium" \| "large"`, `color`, `disabled`, `href` | `color="primary"` |
-| `IconButton` | `import { IconButton } from "@matteoaliano/forest-ui"` | `variant: "text" \| "contained" \| "outlined"` (contained/outlined get the faux-3D button affordance; text is the bare icon), `color: "inherit" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning" \| "default"`, `size: "small" \| "medium" \| "large"`, `disabled`, `disableRipple` | `variant="text"` |
+| `IconButton` | `import { IconButton } from "@matteoaliano/forest-ui"` | `variant: "contained" \| "outlined" \| "icon"` (contained/outlined get the faux-3D button affordance and a 32×32 square; **icon** is the bare icon — use it for quiet chrome like input adornments and app-bar toggles), `color: "inherit" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning" \| "default"`, `size: "small" \| "medium" \| "large"`, `disabled`, `disableRipple` | `variant="contained"` |
 | `Autocomplete` | `import { Autocomplete } from "@matteoaliano/forest-ui"` | `options`, `renderInput` (required), `multiple`, `freeSolo`, `disableClearable`, `loading`, `groupBy`, `limitTags`, `filterOptions` | — |
 | `Search` | `import { Search } from "@matteoaliano/forest-ui"` | `onClear`, `placeholder`, all TextField props (except `variant`) | `variant="outlined"`, `placeholder="Search..."`, built-in search icon and clear button |
 | `Input` | `import { Input } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `placeholder`, `multiline`, `rows`, `startAdornment`, `endAdornment`, `disabled`, `error` — all InputBase props | — |
@@ -74,7 +74,7 @@ import Button from "@mui/material/Button";
 | `ImageList` | `import { ImageList } from "@matteoaliano/forest-ui"` | `variant: "masonry" \| "quilted" \| "standard" \| "woven"`, `cols`, `gap`, `rowHeight` |
 | `ImageListItem` | `import { ImageListItem } from "@matteoaliano/forest-ui"` | `cols`, `rows` |
 | `ImageListItemBar` | `import { ImageListItemBar } from "@matteoaliano/forest-ui"` | `title`, `subtitle`, `position`, `actionIcon` |
-| `Logo` | `import { Logo } from "@matteoaliano/forest-ui"` | `product: "studio" \| "ai-hub" \| "contix" \| "sentimenthub" \| "adgenie" \| "revenue-pulse" \| "contixdb" \| "feedati"`, `variant: "logo" \| "logomark"`, `color: "default" \| "positive" \| "negative" \| "negative-payoff"`, `sx` | `product="studio"`, `variant="logo"`. Logomarks only support `default`/`negative` (others fall back to `default`). `logo` variants include the payoff caption — pass `sx={{ height: 64 }}` or larger to render legibly. |
+| `Logo` | `import { Logo } from "@matteoaliano/forest-ui"` | `product: "studio" \| "ai-hub" \| "contix" \| "sentimenthub" \| "adgenie" \| "revenue-pulse" \| "contixdb" \| "feedati" \| "adwize" \| "control-room" \| "hr-cost-manager" \| "lightbox" \| "product-categorizer" \| "refain" \| "stat" \| "taxonomy"`, `variant: "logo" \| "logomark"`, `color: "default" \| "positive" \| "negative" \| "negative-payoff"`, `sx` | `product="studio"`, `variant="logo"`. Logomarks only support `default`/`negative` (others fall back to `default`). `logo` variants include the payoff caption — pass `sx={{ height: 64 }}` or larger to render legibly. |
 | `Rating` | `import { Rating } from "@matteoaliano/forest-ui"` | `value`, `onChange`, `precision`, `max`, `size`, `readOnly`, `disabled` |
 | `Table` family | `import { Table, TableHead, TableBody, TableRow, TableCell, TableContainer } from "@matteoaliano/forest-ui"` | Table: `size: "small" \| "medium"`, `stickyHeader`; TableCell: `align`, `padding`, `sortDirection`, `variant`; TableRow: `hover`, `selected` | — |
 | `DataGrid` | `import { DataGrid, type GridColDef, type GridRenderCellParams, type GridRowSelectionModel } from "@matteoaliano/forest-ui"` | `rows`, `columns`, `paginationModel`, `sortModel`, `filterModel`, `checkboxSelection`, `loading`, `density`. Types: `GridColDef`, `GridRowsProp`, `GridRowParams`, `GridCellParams`, `GridRenderCellParams`, `GridRowSelectionModel`, `GridSortModel`, `GridFilterModel`, `GridPaginationModel` | — |

package/skills/forest-alkemy-plus/references/patterns.md

@@ -163,7 +163,7 @@ function ConfirmDialog({ open, onClose, onConfirm }) {
 
 **Every authenticated surface renders inside `<AppShell>`, and every routed page inside `<Page>`.** Both are real components — do not hand-roll app chrome or page scaffolds.
 
-- `<AppShell>` owns the sticky AppBar (brand / centered search / actions), the SidebarNav, responsive mobile drawer, and the **color-mode toggle (built in — never add your own)**. The brand auto-flips to negative artwork in dark mode.
+- `<AppShell>` owns the sticky AppBar (brand / centered search / actions), the SidebarNav, responsive mobile drawer, and the **color-mode toggle (built in — never add your own)**. The logomark brand always uses the default full-color artwork; the full wordmark (`logoVariant="full"`) auto-flips to negative artwork in dark mode.
 - `<Page>` owns the flat `background.paper` surface, the 24px gutters, breadcrumbs, the page title, and header actions.
 - **Every widget, chart, or table inside a `<Page>` must live in a `<Card>`.**
 
@@ -190,7 +190,7 @@ export function Layout() {
       search              // true = default centered Search; or pass a node
       actions={
         <>
-          <IconButton size="small" color="inherit">
+          <IconButton variant="icon" size="small" color="inherit">
             <Badge badgeContent={3} color="error" variant="dot">
               <NotificationsOutlined fontSize="small" />
             </Badge>
@@ -246,7 +246,7 @@ function KeywordTable({ rows, columns }: { rows: any[]; columns: GridColDef[] })
             {/* Header */}
             <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
               <Typography variant="h6">{selected.name}</Typography>
-              <IconButton size="small" onClick={() => setSelected(null)}>
+              <IconButton variant="icon" size="small" onClick={() => setSelected(null)}>
                 <CloseOutlined />
               </IconButton>
             </Box>