frappe-ui 0.1.278 → 1.0.0-beta.0

package/frappe/DataImport/DataImportList.vue

@@ -41,8 +41,8 @@
                         Status
                     </div>
                 </div>
-                <div 
-                    v-for="dataImport in dataImports.data" 
+                <div
+                    v-for="dataImport in dataImports.data"
                     @click="() => redirectToImport(dataImport.name!)"
                     class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center cursor-pointer py-2.5 px-1 mx-2"
                 >
@@ -84,7 +84,7 @@
         >
             <template #body-content>
                 <div>
-                    <Link 
+                    <Link
                         v-model="doctypeForImport"
                         doctype="DocType"
                         :filters="{
@@ -105,7 +105,7 @@ import { dayjs } from "../../src/utils/dayjs"
 import { getBadgeColor } from "./dataImport"
 import Badge from '../../src/components/Badge/Badge.vue'
 import type { BadgeProps } from '../../src/components/Badge/types'
-import { toast } from "../../src/components/Toast/index"
+import { toast } from "../../src/components/Toast/toast"
 import Button from '../../src/components/Button/Button.vue'
 import Dialog from '../../src/components/Dialog/Dialog.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'

package/frappe/DataImport/MappingStep.vue

@@ -14,7 +14,7 @@
                     Change the mapping of columns from your file to fields in the system
                 </div>
             </div>
-            
+
             <div class="flex flex-col lg:flex-row space-y-2 lg:space-x-2 lg:space-y-0">
                 <Button v-if="mappingUpdated" label="Reset Mapping" @click="resetMapping" />
                 <Button label="Continue" variant="solid" @click="$emit('updateStep', 'preview')" />
@@ -36,7 +36,7 @@
                     <Autocomplete
                         :model-value="columnMappings[columnsFromFile[i - 1]]"
                         :options="columnsFromSystem"
-                        placeholder="Select field" 
+                        placeholder="Select field"
                         @update:model-value="(val: any) => updateColumnMappings(i, val)"
                     />
                 </template>
@@ -48,7 +48,7 @@
 import type { DataImport, DataImports } from './types';
 import { fieldsToIgnore, getBadgeColor, getPreviewData } from './dataImport'
 import { computed, nextTick, onMounted, ref } from 'vue';
-import { toast } from "../../src/components/Toast/index"
+import { toast } from "../../src/components/Toast/toast"
 import Autocomplete from '../../src/components/Autocomplete/Autocomplete.vue';
 import Badge from '../../src/components/Badge/Badge.vue';
 import Button from '../../src/components/Button/Button.vue';
@@ -180,7 +180,7 @@ const resetMapping = () => {
 
 const getChildTableName = (parent: string, child: string) => {
     let parentFields = props.fields.data?.docs.find((doc: any) => doc.name == parent)?.fields || [];
-    
+
     let childField = parentFields.filter((field: any) => field.options == child)[0]
     return childField?.label || child;
 }

package/frappe/DataImport/UploadStep.vue

@@ -10,8 +10,8 @@
                         {{ data?.status }}
                     </Badge>
                 </div>
-                <Button 
-                    variant="solid" 
+                <Button
+                    variant="solid"
                     @click="saveImport"
                     :disabled="disableContinueButton"
                 >
@@ -27,7 +27,7 @@
             <div
                 v-if="showFileSelector && !importFile"
                 @dragover.prevent
-                @drop.prevent="(e) =>  uploadFile(e)" 
+                @drop.prevent="(e) =>  uploadFile(e)"
                 class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
                 <div v-if="showFileSelector && !uploading" class="w-4/5 lg:w-2/5 text-center">
                     <FeatherIcon name="upload-cloud" class="size-6 stroke-1.5 text-ink-gray-6 mx-auto mb-2.5" />
@@ -39,11 +39,11 @@
                         @change="(e) => uploadFile(e)"
                     />
                     <div class="leading-5 text-ink-gray-9">
-                        Drag and drop a CSV file, or upload from your 
-                        <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">Device</span> 
-                        or 
-                        <span @click="openSheetSelector" class="cursor-pointer font-semibold hover:underline"> 
-                            Google Sheet 
+                        Drag and drop a CSV file, or upload from your
+                        <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">Device</span>
+                        or
+                        <span @click="openSheetSelector" class="cursor-pointer font-semibold hover:underline">
+                            Google Sheet
                         </span>
                     </div>
                 </div>
@@ -57,7 +57,7 @@
                         </div>
                     </div>
                     <div class="w-full bg-surface-gray-1 h-1 rounded-full mt-3">
-                        <div 
+                        <div
                             class="bg-surface-gray-7 h-1 rounded-full transition-all duration-500 ease-in-out"
                             :style="`width: ${uploadProgress}%`"
                         ></div>
@@ -74,8 +74,8 @@
                             {{ convertToKB(importFile.file_size) }}
                         </div>
                     </div>
-                    <FeatherIcon 
-                        name="trash-2" 
+                    <FeatherIcon
+                        name="trash-2"
                         class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
                         @click="deleteFile"
                     />
@@ -154,7 +154,7 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import type { DataImports, DataImport, DocField, DocType } from './types'
-import { toast } from "../../src/components/Toast/index"
+import { toast } from "../../src/components/Toast/toast"
 import { fieldsToIgnore, getChildTableName, getBadgeColor } from './dataImport'
 import Badge from '../../src/components/Badge/Badge.vue'
 import Button from '../../src/components/Button/Button.vue'
@@ -199,7 +199,7 @@ const extractFile = (e: Event): File | null => {
 const uploadFile = (e: Event) => {
     const file = extractFile(e)
     if (!file) return;
-    
+
     if (file.type !== 'text/csv') {
         toast.error('Please upload a valid CSV file.')
         console.error('Please upload a valid CSV file.')
@@ -309,7 +309,7 @@ const exportTemplate = async (type: 'mandatory' | 'all') => {
 const getExportURL = (type: 'mandatory' | 'all') => {
     if (!props.doctype && !props.data?.reference_doctype) return ''
     let exportFields = getExportFields(type)
-    
+
     return `/api/method/frappe.core.doctype.data_import.data_import.download_template
         ?doctype=${encodeURIComponent(props.doctype || props.data?.reference_doctype as string)}
         &export_fields=${encodeURIComponent(JSON.stringify(exportFields))}

package/frappe/DataImport/dataImport.ts

@@ -1,4 +1,4 @@
-import { toast } from "../../src/components/Toast/index"
+import { toast } from "../../src/components/Toast/toast"
 import type { DataImportStatus } from './types'
 import call from '../../src/utils/call';
 

package/frappe/Link/Link.vue

@@ -71,7 +71,7 @@ const createNewOption = {
   label: 'Create New',
   slotName: 'create-new',
   condition: () => true,
-  onClick: ({ searchTerm }) => emit('create', searchTerm),
+  onClick: ({ query }) => emit('create', query),
 } as ComboboxOption
 
 const linkOptions = computed(() => {

package/frappe/Onboarding/onboarding.js

@@ -131,7 +131,11 @@ export function useOnboarding(appName) {
     if (onboardingSteps.value.length) {
       let _steps = onboardingSteps.value
       _steps.forEach((step, index) => {
-        onboardings[appName][index].completed = step.completed
+        const onboardingExists =
+          onboardings[appName] && onboardings[appName][index]
+        if (onboardingExists) {
+          onboardings[appName][index].completed = step.completed
+        }
       })
       isOnboardingStepsCompleted.value = _steps.every((step) => step.completed)
     } else {

package/frappe/drive/js/icons.js

@@ -3,7 +3,6 @@ import PlusSquare from "~icons/lucide/plus-square"
 import Sunset from "~icons/lucide/sunset"
 import Battery from "~icons/lucide/battery"
 import LogIn from "~icons/lucide/log-in"
-import Gitlab from "~icons/lucide/gitlab"
 import Map from "~icons/lucide/map"
 import CornerUpRight from "~icons/lucide/corner-up-right"
 import ZapOff from "~icons/lucide/zap-off"
@@ -16,7 +15,6 @@ import TrendingUp from "~icons/lucide/trending-up"
 import EyeOff from "~icons/lucide/eye-off"
 import Octagon from "~icons/lucide/octagon"
 import Edit from "~icons/lucide/edit"
-import Pocket from "~icons/lucide/pocket"
 import RefreshCcw from "~icons/lucide/refresh-ccw"
 import Truck from "~icons/lucide/truck"
 import Volume2 from "~icons/lucide/volume-2"
@@ -57,7 +55,6 @@ import Link from "~icons/lucide/link"
 import Pause from "~icons/lucide/pause"
 import PhoneOutgoing from "~icons/lucide/phone-outgoing"
 import Save from "~icons/lucide/save"
-import Facebook from "~icons/lucide/facebook"
 import UserX from "~icons/lucide/user-x"
 import PenTool from "~icons/lucide/pen-tool"
 import Trash2 from "~icons/lucide/trash-2"
@@ -87,7 +84,6 @@ import MicOff from "~icons/lucide/mic-off"
 import ExternalLink from "~icons/lucide/external-link"
 import Menu from "~icons/lucide/menu"
 import PauseCircle from "~icons/lucide/pause-circle"
-import Instagram from "~icons/lucide/instagram"
 import ToggleLeft from "~icons/lucide/toggle-left"
 import Speaker from "~icons/lucide/speaker"
 import Image from "~icons/lucide/image"
@@ -122,7 +118,6 @@ import UserMinus from "~icons/lucide/user-minus"
 import Database from "~icons/lucide/database"
 import Search from "~icons/lucide/search"
 import Globe from "~icons/lucide/globe"
-import Github from "~icons/lucide/github"
 import Bell from "~icons/lucide/bell"
 import Monitor from "~icons/lucide/monitor"
 import Scissors from "~icons/lucide/scissors"
@@ -148,7 +143,6 @@ import Navigation from "~icons/lucide/navigation"
 import LogOut from "~icons/lucide/log-out"
 import Underline from "~icons/lucide/underline"
 import Triangle from "~icons/lucide/triangle"
-import Slack from "~icons/lucide/slack"
 import Watch from "~icons/lucide/watch"
 import Disc from "~icons/lucide/disc"
 import StopCircle from "~icons/lucide/stop-circle"
@@ -164,7 +158,6 @@ import File from "~icons/lucide/file"
 import ThumbsDown from "~icons/lucide/thumbs-down"
 import Download from "~icons/lucide/download"
 import Umbrella from "~icons/lucide/umbrella"
-import Framer from "~icons/lucide/framer"
 import Sun from "~icons/lucide/sun"
 import PhoneCall from "~icons/lucide/phone-call"
 import AlertCircle from "~icons/lucide/alert-circle"
@@ -172,7 +165,6 @@ import CheckCircle from "~icons/lucide/check-circle"
 import Target from "~icons/lucide/target"
 import LifeBuoy from "~icons/lucide/life-buoy"
 import Shield from "~icons/lucide/shield"
-import Youtube from "~icons/lucide/youtube"
 import Cpu from "~icons/lucide/cpu"
 import Users from "~icons/lucide/users"
 import Mail from "~icons/lucide/mail"
@@ -181,9 +173,7 @@ import PhoneIncoming from "~icons/lucide/phone-incoming"
 import CreditCard from "~icons/lucide/credit-card"
 import Lock from "~icons/lucide/lock"
 import Maximize from "~icons/lucide/maximize"
-import Twitter from "~icons/lucide/twitter"
 import Inbox from "~icons/lucide/inbox"
-import Linkedin from "~icons/lucide/linkedin"
 import ShoppingCart from "~icons/lucide/shopping-cart"
 import Play from "~icons/lucide/play"
 import Code from "~icons/lucide/code"
@@ -191,7 +181,6 @@ import RotateCcw from "~icons/lucide/rotate-ccw"
 import MoreHorizontal from "~icons/lucide/more-horizontal"
 import Percent from "~icons/lucide/percent"
 import HelpCircle from "~icons/lucide/help-circle"
-import Trello from "~icons/lucide/trello"
 import Shuffle from "~icons/lucide/shuffle"
 import Sliders from "~icons/lucide/sliders"
 import Volume from "~icons/lucide/volume"
@@ -203,7 +192,6 @@ const icons = {
   sunset: Sunset,
   battery: Battery,
   "log-in": LogIn,
-  gitlab: Gitlab,
   map: Map,
   "corner-up-right": CornerUpRight,
   "zap-off": ZapOff,
@@ -215,7 +203,6 @@ const icons = {
   "eye-off": EyeOff,
   octagon: Octagon,
   edit: Edit,
-  pocket: Pocket,
   "refresh-ccw": RefreshCcw,
   truck: Truck,
   "volume-2": Volume2,
@@ -256,7 +243,6 @@ const icons = {
   pause: Pause,
   "phone-outgoing": PhoneOutgoing,
   save: Save,
-  facebook: Facebook,
   "user-x": UserX,
   "pen-tool": PenTool,
   "trash-2": Trash2,
@@ -286,7 +272,6 @@ const icons = {
   "external-link": ExternalLink,
   menu: Menu,
   "pause-circle": PauseCircle,
-  instagram: Instagram,
   "toggle-left": ToggleLeft,
   speaker: Speaker,
   image: Image,
@@ -321,7 +306,6 @@ const icons = {
   database: Database,
   search: Search,
   globe: Globe,
-  github: Github,
   bell: Bell,
   monitor: Monitor,
   scissors: Scissors,
@@ -347,7 +331,6 @@ const icons = {
   "log-out": LogOut,
   underline: Underline,
   triangle: Triangle,
-  slack: Slack,
   watch: Watch,
   disc: Disc,
   "stop-circle": StopCircle,
@@ -363,7 +346,6 @@ const icons = {
   "thumbs-down": ThumbsDown,
   download: Download,
   umbrella: Umbrella,
-  framer: Framer,
   sun: Sun,
   "phone-call": PhoneCall,
   "alert-circle": AlertCircle,
@@ -371,7 +353,6 @@ const icons = {
   target: Target,
   "life-buoy": LifeBuoy,
   shield: Shield,
-  youtube: Youtube,
   cpu: Cpu,
   users: Users,
   mail: Mail,
@@ -380,9 +361,7 @@ const icons = {
   "credit-card": CreditCard,
   lock: Lock,
   maximize: Maximize,
-  twitter: Twitter,
   inbox: Inbox,
-  linkedin: Linkedin,
   "shopping-cart": ShoppingCart,
   play: Play,
   code: Code,
@@ -390,7 +369,6 @@ const icons = {
   "more-horizontal": MoreHorizontal,
   percent: Percent,
   "help-circle": HelpCircle,
-  trello: Trello,
   shuffle: Shuffle,
   sliders: Sliders,
   volume: Volume,
@@ -399,7 +377,6 @@ const icons = {
   sunset: Sunset,
   battery: Battery,
   "log-in": LogIn,
-  gitlab: Gitlab,
   map: Map,
   "corner-up-right": CornerUpRight,
   "zap-off": ZapOff,
@@ -411,7 +388,6 @@ const icons = {
   "eye-off": EyeOff,
   octagon: Octagon,
   edit: Edit,
-  pocket: Pocket,
   "refresh-ccw": RefreshCcw,
   truck: Truck,
   "volume-2": Volume2,
@@ -452,7 +428,6 @@ const icons = {
   pause: Pause,
   "phone-outgoing": PhoneOutgoing,
   save: Save,
-  facebook: Facebook,
   "user-x": UserX,
   "pen-tool": PenTool,
   "trash-2": Trash2,
@@ -482,7 +457,6 @@ const icons = {
   "external-link": ExternalLink,
   menu: Menu,
   "pause-circle": PauseCircle,
-  instagram: Instagram,
   "toggle-left": ToggleLeft,
   speaker: Speaker,
   image: Image,
@@ -517,7 +491,6 @@ const icons = {
   database: Database,
   search: Search,
   globe: Globe,
-  github: Github,
   bell: Bell,
   monitor: Monitor,
   scissors: Scissors,
@@ -543,7 +516,6 @@ const icons = {
   "log-out": LogOut,
   underline: Underline,
   triangle: Triangle,
-  slack: Slack,
   watch: Watch,
   disc: Disc,
   "stop-circle": StopCircle,
@@ -559,7 +531,6 @@ const icons = {
   "thumbs-down": ThumbsDown,
   download: Download,
   umbrella: Umbrella,
-  framer: Framer,
   sun: Sun,
   "phone-call": PhoneCall,
   "alert-circle": AlertCircle,
@@ -567,7 +538,6 @@ const icons = {
   target: Target,
   "life-buoy": LifeBuoy,
   shield: Shield,
-  youtube: Youtube,
   cpu: Cpu,
   users: Users,
   mail: Mail,
@@ -576,9 +546,7 @@ const icons = {
   "credit-card": CreditCard,
   lock: Lock,
   maximize: Maximize,
-  twitter: Twitter,
   inbox: Inbox,
-  linkedin: Linkedin,
   "shopping-cart": ShoppingCart,
   play: Play,
   code: Code,
@@ -586,7 +554,6 @@ const icons = {
   "more-horizontal": MoreHorizontal,
   percent: Percent,
   "help-circle": HelpCircle,
-  trello: Trello,
   shuffle: Shuffle,
   sliders: Sliders,
   volume: Volume,
@@ -595,7 +562,6 @@ const icons = {
   sunset: Sunset,
   battery: Battery,
   "log-in": LogIn,
-  gitlab: Gitlab,
   map: Map,
   "corner-up-right": CornerUpRight,
   "zap-off": ZapOff,
@@ -607,7 +573,6 @@ const icons = {
   "eye-off": EyeOff,
   octagon: Octagon,
   edit: Edit,
-  pocket: Pocket,
   "refresh-ccw": RefreshCcw,
   truck: Truck,
   "volume-2": Volume2,
@@ -648,7 +613,6 @@ const icons = {
   pause: Pause,
   "phone-outgoing": PhoneOutgoing,
   save: Save,
-  facebook: Facebook,
   "user-x": UserX,
   "pen-tool": PenTool,
   "trash-2": Trash2,
@@ -678,7 +642,6 @@ const icons = {
   "external-link": ExternalLink,
   menu: Menu,
   "pause-circle": PauseCircle,
-  instagram: Instagram,
   "toggle-left": ToggleLeft,
   speaker: Speaker,
   image: Image,

package/frappe/index.d.ts

@@ -50,6 +50,16 @@ declare module 'frappe-ui/frappe' {
   //   Components
   export const Link: Component
   export type { LinkProps } from './Link/types'
+
+  // Telemetry
+  export function useTelemetry(): {
+    isEnabled: { readonly value: boolean }
+    disable: () => void
+    capture: (event_name: string, data?: Record<string, any>) => void
+  }
+  export const telemetryPlugin: {
+    install: (app: import('vue').App, options: { app_name: string }) => Promise<void>
+  }
 }
 
 // Data Import

package/icons/IconPicker.story.vue

@@ -28,7 +28,7 @@ const state = reactive({
           :open-on-focus="state.openOnFocus"
           :placement="state.placement"
         />
-        <div class="mt-2 text-sm text-gray-600">
+        <div class="mt-2 text-sm text-ink-gray-6">
           Selected: {{ basicValue || 'None' }}
         </div>
       </div>
@@ -43,7 +43,7 @@ const state = reactive({
           :placeholder="state.placeholder"
           :disabled="state.disabled"
         />
-        <div class="mt-2 text-sm text-gray-600">
+        <div class="mt-2 text-sm text-ink-gray-6">
           Selected: {{ basicValue || 'None' }}
         </div>
       </div>
@@ -58,7 +58,7 @@ const state = reactive({
           :placeholder="state.placeholder"
           :disabled="state.disabled"
         />
-        <div class="mt-2 text-sm text-gray-600">
+        <div class="mt-2 text-sm text-ink-gray-6">
           Selected: {{ basicValue || 'None' }}
         </div>
       </div>
@@ -73,7 +73,7 @@ const state = reactive({
           :placeholder="state.placeholder"
           :disabled="state.disabled"
         />
-        <div class="mt-2 text-sm text-gray-600">
+        <div class="mt-2 text-sm text-ink-gray-6">
           Selected: {{ basicValue || 'None' }}
         </div>
       </div>
@@ -87,7 +87,7 @@ const state = reactive({
           :placeholder="state.placeholder"
           :disabled="state.disabled"
         />
-        <div class="mt-2 text-sm text-gray-600">
+        <div class="mt-2 text-sm text-ink-gray-6">
           Selected: {{ preselectedValue || 'None' }}
         </div>
       </div>
@@ -101,7 +101,7 @@ const state = reactive({
           placeholder="This is disabled"
           :disabled="true"
         />
-        <div class="mt-2 text-sm text-gray-600">
+        <div class="mt-2 text-sm text-ink-gray-6">
           Icon picker is disabled
         </div>
       </div>

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.278",
+  "version": "1.0.0-beta.0",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,
   "scripts": {
     "test": "vitest --run",
-    "type-check": "tsc --noEmit",
+    "test:coverage": "vitest --run --coverage",
+    "test:cypress": "cypress run --component",
+    "test:cypress:coverage": "cross-env COVERAGE=true cypress run --component",
+    "coverage": "yarn test:coverage && yarn test:cypress:coverage && yarn coverage:merge",
+    "coverage:merge": "tsx .github/scripts/merge-coverage.ts",
+    "type-check": "vue-tsc --noEmit",
+    "type-check:tsc": "tsc --noEmit",
     "prettier": "yarn run prettier -w ./src",
     "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
     "release-patch": "yarn version --patch && git push && git push --tags",
+    "bump-and-release-beta": "yarn test && git pull --rebase origin main && yarn run release-beta",
+    "release-beta": "yarn version --prerelease --preid beta && git push && git push --tags",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
@@ -40,6 +48,10 @@
       "import": "./tailwind/index.js",
       "default": "./tailwind/index.js"
     },
+    "./tailwind/tokens.js": {
+      "import": "./tailwind/tokens.js",
+      "default": "./tailwind/tokens.js"
+    },
     "./vite": {
       "import": "./vite/index.js"
     },
@@ -70,8 +82,6 @@
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@floating-ui/vue": "^1.1.6",
     "@headlessui/vue": "^1.7.14",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
@@ -104,19 +114,19 @@
     "@tiptap/vue-3": "^3.11.0",
     "@vueuse/core": "^10.4.1",
     "dayjs": "^1.11.13",
-    "dompurify": "^3.2.6",
+    "dompurify": "^3.4.0",
     "echarts": "^5.6.0",
     "feather-icons": "^4.28.0",
+    "fuzzysort": "^3.1.0",
     "grid-layout-plus": "^1.1.0",
     "highlight.js": "^11.11.1",
     "idb-keyval": "^6.2.0",
     "lowlight": "^3.3.0",
-    "lucide-static": "^0.545.0",
+    "lucide-static": "^1.16.0",
     "marked": "^15.0.12",
     "ora": "5.4.1",
     "prettier": "^3.3.2",
     "prosemirror-tables": "^1.8.1",
-    "radix-vue": "^1.5.3",
     "reka-ui": "^2.5.0",
     "slugify": "^1.6.6",
     "socket.io-client": "^4.5.1",
@@ -124,38 +134,58 @@
     "typescript": "^5.0.2",
     "unplugin-auto-import": "^19.3.0",
     "unplugin-icons": "^22.1.0",
-    "unplugin-vue-components": "^28.4.1"
+    "unplugin-vue-components": "^32.0.0",
+    "vue-sonner": "^2.0.9"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@cypress/code-coverage": "^3.13.10",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.13",
+    "cross-env": "^7.0.3",
     "cypress": "^15.8.2",
     "cypress-split": "^1.24.28",
     "jsdom": "^27.4.0",
     "lint-staged": ">=10",
     "msw": "^2.7.0",
-    "postcss": "^8.4.21",
+    "nyc": "^17.1.0",
+    "postcss": "^8.5.10",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
     "tsx": "^4.20.6",
-    "vite": "^5.1.8",
+    "vite": "^7.3.2",
+    "vite-plugin-istanbul": "^9.0.0",
     "vitepress": "^2.0.0-alpha.15",
-    "vitest": "^2.1.8",
+    "vitest": "^3.2.4",
     "vue": "^3.3.0",
     "vue-component-meta": "^3.1.8",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vue-tsc": "^3.2.7"
   },
   "resolutions": {
     "prosemirror-model": "1.25.2",
     "prosemirror-state": "1.4.3",
     "prosemirror-view": "1.40.0",
-    "prosemirror-transform": "1.10.4"
+    "prosemirror-transform": "1.10.4",
+    "defu": "^6.1.5",
+    "esbuild": "^0.25.0",
+    "lodash": "^4.18.0",
+    "markdown-it": "^14.1.1",
+    "qs": "^6.14.2",
+    "rollup": "^4.59.0",
+    "socket.io-parser": "^4.2.6",
+    "systeminformation": "^5.31.6",
+    "ws": "^8.20.1",
+    "postcss": "^8.5.10",
+    "vite": "^7.3.2",
+    "picomatch": "^4.0.4",
+    "js-yaml": "^4.1.1"
   },
   "lint-staged": {
     "*.{js,css,md,vue}": "prettier --write"
   }
-}
+}

package/readme.md

@@ -83,6 +83,18 @@ Now, you can import needed components and start using it:
 </script>
 ```
 
+## Claude Code skill
+
+For AI coding agents (Claude Code, Cursor, Codex, etc.), Frappe UI ships an agent skill that teaches the agent the library's conventions — semantic Tailwind tokens, the `variant` + `theme` color axes, the `useCall` data-fetching composable, common UI recipes, and anti-patterns to avoid.
+
+Install with [Vercel's `skills` CLI](https://github.com/vercel-labs/skills):
+
+```sh
+npx skills add https://github.com/frappe/frappe-ui/tree/main/skills/frappe-ui
+```
+
+The skill lives in [`skills/frappe-ui/`](./skills/frappe-ui/) and is updated alongside the library.
+
 ## Used By
 
 Frappe UI is being used in a lot of products by