working-with-pm-design-kit

# Working With the PM Design Kit ## Overview The Packmind design kit (`@packmind/ui`) is a component library built on top of Chakra UI v3. All components are prefixed with `PM` and provide a consistent, themed API across the application. The source lives in `packages/ui/`. **Import pattern**: Always import from `@packmind/ui`, never from Chakra UI directly. ```tsx import { PMButton, PMBox, PMHeading, PMText } from '@packmind/ui'; ``` ## Component Selection Guide Before reaching for a raw `<div>` or Chakra primitive, check if a PM component exists. Consult `references/component-catalog.md` for the full inventory organized by category. ### Decision Flow 1. **Need a layout container?** Use `PMBox`, `PMVStack`, `PMHStack`, `PMFlex`, or `PMGrid`. 2. **Need text?** Use `PMHeading` (with `level` prop for semantic h1–h6) or `PMText` (with `variant` and `color`). 3. **Need a button?** Use `PMButton` with the appropriate `variant`: `primary` for main actions, `secondary`/`ghost` for secondary, `danger` for destructive. 4. **Need user input?** Use `PMInput`, `PMTextArea`, `PMSelect`, `PMCheckbox`, `PMSwitch`, or `PMRadioGroup`. 5. **Need feedback?** Use `pmToaster` for transient messages, `PMAlert` for inline messages, `PMConfirmationModal` for destructive confirmations. 6. **Need an overlay?** Use `PMDialog` for modals, `PMPopover` for contextual info, `PMDrawer` for side panels. 7. **Need to show nothing?** Use `PMEmptyState` with title, description, icon, and an action button...