@marwes-ui/vue 1.2.0 → 1.4.0

package/README.md

@@ -13,7 +13,8 @@ Vue 3 components for the Marwes design system with default styling, typed theme
 
 Vue 3.4+ • TypeScript-first • Default CSS included • ThemeInput • Google Fonts DX • Purpose components
 
-[Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [Vue Storybook](https://storybook-vue.marwes.io/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
+[**marwes.io**](https://marwes.io) — official site, theme builder, and install guides
+[Vue Storybook](https://storybook-vue.marwes.io/latest/) • [Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [GitHub](https://github.com/niklas-westman/marwes)
 
 </div>
 
@@ -44,11 +45,37 @@ This split keeps installation simple for app teams while giving humans and AI ag
 
 ## Install
 
+The Marwes CLI is the official installation path. It installs `@marwes-ui/vue` (with `vue` as a peer), wraps your app root with `MarwesProvider`, and leaves you ready to render components with default Marwes styling — no separate CSS setup.
+
+For full setup guides, theme customization, and the theme builder, visit [marwes.io](https://marwes.io).
+
+### Existing Vue app
+
+Run at the root of your project:
+
+```bash
+pnpm dlx @marwes-ui/cli init --adapter vue
+```
+
+Also works with `npx @marwes-ui/cli`, `yarn dlx @marwes-ui/cli`, and `bunx @marwes-ui/cli`.
+
+### New Vite app
+
+Scaffold a fresh Vite starter with Marwes preinstalled:
+
+```bash
+pnpm create marwes@latest my-app --template vue-ts
+```
+
+### AI-assisted setup
+
+Add `--agentic` to hand setup to an AI coding agent (Claude Code, Cursor, etc.). The CLI runs the normal install, then runs `doctor` and prints the guardrails the agent should follow:
+
 ```bash
-pnpm add @marwes-ui/vue vue
+pnpm dlx @marwes-ui/cli init --adapter vue --agentic
 ```
 
-No preset CSS import is needed. `@marwes-ui/vue` depends on `@marwes-ui/presets` and loads the default Marwes CSS automatically.
+After install, jump to the [Quick Start](#quick-start) below.
 
 ## Quick Start
 
@@ -63,8 +90,8 @@ const subscribed = ref(false)
 
 <template>
   <MarwesProvider>
-    <Input v-model="email" placeholder="Email" ariaLabel="Email" />
-    <Checkbox v-model="subscribed" ariaLabel="Subscribe" />
+    <Input v-model="email" placeholder="Email" label="Email" />
+    <Checkbox v-model="subscribed" label="Subscribe" />
     <Button :variant="ButtonVariant.secondary">Preview</Button>
     <SubmitButton>Save</SubmitButton>
   </MarwesProvider>
@@ -191,7 +218,7 @@ Provider and hooks:
 - `useToast`
 
 Actions and buttons:
-- `Button`
+- `Button`, `IconButton`
 - `PrimaryButton`, `SecondaryButton`, `TextButton`, `SuccessButton`
 - `SubmitButton`, `CancelButton`, `CreateButton`, `DestructiveButton`
 - `LinkButton`, `SaveButton`, `ConfirmButton`, `VerifyButton`
@@ -208,21 +235,26 @@ Forms and inputs:
 - `Radio`, `RadioGroupField`, `YesNoRadioGroup`, `RatingRadioGroup`, `OptionRadioGroup`
 - `Switch`, `SwitchField`, `FeatureToggle`, `PreferenceSwitch`, `PermissionSwitch`
 - `Slider`, `SliderField`, `VolumeSlider`, `BrightnessSlider`, `RadiusSlider`
+- `SegmentedControlField`, `PaginationField`
 
 Content and layout:
 - `Card`, `ProductCard`, `ProfileCard`, `StatCard`
-- `H1`, `H2`, `H3`, `Paragraph`
+- `H1`, `H2`, `H3`, `Paragraph`, `Text`, `TypographyText`
 - `Spacer`, `Spacing`, `Divider`
+- `Breadcrumb`
 - `Icon`
 - `Avatar`, `AvatarBadge`, `AvatarGroup`, `ProfileAvatar`, `PresenceAvatar`, `TeamAvatarGroup`
+- `StatTile`, `Skeleton`
 
 Feedback and overlays:
 - `Badge`, `BadgeGroup`, `StatusBadge`, `PriorityBadge`, `NotificationBadge`
+- `Banner`, `InfoBanner`, `SuccessBanner`, `WarningBanner`, `ErrorBanner`
+- `ProgressBar`
 - `Spinner`, `ButtonSpinner`, `EmptyStateSpinner`
 - `Toast`, `ToastContainer`, `ToastProvider`
 - `SuccessToast`, `ErrorToast`, `WarningToast`, `InfoToast`
-- `Tooltip`, `TooltipGroup`
-- `Dialog`, `DialogModal`, `ConfirmDialog`, `DestructiveDialog`, `InfoDialog`
+- `Tooltip`, `TooltipGroup`, `ContextMenu`
+- `Dialog`, `DialogModal`, `Drawer`, `ConfirmDialog`, `DestructiveDialog`, `InfoDialog`
 - `Accordion`, `AccordionField`, `FAQAccordion`, `SettingsAccordion`, `SectionsAccordion`
 - `Tab`, `TabGroup`, `TabPanel`, `NavigationTabs`, `ContentTabs`, `SettingsTabs`