Develop

.claude/CLAUDE.md

@@ -1,7 +1,2 @@
-# CLAUDE.md
-
-- **Use `pnpm`** (not npm/yarn). Key commands: `pnpm build`, `pnpm test`, `pnpm demo:dev`. Always run `pnpm test` before committing.
-- **Adding terms/types/tags**: Create file in `src/data/{terms,types,tags}/{id}.ts` (lowercase + underscores, filename must match ID), add to the corresponding `index.ts`, and add an alphabetically ordered export in `src/{terms,types,tags}-entry.ts`. Look at existing files for the shape.
-- **Path aliases**: Use `@/*` for `src/*` imports. Demo uses `~/` for `demo/src/`.
-- **Conventional commits**: `fix:` (patch), `feat:` (minor), `BREAKING CHANGE:` (major).
-- **Writing style**: British English in markdown, American English in code. No unnecessary comments.
+Always use pnpm.
+Be extremely concise in all your responses.

.github/workflows/build-branch.yml

@@ -14,7 +14,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6
 
       - name: Setup environment
         uses: actions/setup-node@v6

.github/workflows/publish.yml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6
 
       - name: Setup environment
         uses: actions/setup-node@v6
@@ -57,7 +57,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6
 
       - name: Setup Node
         uses: actions/setup-node@v6

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports.biome": "explicit",
+    "source.fixAll.biome": "explicit"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
+}

README.md

@@ -34,7 +34,7 @@ For detailed API documentation, code examples, and more, visit the **[documentat
 
 ## Bundle Size & Tree-Shaking
 
-Dev-dict contains 200+ terms. To keep your bundle small, import only the terms you need via sub-path entry points.
+Dev-dict contains 220+ terms. To keep your bundle small, import only the terms you need via sub-path entry points.
 
 **Preferred — import specific terms from `dev-dict/terms`:**
 
@@ -46,7 +46,7 @@ import { react, typescript } from 'dev-dict/terms'
 **Avoid importing from the root entry point** when you only need a subset of terms — it pulls in the entire dictionary at once and cannot be tree-shaken:
 
 ```typescript
-// BAD - Includes all 200+ terms regardless of what you use
+// BAD - Includes all 220+ terms regardless of what you use
 import { terms } from 'dev-dict'
 ```
 
@@ -73,6 +73,7 @@ See [CONTRIBUTING.md](./CONTRIBUTING.md) for details.
 ```bash
 pnpm install      # Install dependencies
 pnpm build        # Build library
+pnpm test         # Run tests
 pnpm demo:dev     # Run demo site (http://localhost:5173)
 pnpm demo:build   # Build demo site
 ```

biome.json

@@ -0,0 +1,71 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "files": {
+    "includes": ["**", "!**/node_modules", "!**/dist", "!**/routeTree.gen.ts", "!**/.tanstack"]
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 120
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "trailingCommas": "all",
+      "quoteStyle": "single"
+    }
+  },
+  "linter": {
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noNonNullAssertion": "warn",
+        "useConst": {
+          "fix": "none",
+          "level": "warn"
+        }
+      },
+      "nursery": {
+        "noShadow": "warn"
+      },
+      "a11y": {
+        "noAutofocus": "warn",
+        "useKeyWithClickEvents": "warn",
+        "noStaticElementInteractions": "warn"
+      },
+      "suspicious": {
+        "noArrayIndexKey": "warn",
+        "noConsole": {
+          "level": "warn",
+          "options": {
+            "allow": ["info", "warn", "error", "group", "groupCollapsed", "groupEnd"]
+          }
+        }
+      }
+    }
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": {
+          "level": "on",
+          "options": {
+            "groups": [
+              ":NODE:",
+              ":BLANK_LINE:",
+              ":PACKAGE:",
+              ":BLANK_LINE:",
+              {
+                "type": true
+              },
+              ":ALIAS:",
+              ":BLANK_LINE:",
+              ":PATH:"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

demo/package.json

@@ -7,26 +7,26 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "update-packages": "pnpm dlx npm-check-updates -u"
+    "update-packages": "pnpm dlx npm-check-updates --format group -i"
   },
   "dependencies": {
-    "@tanstack/react-router": "^1.156.0",
-    "@tanstack/react-virtual": "^3.13.18",
+    "@tanstack/react-router": "^1.170.9",
+    "@tanstack/react-virtual": "^3.13.26",
     "dev-dict": "link:..",
-    "lucide-react": "^0.563.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-syntax-highlighter": "^16.1.0"
+    "lucide-react": "^1.17.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-syntax-highlighter": "^16.1.1"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/router-plugin": "^1.156.0",
-    "@types/react": "^19.2.9",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/router-plugin": "^1.168.12",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@vitejs/plugin-react": "^5.1.2",
-    "tailwindcss": "^4.1.18",
+    "@vitejs/plugin-react": "^6.0.2",
+    "tailwindcss": "^4.3.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1"
+    "vite": "^8.0.14"
   }
-}
+}

demo/public/404.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <title>dev-dict - Developer Dictionary</title>

demo/src/components/CompletenessChart.tsx

@@ -1,6 +1,7 @@
-import type { FieldCompleteness } from '~/shared/utils/termUtils'
 import type { TTerm } from 'dev-dict'
 
+import type { FieldCompleteness } from '~/shared/utils/termUtils'
+
 interface CompletenessChartProps {
   baselineFields: FieldCompleteness[]
   additionalFields: FieldCompleteness[]

demo/src/components/Dropdown.tsx

@@ -37,6 +37,7 @@ export function Dropdown<T extends string | string[]>({
   return (
     <div className="relative">
       <button
+        type="button"
         onClick={() => setIsOpen(!isOpen)}
         className={`h-10 px-3 bg-white rounded-lg border ${isOpen ? 'border-blue-300 ring-2 ring-blue-100' : 'border-slate-200 hover:border-slate-300'} flex items-center gap-2 transition-all text-sm min-w-[140px] cursor-pointer`}
       >
@@ -59,6 +60,7 @@ export function Dropdown<T extends string | string[]>({
                 const isSelected = multi ? (selected as string[]).includes(key) : selected === key
                 return (
                   <button
+                    type="button"
                     key={key}
                     onClick={() => {
                       if (multi) {
@@ -85,6 +87,7 @@ export function Dropdown<T extends string | string[]>({
             {multi && (selected as string[]).length > 0 && (
               <div className="border-t border-slate-100 p-1">
                 <button
+                  type="button"
                   onClick={() => (setSelected as React.Dispatch<React.SetStateAction<string[]>>)([])}
                   className="w-full px-3 py-1.5 text-xs text-slate-500 hover:bg-slate-50 rounded cursor-pointer"
                 >

demo/src/components/LanguageDropdown.tsx

@@ -29,6 +29,7 @@ export function LanguageDropdown({
   return (
     <div className="relative">
       <button
+        type="button"
         onClick={() => setIsOpen(!isOpen)}
         className={`h-10 px-3 bg-white rounded-lg border ${isOpen ? 'border-blue-300 ring-2 ring-blue-100' : 'border-slate-200 hover:border-slate-300'} flex items-center gap-2 transition-all text-sm min-w-[140px] cursor-pointer`}
       >
@@ -46,6 +47,7 @@ export function LanguageDropdown({
                 const isSelected = selected === option.code
                 return (
                   <button
+                    type="button"
                     key={option.code}
                     onClick={() => {
                       setSelected(option.code)

demo/src/components/SearchBar.tsx

@@ -19,6 +19,7 @@ export function SearchBar({ value, onChange }: SearchBarProps) {
       />
       {value && (
         <button
+          type="button"
           onClick={() => onChange('')}
           className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 cursor-pointer"
         >

demo/src/components/TermCard.tsx

@@ -1,11 +1,12 @@
 import { Link } from '@tanstack/react-router'
-import { useCopyToClipboard } from '~/shared/hooks'
 import type { TTermLocalized, TTermTagLocalized, TTermTypeLocalized } from 'dev-dict'
 import { Book, Check, Copy } from 'lucide-react'
 
+import { useCopyToClipboard } from '~/shared/hooks'
+import { getTermCompleteness } from '~/shared/utils/termUtils'
+
 import { Chip } from './Chip'
 import { TermLinks } from './TermLinks'
-import { getTermCompleteness } from '~/shared/utils/termUtils'
 
 interface TermCardProps {
   term: TTermLocalized
@@ -49,6 +50,7 @@ export function TermCard({ term, searchQuery, populateEmpty = true }: TermCardPr
           </p>
 
           <button
+            type="button"
             onClick={copyId}
             className={`inline-flex items-center gap-1 px-2 pt-0.5 mt-2 text-xs rounded transition-all mb-1 ${
               copied

demo/src/pages/DocsPage.tsx

@@ -1,10 +1,11 @@
 import { Link } from '@tanstack/react-router'
-import { useCopyToClipboard } from '~/shared/hooks'
-import { ArrowLeft, BookOpen, Check, ChevronDown, Code, Copy, Github, Globe, Package, Zap } from 'lucide-react'
+import { ArrowLeft, BookOpen, Check, ChevronDown, Code, Copy, Globe, Package, Zap } from 'lucide-react'
 import { useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
+import { useCopyToClipboard } from '~/shared/hooks'
+
 function CodeBlock({ code, language = 'typescript' }: { code: string; language?: string }) {
   const { copied, copy } = useCopyToClipboard()
 
@@ -28,6 +29,7 @@ function CodeBlock({ code, language = 'typescript' }: { code: string; language?:
         {code}
       </SyntaxHighlighter>
       <button
+        type="button"
         onClick={handleCopy}
         className="absolute top-2 right-2 p-2 bg-slate-600 hover:bg-slate-500 rounded-md transition-colors opacity-0 group-hover:opacity-100"
         title="Copy to clipboard"
@@ -54,6 +56,7 @@ function Accordion({
   return (
     <div className="border-b border-slate-200 last:border-b-0">
       <button
+        type="button"
         onClick={() => setIsOpen(!isOpen)}
         className="w-full flex items-start justify-between py-4 px-4 my-2 text-left hover:bg-slate-50 transition-colors rounded-lg cursor-pointer group"
       >
@@ -159,7 +162,6 @@ export function DocsPage() {
               rel="noopener noreferrer"
               className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-slate-800 hover:bg-slate-700 text-white rounded-lg transition-colors"
             >
-              <Github size={16} />
               GitHub
             </a>
             <a
@@ -168,7 +170,6 @@ export function DocsPage() {
               rel="noopener noreferrer"
               className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
             >
-              <Package size={16} />
               npm
             </a>
           </div>

demo/src/pages/HomePage.tsx

@@ -1,5 +1,10 @@
 import { Link } from '@tanstack/react-router'
 import { useWindowVirtualizer } from '@tanstack/react-virtual'
+import { terms } from 'dev-dict'
+import { getTags, getTerms, getTypes } from 'dev-dict/utils'
+import { BookOpen, CheckCircle, Layers, Plus, Search, Tag } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+
 import { Dropdown } from '~/components/Dropdown'
 import { LanguageDropdown } from '~/components/LanguageDropdown'
 import { SearchBar } from '~/components/SearchBar'
@@ -9,10 +14,6 @@ import { useAppContext } from '~/shared/context/AppContext'
 import { filterTerms } from '~/shared/utils/filterUtils'
 import { sortTermsByName } from '~/shared/utils/sortUtils'
 import { getTermCompleteness } from '~/shared/utils/termUtils'
-import { terms } from 'dev-dict'
-import { getTags, getTerms, getTypes } from 'dev-dict/utils'
-import { BookOpen, CheckCircle, Layers, Plus, Search, Tag } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
 
 interface HomePageProps {
   searchQuery: string
@@ -140,6 +141,7 @@ export function HomePage({ searchQuery, onSearchChange, completeness, onComplete
             />
             {(selectedTypes.length > 0 || selectedTags.length > 0) && (
               <button
+                type="button"
                 onClick={() => {
                   setSelectedTypes([])
                   setSelectedTags([])