@matteoaliano/forest-ui 1.1.1 → 1.2.1

package/dist/theme.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteoaliano/forest-ui",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "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.1.1
+  version: 1.2.1
 ---
 
 # Forest UI — Alkemy+ Preset
@@ -16,6 +16,7 @@ metadata:
 4. **Every widget, chart, or table inside a `<Page>` lives in a `<Card>`.** A clickable card wraps its content in `<CardActionArea>`.
 5. **No raw colors or spacing** (`#hex`, `rgb()`, `"16px"`) — use theme tokens via `sx` (`p: 4`, `color: "text.secondary"`, `backgroundColor: "primary.main"`). Never override a component's internals.
 6. **Dark mode is built in** — `defaultMode` on ForestProvider + `useColorScheme`. Never `createTheme`, a second `ThemeProvider`, or `.dark` CSS.
+7. **Never invent props, variants, or color names.** If you're not certain a prop/value exists, look it up in `references/components.md` or the component's exported type — don't guess. Before calling UI work done, run the project's typecheck (`tsc --noEmit` or the build) and fix every error; an unknown prop or variant value failing to compile means it doesn't exist.
 
 ## Setup (once per app)
 
@@ -49,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 | — |
@@ -65,7 +65,7 @@ import Button from "@mui/material/Button";
 | Component | Import | Variants / Key Props | Default Props |
 |-----------|--------|----------------------|---------------|
 | `Badge` | `import { Badge } from "@matteoaliano/forest-ui"` | `variant: "standard" \| "dot"`, `color`, `badgeContent`, `max`, `invisible`, `showZero`, `overlap: "rectangular" \| "circular"`, `anchorOrigin` | — |
-| `Chip` | `import { Chip } from "@matteoaliano/forest-ui"` | `variant: "filled" \| "outlined"`, `color`, `size: "small" \| "medium"`, `label`, `onDelete`, `clickable`, `avatar`, `icon` | `deleteIcon={<CloseOutlined />}` |
+| `Chip` | `import { Chip } from "@matteoaliano/forest-ui"` | `variant: "filled" \| "outlined"`, `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning" \| "teal" \| "orange" \| "purple" \| "pink" \| "fuchsia" \| "orangeDark" \| "green" \| "indigo" \| "rose" \| "blueLight"` (closed union — no other values exist), `size: "small" \| "medium"`, `label`, `onDelete`, `clickable`, `avatar`, `icon` | `deleteIcon={<CloseOutlined />}` |
 | `Divider` | `import { Divider } from "@matteoaliano/forest-ui"` | `orientation: "horizontal" \| "vertical"`, `variant: "fullWidth" \| "inset" \| "middle"`, `textAlign`, `flexItem` | — |
 | `Typography` | `import { Typography } from "@matteoaliano/forest-ui"` | `variant: "h1"-"h6" \| "subtitle1" \| "subtitle2" \| "body1" \| "body2" \| "caption" \| "overline" \| "button"`, `align`, `gutterBottom`, `noWrap` | — |
 | `Tooltip` | `import { Tooltip } from "@matteoaliano/forest-ui"` | `title` (required), `placement` (12 positions), `arrow`, `followCursor`, `enterDelay`, `leaveDelay` | `arrow={true}` |
@@ -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: "wsuite" \| "studio" \| "feedati" \| "ai-hub"`, `variant: "logo" \| "logomark"`, `color: "positive" \| "negative" \| "negative-payoff"`, `sx` | `product="studio"`, `variant="logo"`, `color="positive"`. Studio and AI Hub `logo` variants include the payoff caption — pass `sx={{ height: 64 }}` or larger to render legibly. WSuite/FeeDati only define `positive`; other colors fall back. `negative-payoff` falls back to `negative` for `logomark` (no payoff to invert). |
+| `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. |
 | `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` | — |
@@ -92,7 +92,7 @@ import Button from "@mui/material/Button";
 | `Accordion` family | `import { Accordion, AccordionSummary, AccordionDetails, AccordionActions } from "@matteoaliano/forest-ui"` | `expanded`, `defaultExpanded`, `onChange`, `disabled`, `disableGutters`, `square` | — |
 | `AppBar` + `Toolbar` | `import { AppBar, Toolbar } from "@matteoaliano/forest-ui"` | `position`, `color`, `elevation`; Toolbar: `variant: "dense" \| "regular"` | — |
 | `AppBarNavItem` | `import { AppBarNavItem } from "@matteoaliano/forest-ui"` | `label` (required), `icon`, `selected`, `href`, `sx` — navigation button for AppBar | — |
-| `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action`. **If the card is clickable, wrap its content in `CardActionArea`** (see below) | — |
+| `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "@matteoaliano/forest-ui"` | `color: "primary" \| "secondary"` (secondary = `background.paper` face), `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action`. **If the card is clickable, wrap its content in `CardActionArea`** (see below) | `color="primary"` |
 | `Paper` | `import { Paper } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation` (0-24), `square` | — |
 | `CardActionArea` | `import { CardActionArea } from "@matteoaliano/forest-ui"` | `onClick`, `href`, `disabled`. **REQUIRED for any clickable card** — carries the faux-3D bevel + glaze + press affordance (same interaction language as Button) that signals a card is interactive. Never put `onClick` on a bare `Card`. | `<Card><CardActionArea onClick={…}><CardContent>…</CardContent></CardActionArea></Card>` |
 | `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"`, `hideBackdrop` | `anchor="right"`, `hideBackdrop={true}` |

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>