chore: replace prettier with oxfmt and apply formatting (#472)

.editorconfig

@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,jsx,ts,tsx,json,jsonc,css,md,yml,yaml}]
+indent_style = space
+indent_size = 2
+
+[*.rs]
+indent_style = space
+indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false

.oxfmtrc.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "sortImports": {
+    "internalPattern": ["@/"],
+    "newlinesBetween": true,
+    "groups": [
+      "builtin",
+      "external",
+      "internal",
+      ["parent", "sibling", "index"],
+      "style",
+      "unknown"
+    ]
+  },
+  "sortTailwindcss": {
+    "stylesheet": "ui/app/globals.css",
+    "functions": ["cn", "clsx", "cva", "tw"]
+  }
+}

.prettierrc

@@ -1,6 +0,0 @@
-{
-  "plugins": ["prettier-plugin-tailwindcss"],
-  "semi": false,
-  "singleQuote": true,
-  "jsxSingleQuote": true
-}

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "oxc.oxc-vscode",
+    "EditorConfig.EditorConfig",
+    "bradlc.vscode-tailwindcss",
+    "rust-lang.rust-analyzer"
+  ],
+  "unwantedRecommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

bun.lock

@@ -7,8 +7,7 @@
         "@playwright/test": "^1.59.1",
         "@tauri-apps/cli": "^2.10.1",
         "git-cliff": "^2.12.0",
-        "prettier": "^3.8.3",
-        "prettier-plugin-tailwindcss": "^0.7.2",
+        "oxfmt": "^0.45.0",
       },
     },
     "ui": {
@@ -371,6 +370,44 @@
 
     "@orval/zod": ["@orval/zod@8.8.0", "", { "dependencies": { "@orval/core": "8.8.0", "remeda": "^2.33.6" } }, "sha512-ouKzo7srJXuwsZmNzp8nXkM6lwiYCZoSRYFH1JFAYF77SK7AEoFul8AYObzebqmHIXC4GLUNOsxHT9N0NE8zmQ=="],
 
+    "@oxfmt/binding-android-arm-eabi": ["@oxfmt/binding-android-arm-eabi@0.45.0", "", { "os": "android", "cpu": "arm" }, "sha512-A/UMxFob1fefCuMeGxQBulGfFE38g2Gm23ynr3u6b+b7fY7/ajGbNsa3ikMIkGMLJW/TRoQaMoP1kME7S+815w=="],
+
+    "@oxfmt/binding-android-arm64": ["@oxfmt/binding-android-arm64@0.45.0", "", { "os": "android", "cpu": "arm64" }, "sha512-L63z4uZmHjgvvqvMJD7mwff8aSBkM0+X4uFr6l6U5t6+Qc9DCLVZWIunJ7Gm4fn4zHPdSq6FFQnhu9yqqobxIg=="],
+
+    "@oxfmt/binding-darwin-arm64": ["@oxfmt/binding-darwin-arm64@0.45.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-UV34dd623FzqT+outIGndsCA/RBB+qgB3XVQhgmmJ9PJwa37NzPC9qzgKeOhPKxVk2HW+JKldQrVL54zs4Noww=="],
+
+    "@oxfmt/binding-darwin-x64": ["@oxfmt/binding-darwin-x64@0.45.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-pMNJv0CMa1pDefVPeNbuQxibh8ITpWDFEhMC/IBB9Zlu76EbgzYwrzI4Cb11mqX2+rIYN70UTrh3z06TM59ptQ=="],
+
+    "@oxfmt/binding-freebsd-x64": ["@oxfmt/binding-freebsd-x64@0.45.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-xTcRoxbbo61sW2+ZRPeH+vp/o9G8gkdhiVumFU+TpneiPm14c79l6GFlxPXlCE9bNWikigbsrvJw46zCVAQFfg=="],
+
+    "@oxfmt/binding-linux-arm-gnueabihf": ["@oxfmt/binding-linux-arm-gnueabihf@0.45.0", "", { "os": "linux", "cpu": "arm" }, "sha512-hWL8Hdni+3U1mPFx1UtWeGp3tNb6EhBAUHRMbKUxVkOp3WwoJbpVO2bfUVbS4PfpledviXXNHSTl1veTa6FhkQ=="],
+
+    "@oxfmt/binding-linux-arm-musleabihf": ["@oxfmt/binding-linux-arm-musleabihf@0.45.0", "", { "os": "linux", "cpu": "arm" }, "sha512-6Blt/0OBT7vvfQpqYuYbpbFLPqSiaYpEJzUUWhinPEuADypDbtV1+LdjM0vYBNGPvnj85ex7lTerEX6JGcPt9w=="],
+
+    "@oxfmt/binding-linux-arm64-gnu": ["@oxfmt/binding-linux-arm64-gnu@0.45.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-jLjoLfe+hGfjhA8hNBSdw85yCA8ePKq7ME4T+g6P9caQXvmt6IhE2X7iVjnVdkmYUWEzZrxlh4p6RkDmAMJY/A=="],
+
+    "@oxfmt/binding-linux-arm64-musl": ["@oxfmt/binding-linux-arm64-musl@0.45.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-XQKXZIKYJC3GQJ8FnD3iMntpw69Wd9kDDK/Xt79p6xnFYlGGxSNv2vIBvRTDg5CKByWFWWZLCRDOXoP/m6YN4g=="],
+
+    "@oxfmt/binding-linux-ppc64-gnu": ["@oxfmt/binding-linux-ppc64-gnu@0.45.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-+g5RiG+xOkdrCWkKodv407nTvMq4vYM18Uox2MhZBm/YoqFxxJpWKsloskFFG5NU13HGPw1wzYjjOVcyd9moCA=="],
+
+    "@oxfmt/binding-linux-riscv64-gnu": ["@oxfmt/binding-linux-riscv64-gnu@0.45.0", "", { "os": "linux", "cpu": "none" }, "sha512-V7dXKoSyEbWAkkSF4JJNtF+NJZDmJoSarSoP30WCsB3X636Rehd3CvxBj49FIJxEBFWhvcUjGSHVeU8Erck1bQ=="],
+
+    "@oxfmt/binding-linux-riscv64-musl": ["@oxfmt/binding-linux-riscv64-musl@0.45.0", "", { "os": "linux", "cpu": "none" }, "sha512-Vdelft1sAEYojVGgcODEFXSWYQYlIvoyIGWebKCuUibd1tvS1TjTx413xG2ZLuHpYj45CkN/ztMLMX6jrgqpgg=="],
+
+    "@oxfmt/binding-linux-s390x-gnu": ["@oxfmt/binding-linux-s390x-gnu@0.45.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-RR7xKgNpqwENnK0aYCGYg0JycY2n93J0reNjHyes+I9Gq52dH95x+CBlnlAQHCPfz6FGnKA9HirgUl14WO6o7w=="],
+
+    "@oxfmt/binding-linux-x64-gnu": ["@oxfmt/binding-linux-x64-gnu@0.45.0", "", { "os": "linux", "cpu": "x64" }, "sha512-U/QQ0+BQNSHxjuXR/utvXnQ50Vu5kUuqEomZvQ1/3mhgbBiMc2WU9q5kZ5WwLp3gnFIx9ibkveoRSe2EZubkqg=="],
+
+    "@oxfmt/binding-linux-x64-musl": ["@oxfmt/binding-linux-x64-musl@0.45.0", "", { "os": "linux", "cpu": "x64" }, "sha512-o5TLOUCF0RWQjsIS06yVC+kFgp092/yLe6qBGSUvtnmTVw9gxjpdQSXc3VN5Cnive4K11HNstEZF8ROKHfDFSw=="],
+
+    "@oxfmt/binding-openharmony-arm64": ["@oxfmt/binding-openharmony-arm64@0.45.0", "", { "os": "none", "cpu": "arm64" }, "sha512-RnGcV3HgPuOjsGx/k9oyRNKmOp+NBLGzZTdPDYbc19r7NGeYPplnUU/BfU35bX2Y/O4ejvHxcfkvW2WoYL/gsg=="],
+
+    "@oxfmt/binding-win32-arm64-msvc": ["@oxfmt/binding-win32-arm64-msvc@0.45.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-v3Vj7iKKsUFwt9w5hsqIIoErKVoENC6LoqfDlteOQ5QMDCXihlqLoxpmviUhXnNncg4zV6U9BPwlBbwa+qm4wg=="],
+
+    "@oxfmt/binding-win32-ia32-msvc": ["@oxfmt/binding-win32-ia32-msvc@0.45.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-N8yotPBX6ph0H3toF4AEpdCeVPrdcSetj+8eGiZGsrLsng3bs/Q5HPu4bbSxip5GBPx5hGbGHrZwH4+rcrjhHA=="],
+
+    "@oxfmt/binding-win32-x64-msvc": ["@oxfmt/binding-win32-x64-msvc@0.45.0", "", { "os": "win32", "cpu": "x64" }, "sha512-w5MMTRCK1dpQeRA+HHqXQXyN33DlG/N2LOYxJmaT4fJjcmZrbNnqw7SmIk7I2/a2493PPLZ+2E/Ar6t2iKVMug=="],
+
     "@oxlint/binding-android-arm-eabi": ["@oxlint/binding-android-arm-eabi@1.60.0", "", { "os": "android", "cpu": "arm" }, "sha512-YdeJKaZckDQL1qa62a1aKq/goyq48aX3yOxaaWqWb4sau4Ee4IiLbamftNLU3zbePky6QsDj6thnSSzHRBjDfA=="],
 
     "@oxlint/binding-android-arm64": ["@oxlint/binding-android-arm64@1.60.0", "", { "os": "android", "cpu": "arm64" }, "sha512-7ANS7PpXCfq84xZQ8E5WPs14gwcuPcl+/8TFNXfpSu0CQBXz3cUo2fDpHT8v8HJN+Ut02eacvMAzTnc9s6X4tw=="],
@@ -1211,6 +1248,8 @@
 
     "orval": ["orval@8.8.0", "", { "dependencies": { "@commander-js/extra-typings": "^14.0.0", "@orval/angular": "8.8.0", "@orval/axios": "8.8.0", "@orval/core": "8.8.0", "@orval/fetch": "8.8.0", "@orval/hono": "8.8.0", "@orval/mcp": "8.8.0", "@orval/mock": "8.8.0", "@orval/query": "8.8.0", "@orval/solid-start": "8.8.0", "@orval/swr": "8.8.0", "@orval/zod": "8.8.0", "@scalar/json-magic": "^0.12.4", "@scalar/openapi-parser": "^0.25.6", "@scalar/openapi-types": "0.6.1", "chokidar": "^5.0.0", "commander": "^14.0.2", "enquirer": "^2.4.1", "execa": "^9.6.1", "find-up": "8.0.0", "fs-extra": "^11.3.2", "jiti": "^2.6.1", "js-yaml": "4.1.1", "remeda": "^2.33.6", "string-argv": "^0.3.2", "tsconfck": "^3.1.6", "typedoc": "^0.28.17", "typedoc-plugin-coverage": "^4.0.2", "typedoc-plugin-markdown": "^4.10.0" }, "peerDependencies": { "prettier": ">=3.0.0" }, "optionalPeers": ["prettier"], "bin": { "orval": "dist/bin/orval.mjs" } }, "sha512-jcHcAmXCvC0g+1acsUOv722ICuXCJ0tmRl3+e0kj1lgFVsuGYame+jRZUrNtpkEZgF1RlDtmL91yFsVHv3X1eA=="],
 
+    "oxfmt": ["oxfmt@0.45.0", "", { "dependencies": { "tinypool": "2.1.0" }, "optionalDependencies": { "@oxfmt/binding-android-arm-eabi": "0.45.0", "@oxfmt/binding-android-arm64": "0.45.0", "@oxfmt/binding-darwin-arm64": "0.45.0", "@oxfmt/binding-darwin-x64": "0.45.0", "@oxfmt/binding-freebsd-x64": "0.45.0", "@oxfmt/binding-linux-arm-gnueabihf": "0.45.0", "@oxfmt/binding-linux-arm-musleabihf": "0.45.0", "@oxfmt/binding-linux-arm64-gnu": "0.45.0", "@oxfmt/binding-linux-arm64-musl": "0.45.0", "@oxfmt/binding-linux-ppc64-gnu": "0.45.0", "@oxfmt/binding-linux-riscv64-gnu": "0.45.0", "@oxfmt/binding-linux-riscv64-musl": "0.45.0", "@oxfmt/binding-linux-s390x-gnu": "0.45.0", "@oxfmt/binding-linux-x64-gnu": "0.45.0", "@oxfmt/binding-linux-x64-musl": "0.45.0", "@oxfmt/binding-openharmony-arm64": "0.45.0", "@oxfmt/binding-win32-arm64-msvc": "0.45.0", "@oxfmt/binding-win32-ia32-msvc": "0.45.0", "@oxfmt/binding-win32-x64-msvc": "0.45.0" }, "bin": { "oxfmt": "bin/oxfmt" } }, "sha512-0o/COoN9fY50bjVeM7PQsNgbhndKurBIeTIcspW033OumksjJJmIVDKjAk5HMwU/GHTxSOdGDdhJ6BRzGPmsHg=="],
+
     "oxlint": ["oxlint@1.60.0", "", { "optionalDependencies": { "@oxlint/binding-android-arm-eabi": "1.60.0", "@oxlint/binding-android-arm64": "1.60.0", "@oxlint/binding-darwin-arm64": "1.60.0", "@oxlint/binding-darwin-x64": "1.60.0", "@oxlint/binding-freebsd-x64": "1.60.0", "@oxlint/binding-linux-arm-gnueabihf": "1.60.0", "@oxlint/binding-linux-arm-musleabihf": "1.60.0", "@oxlint/binding-linux-arm64-gnu": "1.60.0", "@oxlint/binding-linux-arm64-musl": "1.60.0", "@oxlint/binding-linux-ppc64-gnu": "1.60.0", "@oxlint/binding-linux-riscv64-gnu": "1.60.0", "@oxlint/binding-linux-riscv64-musl": "1.60.0", "@oxlint/binding-linux-s390x-gnu": "1.60.0", "@oxlint/binding-linux-x64-gnu": "1.60.0", "@oxlint/binding-linux-x64-musl": "1.60.0", "@oxlint/binding-openharmony-arm64": "1.60.0", "@oxlint/binding-win32-arm64-msvc": "1.60.0", "@oxlint/binding-win32-ia32-msvc": "1.60.0", "@oxlint/binding-win32-x64-msvc": "1.60.0" }, "peerDependencies": { "oxlint-tsgolint": ">=0.18.0" }, "optionalPeers": ["oxlint-tsgolint"], "bin": { "oxlint": "bin/oxlint" } }, "sha512-tnRzTWiWJ9pg3ftRWnD0+Oqh78L6ZSwcEudvCZaER0PIqiAnNyXj5N1dPwjmNpDalkKS9m/WMLN1CTPUBPmsgw=="],
 
     "p-limit": ["p-limit@4.0.0", "", { "dependencies": { "yocto-queue": "^1.0.0" } }, "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ=="],
@@ -1255,8 +1294,6 @@
 
     "prettier": ["prettier@3.8.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw=="],
 
-    "prettier-plugin-tailwindcss": ["prettier-plugin-tailwindcss@0.7.2", "", { "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-hermes": "*", "@prettier/plugin-oxc": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-sort-imports": "*", "prettier-plugin-svelte": "*" }, "optionalPeers": ["@ianvs/prettier-plugin-sort-imports", "@prettier/plugin-hermes", "@prettier/plugin-oxc", "@prettier/plugin-pug", "@shopify/prettier-plugin-liquid", "@trivago/prettier-plugin-sort-imports", "@zackad/prettier-plugin-twig", "prettier-plugin-astro", "prettier-plugin-css-order", "prettier-plugin-jsdoc", "prettier-plugin-marko", "prettier-plugin-multiline-arrays", "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-sort-imports", "prettier-plugin-svelte"] }, "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA=="],
-
     "pretty-ms": ["pretty-ms@9.3.0", "", { "dependencies": { "parse-ms": "^4.0.0" } }, "sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ=="],
 
     "progress": ["progress@2.0.3", "", {}, "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="],
@@ -1375,6 +1412,8 @@
 
     "terser-webpack-plugin": ["terser-webpack-plugin@5.4.0", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "jest-worker": "^27.4.5", "schema-utils": "^4.3.0", "terser": "^5.31.1" }, "peerDependencies": { "webpack": "^5.1.0" } }, "sha512-Bn5vxm48flOIfkdl5CaD2+1CiUVbonWQ3KQPyP7/EuIl9Gbzq/gQFOzaMFUEgVjB1396tcK0SG8XcNJ/2kDH8g=="],
 
+    "tinypool": ["tinypool@2.1.0", "", {}, "sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw=="],
+
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
 
     "tr46": ["tr46@0.0.3", "", {}, "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="],

package.json

@@ -1,20 +1,20 @@
 {
-  "devDependencies": {
-    "@playwright/test": "^1.59.1",
-    "@tauri-apps/cli": "^2.10.1",
-    "git-cliff": "^2.12.0",
-    "prettier": "^3.8.3",
-    "prettier-plugin-tailwindcss": "^0.7.2"
-  },
+  "workspaces": [
+    "ui/"
+  ],
   "scripts": {
     "dev": "bun run scripts/dev.ts tauri dev -- --profile=release-with-debug",
     "build": "bun run scripts/dev.ts tauri build --no-bundle",
     "cargo": "bun run scripts/dev.ts cargo",
     "lint:ui": "bun run --filter ui lint",
-    "format": "prettier --write ui/ --ignore-path ui/.gitignore",
+    "format": "oxfmt ui package.json .oxfmtrc.json .vscode",
+    "format:check": "oxfmt --check ui package.json .oxfmtrc.json .vscode",
     "test:e2e": "playwright test"
   },
-  "workspaces": [
-    "ui/"
-  ]
+  "devDependencies": {
+    "@playwright/test": "^1.59.1",
+    "@tauri-apps/cli": "^2.10.1",
+    "git-cliff": "^2.12.0",
+    "oxfmt": "^0.45.0"
+  }
 }

ui/.oxlintrc.json

@@ -1,12 +1,6 @@
 {
   "$schema": "../node_modules/oxlint/configuration_schema.json",
-  "plugins": [
-    "eslint",
-    "typescript",
-    "unicorn",
-    "oxc",
-    "react"
-  ],
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "react"],
   "categories": {
     "correctness": "error"
   },
@@ -30,11 +24,5 @@
     "typescript/no-this-alias": "warn",
     "unicorn/prefer-string-starts-ends-with": "warn"
   },
-  "ignorePatterns": [
-    ".next/",
-    "out/",
-    "dist/",
-    "build/",
-    "coverage/"
-  ]
+  "ignorePatterns": [".next/", "out/", "dist/", "build/", "coverage/"]
 }

ui/app/(app)/layout.tsx

@@ -4,7 +4,7 @@ import { MenuBar } from '@/components/MenuBar'
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className='bg-background flex h-screen w-screen flex-col overflow-hidden'>
+    <div className='flex h-screen w-screen flex-col overflow-hidden bg-background'>
       <MenuBar />
       {children}
     </div>

ui/app/(app)/page.tsx

@@ -1,18 +1,14 @@
 'use client'
 
-import { Panels } from '@/components/Panels'
-import { Workspace, StatusBar } from '@/components/Canvas'
-import { Navigator } from '@/components/Navigator'
+import { Group, Panel, Separator, useDefaultLayout } from 'react-resizable-panels'
+
 import { ActivityBubble } from '@/components/ActivityBubble'
+import { AppErrorBoundary } from '@/components/AppErrorBoundary'
 import { AppInitializationSkeleton } from '@/components/AppInitializationSkeleton'
+import { Workspace, StatusBar } from '@/components/Canvas'
+import { Navigator } from '@/components/Navigator'
+import { Panels } from '@/components/Panels'
 import { useGetMeta } from '@/lib/api/system/system'
-import {
-  Group,
-  Panel,
-  Separator,
-  useDefaultLayout,
-} from 'react-resizable-panels'
-import { AppErrorBoundary } from '@/components/AppErrorBoundary'
 
 const LAYOUT_ID = 'koharu-main-layout-v2'
 
@@ -46,7 +42,7 @@ export default function Page() {
         <Panel id='left' defaultSize={180} minSize={120} maxSize={300}>
           <Navigator />
         </Panel>
-        <Separator className='bg-border/40 hover:bg-border w-1 transition-colors' />
+        <Separator className='w-1 bg-border/40 transition-colors hover:bg-border' />
         <Panel id='center' minSize={480}>
           <AppErrorBoundary>
             <div className='flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden'>
@@ -55,7 +51,7 @@ export default function Page() {
             </div>
           </AppErrorBoundary>
         </Panel>
-        <Separator className='bg-border/40 hover:bg-border w-1 transition-colors' />
+        <Separator className='w-1 bg-border/40 transition-colors hover:bg-border' />
         <Panel id='right' defaultSize={280} minSize={260} maxSize={400}>
           <AppErrorBoundary>
             <Panels />

ui/app/global-error.tsx

@@ -4,11 +4,7 @@ import * as Sentry from '@sentry/nextjs'
 import NextError from 'next/error'
 import { useEffect } from 'react'
 
-export default function GlobalError({
-  error,
-}: {
-  error: Error & { digest?: string }
-}) {
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
   useEffect(() => {
     Sentry.captureException(error)
   }, [error])

ui/app/globals.css

@@ -137,8 +137,8 @@
   body {
     @apply bg-background text-foreground select-none;
     font-family:
-      var(--font-inter), var(--font-noto-sc), var(--font-noto-tc),
-      var(--font-noto-jp), ui-sans-serif, system-ui, sans-serif;
+      var(--font-inter), var(--font-noto-sc), var(--font-noto-tc), var(--font-noto-jp),
+      ui-sans-serif, system-ui, sans-serif;
   }
   input,
   textarea {

ui/app/layout.tsx

@@ -1,10 +1,6 @@
 import type { Metadata } from 'next'
-import {
-  Inter,
-  Noto_Sans_JP,
-  Noto_Sans_SC,
-  Noto_Sans_TC,
-} from 'next/font/google'
+import { Inter, Noto_Sans_JP, Noto_Sans_SC, Noto_Sans_TC } from 'next/font/google'
+
 import './globals.css'
 import Providers from '@/app/providers'
 

ui/app/providers.tsx

@@ -1,12 +1,13 @@
 'use client'
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ThemeProvider } from 'next-themes'
 import { useEffect, type ReactNode } from 'react'
 import { I18nextProvider } from 'react-i18next'
-import { ThemeProvider } from 'next-themes'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
 import ClientOnly from '@/components/ClientOnly'
-import { UpdaterProvider } from '@/components/Updater'
 import { TooltipProvider } from '@/components/ui/tooltip'
+import { UpdaterProvider } from '@/components/Updater'
 import i18n from '@/lib/i18n'
 import { ProcessingProvider } from '@/lib/machines'
 

ui/components/ActivityBubble.tsx

@@ -1,12 +1,13 @@
 'use client'
 
+import { CircleXIcon } from 'lucide-react'
 import { type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import { CircleXIcon } from 'lucide-react'
-import { useListDownloads } from '@/lib/api/downloads/downloads'
+
 import { Button } from '@/components/ui/button'
-import { useEditorUiStore } from '@/lib/stores/editorUiStore'
+import { useListDownloads } from '@/lib/api/downloads/downloads'
 import { useProcessing } from '@/lib/machines'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 
 type TranslateFunc = ReturnType<typeof useTranslation>['t']
 
@@ -17,7 +18,7 @@ const clampProgress = (value?: number) => {
 
 function BubbleCard({ children }: { children: ReactNode }) {
   return (
-    <div className='border-border bg-card/95 rounded-2xl border p-4 shadow-[0_15px_60px_rgba(0,0,0,0.12)] backdrop-blur'>
+    <div className='rounded-2xl border border-border bg-card/95 p-4 shadow-[0_15px_60px_rgba(0,0,0,0.12)] backdrop-blur'>
       {children}
     </div>
   )
@@ -26,18 +27,18 @@ function BubbleCard({ children }: { children: ReactNode }) {
 function ProgressBar({ percent }: { percent?: number }) {
   return (
     <div className='mt-3 flex items-center gap-2'>
-      <div className='bg-muted relative h-1.5 flex-1 overflow-hidden rounded-full'>
+      <div className='relative h-1.5 flex-1 overflow-hidden rounded-full bg-muted'>
         {typeof percent === 'number' ? (
           <div
-            className='bg-primary h-full rounded-full transition-[width] duration-700 ease-out'
+            className='h-full rounded-full bg-primary transition-[width] duration-700 ease-out'
             style={{ width: `${percent}%` }}
           />
         ) : (
-          <div className='activity-progress-indeterminate from-primary/40 via-primary to-primary/40 absolute inset-0 w-1/2 rounded-full bg-linear-to-r' />
+          <div className='activity-progress-indeterminate absolute inset-0 w-1/2 rounded-full bg-linear-to-r from-primary/40 via-primary to-primary/40' />
         )}
       </div>
       {typeof percent === 'number' && (
-        <span className='text-muted-foreground w-12 text-right text-[11px] font-semibold tabular-nums'>
+        <span className='w-12 text-right text-[11px] font-semibold text-muted-foreground tabular-nums'>
           {percent}%
         </span>
       )}
@@ -57,14 +58,10 @@ function DownloadCard({
   return (
     <BubbleCard>
       <div className='flex items-start gap-3'>
-        <div className='bg-primary mt-1 h-2.5 w-2.5 animate-pulse rounded-full shadow-[0_0_0_6px_hsl(var(--primary)/0.16)]' />
+        <div className='mt-1 h-2.5 w-2.5 animate-pulse rounded-full bg-primary shadow-[0_0_0_6px_hsl(var(--primary)/0.16)]' />
         <div className='flex-1'>
-          <div className='text-foreground text-sm font-semibold'>
-            {t('download.title')}
-          </div>
-          <div className='text-muted-foreground truncate text-xs'>
-            {filename}
-          </div>
+          <div className='text-sm font-semibold text-foreground'>{t('download.title')}</div>
+          <div className='truncate text-xs text-muted-foreground'>{filename}</div>
           <ProgressBar percent={percent} />
         </div>
       </div>
@@ -82,7 +79,7 @@ function ErrorCard({
   t: TranslateFunc
 }) {
   return (
-    <div className='bg-card/95 rounded-2xl border border-red-200/80 p-4 shadow-[0_15px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-red-900/80'>
+    <div className='rounded-2xl border border-red-200/80 bg-card/95 p-4 shadow-[0_15px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-red-900/80'>
       <div className='flex items-start gap-3'>
         <div className='mt-0.5 flex h-8 w-8 items-center justify-center rounded-full bg-red-100 text-red-600 dark:bg-red-950/70 dark:text-red-400'>
           <CircleXIcon className='size-4' />
@@ -140,14 +137,9 @@ function OperationCard({
 }) {
   const ctx = machineState.context
   const hasProgressNumbers = ctx.total > 0
-  const progress = clampProgress(
-    hasProgressNumbers ? (ctx.current / ctx.total) * 100 : undefined,
-  )
+  const progress = clampProgress(hasProgressNumbers ? (ctx.current / ctx.total) * 100 : undefined)
   const displayCurrent = hasProgressNumbers
-    ? Math.min(
-        ctx.total,
-        Math.floor(ctx.current) + (ctx.current >= ctx.total ? 0 : 1),
-      )
+    ? Math.min(ctx.total, Math.floor(ctx.current) + (ctx.current >= ctx.total ? 0 : 1))
     : undefined
   const total = hasProgressNumbers ? ctx.total : undefined
 
@@ -182,27 +174,24 @@ function OperationCard({
   const subtitleParts = isPipelineAll
     ? [stepLabel]
     : [imageText, stepText ?? stepLabel].filter(Boolean)
-  const subtitle =
-    subtitleParts.filter(Boolean).join(' \u00b7 ') || t('operations.inProgress')
+  const subtitle = subtitleParts.filter(Boolean).join(' \u00b7 ') || t('operations.inProgress')
 
   const title = getOperationTitle(machineState, t)
 
   return (
     <BubbleCard>
       <div data-testid='operation-card' className='flex items-start gap-3'>
-        <div className='bg-primary mt-1 h-2.5 w-2.5 rounded-full shadow-[0_0_0_6px_hsl(var(--primary)/0.16)]' />
+        <div className='mt-1 h-2.5 w-2.5 rounded-full bg-primary shadow-[0_0_0_6px_hsl(var(--primary)/0.16)]' />
         <div className='flex-1'>
           <div className='flex items-start justify-between gap-2'>
             <div className='flex flex-col gap-1'>
-              <div className='text-foreground text-sm font-semibold'>
-                {title}
-              </div>
-              <div className='text-muted-foreground text-xs'>
+              <div className='text-sm font-semibold text-foreground'>{title}</div>
+              <div className='text-xs text-muted-foreground'>
                 {subtitle || t('operations.inProgress')}
               </div>
             </div>
             {isPipelineAll && total && typeof displayCurrent === 'number' ? (
-              <span className='bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-[11px] font-medium'>
+              <span className='rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground'>
                 {t('operations.imageProgress', {
                   current: displayCurrent,
                   total,
@@ -248,22 +237,16 @@ export function ActivityBubble() {
     .filter((d) => d.status === 'started' || d.status === 'downloading')
     .map((d) => ({
       ...d,
-      percent:
-        d.total && d.total > 0
-          ? Math.round((d.downloaded / d.total) * 100)
-          : undefined,
+      percent: d.total && d.total > 0 ? Math.round((d.downloaded / d.total) * 100) : undefined,
     }))
 
   const errorMessage = uiError?.message
 
-  if (!errorMessage && !isProcessing && activeDownloads.length === 0)
-    return null
+  if (!errorMessage && !isProcessing && activeDownloads.length === 0) return null
 
   return (
     <div className='pointer-events-auto fixed right-6 bottom-6 z-100 flex w-80 max-w-[calc(100%-1.5rem)] flex-col gap-3'>
-      {errorMessage && (
-        <ErrorCard message={errorMessage} onDismiss={clearUiError} t={t} />
-      )}
+      {errorMessage && <ErrorCard message={errorMessage} onDismiss={clearUiError} t={t} />}
       {isProcessing && (
         <OperationCard
           machineState={machineState}
@@ -273,12 +256,7 @@ export function ActivityBubble() {
         />
       )}
       {activeDownloads.map((d) => (
-        <DownloadCard
-          key={d.filename}
-          filename={d.filename}
-          percent={d.percent}
-          t={t}
-        />
+        <DownloadCard key={d.filename} filename={d.filename} percent={d.percent} t={t} />
       ))}
     </div>
   )

ui/components/AppErrorBoundary.tsx

@@ -2,22 +2,20 @@
 
 import * as Sentry from '@sentry/nextjs'
 import { useQueryClient } from '@tanstack/react-query'
-import { ErrorBoundary, type FallbackProps } from 'react-error-boundary'
 import { type ReactNode } from 'react'
+import { ErrorBoundary, type FallbackProps } from 'react-error-boundary'
+
 import { Button } from '@/components/ui/button'
 import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 
 function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   const queryClient = useQueryClient()
-  const errorMessage =
-    error instanceof Error ? error.message : 'Unexpected error'
+  const errorMessage = error instanceof Error ? error.message : 'Unexpected error'
 
   return (
-    <div className='bg-muted/40 flex h-full min-h-0 w-full flex-col items-center justify-center gap-3 p-4 text-center'>
-      <p className='text-foreground text-sm font-semibold'>
-        Something went wrong.
-      </p>
-      <p className='text-muted-foreground max-w-md text-xs'>{errorMessage}</p>
+    <div className='flex h-full min-h-0 w-full flex-col items-center justify-center gap-3 bg-muted/40 p-4 text-center'>
+      <p className='text-sm font-semibold text-foreground'>Something went wrong.</p>
+      <p className='max-w-md text-xs text-muted-foreground'>{errorMessage}</p>
       <div className='flex flex-wrap items-center justify-center gap-2'>
         <Button size='sm' variant='outline' onClick={resetErrorBoundary}>
           Retry

ui/components/AppInitializationSkeleton.tsx

@@ -2,8 +2,9 @@
 
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useListDownloads } from '@/lib/api/downloads/downloads'
+
 import { Progress } from '@/components/ui/progress'
+import { useListDownloads } from '@/lib/api/downloads/downloads'
 import type { DownloadState } from '@/lib/api/schemas'
 
 const summarizeDownloads = (downloads?: DownloadState[] | null) => {
@@ -14,15 +15,11 @@ const summarizeDownloads = (downloads?: DownloadState[] | null) => {
   for (const d of downloads) {
     total += d.total ?? 0
     downloaded += d.downloaded
-    if (d.status === 'started' || d.status === 'downloading')
-      active = d.filename
+    if (d.status === 'started' || d.status === 'downloading') active = d.filename
   }
   return {
     filename: active,
-    percent:
-      total > 0
-        ? Math.min(100, Math.round((downloaded / total) * 100))
-        : undefined,
+    percent: total > 0 ? Math.min(100, Math.round((downloaded / total) * 100)) : undefined,
   }
 }
 
@@ -35,7 +32,7 @@ export function AppInitializationSkeleton() {
   const progress = useMemo(() => summarizeDownloads(downloads), [downloads])
 
   return (
-    <div className='bg-background flex min-h-0 flex-1 items-center justify-center'>
+    <div className='flex min-h-0 flex-1 items-center justify-center bg-background'>
       <div className='flex flex-col items-center gap-6'>
         <img
           src='/icon-large.png'
@@ -45,16 +42,14 @@ export function AppInitializationSkeleton() {
         />
 
         <div className='flex flex-col items-center gap-1'>
-          <h1 className='text-foreground text-lg font-semibold tracking-widest uppercase'>
+          <h1 className='text-lg font-semibold tracking-widest text-foreground uppercase'>
             Koharu
           </h1>
-          <p className='text-muted-foreground text-xs'>
-            {t('common.initializing')}
-          </p>
+          <p className='text-xs text-muted-foreground'>{t('common.initializing')}</p>
         </div>
 
         <div className='w-56'>
-          <p className='text-muted-foreground mb-1.5 h-4 truncate text-center text-[11px]'>
+          <p className='mb-1.5 h-4 truncate text-center text-[11px] text-muted-foreground'>
             {progress?.filename ?? '\u00A0'}
           </p>
           <Progress

ui/components/Canvas.tsx

@@ -2,7 +2,4 @@
 
 export { Workspace } from '@/components/canvas/Workspace'
 export { StatusBar } from '@/components/canvas/StatusBar'
-export {
-  fitCanvasToViewport,
-  resetCanvasScale,
-} from '@/components/canvas/canvasViewport'
+export { fitCanvasToViewport, resetCanvasScale } from '@/components/canvas/canvasViewport'

ui/components/Image.tsx

@@ -2,11 +2,8 @@
 
 import type { CSSProperties } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import {
-  cancelObjectUrlRevoke,
-  convertToBlob,
-  revokeObjectUrlLater,
-} from '@/lib/util'
+
+import { cancelObjectUrlRevoke, convertToBlob, revokeObjectUrlLater } from '@/lib/util'
 
 type ImageProps = {
   data?: Uint8Array
@@ -213,10 +210,7 @@ export function Image({
           style={{
             ...baseStyle,
             opacity: nextSrc ? (crossfade ? 0 : opacity) : opacity,
-            transition:
-              nextSrc && crossfade
-                ? `opacity ${FADE_DURATION_MS}ms ease`
-                : undefined,
+            transition: nextSrc && crossfade ? `opacity ${FADE_DURATION_MS}ms ease` : undefined,
           }}
         />
       )}

ui/components/MenuBar.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
 import { MinusIcon, SquareIcon, XIcon, CopyIcon } from 'lucide-react'
-import { isTauri, openExternalUrl } from '@/lib/backend'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { isTauri, openExternalUrl } from '@/lib/backend'
+
 const isMacOS = () =>
-  typeof navigator !== 'undefined' &&
-  /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
+  typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
 
 const windowControls = {
   async close() {
@@ -27,8 +27,10 @@ const windowControls = {
     return getCurrentWindow().isMaximized()
   },
 }
-import { fitCanvasToViewport, resetCanvasScale } from '@/components/Canvas'
 import Image from 'next/image'
+
+import { fitCanvasToViewport, resetCanvasScale } from '@/components/Canvas'
+import { SettingsDialog, type TabId } from '@/components/SettingsDialog'
 import {
   Menubar,
   MenubarContent,
@@ -37,11 +39,10 @@ import {
   MenubarSeparator,
   MenubarTrigger,
 } from '@/components/ui/menubar'
-import { SettingsDialog, type TabId } from '@/components/SettingsDialog'
+import type { PipelineJobRequest } from '@/lib/api/schemas'
 import { useProcessing } from '@/lib/machines'
 import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 import { usePreferencesStore } from '@/lib/stores/preferencesStore'
-import type { PipelineJobRequest } from '@/lib/api/schemas'
 
 type MenuItem = {
   label: string
@@ -61,9 +62,7 @@ export function MenuBar() {
   const { send } = useProcessing()
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [settingsTab, setSettingsTab] = useState<TabId>('appearance')
-  const hasDocument = useEditorUiStore(
-    (state) => state.currentDocumentId !== null,
-  )
+  const hasDocument = useEditorUiStore((state) => state.currentDocumentId !== null)
 
   const buildPipelineRequest = (documentId?: string): PipelineJobRequest => {
     const { selectedTarget, selectedLanguage, renderEffect, renderStroke } =
@@ -88,26 +87,22 @@ export function MenuBar() {
   const fileMenuItems: MenuItem[] = [
     {
       label: t('menu.openFile'),
-      onSelect: () =>
-        send({ type: 'START_IMPORT', mode: 'replace', source: 'files' }),
+      onSelect: () => send({ type: 'START_IMPORT', mode: 'replace', source: 'files' }),
       testId: 'menu-file-open',
     },
     {
       label: t('menu.addFile'),
-      onSelect: () =>
-        send({ type: 'START_IMPORT', mode: 'append', source: 'files' }),
+      onSelect: () => send({ type: 'START_IMPORT', mode: 'append', source: 'files' }),
       testId: 'menu-file-add',
     },
     {
       label: t('menu.openFolder'),
-      onSelect: () =>
-        send({ type: 'START_IMPORT', mode: 'replace', source: 'folder' }),
+      onSelect: () => send({ type: 'START_IMPORT', mode: 'replace', source: 'folder' }),
       testId: 'menu-file-open-folder',
     },
     {
       label: t('menu.addFolder'),
-      onSelect: () =>
-        send({ type: 'START_IMPORT', mode: 'append', source: 'folder' }),
+      onSelect: () => send({ type: 'START_IMPORT', mode: 'append', source: 'folder' }),
       testId: 'menu-file-add-folder',
     },
     {
@@ -180,8 +175,7 @@ export function MenuBar() {
         },
         {
           label: t('menu.processAll'),
-          onSelect: () =>
-            send({ type: 'START_PIPELINE', request: buildPipelineRequest() }),
+          onSelect: () => send({ type: 'START_PIPELINE', request: buildPipelineRequest() }),
           testId: 'menu-process-all',
         },
       ],
@@ -203,19 +197,13 @@ export function MenuBar() {
   const isWindowsTauri = isTauri() && !isMacOS()
 
   return (
-    <div className='border-border bg-background text-foreground flex h-8 items-center border-b text-[13px]'>
+    <div className='flex h-8 items-center border-b border-border bg-background text-[13px] text-foreground'>
       {/* macOS traffic lights */}
       {isNativeMacOS && <MacOSControls />}
 
       {/* Logo */}
       <div className='flex h-full items-center pl-2 select-none'>
-        <Image
-          src='/icon.png'
-          alt='Koharu'
-          width={18}
-          height={18}
-          draggable={false}
-        />
+        <Image src='/icon.png' alt='Koharu' width={18} height={18} draggable={false} />
       </div>
 
       {/* Menu items */}
@@ -223,16 +211,11 @@ export function MenuBar() {
         <MenubarMenu>
           <MenubarTrigger
             data-testid='menu-file-trigger'
-            className='hover:bg-accent data-[state=open]:bg-accent rounded px-3 py-1.5 font-medium'
+            className='rounded px-3 py-1.5 font-medium hover:bg-accent data-[state=open]:bg-accent'
           >
             {t('menu.file')}
           </MenubarTrigger>
-          <MenubarContent
-            className='min-w-36'
-            align='start'
-            sideOffset={5}
-            alignOffset={-3}
-          >
+          <MenubarContent className='min-w-36' align='start' sideOffset={5} alignOffset={-3}>
             {fileMenuItems.map((item) => (
               <MenubarItem
                 key={item.label}
@@ -266,16 +249,11 @@ export function MenuBar() {
           <MenubarMenu key={label}>
             <MenubarTrigger
               data-testid={triggerTestId}
-              className='hover:bg-accent data-[state=open]:bg-accent rounded px-3 py-1.5 font-medium'
+              className='rounded px-3 py-1.5 font-medium hover:bg-accent data-[state=open]:bg-accent'
             >
               {label}
             </MenubarTrigger>
-            <MenubarContent
-              className='min-w-36'
-              align='start'
-              sideOffset={5}
-              alignOffset={-3}
-            >
+            <MenubarContent className='min-w-36' align='start' sideOffset={5} alignOffset={-3}>
               {items.map((item) => (
                 <MenubarItem
                   key={item.label}
@@ -297,15 +275,10 @@ export function MenuBar() {
           </MenubarMenu>
         ))}
         <MenubarMenu>
-          <MenubarTrigger className='hover:bg-accent data-[state=open]:bg-accent rounded px-3 py-1.5 font-medium'>
+          <MenubarTrigger className='rounded px-3 py-1.5 font-medium hover:bg-accent data-[state=open]:bg-accent'>
             {t('menu.help')}
           </MenubarTrigger>
-          <MenubarContent
-            className='min-w-36'
-            align='start'
-            sideOffset={5}
-            alignOffset={-3}
-          >
+          <MenubarContent className='min-w-36' align='start' sideOffset={5} alignOffset={-3}>
             {helpMenuItems.map((item) => (
               <MenubarItem
                 key={item.label}
@@ -337,19 +310,12 @@ export function MenuBar() {
       </Menubar>
 
       {/* Draggable region */}
-      <div
-        data-tauri-drag-region
-        className='flex h-full flex-1 items-center justify-center'
-      />
+      <div data-tauri-drag-region className='flex h-full flex-1 items-center justify-center' />
 
       {/* Window controls for Windows */}
       {isWindowsTauri && <WindowControls />}
 
-      <SettingsDialog
-        open={settingsOpen}
-        onOpenChange={setSettingsOpen}
-        defaultTab={settingsTab}
-      />
+      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} defaultTab={settingsTab} />
     </div>
   )
 }
@@ -407,7 +373,7 @@ function WindowControls() {
     <div className='flex h-full'>
       <button
         onClick={() => void windowControls.minimize()}
-        className='hover:bg-accent flex h-full w-11 items-center justify-center'
+        className='flex h-full w-11 items-center justify-center hover:bg-accent'
       >
         <MinusIcon className='size-4' />
       </button>
@@ -415,13 +381,9 @@ function WindowControls() {
         onClick={() => {
           void windowControls.toggleMaximize().then(updateMaximized)
         }}
-        className='hover:bg-accent flex h-full w-11 items-center justify-center'
+        className='flex h-full w-11 items-center justify-center hover:bg-accent'
       >
-        {maximized ? (
-          <CopyIcon className='size-3.5' />
-        ) : (
-          <SquareIcon className='size-3.5' />
-        )}
+        {maximized ? <CopyIcon className='size-3.5' /> : <SquareIcon className='size-3.5' />}
       </button>
       <button
         onClick={() => void windowControls.close()}

ui/components/Navigator.tsx

@@ -1,22 +1,18 @@
 'use client'
 
-import { useRef, useState } from 'react'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { LayoutGridIcon } from 'lucide-react'
+import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  useListDocuments,
-  getGetDocumentThumbnailUrl,
-} from '@/lib/api/documents/documents'
-import { useEditorUiStore } from '@/lib/stores/editorUiStore'
-import { Button } from '@/components/ui/button'
+
 import { PageManagerDialog } from '@/components/PageManagerDialog'
+import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { useListDocuments, getGetDocumentThumbnailUrl } from '@/lib/api/documents/documents'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 
 const THUMBNAIL_DPR =
-  typeof window !== 'undefined'
-    ? Math.min(Math.ceil(window.devicePixelRatio || 1), 3)
-    : 2
+  typeof window !== 'undefined' ? Math.min(Math.ceil(window.devicePixelRatio || 1), 3) : 2
 
 // Fixed row height: thumbnail (aspect 3:4 in ~150px width ≈ 200px) + page number + padding
 const ROW_HEIGHT = 230
@@ -26,12 +22,8 @@ export function Navigator() {
   const { data: documents = [] } = useListDocuments()
   const totalPages = documents.length
   const currentDocumentId = useEditorUiStore((state) => state.currentDocumentId)
-  const setCurrentDocumentId = useEditorUiStore(
-    (state) => state.setCurrentDocumentId,
-  )
-  const currentDocumentIndex = documents.findIndex(
-    (d) => d.id === currentDocumentId,
-  )
+  const setCurrentDocumentId = useEditorUiStore((state) => state.setCurrentDocumentId)
+  const currentDocumentIndex = documents.findIndex((d) => d.id === currentDocumentId)
   const viewportRef = useRef<HTMLDivElement | null>(null)
   const { t } = useTranslation()
   const [pageManagerOpen, setPageManagerOpen] = useState(false)
@@ -47,17 +39,15 @@ export function Navigator() {
     <div
       data-testid='navigator-panel'
       data-total-pages={totalPages}
-      className='bg-muted/50 flex h-full min-h-0 w-full flex-col border-r'
+      className='flex h-full min-h-0 w-full flex-col border-r bg-muted/50'
     >
-      <div className='border-border flex items-center justify-between border-b px-2 py-1.5'>
+      <div className='flex items-center justify-between border-b border-border px-2 py-1.5'>
         <div>
-          <p className='text-muted-foreground text-xs tracking-wide uppercase'>
+          <p className='text-xs tracking-wide text-muted-foreground uppercase'>
             {t('navigator.title')}
           </p>
-          <p className='text-foreground text-xs font-semibold'>
-            {totalPages
-              ? t('navigator.pages', { count: totalPages })
-              : t('navigator.empty')}
+          <p className='text-xs font-semibold text-foreground'>
+            {totalPages ? t('navigator.pages', { count: totalPages }) : t('navigator.empty')}
           </p>
         </div>
         {totalPages > 1 && (
@@ -74,9 +64,9 @@ export function Navigator() {
         )}
       </div>
 
-      <div className='text-muted-foreground flex items-center gap-1.5 px-2 py-1.5 text-xs'>
+      <div className='flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground'>
         {totalPages > 0 ? (
-          <span className='bg-secondary text-secondary-foreground px-2 py-0.5 font-mono text-[10px]'>
+          <span className='bg-secondary px-2 py-0.5 font-mono text-[10px] text-secondary-foreground'>
             #{currentDocumentIndex + 1}
           </span>
         ) : (
@@ -85,10 +75,7 @@ export function Navigator() {
       </div>
 
       <ScrollArea className='min-h-0 flex-1' viewportRef={viewportRef}>
-        <div
-          className='relative w-full'
-          style={{ height: virtualizer.getTotalSize() }}
-        >
+        <div className='relative w-full' style={{ height: virtualizer.getTotalSize() }}>
           {virtualizer.getVirtualItems().map((virtualRow) => {
             const doc = documents[virtualRow.index]
             return (
@@ -113,10 +100,7 @@ export function Navigator() {
         </div>
       </ScrollArea>
 
-      <PageManagerDialog
-        open={pageManagerOpen}
-        onOpenChange={setPageManagerOpen}
-      />
+      <PageManagerDialog open={pageManagerOpen} onOpenChange={setPageManagerOpen} />
     </div>
   )
 }
@@ -128,12 +112,7 @@ type PagePreviewProps = {
   onSelect: () => void
 }
 
-function PagePreview({
-  index,
-  documentId,
-  selected,
-  onSelect,
-}: PagePreviewProps) {
+function PagePreview({ index, documentId, selected, onSelect }: PagePreviewProps) {
   const src = documentId
     ? getGetDocumentThumbnailUrl(documentId, { size: 200 * THUMBNAIL_DPR })
     : undefined
@@ -145,7 +124,7 @@ function PagePreview({
       data-testid={`navigator-page-${index}`}
       data-page-index={index}
       data-selected={selected}
-      className='bg-card data-[selected=true]:border-primary flex h-full w-full flex-col gap-0.5 rounded border border-transparent p-1.5 text-left shadow-sm'
+      className='flex h-full w-full flex-col gap-0.5 rounded border border-transparent bg-card p-1.5 text-left shadow-sm data-[selected=true]:border-primary'
     >
       <div className='flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded'>
         {src ? (
@@ -156,11 +135,11 @@ function PagePreview({
             className='max-h-full max-w-full rounded object-contain'
           />
         ) : (
-          <div className='bg-muted h-full w-full rounded' />
+          <div className='h-full w-full rounded bg-muted' />
         )}
       </div>
-      <div className='text-muted-foreground flex shrink-0 items-center text-xs'>
-        <div className='text-foreground mx-auto font-semibold'>{index + 1}</div>
+      <div className='flex shrink-0 items-center text-xs text-muted-foreground'>
+        <div className='mx-auto font-semibold text-foreground'>{index + 1}</div>
       </div>
     </Button>
   )

ui/components/PageManagerDialog.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   DndContext,
   KeyboardSensor,
@@ -20,35 +19,27 @@ import {
 import { CSS } from '@dnd-kit/utilities'
 import { useQueryClient } from '@tanstack/react-query'
 import { GripVerticalIcon, Loader2Icon } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
 import {
   getGetDocumentThumbnailUrl,
   getListDocumentsQueryKey,
   useListDocuments,
   useReorderDocuments,
 } from '@/lib/api/documents/documents'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-} from '@/components/ui/dialog'
 
 const THUMBNAIL_DPR =
-  typeof window !== 'undefined'
-    ? Math.min(Math.ceil(window.devicePixelRatio || 1), 3)
-    : 2
+  typeof window !== 'undefined' ? Math.min(Math.ceil(window.devicePixelRatio || 1), 3) : 2
 
 type PageManagerDialogProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
 }
 
-export function PageManagerDialog({
-  open,
-  onOpenChange,
-}: PageManagerDialogProps) {
+export function PageManagerDialog({ open, onOpenChange }: PageManagerDialogProps) {
   const { data: documents = [] } = useListDocuments()
   const queryClient = useQueryClient()
   const { t } = useTranslation()
@@ -56,10 +47,7 @@ export function PageManagerDialog({
 
   const [orderedIds, setOrderedIds] = useState<string[]>([])
 
-  const docsById = useMemo(
-    () => Object.fromEntries(documents.map((d) => [d.id, d])),
-    [documents],
-  )
+  const docsById = useMemo(() => Object.fromEntries(documents.map((d) => [d.id, d])), [documents])
 
   useEffect(() => {
     if (open) {
@@ -116,9 +104,7 @@ export function PageManagerDialog({
         <div className='flex items-center justify-between px-6 pt-6 pb-2'>
           <div>
             <DialogTitle>{t('navigator.pageManager.title')}</DialogTitle>
-            <DialogDescription>
-              {t('navigator.pageManager.description')}
-            </DialogDescription>
+            <DialogDescription>{t('navigator.pageManager.description')}</DialogDescription>
           </div>
         </div>
 
@@ -128,28 +114,20 @@ export function PageManagerDialog({
             collisionDetection={closestCenter}
             onDragEnd={handleDragEnd}
           >
-            <SortableContext
-              items={orderedIds}
-              strategy={rectSortingStrategy}
-            >
+            <SortableContext items={orderedIds} strategy={rectSortingStrategy}>
               <div
                 data-testid='page-manager-grid'
                 className='grid grid-cols-3 gap-3 sm:grid-cols-4'
               >
                 {orderedIds.map((id, index) => (
-                  <SortablePageCard
-                    key={id}
-                    id={id}
-                    index={index}
-                    name={docsById[id]?.name}
-                  />
+                  <SortablePageCard key={id} id={id} index={index} name={docsById[id]?.name} />
                 ))}
               </div>
             </SortableContext>
           </DndContext>
         </div>
 
-        <div className='border-border flex items-center justify-end gap-2 border-t px-6 py-4'>
+        <div className='flex items-center justify-end gap-2 border-t border-border px-6 py-4'>
           <Button
             variant='outline'
             onClick={() => onOpenChange(false)}
@@ -162,9 +140,7 @@ export function PageManagerDialog({
             onClick={handleSave}
             disabled={!hasChanges || reorderMutation.isPending}
           >
-            {reorderMutation.isPending && (
-              <Loader2Icon className='mr-2 h-4 w-4 animate-spin' />
-            )}
+            {reorderMutation.isPending && <Loader2Icon className='mr-2 h-4 w-4 animate-spin' />}
             {t('common.save')}
           </Button>
         </div>
@@ -180,14 +156,9 @@ type SortablePageCardProps = {
 }
 
 function SortablePageCard({ id, index, name }: SortablePageCardProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id })
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  })
 
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -215,8 +186,8 @@ function PageCard({ id, index, name, dragging }: PageCardProps) {
   return (
     <div
       data-testid={`page-manager-card-${index}`}
-      className={`bg-card flex flex-col items-center gap-1 rounded border p-2 shadow-sm select-none ${
-        dragging ? 'ring-primary ring-2 shadow-lg' : ''
+      className={`flex flex-col items-center gap-1 rounded border bg-card p-2 shadow-sm select-none ${
+        dragging ? 'shadow-lg ring-2 ring-primary' : ''
       }`}
     >
       <div className='flex aspect-3/4 w-full items-center justify-center overflow-hidden rounded'>
@@ -228,9 +199,9 @@ function PageCard({ id, index, name, dragging }: PageCardProps) {
           className='max-h-full max-w-full rounded object-contain'
         />
       </div>
-      <div className='text-muted-foreground flex w-full items-center justify-center gap-1 text-xs'>
+      <div className='flex w-full items-center justify-center gap-1 text-xs text-muted-foreground'>
         <GripVerticalIcon className='h-3.5 w-3.5 shrink-0' />
-        <span className='text-foreground font-semibold'>{index + 1}</span>
+        <span className='font-semibold text-foreground'>{index + 1}</span>
       </div>
     </div>
   )

ui/components/Panels.tsx

@@ -1,39 +1,32 @@
 'use client'
 
-import { useTranslation } from 'react-i18next'
 import { LayersIcon, SlidersHorizontalIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
 import { LayersPanel } from '@/components/panels/LayersPanel'
 import { RenderControlsPanel } from '@/components/panels/RenderControlsPanel'
 import { TextBlocksPanel } from '@/components/panels/TextBlocksPanel'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 
 export function Panels() {
   const { t } = useTranslation()
 
   return (
-    <div className='bg-muted/50 flex h-full min-h-0 w-full flex-col border-l'>
+    <div className='flex h-full min-h-0 w-full flex-col border-l bg-muted/50'>
       <Tabs
         defaultValue='layers'
-        className='border-border h-60 shrink-0 gap-0 border-b'
+        className='h-60 shrink-0 gap-0 border-b border-border'
         data-testid='panels-settings-tabs'
       >
-        <TabsList className='bg-muted/70 m-2 mb-0 grid w-[calc(100%-1rem)] grid-cols-2'>
-          <TabsTrigger
-            value='layers'
-            data-testid='panels-tab-layers'
-            className='gap-1'
-          >
+        <TabsList className='m-2 mb-0 grid w-[calc(100%-1rem)] grid-cols-2 bg-muted/70'>
+          <TabsTrigger value='layers' data-testid='panels-tab-layers' className='gap-1'>
             <LayersIcon className='size-3.5' />
             <span className='text-xs font-semibold tracking-wide uppercase'>
               {t('layers.title')}
             </span>
           </TabsTrigger>
-          <TabsTrigger
-            value='layout'
-            data-testid='panels-tab-layout'
-            className='gap-1'
-          >
+          <TabsTrigger value='layout' data-testid='panels-tab-layout' className='gap-1'>
             <SlidersHorizontalIcon className='size-3.5' />
             <span className='text-xs font-semibold tracking-wide uppercase'>
               {t('panels.render')}
@@ -56,10 +49,7 @@ export function Panels() {
           className='min-h-0 flex-1 px-2 pb-2 data-[state=inactive]:hidden'
           data-testid='panels-layout'
         >
-          <ScrollArea
-            className='h-full'
-            viewportClassName='pr-1 [&>div]:!block'
-          >
+          <ScrollArea className='h-full' viewportClassName='pr-1 [&>div]:!block'>
             <div className='pt-1'>
               <RenderControlsPanel />
             </div>

ui/components/SettingsDialog.tsx

@@ -1,9 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { useTheme } from 'next-themes'
-import { useTranslation } from 'react-i18next'
 import {
   SunIcon,
   MoonIcon,
@@ -21,29 +18,16 @@ import {
   RotateCcwIcon,
   AlertTriangleIcon,
 } from 'lucide-react'
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogDescription,
-} from '@/components/ui/dialog'
+import { useTheme } from 'next-themes'
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import {
   Accordion,
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
 } from '@/components/ui/accordion'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -52,15 +36,29 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
-import { useUpdater, type UpdaterStatus } from '@/components/Updater'
-import { isTauri, openExternalUrl } from '@/lib/backend'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import {
-  getConfig,
-  getEngineCatalog,
-  getMeta,
-  updateConfig,
-} from '@/lib/api/system/system'
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useUpdater, type UpdaterStatus } from '@/components/Updater'
 import { getLlmCatalog, getGetLlmCatalogQueryKey } from '@/lib/api/llm/llm'
+import type {
+  UpdateConfigBody,
+  ProviderConfig,
+  LlmProviderCatalog,
+  GetEngineCatalog200,
+} from '@/lib/api/schemas'
+import { getConfig, getEngineCatalog, getMeta, updateConfig } from '@/lib/api/system/system'
+import { isTauri, openExternalUrl } from '@/lib/backend'
+import { supportedLanguages } from '@/lib/i18n'
 import {
   getPlatform,
   formatShortcut,
@@ -68,14 +66,7 @@ import {
   areShortcutsEqual,
   isModifierKey,
 } from '@/lib/shortcutUtils'
-import { supportedLanguages } from '@/lib/i18n'
 import { usePreferencesStore } from '@/lib/stores/preferencesStore'
-import type {
-  UpdateConfigBody,
-  ProviderConfig,
-  LlmProviderCatalog,
-  GetEngineCatalog200,
-} from '@/lib/api/schemas'
 
 const GITHUB_REPO = 'mayocream/koharu'
 
@@ -113,20 +104,15 @@ export function SettingsDialog({
   }, [defaultTab, open])
 
   const [appConfig, setAppConfig] = useState<UpdateConfigBody | null>(null)
-  const [providerCatalogs, setProviderCatalogs] = useState<
-    LlmProviderCatalog[]
-  >([])
+  const [providerCatalogs, setProviderCatalogs] = useState<LlmProviderCatalog[]>([])
   const [apiKeyDrafts, setApiKeyDrafts] = useState<Record<string, string>>({})
   const [dataPathDraft, setDataPathDraft] = useState('')
   const [httpConnectTimeoutDraft, setHttpConnectTimeoutDraft] = useState('')
   const [httpReadTimeoutDraft, setHttpReadTimeoutDraft] = useState('')
   const [httpMaxRetriesDraft, setHttpMaxRetriesDraft] = useState('')
-  const [storageSettingsError, setStorageSettingsError] = useState<
-    string | null
-  >(null)
+  const [storageSettingsError, setStorageSettingsError] = useState<string | null>(null)
   const [isSavingStorageSettings, setIsSavingStorageSettings] = useState(false)
-  const [engineCatalog, setEngineCatalog] =
-    useState<GetEngineCatalog200 | null>(null)
+  const [engineCatalog, setEngineCatalog] = useState<GetEngineCatalog200 | null>(null)
   const [appVersion, setAppVersion] = useState<string>()
   const updater = useUpdater()
 
@@ -142,7 +128,7 @@ export function SettingsDialog({
         setAppConfig(config)
         setProviderCatalogs(catalog.providers)
         setEngineCatalog(engines)
-      } catch { }
+      } catch {}
     })()
   }, [open])
 
@@ -174,12 +160,8 @@ export function SettingsDialog({
     setHttpConnectTimeoutDraft(
       String(appConfig.http?.connect_timeout ?? DEFAULT_HTTP_CONNECT_TIMEOUT),
     )
-    setHttpReadTimeoutDraft(
-      String(appConfig.http?.read_timeout ?? DEFAULT_HTTP_READ_TIMEOUT),
-    )
-    setHttpMaxRetriesDraft(
-      String(appConfig.http?.max_retries ?? DEFAULT_HTTP_MAX_RETRIES),
-    )
+    setHttpReadTimeoutDraft(String(appConfig.http?.read_timeout ?? DEFAULT_HTTP_READ_TIMEOUT))
+    setHttpMaxRetriesDraft(String(appConfig.http?.max_retries ?? DEFAULT_HTTP_MAX_RETRIES))
     setStorageSettingsError(null)
   }, [appConfig])
 
@@ -196,10 +178,7 @@ export function SettingsDialog({
     }
   }
 
-  const upsertProvider = (
-    id: string,
-    updater: (p: ProviderConfig) => ProviderConfig,
-  ) => {
+  const upsertProvider = (id: string, updater: (p: ProviderConfig) => ProviderConfig) => {
     if (!appConfig) return
     const providers = [...(appConfig.providers ?? [])]
     const idx = providers.findIndex((p) => p.id === id)
@@ -263,13 +242,10 @@ export function SettingsDialog({
   const storageSettingsUnchanged =
     dataPathDraft.trim() === appConfig?.data?.path &&
     httpConnectTimeoutDraft.trim() ===
-    String(
-      appConfig?.http?.connect_timeout ?? DEFAULT_HTTP_CONNECT_TIMEOUT,
-    ) &&
+      String(appConfig?.http?.connect_timeout ?? DEFAULT_HTTP_CONNECT_TIMEOUT) &&
     httpReadTimeoutDraft.trim() ===
-    String(appConfig?.http?.read_timeout ?? DEFAULT_HTTP_READ_TIMEOUT) &&
-    httpMaxRetriesDraft.trim() ===
-    String(appConfig?.http?.max_retries ?? DEFAULT_HTTP_MAX_RETRIES)
+      String(appConfig?.http?.read_timeout ?? DEFAULT_HTTP_READ_TIMEOUT) &&
+    httpMaxRetriesDraft.trim() === String(appConfig?.http?.max_retries ?? DEFAULT_HTTP_MAX_RETRIES)
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -279,8 +255,8 @@ export function SettingsDialog({
 
         <div className='flex h-full'>
           {/* Sidebar */}
-          <nav className='bg-muted/30 border-border flex w-[180px] shrink-0 flex-col gap-1 border-r p-3'>
-            <p className='text-muted-foreground mb-3 px-3 text-[10px] font-semibold tracking-widest uppercase'>
+          <nav className='flex w-[180px] shrink-0 flex-col gap-1 border-r border-border bg-muted/30 p-3'>
+            <p className='mb-3 px-3 text-[10px] font-semibold tracking-widest text-muted-foreground uppercase'>
               {t('settings.title')}
             </p>
             {TABS.map(({ id, icon: Icon, labelKey }) => (
@@ -288,7 +264,7 @@ export function SettingsDialog({
                 key={id}
                 onClick={() => setTab(id)}
                 data-active={tab === id}
-                className='text-muted-foreground hover:text-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition'
+                className='flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-muted-foreground transition hover:text-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground'
               >
                 <Icon className='size-4 shrink-0' />
                 {t(labelKey)}
@@ -322,12 +298,8 @@ export function SettingsDialog({
                       base_url: v || null,
                     }))
                   }
-                  onBaseUrlBlur={() =>
-                    appConfig && void persistConfig(appConfig)
-                  }
-                  onApiKeyChange={(id, v) =>
-                    setApiKeyDrafts((c) => ({ ...c, [id]: v }))
-                  }
+                  onBaseUrlBlur={() => appConfig && void persistConfig(appConfig)}
+                  onApiKeyChange={(id, v) => setApiKeyDrafts((c) => ({ ...c, [id]: v }))}
                   onSaveKey={(id) => {
                     const key = apiKeyDrafts[id]?.trim()
                     if (!key || !appConfig) return
@@ -349,8 +321,7 @@ export function SettingsDialog({
                     if (!appConfig) return
                     const providers = [...(appConfig.providers ?? [])]
                     const idx = providers.findIndex((p) => p.id === id)
-                    if (idx >= 0)
-                      providers[idx] = { ...providers[idx], api_key: null }
+                    if (idx >= 0) providers[idx] = { ...providers[idx], api_key: null }
                     void persistConfig({ ...appConfig, providers }).then(() =>
                       setApiKeyDrafts((c) => {
                         const n = { ...c }
@@ -428,7 +399,7 @@ function AppearancePane() {
               key={value}
               onClick={() => setTheme(value)}
               data-active={theme === value}
-              className='border-border bg-card text-muted-foreground hover:border-foreground/30 data-[active=true]:border-primary data-[active=true]:text-foreground flex flex-col items-center gap-2 rounded-xl border px-4 py-4 transition'
+              className='flex flex-col items-center gap-2 rounded-xl border border-border bg-card px-4 py-4 text-muted-foreground transition hover:border-foreground/30 data-[active=true]:border-primary data-[active=true]:text-foreground'
             >
               <Icon className='size-5' />
               <span className='text-xs font-medium'>{t(labelKey)}</span>
@@ -438,10 +409,7 @@ function AppearancePane() {
       </Section>
 
       <Section title={t('settings.language')}>
-        <Select
-          value={i18n.language}
-          onValueChange={(v) => i18n.changeLanguage(v)}
-        >
+        <Select value={i18n.language} onValueChange={(v) => i18n.changeLanguage(v)}>
           <SelectTrigger className='w-full'>
             <SelectValue />
           </SelectTrigger>
@@ -512,9 +480,7 @@ function EnginesPane({
 
   return (
     <div className='space-y-4'>
-      <p className='text-muted-foreground text-xs'>
-        {t('settings.enginesDescription')}
-      </p>
+      <p className='text-xs text-muted-foreground'>{t('settings.enginesDescription')}</p>
       {sections.map(({ label, key, engines }) => (
         <div key={key} className='space-y-1.5'>
           <Label className='text-xs'>{label}</Label>
@@ -564,17 +530,14 @@ function ProvidersPane({
 
   if (!catalogs.length)
     return (
-      <p className='text-muted-foreground py-12 text-center text-sm'>
+      <p className='py-12 text-center text-sm text-muted-foreground'>
         {t('settings.loadingProviders')}
       </p>
     )
 
   return (
     <div className='space-y-6'>
-      <Section
-        title={t('settings.apiKeys')}
-        description={t('settings.providersDescription')}
-      >
+      <Section title={t('settings.apiKeys')} description={t('settings.providersDescription')}>
         <Accordion type='multiple' className='-mx-1'>
           {catalogs.map((provider) => {
             const cfg = config?.providers?.find((p) => p.id === provider.id)
@@ -590,37 +553,25 @@ function ProvidersPane({
                     : 'bg-muted-foreground'
 
             return (
-              <AccordionItem
-                key={provider.id}
-                value={provider.id}
-                className='border-border'
-              >
+              <AccordionItem key={provider.id} value={provider.id} className='border-border'>
                 <AccordionTrigger className='px-1 py-3 hover:no-underline'>
                   <div className='flex items-center gap-2.5'>
-                    <span
-                      className={`size-2 shrink-0 rounded-full ${statusColor}`}
-                    />
+                    <span className={`size-2 shrink-0 rounded-full ${statusColor}`} />
                     <span className='text-sm font-medium'>{provider.name}</span>
                   </div>
                 </AccordionTrigger>
                 <AccordionContent className='space-y-4 px-1 pt-1 pb-4'>
                   {provider.error && (
-                    <p className='text-muted-foreground text-xs'>
-                      {provider.error}
-                    </p>
+                    <p className='text-xs text-muted-foreground'>{provider.error}</p>
                   )}
 
                   {provider.requiresBaseUrl && (
                     <div className='space-y-1.5'>
-                      <Label className='text-xs'>
-                        {t('settings.localLlmBaseUrl')}
-                      </Label>
+                      <Label className='text-xs'>{t('settings.localLlmBaseUrl')}</Label>
                       <Input
                         type='url'
                         value={cfg?.base_url ?? ''}
-                        onChange={(e) =>
-                          onBaseUrlChange(provider.id, e.target.value)
-                        }
+                        onChange={(e) => onBaseUrlChange(provider.id, e.target.value)}
                         onBlur={onBaseUrlBlur}
                         placeholder='https://api.example.com/v1'
                       />
@@ -633,12 +584,9 @@ function ProvidersPane({
                       <Input
                         type='password'
                         value={draft}
-                        onChange={(e) =>
-                          onApiKeyChange(provider.id, e.target.value)
-                        }
+                        onChange={(e) => onApiKeyChange(provider.id, e.target.value)}
                         onKeyDown={(e) => {
-                          if (e.key === 'Enter' && hasDraft)
-                            onSaveKey(provider.id)
+                          if (e.key === 'Enter' && hasDraft) onSaveKey(provider.id)
                         }}
                         placeholder={
                           cfg?.api_key === '[REDACTED]'
@@ -648,10 +596,7 @@ function ProvidersPane({
                         className='[&::-ms-reveal]:hidden'
                       />
                       {hasDraft ? (
-                        <Button
-                          size='sm'
-                          onClick={() => onSaveKey(provider.id)}
-                        >
+                        <Button size='sm' onClick={() => onSaveKey(provider.id)}>
                           {t('settings.apiKeySave')}
                         </Button>
                       ) : cfg?.api_key === '[REDACTED]' ? (
@@ -697,9 +642,7 @@ function KeybindsPane() {
   const { t } = useTranslation()
   const shortcuts = usePreferencesStore((state) => state.shortcuts)
   const setShortcuts = usePreferencesStore((state) => state.setShortcuts)
-  const resetShortcutsStore = usePreferencesStore(
-    (state) => state.resetShortcuts,
-  )
+  const resetShortcutsStore = usePreferencesStore((state) => state.resetShortcuts)
   const [pendingShortcuts, setPendingShortcuts] = useState(shortcuts)
   const [recordingKey, setRecordingKey] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
@@ -821,20 +764,14 @@ function KeybindsPane() {
   return (
     <div className='flex h-full flex-col gap-6'>
       <div className='grow space-y-6 overflow-y-auto pr-2'>
-        <Section
-          title={t('settings.keybinds')}
-          description={t('settings.keybindsDescription')}
-        >
-          <div className='bg-card border-border divide-border divide-y overflow-hidden rounded-xl border'>
+        <Section title={t('settings.keybinds')} description={t('settings.keybindsDescription')}>
+          <div className='divide-y divide-border overflow-hidden rounded-xl border border-border bg-card'>
             {SHORTCUT_ITEMS.map((item) => {
               const currentVal = pendingShortcuts[item.key]
               const hasConflict = (conflictCounts.get(currentVal) || 0) > 1
 
               return (
-                <div
-                  key={item.key}
-                  className='flex items-center justify-between px-4 py-3'
-                >
+                <div key={item.key} className='flex items-center justify-between px-4 py-3'>
                   <div className='flex items-center gap-2'>
                     <span className='text-sm'>{t(item.labelKey)}</span>
                     {hasConflict && (
@@ -863,11 +800,11 @@ function KeybindsPane() {
         </Section>
       </div>
 
-      <div className='border-border flex items-center justify-between border-t pt-4'>
+      <div className='flex items-center justify-between border-t border-border pt-4'>
         <Button
           variant='ghost'
           size='sm'
-          className='text-muted-foreground hover:text-foreground gap-2'
+          className='gap-2 text-muted-foreground hover:text-foreground'
           onClick={handleReset}
         >
           <RotateCcwIcon className='size-4' />
@@ -898,9 +835,7 @@ function KeybindsPane() {
       <AlertDialog open={resetConfirmOpen} onOpenChange={setResetConfirmOpen}>
         <AlertDialogContent>
           <AlertDialogTitle>{t('settings.shortcutReset')}</AlertDialogTitle>
-          <AlertDialogDescription>
-            {t('settings.shortcutResetDescription')}
-          </AlertDialogDescription>
+          <AlertDialogDescription>{t('settings.shortcutResetDescription')}</AlertDialogDescription>
           <div className='flex justify-end gap-2'>
             <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmReset}>
@@ -947,27 +882,18 @@ function StoragePane({
 
   return (
     <>
-      <Section
-        title={t('settings.runtime')}
-        description={t('settings.runtimeDescription')}
-      >
+      <Section title={t('settings.runtime')} description={t('settings.runtimeDescription')}>
         <div className='space-y-1.5'>
           <Label className='text-xs'>{t('settings.dataPath')}</Label>
-          <Input
-            type='text'
-            value={dataPath}
-            onChange={(e) => onPathChange(e.target.value)}
-          />
-          <p className='text-muted-foreground text-xs leading-relaxed'>
+          <Input type='text' value={dataPath} onChange={(e) => onPathChange(e.target.value)} />
+          <p className='text-xs leading-relaxed text-muted-foreground'>
             {t('settings.dataPathDescription')}
           </p>
         </div>
 
         <div className='grid gap-4 md:grid-cols-2'>
           <div className='space-y-1.5'>
-            <Label className='text-xs'>
-              {t('settings.httpConnectTimeout')}
-            </Label>
+            <Label className='text-xs'>{t('settings.httpConnectTimeout')}</Label>
             <Input
               type='number'
               min='1'
@@ -976,7 +902,7 @@ function StoragePane({
               value={httpConnectTimeout}
               onChange={(e) => onHttpConnectTimeoutChange(e.target.value)}
             />
-            <p className='text-muted-foreground text-xs leading-relaxed'>
+            <p className='text-xs leading-relaxed text-muted-foreground'>
               {t('settings.httpConnectTimeoutDescription')}
             </p>
           </div>
@@ -991,7 +917,7 @@ function StoragePane({
               value={httpReadTimeout}
               onChange={(e) => onHttpReadTimeoutChange(e.target.value)}
             />
-            <p className='text-muted-foreground text-xs leading-relaxed'>
+            <p className='text-xs leading-relaxed text-muted-foreground'>
               {t('settings.httpReadTimeoutDescription')}
             </p>
           </div>
@@ -1007,20 +933,18 @@ function StoragePane({
             value={httpMaxRetries}
             onChange={(e) => onHttpMaxRetriesChange(e.target.value)}
           />
-          <p className='text-muted-foreground text-xs leading-relaxed'>
+          <p className='text-xs leading-relaxed text-muted-foreground'>
             {t('settings.httpMaxRetriesDescription')}
           </p>
         </div>
 
-        {error && <p className='text-destructive text-xs'>{error}</p>}
+        {error && <p className='text-xs text-destructive'>{error}</p>}
         <div className='flex justify-end pt-1'>
           <Button
             onClick={() => setConfirmOpen(true)}
             disabled={!dataPath.trim() || saving || unchanged}
           >
-            {saving
-              ? t('settings.restartApplying')
-              : t('settings.restartApply')}
+            {saving ? t('settings.restartApplying') : t('settings.restartApply')}
           </Button>
         </div>
       </Section>
@@ -1067,30 +991,19 @@ function AboutPane({
 
   return (
     <div className='flex h-full flex-col items-center justify-center gap-5 py-8'>
-      <img
-        src='/icon-large.png'
-        alt='Koharu'
-        className='size-20'
-        draggable={false}
-      />
+      <img src='/icon-large.png' alt='Koharu' className='size-20' draggable={false} />
       <div className='text-center'>
-        <h2 className='text-foreground text-lg font-bold tracking-wide'>
-          Koharu
-        </h2>
-        <p className='text-muted-foreground mt-1 text-sm'>
-          {t('settings.aboutTagline')}
-        </p>
+        <h2 className='text-lg font-bold tracking-wide text-foreground'>Koharu</h2>
+        <p className='mt-1 text-sm text-muted-foreground'>{t('settings.aboutTagline')}</p>
       </div>
 
-      <div className='bg-card border-border w-full max-w-sm rounded-xl border p-4'>
+      <div className='w-full max-w-sm rounded-xl border border-border bg-card p-4'>
         <div className='space-y-3 text-sm'>
           <InfoRow label={t('settings.aboutVersion')}>
             <div className='flex flex-col items-end gap-0.5'>
-              <span className='font-mono text-xs font-medium'>
-                {version || '...'}
-              </span>
+              <span className='font-mono text-xs font-medium'>{version || '...'}</span>
               {status === 'loading' && (
-                <LoaderIcon className='text-muted-foreground size-3.5 animate-spin' />
+                <LoaderIcon className='size-3.5 animate-spin text-muted-foreground' />
               )}
               {status === 'latest' && (
                 <span className='flex items-center gap-1 text-xs text-green-500'>
@@ -1120,9 +1033,7 @@ function AboutPane({
             <Button
               variant='link'
               size='xs'
-              onClick={() =>
-                void openExternalUrl('https://github.com/mayocream')
-              }
+              onClick={() => void openExternalUrl('https://github.com/mayocream')}
             >
               Mayo
             </Button>
@@ -1131,9 +1042,7 @@ function AboutPane({
             <Button
               variant='link'
               size='xs'
-              onClick={() =>
-                void openExternalUrl(`https://github.com/${GITHUB_REPO}`)
-              }
+              onClick={() => void openExternalUrl(`https://github.com/${GITHUB_REPO}`)}
             >
               GitHub
             </Button>
@@ -1158,11 +1067,9 @@ function Section({
   return (
     <div className='space-y-3'>
       <div>
-        <h3 className='text-foreground text-sm font-semibold'>{title}</h3>
+        <h3 className='text-sm font-semibold text-foreground'>{title}</h3>
         {description && (
-          <p className='text-muted-foreground mt-0.5 text-xs leading-relaxed'>
-            {description}
-          </p>
+          <p className='mt-0.5 text-xs leading-relaxed text-muted-foreground'>{description}</p>
         )}
       </div>
       {children}

ui/components/Updater.tsx

@@ -1,24 +1,14 @@
 'use client'
 
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-  type ReactNode,
-} from 'react'
 import type { Update } from '@tauri-apps/plugin-updater'
+import { Download, RefreshCw, AlertCircle } from 'lucide-react'
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { Trans, useTranslation } from 'react-i18next'
-import { Download, RefreshCw, AlertCircle } from 'lucide-react'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-} from '@/components/ui/dialog'
+
 import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
 import { Progress } from '@/components/ui/progress'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
@@ -197,19 +187,17 @@ function PromptView({
   return (
     <>
       <header className='flex items-center gap-3 px-6 pt-6 pb-4'>
-        <div className='bg-primary/10 text-primary flex size-10 items-center justify-center rounded-full'>
+        <div className='flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary'>
           <Download className='size-5' />
         </div>
         <div className='flex flex-col gap-0.5'>
-          <DialogTitle className='text-base'>
-            {t('updater.available.title')}
-          </DialogTitle>
+          <DialogTitle className='text-base'>{t('updater.available.title')}</DialogTitle>
           <DialogDescription>
             <Trans
               i18nKey='updater.available.description'
               values={{ version: update.version }}
               components={{
-                strong: <span className='text-foreground font-medium' />,
+                strong: <span className='font-medium text-foreground' />,
               }}
             />
           </DialogDescription>
@@ -218,16 +206,12 @@ function PromptView({
       <Separator />
       {update.body ? (
         <ScrollArea className='h-64'>
-          <div className='prose prose-sm dark:prose-invert [&_a]:text-primary [&_h3]:text-muted-foreground max-w-none px-6 py-4 [&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-sm [&_h2]:font-semibold [&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-xs [&_h3]:font-semibold [&_h3]:tracking-wide [&_h3]:uppercase [&_li]:my-0.5 [&_p]:my-1.5 [&_ul]:my-1.5 [&_ul]:list-disc [&_ul]:pl-5'>
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>
-              {update.body}
-            </ReactMarkdown>
+          <div className='prose prose-sm dark:prose-invert max-w-none px-6 py-4 [&_a]:text-primary [&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-sm [&_h2]:font-semibold [&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-xs [&_h3]:font-semibold [&_h3]:tracking-wide [&_h3]:text-muted-foreground [&_h3]:uppercase [&_li]:my-0.5 [&_p]:my-1.5 [&_ul]:my-1.5 [&_ul]:list-disc [&_ul]:pl-5'>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{update.body}</ReactMarkdown>
           </div>
         </ScrollArea>
       ) : (
-        <div className='text-muted-foreground px-6 py-6 text-sm'>
-          {t('updater.noNotes')}
-        </div>
+        <div className='px-6 py-6 text-sm text-muted-foreground'>{t('updater.noNotes')}</div>
       )}
       <Separator />
       <footer className='flex justify-end gap-2 px-6 py-4'>
@@ -258,21 +242,17 @@ function DownloadingView({
   return (
     <div className='flex flex-col gap-4 p-6'>
       <div className='flex items-center gap-3'>
-        <div className='bg-primary/10 text-primary flex size-10 items-center justify-center rounded-full'>
+        <div className='flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary'>
           <Download className='size-5 animate-pulse' />
         </div>
         <div className='flex flex-col gap-0.5'>
-          <DialogTitle className='text-base'>
-            {t('updater.downloading.title')}
-          </DialogTitle>
-          <DialogDescription>
-            {t('updater.downloading.subtitle', { version })}
-          </DialogDescription>
+          <DialogTitle className='text-base'>{t('updater.downloading.title')}</DialogTitle>
+          <DialogDescription>{t('updater.downloading.subtitle', { version })}</DialogDescription>
         </div>
       </div>
       <div className='space-y-2'>
         <Progress value={percent ?? undefined} />
-        <div className='text-muted-foreground flex justify-between text-xs tabular-nums'>
+        <div className='flex justify-between text-xs text-muted-foreground tabular-nums'>
           <span>
             {formatBytes(downloaded)}
             {total ? ` / ${formatBytes(total)}` : ''}
@@ -297,13 +277,11 @@ function ErrorView({
   return (
     <>
       <header className='flex items-center gap-3 px-6 pt-6 pb-4'>
-        <div className='bg-destructive/10 text-destructive flex size-10 items-center justify-center rounded-full'>
+        <div className='flex size-10 items-center justify-center rounded-full bg-destructive/10 text-destructive'>
           <AlertCircle className='size-5' />
         </div>
         <div className='flex flex-col gap-0.5'>
-          <DialogTitle className='text-base'>
-            {t('updater.error.title')}
-          </DialogTitle>
+          <DialogTitle className='text-base'>{t('updater.error.title')}</DialogTitle>
           <DialogDescription className='break-words'>
             {t('updater.error.description')}
           </DialogDescription>
@@ -311,7 +289,7 @@ function ErrorView({
       </header>
       <Separator />
       <ScrollArea className='max-h-40'>
-        <pre className='text-muted-foreground px-6 py-4 text-xs break-words whitespace-pre-wrap'>
+        <pre className='px-6 py-4 text-xs break-words whitespace-pre-wrap text-muted-foreground'>
           {message}
         </pre>
       </ScrollArea>

ui/components/canvas/CanvasToolbar.tsx

@@ -1,9 +1,5 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { motion } from 'motion/react'
 import {
   ScanIcon,
   ScanTextIcon,
@@ -12,10 +8,13 @@ import {
   LoaderCircleIcon,
   LanguagesIcon,
 } from 'lucide-react'
-import { Separator } from '@/components/ui/separator'
+import { motion } from 'motion/react'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import {
   Select,
   SelectContent,
@@ -23,21 +22,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { useEditorUiStore } from '@/lib/stores/editorUiStore'
-import { usePreferencesStore } from '@/lib/stores/preferencesStore'
+import { Separator } from '@/components/ui/separator'
+import { Textarea } from '@/components/ui/textarea'
 import { useGetLlm, useGetLlmCatalog } from '@/lib/api/llm/llm'
-import type {
-  LlmCatalog,
-  LlmCatalogModel,
-  LlmProviderCatalog,
-} from '@/lib/api/schemas'
-import { useProcessing } from '@/lib/machines'
+import type { LlmCatalog, LlmCatalogModel, LlmProviderCatalog } from '@/lib/api/schemas'
 import { llmTargetKey, sameLlmTarget } from '@/lib/llmTargets'
+import { useProcessing } from '@/lib/machines'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
+import { usePreferencesStore } from '@/lib/stores/preferencesStore'
 
 type SelectableLlmModel = {
   model: LlmCatalogModel
@@ -48,15 +40,10 @@ const flattenCatalogModels = (catalog?: LlmCatalog): SelectableLlmModel[] => [
   ...(catalog?.localModels ?? []).map((model) => ({ model })),
   ...(catalog?.providers ?? [])
     .filter((provider) => provider.status === 'ready')
-    .flatMap((provider) =>
-      provider.models.map((model) => ({ model, provider })),
-    ),
+    .flatMap((provider) => provider.models.map((model) => ({ model, provider }))),
 ]
 
-const filterCatalogModels = (
-  models: SelectableLlmModel[],
-  query: string,
-): SelectableLlmModel[] => {
+const filterCatalogModels = (models: SelectableLlmModel[], query: string): SelectableLlmModel[] => {
   const normalized = query.trim().toLowerCase()
   if (!normalized) return models
 
@@ -68,15 +55,13 @@ const filterCatalogModels = (
       provider?.name,
       provider?.id,
     ]
-    return candidates.some((candidate) =>
-      candidate?.toLowerCase().includes(normalized),
-    )
+    return candidates.some((candidate) => candidate?.toLowerCase().includes(normalized))
   })
 }
 
 export function CanvasToolbar() {
   return (
-    <div className='border-border/60 bg-card text-foreground flex items-center gap-2 border-b px-3 py-2 text-xs'>
+    <div className='flex items-center gap-2 border-b border-border/60 bg-card px-3 py-2 text-xs text-foreground'>
       <WorkflowButtons />
       <div className='flex-1' />
       <LlmStatusPopover />
@@ -88,9 +73,7 @@ function WorkflowButtons() {
   const { send, isProcessing, state } = useProcessing()
   const { data: llmState } = useGetLlm()
   const llmReady = llmState?.status === 'ready'
-  const hasDocument = useEditorUiStore(
-    (state) => state.currentDocumentId !== null,
-  )
+  const hasDocument = useEditorUiStore((state) => state.currentDocumentId !== null)
   const { t } = useTranslation()
 
   const isDetecting = state.matches('detecting')
@@ -110,9 +93,7 @@ function WorkflowButtons() {
       <Button
         variant='ghost'
         size='xs'
-        onClick={() =>
-          send({ type: 'START_DETECT', documentId: requireDocumentId() })
-        }
+        onClick={() => send({ type: 'START_DETECT', documentId: requireDocumentId() })}
         data-testid='toolbar-detect'
         disabled={!hasDocument || isDetecting || isProcessing}
       >
@@ -129,9 +110,7 @@ function WorkflowButtons() {
       <Button
         variant='ghost'
         size='xs'
-        onClick={() =>
-          send({ type: 'START_RECOGNIZE', documentId: requireDocumentId() })
-        }
+        onClick={() => send({ type: 'START_RECOGNIZE', documentId: requireDocumentId() })}
         data-testid='toolbar-ocr'
         disabled={!hasDocument || isOcr || isProcessing}
       >
@@ -177,9 +156,7 @@ function WorkflowButtons() {
       <Button
         variant='ghost'
         size='xs'
-        onClick={() =>
-          send({ type: 'START_INPAINT', documentId: requireDocumentId() })
-        }
+        onClick={() => send({ type: 'START_INPAINT', documentId: requireDocumentId() })}
         data-testid='toolbar-inpaint'
         disabled={!hasDocument || isInpainting || isProcessing}
       >
@@ -226,20 +203,11 @@ function LlmStatusPopover() {
   const { data: llmCatalog } = useGetLlmCatalog()
   const [popoverOpen, setPopoverOpen] = useState(false)
   const [modelSearchQuery, setModelSearchQuery] = useState('')
-  const llmModels = useMemo(
-    () => flattenCatalogModels(llmCatalog),
-    [llmCatalog],
-  )
+  const llmModels = useMemo(() => flattenCatalogModels(llmCatalog), [llmCatalog])
   const selectedTarget = useEditorUiStore((state) => state.selectedTarget)
-  const customSystemPrompt = usePreferencesStore(
-    (state) => state.customSystemPrompt,
-  )
-  const setCustomSystemPrompt = usePreferencesStore(
-    (state) => state.setCustomSystemPrompt,
-  )
-  const llmSelectedLanguage = useEditorUiStore(
-    (state) => state.selectedLanguage,
-  )
+  const customSystemPrompt = usePreferencesStore((state) => state.customSystemPrompt)
+  const setCustomSystemPrompt = usePreferencesStore((state) => state.setCustomSystemPrompt)
+  const llmSelectedLanguage = useEditorUiStore((state) => state.selectedLanguage)
   const { data: llmState } = useGetLlm()
   const llmReady = llmState?.status === 'ready'
   const { send, state } = useProcessing()
@@ -249,27 +217,19 @@ function LlmStatusPopover() {
   const { t } = useTranslation()
 
   const selectedModel = useMemo(
-    () =>
-      llmModels.find(({ model }) =>
-        sameLlmTarget(model.target, selectedTarget),
-      ),
+    () => llmModels.find(({ model }) => sameLlmTarget(model.target, selectedTarget)),
     [llmModels, selectedTarget],
   )
   const filteredLlmModels = useMemo(
     () => filterCatalogModels(llmModels, modelSearchQuery),
     [llmModels, modelSearchQuery],
   )
-  const selectedTargetKey = selectedTarget
-    ? llmTargetKey(selectedTarget)
-    : undefined
+  const selectedTargetKey = selectedTarget ? llmTargetKey(selectedTarget) : undefined
   const selectedModelLanguages = selectedModel?.model.languages ?? []
-  const selectedIsLoaded =
-    llmReady && sameLlmTarget(llmState?.target, selectedTarget)
+  const selectedIsLoaded = llmReady && sameLlmTarget(llmState?.target, selectedTarget)
 
   const handleSetSelectedModel = (key: string) => {
-    const nextSelection = llmModels.find(
-      ({ model }) => llmTargetKey(model.target) === key,
-    )
+    const nextSelection = llmModels.find(({ model }) => llmTargetKey(model.target) === key)
     if (!nextSelection) return
 
     const nextLanguages = nextSelection.model.languages
@@ -310,9 +270,7 @@ function LlmStatusPopover() {
   useEffect(() => {
     if (llmModels.length === 0) return
 
-    const hasCurrent = llmModels.some(({ model }) =>
-      sameLlmTarget(model.target, selectedTarget),
-    )
+    const hasCurrent = llmModels.some(({ model }) => sameLlmTarget(model.target, selectedTarget))
     const nextModel = hasCurrent ? selectedModel?.model : llmModels[0]?.model
     if (!nextModel) return
 
@@ -354,23 +312,15 @@ function LlmStatusPopover() {
               ? 'bg-rose-400 text-white ring-1 ring-rose-400/30'
               : busy
                 ? 'bg-amber-400 text-white ring-1 ring-amber-400/30'
-                : 'bg-muted text-muted-foreground ring-border/50 ring-1'
+                : 'bg-muted text-muted-foreground ring-1 ring-border/50'
           }`}
         >
           <motion.span
             className={`size-1.5 rounded-full ${
-              llmReady
-                ? 'bg-white'
-                : busy
-                  ? 'bg-white'
-                  : 'bg-muted-foreground/40'
+              llmReady ? 'bg-white' : busy ? 'bg-white' : 'bg-muted-foreground/40'
             }`}
             animate={
-              llmReady
-                ? { opacity: [1, 0.5, 1] }
-                : busy
-                  ? { opacity: [1, 0.4, 1] }
-                  : { opacity: 1 }
+              llmReady ? { opacity: [1, 0.5, 1] } : busy ? { opacity: [1, 0.4, 1] } : { opacity: 1 }
             }
             transition={
               llmReady || busy
@@ -385,14 +335,10 @@ function LlmStatusPopover() {
           LLM
         </button>
       </PopoverTrigger>
-      <PopoverContent
-        align='end'
-        className='w-[280px] p-0'
-        data-testid='llm-popover'
-      >
+      <PopoverContent align='end' className='w-[280px] p-0' data-testid='llm-popover'>
         {/* Model + load */}
         <div className='flex flex-col gap-1 px-3 pt-3 pb-2.5'>
-          <span className='text-muted-foreground text-[10px] font-medium uppercase'>
+          <span className='text-[10px] font-medium text-muted-foreground uppercase'>
             {t('llm.model', { defaultValue: 'Model' })}
           </span>
           <Input
@@ -405,14 +351,8 @@ function LlmStatusPopover() {
             className='h-7 text-xs'
           />
           <div className='flex items-center gap-1.5'>
-            <Select
-              value={selectedTargetKey}
-              onValueChange={handleSetSelectedModel}
-            >
-              <SelectTrigger
-                data-testid='llm-model-select'
-                className='min-w-0 flex-1'
-              >
+            <Select value={selectedTargetKey} onValueChange={handleSetSelectedModel}>
+              <SelectTrigger data-testid='llm-model-select' className='min-w-0 flex-1'>
                 <SelectValue placeholder={t('llm.selectPlaceholder')} />
               </SelectTrigger>
               <SelectContent position='popper'>
@@ -425,7 +365,7 @@ function LlmStatusPopover() {
                     >
                       <span className='flex items-center gap-1.5'>
                         {provider ? (
-                          <span className='bg-primary/10 text-primary rounded px-1 py-0.5 text-[9px] leading-none font-semibold uppercase'>
+                          <span className='rounded bg-primary/10 px-1 py-0.5 text-[9px] leading-none font-semibold text-primary uppercase'>
                             {provider.name}
                           </span>
                         ) : null}
@@ -436,7 +376,7 @@ function LlmStatusPopover() {
                 ) : (
                   <div
                     data-testid='llm-model-empty'
-                    className='text-muted-foreground px-2 py-2 text-xs'
+                    className='px-2 py-2 text-xs text-muted-foreground'
                   >
                     {t('llm.modelSearchNoResults', {
                       defaultValue: 'No models found',
@@ -455,12 +395,8 @@ function LlmStatusPopover() {
               disabled={!selectedTarget || busy}
               className='h-6 shrink-0 gap-1 px-2 text-[11px]'
             >
-              {busy ? (
-                <LoaderCircleIcon className='size-3 animate-spin' />
-              ) : null}
-              {selectedIsLoaded || llmUnloading
-                ? t('llm.unload')
-                : t('llm.load')}
+              {busy ? <LoaderCircleIcon className='size-3 animate-spin' /> : null}
+              {selectedIsLoaded || llmUnloading ? t('llm.unload') : t('llm.load')}
             </Button>
           </div>
         </div>
@@ -471,7 +407,7 @@ function LlmStatusPopover() {
 
         {/* Language + prompt */}
         <div className='flex flex-col gap-1 px-3 pt-2.5 pb-3'>
-          <span className='text-muted-foreground text-[10px] font-medium uppercase'>
+          <span className='text-[10px] font-medium text-muted-foreground uppercase'>
             {t('llm.translationSettings', {
               defaultValue: 'Translation',
             })}
@@ -483,10 +419,7 @@ function LlmStatusPopover() {
                 value={llmSelectedLanguage ?? selectedModelLanguages[0]}
                 onValueChange={handleSetSelectedLanguage}
               >
-                <SelectTrigger
-                  data-testid='llm-language-select'
-                  className='w-full'
-                >
+                <SelectTrigger data-testid='llm-language-select' className='w-full'>
                   <SelectValue placeholder={t('llm.languagePlaceholder')} />
                 </SelectTrigger>
                 <SelectContent position='popper'>
@@ -506,9 +439,7 @@ function LlmStatusPopover() {
             <Textarea
               data-testid='llm-system-prompt'
               value={customSystemPrompt ?? ''}
-              onChange={(e) =>
-                setCustomSystemPrompt(e.target.value || undefined)
-              }
+              onChange={(e) => setCustomSystemPrompt(e.target.value || undefined)}
               placeholder={t('llm.systemPromptPlaceholder', {
                 defaultValue: 'Custom system prompt (optional)',
               })}

ui/components/canvas/StatusBar.tsx

@@ -1,20 +1,21 @@
 'use client'
 
 import { useTranslation } from 'react-i18next'
-import { useCanvasZoom } from '@/hooks/useCanvasZoom'
+
 import { Slider } from '@/components/ui/slider'
+import { useCanvasZoom } from '@/hooks/useCanvasZoom'
 
 export function StatusBar() {
   const { scale, setScale, summary } = useCanvasZoom()
   const { t } = useTranslation()
 
   return (
-    <div className='border-border bg-card text-foreground flex shrink-0 items-center justify-end gap-3 border-t px-2 py-1 text-xs'>
+    <div className='flex shrink-0 items-center justify-end gap-3 border-t border-border bg-card px-2 py-1 text-xs text-foreground'>
       <div className='flex items-center gap-1.5'>
         <span className='text-muted-foreground'>{t('statusBar.zoom')}</span>
         <Slider
           data-testid='zoom-slider'
-          className='[&_[data-slot=slider-range]]:bg-primary [&_[data-slot=slider-thumb]]:border-primary [&_[data-slot=slider-thumb]]:bg-primary [&_[data-slot=slider-track]]:bg-primary/20 w-44 [&_[data-slot=slider-thumb]]:size-2.5'
+          className='w-44 [&_[data-slot=slider-range]]:bg-primary [&_[data-slot=slider-thumb]]:size-2.5 [&_[data-slot=slider-thumb]]:border-primary [&_[data-slot=slider-thumb]]:bg-primary [&_[data-slot=slider-track]]:bg-primary/20'
           min={10}
           max={100}
           step={5}
@@ -25,7 +26,7 @@ export function StatusBar() {
           {scale}%
         </span>
       </div>
-      <span className='text-muted-foreground ml-auto text-[11px]'>
+      <span className='ml-auto text-[11px] text-muted-foreground'>
         {t('statusBar.canvas')}: {summary}
       </span>
     </div>

ui/components/canvas/TextBlockLayer.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import { useRef } from 'react'
 import { useDrag } from '@use-gesture/react'
+import { useRef } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
+
+import { useBlobImage } from '@/hooks/useBlobData'
+import { useTextBlocks } from '@/hooks/useTextBlocks'
 import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 import { TextBlock } from '@/types'
-import { useTextBlocks } from '@/hooks/useTextBlocks'
-import { useBlobImage } from '@/hooks/useBlobData'
 
 type TextBlockLayerProps = {
   selectedIndex?: number
@@ -52,11 +53,7 @@ export function TextBlockLayer({
     >
       {showSprites &&
         textBlocks.map((block, index) => (
-          <BlockSprite
-            key={`sprite-${block.id ?? index}`}
-            block={block}
-            scale={scale}
-          />
+          <BlockSprite key={`sprite-${block.id ?? index}`} block={block} scale={scale} />
         ))}
       {textBlocks.map((block, index) => (
         <TextBlockItem
@@ -222,7 +219,7 @@ function TextBlockItem({
       <div
         className={`absolute inset-0 rounded ${
           selected
-            ? 'border-primary bg-primary/15 border-[3px]'
+            ? 'border-[3px] border-primary bg-primary/15'
             : 'border-2 border-rose-400/60 bg-rose-400/5'
         }`}
       />
@@ -237,9 +234,7 @@ function TextBlockItem({
       </div>
 
       {/* Resize handles */}
-      {selected && interactive && (
-        <ResizeHandles onEdgePointerDown={handleEdgePointerDown} />
-      )}
+      {selected && interactive && <ResizeHandles onEdgePointerDown={handleEdgePointerDown} />}
     </div>
   )
 }
@@ -265,11 +260,7 @@ function BlockSprite({ block, scale }: { block: TextBlock; scale: number }) {
   )
 }
 
-function ResizeHandles({
-  onEdgePointerDown,
-}: {
-  onEdgePointerDown: (edge: ResizeEdge) => void
-}) {
+function ResizeHandles({ onEdgePointerDown }: { onEdgePointerDown: (edge: ResizeEdge) => void }) {
   const s = RESIZE_HANDLE_SIZE
   const half = s / 2
 

ui/components/canvas/ToolRail.tsx

@@ -1,30 +1,17 @@
 'use client'
 
+import { MousePointer, VectorSquare, Brush, Bandage, Eraser } from 'lucide-react'
 import type { ComponentType } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  MousePointer,
-  VectorSquare,
-  Brush,
-  Bandage,
-  Eraser,
-} from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { ColorPicker } from '@/components/ui/color-picker'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Slider } from '@/components/ui/slider'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 import { usePreferencesStore } from '@/lib/stores/preferencesStore'
 import { ToolMode } from '@/types'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { Slider } from '@/components/ui/slider'
-import { Button } from '@/components/ui/button'
-import { ColorPicker } from '@/components/ui/color-picker'
 
 type ModeDefinition = {
   value: ToolMode
@@ -73,7 +60,7 @@ export function ToolRail() {
   const { t } = useTranslation()
 
   return (
-    <div className='border-border bg-card flex w-11 flex-col border-r'>
+    <div className='flex w-11 flex-col border-r border-border bg-card'>
       <div className='flex flex-1 flex-col items-center gap-1 py-2'>
         {MODES.map((item) => {
           const label = t(item.labelKey)
@@ -100,7 +87,7 @@ export function ToolRail() {
                   data-testid={item.testId}
                   data-active={item.value === mode}
                   onClick={() => setMode(item.value)}
-                  className='text-muted-foreground data-[active=true]:border-primary data-[active=true]:bg-accent data-[active=true]:text-primary border border-transparent'
+                  className='border border-transparent text-muted-foreground data-[active=true]:border-primary data-[active=true]:bg-accent data-[active=true]:text-primary'
                   aria-label={label}
                 >
                   <item.icon className='h-4 w-4' />
@@ -148,7 +135,7 @@ function BrushToolWithPopover({
               data-testid={item.testId}
               data-active={isActive}
               onClick={onSelect}
-              className='text-muted-foreground data-[active=true]:border-primary data-[active=true]:bg-accent data-[active=true]:text-primary border border-transparent'
+              className='border border-transparent text-muted-foreground data-[active=true]:border-primary data-[active=true]:bg-accent data-[active=true]:text-primary'
               aria-label={label}
             >
               <item.icon className='h-4 w-4' />
@@ -164,24 +151,22 @@ function BrushToolWithPopover({
       <PopoverContent side='right' align='start' className='w-56'>
         <div className='space-y-4 text-sm'>
           <div className='space-y-2'>
-            <p className='text-muted-foreground text-xs font-medium uppercase'>
+            <p className='text-xs font-medium text-muted-foreground uppercase'>
               {t('toolbar.brushSize')}
             </p>
             <div className='flex items-center gap-2'>
               <Slider
                 data-testid='brush-size-slider'
-                className='[&_[data-slot=slider-range]]:bg-primary [&_[data-slot=slider-thumb]]:border-primary [&_[data-slot=slider-thumb]]:bg-primary [&_[data-slot=slider-track]]:bg-primary/20 flex-1 [&_[data-slot=slider-thumb]]:size-3'
+                className='flex-1 [&_[data-slot=slider-range]]:bg-primary [&_[data-slot=slider-thumb]]:size-3 [&_[data-slot=slider-thumb]]:border-primary [&_[data-slot=slider-thumb]]:bg-primary [&_[data-slot=slider-track]]:bg-primary/20'
                 min={8}
                 max={128}
                 step={4}
                 value={[brushSize]}
-                onValueChange={(vals) =>
-                  setBrushConfig({ size: vals[0] ?? brushSize })
-                }
+                onValueChange={(vals) => setBrushConfig({ size: vals[0] ?? brushSize })}
               />
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <span className='text-muted-foreground w-10 cursor-help text-right tabular-nums'>
+                  <span className='w-10 cursor-help text-right text-muted-foreground tabular-nums'>
                     {brushSize}px
                   </span>
                 </TooltipTrigger>
@@ -193,7 +178,7 @@ function BrushToolWithPopover({
             </div>
           </div>
           <div className='space-y-2'>
-            <p className='text-muted-foreground text-xs font-medium uppercase'>
+            <p className='text-xs font-medium text-muted-foreground uppercase'>
               {t('toolbar.brushColor')}
             </p>
             <div className='flex items-center gap-2'>
@@ -207,9 +192,7 @@ function BrushToolWithPopover({
                 inputTestId='brush-color-input'
                 pickButtonTestId='brush-color-pick'
               />
-              <span className='text-muted-foreground text-xs'>
-                {brushColor}
-              </span>
+              <span className='text-xs text-muted-foreground'>{brushColor}</span>
             </div>
           </div>
         </div>

ui/components/canvas/Workspace.tsx

@@ -1,58 +1,53 @@
 'use client'
 
-import { useEffect, useRef, useMemo, useCallback } from 'react'
-import type React from 'react'
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
 import { useGesture } from '@use-gesture/react'
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from '@/components/ui/context-menu'
+import { useEffect, useRef, useMemo, useCallback } from 'react'
+import type React from 'react'
 import { useTranslation } from 'react-i18next'
-import { listen } from '@/lib/backend'
-import { Image } from '@/components/Image'
+
+import { CanvasToolbar } from '@/components/canvas/CanvasToolbar'
 import {
   setCanvasViewport,
   setCanvasDocumentSize,
   fitCanvasToViewport,
 } from '@/components/canvas/canvasViewport'
-import { ToolRail } from '@/components/canvas/ToolRail'
-import { CanvasToolbar } from '@/components/canvas/CanvasToolbar'
 import { TextBlockLayer } from '@/components/canvas/TextBlockLayer'
-import { useCanvasZoom } from '@/hooks/useCanvasZoom'
-import { usePointerToDocument } from '@/hooks/usePointerToDocument'
-import { useBlockDrafting } from '@/hooks/useBlockDrafting'
-import { useBlockContextMenu } from '@/hooks/useBlockContextMenu'
-import { useTextBlocks, useDocumentLayer } from '@/hooks/useTextBlocks'
-import { useMaskDrawing } from '@/hooks/useMaskDrawing'
-import { useRenderBrushDrawing } from '@/hooks/useRenderBrushDrawing'
-import { useBrushLayerDisplay } from '@/hooks/useBrushLayerDisplay'
-import { useBrushCursor } from '@/hooks/useBrushCursor'
-import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
-import { useEditorUiStore } from '@/lib/stores/editorUiStore'
+import { ToolRail } from '@/components/canvas/ToolRail'
 import {
   resolvePinchMemoScaleRatio,
   resolvePinchNextScaleRatio,
 } from '@/components/canvas/zoomGestures'
+import { Image } from '@/components/Image'
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu'
+import { useBlockContextMenu } from '@/hooks/useBlockContextMenu'
+import { useBlockDrafting } from '@/hooks/useBlockDrafting'
+import { useBrushCursor } from '@/hooks/useBrushCursor'
+import { useBrushLayerDisplay } from '@/hooks/useBrushLayerDisplay'
+import { useCanvasZoom } from '@/hooks/useCanvasZoom'
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
+import { useMaskDrawing } from '@/hooks/useMaskDrawing'
+import { usePointerToDocument } from '@/hooks/usePointerToDocument'
+import { useRenderBrushDrawing } from '@/hooks/useRenderBrushDrawing'
+import { useTextBlocks, useDocumentLayer } from '@/hooks/useTextBlocks'
+import { listen } from '@/lib/backend'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 
 const BRUSH_CURSOR = 'none'
 
 export function Workspace() {
   useKeyboardShortcuts()
   const scale = useEditorUiStore((state) => state.scale)
-  const showSegmentationMask = useEditorUiStore(
-    (state) => state.showSegmentationMask,
-  )
-  const showInpaintedImage = useEditorUiStore(
-    (state) => state.showInpaintedImage,
-  )
+  const showSegmentationMask = useEditorUiStore((state) => state.showSegmentationMask)
+  const showInpaintedImage = useEditorUiStore((state) => state.showInpaintedImage)
   const showBrushLayer = useEditorUiStore((state) => state.showBrushLayer)
   const showRenderedImage = useEditorUiStore((state) => state.showRenderedImage)
-  const showTextBlocksOverlay = useEditorUiStore(
-    (state) => state.showTextBlocksOverlay,
-  )
+  const showTextBlocksOverlay = useEditorUiStore((state) => state.showTextBlocksOverlay)
   const mode = useEditorUiStore((state) => state.mode)
   const autoFitEnabled = useEditorUiStore((state) => state.autoFitEnabled)
   const {
@@ -64,16 +59,8 @@ export function Workspace() {
     removeBlock,
   } = useTextBlocks()
 
-  const imageData = useDocumentLayer(
-    currentDocument?.id,
-    'image',
-    currentDocument?.image,
-  )
-  const segmentData = useDocumentLayer(
-    currentDocument?.id,
-    'segment',
-    currentDocument?.segment,
-  )
+  const imageData = useDocumentLayer(currentDocument?.id, 'image', currentDocument?.image)
+  const segmentData = useDocumentLayer(currentDocument?.id, 'segment', currentDocument?.segment)
   const inpaintedData = useDocumentLayer(
     currentDocument?.id,
     'inpainted',
@@ -84,11 +71,7 @@ export function Workspace() {
     'brushLayer',
     currentDocument?.brushLayer,
   )
-  const renderedData = useDocumentLayer(
-    currentDocument?.id,
-    'rendered',
-    currentDocument?.rendered,
-  )
+  const renderedData = useDocumentLayer(currentDocument?.id, 'rendered', currentDocument?.rendered)
 
   useEffect(() => {
     if (currentDocument) {
@@ -123,14 +106,11 @@ export function Workspace() {
 
   const maskPointerEnabled = useMemo(
     () =>
-      mode === 'repairBrush' ||
-      (mode === 'eraser' && (showSegmentationMask || !showBrushLayer)),
+      mode === 'repairBrush' || (mode === 'eraser' && (showSegmentationMask || !showBrushLayer)),
     [mode, showSegmentationMask, showBrushLayer],
   )
   const brushPointerEnabled = useMemo(
-    () =>
-      mode === 'brush' ||
-      (mode === 'eraser' && !showSegmentationMask && showBrushLayer),
+    () => mode === 'brush' || (mode === 'eraser' && !showSegmentationMask && showBrushLayer),
     [mode, showSegmentationMask, showBrushLayer],
   )
   const maskDrawing = useMaskDrawing({
@@ -163,19 +143,15 @@ export function Workspace() {
       fitCanvasToViewport()
     }
   }, [currentDocument?.id, autoFitEnabled])
-  const {
-    contextMenuBlockIndex,
-    handleContextMenu,
-    handleDeleteBlock,
-    clearContextMenu,
-  } = useBlockContextMenu({
-    currentDocument,
-    pointerToDocument,
-    selectBlock: setSelectedBlockIndex,
-    removeBlock: (index) => {
-      void removeBlock(index)
-    },
-  })
+  const { contextMenuBlockIndex, handleContextMenu, handleDeleteBlock, clearContextMenu } =
+    useBlockContextMenu({
+      currentDocument,
+      pointerToDocument,
+      selectBlock: setSelectedBlockIndex,
+      removeBlock: (index) => {
+        void removeBlock(index)
+      },
+    })
   const { t } = useTranslation()
 
   // Listen for Tauri resize events
@@ -241,10 +217,7 @@ export function Workspace() {
           memo,
           useEditorUiStore.getState().scale / 100,
         )
-        const nextScaleRatio = resolvePinchNextScaleRatio(
-          memoScaleRatio,
-          movementScale,
-        )
+        const nextScaleRatio = resolvePinchNextScaleRatio(memoScaleRatio, movementScale)
         applyScale(nextScaleRatio * 100)
         return memoScaleRatio
       },
@@ -272,9 +245,7 @@ export function Workspace() {
     },
   )
 
-  const handleCanvasPointerDownCapture = (
-    event: React.PointerEvent<HTMLDivElement>,
-  ) => {
+  const handleCanvasPointerDownCapture = (event: React.PointerEvent<HTMLDivElement>) => {
     if (mode !== 'block' && event.target === event.currentTarget) {
       clearSelection()
     }
@@ -301,7 +272,7 @@ export function Workspace() {
   )
 
   return (
-    <div className='bg-muted flex min-h-0 min-w-0 flex-1'>
+    <div className='flex min-h-0 min-w-0 flex-1 bg-muted'>
       <ToolRail />
       <div className='relative flex min-h-0 min-w-0 flex-1 flex-col'>
         <CanvasToolbar />
@@ -324,7 +295,7 @@ export function Workspace() {
                     <div
                       ref={canvasRef}
                       data-testid='workspace-canvas'
-                      className='border-border bg-card relative rounded border shadow-sm'
+                      className='relative rounded border border-border bg-card shadow-sm'
                       style={{
                         ...canvasDimensions,
                         cursor: canvasCursor,
@@ -392,9 +363,7 @@ export function Workspace() {
                             width: '100%',
                             height: '100%',
                             opacity: brushDrawing.visible ? 1 : 0,
-                            pointerEvents: brushPointerEnabled
-                              ? 'auto'
-                              : 'none',
+                            pointerEvents: brushPointerEnabled ? 'auto' : 'none',
                             touchAction: 'none',
                             zIndex: 20,
                             transition: 'opacity 120ms ease',
@@ -421,7 +390,7 @@ export function Workspace() {
                       </div>
                       {draftBlock && (
                         <div
-                          className='border-primary bg-primary/10 pointer-events-none absolute rounded border-2 border-dashed'
+                          className='pointer-events-none absolute rounded border-2 border-dashed border-primary bg-primary/10'
                           style={{
                             left: draftBlock.x * scaleRatio,
                             top: draftBlock.y * scaleRatio,
@@ -443,7 +412,7 @@ export function Workspace() {
                 </ContextMenuContent>
               </ContextMenu>
             ) : (
-              <div className='text-muted-foreground flex h-full w-full items-center justify-center text-sm'>
+              <div className='flex h-full w-full items-center justify-center text-sm text-muted-foreground'>
                 {t('workspace.importPrompt')}
               </div>
             )}
@@ -452,13 +421,13 @@ export function Workspace() {
             orientation='vertical'
             className='flex w-2 touch-none p-px select-none'
           >
-            <ScrollAreaPrimitive.Thumb className='bg-muted-foreground/40 flex-1 rounded' />
+            <ScrollAreaPrimitive.Thumb className='flex-1 rounded bg-muted-foreground/40' />
           </ScrollAreaPrimitive.Scrollbar>
           <ScrollAreaPrimitive.Scrollbar
             orientation='horizontal'
             className='flex h-2 touch-none p-px select-none'
           >
-            <ScrollAreaPrimitive.Thumb className='bg-muted-foreground/40 rounded' />
+            <ScrollAreaPrimitive.Thumb className='rounded bg-muted-foreground/40' />
           </ScrollAreaPrimitive.Scrollbar>
         </ScrollAreaPrimitive.Root>
       </div>

ui/components/canvas/zoomGestures.ts

@@ -8,20 +8,14 @@ function clampScaleRatio(scaleRatio: number) {
   return Math.max(MIN_SCALE_RATIO, Math.min(MAX_SCALE_RATIO, scaleRatio))
 }
 
-export function resolvePinchMemoScaleRatio(
-  memo: unknown,
-  currentScaleRatio: number,
-) {
+export function resolvePinchMemoScaleRatio(memo: unknown, currentScaleRatio: number) {
   if (typeof memo === 'number' && Number.isFinite(memo)) {
     return clampScaleRatio(memo)
   }
   return clampScaleRatio(currentScaleRatio)
 }
 
-export function resolvePinchNextScaleRatio(
-  memoScaleRatio: number,
-  movementScale: number,
-) {
+export function resolvePinchNextScaleRatio(memoScaleRatio: number, movementScale: number) {
   const baseScaleRatio = clampScaleRatio(memoScaleRatio)
   if (!Number.isFinite(movementScale) || movementScale <= 0) {
     return baseScaleRatio

ui/components/panels/LayersPanel.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import { useTranslation } from 'react-i18next'
-import { motion } from 'motion/react'
 import {
   EyeIcon,
   EyeOffIcon,
@@ -11,10 +9,13 @@ import {
   BandageIcon,
   PaintbrushIcon,
 } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { motion } from 'motion/react'
+import { useTranslation } from 'react-i18next'
+
 import { Button } from '@/components/ui/button'
-import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 import { useCurrentDocument } from '@/hooks/useTextBlocks'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
+import { cn } from '@/lib/utils'
 
 type Layer = {
   id: string
@@ -28,30 +29,16 @@ type Layer = {
 
 export function LayersPanel() {
   const currentDocument = useCurrentDocument()
-  const showInpaintedImage = useEditorUiStore(
-    (state) => state.showInpaintedImage,
-  )
-  const setShowInpaintedImage = useEditorUiStore(
-    (state) => state.setShowInpaintedImage,
-  )
-  const showSegmentationMask = useEditorUiStore(
-    (state) => state.showSegmentationMask,
-  )
-  const setShowSegmentationMask = useEditorUiStore(
-    (state) => state.setShowSegmentationMask,
-  )
+  const showInpaintedImage = useEditorUiStore((state) => state.showInpaintedImage)
+  const setShowInpaintedImage = useEditorUiStore((state) => state.setShowInpaintedImage)
+  const showSegmentationMask = useEditorUiStore((state) => state.showSegmentationMask)
+  const setShowSegmentationMask = useEditorUiStore((state) => state.setShowSegmentationMask)
   const showBrushLayer = useEditorUiStore((state) => state.showBrushLayer)
   const setShowBrushLayer = useEditorUiStore((state) => state.setShowBrushLayer)
-  const showTextBlocksOverlay = useEditorUiStore(
-    (state) => state.showTextBlocksOverlay,
-  )
-  const setShowTextBlocksOverlay = useEditorUiStore(
-    (state) => state.setShowTextBlocksOverlay,
-  )
+  const showTextBlocksOverlay = useEditorUiStore((state) => state.showTextBlocksOverlay)
+  const setShowTextBlocksOverlay = useEditorUiStore((state) => state.setShowTextBlocksOverlay)
   const showRenderedImage = useEditorUiStore((state) => state.showRenderedImage)
-  const setShowRenderedImage = useEditorUiStore(
-    (state) => state.setShowRenderedImage,
-  )
+  const setShowRenderedImage = useEditorUiStore((state) => state.setShowRenderedImage)
 
   const layers: Layer[] = [
     {
@@ -69,8 +56,7 @@ export function LayersPanel() {
       visible: showTextBlocksOverlay,
       setVisible: setShowTextBlocksOverlay,
       hasContent:
-        currentDocument?.textBlocks !== undefined &&
-        currentDocument.textBlocks.length > 0,
+        currentDocument?.textBlocks !== undefined && currentDocument.textBlocks.length > 0,
     },
     {
       id: 'brush',
@@ -145,20 +131,14 @@ function LayerItem({ layer }: { layer: Layer }) {
           }
         }}
         disabled={!canToggle}
-        className={cn(
-          'size-5',
-          canToggle ? 'cursor-pointer' : 'cursor-default',
-        )}
+        className={cn('size-5', canToggle ? 'cursor-pointer' : 'cursor-default')}
       >
         {layer.visible ? (
           <EyeIcon
-            className={cn(
-              'size-3.5',
-              isActive ? 'text-foreground' : 'text-muted-foreground',
-            )}
+            className={cn('size-3.5', isActive ? 'text-foreground' : 'text-muted-foreground')}
           />
         ) : (
-          <EyeOffIcon className='text-muted-foreground/40 size-3.5' />
+          <EyeOffIcon className='size-3.5 text-muted-foreground/40' />
         )}
       </Button>
 
@@ -166,9 +146,7 @@ function LayerItem({ layer }: { layer: Layer }) {
       <div
         className={cn(
           'flex size-5 shrink-0 items-center justify-center rounded',
-          !layer.hasContent && !isLocked
-            ? 'text-muted-foreground/40'
-            : 'text-muted-foreground',
+          !layer.hasContent && !isLocked ? 'text-muted-foreground/40' : 'text-muted-foreground',
         )}
       >
         {layer.icon === 'RAW' ? (

ui/components/panels/RenderControlsPanel.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { type ComponentType, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useQueryClient } from '@tanstack/react-query'
 import {
   AlignCenterIcon,
   AlignLeftIcon,
@@ -12,33 +11,22 @@ import {
   PlusIcon,
   SquareIcon,
 } from 'lucide-react'
-import { useTextBlocks } from '@/hooks/useTextBlocks'
-import {
-  RenderEffect,
-  RenderStroke,
-  RgbaColor,
-  TextAlign,
-  TextStyle,
-} from '@/types'
-import type { FontFaceInfo } from '@/lib/api/schemas'
+import { type ComponentType, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import { Button } from '@/components/ui/button'
 import { ColorPicker } from '@/components/ui/color-picker'
-import { Input } from '@/components/ui/input'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
 import { FontSelect } from '@/components/ui/font-select'
+import { Input } from '@/components/ui/input'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { useTextBlocks } from '@/hooks/useTextBlocks'
+import { getGetDocumentQueryKey, updateDocumentStyle } from '@/lib/api/documents/documents'
+import type { FontFaceInfo } from '@/lib/api/schemas'
+import { useListFonts, useGetGoogleFontsCatalog } from '@/lib/api/system/system'
 import { useEditorUiStore } from '@/lib/stores/editorUiStore'
 import { usePreferencesStore } from '@/lib/stores/preferencesStore'
-import { useListFonts, useGetGoogleFontsCatalog } from '@/lib/api/system/system'
-import {
-  getGetDocumentQueryKey,
-  updateDocumentStyle,
-} from '@/lib/api/documents/documents'
-import { useQueryClient } from '@tanstack/react-query'
 import { cn } from '@/lib/utils'
+import { RenderEffect, RenderStroke, RgbaColor, TextAlign, TextStyle } from '@/types'
 
 const DEFAULT_COLOR: RgbaColor = [0, 0, 0, 255]
 const DEFAULT_FONT_FACES: FontFaceInfo[] = [
@@ -62,16 +50,12 @@ const DEFAULT_STROKE_WIDTH = 1.6
 const MIN_STROKE_WIDTH = 0.2
 const MAX_STROKE_WIDTH = 24
 const STROKE_WIDTH_STEP = 0.1
-const LATIN_ONLY_PATTERN =
-  /^[\p{Script=Latin}\p{Script=Common}\p{Script=Inherited}]*$/u
+const LATIN_ONLY_PATTERN = /^[\p{Script=Latin}\p{Script=Common}\p{Script=Inherited}]*$/u
 
-const clampByte = (value: number) =>
-  Math.max(0, Math.min(255, Math.round(value)))
+const clampByte = (value: number) => Math.max(0, Math.min(255, Math.round(value)))
 
 const clampStrokeWidth = (value: number) =>
-  Number(
-    Math.max(MIN_STROKE_WIDTH, Math.min(MAX_STROKE_WIDTH, value)).toFixed(1),
-  )
+  Number(Math.max(MIN_STROKE_WIDTH, Math.min(MAX_STROKE_WIDTH, value)).toFixed(1))
 
 const colorToHex = (color: RgbaColor) =>
   `#${color
@@ -129,8 +113,7 @@ const fallbackFontFace = (value?: string): FontFaceInfo | undefined => {
   }
 }
 
-const hasExplicitFontFamilies = (style?: TextStyle) =>
-  (style?.fontFamilies?.length ?? 0) > 0
+const hasExplicitFontFamilies = (style?: TextStyle) => (style?.fontFamilies?.length ?? 0) > 0
 
 const normalizeEffect = (effect?: Partial<RenderEffect>): RenderEffect => ({
   italic: effect?.italic ?? false,
@@ -213,28 +196,20 @@ export function RenderControlsPanel() {
   const queryClient = useQueryClient()
   const { t } = useTranslation()
   const selectedBlock =
-    selectedBlockIndex !== undefined
-      ? textBlocks[selectedBlockIndex]
-      : undefined
-  const selectedBlockHasExplicitFont = hasExplicitFontFamilies(
-    selectedBlock?.style,
-  )
+    selectedBlockIndex !== undefined ? textBlocks[selectedBlockIndex] : undefined
+  const selectedBlockHasExplicitFont = hasExplicitFontFamilies(selectedBlock?.style)
   const firstBlock = textBlocks[0]
   const hasBlocks = textBlocks.length > 0
   const fontCandidates = uniqueFontFaces(
     [
       ...sortedFonts,
       ...(documentFont ? [fallbackFontFace(documentFont)] : []),
-      ...(selectedBlock?.style?.fontFamilies
-        ?.slice(0, 1)
-        ?.map(fallbackFontFace) ?? []),
-      ...(firstBlock?.style?.fontFamilies?.slice(0, 1)?.map(fallbackFontFace) ??
-        []),
+      ...(selectedBlock?.style?.fontFamilies?.slice(0, 1)?.map(fallbackFontFace) ?? []),
+      ...(firstBlock?.style?.fontFamilies?.slice(0, 1)?.map(fallbackFontFace) ?? []),
       ...DEFAULT_FONT_FACES,
     ].filter((value): value is FontFaceInfo => !!value),
   )
-  const fallbackFontFaces =
-    fontCandidates.length > 0 ? fontCandidates : DEFAULT_FONT_FACES
+  const fallbackFontFaces = fontCandidates.length > 0 ? fontCandidates : DEFAULT_FONT_FACES
   const fallbackColor = firstBlock?.style?.color ?? DEFAULT_COLOR
   const fontOptions = fontCandidates
   const currentFontCandidate =
@@ -243,18 +218,12 @@ export function RenderControlsPanel() {
     firstBlock?.style?.fontFamilies?.[0] ??
     (hasBlocks ? fallbackFontFaces[0]?.postScriptName : '')
   const currentFontFace =
-    findFontFace(fontOptions, currentFontCandidate) ??
-    fallbackFontFace(currentFontCandidate)
+    findFontFace(fontOptions, currentFontCandidate) ?? fallbackFontFace(currentFontCandidate)
   const currentFont = currentFontFace?.postScriptName ?? ''
   const currentFontFamilyName = currentFontFace?.familyName
-  const currentEffect = normalizeEffect(
-    selectedBlock?.style?.effect ?? renderEffect,
-  )
-  const currentStroke = normalizeStroke(
-    selectedBlock?.style?.stroke ?? renderStroke,
-  )
-  const currentColor =
-    selectedBlock?.style?.color ?? (hasBlocks ? fallbackColor : DEFAULT_COLOR)
+  const currentEffect = normalizeEffect(selectedBlock?.style?.effect ?? renderEffect)
+  const currentStroke = normalizeStroke(selectedBlock?.style?.stroke ?? renderStroke)
+  const currentColor = selectedBlock?.style?.color ?? (hasBlocks ? fallbackColor : DEFAULT_COLOR)
   const currentColorHex = colorToHex(currentColor)
   const currentStrokeColorHex = colorToHex(currentStroke.color)
   const currentStrokeWidth = currentStroke.widthPx ?? DEFAULT_STROKE_WIDTH
@@ -269,9 +238,7 @@ export function RenderControlsPanel() {
   const strokeColorLabel = t('render.strokeColorLabel')
   const strokeWidthLabel = t('render.strokeWidthLabel')
   const alignLabel = t('render.alignLabel')
-  const currentTextAlign = resolveEffectiveTextAlign(
-    selectedBlock ?? firstBlock,
-  )
+  const currentTextAlign = resolveEffectiveTextAlign(selectedBlock ?? firstBlock)
   const scopeLabel =
     selectedBlockIndex !== undefined
       ? t('render.fontScopeBlockIndex', {
@@ -319,14 +286,9 @@ export function RenderControlsPanel() {
     void updateTextBlocks(nextBlocks)
   }
 
-  const mergeFontFamilies = (
-    nextFont: string,
-    current: string[] | undefined,
-  ) => {
+  const mergeFontFamilies = (nextFont: string, current: string[] | undefined) => {
     const base = (
-      current?.length
-        ? current
-        : fallbackFontFaces.map((font) => font.postScriptName)
+      current?.length ? current : fallbackFontFaces.map((font) => font.postScriptName)
     ).map((family) => normalizeFontValue(fontOptions, family) ?? family)
     return [nextFont, ...base.filter((family) => family !== nextFont)]
   }
@@ -406,10 +368,10 @@ export function RenderControlsPanel() {
       {/* Font + Color */}
       <div className='flex flex-col gap-0.5'>
         <div className='flex items-baseline justify-between'>
-          <span className='text-muted-foreground text-[10px] font-medium uppercase'>
+          <span className='text-[10px] font-medium text-muted-foreground uppercase'>
             {fontLabel}
           </span>
-          <span className='text-muted-foreground text-[10px] font-medium uppercase'>
+          <span className='text-[10px] font-medium text-muted-foreground uppercase'>
             {t('render.fontColorLabel')}
           </span>
         </div>
@@ -422,20 +384,14 @@ export function RenderControlsPanel() {
               disabled={fontOptions.length === 0}
               placeholder={t('render.fontPlaceholder')}
               triggerStyle={
-                currentFontFamilyName
-                  ? { fontFamily: currentFontFamilyName }
-                  : undefined
+                currentFontFamilyName ? { fontFamily: currentFontFamilyName } : undefined
               }
               onChange={(value) => {
-                const nextFamilies = mergeFontFamilies(
-                  value,
-                  selectedBlock?.style?.fontFamilies,
-                )
+                const nextFamilies = mergeFontFamilies(value, selectedBlock?.style?.fontFamilies)
                 // Only persist a block override when the block already has one.
                 // Otherwise keep the block inheriting the document default.
                 if (selectedBlockHasExplicitFont) {
-                  if (applyStyleToSelected({ fontFamilies: nextFamilies }))
-                    return
+                  if (applyStyleToSelected({ fontFamilies: nextFamilies })) return
                 }
                 updateDocumentDefaultFont(value)
               }}
@@ -444,7 +400,7 @@ export function RenderControlsPanel() {
           {selectedBlockHasExplicitFont ? (
             <button
               type='button'
-              className='text-muted-foreground hover:text-foreground text-[9px]'
+              className='text-[9px] text-muted-foreground hover:text-foreground'
               onClick={() => applyStyleToSelected({ fontFamilies: [] })}
               title='Reset to document default'
             >
@@ -471,17 +427,17 @@ export function RenderControlsPanel() {
 
       {/* Size / Effect / Align */}
       <div className='grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-end gap-x-2'>
-        <span className='text-muted-foreground text-[10px] font-medium uppercase'>
+        <span className='text-[10px] font-medium text-muted-foreground uppercase'>
           {fontSizeLabel}
         </span>
-        <span className='text-muted-foreground text-[10px] font-medium uppercase'>
+        <span className='text-[10px] font-medium text-muted-foreground uppercase'>
           {effectLabel}
         </span>
-        <span className='text-muted-foreground text-[10px] font-medium uppercase'>
+        <span className='text-[10px] font-medium text-muted-foreground uppercase'>
           {alignLabel}
         </span>
 
-        <div className='border-input bg-background flex min-w-0 items-center rounded-md border shadow-xs'>
+        <div className='flex min-w-0 items-center rounded-md border border-input bg-background shadow-xs'>
           <Button
             type='button'
             variant='ghost'
@@ -505,9 +461,7 @@ export function RenderControlsPanel() {
             className='h-7 min-w-0 flex-1 [appearance:textfield] rounded-none border-0 px-1 text-center text-xs shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
             data-testid='render-font-size'
             disabled={selectedBlockIndex === undefined}
-            value={
-              currentFontSize !== undefined ? Math.round(currentFontSize) : ''
-            }
+            value={currentFontSize !== undefined ? Math.round(currentFontSize) : ''}
             placeholder='auto'
             onChange={(event) => {
               const parsed = Number.parseInt(event.target.value, 10)
@@ -523,10 +477,7 @@ export function RenderControlsPanel() {
             className='size-7 shrink-0 rounded-l-none border-l'
             disabled={selectedBlockIndex === undefined}
             onClick={() => {
-              const next = Math.min(
-                300,
-                Math.round((currentFontSize ?? 16) + 1),
-              )
+              const next = Math.min(300, Math.round((currentFontSize ?? 16) + 1))
               applyStyleToSelected({ fontSize: next })
             }}
           >
@@ -549,7 +500,7 @@ export function RenderControlsPanel() {
                     className={cn(
                       'size-7 shrink-0',
                       active &&
-                        'bg-primary text-primary-foreground border-primary hover:bg-primary/90',
+                        'border-primary bg-primary text-primary-foreground hover:bg-primary/90',
                     )}
                     onClick={() => {
                       const nextEffect = {
@@ -588,11 +539,10 @@ export function RenderControlsPanel() {
                     className={cn(
                       'size-7 shrink-0',
                       active &&
-                        'bg-primary text-primary-foreground border-primary hover:bg-primary/90',
+                        'border-primary bg-primary text-primary-foreground hover:bg-primary/90',
                     )}
                     onClick={() => {
-                      if (applyStyleToSelected({ textAlign: item.value }))
-                        return
+                      if (applyStyleToSelected({ textAlign: item.value })) return
                       applyStyleToAll({ textAlign: item.value })
                     }}
                   >
@@ -610,7 +560,7 @@ export function RenderControlsPanel() {
 
       {/* Border / Stroke */}
       <div className='flex flex-col gap-0.5'>
-        <span className='text-muted-foreground text-[10px] font-medium uppercase'>
+        <span className='text-[10px] font-medium text-muted-foreground uppercase'>
           {strokeLabel}
         </span>
         <div className='flex min-w-0 items-center gap-1'>
@@ -624,7 +574,7 @@ export function RenderControlsPanel() {
                 className={cn(
                   'size-7 shrink-0',
                   currentStroke.enabled &&
-                    'bg-primary text-primary-foreground border-primary hover:bg-primary/90',
+                    'border-primary bg-primary text-primary-foreground hover:bg-primary/90',
                 )}
                 onClick={() =>
                   applyStrokeSetting({
@@ -667,16 +617,14 @@ export function RenderControlsPanel() {
             </TooltipContent>
           </Tooltip>
 
-          <div className='border-input bg-background flex min-w-0 flex-1 items-center rounded-md border shadow-xs'>
+          <div className='flex min-w-0 flex-1 items-center rounded-md border border-input bg-background shadow-xs'>
             <Button
               type='button'
               variant='ghost'
               size='icon-sm'
               aria-label={`${strokeWidthLabel} -`}
               className='size-7 shrink-0 rounded-r-none border-r'
-              onClick={() =>
-                updateStrokeWidth(currentStrokeWidth - STROKE_WIDTH_STEP)
-              }
+              onClick={() => updateStrokeWidth(currentStrokeWidth - STROKE_WIDTH_STEP)}
             >
               <MinusIcon className='size-3' />
             </Button>
@@ -690,9 +638,7 @@ export function RenderControlsPanel() {
               className='h-7 min-w-0 flex-1 [appearance:textfield] rounded-none border-0 px-1 text-center text-xs shadow-none focus-visible:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
               data-testid='render-stroke-width'
               value={
-                Number.isFinite(currentStrokeWidth)
-                  ? currentStrokeWidth
-                  : DEFAULT_STROKE_WIDTH
+                Number.isFinite(currentStrokeWidth) ? currentStrokeWidth : DEFAULT_STROKE_WIDTH
               }
               onChange={(event) => {
                 const parsed = Number.parseFloat(event.target.value)
@@ -707,9 +653,7 @@ export function RenderControlsPanel() {
               size='icon-sm'
               aria-label={`${strokeWidthLabel} +`}
               className='size-7 shrink-0 rounded-l-none border-l'
-              onClick={() =>
-                updateStrokeWidth(currentStrokeWidth + STROKE_WIDTH_STEP)
-              }
+              onClick={() => updateStrokeWidth(currentStrokeWidth + STROKE_WIDTH_STEP)}
             >
               <PlusIcon className='size-3' />
             </Button>

ui/components/panels/TextBlocksPanel.tsx

@@ -1,28 +1,25 @@
 'use client'
 
-import { useTranslation } from 'react-i18next'
-import { motion } from 'motion/react'
-import { TextBlock } from '@/types'
 import { Languages, LoaderCircleIcon, Trash2Icon } from 'lucide-react'
-import { useTextBlocks } from '@/hooks/useTextBlocks'
-import { useGetLlm } from '@/lib/api/llm/llm'
-import { useEditorUiStore } from '@/lib/stores/editorUiStore'
-import { usePreferencesStore } from '@/lib/stores/preferencesStore'
-import { useProcessing } from '@/lib/machines'
+import { motion } from 'motion/react'
+import { useTranslation } from 'react-i18next'
+
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from '@/components/ui/accordion'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
 import { Button } from '@/components/ui/button'
 import { DraftTextarea } from '@/components/ui/draft-textarea'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { useTextBlocks } from '@/hooks/useTextBlocks'
+import { useGetLlm } from '@/lib/api/llm/llm'
+import { useProcessing } from '@/lib/machines'
+import { useEditorUiStore } from '@/lib/stores/editorUiStore'
+import { usePreferencesStore } from '@/lib/stores/preferencesStore'
+import { TextBlock } from '@/types'
 
 export function TextBlocksPanel() {
   const {
@@ -41,14 +38,13 @@ export function TextBlocksPanel() {
 
   if (!document) {
     return (
-      <div className='text-muted-foreground flex flex-1 items-center justify-center text-xs'>
+      <div className='flex flex-1 items-center justify-center text-xs text-muted-foreground'>
         {t('textBlocks.emptyPrompt')}
       </div>
     )
   }
 
-  const accordionValue =
-    selectedBlockIndex !== undefined ? selectedBlockIndex.toString() : ''
+  const accordionValue = selectedBlockIndex !== undefined ? selectedBlockIndex.toString() : ''
 
   const handleGenerate = (blockIndex: number) => {
     const documentId = useEditorUiStore.getState().currentDocumentId
@@ -78,11 +74,8 @@ export function TextBlocksPanel() {
   }
 
   return (
-    <div
-      className='flex min-h-0 flex-1 flex-col'
-      data-testid='panels-textblocks'
-    >
-      <div className='border-border text-muted-foreground flex items-center justify-between border-b px-2 py-1.5 text-xs font-semibold tracking-wide uppercase'>
+    <div className='flex min-h-0 flex-1 flex-col' data-testid='panels-textblocks'>
+      <div className='flex items-center justify-between border-b border-border px-2 py-1.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase'>
         <span data-testid='textblocks-count' data-count={textBlocks.length}>
           {t('textBlocks.title', { count: textBlocks.length })}
         </span>
@@ -94,7 +87,7 @@ export function TextBlocksPanel() {
       >
         <div className='p-2'>
           {textBlocks.length === 0 ? (
-            <p className='border-border text-muted-foreground rounded border border-dashed p-2 text-xs'>
+            <p className='rounded border border-dashed border-border p-2 text-xs text-muted-foreground'>
               {t('textBlocks.none')}
             </p>
           ) : (
@@ -172,9 +165,9 @@ function BlockCard({
       <AccordionItem
         value={index.toString()}
         data-selected={selected}
-        className='bg-card/90 ring-border data-[selected=true]:ring-primary overflow-hidden rounded text-xs ring-1'
+        className='overflow-hidden rounded bg-card/90 text-xs ring-1 ring-border data-[selected=true]:ring-primary'
       >
-        <AccordionTrigger className='data-[state=open]:bg-accent flex w-full cursor-pointer items-center gap-1.5 px-2 py-1.5 text-left transition outline-none hover:no-underline [&>svg]:hidden'>
+        <AccordionTrigger className='flex w-full cursor-pointer items-center gap-1.5 px-2 py-1.5 text-left transition outline-none hover:no-underline data-[state=open]:bg-accent [&>svg]:hidden'>
           <span
             className={`shrink-0 rounded px-1.5 py-0.5 text-center text-[10px] font-medium text-white tabular-nums ${
               selected ? 'bg-primary' : 'bg-muted-foreground/60'
@@ -186,33 +179,27 @@ function BlockCard({
           <div className='flex min-w-0 flex-1 items-center gap-1'>
             <span
               className={`shrink-0 rounded px-1 py-0.5 text-[9px] font-medium uppercase ${
-                hasOcr
-                  ? 'bg-rose-400/80 text-white'
-                  : 'bg-muted text-muted-foreground/50'
+                hasOcr ? 'bg-rose-400/80 text-white' : 'bg-muted text-muted-foreground/50'
               }`}
             >
               {t('textBlocks.ocrBadge')}
             </span>
             <span
               className={`shrink-0 rounded px-1 py-0.5 text-[9px] font-medium uppercase ${
-                hasTranslation
-                  ? 'bg-rose-400/80 text-white'
-                  : 'bg-muted text-muted-foreground/50'
+                hasTranslation ? 'bg-rose-400/80 text-white' : 'bg-muted text-muted-foreground/50'
               }`}
             >
               {t('textBlocks.translationBadge')}
             </span>
             {preview && (
-              <p className='text-muted-foreground line-clamp-1 min-w-0 flex-1 text-xs'>
-                {preview}
-              </p>
+              <p className='line-clamp-1 min-w-0 flex-1 text-xs text-muted-foreground'>{preview}</p>
             )}
           </div>
         </AccordionTrigger>
         <AccordionContent className='px-2 pt-1.5 pb-2 shadow-[inset_0_1px_0_0_var(--color-border)]'>
           <div className='space-y-1.5'>
             <div className='flex flex-col gap-0.5'>
-              <span className='text-muted-foreground text-[10px] uppercase'>
+              <span className='text-[10px] text-muted-foreground uppercase'>
                 {t('textBlocks.ocrLabel')}
               </span>
               <DraftTextarea
@@ -226,7 +213,7 @@ function BlockCard({
             </div>
             <div className='flex flex-col gap-0.5'>
               <div className='flex items-center justify-between'>
-                <span className='text-muted-foreground text-[10px] uppercase'>
+                <span className='text-[10px] text-muted-foreground uppercase'>
                   {t('textBlocks.translationLabel')}
                 </span>
                 <div className='flex items-center gap-0.5'>

ui/components/ui/accordion.tsx

@@ -1,14 +1,12 @@
 'use client'
 
-import * as React from 'react'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
 import { ChevronDownIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
   return <AccordionPrimitive.Root data-slot='accordion' {...props} />
 }
 
@@ -35,13 +33,13 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot='accordion-trigger'
         className={cn(
-          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
           className,
         )}
         {...props}
       >
         {children}
-        <ChevronDownIcon className='text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200' />
+        <ChevronDownIcon className='pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200' />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
@@ -55,7 +53,7 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Content
       data-slot='accordion-content'
-      className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
+      className='overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
       {...props}
     >
       <div className={cn('pt-0 pb-4', className)}>{children}</div>

ui/components/ui/alert-dialog.tsx

@@ -1,31 +1,23 @@
 'use client'
 
-import * as React from 'react'
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from 'react'
 
-import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
   return <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />
 }
 
 function AlertDialogTrigger({
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />
-  )
+  return <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />
 }
 
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot='alert-dialog-portal' {...props} />
-  )
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot='alert-dialog-portal' {...props} />
 }
 
 function AlertDialogOverlay({
@@ -36,7 +28,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot='alert-dialog-overlay'
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40',
+        'fixed inset-0 z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
         className,
       )}
       {...props}
@@ -54,7 +46,7 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot='alert-dialog-content'
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg',
+          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           className,
         )}
         {...props}
@@ -70,7 +62,7 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot='alert-dialog-title'
-      className={cn('text-foreground text-sm font-semibold', className)}
+      className={cn('text-sm font-semibold text-foreground', className)}
       {...props}
     />
   )
@@ -83,7 +75,7 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot='alert-dialog-description'
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn('text-sm text-muted-foreground', className)}
       {...props}
     />
   )
@@ -93,12 +85,7 @@ function AlertDialogAction({
   className,
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />
 }
 
 function AlertDialogCancel({

ui/components/ui/button.tsx

@@ -1,29 +1,27 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
         xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
         icon: 'size-9',
         'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",

ui/components/ui/color-picker.tsx

@@ -2,12 +2,9 @@
 
 import { useRef, useState, useCallback, useEffect } from 'react'
 import { HexColorInput, HexColorPicker } from 'react-colorful'
+
 import { Button } from '@/components/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { cn } from '@/lib/utils'
 
 type ColorPickerProps = {
@@ -60,8 +57,7 @@ export function ColorPicker({
   }, [localColor, onChange])
 
   const canUseEyeDropper =
-    typeof window !== 'undefined' &&
-    typeof (window as EyeDropperWindow).EyeDropper === 'function'
+    typeof window !== 'undefined' && typeof (window as EyeDropperWindow).EyeDropper === 'function'
 
   const handlePickFromScreen = async () => {
     const EyeDropperCtor = (window as EyeDropperWindow).EyeDropper
@@ -87,7 +83,7 @@ export function ColorPicker({
           data-testid={triggerTestId}
           disabled={disabled}
           className={cn(
-            'border-input hover:border-border flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border transition disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-input transition hover:border-border disabled:cursor-not-allowed disabled:opacity-50',
             className,
           )}
         >
@@ -120,7 +116,7 @@ export function ColorPicker({
               spellCheck={false}
               disabled={disabled}
               aria-label='Hex color code'
-              className='border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 h-8 min-w-0 flex-1 rounded-md border px-2 font-mono text-xs uppercase shadow-xs transition outline-none focus-visible:ring-[3px]'
+              className='h-8 min-w-0 flex-1 rounded-md border border-input bg-background px-2 font-mono text-xs uppercase shadow-xs transition outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50'
               onChange={(color) => {
                 const normalized = normalizeHex(color)
                 setLocalColor(normalized)

ui/components/ui/context-menu.tsx

@@ -1,56 +1,37 @@
 'use client'
 
-import * as React from 'react'
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function ContextMenu({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
   return <ContextMenuPrimitive.Root data-slot='context-menu' {...props} />
 }
 
 function ContextMenuTrigger({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot='context-menu-trigger' {...props} />
-  )
+  return <ContextMenuPrimitive.Trigger data-slot='context-menu-trigger' {...props} />
 }
 
-function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot='context-menu-group' {...props} />
-  )
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot='context-menu-group' {...props} />
 }
 
-function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot='context-menu-portal' {...props} />
-  )
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot='context-menu-portal' {...props} />
 }
 
-function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
   return <ContextMenuPrimitive.Sub data-slot='context-menu-sub' {...props} />
 }
 
 function ContextMenuRadioGroup({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot='context-menu-radio-group'
-      {...props}
-    />
-  )
+  return <ContextMenuPrimitive.RadioGroup data-slot='context-menu-radio-group' {...props} />
 }
 
 function ContextMenuSubTrigger({
@@ -66,7 +47,7 @@ function ContextMenuSubTrigger({
       data-slot='context-menu-sub-trigger'
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className,
       )}
       {...props}
@@ -85,7 +66,7 @@ function ContextMenuSubContent({
     <ContextMenuPrimitive.SubContent
       data-slot='context-menu-sub-content'
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         className,
       )}
       {...props}
@@ -102,7 +83,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot='context-menu-content'
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          'z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           className,
         )}
         {...props}
@@ -126,7 +107,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive",
         className,
       )}
       {...props}
@@ -144,7 +125,7 @@ function ContextMenuCheckboxItem({
     <ContextMenuPrimitive.CheckboxItem
       data-slot='context-menu-checkbox-item'
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -169,7 +150,7 @@ function ContextMenuRadioItem({
     <ContextMenuPrimitive.RadioItem
       data-slot='context-menu-radio-item'
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -195,10 +176,7 @@ function ContextMenuLabel({
     <ContextMenuPrimitive.Label
       data-slot='context-menu-label'
       data-inset={inset}
-      className={cn(
-        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
-        className,
-      )}
+      className={cn('px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8', className)}
       {...props}
     />
   )
@@ -211,23 +189,17 @@ function ContextMenuSeparator({
   return (
     <ContextMenuPrimitive.Separator
       data-slot='context-menu-separator'
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
       {...props}
     />
   )
 }
 
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<'span'>) {
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot='context-menu-shortcut'
-      className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className,
-      )}
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
       {...props}
     />
   )

ui/components/ui/dialog.tsx

@@ -1,24 +1,19 @@
 'use client'
 
-import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as React from 'react'
+
 import { cn } from '@/lib/utils'
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot='dialog' {...props} />
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
   return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
   return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />
 }
 
@@ -30,7 +25,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot='dialog-overlay'
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40',
+        'fixed inset-0 z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
         className,
       )}
       {...props}
@@ -49,7 +44,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot='dialog-content'
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-lg outline-none',
+          'fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-background shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           className,
         )}
         {...props}
@@ -60,14 +55,11 @@ function DialogContent({
   )
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
       data-slot='dialog-title'
-      className={cn('text-foreground text-sm font-semibold', className)}
+      className={cn('text-sm font-semibold text-foreground', className)}
       {...props}
     />
   )
@@ -80,7 +72,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot='dialog-description'
-      className={cn('text-muted-foreground text-xs', className)}
+      className={cn('text-xs text-muted-foreground', className)}
       {...props}
     />
   )

ui/components/ui/draft-textarea.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
+
 import { Textarea } from '@/components/ui/textarea'
 
 export type DraftTextareaProps = Omit<

ui/components/ui/font-select.tsx

@@ -1,16 +1,13 @@
 'use client'
 
-import { useRef, useState, useMemo, useCallback, useEffect } from 'react'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { CheckIcon, ChevronDownIcon } from 'lucide-react'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react'
+
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
-import { cn } from '@/lib/utils'
 import { fetchGoogleFont } from '@/lib/api/system/system'
+import { cn } from '@/lib/utils'
 
 const ITEM_HEIGHT = 28
 const MAX_VISIBLE = 10
@@ -37,14 +34,8 @@ type FontSelectProps = {
   'data-testid'?: string
 }
 
-function useGoogleFontPreview(
-  family: string,
-  source: string,
-  isVisible: boolean,
-) {
-  const [state, setState] = useState<FontLoadState>(
-    source === 'system' ? 'ready' : 'idle',
-  )
+function useGoogleFontPreview(family: string, source: string, isVisible: boolean) {
+  const [state, setState] = useState<FontLoadState>(source === 'system' ? 'ready' : 'idle')
   const stateRef = useRef(state)
   stateRef.current = state
 
@@ -92,17 +83,13 @@ function FontRow({
   isVisible: boolean
   onClick: () => void
 }) {
-  const loadState = useGoogleFontPreview(
-    font.familyName,
-    font.source,
-    isVisible,
-  )
+  const loadState = useGoogleFontPreview(font.familyName, font.source, isVisible)
 
   return (
     <button
       type='button'
       className={cn(
-        'hover:bg-accent hover:text-accent-foreground absolute left-0 flex w-full cursor-default items-center gap-1.5 rounded-sm px-2 text-xs select-none',
+        'absolute left-0 flex w-full cursor-default items-center gap-1.5 rounded-sm px-2 text-xs select-none hover:bg-accent hover:text-accent-foreground',
         selected && 'bg-accent',
       )}
       style={{
@@ -116,7 +103,7 @@ function FontRow({
       </span>
       <span className='truncate'>{font.familyName}</span>
       {font.source === 'google' && (
-        <span className='text-muted-foreground ml-auto shrink-0 text-[9px]'>
+        <span className='ml-auto shrink-0 text-[9px] text-muted-foreground'>
           {loadState === 'loading' ? '...' : 'G'}
         </span>
       )}
@@ -144,9 +131,7 @@ export function FontSelect({
   const filtered = useMemo(() => {
     let result = options
     if (categoryFilter) {
-      result = result.filter(
-        (f) => f.source === 'system' || f.category === categoryFilter,
-      )
+      result = result.filter((f) => f.source === 'system' || f.category === categoryFilter)
     }
     if (search) {
       const lower = search.toLowerCase()
@@ -190,7 +175,7 @@ export function FontSelect({
         disabled={disabled}
         data-testid={props['data-testid']}
         className={cn(
-          "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50 flex h-7 w-full items-center justify-between gap-1.5 rounded-md border bg-transparent px-2 py-1 text-xs whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-7 w-full items-center justify-between gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 text-xs whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='text-'])]:text-muted-foreground",
           triggerClassName,
         )}
         style={triggerStyle}
@@ -211,49 +196,33 @@ export function FontSelect({
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder='Search fonts…'
-          className='placeholder:text-muted-foreground w-full border-b bg-transparent px-2 py-1.5 text-xs outline-none'
+          className='w-full border-b bg-transparent px-2 py-1.5 text-xs outline-none placeholder:text-muted-foreground'
         />
         <ScrollArea className='border-b'>
           <div className='flex gap-0.5 px-1.5 py-1'>
-            {['all', 'hand', 'display', 'sans', 'serif', 'mono'].map(
-              (cat, i) => {
-                const full = [
-                  'all',
-                  'handwriting',
-                  'display',
-                  'sans-serif',
-                  'serif',
-                  'monospace',
-                ][i]
-                const active =
-                  cat === 'all' ? !categoryFilter : categoryFilter === full
-                return (
-                  <button
-                    key={cat}
-                    type='button'
-                    className={cn(
-                      'shrink-0 rounded-full px-1.5 py-px text-[9px]',
-                      active
-                        ? 'bg-primary text-primary-foreground'
-                        : 'bg-muted text-muted-foreground hover:bg-accent',
-                    )}
-                    onClick={() =>
-                      setCategoryFilter(cat === 'all' ? null : full)
-                    }
-                  >
-                    {cat.charAt(0).toUpperCase() + cat.slice(1)}
-                  </button>
-                )
-              },
-            )}
+            {['all', 'hand', 'display', 'sans', 'serif', 'mono'].map((cat, i) => {
+              const full = ['all', 'handwriting', 'display', 'sans-serif', 'serif', 'monospace'][i]
+              const active = cat === 'all' ? !categoryFilter : categoryFilter === full
+              return (
+                <button
+                  key={cat}
+                  type='button'
+                  className={cn(
+                    'shrink-0 rounded-full px-1.5 py-px text-[9px]',
+                    active
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted text-muted-foreground hover:bg-accent',
+                  )}
+                  onClick={() => setCategoryFilter(cat === 'all' ? null : full)}
+                >
+                  {cat.charAt(0).toUpperCase() + cat.slice(1)}
+                </button>
+              )
+            })}
           </div>
           <ScrollBar orientation='horizontal' />
         </ScrollArea>
-        <ScrollArea
-          className='relative'
-          style={{ height: listHeight }}
-          viewportRef={viewportRef}
-        >
+        <ScrollArea className='relative' style={{ height: listHeight }} viewportRef={viewportRef}>
           <div
             style={{
               height: virtualizer.getTotalSize(),
@@ -262,8 +231,7 @@ export function FontSelect({
           >
             {virtualizer.getVirtualItems().map((vi) => {
               const font = filtered[vi.index]
-              const selected =
-                font.postScriptName === value || font.familyName === value
+              const selected = font.postScriptName === value || font.familyName === value
               return (
                 <FontRow
                   key={vi.key}
@@ -282,9 +250,7 @@ export function FontSelect({
           </div>
         </ScrollArea>
         {filtered.length === 0 && (
-          <div className='text-muted-foreground px-2 py-4 text-center text-xs'>
-            No fonts found
-          </div>
+          <div className='px-2 py-4 text-center text-xs text-muted-foreground'>No fonts found</div>
         )}
       </PopoverContent>
     </Popover>

ui/components/ui/input.tsx

@@ -8,9 +8,9 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot='input'
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        'h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+        'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
         className,
       )}
       {...props}

ui/components/ui/label.tsx

@@ -1,14 +1,11 @@
 'use client'
 
-import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       data-slot='label'

ui/components/ui/menubar.tsx

@@ -1,20 +1,17 @@
 'use client'
 
-import * as React from 'react'
 import * as MenubarPrimitive from '@radix-ui/react-menubar'
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function Menubar({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
   return (
     <MenubarPrimitive.Root
       data-slot='menubar'
       className={cn(
-        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
+        'flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs',
         className,
       )}
       {...props}
@@ -22,30 +19,20 @@ function Menubar({
   )
 }
 
-function MenubarMenu({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
   return <MenubarPrimitive.Menu data-slot='menubar-menu' {...props} />
 }
 
-function MenubarGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
   return <MenubarPrimitive.Group data-slot='menubar-group' {...props} />
 }
 
-function MenubarPortal({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
   return <MenubarPrimitive.Portal data-slot='menubar-portal' {...props} />
 }
 
-function MenubarRadioGroup({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
-    <MenubarPrimitive.RadioGroup data-slot='menubar-radio-group' {...props} />
-  )
+function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup data-slot='menubar-radio-group' {...props} />
 }
 
 function MenubarTrigger({
@@ -56,7 +43,7 @@ function MenubarTrigger({
     <MenubarPrimitive.Trigger
       data-slot='menubar-trigger'
       className={cn(
-        'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+        'flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         className,
       )}
       {...props}
@@ -79,7 +66,7 @@ function MenubarContent({
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          'z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           className,
         )}
         {...props}
@@ -103,7 +90,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive",
         className,
       )}
       {...props}
@@ -121,7 +108,7 @@ function MenubarCheckboxItem({
     <MenubarPrimitive.CheckboxItem
       data-slot='menubar-checkbox-item'
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -146,7 +133,7 @@ function MenubarRadioItem({
     <MenubarPrimitive.RadioItem
       data-slot='menubar-radio-item'
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -172,10 +159,7 @@ function MenubarLabel({
     <MenubarPrimitive.Label
       data-slot='menubar-label'
       data-inset={inset}
-      className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
-        className,
-      )}
+      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
       {...props}
     />
   )
@@ -188,31 +172,23 @@ function MenubarSeparator({
   return (
     <MenubarPrimitive.Separator
       data-slot='menubar-separator'
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
       {...props}
     />
   )
 }
 
-function MenubarShortcut({
-  className,
-  ...props
-}: React.ComponentProps<'span'>) {
+function MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot='menubar-shortcut'
-      className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className,
-      )}
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
       {...props}
     />
   )
 }
 
-function MenubarSub({
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
   return <MenubarPrimitive.Sub data-slot='menubar-sub' {...props} />
 }
 
@@ -229,7 +205,7 @@ function MenubarSubTrigger({
       data-slot='menubar-sub-trigger'
       data-inset={inset}
       className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+        'flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
         className,
       )}
       {...props}
@@ -248,7 +224,7 @@ function MenubarSubContent({
     <MenubarPrimitive.SubContent
       data-slot='menubar-sub-content'
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
         className,
       )}
       {...props}

ui/components/ui/popover.tsx

@@ -1,25 +1,19 @@
 'use client'
 
-import * as React from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot='popover' {...props} />
 }
 
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
   return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />
 }
 
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
   return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />
 }
 
@@ -36,7 +30,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-none',
+          'z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           className,
         )}
         {...props}

ui/components/ui/progress.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -13,15 +13,12 @@ function Progress({
   return (
     <ProgressPrimitive.Root
       data-slot='progress'
-      className={cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
-        className,
-      )}
+      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
       {...props}
     >
       <ProgressPrimitive.Indicator
         data-slot='progress-indicator'
-        className='bg-primary h-full w-full flex-1 rounded-full transition-transform duration-300 ease-in-out'
+        className='h-full w-full flex-1 rounded-full bg-primary transition-transform duration-300 ease-in-out'
         style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
       />
     </ProgressPrimitive.Root>

ui/components/ui/scroll-area.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -25,7 +25,7 @@ function ScrollArea({
         ref={viewportRef}
         data-slot='scroll-area-viewport'
         className={cn(
-          'focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1',
+          'size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1',
           viewportClassName,
         )}
       >
@@ -48,17 +48,15 @@ function ScrollBar({
       orientation={orientation}
       className={cn(
         'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' &&
-          'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' &&
-          'h-2.5 flex-col border-t border-t-transparent',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
         className,
       )}
       {...props}
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot='scroll-area-thumb'
-        className='bg-border relative flex-1 rounded-full'
+        className='relative flex-1 rounded-full bg-border'
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   )

ui/components/ui/select.tsx

@@ -1,26 +1,20 @@
 'use client'
 
-import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot='select' {...props} />
 }
 
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
   return <SelectPrimitive.Group data-slot='select-group' {...props} />
 }
 
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
   return <SelectPrimitive.Value data-slot='select-value' {...props} />
 }
 
@@ -37,7 +31,7 @@ function SelectTrigger({
       data-slot='select-trigger'
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent px-2 py-1 text-xs whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 text-xs whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className,
       )}
       {...props}
@@ -62,7 +56,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot='select-content'
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          'relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
@@ -87,14 +81,11 @@ function SelectContent({
   )
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
       data-slot='select-label'
-      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      className={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
       {...props}
     />
   )
@@ -109,7 +100,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot='select-item'
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1 pr-6 pl-1.5 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-1.5",
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1 pr-6 pl-1.5 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-1.5",
         className,
       )}
       {...props}
@@ -134,7 +125,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot='select-separator'
-      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
       {...props}
     />
   )
@@ -147,10 +138,7 @@ function SelectScrollUpButton({
   return (
     <SelectPrimitive.ScrollUpButton
       data-slot='select-scroll-up-button'
-      className={cn(
-        'flex cursor-default items-center justify-center py-1',
-        className,
-      )}
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
       {...props}
     >
       <ChevronUpIcon className='size-4' />
@@ -165,10 +153,7 @@ function SelectScrollDownButton({
   return (
     <SelectPrimitive.ScrollDownButton
       data-slot='select-scroll-down-button'
-      className={cn(
-        'flex cursor-default items-center justify-center py-1',
-        className,
-      )}
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
       {...props}
     >
       <ChevronDownIcon className='size-4' />

ui/components/ui/separator.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -17,7 +17,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
         className,
       )}
       {...props}

ui/components/ui/slider.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -14,12 +14,7 @@ function Slider({
   ...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
   const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
     [value, defaultValue, min, max],
   )
 
@@ -39,13 +34,13 @@ function Slider({
       <SliderPrimitive.Track
         data-slot='slider-track'
         className={cn(
-          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+          'relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
         )}
       >
         <SliderPrimitive.Range
           data-slot='slider-range'
           className={cn(
-            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+            'absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
           )}
         />
       </SliderPrimitive.Track>
@@ -53,7 +48,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot='slider-thumb'
           key={index}
-          className='border-primary ring-ring/50 bg-background block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50'
+          className='block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50'
         />
       ))}
     </SliderPrimitive.Root>