@nextsparkjs/theme-default 0.1.0-beta.51 → 0.1.0-beta.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextsparkjs/theme-default",
-  "version": "0.1.0-beta.51",
+  "version": "0.1.0-beta.54",
   "private": false,
   "type": "module",
   "main": "./config/theme.config.ts",
@@ -17,8 +17,8 @@
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "zod": "^4.0.0",
-    "@nextsparkjs/core": "0.1.0-beta.51",
-    "@nextsparkjs/testing": "0.1.0-beta.51"
+    "@nextsparkjs/core": "0.1.0-beta.54",
+    "@nextsparkjs/testing": "0.1.0-beta.54"
   },
   "nextspark": {
     "type": "theme",

package/tests/cypress/e2e/_utils/selectors/dashboard-topnav.bdd.md

@@ -2,8 +2,8 @@
 feature: Dashboard Topnav UI Selectors Validation
 priority: high
 tags: [selectors, topnav, dashboard, ui-validation]
-grepTags: [ui-selectors, dashboard, topnav, SEL_TNAV_001, SEL_TNAV_002, SEL_TNAV_003, SEL_TNAV_004, SEL_TNAV_005, SEL_TNAV_006]
-coverage: 6
+grepTags: [ui-selectors, dashboard, topnav, SEL_TNAV_001, SEL_TNAV_002, SEL_TNAV_003, SEL_TNAV_004, SEL_TNAV_005, SEL_TNAV_006, SEL_TNAV_007]
+coverage: 7
 ---
 
 # Dashboard Topnav UI Selectors Validation
@@ -263,6 +263,53 @@ Then deberia encontrar el indicador de estado de carga del usuario
 
 ---
 
+## @test SEL_TNAV_007: Settings Menu
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** topnav, settings-menu, dropdown
+- **Grep:** `@ui-selectors` `@dashboard` `@topnav` `@SEL_TNAV_007`
+- **Status:** Active (3 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Settings menu opens and shows links
+
+Given I am logged in as a developer user
+And the settings menu is enabled in theme config
+And I navigate to the dashboard
+Then I should find the settings menu trigger
+When I click on the settings menu trigger
+Then I should see the settings menu content
+And I should find settings menu links (e.g., patterns)
+```
+
+```gherkin:es
+Scenario: Menu de configuracion se abre y muestra links
+
+Given estoy logueado como usuario developer
+And el menu de configuracion esta habilitado en la config del tema
+And navego al dashboard
+Then deberia encontrar el trigger del menu de configuracion
+When hago click en el trigger del menu de configuracion
+Then deberia ver el contenido del menu de configuracion
+And deberia encontrar links del menu de configuracion (ej. patrones)
+```
+
+### Expected Results
+| Test ID | Selector Path | POM Accessor | data-cy Value | Status |
+|---------|---------------|--------------|---------------|--------|
+| SEL_TNAV_007_01 | dashboard.topnav.settingsMenu.trigger | dashboard.selectors.topnavSettingsMenuTrigger | topnav-settings-menu-trigger | Implemented |
+| SEL_TNAV_007_02 | dashboard.topnav.settingsMenu.content | dashboard.selectors.topnavSettingsMenuContent | topnav-settings-menu | Implemented |
+| SEL_TNAV_007_03 | dashboard.topnav.settingsMenu.link(index) | dashboard.selectors.topnavSettingsMenuLink(0) | topnav-settings-link-0 | Implemented |
+
+### Notes
+- Settings menu must be enabled in theme config (TOPBAR_CONFIG.settingsMenu)
+- Links are dynamically generated from config
+- Common links include: Patterns
+
+---
+
 ## Related Components
 
 | Component | File | Selectors |

package/tests/cypress/e2e/_utils/selectors/dashboard-topnav.cy.ts

@@ -21,6 +21,7 @@
  * - SEL_TNAV_004: User Menu (5 selectors)
  * - SEL_TNAV_005: Quick Create (3 selectors)
  * - SEL_TNAV_006: Loading State (1 skipped - transient state)
+ * - SEL_TNAV_007: Settings Menu (3 selectors)
  *
  * NOTE: Public navbar tests (logo, signin, signup) are in public.cy.ts
  */
@@ -149,8 +150,28 @@ describe('Dashboard Topnav Selectors Validation', { tags: ['@ui-selectors', '@da
   // NOTE: Only visible during auth loading - transient state
   // ============================================
   describe('SEL_TNAV_006: Loading State', { tags: '@SEL_TNAV_006' }, () => {
-    it.skip('should find user loading state (only visible during auth loading)', () => {
+    it.skip('SEL_TNAV_006_01: should find user loading state (only visible during auth loading)', { tags: '@SEL_TNAV_006_01' }, () => {
       cy.get(dashboard.selectors.topnavUserLoading).should('exist')
     })
   })
+
+  // ============================================
+  // SEL_TNAV_007: SETTINGS MENU (3 selectors)
+  // NOTE: settingsMenu must be enabled in theme config
+  // ============================================
+  describe('SEL_TNAV_007: Settings Menu', { tags: '@SEL_TNAV_007' }, () => {
+    it('SEL_TNAV_007_01: should find settings menu trigger', { tags: '@SEL_TNAV_007_01' }, () => {
+      cy.get(dashboard.selectors.topnavSettingsMenuTrigger).should('exist')
+    })
+
+    it('SEL_TNAV_007_02: should find settings menu content when opened', { tags: '@SEL_TNAV_007_02' }, () => {
+      cy.get(dashboard.selectors.topnavSettingsMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavSettingsMenuContent).should('be.visible')
+    })
+
+    it('SEL_TNAV_007_03: should find settings menu link when opened', { tags: '@SEL_TNAV_007_03' }, () => {
+      cy.get(dashboard.selectors.topnavSettingsMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavSettingsMenuLink(0)).should('exist')
+    })
+  })
 })

package/tests/cypress/e2e/_utils/selectors/patterns.bdd.md

@@ -0,0 +1,388 @@
+---
+feature: Patterns UI Selectors Validation
+priority: high
+tags: [selectors, patterns, ui-validation]
+grepTags: [ui-selectors, patterns, feat-patterns, SEL_PAT_001, SEL_PAT_002, SEL_PAT_003, SEL_PAT_004, SEL_PAT_005, SEL_PAT_006, SEL_PAT_007, SEL_PAT_008]
+coverage: 8
+---
+
+# Patterns UI Selectors Validation
+
+> Validates that patterns-specific selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality. Validates KEY DIFFERENCES from standard entity editor: no slug input and no patterns tab in block picker.
+
+**Login:** Uses Developer via `loginAsDefaultDeveloper()`.
+
+**Dependencies:**
+- Sample patterns must exist (from seed data)
+- At least one pattern must have usages (for reports tests)
+
+## @test SEL_PAT_001: Patterns List Page Selectors
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** patterns, list, page
+- **Grep:** `@ui-selectors` `@patterns` `@feat-patterns` `@SEL_PAT_001`
+- **Status:** Active (5 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Patterns list page has complete selector coverage
+
+Given I am logged in as a developer user
+And I navigate to the patterns list page
+Then I should find the page container
+And I should find the page title
+And I should find the add button
+And I should find the search container
+And I should find the table container
+```
+
+```gherkin:es
+Scenario: Pagina de lista de patrones tiene cobertura completa de selectores
+
+Given estoy logueado como usuario developer
+And navego a la pagina de lista de patrones
+Then deberia encontrar el contenedor de pagina
+And deberia encontrar el titulo de pagina
+And deberia encontrar el boton de agregar
+And deberia encontrar el contenedor de busqueda
+And deberia encontrar el contenedor de tabla
+```
+
+### Expected Results
+| Test ID | Selector Path | Status |
+|---------|---------------|--------|
+| SEL_PAT_001_01 | patterns.selectors.page | Implemented |
+| SEL_PAT_001_02 | patterns.selectors.title | Implemented |
+| SEL_PAT_001_03 | patterns.selectors.addBtn | Implemented |
+| SEL_PAT_001_04 | patterns.selectors.searchContainer | Implemented |
+| SEL_PAT_001_05 | patterns.selectors.table | Implemented |
+
+---
+
+## @test SEL_PAT_002: Patterns List Table Actions
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** patterns, list, actions, table
+- **Grep:** `@ui-selectors` `@patterns` `@feat-patterns` `@SEL_PAT_002`
+- **Status:** Active (4 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Patterns list table has all row action selectors
+
+Given I am logged in as a developer user
+And I navigate to the patterns list page
+And at least one pattern exists in the database
+Then I should find the row menu for the first pattern
+When I click the row menu
+Then I should find the edit action
+And I should find the delete action
+And I should find the usages quick action
+```
+
+```gherkin:es
+Scenario: Tabla de lista de patrones tiene todos los selectores de acciones de fila
+
+Given estoy logueado como usuario developer
+And navego a la pagina de lista de patrones
+And al menos un patron existe en la base de datos
+Then deberia encontrar el menu de fila del primer patron
+When hago click en el menu de fila
+Then deberia encontrar la accion de editar
+And deberia encontrar la accion de eliminar
+And deberia encontrar la accion rapida de usos
+```
+
+### Expected Results
+| Test ID | Selector Path | Status |
+|---------|---------------|--------|
+| SEL_PAT_002_01 | patterns.selectors.rowMenu(id) | Implemented |
+| SEL_PAT_002_02 | patterns.selectors.rowAction('edit', id) | Implemented |
+| SEL_PAT_002_03 | patterns.selectors.rowAction('delete', id) | Implemented |
+| SEL_PAT_002_04 | patterns.selectors.rowAction('usages', id) | Implemented |
+
+---
+
+## @test SEL_PAT_003: Patterns Editor Header - KEY DIFFERENCES
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** patterns, editor, header, differences
+- **Grep:** `@ui-selectors` `@patterns` `@feat-patterns` `@SEL_PAT_003`
+- **Status:** Active (5 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Patterns editor header validates key differences from standard editor
+
+Given I am logged in as a developer user
+And I navigate to create a new pattern
+And the editor is loaded
+Then I should find the header container
+And I should find the title input
+And I should NOT find the slug input (patterns-specific)
+And I should find the save button
+And I should find the view mode toggle
+```
+
+```gherkin:es
+Scenario: Header del editor de patrones valida diferencias clave del editor estandar
+
+Given estoy logueado como usuario developer
+And navego a crear un nuevo patron
+And el editor esta cargado
+Then deberia encontrar el contenedor del header
+And deberia encontrar el input de titulo
+And NO deberia encontrar el input de slug (especifico de patrones)
+And deberia encontrar el boton de guardar
+And deberia encontrar el toggle de modo de vista
+```
+
+### Expected Results
+| Test ID | Selector Path | Assertion | Status |
+|---------|---------------|-----------|--------|
+| SEL_PAT_003_01 | blockEditor.header.container | should exist | Implemented |
+| SEL_PAT_003_02 | blockEditor.header.titleInput | should exist | Implemented |
+| SEL_PAT_003_03 | blockEditor.header.slugInput | should NOT exist | **KEY DIFFERENCE** |
+| SEL_PAT_003_04 | blockEditor.header.saveButton | should exist | Implemented |
+| SEL_PAT_003_05 | blockEditor.header.viewToggle | should exist | Implemented |
+
+### Notes
+- **KEY DIFFERENCE:** Patterns do not have slugs, so the slug input should NOT exist.
+
+---
+
+## @test SEL_PAT_004: Patterns Editor Block Picker - KEY DIFFERENCES
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** patterns, editor, block-picker, differences
+- **Grep:** `@ui-selectors` `@patterns` `@feat-patterns` `@SEL_PAT_004`
+- **Status:** Active (5 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Patterns block picker validates key differences from standard editor
+
+Given I am logged in as a developer user
+And I navigate to create a new pattern
+And the editor is loaded
+Then I should find the block picker container
+And I should find the blocks tab
+And I should NOT find the patterns tab (patterns-specific)
+And I should find the config tab
+And I should find the search input
+```
+
+```gherkin:es
+Scenario: Block picker de patrones valida diferencias clave del editor estandar
+
+Given estoy logueado como usuario developer
+And navego a crear un nuevo patron
+And el editor esta cargado
+Then deberia encontrar el contenedor del block picker
+And deberia encontrar la pestana de bloques
+And NO deberia encontrar la pestana de patrones (especifico de patrones)
+And deberia encontrar la pestana de configuracion
+And deberia encontrar el input de busqueda
+```
+
+### Expected Results
+| Test ID | Selector Path | Assertion | Status |
+|---------|---------------|-----------|--------|
+| SEL_PAT_004_01 | blockEditor.blockPicker.container | should exist | Implemented |
+| SEL_PAT_004_02 | blockEditor.blockPicker.tabBlocks | should exist | Implemented |
+| SEL_PAT_004_03 | blockEditor.blockPicker.tabPatterns | should NOT exist | **KEY DIFFERENCE** |
+| SEL_PAT_004_04 | blockEditor.blockPicker.tabConfig | should exist | Implemented |
+| SEL_PAT_004_05 | blockEditor.blockPicker.searchInput | should exist | Implemented |
+
+### Notes
+- **KEY DIFFERENCE:** Patterns cannot contain other patterns (to prevent recursion), so the patterns tab should NOT exist.
+
+---
+
+## @test SEL_PAT_005: Patterns Reports Page
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** patterns, reports, usages
+- **Grep:** `@ui-selectors` `@patterns` `@feat-patterns` `@SEL_PAT_005`
+- **Status:** Active (4 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Pattern usages report page has complete structure
+
+Given I am logged in as a developer user
+And I navigate to the patterns list page
+And I click the usages action on the first pattern
+Then I should find the report container
+And I should find the back button
+And I should find the page title
+And I should find the edit button
+```
+
+```gherkin:es
+Scenario: Pagina de reporte de usos de patrones tiene estructura completa
+
+Given estoy logueado como usuario developer
+And navego a la pagina de lista de patrones
+And hago click en la accion de usos del primer patron
+Then deberia encontrar el contenedor del reporte
+And deberia encontrar el boton de volver
+And deberia encontrar el titulo de pagina
+And deberia encontrar el boton de editar
+```
+
+### Expected Results
+| Test ID | Selector Path | Status |
+|---------|---------------|--------|
+| SEL_PAT_005_01 | patterns.patternSelectors.usageReport.container | Implemented |
+| SEL_PAT_005_02 | patterns.selectors.backButton | Implemented |
+| SEL_PAT_005_03 | patterns.selectors.headerTitle | Implemented |
+| SEL_PAT_005_04 | patterns.selectors.editButton | Implemented |
+
+---
+
+## @test SEL_PAT_006: Pattern Usage Stats
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** patterns, reports, stats
+- **Grep:** `@ui-selectors` `@patterns` `@feat-patterns` `@SEL_PAT_006`
+- **Status:** Active (3 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Pattern usage stats have all required selectors
+
+Given I am logged in as a developer user
+And I navigate to a pattern's usages page
+Then I should find the stats container
+And I should find the total usage card
+And I should find usage by type cards (if usages exist)
+```
+
+```gherkin:es
+Scenario: Estadisticas de uso de patron tienen todos los selectores requeridos
+
+Given estoy logueado como usuario developer
+And navego a la pagina de usos de un patron
+Then deberia encontrar el contenedor de estadisticas
+And deberia encontrar la tarjeta de uso total
+And deberia encontrar las tarjetas de uso por tipo (si existen usos)
+```
+
+### Expected Results
+| Test ID | Selector Path | Status |
+|---------|---------------|--------|
+| SEL_PAT_006_01 | patterns.patternSelectors.usageStats.container | Implemented |
+| SEL_PAT_006_02 | patterns.patternSelectors.usageStats.total | Implemented |
+| SEL_PAT_006_03 | patterns.patternSelectors.usageStats.byType(type) | Conditional |
+
+---
+
+## @test SEL_PAT_007: Pattern Usage Report Controls
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** patterns, reports, controls, pagination
+- **Grep:** `@ui-selectors` `@patterns` `@feat-patterns` `@SEL_PAT_007`
+- **Status:** Active (6 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Pattern usage report controls have all required selectors
+
+Given I am logged in as a developer user
+And I navigate to a pattern's usages page
+Then I should find the report container
+And I should find the filter select
+And I should find the pagination container
+And I should find the prev page button
+And I should find the next page button
+And I should find the results info
+```
+
+```gherkin:es
+Scenario: Controles de reporte de uso de patron tienen todos los selectores requeridos
+
+Given estoy logueado como usuario developer
+And navego a la pagina de usos de un patron
+Then deberia encontrar el contenedor del reporte
+And deberia encontrar el select de filtro
+And deberia encontrar el contenedor de paginacion
+And deberia encontrar el boton de pagina anterior
+And deberia encontrar el boton de pagina siguiente
+And deberia encontrar la info de resultados
+```
+
+### Expected Results
+| Test ID | Selector Path | Status |
+|---------|---------------|--------|
+| SEL_PAT_007_01 | patterns.patternSelectors.usageReport.container | Implemented |
+| SEL_PAT_007_02 | patterns.patternSelectors.usageReport.filterSelect | Implemented |
+| SEL_PAT_007_03 | patterns.patternSelectors.usageReport.pagination | Implemented |
+| SEL_PAT_007_04 | patterns.patternSelectors.usageReport.prevPage | Implemented |
+| SEL_PAT_007_05 | patterns.patternSelectors.usageReport.nextPage | Implemented |
+| SEL_PAT_007_06 | patterns.patternSelectors.usageReport.resultsInfo | Implemented |
+
+---
+
+## @test SEL_PAT_008: Pattern Usage Table
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** patterns, reports, table
+- **Grep:** `@ui-selectors` `@patterns` `@feat-patterns` `@SEL_PAT_008`
+- **Status:** Partial (1 passing, 2 skipped)
+
+```gherkin:en
+Scenario: Pattern usage table has all required selectors
+
+Given I am logged in as a developer user
+And I navigate to a pattern's usages page
+Then I should find the usage table container (or empty state)
+And I should find usage rows (if pattern has usages)
+And I should find view links in usage rows (if pattern has usages)
+```
+
+```gherkin:es
+Scenario: Tabla de usos de patron tiene todos los selectores requeridos
+
+Given estoy logueado como usuario developer
+And navego a la pagina de usos de un patron
+Then deberia encontrar el contenedor de tabla de usos (o estado vacio)
+And deberia encontrar filas de uso (si el patron tiene usos)
+And deberia encontrar links de ver en filas de uso (si el patron tiene usos)
+```
+
+### Expected Results
+| Test ID | Selector Path | Status |
+|---------|---------------|--------|
+| SEL_PAT_008_01 | patterns.patternSelectors.usageTable.container/empty | Implemented |
+| SEL_PAT_008_02 | [data-cy^="pattern-usage-row-"] | **Skipped** |
+| SEL_PAT_008_03 | [data-cy^="pattern-usage-view-"] | **Skipped** |
+
+### Notes
+- Tests SEL_PAT_008_02 and SEL_PAT_008_03 are skipped because they require the pattern to have actual usages.
+
+---
+
+## Related Components
+
+| Component | File | Key Selectors |
+|-----------|------|---------------|
+| PatternsListPage | `packages/core/src/app/[locale]/(auth)/dashboard/patterns/page.tsx` | page, title, addBtn, table |
+| PatternEditor | `packages/core/src/components/page-builder/PageBuilder.tsx` | header.*, blockPicker.* |
+| PatternUsagesPage | `packages/core/src/app/[locale]/(auth)/dashboard/patterns/[id]/usages/page.tsx` | usageReport.*, usageStats.* |
+
+## Related POMs
+
+| POM | File | Usage |
+|-----|------|-------|
+| PatternsPOM | `themes/default/tests/cypress/src/entities/PatternsPOM.ts` | List operations, entity selectors |
+| PageBuilderPOM | `themes/default/tests/cypress/src/features/PageBuilderPOM.ts` | Editor selectors |

package/tests/cypress/e2e/_utils/selectors/patterns.cy.ts

@@ -0,0 +1,392 @@
+/**
+ * UI Selectors Validation: Patterns
+ *
+ * This test validates that patterns-specific selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate PatternsPOM and PageBuilderPOM selectors work correctly
+ * - Ensure all patterns-specific selectors are implemented
+ * - Validate KEY DIFFERENCES from standard entity editor:
+ *   - NO slug input (patterns don't have slugs)
+ *   - NO patterns tab in block picker (to prevent recursive patterns)
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to patterns pages (requires login)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds per describe block)
+ *
+ * Test IDs:
+ * - SEL_PAT_001: Patterns List Page Selectors (5 selectors)
+ * - SEL_PAT_002: Patterns List Table Actions (4 selectors)
+ * - SEL_PAT_003: Patterns Editor Header - KEY DIFFERENCES (5 selectors)
+ * - SEL_PAT_004: Patterns Editor Block Picker - KEY DIFFERENCES (5 selectors)
+ * - SEL_PAT_005: Patterns Reports Page (4 selectors)
+ * - SEL_PAT_006: Pattern Usage Stats (3 selectors)
+ * - SEL_PAT_007: Pattern Usage Report Controls (5 selectors)
+ * - SEL_PAT_008: Pattern Usage Table (3 selectors)
+ *
+ * DEPENDENCIES:
+ * - Sample patterns must exist (from seed data)
+ * - At least one pattern must have usages (for reports tests)
+ */
+
+import { PatternsPOM } from '../../../src/entities/PatternsPOM'
+import { cySelector } from '../../../src/selectors'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
+
+describe('Patterns Selectors Validation', { tags: ['@ui-selectors', '@patterns', '@feat-patterns'] }, () => {
+  const patterns = PatternsPOM.create()
+
+  // ============================================
+  // SEL_PAT_001: PATTERNS LIST PAGE SELECTORS (5 selectors)
+  // ============================================
+  describe('SEL_PAT_001: Patterns List Page Selectors', { tags: '@SEL_PAT_001' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+    })
+
+    it('SEL_PAT_001_01: should find page container', { tags: '@SEL_PAT_001_01' }, () => {
+      cy.get(patterns.selectors.page).should('exist')
+    })
+
+    it('SEL_PAT_001_02: should find page title', { tags: '@SEL_PAT_001_02' }, () => {
+      cy.get(patterns.selectors.title).should('exist')
+    })
+
+    it('SEL_PAT_001_03: should find add button', { tags: '@SEL_PAT_001_03' }, () => {
+      cy.get(patterns.selectors.addButton).should('exist')
+    })
+
+    it('SEL_PAT_001_04: should find search container', { tags: '@SEL_PAT_001_04' }, () => {
+      cy.get(patterns.selectors.searchContainer).should('exist')
+    })
+
+    it('SEL_PAT_001_05: should find table container', { tags: '@SEL_PAT_001_05' }, () => {
+      cy.get(patterns.selectors.table).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_002: PATTERNS LIST TABLE ACTIONS (4 selectors)
+  // REQUIRES: At least one pattern in the database
+  // ============================================
+  describe('SEL_PAT_002: Patterns List Table Actions', { tags: '@SEL_PAT_002' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+    })
+
+    it('SEL_PAT_002_01: should find row menu for first pattern', { tags: '@SEL_PAT_002_01' }, () => {
+      // Get first pattern row and find its menu
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).should('exist')
+        }
+      })
+    })
+
+    it('SEL_PAT_002_02: should find edit action in row menu', { tags: '@SEL_PAT_002_02' }, () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('edit', patternId)).should('exist')
+        }
+      })
+    })
+
+    it('SEL_PAT_002_03: should find delete action in row menu', { tags: '@SEL_PAT_002_03' }, () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('delete', patternId)).should('exist')
+        }
+      })
+    })
+
+    it('SEL_PAT_002_04: should find usages quick action in row menu', { tags: '@SEL_PAT_002_04' }, () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).should('exist')
+        }
+      })
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_003: PATTERNS EDITOR HEADER - KEY DIFFERENCES (5 selectors)
+  // NOTE: Patterns editor does NOT have slug input (unlike pages/posts)
+  // ============================================
+  describe('SEL_PAT_003: Patterns Editor Header', { tags: '@SEL_PAT_003' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      // Navigate to create a new pattern
+      cy.visit('/dashboard/patterns/create', { timeout: 60000 })
+      // Wait for editor to load using block editor selector
+      cy.get(cySelector('blockEditor.header.container'), { timeout: 15000 }).should('be.visible')
+    })
+
+    it('SEL_PAT_003_01: should find header container', { tags: '@SEL_PAT_003_01' }, () => {
+      cy.get(cySelector('blockEditor.header.container')).should('exist')
+    })
+
+    it('SEL_PAT_003_02: should find title input', { tags: '@SEL_PAT_003_02' }, () => {
+      cy.get(cySelector('blockEditor.header.titleInput')).should('exist')
+    })
+
+    it('SEL_PAT_003_03: should NOT have slug input (patterns-specific)', { tags: '@SEL_PAT_003_03' }, () => {
+      // KEY DIFFERENCE: Patterns do not have slugs
+      cy.get(cySelector('blockEditor.header.slugInput')).should('not.exist')
+    })
+
+    it('SEL_PAT_003_04: should find save button', { tags: '@SEL_PAT_003_04' }, () => {
+      cy.get(cySelector('blockEditor.header.saveButton')).should('exist')
+    })
+
+    it('SEL_PAT_003_05: should find view mode toggle', { tags: '@SEL_PAT_003_05' }, () => {
+      cy.get(cySelector('blockEditor.header.viewToggle')).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_004: PATTERNS EDITOR BLOCK PICKER - KEY DIFFERENCES (5 selectors)
+  // NOTE: Patterns block picker does NOT have patterns tab (to prevent recursion)
+  // ============================================
+  describe('SEL_PAT_004: Patterns Editor Block Picker', { tags: '@SEL_PAT_004' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      cy.visit('/dashboard/patterns/create', { timeout: 60000 })
+      cy.get(cySelector('blockEditor.header.container'), { timeout: 15000 }).should('be.visible')
+    })
+
+    it('SEL_PAT_004_01: should find block picker container', { tags: '@SEL_PAT_004_01' }, () => {
+      cy.get(cySelector('blockEditor.blockPicker.container')).should('exist')
+    })
+
+    it('SEL_PAT_004_02: should find blocks tab', { tags: '@SEL_PAT_004_02' }, () => {
+      cy.get(cySelector('blockEditor.blockPicker.tabBlocks')).should('exist')
+    })
+
+    it('SEL_PAT_004_03: should NOT have patterns tab (patterns-specific)', { tags: '@SEL_PAT_004_03' }, () => {
+      // KEY DIFFERENCE: Patterns cannot contain other patterns (prevent recursion)
+      cy.get(cySelector('blockEditor.blockPicker.tabPatterns')).should('not.exist')
+    })
+
+    it('SEL_PAT_004_04: should find config tab', { tags: '@SEL_PAT_004_04' }, () => {
+      cy.get(cySelector('blockEditor.blockPicker.tabConfig')).should('exist')
+    })
+
+    it('SEL_PAT_004_05: should find search input', { tags: '@SEL_PAT_004_05' }, () => {
+      cy.get(cySelector('blockEditor.blockPicker.searchInput')).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_005: PATTERNS REPORTS PAGE (4 selectors)
+  // REQUIRES: A pattern with usages for meaningful tests
+  // ============================================
+  describe('SEL_PAT_005: Patterns Reports Page', { tags: '@SEL_PAT_005' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+    })
+
+    it('SEL_PAT_005_01: should navigate to pattern usages and find report container', { tags: '@SEL_PAT_005_01' }, () => {
+      // Click usages action on first pattern
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          // Wait for page to load and find report container
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+        }
+      })
+    })
+
+    it('SEL_PAT_005_02: should find back button on usages page', { tags: '@SEL_PAT_005_02' }, () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+          // Back button should exist on the page
+          cy.get(patterns.selectors.backButton).should('exist')
+        }
+      })
+    })
+
+    it('SEL_PAT_005_03: should find page title on usages page', { tags: '@SEL_PAT_005_03' }, () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+          cy.get(patterns.selectors.headerTitle).should('exist')
+        }
+      })
+    })
+
+    it('SEL_PAT_005_04: should find edit button on usages page', { tags: '@SEL_PAT_005_04' }, () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+          cy.get(patterns.selectors.editButton).should('exist')
+        }
+      })
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_006: PATTERN USAGE STATS (3 selectors)
+  // ============================================
+  describe('SEL_PAT_006: Pattern Usage Stats', { tags: '@SEL_PAT_006' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+      // Navigate to first pattern's usages
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+        }
+      })
+    })
+
+    it('SEL_PAT_006_01: should find stats container', { tags: '@SEL_PAT_006_01' }, () => {
+      cy.get(patterns.patternSelectors.usageStats.container).should('exist')
+    })
+
+    it('SEL_PAT_006_02: should find total usage card', { tags: '@SEL_PAT_006_02' }, () => {
+      cy.get(patterns.patternSelectors.usageStats.total).should('exist')
+    })
+
+    it('SEL_PAT_006_03: should find usage by type cards (if usages exist)', { tags: '@SEL_PAT_006_03' }, () => {
+      // This might not exist if pattern has no usages, so check for either stats or loading
+      cy.get('body').then(($body) => {
+        if ($body.find(patterns.patternSelectors.usageStats.byType('pages')).length > 0) {
+          cy.get(patterns.patternSelectors.usageStats.byType('pages')).should('exist')
+        } else if ($body.find(patterns.patternSelectors.usageStats.byType('posts')).length > 0) {
+          cy.get(patterns.patternSelectors.usageStats.byType('posts')).should('exist')
+        } else {
+          // No usage by type cards, which is fine if pattern has no usages
+          cy.log('No usage by type cards found - pattern may have no usages')
+        }
+      })
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_007: PATTERN USAGE REPORT CONTROLS (5 selectors)
+  // ============================================
+  describe('SEL_PAT_007: Pattern Usage Report Controls', { tags: '@SEL_PAT_007' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+      // Navigate to first pattern's usages
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+        }
+      })
+    })
+
+    it('SEL_PAT_007_01: should find report container', { tags: '@SEL_PAT_007_01' }, () => {
+      cy.get(patterns.patternSelectors.usageReport.container).should('exist')
+    })
+
+    it('SEL_PAT_007_02: should find filter select', { tags: '@SEL_PAT_007_02' }, () => {
+      cy.get(patterns.patternSelectors.usageReport.filterSelect).should('exist')
+    })
+
+    it('SEL_PAT_007_03: should find pagination container', { tags: '@SEL_PAT_007_03' }, () => {
+      cy.get(patterns.patternSelectors.usageReport.pagination).should('exist')
+    })
+
+    it('SEL_PAT_007_04: should find prev page button', { tags: '@SEL_PAT_007_04' }, () => {
+      cy.get(patterns.patternSelectors.usageReport.prevPage).should('exist')
+    })
+
+    it('SEL_PAT_007_05: should find next page button', { tags: '@SEL_PAT_007_05' }, () => {
+      cy.get(patterns.patternSelectors.usageReport.nextPage).should('exist')
+    })
+
+    it('SEL_PAT_007_06: should find results info', { tags: '@SEL_PAT_007_06' }, () => {
+      cy.get(patterns.patternSelectors.usageReport.resultsInfo).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_008: PATTERN USAGE TABLE (3 selectors)
+  // ============================================
+  describe('SEL_PAT_008: Pattern Usage Table', { tags: '@SEL_PAT_008' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+      // Navigate to first pattern's usages
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+        }
+      })
+    })
+
+    it('SEL_PAT_008_01: should find usage table container (or empty state)', { tags: '@SEL_PAT_008_01' }, () => {
+      cy.get('body').then(($body) => {
+        // Either the table exists or the empty state
+        if ($body.find(patterns.patternSelectors.usageTable.container).length > 0) {
+          cy.get(patterns.patternSelectors.usageTable.container).should('exist')
+        } else {
+          cy.get(patterns.patternSelectors.usageTable.empty).should('exist')
+        }
+      })
+    })
+
+    it.skip('SEL_PAT_008_02: should find usage row (requires pattern with usages)', { tags: '@SEL_PAT_008_02' }, () => {
+      // This test requires the pattern to have actual usages
+      cy.get('[data-cy^="pattern-usage-row-"]').first().should('exist')
+    })
+
+    it.skip('SEL_PAT_008_03: should find view link in usage row (requires pattern with usages)', { tags: '@SEL_PAT_008_03' }, () => {
+      // This test requires the pattern to have actual usages
+      cy.get('[data-cy^="pattern-usage-view-"]').first().should('exist')
+    })
+  })
+})

package/tests/cypress/src/features/DashboardPOM.ts

@@ -66,6 +66,11 @@ export class DashboardPOM extends BasePOM {
       topnavUserLoading: cySelector('dashboard.topnav.userLoading'),
       topnavSignin: cySelector('dashboard.topnav.signin'),
       topnavSignup: cySelector('dashboard.topnav.signup'),
+      // Topnav settings menu
+      topnavSettingsMenuTrigger: cySelector('dashboard.topnav.settingsMenu.trigger'),
+      topnavSettingsMenuContent: cySelector('dashboard.topnav.settingsMenu.content'),
+      topnavSettingsMenuItem: (index: number) => cySelector('dashboard.topnav.settingsMenu.item', { index }),
+      topnavSettingsMenuLink: (index: number) => cySelector('dashboard.topnav.settingsMenu.link', { index }),
       // Topnav mobile menu
       topnavMobileMenuToggle: cySelector('dashboard.topnav.mobileMenu.toggle'),
       topnavMobileMenuContainer: cySelector('dashboard.topnav.mobileMenu.container'),