diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..8c3cbf6
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,840 @@
+# Copilot Instructions - @ciscode/ui-widget-kit
+
+> **Purpose**: Reusable React component library providing dashboard widgets, grid layout, data tables, dynamic forms, and the main app template shell — consumed as a shared UI layer across all `@ciscode/*` frontend apps.
+
+---
+
+## 🎯 Package Overview
+
+**Package**: `@ciscode/ui-widget-kit`  
+**Version**: 1.0.x  
+**Type**: React Frontend Component Library  
+**Purpose**: Centralized, typed, accessible UI components and hooks — the single source of truth for dashboard layout, data display, and form patterns across all host apps
+
+### This Package Provides:
+
+- Component-Hook-Model (CHM) architecture — the frontend equivalent of CSR
+- `DashboardGrid` + `WidgetContainer` — drag, resize, actions, layout persistence
+- `TableDataCustom` — typed columns, selection, sorting, filtering, pagination, inline edit
+- `ControlledZodDynamicForm` — schema-driven, fully controlled form with Zod validation
+- `Template` — full app shell (sidebar, navbar, footer, layout config)
+- `Breadcrumb`, `Loader`, `PageTitle`, `Sidebar`, `DarkModeSwitcher` — common UI
+- `DefaultChartAdapter` — pluggable SVG chart adapter
+- Auth hooks: `useLogin`, `useRegister`, `usePasswordReset`
+- Utility hooks: `useLocalStorage`, `useColorMode`, `useKeyboardNavigation`
+- Accessibility hooks: `useLiveRegion`, `useFocusTrap`
+- Complete TypeScript types for all public contracts
+- Tailwind-compatible styling (utility classes only — no Tailwind dependency on host)
+- Vitest unit/integration tests with 80% coverage threshold
+- Playwright E2E tests
+- Changesets for version management
+- Husky + lint-staged for code quality
+
+---
+
+## 🏗️ Module Architecture
+
+**WidgetKit uses Component-Hook-Model (CHM) pattern — the frontend equivalent of CSR.**
+
+> **WHY CHM for UI libraries?** Reusable component libraries need clean separation between rendering (Components), logic/state (Hooks), and data contracts (Models). This mirrors CSR but for the React world: Components are Controllers, Hooks are Services, Models are Entities/DTOs.
+
+```
+src/
+  ├── index.ts                                  # PUBLIC API — all exports go through here
+  ├── assets/
+  │   └── styles/
+  │       └── style.css                         # Global styles — imported once by host app
+  │
+  ├── components/                               # UI Layer (rendering + interaction)
+  │   ├── Dashboard/
+  │   │   └── Widgets/
+  │   │       ├── DashboardGrid.tsx             # Grid orchestrator
+  │   │       ├── WidgetContainer.tsx           # Single widget shell (drag, resize, actions)
+  │   │       └── ChartAdapters/               # Pluggable chart adapters
+  │   ├── Table/
+  │   │   ├── TableDataCustom.tsx              # Public wrapper (exported)
+  │   │   └── TableDataCustomBase.tsx          # Internal base (not exported directly)
+  │   ├── Form/
+  │   │   └── ZodDynamicForm.tsx               # ControlledZodDynamicForm
+  │   ├── Breadcrumbs/
+  │   │   └── Breadcrumb.tsx
+  │   └── (Loader, PageTitle, Sidebar, etc.)
+  │
+  ├── hooks/                                   # Logic Layer (state, side effects, auth)
+  │   ├── useLocalStorage.ts
+  │   ├── useColorMode.ts
+  │   ├── useGeneratePageNumbers.ts
+  │   ├── useLogin.ts
+  │   ├── useRegister.ts
+  │   ├── usePasswordReset.ts
+  │   ├── useA11y.ts                           # useLiveRegion, useFocusTrap
+  │   └── useKeyboardNavigation.ts
+  │
+  ├── models/                                  # Type Layer (contracts, configs)
+  │   ├── ColumnConfigTable.ts
+  │   ├── FieldConfigDynamicForm.ts
+  │   ├── ToolbarItemModel.ts
+  │   ├── SidebarItemModel.ts
+  │   └── DashboardWidget.ts
+  │
+  └── main/                                    # App Shell
+      ├── dashboard.tsx                        # Template component (full layout)
+      └── layoutTypes.ts                       # Layout config types
+```
+
+**Responsibility Layers:**
+
+| Layer          | Responsibility                                         | Examples                                             |
+| -------------- | ------------------------------------------------------ | ---------------------------------------------------- |
+| **Components** | Rendering, user interaction, composition               | `DashboardGrid`, `TableDataCustom`, `Breadcrumb`     |
+| **Hooks**      | State logic, side effects, auth, a11y                  | `useColorMode`, `useLogin`, `useFocusTrap`           |
+| **Models**     | TypeScript contracts, config shapes (no runtime logic) | `ColumnConfigTable`, `DashboardLayout`, `WidgetType` |
+| **Main/Shell** | App-level layout orchestration                         | `Template`, `layoutTypes`                            |
+| **Assets**     | Global stylesheet — CSS variables, base resets         | `style.css`                                          |
+
+### Layer Rules — STRICTLY ENFORCED
+
+| Layer        | Can import from                 | Cannot import from            |
+| ------------ | ------------------------------- | ----------------------------- |
+| `components` | `hooks`, `models`, `assets`     | `main` internals              |
+| `hooks`      | `models`                        | `components`                  |
+| `models`     | Nothing internal                | `hooks`, `components`, `main` |
+| `main`       | `components`, `hooks`, `models` | —                             |
+
+> **The golden rule**: `models/` is pure TypeScript — no React imports, no hooks, no runtime code. If you're writing `import { useState }` inside a model file, it's in the wrong layer.
+
+---
+
+## 📝 Naming Conventions
+
+### Files
+
+**Pattern**: `PascalCase` for components, `camelCase` for hooks and models
+
+| Type              | Example                   | Directory                                         |
+| ----------------- | ------------------------- | ------------------------------------------------- |
+| Component         | `DashboardGrid.tsx`       | `src/components/<Feature>/`                       |
+| Hook              | `useColorMode.ts`         | `src/hooks/`                                      |
+| Model / Type file | `ColumnConfigTable.ts`    | `src/models/`                                     |
+| Layout type       | `layoutTypes.ts`          | `src/main/`                                       |
+| Chart adapter     | `DefaultChartAdapter.tsx` | `src/components/Dashboard/Widgets/ChartAdapters/` |
+| Test (unit)       | `DashboardGrid.test.tsx`  | `tests/unit/`                                     |
+| Test (E2E)        | `dashboard.spec.ts`       | `tests/e2e/`                                      |
+
+### Code Naming
+
+- **Components**: `PascalCase` → `DashboardGrid`, `WidgetContainer`, `TableDataCustom`
+- **Hooks**: `camelCase` with `use` prefix → `useLocalStorage`, `useFocusTrap`
+- **Types / Interfaces**: `PascalCase` → `ColumnConfigTable`, `DashboardLayout`, `WidgetType`
+- **Props types**: named `Props` locally, exported with component name → `DashboardProps`, `TableDataCustomProps`
+- **Enum values**: `UPPER_SNAKE_CASE` (if used) or string literals
+- **Constants**: `UPPER_SNAKE_CASE` → `DEFAULT_GRID_COLS`, `PERSIST_KEY_PREFIX`
+
+### Component Pattern — ALWAYS follow this structure
+
+```tsx
+import type { JSX } from 'react';
+import type { ColumnConfigTable } from '../../models/ColumnConfigTable';
+
+// 1. Define Props type explicitly — never inline in function signature
+type Props = {
+  columns: ColumnConfigTable<Row>[];
+  data: Row[];
+  onRowClick?: (row: Row) => void;
+  className?: string;
+};
+
+// 2. Default export for components
+export default function TableDataCustom<Row>({
+  columns,
+  data,
+  onRowClick,
+  className,
+}: Props): JSX.Element {
+  // ...
+}
+
+// 3. Export Props type for consumers
+export type { Props as TableDataCustomProps };
+```
+
+**Rules:**
+
+- ✅ Always explicit `Props` type — never `React.FC<{...}>` inline
+- ✅ Always explicit `JSX.Element` return type
+- ✅ Default export for components, named exports for hooks and types
+- ✅ Destructure props in the function signature
+- ❌ Never use `React.FC` — it hides return type and adds implicit children
+- ❌ Never use `any` for prop types — use `unknown` or proper generics
+
+---
+
+## 📦 Public API — `src/index.ts`
+
+**Everything the host app can use must be exported here. Anything not in `src/index.ts` is private.**
+
+```typescript
+// ✅ All host app imports must come from the package root
+import {
+  DashboardGrid,
+  TableDataCustom,
+  ControlledZodDynamicForm,
+  useColorMode,
+  useLocalStorage,
+  type ColumnConfigTable,
+  type DashboardLayout,
+} from '@ciscode/ui-widget-kit';
+
+// Also import the stylesheet once in your app entry point
+import '@ciscode/ui-widget-kit/style.css';
+```
+
+**Export rules:**
+
+```typescript
+// ✅ Exported — public API
+export { default as DashboardGrid } from './components/Dashboard/Widgets/DashboardGrid';
+export { default as TableDataCustom } from './components/Table/TableDataCustom';
+export { default as useColorMode } from './hooks/useColorMode';
+export type { ColumnConfigTable } from './models/ColumnConfigTable';
+
+// ❌ NEVER export
+// Internal base components (TableDataCustomBase — use the wrapper)
+// Internal sub-components (WidgetContainer when used only inside DashboardGrid)
+// Internal utilities and helpers not part of the public contract
+```
+
+**When adding a new export**, always ask: _is this something a host app needs directly, or is it an internal implementation detail?_ If unsure — keep it private.
+
+---
+
+## ⚙️ Peer Dependencies
+
+Host apps must install peer dependencies. Only install what you use:
+
+| Peer dep                         | Required for                               | Optional |
+| -------------------------------- | ------------------------------------------ | -------- |
+| `react` + `react-dom` >= 18      | Everything                                 | No       |
+| `react-router-dom` ^7            | `Breadcrumb`, router-integrated components | No       |
+| `zod` ^4                         | `ControlledZodDynamicForm`                 | No       |
+| `react-select` ^5                | Select/dropdown form fields                | No       |
+| `@ciscode/ui-translate-core`     | i18n/translations in components            | No       |
+| `@ciscode/ui-authentication-kit` | Auth hooks (`useLogin`, etc.)              | Yes      |
+
+> **Rule for new peer deps**: mark optional in `peerDependenciesMeta`, guard usage with a clear runtime error if missing, document in README. Never add a required peer dep without a MAJOR version bump.
+
+---
+
+## 🧩 Core Components
+
+### `DashboardGrid`
+
+```tsx
+<DashboardGrid
+  grid={{ cols: 3, gap: '1rem' }}
+  widgets={layout}
+  onLayoutChange={setLayout}
+  enableDrag={true} // default: true
+  enableResize={true} // default: true
+  showActions={true} // default: true
+  persistKey="my-dashboard" // optional: enables localStorage persistence
+/>
+```
+
+**Rules for widget types**: `card`, `stat`, `progress`, `activity`, `chart`, `custom`. Adding a new widget type requires updating `WidgetType` in `models/DashboardWidget.ts` and the renderer in `DashboardGrid.tsx`.
+
+### `TableDataCustom`
+
+```tsx
+const columns: ColumnConfigTable<User>[] = [
+  { key: 'name', title: 'Name', sortable: true },
+  { key: 'email', title: 'Email' },
+];
+
+<TableDataCustom<User>
+  columns={columns}
+  data={users}
+  pagination={{ currentPage, totalPages, totalItems, onPageChange }}
+/>;
+```
+
+### `ControlledZodDynamicForm`
+
+Fully controlled — host app owns state. No internal state for field values.
+
+```tsx
+<ControlledZodDynamicForm
+  fields={fields}
+  schema={schema} // Zod schema (z.object)
+  values={formState} // host-owned state
+  onChangeField={(key, val) => setFormState((prev) => ({ ...prev, [key]: val }))}
+  onSubmit={(values) => handleSubmit(values)}
+/>
+```
+
+### `Template` (App Shell)
+
+```tsx
+<Template
+  layout={{
+    sidebar: { items: [...], config: {...} },
+    navbar: { brand: {...} },
+    footer: { text: '© 2026' },
+  }}
+/>
+```
+
+---
+
+## 🎨 Styling Rules
+
+- ✅ Use Tailwind utility classes directly in JSX — no custom CSS files per component
+- ✅ RTL support via `ltr:` / `rtl:` Tailwind variants where layout is directional
+- ✅ Dark mode via `dark:` variants — driven by `useColorMode` hook
+- ✅ Global overrides and CSS variables go in `src/assets/styles/style.css` only
+- ❌ Never create per-component `.css` or `.module.css` files
+- ❌ Never use inline `style={{}}` for anything expressible as a Tailwind class
+- ❌ Never hardcode color values — use Tailwind's color scale or CSS variables
+
+```tsx
+// ❌ Wrong — inline style for layout
+<div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
+
+// ✅ Correct — Tailwind utilities
+<div className="flex flex-col gap-4">
+
+// ✅ Correct — RTL-aware
+<div className="ltr:ml-4 rtl:mr-4">
+```
+
+---
+
+## ♿ Accessibility (a11y) — NON-NEGOTIABLE
+
+Every interactive component must meet WCAG 2.1 AA. Use the built-in a11y hooks:
+
+```tsx
+// Live announcements (for async state changes)
+const { announce } = useLiveRegion();
+announce('Table data updated');
+
+// Focus trap (for modals, dropdowns)
+const { containerRef } = useFocusTrap(isOpen);
+
+// Keyboard navigation
+useKeyboardNavigation({ onEscape: closeModal, onEnter: confirm });
+```
+
+**Checklist for every new component:**
+
+- [ ] All interactive elements reachable by keyboard (`Tab`, `Enter`, `Space`, `Escape`)
+- [ ] `aria-label` or `aria-labelledby` on all interactive elements
+- [ ] `role` attribute where semantics are ambiguous
+- [ ] Focus visible at all times (no `:focus { outline: none }` without replacement)
+- [ ] Live region announcements for dynamic content updates
+- [ ] Correct color contrast ratio (4.5:1 for text, 3:1 for UI components)
+
+---
+
+## 🧪 Testing - RIGOROUS for Libraries
+
+### Coverage Target: 80%+
+
+**Unit Tests — MANDATORY (Vitest + @testing-library/react):**
+
+- ✅ All exported components — render, props variants, user interactions
+- ✅ All exported hooks — state changes, side effects, edge cases
+- ✅ `DashboardGrid` — widget rendering per type, layout change callback
+- ✅ `TableDataCustom` — column rendering, pagination, sorting, empty state
+- ✅ `ControlledZodDynamicForm` — field rendering, validation errors, submit flow
+- ✅ `useLocalStorage` — read, write, SSR safety
+- ✅ `useColorMode` — toggle, persistence, system preference
+- ✅ `useFocusTrap` + `useLiveRegion` — a11y behavior
+
+**Integration Tests:**
+
+- ✅ `Template` — full layout render with sidebar + navbar + footer
+- ✅ Form + Table together (common dashboard pattern)
+- ✅ `DashboardGrid` with `persistKey` — localStorage hydration and commit
+
+**E2E Tests (Playwright):**
+
+- ✅ Dashboard drag/resize (critical user path)
+- ✅ Table sort + filter + pagination
+- ✅ Form submit with validation errors
+
+**Test file location:**
+
+```
+tests/
+  └── unit/
+      ├── DashboardGrid.test.tsx
+      ├── TableDataCustom.test.tsx
+      ├── useColorMode.test.ts
+      └── ...
+```
+
+**Test patterns:**
+
+```tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import DashboardGrid from '../../src/components/Dashboard/Widgets/DashboardGrid';
+import type { DashboardLayout, GridConfig } from '../../src/models/DashboardWidget';
+
+describe('DashboardGrid', () => {
+  const grid: GridConfig = { cols: 3, gap: '1rem' };
+  const widgets: DashboardLayout = [
+    {
+      id: '1',
+      type: 'card',
+      title: 'Test',
+      position: { x: 0, y: 0, w: 1, h: 1 },
+      props: { content: 'Hello' },
+    },
+  ];
+
+  it('renders widget titles', () => {
+    render(<DashboardGrid grid={grid} widgets={widgets} onLayoutChange={vi.fn()} />);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+});
+```
+
+**Vitest Configuration:**
+
+```typescript
+coverage: {
+  provider: 'v8',
+  thresholds: {
+    branches:   80,
+    functions:  80,
+    lines:      80,
+    statements: 80,
+  },
+  exclude: ['src/main/', 'examples/'],  // exclude shell and examples
+}
+```
+
+---
+
+## 📚 Documentation - Complete
+
+### JSDoc/TSDoc — ALWAYS for public APIs
+
+````tsx
+/**
+ * Renders a configurable grid of dashboard widgets with optional drag, resize, and persistence.
+ *
+ * @param grid - Grid configuration (columns, gap)
+ * @param widgets - Current layout state (array of widget configs with positions)
+ * @param onLayoutChange - Called with updated layout whenever a widget is moved or resized
+ * @param enableDrag - Enable drag-to-reorder (default: true)
+ * @param enableResize - Enable resize handles (default: true)
+ * @param persistKey - localStorage key for layout persistence; omit to disable persistence
+ *
+ * @example
+ * ```tsx
+ * <DashboardGrid
+ *   grid={{ cols: 3, gap: '1rem' }}
+ *   widgets={layout}
+ *   onLayoutChange={setLayout}
+ *   persistKey="main-dashboard"
+ * />
+ * ```
+ */
+export default function DashboardGrid({ ... }: Props): JSX.Element
+````
+
+**Required for:**
+
+- All exported components (full JSDoc on the function)
+- All exported hooks (JSDoc + `@returns` description)
+- All exported model types (JSDoc on the interface + each property — as already done in `DashboardWidget.ts`)
+- All `Props` types that are re-exported
+
+---
+
+## 🚀 Library Development Principles
+
+### 1. Controlled over Uncontrolled
+
+Host apps own state. Components receive state via props and emit changes via callbacks. Never hide state inside a component that the host app needs to control.
+
+```tsx
+// ❌ Wrong — hidden internal state
+function TableDataCustom() {
+  const [page, setPage] = useState(1); // host can't control this
+}
+
+// ✅ Correct — fully controlled
+function TableDataCustom({ currentPage, onPageChange }: Props) {
+  // host owns page state
+}
+```
+
+### 2. Composition over Configuration
+
+Prefer composable primitives over mega-components with dozens of boolean flags.
+
+```tsx
+// ❌ Wrong — flag soup
+<Table showFooter showToolbar enableSearch enableExport sortable filterable />
+
+// ✅ Correct — compose what you need
+<TableDataCustom columns={columns} data={data} pagination={pagination} />
+```
+
+### 3. Zero Business Logic in Components
+
+Components render — they don't fetch, transform, or validate data. That belongs in hooks or the host app.
+
+```tsx
+// ❌ Wrong — component fetches its own data
+export function UserTable() {
+  const [users, setUsers] = useState([]);
+  useEffect(() => { fetch('/api/users').then(...) }, []);
+}
+
+// ✅ Correct — data comes in via props
+export function TableDataCustom<Row>({ data, columns }: Props) { }
+```
+
+### 4. Accessibility is Not Optional
+
+Every component must be keyboard-navigable and screen-reader friendly before it can be considered complete. A component without a11y is a bug, not a feature gap.
+
+### 5. Tailwind-Compatible, Not Tailwind-Dependent
+
+Use Tailwind classes in this library's source — but the host app does not need to install Tailwind. The built `style.css` contains all necessary styles.
+
+---
+
+## 🔄 Workflow & Task Management
+
+### Task-Driven Development
+
+**1. Branch Creation:**
+
+```bash
+feature/WIDGET-123-add-timeline-widget-type
+bugfix/WIDGET-456-fix-table-sort-rtl
+refactor/WIDGET-789-extract-pagination-hook
+```
+
+**2. Task Documentation:**
+Create task file at branch start:
+
+```
+docs/tasks/active/WIDGET-123-add-timeline-widget-type.md
+```
+
+**3. On Release:**
+Move to archive:
+
+```
+docs/tasks/archive/by-release/v1.1.0/WIDGET-123-add-timeline-widget-type.md
+```
+
+### Development Workflow
+
+**Simple changes**: Read context → Implement → Update docs → **Create changeset**
+
+**Complex changes**: Read context → Discuss approach → Implement → Update docs → **Create changeset**
+
+**When blocked**:
+
+- **DO**: Ask immediately
+- **DON'T**: Generate incorrect output
+
+---
+
+## 📦 Versioning & Breaking Changes
+
+### Semantic Versioning (Strict)
+
+**MAJOR** (x.0.0) — Breaking changes:
+
+- Removed or renamed exported component or hook
+- Changed required props on any exported component
+- Changed hook return shape (renamed or removed returned values)
+- Changed exported model type (removed or renamed fields)
+- Added a new **required** peer dependency
+- Renamed package exports
+
+**MINOR** (0.x.0) — New features:
+
+- New exported component or hook
+- New **optional** prop on existing component
+- New field on an exported model type
+- New optional peer dependency
+
+**PATCH** (0.0.x) — Bug fixes:
+
+- Visual/layout fixes with no prop changes
+- Hook logic fix with no API change
+- Accessibility improvement with no prop changes
+- Documentation updates
+
+### Changesets Workflow
+
+**ALWAYS create a changeset for user-facing changes:**
+
+```bash
+npx changeset
+```
+
+**When to create a changeset:**
+
+- ✅ New features, bug fixes, breaking changes, a11y improvements
+- ❌ Internal refactoring (no user-facing change)
+- ❌ Documentation updates only
+- ❌ Test improvements only
+
+**Before completing any task:**
+
+- [ ] Component implemented
+- [ ] Tests passing
+- [ ] JSDoc updated
+- [ ] **Changeset created** ← CRITICAL
+- [ ] PR ready
+
+**Changeset format:**
+
+```markdown
+---
+'@ciscode/ui-widget-kit': minor
+---
+
+Added `timeline` widget type to DashboardGrid with configurable event items
+```
+
+### CHANGELOG Required
+
+```markdown
+## [1.1.0] - 2026-02-26
+
+### BREAKING CHANGES
+
+- `DashboardGrid` now requires `grid` prop — previously optional with defaults
+
+### Added
+
+- `timeline` widget type for DashboardGrid
+- `useKeyboardNavigation` hook exported for host app use
+- RTL support for TableDataCustom pagination
+
+### Fixed
+
+- Focus trap not releasing on modal close in Safari
+```
+
+---
+
+## 🔐 Security & Safety
+
+- ✅ Never render raw HTML from props without sanitization (`dangerouslySetInnerHTML` is forbidden unless explicitly approved)
+- ✅ All user-facing text must support i18n via `@ciscode/ui-translate-core` — no hardcoded English strings in exported components
+- ✅ Auth hooks (`useLogin`, `useRegister`, `usePasswordReset`) must never log credentials
+- ✅ `useLocalStorage` must handle `SecurityError` (private browsing) and `QuotaExceededError` gracefully
+- ✅ No `console.log` in production builds — use the debug hook pattern if needed
+
+```tsx
+// ❌ WRONG — raw HTML from props
+<div dangerouslySetInnerHTML={{ __html: widget.props.content }} />
+
+// ✅ CORRECT — treat content as text
+<div>{String(widget.props.content ?? '')}</div>
+```
+
+---
+
+## 🚫 Restrictions — Require Approval
+
+**NEVER without approval:**
+
+- Breaking changes to exported component props
+- Removing or renaming exported components, hooks, or types
+- Adding a new required peer dependency
+- Changes to `style.css` global styles (can affect all host apps)
+- Changes to `Template` layout structure (high blast radius)
+- Any `dangerouslySetInnerHTML` usage
+
+**CAN do autonomously:**
+
+- Bug fixes (non-breaking)
+- New optional props on existing components
+- New exported hooks or utility components (additive)
+- Internal refactoring (no public API change)
+- Test and documentation improvements
+- A11y improvements (non-breaking)
+
+---
+
+## ✅ Release Checklist
+
+`prepublishOnly` enforces this automatically, but verify manually:
+
+- [ ] `npm run format` — Prettier clean
+- [ ] `npm run lint` — ESLint `--max-warnings=0`
+- [ ] `npm run typecheck` — TypeScript strict mode passing
+- [ ] `npm test` — all Vitest tests passing
+- [ ] `npm run test:cov` — coverage ≥ 80% (branches, functions, lines, statements)
+- [ ] `npm run build` — `dist/` contains `index.js`, `index.cjs`, `index.d.ts`, `style.css`
+- [ ] All new public APIs have JSDoc
+- [ ] New props documented in README usage examples
+- [ ] Changeset created
+- [ ] Breaking changes highlighted
+- [ ] Tested via `npm link` in a real host app
+
+---
+
+## 🔄 Development Workflow
+
+### Working on the Library:
+
+1. Clone the repo
+2. Create branch: `feature/WIDGET-123-description` from `develop`
+3. `npm run dev` — start Vite dev server with examples app
+4. Implement with tests in `tests/unit/`
+5. **Create changeset**: `npx changeset`
+6. Verify checklist / `prepublishOnly`
+7. Create PR → `develop`
+
+### Running Examples:
+
+```bash
+npm run dev          # main dev server
+npm run dev:examples # examples app (imports from local source)
+```
+
+### Testing in a Host App:
+
+```bash
+# In ui-widget-kit
+npm run build
+npm link
+
+# In host app
+npm link @ciscode/ui-widget-kit
+
+# Remember to import the stylesheet
+import '@ciscode/ui-widget-kit/style.css';
+
+# Unlink when done
+npm unlink @ciscode/ui-widget-kit
+```
+
+---
+
+## 🎨 Code Style
+
+- ESLint (flat config) `--max-warnings=0`
+- Prettier formatting
+- TypeScript strict mode
+- Functional components only — no class components
+- Pure functions for model/utility logic; hooks for stateful logic
+- No `React.FC` — always explicit return type `JSX.Element` or `JSX.Element | null`
+- Props destructured in function signature — never accessed via `props.x`
+
+```tsx
+// ✅ Correct
+export default function Breadcrumb({ items, className }: Props): JSX.Element {
+  return <nav aria-label="breadcrumb" className={className}>...</nav>;
+}
+
+// ❌ Wrong
+export const Breadcrumb: React.FC<Props> = (props) => {
+  return <nav>{props.items.map(...)}</nav>;
+};
+```
+
+---
+
+## 🐛 Error Handling
+
+**Error boundaries — ALWAYS for widget and table renders:**
+
+```tsx
+// Wrap consumer-provided content in error boundaries
+<ErrorBoundary fallback={<WidgetError title={widget.title} />}>
+  <WidgetContainer>{renderWidgetContent(widget)}</WidgetContainer>
+</ErrorBoundary>
+```
+
+**Hook errors — never throw to the render cycle:**
+
+```tsx
+// ❌ Wrong — throws during render
+function useLocalStorage(key: string) {
+  const value = localStorage.getItem(key); // throws in SSR / private mode
+}
+
+// ✅ Correct — safe with fallback
+function useLocalStorage<T>(key: string, defaultValue: T) {
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : defaultValue;
+  } catch {
+    return defaultValue; // SSR, private browsing, quota exceeded
+  }
+}
+```
+
+**NEVER silent failures in callbacks:**
+
+```tsx
+// ❌ Wrong
+onLayoutChange?.();
+
+// ✅ Correct
+try {
+  onLayoutChange(updatedLayout);
+} catch (error) {
+  console.error('[DashboardGrid] onLayoutChange threw:', error);
+}
+```
+
+---
+
+## 💬 Communication Style
+
+- Brief and direct
+- Reference the correct layer (`components`, `hooks`, `models`) when discussing changes
+- Always specify the component name and prop when discussing API changes
+- Flag breaking changes immediately — even suspected ones
+- This library is consumed by multiple host apps — when in doubt about blast radius, ask
+
+---
+
+## 📋 Summary
+
+**Library Principles:**
+
+1. Reusability over specificity
+2. Controlled components — host apps own state
+3. Comprehensive testing (80%+ coverage)
+4. Complete documentation (JSDoc on all public APIs)
+5. Strict versioning — breaking changes = MAJOR bump + changeset
+6. Zero business logic in components
+7. Accessibility is not optional — WCAG 2.1 AA minimum
+8. Tailwind classes in source, no Tailwind required in host
+
+**Layer ownership — quick reference:**
+
+| Concern                    | Owner                         |
+| -------------------------- | ----------------------------- |
+| UI rendering & interaction | `src/components/<Feature>/`   |
+| State logic & side effects | `src/hooks/`                  |
+| TypeScript contracts       | `src/models/`                 |
+| Layout config types        | `src/main/layoutTypes.ts`     |
+| App shell                  | `src/main/dashboard.tsx`      |
+| Global styles              | `src/assets/styles/style.css` |
+| All public exports         | `src/index.ts`                |
+
+**When in doubt:** Ask, don't assume. This library ships to multiple host apps — a broken prop type can fail builds across the whole org.
+
+---
+
+_Last Updated: February 26, 2026_  
+_Version: 1.0.4_
diff --git a/.github/workflows/ci-pr-validation.yml b/.github/workflows/pr-validation.yml
similarity index 100%
rename from .github/workflows/ci-pr-validation.yml
rename to .github/workflows/pr-validation.yml
diff --git a/.github/workflows/cd-release.yml b/.github/workflows/publish.yml
similarity index 100%
rename from .github/workflows/cd-release.yml
rename to .github/workflows/publish.yml
diff --git a/.github/workflows/ci-release-check.yml b/.github/workflows/release-check.yml
similarity index 98%
rename from .github/workflows/ci-release-check.yml
rename to .github/workflows/release-check.yml
index 0bcea56..f21caa3 100644
--- a/.github/workflows/ci-release-check.yml
+++ b/.github/workflows/release-check.yml
@@ -3,8 +3,6 @@ name: CI - Release Check
 on:
   pull_request:
     branches: [master]
-  push:
-    branches: [master]
   workflow_dispatch:
     inputs:
       sonar:
diff --git a/README.md b/README.md
index 26e59f4..03c6f85 100644
--- a/README.md
+++ b/README.md
@@ -7,10 +7,11 @@ Reusable React TypeScript library for dashboard widgets, grid layout, and advanc
 - Dashboard widget grid: drag, resize, duplicate, remove, actions
 - Layout persistence: localStorage hydration and commit
 - Data table: typed columns, selection, sorting, filtering, inline edit, pagination
-- Error boundaries for widgets and tables
+- Error boundaries for widgets and tables (enhanced with reset and logging capabilities)
 - Pluggable chart adapters (default SVG)
 - ESM + CJS + Types build (tsup)
-- Vitest unit/integration tests
+- Vitest unit/integration tests (80%+ coverage target)
+- Playwright E2E tests for critical user paths (e.g., drag/resize in DashboardGrid)
 - ESLint + Prettier (flat config)
 - Changesets (manual release flow)
 - Husky (pre-commit + pre-push)
@@ -40,6 +41,18 @@ npm i react react-dom react-router-dom zod @ciscode/ui-translate-core
 
 Anything not exported from `src/index.ts` is considered private.
 
+## New Features
+
+### Enhanced Error Handling
+
+- Error boundaries now include a reset mechanism and optional logging integration (e.g., Sentry).
+- Hooks (`useLogin`, `usePasswordReset`, `useRegister`) support error reporting and user-friendly messages.
+
+### Improved Testing
+
+- **Integration Tests**: Added workflows for `ControlledZodDynamicForm` and `TableDataCustom`.
+- **E2E Tests**: Expanded coverage to include `DashboardGrid` drag/resize functionality.
+
 ## Scripts
 
 - `npm run dev` – start Vite dev server (for docs/examples)
diff --git a/examples/App.tsx b/examples/App.tsx
index d0654c1..0961022 100644
--- a/examples/App.tsx
+++ b/examples/App.tsx
@@ -69,9 +69,9 @@ export default function App(): JSX.Element {
   ];
 
   return (
-    <div style={{ padding: 24 }}>
+    <div className="p-6">
       <Breadcrumb pageName="Examples" />
-      <div style={{ marginTop: 16 }}>
+      <div className="mt-4">
         <TableDataCustom<Row>
           columns={columns}
           data={data}
@@ -85,10 +85,10 @@ export default function App(): JSX.Element {
         />
       </div>
 
-      <hr style={{ margin: '24px 0' }} />
+      <hr className="my-6" />
       <h2>ControlledZodDynamicForm</h2>
       <p>Simple required-field form using Zod.</p>
-      <div style={{ marginTop: 12 }}>
+      <div className="mt-3">
         <ControlledZodDynamicForm
           fields={fields}
           schema={schema}
diff --git a/package-lock.json b/package-lock.json
index 48b40ee..2273508 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ciscode/ui-widget-kit",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ciscode/ui-widget-kit",
-      "version": "1.0.3",
+      "version": "1.0.4",
       "license": "ISC",
       "dependencies": {
         "husky": "^9.1.7"
diff --git a/package.json b/package.json
index 44e8a80..a800ccc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ciscode/ui-widget-kit",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
diff --git a/src/components/Dashboard/Widgets/DashboardGrid.tsx b/src/components/Dashboard/Widgets/DashboardGrid.tsx
index 18dce9d..5b0c2ef 100644
--- a/src/components/Dashboard/Widgets/DashboardGrid.tsx
+++ b/src/components/Dashboard/Widgets/DashboardGrid.tsx
@@ -24,19 +24,15 @@ export default function DashboardGrid({
   // Minimal grid rendering: each widget in a grid cell
   return (
     <div
-      className="grid"
+      className={`grid gap-${grid.gap}`}
       style={{
         gridTemplateColumns: `repeat(${grid.cols}, minmax(0, 1fr))`,
-        gap: grid.gap,
       }}
     >
       {widgets.map((widget) => (
         <div
           key={widget.id}
-          style={{
-            gridColumn: `${widget.position.x + 1} / span ${widget.position.w}`,
-            gridRow: `${widget.position.y + 1} / span ${widget.position.h}`,
-          }}
+          className={`col-span-${widget.position.w} row-span-${widget.position.h}`}
         >
           <WidgetContainer title={widget.title} draggable={enableDrag} resizable={enableResize}>
             {/* Render widget content based on type */}
@@ -56,7 +52,6 @@ export default function DashboardGrid({
                     style={{ width: `${Number(widget.props?.value ?? 0)}%` }}
                   />
                 </div>
-                <div className="text-xs mt-1">{Number(widget.props?.value ?? 0)}%</div>
               </div>
             )}
             {widget.type === 'activity' && (
diff --git a/src/components/Dashboard/Widgets/WidgetContainer.tsx b/src/components/Dashboard/Widgets/WidgetContainer.tsx
index 76503c8..5a67698 100644
--- a/src/components/Dashboard/Widgets/WidgetContainer.tsx
+++ b/src/components/Dashboard/Widgets/WidgetContainer.tsx
@@ -32,7 +32,14 @@ export default function WidgetContainer({
   const headerRef = useRef<HTMLDivElement | null>(null);
 
   return (
-    <div className="relative rounded-lg border border-gray-200 bg-white dark:bg-gray-800 shadow-sm overflow-hidden">
+    <div
+      className="relative rounded-lg border border-gray-200 bg-white dark:bg-gray-800 shadow-sm overflow-hidden"
+      role="region"
+      aria-labelledby={`widget-title-${title}`}
+    >
+      <h2 id={`widget-title-${title}`} className="widget-title">
+        {title}
+      </h2>
       <div
         ref={headerRef}
         className={
diff --git a/src/components/Form/ZodDynamicForm.tsx b/src/components/Form/ZodDynamicForm.tsx
index 471ba4f..295cac2 100644
--- a/src/components/Form/ZodDynamicForm.tsx
+++ b/src/components/Form/ZodDynamicForm.tsx
@@ -51,8 +51,9 @@ export default function ControlledZodDynamicForm({
    * On form submit => parse the entire `values` with Zod.
    * If it fails, store the error messages in local state to display.
    */
-  function handleSubmit(e: FormEvent): void {
+  function handleSubmit(e: FormEvent<HTMLFormElement>): void {
     e.preventDefault();
+    setErrors({});
     try {
       // Attempt to parse the entire form data with Zod
       const parsed = schema.parse(values);
@@ -87,7 +88,7 @@ export default function ControlledZodDynamicForm({
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
+    <form onSubmit={handleSubmit} aria-describedby="form-errors">
       {/* header */}
       {header && <div className="mb-4">{header}</div>}
 
@@ -245,6 +246,11 @@ export default function ControlledZodDynamicForm({
           {submitLabel}
         </button>
       </div>
+      {Object.keys(errors).length > 0 && (
+        <div id="form-errors" className="text-red-600 mt-4">
+          Please fix the errors above.
+        </div>
+      )}
     </form>
   );
 }
diff --git a/src/components/Table/TableDataCustomBase.tsx b/src/components/Table/TableDataCustomBase.tsx
index 2c32530..ce0c9ba 100644
--- a/src/components/Table/TableDataCustomBase.tsx
+++ b/src/components/Table/TableDataCustomBase.tsx
@@ -356,9 +356,9 @@ function TableDataCustomBase<T>({
                   </tr>
                 ) : (
                   visibleData.map((row, r) => (
-                    <tr key={r} className="border-b">
+                    <tr key={r} className="border-b" role="row" aria-rowindex={r + 1}>
                       {enableSelection && (
-                        <td className="px-4 py-3">
+                        <td className="px-4 py-3" role="gridcell">
                           <input
                             type="checkbox"
                             aria-label={`Select row ${r + 1}`}
@@ -398,7 +398,9 @@ function TableDataCustomBase<T>({
                         return (
                           <td
                             key={c}
-                            className={`px-4 py-3 ltr:text-left rtl:text-right ${col.cellClassName ?? ''}`}
+                            role="gridcell"
+                            className="px-4 py-3"
+                            tabIndex={0} // Ensure focusable cells
                           >
                             {content}
                           </td>
diff --git a/src/exceptions/TableErrorBoundary.tsx b/src/exceptions/TableErrorBoundary.tsx
index b98ec5a..e94650a 100644
--- a/src/exceptions/TableErrorBoundary.tsx
+++ b/src/exceptions/TableErrorBoundary.tsx
@@ -21,13 +21,30 @@ class TableErrorBoundary extends React.Component<
 
   componentDidCatch(error: unknown, errorInfo: unknown): void {
     console.error('TableErrorBoundary caught an error:', error, errorInfo);
+    // Integrate a logging service for production environments
+    if (process.env.NODE_ENV === 'production') {
+      // Replace with your logging service, e.g., Sentry
+      // Sentry.captureException(error);
+    }
   }
 
+  handleReset = (): void => {
+    this.setState({ hasError: false });
+  };
+
   render(): React.ReactNode {
     if (this.state.hasError) {
-      // You can't use hooks like useT inside a class component,
-      // so we wrap it in a functional HOC instead.
-      return <TranslatedErrorMessage />;
+      return (
+        <div role="alert" className="p-4 text-red-600 bg-red-50 border border-red-300 rounded">
+          <TranslatedErrorMessage />
+          <button
+            onClick={this.handleReset}
+            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Retry
+          </button>
+        </div>
+      );
     }
 
     return this.props.children;
@@ -36,11 +53,7 @@ class TableErrorBoundary extends React.Component<
 
 const TranslatedErrorMessage = (): JSX.Element => {
   const t = useT('template-fe');
-  return (
-    <div className="p-4 text-red-600 bg-red-50 border border-red-300 rounded">
-      {t('table.errorBoundary.fallbackMessage')}
-    </div>
-  );
+  return <div>{t('table.errorBoundary.fallbackMessage')}</div>;
 };
 
 export default TableErrorBoundary;
diff --git a/src/hooks/useLogin.tsx b/src/hooks/useLogin.tsx
index cbba6c9..b2d3804 100644
--- a/src/hooks/useLogin.tsx
+++ b/src/hooks/useLogin.tsx
@@ -56,13 +56,17 @@ export function useLogin<TUser = unknown>({
     setError(null);
     setLoading(true);
     try {
-      const input = schema ? schema.parse(values) : values;
-      const res = await login(input);
+      const credentials = schema ? schema.parse(values) : values;
+      const res = await login(credentials);
       setResult(res);
       return res;
     } catch (e: unknown) {
-      const message = e instanceof Error ? e.message : 'Login failed';
-      setError(message);
+      setError('Login failed. Please try again.');
+      // Optional: Report error to an external service
+      if (process.env.NODE_ENV === 'production') {
+        // Replace with your logging service, e.g., Sentry
+        // Sentry.captureException(e);
+      }
       throw e;
     } finally {
       setLoading(false);
diff --git a/src/hooks/usePasswordReset.tsx b/src/hooks/usePasswordReset.tsx
index f1caafc..e000c92 100644
--- a/src/hooks/usePasswordReset.tsx
+++ b/src/hooks/usePasswordReset.tsx
@@ -52,8 +52,12 @@ export function usePasswordReset({
       await reset(input);
       setSuccess(true);
     } catch (e: unknown) {
-      const message = e instanceof Error ? e.message : 'Password reset failed';
-      setError(message);
+      setError('Password reset failed. Please try again.');
+      // Optional: Report error to an external service
+      if (process.env.NODE_ENV === 'production') {
+        // Replace with your logging service, e.g., Sentry
+        // Sentry.captureException(e);
+      }
       throw e;
     } finally {
       setLoading(false);
diff --git a/src/hooks/useRegister.ts b/src/hooks/useRegister.ts
index ea31ffe..153e5a6 100644
--- a/src/hooks/useRegister.ts
+++ b/src/hooks/useRegister.ts
@@ -48,8 +48,12 @@ export function useRegister<TUser = unknown>({
       setUser(res);
       return res;
     } catch (e: unknown) {
-      const message = e instanceof Error ? e.message : 'Registration failed';
-      setError(message);
+      setError('Registration failed. Please try again.');
+      // Optional: Report error to an external service
+      if (process.env.NODE_ENV === 'production') {
+        // Replace with your logging service, e.g., Sentry
+        // Sentry.captureException(e);
+      }
       throw e;
     } finally {
       setLoading(false);
diff --git a/src/index.ts b/src/index.ts
index 3eb6c66..abd08a5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,7 +6,6 @@ export { default as Breadcrumb } from './components/Breadcrumbs/Breadcrumb';
 export { default as ControlledZodDynamicForm } from './components/Form/ZodDynamicForm';
 export { default as TableDataCustom } from './components/Table/TableDataCustom';
 export { default as DashboardGrid } from './components/Dashboard/Widgets/DashboardGrid';
-export { DefaultChartAdapter } from './components/Dashboard/Widgets/ChartAdapters';
 
 // Hooks (public)
 export { default as useLocalStorage } from './hooks/useLocalStorage';
@@ -52,7 +51,3 @@ export type { BreadcrumbProps } from './components/Breadcrumbs/Breadcrumb';
 export type { ControlledZodDynamicFormProps } from './components/Form/ZodDynamicForm';
 export type { PaginationProps, TableDataCustomProps } from './components/Table/TableDataCustomBase';
 export type { DashboardProps } from './main/dashboard';
-// Types (hooks)
-export type { LoginCredentials, LoginResult, UseLoginOptions } from './hooks/useLogin';
-export type { RegisterPayload, UseRegisterOptions } from './hooks/useRegister';
-export type { PasswordResetInput, UsePasswordResetOptions } from './hooks/usePasswordReset';
diff --git a/tests/e2e/dashboardGrid.spec.ts b/tests/e2e/dashboardGrid.spec.ts
new file mode 100644
index 0000000..a2adc60
--- /dev/null
+++ b/tests/e2e/dashboardGrid.spec.ts
@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+
+test('DashboardGrid drag and resize', async ({ page }) => {
+  await page.goto('/dashboard');
+
+  // Verify initial widget positions
+  const widget = await page.locator('[data-testid="widget-1"]');
+  const initialBox = await widget.boundingBox();
+  expect(initialBox).not.toBeNull();
+
+  // Drag the widget
+  await widget.hover();
+  await page.mouse.down();
+  await page.mouse.move(initialBox!.x + 100, initialBox!.y + 100);
+  await page.mouse.up();
+
+  // Verify new widget position
+  const newBox = await widget.boundingBox();
+  expect(newBox).not.toEqual(initialBox);
+
+  // Resize the widget
+  const resizeHandle = await widget.locator('[data-testid="resize-handle"]');
+  await resizeHandle.hover();
+  await page.mouse.down();
+  await page.mouse.move(newBox!.x + 50, newBox!.y + 50);
+  await page.mouse.up();
+
+  // Verify widget size changed
+  const resizedBox = await widget.boundingBox();
+  expect(resizedBox!.width).toBeGreaterThan(newBox!.width);
+  expect(resizedBox!.height).toBeGreaterThan(newBox!.height);
+});
diff --git a/tests/integration/formTableWorkflow.test.tsx b/tests/integration/formTableWorkflow.test.tsx
new file mode 100644
index 0000000..2df1578
--- /dev/null
+++ b/tests/integration/formTableWorkflow.test.tsx
@@ -0,0 +1,69 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ControlledZodDynamicForm from '../../src/components/Form/ZodDynamicForm';
+import TableDataCustom from '../../src/components/Table/TableDataCustom';
+import { z } from 'zod';
+import React, { useState } from 'react';
+import type { FieldConfigDynamicForm } from '../../src/models/FieldConfigDynamicForm';
+
+describe('Form + Table Workflow', () => {
+  it('submits form data and displays it in the table', () => {
+    const schema = z.object({
+      name: z.string().min(1, 'Name is required'),
+      age: z.number().min(0, 'Age must be positive'),
+    });
+
+    const fields: FieldConfigDynamicForm[] = [
+      { name: 'name', label: 'Name', type: 'text' },
+      { name: 'age', label: 'Age', type: 'number' },
+    ];
+
+    type InitialValues = { name: string; age: number };
+    const initialValues: InitialValues = { name: '', age: 0 };
+    const onSubmit = vi.fn();
+
+    const TestComponent = () => {
+      const [data, setData] = useState<Array<{ name: string; age: number }>>([]);
+
+      return (
+        <div>
+          <ControlledZodDynamicForm
+            schema={schema}
+            fields={fields}
+            values={initialValues}
+            onChangeField={(fieldName: string, value: unknown) => {
+              if (
+                fieldName in initialValues &&
+                (typeof value === 'string' || typeof value === 'number')
+              ) {
+                initialValues[fieldName as keyof InitialValues] = value as never;
+              }
+            }}
+            onSubmit={(parsedValues: Record<string, unknown>) => {
+              const values = parsedValues as { name: string; age: number };
+              onSubmit(values);
+              setData((prevData) => [...prevData, values]);
+            }}
+          />
+          <TableDataCustom
+            columns={[
+              { key: 'name', title: 'Name' },
+              { key: 'age', title: 'Age' },
+            ]}
+            data={data}
+          />
+        </div>
+      );
+    };
+
+    render(<TestComponent />);
+
+    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Alice' } });
+    fireEvent.change(screen.getByLabelText('Age'), { target: { value: '25' } });
+    fireEvent.click(screen.getByText('Submit'));
+
+    expect(onSubmit).toHaveBeenCalledWith({ name: 'Alice', age: 25 });
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('25')).toBeInTheDocument();
+  });
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index 2daa7d4..376f7e8 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -2,10 +2,15 @@ import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   test: {
-    testDir: 'tests/unit',
+    testDir: 'tests',
     environment: 'jsdom',
     setupFiles: ['tests/setup.ts'],
-    include: ['tests/unit/**/*.{test,spec}.ts', 'tests/unit/**/*.{test,spec}.tsx'],
+    include: [
+      'tests/unit/**/*.{test,spec}.ts',
+      'tests/unit/**/*.{test,spec}.tsx',
+      'tests/integration/**/*.{test,spec}.ts',
+      'tests/integration/**/*.{test,spec}.tsx',
+    ],
     exclude: ['node_modules/**', 'tests/e2e/**', 'dist/**'],
     coverage: {
       provider: 'v8',