frappe-ui 1.0.0-beta.21 → 1.0.0-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.25",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": [
@@ -172,6 +172,7 @@
     "@tiptap/extension-typography": "^3.26.0",
     "@tiptap/extension-underline": "^3.26.0",
     "@tiptap/extensions": "^3.26.0",
+    "@tiptap/markdown": "^3.26.0",
     "@tiptap/pm": "^3.26.0",
     "@tiptap/starter-kit": "^3.26.0",
     "@tiptap/suggestion": "^3.26.0",
@@ -192,7 +193,7 @@
     "ora": "5.4.1",
     "prettier": "^3.3.2",
     "prosemirror-tables": "^1.8.1",
-    "reka-ui": "^2.5.0",
+    "reka-ui": "^2.9.9",
     "slugify": "^1.6.6",
     "socket.io-client": "^4.5.1",
     "tippy.js": "^6.3.7",

package/src/components/Avatar/Avatar.api.md

@@ -30,6 +30,13 @@
     required: false,
     type: '"circle" | "square"',
     default: '"circle"'
+  },
+  {
+    name: 'theme',
+    description: 'Visual color theme used for the fallback avatar',
+    required: false,
+    type: '"gray" | "blue" | "green" | "amber" | "red" | "violet"',
+    default: '"gray"'
   }
 ]
 
@@ -51,4 +58,3 @@
 <PropsTable name="Avatar" :data="propsData"/> 
 
 <SlotsTable :data="slotsData"/> 
-

package/src/components/Avatar/Avatar.cy.ts

@@ -44,4 +44,25 @@ describe('Avatar', () => {
 
     cy.get('[data-cy="avatar"]').should('have.text', 'A')
   })
+
+  it('Uses gray fallback theme by default', () => {
+    cy.mount(Avatar, {
+      props: { 'data-cy': 'avatar', label: 'Abc' },
+    })
+
+    cy.get('[data-cy="avatar"] > div')
+      .should('have.class', 'bg-surface-gray-2')
+      .and('have.class', 'text-ink-gray-5')
+  })
+
+  it('Supports colorful fallback themes', () => {
+    cy.mount(Avatar, {
+      props: { 'data-cy': 'avatar', label: 'Abc', theme: 'blue' },
+    })
+
+    cy.get('[data-cy="avatar"] > div')
+      .should('have.class', 'bg-surface-blue-2')
+      .and('have.class', 'text-ink-blue-8')
+  })
+
 })

package/src/components/Avatar/Avatar.md

@@ -6,10 +6,13 @@ A visual representation of a user, typically shown as an image, initials, or an
 
 <ClientOnly><AvatarBuilder /></ClientOnly>
 
-## Themes
+## Shapes
 <ComponentPreview name="Avatar-Shapes" />
 
-## Controlled state
+## Sizes
 <ComponentPreview name="Avatar-Sizes" />
 
+## Themes
+<ComponentPreview name="Avatar-Themes" />
+
 <!-- @include: ./Avatar.api.md -->

package/src/components/Avatar/Avatar.vue

@@ -12,8 +12,8 @@
     />
     <div
       v-else
-      class="flex h-full w-full items-center justify-center bg-surface-gray-2 uppercase text-ink-gray-5 select-none"
-      :class="[labelClasses, shapeClasses]"
+      class="flex h-full w-full items-center justify-center uppercase select-none"
+      :class="[labelClasses, fallbackThemeClasses, shapeClasses]"
     >
       <div :class="iconClasses" v-if="$slots.default">
         <slot></slot>
@@ -38,13 +38,26 @@
 
 <script setup lang="ts">
 import { ref, computed, useAttrs } from 'vue'
-import type { AvatarProps } from './types'
+import type { AvatarProps, AvatarTheme } from './types'
 
 const imgFetchError = ref(false)
 
 const props = withDefaults(defineProps<AvatarProps>(), {
   size: 'md',
   shape: 'circle',
+  theme: 'gray',
+})
+
+const fallbackThemeClasses = computed(() => {
+  const classes: Record<AvatarTheme, string> = {
+    gray: 'bg-surface-gray-2 text-ink-gray-5',
+    blue: 'bg-surface-blue-2 text-ink-blue-8',
+    green: 'bg-surface-green-2 text-ink-green-8',
+    amber: 'bg-surface-amber-2 text-ink-amber-8',
+    red: 'bg-surface-red-2 text-ink-red-8',
+    violet: 'bg-surface-violet-2 text-ink-violet-8',
+  }
+  return classes[props.theme]
 })
 
 // Let a consumer size the avatar with a Tailwind utility (`class="size-16"`)
@@ -60,7 +73,9 @@ const hasSizeOverride = computed(() => {
       ? attrs.class
       : ''
   return cls.split(/\s+/).some((token) => {
-    const base = token.includes(':') ? token.slice(token.lastIndexOf(':') + 1) : token
+    const base = token.includes(':')
+      ? token.slice(token.lastIndexOf(':') + 1)
+      : token
     return /^-?(size|w|h|min-w|max-w|min-h|max-h)-/.test(base)
   })
 })
@@ -142,7 +157,7 @@ const iconClasses = computed(() => {
   }[props.size]
 })
 
-function handleImageError(err) {
+function handleImageError(err: Event) {
   if (err.type) {
     imgFetchError.value = true
   }
@@ -155,5 +170,4 @@ defineSlots<{
   /** Small indicator shown at the bottom-right of the avatar */
   indicator?: () => any
 }>()
-
 </script>

package/src/components/Avatar/index.ts

@@ -1,2 +1,2 @@
 export { default as Avatar } from './Avatar.vue'
-export type { AvatarProps } from './types'
+export type { AvatarProps, AvatarTheme } from './types'

package/src/components/Avatar/stories/Themes.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Avatar } from 'frappe-ui'
+import type { AvatarTheme } from 'frappe-ui'
+
+const themes: AvatarTheme[] = [
+  'gray',
+  'blue',
+  'green',
+  'amber',
+  'red',
+  'violet',
+]
+</script>
+
+<template>
+  <Avatar
+    v-for="theme in themes"
+    :key="theme"
+    :label="theme"
+    :theme="theme"
+    size="lg"
+  />
+</template>

package/src/components/Avatar/types.ts

@@ -1,3 +1,11 @@
+export type AvatarTheme =
+  | 'gray'
+  | 'blue'
+  | 'green'
+  | 'amber'
+  | 'red'
+  | 'violet'
+
 export interface AvatarProps {
   /** Image URL used for the avatar */
   image?: string
@@ -10,4 +18,7 @@ export interface AvatarProps {
 
   /** Defines the avatar shape */
   shape?: 'circle' | 'square'
+
+  /** Visual color theme used for the fallback avatar */
+  theme?: AvatarTheme
 }

package/src/components/Calendar/CalendarMonthEvent.vue

@@ -25,10 +25,10 @@
           class="relative flex h-full select-none items-start gap-2 overflow-hidden"
         >
           <div v-if="config.showIcon && eventIcon">
-            <component :is="eventIcon" class="h-4 w-4 text-black" />
+            <component :is="eventIcon" class="h-4 w-4 text-ink-gray-8" />
           </div>
           <p
-            class="text-sm-medium truncate"
+            class="text-sm-medium truncate text-ink-gray-8"
             :class="{ italic: !props.event.title }"
           >
             {{ props.event.title || '[No title]' }}

package/src/components/Calendar/CalendarMonthly.vue

@@ -37,20 +37,17 @@
           >
             <span
               class="w-full flex justify-between items-center"
-              :class="[
-                date.toDateString() === new Date().toDateString()
-                  ? 'p-[3px] pb-0.5'
-                  : 'p-2',
-              ]"
+              :class="[isToday(date) ? 'p-[3px] pb-0.5' : 'p-2']"
             >
               <div></div>
               <div
                 class="cursor-pointer"
                 :class="[
-                  date.toDateString() === new Date().toDateString()
-                    ? 'flex items-center justify-center bg-surface-gray-10 text-ink-base rounded size-[25px]'
-                    : 'bg-surface-base ',
-                  isCurrentMonth(date) ? 'text-ink-gray-6' : 'text-ink-gray-4',
+                  !isCurrentMonth(date)
+                    ? 'bg-surface-base text-ink-gray-4'
+                    : isToday(date)
+                      ? 'flex items-center justify-center bg-surface-gray-10 text-ink-gray-2 rounded size-[25px]'
+                      : 'bg-surface-base text-ink-gray-8',
                 ]"
                 @click.stop="
                   isCurrentMonth(date)
@@ -145,6 +142,10 @@ const maxEventsInCell = computed(() =>
   props.currentMonthDates.length > 35 ? 1 : 2,
 )
 
+function isToday(date: Date) {
+  return date.toDateString() === new Date().toDateString()
+}
+
 function isCurrentMonth(date: Date) {
   return date.getMonth() === props.currentMonth
 }

package/src/components/Calendar/CalendarWeekly.vue

@@ -12,7 +12,7 @@
           {{ isToday(date) ? daysList[date.getDay()] : parseDateWithDay(date) }}
           <span
             v-if="isToday(date)"
-            class="inline-flex items-center justify-center bg-surface-gray-10 text-ink-base rounded size-[25px]"
+            class="inline-flex items-center justify-center bg-surface-gray-10 text-ink-gray-1 rounded size-[25px]"
           >
             {{ date.getDate() }}
           </span>

package/src/components/Calendar/calendarUtils.ts

@@ -304,170 +304,92 @@ export function formatTime(time: string, format: CalendarTimeFormat): string {
 
 export const colorMap: Record<string, CalendarColor> = {
   amber: {
-    color: '#DB7706',
-    border: '#DB7706',
-    borderActive: '#FBCC55',
-    text: '#91400D',
-    subtext: '#AD8460',
-    subtextActive: '#FAEBD0',
-    bg: '#FFF7D3',
-    bgHover: '#FEEDA9',
-    bgActive: '#E79913',
+    color: 'var(--ink-amber-7)',
+    border: 'var(--ink-amber-7)',
+    borderActive: 'var(--outline-amber-2)',
+    text: 'var(--ink-amber-7)',
+    textActive: 'var(--ink-amber-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-amber-1)',
+    bg: 'var(--surface-amber-1)',
+    bgHover: 'var(--surface-amber-1)',
+    bgActive: 'var(--surface-amber-2)',
   },
   violet: {
-    color: '#6846E3',
-    border: '#6846E3',
-    borderActive: '#B3A1F5',
-    text: '#5F46C7',
-    subtext: '#766D9B',
-    subtextActive: '#E4DCFD',
-    bg: '#F0EBFF',
-    bgHover: '#DBD5FF',
-    bgActive: '#7A51F4',
+    color: 'var(--ink-violet-7)',
+    border: 'var(--ink-violet-7)',
+    borderActive: 'var(--outline-gray-4)',
+    text: 'var(--ink-violet-7)',
+    textActive: 'var(--ink-violet-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-base)',
+    bg: 'var(--surface-violet-1)',
+    bgHover: 'var(--surface-violet-1)',
+    bgActive: 'var(--surface-violet-7)',
   },
   pink: {
-    color: '#E34AA6',
-    border: '#E34AA6',
-    borderActive: '#F6A7D6',
-    text: '#CF3A96',
-    subtext: '#B26997',
-    subtextActive: '#F9DBED',
-    bg: '#FDE8F5',
-    bgHover: '#FFD5F0',
-    bgActive: '#E34AA6',
+    color: 'var(--ink-pink-7)',
+    border: 'var(--ink-pink-7)',
+    borderActive: 'var(--outline-gray-4)',
+    text: 'var(--ink-pink-7)',
+    textActive: 'var(--ink-pink-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-base)',
+    bg: 'var(--surface-pink-1)',
+    bgHover: 'var(--surface-pink-1)',
+    bgActive: 'var(--surface-pink-7)',
   },
   cyan: {
-    color: '#3BBDE5',
-    border: '#3BBDE5',
-    borderActive: '#72D5F3',
-    text: '#267A94',
-    subtext: '#668E9C',
-    subtextActive: '#D6EDF4',
-    bg: '#DDF7FF',
-    bgHover: '#B3E8F7',
-    bgActive: '#32A4C7',
+    color: 'var(--ink-cyan-7)',
+    border: 'var(--ink-cyan-7)',
+    borderActive: 'var(--ink-cyan-7)',
+    text: 'var(--ink-cyan-7)',
+    textActive: 'var(--ink-cyan-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-base)',
+    bg: 'var(--surface-cyan-1)',
+    bgHover: 'var(--surface-cyan-1)',
+    bgActive: 'var(--surface-cyan-7)',
   },
   blue: {
-    color: '#0289F7',
-    border: '#0289F7',
-    borderActive: '#A7D7FD',
-    text: '#007BE0',
-    subtext: '#5C8DB3',
-    subtextActive: '#CCE7FD',
-    bg: '#E6F4FF',
-    bgHover: '#C8E6FF',
-    bgActive: '#0289F7',
+    color: 'var(--ink-blue-7)',
+    border: 'var(--ink-blue-7)',
+    borderActive: 'var(--outline-blue-2)',
+    text: 'var(--ink-blue-7)',
+    textActive: 'var(--ink-blue-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-blue-1)',
+    bg: 'var(--surface-blue-1)',
+    bgHover: 'var(--surface-blue-1)',
+    bgActive: 'var(--surface-blue-2)',
   },
   orange: {
-    color: '#E86C13',
-    border: '#E86C13',
-    borderActive: '#FFCBA3',
-    text: '#E86C13',
-    subtext: '#A67765',
-    subtextActive: '#FAE2D0',
-    bg: '#FFEFE4',
-    bgHover: '#FFDEC5',
-    bgActive: '#E86C13',
+    color: 'var(--ink-orange-7)',
+    border: 'var(--outline-orange-1)',
+    borderActive: 'var(--outline-orange-1)',
+    text: 'var(--ink-orange-7)',
+    textActive: 'var(--ink-orange-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-base)',
+    bg: 'var(--surface-orange-1)',
+    bgHover: 'var(--surface-orange-1)',
+    bgActive: 'var(--outline-orange-1)',
   },
   green: {
-    color: '#30A66D',
-    border: '#30A66D',
-    borderActive: '#88D5A5',
-    text: '#137949',
-    subtext: '#678877',
-    subtextActive: '#D6EDE2',
-    bg: '#E4FAEB',
-    bgHover: '#CBF3D7',
-    bgActive: '#30A66D',
+    color: 'var(--ink-green-7)',
+    border: 'var(--ink-green-7)',
+    borderActive: 'var(--outline-green-2)',
+    text: 'var(--ink-green-7)',
+    textActive: 'var(--ink-green-1)',
+    subtext: 'var(--ink-gray-6)',
+    subtextActive: 'var(--ink-green-1)',
+    bg: 'var(--surface-green-1)',
+    bgHover: 'var(--surface-green-1)',
+    bgActive: 'var(--surface-green-3)',
   },
 }
 
-export const colorMapDark: Record<string, CalendarColor> = {
-  amber: {
-    color: '#DB7706',
-    border: '#C57411',
-    borderActive: '#C57411',
-    text: '#C57411',
-    textActive: '#824108',
-    subtext: '#988356',
-    subtextActive: '#8E6026',
-    bg: '#371E06',
-    bgHover: '#4B2606',
-    bgActive: '#F8D16E',
-  },
-  violet: {
-    color: '#6846E3',
-    border: '#A384EC',
-    borderActive: '#8867E8',
-    text: '#A384EC',
-    textActive: '#4639A6',
-    subtext: '#9389AE',
-    subtextActive: '#332978',
-    bg: '#221C42',
-    bgHover: '#281E5D',
-    bgActive: '#C4AFEE',
-  },
-  pink: {
-    color: '#E34AA6',
-    border: '#CB4394',
-    borderActive: '#CB4394',
-    text: '#E359AB',
-    textActive: '#822A5F',
-    subtext: '#B07E99',
-    subtextActive: '#935277',
-    bg: '#471432',
-    bgHover: '#68204B',
-    bgActive: '#F6C5DE',
-  },
-  cyan: {
-    color: '#3BBDE5',
-    border: '#2B8DAB',
-    borderActive: '#2B8DAB',
-    text: '#3CB8DC',
-    textActive: '#155266',
-    subtext: '#819FA8',
-    subtextActive: '#3A6E7D',
-    bg: '#0B252D',
-    bgHover: '#0E3B49',
-    bgActive: '#A0E6F7',
-  },
-  blue: {
-    color: '#0289F7',
-    border: '#3294E3',
-    borderActive: '#1580D8',
-    text: '#5AAEF2',
-    textActive: '#155999',
-    subtext: '#7F95AC',
-    subtextActive: '#386A99',
-    bg: '#10243E',
-    bgHover: '#052B53',
-    bgActive: '#ADD2F5',
-  },
-  orange: {
-    color: '#E86C13',
-    border: '#C45A0E',
-    borderActive: '#C45A0E',
-    text: '#DE6D1B',
-    textActive: '#823906',
-    subtext: '#B3876B',
-    subtextActive: '#955528',
-    bg: '#401F07',
-    bgHover: '#532707',
-    bgActive: '#FFA873',
-  },
-  green: {
-    color: '#30A66D',
-    border: '#35AE74',
-    borderActive: '#35AE74',
-    text: '#58C08E',
-    textActive: '#0B6139',
-    subtext: '#7CA490',
-    subtextActive: '#0B6139',
-    bg: '#0B2E1C',
-    bgHover: '#0A3F27',
-    bgActive: '#9BE6C1',
-  },
-}
+export const colorMapDark: Record<string, CalendarColor> = colorMap
 
 // config.weekends can be array of numbers [0-6] (0=Sun) or weekday names (e.g., 'Saturday').
 // Falls back to [0] (Sunday) if not provided / invalid.

package/src/components/Calendar/stories/CustomHeader.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { Button, Calendar, DatePicker, Select } from "frappe-ui";
+import { Button, Calendar, DatePicker, Select } from 'frappe-ui'
 
 const config = {
   defaultMode: 'Month',
@@ -65,10 +65,10 @@ const events = ref([
     color: 'red',
   },
   {
-    title: 'Google Meet with John ',
+    title: 'Frappe Meet with John',
     participant: 'John',
     id: '#htrht41',
-    venue: 'Google Meet',
+    venue: 'Frappe Meet',
     fromDate: currentMonthYear + '-11',
     toDate: currentMonthYear + '-11',
     fromTime: '00:00',
@@ -77,10 +77,10 @@ const events = ref([
     isFullDay: true,
   },
   {
-    title: 'Zoom Meet with Sheldon',
+    title: 'Frappe Meet with Sheldon',
     participant: 'Sheldon',
     id: '#htrht42',
-    venue: 'Google Meet',
+    venue: 'Frappe Meet',
     fromDate: currentMonthYear + '-07',
     toDate: currentMonthYear + '-07',
     fromTime: '00:00',
@@ -92,7 +92,9 @@ const events = ref([
 </script>
 
 <template>
-  <div class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden">
+  <div
+    class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden"
+  >
     <Calendar
       :config="config"
       :events="events"

package/src/components/Calendar/stories/Examples.vue

@@ -65,10 +65,10 @@ const events = ref([
     color: 'red',
   },
   {
-    title: 'Google Meet with John ',
+    title: 'Frappe Meet with John',
     participant: 'John',
     id: '#htrht41',
-    venue: 'Google Meet',
+    venue: 'Frappe Meet',
     fromDate: currentMonthYear + '-11',
     toDate: currentMonthYear + '-11',
     fromTime: '00:00',
@@ -77,10 +77,10 @@ const events = ref([
     isFullDay: true,
   },
   {
-    title: 'Zoom Meet with Sheldon',
+    title: 'Frappe Meet with Sheldon',
     participant: 'Sheldon',
     id: '#htrht42',
-    venue: 'Google Meet',
+    venue: 'Frappe Meet',
     fromDate: currentMonthYear + '-07',
     toDate: currentMonthYear + '-07',
     fromTime: '00:00',
@@ -92,7 +92,9 @@ const events = ref([
 </script>
 
 <template>
-  <div class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden">
+  <div
+    class="w-full flex flex-wrap gap-3 items-center h-screen overflow-hidden"
+  >
     <Calendar
       :config="config"
       :events="events"

package/src/components/Calendar/style.css

@@ -27,7 +27,7 @@
   background-color: var(--bg-active);
 }
 .event.active .event-title {
-  color: var(--text-active, #fff);
+  color: var(--text-active, var(--ink-base));
 }
 .event.active .event-subtitle {
   color: var(--subtext-active);

package/src/components/Calendar/useEventBase.ts

@@ -8,6 +8,16 @@ import {
   type CalendarEvent,
 } from './types'
 
+const legacyColorNamesByHex: Record<string, keyof typeof colorMap> = {
+  '#db7706': 'amber',
+  '#6846e3': 'violet',
+  '#e34aa6': 'pink',
+  '#3bbde5': 'cyan',
+  '#0289f7': 'blue',
+  '#e86c13': 'orange',
+  '#30a66d': 'green',
+}
+
 export const isAnyPopoverOpen = ref(false)
 
 export function useEventBase(props: { event: CalendarEvent; date: Date }) {
@@ -51,6 +61,8 @@ export function useEventBase(props: { event: CalendarEvent; date: Date }) {
     const map = getTheme() === 'dark' ? colorMapDark : colorMap
     if (!colorValue?.startsWith('#'))
       return map[colorValue || 'green'] || map['green']!
+    const legacyColorName = legacyColorNamesByHex[colorValue.toLowerCase()]
+    if (legacyColorName) return map[legacyColorName]!
     for (const value of Object.values(map)) {
       if (value.color === colorValue) return value
     }

package/src/components/Dialog/Dialog.cy.ts

@@ -86,21 +86,92 @@ describe('Dialog', () => {
 
   // ---- New behavior props ----------------------------------------------------
 
+  it('closes on outside click when dismissible', () => {
+    const Wrapper = defineComponent({
+      setup() {
+        const open = ref(true)
+        return { open }
+      },
+      render() {
+        return h(Dialog, {
+          open: this.open,
+          'onUpdate:open': (v: boolean) => (this.open = v),
+          title: 'Dismissible',
+        })
+      },
+    })
+
+    cy.mount(Wrapper)
+    cy.get('[role=dialog]').should('exist')
+    cy.get('.dialog-overlay').click(0, 0, { force: true })
+    cy.get('[role=dialog]').should('not.exist')
+  })
+
   it('dismissible=false blocks outside click and Escape from closing', () => {
-    cy.mount(Dialog, {
-      props: {
-        open: true,
-        title: 'Locked',
-        message: 'Cannot dismiss',
-        dismissible: false,
+    const Wrapper = defineComponent({
+      setup() {
+        const open = ref(true)
+        return { open }
+      },
+      render() {
+        return h(Dialog, {
+          open: this.open,
+          'onUpdate:open': (v: boolean) => (this.open = v),
+          title: 'Locked',
+          message: 'Cannot dismiss',
+          dismissible: false,
+        })
       },
     })
 
+    cy.mount(Wrapper)
+    cy.get('[role=dialog]').should('exist')
+    cy.get('.dialog-overlay').click(0, 0, { force: true })
     cy.get('[role=dialog]').should('exist')
     cy.get('body').type('{esc}')
     cy.get('[role=dialog]').should('exist')
   })
 
+  it('focuses and types into an input clicked inside a scrollable dialog', () => {
+    cy.mount(Dialog, {
+      props: { open: true, title: 'Long form' },
+      slots: {
+        default: () =>
+          h(
+            'div',
+            {
+              'data-cy': 'tall-dialog-body',
+              style: {
+                height: '1200px',
+                display: 'flex',
+                alignItems: 'flex-end',
+              },
+            },
+            [
+              h('input', {
+                'data-cy': 'mouse-focus-input',
+                type: 'text',
+              }),
+            ],
+          ),
+      },
+    })
+
+    cy.get('.dialog-overlay').should(($overlay) => {
+      expect($overlay[0].scrollHeight).to.be.greaterThan(
+        $overlay[0].clientHeight,
+      )
+    })
+
+    // Cypress cannot synthesize fully trusted OS-level events, so this guards
+    // the click-to-focus behavior contract rather than the exact event chain.
+    cy.get('[data-cy=mouse-focus-input]')
+      .click()
+      .should('be.focused')
+      .type('Focused by mouse')
+      .should('have.value', 'Focused by mouse')
+  })
+
   it('showCloseButton renders an accessible close affordance that closes the dialog', () => {
     const Wrapper = defineComponent({
       setup() {
@@ -218,11 +289,7 @@ describe('Dialog', () => {
     cy.mount(Dialog, {
       props: { modelValue: true },
       slots: {
-        'body-header': h(
-          'div',
-          { 'data-cy': 'body-header' },
-          'legacy header',
-        ),
+        'body-header': h('div', { 'data-cy': 'body-header' }, 'legacy header'),
         'body-content': h(
           'div',
           { 'data-cy': 'body-content' },
@@ -261,11 +328,7 @@ describe('Dialog', () => {
     cy.mount(Dialog, {
       props: { modelValue: true },
       slots: {
-        'body-header': h(
-          'div',
-          { 'data-cy': 'body-header' },
-          'legacy header',
-        ),
+        'body-header': h('div', { 'data-cy': 'body-header' }, 'legacy header'),
       },
     })
 
@@ -320,11 +383,7 @@ describe('Dialog', () => {
         default: () =>
           h('div', { autofocus: '' }, [
             h('span', 'label'),
-            h(
-              'button',
-              { 'data-cy': 'toggle', type: 'button' },
-              'Toggle',
-            ),
+            h('button', { 'data-cy': 'toggle', type: 'button' }, 'Toggle'),
             h('button', { 'data-cy': 'second', type: 'button' }, 'Other'),
           ]),
       },

package/src/components/Dialog/Dialog.vue

@@ -16,7 +16,6 @@
             ref="contentRef"
             class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
             :class="sizeClass"
-            @pointerdown.stop
             @open-auto-focus="handleOpenAutoFocus"
             @escape-key-down="
               (e: Event) => {

package/src/components/ErrorMessage/ErrorMessage.test.ts

@@ -0,0 +1,45 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, expect, it } from 'vitest'
+import { createApp } from 'vue'
+import ErrorMessage from './ErrorMessage.vue'
+
+function renderErrorMessage(message: string | Error) {
+  const host = document.createElement('div')
+  const app = createApp(ErrorMessage, { message })
+  app.mount(host)
+
+  return {
+    alert: host.querySelector('[role="alert"]')!,
+    unmount: () => app.unmount(),
+  }
+}
+
+describe('ErrorMessage', () => {
+  it('keeps safe markup while removing executable HTML', () => {
+    const { alert, unmount } = renderErrorMessage(
+      '<strong>Invalid</strong><img src=x onerror=alert(1)><script>alert(2)</script>',
+    )
+
+    expect(alert.innerHTML).toContain('<strong>Invalid</strong>')
+    expect(alert.innerHTML).not.toContain('onerror')
+    expect(alert.innerHTML).not.toContain('<script')
+    expect(alert.textContent).not.toContain('alert(2)')
+
+    unmount()
+  })
+
+  it('sanitizes the non-standard messages value on Error objects', () => {
+    const error = Object.assign(new Error('Fallback message'), {
+      messages: '<a href="javascript:alert(1)">Invalid</a>',
+    })
+    const { alert, unmount } = renderErrorMessage(error)
+
+    expect(alert.textContent).toBe('Invalid')
+    expect(alert.querySelector('a')?.getAttribute('href')).toBeNull()
+
+    unmount()
+  })
+})

package/src/components/ErrorMessage/ErrorMessage.vue

@@ -8,6 +8,7 @@
 </template>
 
 <script setup lang="ts">
+import DOMPurify from 'dompurify'
 import { computed } from 'vue'
 import type { ErrorMessageProps } from './types'
 
@@ -15,9 +16,13 @@ const props = defineProps<ErrorMessageProps>()
 
 const errorMessage = computed(() => {
   if (!props.message) return ''
-  if (props.message instanceof Error) {
-    return (props.message as any).messages || props.message.message
-  }
-  return props.message
+
+  const message =
+    props.message instanceof Error
+      ? (props.message as Error & { messages?: string }).messages ||
+        props.message.message
+      : props.message
+
+  return DOMPurify.sanitize(message)
 })
 </script>

package/src/components/TextEditor/extensions/suggestion/SuggestionList.vue

@@ -1,35 +1,34 @@
 <template>
-  <div
-    v-if="items.length"
-    ref="container"
-    class="relative max-h-[300px] min-w-40 overflow-y-auto rounded-lg bg-surface-base p-1 text-base shadow-lg"
-    :class="containerClass"
-  >
-    <button
-      v-for="(item, index) in items"
-      :key="index"
-      :ref="
-        (el) => {
-          if (el) itemRefs[index] = el as HTMLButtonElement
-        }
-      "
-      :class="[
-        'flex w-full items-center whitespace-nowrap rounded-md px-2 py-1.5 text-sm text-ink-gray-9',
-        index === selectedIndex ? 'bg-surface-gray-2' : '',
-        itemClass,
-      ]"
-      @click="selectItem(index)"
-      @mouseover="selectedIndex = index"
-    >
-      <slot :item="item" :index="index">
-        <span>{{ item.display || item.title || item.name }}</span>
-      </slot>
-    </button>
+  <div>
     <div
-      v-if="!items.length && showNoResults"
-      class="px-3 py-1.5 text-sm text-ink-gray-5"
+      v-if="items.length || showNoResults"
+      ref="container"
+      class="relative max-h-[300px] min-w-40 overflow-y-auto rounded-lg bg-surface-base p-1 text-base shadow-lg"
+      :class="containerClass"
     >
-      No results
+      <button
+        v-for="(item, index) in items"
+        :key="index"
+        :ref="
+          (el) => {
+            if (el) itemRefs[index] = el as HTMLButtonElement
+          }
+        "
+        :class="[
+          'flex w-full items-center whitespace-nowrap rounded-md px-2 py-1.5 text-sm text-ink-gray-9',
+          index === selectedIndex ? 'bg-surface-gray-2' : '',
+          itemClass,
+        ]"
+        @click="selectItem(index)"
+        @mouseover="selectedIndex = index"
+      >
+        <slot :item="item" :index="index">
+          <span>{{ item.display || item.title || item.name }}</span>
+        </slot>
+      </button>
+      <div v-if="!items.length" class="px-3 py-1.5 text-sm text-ink-gray-5">
+        No results
+      </div>
     </div>
   </div>
 </template>

package/src/components/Tree/TreeItem.vue

@@ -18,8 +18,12 @@
   >
     <div
       data-slot="row"
-      class="frappe-tree-row group/row relative flex items-center gap-1.5 rounded-md px-1.5 hover:bg-surface-gray-2"
-      :class="ctx.draggable.value && !ctx.disabled.value ? 'cursor-grab' : ''"
+      class="frappe-tree-row group/row relative flex items-center gap-1.5 rounded-md px-1.5"
+      :class="[
+        ctx.draggable.value && !ctx.disabled.value ? 'cursor-grab' : '',
+        // When the row is fully overridden via #item, the consumer owns its hover/selected surface
+        $slots.item ? '' : 'hover:bg-surface-gray-2',
+      ]"
       :draggable="ctx.draggable.value && !ctx.disabled.value"
       @click="onRowClick"
       @dragstart="ctx.onDragStart($event, node, parent)"

package/src/molecules/editor/Editor.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
     extensions: Extension[]
 
     // content / behavior knobs (universal, reactive where noted)
-    format?: 'html' | 'json'
+    format?: 'html' | 'json' | 'markdown'
     placeholder?: string
     editable?: boolean
     autofocus?: boolean
@@ -60,7 +60,11 @@ const editor = useEditor({
     // independent of v-model timing).
     emit(
       'change',
-      props.format === 'json' ? editor.getJSON() : editor.getHTML(),
+      props.format === 'json'
+        ? editor.getJSON()
+        : props.format === 'markdown'
+          ? editor.getMarkdown()
+          : editor.getHTML(),
     )
   },
   onFocus(_editor, event) {

package/src/molecules/editor/extensions.ts

@@ -311,3 +311,8 @@ export const Toc = TocNodeExtension
 export const ContentPaste = ContentPasteExtension
 export const StyleClipboard = StyleClipboardExtension
 export type { MediaUploadRequestOptions } from './extensions/shared/media-upload-engine'
+
+// Required in `extensions` for `format: 'markdown'`. A plain re-export (no
+// use inside useEditor) so bundlers drop the markdown/marked payload for
+// editors that never import it.
+export { Markdown, type MarkdownExtensionOptions } from '@tiptap/markdown'

package/src/molecules/editor/useEditor.test.ts

@@ -54,6 +54,10 @@ vi.mock('@tiptap/core', () => {
       return typeof this.content === 'object' ? this.content : { type: 'doc', content: [] }
     }
 
+    getMarkdown() {
+      return typeof this.content === 'string' ? this.content : '# json'
+    }
+
     setEditable(value: boolean) {
       this.editable = value
     }
@@ -66,6 +70,17 @@ vi.mock('@tiptap/core', () => {
   return { Editor, Extension, Node, Mark, mergeAttributes, nodeInputRule, markInputRule }
 })
 
+vi.mock('@tiptap/markdown', () => ({
+  Markdown: {
+    name: 'markdown',
+    configure: vi.fn((options: any) => ({
+      name: 'markdown',
+      options,
+      configured: true,
+    })),
+  },
+}))
+
 vi.mock('@tiptap/vue-3', () => ({
   EditorContent: defineComponent({
     props: ['editor'],
@@ -196,6 +211,63 @@ describe('frappe-ui/editor minimal primitives', () => {
     expect(editor.commands.setContent).toHaveBeenCalledTimes(calls)
   })
 
+  it('sets markdown contentType and warns when the Markdown extension is missing', async () => {
+    const { useEditor } = await import('./index')
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    createApp(
+      defineComponent({
+        setup() {
+          useEditor({ content: ref('# Hi'), format: 'markdown', extensions: [] })
+          return () => null
+        },
+      }),
+    ).mount(document.createElement('div'))
+
+    expect(editors[0].options.contentType).toBe('markdown')
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("format: 'markdown' needs the Markdown extension"),
+    )
+    warn.mockRestore()
+  })
+
+  it('binds markdown content in both directions without rewriting equal external markdown', async () => {
+    const { useEditor, Markdown } = await import('./index')
+    const content = ref('# Hello')
+
+    createApp(
+      defineComponent({
+        setup() {
+          useEditor({ content, format: 'markdown', extensions: [Markdown as any] })
+          return () => null
+        },
+      }),
+    ).mount(document.createElement('div'))
+
+    const editor = editors[0]
+    expect(editor.options.content).toBe('# Hello')
+
+    // Internal edit flows out through getMarkdown() and must not bounce back.
+    editor.content = '# Internal'
+    editor.options.onUpdate({ editor })
+    expect(content.value).toBe('# Internal')
+    await nextTick()
+    expect(editor.commands.setContent).not.toHaveBeenCalled()
+
+    // External write equal to the current document is a no-op.
+    content.value = '# Internal'
+    await nextTick()
+    expect(editor.commands.setContent).not.toHaveBeenCalled()
+
+    // A genuinely new external value is parsed as markdown.
+    content.value = '# External'
+    await nextTick()
+    expect(editor.commands.setContent).toHaveBeenCalledWith('# External', {
+      emitUpdate: false,
+      contentType: 'markdown',
+    })
+  })
+
   it('keeps editable reactive', async () => {
     const { useEditor } = await import('./index')
     const editable = ref(true)

package/src/molecules/editor/useEditor.ts

@@ -19,7 +19,7 @@ type Editor = TiptapEditor
 
 export type UseEditorOptions = {
   content?: Ref<string | JSONContent | null | undefined>
-  format?: 'html' | 'json'
+  format?: 'html' | 'json' | 'markdown'
   editable?: MaybeRefOrGetter<boolean>
   autofocus?: boolean
   uploadFunction?: (file: File) => Promise<UploadedFile>
@@ -63,6 +63,23 @@ export function useEditor(
 
   const extensions = [UploadStorage, ...options.extensions]
 
+  if (
+    import.meta.env?.DEV &&
+    format === 'markdown' &&
+    !extensions.some((extension) => extension.name === 'markdown')
+  ) {
+    console.warn(
+      "[frappe-ui] format: 'markdown' needs the Markdown extension in `extensions` — import { Markdown } from 'frappe-ui/editor'.",
+    )
+  }
+
+  const serialize = (tiptapEditor: Editor) =>
+    format === 'json'
+      ? tiptapEditor.getJSON()
+      : format === 'markdown'
+        ? tiptapEditor.getMarkdown()
+        : tiptapEditor.getHTML()
+
   const editorOptions: Partial<EditorOptions> = {
     element: null,
     extensions,
@@ -70,8 +87,7 @@ export function useEditor(
     autofocus: options.autofocus,
     onUpdate: ({ editor: tiptapEditor }) => {
       if (!isCollaborationMode && options.content && !applyingExternalUpdate) {
-        const value =
-          format === 'json' ? tiptapEditor.getJSON() : tiptapEditor.getHTML()
+        const value = serialize(tiptapEditor)
         lastEmitted = value
         options.content.value = value
       }
@@ -88,6 +104,10 @@ export function useEditor(
     },
   }
 
+  if (format === 'markdown') {
+    editorOptions.contentType = 'markdown'
+  }
+
   if (!isCollaborationMode && options.content?.value != null) {
     editorOptions.content = options.content.value
   }
@@ -109,10 +129,17 @@ export function useEditor(
       // whose fresh-object identity defeats the HTML string check below).
       if (toRaw(content) === lastEmitted) return
       if (format === 'html' && editor.value.getHTML() === content) return
+      if (format === 'markdown' && editor.value.getMarkdown() === content)
+        return
 
       applyingExternalUpdate = true
       try {
-        editor.value.commands.setContent(content ?? '', { emitUpdate: false })
+        editor.value.commands.setContent(
+          content ?? '',
+          format === 'markdown'
+            ? { emitUpdate: false, contentType: 'markdown' }
+            : { emitUpdate: false },
+        )
       } finally {
         applyingExternalUpdate = false
       }

package/vitepress/components/Docs/Sidebar.vue

@@ -32,12 +32,12 @@ const isActive = (link: string) =>
   >
     <div class="px-1">
       <a
-        class="hidden items-center gap-2.5 px-2 py-2 lg:flex hover:bg-surface-gray-2 rounded transition-colors"
+        class="hidden items-center gap-1.5 px-2 py-2 lg:flex hover:bg-surface-gray-2 rounded transition-colors"
         :href="withBase('/')"
       >
-        <img v-if="logo" :src="withBase(logo)" class="w-7" />
+        <img v-if="logo" :src="withBase(logo)" class="w-6" />
         <div class="flex flex-col gap-1 *:leading-none">
-          <span class="text-base font-medium text-ink-gray-8">{{
+          <span class="text-lg-bold text-ink-gray-8 tracking-[-0.01em]">{{
             siteName
           }}</span>
           <span v-if="curVersion" class="text-sm text-ink-gray-5"

package/vitepress/components/Navbar.vue

@@ -58,7 +58,7 @@ const toggleTheme = () =>
       <a
         v-if="logo || name"
         :href="withBase('/')"
-        class="flex items-center gap-2.5 min-w-0"
+        class="flex items-center gap-1.5 min-w-0"
         :class="{ 'lg:hidden': isDocs }"
       >
         <img
@@ -67,7 +67,10 @@ const toggleTheme = () =>
           class="w-6 shrink-0"
           :alt="name"
         />
-        <span v-if="name" class="text-sm font-medium text-ink-gray-8 truncate">
+        <span
+          v-if="name"
+          class="text-lg-bold text-ink-gray-8 truncate tracking-[-0.01em]"
+        >
           {{ name }}
         </span>
       </a>

package/vitepress/index.node.ts

@@ -8,6 +8,7 @@ import { lucideIcons } from 'frappe-ui/vite'
 
 import { createComponentTransformer } from './plugins/componentTransformer.ts'
 import colocatedComponentDocs from './plugins/colocatedComponentDocs.ts'
+import preventCircularChunks from './plugins/preventCircularChunks.ts'
 import type { SidebarSection } from './components/Docs/sidebarList.ts'
 
 // frappe-ui package root — this file lives at <root>/vitepress/index.node.ts.
@@ -118,6 +119,10 @@ export function defineDocsConfig(
     vite: {
       plugins: [
         lucideIcons(),
+        // reka-ui 2.9 + VitePress both use @vueuse 14; pin shared Vue ecosystem
+        // packages into the framework chunk so CI never ships a framework→theme
+        // cycle (TDZ on ui.frappe.io). See preventCircularChunks.ts.
+        preventCircularChunks(),
         ...(colocatedDocs
           ? [
               colocatedComponentDocs(

package/vitepress/plugins/preventCircularChunks.ts

@@ -0,0 +1,54 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Keep Vue ecosystem packages in VitePress's `framework` chunk.
+ *
+ * Why: reka-ui ≥2.9 depends on @vueuse 14, same major as VitePress. VitePress
+ * `manualChunks` only pins `@vue/{runtime,shared,reactivity}` into `framework`
+ * and dumps anything statically imported by the theme entry into `theme`. Shared
+ * @vueuse modules can land in `theme` while `framework` still needs them →
+ * framework→theme cycle → TDZ at runtime (`can't access lexical declaration
+ * before initialization` on ui.frappe.io after the reka-ui 2.9.9 bump).
+ *
+ * VitePress overwrites user `manualChunks`, so we wrap its function in
+ * `outputOptions` and run first. `generateBundle` fails the build if a cycle
+ * still appears.
+ */
+const FRAMEWORK_PKG_RE =
+  /[/\\]node_modules[/\\](?:vue[/\\]|@vue[/\\]|vue-router[/\\]|@vueuse[/\\])/
+
+export default function preventCircularChunks(): Plugin {
+  return {
+    name: 'frappe-ui:prevent-circular-chunks',
+    apply: 'build',
+    outputOptions(options) {
+      const previous = options.manualChunks
+      options.manualChunks = (id, meta) => {
+        if (FRAMEWORK_PKG_RE.test(id)) return 'framework'
+        if (typeof previous === 'function') return previous(id, meta)
+        return undefined
+      }
+      return options
+    },
+    generateBundle(_options, bundle) {
+      for (const [fileName, chunk] of Object.entries(bundle)) {
+        if (chunk.type !== 'chunk') continue
+        if (
+          chunk.name !== 'framework' &&
+          !/[/\\]framework\.[^/\\]+\.js$/.test(fileName)
+        ) {
+          continue
+        }
+        const bad = chunk.imports.filter(
+          (imp) => /theme\.[^/]+\.js$/.test(imp) || imp.includes('/theme.'),
+        )
+        if (bad.length) {
+          this.error(
+            `Circular VitePress chunks: ${fileName} imports ${bad.join(', ')}. ` +
+              'framework must not import theme (TDZ on load).',
+          )
+        }
+      }
+    },
+  }
+}