@matteoaliano/forest-ui 1.2.3 → 1.2.5

package/dist/theme.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteoaliano/forest-ui",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Forest Design System — themed MUI components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

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.3
+  version: 1.2.5
 ---
 
 # 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 (variant: contained (default)|outlined), 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).
+Inputs: Button, ButtonGroup, TextField, Select+MenuItem, MultiSelect, Checkbox, RadioGroup, Switch, ToggleButton + ToggleButtonGroup (variant: outlined (default)|contained, settable on the group), 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

@@ -19,7 +19,7 @@ import Button from "@mui/material/Button";
 | Component | Import | Key Props |
 |-----------|--------|-----------|
 | `AppShell` | `import { AppShell, type AppShellNavItem } from "@matteoaliano/forest-ui"` | **Mandatory app frame.** `navItems: AppShellNavItem[]` (`{ label, icon, active?, href?, onClick?, component?, endAdornment? }` — `component` is the router escape), `nav` (custom sidebar node, overrides navItems), `product`, `logoVariant: "logomark" \| "full"`, `brand` (custom node), `search: boolean \| ReactNode`, `actions`, `sidebarBehavior: "permanent" \| "hover"`, `defaultSidebarOpen`. Renders the color-mode toggle itself (not removable). Children = a `<Page>` |
-| `Page` | `import { Page, type PageBreadcrumb } from "@matteoaliano/forest-ui"` | **Mandatory page scaffold.** `title` (required, h5), `breadcrumbs: PageBreadcrumb[]` (`{ label, href?, onClick?, component? }`; last crumb = plain text), `actions` (right-aligned header node), `disableGutters`, `maxWidth`, `sx`. Owns `background.paper` + 24px gutters. Widgets/charts/tables inside go in `<Card>`s |
+| `Page` | `import { Page, type PageBreadcrumb } from "@matteoaliano/forest-ui"` | **Mandatory page scaffold.** `title` (required, h5), `breadcrumbs: PageBreadcrumb[]` (`{ label, href?, onClick?, component? }`; last crumb = plain text), `actions` (right-aligned header node), `disableGutters`, `maxWidth`, `sx`. Owns `background.paper` + 24px gutters; `<AppShell>` owns the surrounding lifted surface (rounded top-left corner + elevation). Widgets/charts/tables inside go in `<Card>`s |
 | `Box` | `import { Box } from "@matteoaliano/forest-ui"` | `sx`, `component`, all HTML attributes |
 | `Stack` | `import { Stack } from "@matteoaliano/forest-ui"` | `direction`, `spacing`, `divider`, `alignItems`, `justifyContent` |
 | `Grid` | `import { Grid } from "@matteoaliano/forest-ui"` | `container`, `size`, `spacing`, `offset`, `columns`, `direction` |
@@ -45,14 +45,14 @@ import Button from "@mui/material/Button";
 | Component | Import | Variants / Key Props | Default Props |
 |-----------|--------|----------------------|---------------|
 | `Button` | `import { Button } from "@matteoaliano/forest-ui"` | `variant: "contained" \| "outlined" \| "text"`, `color`, `size: "small" \| "medium" \| "large"`, `disabled`, `startIcon`, `endIcon`, `fullWidth`, `href` | `variant="contained"` |
-| `ButtonGroup` | `import { ButtonGroup } from "@matteoaliano/forest-ui"` | `variant: "contained" \| "outlined" \| "text"`, `size: "small" \| "medium" \| "large"`, `orientation: "horizontal" \| "vertical"`, `color`, `disabled`, `fullWidth` | `variant="contained"` |
+| `ButtonGroup` | `import { ButtonGroup } from "@matteoaliano/forest-ui"` | `variant: "contained" \| "outlined" \| "text"`, `size: "small" \| "medium" \| "large"`, `orientation: "horizontal" \| "vertical"`, `color`, `disabled`, `fullWidth` | `variant="outlined"` |
 | `TextField` | `import { TextField } from "@matteoaliano/forest-ui"` | `variant: "outlined" \| "filled" \| "standard"`, `size: "small" \| "medium"`, `label`, `error`, `helperText`, `fullWidth`, `multiline`, `rows`, `type`, `placeholder`, `required`, `disabled` | — |
 | `Select` + `MenuItem` | `import { Select, MenuItem } from "@matteoaliano/forest-ui"` | `variant: "outlined" \| "filled" \| "standard"`, `size: "small" \| "medium"`, `multiple`, `displayEmpty`, `label`, `labelId`, `renderValue`, `native`, `error`, `disabled` | — |
 | `MultiSelect` | `import { MultiSelect } from "@matteoaliano/forest-ui"` | `options: { label, value }[]`, `value: string[]`, `onChange: (values) => void`, `selectAll: boolean`, `selectAllLabel: string`, `label` + all SelectProps | `selectAll={true}`, `selectAllLabel="Select All"` |
 | `Checkbox` | `import { Checkbox } from "@matteoaliano/forest-ui"` | `color: "default" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"`, `size: "small" \| "medium"`, `checked`, `indeterminate`, `disabled` | — |
 | `RadioGroup` + `Radio` | `import { RadioGroup, Radio } from "@matteoaliano/forest-ui"` | `row`, `value`, `onChange`; Radio: `color`, `size: "small" \| "medium" \| "large"`, `disabled` | — |
 | `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`, ToggleButton also `variant: "contained" (default) \| "outlined"` | — |
+| `ToggleButton` + `ToggleButtonGroup` | `import { ToggleButton, ToggleButtonGroup } from "@matteoaliano/forest-ui"` | `value`, `exclusive`, `onChange`, `orientation: "horizontal" \| "vertical"`, `size: "small" \| "medium" \| "large"`, `color`, `fullWidth`; `variant: "outlined" \| "contained"` on **either** the group (styles every child) or a single ToggleButton (wins over the group) | `variant="outlined"` |
 | `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: "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` | — |

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

@@ -164,7 +164,8 @@ 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 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.
+- The AppBar and the sidebar are one continuous L-shaped chrome — no border between them. `<AppShell>` renders the main region as a surface lifted out of that chrome: rounded at the top-left (`container.shellRadius`), flush with the right and bottom window edges, hairline + soft elevation. Below `sm` there is no sidebar, so both top corners round instead. Don't re-create this on a page; it is structural.
+- `<Page>` owns the `background.paper` fill, the 24px gutters, breadcrumbs, the page title, and header actions.
 - **Every widget, chart, or table inside a `<Page>` must live in a `<Card>`.**
 
 ```tsx