chore: upgrade to daisyUI v5.5 & tailwindcss v4.3

.cursor/rules/frontend-component.mdc

@@ -16,14 +16,14 @@ Use this rule when writing or modifying Vue components, component SCSS, or Story
 ## Core Technologies
 
 - Vue 3 with TypeScript.
-- DaisyUI + Tailwind for styling, with the `daisy-` prefix.
+- DaisyUI + Tailwind for styling: unprefixed Tailwind utilities (`flex`, `text-primary`, …) and `daisy-`-prefixed DaisyUI component classes (`daisy-btn`, `daisy-card`, …).
 - Vitest for testing with Playwright browser mode.
 - Biome for linting and formatting.
 
 ## Icons
 
-- Prefer Lucide for normal UI icons via `lucide-vue-next` (`import { IconName } from "lucide-vue-next"`). Import only the icons each file needs; rely on `currentColor` so icons follow text/theme color.
-- `lucide-vue-next` defaults to 24x24 via the `size` prop. Use `:size="..."` and/or `daisy-w-*`, `daisy-h-*`, or `daisy-size-*`. Never use bare `w-*` / `h-*`; Tailwind uses the `daisy-` prefix here.
+- Prefer Lucide for normal UI icons via `@lucide/vue` (`import { IconName } from "@lucide/vue"`). Import only the icons each file needs; rely on `currentColor` so icons follow text/theme color.
+- `@lucide/vue` defaults to 24x24 via the `size` prop. Use `:size="..."` and/or Tailwind `w-*`, `h-*`, or `size-*` on icons.
 
 ## Naming Conventions
 

biome.json

@@ -16,6 +16,7 @@
       "!**/.idea",
       "!**/.vscode",
       "!**/dist",
+      "!**/storybook-static",
       "!**/gradle",
       "!**/node_modules",
       "!**/*.md",

cli/package.json

@@ -12,7 +12,7 @@
   },
   "engines": {
     "node": ">=24.14",
-    "pnpm": ">=11.1.2"
+    "pnpm": ">=11.1.3"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -38,13 +38,13 @@
   "devDependencies": {
     "@stryker-mutator/core": "^9.6.1",
     "@stryker-mutator/vitest-runner": "^9.6.1",
-    "@types/node": "25.7.0",
+    "@types/node": "25.9.0",
     "@types/react": "^19.2.14",
     "doughnut-test-fixtures": "workspace:*",
     "esbuild": "0.28.0",
     "ink": "^7.0.3",
     "ink-testing-library": "^4.0.0",
-    "tsx": "4.21.0",
+    "tsx": "4.22.2",
     "typescript": "6.0.3",
     "vitest": "4.1.6"
   }

e2e_test/start/formField.ts

@@ -48,11 +48,11 @@ const formField = (label: string) => {
       return self
     },
     expectError(message: string) {
-      formControl(label).find('.daisy-text-error').findByText(message)
+      formControl(label).find('.text-error').findByText(message)
       return self
     },
     expectNoError() {
-      formControl(label).find('.daisy-text-error').should('not.exist')
+      formControl(label).find('.text-error').should('not.exist')
       return self
     },
     type(text: string) {

e2e_test/start/pageBase.ts

@@ -3,10 +3,5 @@
 
 /** Waits until no `.loading-bar` nodes remain (thin bar + spinners). */
 export const pageIsNotLoading = () => {
-  cy.get('body').should(
-    ($body) => {
-      expect($body.find('.loading-bar').length).to.eq(0)
-    },
-    { timeout: 30000 }
-  )
+  cy.get('.loading-bar', { timeout: 30000 }).should('not.exist')
 }

e2e_test/start/pageObjects/QuizQuestionPage.ts

@@ -22,7 +22,7 @@ const assumeQuestionPage = (stem?: string) => {
     skipQuestion() {
       pageIsNotLoading()
       getQuestionSection().should('exist')
-      cy.get('.daisy-progress-bar').first().click()
+      cy.get('.progress-bar').first().click()
       cy.findByRole('button', { name: 'Move to end of list' }).click()
     },
     answerFirstOption() {

e2e_test/start/pageObjects/adminPages/adminDashboardPage.ts

@@ -1,3 +1,4 @@
+import { clickDaisyDialogButton } from '../../../support/daisyModalHelpers'
 import { pageIsNotLoading } from '../../pageBase'
 import { submittableForm } from '../../forms'
 
@@ -16,9 +17,7 @@ export function assumeAdminDashboardPage() {
         },
         deleteSelected() {
           cy.get('button').contains('Delete Selected').click()
-          cy.get('.daisy-modal-action')
-            .findByRole('button', { name: 'Delete' })
-            .click()
+          clickDaisyDialogButton('dialog.daisy-modal', 'Delete')
           return this
         },
         shouldBeEmpty() {

e2e_test/start/pageObjects/assimilationPage.ts

@@ -11,22 +11,33 @@ const understandingChecklist = () =>
   cy
     .get('[data-test="refine-note-modal"]')
     .contains('Understanding Checklist:')
-    .closest('.daisy-bg-accent')
+    .closest('.bg-accent')
 
-const mainNoteTitle = () =>
-  cy.get('#main-note-content [data-test="note-title"]', { timeout: 15000 })
+const mainNoteHeadingTitleSelector =
+  '#main-note-content h2.path-name-heading [role=title], #main-note-content [data-test="note-title"]'
+
+function waitForAssimilationNoteTitle(expectedTitle?: string) {
+  pageIsNotLoading()
+  cy.get('#main-note-content', { timeout: 15000 }).should('be.visible')
+  const title = cy.get(mainNoteHeadingTitleSelector, { timeout: 15000 })
+  if (expectedTitle !== undefined && expectedTitle.trim() !== '') {
+    title.should('contain', expectedTitle.trim())
+  } else {
+    title.should('exist')
+  }
+}
 
 export const assumeAssimilationPage = () => ({
   expectToAssimilateAndTotal(toAssimilateAndTotal: string) {
     const [assimilatedTodayCount, toAssimilateCountForToday, totalCount] =
       toAssimilateAndTotal.split('/')
 
-    cy.get('.daisy-progress-bar').should(
+    cy.get('.progress-bar').should(
       'contain',
       `Assimilating: ${assimilatedTodayCount}/${toAssimilateCountForToday}`
     )
     // Click progress bar to show tooltip
-    cy.get('.daisy-progress-bar').first().click()
+    cy.get('.progress-bar').first().click()
 
     // Check tooltip content
     cy.get('.tooltip-content').within(() => {
@@ -61,7 +72,8 @@ export const assumeAssimilationPage = () => ({
     return this
   },
   assimilateWithSpellingOption() {
-    cy.get('[data-test="note-title"]')
+    waitForAssimilationNoteTitle()
+    cy.get(mainNoteHeadingTitleSelector)
       .first()
       .invoke('text')
       .then((noteTitle: string) => {
@@ -85,14 +97,17 @@ export const assumeAssimilationPage = () => ({
     } else {
       switch (assimilationType) {
         case 'single note': {
-          if (title) mainNoteTitle().should('contain', title)
+          waitForAssimilationNoteTitle(title)
+          this.waitForAssimilationReady()
           if (additionalInfo) {
             cy.get('.note-content').should('contain', additionalInfo)
           }
           break
         }
 
         case 'image note': {
+          waitForAssimilationNoteTitle()
+          this.waitForAssimilationReady()
           if (additionalInfo) {
             const [expectedBodyText, expectedImage] = commonSenseSplit(
               additionalInfo,
@@ -113,9 +128,15 @@ export const assumeAssimilationPage = () => ({
               additionalInfo,
               '; '
             )
-            if (title) mainNoteTitle().should('contain', title)
-            if (targetNote) mainNoteTitle().should('contain', targetNote)
-            if (relationType) mainNoteTitle().should('contain', relationType)
+            if (title) waitForAssimilationNoteTitle(title)
+            if (targetNote) waitForAssimilationNoteTitle(targetNote)
+            if (relationType) {
+              cy.get(mainNoteHeadingTitleSelector).should(
+                'contain',
+                relationType
+              )
+            }
+            this.waitForAssimilationReady()
           }
           break
         }
@@ -274,6 +295,7 @@ export const assimilation = () => {
       getAssimilateListItemInSidebar(($el) => {
         $el.click()
       })
+      pageIsNotLoading()
       return assumeAssimilationPage()
     },
   }

e2e_test/start/pageObjects/bookReadingPage.ts

@@ -1,3 +1,7 @@
+import {
+  expectDaisyDialogBoxVisible,
+  openDaisyDialog,
+} from '../../support/daisyModalHelpers'
 import { pageIsNotLoading } from '../pageBase'
 
 export type BookLayoutRow = { depth: number; title: string }
@@ -646,10 +650,8 @@ const bookReadingPage = () => {
     },
     expectReorganizationPreviewDialog() {
       pageIsNotLoading()
-      cy.get('[data-testid="book-layout-reorganize-preview-dialog"]').should(
-        'have.class',
-        'daisy-modal-open'
-      )
+      const dialog = '[data-testid="book-layout-reorganize-preview-dialog"]'
+      expectDaisyDialogBoxVisible(dialog)
       cy.get('#book-layout-reorganize-preview-title').should(
         'contain',
         'Reorganize layout (preview)'
@@ -661,23 +663,24 @@ const bookReadingPage = () => {
       suggestedDepth: number
     ) {
       pageIsNotLoading()
-      cy.get('[data-testid="book-layout-reorganize-preview-dialog"]')
-        .should('have.class', 'daisy-modal-open')
-        .within(() => {
-          cy.contains(
-            '[data-testid="book-layout-reorganize-preview-row"]',
-            blockTitle
-          )
-            .should('be.visible')
-            .and('have.attr', 'data-suggested-depth', String(suggestedDepth))
-        })
+      const dialog = '[data-testid="book-layout-reorganize-preview-dialog"]'
+      expectDaisyDialogBoxVisible(dialog)
+      cy.get(`${dialog}.daisy-modal-open .daisy-modal-box`).within(() => {
+        cy.contains(
+          '[data-testid="book-layout-reorganize-preview-row"]',
+          blockTitle
+        )
+          .should('be.visible')
+          .and('have.attr', 'data-suggested-depth', String(suggestedDepth))
+      })
       return this
     },
     confirmAiReorganizeSuggestion() {
       pageIsNotLoading()
-      cy.get('[data-testid="book-layout-reorganize-preview-confirm"]')
-        .should('be.visible')
-        .click()
+      openDaisyDialog('[data-testid="book-layout-reorganize-preview-dialog"]')
+      cy.get('[data-testid="book-layout-reorganize-preview-confirm"]').click({
+        force: true,
+      })
       pageIsNotLoading()
       return this
     },
@@ -730,18 +733,17 @@ const bookReadingPage = () => {
     },
     expectTitlePromptWithDefaultTitle() {
       pageIsNotLoading()
-      cy.get('[data-testid="new-block-title-dialog"]').should('be.visible')
-      cy.get('[data-testid="new-block-title-input"]').should(
-        'not.have.value',
-        ''
-      )
+      const dialog = '[data-testid="new-block-title-dialog"]'
+      expectDaisyDialogBoxVisible(dialog)
+      cy.get('[data-testid="new-block-title-input"]')
+        .should('exist')
+        .should('not.have.value', '')
       return this
     },
     confirmTitlePrompt() {
       pageIsNotLoading()
-      cy.get('[data-testid="new-block-title-confirm"]')
-        .should('be.visible')
-        .click()
+      openDaisyDialog('[data-testid="new-block-title-dialog"]')
+      cy.get('[data-testid="new-block-title-confirm"]').click({ force: true })
       return this
     },
   }

e2e_test/start/pageObjects/messageCenterIndicator.ts

@@ -1,4 +1,5 @@
 import { assumeMessageCenterPage } from './messageCenterPage'
+import { pageIsNotLoading } from '../pageBase'
 
 export function messageCenterIndicator() {
   const getMessageInSidebar = (
@@ -21,6 +22,7 @@ export function messageCenterIndicator() {
       getMessageInSidebar(($el) => {
         $el.click()
       })
+      pageIsNotLoading()
       return assumeMessageCenterPage()
     },
   }

e2e_test/start/pageObjects/messageCenterPage.ts

@@ -1,28 +1,46 @@
 import { pageIsNotLoading } from '../pageBase'
 import { mainMenu } from './mainMenu'
 
+function withinConversationList(fn: () => void) {
+  cy.findByText('Message Center').should('be.visible')
+  pageIsNotLoading()
+  cy.get('[data-testid="message-center-conversation-item"]').should(
+    'have.length.at.least',
+    1
+  )
+  cy.get('.message-center-container').within(fn)
+}
+
 export const assumeMessageCenterPage = () => {
   cy.findByText('Message Center').should('be.visible')
 
   return {
     expectConversation(subject: string, partner: string) {
-      cy.findByText(subject).should('be.visible')
-      cy.findByText(partner).should('be.visible')
+      withinConversationList(() => {
+        cy.findByText(subject).should('be.visible')
+        cy.findByText(partner).should('be.visible')
+      })
       return this
     },
     expectMessageDisplayAtUserSide(message: string) {
-      cy.findByText(message).parents('.daisy-justify-end').should('be.visible')
+      cy.findByText(message).parents('.justify-end').should('be.visible')
       return this
     },
     expectMessageDisplayAtOtherSide(message: string) {
       cy.findByText(message)
         .parent()
         .should('be.visible')
-        .and('not.have.class', 'daisy-justify-end')
+        .and('not.have.class', 'justify-end')
       return this
     },
     conversation(conversationSubject: string) {
-      cy.findByText(conversationSubject).parent().should('be.visible').click()
+      withinConversationList(() => {
+        cy.get(
+          `[data-testid="message-center-conversation-item"][data-conversation-subject="${conversationSubject}"]`
+        )
+          .should('be.visible')
+          .click()
+      })
       pageIsNotLoading()
       return {
         expectMessage(message: string) {

e2e_test/start/pageObjects/noteMoreOptionsForm.ts

@@ -3,12 +3,26 @@ import { assumeAssimilationPage } from './assimilationPage'
 import { toolbarButton } from './toolbarButton'
 import { questionListPage } from './questionListPage'
 
+const moreOptionsDetails = () =>
+  cy
+    .get('details[data-auto-collapse-dropdown]')
+    .filter(':has(summary[title="more options"])')
+
+const isMoreOptionsDropdownOpen = ($details: JQuery<HTMLElement>) =>
+  $details.prop('open') === true || $details.hasClass('daisy-dropdown-open')
+
 export const makeSureNoteMoreOptionsFormIsOpen = () => {
-  cy.findByRole('button', { name: 'more options' }).then(($button) => {
-    if (!$button.hasClass('daisy-btn-active')) {
-      cy.wrap($button).click()
+  moreOptionsDetails().then(($details) => {
+    if (!isMoreOptionsDropdownOpen($details)) {
+      cy.wrap($details).find('summary[title="more options"]').click()
     }
   })
+  moreOptionsDetails().should(($details) => {
+    expect(isMoreOptionsDropdownOpen($details)).to.eq(true)
+  })
+  cy.findByRole('button', { name: 'Assimilation settings' }).should(
+    'be.visible'
+  )
 
   return noteMoreOptionsPage()
 }
@@ -40,7 +54,9 @@ const noteMoreOptionsPage = () => {
       return questionListPage()
     },
     openAssimilationPage() {
-      toolbarButton('Assimilation settings').click()
+      cy.findByRole('button', { name: 'Assimilation settings' })
+        .scrollIntoView()
+        .click()
       cy.url().should('include', '/assimilate/')
       pageIsNotLoading()
       return assumeAssimilationPage().waitForAssimilationReady()