@matteoaliano/forest-ui 0.5.1 → 0.5.2

package/package.json

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

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.5.1
+  version: 0.5.2
 ---
 
 # Forest UI — Agency Preset

package/skills/forest-agency/references/components.md

@@ -93,7 +93,7 @@ import Button from "@mui/material/Button";
 | `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action` | — |
 | `Paper` | `import { Paper } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation` (0-24), `square` | — |
 | `CardActionArea` | `import { CardActionArea } from "@matteoaliano/forest-ui"` | `onClick`, `href`, `disabled` |
-| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"` |
+| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"`, `hideBackdrop` | `anchor="right"`, `hideBackdrop={true}` |
 | `SwipeableDrawer` | `import { SwipeableDrawer } from "@matteoaliano/forest-ui"` | `onOpen` (required), `onClose` (required), `open`, `anchor`, `swipeAreaWidth` |
 
 ## Feedback

package/skills/forest-agency/references/patterns.md

@@ -223,6 +223,66 @@ function AppShell({ children }) {
 - `height: "100%"` on SidebarNav — sidebar border extends full height
 - `backgroundColor: "background.paper"` on content — contrasts with sidebar/AppBar background
 
+### Detail Drawer
+
+Use the `Drawer` component when a user clicks an item (table row, card, list entry) to view or edit its details in a side panel. The Drawer defaults to `anchor="right"` and `hideBackdrop={true}`, so it opens on the right without dimming the page — the user retains full visibility of the content behind it.
+
+```tsx
+import { useState } from "react";
+import {
+  Drawer, Box, Typography, IconButton, Divider, Chip, Stack,
+  DataGrid, type GridColDef,
+} from "@matteoaliano/forest-ui";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+
+function KeywordTable({ rows, columns }: { rows: any[]; columns: GridColDef[] }) {
+  const [selected, setSelected] = useState<any | null>(null);
+
+  return (
+    <Box sx={{ display: "flex", height: "100%" }}>
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          onRowClick={(params) => setSelected(params.row)}
+        />
+      </Box>
+
+      <Drawer open={!!selected} onClose={() => setSelected(null)}>
+        {selected && (
+          <Box sx={{ width: 400, p: 3 }}>
+            {/* Header */}
+            <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
+              <Typography variant="h6">{selected.name}</Typography>
+              <IconButton size="small" onClick={() => setSelected(null)}>
+                <CloseOutlined />
+              </IconButton>
+            </Box>
+            <Divider sx={{ mb: 2 }} />
+
+            {/* Detail content */}
+            <Stack direction="row" spacing={1} sx={{ mb: 3 }}>
+              <Chip label={`${selected.volume} vol`} size="small" />
+              <Chip label={selected.category} size="small" variant="outlined" />
+            </Stack>
+            <Typography variant="body2" color="text.secondary">
+              {selected.description}
+            </Typography>
+          </Box>
+        )}
+      </Drawer>
+    </Box>
+  );
+}
+```
+
+**Key points:**
+- `anchor="right"` and `hideBackdrop={true}` are the Forest defaults — no need to set them
+- The Drawer takes full viewport height and overlays the right side of the page
+- Always include a close button in the Drawer header
+- Set a fixed `width` on the Drawer content (e.g. 400px)
+- The content behind the Drawer remains fully visible and interactive
+
 ### Charts
 
 Colors are automatically assigned from the theme's 12-series palette. Override with the `colors` prop if needed.
@@ -311,6 +371,25 @@ import CloseIcon from "@mui/icons-material/CloseOutlined";
 // WRONG: manually building multi-select with Select + Checkbox
 // CORRECT: use the MultiSelect component
 <MultiSelect options={options} value={value} onChange={setValue} />
+
+// WRONG: inline detail panel — a flex Box that sits inside the content area
+// This is not a design system pattern and creates inconsistent layouts
+<Box sx={{ display: "flex" }}>
+  <Box sx={{ flex: 1 }}><DataGrid ... /></Box>
+  {selected && (
+    <Box sx={{ width: 400, borderLeft: 1, borderColor: "divider", p: 2 }}>
+      {/* detail content sitting next to the table */}
+    </Box>
+  )}
+</Box>
+
+// CORRECT: use the Drawer component for detail panels
+// It opens full viewport height on the right, without a backdrop
+<Drawer open={!!selected} onClose={() => setSelected(null)}>
+  <Box sx={{ width: 400, p: 3 }}>
+    {/* detail content */}
+  </Box>
+</Drawer>
 ```
 
 ## TypeScript Props

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: 0.5.1
+  version: 0.5.2
 ---
 
 # Forest UI — Alkemy+ Preset

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

@@ -93,7 +93,7 @@ import Button from "@mui/material/Button";
 | `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action` | — |
 | `Paper` | `import { Paper } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation` (0-24), `square` | — |
 | `CardActionArea` | `import { CardActionArea } from "@matteoaliano/forest-ui"` | `onClick`, `href`, `disabled` |
-| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"` |
+| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"`, `hideBackdrop` | `anchor="right"`, `hideBackdrop={true}` |
 | `SwipeableDrawer` | `import { SwipeableDrawer } from "@matteoaliano/forest-ui"` | `onOpen` (required), `onClose` (required), `open`, `anchor`, `swipeAreaWidth` |
 
 ## Feedback

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

@@ -223,6 +223,66 @@ function AppShell({ children }) {
 - `height: "100%"` on SidebarNav — sidebar border extends full height
 - `backgroundColor: "background.paper"` on content — contrasts with sidebar/AppBar background
 
+### Detail Drawer
+
+Use the `Drawer` component when a user clicks an item (table row, card, list entry) to view or edit its details in a side panel. The Drawer defaults to `anchor="right"` and `hideBackdrop={true}`, so it opens on the right without dimming the page — the user retains full visibility of the content behind it.
+
+```tsx
+import { useState } from "react";
+import {
+  Drawer, Box, Typography, IconButton, Divider, Chip, Stack,
+  DataGrid, type GridColDef,
+} from "@matteoaliano/forest-ui";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+
+function KeywordTable({ rows, columns }: { rows: any[]; columns: GridColDef[] }) {
+  const [selected, setSelected] = useState<any | null>(null);
+
+  return (
+    <Box sx={{ display: "flex", height: "100%" }}>
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          onRowClick={(params) => setSelected(params.row)}
+        />
+      </Box>
+
+      <Drawer open={!!selected} onClose={() => setSelected(null)}>
+        {selected && (
+          <Box sx={{ width: 400, p: 3 }}>
+            {/* Header */}
+            <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
+              <Typography variant="h6">{selected.name}</Typography>
+              <IconButton size="small" onClick={() => setSelected(null)}>
+                <CloseOutlined />
+              </IconButton>
+            </Box>
+            <Divider sx={{ mb: 2 }} />
+
+            {/* Detail content */}
+            <Stack direction="row" spacing={1} sx={{ mb: 3 }}>
+              <Chip label={`${selected.volume} vol`} size="small" />
+              <Chip label={selected.category} size="small" variant="outlined" />
+            </Stack>
+            <Typography variant="body2" color="text.secondary">
+              {selected.description}
+            </Typography>
+          </Box>
+        )}
+      </Drawer>
+    </Box>
+  );
+}
+```
+
+**Key points:**
+- `anchor="right"` and `hideBackdrop={true}` are the Forest defaults — no need to set them
+- The Drawer takes full viewport height and overlays the right side of the page
+- Always include a close button in the Drawer header
+- Set a fixed `width` on the Drawer content (e.g. 400px)
+- The content behind the Drawer remains fully visible and interactive
+
 ### Charts
 
 Colors are automatically assigned from the theme's 12-series palette. Override with the `colors` prop if needed.
@@ -311,6 +371,25 @@ import CloseIcon from "@mui/icons-material/CloseOutlined";
 // WRONG: manually building multi-select with Select + Checkbox
 // CORRECT: use the MultiSelect component
 <MultiSelect options={options} value={value} onChange={setValue} />
+
+// WRONG: inline detail panel — a flex Box that sits inside the content area
+// This is not a design system pattern and creates inconsistent layouts
+<Box sx={{ display: "flex" }}>
+  <Box sx={{ flex: 1 }}><DataGrid ... /></Box>
+  {selected && (
+    <Box sx={{ width: 400, borderLeft: 1, borderColor: "divider", p: 2 }}>
+      {/* detail content sitting next to the table */}
+    </Box>
+  )}
+</Box>
+
+// CORRECT: use the Drawer component for detail panels
+// It opens full viewport height on the right, without a backdrop
+<Drawer open={!!selected} onClose={() => setSelected(null)}>
+  <Box sx={{ width: 400, p: 3 }}>
+    {/* detail content */}
+  </Box>
+</Drawer>
 ```
 
 ## TypeScript Props

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.5.1
+  version: 0.5.2
 ---
 
 # Forest UI — External Preset

package/skills/forest-external/references/components.md

@@ -93,7 +93,7 @@ import Button from "@mui/material/Button";
 | `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action` | — |
 | `Paper` | `import { Paper } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation` (0-24), `square` | — |
 | `CardActionArea` | `import { CardActionArea } from "@matteoaliano/forest-ui"` | `onClick`, `href`, `disabled` |
-| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"` |
+| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"`, `hideBackdrop` | `anchor="right"`, `hideBackdrop={true}` |
 | `SwipeableDrawer` | `import { SwipeableDrawer } from "@matteoaliano/forest-ui"` | `onOpen` (required), `onClose` (required), `open`, `anchor`, `swipeAreaWidth` |
 
 ## Feedback

package/skills/forest-external/references/patterns.md

@@ -223,6 +223,66 @@ function AppShell({ children }) {
 - `height: "100%"` on SidebarNav — sidebar border extends full height
 - `backgroundColor: "background.paper"` on content — contrasts with sidebar/AppBar background
 
+### Detail Drawer
+
+Use the `Drawer` component when a user clicks an item (table row, card, list entry) to view or edit its details in a side panel. The Drawer defaults to `anchor="right"` and `hideBackdrop={true}`, so it opens on the right without dimming the page — the user retains full visibility of the content behind it.
+
+```tsx
+import { useState } from "react";
+import {
+  Drawer, Box, Typography, IconButton, Divider, Chip, Stack,
+  DataGrid, type GridColDef,
+} from "@matteoaliano/forest-ui";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+
+function KeywordTable({ rows, columns }: { rows: any[]; columns: GridColDef[] }) {
+  const [selected, setSelected] = useState<any | null>(null);
+
+  return (
+    <Box sx={{ display: "flex", height: "100%" }}>
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          onRowClick={(params) => setSelected(params.row)}
+        />
+      </Box>
+
+      <Drawer open={!!selected} onClose={() => setSelected(null)}>
+        {selected && (
+          <Box sx={{ width: 400, p: 3 }}>
+            {/* Header */}
+            <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
+              <Typography variant="h6">{selected.name}</Typography>
+              <IconButton size="small" onClick={() => setSelected(null)}>
+                <CloseOutlined />
+              </IconButton>
+            </Box>
+            <Divider sx={{ mb: 2 }} />
+
+            {/* Detail content */}
+            <Stack direction="row" spacing={1} sx={{ mb: 3 }}>
+              <Chip label={`${selected.volume} vol`} size="small" />
+              <Chip label={selected.category} size="small" variant="outlined" />
+            </Stack>
+            <Typography variant="body2" color="text.secondary">
+              {selected.description}
+            </Typography>
+          </Box>
+        )}
+      </Drawer>
+    </Box>
+  );
+}
+```
+
+**Key points:**
+- `anchor="right"` and `hideBackdrop={true}` are the Forest defaults — no need to set them
+- The Drawer takes full viewport height and overlays the right side of the page
+- Always include a close button in the Drawer header
+- Set a fixed `width` on the Drawer content (e.g. 400px)
+- The content behind the Drawer remains fully visible and interactive
+
 ### Charts
 
 Colors are automatically assigned from the theme's 12-series palette. Override with the `colors` prop if needed.
@@ -311,6 +371,25 @@ import CloseIcon from "@mui/icons-material/CloseOutlined";
 // WRONG: manually building multi-select with Select + Checkbox
 // CORRECT: use the MultiSelect component
 <MultiSelect options={options} value={value} onChange={setValue} />
+
+// WRONG: inline detail panel — a flex Box that sits inside the content area
+// This is not a design system pattern and creates inconsistent layouts
+<Box sx={{ display: "flex" }}>
+  <Box sx={{ flex: 1 }}><DataGrid ... /></Box>
+  {selected && (
+    <Box sx={{ width: 400, borderLeft: 1, borderColor: "divider", p: 2 }}>
+      {/* detail content sitting next to the table */}
+    </Box>
+  )}
+</Box>
+
+// CORRECT: use the Drawer component for detail panels
+// It opens full viewport height on the right, without a backdrop
+<Drawer open={!!selected} onClose={() => setSelected(null)}>
+  <Box sx={{ width: 400, p: 3 }}>
+    {/* detail content */}
+  </Box>
+</Drawer>
 ```
 
 ## TypeScript Props

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.5.1
+  version: 0.5.2
 ---
 
 # Forest UI — Internal Preset

package/skills/forest-internal/references/components.md

@@ -93,7 +93,7 @@ import Button from "@mui/material/Button";
 | `Card` family | `import { Card, CardContent, CardHeader, CardActions, CardMedia } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation`, `raised`; CardHeader: `title`, `subheader`, `avatar`, `action` | — |
 | `Paper` | `import { Paper } from "@matteoaliano/forest-ui"` | `variant: "elevation" \| "outlined"`, `elevation` (0-24), `square` | — |
 | `CardActionArea` | `import { CardActionArea } from "@matteoaliano/forest-ui"` | `onClick`, `href`, `disabled` |
-| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"` |
+| `Drawer` | `import { Drawer } from "@matteoaliano/forest-ui"` | `open`, `onClose`, `anchor: "left" \| "right" \| "top" \| "bottom"`, `variant: "permanent" \| "persistent" \| "temporary"`, `hideBackdrop` | `anchor="right"`, `hideBackdrop={true}` |
 | `SwipeableDrawer` | `import { SwipeableDrawer } from "@matteoaliano/forest-ui"` | `onOpen` (required), `onClose` (required), `open`, `anchor`, `swipeAreaWidth` |
 
 ## Feedback

package/skills/forest-internal/references/patterns.md

@@ -223,6 +223,66 @@ function AppShell({ children }) {
 - `height: "100%"` on SidebarNav — sidebar border extends full height
 - `backgroundColor: "background.paper"` on content — contrasts with sidebar/AppBar background
 
+### Detail Drawer
+
+Use the `Drawer` component when a user clicks an item (table row, card, list entry) to view or edit its details in a side panel. The Drawer defaults to `anchor="right"` and `hideBackdrop={true}`, so it opens on the right without dimming the page — the user retains full visibility of the content behind it.
+
+```tsx
+import { useState } from "react";
+import {
+  Drawer, Box, Typography, IconButton, Divider, Chip, Stack,
+  DataGrid, type GridColDef,
+} from "@matteoaliano/forest-ui";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+
+function KeywordTable({ rows, columns }: { rows: any[]; columns: GridColDef[] }) {
+  const [selected, setSelected] = useState<any | null>(null);
+
+  return (
+    <Box sx={{ display: "flex", height: "100%" }}>
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          onRowClick={(params) => setSelected(params.row)}
+        />
+      </Box>
+
+      <Drawer open={!!selected} onClose={() => setSelected(null)}>
+        {selected && (
+          <Box sx={{ width: 400, p: 3 }}>
+            {/* Header */}
+            <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }}>
+              <Typography variant="h6">{selected.name}</Typography>
+              <IconButton size="small" onClick={() => setSelected(null)}>
+                <CloseOutlined />
+              </IconButton>
+            </Box>
+            <Divider sx={{ mb: 2 }} />
+
+            {/* Detail content */}
+            <Stack direction="row" spacing={1} sx={{ mb: 3 }}>
+              <Chip label={`${selected.volume} vol`} size="small" />
+              <Chip label={selected.category} size="small" variant="outlined" />
+            </Stack>
+            <Typography variant="body2" color="text.secondary">
+              {selected.description}
+            </Typography>
+          </Box>
+        )}
+      </Drawer>
+    </Box>
+  );
+}
+```
+
+**Key points:**
+- `anchor="right"` and `hideBackdrop={true}` are the Forest defaults — no need to set them
+- The Drawer takes full viewport height and overlays the right side of the page
+- Always include a close button in the Drawer header
+- Set a fixed `width` on the Drawer content (e.g. 400px)
+- The content behind the Drawer remains fully visible and interactive
+
 ### Charts
 
 Colors are automatically assigned from the theme's 12-series palette. Override with the `colors` prop if needed.
@@ -311,6 +371,25 @@ import CloseIcon from "@mui/icons-material/CloseOutlined";
 // WRONG: manually building multi-select with Select + Checkbox
 // CORRECT: use the MultiSelect component
 <MultiSelect options={options} value={value} onChange={setValue} />
+
+// WRONG: inline detail panel — a flex Box that sits inside the content area
+// This is not a design system pattern and creates inconsistent layouts
+<Box sx={{ display: "flex" }}>
+  <Box sx={{ flex: 1 }}><DataGrid ... /></Box>
+  {selected && (
+    <Box sx={{ width: 400, borderLeft: 1, borderColor: "divider", p: 2 }}>
+      {/* detail content sitting next to the table */}
+    </Box>
+  )}
+</Box>
+
+// CORRECT: use the Drawer component for detail panels
+// It opens full viewport height on the right, without a backdrop
+<Drawer open={!!selected} onClose={() => setSelected(null)}>
+  <Box sx={{ width: 400, p: 3 }}>
+    {/* detail content */}
+  </Box>
+</Drawer>
 ```
 
 ## TypeScript Props