@elyracode/stack-primevue 0.3.5

package/README.md

@@ -0,0 +1,27 @@
+# @elyracode/stack-primevue
+
+Elyra extension for **PrimeVue 4** -- 80+ UI components for Vue 3 with Laravel/Inertia.
+
+## Install
+
+```
+elyra install npm:@elyracode/stack-primevue
+```
+
+## What's included
+
+- **Skills**: Comprehensive PrimeVue 4 component reference (DataTable, Dialog, Forms, Navigation, Toast, ConfirmDialog, theming, Laravel Inertia patterns, gotchas)
+- **Commands**: `/primevue:info` -- show profile status
+
+## Usage
+
+Just ask Elyra about PrimeVue components:
+
+```
+> Build a products CRUD page with DataTable and Dialog
+> Add a filterable sortable table with pagination
+> Create a form with validation using PrimeVue inputs
+> Set up PrimeVue with the Aura theme in my Laravel app
+```
+
+The agent knows PrimeVue's component API, import patterns, theming system, and how to integrate with Laravel Inertia.

package/extensions/index.ts

@@ -0,0 +1,13 @@
+import type { ExtensionAPI } from "@elyracode/coding-agent";
+
+export default function (elyra: ExtensionAPI) {
+    // The primevue skill is auto-loaded from the skills/ directory.
+    // This extension adds stack-aware commands.
+
+    elyra.registerCommand("primevue:info", {
+        description: "Show PrimeVue stack profile information",
+        handler: async (_args, ctx) => {
+            ctx.ui.notify("PrimeVue 4 profile loaded. Skills: primevue. Use /skill:primevue for full component reference.");
+        },
+    });
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@elyracode/stack-primevue",
+  "version": "0.3.5",
+  "description": "Elyra extension for PrimeVue 4 -- 80+ UI components for Vue 3 with Laravel/Inertia",
+  "type": "module",
+  "keywords": ["elyra-package", "primevue", "vue", "laravel", "inertia", "ui-components"],
+  "license": "MIT",
+  "author": "Knut W. Horne",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kwhorne/elyra.git",
+    "directory": "packages/stack-primevue"
+  },
+  "elyra": {
+    "skills": ["./skills"],
+    "extensions": ["./extensions/index.ts"]
+  },
+  "peerDependencies": {
+    "@elyracode/coding-agent": "*",
+    "typebox": "*"
+  },
+  "scripts": {
+    "clean": "echo 'nothing to clean'",
+    "build": "echo 'nothing to build'",
+    "check": "echo 'nothing to check'"
+  }
+}

package/skills/primevue/SKILL.md

@@ -0,0 +1,1199 @@
+---
+name: primevue
+description: Deep knowledge about PrimeVue 4 UI component library for Vue 3. Use when working with PrimeVue components, theming, forms, data tables, dialogs, or any PrimeVue UI patterns in Vue/Laravel/Inertia projects.
+---
+
+# PrimeVue 4 Reference
+
+## Setup
+
+### Installation
+```bash
+npm install primevue @primeuix/themes primeicons
+```
+
+### Plugin Configuration
+```typescript
+// main.ts or app.ts
+import { createApp } from 'vue'
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
+import 'primeicons/primeicons.css'
+
+const app = createApp(App)
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura
+    }
+})
+```
+
+### With Laravel Inertia
+```typescript
+// resources/js/app.ts
+import { createApp, h } from 'vue'
+import { createInertiaApp } from '@inertiajs/vue3'
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
+import ToastService from 'primevue/toastservice'
+import ConfirmationService from 'primevue/confirmationservice'
+import 'primeicons/primeicons.css'
+
+createInertiaApp({
+    resolve: name => {
+        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
+        return pages[`./Pages/${name}.vue`]
+    },
+    setup({ el, App, props, plugin }) {
+        const app = createApp({ render: () => h(App, props) })
+        app.use(plugin)
+        app.use(PrimeVue, { theme: { preset: Aura } })
+        app.use(ToastService)
+        app.use(ConfirmationService)
+        app.mount(el)
+    },
+})
+```
+
+### Available Theme Presets
+- `Aura` -- Modern, clean default theme
+- `Material` -- Material Design inspired
+- `Lara` -- Bootstrap-like familiar style
+- `Nora` -- Minimal, subtle design
+
+Import any preset from `@primeuix/themes/<preset-name-lowercase>`:
+```typescript
+import Aura from '@primeuix/themes/aura'
+import Material from '@primeuix/themes/material'
+import Lara from '@primeuix/themes/lara'
+import Nora from '@primeuix/themes/nora'
+```
+
+## Component Import Pattern
+
+PrimeVue uses individual component imports for tree-shaking. There is no barrel export -- import each component from its own path:
+
+```vue
+<script setup lang="ts">
+import Button from 'primevue/button'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import InputText from 'primevue/inputtext'
+import Dialog from 'primevue/dialog'
+</script>
+```
+
+## Core Components
+
+### Form Components
+
+#### InputText
+```vue
+<InputText v-model="name" placeholder="Enter name" />
+<InputText v-model="email" type="email" :invalid="!!errors.email" />
+```
+
+#### Password
+```vue
+<Password v-model="password" toggleMask :feedback="true" />
+```
+
+#### Textarea
+```vue
+<Textarea v-model="description" rows="5" cols="30" autoResize />
+```
+
+#### Select (Dropdown)
+```vue
+<Select v-model="selectedCity" :options="cities" optionLabel="name"
+    optionValue="code" placeholder="Select a city" />
+```
+
+With grouped options:
+```vue
+<Select v-model="selectedCity" :options="groupedCities" optionLabel="label"
+    optionValue="value" optionGroupLabel="label" optionGroupChildren="items"
+    placeholder="Select a city" />
+```
+
+#### AutoComplete
+```vue
+<AutoComplete v-model="value" :suggestions="filteredItems"
+    @complete="search($event)" field="name" placeholder="Search..." />
+```
+
+#### MultiSelect
+```vue
+<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name"
+    placeholder="Select Cities" :maxSelectedLabels="3" display="chip" />
+```
+
+#### DatePicker (Calendar)
+```vue
+<DatePicker v-model="date" dateFormat="yy-mm-dd" showIcon />
+<DatePicker v-model="dateRange" selectionMode="range" :manualInput="false" />
+<DatePicker v-model="dateTime" showTime hourFormat="24" />
+```
+
+#### Checkbox
+```vue
+<!-- Binary -->
+<Checkbox v-model="accept" :binary="true" inputId="accept" />
+<label for="accept">I accept</label>
+
+<!-- Multiple values -->
+<Checkbox v-model="selectedCategories" :value="category" inputId="cat1" />
+```
+
+#### RadioButton
+```vue
+<div v-for="option in options" :key="option.value">
+    <RadioButton v-model="selected" :value="option.value" :inputId="option.value" />
+    <label :for="option.value">{{ option.label }}</label>
+</div>
+```
+
+#### InputNumber
+```vue
+<InputNumber v-model="price" mode="currency" currency="USD" locale="en-US" />
+<InputNumber v-model="quantity" :min="0" :max="100" showButtons />
+<InputNumber v-model="percent" prefix="%" :minFractionDigits="2" />
+```
+
+#### ToggleSwitch
+```vue
+<ToggleSwitch v-model="checked" />
+```
+
+#### Slider
+```vue
+<Slider v-model="value" :min="0" :max="100" />
+<Slider v-model="rangeValues" range :min="0" :max="100" />
+```
+
+#### ColorPicker
+```vue
+<ColorPicker v-model="color" />
+```
+
+#### InputMask
+```vue
+<InputMask v-model="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" />
+<InputMask v-model="ssn" mask="999-99-9999" />
+```
+
+#### Chips
+```vue
+<Chips v-model="tags" separator="," placeholder="Add tags" />
+```
+
+#### Editor (rich text)
+```vue
+<Editor v-model="content" editorStyle="height: 320px" />
+```
+
+#### FileUpload
+```vue
+<!-- Basic -->
+<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000"
+    @upload="onUpload" :auto="true" chooseLabel="Upload" />
+
+<!-- Advanced with drag-and-drop -->
+<FileUpload name="files[]" url="/api/upload" :multiple="true"
+    accept="image/*" :maxFileSize="5000000">
+    <template #empty>
+        <p>Drag and drop files here to upload.</p>
+    </template>
+</FileUpload>
+```
+
+### Data Display
+
+#### DataTable
+```vue
+<script setup lang="ts">
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+
+interface Product {
+    id: number
+    name: string
+    price: number
+    category: string
+}
+
+const props = defineProps<{ products: Product[] }>()
+</script>
+
+<template>
+    <DataTable :value="products" stripedRows paginator :rows="10"
+        :rowsPerPageOptions="[5, 10, 20, 50]"
+        sortMode="multiple" removableSort
+        v-model:filters="filters" filterDisplay="row">
+        <Column field="name" header="Name" sortable>
+            <template #filter="{ filterModel, filterCallback }">
+                <InputText v-model="filterModel.value" @input="filterCallback()" placeholder="Search" />
+            </template>
+        </Column>
+        <Column field="price" header="Price" sortable>
+            <template #body="{ data }">
+                {{ formatCurrency(data.price) }}
+            </template>
+        </Column>
+        <Column field="category" header="Category" sortable />
+        <Column header="Actions">
+            <template #body="{ data }">
+                <Button icon="pi pi-pencil" severity="info" text rounded @click="edit(data)" />
+                <Button icon="pi pi-trash" severity="danger" text rounded @click="remove(data)" />
+            </template>
+        </Column>
+    </DataTable>
+</template>
+```
+
+#### DataTable Filter Initialization
+```typescript
+import { FilterMatchMode } from '@primevue/core/api'
+
+const filters = ref({
+    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+    category: { value: null, matchMode: FilterMatchMode.EQUALS },
+})
+```
+
+#### DataTable with Selection
+```vue
+<DataTable v-model:selection="selectedProducts" :value="products"
+    selectionMode="multiple" dataKey="id">
+    <Column selectionMode="multiple" headerStyle="width: 3rem" />
+    <Column field="name" header="Name" />
+</DataTable>
+```
+
+#### DataTable with Expandable Rows
+```vue
+<DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id">
+    <Column expander style="width: 5rem" />
+    <Column field="name" header="Name" />
+    <template #expansion="{ data }">
+        <div class="p-4">
+            <h5>Orders for {{ data.name }}</h5>
+            <DataTable :value="data.orders">
+                <Column field="id" header="Id" />
+                <Column field="amount" header="Amount" />
+            </DataTable>
+        </div>
+    </template>
+</DataTable>
+```
+
+#### DataTable with Lazy Loading (server-side)
+```vue
+<DataTable :value="products" :lazy="true" :totalRecords="totalRecords"
+    :loading="loading" @page="onPage" @sort="onSort" @filter="onFilter"
+    paginator :rows="10" dataKey="id"
+    v-model:filters="filters" filterDisplay="row">
+    <Column field="name" header="Name" sortable />
+</DataTable>
+```
+
+```typescript
+function onPage(event: DataTablePageEvent) {
+    router.get(route('products.index'), {
+        page: event.page + 1,
+        per_page: event.rows,
+    }, { preserveState: true })
+}
+```
+
+#### DataTable with Inline Editing
+```vue
+<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete">
+    <Column field="name" header="Name">
+        <template #editor="{ data, field }">
+            <InputText v-model="data[field]" autofocus />
+        </template>
+    </Column>
+    <Column field="price" header="Price">
+        <template #editor="{ data, field }">
+            <InputNumber v-model="data[field]" mode="currency" currency="USD" />
+        </template>
+    </Column>
+</DataTable>
+```
+
+#### Tree
+```vue
+<Tree :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys" />
+```
+
+#### TreeTable
+```vue
+<TreeTable :value="nodes">
+    <Column field="name" header="Name" expander />
+    <Column field="size" header="Size" />
+    <Column field="type" header="Type" />
+</TreeTable>
+```
+
+#### Timeline
+```vue
+<Timeline :value="events">
+    <template #content="{ item }">
+        <Card>
+            <template #title>{{ item.status }}</template>
+            <template #content>{{ item.date }}</template>
+        </Card>
+    </template>
+</Timeline>
+```
+
+#### OrderList
+```vue
+<OrderList v-model="products" dataKey="id">
+    <template #option="{ option }">
+        <div class="flex items-center gap-2">
+            <span>{{ option.name }}</span>
+        </div>
+    </template>
+</OrderList>
+```
+
+### Overlay Components
+
+#### Dialog
+```vue
+<Dialog v-model:visible="visible" header="Edit Product" :style="{ width: '450px' }" modal>
+    <div class="flex flex-col gap-4">
+        <div>
+            <label class="font-semibold">Name</label>
+            <InputText v-model="product.name" class="w-full" />
+        </div>
+        <div>
+            <label class="font-semibold">Price</label>
+            <InputNumber v-model="product.price" mode="currency" currency="USD" class="w-full" />
+        </div>
+    </div>
+    <template #footer>
+        <Button label="Cancel" severity="secondary" @click="visible = false" />
+        <Button label="Save" @click="save" />
+    </template>
+</Dialog>
+```
+
+#### ConfirmDialog
+```vue
+<script setup>
+import { useConfirm } from 'primevue/useconfirm'
+const confirm = useConfirm()
+
+function confirmDelete() {
+    confirm.require({
+        message: 'Are you sure you want to delete this?',
+        header: 'Confirm',
+        icon: 'pi pi-exclamation-triangle',
+        rejectProps: { label: 'Cancel', severity: 'secondary' },
+        acceptProps: { label: 'Delete', severity: 'danger' },
+        accept: () => { /* delete logic */ },
+    })
+}
+</script>
+<template>
+    <ConfirmDialog />
+    <Button label="Delete" severity="danger" @click="confirmDelete" />
+</template>
+```
+
+#### ConfirmPopup
+```vue
+<script setup>
+import { useConfirm } from 'primevue/useconfirm'
+const confirm = useConfirm()
+
+function confirmAction(event: Event) {
+    confirm.require({
+        target: event.currentTarget as HTMLElement,
+        message: 'Proceed?',
+        accept: () => { /* proceed */ },
+    })
+}
+</script>
+<template>
+    <ConfirmPopup />
+    <Button label="Confirm" @click="confirmAction($event)" />
+</template>
+```
+
+#### Toast
+```vue
+<script setup>
+import { useToast } from 'primevue/usetoast'
+const toast = useToast()
+
+function showSuccess() {
+    toast.add({ severity: 'success', summary: 'Saved', detail: 'Record updated', life: 3000 })
+}
+function showError() {
+    toast.add({ severity: 'error', summary: 'Error', detail: 'Something went wrong', life: 5000 })
+}
+</script>
+<template>
+    <Toast />
+    <Button label="Save" @click="showSuccess" />
+</template>
+```
+
+Toast severity options: `success`, `info`, `warn`, `error`, `secondary`, `contrast`.
+
+#### Popover (Overlay Panel)
+```vue
+<script setup>
+import { ref } from 'vue'
+import Popover from 'primevue/popover'
+
+const op = ref()
+function toggle(event: Event) {
+    op.value.toggle(event)
+}
+</script>
+<template>
+    <Button icon="pi pi-info-circle" @click="toggle" />
+    <Popover ref="op">
+        <p>Additional information here.</p>
+    </Popover>
+</template>
+```
+
+#### Drawer (Sidebar)
+```vue
+<Drawer v-model:visible="visible" header="Menu" position="left">
+    <Menu :model="menuItems" />
+</Drawer>
+```
+
+Position options: `left`, `right`, `top`, `bottom`, `full`.
+
+### Navigation
+
+#### Menubar
+```vue
+<Menubar :model="items">
+    <template #start>
+        <img src="/logo.svg" alt="Logo" class="h-8" />
+    </template>
+    <template #end>
+        <Button icon="pi pi-user" rounded text />
+    </template>
+</Menubar>
+```
+
+Menu item model:
+```typescript
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'pi pi-home',
+        command: () => router.visit('/')
+    },
+    {
+        label: 'Products',
+        icon: 'pi pi-box',
+        items: [
+            { label: 'List', icon: 'pi pi-list', command: () => router.visit('/products') },
+            { label: 'Create', icon: 'pi pi-plus', command: () => router.visit('/products/create') },
+        ]
+    },
+])
+```
+
+#### TabMenu
+```vue
+<TabMenu :model="tabs" />
+```
+
+#### Breadcrumb
+```vue
+<Breadcrumb :home="{ icon: 'pi pi-home', to: '/' }" :model="breadcrumbs" />
+```
+
+```typescript
+const breadcrumbs = ref([
+    { label: 'Products', to: '/products' },
+    { label: 'Edit' },
+])
+```
+
+#### Steps
+```vue
+<Steps :model="steps" :activeStep="activeStep" />
+```
+
+```typescript
+const steps = ref([
+    { label: 'Details' },
+    { label: 'Pricing' },
+    { label: 'Confirm' },
+])
+```
+
+#### ContextMenu
+```vue
+<script setup>
+import { ref } from 'vue'
+import ContextMenu from 'primevue/contextmenu'
+
+const cm = ref()
+const items = ref([
+    { label: 'Edit', icon: 'pi pi-pencil' },
+    { label: 'Delete', icon: 'pi pi-trash' },
+])
+</script>
+<template>
+    <div @contextmenu="cm.show($event)">
+        Right-click here
+    </div>
+    <ContextMenu ref="cm" :model="items" />
+</template>
+```
+
+#### MegaMenu
+```vue
+<MegaMenu :model="megaItems" orientation="horizontal" />
+```
+
+#### PanelMenu
+```vue
+<PanelMenu :model="items" />
+```
+
+#### TieredMenu
+```vue
+<TieredMenu :model="items" popup ref="menu" />
+<Button label="Menu" @click="menu.toggle($event)" />
+```
+
+### Button Variants
+```vue
+<Button label="Primary" />
+<Button label="Secondary" severity="secondary" />
+<Button label="Success" severity="success" />
+<Button label="Info" severity="info" />
+<Button label="Warning" severity="warning" />
+<Button label="Danger" severity="danger" />
+<Button label="Help" severity="help" />
+<Button label="Contrast" severity="contrast" />
+
+<!-- Variants -->
+<Button label="Outlined" outlined />
+<Button label="Text" text />
+<Button label="Rounded" rounded />
+<Button label="Raised" raised />
+<Button icon="pi pi-check" />
+<Button label="Loading" :loading="isLoading" />
+
+<!-- Link button -->
+<Button label="Link" link />
+
+<!-- Icon-only -->
+<Button icon="pi pi-check" rounded aria-label="Confirm" />
+
+<!-- Sizes -->
+<Button label="Small" size="small" />
+<Button label="Large" size="large" />
+```
+
+#### SplitButton
+```vue
+<SplitButton label="Save" :model="splitItems" @click="save" />
+```
+
+```typescript
+const splitItems = ref([
+    { label: 'Save as Draft', command: () => saveDraft() },
+    { label: 'Export', command: () => exportData() },
+])
+```
+
+#### SpeedDial
+```vue
+<SpeedDial :model="dialItems" direction="up" />
+```
+
+### Layout Components
+
+#### Card
+```vue
+<Card>
+    <template #title>Title</template>
+    <template #subtitle>Subtitle</template>
+    <template #content>
+        <p>Content here</p>
+    </template>
+    <template #footer>
+        <Button label="Save" />
+        <Button label="Cancel" severity="secondary" />
+    </template>
+</Card>
+```
+
+#### Tabs
+```vue
+<Tabs value="0">
+    <TabList>
+        <Tab value="0">General</Tab>
+        <Tab value="1">Security</Tab>
+        <Tab value="2">Notifications</Tab>
+    </TabList>
+    <TabPanels>
+        <TabPanel value="0">General content</TabPanel>
+        <TabPanel value="1">Security content</TabPanel>
+        <TabPanel value="2">Notification content</TabPanel>
+    </TabPanels>
+</Tabs>
+```
+
+#### Accordion
+```vue
+<Accordion>
+    <AccordionPanel value="0">
+        <AccordionHeader>Section 1</AccordionHeader>
+        <AccordionContent>Content 1</AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel value="1">
+        <AccordionHeader>Section 2</AccordionHeader>
+        <AccordionContent>Content 2</AccordionContent>
+    </AccordionPanel>
+</Accordion>
+```
+
+#### Fieldset
+```vue
+<Fieldset legend="Address" :toggleable="true">
+    <p>Content here</p>
+</Fieldset>
+```
+
+#### Panel
+```vue
+<Panel header="Settings" :toggleable="true">
+    <p>Panel content</p>
+</Panel>
+```
+
+#### Divider
+```vue
+<Divider />
+<Divider layout="vertical" />
+<Divider align="center">
+    <span class="text-sm text-surface-500">OR</span>
+</Divider>
+```
+
+#### Splitter
+```vue
+<Splitter style="height: 300px">
+    <SplitterPanel :size="40">Left panel</SplitterPanel>
+    <SplitterPanel :size="60">Right panel</SplitterPanel>
+</Splitter>
+```
+
+#### ScrollPanel
+```vue
+<ScrollPanel style="width: 100%; height: 300px">
+    <p>Scrollable content...</p>
+</ScrollPanel>
+```
+
+### Message / Feedback
+
+#### Message
+```vue
+<Message severity="success">Operation completed</Message>
+<Message severity="info">Information message</Message>
+<Message severity="warn">Warning message</Message>
+<Message severity="error">Error occurred</Message>
+<Message severity="secondary">Secondary message</Message>
+<Message severity="contrast">Contrast message</Message>
+```
+
+#### InlineMessage
+```vue
+<InlineMessage severity="error">Username is required</InlineMessage>
+```
+
+#### Tag
+```vue
+<Tag value="Active" severity="success" />
+<Tag value="Pending" severity="warn" />
+<Tag value="Inactive" severity="danger" />
+<Tag icon="pi pi-check" value="Approved" severity="success" rounded />
+```
+
+#### Badge
+```vue
+<Badge value="4" severity="danger" />
+<Button label="Inbox" badge="3" badgeSeverity="danger" />
+
+<!-- Overlay badge -->
+<OverlayBadge value="2">
+    <i class="pi pi-bell" style="font-size: 1.5rem" />
+</OverlayBadge>
+```
+
+#### ProgressBar
+```vue
+<ProgressBar :value="50" />
+<ProgressBar mode="indeterminate" style="height: 6px" />
+```
+
+#### ProgressSpinner
+```vue
+<ProgressSpinner style="width: 50px; height: 50px" />
+```
+
+#### Skeleton
+```vue
+<Skeleton width="100%" height="2rem" class="mb-2" />
+<Skeleton shape="circle" size="4rem" />
+<Skeleton width="10rem" class="mb-2" />
+```
+
+#### Chip
+```vue
+<Chip label="Vue" icon="pi pi-check" />
+<Chip label="Removable" removable @remove="onRemove" />
+```
+
+#### Avatar
+```vue
+<Avatar label="KH" shape="circle" />
+<Avatar image="/user.jpg" shape="circle" size="large" />
+
+<AvatarGroup>
+    <Avatar image="/user1.jpg" shape="circle" />
+    <Avatar image="/user2.jpg" shape="circle" />
+    <Avatar label="+3" shape="circle" />
+</AvatarGroup>
+```
+
+#### BlockUI
+```vue
+<BlockUI :blocked="blocked">
+    <Panel header="Content">
+        <p>This will be blocked</p>
+    </Panel>
+</BlockUI>
+```
+
+### Misc Components
+
+#### Image
+```vue
+<Image src="/product.jpg" alt="Product" width="250" preview />
+```
+
+#### Galleria
+```vue
+<Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px">
+    <template #item="{ item }">
+        <img :src="item.src" :alt="item.alt" style="width: 100%" />
+    </template>
+    <template #thumbnail="{ item }">
+        <img :src="item.thumbnailSrc" :alt="item.alt" />
+    </template>
+</Galleria>
+```
+
+#### Carousel
+```vue
+<Carousel :value="products" :numVisible="3" :numScroll="1">
+    <template #item="{ data }">
+        <Card>
+            <template #title>{{ data.name }}</template>
+            <template #content>{{ data.description }}</template>
+        </Card>
+    </template>
+</Carousel>
+```
+
+#### VirtualScroller
+```vue
+<VirtualScroller :items="largeList" :itemSize="50" style="height: 400px">
+    <template #item="{ item, options }">
+        <div :class="{ 'surface-hover': options.odd }" class="p-2">
+            {{ item.name }}
+        </div>
+    </template>
+</VirtualScroller>
+```
+
+#### Tooltip (directive)
+```vue
+<Button v-tooltip="'Save changes'" label="Save" />
+<Button v-tooltip.top="'Top tooltip'" label="Top" />
+<Button v-tooltip.bottom="'Bottom'" label="Bottom" />
+```
+
+#### Ripple (directive)
+```vue
+<div v-ripple class="p-4 cursor-pointer">Click me</div>
+```
+
+## Theming with Tailwind CSS
+
+PrimeVue 4 uses a design token system that integrates with Tailwind:
+
+```typescript
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            darkModeSelector: '.dark',
+            cssLayer: {
+                name: 'primevue',
+                order: 'tailwind-base, primevue, tailwind-utilities'
+            }
+        }
+    }
+})
+```
+
+### Dark Mode
+PrimeVue respects the `darkModeSelector` option. With `'.dark'`, toggle via:
+```typescript
+document.documentElement.classList.toggle('dark')
+```
+
+### Customizing Theme Tokens
+```typescript
+import { definePreset } from '@primeuix/themes'
+import Aura from '@primeuix/themes/aura'
+
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '{indigo.50}',
+            100: '{indigo.100}',
+            200: '{indigo.200}',
+            300: '{indigo.300}',
+            400: '{indigo.400}',
+            500: '{indigo.500}',
+            600: '{indigo.600}',
+            700: '{indigo.700}',
+            800: '{indigo.800}',
+            900: '{indigo.900}',
+            950: '{indigo.950}',
+        }
+    }
+})
+
+app.use(PrimeVue, { theme: { preset: MyPreset } })
+```
+
+### Tailwind CSS Layer Configuration
+Add to `tailwind.config.js` / CSS:
+```css
+@layer tailwind-base, primevue, tailwind-utilities;
+
+@layer tailwind-base {
+    @tailwind base;
+}
+@layer tailwind-utilities {
+    @tailwind components;
+    @tailwind utilities;
+}
+```
+
+## PrimeIcons
+
+Common icons:
+```vue
+<i class="pi pi-check" />
+<i class="pi pi-times" />
+<i class="pi pi-search" />
+<i class="pi pi-user" />
+<i class="pi pi-cog" />
+<i class="pi pi-home" />
+<i class="pi pi-file" />
+<i class="pi pi-trash" />
+<i class="pi pi-pencil" />
+<i class="pi pi-plus" />
+<i class="pi pi-minus" />
+<i class="pi pi-download" />
+<i class="pi pi-upload" />
+<i class="pi pi-eye" />
+<i class="pi pi-eye-slash" />
+<i class="pi pi-filter" />
+<i class="pi pi-sort-alt" />
+<i class="pi pi-refresh" />
+<i class="pi pi-bell" />
+<i class="pi pi-calendar" />
+<i class="pi pi-chart-bar" />
+<i class="pi pi-envelope" />
+<i class="pi pi-exclamation-triangle" />
+<i class="pi pi-info-circle" />
+<i class="pi pi-spinner pi-spin" />
+```
+
+Spin animation: add `pi-spin` class to any icon.
+
+## Common Patterns with Laravel Inertia
+
+### CRUD Page with DataTable + Dialog
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useForm, router } from '@inertiajs/vue3'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import InputText from 'primevue/inputtext'
+import InputNumber from 'primevue/inputnumber'
+import Toast from 'primevue/toast'
+import ConfirmDialog from 'primevue/confirmdialog'
+import { useToast } from 'primevue/usetoast'
+import { useConfirm } from 'primevue/useconfirm'
+
+interface Product {
+    id: number
+    name: string
+    price: number
+}
+
+const props = defineProps<{ products: Product[] }>()
+const toast = useToast()
+const confirm = useConfirm()
+
+const dialogVisible = ref(false)
+const editMode = ref(false)
+const form = useForm({ id: 0, name: '', price: 0 })
+
+function openNew() {
+    form.reset()
+    editMode.value = false
+    dialogVisible.value = true
+}
+
+function openEdit(product: Product) {
+    form.id = product.id
+    form.name = product.name
+    form.price = product.price
+    editMode.value = true
+    dialogVisible.value = true
+}
+
+function save() {
+    if (editMode.value) {
+        form.put(route('products.update', form.id), {
+            onSuccess: () => {
+                dialogVisible.value = false
+                toast.add({ severity: 'success', summary: 'Updated', life: 3000 })
+            },
+        })
+    } else {
+        form.post(route('products.store'), {
+            onSuccess: () => {
+                dialogVisible.value = false
+                toast.add({ severity: 'success', summary: 'Created', life: 3000 })
+            },
+        })
+    }
+}
+
+function destroy(product: Product) {
+    confirm.require({
+        message: `Delete ${product.name}?`,
+        header: 'Confirm',
+        acceptProps: { label: 'Delete', severity: 'danger' },
+        rejectProps: { label: 'Cancel', severity: 'secondary' },
+        accept: () => {
+            router.delete(route('products.destroy', product.id), {
+                onSuccess: () => {
+                    toast.add({ severity: 'success', summary: 'Deleted', life: 3000 })
+                },
+            })
+        },
+    })
+}
+</script>
+
+<template>
+    <Toast />
+    <ConfirmDialog />
+
+    <div class="flex justify-between items-center mb-4">
+        <h1 class="text-2xl font-bold">Products</h1>
+        <Button label="New Product" icon="pi pi-plus" @click="openNew" />
+    </div>
+
+    <DataTable :value="products" stripedRows paginator :rows="10"
+        :rowsPerPageOptions="[5, 10, 20, 50]">
+        <Column field="name" header="Name" sortable />
+        <Column field="price" header="Price" sortable>
+            <template #body="{ data }">
+                ${{ data.price.toFixed(2) }}
+            </template>
+        </Column>
+        <Column header="Actions" style="width: 8rem">
+            <template #body="{ data }">
+                <Button icon="pi pi-pencil" text rounded severity="info" @click="openEdit(data)" />
+                <Button icon="pi pi-trash" text rounded severity="danger" @click="destroy(data)" />
+            </template>
+        </Column>
+    </DataTable>
+
+    <Dialog v-model:visible="dialogVisible"
+        :header="editMode ? 'Edit Product' : 'New Product'"
+        :style="{ width: '400px' }" modal>
+        <div class="flex flex-col gap-4">
+            <div>
+                <label class="font-semibold block mb-1">Name</label>
+                <InputText v-model="form.name" class="w-full" :invalid="!!form.errors.name" />
+                <small v-if="form.errors.name" class="text-red-500">{{ form.errors.name }}</small>
+            </div>
+            <div>
+                <label class="font-semibold block mb-1">Price</label>
+                <InputNumber v-model="form.price" mode="currency" currency="USD" class="w-full"
+                    :invalid="!!form.errors.price" />
+                <small v-if="form.errors.price" class="text-red-500">{{ form.errors.price }}</small>
+            </div>
+        </div>
+        <template #footer>
+            <Button label="Cancel" severity="secondary" @click="dialogVisible = false" />
+            <Button label="Save" :loading="form.processing" @click="save" />
+        </template>
+    </Dialog>
+</template>
+```
+
+### Layout with Menubar + Sidebar
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { router, usePage } from '@inertiajs/vue3'
+import Menubar from 'primevue/menubar'
+import Drawer from 'primevue/drawer'
+import Menu from 'primevue/menu'
+import Button from 'primevue/button'
+import Avatar from 'primevue/avatar'
+
+const sidebarVisible = ref(false)
+const page = usePage()
+
+const menuItems = ref([
+    { label: 'Dashboard', icon: 'pi pi-home', command: () => router.visit('/dashboard') },
+    { label: 'Products', icon: 'pi pi-box', command: () => router.visit('/products') },
+    { label: 'Orders', icon: 'pi pi-shopping-cart', command: () => router.visit('/orders') },
+    { label: 'Customers', icon: 'pi pi-users', command: () => router.visit('/customers') },
+    { separator: true },
+    { label: 'Settings', icon: 'pi pi-cog', command: () => router.visit('/settings') },
+])
+
+const navItems = ref([
+    { label: 'Home', icon: 'pi pi-home', command: () => router.visit('/') },
+    {
+        label: 'Products',
+        icon: 'pi pi-box',
+        items: [
+            { label: 'All Products', command: () => router.visit('/products') },
+            { label: 'Categories', command: () => router.visit('/categories') },
+        ]
+    },
+])
+</script>
+
+<template>
+    <Menubar :model="navItems">
+        <template #start>
+            <Button icon="pi pi-bars" text rounded @click="sidebarVisible = true" class="mr-2" />
+            <span class="font-bold text-lg">MyApp</span>
+        </template>
+        <template #end>
+            <Avatar :label="page.props.auth.user.name[0]" shape="circle" />
+        </template>
+    </Menubar>
+
+    <Drawer v-model:visible="sidebarVisible" header="Navigation">
+        <Menu :model="menuItems" class="w-full border-0" />
+    </Drawer>
+
+    <main class="p-4">
+        <slot />
+    </main>
+</template>
+```
+
+### Form Page with Validation Errors
+```vue
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3'
+import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
+import Textarea from 'primevue/textarea'
+import DatePicker from 'primevue/datepicker'
+import Button from 'primevue/button'
+
+const props = defineProps<{ categories: { id: number; name: string }[] }>()
+
+const form = useForm({
+    name: '',
+    category_id: null as number | null,
+    description: '',
+    published_at: null as Date | null,
+})
+
+function submit() {
+    form.post(route('articles.store'))
+}
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="max-w-lg flex flex-col gap-4">
+        <div>
+            <label class="font-semibold block mb-1">Name</label>
+            <InputText v-model="form.name" class="w-full" :invalid="!!form.errors.name" />
+            <small v-if="form.errors.name" class="text-red-500">{{ form.errors.name }}</small>
+        </div>
+
+        <div>
+            <label class="font-semibold block mb-1">Category</label>
+            <Select v-model="form.category_id" :options="categories"
+                optionLabel="name" optionValue="id"
+                placeholder="Select category" class="w-full"
+                :invalid="!!form.errors.category_id" />
+            <small v-if="form.errors.category_id" class="text-red-500">{{ form.errors.category_id }}</small>
+        </div>
+
+        <div>
+            <label class="font-semibold block mb-1">Description</label>
+            <Textarea v-model="form.description" rows="4" class="w-full" autoResize />
+        </div>
+
+        <div>
+            <label class="font-semibold block mb-1">Publish Date</label>
+            <DatePicker v-model="form.published_at" dateFormat="yy-mm-dd" showIcon class="w-full" />
+        </div>
+
+        <div class="flex gap-2">
+            <Button type="submit" label="Save" :loading="form.processing" />
+            <Button type="button" label="Reset" severity="secondary" @click="form.reset()" />
+        </div>
+    </form>
+</template>
+```
+
+## Common Gotchas
+
+1. **Import each component individually** -- no global registration. Use `import Button from 'primevue/button'`, not from a barrel export.
+2. **Services need plugin registration** -- Toast and ConfirmDialog require `app.use(ToastService)` and `app.use(ConfirmationService)` in app.ts before use.
+3. **CSS layer order matters with Tailwind** -- Set `cssLayer` in theme config so Tailwind utilities can override PrimeVue styles. Without it, PrimeVue styles may override Tailwind classes.
+4. **v-model naming** -- Some components use named v-model: `v-model:visible` (Dialog, Drawer), `v-model:selection` (DataTable), `v-model:expandedRows` (DataTable), `v-model:filters` (DataTable), `v-model:selectionKeys` (Tree).
+5. **DataTable needs `dataKey`** -- Always set `dataKey="id"` when using selection, expandable rows, or row reordering.
+6. **Theme presets are imported from `@primeuix/themes`** -- not from `primevue`. The old `primevue/themes/*` path no longer works in v4.
+7. **PrimeIcons** -- Install separately: `npm install primeicons`. Import in app.ts: `import 'primeicons/primeicons.css'`.
+8. **Component rename in v4** -- `Dropdown` is now `Select`. `Calendar` is now `DatePicker`. `OverlayPanel` is now `Popover`. `Sidebar` is now `Drawer`. `InputSwitch` is now `ToggleSwitch`. `TabView`/`TabPanel` are now `Tabs`/`TabList`/`Tab`/`TabPanels`/`TabPanel`. `AccordionTab` is now `AccordionPanel`/`AccordionHeader`/`AccordionContent`.
+9. **FilterMatchMode import** -- In v4, import from `@primevue/core/api`, not from `primevue/api`.
+10. **No global CSS import** -- PrimeVue 4 does not require `import 'primevue/resources/themes/...'` or `import 'primevue/resources/primevue.min.css'`. The theme preset handles everything.