@machinemetrics/mm-react-components 1.1.3 → 1.2.1

package/dist/cursor-skill/mm-carbide/reference.md

@@ -5,6 +5,7 @@
 - **Colors and tokens:** Use only CSS variables / semantic tokens (e.g. `bg-background`, `text-foreground`, `text-muted-foreground`, `border-border`, `bg-primary`, `text-destructive`). Never use raw Tailwind color classes like `bg-blue-600` or `text-gray-500`.
 - **Variants and sizes:** Use component props: `variant="default"|"destructive"|"outline"|"secondary"|"ghost"|"link"`, `size="sm"|"md"|"lg"|"icon"` where supported. Same variant names apply across Button, Badge, and other components.
 - **Layout:** Use `flex`, `grid`, and `gap-*` for spacing; avoid ad-hoc margins between siblings.
+- **Converting to Carbide:** Remove existing inline styles and component CSS; map to library components and use variants/tokens. See SKILL.md section “Converting to Carbide.”
 - **Setup:** Import library styles (e.g. `import '@machinemetrics/mm-react-components/styles'`) and wrap the app (or Carbide root) in `<div className="carbide">` so the theme and fonts apply.
 
 ## Component discovery
@@ -33,10 +34,11 @@ Import from the package main entry (see `src/index.ts` in the repo for the full
 
 There is no "Panel" component. For panel-like or card-like regions where content may be longer than the visible area, use **ScrollArea** for the scrollable region. **Card** is structure only (border, sections) and does not scroll.
 
-- Use **ScrollArea** with a fixed or max height (e.g. `className="h-[300px]"` or `max-h-[50vh]`) when content can overflow.
+- **ScrollArea only scrolls when it has a constrained height.** Without a height (or max-height) on the ScrollArea root, the container grows with content and no scrollbar appears. Always set an explicit height: e.g. `className="h-[300px]"` or `max-h-[50vh]`.
+- In a **flex column** (e.g. Card with `flex flex-col max-h-[80vh]`), use `ScrollArea className="flex-1 min-h-0"`. The `min-h-0` is required so the flex item can shrink below its content size; without it, ScrollArea won’t scroll.
 - Put long content inside ScrollArea; use Card for the outer container and ScrollArea inside CardContent (or as the body) when the body should scroll.
 
-Example: scrollable card body — wrap the body in ScrollArea with a height so the card doesn’t grow past the viewport; the content inside scrolls.
+**If ScrollArea doesn’t scroll:** Ensure the ScrollArea element has a bounded height (fixed height, max-height, or `flex-1 min-h-0` inside a constrained flex container). Never use ScrollArea without one of these.
 
 ## Patterns