Run oxfmt across repo, add format script and docs

Add .oxfmtignore to skip generated bindings and wasm-pack output.
Add npm format script, update DEVELOPMENT.md for Vite+ toolchain,
and format all non-generated files with oxfmt.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src-web/components/Settings/SettingsTheme.tsx

@@ -1,48 +1,48 @@
-import { patchModel, settingsAtom } from '@yaakapp-internal/models';
-import { useAtomValue } from 'jotai';
-import { lazy, Suspense } from 'react';
-import { activeWorkspaceAtom } from '../../hooks/useActiveWorkspace';
-import { useResolvedAppearance } from '../../hooks/useResolvedAppearance';
-import { useResolvedTheme } from '../../hooks/useResolvedTheme';
-import type { ButtonProps } from '../core/Button';
-import { Heading } from '../core/Heading';
-import type { IconProps } from '../core/Icon';
-import { Icon } from '../core/Icon';
-import { IconButton } from '../core/IconButton';
-import { Link } from '../core/Link';
-import type { SelectProps } from '../core/Select';
-import { Select } from '../core/Select';
-import { HStack, VStack } from '../core/Stacks';
+import { patchModel, settingsAtom } from "@yaakapp-internal/models";
+import { useAtomValue } from "jotai";
+import { lazy, Suspense } from "react";
+import { activeWorkspaceAtom } from "../../hooks/useActiveWorkspace";
+import { useResolvedAppearance } from "../../hooks/useResolvedAppearance";
+import { useResolvedTheme } from "../../hooks/useResolvedTheme";
+import type { ButtonProps } from "../core/Button";
+import { Heading } from "../core/Heading";
+import type { IconProps } from "../core/Icon";
+import { Icon } from "../core/Icon";
+import { IconButton } from "../core/IconButton";
+import { Link } from "../core/Link";
+import type { SelectProps } from "../core/Select";
+import { Select } from "../core/Select";
+import { HStack, VStack } from "../core/Stacks";
 
-const Editor = lazy(() => import('../core/Editor/Editor').then((m) => ({ default: m.Editor })));
+const Editor = lazy(() => import("../core/Editor/Editor").then((m) => ({ default: m.Editor })));
 
-const buttonColors: ButtonProps['color'][] = [
-  'primary',
-  'info',
-  'success',
-  'notice',
-  'warning',
-  'danger',
-  'secondary',
-  'default',
+const buttonColors: ButtonProps["color"][] = [
+  "primary",
+  "info",
+  "success",
+  "notice",
+  "warning",
+  "danger",
+  "secondary",
+  "default",
 ];
 
-const icons: IconProps['icon'][] = [
-  'info',
-  'box',
-  'update',
-  'alert_triangle',
-  'arrow_big_right_dash',
-  'download',
-  'copy',
-  'magic_wand',
-  'settings',
-  'trash',
-  'sparkles',
-  'pencil',
-  'paste',
-  'search',
-  'send_horizontal',
+const icons: IconProps["icon"][] = [
+  "info",
+  "box",
+  "update",
+  "alert_triangle",
+  "arrow_big_right_dash",
+  "download",
+  "copy",
+  "magic_wand",
+  "settings",
+  "trash",
+  "sparkles",
+  "pencil",
+  "paste",
+  "search",
+  "send_horizontal",
 ];
 
 export function SettingsTheme() {
@@ -55,14 +55,14 @@ export function SettingsTheme() {
     return null;
   }
 
-  const lightThemes: SelectProps<string>['options'] = activeTheme.data.themes
+  const lightThemes: SelectProps<string>["options"] = activeTheme.data.themes
     .filter((theme) => !theme.dark)
     .map((theme) => ({
       label: theme.label,
       value: theme.id,
     }));
 
-  const darkThemes: SelectProps<string>['options'] = activeTheme.data.themes
+  const darkThemes: SelectProps<string>["options"] = activeTheme.data.themes
     .filter((theme) => theme.dark)
     .map((theme) => ({
       label: theme.label,
@@ -74,7 +74,7 @@ export function SettingsTheme() {
       <div className="mb-3">
         <Heading>Theme</Heading>
         <p className="text-text-subtle">
-          Make Yaak your own by selecting a theme, or{' '}
+          Make Yaak your own by selecting a theme, or{" "}
           <Link href="https://yaak.app/docs/plugin-development/plugins-quick-start">
             Create Your Own
           </Link>
@@ -88,13 +88,13 @@ export function SettingsTheme() {
         value={settings.appearance}
         onChange={(appearance) => patchModel(settings, { appearance })}
         options={[
-          { label: 'Automatic', value: 'system' },
-          { label: 'Light', value: 'light' },
-          { label: 'Dark', value: 'dark' },
+          { label: "Automatic", value: "system" },
+          { label: "Light", value: "light" },
+          { label: "Dark", value: "dark" },
         ]}
       />
       <HStack space={2}>
-        {(settings.appearance === 'system' || settings.appearance === 'light') && (
+        {(settings.appearance === "system" || settings.appearance === "light") && (
           <Select
             hideLabel
             leftSlot={<Icon icon="sun" color="secondary" />}
@@ -107,7 +107,7 @@ export function SettingsTheme() {
             onChange={(themeLight) => patchModel(settings, { themeLight })}
           />
         )}
-        {(settings.appearance === 'system' || settings.appearance === 'dark') && (
+        {(settings.appearance === "system" || settings.appearance === "dark") && (
           <Select
             hideLabel
             name="darkTheme"
@@ -127,7 +127,7 @@ export function SettingsTheme() {
         className="mt-3 w-full bg-surface p-3 border border-dashed border-border-subtle rounded overflow-x-auto"
       >
         <HStack className="text" space={1.5}>
-          <Icon icon={appearance === 'dark' ? 'moon' : 'sun'} />
+          <Icon icon={appearance === "dark" ? "moon" : "sun"} />
           <strong>{activeTheme.data.active.label}</strong>
           <em>(preview)</em>
         </HStack>
@@ -138,7 +138,7 @@ export function SettingsTheme() {
               color={c}
               size="2xs"
               iconSize="xs"
-              icon={icons[i % icons.length] ?? 'info'}
+              icon={icons[i % icons.length] ?? "info"}
               iconClassName="text"
               title={`${c}`}
             />
@@ -150,7 +150,7 @@ export function SettingsTheme() {
               variant="border"
               size="2xs"
               iconSize="xs"
-              icon={icons[i % icons.length] ?? 'info'}
+              icon={icons[i % icons.length] ?? "info"}
               iconClassName="text"
               title={`${c}`}
             />
@@ -159,11 +159,11 @@ export function SettingsTheme() {
         <Suspense>
           <Editor
             defaultValue={[
-              'let foo = { // Demo code editor',
+              "let foo = { // Demo code editor",
               '  foo: ("bar" || "baz" ?? \'qux\'),',
-              '  baz: [1, 10.2, null, false, true],',
-              '};',
-            ].join('\n')}
+              "  baz: [1, 10.2, null, false, true],",
+              "};",
+            ].join("\n")}
             heightMode="auto"
             language="javascript"
             stateKey={null}